@egov3/system-design 1.0.33 → 1.0.34
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.
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +38 -28
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/index.d.ts +7 -0
- package/dist/esm/index.js +38 -28
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,4 +6,5 @@ export declare const Сomponents: {
|
|
|
6
6
|
CustomRadioButton: ({ label, name, checked, onChange, value, }: import("./RadioGroup").ICustomRadioButtonProps) => import("react").JSX.Element;
|
|
7
7
|
Accordion: ({ open, setOpen, children, title, }: import("./Accordion").IAccordionProps) => import("react").JSX.Element;
|
|
8
8
|
RadioToggle: ({ lock, setLock }: import("./RadioToggle").IRadioToggleProps) => import("react").JSX.Element;
|
|
9
|
+
Typography: import("react").FC<import("./Typography").ITypographyProps>;
|
|
9
10
|
};
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default, { Dispatch, SetStateAction, HTMLInputTypeAttribute } from 'react';
|
|
4
4
|
|
|
5
|
+
type FontClass = "Heading1" | "Heading3" | "Subtitles3" | "Body1Medium" | "Body1Regular" | "Body2Medium" | "Body2Regular" | "Body3Regular" | "Caption1Medium" | "Caption1Regular" | "Caption1Semibold" | "Caption2Medium" | "Caption2Regular";
|
|
6
|
+
interface ITypographyProps extends React__default.HTMLAttributes<HTMLElement> {
|
|
7
|
+
tag: keyof JSX.IntrinsicElements | React__default.JSXElementConstructor<any>;
|
|
8
|
+
fontClass?: FontClass;
|
|
9
|
+
}
|
|
10
|
+
|
|
5
11
|
interface IRadioToggleProps {
|
|
6
12
|
lock: boolean;
|
|
7
13
|
setLock: Dispatch<SetStateAction<boolean>>;
|
|
@@ -71,6 +77,7 @@ declare const SystemDesign: {
|
|
|
71
77
|
CustomRadioButton: ({ label, name, checked, onChange, value, }: ICustomRadioButtonProps) => React.JSX.Element;
|
|
72
78
|
Accordion: ({ open, setOpen, children, title, }: IAccordionProps) => React.JSX.Element;
|
|
73
79
|
RadioToggle: ({ lock, setLock }: IRadioToggleProps) => React.JSX.Element;
|
|
80
|
+
Typography: React.FC<ITypographyProps>;
|
|
74
81
|
};
|
|
75
82
|
};
|
|
76
83
|
|
package/dist/esm/index.js
CHANGED
|
@@ -2814,14 +2814,14 @@ function styleInject(css, ref) {
|
|
|
2814
2814
|
}
|
|
2815
2815
|
}
|
|
2816
2816
|
|
|
2817
|
-
var css_248z$
|
|
2818
|
-
var styles$
|
|
2819
|
-
styleInject(css_248z$
|
|
2817
|
+
var css_248z$5 = "/* 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.Accordion-module_accordionBtn__LQdRX {\n padding: 12px 16px;\n border-radius: inherit;\n width: 100%;\n text-align: left;\n display: flex;\n justify-content: space-between;\n cursor: pointer;\n}\n\n.Accordion-module_accordionContent__sarnp {\n max-height: 1000px;\n overflow: hidden;\n transition: all 0.3s ease-in-out;\n}\n\n.Accordion-module_accordionContent--hidden__6kNQ2 {\n max-height: 0;\n}";
|
|
2818
|
+
var styles$5 = {"accordionBtn":"Accordion-module_accordionBtn__LQdRX","accordionContent":"Accordion-module_accordionContent__sarnp","accordionContent--hidden":"Accordion-module_accordionContent--hidden__6kNQ2"};
|
|
2819
|
+
styleInject(css_248z$5);
|
|
2820
2820
|
|
|
2821
2821
|
var Accordion = function (_a) {
|
|
2822
2822
|
var open = _a.open, setOpen = _a.setOpen, children = _a.children, title = _a.title;
|
|
2823
2823
|
return (React.createElement(React.Fragment, null,
|
|
2824
|
-
React.createElement("button", { "data-testid": "Accordion_BUTTON", className: styles$
|
|
2824
|
+
React.createElement("button", { "data-testid": "Accordion_BUTTON", className: styles$5.accordionBtn, onClick: function () {
|
|
2825
2825
|
setOpen(!open);
|
|
2826
2826
|
} },
|
|
2827
2827
|
title,
|
|
@@ -2829,23 +2829,23 @@ 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: CombineClassNames(styles$
|
|
2832
|
+
React.createElement("div", { "data-testid": "Accordion_CONTENT", className: CombineClassNames(styles$5.accordionContent, !open && styles$5["accordionContent--hidden"]) }, children)));
|
|
2833
2833
|
};
|
|
2834
2834
|
|
|
2835
|
-
var css_248z$
|
|
2836
|
-
var styles$
|
|
2837
|
-
styleInject(css_248z$
|
|
2835
|
+
var css_248z$4 = "/* 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}";
|
|
2836
|
+
var styles$4 = {"button":"button-module_button__WDVlB","btn-default":"button-module_btn-default__upnYC","btn-default--disabled":"button-module_btn-default--disabled__tlBX8","btn-tinted":"button-module_btn-tinted__hE7vU","btn-tinted--disabled":"button-module_btn-tinted--disabled__KYbnK","btn-secondary":"button-module_btn-secondary__C8isQ","btn-secondary--disabled":"button-module_btn-secondary--disabled__2Y-Q3","btn--mini":"button-module_btn--mini__7zJ2M","btn--small":"button-module_btn--small__IGPOx","btn--medium":"button-module_btn--medium__WaM0q","btn--large":"button-module_btn--large__qrwDc","btn-square--mini":"button-module_btn-square--mini__Ak5mN","btn-square--small":"button-module_btn-square--small__O58ux","btn-square--medium":"button-module_btn-square--medium__xNiKL","btn-square--large":"button-module_btn-square--large__9JUii","btn-rounded--mini":"button-module_btn-rounded--mini__7ZTyL","btn-rounded--small":"button-module_btn-rounded--small__KJhsk","btn-rounded--medium":"button-module_btn-rounded--medium__wT5Uc","btn-rounded--large":"button-module_btn-rounded--large__46yFD"};
|
|
2837
|
+
styleInject(css_248z$4);
|
|
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: CombineClassNames(styles$
|
|
2842
|
-
? styles$
|
|
2843
|
-
: styles$
|
|
2841
|
+
return (React.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className: CombineClassNames(styles$4["btn--".concat(size)], isRounded
|
|
2842
|
+
? styles$4["btn-rounded--".concat(size)]
|
|
2843
|
+
: styles$4["btn-square--".concat(size)], disabled ? styles$4["btn-".concat(variant, "--disabled")] : styles$4["btn-".concat(variant)], styles$4.button, className), style: style }, children));
|
|
2844
2844
|
};
|
|
2845
2845
|
|
|
2846
|
-
var css_248z$
|
|
2847
|
-
var styles$
|
|
2848
|
-
styleInject(css_248z$
|
|
2846
|
+
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.InputField-module_inputContainer__J1gSu {\n display: flex;\n align-items: center;\n background-color: #f0f2f4;\n border-radius: 8px;\n padding: 12px 16px;\n}\n\n.InputField-module_inputContainerLabeled__63H-X {\n display: block;\n background-color: #f0f2f4;\n border-radius: 8px;\n padding: 12px 16px;\n}\n.InputField-module_inputContainerLabeled__63H-X label {\n color: #758393;\n}\n\n.InputField-module_input__y6Hs- {\n width: 100%;\n border: none;\n background-color: #f0f2f4;\n}\n.InputField-module_input__y6Hs-:active, .InputField-module_input__y6Hs-:focus {\n outline: none;\n}\n.InputField-module_input__y6Hs-::placeholder {\n color: #929daa;\n}\n.InputField-module_input__y6Hs-::-webkit-inner-spin-button, .InputField-module_input__y6Hs-::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.InputField-module_clearIcon__WFQKa {\n cursor: pointer;\n}\n\n.InputField-module_input--onfocus__F5PRb {\n background-color: #e3e7eb;\n}\n.InputField-module_input--onfocus__F5PRb .InputField-module_input__y6Hs- {\n background-color: #e3e7eb;\n}\n\n.InputField-module_input-text__Cg-9A {\n font-family: Inter;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; /* 150% */\n}";
|
|
2847
|
+
var styles$3 = {"inputContainer":"InputField-module_inputContainer__J1gSu","inputContainerLabeled":"InputField-module_inputContainerLabeled__63H-X","input":"InputField-module_input__y6Hs-","clearIcon":"InputField-module_clearIcon__WFQKa","input--onfocus":"InputField-module_input--onfocus__F5PRb","input-text":"InputField-module_input-text__Cg-9A"};
|
|
2848
|
+
styleInject(css_248z$3);
|
|
2849
2849
|
|
|
2850
2850
|
/******************************************************************************
|
|
2851
2851
|
Copyright (c) Microsoft Corporation.
|
|
@@ -2898,10 +2898,10 @@ 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: CombineClassNames(styles$
|
|
2901
|
+
return (React.createElement("div", { "data-testid": "InputField_MAIN", className: CombineClassNames(styles$3[labelText.length ? "inputContainerLabeled" : "inputContainer"], className, focused ? styles$3["input--onfocus"] : undefined, styles$3["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
|
-
React.createElement("input", { "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles$
|
|
2904
|
+
React.createElement("input", { "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles$3.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: function () {
|
|
2905
2905
|
setFocused(true);
|
|
2906
2906
|
if (onFocus) {
|
|
2907
2907
|
onFocus();
|
|
@@ -2916,7 +2916,7 @@ var InputField = function (_a) {
|
|
|
2916
2916
|
onEnterPress(event);
|
|
2917
2917
|
}
|
|
2918
2918
|
}, value: value, readOnly: !onChange }),
|
|
2919
|
-
isClearable && value && (React.createElement(ClearIcon, { fill: "red", pathFill: "#758393", className: styles$
|
|
2919
|
+
isClearable && value && (React.createElement(ClearIcon, { fill: "red", pathFill: "#758393", className: styles$3.clearIcon, onClick: function () {
|
|
2920
2920
|
if (onChange) {
|
|
2921
2921
|
onChange({
|
|
2922
2922
|
target: { value: "" },
|
|
@@ -2925,16 +2925,16 @@ var InputField = function (_a) {
|
|
|
2925
2925
|
} }))));
|
|
2926
2926
|
};
|
|
2927
2927
|
|
|
2928
|
-
var css_248z$
|
|
2929
|
-
var styles$
|
|
2930
|
-
styleInject(css_248z$
|
|
2928
|
+
var css_248z$2 = "/* 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.RadioGroup-module_radio__cmSnZ {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.RadioGroup-module_radio__cmSnZ input {\n display: none;\n}\n\n.RadioGroup-module_radioBtn__HSuIE {\n position: relative;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 2px solid #c5ccd3;\n margin: 10px;\n transition: background 0.3s;\n}\n\n.RadioGroup-module_radioBtn__HSuIE::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n height: 10px;\n width: 10px;\n background: #0581da;\n border-radius: 50%;\n transform: scale(0) translate(-50%, -50%);\n transition: transform 0.3s;\n}\n\ninput:checked + .RadioGroup-module_radioBtn__HSuIE::after {\n transform: scale(1) translate(-50%, -50%);\n}\n\ninput:checked + .RadioGroup-module_radioBtn__HSuIE {\n border: 2px solid #0581da;\n}\n\n.RadioGroup-module_radioBtnText__Kx9T1 {\n padding-left: 10px;\n width: fit-content;\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; /* 142.857% */\n}";
|
|
2929
|
+
var styles$2 = {"radio":"RadioGroup-module_radio__cmSnZ","radioBtn":"RadioGroup-module_radioBtn__HSuIE","radioBtnText":"RadioGroup-module_radioBtnText__Kx9T1"};
|
|
2930
|
+
styleInject(css_248z$2);
|
|
2931
2931
|
|
|
2932
2932
|
var CustomRadioButton = function (_a) {
|
|
2933
2933
|
var label = _a.label, name = _a.name, checked = _a.checked, onChange = _a.onChange, value = _a.value;
|
|
2934
|
-
return (React.createElement("label", { "data-testid": "RadioGroupItem_LABEL", className: styles$
|
|
2934
|
+
return (React.createElement("label", { "data-testid": "RadioGroupItem_LABEL", className: styles$2.radio },
|
|
2935
2935
|
React.createElement("input", { "data-testid": "RadioGroupItem_INPUT", value: value, type: "radio", name: name, checked: checked, onChange: onChange }),
|
|
2936
|
-
React.createElement("span", { "data-testid": "RadioGroupItem_RADIO", className: styles$
|
|
2937
|
-
React.createElement("span", { "data-testid": "RadioGroupItem_TEXT", className: styles$
|
|
2936
|
+
React.createElement("span", { "data-testid": "RadioGroupItem_RADIO", className: styles$2.radioBtn }),
|
|
2937
|
+
React.createElement("span", { "data-testid": "RadioGroupItem_TEXT", className: styles$2.radioBtnText }, label)));
|
|
2938
2938
|
};
|
|
2939
2939
|
var RadioGroup = function (_a) {
|
|
2940
2940
|
var RadioGroupItems = _a.RadioGroupItems, invokeCustomOnChange = _a.invokeCustomOnChange, setSelectedOption = _a.setSelectedOption, selectedOption = _a.selectedOption;
|
|
@@ -2945,9 +2945,9 @@ var RadioGroup = function (_a) {
|
|
|
2945
2945
|
return (React.createElement("fieldset", { "data-testid": "RadioGroup_FIELDSET" }, RadioGroupItems.map(function (item) { return (React.createElement(CustomRadioButton, { key: item.label, label: item.label, name: "radio", checked: selectedOption === item.value, onChange: handleChange, value: item.value })); })));
|
|
2946
2946
|
};
|
|
2947
2947
|
|
|
2948
|
-
var css_248z = "/* 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.RadioToggle-module_wrap__Z7gAu {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding: 4px;\n width: 32px;\n height: 16px;\n border-radius: 40px;\n background: #c1dc19;\n}\n\n.RadioToggle-module_wrapLock__T8rZ0 {\n justify-content: flex-start;\n background: #e3e7eb;\n}\n\n.RadioToggle-module_round__Fki8X {\n width: 16px;\n height: 16px;\n background: #fff;\n border-radius: 100px;\n}";
|
|
2949
|
-
var styles = {"wrap":"RadioToggle-module_wrap__Z7gAu","wrapLock":"RadioToggle-module_wrapLock__T8rZ0","round":"RadioToggle-module_round__Fki8X"};
|
|
2950
|
-
styleInject(css_248z);
|
|
2948
|
+
var css_248z$1 = "/* 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.RadioToggle-module_wrap__Z7gAu {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding: 4px;\n width: 32px;\n height: 16px;\n border-radius: 40px;\n background: #c1dc19;\n}\n\n.RadioToggle-module_wrapLock__T8rZ0 {\n justify-content: flex-start;\n background: #e3e7eb;\n}\n\n.RadioToggle-module_round__Fki8X {\n width: 16px;\n height: 16px;\n background: #fff;\n border-radius: 100px;\n}";
|
|
2949
|
+
var styles$1 = {"wrap":"RadioToggle-module_wrap__Z7gAu","wrapLock":"RadioToggle-module_wrapLock__T8rZ0","round":"RadioToggle-module_round__Fki8X"};
|
|
2950
|
+
styleInject(css_248z$1);
|
|
2951
2951
|
|
|
2952
2952
|
// import { Dispatch, SetStateAction } from "react";
|
|
2953
2953
|
var RadioToggle = function (_a) {
|
|
@@ -2955,8 +2955,17 @@ 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: CombineClassNames(styles.wrap, lock && styles.wrapLock) },
|
|
2959
|
-
React.createElement("div", { "data-testid": "RadioToggle_ROUND", className: styles.round }))));
|
|
2958
|
+
React.createElement("div", { "data-testid": "RadioToggle_WRAP", className: CombineClassNames(styles$1.wrap, lock && styles$1.wrapLock) },
|
|
2959
|
+
React.createElement("div", { "data-testid": "RadioToggle_ROUND", className: styles$1.round }))));
|
|
2960
|
+
};
|
|
2961
|
+
|
|
2962
|
+
var css_248z = "/* Headings/Heading 1 */\n.Typography-module_Heading1__2wNRy {\n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 36px; /* 112.5% */\n letter-spacing: -0.32px;\n}\n\n/* Headings/Heading 3 */\n.Typography-module_Heading3__CXAmm {\n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: 28px; /* 116.667% */\n letter-spacing: -0.24px;\n}\n\n/* Subtitles/Subtitle 3 */\n.Typography-module_Subtitles3__A7g2W {\n font-family: Inter;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px; /* 150% */\n}\n\n/* Body/Body 1, Medium */\n.Typography-module_Body1Medium__JCYLE {\n font-family: Inter;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: 24px; /* 150% */\n}\n\n/* Body/Body 1, Regular */\n.Typography-module_Body1Regular__2Dghs {\n font-family: Inter;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; /* 150% */\n}\n\n/* Body/Body 2, Medium */\n.Typography-module_Body2Medium__LLN4R {\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/* Body/Body 2, Regular */\n.Typography-module_Body2Regular__PSYgf {\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; /* 142.857% */\n}\n\n/* Body/Body 3, Regular */\n.Typography-module_Body3Regular__BNY4t {\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; /* 114.286% */\n}\n\n/* Caption/Caption 1, Medium */\n.Typography-module_Caption1Medium__j0dF3 {\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/* Caption/Caption 1, Regular */\n.Typography-module_Caption1Regular__Y-oZk {\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 1, Semibold */\n.Typography-module_Caption1Semibold__Z1wV2 {\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: 16px; /* 133.333% */\n}\n\n/* Caption/Caption 2, Medium */\n.Typography-module_Caption2Medium__fCR-L {\n font-family: Inter;\n font-size: 10px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 120% */\n}\n\n/* Caption/Caption 2, Regular */\n.Typography-module_Caption2Regular__D7ct- {\n font-family: Inter;\n font-size: 10px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px; /* 120% */\n}";
|
|
2963
|
+
var styles = {"Heading1":"Typography-module_Heading1__2wNRy","Heading3":"Typography-module_Heading3__CXAmm","Subtitles3":"Typography-module_Subtitles3__A7g2W","Body1Medium":"Typography-module_Body1Medium__JCYLE","Body1Regular":"Typography-module_Body1Regular__2Dghs","Body2Medium":"Typography-module_Body2Medium__LLN4R","Body2Regular":"Typography-module_Body2Regular__PSYgf","Body3Regular":"Typography-module_Body3Regular__BNY4t","Caption1Medium":"Typography-module_Caption1Medium__j0dF3","Caption1Regular":"Typography-module_Caption1Regular__Y-oZk","Caption1Semibold":"Typography-module_Caption1Semibold__Z1wV2","Caption2Medium":"Typography-module_Caption2Medium__fCR-L","Caption2Regular":"Typography-module_Caption2Regular__D7ct-"};
|
|
2964
|
+
styleInject(css_248z);
|
|
2965
|
+
|
|
2966
|
+
var Typography = function (_a) {
|
|
2967
|
+
var tag = _a.tag, fontClass = _a.fontClass, className = _a.className, children = _a.children, restProps = __rest(_a, ["tag", "fontClass", "className", "children"]);
|
|
2968
|
+
return React.createElement(tag, __assign(__assign({}, restProps), { className: CombineClassNames(className, fontClass ? styles[fontClass] : '') }), children);
|
|
2960
2969
|
};
|
|
2961
2970
|
|
|
2962
2971
|
var Сomponents = {
|
|
@@ -2966,6 +2975,7 @@ var Сomponents = {
|
|
|
2966
2975
|
CustomRadioButton: CustomRadioButton,
|
|
2967
2976
|
Accordion: Accordion,
|
|
2968
2977
|
RadioToggle: RadioToggle,
|
|
2978
|
+
Typography: Typography
|
|
2969
2979
|
};
|
|
2970
2980
|
|
|
2971
2981
|
var SystemDesign = {
|