@livechat/design-system-react-components 1.14.0 → 1.15.0

package/dist/dsrc.es.js

@@ -22,7 +22,7 @@ var I = (t, a) => {
 var Yt = (t, a, r) => (Vt(t, typeof a != "symbol" ? a + "" : a, r), r);
 import * as e from "react";
 import { useReducer as $r, useRef as wr, useEffect as st, useCallback as Ct, useMemo as Nt } from "react";
-import { Check as Gt, Close as Ne, ChevronLeft as Ua, ChevronDown as $t, Info as la, Warning as Wa, CheckCircle as Va, Block as Ya, Person as Cr, ChevronUp as Ut, DoubleArrowLeft as Nr, ChevronRight as ta, DoubleArrowRight as xr, VisibilityOn as Sr, VisibilityOff as Dr, Search as Tr, LockBlackFilled as Br, Refresh as Ar, Error as Ir } from "@livechat/design-system-icons";
+import { Check as Gt, Close as Se, ChevronLeft as Ua, ChevronDown as $t, Info as la, Warning as Wa, CheckCircle as Va, Block as Ya, Person as Cr, ChevronUp as Ut, DoubleArrowLeft as Nr, ChevronRight as ta, DoubleArrowRight as xr, VisibilityOn as Sr, VisibilityOff as Dr, Search as Tr, LockBlackFilled as Br, Refresh as Ar, Error as Ir } from "@livechat/design-system-icons";
 import m from "clsx";
 import { useFloating as na, offset as sa, flip as ia, autoUpdate as da, useClick as ua, useDismiss as ma, useRole as pa, useInteractions as ga, useTransitionStyles as qa, shift as Ka, arrow as Pr, useHover as Fr, safePolygon as Rr, useFocus as Mr, useTransitionStatus as Lr, FloatingArrow as Or, FloatingFocusManager as Hr } from "@floating-ui/react";
 import Ja from "lodash.debounce";
@@ -45,6 +45,7 @@ const Rc = {
   SurfaceSecondaryHover: "--surface-secondary-hover",
   SurfaceSecondaryActive: "--surface-secondary-active",
   SurfaceSecondaryDisabled: "--surface-secondary-disabled",
+  SurfacePrimaryHoverOpacity: "--surface-primary-hover-opacity",
   SurfaceBasicHover: "--surface-basic-hover",
   SurfacePrimaryHover: "--surface-primary-hover",
   SurfaceBasicActive: "--surface-basic-active",
@@ -491,7 +492,7 @@ const Rc = {
   ]);
   const b = s !== void 0, [k, v] = e.useState(c), $ = e.useRef(-1), w = e.useRef(null), T = b ? s : k, E = () => {
     T ? (i == null || i(), !b && v(!1)) : (d == null || d(), !b && v(!0));
-  }, { x: B, y: N, strategy: ue, refs: F, context: W } = na({
+  }, { x: B, y: N, strategy: pe, refs: F, context: W } = na({
     middleware: [sa(4), ia(n)],
     placement: o,
     open: T,
@@ -500,7 +501,7 @@ const Rc = {
     whileElementsMounted: da
   }), re = ua(W), Ae = ma(W, {
     enabled: T
-  }), Ie = pa(W), { getReferenceProps: xe, getFloatingProps: ze } = ga([
+  }), Ie = pa(W), { getReferenceProps: De, getFloatingProps: ze } = ga([
     re,
     Ae,
     Ie
@@ -541,7 +542,7 @@ const Rc = {
   }, [T, z]);
   const K = (A, J) => {
     $.current = A, J == null || J(), !b && !l && (v(!1), i == null || i());
-  }, me = (A, J) => A.groupHeader ? /* @__PURE__ */ e.createElement(
+  }, ge = (A, J) => A.groupHeader ? /* @__PURE__ */ e.createElement(
     "li",
     {
       key: A.key,
@@ -572,7 +573,7 @@ const Rc = {
     D(y({
       "data-testid": "action-menu-trigger-button",
       ref: F.setReference
-    }, xe()), {
+    }, De()), {
       className: a
     }),
     _
@@ -582,7 +583,7 @@ const Rc = {
       ref: F.setFloating,
       className: Ge[Ue],
       style: y({
-        position: ue,
+        position: pe,
         top: N != null ? N : "",
         left: B != null ? B : ""
       }, Ye)
@@ -594,7 +595,7 @@ const Rc = {
         role: "menu",
         ref: w
       }),
-      r.map(me)
+      r.map(ge)
     )
   ));
 }, qr = "lc-Typography-module__caps___c3eNJ", lt = {
@@ -749,11 +750,15 @@ const Rc = {
       primaryColor: "var(--content-invert-primary)",
       secondaryColor: "var(--surface-invert-secondary)"
     };
-}, t_ = "lc-Button-module__btn___aijZJ", a_ = "lc-Button-module__btn__loader___c8zZz", r_ = "lc-Button-module__btn__icon___GVExB", pe = {
+}, t_ = "lc-Button-module__btn___aijZJ", a_ = "lc-Button-module__btn__loader___c8zZz", r_ = "lc-Button-module__btn__icon___GVExB", se = {
   btn: t_,
   "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
   "btn--full-width": "lc-Button-module__btn--full-width___kdbAr",
+  "btn--xcompact": "lc-Button-module__btn--xcompact___s-zG-",
+  "btn--with-left-icon": "lc-Button-module__btn--with-left-icon___MOLWC",
+  "btn--with-right-icon": "lc-Button-module__btn--with-right-icon___R0Xum",
   "btn--compact": "lc-Button-module__btn--compact___4eptQ",
+  "btn--medium": "lc-Button-module__btn--medium___wfUJA",
   "btn--large": "lc-Button-module__btn--large___lb-z6",
   "btn--basic": "lc-Button-module__btn--basic___Jc2gD",
   "btn--primary": "lc-Button-module__btn--primary___ajbjQ",
@@ -775,7 +780,7 @@ const Rc = {
   "btn__icon--right": "lc-Button-module__btn__icon--right___fHr3D",
   "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
   "btn--icon-only--bg": "lc-Button-module__btn--icon-only--bg___X-4V2"
-}, ge = "btn", U = e.forwardRef(
+}, ie = "btn", U = e.forwardRef(
   (g, f) => {
     var b = g, {
       loading: t = !1,
@@ -808,15 +813,16 @@ const Rc = {
     ]);
     const k = t || a, v = !d && l, $ = ["text", "link", "link-light"].includes(o), w = p ? "a" : "button", T = m(
       i,
-      pe[ge],
-      pe[`${ge}--${o}`],
-      pe[`${ge}--${c}`],
+      se[ie],
+      se[`${ie}--${o}`],
+      se[`${ie}--${c}`],
       {
-        [pe[`${ge}--loading`]]: t,
-        [pe[`${ge}--full-width`]]: _,
-        [pe[`${ge}--icon-only`]]: v,
-        [pe[`${ge}--icon-only--bg`]]: v && $,
-        [pe[`${ge}--disabled`]]: k
+        [se[`${ie}--loading`]]: t,
+        [se[`${ie}--full-width`]]: _,
+        [se[`${ie}--with-${n}-icon`]]: l && !v && !$,
+        [se[`${ie}--icon-only`]]: v,
+        [se[`${ie}--icon-only--bg`]]: v && $,
+        [se[`${ie}--disabled`]]: k
       }
     );
     return /* @__PURE__ */ e.createElement(
@@ -833,18 +839,18 @@ const Rc = {
         y({
           size: "small",
           label: s,
-          className: pe[`${ge}__loader`]
+          className: se[`${ie}__loader`]
         }, e_(o))
       ),
       l && e.cloneElement(l, {
         className: m(
           l.props.className,
-          pe[`${ge}__icon`],
-          pe[`${ge}__icon--${n}`]
+          se[`${ie}__icon`],
+          se[`${ie}__icon--${n}`]
         ),
         disabled: a
       }),
-      /* @__PURE__ */ e.createElement("div", { className: pe[`${ge}__content`] }, d)
+      /* @__PURE__ */ e.createElement("div", { className: se[`${ie}__content`] }, d)
     );
   }
 );
@@ -922,19 +928,19 @@ const o_ = "lc-Tooltip-module__tooltip___QOOAr", c_ = "lc-Tooltip-module__toolti
   useDismissHookProps: E,
   useClickHookProps: B,
   hoverOutDelayTimeout: N = 100,
-  arrowOffsetY: ue,
+  arrowOffsetY: pe,
   arrowOffsetX: F,
   closeOnTriggerBlur: W = !1,
   floatingStrategy: re
 }) => {
-  const Ae = n !== void 0, [Ie, xe] = e.useState(!1), ze = e.useRef(null), Ye = Ae ? n : Ie, qe = c || o, R = m(
+  const Ae = n !== void 0, [Ie, De] = e.useState(!1), ze = e.useRef(null), Ye = Ae ? n : Ie, qe = c || o, R = m(
     C[xt],
     a,
     qe && C[`${xt}--${qe}`],
     s && C[`${xt}--full-space`]
   ), z = typeof _ == "function", K = (ve) => {
-    ve !== Ye && (ve ? d == null || d() : i == null || i(), !Ae && xe(ve));
-  }, me = (ve) => p ? ve != null ? ve : u : 0, A = (ve) => ve != null ? ve : g, {
+    ve !== Ye && (ve ? d == null || d() : i == null || i(), !Ae && De(ve));
+  }, ge = (ve) => p ? ve != null ? ve : u : 0, A = (ve) => ve != null ? ve : g, {
     floatingStyles: J,
     refs: X,
     context: _e,
@@ -962,8 +968,8 @@ const o_ = "lc-Tooltip-module__tooltip___QOOAr", c_ = "lc-Tooltip-module__toolti
     handleClose: W ? null : Rr()
   }), dr = Mr(_e), ur = ma(_e, E), mr = pa(_e, { role: "tooltip" }), pr = ua(_e, B), { isMounted: gr, styles: br } = qa(_e, {
     duration: {
-      open: me(h),
-      close: me(f)
+      open: ge(h),
+      close: ge(f)
     }
   }), { status: fr } = Lr(_e), { getReferenceProps: vr, getFloatingProps: hr } = ga([
     ir,
@@ -998,7 +1004,7 @@ const o_ = "lc-Tooltip-module__tooltip___QOOAr", c_ = "lc-Tooltip-module__toolti
         className: C[`${xt}__arrow`],
         ref: ze,
         context: _e,
-        style: __(ue, F, sr, Ke)
+        style: __(pe, F, sr, Ke)
       }
     )
   ));
@@ -1008,7 +1014,7 @@ const o_ = "lc-Tooltip-module__tooltip___QOOAr", c_ = "lc-Tooltip-module__toolti
     className: C[`${mt}-close`],
     onClick: c
   },
-  /* @__PURE__ */ e.createElement(x, { source: Ne, kind: o ? er(o) : "primary" })
+  /* @__PURE__ */ e.createElement(x, { source: Se, kind: o ? er(o) : "primary" })
 ), a && /* @__PURE__ */ e.createElement(
   "div",
   {
@@ -1027,7 +1033,7 @@ const o_ = "lc-Tooltip-module__tooltip___QOOAr", c_ = "lc-Tooltip-module__toolti
     )
   },
   r
-)), Se = "tooltip", qc = ({
+)), Te = "tooltip", qc = ({
   header: t,
   text: a,
   image: r,
@@ -1038,26 +1044,26 @@ const o_ = "lc-Tooltip-module__tooltip___QOOAr", c_ = "lc-Tooltip-module__toolti
   secondaryButton: n
 }) => {
   const s = (i) => i === "invert" ? "secondary" : "high-contrast";
-  return /* @__PURE__ */ e.createElement("div", { className: C[`${Se}__interactive`] }, _ && /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: C[`${Te}__interactive`] }, _ && /* @__PURE__ */ e.createElement(
     "button",
     {
-      className: C[`${Se}-close`],
+      className: C[`${Te}-close`],
       onClick: c
     },
-    /* @__PURE__ */ e.createElement(x, { source: Ne, kind: o ? er(o) : "primary" })
-  ), r && /* @__PURE__ */ e.createElement("div", { className: C[`${Se}-image-container`] }, /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement(x, { source: Se, kind: o ? er(o) : "primary" })
+  ), r && /* @__PURE__ */ e.createElement("div", { className: C[`${Te}-image-container`] }, /* @__PURE__ */ e.createElement(
     "img",
     {
-      className: C[`${Se}-image`],
+      className: C[`${Te}-image`],
       src: r.src,
       alt: r.alt
     }
-  )), t && /* @__PURE__ */ e.createElement("div", { className: C[`${Se}-header`] }, t), /* @__PURE__ */ e.createElement("div", { className: C[`${Se}-text`] }, a), /* @__PURE__ */ e.createElement(
+  )), t && /* @__PURE__ */ e.createElement("div", { className: C[`${Te}-header`] }, t), /* @__PURE__ */ e.createElement("div", { className: C[`${Te}-text`] }, a), /* @__PURE__ */ e.createElement(
     "div",
     {
       className: m(
-        C[`${Se}-footer`],
-        C[`${Se}-footer--interactive`]
+        C[`${Te}-footer`],
+        C[`${Te}-footer--interactive`]
       )
     },
     /* @__PURE__ */ e.createElement(
@@ -1071,8 +1077,8 @@ const o_ = "lc-Tooltip-module__tooltip___QOOAr", c_ = "lc-Tooltip-module__toolti
     /* @__PURE__ */ e.createElement(
       U,
       {
-        className: m(C[`${Se}-footer-secondary`], {
-          [C[`${Se}-footer-secondary-invert`]]: o === "invert"
+        className: m(C[`${Te}-footer-secondary`], {
+          [C[`${Te}-footer-secondary-invert`]]: o === "invert"
         }),
         kind: n.kind || "text",
         onClick: n.handleClick
@@ -1518,7 +1524,7 @@ const xa = 8, Sa = "guide-tooltip", Da = (t, a) => new s_(t, a), Kc = (t) => {
       className: he[`${ke}__close-icon`],
       size: "compact",
       kind: "plain",
-      icon: /* @__PURE__ */ e.createElement(x, { source: Ne }),
+      icon: /* @__PURE__ */ e.createElement(x, { source: Se }),
       onClick: c
     }
   ));
@@ -1551,7 +1557,7 @@ function y_(t) {
   }
   return a && ba(a, "#FFFFFF") > 3 ? "var(--color-white)" : "var(--color-black)";
 }
-const E_ = "lc-Avatar-module__avatar___1zTCE", $_ = "lc-Avatar-module__avatar__status___nX2Ls", w_ = "lc-Avatar-module__avatar__rim___RCQ8Q", C_ = "lc-Avatar-module__avatar__image___YqfqE", se = {
+const E_ = "lc-Avatar-module__avatar___1zTCE", $_ = "lc-Avatar-module__avatar__status___nX2Ls", w_ = "lc-Avatar-module__avatar__rim___RCQ8Q", C_ = "lc-Avatar-module__avatar__image___YqfqE", de = {
   avatar: E_,
   avatar__status: $_,
   "avatar__status--available": "lc-Avatar-module__avatar__status--available___tcpFg",
@@ -1612,21 +1618,21 @@ const E_ = "lc-Avatar-module__avatar___1zTCE", $_ = "lc-Avatar-module__avatar__s
   withRim: i = !1
 }) => {
   const d = s === "image" && !c, [p, u] = e.useState(d), h = s === "image" && !!c && !p, f = s === "text", g = ["xxxsmall", "xxsmall", "xsmall"].includes(o) ? 1 : 2, b = k_(n, g), k = r || h_(n), v = k ? y_(k) : void 0, $ = f ? { backgroundColor: k } : {}, w = m(y({
-    [se[Z]]: !0,
-    [se[`${Z}--${_}`]]: !0,
-    [se[`${Z}--${o}`]]: !0,
-    [se[`${Z}--with-rim`]]: i
+    [de[Z]]: !0,
+    [de[`${Z}--${_}`]]: !0,
+    [de[`${Z}--${o}`]]: !0,
+    [de[`${Z}--with-rim`]]: i
   }, a ? { [`${a}`]: a } : {})), T = m(
-    se[`${Z}__status`],
-    se[`${Z}__status--${_}`],
-    se[`${Z}__status--${o}`],
-    ...l ? [se[`${Z}__status--${l}`]] : []
+    de[`${Z}__status`],
+    de[`${Z}__status--${_}`],
+    de[`${Z}__status--${o}`],
+    ...l ? [de[`${Z}__status--${l}`]] : []
   ), E = m(
-    se[`${Z}__icon`],
-    se[`${Z}__icon--${o}`]
+    de[`${Z}__icon`],
+    de[`${Z}__icon--${o}`]
   ), B = m(
-    se[`${Z}__rim`],
-    se[`${Z}__rim--${o}`]
+    de[`${Z}__rim`],
+    de[`${Z}__rim--${o}`]
   ), N = e.useCallback(() => u(!0), []);
   return e.useEffect(() => {
     u(d);
@@ -1645,7 +1651,7 @@ const E_ = "lc-Avatar-module__avatar___1zTCE", $_ = "lc-Avatar-module__avatar__s
   ), h && /* @__PURE__ */ e.createElement(
     "img",
     {
-      className: se[`${Z}__image`],
+      className: de[`${Z}__image`],
       src: c,
       alt: t,
       onError: N
@@ -1744,7 +1750,7 @@ const A_ = "lc-SegmentedControl-module__btn___tfsvL", Bt = {
     );
   });
   return /* @__PURE__ */ e.createElement("div", { role: "group", className: n }, u);
-}, P_ = "lc-Card-module__card___GqMm2", F_ = "lc-Card-module__card__header___0ptfD", R_ = "lc-Card-module__card__header__image___QMwSu", M_ = "lc-Card-module__card__header__heading___Wkikx", L_ = "lc-Card-module__card__header__heading__title___Uxi8s", O_ = "lc-Card-module__card__header__heading__description___6LnOK", H_ = "lc-Card-module__card__content___KuDcc", z_ = "lc-Card-module__card__actions___q9sAo", G_ = "lc-Card-module__card__actions__line___TF1bt", U_ = "lc-Card-module__card__actions__buttons___PDMMR", ie = {
+}, P_ = "lc-Card-module__card___GqMm2", F_ = "lc-Card-module__card__header___0ptfD", R_ = "lc-Card-module__card__header__image___QMwSu", M_ = "lc-Card-module__card__header__heading___Wkikx", L_ = "lc-Card-module__card__header__heading__title___Uxi8s", O_ = "lc-Card-module__card__header__heading__description___6LnOK", H_ = "lc-Card-module__card__content___KuDcc", z_ = "lc-Card-module__card__actions___q9sAo", G_ = "lc-Card-module__card__actions__line___TF1bt", U_ = "lc-Card-module__card__actions__buttons___PDMMR", ue = {
   card: P_,
   card__header: F_,
   card__header__image: R_,
@@ -1778,28 +1784,28 @@ const A_ = "lc-SegmentedControl-module__btn___tfsvL", Bt = {
     "src",
     "title"
   ]);
-  const [p, u] = e.useState(!1), h = p ? Ut : $t, f = p ? "Hide" : "Show more", g = (a == null ? void 0 : a.length) > 0, b = !!c, k = g || b, v = n, $ = l, w = $ ? "" : ie[W_];
-  return /* @__PURE__ */ e.createElement("div", y({ className: m(ie[Et], _) }, s), v && /* @__PURE__ */ e.createElement("div", { className: m(ie[zt], w) }, $ && /* @__PURE__ */ e.createElement(
+  const [p, u] = e.useState(!1), h = p ? Ut : $t, f = p ? "Hide" : "Show more", g = (a == null ? void 0 : a.length) > 0, b = !!c, k = g || b, v = n, $ = l, w = $ ? "" : ue[W_];
+  return /* @__PURE__ */ e.createElement("div", y({ className: m(ue[Et], _) }, s), v && /* @__PURE__ */ e.createElement("div", { className: m(ue[zt], w) }, $ && /* @__PURE__ */ e.createElement(
     "img",
     {
       alt: t,
-      className: ie[`${zt}__image`],
+      className: ue[`${zt}__image`],
       src: l
     }
-  ), /* @__PURE__ */ e.createElement("div", { className: ie[qt] }, /* @__PURE__ */ e.createElement(Ze, { size: "sm", className: ie[`${qt}__title`] }, n), /* @__PURE__ */ e.createElement(M, { size: "sm", className: ie[`${qt}__description`] }, o))), /* @__PURE__ */ e.createElement(M, { as: "div", size: "md", className: ie[`${Et}__content`] }, r), p && /* @__PURE__ */ e.createElement(
+  ), /* @__PURE__ */ e.createElement("div", { className: ue[qt] }, /* @__PURE__ */ e.createElement(Ze, { size: "sm", className: ue[`${qt}__title`] }, n), /* @__PURE__ */ e.createElement(M, { size: "sm", className: ue[`${qt}__description`] }, o))), /* @__PURE__ */ e.createElement(M, { as: "div", size: "md", className: ue[`${Et}__content`] }, r), p && /* @__PURE__ */ e.createElement(
     M,
     {
       as: "div",
       size: "md",
-      className: ie[`${Et}__expanded-content`]
+      className: ue[`${Et}__expanded-content`]
     },
     c
-  ), k && /* @__PURE__ */ e.createElement("div", { className: ie[At] }, /* @__PURE__ */ e.createElement("div", { className: ie[`${At}__line`] }), /* @__PURE__ */ e.createElement("div", { className: ie[`${At}__buttons`] }, g && a.map(
+  ), k && /* @__PURE__ */ e.createElement("div", { className: ue[At] }, /* @__PURE__ */ e.createElement("div", { className: ue[`${At}__line`] }), /* @__PURE__ */ e.createElement("div", { className: ue[`${At}__buttons`] }, g && a.map(
     ({ kind: T, onClick: E, children: B }) => /* @__PURE__ */ e.createElement(U, { size: "compact", kind: T, onClick: E }, B)
   ), b && /* @__PURE__ */ e.createElement(
     U,
     {
-      className: ie[`${At}__buttons-expander`],
+      className: ue[`${At}__buttons-expander`],
       kind: "link",
       iconPosition: "right",
       icon: /* @__PURE__ */ e.createElement(x, { source: h }),
@@ -2678,11 +2684,12 @@ const tl = (t) => {
     /* @__PURE__ */ e.createElement("div", { className: It[`${Pt}__header`] }, /* @__PURE__ */ e.createElement(Ze, { as: "div", size: "sm", className: It[`${Pt}__label`] }, r), _ && /* @__PURE__ */ e.createElement(M, { as: "div", size: "sm", className: It[`${Pt}__helper`] }, _)),
     a
   );
-}, go = "lc-Input-module__input___qeMAQ", Te = {
+}, go = "lc-Input-module__input___qeMAQ", Ne = {
   input: go,
   "input--focused": "lc-Input-module__input--focused___wQH5-",
   "input--disabled": "lc-Input-module__input--disabled___HidXX",
   "input--crop": "lc-Input-module__input--crop___uzJS8",
+  "input--read-only": "lc-Input-module__input--read-only___4O-G3",
   "input--error": "lc-Input-module__input--error___DlDbC",
   "input--xsmall": "lc-Input-module__input--xsmall___9u99K",
   "input--compact": "lc-Input-module__input--compact___iKSQZ",
@@ -2692,13 +2699,13 @@ const tl = (t) => {
   "input__icon--left": "lc-Input-module__input__icon--left___BcySs",
   "input__icon--right": "lc-Input-module__input__icon--right___VefSK",
   "input__visibility-button": "lc-Input-module__input__visibility-button___eWrVe"
-}, Be = "input", Ra = (t, a) => e.cloneElement(t.source, {
+}, xe = "input", Ra = (t, a) => e.cloneElement(t.source, {
   "data-testid": `input-icon-${t.place}`,
   className: m(
-    Te[`${Be}__icon`],
-    Te[`${Be}__icon--${t.place}`],
+    Ne[`${xe}__icon`],
+    Ne[`${xe}__icon--${t.place}`],
     {
-      [Te[`${Be}__icon--disabled`]]: a
+      [Ne[`${xe}__icon--disabled`]]: a
     }
   )
 }), nl = e.forwardRef(
@@ -2720,13 +2727,14 @@ const tl = (t) => {
     ]);
     const [d, p] = e.useState(!1), [u, h] = e.useState(!1), { type: f, onFocus: g, onBlur: b } = l, k = m(
       o,
-      Te[Be],
-      Te[`${Be}--${t}`],
+      Ne[xe],
+      Ne[`${xe}--${t}`],
       {
-        [Te[`${Be}--disabled`]]: r,
-        [Te[`${Be}--focused`]]: d,
-        [Te[`${Be}--error`]]: a,
-        [Te[`${Be}--crop`]]: c
+        [Ne[`${xe}--disabled`]]: r,
+        [Ne[`${xe}--focused`]]: d,
+        [Ne[`${xe}--error`]]: a,
+        [Ne[`${xe}--crop`]]: c,
+        [Ne[`${xe}--read-only`]]: l.readOnly
       }
     ), v = r ? "var(--content-disabled)" : "var(--content-default)", $ = u ? Sr : Dr, w = _ && _.place === "left", T = _ && f !== "password" && _.place === "right";
     return /* @__PURE__ */ e.createElement("div", { className: k, "aria-disabled": r, "tab-index": "0" }, w && Ra(_, r), /* @__PURE__ */ e.createElement(
@@ -2750,7 +2758,7 @@ const tl = (t) => {
         size: "compact",
         icon: /* @__PURE__ */ e.createElement(x, { customColor: v, source: $ }),
         onClick: () => h((E) => !E),
-        className: Te[`${Be}__visibility-button`]
+        className: Ne[`${xe}__visibility-button`]
       }
     ));
   }
@@ -2775,7 +2783,7 @@ const tl = (t) => {
       )
     }, r)
   );
-}, fo = "lc-Modal-module__modal__body___M-jmN", vo = "lc-Modal-module__modal__header___Fp5VE", ho = "lc-Modal-module__modal__heading___G9KVK", ko = "lc-Modal-module__modal__footer___2LYdc", de = {
+}, fo = "lc-Modal-module__modal__body___M-jmN", vo = "lc-Modal-module__modal__header___Fp5VE", ho = "lc-Modal-module__modal__heading___G9KVK", ko = "lc-Modal-module__modal__footer___2LYdc", me = {
   "modal-base": "lc-Modal-module__modal-base___hbL1U",
   "modal-base--full-space": "lc-Modal-module__modal-base--full-space___KcGFL",
   "modal-base__overlay": "lc-Modal-module__modal-base__overlay___kCQ8t",
@@ -2805,9 +2813,9 @@ const tl = (t) => {
     "fullSpaceContent"
   ]);
   const i = m(
-    de[Ft],
+    me[Ft],
     a,
-    c && de[`${Ft}--full-space`]
+    c && me[`${Ft}--full-space`]
   );
   e.useEffect(() => {
     if (!_)
@@ -2826,8 +2834,8 @@ const tl = (t) => {
       "data-testid": "lc-modal-overlay",
       onMouseDown: d,
       className: m(
-        de[`${Ft}__overlay`],
-        de[`${Ft}__overlay--visible`]
+        me[`${Ft}__overlay`],
+        me[`${Ft}__overlay--visible`]
       )
     },
     /* @__PURE__ */ e.createElement(
@@ -2850,11 +2858,11 @@ const tl = (t) => {
     kind: "plain",
     title: "Close modal",
     className: m(
-      de["modal-base__close"],
-      t && de["modal-base__close--label-type"]
+      me["modal-base__close"],
+      t && me["modal-base__close--label-type"]
     ),
     onClick: r,
-    icon: /* @__PURE__ */ e.createElement(x, { source: Ne, size: "medium", customColor: a })
+    icon: /* @__PURE__ */ e.createElement(x, { source: Se, size: "medium", customColor: a })
   }
 ), Qe = "modal", il = (i) => {
   var d = i, {
@@ -2876,7 +2884,7 @@ const tl = (t) => {
     "onClose",
     "contentClassName"
   ]);
-  const p = m(de[Qe], a), u = typeof t == "string", h = (f) => {
+  const p = m(me[Qe], a), u = typeof t == "string", h = (f) => {
     f.preventDefault(), f.stopPropagation(), l();
   };
   return /* @__PURE__ */ e.createElement(
@@ -2886,12 +2894,12 @@ const tl = (t) => {
       fullSpaceContent: o,
       onClose: l
     }, s),
-    _ && /* @__PURE__ */ e.createElement("div", { className: de[`${Qe}__label-header`] }, /* @__PURE__ */ e.createElement(
+    _ && /* @__PURE__ */ e.createElement("div", { className: me[`${Qe}__label-header`] }, /* @__PURE__ */ e.createElement(
       Ze,
       {
         size: "md",
         as: "div",
-        className: de[`${Qe}__label-heading`]
+        className: me[`${Qe}__label-heading`]
       },
       _
     ), /* @__PURE__ */ e.createElement(
@@ -2902,12 +2910,12 @@ const tl = (t) => {
         onClick: h
       }
     )),
-    !_ && r && /* @__PURE__ */ e.createElement("div", { className: de[`${Qe}__header`] }, /* @__PURE__ */ e.createElement(
+    !_ && r && /* @__PURE__ */ e.createElement("div", { className: me[`${Qe}__header`] }, /* @__PURE__ */ e.createElement(
       Ze,
       {
         size: "md",
         as: "div",
-        className: de[`${Qe}__heading`]
+        className: me[`${Qe}__heading`]
       },
       r
     ), /* @__PURE__ */ e.createElement(Oa, { onClick: h })),
@@ -2915,11 +2923,11 @@ const tl = (t) => {
       "div",
       {
         "data-testid": "modal-body",
-        className: m(de[`${Qe}__body`], n)
+        className: m(me[`${Qe}__body`], n)
       },
       u ? /* @__PURE__ */ e.createElement(M, { as: "div" }, t) : t
     ),
-    c && /* @__PURE__ */ e.createElement("div", { className: de[`${Qe}__footer`] }, c)
+    c && /* @__PURE__ */ e.createElement("div", { className: me[`${Qe}__footer`] }, c)
   );
 }, dl = ({
   children: t,
@@ -3361,7 +3369,7 @@ const j = {
           className: oe[`${te}__clear-icon`],
           onClick: b
         },
-        /* @__PURE__ */ e.createElement(x, { kind: "primary", size: "small", source: Ne })
+        /* @__PURE__ */ e.createElement(x, { kind: "primary", size: "small", source: Se })
       ),
       /* @__PURE__ */ e.createElement(
         x,
@@ -3476,7 +3484,7 @@ const j = {
         x,
         {
           "data-dismiss-icon": !0,
-          source: Ne,
+          source: Se,
           size: f,
           customColor: b()
         }
@@ -3608,8 +3616,8 @@ const j = {
   e.useEffect(() => {
     if ($) {
       const R = (K) => {
-        var me;
-        (me = B.current) != null && me.contains(K.target) || w(!1);
+        var ge;
+        (ge = B.current) != null && ge.contains(K.target) || w(!1);
       }, z = (K) => {
         K.key === G.tab && w(!1);
       };
@@ -3619,7 +3627,7 @@ const j = {
     } else
       E(null);
   }, [$]);
-  const ue = (R) => {
+  const pe = (R) => {
     const z = R.target;
     a || z.getAttribute("data-dismiss-icon") || w((K) => !K);
   }, F = () => {
@@ -3630,13 +3638,13 @@ const j = {
     const z = R.key, K = qe;
     if (!K)
       return g([R]);
-    const me = K.includes(
+    const ge = K.includes(
       z
     ) ? K.filter((J) => J !== z) : K.concat(z);
-    if ((me == null ? void 0 : me.length) === 0)
+    if ((ge == null ? void 0 : ge.length) === 0)
       return g(null);
     const A = _.filter(
-      (J) => me.includes(J.key)
+      (J) => ge.includes(J.key)
     );
     g(A);
   }, re = (R) => !R.disabled && !R.groupHeader && R.key !== ct, Ae = () => {
@@ -3645,7 +3653,7 @@ const j = {
     g(R);
   }, Ie = () => {
     w(!1), g(null);
-  }, xe = (R) => E(R), ze = (R) => {
+  }, De = (R) => E(R), ze = (R) => {
     const z = o ? o.filter((K) => K !== R) : null;
     if ((z == null ? void 0 : z.length) === 0)
       return g(null);
@@ -3669,7 +3677,7 @@ const j = {
       isMultiSelect: d === "multi",
       size: c,
       hideClearButton: u,
-      onTrigger: ue,
+      onTrigger: pe,
       onClear: Ie
     },
     /* @__PURE__ */ e.createElement(
@@ -3684,7 +3692,7 @@ const j = {
         size: c,
         clearSearchAfterSelection: f,
         onItemRemove: ze,
-        onFilter: xe
+        onFilter: De
       }
     )
   ), /* @__PURE__ */ e.createElement(
@@ -3720,8 +3728,8 @@ const j = {
   useClickHookProps: h,
   floatingStrategy: f
 }) => {
-  const [g, b] = e.useState(d), k = i !== void 0, v = k ? i : g, $ = typeof _ == "string", w = typeof t == "function", T = (xe) => {
-    xe ? r == null || r() : a == null || a(), !k && b(xe);
+  const [g, b] = e.useState(d), k = i !== void 0, v = k ? i : g, $ = typeof _ == "string", w = typeof t == "function", T = (De) => {
+    De ? r == null || r() : a == null || a(), !k && b(De);
   }, { refs: E, context: B, floatingStyles: N } = na({
     open: v,
     onOpenChange: T,
@@ -3729,10 +3737,10 @@ const j = {
     placement: l,
     strategy: f,
     whileElementsMounted: da
-  }), ue = ua(B, h), F = ma(B, y({
+  }), pe = ua(B, h), F = ma(B, y({
     escapeKey: p
   }, u)), W = pa(B), { getReferenceProps: re, getFloatingProps: Ae } = ga([
-    ue,
+    pe,
     F,
     W
   ]), Ie = m(Ro.popover, o);
@@ -3945,7 +3953,7 @@ const ft = {
       className: Ee[`${$e}__close-icon`],
       onClick: s
     },
-    /* @__PURE__ */ e.createElement(x, { source: Ne, size: "large", kind: "primary" })
+    /* @__PURE__ */ e.createElement(x, { source: Se, size: "large", kind: "primary" })
   ));
 }, Re = {
   "main-wrapper": "lc-PromoBannerV2-module__main-wrapper___U-dPS",
@@ -4008,7 +4016,7 @@ const ft = {
       {
         className: Re[`${We}__close__btn`],
         onClick: s,
-        icon: /* @__PURE__ */ e.createElement(x, { source: Ne, kind: "primary" }),
+        icon: /* @__PURE__ */ e.createElement(x, { source: Se, kind: "primary" }),
         kind: "plain",
         size: "compact"
       }
@@ -4042,7 +4050,7 @@ const ft = {
       })
     )), t && /* @__PURE__ */ e.createElement(M, { as: "div", size: "md", className: Me[`${Le}__text`] }, t)), r && /* @__PURE__ */ e.createElement(Wt, { className: Me[`${Le}__helper`] }, r));
   }
-), De = {
+), Be = {
   "search-input": "lc-Search-module__search-input___FsbCk",
   "search-input--compact": "lc-Search-module__search-input--compact___498To",
   "search-input--medium": "lc-Search-module__search-input--medium___Hwteg",
@@ -4067,12 +4075,12 @@ const ft = {
 }) => {
   const [s, i] = e.useState(!0), [d, p] = e.useState(!1), u = e.useRef(null), h = !!c && !a && !r, f = t && !s && "true", g = m(
     l,
-    De[Ce],
-    De[`${Ce}--${o}`],
-    d && De[`${Ce}--focused`],
-    a && De[`${Ce}--disabled`],
-    t && De[`${Ce}--collapsable`],
-    !s && De[`${Ce}--collapsable--open`]
+    Be[Ce],
+    Be[`${Ce}--${o}`],
+    d && Be[`${Ce}--focused`],
+    a && Be[`${Ce}--disabled`],
+    t && Be[`${Ce}--collapsable`],
+    !s && Be[`${Ce}--collapsable--open`]
   );
   e.useEffect(() => {
     t && c && i(!1);
@@ -4103,7 +4111,7 @@ const ft = {
     /* @__PURE__ */ e.createElement(
       x,
       {
-        className: De[`${Ce}__search-icon`],
+        className: Be[`${Ce}__search-icon`],
         source: Tr,
         disabled: a,
         kind: "primary"
@@ -4114,7 +4122,7 @@ const ft = {
       {
         role: "searchbox",
         ref: u,
-        className: De[Yo],
+        className: Be[Yo],
         type: "text",
         value: c,
         placeholder: _,
@@ -4130,9 +4138,9 @@ const ft = {
       {
         "aria-label": "Clear search",
         title: "Clear search",
-        className: De[`${Ce}__clear-icon`],
+        className: Be[`${Ce}__clear-icon`],
         onClick: k,
-        icon: /* @__PURE__ */ e.createElement(x, { source: Ne, kind: "primary" }),
+        icon: /* @__PURE__ */ e.createElement(x, { source: Se, kind: "primary" }),
         kind: "text",
         size: "compact"
       }
@@ -4141,7 +4149,7 @@ const ft = {
       "div",
       {
         "data-testid": `${Ce}-loader`,
-        className: De[`${Ce}__loader`]
+        className: Be[`${Ce}__loader`]
       },
       /* @__PURE__ */ e.createElement(fa, { size: "small" })
     )
@@ -4204,8 +4212,8 @@ const ft = {
     ce[ae],
     ce[`${ae}--${l}`],
     t
-  ), N = (ue) => {
-    c == null || c(ue, !b), h || (ue.stopPropagation(), g((F) => !F));
+  ), N = (pe) => {
+    c == null || c(pe, !b), h || (pe.stopPropagation(), g((F) => !F));
   };
   return /* @__PURE__ */ e.createElement("span", { className: B }, /* @__PURE__ */ e.createElement(
     "input",
@@ -4466,10 +4474,10 @@ const ft = {
   }, N = (F, W) => {
     const re = [...a || []];
     re.reduce(
-      (Ie, xe, ze) => Ie + (xe === W && ze !== F ? 1 : 0),
+      (Ie, De, ze) => Ie + (De === W && ze !== F ? 1 : 0),
       0
     ) > 0 ? re.splice(F, 1) : re[F] = W, r(re);
-  }, ue = (F) => {
+  }, pe = (F) => {
     F.preventDefault();
     const re = F.clipboardData.getData("text/plain").split(/[\s,;\n]+/);
     r([...a || [], ...re]);
@@ -4496,7 +4504,7 @@ const ft = {
       value: b,
       onChange: T,
       onKeyDown: E,
-      onPaste: ue,
+      onPaste: pe,
       onBlur: B
     })
   )), o && /* @__PURE__ */ e.createElement(va, null, o));
@@ -4611,7 +4619,7 @@ const ft = {
       "aria-label": "Close toast",
       onClick: c
     },
-    /* @__PURE__ */ e.createElement(x, { source: Ne, size: "medium" })
+    /* @__PURE__ */ e.createElement(x, { source: Se, size: "medium" })
   )));
 }, hc = 200, ht = "toast-wrapper", Cl = ({
   className: t,
@@ -4702,7 +4710,7 @@ const ft = {
     "aria-label": "Close",
     onClick: a
   },
-  /* @__PURE__ */ e.createElement(x, { size: "small", source: Ne })
+  /* @__PURE__ */ e.createElement(x, { size: "small", source: Se })
 )), we = {
   "file-upload-progress": "lc-FileUploadProgress-module__file-upload-progress___xw8h8",
   "file-upload-progress__icon": "lc-FileUploadProgress-module__file-upload-progress__icon___p8Rfz",