@egov3/system-design 1.0.32 → 1.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ export declare const CombineClassNames: (...args: unknown[]) => string;
@@ -0,0 +1,8 @@
1
+ import React, { FC } from "react";
2
+ type FontClass = "Heading1" | "Heading3" | "Subtitles3" | "Body1Medium" | "Body1Regular" | "Body2Medium" | "Body2Regular" | "Body3Regular" | "Caption1Medium" | "Caption1Regular" | "Caption1Semibold" | "Caption2Medium" | "Caption2Regular";
3
+ export interface ITypographyProps extends React.HTMLAttributes<HTMLElement> {
4
+ tag: keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>;
5
+ fontClass?: FontClass;
6
+ }
7
+ export declare const Typography: FC<ITypographyProps>;
8
+ export {};
package/dist/esm/index.js CHANGED
@@ -2779,7 +2779,7 @@ if (process.env.NODE_ENV === 'production') {
2779
2779
 
2780
2780
  var React = react.exports;
2781
2781
 
2782
- var ClassNamesFn = function () {
2782
+ var CombineClassNames = function () {
2783
2783
  var args = [];
2784
2784
  for (var _i = 0; _i < arguments.length; _i++) {
2785
2785
  args[_i] = arguments[_i];
@@ -2829,7 +2829,7 @@ var Accordion = function (_a) {
2829
2829
  transform: !open ? "rotate(0.5turn)" : "none",
2830
2830
  } },
2831
2831
  React.createElement("path", { d: "M15.8346 7.5L10.0013 13.3333L4.16797 7.5", stroke: "#758393" }))),
2832
- React.createElement("div", { "data-testid": "Accordion_CONTENT", className: ClassNamesFn(styles$4.accordionContent, !open && styles$4["accordionContent--hidden"]) }, children)));
2832
+ React.createElement("div", { "data-testid": "Accordion_CONTENT", className: CombineClassNames(styles$4.accordionContent, !open && styles$4["accordionContent--hidden"]) }, children)));
2833
2833
  };
2834
2834
 
2835
2835
  var css_248z$3 = "/* 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.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 +2838,7 @@ styleInject(css_248z$3);
2838
2838
 
2839
2839
  var Button = function (_a) {
2840
2840
  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;
2841
- return (React.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className: ClassNamesFn(styles$3["btn--".concat(size)], isRounded
2841
+ return (React.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className: CombineClassNames(styles$3["btn--".concat(size)], isRounded
2842
2842
  ? styles$3["btn-rounded--".concat(size)]
2843
2843
  : styles$3["btn-square--".concat(size)], disabled ? styles$3["btn-".concat(variant, "--disabled")] : styles$3["btn-".concat(variant)], styles$3.button, className), style: style }, children));
2844
2844
  };
@@ -2898,7 +2898,7 @@ var ClearIcon = function (_a) {
2898
2898
 
2899
2899
  var InputField = function (_a) {
2900
2900
  var onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onEnterPress = _a.onEnterPress, _b = _a.value, value = _b === void 0 ? "" : _b, inputLeftIcon = _a.inputLeftIcon, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, style = _a.style, _e = _a.isClearable, isClearable = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "text" : _f, id = _a.id, _g = _a.labelText, labelText = _g === void 0 ? "" : _g, _h = _a.ariaLabel, ariaLabel = _h === void 0 ? "" : _h, _j = _a.focused, focused = _j === void 0 ? false : _j, _k = _a.setFocused, setFocused = _k === void 0 ? function () { } : _k;
2901
- return (React.createElement("div", { "data-testid": "InputField_MAIN", className: ClassNamesFn(styles$2[labelText.length ? "inputContainerLabeled" : "inputContainer"], className, focused ? styles$2["input--onfocus"] : undefined, styles$2["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())]), style: style },
2901
+ return (React.createElement("div", { "data-testid": "InputField_MAIN", className: CombineClassNames(styles$2[labelText.length ? "inputContainerLabeled" : "inputContainer"], className, focused ? styles$2["input--onfocus"] : undefined, styles$2["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())]), style: style },
2902
2902
  labelText.length > 0 && (React.createElement("label", { htmlFor: id, "data-testid": "InputField_LABEL" }, labelText)),
2903
2903
  inputLeftIcon,
2904
2904
  React.createElement("input", { "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles$2.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: function () {
@@ -2955,7 +2955,7 @@ var RadioToggle = function (_a) {
2955
2955
  return (React.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 () {
2956
2956
  setLock(!lock);
2957
2957
  } },
2958
- React.createElement("div", { "data-testid": "RadioToggle_WRAP", className: ClassNamesFn(styles.wrap, lock && styles.wrapLock) },
2958
+ React.createElement("div", { "data-testid": "RadioToggle_WRAP", className: CombineClassNames(styles.wrap, lock && styles.wrapLock) },
2959
2959
  React.createElement("div", { "data-testid": "RadioToggle_ROUND", className: styles.round }))));
2960
2960
  };
2961
2961