@itcase/ui 1.2.34 → 1.3.0

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, g as groupConfig } from '../Group-BCvs5UxK.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, i as iconConfig } from '../Icon-DptCmI_y.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--c-4Qp04.js';
-import '../Text-C4Bg2Mv6.js';
-import '../Title-YVzIwk68.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, i as inputConfig } from '../Input-CgjHxZmK.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';

package/dist/components/InputMask.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import React, { useMemo } from 'react';
+import React from 'react';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -19,114 +20,31 @@ var inputMaskConfig = {
     state: undefined,
 };
 var Input = React.forwardRef(function Input(props, ref) {
-    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, state = props.state, _a = props.type, type = _a === void 0 ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'input_size_',
-        propsKey: 'size',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'input_shape_',
-        propsKey: 'shape',
-    });
-    var textSizeClass = useDeviceTargetClass(props, {
-        prefix: 'text_size_',
-        propsKey: 'textSize',
-    });
-    var textColorClass = useDeviceTargetClass(props, {
-        prefix: 'text-color_',
-        propsKey: 'textColor',
-    });
-    var textColorDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'text-color_disabled_',
-        propsKey: 'textColor',
-    });
-    var caretClass = useDeviceTargetClass(props, {
-        prefix: 'caret-color_',
-        propsKey: 'caret',
-    });
-    var placeholderTextColorClass = useDeviceTargetClass(props, {
-        prefix: 'placeholder-text-color_',
-        propsKey: 'placeholderTextColor',
-    });
-    var placeholderTextColorDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'placeholder-text-color_disabled_',
-        propsKey: 'placeholderTextColorDisabled',
-    });
-    var weightClass = useDeviceTargetClass(props, {
-        prefix: 'text-weight_',
-        propsKey: 'textWeight',
-    });
-    var borderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderWidthDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_disabled_',
-        propsKey: 'borderWidthDisabled',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderColorDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_disabled_',
-        propsKey: 'borderColorDisabled',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var appearanceConfig = appearance && inputMaskConfig.appearance && inputMaskConfig.appearance[appearance];
-    var stateConfig = useMemo(function () { return state && inputMaskConfig.state && inputMaskConfig.state[state]; }, [state, inputMaskConfig]);
-    return (jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "input_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), textSizeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
-                "text_size_".concat(appearanceConfig.textSize).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
-                "input_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                "border-color_".concat(appearanceConfig.borderColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), placeholderTextColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor) &&
-                "placeholder-text-color_".concat(appearanceConfig.placeholderTextColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), textColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), !isDisabled
-            ? borderColorClass ||
-                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.borderColor) &&
-                    "border-color_".concat(stateConfig.borderColor).replace(/([A-Z])/g, '-$1').toLowerCase())
-            : borderColorDisabledClass ||
-                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.borderColor) &&
-                    "border-color_disabled_".concat(stateConfig.borderColor)
-                        .replace(/([A-Z])/g, '-$1')
-                        .toLowerCase()), !isDisabled
-            ? placeholderTextColorClass ||
-                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.placeholderTextColor) &&
-                    "placeholder-text-color_".concat(stateConfig.placeholderTextColor)
-                        .replace(/([A-Z])/g, '-$1')
-                        .toLowerCase())
-            : placeholderTextColorDisabledClass ||
-                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.placeholderTextColor) &&
-                    "placeholder-text-color_".concat(stateConfig.placeholderTextColor)
-                        .replace(/([A-Z])/g, '-$1')
-                        .toLowerCase()), !isDisabled
-            ? textColorClass ||
-                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
-                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())
-            : textColorDisabledClass ||
-                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
-                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), 
+    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, 
+    // state,
+    _a = props.type, 
+    // state,
+    type = _a === void 0 ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    // @ts-expect-error
+    var appearanceConfig = inputMaskConfig.appearance && inputMaskConfig.appearance[appearance];
+    // const stateConfig = useMemo(
+    //   () => state && inputMaskConfig.state && inputMaskConfig.state[state],
+    //   [state, inputMaskConfig],
+    // )
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var borderColorClass = classGenerator.borderColorClass, borderColorDisabledClass = classGenerator.borderColorDisabledClass, borderWidthClass = classGenerator.borderWidthClass, borderWidthDisabledClass = classGenerator.borderWidthDisabledClass, caretClass = classGenerator.caretClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, placeholderTextColorClass = classGenerator.placeholderTextColorClass, placeholderTextColorDisabledClass = classGenerator.placeholderTextColorDisabledClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, textColorClass = classGenerator.textColorClass, textColorDisabledClass = classGenerator.textColorDisabledClass, textSizeClass = classGenerator.textSizeClass, textWeightClass = classGenerator.textWeightClass, widthClass = classGenerator.widthClass;
+    return (jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), !isDisabled
+            ? fillClass && "fill_".concat(fillClass)
+            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), !isDisabled
+            ? borderWidthClass && "border-width_".concat(borderWidthClass)
+            : borderWidthDisabledClass && "border-width_disabled_".concat(borderWidthDisabledClass), sizeClass && "input_size_".concat(sizeClass), !isDisabled
+            ? borderColorClass && "border-color_".concat(borderColorClass)
+            : borderColorDisabledClass && "border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
+            ? placeholderTextColorClass && "placeholder-text-color_".concat(placeholderTextColorClass)
+            : placeholderTextColorDisabledClass &&
+                "placeholder-text-color_disabled_".concat(placeholderTextColorDisabledClass), !isDisabled
+            ? textColorClass && "text-color_".concat(textColorClass)
+            : textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), 
         // @ts-expect-error
         ref: ref, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), index: index, placeholder: placeholder, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });