@situaction/traq-ui-ste 1.2.23 → 1.2.25

package/README.md

@@ -37,6 +37,7 @@ npm install date-fns --save
 - Modal
 - NestedList
 - Select
+- Stepper
 - SelectFilterInputTags
 - SelectMultiItems
 - Switch
@@ -45,4 +46,4 @@ npm install date-fns --save
 - Tag
 - TagCounter
 - Title
-- Tooltip
+- Tooltip

package/dist/components/accordion/Accordion.d.ts

@@ -1,6 +1,20 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Size } from '../interface';
 
+export interface AccordionHandle {
+    /** Open a specific item by id */
+    open: (id: string) => void;
+    /** Close a specific item by id */
+    close: (id: string) => void;
+    /** Toggle a specific item by id */
+    toggle: (id: string) => void;
+    /** Close all items */
+    closeAll: () => void;
+    /** Open only one item (close others) */
+    openOnly: (id: string) => void;
+    /** Get currently open ids */
+    getOpenIds: () => string[];
+}
 export interface AccordionProps {
     /** An array of accordion items, each containing a header, content, and optional settings. */
     items: {
@@ -18,9 +32,19 @@ export interface AccordionProps {
         onClickHeader?: (id: string) => void;
     }[];
     /** Accordion style if block type the header and the content are in the same block, if it is tile they are separated into 2 blocks */
-    type?: 'block' | 'tile';
+    type?: "block" | "tile";
     /** Padding size inside the Accordion: small, medium, large */
     paddingHeader?: Size;
+    /** If true, clicking anywhere on the header (excluding buttons) toggles the content */
+    toggleOnHeaderClick?: boolean;
+    /** Visual mode for all accordion items */
+    mode?: "primary" | "secondary";
+    /** If true, only one item can be open at a time */
+    singleOpen?: boolean;
+    /** Controlled open ids (optional) */
+    openItemIds?: string[];
+    /** Controlled change callback */
+    onOpenItemIdsChange?: (ids: string[]) => void;
 }
 /**
  * Accordion component that displays a list of AccordionItem components.
@@ -30,4 +54,4 @@ export interface AccordionProps {
  * @param {AccordionProps} props - The props for the Accordion component.
  * @returns {JSX.Element} The rendered Accordion component.
  */
-export declare const Accordion: FC<AccordionProps>;
+export declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<AccordionHandle>>;

package/dist/components/accordion/Accordion.js

@@ -1,23 +1,58 @@
-import { jsx as n } from "react/jsx-runtime";
-import { AccordionItem as i } from "./item/AccordionItem.js";
-import '../../styles/Accordion.css';const l = "_accordion_hz3a1_6", s = {
-  accordion: l
-}, h = ({ items: r, type: d = "block", paddingHeader: a }) => /* @__PURE__ */ n("div", { className: s.accordion, children: r.map((o, e) => /* @__PURE__ */ n(
-  i,
-  {
-    header: o.header,
-    iconPosition: o.iconPosition ?? "right",
-    defaultOpen: o.defaultOpen ?? !1,
-    type: d ?? "block",
-    paddingHeader: a ?? "m",
-    onClickHeader: () => {
-      var c;
-      return (c = o.onClickHeader) == null ? void 0 : c.call(o, o.id);
-    },
-    children: o.content
-  },
-  e
-)) });
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as x, useMemo as P, useState as j, useImperativeHandle as w } from "react";
+import { AccordionItem as z } from "./item/AccordionItem.js";
+import '../../styles/Accordion.css';const M = "_accordion_hz3a1_6", N = {
+  accordion: M
+}, q = x(
+  ({
+    items: s,
+    type: u = "block",
+    paddingHeader: O = "m",
+    toggleOnHeaderClick: g = !1,
+    mode: k = "primary",
+    singleOpen: y = !1,
+    openItemIds: t,
+    onOpenItemIdsChange: l
+  }, H) => {
+    const i = t !== void 0, v = P(() => s.filter((o) => o.defaultOpen).map((o) => o.id), [s]), [A, _] = j(v), r = i ? t ?? [] : A, c = (o) => {
+      i ? l == null || l(o) : _(o);
+    }, e = (o) => r.includes(o), a = (o) => {
+      if (e(o)) return;
+      const n = y ? [o] : [...r, o];
+      c(n);
+    }, d = (o) => {
+      e(o) && c(r.filter((n) => n !== o));
+    }, p = (o) => {
+      e(o) ? d(o) : a(o);
+    }, b = () => c([]), h = (o) => c([o]);
+    return w(H, () => ({
+      open: a,
+      close: d,
+      toggle: p,
+      closeAll: b,
+      openOnly: h,
+      getOpenIds: () => [...r]
+    })), /* @__PURE__ */ f("div", { className: N.accordion, children: s.map((o) => /* @__PURE__ */ f(
+      z,
+      {
+        header: o.header,
+        iconPosition: o.iconPosition ?? "right",
+        type: u ?? "block",
+        paddingHeader: O ?? "m",
+        toggleOnHeaderClick: g ?? !1,
+        mode: k ?? "primary",
+        open: e(o.id),
+        onToggle: () => p(o.id),
+        onClickHeader: () => {
+          var n;
+          return (n = o.onClickHeader) == null ? void 0 : n.call(o, o.id);
+        },
+        children: o.content
+      },
+      o.id
+    )) });
+  }
+);
 export {
-  h as Accordion
+  q as Accordion
 };

package/dist/components/accordion/item/AccordionItem.d.ts

@@ -11,11 +11,19 @@ interface AccordionItemProps {
     /** Determines whether the accordion should be open by default (true) or closed (false). */
     defaultOpen?: boolean;
     /** Accordion style if block type the header and the content are in the same block, if it is tile they are separated into 2 blocks */
-    type?: 'block' | 'tile';
+    type?: "block" | "tile";
     /** Padding size inside the Accordion: small, medium, large */
     paddingHeader?: Size;
     /** Click handler on the padding header (outside of IconButtons) */
     onClickHeader?: () => void;
+    /** If true, clicking anywhere on the header (excluding buttons) toggles the content */
+    toggleOnHeaderClick?: boolean;
+    /** Visual mode for the accordion item */
+    mode?: "primary" | "secondary";
+    /** Controlled open state (optional) */
+    open?: boolean;
+    /** Toggle callback used when open is controlled */
+    onToggle?: () => void;
 }
 /**
  * AccordionItem component represents an individual item in an accordion.

package/dist/components/accordion/item/AccordionItem.js

@@ -1,61 +1,67 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { useState as p, useEffect as m } from "react";
-import { IconButton as n } from "../../icon-button/IconButton.js";
-import '../../../styles/AccordionItem.css';const u = "_accordionHeader_1tsuj_7", f = "_title_1tsuj_31", v = "_fullHeight_1tsuj_36", x = "_block_1tsuj_40", j = "_tile_1tsuj_48", l = {
-  accordionHeader: u,
-  "padding-s": "_padding-s_1tsuj_15",
-  "padding-m": "_padding-m_1tsuj_19",
-  "padding-l": "_padding-l_1tsuj_23",
-  "padding-xl": "_padding-xl_1tsuj_27",
-  title: f,
-  fullHeight: v,
-  block: x,
-  tile: j
-}, H = ({
-  header: r,
-  children: g,
-  iconPosition: d = "right",
-  defaultOpen: s = !1,
-  type: h = "block",
-  paddingHeader: _ = "m",
-  onClickHeader: e
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useState as k, useEffect as y, useMemo as B } from "react";
+import { IconButton as w } from "../../icon-button/IconButton.js";
+import '../../../styles/AccordionItem.css';const O = "_accordionHeader_bor6q_7", A = "_title_bor6q_31", M = "_fullHeight_bor6q_36", H = "_block_bor6q_40", I = "_tile_bor6q_48", L = "_secondaryOpen_bor6q_56", e = {
+  accordionHeader: O,
+  "padding-s": "_padding-s_bor6q_15",
+  "padding-m": "_padding-m_bor6q_19",
+  "padding-l": "_padding-l_bor6q_23",
+  "padding-xl": "_padding-xl_bor6q_27",
+  title: A,
+  fullHeight: M,
+  block: H,
+  tile: I,
+  secondaryOpen: L
+}, z = ({
+  header: m,
+  children: f,
+  iconPosition: a = "right",
+  defaultOpen: d = !1,
+  type: c = "block",
+  paddingHeader: b = "m",
+  onClickHeader: s,
+  toggleOnHeaderClick: v = !1,
+  mode: h = "primary",
+  open: g,
+  onToggle: r
 }) => {
-  const [i, o] = p(!1);
-  m(() => {
-    s && o(s);
-  }, [s]);
-  const w = (a) => {
-    if (a.target.closest("button")) {
-      a.stopPropagation();
+  const l = g !== void 0, [u, _] = k(!1);
+  y(() => {
+    l || _(!!d);
+  }, [d, l]);
+  const i = l ? !!g : u, n = () => {
+    if (l) {
+      r == null || r();
       return;
     }
-    e == null || e();
-  };
-  return /* @__PURE__ */ c("div", { className: `${h === "tile" ? l.tile : l.block}`, children: [
-    /* @__PURE__ */ c("div", { className: `${l.accordionHeader} ${l[`padding-${_}`]}`, onClick: w, "data-ignore-outside-click": !0, children: [
-      d === "left" && /* @__PURE__ */ t(
-        n,
-        {
-          mode: "ghost",
-          size: "s",
-          onClick: () => o(!i),
-          children: i ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) })
-        }
-      ),
-      /* @__PURE__ */ t("div", { className: l.title, children: r }),
-      d === "right" && /* @__PURE__ */ t(
-        n,
-        {
-          mode: "ghost",
-          size: "s",
-          onClick: () => o(!i),
-          children: i ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) })
-        }
-      )
-    ] }),
-    i && g
+    _((o) => !o);
+  }, x = (o) => {
+    if (o.target.closest("button")) {
+      o.stopPropagation();
+      return;
+    }
+    v && n(), s == null || s();
+  }, q = B(() => [
+    c === "tile" ? e.tile : e.block,
+    h === "secondary" && i ? e.secondaryOpen : ""
+  ].filter(Boolean).join(" "), [c, h, i]);
+  return /* @__PURE__ */ p("div", { className: q, children: [
+    /* @__PURE__ */ p(
+      "div",
+      {
+        className: `${e.accordionHeader} ${e[`padding-${b}`]}`,
+        onClick: x,
+        "data-ignore-outside-click": !0,
+        children: [
+          a === "left" && /* @__PURE__ */ t(w, { mode: "ghost", size: "s", onClick: n, children: i ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) }) }),
+          /* @__PURE__ */ t("div", { className: e.title, children: m }),
+          a === "right" && /* @__PURE__ */ t(w, { mode: "ghost", size: "s", onClick: n, children: i ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) }) })
+        ]
+      }
+    ),
+    i && f
   ] });
 };
 export {
-  H as AccordionItem
+  z as AccordionItem
 };

package/dist/components/list/list-controls/ListControls.js

@@ -3,6 +3,7 @@ import { Button as p } from "../../button/Button.js";
 import "react";
 import "../../icon-button/IconButton.js";
 import { Checkbox as _ } from "../../checkbox/Checkbox.js";
+import "../../accordion/Accordion.js";
 import { Icon as a } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
 import "../../carousel/Carousel.js";
@@ -14,7 +15,7 @@ const u = "_list_1nihg_6", f = "_children_1nihg_29", g = "_selected_1nihg_43", k
   children: f,
   selected: g,
   reset: k
-}, K = ({ listChildren: l, handleItemClick: d, selectedItems: m, onReset: r, labelButtonReset: n }) => /* @__PURE__ */ o("div", { className: i.list, children: [
+}, S = ({ listChildren: l, handleItemClick: d, selectedItems: m, onReset: r, labelButtonReset: n }) => /* @__PURE__ */ o("div", { className: i.list, children: [
   /* @__PURE__ */ e("div", { children: l.map((t, h) => {
     if (t.key == null) return null;
     const s = t.key, c = m.includes(s);
@@ -47,5 +48,5 @@ const u = "_list_1nihg_6", f = "_children_1nihg_29", g = "_selected_1nihg_43", k
   ) })
 ] });
 export {
-  K as ListControls
+  S as ListControls
 };

package/dist/components/list/nested-list/NestedList.js

@@ -1,21 +1,22 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { NestedListItem as p } from "./item/NestedListItem.js";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { NestedListItem as l } from "./item/NestedListItem.js";
 import { Button as c } from "../../button/Button.js";
 import "react";
 import "../../icon-button/IconButton.js";
+import "../../accordion/Accordion.js";
 import { Icon as a } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
 import "../../carousel/Carousel.js";
 import "../../carousel/FadeCarousel.js";
 import "../../theme/ThemeContext.js";
 import '../../../styles/Size.css';import '../../../styles/NestedList.css';/* empty css                      */
-const h = "_nestedlist_7rnd3_6", _ = "_reset_7rnd3_18", s = {
+const h = "_nestedlist_7rnd3_6", _ = "_reset_7rnd3_18", i = {
   nestedlist: h,
   reset: _
-}, C = ({ items: i, align: o = "right", onReset: r, children: m, labelButtonReset: e }) => /* @__PURE__ */ l("div", { className: s.nestedlist, children: [
-  i.map((n, d) => /* @__PURE__ */ t(p, { ...n, align: o ?? "right", children: m }, d)),
-  r && e && /* @__PURE__ */ t("div", { className: s.reset, children: /* @__PURE__ */ t(c, { mode: "ghost", label: e, onClick: r, childrenLeft: /* @__PURE__ */ t(a, { icon: "FunnelX" }) }) })
+}, F = ({ items: s, align: o = "right", onReset: r, children: m, labelButtonReset: e }) => /* @__PURE__ */ p("div", { className: i.nestedlist, children: [
+  s.map((n, d) => /* @__PURE__ */ t(l, { ...n, align: o ?? "right", children: m }, d)),
+  r && e && /* @__PURE__ */ t("div", { className: i.reset, children: /* @__PURE__ */ t(c, { mode: "ghost", label: e, onClick: r, childrenLeft: /* @__PURE__ */ t(a, { icon: "FunnelX" }) }) })
 ] });
 export {
-  C as NestedList
+  F as NestedList
 };

package/dist/components/list/nested-list/item/NestedListItem.js

@@ -3,6 +3,7 @@ import { useState as g, useRef as u, useLayoutEffect as z } from "react";
 import "../../../button/Button.js";
 import "../../../icon-button/IconButton.js";
 import { TagCounter as B } from "../../../tag-counter/TagCounter.js";
+import "../../../accordion/Accordion.js";
 import { Icon as l } from "../../../icon/Icon.js";
 import { Modal as L } from "../../../modal/Modal.js";
 import "../../../carousel/Carousel.js";
@@ -14,7 +15,7 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
   items: $,
   textSmall: j,
   modal: v
-}, A = ({
+}, D = ({
   icon: a,
   title: h,
   numberSelect: i,
@@ -70,5 +71,5 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
   ] });
 };
 export {
-  A as NestedListItem
+  D as NestedListItem
 };

package/dist/components/menu/Menu.js

@@ -2,6 +2,7 @@ import { jsx as n, jsxs as d } from "react/jsx-runtime";
 import { useState as c, useRef as M, useEffect as B } from "react";
 import { Button as $ } from "../button/Button.js";
 import { IconButton as f } from "../icon-button/IconButton.js";
+import "../accordion/Accordion.js";
 import { Icon as N } from "../icon/Icon.js";
 import { Modal as W } from "../modal/Modal.js";
 import "../carousel/Carousel.js";
@@ -26,40 +27,40 @@ const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21
   flexVerticalBetweenStart: Y,
   flexHorizontalCenter: Z,
   flexVerticalBetweenCenter: ee
-}, de = ({ menuItems: s = [], menuParams: a = [], shortLogo: m, logo: p, isOpen: h, defaultOpen: I = !1, selectedId: u }) => {
-  const [t, g] = c(I ?? !1), [b, x] = c(u ?? (s.length > 0 ? s[0].id : null)), w = M(null), [H, _] = c(!1), [L, C] = c(!1), [k, E] = c(null), [z, R] = c({}), V = M(null);
+}, fe = ({ menuItems: s = [], menuParams: a = [], shortLogo: m, logo: p, isOpen: h, defaultOpen: I = !1, selectedId: u }) => {
+  const [l, g] = c(I ?? !1), [b, x] = c(u ?? (s.length > 0 ? s[0].id : null)), w = M(null), [H, _] = c(!1), [L, C] = c(!1), [k, E] = c(null), [z, R] = c({}), V = M(null);
   B(() => {
     u != null && x(u);
   }, [u]);
   const v = (o, i) => {
     if (o.stopPropagation(), x(i), s) {
-      const l = s.find((r) => r.id === i);
-      l == null || l.onClick();
+      const t = s.find((r) => r.id === i);
+      t == null || t.onClick();
     }
   }, S = () => {
-    g(!t), _(!1);
+    g(!l), _(!1);
   }, P = (o) => {
     var i;
     if (a) {
-      const l = a.find((r) => r.id === o);
-      if (!l) return;
-      if (l.content) {
-        const r = t ? "200px" : "40px";
-        E(l.content), R({ ...l.position, left: r }), C(!0);
+      const t = a.find((r) => r.id === o);
+      if (!t) return;
+      if (t.content) {
+        const r = l ? "200px" : "40px";
+        E(t.content), R({ ...t.position, left: r }), C(!0);
       } else
-        (i = l.onClick) == null || i.call(l);
+        (i = t.onClick) == null || i.call(t);
     }
   };
   return B(() => {
-    h && h(t);
-  }, [t]), /* @__PURE__ */ n("nav", { ref: w, children: /* @__PURE__ */ d("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${t ? e.open : e.close}`, children: [
+    h && h(l);
+  }, [l]), /* @__PURE__ */ n("nav", { ref: w, children: /* @__PURE__ */ d("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${l ? e.open : e.close}`, children: [
     /* @__PURE__ */ d("div", { className: e.fullWidth, children: [
       /* @__PURE__ */ n(
         "div",
         {
           className: `${e.flexHorizontalCenter} ${e.pointer} ${e.textEllipsis}`,
           onClick: () => S(),
-          children: t ? /* @__PURE__ */ d("div", { className: e.fullImg, children: [
+          children: l ? /* @__PURE__ */ d("div", { className: e.fullImg, children: [
             p && /* @__PURE__ */ n("img", { className: e.longLogo, src: p, alt: "Logo situaction" }),
             /* @__PURE__ */ n(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ n(N, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
           ] }) : /* @__PURE__ */ n(
@@ -68,13 +69,13 @@ const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21
               className: e.closeIcon,
               onMouseEnter: () => _(!0),
               onMouseLeave: () => _(!1),
-              onClick: () => g(!t),
+              onClick: () => g(!l),
               children: H || !m ? /* @__PURE__ */ n(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ n(N, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ n("img", { src: m, alt: "Logo situaction" })
             }
           )
         }
       ),
-      /* @__PURE__ */ n("div", { className: e.menuItem, children: s && s.map((o) => t ? /* @__PURE__ */ n("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ n(
+      /* @__PURE__ */ n("div", { className: e.menuItem, children: s && s.map((o) => l ? /* @__PURE__ */ n("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ n(
         $,
         {
           mode: b === o.id ? "secondary" : "ghost",
@@ -98,7 +99,7 @@ const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21
         {
           className: `${e.fullWidth} ${e.textEllipsis}`,
           onClick: () => P(o.id),
-          children: t ? /* @__PURE__ */ n("div", { className: e.menuButton, children: /* @__PURE__ */ n($, { mode: "ghost", label: o.label, childrenLeft: o.icon }, o.id) }) : /* @__PURE__ */ n(f, { mode: "ghost", children: o.icon })
+          children: l ? /* @__PURE__ */ n("div", { className: e.menuButton, children: /* @__PURE__ */ n($, { mode: "ghost", label: o.label, childrenLeft: o.icon }, o.id) }) : /* @__PURE__ */ n(f, { mode: "ghost", children: o.icon })
         },
         `param-icon-${o.id}`
       )),
@@ -117,5 +118,5 @@ const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21
   ] }) });
 };
 export {
-  de as Menu
+  fe as Menu
 };

package/dist/components/panel/side-panel-header/SidePanelHeader.js

@@ -2,6 +2,7 @@ import { jsxs as C, jsx as e } from "react/jsx-runtime";
 import "../../button/Button.js";
 import "react";
 import { IconButton as i } from "../../icon-button/IconButton.js";
+import "../../accordion/Accordion.js";
 import { Icon as t } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
 import "../../carousel/Carousel.js";
@@ -12,7 +13,7 @@ const c = "_sidePanelHeader_72g7b_6", m = "_buttonArrow_72g7b_13", h = "_title_7
   sidePanelHeader: c,
   buttonArrow: m,
   title: h
-}, x = ({
+}, y = ({
   title: s,
   icon: o,
   onClickBack: L,
@@ -74,5 +75,5 @@ const c = "_sidePanelHeader_72g7b_6", m = "_buttonArrow_72g7b_13", h = "_title_7
   )
 ] });
 export {
-  x as SidePanelHeader
+  y as SidePanelHeader
 };

package/dist/components/select/Select.js

@@ -3,6 +3,7 @@ import { useState as y, useRef as v, useEffect as d } from "react";
 import { Button as W } from "../button/Button.js";
 import { Input as G } from "../input/Input.js";
 import { IconButton as H } from "../icon-button/IconButton.js";
+import "../accordion/Accordion.js";
 import { Icon as _ } from "../icon/Icon.js";
 import { Modal as J } from "../modal/Modal.js";
 import "../carousel/Carousel.js";
@@ -18,7 +19,7 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
   itemLabel: I,
   searchWrapper: ee,
   noResults: te
-}, he = ({
+}, me = ({
   selected: k,
   size: g = "m",
   listItem: h,
@@ -213,5 +214,5 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
   ] });
 };
 export {
-  he as Select
+  me as Select
 };

package/dist/components/select-filter-input-tags/SelectFilterInputTags.js

@@ -1,19 +1,20 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import "../button/Button.js";
 import "react";
-import { Input as a } from "../input/Input.js";
+import { Input as p } from "../input/Input.js";
 import "../icon-button/IconButton.js";
+import "../accordion/Accordion.js";
 import "../modal/Modal.js";
 import "../carousel/Carousel.js";
 import "../carousel/FadeCarousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/SelectFilterInputTags.css';/* empty css                   */
-const c = "_listTagSelect_2v3fb_6", p = {
-  listTagSelect: c
-}, T = ({ children: o, inputValue: r, handleInputChange: s, handleKeyDown: i }) => /* @__PURE__ */ e("div", { className: p.listTagSelect, children: /* @__PURE__ */ l("div", { children: [
+const a = "_listTagSelect_2v3fb_6", c = {
+  listTagSelect: a
+}, y = ({ children: o, inputValue: r, handleInputChange: s, handleKeyDown: i }) => /* @__PURE__ */ e("div", { className: c.listTagSelect, children: /* @__PURE__ */ l("div", { children: [
   o,
   /* @__PURE__ */ e("div", { className: "flexAutoSize", children: /* @__PURE__ */ e(
-    a,
+    p,
     {
       type: "text",
       value: r,
@@ -29,5 +30,5 @@ const c = "_listTagSelect_2v3fb_6", p = {
   ) })
 ] }) });
 export {
-  T as SelectFilterInputTags
+  y as SelectFilterInputTags
 };

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

@@ -1,9 +1,10 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
+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 { Button as M } from "../button/Button.js";
 import "../icon-button/IconButton.js";
 import { TagCounter as w } from "../tag-counter/TagCounter.js";
+import "../accordion/Accordion.js";
 import { Modal as y } from "../modal/Modal.js";
 import "../carousel/Carousel.js";
 import "../carousel/FadeCarousel.js";
@@ -13,8 +14,8 @@ const N = "_relative_w7e9a_6", R = "_tagCounter_w7e9a_10", b = "_modal_w7e9a_18"
   relative: N,
   tagCounter: R,
   modal: b
-}, A = ({
-  label: i,
+}, D = ({
+  label: a,
   iconButton: l,
   selectedCount: t = 0,
   onClearSelection: n,
@@ -22,25 +23,25 @@ const N = "_relative_w7e9a_6", R = "_tagCounter_w7e9a_10", b = "_modal_w7e9a_18"
   size: c = "m",
   align: p = "right"
 }) => {
-  const [e, s] = _(!1), d = h(null), f = () => s(!1), g = t > 0 ? /* @__PURE__ */ o(v, { onClick: n }) : e ? /* @__PURE__ */ o(C, {}) : /* @__PURE__ */ o(x, {}), u = t > 0 ? "secondary" : "tertiary";
-  return /* @__PURE__ */ a("div", { className: r.relative, children: [
+  const [e, i] = _(!1), d = h(null), f = () => i(!1), g = t > 0 ? /* @__PURE__ */ o(v, { onClick: n }) : e ? /* @__PURE__ */ o(C, {}) : /* @__PURE__ */ o(x, {}), u = t > 0 ? "secondary" : "tertiary";
+  return /* @__PURE__ */ s("div", { className: r.relative, children: [
     /* @__PURE__ */ o(
       M,
       {
-        label: i,
+        label: a,
         mode: u,
         size: c,
         childrenLeft: l,
-        childrenRight: /* @__PURE__ */ a("div", { className: r.tagCounter, children: [
+        childrenRight: /* @__PURE__ */ s("div", { className: r.tagCounter, children: [
           t > 0 && /* @__PURE__ */ o(w, { size: "s", label: t }),
           g
         ] }),
-        onClick: () => s(!e)
+        onClick: () => i(!e)
       }
     ),
     /* @__PURE__ */ o(y, { ref: d, open: e, onClose: f, className: r.modal, position: { top: "calc(100% + 6px)", ...p === "right" ? { left: "0" } : { right: "0" } }, children: m })
   ] });
 };
 export {
-  A as SelectMultiItems
+  D as SelectMultiItems
 };

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

@@ -0,0 +1,29 @@
+import { FC, ReactNode } from 'react';
+
+export type StepStatus = "active" | "completed" | "upcoming" | "disabled";
+export interface StepITem {
+    /** Unique id of the step */
+    id: string;
+    /** Optional explicit status (used if autoStatusFromActive=false) */
+    status?: StepStatus;
+    /** Right-side content (typically an AccordionItem) */
+    content: ReactNode;
+}
+export interface StepperProps {
+    /** Steps to render */
+    items: StepITem[];
+    /** Called when a dot is clicked */
+    onDotClick?: (id: string) => void;
+    /** Dot vertical offset inside each row (px) to align with accordion header */
+    dotOffsetPx?: number;
+    /** If true, dots are clickable */
+    dotsClickable?: boolean;
+    /** Active step id (drives progression when autoStatusFromActive=true) */
+    activeId?: string;
+    /** If true, compute statuses from activeId (completed/active/upcoming) */
+    autoStatusFromActive?: boolean;
+    /** Optional: force some steps disabled without setting status on each item */
+    disabledIds?: string[];
+}
+/** Stepper layout: dots + absolute connectors between each dot */
+export declare const Stepper: FC<StepperProps>;

package/dist/components/stepper/Stepper.js

@@ -0,0 +1,122 @@
+import { jsx as _, jsxs as D } from "react/jsx-runtime";
+import { useMemo as h, useRef as M, useState as T, useLayoutEffect as U } from "react";
+import '../../styles/Stepper.css';const V = "_wrapper_187j3_30", W = "_steps_187j3_35", X = "_row_187j3_42", Z = "_connectorAbs_187j3_50", tt = "_connectorProgress_187j3_60", et = "_connectorGradient_187j3_64", nt = "_connectorDefault_187j3_69", ot = "_dotButton_187j3_75", st = "_dotButtonDisabled_187j3_90", rt = "_dotOuter_187j3_96", ct = "_dotInner_187j3_103", o = {
+  wrapper: V,
+  steps: W,
+  row: X,
+  connectorAbs: Z,
+  connectorProgress: tt,
+  connectorGradient: et,
+  connectorDefault: nt,
+  dotButton: ot,
+  dotButtonDisabled: st,
+  dotOuter: rt,
+  dotInner: ct,
+  "dotButton--upcoming": "_dotButton--upcoming_187j3_108",
+  "dotButton--active": "_dotButton--active_187j3_120",
+  "dotButton--completed": "_dotButton--completed_187j3_142",
+  "dotButton--disabled": "_dotButton--disabled_187j3_153"
+}, dt = (n, d) => {
+  if (n === d) return !0;
+  if (n.length !== d.length) return !1;
+  for (let u = 0; u < n.length; u++) {
+    const l = n[u], i = d[u];
+    if (l.key !== i.key || l.leftPx !== i.leftPx || l.topPx !== i.topPx || l.heightPx !== i.heightPx || l.variant !== i.variant)
+      return !1;
+  }
+  return !0;
+}, ut = ({
+  items: n,
+  onDotClick: d,
+  dotOffsetPx: u = 18,
+  dotsClickable: l = !0,
+  activeId: i,
+  autoStatusFromActive: v = !0,
+  disabledIds: b = []
+}) => {
+  const S = h(
+    () => ({ "--flowline-dot-offset": `${u}px` }),
+    [u]
+  ), E = h(() => b.join("|"), [b]), B = h(() => {
+    var a, r;
+    const t = new Set(b), s = i ?? ((a = n.find((e) => e.status !== "disabled" && !t.has(e.id))) == null ? void 0 : a.id) ?? ((r = n[0]) == null ? void 0 : r.id), p = n.findIndex((e) => e.id === s);
+    return n.map((e, f) => e.status === "disabled" || t.has(e.id) ? "disabled" : v ? f < p ? "completed" : f === p ? "active" : "upcoming" : e.status ?? "upcoming");
+  }, [n, i, v, E]), G = h(() => B.join("|"), [B]), I = h(() => n.map((t) => t.id).join("|"), [n]), w = M(null), x = M(/* @__PURE__ */ new Map()), Y = h(() => (t) => (s) => {
+    x.current.set(t, s);
+  }, []), [z, K] = T([]);
+  return U(() => {
+    const t = w.current;
+    if (!t) return;
+    let s = null;
+    const p = () => {
+      const e = t.getBoundingClientRect(), f = [], j = n.map((c) => c.id);
+      for (let c = 0; c < j.length - 1; c++) {
+        const P = j[c], y = j[c + 1], A = x.current.get(P), N = x.current.get(y);
+        if (!A || !N) continue;
+        const g = A.getBoundingClientRect(), m = N.getBoundingClientRect(), L = Math.round(g.left + g.width / 2 - e.left), q = g.top + g.height / 2 - e.top, k = m.top + m.height / 2 - e.top, C = g.height / 2, F = m.height / 2, R = 2, O = Math.round(q + C + R), H = Math.round(k - F - R), J = Math.max(0, H - O), $ = B[c], Q = $ === "completed" ? "progress" : $ === "active" ? "gradient" : "default";
+        f.push({
+          key: `${P}__${y}`,
+          leftPx: L,
+          topPx: O,
+          heightPx: J,
+          variant: Q
+        });
+      }
+      K((c) => dt(c, f) ? c : f);
+    }, a = () => {
+      s == null && (s = requestAnimationFrame(() => {
+        s = null, p();
+      }));
+    };
+    a();
+    const r = new ResizeObserver(a);
+    return r.observe(t), x.current.forEach((e) => {
+      e && r.observe(e);
+    }), window.addEventListener("resize", a), () => {
+      s != null && cancelAnimationFrame(s), r.disconnect(), window.removeEventListener("resize", a);
+    };
+  }, [I, G]), /* @__PURE__ */ _("div", { className: o.wrapper, style: S, children: /* @__PURE__ */ D("div", { ref: w, className: o.steps, children: [
+    z.map((t) => /* @__PURE__ */ _(
+      "span",
+      {
+        className: [
+          o.connectorAbs,
+          t.variant === "progress" ? o.connectorProgress : t.variant === "gradient" ? o.connectorGradient : o.connectorDefault
+        ].join(" "),
+        style: {
+          left: `${t.leftPx}px`,
+          top: `${t.topPx}px`,
+          height: `${t.heightPx}px`
+        },
+        "aria-hidden": "true"
+      },
+      t.key
+    )),
+    n.map((t, s) => {
+      const p = B[s], r = l && !(p === "disabled") && !!d;
+      return /* @__PURE__ */ D("div", { className: o.row, children: [
+        /* @__PURE__ */ _(
+          "button",
+          {
+            type: "button",
+            className: [
+              o.dotButton,
+              o[`dotButton--${p}`],
+              r ? "" : o.dotButtonDisabled
+            ].filter(Boolean).join(" "),
+            onClick: () => {
+              r && (d == null || d(t.id));
+            },
+            "aria-label": `Open step ${t.id}`,
+            disabled: !r,
+            children: /* @__PURE__ */ _("span", { ref: Y(t.id), className: o.dotOuter, children: /* @__PURE__ */ _("span", { className: o.dotInner }) })
+          }
+        ),
+        /* @__PURE__ */ _("div", { className: o.content, children: t.content })
+      ] }, t.id);
+    })
+  ] }) });
+};
+export {
+  ut as Stepper
+};

package/dist/components/switch/Switch.js

@@ -2,6 +2,7 @@ import { jsxs as n, jsx as c } from "react/jsx-runtime";
 import { useState as $, useEffect as b } from "react";
 import "../button/Button.js";
 import { IconButton as k } from "../icon-button/IconButton.js";
+import "../accordion/Accordion.js";
 import { Icon as g } from "../icon/Icon.js";
 import "../modal/Modal.js";
 import "../carousel/Carousel.js";
@@ -19,7 +20,7 @@ const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk
   wrapper: E,
   button: R,
   active: T
-}, M = ({
+}, O = ({
   size: i = "m",
   variant: w = "classic",
   checked: l,
@@ -91,5 +92,5 @@ const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk
   ] });
 };
 export {
-  M as Switch
+  O as Switch
 };

package/dist/components/theme/variables_dark.d.ts

@@ -233,4 +233,10 @@ export declare const variables_dark: {
     '--carrousel-0-gradient': string;
     '--carrousel-100-gradient': string;
     '--carrousel-card-img-title': string;
+    '--gradient-backgroundcard-100': string;
+    '--gradient-backgroundcard-0': string;
+    '--flow-point-line-active': string;
+    '--flow-point-line-inactive': string;
+    '--flow-gradient-light': string;
+    '--flow-gradient-dark': string;
 };

package/dist/components/theme/variables_dark.js

@@ -232,7 +232,13 @@ const r = {
   "--spinner-icons": "var(--general-text-icons)",
   "--carrousel-0-gradient": "#2F2B37",
   "--carrousel-100-gradient": "var(--background-primary)",
-  "--carrousel-card-img-title": "var(--color-gray-trans-100)"
+  "--carrousel-card-img-title": "var(--color-gray-trans-100)",
+  "--gradient-backgroundcard-100": "var(--color-light-10)",
+  "--gradient-backgroundcard-0": "var(--color-light-0)",
+  "--flow-point-line-active": "var(--color-light-100)",
+  "--flow-point-line-inactive": "var(--color-light-30)",
+  "--flow-gradient-light": "var(--color-light-20)",
+  "--flow-gradient-dark": "var(--color-light-100)"
 };
 export {
   r as variables_dark

package/dist/components/theme/variables_light.d.ts

@@ -233,4 +233,10 @@ export declare const variables_light: {
     '--carrousel-0-gradient': string;
     '--carrousel-100-gradient': string;
     '--carrousel-card-img-title': string;
+    '--gradient-backgroundcard-100': string;
+    '--gradient-backgroundcard-0': string;
+    '--flow-point-line-active': string;
+    '--flow-point-line-inactive': string;
+    '--flow-gradient-light': string;
+    '--flow-gradient-dark': string;
 };

package/dist/components/theme/variables_light.js

@@ -232,7 +232,13 @@ const r = {
   "--spinner-icons": "var(--color-purple-dark-900)",
   "--carrousel-0-gradient": "#FFFFFF",
   "--carrousel-100-gradient": "var(--background-primary)",
-  "--carrousel-card-img-title": "var(--color-gray-trans-100)"
+  "--carrousel-card-img-title": "var(--color-gray-trans-100)",
+  "--gradient-backgroundcard-100": "var(--color-sable-trans-20)",
+  "--gradient-backgroundcard-0": "var(--color-sable-trans-0)",
+  "--flow-point-line-active": "var(--color-purple-dark-900)",
+  "--flow-point-line-inactive": "var(--color-gray-trans-70)",
+  "--flow-gradient-light": "var(--color-gray-trans-70)",
+  "--flow-gradient-dark": "var(--color-purple-dark-900)"
 };
 export {
   r as variables_light

package/dist/main.d.ts

@@ -33,4 +33,5 @@ export { DragAndDrop } from './components/drag-and-drop/DragAndDrop';
 export { Loading } from './components/loading/Loading';
 export { Carousel } from './components/carousel/Carousel';
 export { FadeCarousel } from './components/carousel/FadeCarousel';
+export { Stepper } from './components/stepper/Stepper';
 export { ThemeProvider, useTheme } from './components/theme/ThemeContext';

package/dist/main.js

@@ -1,12 +1,12 @@
 import { Button as t } from "./components/button/Button.js";
-import { ButtonControlledScroll as p } from "./components/buttonControledScroll/ButtonControlledScroll.js";
+import { ButtonControlledScroll as m } from "./components/buttonControledScroll/ButtonControlledScroll.js";
 import { Input as f } from "./components/input/Input.js";
 import { Tabs as a } from "./components/tabs/Tabs.js";
 import { IconButton as d } from "./components/icon-button/IconButton.js";
 import { Tag as c } from "./components/tag/Tag.js";
 import { Title as u } from "./components/title/Title.js";
-import { TagCounter as C } from "./components/tag-counter/TagCounter.js";
-import { Checkbox as S } from "./components/checkbox/Checkbox.js";
+import { TagCounter as T } from "./components/tag-counter/TagCounter.js";
+import { Checkbox as I } from "./components/checkbox/Checkbox.js";
 import { Tooltip as g } from "./components/tooltip/Tooltip.js";
 import { Select as h } from "./components/select/Select.js";
 import { Calendar as B } from "./components/calendar/Calendar.js";
@@ -26,27 +26,28 @@ import { SidePanel as Z } from "./components/panel/side-panel/SidePanel.js";
 import { SidePanelHeader as $ } from "./components/panel/side-panel-header/SidePanelHeader.js";
 import { InputLabel as ro } from "./components/input-label/InputLabel.js";
 import { EditableField as to } from "./components/editable-field/EditableField.js";
-import { EditableSelect as po } from "./components/editable-select/EditableSelect.js";
+import { EditableSelect as mo } from "./components/editable-select/EditableSelect.js";
 import { Toast as fo } from "./components/toast/Toast.js";
 import { DragAndDrop as ao } from "./components/drag-and-drop/DragAndDrop.js";
 import { Loading as io } from "./components/loading/Loading.js";
 import { Carousel as so } from "./components/carousel/Carousel.js";
-import { FadeCarousel as To } from "./components/carousel/FadeCarousel.js";
-import { ThemeProvider as Io, useTheme as So } from "./components/theme/ThemeContext.js";
+import { FadeCarousel as So } from "./components/carousel/FadeCarousel.js";
+import { Stepper as Co } from "./components/stepper/Stepper.js";
+import { ThemeProvider as bo, useTheme as go } from "./components/theme/ThemeContext.js";
 import './styles/Size.css';/* empty css               */
 export {
   M as Accordion,
   D as AccordionItem,
   t as Button,
-  p as ButtonControlledScroll,
+  m as ButtonControlledScroll,
   B as Calendar,
   N as Card,
   so as Carousel,
-  S as Checkbox,
+  I as Checkbox,
   ao as DragAndDrop,
   to as EditableField,
-  po as EditableSelect,
-  To as FadeCarousel,
+  mo as EditableSelect,
+  So as FadeCarousel,
   v as Icon,
   d as IconButton,
   f as Input,
@@ -62,13 +63,14 @@ export {
   z as SelectMultiItems,
   Z as SidePanel,
   $ as SidePanelHeader,
+  Co as Stepper,
   X as Switch,
   a as Tabs,
   c as Tag,
-  C as TagCounter,
-  Io as ThemeProvider,
+  T as TagCounter,
+  bo as ThemeProvider,
   u as Title,
   fo as Toast,
   g as Tooltip,
-  So as useTheme
+  go as useTheme
 };

package/dist/styles/AccordionItem.css

@@ -1 +1 @@
-@charset "UTF-8";._accordionHeader_1tsuj_7{display:flex;align-items:center;justify-content:space-between;border-radius:.375rem;gap:.375rem}._padding-s_1tsuj_15{padding:var(--spacing-xs-4)}._padding-m_1tsuj_19{padding:var(--spacing-xs-2)}._padding-l_1tsuj_23{padding:var(--spacing-xs)}._padding-xl_1tsuj_27{padding:var(--spacing-s)}._title_1tsuj_31{flex-grow:1;text-align:left}._fullHeight_1tsuj_36{height:100%}._block_1tsuj_40{border:1px solid var(--general-border-window);box-shadow:0 4px 5px 0 var(--shadow-color-minimal);background:var(--background-primary);border-radius:.375rem}._tile_1tsuj_48 ._accordionHeader_1tsuj_7{border-radius:.375rem;background:var(--background-primary);margin-bottom:.375rem;border:1px solid var(--general-border-window)}
+@charset "UTF-8";._accordionHeader_bor6q_7{display:flex;align-items:center;justify-content:space-between;border-radius:.375rem;gap:.375rem}._padding-s_bor6q_15{padding:var(--spacing-xs-4)}._padding-m_bor6q_19{padding:var(--spacing-xs-2)}._padding-l_bor6q_23{padding:var(--spacing-xs)}._padding-xl_bor6q_27{padding:var(--spacing-s)}._title_bor6q_31{flex-grow:1;text-align:left}._fullHeight_bor6q_36{height:100%}._block_bor6q_40{border:1px solid var(--general-border-window);box-shadow:0 4px 5px 0 var(--shadow-color-minimal);background:var(--background-primary);border-radius:.375rem}._tile_bor6q_48 ._accordionHeader_bor6q_7{border-radius:.375rem;background:var(--background-primary);margin-bottom:.375rem;border:1px solid var(--general-border-window)}._secondaryOpen_bor6q_56{background:var(--skeleton-step-empty-background)}

package/dist/styles/Stepper.css

@@ -0,0 +1 @@
+._wrapper_187j3_30{--stepper-left-col: 20px;--stepper-dot-button: 24px}._steps_187j3_35{position:relative;display:flex;flex-direction:column;gap:var(--spacing-xs-3)}._row_187j3_42{display:grid;grid-template-columns:var(--stepper-left-col) 1fr;column-gap:var(--spacing-xs-3);align-items:start}._connectorAbs_187j3_50{position:absolute;width:1px;transform:translate(-50%);border-radius:999px;pointer-events:none;z-index:0}._connectorProgress_187j3_60{background:var(--flow-point-line-active)}._connectorGradient_187j3_64{background:linear-gradient(to bottom,var(--flow-point-line-active),var(--flow-point-line-inactive))}._connectorDefault_187j3_69{background-image:linear-gradient(to bottom,var(--flow-point-line-inactive) 50%,transparent 0);background-size:2px 8px;background-repeat:repeat-y}._dotButton_187j3_75{margin-top:.625rem;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;position:relative;z-index:1}._dotButtonDisabled_187j3_90{cursor:default;opacity:.5}._dotOuter_187j3_96{display:flex;align-items:center;justify-content:center;border-radius:999px}._dotInner_187j3_103{border-radius:999px}._dotButton--upcoming_187j3_108 ._dotOuter_187j3_96{width:10px;height:10px;border:none;background:var(--flow-point-line-inactive)}._dotButton--upcoming_187j3_108 ._dotInner_187j3_103{display:none}._dotButton--active_187j3_120 ._dotOuter_187j3_96{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_187j3_120 ._dotInner_187j3_103{width:10px;height:10px;border-radius:999px;background:var(--flow-point-line-active);display:block}._dotButton--completed_187j3_142 ._dotOuter_187j3_96{width:10px;height:10px;background:var(--flow-point-line-active)}._dotButton--completed_187j3_142 ._dotInner_187j3_103{display:none}._dotButton--disabled_187j3_153 ._dotOuter_187j3_96{width:10px;height:10px;border:none;background:var(--general-border-window);opacity:.6}._dotButton--disabled_187j3_153 ._dotInner_187j3_103{display:none}

package/package.json

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