@cloudscape-design/components-themeable 3.0.795 → 3.0.797

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "ba8b99c8414e0195ddd443510edf7cadea8af3ef"
+  "commit": "25f44359d4e2c6f57119826fa744001b0e1d6dee"
 }

package/lib/internal/scss/app-layout/visual-refresh-toolbar/notifications/styles.scss

@@ -11,3 +11,7 @@
     background-color: awsui.$color-background-layout-main;
   }
 }
+
+.has-notifications-content {
+  padding-block-start: awsui.$space-scaled-xs;
+}

package/lib/internal/scss/app-layout/visual-refresh-toolbar/skeleton/styles.scss

@@ -162,9 +162,6 @@
 
 .notifications-container {
   grid-area: notifications;
-  &:not(:empty) {
-    padding-block-start: awsui.$space-scaled-xs;
-  }
 }
 
 .notifications-background {

package/lib/internal/scss/multiselect/styles.scss

@@ -12,10 +12,7 @@
 
 .embedded {
   @include styles.styles-reset;
-
-  display: flex;
-  flex-direction: column;
-  inline-size: 100%;
+  display: contents;
 }
 
 .tokens {

package/lib/internal/scss/property-filter/styles.scss

@@ -63,10 +63,6 @@ $operator-field-width: 120px;
     margin-inline-end: awsui.$space-xs;
   }
 
-  &-submit {
-    /* used in test-utils */
-  }
-
   &-actions {
     display: flex;
     justify-content: flex-end;

package/lib/internal/scss/property-filter/test-classes/styles.scss

@@ -66,3 +66,11 @@
 .token-editor-submit {
   /* used in test-utils */
 }
+
+.property-editor-cancel {
+  /* used in test-utils */
+}
+
+.property-editor-submit {
+  /* used in test-utils */
+}

package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/notifications/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAMnD,UAAU,yCAAyC;IACjD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,oCAAoC,CAAC,EACnD,kBAAkB,EAClB,QAAQ,GACT,EAAE,yCAAyC,eA4B3C;AAED,eAAO,MAAM,sCAAsC,mHAAkE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/notifications/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAMnD,UAAU,yCAAyC;IACjD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,oCAAoC,CAAC,EACnD,kBAAkB,EAClB,QAAQ,GACT,EAAE,yCAAyC,eAmC3C;AAED,eAAO,MAAM,sCAAsC,mHAAkE,CAAC"}

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

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
+import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
 import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
 import { createWidgetizedComponent } from '../../../internal/widgets';
@@ -10,8 +11,9 @@ import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 export function AppLayoutNotificationsImplementation({ appLayoutInternals, children, }) {
     const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets } = appLayoutInternals;
-    const ref = useRef(null);
-    useResizeObserver(ref, entry => setNotificationsHeight(entry.borderBoxHeight));
+    const [hasNotificationsContent, contentRef] = useContainerQuery(rect => rect.borderBoxHeight > 0);
+    const rootRef = useRef(null);
+    useResizeObserver(rootRef, entry => setNotificationsHeight(entry.borderBoxHeight));
     useEffect(() => {
         return () => {
             setNotificationsHeight(0);
@@ -19,10 +21,10 @@ export function AppLayoutNotificationsImplementation({ appLayoutInternals, child
         // unmount effect only
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React.createElement(NotificationsSlot, { ref: ref, className: clsx(appLayoutInternals.headerVariant === 'high-contrast' && highContrastHeaderClassName, stickyNotifications && styles['sticky-notifications'], appLayoutInternals.headerVariant !== 'high-contrast' && styles['sticky-notifications-with-background']), style: {
+    return (React.createElement(NotificationsSlot, { ref: rootRef, className: clsx(appLayoutInternals.headerVariant === 'high-contrast' && highContrastHeaderClassName, stickyNotifications && styles['sticky-notifications'], hasNotificationsContent && styles['has-notifications-content'], appLayoutInternals.headerVariant !== 'high-contrast' && styles['sticky-notifications-with-background']), style: {
             insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,
         } },
-        React.createElement("div", { className: testutilStyles.notifications, role: "region", "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications }, children)));
+        React.createElement("div", { ref: contentRef, className: testutilStyles.notifications, role: "region", "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications }, children)));
 }
 export const createWidgetizedAppLayoutNotifications = createWidgetizedComponent(AppLayoutNotificationsImplementation);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/notifications/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,UAAU,oCAAoC,CAAC,EACnD,kBAAkB,EAClB,QAAQ,GACkC;IAC1C,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,eAAe,EAAE,GAAG,kBAAkB,CAAC;IACxG,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACtC,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IAC/E,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,sBAAsB,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,CAAC;QACF,sBAAsB;QACtB,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,kBAAkB,CAAC,aAAa,KAAK,eAAe,IAAI,2BAA2B,EACnF,mBAAmB,IAAI,MAAM,CAAC,sBAAsB,CAAC,EACrD,kBAAkB,CAAC,aAAa,KAAK,eAAe,IAAI,MAAM,CAAC,sCAAsC,CAAC,CACvG,EACD,KAAK,EAAE;YACL,eAAe,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;SACjF;QAED,6BAAK,SAAS,EAAE,cAAc,CAAC,aAAa,EAAE,IAAI,EAAC,QAAQ,gBAAa,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,IAC9F,QAAQ,CACL,CACY,CACrB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,sCAAsC,GAAG,yBAAyB,CAAC,oCAAoC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { NotificationsSlot } from '../skeleton/slot-wrappers';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNotificationsImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutNotificationsImplementation({\n  appLayoutInternals,\n  children,\n}: AppLayoutNotificationsImplementationProps) {\n  const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets } = appLayoutInternals;\n  const ref = useRef<HTMLElement>(null);\n  useResizeObserver(ref, entry => setNotificationsHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    return () => {\n      setNotificationsHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return (\n    <NotificationsSlot\n      ref={ref}\n      className={clsx(\n        appLayoutInternals.headerVariant === 'high-contrast' && highContrastHeaderClassName,\n        stickyNotifications && styles['sticky-notifications'],\n        appLayoutInternals.headerVariant !== 'high-contrast' && styles['sticky-notifications-with-background']\n      )}\n      style={{\n        insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,\n      }}\n    >\n      <div className={testutilStyles.notifications} role=\"region\" aria-label={ariaLabels?.notifications}>\n        {children}\n      </div>\n    </NotificationsSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutNotifications = createWidgetizedComponent(AppLayoutNotificationsImplementation);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/notifications/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,UAAU,oCAAoC,CAAC,EACnD,kBAAkB,EAClB,QAAQ,GACkC;IAC1C,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,eAAe,EAAE,GAAG,kBAAkB,CAAC;IACxG,MAAM,CAAC,uBAAuB,EAAE,UAAU,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;IAClG,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IACnF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,sBAAsB,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,CAAC;QACF,sBAAsB;QACtB,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,iBAAiB,IAChB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CACb,kBAAkB,CAAC,aAAa,KAAK,eAAe,IAAI,2BAA2B,EACnF,mBAAmB,IAAI,MAAM,CAAC,sBAAsB,CAAC,EACrD,uBAAuB,IAAI,MAAM,CAAC,2BAA2B,CAAC,EAC9D,kBAAkB,CAAC,aAAa,KAAK,eAAe,IAAI,MAAM,CAAC,sCAAsC,CAAC,CACvG,EACD,KAAK,EAAE;YACL,eAAe,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;SACjF;QAED,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,cAAc,CAAC,aAAa,EACvC,IAAI,EAAC,QAAQ,gBACD,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,IAEpC,QAAQ,CACL,CACY,CACrB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,sCAAsC,GAAG,yBAAyB,CAAC,oCAAoC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { NotificationsSlot } from '../skeleton/slot-wrappers';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNotificationsImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutNotificationsImplementation({\n  appLayoutInternals,\n  children,\n}: AppLayoutNotificationsImplementationProps) {\n  const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets } = appLayoutInternals;\n  const [hasNotificationsContent, contentRef] = useContainerQuery(rect => rect.borderBoxHeight > 0);\n  const rootRef = useRef<HTMLDivElement>(null);\n  useResizeObserver(rootRef, entry => setNotificationsHeight(entry.borderBoxHeight));\n  useEffect(() => {\n    return () => {\n      setNotificationsHeight(0);\n    };\n    // unmount effect only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return (\n    <NotificationsSlot\n      ref={rootRef}\n      className={clsx(\n        appLayoutInternals.headerVariant === 'high-contrast' && highContrastHeaderClassName,\n        stickyNotifications && styles['sticky-notifications'],\n        hasNotificationsContent && styles['has-notifications-content'],\n        appLayoutInternals.headerVariant !== 'high-contrast' && styles['sticky-notifications-with-background']\n      )}\n      style={{\n        insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,\n      }}\n    >\n      <div\n        ref={contentRef}\n        className={testutilStyles.notifications}\n        role=\"region\"\n        aria-label={ariaLabels?.notifications}\n      >\n        {children}\n      </div>\n    </NotificationsSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutNotifications = createWidgetizedComponent(AppLayoutNotificationsImplementation);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/styles.css.js

@@ -1,7 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "sticky-notifications": "awsui_sticky-notifications_154bi_3446a_9",
-  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_3446a_13"
+  "sticky-notifications": "awsui_sticky-notifications_154bi_1lp8i_9",
+  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_1lp8i_13",
+  "has-notifications-content": "awsui_has-notifications-content_154bi_1lp8i_17"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/styles.scoped.css

@@ -6,10 +6,14 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_sticky-notifications_154bi_3446a_9:not(#\9) {
+.awsui_sticky-notifications_154bi_1lp8i_9:not(#\9) {
   position: sticky;
   z-index: 850;
 }
-.awsui_sticky-notifications-with-background_154bi_3446a_13:not(#\9) {
+.awsui_sticky-notifications-with-background_154bi_1lp8i_13:not(#\9) {
   background-color: var(--color-background-layout-main-f96353, #f2f3f3);
+}
+
+.awsui_has-notifications-content_154bi_1lp8i_17:not(#\9) {
+  padding-block-start: var(--space-scaled-xs-t3am3w, 8px);
 }

package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/styles.selectors.js

@@ -2,7 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "sticky-notifications": "awsui_sticky-notifications_154bi_3446a_9",
-  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_3446a_13"
+  "sticky-notifications": "awsui_sticky-notifications_154bi_1lp8i_9",
+  "sticky-notifications-with-background": "awsui_sticky-notifications-with-background_154bi_1lp8i_13",
+  "has-notifications-content": "awsui_has-notifications-content_154bi_1lp8i_17"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js

@@ -1,24 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_r7nzd_149",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_r7nzd_198",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_r7nzd_213",
-  "navigation": "awsui_navigation_7nfqu_r7nzd_228",
-  "tools": "awsui_tools_7nfqu_r7nzd_229",
-  "global-tools": "awsui_global-tools_7nfqu_r7nzd_230",
-  "tools-open": "awsui_tools-open_7nfqu_r7nzd_268",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_r7nzd_281",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_r7nzd_288",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_r7nzd_301",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_r7nzd_311",
-  "notifications-container": "awsui_notifications-container_7nfqu_r7nzd_317",
-  "notifications-background": "awsui_notifications-background_7nfqu_r7nzd_324",
-  "main-landmark": "awsui_main-landmark_7nfqu_r7nzd_335",
-  "main": "awsui_main_7nfqu_r7nzd_335",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_r7nzd_344",
-  "content-header": "awsui_content-header_7nfqu_r7nzd_354",
-  "content": "awsui_content_7nfqu_r7nzd_354",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_r7nzd_364"
+  "root": "awsui_root_7nfqu_11m9m_149",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_11m9m_198",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_11m9m_213",
+  "navigation": "awsui_navigation_7nfqu_11m9m_228",
+  "tools": "awsui_tools_7nfqu_11m9m_229",
+  "global-tools": "awsui_global-tools_7nfqu_11m9m_230",
+  "tools-open": "awsui_tools-open_7nfqu_11m9m_268",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_11m9m_281",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_11m9m_288",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_11m9m_301",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_11m9m_311",
+  "notifications-container": "awsui_notifications-container_7nfqu_11m9m_317",
+  "notifications-background": "awsui_notifications-background_7nfqu_11m9m_321",
+  "main-landmark": "awsui_main-landmark_7nfqu_11m9m_332",
+  "main": "awsui_main_7nfqu_11m9m_332",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_11m9m_341",
+  "content-header": "awsui_content-header_7nfqu_11m9m_351",
+  "content": "awsui_content_7nfqu_11m9m_351",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_11m9m_361"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css

@@ -146,7 +146,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
 */
-.awsui_root_7nfqu_r7nzd_149:not(#\9) {
+.awsui_root_7nfqu_11m9m_149:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -189,104 +189,104 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-template-rows: min-content min-content 1fr;
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_r7nzd_149:not(#\9) {
+  .awsui_root_7nfqu_11m9m_149:not(#\9) {
     grid-template-areas: "toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar" "navigation .         notifications    .         sideSplitPanel  tools    global-tools" "navigation .             main         .         sideSplitPanel  tools    global-tools";
     grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-18y4hb, 40px), 1fr) minmax(0, var(--awsui-max-content-width-g964ok)) minmax(var(--space-layout-content-horizontal-18y4hb, 40px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_r7nzd_149.awsui_has-adaptive-widths-default_7nfqu_r7nzd_198:not(#\9) {
+  .awsui_root_7nfqu_11m9m_149.awsui_has-adaptive-widths-default_7nfqu_11m9m_198:not(#\9) {
     --awsui-max-content-width-g964ok: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_r7nzd_149.awsui_has-adaptive-widths-default_7nfqu_r7nzd_198:not(#\9) {
+  .awsui_root_7nfqu_11m9m_149.awsui_has-adaptive-widths-default_7nfqu_11m9m_198:not(#\9) {
     --awsui-max-content-width-g964ok: 1440px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_r7nzd_149.awsui_has-adaptive-widths-default_7nfqu_r7nzd_198:not(#\9) {
+  .awsui_root_7nfqu_11m9m_149.awsui_has-adaptive-widths-default_7nfqu_11m9m_198:not(#\9) {
     --awsui-max-content-width-g964ok: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_r7nzd_149.awsui_has-adaptive-widths-dashboard_7nfqu_r7nzd_213:not(#\9) {
+  .awsui_root_7nfqu_11m9m_149.awsui_has-adaptive-widths-dashboard_7nfqu_11m9m_213:not(#\9) {
     --awsui-max-content-width-g964ok: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_r7nzd_149.awsui_has-adaptive-widths-dashboard_7nfqu_r7nzd_213:not(#\9) {
+  .awsui_root_7nfqu_11m9m_149.awsui_has-adaptive-widths-dashboard_7nfqu_11m9m_213:not(#\9) {
     --awsui-max-content-width-g964ok: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_r7nzd_149.awsui_has-adaptive-widths-dashboard_7nfqu_r7nzd_213:not(#\9) {
+  .awsui_root_7nfqu_11m9m_149.awsui_has-adaptive-widths-dashboard_7nfqu_11m9m_213:not(#\9) {
     --awsui-max-content-width-g964ok: 2160px;
   }
 }
 
-.awsui_navigation_7nfqu_r7nzd_228:not(#\9),
-.awsui_tools_7nfqu_r7nzd_229:not(#\9),
-.awsui_global-tools_7nfqu_r7nzd_230:not(#\9) {
+.awsui_navigation_7nfqu_11m9m_228:not(#\9),
+.awsui_tools_7nfqu_11m9m_229:not(#\9),
+.awsui_global-tools_7nfqu_11m9m_230:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-myy7cn, #ffffff);
   opacity: 1;
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_r7nzd_228:not(#\9),
-  .awsui_tools_7nfqu_r7nzd_229:not(#\9),
-  .awsui_global-tools_7nfqu_r7nzd_230:not(#\9) {
+  .awsui_navigation_7nfqu_11m9m_228:not(#\9),
+  .awsui_tools_7nfqu_11m9m_229:not(#\9),
+  .awsui_global-tools_7nfqu_11m9m_230:not(#\9) {
     inline-size: 100%;
   }
 }
 
-.awsui_navigation_7nfqu_r7nzd_228:not(#\9) {
+.awsui_navigation_7nfqu_11m9m_228:not(#\9) {
   z-index: 830;
 }
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_r7nzd_228:not(#\9) {
+  .awsui_navigation_7nfqu_11m9m_228:not(#\9) {
     grid-area: navigation;
     inline-size: var(--awsui-navigation-width-g964ok);
     border-inline-end: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-layout-5gml03, #d5dbdb);
   }
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_r7nzd_228:not(#\9) {
+  .awsui_navigation_7nfqu_11m9m_228:not(#\9) {
     z-index: 1001;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_r7nzd_229:not(#\9) {
+  .awsui_tools_7nfqu_11m9m_229:not(#\9) {
     grid-area: tools;
     /* stylelint-disable plugin/no-unsupported-browser-features */
   }
-  .awsui_tools_7nfqu_r7nzd_229:not(#\9):not(:has(> [data-testid])) {
+  .awsui_tools_7nfqu_11m9m_229:not(#\9):not(:has(> [data-testid])) {
     inline-size: var(--awsui-tools-width-g964ok);
   }
-  .awsui_tools_7nfqu_r7nzd_229:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_r7nzd_268 {
+  .awsui_tools_7nfqu_11m9m_229:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_11m9m_268 {
     border-inline-start: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-layout-5gml03, #d5dbdb);
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_global-tools_7nfqu_r7nzd_230:not(#\9) {
+  .awsui_global-tools_7nfqu_11m9m_230:not(#\9) {
     display: flex;
     grid-area: global-tools;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_r7nzd_281:not(#\9) {
+  .awsui_split-panel-side_7nfqu_11m9m_281:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-layout-5gml03, #d5dbdb);
     opacity: 1;
   }
 }
 
-.awsui_split-panel-bottom_7nfqu_r7nzd_288:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_11m9m_288:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -294,75 +294,72 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_split-panel-bottom_7nfqu_r7nzd_288:not(#\9) {
+  .awsui_split-panel-bottom_7nfqu_11m9m_288:not(#\9) {
     grid-column: 2/span 4;
   }
 }
 
-.awsui_panel-hidden_7nfqu_r7nzd_301:not(#\9) {
+.awsui_panel-hidden_7nfqu_11m9m_301:not(#\9) {
   border-block: none;
   border-inline: none;
   opacity: 0;
   z-index: 0;
 }
-.awsui_panel-hidden_7nfqu_r7nzd_301.awsui_navigation_7nfqu_r7nzd_228:not(#\9), .awsui_panel-hidden_7nfqu_r7nzd_301.awsui_tools_7nfqu_r7nzd_229:not(#\9), .awsui_panel-hidden_7nfqu_r7nzd_301.awsui_global-tools_7nfqu_r7nzd_230:not(#\9) {
+.awsui_panel-hidden_7nfqu_11m9m_301.awsui_navigation_7nfqu_11m9m_228:not(#\9), .awsui_panel-hidden_7nfqu_11m9m_301.awsui_tools_7nfqu_11m9m_229:not(#\9), .awsui_panel-hidden_7nfqu_11m9m_301.awsui_global-tools_7nfqu_11m9m_230:not(#\9) {
   inline-size: 0px;
 }
 
-.awsui_toolbar-container_7nfqu_r7nzd_311:not(#\9) {
+.awsui_toolbar-container_7nfqu_11m9m_311:not(#\9) {
   grid-area: toolbar;
   block-size: 42px;
   border-block-end: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-layout-5gml03, #d5dbdb);
 }
 
-.awsui_notifications-container_7nfqu_r7nzd_317:not(#\9) {
+.awsui_notifications-container_7nfqu_11m9m_317:not(#\9) {
   grid-area: notifications;
 }
-.awsui_notifications-container_7nfqu_r7nzd_317:not(#\9):not(:empty) {
-  padding-block-start: var(--space-scaled-xs-t3am3w, 8px);
-}
 
-.awsui_notifications-background_7nfqu_r7nzd_324:not(#\9) {
+.awsui_notifications-background_7nfqu_11m9m_321:not(#\9) {
   background: var(--color-background-layout-main-f96353, #f2f3f3);
   grid-area: notifications;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_notifications-background_7nfqu_r7nzd_324:not(#\9) {
+  .awsui_notifications-background_7nfqu_11m9m_321:not(#\9) {
     grid-column: 2/span 4;
   }
 }
 
-.awsui_main-landmark_7nfqu_r7nzd_335:not(#\9) {
+.awsui_main-landmark_7nfqu_11m9m_332:not(#\9) {
   display: contents;
 }
 
-.awsui_main_7nfqu_r7nzd_335:not(#\9) {
+.awsui_main_7nfqu_11m9m_332:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-8j7izy, 12px);
   margin-block-end: var(--space-layout-content-bottom-6grgvy, 20px);
 }
-.awsui_main-disable-paddings_7nfqu_r7nzd_344:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_11m9m_341:not(#\9) {
   margin-block: 0;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_r7nzd_344:not(#\9) {
+  .awsui_main-disable-paddings_7nfqu_11m9m_341:not(#\9) {
     grid-column: 2/span 4;
   }
 }
 
-.awsui_content-header_7nfqu_r7nzd_354:not(#\9) {
+.awsui_content-header_7nfqu_11m9m_351:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-2tkelq, 16px);
 }
 
-.awsui_content_7nfqu_r7nzd_354:not(#\9) {
+.awsui_content_7nfqu_11m9m_351:not(#\9) {
   display: contents;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
 @media (max-width: 688px) {
-  .awsui_unfocusable-mobile_7nfqu_r7nzd_364 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_11m9m_361 *:not(#\9) {
     visibility: hidden;
   }
 }

package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js

@@ -2,24 +2,24 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_7nfqu_r7nzd_149",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_r7nzd_198",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_r7nzd_213",
-  "navigation": "awsui_navigation_7nfqu_r7nzd_228",
-  "tools": "awsui_tools_7nfqu_r7nzd_229",
-  "global-tools": "awsui_global-tools_7nfqu_r7nzd_230",
-  "tools-open": "awsui_tools-open_7nfqu_r7nzd_268",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_r7nzd_281",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_r7nzd_288",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_r7nzd_301",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_r7nzd_311",
-  "notifications-container": "awsui_notifications-container_7nfqu_r7nzd_317",
-  "notifications-background": "awsui_notifications-background_7nfqu_r7nzd_324",
-  "main-landmark": "awsui_main-landmark_7nfqu_r7nzd_335",
-  "main": "awsui_main_7nfqu_r7nzd_335",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_r7nzd_344",
-  "content-header": "awsui_content-header_7nfqu_r7nzd_354",
-  "content": "awsui_content_7nfqu_r7nzd_354",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_r7nzd_364"
+  "root": "awsui_root_7nfqu_11m9m_149",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_11m9m_198",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_11m9m_213",
+  "navigation": "awsui_navigation_7nfqu_11m9m_228",
+  "tools": "awsui_tools_7nfqu_11m9m_229",
+  "global-tools": "awsui_global-tools_7nfqu_11m9m_230",
+  "tools-open": "awsui_tools-open_7nfqu_11m9m_268",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_11m9m_281",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_11m9m_288",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_11m9m_301",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_11m9m_311",
+  "notifications-container": "awsui_notifications-container_7nfqu_11m9m_317",
+  "notifications-background": "awsui_notifications-background_7nfqu_11m9m_321",
+  "main-landmark": "awsui_main-landmark_7nfqu_11m9m_332",
+  "main": "awsui_main_7nfqu_11m9m_332",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_11m9m_341",
+  "content-header": "awsui_content-header_7nfqu_11m9m_351",
+  "content": "awsui_content_7nfqu_11m9m_351",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_11m9m_361"
 };
   

package/lib/internal/template/collection-preferences/content-display/content-display-option.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import { DragHandleProps } from '../../internal/components/drag-handle';
 import { OptionWithVisibility } from './utils';
 export declare const getClassName: (suffix?: string) => string;
 export interface ContentDisplayOptionProps {
     dragHandleAriaLabel?: string;
-    listeners?: SyntheticListenerMap;
+    listeners?: DragHandleProps['listeners'];
     onToggle?: (option: OptionWithVisibility) => void;
     option: OptionWithVisibility;
     disabled?: boolean;

package/lib/internal/template/collection-preferences/content-display/content-display-option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-display-option.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAK1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAK/C,eAAO,MAAM,YAAY,YAAa,MAAM,WAAgE,CAAC;AAE7G,MAAM,WAAW,yBAAyB;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,oBAAoB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,oBAAoB,kGA8BzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"content-display-option.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAExD,OAAmB,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAGpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAK/C,eAAO,MAAM,YAAY,YAAa,MAAM,WAAgE,CAAC;AAE7G,MAAM,WAAW,yBAAyB;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,oBAAoB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,oBAAoB,kGA8BzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/internal/template/collection-preferences/content-display/content-display-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-display-option.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAGnD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,eAAe,GAAG,wBAAwB,CAAC;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAe,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAU7G,MAAM,oBAAoB,GAAG,UAAU,CACrC,CACE,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAA6B,EACzF,GAAiC,EACjC,EAAE;IACF,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,GAAG,QAAQ,YAAY,MAAM,CAAC,EAAE,EAAE,CAAC;IAErD,MAAM,oBAAoB,GAAG;QAC3B,CAAC,YAAY,CAAC,EAAE,CAAC,mBAAmB,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;KAC/D,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC;QAC/C,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,GAAI;QAE1F,+BAAO,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,IACxD,MAAM,CAAC,KAAK,CACP;QACR,6BAAK,SAAS,EAAE,YAAY,CAAC,QAAQ,CAAC;YACpC,oBAAC,cAAc,IACb,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,EAC5C,QAAQ,EAAE,MAAM,CAAC,aAAa,KAAK,IAAI,EACvC,SAAS,EAAE,SAAS,GACpB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ForwardedRef, forwardRef } from 'react';\nimport { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';\n\nimport DragHandle from '../../internal/components/drag-handle';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalToggle from '../../toggle/internal';\nimport { OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display-option';\nexport const getClassName = (suffix?: string) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];\n\nexport interface ContentDisplayOptionProps {\n  dragHandleAriaLabel?: string;\n  listeners?: SyntheticListenerMap;\n  onToggle?: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n  disabled?: boolean;\n}\n\nconst ContentDisplayOption = forwardRef(\n  (\n    { dragHandleAriaLabel, listeners, onToggle, option, disabled }: ContentDisplayOptionProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const idPrefix = useUniqueId(componentPrefix);\n    const controlId = `${idPrefix}-control-${option.id}`;\n\n    const dragHandleAttributes = {\n      ['aria-label']: [dragHandleAriaLabel, option.label].join(', '),\n    };\n\n    return (\n      <div ref={ref} className={getClassName('content')}>\n        <DragHandle disabled={disabled} attributes={dragHandleAttributes} listeners={listeners} />\n\n        <label className={getClassName('label')} htmlFor={controlId}>\n          {option.label}\n        </label>\n        <div className={getClassName('toggle')}>\n          <InternalToggle\n            checked={!!option.visible}\n            onChange={() => onToggle && onToggle(option)}\n            disabled={option.alwaysVisible === true}\n            controlId={controlId}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default ContentDisplayOption;\n"]}
+{"version":3,"file":"content-display-option.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,UAA+B,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAGnD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,eAAe,GAAG,wBAAwB,CAAC;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAe,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAU7G,MAAM,oBAAoB,GAAG,UAAU,CACrC,CACE,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAA6B,EACzF,GAAiC,EACjC,EAAE;IACF,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,GAAG,QAAQ,YAAY,MAAM,CAAC,EAAE,EAAE,CAAC;IAErD,MAAM,oBAAoB,GAAG;QAC3B,CAAC,YAAY,CAAC,EAAE,CAAC,mBAAmB,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;KAC/D,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC;QAC/C,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,GAAI;QAE1F,+BAAO,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,IACxD,MAAM,CAAC,KAAK,CACP;QACR,6BAAK,SAAS,EAAE,YAAY,CAAC,QAAQ,CAAC;YACpC,oBAAC,cAAc,IACb,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,EAC5C,QAAQ,EAAE,MAAM,CAAC,aAAa,KAAK,IAAI,EACvC,SAAS,EAAE,SAAS,GACpB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ForwardedRef, forwardRef } from 'react';\n\nimport DragHandle, { DragHandleProps } from '../../internal/components/drag-handle';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalToggle from '../../toggle/internal';\nimport { OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display-option';\nexport const getClassName = (suffix?: string) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];\n\nexport interface ContentDisplayOptionProps {\n  dragHandleAriaLabel?: string;\n  listeners?: DragHandleProps['listeners'];\n  onToggle?: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n  disabled?: boolean;\n}\n\nconst ContentDisplayOption = forwardRef(\n  (\n    { dragHandleAriaLabel, listeners, onToggle, option, disabled }: ContentDisplayOptionProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const idPrefix = useUniqueId(componentPrefix);\n    const controlId = `${idPrefix}-control-${option.id}`;\n\n    const dragHandleAttributes = {\n      ['aria-label']: [dragHandleAriaLabel, option.label].join(', '),\n    };\n\n    return (\n      <div ref={ref} className={getClassName('content')}>\n        <DragHandle disabled={disabled} attributes={dragHandleAttributes} listeners={listeners} />\n\n        <label className={getClassName('label')} htmlFor={controlId}>\n          {option.label}\n        </label>\n        <div className={getClassName('toggle')}>\n          <InternalToggle\n            checked={!!option.visible}\n            onChange={() => onToggle && onToggle(option)}\n            disabled={option.alwaysVisible === true}\n            controlId={controlId}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default ContentDisplayOption;\n"]}

package/lib/internal/template/internal/components/drag-handle/index.d.ts

@@ -1,9 +1,8 @@
 import { ButtonHTMLAttributes } from 'react';
-import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 export interface DragHandleProps {
     attributes: ButtonHTMLAttributes<HTMLDivElement>;
     hideFocus?: boolean;
-    listeners?: SyntheticListenerMap;
+    listeners: Record<string, Function> | undefined;
     disabled?: boolean;
 }
 export default function DragHandle({ attributes, hideFocus, listeners, disabled }: DragHandleProps): JSX.Element;

package/lib/internal/template/internal/components/drag-handle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAS1E,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,eAWjG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AASpD,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,eAWjG"}

package/lib/internal/template/internal/components/drag-handle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAmB;IAChG,OAAO,CACL,oBAAC,MAAM,mCACU,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,IAAI,YAAY,CAAC,YAAY,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC,IAC1G,UAAU,EACV,SAAS;QAEb,oBAAC,YAAY,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3E,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ButtonHTMLAttributes } from 'react';\nimport { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../../icon/internal';\nimport Handle from '../handle';\n\nimport handleStyles from '../handle/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface DragHandleProps {\n  attributes: ButtonHTMLAttributes<HTMLDivElement>;\n  hideFocus?: boolean;\n  listeners?: SyntheticListenerMap;\n  disabled?: boolean;\n}\n\nexport default function DragHandle({ attributes, hideFocus, listeners, disabled }: DragHandleProps) {\n  return (\n    <Handle\n      aria-disabled={disabled}\n      className={clsx(styles.handle, hideFocus && handleStyles['hide-focus'], disabled && styles['handle-disabled'])}\n      {...attributes}\n      {...listeners}\n    >\n      <InternalIcon variant={disabled ? 'disabled' : undefined} name=\"drag-indicator\" />\n    </Handle>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAmB;IAChG,OAAO,CACL,oBAAC,MAAM,mCACU,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,IAAI,YAAY,CAAC,YAAY,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC,IAC1G,UAAU,EACV,SAAS;QAEb,oBAAC,YAAY,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3E,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ButtonHTMLAttributes } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../../icon/internal';\nimport Handle from '../handle';\n\nimport handleStyles from '../handle/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface DragHandleProps {\n  attributes: ButtonHTMLAttributes<HTMLDivElement>;\n  hideFocus?: boolean;\n  // @dnd-kit uses this type\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  listeners: Record<string, Function> | undefined;\n  disabled?: boolean;\n}\n\nexport default function DragHandle({ attributes, hideFocus, listeners, disabled }: DragHandleProps) {\n  return (\n    <Handle\n      aria-disabled={disabled}\n      className={clsx(styles.handle, hideFocus && handleStyles['hide-focus'], disabled && styles['handle-disabled'])}\n      {...attributes}\n      {...listeners}\n    >\n      <InternalIcon variant={disabled ? 'disabled' : undefined} name=\"drag-indicator\" />\n    </Handle>\n  );\n}\n"]}

package/lib/internal/template/internal/components/dropdown/index.js

@@ -208,7 +208,7 @@ const Dropdown = ({ children, trigger, open, onDropdownClose, onMouseDown, heade
         const clickListener = (event) => {
             // Since the listener is registered on the window, `event.target` will incorrectly point at the
             // shadow root if the component is rendered inside shadow DOM.
-            const target = event.composedPath()[0];
+            const target = event.composedPath ? event.composedPath()[0] : event.target;
             if (!nodeBelongs(dropdownRef.current, target) && !nodeBelongs(triggerRef.current, target)) {
                 fireNonCancelableEvent(onDropdownClose);
             }