@situaction/traq-ui-ste 1.2.9 → 1.2.11

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

@@ -1,4 +1,5 @@
 import { SelectItem } from '../select/Select';
+import { Size } from '../interface';
 
 interface EditableSelectProps {
     /** Label displayed above the select or static value */
@@ -15,6 +16,8 @@ interface EditableSelectProps {
     onSelect?: (selected: SelectItem) => void;
     /** The currently selected item */
     selected?: SelectItem;
+    /** Size of select */
+    size?: Size;
     /** If true, the select takes full width */
     fullWidth?: boolean;
 }
@@ -23,5 +26,5 @@ interface EditableSelectProps {
  * and a Select dropdown based on the `edit` prop. It is commonly used
  * in forms or data views where inline editing is required.
  */
-export declare const EditableSelect: ({ label, listItems, value, placeholder, edit, onSelect, selected, fullWidth }: EditableSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditableSelect: ({ label, listItems, value, placeholder, edit, onSelect, selected, size, fullWidth }: EditableSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,36 +1,45 @@
-import { jsxs as i, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { Select as S } from "../select/Select.js";
-import '../../styles/EditableSelect.css';const x = "_editableSelect_j0aoc_30", f = "_statiqueField_j0aoc_40", s = {
-  editableSelect: x,
-  statiqueField: f
-}, _ = ({
+import { jsxs as d, Fragment as o, jsx as i } from "react/jsx-runtime";
+import { Select as F } from "../select/Select.js";
+import '../../styles/EditableSelect.css';const q = "_editableSelect_1nilm_30", f = "_fullWidth_1nilm_39", z = "_statiqueField_1nilm_43", e = {
+  editableSelect: q,
+  fullWidth: f,
+  statiqueField: z,
+  "statiqueField-size-xl": "_statiqueField-size-xl_1nilm_56",
+  "statiqueField-size-l": "_statiqueField-size-l_1nilm_63",
+  "statiqueField-size-m": "_statiqueField-size-m_1nilm_70",
+  "statiqueField-size-s": "_statiqueField-size-s_1nilm_77"
+}, x = ({
   label: l,
-  listItems: a,
+  listItems: m,
   value: t,
-  placeholder: c,
-  edit: d,
-  onSelect: r,
-  selected: n,
-  fullWidth: o = !1
-}) => d ? /* @__PURE__ */ i(m, { children: [
-  /* @__PURE__ */ e("span", { className: "textSmall", children: l }),
-  /* @__PURE__ */ e(
-    S,
-    {
-      size: "s",
-      listItem: a,
-      placeholder: c,
-      modeDisplay: "text",
-      onSelect: r,
-      selected: n,
-      autoCloseCondition: !0,
-      fullWidth: o ?? !1
-    }
-  )
-] }) : /* @__PURE__ */ i("div", { className: s.editableSelect, children: [
-  /* @__PURE__ */ e("span", { className: "textSmall", children: l }),
-  /* @__PURE__ */ e("div", { className: `${s.statiqueField} textSmall`, children: (t == null ? void 0 : t.trim()) || "-" })
-] });
+  placeholder: n,
+  edit: c,
+  onSelect: _,
+  selected: u,
+  size: s = "m",
+  fullWidth: a = !1
+}) => {
+  const r = e[`statiqueField-size-${s}`] ?? e["statiqueField-size-m"];
+  return c ? /* @__PURE__ */ d(o, { children: [
+    /* @__PURE__ */ i("span", { className: "textSmall", children: l }),
+    /* @__PURE__ */ i(
+      F,
+      {
+        size: s,
+        listItem: m,
+        placeholder: n,
+        modeDisplay: "text",
+        onSelect: _,
+        selected: u,
+        autoCloseCondition: !0,
+        fullWidth: a ?? !1
+      }
+    )
+  ] }) : /* @__PURE__ */ d("div", { className: `${e.editableSelect} ${a ? e.fullWidth : ""}`, children: [
+    /* @__PURE__ */ i("span", { className: "textSmall", children: l }),
+    /* @__PURE__ */ i("div", { className: `${e.statiqueField} ${r} textSmall`, children: (t == null ? void 0 : t.trim()) || "-" })
+  ] });
+};
 export {
-  _ as EditableSelect
+  x as EditableSelect
 };

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

@@ -1,22 +1,22 @@
 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 = {
+import { forwardRef as w } from "react";
+import '../../styles/IconButton.css';const z = "_button_wxoc4_30", m = "_flexHorizontalCenter_wxoc4_185", t = {
   button: z,
-  "button-round": "_button-round_kvvl4_58",
-  "button-primary": "_button-primary_kvvl4_61",
-  "button-secondary": "_button-secondary_kvvl4_75",
-  "button-tertiary": "_button-tertiary_kvvl4_91",
-  "button-ghost": "_button-ghost_kvvl4_107",
-  "button-icon": "_button-icon_kvvl4_123",
-  "button-icon-selected": "_button-icon-selected_kvvl4_135",
-  "button-error": "_button-error_kvvl4_144",
-  "button-size-xl": "_button-size-xl_kvvl4_157",
-  "button-size-l": "_button-size-l_kvvl4_162",
-  "button-size-m": "_button-size-m_kvvl4_167",
-  "button-size-s": "_button-size-s_kvvl4_172",
-  "button-size-menu": "_button-size-menu_kvvl4_177",
+  "button-round": "_button-round_wxoc4_58",
+  "button-primary": "_button-primary_wxoc4_61",
+  "button-secondary": "_button-secondary_wxoc4_75",
+  "button-tertiary": "_button-tertiary_wxoc4_91",
+  "button-ghost": "_button-ghost_wxoc4_107",
+  "button-icon": "_button-icon_wxoc4_124",
+  "button-icon-selected": "_button-icon-selected_wxoc4_136",
+  "button-error": "_button-error_wxoc4_145",
+  "button-size-xl": "_button-size-xl_wxoc4_158",
+  "button-size-l": "_button-size-l_wxoc4_163",
+  "button-size-m": "_button-size-m_wxoc4_168",
+  "button-size-s": "_button-size-s_wxoc4_173",
+  "button-size-menu": "_button-size-menu_wxoc4_178",
   flexHorizontalCenter: m
-}, d = k(
+}, d = w(
   ({
     mode: o = "primary",
     size: n = "m",
@@ -25,12 +25,12 @@ import '../../styles/IconButton.css';const z = "_button_kvvl4_30", m = "_flexHor
     round: u,
     disabled: r,
     children: b,
-    onClick: l,
+    onClick: c,
     ...s
   }, i) => {
-    const v = () => e ? "error" : o, c = [
+    const x = () => e ? "error" : o, l = [
       t.button,
-      t[`button-${v()}`],
+      t[`button-${x()}`],
       u && t["button-round"],
       t[`button-size-${n}`],
       _ && o === "icon" && t["button-icon-selected"],
@@ -40,8 +40,8 @@ import '../../styles/IconButton.css';const z = "_button_kvvl4_30", m = "_flexHor
       "button",
       {
         ref: i,
-        className: c,
-        onClick: l,
+        className: l,
+        onClick: c,
         disabled: r,
         ...s,
         children: b

package/dist/components/input/Input.js

@@ -1,42 +1,42 @@
-import { jsxs as a, jsx as t, Fragment as y } from "react/jsx-runtime";
-import { useState as c, useRef as p } from "react";
-import '../../styles/Input.css';const F = "_flexHorizontalBetween_xyzdj_157", N = "_flexHorizontal_xyzdj_157", e = {
-  "input-style": "_input-style_xyzdj_52",
-  "input-style-disabled": "_input-style-disabled_xyzdj_64",
-  "input-style-focused": "_input-style-focused_xyzdj_75",
-  "input-style-secondary": "_input-style-secondary_xyzdj_82",
-  "input-style-ghost": "_input-style-ghost_xyzdj_96",
-  "input-style-error": "_input-style-error_xyzdj_99",
-  "input-container": "_input-container_xyzdj_109",
-  "input-style-size-xl": "_input-style-size-xl_xyzdj_113",
-  "input-style-size-l": "_input-style-size-l_xyzdj_123",
-  "input-style-size-m": "_input-style-size-m_xyzdj_133",
-  "input-style-size-s": "_input-style-size-s_xyzdj_143",
-  "input-style-radius": "_input-style-radius_xyzdj_153",
-  flexHorizontalBetween: F,
+import { jsxs as a, jsx as t, Fragment as c } from "react/jsx-runtime";
+import { useState as p, useRef as _ } from "react";
+import '../../styles/Input.css';const j = "_flexHorizontalBetween_12i5w_141", N = "_flexHorizontal_12i5w_141", e = {
+  "input-style": "_input-style_12i5w_30",
+  "input-style-disabled": "_input-style-disabled_12i5w_60",
+  "input-style-focused": "_input-style-focused_12i5w_71",
+  "input-style-secondary": "_input-style-secondary_12i5w_78",
+  "input-style-ghost": "_input-style-ghost_12i5w_92",
+  "input-style-error": "_input-style-error_12i5w_95",
+  "input-container": "_input-container_12i5w_105",
+  "input-style-size-xl": "_input-style-size-xl_12i5w_109",
+  "input-style-size-l": "_input-style-size-l_12i5w_116",
+  "input-style-size-m": "_input-style-size-m_12i5w_123",
+  "input-style-size-s": "_input-style-size-s_12i5w_130",
+  "input-style-radius": "_input-style-radius_12i5w_137",
+  flexHorizontalBetween: j,
   flexHorizontal: N
 }, R = ({
-  sizeStyle: d = "m",
-  labelUnit: l,
+  sizeStyle: y = "m",
+  labelUnit: i,
   status: n = "default",
-  childrenLeft: i,
+  childrenLeft: l,
   childrenRight: o,
-  round: _,
+  round: d,
   disabled: u,
-  defaultValue: z,
-  ...f
+  defaultValue: f,
+  ...w
 }) => {
-  const [x, r] = c(!1), [j, h] = c(z || ""), m = p(null), s = p(null), g = () => r(!0), B = () => r(!1), C = (w) => {
-    h(w.target.value);
+  const [z, r] = p(!1), [h, x] = p(f || ""), m = _(null), s = _(null), g = () => r(!0), B = () => r(!1), C = (F) => {
+    x(F.target.value);
   }, H = () => {
     s.current && s.current.focus();
   }, S = [
     e["input-style"],
-    e[`input-style-size-${d}`],
-    _ && e["input-style-radius"],
+    e[`input-style-size-${y}`],
+    d && e["input-style-radius"],
     e.flexHorizontalBetween
   ].filter(Boolean).join(" "), v = [
-    x && e["input-style-focused"],
+    z && e["input-style-focused"],
     u && e["input-style-disabled"],
     n === "secondary" && e["input-style-secondary"],
     n === "ghost" && e["input-style-ghost"]
@@ -45,7 +45,7 @@ import '../../styles/Input.css';const F = "_flexHorizontalBetween_xyzdj_157", N
     "div",
     {
       ref: m,
-      className: `input-style ${S} ${(() => {
+      className: `${S} ${(() => {
         switch (n) {
           case "error":
             return e["input-style-error"];
@@ -57,20 +57,20 @@ import '../../styles/Input.css';const F = "_flexHorizontalBetween_xyzdj_157", N
       onBlur: B,
       onClick: H,
       children: [
-        i && /* @__PURE__ */ t(y, { children: i }),
+        l && /* @__PURE__ */ t(c, { children: l }),
         /* @__PURE__ */ t("div", { className: e["input-container"], children: /* @__PURE__ */ t(
           "input",
           {
-            autoCorrect: "false",
+            autoCorrect: "off",
             disabled: u,
-            value: j,
+            value: h,
             onChange: C,
             ref: s,
-            ...f
+            ...w
           }
         ) }),
-        /* @__PURE__ */ a(y, { children: [
-          l && /* @__PURE__ */ t("div", { children: l }),
+        /* @__PURE__ */ a(c, { children: [
+          i && /* @__PURE__ */ t("div", { children: i }),
           o && /* @__PURE__ */ t("span", { className: e.flexHorizontal, children: o })
         ] })
       ]

package/dist/components/menu/Menu.js

@@ -1,12 +1,12 @@
-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 { IconButton as u } from "../icon-button/IconButton.js";
-import { Icon as w } from "../icon/Icon.js";
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { useState as c, useRef as v, useEffect as M } from "react";
+import { Button as $ } from "../button/Button.js";
+import { IconButton as f } from "../icon-button/IconButton.js";
+import { Icon as N } from "../icon/Icon.js";
 import { Modal as W } from "../modal/Modal.js";
 import "../theme/ThemeContext.js";
 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 = {
+const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21", D = "_close_11eub_25", q = "_menuButton_11eub_29", A = "_closeIcon_11eub_37", F = "_label_11eub_43", G = "_textEllipsis_11eub_47", J = "_pointer_11eub_52", K = "_fullImg_11eub_55", Q = "_menuParams_11eub_61", T = "_line_11eub_67", U = "_borderRadiusM_11eub_74", X = "_menuItem_11eub_78", Y = "_longLogo_11eub_87", Z = "_flexVerticalBetweenStart_11eub_92", ee = "_flexHorizontalBetween_11eub_99", le = "_flexHorizontalCenter_11eub_106", oe = "_flexVertical_11eub_92", ne = "_flexVerticalBetweenCenter_11eub_121", e = {
   fullHeight: y,
   fullWidth: O,
   open: j,
@@ -21,100 +21,102 @@ const y = "_fullHeight_o2xi7_15", O = "_fullWidth_o2xi7_18", j = "_open_o2xi7_21
   line: T,
   borderRadiusM: U,
   menuItem: X,
-  flexVerticalBetweenStart: Y,
-  flexHorizontalBetween: Z,
-  flexVertical: ee,
-  flexVerticalBetweenCenter: oe
-}, 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);
-  }, [d]);
-  const v = (o, i) => {
-    if (o.stopPropagation(), B(i), s) {
+  longLogo: Y,
+  flexVerticalBetweenStart: Z,
+  flexHorizontalBetween: ee,
+  flexHorizontalCenter: le,
+  flexVertical: oe,
+  flexVerticalBetweenCenter: ne
+}, fe = ({ menuItems: s = [], menuParams: r = [], shortLogo: m, logo: h, isOpen: p, defaultOpen: w = !1, selectedId: u }) => {
+  const [t, b] = c(w ?? !1), [x, g] = c(u ?? (s.length > 0 ? s[0].id : null)), H = v(null), [z, _] = c(!1), [I, C] = c(!1), [V, L] = c(null), [k, E] = c({}), R = v(null);
+  M(() => {
+    u != null && g(u);
+  }, [u]);
+  const B = (l, i) => {
+    if (l.stopPropagation(), g(i), s) {
       const n = s.find((a) => a.id === i);
       n == null || n.onClick();
     }
   }, S = () => {
-    p(!t), _(!1);
-  }, P = (o) => {
+    b(!t), _(!1);
+  }, P = (l) => {
     var i;
     if (r) {
-      const n = r.find((a) => a.id === o);
+      const n = r.find((a) => a.id === l);
       if (!n) return;
       if (n.content) {
         const a = t ? "200px" : "40px";
-        E(n.content), R({ ...n.position, left: a }), C(!0);
+        L(n.content), E({ ...n.position, left: a }), C(!0);
       } else
         (i = n.onClick) == null || i.call(n);
     }
   };
-  return $(() => {
-    h && h(t);
-  }, [t]), /* @__PURE__ */ l("nav", { ref: I, children: /* @__PURE__ */ f("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${t ? e.open : e.close}`, children: [
-    /* @__PURE__ */ f("div", { className: e.fullWidth, children: [
-      /* @__PURE__ */ l(
+  return M(() => {
+    p && p(t);
+  }, [t]), /* @__PURE__ */ o("nav", { ref: H, children: /* @__PURE__ */ d("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${t ? e.open : e.close}`, children: [
+    /* @__PURE__ */ d("div", { className: e.fullWidth, children: [
+      /* @__PURE__ */ o(
         "div",
         {
-          className: `${e.flexHorizontalBetween} ${e.pointer} ${e.textEllipsis}`,
+          className: `${e.flexHorizontalCenter} ${e.pointer} ${e.textEllipsis}`,
           onClick: () => S(),
-          children: t ? /* @__PURE__ */ f("div", { className: e.fullImg, children: [
-            m && /* @__PURE__ */ l("img", { src: m, alt: "Logo situaction" }),
-            /* @__PURE__ */ l(u, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(w, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
-          ] }) : /* @__PURE__ */ l(
+          children: t ? /* @__PURE__ */ d("div", { className: e.fullImg, children: [
+            h && /* @__PURE__ */ o("img", { className: e.longLogo, src: h, alt: "Logo situaction" }),
+            /* @__PURE__ */ o(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ o(N, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
+          ] }) : /* @__PURE__ */ o(
             "div",
             {
               className: e.closeIcon,
               onMouseEnter: () => _(!0),
               onMouseLeave: () => _(!1),
-              onClick: () => p(!t),
-              children: V || !x ? /* @__PURE__ */ l(u, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(w, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ l("img", { src: x, alt: "Logo situaction" })
+              onClick: () => b(!t),
+              children: z || !m ? /* @__PURE__ */ o(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ o(N, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ o("img", { src: m, alt: "Logo situaction" })
             }
           )
         }
       ),
-      /* @__PURE__ */ l("div", { className: e.menuItem, children: s && s.map((o) => t ? /* @__PURE__ */ l("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ l(
-        b,
+      /* @__PURE__ */ o("div", { className: e.menuItem, children: s && s.map((l) => t ? /* @__PURE__ */ o("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ o(
+        $,
         {
-          mode: g === o.id ? "secondary" : "ghost",
-          label: o.label,
-          onClick: (i) => v(i, o.id),
-          childrenLeft: o.icon
+          mode: x === l.id ? "secondary" : "ghost",
+          label: l.label,
+          onClick: (i) => B(i, l.id),
+          childrenLeft: l.icon
         }
-      ) }, `button-${o.id}`) : /* @__PURE__ */ l("div", { className: e.textEllipsis, children: /* @__PURE__ */ l(
-        u,
+      ) }, `button-${l.id}`) : /* @__PURE__ */ o("div", { className: e.textEllipsis, children: /* @__PURE__ */ o(
+        f,
         {
-          mode: g === o.id ? "secondary" : "ghost",
-          children: o.icon,
-          onClick: (i) => v(i, o.id)
+          mode: x === l.id ? "secondary" : "ghost",
+          children: l.icon,
+          onClick: (i) => B(i, l.id)
         }
-      ) }, `icon-${o.id}`)) }),
-      /* @__PURE__ */ l("div", { className: e.line })
+      ) }, `icon-${l.id}`)) }),
+      /* @__PURE__ */ o("div", { className: e.line })
     ] }),
-    /* @__PURE__ */ f("div", { className: `${e.menuParams} ${e.flexVerticalBetweenCenter}`, children: [
-      r && r.map((o) => /* @__PURE__ */ l(
+    /* @__PURE__ */ d("div", { className: `${e.menuParams} ${e.flexVerticalBetweenCenter}`, children: [
+      r && r.map((l) => /* @__PURE__ */ o(
         "div",
         {
           className: `${e.fullWidth} ${e.textEllipsis}`,
-          onClick: () => P(o.id),
-          children: t ? /* @__PURE__ */ l("div", { className: e.menuButton, children: /* @__PURE__ */ l(b, { mode: "ghost", label: o.label, childrenLeft: o.icon }, o.id) }) : /* @__PURE__ */ l(u, { mode: "ghost", children: o.icon })
+          onClick: () => P(l.id),
+          children: t ? /* @__PURE__ */ o("div", { className: e.menuButton, children: /* @__PURE__ */ o($, { mode: "ghost", label: l.label, childrenLeft: l.icon }, l.id) }) : /* @__PURE__ */ o(f, { mode: "ghost", children: l.icon })
         },
-        `param-icon-${o.id}`
+        `param-icon-${l.id}`
       )),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ o(
         W,
         {
-          ref: L,
+          ref: R,
           className: e.borderRadiusM,
-          open: H,
+          open: I,
           onClose: () => C(!1),
-          position: z,
-          children: k
+          position: k,
+          children: V
         }
       )
     ] })
   ] }) });
 };
 export {
-  de as Menu
+  fe as Menu
 };

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

@@ -7,22 +7,23 @@ export type SelectItem = {
     value: string;
 };
 export interface SelectProps {
-    /** The currently selected item. If not provided, the first item from `listItem` will be used. */
+    /** The currently selected item. If not provided, the first item from `listItem` will be used. **/
     selected?: SelectItem;
-    /** The size of the select button ('s', 'm', 'l', 'xl'). Default is 'm'. */
+    /** The size of the select button ('s', 'm', 'l', 'xl'). Default is 'm'. **/
     size?: Size | 'menu';
-    /** The list of selectable items, each with a label, an optional icon, and a value. */
+    /** The list of selectable items, each with a label, an optional icon, and a value. **/
     listItem: SelectItem[];
-    /** Determines how the selected item is displayed:
+    /**
+     * Determines how the selected item is displayed:
      * - 'all' (icon + text if both exist),
      * - 'icon' (only the icon),
      * - 'text' (only the text).
      * Default is 'all'.
      */
     modeDisplay?: 'icon' | 'text' | 'all';
-    /** Callback function triggered when an item is selected, returning the selected object. */
+    /** Callback function triggered when an item is selected, returning the selected object. **/
     onSelect?: (selected: SelectItem) => void;
-    /** Position personnalized*/
+    /** Position personnalized **/
     positionOverride?: {
         top?: string;
         left?: string;
@@ -30,12 +31,12 @@ export interface SelectProps {
         bottom?: string;
         width?: string;
     };
-    /** Text displayed when no item is selected */
+    /** Text displayed when no item is selected **/
     placeholder?: string;
     searchPlaceholder?: string;
-    /** Condition to close the modal */
+    /** Condition to close the modal **/
     autoCloseCondition: boolean;
-    /** Enable a search input inside the select modal to filter options */
+    /** Enable a search input inside the select modal to filter options **/
     searchable?: boolean;
     fullWidth?: boolean;
 }