@situaction/traq-ui-ste 1.1.29 → 1.1.31

package/dist/components/button/Button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, FC, ReactNode, MouseEvent } from 'react';
+import { ButtonHTMLAttributes, ReactNode, MouseEvent } from 'react';
 import { Size } from '../interface';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -22,4 +22,4 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 /**
  * Primary UI component for user interaction
  */
-export declare const Button: FC<ButtonProps>;
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/button/Button.js

@@ -1,7 +1,7 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import '../../styles/index.css';import '../../styles/Button.css';/* empty css                    */
-const i = "_button_mzv5s_30", p = "_flexHorizontalCenter_mzv5s_191", t = {
-  button: i,
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import '../../styles/Button.css';const v = "_button_mzv5s_30", x = "_flexHorizontalCenter_mzv5s_191", t = {
+  button: v,
   "button-primary": "_button-primary_mzv5s_54",
   "button-secondary": "_button-secondary_mzv5s_68",
   "button-tertiary": "_button-tertiary_mzv5s_84",
@@ -19,39 +19,42 @@ const i = "_button_mzv5s_30", p = "_flexHorizontalCenter_mzv5s_191", t = {
   "button-gap-l": "_button-gap-l_mzv5s_184",
   "button-gap-m": "_button-gap-m_mzv5s_178",
   "button-gap-s": "_button-gap-s_mzv5s_187",
-  flexHorizontalCenter: p
-}, c = ({
-  mode: o = "primary",
-  size: e = "m",
-  label: u,
-  error: b,
-  selected: r,
-  childrenLeft: s,
-  childrenRight: _,
-  ...m
-}) => {
-  const a = () => b ? "error" : o, z = [
-    t.button,
-    t[`button-${a()}`],
-    t[`button-size-${e}`],
-    t[`button-gap-${e}`],
-    r && o === "text" && t["button-text-selected"],
-    t.flexHorizontalCenter
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ l(
-    "button",
-    {
-      type: "button",
-      className: z,
-      ...m,
-      children: [
-        s && /* @__PURE__ */ n("span", { className: t.flexHorizontalCenter, children: s }),
-        /* @__PURE__ */ n("span", { children: u }),
-        _ && /* @__PURE__ */ n("span", { className: t.flexHorizontalCenter, children: _ })
-      ]
-    }
-  );
-};
+  flexHorizontalCenter: x
+}, f = p(
+  ({
+    mode: n = "primary",
+    size: e = "m",
+    label: u,
+    error: b,
+    selected: r,
+    childrenLeft: s,
+    childrenRight: _,
+    ...m
+  }, a) => {
+    const z = () => b ? "error" : n, l = [
+      t.button,
+      t[`button-${z()}`],
+      t[`button-size-${e}`],
+      t[`button-gap-${e}`],
+      r && n === "text" && t["button-text-selected"],
+      t.flexHorizontalCenter
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ i(
+      "button",
+      {
+        ref: a,
+        type: "button",
+        className: l,
+        ...m,
+        children: [
+          s && /* @__PURE__ */ o("span", { className: t.flexHorizontalCenter, children: s }),
+          /* @__PURE__ */ o("span", { children: u }),
+          _ && /* @__PURE__ */ o("span", { className: t.flexHorizontalCenter, children: _ })
+        ]
+      }
+    );
+  }
+);
 export {
-  c as Button
+  f as Button
 };

package/dist/components/editable-field/EditableField.js

@@ -1,9 +1,9 @@
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { InputLabel as c } from "../input-label/InputLabel.js";
-import '../../styles/EditableField.css';const m = "_editableField_1lhi9_30", o = "_statiqueField_1lhi9_39", l = {
+import '../../styles/EditableField.css';const m = "_editableField_12vkl_30", o = "_statiqueField_12vkl_40", l = {
   editableField: m,
   statiqueField: o
-}, h = ({
+}, p = ({
   label: i,
   value: e,
   placeholder: d,
@@ -26,5 +26,5 @@ import '../../styles/EditableField.css';const m = "_editableField_1lhi9_30", o =
   /* @__PURE__ */ t("div", { className: `${l.statiqueField} textSmall`, children: (e == null ? void 0 : e.trim()) || " " })
 ] });
 export {
-  h as EditableField
+  p as EditableField
 };

package/dist/components/editable-select/EditableSelect.d.ts

@@ -0,0 +1,14 @@
+import { SelectItem } from '../select/Select';
+
+interface EditableSelectProps {
+    label: string;
+    listItems: SelectItem[];
+    value?: string;
+    placeholder?: string;
+    edit: boolean;
+    onSelect?: (selected: SelectItem) => void;
+    selected?: SelectItem;
+    autoCloseCondition: boolean;
+}
+export declare const EditableSelect: ({ label, listItems, value, placeholder, edit, onSelect, selected, autoCloseCondition }: EditableSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editable-select/EditableSelect.js

@@ -0,0 +1,26 @@
+import { jsxs as i, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { Select as S } from "../select/Select.js";
+import '../../styles/EditableSelect.css';const x = "_editableSelect_6vsm4_30", p = "_statiqueField_6vsm4_40", l = {
+  editableSelect: x,
+  statiqueField: p
+}, F = ({ label: s, listItems: a, value: t, placeholder: c, edit: d, onSelect: m, selected: r, autoCloseCondition: n }) => d ? /* @__PURE__ */ i(o, { children: [
+  /* @__PURE__ */ e("span", { className: "textSmall", children: s }),
+  /* @__PURE__ */ e(
+    S,
+    {
+      size: "s",
+      listItem: a,
+      placeholder: c,
+      modeDisplay: "text",
+      onSelect: m,
+      selected: r,
+      autoCloseCondition: n
+    }
+  )
+] }) : /* @__PURE__ */ i("div", { className: l.editableSelect, children: [
+  /* @__PURE__ */ e("span", { className: "textSmall", children: s }),
+  /* @__PURE__ */ e("div", { className: `${l.statiqueField} textSmall`, children: (t == null ? void 0 : t.trim()) || "-" })
+] });
+export {
+  F as EditableSelect
+};

package/dist/components/icon-button/IconButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, FC, MouseEvent, ReactElement } from 'react';
+import { ButtonHTMLAttributes, MouseEvent, ReactElement } from 'react';
 import { Size } from '../interface';
 
 export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -24,4 +24,4 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
  * It supports customization such as size, style mode, and error state.
  * The button can also be disabled or selected based on props.
  */
-export declare const IconButton: FC<IconButtonProps>;
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/icon-button/IconButton.js

@@ -1,6 +1,7 @@
-import { jsx as i } from "react/jsx-runtime";
-import '../../styles/IconButton.css';const c = "_button_kvvl4_30", a = "_flexHorizontalCenter_kvvl4_184", t = {
-  button: c,
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as k } from "react";
+import '../../styles/IconButton.css';const z = "_button_kvvl4_30", m = "_flexHorizontalCenter_kvvl4_184", t = {
+  button: z,
   "button-round": "_button-round_kvvl4_58",
   "button-primary": "_button-primary_kvvl4_61",
   "button-secondary": "_button-secondary_kvvl4_75",
@@ -14,35 +15,40 @@ import '../../styles/IconButton.css';const c = "_button_kvvl4_30", a = "_flexHor
   "button-size-m": "_button-size-m_kvvl4_167",
   "button-size-s": "_button-size-s_kvvl4_172",
   "button-size-menu": "_button-size-menu_kvvl4_177",
-  flexHorizontalCenter: a
-}, z = ({
-  mode: o = "primary",
-  size: n = "m",
-  error: e,
-  selected: _,
-  round: u,
-  disabled: r,
-  children: b,
-  onClick: l
-}) => {
-  const s = () => e ? "error" : o, v = [
-    t.button,
-    t[`button-${s()}`],
-    u && t["button-round"],
-    t[`button-size-${n}`],
-    _ && o === "icon" && t["button-icon-selected"],
-    t.flexHorizontalCenter
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ i(
-    "button",
-    {
-      className: v,
-      onClick: l,
-      disabled: r,
-      children: b
-    }
-  );
-};
+  flexHorizontalCenter: m
+}, d = k(
+  ({
+    mode: o = "primary",
+    size: n = "m",
+    error: e,
+    selected: _,
+    round: u,
+    disabled: r,
+    children: b,
+    onClick: l,
+    ...s
+  }, i) => {
+    const v = () => e ? "error" : o, c = [
+      t.button,
+      t[`button-${v()}`],
+      u && t["button-round"],
+      t[`button-size-${n}`],
+      _ && o === "icon" && t["button-icon-selected"],
+      t.flexHorizontalCenter
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ a(
+      "button",
+      {
+        ref: i,
+        className: c,
+        onClick: l,
+        disabled: r,
+        ...s,
+        children: b
+      }
+    );
+  }
+);
 export {
-  z as IconButton
+  d as IconButton
 };

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

@@ -1,12 +1,12 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { Button as p } from "../../button/Button.js";
 import "react";
-import '../../../styles/Size.css';import '../../../styles/index.css';import '../../../styles/ListControls.css';/* empty css                       */
+import "../../icon-button/IconButton.js";
 import { Checkbox as _ } from "../../checkbox/Checkbox.js";
 import { Icon as a } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
 import "../../theme/ThemeContext.js";
-/* empty css                      */
+import '../../../styles/Size.css';import '../../../styles/ListControls.css';/* empty css                      */
 const u = "_list_1nihg_6", f = "_children_1nihg_29", g = "_selected_1nihg_43", k = "_reset_1nihg_47", i = {
   list: u,
   children: f,

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

@@ -2,11 +2,11 @@ import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import { NestedListItem as c } from "./item/NestedListItem.js";
 import { Button as p } from "../../button/Button.js";
 import "react";
-import '../../../styles/Size.css';import '../../../styles/index.css';import '../../../styles/NestedList.css';/* empty css                       */
+import "../../icon-button/IconButton.js";
 import { Icon as a } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
 import "../../theme/ThemeContext.js";
-/* empty css                      */
+import '../../../styles/Size.css';import '../../../styles/NestedList.css';/* empty css                      */
 const h = "_nestedlist_7rnd3_6", _ = "_reset_7rnd3_18", r = {
   nestedlist: h,
   reset: _

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

@@ -1,17 +1,18 @@
-import { jsxs as r, Fragment as w, jsx as t } from "react/jsx-runtime";
+import { jsxs as n, Fragment as w, jsx as t } from "react/jsx-runtime";
 import { useState as g, useRef as u, useLayoutEffect as z } from "react";
-import '../../../../styles/Size.css';import '../../../../styles/index.css';import '../../../../styles/NestedListItem.css';/* empty css                          */
+import "../../../button/Button.js";
+import "../../../icon-button/IconButton.js";
 import { TagCounter as B } from "../../../tag-counter/TagCounter.js";
 import { Icon as l } from "../../../icon/Icon.js";
 import { Modal as L } from "../../../modal/Modal.js";
 import "../../../theme/ThemeContext.js";
-/* empty css                         */
+import '../../../../styles/Size.css';import '../../../../styles/NestedListItem.css';/* empty css                         */
 const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28", v = "_modal_2r2ga_34", s = {
   nestedlist: S,
   items: $,
   textSmall: j,
   modal: v
-}, T = ({
+}, W = ({
   icon: a,
   title: h,
   numberSelect: i,
@@ -19,13 +20,13 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
   onClick: m,
   align: e = "right"
 }) => {
-  const [c, d] = g(!1), n = u(null), o = u(null), [x, C] = g({
+  const [c, d] = g(!1), r = u(null), o = u(null), [x, C] = g({
     top: "0px"
   });
   z(() => {
     var p;
-    if (n.current && o.current) {
-      const N = o.current.getBoundingClientRect(), f = n.current.getBoundingClientRect().width, M = ((p = o.current.parentElement) == null ? void 0 : p.getBoundingClientRect().top) || 0;
+    if (r.current && o.current) {
+      const N = o.current.getBoundingClientRect(), f = r.current.getBoundingClientRect().width, M = ((p = o.current.parentElement) == null ? void 0 : p.getBoundingClientRect().top) || 0;
       C({
         top: `${N.top - M}px`,
         ...e === "right" ? { right: `-${f + 6}px` } : { left: `-${f + 6}px` }
@@ -35,8 +36,8 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
   const R = () => {
     d(!0), m && m();
   };
-  return /* @__PURE__ */ r(w, { children: [
-    /* @__PURE__ */ r(
+  return /* @__PURE__ */ n(w, { children: [
+    /* @__PURE__ */ n(
       "div",
       {
         ref: o,
@@ -44,7 +45,7 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
         onClick: R,
         children: [
           e === "left" && /* @__PURE__ */ t(l, { icon: "CaretLeft", size: 14, weight: "regular" }),
-          /* @__PURE__ */ r("div", { className: s.items, children: [
+          /* @__PURE__ */ n("div", { className: s.items, children: [
             a && /* @__PURE__ */ t(l, { icon: a }),
             /* @__PURE__ */ t("span", { className: s.textSmall, children: h }),
             i && i > 0 && /* @__PURE__ */ t(B, { size: "s", label: i ?? 0 })
@@ -56,7 +57,7 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
     /* @__PURE__ */ t(
       L,
       {
-        ref: n,
+        ref: r,
         className: s.modal,
         open: c,
         onClose: () => d(!1),
@@ -67,5 +68,5 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
   ] });
 };
 export {
-  T as NestedListItem
+  W as NestedListItem
 };

package/dist/components/menu/Menu.js

@@ -1,12 +1,11 @@
 import { jsx as l, 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 u } from "../icon-button/IconButton.js";
 import { Icon as w } from "../icon/Icon.js";
 import { Modal as W } from "../modal/Modal.js";
 import "../theme/ThemeContext.js";
-/* empty css                   */
+import '../../styles/Size.css';import '../../styles/Menu.css';/* empty css                   */
 const y = "_fullHeight_o2xi7_15", O = "_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: y,
   fullWidth: O,
@@ -26,7 +25,7 @@ const y = "_fullHeight_o2xi7_15", O = "_fullWidth_o2xi7_18", j = "_open_o2xi7_21
   flexHorizontalBetween: Z,
   flexVertical: ee,
   flexVerticalBetweenCenter: oe
-}, fe = ({ menuItems: s = [], menuParams: r = [], shortLogo: x, logo: m, isOpen: h, defaultOpen: N = !1, selectedId: d }) => {
+}, de = ({ menuItems: s = [], menuParams: r = [], shortLogo: x, logo: m, isOpen: h, defaultOpen: N = !1, selectedId: 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 != null && B(d);
@@ -117,5 +116,5 @@ const y = "_fullHeight_o2xi7_15", O = "_fullWidth_o2xi7_18", j = "_open_o2xi7_21
   ] }) });
 };
 export {
-  fe as Menu
+  de as Menu
 };

package/dist/components/modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 
 export interface ModalProps {
     /** Determines whether the modal is open or closed.
@@ -23,10 +23,13 @@ export interface ModalProps {
     className?: string;
     /** Option to disable the overlay and the blocking of events outside the modal */
     disableOverlay?: boolean;
+    /** Condition to close the modal */
+    autoCloseCondition?: boolean;
+    anchorRef?: RefObject<HTMLElement>;
 }
 /**
  * Modal component that renders content in a floating layer above the main UI.
  * It supports custom positioning and closes when clicking outside of its content area.
  * The component uses a ref to detect clicks outside the modal.
  */
-export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/modal/Modal.js

@@ -1,24 +1,54 @@
-import { jsxs as v, Fragment as y, jsx as a } from "react/jsx-runtime";
-import { forwardRef as f, useEffect as _ } from "react";
-import '../../styles/Modal.css';const g = "_overlay_lv2n7_2", C = "_modalContent_lv2n7_12", s = {
-  overlay: g,
-  modalContent: C
-}, x = f(
-  ({ open: e, onClose: n, children: c, position: d, className: m, disableOverlay: i = !1 }, t) => (_(() => {
-    const o = (l) => {
-      if (t && t.current && e) {
-        const r = t.current;
-        r && !r.contains(l.target) && ![...document.querySelectorAll(".dialog")].some((u) => u.contains(l.target)) && n();
+import { jsxs as N, Fragment as S, jsx as v } from "react/jsx-runtime";
+import { forwardRef as W, useRef as k, useState as w, useEffect as g, useLayoutEffect as n } from "react";
+import '../../styles/Modal.css';const q = "_overlay_lv2n7_2", A = "_modalContent_lv2n7_12", y = {
+  overlay: q,
+  modalContent: A
+}, D = W(
+  ({ open: l, onClose: a, children: x, position: e, className: _, disableOverlay: b = !1, autoCloseCondition: m, anchorRef: d }, E) => {
+    const $ = k(null), c = E || $, [r, h] = w(), [L, j] = w();
+    return g(() => {
+      !m && m !== void 0 && l && a();
+    }, [m, l, a]), n(() => {
+      if (d != null && d.current && l && !e) {
+        const t = d.current.getBoundingClientRect();
+        h({
+          top: `${t.bottom + window.scrollY}px`,
+          left: `${t.left + window.scrollX}px`
+        }), j(`${t.width}px`);
       }
-    };
-    return document.addEventListener("mousedown", o), () => {
-      document.removeEventListener("mousedown", o);
-    };
-  }, [n, e, t]), e ? /* @__PURE__ */ v(y, { children: [
-    i && /* @__PURE__ */ a("div", { className: s.overlay, onClick: n }),
-    /* @__PURE__ */ a("div", { ref: t, className: `${s.modalContent} ${m}`, style: d, children: c })
-  ] }) : null)
+    }, [d, l, e]), g(() => {
+      const t = (u) => {
+        const f = c.current;
+        f && !f.contains(u.target) && l && ![...document.querySelectorAll(".dialog")].some(
+          (M) => M.contains(u.target)
+        ) && a();
+      };
+      return document.addEventListener("mousedown", t), () => {
+        document.removeEventListener("mousedown", t);
+      };
+    }, [a, l, c]), l ? /* @__PURE__ */ N(S, { children: [
+      !b && /* @__PURE__ */ v("div", { className: y.overlay }),
+      /* @__PURE__ */ v(
+        "div",
+        {
+          ref: c,
+          className: `${y.modalContent} ${_ || ""}`,
+          onMouseDown: (t) => t.stopPropagation(),
+          style: {
+            position: "absolute",
+            top: (e == null ? void 0 : e.top) ?? (r == null ? void 0 : r.top) ?? "50%",
+            left: (e == null ? void 0 : e.left) ?? (r == null ? void 0 : r.left) ?? "50%",
+            right: e == null ? void 0 : e.right,
+            bottom: e == null ? void 0 : e.bottom,
+            width: (e == null ? void 0 : e.width) ?? L ?? "auto",
+            transform: !(e != null && e.top) && !(e != null && e.left) && !r ? "translate(-50%, -50%)" : void 0
+          },
+          children: x
+        }
+      )
+    ] }) : null;
+  }
 );
 export {
-  x as Modal
+  D as Modal
 };

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

@@ -1,60 +1,76 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import '../../../styles/Size.css';import '../../../styles/index.css';import '../../../styles/SidePanelHeader.css';/* empty css                       */
+import { jsxs as C, jsx as e } from "react/jsx-runtime";
+import "../../button/Button.js";
 import "react";
-import { IconButton as r } from "../../icon-button/IconButton.js";
-import { Icon as i } from "../../icon/Icon.js";
+import { IconButton as i } from "../../icon-button/IconButton.js";
+import { Icon as t } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
 import "../../theme/ThemeContext.js";
-/* empty css                      */
-const b = "_sidePanelHeader_72g7b_6", h = "_buttonArrow_72g7b_13", p = "_title_72g7b_20", o = {
-  sidePanelHeader: b,
-  buttonArrow: h,
-  title: p
-}, w = ({
-  title: n,
-  icon: s,
-  onClickBack: l,
-  onClickForward: a,
-  onClickClose: d,
-  disabledBack: c = !1,
-  disabledForward: m = !1
-}) => /* @__PURE__ */ t("div", { className: o.sidePanelHeader, children: [
-  /* @__PURE__ */ t("div", { className: o.buttonArrow, children: [
+import '../../../styles/Size.css';import '../../../styles/SidePanelHeader.css';/* empty css                      */
+const c = "_sidePanelHeader_72g7b_6", m = "_buttonArrow_72g7b_13", h = "_title_72g7b_20", r = {
+  sidePanelHeader: c,
+  buttonArrow: m,
+  title: h
+}, v = ({
+  title: s,
+  icon: o,
+  onClickBack: L,
+  onClickForward: l,
+  onClickClose: n,
+  disabledBack: d = !1,
+  disabledForward: a = !1
+}) => /* @__PURE__ */ C("div", { className: r.sidePanelHeader, children: [
+  /* @__PURE__ */ C("div", { className: r.buttonArrow, children: [
     /* @__PURE__ */ e(
-      r,
+      i,
       {
-        disabled: c,
+        disabled: d,
         mode: "tertiary",
         size: "s",
-        onClick: l,
-        children: /* @__PURE__ */ e(i, { icon: "CaretLeft", size: 18 })
+        onClick: L,
+        children: /* @__PURE__ */ e(t, { icon: "CaretLeft", size: 18 })
       }
     ),
     /* @__PURE__ */ e(
-      r,
+      i,
       {
-        disabled: m,
+        disabled: a,
         mode: "tertiary",
         size: "s",
-        onClick: a,
-        children: /* @__PURE__ */ e(i, { icon: "CaretRight", size: 18 })
+        onClick: l,
+        children: /* @__PURE__ */ e(t, { icon: "CaretRight", size: 18 })
       }
     )
   ] }),
-  /* @__PURE__ */ t("div", { className: o.title, children: [
-    s && /* @__PURE__ */ e(i, { icon: s, size: 22 }),
-    /* @__PURE__ */ e("h3", { children: n })
+  /* @__PURE__ */ C("div", { className: r.title, children: [
+    o && /* @__PURE__ */ e(t, { icon: o, size: 22 }),
+    /* @__PURE__ */ e("h3", { children: s })
   ] }),
   /* @__PURE__ */ e(
-    r,
+    i,
     {
       size: "s",
       mode: "tertiary",
-      children: /* @__PURE__ */ e(i, { icon: "SquareHalf", size: 18 }),
-      onClick: d
+      children: /* @__PURE__ */ C("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 16 16", fill: "none", children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            opacity: "0.2",
+            d: "M3 2.5L10 2.5L10 4.79312C9.99995 4.85881 10.0128 4.92385 10.0379 4.98455C10.063 5.04525 10.0998 5.10041 10.1462 5.14688L9.88 6.35375C9.92642 6.40022 9.96322 6.45538 9.98832 6.51608C10.0134 6.57677 10.0263 6.64182 10.0262 6.7075L10.0262 9.29312C10.0263 9.3588 10.0134 9.42385 9.98832 9.48455C9.96322 9.54525 9.92642 9.60041 9.88 9.64687L10.1462 10.8538C10.0998 10.9002 10.063 10.9554 10.0379 11.0161C10.0128 11.0768 9.99995 11.1418 10 11.2075L10 13.5L3 13.5C2.86739 13.5 2.74021 13.4473 2.64645 13.3536C2.55268 13.2598 2.5 13.1326 2.5 13L2.5 3C2.5 2.86739 2.55268 2.74022 2.64645 2.64645C2.74021 2.55268 2.86739 2.5 3 2.5Z",
+            fill: "#FFFFFF"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M2 3L2 13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14L13 14C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13L14 3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2L3 2C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73479 2 3ZM3 3L9.5 3L9.5 4.79375C9.49966 4.92502 9.5 5.02 9.5 5.16C9.5 5.3 9.5 5.58 9.5 5.73L9.5 6.70688L9.5 8L9.5 9.29313L9.5 10.43C9.5 10.59 9.5 10.69 9.5 10.85C9.5 10.98 9.49958 11.0755 9.5 11.2069L9.5 13L3 13L3 3ZM13 3L13 13L10.5 13L10.5 11.2069L10.5 10.69C10.5 10.5 10.5 9.87401 10.5 9.73C10.5 9.66401 10.5004 9.4245 10.5 9.29313L10.5 6.70688C10.5004 6.57551 10.5 6.41 10.5 6.28C10.5 6.13 10.5 6 10.5 5.89L10.5 4.79313L10.5 3L13 3ZM6.85375 10.3538C6.80731 10.4002 6.75217 10.4371 6.69147 10.4623C6.63077 10.4874 6.56571 10.5004 6.5 10.5004C6.43429 10.5004 6.36923 10.4874 6.30853 10.4623C6.24783 10.4371 6.19269 10.4002 6.14625 10.3538L4.14625 8.35375C4.09976 8.30731 4.06288 8.25217 4.03772 8.19147C4.01256 8.13077 3.99961 8.06571 3.99961 8C3.99961 7.93429 4.01256 7.86923 4.03772 7.80853C4.06288 7.74783 4.09976 7.69269 4.14625 7.64625L6.14625 5.64625C6.1927 5.5998 6.24785 5.56295 6.30855 5.5378C6.36925 5.51266 6.4343 5.49972 6.5 5.49972C6.5657 5.49972 6.63075 5.51266 6.69145 5.5378C6.75214 5.56295 6.80729 5.5998 6.85375 5.64625C6.9002 5.69271 6.93705 5.74786 6.9622 5.80855C6.98734 5.86925 7.00028 5.9343 7.00028 6C7.00028 6.0657 6.98734 6.13075 6.9622 6.19145C6.93705 6.25215 6.9002 6.3073 6.85375 6.35375L5.70687 7.5L9.5 7.5C9.5 7.54 9.5 7.58 9.5 7.64645C9.5 7.7 9.5 7.86739 9.5 8C9.5 8.13261 9.5 8.25 9.5 8.35355C9.5 8.41 9.5 8.45 9.5 8.5L5.70687 8.5L6.85375 9.64625C6.90024 9.69269 6.93712 9.74783 6.96228 9.80853C6.98744 9.86923 7.00039 9.93429 7.00039 10C7.00039 10.0657 6.98744 10.1308 6.96228 10.1915C6.93712 10.2522 6.90024 10.3073 6.85375 10.3538Z",
+            fill: "#FFFFFF"
+          }
+        )
+      ] }),
+      onClick: n
     }
   )
 ] });
 export {
-  w as SidePanelHeader
+  v as SidePanelHeader
 };

package/dist/components/select/Select.d.ts

@@ -1,10 +1,9 @@
-import { FC } from 'react';
 import { Size } from '../interface';
 
 import * as PhosphorIcons from "@phosphor-icons/react";
 export type SelectItem = {
     label?: string;
-    icon?: keyof typeof PhosphorIcons;
+    icon?: keyof typeof PhosphorIcons | null;
     value: string;
 };
 export interface SelectProps {
@@ -29,11 +28,16 @@ export interface SelectProps {
         left?: string;
         right?: string;
         bottom?: string;
+        width?: string;
     };
+    /** Text displayed when no item is selected */
+    placeholder?: string;
+    /** Condition to close the modal */
+    autoCloseCondition: boolean;
 }
 /**
  * Select component that allows users to choose an option from a list.
  * It supports three display modes: 'all' (icon + text), 'icon' (only icon), and 'text' (only text).
  * The selected value is displayed in a button, and a modal opens to show the list of options.
  */
-export declare const Select: FC<SelectProps>;
+export declare const Select: ({ selected, size, listItem, modeDisplay, onSelect, positionOverride, placeholder, autoCloseCondition }: SelectProps) => import("react/jsx-runtime").JSX.Element;