@cloudscape-design/components-themeable 3.0.401 → 3.0.403

package/lib/internal/template/anchor-navigation/styles.scoped.css

@@ -0,0 +1,243 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_swimc_h60aw_93:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: var(--font-size-body-m-pa3mqb, 14px);
+  line-height: var(--line-height-body-m-2zx78l, 22px);
+  color: var(--color-text-body-default-ki9w9u, #16191f);
+  font-weight: 400;
+  font-family: var(--font-family-base-0nmw8v, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+.awsui_anchor-list_swimc_h60aw_106:not(#\9) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  text-indent: 0;
+}
+.awsui_anchor-list_swimc_h60aw_106:not(#\9)::before {
+  content: "";
+  background-color: var(--color-border-divider-default-cr3oi6, #eaeded);
+  border-radius: var(--border-radius-tabs-focus-ring-7k0vsi, 0px);
+  bottom: -2px;
+  pointer-events: none;
+  position: absolute;
+  top: -2px;
+  width: 2px;
+}
+
+.awsui_anchor-item_swimc_h60aw_124:not(#\9) {
+  transition: var(--motion-duration-slow-ncmroz, 180ms);
+  transition-property: all;
+  font-size: var(--font-size-body-m-pa3mqb, 14px);
+  line-height: var(--line-height-body-m-2zx78l, 22px);
+  color: var(--color-text-body-secondary-yttmze, #545b64);
+  font-weight: 400;
+  margin: var(--space-scaled-xxs-t7ij38, 4px) 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_anchor-item_swimc_h60aw_124:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_anchor-item_swimc_h60aw_124:not(#\9), .awsui-mode-entering .awsui_anchor-item_swimc_h60aw_124:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_anchor-item--active_swimc_h60aw_143:not(#\9) {
+  position: relative;
+}
+.awsui_anchor-item--active_swimc_h60aw_143:not(#\9)::before {
+  content: "";
+  background-color: var(--color-text-accent-yy9054, #0073bb);
+  border-radius: var(--border-radius-tabs-focus-ring-7k0vsi, 0px);
+  bottom: -2px;
+  pointer-events: none;
+  position: absolute;
+  top: -2px;
+  width: 2px;
+}
+
+.awsui_anchor-link_swimc_h60aw_157:not(#\9) {
+  transition: var(--motion-duration-slow-ncmroz, 180ms);
+  transition-property: all;
+  font-size: var(--font-size-body-m-pa3mqb, 14px);
+  line-height: var(--line-height-body-m-2zx78l, 22px);
+  align-items: baseline;
+  color: var(--color-text-body-secondary-yttmze, #545b64);
+  display: flex;
+  flex-direction: row;
+  font-weight: 400;
+  text-decoration: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_anchor-link_swimc_h60aw_157:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_anchor-link_swimc_h60aw_157:not(#\9), .awsui-mode-entering .awsui_anchor-link_swimc_h60aw_157:not(#\9) {
+  animation: none;
+  transition: none;
+}
+body[data-awsui-focus-visible=true] .awsui_anchor-link_swimc_h60aw_157:not(#\9):focus {
+  outline: thin dotted;
+  outline: var(--border-link-focus-ring-outline-gygm43, 5px auto Highlight);
+  outline-offset: 2px;
+  outline-color: var(--color-border-item-focused-v8nq2m, #0073bb);
+  border-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
+  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-efbp5h, 0px) var(--color-border-item-focused-v8nq2m, #0073bb);
+}
+.awsui_anchor-link_swimc_h60aw_157:not(#\9):hover {
+  color: var(--color-text-accent-yy9054, #0073bb);
+}
+.awsui_anchor-link_swimc_h60aw_157:not(#\9):focus {
+  outline: none;
+}
+.awsui_anchor-link_swimc_h60aw_157:not(#\9):hover, .awsui_anchor-link_swimc_h60aw_157:not(#\9):focus {
+  text-decoration: none;
+}
+.awsui_anchor-link--active_swimc_h60aw_196:not(#\9) {
+  font-weight: var(--font-wayfinding-link-active-weight-wec2dg, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-8fiijr, auto);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-fw8n0n, auto);
+  color: var(--color-text-accent-yy9054, #0073bb);
+}
+
+.awsui_anchor-link-text_swimc_h60aw_203:not(#\9) {
+  display: block;
+}
+
+.awsui_anchor-link-info_swimc_h60aw_207:not(#\9) {
+  margin-left: var(--space-xs-xf5ch3, 8px);
+  font-size: var(--font-size-body-s-533prh, 12px);
+  line-height: var(--line-height-body-s-n0pazd, 16px);
+  letter-spacing: var(--letter-spacing-body-s-nkvets, normal);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-8fiijr, auto);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-fw8n0n, auto);
+  font-weight: var(--font-button-weight-s67y37, 700);
+  letter-spacing: 0.005em;
+  color: var(--color-text-link-default-hop3gv, #0073bb);
+}

package/lib/internal/template/anchor-navigation/styles.selectors.js

@@ -0,0 +1,14 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_swimc_h60aw_93",
+  "anchor-list": "awsui_anchor-list_swimc_h60aw_106",
+  "anchor-item": "awsui_anchor-item_swimc_h60aw_124",
+  "anchor-item--active": "awsui_anchor-item--active_swimc_h60aw_143",
+  "anchor-link": "awsui_anchor-link_swimc_h60aw_157",
+  "anchor-link--active": "awsui_anchor-link--active_swimc_h60aw_196",
+  "anchor-link-text": "awsui_anchor-link-text_swimc_h60aw_203",
+  "anchor-link-info": "awsui_anchor-link-info_swimc_h60aw_207"
+};
+  

package/lib/internal/template/anchor-navigation/test-classes/styles.css.js

@@ -0,0 +1,11 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_17oho_5eh15_5",
+  "anchor-list": "awsui_anchor-list_17oho_5eh15_9",
+  "anchor-item--active": "awsui_anchor-item--active_17oho_5eh15_13",
+  "anchor-link": "awsui_anchor-link_17oho_5eh15_17",
+  "anchor-link-text": "awsui_anchor-link-text_17oho_5eh15_21",
+  "anchor-link-info": "awsui_anchor-link-info_17oho_5eh15_25"
+};
+  

package/lib/internal/template/anchor-navigation/test-classes/styles.scoped.css

@@ -0,0 +1,27 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_17oho_5eh15_5:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_anchor-list_17oho_5eh15_9:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_anchor-item--active_17oho_5eh15_13:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_anchor-link_17oho_5eh15_17:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_anchor-link-text_17oho_5eh15_21:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_anchor-link-info_17oho_5eh15_25:not(#\9) {
+  /* used in test-utils */
+}

package/lib/internal/template/anchor-navigation/test-classes/styles.selectors.js

@@ -0,0 +1,12 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_17oho_5eh15_5",
+  "anchor-list": "awsui_anchor-list_17oho_5eh15_9",
+  "anchor-item--active": "awsui_anchor-item--active_17oho_5eh15_13",
+  "anchor-link": "awsui_anchor-link_17oho_5eh15_17",
+  "anchor-link-text": "awsui_anchor-link-text_17oho_5eh15_21",
+  "anchor-link-info": "awsui_anchor-link-info_17oho_5eh15_25"
+};
+  

package/lib/internal/template/anchor-navigation/use-scroll-spy.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Hook to implement scroll-spy functionality.
+ *
+ * @param hrefs An array of href strings that correspond to the IDs of the target elements on the page.
+ * The hrefs should be sorted in the order they appear on the page for accurate scroll-spy behavior.
+ * @param scrollSpyOffset The number of pixels to offset from the top of the document when activating anchors.
+ * Useful for accommodating fixed or sticky headers.
+ * @param activeHref The currently active href. If provided, the hook will operate in a controlled manner,
+ * and the scroll-spy logic will be disabled.
+ *
+ * @returns {string | undefined} - The href of the currently active element as per scroll position, or undefined if none is active.
+ */
+export default function useScrollSpy({ hrefs, scrollSpyOffset, activeHref, }: {
+    hrefs: string[];
+    scrollSpyOffset: number;
+    activeHref?: string;
+}): string | undefined;
+//# sourceMappingURL=use-scroll-spy.d.ts.map

package/lib/internal/template/anchor-navigation/use-scroll-spy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll-spy.d.ts","sourceRoot":"lib/default/","sources":["anchor-navigation/use-scroll-spy.tsx"],"names":[],"mappings":"AAMA;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAK,EACL,eAAe,EACf,UAAU,GACX,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,MAAM,GAAG,SAAS,CAgErB"}

package/lib/internal/template/anchor-navigation/use-scroll-spy.js

@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useEffect, useState } from 'react';
+const isBrowser = typeof window !== 'undefined';
+/**
+ * Hook to implement scroll-spy functionality.
+ *
+ * @param hrefs An array of href strings that correspond to the IDs of the target elements on the page.
+ * The hrefs should be sorted in the order they appear on the page for accurate scroll-spy behavior.
+ * @param scrollSpyOffset The number of pixels to offset from the top of the document when activating anchors.
+ * Useful for accommodating fixed or sticky headers.
+ * @param activeHref The currently active href. If provided, the hook will operate in a controlled manner,
+ * and the scroll-spy logic will be disabled.
+ *
+ * @returns {string | undefined} - The href of the currently active element as per scroll position, or undefined if none is active.
+ */
+export default function useScrollSpy({ hrefs, scrollSpyOffset, activeHref, }) {
+    const [currentHref, setCurrentHref] = useState(activeHref);
+    const [lastAnchorExists, setLastAnchorExists] = useState(false);
+    useEffect(() => {
+        setCurrentHref(activeHref);
+    }, [activeHref]);
+    useEffect(() => {
+        var _a;
+        setLastAnchorExists(isBrowser && !!document.getElementById((_a = hrefs[hrefs.length - 1]) === null || _a === void 0 ? void 0 : _a.slice(1)));
+    }, [hrefs]);
+    // Get the bounding rectangle of an element by href
+    const getRectByHref = useCallback(href => {
+        var _a;
+        return (_a = document.getElementById(href.slice(1))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    }, []);
+    // Check if we're scrolled to the bottom of the page
+    const isPageBottom = useCallback(() => {
+        return lastAnchorExists && Math.ceil(window.scrollY) >= Math.floor(document.body.scrollHeight - window.innerHeight);
+    }, [lastAnchorExists]);
+    // Find the first href for which the element is within the viewport
+    const findHrefInView = useCallback(() => {
+        return hrefs.find(href => {
+            const rect = getRectByHref(href);
+            return rect && rect.bottom <= window.innerHeight && rect.top >= scrollSpyOffset;
+        });
+    }, [getRectByHref, scrollSpyOffset, hrefs]);
+    // Find the last href where its element is above or within the viewport
+    const findLastHrefInView = useCallback(() => {
+        return [...hrefs].reverse().find(href => {
+            const rect = getRectByHref(href);
+            return rect && rect.bottom <= window.innerHeight;
+        });
+    }, [getRectByHref, hrefs]);
+    // Scroll event handler
+    const handleScroll = useCallback(() => {
+        if (activeHref || !isBrowser) {
+            return;
+        }
+        const { scrollY } = window;
+        if (document.body.scrollHeight > window.innerHeight && isPageBottom()) {
+            setCurrentHref(hrefs[hrefs.length - 1]);
+        }
+        else {
+            setCurrentHref(findHrefInView() || (scrollY > 0 ? findLastHrefInView() : undefined));
+        }
+    }, [activeHref, isPageBottom, findHrefInView, findLastHrefInView, hrefs]);
+    useEffect(() => {
+        if (isBrowser) {
+            handleScroll();
+            window.addEventListener('scroll', handleScroll, { passive: true });
+            return () => {
+                window.removeEventListener('scroll', handleScroll);
+            };
+        }
+    }, [handleScroll]);
+    return currentHref;
+}
+//# sourceMappingURL=use-scroll-spy.js.map

package/lib/internal/template/anchor-navigation/use-scroll-spy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll-spy.js","sourceRoot":"lib/default/","sources":["anchor-navigation/use-scroll-spy.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 { useCallback, useEffect, useState } from 'react';\n\nconst isBrowser = typeof window !== 'undefined';\n\n/**\n * Hook to implement scroll-spy functionality.\n *\n * @param hrefs An array of href strings that correspond to the IDs of the target elements on the page.\n * The hrefs should be sorted in the order they appear on the page for accurate scroll-spy behavior.\n * @param scrollSpyOffset The number of pixels to offset from the top of the document when activating anchors.\n * Useful for accommodating fixed or sticky headers.\n * @param activeHref The currently active href. If provided, the hook will operate in a controlled manner,\n * and the scroll-spy logic will be disabled.\n *\n * @returns {string | undefined} - The href of the currently active element as per scroll position, or undefined if none is active.\n */\nexport default function useScrollSpy({\n  hrefs,\n  scrollSpyOffset,\n  activeHref,\n}: {\n  hrefs: string[];\n  scrollSpyOffset: number;\n  activeHref?: string;\n}): string | undefined {\n  const [currentHref, setCurrentHref] = useState<string | undefined>(activeHref);\n  const [lastAnchorExists, setLastAnchorExists] = useState(false);\n\n  useEffect(() => {\n    setCurrentHref(activeHref);\n  }, [activeHref]);\n\n  useEffect(() => {\n    setLastAnchorExists(isBrowser && !!document.getElementById(hrefs[hrefs.length - 1]?.slice(1)));\n  }, [hrefs]);\n\n  // Get the bounding rectangle of an element by href\n  const getRectByHref = useCallback(href => {\n    return document.getElementById(href.slice(1))?.getBoundingClientRect();\n  }, []);\n\n  // Check if we're scrolled to the bottom of the page\n  const isPageBottom = useCallback(() => {\n    return lastAnchorExists && Math.ceil(window.scrollY) >= Math.floor(document.body.scrollHeight - window.innerHeight);\n  }, [lastAnchorExists]);\n\n  // Find the first href for which the element is within the viewport\n  const findHrefInView = useCallback(() => {\n    return hrefs.find(href => {\n      const rect = getRectByHref(href);\n      return rect && rect.bottom <= window.innerHeight && rect.top >= scrollSpyOffset;\n    });\n  }, [getRectByHref, scrollSpyOffset, hrefs]);\n\n  // Find the last href where its element is above or within the viewport\n  const findLastHrefInView = useCallback(() => {\n    return [...hrefs].reverse().find(href => {\n      const rect = getRectByHref(href);\n      return rect && rect.bottom <= window.innerHeight;\n    });\n  }, [getRectByHref, hrefs]);\n\n  // Scroll event handler\n  const handleScroll = useCallback(() => {\n    if (activeHref || !isBrowser) {\n      return;\n    }\n\n    const { scrollY } = window;\n\n    if (document.body.scrollHeight > window.innerHeight && isPageBottom()) {\n      setCurrentHref(hrefs[hrefs.length - 1]);\n    } else {\n      setCurrentHref(findHrefInView() || (scrollY > 0 ? findLastHrefInView() : undefined));\n    }\n  }, [activeHref, isPageBottom, findHrefInView, findLastHrefInView, hrefs]);\n\n  useEffect(() => {\n    if (isBrowser) {\n      handleScroll();\n      window.addEventListener('scroll', handleScroll, { passive: true });\n      return () => {\n        window.removeEventListener('scroll', handleScroll);\n      };\n    }\n  }, [handleScroll]);\n\n  return currentHref;\n}\n"]}

package/lib/internal/template/annotation-context/annotation/styles.css.js

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "arrow": "awsui_arrow_1hpp3_qo5qq_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_qo5qq_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_qo5qq_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_qo5qq_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_qo5qq_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_qo5qq_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_qo5qq_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_qo5qq_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_qo5qq_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_qo5qq_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_qo5qq_137",
-  "annotation": "awsui_annotation_1hpp3_qo5qq_145",
-  "next-button": "awsui_next-button_1hpp3_qo5qq_146",
-  "previous-button": "awsui_previous-button_1hpp3_qo5qq_147",
-  "finish-button": "awsui_finish-button_1hpp3_qo5qq_148",
-  "header": "awsui_header_1hpp3_qo5qq_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_qo5qq_150",
-  "content": "awsui_content_1hpp3_qo5qq_151",
-  "description": "awsui_description_1hpp3_qo5qq_155",
-  "actionBar": "awsui_actionBar_1hpp3_qo5qq_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_qo5qq_167",
-  "divider": "awsui_divider_1hpp3_qo5qq_171",
-  "hotspot": "awsui_hotspot_1hpp3_qo5qq_175",
-  "icon": "awsui_icon_1hpp3_qo5qq_215"
+  "arrow": "awsui_arrow_1hpp3_rugxw_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_rugxw_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_rugxw_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_rugxw_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_rugxw_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_rugxw_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_rugxw_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_rugxw_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_rugxw_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_rugxw_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_rugxw_137",
+  "annotation": "awsui_annotation_1hpp3_rugxw_145",
+  "next-button": "awsui_next-button_1hpp3_rugxw_146",
+  "previous-button": "awsui_previous-button_1hpp3_rugxw_147",
+  "finish-button": "awsui_finish-button_1hpp3_rugxw_148",
+  "header": "awsui_header_1hpp3_rugxw_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_rugxw_150",
+  "content": "awsui_content_1hpp3_rugxw_151",
+  "description": "awsui_description_1hpp3_rugxw_155",
+  "actionBar": "awsui_actionBar_1hpp3_rugxw_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_rugxw_167",
+  "divider": "awsui_divider_1hpp3_rugxw_171",
+  "hotspot": "awsui_hotspot_1hpp3_rugxw_175",
+  "icon": "awsui_icon_1hpp3_rugxw_215"
 };
   

package/lib/internal/template/annotation-context/annotation/styles.scoped.css

@@ -90,11 +90,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_1hpp3_qo5qq_93:not(#\9) {
+.awsui_arrow_1hpp3_rugxw_93:not(#\9) {
   width: 20px;
   height: 10px;
 }
-.awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9), .awsui_arrow-inner_1hpp3_qo5qq_97:not(#\9) {
+.awsui_arrow-outer_1hpp3_rugxw_97:not(#\9), .awsui_arrow-inner_1hpp3_rugxw_97:not(#\9) {
   position: absolute;
   overflow: hidden;
   width: 20px;
@@ -102,7 +102,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   top: 0;
   left: 0;
 }
-.awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_qo5qq_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_rugxw_97:not(#\9)::after, .awsui_arrow-inner_1hpp3_rugxw_97:not(#\9)::after {
   content: "";
   box-sizing: border-box;
   display: inline-block;
@@ -115,26 +115,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transform: rotate(45deg);
   transform-origin: 0 100%;
 }
-.awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9)::after {
+.awsui_arrow-outer_1hpp3_rugxw_97:not(#\9)::after {
   background-color: var(--color-border-status-info-q9np44, #0073bb);
 }
-.awsui_arrow-inner_1hpp3_qo5qq_97:not(#\9) {
+.awsui_arrow-inner_1hpp3_rugxw_97:not(#\9) {
   top: 2px;
 }
-.awsui_arrow-inner_1hpp3_qo5qq_97:not(#\9)::after {
+.awsui_arrow-inner_1hpp3_rugxw_97:not(#\9)::after {
   border-radius: 1px 0 0 0;
   background-color: var(--color-background-status-info-pgxhez, #f1faff);
 }
-.awsui_arrow-position-right-top_1hpp3_qo5qq_128 > .awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_qo5qq_128 > .awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9)::after {
+.awsui_arrow-position-right-top_1hpp3_rugxw_128 > .awsui_arrow-outer_1hpp3_rugxw_97:not(#\9)::after, .awsui_arrow-position-right-bottom_1hpp3_rugxw_128 > .awsui_arrow-outer_1hpp3_rugxw_97:not(#\9)::after {
   box-shadow: -0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-left-top_1hpp3_qo5qq_131 > .awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_qo5qq_131 > .awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9)::after {
+.awsui_arrow-position-left-top_1hpp3_rugxw_131 > .awsui_arrow-outer_1hpp3_rugxw_97:not(#\9)::after, .awsui_arrow-position-left-bottom_1hpp3_rugxw_131 > .awsui_arrow-outer_1hpp3_rugxw_97:not(#\9)::after {
   box-shadow: 0.71px -0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-top-center_1hpp3_qo5qq_134 > .awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_qo5qq_134 > .awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9)::after {
+.awsui_arrow-position-top-center_1hpp3_rugxw_134 > .awsui_arrow-outer_1hpp3_rugxw_97:not(#\9)::after, .awsui_arrow-position-top-responsive_1hpp3_rugxw_134 > .awsui_arrow-outer_1hpp3_rugxw_97:not(#\9)::after {
   box-shadow: -0.71px -0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
-.awsui_arrow-position-bottom-center_1hpp3_qo5qq_137 > .awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_qo5qq_137 > .awsui_arrow-outer_1hpp3_qo5qq_97:not(#\9)::after {
+.awsui_arrow-position-bottom-center_1hpp3_rugxw_137 > .awsui_arrow-outer_1hpp3_rugxw_97:not(#\9)::after, .awsui_arrow-position-bottom-responsive_1hpp3_rugxw_137 > .awsui_arrow-outer_1hpp3_rugxw_97:not(#\9)::after {
   box-shadow: 0.71px 0.71px 4px -2px var(--color-shadow-default-9hs6xx, rgba(0, 28, 36, 0.5));
 }
 
@@ -142,37 +142,37 @@ 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_annotation_1hpp3_qo5qq_145:not(#\9),
-.awsui_next-button_1hpp3_qo5qq_146:not(#\9),
-.awsui_previous-button_1hpp3_qo5qq_147:not(#\9),
-.awsui_finish-button_1hpp3_qo5qq_148:not(#\9),
-.awsui_header_1hpp3_qo5qq_149:not(#\9),
-.awsui_step-counter-content_1hpp3_qo5qq_150:not(#\9),
-.awsui_content_1hpp3_qo5qq_151:not(#\9) {
+.awsui_annotation_1hpp3_rugxw_145:not(#\9),
+.awsui_next-button_1hpp3_rugxw_146:not(#\9),
+.awsui_previous-button_1hpp3_rugxw_147:not(#\9),
+.awsui_finish-button_1hpp3_rugxw_148:not(#\9),
+.awsui_header_1hpp3_rugxw_149:not(#\9),
+.awsui_step-counter-content_1hpp3_rugxw_150:not(#\9),
+.awsui_content_1hpp3_rugxw_151:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_description_1hpp3_qo5qq_155:not(#\9) {
+.awsui_description_1hpp3_rugxw_155:not(#\9) {
   overflow: hidden;
   margin-top: var(--space-xxs-9rrxti, 4px);
 }
 
-.awsui_actionBar_1hpp3_qo5qq_160:not(#\9) {
+.awsui_actionBar_1hpp3_rugxw_160:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }
 
-.awsui_stepCounter_1hpp3_qo5qq_167:not(#\9) {
+.awsui_stepCounter_1hpp3_rugxw_167:not(#\9) {
   margin-right: 20px;
 }
 
-.awsui_divider_1hpp3_qo5qq_171:not(#\9) {
+.awsui_divider_1hpp3_rugxw_171:not(#\9) {
   border-bottom: var(--border-divider-section-width-4ozgf3, 1px) solid var(--color-border-divider-default-cr3oi6, #eaeded);
 }
 
-.awsui_hotspot_1hpp3_qo5qq_175:not(#\9) {
+.awsui_hotspot_1hpp3_rugxw_175:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -213,21 +213,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border: none;
   padding: 0;
   cursor: pointer;
-  scroll-margin: var(--awsui-content-scroll-margin-zw2xxa, 40px 0 0 0);
+  scroll-margin: var(--awsui-content-scroll-margin-y98gph, 40px 0 0 0);
   width: 16px;
   height: 16px;
 }
-.awsui_hotspot_1hpp3_qo5qq_175:not(#\9):focus {
+.awsui_hotspot_1hpp3_rugxw_175:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_qo5qq_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_rugxw_175:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_qo5qq_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_rugxw_175:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_qo5qq_175:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_rugxw_175:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -238,13 +238,13 @@ body[data-awsui-focus-visible=true] .awsui_hotspot_1hpp3_qo5qq_175:not(#\9):focu
   border-radius: var(--border-radius-control-circular-focus-ring-mxepal, 50%);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_hotspot_1hpp3_qo5qq_175 > .awsui_icon_1hpp3_qo5qq_215:not(#\9) {
+.awsui_hotspot_1hpp3_rugxw_175 > .awsui_icon_1hpp3_rugxw_215:not(#\9) {
   position: relative;
   stroke: var(--color-text-link-default-hop3gv, #0073bb);
 }
-.awsui_hotspot_1hpp3_qo5qq_175:not(#\9):hover > .awsui_icon_1hpp3_qo5qq_215 {
+.awsui_hotspot_1hpp3_rugxw_175:not(#\9):hover > .awsui_icon_1hpp3_rugxw_215 {
   stroke: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_hotspot_1hpp3_qo5qq_175:not(#\9):active > .awsui_icon_1hpp3_qo5qq_215 {
+.awsui_hotspot_1hpp3_rugxw_175:not(#\9):active > .awsui_icon_1hpp3_rugxw_215 {
   stroke: var(--color-text-link-default-hop3gv, #0073bb);
 }