@stihl-design-system/components 1.0.0-RC.32 → 1.0.0-RC.34

package/chunks/Popover.Bb0Pjmvg.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx as m, jsxs as O, Fragment as q } from "react/jsx-runtime";
+import { d as H } from "./index.D-sRdssb.js";
+import { useState as J, useRef as K, useMemo as Q, createContext as X, forwardRef as I, isValidElement as Y, cloneElement as Z, useContext as ee } from "react";
+import { u as oe, o as te, i as re, s as se, j as ne, a as ae, b as ce, c as ie, d as le, e as j, f as pe, k as de, F as ue, h as he } from "./floating-ui.react.3FjeMiuN.js";
+import { c as k } from "./index.DL9mof6u.js";
+import { g as b, c as M } from "./helpers.CexwVao7.js";
+import { D as ve } from "./Button.DCZgBNmA.js";
+import { a as fe } from "./floating-ui.dom.BT8pKtCQ.js";
+import '../assets/Popover.CXyUaXiO.css';const me = "ds-popover_popover_xg81f_5", ge = "ds-popover_popover--no-arrow_xg81f_64", we = "ds-popover_popover--variant-grey_xg81f_67", Pe = "ds-popover_arrow_xg81f_71", De = "ds-popover_arrow--variant-grey_xg81f_90", Se = "ds-popover_default-anchor_xg81f_107", _ = {
+  popover: me,
+  popoverNoArrow: ge,
+  popoverVariantGrey: we,
+  arrow: Pe,
+  arrowVariantGrey: De,
+  defaultAnchor: Se
+}, Ae = ({
+  initialOpen: t = !1,
+  placement: o = "bottom",
+  isOpen: e,
+  popoverOffset: r = 6,
+  showArrow: a = !0,
+  variant: l = "default",
+  defaultAnchorButtonProps: p,
+  onOpenChange: d
+} = {}) => {
+  const [s, h] = J(t), c = e ?? s, n = d ?? h, i = K(null), u = oe({
+    placement: o,
+    open: c,
+    strategy: "fixed",
+    onOpenChange: n,
+    whileElementsMounted: fe,
+    middleware: [te(r + (a ? 7 : 0)), re({
+      // default configuration taken from https://floating-ui.com/docs/flip
+      crossAxis: o.includes("-"),
+      fallbackAxisSideDirection: "end",
+      padding: r
+    }), se({
+      padding: r
+    }), ...a ? [ne({
+      element: i
+    })] : []]
+  }), v = u.context, C = ae(v, {
+    enabled: !0
+  }), w = ce(v), E = ie(v), P = le([C, w, E]);
+  return Q(() => ({
+    open: c,
+    popoverOffset: r,
+    setOpen: n,
+    arrowRef: i,
+    showArrow: a,
+    defaultAnchorButtonProps: p,
+    variant: l,
+    ...P,
+    ...u
+  }), [c, r, n, i, a, p, l, P, u]);
+}, xe = ({
+  children: t,
+  hasContent: o,
+  hasAnchor: e
+}) => {
+  if (!t)
+    throw new Error(b("DSPopover", "A DSPopover must have children."));
+  if (!o && e)
+    throw new Error(b("DSPopover", "A DSPopover must either have no child components for its most basic usage or have both a <DSPopover.Content> and <DSPopover.Anchor> component as a child. <DSPopover.Content> is missing! Please add it to the children of DSPopover."));
+  if (!e && o)
+    throw new Error(b("DSPopover", "A DSPopover must either have no child components for its most basic usage or have both a <DSPopover.Content> and <DSPopover.Anchor> component as a child. <DSPopover.Anchor> is missing! Please add it to the children of DSPopover."));
+}, ye = ({
+  showArrow: t,
+  variant: o
+}) => {
+  o === "grey" && t === !1 && console.warn(b("DSPopover", "The 'grey' variant is only available when 'showArrow' is true. To use the 'grey' variant, please ensure that 'showArrow' is set to true."));
+}, B = X(null), U = () => {
+  const t = ee(B);
+  if (t == null)
+    throw new Error(b("DSPopover", "Components like DSPopover.Anchor or DSPopover.Content must be wrapped in <DSPopover />."));
+  return t;
+}, f = (t) => {
+  const o = H.c(11), {
+    children: e,
+    ...r
+  } = t, a = Ae({
+    ...r
+  }), l = M(e, f.Content), p = M(e, f.Anchor);
+  process.env.NODE_ENV !== "production" && (xe({
+    children: e,
+    hasContent: l,
+    hasAnchor: p
+  }), ye({
+    showArrow: r.showArrow,
+    variant: r.variant
+  }));
+  const d = !l && !p && e !== null;
+  let s;
+  o[0] !== e || o[1] !== d ? (s = d ? /* @__PURE__ */ O(q, { children: [
+    /* @__PURE__ */ m(f.Anchor, {}),
+    /* @__PURE__ */ m(f.Content, { children: e })
+  ] }) : e, o[0] = e, o[1] = d, o[2] = s) : s = o[2];
+  const h = s, c = l || d, n = p || d;
+  let i;
+  o[3] !== a || o[4] !== c || o[5] !== n ? (i = {
+    ...a,
+    hasContent: c,
+    hasAnchor: n
+  }, o[3] = a, o[4] = c, o[5] = n, o[6] = i) : i = o[6];
+  const g = i;
+  let u;
+  return o[7] !== h || o[8] !== g || o[9] !== r ? (u = /* @__PURE__ */ m(B.Provider, { value: g, ...r, children: h }), o[7] = h, o[8] = g, o[9] = r, o[10] = u) : u = o[10], u;
+}, W = I(({
+  children: t,
+  ...o
+}, e) => {
+  const {
+    context: r,
+    defaultAnchorButtonProps: a,
+    refs: l,
+    hasAnchor: p,
+    getReferenceProps: d
+  } = U(), {
+    label: s = "Toggle popover",
+    ...h
+  } = a || {}, c = t ? t?.ref : null, n = j([l.setReference, e, c]);
+  return p && t && Y(t) ? Z(t, d({
+    ref: n,
+    ...o,
+    ...t.props,
+    "data-state": r.open ? "open" : "closed"
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  })) : /* @__PURE__ */ m(
+    ve,
+    {
+      ...h,
+      ref: n,
+      type: "button",
+      "data-state": r.open ? "open" : "closed",
+      ...d(o),
+      size: "small",
+      hideLabel: !0,
+      iconName: "circle-info-inverted",
+      variant: "ghost",
+      className: _.defaultAnchor,
+      children: t ?? s
+    }
+  );
+});
+W.displayName = "DSPopover.Anchor";
+const $ = I((t, o) => {
+  const e = H.c(33), {
+    style: r,
+    className: a,
+    classNameArrow: l,
+    children: p,
+    ...d
+  } = t, {
+    context: s,
+    refs: h,
+    floatingStyles: c,
+    showArrow: n,
+    variant: i,
+    getFloatingProps: g,
+    arrowRef: u
+  } = U();
+  let v;
+  e[0] !== o || e[1] !== h.setFloating ? (v = [h.setFloating, o], e[0] = o, e[1] = h.setFloating, e[2] = v) : v = e[2];
+  const C = j(v);
+  let w;
+  e[3] === Symbol.for("react.memo_cache_sentinel") ? (w = {
+    duration: {
+      open: 250,
+      close: 250
+    }
+  }, e[3] = w) : w = e[3];
+  const {
+    isMounted: E,
+    status: P
+  } = pe(s, w);
+  if (!E)
+    return null;
+  const R = he, F = ue, L = !1;
+  let D;
+  e[4] !== c || e[5] !== r ? (D = {
+    ...c,
+    ...r
+  }, e[4] = c, e[5] = r, e[6] = D) : D = e[6];
+  const V = !n, G = i === "grey" && n;
+  let S;
+  e[7] !== a || e[8] !== V || e[9] !== G ? (S = k(_.popover, a, {
+    [_.popoverNoArrow]: V,
+    [_.popoverVariantGrey]: G
+  }), e[7] = a, e[8] = V, e[9] = G, e[10] = S) : S = e[10];
+  const z = s.placement, T = g(d);
+  let A;
+  e[11] !== u || e[12] !== l || e[13] !== s || e[14] !== n || e[15] !== i ? (A = n && /* @__PURE__ */ m(de, { ref: u, context: s, className: k(_.arrow, l, {
+    [_.arrowVariantGrey]: i === "grey" && n
+  }), strokeWidth: 1, tipRadius: 1, width: 16, height: 7 }), e[11] = u, e[12] = l, e[13] = s, e[14] = n, e[15] = i, e[16] = A) : A = e[16];
+  let x;
+  e[17] !== p || e[18] !== s.placement || e[19] !== C || e[20] !== P || e[21] !== A || e[22] !== D || e[23] !== S || e[24] !== T ? (x = /* @__PURE__ */ O("div", { ref: C, style: D, className: S, "data-placement": z, "data-status": P, ...T, children: [
+    A,
+    p
+  ] }), e[17] = p, e[18] = s.placement, e[19] = C, e[20] = P, e[21] = A, e[22] = D, e[23] = S, e[24] = T, e[25] = x) : x = e[25];
+  let y;
+  e[26] !== F || e[27] !== s || e[28] !== x ? (y = /* @__PURE__ */ m(F, { context: s, modal: L, children: x }), e[26] = F, e[27] = s, e[28] = x, e[29] = y) : y = e[29];
+  let N;
+  return e[30] !== R || e[31] !== y ? (N = /* @__PURE__ */ m(R, { children: y }), e[30] = R, e[31] = y, e[32] = N) : N = e[32], N;
+});
+$.displayName = "DSPopover.Content";
+f.Anchor = W;
+f.Content = $;
+f.displayName = "DSPopover";
+export {
+  f as D,
+  ye as a,
+  Ae as u,
+  xe as v
+};

package/chunks/{RadioGroup.DeTz3c19.js → RadioGroup.CexC4v2Z.js}

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as F } from "react/jsx-runtime";
-import { d as $ } from "./index.CgTHIF3K.js";
-import { c as J } from "./index.CEyLAtio.js";
+import { d as $ } from "./index.D-sRdssb.js";
+import { c as J } from "./index.DL9mof6u.js";
 import { forwardRef as K, useState as Q } from "react";
-import { D as W } from "./Fieldset.D7cLR5ze.js";
-import { DSRadio as X } from "../radio.7_N_alaS.js";
-import { g as m, r as V } from "./helpers.BbWkXTr3.js";
+import { D as W } from "./Fieldset.DiMtr6Vw.js";
+import { DSRadio as X } from "../radio.DHUfSPai.js";
+import { g as m, r as V } from "./helpers.CexwVao7.js";
 import '../assets/RadioGroup.CM2mYOzc.css';const Y = "ds-radio-group_root_12fot_1", Z = "ds-radio-group_root--horizontal_12fot_9", oo = "ds-radio-group_root--invalid_12fot_12", B = {
   root: Y,
   rootHorizontal: Z,

package/chunks/Select.BEIdNMML.js

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