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

package/select.OGcreXnT.js

@@ -0,0 +1,190 @@
+"use client";
+import { j as t } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as _ } from "./chunks/index.CvOaL64Y.js";
+import { useRef as $, useState as C, useEffect as W } from "react";
+import { u as F } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { Asterisk as M } from "./asterisk.DU8THnoC.js";
+import { DSIcon as O } from "./icon.PX9_1kNB.js";
+import { DSSystemFeedback as V } from "./systemfeedback.C7iXO5A1.js";
+import { g as f } from "./chunks/helpers.B1JT5ShS.js";
+import './assets/select.D2qBxaHP.css';const J = "_root_quxca_187", K = "_hint_quxca_195", Q = "_label_quxca_195", T = "_wrapper_quxca_199", U = "_affix_quxca_205", X = "_affix--small_quxca_225", Y = "_affix--disabled_quxca_237", Z = "_prefix_quxca_240", z = "_affix--readonly_quxca_243", G = "_suffix_quxca_253", ee = "_action-button_quxca_260", ae = "_label--hidden_quxca_277", te = "_feedback_quxca_304", ce = "_select-wrapper_quxca_309", se = "_select_quxca_309", ne = "_select--invalid_quxca_428", le = "_select--small_quxca_435", oe = "_input--has-leading-icon_quxca_481", ie = "_input--has-action-button_quxca_484", re = "_input--has-second-action-button_quxca_487", _e = "_select--has-leading-icon_quxca_490", ue = "_select--has-action-button_quxca_493", de = "_select--has-second-action-button_quxca_496", xe = "_select--has-affix_quxca_499", fe = "_select--is-ready_quxca_511", he = "_select--placeholder_quxca_523", pe = "_chevron_quxca_532", be = "_chevron--small_quxca_536", me = "_chevron--disabled_quxca_539", e = {
+  root: J,
+  hint: K,
+  label: Q,
+  wrapper: T,
+  affix: U,
+  "affix--small": "_affix--small_quxca_225",
+  affixSmall: X,
+  "affix--disabled": "_affix--disabled_quxca_237",
+  affixDisabled: Y,
+  prefix: Z,
+  "affix--readonly": "_affix--readonly_quxca_243",
+  affixReadonly: z,
+  suffix: G,
+  "action-button": "_action-button_quxca_260",
+  actionButton: ee,
+  "label--hidden": "_label--hidden_quxca_277",
+  labelHidden: ae,
+  feedback: te,
+  "select-wrapper": "_select-wrapper_quxca_309",
+  selectWrapper: ce,
+  select: se,
+  "select--invalid": "_select--invalid_quxca_428",
+  selectInvalid: ne,
+  "select--small": "_select--small_quxca_435",
+  selectSmall: le,
+  "input--has-leading-icon": "_input--has-leading-icon_quxca_481",
+  inputHasLeadingIcon: oe,
+  "input--has-action-button": "_input--has-action-button_quxca_484",
+  inputHasActionButton: ie,
+  "input--has-second-action-button": "_input--has-second-action-button_quxca_487",
+  inputHasSecondActionButton: re,
+  "select--has-leading-icon": "_select--has-leading-icon_quxca_490",
+  selectHasLeadingIcon: _e,
+  "select--has-action-button": "_select--has-action-button_quxca_493",
+  selectHasActionButton: ue,
+  "select--has-second-action-button": "_select--has-second-action-button_quxca_496",
+  selectHasSecondActionButton: de,
+  "select--has-affix": "_select--has-affix_quxca_499",
+  selectHasAffix: xe,
+  "select--is-ready": "_select--is-ready_quxca_511",
+  selectIsReady: fe,
+  "select--placeholder": "_select--placeholder_quxca_523",
+  selectPlaceholder: he,
+  chevron: pe,
+  "chevron--small": "_chevron--small_quxca_536",
+  chevronSmall: be,
+  "chevron--disabled": "_chevron--disabled_quxca_539",
+  chevronDisabled: me
+}, qe = ({
+  id: a,
+  label: n,
+  options: s
+}) => {
+  if (!a)
+    throw new Error(
+      f(
+        "DSSelect",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSSelect component.'
+      )
+    );
+  if (!n)
+    throw new Error(
+      f(
+        "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 (!s || s.length === 0)
+    throw new Error(
+      f(
+        "DSSelect",
+        'Options are always required. Please add an "options" prop to the DSSelect component.'
+      )
+    );
+}, ve = (a, n, s) => a === "" || n !== void 0 && n !== "" ? !1 : !(s !== void 0 && s !== ""), Ae = ({
+  id: a,
+  label: n,
+  options: s,
+  className: H,
+  defaultValue: h,
+  disabled: p = !1,
+  hideLabel: w = !1,
+  hint: u,
+  invalid: r = !1,
+  placeholder: d = "Select",
+  required: b = !1,
+  size: m = "medium",
+  systemFeedback: x,
+  value: q,
+  ...D
+}) => {
+  process.env.NODE_ENV !== "production" && qe({
+    id: a,
+    label: n,
+    options: s
+  });
+  const i = $(null), [I, j] = C(
+    ve(d, h, q)
+  );
+  W(() => {
+    if (!i.current)
+      return;
+    const l = () => {
+      if (!i.current)
+        return;
+      const o = i.current.value;
+      j(o === "");
+    }, c = i.current;
+    return c.addEventListener("change", l), () => {
+      c.removeEventListener("change", l);
+    };
+  }, []);
+  const A = F(w), v = `${a}-label`, S = `${a}-feedback`, g = `${a}-hint`, B = u ? ` ${g}` : "", N = (l) => [
+    d && /* @__PURE__ */ t.jsx("option", { value: "", children: d }, `${a}-hidden-option-disabled-placeholder`),
+    ...l.map((c) => {
+      if ("options" in c) {
+        const { label: o, options: R } = c;
+        return /* @__PURE__ */ t.jsx("optgroup", { label: o, children: R.map(y) }, o);
+      } else
+        return y(c);
+    })
+  ], y = ({ label: l, value: c, isDisabled: o }) => /* @__PURE__ */ t.jsx("option", { value: c, disabled: o, children: l }, c), P = _(e.root, H), E = _(e.select, {
+    [e.selectSmall]: m === "small",
+    [e.selectInvalid]: r,
+    [e.selectPlaceholder]: I
+  }), L = _(e.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelHidden]: A
+  }), k = _(e.chevron, {
+    [e.chevronSmall]: m === "small",
+    [e.chevronDisabled]: p
+  });
+  return /* @__PURE__ */ t.jsxs("div", { className: P, children: [
+    /* @__PURE__ */ t.jsxs("label", { className: L, id: v, htmlFor: a, children: [
+      n,
+      b && /* @__PURE__ */ t.jsx(M, {})
+    ] }),
+    u && /* @__PURE__ */ t.jsx("div", { className: e.hint, id: g, children: u }),
+    r && x && /* @__PURE__ */ t.jsx(
+      V,
+      {
+        className: e.feedback,
+        message: x,
+        type: "invalid",
+        id: S,
+        "aria-live": "assertive"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs("div", { className: e.selectWrapper, children: [
+      /* @__PURE__ */ t.jsx(
+        "select",
+        {
+          ...D,
+          id: a,
+          ref: i,
+          className: E,
+          "aria-labelledby": `${v}${B}`,
+          "aria-describedby": r && x ? S : void 0,
+          "aria-invalid": r,
+          defaultValue: h,
+          value: q,
+          disabled: p,
+          required: b,
+          children: N(s)
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        O,
+        {
+          name: "chevron-down",
+          className: k,
+          "aria-hidden": "true"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Ae as DSSelect
+};

package/{spinner.CSzQEBx2.js → spinner.Diy_EeFY.js}

@@ -1,7 +1,7 @@
 "use client";
 import { j as t } from "./chunks/jsx-runtime.C-kxDJ4g.js";
 import { c as n } from "./chunks/index.CvOaL64Y.js";
-import { DSIcon as _ } from "./icon.CmAhxgHK.js";
+import { DSIcon as _ } from "./icon.PX9_1kNB.js";
 import './assets/spinner.C5rBmKiF.css';const m = "_root_1xfbe_63", z = "_root-size-small_1xfbe_69", c = "_root-size-medium_1xfbe_73", x = "_root-size-large_1xfbe_77", S = "_root-size-x-large_1xfbe_81", f = "_root-size-inherit_1xfbe_85", d = "_rotate_1xfbe_1", b = "_screenReaderOnly_1xfbe_105", e = {
   root: m,
   "root-size-small": "_root-size-small_1xfbe_69",

package/styles/scss/lib/_grid-extended.scss

@@ -5,7 +5,7 @@ $ds-grid-extended-column-end: extended-end;
   grid-column: $ds-grid-extended-column-start / $ds-grid-extended-column-end;
 
   @media (min-width: 1668px) {
-    margin-left: -32px;
-    margin-right: -32px;
+    margin-inline-start: -32px;
+    margin-inline-end: -32px;
   }
 }

package/styles/scss/lib/_grid-sidebar-sidebar.scss

@@ -39,10 +39,10 @@ $ds-grid-sidebar-sidebar-2-column-end: sidebar-2-end;
       display: unset;
       width: 320px;
       max-width: 320px;
-      margin-left: -24px;
+      margin-inline-start: -24px;
     }
   }
   @media (min-width: 1535px) {
-    margin-left: -32px;
+    margin-inline-start: -32px;
   }
 }

package/styles/scss/lib/_grid-sidebar.scss

@@ -60,11 +60,11 @@
     --ds-grid-sidebar-gap: 0px;
     gap: var(--ds-grid-sidebar-gap);
     column-gap: 24px;
-    // The children get a margin-bottom to imitate row-gap behavior
+    // The children get a margin-block-end to imitate row-gap behavior
     // This is counteracted for the last row in the parent
-    margin-bottom: -24px;
+    margin-block-end: -24px;
     & > * {
-      margin-bottom: 24px;
+      margin-block-end: 24px;
     }
     @if $is-sidebar-1-open == false {
       grid-template-columns:
@@ -106,11 +106,11 @@
 
   @include ds-media-query-min('xl') {
     column-gap: 32px;
-    // The children get a margin-bottom to imitate row-gap behavior
+    // The children get a margin-block-end to imitate row-gap behavior
     // This is counteracted for the last row in the parent
-    margin-bottom: -32px;
+    margin-block-end: -32px;
     & > * {
-      margin-bottom: 32px;
+      margin-block-end: 32px;
     }
 
     @if $is-sidebar-1-open == false {

package/styles/scss/lib/_heading.scss

@@ -18,7 +18,13 @@
 }
 
 // Mixins for specific heading sizes
+// XL
 @mixin ds-heading-x-large {
+  @include base-heading('STIHL Contraface Digital Text Bold', 1.625rem, 1.2);
+  @include responsive-heading('l', 1.875rem, 1.25);
+}
+
+@mixin ds-heading-x-large-uppercase {
   @include base-heading(
     'STIHL Contraface Digital Display Title',
     1.625rem,
@@ -27,7 +33,13 @@
   @include responsive-heading('l', 1.875rem, 1.25);
 }
 
+// Large
 @mixin ds-heading-large {
+  @include base-heading('STIHL Contraface Digital Text Bold', 1.375rem, 1.25);
+  @include responsive-heading('l', 1.625rem, 1.2);
+}
+
+@mixin ds-heading-large-uppercase {
   @include base-heading(
     'STIHL Contraface Digital Display Title',
     1.375rem,
@@ -36,6 +48,7 @@
   @include responsive-heading('l', 1.625rem, 1.2);
 }
 
+// Medium
 @mixin ds-heading-medium {
   @include base-heading('STIHL Contraface Digital Text Bold', 1.25rem, 1.2);
 }
@@ -44,10 +57,10 @@
   @include base-heading('STIHL Contraface Digital Display Title', 1.25rem, 1.2);
 }
 
+// Small
 @mixin ds-heading-small {
   @include base-heading('STIHL Contraface Digital Text Bold', 1rem, 1.5);
 }
-
 @mixin ds-heading-small-uppercase {
   @include base-heading('STIHL Contraface Digital Display Title', 1rem, 1.5);
 }

package/styles/scss/lib/_link.scss

@@ -101,10 +101,10 @@
     @include link-underline;
 
     display: inline;
-    padding-right: $ds-spacing-2;
-    padding-left: $ds-spacing-2;
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-inline-end: $ds-spacing-2;
+    padding-inline-start: $ds-spacing-2;
+    padding-block-start: 0;
+    padding-block-end: 0;
     line-height: inherit;
     font-size: inherit;
 
@@ -115,7 +115,7 @@
     :where(&)[href^="https://"]::after,
     :where(&)[href^='#']::after {
       display: inline-block;
-      margin-left: 0.375em;
+      margin-inline-start: 0.375em;
       width: 0.75em;
       height: 0.75em;
     }
@@ -136,10 +136,10 @@
     display: inline-flex;
     align-items: center;
     gap: $ds-spacing-6;
-    padding-right: $ds-spacing-4;
-    padding-left: $ds-spacing-4;
-    padding-top: $ds-spacing-2;
-    padding-bottom: $ds-spacing-2;
+    padding-inline-end: $ds-spacing-4;
+    padding-inline-start: $ds-spacing-4;
+    padding-block-start: $ds-spacing-2;
+    padding-block-end: $ds-spacing-2;
     // Set color to transparent instead of text-decoration: none to support forced colors link decoration
     text-decoration-color: transparent;
 

package/styles/scss/lib/_text.scss

@@ -61,3 +61,7 @@
 @mixin ds-utility-small {
   @include base-text('STIHL Contraface Digital Text Regular', 0.875rem, 1.14);
 }
+
+@mixin ds-utility-small-bold {
+  @include base-text('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
+}

package/switch.BjoFKMQC.js

@@ -0,0 +1,65 @@
+"use client";
+import { j as t } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as b } from "./chunks/index.CvOaL64Y.js";
+import "react";
+import { DSIcon as p } from "./icon.PX9_1kNB.js";
+import { DSSpinner as f } from "./spinner.Diy_EeFY.js";
+import './assets/switch.sqve8ApJ.css';const x = "_root_1gc2h_63", j = "_root--label-right_1gc2h_91", k = "_root--stretched_1gc2h_94", S = "_loader_1gc2h_104", w = "_thumb_1gc2h_157", C = "_root--checked_1gc2h_172", o = {
+  root: x,
+  "root--label-right": "_root--label-right_1gc2h_91",
+  rootLabelRight: j,
+  "root--stretched": "_root--stretched_1gc2h_94",
+  rootStretched: k,
+  switch: "_switch_1gc2h_99",
+  loader: S,
+  thumb: w,
+  "root--checked": "_root--checked_1gc2h_172",
+  rootChecked: C
+}, E = ({
+  children: h,
+  aria: i,
+  alignLabel: l = "left",
+  checked: e = !1,
+  className: _,
+  dataTrackingid: n,
+  disabled: c = !1,
+  loading: r = !1,
+  stretched: d = !1,
+  onClick: s,
+  ...m
+}) => {
+  const g = b(o.root, _, {
+    [o.rootChecked]: e === !0,
+    [o.rootStretched]: d === !0,
+    [o.rootLabelRight]: l === "right"
+  }), u = (a) => {
+    if (c || r) {
+      a.preventDefault();
+      return;
+    }
+    s && s(a);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "button",
+    {
+      className: g,
+      "data-trackingid": n,
+      onClick: u,
+      ...i,
+      ...m,
+      type: "button",
+      role: "switch",
+      "aria-checked": e,
+      "aria-disabled": c || r,
+      "aria-busy": r,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { children: h }),
+        !r && /* @__PURE__ */ t.jsx("span", { className: o.switch, children: /* @__PURE__ */ t.jsx("span", { className: o.thumb, children: /* @__PURE__ */ t.jsx(p, { name: "check", "aria-hidden": "true" }) }) }),
+        r && /* @__PURE__ */ t.jsx("span", { className: o.loader, children: /* @__PURE__ */ t.jsx(f, { aria: { "aria-label": "Loading state" } }) })
+      ]
+    }
+  );
+};
+export {
+  E as DSSwitch
+};

package/{systemfeedback.rBgdiL5T.js → systemfeedback.C7iXO5A1.js}

@@ -1,7 +1,7 @@
 "use client";
 import { j as o } from "./chunks/jsx-runtime.C-kxDJ4g.js";
 import { c } from "./chunks/index.CvOaL64Y.js";
-import { DSIcon as n } from "./icon.CmAhxgHK.js";
+import { DSIcon as n } from "./icon.PX9_1kNB.js";
 import './assets/systemfeedback.WE3wClZ3.css';const i = "_root_18s1i_63", l = {
   root: i
 }, m = {

package/textarea.kc_Sfbgr.js

@@ -0,0 +1,193 @@
+"use client";
+import { j as n } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as S } from "./chunks/index.CvOaL64Y.js";
+import { useState as c, useRef as le, useEffect as x } from "react";
+import { u as oe, h as ie } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { g as H, p as V } from "./chunks/helpers.B1JT5ShS.js";
+import { Asterisk as se } from "./asterisk.DU8THnoC.js";
+import { DSSystemFeedback as re } from "./systemfeedback.C7iXO5A1.js";
+import './assets/textarea.BKbocznb.css';const ce = "_textarea_1elbe_187", de = "_textarea--invalid_1elbe_297", _e = "_textarea--small_1elbe_304", ue = "_textarea--resize-auto_1elbe_316", fe = "_root_1elbe_326", be = "_hint_1elbe_334", xe = "_label_1elbe_334", he = "_affix_1elbe_338", me = "_affix--small_1elbe_358", pe = "_affix--disabled_1elbe_370", ve = "_prefix_1elbe_373", ge = "_affix--readonly_1elbe_376", Se = "_suffix_1elbe_386", Ce = "_leading-icon_1elbe_393", Ie = "_leading-icon--small_1elbe_405", ye = "_leading-icon--disabled_1elbe_408", je = "_action-button_1elbe_417", we = "_label--hidden_1elbe_434", Ae = "_feedback_1elbe_461", De = "_char-count_1elbe_466", Re = "_char-count-announcer_1elbe_481", t = {
+  textarea: ce,
+  "textarea--invalid": "_textarea--invalid_1elbe_297",
+  textareaInvalid: de,
+  "textarea--small": "_textarea--small_1elbe_304",
+  textareaSmall: _e,
+  "textarea--resize-auto": "_textarea--resize-auto_1elbe_316",
+  textareaResizeAuto: ue,
+  root: fe,
+  hint: be,
+  label: xe,
+  affix: he,
+  "affix--small": "_affix--small_1elbe_358",
+  affixSmall: me,
+  "affix--disabled": "_affix--disabled_1elbe_370",
+  affixDisabled: pe,
+  prefix: ve,
+  "affix--readonly": "_affix--readonly_1elbe_376",
+  affixReadonly: ge,
+  suffix: Se,
+  "leading-icon": "_leading-icon_1elbe_393",
+  leadingIcon: Ce,
+  "leading-icon--small": "_leading-icon--small_1elbe_405",
+  leadingIconSmall: Ie,
+  "leading-icon--disabled": "_leading-icon--disabled_1elbe_408",
+  leadingIconDisabled: ye,
+  "action-button": "_action-button_1elbe_417",
+  actionButton: je,
+  "label--hidden": "_label--hidden_1elbe_434",
+  labelHidden: we,
+  feedback: Ae,
+  "char-count": "_char-count_1elbe_466",
+  charCount: De,
+  "char-count-announcer": "_char-count-announcer_1elbe_481",
+  charCountAnnouncer: Re
+}, Ne = ({ id: l, label: _ }) => {
+  if (!l)
+    throw new Error(
+      H(
+        "DSTextarea",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSTextarea component.'
+      )
+    );
+  if (!_)
+    throw new Error(
+      H(
+        "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}.`
+      )
+    );
+}, ze = ({
+  id: l,
+  label: _,
+  charsLimitText: z = "Character limit reached",
+  charsRemainingText: P = "Characters remaining:",
+  className: q,
+  defaultValue: M,
+  disabled: O = !1,
+  hint: h,
+  hideLabel: F = !1,
+  invalid: o = !1,
+  maxLength: e,
+  readonly: C = !1,
+  required: I = !1,
+  resize: u = "vertical",
+  size: W = "medium",
+  systemFeedback: s,
+  value: m,
+  wrapperClassName: G,
+  onChange: y,
+  onInput: j,
+  ...J
+}) => {
+  process.env.NODE_ENV !== "production" && Ne({
+    id: l,
+    label: _
+  });
+  const [K, w] = c(M || ""), [r, A] = c(0), [Q, D] = c(0), [U, R] = c("off"), [N, p] = c(s), [v, g] = c(o), T = m !== void 0, f = T ? m : K, i = le(null), X = oe(F);
+  x(() => {
+    if (!e || e <= 0)
+      return;
+    r >= e * 0.8 ? R("polite") : R("off");
+    const a = setTimeout(() => {
+      D(e - r || 0);
+    }, 1e3);
+    return () => clearTimeout(a);
+  }, [r]), x(() => {
+    w(f || ""), d(), e && e > 0 && (A(f.toString().length || 0), D(e - f.toString().length || 0));
+  }, [m]), x(() => {
+    o && s ? (p(s), g(o)) : !o && e && e >= 0 && r >= e ? (g(!0), p(z)) : (p(s), g(o));
+  }, [o, v, s, r]), x(() => {
+    if (ie && u === "auto")
+      return d(), window.addEventListener("resize", d), () => window.removeEventListener("resize", d);
+  }, [u, i.current]);
+  const Y = S(t.root, G), Z = S(t.textarea, q, {
+    // small textarea
+    [t.textareaSmall]: W === "small",
+    // invalid state
+    [t.textareaInvalid]: v,
+    // resize handling
+    [t.textareaResizeAuto]: u === "auto"
+  }), L = S(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: X
+  }), B = `${l}-label`, E = `${l}-feedback`, $ = `${l}-hint`, k = `${l}-char-count-announcer`, ee = h ? ` ${$}` : "", d = () => {
+    if (i.current && u === "auto") {
+      i.current.style.height = "auto";
+      const a = V(i.current.scrollHeight), b = V(2);
+      i.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 + b}rem`;
+    }
+  }, ae = () => {
+    const a = [];
+    return e && e > 0 && a.push(k), o && s && a.push(E), a.length > 0 ? a.join(" ") : void 0;
+  }, te = (a) => {
+    var b;
+    j && j(a), e && e > 0 && A(((b = i.current) == null ? void 0 : b.value.length) || 0), d();
+  }, ne = (a) => {
+    y && y(a), T || w(a.target.value);
+  };
+  return /* @__PURE__ */ n.jsxs("div", { className: Y, children: [
+    /* @__PURE__ */ n.jsxs("label", { className: L, id: B, htmlFor: l, children: [
+      _,
+      I && /* @__PURE__ */ n.jsx(se, {})
+    ] }),
+    h && /* @__PURE__ */ n.jsx("div", { className: t.hint, id: $, children: h }),
+    v && N && /* @__PURE__ */ n.jsx(
+      re,
+      {
+        className: t.feedback,
+        message: N,
+        type: "invalid",
+        id: E
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      "textarea",
+      {
+        className: Z,
+        id: l,
+        ref: i,
+        ...J,
+        "aria-labelledby": `${B}${ee}`,
+        "aria-describedby": ae(),
+        "aria-invalid": o,
+        "aria-disabled": C,
+        maxLength: e,
+        readOnly: C,
+        required: I,
+        disabled: O,
+        value: f,
+        defaultValue: void 0,
+        rows: void 0,
+        cols: void 0,
+        onChange: ne,
+        onInput: te
+      }
+    ),
+    e !== void 0 && e > 0 && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+      /* @__PURE__ */ n.jsxs("div", { className: t.charCount, "aria-hidden": "true", children: [
+        r,
+        "/",
+        e
+      ] }),
+      /* @__PURE__ */ n.jsxs(
+        "div",
+        {
+          className: t.charCountAnnouncer,
+          id: k,
+          "aria-live": U,
+          "aria-atomic": "true",
+          children: [
+            P,
+            " ",
+            Q
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ze as DSTextarea
+};

package/title.icX0VDiO.js

@@ -0,0 +1,36 @@
+"use client";
+import { j as o } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as g } from "./chunks/index.CvOaL64Y.js";
+import './assets/title.CE0Dm7PI.css';const n = "_root_1bpc5_63", h = "_root--x-large-uppercase_1bpc5_66", m = "_root--large-uppercase_1bpc5_80", d = "_root--theme-dark_1bpc5_94", u = "_dash_1bpc5_97", r = {
+  root: n,
+  "root--x-large-uppercase": "_root--x-large-uppercase_1bpc5_66",
+  rootXLargeUppercase: h,
+  "root--large-uppercase": "_root--large-uppercase_1bpc5_80",
+  rootLargeUppercase: m,
+  "root--theme-dark": "_root--theme-dark_1bpc5_94",
+  rootThemeDark: d,
+  dash: u
+}, b = ({
+  children: a,
+  className: t,
+  size: e = "x-large",
+  tag: s = "h1",
+  // Design suggested to set default tag to h1
+  theme: p = "light",
+  ...c
+}) => {
+  const _ = s, l = g(r.root, t, {
+    // sizes
+    [r.rootXLargeUppercase]: e === "x-large",
+    [r.rootLargeUppercase]: e === "large",
+    // dark theme
+    [r.rootThemeDark]: p === "dark"
+  });
+  return /* @__PURE__ */ o.jsxs(_, { className: l, ...c, children: [
+    a,
+    /* @__PURE__ */ o.jsx("span", { className: r.dash, "aria-hidden": "true", children: "ƒ" })
+  ] });
+};
+export {
+  b as DSTitle
+};

package/types/icon-types.d.ts

@@ -1,2 +1,2 @@
-export declare const ICON_NAMES: readonly ["360", "academic-cap", "alarm-clock", "arrow-clockwise", "arrow-counterclockwise", "arrow-down", "arrow-down-line", "arrow-edge", "arrow-left", "arrow-out", "arrow-outline-left", "arrow-right", "arrow-up", "arrow-up-arrow-down", "at", "barcode-scanner", "battery", "bell", "bin", "bin-open", "bluetooth", "bookmark", "burger", "calendar", "camera", "cart", "cart-check", "cart-plus", "catalog", "certificate", "chain-link", "chainsaw", "check", "chevron-down", "chevron-left", "chevron-line-left", "chevron-line-right", "chevron-right", "chevron-up", "circle", "circle-check-colored", "circle-check-inverted", "circle-info-colored", "circle-info-inverted", "circle-pause", "circle-stroke", "clock", "coffee-cup", "compare", "connected-box", "connected-box-mobile", "connected-box-stationary", "cross", "diamond", "diamond-exclamationmark-colored", "diamond-exclamationmark-inverted", "diskette", "distance", "dots-connected", "download-complete", "envelope", "envelope-open", "exclamationmark", "exit", "eye", "eye-closed", "facebook", "filter", "finger-double-arrow", "flash", "fullscreen", "gear", "globe", "grid", "guidance", "haircross", "hanger", "headphones", "heart", "hexagon-arrow-clockwise", "horizontal-ellipsis", "house", "imow", "info", "instagram", "leave-fullscreen", "lightbulb", "linkedin", "list-three-rows", "list-two-rows", "loading-spinner", "lock", "magnifying-glass", "magnifying-glass-minus", "magnifying-glass-plus", "map", "minus", "mobile", "nine-squares", "note", "note-check", "note-plus", "number-input", "paperclip", "parcel", "pause", "pdf", "pen", "percent", "petrol", "phone", "pin", "pin-s", "pinterest", "placeholder", "play", "plug", "plus", "printer", "prohibition-sign", "questionmark", "security", "share", "shirt", "shop", "sound-off", "sound-on", "speechbubble", "speechbubbles", "square", "star", "star-half", "tag", "thumbs-down", "thumbs-up", "triangle", "triangle-exclamationmark-colored", "triangle-exclamationmark-inverted", "truck", "two-people-screen", "two-sheets", "upload", "user", "vertical-ellipsis", "wc", "wifi", "wifi-1bar", "wifi-2bars", "wifi-off", "wind-rose", "wrench", "x", "xing", "youtube"];
+export declare const ICON_NAMES: readonly ["360", "academic-cap", "alarm-clock", "arrow-clockwise", "arrow-counterclockwise", "arrow-down", "arrow-down-line", "arrow-edge", "arrow-left", "arrow-out", "arrow-outline-left", "arrow-right", "arrow-up", "arrow-up-arrow-down", "at", "barcode-scanner", "battery", "bell", "bin", "bin-open", "bluetooth", "bookmark", "burger", "calendar", "camera", "cart", "cart-check", "cart-plus", "catalog", "certificate", "chain-link", "chainsaw", "check", "chevron-down", "chevron-left", "chevron-line-left", "chevron-line-right", "chevron-right", "chevron-up", "circle", "circle-check-colored", "circle-check-inverted", "circle-info-colored", "circle-info-inverted", "circle-pause", "circle-stroke", "clock", "coffee-cup", "compare", "connected-box", "connected-box-mobile", "connected-box-stationary", "cross", "diamond", "diamond-exclamationmark-colored", "diamond-exclamationmark-inverted", "diskette", "distance", "dots-connected", "download-complete", "envelope", "envelope-open", "exclamationmark", "exit", "eye", "eye-closed", "facebook", "filter", "finger-double-arrow", "flash", "fullscreen", "gear", "globe", "grid", "guidance", "haircross", "hanger", "headphones", "heart", "hexagon-arrow-clockwise", "horizontal-ellipsis", "house", "imow", "info", "instagram", "leave-fullscreen", "lightbulb", "linkedin", "list-three-rows", "list-two-rows", "loading-spinner", "lock", "magnifying-glass", "magnifying-glass-minus", "magnifying-glass-plus", "map", "minus", "mobile", "nine-squares", "note", "note-check", "note-plus", "number-input", "paperclip", "parcel", "pause", "pdf", "pen", "percent", "petrol", "phone", "pin", "pin-s", "pinterest", "placeholder", "play", "plug", "plus", "printer", "prohibition-sign", "questionmark", "security", "share", "shirt", "shop", "sound-off", "sound-on", "speechbubble", "speechbubbles", "square", "star", "star-half", "tag", "thumbs-down", "thumbs-up", "triangle", "triangle-exclamationmark-colored", "triangle-exclamationmark-inverted", "truck", "two-people-screen", "two-sheets", "upload", "user", "vertical-ellipsis", "wc", "whatsapp", "wifi", "wifi-1bar", "wifi-2bars", "wifi-off", "wind-rose", "wrench", "x", "xing", "youtube"];
 export type IconName = typeof ICON_NAMES[number];