@stihl-design-system/components 1.0.0-RC.37 → 1.0.0-RC.38

package/chunks/{CustomReactSelect.D4kopDzX.js → CustomReactSelect.DS9Ey-jr.js}

@@ -15,7 +15,7 @@ import { D as ge } from "./Icon.CDLyB7Pv.js";
 import { D as Qt } from "./Popover.C9tT8xkE.js";
 import { D as _t } from "./SystemFeedback.CjlARKki.js";
 import { OptionCheckbox as $t } from "../optioncheckbox.nBVwGv6c.js";
-import '../assets/CustomReactSelect.BihX36Uo.css';const Ko = ({
+import '../assets/CustomReactSelect.BihX36Uo.css';const qo = ({
   id: n,
   label: e,
   options: i,
@@ -31,7 +31,7 @@ import '../assets/CustomReactSelect.BihX36Uo.css';const Ko = ({
       throw new Error(ce("DSCombobox", "The options array must not be empty."));
   } else throw new Error(ce("DSCombobox", kt("options", "DSCombobox")));
   u && t && console.warn(ce("DSCombobox", "Using a popover when hideLabel is set to true is not supported."));
-}, qo = ["medium", "small"], Kt = {
+}, ea = ["medium", "small"], Kt = {
   placeholder: "",
   navigationGuidance: "Use Up and Down to choose options",
   selectGuidance: "press Enter to select the currently focused option",
@@ -211,17 +211,17 @@ function ne(n, e) {
 }
 var an = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
 function ln(n) {
-  var e = n.defaultInputValue, i = e === void 0 ? "" : e, u = n.defaultMenuIsOpen, t = u === void 0 ? !1 : u, a = n.defaultValue, l = a === void 0 ? null : a, s = n.inputValue, o = n.menuIsOpen, r = n.onChange, c = n.onInputChange, d = n.onMenuClose, g = n.onMenuOpen, p = n.value, v = ne(n, an), I = ue(s !== void 0 ? s : i), b = ee(I, 2), m = b[0], B = b[1], y = ue(o !== void 0 ? o : t), x = ee(y, 2), V = x[0], F = x[1], S = ue(p !== void 0 ? p : l), A = ee(S, 2), R = A[0], H = A[1], O = T(function(J, U) {
+  var e = n.defaultInputValue, i = e === void 0 ? "" : e, u = n.defaultMenuIsOpen, t = u === void 0 ? !1 : u, a = n.defaultValue, l = a === void 0 ? null : a, s = n.inputValue, o = n.menuIsOpen, r = n.onChange, c = n.onInputChange, d = n.onMenuClose, g = n.onMenuOpen, p = n.value, I = ne(n, an), m = ue(s !== void 0 ? s : i), b = ee(m, 2), v = b[0], E = b[1], y = ue(o !== void 0 ? o : t), x = ee(y, 2), B = x[0], F = x[1], V = ue(p !== void 0 ? p : l), A = ee(V, 2), R = A[0], H = A[1], O = T(function(J, U) {
     typeof r == "function" && r(J, U), H(J);
   }, [r]), D = T(function(J, U) {
     var Q;
-    typeof c == "function" && (Q = c(J, U)), B(Q !== void 0 ? Q : J);
+    typeof c == "function" && (Q = c(J, U)), E(Q !== void 0 ? Q : J);
   }, [c]), Y = T(function() {
     typeof g == "function" && g(), F(!0);
   }, [g]), z = T(function() {
     typeof d == "function" && d(), F(!1);
-  }, [d]), W = s !== void 0 ? s : m, P = o !== void 0 ? o : V, k = p !== void 0 ? p : R;
-  return C(C({}, v), {}, {
+  }, [d]), W = s !== void 0 ? s : v, P = o !== void 0 ? o : B, k = p !== void 0 ? p : R;
+  return C(C({}, I), {}, {
     inputValue: W,
     menuIsOpen: P,
     onChange: O,
@@ -456,23 +456,23 @@ function Pn(n) {
     maxHeight: e
   };
   if (!i || !i.offsetParent) return r;
-  var c = o.getBoundingClientRect(), d = c.height, g = i.getBoundingClientRect(), p = g.bottom, v = g.height, I = g.top, b = i.offsetParent.getBoundingClientRect(), m = b.top, B = l ? window.innerHeight : An(o), y = pt(o), x = parseInt(getComputedStyle(i).marginBottom, 10), V = parseInt(getComputedStyle(i).marginTop, 10), F = m - V, S = B - I, A = F + y, R = d - y - I, H = p - B + y + x, O = y + I - V, D = 160;
+  var c = o.getBoundingClientRect(), d = c.height, g = i.getBoundingClientRect(), p = g.bottom, I = g.height, m = g.top, b = i.offsetParent.getBoundingClientRect(), v = b.top, E = l ? window.innerHeight : An(o), y = pt(o), x = parseInt(getComputedStyle(i).marginBottom, 10), B = parseInt(getComputedStyle(i).marginTop, 10), F = v - B, V = E - m, A = F + y, R = d - y - m, H = p - E + y + x, O = y + m - B, D = 160;
   switch (t) {
     case "auto":
     case "bottom":
-      if (S >= v)
+      if (V >= I)
         return {
           placement: "bottom",
           maxHeight: e
         };
-      if (R >= v && !l)
+      if (R >= I && !l)
         return a && me(o, H, D), {
           placement: "bottom",
           maxHeight: e
         };
-      if (!l && R >= u || l && S >= u) {
+      if (!l && R >= u || l && V >= u) {
         a && me(o, H, D);
-        var Y = l ? S - x : R - x;
+        var Y = l ? V - x : R - x;
         return {
           placement: "bottom",
           maxHeight: Y
@@ -492,19 +492,19 @@ function Pn(n) {
         };
       break;
     case "top":
-      if (F >= v)
+      if (F >= I)
         return {
           placement: "top",
           maxHeight: e
         };
-      if (A >= v && !l)
+      if (A >= I && !l)
         return a && me(o, O, D), {
           placement: "top",
           maxHeight: e
         };
       if (!l && A >= u || l && F >= u) {
         var P = e;
-        return (!l && A >= u || l && F >= u) && (P = l ? F - V : A - V), a && me(o, O, D), {
+        return (!l && A >= u || l && F >= u) && (P = l ? F - B : A - B), a && me(o, O, D), {
           placement: "top",
           maxHeight: P
         };
@@ -539,26 +539,26 @@ var mt = function(e) {
     marginTop: s.menuGutter
   });
 }, vt = /* @__PURE__ */ Ot(null), Mn = function(e) {
-  var i = e.children, u = e.minMenuHeight, t = e.maxMenuHeight, a = e.menuPlacement, l = e.menuPosition, s = e.menuShouldScrollIntoView, o = e.theme, r = wt(vt) || {}, c = r.setPortalPlacement, d = $(null), g = ue(t), p = ee(g, 2), v = p[0], I = p[1], b = ue(null), m = ee(b, 2), B = m[0], y = m[1], x = o.spacing.controlHeight;
+  var i = e.children, u = e.minMenuHeight, t = e.maxMenuHeight, a = e.menuPlacement, l = e.menuPosition, s = e.menuShouldScrollIntoView, o = e.theme, r = wt(vt) || {}, c = r.setPortalPlacement, d = $(null), g = ue(t), p = ee(g, 2), I = p[0], m = p[1], b = ue(null), v = ee(b, 2), E = v[0], y = v[1], x = o.spacing.controlHeight;
   return Ze(function() {
-    var V = d.current;
-    if (V) {
-      var F = l === "fixed", S = s && !F, A = Pn({
+    var B = d.current;
+    if (B) {
+      var F = l === "fixed", V = s && !F, A = Pn({
         maxHeight: t,
-        menuEl: V,
+        menuEl: B,
         minHeight: u,
         placement: a,
-        shouldScroll: S,
+        shouldScroll: V,
         isFixedPosition: F,
         controlHeight: x
       });
-      I(A.maxHeight), y(A.placement), c?.(A.placement);
+      m(A.maxHeight), y(A.placement), c?.(A.placement);
     }
   }, [t, a, l, s, u, c, x]), i({
     ref: d,
     placerProps: C(C({}, e), {}, {
-      placement: B || mt(a),
-      maxHeight: v
+      placement: E || mt(a),
+      maxHeight: I
     })
   });
 }, Hn = function(e) {
@@ -624,19 +624,19 @@ var mt = function(e) {
     zIndex: 1
   };
 }, kn = function(e) {
-  var i = e.appendTo, u = e.children, t = e.controlElement, a = e.innerProps, l = e.menuPlacement, s = e.menuPosition, o = $(null), r = $(null), c = ue(mt(l)), d = ee(c, 2), g = d[0], p = d[1], v = oe(function() {
+  var i = e.appendTo, u = e.children, t = e.controlElement, a = e.innerProps, l = e.menuPlacement, s = e.menuPosition, o = $(null), r = $(null), c = ue(mt(l)), d = ee(c, 2), g = d[0], p = d[1], I = oe(function() {
     return {
       setPortalPlacement: p
     };
-  }, []), I = ue(null), b = ee(I, 2), m = b[0], B = b[1], y = T(function() {
+  }, []), m = ue(null), b = ee(m, 2), v = b[0], E = b[1], y = T(function() {
     if (t) {
-      var S = yn(t), A = s === "fixed" ? 0 : window.pageYOffset, R = S[g] + A;
-      (R !== m?.offset || S.left !== m?.rect.left || S.width !== m?.rect.width) && B({
+      var V = yn(t), A = s === "fixed" ? 0 : window.pageYOffset, R = V[g] + A;
+      (R !== v?.offset || V.left !== v?.rect.left || V.width !== v?.rect.width) && E({
         offset: R,
-        rect: S
+        rect: V
       });
     }
-  }, [t, s, g, m?.offset, m?.rect.left, m?.rect.width]);
+  }, [t, s, g, v?.offset, v?.rect.left, v?.rect.width]);
   Ze(function() {
     y();
   }, [y]);
@@ -648,21 +648,21 @@ var mt = function(e) {
   Ze(function() {
     x();
   }, [x]);
-  var V = T(function(S) {
-    o.current = S, x();
+  var B = T(function(V) {
+    o.current = V, x();
   }, [x]);
-  if (!i && s !== "fixed" || !m) return null;
+  if (!i && s !== "fixed" || !v) return null;
   var F = f("div", h({
-    ref: V
+    ref: B
   }, Z(C(C({}, e), {}, {
-    offset: m.offset,
+    offset: v.offset,
     position: s,
-    rect: m.rect
+    rect: v.rect
   }), "menuPortal", {
     "menu-portal": !0
   }), a), u);
   return f(vt.Provider, {
-    value: v
+    value: I
   }, i ? /* @__PURE__ */ Lt(F, i) : F);
 }, jn = function(e) {
   var i = e.isDisabled, u = e.isRtl;
@@ -1214,8 +1214,8 @@ var Qi = process.env.NODE_ENV === "production" ? {
     }
   },
   onFocus: function(e) {
-    var i = e.context, u = e.focused, t = e.options, a = e.label, l = a === void 0 ? "" : a, s = e.selectValue, o = e.isDisabled, r = e.isSelected, c = e.isAppleDevice, d = function(I, b) {
-      return I && I.length ? "".concat(I.indexOf(b) + 1, " of ").concat(I.length) : "";
+    var i = e.context, u = e.focused, t = e.options, a = e.label, l = a === void 0 ? "" : a, s = e.selectValue, o = e.isDisabled, r = e.isSelected, c = e.isAppleDevice, d = function(m, b) {
+      return m && m.length ? "".concat(m.indexOf(b) + 1, " of ").concat(m.length) : "";
     };
     if (i === "value" && s)
       return "value ".concat(l, " focused, ").concat(d(s, u), ".");
@@ -1230,30 +1230,30 @@ var Qi = process.env.NODE_ENV === "production" ? {
     return "".concat(u).concat(i ? " for search term " + i : "", ".");
   }
 }, Ki = function(e) {
-  var i = e.ariaSelection, u = e.focusedOption, t = e.focusedValue, a = e.focusableOptions, l = e.isFocused, s = e.selectValue, o = e.selectProps, r = e.id, c = e.isAppleDevice, d = o.ariaLiveMessages, g = o.getOptionLabel, p = o.inputValue, v = o.isMulti, I = o.isOptionDisabled, b = o.isSearchable, m = o.menuIsOpen, B = o.options, y = o.screenReaderStatus, x = o.tabSelectsValue, V = o.isLoading, F = o["aria-label"], S = o["aria-live"], A = oe(function() {
+  var i = e.ariaSelection, u = e.focusedOption, t = e.focusedValue, a = e.focusableOptions, l = e.isFocused, s = e.selectValue, o = e.selectProps, r = e.id, c = e.isAppleDevice, d = o.ariaLiveMessages, g = o.getOptionLabel, p = o.inputValue, I = o.isMulti, m = o.isOptionDisabled, b = o.isSearchable, v = o.menuIsOpen, E = o.options, y = o.screenReaderStatus, x = o.tabSelectsValue, B = o.isLoading, F = o["aria-label"], V = o["aria-live"], A = oe(function() {
     return C(C({}, $i), d || {});
   }, [d]), R = oe(function() {
     var W = "";
     if (i && A.onChange) {
       var P = i.option, k = i.options, J = i.removedValue, U = i.removedValues, Q = i.value, le = function(q) {
         return Array.isArray(q) ? null : q;
-      }, N = J || P || le(Q), w = N ? g(N) : "", E = k || U || void 0, _ = E ? E.map(g) : [], j = C({
+      }, N = J || P || le(Q), w = N ? g(N) : "", S = k || U || void 0, _ = S ? S.map(g) : [], j = C({
         // multiSelected items are usually items that have already been selected
         // or set by the user as a default value so we assume they are not disabled
-        isDisabled: N && I(N, s),
+        isDisabled: N && m(N, s),
         label: w,
         labels: _
       }, i);
       W = A.onChange(j);
     }
     return W;
-  }, [i, A, I, s, g]), H = oe(function() {
+  }, [i, A, m, s, g]), H = oe(function() {
     var W = "", P = u || t, k = !!(u && s && s.includes(u));
     if (P && A.onFocus) {
       var J = {
         focused: P,
         label: g(P),
-        isDisabled: I(P, s),
+        isDisabled: m(P, s),
         isSelected: k,
         options: a,
         context: P === u ? "menu" : "value",
@@ -1263,9 +1263,9 @@ var Qi = process.env.NODE_ENV === "production" ? {
       W = A.onFocus(J);
     }
     return W;
-  }, [u, t, g, I, A, a, s, c]), O = oe(function() {
+  }, [u, t, g, m, A, a, s, c]), O = oe(function() {
     var W = "";
-    if (m && B.length && !V && A.onFilter) {
+    if (v && E.length && !B && A.onFilter) {
       var P = y({
         count: a.length
       });
@@ -1275,22 +1275,22 @@ var Qi = process.env.NODE_ENV === "production" ? {
       });
     }
     return W;
-  }, [a, p, m, A, B, y, V]), D = i?.action === "initial-input-focus", Y = oe(function() {
+  }, [a, p, v, A, E, y, B]), D = i?.action === "initial-input-focus", Y = oe(function() {
     var W = "";
     if (A.guidance) {
-      var P = t ? "value" : m ? "menu" : "input";
+      var P = t ? "value" : v ? "menu" : "input";
       W = A.guidance({
         "aria-label": F,
         context: P,
-        isDisabled: u && I(u, s),
-        isMulti: v,
+        isDisabled: u && m(u, s),
+        isMulti: I,
         isSearchable: b,
         tabSelectsValue: x,
         isInitialFocus: D
       });
     }
     return W;
-  }, [F, u, t, v, I, b, m, A, s, x, D]), z = f(Re, null, f("span", {
+  }, [F, u, t, I, m, b, v, A, s, x, D]), z = f(Re, null, f("span", {
     id: "aria-selection"
   }, R), f("span", {
     id: "aria-focused"
@@ -1302,7 +1302,7 @@ var Qi = process.env.NODE_ENV === "production" ? {
   return f(Re, null, f(Qe, {
     id: r
   }, D && z), f(Qe, {
-    "aria-live": S,
+    "aria-live": V,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
     role: "log"
@@ -1618,36 +1618,36 @@ var au = function(e) {
   e.cancelable && e.preventDefault(), e.stopPropagation();
 };
 function lu(n) {
-  var e = n.isEnabled, i = n.onBottomArrive, u = n.onBottomLeave, t = n.onTopArrive, a = n.onTopLeave, l = $(!1), s = $(!1), o = $(0), r = $(null), c = T(function(b, m) {
+  var e = n.isEnabled, i = n.onBottomArrive, u = n.onBottomLeave, t = n.onTopArrive, a = n.onTopLeave, l = $(!1), s = $(!1), o = $(0), r = $(null), c = T(function(b, v) {
     if (r.current !== null) {
-      var B = r.current, y = B.scrollTop, x = B.scrollHeight, V = B.clientHeight, F = r.current, S = m > 0, A = x - V - y, R = !1;
-      A > m && l.current && (u && u(b), l.current = !1), S && s.current && (a && a(b), s.current = !1), S && m > A ? (i && !l.current && i(b), F.scrollTop = x, R = !0, l.current = !0) : !S && -m > y && (t && !s.current && t(b), F.scrollTop = 0, R = !0, s.current = !0), R && au(b);
+      var E = r.current, y = E.scrollTop, x = E.scrollHeight, B = E.clientHeight, F = r.current, V = v > 0, A = x - B - y, R = !1;
+      A > v && l.current && (u && u(b), l.current = !1), V && s.current && (a && a(b), s.current = !1), V && v > A ? (i && !l.current && i(b), F.scrollTop = x, R = !0, l.current = !0) : !V && -v > y && (t && !s.current && t(b), F.scrollTop = 0, R = !0, s.current = !0), R && au(b);
     }
   }, [i, u, t, a]), d = T(function(b) {
     c(b, b.deltaY);
   }, [c]), g = T(function(b) {
     o.current = b.changedTouches[0].clientY;
   }, []), p = T(function(b) {
-    var m = o.current - b.changedTouches[0].clientY;
-    c(b, m);
-  }, [c]), v = T(function(b) {
+    var v = o.current - b.changedTouches[0].clientY;
+    c(b, v);
+  }, [c]), I = T(function(b) {
     if (b) {
-      var m = En ? {
+      var v = En ? {
         passive: !1
       } : !1;
-      b.addEventListener("wheel", d, m), b.addEventListener("touchstart", g, m), b.addEventListener("touchmove", p, m);
+      b.addEventListener("wheel", d, v), b.addEventListener("touchstart", g, v), b.addEventListener("touchmove", p, v);
     }
-  }, [p, g, d]), I = T(function(b) {
+  }, [p, g, d]), m = T(function(b) {
     b && (b.removeEventListener("wheel", d, !1), b.removeEventListener("touchstart", g, !1), b.removeEventListener("touchmove", p, !1));
   }, [p, g, d]);
   return lt(function() {
     if (e) {
       var b = r.current;
-      return v(b), function() {
-        I(b);
+      return I(b), function() {
+        m(b);
       };
     }
-  }, [e, v, I]), function(b) {
+  }, [e, I, m]), function(b) {
     r.current = b;
   };
 }
@@ -1679,14 +1679,14 @@ function ru(n) {
   var e = n.isEnabled, i = n.accountForScrollbars, u = i === void 0 ? !0 : i, t = $({}), a = $(null), l = T(function(o) {
     if (it) {
       var r = document.body, c = r && r.style;
-      if (u && $e.forEach(function(v) {
-        var I = c && c[v];
-        t.current[v] = I;
+      if (u && $e.forEach(function(I) {
+        var m = c && c[I];
+        t.current[I] = m;
       }), u && de < 1) {
         var d = parseInt(t.current.paddingRight, 10) || 0, g = document.body ? document.body.clientWidth : 0, p = window.innerWidth - g + d || 0;
-        Object.keys(Ke).forEach(function(v) {
-          var I = Ke[v];
-          c && (c[v] = I);
+        Object.keys(Ke).forEach(function(I) {
+          var m = Ke[I];
+          c && (c[I] = m);
         }), c && (c.paddingRight = "".concat(p, "px"));
       }
       r && nt() && (r.addEventListener("touchmove", qe, re), o && (o.addEventListener("touchstart", tt, re), o.addEventListener("touchmove", et, re))), de += 1;
@@ -2030,10 +2030,10 @@ var Pt = function(e) {
       var c = t.props, d = c.onChange, g = c.name;
       r.name = g, t.ariaOnChange(o, r), d(o, r);
     }, t.setValue = function(o, r, c) {
-      var d = t.props, g = d.closeMenuOnSelect, p = d.isMulti, v = d.inputValue;
+      var d = t.props, g = d.closeMenuOnSelect, p = d.isMulti, I = d.inputValue;
       t.onInputChange("", {
         action: "set-value",
-        prevInputValue: v
+        prevInputValue: I
       }), g && (t.setState({
         inputIsHiddenAfterUpdate: !p
       }), t.onMenuClose()), t.setState({
@@ -2043,13 +2043,13 @@ var Pt = function(e) {
         option: c
       });
     }, t.selectOption = function(o) {
-      var r = t.props, c = r.blurInputOnSelect, d = r.isMulti, g = r.name, p = t.state.selectValue, v = d && t.isOptionSelected(o, p), I = t.isOptionDisabled(o, p);
-      if (v) {
+      var r = t.props, c = r.blurInputOnSelect, d = r.isMulti, g = r.name, p = t.state.selectValue, I = d && t.isOptionSelected(o, p), m = t.isOptionDisabled(o, p);
+      if (I) {
         var b = t.getOptionValue(o);
-        t.setValue(p.filter(function(m) {
-          return t.getOptionValue(m) !== b;
+        t.setValue(p.filter(function(v) {
+          return t.getOptionValue(v) !== b;
         }), "deselect-option", o);
-      } else if (!I)
+      } else if (!m)
         d ? t.setValue([].concat(Me(p), [o]), "select-option", o) : t.setValue(o, "select-option");
       else {
         t.ariaOnChange(o, {
@@ -2061,8 +2061,8 @@ var Pt = function(e) {
       }
       c && t.blurInput();
     }, t.removeValue = function(o) {
-      var r = t.props.isMulti, c = t.state.selectValue, d = t.getOptionValue(o), g = c.filter(function(v) {
-        return t.getOptionValue(v) !== d;
+      var r = t.props.isMulti, c = t.state.selectValue, d = t.getOptionValue(o), g = c.filter(function(I) {
+        return t.getOptionValue(I) !== d;
       }), p = fe(r, g, g[0] || null);
       t.onChange(p, {
         action: "remove-value",
@@ -2202,8 +2202,8 @@ var Pt = function(e) {
     }, t.onValueInputFocus = function(o) {
       o.preventDefault(), o.stopPropagation(), t.focus();
     }, t.onKeyDown = function(o) {
-      var r = t.props, c = r.isMulti, d = r.backspaceRemovesValue, g = r.escapeClearsValue, p = r.inputValue, v = r.isClearable, I = r.isDisabled, b = r.menuIsOpen, m = r.onKeyDown, B = r.tabSelectsValue, y = r.openMenuOnFocus, x = t.state, V = x.focusedOption, F = x.focusedValue, S = x.selectValue;
-      if (!I && !(typeof m == "function" && (m(o), o.defaultPrevented))) {
+      var r = t.props, c = r.isMulti, d = r.backspaceRemovesValue, g = r.escapeClearsValue, p = r.inputValue, I = r.isClearable, m = r.isDisabled, b = r.menuIsOpen, v = r.onKeyDown, E = r.tabSelectsValue, y = r.openMenuOnFocus, x = t.state, B = x.focusedOption, F = x.focusedValue, V = x.selectValue;
+      if (!m && !(typeof v == "function" && (v(o), o.defaultPrevented))) {
         switch (t.blockOptionHover = !0, o.key) {
           case "ArrowLeft":
             if (!c || p) return;
@@ -2220,22 +2220,22 @@ var Pt = function(e) {
               t.removeValue(F);
             else {
               if (!d) return;
-              c ? t.popValue() : v && t.clearValue();
+              c ? t.popValue() : I && t.clearValue();
             }
             break;
           case "Tab":
-            if (t.isComposing || o.shiftKey || !b || !B || !V || // don't capture the event if the menu opens on focus and the focused
+            if (t.isComposing || o.shiftKey || !b || !E || !B || // don't capture the event if the menu opens on focus and the focused
             // option is already selected; it breaks the flow of navigation
-            y && t.isOptionSelected(V, S))
+            y && t.isOptionSelected(B, V))
               return;
-            t.selectOption(V);
+            t.selectOption(B);
             break;
           case "Enter":
             if (o.keyCode === 229)
               break;
             if (b) {
-              if (!V || t.isComposing) return;
-              t.selectOption(V);
+              if (!B || t.isComposing) return;
+              t.selectOption(B);
               break;
             }
             return;
@@ -2245,7 +2245,7 @@ var Pt = function(e) {
             }), t.onInputChange("", {
               action: "menu-close",
               prevInputValue: p
-            }), t.onMenuClose()) : v && g && t.clearValue();
+            }), t.onMenuClose()) : I && g && t.clearValue();
             break;
           case " ":
             if (p)
@@ -2254,8 +2254,8 @@ var Pt = function(e) {
               t.openMenu("first");
               break;
             }
-            if (!V) return;
-            t.selectOption(V);
+            if (!B) return;
+            t.selectOption(B);
             break;
           case "ArrowUp":
             b ? t.focusOption("up") : t.openMenu("last");
@@ -2419,17 +2419,17 @@ var Pt = function(e) {
   }, {
     key: "getCommonProps",
     value: function() {
-      var t = this.clearValue, a = this.cx, l = this.getStyles, s = this.getClassNames, o = this.getValue, r = this.selectOption, c = this.setValue, d = this.props, g = d.isMulti, p = d.isRtl, v = d.options, I = this.hasValue();
+      var t = this.clearValue, a = this.cx, l = this.getStyles, s = this.getClassNames, o = this.getValue, r = this.selectOption, c = this.setValue, d = this.props, g = d.isMulti, p = d.isRtl, I = d.options, m = this.hasValue();
       return {
         clearValue: t,
         cx: a,
         getStyles: l,
         getClassNames: s,
         getValue: o,
-        hasValue: I,
+        hasValue: m,
         isMulti: g,
         isRtl: p,
-        options: v,
+        options: I,
         selectOption: r,
         selectProps: d,
         setValue: c,
@@ -2526,7 +2526,7 @@ var Pt = function(e) {
       // Renderers
       // ==============================
       function() {
-        var t = this.props, a = t.isDisabled, l = t.isSearchable, s = t.inputId, o = t.inputValue, r = t.tabIndex, c = t.form, d = t.menuIsOpen, g = t.required, p = this.getComponents(), v = p.Input, I = this.state, b = I.inputIsHidden, m = I.ariaSelection, B = this.commonProps, y = s || this.getElementId("input"), x = C(C(C({
+        var t = this.props, a = t.isDisabled, l = t.isSearchable, s = t.inputId, o = t.inputValue, r = t.tabIndex, c = t.form, d = t.menuIsOpen, g = t.required, p = this.getComponents(), I = p.Input, m = this.state, b = m.inputIsHidden, v = m.ariaSelection, E = this.commonProps, y = s || this.getElementId("input"), x = C(C(C({
           "aria-autocomplete": "list",
           "aria-expanded": d,
           "aria-haspopup": !0,
@@ -2541,12 +2541,12 @@ var Pt = function(e) {
           "aria-controls": this.getElementId("listbox")
         }), !l && {
           "aria-readonly": !0
-        }), this.hasValue() ? m?.action === "initial-input-focus" && {
+        }), this.hasValue() ? v?.action === "initial-input-focus" && {
           "aria-describedby": this.getElementId("live-region")
         } : {
           "aria-describedby": this.getElementId("placeholder")
         });
-        return l ? /* @__PURE__ */ X.createElement(v, h({}, B, {
+        return l ? /* @__PURE__ */ X.createElement(I, h({}, E, {
           autoCapitalize: "none",
           autoComplete: "off",
           autoCorrect: "off",
@@ -2579,19 +2579,19 @@ var Pt = function(e) {
   }, {
     key: "renderPlaceholderOrValue",
     value: function() {
-      var t = this, a = this.getComponents(), l = a.MultiValue, s = a.MultiValueContainer, o = a.MultiValueLabel, r = a.MultiValueRemove, c = a.SingleValue, d = a.Placeholder, g = this.commonProps, p = this.props, v = p.controlShouldRenderValue, I = p.isDisabled, b = p.isMulti, m = p.inputValue, B = p.placeholder, y = this.state, x = y.selectValue, V = y.focusedValue, F = y.isFocused;
-      if (!this.hasValue() || !v)
-        return m ? null : /* @__PURE__ */ X.createElement(d, h({}, g, {
+      var t = this, a = this.getComponents(), l = a.MultiValue, s = a.MultiValueContainer, o = a.MultiValueLabel, r = a.MultiValueRemove, c = a.SingleValue, d = a.Placeholder, g = this.commonProps, p = this.props, I = p.controlShouldRenderValue, m = p.isDisabled, b = p.isMulti, v = p.inputValue, E = p.placeholder, y = this.state, x = y.selectValue, B = y.focusedValue, F = y.isFocused;
+      if (!this.hasValue() || !I)
+        return v ? null : /* @__PURE__ */ X.createElement(d, h({}, g, {
           key: "placeholder",
-          isDisabled: I,
+          isDisabled: m,
           isFocused: F,
           innerProps: {
             id: this.getElementId("placeholder")
           }
-        }), B);
+        }), E);
       if (b)
         return x.map(function(A, R) {
-          var H = A === V, O = "".concat(t.getOptionLabel(A), "-").concat(t.getOptionValue(A));
+          var H = A === B, O = "".concat(t.getOptionLabel(A), "-").concat(t.getOptionValue(A));
           return /* @__PURE__ */ X.createElement(l, h({}, g, {
             components: {
               Container: s,
@@ -2599,7 +2599,7 @@ var Pt = function(e) {
               Remove: r
             },
             isFocused: H,
-            isDisabled: I,
+            isDisabled: m,
             key: O,
             index: R,
             removeProps: {
@@ -2616,13 +2616,13 @@ var Pt = function(e) {
             data: A
           }), t.formatOptionLabel(A, "value"));
         });
-      if (m)
+      if (v)
         return null;
-      var S = x[0];
+      var V = x[0];
       return /* @__PURE__ */ X.createElement(c, h({}, g, {
-        data: S,
-        isDisabled: I
-      }), this.formatOptionLabel(S, "value"));
+        data: V,
+        isDisabled: m
+      }), this.formatOptionLabel(V, "value"));
     }
   }, {
     key: "renderClearIndicator",
@@ -2684,14 +2684,14 @@ var Pt = function(e) {
   }, {
     key: "renderMenu",
     value: function() {
-      var t = this, a = this.getComponents(), l = a.Group, s = a.GroupHeading, o = a.Menu, r = a.MenuList, c = a.MenuPortal, d = a.LoadingMessage, g = a.NoOptionsMessage, p = a.Option, v = this.commonProps, I = this.state.focusedOption, b = this.props, m = b.captureMenuScroll, B = b.inputValue, y = b.isLoading, x = b.loadingMessage, V = b.minMenuHeight, F = b.maxMenuHeight, S = b.menuIsOpen, A = b.menuPlacement, R = b.menuPosition, H = b.menuPortalTarget, O = b.menuShouldBlockScroll, D = b.menuShouldScrollIntoView, Y = b.noOptionsMessage, z = b.onMenuScrollToTop, W = b.onMenuScrollToBottom;
-      if (!S) return null;
-      var P = function(w, E) {
-        var _ = w.type, j = w.data, ie = w.isDisabled, q = w.isSelected, pe = w.label, Nt = w.value, Oe = I === j, we = ie ? void 0 : function() {
+      var t = this, a = this.getComponents(), l = a.Group, s = a.GroupHeading, o = a.Menu, r = a.MenuList, c = a.MenuPortal, d = a.LoadingMessage, g = a.NoOptionsMessage, p = a.Option, I = this.commonProps, m = this.state.focusedOption, b = this.props, v = b.captureMenuScroll, E = b.inputValue, y = b.isLoading, x = b.loadingMessage, B = b.minMenuHeight, F = b.maxMenuHeight, V = b.menuIsOpen, A = b.menuPlacement, R = b.menuPosition, H = b.menuPortalTarget, O = b.menuShouldBlockScroll, D = b.menuShouldScrollIntoView, Y = b.noOptionsMessage, z = b.onMenuScrollToTop, W = b.onMenuScrollToBottom;
+      if (!V) return null;
+      var P = function(w, S) {
+        var _ = w.type, j = w.data, ie = w.isDisabled, q = w.isSelected, pe = w.label, Nt = w.value, Oe = m === j, we = ie ? void 0 : function() {
           return t.onOptionHover(j);
         }, Mt = ie ? void 0 : function() {
           return t.selectOption(j);
-        }, Te = "".concat(t.getElementId("option"), "-").concat(E), Ht = {
+        }, Te = "".concat(t.getElementId("option"), "-").concat(S), Ht = {
           id: Te,
           onClick: Mt,
           onMouseMove: we,
@@ -2701,7 +2701,7 @@ var Pt = function(e) {
           "aria-selected": t.state.isAppleDevice ? void 0 : q
           // is not supported on Apple devices
         };
-        return /* @__PURE__ */ X.createElement(p, h({}, v, {
+        return /* @__PURE__ */ X.createElement(p, h({}, I, {
           innerProps: Ht,
           data: j,
           isDisabled: ie,
@@ -2717,11 +2717,11 @@ var Pt = function(e) {
       if (this.hasOptions())
         k = this.getCategorizedOptions().map(function(N) {
           if (N.type === "group") {
-            var w = N.data, E = N.options, _ = N.index, j = "".concat(t.getElementId("group"), "-").concat(_), ie = "".concat(j, "-heading");
-            return /* @__PURE__ */ X.createElement(l, h({}, v, {
+            var w = N.data, S = N.options, _ = N.index, j = "".concat(t.getElementId("group"), "-").concat(_), ie = "".concat(j, "-heading");
+            return /* @__PURE__ */ X.createElement(l, h({}, I, {
               key: j,
               data: w,
-              options: E,
+              options: S,
               Heading: s,
               headingProps: {
                 id: ie,
@@ -2736,26 +2736,26 @@ var Pt = function(e) {
         });
       else if (y) {
         var J = x({
-          inputValue: B
+          inputValue: E
         });
         if (J === null) return null;
-        k = /* @__PURE__ */ X.createElement(d, v, J);
+        k = /* @__PURE__ */ X.createElement(d, I, J);
       } else {
         var U = Y({
-          inputValue: B
+          inputValue: E
         });
         if (U === null) return null;
-        k = /* @__PURE__ */ X.createElement(g, v, U);
+        k = /* @__PURE__ */ X.createElement(g, I, U);
       }
       var Q = {
-        minMenuHeight: V,
+        minMenuHeight: B,
         maxMenuHeight: F,
         menuPlacement: A,
         menuPosition: R,
         menuShouldScrollIntoView: D
-      }, le = /* @__PURE__ */ X.createElement(Mn, h({}, v, Q), function(N) {
-        var w = N.ref, E = N.placerProps, _ = E.placement, j = E.maxHeight;
-        return /* @__PURE__ */ X.createElement(o, h({}, v, Q, {
+      }, le = /* @__PURE__ */ X.createElement(Mn, h({}, I, Q), function(N) {
+        var w = N.ref, S = N.placerProps, _ = S.placement, j = S.maxHeight;
+        return /* @__PURE__ */ X.createElement(o, h({}, I, Q, {
           innerRef: w,
           innerProps: {
             onMouseDown: t.onMenuMouseDown,
@@ -2764,27 +2764,27 @@ var Pt = function(e) {
           isLoading: y,
           placement: _
         }), /* @__PURE__ */ X.createElement(bu, {
-          captureEnabled: m,
+          captureEnabled: v,
           onTopArrive: z,
           onBottomArrive: W,
           lockEnabled: O
         }, function(ie) {
-          return /* @__PURE__ */ X.createElement(r, h({}, v, {
+          return /* @__PURE__ */ X.createElement(r, h({}, I, {
             innerRef: function(pe) {
               t.getMenuListRef(pe), ie(pe);
             },
             innerProps: {
               role: "listbox",
-              "aria-multiselectable": v.isMulti,
+              "aria-multiselectable": I.isMulti,
               id: t.getElementId("listbox")
             },
             isLoading: y,
             maxHeight: j,
-            focusedOption: I
+            focusedOption: m
           }), k);
         }));
       });
-      return H || R === "fixed" ? /* @__PURE__ */ X.createElement(c, h({}, v, {
+      return H || R === "fixed" ? /* @__PURE__ */ X.createElement(c, h({}, I, {
         appendTo: H,
         controlElement: this.controlRef,
         menuPlacement: A,
@@ -2803,8 +2803,8 @@ var Pt = function(e) {
       if (!(!r || s))
         if (o)
           if (l) {
-            var g = d.map(function(I) {
-              return t.getOptionValue(I);
+            var g = d.map(function(m) {
+              return t.getOptionValue(m);
             }).join(l);
             return /* @__PURE__ */ X.createElement("input", {
               name: r,
@@ -2812,12 +2812,12 @@ var Pt = function(e) {
               value: g
             });
           } else {
-            var p = d.length > 0 ? d.map(function(I, b) {
+            var p = d.length > 0 ? d.map(function(m, b) {
               return /* @__PURE__ */ X.createElement("input", {
                 key: "i-".concat(b),
                 name: r,
                 type: "hidden",
-                value: t.getOptionValue(I)
+                value: t.getOptionValue(m)
               });
             }) : /* @__PURE__ */ X.createElement("input", {
               name: r,
@@ -2827,11 +2827,11 @@ var Pt = function(e) {
             return /* @__PURE__ */ X.createElement("div", null, p);
           }
         else {
-          var v = d[0] ? this.getOptionValue(d[0]) : "";
+          var I = d[0] ? this.getOptionValue(d[0]) : "";
           return /* @__PURE__ */ X.createElement("input", {
             name: r,
             type: "hidden",
-            value: v
+            value: I
           });
         }
     }
@@ -2853,41 +2853,41 @@ var Pt = function(e) {
   }, {
     key: "render",
     value: function() {
-      var t = this.getComponents(), a = t.Control, l = t.IndicatorsContainer, s = t.SelectContainer, o = t.ValueContainer, r = this.props, c = r.className, d = r.id, g = r.isDisabled, p = r.menuIsOpen, v = this.state.isFocused, I = this.commonProps = this.getCommonProps();
-      return /* @__PURE__ */ X.createElement(s, h({}, I, {
+      var t = this.getComponents(), a = t.Control, l = t.IndicatorsContainer, s = t.SelectContainer, o = t.ValueContainer, r = this.props, c = r.className, d = r.id, g = r.isDisabled, p = r.menuIsOpen, I = this.state.isFocused, m = this.commonProps = this.getCommonProps();
+      return /* @__PURE__ */ X.createElement(s, h({}, m, {
         className: c,
         innerProps: {
           id: d,
           onKeyDown: this.onKeyDown
         },
         isDisabled: g,
-        isFocused: v
-      }), this.renderLiveRegion(), /* @__PURE__ */ X.createElement(a, h({}, I, {
+        isFocused: I
+      }), this.renderLiveRegion(), /* @__PURE__ */ X.createElement(a, h({}, m, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
           onTouchEnd: this.onControlTouchEnd
         },
         isDisabled: g,
-        isFocused: v,
+        isFocused: I,
         menuIsOpen: p
-      }), /* @__PURE__ */ X.createElement(o, h({}, I, {
+      }), /* @__PURE__ */ X.createElement(o, h({}, m, {
         isDisabled: g
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /* @__PURE__ */ X.createElement(l, h({}, I, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /* @__PURE__ */ X.createElement(l, h({}, m, {
         isDisabled: g
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
   }], [{
     key: "getDerivedStateFromProps",
     value: function(t, a) {
-      var l = a.prevProps, s = a.clearFocusValueOnUpdate, o = a.inputIsHiddenAfterUpdate, r = a.ariaSelection, c = a.isFocused, d = a.prevWasFocused, g = a.instancePrefix, p = t.options, v = t.value, I = t.menuIsOpen, b = t.inputValue, m = t.isMulti, B = Ye(v), y = {};
-      if (l && (v !== l.value || p !== l.options || I !== l.menuIsOpen || b !== l.inputValue)) {
-        var x = I ? Wu(t, B) : [], V = I ? ot(Ce(t, B), "".concat(g, "-option")) : [], F = s ? Pu(a, B) : null, S = Zu(a, x), A = Xe(V, S);
+      var l = a.prevProps, s = a.clearFocusValueOnUpdate, o = a.inputIsHiddenAfterUpdate, r = a.ariaSelection, c = a.isFocused, d = a.prevWasFocused, g = a.instancePrefix, p = t.options, I = t.value, m = t.menuIsOpen, b = t.inputValue, v = t.isMulti, E = Ye(I), y = {};
+      if (l && (I !== l.value || p !== l.options || m !== l.menuIsOpen || b !== l.inputValue)) {
+        var x = m ? Wu(t, E) : [], B = m ? ot(Ce(t, E), "".concat(g, "-option")) : [], F = s ? Pu(a, E) : null, V = Zu(a, x), A = Xe(B, V);
         y = {
-          selectValue: B,
-          focusedOption: S,
+          selectValue: E,
+          focusedOption: V,
           focusedOptionId: A,
-          focusableOptionsWithIds: V,
+          focusableOptionsWithIds: B,
           focusedValue: F,
           clearFocusValueOnUpdate: !1
         };
@@ -2897,8 +2897,8 @@ var Pt = function(e) {
         inputIsHiddenAfterUpdate: void 0
       } : {}, H = r, O = c && d;
       return c && !O && (H = {
-        value: fe(m, B, B[0] || null),
-        options: B,
+        value: fe(v, E, E[0] || null),
+        options: E,
         action: "initial-input-focus"
       }, O = !d), r?.action === "initial-input-focus" && (H = null), C(C(C({}, y), R), {}, {
         prevProps: t,
@@ -3046,16 +3046,16 @@ const Du = (n) => {
   popoverContent: d,
   popoverInfoButtonProps: g,
   required: p = !1,
-  size: v = "medium",
-  systemFeedback: I,
+  size: I = "medium",
+  systemFeedback: m,
   translations: b,
-  value: m,
-  onValueChange: B,
+  value: v,
+  onValueChange: E,
   onInputChange: y,
   ...x
-}, V) => {
-  const [F, S] = ue(!1), A = oe(() => i, [JSON.stringify(i)]), R = $(null), H = (E) => {
-    E && (R.current = E, typeof V == "function" ? V(E.inputRef) : V && (V.current = E.inputRef));
+}, B) => {
+  const [F, V] = ue(!1), A = oe(() => i, [JSON.stringify(i)]), R = $(null), H = (S) => {
+    S && (R.current = S, typeof B == "function" ? B(S.inputRef) : B && (B.current = S.inputRef));
   }, O = {
     ...g,
     label: b && b.togglePopover || g?.label || Ie[c].togglePopover
@@ -3064,18 +3064,18 @@ const Du = (n) => {
   }), le = L(G.labelWrapper, {
     // hide label only visually to keep them available for assistive technologies
     [G.labelWrapperHidden]: Y
-  }), N = (E) => L(G.select, {
-    [G.selectSmall]: v === "small",
-    [G.selectFocused]: E.isFocused,
+  }), N = (S) => L(G.select, {
+    [G.selectSmall]: I === "small",
+    [G.selectFocused]: S.isFocused,
     [G.selectHovered]: F,
     [G.selectDisabled]: t,
     [G.selectInvalid]: o
-  }), w = (E) => L({
-    [G.placeholder]: !E.isDisabled
+  }), w = (S) => L({
+    [G.placeholder]: !S.isDisabled
   });
   return /* @__PURE__ */ se("div", { className: U, children: [
     /* @__PURE__ */ se("div", { className: le, children: [
-      /* @__PURE__ */ se("label", { className: Q, id: z, htmlFor: n, onMouseEnter: () => !t && S(!0), onMouseLeave: () => !t && S(!1), children: [
+      /* @__PURE__ */ se("label", { className: Q, id: z, htmlFor: n, onMouseEnter: () => !t && V(!0), onMouseLeave: () => !t && V(!1), children: [
         e,
         p && /* @__PURE__ */ M(Ut, {})
       ] }),
@@ -3086,7 +3086,7 @@ const Du = (n) => {
       Hu,
       {
         ...x,
-        "aria-errormessage": o && I ? W : void 0,
+        "aria-errormessage": o && m ? W : void 0,
         "aria-label": e,
         "aria-labelledby": `${z}${k}`,
         "aria-invalid": o,
@@ -3110,13 +3110,13 @@ const Du = (n) => {
         unstyled: !0,
         ref: H,
         styles: {
-          container: (E) => ({
-            ...E,
+          container: (S) => ({
+            ...S,
             // needed for cursor: not-allowed to work on disabled DSCombobox
             pointerEvents: "initial"
           }),
-          control: (E) => ({
-            ...E,
+          control: (S) => ({
+            ...S,
             outline: "initial",
             // we do not want to have paddingInlineEnd on the control, but rather on the valueContainer, so we remove it here
             paddingInlineEnd: 0,
@@ -3127,30 +3127,30 @@ const Du = (n) => {
             cursor: "text"
           }),
           // increase the z-index
-          menu: (E) => ({
-            ...E,
+          menu: (S) => ({
+            ...S,
             zIndex: 99
           }),
           // needed for Values to not be squished like "A.., B..." but rather cut off "Apple, Bana"
-          multiValue: (E) => ({
-            ...E,
+          multiValue: (S) => ({
+            ...S,
             minWidth: "max-content"
           }),
-          noOptionsMessage: (E) => ({
-            ...E,
+          noOptionsMessage: (S) => ({
+            ...S,
             // remove default text align center
             textAlign: void 0
           }),
-          option: (E) => ({
-            ...E,
+          option: (S) => ({
+            ...S,
             display: "flex",
             // remove fontSize, so that we can change if based on size
             fontSize: void 0
           }),
-          valueContainer: (E) => ({
-            ...E,
+          valueContainer: (S) => ({
+            ...S,
             flexWrap: "nowrap",
-            paddingInlineEnd: v === "small" ? "7px" : "15px"
+            paddingInlineEnd: I === "small" ? "7px" : "15px"
             // reduced by one pixel to counteract Figma inner border
           })
         },
@@ -3170,21 +3170,21 @@ const Du = (n) => {
           SingleValue: Mo
         },
         invalid: o,
-        systemFeedback: I,
+        systemFeedback: m,
         systemFeedbackId: W,
-        isSmall: v === "small",
-        value: m,
-        onChange: (E, {
+        isSmall: I === "small",
+        value: v,
+        onChange: (S, {
           action: _
         }) => {
-          _ === "clear" && !x.openMenuOnClick && !x.openMenuOnFocus && !r && (R.current?.blur(), R.current?.focus()), B && B(E);
+          _ === "clear" && !x.openMenuOnClick && !x.openMenuOnFocus && !r && (R.current?.blur(), R.current?.focus()), E && E(S);
         },
-        onInputChange: (E) => {
-          y && y(E);
+        onInputChange: (S) => {
+          y && y(S);
         }
       }
     ),
-    o && I && /* @__PURE__ */ M(_t, { className: G.feedback, message: I, variant: "error", id: W })
+    o && m && /* @__PURE__ */ M(_t, { className: G.feedback, message: m, variant: "error", id: W })
   ] });
 });
 Eo.displayName = "CustomReactSelect";
@@ -3295,50 +3295,55 @@ const So = (n) => {
   let l;
   return e[5] !== t || e[6] !== i || e[7] !== a ? (l = /* @__PURE__ */ M(K.NoOptionsMessage, { ...i, className: t, children: a }), e[5] = t, e[6] = i, e[7] = a, e[8] = l) : l = e[8], l;
 }, No = (n) => {
-  const e = te.c(22);
-  let i, u, t, a, l, s, o, r, c;
+  const e = te.c(27);
+  let i, u, t, a, l, s, o, r, c, d;
   if (e[0] !== n) {
     ({
-      ...r
+      ...c
     } = n);
     const {
-      isMulti: v,
-      isSmall: I
-    } = r.selectProps;
-    t = v, {
-      leadingIconName: s
-    } = r.data;
+      isMulti: b,
+      isSmall: v
+    } = c.selectProps;
+    a = b, {
+      leadingIconName: o
+    } = c.data;
     const {
-      children: b,
-      isDisabled: m,
-      isFocused: B,
-      isSelected: y
-    } = r;
-    i = b, u = m, a = y;
-    const x = r.selectProps.options.some((V) => "options" in V && V.options.includes(r.data));
-    o = L(G.option, {
-      [G.optionSmall]: I,
-      [G.optionSingle]: !t && a,
-      [G.optionDisabled]: u,
-      [G.optionFocusHover]: B,
-      [G.optionGrouped]: x
-    }), l = L(G.leadingIcon, {
-      [G.leadingIconSmall]: I,
-      [G.leadingIconDisabled]: u
-    }), c = L(G.optionCheckIcon, {
-      [G.optionCheckIconDisabled]: u
-    }), e[0] = n, e[1] = i, e[2] = u, e[3] = t, e[4] = a, e[5] = l, e[6] = s, e[7] = o, e[8] = r, e[9] = c;
+      children: E,
+      isDisabled: y,
+      isFocused: x,
+      isSelected: B
+    } = c;
+    u = E, t = y, l = B;
+    const F = c.selectProps.options.some((V) => "options" in V && V.options.includes(c.data));
+    r = L(G.option, {
+      [G.optionSmall]: v,
+      [G.optionSingle]: !a && l,
+      [G.optionDisabled]: t,
+      [G.optionFocusHover]: x,
+      [G.optionGrouped]: F
+    }), s = L(G.leadingIcon, {
+      [G.leadingIconSmall]: v,
+      [G.leadingIconDisabled]: t
+    }), i = L(G.optionCheckIcon, {
+      [G.optionCheckIconDisabled]: t
+    }), d = Object.keys(c.data).filter(Ho).reduce((V, A) => (V[A] = c.data[A], V), {}), e[0] = n, e[1] = i, e[2] = u, e[3] = t, e[4] = a, e[5] = l, e[6] = s, e[7] = o, e[8] = r, e[9] = c, e[10] = d;
   } else
-    i = e[1], u = e[2], t = e[3], a = e[4], l = e[5], s = e[6], o = e[7], r = e[8], c = e[9];
-  const d = c;
-  let g;
-  e[10] !== d || e[11] !== i || e[12] !== u || e[13] !== t || e[14] !== a || e[15] !== l || e[16] !== s ? (g = t ? /* @__PURE__ */ M($t, { label: i, checked: a, disabled: u, className: G.multiOption }) : /* @__PURE__ */ se("div", { className: G.singleOption, children: [
-    s && /* @__PURE__ */ M(ge, { name: s, className: l, "aria-hidden": "true" }),
-    /* @__PURE__ */ M("span", { className: G.optionText, children: i }),
-    a && /* @__PURE__ */ M(ge, { name: "check", className: d, "aria-hidden": "true" })
-  ] }), e[10] = d, e[11] = i, e[12] = u, e[13] = t, e[14] = a, e[15] = l, e[16] = s, e[17] = g) : g = e[17];
+    i = e[1], u = e[2], t = e[3], a = e[4], l = e[5], s = e[6], o = e[7], r = e[8], c = e[9], d = e[10];
+  const g = d;
   let p;
-  return e[18] !== o || e[19] !== r || e[20] !== g ? (p = /* @__PURE__ */ M(K.Option, { ...r, className: o, children: g }), e[18] = o, e[19] = r, e[20] = g, e[21] = p) : p = e[21], p;
+  e[11] !== g || e[12] !== c.innerProps ? (p = {
+    ...c.innerProps,
+    ...g
+  }, e[11] = g, e[12] = c.innerProps, e[13] = p) : p = e[13];
+  let I;
+  e[14] !== i || e[15] !== u || e[16] !== t || e[17] !== a || e[18] !== l || e[19] !== s || e[20] !== o ? (I = a ? /* @__PURE__ */ M($t, { label: u, checked: l, disabled: t, className: G.multiOption }) : /* @__PURE__ */ se("div", { className: G.singleOption, children: [
+    o && /* @__PURE__ */ M(ge, { name: o, className: s, "aria-hidden": "true" }),
+    /* @__PURE__ */ M("span", { className: G.optionText, children: u }),
+    l && /* @__PURE__ */ M(ge, { name: "check", className: i, "aria-hidden": "true" })
+  ] }), e[14] = i, e[15] = u, e[16] = t, e[17] = a, e[18] = l, e[19] = s, e[20] = o, e[21] = I) : I = e[21];
+  let m;
+  return e[22] !== r || e[23] !== c || e[24] !== p || e[25] !== I ? (m = /* @__PURE__ */ M(K.Option, { ...c, className: r, innerProps: p, children: I }), e[22] = r, e[23] = c, e[24] = p, e[25] = I, e[26] = m) : m = e[26], m;
 }, Mo = (n) => {
   const e = te.c(11), {
     children: i,
@@ -3361,11 +3366,14 @@ const So = (n) => {
     o
   ] }), e[7] = n, e[8] = s, e[9] = o, e[10] = r) : r = e[10], r;
 };
+function Ho(n) {
+  return n.startsWith("data-");
+}
 export {
-  qo as C,
+  ea as C,
   Kt as D,
   qt as a,
   Ie as b,
   Eo as c,
-  Ko as v
+  qo as v
 };

package/combobox.Ds2prR5y.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as z } from "react/jsx-runtime";
+import { d as G } from "./chunks/index.D-sRdssb.js";
+import { v as H, c as J } from "./chunks/CustomReactSelect.DS9Ey-jr.js";
+import { forwardRef as K } from "react";
+const Q = K((N, S) => {
+  const t = G.c(38);
+  let a, r, e, d, l, s, p, i, c, u, n, v, f, o, m, b;
+  if (t[0] !== N) {
+    const h = N ?? {}, {
+      id: q,
+      label: A,
+      className: B,
+      disabled: g,
+      dropdownOnFocus: w,
+      filterOption: L,
+      hideLabel: y,
+      invalid: D,
+      lang: E,
+      menuIsOpen: R,
+      popoverContent: j,
+      popoverInfoButtonProps: k,
+      required: F,
+      tabSelectsValue: M,
+      variant: V,
+      ..._
+    } = h;
+    s = q, i = A, a = B, d = L, u = R, n = j, v = k, o = _, r = g === void 0 ? !1 : g, e = w === void 0 ? !1 : w, l = y === void 0 ? !1 : y, p = D === void 0 ? !1 : D, c = E === void 0 ? "en" : E, f = F === void 0 ? !1 : F, m = M === void 0 ? !0 : M, b = V === void 0 ? "single" : V;
+    const $ = Array.isArray(o.options) ? o.options : [];
+    process.env.NODE_ENV !== "production" && H({
+      id: s,
+      label: i,
+      options: $,
+      hideLabel: l,
+      popoverContent: n
+    }), t[0] = N, t[1] = a, t[2] = r, t[3] = e, t[4] = d, t[5] = l, t[6] = s, t[7] = p, t[8] = i, t[9] = c, t[10] = u, t[11] = n, t[12] = v, t[13] = f, t[14] = o, t[15] = m, t[16] = b;
+  } else
+    a = t[1], r = t[2], e = t[3], d = t[4], l = t[5], s = t[6], p = t[7], i = t[8], c = t[9], u = t[10], n = t[11], v = t[12], f = t[13], o = t[14], m = t[15], b = t[16];
+  const O = b === "multi", I = !e || O;
+  let C;
+  t[17] !== a || t[18] !== r || t[19] !== e || t[20] !== d || t[21] !== l || t[22] !== s || t[23] !== p || t[24] !== O || t[25] !== i || t[26] !== c || t[27] !== u || t[28] !== n || t[29] !== v || t[30] !== S || t[31] !== f || t[32] !== o || t[33] !== I || t[34] !== m ? (C = {
+    id: s,
+    label: i,
+    className: a,
+    disabled: r,
+    filterOption: d,
+    hideLabel: l,
+    isMulti: O,
+    invalid: p,
+    lang: c,
+    menuIsOpen: u,
+    openMenuOnClick: e,
+    openMenuOnFocus: e,
+    isClearable: I,
+    required: f,
+    ref: S,
+    tabSelectsValue: m,
+    popoverContent: n,
+    popoverInfoButtonProps: v,
+    ...o
+  }, t[17] = a, t[18] = r, t[19] = e, t[20] = d, t[21] = l, t[22] = s, t[23] = p, t[24] = O, t[25] = i, t[26] = c, t[27] = u, t[28] = n, t[29] = v, t[30] = S, t[31] = f, t[32] = o, t[33] = I, t[34] = m, t[35] = C) : C = t[35];
+  const P = C;
+  let x;
+  return t[36] !== P ? (x = /* @__PURE__ */ z(J, { ...P }), t[36] = P, t[37] = x) : x = t[37], x;
+});
+Q.displayName = "DSCombobox";
+export {
+  Q as DSCombobox
+};

package/components/Combobox/Combobox.utils.d.ts

@@ -26,6 +26,8 @@ export interface ComboboxOption {
      * @default false
      */
     isDisabled?: boolean;
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
 }
 export type ComboboxOptionsGroup = GroupBase<ComboboxOption>;
 export type ComboboxOptionsOrOptGroups = OptionsOrGroups<ComboboxOption, ComboboxOptionsGroup>;

package/components/Combobox/CustomReactSelect/CustomReactSelect.d.ts

@@ -47,6 +47,10 @@ export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedR
      * @default 'en'
      */
     lang?: ComboboxLanguage;
+    /** Keeps the menu open or always closed, useful for specific testing scenarios.
+     * @default undefined
+     */
+    menuIsOpen?: boolean | undefined;
     /** Shows an info button next to the label that triggers a popover with the passed content. */
     popoverContent?: React.ReactNode;
     /** Popover info button props:

package/{customreactselect.BNwzk8Qi.js → customreactselect.CUmUV5IW.js}

@@ -3,7 +3,7 @@ import "react/jsx-runtime";
 import "./chunks/index.D-sRdssb.js";
 import "./chunks/index.DL9mof6u.js";
 import "react";
-import { c as f } from "./chunks/CustomReactSelect.D4kopDzX.js";
+import { c as f } from "./chunks/CustomReactSelect.DS9Ey-jr.js";
 import "./chunks/useBreakpoint.1txsny17.js";
 import "./asterisk.B2ih8VwF.js";
 import "./chunks/Icon.CDLyB7Pv.js";

package/index.es.js

@@ -11,8 +11,8 @@ import { D as Y, v as j } from "./chunks/Checkbox.D5X5T6Yg.js";
 import { D as z, v as J } from "./chunks/CheckboxGroup.BIspWqeW.js";
 import { DSChipGroup as $ } from "./chipgroup.CY3pWyLO.js";
 import { C as ea, c as sa, b as oa, D as ra, g as ta, d as Ta, v as Sa, a as Ia } from "./chunks/Chip.DIp5hdRH.js";
-import { DSCombobox as pa } from "./combobox.C2XUM4fM.js";
-import { C as _a, b as Da, a as Aa, D as la, v as na } from "./chunks/CustomReactSelect.D4kopDzX.js";
+import { DSCombobox as pa } from "./combobox.Ds2prR5y.js";
+import { C as _a, b as Da, a as Aa, D as la, v as na } from "./chunks/CustomReactSelect.DS9Ey-jr.js";
 import { D as Oa, v as da } from "./chunks/Dialog.DMxHRrxo.js";
 import { a as va, D as Pa, v as Ca } from "./chunks/Drawer.CatmvDHJ.js";
 import { D as ua, v as La } from "./chunks/Fieldset.Bk8W5h13.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.37",
+  "version": "1.0.0-RC.38",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.stihl.de/",
   "keywords": [
@@ -96,10 +96,10 @@
     "@floating-ui/react": "^0.27.16",
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "^1.56.0",
-    "@storybook/addon-a11y": "^9.1.8",
-    "@storybook/addon-docs": "9.1.8",
-    "@storybook/addon-links": "^9.1.8",
-    "@storybook/react-vite": "^9.1.8",
+    "@storybook/addon-a11y": "^9.1.17",
+    "@storybook/addon-docs": "9.1.17",
+    "@storybook/addon-links": "^9.1.17",
+    "@storybook/react-vite": "^9.1.17",
     "@storybook/test-runner": "^0.23.0",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
@@ -119,7 +119,7 @@
     "concurrently": "^9.2.1",
     "eslint": "^9.36.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.1.8",
+    "eslint-plugin-storybook": "^9.1.17",
     "globals": "^16.4.0",
     "globby": "^14.1.0",
     "http-server": "^14.1.1",
@@ -133,7 +133,7 @@
     "react-intersection-observer": "^9.16.0",
     "react-syntax-highlighter": "^15.6.6",
     "sass": "^1.93.2",
-    "storybook": "^9.1.8",
+    "storybook": "^9.1.17",
     "typescript": "^5.9.2",
     "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",

package/combobox.C2XUM4fM.js

@@ -1,67 +0,0 @@
-"use client";
-import { jsx as _ } from "react/jsx-runtime";
-import { d as $ } from "./chunks/index.D-sRdssb.js";
-import { v as z, c as G } from "./chunks/CustomReactSelect.D4kopDzX.js";
-import { forwardRef as H } from "react";
-const J = H((x, N) => {
-  const t = $.c(36);
-  let a, r, e, d, l, i, p, s, c, n, v, f, o, u, m;
-  if (t[0] !== x) {
-    const h = x ?? {}, {
-      id: q,
-      label: A,
-      className: B,
-      disabled: g,
-      dropdownOnFocus: w,
-      filterOption: I,
-      hideLabel: y,
-      invalid: D,
-      lang: E,
-      popoverContent: L,
-      popoverInfoButtonProps: R,
-      required: F,
-      tabSelectsValue: M,
-      variant: V,
-      ...j
-    } = h;
-    i = q, s = A, a = B, d = I, n = L, v = R, o = j, r = g === void 0 ? !1 : g, e = w === void 0 ? !1 : w, l = y === void 0 ? !1 : y, p = D === void 0 ? !1 : D, c = E === void 0 ? "en" : E, f = F === void 0 ? !1 : F, u = M === void 0 ? !0 : M, m = V === void 0 ? "single" : V;
-    const k = Array.isArray(o.options) ? o.options : [];
-    process.env.NODE_ENV !== "production" && z({
-      id: i,
-      label: s,
-      options: k,
-      hideLabel: l,
-      popoverContent: n
-    }), t[0] = x, t[1] = a, t[2] = r, t[3] = e, t[4] = d, t[5] = l, t[6] = i, t[7] = p, t[8] = s, t[9] = c, t[10] = n, t[11] = v, t[12] = f, t[13] = o, t[14] = u, t[15] = m;
-  } else
-    a = t[1], r = t[2], e = t[3], d = t[4], l = t[5], i = t[6], p = t[7], s = t[8], c = t[9], n = t[10], v = t[11], f = t[12], o = t[13], u = t[14], m = t[15];
-  const b = m === "multi", S = !e || b;
-  let C;
-  t[16] !== a || t[17] !== r || t[18] !== e || t[19] !== d || t[20] !== l || t[21] !== i || t[22] !== p || t[23] !== b || t[24] !== s || t[25] !== c || t[26] !== n || t[27] !== v || t[28] !== N || t[29] !== f || t[30] !== o || t[31] !== S || t[32] !== u ? (C = {
-    id: i,
-    label: s,
-    className: a,
-    disabled: r,
-    filterOption: d,
-    hideLabel: l,
-    isMulti: b,
-    invalid: p,
-    lang: c,
-    openMenuOnClick: e,
-    openMenuOnFocus: e,
-    isClearable: S,
-    required: f,
-    ref: N,
-    tabSelectsValue: u,
-    popoverContent: n,
-    popoverInfoButtonProps: v,
-    ...o
-  }, t[16] = a, t[17] = r, t[18] = e, t[19] = d, t[20] = l, t[21] = i, t[22] = p, t[23] = b, t[24] = s, t[25] = c, t[26] = n, t[27] = v, t[28] = N, t[29] = f, t[30] = o, t[31] = S, t[32] = u, t[33] = C) : C = t[33];
-  const P = C;
-  let O;
-  return t[34] !== P ? (O = /* @__PURE__ */ _(G, { ...P }), t[34] = P, t[35] = O) : O = t[35], O;
-});
-J.displayName = "DSCombobox";
-export {
-  J as DSCombobox
-};