@cloudscape-design/components 3.0.670 → 3.0.672

package/tiles/internal.js

@@ -13,7 +13,7 @@ import { Tile } from './tile';
 import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
 const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
 const InternalTiles = React.forwardRef((_a, ref) => {
-    var { name, value, items, ariaLabel, ariaRequired, ariaControls, columns, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["name", "value", "items", "ariaLabel", "ariaRequired", "ariaControls", "columns", "onChange", "__internalRootRef"]);
+    var { name, value, items, ariaLabel, ariaRequired, ariaControls, columns, onChange, readOnly, __internalRootRef = null } = _a, rest = __rest(_a, ["name", "value", "items", "ariaLabel", "ariaRequired", "ariaControls", "columns", "onChange", "readOnly", "__internalRootRef"]);
     const baseProps = getBaseProps(rest);
     const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
     const generatedName = useUniqueId('awsui-tiles-');
@@ -21,9 +21,9 @@ const InternalTiles = React.forwardRef((_a, ref) => {
     const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);
     const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
     const columnCount = getColumnCount(items, columns);
-    return (React.createElement("div", Object.assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
+    return (React.createElement("div", Object.assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? 'true' : undefined }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
         React.createElement("div", { className: clsx(styles.columns, styles[`column-${columnCount}`]) }, items &&
-            items.map((item, index) => (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: name || generatedName, breakpoint: breakpoint, onChange: onChange }))))));
+            items.map((item, index) => (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: name || generatedName, breakpoint: breakpoint, onChange: onChange, readOnly: readOnly }))))));
 });
 function getColumnCount(items, columns) {
     if (columns) {

package/tiles/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/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 clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n  (\n    {\n      name,\n      value,\n      items,\n      ariaLabel,\n      ariaRequired,\n      ariaControls,\n      columns,\n      onChange,\n      __internalRootRef = null,\n      ...rest\n    }: InternalTilesProps,\n    ref: React.Ref<TilesProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const generatedName = useUniqueId('awsui-tiles-');\n\n    const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    const columnCount = getColumnCount(items, columns);\n\n    return (\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-required={ariaRequired}\n        aria-controls={ariaControls}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        ref={mergedRef}\n      >\n        <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n          {items &&\n            items.map((item, index) => (\n              <Tile\n                ref={index === tileRefIndex ? tileRef : undefined}\n                key={item.value}\n                item={item}\n                selected={item.value === value}\n                name={name || generatedName}\n                breakpoint={breakpoint}\n                onChange={onChange}\n              />\n            ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nfunction getColumnCount(\n  items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n  columns: number | undefined\n): number {\n  if (columns) {\n    return columns;\n  }\n\n  const nItems = items ? items.length : 0;\n  const columnsLookup: Record<number, number> = {\n    0: 1,\n    1: 1,\n    2: 2,\n    4: 2,\n    8: 2,\n  };\n  return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/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 clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n  (\n    {\n      name,\n      value,\n      items,\n      ariaLabel,\n      ariaRequired,\n      ariaControls,\n      columns,\n      onChange,\n      readOnly,\n      __internalRootRef = null,\n      ...rest\n    }: InternalTilesProps,\n    ref: React.Ref<TilesProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const generatedName = useUniqueId('awsui-tiles-');\n\n    const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    const columnCount = getColumnCount(items, columns);\n\n    return (\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-required={ariaRequired}\n        aria-controls={ariaControls}\n        aria-readonly={readOnly ? 'true' : undefined}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        ref={mergedRef}\n      >\n        <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n          {items &&\n            items.map((item, index) => (\n              <Tile\n                ref={index === tileRefIndex ? tileRef : undefined}\n                key={item.value}\n                item={item}\n                selected={item.value === value}\n                name={name || generatedName}\n                breakpoint={breakpoint}\n                onChange={onChange}\n                readOnly={readOnly}\n              />\n            ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nfunction getColumnCount(\n  items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n  columns: number | undefined\n): number {\n  if (columns) {\n    return columns;\n  }\n\n  const nItems = items ? items.length : 0;\n  const columnsLookup: Record<number, number> = {\n    0: 1,\n    1: 1,\n    2: 2,\n    4: 2,\n    8: 2,\n  };\n  return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}

package/tiles/styles.css.js

@@ -1,34 +1,35 @@
 
     import './styles.scoped.css';
     export default {
-  "column-layout": "awsui_column-layout_vj6p7_h9y4z_97",
-  "grid": "awsui_grid_vj6p7_h9y4z_132",
-  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_h9y4z_138",
-  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_h9y4z_142",
-  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_h9y4z_150",
-  "grid-columns-1": "awsui_grid-columns-1_vj6p7_h9y4z_153",
-  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153",
-  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_h9y4z_156",
-  "grid-columns-2": "awsui_grid-columns-2_vj6p7_h9y4z_159",
-  "grid-columns-3": "awsui_grid-columns-3_vj6p7_h9y4z_165",
-  "grid-columns-4": "awsui_grid-columns-4_vj6p7_h9y4z_171",
-  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_h9y4z_187",
-  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_h9y4z_220",
-  "root": "awsui_root_vj6p7_h9y4z_274",
-  "tile-container": "awsui_tile-container_vj6p7_h9y4z_312",
-  "refresh": "awsui_refresh_vj6p7_h9y4z_327",
-  "has-metadata": "awsui_has-metadata_vj6p7_h9y4z_331",
-  "selected": "awsui_selected_vj6p7_h9y4z_337",
-  "disabled": "awsui_disabled_vj6p7_h9y4z_342",
-  "columns": "awsui_columns_vj6p7_h9y4z_358",
-  "column-1": "awsui_column-1_vj6p7_h9y4z_364",
-  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_h9y4z_371",
-  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_h9y4z_375",
-  "column-2": "awsui_column-2_vj6p7_h9y4z_379",
-  "column-3": "awsui_column-3_vj6p7_h9y4z_394",
-  "column-4": "awsui_column-4_vj6p7_h9y4z_409",
-  "control": "awsui_control_vj6p7_h9y4z_425",
-  "no-image": "awsui_no-image_vj6p7_h9y4z_429",
-  "image": "awsui_image_vj6p7_h9y4z_433"
+  "column-layout": "awsui_column-layout_vj6p7_tp6ux_97",
+  "grid": "awsui_grid_vj6p7_tp6ux_132",
+  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_tp6ux_138",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_tp6ux_142",
+  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_tp6ux_150",
+  "grid-columns-1": "awsui_grid-columns-1_vj6p7_tp6ux_153",
+  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153",
+  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_tp6ux_156",
+  "grid-columns-2": "awsui_grid-columns-2_vj6p7_tp6ux_159",
+  "grid-columns-3": "awsui_grid-columns-3_vj6p7_tp6ux_165",
+  "grid-columns-4": "awsui_grid-columns-4_vj6p7_tp6ux_171",
+  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_tp6ux_187",
+  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_tp6ux_220",
+  "root": "awsui_root_vj6p7_tp6ux_274",
+  "tile-container": "awsui_tile-container_vj6p7_tp6ux_312",
+  "refresh": "awsui_refresh_vj6p7_tp6ux_327",
+  "has-metadata": "awsui_has-metadata_vj6p7_tp6ux_331",
+  "selected": "awsui_selected_vj6p7_tp6ux_337",
+  "disabled": "awsui_disabled_vj6p7_tp6ux_342",
+  "readonly": "awsui_readonly_vj6p7_tp6ux_347",
+  "columns": "awsui_columns_vj6p7_tp6ux_363",
+  "column-1": "awsui_column-1_vj6p7_tp6ux_369",
+  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_tp6ux_376",
+  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_tp6ux_380",
+  "column-2": "awsui_column-2_vj6p7_tp6ux_384",
+  "column-3": "awsui_column-3_vj6p7_tp6ux_399",
+  "column-4": "awsui_column-4_vj6p7_tp6ux_414",
+  "control": "awsui_control_vj6p7_tp6ux_430",
+  "no-image": "awsui_no-image_vj6p7_tp6ux_434",
+  "image": "awsui_image_vj6p7_tp6ux_438"
 };
   

package/tiles/styles.scoped.css

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-div.awsui_column-layout_vj6p7_h9y4z_97:not(#\9) {
+div.awsui_column-layout_vj6p7_tp6ux_97:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -130,141 +130,141 @@ div.awsui_column-layout_vj6p7_h9y4z_97:not(#\9) {
   -moz-osx-font-smoothing: auto;
   word-wrap: break-word;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132:not(#\9) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132:not(#\9) {
   margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / -2);
   margin-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / -2);
   /* stylelint-disable-next-line selector-max-universal */
   /* stylelint-disable-next-line selector-max-universal */
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-no-gutters_vj6p7_h9y4z_138:not(#\9) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-no-gutters_vj6p7_tp6ux_138:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142:not(#\9) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142:not(#\9) {
   /* stylelint-disable-next-line selector-max-universal */
   margin-block: calc(-1 * var(--space-grid-gutter-ieqn7e, 20px) / 2);
   margin-inline: calc(-1 * var(--space-grid-gutter-ieqn7e, 20px));
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142 > *:not(#\9) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142 > *:not(#\9) {
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142.awsui_grid-breakpoint-default_vj6p7_h9y4z_150 > *:not(#\9):nth-child(1n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142.awsui_grid-breakpoint-default_vj6p7_tp6ux_150 > *:not(#\9):nth-child(1n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142.awsui_grid-columns-1_vj6p7_h9y4z_153.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-child(1n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142.awsui_grid-columns-1_vj6p7_tp6ux_153.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-child(1n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142.awsui_grid-columns-1_vj6p7_h9y4z_153.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-child(1n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142.awsui_grid-columns-1_vj6p7_tp6ux_153.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-child(1n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142.awsui_grid-columns-2_vj6p7_h9y4z_159.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142.awsui_grid-columns-2_vj6p7_tp6ux_159.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142.awsui_grid-columns-2_vj6p7_h9y4z_159.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142.awsui_grid-columns-2_vj6p7_tp6ux_159.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142.awsui_grid-columns-3_vj6p7_h9y4z_165.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142.awsui_grid-columns-3_vj6p7_tp6ux_165.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142.awsui_grid-columns-3_vj6p7_h9y4z_165.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-child(3n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142.awsui_grid-columns-3_vj6p7_tp6ux_165.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-child(3n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-variant-text-grid_vj6p7_h9y4z_142.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-variant-text-grid_vj6p7_tp6ux_142.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-child(4n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132:not(#\9):not(.awsui_grid-no-gutters_vj6p7_h9y4z_138) > * {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132:not(#\9):not(.awsui_grid-no-gutters_vj6p7_tp6ux_138) > * {
   padding-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
   padding-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132:not(#\9):not(.awsui_grid-no-gutters_vj6p7_h9y4z_138).awsui_grid-variant-text-grid_vj6p7_h9y4z_142 > * {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132:not(#\9):not(.awsui_grid-no-gutters_vj6p7_tp6ux_138).awsui_grid-variant-text-grid_vj6p7_tp6ux_142 > * {
   padding-block: 0;
   padding-inline: var(--space-grid-gutter-ieqn7e, 20px);
   margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
   margin-inline: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187:not(#\9) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187:not(#\9) {
   /* stylelint-disable-next-line selector-max-universal */
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187 > *:not(#\9) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187 > *:not(#\9) {
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187.awsui_grid-breakpoint-default_vj6p7_h9y4z_150 > *:not(#\9):nth-child(1n) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187.awsui_grid-breakpoint-default_vj6p7_tp6ux_150 > *:not(#\9):nth-child(1n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187.awsui_grid-columns-1_vj6p7_h9y4z_153.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-child(1n) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187.awsui_grid-columns-1_vj6p7_tp6ux_153.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-child(1n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187.awsui_grid-columns-1_vj6p7_h9y4z_153.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-child(1n) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187.awsui_grid-columns-1_vj6p7_tp6ux_153.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-child(1n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187.awsui_grid-columns-2_vj6p7_h9y4z_159.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187.awsui_grid-columns-2_vj6p7_tp6ux_159.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187.awsui_grid-columns-2_vj6p7_h9y4z_159.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187.awsui_grid-columns-2_vj6p7_tp6ux_159.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187.awsui_grid-columns-3_vj6p7_h9y4z_165.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187.awsui_grid-columns-3_vj6p7_tp6ux_165.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187.awsui_grid-columns-3_vj6p7_h9y4z_165.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-child(3n) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187.awsui_grid-columns-3_vj6p7_tp6ux_165.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-child(3n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-vertical-borders_vj6p7_h9y4z_187.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-child(4n) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-vertical-borders_vj6p7_tp6ux_187.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-child(4n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220:not(#\9) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220:not(#\9) {
   /* stylelint-disable selector-max-universal */
   /* stylelint-enable selector-max-universal */
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220 > *:not(#\9) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220 > *:not(#\9) {
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220 > *:not(#\9):last-child {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220 > *:not(#\9):last-child {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-2_vj6p7_h9y4z_159.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-2_vj6p7_tp6ux_159.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-2_vj6p7_h9y4z_159.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-2_vj6p7_tp6ux_159.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-3_vj6p7_h9y4z_165.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-3_vj6p7_tp6ux_165.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-3_vj6p7_h9y4z_165.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-last-child(2):nth-child(3n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-3_vj6p7_tp6ux_165.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-last-child(2):nth-child(3n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-3_vj6p7_h9y4z_165.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-last-child(2):nth-child(3n+2) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-3_vj6p7_tp6ux_165.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-last-child(2):nth-child(3n+2) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-3_vj6p7_h9y4z_165.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-last-child(3):nth-child(3n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-3_vj6p7_tp6ux_165.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-last-child(3):nth-child(3n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-last-child(2):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-last-child(2):nth-child(4n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-last-child(2):nth-child(4n+2) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-last-child(2):nth-child(4n+2) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-last-child(2):nth-child(4n+3) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-last-child(2):nth-child(4n+3) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-last-child(3):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-last-child(3):nth-child(4n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-last-child(3):nth-child(4n+2) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-last-child(3):nth-child(4n+2) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-horizontal-borders_vj6p7_h9y4z_220.awsui_grid-columns-4_vj6p7_h9y4z_171.awsui_grid-breakpoint-xs_vj6p7_h9y4z_156 > *:not(#\9):nth-last-child(4):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_tp6ux_97 > .awsui_grid_vj6p7_tp6ux_132.awsui_grid-horizontal-borders_vj6p7_tp6ux_220.awsui_grid-columns-4_vj6p7_tp6ux_171.awsui_grid-breakpoint-xs_vj6p7_tp6ux_156 > *:not(#\9):nth-last-child(4):nth-child(4n+1) {
   border-block-end-width: 0;
 }
 
@@ -272,7 +272,7 @@ div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_vj6p7_h9y4z_274:not(#\9) {
+.awsui_root_vj6p7_tp6ux_274:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -311,7 +311,7 @@ div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-
   display: block;
 }
 
-.awsui_tile-container_vj6p7_h9y4z_312:not(#\9) {
+.awsui_tile-container_vj6p7_tp6ux_312:not(#\9) {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -326,118 +326,123 @@ div.awsui_column-layout_vj6p7_h9y4z_97 > .awsui_grid_vj6p7_h9y4z_132.awsui_grid-
   padding-inline: var(--space-scaled-m-mo5yse, 16px);
   transition: border-color var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear), background-color var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
 }
-.awsui_tile-container_vj6p7_h9y4z_312.awsui_refresh_vj6p7_h9y4z_327:not(#\9) {
+.awsui_tile-container_vj6p7_tp6ux_312.awsui_refresh_vj6p7_tp6ux_327:not(#\9) {
   padding-block: var(--space-xs-zb16t3, 8px);
   padding-inline: var(--space-s-34lx8l, 12px);
 }
-.awsui_tile-container_vj6p7_h9y4z_312.awsui_has-metadata_vj6p7_h9y4z_331:not(#\9) {
+.awsui_tile-container_vj6p7_tp6ux_312.awsui_has-metadata_vj6p7_tp6ux_331:not(#\9) {
   padding-block-end: var(--space-s-34lx8l, 12px);
 }
-.awsui_tile-container_vj6p7_h9y4z_312.awsui_has-metadata_vj6p7_h9y4z_331.awsui_refresh_vj6p7_h9y4z_327:not(#\9) {
+.awsui_tile-container_vj6p7_tp6ux_312.awsui_has-metadata_vj6p7_tp6ux_331.awsui_refresh_vj6p7_tp6ux_327:not(#\9) {
   padding-block-end: var(--space-scaled-s-aqzyko, 12px);
 }
-.awsui_tile-container_vj6p7_h9y4z_312.awsui_selected_vj6p7_h9y4z_337:not(#\9) {
+.awsui_tile-container_vj6p7_tp6ux_312.awsui_selected_vj6p7_tp6ux_337:not(#\9) {
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-k00wlz, #0972d3);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-k00wlz, #0972d3);
   background: var(--color-background-item-selected-hcx8l4, #f2f8fd);
 }
-.awsui_tile-container_vj6p7_h9y4z_312.awsui_disabled_vj6p7_h9y4z_342:not(#\9) {
+.awsui_tile-container_vj6p7_tp6ux_312.awsui_disabled_vj6p7_tp6ux_342:not(#\9) {
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-tiles-disabled-q5e1so, #e9ebed);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-tiles-disabled-q5e1so, #e9ebed);
   background: var(--color-background-tiles-disabled-0j6ior, #e9ebed);
 }
+.awsui_tile-container_vj6p7_tp6ux_312.awsui_readonly_vj6p7_tp6ux_347:not(#\9) {
+  background-color: var(--color-background-input-default-igdh5e, #ffffff);
+  border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
+  border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-rx2aau, #e9ebed);
+}
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tile-container_vj6p7_h9y4z_312:not(#\9) {
+  .awsui_tile-container_vj6p7_tp6ux_312:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tile-container_vj6p7_h9y4z_312:not(#\9), .awsui-mode-entering .awsui_tile-container_vj6p7_h9y4z_312:not(#\9) {
+.awsui-motion-disabled .awsui_tile-container_vj6p7_tp6ux_312:not(#\9), .awsui-mode-entering .awsui_tile-container_vj6p7_tp6ux_312:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_columns_vj6p7_h9y4z_358:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / -2);
   margin-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / -2);
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-1_vj6p7_h9y4z_364 > .awsui_tile-container_vj6p7_h9y4z_312:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-1_vj6p7_tp6ux_369 > .awsui_tile-container_vj6p7_tp6ux_312:not(#\9) {
   margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
   margin-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
   box-sizing: border-box;
   flex: 0 0 calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-1_vj6p7_h9y4z_364 > .awsui_tile-container_vj6p7_h9y4z_312.awsui_breakpoint-xs_vj6p7_h9y4z_371:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-1_vj6p7_tp6ux_369 > .awsui_tile-container_vj6p7_tp6ux_312.awsui_breakpoint-xs_vj6p7_tp6ux_376:not(#\9) {
   flex: 0 0 calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-1_vj6p7_h9y4z_364 > .awsui_tile-container_vj6p7_h9y4z_312.awsui_breakpoint-xxs_vj6p7_h9y4z_375:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-1_vj6p7_tp6ux_369 > .awsui_tile-container_vj6p7_tp6ux_312.awsui_breakpoint-xxs_vj6p7_tp6ux_380:not(#\9) {
   flex: 0 0 calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-2_vj6p7_h9y4z_379 > .awsui_tile-container_vj6p7_h9y4z_312:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-2_vj6p7_tp6ux_384 > .awsui_tile-container_vj6p7_tp6ux_312:not(#\9) {
   margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
   margin-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
   box-sizing: border-box;
   flex: 0 0 calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-2_vj6p7_h9y4z_379 > .awsui_tile-container_vj6p7_h9y4z_312.awsui_breakpoint-xs_vj6p7_h9y4z_371:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-2_vj6p7_tp6ux_384 > .awsui_tile-container_vj6p7_tp6ux_312.awsui_breakpoint-xs_vj6p7_tp6ux_376:not(#\9) {
   flex: 0 0 calc(50% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(50% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-2_vj6p7_h9y4z_379 > .awsui_tile-container_vj6p7_h9y4z_312.awsui_breakpoint-xxs_vj6p7_h9y4z_375:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-2_vj6p7_tp6ux_384 > .awsui_tile-container_vj6p7_tp6ux_312.awsui_breakpoint-xxs_vj6p7_tp6ux_380:not(#\9) {
   flex: 0 0 calc(50% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(50% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-3_vj6p7_h9y4z_394 > .awsui_tile-container_vj6p7_h9y4z_312:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-3_vj6p7_tp6ux_399 > .awsui_tile-container_vj6p7_tp6ux_312:not(#\9) {
   margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
   margin-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
   box-sizing: border-box;
   flex: 0 0 calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-3_vj6p7_h9y4z_394 > .awsui_tile-container_vj6p7_h9y4z_312.awsui_breakpoint-xs_vj6p7_h9y4z_371:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-3_vj6p7_tp6ux_399 > .awsui_tile-container_vj6p7_tp6ux_312.awsui_breakpoint-xs_vj6p7_tp6ux_376:not(#\9) {
   flex: 0 0 calc(33.3333333333% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(33.3333333333% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-3_vj6p7_h9y4z_394 > .awsui_tile-container_vj6p7_h9y4z_312.awsui_breakpoint-xxs_vj6p7_h9y4z_375:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-3_vj6p7_tp6ux_399 > .awsui_tile-container_vj6p7_tp6ux_312.awsui_breakpoint-xxs_vj6p7_tp6ux_380:not(#\9) {
   flex: 0 0 calc(50% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(50% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-4_vj6p7_h9y4z_409 > .awsui_tile-container_vj6p7_h9y4z_312:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-4_vj6p7_tp6ux_414 > .awsui_tile-container_vj6p7_tp6ux_312:not(#\9) {
   margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
   margin-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
   box-sizing: border-box;
   flex: 0 0 calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-4_vj6p7_h9y4z_409 > .awsui_tile-container_vj6p7_h9y4z_312.awsui_breakpoint-xs_vj6p7_h9y4z_371:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-4_vj6p7_tp6ux_414 > .awsui_tile-container_vj6p7_tp6ux_312.awsui_breakpoint-xs_vj6p7_tp6ux_376:not(#\9) {
   flex: 0 0 calc(25% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(25% - var(--space-grid-gutter-ieqn7e, 20px));
 }
-.awsui_columns_vj6p7_h9y4z_358.awsui_column-4_vj6p7_h9y4z_409 > .awsui_tile-container_vj6p7_h9y4z_312.awsui_breakpoint-xxs_vj6p7_h9y4z_375:not(#\9) {
+.awsui_columns_vj6p7_tp6ux_363.awsui_column-4_vj6p7_tp6ux_414 > .awsui_tile-container_vj6p7_tp6ux_312.awsui_breakpoint-xxs_vj6p7_tp6ux_380:not(#\9) {
   flex: 0 0 calc(50% - var(--space-grid-gutter-ieqn7e, 20px));
   max-inline-size: calc(50% - var(--space-grid-gutter-ieqn7e, 20px));
 }
 
-.awsui_control_vj6p7_h9y4z_425:not(#\9) {
+.awsui_control_vj6p7_tp6ux_430:not(#\9) {
   flex-grow: 1;
   margin-block-end: var(--space-s-34lx8l, 12px);
 }
-.awsui_control_vj6p7_h9y4z_425.awsui_no-image_vj6p7_h9y4z_429:not(#\9) {
+.awsui_control_vj6p7_tp6ux_430.awsui_no-image_vj6p7_tp6ux_434:not(#\9) {
   margin-block-end: 0;
 }
 
-.awsui_image_vj6p7_h9y4z_433:not(#\9) {
+.awsui_image_vj6p7_tp6ux_438:not(#\9) {
   text-align: center;
 }
-.awsui_image_vj6p7_h9y4z_433 > img:not(#\9) {
+.awsui_image_vj6p7_tp6ux_438 > img:not(#\9) {
   max-inline-size: 100%;
 }
-.awsui_image_vj6p7_h9y4z_433.awsui_disabled_vj6p7_h9y4z_342 > img:not(#\9) {
+.awsui_image_vj6p7_tp6ux_438.awsui_disabled_vj6p7_tp6ux_342 > img:not(#\9) {
   opacity: 0.3;
 }

package/tiles/styles.selectors.js

@@ -2,34 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "column-layout": "awsui_column-layout_vj6p7_h9y4z_97",
-  "grid": "awsui_grid_vj6p7_h9y4z_132",
-  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_h9y4z_138",
-  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_h9y4z_142",
-  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_h9y4z_150",
-  "grid-columns-1": "awsui_grid-columns-1_vj6p7_h9y4z_153",
-  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_h9y4z_153",
-  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_h9y4z_156",
-  "grid-columns-2": "awsui_grid-columns-2_vj6p7_h9y4z_159",
-  "grid-columns-3": "awsui_grid-columns-3_vj6p7_h9y4z_165",
-  "grid-columns-4": "awsui_grid-columns-4_vj6p7_h9y4z_171",
-  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_h9y4z_187",
-  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_h9y4z_220",
-  "root": "awsui_root_vj6p7_h9y4z_274",
-  "tile-container": "awsui_tile-container_vj6p7_h9y4z_312",
-  "refresh": "awsui_refresh_vj6p7_h9y4z_327",
-  "has-metadata": "awsui_has-metadata_vj6p7_h9y4z_331",
-  "selected": "awsui_selected_vj6p7_h9y4z_337",
-  "disabled": "awsui_disabled_vj6p7_h9y4z_342",
-  "columns": "awsui_columns_vj6p7_h9y4z_358",
-  "column-1": "awsui_column-1_vj6p7_h9y4z_364",
-  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_h9y4z_371",
-  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_h9y4z_375",
-  "column-2": "awsui_column-2_vj6p7_h9y4z_379",
-  "column-3": "awsui_column-3_vj6p7_h9y4z_394",
-  "column-4": "awsui_column-4_vj6p7_h9y4z_409",
-  "control": "awsui_control_vj6p7_h9y4z_425",
-  "no-image": "awsui_no-image_vj6p7_h9y4z_429",
-  "image": "awsui_image_vj6p7_h9y4z_433"
+  "column-layout": "awsui_column-layout_vj6p7_tp6ux_97",
+  "grid": "awsui_grid_vj6p7_tp6ux_132",
+  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_tp6ux_138",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_tp6ux_142",
+  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_tp6ux_150",
+  "grid-columns-1": "awsui_grid-columns-1_vj6p7_tp6ux_153",
+  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_tp6ux_153",
+  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_tp6ux_156",
+  "grid-columns-2": "awsui_grid-columns-2_vj6p7_tp6ux_159",
+  "grid-columns-3": "awsui_grid-columns-3_vj6p7_tp6ux_165",
+  "grid-columns-4": "awsui_grid-columns-4_vj6p7_tp6ux_171",
+  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_tp6ux_187",
+  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_tp6ux_220",
+  "root": "awsui_root_vj6p7_tp6ux_274",
+  "tile-container": "awsui_tile-container_vj6p7_tp6ux_312",
+  "refresh": "awsui_refresh_vj6p7_tp6ux_327",
+  "has-metadata": "awsui_has-metadata_vj6p7_tp6ux_331",
+  "selected": "awsui_selected_vj6p7_tp6ux_337",
+  "disabled": "awsui_disabled_vj6p7_tp6ux_342",
+  "readonly": "awsui_readonly_vj6p7_tp6ux_347",
+  "columns": "awsui_columns_vj6p7_tp6ux_363",
+  "column-1": "awsui_column-1_vj6p7_tp6ux_369",
+  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_tp6ux_376",
+  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_tp6ux_380",
+  "column-2": "awsui_column-2_vj6p7_tp6ux_384",
+  "column-3": "awsui_column-3_vj6p7_tp6ux_399",
+  "column-4": "awsui_column-4_vj6p7_tp6ux_414",
+  "control": "awsui_control_vj6p7_tp6ux_430",
+  "no-image": "awsui_no-image_vj6p7_tp6ux_434",
+  "image": "awsui_image_vj6p7_tp6ux_438"
 };
   

package/tiles/tile.d.ts

@@ -7,6 +7,7 @@ interface TileProps {
     name: string;
     breakpoint: ReturnType<typeof useContainerBreakpoints>[0];
     onChange: TilesProps['onChange'];
+    readOnly?: boolean;
 }
 export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/tiles/tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAK9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,IAAI,oFA4ChB,CAAC"}
+{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAK9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,oFA8ChB,CAAC"}

package/tiles/tile.js

@@ -7,13 +7,13 @@ import styles from './styles.css.js';
 import { fireNonCancelableEvent } from '../internal/events';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChange }, forwardedRef) => {
+export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChange, readOnly }, forwardedRef) => {
     const internalRef = useRef(null);
     const isVisualRefresh = useVisualRefresh();
     const mergedRef = useMergeRefs(internalRef, forwardedRef);
-    return (React.createElement("div", { className: clsx(styles['tile-container'], { [styles['has-metadata']]: item.description || item.image }, { [styles.selected]: selected }, { [styles.disabled]: !!item.disabled }, { [styles.refresh]: isVisualRefresh }, styles[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => {
+    return (React.createElement("div", { className: clsx(styles['tile-container'], { [styles['has-metadata']]: item.description || item.image }, { [styles.selected]: selected }, { [styles.disabled]: !!item.disabled }, { [styles.readonly]: readOnly }, { [styles.refresh]: isVisualRefresh }, styles[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => {
             var _a;
-            if (item.disabled) {
+            if (item.disabled || readOnly) {
                 return;
             }
             (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -22,7 +22,7 @@ export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChan
             }
         } },
         React.createElement("div", { className: clsx(styles.control, { [styles['no-image']]: !item.image }) },
-            React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: item.controlId })),
+            React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: item.controlId, readOnly: readOnly })),
         item.image && React.createElement("div", { className: clsx(styles.image, { [styles.disabled]: !!item.disabled }) }, item.image)));
 });
 //# sourceMappingURL=tile.js.map