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

package/assets/title.rosWPEG3.css

@@ -0,0 +1 @@
+.ds-title_root_tt8l3_1{color:#252525}.ds-title_root--x-large-uppercase_tt8l3_4{font-family:STIHL Contraface Digital Display Title,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;font-weight:400;font-size:1.625rem;line-height:1.2;font-size-adjust:cap-height .68;text-transform:uppercase}@media (min-width: 1024px){.ds-title_root--x-large-uppercase_tt8l3_4{font-size:1.875rem;line-height:1.25}}.ds-title_root--large-uppercase_tt8l3_20{font-family:STIHL Contraface Digital Display Title,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;font-weight:400;font-size:1.375rem;line-height:1.25;font-size-adjust:cap-height .68;text-transform:uppercase}@media (min-width: 1024px){.ds-title_root--large-uppercase_tt8l3_20{font-size:1.625rem;line-height:1.2}}.ds-title_root--theme-dark_tt8l3_36{color:#fff}.ds-title_root_tt8l3_1>.ds-title_dash_tt8l3_39{display:block;text-transform:none}

package/asterisk.DpzETKdT.js

@@ -0,0 +1,8 @@
+"use client";
+import { j as s } from "./chunks/jsx-runtime.C115EyI4.js";
+import './assets/asterisk.BfVAUBO7.css';const t = "ds-asterisk_root_1nm42_1", o = {
+  root: t
+}, e = () => /* @__PURE__ */ s.jsx("span", { className: o.root, "aria-hidden": "true", children: "*" });
+export {
+  e as Asterisk
+};

package/button.M4nXjcUn.js

@@ -0,0 +1,135 @@
+"use client";
+import { j as n } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as i } from "./chunks/index.CvOaL64Y.js";
+import { u as a } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { D as I } from "./chunks/Icon.BCmt_XBG.js";
+import { DSSpinner as F } from "./spinner.Bq97Og-6.js";
+import './assets/button.DF4RBeC2.css';const S = "ds-button_root_170gw_1", x = "ds-button_root--highlight_170gw_75", j = "ds-button_root--dark-highlight_170gw_75", L = "ds-button_root--filled_170gw_151", C = "ds-button_root--outline_170gw_179", N = "ds-button_root--ghost_170gw_206", B = "ds-button_root--ghost-flush_170gw_231", E = "ds-button_root--small_170gw_237", R = "ds-button_root--dark-filled_170gw_317", T = "ds-button_root--dark-outline_170gw_374", V = "ds-button_root--dark-ghost_170gw_430", q = "ds-button_root--dark-ghost-flush_170gw_484", A = "ds-button_root--icon-left_170gw_546", J = "ds-button_root--icon-only_170gw_562", K = "ds-button_root--icon-only-small_170gw_571", M = "ds-button_loader_170gw_586", P = "ds-button_icon--hidden_170gw_598", Q = "ds-button_label--hidden_170gw_602", U = "ds-button_label--loading_170gw_614", o = {
+  root: S,
+  "root--highlight": "ds-button_root--highlight_170gw_75",
+  rootHighlight: x,
+  "root--dark-highlight": "ds-button_root--dark-highlight_170gw_75",
+  rootDarkHighlight: j,
+  "root--filled": "ds-button_root--filled_170gw_151",
+  rootFilled: L,
+  "root--outline": "ds-button_root--outline_170gw_179",
+  rootOutline: C,
+  "root--ghost": "ds-button_root--ghost_170gw_206",
+  rootGhost: N,
+  "root--ghost-flush": "ds-button_root--ghost-flush_170gw_231",
+  rootGhostFlush: B,
+  "root--small": "ds-button_root--small_170gw_237",
+  rootSmall: E,
+  "root--dark-filled": "ds-button_root--dark-filled_170gw_317",
+  rootDarkFilled: R,
+  "root--dark-outline": "ds-button_root--dark-outline_170gw_374",
+  rootDarkOutline: T,
+  "root--dark-ghost": "ds-button_root--dark-ghost_170gw_430",
+  rootDarkGhost: V,
+  "root--dark-ghost-flush": "ds-button_root--dark-ghost-flush_170gw_484",
+  rootDarkGhostFlush: q,
+  "root--icon-left": "ds-button_root--icon-left_170gw_546",
+  rootIconLeft: A,
+  "root--icon-only": "ds-button_root--icon-only_170gw_562",
+  rootIconOnly: J,
+  "root--icon-only-small": "ds-button_root--icon-only-small_170gw_571",
+  rootIconOnlySmall: K,
+  loader: M,
+  "icon--hidden": "ds-button_icon--hidden_170gw_598",
+  iconHidden: P,
+  "label--hidden": "ds-button_label--hidden_170gw_602",
+  labelHidden: Q,
+  "label--loading": "ds-button_label--loading_170gw_614",
+  labelLoading: U
+}, z = ({
+  children: b,
+  aria: k,
+  className: f,
+  dataTrackingid: w,
+  disabled: e = !1,
+  hideLabel: d = !1,
+  iconName: g,
+  iconPosition: m = "left",
+  iconSource: h,
+  isFlush: s = !1,
+  loading: r = !1,
+  size: _ = "medium",
+  theme: l = "light",
+  variant: t = "filled",
+  onClick: u,
+  ...D
+}) => {
+  const y = i(o.root, f, {
+    // variant
+    [o.rootFilled]: t === "filled",
+    [o.rootHighlight]: t === "highlight",
+    [o.rootOutline]: t === "outline",
+    [o.rootGhost]: t === "ghost" && s !== !0,
+    // isFlush
+    [o.rootGhostFlush]: t === "ghost" && s === !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" && s !== !0,
+    // dark isFlush
+    [o.rootDarkGhostFlush]: l === "dark" && t === "ghost" && s === !0,
+    // size
+    [o.rootSmall]: _ === "small",
+    // icon position
+    [o.rootIconLeft]: m === "left",
+    // icon only
+    [o.rootIconOnly]: a(d) && _ === "medium",
+    [o.rootIconOnlySmall]: a(d) && _ === "small"
+  }), O = i(o.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [o.labelHidden]: a(d),
+    // set label opacity to 0 when loading to prevent button size from changing
+    [o.labelLoading]: r
+  }), p = i(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 = (c) => {
+    if (e || r) {
+      c.preventDefault();
+      return;
+    }
+    u && u(c);
+  };
+  return /* @__PURE__ */ n.jsxs(
+    "button",
+    {
+      className: y,
+      "data-trackingid": w,
+      type: "submit",
+      onClick: H,
+      ...k,
+      ...D,
+      "aria-disabled": e || r,
+      "aria-busy": r,
+      children: [
+        r && /* @__PURE__ */ n.jsx(
+          F,
+          {
+            className: o.loader,
+            aria: { "aria-label": "Loading state" }
+          }
+        ),
+        /* @__PURE__ */ n.jsx("span", { className: O, children: b }),
+        (g || h) && /* @__PURE__ */ n.jsx(
+          I,
+          {
+            name: g,
+            theme: G,
+            source: h,
+            className: p,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  z as DSButton
+};

package/buttonround.E56F_805.js

@@ -0,0 +1,118 @@
+"use client";
+import { j as n } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as d } from "./chunks/index.CvOaL64Y.js";
+import { D as y } from "./chunks/Icon.BCmt_XBG.js";
+import { DSSpinner as H } from "./spinner.Bq97Og-6.js";
+import './assets/buttonround.19uK_-oO.css';const p = "ds-button-round_root_18xb6_1", F = "ds-button-round_root--highlight_18xb6_75", O = "ds-button-round_root--dark-highlight_18xb6_75", G = "ds-button-round_root--filled_18xb6_151", I = "ds-button-round_root--outline_18xb6_179", S = "ds-button-round_root--ghost_18xb6_206", j = "ds-button-round_root--ghost-flush_18xb6_231", L = "ds-button-round_root--small_18xb6_237", C = "ds-button-round_root--dark-filled_18xb6_317", N = "ds-button-round_root--dark-outline_18xb6_374", R = "ds-button-round_root--dark-ghost_18xb6_430", B = "ds-button-round_root--dark-ghost-flush_18xb6_484", E = "ds-button-round_root--icon-left_18xb6_546", T = "ds-button-round_root--icon-only_18xb6_562", q = "ds-button-round_root--icon-only-small_18xb6_571", w = "ds-button-round_loader_18xb6_588", z = "ds-button-round_icon--hidden_18xb6_600", A = "ds-button-round_label--hidden_18xb6_604", J = "ds-button-round_label--loading_18xb6_616", o = {
+  root: p,
+  "root--highlight": "ds-button-round_root--highlight_18xb6_75",
+  rootHighlight: F,
+  "root--dark-highlight": "ds-button-round_root--dark-highlight_18xb6_75",
+  rootDarkHighlight: O,
+  "root--filled": "ds-button-round_root--filled_18xb6_151",
+  rootFilled: G,
+  "root--outline": "ds-button-round_root--outline_18xb6_179",
+  rootOutline: I,
+  "root--ghost": "ds-button-round_root--ghost_18xb6_206",
+  rootGhost: S,
+  "root--ghost-flush": "ds-button-round_root--ghost-flush_18xb6_231",
+  rootGhostFlush: j,
+  "root--small": "ds-button-round_root--small_18xb6_237",
+  rootSmall: L,
+  "root--dark-filled": "ds-button-round_root--dark-filled_18xb6_317",
+  rootDarkFilled: C,
+  "root--dark-outline": "ds-button-round_root--dark-outline_18xb6_374",
+  rootDarkOutline: N,
+  "root--dark-ghost": "ds-button-round_root--dark-ghost_18xb6_430",
+  rootDarkGhost: R,
+  "root--dark-ghost-flush": "ds-button-round_root--dark-ghost-flush_18xb6_484",
+  rootDarkGhostFlush: B,
+  "root--icon-left": "ds-button-round_root--icon-left_18xb6_546",
+  rootIconLeft: E,
+  "root--icon-only": "ds-button-round_root--icon-only_18xb6_562",
+  rootIconOnly: T,
+  "root--icon-only-small": "ds-button-round_root--icon-only-small_18xb6_571",
+  rootIconOnlySmall: q,
+  loader: w,
+  "icon--hidden": "ds-button-round_icon--hidden_18xb6_600",
+  iconHidden: z,
+  "label--hidden": "ds-button-round_label--hidden_18xb6_604",
+  labelHidden: A,
+  "label--loading": "ds-button-round_label--loading_18xb6_616",
+  labelLoading: J
+}, U = ({
+  children: b,
+  aria: e,
+  className: h,
+  dataTrackingid: c,
+  disabled: s = !1,
+  iconName: _ = "placeholder",
+  iconSource: u,
+  loading: t = !1,
+  theme: l = "light",
+  variant: r = "filled",
+  onClick: i,
+  ...g
+}) => {
+  const x = d(
+    o.root,
+    o.rootIconOnlySmall,
+    h,
+    {
+      // variant
+      [o.rootFilled]: r === "filled",
+      [o.rootHighlight]: r === "highlight",
+      // dark theme
+      [o.rootDarkFilled]: l === "dark" && r === "filled",
+      [o.rootDarkHighlight]: l === "dark" && r === "highlight"
+    }
+  ), k = d(o.label, o.labelHidden, {
+    // set label opacity to 0 when loading to prevent button size from changing
+    [o.labelLoading]: t
+  }), f = d(o.icon, {
+    // set icon opacity to 0 when loading to prevent button size from changing
+    [o.iconHidden]: t
+  }), m = l === "light" && r === "filled" ? "dark" : "light", D = (a) => {
+    if (s || t) {
+      a.preventDefault();
+      return;
+    }
+    i && i(a);
+  };
+  return /* @__PURE__ */ n.jsxs(
+    "button",
+    {
+      className: x,
+      "data-trackingid": c,
+      type: "button",
+      onClick: D,
+      ...e,
+      ...g,
+      "aria-disabled": s || t,
+      "aria-busy": t,
+      children: [
+        t && /* @__PURE__ */ n.jsx(
+          H,
+          {
+            className: o.loader,
+            aria: { "aria-label": "Loading state" }
+          }
+        ),
+        /* @__PURE__ */ n.jsx("span", { className: k, children: b }),
+        (_ || u) && /* @__PURE__ */ n.jsx(
+          y,
+          {
+            name: _,
+            theme: m,
+            source: u,
+            className: f,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  U as DSButtonRound
+};

package/checkbox.Cb2_ey6U.js

@@ -0,0 +1,111 @@
+"use client";
+import { j as e } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as d } from "./chunks/index.CvOaL64Y.js";
+import { forwardRef as y, useRef as I, useState as H, useEffect as M, useCallback as g } from "react";
+import { u as B } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { D as k } from "./chunks/Icon.BCmt_XBG.js";
+import { DSSystemFeedback as E } from "./systemfeedback.C3Pfxxpp.js";
+import './assets/checkbox.ByOoFouu.css';const V = "ds-checkbox_root_1tuqo_1", w = "ds-checkbox_root--disabled_1tuqo_21", L = "ds-checkbox_checkbox_1tuqo_25", O = "ds-checkbox_icon-check_1tuqo_41", P = "ds-checkbox_icon-minus_1tuqo_42", R = "ds-checkbox_checkbox--invalid_1tuqo_66", U = "ds-checkbox_label--hidden_1tuqo_71", z = "ds-checkbox_input_1tuqo_84", A = "ds-checkbox_label_1tuqo_71", F = "ds-checkbox_feedback_1tuqo_198", c = {
+  root: V,
+  "root--disabled": "ds-checkbox_root--disabled_1tuqo_21",
+  rootDisabled: w,
+  checkbox: L,
+  "icon-check": "ds-checkbox_icon-check_1tuqo_41",
+  iconCheck: O,
+  "icon-minus": "ds-checkbox_icon-minus_1tuqo_42",
+  iconMinus: P,
+  "checkbox--invalid": "ds-checkbox_checkbox--invalid_1tuqo_66",
+  checkboxInvalid: R,
+  "label--hidden": "ds-checkbox_label--hidden_1tuqo_71",
+  labelHidden: U,
+  input: z,
+  label: A,
+  feedback: F
+}, G = y(
+  ({
+    label: r,
+    checked: h,
+    className: _,
+    defaultChecked: x = !1,
+    disabled: s = !1,
+    hideLabel: m = !1,
+    indeterminate: u = !1,
+    invalid: a = !1,
+    systemFeedback: b,
+    onChange: i,
+    ...f
+  }, n) => {
+    const t = I(null), [p, q] = H(x), C = B(m);
+    M(() => {
+      t && t.current && (t.current.indeterminate = u);
+    }, [u]);
+    const l = h !== void 0, j = l ? h : p, D = d(c.root, {
+      [c.rootDisabled]: s
+    }), N = d(c.label, {
+      // hide label only visually to keep them available for assistive technologies
+      [c.labelHidden]: C
+    }), v = d(c.checkbox, {
+      [c.checkboxInvalid]: a
+    }), S = g(
+      (o) => {
+        if (s) {
+          o.preventDefault();
+          return;
+        }
+        l || q(o.target.checked), i && i(o);
+      },
+      [s, l, i]
+    );
+    return /* @__PURE__ */ e.jsxs("div", { className: _, 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), t.current = o;
+            },
+            ...f,
+            checked: j,
+            disabled: s,
+            "aria-label": r,
+            "aria-invalid": a,
+            onChange: S
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("div", { className: v, 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: N, children: r })
+      ] }),
+      a && b && /* @__PURE__ */ e.jsx(
+        E,
+        {
+          className: c.feedback,
+          message: b,
+          type: "invalid"
+        }
+      )
+    ] });
+  }
+);
+G.displayName = "DSCheckbox";
+export {
+  G as DSCheckbox
+};

package/{checkboxgroup.BqD5IV51.js → checkboxgroup.DBDmB-zR.js}

@@ -1,8 +1,8 @@
 "use client";
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
-import "./chunks/Fieldset.C9K8BYmH.js";
-import { D as i } from "./chunks/CheckboxGroup.M3jOjhNf.js";
+import "./chunks/Fieldset.Cjmkgxxk.js";
+import { D as i } from "./chunks/CheckboxGroup.S6i5EOc4.js";
 export {
   i as DSCheckboxGroup
 };

package/{chip.B92ew-hk.js → chip.C_1tGqvZ.js}

@@ -3,8 +3,8 @@ import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
 import "./chunks/translate.isa3FHb8.js";
-import "./chunks/Icon.C2o2seDb.js";
-import { e as s } from "./chunks/Chip.fMG8wi5K.js";
+import "./chunks/Icon.BCmt_XBG.js";
+import { e as s } from "./chunks/Chip.CMlPUyOJ.js";
 export {
   s as DSChip
 };

package/chipgroup.BvTj1ziW.js

@@ -0,0 +1,174 @@
+"use client";
+import { j as b } from "./chunks/jsx-runtime.C115EyI4.js";
+import { useState as S, useRef as $, useEffect as w, createElement as W } from "react";
+import { c as _ } from "./chunks/index.CvOaL64Y.js";
+import { h as v, u as q } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { g as z } from "./chunks/AriaLiveRegions.utils.BGSZafnS.js";
+import { v as J, a as P, e as Q } from "./chunks/Chip.CMlPUyOJ.js";
+import './assets/chipgroup.BzfZLbkv.css';const X = "ds-chip-group_label--hidden_2mchd_1", Y = "ds-chip-group_root_2mchd_14", A = {
+  "label--hidden": "ds-chip-group_label--hidden_2mchd_1",
+  labelHidden: X,
+  root: Y
+}, se = ({
+  chips: p,
+  id: h,
+  label: D,
+  className: K,
+  hideLabel: j = !1,
+  isRemovable: r = !1,
+  lang: C = "en",
+  selectionMode: i = "single",
+  size: N = "medium",
+  translations: T,
+  onChipsChange: c,
+  ...B
+}) => {
+  process.env.NODE_ENV !== "production" && J({
+    chips: p,
+    id: h,
+    label: D
+  });
+  const [l, o] = S(null), [n, a] = S(p), E = $(null), [d, k] = S(), f = $([]);
+  w(() => {
+    a(p);
+  }, [p]), w(() => {
+    P();
+    const e = () => k("keydown"), t = () => k(null), s = () => k(null);
+    return v && (document.addEventListener("keydown", e), document.addEventListener("mousedown", t), document.addEventListener("touchstart", s)), () => {
+      v && (document.removeEventListener("keydown", e), document.removeEventListener("mousedown", t), document.removeEventListener("touchstart", s));
+    };
+  }, []), w(() => {
+    var e;
+    l !== null && f.current[l] && d === "keydown" && ((e = f.current[l]) == null || e.focus());
+  }, [l]), w(() => {
+    d === "keydown" && l !== null && n.length > 0 && f.current.forEach((e, t) => {
+      e && (e.tabIndex = t === l ? 0 : -1, t === l && e.focus());
+    });
+  }, [n]);
+  const F = (e) => {
+    if (l === null) return;
+    let t = l;
+    switch (e.key) {
+      case "a":
+        (e.metaKey || e.ctrlKey) && (e.preventDefault(), G());
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        e.shiftKey && i === "multiple" && !r ? (t = l + 1 > n.length - 1 ? n.length - 1 : l + 1, l !== t ? (u(l), u(t)) : n[l].isSelected || u(l)) : (t = (l + 1) % n.length, e.preventDefault());
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.shiftKey && i === "multiple" && !r ? (t = l - 1 < 0 ? 0 : l - 1, l !== t ? (u(l), u(t)) : n[0].isSelected || u(0)) : (t = (l - 1 + n.length) % n.length, e.preventDefault());
+        break;
+      case "Enter":
+      case " ":
+        if (e.preventDefault(), r) {
+          y(t);
+          return;
+        } else
+          I(t);
+        break;
+      case "Backspace":
+        r && y(t), e.preventDefault();
+        return;
+      default:
+        return;
+    }
+    o(t);
+  }, G = () => {
+    if (i !== "multiple") return;
+    const e = n.map((t) => ({
+      ...t,
+      selected: !t.disabled
+    }));
+    a(e), m(`${e.length} items selected`), c && c(e);
+  }, u = (e) => {
+    if (r) return;
+    const t = [...n];
+    t[e].disabled || (t[e].isSelected = !0, m(
+      `${t[e].label} selected, ${t.filter(({ isSelected: s }) => s).length} items selected`
+    ), a(t), c && c(t));
+  }, I = (e) => {
+    if (r) return;
+    const t = [...n];
+    t[e].disabled || (i === "single" ? t.forEach((s, g) => {
+      g === e ? (s.isSelected = !s.isSelected, m(
+        `${s.label} ${s.isSelected ? "selected" : "not selected"}`
+      )) : s.isSelected = !1;
+    }) : i === "multiple" && (t[e].isSelected = !t[e].isSelected, m(
+      `${t[e].label} ${t[e].isSelected ? "selected" : "not selected"}, ${t.filter(({ isSelected: s }) => s).length} items selected`
+    )), a(t), c && c(t));
+  }, y = (e) => {
+    var g;
+    const t = n[e], s = n.filter((L, U) => U !== e);
+    if (a(s), m(
+      `${t.label} removed, ${s.length} items remaining`
+    ), d === "keydown")
+      if (s.length > 0) {
+        const L = Math.min(e, s.length - 1);
+        o(L);
+      } else
+        (g = E.current) == null || g.focus(), o(null);
+    c && c(s);
+  }, H = (e) => {
+    r ? y(e) : n[e].disabled || I(e);
+  }, m = (e) => {
+    const t = z();
+    t && (t.innerText = e, setTimeout(() => {
+      t.innerText = "";
+    }, 350));
+  }, V = (e) => l === null || l === e ? 0 : -1, x = q(j), O = _(A.root, K);
+  return n.length === 0 ? null : /* @__PURE__ */ b.jsxs("div", { children: [
+    /* @__PURE__ */ b.jsx(
+      "div",
+      {
+        id: h,
+        className: _({
+          [A.labelHidden]: x
+        }),
+        children: D
+      }
+    ),
+    n.length > 0 && /* @__PURE__ */ b.jsx(
+      "div",
+      {
+        ref: E,
+        role: "grid",
+        "aria-labelledby": h,
+        "aria-multiselectable": i === "multiple",
+        tabIndex: -1,
+        onKeyDown: F,
+        onFocus: () => {
+          l === null ? (f.current[0].focus(), d === "keydown" && o(0)) : d === "keydown" && o(l);
+        },
+        onBlur: () => o(null),
+        className: O,
+        ...B,
+        children: n.map((e, t) => /* @__PURE__ */ W(
+          Q,
+          {
+            ...e,
+            key: `${e.id}-${t}`,
+            groupId: h,
+            tabIndex: V(t),
+            onClick: (s) => {
+              H(t), e.onClick && e.onClick(s);
+            },
+            "data-focused": l === t,
+            isRemovable: r,
+            lang: C,
+            selectionMode: i,
+            size: N,
+            translations: T,
+            ref: (s) => {
+              f.current[t] = s;
+            }
+          }
+        ))
+      }
+    )
+  ] });
+};
+export {
+  se as DSChipGroup
+};