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

package/styles/scss/lib/_grid.scss

@@ -3,7 +3,6 @@
   --ds-grid-gap: 16px;
   gap: var(--ds-grid-gap);
   min-width: 320px;
-  box-sizing: content-box;
   grid-template-columns:
     [full-start extended-start] var(--ds-internal-grid-safe-zone)
     [main-start narrow-left-start narrow-center-start] repeat(4, minmax(0, 1fr))
@@ -11,14 +10,14 @@
       --ds-internal-grid-safe-zone
     )
     [extended-end full-end];
-  // The safe zone + gap equal to what is called "margin" in the designs 0+16 = 16
+  // The safe zone + gap equal to what is called "margin" in the figma designs 0+16 = 16
   --ds-internal-grid-safe-zone: 0;
   --ds-grid-span-one-half: span 4;
   --ds-grid-span-one-third: span 4;
   --ds-grid-span-two-thirds: span 4;
   --ds-grid-span-one-quarter: span 2;
 
-  @media (min-width: 768px) {
+  @include ds-media-query-min('m') {
     --ds-grid-gap: 24px;
     gap: var(--ds-grid-gap);
     grid-template-columns:
@@ -31,7 +30,7 @@
         --ds-internal-grid-safe-zone
       )
       [extended-end full-end];
-    // The safe zone + gap equal to what is called "margin" in the designs 9+24 = 33
+    // The safe zone + gap equal to what is called "margin" in the figma designs 9+24 = 33
     --ds-internal-grid-safe-zone: 9px;
     --ds-grid-span-one-half: span 3;
     --ds-grid-span-one-third: span 2;
@@ -39,7 +38,7 @@
     --ds-grid-span-one-quarter: span 3;
   }
 
-  @media (min-width: 1024px) {
+  @include ds-media-query-min('l') {
     grid-template-columns:
       [full-start extended-start] var(--ds-internal-grid-safe-zone)
       [main-start narrow-left-start] repeat(2, minmax(0, 1fr))
@@ -48,14 +47,14 @@
       [narrow-center-end] repeat(2, minmax(0, 1fr))
       [main-end] var(--ds-internal-grid-safe-zone)
       [extended-end full-end];
-    // The safe zone + gap equal to what is called "margin" in the designs 26+24 = 50
+    // The safe zone + gap equal to what is called "margin" in the figma designs 26+24 = 50
     --ds-internal-grid-safe-zone: 26px;
     --ds-grid-span-one-half: span 6;
     --ds-grid-span-one-third: span 4;
     --ds-grid-span-two-thirds: span 8;
   }
 
-  @media (min-width: 1536px) {
+  @include ds-media-query-min('xl') {
     --ds-grid-gap: 32px;
     gap: var(--ds-grid-gap);
     grid-template-columns:
@@ -66,18 +65,21 @@
       [narrow-center-end] repeat(3, minmax(0, 1fr))
       [main-end] var(--ds-internal-grid-safe-zone)
       [extended-end full-end];
-    // The safe zone + gap equal to what is called "margin" in the designs 32+32 = 64
+    // The safe zone + gap equal to what is called "margin" in the figma designs 32+32 = 64
     --ds-internal-grid-safe-zone: 32px;
   }
 
-  @media (min-width: 1668px) {
+  @include ds-media-query-min('xxl') {
+    // the calculation here is based on the fact
+    // that we want the main area (main-start till main-end) maximum width to be exactly 1540px
+    // so we have to pick 1584px and divide that by 16
     grid-template-columns:
       [full-start] auto
       [extended-start] var(--ds-internal-grid-safe-zone)
-      [main-start narrow-left-start] repeat(3, minmax(0, calc(1668px / 16)))
-      [narrow-center-start] repeat(3, minmax(0, calc(1668px / 16)))
-      [narrow-left-end] repeat(3, minmax(0, calc(1668px / 16)))
-      [narrow-center-end] repeat(3, minmax(0, calc(1668px / 16)))
+      [main-start narrow-left-start] repeat(3, minmax(0, calc(1584px / 16)))
+      [narrow-center-start] repeat(3, minmax(0, calc(1584px / 16)))
+      [narrow-left-end] repeat(3, minmax(0, calc(1584px / 16)))
+      [narrow-center-end] repeat(3, minmax(0, calc(1584px / 16)))
       [main-end] var(--ds-internal-grid-safe-zone)
       [extended-end]
       auto [full-end];

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/_high-contrast.scss

@@ -0,0 +1,24 @@
+/**
+ * This mixin provides a utility to wrap styles within a media query specifically
+ * targeting devices that have forced-colors active and thus are in high-contrast mode.
+ *
+ * You can use the following keywords to set specific colors for elements in high contrast mode:
+ * @example
+ * ```markdown
+ * | Content                  | Keyword       |
+ * |--------------------------|---------------|
+ * | Text                     | CanvasText    |
+ * | Hyperlinks               | LinkText      |
+ * | Disabled Text            | GrayText      |
+ * | Selected Text, foreground| HighlightText |
+ * | Selected Text, background| Highlight     |
+ * | Buttons, foreground      | ButtonText    |
+ * | Buttons, background      | ButtonFace    |
+ * | Backgrounds              | Canvas        |
+ * ```
+ */
+@mixin high-contrast-media-query {
+  @media screen and (forced-colors: active) {
+    @content;
+  }
+}

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/_spacing.scss

@@ -16,3 +16,15 @@ $ds-spacing-80: 80px;
 $ds-spacing-96: 96px;
 $ds-spacing-128: 128px;
 $ds-spacing-160: 160px;
+
+// Functions to adjust spacing to account for the inner border of an element  as designed in Figma.
+// This is necessary to ensure that the spacing matches the design specifications
+// where the border is included inside the element, causing an effective reduction
+// in the available space by the width of the border.
+@function adjust-spacing-for-border-1($spacing) {
+  @return #{calc($spacing - $ds-spacing-1)};
+}
+
+@function adjust-spacing-for-border-2($spacing) {
+  @return #{calc($spacing - $ds-spacing-2)};
+}

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/styles/scss/lib/_theme.scss

@@ -76,7 +76,7 @@ $ds-theme-light-border-color-focus: $ds-color-core-grey-ultra-deep;
 $ds-theme-light-border-color-primary-disabled: $ds-color-core-black-opacity-50;
 $ds-theme-light-border-color-primary-inverse: $ds-color-core-white-base;
 $ds-theme-light-border-color-primary: $ds-color-core-grey-ultra-deep;
-$ds-theme-light-border-color-secondary-disabled: $ds-color-core-black-opacity-50;
+$ds-theme-light-border-color-secondary-disabled: $ds-color-core-black-opacity-10;
 $ds-theme-light-border-color-secondary: $ds-color-core-grey-base;
 $ds-theme-light-border-color-tertiary: $ds-color-core-grey-mid;
 $ds-theme-light-content-color-brand-disabled: $ds-color-core-black-opacity-50;
@@ -133,7 +133,7 @@ $ds-theme-dark-border-color-focus: $ds-color-core-white-base;
 $ds-theme-dark-border-color-primary-disabled: $ds-color-core-white-opacity-50;
 $ds-theme-dark-border-color-primary-inverse: $ds-color-core-grey-ultra-deep;
 $ds-theme-dark-border-color-primary: $ds-color-core-grey-ultra-light;
-$ds-theme-dark-border-color-secondary-disabled: $ds-color-core-white-opacity-50;
+$ds-theme-dark-border-color-secondary-disabled: $ds-color-core-white-opacity-15;
 $ds-theme-dark-border-color-secondary: $ds-color-core-grey-dark;
 $ds-theme-dark-border-color-tertiary: $ds-color-core-grey-deep;
 $ds-theme-dark-content-color-brand-disabled: $ds-color-core-white-opacity-50;

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.C7iXO5A1.js

@@ -0,0 +1,25 @@
+"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.PX9_1kNB.js";
+import './assets/systemfeedback.WE3wClZ3.css';const i = "_root_18s1i_63", l = {
+  root: i
+}, m = {
+  valid: "circle-check-colored",
+  invalid: "diamond-exclamationmark-colored",
+  warning: "triangle-exclamationmark-colored"
+}, p = ({
+  className: e,
+  message: r,
+  type: s,
+  ...t
+}) => {
+  const a = c(l.root, e);
+  return /* @__PURE__ */ o.jsxs("div", { className: a, ...t, role: "alert", children: [
+    /* @__PURE__ */ o.jsx(n, { name: m[s], "aria-hidden": "true" }),
+    r
+  ] });
+};
+export {
+  p as DSSystemFeedback
+};

package/text.CPU8IUqY.js

@@ -0,0 +1,57 @@
+"use client";
+import { j as x } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as v } from "./chunks/index.CvOaL64Y.js";
+import './assets/text.DDAveG7E.css';const c = "_root_16s1v_63", n = "_root--large_16s1v_69", u = "_root--large-bold_16s1v_79", b = "_root--medium_16s1v_89", S = "_root--medium-bold_16s1v_99", g = "_root--small_16s1v_109", B = "_root--small-bold_16s1v_119", i = "_root--x-small_16s1v_129", X = "_root--x-small-bold_16s1v_139", k = "_root--xx-small_16s1v_149", L = "_root--theme-dark_16s1v_159", o = {
+  root: c,
+  "root--large": "_root--large_16s1v_69",
+  rootLarge: n,
+  "root--large-bold": "_root--large-bold_16s1v_79",
+  rootLargeBold: u,
+  "root--medium": "_root--medium_16s1v_89",
+  rootMedium: b,
+  "root--medium-bold": "_root--medium-bold_16s1v_99",
+  rootMediumBold: S,
+  "root--small": "_root--small_16s1v_109",
+  rootSmall: g,
+  "root--small-bold": "_root--small-bold_16s1v_119",
+  rootSmallBold: B,
+  "root--x-small": "_root--x-small_16s1v_129",
+  rootXSmall: i,
+  "root--x-small-bold": "_root--x-small-bold_16s1v_139",
+  rootXSmallBold: X,
+  "root--xx-small": "_root--xx-small_16s1v_149",
+  rootXxSmall: k,
+  "root--theme-dark": "_root--theme-dark_16s1v_159",
+  rootThemeDark: L
+}, T = ({
+  children: t,
+  className: m,
+  size: l = "medium",
+  tag: a = "p",
+  theme: s = "light",
+  weight: r = "normal",
+  ..._
+}) => {
+  const d = a, e = v(o.root, m, {
+    // large
+    [o.rootLarge]: l === "large",
+    [o.rootLargeBold]: l === "large" && r === "bold",
+    // medium
+    [o.rootMedium]: l == "medium",
+    [o.rootMediumBold]: l === "medium" && r === "bold",
+    // small
+    [o.rootSmall]: l == "small",
+    [o.rootSmallBold]: l == "small" && r === "bold",
+    // x-small
+    [o.rootXSmall]: l == "x-small",
+    [o.rootXSmallBold]: l == "x-small" && r === "bold",
+    // xx-small
+    [o.rootXxSmall]: l == "xx-small",
+    // dark theme
+    [o.rootThemeDark]: s === "dark"
+  });
+  return /* @__PURE__ */ x.jsx(d, { className: e, ..._, children: t });
+};
+export {
+  T as DSText
+};

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];

package/utils/render-documentation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type DocumentationRenderOptions = {
     hideCodeExample?: boolean;
     hideControls?: boolean;

package/utils/useBreakpoint.d.ts

@@ -1,4 +1,5 @@
-import { type BreakpointCustomizable } from './breakpoint-customizable';
+import { BreakpointCustomizable } from './breakpoint-customizable';
+
 /**
  * A React hook that consumes a `BreakpointCustomizable` property and returns the value
  * corresponding to the current breakpoint. If the property is a primitive value, it is

package/utils/vitest.setup.d.ts

@@ -0,0 +1 @@
+

package/assets/Asterisk.288a3f48.css

@@ -1 +0,0 @@
-._root_1ygcr_25{margin-left:2px;font-family:STIHL Contraface Digital Text Regular,Arial Narrow,Arial,Heiti SC,sans-serif;line-height:0}