@situaction/traq-ui-ste 1.1.18 → 1.1.19

package/dist/components/icon/Icon.d.ts

@@ -1,7 +1,8 @@
 import { FC } from 'react';
+import { IconProps as PhosphorIconProps } from '@phosphor-icons/react';
 
 import * as PhosphorIcons from "@phosphor-icons/react";
-export interface IconProps {
+export interface IconProps extends Omit<PhosphorIconProps, "size" | "weight" | "color"> {
     /** Name of the icon from @phosphor-icons/react */
     icon: keyof typeof PhosphorIcons;
     /** Size of the icon in pixels (default: 16) */

package/dist/components/menu/Menu.js

@@ -1,13 +1,13 @@
-import { jsx as l, jsxs as f } from "react/jsx-runtime";
-import { useState as c, useRef as v, useEffect as M } from "react";
-import { Button as $ } from "../button/Button.js";
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
+import { useState as c, useRef as M, useEffect as $ } from "react";
+import { Button as b } from "../button/Button.js";
 import '../../styles/Size.css';import '../../styles/index.css';import '../../styles/Menu.css';/* empty css                    */
-import { IconButton as h } from "../icon-button/IconButton.js";
-import { Icon as b } from "../icon/Icon.js";
+import { IconButton as u } from "../icon-button/IconButton.js";
+import { Icon as w } from "../icon/Icon.js";
 import { Modal as y } from "../modal/Modal.js";
 import "../theme/ThemeContext.js";
 /* empty css                   */
-const O = "_fullHeight_ikhx4_15", S = "_fullWidth_ikhx4_18", j = "_open_ikhx4_21", D = "_close_ikhx4_25", q = "_menuButton_ikhx4_29", A = "_closeIcon_ikhx4_37", F = "_label_ikhx4_42", G = "_textEllipsis_ikhx4_46", J = "_pointer_ikhx4_51", K = "_fullImg_ikhx4_54", Q = "_menuParams_ikhx4_60", T = "_line_ikhx4_66", U = "_borderRadiusM_ikhx4_73", X = "_menuItem_ikhx4_77", Y = "_flexVerticalBetweenStart_ikhx4_86", Z = "_flexHorizontalBetween_ikhx4_93", ee = "_flexVertical_ikhx4_86", ne = "_flexVerticalBetweenCenter_ikhx4_107", e = {
+const O = "_fullHeight_o2xi7_15", S = "_fullWidth_o2xi7_18", j = "_open_o2xi7_21", D = "_close_o2xi7_25", q = "_menuButton_o2xi7_29", A = "_closeIcon_o2xi7_37", F = "_label_o2xi7_42", G = "_textEllipsis_o2xi7_46", J = "_pointer_o2xi7_51", K = "_fullImg_o2xi7_54", Q = "_menuParams_o2xi7_60", T = "_line_o2xi7_66", U = "_borderRadiusM_o2xi7_73", X = "_menuItem_o2xi7_77", Y = "_flexVerticalBetweenStart_o2xi7_86", Z = "_flexHorizontalBetween_o2xi7_93", ee = "_flexVertical_o2xi7_86", oe = "_flexVerticalBetweenCenter_o2xi7_107", e = {
   fullHeight: O,
   fullWidth: S,
   open: j,
@@ -25,92 +25,92 @@ const O = "_fullHeight_ikhx4_15", S = "_fullWidth_ikhx4_18", j = "_open_ikhx4_21
   flexVerticalBetweenStart: Y,
   flexHorizontalBetween: Z,
   flexVertical: ee,
-  flexVerticalBetweenCenter: ne
-}, fe = ({ menuItems: s = [], menuParams: r = [], shortLogo: _, logo: x, isOpen: m, defaultOpen: w = !1, defaultSelectedId: d }) => {
-  const [o, p] = c(w ?? !1), [k, g] = c(d ?? (s.length > 0 ? s[0].id : null)), N = v(null), [I, u] = c(!1), [V, B] = c(!1), [H, E] = c(null), [z, R] = c({}), L = v(null);
-  M(() => {
-    d && g(d);
+  flexVerticalBetweenCenter: oe
+}, fe = ({ menuItems: s = [], menuParams: r = [], shortLogo: x, logo: m, isOpen: h, defaultOpen: N = !1, defaultSelectedId: d }) => {
+  const [t, p] = c(N ?? !1), [g, B] = c(d ?? (s.length > 0 ? s[0].id : null)), I = M(null), [V, _] = c(!1), [H, C] = c(!1), [k, E] = c(null), [z, R] = c({}), L = M(null);
+  $(() => {
+    d && B(d);
   }, [d]);
-  const C = (n, i) => {
-    if (n.stopPropagation(), g(i), s) {
-      const t = s.find((a) => a.id === i);
-      t == null || t.onClick();
+  const v = (o, i) => {
+    if (o.stopPropagation(), B(i), s) {
+      const l = s.find((a) => a.id === i);
+      l == null || l.onClick();
     }
   }, P = () => {
-    p(!o), u(!1);
-  }, W = (n) => {
+    p(!t), _(!1);
+  }, W = (o) => {
     var i;
     if (r) {
-      const t = r.find((a) => a.id === n);
-      if (!t) return;
-      if (t.content) {
-        const a = o ? "200px" : "40px";
-        E(t.content), R({ ...t.position, left: a }), B(!0);
+      const l = r.find((a) => a.id === o);
+      if (!l) return;
+      if (l.content) {
+        const a = t ? "200px" : "40px";
+        E(l.content), R({ ...l.position, left: a }), C(!0);
       } else
-        (i = t.onClick) == null || i.call(t);
+        (i = l.onClick) == null || i.call(l);
     }
   };
-  return M(() => {
-    m && m(o);
-  }, [o]), /* @__PURE__ */ l("nav", { ref: N, children: /* @__PURE__ */ f("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${o ? e.open : e.close}`, children: [
+  return $(() => {
+    h && h(t);
+  }, [t]), /* @__PURE__ */ n("nav", { ref: I, children: /* @__PURE__ */ f("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${t ? e.open : e.close}`, children: [
     /* @__PURE__ */ f("div", { className: e.fullWidth, children: [
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ n(
         "div",
         {
           className: `${e.flexHorizontalBetween} ${e.pointer} ${e.textEllipsis}`,
           onClick: () => P(),
-          children: o ? /* @__PURE__ */ f("div", { className: e.fullImg, children: [
-            x && /* @__PURE__ */ l("img", { src: x, alt: "Logo situaction" }),
-            /* @__PURE__ */ l(h, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(b, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
-          ] }) : /* @__PURE__ */ l(
+          children: t ? /* @__PURE__ */ f("div", { className: e.fullImg, children: [
+            m && /* @__PURE__ */ n("img", { src: m, alt: "Logo situaction" }),
+            /* @__PURE__ */ n(u, { mode: "ghost", size: "menu", children: /* @__PURE__ */ n(w, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
+          ] }) : /* @__PURE__ */ n(
             "div",
             {
               className: e.closeIcon,
-              onMouseEnter: () => u(!0),
-              onMouseLeave: () => u(!1),
-              onClick: () => p(!o),
-              children: I || !_ ? /* @__PURE__ */ l(h, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(b, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ l("img", { src: _, alt: "Logo situaction" })
+              onMouseEnter: () => _(!0),
+              onMouseLeave: () => _(!1),
+              onClick: () => p(!t),
+              children: V || !x ? /* @__PURE__ */ n(u, { mode: "ghost", size: "menu", children: /* @__PURE__ */ n(w, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ n("img", { src: x, alt: "Logo situaction" })
             }
           )
         }
       ),
-      /* @__PURE__ */ l("div", { className: e.menuItem, children: s && s.map((n) => o ? /* @__PURE__ */ l("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ l(
-        $,
+      /* @__PURE__ */ n("div", { className: e.menuItem, children: s && s.map((o) => t ? /* @__PURE__ */ n("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ n(
+        b,
         {
-          mode: k === n.id ? "secondary" : "ghost",
-          label: n.label,
-          onClick: (i) => C(i, n.id),
-          childrenLeft: n.icon
+          mode: g === o.id ? "secondary" : "ghost",
+          label: o.label,
+          onClick: (i) => v(i, o.id),
+          childrenLeft: o.icon
         }
-      ) }, `button-${n.id}`) : /* @__PURE__ */ l("div", { className: e.textEllipsis, children: /* @__PURE__ */ l(
-        h,
+      ) }, `button-${o.id}`) : /* @__PURE__ */ n("div", { className: e.textEllipsis, children: /* @__PURE__ */ n(
+        u,
         {
-          mode: k === n.id ? "secondary" : "ghost",
-          children: n.icon,
-          onClick: (i) => C(i, n.id)
+          mode: g === o.id ? "secondary" : "ghost",
+          children: o.icon,
+          onClick: (i) => v(i, o.id)
         }
-      ) }, `icon-${n.id}`)) }),
-      /* @__PURE__ */ l("div", { className: e.line })
+      ) }, `icon-${o.id}`)) }),
+      /* @__PURE__ */ n("div", { className: e.line })
     ] }),
     /* @__PURE__ */ f("div", { className: `${e.menuParams} ${e.flexVerticalBetweenCenter}`, children: [
-      r && r.map((n) => /* @__PURE__ */ l(
+      r && r.map((o) => /* @__PURE__ */ n(
         "div",
         {
           className: `${e.fullWidth} ${e.textEllipsis}`,
-          onClick: () => W(n.id),
-          children: o ? /* @__PURE__ */ l("div", { className: e.menuButton, children: /* @__PURE__ */ l($, { mode: "ghost", label: n.label, childrenLeft: n.icon }, n.id) }) : /* @__PURE__ */ l(h, { mode: "ghost", children: n.icon })
+          onClick: () => W(o.id),
+          children: t ? /* @__PURE__ */ n("div", { className: e.menuButton, children: /* @__PURE__ */ n(b, { mode: "ghost", label: o.label, childrenLeft: o.icon }, o.id) }) : /* @__PURE__ */ n(u, { mode: "ghost", children: o.icon })
         },
-        `param-icon-${n.id}`
+        `param-icon-${o.id}`
       )),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ n(
         y,
         {
           ref: L,
           className: e.borderRadiusM,
-          open: V,
-          onClose: () => B(!1),
+          open: H,
+          onClose: () => C(!1),
           position: z,
-          children: H
+          children: k
         }
       )
     ] })

package/dist/components/panel/side-panel/SidePanel.js

@@ -1,46 +1,46 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useState as _, useRef as y, useEffect as f } from "react";
-import '../../../styles/SidePanel.css';const x = "_panel_1d46d_1", v = "_openPanelBtn_1d46d_9", b = "_box_1d46d_18", B = "_panelLeft_1d46d_26", C = "_panelRight_1d46d_33", H = "_panelOpenedLeft_1d46d_40", S = "_panelOpenedRight_1d46d_44", E = "_panelHidden_1d46d_48", N = "_displayPanel_1d46d_52", g = "_hidePanel_1d46d_56", e = {
-  panel: x,
-  openPanelBtn: v,
-  box: b,
-  panelLeft: B,
-  panelRight: C,
-  panelOpenedLeft: H,
-  panelOpenedRight: S,
-  panelHidden: E,
-  displayPanel: N,
-  hidePanel: g
+import { useState as _, useRef as R, useEffect as y } from "react";
+import '../../../styles/SidePanel.css';const L = "_panel_lk5yy_1", x = "_openPanelBtn_lk5yy_9", v = "_box_lk5yy_18", b = "_panelLeft_lk5yy_29", B = "_panelRight_lk5yy_36", C = "_panelOpenedLeft_lk5yy_43", H = "_panelOpenedRight_lk5yy_47", S = "_panelHidden_lk5yy_51", E = "_displayPanel_lk5yy_55", N = "_hidePanel_lk5yy_59", e = {
+  panel: L,
+  openPanelBtn: x,
+  box: v,
+  panelLeft: b,
+  panelRight: B,
+  panelOpenedLeft: C,
+  panelOpenedRight: H,
+  panelHidden: S,
+  displayPanel: E,
+  hidePanel: N
 }, $ = ({
-  children: u,
-  width: s,
-  left: p = !0,
+  children: f,
+  width: a,
+  left: o = !0,
   opened: n = !1,
   onToggle: t
 }) => {
-  const [a, l] = _(n), [m, d] = _(n), i = y(null), h = {
-    "--dynamic-left": `-${s}`,
-    "--dynamic-right": `-${s}`,
-    width: s
-  }, P = p ? e.panelLeft : e.panelRight, O = p ? e.panelOpenedLeft : e.panelOpenedRight, R = [
+  const [l, s] = _(n), [u, i] = _(n), p = R(null), m = {
+    "--dynamic-left": `-${a}`,
+    "--dynamic-right": `-${a}`,
+    width: a
+  }, h = o ? e.panelLeft : e.panelRight, P = o ? e.panelOpenedLeft : e.panelOpenedRight, k = [
     e.panel,
-    P,
-    !a && e.panelHidden,
-    a && O,
-    m ? e.displayPanel : e.hidePanel
+    h,
+    !l && e.panelHidden,
+    l && P,
+    u ? e.displayPanel : e.hidePanel
   ].filter(Boolean).join(" ");
-  return f(() => {
-    n ? (d(!0), setTimeout(() => l(!0), 10)) : (l(!1), setTimeout(() => d(!1), 300));
-  }, [n]), f(() => {
-    const o = (L) => {
-      const c = L.target;
-      c.closest("[data-ignore-outside-click]") || i.current && !i.current.contains(c) && (l(!1), t == null || t(!1), setTimeout(() => d(!1), 300));
+  return y(() => {
+    n ? (i(!0), setTimeout(() => s(!0), 10)) : (s(!1), setTimeout(() => i(!1), 300));
+  }, [n]), y(() => {
+    const d = (O) => {
+      const c = O.target;
+      c.closest("[data-ignore-outside-click]") || p.current && !p.current.contains(c) && (s(!1), t == null || t(!1), setTimeout(() => i(!1), 300));
     };
-    if (a)
-      return document.addEventListener("mousedown", o), () => {
-        document.removeEventListener("mousedown", o);
+    if (l)
+      return document.addEventListener("mousedown", d), () => {
+        document.removeEventListener("mousedown", d);
       };
-  }, [a, t]), /* @__PURE__ */ r("div", { style: h, className: R, children: /* @__PURE__ */ r("div", { ref: i, className: e.box, children: u }) });
+  }, [l, t]), /* @__PURE__ */ r("div", { style: m, className: k, children: /* @__PURE__ */ r("div", { ref: p, className: e.box, children: f }) });
 };
 export {
   $ as SidePanel

package/dist/components/select/Select.js

@@ -1,53 +1,53 @@
 import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import { useState as f, useRef as N, useEffect as C } from "react";
-import { Button as _ } from "../button/Button.js";
+import { useState as p, useRef as w, useEffect as C } from "react";
+import { Button as f } from "../button/Button.js";
 import '../../styles/Size.css';import '../../styles/index.css';import '../../styles/Select.css';/* empty css                    */
-import { IconButton as S } from "../icon-button/IconButton.js";
-import { Icon as a } from "../icon/Icon.js";
-import { Modal as g } from "../modal/Modal.js";
+import { IconButton as k } from "../icon-button/IconButton.js";
+import { Icon as i } from "../icon/Icon.js";
+import { Modal as x } from "../modal/Modal.js";
 import "../theme/ThemeContext.js";
 /* empty css                   */
-const R = "_selectContainer_ak06l_40", y = "_selected_ak06l_43", z = "_children_ak06l_47", B = "_active_ak06l_62", F = "_selectList_ak06l_66", j = "_modal_ak06l_75", U = "_dropdownFadeIn_ak06l_1", $ = "_itemLabel_ak06l_81", c = {
-  selectContainer: R,
-  selected: y,
-  children: z,
-  active: B,
-  selectList: F,
-  modal: j,
-  dropdownFadeIn: U,
-  itemLabel: $
-}, K = ({ selected: i, size: s = "m", listItem: h, modeDisplay: r = "all", onSelect: p, positionOverride: d }) => {
-  const [n, o] = f(!1), k = N(null), [L, v] = f({ top: "calc(100% + 6px)" }), I = i ?? h[0], [t, b] = f(I);
+const N = "_selectContainer_glqzp_40", S = "_selected_glqzp_43", R = "_children_glqzp_47", y = "_active_glqzp_64", B = "_selectList_glqzp_68", F = "_modal_glqzp_77", j = "_dropdownFadeIn_glqzp_1", U = "_itemLabel_glqzp_84", c = {
+  selectContainer: N,
+  selected: S,
+  children: R,
+  active: y,
+  selectList: B,
+  modal: F,
+  dropdownFadeIn: j,
+  itemLabel: U
+}, K = ({ selected: a, size: s = "m", listItem: _, modeDisplay: r = "all", onSelect: h, positionOverride: d }) => {
+  const [n, o] = p(!1), g = w(null), [z, L] = p({ top: "calc(100% + 6px)" }), v = a ?? _[0], [t, b] = p(v);
   C(() => {
-    i && b(i);
-  }, [i]), C(() => {
-    d && v(d);
+    a && b(a);
+  }, [a]), C(() => {
+    d && L(d);
   }, [d]);
-  const w = (e) => {
-    b(e), o(!1), p && p(e);
-  }, x = () => {
+  const q = (e) => {
+    b(e), o(!1), h && h(e);
+  }, I = () => {
     const e = !!t.icon, m = !!t.label;
-    return t.icon && r === "icon" && e ? /* @__PURE__ */ l(S, { mode: "tertiary", size: s ?? "m", onClick: () => o(!n), children: /* @__PURE__ */ l(a, { icon: t.icon }) }) : t.label && r === "text" && m ? /* @__PURE__ */ l(
-      _,
+    return t.icon && r === "icon" && e ? /* @__PURE__ */ l(k, { mode: "tertiary", size: s ?? "m", onClick: () => o(!n), children: /* @__PURE__ */ l(i, { icon: t.icon }) }) : t.label && r === "text" && m ? /* @__PURE__ */ l(
+      f,
       {
         mode: "tertiary",
         label: t.label,
-        childrenRight: /* @__PURE__ */ l(a, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        childrenRight: /* @__PURE__ */ l(i, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
         size: s ?? "m",
         onClick: () => o(!n)
       }
     ) : t.label && t.icon && r === "all" && (e || m) ? /* @__PURE__ */ l(
-      _,
+      f,
       {
         mode: "tertiary",
         label: m ? t.label : "",
         size: s ?? "m",
-        childrenLeft: e && /* @__PURE__ */ l(a, { icon: t.icon }),
-        childrenRight: /* @__PURE__ */ l(a, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        childrenLeft: e && /* @__PURE__ */ l(i, { icon: t.icon }),
+        childrenRight: /* @__PURE__ */ l(i, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
         onClick: () => o(!n)
       }
     ) : /* @__PURE__ */ l(
-      _,
+      f,
       {
         mode: "tertiary",
         label: "Sélectionner",
@@ -57,22 +57,22 @@ const R = "_selectContainer_ak06l_40", y = "_selected_ak06l_43", z = "_children_
     );
   };
   return /* @__PURE__ */ u("div", { className: c.selectContainer, children: [
-    x(),
+    I(),
     /* @__PURE__ */ l(
-      g,
+      x,
       {
-        ref: k,
+        ref: g,
         open: n,
         onClose: () => o(!1),
         className: c.modal,
-        position: L,
-        children: /* @__PURE__ */ l("div", { className: c.selectList, children: h.map((e) => /* @__PURE__ */ u(
+        position: z,
+        children: /* @__PURE__ */ l("div", { className: c.selectList, children: _.map((e) => /* @__PURE__ */ u(
           "div",
           {
             className: `${c.children} ${e.value === t.value ? c.active : ""}`,
-            onClick: () => w(e),
+            onClick: () => q(e),
             children: [
-              e.icon && /* @__PURE__ */ l(a, { icon: e.icon }),
+              e.icon && /* @__PURE__ */ l(i, { icon: e.icon }),
               e.label && /* @__PURE__ */ l("div", { className: c.itemLabel, children: e.label })
             ]
           },

package/dist/components/tabs/Tabs.js

@@ -1,69 +1,74 @@
-import { jsxs as H, jsx as r } from "react/jsx-runtime";
-import { useState as f, useRef as u, useLayoutEffect as C, useEffect as $ } from "react";
+import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { useState as m, useRef as _, useEffect as d, useLayoutEffect as C } from "react";
 import '../../styles/index.css';import '../../styles/Tabs.css';/* empty css                    */
-import { Button as p } from "../button/Button.js";
-import { IconButton as B } from "../icon-button/IconButton.js";
-const N = "_underline_udv7v_50", n = {
-  "tab-container": "_tab-container_udv7v_23",
-  "tab-container-button": "_tab-container-button_udv7v_27",
-  "tab-container-icon": "_tab-container-icon_udv7v_32",
-  "tab-container-text": "_tab-container-text_udv7v_32",
-  "tab-items": "_tab-items_udv7v_35",
-  "tab-items-button": "_tab-items-button_udv7v_39",
-  "selected-button": "_selected-button_udv7v_44",
-  underline: N,
-  "flexHorizontal-center": "_flexHorizontal-center_udv7v_58",
-  "flexHorizontal-left": "_flexHorizontal-left_udv7v_64",
-  "flexHorizontal-right": "_flexHorizontal-right_udv7v_70"
-}, E = ({ listItems: c, type: o, onTabSelect: v, defaultActiveTab: i = 0, position: m = "left" }) => {
-  const [l, b] = f(i), [x, h] = f({}), a = u(null), g = u(null), _ = u(new Array(c.length).fill(null)), d = (t) => {
-    b(t), v(c[t]);
-  }, z = (t) => {
-    if (a.current && t) {
-      const e = t.getBoundingClientRect(), s = a.current.getBoundingClientRect();
-      h({
-        left: `${e.left - s.left}px`,
+import { Button as N } from "../button/Button.js";
+import { IconButton as $ } from "../icon-button/IconButton.js";
+const p = "_underline_12jm7_57", n = {
+  "tab-container": "_tab-container_12jm7_23",
+  "tab-container-button": "_tab-container-button_12jm7_27",
+  "tab-container-icon": "_tab-container-icon_12jm7_32",
+  "tab-container-text": "_tab-container-text_12jm7_32",
+  "tab-items": "_tab-items_12jm7_35",
+  "tab-items-button": "_tab-items-button_12jm7_39",
+  "selected-button": "_selected-button_12jm7_44",
+  "selected-text": "_selected-text_12jm7_50",
+  underline: p,
+  "flexHorizontal-center": "_flexHorizontal-center_12jm7_65",
+  "flexHorizontal-left": "_flexHorizontal-left_12jm7_71",
+  "flexHorizontal-right": "_flexHorizontal-right_12jm7_77"
+}, E = ({ listItems: o, type: l, onTabSelect: x, defaultActiveTab: a = 0, position: h = "left" }) => {
+  const [r, b] = m(a), [j, g] = m({}), i = _(null), z = _(null), s = _(new Array(o.length).fill(null));
+  d(() => {
+    s.current = new Array(o.length).fill(null);
+  }, [o.length]);
+  const f = (t) => {
+    b(t), x(o[t]);
+  }, R = (t) => {
+    if (i.current && t) {
+      const e = t.getBoundingClientRect(), u = i.current.getBoundingClientRect();
+      g({
+        left: `${e.left - u.left}px`,
         width: `${e.width}px`
       });
     }
-  }, R = [
-    n[`flexHorizontal-${m}`],
-    o === "button" ? n["tab-items-button"] : n["tab-items"]
+  }, H = [
+    n[`flexHorizontal-${h}`],
+    l === "button" ? n["tab-items-button"] : n["tab-items"]
   ].filter(Boolean).join(" ");
   return C(() => {
-    const t = _.current[l];
-    t && z(t);
-  }, [l]), $(() => {
-    b(i);
-  }, [i]), /* @__PURE__ */ H("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]}`, ref: a, children: [
-    /* @__PURE__ */ r("div", { className: R, children: c.map((t, e) => /* @__PURE__ */ r(
+    const t = s.current[r];
+    t && R(t);
+  }, [r, o.length]), d(() => {
+    b(a);
+  }, [a]), /* @__PURE__ */ v("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${l}`]}`, ref: i, children: [
+    /* @__PURE__ */ c("div", { className: H, children: o.map((t, e) => /* @__PURE__ */ c(
       "div",
       {
-        ref: (s) => _.current[e] = s,
-        className: o === "button" && e === l ? n["selected-button"] : "",
-        children: o === "icon" ? /* @__PURE__ */ r(
-          B,
+        ref: (u) => s.current[e] = u,
+        className: l === "button" && e === r ? n["selected-button"] : "",
+        children: l === "icon" ? /* @__PURE__ */ c(
+          $,
           {
             mode: "icon",
             size: "s",
-            selected: e === l,
-            onClick: () => d(e),
+            selected: e === r,
+            onClick: () => f(e),
             children: t
           }
-        ) : /* @__PURE__ */ r(
-          p,
+        ) : /* @__PURE__ */ c("div", { className: e === r ? n["selected-text"] : void 0, children: /* @__PURE__ */ c(
+          N,
           {
             size: "s",
             label: t,
-            mode: o === "text" ? "text" : "ghost",
-            selected: e === l,
-            onClick: () => d(e)
+            mode: l === "text" ? "text" : "ghost",
+            selected: e === r,
+            onClick: () => f(e)
           }
-        )
+        ) })
       },
       e
     )) }),
-    o !== "button" && /* @__PURE__ */ r("div", { ref: g, className: n.underline, style: x })
+    l !== "button" && /* @__PURE__ */ c("div", { ref: z, className: n.underline, style: j })
   ] });
 };
 export {

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_ikhx4_15{height:100%}nav ._fullWidth_ikhx4_18{width:100%}nav ._open_ikhx4_21{width:200px;transition:all ease .3s}nav ._close_ikhx4_25{width:40px;transition:all ease-out .3s}nav ._menuButton_ikhx4_29{width:100%}nav ._menuButton_ikhx4_29 button{padding:var(--spacing-xs-4);width:inherit!important;justify-content:flex-start!important}nav ._closeIcon_ikhx4_37{height:30px;cursor:pointer;margin:.875rem 0}nav ._label_ikhx4_42{letter-spacing:.72px;font-weight:600}nav ._textEllipsis_ikhx4_46{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}nav ._pointer_ikhx4_51{cursor:pointer}nav ._fullImg_ikhx4_54{margin:.875rem 0;display:flex;justify-content:space-between;width:100%}nav ._menuParams_ikhx4_60{gap:.125rem;position:relative;width:100%}._line_ikhx4_66{height:1px;width:100%;background-color:var(--general-border-window);margin:var(--spacing-xs-3) 0}._borderRadiusM_ikhx4_73{border-radius:4px}._menuItem_ikhx4_77{gap:.25rem;width:100%;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._flexVerticalBetweenStart_ikhx4_86{display:flex;justify-content:space-between;align-items:start;flex-direction:column}._flexHorizontalBetween_ikhx4_93{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexVertical_ikhx4_86{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._flexVerticalBetweenCenter_ikhx4_107{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_o2xi7_15{height:100%}nav ._fullWidth_o2xi7_18{width:100%}nav ._open_o2xi7_21{width:200px;transition:all ease .3s}nav ._close_o2xi7_25{width:40px;transition:all ease-out .3s}nav ._menuButton_o2xi7_29{width:100%}nav ._menuButton_o2xi7_29 button{padding:var(--spacing-xs-4);width:inherit!important;justify-content:flex-start!important}nav ._closeIcon_o2xi7_37{height:30px;cursor:pointer;margin:.875rem 0}nav ._label_o2xi7_42{letter-spacing:.72px;font-weight:600}nav ._textEllipsis_o2xi7_46{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}nav ._pointer_o2xi7_51{cursor:pointer}nav ._fullImg_o2xi7_54{margin:.875rem 0;display:flex;justify-content:space-between;width:100%}nav ._menuParams_o2xi7_60{gap:.125rem;position:relative;width:100%}._line_o2xi7_66{height:1px;width:100%;background-color:var(--general-border-window);margin:var(--spacing-xs-3) 0}._borderRadiusM_o2xi7_73{border-radius:6px}._menuItem_o2xi7_77{gap:.25rem;width:100%;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._flexVerticalBetweenStart_o2xi7_86{display:flex;justify-content:space-between;align-items:start;flex-direction:column}._flexHorizontalBetween_o2xi7_93{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexVertical_o2xi7_86{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._flexVerticalBetweenCenter_o2xi7_107{display:flex;justify-content:space-between;align-items:center;flex-direction:column}

package/dist/styles/Select.css

@@ -1 +1 @@
-._selectContainer_ak06l_40{position:relative}._selectContainer_ak06l_40 ._selected_ak06l_43{background:var(--button-tertiary-pressed-background);border-radius:var(--spacing-xs-6)}._selectContainer_ak06l_40 ._children_ak06l_47{padding:var(--spacing-xs-6) var(--spacing-xs-5);box-sizing:border-box;width:100%;gap:.5rem;cursor:pointer;display:flex;justify-content:flex-start;align-items:start;flex-direction:row}._selectContainer_ak06l_40 ._children_ak06l_47:hover{background:var(--dropdown-line-background-hover);border-radius:var(--spacing-xs-6)}._selectContainer_ak06l_40 ._children_ak06l_47._active_ak06l_62{background:var(--button-tertiary-pressed-background);border-radius:var(--spacing-xs-6)}._selectContainer_ak06l_40 ._selectList_ak06l_66{max-height:200px;overflow-y:auto;gap:.25rem;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._selectContainer_ak06l_40 ._modal_ak06l_75{border-radius:4px;padding:.5rem;animation:_dropdownFadeIn_ak06l_1 .2s ease-out;transform-origin:top left}._selectContainer_ak06l_40 ._itemLabel_ak06l_81{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes _dropdownFadeIn_ak06l_1{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
+._selectContainer_glqzp_40{position:relative}._selectContainer_glqzp_40 ._selected_glqzp_43{background:var(--button-tertiary-pressed-background);border-radius:var(--spacing-xs-6)}._selectContainer_glqzp_40 ._children_glqzp_47{padding:var(--spacing-xs-6) var(--spacing-xs-5);box-sizing:border-box;width:100%;gap:.5rem;cursor:pointer;font-style:normal;line-height:1.25rem;display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._selectContainer_glqzp_40 ._children_glqzp_47:hover{background:var(--dropdown-line-background-hover);border-radius:var(--spacing-xs-6)}._selectContainer_glqzp_40 ._children_glqzp_47._active_glqzp_64{background:var(--button-tertiary-pressed-background);border-radius:var(--spacing-xs-6)}._selectContainer_glqzp_40 ._selectList_glqzp_68{max-height:200px;overflow-y:auto;gap:.125rem;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._selectContainer_glqzp_40 ._modal_glqzp_77{box-shadow:0 4px 4px 0 var(--shadow-color-lowest);border-radius:4px;padding:.25rem;animation:_dropdownFadeIn_glqzp_1 .2s ease-out;transform-origin:top left}._selectContainer_glqzp_40 ._itemLabel_glqzp_84{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes _dropdownFadeIn_glqzp_1{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

package/dist/styles/SidePanel.css

@@ -1 +1 @@
-._panel_1d46d_1{position:absolute;z-index:10;top:0;transition:.3s;height:100%;box-sizing:border-box}._panel_1d46d_1 ._openPanelBtn_1d46d_9{width:40px;height:70px;background-color:var(--background-secondary);color:#fff;cursor:pointer;top:50%;transform:translateY(-50%)}._panel_1d46d_1 ._box_1d46d_18{box-shadow:0 10px 10px #0003;height:100%;box-sizing:border-box;position:relative;background-color:var(--background-primary)}._panelLeft_1d46d_26{left:var(--dynamic-left)}._panelLeft_1d46d_26>div{border-radius:0 var(--spacing-xs) var(--spacing-xs) 0}._panelRight_1d46d_33{right:var(--dynamic-right)}._panelRight_1d46d_33>div{border-radius:var(--spacing-xs) 0 0 var(--spacing-xs)}._panelOpenedLeft_1d46d_40{left:0}._panelOpenedRight_1d46d_44{right:0}._panelHidden_1d46d_48{visibility:hidden}._displayPanel_1d46d_52{display:block}._hidePanel_1d46d_56{display:none}
+._panel_lk5yy_1{position:absolute;z-index:10;top:0;transition:.3s;height:100%;box-sizing:border-box}._panel_lk5yy_1 ._openPanelBtn_lk5yy_9{width:40px;height:70px;background-color:var(--background-secondary);color:#fff;cursor:pointer;top:50%;transform:translateY(-50%)}._panel_lk5yy_1 ._box_lk5yy_18{box-shadow:0 10px 10px #0003;height:100%;box-sizing:border-box;position:relative;background-color:var(--background-primary);border-top:1px solid var(--general-border-window);border-left:1px solid var(--general-border-window);border-bottom:1px solid var(--general-border-window)}._panelLeft_lk5yy_29{left:var(--dynamic-left)}._panelLeft_lk5yy_29>div{border-radius:0 var(--spacing-xs) var(--spacing-xs) 0}._panelRight_lk5yy_36{right:var(--dynamic-right)}._panelRight_lk5yy_36>div{border-radius:var(--spacing-xs) 0 0 var(--spacing-xs)}._panelOpenedLeft_lk5yy_43{left:0}._panelOpenedRight_lk5yy_47{right:0}._panelHidden_lk5yy_51{visibility:hidden}._displayPanel_lk5yy_55{display:block}._hidePanel_lk5yy_59{display:none}

package/dist/styles/Tabs.css

@@ -1 +1 @@
-._tab-container_udv7v_23{position:relative;line-height:1.25rem}._tab-container-button_udv7v_27{border-radius:.375rem;border:1px solid var(--tabs-button-border);background:var(--tabs-button-background)}._tab-container-icon_udv7v_32,._tab-container-text_udv7v_32{border-bottom:1px solid var(--tabs-line-border)}._tab-items_udv7v_35{gap:2.25rem;padding:.625rem .125rem}._tab-items-button_udv7v_39{gap:.25rem;padding:.125rem}._selected-button_udv7v_44{border:1px solid var(--button-tertiary-default-border);background:var(--tabs-button-background-button);border-radius:.25rem}._underline_udv7v_50{position:absolute;bottom:0;height:2px;background-color:var(--tabs-cell-active-border);transition:all .3s ease}._flexHorizontal-center_udv7v_58{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal-left_udv7v_64{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._flexHorizontal-right_udv7v_70{display:flex;justify-content:flex-end;align-items:center;flex-direction:row}
+._tab-container_12jm7_23{position:relative;line-height:1.25rem}._tab-container-button_12jm7_27{border-radius:.375rem;border:1px solid var(--tabs-button-border);background:var(--tabs-button-background)}._tab-container-icon_12jm7_32,._tab-container-text_12jm7_32{border-bottom:1px solid var(--tabs-line-border)}._tab-items_12jm7_35{gap:2.25rem;padding:.625rem .125rem}._tab-items-button_12jm7_39{gap:.25rem;padding:.125rem}._selected-button_12jm7_44{border:1px solid var(--button-tertiary-default-border);background:var(--tabs-button-background-button);border-radius:.25rem}._selected-text_12jm7_50>button{font-weight:600!important}._selected-text_12jm7_50>button:hover{background-color:transparent!important}._underline_12jm7_57{position:absolute;bottom:0;height:2px;background-color:var(--tabs-cell-active-border);transition:all .3s ease}._flexHorizontal-center_12jm7_65{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal-left_12jm7_71{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._flexHorizontal-right_12jm7_77{display:flex;justify-content:flex-end;align-items:center;flex-direction:row}

package/package.json

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