@stihl-design-system/components 1.0.0-RC.0 → 1.0.0-RC.1

package/button.89b2675b.js

@@ -1,135 +0,0 @@
-import "./assets/Button.684e8bda.css";
-import { j as _ } from "./chunks/jsx-runtime.5c071667.js";
-import { c as n } from "./chunks/index.8021d3e0.js";
-import { u as e } from "./chunks/useBreakpoint.6c1b06c2.js";
-import { DSIcon as I } from "./icon.b4211784.js";
-import { DSSpinner as F } from "./spinner.ee015469.js";
-const S = "_root_1dvy1_49", x = "_root--highlight_1dvy1_116", j = "_root--dark-highlight_1dvy1_116", L = "_root--filled_1dvy1_194", C = "_root--outline_1dvy1_222", N = "_root--ghost_1dvy1_249", B = "_root--ghost-flush_1dvy1_274", E = "_root--small_1dvy1_280", R = "_root--dark-filled_1dvy1_355", T = "_root--dark-outline_1dvy1_414", V = "_root--dark-ghost_1dvy1_472", q = "_root--dark-ghost-flush_1dvy1_528", w = "_root--icon-left_1dvy1_587", A = "_root--icon-only_1dvy1_603", J = "_root--icon-only-small_1dvy1_607", K = "_loader_1dvy1_614", M = "_icon--hidden_1dvy1_626", P = "_label--hidden_1dvy1_630", Q = "_label--loading_1dvy1_642", o = {
-  root: S,
-  "root--highlight": "_root--highlight_1dvy1_116",
-  rootHighlight: x,
-  "root--dark-highlight": "_root--dark-highlight_1dvy1_116",
-  rootDarkHighlight: j,
-  "root--filled": "_root--filled_1dvy1_194",
-  rootFilled: L,
-  "root--outline": "_root--outline_1dvy1_222",
-  rootOutline: C,
-  "root--ghost": "_root--ghost_1dvy1_249",
-  rootGhost: N,
-  "root--ghost-flush": "_root--ghost-flush_1dvy1_274",
-  rootGhostFlush: B,
-  "root--small": "_root--small_1dvy1_280",
-  rootSmall: E,
-  "root--dark-filled": "_root--dark-filled_1dvy1_355",
-  rootDarkFilled: R,
-  "root--dark-outline": "_root--dark-outline_1dvy1_414",
-  rootDarkOutline: T,
-  "root--dark-ghost": "_root--dark-ghost_1dvy1_472",
-  rootDarkGhost: V,
-  "root--dark-ghost-flush": "_root--dark-ghost-flush_1dvy1_528",
-  rootDarkGhostFlush: q,
-  "root--icon-left": "_root--icon-left_1dvy1_587",
-  rootIconLeft: w,
-  "root--icon-only": "_root--icon-only_1dvy1_603",
-  rootIconOnly: A,
-  "root--icon-only-small": "_root--icon-only-small_1dvy1_607",
-  rootIconOnlySmall: J,
-  loader: K,
-  "icon--hidden": "_icon--hidden_1dvy1_626",
-  iconHidden: M,
-  "label--hidden": "_label--hidden_1dvy1_630",
-  labelHidden: P,
-  "label--loading": "_label--loading_1dvy1_642",
-  labelLoading: Q
-}, z = ({
-  children: u,
-  aria: k,
-  className: f,
-  dataTrackingid: m,
-  disabled: a = !1,
-  hideLabel: s = !1,
-  iconName: h,
-  iconPosition: v = "left",
-  iconSource: c,
-  isFlush: d = !1,
-  loading: r = !1,
-  size: i = "medium",
-  theme: l = "light",
-  variant: t = "filled",
-  onClick: g,
-  ...D
-}) => {
-  const b = n(o.root, f, {
-    // variant
-    [o.rootFilled]: t === "filled",
-    [o.rootHighlight]: t === "highlight",
-    [o.rootOutline]: t === "outline",
-    [o.rootGhost]: t === "ghost" && d !== !0,
-    // isFlush
-    [o.rootGhostFlush]: t === "ghost" && d === !0,
-    // dark theme
-    [o.rootDarkFilled]: l === "dark" && t === "filled",
-    [o.rootDarkHighlight]: l === "dark" && t === "highlight",
-    [o.rootDarkOutline]: l === "dark" && t === "outline",
-    [o.rootDarkGhost]: l === "dark" && t === "ghost" && d !== !0,
-    // dark isFlush
-    [o.rootDarkGhostFlush]: l === "dark" && t === "ghost" && d === !0,
-    // size
-    [o.rootSmall]: i === "small",
-    // icon position
-    [o.rootIconLeft]: v === "left",
-    // icon only
-    [o.rootIconOnly]: e(s) && i === "medium",
-    [o.rootIconOnlySmall]: e(s) && i === "small"
-  }), p = n(o.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [o.labelHidden]: e(s),
-    // set label opacity to 0 when loading to prevent button size from changing
-    [o.labelLoading]: r
-  }), O = n(o.icon, {
-    // set icon opacity to 0 when loading to prevent button size from changing
-    [o.iconHidden]: r
-  }), G = l === "light" && t === "filled" || l === "dark" && t === "outline" || l === "dark" && t === "ghost" ? "dark" : "light", H = (y) => {
-    if (a || r) {
-      y.preventDefault();
-      return;
-    }
-    g && g(y);
-  };
-  return /* @__PURE__ */ _.jsxs(
-    "button",
-    {
-      className: b,
-      "data-trackingid": m,
-      type: "submit",
-      onClick: H,
-      ...k,
-      ...D,
-      "aria-disabled": a || r,
-      "aria-busy": r,
-      children: [
-        r && /* @__PURE__ */ _.jsx(
-          F,
-          {
-            className: o.loader,
-            aria: { "aria-label": "Loading state" }
-          }
-        ),
-        /* @__PURE__ */ _.jsx("span", { className: p, children: u }),
-        (h || c) && /* @__PURE__ */ _.jsx(
-          I,
-          {
-            name: h,
-            theme: G,
-            source: c,
-            className: O,
-            "aria-hidden": "true"
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  z as DSButton
-};

package/buttonround.c60c8034.js

@@ -1,118 +0,0 @@
-import "./assets/ButtonRound.ca8748cf.css";
-import { j as r } from "./chunks/jsx-runtime.5c071667.js";
-import { c as a } from "./chunks/index.8021d3e0.js";
-import { DSIcon as y } from "./icon.b4211784.js";
-import { DSSpinner as p } from "./spinner.ee015469.js";
-const H = "_root_nejad_49", F = "_root--highlight_nejad_118", O = "_root--dark-highlight_nejad_118", G = "_root--filled_nejad_196", I = "_root--outline_nejad_224", S = "_root--ghost_nejad_251", x = "_root--ghost-flush_nejad_276", L = "_root--small_nejad_282", C = "_root--dark-filled_nejad_357", N = "_root--dark-outline_nejad_416", R = "_root--dark-ghost_nejad_474", B = "_root--dark-ghost-flush_nejad_530", E = "_root--icon-left_nejad_589", T = "_root--icon-only_nejad_605", q = "_root--icon-only-small_nejad_609", w = "_loader_nejad_616", z = "_icon--hidden_nejad_628", A = "_label--hidden_nejad_632", J = "_label--loading_nejad_644", o = {
-  root: H,
-  "root--highlight": "_root--highlight_nejad_118",
-  rootHighlight: F,
-  "root--dark-highlight": "_root--dark-highlight_nejad_118",
-  rootDarkHighlight: O,
-  "root--filled": "_root--filled_nejad_196",
-  rootFilled: G,
-  "root--outline": "_root--outline_nejad_224",
-  rootOutline: I,
-  "root--ghost": "_root--ghost_nejad_251",
-  rootGhost: S,
-  "root--ghost-flush": "_root--ghost-flush_nejad_276",
-  rootGhostFlush: x,
-  "root--small": "_root--small_nejad_282",
-  rootSmall: L,
-  "root--dark-filled": "_root--dark-filled_nejad_357",
-  rootDarkFilled: C,
-  "root--dark-outline": "_root--dark-outline_nejad_416",
-  rootDarkOutline: N,
-  "root--dark-ghost": "_root--dark-ghost_nejad_474",
-  rootDarkGhost: R,
-  "root--dark-ghost-flush": "_root--dark-ghost-flush_nejad_530",
-  rootDarkGhostFlush: B,
-  "root--icon-left": "_root--icon-left_nejad_589",
-  rootIconLeft: E,
-  "root--icon-only": "_root--icon-only_nejad_605",
-  rootIconOnly: T,
-  "root--icon-only-small": "_root--icon-only-small_nejad_609",
-  rootIconOnlySmall: q,
-  loader: w,
-  "icon--hidden": "_icon--hidden_nejad_628",
-  iconHidden: z,
-  "label--hidden": "_label--hidden_nejad_632",
-  labelHidden: A,
-  "label--loading": "_label--loading_nejad_644",
-  labelLoading: J
-}, V = ({
-  children: h,
-  aria: c,
-  className: g,
-  dataTrackingid: j,
-  disabled: e = !1,
-  iconName: d = "placeholder",
-  iconSource: _,
-  loading: t = !1,
-  theme: n = "light",
-  variant: l = "filled",
-  onClick: i,
-  ...k
-}) => {
-  const u = a(
-    o.root,
-    o.rootIconOnlySmall,
-    g,
-    {
-      // variant
-      [o.rootFilled]: l === "filled",
-      [o.rootHighlight]: l === "highlight",
-      // dark theme
-      [o.rootDarkFilled]: n === "dark" && l === "filled",
-      [o.rootDarkHighlight]: n === "dark" && l === "highlight"
-    }
-  ), f = a(o.label, o.labelHidden, {
-    // set label opacity to 0 when loading to prevent button size from changing
-    [o.labelLoading]: t
-  }), m = a(o.icon, {
-    // set icon opacity to 0 when loading to prevent button size from changing
-    [o.iconHidden]: t
-  }), b = n === "light" && l === "filled" ? "dark" : "light", D = (s) => {
-    if (e || t) {
-      s.preventDefault();
-      return;
-    }
-    i && i(s);
-  };
-  return /* @__PURE__ */ r.jsxs(
-    "button",
-    {
-      className: u,
-      "data-trackingid": j,
-      type: "button",
-      onClick: D,
-      ...c,
-      ...k,
-      "aria-disabled": e || t,
-      "aria-busy": t,
-      children: [
-        t && /* @__PURE__ */ r.jsx(
-          p,
-          {
-            className: o.loader,
-            aria: { "aria-label": "Loading state" }
-          }
-        ),
-        /* @__PURE__ */ r.jsx("span", { className: f, children: h }),
-        (d || _) && /* @__PURE__ */ r.jsx(
-          y,
-          {
-            name: d,
-            theme: b,
-            source: _,
-            className: m,
-            "aria-hidden": "true"
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  V as DSButtonRound
-};

package/checkbox.7d414047.js

@@ -1,112 +0,0 @@
-import "./assets/Checkbox.84cf6398.css";
-import { j as e } from "./chunks/jsx-runtime.5c071667.js";
-import { c as d } from "./chunks/index.8021d3e0.js";
-import { forwardRef as I, useRef as H, useState as M, useEffect as g, useCallback as B } from "react";
-import { u as E } from "./chunks/useBreakpoint.6c1b06c2.js";
-import { DSIcon as k } from "./icon.b4211784.js";
-import { DSSystemFeedback as V } from "./systemfeedback.6bbd1505.js";
-const w = "_root_1rc21_49", L = "_root--disabled_1rc21_68", O = "_checkbox_1rc21_72", P = "_icon-check_1rc21_86", R = "_icon-minus_1rc21_87", U = "_checkbox--invalid_1rc21_108", q = "_label--hidden_1rc21_113", z = "_input_1rc21_126", A = "_label_1rc21_113", F = "_feedback_1rc21_240", c = {
-  root: w,
-  "root--disabled": "_root--disabled_1rc21_68",
-  rootDisabled: L,
-  checkbox: O,
-  "icon-check": "_icon-check_1rc21_86",
-  iconCheck: P,
-  "icon-minus": "_icon-minus_1rc21_87",
-  iconMinus: R,
-  "checkbox--invalid": "_checkbox--invalid_1rc21_108",
-  checkboxInvalid: U,
-  "label--hidden": "_label--hidden_1rc21_113",
-  labelHidden: q,
-  input: z,
-  label: A,
-  feedback: F
-}, G = I(
-  ({
-    label: _,
-    checked: h,
-    className: m,
-    defaultChecked: f = !1,
-    disabled: s = !1,
-    hideLabel: x = !1,
-    indeterminate: i = !1,
-    invalid: l = !1,
-    systemFeedback: u,
-    onChange: r,
-    ...p
-  }, n) => {
-    const a = H(null), [C, j] = M(f), N = E(x);
-    g(() => {
-      a && a.current && (a.current.indeterminate = i);
-    }, [i]);
-    const t = h !== void 0, b = t ? h : C, D = d(c.root, {
-      [c.rootDisabled]: s
-    }), v = d(c.label, {
-      // hide label only visually to keep them available for assistive technologies
-      [c.labelHidden]: N
-    }), S = d(c.checkbox, {
-      [c.checkboxInvalid]: l
-    }), y = B(
-      (o) => {
-        if (s) {
-          o.preventDefault();
-          return;
-        }
-        t || j(o.target.checked), r && r(o);
-      },
-      [s, t, r]
-    );
-    return /* @__PURE__ */ e.jsxs("div", { className: m, children: [
-      /* @__PURE__ */ e.jsxs("label", { className: D, children: [
-        /* @__PURE__ */ e.jsx(
-          "input",
-          {
-            type: "checkbox",
-            className: c.input,
-            ref: (o) => {
-              typeof n == "function" ? n(o) : n !== null && (n.current = o), a.current = o;
-            },
-            ...p,
-            checked: b,
-            disabled: s,
-            "aria-label": _,
-            "aria-invalid": l,
-            "aria-checked": i ? "mixed" : b,
-            onChange: y
-          }
-        ),
-        /* @__PURE__ */ e.jsxs("span", { className: S, children: [
-          /* @__PURE__ */ e.jsx(
-            k,
-            {
-              name: "check",
-              className: c.iconCheck,
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ e.jsx(
-            k,
-            {
-              name: "minus",
-              className: c.iconMinus,
-              "aria-hidden": "true"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e.jsx("span", { className: v, children: _ })
-      ] }),
-      l && u && /* @__PURE__ */ e.jsx(
-        V,
-        {
-          className: c.feedback,
-          message: u,
-          type: "invalid"
-        }
-      )
-    ] });
-  }
-);
-G.displayName = "DSCheckbox";
-export {
-  G as DSCheckbox
-};

package/chunks/Link.module.b8230547.js

@@ -1,37 +0,0 @@
-import "../assets/Link.03deeca0.css";
-const o = "_root_1j79s_49", t = "_root--highlight_1j79s_115", r = "_root--dark-highlight_1j79s_115", l = "_root--filled_1j79s_193", _ = "_root--outline_1j79s_221", s = "_root--ghost_1j79s_248", h = "_root--ghost-flush_1j79s_273", n = "_root--small_1j79s_279", i = "_root--dark-filled_1j79s_354", a = "_root--dark-outline_1j79s_413", e = "_root--dark-ghost_1j79s_471", d = "_root--dark-ghost-flush_1j79s_527", c = "_root--icon-left_1j79s_586", g = "_root--icon-only_1j79s_602", j = "_root--icon-only-small_1j79s_606", k = "_label--hidden_1j79s_613", f = {
-  root: o,
-  "root--highlight": "_root--highlight_1j79s_115",
-  rootHighlight: t,
-  "root--dark-highlight": "_root--dark-highlight_1j79s_115",
-  rootDarkHighlight: r,
-  "root--filled": "_root--filled_1j79s_193",
-  rootFilled: l,
-  "root--outline": "_root--outline_1j79s_221",
-  rootOutline: _,
-  "root--ghost": "_root--ghost_1j79s_248",
-  rootGhost: s,
-  "root--ghost-flush": "_root--ghost-flush_1j79s_273",
-  rootGhostFlush: h,
-  "root--small": "_root--small_1j79s_279",
-  rootSmall: n,
-  "root--dark-filled": "_root--dark-filled_1j79s_354",
-  rootDarkFilled: i,
-  "root--dark-outline": "_root--dark-outline_1j79s_413",
-  rootDarkOutline: a,
-  "root--dark-ghost": "_root--dark-ghost_1j79s_471",
-  rootDarkGhost: e,
-  "root--dark-ghost-flush": "_root--dark-ghost-flush_1j79s_527",
-  rootDarkGhostFlush: d,
-  "root--icon-left": "_root--icon-left_1j79s_586",
-  rootIconLeft: c,
-  "root--icon-only": "_root--icon-only_1j79s_602",
-  rootIconOnly: g,
-  "root--icon-only-small": "_root--icon-only-small_1j79s_606",
-  rootIconOnlySmall: j,
-  "label--hidden": "_label--hidden_1j79s_613",
-  labelHidden: k
-};
-export {
-  f as s
-};

package/fieldset.fb7b7e49.js

@@ -1,98 +0,0 @@
-import "./assets/Fieldset.5297efb8.css";
-import { j as e } from "./chunks/jsx-runtime.5c071667.js";
-import { c } from "./chunks/index.8021d3e0.js";
-import "react";
-import { Asterisk as k } from "./asterisk.91abccec.js";
-import { DSHeading as F } from "./heading.cb7698f4.js";
-import { DSSystemFeedback as w } from "./systemfeedback.6bbd1505.js";
-import { g as y } from "./chunks/helpers.ea3ca41a.js";
-const N = "_root_1q2kr_25", v = "_child-wrapper_1q2kr_31", E = "_legend_1q2kr_38", M = "_legend--utility--m_1q2kr_41", C = "_description_1q2kr_52", P = "_description--small_1q2kr_65", T = "_system-feedback_1q2kr_69", i = {
-  root: N,
-  "child-wrapper": "_child-wrapper_1q2kr_31",
-  childWrapper: v,
-  legend: E,
-  "legend--utility--m": "_legend--utility--m_1q2kr_41",
-  legendUtilityM: M,
-  description: C,
-  "description--small": "_description--small_1q2kr_65",
-  descriptionSmall: P,
-  "system-feedback": "_system-feedback_1q2kr_69",
-  systemFeedback: T
-}, U = ({
-  description: n,
-  id: s,
-  legend: a,
-  systemFeedback: t
-}) => {
-  if (!s && (n || t))
-    throw new Error(
-      y(
-        "DSFieldset",
-        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSFieldset component.'
-      )
-    );
-  if (!a)
-    throw new Error(
-      y(
-        "DSFieldset",
-        "The legend prop is required. Please add the legend prop to the DSFieldset component."
-      )
-    );
-}, L = ({
-  children: n,
-  legend: s,
-  className: a,
-  description: t,
-  disabled: j = !1,
-  id: d,
-  invalid: p = !1,
-  required: m = !1,
-  systemFeedback: r,
-  ...q
-}) => {
-  process.env.NODE_ENV !== "production" && U({ description: t, id: d, legend: s, systemFeedback: r });
-  let o, _, g;
-  const l = typeof s == "object" && s !== void 0;
-  l && ({ headingSize: o, headingTag: _, headingText: g } = s);
-  const h = `${d}-feedback`, f = `${d}-description`, S = [
-    r && h,
-    t && f
-  ].filter(Boolean).join(" "), b = !l || o === "small" || o === "small-uppercase", u = c(i.root, a), x = c(i.legend, {
-    [i.legendUtilityM]: !l
-  }), D = c(i.description, {
-    [i.descriptionSmall]: b
-  });
-  return /* @__PURE__ */ e.jsxs(
-    "fieldset",
-    {
-      className: u,
-      disabled: j,
-      ...q,
-      "aria-invalid": p,
-      "aria-describedby": S || void 0,
-      children: [
-        /* @__PURE__ */ e.jsx("legend", { className: x, children: l ? /* @__PURE__ */ e.jsxs(F, { tag: _, size: o, children: [
-          g,
-          m && /* @__PURE__ */ e.jsx(k, {})
-        ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-          s,
-          m && /* @__PURE__ */ e.jsx(k, {})
-        ] }) }),
-        t && /* @__PURE__ */ e.jsx("span", { id: f, className: D, children: t }),
-        p && r && /* @__PURE__ */ e.jsx(
-          w,
-          {
-            id: h,
-            type: "invalid",
-            message: r,
-            className: i.systemFeedback
-          }
-        ),
-        /* @__PURE__ */ e.jsx("div", { className: i.childWrapper, children: n })
-      ]
-    }
-  );
-};
-export {
-  L as DSFieldset
-};

package/heading.cb7698f4.js

@@ -1,44 +0,0 @@
-import "./assets/Heading.32278621.css";
-import { j as p } from "./chunks/jsx-runtime.5c071667.js";
-import { c } from "./chunks/index.8021d3e0.js";
-const u = "_root_17wr7_25", d = "_root--x-large_17wr7_28", g = "_root--large_17wr7_42", i = "_root--medium_17wr7_56", n = "_root--medium-uppercase_17wr7_64", w = "_root--small_17wr7_72", h = "_root--small-uppercase_17wr7_80", x = "_root--theme-dark_17wr7_88", o = {
-  root: u,
-  "root--x-large": "_root--x-large_17wr7_28",
-  rootXLarge: d,
-  "root--large": "_root--large_17wr7_42",
-  rootLarge: g,
-  "root--medium": "_root--medium_17wr7_56",
-  rootMedium: i,
-  "root--medium-uppercase": "_root--medium-uppercase_17wr7_64",
-  rootMediumUppercase: n,
-  "root--small": "_root--small_17wr7_72",
-  rootSmall: w,
-  "root--small-uppercase": "_root--small-uppercase_17wr7_80",
-  rootSmallUppercase: h,
-  "root--theme-dark": "_root--theme-dark_17wr7_88",
-  rootThemeDark: x
-}, M = ({
-  children: e,
-  className: t,
-  size: r = "medium",
-  tag: a = "h2",
-  // default tag because of SEO reasons (h1 should be used only once per page)
-  theme: m = "light",
-  ..._
-}) => {
-  const s = a, l = c(o.root, t, {
-    // sizes
-    [o.rootXLarge]: r === "x-large",
-    [o.rootLarge]: r === "large",
-    [o.rootMedium]: r == "medium",
-    [o.rootMediumUppercase]: r == "medium-uppercase",
-    [o.rootSmall]: r == "small",
-    [o.rootSmallUppercase]: r == "small-uppercase",
-    // dark theme
-    [o.rootThemeDark]: m === "dark"
-  });
-  return /* @__PURE__ */ p.jsx(s, { className: l, ..._, children: e });
-};
-export {
-  M as DSHeading
-};