@cube-dev/ui-kit 0.0.0-canary-67120ec → 0.0.0-canary-3443cc5

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-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -92,10 +92,10 @@ function Result(props, ref) {
         const { color, component: Component } = status && statusIconMap.hasOwnProperty(status)
             ? statusIconMap[status]
             : statusIconMap.info;
-        return ((0, jsx_runtime_1.jsx)(IconWrapper, { "data-element": "IconWrapper", styles: { color }, children: (0, jsx_runtime_1.jsx)(Component, { "data-element": "Icon" }) }));
+        return ((0, jsx_runtime_1.jsx)(IconWrapper, { "data-element": "IconWrapper", styles: { color }, children: (0, jsx_runtime_1.jsx)(Component, { "data-element": "Icon" }, void 0) }, void 0));
     }, [icon, status]);
     const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsxs)(Container, { ...(0, tasty_1.filterBaseProps)(otherProps, { eventProps: true }), ref: ref, styles: styles, children: [iconNode, (title || subtitle) && ((0, jsx_runtime_1.jsxs)("div", { "data-element": "Title", children: [(0, react_2.wrapNodeIfPlain)(title, () => ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 2, preset: "h4", children: title }))), (0, react_2.wrapNodeIfPlain)(subtitle, () => ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 3, preset: "h5m", children: subtitle })))] })), children && (0, jsx_runtime_1.jsx)("div", { "data-element": "Content", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(Container, { ...(0, tasty_1.filterBaseProps)(otherProps, { eventProps: true }), ref: ref, styles: styles, children: [iconNode, (title || subtitle) && ((0, jsx_runtime_1.jsxs)("div", { "data-element": "Title", children: [(0, react_2.wrapNodeIfPlain)(title, () => ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 2, preset: "h4", children: title }, void 0))), (0, react_2.wrapNodeIfPlain)(subtitle, () => ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 3, preset: "h5m", children: subtitle }, void 0)))] }, void 0)), children && (0, jsx_runtime_1.jsx)("div", { "data-element": "Content", children: children }, void 0)] }, void 0));
 }
 const _Result = (0, react_1.forwardRef)(Result);
 exports.Result = _Result;

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-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -15,37 +15,37 @@ const Space_1 = require("../../layout/Space");
 const Grid_1 = require("../../layout/Grid");
 const LAYOUT_MAP = {
     page({ lines, children, ...props }) {
-        return ((0, jsx_runtime_1.jsxs)(Flow_1.Flow, { gap: "4x", ...props, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { placeContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "100px 25% 300px" }), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "50px 10% 150px" })] }), (0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", children: children ||
+        return ((0, jsx_runtime_1.jsxs)(Flow_1.Flow, { gap: "4x", ...props, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { placeContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "100px 25% 300px" }, void 0), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "50px 10% 150px" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", children: children ||
                         Array(lines || 5)
                             .fill(0)
-                            .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) })] }));
+                            .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) }, void 0)] }, void 0));
     },
     content({ children, lines, ...props }) {
         return ((0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", ...props, children: children ||
                 Array(lines || 5)
                     .fill(0)
-                    .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) }));
+                    .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) }, void 0));
     },
     topbar(props) {
-        return ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "4x", placeContent: "space-between", height: "6x", padding: "1x", border: "bottom", ...props, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { circle: true, size: "4x" }), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "20x" })] }), (0, jsx_runtime_1.jsxs)(Space_1.Space, { children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "10x" }), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { circle: true, size: "4x" })] })] }));
+        return ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "4x", placeContent: "space-between", height: "6x", padding: "1x", border: "bottom", ...props, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { circle: true, size: "4x" }, void 0), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "20x" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(Space_1.Space, { children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "10x" }, void 0), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { circle: true, size: "4x" }, void 0)] }, void 0)] }, void 0));
     },
     menu({ lines, ...props }) {
         return ((0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "3.25x", ...props, padding: "3x 1x", children: Array(lines || 5)
                 .fill(0)
-                .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i))) }));
+                .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i))) }, void 0));
     },
     stats({ cards, ...props }) {
         return ((0, jsx_runtime_1.jsx)(Space_1.Space, { gap: "4x", ...props, children: Array(cards || 3)
                 .fill(0)
-                .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { radius: "1x", width: "20x", height: "12x", flexGrow: 1 }, i))) }));
+                .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { radius: "1x", width: "20x", height: "12x", flexGrow: 1 }, i))) }, void 0));
     },
     tabs({ tabs, children, lines, ...props }) {
         return ((0, jsx_runtime_1.jsxs)(Flow_1.Flow, { gap: "4x", ...props, children: [(0, jsx_runtime_1.jsx)(Space_1.Space, { children: Array(tabs || 3)
                         .fill(0)
-                        .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "15x" }, i))) }), (0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", children: children ||
+                        .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "15x" }, i))) }, void 0), (0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", children: children ||
                         Array(lines || 5)
                             .fill(0)
-                            .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) })] }));
+                            .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) }, void 0)] }, void 0));
     },
     table({ rows, columns, ...props }) {
         columns = columns || 5;
@@ -58,7 +58,7 @@ const LAYOUT_MAP = {
                     .map((item, j) => {
                     return ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { size: !i ? '3x' : '2x' }, `${i}.${j}`));
                 });
-            }) }));
+            }) }, void 0));
     },
     chart({ columns, ...props }) {
         columns = columns || 12;
@@ -67,12 +67,12 @@ const LAYOUT_MAP = {
                 .fill(0)
                 .map((item, i) => {
                 return ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { height: `${heightMap[i % 12] * 10}%`, width: "max 6x" }, i));
-            }) }));
+            }) }, void 0));
     },
 };
 function Skeleton({ layout, ...props }) {
     layout = layout || 'page';
-    return LAYOUT_MAP[layout] ? (LAYOUT_MAP[layout]({ ...props, qa: 'Skeleton' })) : ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { ...props }));
+    return LAYOUT_MAP[layout] ? (LAYOUT_MAP[layout]({ ...props, qa: 'Skeleton' })) : ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { ...props }, void 0));
 }
 exports.Skeleton = Skeleton;
 

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-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -84,9 +84,9 @@ const CloseAction = (0, tasty_1.tasty)(Action_1.Action, {
 const Tag = (allProps, ref) => {
     let { type, isClosable, onClose, closeButtonStyles, 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 }), 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)(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: {
                             fontSize: 'calc(var(--font-size) - (var(--border-width) * 2))',
-                        } }) }) })) : undefined] }));
+                        } }, void 0) }, void 0) }, void 0)) : undefined] }, void 0));
 };
 const _Tag = (0, react_1.forwardRef)(Tag);
 exports.Tag = _Tag;

package/cjs/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -52,26 +52,26 @@ const _Text = (0, react_1.forwardRef)(function Text(allProps, ref) {
     return ((0, jsx_runtime_1.jsx)(TextElement, { 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 }));
+        }, block: !!(block || ellipsis), ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 const Text = Object.assign(_Text, {
     Minor: (0, react_1.forwardRef)(function MinorText(props, ref) {
-        return (0, jsx_runtime_1.jsx)(_Text, { ref: ref, color: "#minor", ...props });
+        return (0, jsx_runtime_1.jsx)(_Text, { ref: ref, color: "#minor", ...props }, void 0);
     }),
     Danger: (0, react_1.forwardRef)(function DangerText(props, ref) {
-        return (0, jsx_runtime_1.jsx)(_Text, { role: "alert", ref: ref, color: "#danger-text", ...props });
+        return (0, jsx_runtime_1.jsx)(_Text, { role: "alert", ref: ref, color: "#danger-text", ...props }, void 0);
     }),
     Success: (0, react_1.forwardRef)(function SuccessText(props, ref) {
-        return (0, jsx_runtime_1.jsx)(_Text, { ref: ref, color: "#success-text", ...props });
+        return (0, jsx_runtime_1.jsx)(_Text, { ref: ref, color: "#success-text", ...props }, void 0);
     }),
     Strong: (0, react_1.forwardRef)(function StrongText(props, ref) {
-        return ((0, jsx_runtime_1.jsx)(_Text, { as: "strong", preset: "strong", ref: ref, color: "#dark", ...props }));
+        return ((0, jsx_runtime_1.jsx)(_Text, { as: "strong", preset: "strong", ref: ref, color: "#dark", ...props }, void 0));
     }),
     Emphasis: (0, react_1.forwardRef)(function EmphasisText(props, ref) {
-        return (0, jsx_runtime_1.jsx)(_Text, { as: "em", preset: "em", ref: ref, ...props });
+        return (0, jsx_runtime_1.jsx)(_Text, { as: "em", preset: "em", ref: ref, ...props }, void 0);
     }),
     Selection: (0, react_1.forwardRef)(function SelectionText(props, ref) {
-        return (0, jsx_runtime_1.jsx)(_Text, { ref: ref, color: "#dark", fill: "#note.30", ...props });
+        return (0, jsx_runtime_1.jsx)(_Text, { ref: ref, color: "#dark", fill: "#note.30", ...props }, void 0);
     }),
 });
 exports.Text = Text;

package/cjs/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -47,14 +47,14 @@ const _Title = (0, react_1.forwardRef)(({ qa, as, styleName, inline, nowrap, ell
     return ((0, jsx_runtime_1.jsx)(TitleElement, { 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 }));
+        }, inline: inline, ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 const Title = Object.assign(_Title, {
     Danger: (0, react_1.forwardRef)(function DangerTitle(props, ref) {
-        return (0, jsx_runtime_1.jsx)(Title, { ref: ref, color: "#danger-text", ...props });
+        return (0, jsx_runtime_1.jsx)(Title, { ref: ref, color: "#danger-text", ...props }, void 0);
     }),
     Success: (0, react_1.forwardRef)(function SuccessTitle(props, ref) {
-        return (0, jsx_runtime_1.jsx)(Title, { ref: ref, color: "#success-text", ...props });
+        return (0, jsx_runtime_1.jsx)(Title, { ref: ref, color: "#success-text", ...props }, void 0);
     }),
 });
 exports.Title = Title;

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-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -25,8 +25,8 @@ const FieldWrapper_1 = require("../FieldWrapper");
 const CheckboxGroup_1 = require("./CheckboxGroup");
 const context_1 = require("./context");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-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" }) }));
-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" }) }));
+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',
@@ -110,7 +110,7 @@ function Checkbox(props, ref) {
             validationState: originalProps.validationState,
         }, groupState, inputRef) // eslint-disable-next-line react-hooks/rules-of-hooks
         : (0, checkbox_1.useCheckbox)(props, (0, toggle_1.useToggleState)(props), inputRef);
-    let markIcon = isIndeterminate ? (0, jsx_runtime_1.jsx)(IndeterminateOutline, {}) : (0, jsx_runtime_1.jsx)(CheckOutlined, {});
+    let markIcon = isIndeterminate ? (0, jsx_runtime_1.jsx)(IndeterminateOutline, {}, void 0) : (0, jsx_runtime_1.jsx)(CheckOutlined, {}, void 0);
     if (groupState) {
         for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {
             if (originalProps[key] != null) {
@@ -130,7 +130,7 @@ function Checkbox(props, ref) {
         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 }), (0, jsx_runtime_1.jsx)(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon })] }));
+    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));
     if (insideForm && !groupState) {
         return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
                 as: 'label',
@@ -152,13 +152,13 @@ function Checkbox(props, ref) {
                 tooltip,
                 Component: checkboxField,
                 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: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
-                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }))] }));
+                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }, void 0))] }, void 0));
 }
 /**
  * Checkboxes allow users to select multiple items from a list of individual items,

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-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -63,7 +63,7 @@ function CheckboxGroup(props, ref) {
         }, children: (0, jsx_runtime_1.jsx)(Form_1.FormContext.Provider, { value: {
                 isDisabled,
                 validationState,
-            }, children: (0, jsx_runtime_1.jsx)(context_1.CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(context_1.CheckboxGroupContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,
@@ -83,7 +83,7 @@ function CheckboxGroup(props, ref) {
             tooltip,
             Component: radioGroup,
             ref: domRef,
-        } }));
+        } }, void 0));
 }
 /**
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.

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-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 

package/cjs/components/forms/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -65,15 +65,15 @@ const MessageElement = (0, tasty_1.tasty)({
 });
 function FieldWrapper(props, ref) {
     const { as, labelPosition, label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, } = props;
-    const labelComponent = label ? ((0, jsx_runtime_1.jsxs)(Label_1.Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: [extra ? ((0, jsx_runtime_1.jsxs)(Grid_1.Grid, { placeContent: "baseline space-between", flow: "column", children: [(0, jsx_runtime_1.jsx)("div", { children: label }), (0, jsx_runtime_1.jsx)(Text_1.Text, { preset: "t3", children: extra })] })) : (label), tooltip ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(TooltipProvider_1.TooltipProvider, { title: tooltip, activeWrap: true, width: "initial max-content 40x", children: (0, jsx_runtime_1.jsx)(icons_1.InfoCircleOutlined, { style: { color: 'var(--primary-color)' } }) })] })) : null] })) : null;
-    let descriptionComponent = description ? ((0, jsx_runtime_1.jsx)("div", { "data-element": "Description", children: (0, react_2.wrapNodeIfPlain)(description, () => ((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { children: description }))) })) : null;
+    const labelComponent = label ? ((0, jsx_runtime_1.jsxs)(Label_1.Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: [extra ? ((0, jsx_runtime_1.jsxs)(Grid_1.Grid, { placeContent: "baseline space-between", flow: "column", children: [(0, jsx_runtime_1.jsx)("div", { children: label }, void 0), (0, jsx_runtime_1.jsx)(Text_1.Text, { preset: "t3", children: extra }, void 0)] }, void 0)) : (label), tooltip ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(TooltipProvider_1.TooltipProvider, { title: tooltip, activeWrap: true, width: "initial max-content 40x", children: (0, jsx_runtime_1.jsx)(icons_1.InfoCircleOutlined, { style: { color: 'var(--primary-color)' } }, void 0) }, void 0)] }, void 0)) : null] }, void 0)) : null;
+    let descriptionComponent = description ? ((0, jsx_runtime_1.jsx)("div", { "data-element": "Description", children: (0, react_2.wrapNodeIfPlain)(description, () => ((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { children: description }, void 0))) }, void 0)) : null;
     const mods = {
         'has-sider': labelPosition === 'side',
         'has-description': !!description,
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return ((0, jsx_runtime_1.jsxs)(FieldElement, { as: as || 'div', ref: ref, mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.jsx)(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(FieldElement, { as: as || 'div', ref: ref, mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.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/cjs/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -116,7 +116,7 @@ function FileInput(props, ref) {
                     setDragHover(false);
                 }, onDrop: () => {
                     setDragHover(false);
-                } }), (0, jsx_runtime_1.jsx)("div", { "data-element": "Button", children: "Choose file" }), (0, jsx_runtime_1.jsx)("div", { "data-element": !!value ? 'Value' : 'Placeholder', children: value || placeholder || 'No file selected' })] }));
+                } }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": "Button", children: "Choose file" }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": !!value ? 'Value' : 'Placeholder', children: value || placeholder || 'No file selected' }, void 0)] }, void 0));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,
@@ -136,7 +136,7 @@ function FileInput(props, ref) {
             isHidden,
             Component: fileInput,
             ref: domRef,
-        } }));
+        } }, void 0));
 }
 /**
  * FileInputs are file inputs that allow users to select local files to

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -133,7 +133,7 @@ function Field(allProps) {
         return null;
     let child = react_1.Children.only(children);
     if (nonInput) {
-        return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { isHidden: isHidden, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child }));
+        return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { isHidden: isHidden, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child }, void 0));
     }
     if (!fieldName) {
         console.error('invalid form name:', fieldName);

package/cjs/components/forms/Form/Form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -114,7 +114,7 @@ function Form(props, ref) {
     }, [defaultValues]);
     return ((0, jsx_runtime_1.jsx)(FormElement, { ...(0, tasty_1.filterBaseProps)(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: {
             'has-sider': labelPosition === 'side',
-        }, children: (0, jsx_runtime_1.jsx)(exports.FormContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)(provider_1.Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(exports.FormContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)(provider_1.Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
 }
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.

package/cjs/components/forms/Form/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/useForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/validation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Input/Input.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ const NumberInput_1 = require("../NumberInput/NumberInput");
 const FileInput_1 = require("../FileInput/FileInput");
 const TextArea_1 = require("../TextArea/TextArea");
 exports.Input = Object.assign((0, react_1.forwardRef)(function Input(props, ref) {
-    return (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ref: ref, ...props });
+    return (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ref: ref, ...props }, void 0);
 }), {
     Text: TextInput_1.TextInput,
     Password: PasswordInput_1.PasswordInput,

package/cjs/components/forms/Input/index.js

@@ -1,18 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -19,7 +19,7 @@ const REQUIRED_ICON = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org
         width: '.8em',
         height: '.8em',
         transform: 'rotate(-5deg)',
-    }, children: (0, jsx_runtime_1.jsx)("switch", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }) }) }) }));
+    }, children: (0, jsx_runtime_1.jsx)("switch", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }, void 0) }, void 0) }, void 0) }, void 0));
 const INTL_MESSAGES = {
     '(required)': '(required)',
     '(optional)': '(optional)',
@@ -69,7 +69,7 @@ function Label(props, ref) {
         : formatMessage('(optional)');
     let icon = ((0, jsx_runtime_1.jsx)("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
             ? formatMessage('(required)')
-            : undefined, children: REQUIRED_ICON }));
+            : undefined, children: REQUIRED_ICON }, void 0));
     return ((0, jsx_runtime_1.jsx)(LabelElement, { ...(0, tasty_1.filterBaseProps)(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
@@ -79,7 +79,7 @@ function Label(props, ref) {
                     (necessityIndicator === 'icon' && isRequired)) &&
                     ' \u200b', necessityIndicator === 'label' && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
                         ? isRequired
-                        : undefined, children: necessityLabel })), necessityIndicator === 'icon' && isRequired && icon] })) }));
+                        : undefined, children: necessityLabel }, void 0)), necessityIndicator === 'icon' && isRequired && icon] }, void 0)) }, void 0));
 }
 let _Label = (0, react_1.forwardRef)(Label);
 exports.Label = _Label;

package/cjs/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -38,7 +38,7 @@ function NumberInput(props, ref) {
     let state = (0, numberfield_1.useNumberFieldState)({ ...props, locale });
     let inputRef = (0, react_1.useRef)(null);
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = (0, numberfield_2.useNumberField)(props, state, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...otherProps, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? ((0, jsx_runtime_1.jsxs)(StepperContainer, { children: [(0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { direction: "up", ...incrementButtonProps }), (0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { direction: "down", ...decrementButtonProps })] })) : null }));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...otherProps, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? ((0, jsx_runtime_1.jsxs)(StepperContainer, { children: [(0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { direction: "up", ...incrementButtonProps }, void 0), (0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { direction: "down", ...decrementButtonProps }, void 0)] }, void 0)) : null }, void 0));
 }
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.

package/cjs/components/forms/NumberInput/StepButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -25,10 +25,10 @@ const STEP_BUTTON_STYLES = {
  * Buttons for NumberField.
  */
 function StepButton(props) {
-    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { type: "neutral", styles: STEP_BUTTON_STYLES, preventDefault: true, icon: props.direction === 'up' ? (0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}), mods: {
+    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { type: "neutral", styles: STEP_BUTTON_STYLES, preventDefault: true, icon: props.direction === 'up' ? (0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}, void 0), mods: {
             up: props.direction === 'up',
             down: props.direction === 'down',
-        }, label: `Step ${props.direction}`, ...props }));
+        }, label: `Step ${props.direction}`, ...props }, void 0));
 }
 exports.StepButton = StepButton;
 

package/cjs/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -28,8 +28,8 @@ function PasswordInput(props, ref) {
     const toggleType = (0, react_1.useCallback)((e) => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { type: "neutral", htmlType: "button", onPress: toggleType, placeSelf: "stretch", height: "auto", radius: "right (1r - 1bw)", padding: ".5x 1x", width: "auto", label: "Toggle masking", excludeFromTabOrder: true, icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}) })] }));
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }));
+    const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { type: "neutral", htmlType: "button", onPress: toggleType, placeSelf: "stretch", height: "auto", radius: "right (1r - 1bw)", padding: ".5x 1x", width: "auto", label: "Toggle masking", excludeFromTabOrder: true, icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}, void 0) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries

package/cjs/components/forms/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-67120ec
+ * @cube-dev/ui-kit v0.0.0-canary-3443cc5
  * Released under the MIT license.
  */
 
@@ -107,7 +107,7 @@ const RadioNormalElement = (0, tasty_1.tasty)({
         },
     },
 });
-const RadioCircleElement = (0, jsx_runtime_1.jsx)("div", { "data-element": "RadioCircle" });
+const RadioCircleElement = (0, jsx_runtime_1.jsx)("div", { "data-element": "RadioCircle" }, void 0);
 const RadioLabelElement = (0, tasty_1.tasty)({
     qa: 'RadioLabel',
     styles: {
@@ -145,22 +145,22 @@ function Radio(props, ref) {
             invalid: validationState === 'invalid',
             hovered: isHovered,
             button: isButton,
-        }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), isButton: isButton, ref: inputRef }), (0, jsx_runtime_1.jsx)(RadioElement, { mods: {
+        }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(RadioElement, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, styles: inputStyles, children: !isButton ? RadioCircleElement : children }), label && !isButton && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: {
+                }, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
-                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }))] }));
+                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }, void 0))] }, void 0));
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;
-    return (0, jsx_runtime_1.jsx)(Radio, { ...props, type: "button", ref: ref });
+    return (0, jsx_runtime_1.jsx)(Radio, { ...props, type: "button", ref: ref }, void 0);
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.