@cloudscape-design/components-themeable 3.0.603 → 3.0.605

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "d4d0eb7ce0096e4946546e94a72511fa7abbe571"
+  "commit": "04e74f65b28e68e095bb2e7e48e599a2f39f3e86"
 }

package/lib/internal/scss/box/text.scss

@@ -43,6 +43,11 @@
       color: awsui.$color-text-label;
       margin-block-end: awsui.$space-key-value-gap;
     }
+    &.gen-ai-label-variant {
+      @include styles.font-body-s;
+      font-style: italic;
+      color: awsui.$color-text-label-gen-ai;
+    }
     &.value-large-variant {
       @include styles.font-display-l;
       font-weight: awsui.$font-box-value-large-weight;

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

@@ -26,11 +26,33 @@ $edit-button-padding-right: calc(
 ); // Cell vertical padding + xxs space that would normally come from the button.
 $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-with-spacing});
 
+.expandable-toggle-wrapper {
+  position: absolute;
+  inset-block: 0;
+  display: flex;
+  align-items: center;
+  margin-inline-start: calc(-1 * (#{awsui.$space-m} + #{awsui.$space-xs}));
+}
+
+@mixin cell-offset($padding) {
+  padding-inline-start: $padding;
+
+  @for $i from 1 through 9 {
+    &.body-cell-expandable-level-#{$i} {
+      padding-inline-start: calc($padding + $i * (#{awsui.$space-m} + #{awsui.$space-xs}));
+    }
+  }
+  &.body-cell-expandable-level-next {
+    padding-inline-start: calc($padding + 9 * (#{awsui.$space-m} + #{awsui.$space-xs}));
+  }
+}
+
 .body-cell {
   box-sizing: border-box;
   padding-block-start: $cell-vertical-padding;
   padding-block-end: $cell-vertical-padding-w-border;
-  padding-inline: $cell-horizontal-padding;
+  @include cell-offset($cell-horizontal-padding);
+  padding-inline-end: $cell-horizontal-padding;
   border-block-start: awsui.$border-divider-list-width solid transparent;
   word-wrap: break-word;
   border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
@@ -65,9 +87,9 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
   }
   &.is-visual-refresh:first-child {
     &:not(.has-striped-rows) {
-      padding-inline-start: awsui.$space-xxxs;
-      &:not(.body-cell-edit-active).body-cell-editable:hover {
-        padding-inline-start: calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width});
+      @include cell-offset(awsui.$space-xxxs);
+      &:not(.body-cell-edit-active).body-cell-interactive.body-cell-editable:hover {
+        @include cell-offset(calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width}));
       }
     }
 
@@ -77,9 +99,9 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       to the table edge.
       */
     &:first-child.has-striped-rows {
-      padding-inline-start: awsui.$space-xxs;
+      @include cell-offset(awsui.$space-xxs);
       &-sticky-cell-pad-left {
-        padding-inline-start: awsui.$space-table-horizontal;
+        @include cell-offset(awsui.$space-table-horizontal);
       }
     }
 
@@ -93,7 +115,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     }
   }
   &:first-child:not(.is-visual-refresh) {
-    padding-inline-start: $cell-edge-horizontal-padding;
+    @include cell-offset($cell-edge-horizontal-padding);
   }
   &-first-row {
     border-block-start: $border-placeholder;
@@ -148,7 +170,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     background: awsui.$color-background-container-content;
     z-index: 798; // Our sticky elements should have z-index in the range of 800-850, this value needs to be lower
     &-pad-left:not(.has-selection):not(.is-visual-refresh.body-cell:first-child.has-striped-rows) {
-      padding-inline-start: awsui.$space-table-horizontal;
+      @include cell-offset(awsui.$space-table-horizontal);
     }
     &.body-cell-shaded {
       background: awsui.$color-background-cell-shaded;
@@ -295,6 +317,14 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     }
   }
 
+  &.body-cell-expandable {
+    position: relative;
+
+    &.sticky-cell {
+      position: sticky;
+    }
+  }
+
   &.body-cell-editable {
     position: relative;
 
@@ -310,25 +340,29 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     }
 
     &:not(.body-cell-edit-active) {
-      cursor: pointer;
+      &.body-cell-interactive {
+        cursor: pointer;
+      }
 
       @mixin focused-editor-styles {
         padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
-        & > .body-cell-editor-wrapper {
+        & > .body-cell-editor-wrapper,
+        & > .expandable-cell-content > .body-cell-editor-wrapper {
           opacity: 1;
         }
         & > .body-cell-success {
           opacity: 1;
         }
       }
-      & > .body-cell-editor-wrapper {
+      & > .body-cell-editor-wrapper,
+      & > .expandable-cell-content > .body-cell-editor-wrapper {
         opacity: 0;
       }
 
       // Showing focus outline for the cell.
       // We don't use our focus-visible polyfill here because it doesn't work properly with screen readers.
       // These edit buttons are special because they are visually hidden (opacity: 0), but exposed to assistive technology.
-      // It's therefore important to display the focus outline, even when a keyboard user wasn't detected.
+      // It's therefore important to display the focus outline, even when a keyboard use wasn't detected.
       // For example, when an edit button is selected from the VoiceOver rotor menu.
       &.body-cell-interactive:focus-within {
         @include styles.focus-highlight(
@@ -339,7 +373,8 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
         );
       }
       // When a cell is not interactive the focus outline must be present for the editor button.
-      &:not(.body-cell-interactive) > .body-cell-editor-wrapper > .body-cell-editor {
+      &:not(.body-cell-interactive) > .body-cell-editor-wrapper > .body-cell-editor,
+      &:not(.body-cell-interactive) > .expandable-cell-content > .body-cell-editor-wrapper > .body-cell-editor {
         @include focus-visible.when-visible {
           @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
         }
@@ -370,7 +405,8 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
           inset-inline: 0;
         }
 
-        & > .body-cell-editor-wrapper {
+        & > .body-cell-editor-wrapper,
+        & > .expandable-cell-content > .body-cell-editor-wrapper {
           padding-inline-end: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
         }
         & > .body-cell-success {
@@ -394,7 +430,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       }
     }
   }
-  &-editable.is-visual-refresh:not(.body-cell-edit-active):hover {
+  &-editable.is-visual-refresh:not(.body-cell-edit-active).body-cell-interactive:hover {
     &:first-child {
       border-start-start-radius: awsui.$border-radius-item;
       border-end-start-radius: awsui.$border-radius-item;
@@ -404,7 +440,8 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       border-end-end-radius: awsui.$border-radius-item;
     }
     &.body-cell-first-row > .body-cell-success,
-    &.body-cell-first-row > .body-cell-editor-wrapper {
+    &.body-cell-first-row > .body-cell-editor-wrapper,
+    &.body-cell-first-row > .expandable-cell-content > .body-cell-editor-wrapper {
       padding-block-start: awsui.$border-divider-list-width;
     }
   }

package/lib/internal/scss/table/expandable-rows/motion.scss

@@ -0,0 +1,13 @@
+/*
+ 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 tokens;
+
+.expand-toggle-icon {
+  @include styles.with-motion {
+    transition: transform tokens.$motion-duration-rotate-90 tokens.$motion-easing-rotate-90;
+  }
+}

package/lib/internal/scss/table/expandable-rows/styles.scss

@@ -0,0 +1,47 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../internal/styles/index' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '../../internal/styles/tokens' as tokens;
+
+@use './motion';
+
+.expand-toggle-icon {
+  transform: rotate(-90deg);
+
+  &-expanded {
+    transform: rotate(0deg);
+  }
+}
+
+.expand-toggle {
+  @include styles.styles-reset;
+  cursor: pointer;
+  inline-size: awsui.$space-m;
+  block-size: awsui.$space-m;
+  border-block: 0;
+  border-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  background: none;
+  outline: 0;
+
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
+  }
+
+  color: awsui.$color-text-interactive-default;
+
+  &:hover {
+    color: awsui.$color-text-interactive-hover;
+  }
+  &:active {
+    color: awsui.$color-text-interactive-active;
+  }
+}

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

@@ -7,6 +7,14 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
 
+@mixin cell-offset($padding) {
+  padding-inline-start: $padding;
+
+  &.header-cell-content-expandable {
+    padding-inline-start: calc(#{$padding} + #{awsui.$space-m} + #{awsui.$space-xs});
+  }
+}
+
 .header-cell {
   position: relative;
   text-align: start;
@@ -94,7 +102,8 @@
 .header-cell-content {
   position: relative;
   padding-block: awsui.$space-scaled-xxs;
-  padding-inline: awsui.$space-s;
+  @include cell-offset(awsui.$space-s);
+  padding-inline-end: awsui.$space-s;
 
   .header-cell-sortable > & {
     padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
@@ -158,15 +167,15 @@ settings icon in the pagination slot.
 */
 .header-cell:not(.is-visual-refresh) {
   &:first-child {
-    padding-inline-start: awsui.$space-xs;
+    @include cell-offset(awsui.$space-xs);
   }
 }
 
 .header-cell.is-visual-refresh {
   &:first-child:not(.has-striped-rows) {
-    padding-inline-start: awsui.$space-xxxs;
+    @include cell-offset(awsui.$space-xxxs);
     &.sticky-cell-pad-left {
-      padding-inline-start: awsui.$space-table-horizontal;
+      @include cell-offset(awsui.$space-table-horizontal);
     }
   }
 
@@ -176,11 +185,11 @@ settings icon in the pagination slot.
   to the table edge.
   */
   &:first-child.has-striped-rows {
-    padding-inline-start: awsui.$space-xxs;
+    @include cell-offset(awsui.$space-xxs);
   }
 
   &:first-child > .header-cell-content {
-    padding-inline-start: 0;
+    @include cell-offset(0px);
   }
 
   &:last-child.header-cell-sortable {

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

@@ -5,8 +5,12 @@ export interface BoxProps extends BaseComponentProps {
      * Defines the style of element to display.
      *
      * - 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.
-     * - If you set it to `awsui-key-label`, the component will display as a `div`.
-     * - If you set it to `awsui-value-large`, the component will display as a `span`.
+     * - If you set it to `awsui-key-label`, the component will render a `div`,
+     *   styled for use as a key label in key-value pairs.
+     * - If you set it to `awsui-gen-ai-label`, the component will render a `div`,
+     *   styled for use as a label indicating that content is produced by generative AI.
+     * - If you set it to `awsui-value-large`, the component will render a `span`,
+     *   styled using "Display large light" typography.
      *
      * Override the HTML tag by using property `tagOverride`.
      */
@@ -112,7 +116,7 @@ export interface BoxProps extends BaseComponentProps {
     children?: React.ReactNode;
 }
 export declare namespace BoxProps {
-    type Variant = 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'small' | 'code' | 'pre' | 'samp' | 'awsui-key-label' | 'awsui-value-large';
+    type Variant = 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'small' | 'code' | 'pre' | 'samp' | 'awsui-key-label' | 'awsui-gen-ai-label' | 'awsui-value-large';
     type Display = 'block' | 'inline' | 'inline-block' | 'none';
     type TextAlign = 'left' | 'center' | 'right';
     type Float = 'left' | 'right';

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":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,QAAS,SAAQ,kBAAkB;IAClD;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC;IACjD;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC;IAClD;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,QAAQ,CAAC;IACxB,KAAY,OAAO,GACf,KAAK,GACL,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,QAAQ,GACR,OAAO,GACP,MAAM,GACN,KAAK,GACL,MAAM,GACN,iBAAiB,GACjB,mBAAmB,CAAC;IAExB,KAAY,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,cAAc,GAAG,MAAM,CAAC;IACnE,KAAY,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpD,KAAY,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IACrC,KAAY,QAAQ,GAChB,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,WAAW,CAAC;IAChB,KAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/D,KAAY,KAAK,GACb,SAAS,GACT,YAAY,GACZ,qBAAqB,GACrB,mBAAmB,GACnB,qBAAqB,GACrB,kBAAkB,GAClB,sBAAsB,GACtB,qBAAqB,CAAC;IAC1B,KAAY,WAAW,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAChG,UAAiB,OAAO;QACtB,GAAG,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;QAC3B,KAAK,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;QAC7B,MAAM,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;QAC9B,IAAI,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;QAC5B,UAAU,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;QAClC,QAAQ,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;KACjC;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/box/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,QAAS,SAAQ,kBAAkB;IAClD;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC;IACjD;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC;IAClD;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,QAAQ,CAAC;IACxB,KAAY,OAAO,GACf,KAAK,GACL,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,QAAQ,GACR,OAAO,GACP,MAAM,GACN,KAAK,GACL,MAAM,GACN,iBAAiB,GACjB,oBAAoB,GACpB,mBAAmB,CAAC;IAExB,KAAY,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,cAAc,GAAG,MAAM,CAAC;IACnE,KAAY,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpD,KAAY,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IACrC,KAAY,QAAQ,GAChB,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,WAAW,CAAC;IAChB,KAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/D,KAAY,KAAK,GACb,SAAS,GACT,YAAY,GACZ,qBAAqB,GACrB,mBAAmB,GACnB,qBAAqB,GACrB,kBAAkB,GAClB,sBAAsB,GACtB,qBAAqB,CAAC;IAC1B,KAAY,WAAW,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAChG,UAAiB,OAAO;QACtB,GAAG,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;QAC3B,KAAK,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;QAC7B,MAAM,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;QAC9B,IAAI,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;QAC5B,UAAU,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;QAClC,QAAQ,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;KACjC;CACF"}

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 '../internal/base-component';\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 display as a `div`.\n   * - If you set it to `awsui-value-large`, the component will display as a `span`.\n   *\n   * Override the HTML tag by using property `tagOverride`.\n   */\n  variant?: BoxProps.Variant;\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\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-value-large';\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  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 '../internal/base-component';\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   *\n   * Override the HTML tag by using property `tagOverride`.\n   */\n  variant?: BoxProps.Variant;\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\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\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  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"]}

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

@@ -30,7 +30,7 @@ const getTag = (variant, tagOverride) => {
     if (variant === 'awsui-value-large') {
         return 'span';
     }
-    if (variant === 'awsui-key-label') {
+    if (variant === 'awsui-key-label' || variant === 'awsui-gen-ai-label') {
         return 'div';
     }
     return variant;

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/box/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAcjB;QAdiB,EAClC,OAAO,GAAG,KAAK,EACf,WAAW,EACX,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,QAAQ,EACR,iBAAiB,GAAG,IAAI,OAEP,EADd,KAAK,cAb0B,oJAcnC,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,yBAAyB,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAChE,MAAM,0BAA0B,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAClE,+DAA+D;IAC/D,kDAAkD;IAClD,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,EAAE,WAAW,CAAU,CAAC;IAElD,MAAM,SAAS,GAAG,IAAI,CACpB,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,GAAG,EACV,MAAM,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,EACnD,yBAAyB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,MAAM,EAAE,CAAC,CAAC,EAC9D,0BAA0B,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,MAAM,EAAE,CAAC,CAAC,EAC/D,MAAM,CAAC,KAAK,OAAO,EAAE,CAAC,EACtB,MAAM,CAAC,KAAK,KAAK,EAAE,CAAC,EACpB,MAAM,CAAC,SAAS,KAAK,IAAI,SAAS,EAAE,CAAC,EACrC,MAAM,CAAC,aAAa,QAAQ,IAAI,SAAS,EAAE,CAAC,EAC5C,MAAM,CAAC,eAAe,UAAU,IAAI,SAAS,EAAE,CAAC,EAChD,MAAM,CAAC,KAAK,SAAS,EAAE,CAAC,CACzB,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,oBAAK,SAAS,IAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB,KAC7D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,qBAAqB,GAAG,CAAC,KAA8C,EAAE,EAAE;IAC/E,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAC;KAChB;IACD,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAU,CAAC;IACpF,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnF,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,OAAyB,EAAE,WAAoC,EAAE,EAAE;IACjF,IAAI,WAAW,EAAE;QACf,OAAO,WAAW,CAAC;KACpB;IAED,IAAI,OAAO,KAAK,mBAAmB,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,IAAI,OAAO,KAAK,iBAAiB,EAAE;QACjC,OAAO,KAAK,CAAC;KACd;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { BoxProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalBoxProps = BoxProps & InternalBaseComponentProps;\n\nexport default function InternalBox({\n  variant = 'div',\n  tagOverride,\n  margin = {},\n  padding = {},\n  display,\n  textAlign,\n  float,\n  fontSize,\n  fontWeight,\n  color,\n  children,\n  __internalRootRef = null,\n  ...props\n}: InternalBoxProps) {\n  const baseProps = getBaseProps(props);\n  const marginsClassNamesSuffices = getClassNamesSuffixes(margin);\n  const paddingsClassNamesSuffices = getClassNamesSuffixes(padding);\n  // This can be any arbitrary string if passed into tagOverride.\n  // We appease the compiler with an incorrect type.\n  const Tag = getTag(variant, tagOverride) as 'div';\n\n  const className = clsx(\n    baseProps.className,\n    styles.root,\n    styles.box,\n    styles[`${variant.replace(/^awsui-/, '')}-variant`],\n    marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]),\n    paddingsClassNamesSuffices.map(suffix => styles[`p-${suffix}`]),\n    styles[`d-${display}`],\n    styles[`f-${float}`],\n    styles[`color-${color || 'default'}`],\n    styles[`font-size-${fontSize || 'default'}`],\n    styles[`font-weight-${fontWeight || 'default'}`],\n    styles[`t-${textAlign}`]\n  );\n\n  return (\n    <Tag {...baseProps} className={className} ref={__internalRootRef}>\n      {children}\n    </Tag>\n  );\n}\n\nconst getClassNamesSuffixes = (value: BoxProps.SpacingSize | BoxProps.Spacing) => {\n  if (typeof value === 'string') {\n    return [value];\n  }\n  const sides = ['top', 'right', 'bottom', 'left', 'horizontal', 'vertical'] as const;\n  return sides.filter(side => !!value[side]).map(side => `${side}-${value[side]}`);\n};\n\nconst getTag = (variant: BoxProps.Variant, tagOverride: BoxProps['tagOverride']) => {\n  if (tagOverride) {\n    return tagOverride;\n  }\n\n  if (variant === 'awsui-value-large') {\n    return 'span';\n  }\n\n  if (variant === 'awsui-key-label') {\n    return 'div';\n  }\n\n  return variant;\n};\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/box/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAcjB;QAdiB,EAClC,OAAO,GAAG,KAAK,EACf,WAAW,EACX,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,QAAQ,EACR,iBAAiB,GAAG,IAAI,OAEP,EADd,KAAK,cAb0B,oJAcnC,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,yBAAyB,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAChE,MAAM,0BAA0B,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAClE,+DAA+D;IAC/D,kDAAkD;IAClD,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,EAAE,WAAW,CAAU,CAAC;IAElD,MAAM,SAAS,GAAG,IAAI,CACpB,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,GAAG,EACV,MAAM,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,EACnD,yBAAyB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,MAAM,EAAE,CAAC,CAAC,EAC9D,0BAA0B,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,MAAM,EAAE,CAAC,CAAC,EAC/D,MAAM,CAAC,KAAK,OAAO,EAAE,CAAC,EACtB,MAAM,CAAC,KAAK,KAAK,EAAE,CAAC,EACpB,MAAM,CAAC,SAAS,KAAK,IAAI,SAAS,EAAE,CAAC,EACrC,MAAM,CAAC,aAAa,QAAQ,IAAI,SAAS,EAAE,CAAC,EAC5C,MAAM,CAAC,eAAe,UAAU,IAAI,SAAS,EAAE,CAAC,EAChD,MAAM,CAAC,KAAK,SAAS,EAAE,CAAC,CACzB,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,oBAAK,SAAS,IAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB,KAC7D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,qBAAqB,GAAG,CAAC,KAA8C,EAAE,EAAE;IAC/E,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAC;KAChB;IACD,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAU,CAAC;IACpF,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnF,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,OAAyB,EAAE,WAAoC,EAAE,EAAE;IACjF,IAAI,WAAW,EAAE;QACf,OAAO,WAAW,CAAC;KACpB;IAED,IAAI,OAAO,KAAK,mBAAmB,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,IAAI,OAAO,KAAK,iBAAiB,IAAI,OAAO,KAAK,oBAAoB,EAAE;QACrE,OAAO,KAAK,CAAC;KACd;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { BoxProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalBoxProps = BoxProps & InternalBaseComponentProps;\n\nexport default function InternalBox({\n  variant = 'div',\n  tagOverride,\n  margin = {},\n  padding = {},\n  display,\n  textAlign,\n  float,\n  fontSize,\n  fontWeight,\n  color,\n  children,\n  __internalRootRef = null,\n  ...props\n}: InternalBoxProps) {\n  const baseProps = getBaseProps(props);\n  const marginsClassNamesSuffices = getClassNamesSuffixes(margin);\n  const paddingsClassNamesSuffices = getClassNamesSuffixes(padding);\n  // This can be any arbitrary string if passed into tagOverride.\n  // We appease the compiler with an incorrect type.\n  const Tag = getTag(variant, tagOverride) as 'div';\n\n  const className = clsx(\n    baseProps.className,\n    styles.root,\n    styles.box,\n    styles[`${variant.replace(/^awsui-/, '')}-variant`],\n    marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]),\n    paddingsClassNamesSuffices.map(suffix => styles[`p-${suffix}`]),\n    styles[`d-${display}`],\n    styles[`f-${float}`],\n    styles[`color-${color || 'default'}`],\n    styles[`font-size-${fontSize || 'default'}`],\n    styles[`font-weight-${fontWeight || 'default'}`],\n    styles[`t-${textAlign}`]\n  );\n\n  return (\n    <Tag {...baseProps} className={className} ref={__internalRootRef}>\n      {children}\n    </Tag>\n  );\n}\n\nconst getClassNamesSuffixes = (value: BoxProps.SpacingSize | BoxProps.Spacing) => {\n  if (typeof value === 'string') {\n    return [value];\n  }\n  const sides = ['top', 'right', 'bottom', 'left', 'horizontal', 'vertical'] as const;\n  return sides.filter(side => !!value[side]).map(side => `${side}-${value[side]}`);\n};\n\nconst getTag = (variant: BoxProps.Variant, tagOverride: BoxProps['tagOverride']) => {\n  if (tagOverride) {\n    return tagOverride;\n  }\n\n  if (variant === 'awsui-value-large') {\n    return 'span';\n  }\n\n  if (variant === 'awsui-key-label' || variant === 'awsui-gen-ai-label') {\n    return 'div';\n  }\n\n  return variant;\n};\n"]}