@cloudscape-design/components 3.0.810 → 3.0.811

package/button-group/icon-button-item.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ButtonProps } from '../button/interfaces.js';
-import { CancelableEventHandler, ClickDetail } from '../internal/events/index.js';
+import { CancelableEventHandler } from '../internal/events/index.js';
 import { ButtonGroupProps } from './interfaces.js';
 declare const IconButtonItem: React.ForwardRefExoticComponent<{
     item: ButtonGroupProps.IconButton;
     showTooltip: boolean;
     showFeedback: boolean;
-    onItemClick?: CancelableEventHandler<ClickDetail> | undefined;
+    onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;
 } & React.RefAttributes<ButtonProps.Ref>>;
 export default IconButtonItem;
 //# sourceMappingURL=icon-button-item.d.ts.map

package/button-group/icon-button-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,QAAA,MAAM,cAAc;UAQR,iBAAiB,UAAU;iBACpB,OAAO;kBACN,OAAO;;yCA8C1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"icon-button-item.d.ts","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,sBAAsB,EAAuB,MAAM,6BAA6B,CAAC;AAE1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,QAAA,MAAM,cAAc;UAQR,iBAAiB,UAAU;iBACpB,OAAO;kBACN,OAAO;;yCAkD1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/button-group/icon-button-item.js

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { InternalButton } from '../button/internal.js';
 import Tooltip from '../internal/components/tooltip/index.js';
+import { fireCancelableEvent } from '../internal/events/index.js';
 import InternalLiveRegion from '../live-region/internal.js';
 import testUtilStyles from './test-classes/styles.css.js';
 const IconButtonItem = forwardRef(({ item, showTooltip, showFeedback, onItemClick, }, ref) => {
@@ -13,9 +14,11 @@ const IconButtonItem = forwardRef(({ item, showTooltip, showFeedback, onItemClic
     if (!hasIcon) {
         warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);
     }
+    const canShowTooltip = Boolean(showTooltip && !item.disabled && !item.loading);
+    const canShowFeedback = Boolean(showTooltip && showFeedback && item.popoverFeedback);
     return (React.createElement("div", { ref: containerRef },
-        React.createElement(InternalButton, { variant: "icon", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, iconName: hasIcon ? item.iconName : 'close', iconAlt: item.text, iconSvg: item.iconSvg, ariaLabel: item.text, onClick: onItemClick, ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
-        showTooltip && !item.disabled && !item.loading && (!showFeedback || item.popoverFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(InternalLiveRegion, { tagName: "span" }, item.popoverFeedback)) ||
+        React.createElement(InternalButton, { variant: "icon", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, __focusable: canShowFeedback, iconName: hasIcon ? item.iconName : 'close', iconUrl: item.iconUrl, iconSvg: item.iconSvg, iconAlt: item.text, ariaLabel: item.text, onClick: event => fireCancelableEvent(onItemClick, { id: item.id }, event), ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
+        (canShowTooltip || canShowFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(InternalLiveRegion, { tagName: "span" }, item.popoverFeedback)) ||
                 item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']) }))));
 });
 export default IconButtonItem;

package/button-group/icon-button-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button-item.js","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,OAAO,MAAM,yCAAyC,CAAC;AAE9D,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAG5D,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAE1D,MAAM,cAAc,GAAG,UAAU,CAC/B,CACE,EACE,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,WAAW,GAMZ,EACD,GAA+B,EAC/B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;IAE9D,IAAI,CAAC,OAAO,EAAE;QACZ,QAAQ,CAAC,aAAa,EAAE,kCAAkC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;KACtE;IAED,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY;QACpB,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC3C,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,iBACK,IAAI,CAAC,EAAE,iBACP,IAAI,CAAC,EAAE,EACpB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC,EACzE,OAAO,EAAC,EAAE,IAET,IAAI,CAAC,IAAI,CACK;QAChB,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAC5F,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EACH,CAAC,YAAY,IAAI,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,eAAe,CAAsB,CAAC;gBAChG,IAAI,CAAC,IAAI,EAEX,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,GAC/E,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { InternalButton } from '../button/internal.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { CancelableEventHandler, ClickDetail } from '../internal/events/index.js';\nimport InternalLiveRegion from '../live-region/internal.js';\nimport { ButtonGroupProps } from './interfaces.js';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\nconst IconButtonItem = forwardRef(\n  (\n    {\n      item,\n      showTooltip,\n      showFeedback,\n      onItemClick,\n    }: {\n      item: ButtonGroupProps.IconButton;\n      showTooltip: boolean;\n      showFeedback: boolean;\n      onItemClick?: CancelableEventHandler<ClickDetail>;\n    },\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const hasIcon = item.iconName || item.iconUrl || item.iconSvg;\n\n    if (!hasIcon) {\n      warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);\n    }\n\n    return (\n      <div ref={containerRef}>\n        <InternalButton\n          variant=\"icon\"\n          loading={item.loading}\n          loadingText={item.loadingText}\n          disabled={item.disabled}\n          iconName={hasIcon ? item.iconName : 'close'}\n          iconAlt={item.text}\n          iconSvg={item.iconSvg}\n          ariaLabel={item.text}\n          onClick={onItemClick}\n          ref={ref}\n          data-testid={item.id}\n          data-itemid={item.id}\n          className={clsx(testUtilStyles.item, testUtilStyles['button-group-item'])}\n          __title=\"\"\n        >\n          {item.text}\n        </InternalButton>\n        {showTooltip && !item.disabled && !item.loading && (!showFeedback || item.popoverFeedback) && (\n          <Tooltip\n            trackRef={containerRef}\n            trackKey={item.id}\n            value={\n              (showFeedback && <InternalLiveRegion tagName=\"span\">{item.popoverFeedback}</InternalLiveRegion>) ||\n              item.text\n            }\n            className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default IconButtonItem;\n"]}
+{"version":3,"file":"icon-button-item.js","sourceRoot":"","sources":["../../../src/button-group/icon-button-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,OAAO,MAAM,yCAAyC,CAAC;AAC9D,OAAO,EAA0B,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC1F,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAG5D,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAE1D,MAAM,cAAc,GAAG,UAAU,CAC/B,CACE,EACE,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,WAAW,GAMZ,EACD,GAA+B,EAC/B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;IAE9D,IAAI,CAAC,OAAO,EAAE;QACZ,QAAQ,CAAC,aAAa,EAAE,kCAAkC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;KACtE;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/E,MAAM,eAAe,GAAG,OAAO,CAAC,WAAW,IAAI,YAAY,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC;IACrF,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY;QACpB,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,eAAe,EAC5B,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAC1E,GAAG,EAAE,GAAG,iBACK,IAAI,CAAC,EAAE,iBACP,IAAI,CAAC,EAAE,EACpB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC,EACzE,OAAO,EAAC,EAAE,IAET,IAAI,CAAC,IAAI,CACK;QAChB,CAAC,cAAc,IAAI,eAAe,CAAC,IAAI,CACtC,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EACH,CAAC,YAAY,IAAI,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,eAAe,CAAsB,CAAC;gBAChG,IAAI,CAAC,IAAI,EAEX,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,GAC/E,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { InternalButton } from '../button/internal.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events/index.js';\nimport InternalLiveRegion from '../live-region/internal.js';\nimport { ButtonGroupProps } from './interfaces.js';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\nconst IconButtonItem = forwardRef(\n  (\n    {\n      item,\n      showTooltip,\n      showFeedback,\n      onItemClick,\n    }: {\n      item: ButtonGroupProps.IconButton;\n      showTooltip: boolean;\n      showFeedback: boolean;\n      onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n    },\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const hasIcon = item.iconName || item.iconUrl || item.iconSvg;\n\n    if (!hasIcon) {\n      warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);\n    }\n\n    const canShowTooltip = Boolean(showTooltip && !item.disabled && !item.loading);\n    const canShowFeedback = Boolean(showTooltip && showFeedback && item.popoverFeedback);\n    return (\n      <div ref={containerRef}>\n        <InternalButton\n          variant=\"icon\"\n          loading={item.loading}\n          loadingText={item.loadingText}\n          disabled={item.disabled}\n          __focusable={canShowFeedback}\n          iconName={hasIcon ? item.iconName : 'close'}\n          iconUrl={item.iconUrl}\n          iconSvg={item.iconSvg}\n          iconAlt={item.text}\n          ariaLabel={item.text}\n          onClick={event => fireCancelableEvent(onItemClick, { id: item.id }, event)}\n          ref={ref}\n          data-testid={item.id}\n          data-itemid={item.id}\n          className={clsx(testUtilStyles.item, testUtilStyles['button-group-item'])}\n          __title=\"\"\n        >\n          {item.text}\n        </InternalButton>\n        {(canShowTooltip || canShowFeedback) && (\n          <Tooltip\n            trackRef={containerRef}\n            trackKey={item.id}\n            value={\n              (showFeedback && <InternalLiveRegion tagName=\"span\">{item.popoverFeedback}</InternalLiveRegion>) ||\n              item.text\n            }\n            className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default IconButtonItem;\n"]}

package/button-group/item-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item-element.d.ts","sourceRoot":"","sources":["../../../src/button-group/item-element.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAoC,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAGjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,UAAU,gBAAgB;IACxB,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,OAAO,EAAE,IAAI,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACpD,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1E,WAAW,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CACxF;AAED,QAAA,MAAM,WAAW,0FA4GhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"item-element.d.ts","sourceRoot":"","sources":["../../../src/button-group/item-element.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAuB,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAGpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,UAAU,gBAAgB;IACxB,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,OAAO,EAAE,IAAI,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACpD,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1E,WAAW,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CACxF;AAED,QAAA,MAAM,WAAW,0FA4GhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/button-group/item-element.js

@@ -57,7 +57,7 @@ const ItemElement = forwardRef(({ item, dropdownExpandToViewport, tooltip, setTo
         if (hasPopoverFeedback) {
             setTooltip({ item: item.id, feedback: true });
         }
-        fireCancelableEvent(onItemClick, { id: 'id' in event.detail ? event.detail.id : item.id }, event);
+        fireCancelableEvent(onItemClick, event.detail, event);
     };
     return (React.createElement("div", { key: item.id, className: styles['item-wrapper'], ref: containerRef, onPointerEnter: () => onShowTooltipSoft(true), onPointerLeave: () => onShowTooltipSoft(false), onFocus: event => {
             // Showing no tooltip when the focus comes from inside the container.

package/button-group/item-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-element.js","sourceRoot":"","sources":["../../../src/button-group/item-element.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, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { ClickDetail, fireCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport IconButtonItem from './icon-button-item';\nimport { ButtonGroupProps } from './interfaces';\nimport MenuDropdownItem from './menu-dropdown-item';\n\nimport styles from './styles.css.js';\n\ninterface ItemElementProps {\n  item: ButtonGroupProps.Item;\n  dropdownExpandToViewport?: boolean;\n  tooltip: null | { item: string; feedback: boolean };\n  setTooltip: (tooltip: null | { item: string; feedback: boolean }) => void;\n  onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;\n}\n\nconst ItemElement = forwardRef(\n  (\n    { item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick }: ItemElementProps,\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n\n    useImperativeHandle(ref, () => ({\n      focus: () => {\n        buttonRef.current?.focus();\n      },\n    }));\n\n    useEffect(() => {\n      if (tooltip?.item !== item.id) {\n        return;\n      }\n\n      const close = () => {\n        setTooltip(null);\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (event.target && containerRef.current?.contains(event.target as HTMLElement)) {\n          return;\n        }\n\n        close();\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      window.addEventListener('pointerdown', handlePointerDownEvent);\n      window.addEventListener('keydown', handleKeyDownEvent);\n\n      return () => {\n        window.removeEventListener('pointerdown', handlePointerDownEvent);\n        window.removeEventListener('keydown', handleKeyDownEvent);\n      };\n    }, [item.id, tooltip, setTooltip]);\n\n    const onShowTooltipSoft = (show: boolean) => {\n      if (!tooltip?.feedback) {\n        setTooltip(show ? { item: item.id, feedback: false } : null);\n      }\n    };\n\n    const onShowTooltipHard = (show: boolean) => {\n      if (!show && item.id !== tooltip?.item) {\n        return;\n      }\n\n      setTooltip(show ? { item: item.id, feedback: false } : null);\n    };\n\n    const onClickHandler = (event: CustomEvent<ButtonGroupProps.ItemClickDetails | ClickDetail>) => {\n      const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;\n\n      if (hasPopoverFeedback) {\n        setTooltip({ item: item.id, feedback: true });\n      }\n\n      fireCancelableEvent(onItemClick, { id: 'id' in event.detail ? event.detail.id : item.id }, event);\n    };\n\n    return (\n      <div\n        key={item.id}\n        className={styles['item-wrapper']}\n        ref={containerRef}\n        onPointerEnter={() => onShowTooltipSoft(true)}\n        onPointerLeave={() => onShowTooltipSoft(false)}\n        onFocus={event => {\n          // Showing no tooltip when the focus comes from inside the container.\n          // This is needed to prevent the tooltip after a menu closes with item selection or Escape.\n          if (event && event.relatedTarget && nodeBelongs(containerRef.current, event.relatedTarget)) {\n            return;\n          }\n          onShowTooltipHard(true);\n        }}\n        onBlur={() => onShowTooltipHard(false)}\n      >\n        {item.type === 'icon-button' && (\n          <IconButtonItem\n            ref={buttonRef}\n            item={item}\n            onItemClick={onClickHandler}\n            showTooltip={tooltip?.item === item.id}\n            showFeedback={!!tooltip?.feedback}\n          />\n        )}\n        {item.type === 'menu-dropdown' && (\n          <MenuDropdownItem\n            ref={buttonRef}\n            item={item}\n            showTooltip={tooltip?.item === item.id}\n            onItemClick={onClickHandler}\n            expandToViewport={dropdownExpandToViewport}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default ItemElement;\n"]}
+{"version":3,"file":"item-element.js","sourceRoot":"","sources":["../../../src/button-group/item-element.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, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { fireCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport IconButtonItem from './icon-button-item';\nimport { ButtonGroupProps } from './interfaces';\nimport MenuDropdownItem from './menu-dropdown-item';\n\nimport styles from './styles.css.js';\n\ninterface ItemElementProps {\n  item: ButtonGroupProps.Item;\n  dropdownExpandToViewport?: boolean;\n  tooltip: null | { item: string; feedback: boolean };\n  setTooltip: (tooltip: null | { item: string; feedback: boolean }) => void;\n  onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;\n}\n\nconst ItemElement = forwardRef(\n  (\n    { item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick }: ItemElementProps,\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n\n    useImperativeHandle(ref, () => ({\n      focus: () => {\n        buttonRef.current?.focus();\n      },\n    }));\n\n    useEffect(() => {\n      if (tooltip?.item !== item.id) {\n        return;\n      }\n\n      const close = () => {\n        setTooltip(null);\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (event.target && containerRef.current?.contains(event.target as HTMLElement)) {\n          return;\n        }\n\n        close();\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      window.addEventListener('pointerdown', handlePointerDownEvent);\n      window.addEventListener('keydown', handleKeyDownEvent);\n\n      return () => {\n        window.removeEventListener('pointerdown', handlePointerDownEvent);\n        window.removeEventListener('keydown', handleKeyDownEvent);\n      };\n    }, [item.id, tooltip, setTooltip]);\n\n    const onShowTooltipSoft = (show: boolean) => {\n      if (!tooltip?.feedback) {\n        setTooltip(show ? { item: item.id, feedback: false } : null);\n      }\n    };\n\n    const onShowTooltipHard = (show: boolean) => {\n      if (!show && item.id !== tooltip?.item) {\n        return;\n      }\n\n      setTooltip(show ? { item: item.id, feedback: false } : null);\n    };\n\n    const onClickHandler = (event: CustomEvent<ButtonGroupProps.ItemClickDetails>) => {\n      const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;\n\n      if (hasPopoverFeedback) {\n        setTooltip({ item: item.id, feedback: true });\n      }\n\n      fireCancelableEvent(onItemClick, event.detail, event);\n    };\n\n    return (\n      <div\n        key={item.id}\n        className={styles['item-wrapper']}\n        ref={containerRef}\n        onPointerEnter={() => onShowTooltipSoft(true)}\n        onPointerLeave={() => onShowTooltipSoft(false)}\n        onFocus={event => {\n          // Showing no tooltip when the focus comes from inside the container.\n          // This is needed to prevent the tooltip after a menu closes with item selection or Escape.\n          if (event && event.relatedTarget && nodeBelongs(containerRef.current, event.relatedTarget)) {\n            return;\n          }\n          onShowTooltipHard(true);\n        }}\n        onBlur={() => onShowTooltipHard(false)}\n      >\n        {item.type === 'icon-button' && (\n          <IconButtonItem\n            ref={buttonRef}\n            item={item}\n            onItemClick={onClickHandler}\n            showTooltip={tooltip?.item === item.id}\n            showFeedback={!!tooltip?.feedback}\n          />\n        )}\n        {item.type === 'menu-dropdown' && (\n          <MenuDropdownItem\n            ref={buttonRef}\n            item={item}\n            showTooltip={tooltip?.item === item.id}\n            onItemClick={onClickHandler}\n            expandToViewport={dropdownExpandToViewport}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default ItemElement;\n"]}

package/button-group/menu-dropdown-item.js

@@ -12,9 +12,9 @@ const MenuDropdownItem = React.forwardRef(({ item, showTooltip, onItemClick, exp
     const onClickHandler = (event) => {
         fireCancelableEvent(onItemClick, { id: event.detail.id }, event);
     };
-    return (React.createElement(ButtonDropdown, { ref: ref, variant: "icon", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, items: item.items, onItemClick: onClickHandler, expandToViewport: expandToViewport, ariaLabel: item.text, className: testUtilStyles['button-group-item'], "data-testid": item.id, customTriggerBuilder: ({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (React.createElement("div", { ref: containerRef },
+    return (React.createElement(ButtonDropdown, { ref: ref, variant: "icon", items: item.items, onItemClick: onClickHandler, expandToViewport: expandToViewport, ariaLabel: item.text, className: testUtilStyles['button-group-item'], "data-testid": item.id, customTriggerBuilder: ({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (React.createElement("div", { ref: containerRef },
             !isOpen && showTooltip && !item.disabled && !item.loading && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']) })),
-            React.createElement(InternalButton, { ref: triggerRef, variant: "icon", ariaLabel: ariaLabel, "data-itemid": item.id, ariaExpanded: ariaExpanded, className: clsx(testUtilStyles.item, testUtilsClass), iconName: "ellipsis", onClick: onClick, __title: "" }))) }));
+            React.createElement(InternalButton, { ref: triggerRef, variant: "icon", ariaLabel: ariaLabel, "data-itemid": item.id, ariaExpanded: ariaExpanded, className: clsx(testUtilStyles.item, testUtilsClass), iconName: "ellipsis", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, onClick: onClick, __title: "" }))) }));
 });
 export default MenuDropdownItem;
 //# sourceMappingURL=menu-dropdown-item.js.map

package/button-group/menu-dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAS1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAyB,EAC3E,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,GAC/E,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","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 InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n  item: ButtonGroupProps.MenuDropdown;\n  showTooltip: boolean;\n  onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n  (\n    { item, showTooltip, onItemClick, expandToViewport }: MenuDropdownItemProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n      fireCancelableEvent(onItemClick, { id: event.detail.id }, event);\n    };\n\n    return (\n      <ButtonDropdown\n        ref={ref}\n        variant=\"icon\"\n        loading={item.loading}\n        loadingText={item.loadingText}\n        disabled={item.disabled}\n        items={item.items}\n        onItemClick={onClickHandler}\n        expandToViewport={expandToViewport}\n        ariaLabel={item.text}\n        className={testUtilStyles['button-group-item']}\n        data-testid={item.id}\n        customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n          <div ref={containerRef}>\n            {!isOpen && showTooltip && !item.disabled && !item.loading && (\n              <Tooltip\n                trackRef={containerRef}\n                trackKey={item.id}\n                value={item.text}\n                className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n              />\n            )}\n            <InternalButton\n              ref={triggerRef}\n              variant=\"icon\"\n              ariaLabel={ariaLabel}\n              data-itemid={item.id}\n              ariaExpanded={ariaExpanded}\n              className={clsx(testUtilStyles.item, testUtilsClass)}\n              iconName=\"ellipsis\"\n              onClick={onClick}\n              __title=\"\"\n            />\n          </div>\n        )}\n      />\n    );\n  }\n);\n\nexport default MenuDropdownItem;\n"]}
+{"version":3,"file":"menu-dropdown-item.js","sourceRoot":"","sources":["../../../src/button-group/menu-dropdown-item.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,EAA0B,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGjF,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAS1D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAyB,EAC3E,GAAuC,EACvC,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,CAAC,KAAwD,EAAE,EAAE;QAClF,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,iBACjC,IAAI,CAAC,EAAE,EACpB,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAClG,6BAAK,GAAG,EAAE,YAAY;YACnB,CAAC,MAAM,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAC5D,oBAAC,OAAO,IACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,sBAAsB,CAAC,CAAC,GAC/E,CACH;YACD,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,SAAS,iBACP,IAAI,CAAC,EAAE,EACpB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,EACpD,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,EAAE,GACV,CACE,CACP,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","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 InternalButton from '../button/internal';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport ButtonDropdown from '../button-dropdown/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport { CancelableEventHandler, fireCancelableEvent } from '../internal/events';\nimport { ButtonGroupProps } from './interfaces';\n\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface MenuDropdownItemProps {\n  item: ButtonGroupProps.MenuDropdown;\n  showTooltip: boolean;\n  onItemClick?: CancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  expandToViewport?: boolean;\n}\n\nconst MenuDropdownItem = React.forwardRef(\n  (\n    { item, showTooltip, onItemClick, expandToViewport }: MenuDropdownItemProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const onClickHandler = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => {\n      fireCancelableEvent(onItemClick, { id: event.detail.id }, event);\n    };\n\n    return (\n      <ButtonDropdown\n        ref={ref}\n        variant=\"icon\"\n        items={item.items}\n        onItemClick={onClickHandler}\n        expandToViewport={expandToViewport}\n        ariaLabel={item.text}\n        className={testUtilStyles['button-group-item']}\n        data-testid={item.id}\n        customTriggerBuilder={({ onClick, isOpen, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n          <div ref={containerRef}>\n            {!isOpen && showTooltip && !item.disabled && !item.loading && (\n              <Tooltip\n                trackRef={containerRef}\n                trackKey={item.id}\n                value={item.text}\n                className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}\n              />\n            )}\n            <InternalButton\n              ref={triggerRef}\n              variant=\"icon\"\n              ariaLabel={ariaLabel}\n              data-itemid={item.id}\n              ariaExpanded={ariaExpanded}\n              className={clsx(testUtilStyles.item, testUtilsClass)}\n              iconName=\"ellipsis\"\n              loading={item.loading}\n              loadingText={item.loadingText}\n              disabled={item.disabled}\n              onClick={onClick}\n              __title=\"\"\n            />\n          </div>\n        )}\n      />\n    );\n  }\n);\n\nexport default MenuDropdownItem;\n"]}

package/internal/base-component/styles.scoped.css

@@ -607,6 +607,7 @@
   --space-table-header-tools-bottom-25ubsj:0px;
   --space-table-header-tools-full-page-bottom-xulfq9:4px;
   --space-table-horizontal-8davlm:20px;
+  --space-tile-gutter-fuuodu:24px;
   --space-scaled-2x-xxs-7v8ivz:4px;
   --space-scaled-2x-m-owtj1o:16px;
   --space-scaled-2x-l-ujnz41:20px;
@@ -1061,6 +1062,7 @@
   --space-panel-split-bottom-qwdduf:16px;
   --space-tabs-content-top-dedu0k:8px;
   --space-table-header-focus-outline-gutter-7js4en:-1px;
+  --space-tile-gutter-fuuodu:16px;
   --space-scaled-2x-xxs-7v8ivz:0px;
   --space-scaled-2x-m-owtj1o:8px;
   --space-scaled-2x-l-ujnz41:12px;

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (20ab4cca)";
+export var PACKAGE_VERSION = "3.0.0 (65af5c4a)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (20ab4cca)",
+  "PACKAGE_VERSION": "3.0.0 (65af5c4a)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/internal/generated/styles/tokens.d.ts

@@ -672,6 +672,7 @@ export const spaceTableHeaderHorizontal: string;
 export const spaceTableHeaderToolsBottom: string;
 export const spaceTableHeaderToolsFullPageBottom: string;
 export const spaceTableHorizontal: string;
+export const spaceTileGutter: string;
 export const spaceScaled2xNone: string;
 export const spaceScaled2xXxxs: string;
 export const spaceScaled2xXxs: string;

package/internal/generated/styles/tokens.js

@@ -672,6 +672,7 @@ export var spaceTableHeaderHorizontal = "var(--space-table-header-horizontal-wl3
 export var spaceTableHeaderToolsBottom = "var(--space-table-header-tools-bottom-25ubsj, 0px)";
 export var spaceTableHeaderToolsFullPageBottom = "var(--space-table-header-tools-full-page-bottom-xulfq9, 4px)";
 export var spaceTableHorizontal = "var(--space-table-horizontal-8davlm, 20px)";
+export var spaceTileGutter = "var(--space-tile-gutter-fuuodu, 24px)";
 export var spaceScaled2xNone = "var(--space-scaled-2x-none-8i5al4, 0px)";
 export var spaceScaled2xXxxs = "var(--space-scaled-2x-xxxs-fp07j9, 2px)";
 export var spaceScaled2xXxs = "var(--space-scaled-2x-xxs-7v8ivz, 4px)";

package/internal/generated/theming/index.cjs

@@ -2312,6 +2312,10 @@ module.exports.preset = {
         "comfortable": "{spaceContainerHorizontal}",
         "compact": "{spaceContainerHorizontal}"
       },
+      "spaceTileGutter": {
+        "comfortable": "{spaceXl}",
+        "compact": "{spaceM}"
+      },
       "spaceScaled2xNone": {
         "comfortable": "{spaceNone}",
         "compact": "{spaceNone}"
@@ -2778,6 +2782,10 @@ module.exports.preset = {
             "comfortable": "{spaceContainerHorizontal}",
             "compact": "{spaceContainerHorizontal}"
           },
+          "spaceTileGutter": {
+            "comfortable": "{spaceXl}",
+            "compact": "{spaceM}"
+          },
           "spaceScaled2xNone": {
             "comfortable": "{spaceNone}",
             "compact": "{spaceNone}"
@@ -10061,6 +10069,7 @@ module.exports.preset = {
       "spaceTableHeaderToolsBottom": "density",
       "spaceTableHeaderToolsFullPageBottom": "density",
       "spaceTableHorizontal": "density",
+      "spaceTileGutter": "density",
       "spaceScaled2xNone": "density",
       "spaceScaled2xXxxs": "density",
       "spaceScaled2xXxs": "density",
@@ -11395,6 +11404,7 @@ module.exports.preset = {
     "spaceTableHeaderToolsBottom": "space-table-header-tools-bottom",
     "spaceTableHeaderToolsFullPageBottom": "space-table-header-tools-full-page-bottom",
     "spaceTableHorizontal": "space-table-horizontal",
+    "spaceTileGutter": "space-tile-gutter",
     "spaceScaled2xNone": "space-scaled-2x-none",
     "spaceScaled2xXxxs": "space-scaled-2x-xxxs",
     "spaceScaled2xXxs": "space-scaled-2x-xxs",
@@ -12127,6 +12137,7 @@ module.exports.preset = {
     "spaceTableHeaderToolsBottom": "--space-table-header-tools-bottom-25ubsj",
     "spaceTableHeaderToolsFullPageBottom": "--space-table-header-tools-full-page-bottom-xulfq9",
     "spaceTableHorizontal": "--space-table-horizontal-8davlm",
+    "spaceTileGutter": "--space-tile-gutter-fuuodu",
     "spaceScaled2xNone": "--space-scaled-2x-none-8i5al4",
     "spaceScaled2xXxxs": "--space-scaled-2x-xxxs-fp07j9",
     "spaceScaled2xXxs": "--space-scaled-2x-xxs-7v8ivz",

package/internal/generated/theming/index.js

@@ -2312,6 +2312,10 @@ export var preset = {
         "comfortable": "{spaceContainerHorizontal}",
         "compact": "{spaceContainerHorizontal}"
       },
+      "spaceTileGutter": {
+        "comfortable": "{spaceXl}",
+        "compact": "{spaceM}"
+      },
       "spaceScaled2xNone": {
         "comfortable": "{spaceNone}",
         "compact": "{spaceNone}"
@@ -2778,6 +2782,10 @@ export var preset = {
             "comfortable": "{spaceContainerHorizontal}",
             "compact": "{spaceContainerHorizontal}"
           },
+          "spaceTileGutter": {
+            "comfortable": "{spaceXl}",
+            "compact": "{spaceM}"
+          },
           "spaceScaled2xNone": {
             "comfortable": "{spaceNone}",
             "compact": "{spaceNone}"
@@ -10061,6 +10069,7 @@ export var preset = {
       "spaceTableHeaderToolsBottom": "density",
       "spaceTableHeaderToolsFullPageBottom": "density",
       "spaceTableHorizontal": "density",
+      "spaceTileGutter": "density",
       "spaceScaled2xNone": "density",
       "spaceScaled2xXxxs": "density",
       "spaceScaled2xXxs": "density",
@@ -11395,6 +11404,7 @@ export var preset = {
     "spaceTableHeaderToolsBottom": "space-table-header-tools-bottom",
     "spaceTableHeaderToolsFullPageBottom": "space-table-header-tools-full-page-bottom",
     "spaceTableHorizontal": "space-table-horizontal",
+    "spaceTileGutter": "space-tile-gutter",
     "spaceScaled2xNone": "space-scaled-2x-none",
     "spaceScaled2xXxxs": "space-scaled-2x-xxxs",
     "spaceScaled2xXxs": "space-scaled-2x-xxs",
@@ -12127,6 +12137,7 @@ export var preset = {
     "spaceTableHeaderToolsBottom": "--space-table-header-tools-bottom-25ubsj",
     "spaceTableHeaderToolsFullPageBottom": "--space-table-header-tools-full-page-bottom-xulfq9",
     "spaceTableHorizontal": "--space-table-horizontal-8davlm",
+    "spaceTileGutter": "--space-tile-gutter-fuuodu",
     "spaceScaled2xNone": "--space-scaled-2x-none-8i5al4",
     "spaceScaled2xXxxs": "--space-scaled-2x-xxxs-fp07j9",
     "spaceScaled2xXxs": "--space-scaled-2x-xxs-7v8ivz",

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "20ab4cca291efea5947e91e7319e81216f4b25ad"
+  "commit": "65af5c4aad5a36226112c751787aaa4f61c1848b"
 }

package/package.json

@@ -128,7 +128,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.810",
+  "version": "3.0.811",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/tiles/styles.css.js

@@ -1,35 +1,35 @@
 
     import './styles.scoped.css';
     export default {
-  "column-layout": "awsui_column-layout_vj6p7_173h1_185",
-  "grid": "awsui_grid_vj6p7_173h1_220",
-  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_173h1_226",
-  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_173h1_230",
-  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_173h1_238",
-  "grid-columns-1": "awsui_grid-columns-1_vj6p7_173h1_241",
-  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_173h1_241",
-  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_173h1_244",
-  "grid-columns-2": "awsui_grid-columns-2_vj6p7_173h1_247",
-  "grid-columns-3": "awsui_grid-columns-3_vj6p7_173h1_253",
-  "grid-columns-4": "awsui_grid-columns-4_vj6p7_173h1_259",
-  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_173h1_275",
-  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_173h1_308",
-  "root": "awsui_root_vj6p7_173h1_358",
-  "tile-container": "awsui_tile-container_vj6p7_173h1_396",
-  "refresh": "awsui_refresh_vj6p7_173h1_421",
-  "has-metadata": "awsui_has-metadata_vj6p7_173h1_425",
-  "selected": "awsui_selected_vj6p7_173h1_431",
-  "disabled": "awsui_disabled_vj6p7_173h1_436",
-  "readonly": "awsui_readonly_vj6p7_173h1_441",
-  "columns": "awsui_columns_vj6p7_173h1_447",
-  "column-1": "awsui_column-1_vj6p7_173h1_453",
-  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_173h1_460",
-  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_173h1_464",
-  "column-2": "awsui_column-2_vj6p7_173h1_468",
-  "column-3": "awsui_column-3_vj6p7_173h1_483",
-  "column-4": "awsui_column-4_vj6p7_173h1_498",
-  "control": "awsui_control_vj6p7_173h1_514",
-  "no-image": "awsui_no-image_vj6p7_173h1_518",
-  "image": "awsui_image_vj6p7_173h1_522"
+  "column-layout": "awsui_column-layout_vj6p7_dtuug_185",
+  "grid": "awsui_grid_vj6p7_dtuug_220",
+  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_dtuug_226",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_dtuug_230",
+  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_dtuug_238",
+  "grid-columns-1": "awsui_grid-columns-1_vj6p7_dtuug_241",
+  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_dtuug_241",
+  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_dtuug_244",
+  "grid-columns-2": "awsui_grid-columns-2_vj6p7_dtuug_247",
+  "grid-columns-3": "awsui_grid-columns-3_vj6p7_dtuug_253",
+  "grid-columns-4": "awsui_grid-columns-4_vj6p7_dtuug_259",
+  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_dtuug_275",
+  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_dtuug_308",
+  "root": "awsui_root_vj6p7_dtuug_358",
+  "tile-container": "awsui_tile-container_vj6p7_dtuug_396",
+  "refresh": "awsui_refresh_vj6p7_dtuug_421",
+  "has-metadata": "awsui_has-metadata_vj6p7_dtuug_425",
+  "selected": "awsui_selected_vj6p7_dtuug_431",
+  "disabled": "awsui_disabled_vj6p7_dtuug_436",
+  "readonly": "awsui_readonly_vj6p7_dtuug_441",
+  "columns": "awsui_columns_vj6p7_dtuug_447",
+  "column-1": "awsui_column-1_vj6p7_dtuug_454",
+  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_dtuug_461",
+  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_dtuug_465",
+  "column-2": "awsui_column-2_vj6p7_dtuug_469",
+  "column-3": "awsui_column-3_vj6p7_dtuug_484",
+  "column-4": "awsui_column-4_vj6p7_dtuug_499",
+  "control": "awsui_control_vj6p7_dtuug_515",
+  "no-image": "awsui_no-image_vj6p7_dtuug_519",
+  "image": "awsui_image_vj6p7_dtuug_523"
 };
   

package/tiles/styles.scoped.css

@@ -182,7 +182,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_173h1_185:not(#\9) {
+div.awsui_column-layout_vj6p7_dtuug_185:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -218,145 +218,145 @@ div.awsui_column-layout_vj6p7_173h1_185:not(#\9) {
   -moz-osx-font-smoothing: auto;
   word-wrap: break-word;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220:not(#\9) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220: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_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-no-gutters_vj6p7_173h1_226:not(#\9) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-no-gutters_vj6p7_dtuug_226:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230:not(#\9) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230:not(#\9) {
   margin-block: calc(-1 * var(--space-grid-gutter-ieqn7e, 20px) / 2);
   margin-inline: calc(-1 * var(--space-grid-gutter-ieqn7e, 20px));
   /* stylelint-disable-next-line selector-max-universal */
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230 > *:not(#\9) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230 > *:not(#\9) {
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-cx07f2, #c6c6cd);
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230.awsui_grid-breakpoint-default_vj6p7_173h1_238 > *:not(#\9):nth-child(1n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230.awsui_grid-breakpoint-default_vj6p7_dtuug_238 > *:not(#\9):nth-child(1n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230.awsui_grid-columns-1_vj6p7_173h1_241.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-child(1n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230.awsui_grid-columns-1_vj6p7_dtuug_241.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-child(1n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230.awsui_grid-columns-1_vj6p7_173h1_241.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-child(1n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230.awsui_grid-columns-1_vj6p7_dtuug_241.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-child(1n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230.awsui_grid-columns-2_vj6p7_173h1_247.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230.awsui_grid-columns-2_vj6p7_dtuug_247.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230.awsui_grid-columns-2_vj6p7_173h1_247.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230.awsui_grid-columns-2_vj6p7_dtuug_247.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230.awsui_grid-columns-3_vj6p7_173h1_253.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230.awsui_grid-columns-3_vj6p7_dtuug_253.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230.awsui_grid-columns-3_vj6p7_173h1_253.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-child(3n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230.awsui_grid-columns-3_vj6p7_dtuug_253.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-child(3n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-variant-text-grid_vj6p7_173h1_230.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-variant-text-grid_vj6p7_dtuug_230.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-child(4n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220:not(#\9):not(.awsui_grid-no-gutters_vj6p7_173h1_226) > * {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220:not(#\9):not(.awsui_grid-no-gutters_vj6p7_dtuug_226) > * {
   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_173h1_185 > .awsui_grid_vj6p7_173h1_220:not(#\9):not(.awsui_grid-no-gutters_vj6p7_173h1_226).awsui_grid-variant-text-grid_vj6p7_173h1_230 > * {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220:not(#\9):not(.awsui_grid-no-gutters_vj6p7_dtuug_226).awsui_grid-variant-text-grid_vj6p7_dtuug_230 > * {
   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_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275:not(#\9) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275:not(#\9) {
   /* stylelint-disable-next-line selector-max-universal */
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275 > *:not(#\9) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275 > *:not(#\9) {
   border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-cx07f2, #c6c6cd);
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275.awsui_grid-breakpoint-default_vj6p7_173h1_238 > *:not(#\9):nth-child(1n) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275.awsui_grid-breakpoint-default_vj6p7_dtuug_238 > *:not(#\9):nth-child(1n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275.awsui_grid-columns-1_vj6p7_173h1_241.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-child(1n) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275.awsui_grid-columns-1_vj6p7_dtuug_241.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-child(1n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275.awsui_grid-columns-1_vj6p7_173h1_241.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-child(1n) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275.awsui_grid-columns-1_vj6p7_dtuug_241.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-child(1n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275.awsui_grid-columns-2_vj6p7_173h1_247.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275.awsui_grid-columns-2_vj6p7_dtuug_247.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275.awsui_grid-columns-2_vj6p7_173h1_247.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275.awsui_grid-columns-2_vj6p7_dtuug_247.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275.awsui_grid-columns-3_vj6p7_173h1_253.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275.awsui_grid-columns-3_vj6p7_dtuug_253.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275.awsui_grid-columns-3_vj6p7_173h1_253.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-child(3n) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275.awsui_grid-columns-3_vj6p7_dtuug_253.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-child(3n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-vertical-borders_vj6p7_173h1_275.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-child(4n) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-vertical-borders_vj6p7_dtuug_275.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-child(4n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308:not(#\9) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308:not(#\9) {
   /* stylelint-disable selector-max-universal */
   /* stylelint-enable selector-max-universal */
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308 > *:not(#\9) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308 > *:not(#\9) {
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-cx07f2, #c6c6cd);
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308 > *:not(#\9):last-child {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308 > *:not(#\9):last-child {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-2_vj6p7_173h1_247.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-2_vj6p7_dtuug_247.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-2_vj6p7_173h1_247.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-2_vj6p7_dtuug_247.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-3_vj6p7_173h1_253.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-3_vj6p7_dtuug_253.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-3_vj6p7_173h1_253.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-last-child(2):nth-child(3n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-3_vj6p7_dtuug_253.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-last-child(2):nth-child(3n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-3_vj6p7_173h1_253.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-last-child(2):nth-child(3n+2) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-3_vj6p7_dtuug_253.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-last-child(2):nth-child(3n+2) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-3_vj6p7_173h1_253.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-last-child(3):nth-child(3n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-3_vj6p7_dtuug_253.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-last-child(3):nth-child(3n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xxs_vj6p7_173h1_241 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xxs_vj6p7_dtuug_241 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-last-child(2):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-last-child(2):nth-child(4n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-last-child(2):nth-child(4n+2) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-last-child(2):nth-child(4n+2) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-last-child(2):nth-child(4n+3) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-last-child(2):nth-child(4n+3) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-last-child(3):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-last-child(3):nth-child(4n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-last-child(3):nth-child(4n+2) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-last-child(3):nth-child(4n+2) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid-horizontal-borders_vj6p7_173h1_308.awsui_grid-columns-4_vj6p7_173h1_259.awsui_grid-breakpoint-xs_vj6p7_173h1_244 > *:not(#\9):nth-last-child(4):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_dtuug_185 > .awsui_grid_vj6p7_dtuug_220.awsui_grid-horizontal-borders_vj6p7_dtuug_308.awsui_grid-columns-4_vj6p7_dtuug_259.awsui_grid-breakpoint-xs_vj6p7_dtuug_244 > *:not(#\9):nth-last-child(4):nth-child(4n+1) {
   border-block-end-width: 0;
 }
 
-.awsui_root_vj6p7_173h1_358:not(#\9) {
+.awsui_root_vj6p7_dtuug_358:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -395,7 +395,7 @@ div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid
   display: block;
 }
 
-.awsui_tile-container_vj6p7_173h1_396:not(#\9) {
+.awsui_tile-container_vj6p7_dtuug_396:not(#\9) {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -411,122 +411,123 @@ div.awsui_column-layout_vj6p7_173h1_185 > .awsui_grid_vj6p7_173h1_220.awsui_grid
   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);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tile-container_vj6p7_173h1_396:not(#\9) {
+  .awsui_tile-container_vj6p7_dtuug_396:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tile-container_vj6p7_173h1_396:not(#\9), .awsui-mode-entering .awsui_tile-container_vj6p7_173h1_396:not(#\9) {
+.awsui-motion-disabled .awsui_tile-container_vj6p7_dtuug_396:not(#\9), .awsui-mode-entering .awsui_tile-container_vj6p7_dtuug_396:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_tile-container_vj6p7_173h1_396.awsui_refresh_vj6p7_173h1_421:not(#\9) {
+.awsui_tile-container_vj6p7_dtuug_396.awsui_refresh_vj6p7_dtuug_421:not(#\9) {
   padding-block: var(--space-xs-zb16t3, 8px);
   padding-inline: var(--space-s-34lx8l, 12px);
 }
-.awsui_tile-container_vj6p7_173h1_396.awsui_has-metadata_vj6p7_173h1_425:not(#\9) {
+.awsui_tile-container_vj6p7_dtuug_396.awsui_has-metadata_vj6p7_dtuug_425:not(#\9) {
   padding-block-end: var(--space-s-34lx8l, 12px);
 }
-.awsui_tile-container_vj6p7_173h1_396.awsui_has-metadata_vj6p7_173h1_425.awsui_refresh_vj6p7_173h1_421:not(#\9) {
+.awsui_tile-container_vj6p7_dtuug_396.awsui_has-metadata_vj6p7_dtuug_425.awsui_refresh_vj6p7_dtuug_421:not(#\9) {
   padding-block-end: var(--space-scaled-s-aqzyko, 12px);
 }
-.awsui_tile-container_vj6p7_173h1_396.awsui_selected_vj6p7_173h1_431:not(#\9) {
+.awsui_tile-container_vj6p7_dtuug_396.awsui_selected_vj6p7_dtuug_431:not(#\9) {
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-m769ej, #006ce0);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-m769ej, #006ce0);
   background: var(--color-background-item-selected-njak80, #f0fbff);
 }
-.awsui_tile-container_vj6p7_173h1_396.awsui_disabled_vj6p7_173h1_436:not(#\9) {
+.awsui_tile-container_vj6p7_dtuug_396.awsui_disabled_vj6p7_dtuug_436:not(#\9) {
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-tiles-disabled-9w9xuo, #ebebf0);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-tiles-disabled-9w9xuo, #ebebf0);
   background: var(--color-background-tiles-disabled-ozblza, #ebebf0);
 }
-.awsui_tile-container_vj6p7_173h1_396.awsui_readonly_vj6p7_173h1_441:not(#\9) {
+.awsui_tile-container_vj6p7_dtuug_396.awsui_readonly_vj6p7_dtuug_441:not(#\9) {
   background-color: var(--color-background-input-default-u56ls1, #ffffff);
   border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
   border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
 }
 
-.awsui_columns_vj6p7_173h1_447:not(#\9) {
+.awsui_columns_vj6p7_dtuug_447: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);
+  margin-block: calc(var(--space-tile-gutter-fuuodu, 24px) / -4);
+  margin-inline-start: calc(var(--space-tile-gutter-fuuodu, 24px) / -4);
+  margin-inline-end: calc(var(--space-tile-gutter-fuuodu, 24px) / -4);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-1_vj6p7_173h1_453 > .awsui_tile-container_vj6p7_173h1_396:not(#\9) {
-  margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
-  margin-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
+.awsui_columns_vj6p7_dtuug_447.awsui_column-1_vj6p7_dtuug_454 > .awsui_tile-container_vj6p7_dtuug_396:not(#\9) {
+  margin-block: calc(var(--space-tile-gutter-fuuodu, 24px) / 4);
+  margin-inline: calc(var(--space-tile-gutter-fuuodu, 24px) / 4);
   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));
+  flex: 0 0 calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-1_vj6p7_173h1_453 > .awsui_tile-container_vj6p7_173h1_396.awsui_breakpoint-xs_vj6p7_173h1_460: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_dtuug_447.awsui_column-1_vj6p7_dtuug_454 > .awsui_tile-container_vj6p7_dtuug_396.awsui_breakpoint-xs_vj6p7_dtuug_461:not(#\9) {
+  flex: 0 0 calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-1_vj6p7_173h1_453 > .awsui_tile-container_vj6p7_173h1_396.awsui_breakpoint-xxs_vj6p7_173h1_464: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_dtuug_447.awsui_column-1_vj6p7_dtuug_454 > .awsui_tile-container_vj6p7_dtuug_396.awsui_breakpoint-xxs_vj6p7_dtuug_465:not(#\9) {
+  flex: 0 0 calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-2_vj6p7_173h1_468 > .awsui_tile-container_vj6p7_173h1_396:not(#\9) {
-  margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
-  margin-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
+.awsui_columns_vj6p7_dtuug_447.awsui_column-2_vj6p7_dtuug_469 > .awsui_tile-container_vj6p7_dtuug_396:not(#\9) {
+  margin-block: calc(var(--space-tile-gutter-fuuodu, 24px) / 4);
+  margin-inline: calc(var(--space-tile-gutter-fuuodu, 24px) / 4);
   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));
+  flex: 0 0 calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-2_vj6p7_173h1_468 > .awsui_tile-container_vj6p7_173h1_396.awsui_breakpoint-xs_vj6p7_173h1_460: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_dtuug_447.awsui_column-2_vj6p7_dtuug_469 > .awsui_tile-container_vj6p7_dtuug_396.awsui_breakpoint-xs_vj6p7_dtuug_461:not(#\9) {
+  flex: 0 0 calc(50% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(50% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-2_vj6p7_173h1_468 > .awsui_tile-container_vj6p7_173h1_396.awsui_breakpoint-xxs_vj6p7_173h1_464: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_dtuug_447.awsui_column-2_vj6p7_dtuug_469 > .awsui_tile-container_vj6p7_dtuug_396.awsui_breakpoint-xxs_vj6p7_dtuug_465:not(#\9) {
+  flex: 0 0 calc(50% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(50% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-3_vj6p7_173h1_483 > .awsui_tile-container_vj6p7_173h1_396:not(#\9) {
-  margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
-  margin-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
+.awsui_columns_vj6p7_dtuug_447.awsui_column-3_vj6p7_dtuug_484 > .awsui_tile-container_vj6p7_dtuug_396:not(#\9) {
+  margin-block: calc(var(--space-tile-gutter-fuuodu, 24px) / 4);
+  margin-inline: calc(var(--space-tile-gutter-fuuodu, 24px) / 4);
   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));
+  flex: 0 0 calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-3_vj6p7_173h1_483 > .awsui_tile-container_vj6p7_173h1_396.awsui_breakpoint-xs_vj6p7_173h1_460: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_dtuug_447.awsui_column-3_vj6p7_dtuug_484 > .awsui_tile-container_vj6p7_dtuug_396.awsui_breakpoint-xs_vj6p7_dtuug_461:not(#\9) {
+  flex: 0 0 calc(33.3333333333% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(33.3333333333% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-3_vj6p7_173h1_483 > .awsui_tile-container_vj6p7_173h1_396.awsui_breakpoint-xxs_vj6p7_173h1_464: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_dtuug_447.awsui_column-3_vj6p7_dtuug_484 > .awsui_tile-container_vj6p7_dtuug_396.awsui_breakpoint-xxs_vj6p7_dtuug_465:not(#\9) {
+  flex: 0 0 calc(50% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(50% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-4_vj6p7_173h1_498 > .awsui_tile-container_vj6p7_173h1_396:not(#\9) {
-  margin-block: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
-  margin-inline: calc(var(--space-grid-gutter-ieqn7e, 20px) / 2);
+.awsui_columns_vj6p7_dtuug_447.awsui_column-4_vj6p7_dtuug_499 > .awsui_tile-container_vj6p7_dtuug_396:not(#\9) {
+  margin-block: calc(var(--space-tile-gutter-fuuodu, 24px) / 4);
+  margin-inline: calc(var(--space-tile-gutter-fuuodu, 24px) / 4);
   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));
+  flex: 0 0 calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-4_vj6p7_173h1_498 > .awsui_tile-container_vj6p7_173h1_396.awsui_breakpoint-xs_vj6p7_173h1_460: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_dtuug_447.awsui_column-4_vj6p7_dtuug_499 > .awsui_tile-container_vj6p7_dtuug_396.awsui_breakpoint-xs_vj6p7_dtuug_461:not(#\9) {
+  flex: 0 0 calc(25% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(25% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
-.awsui_columns_vj6p7_173h1_447.awsui_column-4_vj6p7_173h1_498 > .awsui_tile-container_vj6p7_173h1_396.awsui_breakpoint-xxs_vj6p7_173h1_464: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_dtuug_447.awsui_column-4_vj6p7_dtuug_499 > .awsui_tile-container_vj6p7_dtuug_396.awsui_breakpoint-xxs_vj6p7_dtuug_465:not(#\9) {
+  flex: 0 0 calc(50% - var(--space-tile-gutter-fuuodu, 24px)/2);
+  max-inline-size: calc(50% - var(--space-tile-gutter-fuuodu, 24px)/2);
 }
 
-.awsui_control_vj6p7_173h1_514:not(#\9) {
+.awsui_control_vj6p7_dtuug_515:not(#\9) {
   flex-grow: 1;
   margin-block-end: var(--space-s-34lx8l, 12px);
 }
-.awsui_control_vj6p7_173h1_514.awsui_no-image_vj6p7_173h1_518:not(#\9) {
+.awsui_control_vj6p7_dtuug_515.awsui_no-image_vj6p7_dtuug_519:not(#\9) {
   margin-block-end: 0;
 }
 
-.awsui_image_vj6p7_173h1_522:not(#\9) {
+.awsui_image_vj6p7_dtuug_523:not(#\9) {
   text-align: center;
 }
-.awsui_image_vj6p7_173h1_522 > img:not(#\9) {
+.awsui_image_vj6p7_dtuug_523 > img:not(#\9) {
   max-inline-size: 100%;
 }
-.awsui_image_vj6p7_173h1_522.awsui_disabled_vj6p7_173h1_436 > img:not(#\9) {
+.awsui_image_vj6p7_dtuug_523.awsui_disabled_vj6p7_dtuug_436 > img:not(#\9) {
   opacity: 0.3;
 }

package/tiles/styles.selectors.js

@@ -2,35 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "column-layout": "awsui_column-layout_vj6p7_173h1_185",
-  "grid": "awsui_grid_vj6p7_173h1_220",
-  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_173h1_226",
-  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_173h1_230",
-  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_173h1_238",
-  "grid-columns-1": "awsui_grid-columns-1_vj6p7_173h1_241",
-  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_173h1_241",
-  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_173h1_244",
-  "grid-columns-2": "awsui_grid-columns-2_vj6p7_173h1_247",
-  "grid-columns-3": "awsui_grid-columns-3_vj6p7_173h1_253",
-  "grid-columns-4": "awsui_grid-columns-4_vj6p7_173h1_259",
-  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_173h1_275",
-  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_173h1_308",
-  "root": "awsui_root_vj6p7_173h1_358",
-  "tile-container": "awsui_tile-container_vj6p7_173h1_396",
-  "refresh": "awsui_refresh_vj6p7_173h1_421",
-  "has-metadata": "awsui_has-metadata_vj6p7_173h1_425",
-  "selected": "awsui_selected_vj6p7_173h1_431",
-  "disabled": "awsui_disabled_vj6p7_173h1_436",
-  "readonly": "awsui_readonly_vj6p7_173h1_441",
-  "columns": "awsui_columns_vj6p7_173h1_447",
-  "column-1": "awsui_column-1_vj6p7_173h1_453",
-  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_173h1_460",
-  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_173h1_464",
-  "column-2": "awsui_column-2_vj6p7_173h1_468",
-  "column-3": "awsui_column-3_vj6p7_173h1_483",
-  "column-4": "awsui_column-4_vj6p7_173h1_498",
-  "control": "awsui_control_vj6p7_173h1_514",
-  "no-image": "awsui_no-image_vj6p7_173h1_518",
-  "image": "awsui_image_vj6p7_173h1_522"
+  "column-layout": "awsui_column-layout_vj6p7_dtuug_185",
+  "grid": "awsui_grid_vj6p7_dtuug_220",
+  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_dtuug_226",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_dtuug_230",
+  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_dtuug_238",
+  "grid-columns-1": "awsui_grid-columns-1_vj6p7_dtuug_241",
+  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_dtuug_241",
+  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_dtuug_244",
+  "grid-columns-2": "awsui_grid-columns-2_vj6p7_dtuug_247",
+  "grid-columns-3": "awsui_grid-columns-3_vj6p7_dtuug_253",
+  "grid-columns-4": "awsui_grid-columns-4_vj6p7_dtuug_259",
+  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_dtuug_275",
+  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_dtuug_308",
+  "root": "awsui_root_vj6p7_dtuug_358",
+  "tile-container": "awsui_tile-container_vj6p7_dtuug_396",
+  "refresh": "awsui_refresh_vj6p7_dtuug_421",
+  "has-metadata": "awsui_has-metadata_vj6p7_dtuug_425",
+  "selected": "awsui_selected_vj6p7_dtuug_431",
+  "disabled": "awsui_disabled_vj6p7_dtuug_436",
+  "readonly": "awsui_readonly_vj6p7_dtuug_441",
+  "columns": "awsui_columns_vj6p7_dtuug_447",
+  "column-1": "awsui_column-1_vj6p7_dtuug_454",
+  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_dtuug_461",
+  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_dtuug_465",
+  "column-2": "awsui_column-2_vj6p7_dtuug_469",
+  "column-3": "awsui_column-3_vj6p7_dtuug_484",
+  "column-4": "awsui_column-4_vj6p7_dtuug_499",
+  "control": "awsui_control_vj6p7_dtuug_515",
+  "no-image": "awsui_no-image_vj6p7_dtuug_519",
+  "image": "awsui_image_vj6p7_dtuug_523"
 };