@itcase/ui 1.2.35 → 1.3.1

package/dist/components/Divider.js

@@ -1,7 +1,8 @@
-export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider-Bdz66wfW.js';
+export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider-DBvDCUqP.js';
 import 'react/jsx-runtime';
 import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Dot.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -14,29 +15,11 @@ import '../hooks/styleAttributes.js';
 
 function Dot(props) {
     var children = props.children, className = props.className;
-    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',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass;
     // @ts-expect-error
     var styles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'dot', borderColorClass, borderTypeClass, fillClass, shapeClass, sizeClass), style: styles, children: children }));
+    return (jsx("div", { className: clsx(className, 'dot', borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), shapeClass && "dot_shape_".concat(shapeClass), sizeClass && "dot_size_".concat(sizeClass)), style: styles, children: children }));
 }
 
 export { Dot };

package/dist/components/Drawer.js

@@ -3,10 +3,10 @@ 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, 
+    var children = props.children, direction = props.direction, isOpenModal = props.isOpenModal, after = props.after, before = props.before, className = props.className, closeModal = props.closeModal, dataTour = props.dataTour, enableOverlay = props.enableOverlay, size = props.size, type = props.type;
+    return (jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "data-tour-".concat(dataTour)), 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 })] }));
+        open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, 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,8 +1,9 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem-BjtWmVFs.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem-BuMJdUAk.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -12,7 +13,6 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Divider-Bdz66wfW.js';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Text-DGEJa_FL.js';
+import '../Divider-DBvDCUqP.js';
+import '../Link-_A9ZfNln.js';
+import '../Text-JayJa3hj.js';

package/dist/components/Flex.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -14,108 +15,20 @@ 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',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var alignContentClass = classGenerator.alignContentClass, alignItemsClass = classGenerator.alignItemsClass, borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, flowClass = classGenerator.flowClass, justifyContentClass = classGenerator.justifyContentClass, positionClass = classGenerator.positionClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass, wrapClass = classGenerator.wrapClass;
     // @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 }) }));
+    return (jsx(Tag, { className: clsx(className, 'flex', widthClass && "width_".concat(widthClass), alignContentClass && "flex_align-content_".concat(alignContentClass), alignItemsClass && "flex_align-items_".concat(alignItemsClass), directionClass && "flex_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), flowClass && "flex_flow_".concat(flowClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), positionClass && "position_".concat(positionClass), justifyContentClass && "flex_justify-content_".concat(justifyContentClass), shapeClass && "flex_shape_".concat(shapeClass), type && "flex_type_".concat(type), wrapClass && "flex_wrap_".concat(wrapClass)), id: id, style: flexStyles, onClick: onClick, children: jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
 }
 
 function FlexItem(props) {
     var children = props.children, className = props.className, htmlFor = props.htmlFor, _a = props.tag, Tag = _a === void 0 ? 'div' : _a;
-    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',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var alignItemsClass = classGenerator.alignItemsClass, alignSelfClass = classGenerator.alignSelfClass, directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, growClass = classGenerator.growClass, justifyContentClass = classGenerator.justifyContentClass, positionClass = classGenerator.positionClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass, wrapClass = classGenerator.wrapClass;
     // @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 }));
+    return (jsx(Tag, { className: clsx(className, 'flex__item', positionClass && "position_".concat(positionClass), alignItemsClass && "flex__item_align-items_".concat(alignItemsClass), alignSelfClass && "flex__item_align-self_".concat(alignSelfClass), directionClass && "flex__item_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), growClass && "flex__item_grow_".concat(growClass), justifyContentClass && "flex__item_justify-content_".concat(justifyContentClass), shapeClass && "flex__item_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), wrapClass && "flex__item_wrap_".concat(wrapClass)), htmlFor: htmlFor, style: flexItemStyles, children: children }));
 }
 
 export { Flex, FlexItem };

package/dist/components/Grid.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -14,143 +15,29 @@ import '../hooks/styleAttributes.js';
 
 function Grid(props) {
     var id = props.id, children = props.children, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, type = props.type, useGridSystem = props.useGridSystem, verticalResizing = props.verticalResizing, onClick = props.onClick;
-    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',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var alignContentClass = classGenerator.alignContentClass, alignItemsClass = classGenerator.alignItemsClass, borderColorClass = classGenerator.borderColorClass, columnGapClass = classGenerator.columnGapClass, columnsClass = classGenerator.columnsClass, fillClass = classGenerator.fillClass, justifyContentClass = classGenerator.justifyContentClass, justifyItemsClass = classGenerator.justifyItemsClass, rowGapClass = classGenerator.rowGapClass, rowsClass = classGenerator.rowsClass;
     // @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 })] }));
+    return (jsxs(Tag, { className: clsx(className, 'grid', useGridSystem && "grid_state_system", horizontalScroll && "grid_scroll_horizontal", type && "grid_type_".concat(type), columnsClass && "grid_columns_".concat(columnsClass), rowsClass && "grid_rows_".concat(rowsClass), rowGapClass && "grid_row-gap_".concat(rowGapClass), columnGapClass && "grid_column-gap_".concat(columnGapClass), alignContentClass && "grid_align-content_".concat(alignContentClass), alignItemsClass && "grid_align-items_".concat(alignItemsClass), borderColorClass && "border-color_".concat(borderColorClass), justifyContentClass && "grid_justify-content_".concat(justifyContentClass), justifyItemsClass && "grid_justify-items_".concat(justifyItemsClass), fillClass && "fill_".concat(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 })] }));
 }
 
 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',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var alignSelfClass = classGenerator.alignSelfClass, columnEndClass = classGenerator.columnEndClass, columnGapClass = classGenerator.columnGapClass, columnSpanClass = classGenerator.columnSpanClass, columnStartClass = classGenerator.columnStartClass, directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, gapClass = classGenerator.gapClass, heightClass = classGenerator.heightClass, justifySelfClass = classGenerator.justifySelfClass, orderClass = classGenerator.orderClass, rowEndClass = classGenerator.rowEndClass, rowGapClass = classGenerator.rowGapClass, rowSpanClass = classGenerator.rowSpanClass, rowStartClass = classGenerator.rowStartClass, widthClass = classGenerator.widthClass;
     // @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 }));
+    return (jsx("div", { className: clsx(className, 'grid__item', orderClass && "order_".concat(orderClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), alignSelfClass && "grid__item_align-self_".concat(alignSelfClass), justifySelfClass && "grid__item_justify-self_".concat(justifySelfClass), columnStartClass && "grid__item_column-start_".concat(columnStartClass), columnEndClass && "grid__item_column-end_".concat(columnEndClass), columnSpanClass && "grid__item_column-span_".concat(columnSpanClass), rowStartClass && "grid__item_row-start_".concat(rowStartClass), rowEndClass && "grid__item_row-end_".concat(rowEndClass), rowSpanClass && "grid__item_row-span_".concat(rowSpanClass), directionClass && "direction_".concat(directionClass), gapClass && "gap_".concat(gapClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), rowGapClass && "row-gap_".concat(rowGapClass), columnGapClass && "column-gap_".concat(columnGapClass)), "data-tour": dataTour, id: id, style: gridItemStyles, 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',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
+    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, htmlFor = props.htmlFor, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var borderColorClass = classGenerator.borderColorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass;
     // @ts-expect-error
     var gridRowStyles = useStyles(props).styles;
-    return (jsx(Tag, { className: clsx(className, 'grid__row', fillClass, fillHoverClass, borderColorClass), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: gridRowStyles, onClick: onClick, children: children }));
+    return (jsx(Tag, { className: clsx(className, 'grid__row', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), borderColorClass && "border-color_".concat(borderColorClass)), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: gridRowStyles, onClick: onClick, children: children }));
 }
 
 export { Grid, GridItem, GridRow };

package/dist/components/Group.js

@@ -1,8 +1,9 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group-D95Sf0X0.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group-B9L2NTgM.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';

package/dist/components/HTMLContent.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -14,81 +15,11 @@ 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',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, columnsClass = classGenerator.columnsClass, directionClass = classGenerator.directionClass, elevationClass = classGenerator.elevationClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, flexGrowClass = classGenerator.flexGrowClass, heightClass = classGenerator.heightClass, justifyContentClass = classGenerator.justifyContentClass, shapeClass = classGenerator.shapeClass, textColorClass = classGenerator.textColorClass, textWeightClass = classGenerator.textWeightClass, widthClass = classGenerator.widthClass, wrapClass = classGenerator.wrapClass;
     // @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 }));
+    return (jsx("div", { className: clsx(className, 'html-content', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), borderWidthClass && "border-width_".concat(borderWidthClass), columnsClass && "html-content_columns_".concat(columnsClass), directionClass && "html-content_direction_".concat(directionClass), elevationClass && "elevation_".concat(elevationClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), heightClass && "height_".concat(heightClass), justifyContentClass && "justify-content_".concat(justifyContentClass), shapeClass && "html-content_shape_".concat(shapeClass), textColorClass && "text-color_".concat(textColorClass), textWeightClass && "text-weight_".concat(textWeightClass), wrapClass && "html-content_wrap_".concat(wrapClass), widthClass && "width_".concat(widthClass)), dangerouslySetInnerHTML: { __html: content }, "data-tour": dataTour, style: Object.assign({}, htmlContentStyles, style), onClick: onClick, children: children }));
 }
 
 export { HTMLContent };

package/dist/components/Icon.js

@@ -1,10 +1,10 @@
-export { I as Icon, a as iconAppearance, i as iconConfig } from '../Icon-21rsw8YW.js';
+export { I as Icon, a as iconAppearance, i as iconConfig } from '../Icon-CZrDqG76.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import 'react-inlinesvg';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -14,7 +14,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../Tooltip-BsMYxi_I.js';
-import '../Text-DGEJa_FL.js';
-import '../Title-Bp-4wxkT.js';
+import '../Link-_A9ZfNln.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Text-JayJa3hj.js';
+import '../Title-CHgrIarR.js';

package/dist/components/Image.js

@@ -1,7 +1,8 @@
-export { I as Image } from '../Image-8t6PvsaZ.js';
+export { I as Image } from '../Image-Dx4AWHLO.js';
 import 'react/jsx-runtime';
 import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Input.js

@@ -1,8 +1,9 @@
-export { I as Input, a as inputAppearance, i as inputConfig, b as inputState } from '../Input--x3hPBiN.js';
+export { I as Input, a as inputAppearance, i as inputConfig, b as inputState } from '../Input-BrV5_NoV.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';