@itcase/ui 1.1.24 → 1.2.0

package/dist/components/Divider.js

@@ -1,8 +1,8 @@
-export { D as Divider } from '../Divider-Dhj6sMWd.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
+export { D as Divider } from '../Divider-U5UdY-ef.js';
+import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
+import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';

package/dist/components/Dot.js

@@ -1,15 +1,44 @@
-export { D as Dot } from '../Dot-Bc0Ly45H.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+function Dot(props) {
+    var className = props.className, children = props.children;
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'dot_shape_',
+        propsKey: 'shape',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'dot_size_',
+        propsKey: 'size',
+    });
+    // @ts-expect-error
+    var styles = useStyles(props).styles;
+    return (jsx("div", { className: clsx(className, 'dot', borderColorClass, borderTypeClass, fillClass, shapeClass, sizeClass), style: styles, children: children }));
+}
+Dot.defaultProps = {};
+
+export { Dot };

package/dist/components/Drawer.js

@@ -1,4 +1,12 @@
-export { D as Drawer } from '../Drawer-DkLkFSmD.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import ReactDrawer from 'react-modern-drawer';
+
+function Drawer(props) {
+    var children = props.children, isOpenModal = props.isOpenModal, after = props.after, before = props.before, className = props.className, closeModal = props.closeModal, dataTour = props.dataTour, direction = props.direction, enableOverlay = props.enableOverlay, size = props.size, type = props.type;
+    return (jsxs(ReactDrawer, { direction: direction || 'right', enableOverlay: enableOverlay, lockBackgroundScroll: false, 
+        // @ts-expect-error
+        open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "data-tour-".concat(dataTour)), onClose: closeModal, children: [before && jsx("div", { className: "drawer__before", children: before }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
+}
+
+export { Drawer };

package/dist/components/Dropdown.js

@@ -1,5 +1,5 @@
-export { D as Dropdown, a as DropdownItem } from '../DropdownItem-CkojAA8a.js';
-import '../jsx-runtime-C2uP7l8s.js';
+export { D as Dropdown, a as DropdownItem } from '../DropdownItem-bB-KYqcL.js';
+import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
@@ -13,7 +13,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Divider-Dhj6sMWd.js';
-import '../Link-DtzAAQn8.js';
-import '../_tslib-S-VPg1Cw.js';
-import '../Text-Dz-KPI5I.js';
+import '../Divider-U5UdY-ef.js';
+import '../Link-Bqu5amIb.js';
+import '../tslib.es6-S-VPg1Cw.js';
+import '../Text-CG3xPG27.js';

package/dist/components/Flex.js

@@ -1,15 +1,128 @@
-export { F as Flex, a as FlexItem } from '../FlexItem-DHmKl6e7.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+function Flex(props) {
+    var id = props.id, children = props.children, className = props.className, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, type = props.type, onClick = props.onClick;
+    var alignContentClass = useDeviceTargetClass(props, {
+        prefix: 'flex_align-content_',
+        propsKey: 'alignContent',
+    });
+    var alignItemsClass = useDeviceTargetClass(props, {
+        prefix: 'flex_align-items_',
+        propsKey: 'alignItems',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'flex_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var wrapClass = useDeviceTargetClass(props, {
+        prefix: 'flex_wrap_',
+        propsKey: 'wrap',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'flex_direction_',
+        propsKey: 'direction',
+    });
+    var flowClass = useDeviceTargetClass(props, {
+        prefix: 'flex_flow_',
+        propsKey: 'flow',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'flex_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var positionClass = useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    // @ts-expect-error
+    var _b = useStyles(props), flexStyles = _b.styles, flexWrapperStyles = _b.wrapper;
+    return (jsx(Tag, { className: clsx(className, 'flex', widthClass, alignContentClass, alignItemsClass, directionClass, fillClass, flowClass, borderColorClass, borderTypeClass, positionClass, justifyContentClass, shapeClass, type && "flex_type_".concat(type), wrapClass), id: id, style: flexStyles, onClick: onClick, children: jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
+}
+Flex.defaultProps = {
+    tag: 'div',
+};
+
+function FlexItem(props) {
+    var children = props.children, className = props.className, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, htmlFor = props.htmlFor;
+    var alignSelfClass = useDeviceTargetClass(props, {
+        prefix: 'flex__item_align-self_',
+        propsKey: 'alignSelf',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'flex__item_direction_',
+        propsKey: 'direction',
+    });
+    var growClass = useDeviceTargetClass(props, {
+        prefix: 'flex__item_grow_',
+        propsKey: 'grow',
+    });
+    var alignItemsClass = useDeviceTargetClass(props, {
+        prefix: 'flex__item_align-items_',
+        propsKey: 'alignItems',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'flex__item_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'flex__item_shape_',
+        propsKey: 'shape',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'resize-horizontal_',
+        propsKey: 'width',
+    });
+    var wrapClass = useDeviceTargetClass(props, {
+        prefix: 'flex__item_wrap_',
+        propsKey: 'wrap',
+    });
+    var positionClass = useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var flexItemStyles = useStyles(props).styles;
+    return (jsx(Tag, { className: clsx(className, 'flex__item', positionClass, alignItemsClass, alignSelfClass, directionClass, fillClass, fillHoverClass, growClass, justifyContentClass, shapeClass, widthClass, wrapClass), htmlFor: htmlFor, style: flexItemStyles, children: children }));
+}
+FlexItem.defaultProps = {
+    tag: 'div',
+};
+
+export { Flex, FlexItem };

package/dist/components/FormField.js

@@ -1,31 +1,116 @@
-export { C as ChoiceField, F as FormField, P as PasswordField, S as SelectField, a as SwitchField } from '../SwitchField-DCwEVCVg.js';
-import '../_tslib-S-VPg1Cw.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { _ as __assign } from '../tslib.es6-S-VPg1Cw.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { D as Divider } from '../Divider-U5UdY-ef.js';
+import { T as Text } from '../Text-CG3xPG27.js';
+import { I as Icon } from '../Icon-CsE2-ieX.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { R as Radio } from '../Radio-oMf0vN7T.js';
+import { SelectInput } from './Select.js';
+import { S as Switch } from '../Switch-DEXsrPCo.js';
 import 'react';
-import '../Radio-BHqgR8WO.js';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
-import 'lodash/camelCase';
+import 'react-inlinesvg';
+import '../Link-Bqu5amIb.js';
+import '../Tooltip-DJufHBiQ.js';
+import '../Title-BfSFPJtJ.js';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../Text-Dz-KPI5I.js';
-import '../hooks/useStyles.js';
+import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import './Select.js';
+import 'lodash/castArray';
 import 'react-select';
-import '../Icon-BLqnXYOO.js';
-import 'react-inlinesvg';
-import '../Link-DtzAAQn8.js';
-import '../Tooltip-IVq3_vb4.js';
-import '../Title-zpOK2AxL.js';
-import 'react-dom';
-import '../floating-ui.dom-BV5qw-HP.js';
-import '../Badge-CLV5v6N7.js';
-import '../Group-DLmtajo8.js';
-import '../Divider-Dhj6sMWd.js';
-import '../Switch-0BHqovLA.js';
+import 'react-select/creatable';
+import '../Badge-CrhdvxY6.js';
+import '../Group-BXfLh7AZ.js';
+
+function FormField(props) {
+    var id = props.id, children = props.children, afterItem = props.afterItem, dataTestId = props.dataTestId, beforeItem = props.beforeItem, dividerWidth = props.dividerWidth, dividerDirection = props.dividerDirection, set = props.set, className = props.className, dividerSize = props.dividerSize, dividerFill = props.dividerFill, descSize = props.descSize, descTextWeight = props.descTextWeight, descTextColor = props.descTextColor, desc = props.desc, label = props.label, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextColor = props.labelTextColor, clearIconFill = props.clearIconFill, clearIcon = props.clearIcon, clearIconSize = props.clearIconSize, messageSize = props.messageSize, messageTextWeight = props.messageTextWeight, messageTextColor = props.messageTextColor, message = props.message;
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'form-field_size_',
+        propsKey: 'size',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var inputFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'inputFill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'form-field_shape_',
+        propsKey: 'shape',
+    });
+    var inputShapeClass = useDeviceTargetClass(props, {
+        prefix: 'form-field__item-value_shape_',
+        propsKey: 'inputShape',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'direction_',
+        propsKey: 'direction',
+    });
+    // @ts-expect-error
+    var formFieldStyles = useStyles(props).styles;
+    return (jsxs("div", { className: clsx(className, 'form-field', set && "form-field_set_".concat(set), sizeClass, fillClass, shapeClass, directionClass), "data-test-id": dataTestId, style: formFieldStyles, children: [label && (jsx("label", { htmlFor: id, className: "form-field__label", children: jsx(Text, { size: labelTextSize, textWeight: labelTextWeight, textColor: labelTextColor, children: label }) })), desc && (jsx("div", { className: "form-field__desc", children: jsx(Text, { size: descSize, textWeight: descTextWeight, textColor: descTextColor, children: desc }) })), jsxs("div", { className: clsx('form-field__item', inputFillClass, inputShapeClass), children: [jsxs("div", { className: clsx('form-field__item-wrapper'), children: [beforeItem, children, clearIcon && jsx(Icon, { fill: clearIconFill, SvgImage: clearIcon, size: clearIconSize }), afterItem] }), jsx(Divider, { className: "form-field__item-divider", direction: dividerDirection, fill: dividerFill, size: dividerSize, width: dividerWidth })] }), message && (jsx("div", { className: "form-field__message", children: jsx(Text, { size: messageSize, textWeight: messageTextWeight, textColor: messageTextColor, children: message }) }))] }));
+}
+FormField.defaultProps = {
+    dividerWidth: 'fill',
+    dividerDirection: 'horizontal',
+};
+
+function ChoiceField(props) {
+    var radioId = props.radioId, radioClassName = props.radioClassName, radioFillCheckmark = props.radioFillCheckmark, radioFillChecked = props.radioFillChecked, radioFill = props.radioFill, radioFillDisabled = props.radioFillDisabled, radioShape = props.radioShape, radioBorder = props.radioBorder;
+    return (jsx(FormField, __assign({}, props, { children: jsx(Radio, { border: radioBorder, className: radioClassName, fill: radioFill, id: radioId, shape: radioShape, stateCheckmarkFill: radioFillCheckmark, stateFillChecked: radioFillChecked, stateFillDisabled: radioFillDisabled }) })));
+}
+ChoiceField.defaultProps = {
+    radioClassName: 'form-field__item-radio',
+};
+
+function PasswordField(props) {
+    var placeholder = props.placeholder, passwordClassName = props.passwordClassName, value = props.value;
+    var placeholderColorClass = useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'placeholderColor',
+    });
+    var valueTextColorClass = useDeviceTargetClass(props, {
+        prefix: 'text text-color_',
+        propsKey: 'valueTextColor',
+    });
+    var valueTextSizeClass = useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'valueTextSize',
+    });
+    return (jsx(FormField, __assign({}, props, { children: jsx("input", { type: "text", value: value, placeholder: placeholder, className: clsx(passwordClassName, valueTextSizeClass, valueTextColorClass, placeholderColorClass) }) })));
+}
+PasswordField.defaultProps = {
+    set: 'password',
+    passwordClassName: 'form-field__item-password',
+};
+
+function SelectField(props) {
+    var className = props.className, selectInputClass = props.selectInputClass, selectFill = props.selectFill, selectShape = props.selectShape, selectBorder = props.selectBorder, selectSize = props.selectSize, selectOptionFill = props.selectOptionFill, selectOptionTextSize = props.selectOptionTextSize, selectOptionTextColor = props.selectOptionTextColor, selectOptionBefore = props.selectOptionBefore, selectOptionAfter = props.selectOptionAfter, selectInputBefore = props.selectInputBefore, selectInputAfter = props.selectInputAfter, selectInputFill = props.selectInputFill, selectInputTextSize = props.selectInputTextSize, selectInputTextColor = props.selectInputTextColor;
+    return (jsx(FormField, __assign({}, props, { children: jsx(SelectInput
+        // @ts-expect-error
+        , { 
+            // @ts-expect-error
+            className: clsx(selectInputClass, className), borderColor: selectBorder, fill: selectFill, inputAfter: selectInputAfter, inputBefore: selectInputBefore, inputFill: selectInputFill, inputTextColor: selectInputTextColor, inputTextSize: selectInputTextSize, optionAfter: selectOptionAfter, optionBefore: selectOptionBefore, optionFill: selectOptionFill, optionTextColor: selectOptionTextColor, optionTextSize: selectOptionTextSize, shape: selectShape, size: selectSize }) })));
+}
+SelectField.defaultProps = {
+    set: 'select',
+    selectInputClass: 'form-field__item-select',
+};
+
+function SwitchField(props) {
+    var className = props.className;
+    return (jsx(FormField, __assign({}, props, { children: jsx(Switch, { className: clsx('form-field__item-switch', className) }) })));
+}
+SwitchField.defaultProps = {
+    set: 'switch',
+};
+
+export { ChoiceField, FormField, PasswordField, SelectField, SwitchField };

package/dist/components/Grid.js

@@ -1,15 +1,159 @@
-export { G as Grid, a as GridItem, b as GridRow } from '../GridRow-DRjyNWBh.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+function Grid(props) {
+    var id = props.id, after = props.after, before = props.before, children = props.children, className = props.className, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, onClick = props.onClick, type = props.type, useGridSystem = props.useGridSystem, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, dataTour = props.dataTour, verticalResizing = props.verticalResizing;
+    var columnsClass = useDeviceTargetClass(props, {
+        prefix: 'grid_columns_',
+        propsKey: 'columns',
+    });
+    var rowsClass = useDeviceTargetClass(props, {
+        prefix: 'grid_rows_',
+        propsKey: 'rows',
+    });
+    var rowGapClass = useDeviceTargetClass(props, {
+        prefix: 'grid_row-gap_',
+        propsKey: 'rowGap',
+    });
+    var columnGapClass = useDeviceTargetClass(props, {
+        prefix: 'grid_column-gap_',
+        propsKey: 'columnGap',
+    });
+    var alignContentClass = useDeviceTargetClass(props, {
+        prefix: 'grid_align-content_',
+        propsKey: 'alignContent',
+    });
+    var alignItemsClass = useDeviceTargetClass(props, {
+        prefix: 'grid_align-items_',
+        propsKey: 'alignItems',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'grid_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var justifyItemsClass = useDeviceTargetClass(props, {
+        prefix: 'grid_justify-items_',
+        propsKey: 'justifyItems',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    // @ts-expect-error
+    var gridStyles = useStyles(props).styles;
+    return (jsxs(Tag, { className: clsx(className, 'grid', useGridSystem && "grid_state_system", horizontalScroll && "grid_scroll_horizontal", type && "grid_type_".concat(type), columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, borderColorClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && "grid_horizontal-resizing_".concat(horizontalResizing), verticalResizing && "grid_vertical-resizing_".concat(verticalResizing)), "data-tour": dataTour, id: id, style: gridStyles, onClick: onClick, children: [before && jsx("div", { className: "grid__before", children: before }), children, after && jsx("div", { className: "grid__after", children: after })] }));
+}
+Grid.defaultProps = {
+    tag: 'div',
+};
+
+function GridItem(props) {
+    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, onClick = props.onClick;
+    var orderClass = useDeviceTargetClass(props, {
+        prefix: 'order_',
+        propsKey: 'order',
+    });
+    var alignSelfClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_align-self_',
+        propsKey: 'alignSelf',
+    });
+    var justifySelfClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_justify-self_',
+        propsKey: 'justifySelf',
+    });
+    var columnStartClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_column-start_',
+        propsKey: 'columnStart',
+    });
+    var columnEndClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_column-end_',
+        propsKey: 'columnEnd',
+    });
+    var columnSpanClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_column-span_',
+        propsKey: 'columnSpan',
+    });
+    var rowStartClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_row-start_',
+        propsKey: 'rowStart',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var rowEndClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_row-end_',
+        propsKey: 'rowEnd',
+    });
+    var rowSpanClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_row-span_',
+        propsKey: 'rowSpan',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var gapClass = useDeviceTargetClass(props, {
+        prefix: 'gap_',
+        propsKey: 'gap',
+    });
+    var rowGapClass = useDeviceTargetClass(props, {
+        prefix: 'row-gap_',
+        propsKey: 'rowGap',
+    });
+    var columnGapClass = useDeviceTargetClass(props, {
+        prefix: 'column-gap_',
+        propsKey: 'columnGap',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'direction_',
+        propsKey: 'direction',
+    });
+    // @ts-expect-error
+    var gridItemStyles = useStyles(props).styles;
+    return (jsx("div", { "data-tour": dataTour, id: id, style: gridItemStyles, className: clsx(className, 'grid__item', orderClass, fillClass, fillHoverClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, widthClass, heightClass, rowGapClass, columnGapClass), onClick: onClick, children: children }));
+}
+
+function GridRow(props) {
+    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, htmlFor = props.htmlFor, onClick = props.onClick;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    // @ts-expect-error
+    var gridRowStyles = useStyles(props).styles;
+    return (jsx(Tag, { className: clsx(className, 'grid__row', fillClass, fillHoverClass), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: gridRowStyles, onClick: onClick, children: children }));
+}
+GridRow.defaultProps = {
+    tag: 'div',
+};
+
+export { Grid, GridItem, GridRow };

package/dist/components/Group.js

@@ -1,8 +1,8 @@
-export { G as Group, g as groupConfig } from '../Group-DLmtajo8.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
+export { G as Group, g as groupConfig } from '../Group-BXfLh7AZ.js';
+import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
+import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';

package/dist/components/HTMLContent.js

@@ -1,15 +1,95 @@
-export { H as HTMLContent } from '../HTMLContent-CgbJTAy4.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+function HTMLContent(props) {
+    var children = props.children, className = props.className, content = props.content, dataTour = props.dataTour, style = props.style, onClick = props.onClick;
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'html-content_direction_',
+        propsKey: 'direction',
+    });
+    var wrapClass = useDeviceTargetClass(props, {
+        prefix: 'html-content_wrap_',
+        propsKey: 'wrap',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'html-content_shape_',
+        propsKey: 'shape',
+    });
+    var columnsClass = useDeviceTargetClass(props, {
+        prefix: 'html-content_columns_',
+        propsKey: 'columns',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var flexGrowClass = useDeviceTargetClass(props, {
+        prefix: 'flex-grow_',
+        propsKey: 'flexGrow',
+    });
+    var elevationClass = useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    var textColorClass = useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'textColor',
+    });
+    var weightClass = useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'textWeight',
+    });
+    // @ts-expect-error
+    var htmlContentStyles = useStyles(props).styles;
+    return (jsx("div", { dangerouslySetInnerHTML: { __html: content }, "data-tour": dataTour, style: Object.assign({}, htmlContentStyles, style), className: clsx(className, 'html-content', alignClass, alignDirectionClass, borderColorClass, borderTypeClass, borderWidthClass, columnsClass, directionClass, elevationClass, fillClass, fillHoverClass, flexGrowClass, heightClass, justifyContentClass, shapeClass, textColorClass, weightClass, wrapClass, widthClass), onClick: onClick, children: children }));
+}
+
+export { HTMLContent };