@cloudscape-design/components-themeable 3.0.27 → 3.0.30

package/lib/internal/template/pie-chart/segments.d.ts

@@ -7,7 +7,6 @@ interface SegmentsProps<T> {
     highlightedSegment: T | null;
     size: NonNullable<PieChartProps['size']>;
     variant: PieChartProps['variant'];
-    containerRef: React.RefObject<HTMLDivElement>;
     focusedSegmentRef: React.RefObject<SVGGElement>;
     popoverTrackRef: React.RefObject<SVGCircleElement>;
     segmentAriaRoleDescription?: string;
@@ -15,6 +14,6 @@ interface SegmentsProps<T> {
     onMouseOver: (datum: InternalChartDatum<T>) => void;
     onMouseOut: () => void;
 }
-export default function Segments<T extends PieChartProps.Datum>({ pieData, highlightedSegment, size, variant, containerRef, focusedSegmentRef, popoverTrackRef, segmentAriaRoleDescription, onClick, onMouseOver, onMouseOut, }: SegmentsProps<T>): JSX.Element;
+export default function Segments<T extends PieChartProps.Datum>({ pieData, highlightedSegment, size, variant, focusedSegmentRef, popoverTrackRef, segmentAriaRoleDescription, onClick, onMouseOver, onMouseOut, }: SegmentsProps<T>): JSX.Element;
 export {};
 //# sourceMappingURL=segments.d.ts.map

package/lib/internal/template/pie-chart/segments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segments.d.ts","sourceRoot":"","sources":["../../../src/pie-chart/segments.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAO,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKjD,UAAU,aAAa,CAAC,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,kBAAkB,EAAE,CAAC,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAChD,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACnD,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAEpC,OAAO,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChD,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACpD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,aAAa,CAAC,KAAK,EAAE,EAC9D,OAAO,EACP,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,0BAA0B,EAC1B,OAAO,EACP,WAAW,EACX,UAAU,GACX,EAAE,aAAa,CAAC,CAAC,CAAC,eAqElB"}
+{"version":3,"file":"segments.d.ts","sourceRoot":"","sources":["../../../src/pie-chart/segments.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAO,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKjD,UAAU,aAAa,CAAC,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,kBAAkB,EAAE,CAAC,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAChD,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACnD,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAEpC,OAAO,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChD,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACpD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,aAAa,CAAC,KAAK,EAAE,EAC9D,OAAO,EACP,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,0BAA0B,EAC1B,OAAO,EACP,WAAW,EACX,UAAU,GACX,EAAE,aAAa,CAAC,CAAC,CAAC,eAqElB"}

package/lib/internal/template/pie-chart/segments.js

@@ -8,8 +8,8 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import styles from './styles.css.js';
 import clsx from 'clsx';
 export default function Segments(_a) {
-    var pieData = _a.pieData, highlightedSegment = _a.highlightedSegment, size = _a.size, variant = _a.variant, containerRef = _a.containerRef, focusedSegmentRef = _a.focusedSegmentRef, popoverTrackRef = _a.popoverTrackRef, segmentAriaRoleDescription = _a.segmentAriaRoleDescription, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut;
-    var isRefresh = useVisualRefresh(containerRef);
+    var pieData = _a.pieData, highlightedSegment = _a.highlightedSegment, size = _a.size, variant = _a.variant, focusedSegmentRef = _a.focusedSegmentRef, popoverTrackRef = _a.popoverTrackRef, segmentAriaRoleDescription = _a.segmentAriaRoleDescription, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut;
+    var isRefresh = useVisualRefresh();
     var _b = useMemo(function () {
         var dimensions = isRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];
         var radius = dimensions.outerRadius;

package/lib/internal/template/pie-chart/segments.js.map

@@ -1 +1 @@
-{"version":3,"file":"segments.js","sourceRoot":"","sources":["../../../src/pie-chart/segments.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 } from 'react';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport { dimensionsBySize, refreshDimensionsBySize } from './utils';\nimport { InternalChartDatum } from './pie-chart';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\ninterface SegmentsProps<T> {\n  pieData: Array<PieArcDatum<InternalChartDatum<T>>>;\n  highlightedSegment: T | null;\n  size: NonNullable<PieChartProps['size']>;\n  variant: PieChartProps['variant'];\n  containerRef: React.RefObject<HTMLDivElement>;\n  focusedSegmentRef: React.RefObject<SVGGElement>;\n  popoverTrackRef: React.RefObject<SVGCircleElement>;\n  segmentAriaRoleDescription?: string;\n\n  onClick: (datum: InternalChartDatum<T>) => void;\n  onMouseOver: (datum: InternalChartDatum<T>) => void;\n  onMouseOut: () => void;\n}\n\nexport default function Segments<T extends PieChartProps.Datum>({\n  pieData,\n  highlightedSegment,\n  size,\n  variant,\n  containerRef,\n  focusedSegmentRef,\n  popoverTrackRef,\n  segmentAriaRoleDescription,\n  onClick,\n  onMouseOver,\n  onMouseOut,\n}: SegmentsProps<T>) {\n  const isRefresh = useVisualRefresh(containerRef);\n\n  const { arcFactory, highlightedArcFactory } = useMemo(() => {\n    const dimensions = isRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];\n    const radius = dimensions.outerRadius;\n    const innerRadius = variant === 'pie' ? 0 : dimensions.innerRadius;\n    const cornerRadius = dimensions.cornerRadius || 0;\n\n    const arcFactory = arc<PieArcDatum<InternalChartDatum<any>>>()\n      .innerRadius(innerRadius)\n      .outerRadius(radius)\n      .cornerRadius(cornerRadius);\n\n    const highlightedArcFactory = arc<PieArcDatum<InternalChartDatum<any>>>()\n      .innerRadius(radius + 4)\n      .outerRadius(radius + 6);\n\n    return {\n      arcFactory,\n      highlightedArcFactory,\n    };\n  }, [size, variant, isRefresh]);\n\n  const centroid = useMemo(() => {\n    for (const datum of pieData) {\n      if (datum.data.datum === highlightedSegment) {\n        const [centroidLeft, centroidTop] = arcFactory.centroid(datum);\n        return { cx: centroidLeft, cy: centroidTop };\n      }\n    }\n    return null;\n  }, [highlightedSegment, pieData, arcFactory]);\n\n  return (\n    <g onMouseLeave={() => onMouseOut()}>\n      {pieData.map(datum => {\n        const isHighlighted = highlightedSegment === datum.data.datum;\n        const isDimmed = highlightedSegment !== null && !isHighlighted;\n        const arcPath = arcFactory(datum) || undefined;\n        const highlightedPath = highlightedArcFactory(datum) || undefined;\n        return (\n          <g\n            key={datum.data.index}\n            onClick={() => onClick(datum.data)}\n            onMouseOver={() => onMouseOver(datum.data)}\n            className={clsx(styles.segment, {\n              [styles['segment--highlighted']]: isHighlighted,\n              [styles['segment--dimmed']]: isDimmed,\n            })}\n            ref={isHighlighted ? focusedSegmentRef : undefined}\n            aria-label={`${datum.data.datum.title} (${datum.data.datum.value})`}\n            role=\"button\"\n            aria-roledescription={segmentAriaRoleDescription}\n          >\n            <path d={arcPath} fill={datum.data.color} className={styles.segment__path} aria-hidden=\"true\" />\n            <path\n              d={highlightedPath}\n              fill={datum.data.color}\n              className={clsx(styles.segment__path, styles.segment__highlight)}\n              aria-hidden=\"true\"\n            />\n          </g>\n        );\n      })}\n\n      <circle {...centroid} ref={popoverTrackRef} r=\"1\" opacity=\"0\" aria-hidden=\"true\" />\n    </g>\n  );\n}\n"]}
+{"version":3,"file":"segments.js","sourceRoot":"","sources":["../../../src/pie-chart/segments.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 } from 'react';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport { dimensionsBySize, refreshDimensionsBySize } from './utils';\nimport { InternalChartDatum } from './pie-chart';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\ninterface SegmentsProps<T> {\n  pieData: Array<PieArcDatum<InternalChartDatum<T>>>;\n  highlightedSegment: T | null;\n  size: NonNullable<PieChartProps['size']>;\n  variant: PieChartProps['variant'];\n  focusedSegmentRef: React.RefObject<SVGGElement>;\n  popoverTrackRef: React.RefObject<SVGCircleElement>;\n  segmentAriaRoleDescription?: string;\n\n  onClick: (datum: InternalChartDatum<T>) => void;\n  onMouseOver: (datum: InternalChartDatum<T>) => void;\n  onMouseOut: () => void;\n}\n\nexport default function Segments<T extends PieChartProps.Datum>({\n  pieData,\n  highlightedSegment,\n  size,\n  variant,\n  focusedSegmentRef,\n  popoverTrackRef,\n  segmentAriaRoleDescription,\n  onClick,\n  onMouseOver,\n  onMouseOut,\n}: SegmentsProps<T>) {\n  const isRefresh = useVisualRefresh();\n\n  const { arcFactory, highlightedArcFactory } = useMemo(() => {\n    const dimensions = isRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];\n    const radius = dimensions.outerRadius;\n    const innerRadius = variant === 'pie' ? 0 : dimensions.innerRadius;\n    const cornerRadius = dimensions.cornerRadius || 0;\n\n    const arcFactory = arc<PieArcDatum<InternalChartDatum<any>>>()\n      .innerRadius(innerRadius)\n      .outerRadius(radius)\n      .cornerRadius(cornerRadius);\n\n    const highlightedArcFactory = arc<PieArcDatum<InternalChartDatum<any>>>()\n      .innerRadius(radius + 4)\n      .outerRadius(radius + 6);\n\n    return {\n      arcFactory,\n      highlightedArcFactory,\n    };\n  }, [size, variant, isRefresh]);\n\n  const centroid = useMemo(() => {\n    for (const datum of pieData) {\n      if (datum.data.datum === highlightedSegment) {\n        const [centroidLeft, centroidTop] = arcFactory.centroid(datum);\n        return { cx: centroidLeft, cy: centroidTop };\n      }\n    }\n    return null;\n  }, [highlightedSegment, pieData, arcFactory]);\n\n  return (\n    <g onMouseLeave={() => onMouseOut()}>\n      {pieData.map(datum => {\n        const isHighlighted = highlightedSegment === datum.data.datum;\n        const isDimmed = highlightedSegment !== null && !isHighlighted;\n        const arcPath = arcFactory(datum) || undefined;\n        const highlightedPath = highlightedArcFactory(datum) || undefined;\n        return (\n          <g\n            key={datum.data.index}\n            onClick={() => onClick(datum.data)}\n            onMouseOver={() => onMouseOver(datum.data)}\n            className={clsx(styles.segment, {\n              [styles['segment--highlighted']]: isHighlighted,\n              [styles['segment--dimmed']]: isDimmed,\n            })}\n            ref={isHighlighted ? focusedSegmentRef : undefined}\n            aria-label={`${datum.data.datum.title} (${datum.data.datum.value})`}\n            role=\"button\"\n            aria-roledescription={segmentAriaRoleDescription}\n          >\n            <path d={arcPath} fill={datum.data.color} className={styles.segment__path} aria-hidden=\"true\" />\n            <path\n              d={highlightedPath}\n              fill={datum.data.color}\n              className={clsx(styles.segment__path, styles.segment__highlight)}\n              aria-hidden=\"true\"\n            />\n          </g>\n        );\n      })}\n\n      <circle {...centroid} ref={popoverTrackRef} r=\"1\" opacity=\"0\" aria-hidden=\"true\" />\n    </g>\n  );\n}\n"]}

package/lib/internal/template/popover/container.js

@@ -20,7 +20,7 @@ export default function PopoverContainer(_a) {
     var arrowRef = useRef(null);
     var _c = useState(INITIAL_STYLES), inlineStyle = _c[0], setInlineStyle = _c[1];
     var _d = useState(null), internalPosition = _d[0], setInternalPosition = _d[1];
-    var isRefresh = useVisualRefresh(ref);
+    var isRefresh = useVisualRefresh();
     // Store the handler in a ref so that it can still be replaced from outside of the listener closure.
     var positionHandlerRef = useRef(function () { });
     // Updates the position handler.

package/lib/internal/template/popover/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.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, { CSSProperties, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getContainingBlock, nodeContains } from '../internal/utils/dom';\nimport { ContainerQueryEntry, useContainerQuery } from '../internal/hooks/container-queries';\nimport { BoundingOffset, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition } from './utils/positions';\nimport styles from './styles.css.js';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nexport interface PopoverContainerProps {\n  /** References the element the container is positioned against. */\n  trackRef: React.RefObject<Element>;\n  /**\n    Used to update the container position in case track or track position changes:\n    \n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n  position: PopoverProps.Position;\n  zIndex?: React.CSSProperties['zIndex'];\n  arrow: (position: InternalPosition | null) => React.ReactNode;\n  children: React.ReactNode;\n  renderWithPortal?: boolean;\n}\n\nconst INITIAL_STYLES: CSSProperties = { position: 'absolute', top: -9999, left: -9999 };\n\nexport default function PopoverContainer({\n  position,\n  trackRef,\n  trackKey,\n  arrow,\n  children,\n  zIndex,\n  renderWithPortal,\n}: PopoverContainerProps) {\n  const [popoverRect, ref] = useContainerQuery((rect, prev) => {\n    const roundedRect = { width: Math.round(rect.width), height: Math.round(rect.height) };\n    return prev?.width === roundedRect.width && prev?.height === roundedRect.height ? prev : rect;\n  }) as [ContainerQueryEntry | null, React.MutableRefObject<HTMLDivElement | null>];\n\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const [inlineStyle, setInlineStyle] = useState<CSSProperties>(INITIAL_STYLES);\n  const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n  const isRefresh = useVisualRefresh(ref);\n\n  // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n  const positionHandlerRef = useRef<() => void>(() => {});\n\n  // Updates the position handler.\n  const updatePositionHandler = useCallback(() => {\n    if (!trackRef.current || !ref.current || !bodyRef.current || !arrowRef.current) {\n      return;\n    }\n\n    // Get important elements\n    const body = bodyRef.current;\n    const arrow = arrowRef.current;\n    const document = ref.current.ownerDocument;\n    const track = trackRef.current;\n\n    // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n    // or track does not belong to the document - bail on calculating dimensions.\n    if (body.offsetWidth === 0 || body.offsetHeight === 0 || !nodeContains(document.body, track)) {\n      return;\n    }\n\n    // Imperatively move body off-screen to give it room to expand.\n    // Not doing this in React because this recalculation should happen\n    // in the span of a single frame without rerendering anything.\n    const prevTop = body.style.top;\n    const prevLeft = body.style.left;\n    body.style.top = '0';\n    body.style.left = '0';\n\n    // Get rects representing key elements\n    // Use getComputedStyle for arrowRect to avoid modifications made by transform\n    const viewportRect = getViewportRect(document.defaultView!);\n    const trackRect = track.getBoundingClientRect();\n    const arrowRect = {\n      width: parseFloat(getComputedStyle(arrow).width),\n      height: parseFloat(getComputedStyle(arrow).height),\n    };\n    const containingBlock = getContainingBlock(body);\n    const containingBlockRect = containingBlock ? containingBlock.getBoundingClientRect() : viewportRect;\n\n    // Round up dimensions (IE11 doesn't handle subpixels too accurately)\n    const bodyRect = body.getBoundingClientRect();\n    const bodyRectCeil = {\n      top: bodyRect.top,\n      left: bodyRect.left,\n      width: Math.ceil(bodyRect.width),\n      height: Math.ceil(bodyRect.height),\n    };\n\n    // Calculate the arrow direction and viewport-relative position of the popover.\n    const { internalPosition: newInternalPosition, boundingOffset } = calculatePosition(\n      position,\n      trackRect,\n      arrowRect,\n      bodyRectCeil,\n      containingBlock ? containingBlockRect : getDocumentRect(document),\n      viewportRect,\n      renderWithPortal\n    );\n\n    // Get the position of the popover relative to the offset parent.\n    const popoverOffset = toRelativePosition(boundingOffset, containingBlockRect);\n\n    // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n    // and use that to recalculate the new popover position.\n    const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n    // Bring back the container to its original position to prevent any\n    // flashing.\n    body.style.top = prevTop;\n    body.style.left = prevLeft;\n\n    // Position the popover\n    setInternalPosition(newInternalPosition);\n    setInlineStyle({ top: popoverOffset.top, left: popoverOffset.left });\n\n    positionHandlerRef.current = () => {\n      const newTrackOffset = toRelativePosition(\n        track.getBoundingClientRect(),\n        containingBlock ? containingBlock.getBoundingClientRect() : viewportRect\n      );\n      setInlineStyle({\n        top: newTrackOffset.top + trackRelativeOffset.top,\n        left: newTrackOffset.left + trackRelativeOffset.left,\n      });\n    };\n  }, [position, trackRef, ref, renderWithPortal]);\n\n  // Update the handler when properties change.\n  useLayoutEffect(() => {\n    updatePositionHandler();\n  }, [updatePositionHandler, trackKey, popoverRect]);\n\n  // Attach document listeners.\n  useLayoutEffect(() => {\n    /*\n      This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n      and by tracking the click event we can adapt the popover's position to the new layout.\n\n      TODO: extend this to Enter and Spacebar?\n    */\n    const updatePosition = () => requestAnimationFrame(() => updatePositionHandler());\n    const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n    window.addEventListener('click', updatePosition);\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', refreshPosition, true);\n    return () => {\n      window.removeEventListener('click', updatePosition);\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', refreshPosition, true);\n    };\n  }, [updatePositionHandler]);\n\n  const mergedRef = useMergeRefs(bodyRef, ref);\n\n  return (\n    <div\n      ref={mergedRef}\n      style={{ ...inlineStyle, zIndex }}\n      className={clsx(styles.container, isRefresh && styles.refresh)}\n    >\n      <div\n        ref={arrowRef}\n        className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n        aria-hidden={true}\n      >\n        {arrow(internalPosition)}\n      </div>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n  return {\n    top: element.top - parent.top,\n    left: element.left - parent.left,\n  };\n}\n\n/**\n * Get a BoundingOffset that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingOffset {\n  return {\n    top: 0,\n    left: 0,\n    width: window.innerWidth,\n    height: window.innerHeight,\n  };\n}\n\nfunction getDocumentRect(document: Document): BoundingOffset {\n  const { top, left } = document.documentElement.getBoundingClientRect();\n  return {\n    top,\n    left,\n    width: document.documentElement.scrollWidth,\n    height: document.documentElement.scrollHeight,\n  };\n}\n"]}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/popover/container.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAuB,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAE7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAsBhE,IAAM,cAAc,GAAkB,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAQjB;QAPtB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,gBAAgB,sBAAA;IAEV,IAAA,KAAqB,iBAAiB,CAAC,UAAC,IAAI,EAAE,IAAI;QACtD,IAAM,WAAW,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QACvF,OAAO,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,MAAK,WAAW,CAAC,KAAK,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,MAAK,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAChG,CAAC,CAAgF,EAH1E,WAAW,QAAA,EAAE,GAAG,QAG0D,CAAC;IAElF,IAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,IAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAE/C,IAAA,KAAgC,QAAQ,CAAgB,cAAc,CAAC,EAAtE,WAAW,QAAA,EAAE,cAAc,QAA2C,CAAC;IACxE,IAAA,KAA0C,QAAQ,CAA0B,IAAI,CAAC,EAAhF,gBAAgB,QAAA,EAAE,mBAAmB,QAA2C,CAAC;IACxF,IAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,oGAAoG;IACpG,IAAM,kBAAkB,GAAG,MAAM,CAAa,cAAO,CAAC,CAAC,CAAC;IAExD,gCAAgC;IAChC,IAAM,qBAAqB,GAAG,WAAW,CAAC;QACxC,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC9E,OAAO;SACR;QAED,yBAAyB;QACzB,IAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC;QAC3C,IAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAE/B,gGAAgG;QAChG,6EAA6E;QAC7E,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;YAC5F,OAAO;SACR;QAED,+DAA+D;QAC/D,mEAAmE;QACnE,8DAA8D;QAC9D,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QAC/B,IAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;QACrB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;QAEtB,sCAAsC;QACtC,8EAA8E;QAC9E,IAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,CAAC,WAAY,CAAC,CAAC;QAC5D,IAAM,SAAS,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAChD,IAAM,SAAS,GAAG;YAChB,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;YAChD,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;SACnD,CAAC;QACF,IAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACjD,IAAM,mBAAmB,GAAG,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;QAErG,qEAAqE;QACrE,IAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC9C,IAAM,YAAY,GAAG;YACnB,GAAG,EAAE,QAAQ,CAAC,GAAG;YACjB,IAAI,EAAE,QAAQ,CAAC,IAAI;YACnB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;YAChC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;SACnC,CAAC;QAEF,+EAA+E;QACzE,IAAA,KAA4D,iBAAiB,CACjF,QAAQ,EACR,SAAS,EACT,SAAS,EACT,YAAY,EACZ,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,EACjE,YAAY,EACZ,gBAAgB,CACjB,EARyB,mBAAmB,sBAAA,EAAE,cAAc,oBAQ5D,CAAC;QAEF,iEAAiE;QACjE,IAAM,aAAa,GAAG,kBAAkB,CAAC,cAAc,EAAE,mBAAmB,CAAC,CAAC;QAE9E,+FAA+F;QAC/F,wDAAwD;QACxD,IAAM,mBAAmB,GAAG,kBAAkB,CAAC,aAAa,EAAE,kBAAkB,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC;QAElH,mEAAmE;QACnE,YAAY;QACZ,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC;QACzB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;QAE3B,uBAAuB;QACvB,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;QACzC,cAAc,CAAC,EAAE,GAAG,EAAE,aAAa,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;QAErE,kBAAkB,CAAC,OAAO,GAAG;YAC3B,IAAM,cAAc,GAAG,kBAAkB,CACvC,KAAK,CAAC,qBAAqB,EAAE,EAC7B,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,YAAY,CACzE,CAAC;YACF,cAAc,CAAC;gBACb,GAAG,EAAE,cAAc,CAAC,GAAG,GAAG,mBAAmB,CAAC,GAAG;gBACjD,IAAI,EAAE,cAAc,CAAC,IAAI,GAAG,mBAAmB,CAAC,IAAI;aACrD,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEhD,6CAA6C;IAC7C,eAAe,CAAC;QACd,qBAAqB,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAEnD,6BAA6B;IAC7B,eAAe,CAAC;QACd;;;;;UAKE;QACF,IAAM,cAAc,GAAG,cAAM,OAAA,qBAAqB,CAAC,cAAM,OAAA,qBAAqB,EAAE,EAAvB,CAAuB,CAAC,EAApD,CAAoD,CAAC;QAClF,IAAM,eAAe,GAAG,cAAM,OAAA,qBAAqB,CAAC,cAAM,OAAA,kBAAkB,CAAC,OAAO,EAAE,EAA5B,CAA4B,CAAC,EAAzD,CAAyD,CAAC;QAExF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QACjD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;QACzD,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;YACpD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YACrD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAE7C,OAAO,CACL,6BACE,GAAG,EAAE,SAAS,EACd,KAAK,wBAAO,WAAW,KAAE,MAAM,QAAA,KAC/B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC;QAE9D,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,mCAA4B,gBAAgB,CAAE,CAAC,CAAC,iBACrF,IAAI,IAEhB,KAAK,CAAC,gBAAgB,CAAC,CACpB;QACL,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,kBAAkB,CAAC,OAAe,EAAE,MAAc;IACzD,OAAO;QACL,GAAG,EAAE,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG;QAC7B,IAAI,EAAE,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI;KACjC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,eAAe,CAAC,MAAc;IACrC,OAAO;QACL,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM,CAAC,UAAU;QACxB,MAAM,EAAE,MAAM,CAAC,WAAW;KAC3B,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,QAAkB;IACnC,IAAA,KAAgB,QAAQ,CAAC,eAAe,CAAC,qBAAqB,EAAE,EAA9D,GAAG,SAAA,EAAE,IAAI,UAAqD,CAAC;IACvE,OAAO;QACL,GAAG,KAAA;QACH,IAAI,MAAA;QACJ,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,WAAW;QAC3C,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAC,YAAY;KAC9C,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { CSSProperties, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getContainingBlock, nodeContains } from '../internal/utils/dom';\nimport { ContainerQueryEntry, useContainerQuery } from '../internal/hooks/container-queries';\nimport { BoundingOffset, InternalPosition, Offset, PopoverProps } from './interfaces';\nimport { calculatePosition } from './utils/positions';\nimport styles from './styles.css.js';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nexport interface PopoverContainerProps {\n  /** References the element the container is positioned against. */\n  trackRef: React.RefObject<Element>;\n  /**\n    Used to update the container position in case track or track position changes:\n    \n    const trackRef = useRef<Element>(null)\n    return (<>\n      <Track style={getPosition(selectedItemId)} ref={trackRef} />\n      <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n    </>)\n  */\n  trackKey?: string | number;\n  position: PopoverProps.Position;\n  zIndex?: React.CSSProperties['zIndex'];\n  arrow: (position: InternalPosition | null) => React.ReactNode;\n  children: React.ReactNode;\n  renderWithPortal?: boolean;\n}\n\nconst INITIAL_STYLES: CSSProperties = { position: 'absolute', top: -9999, left: -9999 };\n\nexport default function PopoverContainer({\n  position,\n  trackRef,\n  trackKey,\n  arrow,\n  children,\n  zIndex,\n  renderWithPortal,\n}: PopoverContainerProps) {\n  const [popoverRect, ref] = useContainerQuery((rect, prev) => {\n    const roundedRect = { width: Math.round(rect.width), height: Math.round(rect.height) };\n    return prev?.width === roundedRect.width && prev?.height === roundedRect.height ? prev : rect;\n  }) as [ContainerQueryEntry | null, React.MutableRefObject<HTMLDivElement | null>];\n\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const [inlineStyle, setInlineStyle] = useState<CSSProperties>(INITIAL_STYLES);\n  const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n  const isRefresh = useVisualRefresh();\n\n  // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n  const positionHandlerRef = useRef<() => void>(() => {});\n\n  // Updates the position handler.\n  const updatePositionHandler = useCallback(() => {\n    if (!trackRef.current || !ref.current || !bodyRef.current || !arrowRef.current) {\n      return;\n    }\n\n    // Get important elements\n    const body = bodyRef.current;\n    const arrow = arrowRef.current;\n    const document = ref.current.ownerDocument;\n    const track = trackRef.current;\n\n    // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n    // or track does not belong to the document - bail on calculating dimensions.\n    if (body.offsetWidth === 0 || body.offsetHeight === 0 || !nodeContains(document.body, track)) {\n      return;\n    }\n\n    // Imperatively move body off-screen to give it room to expand.\n    // Not doing this in React because this recalculation should happen\n    // in the span of a single frame without rerendering anything.\n    const prevTop = body.style.top;\n    const prevLeft = body.style.left;\n    body.style.top = '0';\n    body.style.left = '0';\n\n    // Get rects representing key elements\n    // Use getComputedStyle for arrowRect to avoid modifications made by transform\n    const viewportRect = getViewportRect(document.defaultView!);\n    const trackRect = track.getBoundingClientRect();\n    const arrowRect = {\n      width: parseFloat(getComputedStyle(arrow).width),\n      height: parseFloat(getComputedStyle(arrow).height),\n    };\n    const containingBlock = getContainingBlock(body);\n    const containingBlockRect = containingBlock ? containingBlock.getBoundingClientRect() : viewportRect;\n\n    // Round up dimensions (IE11 doesn't handle subpixels too accurately)\n    const bodyRect = body.getBoundingClientRect();\n    const bodyRectCeil = {\n      top: bodyRect.top,\n      left: bodyRect.left,\n      width: Math.ceil(bodyRect.width),\n      height: Math.ceil(bodyRect.height),\n    };\n\n    // Calculate the arrow direction and viewport-relative position of the popover.\n    const { internalPosition: newInternalPosition, boundingOffset } = calculatePosition(\n      position,\n      trackRect,\n      arrowRect,\n      bodyRectCeil,\n      containingBlock ? containingBlockRect : getDocumentRect(document),\n      viewportRect,\n      renderWithPortal\n    );\n\n    // Get the position of the popover relative to the offset parent.\n    const popoverOffset = toRelativePosition(boundingOffset, containingBlockRect);\n\n    // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n    // and use that to recalculate the new popover position.\n    const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n    // Bring back the container to its original position to prevent any\n    // flashing.\n    body.style.top = prevTop;\n    body.style.left = prevLeft;\n\n    // Position the popover\n    setInternalPosition(newInternalPosition);\n    setInlineStyle({ top: popoverOffset.top, left: popoverOffset.left });\n\n    positionHandlerRef.current = () => {\n      const newTrackOffset = toRelativePosition(\n        track.getBoundingClientRect(),\n        containingBlock ? containingBlock.getBoundingClientRect() : viewportRect\n      );\n      setInlineStyle({\n        top: newTrackOffset.top + trackRelativeOffset.top,\n        left: newTrackOffset.left + trackRelativeOffset.left,\n      });\n    };\n  }, [position, trackRef, ref, renderWithPortal]);\n\n  // Update the handler when properties change.\n  useLayoutEffect(() => {\n    updatePositionHandler();\n  }, [updatePositionHandler, trackKey, popoverRect]);\n\n  // Attach document listeners.\n  useLayoutEffect(() => {\n    /*\n      This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),\n      and by tracking the click event we can adapt the popover's position to the new layout.\n\n      TODO: extend this to Enter and Spacebar?\n    */\n    const updatePosition = () => requestAnimationFrame(() => updatePositionHandler());\n    const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());\n\n    window.addEventListener('click', updatePosition);\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', refreshPosition, true);\n    return () => {\n      window.removeEventListener('click', updatePosition);\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', refreshPosition, true);\n    };\n  }, [updatePositionHandler]);\n\n  const mergedRef = useMergeRefs(bodyRef, ref);\n\n  return (\n    <div\n      ref={mergedRef}\n      style={{ ...inlineStyle, zIndex }}\n      className={clsx(styles.container, isRefresh && styles.refresh)}\n    >\n      <div\n        ref={arrowRef}\n        className={clsx(styles[`container-arrow`], styles[`container-arrow-position-${internalPosition}`])}\n        aria-hidden={true}\n      >\n        {arrow(internalPosition)}\n      </div>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n  return {\n    top: element.top - parent.top,\n    left: element.left - parent.left,\n  };\n}\n\n/**\n * Get a BoundingOffset that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingOffset {\n  return {\n    top: 0,\n    left: 0,\n    width: window.innerWidth,\n    height: window.innerHeight,\n  };\n}\n\nfunction getDocumentRect(document: Document): BoundingOffset {\n  const { top, left } = document.documentElement.getBoundingClientRect();\n  return {\n    top,\n    left,\n    width: document.documentElement.scrollWidth,\n    height: document.documentElement.scrollHeight,\n  };\n}\n"]}

package/lib/internal/template/popover/styles.css.js

@@ -1,53 +1,53 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_xjuzf_rd87b_185",
-  "arrow-outer": "awsui_arrow-outer_xjuzf_rd87b_189",
-  "arrow-inner": "awsui_arrow-inner_xjuzf_rd87b_189",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_rd87b_220",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_rd87b_220",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_rd87b_223",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_rd87b_223",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_rd87b_226",
-  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_rd87b_226",
-  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_rd87b_226",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_rd87b_226",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_rd87b_229",
-  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_rd87b_229",
-  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_rd87b_229",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_rd87b_229",
-  "body": "awsui_body_xjuzf_rd87b_325",
-  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_rd87b_344",
-  "variant-annotation": "awsui_variant-annotation_xjuzf_rd87b_348",
-  "body-size-small": "awsui_body-size-small_xjuzf_rd87b_353",
-  "fixed-width": "awsui_fixed-width_xjuzf_rd87b_356",
-  "body-size-medium": "awsui_body-size-medium_xjuzf_rd87b_360",
-  "body-size-large": "awsui_body-size-large_xjuzf_rd87b_367",
-  "has-dismiss": "awsui_has-dismiss_xjuzf_rd87b_374",
-  "dismiss": "awsui_dismiss_xjuzf_rd87b_379",
-  "dismiss-control": "awsui_dismiss-control_xjuzf_rd87b_386",
-  "header-row": "awsui_header-row_xjuzf_rd87b_390",
-  "header": "awsui_header_xjuzf_rd87b_390",
-  "content": "awsui_content_xjuzf_rd87b_412",
-  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_rd87b_419",
-  "container": "awsui_container_xjuzf_rd87b_431",
-  "container-arrow": "awsui_container-arrow_xjuzf_rd87b_439",
-  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_rd87b_443",
-  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_rd87b_443",
-  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_rd87b_455",
-  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_rd87b_455",
-  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_rd87b_467",
-  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_rd87b_467",
-  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_rd87b_467",
-  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_rd87b_467",
-  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_rd87b_483",
-  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_rd87b_487",
-  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_rd87b_491",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_rd87b_1",
-  "refresh": "awsui_refresh_xjuzf_rd87b_609",
-  "root": "awsui_root_xjuzf_rd87b_631",
-  "trigger": "awsui_trigger_xjuzf_rd87b_643",
-  "trigger-type-text": "awsui_trigger-type-text_xjuzf_rd87b_650",
-  "trigger-inner-text": "awsui_trigger-inner-text_xjuzf_rd87b_679"
+  "arrow": "awsui_arrow_xjuzf_777hs_185",
+  "arrow-outer": "awsui_arrow-outer_xjuzf_777hs_189",
+  "arrow-inner": "awsui_arrow-inner_xjuzf_777hs_189",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_777hs_220",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_777hs_220",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_777hs_223",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_777hs_223",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_777hs_226",
+  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_777hs_226",
+  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_777hs_226",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_777hs_226",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_777hs_229",
+  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_777hs_229",
+  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_777hs_229",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_777hs_229",
+  "body": "awsui_body_xjuzf_777hs_325",
+  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_777hs_344",
+  "variant-annotation": "awsui_variant-annotation_xjuzf_777hs_348",
+  "body-size-small": "awsui_body-size-small_xjuzf_777hs_353",
+  "fixed-width": "awsui_fixed-width_xjuzf_777hs_356",
+  "body-size-medium": "awsui_body-size-medium_xjuzf_777hs_360",
+  "body-size-large": "awsui_body-size-large_xjuzf_777hs_367",
+  "has-dismiss": "awsui_has-dismiss_xjuzf_777hs_379",
+  "dismiss": "awsui_dismiss_xjuzf_777hs_384",
+  "dismiss-control": "awsui_dismiss-control_xjuzf_777hs_391",
+  "header-row": "awsui_header-row_xjuzf_777hs_395",
+  "header": "awsui_header_xjuzf_777hs_395",
+  "content": "awsui_content_xjuzf_777hs_417",
+  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_777hs_424",
+  "container": "awsui_container_xjuzf_777hs_436",
+  "container-arrow": "awsui_container-arrow_xjuzf_777hs_444",
+  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_777hs_448",
+  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_777hs_448",
+  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_777hs_460",
+  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_777hs_460",
+  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_777hs_472",
+  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_777hs_472",
+  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_777hs_472",
+  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_777hs_472",
+  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_777hs_488",
+  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_777hs_492",
+  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_777hs_496",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_777hs_1",
+  "refresh": "awsui_refresh_xjuzf_777hs_614",
+  "root": "awsui_root_xjuzf_777hs_636",
+  "trigger": "awsui_trigger_xjuzf_777hs_648",
+  "trigger-type-text": "awsui_trigger-type-text_xjuzf_777hs_655",
+  "trigger-inner-text": "awsui_trigger-inner-text_xjuzf_777hs_684"
 };
   

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

@@ -182,11 +182,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_arrow_xjuzf_rd87b_185:not(#\9) {
+.awsui_arrow_xjuzf_777hs_185:not(#\9) {
   width: 20px;
   height: 10px;
 }
-.awsui_arrow-outer_xjuzf_rd87b_189:not(#\9), .awsui_arrow-inner_xjuzf_rd87b_189:not(#\9) {
+.awsui_arrow-outer_xjuzf_777hs_189:not(#\9), .awsui_arrow-inner_xjuzf_777hs_189:not(#\9) {
   position: absolute;
   overflow: hidden;
   width: 20px;
@@ -194,7 +194,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   top: 0;
   left: 0;
 }
-.awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after, .awsui_arrow-inner_xjuzf_rd87b_189:not(#\9)::after {
+.awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after, .awsui_arrow-inner_xjuzf_777hs_189:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -207,26 +207,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after {
+.awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after {
   background-color: var(--color-border-popover-jq2u63, #d5dbdb);
 }
-.awsui_arrow-inner_xjuzf_rd87b_189:not(#\9) {
+.awsui_arrow-inner_xjuzf_777hs_189:not(#\9) {
   top: 2px;
 }
-.awsui_arrow-inner_xjuzf_rd87b_189:not(#\9)::after {
+.awsui_arrow-inner_xjuzf_777hs_189:not(#\9)::after {
   border-radius: 1px 0 0 0;
   background-color: var(--color-background-popover-g6qj89, #ffffff);
 }
-.awsui_arrow-position-right-top_xjuzf_rd87b_220 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after, .awsui_arrow-position-right-bottom_xjuzf_rd87b_220 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after {
+.awsui_arrow-position-right-top_xjuzf_777hs_220 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after, .awsui_arrow-position-right-bottom_xjuzf_777hs_220 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_xjuzf_rd87b_223 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after, .awsui_arrow-position-left-bottom_xjuzf_rd87b_223 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after {
+.awsui_arrow-position-left-top_xjuzf_777hs_223 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after, .awsui_arrow-position-left-bottom_xjuzf_777hs_223 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_xjuzf_rd87b_226 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after, .awsui_arrow-position-top-right_xjuzf_rd87b_226 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after, .awsui_arrow-position-top-left_xjuzf_rd87b_226 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after, .awsui_arrow-position-top-responsive_xjuzf_rd87b_226 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after {
+.awsui_arrow-position-top-center_xjuzf_777hs_226 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after, .awsui_arrow-position-top-right_xjuzf_777hs_226 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after, .awsui_arrow-position-top-left_xjuzf_777hs_226 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after, .awsui_arrow-position-top-responsive_xjuzf_777hs_226 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_xjuzf_rd87b_229 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after, .awsui_arrow-position-bottom-right_xjuzf_rd87b_229 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after, .awsui_arrow-position-bottom-left_xjuzf_rd87b_229 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after, .awsui_arrow-position-bottom-responsive_xjuzf_rd87b_229 > .awsui_arrow-outer_xjuzf_rd87b_189:not(#\9)::after {
+.awsui_arrow-position-bottom-center_xjuzf_777hs_229 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after, .awsui_arrow-position-bottom-right_xjuzf_777hs_229 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after, .awsui_arrow-position-bottom-left_xjuzf_777hs_229 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after, .awsui_arrow-position-bottom-responsive_xjuzf_777hs_229 > .awsui_arrow-outer_xjuzf_777hs_189:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-94w2kz, rgba(0, 28, 36, 0.5));
 }
 
@@ -322,7 +322,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_body_xjuzf_rd87b_325:not(#\9) {
+.awsui_body_xjuzf_777hs_325:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -367,57 +367,62 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: var(--shadow-popover-r85x77, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
   border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-popover-jq2u63, #d5dbdb);
 }
-.awsui_body-overflow-visible_xjuzf_rd87b_344:not(#\9) {
+.awsui_body-overflow-visible_xjuzf_777hs_344:not(#\9) {
   overflow: visible;
 }
 
-.awsui_variant-annotation_xjuzf_rd87b_348:not(#\9) {
+.awsui_variant-annotation_xjuzf_777hs_348:not(#\9) {
   background-color: var(--color-background-status-info-yq3r41, #f1faff);
   border-color: var(--color-border-status-info-0iedcr, #0073bb);
 }
 
-.awsui_body-size-small_xjuzf_rd87b_353:not(#\9) {
+.awsui_body-size-small_xjuzf_777hs_353:not(#\9) {
   max-width: 210px;
 }
-.awsui_body-size-small_xjuzf_rd87b_353.awsui_fixed-width_xjuzf_rd87b_356:not(#\9) {
+.awsui_body-size-small_xjuzf_777hs_353.awsui_fixed-width_xjuzf_777hs_356:not(#\9) {
   width: 210px;
 }
 
-.awsui_body-size-medium_xjuzf_rd87b_360:not(#\9) {
+.awsui_body-size-medium_xjuzf_777hs_360:not(#\9) {
   max-width: 310px;
 }
-.awsui_body-size-medium_xjuzf_rd87b_360.awsui_fixed-width_xjuzf_rd87b_356:not(#\9) {
+.awsui_body-size-medium_xjuzf_777hs_360.awsui_fixed-width_xjuzf_777hs_356:not(#\9) {
   width: 310px;
 }
 
-.awsui_body-size-large_xjuzf_rd87b_367:not(#\9) {
+.awsui_body-size-large_xjuzf_777hs_367:not(#\9) {
   max-width: 480px;
 }
-.awsui_body-size-large_xjuzf_rd87b_367.awsui_fixed-width_xjuzf_rd87b_356:not(#\9) {
+@media (max-width: 480px) {
+  .awsui_body-size-large_xjuzf_777hs_367:not(#\9) {
+    max-width: 310px;
+  }
+}
+.awsui_body-size-large_xjuzf_777hs_367.awsui_fixed-width_xjuzf_777hs_356:not(#\9) {
   width: 480px;
 }
 
-.awsui_has-dismiss_xjuzf_rd87b_374:not(#\9) {
+.awsui_has-dismiss_xjuzf_777hs_379:not(#\9) {
   display: flex;
   align-items: baseline;
 }
 
-.awsui_dismiss_xjuzf_rd87b_379:not(#\9) {
+.awsui_dismiss_xjuzf_777hs_384:not(#\9) {
   margin: calc(-1 * (var(--space-scaled-xxs-95dhkm, 4px) + var(--border-field-width-y6x4sn, 1px))) calc(-1 * (var(--space-xxs-ynfts5, 4px) + var(--border-field-width-y6x4sn, 1px)));
   margin-left: 0;
   flex: 0 0 auto;
   order: 1;
 }
 
-.awsui_dismiss-control_xjuzf_rd87b_386:not(#\9) {
+.awsui_dismiss-control_xjuzf_777hs_391:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_header-row_xjuzf_rd87b_390:not(#\9) {
+.awsui_header-row_xjuzf_777hs_395:not(#\9) {
   margin-bottom: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_header_xjuzf_rd87b_390:not(#\9) {
+.awsui_header_xjuzf_777hs_395:not(#\9) {
   word-wrap: break-word;
   max-width: 100%;
   overflow: hidden;
@@ -428,21 +433,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_header_xjuzf_rd87b_390 > h2:not(#\9) {
+.awsui_header_xjuzf_777hs_395 > h2:not(#\9) {
   font-size: var(--font-heading-xs-size-j82aha, 16px);
   line-height: var(--font-heading-xs-line-height-tf278d, 20px);
   font-weight: var(--font-heading-xs-weight-5hfvig, 400);
   display: inline;
 }
 
-.awsui_content_xjuzf_rd87b_412:not(#\9) {
+.awsui_content_xjuzf_777hs_417:not(#\9) {
   word-wrap: break-word;
   max-width: 100%;
   overflow: hidden;
   color: var(--color-text-body-secondary-u912t7, #545b64);
   flex: 1 1 auto;
 }
-.awsui_content-overflow-visible_xjuzf_rd87b_419:not(#\9) {
+.awsui_content-overflow-visible_xjuzf_777hs_424:not(#\9) {
   overflow: visible;
 }
 
@@ -454,7 +459,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_container_xjuzf_rd87b_431:not(#\9) {
+.awsui_container_xjuzf_777hs_436:not(#\9) {
   display: inline-block;
   position: fixed;
   top: -9999px;
@@ -462,59 +467,59 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 2000;
 }
 
-.awsui_container-arrow_xjuzf_rd87b_439:not(#\9) {
+.awsui_container-arrow_xjuzf_777hs_444:not(#\9) {
   position: absolute;
   display: inline-block;
 }
-.awsui_container-arrow-position-right-top_xjuzf_rd87b_443:not(#\9), .awsui_container-arrow-position-right-bottom_xjuzf_rd87b_443:not(#\9) {
+.awsui_container-arrow-position-right-top_xjuzf_777hs_448:not(#\9), .awsui_container-arrow-position-right-bottom_xjuzf_777hs_448:not(#\9) {
   transform: rotate(-90deg);
   transform-origin: 0 100%;
 }
-.awsui_container-arrow-position-right-top_xjuzf_rd87b_443:not(#\9) {
+.awsui_container-arrow-position-right-top_xjuzf_777hs_448:not(#\9) {
   top: calc(12px + 10px);
   left: 0;
 }
-.awsui_container-arrow-position-right-bottom_xjuzf_rd87b_443:not(#\9) {
+.awsui_container-arrow-position-right-bottom_xjuzf_777hs_448:not(#\9) {
   bottom: 12px;
   left: 0;
 }
-.awsui_container-arrow-position-left-top_xjuzf_rd87b_455:not(#\9), .awsui_container-arrow-position-left-bottom_xjuzf_rd87b_455:not(#\9) {
+.awsui_container-arrow-position-left-top_xjuzf_777hs_460:not(#\9), .awsui_container-arrow-position-left-bottom_xjuzf_777hs_460:not(#\9) {
   transform: rotate(90deg);
   transform-origin: 100% 100%;
 }
-.awsui_container-arrow-position-left-top_xjuzf_rd87b_455:not(#\9) {
+.awsui_container-arrow-position-left-top_xjuzf_777hs_460:not(#\9) {
   top: calc(12px + 10px);
   right: 0;
 }
-.awsui_container-arrow-position-left-bottom_xjuzf_rd87b_455:not(#\9) {
+.awsui_container-arrow-position-left-bottom_xjuzf_777hs_460:not(#\9) {
   bottom: 12px;
   right: 0;
 }
-.awsui_container-arrow-position-top-center_xjuzf_rd87b_467:not(#\9), .awsui_container-arrow-position-top-right_xjuzf_rd87b_467:not(#\9), .awsui_container-arrow-position-top-left_xjuzf_rd87b_467:not(#\9), .awsui_container-arrow-position-top-responsive_xjuzf_rd87b_467:not(#\9) {
+.awsui_container-arrow-position-top-center_xjuzf_777hs_472:not(#\9), .awsui_container-arrow-position-top-right_xjuzf_777hs_472:not(#\9), .awsui_container-arrow-position-top-left_xjuzf_777hs_472:not(#\9), .awsui_container-arrow-position-top-responsive_xjuzf_777hs_472:not(#\9) {
   transform: rotate(180deg);
   transform-origin: 50% 50%;
 }
-.awsui_container-arrow-position-top-center_xjuzf_rd87b_467:not(#\9) {
+.awsui_container-arrow-position-top-center_xjuzf_777hs_472:not(#\9) {
   bottom: -10px;
   left: calc(50% - 10px);
 }
-.awsui_container-arrow-position-top-right_xjuzf_rd87b_467:not(#\9) {
+.awsui_container-arrow-position-top-right_xjuzf_777hs_472:not(#\9) {
   bottom: -10px;
   left: 12px;
 }
-.awsui_container-arrow-position-top-left_xjuzf_rd87b_467:not(#\9) {
+.awsui_container-arrow-position-top-left_xjuzf_777hs_472:not(#\9) {
   bottom: -10px;
   left: calc(100% - 20px - 12px);
 }
-.awsui_container-arrow-position-bottom-center_xjuzf_rd87b_483:not(#\9) {
+.awsui_container-arrow-position-bottom-center_xjuzf_777hs_488:not(#\9) {
   top: -10px;
   left: calc(50% - 10px);
 }
-.awsui_container-arrow-position-bottom-right_xjuzf_rd87b_487:not(#\9) {
+.awsui_container-arrow-position-bottom-right_xjuzf_777hs_492:not(#\9) {
   top: -10px;
   left: 12px;
 }
-.awsui_container-arrow-position-bottom-left_xjuzf_rd87b_491:not(#\9) {
+.awsui_container-arrow-position-bottom-left_xjuzf_777hs_496:not(#\9) {
   top: -10px;
   left: calc(100% - 20px - 12px);
 }
@@ -611,10 +616,10 @@ 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_container_xjuzf_rd87b_431:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_xjuzf_rd87b_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
+.awsui_container_xjuzf_777hs_436:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_xjuzf_777hs_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_xjuzf_rd87b_1 {
+@keyframes awsui_awsui-motion-fade-in_xjuzf_777hs_1 {
   from {
     opacity: 0.2;
   }
@@ -623,19 +628,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_container_xjuzf_rd87b_431:not(#\9) {
+  .awsui_container_xjuzf_777hs_436:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_container_xjuzf_rd87b_431:not(#\9), .awsui-mode-entering .awsui_container_xjuzf_rd87b_431:not(#\9) {
+.awsui-motion-disabled .awsui_container_xjuzf_777hs_436:not(#\9), .awsui-mode-entering .awsui_container_xjuzf_777hs_436:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_container_xjuzf_rd87b_431.awsui_refresh_xjuzf_rd87b_609:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_xjuzf_rd87b_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms) var(--motion-easing-refresh-only-a-sy0g8m, cubic-bezier(0, 0, 0, 1));
+.awsui_container_xjuzf_777hs_436.awsui_refresh_xjuzf_777hs_614:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_xjuzf_777hs_1 var(--motion-duration-refresh-only-fast-addxjd, 115ms) var(--motion-easing-refresh-only-a-sy0g8m, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-fade-in_xjuzf_rd87b_1 {
+@keyframes awsui_awsui-motion-fade-in_xjuzf_777hs_1 {
   from {
     opacity: 0.2;
   }
@@ -644,17 +649,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_container_xjuzf_rd87b_431.awsui_refresh_xjuzf_rd87b_609:not(#\9) {
+  .awsui_container_xjuzf_777hs_436.awsui_refresh_xjuzf_777hs_614:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_container_xjuzf_rd87b_431.awsui_refresh_xjuzf_rd87b_609:not(#\9), .awsui-mode-entering .awsui_container_xjuzf_rd87b_431.awsui_refresh_xjuzf_rd87b_609:not(#\9) {
+.awsui-motion-disabled .awsui_container_xjuzf_777hs_436.awsui_refresh_xjuzf_777hs_614:not(#\9), .awsui-mode-entering .awsui_container_xjuzf_777hs_436.awsui_refresh_xjuzf_777hs_614:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_xjuzf_rd87b_631:not(#\9) {
+.awsui_root_xjuzf_777hs_636:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -692,14 +697,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: inherit;
 }
 
-.awsui_trigger_xjuzf_rd87b_643:not(#\9) {
+.awsui_trigger_xjuzf_777hs_648:not(#\9) {
   display: inline-block;
   max-width: 100%;
   color: inherit;
   text-align: inherit;
 }
 
-.awsui_trigger-type-text_xjuzf_rd87b_650:not(#\9) {
+.awsui_trigger-type-text_xjuzf_777hs_655:not(#\9) {
   border: 0;
   margin: 0;
   padding: 0;
@@ -707,17 +712,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   cursor: pointer;
   border-bottom: var(--border-divider-list-width-hacikr, 1px) dashed currentColor;
 }
-.awsui_trigger-type-text_xjuzf_rd87b_650:not(#\9):focus {
+.awsui_trigger-type-text_xjuzf_777hs_655:not(#\9):focus {
   outline: none;
 }
-.awsui_trigger-type-text_xjuzf_rd87b_650[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_trigger-type-text_xjuzf_777hs_655[data-awsui-focus-visible=true]:not(#\9):focus {
   position: relative;
 }
-.awsui_trigger-type-text_xjuzf_rd87b_650[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_trigger-type-text_xjuzf_777hs_655[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(1px - 1px);
 }
-.awsui_trigger-type-text_xjuzf_rd87b_650[data-awsui-focus-visible=true]:not(#\9):focus::before {
+.awsui_trigger-type-text_xjuzf_777hs_655[data-awsui-focus-visible=true]:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -728,6 +733,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-default-focus-ring-hekmgc, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_trigger-type-text_xjuzf_rd87b_650 > .awsui_trigger-inner-text_xjuzf_rd87b_679:not(#\9) {
+.awsui_trigger-type-text_xjuzf_777hs_655 > .awsui_trigger-inner-text_xjuzf_777hs_684:not(#\9) {
   position: relative;
 }