@egov3/system-design 1.0.29 → 1.0.31

package/dist/cjs/svg/ClearIcon.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const ClearIcon: ({ fill, pathFill, width, height, ...props }: React.SVGProps<SVGSVGElement> & {
+    pathFill?: string | undefined;
+}) => React.JSX.Element;

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

@@ -0,0 +1,2 @@
+import { ClearIcon } from "./ClearIcon";
+export { ClearIcon };

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

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

package/dist/esm/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/esm/components/Button/index.d.ts

@@ -1 +1,13 @@
-export { Button } from "./Button";
+import React from 'react';
+export interface IButtonProps {
+    ariaLabel?: string;
+    onClick?: () => void;
+    children: React.ReactNode;
+    className?: string;
+    isRounded?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'tinted' | 'secondary';
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    style?: React.CSSProperties;
+}
+export declare const Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: IButtonProps) => React.JSX.Element;

package/dist/esm/components/InputField/index.d.ts

@@ -0,0 +1,19 @@
+import React, { HTMLInputTypeAttribute } from "react";
+export type TOtpType = "OTP" | "TEXT";
+export interface IInputFieldProps {
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onEnterPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    isClearable?: boolean;
+    inputLeftIcon?: JSX.Element;
+    type?: HTMLInputTypeAttribute;
+    id: string;
+    labelText?: string;
+    ariaLabel: string;
+}
+export declare const InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: IInputFieldProps) => React.ReactNode;

package/dist/esm/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/esm/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/esm/components/index.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="react" />
-export declare const components: {
-    Button: (props: import("./Button/Button").ButtonProps) => import("react").JSX.Element;
+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/esm/index.d.ts

@@ -1,12 +1,73 @@
 /// <reference types="react" />
 import * as React from 'react';
+import React__default, { Dispatch, SetStateAction, HTMLInputTypeAttribute } from 'react';
 
-interface ButtonProps {
+interface IRadioToggleProps {
+    lock: boolean;
+    setLock: Dispatch<SetStateAction<boolean>>;
+}
+
+interface IAccordionProps {
+    open: boolean;
+    setOpen: Dispatch<React__default.SetStateAction<boolean>>;
+    children: React__default.ReactNode;
+    title: React__default.JSX.Element;
+}
+
+interface RadioGroupItem {
+    label: string;
+    value: string;
+}
+interface ICustomRadioButtonProps {
     label: string;
+    name: string;
+    checked: boolean;
+    onChange: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    value: string;
+}
+interface IRadioGroupProps {
+    RadioGroupItems: RadioGroupItem[];
+    invokeCustomOnChange: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+}
+
+interface IInputFieldProps {
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onEnterPress?: (event: React__default.KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    isClearable?: boolean;
+    inputLeftIcon?: JSX.Element;
+    type?: HTMLInputTypeAttribute;
+    id: string;
+    labelText?: string;
+    ariaLabel: string;
+}
+
+interface IButtonProps {
+    ariaLabel?: string;
+    onClick?: () => void;
+    children: React__default.ReactNode;
+    className?: string;
+    isRounded?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'tinted' | 'secondary';
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    style?: React__default.CSSProperties;
 }
 
-declare const components: {
-    Button: (props: ButtonProps) => React.JSX.Element;
+declare const SystemDesign: {
+    Сomponents: {
+        Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: IButtonProps) => React.JSX.Element;
+        InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: IInputFieldProps) => React.ReactNode;
+        RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, }: IRadioGroupProps) => React.JSX.Element;
+        CustomRadioButton: ({ label, name, checked, onChange, value, }: ICustomRadioButtonProps) => React.JSX.Element;
+        Accordion: ({ open, setOpen, children, title, }: IAccordionProps) => React.JSX.Element;
+        RadioToggle: ({ lock, setLock }: IRadioToggleProps) => React.JSX.Element;
+    };
 };
 
-export { components };
+export { SystemDesign as default };

package/dist/esm/index.js

@@ -2779,6 +2779,14 @@ if (process.env.NODE_ENV === 'production') {
 
 var React = react.exports;
 
+var ClassNamesFn = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args.filter(function (item) { return !!item; }).join(" ");
+};
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -2806,16 +2814,165 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "button {\n  font-size: 60px;\n}";
+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$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$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.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+  };
+  return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
+  return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var ClearIcon = function (_a) {
+    var _b = _a.fill, fill = _b === void 0 ? "none" : _b, _c = _a.pathFill, pathFill = _c === void 0 ? "#fff" : _c, _d = _a.width, width = _d === void 0 ? 20 : _d, _e = _a.height, height = _e === void 0 ? 20 : _e, props = __rest(_a, ["fill", "pathFill", "width", "height"]);
+    return (React.createElement("svg", __assign({ "data-testid": "Icons_CLEAR", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: fill, viewBox: "0 0 20 20" }, props),
+        React.createElement("path", { fill: pathFill, fillRule: "evenodd", d: "M10 18.333a8.333 8.333 0 100-16.666 8.333 8.333 0 000 16.666zM7.5 6.027L6.027 7.5l2.5 2.5-2.5 2.5L7.5 13.973l2.5-2.5 2.5 2.5 1.473-1.473-2.5-2.5 2.5-2.5L12.5 6.027l-2.5 2.5-2.5-2.5z", clipRule: "evenodd" })));
+};
+
+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$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$2.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: function () {
+                setFocused(true);
+                if (onFocus) {
+                    onFocus();
+                }
+            }, onBlur: function () {
+                setFocused(false);
+                if (onBlur) {
+                    onBlur();
+                }
+            }, onChange: onChange, onKeyDown: function (event) {
+                if (onEnterPress && event.key === "Enter") {
+                    onEnterPress(event);
+                }
+            }, value: value, readOnly: !onChange }),
+        isClearable && value && (React.createElement(ClearIcon, { fill: "red", pathFill: "#758393", className: styles$2.clearIcon, onClick: function () {
+                if (onChange) {
+                    onChange({
+                        target: { value: "" },
+                    });
+                }
+            } }))));
+};
+
+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);
 
-var Button = function (props) {
-    return React.createElement("button", null, props.label);
+// 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,
+    RadioGroup: RadioGroup,
+    CustomRadioButton: CustomRadioButton,
+    Accordion: Accordion,
+    RadioToggle: RadioToggle,
 };
 
-var components = {
-    Button: Button
+var SystemDesign = {
+    Сomponents: Сomponents
 };
 
-export { components };
+export { SystemDesign as default };
 //# sourceMappingURL=index.js.map