@itcase/ui 1.8.122 → 1.8.124

package/dist/components/Dadata.js

@@ -1,9 +1,8 @@
-import { _ as __assign, b as __rest } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { PartySuggestions } from 'react-dadata';
-import { I as Input } from '../Input_es_CiDHjDqJ.js';
+import { I as Input } from '../Input_es_BnCXATnh.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
@@ -20,15 +19,21 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 
 function Dadata(props) {
-    var delay = props.delay, input = props.input, inputProps = props.inputProps, meta = props.meta, token = props.token, setValue = props.setValue;
-    var dadataInputProps = useMemo(function () {
-        return __assign(__assign({}, inputProps), { className: clsx('react-dadata__input', meta.active && 'input_state_focus', meta.error &&
+    const { delay, input, inputProps, meta, token, setValue } = props;
+    const dadataInputProps = useMemo(() => {
+        return {
+            ...inputProps,
+            className: clsx('react-dadata__input', meta.active && 'input_state_focus', meta.error &&
                 meta.touched &&
-                "input_state_".concat(meta.error.key || 'error')), 
+                `input_state_${meta.error.key || 'error'}`),
             // https://www.npmjs.com/package/react-dadata
             // "Свойство value игнорируется."
             // value: input.value,
-            inputValue: input.value, onBlur: input.onBlur, onChange: input.onChange, onFocus: input.onFocus });
+            inputValue: input.value,
+            onBlur: input.onBlur,
+            onChange: input.onChange,
+            onFocus: input.onFocus,
+        };
     }, [
         inputProps,
         meta.active,
@@ -42,8 +47,8 @@ function Dadata(props) {
     return (jsx(PartySuggestions, { minChars: 3, customInput: DadataCustomInput, delay: delay || 750, inputProps: dadataInputProps, token: token, onChange: setValue }));
 }
 function DadataCustomInput(props) {
-    var inputValue = props.inputValue, otherProps = __rest(props, ["inputValue"]);
-    return jsx(Input, __assign({}, otherProps, { value: inputValue }));
+    const { inputValue, ...otherProps } = props;
+    return jsx(Input, { ...otherProps, value: inputValue });
 }
 
 export { Dadata };

package/dist/components/DatePeriod.js

@@ -2,11 +2,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_BP5BrEr-.js';
+import { D as DatePickerInput } from '../DatePicker_es_D1LvY5RT.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_ayPPUwQ7.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_BVQ7_n0k.js';
 import 'date-fns/locale';
 import 'react-datepicker';
 import '../hooks/useStyles/useStyles.js';
@@ -21,20 +20,20 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Button_es_CtH5EKJd.js';
-import '../Icon_es_BrwLifge.js';
+import '../Button_es_Cn3wtv3M.js';
+import '../Icon_es_D5eiycFI.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_XiqbdwLp.js';
-import '../Text_es_CwV9rjFD.js';
-import '../Loader_es_BUSqFrCd.js';
-import '../Input_es_CiDHjDqJ.js';
-import '../Label_es_SULlg9bL.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';
+import '../Loader_es_CmSggwbR.js';
+import '../Input_es_BnCXATnh.js';
+import '../Label_es_DCqpSw_F.js';
 import '@itcase/icons/default';
 import 'lodash/castArray';
 
-var datePeriodAppearanceSize = {
+const datePeriodAppearanceSize = {
     sizeL: {
         size: 'm',
         chipsAppearanceSize: 'sizeL',
@@ -51,7 +50,7 @@ var datePeriodAppearanceSize = {
     },
 };
 
-var datePeriodAppearanceSurface = {
+const datePeriodAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         chipsAppearance: 'surfacePrimary ghost',
@@ -70,27 +69,30 @@ var datePeriodAppearanceSurface = {
     },
 };
 
-var datePeriodAppearance = __assign(__assign({}, datePeriodAppearanceSurface), datePeriodAppearanceSize);
+const datePeriodAppearance = {
+    ...datePeriodAppearanceSurface,
+    ...datePeriodAppearanceSize,
+};
 
-var datePeriodConfig = {
+const datePeriodConfig = {
     appearance: datePeriodAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         datePeriodConfig.appearance = appearanceConfig;
     },
 };
 function DatePeriod(props) {
-    var className = props.className, appearance = props.appearance, _a = props.datePeriodIntervalsList, datePeriodIntervalsList = _a === void 0 ? Object.values(DATE_PERIOD_INTERVALS) : _a, datePeriodValueEnd = props.datePeriodValueEnd, datePeriodValueStart = props.datePeriodValueStart, monthsShown = props.monthsShown, isSkeleton = props.isSkeleton, isDisabled = props.isDisabled, onChangeDatePeriod = props.onChangeDatePeriod, onKeyDown = props.onKeyDown;
-    var appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var _b = propsGenerator, fillClass = _b.fillClass, chipsAppearance = _b.chipsAppearance, chipsAppearanceSize = _b.chipsAppearanceSize, chipsShape = _b.chipsShape, datePickerAppearance = _b.datePickerAppearance, datePickerAppearanceSize = _b.datePickerAppearanceSize, datePickerInputAppearance = _b.datePickerInputAppearance, datePickerInputFillHover = _b.datePickerInputFillHover, datePickerInputSize = _b.datePickerInputSize, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
-    var onClickPeriodChips = useCallback(function (selectedPeriodItem) {
-        var dateStartIso = selectedPeriodItem.dateIntervalsList[0];
-        var dateEndIso = selectedPeriodItem.dateIntervalsList[1];
+    const { appearance, className, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodValueEnd, datePeriodValueStart, monthsShown, selectsRange = true, isDisabled, isSkeleton, onChangeDatePeriod, onKeyDown, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputFillHover, datePickerInputSize, datePickerInputTextSize, shapeClass, sizeClass, } = propsGenerator;
+    const onClickPeriodChips = useCallback((selectedPeriodItem) => {
+        const dateStartIso = selectedPeriodItem.dateIntervalsList[0];
+        const dateEndIso = selectedPeriodItem.dateIntervalsList[1];
         onChangeDatePeriod(new Date(dateStartIso), new Date(dateEndIso));
     }, [onChangeDatePeriod]);
-    var checkIsChipsActive = useCallback(function (targetPeriodItem) {
-        var dateStartIso = targetPeriodItem.dateIntervalsList[0];
-        var dateEndIso = targetPeriodItem.dateIntervalsList[1];
+    const checkIsChipsActive = useCallback((targetPeriodItem) => {
+        const dateStartIso = targetPeriodItem.dateIntervalsList[0];
+        const dateEndIso = targetPeriodItem.dateIntervalsList[1];
         return (dateStartIso === datePeriodValueStart &&
             dateEndIso === datePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
@@ -108,18 +110,18 @@ function DatePeriod(props) {
     //   },
     //   [onChangeDatePeriod],
     // )
-    return (jsx("div", { className: clsx(className, 'date-period', shapeClass && "date-period_shape_".concat(shapeClass), sizeClass && "date-period_size_".concat(sizeClass), isSkeleton && "date-period_skeleton", fillClass && "fill_".concat(fillClass), 'cursor_type_pointer'), children: jsxs(ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsx(Chips, { appearance: "".concat(chipsAppearance, " ").concat(chipsAppearanceSize), label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsx(DatePickerInput, { datePickerProps: {
-                        appearance: "".concat(datePickerAppearance, " ").concat(datePickerAppearanceSize),
+    return (jsx("div", { className: clsx(className, 'date-period', shapeClass && `date-period_shape_${shapeClass}`, sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: jsxs(ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map((datePeriodItem) => (jsx(Chips, { appearance: `${chipsAppearance} ${chipsAppearanceSize}`, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))), jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
+                        appearance: `${datePickerAppearance} ${datePickerAppearanceSize}`,
                         dateFormat: 'dd/MM/yyyy',
                         monthsShown: monthsShown,
-                        selectsRange: true,
+                        selectsRange: selectsRange,
                         showWeekNumbers: true,
                         isClearable: false,
                         isStartDefaultNull: true,
                         onKeyDown: onKeyDown,
                     }, endValue: datePeriodValueEnd, inputProps: {
-                        className: "date-period__datepicker-input date-period__datepicker-input_size_".concat(datePickerInputSize),
-                        appearance: "".concat(datePickerInputAppearance, " ghost"),
+                        appearance: `${datePickerInputAppearance} ghost`,
+                        className: `date-period__datepicker-input date-period__datepicker-input_size_${datePickerInputSize}`,
                         fillHover: datePickerInputFillHover,
                         textSize: datePickerInputTextSize,
                         placeholder: 'Выбрать период',

package/dist/components/DatePicker.js

@@ -1,5 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_BP5BrEr-.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_D1LvY5RT.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -21,14 +20,14 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Button_es_CtH5EKJd.js';
-import '../Icon_es_BrwLifge.js';
+import '../Button_es_Cn3wtv3M.js';
+import '../Icon_es_D5eiycFI.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_XiqbdwLp.js';
-import '../Text_es_CwV9rjFD.js';
-import '../Loader_es_BUSqFrCd.js';
-import '../Input_es_CiDHjDqJ.js';
-import '../Label_es_SULlg9bL.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';
+import '../Loader_es_CmSggwbR.js';
+import '../Input_es_BnCXATnh.js';
+import '../Label_es_DCqpSw_F.js';
 import '@itcase/icons/default';

package/dist/components/Divider.js

@@ -1,8 +1,7 @@
-export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider_es_CCLBFIx6.js';
+export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider_es_BiYozVBS.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';

package/dist/components/Dot.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -19,12 +18,12 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
 function Dot(props) {
-    var className = props.className, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
+    const { className, children } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { fillClass, borderColorClass, borderTypeClass, shapeClass, sizeClass, } = propsGenerator;
     // @ts-expect-error
-    var styles = useStyles(props).styles;
-    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 }));
+    const { styles } = useStyles(props);
+    return (jsx("div", { className: clsx(className, 'dot', borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `dot_shape_${shapeClass}`, sizeClass && `dot_size_${sizeClass}`), style: styles, children: children }));
 }
 
 export { Dot };

package/dist/components/Drawer.js

@@ -2,12 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import ReactDrawer from 'react-modern-drawer';
-import { D as Divider } from '../Divider_es_CCLBFIx6.js';
-import { I as Icon, b as Title } from '../Icon_es_BrwLifge.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
+import { D as Divider } from '../Divider_es_BiYozVBS.js';
+import { I as Icon, b as Title } from '../Icon_es_D5eiycFI.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons24 } from '@itcase/icons/default';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/camelCase';
@@ -25,10 +24,10 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_XiqbdwLp.js';
+import '../Link_es_P2b6ya7P.js';
 import 'lodash/castArray';
 
-var drawerAppearanceSize = {
+const drawerAppearanceSize = {
     sizeH3: {
         titleTextSize: 'h3',
         descTextSize: 's',
@@ -37,7 +36,7 @@ var drawerAppearanceSize = {
     },
 };
 
-var drawerAppearanceSurface = {
+const drawerAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
@@ -65,36 +64,39 @@ var drawerAppearanceSurface = {
     },
 };
 
-var drawerAppearance = __assign(__assign({}, drawerAppearanceSize), drawerAppearanceSurface);
+const drawerAppearance = {
+    ...drawerAppearanceSize,
+    ...drawerAppearanceSurface,
+};
 
-var drawerConfig = {
+const drawerConfig = {
     appearance: drawerAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         drawerConfig.appearance = appearanceConfig;
     },
 };
 function Drawer(props) {
-    var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, enableOverlay = props.enableOverlay, stickyButton = props.stickyButton, before = props.before, after = props.after, close = props.close, isOpen = props.isOpen, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
-    var _isOpen = isOpen !== null && isOpen !== void 0 ? isOpen : isOpenModal;
-    var isOpenPrevRef = useRef(Boolean(_isOpen));
-    var appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, divider = propsGenerator.divider, dividerSize = propsGenerator.dividerSize, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
-    useEffect(function () {
-        var isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
+    const { dataTestId, dataTour, className, type, appearance, title, desc, enableOverlay, stickyButton, before, after, close, isOpen, isOpenModal, onClickClose, onClose, children, } = props;
+    const _isOpen = isOpen ?? isOpenModal;
+    const isOpenPrevRef = useRef(Boolean(_isOpen));
+    const appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { direction, size, titleTextColor, titleTextSize, descTextColor, descTextSize, divider, dividerSize, zeroPadding, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
+    useEffect(() => {
+        const isFromOpenToClose = isOpenPrevRef.current === true && !_isOpen;
         if (isFromOpenToClose && onClose) {
             onClose();
         }
         isOpenPrevRef.current = Boolean(_isOpen);
-        var isNeedShowWarning = process.env.NODE_ENV === 'development' &&
+        const isNeedShowWarning = process.env.NODE_ENV === 'development' &&
             typeof isOpenModal !== 'undefined';
         if (isNeedShowWarning) {
             console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
         }
     }, [_isOpen, onClose]);
-    return (jsxs(ReactDrawer, { dataTour: dataTour, className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
+    return (jsxs(ReactDrawer, { dataTour: dataTour, className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 export { Drawer, drawerAppearance, drawerConfig };

package/dist/components/Dropdown/stories/__mock__.js

@@ -1,6 +1,6 @@
 import { icons24 } from '@itcase/icons/default';
 
-var dropdownListMock = [
+const dropdownListMock = [
     { key: 1, label: 'Item 1', isActive: true },
     { key: 2, label: 'Item 2', isActive: false },
     { key: 3, label: 'Item 3', badgeValue: 3, isActive: false },
@@ -31,7 +31,7 @@ var dropdownListMock = [
     { key: 8, label: 'Item 8', isActive: false },
     { key: 9, label: 'Item 9', isActive: false },
 ];
-var dropdownListMessageMock = [
+const dropdownListMessageMock = [
     { key: 1, emptyMessage: 'Item 1' },
     { key: 2, emptyMessage: 'Item 2' },
     { key: 3, emptyMessage: 'Item 3' },
@@ -42,7 +42,7 @@ var dropdownListMessageMock = [
     { key: 8, emptyMessage: 'Item 8' },
     { key: 9, emptyMessage: 'Item 9' },
 ];
-var dropdownListBadgeMock = [
+const dropdownListBadgeMock = [
     { key: 1, label: 'Item 1', badgeValue: 1 },
     { key: 2, label: 'Item 2', badgeValue: 2 },
     { key: 3, label: 'Item 3', badgeValue: 3 },
@@ -53,7 +53,7 @@ var dropdownListBadgeMock = [
     { key: 8, label: 'Item 8', badgeValue: 8 },
     { key: 9, label: 'Item 9', badgeValue: 9 },
 ];
-var dropdownListSimpleMock = [
+const dropdownListSimpleMock = [
     { key: 1, label: 'Item 1', isActive: true },
     { key: 2, label: 'Item 2', isActive: false },
     { key: 3, label: 'Item 3', badgeValue: 3, isActive: false },
@@ -80,7 +80,7 @@ var dropdownListSimpleMock = [
     { key: 8, label: 'Item 8', showDivider: true, isActive: false },
     { key: 9, label: 'Item 9', isActive: false },
 ];
-var dropdownListBeforeMock = [
+const dropdownListBeforeMock = [
     {
         key: 1,
         label: 'Item 1',
@@ -101,7 +101,7 @@ var dropdownListBeforeMock = [
         isActive: false,
     },
 ];
-var dropdownListAfterMock = [
+const dropdownListAfterMock = [
     {
         key: 1,
         label: 'Item 1',

package/dist/components/Dropdown.js

@@ -1,9 +1,8 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_BXl6lPJx.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_B-1qtEa7.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -18,11 +17,11 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Icon_es_BrwLifge.js';
+import '../Icon_es_D5eiycFI.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import '../Link_es_XiqbdwLp.js';
-import '../Text_es_CwV9rjFD.js';
-import '../Divider_es_CCLBFIx6.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';
+import '../Divider_es_BiYozVBS.js';

package/dist/components/Flex.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -19,22 +18,22 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
 function Flex(props) {
-    var id = props.id, className = props.className, type = props.type, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignContentClass = propsGenerator.alignContentClass, alignItemsClass = propsGenerator.alignItemsClass, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, flowClass = propsGenerator.flowClass, positionClass = propsGenerator.positionClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    const { id, className, type, style, tag: Tag = 'div', onClick, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass, justifyContentClass, alignContentClass, alignItemsClass, fillClass, borderColorClass, borderTypeClass, dataTestId, dataTour, flowClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
-    var _b = useStyles(props), flexStyles = _b.styles, flexWrapperStyles = _b.wrapper;
-    return (jsx(Tag, { id: id, 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)), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, flexStyles, style), onClick: onClick, children: jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
+    const { styles: flexStyles, wrapper: flexWrapperStyles } = useStyles(props);
+    return (jsx(Tag, { id: id, className: clsx(className, 'flex', widthClass && `width_${widthClass}`, alignContentClass && `flex_align-content_${alignContentClass}`, alignItemsClass && `flex_align-items_${alignItemsClass}`, directionClass && `flex_direction_${directionClass}`, fillClass && `fill_${fillClass}`, flowClass && `flex_flow_${flowClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, positionClass && `position_${positionClass}`, justifyContentClass && `flex_justify-content_${justifyContentClass}`, shapeClass && `flex_shape_${shapeClass}`, type && `flex_type_${type}`, wrapClass && `flex_wrap_${wrapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, flexStyles, style), onClick: onClick, children: jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
 }
 
 function FlexItem(props) {
-    var className = props.className, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignItemsClass = propsGenerator.alignItemsClass, alignSelfClass = propsGenerator.alignSelfClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, growClass = propsGenerator.growClass, positionClass = propsGenerator.positionClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    const { className, htmlFor, style, tag: Tag = 'div', children } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass, justifyContentClass, alignItemsClass, alignSelfClass, fillClass, fillHoverClass, dataTestId, dataTour, growClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
-    var flexItemStyles = useStyles(props).styles;
-    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)), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, flexItemStyles, style), children: children }));
+    const { styles: flexItemStyles } = useStyles(props);
+    return (jsx(Tag, { className: clsx(className, 'flex__item', positionClass && `position_${positionClass}`, alignItemsClass && `flex__item_align-items_${alignItemsClass}`, alignSelfClass && `flex__item_align-self_${alignSelfClass}`, directionClass && `flex__item_direction_${directionClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, growClass && `flex__item_grow_${growClass}`, justifyContentClass &&
+            `flex__item_justify-content_${justifyContentClass}`, shapeClass && `flex__item_shape_${shapeClass}`, widthClass && `width_${widthClass}`, wrapClass && `flex__item_wrap_${wrapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, flexItemStyles, style), children: children }));
 }
 
 export { Flex, FlexItem };

package/dist/components/Grid.js

@@ -2,7 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -19,30 +18,30 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
 function Grid(props) {
-    var id = props.id, className = props.className, type = props.type, dataTour = props.dataTour, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, useGridSystem = props.useGridSystem, verticalResizing = props.verticalResizing, before = props.before, after = props.after, onClick = props.onClick, onDoubleClick = props.onDoubleClick, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var justifyContentClass = propsGenerator.justifyContentClass, justifyItemsClass = propsGenerator.justifyItemsClass, alignContentClass = propsGenerator.alignContentClass, alignItemsClass = propsGenerator.alignItemsClass, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, columnGapClass = propsGenerator.columnGapClass, columnsClass = propsGenerator.columnsClass, heightClass = propsGenerator.heightClass, rowGapClass = propsGenerator.rowGapClass, rowsClass = propsGenerator.rowsClass, widthClass = propsGenerator.widthClass;
+    const { id, className, dataTour, type, horizontalResizing, horizontalScroll, tag: Tag = 'div', useGridSystem, verticalResizing, before, after, onClick, onDoubleClick, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
     // @ts-expect-error
-    var gridStyles = useStyles(props).styles;
-    return (jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), 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)), dataTour: dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && jsx("div", { className: "grid__before", children: before }), children, after && jsx("div", { className: "grid__after", children: after })] }));
+    const { styles: gridStyles } = useStyles(props);
+    return (jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`), dataTour: dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, 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, className = props.className, style = props.style, onClick = props.onClick, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var directionClass = propsGenerator.directionClass, justifySelfClass = propsGenerator.justifySelfClass, alignSelfClass = propsGenerator.alignSelfClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, columnEndClass = propsGenerator.columnEndClass, columnGapClass = propsGenerator.columnGapClass, columnSpanClass = propsGenerator.columnSpanClass, columnStartClass = propsGenerator.columnStartClass, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, gapClass = propsGenerator.gapClass, heightClass = propsGenerator.heightClass, orderClass = propsGenerator.orderClass, rowEndClass = propsGenerator.rowEndClass, rowGapClass = propsGenerator.rowGapClass, rowSpanClass = propsGenerator.rowSpanClass, rowStartClass = propsGenerator.rowStartClass, widthClass = propsGenerator.widthClass;
+    const { id, className, style, onClick, children } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass, justifySelfClass, alignSelfClass, fillClass, fillHoverClass, columnEndClass, columnGapClass, columnSpanClass, columnStartClass, dataTestId, dataTour, gapClass, heightClass, orderClass, rowEndClass, rowGapClass, rowSpanClass, rowStartClass, widthClass, } = propsGenerator;
     // @ts-expect-error
-    var gridItemStyles = useStyles(props).styles;
-    return (jsx("div", { id: id, 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-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, gridItemStyles, style), onClick: onClick, children: children }));
+    const { styles: gridItemStyles } = useStyles(props);
+    return (jsx("div", { id: id, className: clsx(className, 'grid__item', orderClass && `order_${orderClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, alignSelfClass && `grid__item_align-self_${alignSelfClass}`, justifySelfClass && `grid__item_justify-self_${justifySelfClass}`, columnStartClass && `grid__item_column-start_${columnStartClass}`, columnEndClass && `grid__item_column-end_${columnEndClass}`, columnSpanClass && `grid__item_column-span_${columnSpanClass}`, rowStartClass && `grid__item_row-start_${rowStartClass}`, rowEndClass && `grid__item_row-end_${rowEndClass}`, rowSpanClass && `grid__item_row-span_${rowSpanClass}`, directionClass && `direction_${directionClass}`, gapClass && `gap_${gapClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, rowGapClass && `row-gap_${rowGapClass}`, columnGapClass && `column-gap_${columnGapClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, gridItemStyles, style), onClick: onClick, children: children }));
 }
 
 function GridRow(props) {
-    var id = props.id, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, heightClass = propsGenerator.heightClass, widthClass = propsGenerator.widthClass;
+    const { id, className, dataTestId, dataTour, htmlFor, tag: Tag = 'div', onClick, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { fillClass, fillHoverClass, borderColorClass, heightClass, widthClass, } = propsGenerator;
     // @ts-expect-error
-    var gridRowStyles = useStyles(props).styles;
-    return (jsx(Tag, { id: id, className: clsx(className, 'grid__row', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), borderColorClass && "border-color_".concat(borderColorClass)), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: gridRowStyles, onClick: onClick, children: children }));
+    const { styles: gridRowStyles } = useStyles(props);
+    return (jsx(Tag, { id: id, className: clsx(className, 'grid__row', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: gridRowStyles, onClick: onClick, children: children }));
 }
 
 export { Grid, GridItem, GridRow };

package/dist/components/Group.js

@@ -1,9 +1,8 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_DRqIIM9m.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_BU5k8f5S.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/HTMLContent.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -19,12 +18,12 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
 function HTMLContent(props) {
-    var className = props.className, content = props.content, dataTour = props.dataTour, style = props.style, onClick = props.onClick, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textWeightClass = propsGenerator.textWeightClass, columnsClass = propsGenerator.columnsClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    const { className, content, dataTour, style, onClick, children } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillClass, fillHoverClass, borderColorClass, borderTypeClass, borderWidthClass, textColorClass, textWeightClass, columnsClass, elevationClass, heightClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
-    var htmlContentStyles = useStyles(props).styles;
-    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 }, dataTour: dataTour, style: Object.assign({}, htmlContentStyles, style), onClick: onClick, children: children }));
+    const { styles: htmlContentStyles } = useStyles(props);
+    return (jsx("div", { className: clsx(className, 'html-content', alignClass && `align_${alignClass}`, alignDirectionClass && `align_${alignDirectionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, columnsClass && `html-content_columns_${columnsClass}`, directionClass && `html-content_direction_${directionClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, flexGrowClass && `flex-grow_${flexGrowClass}`, heightClass && `height_${heightClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, shapeClass && `html-content_shape_${shapeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, wrapClass && `html-content_wrap_${wrapClass}`, widthClass && `width_${widthClass}`), dangerouslySetInnerHTML: { __html: content }, dataTour: dataTour, style: Object.assign({}, htmlContentStyles, style), onClick: onClick, children: children }));
 }
 
 export { HTMLContent };