@cloudscape-design/components-themeable 3.0.1325 → 3.0.1327

package/lib/internal/template/badge/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_badge_1yjyg_zpkv4_145:not(#\9) {
+.awsui_badge_1yjyg_10cmu_145:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -188,47 +188,47 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline: var(--space-xs-kw7k3v, 8px);
   color: var(--color-text-notification-default-fmebm4, #fafafa);
 }
-.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-grey_1yjyg_zpkv4_191:not(#\9) {
-  background-color: var(--color-background-notification-grey-yzex9c, #545b64);
+.awsui_badge_1yjyg_10cmu_145.awsui_badge-color-grey_1yjyg_10cmu_191:not(#\9) {
+  background-color: var(--color-background-badge-grey-0gre59, #545b64);
   border-color: var(--color-border-badge-grey-7x1xit, transparent);
   color: var(--color-text-badge-grey-5hljh0, #fafafa);
 }
-.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-green_1yjyg_zpkv4_196:not(#\9) {
-  background-color: var(--color-background-notification-green-7yuv70, #1d8102);
+.awsui_badge_1yjyg_10cmu_145.awsui_badge-color-green_1yjyg_10cmu_196:not(#\9) {
+  background-color: var(--color-background-badge-green-aahq3n, #1d8102);
   border-color: var(--color-border-badge-green-t7n2iz, transparent);
   color: var(--color-text-badge-green-i688l8, #fafafa);
 }
-.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-blue_1yjyg_zpkv4_201:not(#\9) {
-  background-color: var(--color-background-notification-blue-jgc5fr, #0073bb);
+.awsui_badge_1yjyg_10cmu_145.awsui_badge-color-blue_1yjyg_10cmu_201:not(#\9) {
+  background-color: var(--color-background-badge-blue-89he01, #0073bb);
   border-color: var(--color-border-badge-blue-p28tag, transparent);
   color: var(--color-text-badge-blue-pfnjhv, #fafafa);
 }
-.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-red_1yjyg_zpkv4_206:not(#\9) {
-  background-color: var(--color-background-notification-red-k51keq, #d13212);
+.awsui_badge_1yjyg_10cmu_145.awsui_badge-color-red_1yjyg_10cmu_206:not(#\9) {
+  background-color: var(--color-background-badge-red-lfiebe, #d13212);
   border-color: var(--color-border-badge-red-w6mok2, transparent);
   color: var(--color-text-badge-red-e7xtdk, #fafafa);
 }
-.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-severity-critical_1yjyg_zpkv4_211:not(#\9) {
+.awsui_badge_1yjyg_10cmu_145.awsui_badge-color-severity-critical_1yjyg_10cmu_211:not(#\9) {
   background-color: var(--color-background-notification-severity-critical-gsxtat, #870303);
   color: var(--color-text-badge-severity-critical-9m2t9l, #fafafa);
   border-color: var(--color-border-badge-severity-critical-afw1t4, transparent);
 }
-.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-severity-high_1yjyg_zpkv4_216:not(#\9) {
+.awsui_badge_1yjyg_10cmu_145.awsui_badge-color-severity-high_1yjyg_10cmu_216:not(#\9) {
   background-color: var(--color-background-notification-severity-high-hz1dy0, #ce3311);
   color: var(--color-text-badge-severity-high-yhnb3j, #fafafa);
   border-color: var(--color-border-badge-severity-high-xpyb3z, transparent);
 }
-.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-severity-medium_1yjyg_zpkv4_221:not(#\9) {
+.awsui_badge_1yjyg_10cmu_145.awsui_badge-color-severity-medium_1yjyg_10cmu_221:not(#\9) {
   background-color: var(--color-background-notification-severity-medium-f2pwwo, #f89256);
   color: var(--color-text-badge-severity-medium-seazfm, #000000);
   border-color: var(--color-border-badge-severity-medium-lglq87, transparent);
 }
-.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-severity-low_1yjyg_zpkv4_226:not(#\9) {
+.awsui_badge_1yjyg_10cmu_145.awsui_badge-color-severity-low_1yjyg_10cmu_226:not(#\9) {
   background-color: var(--color-background-notification-severity-low-11rcv3, #f2cd54);
   color: var(--color-text-badge-severity-low-ixtax4, #16191f);
   border-color: var(--color-border-badge-severity-low-w6znea, transparent);
 }
-.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-severity-neutral_1yjyg_zpkv4_231:not(#\9) {
+.awsui_badge_1yjyg_10cmu_145.awsui_badge-color-severity-neutral_1yjyg_10cmu_231:not(#\9) {
   background-color: var(--color-background-notification-severity-neutral-1tqomh, #687078);
   color: var(--color-text-badge-severity-neutral-vfdy0w, #fafafa);
   border-color: var(--color-border-badge-severity-neutral-kdj4l5, transparent);

package/lib/internal/template/badge/styles.selectors.js

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "badge": "awsui_badge_1yjyg_zpkv4_145",
-  "badge-color-grey": "awsui_badge-color-grey_1yjyg_zpkv4_191",
-  "badge-color-green": "awsui_badge-color-green_1yjyg_zpkv4_196",
-  "badge-color-blue": "awsui_badge-color-blue_1yjyg_zpkv4_201",
-  "badge-color-red": "awsui_badge-color-red_1yjyg_zpkv4_206",
-  "badge-color-severity-critical": "awsui_badge-color-severity-critical_1yjyg_zpkv4_211",
-  "badge-color-severity-high": "awsui_badge-color-severity-high_1yjyg_zpkv4_216",
-  "badge-color-severity-medium": "awsui_badge-color-severity-medium_1yjyg_zpkv4_221",
-  "badge-color-severity-low": "awsui_badge-color-severity-low_1yjyg_zpkv4_226",
-  "badge-color-severity-neutral": "awsui_badge-color-severity-neutral_1yjyg_zpkv4_231"
+  "badge": "awsui_badge_1yjyg_10cmu_145",
+  "badge-color-grey": "awsui_badge-color-grey_1yjyg_10cmu_191",
+  "badge-color-green": "awsui_badge-color-green_1yjyg_10cmu_196",
+  "badge-color-blue": "awsui_badge-color-blue_1yjyg_10cmu_201",
+  "badge-color-red": "awsui_badge-color-red_1yjyg_10cmu_206",
+  "badge-color-severity-critical": "awsui_badge-color-severity-critical_1yjyg_10cmu_211",
+  "badge-color-severity-high": "awsui_badge-color-severity-high_1yjyg_10cmu_216",
+  "badge-color-severity-medium": "awsui_badge-color-severity-medium_1yjyg_10cmu_221",
+  "badge-color-severity-low": "awsui_badge-color-severity-low_1yjyg_10cmu_226",
+  "badge-color-severity-neutral": "awsui_badge-color-severity-neutral_1yjyg_10cmu_231"
 };
   

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

@@ -20,6 +20,29 @@ export interface BoxProps extends BaseComponentProps {
      * Override the HTML tag by using property `tagOverride`.
      */
     variant?: BoxProps.Variant;
+    /**
+     * Renders the box as a visual accent wrapper to emphasize its content.
+     *
+     * Setting this property activates the accent styling: a coordinated background and content
+     * color combination that works in both light and dark modes. A `variant` is not required to
+     * activate the accent. The accent styling is applied on top of the element determined by
+     * `variant` (or `tagOverride`), so the rendered HTML tag is unaffected.
+     *
+     * The object accepts the following fields:
+     * - `color` (required) — the coordinated background and foreground color pair. The foreground
+     *   color is applied as the wrapper's CSS `color`, so it only affects content that inherits
+     *   the current color (for example an `Icon`, or a nested `Box` with `color="inherit"`).
+     *   Content that sets its own color is not overridden.
+     * - `aspectRatio` — `auto` (default) lets the wrapper's width follow its content;
+     *   `equal` forces equal width and height, suitable for wrapping icons.
+     * - `borderRadius` — the corner rounding applied to the wrapper, using a t-shirt size keyword
+     *   from the Box spacing scale (`xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`), or
+     *   `full` for fully rounded corners. When not set, the wrapper has no border radius. Set it to
+     *   `full` together with `aspectRatio: 'equal'` to render a circle.
+     *
+     * Composes with existing Box props such as `padding` and `margin`.
+     */
+    visualAccent?: BoxProps.VisualAccent;
     /**
      * Overrides the default HTML tag provided by the variant.
      */
@@ -133,6 +156,42 @@ export interface BoxProps extends BaseComponentProps {
 }
 export declare namespace BoxProps {
     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' | 'awsui-inline-code';
+    interface VisualAccent {
+        /**
+         * The coordinated background and foreground color pair applied to the accent wrapper.
+         * Each color works in both light and dark modes.
+         *
+         * The background color is applied directly to the wrapper. The foreground color is applied
+         * as the wrapper's CSS `color` and is therefore only picked up by content that inherits the
+         * current color, such as an `Icon` or a nested `Box` with `color="inherit"`. Content that
+         * defines its own color (for example a `Box` with an explicit `color`, or a `Link`) keeps that
+         * color and is not recolored by the accent.
+         */
+        color: BoxProps.VisualAccent.Color;
+        /**
+         * Controls the aspect ratio of the accent wrapper.
+         *
+         * - `auto` (default) — the wrapper's width follows its content.
+         * - `equal` — the wrapper has equal width and height, suitable for wrapping icons.
+         *
+         * Combine `aspectRatio: 'equal'` with `borderRadius: 'full'` to render a circle.
+         */
+        aspectRatio?: BoxProps.VisualAccent.AspectRatio;
+        /**
+         * The corner rounding applied to the accent wrapper. When not set, the wrapper has no
+         * border radius.
+         *
+         * Use one of the curated t-shirt size keywords, which map to the same spacing scale used by
+         * `padding` and `margin`: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, or `xxxl`. Use
+         * `full` for fully rounded corners; combine it with `aspectRatio: 'equal'` to render a circle.
+         */
+        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 AspectRatio = 'auto' | 'equal';
+        type BorderRadius = 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'full';
+    }
     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,yBAAyB,CAAC;AAC7D;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,WAAW,QAAS,SAAQ,kBAAkB;IAClD;;;;;;;;;;;;;;OAcG;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;IAE3B;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;CACxE;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,GACnB,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,GACX,YAAY,CAAC;IACjB,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":"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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   * 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 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      | '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"]}

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

@@ -1,6 +1,6 @@
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { BoxProps } from './interfaces';
 type InternalBoxProps = BoxProps & InternalBaseComponentProps;
-export default function InternalBox({ variant, tagOverride, margin, padding, display, textAlign, float, fontSize, fontWeight, color, children, nativeAttributes, __internalRootRef, ...props }: InternalBoxProps): JSX.Element;
+export default function InternalBox({ variant, tagOverride, margin, padding, display, textAlign, float, fontSize, fontWeight, color, visualAccent, children, nativeAttributes, __internalRootRef, ...props }: InternalBoxProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/box/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAIxC,KAAK,gBAAgB,GAAG,QAAQ,GAAG,0BAA0B,CAAC;AAE9D,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAe,EACf,WAAW,EACX,MAAW,EACX,OAAY,EACZ,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,gBAAgB,eAoClB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/box/internal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAIxC,KAAK,gBAAgB,GAAG,QAAQ,GAAG,0BAA0B,CAAC;AAE9D,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAe,EACf,WAAW,EACX,MAAW,EACX,OAAY,EACZ,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,gBAAgB,eA0ClB"}

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

@@ -5,11 +5,13 @@ import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
 import WithNativeAttributes from '../internal/utils/with-native-attributes';
 import styles from './styles.css.js';
-export default function InternalBox({ variant = 'div', tagOverride, margin = {}, padding = {}, display, textAlign, float, fontSize, fontWeight, color, children, nativeAttributes, __internalRootRef, ...props }) {
+export default function InternalBox({ variant = 'div', tagOverride, margin = {}, padding = {}, display, textAlign, float, fontSize, fontWeight, color, visualAccent, children, nativeAttributes, __internalRootRef, ...props }) {
+    var _a;
     const baseProps = getBaseProps(props);
     const marginsClassNamesSuffices = getClassNamesSuffixes(margin);
     const paddingsClassNamesSuffices = getClassNamesSuffixes(padding);
-    const className = clsx(baseProps.className, styles.root, styles.box, styles[`${variant.replace(/^awsui-/, '')}-variant`], marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]), paddingsClassNamesSuffices.map(suffix => styles[`p-${suffix}`]), styles[`d-${display}`], styles[`f-${float}`], styles[`color-${color || 'default'}`], styles[`font-size-${fontSize || 'default'}`], styles[`font-weight-${fontWeight || 'default'}`], styles[`t-${textAlign}`]);
+    const accentAspectRatio = (_a = visualAccent === null || visualAccent === void 0 ? void 0 : visualAccent.aspectRatio) !== null && _a !== void 0 ? _a : 'auto';
+    const className = clsx(baseProps.className, styles.root, styles.box, styles[`${variant.replace(/^awsui-/, '')}-variant`], visualAccent && styles['visual-accent'], visualAccent && styles[`visual-accent-${visualAccent.color}`], visualAccent && styles[`visual-accent-aspect-${accentAspectRatio}`], (visualAccent === null || visualAccent === void 0 ? void 0 : visualAccent.borderRadius) && styles[`visual-accent-radius-${visualAccent.borderRadius}`], marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]), paddingsClassNamesSuffices.map(suffix => styles[`p-${suffix}`]), styles[`d-${display}`], styles[`f-${float}`], styles[`color-${color || 'default'}`], styles[`font-size-${fontSize || 'default'}`], styles[`font-weight-${fontWeight || 'default'}`], styles[`t-${textAlign}`]);
     // allow auto-focusing of h1 boxes from flashbar
     const tabindex = variant === 'h1' ? -1 : undefined;
     return (React.createElement(WithNativeAttributes, { ...baseProps, tag: getTag(variant, tagOverride), componentName: "Box", tabIndex: tabindex, nativeAttributes: nativeAttributes, className: className, ref: __internalRootRef }, children));

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/box/internal.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 { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { BoxProps } from './interfaces';\n\nimport styles from './styles.css.js';\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  nativeAttributes,\n  __internalRootRef,\n  ...props\n}: InternalBoxProps) {\n  const baseProps = getBaseProps(props);\n  const marginsClassNamesSuffices = getClassNamesSuffixes(margin);\n  const paddingsClassNamesSuffices = getClassNamesSuffixes(padding);\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  // allow auto-focusing of h1 boxes from flashbar\n  const tabindex = variant === 'h1' ? -1 : undefined;\n\n  return (\n    <WithNativeAttributes\n      {...baseProps}\n      tag={getTag(variant, tagOverride)}\n      componentName=\"Box\"\n      tabIndex={tabindex}\n      nativeAttributes={nativeAttributes}\n      className={className}\n      ref={__internalRootRef}\n    >\n      {children}\n    </WithNativeAttributes>\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  if (variant === 'awsui-inline-code') {\n    return 'code';\n  }\n\n  return variant;\n};\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/box/internal.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 { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { BoxProps } from './interfaces';\n\nimport styles from './styles.css.js';\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  visualAccent,\n  children,\n  nativeAttributes,\n  __internalRootRef,\n  ...props\n}: InternalBoxProps) {\n  const baseProps = getBaseProps(props);\n  const marginsClassNamesSuffices = getClassNamesSuffixes(margin);\n  const paddingsClassNamesSuffices = getClassNamesSuffixes(padding);\n\n  const accentAspectRatio = visualAccent?.aspectRatio ?? 'auto';\n\n  const className = clsx(\n    baseProps.className,\n    styles.root,\n    styles.box,\n    styles[`${variant.replace(/^awsui-/, '')}-variant`],\n    visualAccent && styles['visual-accent'],\n    visualAccent && styles[`visual-accent-${visualAccent.color}`],\n    visualAccent && styles[`visual-accent-aspect-${accentAspectRatio}`],\n    visualAccent?.borderRadius && styles[`visual-accent-radius-${visualAccent.borderRadius}`],\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  // allow auto-focusing of h1 boxes from flashbar\n  const tabindex = variant === 'h1' ? -1 : undefined;\n\n  return (\n    <WithNativeAttributes\n      {...baseProps}\n      tag={getTag(variant, tagOverride)}\n      componentName=\"Box\"\n      tabIndex={tabindex}\n      nativeAttributes={nativeAttributes}\n      className={className}\n      ref={__internalRootRef}\n    >\n      {children}\n    </WithNativeAttributes>\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  if (variant === 'awsui-inline-code') {\n    return 'code';\n  }\n\n  return variant;\n};\n"]}