mimir-ui-kit 1.3.1 → 1.4.0

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

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup';
+export type { TRadioOption } from './RadioGroup';

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,4 @@
+import { RadioGroup } from "./RadioGroup.js";
+export {
+  RadioGroup
+};

package/dist/components/Slider/NavigationButtons/NavigationButtons.d.ts

@@ -0,0 +1 @@
+export declare const NavigationButtons: import('react').MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/components/Slider/NavigationButtons/NavigationButtons.js

@@ -0,0 +1,7 @@
+import "react/jsx-runtime";
+import "react";
+import { N } from "../../../NavigationButtons-B8tMfqrg.js";
+import "../../MergedButton/MergedButton.js";
+export {
+  N as NavigationButtons
+};

package/dist/components/Slider/NavigationButtons/index.d.ts

@@ -0,0 +1 @@
+export { NavigationButtons } from './NavigationButtons';

package/dist/components/Slider/NavigationButtons/index.js

@@ -0,0 +1,4 @@
+import { N } from "../../../NavigationButtons-B8tMfqrg.js";
+export {
+  N as NavigationButtons
+};

package/dist/components/Slider/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1 @@
+export declare const ProgressBar: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>>;

package/dist/components/Slider/ProgressBar/ProgressBar.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef } from "react";
+import '../../../assets/ProgressBar.css';const progress = "_progress_1bn16_2";
+const cls = {
+  progress,
+  "progress-bar": "_progress-bar_1bn16_10"
+};
+const ProgressBar = memo(
+  forwardRef((_, ref) => {
+    return /* @__PURE__ */ jsx("div", { className: cls.progress, children: /* @__PURE__ */ jsx("div", { ref, className: cls["progress-bar"] }) });
+  })
+);
+export {
+  ProgressBar
+};

package/dist/components/Slider/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export { ProgressBar } from './ProgressBar';

package/dist/components/Slider/ProgressBar/index.js

@@ -0,0 +1,4 @@
+import { ProgressBar } from "./ProgressBar.js";
+export {
+  ProgressBar
+};

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,32 @@
+
+type TProps = {
+    /**
+     * Задержка перехода между слайдами
+     */
+    delay?: number;
+    /**
+     * Дополнительные классы для слайдов
+     */
+    slideClassName?: string;
+    /**
+     * Дополнительные классы для слайдера
+     */
+    swiperClassName?: string;
+    /**
+     * Дополнительные классы для картинок
+     */
+    imageClassName?: string;
+    /**
+     * Массив данных для отрисовки слайдов.
+     */
+    images?: {
+        image?: string;
+        url?: string;
+        id?: number;
+    }[];
+};
+/**
+ * Компонент слайдера c прогресс баром.
+ */
+export declare const Slider: ({ images, swiperClassName, slideClassName, imageClassName, delay }: TProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Slider/Slider.js

@@ -0,0 +1,417 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from "react";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { g as getDocument, S as Swiper, N as NavigationButtons, a as SwiperSlide } from "../../NavigationButtons-B8tMfqrg.js";
+import { ProgressBar } from "./ProgressBar/ProgressBar.js";
+import { AppImage } from "../Image/Image.js";
+import '../../assets/Slider.css';function Autoplay(_ref) {
+  let {
+    swiper: swiper2,
+    extendParams,
+    on,
+    emit,
+    params
+  } = _ref;
+  swiper2.autoplay = {
+    running: false,
+    paused: false,
+    timeLeft: 0
+  };
+  extendParams({
+    autoplay: {
+      enabled: false,
+      delay: 3e3,
+      waitForTransition: true,
+      disableOnInteraction: false,
+      stopOnLastSlide: false,
+      reverseDirection: false,
+      pauseOnMouseEnter: false
+    }
+  });
+  let timeout;
+  let raf;
+  let autoplayDelayTotal = params && params.autoplay ? params.autoplay.delay : 3e3;
+  let autoplayDelayCurrent = params && params.autoplay ? params.autoplay.delay : 3e3;
+  let autoplayTimeLeft;
+  let autoplayStartTime = (/* @__PURE__ */ new Date()).getTime();
+  let wasPaused;
+  let isTouched;
+  let pausedByTouch;
+  let touchStartTimeout;
+  let slideChanged;
+  let pausedByInteraction;
+  let pausedByPointerEnter;
+  function onTransitionEnd(e) {
+    if (!swiper2 || swiper2.destroyed || !swiper2.wrapperEl) return;
+    if (e.target !== swiper2.wrapperEl) return;
+    swiper2.wrapperEl.removeEventListener("transitionend", onTransitionEnd);
+    if (pausedByPointerEnter || e.detail && e.detail.bySwiperTouchMove) {
+      return;
+    }
+    resume();
+  }
+  const calcTimeLeft = () => {
+    if (swiper2.destroyed || !swiper2.autoplay.running) return;
+    if (swiper2.autoplay.paused) {
+      wasPaused = true;
+    } else if (wasPaused) {
+      autoplayDelayCurrent = autoplayTimeLeft;
+      wasPaused = false;
+    }
+    const timeLeft = swiper2.autoplay.paused ? autoplayTimeLeft : autoplayStartTime + autoplayDelayCurrent - (/* @__PURE__ */ new Date()).getTime();
+    swiper2.autoplay.timeLeft = timeLeft;
+    emit("autoplayTimeLeft", timeLeft, timeLeft / autoplayDelayTotal);
+    raf = requestAnimationFrame(() => {
+      calcTimeLeft();
+    });
+  };
+  const getSlideDelay = () => {
+    let activeSlideEl;
+    if (swiper2.virtual && swiper2.params.virtual.enabled) {
+      activeSlideEl = swiper2.slides.filter((slideEl) => slideEl.classList.contains("swiper-slide-active"))[0];
+    } else {
+      activeSlideEl = swiper2.slides[swiper2.activeIndex];
+    }
+    if (!activeSlideEl) return void 0;
+    const currentSlideDelay = parseInt(activeSlideEl.getAttribute("data-swiper-autoplay"), 10);
+    return currentSlideDelay;
+  };
+  const run = (delayForce) => {
+    if (swiper2.destroyed || !swiper2.autoplay.running) return;
+    cancelAnimationFrame(raf);
+    calcTimeLeft();
+    let delay = typeof delayForce === "undefined" ? swiper2.params.autoplay.delay : delayForce;
+    autoplayDelayTotal = swiper2.params.autoplay.delay;
+    autoplayDelayCurrent = swiper2.params.autoplay.delay;
+    const currentSlideDelay = getSlideDelay();
+    if (!Number.isNaN(currentSlideDelay) && currentSlideDelay > 0 && typeof delayForce === "undefined") {
+      delay = currentSlideDelay;
+      autoplayDelayTotal = currentSlideDelay;
+      autoplayDelayCurrent = currentSlideDelay;
+    }
+    autoplayTimeLeft = delay;
+    const speed = swiper2.params.speed;
+    const proceed = () => {
+      if (!swiper2 || swiper2.destroyed) return;
+      if (swiper2.params.autoplay.reverseDirection) {
+        if (!swiper2.isBeginning || swiper2.params.loop || swiper2.params.rewind) {
+          swiper2.slidePrev(speed, true, true);
+          emit("autoplay");
+        } else if (!swiper2.params.autoplay.stopOnLastSlide) {
+          swiper2.slideTo(swiper2.slides.length - 1, speed, true, true);
+          emit("autoplay");
+        }
+      } else {
+        if (!swiper2.isEnd || swiper2.params.loop || swiper2.params.rewind) {
+          swiper2.slideNext(speed, true, true);
+          emit("autoplay");
+        } else if (!swiper2.params.autoplay.stopOnLastSlide) {
+          swiper2.slideTo(0, speed, true, true);
+          emit("autoplay");
+        }
+      }
+      if (swiper2.params.cssMode) {
+        autoplayStartTime = (/* @__PURE__ */ new Date()).getTime();
+        requestAnimationFrame(() => {
+          run();
+        });
+      }
+    };
+    if (delay > 0) {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        proceed();
+      }, delay);
+    } else {
+      requestAnimationFrame(() => {
+        proceed();
+      });
+    }
+    return delay;
+  };
+  const start = () => {
+    autoplayStartTime = (/* @__PURE__ */ new Date()).getTime();
+    swiper2.autoplay.running = true;
+    run();
+    emit("autoplayStart");
+  };
+  const stop = () => {
+    swiper2.autoplay.running = false;
+    clearTimeout(timeout);
+    cancelAnimationFrame(raf);
+    emit("autoplayStop");
+  };
+  const pause = (internal, reset) => {
+    if (swiper2.destroyed || !swiper2.autoplay.running) return;
+    clearTimeout(timeout);
+    if (!internal) {
+      pausedByInteraction = true;
+    }
+    const proceed = () => {
+      emit("autoplayPause");
+      if (swiper2.params.autoplay.waitForTransition) {
+        swiper2.wrapperEl.addEventListener("transitionend", onTransitionEnd);
+      } else {
+        resume();
+      }
+    };
+    swiper2.autoplay.paused = true;
+    if (reset) {
+      if (slideChanged) {
+        autoplayTimeLeft = swiper2.params.autoplay.delay;
+      }
+      slideChanged = false;
+      proceed();
+      return;
+    }
+    const delay = autoplayTimeLeft || swiper2.params.autoplay.delay;
+    autoplayTimeLeft = delay - ((/* @__PURE__ */ new Date()).getTime() - autoplayStartTime);
+    if (swiper2.isEnd && autoplayTimeLeft < 0 && !swiper2.params.loop) return;
+    if (autoplayTimeLeft < 0) autoplayTimeLeft = 0;
+    proceed();
+  };
+  const resume = () => {
+    if (swiper2.isEnd && autoplayTimeLeft < 0 && !swiper2.params.loop || swiper2.destroyed || !swiper2.autoplay.running) return;
+    autoplayStartTime = (/* @__PURE__ */ new Date()).getTime();
+    if (pausedByInteraction) {
+      pausedByInteraction = false;
+      run(autoplayTimeLeft);
+    } else {
+      run();
+    }
+    swiper2.autoplay.paused = false;
+    emit("autoplayResume");
+  };
+  const onVisibilityChange = () => {
+    if (swiper2.destroyed || !swiper2.autoplay.running) return;
+    const document = getDocument();
+    if (document.visibilityState === "hidden") {
+      pausedByInteraction = true;
+      pause(true);
+    }
+    if (document.visibilityState === "visible") {
+      resume();
+    }
+  };
+  const onPointerEnter = (e) => {
+    if (e.pointerType !== "mouse") return;
+    pausedByInteraction = true;
+    pausedByPointerEnter = true;
+    if (swiper2.animating || swiper2.autoplay.paused) return;
+    pause(true);
+  };
+  const onPointerLeave = (e) => {
+    if (e.pointerType !== "mouse") return;
+    pausedByPointerEnter = false;
+    if (swiper2.autoplay.paused) {
+      resume();
+    }
+  };
+  const attachMouseEvents = () => {
+    if (swiper2.params.autoplay.pauseOnMouseEnter) {
+      swiper2.el.addEventListener("pointerenter", onPointerEnter);
+      swiper2.el.addEventListener("pointerleave", onPointerLeave);
+    }
+  };
+  const detachMouseEvents = () => {
+    if (swiper2.el && typeof swiper2.el !== "string") {
+      swiper2.el.removeEventListener("pointerenter", onPointerEnter);
+      swiper2.el.removeEventListener("pointerleave", onPointerLeave);
+    }
+  };
+  const attachDocumentEvents = () => {
+    const document = getDocument();
+    document.addEventListener("visibilitychange", onVisibilityChange);
+  };
+  const detachDocumentEvents = () => {
+    const document = getDocument();
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+  };
+  on("init", () => {
+    if (swiper2.params.autoplay.enabled) {
+      attachMouseEvents();
+      attachDocumentEvents();
+      start();
+    }
+  });
+  on("destroy", () => {
+    detachMouseEvents();
+    detachDocumentEvents();
+    if (swiper2.autoplay.running) {
+      stop();
+    }
+  });
+  on("_freeModeStaticRelease", () => {
+    if (pausedByTouch || pausedByInteraction) {
+      resume();
+    }
+  });
+  on("_freeModeNoMomentumRelease", () => {
+    if (!swiper2.params.autoplay.disableOnInteraction) {
+      pause(true, true);
+    } else {
+      stop();
+    }
+  });
+  on("beforeTransitionStart", (_s, speed, internal) => {
+    if (swiper2.destroyed || !swiper2.autoplay.running) return;
+    if (internal || !swiper2.params.autoplay.disableOnInteraction) {
+      pause(true, true);
+    } else {
+      stop();
+    }
+  });
+  on("sliderFirstMove", () => {
+    if (swiper2.destroyed || !swiper2.autoplay.running) return;
+    if (swiper2.params.autoplay.disableOnInteraction) {
+      stop();
+      return;
+    }
+    isTouched = true;
+    pausedByTouch = false;
+    pausedByInteraction = false;
+    touchStartTimeout = setTimeout(() => {
+      pausedByInteraction = true;
+      pausedByTouch = true;
+      pause(true);
+    }, 200);
+  });
+  on("touchEnd", () => {
+    if (swiper2.destroyed || !swiper2.autoplay.running || !isTouched) return;
+    clearTimeout(touchStartTimeout);
+    clearTimeout(timeout);
+    if (swiper2.params.autoplay.disableOnInteraction) {
+      pausedByTouch = false;
+      isTouched = false;
+      return;
+    }
+    if (pausedByTouch && swiper2.params.cssMode) resume();
+    pausedByTouch = false;
+    isTouched = false;
+  });
+  on("slideChange", () => {
+    if (swiper2.destroyed || !swiper2.autoplay.running) return;
+    slideChanged = true;
+  });
+  Object.assign(swiper2.autoplay, {
+    start,
+    stop,
+    pause,
+    resume
+  });
+}
+const swiper = "_swiper_1jb8j_3";
+const slide = "_slide_1jb8j_9";
+const link = "_link_1jb8j_16";
+const image = "_image_1jb8j_22";
+const navigation = "_navigation_1jb8j_29";
+const pagination = "_pagination_1jb8j_39";
+const slides = "_slides_1jb8j_54";
+const separator = "_separator_1jb8j_60";
+const cls = {
+  swiper,
+  slide,
+  link,
+  image,
+  navigation,
+  pagination,
+  slides,
+  separator
+};
+const Slider = ({
+  images,
+  swiperClassName,
+  slideClassName,
+  imageClassName,
+  delay = 3e3
+}) => {
+  const progressBar = useRef(null);
+  const swiperRef = useRef(null);
+  const [currentSlide, setCurrentSlide] = useState(1);
+  const currSlide = `0${currentSlide}`;
+  const totalSlides = `0${(images == null ? void 0 : images.length) ?? 0}`;
+  const handleSlideChange = useCallback(() => {
+    if (swiperRef.current) {
+      const swiper2 = swiperRef.current.swiper;
+      setCurrentSlide(swiper2.realIndex + 1);
+    }
+  }, []);
+  const onAutoplayTimeLeft = useCallback(
+    (swiper2, time) => {
+      if (progressBar.current) {
+        const totalTime = swiper2.params.autoplay.delay;
+        const progressPercent = time / totalTime * 100;
+        progressBar.current.style.width = `${100 - progressPercent}%`;
+      }
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs(
+    Swiper,
+    {
+      ref: swiperRef,
+      className: classNames(cls.swiper, swiperClassName),
+      loop: true,
+      centeredSlides: true,
+      autoplay: {
+        delay,
+        disableOnInteraction: false
+      },
+      fadeEffect: {
+        crossFade: true
+      },
+      modules: [Autoplay],
+      onAutoplayTimeLeft,
+      onSlideChange: handleSlideChange,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cls.navigation, slot: "container-start", children: [
+          /* @__PURE__ */ jsxs("div", { className: cls.pagination, children: [
+            /* @__PURE__ */ jsxs("h2", { className: cls.slides, children: [
+              currSlide,
+              /* @__PURE__ */ jsx("span", { className: cls.separator }),
+              totalSlides
+            ] }),
+            /* @__PURE__ */ jsx(NavigationButtons, {})
+          ] }),
+          /* @__PURE__ */ jsx(ProgressBar, { ref: progressBar })
+        ] }),
+        images == null ? void 0 : images.map((img) => {
+          if (!img) return null;
+          const linkSlide = /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: cls.link,
+              href: img.url,
+              rel: "noopener noreferrer",
+              target: "_blank",
+              children: /* @__PURE__ */ jsx(
+                AppImage,
+                {
+                  className: classNames(cls.image, imageClassName),
+                  src: img.image
+                }
+              )
+            }
+          );
+          return /* @__PURE__ */ jsx(
+            SwiperSlide,
+            {
+              className: classNames(cls.slide, slideClassName),
+              children: img.url ? linkSlide : /* @__PURE__ */ jsx(
+                AppImage,
+                {
+                  className: classNames(cls.image, imageClassName),
+                  src: img.image
+                }
+              )
+            },
+            img.id
+          );
+        })
+      ]
+    }
+  );
+};
+export {
+  Slider
+};

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

@@ -0,0 +1 @@
+export { Slider } from './Slider';

package/dist/components/Slider/index.js

@@ -0,0 +1,4 @@
+import { Slider } from "./Slider.js";
+export {
+  Slider
+};

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

@@ -0,0 +1,79 @@
+import { EStepsPrimaryColor, EStepsSecondaryColor } from './constants';
+import { TCommonStepProps } from './types';
+
+export type TProps = TCommonStepProps & {
+    /**
+     * Класс, применяемый к корневому элементу
+     */
+    rootClassName?: string;
+    /**
+     * Класс, применяемый к шагам
+     */
+    stepClassName?: string;
+    /**
+     * Количество шагов.
+     */
+    quantity: number;
+    /**
+     * Текущий шаг
+     */
+    current?: number;
+    /**
+     * Есть ли возможность переключать шаги по клику
+     */
+    editable?: boolean;
+    /**
+     * Обработчик клика на шаг
+     */
+    onClick?: (step: number) => void;
+    /**
+     * Отключено / включено взаимодействие с шагами
+     */
+    disabled?: boolean;
+    /**
+     * Цвет пройденных шагов
+     */
+    primaryColor?: EStepsPrimaryColor;
+    /**
+     * Цвет оставшихся шагов
+     */
+    secondaryColor?: EStepsSecondaryColor;
+};
+export declare const Steps: import('react').ForwardRefExoticComponent<TCommonStepProps & {
+    /**
+     * Класс, применяемый к корневому элементу
+     */
+    rootClassName?: string;
+    /**
+     * Класс, применяемый к шагам
+     */
+    stepClassName?: string;
+    /**
+     * Количество шагов.
+     */
+    quantity: number;
+    /**
+     * Текущий шаг
+     */
+    current?: number;
+    /**
+     * Есть ли возможность переключать шаги по клику
+     */
+    editable?: boolean;
+    /**
+     * Обработчик клика на шаг
+     */
+    onClick?: (step: number) => void;
+    /**
+     * Отключено / включено взаимодействие с шагами
+     */
+    disabled?: boolean;
+    /**
+     * Цвет пройденных шагов
+     */
+    primaryColor?: EStepsPrimaryColor;
+    /**
+     * Цвет оставшихся шагов
+     */
+    secondaryColor?: EStepsSecondaryColor;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Steps/Steps.js

@@ -0,0 +1,94 @@
+import { jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef, useId, useState, useEffect } from "react";
+import { ZERO_STEP, EStepsSize, EStepsPrimaryColor, ID_SEPARATOR, EStepsColorType, 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";
+const cls = {
+  container,
+  step,
+  editable,
+  PRIMARY,
+  GRAY,
+  CITRINE,
+  SAPPHIRE,
+  SECONDARY,
+  WHITE,
+  LIGHT_SAPPHIRE,
+  LIGHT_GRAY,
+  disabled
+};
+const Steps = forwardRef(
+  (props, ref) => {
+    const {
+      rootClassName,
+      stepClassName,
+      quantity,
+      current = ZERO_STEP,
+      editable: editable2 = false,
+      size = EStepsSize.M,
+      onClick,
+      disabled: disabled2 = false,
+      primaryColor = EStepsPrimaryColor.CITRINE,
+      secondaryColor = EStepsPrimaryColor.GRAY
+    } = props;
+    const idPrefix = useId();
+    const [step2, setStep] = useState(current);
+    const [hoveredStep, setHoveredStep] = useState(null);
+    useEffect(() => {
+      setStep(current);
+    }, [current]);
+    useEffect(() => {
+      onClick && onClick(step2);
+    }, [onClick, step2]);
+    const handleClick = (idx) => {
+      const clickedStep = idx + DIFF_BETWEEN_STEP_AND_INDEX;
+      setStep(clickedStep !== step2 ? clickedStep : ZERO_STEP);
+    };
+    const handleMouseEnter = (evt) => {
+      const hoveredIdx = Number(evt.currentTarget.id.split(ID_SEPARATOR)[1]);
+      setHoveredStep(hoveredIdx);
+    };
+    const handleMouseLeave = () => {
+      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);
+      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
+          }),
+          onClick: () => handleClick(idx),
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          children: /* @__PURE__ */ jsx(Icon, { iconName: "Step", ...StepSize[size] })
+        },
+        idx
+      );
+    });
+    return /* @__PURE__ */ jsx("div", { className: classNames(cls.container, rootClassName), ref, children: buttons });
+  }
+);
+export {
+  Steps
+};