@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/styles/scss/ds/lib/theme.scss

@@ -0,0 +1,171 @@
+
+
+
+$color-core-black-base: #050505;
+$color-core-black-opacity-10: #0000001A;
+$color-core-black-opacity-50: #00000080;
+$color-core-blue-base: #249ABE;
+$color-core-blue-dark: #1E71A1;
+$color-core-blue-deep: #19618B;
+$color-core-blue-light: #D4ECF7;
+$color-core-blue-mid: #8DCFE8;
+$color-core-forest-base: #4A9E5F;
+$color-core-forest-dark: #3C8653;
+$color-core-forest-deep: #2D7644;
+$color-core-forest-light: #DBF0E1;
+$color-core-forest-mid: #77C089;
+$color-core-green-base: #749F4A;
+$color-core-green-dark: #5B863C;
+$color-core-green-deep: #46762D;
+$color-core-green-light: #E5F0DB;
+$color-core-green-mid: #9BC077;
+$color-core-grey-base: #B1B1B1;
+$color-core-grey-dark: #666666;
+$color-core-grey-deep: #444444;
+$color-core-grey-light: #EDEDED;
+$color-core-grey-mid: #DADADA;
+$color-core-grey-semi-dark: #8C8C8C;
+$color-core-grey-ultra-deep: #252525;
+$color-core-grey-ultra-light: #F8F8F8;
+$color-core-orange-base: #F37A1F;
+$color-core-orange-dark: #E9640C;
+$color-core-orange-deep: #D9480F;
+$color-core-orange-light: #FEE2CD;
+$color-core-orange-mid: #F7A669;
+$color-core-red-base: #D43B3B;
+$color-core-red-dark: #B72427;
+$color-core-red-deep: #A5181D;
+$color-core-red-light: #EEBCBD;
+$color-core-red-mid: #DA6B6D;
+$color-core-white-base: #FFFFFF;
+$color-core-white-opacity-15: #FFFFFF26;
+$color-core-white-opacity-50: #FFFFFF80;
+$color-core-yellow-base: #FDC543;
+$color-core-yellow-dark: #F9A521;
+$color-core-yellow-deep: #EE8F00;
+$color-core-yellow-light: #FDECC3;
+$color-core-yellow-mid: #FED277;
+
+
+$theme-light-background-color-brand-disabled: $color-core-grey-mid;
+$theme-light-background-color-brand-hover: $color-core-orange-dark;
+$theme-light-background-color-brand-pressed: $color-core-orange-dark;
+$theme-light-background-color-brand: $color-core-orange-base;
+$theme-light-background-color-feedback-error: $color-core-red-light;
+$theme-light-background-color-feedback-info: $color-core-grey-light;
+$theme-light-background-color-feedback-success: $color-core-green-light;
+$theme-light-background-color-feedback-warning: $color-core-yellow-light;
+$theme-light-background-color-primary-disabled: $color-core-white-base;
+$theme-light-background-color-primary-hover: $color-core-grey-light;
+$theme-light-background-color-primary-inverse-disabled: $color-core-grey-mid;
+$theme-light-background-color-primary-inverse-hover: $color-core-grey-deep;
+$theme-light-background-color-primary-inverse-pressed: $color-core-grey-deep;
+$theme-light-background-color-primary-inverse: $color-core-grey-ultra-deep;
+$theme-light-background-color-primary-pressed: $color-core-grey-light;
+$theme-light-background-color-primary: $color-core-white-base;
+$theme-light-background-color-secondary-disabled: $color-core-grey-ultra-light;
+$theme-light-background-color-secondary-inverse-disabled: $color-core-grey-mid;
+$theme-light-background-color-secondary-inverse: $color-core-grey-deep;
+$theme-light-background-color-secondary: $color-core-grey-ultra-light;
+$theme-light-background-color-sustainability: $color-core-forest-light;
+$theme-light-background-color-tertiary: $color-core-grey-light;
+$theme-light-background-color-transparent-hover: $color-core-black-opacity-10;
+$theme-light-background-color-transparent-pressed: $color-core-black-opacity-10;
+$theme-light-background-color-transparent: $color-core-black-opacity-10;
+$theme-light-border-color-feedback-error: $color-core-red-base;
+$theme-light-border-color-feedback-info: $color-core-grey-dark;
+$theme-light-border-color-feedback-success: $color-core-green-base;
+$theme-light-border-color-feedback-warning: $color-core-yellow-base;
+$theme-light-border-color-focus: $color-core-grey-ultra-deep;
+$theme-light-border-color-primary-disabled: $color-core-black-opacity-50;
+$theme-light-border-color-primary-inverse: $color-core-white-base;
+$theme-light-border-color-primary: $color-core-grey-ultra-deep;
+$theme-light-border-color-secondary-disabled: $color-core-black-opacity-10;
+$theme-light-border-color-secondary: $color-core-grey-base;
+$theme-light-border-color-tertiary: $color-core-grey-mid;
+$theme-light-content-color-brand-disabled: $color-core-black-opacity-50;
+$theme-light-content-color-brand-hover: $color-core-orange-deep;
+$theme-light-content-color-brand-pressed: $color-core-orange-deep;
+$theme-light-content-color-brand: $color-core-orange-dark;
+$theme-light-content-color-feedback-error: $color-core-red-base;
+$theme-light-content-color-feedback-info: $color-core-grey-base;
+$theme-light-content-color-feedback-success: $color-core-green-base;
+$theme-light-content-color-feedback-warning: $color-core-yellow-base;
+$theme-light-content-color-interaction-accent-hover: $color-core-blue-deep;
+$theme-light-content-color-interaction-accent-pressed: $color-core-blue-deep;
+$theme-light-content-color-interaction-accent: $color-core-blue-dark;
+$theme-light-content-color-interaction-neutral: $color-core-grey-ultra-deep;
+$theme-light-content-color-primary-disabled: $color-core-black-opacity-50;
+$theme-light-content-color-primary-inverse-disabled: $color-core-black-opacity-50;
+$theme-light-content-color-primary-inverse: $color-core-white-base;
+$theme-light-content-color-primary-on-brand-disabled: $color-core-black-opacity-50;
+$theme-light-content-color-primary-on-brand: $color-core-grey-ultra-deep;
+$theme-light-content-color-primary: $color-core-grey-ultra-deep;
+$theme-light-content-color-secondary-disabled: $color-core-black-opacity-50;
+$theme-light-content-color-secondary: $color-core-grey-dark;
+$theme-light-content-color-sustainability: $color-core-forest-base;
+$theme-light-content-color-tertiary-inverse-disabled: $color-core-black-opacity-10;
+$theme-light-content-color-tertiary-inverse: $color-core-grey-semi-dark;
+$theme-light-content-color-tertiary: $color-core-grey-base;
+
+
+$theme-dark-background-color-brand-disabled: $color-core-grey-mid;
+$theme-dark-background-color-brand-hover: $color-core-orange-dark;
+$theme-dark-background-color-brand-pressed: $color-core-orange-dark;
+$theme-dark-background-color-brand: $color-core-orange-base;
+$theme-dark-background-color-feedback-error: $color-core-grey-deep;
+$theme-dark-background-color-feedback-info: $color-core-grey-deep;
+$theme-dark-background-color-feedback-success: $color-core-grey-deep;
+$theme-dark-background-color-feedback-warning: $color-core-grey-deep;
+$theme-dark-background-color-primary-disabled: $color-core-black-base;
+$theme-dark-background-color-primary-hover: $color-core-grey-deep;
+$theme-dark-background-color-primary-inverse-disabled: $color-core-grey-mid;
+$theme-dark-background-color-primary-inverse-hover: $color-core-grey-mid;
+$theme-dark-background-color-primary-inverse-pressed: $color-core-grey-mid;
+$theme-dark-background-color-primary-inverse: $color-core-grey-ultra-light;
+$theme-dark-background-color-primary-pressed: $color-core-grey-deep;
+$theme-dark-background-color-primary: $color-core-black-base;
+$theme-dark-background-color-secondary-disabled: $color-core-grey-ultra-deep;
+$theme-dark-background-color-secondary-inverse-disabled: $color-core-grey-base;
+$theme-dark-background-color-secondary-inverse: $color-core-grey-light;
+$theme-dark-background-color-secondary: $color-core-grey-ultra-deep;
+$theme-dark-background-color-sustainability: $color-core-grey-deep;
+$theme-dark-background-color-tertiary: $color-core-grey-ultra-deep;
+$theme-dark-background-color-transparent-hover: $color-core-white-opacity-15;
+$theme-dark-background-color-transparent-pressed: $color-core-white-opacity-15;
+$theme-dark-background-color-transparent: $color-core-white-opacity-15;
+$theme-dark-border-color-feedback-error: $color-core-red-base;
+$theme-dark-border-color-feedback-info: $color-core-grey-dark;
+$theme-dark-border-color-feedback-success: $color-core-green-base;
+$theme-dark-border-color-feedback-warning: $color-core-yellow-base;
+$theme-dark-border-color-focus: $color-core-white-base;
+$theme-dark-border-color-primary-disabled: $color-core-white-opacity-50;
+$theme-dark-border-color-primary-inverse: $color-core-grey-ultra-deep;
+$theme-dark-border-color-primary: $color-core-grey-ultra-light;
+$theme-dark-border-color-secondary-disabled: $color-core-white-opacity-15;
+$theme-dark-border-color-secondary: $color-core-grey-dark;
+$theme-dark-border-color-tertiary: $color-core-grey-deep;
+$theme-dark-content-color-brand-disabled: $color-core-white-opacity-50;
+$theme-dark-content-color-brand-hover: $color-core-orange-mid;
+$theme-dark-content-color-brand-pressed: $color-core-orange-mid;
+$theme-dark-content-color-brand: $color-core-orange-base;
+$theme-dark-content-color-feedback-error: $color-core-red-mid;
+$theme-dark-content-color-feedback-info: $color-core-grey-base;
+$theme-dark-content-color-feedback-success: $color-core-green-mid;
+$theme-dark-content-color-feedback-warning: $color-core-yellow-mid;
+$theme-dark-content-color-interaction-accent-hover: $color-core-blue-mid;
+$theme-dark-content-color-interaction-accent-pressed: $color-core-blue-mid;
+$theme-dark-content-color-interaction-accent: $color-core-blue-mid;
+$theme-dark-content-color-interaction-neutral: $color-core-white-base;
+$theme-dark-content-color-primary-disabled: $color-core-white-opacity-50;
+$theme-dark-content-color-primary-inverse-disabled: $color-core-black-opacity-50;
+$theme-dark-content-color-primary-inverse: $color-core-grey-ultra-deep;
+$theme-dark-content-color-primary-on-brand-disabled: $color-core-black-opacity-50;
+$theme-dark-content-color-primary-on-brand: $color-core-grey-ultra-deep;
+$theme-dark-content-color-primary: $color-core-white-base;
+$theme-dark-content-color-secondary-disabled: $color-core-white-opacity-50;
+$theme-dark-content-color-secondary: $color-core-grey-base;
+$theme-dark-content-color-sustainability: $color-core-forest-mid;
+$theme-dark-content-color-tertiary-inverse-disabled: $color-core-white-opacity-15;
+$theme-dark-content-color-tertiary-inverse: $color-core-grey-dark;
+$theme-dark-content-color-tertiary: $color-core-grey-dark;

package/styles/scss/ds/lib/transition.scss

@@ -0,0 +1,36 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'animation' as *;
+
+@mixin transition($properties, $duration-key: '100', $easing-key: 'linear') {
+  @if list.length($properties) == 0 or $properties == null {
+    @error "[STIHL Design System] - [ds.transition()]: No properties provided for ds.transition() mixin.";
+  }
+
+  $duration: map.get($animation-durations, $duration-key);
+  $easing: map.get($animation-easing-functions, $easing-key);
+
+  @if not map.has-key($animation-durations, $duration-key) {
+    @error "[STIHL Design System] - [ds.transition()]: Duration key '#{$duration-key}' is not available in the ds.transition() mixin.";
+  }
+
+  @if not map.has-key($animation-easing-functions, $easing-key) {
+    @error "[STIHL Design System] - [ds.transition()]: Easing key '#{$easing-key}' is not available in the ds.transition() mixin.";
+  }
+
+  $transition-values: ();
+  @each $prop in $properties {
+    $transition-values: list.append(
+      $transition-values,
+      #{$prop} #{$duration} #{$easing},
+      comma
+    );
+  }
+  & {
+    transition: $transition-values;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
+  }
+}

package/switch.DgKgzm-j.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsxs as O, jsx as h } from "react/jsx-runtime";
+import { d as $ } from "./chunks/index.cKLI89Eg.js";
+import { c as q } from "./chunks/index.DQOqod3i.js";
+import { forwardRef as z } from "react";
+import { D as A } from "./chunks/Icon.m6sMB6vl.js";
+import { DSSpinner as B } from "./spinner.CRVyui04.js";
+import './assets/switch.DYamtd9O.css';const F = "ds-switch_root_gdcld_1", G = "ds-switch_root--label-right_gdcld_40", H = "ds-switch_root--stretched_gdcld_43", J = "ds-switch_loader_gdcld_53", K = "ds-switch_thumb_gdcld_111", M = "ds-switch_root--checked_gdcld_126", o = {
+  root: F,
+  rootLabelRight: G,
+  rootStretched: H,
+  switch: "ds-switch_switch_gdcld_48",
+  loader: J,
+  thumb: K,
+  rootChecked: M
+}, P = z((C, N) => {
+  const t = $.c(38);
+  let c, l, i, s, r, m, f, _, b, g;
+  t[0] !== C ? ({
+    children: l,
+    aria: c,
+    alignLabel: m,
+    checked: f,
+    className: i,
+    disabled: _,
+    loading: b,
+    stretched: g,
+    onClick: s,
+    ...r
+  } = C, t[0] = C, t[1] = c, t[2] = l, t[3] = i, t[4] = s, t[5] = r, t[6] = m, t[7] = f, t[8] = _, t[9] = b, t[10] = g) : (c = t[1], l = t[2], i = t[3], s = t[4], r = t[5], m = t[6], f = t[7], _ = t[8], b = t[9], g = t[10]);
+  const E = m === void 0 ? "left" : m, p = f === void 0 ? !1 : f, u = _ === void 0 ? !1 : _, e = b === void 0 ? !1 : b, I = g === void 0 ? !1 : g, D = p === !0, L = I === !0, v = E === "right";
+  let w;
+  t[11] !== i || t[12] !== D || t[13] !== L || t[14] !== v ? (w = q(o.root, i, {
+    [o.rootChecked]: D,
+    [o.rootStretched]: L,
+    [o.rootLabelRight]: v
+  }), t[11] = i, t[12] = D, t[13] = L, t[14] = v, t[15] = w) : w = t[15];
+  const x = w;
+  let k;
+  t[16] !== u || t[17] !== e || t[18] !== s ? (k = (j) => {
+    if (u || e) {
+      j.preventDefault();
+      return;
+    }
+    s && s(j);
+  }, t[16] = u, t[17] = e, t[18] = s, t[19] = k) : k = t[19];
+  const y = k, R = u || e;
+  let a;
+  t[20] !== l ? (a = /* @__PURE__ */ h("span", { children: l }), t[20] = l, t[21] = a) : a = t[21];
+  let d;
+  t[22] !== e ? (d = !e && /* @__PURE__ */ h("span", { className: o.switch, children: /* @__PURE__ */ h("span", { className: o.thumb, children: /* @__PURE__ */ h(A, { name: "check", "aria-hidden": "true" }) }) }), t[22] = e, t[23] = d) : d = t[23];
+  let n;
+  t[24] !== e ? (n = e && /* @__PURE__ */ h("span", { className: o.loader, children: /* @__PURE__ */ h(B, { aria: {
+    "aria-label": "Loading state"
+  } }) }), t[24] = e, t[25] = n) : n = t[25];
+  let S;
+  return t[26] !== c || t[27] !== p || t[28] !== y || t[29] !== e || t[30] !== N || t[31] !== r || t[32] !== x || t[33] !== R || t[34] !== a || t[35] !== d || t[36] !== n ? (S = /* @__PURE__ */ O("button", { className: x, onClick: y, ...c, ...r, type: "button", role: "switch", "aria-checked": p, "aria-disabled": R, "aria-busy": e, ref: N, children: [
+    a,
+    d,
+    n
+  ] }), t[26] = c, t[27] = p, t[28] = y, t[29] = e, t[30] = N, t[31] = r, t[32] = x, t[33] = R, t[34] = a, t[35] = d, t[36] = n, t[37] = S) : S = t[37], S;
+});
+P.displayName = "DSSwitch";
+export {
+  P as DSSwitch
+};

package/switch.d.ts

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

package/systemfeedback.BKLsE5sY.js

@@ -0,0 +1,10 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.cKLI89Eg.js";
+import "./chunks/index.DQOqod3i.js";
+import "react";
+import "./chunks/Icon.m6sMB6vl.js";
+import { D as s } from "./chunks/SystemFeedback.DFN6Y2cw.js";
+export {
+  s as DSSystemFeedback
+};

package/systemfeedback.d.ts

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

package/tablist.d.ts

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

package/tablist.hMHdX1V8.js

@@ -0,0 +1,210 @@
+"use client";
+import { jsxs as k, jsx as h } from "react/jsx-runtime";
+import { c as y } from "./chunks/index.DQOqod3i.js";
+import { useState as E, useRef as v, useEffect as ot } from "react";
+import { g as f, i as C } from "./chunks/is-animation-disabled.B-V_68K-.js";
+import { h as nt } from "./chunks/has-window.ut_-aShB.js";
+import { g as st } from "./chunks/helpers.CexwVao7.js";
+import { u as W } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
+import "./chunks/index.cKLI89Eg.js";
+import { D as X } from "./chunks/Button.DpGeheky.js";
+import { D as ct } from "./chunks/Icon.m6sMB6vl.js";
+import { NumberIndicator as it } from "./numberindicator.ZGVRSmqf.js";
+import { g as at, a as j } from "./chunks/TabPane.utils.DG16Y2uD.js";
+import { s as i, N as lt } from "./chunks/NavigationTabList.C2f-lWex.js";
+const g = 48, Lt = ({
+  aria: q,
+  id: D,
+  selectedTabIndex: n,
+  setSelectedTabIndex: F,
+  tabs: l,
+  alignment: I = "left",
+  className: G,
+  defaultSelectedTabIndex: Q = 0,
+  isNavigation: L,
+  onTabChange: z,
+  ...J
+}) => {
+  const [A, u] = E(Q), [U, V] = E(!1), [Y, Z] = E(!1), m = v([]), p = v(null), c = v(null), a = v(null), w = v(!1), H = v(n), T = () => {
+    P(), x();
+  };
+  W(() => {
+    const e = new ResizeObserver(T);
+    return c.current && e.observe(c.current), () => {
+      e.disconnect();
+    };
+  }, []), W(() => {
+    const e = [
+      "18px 'STIHL Contraface Digital Text Regular'",
+      // utility large - Tab
+      "18px 'STIHL Contraface Digital Text Bold'",
+      // utility large bold - Tab active
+      "14px 'STIHL Contraface Digital Text Demi'"
+      // utility small demi - Number indicator
+    ];
+    Promise.all(e.map((o) => document.fonts.load(o))).then(() => {
+      N(n), R("next", n, "instant"), P(), w.current = !0;
+    }).catch((o) => {
+      throw new Error(st("DSTabs", `The component requires the fonts to be loaded: ${o}`));
+    });
+    const t = () => {
+      !w.current || !a.current || (r.matches ? a.current.style.transitionDuration = "0s" : a.current.style.transitionDuration = "");
+    }, r = window.matchMedia("(prefers-reduced-motion: reduce)");
+    return r.addEventListener("change", t), c.current?.addEventListener("scroll", T), () => {
+      r.removeEventListener("change", t), c.current?.removeEventListener("scroll", T);
+    };
+  }, [l, I]), W(() => {
+    if (w.current && (N(n), L)) {
+      const e = M(n);
+      u(n), R(e, n);
+    }
+    H.current = n;
+  }, [n]), ot(() => {
+    w.current && m.current[A]?.focus();
+  }, [A]);
+  const b = (e) => {
+    const t = M(e);
+    F(e), u(e), R(t, e), z && z(e);
+  }, M = (e) => {
+    const t = f(c.current), r = f(m.current[e]);
+    let o = "next";
+    return r.left - g < t.left ? o = "prev" : r.right + g > t.right ? o = "next" : o = n < e ? "next" : "prev", o;
+  }, P = () => {
+    if (c.current && p.current) {
+      const e = f(c.current), t = f(p.current);
+      V(t.left < e.left), Z(t.right > e.right + 4);
+    }
+  }, O = (e = 0) => {
+    nt && a.current && !C() && setTimeout(() => {
+      a.current && (a.current.style.transitionDuration = "250ms");
+    }, e);
+  }, x = () => {
+    a.current && (a.current.style.transitionDuration = "0s", N(H.current), O());
+  }, N = (e) => {
+    const t = a.current, r = f(m.current[e]), o = f(p.current), s = r.left - o.left;
+    t && (w.current ? (t.style.width = `${r.width}px`, t.style.transform = `translateX(${s}px)`) : (t.style.transitionDuration = "0s", t.style.transform = `translateX(${s}px)`, t.style.width = `${r.width}px`, O(50)));
+  }, _ = (e, t) => {
+    let r;
+    switch (e.key) {
+      case "ArrowLeft":
+        r = (t > 0 ? t : l.length) - 1, u(r);
+        break;
+      case "ArrowRight":
+        r = (t + 1) % l.length, u(r);
+        break;
+      case "Home":
+        r = 0, u(r);
+        break;
+      case "End":
+        r = l.length - 1, u(r);
+        break;
+      case "Enter":
+      case " ":
+        b(t);
+        return;
+      default:
+        return;
+    }
+    if (r !== void 0) {
+      const o = r > t ? "next" : "prev";
+      setTimeout(() => R(o, r), 0);
+    }
+    e.preventDefault();
+  }, tt = (e, t) => {
+    let r;
+    switch (e.key) {
+      case "Tab":
+        if (e.shiftKey) {
+          r = t - 1 < 0 ? 0 : t - 1, u(r), t !== 0 && e.preventDefault();
+          break;
+        } else
+          r = t + 1 > l.length - 1 ? t : t + 1, u(r), t !== l.length - 1 && e.preventDefault();
+        break;
+      case "Enter":
+        b(t);
+        return;
+      default:
+        return;
+    }
+    if (r !== void 0) {
+      const o = r > t ? "next" : "prev";
+      setTimeout(() => R(o, r), 0);
+    }
+  }, R = (e, t, r = "smooth") => {
+    const o = m.current[t], s = c.current, d = f(o), S = f(s);
+    let B;
+    if (!(!o || !s)) {
+      if (e === "prev") {
+        if (d.left - g > S.left)
+          return;
+        B = o.offsetLeft - g;
+      } else {
+        if (d.right + g < S.right)
+          return;
+        B = o.offsetLeft + o.offsetWidth - S.width + g;
+      }
+      s.scrollTo({
+        left: B,
+        behavior: C() ? "instant" : r
+      });
+    }
+  }, $ = (e) => {
+    const t = et(e);
+    c.current?.scrollTo({
+      left: t,
+      behavior: C() ? "instant" : "smooth"
+    });
+  }, et = (e) => {
+    if (!p.current || !c.current)
+      return 0;
+    const {
+      scrollLeft: t,
+      offsetWidth: r
+    } = c.current, o = Math.round(r * 0.2);
+    return e === "next" ? t + o : t - o;
+  }, K = y(i.scroller, {
+    [i.scrollerCentered]: I === "center"
+  }), rt = L ? "nav" : "div";
+  return /* @__PURE__ */ k("div", { className: y(i.tabsWrapper, G), ...J, children: [
+    /* @__PURE__ */ k(rt, { className: i.scrollWrapper, ref: c, ...q, children: [
+      L ? /* @__PURE__ */ h(lt, { tabs: l, tabRefs: m, scrollerRef: p, handleNavigationKeydown: tt, scrollerClass: K, selectedTabIndex: n, setSelectedTab: b }) : /* @__PURE__ */ h("div", { role: "tablist", className: K, ref: p, children: l.map(({
+        id: e,
+        label: t,
+        iconName: r,
+        numberIndicatorValue: o
+      }, s) => /* @__PURE__ */ k(
+        "button",
+        {
+          id: j(D, e),
+          role: "tab",
+          "aria-selected": n === s,
+          "aria-controls": at(D, e, s),
+          tabIndex: n === s ? 0 : -1,
+          className: i.tab,
+          ref: (d) => {
+            m.current[s] = d;
+          },
+          onClick: () => b(s),
+          onKeyDown: (d) => _(d, s),
+          type: "button",
+          children: [
+            r && /* @__PURE__ */ h(ct, { name: r, "aria-hidden": "true" }),
+            t,
+            o && /* @__PURE__ */ h(it, { label: o })
+          ]
+        },
+        j(D, e)
+      )) }),
+      /* @__PURE__ */ h("span", { className: i.indicator, ref: a })
+    ] }),
+    /* @__PURE__ */ h(X, { variant: "filled", className: y(i.scrollButton, {
+      [i.scrollButtonHidden]: !U
+    }), hideLabel: !0, iconName: "chevron-left", tabIndex: -1, size: "small", onClick: () => $("prev"), type: "button", children: "Left" }),
+    /* @__PURE__ */ h(X, { variant: "filled", className: y(i.scrollButton, i.scrollButtonRight, {
+      [i.scrollButtonHidden]: !Y
+    }), hideLabel: !0, iconName: "chevron-right", tabIndex: -1, size: "small", onClick: () => $("next"), type: "button", children: "Right" })
+  ] });
+};
+export {
+  Lt as TabList
+};

package/tabpane.7vMXUKFX.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as h } from "react/jsx-runtime";
+import { d as T } from "./chunks/index.cKLI89Eg.js";
+import { c as g } from "./chunks/index.DQOqod3i.js";
+import { useRef as y, useState as F, useEffect as N } from "react";
+import { c as P, g as v, a as R } from "./chunks/TabPane.utils.DG16Y2uD.js";
+import './assets/tabpane.o34hshTz.css';const S = "ds-tabs_tabpane_30tnb_1", j = {
+  tabpane: S
+}, k = (x) => {
+  const e = T.c(19), {
+    id: t,
+    content: s,
+    index: o,
+    selectedTabIndex: E,
+    tabListId: a,
+    className: f
+  } = x, m = y(null), [I, _] = F(!1);
+  let c;
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (c = () => {
+    m.current && _(P(m.current));
+  }, e[0] = c) : c = e[0];
+  let i;
+  e[1] !== s ? (i = [s], e[1] = s, e[2] = i) : i = e[2], N(c, i);
+  let r;
+  e[3] !== f ? (r = g(j.tabpane, f), e[3] = f, e[4] = r) : r = e[4];
+  const d = r;
+  let n;
+  e[5] !== t || e[6] !== o || e[7] !== a ? (n = v(a, t, o), e[5] = t, e[6] = o, e[7] = a, e[8] = n) : n = e[8];
+  let l;
+  e[9] !== t || e[10] !== a ? (l = R(a, t), e[9] = t, e[10] = a, e[11] = l) : l = e[11];
+  const p = E !== o, u = I ? void 0 : 0;
+  let b;
+  return e[12] !== s || e[13] !== n || e[14] !== l || e[15] !== p || e[16] !== u || e[17] !== d ? (b = /* @__PURE__ */ h("div", { id: n, role: "tabpanel", "aria-labelledby": l, hidden: p, tabIndex: u, ref: m, className: d, children: s }), e[12] = s, e[13] = n, e[14] = l, e[15] = p, e[16] = u, e[17] = d, e[18] = b) : b = e[18], b;
+};
+export {
+  k as TabPane
+};

package/tabpane.d.ts

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

package/tabs.d.ts

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

package/tabs.t-gR7dGc.js

@@ -0,0 +1,11 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.cKLI89Eg.js";
+import "react";
+import "./tablist.hMHdX1V8.js";
+import "./tabpane.7vMXUKFX.js";
+import "./chunks/TabPane.utils.DG16Y2uD.js";
+import { D as a } from "./chunks/Tabs.2JTenRcr.js";
+export {
+  a as DSTabs
+};

package/text.D_e3JBvf.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as $ } from "react/jsx-runtime";
+import { d as z } from "./chunks/index.cKLI89Eg.js";
+import { c as P } from "./chunks/index.DQOqod3i.js";
+import { useRef as R, useEffect as j } from "react";
+import { g as v } from "./chunks/helpers.CexwVao7.js";
+import { i as N } from "./chunks/Text.utils.D_iOyOSH.js";
+import './assets/text.BA1eUihR.css';const C = "ds-text_root_1x9it_6", O = "ds-text_root--large_1x9it_15", V = "ds-text_root--large-bold_1x9it_26", W = "ds-text_root--medium_1x9it_37", q = "ds-text_root--medium-bold_1x9it_48", A = "ds-text_root--small_1x9it_59", F = "ds-text_root--small-bold_1x9it_70", G = "ds-text_root--x-small_1x9it_81", H = "ds-text_root--x-small-bold_1x9it_92", I = "ds-text_root--xx-small_1x9it_103", J = "ds-text_root--theme-dark_1x9it_197", o = {
+  root: C,
+  rootLarge: O,
+  rootLargeBold: V,
+  rootMedium: W,
+  rootMediumBold: q,
+  rootSmall: A,
+  rootSmallBold: F,
+  rootXSmall: G,
+  rootXSmallBold: H,
+  rootXxSmall: I,
+  rootThemeDark: J
+}, ot = (g) => {
+  const t = z.c(28);
+  let s, r, i, a, m, n, d;
+  t[0] !== g ? ({
+    children: s,
+    className: r,
+    size: a,
+    tag: m,
+    theme: n,
+    weight: d,
+    ...i
+  } = g, t[0] = g, t[1] = s, t[2] = r, t[3] = i, t[4] = a, t[5] = m, t[6] = n, t[7] = d) : (s = t[1], r = t[2], i = t[3], a = t[4], m = t[5], n = t[6], d = t[7]);
+  const e = a === void 0 ? "medium" : a, l = m === void 0 ? "p" : m, y = n === void 0 ? "light" : n, c = d === void 0 ? "normal" : d, x = R(null);
+  let _, h;
+  t[8] !== l ? (_ = () => {
+    if (x.current && process.env.NODE_ENV !== "production")
+      t: switch (l) {
+        case "li": {
+          if (!N(x.current, "ul, ol"))
+            throw Error(v("DSText", `The DSText component with the tag "${l}" is not within a list element (ul, ol). This may cause issues with list semantics. Please ensure the DSText component is within a list element.`));
+          break t;
+        }
+        case "dt":
+        case "dd": {
+          if (!N(x.current, "dl"))
+            throw Error(v("DSText", `The DSText component with the tag "${l}" is not within a list element (dl). This may cause issues with list semantics. Please ensure the DSText component is within a list element.`));
+          break t;
+        }
+        default:
+          return;
+      }
+  }, h = [l], t[8] = l, t[9] = _, t[10] = h) : (_ = t[9], h = t[10]), j(_, h);
+  const f = l, p = e === "large", T = e === "large" && c === "bold", w = e == "medium", B = e === "medium" && c === "bold", D = e == "small", b = e == "small" && c === "bold", X = e == "x-small", k = e == "x-small" && c === "bold", E = e == "xx-small", M = y === "dark";
+  let u;
+  t[11] !== r || t[12] !== B || t[13] !== D || t[14] !== b || t[15] !== X || t[16] !== k || t[17] !== E || t[18] !== M || t[19] !== p || t[20] !== T || t[21] !== w ? (u = P(o.root, r, {
+    [o.rootLarge]: p,
+    [o.rootLargeBold]: T,
+    [o.rootMedium]: w,
+    [o.rootMediumBold]: B,
+    [o.rootSmall]: D,
+    [o.rootSmallBold]: b,
+    [o.rootXSmall]: X,
+    [o.rootXSmallBold]: k,
+    [o.rootXxSmall]: E,
+    [o.rootThemeDark]: M
+  }), t[11] = r, t[12] = B, t[13] = D, t[14] = b, t[15] = X, t[16] = k, t[17] = E, t[18] = M, t[19] = p, t[20] = T, t[21] = w, t[22] = u) : u = t[22];
+  const L = u;
+  let S;
+  return t[23] !== f || t[24] !== s || t[25] !== i || t[26] !== L ? (S = /* @__PURE__ */ $(f, { className: L, ref: x, ...i, children: s }), t[23] = f, t[24] = s, t[25] = i, t[26] = L, t[27] = S) : S = t[27], S;
+};
+export {
+  ot as DSText
+};

package/text.d.ts

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

package/textarea.CDXY-OVz.js

@@ -0,0 +1,14 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.DQOqod3i.js";
+import "react";
+import "./chunks/helpers.CexwVao7.js";
+import "./chunks/useBreakpoint.1txsny17.js";
+import "./chunks/index.cKLI89Eg.js";
+import "./asterisk.Dwtdwpkq.js";
+import "./chunks/Popover.C5wtha5l.js";
+import "./chunks/SystemFeedback.DFN6Y2cw.js";
+import { D as c } from "./chunks/Textarea.ymNCbcvH.js";
+export {
+  c as DSTextarea
+};

package/textarea.d.ts

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