@itcase/ui 1.0.42 → 1.0.44

package/dist/components/FormField.js

@@ -8,7 +8,7 @@ var size = require('../constants/componentProps/size.js');
 var index$2 = require('./Divider.js');
 var index = require('./Text.js');
 var index$1 = require('./Icon.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$3 = require('./RadioButton.js');
 require('lodash/castArray');
@@ -50,59 +50,62 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function FormField(props) {
-  var id = props.id,
-    children = props.children,
-    afterItem = props.afterItem,
-    beforeItem = props.beforeItem,
-    dividerWidth = props.dividerWidth,
-    dividerDirection = props.dividerDirection,
-    set = props.set,
-    className = props.className,
-    dividerSize = props.dividerSize,
-    dividerFill = props.dividerFill,
-    descSize = props.descSize,
-    descTextWidth = props.descTextWidth,
-    descTextColor = props.descTextColor,
-    desc = props.desc,
-    label = props.label,
-    labelSize = props.labelSize,
-    labelTextWidth = props.labelTextWidth,
-    labelTextColor = props.labelTextColor,
-    clearIconFill = props.clearIconFill,
-    clearIcon = props.clearIcon,
-    clearIconSize = props.clearIconSize,
-    messageSize = props.messageSize,
-    messageTextWidth = props.messageTextWidth,
-    messageTextColor = props.messageTextColor,
-    message = props.message;
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    id,
+    children,
+    afterItem,
+    beforeItem,
+    dividerWidth,
+    dividerDirection,
+    set,
+    className,
+    dividerSize,
+    dividerFill,
+    descSize,
+    descTextWidth,
+    descTextColor,
+    desc,
+    label,
+    labelSize,
+    labelTextWidth,
+    labelTextColor,
+    clearIconFill,
+    clearIcon,
+    clearIconSize,
+    messageSize,
+    messageTextWidth,
+    messageTextColor,
+    message
+  } = props;
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'form-field_size_',
     propsKey: 'size'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'inputFill'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'form-field_shape_',
     propsKey: 'shape'
   });
-  var inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'form-field__item-value_shape_',
     propsKey: 'inputShape'
   });
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'direction_',
     propsKey: 'direction'
   });
-  var _useStyles = useStyles.useStyles(props),
-    formFieldStyles = _useStyles.styles;
+  const {
+    styles: formFieldStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'form-field', set && "form-field_set_" + set, sizeClass, fillClass, shapeClass, directionClass),
+    className: clsx__default.default(className, 'form-field', set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, directionClass),
     style: formFieldStyles
   }, label && /*#__PURE__*/React__default.default.createElement("label", {
     htmlFor: id,
@@ -163,14 +166,16 @@ FormField.defaultProps = {
 };
 
 function ChoiceField(props) {
-  var radioButtonId = props.radioButtonId,
-    radioButtonClassName = props.radioButtonClassName,
-    radioButtonFillCheckmark = props.radioButtonFillCheckmark,
-    radioButtonFillChecked = props.radioButtonFillChecked,
-    radioButtonFill = props.radioButtonFill,
-    radioButtonFillDisable = props.radioButtonFillDisable,
-    radioButtonShape = props.radioButtonShape,
-    radioButtonBorder = props.radioButtonBorder;
+  const {
+    radioButtonId,
+    radioButtonClassName,
+    radioButtonFillCheckmark,
+    radioButtonFillChecked,
+    radioButtonFill,
+    radioButtonFillDisable,
+    radioButtonShape,
+    radioButtonBorder
+  } = props;
   return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$3.RadioButton, {
     id: radioButtonId,
     className: radioButtonClassName,
@@ -190,18 +195,20 @@ ChoiceField.defaultProps = {
 };
 
 function PasswordField(props) {
-  var placeholder = props.placeholder,
-    passwordClassName = props.passwordClassName,
-    value = props.value;
-  var placeholderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    placeholder,
+    passwordClassName,
+    value
+  } = props;
+  const placeholderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'placeholder-text-color_',
     propsKey: 'placeholderColor'
   });
-  var valueTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const valueTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text text-color_',
     propsKey: 'valueTextColor'
   });
-  var valueTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const valueTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text_size_',
     propsKey: 'valueTextSize'
   });
@@ -224,7 +231,9 @@ PasswordField.defaultProps = {
 };
 
 function SwitchField(props) {
-  var className = props.className;
+  const {
+    className
+  } = props;
   return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$4.Switch, {
     className: clsx__default.default('form-field__item-switch', className)
   }));
@@ -240,22 +249,24 @@ SwitchField.defaultProps = {
 };
 
 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;
+  const {
+    className,
+    selectInputClass,
+    selectFill,
+    selectShape,
+    selectBorder,
+    selectSize,
+    selectOptionFill,
+    selectOptionTextSize,
+    selectOptionTextColor,
+    selectOptionBefore,
+    selectOptionAfter,
+    selectInputBefore,
+    selectInputAfter,
+    selectInputFill,
+    selectInputTextSize,
+    selectInputTextColor
+  } = props;
   return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$5.SelectInput, {
     className: clsx__default.default(selectInputClass, className),
     fill: selectFill,

package/dist/components/Grid.js

@@ -10,7 +10,7 @@ var shape = require('../constants/componentProps/shape.js');
 var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
 var verticalResizeMode = require('../constants/componentProps/verticalResizeMode.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var gridAlignSelf = require('../constants/componentProps/gridAlignSelf.js');
 var gridJustifySelf = require('../constants/componentProps/gridJustifySelf.js');
 require('lodash/castArray');
@@ -29,51 +29,53 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Grid(props) {
-  var id = props.id,
-    after = props.after,
-    before = props.before,
-    children = props.children,
-    className = props.className,
-    horizontalResizing = props.horizontalResizing,
-    onClick = props.onClick,
-    type = props.type,
-    useGridSystem = props.useGridSystem,
-    Tag = props.tag,
-    dataTour = props.dataTour,
-    verticalResizing = props.verticalResizing;
-  var columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    id,
+    after,
+    before,
+    children,
+    className,
+    horizontalResizing,
+    onClick,
+    type,
+    useGridSystem,
+    tag: Tag,
+    dataTour,
+    verticalResizing
+  } = props;
+  const columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid_columns_',
     propsKey: 'columns'
   });
-  var rowsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const rowsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid_rows_',
     propsKey: 'rows'
   });
-  var rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid_row-gap_',
     propsKey: 'rowGap'
   });
-  var columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid_column-gap_',
     propsKey: 'columnGap'
   });
-  var alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid_align-content_',
     propsKey: 'alignContent'
   });
-  var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid_align-items_',
     propsKey: 'alignItems'
   });
-  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid_justify-content_',
     propsKey: 'justifyContent'
   });
-  var justifyItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const justifyItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid_justify-items_',
     propsKey: 'justifyItems'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
@@ -93,12 +95,13 @@ function Grid(props) {
     prefix: 'grid_shape_',
     propsKey: 'shapeWrapperInner'
   });
-  var _useStyles = useStyles.useStyles(props),
-    gridStyles = _useStyles.styles;
-    _useStyles.gridWrapper;
-    _useStyles.gridWrapperInner;
+  const {
+    styles: gridStyles,
+    gridWrapper: gridWrapperStyles,
+    gridWrapperInner: gridWrapperInnerStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'grid', useGridSystem && "grid_state_system", type && "grid_type_" + type, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && "grid_horizontal-resizing_" + horizontalResizing, verticalResizing && "grid_vertical-resizing_" + verticalResizing),
+    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
     id: id,
     style: gridStyles,
     onClick: onClick,
@@ -186,68 +189,71 @@ Grid.defaultProps = {
 };
 
 function GridItem(props) {
-  var id = props.id,
-    children = props.children,
-    className = props.className,
-    dataTour = props.dataTour;
-  var orderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    id,
+    children,
+    className,
+    dataTour
+  } = props;
+  const orderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'order_',
     propsKey: 'order'
   });
-  var alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid__item_align-self_',
     propsKey: 'alignSelf'
   });
-  var justifySelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const justifySelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid__item_justify-self_',
     propsKey: 'justifySelf'
   });
-  var columnStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const columnStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid__item_column-start_',
     propsKey: 'columnStart'
   });
-  var columnEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const columnEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid__item_column-end_',
     propsKey: 'columnEnd'
   });
-  var columnSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const columnSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid__item_column-span_',
     propsKey: 'columnSpan'
   });
-  var rowStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const rowStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid__item_row-start_',
     propsKey: 'rowStart'
   });
-  var rowEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const rowEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid__item_row-end_',
     propsKey: 'rowEnd'
   });
-  var rowSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const rowSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'grid__item_row-span_',
     propsKey: 'rowSpan'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'gap_',
     propsKey: 'gap'
   });
-  var rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'row-gap_',
     propsKey: 'rowGap'
   });
-  var columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'column-gap_',
     propsKey: 'columnGap'
   });
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'direction_',
     propsKey: 'direction'
   });
-  var _useStyles = useStyles.useStyles(props),
-    gridItemStyles = _useStyles.styles;
+  const {
+    styles: gridItemStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'grid__item', orderClass, fillClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass),
     id: id,
@@ -306,22 +312,25 @@ GridItem.propTypes = {
 };
 
 function GridRow(props) {
-  var id = props.id,
-    children = props.children,
-    className = props.className,
-    dataTour = props.dataTour,
-    Tag = props.tag,
-    htmlFor = props.htmlFor;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    id,
+    children,
+    className,
+    dataTour,
+    tag: Tag,
+    htmlFor
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var _useStyles = useStyles.useStyles(props),
-    gridRowStyles = _useStyles.styles;
+  const {
+    styles: gridRowStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(className, 'grid__row', fillClass, fillHoverClass),
     id: id,

package/dist/components/Group.js

@@ -9,7 +9,7 @@ var shape = require('../constants/componentProps/shape.js');
 var stacking = require('../constants/componentProps/stacking.js');
 var wrap = require('../constants/componentProps/wrap.js');
 var width = require('../constants/componentProps/width.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
@@ -27,87 +27,90 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Group(props) {
-  var id = props.id,
-    children = props.children,
-    className = props.className,
-    horizontalScroll = props.horizontalScroll,
-    set = props.set,
-    style = props.style,
-    dataTour = props.dataTour,
-    onClick = props.onClick;
-  var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    id,
+    children,
+    className,
+    horizontalScroll,
+    set,
+    style,
+    dataTour,
+    onClick
+  } = props;
+  const contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_content-align_',
     propsKey: 'contentAlign'
   });
-  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'alignDirection'
   });
-  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'align'
   });
-  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'justify-content_',
     propsKey: 'justifyContent'
   });
-  var stackingClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stackingClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_stacking_',
     propsKey: 'stacking'
   });
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_direction_',
     propsKey: 'direction'
   });
-  var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_wrap_',
     propsKey: 'wrap'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_shape_',
     propsKey: 'shape'
   });
-  var columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_columns_',
     propsKey: 'columns'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-type_',
     propsKey: 'borderType'
   });
-  var growClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const growClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex-grow_',
     propsKey: 'flexGrow'
   });
-  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'elevation_',
     propsKey: 'elevation'
   });
-  var _useStyles = useStyles.useStyles(props),
-    groupStyles = _useStyles.styles,
-    groupWrapperStyles = _useStyles.wrapper;
+  const {
+    styles: groupStyles,
+    wrapper: groupWrapperStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
+    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
     "data-tour": dataTour,
     id: id,
     style: Object.assign({}, groupStyles, style),