@stihl-design-system/components 1.0.0-RC.11 → 1.0.0-RC.13

package/styles/scss/{lib/_grid.scss → ds/lib/grid.scss}

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

package/styles/scss/ds/lib/heading.scss

@@ -0,0 +1,75 @@
+@use 'media-query' as *;
+@use './ds-internal/_heading' as *;
+
+
+
+@mixin heading-x-large {
+  @include base-heading-bold(
+    'STIHL Contraface Digital Text Bold',
+    1.625rem,
+    1.2
+  );
+  @include responsive-heading('l', 1.875rem, 1.25);
+}
+
+@mixin heading-x-large-uppercase {
+  @include base-heading-display-title(
+    'STIHL Contraface Digital Display Title',
+    1.625rem,
+    1.2
+  );
+  text-transform: uppercase;
+  @include responsive-heading('l', 1.875rem, 1.25);
+}
+
+
+@mixin heading-large {
+  @include base-heading-bold(
+    'STIHL Contraface Digital Text Bold',
+    1.375rem,
+    1.25
+  );
+  @include responsive-heading('l', 1.625rem, 1.2);
+}
+
+@mixin heading-large-uppercase {
+  @include base-heading-display-title(
+    'STIHL Contraface Digital Display Title',
+    1.375rem,
+    1.25
+  );
+  text-transform: uppercase;
+  @include responsive-heading('l', 1.625rem, 1.2);
+}
+
+
+@mixin heading-medium {
+  @include base-heading-bold(
+    'STIHL Contraface Digital Text Bold',
+    1.25rem,
+    1.2
+  );
+}
+
+@mixin heading-medium-uppercase {
+  @include base-heading-display-title(
+    'STIHL Contraface Digital Display Title',
+    1.25rem,
+    1.2
+  );
+  text-transform: uppercase;
+}
+
+
+@mixin heading-small {
+  @include base-heading-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
+}
+
+@mixin heading-small-uppercase {
+  @include base-heading-display-title(
+    'STIHL Contraface Digital Display Title',
+    1rem,
+    1.5
+  );
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,74 @@
+@use 'spacing' as *;
+@use 'theme' as *;
+@use 'transition' as *;
+@use './ds-internal/_link' as *;
+
+
+
+
+
+
+@mixin link($variant: 'neutral', $theme: 'light') {
+  display: inline;
+  padding-inline-end: $spacing-2;
+  padding-inline-start: $spacing-2;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  line-height: inherit;
+  font-size: inherit;
+
+  
+  @include link-underline;
+
+  
+  
+  
+  
+  
+  :where(&)[href^="http://"]::after,
+  :where(&)[href^="https://"]::after,
+  :where(&)[href^='#']::after {
+    display: inline-block;
+    margin-inline-start: 0.375em;
+    width: 0.75em;
+    height: 0.75em;
+  }
+
+  
+  @if ($variant == 'neutral' and $theme == 'light') {
+    @include link-variant(
+      $theme-light-content-color-interaction-neutral,
+      $theme-light-background-color-transparent-hover,
+      $theme-light-content-color-interaction-neutral
+    );
+  }
+
+  @if ($variant == 'highlight' and $theme == 'light') {
+    @include link-variant(
+      $theme-light-content-color-interaction-accent,
+      $theme-light-background-color-transparent-hover,
+      $theme-light-content-color-interaction-accent-hover
+    );
+  }
+
+  @if ($variant == 'neutral' and $theme == 'dark') {
+    @include link-variant(
+      $theme-dark-content-color-interaction-neutral,
+      $theme-dark-background-color-transparent-hover,
+      $theme-dark-content-color-interaction-neutral,
+      $theme: 'dark'
+    );
+  }
+
+  @if ($variant == 'highlight' and $theme == 'dark') {
+    @include link-variant(
+      $theme-dark-content-color-interaction-accent,
+      $theme-dark-background-color-transparent-hover,
+      $theme-dark-content-color-interaction-accent,
+      $theme: 'dark'
+    );
+  }
+
+  
+  @include transition((background-color, border-color, color));
+}

package/styles/scss/ds/lib/media-query.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use 'breakpoints' as *;
+
+@mixin media-query-min($min: null) {
+  @if map.has-key($breakpoints, $min) {
+    @media (min-width: #{map.get($breakpoints, $min)}px) {
+      @content;
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.media-query-min()]: Passed '#{$min}' breakpoint is not available in ds.media-query-min() mixin.";
+  }
+}
+
+@mixin media-query-max($max: null) {
+  @if map.has-key($breakpoints, $max) {
+    @media (max-width: #{map.get($breakpoints, $max) - 1}px) {
+      @content;
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.media-query-max()]: Passed '#{$max}' breakpoint is not available in ds.media-query-max() mixin.";
+  }
+}
+
+@mixin media-query-min-max($min: null, $max: null) {
+  @if map.has-key($breakpoints, $min) and map.has-key($breakpoints, $max) {
+    @media (min-width: #{map.get($breakpoints, $min)}px) and (max-width: #{map.get($breakpoints, $max) - 1}px) {
+      @content;
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.media-query-min-max()]: Passed '#{$min}' and/or '#{$max}' breakpoint is not available in ds.media-query-min-max() mixin.";
+  }
+}

package/styles/scss/{lib/_shadow.scss → ds/lib/shadow.scss}

@@ -1,9 +1,9 @@
-@mixin ds-shadow-m {
+@mixin shadow-m {
   box-shadow:
     0px 2px 12px 0px rgba(0, 0, 0, 0.08),
     0px 1px 2px 0px rgba(0, 0, 0, 0.16);
 }
-@mixin ds-shadow-l {
+@mixin shadow-l {
   box-shadow:
     0px 8px 48px 0px rgba(0, 0, 0, 0.1),
     0px 2px 4px 0px rgba(0, 0, 0, 0.04);

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

@@ -0,0 +1,7 @@
+
+$spacing-dynamic-xs: var(--ds-spacing-dynamic-xs);
+$spacing-dynamic-s: var(--ds-spacing-dynamic-s);
+$spacing-dynamic-m: var(--ds-spacing-dynamic-m);
+$spacing-dynamic-l: var(--ds-spacing-dynamic-l);
+$spacing-dynamic-xl: var(--ds-spacing-dynamic-xl);
+$spacing-dynamic-xxl: var(--ds-spacing-dynamic-xxl);

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

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

package/styles/scss/ds/lib/text.scss

@@ -0,0 +1,83 @@
+@use './ds-internal/_text' as *;
+
+
+@mixin text-large {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1.25rem,
+    1.6
+  );
+}
+
+@mixin text-large-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1.25rem, 1.6);
+}
+
+@mixin text-medium {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1rem,
+    1.5
+  );
+}
+
+@mixin text-medium-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
+}
+
+@mixin text-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.875rem,
+    1.14
+  );
+}
+
+@mixin text-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
+}
+
+@mixin text-x-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.75rem,
+    1.33
+  );
+}
+
+@mixin text-x-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.75rem, 1.33);
+}
+
+@mixin text-xx-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.625rem,
+    1.6
+  );
+}
+
+
+@mixin utility-medium {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1rem,
+    1.25
+  );
+}
+
+@mixin utility-medium-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.25);
+}
+
+@mixin utility-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.875rem,
+    1.14
+  );
+}
+
+@mixin utility-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
+}

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

@@ -0,0 +1,162 @@
+
+
+
+$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-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: $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-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: $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: $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-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: $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.DI8YYa5G.js

@@ -0,0 +1,65 @@
+"use client";
+import { j as t } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as w } from "./chunks/index.CvOaL64Y.js";
+import "react";
+import { D as b } from "./chunks/Icon.BCmt_XBG.js";
+import { DSSpinner as p } from "./spinner.Bq97Og-6.js";
+import './assets/switch.gw6aa3kx.css';const f = "ds-switch_root_gdcld_1", x = "ds-switch_root--label-right_gdcld_40", j = "ds-switch_root--stretched_gdcld_43", k = "ds-switch_loader_gdcld_53", S = "ds-switch_thumb_gdcld_111", C = "ds-switch_root--checked_gdcld_126", s = {
+  root: f,
+  "root--label-right": "ds-switch_root--label-right_gdcld_40",
+  rootLabelRight: x,
+  "root--stretched": "ds-switch_root--stretched_gdcld_43",
+  rootStretched: j,
+  switch: "ds-switch_switch_gdcld_48",
+  loader: k,
+  thumb: S,
+  "root--checked": "ds-switch_root--checked_gdcld_126",
+  rootChecked: C
+}, E = ({
+  children: a,
+  aria: h,
+  alignLabel: i = "left",
+  checked: r = !1,
+  className: l,
+  dataTrackingid: _,
+  disabled: e = !1,
+  loading: o = !1,
+  stretched: n = !1,
+  onClick: c,
+  ...m
+}) => {
+  const g = w(s.root, l, {
+    [s.rootChecked]: r === !0,
+    [s.rootStretched]: n === !0,
+    [s.rootLabelRight]: i === "right"
+  }), u = (d) => {
+    if (e || o) {
+      d.preventDefault();
+      return;
+    }
+    c && c(d);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "button",
+    {
+      className: g,
+      "data-trackingid": _,
+      onClick: u,
+      ...h,
+      ...m,
+      type: "button",
+      role: "switch",
+      "aria-checked": r,
+      "aria-disabled": e || o,
+      "aria-busy": o,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { children: a }),
+        !o && /* @__PURE__ */ t.jsx("span", { className: s.switch, children: /* @__PURE__ */ t.jsx("span", { className: s.thumb, children: /* @__PURE__ */ t.jsx(b, { name: "check", "aria-hidden": "true" }) }) }),
+        o && /* @__PURE__ */ t.jsx("span", { className: s.loader, children: /* @__PURE__ */ t.jsx(p, { aria: { "aria-label": "Loading state" } }) })
+      ]
+    }
+  );
+};
+export {
+  E as DSSwitch
+};

package/{systemfeedback.ZzRUAVYX.js → systemfeedback.C3Pfxxpp.js}

@@ -1,8 +1,8 @@
 "use client";
 import { j as o } from "./chunks/jsx-runtime.C115EyI4.js";
 import { c } from "./chunks/index.CvOaL64Y.js";
-import { D as n } from "./chunks/Icon.C2o2seDb.js";
-import './assets/systemfeedback.Sq0bAIyf.css';const i = "_root_10tno_76", l = {
+import { D as n } from "./chunks/Icon.BCmt_XBG.js";
+import './assets/systemfeedback.BPz5YlPC.css';const i = "ds-system-feedback_root_1l65g_1", l = {
   root: i
 }, m = {
   valid: "circle-check-colored",
@@ -10,14 +10,14 @@ import './assets/systemfeedback.Sq0bAIyf.css';const i = "_root_10tno_76", l = {
   warning: "triangle-exclamationmark-colored"
 }, p = ({
   className: e,
-  message: r,
-  type: s,
+  message: s,
+  type: r,
   ...t
 }) => {
   const a = c(l.root, e);
   return /* @__PURE__ */ o.jsxs("div", { className: a, ...t, role: "alert", children: [
-    /* @__PURE__ */ o.jsx(n, { name: m[s], "aria-hidden": "true" }),
-    r
+    /* @__PURE__ */ o.jsx(n, { name: m[r], "aria-hidden": "true" }),
+    s
   ] });
 };
 export {