@situaction/traq-ui-ste 1.1.30 → 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,11 +1,11 @@
 import { jsxs as C, jsx as e } from "react/jsx-runtime";
-import '../../../styles/Size.css';import '../../../styles/index.css';import '../../../styles/SidePanelHeader.css';/* empty css                       */
+import "../../button/Button.js";
 import "react";
 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                      */
+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,

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;

package/dist/components/select/Select.js

@@ -1,79 +1,171 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { useState as f, useRef as N, useEffect as w } from "react";
-import { Button as _ } 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 i } from "../icon/Icon.js";
-import { Modal as g } from "../modal/Modal.js";
+import { jsxs as K, jsx as r } from "react/jsx-runtime";
+import { useState as k, useRef as h, useEffect as w } from "react";
+import { Button as E } from "../button/Button.js";
+import { IconButton as I } from "../icon-button/IconButton.js";
+import { Icon as p } from "../icon/Icon.js";
+import { Modal as M } from "../modal/Modal.js";
 import "../theme/ThemeContext.js";
-/* empty css                   */
-const R = "_selectContainer_1o5wx_54", y = "_selected_1o5wx_57", z = "_children_1o5wx_61", B = "_active_1o5wx_78", F = "_selectList_1o5wx_82", j = "_modal_1o5wx_91", U = "_dropdownFadeIn_1o5wx_1", $ = "_itemLabel_1o5wx_98", c = {
-  selectContainer: R,
+import '../../styles/Size.css';import '../../styles/Select.css';/* empty css                   */
+const O = "_selectContainer_1o5wx_54", q = "_selected_1o5wx_57", A = "_children_1o5wx_61", D = "_active_1o5wx_78", G = "_selectList_1o5wx_82", H = "_modal_1o5wx_91", J = "_dropdownFadeIn_1o5wx_1", Q = "_itemLabel_1o5wx_98", m = {
+  selectContainer: O,
+  selected: q,
+  children: A,
+  active: D,
+  selectList: G,
+  modal: H,
+  dropdownFadeIn: J,
+  itemLabel: Q
+}, re = ({
   selected: y,
-  children: z,
-  active: B,
-  selectList: F,
-  modal: j,
-  dropdownFadeIn: U,
-  itemLabel: $
-}, K = ({ selected: a, size: s = "m", listItem: h, modeDisplay: r = "all", onSelect: p, positionOverride: d }) => {
-  const [n, l] = f(!1), C = N(null), [x, L] = f({ top: "calc(100% + 6px)" }), v = a ?? h[0], [t, b] = f(v);
+  size: _ = "m",
+  listItem: a,
+  modeDisplay: x = "all",
+  onSelect: S,
+  positionOverride: g,
+  placeholder: N = "Sélectionner",
+  autoCloseCondition: W
+}) => {
+  const [t, u] = k(!1), $ = h(null), [j, B] = k({
+    top: "calc(100% + 6px)",
+    left: "0px",
+    width: "100%"
+  }), [c, P] = k(y ?? null);
   w(() => {
-    a && b(a);
-  }, [a]), w(() => {
-    d && L(d);
-  }, [d]);
-  const I = (e) => {
-    b(e), l(!1), p && p(e);
-  }, k = () => {
-    const e = !!t.icon, m = !!t.label;
-    return t.icon && r === "icon" && e ? /* @__PURE__ */ o(S, { mode: "tertiary", size: s ?? "m", onClick: () => l(!n), children: /* @__PURE__ */ o(i, { icon: t.icon }) }) : t.label && r === "text" && m ? /* @__PURE__ */ o(
-      _,
+    P(y ?? null);
+  }, [y]), w(() => {
+    g && B(g);
+  }, [g]);
+  const U = (e) => {
+    P(e), u(!1), S && S(e);
+  }, V = () => {
+    const e = c == null ? void 0 : c.icon, o = (c == null ? void 0 : c.label) || N || "Sélectionner";
+    return x === "icon" && e ? /* @__PURE__ */ r(I, { ref: d, mode: "tertiary", size: _, onClick: () => u(!t), children: /* @__PURE__ */ r(p, { icon: c.icon }) }) : x === "text" ? /* @__PURE__ */ r(
+      E,
       {
+        ref: d,
         mode: "tertiary",
-        label: t.label,
-        childrenRight: /* @__PURE__ */ o(i, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
-        size: s ?? "m",
-        onClick: () => l(!n)
+        label: o,
+        childrenRight: /* @__PURE__ */ r(p, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        size: _,
+        onClick: () => u(!t)
       }
-    ) : t.label && t.icon && r === "all" && (e || m) ? /* @__PURE__ */ o(
-      _,
+    ) : x === "all" ? /* @__PURE__ */ r(
+      E,
       {
+        ref: d,
         mode: "tertiary",
-        label: m ? t.label : "",
-        size: s ?? "m",
-        childrenLeft: e && /* @__PURE__ */ o(i, { icon: t.icon }),
-        childrenRight: /* @__PURE__ */ o(i, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
-        onClick: () => l(!n)
+        label: o,
+        size: _,
+        childrenLeft: e && /* @__PURE__ */ r(p, { icon: c.icon }),
+        childrenRight: /* @__PURE__ */ r(p, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        onClick: () => u(!t)
       }
-    ) : /* @__PURE__ */ o(
-      _,
+    ) : /* @__PURE__ */ r(
+      E,
       {
+        ref: d,
         mode: "tertiary",
-        label: "Sélectionner",
-        size: s ?? "m",
-        onClick: () => l(!n)
+        label: N ?? "Sélectionner",
+        size: _,
+        onClick: () => u(!t)
       }
     );
+  }, R = h(null), b = h({}), [L, v] = k(""), f = h(null), F = h({}), T = (e) => {
+    if (!t) return;
+    const o = e.key.length === 1 ? e.key.toLowerCase() : "";
+    if (!o) return;
+    const i = L + o;
+    v(i);
+    const l = a.find((n) => {
+      var s;
+      return (s = n.label) == null ? void 0 : s.toLowerCase().startsWith(i);
+    });
+    if (l) {
+      const n = b.current[l.value];
+      n == null || n.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+    f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+      v("");
+    }, 500);
   };
-  return /* @__PURE__ */ u("div", { className: c.selectContainer, children: [
-    k(),
-    /* @__PURE__ */ o(
-      g,
+  w(() => (t ? window.addEventListener("keydown", T) : (window.removeEventListener("keydown", T), v("")), () => {
+    window.removeEventListener("keydown", T);
+  }), [t, L, a]), w(() => {
+    const e = (o) => {
+      if (!t) return;
+      const i = o.key.length === 1 ? o.key.toLowerCase() : "";
+      if (!i) return;
+      const l = L + i;
+      v(l);
+      const n = a.find(
+        (s) => {
+          var C;
+          return (C = s.label) == null ? void 0 : C.toLowerCase().startsWith(l);
+        }
+      );
+      if (n && R.current && n.value in b.current && b.current[n.value]) {
+        const s = R.current, C = b.current[n.value];
+        s.scrollTo({
+          top: C.offsetTop - s.offsetTop,
+          behavior: "smooth"
+        });
+      }
+      f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+        v("");
+      }, 700);
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [t, a, L]), w(() => {
+    if (!t) return;
+    const e = (o) => {
+      const i = o.key.toLowerCase();
+      if (i.length === 1) {
+        const l = a.find(
+          (n) => {
+            var s;
+            return (s = n.label) == null ? void 0 : s.toLowerCase().startsWith(i);
+          }
+        );
+        if (l) {
+          const n = F.current[l.value];
+          n && n.scrollIntoView({ block: "start", behavior: "smooth" });
+        }
+      }
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [t, a]);
+  const d = h(null);
+  return w(() => {
+    if (t && d.current) {
+      const e = d.current.getBoundingClientRect().height;
+      B({
+        top: `${e + 6}px`,
+        left: "0px",
+        width: "100%"
+      });
+    }
+  }, [t]), /* @__PURE__ */ K("div", { className: m.selectContainer, children: [
+    V(),
+    /* @__PURE__ */ r(
+      M,
       {
-        ref: C,
-        open: n,
-        onClose: () => l(!1),
-        className: c.modal,
-        position: x,
-        children: /* @__PURE__ */ o("div", { className: c.selectList, children: h.map((e) => /* @__PURE__ */ u(
+        ref: $,
+        anchorRef: d,
+        open: t,
+        onClose: () => u(!1),
+        position: j,
+        disableOverlay: !0,
+        className: m.modal,
+        autoCloseCondition: W,
+        children: /* @__PURE__ */ r("div", { className: m.selectList, ref: R, children: a.map((e) => /* @__PURE__ */ K(
           "div",
           {
-            className: `${c.children} ${e.value === t.value ? c.active : ""}`,
-            onClick: () => I(e),
+            ref: (o) => F.current[e.value] = o,
+            className: `${m.children} ${(c == null ? void 0 : c.value) === e.value ? m.active : ""}`,
+            onClick: () => U(e),
             children: [
-              e.icon && /* @__PURE__ */ o(i, { icon: e.icon }),
-              e.label && /* @__PURE__ */ o("div", { className: c.itemLabel, children: e.label })
+              e.icon && /* @__PURE__ */ r(p, { icon: e.icon }),
+              e.label && /* @__PURE__ */ r("div", { className: m.itemLabel, children: e.label })
             ]
           },
           e.value
@@ -83,5 +175,5 @@ const R = "_selectContainer_1o5wx_54", y = "_selected_1o5wx_57", z = "_children_
   ] });
 };
 export {
-  K as Select
+  re as Select
 };

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

@@ -1,20 +1,21 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import '../../styles/Size.css';import '../../styles/index.css';import '../../styles/SelectFilterInputTags.css';/* empty css                    */
+import "../button/Button.js";
 import "react";
 import { Input as c } from "../input/Input.js";
+import "../icon-button/IconButton.js";
 import "../modal/Modal.js";
 import "../theme/ThemeContext.js";
-/* empty css                   */
-const a = "_listTagSelect_2v3fb_6", u = "_flexAutoSize_2v3fb_24", n = {
+import '../../styles/Size.css';import '../../styles/SelectFilterInputTags.css';/* empty css                   */
+const a = "_listTagSelect_2v3fb_6", p = "_flexAutoSize_2v3fb_24", u = {
   listTagSelect: a,
-  flexAutoSize: u
-}, v = ({ children: l, inputValue: o, handleInputChange: s, handleKeyDown: i }) => /* @__PURE__ */ e("div", { className: n.listTagSelect, children: /* @__PURE__ */ r("div", { children: [
-  l,
+  flexAutoSize: p
+}, _ = ({ children: o, inputValue: l, handleInputChange: s, handleKeyDown: i }) => /* @__PURE__ */ e("div", { className: u.listTagSelect, children: /* @__PURE__ */ r("div", { children: [
+  o,
   /* @__PURE__ */ e("div", { className: "flexAutoSize", children: /* @__PURE__ */ e(
     c,
     {
       type: "text",
-      value: o,
+      value: l,
       onKeyDown: (t) => {
         t.key === "Enter" && i && i(t);
       },
@@ -27,5 +28,5 @@ const a = "_listTagSelect_2v3fb_6", u = "_flexAutoSize_2v3fb_24", n = {
   ) })
 ] }) });
 export {
-  v as SelectFilterInputTags
+  _ as SelectFilterInputTags
 };

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

@@ -2,11 +2,11 @@ import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import { useState as _, useRef as h } from "react";
 import { R as v, I as C, D as x } from "../../X-Bd1VjKAF.mjs";
 import { Button as M } from "../button/Button.js";
-import '../../styles/Size.css';import '../../styles/index.css';import '../../styles/SelectMultiItems.css';/* empty css                    */
+import "../icon-button/IconButton.js";
 import { TagCounter as R } from "../tag-counter/TagCounter.js";
 import { Modal as w } from "../modal/Modal.js";
 import "../theme/ThemeContext.js";
-/* empty css                   */
+import '../../styles/Size.css';import '../../styles/SelectMultiItems.css';/* empty css                   */
 const y = "_relative_w7e9a_6", I = "_tagCounter_w7e9a_10", N = "_modal_w7e9a_18", r = {
   relative: y,
   tagCounter: I,

package/dist/components/switch/Switch.js

@@ -1,11 +1,11 @@
 import { jsxs as m, jsx as c } from "react/jsx-runtime";
 import { useState as $, useEffect as b } from "react";
-import '../../styles/Size.css';import '../../styles/index.css';import '../../styles/Switch.css';/* empty css                    */
+import "../button/Button.js";
 import { IconButton as k } from "../icon-button/IconButton.js";
 import { Icon as g } from "../icon/Icon.js";
 import "../modal/Modal.js";
 import "../theme/ThemeContext.js";
-/* empty css                   */
+import '../../styles/Size.css';import '../../styles/Switch.css';/* empty css                   */
 const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk_75", j = "_xl_1mxgk_92", B = "_disabled_1mxgk_110", E = "_wrapper_1mxgk_121", R = "_button_1mxgk_136", T = "_active_1mxgk_145", t = {
   switch: "_switch_1mxgk_6",
   slider: y,

package/dist/components/tabs/Tabs.js

@@ -1,9 +1,8 @@
-import { jsxs as p, jsx as l } from "react/jsx-runtime";
-import { useState as f, useRef as u, useLayoutEffect as w } from "react";
-import '../../styles/index.css';import '../../styles/Tabs.css';/* empty css                    */
-import { Button as B } from "../button/Button.js";
+import { jsxs as w, jsx as l } from "react/jsx-runtime";
+import { useState as f, useRef as u, useLayoutEffect as B } from "react";
+import { Button as p } from "../button/Button.js";
 import { IconButton as S } from "../icon-button/IconButton.js";
-const j = "_underline_6o3gh_70", e = {
+import '../../styles/Tabs.css';const j = "_underline_6o3gh_70", e = {
   "tab-container": "_tab-container_6o3gh_30",
   "tab-container-button": "_tab-container-button_6o3gh_34",
   "tab-container-icon": "_tab-container-icon_6o3gh_39",
@@ -17,17 +16,17 @@ const j = "_underline_6o3gh_70", e = {
   "flexHorizontal-center": "_flexHorizontal-center_6o3gh_78",
   "flexHorizontal-left": "_flexHorizontal-left_6o3gh_84",
   "flexHorizontal-right": "_flexHorizontal-right_6o3gh_90"
-}, y = ({
+}, q = ({
   listItems: c,
   type: o,
   onTabSelect: h,
-  defaultActiveTab: m = 0,
-  position: g = "left",
+  defaultActiveTab: g = 0,
+  position: m = "left",
   fullWidth: x = !1,
   disabledTabs: b = []
   // ✅ par défaut vide
 }) => {
-  const [s, v] = f(m), [z, $] = f({}), r = u(null), R = u(null), _ = u([]), d = (t) => {
+  const [s, v] = f(g), [z, $] = f({}), r = u(null), R = u(null), _ = u([]), d = (t) => {
     b.includes(t) || (v(t), h(c[t]));
   }, H = (t) => {
     if (r.current && t) {
@@ -38,15 +37,15 @@ const j = "_underline_6o3gh_70", e = {
       });
     }
   }, C = [
-    e[`flexHorizontal-${g}`],
+    e[`flexHorizontal-${m}`],
     o === "button" ? e["tab-items-button"] : e["tab-items"]
   ].filter(Boolean).join(" ");
-  return w(() => {
+  return B(() => {
     const t = _.current[s];
     t && requestAnimationFrame(() => {
       H(t);
     });
-  }, [s, c.length]), /* @__PURE__ */ p(
+  }, [s, c.length]), /* @__PURE__ */ w(
     "div",
     {
       className: `tab ${e["tab-container"]} ${e[`tab-container-${o}`]} ${x && e["tab-full-width"]}`,
@@ -73,7 +72,7 @@ const j = "_underline_6o3gh_70", e = {
                   children: t
                 }
               ) : /* @__PURE__ */ l("div", { className: a ? e["selected-text"] : void 0, children: /* @__PURE__ */ l(
-                B,
+                p,
                 {
                   size: "s",
                   label: t,
@@ -93,5 +92,5 @@ const j = "_underline_6o3gh_70", e = {
   );
 };
 export {
-  y as Tabs
+  q as Tabs
 };

package/dist/main.d.ts

@@ -27,4 +27,5 @@ export { SidePanel } from './components/panel/side-panel/SidePanel';
 export { SidePanelHeader } from './components/panel/side-panel-header/SidePanelHeader';
 export { InputLabel } from './components/input-label/InputLabel';
 export { EditableField } from './components/editable-field/EditableField';
+export { EditableSelect } from './components/editable-select/EditableSelect';
 export { ThemeProvider, useTheme } from './components/theme/ThemeContext';

package/dist/main.js

@@ -1,63 +1,64 @@
-import { Button as m } from "./components/button/Button.js";
-import { ButtonControlledScroll as x } from "./components/buttonControledScroll/ButtonControlledScroll.js";
-import { Input as l } from "./components/input/Input.js";
-import { Tabs as n } from "./components/tabs/Tabs.js";
-import { IconButton as a } from "./components/icon-button/IconButton.js";
-import { Tag as s } from "./components/tag/Tag.js";
-import { Title as I } from "./components/title/Title.js";
+import { Button as t } from "./components/button/Button.js";
+import { ButtonControlledScroll as p } from "./components/buttonControledScroll/ButtonControlledScroll.js";
+import { Input as f } from "./components/input/Input.js";
+import { Tabs as i } 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 S } from "./components/tag-counter/TagCounter.js";
-import { Checkbox as b } from "./components/checkbox/Checkbox.js";
-import { Tooltip as L } from "./components/tooltip/Tooltip.js";
-import { Select as B } from "./components/select/Select.js";
-import { Calendar as P } from "./components/calendar/Calendar.js";
-import { Accordion as F } from "./components/accordion/Accordion.js";
-import { AccordionItem as k } from "./components/accordion/item/AccordionItem.js";
-import { Card as w } from "./components/card/Card.js";
-import { Icon as H } from "./components/icon/Icon.js";
-import { Menu as q } from "./components/menu/Menu.js";
-import { Modal as z } from "./components/modal/Modal.js";
-import { SelectMultiItems as G } from "./components/select-multi-items/SelectMultiItems.js";
-import { SelectFilterInputTags as K } from "./components/select-filter-input-tags/SelectFilterInputTags.js";
-import { ListControls as Q } from "./components/list/list-controls/ListControls.js";
-import { NestedList as U } from "./components/list/nested-list/NestedList.js";
-import { NestedListItem as W } from "./components/list/nested-list/item/NestedListItem.js";
-import { Switch as Y } from "./components/switch/Switch.js";
-import { SidePanel as _ } from "./components/panel/side-panel/SidePanel.js";
-import { SidePanelHeader as oo } from "./components/panel/side-panel-header/SidePanelHeader.js";
-import { InputLabel as eo } from "./components/input-label/InputLabel.js";
-import { EditableField as mo } from "./components/editable-field/EditableField.js";
-import { ThemeProvider as xo, useTheme as fo } from "./components/theme/ThemeContext.js";
-import './styles/Size.css';import './styles/index.css';/* empty css                */
-/* empty css               */
+import { Checkbox as C } from "./components/checkbox/Checkbox.js";
+import { Tooltip as h } from "./components/tooltip/Tooltip.js";
+import { Select as g } from "./components/select/Select.js";
+import { Calendar as M } from "./components/calendar/Calendar.js";
+import { Accordion as A } from "./components/accordion/Accordion.js";
+import { AccordionItem as F } from "./components/accordion/item/AccordionItem.js";
+import { Card as k } from "./components/card/Card.js";
+import { Icon as w } from "./components/icon/Icon.js";
+import { Menu as j } from "./components/menu/Menu.js";
+import { Modal as y } from "./components/modal/Modal.js";
+import { SelectMultiItems as D } from "./components/select-multi-items/SelectMultiItems.js";
+import { SelectFilterInputTags as J } from "./components/select-filter-input-tags/SelectFilterInputTags.js";
+import { ListControls as O } from "./components/list/list-controls/ListControls.js";
+import { NestedList as R } from "./components/list/nested-list/NestedList.js";
+import { NestedListItem as V } from "./components/list/nested-list/item/NestedListItem.js";
+import { Switch as X } from "./components/switch/Switch.js";
+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 { ThemeProvider as fo, useTheme as lo } from "./components/theme/ThemeContext.js";
+import './styles/Size.css';/* empty css               */
 export {
-  F as Accordion,
-  k as AccordionItem,
-  m as Button,
-  x as ButtonControlledScroll,
-  P as Calendar,
-  w as Card,
-  b as Checkbox,
-  mo as EditableField,
-  H as Icon,
-  a as IconButton,
-  l as Input,
-  eo as InputLabel,
-  Q as ListControls,
-  q as Menu,
-  z as Modal,
-  U as NestedList,
-  W as NestedListItem,
-  B as Select,
-  K as SelectFilterInputTags,
-  G as SelectMultiItems,
-  _ as SidePanel,
-  oo as SidePanelHeader,
-  Y as Switch,
-  n as Tabs,
-  s as Tag,
+  A as Accordion,
+  F as AccordionItem,
+  t as Button,
+  p as ButtonControlledScroll,
+  M as Calendar,
+  k as Card,
+  C as Checkbox,
+  to as EditableField,
+  po as EditableSelect,
+  w as Icon,
+  d as IconButton,
+  f as Input,
+  ro as InputLabel,
+  O as ListControls,
+  j as Menu,
+  y as Modal,
+  R as NestedList,
+  V as NestedListItem,
+  g as Select,
+  J as SelectFilterInputTags,
+  D as SelectMultiItems,
+  Z as SidePanel,
+  $ as SidePanelHeader,
+  X as Switch,
+  i as Tabs,
+  c as Tag,
   S as TagCounter,
-  xo as ThemeProvider,
-  I as Title,
-  L as Tooltip,
-  fo as useTheme
+  fo as ThemeProvider,
+  u as Title,
+  h as Tooltip,
+  lo as useTheme
 };

package/dist/styles/Button.css

@@ -1 +1 @@
-._button_mzv5s_30{font-family:var(--font-family);font-weight:500;font-style:normal;line-height:1.25rem;border:0;cursor:pointer;width:fit-content}._button_mzv5s_30:focus-visible{outline:2px solid var(--button-focus-mode);outline-offset:2px}._button_mzv5s_30:disabled{background:var(--button-primary-disabled-background);color:var(--button-primary-disabled-text);border:1px solid var(--button-primary-disabled-border);cursor:initial;pointer-events:none}._button_mzv5s_30:disabled *{fill:var(--button-primary-disabled-text)}._button-primary_mzv5s_54{color:var(--button-primary-default-text);background:var(--button-primary-default-background)}._button-primary_mzv5s_54:hover{background:var(--button-primary-hover-background)}._button-primary_mzv5s_54:active{background:var(--button-primary-pressed-background);outline:none}._button-primary_mzv5s_54 *{fill:var(--button-primary-default-text)}._button-secondary_mzv5s_68{color:var(--button-secondary-default-text);border:1px solid var(--button-secondary-default-border);background:var(--button-secondary-default-background)}._button-secondary_mzv5s_68:hover{border:1px solid var(--button-secondary-hover-border);background:var(--button-secondary-hover-background)}._button-secondary_mzv5s_68:active{border:1px solid var(--button-secondary-pressed-border);background:var(--button-secondary-pressed-background)}._button-secondary_mzv5s_68 *{fill:var(--button-secondary-default-text)}._button-tertiary_mzv5s_84{color:var(--button-tertiary-default-text);background-color:transparent;border:1px solid var(--button-tertiary-default-border)}._button-tertiary_mzv5s_84:hover{border:1px solid var(--button-tertiary-hover-border);background:var(--button-tertiary-hover-background)}._button-tertiary_mzv5s_84:active{border:1px solid var(--button-tertiary-pressed-border);background:var(--button-tertiary-pressed-background)}._button-tertiary_mzv5s_84 *{fill:var(--button-tertiary-default-text)}._button-ghost_mzv5s_100{color:var(--button-ghost-default-text);background-color:transparent}._button-ghost_mzv5s_100:hover{background:var(--button-ghost-hover-background)}._button-ghost_mzv5s_100:active{background-color:var(--button-ghost-pressed-background)}._button-ghost_mzv5s_100:disabled{border:none}._button-ghost_mzv5s_100 *{fill:var(--button-ghost-default-text)}._button-text_mzv5s_116{color:var(--text-button-inactive-text);background-color:transparent;padding:0!important}._button-text_mzv5s_116:hover{color:var(--text-button-inactive-hover-text)}._button-text_mzv5s_116:disabled{border:none;background-color:transparent;color:var(--text-button-disabled-text)}._button-text-selected_mzv5s_129,._button-text-selected_mzv5s_129:hover{color:var(--text-button-active-text)}._button-error_mzv5s_135{color:var(--button-destructive-default-text);background:var(--button-destructive-default-background)}._button-error_mzv5s_135:hover{background:var(--button-destructive-hover-background)}._button-error_mzv5s_135:active{background:var(--button-destructive-pressed-background)}._button-error_mzv5s_135 *{fill:var(--button-destructive-default-text)}._button-size-xl_mzv5s_148{padding:1rem 2rem;font-size:1.125em;line-height:28px;border-radius:8px}._button-size-l_mzv5s_154{padding:.75rem 1.5rem;font-size:1em;line-height:24px;border-radius:8px}._button-size-m_mzv5s_160{padding:.5rem 1rem;font-size:.875em;line-height:22px;border-radius:4px}._button-size-s_mzv5s_166{padding:.375rem .75rem;font-size:.875em;line-height:16px;border-radius:4px}._button-size-menu_mzv5s_172{padding:.5rem;font-size:1em;line-height:24px;border-radius:4px}._button-gap-menu_mzv5s_178{gap:.5rem}._button-gap-xl_mzv5s_181{gap:12px}._button-gap-l_mzv5s_184{gap:8px}._button-gap-m_mzv5s_178,._button-gap-s_mzv5s_187{gap:4px}._flexHorizontalCenter_mzv5s_191{display:flex;justify-content:center;align-items:center;flex-direction:row}
+@font-face{font-family:Urbanist-Thin;src:url(../fonts/Urbanist-Thin.ttf) format("truetype");font-weight:100;font-style:normal}@font-face{font-family:Urbanist-Extra-Light;src:url(../fonts/Urbanist-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal}@font-face{font-family:Urbanist-Light;src:url(../fonts/Urbanist-Light.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Urbanist-Regular;src:url(../fonts/Urbanist-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Urbanist;src:url(../fonts/Urbanist-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Urbanist-Back;src:url(../fonts/Urbanist-Black.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Urbanist-Semi-Bold;src:url(../fonts/Urbanist-SemiBold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Urbanist-Bold;src:url(../fonts/Urbanist-Bold.ttf) format("truetype");font-weight:800;font-style:normal}@font-face{font-family:Urbanist-Extra-Bold;src:url(../fonts/Urbanist-ExtraBold.ttf) format("truetype");font-weight:900;font-style:normal}:root,body{font-family:Urbanist,sans-serif;line-height:1;width:100vw;height:100vh}h1{font-size:1.875em;font-style:normal;font-weight:700;line-height:2.25rem}h2{font-size:1.5em;font-style:normal;font-weight:700;line-height:2rem;margin:0}h3{font-size:1.25em;font-style:normal;font-weight:700;line-height:1.75rem;margin:0}h4{font-size:1.125em;font-style:normal;font-weight:700;line-height:1.75rem;margin:0}h5{font-size:1em;font-style:normal;font-weight:700;line-height:1.5rem;margin:0}h6{font-size:.875em;font-style:normal;font-weight:700;line-height:1.25rem;margin:0}.textExtraLarge{font-size:1.25em;font-style:normal;line-height:2rem}.textLarge{font-size:1.125em;font-style:normal;line-height:1.75rem}.textMedium{font-size:1em;font-style:normal;line-height:1.5rem}.textSmall{font-size:.875em;font-style:normal;line-height:1.25rem}.textSmaller{font-size:.75em;font-style:normal;line-height:1rem}.labelExtraLarge{font-size:1.25em;font-style:normal;line-height:normal;letter-spacing:1.2px}.labelLarge{font-size:1.125em;font-style:normal;line-height:normal;letter-spacing:1.08px}.labelMedium{font-size:1em;font-style:normal;line-height:normal;letter-spacing:.96px}.labelSmall{font-size:.875em;font-style:normal;line-height:normal;letter-spacing:.84px}.labelSmaller{font-size:.75em;font-style:normal;line-height:normal;letter-spacing:.72px}.labelSmallest{font-size:.625em;font-style:normal;line-height:normal;letter-spacing:.6px}.fontWeight-100{font-weight:100}.fontWeight-200{font-weight:200}.fontWeight-300{font-weight:300}.fontWeight-400{font-weight:400}.fontWeight-500{font-weight:500}.fontWeight-600{font-weight:600}.fontWeight-700{font-weight:700}.fontWeight-800{font-weight:800}.fontWeight-900{font-weight:900}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background-color:var(--scrollbar-background);border-radius:.5rem;transition:all .3s ease;margin:.625rem;background-clip:padding-box}::-webkit-scrollbar:hover{cursor:pointer}::-webkit-scrollbar-corner{background:var(--scrollbar-background)}._button_mzv5s_30{font-family:var(--font-family);font-weight:500;font-style:normal;line-height:1.25rem;border:0;cursor:pointer;width:fit-content}._button_mzv5s_30:focus-visible{outline:2px solid var(--button-focus-mode);outline-offset:2px}._button_mzv5s_30:disabled{background:var(--button-primary-disabled-background);color:var(--button-primary-disabled-text);border:1px solid var(--button-primary-disabled-border);cursor:initial;pointer-events:none}._button_mzv5s_30:disabled *{fill:var(--button-primary-disabled-text)}._button-primary_mzv5s_54{color:var(--button-primary-default-text);background:var(--button-primary-default-background)}._button-primary_mzv5s_54:hover{background:var(--button-primary-hover-background)}._button-primary_mzv5s_54:active{background:var(--button-primary-pressed-background);outline:none}._button-primary_mzv5s_54 *{fill:var(--button-primary-default-text)}._button-secondary_mzv5s_68{color:var(--button-secondary-default-text);border:1px solid var(--button-secondary-default-border);background:var(--button-secondary-default-background)}._button-secondary_mzv5s_68:hover{border:1px solid var(--button-secondary-hover-border);background:var(--button-secondary-hover-background)}._button-secondary_mzv5s_68:active{border:1px solid var(--button-secondary-pressed-border);background:var(--button-secondary-pressed-background)}._button-secondary_mzv5s_68 *{fill:var(--button-secondary-default-text)}._button-tertiary_mzv5s_84{color:var(--button-tertiary-default-text);background-color:transparent;border:1px solid var(--button-tertiary-default-border)}._button-tertiary_mzv5s_84:hover{border:1px solid var(--button-tertiary-hover-border);background:var(--button-tertiary-hover-background)}._button-tertiary_mzv5s_84:active{border:1px solid var(--button-tertiary-pressed-border);background:var(--button-tertiary-pressed-background)}._button-tertiary_mzv5s_84 *{fill:var(--button-tertiary-default-text)}._button-ghost_mzv5s_100{color:var(--button-ghost-default-text);background-color:transparent}._button-ghost_mzv5s_100:hover{background:var(--button-ghost-hover-background)}._button-ghost_mzv5s_100:active{background-color:var(--button-ghost-pressed-background)}._button-ghost_mzv5s_100:disabled{border:none}._button-ghost_mzv5s_100 *{fill:var(--button-ghost-default-text)}._button-text_mzv5s_116{color:var(--text-button-inactive-text);background-color:transparent;padding:0!important}._button-text_mzv5s_116:hover{color:var(--text-button-inactive-hover-text)}._button-text_mzv5s_116:disabled{border:none;background-color:transparent;color:var(--text-button-disabled-text)}._button-text-selected_mzv5s_129,._button-text-selected_mzv5s_129:hover{color:var(--text-button-active-text)}._button-error_mzv5s_135{color:var(--button-destructive-default-text);background:var(--button-destructive-default-background)}._button-error_mzv5s_135:hover{background:var(--button-destructive-hover-background)}._button-error_mzv5s_135:active{background:var(--button-destructive-pressed-background)}._button-error_mzv5s_135 *{fill:var(--button-destructive-default-text)}._button-size-xl_mzv5s_148{padding:1rem 2rem;font-size:1.125em;line-height:28px;border-radius:8px}._button-size-l_mzv5s_154{padding:.75rem 1.5rem;font-size:1em;line-height:24px;border-radius:8px}._button-size-m_mzv5s_160{padding:.5rem 1rem;font-size:.875em;line-height:22px;border-radius:4px}._button-size-s_mzv5s_166{padding:.375rem .75rem;font-size:.875em;line-height:16px;border-radius:4px}._button-size-menu_mzv5s_172{padding:.5rem;font-size:1em;line-height:24px;border-radius:4px}._button-gap-menu_mzv5s_178{gap:.5rem}._button-gap-xl_mzv5s_181{gap:12px}._button-gap-l_mzv5s_184{gap:8px}._button-gap-m_mzv5s_178,._button-gap-s_mzv5s_187{gap:4px}._flexHorizontalCenter_mzv5s_191{display:flex;justify-content:center;align-items:center;flex-direction:row}

package/dist/styles/EditableField.css

@@ -1 +1 @@
-._editableField_1lhi9_30{width:100%;display:flex;justify-content:flex-start;align-items:start;flex-direction:column;gap:.25rem}._statiqueField_1lhi9_39{width:100%;border-radius:4px;border:1px solid var(--input-primary-default-border);padding:.5rem}
+._editableField_12vkl_30{width:100%;display:flex;justify-content:flex-start;align-items:start;flex-direction:column;gap:.25rem;cursor:default}._statiqueField_12vkl_40{width:100%;border-radius:4px;border:1px solid var(--input-primary-default-border);padding:.5rem}

package/dist/styles/EditableSelect.css

@@ -0,0 +1 @@
+._editableSelect_6vsm4_30{width:100%;gap:.25rem;display:flex;justify-content:flex-start;align-items:start;flex-direction:column;cursor:default}._statiqueField_6vsm4_40{width:100%;border-radius:4px;border:1px solid var(--input-primary-default-border);padding:.5rem}

package/package.json

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

package/dist/styles/index.css

@@ -1 +0,0 @@
-@font-face{font-family:Urbanist-Thin;src:url(../fonts/Urbanist-Thin.ttf) format("truetype");font-weight:100;font-style:normal}@font-face{font-family:Urbanist-Extra-Light;src:url(../fonts/Urbanist-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal}@font-face{font-family:Urbanist-Light;src:url(../fonts/Urbanist-Light.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Urbanist-Regular;src:url(../fonts/Urbanist-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Urbanist;src:url(../fonts/Urbanist-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Urbanist-Back;src:url(../fonts/Urbanist-Black.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Urbanist-Semi-Bold;src:url(../fonts/Urbanist-SemiBold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Urbanist-Bold;src:url(../fonts/Urbanist-Bold.ttf) format("truetype");font-weight:800;font-style:normal}@font-face{font-family:Urbanist-Extra-Bold;src:url(../fonts/Urbanist-ExtraBold.ttf) format("truetype");font-weight:900;font-style:normal}:root,body{font-family:Urbanist,sans-serif;line-height:1;width:100vw;height:100vh}h1{font-size:1.875em;font-style:normal;font-weight:700;line-height:2.25rem}h2{font-size:1.5em;font-style:normal;font-weight:700;line-height:2rem;margin:0}h3{font-size:1.25em;font-style:normal;font-weight:700;line-height:1.75rem;margin:0}h4{font-size:1.125em;font-style:normal;font-weight:700;line-height:1.75rem;margin:0}h5{font-size:1em;font-style:normal;font-weight:700;line-height:1.5rem;margin:0}h6{font-size:.875em;font-style:normal;font-weight:700;line-height:1.25rem;margin:0}.textExtraLarge{font-size:1.25em;font-style:normal;line-height:2rem}.textLarge{font-size:1.125em;font-style:normal;line-height:1.75rem}.textMedium{font-size:1em;font-style:normal;line-height:1.5rem}.textSmall{font-size:.875em;font-style:normal;line-height:1.25rem}.textSmaller{font-size:.75em;font-style:normal;line-height:1rem}.labelExtraLarge{font-size:1.25em;font-style:normal;line-height:normal;letter-spacing:1.2px}.labelLarge{font-size:1.125em;font-style:normal;line-height:normal;letter-spacing:1.08px}.labelMedium{font-size:1em;font-style:normal;line-height:normal;letter-spacing:.96px}.labelSmall{font-size:.875em;font-style:normal;line-height:normal;letter-spacing:.84px}.labelSmaller{font-size:.75em;font-style:normal;line-height:normal;letter-spacing:.72px}.labelSmallest{font-size:.625em;font-style:normal;line-height:normal;letter-spacing:.6px}.fontWeight-100{font-weight:100}.fontWeight-200{font-weight:200}.fontWeight-300{font-weight:300}.fontWeight-400{font-weight:400}.fontWeight-500{font-weight:500}.fontWeight-600{font-weight:600}.fontWeight-700{font-weight:700}.fontWeight-800{font-weight:800}.fontWeight-900{font-weight:900}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background-color:var(--scrollbar-background);border-radius:.5rem;transition:all .3s ease;margin:.625rem;background-clip:padding-box}::-webkit-scrollbar:hover{cursor:pointer}::-webkit-scrollbar-corner{background:var(--scrollbar-background)}