@situaction/traq-ui-ste 1.2.43 → 1.2.45

package/dist/components/menu/Menu.js

@@ -1,7 +1,7 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useState as a, useRef as w, useEffect as H } from "react";
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { useState as d, useRef as w, useEffect as H } from "react";
 import { Button as E } from "../button/Button.js";
-import { IconButton as d } from "../icon-button/IconButton.js";
+import { IconButton as r } from "../icon-button/IconButton.js";
 import "react-dom";
 import "../accordion/Accordion.js";
 import { Icon as L } from "../icon/Icon.js";
@@ -10,7 +10,7 @@ import "../carousel/Carousel.js";
 import "../carousel/FadeCarousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Menu.css';/* empty css                   */
-const O = "_fullHeight_nmor3_15", j = "_fullWidth_nmor3_18", D = "_open_nmor3_21", q = "_close_nmor3_25", A = "_menuButton_nmor3_29", F = "_closeIcon_nmor3_37", G = "_textEllipsis_nmor3_47", J = "_pointer_nmor3_52", K = "_fullImg_nmor3_55", Q = "_menuParams_nmor3_61", T = "_line_nmor3_67", U = "_borderRadiusM_nmor3_74", X = "_menuItem_nmor3_78", Y = "_longLogo_nmor3_87", Z = "_bottomNav_nmor3_92", oo = "_bottomInner_nmor3_101", eo = "_bottomItems_nmor3_109", no = "_bottomParams_nmor3_117", lo = "_flexVerticalBetweenStart_nmor3_126", to = "_flexHorizontalCenter_nmor3_140", so = "_flexVerticalBetweenCenter_nmor3_155", n = {
+const O = "_fullHeight_1nn1p_15", j = "_fullWidth_1nn1p_18", D = "_open_1nn1p_21", q = "_close_1nn1p_25", A = "_menuButton_1nn1p_29", F = "_closeIcon_1nn1p_37", G = "_textEllipsis_1nn1p_47", J = "_pointer_1nn1p_52", K = "_fullImg_1nn1p_55", Q = "_menuParams_1nn1p_61", T = "_line_1nn1p_67", U = "_borderRadiusM_1nn1p_74", X = "_menuItem_1nn1p_78", Y = "_longLogo_1nn1p_87", Z = "_bottomNav_1nn1p_92", nn = "_bottomInner_1nn1p_101", on = "_bottomItems_1nn1p_110", en = "_bottomParams_1nn1p_118", ln = "_flexVerticalBetweenStart_1nn1p_127", tn = "_flexHorizontalCenter_1nn1p_141", sn = "_flexVerticalBetweenCenter_1nn1p_156", e = {
   fullHeight: O,
   fullWidth: j,
   open: D,
@@ -26,117 +26,117 @@ const O = "_fullHeight_nmor3_15", j = "_fullWidth_nmor3_18", D = "_open_nmor3_21
   menuItem: X,
   longLogo: Y,
   bottomNav: Z,
-  bottomInner: oo,
-  bottomItems: eo,
-  bottomParams: no,
-  flexVerticalBetweenStart: lo,
-  flexHorizontalCenter: to,
-  flexVerticalBetweenCenter: so
-}, vo = ({ menuItems: s = [], menuParams: r = [], shortLogo: p, logo: g, isOpen: v, defaultOpen: z = !1, selectedId: m, mode: V = "left" }) => {
-  const [i, C] = a(z ?? !1), [_, N] = a(m ?? (s.length > 0 ? s[0].id : null)), x = w(null), [P, f] = a(!1), [I, u] = a(!1), [M, S] = a(null), [$, W] = a({}), B = w(null);
+  bottomInner: nn,
+  bottomItems: on,
+  bottomParams: en,
+  flexVerticalBetweenStart: ln,
+  flexHorizontalCenter: tn,
+  flexVerticalBetweenCenter: sn
+}, vn = ({ menuItems: s = [], menuParams: c = [], shortLogo: b, logo: g, isOpen: v, defaultOpen: z = !1, selectedId: p, mode: V = "left" }) => {
+  const [i, C] = d(z ?? !1), [_, N] = d(p ?? (s.length > 0 ? s[0].id : null)), x = w(null), [P, f] = d(!1), [I, m] = d(!1), [M, S] = d(null), [$, W] = d({}), B = w(null);
   H(() => {
-    m != null && N(m);
-  }, [m]);
-  const h = (o, l) => {
-    if (o.stopPropagation(), N(l), s) {
-      const t = s.find((b) => b.id === l);
+    p != null && N(p);
+  }, [p]);
+  const u = (n, l) => {
+    if (n.stopPropagation(), N(l), s) {
+      const t = s.find((h) => h.id === l);
       t == null || t.onClick();
     }
   }, y = () => {
     C(!i), f(!1);
-  }, k = (o) => {
+  }, k = (n) => {
     var l;
-    if (r) {
-      const t = r.find((b) => b.id === o);
+    if (c) {
+      const t = c.find((h) => h.id === n);
       if (!t) return;
-      t.content ? (S(t.content), W(t.position), u(!0)) : (l = t.onClick) == null || l.call(t);
+      t.content ? (S(t.content), W(t.position), m(!0)) : (l = t.onClick) == null || l.call(t);
     }
   };
   return H(() => {
     v && v(i);
-  }, [i]), V === "bottom" ? /* @__PURE__ */ e("nav", { ref: x, className: n.bottomNav, children: /* @__PURE__ */ c("div", { className: n.bottomInner, children: [
-    /* @__PURE__ */ e("div", { className: n.bottomItems, children: s && s.map((o) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      d,
+  }, [i]), V === "bottom" ? /* @__PURE__ */ o("nav", { ref: x, className: e.bottomNav, children: /* @__PURE__ */ a("div", { className: e.bottomInner, children: [
+    /* @__PURE__ */ o("div", { className: e.bottomItems, children: s && s.map((n) => /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+      r,
       {
-        mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
-        children: o.icon,
-        disabled: o.disabled,
-        onClick: (l) => h(l, o.id)
+        mode: n.disabled ? "ghost" : _ === n.id ? "secondary" : "ghost",
+        children: n.icon,
+        disabled: n.disabled,
+        onClick: (l) => u(l, n.id)
       }
-    ) }, `icon-${o.id}`)) }),
-    /* @__PURE__ */ c("div", { className: n.bottomParams, children: [
-      r && r.map((o) => /* @__PURE__ */ e("div", { onClick: () => k(o.id), children: /* @__PURE__ */ e(d, { mode: "ghost", children: o.icon, disabled: o.disabled }) }, `param-icon-${o.id}`)),
-      /* @__PURE__ */ e(
+    ) }, `icon-${n.id}`)) }),
+    /* @__PURE__ */ a("div", { className: e.bottomParams, children: [
+      c && c.map((n) => /* @__PURE__ */ o("div", { onClick: () => k(n.id), children: /* @__PURE__ */ o(r, { mode: "ghost", children: n.icon, disabled: n.disabled }) }, `param-icon-${n.id}`)),
+      /* @__PURE__ */ o(
         R,
         {
           ref: B,
-          className: n.borderRadiusM,
+          className: e.borderRadiusM,
           open: I,
-          onClose: () => u(!1),
+          onClose: () => m(!1),
           position: $,
           children: M
         }
       )
     ] })
-  ] }) }) : /* @__PURE__ */ e("nav", { ref: x, children: /* @__PURE__ */ c("div", { className: `${n.flexVerticalBetweenStart} ${n.fullHeight} ${i ? n.open : n.close}`, children: [
-    /* @__PURE__ */ c("div", { className: n.fullWidth, children: [
-      /* @__PURE__ */ e(
+  ] }) }) : /* @__PURE__ */ o("nav", { ref: x, children: /* @__PURE__ */ a("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${i ? e.open : e.close}`, children: [
+    /* @__PURE__ */ a("div", { className: e.fullWidth, children: [
+      /* @__PURE__ */ o(
         "div",
         {
-          className: `${n.flexHorizontalCenter} ${n.pointer} ${n.textEllipsis}`,
+          className: `${e.flexHorizontalCenter} ${e.pointer} ${e.textEllipsis}`,
           onClick: () => y(),
-          children: i ? /* @__PURE__ */ c("div", { className: n.fullImg, children: [
-            g && /* @__PURE__ */ e("img", { className: n.longLogo, src: g, alt: "Logo situaction" }),
-            /* @__PURE__ */ e(d, { mode: "ghost", size: "menu", children: /* @__PURE__ */ e(L, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
-          ] }) : /* @__PURE__ */ e(
+          children: i ? /* @__PURE__ */ a("div", { className: e.fullImg, children: [
+            g && /* @__PURE__ */ o("img", { className: e.longLogo, src: g, alt: "Logo situaction" }),
+            /* @__PURE__ */ o(r, { mode: "ghost", size: "menu", children: /* @__PURE__ */ o(L, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
+          ] }) : /* @__PURE__ */ o(
             "div",
             {
-              className: n.closeIcon,
+              className: e.closeIcon,
               onMouseEnter: () => f(!0),
               onMouseLeave: () => f(!1),
               onClick: () => C(!i),
-              children: P || !p ? /* @__PURE__ */ e(d, { mode: "ghost", size: "menu", children: /* @__PURE__ */ e(L, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ e("img", { src: p, alt: "Logo situaction" })
+              children: P || !b ? /* @__PURE__ */ o(r, { mode: "ghost", size: "menu", children: /* @__PURE__ */ o(L, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ o("img", { src: b, alt: "Logo situaction" })
             }
           )
         }
       ),
-      /* @__PURE__ */ e("div", { className: n.menuItem, children: s && s.map((o) => i ? /* @__PURE__ */ e("div", { className: `${n.textEllipsis} ${n.menuButton}`, children: /* @__PURE__ */ e(
+      /* @__PURE__ */ o("div", { className: e.menuItem, children: s && s.map((n) => i ? /* @__PURE__ */ o("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ o(
         E,
         {
-          mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
-          label: o.label,
-          disabled: o.disabled,
-          onClick: (l) => h(l, o.id),
-          childrenLeft: o.icon
+          mode: n.disabled ? "ghost" : _ === n.id ? "secondary" : "ghost",
+          label: n.label,
+          disabled: n.disabled,
+          onClick: (l) => u(l, n.id),
+          childrenLeft: n.icon
         }
-      ) }, `button-${o.id}`) : /* @__PURE__ */ e("div", { className: n.textEllipsis, children: /* @__PURE__ */ e(
-        d,
+      ) }, `button-${n.id}`) : /* @__PURE__ */ o("div", { className: e.textEllipsis, children: /* @__PURE__ */ o(
+        r,
         {
-          mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
-          children: o.icon,
-          disabled: o.disabled,
-          onClick: (l) => h(l, o.id)
+          mode: n.disabled ? "ghost" : _ === n.id ? "secondary" : "ghost",
+          children: n.icon,
+          disabled: n.disabled,
+          onClick: (l) => u(l, n.id)
         }
-      ) }, `icon-${o.id}`)) }),
-      /* @__PURE__ */ e("div", { className: n.line })
+      ) }, `icon-${n.id}`)) }),
+      /* @__PURE__ */ o("div", { className: e.line })
     ] }),
-    /* @__PURE__ */ c("div", { className: `${n.menuParams} ${n.flexVerticalBetweenCenter}`, children: [
-      r && r.map((o) => /* @__PURE__ */ e(
+    /* @__PURE__ */ a("div", { className: `${e.menuParams} ${e.flexVerticalBetweenCenter}`, children: [
+      c && c.map((n) => /* @__PURE__ */ o(
         "div",
         {
-          className: `${n.fullWidth} ${n.textEllipsis}`,
-          onClick: () => k(o.id),
-          children: i ? /* @__PURE__ */ e("div", { className: n.menuButton, children: /* @__PURE__ */ e(E, { mode: "ghost", label: o.label, disabled: o.disabled, childrenLeft: o.icon }, o.id) }) : /* @__PURE__ */ e(d, { mode: "ghost", children: o.icon, disabled: o.disabled })
+          className: `${e.fullWidth} ${e.textEllipsis}`,
+          onClick: () => k(n.id),
+          children: i ? /* @__PURE__ */ o("div", { className: e.menuButton, children: /* @__PURE__ */ o(E, { mode: "ghost", label: n.label, disabled: n.disabled, childrenLeft: n.icon }, n.id) }) : /* @__PURE__ */ o(r, { mode: "ghost", children: n.icon, disabled: n.disabled })
         },
-        `param-icon-${o.id}`
+        `param-icon-${n.id}`
       )),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ o(
         R,
         {
           ref: B,
-          className: n.borderRadiusM,
+          className: e.borderRadiusM,
           open: I,
-          onClose: () => u(!1),
+          onClose: () => m(!1),
           position: $,
           children: M
         }
@@ -145,5 +145,5 @@ const O = "_fullHeight_nmor3_15", j = "_fullWidth_nmor3_18", D = "_open_nmor3_21
   ] }) });
 };
 export {
-  vo as Menu
+  vn as Menu
 };

package/dist/components/select-multi-items/SelectMultiItems.js

@@ -1,6 +1,6 @@
 import { jsxs as s, jsx as o } from "react/jsx-runtime";
 import { useState as _, useRef as h } from "react";
-import { n as v, s as C, a as x } from "../../X.es-BEJ-zMPl.mjs";
+import { n as v, s as C, a as x } from "../../X.es-agKqByBO.mjs";
 import { Button as M } from "../button/Button.js";
 import "../icon-button/IconButton.js";
 import { TagCounter as w } from "../tag-counter/TagCounter.js";

package/dist/components/stepper/Stepper.d.ts

@@ -26,6 +26,8 @@ export interface StepperProps {
     disabledIds?: string[];
     /** If false, render only the dots/connectors (no item.content). */
     showContent?: boolean;
+    /** If true, completed dots display a check icon instead of a filled dot. */
+    showCompletedCheck?: boolean;
     /** Optional accessible label for each dot. */
     getDotAriaLabel?: (item: StepITem, index: number, status: StepStatus) => string;
     /** Dot button margin-top to align with the content on the right (px or CSS value). */

package/dist/components/stepper/Stepper.js

@@ -1,92 +1,95 @@
-import { jsx as _, jsxs as S } from "react/jsx-runtime";
-import { useMemo as f, useRef as E, useState as X, useLayoutEffect as Z } from "react";
-import '../../styles/Stepper.css';const L = "_wrapper_lh0wd_30", tt = "_steps_lh0wd_35", nt = "_row_lh0wd_42", et = "_connectorAbs_lh0wd_49", ot = "_connectorProgress_lh0wd_59", st = "_connectorGradient_lh0wd_63", rt = "_connectorDefault_lh0wd_68", ct = "_dotButton_lh0wd_74", dt = "_dotButtonDisabled_lh0wd_89", it = "_dotOuter_lh0wd_95", at = "_dotInner_lh0wd_103", lt = "_rowNoContent_lh0wd_165", ut = "_content_lh0wd_170", o = {
-  wrapper: L,
-  steps: tt,
-  row: nt,
-  connectorAbs: et,
-  connectorProgress: ot,
-  connectorGradient: st,
-  connectorDefault: rt,
-  dotButton: ct,
-  dotButtonDisabled: dt,
-  dotOuter: it,
-  dotInner: at,
-  "dotButton--upcoming": "_dotButton--upcoming_lh0wd_108",
-  "dotButton--active": "_dotButton--active_lh0wd_120",
-  "dotButton--completed": "_dotButton--completed_lh0wd_142",
-  "dotButton--disabled": "_dotButton--disabled_lh0wd_153",
-  rowNoContent: lt,
-  content: ut
-}, pt = (e, d) => {
-  if (e === d) return !0;
-  if (e.length !== d.length) return !1;
-  for (let i = 0; i < e.length; i++) {
-    const p = e[i], a = d[i];
-    if (p.key !== a.key || p.leftPx !== a.leftPx || p.topPx !== a.topPx || p.heightPx !== a.heightPx || p.variant !== a.variant)
+import { jsx as _, jsxs as C } from "react/jsx-runtime";
+import { useMemo as m, useRef as E, useState as Z, useLayoutEffect as L } from "react";
+import { s as tt } from "../../CheckCircle.es-ILxE75_k.mjs";
+import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c4wm6_35", ot = "_row_c4wm6_42", st = "_connectorAbs_c4wm6_49", ct = "_connectorProgress_c4wm6_59", rt = "_connectorGradient_c4wm6_63", dt = "_connectorDefault_c4wm6_68", it = "_dotButton_c4wm6_74", at = "_dotButtonDisabled_c4wm6_89", ut = "_dotOuter_c4wm6_95", lt = "_dotInner_c4wm6_103", pt = "_rowNoContent_c4wm6_172", _t = "_content_c4wm6_177", n = {
+  wrapper: et,
+  steps: nt,
+  row: ot,
+  connectorAbs: st,
+  connectorProgress: ct,
+  connectorGradient: rt,
+  connectorDefault: dt,
+  dotButton: it,
+  dotButtonDisabled: at,
+  dotOuter: ut,
+  dotInner: lt,
+  "dotButton--upcoming": "_dotButton--upcoming_c4wm6_108",
+  "dotButton--active": "_dotButton--active_c4wm6_120",
+  "dotButton--completed": "_dotButton--completed_c4wm6_142",
+  "dotButton--completedCheck": "_dotButton--completedCheck_c4wm6_153",
+  "dotButton--disabled": "_dotButton--disabled_c4wm6_160",
+  rowNoContent: pt,
+  content: _t
+}, ft = (o, i) => {
+  if (o === i) return !0;
+  if (o.length !== i.length) return !1;
+  for (let a = 0; a < o.length; a++) {
+    const p = o[a], u = i[a];
+    if (p.key !== u.key || p.leftPx !== u.leftPx || p.topPx !== u.topPx || p.heightPx !== u.heightPx || p.variant !== u.variant)
       return !1;
   }
   return !0;
-}, ft = ({
-  items: e,
-  onDotClick: d,
-  dotOffsetPx: i = 18,
+}, gt = ({
+  items: o,
+  onDotClick: i,
+  dotOffsetPx: a = 18,
   dotsClickable: p = !0,
-  activeId: a,
+  activeId: u,
   autoStatusFromActive: y = !0,
-  disabledIds: x = [],
+  disabledIds: B = [],
   showContent: P = !0,
-  getDotAriaLabel: m,
+  showCompletedCheck: N = !1,
+  getDotAriaLabel: x,
   dotButtonMarginTop: I = "10px"
 }) => {
-  const C = f(
-    () => ({ "--flowline-dot-offset": `${i}px` }),
-    [i]
-  ), Y = f(() => x.join("|"), [x]), g = f(() => {
-    var u, r;
-    const t = new Set(x), s = a ?? ((u = e.find((n) => n.status !== "disabled" && !t.has(n.id))) == null ? void 0 : u.id) ?? ((r = e[0]) == null ? void 0 : r.id), l = e.findIndex((n) => n.id === s);
-    return e.map((n, h) => n.status === "disabled" || t.has(n.id) ? "disabled" : y ? h < l ? "completed" : h === l ? "active" : "upcoming" : n.status ?? "upcoming");
-  }, [e, a, y, Y]), z = f(() => g.join("|"), [g]), K = f(() => e.map((t) => t.id).join("|"), [e]), N = E(null), B = E(/* @__PURE__ */ new Map()), q = f(() => (t) => (s) => {
-    B.current.set(t, s);
-  }, []), [D, k] = X([]);
-  return Z(() => {
-    const t = N.current;
+  const z = m(
+    () => ({ "--flowline-dot-offset": `${a}px` }),
+    [a]
+  ), Y = m(() => B.join("|"), [B]), w = m(() => {
+    var l, r;
+    const t = new Set(B), s = u ?? ((l = o.find((e) => e.status !== "disabled" && !t.has(e.id))) == null ? void 0 : l.id) ?? ((r = o[0]) == null ? void 0 : r.id), c = o.findIndex((e) => e.id === s);
+    return o.map((e, f) => e.status === "disabled" || t.has(e.id) ? "disabled" : y ? f < c ? "completed" : f === c ? "active" : "upcoming" : e.status ?? "upcoming");
+  }, [o, u, y, Y]), k = m(() => w.join("|"), [w]), K = m(() => o.map((t) => t.id).join("|"), [o]), R = E(null), g = E(/* @__PURE__ */ new Map()), q = m(() => (t) => (s) => {
+    g.current.set(t, s);
+  }, []), [D, F] = Z([]);
+  return L(() => {
+    const t = R.current;
     if (!t) return;
     let s = null;
-    const l = () => {
-      const n = t.getBoundingClientRect(), h = [], v = e.map((c) => c.id);
-      for (let c = 0; c < v.length - 1; c++) {
-        const R = v[c], $ = v[c + 1], j = B.current.get(R), A = B.current.get($);
-        if (!j || !A) continue;
-        const w = j.getBoundingClientRect(), b = A.getBoundingClientRect(), F = Math.round(w.left + w.width / 2 - n.left), T = w.top + w.height / 2 - n.top, H = b.top + b.height / 2 - n.top, J = w.height / 2, Q = b.height / 2, O = 2, G = Math.round(T + J + O), U = Math.round(H - Q - O), V = Math.max(0, U - G), M = g[c], W = M === "completed" ? "progress" : M === "active" ? "gradient" : "default";
-        h.push({
-          key: `${R}__${$}`,
-          leftPx: F,
-          topPx: G,
-          heightPx: V,
-          variant: W
+    const c = () => {
+      const e = t.getBoundingClientRect(), f = [], b = o.map((d) => d.id);
+      for (let d = 0; d < b.length - 1; d++) {
+        const $ = b[d], j = b[d + 1], A = g.current.get($), O = g.current.get(j);
+        if (!A || !O) continue;
+        const h = A.getBoundingClientRect(), v = O.getBoundingClientRect(), T = Math.round(h.left + h.width / 2 - e.left), H = h.top + h.height / 2 - e.top, J = v.top + v.height / 2 - e.top, Q = h.height / 2, U = v.height / 2, G = 2, M = Math.round(H + Q + G), V = Math.round(J - U - G), W = Math.max(0, V - M), S = w[d], X = S === "completed" ? "progress" : S === "active" ? "gradient" : "default";
+        f.push({
+          key: `${$}__${j}`,
+          leftPx: T,
+          topPx: M,
+          heightPx: W,
+          variant: X
         });
       }
-      k((c) => pt(c, h) ? c : h);
-    }, u = () => {
+      F((d) => ft(d, f) ? d : f);
+    }, l = () => {
       s == null && (s = requestAnimationFrame(() => {
-        s = null, l();
+        s = null, c();
       }));
     };
-    u();
-    const r = new ResizeObserver(u);
-    return r.observe(t), B.current.forEach((n) => {
-      n && r.observe(n);
-    }), window.addEventListener("resize", u), () => {
-      s != null && cancelAnimationFrame(s), r.disconnect(), window.removeEventListener("resize", u);
+    l();
+    const r = new ResizeObserver(l);
+    return r.observe(t), g.current.forEach((e) => {
+      e && r.observe(e);
+    }), window.addEventListener("resize", l), () => {
+      s != null && cancelAnimationFrame(s), r.disconnect(), window.removeEventListener("resize", l);
     };
-  }, [K, z]), /* @__PURE__ */ _("div", { className: o.wrapper, style: C, children: /* @__PURE__ */ S("div", { ref: N, className: o.steps, children: [
+  }, [K, k]), /* @__PURE__ */ _("div", { className: n.wrapper, style: z, children: /* @__PURE__ */ C("div", { ref: R, className: n.steps, children: [
     D.map((t) => /* @__PURE__ */ _(
       "span",
       {
         className: [
-          o.connectorAbs,
-          t.variant === "progress" ? o.connectorProgress : t.variant === "gradient" ? o.connectorGradient : o.connectorDefault
+          n.connectorAbs,
+          t.variant === "progress" ? n.connectorProgress : t.variant === "gradient" ? n.connectorGradient : n.connectorDefault
         ].join(" "),
         style: {
           left: `${t.leftPx}px`,
@@ -97,36 +100,37 @@ import '../../styles/Stepper.css';const L = "_wrapper_lh0wd_30", tt = "_steps_lh
       },
       t.key
     )),
-    e.map((t, s) => {
-      const l = g[s], r = p && !(l === "disabled") && !!d;
-      return /* @__PURE__ */ S(
+    o.map((t, s) => {
+      const c = w[s], r = p && !(c === "disabled") && !!i;
+      return /* @__PURE__ */ C(
         "div",
         {
           className: [
-            o.row,
-            P ? "" : o.rowNoContent
+            n.row,
+            P ? "" : n.rowNoContent
           ].filter(Boolean).join(" "),
-          style: { columnGap: `${i}px` },
+          style: { columnGap: `${a}px` },
           children: [
             /* @__PURE__ */ _(
               "button",
               {
                 type: "button",
                 className: [
-                  o.dotButton,
-                  o[`dotButton--${l}`],
-                  r ? "" : o.dotButtonDisabled
+                  n.dotButton,
+                  n[`dotButton--${c}`],
+                  c === "completed" && N ? n["dotButton--completedCheck"] : "",
+                  r ? "" : n.dotButtonDisabled
                 ].filter(Boolean).join(" "),
                 style: { marginTop: I ?? "0" },
                 onClick: () => {
-                  r && (d == null || d(t.id));
+                  r && (i == null || i(t.id));
                 },
-                "aria-label": (m == null ? void 0 : m(t, s, l)) ?? `Open step ${t.id}`,
+                "aria-label": (x == null ? void 0 : x(t, s, c)) ?? `Open step ${t.id}`,
                 disabled: !r,
-                children: /* @__PURE__ */ _("span", { ref: q(t.id), className: o.dotOuter, children: /* @__PURE__ */ _("span", { className: o.dotInner }) })
+                children: /* @__PURE__ */ _("span", { ref: q(t.id), className: n.dotOuter, children: c === "completed" && N ? /* @__PURE__ */ _(tt, { size: 14, weight: "bold" }) : /* @__PURE__ */ _("span", { className: n.dotInner }) })
               }
             ),
-            P ? /* @__PURE__ */ _("div", { className: o.content, children: t.content }) : null
+            P ? /* @__PURE__ */ _("div", { className: n.content, children: t.content }) : null
           ]
         },
         t.id
@@ -135,5 +139,5 @@ import '../../styles/Stepper.css';const L = "_wrapper_lh0wd_30", tt = "_steps_lh
   ] }) });
 };
 export {
-  ft as Stepper
+  gt as Stepper
 };

package/dist/styles/Menu.css

@@ -1 +1 @@
-nav{height:100vh;width:fit-content;padding:0 var(--spacing-xs-3) var(--spacing-xs-3);flex-shrink:1;transition:.3s;box-sizing:border-box;z-index:5}nav ._fullHeight_nmor3_15{height:100%}nav ._fullWidth_nmor3_18{width:100%}nav ._open_nmor3_21{width:200px;transition:all ease .3s}nav ._close_nmor3_25{width:40px;transition:all ease-out .3s}nav ._menuButton_nmor3_29{width:100%}nav ._menuButton_nmor3_29 button{padding:var(--spacing-xs-4);width:inherit!important;justify-content:flex-start!important}nav ._closeIcon_nmor3_37{height:30px;cursor:pointer;margin:.875rem 0;padding:1px 0}nav ._label_nmor3_43{letter-spacing:.72px;font-weight:600}nav ._textEllipsis_nmor3_47{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}nav ._pointer_nmor3_52{cursor:pointer}nav ._fullImg_nmor3_55{margin:.875rem 0;display:flex;justify-content:space-between;width:100%}nav ._menuParams_nmor3_61{gap:.125rem;position:relative;width:100%}._line_nmor3_67{height:1px;width:100%;background-color:var(--general-border-window);margin:var(--spacing-xs-3) 0}._borderRadiusM_nmor3_74{border-radius:6px}._menuItem_nmor3_78{gap:.25rem;width:100%;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._longLogo_nmor3_87{transition:transform .25s ease,opacity .25s ease;will-change:transform,opacity}._bottomNav_nmor3_92{width:100%;height:fit-content;padding:var(--spacing-xs-3);box-sizing:border-box;z-index:5;flex-shrink:0}._bottomInner_nmor3_101{display:flex;justify-content:center;align-items:center;flex-direction:row;width:100%}._bottomItems_nmor3_109{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:var(--spacing-xs-6)}._bottomParams_nmor3_117{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;gap:var(--spacing-xs-6);position:relative}._flexVerticalBetweenStart_nmor3_126{display:flex;justify-content:space-between;align-items:start;flex-direction:column}._flexHorizontalBetween_nmor3_133{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontalCenter_nmor3_140{height:60px;display:flex;justify-content:center;align-items:center;flex-direction:row}._flexVertical_nmor3_126{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._flexVerticalBetweenCenter_nmor3_155{display:flex;justify-content:space-between;align-items:center;flex-direction:column}
+nav{height:100vh;width:fit-content;padding:0 var(--spacing-xs-3) var(--spacing-xs-3);flex-shrink:1;transition:.3s;box-sizing:border-box;z-index:5}nav ._fullHeight_1nn1p_15{height:100%}nav ._fullWidth_1nn1p_18{width:100%}nav ._open_1nn1p_21{width:200px;transition:all ease .3s}nav ._close_1nn1p_25{width:40px;transition:all ease-out .3s}nav ._menuButton_1nn1p_29{width:100%}nav ._menuButton_1nn1p_29 button{padding:var(--spacing-xs-4);width:inherit!important;justify-content:flex-start!important}nav ._closeIcon_1nn1p_37{height:30px;cursor:pointer;margin:.875rem 0;padding:1px 0}nav ._label_1nn1p_43{letter-spacing:.72px;font-weight:600}nav ._textEllipsis_1nn1p_47{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}nav ._pointer_1nn1p_52{cursor:pointer}nav ._fullImg_1nn1p_55{margin:.875rem 0;display:flex;justify-content:space-between;width:100%}nav ._menuParams_1nn1p_61{gap:.125rem;position:relative;width:100%}._line_1nn1p_67{height:1px;width:100%;background-color:var(--general-border-window);margin:var(--spacing-xs-3) 0}._borderRadiusM_1nn1p_74{border-radius:6px}._menuItem_1nn1p_78{gap:.25rem;width:100%;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._longLogo_1nn1p_87{transition:transform .25s ease,opacity .25s ease;will-change:transform,opacity}._bottomNav_1nn1p_92{width:100%;height:fit-content;padding:var(--spacing-xs-3);box-sizing:border-box;z-index:5;flex-shrink:0}._bottomInner_1nn1p_101{display:flex;justify-content:center;align-items:center;flex-direction:row;width:100%;gap:var(--spacing-xs-6)}._bottomItems_1nn1p_110{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:var(--spacing-xs-6)}._bottomParams_1nn1p_118{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;gap:var(--spacing-xs-6);position:relative}._flexVerticalBetweenStart_1nn1p_127{display:flex;justify-content:space-between;align-items:start;flex-direction:column}._flexHorizontalBetween_1nn1p_134{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontalCenter_1nn1p_141{height:60px;display:flex;justify-content:center;align-items:center;flex-direction:row}._flexVertical_1nn1p_127{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._flexVerticalBetweenCenter_1nn1p_156{display:flex;justify-content:space-between;align-items:center;flex-direction:column}

package/dist/styles/Stepper.css

@@ -1 +1 @@
-._wrapper_lh0wd_30{--stepper-left-col: 20px;--stepper-dot-button: 24px}._steps_lh0wd_35{position:relative;display:flex;flex-direction:column;gap:.625rem}._row_lh0wd_42{display:grid;grid-template-columns:var(--stepper-left-col) 1fr;align-items:start}._connectorAbs_lh0wd_49{position:absolute;width:1px;transform:translate(-50%);border-radius:999px;pointer-events:none;z-index:0}._connectorProgress_lh0wd_59{background:var(--flow-point-line-active)}._connectorGradient_lh0wd_63{background:linear-gradient(to bottom,var(--flow-point-line-active),var(--flow-point-line-inactive))}._connectorDefault_lh0wd_68{background-image:linear-gradient(to bottom,var(--flow-point-line-inactive) 50%,transparent 0);background-size:2px 8px;background-repeat:repeat-y}._dotButton_lh0wd_74{width:var(--stepper-dot-button);height:var(--stepper-dot-button);padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translateY(var(--stepper-dot-offset-y, 0px));position:relative;z-index:1}._dotButtonDisabled_lh0wd_89{cursor:default;opacity:.5}._dotOuter_lh0wd_95{display:flex;align-items:center;justify-content:center;border-radius:999px;transform:translateY(var(--stepper-dot-offset-y, 0px))}._dotInner_lh0wd_103{border-radius:999px}._dotButton--upcoming_lh0wd_108 ._dotOuter_lh0wd_95{width:10px;height:10px;border:none;background:var(--flow-point-line-inactive)}._dotButton--upcoming_lh0wd_108 ._dotInner_lh0wd_103{display:none}._dotButton--active_lh0wd_120 ._dotOuter_lh0wd_95{width:16px;height:16px;border-radius:999px;border:1px solid var(--flow-point-line-active);background:transparent;padding:1px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}._dotButton--active_lh0wd_120 ._dotInner_lh0wd_103{width:10px;height:10px;border-radius:999px;background:var(--flow-point-line-active);display:block}._dotButton--completed_lh0wd_142 ._dotOuter_lh0wd_95{width:10px;height:10px;background:var(--flow-point-line-active)}._dotButton--completed_lh0wd_142 ._dotInner_lh0wd_103{display:none}._dotButton--disabled_lh0wd_153 ._dotOuter_lh0wd_95{width:10px;height:10px;border:none;background:var(--general-border-window);opacity:.6}._dotButton--disabled_lh0wd_153 ._dotInner_lh0wd_103{display:none}._rowNoContent_lh0wd_165{grid-template-columns:var(--stepper-left-col);column-gap:0}._rowNoContent_lh0wd_165 ._content_lh0wd_170{display:none}
+._wrapper_c4wm6_30{--stepper-left-col: 20px;--stepper-dot-button: 24px}._steps_c4wm6_35{position:relative;display:flex;flex-direction:column;gap:.625rem}._row_c4wm6_42{display:grid;grid-template-columns:var(--stepper-left-col) 1fr;align-items:start}._connectorAbs_c4wm6_49{position:absolute;width:1px;transform:translate(-50%);border-radius:999px;pointer-events:none;z-index:0}._connectorProgress_c4wm6_59{background:var(--flow-point-line-active)}._connectorGradient_c4wm6_63{background:linear-gradient(to bottom,var(--flow-point-line-active),var(--flow-point-line-inactive))}._connectorDefault_c4wm6_68{background-image:linear-gradient(to bottom,var(--flow-point-line-inactive) 50%,transparent 0);background-size:2px 8px;background-repeat:repeat-y}._dotButton_c4wm6_74{width:var(--stepper-dot-button);height:var(--stepper-dot-button);padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translateY(var(--stepper-dot-offset-y, 0px));position:relative;z-index:1}._dotButtonDisabled_c4wm6_89{cursor:default;opacity:.5}._dotOuter_c4wm6_95{display:flex;align-items:center;justify-content:center;border-radius:999px;transform:translateY(var(--stepper-dot-offset-y, 0px))}._dotInner_c4wm6_103{border-radius:999px}._dotButton--upcoming_c4wm6_108 ._dotOuter_c4wm6_95{width:10px;height:10px;border:none;background:var(--flow-point-line-inactive)}._dotButton--upcoming_c4wm6_108 ._dotInner_c4wm6_103{display:none}._dotButton--active_c4wm6_120 ._dotOuter_c4wm6_95{width:16px;height:16px;border-radius:999px;border:1px solid var(--flow-point-line-active);background:transparent;padding:1px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}._dotButton--active_c4wm6_120 ._dotInner_c4wm6_103{width:10px;height:10px;border-radius:999px;background:var(--flow-point-line-active);display:block}._dotButton--completed_c4wm6_142 ._dotOuter_c4wm6_95{width:10px;height:10px;background:var(--flow-point-line-active)}._dotButton--completed_c4wm6_142 ._dotInner_c4wm6_103{display:none}._dotButton--completedCheck_c4wm6_153 ._dotOuter_c4wm6_95{width:16px;height:16px;color:#fff}._dotButton--disabled_c4wm6_160 ._dotOuter_c4wm6_95{width:10px;height:10px;border:none;background:var(--general-border-window);opacity:.6}._dotButton--disabled_c4wm6_160 ._dotInner_c4wm6_103{display:none}._rowNoContent_c4wm6_172{grid-template-columns:var(--stepper-left-col);column-gap:0}._rowNoContent_c4wm6_172 ._content_c4wm6_177{display:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.2.43",
+  "version": "1.2.45",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",