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

package/logo.C96KaG1P.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as a, jsxs as v } from "react/jsx-runtime";
+import { c as l } from "./chunks/index.CEyLAtio.js";
+import { forwardRef as w, useState as y, useEffect as L } from "react";
+import { g as b } from "./chunks/helpers.BbWkXTr3.js";
+import "./chunks/index.CgTHIF3K.js";
+import './assets/logo._GqPgimo.css';const H = "ds-logo_anchor_m1yba_2", k = "ds-logo_anchor--main_m1yba_6", x = "ds-logo_anchor--reduced_m1yba_13", N = "ds-logo_anchor--dark_m1yba_51", R = "ds-logo_svg_m1yba_81", T = "ds-logo_svg-text_m1yba_87", I = "ds-logo_placeholder-reduced_m1yba_91", c = {
+  anchor: H,
+  anchorMain: k,
+  anchorReduced: x,
+  anchorDark: N,
+  svg: R,
+  svgText: T,
+  placeholderReduced: I
+}, D = w(({
+  aria: u,
+  className: d,
+  logo: r = "main",
+  href: s,
+  target: g = "_self",
+  theme: p = "light",
+  ..._
+}, f) => {
+  const i = ({
+    className: S,
+    logo: o
+  }) => {
+    const h = l(c.svg, !s && S), [m, n] = y(null);
+    L(() => {
+      let t = !0;
+      return o !== "main" ? (async () => {
+        try {
+          let e;
+          switch (o) {
+            case "reduced-main":
+              e = await import("./chunks/default-icon.D_-oBHyT.js");
+              break;
+            case "reduced-connected":
+              e = await import("./chunks/connected-icon.BEijTRDG.js");
+              break;
+            case "reduced-mystihl":
+              e = await import("./chunks/mystihl-icon.xHpCyYJf.js");
+              break;
+            case "reduced-imow":
+              e = await import("./chunks/imow-icon.CyH72ySI.js");
+              break;
+            default:
+              return;
+          }
+          t && n(() => e.default);
+        } catch (e) {
+          t && (n(null), console.error(b("DSLogo", e instanceof Error ? e.message : String(e))));
+        }
+      })() : n(null), () => {
+        t = !1;
+      };
+    }, [o]);
+    const M = {
+      main: "STIHL",
+      "reduced-main": "STIHL",
+      "reduced-connected": "STIHL Connected",
+      "reduced-imow": "STIHL iMOW",
+      "reduced-mystihl": "MY STIHL"
+    };
+    return o === "main" ? /* @__PURE__ */ v("svg", { xmlns: "http://www.w3.org/2000/svg", className: h, viewBox: "0 0 408 179", children: [
+      /* @__PURE__ */ a("title", { children: "STIHL" }),
+      /* @__PURE__ */ a("path", { className: c.svgBackground, d: "M408 0H0v179h408V0Z" }),
+      /* @__PURE__ */ a("path", { className: c.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" })
+    ] }) : m === null ? /* @__PURE__ */ a("div", { className: l(c.placeholderReduced) }) : /* @__PURE__ */ a(m, { className: h, title: M[o] });
+  };
+  return s ? /* @__PURE__ */ a("a", { className: l(c.anchor, {
+    [c.anchorDark]: p === "dark",
+    [c.anchorMain]: r === "main",
+    [c.anchorReduced]: r !== "main"
+  }, d), href: s, target: g, ...u, ..._, ref: f, children: /* @__PURE__ */ a(i, { logo: r }) }) : /* @__PURE__ */ a(i, { logo: r, className: d });
+});
+D.displayName = "DSLogo";
+export {
+  D as DSLogo
+};

package/logo.d.ts

@@ -1 +1,2 @@
 export * from './components/Logo/Logo'
+export {}

package/megamenu.CdHrEeoh.js

@@ -0,0 +1,12 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CgTHIF3K.js";
+import { D as s } from "./chunks/MegaMenu.BY7eOnhj.js";
+import "react";
+import "./chunks/floating-ui.react.x0F9CYgn.js";
+import "./chunks/index.CEyLAtio.js";
+import "./chunks/helpers.BbWkXTr3.js";
+import "./chunks/Header.DqZRryB5.js";
+export {
+  s as DSMegaMenu
+};

package/megamenu.d.ts

@@ -0,0 +1,2 @@
+export * from './components/MegaMenu/MegaMenu'
+export {}

package/mystihl-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><path fill="#F37A1F" d="M0 0h512v512H0z"/><path fill="#fff" fill-rule="evenodd" d="M44 222v30l212-96 212 96v-30l-212-96-212 96Zm26 35v129h28V274.5h316V386h28V257l-186-85-186 85Zm328 59v-26H114v26h284Z" clip-rule="evenodd"/></svg>

package/navigationtablist.CVjh1k-b.js

@@ -0,0 +1,9 @@
+"use client";
+import "react/jsx-runtime";
+import "react";
+import "./chunks/Icon.DGTYCv63.js";
+import "./numberindicator.Ddf3ESi7.js";
+import { N as a } from "./chunks/NavigationTabList.dYFYTmWv.js";
+export {
+  a as NavigationTabList
+};

package/navigationtablist.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Tabs/TabList/NavigationTabList/NavigationTabList'
+export {}

package/navigationtabs.BGfi9AG2.js

@@ -0,0 +1,9 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CgTHIF3K.js";
+import "react";
+import "./tablist.g_Nwu6GA.js";
+import { D as a } from "./chunks/NavigationTabs.ClpVGcl0.js";
+export {
+  a as DSNavigationTabs
+};

package/navigationtabs.d.ts

@@ -0,0 +1,2 @@
+export * from './components/NavigationTabs/NavigationTabs'
+export {}

package/notification.Dn-FZWEL.js

@@ -0,0 +1,10 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CgTHIF3K.js";
+import "./chunks/index.CEyLAtio.js";
+import "./chunks/Button.B7xF1E19.js";
+import "./chunks/Icon.DGTYCv63.js";
+import { D as a } from "./chunks/Notification.DIdIhGTQ.js";
+export {
+  a as DSNotification
+};

package/notification.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Notification/Notification'
+export {}

package/numberindicator.Ddf3ESi7.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { d as _ } from "./chunks/index.CgTHIF3K.js";
+import { c as p } from "./chunks/index.CEyLAtio.js";
+import './assets/numberindicator.O6XwvtL0.css';const b = "ds-number-indicator_root_ueqlv_1", v = "ds-number-indicator_root--has-content_ueqlv_24", C = "ds-number-indicator_root--highlight_ueqlv_29", g = {
+  root: b,
+  rootHasContent: v,
+  rootHighlight: C
+}, x = (c) => {
+  const t = _.c(16);
+  let e, o, n, r;
+  t[0] !== c ? ({
+    label: o,
+    className: e,
+    variant: r,
+    ...n
+  } = c, t[0] = c, t[1] = e, t[2] = o, t[3] = n, t[4] = r) : (e = t[1], o = t[2], n = t[3], r = t[4]);
+  const u = r === void 0 ? "default" : r, s = typeof o == "string" && o.trim().length > 0;
+  let i;
+  t[5] !== s || t[6] !== o ? (i = s ? o.trim().substring(0, 4) : null, t[5] = s, t[6] = o, t[7] = i) : i = t[7];
+  const h = i, m = u === "highlight" || !s;
+  let l;
+  t[8] !== e || t[9] !== s || t[10] !== m ? (l = p(g.root, e, {
+    [g.rootHasContent]: s,
+    [g.rootHighlight]: m
+  }), t[8] = e, t[9] = s, t[10] = m, t[11] = l) : l = t[11];
+  const d = l;
+  let a;
+  return t[12] !== n || t[13] !== d || t[14] !== h ? (a = /* @__PURE__ */ f("span", { className: d, ...n, children: h }), t[12] = n, t[13] = d, t[14] = h, t[15] = a) : a = t[15], a;
+};
+export {
+  x as NumberIndicator
+};

package/numberindicator.d.ts

@@ -0,0 +1,2 @@
+export * from './components/NumberIndicator/NumberIndicator'
+export {}

package/optioncheckbox.D97W3zeW.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as m, jsxs as p } from "react/jsx-runtime";
+import { d as C } from "./chunks/index.CgTHIF3K.js";
+import { c as _ } from "./chunks/index.CEyLAtio.js";
+import { D } from "./chunks/Icon.DGTYCv63.js";
+import './assets/optioncheckbox.DAffEKvY.css';const q = "ds-combobox_root_q88mt_1", N = "ds-combobox_root--disabled_q88mt_21", u = "ds-combobox_checkbox_q88mt_25", j = "ds-combobox_icon-check_q88mt_41", v = "ds-combobox_checkbox--checked_q88mt_62", y = "ds-combobox_checkbox--disabled_q88mt_65", S = "ds-combobox_label_q88mt_82", o = {
+  root: q,
+  rootDisabled: N,
+  checkbox: u,
+  iconCheck: j,
+  checkboxChecked: v,
+  checkboxDisabled: y,
+  label: S
+}, g = (f) => {
+  const e = C.c(17), {
+    label: n,
+    checked: h,
+    className: r,
+    disabled: c
+  } = f;
+  let b;
+  e[0] !== c ? (b = _(o.root, {
+    [o.rootDisabled]: c
+  }), e[0] = c, e[1] = b) : b = e[1];
+  const x = b;
+  let a;
+  e[2] !== h || e[3] !== c ? (a = _(o.checkbox, {
+    [o.checkboxDisabled]: c,
+    [o.checkboxChecked]: h
+  }), e[2] = h, e[3] = c, e[4] = a) : a = e[4];
+  const k = a;
+  let i;
+  e[5] === Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ m(D, { name: "check", className: o.iconCheck, "aria-hidden": "true" }), e[5] = i) : i = e[5];
+  let s;
+  e[6] !== k ? (s = /* @__PURE__ */ m("span", { className: k, children: i }), e[6] = k, e[7] = s) : s = e[7];
+  let t;
+  e[8] !== n ? (t = /* @__PURE__ */ m("span", { className: o.label, children: n }), e[8] = n, e[9] = t) : t = e[9];
+  let l;
+  e[10] !== x || e[11] !== s || e[12] !== t ? (l = /* @__PURE__ */ p("div", { className: x, children: [
+    s,
+    t
+  ] }), e[10] = x, e[11] = s, e[12] = t, e[13] = l) : l = e[13];
+  let d;
+  return e[14] !== r || e[15] !== l ? (d = /* @__PURE__ */ m("div", { className: r, children: l }), e[14] = r, e[15] = l, e[16] = d) : d = e[16], d;
+};
+export {
+  g as OptionCheckbox
+};

package/optioncheckbox.d.ts

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

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.3",
+  "version": "1.0.0-RC.30",
   "license": "SEE LICENSE IN LICENSE",
-  "homepage": "https://main--63440bbb95889041542a5ba3.chromatic.com",
+  "homepage": "https://designsystem.stihl.de/",
   "keywords": [
     "stihl",
     "design",
@@ -30,13 +30,22 @@
     "./styles/fonts/*.css": {
       "default": "./styles/fonts/*.css"
     },
-    "./styles/scss": "./styles/scss/_index.scss",
+    "./styles/scss/ds": "./styles/scss/ds/index.scss",
+    "./styles/js": {
+      "types": "./styles/js/index.d.ts",
+      "import": "./styles/js/index.es.js",
+      "default": "./styles/js/index.es.js"
+    },
     "./partials": {
       "types": "./partials/index.d.ts",
       "import": "./partials/index.js",
       "require": "./partials/index.js"
     }
   },
+  "engines": {
+    "node": ">=18",
+    "npm": ">=10"
+  },
   "typesVersions": {
     "*": {
       "partials": [
@@ -47,88 +56,106 @@
   "scripts": {
     "predev": "npx vite-node scripts/extractAriaTypes.ts && prettier ./src/types/aria-types.d.ts --write",
     "dev": "npm run storybook",
-    "prebuild": "npm run build:propsOverview",
+    "prebuild": "npm run lint && npm run build:propsOverview",
     "build": "npm run build:components && npm run build:storybook",
-    "build:components": "tsc && vite build && npm run build:copyUtilitiesBuild && npm run build:copyTypes && cp package.json ./dist",
+    "build:components": "tsc && vite build && npm run build:utilities:partials && npm run build:copyUtilitiesBuild && npm run build:copyTypes && cp package.json ./dist && npx vite-node scripts/cleanDistPackageJSON.ts",
+    "build:utilities:partials": "cd ../utilities && npm run build:partials:bundle",
     "build:copyComponents": "npm run build:components && ../../copyDistToExampleApps.sh '../../'",
     "build:copyTypes": "TARGET=./dist/types && rm -rf $TARGET && mkdir -p $TARGET && cp -r ./src/types/* $TARGET/",
-    "build:copyUtilitiesBuild": "npm run build:copyUtilitiesBuild:scss && npm run build:copyUtilitiesBuild:fonts && npm run build:copyUtilitiesBuild:partials",
+    "build:copyPatterns": "npx vite-node scripts/copyPatterns.ts --clear-dest --no-verbose && npm run build --prefix ../../../examples",
+    "build:copyUtilitiesBuild": "npm run build:copyUtilitiesBuild:scss && npm run build:copyUtilitiesBuild:fonts && npm run build:copyUtilitiesBuild:partials && npm run build:copyUtilitiesBuild:js",
     "build:copyUtilitiesBuild:scss": "TARGET=./dist/styles/scss && rm -rf $TARGET && mkdir -p $TARGET && cp -r ../utilities/dist/scss/* $TARGET/",
     "build:copyUtilitiesBuild:fonts": "TARGET=./dist/styles/fonts && rm -rf $TARGET && mkdir -p $TARGET && cp -r ../utilities/dist/fonts/* $TARGET/",
     "build:copyUtilitiesBuild:partials": "TARGET=./dist/partials && rm -rf $TARGET && mkdir -p $TARGET && cp -r ../utilities/dist/partials/* $TARGET/",
+    "build:copyUtilitiesBuild:js": "TARGET=./dist/styles/js && rm -rf $TARGET && mkdir -p $TARGET && cp -r ../utilities/dist/js/* $TARGET/",
     "build:storybook": "storybook build",
-    "build:propsOverview": "EXCLUDED_COMPS=**/Asterisk.tsx,**/CustomReactSelect.tsx,**/OptionCheckbox.tsx,**/SystemFeedback.tsx,**/Radio.tsx && react-docgen ./src/components/**/*.tsx -o ./src/stories/Introduction/component-props.json -i **/*.test.tsx,**/*.utils.tsx,$EXCLUDED_COMPS",
+    "build:propsOverview": "npx vite-node scripts/generatePropsOverview.ts",
     "release": "cp package.json LICENSE.md README.md ./dist && cd dist && npm publish",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "sync": "npm run build && anima-storybook sync",
-    "lint": "eslint -c .eslintrc.cjs './src/**/*.{ts,tsx}'",
+    "lint": "eslint -c eslint.config.js",
     "pretest:smoke": "npm run build:components && npm run build:propsOverview",
     "test:smoke": "vitest --config vitest.smoke.config.ts",
     "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 --project=chromium",
+    "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"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
+    "@babel/core": "^7.27.1",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@floating-ui/react": "^0.27.12",
     "@juggle/resize-observer": "^3.4.0",
-    "@playwright/test": "^1.44.0",
-    "@react-docgen/cli": "^2.0.3",
-    "@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",
+    "@playwright/test": "^1.52.0",
+    "@react-docgen/cli": "^3.0.0",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/core-events": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/test-runner": "^0.22.0",
+    "@storybook/theming": "^8.6.12",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.15.17",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
     "@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",
+    "@typescript-eslint/eslint-plugin": "^8.32.0",
+    "@typescript-eslint/parser": "^8.32.0",
+    "@vitejs/plugin-react": "^4.4.1",
     "anima-storybook-cli": "^0.13.1",
-    "axe-playwright": "^2.0.1",
-    "babel-loader": "^9.1.3",
+    "axe-playwright": "^2.1.0",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-react-compiler": "^19.1.0-rc.1",
     "change-case": "^5.4.4",
     "classnames": "^2.5.1",
-    "concurrently": "^8.2.2",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.8.0",
-    "globby": "^14.0.1",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.26.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^16.1.0",
+    "globby": "^14.1.0",
     "http-server": "^14.1.1",
-    "jsdom": "^24.0.0",
-    "react": "^18.3.1",
-    "react-docgen": "^7.0.3",
-    "react-dom": "^18.3.1",
-    "react-intersection-observer": "^9.10.2",
-    "react-syntax-highlighter": "^15.5.0",
-    "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": "^2.1.1",
-    "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^1.6.0"
+    "jsdom": "^26.1.0",
+    "posthog-js": "^1.240.5",
+    "prettier-plugin-organize-imports": "^4.2.0",
+    "react": "^19.1.0",
+    "react-compiler-runtime": "^19.1.0-rc.1",
+    "react-docgen": "^8.0.0",
+    "react-dom": "^19.1.0",
+    "react-intersection-observer": "^9.16.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "sass": "^1.87.0",
+    "storybook": "^8.6.12",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^3.1.3"
   },
   "peerDependencies": {
+    "@floating-ui/react": "^0.27.12",
     "classnames": "^2.5.1",
-    "react": ">=17.0.0 <19.0.0",
-    "react-dom": ">=17.0.0 <19.0.0",
-    "react-intersection-observer": "^9.10.2",
-    "react-select": "^5.8.0"
+    "react": ">=17.0.0 <20",
+    "react-dom": ">=17.0.0 <20",
+    "react-intersection-observer": "^9.16.0",
+    "react-select": "^5.10.2"
   }
 }

package/partials/assets.const.js

@@ -0,0 +1,2 @@
+export const NEXT_WITH_APP_ROUTER_MODE = 'nextWithAppRouter';
+export const SUPPORTED_PRODUCTS = ['imow', 'mystihl', 'connected'];

package/partials/connected-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><path fill="#F37A1F" d="M0 0h512v512H0z"/><path fill="#fff" d="M366.806 304.042c-17.69 35.56-54.39 60.01-96.8 60.04-57.87.04-105.97-46.12-108.17-103.95-2.35-61.65 46.94-112.38 108.08-112.38 42.34 0 78.99 24.33 96.75 59.77l48.01-48.01c-31.31-46.94-84.85-77.78-145.57-77.51-96.25.44-174.4 80.08-173.09 176.33 1.28 94.95 78.65 171.51 173.9 171.51 60.49 0 113.77-30.89 144.93-77.76l-48.04-48.04Z"/><path fill="#fff" d="M320.115 257.376c-.92-.92-.92-2.41 0-3.32l36.3-36.3c-9.38-21.21-26.31-38.31-47.39-47.92l-84.21 84.21c-.92.91-.92 2.4 0 3.32l84.5 84.5c21.05-9.67 37.93-26.83 47.23-48.07l-36.43-36.43"/></svg>

package/partials/copyAssets.js

@@ -1,6 +1,9 @@
 import fs from 'fs';
 import path from 'path';
-const NEXT_WITH_APP_ROUTER_MODE = 'nextWithAppRouter';
+import {
+  NEXT_WITH_APP_ROUTER_MODE,
+  SUPPORTED_PRODUCTS,
+} from './assets.const.js';
 
 const copyFile = (source, destination) => {
   try {
@@ -11,7 +14,13 @@ const copyFile = (source, destination) => {
   }
 };
 
-const copyAssets = (copyDirectory, mode) => {
+export const copyAssets = (copyDirectory, mode, product) => {
+  if (product !== 'default' && !SUPPORTED_PRODUCTS.includes(product)) {
+    throw new Error(
+      `[STIHL Design System] - [Meta Icons]: You passed the product name "${product}" as an argument, which is not supported. Supported product name arguments are: [${SUPPORTED_PRODUCTS.join(', ')}]. Please check our Meta Icons Partial documentation: https://main--63440bbb95889041542a5ba3.chromatic.com/?path=/docs/utilities-partials-meta-icons--documentation`
+    );
+  }
+
   // Define the source and destination directories
   const sourceDir = path.resolve(
     'node_modules',
@@ -26,11 +35,11 @@ const copyAssets = (copyDirectory, mode) => {
 
   // Array of file names to copy
   const filesToCopy = [
-    'apple-icon.png',
-    'favicon.ico',
-    'icon-192.png',
-    'icon-512.png',
-    'icon.svg',
+    `${product}-apple-icon.png`,
+    `${product}-favicon.ico`,
+    `${product}-icon-192.png`,
+    `${product}-icon-512.png`,
+    `${product}-icon.svg`,
     mode === NEXT_WITH_APP_ROUTER_MODE
       ? 'manifest.json'
       : 'manifest.webmanifest',
@@ -49,21 +58,23 @@ const copyAssets = (copyDirectory, mode) => {
     let fileName = file;
     // adjustments for next with app router
     if (mode === NEXT_WITH_APP_ROUTER_MODE) {
-      if (file === 'icon-192.png') {
+      if (file === `${product}-icon-192.png`) {
         fileName = 'icon2.png';
-      } else if (file === 'icon-512.png') {
+      } else if (file === `${product}-icon-512.png`) {
         fileName = 'icon1.png';
       } else if (file === 'manifest.json') {
         fileName = 'manifest.webmanifest';
       }
     }
-    const destFile = path.join(destDir, fileName);
+
+    // remove product from final file name
+    const destFile = path.join(destDir, fileName.replace(`${product}-`, ''));
 
     if (fs.existsSync(sourceFile)) {
       copyFile(sourceFile, destFile);
       console.log(`Copied ${file} to ${destDir}`);
     } else {
-      console.error(`Source file ${sourceFile} does not exist.`);
+      throw Error(`Source file ${sourceFile} does not exist.`);
     }
   });
   console.log('\x1b[32m%s\x1b[0m', 'SUCCESS - Copying Meta Icon Assets');
@@ -74,11 +85,14 @@ const args = process.argv;
 // Extract directory argument
 const dirArg = args.find((arg) => arg.startsWith('--dir='));
 const copyDirectory = dirArg ? dirArg.replace('--dir=', '') : './';
+// Extract product argument
+const productArg = args.find((arg) => arg.startsWith('--product='));
+const product = productArg ? productArg.replace('--product=', '') : 'default';
 
 const modeArg = args.find((arg) => arg.startsWith('--mode='));
 const mode = modeArg ? modeArg.replace('--mode=', '') : undefined;
 try {
-  copyAssets(copyDirectory, mode);
-} catch (e) {
+  copyAssets(copyDirectory, mode, product);
+} catch (error) {
   console.error('ERROR - Copying Meta Icon Assets:', error);
 }

package/partials/default-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><path fill="#F37A1F" d="M512 0H0v512h512V0Z"/><path fill="#fff" d="m154.502 145.006-25.035 81.859c-11.126 36.45 9.14 63.364 45.048 63.364h117.226a7.613 7.613 0 0 1 6.007 3.271 7.625 7.625 0 0 1 .965 6.771l-6.322 20.592a15.536 15.536 0 0 1-13.077 10.042H95.076l-23.084 75.502H309.55c26.191 0 48.589-12.138 60.04-49.636l23.77-77.741c11.235-36.992-9.681-63.255-42.446-63.255H233.182c-6.502 0-9.103-4.769-7.225-10.549l6.286-20.591a15.53 15.53 0 0 1 15.353-12.174h169.462l23.084-75.501H215.12c-32.116 0-52.237 20.591-60.618 48.046Z"/></svg>

package/partials/imow-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><path fill="#F37A1F" d="M512 0H0v512h512V0Z"/><path fill="#fff" d="M305.948 264.021c-3.583-2.444-7.816-2.444-12.05-2.444H251.72c-8.305 0-15.96.978-18.076 7.816-1.464 4.887-13.68 45.924-17.912 58.624-.652 1.956-.978 3.746-.978 5.215 0 4.72 2.606 7.165 4.885 8.793 3.421 2.442 7.817 2.442 12.051 2.442h42.176c8.306 0 15.798-.979 17.915-7.818 1.464-5.048 13.842-45.921 18.075-58.624a15.41 15.41 0 0 0 .813-5.048c0-4.723-2.605-7.328-4.721-8.956Zm-21.821 20.028-11.725 38.108c-.814 2.116-2.607 2.116-3.744 2.116h-24.755c-2.605 0-3.093-.977-2.605-2.604l11.888-38.108c.651-2.278 2.443-2.116 3.582-2.116h24.916c2.443 0 2.931.976 2.443 2.604ZM391.603 310.92l-.488-49.343h-22.473l-28.01 48.04-.325-48.04h-21.332l.163 82.89h25.728l25.405-45.435-.488 45.435h26.705l51.623-82.89h-27.357l-29.151 49.343ZM59.566 261.577l-6.224 20.178h24.59l6.223-20.178H59.566ZM34 344.464h24.59l15.801-51.229h-24.59L34 344.464ZM180.721 261.577l-30.453 48.692-2.442-48.692h-38.759l-26.217 82.89h23.775l19.541-62.208 3.421 62.208h21.821l40.06-62.208-19.378 62.208h23.776l25.567-82.89h-40.712ZM465.66 256.548c-6.967 0-12.34 5.406-12.34 12.34 0 6.935 5.373 12.341 12.34 12.341 6.968 0 12.34-5.406 12.34-12.341 0-6.932-5.372-12.34-12.34-12.34Zm0 22.924c-5.972 0-10.418-4.678-10.418-10.584 0-5.904 4.446-10.584 10.418-10.584 5.971 0 10.415 4.679 10.415 10.584 0 5.908-4.444 10.584-10.415 10.584Z"/><path fill="#fff" d="M471.3 265.697c0-2.553-1.427-3.947-4.645-3.947h-5.473v14.266h1.758v-6.338h2.954l4.012 6.338h2.058l-4.246-6.338c1.921-.33 3.582-1.459 3.582-3.981Zm-6.037 2.488h-2.325v-4.944h3.22c1.726 0 3.38.466 3.38 2.456 0 2.423-2.12 2.488-4.275 2.488ZM124.046 208.746l25.839-41.246h34.617l-21.648 70.304H142.67l16.382-52.752-33.934 52.752h-18.526l-2.926-52.752-16.575 52.752H66.906L88.4 167.5h33.598l2.049 41.246ZM233.417 167.5h24.182l-38.844 46.515-7.276 23.787h-20.868l7.411-24.084-10.627-46.218h19.403l5.168 26.619 21.451-26.619Z"/></svg>