@cloudscape-design/components 3.0.840 → 3.0.841

package/collection-preferences/content-display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.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, { useMemo, useState } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport Portal from '../../internal/components/portal';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport InternalTextFilter from '../../text-filter/internal';\nimport { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';\nimport { CollectionPreferencesProps } from '../interfaces';\nimport ContentDisplayOption from './content-display-option';\nimport DraggableOption from './draggable-option';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\nimport { getFilteredOptions, getSortedOptions, OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n  onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n  value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n  title,\n  description,\n  options,\n  value = options.map(({ id }) => ({\n    id,\n    visible: true,\n  })),\n  onChange,\n  liveAnnouncementDndStarted,\n  liveAnnouncementDndItemReordered,\n  liveAnnouncementDndItemCommitted,\n  liveAnnouncementDndDiscarded,\n  dragHandleAriaDescription,\n  dragHandleAriaLabel,\n  enableColumnFiltering = false,\n  i18nStrings,\n}: ContentDisplayPreferenceProps) {\n  const idPrefix = useUniqueId(componentPrefix);\n  const i18n = useInternalI18n('collection-preferences');\n  const [columnFilteringText, setColumnFilteringText] = useState('');\n\n  const titleId = `${idPrefix}-title`;\n  const descriptionId = `${idPrefix}-description`;\n\n  const [sortedOptions, sortedAndFilteredOptions] = useMemo(() => {\n    const sorted = getSortedOptions({ options, contentDisplay: value });\n    const filtered = getFilteredOptions(sorted, columnFilteringText);\n    return [sorted, filtered];\n  }, [columnFilteringText, options, value]);\n\n  const onToggle = (option: OptionWithVisibility) => {\n    // We use sortedOptions as base and not value because there might be options that\n    // are not in the value yet, so they're added as non-visible after the known ones.\n    onChange(sortedOptions.map(({ id, visible }) => ({ id, visible: id === option.id ? !option.visible : visible })));\n  };\n\n  const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n    sortedOptions: sortedAndFilteredOptions,\n  });\n\n  const activeOption = activeItem ? sortedAndFilteredOptions.find(({ id }) => id === activeItem) : null;\n\n  const announcements = useLiveAnnouncements({\n    isDragging: activeItem !== null,\n    liveAnnouncementDndStarted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndStarted',\n      liveAnnouncementDndStarted,\n      format => (position, total) => format({ position, total })\n    ),\n    liveAnnouncementDndItemReordered: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemReordered',\n      liveAnnouncementDndItemReordered,\n      format => (initialPosition, currentPosition, total) =>\n        format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })\n    ),\n    liveAnnouncementDndItemCommitted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n      liveAnnouncementDndItemCommitted,\n      format => (initialPosition, finalPosition, total) =>\n        format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })\n    ),\n    liveAnnouncementDndDiscarded: i18n(\n      'contentDisplayPreference.liveAnnouncementDndDiscarded',\n      liveAnnouncementDndDiscarded\n    ),\n    sortedOptions: sortedAndFilteredOptions,\n  });\n\n  const renderedDragHandleAriaDescription = i18n(\n    'contentDisplayPreference.dragHandleAriaDescription',\n    dragHandleAriaDescription\n  );\n\n  return (\n    <div className={styles[componentPrefix]} {...getAnalyticsInnerContextAttribute('contentDisplay')}>\n      <h3 className={getClassName('title')} id={titleId}>\n        {i18n('contentDisplayPreference.title', title)}\n      </h3>\n      <p className={getClassName('description')} id={descriptionId}>\n        {i18n('contentDisplayPreference.description', description)}\n      </p>\n\n      {/* Filter input */}\n      {enableColumnFiltering && (\n        <div className={getClassName('text-filter')}>\n          <InternalTextFilter\n            filteringText={columnFilteringText}\n            filteringPlaceholder={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringPlaceholder',\n              i18nStrings?.columnFilteringPlaceholder\n            )}\n            filteringAriaLabel={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringAriaLabel',\n              i18nStrings?.columnFilteringAriaLabel\n            )}\n            filteringClearAriaLabel={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n              i18nStrings?.columnFilteringClearFilterText\n            )}\n            onChange={({ detail }) => setColumnFilteringText(detail.filteringText)}\n            countText={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringCountText',\n              i18nStrings?.columnFilteringCountText\n                ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length)\n                : undefined,\n              format => format({ count: sortedAndFilteredOptions.length })\n            )}\n          />\n        </div>\n      )}\n\n      {/* No match */}\n      {sortedAndFilteredOptions.length === 0 && (\n        <div className={getClassName('no-match')}>\n          <InternalSpaceBetween size=\"s\" alignItems=\"center\">\n            <InternalBox margin={{ top: 'm' }}>\n              {i18n(\n                'contentDisplayPreference.i18nStrings.columnFilteringNoMatchText',\n                i18nStrings?.columnFilteringNoMatchText\n              )}\n            </InternalBox>\n            <InternalButton onClick={() => setColumnFilteringText('')}>\n              {i18n(\n                'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n                i18nStrings?.columnFilteringClearFilterText\n              )}\n            </InternalButton>\n          </InternalSpaceBetween>\n        </div>\n      )}\n\n      {/* Drag and drop */}\n      <DndContext\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        accessibility={{\n          announcements,\n          restoreFocus: false,\n          screenReaderInstructions: renderedDragHandleAriaDescription\n            ? { draggable: renderedDragHandleAriaDescription }\n            : undefined,\n        }}\n        onDragStart={({ active }) => setActiveItem(active.id)}\n        onDragEnd={event => {\n          setActiveItem(null);\n          const { active, over } = event;\n\n          if (over && active.id !== over.id) {\n            const oldIndex = sortedOptions.findIndex(({ id }) => id === active.id);\n            const newIndex = sortedOptions.findIndex(({ id }) => id === over.id);\n            // We need to remember to trim the options down to id and visible to emit changes.\n            onChange(arrayMove([...sortedOptions], oldIndex, newIndex).map(({ id, visible }) => ({ id, visible })));\n          }\n        }}\n        onDragCancel={() => setActiveItem(null)}\n      >\n        {/* Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n            See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n        <ul\n          className={getClassName('option-list')}\n          aria-describedby={descriptionId}\n          aria-labelledby={titleId}\n          role=\"list\"\n        >\n          <SortableContext\n            disabled={columnFilteringText.trim().length > 0}\n            items={sortedAndFilteredOptions.map(({ id }) => id)}\n            strategy={verticalListSortingStrategy}\n          >\n            {sortedAndFilteredOptions.map(option => {\n              return (\n                <DraggableOption\n                  dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                  key={option.id}\n                  onKeyDown={handleKeyDown}\n                  onToggle={onToggle}\n                  option={option}\n                />\n              );\n            })}\n          </SortableContext>\n        </ul>\n        <Portal>\n          {/* Make sure that the drag overlay is above the modal\n              by assigning the z-index as inline style\n              so that it prevails over dnd-kit's inline z-index of 999  */}\n          {/* className is a documented prop of the DragOverlay component:\n              https://docs.dndkit.com/api-documentation/draggable/drag-overlay#class-name-and-inline-styles */\n          /* eslint-disable-next-line react/forbid-component-props */}\n          <DragOverlay className={styles['drag-overlay']} dropAnimation={null} style={{ zIndex: 5000 }}>\n            {activeOption && (\n              <ContentDisplayOption\n                listeners={{ onKeyDown: handleKeyDown }}\n                dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                onToggle={onToggle}\n                option={activeOption}\n              />\n            )}\n          </DragOverlay>\n        </Portal>\n      </DndContext>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.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, { useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport { DndContainer } from '../../internal/components/dnd-container';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport InternalTextFilter from '../../text-filter/internal';\nimport { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';\nimport { CollectionPreferencesProps } from '../interfaces';\nimport ContentDisplayOption, { getClassName as getOptionClassName } from './content-display-option';\nimport { getFilteredOptions, getSortedOptions, OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n  onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n  value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n  title,\n  description,\n  options,\n  value = options.map(({ id }) => ({\n    id,\n    visible: true,\n  })),\n  onChange,\n  liveAnnouncementDndStarted,\n  liveAnnouncementDndItemReordered,\n  liveAnnouncementDndItemCommitted,\n  liveAnnouncementDndDiscarded,\n  dragHandleAriaDescription,\n  dragHandleAriaLabel,\n  enableColumnFiltering = false,\n  i18nStrings,\n}: ContentDisplayPreferenceProps) {\n  const idPrefix = useUniqueId(componentPrefix);\n  const i18n = useInternalI18n('collection-preferences');\n  const [columnFilteringText, setColumnFilteringText] = useState('');\n\n  const titleId = `${idPrefix}-title`;\n  const descriptionId = `${idPrefix}-description`;\n\n  const [sortedOptions, sortedAndFilteredOptions] = useMemo(() => {\n    const sorted = getSortedOptions({ options, contentDisplay: value });\n    const filtered = getFilteredOptions(sorted, columnFilteringText);\n    return [sorted, filtered];\n  }, [columnFilteringText, options, value]);\n\n  const onToggle = (option: OptionWithVisibility) => {\n    // We use sortedOptions as base and not value because there might be options that\n    // are not in the value yet, so they're added as non-visible after the known ones.\n    onChange(sortedOptions.map(({ id, visible }) => ({ id, visible: id === option.id ? !option.visible : visible })));\n  };\n\n  return (\n    <div className={styles[componentPrefix]} {...getAnalyticsInnerContextAttribute('contentDisplay')}>\n      <h3 className={getClassName('title')} id={titleId}>\n        {i18n('contentDisplayPreference.title', title)}\n      </h3>\n      <p className={getClassName('description')} id={descriptionId}>\n        {i18n('contentDisplayPreference.description', description)}\n      </p>\n\n      {/* Filter input */}\n      {enableColumnFiltering && (\n        <div className={getClassName('text-filter')}>\n          <InternalTextFilter\n            filteringText={columnFilteringText}\n            filteringPlaceholder={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringPlaceholder',\n              i18nStrings?.columnFilteringPlaceholder\n            )}\n            filteringAriaLabel={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringAriaLabel',\n              i18nStrings?.columnFilteringAriaLabel\n            )}\n            filteringClearAriaLabel={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n              i18nStrings?.columnFilteringClearFilterText\n            )}\n            onChange={({ detail }) => setColumnFilteringText(detail.filteringText)}\n            countText={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringCountText',\n              i18nStrings?.columnFilteringCountText\n                ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length)\n                : undefined,\n              format => format({ count: sortedAndFilteredOptions.length })\n            )}\n          />\n        </div>\n      )}\n\n      {/* No match */}\n      {sortedAndFilteredOptions.length === 0 && (\n        <div className={getClassName('no-match')}>\n          <InternalSpaceBetween size=\"s\" alignItems=\"center\">\n            <InternalBox margin={{ top: 'm' }}>\n              {i18n(\n                'contentDisplayPreference.i18nStrings.columnFilteringNoMatchText',\n                i18nStrings?.columnFilteringNoMatchText\n              )}\n            </InternalBox>\n            <InternalButton onClick={() => setColumnFilteringText('')}>\n              {i18n(\n                'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n                i18nStrings?.columnFilteringClearFilterText\n              )}\n            </InternalButton>\n          </InternalSpaceBetween>\n        </div>\n      )}\n\n      {/* Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n            See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n      <ul\n        className={getClassName('option-list')}\n        aria-describedby={descriptionId}\n        aria-labelledby={titleId}\n        role=\"list\"\n      >\n        <DndContainer\n          sortedOptions={sortedAndFilteredOptions}\n          getId={option => option.id}\n          onChange={options => onChange(options.map(({ id, visible }) => ({ id, visible })))}\n          disabled={columnFilteringText.trim().length > 0}\n          renderOption={props => (\n            <li\n              className={clsx(\n                getOptionClassName(),\n                props.isDragging && styles.placeholder,\n                props.isSorting && styles.sorting\n              )}\n              style={props.style}\n            >\n              <ContentDisplayOption\n                ref={props.ref}\n                listeners={props.listeners}\n                dragHandleAriaLabel={props.dragHandleAriaLabel}\n                onToggle={onToggle}\n                option={props.option}\n                disabled={props.attributes['aria-disabled']}\n              />\n            </li>\n          )}\n          renderActiveOption={props => (\n            <ContentDisplayOption\n              option={props.option}\n              dragHandleAriaLabel={props.dragHandleAriaLabel}\n              listeners={props.listeners}\n              onToggle={onToggle}\n            />\n          )}\n          i18nStrings={{\n            liveAnnouncementDndStarted: i18n(\n              'contentDisplayPreference.liveAnnouncementDndStarted',\n              liveAnnouncementDndStarted,\n              format => (position, total) => format({ position, total })\n            ),\n            liveAnnouncementDndItemReordered: i18n(\n              'contentDisplayPreference.liveAnnouncementDndItemReordered',\n              liveAnnouncementDndItemReordered,\n              format => (initialPosition, currentPosition, total) =>\n                format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })\n            ),\n            liveAnnouncementDndItemCommitted: i18n(\n              'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n              liveAnnouncementDndItemCommitted,\n              format => (initialPosition, finalPosition, total) =>\n                format({\n                  initialPosition,\n                  finalPosition,\n                  total,\n                  isInitialPosition: `${initialPosition === finalPosition}`,\n                })\n            ),\n            liveAnnouncementDndDiscarded: i18n(\n              'contentDisplayPreference.liveAnnouncementDndDiscarded',\n              liveAnnouncementDndDiscarded\n            ),\n            dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel),\n            dragHandleAriaDescription: i18n(\n              'contentDisplayPreference.dragHandleAriaDescription',\n              dragHandleAriaDescription\n            ),\n          }}\n        />\n      </ul>\n    </div>\n  );\n}\n"]}

package/collection-preferences/content-display/styles.css.js

@@ -1,18 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_nb5zf_281",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_nb5zf_285",
-  "content-display-option": "awsui_content-display-option_1f3h0_nb5zf_281",
-  "placeholder": "awsui_placeholder_1f3h0_nb5zf_332",
-  "sorting": "awsui_sorting_1f3h0_nb5zf_332",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_nb5zf_359",
-  "drag-overlay": "awsui_drag-overlay_1f3h0_nb5zf_366",
-  "content-display": "awsui_content-display_1f3h0_nb5zf_281",
-  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_nb5zf_396",
-  "content-display-no-match": "awsui_content-display-no-match_1f3h0_nb5zf_397",
-  "content-display-title": "awsui_content-display-title_1f3h0_nb5zf_401",
-  "content-display-description": "awsui_content-display-description_1f3h0_nb5zf_410",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_nb5zf_418"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_9nj3i_281",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_9nj3i_285",
+  "content-display-option": "awsui_content-display-option_1f3h0_9nj3i_281",
+  "placeholder": "awsui_placeholder_1f3h0_9nj3i_332",
+  "sorting": "awsui_sorting_1f3h0_9nj3i_332",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_9nj3i_359",
+  "content-display": "awsui_content-display_1f3h0_9nj3i_281",
+  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_9nj3i_367",
+  "content-display-no-match": "awsui_content-display-no-match_1f3h0_9nj3i_368",
+  "content-display-title": "awsui_content-display-title_1f3h0_9nj3i_372",
+  "content-display-description": "awsui_content-display-description_1f3h0_9nj3i_381",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_9nj3i_389"
 };
   

package/collection-preferences/content-display/styles.scoped.css

@@ -278,11 +278,11 @@ 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_content-display-option-toggle_1f3h0_nb5zf_281:not(#\9) {
+.awsui_content-display-option-toggle_1f3h0_9nj3i_281:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-option-content_1f3h0_nb5zf_285:not(#\9) {
+.awsui_content-display-option-content_1f3h0_9nj3i_285:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -325,28 +325,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
 
-.awsui_content-display-option_1f3h0_nb5zf_281:not(#\9) {
+.awsui_content-display-option_1f3h0_9nj3i_281:not(#\9) {
   list-style: none;
   position: relative;
   border-block-start: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-divider-secondary-alwp8z, #ebebf0);
 }
-.awsui_content-display-option_1f3h0_nb5zf_281:not(#\9):not(.awsui_placeholder_1f3h0_nb5zf_332).awsui_sorting_1f3h0_nb5zf_332 {
+.awsui_content-display-option_1f3h0_9nj3i_281:not(#\9):not(.awsui_placeholder_1f3h0_9nj3i_332).awsui_sorting_1f3h0_9nj3i_332 {
   transition: transform var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-display-option_1f3h0_nb5zf_281:not(#\9):not(.awsui_placeholder_1f3h0_nb5zf_332).awsui_sorting_1f3h0_nb5zf_332 {
+  .awsui_content-display-option_1f3h0_9nj3i_281:not(#\9):not(.awsui_placeholder_1f3h0_9nj3i_332).awsui_sorting_1f3h0_9nj3i_332 {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-display-option_1f3h0_nb5zf_281:not(#\9):not(.awsui_placeholder_1f3h0_nb5zf_332).awsui_sorting_1f3h0_nb5zf_332, .awsui-mode-entering .awsui_content-display-option_1f3h0_nb5zf_281:not(#\9):not(.awsui_placeholder_1f3h0_nb5zf_332).awsui_sorting_1f3h0_nb5zf_332 {
+.awsui-motion-disabled .awsui_content-display-option_1f3h0_9nj3i_281:not(#\9):not(.awsui_placeholder_1f3h0_9nj3i_332).awsui_sorting_1f3h0_9nj3i_332, .awsui-mode-entering .awsui_content-display-option_1f3h0_9nj3i_281:not(#\9):not(.awsui_placeholder_1f3h0_9nj3i_332).awsui_sorting_1f3h0_9nj3i_332 {
   animation: none;
   transition: none;
 }
-.awsui_content-display-option_1f3h0_nb5zf_281.awsui_placeholder_1f3h0_nb5zf_332 > .awsui_content-display-option-content_1f3h0_nb5zf_285:not(#\9) {
+.awsui_content-display-option_1f3h0_9nj3i_281.awsui_placeholder_1f3h0_9nj3i_332 > .awsui_content-display-option-content_1f3h0_9nj3i_285:not(#\9) {
   position: relative;
 }
-.awsui_content-display-option_1f3h0_nb5zf_281.awsui_placeholder_1f3h0_nb5zf_332 > .awsui_content-display-option-content_1f3h0_nb5zf_285:not(#\9):after {
+.awsui_content-display-option_1f3h0_9nj3i_281.awsui_placeholder_1f3h0_9nj3i_332 > .awsui_content-display-option-content_1f3h0_9nj3i_285:not(#\9):after {
   content: " ";
   position: absolute;
   inset: 0;
@@ -357,49 +357,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
 
-.awsui_content-display-option-label_1f3h0_nb5zf_359:not(#\9) {
+.awsui_content-display-option-label_1f3h0_9nj3i_359:not(#\9) {
   flex-grow: 1;
   min-inline-size: 0;
   word-break: break-word;
   padding-inline-end: var(--space-l-t419sm, 20px);
 }
 
-.awsui_drag-overlay_1f3h0_nb5zf_366:not(#\9) {
-  box-shadow: var(--shadow-container-active-kl29x9, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
-  border-start-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-start-end-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-end-radius: var(--border-radius-item-05df9h, 8px);
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nb5zf_366:not(#\9) {
-  position: relative;
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nb5zf_366:not(#\9) {
-  outline: 2px dotted transparent;
-  outline-offset: calc(0px - 1px);
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nb5zf_366:not(#\9)::before {
-  content: " ";
-  display: block;
-  position: absolute;
-  inset-inline-start: calc(-1 * 0px);
-  inset-block-start: calc(-1 * 0px);
-  inline-size: calc(100% + 0px + 0px);
-  block-size: calc(100% + 0px + 0px);
-  border-start-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-start-end-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-end-radius: var(--border-radius-item-05df9h, 8px);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
-}
-
-.awsui_content-display_1f3h0_nb5zf_281:not(#\9),
-.awsui_content-display-text-filter_1f3h0_nb5zf_396:not(#\9),
-.awsui_content-display-no-match_1f3h0_nb5zf_397:not(#\9) {
+.awsui_content-display_1f3h0_9nj3i_281:not(#\9),
+.awsui_content-display-text-filter_1f3h0_9nj3i_367:not(#\9),
+.awsui_content-display-no-match_1f3h0_9nj3i_368:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-title_1f3h0_nb5zf_401:not(#\9) {
+.awsui_content-display-title_1f3h0_9nj3i_372:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   font-weight: var(--font-display-label-weight-815ja9, 700);
@@ -408,7 +379,7 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nb5zf_366:not(#\9)
   margin-inline: 0;
 }
 
-.awsui_content-display-description_1f3h0_nb5zf_410:not(#\9) {
+.awsui_content-display-description_1f3h0_9nj3i_381:not(#\9) {
   color: var(--color-text-form-secondary-54emib, #656871);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
@@ -416,7 +387,7 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nb5zf_366:not(#\9)
   margin-block-start: var(--space-scaled-xxxs-27y4hv, 2px);
 }
 
-.awsui_content-display-option-list_1f3h0_nb5zf_418:not(#\9) {
+.awsui_content-display-option-list_1f3h0_9nj3i_389:not(#\9) {
   position: relative;
   list-style: none;
   padding-block: 0;

package/collection-preferences/content-display/styles.selectors.js

@@ -2,18 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_nb5zf_281",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_nb5zf_285",
-  "content-display-option": "awsui_content-display-option_1f3h0_nb5zf_281",
-  "placeholder": "awsui_placeholder_1f3h0_nb5zf_332",
-  "sorting": "awsui_sorting_1f3h0_nb5zf_332",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_nb5zf_359",
-  "drag-overlay": "awsui_drag-overlay_1f3h0_nb5zf_366",
-  "content-display": "awsui_content-display_1f3h0_nb5zf_281",
-  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_nb5zf_396",
-  "content-display-no-match": "awsui_content-display-no-match_1f3h0_nb5zf_397",
-  "content-display-title": "awsui_content-display-title_1f3h0_nb5zf_401",
-  "content-display-description": "awsui_content-display-description_1f3h0_nb5zf_410",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_nb5zf_418"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_9nj3i_281",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_9nj3i_285",
+  "content-display-option": "awsui_content-display-option_1f3h0_9nj3i_281",
+  "placeholder": "awsui_placeholder_1f3h0_9nj3i_332",
+  "sorting": "awsui_sorting_1f3h0_9nj3i_332",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_9nj3i_359",
+  "content-display": "awsui_content-display_1f3h0_9nj3i_281",
+  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_9nj3i_367",
+  "content-display-no-match": "awsui_content-display-no-match_1f3h0_9nj3i_368",
+  "content-display-title": "awsui_content-display-title_1f3h0_9nj3i_372",
+  "content-display-description": "awsui_content-display-description_1f3h0_9nj3i_381",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_9nj3i_389"
 };
   

package/collection-preferences/styles.css.js

@@ -1,44 +1,43 @@
 
     import './styles.scoped.css';
     export default {
-  "visible-content": "awsui_visible-content_tc96w_crn4g_281",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_crn4g_282",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_crn4g_283",
-  "visible-content-group": "awsui_visible-content-group_tc96w_crn4g_283",
-  "visible-content-title": "awsui_visible-content-title_tc96w_crn4g_288",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_crn4g_298",
-  "visible-content-option": "awsui_visible-content-option_tc96w_crn4g_304",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_crn4g_317",
-  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_crn4g_604",
-  "content-display-option-content": "awsui_content-display-option-content_tc96w_crn4g_608",
-  "content-display-option": "awsui_content-display-option_tc96w_crn4g_604",
-  "placeholder": "awsui_placeholder_tc96w_crn4g_655",
-  "sorting": "awsui_sorting_tc96w_crn4g_655",
-  "content-display-option-label": "awsui_content-display-option-label_tc96w_crn4g_682",
-  "drag-overlay": "awsui_drag-overlay_tc96w_crn4g_689",
-  "content-display": "awsui_content-display_tc96w_crn4g_604",
-  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_crn4g_719",
-  "content-display-no-match": "awsui_content-display-no-match_tc96w_crn4g_720",
-  "content-display-title": "awsui_content-display-title_tc96w_crn4g_724",
-  "content-display-description": "awsui_content-display-description_tc96w_crn4g_733",
-  "content-display-option-list": "awsui_content-display-option-list_tc96w_crn4g_741",
-  "root": "awsui_root_tc96w_crn4g_748",
-  "modal-root": "awsui_modal-root_tc96w_crn4g_749",
-  "trigger-button": "awsui_trigger-button_tc96w_crn4g_750",
-  "cancel-button": "awsui_cancel-button_tc96w_crn4g_751",
-  "confirm-button": "awsui_confirm-button_tc96w_crn4g_752",
-  "custom": "awsui_custom_tc96w_crn4g_753",
-  "second-column-small": "awsui_second-column-small_tc96w_crn4g_757",
-  "wrap-lines": "awsui_wrap-lines_tc96w_crn4g_761",
-  "striped-rows": "awsui_striped-rows_tc96w_crn4g_762",
-  "content-density": "awsui_content-density_tc96w_crn4g_763",
-  "page-size": "awsui_page-size_tc96w_crn4g_764",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_crn4g_765",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_crn4g_766",
-  "sticky-columns": "awsui_sticky-columns_tc96w_crn4g_767",
-  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_crn4g_768",
-  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_crn4g_769",
-  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_crn4g_770",
-  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_crn4g_771"
+  "visible-content": "awsui_visible-content_tc96w_ro5mx_281",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_ro5mx_282",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_ro5mx_283",
+  "visible-content-group": "awsui_visible-content-group_tc96w_ro5mx_283",
+  "visible-content-title": "awsui_visible-content-title_tc96w_ro5mx_288",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_ro5mx_298",
+  "visible-content-option": "awsui_visible-content-option_tc96w_ro5mx_304",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_ro5mx_317",
+  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_ro5mx_604",
+  "content-display-option-content": "awsui_content-display-option-content_tc96w_ro5mx_608",
+  "content-display-option": "awsui_content-display-option_tc96w_ro5mx_604",
+  "placeholder": "awsui_placeholder_tc96w_ro5mx_655",
+  "sorting": "awsui_sorting_tc96w_ro5mx_655",
+  "content-display-option-label": "awsui_content-display-option-label_tc96w_ro5mx_682",
+  "content-display": "awsui_content-display_tc96w_ro5mx_604",
+  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_ro5mx_690",
+  "content-display-no-match": "awsui_content-display-no-match_tc96w_ro5mx_691",
+  "content-display-title": "awsui_content-display-title_tc96w_ro5mx_695",
+  "content-display-description": "awsui_content-display-description_tc96w_ro5mx_704",
+  "content-display-option-list": "awsui_content-display-option-list_tc96w_ro5mx_712",
+  "root": "awsui_root_tc96w_ro5mx_719",
+  "modal-root": "awsui_modal-root_tc96w_ro5mx_720",
+  "trigger-button": "awsui_trigger-button_tc96w_ro5mx_721",
+  "cancel-button": "awsui_cancel-button_tc96w_ro5mx_722",
+  "confirm-button": "awsui_confirm-button_tc96w_ro5mx_723",
+  "custom": "awsui_custom_tc96w_ro5mx_724",
+  "second-column-small": "awsui_second-column-small_tc96w_ro5mx_728",
+  "wrap-lines": "awsui_wrap-lines_tc96w_ro5mx_732",
+  "striped-rows": "awsui_striped-rows_tc96w_ro5mx_733",
+  "content-density": "awsui_content-density_tc96w_ro5mx_734",
+  "page-size": "awsui_page-size_tc96w_ro5mx_735",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_ro5mx_736",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_ro5mx_737",
+  "sticky-columns": "awsui_sticky-columns_tc96w_ro5mx_738",
+  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_ro5mx_739",
+  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_ro5mx_740",
+  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_ro5mx_741",
+  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_ro5mx_742"
 };
   

package/collection-preferences/styles.scoped.css

@@ -278,14 +278,14 @@ 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_visible-content_tc96w_crn4g_281:not(#\9),
-.awsui_visible-content-toggle_tc96w_crn4g_282:not(#\9),
-.awsui_visible-content-groups_tc96w_crn4g_283:not(#\9),
-.awsui_visible-content-group_tc96w_crn4g_283:not(#\9) {
+.awsui_visible-content_tc96w_ro5mx_281:not(#\9),
+.awsui_visible-content-toggle_tc96w_ro5mx_282:not(#\9),
+.awsui_visible-content-groups_tc96w_ro5mx_283:not(#\9),
+.awsui_visible-content-group_tc96w_ro5mx_283:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_visible-content-title_tc96w_crn4g_288:not(#\9) {
+.awsui_visible-content-title_tc96w_ro5mx_288:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   font-weight: var(--font-display-label-weight-815ja9, 700);
@@ -295,13 +295,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
 }
 
-.awsui_visible-content-group-label_tc96w_crn4g_298:not(#\9) {
+.awsui_visible-content-group-label_tc96w_ro5mx_298:not(#\9) {
   color: var(--color-text-group-label-8pk3es, #424650);
   padding-block-end: var(--space-xs-zb16t3, 8px);
   border-block-end: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-divider-secondary-alwp8z, #ebebf0);
 }
 
-.awsui_visible-content-option_tc96w_crn4g_304:not(#\9) {
+.awsui_visible-content-option_tc96w_ro5mx_304:not(#\9) {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
@@ -310,11 +310,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline-end: 0px;
   border-block-end: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-divider-secondary-alwp8z, #ebebf0);
 }
-.awsui_visible-content-option_tc96w_crn4g_304:not(#\9):last-child {
+.awsui_visible-content-option_tc96w_ro5mx_304:not(#\9):last-child {
   border-block-end: none;
 }
 
-.awsui_visible-content-option-label_tc96w_crn4g_317:not(#\9) {
+.awsui_visible-content-option-label_tc96w_ro5mx_317:not(#\9) {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-inline-end: var(--space-l-t419sm, 20px);
@@ -601,11 +601,11 @@ 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_content-display-option-toggle_tc96w_crn4g_604:not(#\9) {
+.awsui_content-display-option-toggle_tc96w_ro5mx_604:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-option-content_tc96w_crn4g_608:not(#\9) {
+.awsui_content-display-option-content_tc96w_ro5mx_608:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -648,28 +648,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
 
-.awsui_content-display-option_tc96w_crn4g_604:not(#\9) {
+.awsui_content-display-option_tc96w_ro5mx_604:not(#\9) {
   list-style: none;
   position: relative;
   border-block-start: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-divider-secondary-alwp8z, #ebebf0);
 }
-.awsui_content-display-option_tc96w_crn4g_604:not(#\9):not(.awsui_placeholder_tc96w_crn4g_655).awsui_sorting_tc96w_crn4g_655 {
+.awsui_content-display-option_tc96w_ro5mx_604:not(#\9):not(.awsui_placeholder_tc96w_ro5mx_655).awsui_sorting_tc96w_ro5mx_655 {
   transition: transform var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-display-option_tc96w_crn4g_604:not(#\9):not(.awsui_placeholder_tc96w_crn4g_655).awsui_sorting_tc96w_crn4g_655 {
+  .awsui_content-display-option_tc96w_ro5mx_604:not(#\9):not(.awsui_placeholder_tc96w_ro5mx_655).awsui_sorting_tc96w_ro5mx_655 {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-display-option_tc96w_crn4g_604:not(#\9):not(.awsui_placeholder_tc96w_crn4g_655).awsui_sorting_tc96w_crn4g_655, .awsui-mode-entering .awsui_content-display-option_tc96w_crn4g_604:not(#\9):not(.awsui_placeholder_tc96w_crn4g_655).awsui_sorting_tc96w_crn4g_655 {
+.awsui-motion-disabled .awsui_content-display-option_tc96w_ro5mx_604:not(#\9):not(.awsui_placeholder_tc96w_ro5mx_655).awsui_sorting_tc96w_ro5mx_655, .awsui-mode-entering .awsui_content-display-option_tc96w_ro5mx_604:not(#\9):not(.awsui_placeholder_tc96w_ro5mx_655).awsui_sorting_tc96w_ro5mx_655 {
   animation: none;
   transition: none;
 }
-.awsui_content-display-option_tc96w_crn4g_604.awsui_placeholder_tc96w_crn4g_655 > .awsui_content-display-option-content_tc96w_crn4g_608:not(#\9) {
+.awsui_content-display-option_tc96w_ro5mx_604.awsui_placeholder_tc96w_ro5mx_655 > .awsui_content-display-option-content_tc96w_ro5mx_608:not(#\9) {
   position: relative;
 }
-.awsui_content-display-option_tc96w_crn4g_604.awsui_placeholder_tc96w_crn4g_655 > .awsui_content-display-option-content_tc96w_crn4g_608:not(#\9):after {
+.awsui_content-display-option_tc96w_ro5mx_604.awsui_placeholder_tc96w_ro5mx_655 > .awsui_content-display-option-content_tc96w_ro5mx_608:not(#\9):after {
   content: " ";
   position: absolute;
   inset: 0;
@@ -680,49 +680,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
 
-.awsui_content-display-option-label_tc96w_crn4g_682:not(#\9) {
+.awsui_content-display-option-label_tc96w_ro5mx_682:not(#\9) {
   flex-grow: 1;
   min-inline-size: 0;
   word-break: break-word;
   padding-inline-end: var(--space-l-t419sm, 20px);
 }
 
-.awsui_drag-overlay_tc96w_crn4g_689:not(#\9) {
-  box-shadow: var(--shadow-container-active-kl29x9, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
-  border-start-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-start-end-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-end-radius: var(--border-radius-item-05df9h, 8px);
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_tc96w_crn4g_689:not(#\9) {
-  position: relative;
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_tc96w_crn4g_689:not(#\9) {
-  outline: 2px dotted transparent;
-  outline-offset: calc(0px - 1px);
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_tc96w_crn4g_689:not(#\9)::before {
-  content: " ";
-  display: block;
-  position: absolute;
-  inset-inline-start: calc(-1 * 0px);
-  inset-block-start: calc(-1 * 0px);
-  inline-size: calc(100% + 0px + 0px);
-  block-size: calc(100% + 0px + 0px);
-  border-start-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-start-end-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-end-radius: var(--border-radius-item-05df9h, 8px);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
-}
-
-.awsui_content-display_tc96w_crn4g_604:not(#\9),
-.awsui_content-display-text-filter_tc96w_crn4g_719:not(#\9),
-.awsui_content-display-no-match_tc96w_crn4g_720:not(#\9) {
+.awsui_content-display_tc96w_ro5mx_604:not(#\9),
+.awsui_content-display-text-filter_tc96w_ro5mx_690:not(#\9),
+.awsui_content-display-no-match_tc96w_ro5mx_691:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-title_tc96w_crn4g_724:not(#\9) {
+.awsui_content-display-title_tc96w_ro5mx_695:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   font-weight: var(--font-display-label-weight-815ja9, 700);
@@ -731,7 +702,7 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay_tc96w_crn4g_689:not(#\9)
   margin-inline: 0;
 }
 
-.awsui_content-display-description_tc96w_crn4g_733:not(#\9) {
+.awsui_content-display-description_tc96w_ro5mx_704:not(#\9) {
   color: var(--color-text-form-secondary-54emib, #656871);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
@@ -739,36 +710,36 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay_tc96w_crn4g_689:not(#\9)
   margin-block-start: var(--space-scaled-xxxs-27y4hv, 2px);
 }
 
-.awsui_content-display-option-list_tc96w_crn4g_741:not(#\9) {
+.awsui_content-display-option-list_tc96w_ro5mx_712:not(#\9) {
   position: relative;
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
 }
 
-.awsui_root_tc96w_crn4g_748:not(#\9),
-.awsui_modal-root_tc96w_crn4g_749:not(#\9),
-.awsui_trigger-button_tc96w_crn4g_750:not(#\9),
-.awsui_cancel-button_tc96w_crn4g_751:not(#\9),
-.awsui_confirm-button_tc96w_crn4g_752:not(#\9),
-.awsui_custom_tc96w_crn4g_753:not(#\9) {
+.awsui_root_tc96w_ro5mx_719:not(#\9),
+.awsui_modal-root_tc96w_ro5mx_720:not(#\9),
+.awsui_trigger-button_tc96w_ro5mx_721:not(#\9),
+.awsui_cancel-button_tc96w_ro5mx_722:not(#\9),
+.awsui_confirm-button_tc96w_ro5mx_723:not(#\9),
+.awsui_custom_tc96w_ro5mx_724:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_second-column-small_tc96w_crn4g_757:not(#\9) {
+.awsui_second-column-small_tc96w_ro5mx_728:not(#\9) {
   padding-block-start: calc(2 * var(--space-scaled-l-0hpmd7, 20px));
 }
 
-.awsui_wrap-lines_tc96w_crn4g_761:not(#\9),
-.awsui_striped-rows_tc96w_crn4g_762:not(#\9),
-.awsui_content-density_tc96w_crn4g_763:not(#\9),
-.awsui_page-size_tc96w_crn4g_764:not(#\9),
-.awsui_page-size-form-field_tc96w_crn4g_765:not(#\9),
-.awsui_page-size-radio-group_tc96w_crn4g_766:not(#\9),
-.awsui_sticky-columns_tc96w_crn4g_767:not(#\9),
-.awsui_sticky-columns-form-field_tc96w_crn4g_768:not(#\9),
-.awsui_sticky-columns-radio-group_tc96w_crn4g_769:not(#\9),
-.awsui_sticky-columns-first_tc96w_crn4g_770:not(#\9),
-.awsui_sticky-columns-last_tc96w_crn4g_771:not(#\9) {
+.awsui_wrap-lines_tc96w_ro5mx_732:not(#\9),
+.awsui_striped-rows_tc96w_ro5mx_733:not(#\9),
+.awsui_content-density_tc96w_ro5mx_734:not(#\9),
+.awsui_page-size_tc96w_ro5mx_735:not(#\9),
+.awsui_page-size-form-field_tc96w_ro5mx_736:not(#\9),
+.awsui_page-size-radio-group_tc96w_ro5mx_737:not(#\9),
+.awsui_sticky-columns_tc96w_ro5mx_738:not(#\9),
+.awsui_sticky-columns-form-field_tc96w_ro5mx_739:not(#\9),
+.awsui_sticky-columns-radio-group_tc96w_ro5mx_740:not(#\9),
+.awsui_sticky-columns-first_tc96w_ro5mx_741:not(#\9),
+.awsui_sticky-columns-last_tc96w_ro5mx_742:not(#\9) {
   /* used in test-utils */
 }