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

package/chunks/Select.E6gLFYLk.js

@@ -0,0 +1,194 @@
+"use client";
+import { j as t } from "./jsx-runtime.C115EyI4.js";
+import { c as r } from "./index.CvOaL64Y.js";
+import { useRef as C, useState as q, useEffect as W } from "react";
+import { u as F } from "./useBreakpoint.5xBNDiCf.js";
+import { Asterisk as M } from "../asterisk.DpzETKdT.js";
+import { D as O } from "./Icon.BCmt_XBG.js";
+import { DSSystemFeedback as T } from "../systemfeedback.C3Pfxxpp.js";
+import { g as p } from "./helpers.B1JT5ShS.js";
+import '../assets/Select.D4EXgIbz.css';const V = "ds-select_root_1ui0h_1", Z = "ds-select_hint_1ui0h_9", J = "ds-select_label_1ui0h_9", K = "ds-select_wrapper_1ui0h_13", Q = "ds-select_affix_1ui0h_19", U = "ds-select_affix--small_1ui0h_40", X = "ds-select_affix--disabled_1ui0h_53", Y = "ds-select_prefix_1ui0h_61", z = "ds-select_affix--readonly_1ui0h_64", G = "ds-select_suffix_1ui0h_74", ee = "ds-select_action-button_1ui0h_81", se = "ds-select_label--hidden_1ui0h_99", te = "ds-select_label--disabled_1ui0h_112", le = "ds-select_feedback_1ui0h_132", ce = "ds-select_select-wrapper_1ui0h_137", ae = "ds-select_select_1ui0h_137", ne = "ds-select_select--invalid_1ui0h_262", ie = "ds-select_select--small_1ui0h_269", oe = "ds-select_input--has-leading-icon_1ui0h_322", de = "ds-select_input--has-action-button_1ui0h_325", re = "ds-select_input--has-second-action-button_1ui0h_328", _e = "ds-select_select--has-leading-icon_1ui0h_331", ue = "ds-select_select--has-action-button_1ui0h_334", he = "ds-select_select--has-second-action-button_1ui0h_337", fe = "ds-select_select--has-affix_1ui0h_340", pe = "ds-select_select--is-ready_1ui0h_354", be = "ds-select_select--placeholder_1ui0h_371", me = "ds-select_chevron_1ui0h_410", xe = "ds-select_chevron--small_1ui0h_414", ve = "ds-select_chevron--disabled_1ui0h_417", e = {
+  root: V,
+  hint: Z,
+  label: J,
+  wrapper: K,
+  affix: Q,
+  "affix--small": "ds-select_affix--small_1ui0h_40",
+  affixSmall: U,
+  "affix--disabled": "ds-select_affix--disabled_1ui0h_53",
+  affixDisabled: X,
+  prefix: Y,
+  "affix--readonly": "ds-select_affix--readonly_1ui0h_64",
+  affixReadonly: z,
+  suffix: G,
+  "action-button": "ds-select_action-button_1ui0h_81",
+  actionButton: ee,
+  "label--hidden": "ds-select_label--hidden_1ui0h_99",
+  labelHidden: se,
+  "label--disabled": "ds-select_label--disabled_1ui0h_112",
+  labelDisabled: te,
+  feedback: le,
+  "select-wrapper": "ds-select_select-wrapper_1ui0h_137",
+  selectWrapper: ce,
+  select: ae,
+  "select--invalid": "ds-select_select--invalid_1ui0h_262",
+  selectInvalid: ne,
+  "select--small": "ds-select_select--small_1ui0h_269",
+  selectSmall: ie,
+  "input--has-leading-icon": "ds-select_input--has-leading-icon_1ui0h_322",
+  inputHasLeadingIcon: oe,
+  "input--has-action-button": "ds-select_input--has-action-button_1ui0h_325",
+  inputHasActionButton: de,
+  "input--has-second-action-button": "ds-select_input--has-second-action-button_1ui0h_328",
+  inputHasSecondActionButton: re,
+  "select--has-leading-icon": "ds-select_select--has-leading-icon_1ui0h_331",
+  selectHasLeadingIcon: _e,
+  "select--has-action-button": "ds-select_select--has-action-button_1ui0h_334",
+  selectHasActionButton: ue,
+  "select--has-second-action-button": "ds-select_select--has-second-action-button_1ui0h_337",
+  selectHasSecondActionButton: he,
+  "select--has-affix": "ds-select_select--has-affix_1ui0h_340",
+  selectHasAffix: fe,
+  "select--is-ready": "ds-select_select--is-ready_1ui0h_354",
+  selectIsReady: pe,
+  "select--placeholder": "ds-select_select--placeholder_1ui0h_371",
+  selectPlaceholder: be,
+  chevron: me,
+  "chevron--small": "ds-select_chevron--small_1ui0h_414",
+  chevronSmall: xe,
+  "chevron--disabled": "ds-select_chevron--disabled_1ui0h_417",
+  chevronDisabled: ve
+}, Ee = ["medium", "small"], Se = ({
+  id: s,
+  label: a,
+  options: c
+}) => {
+  if (!s)
+    throw new Error(
+      p(
+        "DSSelect",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSSelect component.'
+      )
+    );
+  if (!a)
+    throw new Error(
+      p(
+        "DSSelect",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSelect component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+  if (!c || c.length === 0)
+    throw new Error(
+      p(
+        "DSSelect",
+        'Options are always required. Please add an "options" prop to the DSSelect component.'
+      )
+    );
+}, ge = (s, a, c) => s === "" || a !== void 0 && a !== "" ? !1 : !(c !== void 0 && c !== ""), Le = ({
+  id: s,
+  label: a,
+  options: c,
+  className: H,
+  defaultValue: b,
+  disabled: _ = !1,
+  hideLabel: I = !1,
+  hint: u,
+  invalid: d = !1,
+  placeholder: h = "Select",
+  required: m = !1,
+  size: x = "medium",
+  systemFeedback: f,
+  value: v,
+  ...w
+}) => {
+  process.env.NODE_ENV !== "production" && Se({
+    id: s,
+    label: a,
+    options: c
+  });
+  const o = C(null), [j, A] = q(
+    ge(h, b, v)
+  );
+  W(() => {
+    if (!o.current) return;
+    const n = () => {
+      if (!o.current) return;
+      const i = o.current.value;
+      A(i === "");
+    }, l = o.current;
+    return l.addEventListener("change", n), () => {
+      l.removeEventListener("change", n);
+    };
+  }, []);
+  const B = F(I), S = `${s}-label`, g = `${s}-feedback`, D = `${s}-hint`, E = u ? ` ${D}` : "", L = (n) => [
+    h && /* @__PURE__ */ t.jsx("option", { value: "", children: h }, `${s}-hidden-option-disabled-placeholder`),
+    ...n.map((l) => {
+      if ("options" in l) {
+        const { label: i, options: $ } = l;
+        return /* @__PURE__ */ t.jsx("optgroup", { label: i, children: $.map(y) }, i);
+      } else
+        return y(l);
+    })
+  ], y = ({ label: n, value: l, isDisabled: i }) => /* @__PURE__ */ t.jsx("option", { value: l, disabled: i, children: n }, l), N = r(e.root, H), P = r(e.select, {
+    [e.selectSmall]: x === "small",
+    [e.selectInvalid]: d,
+    [e.selectPlaceholder]: j
+  }), k = r(e.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelHidden]: B,
+    [e.labelDisabled]: _
+  }), R = r(e.chevron, {
+    [e.chevronSmall]: x === "small",
+    [e.chevronDisabled]: _
+  });
+  return /* @__PURE__ */ t.jsxs("div", { className: N, children: [
+    /* @__PURE__ */ t.jsxs("label", { className: k, id: S, htmlFor: s, children: [
+      a,
+      m && /* @__PURE__ */ t.jsx(M, {})
+    ] }),
+    u && /* @__PURE__ */ t.jsx("div", { className: e.hint, id: D, children: u }),
+    d && f && /* @__PURE__ */ t.jsx(
+      T,
+      {
+        className: e.feedback,
+        message: f,
+        type: "invalid",
+        id: g,
+        "aria-live": "assertive"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs("div", { className: e.selectWrapper, children: [
+      /* @__PURE__ */ t.jsx(
+        "select",
+        {
+          ...w,
+          id: s,
+          ref: o,
+          className: P,
+          "aria-labelledby": `${S}${E}`,
+          "aria-describedby": d && f ? g : void 0,
+          "aria-invalid": d,
+          defaultValue: b,
+          value: v,
+          disabled: _,
+          required: m,
+          children: L(c)
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        O,
+        {
+          name: "chevron-down",
+          className: R,
+          "aria-hidden": "true"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Le as D,
+  Ee as S,
+  ge as g,
+  Se as v
+};

package/chunks/Textarea.DUBSOpNL.js

@@ -0,0 +1,198 @@
+"use client";
+import { j as s } from "./jsx-runtime.C115EyI4.js";
+import { c as g } from "./index.CvOaL64Y.js";
+import { useState as d, useRef as re, useEffect as x } from "react";
+import { u as ne, h as oe } from "./useBreakpoint.5xBNDiCf.js";
+import { g as V, p as z } from "./helpers.B1JT5ShS.js";
+import { Asterisk as ie } from "../asterisk.DpzETKdT.js";
+import { DSSystemFeedback as le } from "../systemfeedback.C3Pfxxpp.js";
+import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_1", ce = "ds-textarea_textarea--invalid_18bj7_113", _e = "ds-textarea_textarea--small_18bj7_120", ue = "ds-textarea_textarea--resize-auto_18bj7_139", be = "ds-textarea_root_18bj7_149", fe = "ds-textarea_hint_18bj7_157", xe = "ds-textarea_label_18bj7_157", je = "ds-textarea_affix_18bj7_161", me = "ds-textarea_affix--small_18bj7_182", he = "ds-textarea_affix--disabled_18bj7_195", pe = "ds-textarea_prefix_18bj7_203", ve = "ds-textarea_affix--readonly_18bj7_206", ge = "ds-textarea_suffix_18bj7_216", Se = "ds-textarea_leading-icon_18bj7_223", Ie = "ds-textarea_leading-icon--small_18bj7_235", Ce = "ds-textarea_leading-icon--disabled_18bj7_238", ye = "ds-textarea_action-button_18bj7_247", De = "ds-textarea_label--hidden_18bj7_265", Ae = "ds-textarea_label--disabled_18bj7_278", we = "ds-textarea_feedback_18bj7_298", Re = "ds-textarea_char-count_18bj7_303", Te = "ds-textarea_char-count-announcer_18bj7_319", t = {
+  textarea: de,
+  "textarea--invalid": "ds-textarea_textarea--invalid_18bj7_113",
+  textareaInvalid: ce,
+  "textarea--small": "ds-textarea_textarea--small_18bj7_120",
+  textareaSmall: _e,
+  "textarea--resize-auto": "ds-textarea_textarea--resize-auto_18bj7_139",
+  textareaResizeAuto: ue,
+  root: be,
+  hint: fe,
+  label: xe,
+  affix: je,
+  "affix--small": "ds-textarea_affix--small_18bj7_182",
+  affixSmall: me,
+  "affix--disabled": "ds-textarea_affix--disabled_18bj7_195",
+  affixDisabled: he,
+  prefix: pe,
+  "affix--readonly": "ds-textarea_affix--readonly_18bj7_206",
+  affixReadonly: ve,
+  suffix: ge,
+  "leading-icon": "ds-textarea_leading-icon_18bj7_223",
+  leadingIcon: Se,
+  "leading-icon--small": "ds-textarea_leading-icon--small_18bj7_235",
+  leadingIconSmall: Ie,
+  "leading-icon--disabled": "ds-textarea_leading-icon--disabled_18bj7_238",
+  leadingIconDisabled: Ce,
+  "action-button": "ds-textarea_action-button_18bj7_247",
+  actionButton: ye,
+  "label--hidden": "ds-textarea_label--hidden_18bj7_265",
+  labelHidden: De,
+  "label--disabled": "ds-textarea_label--disabled_18bj7_278",
+  labelDisabled: Ae,
+  feedback: we,
+  "char-count": "ds-textarea_char-count_18bj7_303",
+  charCount: Re,
+  "char-count-announcer": "ds-textarea_char-count-announcer_18bj7_319",
+  charCountAnnouncer: Te
+}, Pe = ["medium", "small"], Ee = ({ id: r, label: _ }) => {
+  if (!r)
+    throw new Error(
+      V(
+        "DSTextarea",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSTextarea component.'
+      )
+    );
+  if (!_)
+    throw new Error(
+      V(
+        "DSTextarea",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSTextarea component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+}, qe = ({
+  id: r,
+  label: _,
+  charsLimitText: P = "Character limit reached",
+  charsRemainingText: q = "Characters remaining:",
+  className: M,
+  defaultValue: O,
+  disabled: S = !1,
+  hint: j,
+  hideLabel: F = !1,
+  invalid: n = !1,
+  maxLength: e,
+  readonly: I = !1,
+  required: C = !1,
+  resize: u = "vertical",
+  size: W = "medium",
+  systemFeedback: i,
+  value: m,
+  wrapperClassName: X,
+  onChange: y,
+  onInput: D,
+  ...Z
+}) => {
+  process.env.NODE_ENV !== "production" && Ee({
+    id: r,
+    label: _
+  });
+  const [G, A] = d(O || ""), [l, w] = d(0), [J, R] = d(0), [K, T] = d("off"), [E, h] = d(i), [p, v] = d(n), N = m !== void 0, b = N ? m : G, o = re(null), Q = ne(F);
+  x(() => {
+    if (!e || e <= 0)
+      return;
+    l >= e * 0.8 ? T("polite") : T("off");
+    const a = setTimeout(() => {
+      R(e - l || 0);
+    }, 1e3);
+    return () => clearTimeout(a);
+  }, [l]), x(() => {
+    A(b || ""), c(), e && e > 0 && (w(b.toString().length || 0), R(e - b.toString().length || 0));
+  }, [m]), x(() => {
+    n && i ? (h(i), v(n)) : !n && e && e >= 0 && l >= e ? (v(!0), h(P)) : (h(i), v(n));
+  }, [n, p, i, l]), x(() => {
+    if (oe && u === "auto")
+      return c(), window.addEventListener("resize", c), () => window.removeEventListener("resize", c);
+  }, [u, o.current]);
+  const U = g(t.root, X), Y = g(t.textarea, M, {
+    // small textarea
+    [t.textareaSmall]: W === "small",
+    // invalid state
+    [t.textareaInvalid]: p,
+    // resize handling
+    [t.textareaResizeAuto]: u === "auto"
+  }), L = g(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: Q,
+    [t.labelDisabled]: S
+  }), B = `${r}-label`, $ = `${r}-feedback`, k = `${r}-hint`, H = `${r}-char-count-announcer`, ee = j ? ` ${k}` : "", c = () => {
+    if (o.current && u === "auto") {
+      o.current.style.height = "auto";
+      const a = z(o.current.scrollHeight), f = z(2);
+      o.current.style.height = `${// We need to add 2px (border-top & border-bottom) to the scrollHeight to prevent the textarea
+      // from jumping as soon as the user starts typing.
+      a + f}rem`;
+    }
+  }, ae = () => {
+    const a = [];
+    return e && e > 0 && a.push(H), n && i && a.push($), a.length > 0 ? a.join(" ") : void 0;
+  }, te = (a) => {
+    var f;
+    D && D(a), e && e > 0 && w(((f = o.current) == null ? void 0 : f.value.length) || 0), c();
+  }, se = (a) => {
+    y && y(a), N || A(a.target.value);
+  };
+  return /* @__PURE__ */ s.jsxs("div", { className: U, children: [
+    /* @__PURE__ */ s.jsxs("label", { className: L, id: B, htmlFor: r, children: [
+      _,
+      C && /* @__PURE__ */ s.jsx(ie, {})
+    ] }),
+    j && /* @__PURE__ */ s.jsx("div", { className: t.hint, id: k, children: j }),
+    p && E && /* @__PURE__ */ s.jsx(
+      le,
+      {
+        className: t.feedback,
+        message: E,
+        type: "invalid",
+        id: $
+      }
+    ),
+    /* @__PURE__ */ s.jsx(
+      "textarea",
+      {
+        className: Y,
+        id: r,
+        ref: o,
+        ...Z,
+        "aria-labelledby": `${B}${ee}`,
+        "aria-describedby": ae(),
+        "aria-invalid": n,
+        "aria-disabled": I,
+        maxLength: e,
+        readOnly: I,
+        required: C,
+        disabled: S,
+        value: b,
+        defaultValue: void 0,
+        rows: void 0,
+        cols: void 0,
+        onChange: se,
+        onInput: te
+      }
+    ),
+    e !== void 0 && e > 0 && /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+      /* @__PURE__ */ s.jsxs("div", { className: t.charCount, "aria-hidden": "true", children: [
+        l,
+        "/",
+        e
+      ] }),
+      /* @__PURE__ */ s.jsxs(
+        "div",
+        {
+          className: t.charCountAnnouncer,
+          id: H,
+          "aria-live": K,
+          "aria-atomic": "true",
+          children: [
+            q,
+            " ",
+            J
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  qe as D,
+  Pe as T,
+  Ee as v
+};

package/chunks/Toast.DyEi2GEP.js

@@ -0,0 +1,89 @@
+"use client";
+import { j as t } from "./jsx-runtime.C115EyI4.js";
+import { c } from "./index.CvOaL64Y.js";
+import { forwardRef as u } from "react";
+import { DSButton as y } from "../button.M4nXjcUn.js";
+import { D as g } from "./Icon.BCmt_XBG.js";
+import '../assets/Toast.CuafTAf7.css';const h = "ds-toast_root_58y8a_5", p = "ds-toast_root--closing_58y8a_19", x = "ds-toast_fade-out_58y8a_1", I = "ds-toast_move-in_58y8a_1", S = "ds-toast_root--success_58y8a_54", N = "ds-toast_root--info_58y8a_58", j = "ds-toast_root--warning_58y8a_62", v = "ds-toast_content_58y8a_67", w = "ds-toast_content--hide-icon_58y8a_74", C = "ds-toast_icon_58y8a_78", D = "ds-toast_message_58y8a_82", o = {
+  root: h,
+  "root--closing": "ds-toast_root--closing_58y8a_19",
+  rootClosing: p,
+  "fade-out": "ds-toast_fade-out_58y8a_1",
+  fadeOut: x,
+  "move-in": "ds-toast_move-in_58y8a_1",
+  moveIn: I,
+  "root--success": "ds-toast_root--success_58y8a_54",
+  rootSuccess: S,
+  "root--info": "ds-toast_root--info_58y8a_58",
+  rootInfo: N,
+  "root--warning": "ds-toast_root--warning_58y8a_62",
+  rootWarning: j,
+  content: v,
+  "content--hide-icon": "ds-toast_content--hide-icon_58y8a_74",
+  contentHideIcon: w,
+  icon: C,
+  message: D
+}, O = {
+  success: "circle-check-colored",
+  warning: "triangle-exclamationmark-colored",
+  info: "circle-info-colored"
+}, T = u(
+  ({
+    message: n,
+    className: e,
+    hideIcon: a = !1,
+    variant: s = "info",
+    onClick: r,
+    onMouseEnter: i,
+    onMouseLeave: _,
+    ...d
+  }, l) => {
+    const m = c(o.root, e, {
+      [o.rootSuccess]: s === "success",
+      [o.rootWarning]: s === "warning",
+      [o.rootInfo]: s === "info"
+    }), f = c(o.content, {
+      [o.contentHideIcon]: a
+    });
+    return /* @__PURE__ */ t.jsx(
+      "aside",
+      {
+        className: m,
+        ref: l,
+        popover: "manual",
+        "data-ds-toast": !0,
+        onMouseEnter: i,
+        onMouseLeave: _,
+        "aria-label": n,
+        ...d,
+        children: /* @__PURE__ */ t.jsxs("div", { className: f, children: [
+          !a && /* @__PURE__ */ t.jsx(
+            g,
+            {
+              name: O[s],
+              className: o.icon,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ t.jsx("div", { className: o.message, children: n }),
+          /* @__PURE__ */ t.jsx(
+            y,
+            {
+              hideLabel: !0,
+              iconName: "cross",
+              size: "small",
+              variant: "ghost",
+              onClick: r,
+              children: "Close toast"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+T.displayName = "DSToast";
+export {
+  T as D,
+  o as s
+};

package/chunks/translate.isa3FHb8.js

@@ -0,0 +1,11 @@
+"use client";
+const s = (n, r, t = []) => {
+  let a = r[n];
+  return a = a.replace(
+    /\{(\d+)\}/g,
+    (l, e) => e < t.length ? t[e] : ""
+  ), a;
+}, o = (n) => (r, t) => s(r, n, t);
+export {
+  o as t
+};

package/{combobox.JL1Dsn3E.js → combobox.DUzv8jzM.js}

@@ -1,6 +1,6 @@
 "use client";
 import { j as u } from "./chunks/jsx-runtime.C115EyI4.js";
-import { v as x, c as C } from "./chunks/CustomReactSelect.ChAtL6fu.js";
+import { v as x, c as C } from "./chunks/CustomReactSelect.Cg_XW3YK.js";
 const v = ({
   id: s,
   label: o,

package/combobox.d.ts

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

package/components/Accordion/Accordion.d.ts

@@ -1,6 +1,5 @@
 import { DetailsHTMLAttributes } from 'react';
 import { AccordionSize, ChevronPosition, Summary } from './Accordion.utils';
-
 export interface AccordionProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
     /** Content to be displayed within the accordion. */
     children: React.ReactNode;

package/components/Accordion/Accordion.utils.d.ts

@@ -1,6 +1,5 @@
 import { HeadingSize, HeadingTag } from '../Heading/Heading.utils';
 import { AccordionProps } from './Accordion';
-
 export declare const ACCORDION_SIZE: readonly ["medium", "small"];
 export type AccordionSize = (typeof ACCORDION_SIZE)[number];
 export declare const CHEVRON_POSITION: readonly ["left", "right"];

package/components/Button/Button.d.ts

@@ -2,7 +2,6 @@ import { ButtonHTMLAttributes } from 'react';
 import { BreakpointCustomizable, IconName, SelectedAriaAttributes, Theme } from '../../types';
 import { IconProps } from '../Icon/Icon';
 import { ButtonAriaAttribute, ButtonSize, ButtonVariant } from './Button.utils';
-
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Content within the button. */
     children: React.ReactNode;

package/components/ButtonRound/ButtonRound.d.ts

@@ -1,7 +1,6 @@
 import { IconName } from '../../types';
 import { ButtonProps } from '../Button/Button';
 import { ButtonRoundVariant } from './ButtonRound.utils';
-
 export interface ButtonRoundProps extends Omit<ButtonProps, 'hideLabel' | 'size' | 'iconPosition' | 'isFlush'> {
     children: React.ReactNode;
     /** Visual style variant of the button.

package/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,5 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
-
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Content displayed next to the checkbox. */
     label: string;

package/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,6 +1,5 @@
 import { FieldsetHTMLAttributes } from 'react';
 import { FieldsetProps } from '../Fieldset/Fieldset';
-
 export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     /** DSCheckbox elements within the checkbox group. */
     children: React.ReactNode;
@@ -15,13 +14,13 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
      * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
      */
     legend: FieldsetProps['legend'];
+    /** Short descriptive text displayed beneath the legend. */
+    description?: FieldsetProps['description'];
     /**
-     * Set the alignment of the checkboxes.
+     * Set the direction of the checkboxes.
      * @default 'vertical'
      */
-    alignment?: 'vertical' | 'horizontal';
-    /** Short descriptive text displayed beneath the legend. */
-    description?: FieldsetProps['description'];
+    direction?: 'vertical' | 'horizontal';
     /** Disables the checkbox group, preventing user interaction.
      * @default false
      */
@@ -42,7 +41,7 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
 }
 /**
  * The `DSCheckboxGroup` component offers a cohesive and accessible solution for grouping `DSCheckbox` elements,
- * complete with customizable legends, alignment options, and integrated validation feedback,
+ * complete with customizable legends, direction options, and integrated validation feedback,
  * enhancing the user experience in form designs.
  * */
-export declare const DSCheckboxGroup: ({ children, legend, alignment, className, description, disabled, id, invalid, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;
+export declare const DSCheckboxGroup: ({ children, legend, className, description, direction, disabled, id, invalid, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;

package/components/CheckboxGroup/CheckboxGroup.utils.d.ts

@@ -1,5 +1,4 @@
 import { CheckboxGroupProps } from './CheckboxGroup';
-
 type ValidationProps = Pick<CheckboxGroupProps, 'children' | 'description' | 'id' | 'legend' | 'systemFeedback'>;
 export declare const validateCheckboxGroupProps: ({ children, description, id, legend, systemFeedback, }: ValidationProps) => void;
 export {};

package/components/ChipGroup/Chip.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { Chip, ChipGroupAriaTranslations, ChipGroupLanguage, ChipGroupSelectionMode, ChipGroupSize } from './ChipGroup.utils';
+interface ChipProps extends Omit<Chip, 'onClick'>, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+    groupId: string;
+    isRemovable: boolean;
+    lang?: ChipGroupLanguage;
+    selectionMode: ChipGroupSelectionMode;
+    size?: ChipGroupSize;
+    translations?: ChipGroupAriaTranslations;
+}
+export declare const DSChip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/components/ChipGroup/ChipGroup.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { Chip, ChipGroupAriaTranslations, ChipGroupLanguage, ChipGroupSelectionMode, ChipGroupSize } from './ChipGroup.utils';
+export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** An array of Chip Objects containing the id and label and other optional parameters.
+     * `{id: string; label: string; disabled?: boolean; iconName?: IconName; isSelected?: boolean; onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;}[]`*/
+    chips: Chip[];
+    /** Unique id for the DSChipGroup. */
+    id: string;
+    /** Label text displayed above the DSChipGroup. */
+    label: string;
+    /** Hides the DSChipGroup label, can be responsive.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Allows removal of Chips.
+     * @default false
+     */
+    isRemovable?: boolean;
+    /** Sets language to use for the screen reader messages, if no translations object is provided.
+     * @default 'en'
+     */
+    lang?: ChipGroupLanguage;
+    /** Defines if only one Chip or multiple Chips can be selected. Ignored if `isRemovable=true`.
+     * @default 'single'
+     */
+    selectionMode?: ChipGroupSelectionMode;
+    /** Size of the Chips.
+     * @default 'medium'
+     */
+    size?: ChipGroupSize;
+    /** Translations for the DSChipGroup. Use our [customization page](/?path=/story/components-chip-group-translations--documentation) for creating custom translations. */
+    translations?: ChipGroupAriaTranslations;
+    /** Callback function called when the selection of the DSChipGroup changes. */
+    onChipsChange?: (chips: Chip[]) => void;
+}
+/**
+ * A component for selecting single or multiple chips, with options for selection (like radio buttons) or removal.
+ * Supports different sizes. Use icons sparingly to reduce cognitive load.
+ */
+export declare const DSChipGroup: React.FC<ChipGroupProps>;