@itcase/ui 1.2.35 → 1.3.0

package/dist/cjs/components/CookiesWarning.js

@@ -4,10 +4,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var Cookies = require('js-cookie');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Button = require('../../Button-BmE4TGuv.js');
-var Group = require('../../Group-Bf2uSl3S.js');
-var Text = require('../../Text-C-scXvy7.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
+var Button = require('../../Button-P0c3lMg1.js');
+var Group = require('../../Group-D6CXN4hS.js');
+var Text = require('../../Text-Beslj4Ns.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
@@ -17,13 +18,12 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-gTZ0QO8I.js');
-require('../../tslib.es6-CCZ3TN_7.js');
+require('../../Icon-hqYZoh4h.js');
 require('react-inlinesvg');
-require('../../Link-CqWzwh8V.js');
-require('../../Tooltip-CUL79Nsx.js');
-require('../../Title-BatSai-G.js');
-require('../../Loader-1ZnukBPK.js');
+require('../../Link-DGj-cNje.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Title-DBaHcpvB.js');
+require('../../Loader-Dn036JwE.js');
 
 function CookiesWarning(props) {
     var _a = props.isHideOnScroll, isHideOnScroll = _a === void 0 ? false : _a, buttonFill = props.buttonFill, buttonFillHover = props.buttonFillHover, _b = props.buttonLabel, buttonLabel = _b === void 0 ? 'I agree' : _b, buttonLabelSize = props.buttonLabelSize, buttonLabelTextColor = props.buttonLabelTextColor, buttonShape = props.buttonShape, buttonSize = props.buttonSize, buttonWidth = props.buttonWidth, className = props.className, _c = props.message, message = _c === void 0 ? 'The site uses cookies to collect technical information, to optimize the design and improvement of the website, and to provide certain functions. By using the website, you agree to the use of «cookies».' : _c, textColor = props.textColor, textSize = props.textSize;
@@ -48,18 +48,9 @@ function CookiesWarning(props) {
             window.removeEventListener('scroll', closeCookiesWarning, true);
         }
     }, [isOpen]);
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill-gradient_',
-        propsKey: 'fillGradient',
-    });
-    var gap = useDeviceTargetClass.useDeviceTargetClass(props, {
-        propsKey: 'gap',
-    });
-    return isOpen ? (jsxRuntime.jsx("div", { className: clsx('cookies-warning', className, fillClass, fillGradientClass), ref: cookiesWarningRef, children: jsxRuntime.jsxs(Group.Group, { className: "cookies-warning__inner", direction: "vertical", gap: gap ? gap : undefined, children: [jsxRuntime.jsx(Text.Text, { size: textSize, textColor: textColor, children: message }), jsxRuntime.jsx(Button.Button, { width: buttonWidth, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, fill: buttonFill, fillHover: buttonFillHover, shape: buttonShape, size: buttonSize, onClick: closeCookiesWarning, children: buttonLabel })] }) })) : null;
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    var fillClass = classGenerator.fillClass, fillGradientClass = classGenerator.fillGradientClass, gapClass = classGenerator.gapClass;
+    return isOpen ? (jsxRuntime.jsx("div", { className: clsx('cookies-warning', className, fillClass && "fill_".concat(fillClass), fillGradientClass && "fill-gradient_".concat(fillGradientClass)), ref: cookiesWarningRef, children: jsxRuntime.jsxs(Group.Group, { className: clsx('cookies-warning__inner', gapClass && "gap_".concat(gapClass)), direction: "vertical", children: [jsxRuntime.jsx(Text.Text, { size: textSize, textColor: textColor, children: message }), jsxRuntime.jsx(Button.Button, { width: buttonWidth, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, fill: buttonFill, fillHover: buttonFillHover, shape: buttonShape, size: buttonSize, onClick: closeCookiesWarning, children: buttonLabel })] }) })) : null;
 }
 
 exports.CookiesWarning = CookiesWarning;

package/dist/cjs/components/DadataHintField.js

@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var reactDadata = require('react-dadata');
-var Input = require('../../Input-DG5yWwpp.js');
-require('../hooks/useDeviceTargetClass.js');
+var Input = require('../../Input-ffioh1sj.js');
+require('../hooks/useDeviceTargetClassGenerator.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
@@ -14,13 +14,13 @@ require('../hooks/useMediaQueries.js');
 require('react-responsive');
 
 function DadataHintField(props) {
-    var delay = props.delay, inputProps = props.inputProps, setValue = props.setValue, input = props.input, meta = props.meta, token = props.token;
+    var delay = props.delay, input = props.input, inputProps = props.inputProps, meta = props.meta, setValue = props.setValue, token = props.token;
     var dadataInputProps = React.useMemo(function () {
         return tslib_es6.__assign(tslib_es6.__assign({}, inputProps), { className: clsx('react-dadata__input', meta.active && 'input_state_focus', meta.error && meta.touched && "input_state_".concat(meta.error.key || 'error')), 
             // https://www.npmjs.com/package/react-dadata
             // "Свойство value игнорируется."
             // value: input.value,
-            inputValue: input.value, onFocus: input.onFocus, onBlur: input.onBlur, onChange: input.onChange });
+            inputValue: input.value, onBlur: input.onBlur, onChange: input.onChange, onFocus: input.onFocus });
     }, [
         inputProps,
         meta.active,

package/dist/cjs/components/DatePicker.js

@@ -6,13 +6,13 @@ var React = require('react');
 var clsx = require('clsx');
 var locale = require('date-fns/locale');
 var DatePicker = require('react-datepicker');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-BmE4TGuv.js');
-var Icon = require('../../Icon-gTZ0QO8I.js');
-var Input = require('../../Input-DG5yWwpp.js');
-var Label = require('../../Label-Ddjf4F18.js');
-var Text = require('../../Text-C-scXvy7.js');
+var Button = require('../../Button-P0c3lMg1.js');
+var Icon = require('../../Icon-hqYZoh4h.js');
+var Input = require('../../Input-ffioh1sj.js');
+var Label = require('../../Label-HKRKV3mn.js');
+var Text = require('../../Text-Beslj4Ns.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
@@ -21,11 +21,11 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-CqWzwh8V.js');
-require('../../Loader-1ZnukBPK.js');
+require('../../Link-DGj-cNje.js');
+require('../../Loader-Dn036JwE.js');
 require('react-inlinesvg');
-require('../../Tooltip-CUL79Nsx.js');
-require('../../Title-BatSai-G.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Title-DBaHcpvB.js');
 
 var datePickerAppearance = {
     dev: {},
@@ -38,13 +38,7 @@ var datePickerConfig = {
     },
 };
 function DatePickerInput(props) {
-    var _a;
-    var appearance = props.appearance, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, _b = props.datePickerProps, datePickerProps = _b === void 0 ? {} : _b, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
-    var appearanceConfig = appearance && datePickerConfig.appearance && datePickerConfig.appearance[appearance];
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'datepicker_width_',
-        propsKey: 'width',
-    });
+    var appearance = props.appearance, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, _a = props.datePickerProps, datePickerProps = _a === void 0 ? {} : _a, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
     var datepickerRef = React.useRef(null);
     var start = React.useMemo(function () {
         if (value) {
@@ -67,8 +61,8 @@ function DatePickerInput(props) {
         }
         return endValue;
     }, [endValue]);
-    var _c = React.useState(start), startDate = _c[0], setStartDate = _c[1];
-    var _d = React.useState(end), endDate = _d[0], setEndDate = _d[1];
+    var _b = React.useState(start), startDate = _b[0], setStartDate = _b[1];
+    var _c = React.useState(end), endDate = _c[0], setEndDate = _c[1];
     var handleChange = React.useCallback(function (_a) {
         var newStartDate = _a[0], newEndDate = _a[1];
         onChange && onChange(newStartDate, newEndDate);
@@ -109,16 +103,18 @@ function DatePickerInput(props) {
         setEndDate(end);
     }, [end]);
     // @ts-expect-error
+    var appearanceConfig = datePickerConfig.appearance && datePickerConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var widthClass = classGenerator.widthClass;
+    // @ts-expect-error
     var datePickerStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.width) &&
-                ((_a = "datepicker_width_".concat(appearanceConfig.datePicker.width)) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1').toLowerCase()))), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: locale.ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datePickerAppearance: appearance, labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass && "datepicker_width_".concat(widthClass)), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: locale.ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsxRuntime.jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datePickerAppearance: appearance, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
             // Important for use custom clear button
             isClearable: false })) }));
 }
 var DatePickerCustomInput = React.forwardRef(function (props, ref) {
     var _a;
-    var isClearable = props.isClearable, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value, datePickerAppearance = props.datePickerAppearance;
+    var isClearable = props.isClearable, datePickerAppearance = props.datePickerAppearance, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value;
     var multipleValue = React.useMemo(function () {
         if (value) {
             var twoDates = value.split(' - ');

package/dist/cjs/components/Divider.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var Divider = require('../../Divider-CYvszcff.js');
+var Divider = require('../../Divider-Goh6mpPK.js');
 require('react/jsx-runtime');
 require('clsx');
-require('../hooks/useDeviceTargetClass.js');
+require('../hooks/useDeviceTargetClassGenerator.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');

package/dist/cjs/components/Dot.js

@@ -2,8 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -16,29 +17,11 @@ require('../hooks/styleAttributes.js');
 
 function Dot(props) {
     var children = props.children, className = props.className;
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'dot_shape_',
-        propsKey: 'shape',
-    });
-    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'dot_size_',
-        propsKey: 'size',
-    });
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    var borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass;
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'dot', borderColorClass, borderTypeClass, fillClass, shapeClass, sizeClass), style: styles, children: children }));
+    return (jsxRuntime.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 }));
 }
 
 exports.Dot = Dot;

package/dist/cjs/components/Drawer.js

@@ -5,10 +5,10 @@ var clsx = require('clsx');
 var ReactDrawer = require('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 (jsxRuntime.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 (jsxRuntime.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 && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
+        open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, onClose: closeModal, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 exports.Drawer = Drawer;

package/dist/cjs/components/Dropdown.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem-DPBYY3cR.js');
+var DropdownItem = require('../../DropdownItem-DaN20LFe.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../hooks/useDeviceTargetClass.js');
+require('../hooks/useDeviceTargetClassGenerator.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
@@ -14,10 +15,9 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Divider-CYvszcff.js');
-require('../../Link-CqWzwh8V.js');
-require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Text-C-scXvy7.js');
+require('../../Divider-Goh6mpPK.js');
+require('../../Link-DGj-cNje.js');
+require('../../Text-Beslj4Ns.js');
 
 
 

package/dist/cjs/components/Flex.js

@@ -2,8 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -16,108 +17,20 @@ require('../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.useDeviceTargetClass(props, {
-        prefix: 'flex_align-content_',
-        propsKey: 'alignContent',
-    });
-    var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex_align-items_',
-        propsKey: 'alignItems',
-    });
-    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex_justify-content_',
-        propsKey: 'justifyContent',
-    });
-    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex_wrap_',
-        propsKey: 'wrap',
-    });
-    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex_direction_',
-        propsKey: 'direction',
-    });
-    var flowClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex_flow_',
-        propsKey: 'flow',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex_shape_',
-        propsKey: 'shape',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'position',
-    });
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
+    var classGenerator = useDeviceTargetClassGenerator.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.useStyles(props), flexStyles = _b.styles, flexWrapperStyles = _b.wrapper;
-    return (jsxRuntime.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: jsxRuntime.jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
+    return (jsxRuntime.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: jsxRuntime.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.useDeviceTargetClass(props, {
-        prefix: 'flex__item_align-self_',
-        propsKey: 'alignSelf',
-    });
-    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex__item_direction_',
-        propsKey: 'direction',
-    });
-    var growClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex__item_grow_',
-        propsKey: 'grow',
-    });
-    var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex__item_align-items_',
-        propsKey: 'alignItems',
-    });
-    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex__item_justify-content_',
-        propsKey: 'justifyContent',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex__item_shape_',
-        propsKey: 'shape',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'resize-horizontal_',
-        propsKey: 'width',
-    });
-    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex__item_wrap_',
-        propsKey: 'wrap',
-    });
-    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'position_',
-        propsKey: 'position',
-    });
+    var classGenerator = useDeviceTargetClassGenerator.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.useStyles(props).styles;
-    return (jsxRuntime.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 (jsxRuntime.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 }));
 }
 
 exports.Flex = Flex;

package/dist/cjs/components/Grid.js

@@ -2,8 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -16,143 +17,29 @@ require('../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.useDeviceTargetClass(props, {
-        prefix: 'grid_columns_',
-        propsKey: 'columns',
-    });
-    var rowsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid_rows_',
-        propsKey: 'rows',
-    });
-    var rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid_row-gap_',
-        propsKey: 'rowGap',
-    });
-    var columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid_column-gap_',
-        propsKey: 'columnGap',
-    });
-    var alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid_align-content_',
-        propsKey: 'alignContent',
-    });
-    var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid_align-items_',
-        propsKey: 'alignItems',
-    });
-    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid_justify-content_',
-        propsKey: 'justifyContent',
-    });
-    var justifyItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid_justify-items_',
-        propsKey: 'justifyItems',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
+    var classGenerator = useDeviceTargetClassGenerator.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.useStyles(props).styles;
-    return (jsxRuntime.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 && jsxRuntime.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.jsx("div", { className: "grid__after", children: after })] }));
+    return (jsxRuntime.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 && jsxRuntime.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.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.useDeviceTargetClass(props, {
-        prefix: 'order_',
-        propsKey: 'order',
-    });
-    var alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid__item_align-self_',
-        propsKey: 'alignSelf',
-    });
-    var justifySelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid__item_justify-self_',
-        propsKey: 'justifySelf',
-    });
-    var columnStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid__item_column-start_',
-        propsKey: 'columnStart',
-    });
-    var columnEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid__item_column-end_',
-        propsKey: 'columnEnd',
-    });
-    var columnSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid__item_column-span_',
-        propsKey: 'columnSpan',
-    });
-    var rowStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid__item_row-start_',
-        propsKey: 'rowStart',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'height',
-    });
-    var rowEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid__item_row-end_',
-        propsKey: 'rowEnd',
-    });
-    var rowSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'grid__item_row-span_',
-        propsKey: 'rowSpan',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'gap_',
-        propsKey: 'gap',
-    });
-    var rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'row-gap_',
-        propsKey: 'rowGap',
-    });
-    var columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'column-gap_',
-        propsKey: 'columnGap',
-    });
-    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'direction_',
-        propsKey: 'direction',
-    });
+    var classGenerator = useDeviceTargetClassGenerator.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.useStyles(props).styles;
-    return (jsxRuntime.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 (jsxRuntime.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.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var borderColorClass = useDeviceTargetClass.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.useDeviceTargetClassGenerator(props);
+    var borderColorClass = classGenerator.borderColorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass;
     // @ts-expect-error
     var gridRowStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx(Tag, { className: clsx(className, 'grid__row', fillClass, fillHoverClass, borderColorClass), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: gridRowStyles, onClick: onClick, children: children }));
+    return (jsxRuntime.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 }));
 }
 
 exports.Grid = Grid;

package/dist/cjs/components/Group.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var Group = require('../../Group-Bf2uSl3S.js');
+var Group = require('../../Group-D6CXN4hS.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../hooks/useDeviceTargetClass.js');
+require('../hooks/useDeviceTargetClassGenerator.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');