@cloudscape-design/components-themeable 3.0.1333 → 3.0.1335

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "0404a6355e2e8056d2df2fc4096395b0d1588e1b"
+  "commit": "e9c0c768093476a4787def17cd3f7cfceb8231ba"
 }

package/lib/internal/scss/box/visual-accent.scss

@@ -4,7 +4,6 @@
 */
 
 @use 'sass:map';
-@use 'sass:meta';
 @use '../internal/styles/tokens' as awsui;
 
 // T-shirt size keywords mirror the Box spacing scale (see spacing.scss).
@@ -85,33 +84,70 @@ $accent-radii: (
 // stylesheet source order. Winning here preserves the guaranteed background/foreground color
 // contrast of the accent pair. Descendants (nested Box, Icon) inherit this color.
 //
-// Token variables are looked up dynamically from the tokens module, so adding a color only
-// requires extending `$accent-colors`.
+// Keep literal token references in this map so the style build can discover every token and emit
+// its mode-specific custom property declarations.
 $accent-colors: (
-  'red',
-  'yellow',
-  'indigo',
-  'green',
-  'orange',
-  'purple',
-  'mint',
-  'lime',
-  'grey',
-  'teal',
-  'cyan',
-  'blue',
-  'violet',
-  'fuchsia',
-  'magenta',
-  'pink',
-  'rose',
-  'amber'
+  'red': (
+    background: awsui.$color-background-visual-accent-red,
+    foreground: awsui.$color-text-visual-accent-red,
+  ),
+  'yellow': (
+    background: awsui.$color-background-visual-accent-yellow,
+    foreground: awsui.$color-text-visual-accent-yellow,
+  ),
+  'indigo': (
+    background: awsui.$color-background-visual-accent-indigo,
+    foreground: awsui.$color-text-visual-accent-indigo,
+  ),
+  'green': (
+    background: awsui.$color-background-visual-accent-green,
+    foreground: awsui.$color-text-visual-accent-green,
+  ),
+  'orange': (
+    background: awsui.$color-background-visual-accent-orange,
+    foreground: awsui.$color-text-visual-accent-orange,
+  ),
+  'purple': (
+    background: awsui.$color-background-visual-accent-purple,
+    foreground: awsui.$color-text-visual-accent-purple,
+  ),
+  'lime': (
+    background: awsui.$color-background-visual-accent-lime,
+    foreground: awsui.$color-text-visual-accent-lime,
+  ),
+  'grey': (
+    background: awsui.$color-background-visual-accent-grey,
+    foreground: awsui.$color-text-visual-accent-grey,
+  ),
+  'teal': (
+    background: awsui.$color-background-visual-accent-teal,
+    foreground: awsui.$color-text-visual-accent-teal,
+  ),
+  'blue': (
+    background: awsui.$color-background-visual-accent-blue,
+    foreground: awsui.$color-text-visual-accent-blue,
+  ),
+  'violet': (
+    background: awsui.$color-background-visual-accent-violet,
+    foreground: awsui.$color-text-visual-accent-violet,
+  ),
+  'magenta': (
+    background: awsui.$color-background-visual-accent-magenta,
+    foreground: awsui.$color-text-visual-accent-magenta,
+  ),
+  'pink': (
+    background: awsui.$color-background-visual-accent-pink,
+    foreground: awsui.$color-text-visual-accent-pink,
+  ),
+  'amber': (
+    background: awsui.$color-background-visual-accent-amber,
+    foreground: awsui.$color-text-visual-accent-amber,
+  ),
 );
-$tokens: meta.module-variables('awsui');
 
-@each $accent in $accent-colors {
+@each $accent, $colors in $accent-colors {
   .box.visual-accent.visual-accent-#{$accent} {
-    background-color: map.get($tokens, 'color-background-accent-#{$accent}');
-    color: map.get($tokens, 'color-text-accent-#{$accent}');
+    background-color: map.get($colors, 'background');
+    color: map.get($colors, 'foreground');
   }
 }

package/lib/internal/scss/button/styles.scss

@@ -148,6 +148,12 @@
     border-inline-width: 0;
   }
 
+  &.button-compact {
+    padding-block: 0;
+    border-block-width: 0;
+    border-inline-width: 0;
+  }
+
   &.variant-inline-icon-pointer-target {
     padding-block: awsui.$space-xxxs;
     border-block-width: 0;

package/lib/internal/scss/code-editor/ace-editor.scss

@@ -20,7 +20,7 @@
 }
 
 .code-editor :global .ace_editor {
-  font-family: Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace;
+  font-family: awsui.$font-family-monospace;
   font-size: 14px;
   line-height: 20px;
 

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "0404a635";
+    $awsui-commit-hash: "e9c0c768";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-esndbs;
 $minContentWidth: --awsui-min-content-width-esndbs;

package/lib/internal/scss/side-navigation/styles.scss

@@ -9,7 +9,8 @@
 
 // ==========================================================================
 // Item sizing — single source of truth for navigation density.
-// Adjust awsui.$size-side-navigation-item-height and awsui.$space-side-navigation-item-gap/awsui.$space-side-navigation-item-collapsed-gap to scale all items uniformly.
+// Adjust awsui.$size-side-navigation-item-height and the item gap tokens
+// (awsui.$space-side-navigation-item-default-gap / awsui.$space-side-navigation-item-icon-gap) to scale all items uniformly.
 // ==========================================================================
 $item-icon-text-gap: awsui.$space-xs;
 // Padding is calculated to be able to horizontally align items without having to use align-items: center for wrapping
@@ -147,17 +148,23 @@ $expandable-icon-negative-margin: awsui.$space-l;
 // ==========================================================================
 .list-item {
   margin-inline: 0;
-  margin-block: awsui.$space-side-navigation-item-gap;
+  margin-block: awsui.$space-side-navigation-item-default-gap;
   padding-block: 0;
   padding-inline: $item-padding-inline;
   list-style: none;
+
+  // When any top-level item has an icon, use the wider icon gap between items.
+  .list--with-icons > & {
+    margin-block: awsui.$space-side-navigation-item-icon-gap;
+  }
+
   // Remove margin from first item in side nav, outer block margins are covered by list-container
   .list-variant-root--first > &:first-child {
     margin-block-start: 0px;
   }
 
   &--collapsed {
-    margin-block: awsui.$space-side-navigation-item-collapsed-gap;
+    margin-block: awsui.$space-side-navigation-item-icon-gap;
     display: flex;
     justify-content: center;
     padding-block: 0;

package/lib/internal/scss/steps/styles.scss

@@ -13,6 +13,10 @@
   background-color: transparent;
 }
 
+.header {
+  /* used in test-utils */
+}
+
 .root {
   @include styles.styles-reset;
   @include styles.text-wrapping;
@@ -27,7 +31,13 @@
       grid-template-columns: awsui.$space-static-l 1fr;
       grid-template-rows: minmax(awsui.$space-static-l, auto);
 
-      > .header {
+      > .annotation {
+        justify-self: flex-end;
+        min-inline-size: 0;
+        color: awsui.$color-text-status-inactive;
+      }
+
+      > .step-layout {
         display: flex;
         gap: awsui.$space-xxs;
         grid-row: 1;
@@ -40,23 +50,6 @@
         grid-column: 2;
         margin-block-end: awsui.$space-static-xs;
       }
-
-      > .connector {
-        grid-row: 2;
-        grid-column: 1;
-        margin-block: 0;
-        border-block: 0;
-        border-inline: 0;
-        inline-size: awsui.$border-divider-list-width;
-        block-size: auto;
-        min-block-size: awsui.$space-static-xs;
-        position: relative;
-        inset-inline-end: awsui.$space-static-xxxs;
-      }
-    }
-
-    > :last-of-type > .connector {
-      display: none;
     }
 
     &.custom > .details {
@@ -71,18 +64,26 @@
     display: grid;
     align-items: flex-start;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    // Shared rows: annotation | icon and connector | header and details.
+    grid-template-rows: auto minmax(awsui.$space-static-l, auto) auto;
     grid-auto-flow: column;
 
     > .container {
-      display: grid;
-      grid-template-columns: awsui.$space-static-l 1fr;
-      grid-template-rows: minmax(awsui.$space-static-l, auto);
+      // Spanning the subgrid rows keeps steps with different-height annotations aligned.
+      grid-row: 1 / -1;
+      grid-template-rows: subgrid;
       align-items: center;
 
-      > .header {
-        display: flex;
+      > .annotation {
+        justify-self: flex-start;
+        align-self: flex-end;
         grid-row: 1;
         grid-column: 1 / span 2;
+        padding-inline-end: awsui.$space-xs;
+      }
+
+      > .step-layout {
+        grid-row: 2;
         align-items: center;
 
         > .connector {
@@ -101,27 +102,68 @@
         }
       }
 
-      > .horizontal-header {
-        grid-row: 2;
-        grid-column: 1 / span 3;
-        padding-inline-end: awsui.$space-xs;
-      }
-
-      > .details {
+      > .content {
+        align-self: flex-start;
         grid-row: 3;
         grid-column: 1 / span 3;
+        min-inline-size: 0;
         padding-inline-end: awsui.$space-xs;
+
+        > .details {
+          margin-block-end: awsui.$space-static-xs;
+        }
       }
     }
 
     > .container:last-child {
-      > .header > .connector {
+      > .step-layout > .connector {
         display: none;
       }
     }
   }
 }
 
+.vertical {
+  > .list {
+    // A single connector fills extra annotation/details height and provides the default spacing otherwise.
+    > .container > .step-layout {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-template-rows: auto 1fr;
+      gap: 0;
+
+      > :first-child {
+        grid-column: 1 / -1;
+      }
+
+      > .details {
+        grid-row: 2;
+        grid-column: 2;
+        margin-block-end: awsui.$space-static-xs;
+      }
+
+      > .connector-continuation {
+        grid-row: 2;
+        grid-column: 1;
+        justify-self: center;
+        margin-block: 0;
+        margin-inline: 0;
+        border-block: 0;
+        border-inline: 0;
+        inline-size: awsui.$border-divider-list-width;
+        block-size: auto;
+        min-block-size: awsui.$space-static-xs;
+        position: relative;
+        inset-inline-end: awsui.$space-static-xxxs;
+      }
+    }
+
+    > :last-of-type > .step-layout > .connector-continuation {
+      display: none;
+    }
+  }
+}
+
 // Vertical custom steps: a column-1 "rail" stacks the icon above a connector that grows to fill
 // the full height of the step (header + details), keeping the vertical line continuous and
 // connecting consecutive steps regardless of header height. Placed after `.horizontal` so
@@ -156,6 +198,46 @@
   }
 }
 
+// Shared columns via subgrid: widest annotation | icon and connector | remaining content.
+.root > .list.with-annotation {
+  display: grid;
+  grid-template-columns: fit-content(50%) awsui.$space-static-l 1fr;
+
+  > .container {
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+
+    > .annotation {
+      grid-row: 1;
+      grid-column: 1;
+      padding-inline-end: awsui.$space-xxs;
+    }
+  }
+
+  // The step layout spans the icon and content columns.
+  > .container:not(.custom-vertical) {
+    > .step-layout {
+      grid-column: 2 / span 2;
+    }
+
+    > .details {
+      grid-column: 3;
+    }
+  }
+
+  // Custom DOM: rail in the icon column, header and details in the content column.
+  > .container.custom-vertical {
+    > .rail {
+      grid-column: 2;
+    }
+
+    > .content {
+      grid-column: 3;
+    }
+  }
+}
+
+// Hide the connector after the final custom/rail step. Placed last so its higher specificity
 .root > .list > .container.custom-vertical:last-of-type > .rail > .connector {
   display: none;
 }

package/lib/internal/scss/table/header-cell/styles.scss

@@ -150,6 +150,15 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   color: awsui.$color-text-column-sorting-icon;
 }
 
+.header-cell-main {
+  /* When the wrapper is present without a sort menu, behave as if it weren't there. */
+  display: contents;
+}
+
+.sort-priority-badge {
+  margin-inline-end: awsui.$space-xxs;
+}
+
 .edit-icon {
   margin-inline-start: awsui.$space-xxs;
   margin-block-start: awsui.$space-scaled-xxs;
@@ -162,15 +171,10 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   padding-inline-end: awsui.$space-s;
   @include cell-offset(awsui.$space-s);
 
-  .header-cell-group > &,
-  .header-cell-grouped > &,
-  .header-cell-spans-rows > & {
+  .header-cell-group > & {
     padding-block: awsui.$space-xxxs;
   }
 
-  .header-cell-sortable > & {
-    padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
-  }
   &:focus {
     outline: none;
     text-decoration: none;
@@ -178,18 +182,44 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
 
   @include header-cell-focus-outline(awsui.$space-table-header-focus-outline-gutter);
 
-  .header-cell-disabled.header-cell-sorted > & {
+  .header-cell-grouped > .header-cell-main > &,
+  .header-cell-spans-rows > .header-cell-main > & {
+    padding-block: awsui.$space-xxxs;
+  }
+
+  .header-cell-sortable > .header-cell-main > & {
+    padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
+  }
+
+  // The multi-sort priority badge renders alongside the sort arrow inside the
+  // absolutely-positioned sort icon. Reserve extra inline-end space for it so it
+  // does not overlap long, non-truncated header text (e.g. resizable columns off).
+  .header-cell-sortable > .header-cell-main > &.header-cell-content-multi-sorted {
+    padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs} + #{awsui.$space-m});
+  }
+
+  .header-cell-disabled.header-cell-sorted > .header-cell-main > & {
     & > .sorting-icon {
       color: awsui.$color-text-interactive-disabled;
     }
   }
 }
 
+.header-cell-main-with-menu {
+  display: flex;
+  align-items: center;
+}
+
+.header-cell-content-with-menu {
+  flex-grow: 1;
+  min-inline-size: 0;
+}
+
 .header-cell-spans-rows {
   block-size: 100%;
   vertical-align: bottom;
 
-  > .header-cell-content {
+  > .header-cell-main > .header-cell-content {
     block-size: 100%;
     box-sizing: border-box;
     display: flex;
@@ -206,11 +236,9 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
 }
 
 .header-cell-sortable:not(.header-cell-disabled) {
-  & > .header-cell-content {
-    cursor: pointer;
-  }
-  & > .header-cell-content:hover,
-  &.header-cell-sorted > .header-cell-content {
+  cursor: pointer;
+  & > .header-cell-main > .header-cell-content:hover,
+  &.header-cell-sorted > .header-cell-main > .header-cell-content {
     color: awsui.$color-text-interactive-active;
     & > .sorting-icon {
       color: awsui.$color-text-interactive-active;
@@ -251,7 +279,7 @@ settings icon in the pagination slot.
   &:first-child {
     @include header-cell-focus-outline-first(awsui.$space-scaled-xxs);
   }
-  &:first-child:not(.header-cell-grouped):not(.header-cell-group) > .header-cell-content {
+  &:first-child:not(.header-cell-grouped):not(.header-cell-group) > .header-cell-main > .header-cell-content {
     @include cell-offset(0px);
     @include header-cell-focus-outline-first(awsui.$space-table-header-focus-outline-gutter);
   }

package/lib/internal/scss/table/styles.scss

@@ -37,6 +37,12 @@
     margin-inline-start: auto;
   }
 
+  &-clear-sort {
+    align-self: center;
+  }
+
+  &-clear-sort + &-pagination,
+  &-clear-sort + &-preferences,
   &-pagination + &-preferences {
     border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     box-sizing: border-box;

package/lib/internal/scss/tooltip/styles.scss

@@ -0,0 +1,22 @@
+/*
+ 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;
+
+.root {
+  @include styles.with-motion {
+    animation: awsui-motion-fade-in-tooltip awsui.$motion-duration-tooltip-enter awsui.$motion-easing-tooltip-enter;
+
+    @keyframes awsui-motion-fade-in-tooltip {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  }
+}

package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/index.js

@@ -35,7 +35,7 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals, bottomDr
                 }) },
                 React.createElement(InternalButton, { ariaLabel: navigationCollapsed
                         ? ((_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _b !== void 0 ? _b : undefined)
-                        : ((_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _c !== void 0 ? _c : undefined), ariaExpanded: navigationCollapsible && !isMobile ? navigationOpen : undefined, iconName: navigationCollapsed ? 'angle-right' : isMobile ? 'close' : 'angle-left', onClick: () => onNavigationToggle(!navigationOpen), variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: navigationFocusControl.refs.close, analyticsAction: navigationCollapsed ? 'open' : 'close' })),
+                        : ((_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _c !== void 0 ? _c : undefined), ariaExpanded: navigationCollapsible && !isMobile ? navigationOpen : undefined, iconName: navigationCollapsed ? 'angle-right' : isMobile ? 'close' : 'angle-left', onClick: () => onNavigationToggle(navigationCollapsible ? !navigationOpen : false), variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: navigationFocusControl.refs.close, analyticsAction: navigationCollapsed ? 'open' : 'close' })),
             navigation)));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../../button/internal';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  bottomDrawerReportedSize?: number;\n  navigationCollapsible?: boolean;\n}\n\nexport function AppLayoutNavigationImplementation({\n  appLayoutInternals,\n  bottomDrawerReportedSize,\n  navigationCollapsible,\n}: AppLayoutNavigationImplementationProps) {\n  const {\n    ariaLabels,\n    onNavigationToggle,\n    isMobile,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    placement,\n    verticalOffsets,\n  } = appLayoutInternals;\n\n  const { drawerTopOffset, drawerHeight } = getDrawerStyles(\n    verticalOffsets,\n    isMobile,\n    placement,\n    isMobile ? 0 : (bottomDrawerReportedSize ?? 0)\n  );\n\n  const navigationCollapsed = navigationCollapsible && !navigationOpen && !isMobile;\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(styles['navigation-container'], sharedStyles['with-motion-horizontal'], {\n        [styles['is-navigation-open']]: navigationOpen,\n        [styles['is-navigation-collapsed']]: navigationCollapsed,\n      })}\n      style={{\n        blockSize: drawerHeight,\n        insetBlockStart: drawerTopOffset,\n      }}\n    >\n      <nav\n        aria-label={ariaLabels?.navigation ?? undefined}\n        className={clsx(\n          styles.navigation,\n          {\n            [testutilStyles['drawer-closed']]: !navigationOpen,\n          },\n          testutilStyles.navigation\n        )}\n        aria-hidden={!navigationOpen && !navigationCollapsed}\n        onClick={onNavigationClick}\n      >\n        <div\n          className={clsx(styles['hide-navigation'], {\n            [styles['expand-navigation-toggle']]: navigationCollapsed,\n          })}\n        >\n          <InternalButton\n            ariaLabel={\n              navigationCollapsed\n                ? (ariaLabels?.navigationToggle ?? undefined)\n                : (ariaLabels?.navigationClose ?? undefined)\n            }\n            ariaExpanded={navigationCollapsible && !isMobile ? navigationOpen : undefined}\n            iconName={navigationCollapsed ? 'angle-right' : isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(!navigationOpen)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n            analyticsAction={navigationCollapsed ? 'open' : 'close'}\n          />\n        </div>\n        {navigation}\n      </nav>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../../button/internal';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  bottomDrawerReportedSize?: number;\n  navigationCollapsible?: boolean;\n}\n\nexport function AppLayoutNavigationImplementation({\n  appLayoutInternals,\n  bottomDrawerReportedSize,\n  navigationCollapsible,\n}: AppLayoutNavigationImplementationProps) {\n  const {\n    ariaLabels,\n    onNavigationToggle,\n    isMobile,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    placement,\n    verticalOffsets,\n  } = appLayoutInternals;\n\n  const { drawerTopOffset, drawerHeight } = getDrawerStyles(\n    verticalOffsets,\n    isMobile,\n    placement,\n    isMobile ? 0 : (bottomDrawerReportedSize ?? 0)\n  );\n\n  const navigationCollapsed = navigationCollapsible && !navigationOpen && !isMobile;\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(styles['navigation-container'], sharedStyles['with-motion-horizontal'], {\n        [styles['is-navigation-open']]: navigationOpen,\n        [styles['is-navigation-collapsed']]: navigationCollapsed,\n      })}\n      style={{\n        blockSize: drawerHeight,\n        insetBlockStart: drawerTopOffset,\n      }}\n    >\n      <nav\n        aria-label={ariaLabels?.navigation ?? undefined}\n        className={clsx(\n          styles.navigation,\n          {\n            [testutilStyles['drawer-closed']]: !navigationOpen,\n          },\n          testutilStyles.navigation\n        )}\n        aria-hidden={!navigationOpen && !navigationCollapsed}\n        onClick={onNavigationClick}\n      >\n        <div\n          className={clsx(styles['hide-navigation'], {\n            [styles['expand-navigation-toggle']]: navigationCollapsed,\n          })}\n        >\n          <InternalButton\n            ariaLabel={\n              navigationCollapsed\n                ? (ariaLabels?.navigationToggle ?? undefined)\n                : (ariaLabels?.navigationClose ?? undefined)\n            }\n            ariaExpanded={navigationCollapsible && !isMobile ? navigationOpen : undefined}\n            iconName={navigationCollapsed ? 'angle-right' : isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(navigationCollapsible ? !navigationOpen : false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n            analyticsAction={navigationCollapsed ? 'open' : 'close'}\n          />\n        </div>\n        {navigation}\n      </nav>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/box/interfaces.d.ts

@@ -188,7 +188,7 @@ export declare namespace BoxProps {
         borderRadius?: BoxProps.VisualAccent.BorderRadius;
     }
     namespace VisualAccent {
-        type Color = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'mint' | 'lime' | 'grey' | 'teal' | 'cyan' | 'blue' | 'violet' | 'fuchsia' | 'magenta' | 'pink' | 'rose' | 'amber';
+        type Color = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'lime' | 'grey' | 'teal' | 'blue' | 'violet' | 'magenta' | 'pink' | 'amber';
         type AspectRatio = 'auto' | 'equal';
         type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full';
     }

package/lib/internal/template/box/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/box/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/box/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/box/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/box/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../types/base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../types/native-attributes';\n\nexport interface BoxProps extends BaseComponentProps {\n  /**\n   * Defines the style of element to display.\n   *\n   * - If you set it to `'div'`, `'span'`, `'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'p'`, `'strong'`, `'small'`, `'code'`, `'pre'`, or `'samp'`, the variant is also used as the HTML tag name.\n   * - If you set it to `awsui-key-label`, the component will render a `div`,\n   *   styled for use as a key label in key-value pairs.\n   * - If you set it to `awsui-gen-ai-label`, the component will render a `div`,\n   *   styled for use as a label indicating that content is produced by generative AI.\n   * - If you set it to `awsui-value-large`, the component will render a `span`,\n   *   styled using \"Display large light\" typography.\n   * - If you set it to `awsui-inline-code`, the component will render a `code` element,\n   *   styled with a background and padding for inline code snippets.\n   *\n   * Override the HTML tag by using property `tagOverride`.\n   */\n  variant?: BoxProps.Variant;\n  /**\n   * Renders the box as a visual accent wrapper to emphasize its content.\n   *\n   * Setting this property activates the accent styling: a coordinated background and content\n   * color combination that works in both light and dark modes. A `variant` is not required to\n   * activate the accent. The accent styling is applied on top of the element determined by\n   * `variant` (or `tagOverride`), so the rendered HTML tag is unaffected.\n   *\n   * The object accepts the following fields:\n   * - `color` (required) — the coordinated background and foreground color pair. The foreground\n   *   color is applied as the wrapper's CSS `color`, so it only affects content that inherits\n   *   the current color (for example an `Icon`, or a nested `Box` with `color=\"inherit\"`).\n   *   Content that sets its own color is not overridden.\n   * - `aspectRatio` — `auto` (default) lets the wrapper's width follow its content;\n   *   `equal` forces equal width and height, suitable for wrapping icons.\n   * - `borderRadius` — the corner rounding applied to the wrapper, using a t-shirt size keyword\n   *   from the Box spacing scale (`xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`), or\n   *   `full` for fully rounded corners. When not set, the wrapper has no border radius. Set it to\n   *   `full` together with `aspectRatio: 'equal'` to render a circle.\n   *\n   * Composes with existing Box props such as `padding` and `margin`.\n   */\n  visualAccent?: BoxProps.VisualAccent;\n  /**\n   * Overrides the default HTML tag provided by the variant.\n   */\n  tagOverride?: string;\n  /**\n   * Overrides the display of the element. You can set it to the following values:\n   *\n   * - `block` - Specifies block display.\n   * - `inline` - Specifies inline display.\n   * - `inline-block` - Specifies inline-block display.\n   * - `none` - Hides the box.\n   *\n   * Note: If you don't set it, the display depends on the variant.\n   */\n  display?: BoxProps.Display;\n  /**\n   * Adds margins to the element. It can be the following:\n   *\n   * - A single string with a size. This applies the same margin to all sides (that is, top, right, bottom, left).\n   * - An object specifying the size of the margin per side. The object has the following format:\n   * ```\n   * {\n   *   top: \"size of top margin\",\n   *   right: \"size of right margin\",\n   *   bottom: \"size of bottom margin\",\n   *   left: \"size of left margin\",\n   *   horizontal: \"size of left and right margin\",\n   *   vertical: \"size of top and bottom margin\",\n   * }\n   * ```\n   *\n   * The size can be `n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, where `n` stands for none.\n   * Sizes are automatically scaled down in compact mode.\n   *\n   *  For example, `margin=\"s\"` adds a small margin to all sides.\n   * `margin={{ right: \"l\", bottom: \"s\" }}` adds a small margin to the bottom and a large margin to the right.\n   */\n  margin?: BoxProps.SpacingSize | BoxProps.Spacing;\n  /**\n   * Adds padding to the element. It can be the following:\n   *\n   * - A single string with a size. This applies the same padding to all sides (that is, top, right, bottom, left).\n   * - An object specifying the size of padding per side. The object has the following format:\n   * ```\n   * {\n   *   top: \"size of top padding\",\n   *   right: \"size of right padding\",\n   *   bottom: \"size of bottom padding\",\n   *   left: \"size of left padding\",\n   *   horizontal: \"size of left and right padding\",\n   *   vertical: \"size of top and bottom padding\",\n   * }\n   * ```\n   *\n   * The size can be `n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, where `n` stands for none.\n   * Sizes are automatically scaled down in compact mode.\n   *\n   *  For example, `padding=\"s\"` adds small padding to all sides.\n   * `padding={{ right: \"l\", bottom: \"s\" }}` adds small padding to the bottom and large padding to the right.\n   */\n  padding?: BoxProps.SpacingSize | BoxProps.Spacing;\n  /**\n   * Defines the text alignment within the element. You can set it to `left`, `center`, or `right`.\n   */\n  textAlign?: BoxProps.TextAlign;\n  /**\n   * Defines the floating behavior. You can set it to `left` or `right`.\n   */\n  float?: BoxProps.Float;\n  /**\n   * Overrides the font size and line height. If not set, the font size and line height depend on the variant.\n   */\n  fontSize?: BoxProps.FontSize;\n  /**\n   * Overrides the font weight. If not set, the value depends on the variant.\n   * @visualrefresh 'heavy'\n   */\n  fontWeight?: BoxProps.FontWeight;\n  /**\n   * Overrides the text color. You can set it to the following values:\n   *\n   * - `inherit` - Inherits the color from the parent element. For example, use this to style content\n   *      in Flashbars and to style the `empty` and `noMatch` slots of the Table and Cards components.\n   * - `text-label` - Specifies the text color for non-form labels. For example, use it for the key in key/value pairs.\n   * - `text-body-secondary` - Specifies the color for secondary text.\n   * - `text-status-error` - Specifies the color for error text and icons.\n   * - `text-status-success` - Specifies the color for success text and icons.\n   * - `text-status-info` - Specifies the color for info text and icon.\n   * - `text-status-inactive` - Specifies the color for inactive and loading text and icons.\n   * - `text-status-warning` - Specifies the color for warning text and icons.\n   *\n   * Note: If you don't set it, the text color depends on the variant.\n   */\n  color?: BoxProps.Color;\n  /**\n   * Content of the box.\n   * @displayname content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Attributes to add to the native element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport namespace BoxProps {\n  export type Variant =\n    | 'div'\n    | 'span'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'p'\n    | 'strong'\n    | 'small'\n    | 'code'\n    | 'pre'\n    | 'samp'\n    | 'awsui-key-label'\n    | 'awsui-gen-ai-label'\n    | 'awsui-value-large'\n    | 'awsui-inline-code';\n\n  export interface VisualAccent {\n    /**\n     * The coordinated background and foreground color pair applied to the accent wrapper.\n     * Each color works in both light and dark modes.\n     *\n     * The background color is applied directly to the wrapper. The foreground color is applied\n     * as the wrapper's CSS `color` and is therefore only picked up by content that inherits the\n     * current color, such as an `Icon` or a nested `Box` with `color=\"inherit\"`. Content that\n     * defines its own color (for example a `Box` with an explicit `color`, or a `Link`) keeps that\n     * color and is not recolored by the accent.\n     */\n    color: BoxProps.VisualAccent.Color;\n    /**\n     * Controls the aspect ratio of the accent wrapper.\n     *\n     * - `auto` (default) — the wrapper's width follows its content.\n     * - `equal` — the wrapper has equal width and height, suitable for wrapping icons.\n     *\n     * Combine `aspectRatio: 'equal'` with `borderRadius: 'full'` to render a circle.\n     */\n    aspectRatio?: BoxProps.VisualAccent.AspectRatio;\n    /**\n     * The corner rounding applied to the accent wrapper. When not set, the wrapper has no\n     * border radius.\n     *\n     * Use one of the curated t-shirt size keywords, which map to the same spacing scale used by\n     * `padding` and `margin`: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, or `xxxl`. Use\n     * `full` for fully rounded corners; combine it with `aspectRatio: 'equal'` to render a circle.\n     */\n    borderRadius?: BoxProps.VisualAccent.BorderRadius;\n  }\n\n  export namespace VisualAccent {\n    export type Color =\n      | 'red'\n      | 'yellow'\n      | 'indigo'\n      | 'green'\n      | 'orange'\n      | 'purple'\n      | 'mint'\n      | 'lime'\n      | 'grey'\n      | 'teal'\n      | 'cyan'\n      | 'blue'\n      | 'violet'\n      | 'fuchsia'\n      | 'magenta'\n      | 'pink'\n      | 'rose'\n      | 'amber';\n    export type AspectRatio = 'auto' | 'equal';\n    export type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full';\n  }\n\n  export type Display = 'block' | 'inline' | 'inline-block' | 'none';\n  export type TextAlign = 'left' | 'center' | 'right';\n  export type Float = 'left' | 'right';\n  export type FontSize =\n    | 'body-s'\n    | 'body-m'\n    | 'heading-xs'\n    | 'heading-s'\n    | 'heading-m'\n    | 'heading-l'\n    | 'heading-xl'\n    | 'display-l'\n    | 'display-xl';\n  export type FontWeight = 'light' | 'normal' | 'bold' | 'heavy';\n  export type Color =\n    | 'inherit'\n    | 'text-label'\n    | 'text-body-secondary'\n    | 'text-status-error'\n    | 'text-status-success'\n    | 'text-status-info'\n    | 'text-status-inactive'\n    | 'text-status-warning';\n  export type SpacingSize = 'n' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';\n  export interface Spacing {\n    top?: BoxProps.SpacingSize;\n    right?: BoxProps.SpacingSize;\n    bottom?: BoxProps.SpacingSize;\n    left?: BoxProps.SpacingSize;\n    horizontal?: BoxProps.SpacingSize;\n    vertical?: BoxProps.SpacingSize;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/box/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../types/base-component';\n/**\n * @awsuiSystem core\n */\nimport { NativeAttributes } from '../types/native-attributes';\n\nexport interface BoxProps extends BaseComponentProps {\n  /**\n   * Defines the style of element to display.\n   *\n   * - If you set it to `'div'`, `'span'`, `'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'p'`, `'strong'`, `'small'`, `'code'`, `'pre'`, or `'samp'`, the variant is also used as the HTML tag name.\n   * - If you set it to `awsui-key-label`, the component will render a `div`,\n   *   styled for use as a key label in key-value pairs.\n   * - If you set it to `awsui-gen-ai-label`, the component will render a `div`,\n   *   styled for use as a label indicating that content is produced by generative AI.\n   * - If you set it to `awsui-value-large`, the component will render a `span`,\n   *   styled using \"Display large light\" typography.\n   * - If you set it to `awsui-inline-code`, the component will render a `code` element,\n   *   styled with a background and padding for inline code snippets.\n   *\n   * Override the HTML tag by using property `tagOverride`.\n   */\n  variant?: BoxProps.Variant;\n  /**\n   * Renders the box as a visual accent wrapper to emphasize its content.\n   *\n   * Setting this property activates the accent styling: a coordinated background and content\n   * color combination that works in both light and dark modes. A `variant` is not required to\n   * activate the accent. The accent styling is applied on top of the element determined by\n   * `variant` (or `tagOverride`), so the rendered HTML tag is unaffected.\n   *\n   * The object accepts the following fields:\n   * - `color` (required) — the coordinated background and foreground color pair. The foreground\n   *   color is applied as the wrapper's CSS `color`, so it only affects content that inherits\n   *   the current color (for example an `Icon`, or a nested `Box` with `color=\"inherit\"`).\n   *   Content that sets its own color is not overridden.\n   * - `aspectRatio` — `auto` (default) lets the wrapper's width follow its content;\n   *   `equal` forces equal width and height, suitable for wrapping icons.\n   * - `borderRadius` — the corner rounding applied to the wrapper, using a t-shirt size keyword\n   *   from the Box spacing scale (`xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`), or\n   *   `full` for fully rounded corners. When not set, the wrapper has no border radius. Set it to\n   *   `full` together with `aspectRatio: 'equal'` to render a circle.\n   *\n   * Composes with existing Box props such as `padding` and `margin`.\n   */\n  visualAccent?: BoxProps.VisualAccent;\n  /**\n   * Overrides the default HTML tag provided by the variant.\n   */\n  tagOverride?: string;\n  /**\n   * Overrides the display of the element. You can set it to the following values:\n   *\n   * - `block` - Specifies block display.\n   * - `inline` - Specifies inline display.\n   * - `inline-block` - Specifies inline-block display.\n   * - `none` - Hides the box.\n   *\n   * Note: If you don't set it, the display depends on the variant.\n   */\n  display?: BoxProps.Display;\n  /**\n   * Adds margins to the element. It can be the following:\n   *\n   * - A single string with a size. This applies the same margin to all sides (that is, top, right, bottom, left).\n   * - An object specifying the size of the margin per side. The object has the following format:\n   * ```\n   * {\n   *   top: \"size of top margin\",\n   *   right: \"size of right margin\",\n   *   bottom: \"size of bottom margin\",\n   *   left: \"size of left margin\",\n   *   horizontal: \"size of left and right margin\",\n   *   vertical: \"size of top and bottom margin\",\n   * }\n   * ```\n   *\n   * The size can be `n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, where `n` stands for none.\n   * Sizes are automatically scaled down in compact mode.\n   *\n   *  For example, `margin=\"s\"` adds a small margin to all sides.\n   * `margin={{ right: \"l\", bottom: \"s\" }}` adds a small margin to the bottom and a large margin to the right.\n   */\n  margin?: BoxProps.SpacingSize | BoxProps.Spacing;\n  /**\n   * Adds padding to the element. It can be the following:\n   *\n   * - A single string with a size. This applies the same padding to all sides (that is, top, right, bottom, left).\n   * - An object specifying the size of padding per side. The object has the following format:\n   * ```\n   * {\n   *   top: \"size of top padding\",\n   *   right: \"size of right padding\",\n   *   bottom: \"size of bottom padding\",\n   *   left: \"size of left padding\",\n   *   horizontal: \"size of left and right padding\",\n   *   vertical: \"size of top and bottom padding\",\n   * }\n   * ```\n   *\n   * The size can be `n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, where `n` stands for none.\n   * Sizes are automatically scaled down in compact mode.\n   *\n   *  For example, `padding=\"s\"` adds small padding to all sides.\n   * `padding={{ right: \"l\", bottom: \"s\" }}` adds small padding to the bottom and large padding to the right.\n   */\n  padding?: BoxProps.SpacingSize | BoxProps.Spacing;\n  /**\n   * Defines the text alignment within the element. You can set it to `left`, `center`, or `right`.\n   */\n  textAlign?: BoxProps.TextAlign;\n  /**\n   * Defines the floating behavior. You can set it to `left` or `right`.\n   */\n  float?: BoxProps.Float;\n  /**\n   * Overrides the font size and line height. If not set, the font size and line height depend on the variant.\n   */\n  fontSize?: BoxProps.FontSize;\n  /**\n   * Overrides the font weight. If not set, the value depends on the variant.\n   * @visualrefresh 'heavy'\n   */\n  fontWeight?: BoxProps.FontWeight;\n  /**\n   * Overrides the text color. You can set it to the following values:\n   *\n   * - `inherit` - Inherits the color from the parent element. For example, use this to style content\n   *      in Flashbars and to style the `empty` and `noMatch` slots of the Table and Cards components.\n   * - `text-label` - Specifies the text color for non-form labels. For example, use it for the key in key/value pairs.\n   * - `text-body-secondary` - Specifies the color for secondary text.\n   * - `text-status-error` - Specifies the color for error text and icons.\n   * - `text-status-success` - Specifies the color for success text and icons.\n   * - `text-status-info` - Specifies the color for info text and icon.\n   * - `text-status-inactive` - Specifies the color for inactive and loading text and icons.\n   * - `text-status-warning` - Specifies the color for warning text and icons.\n   *\n   * Note: If you don't set it, the text color depends on the variant.\n   */\n  color?: BoxProps.Color;\n  /**\n   * Content of the box.\n   * @displayname content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Attributes to add to the native element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport namespace BoxProps {\n  export type Variant =\n    | 'div'\n    | 'span'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'p'\n    | 'strong'\n    | 'small'\n    | 'code'\n    | 'pre'\n    | 'samp'\n    | 'awsui-key-label'\n    | 'awsui-gen-ai-label'\n    | 'awsui-value-large'\n    | 'awsui-inline-code';\n\n  export interface VisualAccent {\n    /**\n     * The coordinated background and foreground color pair applied to the accent wrapper.\n     * Each color works in both light and dark modes.\n     *\n     * The background color is applied directly to the wrapper. The foreground color is applied\n     * as the wrapper's CSS `color` and is therefore only picked up by content that inherits the\n     * current color, such as an `Icon` or a nested `Box` with `color=\"inherit\"`. Content that\n     * defines its own color (for example a `Box` with an explicit `color`, or a `Link`) keeps that\n     * color and is not recolored by the accent.\n     */\n    color: BoxProps.VisualAccent.Color;\n    /**\n     * Controls the aspect ratio of the accent wrapper.\n     *\n     * - `auto` (default) — the wrapper's width follows its content.\n     * - `equal` — the wrapper has equal width and height, suitable for wrapping icons.\n     *\n     * Combine `aspectRatio: 'equal'` with `borderRadius: 'full'` to render a circle.\n     */\n    aspectRatio?: BoxProps.VisualAccent.AspectRatio;\n    /**\n     * The corner rounding applied to the accent wrapper. When not set, the wrapper has no\n     * border radius.\n     *\n     * Use one of the curated t-shirt size keywords, which map to the same spacing scale used by\n     * `padding` and `margin`: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, or `xxxl`. Use\n     * `full` for fully rounded corners; combine it with `aspectRatio: 'equal'` to render a circle.\n     */\n    borderRadius?: BoxProps.VisualAccent.BorderRadius;\n  }\n\n  export namespace VisualAccent {\n    export type Color =\n      | 'red'\n      | 'yellow'\n      | 'indigo'\n      | 'green'\n      | 'orange'\n      | 'purple'\n      | 'lime'\n      | 'grey'\n      | 'teal'\n      | 'blue'\n      | 'violet'\n      | 'magenta'\n      | 'pink'\n      | 'amber';\n    export type AspectRatio = 'auto' | 'equal';\n    export type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full';\n  }\n\n  export type Display = 'block' | 'inline' | 'inline-block' | 'none';\n  export type TextAlign = 'left' | 'center' | 'right';\n  export type Float = 'left' | 'right';\n  export type FontSize =\n    | 'body-s'\n    | 'body-m'\n    | 'heading-xs'\n    | 'heading-s'\n    | 'heading-m'\n    | 'heading-l'\n    | 'heading-xl'\n    | 'display-l'\n    | 'display-xl';\n  export type FontWeight = 'light' | 'normal' | 'bold' | 'heavy';\n  export type Color =\n    | 'inherit'\n    | 'text-label'\n    | 'text-body-secondary'\n    | 'text-status-error'\n    | 'text-status-success'\n    | 'text-status-info'\n    | 'text-status-inactive'\n    | 'text-status-warning';\n  export type SpacingSize = 'n' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';\n  export interface Spacing {\n    top?: BoxProps.SpacingSize;\n    right?: BoxProps.SpacingSize;\n    bottom?: BoxProps.SpacingSize;\n    left?: BoxProps.SpacingSize;\n    horizontal?: BoxProps.SpacingSize;\n    vertical?: BoxProps.SpacingSize;\n  }\n}\n"]}