@stihl-design-system/components 1.0.0-RC.46 → 1.0.0-RC.48

package/styles/scss/ds/index.scss

@@ -1,4 +1,5 @@
 @forward 'lib/animation';
+@forward 'lib/border-width';
 @forward 'lib/breakpoints';
 @forward 'lib/container-query';
 @forward 'lib/grid';
@@ -12,9 +13,11 @@
 @forward 'lib/link';
 @forward 'lib/link-button';
 @forward 'lib/media-query';
+@forward 'lib/radius';
 @forward 'lib/shadow';
-@forward 'lib/spacing';
 @forward 'lib/spacing-dynamic';
+@forward 'lib/spacing-rem';
+@forward 'lib/spacing';
 @forward 'lib/text';
 @forward 'lib/theme';
 @forward 'lib/transition';

package/styles/scss/ds/lib/border-width.scss

@@ -0,0 +1,3 @@
+$border-width-1: 1px;
+$border-width-2: 2px;
+$border-width-4: 4px;

package/styles/scss/ds/lib/ds-internal/_input.scss

@@ -1,16 +1,23 @@
+@use '../border-width' as *;
 @use '_focus' as *;
 @use '_helpers' as *;
 @use '_high-contrast' as *;
 @use '_hover' as *;
 @use '../spacing' as *;
+@use '../spacing-rem' as *;
+@use '../radius' as *;
 @use '../text' as *;
 @use '../theme' as *;
 @use '../transition' as *;
 
-@mixin input-label-base($hasHint: false) {
+@mixin input-label-base($hasHint: false, $theme: 'light') {
   @include utility-medium;
   display: block;
-  min-height: px-to-rem($spacing-24);
+  min-height: $spacing-24-rem;
+
+  @if $theme == 'dark' {
+    color: $theme-dark-content-color-primary;
+  }
 
   
   &:has(input) {
@@ -67,39 +74,47 @@
   }
 }
 
-@mixin input-hint-base() {
+@mixin input-hint-base($theme: 'light') {
   @include utility-small;
   display: block;
   max-width: 25.5rem;
   margin-block-end: $spacing-8;
+
+  @if $theme == 'dark' {
+    color: $theme-dark-content-color-primary;
+  }
 }
 
-@mixin input-base($size) {
+@mixin input-base($size, $theme: 'light') {
   @if ($size == 'medium') {
     
     @include utility-medium;
 
     padding-inline-start: adjust-spacing-for-border-1($spacing-16);
     padding-inline-end: adjust-spacing-for-border-1($spacing-16);
-    min-height: px-to-rem($spacing-48);
-    height: px-to-rem($spacing-48);
+    min-height: $spacing-48-rem;
+    height: $spacing-48-rem;
   } @else if($size == 'small') {
     @include utility-small;
     
     padding-inline-start: adjust-spacing-for-border-1($spacing-8);
     padding-inline-end: adjust-spacing-for-border-1($spacing-8);
     
-    min-height: px-to-rem($spacing-32);
-    height: px-to-rem($spacing-32);
+    min-height: $spacing-32-rem;
+    height: $spacing-32-rem;
   }
 
   
-  @include focus($offset: 0, $thickness: $spacing-1);
+  @include focus($theme: $theme, $offset: 0, $thickness: $spacing-1);
   @include transition((background-color, color));
 
   @include hover-media-query {
     &:hover {
-      background: $theme-light-background-color-transparent-hover;
+      @if $theme == 'light' {
+        background: $theme-light-background-color-transparent-hover;
+      } @else {
+        background: $theme-dark-background-color-transparent-hover;
+      }
       @include high-contrast-media-query {
         border-color: Highlight;
       }
@@ -108,31 +123,50 @@
 
   & {
     background: transparent;
-    border: $spacing-1 solid $theme-light-border-color-primary;
-    border-radius: 0;
-    color: $theme-light-content-color-primary;
+    border-radius: $radius-none;
     width: 100%;
+    @if $theme == 'light' {
+      border: $border-width-1 solid $theme-light-border-color-primary;
+      color: $theme-light-content-color-primary;
+    } @else {
+      border: $border-width-1 solid $theme-dark-border-color-primary;
+      color: $theme-dark-content-color-primary;
+    }
   }
 
   &[readonly] {
-    background-color: $theme-light-background-color-tertiary;
     border-color: transparent;
-    color: $theme-light-content-color-primary;
+    @if $theme == 'light' {
+      background-color: $theme-light-background-color-tertiary;
+      color: $theme-light-content-color-primary;
+    } @else {
+      background-color: $theme-dark-background-color-tertiary;
+      color: $theme-dark-content-color-primary;
+    }
 
-    @include focus($offset: 0, $thickness: $spacing-2);
+    @include focus($theme: $theme, $offset: 0, $thickness: $spacing-2);
   }
 
   &:disabled {
     background-color: transparent;
-    border-color: $theme-light-border-color-primary-disabled;
-    color: $theme-light-content-color-primary-disabled;
     cursor: not-allowed;
+    @if $theme == 'light' {
+      border-color: $theme-light-border-color-primary-disabled;
+      color: $theme-light-content-color-primary-disabled;
+    } @else {
+      border-color: $theme-dark-border-color-primary-disabled;
+      color: $theme-dark-content-color-primary-disabled;
+    }
   }
 
   &::-webkit-placeholder,
   &::placeholder {
-    color: $theme-light-content-color-secondary;
     opacity: 1;
+    @if $theme == 'light' {
+      color: $theme-light-content-color-secondary;
+    } @else {
+      color: $theme-dark-content-color-secondary;
+    }
   }
 
   
@@ -184,13 +218,24 @@
   }
 }
 
-@mixin input-invalid() {
-  border-color: $theme-light-border-color-feedback-error;
-  outline-color: $theme-light-border-color-feedback-error;
+@mixin input-invalid($theme: 'light') {
+  @if $theme == 'light' {
+    border-color: $theme-light-border-color-feedback-error;
+    outline-color: $theme-light-border-color-feedback-error;
 
-  &:active,
-  &:focus,
-  &:focus-visible {
-    border-color: $theme-light-border-color-primary;
+    &:active,
+    &:focus,
+    &:focus-visible {
+      border-color: $theme-light-border-color-primary;
+    }
+  } @else {
+    border-color: $theme-dark-border-color-feedback-error;
+    outline-color: $theme-dark-border-color-feedback-error;
+
+    &:active,
+    &:focus,
+    &:focus-visible {
+      border-color: $theme-dark-border-color-primary;
+    }
   }
 }

package/styles/scss/ds/lib/ds-internal/_link-button.scss

@@ -2,14 +2,17 @@
 @use '_helpers' as *;
 @use '_high-contrast' as *;
 @use '_hover' as *;
+@use '../border-width' as *;
 @use '../media-query' as *;
+@use '../radius' as *;
 @use '../spacing' as *;
+@use '../spacing-rem' as *;
 @use '../text' as *;
 @use '../theme' as *;
 @use '../transition' as *;
 
-$link-button-size-small: px-to-rem($spacing-32);
-$link-button-size-medium: px-to-rem($spacing-48);
+$link-button-size-small: $spacing-32-rem;
+$link-button-size-medium: $spacing-48-rem;
 
 
 
@@ -36,7 +39,7 @@ $link-button-size-medium: px-to-rem($spacing-48);
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    border-width: $spacing-1;
+    border-width: $border-width-1;
     border-style: solid;
     border-color: transparent;
     gap: $spacing-8;
@@ -149,7 +152,7 @@ $link-button-size-medium: px-to-rem($spacing-48);
       @include utility-large-bold;
       color: $theme-light-content-color-primary;
 
-      border-radius: $spacing-2;
+      border-radius: $radius-xs;
       
       min-height: $link-button-size-small;
       min-width: $link-button-size-small;

package/styles/scss/ds/lib/ds-internal/_link.scss

@@ -37,9 +37,8 @@
     }
   }
 
-  &[href^="http://"]::after,
-  &[href^="https://"]::after
-  {
+  &[href^='http://']::after,
+  &[href^='https://']::after {
     content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($content-color)}' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath fill-rule='evenodd' d='M9 2V0h7v7h-2V3.4L8.1 9.3 6.7 7.9 12.6 2H9Zm5 8h-2v4H2V4h4V2H0v14h14v-6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   }
 
@@ -47,6 +46,27 @@
     content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($content-color)}' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath d='M14.4 9.6 8 16 1.6 9.6 3 8.2l4 4V0h2v12.2l4-4 1.4 1.4Z'/%3E%3C/svg%3E");
   }
 
+  @include high-contrast-media-query {
+    &[href^='http://']::after,
+    &[href^='https://']::after {
+      forced-color-adjust: none;
+      content: '';
+      background-color: LinkText;
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='100%25' height='100%25'%3E%3Cpath fill-rule='evenodd' d='M9 2V0h7v7h-2V3.4L8.1 9.3 6.7 7.9 12.6 2H9Zm5 8h-2v4H2V4h4V2H0v14h14v-6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+      mask-size: contain;
+      mask-repeat: no-repeat;
+    }
+
+    &[href^='#']::after {
+      forced-color-adjust: none;
+      content: '';
+      background-color: LinkText;
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='100%25' height='100%25'%3E%3Cpath d='M14.4 9.6 8 16 1.6 9.6 3 8.2l4 4V0h2v12.2l4-4 1.4 1.4Z'/%3E%3C/svg%3E");
+      mask-size: contain;
+      mask-repeat: no-repeat;
+    }
+  }
+
   
   
   @include focus($theme, $offset: 0);

package/styles/scss/ds/lib/ds-internal/_text.scss

@@ -10,7 +10,6 @@
   font-variant: normal;
   hyphens: manual;
   overflow-wrap: break-word;
-  font-weight: normal;
   font-size: $fontSize;
   line-height: $lineHeight;
 }
@@ -20,6 +19,7 @@
   @include base-text($fontFamily, $fontSize, $lineHeight);
   
   font-size-adjust: 0.414;
+  font-weight: normal;
 }
 
 
@@ -27,4 +27,6 @@
   @include base-text($fontFamily, $fontSize, $lineHeight);
   
   font-size-adjust: 0.426;
+  font-weight: bold;
+  font-synthesis-weight: none;
 }

package/styles/scss/ds/lib/grid-narrow.scss

@@ -1,5 +1,6 @@
 
 $grid-narrow-max-width: 719px;
+$grid-narrow-max-width-rem: 44.9375rem;
 $grid-narrow-left-column-start: narrow-left-start;
 $grid-narrow-left-column-end: narrow-left-end;
 $grid-narrow-center-column-start: narrow-center-start;

package/styles/scss/ds/lib/input.scss

@@ -1,8 +1,13 @@
 @use './ds-internal/_input' as *;
 
-@mixin input-label($hasHint: false, $isDisabled: false, $isRequired: false) {
+@mixin input-label(
+  $hasHint: false,
+  $isDisabled: false,
+  $isRequired: false,
+  $theme: 'light'
+) {
   @if (not $isDisabled and not $isRequired) {
-    @include input-label-base($hasHint);
+    @include input-label-base($hasHint, $theme);
   }
   @if $isDisabled {
     @include input-label-disabled();
@@ -13,14 +18,14 @@
   }
 }
 
-@mixin input-hint() {
-  @include input-hint-base();
+@mixin input-hint($theme: 'light') {
+  @include input-hint-base($theme);
 }
 
-@mixin input($size: 'medium', $isInvalid: false) {
+@mixin input($size: 'medium', $isInvalid: false, $theme: 'light') {
   @if (not $isInvalid) {
-    @include input-base($size);
+    @include input-base($size, $theme);
   } @else {
-    @include input-invalid();
+    @include input-invalid($theme);
   }
 }

package/styles/scss/ds/lib/link.scss

@@ -25,8 +25,8 @@
   
   
   
-  :where(&)[href^="http://"]::after,
-  :where(&)[href^="https://"]::after,
+  :where(&)[href^='http://']::after,
+  :where(&)[href^='https://']::after,
   :where(&)[href^='#']::after {
     display: inline-block;
     margin-inline-start: 0.375em;

package/styles/scss/ds/lib/radius.scss

@@ -0,0 +1,5 @@
+$radius-none: 0;
+$radius-xs: 2px;
+$radius-s: 4px;
+$radius-circle: 50%;
+$radius-full: 9999px;

package/styles/scss/ds/lib/spacing-rem.scss

@@ -0,0 +1,19 @@
+$spacing-0-rem: 0rem;
+$spacing-1-rem: 0.0625rem;
+$spacing-2-rem: 0.125rem;
+$spacing-4-rem: 0.25rem;
+$spacing-6-rem: 0.375rem;
+$spacing-8-rem: 0.5rem;
+$spacing-12-rem: 0.75rem;
+$spacing-16-rem: 1rem;
+$spacing-20-rem: 1.25rem;
+$spacing-24-rem: 1.5rem;
+$spacing-32-rem: 2rem;
+$spacing-40-rem: 2.5rem;
+$spacing-48-rem: 3rem;
+$spacing-56-rem: 3.5rem;
+$spacing-64-rem: 4rem;
+$spacing-80-rem: 5rem;
+$spacing-96-rem: 6rem;
+$spacing-128-rem: 8rem;
+$spacing-160-rem: 10rem;

package/styles/scss/ds/lib/spacing.scss

@@ -5,7 +5,6 @@ $spacing-4: 4px;
 $spacing-6: 6px;
 $spacing-8: 8px;
 $spacing-12: 12px;
-$spacing-14: 14px;
 $spacing-16: 16px;
 $spacing-20: 20px;
 $spacing-24: 24px;

package/switch.tM2XBag8.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsxs as O, jsx as n } 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.DYtaQgbw.js";
+import { DSSpinner as B } from "./spinner.DtLnsqVV.js";
+import './assets/switch.8v7Wp1Fj.css';const F = "ds-switch_root_1c6he_1", G = "ds-switch_root--label-right_1c6he_40", H = "ds-switch_root--stretched_1c6he_43", J = "ds-switch_loader_1c6he_53", K = "ds-switch_thumb_1c6he_111", M = "ds-switch_root--checked_1c6he_126", o = {
+  root: F,
+  rootLabelRight: G,
+  rootStretched: H,
+  switch: "ds-switch_switch_1c6he_48",
+  loader: J,
+  thumb: K,
+  rootChecked: M
+}, P = z((C, N) => {
+  const t = $.c(38);
+  let c, l, i, s, r, m, f, _, b, p;
+  t[0] !== C ? ({
+    children: l,
+    aria: c,
+    alignLabel: m,
+    checked: f,
+    className: i,
+    disabled: _,
+    loading: b,
+    stretched: p,
+    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] = p) : (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], p = t[10]);
+  const E = m === void 0 ? "left" : m, u = f === void 0 ? !1 : f, w = _ === void 0 ? !1 : _, e = b === void 0 ? !1 : b, I = p === void 0 ? !1 : p, D = u === !0, L = I === !0, v = E === "right";
+  let k;
+  t[11] !== i || t[12] !== D || t[13] !== L || t[14] !== v ? (k = 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] = k) : k = t[15];
+  const x = k;
+  let g;
+  t[16] !== w || t[17] !== e || t[18] !== s ? (g = (j) => {
+    if (w || e) {
+      j.preventDefault();
+      return;
+    }
+    s && s(j);
+  }, t[16] = w, t[17] = e, t[18] = s, t[19] = g) : g = t[19];
+  const y = g, R = w || e;
+  let a;
+  t[20] !== l ? (a = /* @__PURE__ */ n("span", { children: l }), t[20] = l, t[21] = a) : a = t[21];
+  let d;
+  t[22] !== e ? (d = !e && /* @__PURE__ */ n("span", { className: o.switch, children: /* @__PURE__ */ n("span", { className: o.thumb, children: /* @__PURE__ */ n(A, { name: "check", "aria-hidden": "true" }) }) }), t[22] = e, t[23] = d) : d = t[23];
+  let h;
+  t[24] !== e ? (h = e && /* @__PURE__ */ n("span", { className: o.loader, children: /* @__PURE__ */ n(B, { aria: {
+    "aria-label": "Loading state"
+  } }) }), t[24] = e, t[25] = h) : h = t[25];
+  let S;
+  return t[26] !== c || t[27] !== u || 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] !== h ? (S = /* @__PURE__ */ O("button", { className: x, onClick: y, ...c, ...r, type: "button", role: "switch", "aria-checked": u, "aria-disabled": R, "aria-busy": e, ref: N, children: [
+    a,
+    d,
+    h
+  ] }), t[26] = c, t[27] = u, 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] = h, t[37] = S) : S = t[37], S;
+});
+P.displayName = "DSSwitch";
+export {
+  P as DSSwitch
+};

package/{systemfeedback.B8FBckG4.js → systemfeedback.BPPOht_9.js}

@@ -3,8 +3,8 @@ import "react/jsx-runtime";
 import "./chunks/index.cKLI89Eg.js";
 import "./chunks/index.DQOqod3i.js";
 import "react";
-import "./chunks/Icon.B0WqYErA.js";
-import { D as s } from "./chunks/SystemFeedback.Dq3ZphgG.js";
+import "./chunks/Icon.DYtaQgbw.js";
+import { D as s } from "./chunks/SystemFeedback.DhWcYjnu.js";
 export {
   s as DSSystemFeedback
 };

package/{tablist.D3n9E4KM.js → tablist.BAm0_UIG.js}

@@ -2,17 +2,16 @@
 import { jsxs as k, jsx as p } from "react/jsx-runtime";
 import { c as D } from "./chunks/index.DQOqod3i.js";
 import { useState as E, useRef as g, useEffect as ot } from "react";
-import { g as h, 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.Dauhc5op.js";
-import { D as ct } from "./chunks/Icon.B0WqYErA.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 c, N as lt } from "./chunks/NavigationTabList.BIApwNzg.js";
-const b = 48, Lt = ({
+import { D as X } from "./chunks/Button.CCol--xy.js";
+import { D as nt } from "./chunks/Icon.DYtaQgbw.js";
+import { NumberIndicator as st } from "./numberindicator.DsK65Bj3.js";
+import { g as ct, a as j } from "./chunks/TabPane.utils.DG16Y2uD.js";
+import { s as c, N as it } from "./chunks/NavigationTabList.thzA1pU8.js";
+import { u as C } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
+import { g as at } from "./chunks/helpers.CexwVao7.js";
+import { g as h, i as W } from "./chunks/is-animation-disabled.B-V_68K-.js";
+import { h as lt } from "./chunks/has-window.ut_-aShB.js";
+const b = 48, Dt = ({
   aria: q,
   id: L,
   selectedTabIndex: n,
@@ -28,12 +27,12 @@ const b = 48, Lt = ({
   const [A, u] = E(Q), [U, V] = E(!1), [Y, Z] = E(!1), d = g([]), v = g(null), s = g(null), i = g(null), w = g(!1), H = g(n), N = () => {
     P(), x();
   };
-  W(() => {
+  C(() => {
     const e = new ResizeObserver(N);
     return s.current && e.observe(s.current), () => {
       e.disconnect();
     };
-  }, []), W(() => {
+  }, []), C(() => {
     const e = [
       "18px 'STIHL Contraface Digital Text Regular'",
       // utility large - Tab
@@ -45,7 +44,7 @@ const b = 48, Lt = ({
     Promise.all(e.map((o) => document.fonts.load(o))).then(() => {
       S(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}`));
+      throw new Error(at("DSTabs", `The component requires the fonts to be loaded: ${o}`));
     });
     const t = () => {
       !w.current || !i.current || (r.matches ? i.current.style.transitionDuration = "0s" : i.current.style.transitionDuration = "");
@@ -53,7 +52,7 @@ const b = 48, Lt = ({
     return r.addEventListener("change", t), s.current?.addEventListener("scroll", N), () => {
       r.removeEventListener("change", t), s.current?.removeEventListener("scroll", N);
     };
-  }, [l, I]), W(() => {
+  }, [l, I]), C(() => {
     if (w.current && (S(n), T)) {
       const e = M(n);
       u(n), R(e, n);
@@ -75,7 +74,7 @@ const b = 48, Lt = ({
       V(t.left < e.left), Z(t.right > e.right + 4);
     }
   }, O = (e = 0) => {
-    nt && i.current && !C() && setTimeout(() => {
+    lt && i.current && !W() && setTimeout(() => {
       i.current && (i.current.style.transitionDuration = "250ms");
     }, e);
   }, x = () => {
@@ -145,14 +144,14 @@ const b = 48, Lt = ({
       }
       f.scrollTo({
         left: B,
-        behavior: C() ? "instant" : r
+        behavior: W() ? "instant" : r
       });
     }
   }, $ = (e) => {
     const t = et(e);
     s.current?.scrollTo({
       left: t,
-      behavior: C() ? "instant" : "smooth"
+      behavior: W() ? "instant" : "smooth"
     });
   }, et = (e) => {
     if (!v.current || !s.current)
@@ -167,7 +166,7 @@ const b = 48, Lt = ({
   }), rt = T ? "nav" : "div";
   return /* @__PURE__ */ k("div", { className: D(c.tabsWrapper, G), ...J, children: [
     /* @__PURE__ */ k(rt, { className: c.scrollWrapper, ref: s, ...q, children: [
-      T ? /* @__PURE__ */ p(lt, { tabs: l, tabRefs: d, scrollerRef: v, handleNavigationKeydown: tt, scrollerClass: K, selectedTabIndex: n, setSelectedTab: y }) : /* @__PURE__ */ p("div", { role: "tablist", className: K, ref: v, children: l.map(({
+      T ? /* @__PURE__ */ p(it, { tabs: l, tabRefs: d, scrollerRef: v, handleNavigationKeydown: tt, scrollerClass: K, selectedTabIndex: n, setSelectedTab: y }) : /* @__PURE__ */ p("div", { role: "tablist", className: K, ref: v, children: l.map(({
         id: e,
         label: t,
         iconName: r,
@@ -179,7 +178,7 @@ const b = 48, Lt = ({
           id: j(L, e),
           role: "tab",
           "aria-selected": n === a,
-          "aria-controls": at(L, e, a),
+          "aria-controls": ct(L, e, a),
           tabIndex: n === a ? 0 : -1,
           className: c.tab,
           ref: (m) => {
@@ -189,9 +188,9 @@ const b = 48, Lt = ({
           onKeyDown: (m) => _(m, a),
           type: "button",
           children: [
-            r && /* @__PURE__ */ p(ct, { name: r, "aria-hidden": "true" }),
+            r && /* @__PURE__ */ p(nt, { name: r, "aria-hidden": "true" }),
             t,
-            o && /* @__PURE__ */ p(it, { "aria-label": f, label: o })
+            o && /* @__PURE__ */ p(st, { "aria-label": f, label: o })
           ]
         },
         j(L, e)
@@ -207,5 +206,5 @@ const b = 48, Lt = ({
   ] });
 };
 export {
-  Lt as TabList
+  Dt as TabList
 };

package/{tabpane.7vMXUKFX.js → tabpane.B9rZghU6.js}

@@ -4,7 +4,7 @@ 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 = {
+import './assets/tabpane.DDaeSDQb.css';const S = "ds-tabs_tabpane_1cps1_1", j = {
   tabpane: S
 }, k = (x) => {
   const e = T.c(19), {

package/{tabs.IVNsM5Gn.js → tabs.BgTdWbTe.js}

@@ -2,10 +2,10 @@
 import "react/jsx-runtime";
 import "./chunks/index.cKLI89Eg.js";
 import "react";
-import "./tablist.D3n9E4KM.js";
-import "./tabpane.7vMXUKFX.js";
+import "./tablist.BAm0_UIG.js";
+import "./tabpane.B9rZghU6.js";
 import "./chunks/TabPane.utils.DG16Y2uD.js";
-import { D as a } from "./chunks/Tabs.cMCZMPCy.js";
+import { D as a } from "./chunks/Tabs.BHVlgp7L.js";
 export {
   a as DSTabs
 };