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

package/chunks/Button.Cn5yg7dG.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsxs as O, jsx as c } from "react/jsx-runtime";
+import { c as p } from "./index.DL9mof6u.js";
+import { forwardRef as T } from "react";
+import { u as r } from "./useBreakpoint.1txsny17.js";
+import { D as F } from "./Icon.CDLyB7Pv.js";
+import { DSSpinner as L } from "../spinner.C9qCeq0R.js";
+import { Tooltip as k } from "../tooltip.Cj3AvYgB.js";
+import { g as a } from "./helpers.CexwVao7.js";
+import "./index.D-sRdssb.js";
+import '../assets/Button.CmeGVEAY.css';const C = "ds-button_root_146u3_1", A = "ds-button_root--highlight_146u3_75", E = "ds-button_root--dark-highlight_146u3_75", P = "ds-button_root--filled_146u3_151", x = "ds-button_root--outline_146u3_179", V = "ds-button_root--ghost_146u3_206", j = "ds-button_root--ghost-flush_146u3_231", R = "ds-button_root--small_146u3_237", U = "ds-button_root--navigation_146u3_317", M = "ds-button_root--navigation--stretched_146u3_393", Z = "ds-button_root--navigation--stretched--icon-left_146u3_396", q = "ds-button_root--dark-filled_146u3_399", J = "ds-button_root--dark-outline_146u3_456", K = "ds-button_root--dark-ghost_146u3_512", Q = "ds-button_root--dark-ghost-flush_146u3_566", W = "ds-button_root--stretched_146u3_641", X = "ds-button_root--icon-left_146u3_644", Y = "ds-button_root--icon-only_146u3_647", $ = "ds-button_root--icon-only-small_146u3_656", z = "ds-button_icon--navigation_146u3_672", oo = "ds-button_icon--hidden_146u3_679", to = "ds-button_label--hidden_146u3_683", no = "ds-button_label--loading_146u3_695", eo = "ds-button_loader_146u3_699", o = {
+  root: C,
+  rootHighlight: A,
+  rootDarkHighlight: E,
+  rootFilled: P,
+  rootOutline: x,
+  rootGhost: V,
+  rootGhostFlush: j,
+  rootSmall: R,
+  rootNavigation: U,
+  rootNavigationStretched: M,
+  rootNavigationStretchedIconLeft: Z,
+  rootDarkFilled: q,
+  rootDarkOutline: J,
+  rootDarkGhost: K,
+  rootDarkGhostFlush: Q,
+  rootStretched: W,
+  rootIconLeft: X,
+  rootIconOnly: Y,
+  rootIconOnlySmall: $,
+  iconNavigation: z,
+  iconHidden: oo,
+  labelHidden: to,
+  labelLoading: no,
+  loader: eo
+}, bo = ["medium", "small"], po = ["highlight", "filled", "outline", "ghost", "navigation"], ro = ({
+  hideLabel: f,
+  iconName: m,
+  iconSource: b,
+  isFlush: d,
+  size: s,
+  stretched: l,
+  theme: u,
+  variant: e
+}) => {
+  if (e === "navigation" && (s === "small" && console.warn(a("DSButton", 'A "size" prop should not be used in combination with variant="navigation". Please remove the "size" prop.')), u === "dark"))
+    throw new Error(a("DSButton", 'A DSButton with variant="navigation" does not support theme="dark". Please remove the "theme" prop.'));
+  e !== "ghost" && d ? console.warn(a("DSButton", 'The "isFlush" prop only has an effect when used with variant="ghost". Please remove the "isFlush" prop or set variant="ghost".')) : e === "ghost" && d && l && console.warn(a("DSButton", 'The "stretched" and "isFlush" props do not have an effect when used together. Please remove one of them.')), f && (!m && !b && console.warn(a("DSButton", 'The "hideLabel" prop is set to true but no icon is provided via "iconName" or "iconSource". Please provide an icon to ensure the button is not empty when the label is hidden.')), l && console.warn(a("DSButton", 'The "stretched" and "hideLabel" props do not have an effect when used together. Please remove one of them.')));
+}, so = T(({
+  children: f,
+  aria: m,
+  className: b,
+  disabled: d = !1,
+  hideLabel: s = !1,
+  iconName: l,
+  iconPosition: u = "left",
+  iconSource: e,
+  isFlush: h = !1,
+  loading: i = !1,
+  size: _ = "medium",
+  stretched: g = !1,
+  theme: n = "light",
+  tooltip: D,
+  variant: t = "filled",
+  onClick: S,
+  ...w
+}, I) => {
+  process.env.NODE_ENV !== "production" && ro({
+    hideLabel: r(s),
+    iconName: l,
+    iconSource: e,
+    isFlush: h,
+    size: _,
+    stretched: g,
+    theme: n,
+    variant: t
+  });
+  const y = p(o.root, b, {
+    // variant
+    [o.rootFilled]: t === "filled",
+    [o.rootHighlight]: t === "highlight",
+    [o.rootOutline]: t === "outline",
+    [o.rootGhost]: t === "ghost" && h !== !0,
+    [o.rootNavigation]: t === "navigation",
+    [o.rootNavigationStretched]: t === "navigation" && r(g) && u === "right",
+    [o.rootNavigationStretchedIconLeft]: t === "navigation" && r(g) && u === "left",
+    // isFlush
+    [o.rootGhostFlush]: t === "ghost" && h === !0,
+    // dark theme
+    [o.rootDarkFilled]: n === "dark" && t === "filled",
+    [o.rootDarkHighlight]: n === "dark" && t === "highlight",
+    [o.rootDarkOutline]: n === "dark" && t === "outline",
+    [o.rootDarkGhost]: n === "dark" && t === "ghost" && h !== !0,
+    // dark isFlush
+    [o.rootDarkGhostFlush]: n === "dark" && t === "ghost" && h === !0,
+    // size
+    [o.rootSmall]: _ === "small" || t === "navigation",
+    // stretched
+    [o.rootStretched]: r(g),
+    // icon position
+    [o.rootIconLeft]: u === "left",
+    // icon only
+    [o.rootIconOnly]: r(s) && _ === "medium" && t !== "navigation",
+    [o.rootIconOnlySmall]: r(s) && _ === "small" && t !== "navigation"
+  }), B = p(o.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [o.labelHidden]: r(s) && t !== "navigation",
+    // set label opacity to 0 when loading to prevent button size from changing
+    [o.labelLoading]: i
+  }), G = p({
+    [o.iconNavigation]: t === "navigation",
+    // set icon opacity to 0 when loading to prevent button size from changing
+    [o.iconHidden]: i
+  }), H = n === "light" && t === "filled" || n === "dark" && t === "outline" || n === "dark" && t === "ghost" ? "dark" : "light", v = /* @__PURE__ */ O("button", { className: y, type: "submit", onClick: (N) => {
+    if (d || i) {
+      N.preventDefault();
+      return;
+    }
+    S && S(N);
+  }, ...m, ...w, "aria-disabled": d || i, "aria-busy": i, ref: I, children: [
+    i && /* @__PURE__ */ c(L, { className: o.loader, aria: {
+      "aria-label": "Loading state"
+    } }),
+    /* @__PURE__ */ c("span", { className: B, children: f }),
+    (l || e) && /* @__PURE__ */ c(F, { name: l, theme: H, source: e, className: G, "aria-hidden": "true" })
+  ] });
+  return D ? /* @__PURE__ */ O(k, { placement: "top", tooltipOffset: 6, children: [
+    /* @__PURE__ */ c(k.Anchor, { children: v }),
+    /* @__PURE__ */ c(k.Content, { children: D })
+  ] }) : v;
+});
+so.displayName = "DSButton";
+export {
+  bo as B,
+  so as D,
+  po as a,
+  ro as v
+};

package/chunks/{Checkbox.BcGXAuuP.js → Checkbox.D5X5T6Yg.js}

@@ -2,7 +2,7 @@
 import { jsxs as u, jsx as s } from "react/jsx-runtime";
 import { c as x } from "./index.DL9mof6u.js";
 import { forwardRef as j, useRef as B, useState as H, useEffect as V, useCallback as $ } from "react";
-import { u as A } from "./useBreakpoint.BzR_yaIv.js";
+import { u as A } from "./useBreakpoint.1txsny17.js";
 import "./index.D-sRdssb.js";
 import { D as _ } from "./Icon.CDLyB7Pv.js";
 import { D as L } from "./SystemFeedback.CjlARKki.js";

package/chunks/CheckboxGroup.CUR_0VMc.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as w } from "react/jsx-runtime";
+import { d as q } from "./index.D-sRdssb.js";
+import { c as N } from "./index.DL9mof6u.js";
+import { D as z } from "./Fieldset.C0RzpI-h.js";
+import _ from "react";
+import { g as v, r as I } from "./helpers.CexwVao7.js";
+import { D as P } from "./Checkbox.D5X5T6Yg.js";
+import '../assets/CheckboxGroup.Dd-Huo7x.css';const F = "ds-checkbox-group_root_12fot_1", H = "ds-checkbox-group_root--horizontal_12fot_9", O = "ds-checkbox-group_root--invalid_12fot_12", E = {
+  root: F,
+  rootHorizontal: H,
+  rootInvalid: O
+}, V = ({
+  children: c,
+  description: e,
+  id: t,
+  legend: s,
+  systemFeedback: r
+}) => {
+  if (!t && (e || r))
+    throw new Error(v("DSCheckboxGroup", 'A unique "id" prop is required when providing the description or systemFeedback property. Please add a unique "id" prop to the DSCheckboxGroup component.'));
+  if (!s)
+    throw new Error(v("DSCheckboxGroup", I("legend", "DSCheckboxGroup")));
+  if (!c)
+    throw new Error(v("DSCheckboxGroup", "The component requires DSCheckbox components to be explicitly set as its children. Ensure that you include individual DSCheckbox components within the DSCheckboxGroup to create a cohesive checkbox group."));
+  _.Children.forEach(c, (o) => {
+    if (!_.isValidElement(o) || // Object.keys(child.type)[1] !== '_payload' checks if the object is currently in a hydration phase
+    o.type !== P && Object.keys(o.type)[1] !== "_payload") {
+      const i = _.isValidElement(o) ? `Currently you are passing a child of type: ${JSON.stringify(o.type)}.` : "Currently you are passing an invalid React element.";
+      throw new Error(v("DSCheckboxGroup", `The component requires the children to be DSCheckbox elements. ${i} Ensure that you include individual DSCheckbox components within the DSCheckboxGroup to create a cohesive checkbox group.`));
+    }
+  });
+}, J = (c) => {
+  const e = q.c(33);
+  let t, s, r, o, i, a, l, p, n, h, u, m, b;
+  e[0] !== c ? ({
+    children: t,
+    legend: i,
+    className: s,
+    description: r,
+    direction: h,
+    disabled: u,
+    id: o,
+    invalid: m,
+    popoverContent: a,
+    popoverInfoButtonProps: l,
+    required: b,
+    systemFeedback: n,
+    ...p
+  } = c, e[0] = c, e[1] = t, e[2] = s, e[3] = r, e[4] = o, e[5] = i, e[6] = a, e[7] = l, e[8] = p, e[9] = n, e[10] = h, e[11] = u, e[12] = m, e[13] = b) : (t = e[1], s = e[2], r = e[3], o = e[4], i = e[5], a = e[6], l = e[7], p = e[8], n = e[9], h = e[10], u = e[11], m = e[12], b = e[13]);
+  const G = h === void 0 ? "vertical" : h, C = u === void 0 ? !1 : u, f = m === void 0 ? !1 : m, D = b === void 0 ? !1 : b;
+  process.env.NODE_ENV !== "production" && V({
+    children: t,
+    description: r,
+    id: o,
+    legend: i,
+    systemFeedback: n
+  });
+  const y = G === "horizontal", S = f && !!n;
+  let x;
+  e[14] !== y || e[15] !== S ? (x = N(E.root, {
+    [E.rootHorizontal]: y,
+    [E.rootInvalid]: S
+  }), e[14] = y, e[15] = S, e[16] = x) : x = e[16];
+  const g = x;
+  let d;
+  e[17] !== t || e[18] !== g ? (d = /* @__PURE__ */ w("div", { className: g, children: t }), e[17] = t, e[18] = g, e[19] = d) : d = e[19];
+  let k;
+  return e[20] !== s || e[21] !== r || e[22] !== C || e[23] !== o || e[24] !== f || e[25] !== i || e[26] !== a || e[27] !== l || e[28] !== D || e[29] !== p || e[30] !== n || e[31] !== d ? (k = /* @__PURE__ */ w(z, { id: o, legend: i, className: s, description: r, disabled: C, required: D, invalid: f, systemFeedback: n, popoverContent: a, popoverInfoButtonProps: l, ...p, children: d }), e[20] = s, e[21] = r, e[22] = C, e[23] = o, e[24] = f, e[25] = i, e[26] = a, e[27] = l, e[28] = D, e[29] = p, e[30] = n, e[31] = d, e[32] = k) : k = e[32], k;
+};
+export {
+  J as D,
+  V as v
+};

package/chunks/{Chip.D6pubCZV.js → Chip.DIp5hdRH.js}

@@ -5,7 +5,7 @@ import { c as H } from "./index.DL9mof6u.js";
 import { forwardRef as U } from "react";
 import { t as M } from "./translate.nuU7uChI.js";
 import { D as x } from "./Icon.CDLyB7Pv.js";
-import { Tooltip as $ } from "../tooltip.QJe_bfO-.js";
+import { Tooltip as $ } from "../tooltip.Cj3AvYgB.js";
 import { g as E, r as z } from "./helpers.CexwVao7.js";
 import { g as j } from "./AriaLiveRegions.utils.CybNIBSa.js";
 import '../assets/Chip.dxIYIjj7.css';const B = "ds-chip-group_chip_aidwn_1", W = "ds-chip-group_chip--small_aidwn_30", L = {