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

package/link.BN6AZfhG.js

@@ -0,0 +1,115 @@
+"use client";
+import { j as h } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as g } from "./chunks/index.CvOaL64Y.js";
+import { u as i } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { DSIcon as p } from "./icon.PX9_1kNB.js";
+import './assets/link.V7pJOW1p.css';const F = "_root_1rqzw_125", H = "_root--highlight_1rqzw_191", S = "_root--dark-highlight_1rqzw_191", x = "_root--filled_1rqzw_269", b = "_root--outline_1rqzw_297", j = "_root--ghost_1rqzw_324", L = "_root--ghost-flush_1rqzw_349", C = "_root--small_1rqzw_355", N = "_root--dark-filled_1rqzw_430", T = "_root--dark-outline_1rqzw_489", B = "_root--dark-ghost_1rqzw_547", E = "_root--dark-ghost-flush_1rqzw_603", R = "_root--icon-left_1rqzw_662", V = "_root--icon-only_1rqzw_678", A = "_root--icon-only-small_1rqzw_682", J = "_label--hidden_1rqzw_689", o = {
+  root: F,
+  "root--highlight": "_root--highlight_1rqzw_191",
+  rootHighlight: H,
+  "root--dark-highlight": "_root--dark-highlight_1rqzw_191",
+  rootDarkHighlight: S,
+  "root--filled": "_root--filled_1rqzw_269",
+  rootFilled: x,
+  "root--outline": "_root--outline_1rqzw_297",
+  rootOutline: b,
+  "root--ghost": "_root--ghost_1rqzw_324",
+  rootGhost: j,
+  "root--ghost-flush": "_root--ghost-flush_1rqzw_349",
+  rootGhostFlush: L,
+  "root--small": "_root--small_1rqzw_355",
+  rootSmall: C,
+  "root--dark-filled": "_root--dark-filled_1rqzw_430",
+  rootDarkFilled: N,
+  "root--dark-outline": "_root--dark-outline_1rqzw_489",
+  rootDarkOutline: T,
+  "root--dark-ghost": "_root--dark-ghost_1rqzw_547",
+  rootDarkGhost: B,
+  "root--dark-ghost-flush": "_root--dark-ghost-flush_1rqzw_603",
+  rootDarkGhostFlush: E,
+  "root--icon-left": "_root--icon-left_1rqzw_662",
+  rootIconLeft: R,
+  "root--icon-only": "_root--icon-only_1rqzw_678",
+  rootIconOnly: V,
+  "root--icon-only-small": "_root--icon-only-small_1rqzw_682",
+  rootIconOnlySmall: A,
+  "label--hidden": "_label--hidden_1rqzw_689",
+  labelHidden: J
+}, U = ({
+  children: c,
+  aria: k,
+  className: u,
+  dataTrackingid: q,
+  download: w,
+  hideLabel: _ = !1,
+  href: n,
+  iconName: e,
+  iconPosition: f = "left",
+  iconSource: a,
+  isFlush: l = !1,
+  referrerPolicy: z,
+  rel: m,
+  size: s = "medium",
+  target: D = "_self",
+  theme: r = "light",
+  variant: t = "filled",
+  ...y
+}) => {
+  const G = g(o.root, u, {
+    // variant
+    [o.rootFilled]: t === "filled",
+    [o.rootHighlight]: t === "highlight",
+    [o.rootOutline]: t === "outline",
+    [o.rootGhost]: t === "ghost" && l !== !0,
+    // isFlush
+    [o.rootGhostFlush]: t === "ghost" && l === !0,
+    // dark theme
+    [o.rootDarkFilled]: r === "dark" && t === "filled",
+    [o.rootDarkHighlight]: r === "dark" && t === "highlight",
+    [o.rootDarkOutline]: r === "dark" && t === "outline",
+    [o.rootDarkGhost]: r === "dark" && t === "ghost" && l !== !0,
+    // dark isFlush
+    [o.rootDarkGhostFlush]: r === "dark" && t === "ghost" && l === !0,
+    // size
+    [o.rootSmall]: s === "small",
+    // icon position
+    [o.rootIconLeft]: f === "left",
+    // icon only
+    [o.rootIconOnly]: i(_) && s === "medium",
+    [o.rootIconOnlySmall]: i(_) && s === "small"
+  }), O = g({
+    // hide label only visually to keep them available for assistive technologies
+    [o.labelHidden]: i(_)
+  }), I = r === "light" && t === "filled" || r === "dark" && t === "outline" || r === "dark" && t === "ghost" ? "dark" : "light", d = n === void 0 ? "span" : "a";
+  return /* @__PURE__ */ h.jsxs(
+    d,
+    {
+      className: G,
+      "data-trackingid": q,
+      ...d === "a" && {
+        href: n,
+        target: D,
+        rel: m,
+        referrerPolicy: z,
+        download: w
+      },
+      ...k,
+      ...y,
+      children: [
+        /* @__PURE__ */ h.jsx("span", { className: O, children: c }),
+        (e || a) && /* @__PURE__ */ h.jsx(
+          p,
+          {
+            name: e,
+            theme: I,
+            source: a,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  U as DSLink
+};

package/linkstandalone.4-fyRd08.js

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

package/{logo.e6576fe3.js → logo.C_oJ8isW.js}

@@ -1,32 +1,33 @@
-import "./assets/Logo.09e48e82.css";
-import { j as a } from "./chunks/jsx-runtime.5c071667.js";
-import { c as o } from "./chunks/index.8021d3e0.js";
-const v = "_anchor_115us_25", k = "_svg_115us_26", e = "_anchor--dark_115us_65", d = "_svg-background_115us_96", u = "_svg-background--dark_115us_99", x = "_svg-text_115us_102", i = "_svg-text--dark_115us_105", s = {
-  anchor: v,
-  svg: k,
-  "anchor--dark": "_anchor--dark_115us_65",
+"use client";
+import { j as a } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as n } from "./chunks/index.CvOaL64Y.js";
+import './assets/logo.BbHYgnWo.css';const l = "_anchor_12s9w_63", v = "_svg_12s9w_64", e = "_anchor--dark_12s9w_103", x = "_svg-background_12s9w_134", w = "_svg-background--dark_12s9w_137", u = "_svg-text_12s9w_140", i = "_svg-text--dark_12s9w_143", s = {
+  anchor: l,
+  svg: v,
+  "anchor--dark": "_anchor--dark_12s9w_103",
   anchorDark: e,
-  "svg-background": "_svg-background_115us_96",
-  svgBackground: d,
-  "svg-background--dark": "_svg-background--dark_115us_99",
-  svgBackgroundDark: u,
-  "svg-text": "_svg-text_115us_102",
-  svgText: x,
-  "svg-text--dark": "_svg-text--dark_115us_105",
+  "svg-background": "_svg-background_12s9w_134",
+  svgBackground: x,
+  "svg-background--dark": "_svg-background--dark_12s9w_137",
+  svgBackgroundDark: w,
+  "svg-text": "_svg-text_12s9w_140",
+  svgText: u,
+  "svg-text--dark": "_svg-text--dark_12s9w_143",
   svgTextDark: i
-}, T = ({
-  aria: n,
-  className: g,
+}, B = ({
+  aria: _,
+  className: c,
   href: r,
   target: h = "_self",
-  theme: _ = "light",
-  ...l
+  theme: g,
+  variant: k = "standard",
+  ...d
 }) => {
-  const c = _ === "dark", t = /* @__PURE__ */ a.jsxs(
+  const t = k === "background" || g === "dark", o = /* @__PURE__ */ a.jsxs(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      className: o(s.svg, !r && g),
+      className: n(s.svg, !r && c),
       viewBox: "0 0 408 179",
       width: "100%",
       height: "100%",
@@ -35,14 +36,14 @@ const v = "_anchor_115us_25", k = "_svg_115us_26", e = "_anchor--dark_115us_65",
         /* @__PURE__ */ a.jsx(
           "path",
           {
-            className: c ? s.svgBackgroundDark : s.svgBackground,
+            className: t ? s.svgBackgroundDark : s.svgBackground,
             d: "M408 0H0v179h408V0Z"
           }
         ),
         /* @__PURE__ */ a.jsx(
           "path",
           {
-            className: c ? s.svgTextDark : s.svgText,
+            className: t ? 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"
           }
         )
@@ -52,17 +53,17 @@ const v = "_anchor_115us_25", k = "_svg_115us_26", e = "_anchor--dark_115us_65",
   return r ? /* @__PURE__ */ a.jsx(
     "a",
     {
-      className: o(s.anchor, g, {
-        [s.anchorDark]: c
+      className: n(s.anchor, c, {
+        [s.anchorDark]: g === "dark"
       }),
       href: r,
       target: h,
-      ...n,
-      ...l,
-      children: t
+      ..._,
+      ...d,
+      children: o
     }
-  ) : t;
+  ) : o;
 };
 export {
-  T as DSLogo
+  B as DSLogo
 };

package/optioncheckbox.-DRnW_ch.js

@@ -0,0 +1,43 @@
+"use client";
+import { j as e } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as s } from "./chunks/index.CvOaL64Y.js";
+import { DSIcon as _ } from "./icon.PX9_1kNB.js";
+import './assets/optioncheckbox.C-K1FLhc.css';const l = "_root_1sig6_125", k = "_root--disabled_1sig6_144", d = "_checkbox_1sig6_148", n = "_icon-check_1sig6_162", r = "_checkbox--checked_1sig6_181", x = "_checkbox--disabled_1sig6_184", m = "_label_1sig6_201", c = {
+  root: l,
+  "root--disabled": "_root--disabled_1sig6_144",
+  rootDisabled: k,
+  checkbox: d,
+  "icon-check": "_icon-check_1sig6_162",
+  iconCheck: n,
+  "checkbox--checked": "_checkbox--checked_1sig6_181",
+  checkboxChecked: r,
+  "checkbox--disabled": "_checkbox--disabled_1sig6_184",
+  checkboxDisabled: x,
+  label: m
+}, j = ({
+  label: i,
+  checked: h,
+  className: a,
+  disabled: o
+}) => {
+  const b = s(c.root, {
+    [c.rootDisabled]: o
+  }), t = s(c.checkbox, {
+    [c.checkboxDisabled]: o,
+    [c.checkboxChecked]: h
+  });
+  return /* @__PURE__ */ e.jsx("div", { className: a, children: /* @__PURE__ */ e.jsxs("div", { className: b, children: [
+    /* @__PURE__ */ e.jsx("span", { className: t, children: /* @__PURE__ */ e.jsx(
+      _,
+      {
+        name: "check",
+        className: c.iconCheck,
+        "aria-hidden": "true"
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx("span", { className: c.label, children: i })
+  ] }) });
+};
+export {
+  j as OptionCheckbox
+};

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.1",
+  "version": "1.0.0-RC.3",
   "license": "SEE LICENSE IN LICENSE",
-  "homepage": "https://designsystem.stihl.de",
+  "homepage": "https://main--63440bbb95889041542a5ba3.chromatic.com",
   "keywords": [
     "stihl",
     "design",
@@ -74,61 +74,61 @@
     "test:vrt": "npx playwright test --config=playwright.config.vrt.ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.24.5",
     "@juggle/resize-observer": "^3.4.0",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.44.0",
     "@react-docgen/cli": "^2.0.3",
-    "@storybook/addon-a11y": "^8.0.6",
-    "@storybook/addon-actions": "^8.0.6",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
-    "@storybook/blocks": "^8.0.6",
-    "@storybook/react": "^8.0.6",
-    "@storybook/react-vite": "^8.0.6",
-    "@storybook/test": "^8.0.6",
-    "@storybook/test-runner": "^0.17.0",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@types/node": "^20.8.8",
-    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-syntax-highlighter": "^15.5.11",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "@vitejs/plugin-react": "^4.1.0",
+    "@storybook/addon-a11y": "^8.1.1",
+    "@storybook/addon-actions": "^8.1.1",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/blocks": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-vite": "^8.1.1",
+    "@storybook/test": "^8.1.1",
+    "@storybook/test-runner": "^0.18.1",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "anima-storybook-cli": "^0.13.1",
-    "axe-playwright": "^1.2.3",
+    "axe-playwright": "^2.0.1",
     "babel-loader": "^9.1.3",
-    "change-case": "^5.1.2",
-    "classnames": "^2.3.2",
+    "change-case": "^5.4.4",
+    "classnames": "^2.5.1",
     "concurrently": "^8.2.2",
-    "eslint": "^8.52.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "globby": "^13.2.2",
+    "globby": "^14.0.1",
     "http-server": "^14.1.1",
-    "jsdom": "^22.1.0",
-    "react": "^18.x",
+    "jsdom": "^24.0.0",
+    "react": "^18.3.1",
     "react-docgen": "^7.0.3",
-    "react-dom": "^18.x",
-    "react-intersection-observer": "^9.5.2",
+    "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.10.2",
     "react-syntax-highlighter": "^15.5.0",
-    "sass": "^1.69.4",
-    "storybook": "^8.0.6",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-plugin-dts": "^3.6.1",
+    "sass": "^1.77.2",
+    "storybook": "^8.1.1",
+    "typescript": "^5.4.5",
+    "vite": "5.2.11",
+    "vite-plugin-dts": "^3.9.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-lib-inject-css": "^1.3.0",
-    "vite-plugin-svgr": "^3.3.0",
-    "vitest": "^0.34.6"
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "react": ">=17.0.0 <19.0.0",
     "react-dom": ">=17.0.0 <19.0.0",
-    "react-intersection-observer": "^9.5.2",
+    "react-intersection-observer": "^9.10.2",
     "react-select": "^5.8.0"
   }
 }