mimir-ui-kit 1.14.0 → 1.14.2

package/dist/components/TabTrail/TabTrail.js

@@ -0,0 +1,282 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import * as React from "react";
+import React__default, { useRef, useState, createContext, useReducer, useMemo, useId, useContext, forwardRef, useEffect } from "react";
+import { ETabTrailSize } from "./constants.js";
+import { TabButtons } from "./TabButtons/TabButtons.js";
+import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
+import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
+import { n, M, W, s as s$3, y, o, H, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D, a as u, u as u$1, c as o$1, t } from "../../keyboard-B256ZoM-.js";
+import { w } from "../../use-active-press-B6yeSopF.js";
+import { T as T$1 } from "../../use-resolve-button-type-B6LE6gU3.js";
+import { T, s as s$2 } from "../../hidden-BuVoeHNy.js";
+import { _, T as T$2, P, F } from "../../focus-management-1rQPII7Z.js";
+import '../../assets/TabTrail.css';function f$1() {
+  let e = useRef(false);
+  return n(() => (e.current = true, () => {
+    e.current = false;
+  }), []), e;
+}
+function b({ onFocus: n2 }) {
+  let [r, o2] = useState(true), u2 = f$1();
+  return r ? React__default.createElement(T, { as: "button", type: "button", features: s$2.Focusable, onFocus: (a2) => {
+    a2.preventDefault();
+    let e, i = 50;
+    function t2() {
+      if (i-- <= 0) {
+        e && cancelAnimationFrame(e);
+        return;
+      }
+      if (n2()) {
+        if (cancelAnimationFrame(e), !u2.current) return;
+        o2(false);
+        return;
+      }
+      e = requestAnimationFrame(t2);
+    }
+    e = requestAnimationFrame(t2);
+  } }) : null;
+}
+const s$1 = React.createContext(null);
+function a() {
+  return { groups: /* @__PURE__ */ new Map(), get(o2, e) {
+    var i;
+    let t2 = this.groups.get(o2);
+    t2 || (t2 = /* @__PURE__ */ new Map(), this.groups.set(o2, t2));
+    let n2 = (i = t2.get(e)) != null ? i : 0;
+    t2.set(e, n2 + 1);
+    let r = Array.from(t2.keys()).indexOf(e);
+    function u2() {
+      let c = t2.get(e);
+      c > 1 ? t2.set(e, c - 1) : t2.delete(e);
+    }
+    return [r, u2];
+  } };
+}
+function f({ children: o2 }) {
+  let e = React.useRef(a());
+  return React.createElement(s$1.Provider, { value: e }, o2);
+}
+function C$1(o2) {
+  let e = React.useContext(s$1);
+  if (!e) throw new Error("You must wrap your component in a <StableCollection>");
+  let t2 = React.useId(), [n2, r] = e.current.get(o2, t2);
+  return React.useEffect(() => r, []), n2;
+}
+var Ae = ((t2) => (t2[t2.Forwards = 0] = "Forwards", t2[t2.Backwards = 1] = "Backwards", t2))(Ae || {}), Ee = ((o2) => (o2[o2.Less = -1] = "Less", o2[o2.Equal = 0] = "Equal", o2[o2.Greater = 1] = "Greater", o2))(Ee || {}), Re = ((n2) => (n2[n2.SetSelectedIndex = 0] = "SetSelectedIndex", n2[n2.RegisterTab = 1] = "RegisterTab", n2[n2.UnregisterTab = 2] = "UnregisterTab", n2[n2.RegisterPanel = 3] = "RegisterPanel", n2[n2.UnregisterPanel = 4] = "UnregisterPanel", n2))(Re || {});
+let Le = { [0](e, r) {
+  var c;
+  let t2 = _(e.tabs, (T2) => T2.current), o2 = _(e.panels, (T2) => T2.current), a2 = t2.filter((T2) => {
+    var d;
+    return !((d = T2.current) != null && d.hasAttribute("disabled"));
+  }), n2 = { ...e, tabs: t2, panels: o2 };
+  if (r.index < 0 || r.index > t2.length - 1) {
+    let T2 = u(Math.sign(r.index - e.selectedIndex), { [-1]: () => 1, [0]: () => u(Math.sign(r.index), { [-1]: () => 0, [0]: () => 0, [1]: () => 1 }), [1]: () => 0 });
+    if (a2.length === 0) return n2;
+    let d = u(T2, { [0]: () => t2.indexOf(a2[0]), [1]: () => t2.indexOf(a2[a2.length - 1]) });
+    return { ...n2, selectedIndex: d === -1 ? e.selectedIndex : d };
+  }
+  let u$12 = t2.slice(0, r.index), x = [...t2.slice(r.index), ...u$12].find((T2) => a2.includes(T2));
+  if (!x) return n2;
+  let f2 = (c = t2.indexOf(x)) != null ? c : e.selectedIndex;
+  return f2 === -1 && (f2 = e.selectedIndex), { ...n2, selectedIndex: f2 };
+}, [1](e, r) {
+  if (e.tabs.includes(r.tab)) return e;
+  let t2 = e.tabs[e.selectedIndex], o2 = _([...e.tabs, r.tab], (n2) => n2.current), a2 = e.selectedIndex;
+  return e.info.current.isControlled || (a2 = o2.indexOf(t2), a2 === -1 && (a2 = e.selectedIndex)), { ...e, tabs: o2, selectedIndex: a2 };
+}, [2](e, r) {
+  return { ...e, tabs: e.tabs.filter((t2) => t2 !== r.tab) };
+}, [3](e, r) {
+  return e.panels.includes(r.panel) ? e : { ...e, panels: _([...e.panels, r.panel], (t2) => t2.current) };
+}, [4](e, r) {
+  return { ...e, panels: e.panels.filter((t2) => t2 !== r.panel) };
+} }, z = createContext(null);
+z.displayName = "TabsDataContext";
+function C(e) {
+  let r = useContext(z);
+  if (r === null) {
+    let t2 = new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(t2, C), t2;
+  }
+  return r;
+}
+let V = createContext(null);
+V.displayName = "TabsActionsContext";
+function Q(e) {
+  let r = useContext(V);
+  if (r === null) {
+    let t2 = new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(t2, Q), t2;
+  }
+  return r;
+}
+function _e(e, r) {
+  return u(r.type, Le, e, r);
+}
+let De = "div";
+function Se(e, r) {
+  let { defaultIndex: t2 = 0, vertical: o$12 = false, manual: a2 = false, onChange: n$1, selectedIndex: u2 = null, ..._$1 } = e;
+  const x = o$12 ? "vertical" : "horizontal", f$12 = a2 ? "manual" : "auto";
+  let c = u2 !== null, T2 = s$3({ isControlled: c }), d = y(r), [i, s2] = useReducer(_e, { info: T2, selectedIndex: u2 != null ? u2 : t2, tabs: [], panels: [] }), F2 = useMemo(() => ({ selectedIndex: i.selectedIndex }), [i.selectedIndex]), M2 = s$3(n$1 || (() => {
+  })), b$1 = s$3(i.tabs), m2 = useMemo(() => ({ orientation: x, activation: f$12, ...i }), [x, f$12, i]), E = o((p) => (s2({ type: 1, tab: p }), () => s2({ type: 2, tab: p }))), I = o((p) => (s2({ type: 3, panel: p }), () => s2({ type: 4, panel: p }))), g = o((p) => {
+    R.current !== p && M2.current(p), c || s2({ type: 0, index: p });
+  }), R = s$3(c ? e.selectedIndex : i.selectedIndex), J = useMemo(() => ({ registerTab: E, registerPanel: I, change: g }), []);
+  n(() => {
+    s2({ type: 0, index: u2 != null ? u2 : t2 });
+  }, [u2]), n(() => {
+    if (R.current === void 0 || i.tabs.length <= 0) return;
+    let p = _(i.tabs, (L) => L.current);
+    p.some((L, B) => i.tabs[B] !== L) && g(p.indexOf(i.tabs[R.current]));
+  });
+  let k = { ref: d };
+  return React__default.createElement(f, null, React__default.createElement(V.Provider, { value: J }, React__default.createElement(z.Provider, { value: m2 }, m2.tabs.length <= 0 && React__default.createElement(b, { onFocus: () => {
+    var p, h;
+    for (let L of b$1.current) if (((p = L.current) == null ? void 0 : p.tabIndex) === 0) return (h = L.current) == null || h.focus(), true;
+    return false;
+  } }), H({ ourProps: k, theirProps: _$1, slot: F2, defaultTag: De, name: "Tabs" }))));
+}
+let Fe = "div";
+function Ie(e, r) {
+  let { orientation: t2, selectedIndex: o2 } = C("Tab.List"), a2 = y(r), n2 = useMemo(() => ({ selectedIndex: o2 }), [o2]);
+  return H({ ourProps: { ref: a2, role: "tablist", "aria-orientation": t2 }, theirProps: e, slot: n2, defaultTag: Fe, name: "Tabs.List" });
+}
+let he = "button";
+function ve(e, r) {
+  var Y, Z;
+  let t$1 = useId(), { id: o$2 = `headlessui-tabs-tab-${t$1}`, disabled: a2 = false, autoFocus: n$1 = false, ...u$2 } = e, { orientation: _2, activation: x, selectedIndex: f2, tabs: c, panels: T2 } = C("Tab"), d = Q("Tab"), i = C("Tab"), s2 = useRef(null), F$1 = y(s2, r);
+  n(() => d.registerTab(s2), [d, s2]);
+  let M2 = C$1("tabs"), b2 = c.indexOf(s2);
+  b2 === -1 && (b2 = M2);
+  let m2 = b2 === f2, E = o((l) => {
+    var X;
+    let A = l();
+    if (A === T$2.Success && x === "auto") {
+      let $ = (X = u$1(s2)) == null ? void 0 : X.activeElement, ee = i.tabs.findIndex((Te) => Te.current === $);
+      ee !== -1 && d.change(ee);
+    }
+    return A;
+  }), I = o((l) => {
+    let A = c.map(($) => $.current).filter(Boolean);
+    if (l.key === o$1.Space || l.key === o$1.Enter) {
+      l.preventDefault(), l.stopPropagation(), d.change(b2);
+      return;
+    }
+    switch (l.key) {
+      case o$1.Home:
+      case o$1.PageUp:
+        return l.preventDefault(), l.stopPropagation(), E(() => P(A, F.First));
+      case o$1.End:
+      case o$1.PageDown:
+        return l.preventDefault(), l.stopPropagation(), E(() => P(A, F.Last));
+    }
+    if (E(() => u(_2, { vertical() {
+      return l.key === o$1.ArrowUp ? P(A, F.Previous | F.WrapAround) : l.key === o$1.ArrowDown ? P(A, F.Next | F.WrapAround) : T$2.Error;
+    }, horizontal() {
+      return l.key === o$1.ArrowLeft ? P(A, F.Previous | F.WrapAround) : l.key === o$1.ArrowRight ? P(A, F.Next | F.WrapAround) : T$2.Error;
+    } })) === T$2.Success) return l.preventDefault();
+  }), g = useRef(false), R = o(() => {
+    var l;
+    g.current || (g.current = true, (l = s2.current) == null || l.focus({ preventScroll: true }), d.change(b2), t(() => {
+      g.current = false;
+    }));
+  }), J = o((l) => {
+    l.preventDefault();
+  }), { isFocusVisible: k, focusProps: p } = $f7dceffc5ad7768b$export$4e328f61c538687f({ autoFocus: n$1 }), { isHovered: h, hoverProps: L } = $6179b936705e76d3$export$ae780daf29e6d456({ isDisabled: a2 }), { pressed: B, pressProps: ie } = w({ disabled: a2 }), pe = useMemo(() => ({ selected: m2, hover: h, active: B, focus: k, autofocus: n$1, disabled: a2 }), [m2, h, k, B, n$1, a2]), ue = D({ ref: F$1, onKeyDown: I, onMouseDown: J, onClick: R, id: o$2, role: "tab", type: T$1(e, s2), "aria-controls": (Z = (Y = T2[b2]) == null ? void 0 : Y.current) == null ? void 0 : Z.id, "aria-selected": m2, tabIndex: m2 ? 0 : -1, disabled: a2 || void 0, autoFocus: n$1 }, p, L, ie);
+  return H({ ourProps: ue, theirProps: u$2, slot: pe, defaultTag: he, name: "Tabs.Tab" });
+}
+let Ce = "div";
+function Me(e, r) {
+  let { selectedIndex: t2 } = C("Tab.Panels"), o2 = y(r), a2 = useMemo(() => ({ selectedIndex: t2 }), [t2]);
+  return H({ ourProps: { ref: o2 }, theirProps: e, slot: a2, defaultTag: Ce, name: "Tabs.Panels" });
+}
+let Ge = "div", Ue = M.RenderStrategy | M.Static;
+function He(e, r) {
+  var E, I, g, R;
+  let t2 = useId(), { id: o2 = `headlessui-tabs-panel-${t2}`, tabIndex: a2 = 0, ...n$1 } = e, { selectedIndex: u2, tabs: _2, panels: x } = C("Tab.Panel"), f2 = Q("Tab.Panel"), c = useRef(null), T$12 = y(c, r);
+  n(() => f2.registerPanel(c), [f2, c]);
+  let d = C$1("panels"), i = x.indexOf(c);
+  i === -1 && (i = d);
+  let s2 = i === u2, { isFocusVisible: F2, focusProps: M2 } = $f7dceffc5ad7768b$export$4e328f61c538687f(), b2 = useMemo(() => ({ selected: s2, focus: F2 }), [s2, F2]), m2 = D({ ref: T$12, id: o2, role: "tabpanel", "aria-labelledby": (I = (E = _2[i]) == null ? void 0 : E.current) == null ? void 0 : I.id, tabIndex: s2 ? a2 : -1 }, M2);
+  return !s2 && ((g = n$1.unmount) == null || g) && !((R = n$1.static) != null && R) ? React__default.createElement(T, { "aria-hidden": "true", ...m2 }) : H({ ourProps: m2, theirProps: n$1, slot: b2, defaultTag: Ge, features: Ue, visible: s2, name: "Tabs.Panel" });
+}
+let we = W(ve), Oe = W(Se), Ne = W(Ie), ke = W(Me), Be = W(He), st = Object.assign(we, { Group: Oe, List: Ne, Panels: ke, Panel: Be });
+const container = "_container_y23cb_2";
+const group = "_group_y23cb_6";
+const tab = "_tab_y23cb_15";
+const list = "_list_y23cb_30";
+const tabs = "_tabs_y23cb_41";
+const buttons = "_buttons_y23cb_45";
+const m = "_m_y23cb_52";
+const s = "_s_y23cb_57";
+const cls = {
+  container,
+  group,
+  "group-inner": "_group-inner_y23cb_10",
+  tab,
+  list,
+  tabs,
+  buttons,
+  m,
+  s
+};
+const TabTrail = forwardRef(
+  ({ categories, size = ETabTrailSize.M }, ref) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const tabListRef = useRef(null);
+    const isTablet = useMediaQuery(EMediaQuery.S);
+    const handleNext = () => {
+      setActiveIndex((prevIndex) => (prevIndex + 1) % categories.length);
+    };
+    const handlePrev = () => {
+      setActiveIndex(
+        (prevIndex) => (prevIndex - 1 + categories.length) % categories.length
+      );
+    };
+    useEffect(() => {
+      var _a;
+      const activeTab = (_a = tabListRef.current) == null ? void 0 : _a.querySelector(
+        `.${cls.tab}[data-active="true"]`
+      );
+      if (activeTab) {
+        activeTab.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "center"
+        });
+      }
+    }, [activeIndex]);
+    return /* @__PURE__ */ jsxs(
+      Oe,
+      {
+        ref,
+        className: classNames(cls.group, cls[size]),
+        selectedIndex: activeIndex,
+        onChange: setActiveIndex,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cls["group-inner"], children: [
+            /* @__PURE__ */ jsx(Ne, { ref: tabListRef, className: cls.list, children: /* @__PURE__ */ jsx("div", { className: cls.tabs, children: categories.map(({ name }, index) => /* @__PURE__ */ jsx(
+              st,
+              {
+                className: `${cls.tab} ${activeIndex === index ? 'data-active="true"' : ""}`,
+                "data-active": activeIndex === index,
+                children: name
+              },
+              name
+            )) }) }),
+            !isTablet && /* @__PURE__ */ jsx("div", { className: cls.buttons, children: /* @__PURE__ */ jsx(
+              TabButtons,
+              {
+                handlePrevTab: handlePrev,
+                handleNextTab: handleNext
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(ke, { className: cls.panels, children: categories.map(({ name, content }) => /* @__PURE__ */ jsx(Be, { className: cls.panel, children: content }, name)) })
+        ]
+      }
+    );
+  }
+);
+export {
+  TabTrail
+};

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

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

package/dist/components/TabTrail/constants.js

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

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

@@ -0,0 +1,2 @@
+export { TabTrail, type TTabTrailProps, type TCategoryTab } from './TabTrail';
+export { ETabTrailSize } from './constants';

package/dist/components/TabTrail/index.js

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

package/dist/components/Tag/Tag.d.ts

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

package/dist/components/Tag/Tag.js

@@ -1,99 +1,54 @@
 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 { 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 { forwardRef } from "react";
+import { ETagSize, ETagType } from "./constants.js";
+import '../../assets/Tag.css';const container = "_container_1f2sk_2";
+const disabled = "_disabled_1f2sk_24";
+const inner = "_inner_1f2sk_29";
+const M = "_M_1f2sk_37";
+const S = "_S_1f2sk_41";
+const XS = "_XS_1f2sk_49";
 const cls = {
   container,
-  step,
-  editable,
-  PRIMARY,
-  GRAY,
-  CITRINE,
-  SAPPHIRE,
-  SECONDARY,
-  WHITE,
-  LIGHT_SAPPHIRE,
-  LIGHT_GRAY,
-  disabled
+  disabled,
+  inner,
+  M,
+  S,
+  XS
 };
-const Steps = forwardRef(
+const Tag = forwardRef(
   (props, ref) => {
     const {
       rootClassName,
-      stepClassName,
-      quantity,
-      current = ZERO_STEP,
-      editable: editable2 = false,
-      size = EStepsSize.M,
-      onClick,
+      innerClassName,
+      children,
+      size = ETagSize.M,
       disabled: disabled2 = false,
-      primaryColor = EStepsPrimaryColor.CITRINE,
-      secondaryColor = EStepsPrimaryColor.GRAY
+      elementType = ETagType.BUTTON,
+      backgroundColor = "",
+      color = "",
+      outline = false,
+      ...otherProps
     } = props;
-    const idPrefix = useId();
-    const [step2, setStep] = useState(current);
-    const [hoveredStep, setHoveredStep] = useState(null);
-    const stepWasChangedRef = useRef(null);
-    useEffect(() => {
-      setStep(current);
-    }, [current]);
-    const handleClick = (idx) => {
-      const clickedStep = idx + DIFF_BETWEEN_STEP_AND_INDEX;
-      stepWasChangedRef.current = true;
-      setStep(clickedStep !== step2 ? clickedStep : ZERO_STEP);
-    };
-    useEffect(() => {
-      if (stepWasChangedRef.current === true) {
-        onClick && onClick(step2);
-        stepWasChangedRef.current = false;
-      }
-    }, [onClick, step2]);
-    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] })
+    const Element = elementType === ETagType.BUTTON ? ETagType.BUTTON : ETagType.DIV;
+    return /* @__PURE__ */ jsx(
+      Element,
+      {
+        className: classNames(cls.container, cls[size], rootClassName, {
+          [cls.disabled]: disabled2
+        }),
+        ref,
+        style: {
+          backgroundColor: outline ? "transparent" : backgroundColor,
+          borderColor: backgroundColor,
+          color: outline ? backgroundColor : color
         },
-        idx
-      );
-    });
-    return /* @__PURE__ */ jsx("div", { className: classNames(cls.container, rootClassName), ref, children: buttons });
+        ...otherProps,
+        children: /* @__PURE__ */ jsx("span", { className: classNames(cls.inner, innerClassName), children })
+      }
+    );
   }
 );
 export {
-  Steps
+  Tag
 };

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

@@ -1,41 +1,9 @@
-export declare const ZERO_STEP = 0;
-export declare const DIFF_BETWEEN_STEP_AND_INDEX = 1;
-export declare const ID_SEPARATOR = "-//-";
-export declare enum EStepsSize {
+export declare enum ETagSize {
     XS = "XS",
     S = "S",
-    M = "M",
-    L = "L"
+    M = "M"
 }
-export declare const StepSize: {
-    XS: {
-        width: number;
-        height: number;
-    };
-    S: {
-        width: number;
-        height: number;
-    };
-    M: {
-        width: number;
-        height: number;
-    };
-    L: {
-        width: number;
-        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 ETagType {
+    DIV = "div",
+    BUTTON = "button"
 }

package/dist/components/Tag/constants.js

@@ -1,55 +1,15 @@
-const ZERO_STEP = 0;
-const DIFF_BETWEEN_STEP_AND_INDEX = 1;
-const ID_SEPARATOR = "-//-";
-var EStepsSize = /* @__PURE__ */ ((EStepsSize2) => {
-  EStepsSize2["XS"] = "XS";
-  EStepsSize2["S"] = "S";
-  EStepsSize2["M"] = "M";
-  EStepsSize2["L"] = "L";
-  return EStepsSize2;
-})(EStepsSize || {});
-const StepSize = {
-  XS: {
-    width: 19,
-    height: 8
-  },
-  S: {
-    width: 36,
-    height: 12
-  },
-  M: {
-    width: 48,
-    height: 21
-  },
-  L: {
-    width: 64,
-    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 ETagSize = /* @__PURE__ */ ((ETagSize2) => {
+  ETagSize2["XS"] = "XS";
+  ETagSize2["S"] = "S";
+  ETagSize2["M"] = "M";
+  return ETagSize2;
+})(ETagSize || {});
+var ETagType = /* @__PURE__ */ ((ETagType2) => {
+  ETagType2["DIV"] = "div";
+  ETagType2["BUTTON"] = "button";
+  return ETagType2;
+})(ETagType || {});
 export {
-  DIFF_BETWEEN_STEP_AND_INDEX,
-  EStepsColorType,
-  EStepsPrimaryColor,
-  EStepsSecondaryColor,
-  EStepsSize,
-  ID_SEPARATOR,
-  StepSize,
-  ZERO_STEP
+  ETagSize,
+  ETagType
 };

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

@@ -1,3 +1,2 @@
-export { Steps } from './Tag';
-export { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from './constants';
-export type { TCommonStepsProps } from './types';
+export { Tag } from './Tag';
+export { ETagSize, ETagType } from './constants';