@egov3/system-design 1.0.30 → 1.0.31

package/dist/cjs/components/Accordion/index.d.ts

@@ -0,0 +1,8 @@
+import React, { Dispatch } from "react";
+export interface IAccordionProps {
+    open: boolean;
+    setOpen: Dispatch<React.SetStateAction<boolean>>;
+    children: React.ReactNode;
+    title: React.JSX.Element;
+}
+export declare const Accordion: ({ open, setOpen, children, title, }: IAccordionProps) => React.JSX.Element;

package/dist/cjs/components/RadioGroup/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface RadioGroupItem {
+    label: string;
+    value: string;
+}
+export interface ICustomRadioButtonProps {
+    label: string;
+    name: string;
+    checked: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value: string;
+}
+export interface IRadioGroupProps {
+    RadioGroupItems: RadioGroupItem[];
+    invokeCustomOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const CustomRadioButton: ({ label, name, checked, onChange, value, }: ICustomRadioButtonProps) => React.JSX.Element;
+export declare const RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, }: IRadioGroupProps) => React.JSX.Element;

package/dist/cjs/components/RadioToggle/index.d.ts

@@ -0,0 +1,6 @@
+import React, { Dispatch, SetStateAction } from "react";
+export interface IRadioToggleProps {
+    lock: boolean;
+    setLock: Dispatch<SetStateAction<boolean>>;
+}
+export declare const RadioToggle: ({ lock, setLock }: IRadioToggleProps) => React.JSX.Element;

package/dist/cjs/components/index.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-export declare const components: {
+export declare const Сomponents: {
     Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: import("./Button").IButtonProps) => import("react").JSX.Element;
     InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: import("./InputField").IInputFieldProps) => import("react").ReactNode;
+    RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, }: import("./RadioGroup").IRadioGroupProps) => import("react").JSX.Element;
+    CustomRadioButton: ({ label, name, checked, onChange, value, }: import("./RadioGroup").ICustomRadioButtonProps) => import("react").JSX.Element;
+    Accordion: ({ open, setOpen, children, title, }: import("./Accordion").IAccordionProps) => import("react").JSX.Element;
+    RadioToggle: ({ lock, setLock }: import("./RadioToggle").IRadioToggleProps) => import("react").JSX.Element;
 };

package/dist/cjs/index.d.ts

@@ -1 +1,12 @@
-export { components } from './components';
+/// <reference types="react" />
+declare const SystemDesign: {
+    Сomponents: {
+        Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: import("./components/Button").IButtonProps) => import("react").JSX.Element;
+        InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: import("./components/InputField").IInputFieldProps) => import("react").ReactNode;
+        RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, }: import("./components/RadioGroup").IRadioGroupProps) => import("react").JSX.Element;
+        CustomRadioButton: ({ label, name, checked, onChange, value, }: import("./components/RadioGroup").ICustomRadioButtonProps) => import("react").JSX.Element;
+        Accordion: ({ open, setOpen, children, title, }: import("./components/Accordion").IAccordionProps) => import("react").JSX.Element;
+        RadioToggle: ({ lock, setLock }: import("./components/RadioToggle").IRadioToggleProps) => import("react").JSX.Element;
+    };
+};
+export default SystemDesign;

package/dist/cjs/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var react = {exports: {}};
 
 var react_production_min = {};
@@ -2818,20 +2816,38 @@ function styleInject(css, ref) {
   }
 }
 
-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.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}";
-var styles$1 = {"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"};
-styleInject(css_248z$1);
+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.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}";
+var styles$4 = {"accordionBtn":"Accordion-module_accordionBtn__LQdRX","accordionContent":"Accordion-module_accordionContent__sarnp","accordionContent--hidden":"Accordion-module_accordionContent--hidden__6kNQ2"};
+styleInject(css_248z$4);
+
+var Accordion = function (_a) {
+    var open = _a.open, setOpen = _a.setOpen, children = _a.children, title = _a.title;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { "data-testid": "Accordion_BUTTON", className: styles$4.accordionBtn, onClick: function () {
+                setOpen(!open);
+            } },
+            title,
+            React.createElement("svg", { "data-testid": "Accordion_DIRECTION", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
+                    transform: !open ? "rotate(0.5turn)" : "none",
+                } },
+                React.createElement("path", { d: "M15.8346 7.5L10.0013 13.3333L4.16797 7.5", stroke: "#758393" }))),
+        React.createElement("div", { "data-testid": "Accordion_CONTENT", className: ClassNamesFn(styles$4.accordionContent, !open && styles$4["accordionContent--hidden"]) }, children)));
+};
+
+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}";
+var styles$3 = {"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"};
+styleInject(css_248z$3);
 
 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.createElement("button", { "data-testid": "Button_MAIN", "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled, onClick: onClick, className: ClassNamesFn(styles$1["btn--".concat(size)], isRounded
-            ? styles$1["btn-rounded--".concat(size)]
-            : styles$1["btn-square--".concat(size)], disabled ? styles$1["btn-".concat(variant, "--disabled")] : styles$1["btn-".concat(variant)], styles$1.button, className), style: style }, children));
+    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
+            ? styles$3["btn-rounded--".concat(size)]
+            : 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));
 };
 
-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.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}";
-var styles = {"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"};
-styleInject(css_248z);
+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.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}";
+var styles$2 = {"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"};
+styleInject(css_248z$2);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2885,10 +2901,10 @@ var ClearIcon = function (_a) {
 var InputField = function (_a) {
     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;
     var _j = react.exports.useState(false), focused = _j[0], setFocused = _j[1];
-    return (React.createElement("div", { "data-testid": "InputField_MAIN", className: ClassNamesFn(styles[labelText.length ? "inputContainerLabeled" : "inputContainer"], className, focused ? styles["input--onfocus"] : undefined, styles["input-".concat(type === null || type === void 0 ? void 0 : type.toLocaleLowerCase())]), style: style },
+    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 },
         labelText.length > 0 && (React.createElement("label", { htmlFor: id, "data-testid": "InputField_LABEL" }, labelText)),
         inputLeftIcon,
-        React.createElement("input", { "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: styles.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: function () {
+        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 () {
                 setFocused(true);
                 if (onFocus) {
                     onFocus();
@@ -2903,7 +2919,7 @@ var InputField = function (_a) {
                     onEnterPress(event);
                 }
             }, value: value, readOnly: !onChange }),
-        isClearable && value && (React.createElement(ClearIcon, { fill: "red", pathFill: "#758393", className: styles.clearIcon, onClick: function () {
+        isClearable && value && (React.createElement(ClearIcon, { fill: "red", pathFill: "#758393", className: styles$2.clearIcon, onClick: function () {
                 if (onChange) {
                     onChange({
                         target: { value: "" },
@@ -2912,10 +2928,53 @@ var InputField = function (_a) {
             } }))));
 };
 
-var components = {
+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.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}";
+var styles$1 = {"radio":"RadioGroup-module_radio__cmSnZ","radioBtn":"RadioGroup-module_radioBtn__HSuIE","radioBtnText":"RadioGroup-module_radioBtnText__Kx9T1"};
+styleInject(css_248z$1);
+
+var CustomRadioButton = function (_a) {
+    var label = _a.label, name = _a.name, checked = _a.checked, onChange = _a.onChange, value = _a.value;
+    return (React.createElement("label", { "data-testid": "RadioGroupItem_LABEL", className: styles$1.radio },
+        React.createElement("input", { "data-testid": "RadioGroupItem_INPUT", value: value, type: "radio", name: name, checked: checked, onChange: onChange }),
+        React.createElement("span", { "data-testid": "RadioGroupItem_RADIO", className: styles$1.radioBtn }),
+        React.createElement("span", { "data-testid": "RadioGroupItem_TEXT", className: styles$1.radioBtnText }, label)));
+};
+var RadioGroup = function (_a) {
+    var RadioGroupItems = _a.RadioGroupItems, invokeCustomOnChange = _a.invokeCustomOnChange;
+    var _b = react.exports.useState(""), selectedOption = _b[0], setSelectedOption = _b[1];
+    var handleChange = function (event) {
+        setSelectedOption(event.target.value);
+        invokeCustomOnChange(event);
+    };
+    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 })); })));
+};
+
+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}";
+var styles = {"wrap":"RadioToggle-module_wrap__Z7gAu","wrapLock":"RadioToggle-module_wrapLock__T8rZ0","round":"RadioToggle-module_round__Fki8X"};
+styleInject(css_248z);
+
+// import { Dispatch, SetStateAction } from "react";
+var RadioToggle = function (_a) {
+    var lock = _a.lock, setLock = _a.setLock;
+    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 () {
+            setLock(!lock);
+        } },
+        React.createElement("div", { "data-testid": "RadioToggle_WRAP", className: ClassNamesFn(styles.wrap, lock && styles.wrapLock) },
+            React.createElement("div", { "data-testid": "RadioToggle_ROUND", className: styles.round }))));
+};
+
+var Сomponents = {
     Button: Button,
-    InputField: InputField
+    InputField: InputField,
+    RadioGroup: RadioGroup,
+    CustomRadioButton: CustomRadioButton,
+    Accordion: Accordion,
+    RadioToggle: RadioToggle,
+};
+
+var SystemDesign = {
+    Сomponents: Сomponents
 };
 
-exports.components = components;
+module.exports = SystemDesign;
 //# sourceMappingURL=index.js.map