@itcase/ui 1.4.13 → 1.5.1

package/dist/cjs/components/Code.js

@@ -9,6 +9,9 @@ var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevic
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
@@ -27,10 +30,12 @@ var codeConfig = {
 function Code(props) {
     var className = props.className, appearance = props.appearance, inputAutoFocus = props.inputAutoFocus, _a = props.inputCount, inputCount = _a === void 0 ? 6 : _a, _b = props.inputPlaceholder, inputPlaceholder = _b === void 0 ? 0 : _b, _c = props.inputType, inputType = _c === void 0 ? 'number' : _c, separatorComponent = props.separatorComponent, before = props.before, after = props.after, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     var _d = React.useState(''), otp = _d[0], setOtp = _d[1];
-    // @ts-expect-error
-    var appearanceConfig = codeConfig.appearance && codeConfig.appearance[appearance];
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = codeConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var gapClass = propsGenerator.gapClass, _e = propsGenerator.inputBorderColorClass, inputBorderColorClass = _e === void 0 ? 'surfaceBorderTertiary' : _e, _f = propsGenerator.inputBorderColorHoverClass, inputBorderColorHoverClass = _f === void 0 ? 'surfaceBorderQuaternary' : _f, _g = propsGenerator.inputBorderFocusColorClass, inputBorderFocusColorClass = _g === void 0 ? 'surfaceBorderAccent' : _g, _h = propsGenerator.inputBorderWidthClass, inputBorderWidthClass = _h === void 0 ? 1 : _h, _j = propsGenerator.inputCaretColorClass, inputCaretColorClass = _j === void 0 ? 'surfaceItemAccent' : _j, _k = propsGenerator.inputFillClass, inputFillClass = _k === void 0 ? 'surfacePrimary' : _k, _l = propsGenerator.inputFillHoverClass, inputFillHoverClass = _l === void 0 ? 'surfaceSecondary' : _l, inputPlaceholderTextColorClass = propsGenerator.inputPlaceholderTextColorClass, _m = propsGenerator.inputShapeClass, inputShapeClass = _m === void 0 ? 'rounded' : _m, _o = propsGenerator.inputSizeClass, inputSizeClass = _o === void 0 ? 'normal' : _o, _p = propsGenerator.inputTextColorClass, inputTextColorClass = _p === void 0 ? 'xxl' : _p, _q = propsGenerator.inputTextSizeClass, inputTextSizeClass = _q === void 0 ? 'surfaceTextPrimary' : _q, inputTextWeightClass = propsGenerator.inputTextWeightClass, widthClass = propsGenerator.widthClass;
+    var inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = propsGenerator.inputBorderFocusColorClass, inputBorderWidthClass = propsGenerator.inputBorderWidthClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputFillHoverClass = propsGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = propsGenerator.inputPlaceholderTextColorClass, inputShapeClass = propsGenerator.inputShapeClass, inputSizeClass = propsGenerator.inputSizeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // NOTE: too many dependencies for "useCallback" and possible too many checks
     var renderInput = function (otpInputProps, index) {
         return (jsxRuntime.jsx("input", tslib_es6.__assign({}, otpInputProps, { className: clsx('code__input', inputCaretColorClass && "caret-color_".concat(inputCaretColorClass), inputFillClass && "fill_".concat(inputFillClass), inputFillHoverClass && "fill_hover_".concat(inputFillHoverClass), inputPlaceholderTextColorClass &&
@@ -47,7 +52,7 @@ function Code(props) {
     React.useEffect(function () {
         onChange && onChange(otp);
     }, [otp]);
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'code', widthClass), children: [before, jsxRuntime.jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper', gapClass && "gap_".concat(gapClass)), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'code', widthClass, sizeClass && "code_size_".concat(sizeClass)), children: [before, jsxRuntime.jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper'), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
 }
 
 exports.Code = Code;

package/dist/cjs/components/CookiesWarning.js

@@ -5,29 +5,32 @@ var React = require('react');
 var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Button = require('../../Button-BiJZz4Bx.js');
-var Group = require('../../Group-qq4Iisll.js');
-var Text = require('../../Text-C49zj3jO.js');
+var Button = require('../../Button-BmSyIDb_.js');
+var Group = require('../../Group-BVlu5z77.js');
+var Text = require('../../Text-CEcBg-F5.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
-require('../../Icon-BcBOnVKH.js');
+require('../../Icon-DU2T-nfY.js');
 require('react-inlinesvg');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Link-BnqN6ysn.js');
-require('../../Tooltip-DRta8lK_.js');
-require('../../Title-BLGDdlnX.js');
-require('../../Loader-DdKHrLnw.js');
+require('../../Link-UmzWKcxT.js');
+require('../../Tooltip-Lhx-Fefx.js');
+require('../../Title-C4xUtigh.js');
+require('../../Loader-rzo8nnRI.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;
+    var className = props.className, _a = props.message, message = _a === 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».' : _a, textColor = props.textColor, textSize = props.textSize, 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, _c = props.isHideOnScroll, isHideOnScroll = _c === void 0 ? false : _c;
     var cookiesWarningRef = React.useRef(null);
     var isOpen = React.useMemo(function () { return Cookies.get('cookies-warning') !== 'close'; }, []);
     var closeCookiesWarning = React.useCallback(function () {
@@ -51,7 +54,7 @@ function CookiesWarning(props) {
     }, [isOpen]);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     var fillClass = propsGenerator.fillClass, fillGradientClass = propsGenerator.fillGradientClass, gapClass = propsGenerator.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;
+    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, size: buttonSize, fill: buttonFill, fillHover: buttonFillHover, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, shape: buttonShape, onClick: closeCookiesWarning, children: buttonLabel })] }) })) : null;
 }
 
 exports.CookiesWarning = CookiesWarning;

package/dist/cjs/components/DadataHintField.js

@@ -5,20 +5,25 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var reactDadata = require('react-dadata');
-var Input = require('../../Input-DiFnIFT7.js');
+var Input = require('../../Input-e0kLrbs6.js');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 
 function DadataHintField(props) {
-    var delay = props.delay, input = props.input, inputProps = props.inputProps, meta = props.meta, setValue = props.setValue, token = props.token;
+    var delay = props.delay, input = props.input, inputProps = props.inputProps, meta = props.meta, token = props.token, setValue = props.setValue;
     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')), 
+        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,
@@ -33,7 +38,7 @@ function DadataHintField(props) {
         input.onBlur,
         input.onChange,
     ]);
-    return (jsxRuntime.jsx(reactDadata.PartySuggestions, { customInput: DadataСustomInput, delay: delay || 750, inputProps: dadataInputProps, minChars: 3, token: token, onChange: setValue }));
+    return (jsxRuntime.jsx(reactDadata.PartySuggestions, { minChars: 3, customInput: DadataСustomInput, delay: delay || 750, inputProps: dadataInputProps, token: token, onChange: setValue }));
 }
 function DadataСustomInput(props) {
     var inputValue = props.inputValue, otherProps = tslib_es6.__rest(props, ["inputValue"]);

package/dist/cjs/components/DatePicker.js

@@ -8,25 +8,28 @@ var locale = require('date-fns/locale');
 var DatePicker = require('react-datepicker');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button-BiJZz4Bx.js');
-var Icon = require('../../Icon-BcBOnVKH.js');
-var Input = require('../../Input-DiFnIFT7.js');
-var Label = require('../../Label-D-LcvthP.js');
-var Text = require('../../Text-C49zj3jO.js');
+var Button = require('../../Button-BmSyIDb_.js');
+var Icon = require('../../Icon-DU2T-nfY.js');
+var Input = require('../../Input-e0kLrbs6.js');
+var Label = require('../../Label-CP8IAPOM.js');
+var Text = require('../../Text-CEcBg-F5.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Link-BnqN6ysn.js');
-require('../../Loader-DdKHrLnw.js');
+require('../../Link-UmzWKcxT.js');
+require('../../Loader-rzo8nnRI.js');
 require('react-inlinesvg');
-require('../../Tooltip-DRta8lK_.js');
-require('../../Title-BLGDdlnX.js');
+require('../../Tooltip-Lhx-Fefx.js');
+require('../../Title-C4xUtigh.js');
 
 var datePickerAppearance = {
     default: {
@@ -64,7 +67,7 @@ var datePickerConfig = {
     },
 };
 function DatePickerInput(props) {
-    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 className = props.className, appearance = props.appearance, labelTextSize = props.labelTextSize, 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, value = props.value, onChange = props.onChange;
     var datepickerRef = React.useRef(null);
     var start = React.useMemo(function () {
         if (value) {
@@ -96,10 +99,7 @@ function DatePickerInput(props) {
         setEndDate(newEndDate);
     }, [onChange]);
     var renderDayContents = React.useCallback(function (day, date) {
-        return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", labelTextColor: datePickerProps.dayTextColor ||
-                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.dayTextColor), labelTextSize: datePickerProps.dayTextSize ||
-                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.dayTextSize), label: date.getDate().toString(), shape: datePickerProps.dayTextShape ||
-                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.dayTextShape), size: datePickerProps.daySize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.daySize) }));
+        return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", size: datePickerProps.daySize, label: date.getDate().toString(), labelTextColor: datePickerProps.dayTextColor, labelTextSize: datePickerProps.dayTextSize, shape: datePickerProps.dayTextShape }));
     }, [
         datePickerProps.daySize,
         datePickerProps.dayTextColor,
@@ -108,27 +108,7 @@ function DatePickerInput(props) {
     ]);
     var renderCustomHeader = React.useCallback(function (_a) {
         var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
-        return (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFill), fillHover: datePickerProps.iconFillHover ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillHover), fillSize: datePickerProps.iconFillSize ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillSize), iconFill: datePickerProps.iconItemFill ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconItemFill), shape: datePickerProps.iconShape ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconShape), size: datePickerProps.iconSize ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconSize), SvgImage: datePickerProps.iconLeft ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconLeft), onClick: decreaseMonth })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(Text.Text, { className: "react-datepicker__month", size: datePickerProps.monthTextSize ||
-                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.monthTextSize), textColor: datePickerProps.monthTextColor ||
-                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.monthTextColor), textWeight: datePickerProps.monthTextWeight ||
-                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.monthTextWeight), children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsxRuntime.jsx(Text.Text, { className: "react-datepicker__year", size: datePickerProps.yearTextSize ||
-                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.yearTextSize), textColor: datePickerProps.yearTextColor ||
-                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.yearTextColor), textWeight: datePickerProps.yearTextWeight ||
-                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.yearTextWeight), children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), datePickerProps.iconRight && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFill), fillHover: datePickerProps.iconFillHover ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillHover), fillSize: datePickerProps.iconFillSize ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillSize), iconFill: datePickerProps.iconItemFill ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconItemFill), shape: datePickerProps.iconShape ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconShape), size: datePickerProps.iconSize ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconSize), SvgImage: datePickerProps.iconRight ||
-                        (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconRight), onClick: increaseMonth }))] }));
+        return (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", size: datePickerProps.iconSize, fill: datePickerProps.iconFill, fillHover: datePickerProps.iconFillHover, fillSize: datePickerProps.iconFillSize, iconFill: datePickerProps.iconItemFill, shape: datePickerProps.iconShape, SvgImage: datePickerProps.iconLeft, onClick: decreaseMonth })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(Text.Text, { className: "react-datepicker__month", size: datePickerProps.monthTextSize, textColor: datePickerProps.monthTextColor, textWeight: datePickerProps.monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsxRuntime.jsx(Text.Text, { className: "react-datepicker__year", size: datePickerProps.yearTextSize, textColor: datePickerProps.yearTextColor, textWeight: datePickerProps.yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), datePickerProps.iconRight && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", size: datePickerProps.iconSize, fill: datePickerProps.iconFill, fillHover: datePickerProps.iconFillHover, fillSize: datePickerProps.iconFillSize, iconFill: datePickerProps.iconItemFill, shape: datePickerProps.iconShape, SvgImage: datePickerProps.iconRight, onClick: increaseMonth }))] }));
     }, [
         datePickerProps.iconFill,
         datePickerProps.iconFillHover,
@@ -151,20 +131,22 @@ function DatePickerInput(props) {
     React.useEffect(function () {
         setEndDate(end);
     }, [end]);
-    // @ts-expect-error
-    var appearanceConfig = datePickerConfig.appearance && datePickerConfig.appearance[appearance];
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = datePickerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var widthClass = propsGenerator.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 && "datepicker_width_".concat(widthClass)), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ 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 }), 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, popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) &&
+    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({ minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, 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 }), endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: locale.ru, popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) &&
                 "react-datepicker-popper-".concat(datePickerProps.popper), ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, 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, datePickerAppearance = props.datePickerAppearance, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value;
+    var datePickerAppearance = props.datePickerAppearance, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value, isClearable = props.isClearable;
     var multipleValue = React.useMemo(function () {
         if (value) {
             var twoDates = value.split(' - ');
@@ -173,7 +155,7 @@ var DatePickerCustomInput = React.forwardRef(function (props, ref) {
         return '';
     }, [value]);
     var inputAppearanceProps = (_a = datePickerConfig.appearance[datePickerAppearance]) === null || _a === void 0 ? void 0 : _a.input;
-    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, inputAppearanceProps, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, props)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, props))] }));
+    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, inputAppearanceProps, props, inputProps, { className: "datepicker__input", autocomplete: "off", ref: ref, value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, props)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, props))] }));
 });
 DatePickerCustomInput.displayName = 'DatePickerCustomInput';
 function DatePickerClearButton(props) {
@@ -183,12 +165,12 @@ function DatePickerClearButton(props) {
         (_a = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _a === void 0 ? void 0 : _a.onClearClick(event);
         (_b = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _b === void 0 ? void 0 : _b.handleFocus(event);
     }, []);
-    return (jsxRuntime.jsxs(React.Fragment, { children: [clearLabel && (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), labelTextColor: clearLabelTextColor, labelTextSize: clearLabelTextSize, label: clearLabel, labelTextColorHover: clearLabelTextColorHover, onClick: onClick })), (clearIcon || clearIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, size: clearIconSize, SvgImage: clearIcon, onClick: onClick }))] }));
+    return (jsxRuntime.jsxs(React.Fragment, { children: [clearLabel && (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })), (clearIcon || clearIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), size: clearIconSize, fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, SvgImage: clearIcon, onClick: onClick }))] }));
 }
 DatePickerClearButton.displayName = 'DatePickerClearButton';
 function DatePickerInputIcon(props) {
     var inputIcon = props.inputIcon, inputIconFill = props.inputIconFill, inputIconFillHover = props.inputIconFillHover, inputIconFillSize = props.inputIconFillSize, inputIconItemFill = props.inputIconItemFill, inputIconShape = props.inputIconShape, inputIconSize = props.inputIconSize, inputIconSrc = props.inputIconSrc, onClick = props.onClick;
-    return (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, size: inputIconSize, SvgImage: inputIcon, onClick: function () { return onClick && onClick(); } }));
+    return (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), size: inputIconSize, fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, SvgImage: inputIcon, onClick: function () { return onClick && onClick(); } }));
 }
 DatePickerInputIcon.displayName = 'DatePickerInputIcon';
 

package/dist/cjs/components/Divider.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Divider = require('../../Divider-ImOOytuN.js');
+var Divider = require('../../Divider-D8hUUrwe.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('clsx');
@@ -9,6 +9,9 @@ require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');

package/dist/cjs/components/Dot.js

@@ -9,6 +9,9 @@ require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');

package/dist/cjs/components/Drawer.js

@@ -16,7 +16,7 @@ var drawerConfig = {
     },
 };
 function Drawer(props) {
-    var children = props.children, direction = props.direction, isOpenModal = props.isOpenModal, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, dataTestId = props.dataTestId, enableOverlay = props.enableOverlay, size = props.size, type = props.type, onClickClose = props.onClickClose, onClose = props.onClose;
+    var className = props.className, type = props.type, direction = props.direction, size = props.size, dataTestId = props.dataTestId, dataTour = props.dataTour, enableOverlay = props.enableOverlay, before = props.before, after = props.after, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
     var prevIsOpenModalRef = React.useRef(null);
     React.useEffect(function () {
         if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
@@ -24,9 +24,9 @@ function Drawer(props) {
         }
         prevIsOpenModalRef.current = Boolean(isOpenModal);
     }, [isOpenModal, onClose]);
-    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, 
+    return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "data-tour-".concat(dataTour)), direction: direction || 'right', size: size || 600, "data-testid": dataTestId, "data-tour": dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", 
         // @ts-expect-error
-        open: isOpenModal, "data-testid": dataTestId, "data-tour": dataTour, overlayClassName: "drawer__overlay", size: size || 600, onClose: onClickClose, 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, onClose: onClickClose, 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,6 +1,6 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem-Qg-_2YWD.js');
+var DropdownItem = require('../../DropdownItem-CBJeJPbP.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -9,6 +9,9 @@ require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
@@ -16,9 +19,8 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Divider-ImOOytuN.js');
-require('../../Link-BnqN6ysn.js');
-require('../../Text-C49zj3jO.js');
+require('../../Divider-D8hUUrwe.js');
+require('../../Text-CEcBg-F5.js');
 
 
 

package/dist/cjs/components/Flex.js

@@ -9,6 +9,9 @@ require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
@@ -17,16 +20,16 @@ require('lodash/maxBy');
 require('../hooks/useStyles/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, style = props.style, onClick = props.onClick;
+    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.useDevicePropsGenerator(props);
-    var alignContentClass = propsGenerator.alignContentClass, alignItemsClass = propsGenerator.alignItemsClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, flowClass = propsGenerator.flowClass, justifyContentClass = propsGenerator.justifyContentClass, positionClass = propsGenerator.positionClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    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;
     // @ts-expect-error
     var _b = useStyles.useStyles(props), flexStyles = _b.styles, flexWrapperStyles = _b.wrapper;
-    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)), "data-testid": dataTestId, "data-tour": dataTour, id: id, style: Object.assign({}, flexStyles, style), onClick: onClick, children: jsxRuntime.jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
+    return (jsxRuntime.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-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, flexStyles, style), onClick: onClick, children: jsxRuntime.jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
 }
 
 function FlexItem(props) {
-    var className = props.className, children = props.children, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a;
+    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.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;
     // @ts-expect-error

package/dist/cjs/components/Grid.js

@@ -9,6 +9,9 @@ require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
@@ -17,30 +20,30 @@ require('lodash/maxBy');
 require('../hooks/useStyles/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, onDoubleClick = props.onDoubleClick;
+    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.useDevicePropsGenerator(props);
-    var alignContentClass = propsGenerator.alignContentClass, alignItemsClass = propsGenerator.alignItemsClass, borderColorClass = propsGenerator.borderColorClass, columnGapClass = propsGenerator.columnGapClass, columnsClass = propsGenerator.columnsClass, fillClass = propsGenerator.fillClass, justifyContentClass = propsGenerator.justifyContentClass, justifyItemsClass = propsGenerator.justifyItemsClass, rowGapClass = propsGenerator.rowGapClass, rowsClass = propsGenerator.rowsClass;
+    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, rowGapClass = propsGenerator.rowGapClass, rowsClass = propsGenerator.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 && "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, onDoubleClick: onDoubleClick, children: [before && jsxRuntime.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntime.jsx("div", { className: "grid__after", children: after })] }));
+    return (jsxRuntime.jsxs(Tag, { id: id, 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, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, 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, style = props.style, onClick = props.onClick;
+    var id = props.id, className = props.className, style = props.style, onClick = props.onClick, children = props.children;
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var alignSelfClass = propsGenerator.alignSelfClass, columnEndClass = propsGenerator.columnEndClass, columnGapClass = propsGenerator.columnGapClass, columnSpanClass = propsGenerator.columnSpanClass, columnStartClass = propsGenerator.columnStartClass, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, gapClass = propsGenerator.gapClass, heightClass = propsGenerator.heightClass, justifySelfClass = propsGenerator.justifySelfClass, orderClass = propsGenerator.orderClass, rowEndClass = propsGenerator.rowEndClass, rowGapClass = propsGenerator.rowGapClass, rowSpanClass = propsGenerator.rowSpanClass, rowStartClass = propsGenerator.rowStartClass, widthClass = propsGenerator.widthClass;
+    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;
     // @ts-expect-error
     var gridItemStyles = useStyles.useStyles(props).styles;
-    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-testid": dataTestId, "data-tour": dataTour, id: id, style: Object.assign({}, gridItemStyles, style), onClick: onClick, children: children }));
+    return (jsxRuntime.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-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, gridItemStyles, style), onClick: onClick, children: children }));
 }
 
 function GridRow(props) {
-    var id = props.id, dataTestId = props.dataTestId, children = props.children, className = props.className, dataTour = props.dataTour, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
+    var id = props.id, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick, children = props.children;
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var borderColorClass = propsGenerator.borderColorClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass;
     // @ts-expect-error
     var gridRowStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx(Tag, { className: clsx(className, 'grid__row', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), borderColorClass && "border-color_".concat(borderColorClass)), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, gridRowStyles, style), onClick: onClick, children: children }));
+    return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'grid__row', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), borderColorClass && "border-color_".concat(borderColorClass)), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, gridRowStyles, style), onClick: onClick, children: children }));
 }
 
 exports.Grid = Grid;

package/dist/cjs/components/Group.js

@@ -1,14 +1,17 @@
 'use strict';
 
-var Group = require('../../Group-qq4Iisll.js');
+var Group = require('../../Group-BVlu5z77.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');

package/dist/cjs/components/HTMLContent.js

@@ -9,6 +9,9 @@ require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
@@ -17,9 +20,9 @@ require('lodash/maxBy');
 require('../hooks/useStyles/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 className = props.className, content = props.content, dataTour = props.dataTour, style = props.style, onClick = props.onClick, children = props.children;
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, columnsClass = propsGenerator.columnsClass, directionClass = propsGenerator.directionClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, flexGrowClass = propsGenerator.flexGrowClass, heightClass = propsGenerator.heightClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, textColorClass = propsGenerator.textColorClass, textWeightClass = propsGenerator.textWeightClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    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;
     // @ts-expect-error
     var htmlContentStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.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 }));

package/dist/cjs/components/HeroTitle.js

@@ -1,12 +1,15 @@
 'use strict';
 
+var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+require('../context/Notifications.js');
 var UIContext = require('../context/UIContext.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-require('../../tslib.es6-CCZ3TN_7.js');
+require('uuid');
+require('@itcase/common');
 require('lodash/camelCase');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
@@ -29,12 +32,14 @@ var heroTitleConfig = {
     },
 };
 function HeroTitle(props) {
-    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, _a = props.size, size = _a === void 0 ? 'h3' : _a, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
+    var className = props.className, appearance = props.appearance, _a = props.size, size = _a === void 0 ? 'h3' : _a, text = props.text, textWrap = props.textWrap, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, dataTour = props.dataTour, mode = props.mode, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, before = props.before, after = props.after, onClick = props.onClick, children = props.children;
     var _c = UIContext.useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
-    // @ts-expect-error
-    var appearanceConfig = heroTitleConfig.appearance && heroTitleConfig.appearance[appearance];
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = heroTitleConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
+    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
     // @ts-expect-error
     var _d = useStyles.useStyles(props), heroTitleStyles = _d.styles, heroTitleWrapperStyles = _d.wrapper;
     // Element type (h1, h2, ..., h6)
@@ -53,7 +58,8 @@ function HeroTitle(props) {
         }
         return size ? size : 'span';
     }, [isMobile, isTablet, isDesktop]);
-    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'heroTitle', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "hero-title_size_".concat(size), mode && "hero-title_mode_".concat(mode), directionClass && "hero-title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "hero-title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, style: heroTitleStyles, onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "hero-title-direction_".concat(wrapperDirectionClass), 'hero-title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: heroTitleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'heroTitle', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "hero-title_size_".concat(size), mode && "hero-title_mode_".concat(mode), directionClass && "hero-title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "hero-title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, style: heroTitleStyles, onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass &&
+                    "hero-title-direction_".concat(wrapperDirectionClass), 'hero-title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: heroTitleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
 }
 
 exports.HeroTitle = HeroTitle;