@stihl-design-system/components 1.0.0-RC.10 → 1.0.0-RC.12

package/styles/scss/lib/_link.scss

@@ -1,126 +0,0 @@
-@import '_helpers';
-@import '_hover';
-@import '_spacing';
-@import '_transition';
-
-// IMPORTANT: DSLinkStandalone and ds-link mixin have same visual appearance
-// so if any changes are made to this component, they should be reflected in LinkStandalone as well.
-
-// Set the link variant colors
-@mixin link-variant(
-  $content-color,
-  $background-color-hover,
-  $content-color-hover,
-  $theme: 'light'
-) {
-  & {
-    color: $content-color;
-  }
-
-  &:link,
-  &:visited {
-    color: $content-color;
-  }
-
-  &:active {
-    background-color: $background-color-hover;
-    color: $content-color-hover;
-  }
-
-  @include hover-media-query {
-    &:hover {
-      background-color: $background-color-hover;
-      color: $content-color-hover;
-    }
-  }
-
-  &[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");
-  }
-
-  &[href^='#']::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 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");
-  }
-
-  // The offset is set to 0 since Inline Links do not have a 2px
-  // outline offset like the Button component. See designs for reference.
-  @include ds-focus($theme, $offset: 0);
-}
-
-// Mixin for underlined links (inline link or active standalone link)
-@mixin link-underline {
-  text-decoration-skip-ink: auto;
-  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.
-// since there a few design differences between the two.
-@mixin ds-link($variant: 'neutral', $theme: 'light') {
-  display: inline;
-  padding-inline-end: $ds-spacing-2;
-  padding-inline-start: $ds-spacing-2;
-  padding-block-start: 0;
-  padding-block-end: 0;
-  line-height: inherit;
-  font-size: inherit;
-
-  // Inline links are always underlined
-  @include link-underline;
-
-  // 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.
-  // Setting the icon & icon color is done in the link-variant mixin since
-  // it depends on the actual link color.
-  :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;
-  }
-
-  // Variants & themes
-  @if ($variant == 'neutral' and $theme == 'light') {
-    @include link-variant(
-      $ds-theme-light-content-color-interaction-neutral,
-      $ds-theme-light-background-color-transparent-hover,
-      $ds-theme-light-content-color-interaction-neutral
-    );
-  }
-
-  @if ($variant == 'highlight' and $theme == 'light') {
-    @include link-variant(
-      $ds-theme-light-content-color-interaction-accent,
-      $ds-theme-light-background-color-transparent-hover,
-      $ds-theme-light-content-color-interaction-accent-hover
-    );
-  }
-
-  @if ($variant == 'neutral' and $theme == 'dark') {
-    @include link-variant(
-      $ds-theme-dark-content-color-interaction-neutral,
-      $ds-theme-dark-background-color-transparent-hover,
-      $ds-theme-dark-content-color-interaction-neutral,
-      $theme: 'dark'
-    );
-  }
-
-  @if ($variant == 'highlight' and $theme == 'dark') {
-    @include link-variant(
-      $ds-theme-dark-content-color-interaction-accent,
-      $ds-theme-dark-background-color-transparent-hover,
-      $ds-theme-dark-content-color-interaction-accent,
-      $theme: 'dark'
-    );
-  }
-
-  // Transition
-  @include ds-transition((background-color, border-color, color));
-}

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

@@ -1,32 +0,0 @@
-@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 "[STIHL Design System] - [ds-media-query-min()]: Passed '#{$min}' breakpoint is not available in 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 "[STIHL Design System] - [ds-media-query-max()]: Passed '#{$max}' breakpoint is not available in 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 "[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/_spacing.scss

@@ -1,32 +0,0 @@
-$ds-spacing-0: 0px;
-$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-14: 14px;
-$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;
-
-// Functions to adjust spacing to account for the inner border of an element  as designed in Figma.
-// This is necessary to ensure that the spacing matches the design specifications
-// where the border is included inside the element, causing an effective reduction
-// in the available space by the width of the border.
-@function adjust-spacing-for-border-1($spacing) {
-  @return #{calc($spacing - $ds-spacing-1)};
-}
-
-@function adjust-spacing-for-border-2($spacing) {
-  @return #{calc($spacing - $ds-spacing-2)};
-}

package/styles/scss/lib/_text.scss

@@ -1,110 +0,0 @@
-// Base mixin for text styles
-@mixin base-text($fontFamily, $fontSize, $lineHeight) {
-  font-family: #{unquote(
-      $fontFamily +
-        ', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
-    )};
-  font-style: normal;
-  font-variant: normal;
-  hyphens: manual;
-  overflow-wrap: break-word;
-  font-weight: normal;
-  font-size: $fontSize;
-  line-height: $lineHeight;
-}
-
-// Mixin for regular text
-@mixin base-text-regular($fontFamily, $fontSize, $lineHeight) {
-  @include base-text($fontFamily, $fontSize, $lineHeight);
-  /* x-height 414 https://vertical-metrics.netlify.app/ */
-  font-size-adjust: 0.414;
-}
-
-// Mixin for bold text
-@mixin base-text-bold($fontFamily, $fontSize, $lineHeight) {
-  @include base-text($fontFamily, $fontSize, $lineHeight);
-  /* x-height 426 https://vertical-metrics.netlify.app/ */
-  font-size-adjust: 0.426;
-}
-
-// Mixins for specific text sizes
-@mixin ds-text-large {
-  @include base-text-regular(
-    'STIHL Contraface Digital Text Regular',
-    1.25rem,
-    1.6
-  );
-}
-
-@mixin ds-text-large-bold {
-  @include base-text-bold('STIHL Contraface Digital Text Bold', 1.25rem, 1.6);
-}
-
-@mixin ds-text-medium {
-  @include base-text-regular(
-    'STIHL Contraface Digital Text Regular',
-    1rem,
-    1.5
-  );
-}
-
-@mixin ds-text-medium-bold {
-  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
-}
-
-@mixin ds-text-small {
-  @include base-text-regular(
-    'STIHL Contraface Digital Text Regular',
-    0.875rem,
-    1.14
-  );
-}
-
-@mixin ds-text-small-bold {
-  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
-}
-
-@mixin ds-text-x-small {
-  @include base-text-regular(
-    'STIHL Contraface Digital Text Regular',
-    0.75rem,
-    1.33
-  );
-}
-
-@mixin ds-text-x-small-bold {
-  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.75rem, 1.33);
-}
-
-@mixin ds-text-xx-small {
-  @include base-text-regular(
-    'STIHL Contraface Digital Text Regular',
-    0.625rem,
-    1.6
-  );
-}
-
-// Utility text styles
-@mixin ds-utility-medium {
-  @include base-text-regular(
-    'STIHL Contraface Digital Text Regular',
-    1rem,
-    1.25
-  );
-}
-
-@mixin ds-utility-medium-bold {
-  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.25);
-}
-
-@mixin ds-utility-small {
-  @include base-text-regular(
-    'STIHL Contraface Digital Text Regular',
-    0.875rem,
-    1.14
-  );
-}
-
-@mixin ds-utility-small-bold {
-  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
-}

package/styles/scss/lib/_theme.scss

@@ -1,162 +0,0 @@
-// 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-info: $ds-color-core-grey-dark;
-$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-10;
-$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-deep;
-$ds-theme-dark-background-color-feedback-info: $ds-color-core-grey-deep;
-$ds-theme-dark-background-color-feedback-success: $ds-color-core-grey-deep;
-$ds-theme-dark-background-color-feedback-warning: $ds-color-core-grey-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-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-info: $ds-color-core-grey-dark;
-$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-15;
-$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

@@ -1,45 +0,0 @@
-@import '_animation.scss';
-/**
- *
- * 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 ds-transition((opacity, transform), '250', 'ease-out');
- * @include ds-transition(width, $easing-key: 'ease-out');
- */
-@mixin ds-transition($properties, $duration-key: '100', $easing-key: 'linear') {
-  @if length($properties) == 0 or $properties == null {
-    @error "[STIHL Design System] - [ds-transition()]: No properties provided for ds-transition() mixin.";
-  }
-
-  $duration: map-get($ds-animation-durations, $duration-key);
-  $easing: map-get($ds-animation-easing-functions, $easing-key);
-
-  @if not map-has-key($ds-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($ds-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: append(
-      $transition-values,
-      #{$prop} #{$duration} #{$easing},
-      comma
-    );
-  }
-  & {
-    transition: $transition-values;
-
-    @media (prefers-reduced-motion: reduce) {
-      transition-duration: 0ms;
-    }
-  }
-}

package/switch.CmpNUC7s.js

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

package/text.rgDKQBrU.js

@@ -1,57 +0,0 @@
-"use client";
-import { j as e } from "./chunks/jsx-runtime.C115EyI4.js";
-import { c as j } from "./chunks/index.CvOaL64Y.js";
-import './assets/text.Dhb_l50R.css';const x = "_root_jyn7z_76", y = "_root--large_jyn7z_82", c = "_root--large-bold_jyn7z_94", u = "_root--medium_jyn7z_106", b = "_root--medium-bold_jyn7z_118", S = "_root--small_jyn7z_130", g = "_root--small-bold_jyn7z_142", z = "_root--x-small_jyn7z_154", B = "_root--x-small-bold_jyn7z_166", i = "_root--xx-small_jyn7z_178", X = "_root--theme-dark_jyn7z_190", o = {
-  root: x,
-  "root--large": "_root--large_jyn7z_82",
-  rootLarge: y,
-  "root--large-bold": "_root--large-bold_jyn7z_94",
-  rootLargeBold: c,
-  "root--medium": "_root--medium_jyn7z_106",
-  rootMedium: u,
-  "root--medium-bold": "_root--medium-bold_jyn7z_118",
-  rootMediumBold: b,
-  "root--small": "_root--small_jyn7z_130",
-  rootSmall: S,
-  "root--small-bold": "_root--small-bold_jyn7z_142",
-  rootSmallBold: g,
-  "root--x-small": "_root--x-small_jyn7z_154",
-  rootXSmall: z,
-  "root--x-small-bold": "_root--x-small-bold_jyn7z_166",
-  rootXSmallBold: B,
-  "root--xx-small": "_root--xx-small_jyn7z_178",
-  rootXxSmall: i,
-  "root--theme-dark": "_root--theme-dark_jyn7z_190",
-  rootThemeDark: X
-}, M = ({
-  children: t,
-  className: m,
-  size: l = "medium",
-  tag: a = "p",
-  theme: _ = "light",
-  weight: r = "normal",
-  ...d
-}) => {
-  const s = a, n = j(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__ */ e.jsx(s, { className: n, ...d, children: t });
-};
-export {
-  M as DSText
-};

package/title.LY1ylQsb.js

@@ -1,36 +0,0 @@
-"use client";
-import { j as o } from "./chunks/jsx-runtime.C115EyI4.js";
-import { c as g } from "./chunks/index.CvOaL64Y.js";
-import './assets/title.f74Bosn-.css';const n = "_root_1lq13_76", h = "_root--x-large-uppercase_1lq13_79", m = "_root--large-uppercase_1lq13_96", d = "_root--theme-dark_1lq13_113", u = "_dash_1lq13_116", r = {
-  root: n,
-  "root--x-large-uppercase": "_root--x-large-uppercase_1lq13_79",
-  rootXLargeUppercase: h,
-  "root--large-uppercase": "_root--large-uppercase_1lq13_96",
-  rootLargeUppercase: m,
-  "root--theme-dark": "_root--theme-dark_1lq13_113",
-  rootThemeDark: d,
-  dash: u
-}, q = ({
-  children: a,
-  className: t,
-  size: e = "x-large",
-  tag: s = "h1",
-  // Design suggested to set default tag to h1
-  theme: p = "light",
-  ...c
-}) => {
-  const l = s, _ = g(r.root, t, {
-    // sizes
-    [r.rootXLargeUppercase]: e === "x-large",
-    [r.rootLargeUppercase]: e === "large",
-    // dark theme
-    [r.rootThemeDark]: p === "dark"
-  });
-  return /* @__PURE__ */ o.jsxs(l, { className: _, ...c, children: [
-    a,
-    /* @__PURE__ */ o.jsx("span", { className: r.dash, "aria-hidden": "true", children: "ƒ" })
-  ] });
-};
-export {
-  q as DSTitle
-};