mimir-ui-kit 1.17.3 → 1.19.0

package/dist/components/NotificationBadge/NotificationBadge.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { ENotificationBadgeSize } from "./constants.js";
+import '../../assets/NotificationBadge.css';const m = "_m_1rrs6_18";
+const s = "_s_1rrs6_24";
+const cls = {
+  "notification-badge": "_notification-badge_1rrs6_2",
+  "notification-badge-absolute": "_notification-badge-absolute_1rrs6_14",
+  m,
+  s
+};
+const NotificationBadge = ({
+  count,
+  position,
+  absolute,
+  size = ENotificationBadgeSize.M
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: classNames(
+      cls["notification-badge"],
+      {
+        [cls["notification-badge-absolute"]]: absolute
+      },
+      cls[size]
+    ),
+    style: {
+      top: position == null ? void 0 : position.top,
+      right: position == null ? void 0 : position.right,
+      bottom: position == null ? void 0 : position.bottom,
+      left: position == null ? void 0 : position.left
+    },
+    children: count
+  }
+);
+export {
+  NotificationBadge
+};

package/dist/components/NotificationBadge/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum ENotificationBadgeSize {
+    S = "s",
+    M = "m"
+}

package/dist/components/NotificationBadge/constants.js

@@ -0,0 +1,8 @@
+var ENotificationBadgeSize = /* @__PURE__ */ ((ENotificationBadgeSize2) => {
+  ENotificationBadgeSize2["S"] = "s";
+  ENotificationBadgeSize2["M"] = "m";
+  return ENotificationBadgeSize2;
+})(ENotificationBadgeSize || {});
+export {
+  ENotificationBadgeSize
+};

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

@@ -0,0 +1,3 @@
+export { NotificationBadge } from './NotificationBadge';
+export type { TNotificationBadgeProps } from './types';
+export { ENotificationBadgeSize } from './constants';

package/dist/components/NotificationBadge/index.js

@@ -0,0 +1,6 @@
+import { NotificationBadge } from "./NotificationBadge.js";
+import { ENotificationBadgeSize } from "./constants.js";
+export {
+  ENotificationBadgeSize,
+  NotificationBadge
+};

package/dist/components/NotificationBadge/types.d.ts

@@ -0,0 +1,25 @@
+import { ENotificationBadgeSize } from './constants';
+
+export type TNotificationBadgeProps = {
+    /**
+     * Значение количества уведомлений.
+     */
+    count: number;
+    /**
+     * Позиция для абсолютного позиционирования.
+     */
+    position?: {
+        top?: string;
+        right?: string;
+        bottom?: string;
+        left?: string;
+    };
+    /**
+     * Абсолютное позиционирование.
+     */
+    absolute?: boolean;
+    /**
+     * Размер NotificationBadge.
+     */
+    size?: `${ENotificationBadgeSize}` | ENotificationBadgeSize;
+};

package/dist/components/NotificationBadge/types.js

@@ -0,0 +1 @@
+

package/dist/components/OtpInput/OtpInput.js

@@ -3,7 +3,7 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
 import { forwardRef, useImperativeHandle, Fragment } from "react";
 import { ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
 import { useOTPInput } from "./hooks.js";
-import { I as Input } from "../../Input-D-FCB1FU.js";
+import { I as Input } from "../../Input-BFFPzelg.js";
 import '../../assets/OtpInput.css';const otp = "_otp_196ev_3";
 const input = "_input_196ev_14";
 const separator = "_separator_196ev_28";

package/dist/components/SelectSearch/SelectSearch.js

@@ -4,8 +4,8 @@ import * as React from "react";
 import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useLayoutEffect, createContext, useContext, useState, Fragment, createRef, forwardRef } from "react";
 import { ESelectSearchSize } from "./constants.js";
 import { Icon } from "../../icons/Icon.js";
-import { I as Input } from "../../Input-D-FCB1FU.js";
-import { EInputSize } from "../Input/constants.js";
+import { I as Input } from "../../Input-BFFPzelg.js";
+import { EInputVariant, EInputSize } from "../Input/constants.js";
 import { n as n$2, u as u$3, d as o$1, s as s$3, o as o$2, p as p$1, t as t$3, e as s$4, W as W$1, y as y$3, T, H, M as M$1, a as u$5, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D as D$2, c as o$3 } from "../../keyboard-B256ZoM-.js";
 import * as ReactDOM from "react-dom";
 import { flushSync, createPortal } from "react-dom";
@@ -1991,13 +1991,13 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       const iframeRect = currentIFrame.getBoundingClientRect();
       const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      const top2 = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x2 *= iframeScale.x;
       y2 *= iframeScale.y;
       width *= iframeScale.x;
       height *= iframeScale.y;
       x2 += left;
-      y2 += top;
+      y2 += top2;
       currentWin = getWindow(currentIFrame);
       currentIFrame = currentWin.frameElement;
     }
@@ -2097,13 +2097,13 @@ function getViewportRect(element, strategy) {
 }
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
-  const top = clientRect.top + element.clientTop;
+  const top2 = clientRect.top + element.clientTop;
   const left = clientRect.left + element.clientLeft;
   const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
   const x2 = left * scale.x;
-  const y2 = top * scale.y;
+  const y2 = top2 * scale.y;
   return {
     width,
     height,
@@ -2313,7 +2313,7 @@ function observeMove(element, onMove) {
     cleanup();
     const {
       left,
-      top,
+      top: top2,
       width,
       height
     } = element.getBoundingClientRect();
@@ -2323,9 +2323,9 @@ function observeMove(element, onMove) {
     if (!width || !height) {
       return;
     }
-    const insetTop = floor(top);
+    const insetTop = floor(top2);
     const insetRight = floor(root.clientWidth - (left + width));
-    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetBottom = floor(root.clientHeight - (top2 + height));
     const insetLeft = floor(left);
     const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
     const options2 = {
@@ -3752,29 +3752,35 @@ function No(o2, r2) {
   return H({ ourProps: { id: d2, ref: M2, role: "option", tabIndex: s2 === true ? void 0 : -1, "aria-disabled": s2 === true ? true : void 0, "aria-selected": C, disabled: void 0, onMouseDown: y2, onFocus: A2, onPointerEnter: h2, onMouseEnter: h2, onPointerMove: O, onMouseMove: O, onPointerLeave: G2, onMouseLeave: G2 }, theirProps: a3, slot: J2, defaultTag: ko, name: "Combobox.Option" });
 }
 let Uo = W$1(ho), Ho = W$1(Vo), Go = W$1(Mo), jo = K, zo = W$1(Bo), Ko = W$1(No), Nt = Object.assign(Uo, { Input: Go, Button: Ho, Label: jo, Options: zo, Option: Ko });
-const container = "_container_q299h_6";
-const full = "_full_q299h_19";
-const button = "_button_q299h_27";
-const options = "_options_q299h_39";
-const m = "_m_q299h_73";
-const l = "_l_q299h_84";
-const option = "_option_q299h_39";
+const disabled = "_disabled_3ezsa_5";
+const container = "_container_3ezsa_9";
+const full = "_full_3ezsa_22";
+const button = "_button_3ezsa_30";
+const options = "_options_3ezsa_42";
+const top = "_top_3ezsa_52";
+const bottom = "_bottom_3ezsa_57";
+const m = "_m_3ezsa_84";
+const l = "_l_3ezsa_95";
+const option = "_option_3ezsa_42";
 const cls = {
-  "select-search": "_select-search_q299h_2",
+  "select-search": "_select-search_3ezsa_2",
+  disabled,
   container,
-  "container-open": "_container-open_q299h_15",
+  "container-open": "_container-open_3ezsa_18",
   full,
-  "selector-icon-open": "_selector-icon-open_q299h_23",
+  "selector-icon-open": "_selector-icon-open_3ezsa_26",
   button,
   options,
-  "no-options": "_no-options_q299h_67",
+  top,
+  bottom,
+  "no-options": "_no-options_3ezsa_78",
   m,
   l,
-  "custom-input-class": "_custom-input-class_q299h_95",
+  "custom-input-class": "_custom-input-class_3ezsa_106",
   option,
-  "option-active": "_option-active_q299h_111",
-  "option-inner": "_option-inner_q299h_114",
-  "selected-icon": "_selected-icon_q299h_121"
+  "option-active": "_option-active_3ezsa_122",
+  "option-inner": "_option-inner_3ezsa_125",
+  "selected-icon": "_selected-icon_3ezsa_132"
 };
 const SelectSearch = forwardRef(
   (props, ref) => {
@@ -3789,7 +3795,10 @@ const SelectSearch = forwardRef(
       classNameOption,
       displayValue = "name",
       filterOnSearch = true,
-      onSearch
+      onSearch,
+      variant = EInputVariant.DefaultGray,
+      menuPlacement = "bottom",
+      disabled: disabled2 = false
     } = props;
     const [inputValue, setInputValue] = useState("");
     const mapSizeToInputSize = (size22) => {
@@ -3828,9 +3837,13 @@ const SelectSearch = forwardRef(
       {
         as: "div",
         value,
-        className: classNames(cls["select-search"], { [cls.full]: full2 }),
+        className: classNames(cls["select-search"], {
+          [cls.full]: full2,
+          [cls.disabled]: disabled2
+        }),
         onChange: handleOneChange,
         ref,
+        disabled: disabled2,
         virtual: { options: filteredItems },
         children: ({ open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsxs(
@@ -3848,10 +3861,12 @@ const SelectSearch = forwardRef(
                     size: mapSizeToInputSize(size2),
                     className: cls["custom-input-class"],
                     onChange: handleInputChange,
-                    value: inputValue
+                    value: inputValue,
+                    disabled: disabled2,
+                    variant
                   }
                 ),
-                showArrow && /* @__PURE__ */ jsx(Ho, { className: cls.button, children: /* @__PURE__ */ jsx(
+                showArrow && /* @__PURE__ */ jsx(Ho, { className: cls.button, disabled: disabled2, children: /* @__PURE__ */ jsx(
                   Icon,
                   {
                     iconName: size2 == ESelectSearchSize.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
@@ -3886,7 +3901,11 @@ const SelectSearch = forwardRef(
           ) : /* @__PURE__ */ jsx(
             zo,
             {
-              className: classNames(cls.options, cls[size2]),
+              className: classNames(
+                cls.options,
+                cls[size2],
+                cls[menuPlacement]
+              ),
               children: ({ option: item }) => /* @__PURE__ */ jsx(
                 Ko,
                 {

package/dist/components/SelectSearch/types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ESelectSearchSize } from './constants';
+import { TVariant } from '../Input';
 
 export type TSelectOption = {
     name: string;
@@ -7,6 +8,7 @@ export type TSelectOption = {
     bottom?: ReactNode;
     [index: string]: unknown;
 };
+export type TMenuPlacement = 'top' | 'bottom';
 export type TSelectSearchProps = {
     /**
      * Текущее выбранное значение.
@@ -42,4 +44,10 @@ export type TSelectSearchProps = {
     items: TSelectOption[];
     /** Класснейм для значения */
     classNameOption?: string;
+    /** Варианты отображения ввода */
+    variant?: TVariant;
+    /** Варианты отображения выпадающего меню */
+    menuPlacement?: TMenuPlacement;
+    /** Отключает компонент SelectSearch */
+    disabled?: boolean;
 };

package/dist/components/Steps/Steps.d.ts

@@ -1,5 +1,5 @@
-import { EStepsPrimaryColor, EStepsSecondaryColor } from './constants';
 import { TCommonStepsProps } from './types';
+import { TStepsZone } from './types.ts';
 
 export type TProps = TCommonStepsProps & {
     /**
@@ -31,13 +31,13 @@ export type TProps = TCommonStepsProps & {
      */
     disabled?: boolean;
     /**
-     * Цвет пройденных шагов
+     * Цвет оставшихся шагов
      */
-    primaryColor?: EStepsPrimaryColor;
+    zones?: TStepsZone[];
     /**
-     * Цвет оставшихся шагов
+     * Цвет шага, если он не выбран
      */
-    secondaryColor?: EStepsSecondaryColor;
+    unselectedColor?: string;
 };
 export declare const Steps: import('react').ForwardRefExoticComponent<TCommonStepsProps & {
     /**
@@ -69,11 +69,11 @@ export declare const Steps: import('react').ForwardRefExoticComponent<TCommonSte
      */
     disabled?: boolean;
     /**
-     * Цвет пройденных шагов
+     * Цвет оставшихся шагов
      */
-    primaryColor?: EStepsPrimaryColor;
+    zones?: TStepsZone[];
     /**
-     * Цвет оставшихся шагов
+     * Цвет шага, если он не выбран
      */
-    secondaryColor?: EStepsSecondaryColor;
+    unselectedColor?: string;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Steps/Steps.js

@@ -1,33 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import { forwardRef, useId, useState, useRef, useEffect } from "react";
-import { ZERO_STEP, EStepsSize, EStepsPrimaryColor, ID_SEPARATOR, EStepsColorType, StepSize, DIFF_BETWEEN_STEP_AND_INDEX } from "./constants.js";
+import { ZERO_STEP, EStepsSize, ID_SEPARATOR, StepSize, DIFF_BETWEEN_STEP_AND_INDEX } from "./constants.js";
 import { Icon } from "../../icons/Icon.js";
-import '../../assets/Steps.css';const container = "_container_j31xr_2";
-const step = "_step_j31xr_6";
-const editable = "_editable_j31xr_9";
-const PRIMARY = "_PRIMARY_j31xr_12";
-const GRAY = "_GRAY_j31xr_12";
-const CITRINE = "_CITRINE_j31xr_15";
-const SAPPHIRE = "_SAPPHIRE_j31xr_18";
-const SECONDARY = "_SECONDARY_j31xr_21";
-const WHITE = "_WHITE_j31xr_21";
-const LIGHT_SAPPHIRE = "_LIGHT_SAPPHIRE_j31xr_24";
-const LIGHT_GRAY = "_LIGHT_GRAY_j31xr_27";
-const disabled = "_disabled_j31xr_27";
+import '../../assets/Steps.css';const container = "_container_1qg9i_2";
+const step = "_step_1qg9i_6";
+const editable = "_editable_1qg9i_9";
 const cls = {
   container,
   step,
-  editable,
-  PRIMARY,
-  GRAY,
-  CITRINE,
-  SAPPHIRE,
-  SECONDARY,
-  WHITE,
-  LIGHT_SAPPHIRE,
-  LIGHT_GRAY,
-  disabled
+  editable
 };
 const Steps = forwardRef(
   (props, ref) => {
@@ -39,9 +21,9 @@ const Steps = forwardRef(
       editable: editable2 = false,
       size = EStepsSize.M,
       onClick,
-      disabled: disabled2 = false,
-      primaryColor = EStepsPrimaryColor.CITRINE,
-      secondaryColor = EStepsPrimaryColor.GRAY
+      disabled = false,
+      zones = [{ color: "#ff0000", to: quantity }],
+      unselectedColor = "#ffffff"
     } = props;
     const idPrefix = useId();
     const [step2, setStep] = useState(current);
@@ -69,23 +51,24 @@ const Steps = forwardRef(
       setHoveredStep(null);
     };
     const buttons = Array.from({ length: quantity }, (_, idx) => {
-      const isPrimary = idx + DIFF_BETWEEN_STEP_AND_INDEX <= (hoveredStep !== null ? hoveredStep + DIFF_BETWEEN_STEP_AND_INDEX : step2);
-      const isSecondary = idx + DIFF_BETWEEN_STEP_AND_INDEX > (hoveredStep !== null ? hoveredStep + DIFF_BETWEEN_STEP_AND_INDEX : step2);
+      var _a, _b;
+      let currentZone = 0;
+      while (currentZone < zones.length && zones[currentZone].to <= idx) {
+        currentZone++;
+      }
+      const color = hoveredStep !== null && idx <= hoveredStep ? (_a = zones[currentZone]) == null ? void 0 : _a.color : step2 > idx && hoveredStep === null ? (_b = zones[currentZone]) == null ? void 0 : _b.color : unselectedColor;
       return /* @__PURE__ */ jsx(
         "button",
         {
           id: `${idPrefix}${ID_SEPARATOR}${idx}`,
           className: classNames(cls.step, cls[size], stepClassName, {
-            [cls.editable]: editable2 && !disabled2,
-            [cls.disabled]: disabled2 || !editable2 && idx + 1 > step2,
-            [cls[EStepsColorType.PRIMARY]]: isPrimary,
-            [cls[EStepsColorType.SECONDARY]]: isSecondary,
-            [cls[primaryColor]]: isPrimary,
-            [cls[secondaryColor]]: isSecondary
+            [cls.editable]: editable2 && !disabled,
+            [cls.disabled]: disabled || !editable2 && idx + 1 > step2
           }),
           onClick: () => handleClick(idx),
           onMouseEnter: handleMouseEnter,
           onMouseLeave: handleMouseLeave,
+          style: { color },
           children: /* @__PURE__ */ jsx(Icon, { iconName: "Step", ...StepSize[size] })
         },
         idx
@@ -94,6 +77,7 @@ const Steps = forwardRef(
     return /* @__PURE__ */ jsx("div", { className: classNames(cls.container, rootClassName), ref, children: buttons });
   }
 );
+Steps.displayName = "Steps";
 export {
   Steps
 };

package/dist/components/Steps/constants.d.ts

@@ -25,17 +25,10 @@ export declare const StepSize: {
         height: number;
     };
 };
-export declare enum EStepsColorType {
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY"
-}
-export declare enum EStepsPrimaryColor {
-    GRAY = "GRAY",
-    CITRINE = "CITRINE",
-    SAPPHIRE = "SAPPHIRE"
-}
-export declare enum EStepsSecondaryColor {
-    LIGHT_GRAY = "LIGHT_GRAY",
-    LIGHT_SAPPHIRE = "LIGHT_SAPPHIRE",
-    WHITE = "WHITE"
+export declare enum EStepColor {
+    ASPHALT = "#333333",
+    CITRINE = "#ff7900",
+    SAPPHIRE = "#2355d7",
+    GREEN = "#1b770c",
+    DISABLED = "#b2b2b2"
 }

package/dist/components/Steps/constants.js

@@ -26,28 +26,17 @@ const StepSize = {
     height: 28
   }
 };
-var EStepsColorType = /* @__PURE__ */ ((EStepsColorType2) => {
-  EStepsColorType2["PRIMARY"] = "PRIMARY";
-  EStepsColorType2["SECONDARY"] = "SECONDARY";
-  return EStepsColorType2;
-})(EStepsColorType || {});
-var EStepsPrimaryColor = /* @__PURE__ */ ((EStepsPrimaryColor2) => {
-  EStepsPrimaryColor2["GRAY"] = "GRAY";
-  EStepsPrimaryColor2["CITRINE"] = "CITRINE";
-  EStepsPrimaryColor2["SAPPHIRE"] = "SAPPHIRE";
-  return EStepsPrimaryColor2;
-})(EStepsPrimaryColor || {});
-var EStepsSecondaryColor = /* @__PURE__ */ ((EStepsSecondaryColor2) => {
-  EStepsSecondaryColor2["LIGHT_GRAY"] = "LIGHT_GRAY";
-  EStepsSecondaryColor2["LIGHT_SAPPHIRE"] = "LIGHT_SAPPHIRE";
-  EStepsSecondaryColor2["WHITE"] = "WHITE";
-  return EStepsSecondaryColor2;
-})(EStepsSecondaryColor || {});
+var EStepColor = /* @__PURE__ */ ((EStepColor2) => {
+  EStepColor2["ASPHALT"] = "#333333";
+  EStepColor2["CITRINE"] = "#ff7900";
+  EStepColor2["SAPPHIRE"] = "#2355d7";
+  EStepColor2["GREEN"] = "#1b770c";
+  EStepColor2["DISABLED"] = "#b2b2b2";
+  return EStepColor2;
+})(EStepColor || {});
 export {
   DIFF_BETWEEN_STEP_AND_INDEX,
-  EStepsColorType,
-  EStepsPrimaryColor,
-  EStepsSecondaryColor,
+  EStepColor,
   EStepsSize,
   ID_SEPARATOR,
   StepSize,

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

@@ -1,3 +1,3 @@
 export { Steps } from './Steps';
-export { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from './constants';
-export type { TCommonStepsProps } from './types';
+export { EStepColor, EStepsSize } from './constants';
+export type { TCommonStepsProps, TStepsZone } from './types';

package/dist/components/Steps/index.js

@@ -1,8 +1,7 @@
 import { Steps } from "./Steps.js";
-import { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from "./constants.js";
+import { EStepColor, EStepsSize } from "./constants.js";
 export {
-  EStepsPrimaryColor,
-  EStepsSecondaryColor,
+  EStepColor,
   EStepsSize,
   Steps
 };

package/dist/components/Steps/types.d.ts

@@ -1,6 +1,10 @@
-import { EStepsSize } from './constants';
+import { EStepColor, EStepsSize } from './constants';
 
 export type TSize = `${EStepsSize}` | EStepsSize;
 export type TCommonStepsProps = {
     size?: TSize;
 };
+export type TStepsZone = {
+    color: EStepColor | string;
+    to: number;
+};

package/dist/components/Switch/Switch.d.ts

@@ -1,6 +1,9 @@
 import { CheckboxProps } from '@headlessui/react';
+import { ReactNode } from 'react';
 
-export type TSwitchProps = CheckboxProps;
+export type TSwitchProps = CheckboxProps & {
+    children?: ReactNode;
+};
 export declare const Switch: import('react').ForwardRefExoticComponent<{
     suppressHydrationWarning?: boolean | undefined;
     color?: string | undefined;
@@ -259,7 +262,7 @@ export declare const Switch: import('react').ForwardRefExoticComponent<{
     is?: string | undefined;
 } & {
     as?: "span" | undefined;
-    children?: import('react').ReactNode | ((bag: {
+    children?: ReactNode | ((bag: {
         checked: boolean;
         changing: boolean;
         focus: boolean;
@@ -291,4 +294,6 @@ export declare const Switch: import('react').ForwardRefExoticComponent<{
     form?: string;
     name?: string;
     onChange?: (checked: boolean) => void;
+} & {
+    children?: ReactNode;
 } & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Switch/Switch.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import React__default, { useId, useState, useMemo, useCallback, forwardRef, useEffect } from "react";
 import { Icon } from "../../icons/Icon.js";
@@ -23,14 +23,18 @@ function ie(T$1, h) {
   return React__default.createElement(React__default.Fragment, null, d != null && React__default.createElement(j, { disabled: e, data: { [d]: D$1 || "on" }, overrides: { type: "checkbox", checked: a$1 }, form: R, onReset: G$1 }), H({ ourProps: O, theirProps: A, slot: X, defaultTag: se, name: "Checkbox" }));
 }
 let Re = W(ie);
-const enabled = "_enabled_1g34c_20";
+const container = "_container_18cvn_2";
+const label = "_label_18cvn_27";
+const enabled = "_enabled_18cvn_31";
 const cls = {
-  "switch": "_switch_1g34c_2",
+  container,
+  "switch": "_switch_18cvn_8",
+  label,
   enabled
 };
 const Switch = forwardRef(
   (props, ref) => {
-    const { checked, onChange, ...restProps } = props;
+    const { checked, onChange, children, ...restProps } = props;
     const [enabled2, setEnabled] = useState(checked);
     const handleChange = (value) => {
       setEnabled(value);
@@ -39,19 +43,22 @@ const Switch = forwardRef(
     useEffect(() => {
       setEnabled(!!checked);
     }, [checked]);
-    return /* @__PURE__ */ jsx(
-      Re,
-      {
-        ref,
-        checked: enabled2,
-        onChange: handleChange,
-        className: classNames(cls.switch, {
-          [cls.enabled]: enabled2
-        }),
-        ...restProps,
-        children: /* @__PURE__ */ jsx(Icon, { iconName: "Done16px" })
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { className: cls.container, children: [
+      /* @__PURE__ */ jsx(
+        Re,
+        {
+          ref,
+          checked: enabled2,
+          onChange: handleChange,
+          className: classNames(cls.switch, {
+            [cls.enabled]: enabled2
+          }),
+          ...restProps,
+          children: /* @__PURE__ */ jsx(Icon, { iconName: "Done16px" })
+        }
+      ),
+      children && /* @__PURE__ */ jsx("div", { className: cls.label, children })
+    ] });
   }
 );
 export {

package/dist/components/TabTrail/TabTrail.d.ts

@@ -1,11 +1,35 @@
 import { ETabTrailSize } from './constants';
 
 export type TCategoryTab = {
+    /**
+     * Наименование таба.
+     */
     name: string;
+    /**
+     * Контент, который будет отображать таб.
+     */
     content: React.ReactNode;
+    /**
+     * Количество уведомлений для компонента NotificationBadge.
+     */
+    notificationCount?: number;
 };
 export type TTabTrailProps = {
+    /**
+     * Массив категорий, каждая из которых содержит контент.
+     */
     categories: TCategoryTab[];
+    /**
+     * Размер TabTrail. Допустимые значения: M, S.
+     */
     size?: ETabTrailSize;
+    /**
+     * Показывать ли кнопки навигации.
+     */
+    showButtons?: boolean;
+    /**
+     * Класснейм для TabTrail.
+     */
+    className?: string;
 };
 export declare const TabTrail: import('react').ForwardRefExoticComponent<TTabTrailProps & import('react').RefAttributes<HTMLElement>>;