@cube-dev/ui-kit 0.0.0-canary-23bc0fd → 0.0.0-canary-9ea74e0

package/es/components/content/Footer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -10,7 +10,7 @@ import { forwardRef } from 'react';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
-const RawFooter = tasty({
+const FooterElement = tasty({
     qa: 'Footer',
     'data-id': 'Footer',
     styles: {
@@ -22,7 +22,7 @@ const RawFooter = tasty({
 export const Footer = forwardRef((props, ref) => {
     props = useSlotProps(props, 'footer');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(RawFooter, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(FooterElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/content/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -10,7 +10,7 @@ import { forwardRef } from 'react';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
-const RawHeader = tasty({
+const HeaderElement = tasty({
     qa: 'Header',
     as: 'header',
     styles: {
@@ -22,7 +22,7 @@ const RawHeader = tasty({
 export const Header = forwardRef((props, ref) => {
     props = useSlotProps(props, 'header');
     const styles = extractStyles(props, STYLE_LIST);
-    return (_jsx(RawHeader, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(HeaderElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/content/Paragraph.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

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

@@ -1,27 +1,43 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../../Base';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
-const DEFAULT_STYLES = {
-    display: 'block',
-    fill: '#dark.10',
-    height: '2x',
-    opacity: '.35',
-};
-const CSS = `
+import { CONTAINER_STYLES, filterBaseProps, tasty, } from '../../../tasty';
+import styled from 'styled-components';
+const PlaceholderElement = tasty({
+    role: 'alert',
+    'aria-live': 'polite',
+    'aria-label': 'Content is loading',
+    styles: {
+        display: 'block',
+        fill: '#dark.10',
+        height: '2x',
+        opacity: '.35',
+    },
+    styleProps: CONTAINER_STYLES,
+});
+const StyledPlaceholder = styled(PlaceholderElement) `
   --placeholder-animation-time: 1.4s;
   --placeholder-animation-size: calc((180rem + 100vw) / 3);
-  background-image: linear-gradient(135deg, rgba(var(--dark-color-rgb), .15) 0%, rgba(var(--dark-color-rgb), .15) 5%, rgba(var(--dark-color-rgb), 0) 35%, rgba(var(--dark-03-color-rgb), .2) 50%, rgba(var(--dark-03-color-rgb), 0) 65%, rgba(var(--dark-color-rgb), .15) 95%, rgba(var(--dark-color-rgb), .15) 100%);
+  background-image: linear-gradient(
+    135deg,
+    rgba(var(--dark-color-rgb), 0.15) 0%,
+    rgba(var(--dark-color-rgb), 0.15) 5%,
+    rgba(var(--dark-color-rgb), 0) 35%,
+    rgba(var(--dark-03-color-rgb), 0.2) 50%,
+    rgba(var(--dark-03-color-rgb), 0) 65%,
+    rgba(var(--dark-color-rgb), 0.15) 95%,
+    rgba(var(--dark-color-rgb), 0.15) 100%
+  );
   background-repeat: repeat;
   background-size: var(--placeholder-animation-size);
-  animation: placeholder-animation var(--placeholder-animation-time) linear infinite;
+  animation: placeholder-animation var(--placeholder-animation-time) linear
+    infinite;
 
   @keyframes placeholder-animation {
     0% {
@@ -33,14 +49,13 @@ const CSS = `
   }
 `;
 export const Placeholder = forwardRef((allProps, ref) => {
-    let { size = '2x', circle, ...props } = allProps;
-    const styles = extractStyles(props, CONTAINER_STYLES, {
-        ...DEFAULT_STYLES,
-        height: size,
-        width: circle ? size : false,
-        radius: circle ? '9999rem' : '1r',
-    });
-    return (_jsx(Base, { role: "region", css: CSS, ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    let { size = '2x', circle, styles, ...props } = allProps;
+    return (_jsx(StyledPlaceholder, { role: "region", ...filterBaseProps(props, { eventProps: true }), styles: {
+            height: size,
+            width: circle ? size : false,
+            radius: circle ? '9999rem' : '1r',
+            ...styles,
+        }, ref: ref }, void 0));
 });
 
         

package/es/components/content/PrismCode/PrismCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect } from 'react';
 import Prism from 'prismjs';
 import { CONTAINER_STYLES, tasty, } from '../../../tasty';
-const RawPre = tasty({
+const PreElement = tasty({
     as: 'pre',
     qa: 'CodeBlock',
     styleProps: CONTAINER_STYLES.concat([]),
@@ -26,7 +26,7 @@ function PrismCode(props, ref) {
     useEffect(() => {
         Prism.highlightAll();
     });
-    return (_jsx(RawPre, { ref: ref, className: "cube-prism-code", ...otherProps, children: _jsx("code", { "data-element": "Code", className: `language-${language}`, children: code }, void 0) }, void 0));
+    return (_jsx(PreElement, { ref: ref, className: "cube-prism-code", ...otherProps, children: _jsx("code", { "data-element": "Code", className: `language-${language}`, children: code }, void 0) }, void 0));
 }
 /**
  * Code block with syntax highlighting

package/es/components/content/Result/Result.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/content/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/content/Tag/Tag.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -11,9 +11,8 @@ import THEMES from '../../../data/themes';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 import { Action } from '../../actions/Action';
 import { Suffix } from '../../layout/Suffix';
-import { Block } from '../../Block';
 import { CloseOutlined } from '@ant-design/icons';
-const RawTag = tasty({
+const TagElement = tasty({
     qa: 'Tag',
     role: 'status',
     styles: {
@@ -52,14 +51,13 @@ const RawTag = tasty({
                 return map;
             }, {}),
         },
-    },
-});
-const RawContent = tasty(Block, {
-    styles: {
-        width: 'max 100%',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        pointerEvents: 'none',
+        Content: {
+            display: 'block',
+            width: 'max 100%',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+        },
     },
 });
 const CloseAction = tasty(Action, {
@@ -78,9 +76,9 @@ const CloseAction = tasty(Action, {
     },
 });
 const Tag = (allProps, ref) => {
-    let { type, isClosable, onClose, children, ...props } = allProps;
+    let { type, isClosable, onClose, closeButtonStyles, children, ...props } = allProps;
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsxs(RawTag, { ...filterBaseProps(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [_jsx(RawContent, { mods: { closable: isClosable }, children: children }, void 0), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { onPress: onClose, children: _jsx(CloseOutlined, { style: {
+    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [_jsx("div", { "data-element": "Content", children: children }, void 0), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseOutlined, { style: {
                             fontSize: 'calc(var(--font-size) - (var(--border-width) * 2))',
                         } }, void 0) }, void 0) }, void 0)) : undefined] }, void 0));
 };

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ export const TEXT_PROP_MAP = {
     weight: 'fontWeight',
     italic: 'fontStyle',
 };
-const RawText = tasty({
+const TextElement = tasty({
     qa: 'Text',
     as: 'span',
     styles: {
@@ -46,7 +46,7 @@ const _Text = forwardRef(function Text(allProps, ref) {
     allProps = useSlotProps(allProps, 'text');
     const { as, qa, block, styleName, ellipsis, nowrap, ...props } = allProps;
     const styles = extractStyles(props, STYLE_LIST, {}, TEXT_PROP_MAP);
-    return (_jsx(RawText, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
+    return (_jsx(TextElement, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
             nowrap,
             ellipsis,
         }, block: !!(block || ellipsis), ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));

package/es/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -11,7 +11,7 @@ import { TEXT_PROP_MAP } from './Text';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
 const STYLE_LIST = [...TEXT_STYLES, ...CONTAINER_STYLES];
-const RawTitle = tasty({
+const TitleElement = tasty({
     qa: 'Title',
     as: 'h1',
     styles: {
@@ -41,7 +41,7 @@ const _Title = forwardRef(({ qa, as, styleName, inline, nowrap, ellipsis, level,
     props = useSlotProps(props, 'heading');
     const tag = `h${level || 1}`;
     const styles = extractStyles(props, STYLE_LIST, {}, TEXT_PROP_MAP);
-    return (_jsx(RawTitle, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
+    return (_jsx(TitleElement, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
             nowrap,
             ellipsis,
         }, inline: inline, ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));

package/es/components/forms/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -12,57 +12,62 @@ import { useCheckbox, useCheckboxGroupItem } from '@react-aria/checkbox';
 import { useHover } from '@react-aria/interactions';
 import { useToggleState } from '@react-stately/toggle';
 import { useProviderProps } from '../../../provider';
-import { BLOCK_STYLES, extractStyles, filterBaseProps, OUTER_STYLES, } from '../../../tasty';
-import { Base } from '../../Base';
+import { BLOCK_STYLES, Element, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
-import { useFormProps } from '../Form/Form';
+import { useFormProps } from '../Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
-import { useContextStyles } from '../../../providers/StyleProvider';
 const CheckOutlined = () => (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }, void 0) }, void 0));
 const IndeterminateOutline = () => (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }, void 0) }, void 0));
-const DEFAULT_STYLES = {
-    position: 'relative',
-    display: 'flex',
-    placeItems: 'center start',
-    gap: '1x',
-    flow: 'row',
-    preset: 'default',
-    cursor: 'pointer',
-};
-const INPUT_STYLES = {
-    display: 'grid',
-    placeItems: 'center',
-    radius: '.5r',
-    fill: {
-        '': '#white',
-        'checked | indeterminate': '#purple-text',
-        'invalid & !checked': '#white',
-        'invalid & checked': '#danger-text',
-        disabled: '#dark.12',
+const CheckboxWrapperElement = tasty({
+    as: 'label',
+    qa: 'CheckboxWrapper',
+    styles: {
+        position: 'relative',
+        display: 'flex',
+        placeItems: 'center start',
+        gap: '1x',
+        flow: 'row',
+        preset: 'default',
+        cursor: 'pointer',
     },
-    color: {
-        '': '#white',
-        'disabled & !checked & !indeterminate': '#clear',
+});
+const CheckboxElement = tasty({
+    qa: 'Checkbox',
+    styles: {
+        display: 'grid',
+        placeItems: 'center',
+        radius: '.5r',
+        fill: {
+            '': '#white',
+            'checked | indeterminate': '#purple-text',
+            'invalid & !checked': '#white',
+            'invalid & checked': '#danger-text',
+            disabled: '#dark.12',
+        },
+        color: {
+            '': '#white',
+            'disabled & !checked & !indeterminate': '#clear',
+        },
+        border: {
+            '': '#dark.30',
+            invalid: '#danger-text.50',
+            'disabled | ((indeterminate | checked) & !invalid)': '#clear',
+        },
+        width: '(2x - 2bw)',
+        height: '(2x - 2bw)',
+        outline: {
+            '': '#purple-03.0',
+            focused: '#purple-03',
+        },
+        transition: 'theme',
     },
-    border: {
-        '': '#dark.30',
-        invalid: '#danger-text.50',
-        'disabled | ((indeterminate | checked) & !invalid)': '#clear',
-    },
-    width: '(2x - 2bw)',
-    height: '(2x - 2bw)',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-    },
-    transition: 'theme',
-};
+});
 function Checkbox(props, ref) {
     props = castNullableIsSelected(props);
     let originalProps = props;
@@ -74,20 +79,10 @@ function Checkbox(props, ref) {
     // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
     // but since the checkbox won't move in and out of a group, it should be safe.
     let groupState = useContext(CheckboxGroupContext);
-    let wrapperContextStyles = useContextStyles('Checkbox_Wrapper', props);
-    let inputContextStyles = useContextStyles('Checkbox', props);
-    let labelContextStyles = useContextStyles('Checkbox_Label', props);
-    let styles = extractStyles(props, OUTER_STYLES, {
-        ...(insideForm && !groupState ? {} : DEFAULT_STYLES),
-        ...wrapperContextStyles,
-    });
-    let inputStyles = extractStyles(props, BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...inputContextStyles,
-    });
+    let styles = extractStyles(props, OUTER_STYLES);
+    let inputStyles = extractStyles(props, BLOCK_STYLES);
     labelStyles = {
         ...(insideForm && !groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),
-        ...labelContextStyles,
         ...labelStyles,
     };
     if (!insideForm) {
@@ -123,15 +118,16 @@ function Checkbox(props, ref) {
             console.warn('CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.');
         }
     }
-    let checkboxField = (_jsxs(Base, { qa: "CheckboxContainer", isHidden: isHidden, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(Base, { qa: "CheckboxIcon", mods: {
-                    checked: inputProps.checked,
-                    indeterminate: isIndeterminate,
-                    invalid: validationState === 'invalid',
-                    valid: validationState === 'valid',
-                    disabled: isDisabled,
-                    hovered: isHovered,
-                    focused: isFocused,
-                }, styles: inputStyles, children: markIcon }, void 0)] }, void 0));
+    const mods = {
+        checked: inputProps.checked,
+        indeterminate: isIndeterminate,
+        invalid: validationState === 'invalid',
+        valid: validationState === 'valid',
+        disabled: isDisabled,
+        hovered: isHovered,
+        focused: isFocused,
+    };
+    const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon }, void 0)] }, void 0));
     if (insideForm && !groupState) {
         return (_jsx(FieldWrapper, { ...{
                 as: 'label',
@@ -155,7 +151,7 @@ function Checkbox(props, ref) {
                 ref: domRef,
             } }, void 0));
     }
-    return (_jsxs(Base, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label && (_jsx(Base, { styles: labelStyles, mods: {
+    return (_jsxs(CheckboxWrapperElement, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label && (_jsx(Element, { styles: labelStyles, mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,

package/es/components/forms/Checkbox/CheckboxGroup.js

@@ -1,25 +1,22 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useDOMRef } from '@react-spectrum/utils';
-import { LABEL_STYLES } from '../Label';
 import { useProviderProps } from '../../../provider';
 import { useCheckboxGroup } from '@react-aria/checkbox';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
 import { FormContext, useFormProps } from '../Form/Form';
 import { CheckboxGroupContext } from './context';
-import { BLOCK_STYLES, extractStyles, OUTER_STYLES, } from '../../../tasty';
-import { Base } from '../../Base';
+import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
-import { useContextStyles } from '../../../providers/StyleProvider';
-const STYLES = {
+const WRAPPER_STYLES = {
     display: 'grid',
     gridColumns: {
         '': '1fr',
@@ -31,45 +28,34 @@ const STYLES = {
     },
     placeItems: 'baseline start',
 };
-const GROUP_STYLES = {
-    display: 'flex',
-    placeItems: 'start',
-    placeContent: 'start',
-    flow: {
-        '': 'column',
-        horizontal: 'row wrap',
+const CheckGroupElement = tasty({
+    qa: 'CheckboxGroup',
+    styles: {
+        display: 'flex',
+        placeItems: 'start',
+        placeContent: 'start',
+        flow: {
+            '': 'column',
+            horizontal: 'row wrap',
+        },
+        gap: {
+            '': '1x',
+            horizontal: '1x 2x',
+        },
+        padding: '(1x - 1bw) 0',
     },
-    gap: {
-        '': '1x',
-        horizontal: '1x 2x',
-    },
-    padding: '(1x - 1bw) 0',
-};
+});
 function CheckboxGroup(props, ref) {
     props = castNullableArrayValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
     let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, ...otherProps } = props;
     let domRef = useDOMRef(ref);
-    let wrapperContextStyles = useContextStyles('CheckboxGroup_Wrapper', props);
-    let groupContextStyles = useContextStyles('CheckboxGroup', props);
-    let labelContextStyles = useContextStyles('CheckboxGroup_Label', props);
-    let styles = extractStyles(otherProps, OUTER_STYLES, {
-        ...STYLES,
-        ...wrapperContextStyles,
-    });
-    let groupStyles = extractStyles(otherProps, BLOCK_STYLES, {
-        ...GROUP_STYLES,
-        ...groupContextStyles,
-    });
-    labelStyles = {
-        ...LABEL_STYLES,
-        ...labelContextStyles,
-        ...labelStyles,
-    };
+    let styles = extractStyles(otherProps, OUTER_STYLES, WRAPPER_STYLES);
+    let groupStyles = extractStyles(otherProps, BLOCK_STYLES);
     let state = useCheckboxGroupState(props);
     let { groupProps, labelProps } = useCheckboxGroup(props, state);
-    let radioGroup = (_jsx(Base, { qa: "CheckboxGroup", styles: groupStyles, mods: {
+    let radioGroup = (_jsx(CheckGroupElement, { styles: groupStyles, mods: {
             horizontal: orientation === 'horizontal',
         }, children: _jsx(FormContext.Provider, { value: {
                 isDisabled,

package/es/components/forms/Checkbox/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/forms/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ import { tasty } from '../../tasty';
 import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { wrapNodeIfPlain } from '../../utils/react';
-const RawField = tasty({
+const FieldElement = tasty({
     qa: 'Field',
     styles: {
         display: 'grid',
@@ -45,7 +45,7 @@ const RawField = tasty({
         },
     },
 });
-const RawMessage = tasty({
+const MessageElement = tasty({
     qa: 'Field_Message',
     styles: {
         preset: 'default',
@@ -70,7 +70,7 @@ function FieldWrapper(props, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return (_jsxs(RawField, { as: as || 'div', ref: ref, mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(RawMessage, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
+    return (_jsxs(FieldElement, { as: as || 'div', ref: ref, mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
 }
 /**
  * A wrapper for form fields to provide additional decoration for inputs.

package/es/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/Field.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */