@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,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/cjs/index.js CHANGED
@@ -2781,7 +2781,7 @@ if (process.env.NODE_ENV === 'production') {
2781
2781
 
2782
2782
  var React = react.exports;
2783
2783
 
2784
- var ClassNamesFn = function () {
2784
+ var CombineClassNames = function () {
2785
2785
  var args = [];
2786
2786
  for (var _i = 0; _i < arguments.length; _i++) {
2787
2787
  args[_i] = arguments[_i];
@@ -2831,7 +2831,7 @@ var Accordion = function (_a) {
2831
2831
  transform: !open ? "rotate(0.5turn)" : "none",
2832
2832
  } },
2833
2833
  React.createElement("path", { d: "M15.8346 7.5L10.0013 13.3333L4.16797 7.5", stroke: "#758393" }))),
2834
- React.createElement("div", { "data-testid": "Accordion_CONTENT", className: ClassNamesFn(styles$4.accordionContent, !open && styles$4["accordionContent--hidden"]) }, children)));
2834
+ React.createElement("div", { "data-testid": "Accordion_CONTENT", className: CombineClassNames(styles$4.accordionContent, !open && styles$4["accordionContent--hidden"]) }, children)));
2835
2835
  };
2836
2836
 
2837
2837
  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}";
@@ -2840,7 +2840,7 @@ styleInject(css_248z$3);
2840
2840
 
2841
2841
  var Button = function (_a) {
2842
2842
  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;
2843
- 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
2843
+ 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
2844
2844
  ? styles$3["btn-rounded--".concat(size)]
2845
2845
  : 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));
2846
2846
  };
@@ -2900,7 +2900,7 @@ var ClearIcon = function (_a) {
2900
2900
 
2901
2901
  var InputField = function (_a) {
2902
2902
  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;
2903
- 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 },
2903
+ 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 },
2904
2904
  labelText.length > 0 && (React.createElement("label", { htmlFor: id, "data-testid": "InputField_LABEL" }, labelText)),
2905
2905
  inputLeftIcon,
2906
2906
  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 () {
@@ -2957,7 +2957,7 @@ var RadioToggle = function (_a) {
2957
2957
  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 () {
2958
2958
  setLock(!lock);
2959
2959
  } },
2960
- React.createElement("div", { "data-testid": "RadioToggle_WRAP", className: ClassNamesFn(styles.wrap, lock && styles.wrapLock) },
2960
+ React.createElement("div", { "data-testid": "RadioToggle_WRAP", className: CombineClassNames(styles.wrap, lock && styles.wrapLock) },
2961
2961
  React.createElement("div", { "data-testid": "RadioToggle_ROUND", className: styles.round }))));
2962
2962
  };
2963
2963