@cloudscape-design/components-themeable 3.0.1258 → 3.0.1259

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "cf7862b5ecbf778ce72b5cfb5ae000f186d517fb"
+  "commit": "c8acad4a9425c8606818bd6101f87bb50a21cefc"
 }

package/lib/internal/scss/{internal/components/dropdown → dropdown}/motion.scss

@@ -3,8 +3,8 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../styles' as styles;
-@use '../../styles/tokens' as awsui;
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
 
 .dropdown-content-wrapper {
   @include styles.with-motion {

package/lib/internal/scss/dropdown/styles.scss

@@ -0,0 +1,127 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
+@use './motion';
+@use '../internal/generated/custom-css-properties/index' as custom-props;
+
+.root {
+  @include styles.styles-reset;
+  position: relative;
+  white-space: inherit;
+
+  &.interior {
+    position: static;
+  }
+}
+
+.dropdown {
+  position: absolute;
+  display: none;
+  // Needs to be higher than a global navigation element
+  z-index: 2000;
+  transform-origin: top;
+
+  // When used in portal we need z-index to be higher than modal's
+  &.use-portal {
+    z-index: 7000;
+  }
+
+  &:not(.interior) {
+    transform: translateY(0px);
+    @include styles.with-motion {
+      transition: transform awsui.$motion-duration-show-quick;
+    }
+  }
+
+  &-content-wrapper {
+    // Apply styles-reset to ensure font-family and other styles are properly set
+    // when expandToViewport is true (dropdown rendered via portal to document.body)
+    @include styles.styles-reset;
+    white-space: inherit;
+    position: relative;
+    background-color: awsui.$color-background-dropdown-item-default;
+    outline: none;
+    @include styles.dropdown-shadow(
+      $border-color: var(#{custom-props.$dropdownContentBorderColor}, #{awsui.$color-border-dropdown-container}),
+      $border-width: var(#{custom-props.$dropdownContentBorderWidth}, #{awsui.$border-width-popover}),
+      $border-radius: var(#{custom-props.$dropdownContentBorderRadius}, #{awsui.$border-radius-dropdown})
+    );
+
+    // Don't show dropdown border when there's no dropdown content
+    &.is-empty::after {
+      display: none;
+    }
+  }
+
+  > .dropdown-content-wrapper {
+    border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-container-top;
+    border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-dropdown-group;
+  }
+
+  &-drop-up {
+    > .dropdown-content-wrapper {
+      transform-origin: bottom;
+      box-shadow: awsui.$shadow-dropup;
+    }
+
+    &.with-limited-width > .dropdown-content-wrapper {
+      border-block-start: none;
+    }
+  }
+  &-drop-left {
+    inset-inline-end: 0;
+  }
+  &-drop-right {
+    inset-inline-start: 0;
+  }
+  &.occupy-entire-width {
+    min-inline-size: 100%;
+  }
+  &.use-flexible-width {
+    inline-size: max-content;
+    max-inline-size: var(#{custom-props.$dropdownDefaultMaxWidth}, none);
+    min-inline-size: var(#{custom-props.$dropdownDefaultMinWidth}, auto);
+  }
+  &.interior > .dropdown-content-wrapper {
+    margin-block-start: -1px;
+  }
+  &.hide-block-border > .dropdown-content-wrapper {
+    border-block-start: none;
+  }
+  &.hide-block-border:not(.dropdown-drop-up) > .dropdown-content-wrapper {
+    border-block-end: none;
+  }
+  &.hide-block-border.refresh > .dropdown-content-wrapper {
+    border-block-end: none;
+  }
+  &.open {
+    display: block;
+
+    &:not(.interior).refresh[data-animating='true'] {
+      transform: translateY(4px);
+
+      &.dropdown-drop-up {
+        transform: translateY(-4px);
+      }
+    }
+    &.nowrap {
+      white-space: nowrap;
+      // Taking into account width of scroll element
+      overflow: scroll;
+    }
+  }
+}
+
+.dropdown-content {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+}
+
+.stretch-trigger-height {
+  block-size: 100%;
+}

package/lib/internal/scss/dropdown/test-classes/styles.scss

@@ -0,0 +1,16 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.trigger {
+  /* used in test-utils */
+}
+
+.header {
+  /* used in test-utils */
+}
+
+.footer {
+  /* used in test-utils */
+}

package/lib/internal/scss/internal/components/dropdown/styles.scss

@@ -3,121 +3,10 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../styles' as styles;
-@use '../../styles/tokens' as awsui;
-@use './motion';
-@use '../../generated/custom-css-properties/index' as custom-props;
-
 .root {
-  @include styles.styles-reset;
-  position: relative;
-  white-space: inherit;
-
-  &.interior {
-    position: static;
-  }
+  /* used for backwards-compatibility with older versions of test-utils */
 }
 
 .dropdown {
-  position: absolute;
-  display: none;
-  // Needs to be higher than a global navigation element
-  z-index: 2000;
-  transform-origin: top;
-
-  // When used in portal we need z-index to be higher than modal's
-  &.use-portal {
-    z-index: 7000;
-  }
-
-  &:not(.interior) {
-    transform: translateY(0px);
-    @include styles.with-motion {
-      transition: transform awsui.$motion-duration-show-quick;
-    }
-  }
-
-  &-content-wrapper {
-    // Apply styles-reset to ensure font-family and other styles are properly set
-    // when expandToViewport is true (dropdown rendered via portal to document.body)
-    @include styles.styles-reset;
-    white-space: inherit;
-    position: relative;
-    background-color: awsui.$color-background-dropdown-item-default;
-    outline: none;
-    @include styles.dropdown-shadow;
-
-    // Don't show dropdown border when there's no dropdown content
-    &.is-empty::after {
-      display: none;
-    }
-  }
-
-  > .dropdown-content-wrapper {
-    border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-container-top;
-    border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-dropdown-group;
-  }
-
-  &-drop-up {
-    > .dropdown-content-wrapper {
-      transform-origin: bottom;
-      box-shadow: awsui.$shadow-dropup;
-    }
-
-    &.with-limited-width > .dropdown-content-wrapper {
-      border-block-start: none;
-    }
-  }
-  &-drop-left {
-    inset-inline-end: 0;
-  }
-  &-drop-right {
-    inset-inline-start: 0;
-  }
-  &.occupy-entire-width {
-    min-inline-size: 100%;
-  }
-  &.use-flexible-width {
-    inline-size: max-content;
-    max-inline-size: var(#{custom-props.$dropdownDefaultMaxWidth}, none);
-    min-inline-size: var(#{custom-props.$dropdownDefaultMinWidth}, auto);
-  }
-  &.interior > .dropdown-content-wrapper {
-    margin-block-start: -1px;
-  }
-  &.hide-block-border > .dropdown-content-wrapper {
-    border-block-start: none;
-  }
-  &.hide-block-border:not(.dropdown-drop-up) > .dropdown-content-wrapper {
-    border-block-end: none;
-  }
-  &.hide-block-border.refresh > .dropdown-content-wrapper {
-    border-block-end: none;
-  }
-  &.open {
-    display: block;
-
-    &:not(.interior).refresh[data-animating='true'] {
-      transform: translateY(4px);
-
-      &.dropdown-drop-up {
-        transform: translateY(-4px);
-      }
-    }
-    &.nowrap {
-      white-space: nowrap;
-      // Taking into account width of scroll element
-      overflow: scroll;
-    }
-  }
-}
-
-.dropdown-content {
-  display: flex;
-  flex-direction: column;
-  inline-size: 100%;
-}
-
-.stretch-trigger-height {
-  block-size: 100%;
+  /* used for backwards-compatibility with older versions of test-utils */
 }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,156 +1,159 @@
 
     // Build environment
-    $awsui-commit-hash: "cf7862b5";
+    $awsui-commit-hash: "c8acad4a";
     // Manually managed CSS-variables
-    $maxContentWidth: --awsui-max-content-width-hzjhvz;
-$minContentWidth: --awsui-min-content-width-hzjhvz;
-$breadcrumbsGap: --awsui-breadcrumbs-gap-hzjhvz;
-$contentGapLeft: --awsui-content-gap-left-hzjhvz;
-$contentGapRight: --awsui-content-gap-right-hzjhvz;
-$contentHeight: --awsui-content-height-hzjhvz;
-$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-hzjhvz;
-$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-hzjhvz;
-$contentLayoutMainGap: --awsui-content-layout-main-gap-hzjhvz;
-$defaultMaxContentWidth: --awsui-default-max-content-width-hzjhvz;
-$defaultMinContentWidth: --awsui-default-min-content-width-hzjhvz;
-$drawerSize: --awsui-drawer-size-hzjhvz;
-$drawerMinSize: --awsui-drawer-min-size-hzjhvz;
-$bottomDrawerSize: --awsui-bottom-drawer-size-hzjhvz;
-$footerHeight: --awsui-footer-height-hzjhvz;
-$headerGap: --awsui-header-gap-hzjhvz;
-$headerHeight: --awsui-header-height-hzjhvz;
-$layoutWidth: --awsui-layout-width-hzjhvz;
-$mainGap: --awsui-main-gap-hzjhvz;
-$mainOffsetLeft: --awsui-main-offset-left-hzjhvz;
-$mainTemplateRows: --awsui-main-template-rows-hzjhvz;
-$mobileBarHeight: --awsui-mobile-bar-height-hzjhvz;
-$notificationsHeight: --awsui-notifications-height-hzjhvz;
-$offsetTop: --awsui-offset-top-hzjhvz;
-$overlapHeight: --awsui-overlap-height-hzjhvz;
-$navigationWidth: --awsui-navigation-width-hzjhvz;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-hzjhvz;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-hzjhvz;
-$splitPanelHeight: --awsui-split-panel-height-hzjhvz;
-$splitPanelMinWidth: --awsui-split-panel-min-width-hzjhvz;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-hzjhvz;
-$toolsMaxWidth: --awsui-tools-max-width-hzjhvz;
-$toolsWidth: --awsui-tools-width-hzjhvz;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-hzjhvz;
-$contentScrollMargin: --awsui-content-scroll-margin-hzjhvz;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-hzjhvz;
-$flashbarStackIndex: --awsui-flashbar-stack-index-hzjhvz;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-hzjhvz;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-hzjhvz;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-hzjhvz;
-$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-hzjhvz;
-$dropdownDefaultMinWidth: --awsui-dropdown-default-min-width-hzjhvz;
-$modalCustomWidth: --awsui-modal-custom-width-hzjhvz;
-$modalCustomHeight: --awsui-modal-custom-height-hzjhvz;
-$spinnerRotatorFrom: --awsui-spinner-rotator-from-hzjhvz;
-$spinnerRotatorTo: --awsui-spinner-rotator-to-hzjhvz;
-$spinnerLineLeftFrom: --awsui-spinner-line-left-from-hzjhvz;
-$spinnerLineLeftTo: --awsui-spinner-line-left-to-hzjhvz;
-$spinnerLineRightFrom: --awsui-spinner-line-right-from-hzjhvz;
-$spinnerLineRightTo: --awsui-spinner-line-right-to-hzjhvz;
-$sliderLabelCount: --awsui-slider-label-count-hzjhvz;
-$sliderTickCount: --awsui-slider-tick-count-hzjhvz;
-$sliderReferenceColumn: --awsui-slider-reference-column-hzjhvz;
-$sliderNextReferenceColumn: --awsui-slider-next-reference-column-hzjhvz;
-$sliderMaxStart: --awsui-slider-max-start-hzjhvz;
-$sliderMinEnd: --awsui-slider-min-end-hzjhvz;
-$sliderRangeInlineSize: --awsui-slider-range-inline-size-hzjhvz;
-$sliderTooltipPosition: --awsui-slider-tooltip-position-hzjhvz;
-$togglesLeftWidth: --awsui-toggles-left-width-hzjhvz;
-$togglesRightWidth: --awsui-toggles-right-width-hzjhvz;
-$promptInputMaxRows: --awsui-prompt-input-max-rows-hzjhvz;
-$promptInputScrollHeight: --awsui-prompt-input-scroll-height-hzjhvz;
-$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-hzjhvz;
-$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-hzjhvz;
-$styleBackgroundActive: --awsui-style-background-active-hzjhvz;
-$styleBackgroundDefault: --awsui-style-background-default-hzjhvz;
-$styleBackgroundDisabled: --awsui-style-background-disabled-hzjhvz;
-$styleBackgroundHover: --awsui-style-background-hover-hzjhvz;
-$styleBorderColorActive: --awsui-style-border-color-active-hzjhvz;
-$styleBorderColorDefault: --awsui-style-border-color-default-hzjhvz;
-$styleBorderColorDisabled: --awsui-style-border-color-disabled-hzjhvz;
-$styleBorderColorHover: --awsui-style-border-color-hover-hzjhvz;
-$styleColorActive: --awsui-style-color-active-hzjhvz;
-$styleColorDefault: --awsui-style-color-default-hzjhvz;
-$styleColorDisabled: --awsui-style-color-disabled-hzjhvz;
-$styleColorHover: --awsui-style-color-hover-hzjhvz;
-$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-hzjhvz;
-$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-hzjhvz;
-$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-hzjhvz;
-$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-hzjhvz;
-$styleBoxShadowActive: --awsui-style-box-shadow-active-hzjhvz;
-$styleBoxShadowDefault: --awsui-style-box-shadow-default-hzjhvz;
-$styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-hzjhvz;
-$styleBoxShadowHover: --awsui-style-box-shadow-hover-hzjhvz;
-$styleBackgroundReadonly: --awsui-style-background-readonly-hzjhvz;
-$styleBorderColorReadonly: --awsui-style-border-color-readonly-hzjhvz;
-$styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-hzjhvz;
-$styleColorReadonly: --awsui-style-color-readonly-hzjhvz;
-$styleBackgroundFocus: --awsui-style-background-focus-hzjhvz;
-$styleBorderColorFocus: --awsui-style-border-color-focus-hzjhvz;
-$styleBoxShadowFocus: --awsui-style-box-shadow-focus-hzjhvz;
-$styleColorFocus: --awsui-style-color-focus-hzjhvz;
-$stylePlaceholderColor: --awsui-style-placeholder-color-hzjhvz;
-$stylePlaceholderFontSize: --awsui-style-placeholder-font-size-hzjhvz;
-$stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-hzjhvz;
-$stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-hzjhvz;
-$styleTabsActiveIndicatorColor: --awsui-style-tabs-active-indicator-color-hzjhvz;
-$styleTabsActiveIndicatorWidth: --awsui-style-tabs-active-indicator-width-hzjhvz;
-$styleTabsActiveIndicatorBorderRadius: --awsui-style-tabs-active-indicator-border-radius-hzjhvz;
-$styleTabsSeparatorColor: --awsui-style-tabs-separator-color-hzjhvz;
-$styleTabsSeparatorWidth: --awsui-style-tabs-separator-width-hzjhvz;
-$alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-hzjhvz;
-$alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-hzjhvz;
-$alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-hzjhvz;
-$alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-hzjhvz;
-$alertIconColor: --awsui-alert-icon-color-hzjhvz;
-$promptInputStyleBackgroundDefault: --awsui-prompt-input-style-background-default-hzjhvz;
-$promptInputStyleBackgroundDisabled: --awsui-prompt-input-style-background-disabled-hzjhvz;
-$promptInputStyleBackgroundFocus: --awsui-prompt-input-style-background-focus-hzjhvz;
-$promptInputStyleBackgroundHover: --awsui-prompt-input-style-background-hover-hzjhvz;
-$promptInputStyleBackgroundReadonly: --awsui-prompt-input-style-background-readonly-hzjhvz;
-$promptInputStyleBorderColorDefault: --awsui-prompt-input-style-border-color-default-hzjhvz;
-$promptInputStyleBorderColorDisabled: --awsui-prompt-input-style-border-color-disabled-hzjhvz;
-$promptInputStyleBorderColorFocus: --awsui-prompt-input-style-border-color-focus-hzjhvz;
-$promptInputStyleBorderColorHover: --awsui-prompt-input-style-border-color-hover-hzjhvz;
-$promptInputStyleBorderColorReadonly: --awsui-prompt-input-style-border-color-readonly-hzjhvz;
-$promptInputStyleBoxShadowDefault: --awsui-prompt-input-style-box-shadow-default-hzjhvz;
-$promptInputStyleBoxShadowDisabled: --awsui-prompt-input-style-box-shadow-disabled-hzjhvz;
-$promptInputStyleBoxShadowFocus: --awsui-prompt-input-style-box-shadow-focus-hzjhvz;
-$promptInputStyleBoxShadowHover: --awsui-prompt-input-style-box-shadow-hover-hzjhvz;
-$promptInputStyleBoxShadowReadonly: --awsui-prompt-input-style-box-shadow-readonly-hzjhvz;
-$promptInputStyleColorDefault: --awsui-prompt-input-style-color-default-hzjhvz;
-$promptInputStyleColorDisabled: --awsui-prompt-input-style-color-disabled-hzjhvz;
-$promptInputStyleColorFocus: --awsui-prompt-input-style-color-focus-hzjhvz;
-$promptInputStyleColorHover: --awsui-prompt-input-style-color-hover-hzjhvz;
-$promptInputStyleColorReadonly: --awsui-prompt-input-style-color-readonly-hzjhvz;
-$promptInputStylePlaceholderColor: --awsui-prompt-input-style-placeholder-color-hzjhvz;
-$promptInputStylePlaceholderFontSize: --awsui-prompt-input-style-placeholder-font-size-hzjhvz;
-$promptInputStylePlaceholderFontStyle: --awsui-prompt-input-style-placeholder-font-style-hzjhvz;
-$promptInputStylePlaceholderFontWeight: --awsui-prompt-input-style-placeholder-font-weight-hzjhvz;
-$progressBarBackgroundColor: --awsui-progress-bar-background-color-hzjhvz;
-$progressBarBorderRadius: --awsui-progress-bar-border-radius-hzjhvz;
-$progressBarHeight: --awsui-progress-bar-height-hzjhvz;
-$progressValueBackgroundColor: --awsui-progress-value-background-color-hzjhvz;
-$styleSliderTrackBackgroundColor: --awsui-style-slider-track-background-color-hzjhvz;
-$styleSliderRangeBackgroundDefault: --awsui-style-slider-range-background-default-hzjhvz;
-$styleSliderRangeBackgroundActive: --awsui-style-slider-range-background-active-hzjhvz;
-$styleSliderHandleBackgroundDefault: --awsui-style-slider-handle-background-default-hzjhvz;
-$styleSliderHandleBackgroundHover: --awsui-style-slider-handle-background-hover-hzjhvz;
-$styleSliderHandleBackgroundActive: --awsui-style-slider-handle-background-active-hzjhvz;
-$styleSliderHandleBorderRadius: --awsui-style-slider-handle-border-radius-hzjhvz;
-$tokenStyleBackgroundDefault: --awsui-token-style-background-default-hzjhvz;
-$tokenStyleBackgroundDisabled: --awsui-token-style-background-disabled-hzjhvz;
-$tokenStyleBackgroundReadOnly: --awsui-token-style-background-read-only-hzjhvz;
-$tokenStyleBorderColorDefault: --awsui-token-style-border-color-default-hzjhvz;
-$tokenStyleBorderColorDisabled: --awsui-token-style-border-color-disabled-hzjhvz;
-$tokenStyleBorderColorReadOnly: --awsui-token-style-border-color-read-only-hzjhvz;
-$tokenStyleDismissColorDefault: --awsui-token-style-dismiss-color-default-hzjhvz;
-$tokenStyleDismissColorDisabled: --awsui-token-style-dismiss-color-disabled-hzjhvz;
-$tokenStyleDismissColorHover: --awsui-token-style-dismiss-color-hover-hzjhvz;
-$tokenStyleDismissColorReadOnly: --awsui-token-style-dismiss-color-read-only-hzjhvz;
+    $maxContentWidth: --awsui-max-content-width-u09ddc;
+$minContentWidth: --awsui-min-content-width-u09ddc;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-u09ddc;
+$contentGapLeft: --awsui-content-gap-left-u09ddc;
+$contentGapRight: --awsui-content-gap-right-u09ddc;
+$contentHeight: --awsui-content-height-u09ddc;
+$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-u09ddc;
+$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-u09ddc;
+$contentLayoutMainGap: --awsui-content-layout-main-gap-u09ddc;
+$defaultMaxContentWidth: --awsui-default-max-content-width-u09ddc;
+$defaultMinContentWidth: --awsui-default-min-content-width-u09ddc;
+$drawerSize: --awsui-drawer-size-u09ddc;
+$drawerMinSize: --awsui-drawer-min-size-u09ddc;
+$bottomDrawerSize: --awsui-bottom-drawer-size-u09ddc;
+$footerHeight: --awsui-footer-height-u09ddc;
+$headerGap: --awsui-header-gap-u09ddc;
+$headerHeight: --awsui-header-height-u09ddc;
+$layoutWidth: --awsui-layout-width-u09ddc;
+$mainGap: --awsui-main-gap-u09ddc;
+$mainOffsetLeft: --awsui-main-offset-left-u09ddc;
+$mainTemplateRows: --awsui-main-template-rows-u09ddc;
+$mobileBarHeight: --awsui-mobile-bar-height-u09ddc;
+$notificationsHeight: --awsui-notifications-height-u09ddc;
+$offsetTop: --awsui-offset-top-u09ddc;
+$overlapHeight: --awsui-overlap-height-u09ddc;
+$navigationWidth: --awsui-navigation-width-u09ddc;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-u09ddc;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-u09ddc;
+$splitPanelHeight: --awsui-split-panel-height-u09ddc;
+$splitPanelMinWidth: --awsui-split-panel-min-width-u09ddc;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-u09ddc;
+$toolsMaxWidth: --awsui-tools-max-width-u09ddc;
+$toolsWidth: --awsui-tools-width-u09ddc;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-u09ddc;
+$contentScrollMargin: --awsui-content-scroll-margin-u09ddc;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-u09ddc;
+$flashbarStackIndex: --awsui-flashbar-stack-index-u09ddc;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-u09ddc;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-u09ddc;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-u09ddc;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-u09ddc;
+$dropdownDefaultMinWidth: --awsui-dropdown-default-min-width-u09ddc;
+$dropdownContentBorderColor: --awsui-dropdown-content-border-color-u09ddc;
+$dropdownContentBorderWidth: --awsui-dropdown-content-border-width-u09ddc;
+$dropdownContentBorderRadius: --awsui-dropdown-content-border-radius-u09ddc;
+$modalCustomWidth: --awsui-modal-custom-width-u09ddc;
+$modalCustomHeight: --awsui-modal-custom-height-u09ddc;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-u09ddc;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-u09ddc;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-u09ddc;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-u09ddc;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-u09ddc;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-u09ddc;
+$sliderLabelCount: --awsui-slider-label-count-u09ddc;
+$sliderTickCount: --awsui-slider-tick-count-u09ddc;
+$sliderReferenceColumn: --awsui-slider-reference-column-u09ddc;
+$sliderNextReferenceColumn: --awsui-slider-next-reference-column-u09ddc;
+$sliderMaxStart: --awsui-slider-max-start-u09ddc;
+$sliderMinEnd: --awsui-slider-min-end-u09ddc;
+$sliderRangeInlineSize: --awsui-slider-range-inline-size-u09ddc;
+$sliderTooltipPosition: --awsui-slider-tooltip-position-u09ddc;
+$togglesLeftWidth: --awsui-toggles-left-width-u09ddc;
+$togglesRightWidth: --awsui-toggles-right-width-u09ddc;
+$promptInputMaxRows: --awsui-prompt-input-max-rows-u09ddc;
+$promptInputScrollHeight: --awsui-prompt-input-scroll-height-u09ddc;
+$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-u09ddc;
+$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-u09ddc;
+$styleBackgroundActive: --awsui-style-background-active-u09ddc;
+$styleBackgroundDefault: --awsui-style-background-default-u09ddc;
+$styleBackgroundDisabled: --awsui-style-background-disabled-u09ddc;
+$styleBackgroundHover: --awsui-style-background-hover-u09ddc;
+$styleBorderColorActive: --awsui-style-border-color-active-u09ddc;
+$styleBorderColorDefault: --awsui-style-border-color-default-u09ddc;
+$styleBorderColorDisabled: --awsui-style-border-color-disabled-u09ddc;
+$styleBorderColorHover: --awsui-style-border-color-hover-u09ddc;
+$styleColorActive: --awsui-style-color-active-u09ddc;
+$styleColorDefault: --awsui-style-color-default-u09ddc;
+$styleColorDisabled: --awsui-style-color-disabled-u09ddc;
+$styleColorHover: --awsui-style-color-hover-u09ddc;
+$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-u09ddc;
+$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-u09ddc;
+$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-u09ddc;
+$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-u09ddc;
+$styleBoxShadowActive: --awsui-style-box-shadow-active-u09ddc;
+$styleBoxShadowDefault: --awsui-style-box-shadow-default-u09ddc;
+$styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-u09ddc;
+$styleBoxShadowHover: --awsui-style-box-shadow-hover-u09ddc;
+$styleBackgroundReadonly: --awsui-style-background-readonly-u09ddc;
+$styleBorderColorReadonly: --awsui-style-border-color-readonly-u09ddc;
+$styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-u09ddc;
+$styleColorReadonly: --awsui-style-color-readonly-u09ddc;
+$styleBackgroundFocus: --awsui-style-background-focus-u09ddc;
+$styleBorderColorFocus: --awsui-style-border-color-focus-u09ddc;
+$styleBoxShadowFocus: --awsui-style-box-shadow-focus-u09ddc;
+$styleColorFocus: --awsui-style-color-focus-u09ddc;
+$stylePlaceholderColor: --awsui-style-placeholder-color-u09ddc;
+$stylePlaceholderFontSize: --awsui-style-placeholder-font-size-u09ddc;
+$stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-u09ddc;
+$stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-u09ddc;
+$styleTabsActiveIndicatorColor: --awsui-style-tabs-active-indicator-color-u09ddc;
+$styleTabsActiveIndicatorWidth: --awsui-style-tabs-active-indicator-width-u09ddc;
+$styleTabsActiveIndicatorBorderRadius: --awsui-style-tabs-active-indicator-border-radius-u09ddc;
+$styleTabsSeparatorColor: --awsui-style-tabs-separator-color-u09ddc;
+$styleTabsSeparatorWidth: --awsui-style-tabs-separator-width-u09ddc;
+$alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-u09ddc;
+$alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-u09ddc;
+$alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-u09ddc;
+$alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-u09ddc;
+$alertIconColor: --awsui-alert-icon-color-u09ddc;
+$promptInputStyleBackgroundDefault: --awsui-prompt-input-style-background-default-u09ddc;
+$promptInputStyleBackgroundDisabled: --awsui-prompt-input-style-background-disabled-u09ddc;
+$promptInputStyleBackgroundFocus: --awsui-prompt-input-style-background-focus-u09ddc;
+$promptInputStyleBackgroundHover: --awsui-prompt-input-style-background-hover-u09ddc;
+$promptInputStyleBackgroundReadonly: --awsui-prompt-input-style-background-readonly-u09ddc;
+$promptInputStyleBorderColorDefault: --awsui-prompt-input-style-border-color-default-u09ddc;
+$promptInputStyleBorderColorDisabled: --awsui-prompt-input-style-border-color-disabled-u09ddc;
+$promptInputStyleBorderColorFocus: --awsui-prompt-input-style-border-color-focus-u09ddc;
+$promptInputStyleBorderColorHover: --awsui-prompt-input-style-border-color-hover-u09ddc;
+$promptInputStyleBorderColorReadonly: --awsui-prompt-input-style-border-color-readonly-u09ddc;
+$promptInputStyleBoxShadowDefault: --awsui-prompt-input-style-box-shadow-default-u09ddc;
+$promptInputStyleBoxShadowDisabled: --awsui-prompt-input-style-box-shadow-disabled-u09ddc;
+$promptInputStyleBoxShadowFocus: --awsui-prompt-input-style-box-shadow-focus-u09ddc;
+$promptInputStyleBoxShadowHover: --awsui-prompt-input-style-box-shadow-hover-u09ddc;
+$promptInputStyleBoxShadowReadonly: --awsui-prompt-input-style-box-shadow-readonly-u09ddc;
+$promptInputStyleColorDefault: --awsui-prompt-input-style-color-default-u09ddc;
+$promptInputStyleColorDisabled: --awsui-prompt-input-style-color-disabled-u09ddc;
+$promptInputStyleColorFocus: --awsui-prompt-input-style-color-focus-u09ddc;
+$promptInputStyleColorHover: --awsui-prompt-input-style-color-hover-u09ddc;
+$promptInputStyleColorReadonly: --awsui-prompt-input-style-color-readonly-u09ddc;
+$promptInputStylePlaceholderColor: --awsui-prompt-input-style-placeholder-color-u09ddc;
+$promptInputStylePlaceholderFontSize: --awsui-prompt-input-style-placeholder-font-size-u09ddc;
+$promptInputStylePlaceholderFontStyle: --awsui-prompt-input-style-placeholder-font-style-u09ddc;
+$promptInputStylePlaceholderFontWeight: --awsui-prompt-input-style-placeholder-font-weight-u09ddc;
+$progressBarBackgroundColor: --awsui-progress-bar-background-color-u09ddc;
+$progressBarBorderRadius: --awsui-progress-bar-border-radius-u09ddc;
+$progressBarHeight: --awsui-progress-bar-height-u09ddc;
+$progressValueBackgroundColor: --awsui-progress-value-background-color-u09ddc;
+$styleSliderTrackBackgroundColor: --awsui-style-slider-track-background-color-u09ddc;
+$styleSliderRangeBackgroundDefault: --awsui-style-slider-range-background-default-u09ddc;
+$styleSliderRangeBackgroundActive: --awsui-style-slider-range-background-active-u09ddc;
+$styleSliderHandleBackgroundDefault: --awsui-style-slider-handle-background-default-u09ddc;
+$styleSliderHandleBackgroundHover: --awsui-style-slider-handle-background-hover-u09ddc;
+$styleSliderHandleBackgroundActive: --awsui-style-slider-handle-background-active-u09ddc;
+$styleSliderHandleBorderRadius: --awsui-style-slider-handle-border-radius-u09ddc;
+$tokenStyleBackgroundDefault: --awsui-token-style-background-default-u09ddc;
+$tokenStyleBackgroundDisabled: --awsui-token-style-background-disabled-u09ddc;
+$tokenStyleBackgroundReadOnly: --awsui-token-style-background-read-only-u09ddc;
+$tokenStyleBorderColorDefault: --awsui-token-style-border-color-default-u09ddc;
+$tokenStyleBorderColorDisabled: --awsui-token-style-border-color-disabled-u09ddc;
+$tokenStyleBorderColorReadOnly: --awsui-token-style-border-color-read-only-u09ddc;
+$tokenStyleDismissColorDefault: --awsui-token-style-dismiss-color-default-u09ddc;
+$tokenStyleDismissColorDisabled: --awsui-token-style-dismiss-color-disabled-u09ddc;
+$tokenStyleDismissColorHover: --awsui-token-style-dismiss-color-hover-u09ddc;
+$tokenStyleDismissColorReadOnly: --awsui-token-style-dismiss-color-read-only-u09ddc;