@stihl-design-system/components 1.0.0-RC.0

package/styles/scss/lib/_link.scss

@@ -0,0 +1,155 @@
+@import '_hover';
+@import '_spacing';
+
+// Encode a color to be used in a data url.
+@function urlEncodeHexColor($string) {
+  @if type-of($string) == 'color' and str-index(#{$string}, '#') == 1 {
+    $hex: str-slice(ie-hex-str($string), 4);
+    $string: unquote('#{$hex}');
+
+    @return '%23' + $string;
+  }
+
+  @return $string;
+}
+
+// Set the link variant colors
+@mixin link-variant(
+  $content-color,
+  $background-color-hover,
+  $content-color-hover
+) {
+  color: $content-color;
+
+  &:link,
+  &:visited {
+    color: $content-color;
+  }
+
+  @include hover-media-query {
+    &:hover {
+      background-color: $background-color-hover;
+      color: $content-color-hover;
+    }
+  }
+
+  &:active {
+    background-color: $background-color-hover;
+    color: $content-color-hover;
+  }
+}
+
+// Mixin for underlined links (inline link or active standalone link)
+@mixin link-underline {
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  text-decoration-color: currentColor;
+}
+
+// Public Link mixin that can be used to style links.
+// Is also used to style the LinkStandalone component.
+// The $type variable is used to determine if the link is inline or standalone,
+// since there a few design differences between the two.
+@mixin ds-link($variant: 'neutral', $theme: 'light', $type: 'inline') {
+  // Default link color (neutral/light)
+  $link-color: $ds-theme-light-content-color-interaction-neutral;
+
+  // The offset is set to 0 since LinkStandalone does not have a 2px
+  // outline offset like the Button component. See designs for reference.
+  @include ds-focus($theme, $offset: 0);
+
+  // Variants & themes
+  @if ($variant == 'neutral' and $theme == 'light') {
+    @include link-variant(
+      $link-color,
+      $ds-theme-light-background-color-transparent-hover,
+      $link-color
+    );
+  }
+
+  @if ($variant == 'highlight' and $theme == 'light') {
+    $link-color: $ds-theme-light-content-color-interaction-accent;
+    @include link-variant(
+      $link-color,
+      $ds-theme-light-background-color-transparent-hover,
+      $ds-theme-light-content-color-interaction-accent-hover
+    );
+  }
+
+  @if ($variant == 'neutral' and $theme == 'dark') {
+    $link-color: $ds-theme-dark-content-color-interaction-neutral;
+    @include link-variant(
+      $link-color,
+      $ds-theme-dark-background-color-transparent-hover,
+      $link-color
+    );
+  }
+
+  @if ($variant == 'highlight' and $theme == 'dark') {
+    $link-color: $ds-theme-dark-content-color-interaction-accent;
+    @include link-variant(
+      $link-color,
+      $ds-theme-dark-background-color-transparent-hover,
+      $link-color
+    );
+  }
+
+  // Type
+  @if ($type == 'inline') {
+    // Inline link
+    @include link-underline;
+
+    display: inline;
+    padding-right: $ds-spacing-2;
+    padding-left: $ds-spacing-2;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: inherit;
+    font-size: inherit;
+
+    // Inline links do have two predefined icons for external links and anchors.
+    // The icons are added via the ::after pseudo element as svg data urls to
+    // enable the change of the icon color via the fill property.
+    :where(&)[href^="http://"]::after,
+    :where(&)[href^="https://"]::after,
+    :where(&)[href^='#']::after {
+      display: inline-block;
+      margin-left: 0.375em;
+      width: 0.75em;
+      height: 0.75em;
+    }
+
+    &[href^="http://"]::after,
+    &[href^="https://"]::after
+    {
+      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($link-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");
+    }
+
+    &[href^='#']::after {
+      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($link-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");
+    }
+  } @else {
+    // Standalone link
+    @include ds-utility-medium;
+
+    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;
+    // Set color to transparent instead of text-decoration: none to support forced colors link decoration
+    text-decoration-color: transparent;
+
+    // The DSLinkStandalone component uses the DSIcon component to render a
+    // selectable icon. The icon is colored with the current text color.
+    svg {
+      fill: currentColor;
+    }
+  }
+
+  // Transition
+  @include transition(background-color, border-color, color);
+}

package/styles/scss/lib/_media-query.scss

@@ -0,0 +1,32 @@
+@import '_breakpoints.scss';
+
+@mixin ds-media-query-min($min: null) {
+  @if map-has-key($ds-breakpoints, $min) {
+    @media (min-width: #{map-get($ds-breakpoints, $min)}px) {
+      @content;
+    }
+  } @else {
+    @error "Passed #{$min} breakpoint is not available for used ds-media-query-min() mixin.";
+  }
+}
+
+@mixin ds-media-query-max($max: null) {
+  @if map-has-key($ds-breakpoints, $max) {
+    @media (max-width: #{map-get($ds-breakpoints, $max) - 1}px) {
+      @content;
+    }
+  } @else {
+    @error "Passed #{$max} breakpoint is not available for used ds-media-query-max() mixin.";
+  }
+}
+
+@mixin ds-media-query-min-max($min: null, $max: null) {
+  @if map-has-key($ds-breakpoints, $min) and map-has-key($ds-breakpoints, $max)
+  {
+    @media (min-width: #{map-get($ds-breakpoints, $min)}px) and (max-width: #{map-get($ds-breakpoints, $max) - 1}px) {
+      @content;
+    }
+  } @else {
+    @error "Passed #{$min} and/or #{$max} breakpoint is not available for used ds-media-query-min-max() mixin.";
+  }
+}

package/styles/scss/lib/_spacing.scss

@@ -0,0 +1,18 @@
+$ds-spacing-1: 1px;
+$ds-spacing-2: 2px;
+$ds-spacing-4: 4px;
+$ds-spacing-6: 6px;
+$ds-spacing-8: 8px;
+$ds-spacing-12: 12px;
+$ds-spacing-16: 16px;
+$ds-spacing-20: 20px;
+$ds-spacing-24: 24px;
+$ds-spacing-32: 32px;
+$ds-spacing-40: 40px;
+$ds-spacing-48: 48px;
+$ds-spacing-56: 56px;
+$ds-spacing-64: 64px;
+$ds-spacing-80: 80px;
+$ds-spacing-96: 96px;
+$ds-spacing-128: 128px;
+$ds-spacing-160: 160px;

package/styles/scss/lib/_text.scss

@@ -0,0 +1,63 @@
+// Base mixin for text styles
+@mixin base-text($fontFamily, $fontSize, $lineHeight) {
+  font-family: #{unquote(
+      $fontFamily + ', Arial Narrow, Arial, Heiti SC, sans-serif'
+    )};
+  font-style: normal;
+  font-variant: normal;
+  hyphens: manual;
+  overflow-wrap: break-word;
+  font-weight: normal;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+}
+
+// Mixins for specific text sizes
+@mixin ds-text-large {
+  @include base-text('STIHL Contraface Text Regular', 1.25rem, 1.6);
+}
+
+@mixin ds-text-large-bold {
+  @include base-text('STIHL Contraface Text Bold', 1.25rem, 1.6);
+}
+
+@mixin ds-text-medium {
+  @include base-text('STIHL Contraface Text Regular', 1rem, 1.5);
+}
+
+@mixin ds-text-medium-bold {
+  @include base-text('STIHL Contraface Text Bold', 1rem, 1.5);
+}
+
+@mixin ds-text-small {
+  @include base-text('STIHL Contraface Text Regular', 0.875rem, 1.14);
+}
+
+@mixin ds-text-small-bold {
+  @include base-text('STIHL Contraface Text Bold', 0.875rem, 1.14);
+}
+
+@mixin ds-text-x-small {
+  @include base-text('STIHL Contraface Text Regular', 0.75rem, 1.33);
+}
+
+@mixin ds-text-x-small-bold {
+  @include base-text('STIHL Contraface Text Bold', 0.75rem, 1.33);
+}
+
+@mixin ds-text-xx-small {
+  @include base-text('STIHL Contraface Text Regular', 0.625rem, 1.6);
+}
+
+// Utility text styles
+@mixin ds-utility-medium {
+  @include base-text('STIHL Contraface Text Regular', 1rem, 1.25);
+}
+
+@mixin ds-utility-medium-bold {
+  @include base-text('STIHL Contraface Text Bold', 1rem, 1.25);
+}
+
+@mixin ds-utility-small {
+  @include base-text('STIHL Contraface Text Regular', 0.875rem, 1.14);
+}

package/styles/scss/lib/_theme.scss

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

package/styles/scss/lib/_transition.scss

@@ -0,0 +1,26 @@
+/**
+ *
+ * This mixin provides a concise way to set transitions with a default
+ * duration of 0.3s and easing of `ease` for one or multiple properties.
+ *
+ * In addition, the mixin respects the user's system preference for reduced
+ * motion and adjusts the transition duration accordingly.
+ *
+ * Example Usage:
+ * @include transition(opacity, transform);
+ */
+@mixin transition($properties...) {
+  @if length($properties) == 0 or $properties == null {
+    @error "No properties provided for transition mixin.";
+  }
+
+  $transition-values: ();
+  @each $prop in $properties {
+    $transition-values: append($transition-values, #{$prop} 0.3s ease, comma);
+  }
+  transition: $transition-values;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0ms;
+  }
+}

package/switch.2f011fcc.js

@@ -0,0 +1,65 @@
+import "./assets/Switch.f3ab20de.css";
+import { j as t } from "./chunks/jsx-runtime.5c071667.js";
+import { c as b } from "./chunks/index.8021d3e0.js";
+import "react";
+import { DSIcon as f } from "./icon.b4211784.js";
+import { DSSpinner as x } from "./spinner.ee015469.js";
+const j = "_root_1u3dn_25", k = "_root--label-right_1u3dn_53", S = "_root--stretched_1u3dn_56", g = "_loader_1u3dn_66", w = "_thumb_1u3dn_119", C = "_root--checked_1u3dn_134", o = {
+  root: j,
+  "root--label-right": "_root--label-right_1u3dn_53",
+  rootLabelRight: k,
+  "root--stretched": "_root--stretched_1u3dn_56",
+  rootStretched: S,
+  switch: "_switch_1u3dn_61",
+  loader: g,
+  thumb: w,
+  "root--checked": "_root--checked_1u3dn_134",
+  rootChecked: C
+}, I = ({
+  children: n,
+  aria: h,
+  alignLabel: i = "left",
+  checked: e = !1,
+  className: d,
+  dataTrackingid: l,
+  disabled: s = !1,
+  loading: r = !1,
+  stretched: _ = !1,
+  onClick: a,
+  ...u
+}) => {
+  const m = b(o.root, d, {
+    [o.rootChecked]: e === !0,
+    [o.rootStretched]: _ === !0,
+    [o.rootLabelRight]: i === "right"
+  }), p = (c) => {
+    if (s || r) {
+      c.preventDefault();
+      return;
+    }
+    a && a(c);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "button",
+    {
+      className: m,
+      "data-trackingid": l,
+      onClick: p,
+      ...h,
+      ...u,
+      type: "button",
+      role: "switch",
+      "aria-checked": e,
+      "aria-disabled": s || r,
+      "aria-busy": r,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { children: n }),
+        !r && /* @__PURE__ */ t.jsx("span", { className: o.switch, children: /* @__PURE__ */ t.jsx("span", { className: o.thumb, children: /* @__PURE__ */ t.jsx(f, { name: "check", "aria-hidden": "true" }) }) }),
+        r && /* @__PURE__ */ t.jsx("span", { className: o.loader, children: /* @__PURE__ */ t.jsx(x, { aria: { "aria-label": "Loading state" } }) })
+      ]
+    }
+  );
+};
+export {
+  I as DSSwitch
+};

package/switch.d.ts

@@ -0,0 +1 @@
+export * from './components/Switch/Switch'

package/systemfeedback.6bbd1505.js

@@ -0,0 +1,25 @@
+import "./assets/SystemFeedback.f4421d60.css";
+import { j as o } from "./chunks/jsx-runtime.5c071667.js";
+import { c } from "./chunks/index.8021d3e0.js";
+import { DSIcon as n } from "./icon.b4211784.js";
+const i = "_root_1f2l9_25", l = {
+  root: i
+}, m = {
+  valid: "circle-check-colored",
+  invalid: "diamond-exclamationmark-colored",
+  warning: "triangle-exclamationmark-colored"
+}, f = ({
+  className: r,
+  message: e,
+  type: t,
+  ...s
+}) => {
+  const a = c(l.root, r);
+  return /* @__PURE__ */ o.jsxs("div", { className: a, ...s, role: "alert", children: [
+    /* @__PURE__ */ o.jsx(n, { name: m[t], "aria-hidden": "true" }),
+    e
+  ] });
+};
+export {
+  f as DSSystemFeedback
+};

package/systemfeedback.d.ts

@@ -0,0 +1 @@
+export * from './components/SystemFeedback/SystemFeedback'

package/text.8d80704f.js

@@ -0,0 +1,57 @@
+import "./assets/Text.4756effe.css";
+import { j as x } from "./chunks/jsx-runtime.5c071667.js";
+import { c as y } from "./chunks/index.8021d3e0.js";
+const c = "_root_143yo_25", n = "_root--large_143yo_31", u = "_root--large-bold_143yo_41", b = "_root--medium_143yo_51", S = "_root--medium-bold_143yo_61", g = "_root--small_143yo_71", B = "_root--small-bold_143yo_81", i = "_root--x-small_143yo_91", X = "_root--x-small-bold_143yo_101", k = "_root--xx-small_143yo_111", p = "_root--theme-dark_143yo_121", o = {
+  root: c,
+  "root--large": "_root--large_143yo_31",
+  rootLarge: n,
+  "root--large-bold": "_root--large-bold_143yo_41",
+  rootLargeBold: u,
+  "root--medium": "_root--medium_143yo_51",
+  rootMedium: b,
+  "root--medium-bold": "_root--medium-bold_143yo_61",
+  rootMediumBold: S,
+  "root--small": "_root--small_143yo_71",
+  rootSmall: g,
+  "root--small-bold": "_root--small-bold_143yo_81",
+  rootSmallBold: B,
+  "root--x-small": "_root--x-small_143yo_91",
+  rootXSmall: i,
+  "root--x-small-bold": "_root--x-small-bold_143yo_101",
+  rootXSmallBold: X,
+  "root--xx-small": "_root--xx-small_143yo_111",
+  rootXxSmall: k,
+  "root--theme-dark": "_root--theme-dark_143yo_121",
+  rootThemeDark: p
+}, h = ({
+  children: t,
+  className: m,
+  size: l = "medium",
+  tag: a = "p",
+  theme: _ = "light",
+  weight: r = "normal",
+  ...d
+}) => {
+  const s = a, e = y(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]: _ === "dark"
+  });
+  return /* @__PURE__ */ x.jsx(s, { className: e, ...d, children: t });
+};
+export {
+  h as DSText
+};

package/text.d.ts

@@ -0,0 +1 @@
+export * from './components/Text/Text'

package/textarea.d.ts

@@ -0,0 +1 @@
+export * from './components/Textarea/Textarea'