@situaction/traq-ui-ste 1.2.23 → 1.2.24

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/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/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/package.json

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