@stihl-design-system/components 1.0.0-RC.27 → 1.0.0-RC.28

package/chunks/Select.lveq1iBY.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsx as v, jsxs as Ne } from "react/jsx-runtime";
+import { d as Re } from "./index.CgTHIF3K.js";
+import { c as he } from "./index.CEyLAtio.js";
+import { forwardRef as Ve, useRef as Ae, useState as qe, useEffect as Be } from "react";
+import { u as Fe } from "./useBreakpoint.CMOR9ZOB.js";
+import { D as He } from "./Icon.C0161Glk.js";
+import { DSSystemFeedback as je } from "../systemfeedback.CLQCbTF6.js";
+import { g as ue, r as We } from "./helpers.BbWkXTr3.js";
+import '../assets/Select.U7xsC0o1.css';const ze = "ds-select_root_bilx9_1", Me = "ds-select_hint_bilx9_10", Te = "ds-select_label_bilx9_10", Oe = "ds-select_label--hidden_bilx9_100", Ze = "ds-select_label--disabled_bilx9_113", Je = "ds-select_label--required_bilx9_117", Ke = "ds-select_feedback_bilx9_138", Qe = "ds-select_select-wrapper_bilx9_143", Ue = "ds-select_select_bilx9_143", Xe = "ds-select_select--small_bilx9_157", Ye = "ds-select_select--invalid_bilx9_269", Ge = "ds-select_select--placeholder_bilx9_384", el = "ds-select_chevron_bilx9_423", ll = "ds-select_chevron--small_bilx9_427", tl = "ds-select_chevron--disabled_bilx9_430", l = {
+  root: ze,
+  hint: Me,
+  label: Te,
+  labelHidden: Oe,
+  labelDisabled: Ze,
+  labelRequired: Je,
+  feedback: Ke,
+  selectWrapper: Qe,
+  select: Ue,
+  selectSmall: Xe,
+  selectInvalid: Ye,
+  selectPlaceholder: Ge,
+  chevron: el,
+  chevronSmall: ll,
+  chevronDisabled: tl
+}, _l = ["medium", "small"], sl = ({
+  id: n,
+  label: s,
+  options: e
+}) => {
+  if (!n)
+    throw new Error(ue("DSSelect", 'A unique "id" prop is required. Please add a unique "id" prop to the DSSelect component.'));
+  if (!s)
+    throw new Error(ue("DSSelect", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSelect component. If you don't want to display a label, set hideLabel={true}.`));
+  if (Array.isArray(e)) {
+    if (e.length === 0)
+      throw new Error(ue("DSSelect", "The options array must not be empty."));
+  } else throw new Error(ue("DSSelect", We("options", "DSSelect")));
+}, al = (n, s, e) => n === "" || s !== void 0 && s !== "" ? !1 : !(e !== void 0 && e !== ""), il = Ve((n, s) => {
+  const e = Re.c(125);
+  let o, d, r, t, b, f, S, x, a, O, Z, J, K, Q, U, c;
+  e[0] !== n ? ({
+    id: t,
+    label: b,
+    options: S,
+    className: o,
+    defaultValue: d,
+    disabled: O,
+    hideLabel: Z,
+    hint: r,
+    invalid: J,
+    placeholder: K,
+    required: Q,
+    size: U,
+    systemFeedback: a,
+    value: c,
+    onChange: f,
+    ...x
+  } = n, e[0] = n, e[1] = o, e[2] = d, e[3] = r, e[4] = t, e[5] = b, e[6] = f, e[7] = S, e[8] = x, e[9] = a, e[10] = O, e[11] = Z, e[12] = J, e[13] = K, e[14] = Q, e[15] = U, e[16] = c) : (o = e[1], d = e[2], r = e[3], t = e[4], b = e[5], f = e[6], S = e[7], x = e[8], a = e[9], O = e[10], Z = e[11], J = e[12], K = e[13], Q = e[14], U = e[15], c = e[16]);
+  const h = O === void 0 ? !1 : O, Ee = Z === void 0 ? !1 : Z, i = J === void 0 ? !1 : J, D = K === void 0 ? "Select" : K, y = Q === void 0 ? !1 : Q, ee = U === void 0 ? "medium" : U;
+  process.env.NODE_ENV !== "production" && sl({
+    id: t,
+    label: b,
+    options: S
+  });
+  const Ie = Ae(null), [_e, ye] = qe(c);
+  let le;
+  e[17] !== d || e[18] !== D || e[19] !== c ? (le = al(D, d, c), e[17] = d, e[18] = D, e[19] = c, e[20] = le) : le = e[20];
+  const [X, Pe] = qe(le);
+  let te, se;
+  e[21] !== c ? (te = () => {
+    ye(c);
+  }, se = [c], e[21] = c, e[22] = te, e[23] = se) : (te = e[22], se = e[23]), Be(te, se);
+  let ae;
+  e[24] !== s ? (ae = (G) => {
+    Ie.current = G, typeof s == "function" ? s(G) : s && (s.current = G);
+  }, e[24] = s, e[25] = ae) : ae = e[25];
+  const me = ae, Y = Fe(Ee), g = `${t}-label`, u = `${t}-feedback`, w = `${t}-hint`, pe = r ? ` ${w}` : "";
+  let ie;
+  e[26] !== i || e[27] !== a || e[28] !== u ? (ie = [i && a && u].filter(Boolean).join(" ") || void 0, e[26] = i, e[27] = a, e[28] = u, e[29] = ie) : ie = e[29];
+  const ve = ie;
+  let N, q, E, I, P, k, C, $, L, R, V, A, B, F, H, j, _, m, p;
+  if (e[30] !== ve || e[31] !== pe || e[32] !== o || e[33] !== d || e[34] !== h || e[35] !== me || e[36] !== Y || e[37] !== r || e[38] !== w || e[39] !== t || e[40] !== i || e[41] !== X || e[42] !== b || e[43] !== f || e[44] !== S || e[45] !== D || e[46] !== y || e[47] !== x || e[48] !== g || e[49] !== _e || e[50] !== ee || e[51] !== a || e[52] !== u) {
+    const G = (fe) => [D && /* @__PURE__ */ v("option", { value: "", children: D }, `${t}-hidden-option-disabled-placeholder`), ...fe.map((T) => {
+      if ("options" in T) {
+        const {
+          label: we,
+          options: Le
+        } = T;
+        return /* @__PURE__ */ v("optgroup", { label: we, children: Le.map(ge) }, we);
+      } else
+        return ge(T);
+    })], ge = cl;
+    let oe;
+    e[72] !== o ? (oe = he(l.root, o), e[72] = o, e[73] = oe) : oe = e[73];
+    const ke = oe, Se = ee === "small";
+    let re;
+    e[74] !== i || e[75] !== X || e[76] !== Se ? (re = he(l.select, {
+      [l.selectSmall]: Se,
+      [l.selectInvalid]: i,
+      [l.selectPlaceholder]: X
+    }), e[74] = i, e[75] = X, e[76] = Se, e[77] = re) : re = e[77];
+    const Ce = re;
+    let ne;
+    e[78] !== h || e[79] !== Y || e[80] !== y ? (ne = he(l.label, {
+      [l.labelHidden]: Y,
+      [l.labelDisabled]: h,
+      [l.labelRequired]: y
+    }), e[78] = h, e[79] = Y, e[80] = y, e[81] = ne) : ne = e[81];
+    const De = ne, xe = ee === "small";
+    let de;
+    e[82] !== h || e[83] !== xe ? (de = he(l.chevron, {
+      [l.chevronSmall]: xe,
+      [l.chevronDisabled]: h
+    }), e[82] = h, e[83] = xe, e[84] = de) : de = e[84], N = de;
+    let be;
+    e[85] !== f ? (be = (fe) => {
+      const {
+        value: T
+      } = fe.target;
+      Pe(T === ""), ye(T), f && f(fe);
+    }, e[85] = f, e[86] = be) : be = e[86];
+    const $e = be;
+    j = ke, e[87] !== t || e[88] !== b || e[89] !== De || e[90] !== g ? (_ = /* @__PURE__ */ v("label", { className: De, id: g, htmlFor: t, children: b }), e[87] = t, e[88] = b, e[89] = De, e[90] = g, e[91] = _) : _ = e[91], e[92] !== r || e[93] !== w ? (m = r && /* @__PURE__ */ v("div", { className: l.hint, id: w, children: r }), e[92] = r, e[93] = w, e[94] = m) : m = e[94], e[95] !== i || e[96] !== a || e[97] !== u ? (p = i && a && /* @__PURE__ */ v(je, { className: l.feedback, message: a, type: "invalid", id: u, "aria-live": "assertive" }), e[95] = i, e[96] = a, e[97] = u, e[98] = p) : p = e[98], H = l.selectWrapper, q = x, E = t, I = me, P = Ce, k = `${g}${pe}`, C = ve, $ = i, L = d, R = _e, V = h, A = y, B = $e, F = G(S), e[30] = ve, e[31] = pe, e[32] = o, e[33] = d, e[34] = h, e[35] = me, e[36] = Y, e[37] = r, e[38] = w, e[39] = t, e[40] = i, e[41] = X, e[42] = b, e[43] = f, e[44] = S, e[45] = D, e[46] = y, e[47] = x, e[48] = g, e[49] = _e, e[50] = ee, e[51] = a, e[52] = u, e[53] = N, e[54] = q, e[55] = E, e[56] = I, e[57] = P, e[58] = k, e[59] = C, e[60] = $, e[61] = L, e[62] = R, e[63] = V, e[64] = A, e[65] = B, e[66] = F, e[67] = H, e[68] = j, e[69] = _, e[70] = m, e[71] = p;
+  } else
+    N = e[53], q = e[54], E = e[55], I = e[56], P = e[57], k = e[58], C = e[59], $ = e[60], L = e[61], R = e[62], V = e[63], A = e[64], B = e[65], F = e[66], H = e[67], j = e[68], _ = e[69], m = e[70], p = e[71];
+  let W;
+  e[99] !== q || e[100] !== E || e[101] !== I || e[102] !== P || e[103] !== k || e[104] !== C || e[105] !== $ || e[106] !== L || e[107] !== R || e[108] !== V || e[109] !== A || e[110] !== B || e[111] !== F ? (W = /* @__PURE__ */ v("select", { ...q, id: E, ref: I, className: P, "aria-labelledby": k, "aria-describedby": C, "aria-invalid": $, defaultValue: L, value: R, disabled: V, required: A, onChange: B, children: F }), e[99] = q, e[100] = E, e[101] = I, e[102] = P, e[103] = k, e[104] = C, e[105] = $, e[106] = L, e[107] = R, e[108] = V, e[109] = A, e[110] = B, e[111] = F, e[112] = W) : W = e[112];
+  let z;
+  e[113] !== N ? (z = /* @__PURE__ */ v(He, { name: "chevron-down", className: N, "aria-hidden": "true" }), e[113] = N, e[114] = z) : z = e[114];
+  let M;
+  e[115] !== H || e[116] !== W || e[117] !== z ? (M = /* @__PURE__ */ Ne("div", { className: H, children: [
+    W,
+    z
+  ] }), e[115] = H, e[116] = W, e[117] = z, e[118] = M) : M = e[118];
+  let ce;
+  return e[119] !== j || e[120] !== _ || e[121] !== m || e[122] !== p || e[123] !== M ? (ce = /* @__PURE__ */ Ne("div", { className: j, children: [
+    _,
+    m,
+    p,
+    M
+  ] }), e[119] = j, e[120] = _, e[121] = m, e[122] = p, e[123] = M, e[124] = ce) : ce = e[124], ce;
+});
+il.displayName = "DSSelect";
+function cl(n) {
+  const {
+    label: s,
+    value: e,
+    isDisabled: o
+  } = n;
+  return /* @__PURE__ */ v("option", { value: e, disabled: o, children: s }, e);
+}
+export {
+  il as D,
+  _l as S,
+  al as g,
+  sl as v
+};

package/chunks/Slider.D9MHH4cZ.js

@@ -0,0 +1,292 @@
+"use client";
+import { jsx as b, jsxs as Se } from "react/jsx-runtime";
+import { d as rt } from "./index.CgTHIF3K.js";
+import { c as T } from "./index.CEyLAtio.js";
+import { forwardRef as ot, useState as Xe, useRef as ct } from "react";
+import { u as dt } from "./useBreakpoint.CMOR9ZOB.js";
+import { DSInput as pt } from "../input.DAneVu7p.js";
+import { g as Je } from "./helpers.BbWkXTr3.js";
+import '../assets/Slider.DzwSjDPV.css';const ut = "ds-slider_root_1p0nf_1", mt = "ds-slider_hint_1p0nf_13", bt = "ds-slider_label_1p0nf_13", ft = "ds-slider_number-input_1p0nf_16", _t = "ds-slider_label-hint-input-wrapper_1p0nf_20", ht = "ds-slider_label--hidden_1p0nf_40", Tt = "ds-slider_label--disabled_1p0nf_53", xt = "ds-slider_number-input--small_1p0nf_82", vt = "ds-slider_min-max-label-wrapper_1p0nf_87", gt = "ds-slider_min-max-label-wrapper--disabled_1p0nf_101", kt = "ds-slider_min-label_1p0nf_106", Nt = "ds-slider_max-label_1p0nf_110", St = "ds-slider_slider-wrapper_1p0nf_114", yt = "ds-slider_slider_1p0nf_114", Dt = "ds-slider_value-tooltip_1p0nf_138", It = "ds-slider_proxy-thumb_1p0nf_142", Mt = "ds-slider_proxy-thumb--disabled_1p0nf_209", Lt = "ds-slider_custom-track_1p0nf_238", Vt = "ds-slider_custom-track--progress_1p0nf_243", wt = "ds-slider_custom-track--runnable_1p0nf_255", Ct = "ds-slider_custom-track--disabled_1p0nf_269", Wt = "ds-slider_tick-wrapper_1p0nf_289", $t = "ds-slider_tick_1p0nf_289", Pt = "ds-slider_value-tooltip--visible_1p0nf_361", At = "ds-slider_value-tooltip--disabled_1p0nf_364", a = {
+  root: ut,
+  hint: mt,
+  label: bt,
+  numberInput: ft,
+  labelHintInputWrapper: _t,
+  labelHidden: ht,
+  labelDisabled: Tt,
+  numberInputSmall: xt,
+  minMaxLabelWrapper: vt,
+  minMaxLabelWrapperDisabled: gt,
+  minLabel: kt,
+  maxLabel: Nt,
+  sliderWrapper: St,
+  slider: yt,
+  valueTooltip: Dt,
+  proxyThumb: It,
+  proxyThumbDisabled: Mt,
+  customTrack: Lt,
+  customTrackProgress: Vt,
+  customTrackRunnable: wt,
+  customTrackDisabled: Ct,
+  tickWrapper: Wt,
+  tick: $t,
+  valueTooltipVisible: Pt,
+  valueTooltipDisabled: At
+}, Et = 11, Qe = 4, Ye = (u) => u.toString().length, Rt = (u, n, e) => {
+  if (n === 0)
+    return !0;
+  const m = 1e-10, r = (u - e) / n;
+  return Math.abs(Math.round(r) - r) < m;
+}, Ft = (u, n, e, m) => {
+  var o;
+  const r = parseFloat(n), f = e, c = Math.round((u - f) / r);
+  let d = f + c * r;
+  d = Math.min(Math.max(d, e), m);
+  const v = ((o = r.toString().split(".")[1]) == null ? void 0 : o.length) || 0;
+  return parseFloat(d.toFixed(v));
+}, Ht = (u, n, e) => {
+  const m = (u - n) / (e - n) * 100, r = `calc(-0.24 * ${m}px + 10px)`;
+  return `calc(${m}% + ${r})`;
+}, Bt = ({
+  id: u,
+  label: n
+}) => {
+  if (!u)
+    throw new Error(Je("DSSlider", 'A unique "id" prop is required. Please add a unique "id" prop to the DSSlider component.'));
+  if (!n)
+    throw new Error(Je("DSSlider", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSlider component. If you don't want to display a label, set hideLabel={true}.`));
+}, qt = ot((u, n) => {
+  const e = rt.c(154);
+  let m, r, f, c, d, v, o, S, U, G, X, J, Q, Y, Z, g;
+  e[0] !== u ? ({
+    id: c,
+    label: d,
+    className: m,
+    defaultValue: r,
+    disabled: U,
+    hideLabel: G,
+    hideNumberInput: X,
+    hint: f,
+    isTooltipAlwaysVisible: J,
+    max: Q,
+    min: Y,
+    numberInputProps: v,
+    step: Z,
+    value: g,
+    onChange: o,
+    ...S
+  } = u, e[0] = u, e[1] = m, e[2] = r, e[3] = f, e[4] = c, e[5] = d, e[6] = v, e[7] = o, e[8] = S, e[9] = U, e[10] = G, e[11] = X, e[12] = J, e[13] = Q, e[14] = Y, e[15] = Z, e[16] = g) : (m = e[1], r = e[2], f = e[3], c = e[4], d = e[5], v = e[6], o = e[7], S = e[8], U = e[9], G = e[10], X = e[11], J = e[12], Q = e[13], Y = e[14], Z = e[15], g = e[16]);
+  const l = U === void 0 ? !1 : U, Ze = G === void 0 ? !1 : G, y = X === void 0 ? !1 : X, ye = J === void 0 ? !1 : J, et = Q === void 0 ? 100 : Q, tt = Y === void 0 ? 0 : Y, ee = Z === void 0 ? 1 : Z;
+  process.env.NODE_ENV !== "production" && Bt({
+    id: c,
+    label: d
+  });
+  const i = Number(et), t = Number(tt), p = Number(ee), De = dt(Ze), D = `${c}-label`, Ie = `${c}-hint`, Me = `${c}-number-input`;
+  let se;
+  e[17] !== r || e[18] !== t || e[19] !== g ? (se = g || r || t.toString() || "0", e[17] = r, e[18] = t, e[19] = g, e[20] = se) : se = e[20];
+  const [I, le] = Xe(se), [x, ae] = Xe(g || r || t || 0), st = ct(null);
+  let ie;
+  e[21] !== n ? (ie = (s) => {
+    st.current = s, typeof n == "function" ? n(s) : n && (n.current = s);
+  }, e[21] = n, e[22] = ie) : ie = e[22];
+  const Le = ie;
+  let ne;
+  e[23] !== v ? (ne = v || {}, e[23] = v, e[24] = ne) : ne = e[24];
+  const {
+    size: Ge,
+    suffix: Ve
+  } = ne, re = Ge === void 0 ? "medium" : Ge;
+  let oe;
+  e[25] !== o ? (oe = (s) => {
+    const _ = parseFloat(s.target.value);
+    ae(_), le(s.target.value), o && o(s);
+  }, e[25] = o, e[26] = oe) : oe = e[26];
+  const we = oe;
+  let ce;
+  e[27] === Symbol.for("react.memo_cache_sentinel") ? (ce = (s) => {
+    const _ = s.target.value;
+    if (le(_), /^-?\d+(\.\d+)?$/.test(_)) {
+      const h = parseFloat(_);
+      Number.isNaN(h) || ae(h);
+    }
+  }, e[27] = ce) : ce = e[27];
+  const lt = ce;
+  let k;
+  if (e[28] !== I || e[29] !== o || e[30] !== i || e[31] !== t || e[32] !== ee) {
+    k = (_) => {
+      const te = parseFloat(I);
+      if (Number.isNaN(te)) {
+        s(_);
+        return;
+      }
+      let h = Math.min(Math.max(te, t), i);
+      Rt(h, parseFloat(ee), t) || (h = Ft(h, ee, t, i)), le(h.toString()), ae(h), o && o(_);
+    };
+    const s = (_) => {
+      le(t.toString()), ae(t), o && o(_);
+    };
+    e[28] = I, e[29] = o, e[30] = i, e[31] = t, e[32] = ee, e[33] = k;
+  } else
+    k = e[33];
+  const M = (p === 0 ? !1 : (i - t) / p <= Et) && (i - t) / p || 0;
+  let de;
+  if (e[34] !== i || e[35] !== t || e[36] !== p || e[37] !== M) {
+    let s;
+    e[39] !== i || e[40] !== t || e[41] !== p ? (s = (_, te) => {
+      const h = t + te * p, nt = Ht(h, t, i);
+      return /* @__PURE__ */ b("span", { className: a.tick, style: {
+        left: nt
+      } }, h);
+    }, e[39] = i, e[40] = t, e[41] = p, e[42] = s) : s = e[42], de = Array.from({
+      length: M + 1
+    }, s), e[34] = i, e[35] = t, e[36] = p, e[37] = M, e[38] = de;
+  } else
+    de = e[38];
+  const Ce = de;
+  let pe;
+  e[43] !== i || e[44] !== t || e[45] !== x ? (pe = () => {
+    if (t === i)
+      throw new Error("Min and max values cannot be the same.");
+    const s = (x - t) / (i - t) * 100;
+    return Math.max(0, Math.min(s, 100));
+  }, e[43] = i, e[44] = t, e[45] = x, e[46] = pe) : pe = e[46];
+  const N = pe;
+  let ue;
+  e[47] !== N ? (ue = () => {
+    const s = N();
+    return s < 50 ? `calc(${s}% + 4px)` : `calc(${s}% - 4px)`;
+  }, e[47] = N, e[48] = ue) : ue = e[48];
+  const at = ue;
+  let me;
+  e[49] !== N ? (me = () => {
+    const s = 100 - N();
+    return s < 50 ? `calc(${s}% + 4px)` : `calc(${s}% - 4px)`;
+  }, e[49] = N, e[50] = me) : me = e[50];
+  const it = me;
+  let be;
+  e[51] !== m ? (be = T(a.slider, m), e[51] = m, e[52] = be) : be = e[52];
+  const We = be;
+  let fe;
+  e[53] !== l || e[54] !== De ? (fe = T(a.label, {
+    [a.labelHidden]: De,
+    [a.labelDisabled]: l
+  }), e[53] = l, e[54] = De, e[55] = fe) : fe = e[55];
+  const $e = fe, Pe = re === "small";
+  let _e;
+  e[56] !== Pe ? (_e = T(a.numberInput, {
+    [a.numberInputSmall]: Pe
+  }), e[56] = Pe, e[57] = _e) : _e = e[57];
+  const Ae = _e;
+  let he;
+  e[58] !== l ? (he = T(a.minMaxLabelWrapper, {
+    [a.minMaxLabelWrapperDisabled]: l
+  }), e[58] = l, e[59] = he) : he = e[59];
+  const Ee = he;
+  let Te;
+  e[60] !== l ? (Te = T(a.customTrack, a.customTrackProgress, {
+    [a.customTrackDisabled]: l
+  }), e[60] = l, e[61] = Te) : Te = e[61];
+  const Re = Te;
+  let xe;
+  e[62] !== l ? (xe = T(a.customTrack, a.customTrackRunnable, {
+    [a.customTrackDisabled]: l
+  }), e[62] = l, e[63] = xe) : xe = e[63];
+  const Fe = xe;
+  let ve;
+  e[64] !== l ? (ve = T(a.proxyThumb, {
+    [a.proxyThumbDisabled]: l
+  }), e[64] = l, e[65] = ve) : ve = e[65];
+  const He = ve;
+  let ge;
+  e[66] !== l || e[67] !== ye ? (ge = T(a.valueTooltip, {
+    [a.valueTooltipVisible]: ye,
+    [a.valueTooltipDisabled]: l
+  }), e[66] = l, e[67] = ye, e[68] = ge) : ge = e[68];
+  const Be = ge;
+  let L;
+  e[69] !== c || e[70] !== d || e[71] !== $e || e[72] !== D ? (L = /* @__PURE__ */ b("label", { className: $e, htmlFor: c, id: D, children: d }), e[69] = c, e[70] = d, e[71] = $e, e[72] = D, e[73] = L) : L = e[73];
+  let V;
+  e[74] !== f || e[75] !== Ie ? (V = f && /* @__PURE__ */ b("div", { className: a.hint, id: Ie, children: f }), e[74] = f, e[75] = Ie, e[76] = V) : V = e[76];
+  let w;
+  e[77] !== l || e[78] !== k || e[79] !== y || e[80] !== Me || e[81] !== I || e[82] !== d || e[83] !== Ae || e[84] !== re || e[85] !== Ve || e[86] !== i || e[87] !== t || e[88] !== p ? (w = !y && /* @__PURE__ */ b(pt, { id: Me, className: Ae, type: "number", min: t, max: i, step: p, inputMode: "decimal", autoComplete: "off", disabled: l, hideLabel: !0, value: I, onChange: lt, onBlur: k, onKeyDown: (s) => {
+    s.key === "Enter" && (s.preventDefault(), k(s));
+  }, label: d, size: re, suffix: Ve }), e[77] = l, e[78] = k, e[79] = y, e[80] = Me, e[81] = I, e[82] = d, e[83] = Ae, e[84] = re, e[85] = Ve, e[86] = i, e[87] = t, e[88] = p, e[89] = w) : w = e[89];
+  let C;
+  e[90] !== L || e[91] !== V || e[92] !== w ? (C = /* @__PURE__ */ Se("div", { className: a.labelHintInputWrapper, children: [
+    L,
+    V,
+    w
+  ] }), e[90] = L, e[91] = V, e[92] = w, e[93] = C) : C = e[93];
+  const qe = Ye(t) < Qe;
+  let W;
+  e[94] !== qe ? (W = T({
+    [a.minLabel]: qe
+  }), e[94] = qe, e[95] = W) : W = e[95];
+  let $;
+  e[96] !== t || e[97] !== W ? ($ = /* @__PURE__ */ b("div", { className: W, children: t }), e[96] = t, e[97] = W, e[98] = $) : $ = e[98];
+  const Oe = Ye(i) < Qe;
+  let P;
+  e[99] !== Oe ? (P = T({
+    [a.maxLabel]: Oe
+  }), e[99] = Oe, e[100] = P) : P = e[100];
+  let A;
+  e[101] !== i || e[102] !== P ? (A = /* @__PURE__ */ b("div", { className: P, children: i }), e[101] = i, e[102] = P, e[103] = A) : A = e[103];
+  let E;
+  e[104] !== Ee || e[105] !== $ || e[106] !== A ? (E = /* @__PURE__ */ Se("div", { className: Ee, children: [
+    $,
+    A
+  ] }), e[104] = Ee, e[105] = $, e[106] = A, e[107] = E) : E = e[107];
+  const ze = `${N()}`;
+  let ke;
+  e[108] !== ze ? (ke = {
+    "--ds-input-slider-thumb-position": ze
+  }, e[108] = ze, e[109] = ke) : ke = e[109];
+  const Ke = ke, je = at();
+  let R;
+  e[110] !== je ? (R = {
+    width: je
+  }, e[110] = je, e[111] = R) : R = e[111];
+  let F;
+  e[112] !== Re || e[113] !== R ? (F = /* @__PURE__ */ b("div", { className: Re, style: R }), e[112] = Re, e[113] = R, e[114] = F) : F = e[114];
+  const Ue = it();
+  let H;
+  e[115] !== Ue ? (H = {
+    width: Ue
+  }, e[115] = Ue, e[116] = H) : H = e[116];
+  let B;
+  e[117] !== Fe || e[118] !== H ? (B = /* @__PURE__ */ b("div", { className: Fe, style: H }), e[117] = Fe, e[118] = H, e[119] = B) : B = e[119];
+  let q;
+  e[120] !== l || e[121] !== Le || e[122] !== we || e[123] !== c || e[124] !== i || e[125] !== t || e[126] !== p || e[127] !== S || e[128] !== We || e[129] !== D || e[130] !== x ? (q = /* @__PURE__ */ b("input", { ...S, id: c, type: "range", ref: Le, className: We, min: t, max: i, step: p, value: x, disabled: l, "aria-labelledby": D, onChange: we }), e[120] = l, e[121] = Le, e[122] = we, e[123] = c, e[124] = i, e[125] = t, e[126] = p, e[127] = S, e[128] = We, e[129] = D, e[130] = x, e[131] = q) : q = e[131];
+  let O;
+  e[132] !== M || e[133] !== Ce ? (O = M > 0 && /* @__PURE__ */ b("div", { className: a.tickWrapper, children: Ce }), e[132] = M, e[133] = Ce, e[134] = O) : O = e[134];
+  let z;
+  e[135] !== He ? (z = /* @__PURE__ */ b("div", { className: He }), e[135] = He, e[136] = z) : z = e[136];
+  let K;
+  e[137] !== l || e[138] !== y || e[139] !== x || e[140] !== Be ? (K = y && /* @__PURE__ */ b("div", { className: Be, "aria-disabled": l, children: x }), e[137] = l, e[138] = y, e[139] = x, e[140] = Be, e[141] = K) : K = e[141];
+  let j;
+  e[142] !== Ke || e[143] !== F || e[144] !== B || e[145] !== q || e[146] !== O || e[147] !== z || e[148] !== K ? (j = /* @__PURE__ */ Se("div", { className: a.sliderWrapper, style: Ke, children: [
+    F,
+    B,
+    q,
+    O,
+    z,
+    K
+  ] }), e[142] = Ke, e[143] = F, e[144] = B, e[145] = q, e[146] = O, e[147] = z, e[148] = K, e[149] = j) : j = e[149];
+  let Ne;
+  return e[150] !== C || e[151] !== E || e[152] !== j ? (Ne = /* @__PURE__ */ Se("div", { className: a.root, children: [
+    C,
+    E,
+    j
+  ] }), e[150] = C, e[151] = E, e[152] = j, e[153] = Ne) : Ne = e[153], Ne;
+});
+qt.displayName = "DSSlider";
+export {
+  qt as D,
+  Qe as L,
+  Et as M,
+  Ht as a,
+  Ye as g,
+  Rt as i,
+  Ft as s,
+  Bt as v
+};

package/chunks/Textarea.BRfh8ykm.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsxs as h, jsx as p, Fragment as ie } from "react/jsx-runtime";
+import { c as I } from "./index.CEyLAtio.js";
+import { forwardRef as le, useState as l, useRef as ce, useEffect as m } from "react";
+import { g as B, p as z } from "./helpers.BbWkXTr3.js";
+import { u as de } from "./useBreakpoint.CMOR9ZOB.js";
+import "./index.CgTHIF3K.js";
+import { DSSystemFeedback as ue } from "../systemfeedback.CLQCbTF6.js";
+import '../assets/Textarea.C4IEEOFR.css';const fe = "ds-textarea_textarea_4ig16_1", be = "ds-textarea_textarea--small_4ig16_9", _e = "ds-textarea_textarea--invalid_4ig16_121", he = "ds-textarea_textarea--resize-auto_4ig16_145", pe = "ds-textarea_root_4ig16_155", me = "ds-textarea_hint_4ig16_164", xe = "ds-textarea_label_4ig16_164", ve = "ds-textarea_label--hidden_4ig16_272", ge = "ds-textarea_label--disabled_4ig16_285", Ce = "ds-textarea_label--required_4ig16_289", Se = "ds-textarea_feedback_4ig16_310", Ie = "ds-textarea_char-count_4ig16_315", Re = "ds-textarea_char-count-announcer_4ig16_331", t = {
+  textarea: fe,
+  textareaSmall: be,
+  textareaInvalid: _e,
+  textareaResizeAuto: he,
+  root: pe,
+  hint: me,
+  label: xe,
+  labelHidden: ve,
+  labelDisabled: ge,
+  labelRequired: Ce,
+  feedback: Se,
+  charCount: Ie,
+  charCountAnnouncer: Re
+}, He = ["medium", "small"], Te = ({
+  id: r,
+  label: d
+}) => {
+  if (!r)
+    throw new Error(B("DSTextarea", 'A unique "id" prop is required. Please add a unique "id" prop to the DSTextarea component.'));
+  if (!d)
+    throw new Error(B("DSTextarea", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSTextarea component. If you don't want to display a label, set hideLabel={true}.`));
+}, ye = le(({
+  id: r,
+  label: d,
+  charsLimitText: M = "Character limit reached",
+  charsRemainingText: O = "Characters remaining:",
+  className: F,
+  defaultValue: X,
+  disabled: R = !1,
+  hint: x,
+  hideLabel: Z = !1,
+  invalid: s = !1,
+  maxLength: e,
+  readonly: T = !1,
+  required: y = !1,
+  resize: u = "vertical",
+  size: G = "medium",
+  systemFeedback: n,
+  value: v,
+  wrapperClassName: J,
+  onChange: A,
+  onInput: D,
+  ...K
+}, f) => {
+  process.env.NODE_ENV !== "production" && Te({
+    id: r,
+    label: d
+  });
+  const [Q, w] = l(X || ""), [i, N] = l(0), [U, E] = l(0), [W, $] = l("off"), [q, g] = l(n), [C, S] = l(s), H = v !== void 0, b = H ? v : Q, o = ce(null), Y = (a) => {
+    o.current = a, typeof f == "function" ? f(a) : f && (f.current = a);
+  }, L = de(Z);
+  m(() => {
+    if (!e || e <= 0)
+      return;
+    i >= e * 0.8 ? $("polite") : $("off");
+    const a = setTimeout(() => {
+      E(e - i || 0);
+    }, 1e3);
+    return () => clearTimeout(a);
+  }, [i]), m(() => {
+    w(b || ""), c(), e && e > 0 && (N(b.toString().length || 0), E(e - b.toString().length || 0));
+  }, [v]), m(() => {
+    s && n ? (g(n), S(s)) : !s && e && e >= 0 && i >= e ? (S(!0), g(M)) : (g(n), S(s));
+  }, [s, C, n, i]), m(() => {
+    if (u === "auto")
+      return c(), window.addEventListener("resize", c), () => window.removeEventListener("resize", c);
+  }, [u, o.current]);
+  const ee = I(t.root, J), ae = I(t.textarea, F, {
+    // small textarea
+    [t.textareaSmall]: G === "small",
+    // invalid state
+    [t.textareaInvalid]: C,
+    // resize handling
+    [t.textareaResizeAuto]: u === "auto"
+  }), te = I(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: L,
+    [t.labelDisabled]: R,
+    [t.labelRequired]: y
+  }), V = `${r}-label`, k = `${r}-feedback`, P = `${r}-hint`, j = `${r}-char-count-announcer`, re = x ? ` ${P}` : "", c = () => {
+    if (o.current && u === "auto") {
+      o.current.style.height = "auto";
+      const a = z(o.current.scrollHeight), _ = z(2);
+      o.current.style.height = `${// We need to add 2px (border-top & border-bottom) to the scrollHeight to prevent the textarea
+      // from jumping as soon as the user starts typing.
+      a + _}rem`;
+    }
+  }, se = () => {
+    const a = [];
+    return e && e > 0 && a.push(j), s && n && a.push(k), a.length > 0 ? a.join(" ") : void 0;
+  }, oe = (a) => {
+    var _;
+    D && D(a), e && e > 0 && N(((_ = o.current) == null ? void 0 : _.value.length) || 0), c();
+  }, ne = (a) => {
+    A && A(a), H || w(a.target.value);
+  };
+  return /* @__PURE__ */ h("div", { className: ee, children: [
+    /* @__PURE__ */ p("label", { className: te, id: V, htmlFor: r, children: d }),
+    x && /* @__PURE__ */ p("div", { className: t.hint, id: P, children: x }),
+    C && q && /* @__PURE__ */ p(ue, { className: t.feedback, message: q, type: "invalid", id: k }),
+    /* @__PURE__ */ p(
+      "textarea",
+      {
+        className: ae,
+        id: r,
+        ...K,
+        ref: Y,
+        "aria-labelledby": `${V}${re}`,
+        "aria-describedby": se(),
+        "aria-invalid": s,
+        "aria-disabled": T,
+        maxLength: e,
+        readOnly: T,
+        required: y,
+        disabled: R,
+        value: b,
+        defaultValue: void 0,
+        rows: void 0,
+        cols: void 0,
+        onChange: ne,
+        onInput: oe
+      }
+    ),
+    e !== void 0 && e > 0 && /* @__PURE__ */ h(ie, { children: [
+      /* @__PURE__ */ h("div", { className: t.charCount, "aria-hidden": "true", children: [
+        i,
+        "/",
+        e
+      ] }),
+      /* @__PURE__ */ h(
+        "div",
+        {
+          className: t.charCountAnnouncer,
+          id: j,
+          "aria-live": W,
+          "aria-atomic": "true",
+          children: [
+            O,
+            " ",
+            U
+          ]
+        }
+      )
+    ] })
+  ] });
+});
+ye.displayName = "DSTextarea";
+export {
+  ye as D,
+  He as T,
+  Te as v
+};

package/combobox.pMk_oggm.js

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

package/components/Combobox/Combobox.d.ts

@@ -4,6 +4,10 @@ type CommonComboboxProps = {
      * @default false
      */
     dropdownOnFocus?: boolean;
+    /** Selects a focused value in the MenuList when the Tab key is pressed.
+     * @default true
+     */
+    tabSelectsValue?: boolean;
 };
 export type ComboboxProps = Omit<(CustomReactSelectProps<false> & {
     /** Defines if only one option or multiple options can be selected.