@stihl-design-system/components 1.0.0-RC.46 → 1.0.0-RC.48

package/chunks/Dialog.guuxflWL.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as n, jsxs as E } from "react/jsx-runtime";
+import { c as r } from "./index.DQOqod3i.js";
+import { useRef as g, useState as F, useEffect as b } from "react";
+import { D as W } from "./Button.CCol--xy.js";
+import { g as k } from "./helpers.CexwVao7.js";
+import '../assets/Dialog.6AkQo8ew.css';const x = "ds-dialog_root_12p4q_5", R = "ds-dialog_content-wrapper_12p4q_184", y = "ds-dialog_content-wrapper--no-footer_12p4q_190", z = "ds-dialog_close-button_12p4q_198", L = "ds-dialog_header_12p4q_211", M = "ds-dialog_content_12p4q_184", j = "ds-dialog_footer_12p4q_213", H = "ds-dialog_header--scrollable_12p4q_234", I = "ds-dialog_header--close-button_12p4q_243", O = "ds-dialog_content--no-footer_12p4q_256", P = "ds-dialog_footer--scrollable_12p4q_291", o = {
+  root: x,
+  contentWrapper: R,
+  contentWrapperNoFooter: y,
+  closeButton: z,
+  header: L,
+  content: M,
+  footer: j,
+  headerScrollable: H,
+  headerCloseButton: I,
+  contentNoFooter: O,
+  footerScrollable: P
+}, T = ({
+  tabIndex: s
+}) => {
+  if (s || s === 0)
+    throw new Error(k("DSDialog", "Do not pass the tabindex property to the DSDialog component as it is not interactive and does not receive focus. The DSDialogs contents, including the close button contained in the DSDialog, can receive focus and be interactive."));
+}, Q = ({
+  children: s,
+  className: m,
+  closeButtonProps: D,
+  disableBackdropClose: S = !1,
+  footer: c,
+  header: v,
+  hideCloseButton: a = !1,
+  isOpen: i = !1,
+  onClose: l,
+  ...d
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    const {
+      tabIndex: e
+    } = d;
+    T({
+      tabIndex: e
+    });
+  }
+  const {
+    label: N = "Close dialog",
+    ...q
+  } = D || {}, t = g(null), p = g(null), [u, B] = F(!1);
+  b(() => {
+    const e = p.current;
+    if (e) {
+      const _ = () => {
+        B(e.scrollHeight > e.clientHeight);
+      };
+      _();
+      const h = new ResizeObserver(_);
+      return h.observe(e), () => {
+        h.disconnect();
+      };
+    }
+  }, []), b(() => {
+    const e = t.current;
+    if (e)
+      return e.addEventListener("close", f), i ? e.showModal() : e.close(), () => {
+        e.removeEventListener("close", f);
+      };
+  }, [i, l]);
+  const f = () => {
+    l && l();
+  }, w = (e) => {
+    S || t.current && e.target === t.current && t.current.close();
+  }, C = () => {
+    t.current && t.current.close();
+  };
+  return /* @__PURE__ */ n("dialog", { ...d, ref: t, className: r(o.root, m), onMouseDown: (e) => w(e), "aria-modal": "true", children: /* @__PURE__ */ E("div", { className: r(o.contentWrapper, {
+    [o.contentWrapperNoFooter]: !c
+  }), children: [
+    !a && /* @__PURE__ */ n(W, { ...q, className: o.closeButton, hideLabel: !0, iconName: "cross", size: "small", type: "button", variant: "ghost", onClick: () => C(), children: N }),
+    /* @__PURE__ */ n("header", { className: r(o.header, {
+      [o.headerCloseButton]: !a,
+      [o.headerScrollable]: u
+    }), children: v }),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        ref: p,
+        className: r(o.content, {
+          [o.contentNoFooter]: !c
+        }),
+        tabIndex: 0,
+        children: s
+      }
+    ),
+    c && /* @__PURE__ */ n("footer", { className: r(o.footer, {
+      [o.footerScrollable]: u
+    }), children: c })
+  ] }) });
+};
+export {
+  Q as D,
+  T as v
+};

package/chunks/Drawer.CjUZu6GW.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as o, jsxs as F } from "react/jsx-runtime";
+import { c as n } from "./index.DQOqod3i.js";
+import { useRef as w, useState as R, useEffect as m } from "react";
+import { D as k } from "./Button.CCol--xy.js";
+import { g as x } from "./helpers.CexwVao7.js";
+import '../assets/Drawer.CDOlX809.css';const I = "ds-drawer_root_1dt5r_10", O = "ds-drawer_root--end_1dt5r_68", y = "ds-drawer_content-wrapper_1dt5r_187", z = "ds-drawer_content-wrapper--no-footer_1dt5r_193", L = "ds-drawer_close-button_1dt5r_196", M = "ds-drawer_header_1dt5r_209", P = "ds-drawer_content_1dt5r_187", j = "ds-drawer_footer_1dt5r_211", H = "ds-drawer_header--scrollable_1dt5r_232", T = "ds-drawer_header--close-button_1dt5r_241", A = "ds-drawer_content--no-footer_1dt5r_283", V = "ds-drawer_footer--scrollable_1dt5r_290", r = {
+  root: I,
+  rootEnd: O,
+  contentWrapper: y,
+  contentWrapperNoFooter: z,
+  closeButton: L,
+  header: M,
+  content: P,
+  footer: j,
+  headerScrollable: H,
+  headerCloseButton: T,
+  contentNoFooter: A,
+  footerScrollable: V
+}, X = ["start", "end"], q = ({
+  tabIndex: s
+}) => {
+  if (s || s === 0)
+    throw new Error(x("DSDrawer", "Do not pass the tabindex property to the DSDrawer component as it is not interactive and does not receive focus. The DSDrawers contents, including the close button contained in the DSDrawer, can receive focus and be interactive."));
+}, Y = ({
+  children: s,
+  className: b,
+  closeButtonProps: D,
+  disableBackdropClose: S = !1,
+  footer: c,
+  header: N,
+  hideCloseButton: l = !1,
+  position: v = "start",
+  isOpen: d = !1,
+  onClose: a,
+  ...i
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    const {
+      tabIndex: e
+    } = i;
+    q({
+      tabIndex: e
+    });
+  }
+  const {
+    label: E = "Close modal",
+    ...g
+  } = D || {}, t = w(null), _ = w(null), [u, B] = R(!1);
+  m(() => {
+    const e = _.current;
+    if (e) {
+      const h = () => {
+        B(e.scrollHeight > e.clientHeight);
+      };
+      h();
+      const p = new ResizeObserver(h);
+      return p.observe(e), () => {
+        p.disconnect();
+      };
+    }
+  }, []), m(() => {
+    const e = t.current;
+    if (e)
+      return e.addEventListener("close", f), d ? e.showModal() : e.close(), () => {
+        e.removeEventListener("close", f);
+      };
+  }, [d, a]);
+  const f = () => {
+    a && a();
+  }, C = (e) => {
+    S || t.current && e.target === t.current && t.current.close();
+  }, W = () => {
+    t.current && t.current.close();
+  };
+  return /* @__PURE__ */ o("dialog", { ...i, ref: t, className: n(r.root, {
+    [r.rootEnd]: v === "end"
+  }), onMouseDown: (e) => C(e), "aria-modal": "true", children: /* @__PURE__ */ F("div", { className: n(r.contentWrapper, b, {
+    [r.contentWrapperNoFooter]: !c
+  }), children: [
+    !l && /* @__PURE__ */ o(k, { ...g, className: r.closeButton, hideLabel: !0, iconName: "cross", size: "small", type: "button", variant: "ghost", onClick: () => W(), children: E }),
+    /* @__PURE__ */ o("header", { className: n(r.header, {
+      [r.headerCloseButton]: !l,
+      [r.headerScrollable]: u
+    }), children: N }),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        ref: _,
+        className: n(r.content, {
+          [r.contentNoFooter]: !c
+        }),
+        tabIndex: 0,
+        children: s
+      }
+    ),
+    c && /* @__PURE__ */ o("footer", { className: n(r.footer, {
+      [r.footerScrollable]: u
+    }), children: c })
+  ] }) });
+};
+export {
+  X as D,
+  Y as a,
+  q as v
+};

package/chunks/Fieldset.BBMuLKps.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsxs as a, jsx as t, Fragment as H } from "react/jsx-runtime";
+import { c as _ } from "./index.DQOqod3i.js";
+import "react";
+import { u as L } from "./useBreakpoint.1txsny17.js";
+import { Asterisk as F } from "../asterisk.Dwtdwpkq.js";
+import { DSHeading as M } from "../heading.BHSklXho.js";
+import { D as x } from "./Popover.CxZZ_y1Z.js";
+import { D as B } from "./SystemFeedback.DhWcYjnu.js";
+import { g as u } from "./helpers.CexwVao7.js";
+import '../assets/Fieldset.BbLGXCWa.css';const E = "ds-fieldset_root_z6gah_1", T = "ds-fieldset_root--dark_z6gah_115", A = "ds-fieldset_child-wrapper_z6gah_220", I = "ds-fieldset_legend-wrapper_z6gah_227", U = "ds-fieldset_legend_z6gah_227", O = "ds-fieldset_legend--hidden_z6gah_238", V = "ds-fieldset_legend--utility--m_z6gah_253", $ = "ds-fieldset_description_z6gah_265", G = "ds-fieldset_description--small_z6gah_279", J = "ds-fieldset_system-feedback_z6gah_283", e = {
+  root: E,
+  rootDark: T,
+  childWrapper: A,
+  legendWrapper: I,
+  legend: U,
+  legendHidden: O,
+  legendUtilityM: V,
+  description: $,
+  descriptionSmall: G,
+  systemFeedback: J
+}, K = ({
+  description: l,
+  hideLegend: c,
+  id: s,
+  legend: p,
+  popoverContent: i,
+  systemFeedback: g
+}) => {
+  if (!s && (l || g))
+    throw new Error(u("DSFieldset", 'A unique "id" prop is required when providing the description or systemFeedback property. Please add a unique "id" prop to the DSFieldset component.'));
+  if (!p)
+    throw new Error(u("DSFieldset", "The legend prop is required. Please add the legend prop to the DSFieldset component."));
+  c && i && console.warn(u("DSFieldset", 'Setting "hideLegend" and "popoverContent" at the same time is not supported. The popover info button is part of the legend and will be hidden along with it. Please remove either "hideLegend" or "popoverContent".'));
+}, de = (l) => {
+  const {
+    children: c,
+    legend: s,
+    className: p,
+    description: i,
+    disabled: g = !1,
+    hideLegend: D = !1,
+    id: m,
+    invalid: h = !1,
+    popoverContent: f,
+    popoverInfoButtonProps: z,
+    required: b = !1,
+    systemFeedback: d,
+    theme: o = "light",
+    ...w
+  } = l, N = L(D);
+  process.env.NODE_ENV !== "production" && K({
+    description: i,
+    hideLegend: D,
+    id: m,
+    legend: s,
+    popoverContent: f,
+    systemFeedback: d
+  });
+  let r, v, y;
+  const n = typeof s == "object" && s !== void 0;
+  n && ({
+    headingSize: r,
+    headingTag: v,
+    headingText: y
+  } = s);
+  const S = `${m}-feedback`, k = `${m}-description`, P = [h && d && S, i && k].filter(Boolean).join(" ") || void 0, C = !n || r === "small" || r === "small-uppercase", W = _(e.root, p, {
+    [e.rootDark]: o === "dark"
+  }), j = _(e.legend, {
+    [e.legendHidden]: N,
+    [e.legendUtilityM]: !n
+  }), q = _(e.description, {
+    [e.descriptionSmall]: C
+  });
+  return /* @__PURE__ */ a("fieldset", { className: W, disabled: g, ...w, "aria-invalid": h, "aria-describedby": P, children: [
+    /* @__PURE__ */ a("legend", { className: j, children: [
+      /* @__PURE__ */ t("span", { className: e.legendWrapper, children: n ? /* @__PURE__ */ a(M, { tag: v, size: r, theme: o, children: [
+        y,
+        b && /* @__PURE__ */ t(F, {})
+      ] }) : /* @__PURE__ */ a(H, { children: [
+        s,
+        b && /* @__PURE__ */ t(F, {})
+      ] }) }),
+      f && /* @__PURE__ */ t(x, { placement: "top", defaultAnchorButtonProps: z, theme: o, children: f })
+    ] }),
+    i && /* @__PURE__ */ t("span", { id: k, className: q, children: i }),
+    h && d && /* @__PURE__ */ t(B, { id: S, variant: "error", message: d, theme: o, className: e.systemFeedback }),
+    /* @__PURE__ */ t("div", { className: e.childWrapper, children: c })
+  ] });
+};
+export {
+  de as D,
+  K as v
+};

package/chunks/Flag.CbQYBzVC.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs as y, jsx as v } from "react/jsx-runtime";
+import { d as L } from "./index.cKLI89Eg.js";
+import { c as S } from "./index.DQOqod3i.js";
+import { D as w } from "./Icon.DYtaQgbw.js";
+import { g as D } from "./helpers.CexwVao7.js";
+import '../assets/Flag.qP1xbolI.css';const O = "ds-flag_root_1r5js_1", P = "ds-flag_root--color-status-info_1r5js_27", R = "ds-flag_root--color-status-warning_1r5js_30", b = "ds-flag_root--color-status-negative_1r5js_33", N = "ds-flag_root--color-status-positive_1r5js_36", A = "ds-flag_root--color-promo-highlight_1r5js_39", G = "ds-flag_root--color-promo-neutral_1r5js_42", E = "ds-flag_root--color-grey-light_1r5js_46", F = "ds-flag_root--color-yellow-light_1r5js_49", x = "ds-flag_root--color-red-light_1r5js_52", $ = "ds-flag_root--color-green-light_1r5js_55", T = "ds-flag_root--color-orange-base_1r5js_58", p = {
+  root: O,
+  "root--color-status-info": "ds-flag_root--color-status-info_1r5js_27",
+  rootColorStatusInfo: P,
+  "root--color-status-warning": "ds-flag_root--color-status-warning_1r5js_30",
+  rootColorStatusWarning: R,
+  "root--color-status-negative": "ds-flag_root--color-status-negative_1r5js_33",
+  rootColorStatusNegative: b,
+  "root--color-status-positive": "ds-flag_root--color-status-positive_1r5js_36",
+  rootColorStatusPositive: N,
+  "root--color-promo-highlight": "ds-flag_root--color-promo-highlight_1r5js_39",
+  rootColorPromoHighlight: A,
+  "root--color-promo-neutral": "ds-flag_root--color-promo-neutral_1r5js_42",
+  rootColorPromoNeutral: G,
+  "root--color-grey-light": "ds-flag_root--color-grey-light_1r5js_46",
+  rootColorGreyLight: E,
+  "root--color-yellow-light": "ds-flag_root--color-yellow-light_1r5js_49",
+  rootColorYellowLight: F,
+  "root--color-red-light": "ds-flag_root--color-red-light_1r5js_52",
+  rootColorRedLight: x,
+  "root--color-green-light": "ds-flag_root--color-green-light_1r5js_55",
+  rootColorGreenLight: $,
+  "root--color-orange-base": "ds-flag_root--color-orange-base_1r5js_58",
+  rootColorOrangeBase: T
+}, Y = ["status-info", "status-warning", "status-negative", "status-positive", "promo-highlight", "promo-neutral"], U = ["grey-light", "yellow-light", "red-light", "green-light", "orange-base"], j = {
+  "grey-light": "status-info",
+  "yellow-light": "status-warning",
+  "red-light": "status-negative",
+  "green-light": "status-positive",
+  "orange-base": "promo-highlight"
+}, B = ["promo-neutral"], q = (d) => {
+  const o = L.c(24);
+  let l, e, r, s, a, n;
+  o[0] !== d ? ({
+    children: l,
+    className: e,
+    color: n,
+    iconName: r,
+    iconSource: s,
+    ...a
+  } = d, o[0] = d, o[1] = l, o[2] = e, o[3] = r, o[4] = s, o[5] = a, o[6] = n) : (l = o[1], e = o[2], r = o[3], s = o[4], a = o[5], n = o[6]);
+  const t = n === void 0 ? "status-info" : n;
+  typeof t == "string" && t in j && console.warn(D("DSFlag", `The color "${t}" is deprecated and will be removed in the next stable release. Please use "${j[t]}" instead.`));
+  const i = typeof t == "string" && p[`root--color-${t}`];
+  let c;
+  o[7] !== t || o[8] !== i ? (c = i ? {} : {
+    backgroundColor: t
+  }, o[7] = t, o[8] = i, o[9] = c) : c = o[9];
+  const f = c, u = p[`root--color-${t}`];
+  let _;
+  o[10] !== e || o[11] !== i || o[12] !== u ? (_ = S(p.root, e, {
+    [u]: i
+  }), o[10] = e, o[11] = i, o[12] = u, o[13] = _) : _ = o[13];
+  const C = _, m = B.includes(t) ? "dark" : "light";
+  let g;
+  o[14] !== r || o[15] !== s || o[16] !== m ? (g = (r || s) && /* @__PURE__ */ v(w, { name: r, theme: m, source: s, "aria-hidden": "true" }), o[14] = r, o[15] = s, o[16] = m, o[17] = g) : g = o[17];
+  let h;
+  return o[18] !== l || o[19] !== f || o[20] !== a || o[21] !== C || o[22] !== g ? (h = /* @__PURE__ */ y("span", { className: C, style: f, ...a, children: [
+    g,
+    l
+  ] }), o[18] = l, o[19] = f, o[20] = a, o[21] = C, o[22] = g, o[23] = h) : h = o[23], h;
+};
+export {
+  U as D,
+  Y as F,
+  j as a,
+  q as b
+};