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

package/cjs/components/content/Divider.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,42 +10,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = 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 react_2 = require("../../utils/react");
-const DividerElement = (0, tasty_1.tasty)({
-    styles: {
-        gridArea: 'divider',
-        display: {
-            '': 'block',
-            text: 'grid',
-        },
-        gridColumns: '1fr auto 1fr',
-        placeItems: 'center stretch',
-        gap: '1x',
-        preset: 'c1',
-        height: {
-            '': '1bw 1bw',
-            text: 'auto',
-        },
-        fill: {
-            '': '#border',
-            text: 'none',
-        },
-        border: '0',
-        margin: '0',
-        Line: {
-            height: '1bw 1bw',
-            fill: '#border',
-        },
+const STYLE_LIST = [...tasty_1.OUTER_STYLES, ...tasty_1.BASE_STYLES, ...tasty_1.COLOR_STYLES];
+const DEFAULT_STYLES = {
+    gridArea: 'divider',
+    display: {
+        '': 'block',
+        text: 'grid',
     },
-    styleProps: [...tasty_1.OUTER_STYLES, ...tasty_1.BASE_STYLES, ...tasty_1.COLOR_STYLES],
-});
+    gridColumns: '1fr auto 1fr',
+    placeItems: 'center stretch',
+    gap: '1x',
+    preset: 'c1',
+    height: {
+        '': '1bw 1bw',
+        text: 'auto',
+    },
+    fill: {
+        '': '#border',
+        text: 'none',
+    },
+    border: '0',
+    margin: '0',
+    Line: {
+        height: '1bw 1bw',
+        fill: '#border',
+    },
+};
 exports.Divider = (0, react_1.forwardRef)((props, ref) => {
-    const { mods, children, styles, ...otherProps } = (0, react_2.useSlotProps)(props, 'divider');
-    return ((0, jsx_runtime_1.jsx)(DividerElement, { as: children ? 'div' : 'hr', role: children ? 'separator' : undefined, mods: {
+    const { mods, children, ...otherProps } = (0, react_2.useSlotProps)(props, 'divider');
+    const styles = (0, tasty_1.extractStyles)(otherProps, STYLE_LIST, DEFAULT_STYLES);
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { as: children ? 'div' : 'hr', role: children ? 'separator' : undefined, mods: {
             text: !!children,
             ...mods,
-        }, ...(0, tasty_1.filterBaseProps)(otherProps, { eventProps: true }), styles: styles, ref: ref, children: children && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Line" }, void 0), (0, jsx_runtime_1.jsx)("div", { children: children }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": "Line" }, void 0)] }, void 0)) }, void 0));
+        }, "data-id": "Divider", ...(0, tasty_1.filterBaseProps)(otherProps, { eventProps: true }), styles: styles, ref: ref, children: children && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Line" }, void 0), (0, jsx_runtime_1.jsx)("div", { children: children }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": "Line" }, void 0)] }, void 0)) }, void 0));
 });
 
         

package/cjs/components/content/Footer.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 FooterElement = (0, tasty_1.tasty)({
+const RawFooter = (0, tasty_1.tasty)({
     qa: 'Footer',
     'data-id': 'Footer',
     styles: {
@@ -25,7 +25,7 @@ const FooterElement = (0, tasty_1.tasty)({
 exports.Footer = (0, react_1.forwardRef)((props, ref) => {
     props = (0, react_2.useSlotProps)(props, 'footer');
     const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST);
-    return ((0, jsx_runtime_1.jsx)(FooterElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return ((0, jsx_runtime_1.jsx)(RawFooter, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/content/Header.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 HeaderElement = (0, tasty_1.tasty)({
+const RawHeader = (0, tasty_1.tasty)({
     qa: 'Header',
     as: 'header',
     styles: {
@@ -25,7 +25,7 @@ const HeaderElement = (0, tasty_1.tasty)({
 exports.Header = (0, react_1.forwardRef)((props, ref) => {
     props = (0, react_2.useSlotProps)(props, 'header');
     const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST);
-    return ((0, jsx_runtime_1.jsx)(HeaderElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return ((0, jsx_runtime_1.jsx)(RawHeader, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/content/Paragraph.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/Placeholder/Placeholder.js

@@ -1,48 +1,30 @@
 /**
  * @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.
  */
 
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Placeholder = 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 styled_components_1 = __importDefault(require("styled-components"));
-const PlaceholderElement = (0, tasty_1.tasty)({
-    role: 'alert',
-    'aria-live': 'polite',
-    'aria-label': 'Content is loading',
-    styles: {
-        display: 'block',
-        fill: '#dark.10',
-        height: '2x',
-        opacity: '.35',
-    },
-});
-const StyledPlaceholder = (0, styled_components_1.default)(PlaceholderElement) `
+const DEFAULT_STYLES = {
+    display: 'block',
+    fill: '#dark.10',
+    height: '2x',
+    opacity: '.35',
+};
+const CSS = `
   --placeholder-animation-time: 1.4s;
   --placeholder-animation-size: calc((180rem + 100vw) / 3);
-  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-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-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% {
@@ -55,13 +37,13 @@ const StyledPlaceholder = (0, styled_components_1.default)(PlaceholderElement) `
 `;
 exports.Placeholder = (0, react_1.forwardRef)((allProps, ref) => {
     let { size = '2x', circle, ...props } = allProps;
-    let styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsx)(StyledPlaceholder, { role: "region", ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: {
-            height: size,
-            width: circle ? size : false,
-            radius: circle ? '9999rem' : '1r',
-            ...styles,
-        }, ref: ref }, void 0));
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, {
+        ...DEFAULT_STYLES,
+        height: size,
+        width: circle ? size : false,
+        radius: circle ? '9999rem' : '1r',
+    });
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { role: "region", css: CSS, ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/content/PrismCode/PrismCode.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 prismjs_1 = __importDefault(require("prismjs"));
 const tasty_1 = require("../../../tasty");
-const PreElement = (0, tasty_1.tasty)({
+const RawPre = (0, tasty_1.tasty)({
     as: 'pre',
     qa: 'CodeBlock',
     styleProps: tasty_1.CONTAINER_STYLES.concat([]),
@@ -32,7 +32,7 @@ function PrismCode(props, ref) {
     (0, react_1.useEffect)(() => {
         prismjs_1.default.highlightAll();
     });
-    return ((0, jsx_runtime_1.jsx)(PreElement, { ref: ref, className: "cube-prism-code", ...otherProps, children: (0, jsx_runtime_1.jsx)("code", { "data-element": "Code", className: `language-${language}`, children: code }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(RawPre, { ref: ref, className: "cube-prism-code", ...otherProps, children: (0, jsx_runtime_1.jsx)("code", { "data-element": "Code", className: `language-${language}`, children: code }, void 0) }, void 0));
 }
 /**
  * Code block with syntax highlighting

package/cjs/components/content/Result/Result.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/Skeleton/Skeleton.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/Tag/Tag.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.
  */
 
@@ -17,8 +17,9 @@ const themes_1 = __importDefault(require("../../../data/themes"));
 const tasty_1 = require("../../../tasty");
 const Action_1 = require("../../actions/Action");
 const Suffix_1 = require("../../layout/Suffix");
+const Block_1 = require("../../Block");
 const icons_1 = require("@ant-design/icons");
-const TagElement = (0, tasty_1.tasty)({
+const RawTag = (0, tasty_1.tasty)({
     qa: 'Tag',
     role: 'status',
     styles: {
@@ -57,13 +58,14 @@ const TagElement = (0, tasty_1.tasty)({
                 return map;
             }, {}),
         },
-        Content: {
-            display: 'block',
-            width: 'max 100%',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            pointerEvents: 'none',
-        },
+    },
+});
+const RawContent = (0, tasty_1.tasty)(Block_1.Block, {
+    styles: {
+        width: 'max 100%',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        pointerEvents: 'none',
     },
 });
 const CloseAction = (0, tasty_1.tasty)(Action_1.Action, {
@@ -82,9 +84,9 @@ const CloseAction = (0, tasty_1.tasty)(Action_1.Action, {
     },
 });
 const Tag = (allProps, ref) => {
-    let { type, isClosable, onClose, closeButtonStyles, children, ...props } = allProps;
+    let { type, isClosable, onClose, children, ...props } = allProps;
     const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsxs)(TagElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Content", children: children }, void 0), isClosable ? ((0, jsx_runtime_1.jsx)(Suffix_1.Suffix, { outerGap: "0", children: (0, jsx_runtime_1.jsx)(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, { style: {
+    return ((0, jsx_runtime_1.jsxs)(RawTag, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [(0, jsx_runtime_1.jsx)(RawContent, { mods: { closable: isClosable }, children: children }, void 0), isClosable ? ((0, jsx_runtime_1.jsx)(Suffix_1.Suffix, { outerGap: "0", children: (0, jsx_runtime_1.jsx)(CloseAction, { onPress: onClose, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, { style: {
                             fontSize: 'calc(var(--font-size) - (var(--border-width) * 2))',
                         } }, void 0) }, void 0) }, void 0)) : undefined] }, void 0));
 };

package/cjs/components/content/Text.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.
  */
 
@@ -18,7 +18,7 @@ exports.TEXT_PROP_MAP = {
     weight: 'fontWeight',
     italic: 'fontStyle',
 };
-const TextElement = (0, tasty_1.tasty)({
+const RawText = (0, tasty_1.tasty)({
     qa: 'Text',
     as: 'span',
     styles: {
@@ -49,7 +49,7 @@ const _Text = (0, react_1.forwardRef)(function Text(allProps, ref) {
     allProps = (0, react_2.useSlotProps)(allProps, 'text');
     const { as, qa, block, styleName, ellipsis, nowrap, ...props } = allProps;
     const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST, {}, exports.TEXT_PROP_MAP);
-    return ((0, jsx_runtime_1.jsx)(TextElement, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
+    return ((0, jsx_runtime_1.jsx)(RawText, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
             nowrap,
             ellipsis,
         }, block: !!(block || ellipsis), ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));

package/cjs/components/content/Title.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,7 +14,7 @@ const Text_1 = require("./Text");
 const tasty_1 = require("../../tasty");
 const react_2 = require("../../utils/react");
 const STYLE_LIST = [...tasty_1.TEXT_STYLES, ...tasty_1.CONTAINER_STYLES];
-const TitleElement = (0, tasty_1.tasty)({
+const RawTitle = (0, tasty_1.tasty)({
     qa: 'Title',
     as: 'h1',
     styles: {
@@ -44,7 +44,7 @@ const _Title = (0, react_1.forwardRef)(({ qa, as, styleName, inline, nowrap, ell
     props = (0, react_2.useSlotProps)(props, 'heading');
     const tag = `h${level || 1}`;
     const styles = (0, tasty_1.extractStyles)(props, STYLE_LIST, {}, Text_1.TEXT_PROP_MAP);
-    return ((0, jsx_runtime_1.jsx)(TitleElement, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
+    return ((0, jsx_runtime_1.jsx)(RawTitle, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
             nowrap,
             ellipsis,
         }, inline: inline, ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));

package/cjs/components/forms/Checkbox/Checkbox.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.
  */
 
@@ -16,61 +16,56 @@ const interactions_1 = require("@react-aria/interactions");
 const toggle_1 = require("@react-stately/toggle");
 const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
+const Base_1 = require("../../Base");
 const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const Label_1 = require("../Label");
 const HiddenInput_1 = require("../../HiddenInput");
-const Form_1 = require("../Form");
+const Form_1 = require("../Form/Form");
 const FieldWrapper_1 = require("../FieldWrapper");
 const CheckboxGroup_1 = require("./CheckboxGroup");
 const context_1 = require("./context");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
+const StyleProvider_1 = require("../../../providers/StyleProvider");
 const CheckOutlined = () => ((0, jsx_runtime_1.jsx)("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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 = () => ((0, jsx_runtime_1.jsx)("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }, void 0) }, void 0));
-const CheckboxWrapperElement = (0, tasty_1.tasty)({
-    as: 'label',
-    qa: 'CheckboxWrapper',
-    styles: {
-        position: 'relative',
-        display: 'flex',
-        placeItems: 'center start',
-        gap: '1x',
-        flow: 'row',
-        preset: 'default',
-        cursor: 'pointer',
+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 CheckboxElement = (0, tasty_1.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',
+    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',
+};
 function Checkbox(props, ref) {
     props = (0, nullableValue_1.castNullableIsSelected)(props);
     let originalProps = props;
@@ -82,10 +77,20 @@ 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 = (0, react_1.useContext)(context_1.CheckboxGroupContext);
-    let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
-    let inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES);
+    let wrapperContextStyles = (0, StyleProvider_1.useContextStyles)('Checkbox_Wrapper', props);
+    let inputContextStyles = (0, StyleProvider_1.useContextStyles)('Checkbox', props);
+    let labelContextStyles = (0, StyleProvider_1.useContextStyles)('Checkbox_Label', props);
+    let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES, {
+        ...(insideForm && !groupState ? {} : DEFAULT_STYLES),
+        ...wrapperContextStyles,
+    });
+    let inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, {
+        ...INPUT_STYLES,
+        ...inputContextStyles,
+    });
     labelStyles = {
         ...(insideForm && !groupState ? Label_1.LABEL_STYLES : Label_1.INLINE_LABEL_STYLES),
+        ...labelContextStyles,
         ...labelStyles,
     };
     if (!insideForm) {
@@ -121,16 +126,15 @@ function Checkbox(props, ref) {
             console.warn('CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.');
         }
     }
-    const mods = {
-        checked: inputProps.checked,
-        indeterminate: isIndeterminate,
-        invalid: validationState === 'invalid',
-        valid: validationState === 'valid',
-        disabled: isDisabled,
-        hovered: isHovered,
-        focused: isFocused,
-    };
-    const checkboxField = ((0, jsx_runtime_1.jsxs)(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Checkbox', ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon }, void 0)] }, void 0));
+    let checkboxField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { qa: "CheckboxContainer", isHidden: isHidden, styles: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Checkbox', ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(Base_1.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));
     if (insideForm && !groupState) {
         return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
                 as: 'label',
@@ -154,7 +158,7 @@ function Checkbox(props, ref) {
                 ref: domRef,
             } }, void 0));
     }
-    return ((0, jsx_runtime_1.jsxs)(CheckboxWrapperElement, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...(0, tasty_1.filterBaseProps)(otherProps), ref: domRef, children: [checkboxField, label && ((0, jsx_runtime_1.jsx)(tasty_1.Element, { styles: labelStyles, mods: {
+    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...(0, tasty_1.filterBaseProps)(otherProps), ref: domRef, children: [checkboxField, label && ((0, jsx_runtime_1.jsx)(Base_1.Base, { styles: labelStyles, mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,

package/cjs/components/forms/Checkbox/CheckboxGroup.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,15 +11,18 @@ exports.CheckboxGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("@react-spectrum/utils");
+const Label_1 = require("../Label");
 const provider_1 = require("../../../provider");
 const checkbox_1 = require("@react-aria/checkbox");
 const checkbox_2 = require("@react-stately/checkbox");
 const Form_1 = require("../Form/Form");
 const context_1 = require("./context");
 const tasty_1 = require("../../../tasty");
+const Base_1 = require("../../Base");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const WRAPPER_STYLES = {
+const StyleProvider_1 = require("../../../providers/StyleProvider");
+const STYLES = {
     display: 'grid',
     gridColumns: {
         '': '1fr',
@@ -31,34 +34,45 @@ const WRAPPER_STYLES = {
     },
     placeItems: 'baseline start',
 };
-const CheckGroupElement = (0, tasty_1.tasty)({
-    qa: 'CheckboxGroup',
-    styles: {
-        display: 'flex',
-        placeItems: 'start',
-        placeContent: 'start',
-        flow: {
-            '': 'column',
-            horizontal: 'row wrap',
-        },
-        gap: {
-            '': '1x',
-            horizontal: '1x 2x',
-        },
-        padding: '(1x - 1bw) 0',
+const GROUP_STYLES = {
+    display: 'flex',
+    placeItems: 'start',
+    placeContent: 'start',
+    flow: {
+        '': 'column',
+        horizontal: 'row wrap',
     },
-});
+    gap: {
+        '': '1x',
+        horizontal: '1x 2x',
+    },
+    padding: '(1x - 1bw) 0',
+};
 function CheckboxGroup(props, ref) {
     props = (0, nullableValue_1.castNullableArrayValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.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 = (0, utils_1.useDOMRef)(ref);
-    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, WRAPPER_STYLES);
-    let groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES);
+    let wrapperContextStyles = (0, StyleProvider_1.useContextStyles)('CheckboxGroup_Wrapper', props);
+    let groupContextStyles = (0, StyleProvider_1.useContextStyles)('CheckboxGroup', props);
+    let labelContextStyles = (0, StyleProvider_1.useContextStyles)('CheckboxGroup_Label', props);
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, {
+        ...STYLES,
+        ...wrapperContextStyles,
+    });
+    let groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, {
+        ...GROUP_STYLES,
+        ...groupContextStyles,
+    });
+    labelStyles = {
+        ...Label_1.LABEL_STYLES,
+        ...labelContextStyles,
+        ...labelStyles,
+    };
     let state = (0, checkbox_2.useCheckboxGroupState)(props);
     let { groupProps, labelProps } = (0, checkbox_1.useCheckboxGroup)(props, state);
-    let radioGroup = ((0, jsx_runtime_1.jsx)(CheckGroupElement, { styles: groupStyles, mods: {
+    let radioGroup = ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "CheckboxGroup", styles: groupStyles, mods: {
             horizontal: orientation === 'horizontal',
         }, children: (0, jsx_runtime_1.jsx)(Form_1.FormContext.Provider, { value: {
                 isDisabled,

package/cjs/components/forms/Checkbox/context.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.
  */