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

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

@@ -0,0 +1,66 @@
+"use client";
+import { jsxs as O, jsx as h } from "react/jsx-runtime";
+import { d as $ } from "./chunks/index.CgTHIF3K.js";
+import { c as q } from "./chunks/index.CEyLAtio.js";
+import { forwardRef as z } from "react";
+import { D as A } from "./chunks/Icon.DGTYCv63.js";
+import { DSSpinner as B } from "./spinner.Dht6FspZ.js";
+import './assets/switch.Bc9KIyw9.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.C_2PhwKe.js

@@ -0,0 +1,10 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CgTHIF3K.js";
+import "./chunks/index.CEyLAtio.js";
+import "react";
+import "./chunks/Icon.DGTYCv63.js";
+import { D as s } from "./chunks/SystemFeedback.B9f67mjJ.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.g_Nwu6GA.js

@@ -0,0 +1,256 @@
+"use client";
+import { jsx as v, jsxs as me } from "react/jsx-runtime";
+import { d as ke } from "./chunks/index.CgTHIF3K.js";
+import { c as re } from "./chunks/index.CEyLAtio.js";
+import { useState as he, useRef as A, useEffect as xe } from "react";
+import { g as b, i as be } from "./chunks/is-animation-disabled.CUl4N3LI.js";
+import { h as Ce } from "./chunks/has-window.ut_-aShB.js";
+import { g as Ee } from "./chunks/helpers.BbWkXTr3.js";
+import { u as pe } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
+import { D as ye } from "./chunks/Button.B7xF1E19.js";
+import { D as We } from "./chunks/Icon.DGTYCv63.js";
+import { NumberIndicator as ze } from "./numberindicator.Ddf3ESi7.js";
+import { g as Ae, a as we } from "./chunks/TabPane.utils.DG16Y2uD.js";
+import { s as i, N as He } from "./chunks/NavigationTabList.dYFYTmWv.js";
+const H = 48, Ye = (p) => {
+  const e = ke.c(62);
+  let g, T, d, M, I, o, X, P, $, m, c;
+  e[0] !== p ? ({
+    aria: g,
+    id: m,
+    selectedTabIndex: o,
+    setSelectedTabIndex: X,
+    tabs: c,
+    alignment: P,
+    className: T,
+    defaultSelectedTabIndex: $,
+    isNavigation: d,
+    onTabChange: M,
+    ...I
+  } = p, e[0] = p, e[1] = g, e[2] = T, e[3] = d, e[4] = M, e[5] = I, e[6] = o, e[7] = X, e[8] = P, e[9] = $, e[10] = m, e[11] = c) : (g = e[1], T = e[2], d = e[3], M = e[4], I = e[5], o = e[6], X = e[7], P = e[8], $ = e[9], m = e[10], c = e[11]);
+  const j = P === void 0 ? "left" : P, Re = $ === void 0 ? 0 : $, [V, h] = he(Re), [Le, Se] = he(!1), [De, Ne] = he(!1);
+  let _;
+  e[12] === Symbol.for("react.memo_cache_sentinel") ? (_ = [], e[12] = _) : _ = e[12];
+  const y = A(_), w = A(null), a = A(null), f = A(null), O = A(!1), ve = A(o), se = () => {
+    Te(), Be();
+  };
+  let q;
+  e[13] === Symbol.for("react.memo_cache_sentinel") ? (q = [], e[13] = q) : q = e[13], pe(() => {
+    const s = new ResizeObserver(se);
+    return a.current && s.observe(a.current), () => {
+      s.disconnect();
+    };
+  }, q);
+  let F;
+  e[14] !== j || e[15] !== c ? (F = [c, j], e[14] = j, e[15] = c, e[16] = F) : F = e[16], pe(() => {
+    var n;
+    const s = ["18px 'STIHL Contraface Digital Text Regular'", "18px 'STIHL Contraface Digital Text Bold'", "14px 'STIHL Contraface Digital Text Demi'"];
+    Promise.all(s.map(Me)).then(() => {
+      ne(o), K("next", o, "instant"), Te(), O.current = !0;
+    }).catch(Pe);
+    const t = () => {
+      !O.current || !f.current || (r.matches ? f.current.style.transitionDuration = "0s" : f.current.style.transitionDuration = "");
+    }, r = window.matchMedia("(prefers-reduced-motion: reduce)");
+    return r.addEventListener("change", t), (n = a.current) == null || n.addEventListener("scroll", se), () => {
+      var l;
+      r.removeEventListener("change", t), (l = a.current) == null || l.removeEventListener("scroll", se);
+    };
+  }, F);
+  let G;
+  e[17] !== o ? (G = [o], e[17] = o, e[18] = G) : G = e[18], pe(() => {
+    if (O.current && (ne(o), d)) {
+      const s = ge(o);
+      h(o), K(s, o);
+    }
+    ve.current = o;
+  }, G);
+  let Q, J;
+  e[19] !== V ? (Q = () => {
+    var s;
+    O.current && ((s = y.current[V]) == null || s.focus());
+  }, J = [V], e[19] = V, e[20] = Q, e[21] = J) : (Q = e[20], J = e[21]), xe(Q, J);
+  const R = (s) => {
+    const t = ge(s);
+    X(s), h(s), K(t, s), M && M(s);
+  }, ge = (s) => {
+    const t = b(a.current), r = b(y.current[s]);
+    let n;
+    return r.left - H < t.left ? n = "prev" : r.right + H > t.right ? n = "next" : n = o < s ? "next" : "prev", n;
+  }, Te = () => {
+    if (a.current && w.current) {
+      const s = b(a.current), t = b(w.current);
+      Se(t.left < s.left), Ne(t.right > s.right + 4);
+    }
+  };
+  let U;
+  e[22] === Symbol.for("react.memo_cache_sentinel") ? (U = (s) => {
+    const t = s === void 0 ? 0 : s;
+    Ce && f.current && !be() && setTimeout(() => {
+      f.current && (f.current.style.transitionDuration = "250ms");
+    }, t);
+  }, e[22] = U) : U = e[22];
+  const Ie = U, Be = () => {
+    f.current && (f.current.style.transitionDuration = "0s", ne(ve.current), Ie());
+  }, ne = (s) => {
+    const t = f.current, r = b(y.current[s]), n = b(w.current), l = r.left - n.left;
+    t && (O.current ? (t.style.width = `${r.width}px`, t.style.transform = `translateX(${l}px)`) : (t.style.transitionDuration = "0s", t.style.transform = `translateX(${l}px)`, t.style.width = `${r.width}px`, Ie(50)));
+  }, oe = (s, t) => {
+    let r;
+    e: switch (s.key) {
+      case "ArrowLeft": {
+        r = (t > 0 ? t : c.length) - 1, h(r);
+        break e;
+      }
+      case "ArrowRight": {
+        r = (t + 1) % c.length, h(r);
+        break e;
+      }
+      case "Home": {
+        r = 0, h(r);
+        break e;
+      }
+      case "End": {
+        r = c.length - 1, h(r);
+        break e;
+      }
+      case "Enter":
+      case " ": {
+        R(t);
+        return;
+      }
+      default:
+        return;
+    }
+    if (r !== void 0) {
+      const n = r > t ? "next" : "prev";
+      setTimeout(() => K(n, r), 0);
+    }
+    s.preventDefault();
+  }, le = (s, t) => {
+    let r;
+    e: switch (s.key) {
+      case "Tab": {
+        if (s.shiftKey) {
+          r = t - 1 < 0 ? 0 : t - 1, h(r), t !== 0 && s.preventDefault();
+          break e;
+        } else
+          r = t + 1 > c.length - 1 ? t : t + 1, h(r), t !== c.length - 1 && s.preventDefault();
+        break e;
+      }
+      case "Enter": {
+        R(t);
+        return;
+      }
+      default:
+        return;
+    }
+    if (r !== void 0) {
+      const n = r > t ? "next" : "prev";
+      setTimeout(() => K(n, r), 0);
+    }
+  }, K = (s, t, r) => {
+    const n = r === void 0 ? "smooth" : r, l = y.current[t], W = a.current, z = b(l), ue = b(W);
+    let de;
+    if (!(!l || !W)) {
+      if (s === "prev") {
+        if (z.left - H > ue.left)
+          return;
+        de = l.offsetLeft - H;
+      } else {
+        if (z.right + H < ue.right)
+          return;
+        de = l.offsetLeft + l.offsetWidth - ue.width + H;
+      }
+      W.scrollTo({
+        left: de,
+        behavior: be() ? "instant" : n
+      });
+    }
+  };
+  let u;
+  if (e[23] === Symbol.for("react.memo_cache_sentinel")) {
+    u = (t) => {
+      var n;
+      const r = s(t);
+      (n = a.current) == null || n.scrollTo({
+        left: r,
+        behavior: be() ? "instant" : "smooth"
+      });
+    };
+    const s = (t) => {
+      if (!w.current || !a.current)
+        return 0;
+      const {
+        scrollLeft: r,
+        offsetWidth: n
+      } = a.current, l = Math.round(n * 0.2);
+      return t === "next" ? r + l : r - l;
+    };
+    e[23] = u;
+  } else
+    u = e[23];
+  const ce = j === "center";
+  let Y;
+  e[24] !== ce ? (Y = re(i.scroller, {
+    [i.scrollerCentered]: ce
+  }), e[24] = ce, e[25] = Y) : Y = e[25];
+  const Z = Y, ae = d ? "nav" : "div";
+  let L;
+  e[26] !== T ? (L = re(i.tabsWrapper, T), e[26] = T, e[27] = L) : L = e[27];
+  let S;
+  e[28] !== oe || e[29] !== le || e[30] !== d || e[31] !== Z || e[32] !== o || e[33] !== R || e[34] !== m || e[35] !== c ? (S = d ? /* @__PURE__ */ v(He, { tabs: c, tabRefs: y, scrollerRef: w, handleNavigationKeydown: le, scrollerClass: Z, selectedTabIndex: o, setSelectedTab: R }) : /* @__PURE__ */ v("div", { role: "tablist", className: Z, ref: w, children: c.map((s, t) => {
+    const {
+      id: r,
+      label: n,
+      iconName: l,
+      numberIndicatorValue: W
+    } = s;
+    return /* @__PURE__ */ me("button", { id: we(m, r), role: "tab", "aria-selected": o === t, "aria-controls": Ae(m, r, t), tabIndex: o === t ? 0 : -1, className: i.tab, ref: (z) => {
+      y.current[t] = z;
+    }, onClick: () => R(t), onKeyDown: (z) => oe(z, t), children: [
+      l && /* @__PURE__ */ v(We, { name: l, "aria-hidden": "true" }),
+      n,
+      W && /* @__PURE__ */ v(ze, { label: W })
+    ] }, we(m, r));
+  }) }), e[28] = oe, e[29] = le, e[30] = d, e[31] = Z, e[32] = o, e[33] = R, e[34] = m, e[35] = c, e[36] = S) : S = e[36];
+  let ee;
+  e[37] === Symbol.for("react.memo_cache_sentinel") ? (ee = /* @__PURE__ */ v("span", { className: i.indicator, ref: f }), e[37] = ee) : ee = e[37];
+  let D;
+  e[38] !== ae || e[39] !== g || e[40] !== S ? (D = /* @__PURE__ */ me(ae, { className: i.scrollWrapper, ref: a, ...g, children: [
+    S,
+    ee
+  ] }), e[38] = ae, e[39] = g, e[40] = S, e[41] = D) : D = e[41];
+  const ie = !Le;
+  let N;
+  e[42] !== ie ? (N = re(i.scrollButton, {
+    [i.scrollButtonHidden]: ie
+  }), e[42] = ie, e[43] = N) : N = e[43];
+  let B;
+  e[44] !== u ? (B = () => u("prev"), e[44] = u, e[45] = B) : B = e[45];
+  let k;
+  e[46] !== N || e[47] !== B ? (k = /* @__PURE__ */ v(ye, { variant: "filled", className: N, hideLabel: !0, iconName: "chevron-left", tabIndex: -1, size: "small", onClick: B, children: "Left" }), e[46] = N, e[47] = B, e[48] = k) : k = e[48];
+  const fe = !De;
+  let x;
+  e[49] !== fe ? (x = re(i.scrollButton, i.scrollButtonRight, {
+    [i.scrollButtonHidden]: fe
+  }), e[49] = fe, e[50] = x) : x = e[50];
+  let C;
+  e[51] !== u ? (C = () => u("next"), e[51] = u, e[52] = C) : C = e[52];
+  let E;
+  e[53] !== x || e[54] !== C ? (E = /* @__PURE__ */ v(ye, { variant: "filled", className: x, hideLabel: !0, iconName: "chevron-right", tabIndex: -1, size: "small", onClick: C, children: "Right" }), e[53] = x, e[54] = C, e[55] = E) : E = e[55];
+  let te;
+  return e[56] !== I || e[57] !== L || e[58] !== D || e[59] !== k || e[60] !== E ? (te = /* @__PURE__ */ me("div", { className: L, ...I, children: [
+    D,
+    k,
+    E
+  ] }), e[56] = I, e[57] = L, e[58] = D, e[59] = k, e[60] = E, e[61] = te) : te = e[61], te;
+};
+function Me(p) {
+  return document.fonts.load(p);
+}
+function Pe(p) {
+  throw new Error(Ee("DSTabs", `The component requires the fonts to be loaded: ${p}`));
+}
+export {
+  Ye as TabList
+};

package/tabpane.CB-eudyw.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as h } from "react/jsx-runtime";
+import { d as T } from "./chunks/index.CgTHIF3K.js";
+import { c as g } from "./chunks/index.CEyLAtio.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.D1LTb432.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] === 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.oh9-wHPp.js

@@ -0,0 +1,11 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CgTHIF3K.js";
+import "react";
+import "./tablist.g_Nwu6GA.js";
+import "./tabpane.CB-eudyw.js";
+import "./chunks/TabPane.utils.DG16Y2uD.js";
+import { D as a } from "./chunks/Tabs.CkVL8Jw8.js";
+export {
+  a as DSTabs
+};

package/text.ZOUuesnU.js

@@ -0,0 +1,10 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CgTHIF3K.js";
+import "./chunks/index.CEyLAtio.js";
+import "react";
+import "./chunks/helpers.BbWkXTr3.js";
+import { D as s } from "./chunks/Text.DGWeWF1y.js";
+export {
+  s as DSText
+};

package/text.d.ts

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

package/textarea.d.ts

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

package/textarea.dQ12-oYB.js

@@ -0,0 +1,13 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.CEyLAtio.js";
+import "react";
+import "./chunks/helpers.BbWkXTr3.js";
+import "./chunks/useBreakpoint.CMOR9ZOB.js";
+import "./chunks/index.CgTHIF3K.js";
+import "./asterisk.CR60hx8S.js";
+import "./chunks/SystemFeedback.B9f67mjJ.js";
+import { D } from "./chunks/Textarea.ORkJUx-S.js";
+export {
+  D as DSTextarea
+};