@egov3/system-design 1.0.44 → 1.1.43

package/dist/cjs/utils/CombineClassNames.d.ts

@@ -0,0 +1 @@
+export declare const combineClassNames: (...args: unknown[]) => string;

package/dist/esm/index.js

@@ -1,3 +1,5 @@
+import { combineClassNames } from '~utils/combineClassNames';
+
 var react$1 = {exports: {}};
 
 var react_production_min$1 = {};
@@ -2810,14 +2812,6 @@ var css_248z$b = "/* Headings/Heading 1 */\n/* Headings/Heading 3 */\n/* Subtitl
 var styles$b = {"buttonAlternativeDefaultColor":"rgba(170, 170, 170, 0.64)","buttonDisabledDefaultColor":"#c5ccd3","buttonPrimaryDefault":"#0581da","buttonPrimaryOnHoverColor":"#1a9cfa","buttonSecondaryDefaultColor":"#e6e9ec","buttonSecondaryOnHover":"#c5ccd3","buttonTintedDefaultColor":"#e1f0fb","buttonTintedOnHoverColor":"#b2d9f5","defaultPrimaryAccent":"#0581da","defaultWhiteColor":"#fff","defaultBlackColor":"#000","leaf":"#c1dc19","iconAccentColor":"#0581da","iconErrorColor":"#f35929","iconSecondaryColor":"#758393","iconSuccess":"#57bb09","iconWarningColor":"#f3a229","pageColorBackgroundGray":"#f0f2f4","pageColorBackgroundWhite":"#fff","surfaceSurface1":"#f0f2f4","surfaceSurface2":"#fff","surfaceSurface3Color":"#e3e7eb","surfaceSurfaceAlt":"rgba(240, 242, 244, 0.8)","surfaceSurfaceBlackNonconvert":"#000","surfaceSurfaceBlackOpacity":"rgba(0, 0, 0, 0.24)","surfaceSurfaceWhiteNonconvert":"#fff","surfaceSurfaceTinted":"#e1f0fb","textAccent":"#0581da","textDisabledAccentColor":"#9bcdf0","textDisabledColor":"#929daa","textPrimary":"#000","textSecondary":"#758393","textWhiteNonconvertColor":"#fff","borderStrokePrimary":"#e6e9ec","accordionBtn":"Accordion-module_accordionBtn__LQdRX","accordionContent":"Accordion-module_accordionContent__sarnp","accordionContent--hidden":"Accordion-module_accordionContent--hidden__6kNQ2"};
 styleInject(css_248z$b);
 
-var joinClasses = function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    return args.filter(function (item) { return !!item; }).join(" ");
-};
-
 var Accordion = function (_a) {
     var open = _a.open, setOpen = _a.setOpen, children = _a.children, title = _a.title;
     return (React$1.createElement(React$1.Fragment, null,
@@ -2829,7 +2823,7 @@ var Accordion = function (_a) {
                     transform: !open ? "none" : "rotate(0.5turn)",
                 } },
                 React$1.createElement("path", { d: "M15.8346 7.5L10.0013 13.3333L4.16797 7.5", stroke: "#758393" }))),
-        React$1.createElement("div", { "data-testid": "Accordion_CONTENT", className: joinClasses(styles$b.accordionContent, !open && styles$b["accordionContent--hidden"]) }, children)));
+        React$1.createElement("div", { "data-testid": "Accordion_CONTENT", className: combineClassNames(styles$b.accordionContent, !open && styles$b["accordionContent--hidden"]) }, children)));
 };
 
 var css_248z$a = "/* Headings/Heading 1 */\n/* Headings/Heading 3 */\n/* Subtitles/Subtitle 3 */\n/* Body/Body 1, Medium */\n/* Body/Body 1, Regular */\n/* Body/Body 2, Medium */\n/* Body/Body 2, Regular */\n/* Body/Body 3, Regular */\n/* Caption/Caption 1, Medium */\n/* Caption/Caption 1, Regular */\n/* Caption/Caption 1, Semibold */\n/* Caption/Caption 2, Medium */\n/* Caption/Caption 2, Regular */\n\n.button-module_button__WDVlB {\n  border: none;\n  transition: background-color 0.2s ease;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n.button-module_btn-default__upnYC {\n  color: #fff;\n  background-color: #0581da;\n}\n\n.button-module_btn-default--disabled__tlBX8 {\n  color: #929daa;\n  background-color: #c5ccd3;\n}\n\n.button-module_btn-tinted__hE7vU {\n  color: #0581da;\n  background-color: #e1f0fb;\n}\n\n.button-module_btn-tinted--disabled__KYbnK {\n  color: #9bcdf0;\n  background-color: #e1f0fb;\n}\n\n.button-module_btn-secondary__C8isQ {\n  color: #000;\n  background-color: #e3e7eb;\n}\n\n.button-module_btn-secondary--disabled__2Y-Q3 {\n  color: #758393;\n  background-color: #e3e7eb;\n}\n\n.button-module_btn-default__upnYC:hover {\n  background-color: #1a9cfa;\n}\n\n.button-module_btn-tinted__hE7vU:hover {\n  background-color: #b2d9f5;\n}\n\n.button-module_btn-secondary__C8isQ:hover {\n  background-color: #c5ccd3;\n}\n\n.button-module_btn--mini__7zJ2M {\n  gap: 4px;\n  padding: 6px 12px;\n  font-family: Inter;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 120% */\n}\n\n.button-module_btn--small__IGPOx {\n  gap: 8px;\n  padding: 8px 16px;\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n}\n\n.button-module_btn--medium__WaM0q {\n  gap: 8px;\n  padding: 8px 20px;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px; /* 142.857% */\n}\n\n.button-module_btn--large__qrwDc {\n  gap: 8px;\n  padding: 14px 24px;\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n}\n\n.button-module_btn-square--mini__Ak5mN {\n  border-radius: 4px;\n}\n\n.button-module_btn-square--small__O58ux {\n  border-radius: 6px;\n}\n\n.button-module_btn-square--medium__xNiKL {\n  border-radius: 10px;\n}\n\n.button-module_btn-square--large__9JUii {\n  border-radius: 12px;\n}\n\n.button-module_btn-rounded--mini__7ZTyL {\n  border-radius: 32px;\n}\n\n.button-module_btn-rounded--small__KJhsk {\n  border-radius: 32px;\n}\n\n.button-module_btn-rounded--medium__wT5Uc {\n  border-radius: 32px;\n}\n\n.button-module_btn-rounded--large__46yFD {\n  border-radius: 40px;\n}";
@@ -2838,7 +2832,7 @@ styleInject(css_248z$a);
 
 var Button = function (_a) {
     var onClick = _a.onClick, children = _a.children, style = _a.style, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.isRounded, isRounded = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? 'Кнопка' : _g;
-    return (React$1.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className: joinClasses(styles$a["btn--".concat(size)], isRounded
+    return (React$1.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className: combineClassNames(styles$a["btn--".concat(size)], isRounded
             ? styles$a["btn-rounded--".concat(size)]
             : styles$a["btn-square--".concat(size)], disabled ? styles$a["btn-".concat(variant, "--disabled")] : styles$a["btn-".concat(variant)], styles$a.button, className), style: style }, children));
 };
@@ -8445,7 +8439,7 @@ var Body = function (_a) {
         month: function (item) {
             return item ===
                 getMonthNameProper(convertType.month.toNumber(selectedCalenderDate[selectedPeriodInterval].month))
-                ? joinClasses(styles$9.currentText, styles$9.currentMonth)
+                ? combineClassNames(styles$9.currentText, styles$9.currentMonth)
                 : styles$9.text;
         },
         year: function (item) {
@@ -8473,11 +8467,11 @@ var Body = function (_a) {
         }
     };
     var arr = ["day", "month", "year"];
-    return (React$1.createElement("div", { "data-testid": "Calendar_COVER", className: styles$9.cover }, arr.map(function (timeUnit) { return (React$1.createElement("div", { "data-testid": "Calendar".concat(toPascalCase(timeUnit), "_WRAPPER"), className: joinClasses(styles$9.wrapper, "styles.wrapper".concat(toPascalCase(timeUnit))), key: timeUnit },
+    return (React$1.createElement("div", { "data-testid": "Calendar_COVER", className: styles$9.cover }, arr.map(function (timeUnit) { return (React$1.createElement("div", { "data-testid": "Calendar".concat(toPascalCase(timeUnit), "_WRAPPER"), className: combineClassNames(styles$9.wrapper, "styles.wrapper".concat(toPascalCase(timeUnit))), key: timeUnit },
         React$1.createElement("button", { "data-testid": "Calendar".concat(toPascalCase(timeUnit), "Button_UP"), onClick: function () { return changeDate[timeUnit](-1); }, "aria-label": "\u041A\u043D\u043E\u043F\u043A\u0430 \u0432\u0432\u0435\u0440\u0445", className: styles$9.btnUpAndDown },
             React$1.createElement(Icons.Basic.СhevronUpSmall, { fill: "#758393" })),
-        React$1.createElement("div", { "data-testid": "Calendar".concat(toPascalCase(timeUnit), "_SELECT"), className: joinClasses(styles$9.block, isEndOrStart[timeUnit] ? styles$9.end : styles$9.start) },
-            React$1.createElement("button", { "data-testid": "Calendar".concat(toPascalCase(timeUnit), "_BUTTON"), onMouseDown: function (e) { return handleMouseDown(e, timeUnit); }, onMouseUp: handleMouseUp, onWheel: function (e) { return handleWheel(e, timeUnit); }, className: styles$9.btn }, displayedDate[timeUnit].map(function (item) { return (React$1.createElement(Components.Typography, { key: item, "data-testid": "Calendar".concat(toPascalCase(timeUnit), "_ITEM"), tag: "span", fontClass: "Body1Regular", "aria-label": item, className: joinClasses(unitTimeClassname[timeUnit](item), isInvalidDateRange(convertType.dateRange.toNumber(selectedCalenderDate))
+        React$1.createElement("div", { "data-testid": "Calendar".concat(toPascalCase(timeUnit), "_SELECT"), className: combineClassNames(styles$9.block, isEndOrStart[timeUnit] ? styles$9.end : styles$9.start) },
+            React$1.createElement("button", { "data-testid": "Calendar".concat(toPascalCase(timeUnit), "_BUTTON"), onMouseDown: function (e) { return handleMouseDown(e, timeUnit); }, onMouseUp: handleMouseUp, onWheel: function (e) { return handleWheel(e, timeUnit); }, className: styles$9.btn }, displayedDate[timeUnit].map(function (item) { return (React$1.createElement(Components.Typography, { key: item, "data-testid": "Calendar".concat(toPascalCase(timeUnit), "_ITEM"), tag: "span", fontClass: "Body1Regular", "aria-label": item, className: combineClassNames(unitTimeClassname[timeUnit](item), isInvalidDateRange(convertType.dateRange.toNumber(selectedCalenderDate))
                     ? styles$9.currentError
                     : undefined) }, item)); }))),
         React$1.createElement("button", { "data-testid": "Calendar".concat(toPascalCase(timeUnit), "Button_DOWN"), onClick: function () {
@@ -8512,7 +8506,7 @@ var Footer = function (_a) {
         });
     };
     return (React$1.createElement(React$1.Fragment, null,
-        isInvalidDateRange(convertType.dateRange.toNumber(selectedCalenderDate)) && (React$1.createElement(Components.Typography, { className: joinClasses(styles$8.currentError, styles$8.textError), "data-testid": "CalendarError_DISCRIPTION", tag: "span", fontClass: "Caption1Regular", "aria-label": "\u0412\u044B \u0432\u0432\u0435\u043B\u0438 \u043D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u0443\u044E \u0434\u0430\u0442\u0443, \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u0435 \u0434\u0430\u043D\u043D\u044B\u0435" }, "\u0412\u044B \u0432\u0432\u0435\u043B\u0438 \u043D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u0443\u044E \u0434\u0430\u0442\u0443, \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u0435 \u0434\u0430\u043D\u043D\u044B\u0435")),
+        isInvalidDateRange(convertType.dateRange.toNumber(selectedCalenderDate)) && (React$1.createElement(Components.Typography, { className: combineClassNames(styles$8.currentError, styles$8.textError), "data-testid": "CalendarError_DISCRIPTION", tag: "span", fontClass: "Caption1Regular", "aria-label": "\u0412\u044B \u0432\u0432\u0435\u043B\u0438 \u043D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u0443\u044E \u0434\u0430\u0442\u0443, \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u0435 \u0434\u0430\u043D\u043D\u044B\u0435" }, "\u0412\u044B \u0432\u0432\u0435\u043B\u0438 \u043D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u0443\u044E \u0434\u0430\u0442\u0443, \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u0435 \u0434\u0430\u043D\u043D\u044B\u0435")),
         React$1.createElement(Components.Button, { disabled: isInvalidDateRange(convertType.dateRange.toNumber(selectedCalenderDate)), className: styles$8.save, size: "large", onClick: updateDate }, "\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C")));
 };
 
@@ -8543,7 +8537,7 @@ var Header = function (_a) {
             },
         },
     ];
-    return (React$1.createElement("div", { "data-testid": "CalendarTab_WRAP", className: styles$7.tab }, tabs.map(function (tab) { return (React$1.createElement("button", { key: tab.key, "data-testid": "CalendarTabButton_".concat(tab.key.toUpperCase()), className: joinClasses(selectedPeriodInterval === tab.key
+    return (React$1.createElement("div", { "data-testid": "CalendarTab_WRAP", className: styles$7.tab }, tabs.map(function (tab) { return (React$1.createElement("button", { key: tab.key, "data-testid": "CalendarTabButton_".concat(tab.key.toUpperCase()), className: combineClassNames(selectedPeriodInterval === tab.key
             ? styles$7.titleActiv
             : styles$7.title, isInvalidDateRange(convertType.dateRange.toNumber(selectedCalenderDate))
             ? styles$7.titleError
@@ -8784,7 +8778,7 @@ var InputField = react$1.exports.forwardRef(function (_a, ref) {
             onEnterPress(event);
         }
     };
-    return (React$1.createElement("div", { "data-testid": "InputField_MAIN", className: joinClasses(styles$5[labelText.length ? "inputContainerLabeled" : "inputContainer"], focused ? styles$5["input--onfocus"] : undefined, styles$5["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())], className), style: style },
+    return (React$1.createElement("div", { "data-testid": "InputField_MAIN", className: combineClassNames(styles$5[labelText.length ? "inputContainerLabeled" : "inputContainer"], focused ? styles$5["input--onfocus"] : undefined, styles$5["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())], className), style: style },
         labelText.length > 0 && (React$1.createElement("label", { htmlFor: id, "data-testid": "InputField_LABEL" }, labelText)),
         inputLeftIcon,
         React$1.createElement("input", { ref: ref, "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles$5.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: handleFocus, onBlur: handleBlur, onChange: onChange, onKeyDown: handleKeyDown, value: value, readOnly: readOnly }),
@@ -8799,7 +8793,7 @@ var Modal = function (_a) {
     var open = _a.open, setOpen = _a.setOpen, children = _a.children, headerTitle = _a.headerTitle, variant = _a.variant;
     if (open) {
         return (React$1.createElement("div", { "data-testid": "Modal_OVERLAY", className: styles$4.overlay },
-            React$1.createElement("div", { "data-testid": "Modal_WRAPPER", className: joinClasses(styles$4.contentWrap, styles$4["".concat(variant, "Variant")]) },
+            React$1.createElement("div", { "data-testid": "Modal_WRAPPER", className: combineClassNames(styles$4.contentWrap, styles$4["".concat(variant, "Variant")]) },
                 headerTitle && headerTitle.length > 0 && (React$1.createElement("div", { "data-testid": "Modal_HEADER", className: styles$4.contentHeader },
                     React$1.createElement(Components.Typography, { tag: "h3", fontClass: "Body1Medium", "data-testid": "Modal_TITLE", className: styles$4.title }, headerTitle),
                     React$1.createElement("button", { "data-testid": "ModalHeader_BTN", onClick: function () {
@@ -8842,7 +8836,7 @@ var RadioToggle = function (_a) {
     return (React$1.createElement("button", { "data-testid": "RadioToggle_BUTTON", "aria-pressed": lock, "aria-label": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F", onClick: function () {
             setLock(!lock);
         } },
-        React$1.createElement("div", { "data-testid": "RadioToggle_WRAP", className: joinClasses(styles$2.wrap, lock && styles$2.wrapLock) },
+        React$1.createElement("div", { "data-testid": "RadioToggle_WRAP", className: combineClassNames(styles$2.wrap, lock && styles$2.wrapLock) },
             React$1.createElement("div", { "data-testid": "RadioToggle_ROUND", className: styles$2.round }))));
 };
 
@@ -8865,7 +8859,7 @@ styleInject(css_248z);
 
 var Typography = function (_a) {
     var tag = _a.tag, fontClass = _a.fontClass, className = _a.className, children = _a.children, style = _a.style, restProps = __rest(_a, ["tag", "fontClass", "className", "children", "style"]);
-    return React$1.createElement(tag, __assign(__assign({}, restProps), { className: joinClasses(fontClass ? styles[fontClass] : "", className), style: style }), children);
+    return React$1.createElement(tag, __assign(__assign({}, restProps), { className: combineClassNames(fontClass ? styles[fontClass] : "", className), style: style }), children);
 };
 
 var Components = {