@stihl-design-system/components 1.0.0-RC.11 → 1.0.0-RC.12

package/linkstandalone.BBoEniZ_.js

@@ -0,0 +1,79 @@
+"use client";
+import { j as r } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as p } from "./chunks/index.CvOaL64Y.js";
+import { D as x } from "./chunks/Icon.BCmt_XBG.js";
+import "react";
+import './assets/linkstandalone.DIazcjIv.css';const H = "ds-link-standalone_root_1ubnn_1", j = "ds-link-standalone_root--highlight_1ubnn_68", v = "ds-link-standalone_root--neutral-dark_1ubnn_82", L = "ds-link-standalone_root--highlight-dark_1ubnn_131", N = "ds-link-standalone_root--active_1ubnn_180", I = "ds-link-standalone_root--icon-left_1ubnn_187", o = {
+  root: H,
+  "root--highlight": "ds-link-standalone_root--highlight_1ubnn_68",
+  rootHighlight: j,
+  "root--neutral-dark": "ds-link-standalone_root--neutral-dark_1ubnn_82",
+  rootNeutralDark: v,
+  "root--highlight-dark": "ds-link-standalone_root--highlight-dark_1ubnn_131",
+  rootHighlightDark: L,
+  "root--active": "ds-link-standalone_root--active_1ubnn_180",
+  rootActive: N,
+  "root--icon-left": "ds-link-standalone_root--icon-left_1ubnn_187",
+  rootIconLeft: I
+}, C = ({
+  children: e,
+  aria: d,
+  active: h,
+  className: _,
+  dataTrackingid: g,
+  download: c,
+  href: a,
+  iconName: i,
+  iconPosition: k = "left",
+  iconSource: l,
+  referrerPolicy: u,
+  rel: b,
+  target: f = "_self",
+  theme: t = "light",
+  variant: n = "neutral",
+  ...m
+}) => {
+  const D = p(o.root, _, {
+    // variant
+    [o.rootHighlight]: n === "highlight",
+    // theme
+    [o.rootNeutralDark]: t === "dark" && n === "neutral",
+    [o.rootHighlightDark]: t === "dark" && n === "highlight",
+    // active
+    [o.rootActive]: h,
+    // icon position
+    [o.rootIconLeft]: k === "left"
+  }), s = a === void 0 ? "span" : "a";
+  return /* @__PURE__ */ r.jsxs(
+    s,
+    {
+      className: D,
+      "data-trackingid": g,
+      ...s === "a" && {
+        href: a,
+        target: f,
+        rel: b,
+        referrerPolicy: u,
+        download: c
+      },
+      ...d,
+      ...m,
+      children: [
+        /* @__PURE__ */ r.jsx("span", { className: o.label, children: e }),
+        (i || l) && /* @__PURE__ */ r.jsx(
+          x,
+          {
+            name: i,
+            theme: t,
+            source: l,
+            size: "medium",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  C as DSLinkStandalone
+};

package/logo.Hul8qCFo.js

@@ -0,0 +1,65 @@
+"use client";
+import { j as g } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as r } from "./chunks/index.CvOaL64Y.js";
+import './assets/logo.CnW8alZU.css';const x = "ds-logo_anchor_xhwl6_1", _ = "ds-logo_svg_xhwl6_2", e = "ds-logo_svg-background_xhwl6_40", k = "ds-logo_svg-background--dark_xhwl6_43", u = "ds-logo_svg-text_xhwl6_46", w = "ds-logo_svg-text--dark_xhwl6_49", s = {
+  anchor: x,
+  svg: _,
+  "svg-background": "ds-logo_svg-background_xhwl6_40",
+  svgBackground: e,
+  "svg-background--dark": "ds-logo_svg-background--dark_xhwl6_43",
+  svgBackgroundDark: k,
+  "svg-text": "ds-logo_svg-text_xhwl6_46",
+  svgText: u,
+  "svg-text--dark": "ds-logo_svg-text--dark_xhwl6_49",
+  svgTextDark: w
+}, B = ({
+  aria: c,
+  className: l,
+  href: o,
+  target: h = "_self",
+  theme: d = "light",
+  variant: n = "standard",
+  ...v
+}) => {
+  const a = n === "background" || d === "dark", t = /* @__PURE__ */ g.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: r(s.svg, !o && l),
+      viewBox: "0 0 408 179",
+      width: "100%",
+      height: "100%",
+      children: [
+        /* @__PURE__ */ g.jsx("title", { children: "STIHL" }),
+        /* @__PURE__ */ g.jsx(
+          "path",
+          {
+            className: a ? s.svgBackgroundDark : s.svgBackground,
+            d: "M408 0H0v179h408V0Z"
+          }
+        ),
+        /* @__PURE__ */ g.jsx(
+          "path",
+          {
+            className: a ? s.svgTextDark : s.svgText,
+            d: "M195.459 56.314h-61.656l-4.936 16.193h20.668l-15.304 50.179h20.106l15.293-50.18h20.893l4.936-16.192ZM62.286 66.62l-5.353 17.558c-2.384 7.814 1.957 13.531 9.637 13.531h25.065a1.626 1.626 0 0 1 1.288.7 1.638 1.638 0 0 1 .207 1.454l-1.349 4.42a3.37 3.37 0 0 1-2.8 2.154H49.624l-4.993 16.249h50.816c5.622 0 10.39-2.605 12.842-10.645l5.094-16.677c2.406-7.894-2.081-13.532-9.086-13.532H79.108c-1.394 0-1.945-1.015-1.563-2.255l1.35-4.42a3.385 3.385 0 0 1 1.185-1.872 3.368 3.368 0 0 1 2.087-.733h36.253l4.937-16.193H75.251c-6.87-.045-11.155 4.364-12.965 10.261ZM320.571 106.493l15.304-50.18h-20.218l-20.23 66.373h63.017l4.936-16.193h-42.809ZM282.653 56.314l-7.771 25.484H250.83l7.77-25.484h-19.319l-20.23 66.372h19.308l7.736-25.372h24.053l-7.725 25.372h19.836l20.23-66.372h-19.836ZM205.917 56.314l-20.229 66.372h20.218l20.23-66.372h-20.219Z"
+          }
+        )
+      ]
+    }
+  );
+  return o ? /* @__PURE__ */ g.jsx(
+    "a",
+    {
+      className: r(s.anchor, l),
+      href: o,
+      target: h,
+      ...c,
+      ...v,
+      children: t
+    }
+  ) : t;
+};
+export {
+  B as DSLogo
+};

package/{notification.0kX1GMaB.js → notification.JWhrkEcE.js}

@@ -1,9 +1,9 @@
 "use client";
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
-import "./button.C5opEJ6x.js";
-import "./chunks/Icon.C2o2seDb.js";
-import { D as e } from "./chunks/Notification.BXVN7_Fs.js";
+import "./button.M4nXjcUn.js";
+import "./chunks/Icon.BCmt_XBG.js";
+import { D as e } from "./chunks/Notification.o6pagKQy.js";
 export {
   e as DSNotification
 };

package/optioncheckbox.BRUTnQnJ.js

@@ -0,0 +1,43 @@
+"use client";
+import { j as c } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as s } from "./chunks/index.CvOaL64Y.js";
+import { D as a } from "./chunks/Icon.BCmt_XBG.js";
+import './assets/optioncheckbox.BZaWtRD7.css';const m = "ds-combobox_root_q88mt_1", _ = "ds-combobox_root--disabled_q88mt_21", l = "ds-combobox_checkbox_q88mt_25", i = "ds-combobox_icon-check_q88mt_41", k = "ds-combobox_checkbox--checked_q88mt_62", n = "ds-combobox_checkbox--disabled_q88mt_65", r = "ds-combobox_label_q88mt_82", o = {
+  root: m,
+  "root--disabled": "ds-combobox_root--disabled_q88mt_21",
+  rootDisabled: _,
+  checkbox: l,
+  "icon-check": "ds-combobox_icon-check_q88mt_41",
+  iconCheck: i,
+  "checkbox--checked": "ds-combobox_checkbox--checked_q88mt_62",
+  checkboxChecked: k,
+  "checkbox--disabled": "ds-combobox_checkbox--disabled_q88mt_65",
+  checkboxDisabled: n,
+  label: r
+}, D = ({
+  label: b,
+  checked: t,
+  className: d,
+  disabled: e
+}) => {
+  const x = s(o.root, {
+    [o.rootDisabled]: e
+  }), h = s(o.checkbox, {
+    [o.checkboxDisabled]: e,
+    [o.checkboxChecked]: t
+  });
+  return /* @__PURE__ */ c.jsx("div", { className: d, children: /* @__PURE__ */ c.jsxs("div", { className: x, children: [
+    /* @__PURE__ */ c.jsx("span", { className: h, children: /* @__PURE__ */ c.jsx(
+      a,
+      {
+        name: "check",
+        className: o.iconCheck,
+        "aria-hidden": "true"
+      }
+    ) }),
+    /* @__PURE__ */ c.jsx("span", { className: o.label, children: b })
+  ] }) });
+};
+export {
+  D as OptionCheckbox
+};

package/optioncheckbox.d.ts

@@ -1,2 +1,2 @@
-export * from './components/CustomReactSelect/OptionCheckbox'
+export * from './components/Combobox/CustomReactSelect/OptionCheckbox'
 export {}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.11",
+  "version": "1.0.0-RC.12",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://main--63440bbb95889041542a5ba3.chromatic.com",
   "keywords": [
@@ -30,7 +30,7 @@
     "./styles/fonts/*.css": {
       "default": "./styles/fonts/*.css"
     },
-    "./styles/scss": "./styles/scss/_index.scss",
+    "./styles/scss/ds": "./styles/scss/ds/index.scss",
     "./partials": {
       "types": "./partials/index.d.ts",
       "import": "./partials/index.js",
@@ -72,8 +72,10 @@
     "test:unit": "vitest",
     "pretest:e2e": "npx playwright install --with-deps",
     "pretest:e2e-ui": "npx playwright install --with-deps",
+    "pretest:e2e-dead-link": "npx playwright install --with-deps",
     "test:e2e": "npx playwright test",
     "test:e2e-ui": "npx playwright test --ui",
+    "test:e2e-dead-link": "npx playwright test --config=playwright.config.dead-link.ts",
     "test:a11y": "test-storybook",
     "test:vrt": "npx playwright test --config=playwright.config.vrt.ts"
   },
@@ -126,7 +128,7 @@
     "react-dom": "^18.3.1",
     "react-intersection-observer": "^9.13.1",
     "react-syntax-highlighter": "^15.5.0",
-    "sass": "^1.79.3",
+    "sass": "^1.80.6",
     "storybook": "^8.3.2",
     "typescript": "^5.4.5",
     "vite": "^5.4.7",

package/partials/index.js

@@ -2138,7 +2138,7 @@ function Kt(N) {
     ...N
   };
   bt("getResetStyles");
-  const J = "@layer ds-reset{*,*::before,*::after{box-sizing:border-box}:root{--ds-spacing-dynamic-xs: 16px;--ds-spacing-dynamic-s: 24px;--ds-spacing-dynamic-m: 32px;--ds-spacing-dynamic-l: 40px;--ds-spacing-dynamic-xl: 56px;--ds-spacing-dynamic-xxl: 80px}@media(min-width: 320px){:root{--ds-spacing-dynamic-xs: 16px;--ds-spacing-dynamic-s: 24px;--ds-spacing-dynamic-m: 32px;--ds-spacing-dynamic-l: 40px;--ds-spacing-dynamic-xl: 56px;--ds-spacing-dynamic-xxl: 80px}}@media(min-width: 768px){:root{--ds-spacing-dynamic-xs: 24px;--ds-spacing-dynamic-s: 32px;--ds-spacing-dynamic-m: 40px;--ds-spacing-dynamic-l: 48px;--ds-spacing-dynamic-xl: 64px;--ds-spacing-dynamic-xxl: 96px}}@media(min-width: 1024px){:root{--ds-spacing-dynamic-xs: 24px;--ds-spacing-dynamic-s: 32px;--ds-spacing-dynamic-m: 40px;--ds-spacing-dynamic-l: 48px;--ds-spacing-dynamic-xl: 64px;--ds-spacing-dynamic-xxl: 96px}}@media(min-width: 1536px){:root{--ds-spacing-dynamic-xs: 32px;--ds-spacing-dynamic-s: 40px;--ds-spacing-dynamic-m: 48px;--ds-spacing-dynamic-l: 56px;--ds-spacing-dynamic-xl: 80px;--ds-spacing-dynamic-xxl: 128px}}@media(min-width: 1668px){:root{--ds-spacing-dynamic-xs: 32px;--ds-spacing-dynamic-s: 40px;--ds-spacing-dynamic-m: 48px;--ds-spacing-dynamic-l: 56px;--ds-spacing-dynamic-xl: 80px;--ds-spacing-dynamic-xxl: 128px}}:where(html){font-family:STIHL Contraface Digital Text Regular, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;font-style:normal;font-variant:normal;hyphens:manual;overflow-wrap:break-word;font-weight:normal;font-size:16px;line-height:1.5;font-size-adjust:.414;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}:where(body){hyphens:manual;line-height:1.5;margin:unset;min-height:100vh}:where(body,h1,h2,h3,h4,p,figure,blockquote,dl,dd){margin-block-end:0}:where(h1,h2,h3,h4,h5,h6){margin:0;padding:0;text-wrap:balance;hyphens:manual;overflow-wrap:break-word}:where(a:not([class])){text-decoration-skip-ink:auto;color:currentColor}:where(button,input,textarea,select){font:inherit}:target{scroll-margin-block:5ex}}";
+  const J = "@layer ds-reset{*,*::before,*::after{box-sizing:border-box}:root{--ds-spacing-dynamic-xs: 16px;--ds-spacing-dynamic-s: 24px;--ds-spacing-dynamic-m: 32px;--ds-spacing-dynamic-l: 40px;--ds-spacing-dynamic-xl: 56px;--ds-spacing-dynamic-xxl: 80px;font-size:100%}@media(min-width: 320px){:root{--ds-spacing-dynamic-xs: 16px;--ds-spacing-dynamic-s: 24px;--ds-spacing-dynamic-m: 32px;--ds-spacing-dynamic-l: 40px;--ds-spacing-dynamic-xl: 56px;--ds-spacing-dynamic-xxl: 80px}}@media(min-width: 768px){:root{--ds-spacing-dynamic-xs: 24px;--ds-spacing-dynamic-s: 32px;--ds-spacing-dynamic-m: 40px;--ds-spacing-dynamic-l: 48px;--ds-spacing-dynamic-xl: 64px;--ds-spacing-dynamic-xxl: 96px}}@media(min-width: 1024px){:root{--ds-spacing-dynamic-xs: 24px;--ds-spacing-dynamic-s: 32px;--ds-spacing-dynamic-m: 40px;--ds-spacing-dynamic-l: 48px;--ds-spacing-dynamic-xl: 64px;--ds-spacing-dynamic-xxl: 96px}}@media(min-width: 1536px){:root{--ds-spacing-dynamic-xs: 32px;--ds-spacing-dynamic-s: 40px;--ds-spacing-dynamic-m: 48px;--ds-spacing-dynamic-l: 56px;--ds-spacing-dynamic-xl: 80px;--ds-spacing-dynamic-xxl: 128px}}@media(min-width: 1668px){:root{--ds-spacing-dynamic-xs: 32px;--ds-spacing-dynamic-s: 40px;--ds-spacing-dynamic-m: 48px;--ds-spacing-dynamic-l: 56px;--ds-spacing-dynamic-xl: 80px;--ds-spacing-dynamic-xxl: 128px}}:where(html){font-family:STIHL Contraface Digital Text Regular, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;font-style:normal;font-variant:normal;hyphens:manual;overflow-wrap:break-word;font-weight:normal;font-size:1rem;line-height:1.5;font-size-adjust:.414;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}:where(body){hyphens:manual;line-height:1.5;margin:unset;min-height:100vh}:where(body,h1,h2,h3,h4,p,figure,blockquote,dl,dd){margin-block-end:0}:where(h1,h2,h3,h4,h5,h6){margin:0;padding:0;text-wrap:balance;hyphens:manual;overflow-wrap:break-word}:where(a:not([class])){text-decoration-skip-ink:auto;color:currentColor}:where(button,input,textarea,select){font:inherit}:target{scroll-margin-block:5ex}}";
   return d === "html" ? `<style data-ds-css-reset-styles>${J}</style>` : /* @__PURE__ */ Fe.jsx("style", { "data-ds-css-reset-styles": !0, suppressHydrationWarning: !0, dangerouslySetInnerHTML: { __html: J } });
 }
 export {

package/radio.DEILy_lV.js

@@ -0,0 +1,114 @@
+"use client";
+import { j as i } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as h } from "./chunks/index.CvOaL64Y.js";
+import { forwardRef as $, useRef as C, useState as E, useEffect as L, useCallback as O } from "react";
+import { u as P } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import './assets/radio.X-RTl_jo.css';const v = (o) => o.replace(/\s+/g, ""), U = "ds-radio_root_tdhm5_1", q = "ds-radio_root--disabled_tdhm5_21", z = "ds-radio_root--with-custom-area_tdhm5_24", F = "ds-radio_radio_tdhm5_28", G = "ds-radio_dot_tdhm5_45", J = "ds-radio_radio--invalid_tdhm5_69", K = "ds-radio_label_tdhm5_74", M = "ds-radio_label--bold_tdhm5_88", Q = "ds-radio_label--hidden_tdhm5_99", T = "ds-radio_label--with-custom-area_tdhm5_111", X = "ds-radio_custom-area_tdhm5_115", Y = "ds-radio_hint_tdhm5_123", Z = "ds-radio_hint--visible_tdhm5_146", tt = "ds-radio_hint--unchecked-hidden_tdhm5_150", dt = "ds-radio_hint--hidden_tdhm5_155", et = "ds-radio_input_tdhm5_168", t = {
+  root: U,
+  "root--disabled": "ds-radio_root--disabled_tdhm5_21",
+  rootDisabled: q,
+  "root--with-custom-area": "ds-radio_root--with-custom-area_tdhm5_24",
+  rootWithCustomArea: z,
+  radio: F,
+  dot: G,
+  "radio--invalid": "ds-radio_radio--invalid_tdhm5_69",
+  radioInvalid: J,
+  label: K,
+  "label--bold": "ds-radio_label--bold_tdhm5_88",
+  labelBold: M,
+  "label--hidden": "ds-radio_label--hidden_tdhm5_99",
+  labelHidden: Q,
+  "label--with-custom-area": "ds-radio_label--with-custom-area_tdhm5_111",
+  labelWithCustomArea: T,
+  "custom-area": "ds-radio_custom-area_tdhm5_115",
+  customArea: X,
+  hint: Y,
+  "hint--visible": "ds-radio_hint--visible_tdhm5_146",
+  hintVisible: Z,
+  "hint--unchecked-hidden": "ds-radio_hint--unchecked-hidden_tdhm5_150",
+  hintUncheckedHidden: tt,
+  "hint--hidden": "ds-radio_hint--hidden_tdhm5_155",
+  hintHidden: dt,
+  input: et
+}, it = $(
+  ({
+    label: o,
+    name: u,
+    value: b,
+    checked: f,
+    className: x,
+    customArea: s,
+    defaultChecked: k = !1,
+    disabled: a = !1,
+    hideLabel: j = !1,
+    hint: r,
+    invalid: N = !1,
+    isBold: g = !1,
+    hideUncheckedHint: l = !1,
+    onChange: _,
+    ...H
+  }, n) => {
+    const w = C(null), d = C(null), [D, A] = E(k), m = f !== void 0, c = m ? f : D;
+    L(() => {
+      d.current && l && ((d.current.style.height === "0px" || d.current.style.height === "") && c ? (d.current.style.height = `${d.current.scrollHeight}px`, d.current.style.opacity = "1") : (d.current.style.opacity = "0", d.current.style.height = "0px"));
+    }, [d, c]);
+    const p = P(j), W = h(
+      t.root,
+      {
+        [t.rootDisabled]: a,
+        [t.rootWithCustomArea]: !!s
+      },
+      x
+    ), B = h(t.label, {
+      [t.labelBold]: g,
+      // hide label only visually to keep them available for assistive technologies
+      [t.labelHidden]: p,
+      [t.labelWithCustomArea]: !!s
+    }), V = () => !l && r ? !0 : !!(l && r && c), I = h(t.hint, {
+      [t.hintHidden]: p,
+      [t.hintUncheckedHidden]: l,
+      [t.hintVisible]: V()
+    }), R = h(t.radio, {
+      [t.radioInvalid]: N
+    }), S = O(
+      (e) => {
+        if (a) {
+          e.preventDefault();
+          return;
+        }
+        m || A(e.target.checked), _ && _(e);
+      },
+      [a, m, _]
+    ), y = r ? `${v(u)}-${v(b)}-description` : void 0;
+    return /* @__PURE__ */ i.jsxs("label", { className: W, children: [
+      /* @__PURE__ */ i.jsx(
+        "input",
+        {
+          type: "radio",
+          value: b,
+          name: u,
+          className: t.input,
+          ref: (e) => {
+            typeof n == "function" ? n(e) : n !== null && (n.current = e), w.current = e;
+          },
+          onChange: S,
+          ...H,
+          disabled: a,
+          checked: c,
+          "aria-label": typeof o == "string" ? o : void 0,
+          "aria-describedby": y
+        }
+      ),
+      /* @__PURE__ */ i.jsx("span", { className: R, children: /* @__PURE__ */ i.jsx("div", { className: t.dot }) }),
+      /* @__PURE__ */ i.jsxs("span", { className: B, children: [
+        o,
+        s && /* @__PURE__ */ i.jsx("div", { className: t.customArea, children: s }),
+        /* @__PURE__ */ i.jsx("span", { id: y, className: I, ref: d, children: r })
+      ] })
+    ] });
+  }
+);
+it.displayName = "DSRadio";
+export {
+  it as DSRadio
+};

package/{radiogroup.SYkZm2DG.js → radiogroup.DeU-HdlP.js}

@@ -2,9 +2,9 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import "./chunks/Fieldset.C9K8BYmH.js";
-import "./radio.DTZNJzMU.js";
-import { D as a } from "./chunks/RadioGroup.D4UOflwr.js";
+import "./chunks/Fieldset.Cjmkgxxk.js";
+import "./radio.DEILy_lV.js";
+import { D as a } from "./chunks/RadioGroup.Crj7NoOs.js";
 export {
   a as DSRadioGroup
 };

package/{select.CYbwR3RW.js → select.BYraFJzz.js}

@@ -3,10 +3,10 @@ import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
 import "./chunks/useBreakpoint.5xBNDiCf.js";
-import "./asterisk.DDn-yX4P.js";
-import "./chunks/Icon.C2o2seDb.js";
-import "./systemfeedback.ZzRUAVYX.js";
-import { D as s } from "./chunks/Select.Ds86q4UC.js";
+import "./asterisk.DpzETKdT.js";
+import "./chunks/Icon.BCmt_XBG.js";
+import "./systemfeedback.C3Pfxxpp.js";
+import { D as s } from "./chunks/Select.E6gLFYLk.js";
 export {
   s as DSSelect
 };

package/skiptocontent.BxvpIB7H.js

@@ -0,0 +1,45 @@
+"use client";
+import { j as k } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as p } from "./chunks/index.CvOaL64Y.js";
+import { g as s } from "./chunks/helpers.B1JT5ShS.js";
+import "react";
+import { DSLink as c } from "./link.DREJAoPG.js";
+import './assets/skiptocontent.PTL3256m.css';const h = "ds-skip-to-content_root_uqkjt_1", m = "ds-skip-to-content_root--dark_uqkjt_8", r = {
+  root: h,
+  "root--dark": "ds-skip-to-content_root--dark_uqkjt_8",
+  rootDark: m
+}, _ = ({
+  children: e = "Skip to main content",
+  className: n,
+  targetElementId: t = "main",
+  theme: o = "light",
+  ...a
+}) => {
+  t.startsWith("#") && console.warn(
+    s(
+      "DSSkipToContent",
+      'The targetElementId should not start with a "#" character. Please provide the id of the element you want to skip to.'
+    )
+  ), (t.startsWith("http") || t.startsWith(".")) && console.warn(
+    s(
+      "DSSkipToContent",
+      'The targetElementId should not start with "http" or ".". Please provide the id of the element you want to skip to.'
+    )
+  );
+  const i = p(r.root, n, {
+    [r.rootDark]: o === "dark"
+  });
+  return /* @__PURE__ */ k.jsx(
+    c,
+    {
+      ...a,
+      className: i,
+      href: `#${t}`,
+      theme: o,
+      children: e
+    }
+  );
+};
+export {
+  _ as DSSkipToContent
+};

package/spinner.Bq97Og-6.js

@@ -0,0 +1,58 @@
+"use client";
+import { j as s } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as l } from "./chunks/index.CvOaL64Y.js";
+import { D as m } from "./chunks/Icon.BCmt_XBG.js";
+import './assets/spinner.2iWJWKyA.css';const _ = "ds-spinner_root_15hmy_1", d = "ds-spinner_root-size-small_15hmy_7", z = "ds-spinner_root-size-medium_15hmy_11", c = "ds-spinner_root-size-large_15hmy_15", h = "ds-spinner_root-size-x-large_15hmy_19", p = "ds-spinner_root-size-inherit_15hmy_23", S = "ds-spinner_rotate_15hmy_1", y = "ds-spinner_screenReaderOnly_15hmy_48", e = {
+  root: _,
+  "root-size-small": "ds-spinner_root-size-small_15hmy_7",
+  rootSizeSmall: d,
+  "root-size-medium": "ds-spinner_root-size-medium_15hmy_11",
+  rootSizeMedium: z,
+  "root-size-large": "ds-spinner_root-size-large_15hmy_15",
+  rootSizeLarge: c,
+  "root-size-x-large": "ds-spinner_root-size-x-large_15hmy_19",
+  rootSizeXLarge: h,
+  "root-size-inherit": "ds-spinner_root-size-inherit_15hmy_23",
+  rootSizeInherit: p,
+  rotate: S,
+  screenReaderOnly: y
+}, L = ({
+  aria: o,
+  className: i,
+  size: r = "small",
+  theme: t = "light",
+  ...n
+}) => {
+  const a = l(e.root, i, {
+    [e.rootSizeSmall]: r === "small",
+    [e.rootSizeMedium]: r === "medium",
+    [e.rootSizeLarge]: r === "large",
+    [e.rootSizeXLarge]: r === "x-large",
+    [e.rootSizeInherit]: r === "inherit"
+  });
+  return /* @__PURE__ */ s.jsxs(
+    "span",
+    {
+      className: a,
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-label": (o == null ? void 0 : o["aria-label"]) || void 0,
+      ...n,
+      children: [
+        /* @__PURE__ */ s.jsx("span", { className: e.screenReaderOnly, children: " " }),
+        /* @__PURE__ */ s.jsx(
+          m,
+          {
+            name: "loading-spinner",
+            theme: t,
+            focusable: "false",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  L as DSSpinner
+};

package/styles/scss/ds/index.scss

@@ -0,0 +1,19 @@
+@forward 'lib/animation';
+@forward 'lib/breakpoints';
+@forward 'lib/container-query';
+@forward 'lib/grid';
+@forward 'lib/grid-extended';
+@forward 'lib/grid-full';
+@forward 'lib/grid-main';
+@forward 'lib/grid-narrow';
+@forward 'lib/grid-sidebar';
+@forward 'lib/grid-sidebar-sidebar';
+@forward 'lib/heading';
+@forward 'lib/link';
+@forward 'lib/media-query';
+@forward 'lib/shadow';
+@forward 'lib/spacing';
+@forward 'lib/spacing-dynamic';
+@forward 'lib/text';
+@forward 'lib/theme';
+@forward 'lib/transition';

package/styles/scss/ds/lib/animation.scss

@@ -0,0 +1,21 @@
+$animation-duration-100: var(--ds-animation-duration, 100ms);
+$animation-duration-250: var(--ds-animation-duration, 250ms);
+$animation-duration-400: var(--ds-animation-duration, 400ms);
+
+$animation-durations: (
+  '100': $animation-duration-100,
+  '250': $animation-duration-250,
+  '400': $animation-duration-400,
+);
+
+$motion-functional-linear: linear;
+$motion-functional-ease-in: cubic-bezier(0.5, 0, 1, 1);
+$motion-functional-ease-out: cubic-bezier(0, 0, 0.5, 1);
+$motion-functional-ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
+
+$animation-easing-functions: (
+  'linear': $motion-functional-linear,
+  'ease-in': $motion-functional-ease-in,
+  'ease-out': $motion-functional-ease-out,
+  'ease-in-out': $motion-functional-ease-in-out,
+);

package/styles/scss/ds/lib/breakpoints.scss

@@ -0,0 +1,15 @@
+$breakpoint-base: 0;
+$breakpoint-s: 320;
+$breakpoint-m: 768;
+$breakpoint-l: 1024;
+$breakpoint-xl: 1536;
+$breakpoint-xxl: 1668;
+
+$breakpoints: (
+  'base': $breakpoint-base,
+  's': $breakpoint-s,
+  'm': $breakpoint-m,
+  'l': $breakpoint-l,
+  'xl': $breakpoint-xl,
+  'xxl': $breakpoint-xxl,
+);

package/styles/scss/ds/lib/container-query.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use 'breakpoints' as *;
+
+@mixin container-query-min($min: null, $container-name: null) {
+  @if map.has-key($breakpoints, $min) {
+    $value: #{map.get($breakpoints, $min)}px;
+    @if $container-name {
+      @container #{$container-name} (min-width: #{$value}) {
+        @content;
+      }
+    } @else {
+      @container (min-width: #{$value}) {
+        @content;
+      }
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.container-query-min()]: Passed '#{$min}' breakpoint is not available in ds.container-query-min() mixin.";
+  }
+}
+
+@mixin container-query-max($max: null, $container-name: null) {
+  @if map.has-key($breakpoints, $max) {
+    $value: #{map.get($breakpoints, $max)}px;
+    @if $container-name {
+      @container #{$container-name} (width < #{$value}) {
+        @content;
+      }
+    } @else {
+      @container (width < #{$value}) {
+        @content;
+      }
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.container-query-max()]: Passed '#{$max}' breakpoint is not available in ds.container-query-max() mixin.";
+  }
+}
+
+@mixin container-query-min-max($min: null, $max: null, $container-name: null) {
+  @if map.has-key($breakpoints, $min) and map.has-key($breakpoints, $max) {
+    $min-value: #{map.get($breakpoints, $min)}px;
+    $max-value: #{map.get($breakpoints, $max)}px;
+    @if $container-name {
+      @container #{$container-name} (min-width: #{$min-value}) and (width < #{$max-value}) {
+        @content;
+      }
+    } @else {
+      @container (min-width: #{$min-value}) and (width < #{$max-value}) {
+        @content;
+      }
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.container-query-min-max()]: Passed '#{$min}' and/or '#{$max}' breakpoint is not available in ds.container-query-min-max() mixin.";
+  }
+}

package/styles/scss/ds/lib/ds-internal/_a11y.scss

@@ -0,0 +1,15 @@
+
+
+
+@mixin visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  text-indent: -999999px;
+  white-space: nowrap;
+}