@sberbusiness/triplex-next 1.46.0 → 1.48.0

package/components/StatusTracker/components/StatusTrackerMedia.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqjKLGwf.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Duk0PPcv.js";
-const StatusTrackerMedia = (props) => {
-  const { children, className, ...rest } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx(styles.statusTrackerChild, className), ...rest, children });
-};
+import React__default from "react";
+import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-L20Tw6M8.js";
+const StatusTrackerMedia = React__default.forwardRef(function StatusTrackerMedia2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles.statusTrackerChild, className), ...rest, ref, children });
+});
+StatusTrackerMedia.displayName = "StatusTrackerMedia";
 export {
   StatusTrackerMedia
 };

package/components/StatusTracker/components/StatusTrackerMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusTrackerMedia.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerMedia.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"@sberbusiness/triplex-next/components/StatusTracker/styles/StatusTracker.module.less\";\n\n/** Свойства компонента StatusTrackerMedia. */\nexport interface StatusTrackerMediaProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** Контейнер для иконки StatusTracker. */\nexport const StatusTrackerMedia: React.FC<StatusTrackerMediaProps> = (props) => {\n    const { children, className, ...rest } = props;\n\n    return (\n        <div className={clsx(styles.statusTrackerChild, className)} {...rest}>\n            {children}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,qBAAwD,CAAC,UAAU;AAC5E,QAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,SACI,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,oBAAoB,SAAS,GAAI,GAAG,MAC3D,SAAA,CACL;AAER;"}
+{"version":3,"file":"StatusTrackerMedia.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerMedia.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"@sberbusiness/triplex-next/components/StatusTracker/styles/StatusTracker.module.less\";\n\n/** Свойства компонента StatusTrackerMedia. */\nexport interface StatusTrackerMediaProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Содержимое блока: как правило, статусная иконка размера 84. */\n    children?: React.ReactNode;\n}\n\n/** Контейнер для иконки StatusTracker. */\nexport const StatusTrackerMedia = React.forwardRef<HTMLDivElement, StatusTrackerMediaProps>(function StatusTrackerMedia(\n    { children, className, ...rest },\n    ref,\n) {\n    return (\n        <div className={clsx(styles.statusTrackerChild, className)} {...rest} ref={ref}>\n            {children}\n        </div>\n    );\n});\n\nStatusTrackerMedia.displayName = \"StatusTrackerMedia\";\n"],"names":["React","StatusTrackerMedia"],"mappings":";;;;AAWO,MAAM,qBAAqBA,eAAM,WAAoD,SAASC,oBACjG,EAAE,UAAU,WAAW,GAAG,KAAA,GAC1B,KACF;AACE,SACI,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,oBAAoB,SAAS,GAAI,GAAG,MAAM,KACjE,SAAA,CACL;AAER,CAAC;AAED,mBAAmB,cAAc;"}

package/components/StatusTracker/components/StatusTrackerStatus.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqjKLGwf.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Duk0PPcv.js";
+import React__default from "react";
+import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
+import { s as styles } from "../../../chunks/StatusTracker.module-L20Tw6M8.js";
 import { MarkerStatus } from "../../MarkerStatus/MarkerStatus.js";
-const StatusTrackerStatus = (props) => {
-  const { children, className, ...rest } = props;
-  return /* @__PURE__ */ jsx(MarkerStatus, { className: clsx(styles.statusTrackerStatus, className), ...rest, children });
-};
+const StatusTrackerStatus = React__default.forwardRef(function StatusTrackerStatus2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(MarkerStatus, { className: clsx(styles.statusTrackerStatus, className), ...rest, ref, children });
+});
+StatusTrackerStatus.displayName = "StatusTrackerStatus";
 export {
   StatusTrackerStatus
 };

package/components/StatusTracker/components/StatusTrackerStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusTrackerStatus.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerStatus.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"@sberbusiness/triplex-next/components/StatusTracker/styles/StatusTracker.module.less\";\nimport { IMarkerStatusProps, MarkerStatus } from \"@sberbusiness/triplex-next/components/MarkerStatus\";\n\n/** Компонент статуса для блока с основным контентом статус-трекера. */\nexport const StatusTrackerStatus: React.FC<IMarkerStatusProps> = (props) => {\n    const { children, className, ...rest } = props;\n\n    return (\n        <MarkerStatus className={clsx(styles.statusTrackerStatus, className)} {...rest}>\n            {children}\n        </MarkerStatus>\n    );\n};\n"],"names":[],"mappings":";;;;AAMO,MAAM,sBAAoD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,SACI,oBAAC,cAAA,EAAa,WAAW,KAAK,OAAO,qBAAqB,SAAS,GAAI,GAAG,MACrE,SAAA,CACL;AAER;"}
+{"version":3,"file":"StatusTrackerStatus.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerStatus.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"@sberbusiness/triplex-next/components/StatusTracker/styles/StatusTracker.module.less\";\nimport { IMarkerStatusProps, MarkerStatus } from \"@sberbusiness/triplex-next/components/MarkerStatus\";\n\n/** Компонент статуса для блока с основным контентом статус-трекера. */\nexport const StatusTrackerStatus = React.forwardRef<HTMLDivElement, IMarkerStatusProps>(function StatusTrackerStatus(\n    { children, className, ...rest },\n    ref,\n) {\n    return (\n        <MarkerStatus className={clsx(styles.statusTrackerStatus, className)} {...rest} ref={ref}>\n            {children}\n        </MarkerStatus>\n    );\n});\n\nStatusTrackerStatus.displayName = \"StatusTrackerStatus\";\n"],"names":["React","StatusTrackerStatus"],"mappings":";;;;;AAMO,MAAM,sBAAsBA,eAAM,WAA+C,SAASC,qBAC7F,EAAE,UAAU,WAAW,GAAG,KAAA,GAC1B,KACF;AACE,SACI,oBAAC,cAAA,EAAa,WAAW,KAAK,OAAO,qBAAqB,SAAS,GAAI,GAAG,MAAM,KAC3E,SAAA,CACL;AAER,CAAC;AAED,oBAAoB,cAAc;"}

package/components/StatusTracker/components/StatusTrackerStatusGroup.js

@@ -1,12 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { c as clsx } from "../../../chunks/vendor-DqjKLGwf.js";
-const statusTrackerStatusGroup = "statusTrackerStatusGroup__4b41f0d5";
+import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
+const statusTrackerStatusGroup = "statusTrackerStatusGroup__2bb4532b";
 const styles = {
   statusTrackerStatusGroup
 };
 const StatusTrackerStatusGroup = React__default.forwardRef(
-  ({ children, className, ...restProps }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.statusTrackerStatusGroup, className), ...restProps, ref, children })
+  function StatusTrackerStatusGroup2({ children, className, ...restProps }, ref) {
+    return /* @__PURE__ */ jsx("div", { className: clsx(styles.statusTrackerStatusGroup, className), ...restProps, ref, children });
+  }
 );
 StatusTrackerStatusGroup.displayName = "StatusTrackerStatusGroup";
 export {

package/components/StatusTracker/components/StatusTrackerStatusGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusTrackerStatusGroup.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerStatusGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/StatusTrackerStatusGroup.module.less\";\n\n/** Свойства компонента StatusTrackerStatusGroup. */\nexport interface IStatusTrackerStatusGroup extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** Контейнер для группировки StatusTrackerStatus. */\nexport const StatusTrackerStatusGroup = React.forwardRef<HTMLDivElement, IStatusTrackerStatusGroup>(\n    ({ children, className, ...restProps }, ref) => (\n        <div className={clsx(styles.statusTrackerStatusGroup, className)} {...restProps} ref={ref}>\n            {children}\n        </div>\n    ),\n);\n\nStatusTrackerStatusGroup.displayName = \"StatusTrackerStatusGroup\";\n"],"names":["React"],"mappings":";;;;;;;AAQO,MAAM,2BAA2BA,eAAM;AAAA,EAC1C,CAAC,EAAE,UAAU,WAAW,GAAG,UAAA,GAAa,QACpC,oBAAC,SAAI,WAAW,KAAK,OAAO,0BAA0B,SAAS,GAAI,GAAG,WAAW,KAC5E,SAAA,CACL;AAER;AAEA,yBAAyB,cAAc;"}
+{"version":3,"file":"StatusTrackerStatusGroup.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerStatusGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/StatusTrackerStatusGroup.module.less\";\n\n/** Свойства компонента StatusTrackerStatusGroup. */\nexport interface IStatusTrackerStatusGroup extends React.HTMLAttributes<HTMLDivElement> {\n    /** Список статусов: StatusTracker.Body.Status. */\n    children?: React.ReactNode;\n}\n\n/**\n * Контейнер для группировки StatusTrackerStatus.\n * Выстраивает статусы в колонку и центрирует блок целиком, оставляя подписи выровненными по левому краю.\n */\nexport const StatusTrackerStatusGroup = React.forwardRef<HTMLDivElement, IStatusTrackerStatusGroup>(\n    function StatusTrackerStatusGroup({ children, className, ...restProps }, ref) {\n        return (\n            <div className={clsx(styles.statusTrackerStatusGroup, className)} {...restProps} ref={ref}>\n                {children}\n            </div>\n        );\n    },\n);\n\nStatusTrackerStatusGroup.displayName = \"StatusTrackerStatusGroup\";\n"],"names":["React","StatusTrackerStatusGroup"],"mappings":";;;;;;;AAcO,MAAM,2BAA2BA,eAAM;AAAA,EAC1C,SAASC,0BAAyB,EAAE,UAAU,WAAW,GAAG,UAAA,GAAa,KAAK;AAC1E,WACI,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,0BAA0B,SAAS,GAAI,GAAG,WAAW,KAC5E,SAAA,CACL;AAAA,EAER;AACJ;AAEA,yBAAyB,cAAc;"}

package/components/StatusTracker/components/StatusTrackerSum.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqjKLGwf.js";
+import React__default from "react";
+import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
 import { ETitleSize, EFontWeightTitle } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
 import "../../Typography/Text.js";
 import { Title } from "../../Typography/Title.js";
 import { Amount } from "../../Amount/Amount.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Duk0PPcv.js";
-const StatusTrackerSum = (props) => {
-  const { className, amountProps, ...restProps } = props;
+import { s as styles } from "../../../chunks/StatusTracker.module-L20Tw6M8.js";
+const StatusTrackerSum = React__default.forwardRef(function StatusTrackerSum2({ className, amountProps, ...restProps }, ref) {
   return /* @__PURE__ */ jsx(
     Title,
     {
@@ -16,10 +16,12 @@ const StatusTrackerSum = (props) => {
       size: ETitleSize.H1,
       className: clsx(styles.statusTrackerSum, className),
       ...restProps,
+      ref,
       children: /* @__PURE__ */ jsx(Amount, { ...amountProps })
     }
   );
-};
+});
+StatusTrackerSum.displayName = "StatusTrackerSum";
 export {
   StatusTrackerSum
 };

package/components/StatusTracker/components/StatusTrackerSum.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusTrackerSum.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerSum.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { EFontWeightTitle, ETitleSize, Title } from \"@sberbusiness/triplex-next/components/Typography\";\nimport { Amount, IAmountProps } from \"@sberbusiness/triplex-next/components/Amount\";\nimport styles from \"@sberbusiness/triplex-next/components/StatusTracker/styles/StatusTracker.module.less\";\n\n/** Свойства компонента StatusTrackerSum. */\nexport interface IStatusTrackerSumProps extends React.HTMLAttributes<HTMLDivElement> {\n    amountProps: IAmountProps;\n}\n\n/** Компонент суммы для блока заголовка статус-трекера. */\nexport const StatusTrackerSum: React.FC<IStatusTrackerSumProps> = (props) => {\n    const { className, amountProps, ...restProps } = props;\n\n    return (\n        <Title\n            weight={EFontWeightTitle.SEMIBOLD}\n            size={ETitleSize.H1}\n            className={clsx(styles.statusTrackerSum, className)}\n            {...restProps}\n        >\n            <Amount {...amountProps} />\n        </Title>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYO,MAAM,mBAAqD,CAAC,UAAU;AACzE,QAAM,EAAE,WAAW,aAAa,GAAG,cAAc;AAEjD,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ,iBAAiB;AAAA,MACzB,MAAM,WAAW;AAAA,MACjB,WAAW,KAAK,OAAO,kBAAkB,SAAS;AAAA,MACjD,GAAG;AAAA,MAEJ,UAAA,oBAAC,QAAA,EAAQ,GAAG,YAAA,CAAa;AAAA,IAAA;AAAA,EAAA;AAGrC;"}
+{"version":3,"file":"StatusTrackerSum.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerSum.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { EFontWeightTitle, ETitleSize, Title } from \"@sberbusiness/triplex-next/components/Typography\";\nimport { Amount, IAmountProps } from \"@sberbusiness/triplex-next/components/Amount\";\nimport styles from \"@sberbusiness/triplex-next/components/StatusTracker/styles/StatusTracker.module.less\";\n\n/** Свойства компонента StatusTrackerSum. */\nexport interface IStatusTrackerSumProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Свойства суммы. Передаются во вложенный компонент Amount как есть. */\n    amountProps: IAmountProps;\n}\n\n/** Сумма документа для блока заголовка статус-трекера. Рендерится как Title размера H1. */\nexport const StatusTrackerSum = React.forwardRef<HTMLElement, IStatusTrackerSumProps>(function StatusTrackerSum(\n    { className, amountProps, ...restProps },\n    ref,\n) {\n    return (\n        <Title\n            weight={EFontWeightTitle.SEMIBOLD}\n            size={ETitleSize.H1}\n            className={clsx(styles.statusTrackerSum, className)}\n            {...restProps}\n            ref={ref}\n        >\n            <Amount {...amountProps} />\n        </Title>\n    );\n});\n\nStatusTrackerSum.displayName = \"StatusTrackerSum\";\n"],"names":["React","StatusTrackerSum"],"mappings":";;;;;;;;;;AAaO,MAAM,mBAAmBA,eAAM,WAAgD,SAASC,kBAC3F,EAAE,WAAW,aAAa,GAAG,UAAA,GAC7B,KACF;AACE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ,iBAAiB;AAAA,MACzB,MAAM,WAAW;AAAA,MACjB,WAAW,KAAK,OAAO,kBAAkB,SAAS;AAAA,MACjD,GAAG;AAAA,MACJ;AAAA,MAEA,UAAA,oBAAC,QAAA,EAAQ,GAAG,YAAA,CAAa;AAAA,IAAA;AAAA,EAAA;AAGrC,CAAC;AAED,iBAAiB,cAAc;"}

package/components/StatusTracker/components/StatusTrackerTitle.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DqjKLGwf.js";
+import React__default from "react";
+import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
 import { ETitleSize, EFontWeightTitle } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
 import "../../Typography/Text.js";
 import { Title } from "../../Typography/Title.js";
-import { s as styles } from "../../../chunks/StatusTracker.module-Duk0PPcv.js";
-const StatusTrackerTitle = (props) => {
-  const { children, className, ...rest } = props;
+import { s as styles } from "../../../chunks/StatusTracker.module-L20Tw6M8.js";
+const StatusTrackerTitle = React__default.forwardRef(function StatusTrackerTitle2({ children, className, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     Title,
     {
@@ -15,10 +15,12 @@ const StatusTrackerTitle = (props) => {
       size: ETitleSize.H3,
       className: clsx(styles.statusTrackerTitle, className),
       ...rest,
+      ref,
       children
     }
   );
-};
+});
+StatusTrackerTitle.displayName = "StatusTrackerTitle";
 export {
   StatusTrackerTitle
 };

package/components/StatusTracker/components/StatusTrackerTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusTrackerTitle.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerTitle.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { EFontWeightTitle, ETitleSize, Title } from \"@sberbusiness/triplex-next/components/Typography\";\nimport styles from \"@sberbusiness/triplex-next/components/StatusTracker/styles/StatusTracker.module.less\";\n\n/** Свойства компонента StatusTrackerTitle. */\nexport interface IStatusTrackerTitleProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** Текст пояснения для блока заголовка статус-трекера. */\nexport const StatusTrackerTitle: React.FC<IStatusTrackerTitleProps> = (props) => {\n    const { children, className, ...rest } = props;\n\n    return (\n        <Title\n            weight={EFontWeightTitle.BOLD}\n            size={ETitleSize.H3}\n            className={clsx(styles.statusTrackerTitle, className)}\n            {...rest}\n        >\n            {children}\n        </Title>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AASO,MAAM,qBAAyD,CAAC,UAAU;AAC7E,QAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ,iBAAiB;AAAA,MACzB,MAAM,WAAW;AAAA,MACjB,WAAW,KAAK,OAAO,oBAAoB,SAAS;AAAA,MACnD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"StatusTrackerTitle.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerTitle.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { EFontWeightTitle, ETitleSize, Title } from \"@sberbusiness/triplex-next/components/Typography\";\nimport styles from \"@sberbusiness/triplex-next/components/StatusTracker/styles/StatusTracker.module.less\";\n\n/** Свойства компонента StatusTrackerTitle. */\nexport interface IStatusTrackerTitleProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Текст заголовка. */\n    children?: React.ReactNode;\n}\n\n/** Заголовок блока заголовка статус-трекера. Рендерится как Title размера H3 с жирным начертанием. */\nexport const StatusTrackerTitle = React.forwardRef<HTMLElement, IStatusTrackerTitleProps>(function StatusTrackerTitle(\n    { children, className, ...rest },\n    ref,\n) {\n    return (\n        <Title\n            weight={EFontWeightTitle.BOLD}\n            size={ETitleSize.H3}\n            className={clsx(styles.statusTrackerTitle, className)}\n            {...rest}\n            ref={ref}\n        >\n            {children}\n        </Title>\n    );\n});\n\nStatusTrackerTitle.displayName = \"StatusTrackerTitle\";\n"],"names":["React","StatusTrackerTitle"],"mappings":";;;;;;;;;AAYO,MAAM,qBAAqBA,eAAM,WAAkD,SAASC,oBAC/F,EAAE,UAAU,WAAW,GAAG,KAAA,GAC1B,KACF;AACE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ,iBAAiB;AAAA,MACzB,MAAM,WAAW;AAAA,MACjB,WAAW,KAAK,OAAO,oBAAoB,SAAS;AAAA,MACnD,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAED,mBAAmB,cAAc;"}

package/components/Step/Step.js

@@ -8,24 +8,24 @@ import "../Typography/Caption.js";
 import "../Typography/CodeText.js";
 import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
-import { c as clsx } from "../../chunks/vendor-DqjKLGwf.js";
+import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const step = "step__95255334";
-const sm = "sm__c96b263c";
-const md = "md__ee9bbf1e";
-const lg = "lg__22c5fd76";
-const done = "done__d69c127f";
-const warning = "warning__9a358877";
-const active = "active__9dc6ac72";
-const error = "error__a68e8c11";
-const disabled = "disabled__acee10e2";
+const step = "step__048e5133";
+const sm = "sm__81a8c67f";
+const md = "md__d0f7a265";
+const lg = "lg__12734f35";
+const done = "done__2ff83993";
+const warning = "warning__f6b8986c";
+const active = "active__1d7761b1";
+const error = "error__a31e4947";
+const disabled = "disabled__83d68ea3";
 const styles = {
   step,
   sm,
   md,
   lg,
-  "default": "default__0e826597",
+  "default": "default__ce72140a",
   done,
   warning,
   active,

package/components/Stepper/Stepper.js

@@ -1,8 +1,8 @@
 import "./enums.js";
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
-import { c as clsx } from "../../chunks/vendor-DqjKLGwf.js";
-import { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from "@sberbusiness/icons-next";
+import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
+import { CaretrightStrokeSrvIcon24, CaretleftStrokeSrvIcon24 } from "@sberbusiness/icons-next";
 import { CarouselExtended } from "../CarouselExtended/CarouselExtended.js";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
 import { StepperExtended } from "./StepperExtended.js";
@@ -12,14 +12,14 @@ import { scrollSmoothHorizontally } from "../../utils/scroll.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { EScreenWidth } from "../../helpers/breakpoints.js";
 import "./StepperStepIcon.js";
-const stepperCarousel = "stepperCarousel__8b815eb1";
-const stepperButtonWrapper = "stepperButtonWrapper__42fa46be";
-const prev = "prev__40152f46";
-const next = "next__9d44fceb";
-const stepperButton = "stepperButton__79403d64";
-const sm = "sm__be0d2d41";
-const md = "md__4ede5873";
-const lg = "lg__e9cdb81a";
+const stepperCarousel = "stepperCarousel__be16f637";
+const stepperButtonWrapper = "stepperButtonWrapper__a35be5c4";
+const prev = "prev__7cd3ec52";
+const next = "next__00d715cc";
+const stepperButton = "stepperButton__1ba8a34e";
+const sm = "sm__fa9ababe";
+const md = "md__1f497eba";
+const lg = "lg__3a3ce190";
 const styles = {
   stepperCarousel,
   stepperButtonWrapper,
@@ -32,39 +32,74 @@ const styles = {
 };
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const SCROLL_STEP_RATIO = 0.3;
+const DIRECTION_TO_CLASS_NAME_MAP = {
+  prev: styles.prev,
+  next: styles.next
+};
+const DIRECTION_TO_ICON_MAP = {
+  prev: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon24, { paletteIndex: 5 }),
+  next: /* @__PURE__ */ jsx(CaretrightStrokeSrvIcon24, { paletteIndex: 5 })
+};
+const StepperScrollButton = ({ direction, size, hidden, ...restButtonProps }) => hidden ? null : /* @__PURE__ */ jsx("div", { className: clsx(styles.stepperButtonWrapper, DIRECTION_TO_CLASS_NAME_MAP[direction]), children: /* @__PURE__ */ jsx(
+  ButtonIcon,
+  {
+    className: clsx(styles.stepperButton, sizeToClassNameMap[size]),
+    tabIndex: -1,
+    ...restButtonProps,
+    children: DIRECTION_TO_ICON_MAP[direction]
+  }
+) });
+const alignStepRight = (carousel, step, delta, stepRight) => {
+  if (delta <= 0) {
+    return;
+  }
+  const nextStep = step.nextElementSibling;
+  const scrollAmount = nextStep ? delta - (stepRight - nextStep.getBoundingClientRect().right) : delta;
+  scrollSmoothHorizontally(carousel, Math.ceil(scrollAmount));
+};
+const alignStepLeft = (carousel, step, delta, stepLeft) => {
+  if (delta >= 0) {
+    return;
+  }
+  const prevStep = step.previousElementSibling;
+  const scrollAmount = prevStep ? delta - (stepLeft - prevStep.getBoundingClientRect().left) : delta;
+  scrollSmoothHorizontally(carousel, Math.floor(scrollAmount));
+};
+const alignStepCenter = (carousel, delta) => {
+  if (delta) {
+    scrollSmoothHorizontally(carousel, delta);
+  }
+};
+const alignStep = (carousel, step) => {
+  const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();
+  const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();
+  const carouselCenter = carouselLeft + carouselWidth / 2;
+  const stepCenter = stepLeft + stepWidth / 2;
+  if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {
+    alignStepCenter(carousel, stepCenter - carouselCenter);
+  } else if (carouselCenter > stepCenter) {
+    alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);
+  } else if (carouselCenter < stepCenter) {
+    alignStepRight(carousel, step, stepRight - carouselRight, stepRight);
+  }
+};
 const Stepper = ({
   className,
   steps,
-  size = EComponentSize.LG,
+  size = EComponentSize.MD,
   selectedStepId,
   ...restProps
 }) => {
-  const [state, setState] = useState({ stepNext: 0, stepPrev: 0 });
+  const [scrollStep, setScrollStep] = useState(0);
   const carouselRef = useRef(null);
   const stepRefs = useRef({});
   const selectedIndex = steps.findIndex((step) => step.id === selectedStepId);
   const renderPrevButton = useCallback(
-    ({ hidden, ...restButtonProps }) => hidden ? null : /* @__PURE__ */ jsx("div", { className: clsx(styles.stepperButtonWrapper, styles.prev), children: /* @__PURE__ */ jsx(
-      ButtonIcon,
-      {
-        className: clsx(styles.stepperButton, sizeToClassNameMap[size]),
-        tabIndex: -1,
-        ...restButtonProps,
-        children: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon24, { paletteIndex: 5 })
-      }
-    ) }),
+    (buttonProps) => /* @__PURE__ */ jsx(StepperScrollButton, { ...buttonProps, direction: "prev", size }),
     [size]
   );
   const renderNextButton = useCallback(
-    ({ hidden, ...restButtonProps }) => hidden ? null : /* @__PURE__ */ jsx("div", { className: clsx(styles.stepperButtonWrapper, styles.next), children: /* @__PURE__ */ jsx(
-      ButtonIcon,
-      {
-        className: clsx(styles.stepperButton, sizeToClassNameMap[size]),
-        tabIndex: -1,
-        ...restButtonProps,
-        children: /* @__PURE__ */ jsx(CaretrightStrokeSrvIcon24, { paletteIndex: 5 })
-      }
-    ) }),
+    (buttonProps) => /* @__PURE__ */ jsx(StepperScrollButton, { ...buttonProps, direction: "next", size }),
     [size]
   );
   useEffect(() => {
@@ -73,91 +108,49 @@ const Stepper = ({
       return;
     }
     const resizeObserver = new ResizeObserver((entries) => {
-      const width = entries[0].contentRect.width;
-      const scrollStep = width * SCROLL_STEP_RATIO;
-      setState({
-        stepNext: scrollStep,
-        stepPrev: scrollStep
-      });
+      setScrollStep(entries[0].contentRect.width * SCROLL_STEP_RATIO);
     });
     resizeObserver.observe(carouselNode);
     return () => {
       resizeObserver.disconnect();
     };
   }, []);
-  const alignStepRight = useCallback(
-    (carousel, step, delta, stepRight) => {
-      if (delta > 0) {
-        if (step.nextElementSibling) {
-          delta -= stepRight - step.nextElementSibling.getBoundingClientRect().right;
-        }
-        scrollSmoothHorizontally(carousel, Math.ceil(delta));
-      }
-    },
-    []
-  );
-  const alignStepLeft = useCallback(
-    (carousel, step, delta, stepLeft) => {
-      if (delta < 0) {
-        if (step.previousElementSibling) {
-          delta -= stepLeft - step.previousElementSibling.getBoundingClientRect().left;
-        }
-        scrollSmoothHorizontally(carousel, Math.floor(delta));
-      }
-    },
-    []
-  );
-  const alignStepCenter = useCallback((carousel, delta) => {
-    if (delta) {
-      scrollSmoothHorizontally(carousel, delta);
-    }
-  }, []);
-  const alignStep = useCallback(
-    (carousel, step) => {
-      const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();
-      const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();
-      const carouselCenter = carouselLeft + carouselWidth / 2;
-      const stepCenter = stepLeft + stepWidth / 2;
-      if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {
-        alignStepCenter(carousel, stepCenter - carouselCenter);
-      } else if (carouselCenter > stepCenter) {
-        alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);
-      } else if (carouselCenter < stepCenter) {
-        alignStepRight(carousel, step, stepRight - carouselRight, stepRight);
-      }
-    },
-    [alignStepCenter, alignStepLeft, alignStepRight]
-  );
   useEffect(() => {
-    if (selectedStepId) {
-      const { current: carousel } = carouselRef;
-      const step = stepRefs.current[selectedStepId];
-      if (carousel && step) {
-        alignStep(carousel, step);
-      }
+    if (!selectedStepId) {
+      return;
+    }
+    const carousel = carouselRef.current;
+    const step = stepRefs.current[selectedStepId];
+    if (carousel && step) {
+      alignStep(carousel, step);
+    }
+  }, [selectedStepId]);
+  const setStepRef = (id) => (instance) => {
+    if (instance === null) {
+      delete stepRefs.current[id];
+    } else {
+      stepRefs.current[id] = instance;
     }
-  }, [selectedStepId, alignStep]);
+  };
   return /* @__PURE__ */ jsx(
     CarouselExtended,
     {
       className: clsx(styles.stepperCarousel, sizeToClassNameMap[size], className),
       buttonPrev: renderPrevButton,
       buttonNext: renderNextButton,
-      stepPrev: state.stepPrev,
-      stepNext: state.stepNext,
+      stepPrev: scrollStep,
+      stepNext: scrollStep,
       ref: carouselRef,
-      children: /* @__PURE__ */ jsx(StepperExtended, { selectedStepId, size, ...restProps, children: steps.map(({ label, ...step }, index) => {
-        return /* @__PURE__ */ jsx(
-          StepperExtended.Step,
-          {
-            forwardedRef: (instance) => stepRefs.current[step.id] = instance,
-            ...step,
-            isInActiveStep: index > selectedIndex,
-            children: label
-          },
-          step.id
-        );
-      }) })
+      children: /* @__PURE__ */ jsx(StepperExtended, { selectedStepId, size, ...restProps, children: steps.map(({ label, ...step }, index) => /* @__PURE__ */ jsx(
+        StepperExtended.Step,
+        {
+          forwardedRef: setStepRef(step.id),
+          ...step,
+          isInActiveStep: index > selectedIndex,
+          children: label
+        },
+        step.id
+      )) })
     }
   );
 };

package/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { CarouselExtended, ICarouselExtendedButtonProvideProps } from \"../CarouselExtended/CarouselExtended\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { StepperExtended } from \"./StepperExtended\";\nimport { StepperStep } from \"./StepperStep\";\nimport { createSizeToClassNameMap, scrollSmoothHorizontally } from \"../../utils\";\nimport { IStepperProps } from \"./types\";\nimport { EComponentSize } from \"../../enums\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport styles from \"./styles/Stepper.module.less\";\n\n/** Внутренние составляющие Stepper. */\ninterface IStepperComposition {\n    Step: typeof StepperStep;\n}\n\n/** Соответствие размера имени класса. */\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\nconst SCROLL_STEP_RATIO = 0.3;\n\n/** Компонент Stepper, список шагов */\nexport const Stepper: React.FC<IStepperProps> & IStepperComposition = ({\n    className,\n    steps,\n    size = EComponentSize.LG,\n    selectedStepId,\n    ...restProps\n}) => {\n    const [state, setState] = useState({ stepNext: 0, stepPrev: 0 });\n    const carouselRef = useRef<HTMLDivElement>(null);\n    const stepRefs = useRef<Record<string, HTMLLIElement | null>>({});\n    const selectedIndex = steps.findIndex((step) => step.id === selectedStepId);\n\n    const renderPrevButton = useCallback(\n        ({ hidden, ...restButtonProps }: ICarouselExtendedButtonProvideProps) =>\n            hidden ? null : (\n                <div className={clsx(styles.stepperButtonWrapper, styles.prev)}>\n                    <ButtonIcon\n                        className={clsx(styles.stepperButton, sizeToClassNameMap[size])}\n                        tabIndex={-1}\n                        {...restButtonProps}\n                    >\n                        <CaretleftStrokeSrvIcon24 paletteIndex={5} />\n                    </ButtonIcon>\n                </div>\n            ),\n        [size],\n    );\n\n    const renderNextButton = useCallback(\n        ({ hidden, ...restButtonProps }: ICarouselExtendedButtonProvideProps) =>\n            hidden ? null : (\n                <div className={clsx(styles.stepperButtonWrapper, styles.next)}>\n                    <ButtonIcon\n                        className={clsx(styles.stepperButton, sizeToClassNameMap[size])}\n                        tabIndex={-1}\n                        {...restButtonProps}\n                    >\n                        <CaretrightStrokeSrvIcon24 paletteIndex={5} />\n                    </ButtonIcon>\n                </div>\n            ),\n        [size],\n    );\n\n    useEffect(() => {\n        const carouselNode = carouselRef.current;\n\n        if (carouselNode === null) {\n            return;\n        }\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            const width = entries[0].contentRect.width;\n            const scrollStep = width * SCROLL_STEP_RATIO;\n\n            setState({\n                stepNext: scrollStep,\n                stepPrev: scrollStep,\n            });\n        });\n\n        resizeObserver.observe(carouselNode);\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, []);\n\n    /** Выравнивание шага по правой части карусели. */\n    const alignStepRight = useCallback(\n        (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepRight: number) => {\n            if (delta > 0) {\n                // Текущий шаг – не последний, необходимо показать следующий шаг.\n                if (step.nextElementSibling) {\n                    delta -= stepRight - step.nextElementSibling.getBoundingClientRect().right;\n                }\n                scrollSmoothHorizontally(carousel, Math.ceil(delta));\n            }\n        },\n        [],\n    );\n\n    /** Выравнивание шага по левой части карусели. */\n    const alignStepLeft = useCallback(\n        (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepLeft: number) => {\n            if (delta < 0) {\n                // Текущий шаг – не первый, необходимо показать предыдущий шаг.\n                if (step.previousElementSibling) {\n                    delta -= stepLeft - step.previousElementSibling.getBoundingClientRect().left;\n                }\n                scrollSmoothHorizontally(carousel, Math.floor(delta));\n            }\n        },\n        [],\n    );\n\n    /** Выравнивание шага по центру карусели. */\n    const alignStepCenter = useCallback((carousel: HTMLDivElement, delta: number) => {\n        if (delta) {\n            scrollSmoothHorizontally(carousel, delta);\n        }\n    }, []);\n\n    /** Выравнивание шага в карусели. */\n    const alignStep = useCallback(\n        (carousel: HTMLDivElement, step: HTMLLIElement) => {\n            const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();\n            const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();\n            const carouselCenter = carouselLeft + carouselWidth / 2;\n            const stepCenter = stepLeft + stepWidth / 2;\n\n            if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {\n                alignStepCenter(carousel, stepCenter - carouselCenter);\n            } else if (carouselCenter > stepCenter) {\n                alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);\n            } else if (carouselCenter < stepCenter) {\n                alignStepRight(carousel, step, stepRight - carouselRight, stepRight);\n            }\n        },\n        [alignStepCenter, alignStepLeft, alignStepRight],\n    );\n\n    useEffect(() => {\n        if (selectedStepId) {\n            const { current: carousel } = carouselRef;\n            const step = stepRefs.current[selectedStepId];\n\n            if (carousel && step) {\n                alignStep(carousel, step);\n            }\n        }\n    }, [selectedStepId, alignStep]);\n\n    return (\n        <CarouselExtended\n            className={clsx(styles.stepperCarousel, sizeToClassNameMap[size], className)}\n            buttonPrev={renderPrevButton}\n            buttonNext={renderNextButton}\n            stepPrev={state.stepPrev}\n            stepNext={state.stepNext}\n            ref={carouselRef}\n        >\n            <StepperExtended selectedStepId={selectedStepId} size={size} {...restProps}>\n                {steps.map(({ label, ...step }, index) => {\n                    return (\n                        <StepperExtended.Step\n                            key={step.id}\n                            forwardedRef={(instance) => (stepRefs.current[step.id] = instance)}\n                            {...step}\n                            isInActiveStep={index > selectedIndex}\n                        >\n                            {label}\n                        </StepperExtended.Step>\n                    );\n                })}\n            </StepperExtended>\n        </CarouselExtended>\n    );\n};\n\nStepper.Step = StepperStep;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { CarouselExtended, ICarouselExtendedButtonProvideProps } from \"../CarouselExtended/CarouselExtended\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { StepperExtended } from \"./StepperExtended\";\nimport { StepperStep } from \"./StepperStep\";\nimport { createSizeToClassNameMap, scrollSmoothHorizontally } from \"../../utils\";\nimport { IStepperProps } from \"./types\";\nimport { EComponentSize } from \"../../enums\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport styles from \"./styles/Stepper.module.less\";\n\n/** Внутренние составляющие Stepper. */\ninterface IStepperComposition {\n    Step: typeof StepperStep;\n}\n\n/** Направление прокрутки ленты шагов. */\ntype TStepperScrollDirection = \"prev\" | \"next\";\n\n/** Соответствие размера имени класса. */\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Доля ширины видимой области ленты, на которую прокручивает один клик по кнопке. */\nconst SCROLL_STEP_RATIO = 0.3;\n\n/** Соответствие направления прокрутки имени класса. */\nconst DIRECTION_TO_CLASS_NAME_MAP: Record<TStepperScrollDirection, string> = {\n    prev: styles.prev,\n    next: styles.next,\n};\n\n/** Соответствие направления прокрутки иконке кнопки. */\nconst DIRECTION_TO_ICON_MAP: Record<TStepperScrollDirection, React.ReactNode> = {\n    prev: <CaretleftStrokeSrvIcon24 paletteIndex={5} />,\n    next: <CaretrightStrokeSrvIcon24 paletteIndex={5} />,\n};\n\n/** Свойства кнопки прокрутки ленты шагов. */\ninterface IStepperScrollButtonProps extends ICarouselExtendedButtonProvideProps {\n    /** Направление прокрутки. */\n    direction: TStepperScrollDirection;\n    /** Размер Stepper — от него зависит размер кнопки. */\n    size: EComponentSize;\n}\n\n/**\n * Кнопка прокрутки ленты шагов. Рендерится по запросу CarouselExtended, который передаёт\n * `hidden` (прокрутка не нужна), `disabled` (достигнут край) и `onClick`.\n * Из таб-порядка исключена (`tabIndex = -1`): до любого шага можно дойти клавиатурой и без неё.\n */\nconst StepperScrollButton = ({ direction, size, hidden, ...restButtonProps }: IStepperScrollButtonProps) =>\n    hidden ? null : (\n        <div className={clsx(styles.stepperButtonWrapper, DIRECTION_TO_CLASS_NAME_MAP[direction])}>\n            <ButtonIcon\n                className={clsx(styles.stepperButton, sizeToClassNameMap[size])}\n                tabIndex={-1}\n                {...restButtonProps}\n            >\n                {DIRECTION_TO_ICON_MAP[direction]}\n            </ButtonIcon>\n        </div>\n    );\n\n/**\n * Прокручивает ленту так, чтобы шаг прижался к правому краю видимой области.\n * Если справа есть следующий шаг, лента подтягивается ещё и на него — подсказка, что лента не кончилась.\n */\nconst alignStepRight = (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepRight: number): void => {\n    if (delta <= 0) {\n        return;\n    }\n\n    const nextStep = step.nextElementSibling;\n    // Текущий шаг – не последний, необходимо показать следующий шаг.\n    const scrollAmount = nextStep ? delta - (stepRight - nextStep.getBoundingClientRect().right) : delta;\n\n    scrollSmoothHorizontally(carousel, Math.ceil(scrollAmount));\n};\n\n/**\n * Прокручивает ленту так, чтобы шаг прижался к левому краю видимой области.\n * Если слева есть предыдущий шаг, лента подтягивается ещё и на него — подсказка, что лента не кончилась.\n */\nconst alignStepLeft = (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepLeft: number): void => {\n    if (delta >= 0) {\n        return;\n    }\n\n    const prevStep = step.previousElementSibling;\n    // Текущий шаг – не первый, необходимо показать предыдущий шаг.\n    const scrollAmount = prevStep ? delta - (stepLeft - prevStep.getBoundingClientRect().left) : delta;\n\n    scrollSmoothHorizontally(carousel, Math.floor(scrollAmount));\n};\n\n/** Прокручивает ленту так, чтобы шаг встал по центру видимой области. */\nconst alignStepCenter = (carousel: HTMLDivElement, delta: number): void => {\n    if (delta) {\n        scrollSmoothHorizontally(carousel, delta);\n    }\n};\n\n/**\n * Подводит выбранный шаг в видимую область ленты.\n * На узких экранах шаг центрируется, на широких — прижимается к ближайшему краю.\n */\nconst alignStep = (carousel: HTMLDivElement, step: HTMLLIElement): void => {\n    const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();\n    const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();\n    const carouselCenter = carouselLeft + carouselWidth / 2;\n    const stepCenter = stepLeft + stepWidth / 2;\n\n    if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {\n        alignStepCenter(carousel, stepCenter - carouselCenter);\n    } else if (carouselCenter > stepCenter) {\n        alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);\n    } else if (carouselCenter < stepCenter) {\n        alignStepRight(carousel, step, stepRight - carouselRight, stepRight);\n    }\n};\n\n/** Компонент Stepper, список шагов */\nexport const Stepper: React.FC<IStepperProps> & IStepperComposition = ({\n    className,\n    steps,\n    size = EComponentSize.MD,\n    selectedStepId,\n    ...restProps\n}) => {\n    const [scrollStep, setScrollStep] = useState(0);\n    const carouselRef = useRef<HTMLDivElement>(null);\n    const stepRefs = useRef<Record<string, HTMLLIElement | null>>({});\n    const selectedIndex = steps.findIndex((step) => step.id === selectedStepId);\n\n    const renderPrevButton = useCallback(\n        (buttonProps: ICarouselExtendedButtonProvideProps) => (\n            <StepperScrollButton {...buttonProps} direction=\"prev\" size={size} />\n        ),\n        [size],\n    );\n\n    const renderNextButton = useCallback(\n        (buttonProps: ICarouselExtendedButtonProvideProps) => (\n            <StepperScrollButton {...buttonProps} direction=\"next\" size={size} />\n        ),\n        [size],\n    );\n\n    useEffect(() => {\n        const carouselNode = carouselRef.current;\n\n        if (carouselNode === null) {\n            return;\n        }\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            setScrollStep(entries[0].contentRect.width * SCROLL_STEP_RATIO);\n        });\n\n        resizeObserver.observe(carouselNode);\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, []);\n\n    useEffect(() => {\n        if (!selectedStepId) {\n            return;\n        }\n\n        const carousel = carouselRef.current;\n        const step = stepRefs.current[selectedStepId];\n\n        if (carousel && step) {\n            alignStep(carousel, step);\n        }\n    }, [selectedStepId]);\n\n    /** Запоминает узел шага, чтобы подвести его в видимую область при выборе. */\n    const setStepRef = (id: string) => (instance: HTMLLIElement | null) => {\n        if (instance === null) {\n            delete stepRefs.current[id];\n        } else {\n            stepRefs.current[id] = instance;\n        }\n    };\n\n    return (\n        <CarouselExtended\n            className={clsx(styles.stepperCarousel, sizeToClassNameMap[size], className)}\n            buttonPrev={renderPrevButton}\n            buttonNext={renderNextButton}\n            stepPrev={scrollStep}\n            stepNext={scrollStep}\n            ref={carouselRef}\n        >\n            <StepperExtended selectedStepId={selectedStepId} size={size} {...restProps}>\n                {steps.map(({ label, ...step }, index) => (\n                    <StepperExtended.Step\n                        key={step.id}\n                        forwardedRef={setStepRef(step.id)}\n                        {...step}\n                        isInActiveStep={index > selectedIndex}\n                    >\n                        {label}\n                    </StepperExtended.Step>\n                ))}\n            </StepperExtended>\n        </CarouselExtended>\n    );\n};\n\nStepper.Step = StepperStep;\n"],"names":[],"mappings":"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"}

package/components/Stepper/StepperExtended.js

@@ -1,30 +1,51 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { c as clsx } from "../../chunks/vendor-DqjKLGwf.js";
+import React__default, { useMemo, useCallback } from "react";
+import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { StepperStep } from "./StepperStep.js";
 import { StepperExtendedContext } from "./StepperExtendedContext.js";
+import { setForwardedRef } from "../../helpers/setForwardedRef.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
-const stepperExtended = "stepperExtended__aa16ad5d";
+const stepperExtended = "stepperExtended__e43fa57a";
 const styles = {
   stepperExtended
 };
-const StepperExtended = ({
-  children,
-  className,
-  size = EComponentSize.LG,
-  onSelectStep,
-  selectedStepId,
-  forwardedRef,
-  ...rest
-}) => {
-  const classNames = clsx(styles.stepperExtended, className);
-  const contextValue = useMemo(
-    () => ({ selectedId: selectedStepId, size, onSelectStep }),
-    [selectedStepId, size, onSelectStep]
-  );
-  return /* @__PURE__ */ jsx(StepperExtendedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("ol", { className: classNames, role: "tablist", ...rest, ref: forwardedRef, children }) });
-};
-StepperExtended.Step = StepperStep;
+const StepperExtendedRoot = React__default.forwardRef(
+  ({
+    children,
+    className,
+    size = EComponentSize.MD,
+    onSelectStep,
+    selectedStepId,
+    forwardedRef,
+    ...htmlOlAttributes
+  }, ref) => {
+    const contextValue = useMemo(
+      () => ({ selectedId: selectedStepId, size, onSelectStep }),
+      [selectedStepId, size, onSelectStep]
+    );
+    const setRef = useCallback(
+      (instance) => {
+        setForwardedRef(ref, instance);
+        setForwardedRef(forwardedRef, instance);
+      },
+      [ref, forwardedRef]
+    );
+    return /* @__PURE__ */ jsx(StepperExtendedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: clsx(styles.stepperExtended, className),
+        role: "tablist",
+        ...htmlOlAttributes,
+        ref: setRef,
+        children
+      }
+    ) });
+  }
+);
+StepperExtendedRoot.displayName = "StepperExtended";
+const StepperExtended = Object.assign(StepperExtendedRoot, {
+  Step: StepperStep
+});
 export {
   StepperExtended
 };

package/components/Stepper/StepperExtended.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperExtended.js","sources":["../../../src/components/Stepper/StepperExtended.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { StepperStep } from \"./StepperStep\";\nimport { StepperExtendedContext } from \"./StepperExtendedContext\";\nimport { IStepperExtendedProps } from \"./types\";\nimport { EComponentSize } from \"../../enums\";\nimport styles from \"./styles/StepperExtended.module.less\";\n\n/** Внутренние составляющие StepperExtended. */\ninterface IStepperExtendedComposition {\n    Step: typeof StepperStep;\n}\n\n/** Компонент StepperExtended, расширенная версия Stepper. */\nexport const StepperExtended: React.FC<IStepperExtendedProps> & IStepperExtendedComposition = ({\n    children,\n    className,\n    size = EComponentSize.LG,\n    onSelectStep,\n    selectedStepId,\n    forwardedRef,\n    ...rest\n}) => {\n    const classNames = clsx(styles.stepperExtended, className);\n\n    const contextValue = useMemo(\n        () => ({ selectedId: selectedStepId, size, onSelectStep }),\n        [selectedStepId, size, onSelectStep],\n    );\n\n    return (\n        <StepperExtendedContext.Provider value={contextValue}>\n            <ol className={classNames} role=\"tablist\" {...rest} ref={forwardedRef}>\n                {children}\n            </ol>\n        </StepperExtendedContext.Provider>\n    );\n};\n\nStepperExtended.Step = StepperStep;\n"],"names":[],"mappings":";;;;;;;;;;AAcO,MAAM,kBAAiF,CAAC;AAAA,EAC3F;AAAA,EACA;AAAA,EACA,OAAO,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,aAAa,KAAK,OAAO,iBAAiB,SAAS;AAEzD,QAAM,eAAe;AAAA,IACjB,OAAO,EAAE,YAAY,gBAAgB,MAAM,aAAA;AAAA,IAC3C,CAAC,gBAAgB,MAAM,YAAY;AAAA,EAAA;AAGvC,6BACK,uBAAuB,UAAvB,EAAgC,OAAO,cACpC,UAAA,oBAAC,MAAA,EAAG,WAAW,YAAY,MAAK,WAAW,GAAG,MAAM,KAAK,cACpD,UACL,GACJ;AAER;AAEA,gBAAgB,OAAO;"}
+{"version":3,"file":"StepperExtended.js","sources":["../../../src/components/Stepper/StepperExtended.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { StepperStep } from \"./StepperStep\";\nimport { StepperExtendedContext } from \"./StepperExtendedContext\";\nimport { IStepperExtendedProps } from \"./types\";\nimport { setForwardedRef } from \"../../helpers/setForwardedRef\";\nimport { EComponentSize } from \"../../enums\";\nimport styles from \"./styles/StepperExtended.module.less\";\n\n/** Внутренние составляющие StepperExtended. */\ninterface IStepperExtendedComposition {\n    Step: typeof StepperStep;\n}\n\nconst StepperExtendedRoot = React.forwardRef<HTMLOListElement, IStepperExtendedProps>(\n    (\n        {\n            children,\n            className,\n            size = EComponentSize.MD,\n            onSelectStep,\n            selectedStepId,\n            forwardedRef,\n            ...htmlOlAttributes\n        },\n        ref,\n    ) => {\n        const contextValue = useMemo(\n            () => ({ selectedId: selectedStepId, size, onSelectStep }),\n            [selectedStepId, size, onSelectStep],\n        );\n\n        // Компонент поддерживает и ref, и исторический prop forwardedRef — оба указывают на один и тот же <ol>.\n        const setRef = useCallback(\n            (instance: HTMLOListElement | null) => {\n                setForwardedRef(ref, instance);\n                setForwardedRef(forwardedRef, instance);\n            },\n            [ref, forwardedRef],\n        );\n\n        return (\n            <StepperExtendedContext.Provider value={contextValue}>\n                <ol\n                    className={clsx(styles.stepperExtended, className)}\n                    role=\"tablist\"\n                    {...htmlOlAttributes}\n                    ref={setRef}\n                >\n                    {children}\n                </ol>\n            </StepperExtendedContext.Provider>\n        );\n    },\n);\n\nStepperExtendedRoot.displayName = \"StepperExtended\";\n\n/**\n * Компонент StepperExtended, базовый степпер: список шагов без карусели и кнопок прокрутки.\n * Шаги потребитель передаёт сам через `StepperExtended.Step`. Готовый вариант с прокруткой — `Stepper`.\n */\n// Тип объявлен явно: без аннотации declaration emit падает с TS4023 — выведенный тип\n// сослался бы на внутренний интерфейс композиции из StepperStep, который не экспортируется.\nexport const StepperExtended: React.ForwardRefExoticComponent<\n    IStepperExtendedProps & React.RefAttributes<HTMLOListElement>\n> &\n    IStepperExtendedComposition = Object.assign(StepperExtendedRoot, {\n    Step: StepperStep,\n} satisfies IStepperExtendedComposition);\n"],"names":["React"],"mappings":";;;;;;;;;;;AAcA,MAAM,sBAAsBA,eAAM;AAAA,EAC9B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,eAAe;AAAA,MACjB,OAAO,EAAE,YAAY,gBAAgB,MAAM,aAAA;AAAA,MAC3C,CAAC,gBAAgB,MAAM,YAAY;AAAA,IAAA;AAIvC,UAAM,SAAS;AAAA,MACX,CAAC,aAAsC;AACnC,wBAAgB,KAAK,QAAQ;AAC7B,wBAAgB,cAAc,QAAQ;AAAA,MAC1C;AAAA,MACA,CAAC,KAAK,YAAY;AAAA,IAAA;AAGtB,WACI,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,cACpC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,iBAAiB,SAAS;AAAA,QACjD,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,KAAK;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER;AACJ;AAEA,oBAAoB,cAAc;AAQ3B,MAAM,kBAGqB,OAAO,OAAO,qBAAqB;AAAA,EACjE,MAAM;AACV,CAAuC;"}

package/components/Stepper/StepperExtendedContext.js

@@ -1,7 +1,7 @@
 import React__default from "react";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 const StepperExtendedContext = React__default.createContext({
-  size: EComponentSize.LG,
+  size: EComponentSize.MD,
   selectedId: void 0,
   onSelectStep: () => {
   }