From 67ec848590f7d693f3986af888407ffd3eb8f7b9 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Tue, 23 Jun 2026 16:19:39 +0200
Subject: [PATCH 01/19] chore: Explore new box component variant for visual
 accent

---
 src/box/interfaces.ts  |  13 +++++-
 src/box/internal.tsx   |   6 +++
 src/box/style-box.scss | 102 +++++++++++++++++++++++++++++++++++++++++
 src/box/styles.scss    |   1 +
 4 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 src/box/style-box.scss

diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts
index a6acb96ee9..71531f2bee 100644
--- a/src/box/interfaces.ts
+++ b/src/box/interfaces.ts
@@ -19,10 +19,18 @@ export interface BoxProps extends BaseComponentProps {
    *   styled using "Display large light" typography.
    * - If you set it to `awsui-inline-code`, the component will render a `code` element,
    *   styled with a background and padding for inline code snippets.
+   * - If you set it to `awsui-accent`, the component will render a `span`,
+   *   styled as a visual accent container with background and content color combinations.
+   *   Use with the `accentColor` prop to select a color variant.
    *
    * Override the HTML tag by using property `tagOverride`.
    */
   variant?: BoxProps.Variant;
+  /**
+   * Defines the accent color for the `awsui-style-box` variant.
+   * Only applies when `variant` is set to `awsui-style-box`.
+   */
+  accentColor?: BoxProps.AccentColor;
   /**
    * Overrides the default HTML tag provided by the variant.
    */
@@ -154,7 +162,10 @@ export namespace BoxProps {
     | 'awsui-key-label'
     | 'awsui-gen-ai-label'
     | 'awsui-value-large'
-    | 'awsui-inline-code';
+    | 'awsui-inline-code'
+    | 'awsui-accent';
+
+  export type AccentColor = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'mint' | 'lime' | 'grey';
 
   export type Display = 'block' | 'inline' | 'inline-block' | 'none';
   export type TextAlign = 'left' | 'center' | 'right';
diff --git a/src/box/internal.tsx b/src/box/internal.tsx
index b8391b6eb3..dd1578d217 100644
--- a/src/box/internal.tsx
+++ b/src/box/internal.tsx
@@ -23,6 +23,7 @@ export default function InternalBox({
   fontSize,
   fontWeight,
   color,
+  accentColor,
   children,
   nativeAttributes,
   __internalRootRef,
@@ -37,6 +38,7 @@ export default function InternalBox({
     styles.root,
     styles.box,
     styles[`${variant.replace(/^awsui-/, '')}-variant`],
+    accentColor && styles[`accent-${accentColor}`],
     marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]),
     paddingsClassNamesSuffices.map(suffix => styles[`p-${suffix}`]),
     styles[`d-${display}`],
@@ -90,5 +92,9 @@ const getTag = (variant: BoxProps.Variant, tagOverride: BoxProps['tagOverride'])
     return 'code';
   }
 
+  if (variant === 'awsui-accent') {
+    return 'span';
+  }
+
   return variant;
 };
diff --git a/src/box/style-box.scss b/src/box/style-box.scss
new file mode 100644
index 0000000000..2350a8d66e
--- /dev/null
+++ b/src/box/style-box.scss
@@ -0,0 +1,102 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/utils/theming' as theming;
+
+// ─── Base accent variant ─────────────────────────────────────────────────────
+.accent-variant {
+  display: inline-flex;
+  padding-block: awsui.$space-xxs;
+  padding-inline: awsui.$space-xs;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
+  border-end-start-radius: 2px;
+  border-end-end-radius: 2px;
+  color: inherit;
+}
+
+// ─── Accent colors ──────────────────────────────────────────────────────────────
+
+.accent-red {
+  background-color: #fff5f5;
+  color: #db0000;
+  @include theming.dark-mode-only {
+    background-color: rgba(82, 0, 0, 0.8);
+    color: #ff7a7a;
+  }
+}
+
+.accent-yellow {
+  background-color: #fffef0;
+  color: #f2b100;
+  @include theming.dark-mode-only {
+    background-color: rgba(87, 58, 0, 0.8);
+    color: #ffe347;
+  }
+}
+
+.accent-indigo {
+  background-color: #f5f7ff;
+  color: #295eff;
+  @include theming.dark-mode-only {
+    background-color: rgba(0, 20, 117, 0.8);
+    color: #7598ff;
+  }
+}
+
+.accent-green {
+  background-color: #effff1;
+  color: #00802f;
+  @include theming.dark-mode-only {
+    background-color: rgba(0, 51, 17, 0.8);
+    color: #00e500;
+  }
+}
+
+.accent-orange {
+  background-color: #fff7f5;
+  color: #db3300;
+  @include theming.dark-mode-only {
+    background-color: rgba(71, 17, 0, 0.8);
+    color: #ff6a3d;
+  }
+}
+
+.accent-purple {
+  background-color: #faf5ff;
+  color: #962eff;
+  @include theming.dark-mode-only {
+    background-color: rgba(48, 0, 97, 0.8);
+    color: #bf80ff;
+  }
+}
+
+.accent-mint {
+  background-color: #ebfff6;
+  color: #008559;
+  @include theming.dark-mode-only {
+    background-color: rgba(0, 51, 34, 0.8);
+    color: #00e582;
+  }
+}
+
+.accent-lime {
+  background-color: #f7ffeb;
+  color: #008a00;
+  @include theming.dark-mode-only {
+    background-color: rgba(0, 46, 0, 0.8);
+    color: #7ae500;
+  }
+}
+
+.accent-grey {
+  background-color: #fcfcfc;
+  color: #6b6b6b;
+  @include theming.dark-mode-only {
+    background-color: rgba(21, 21, 21, 0.8);
+    color: #b7b7b7;
+  }
+}
diff --git a/src/box/styles.scss b/src/box/styles.scss
index 02596c3049..9beaa46c4a 100644
--- a/src/box/styles.scss
+++ b/src/box/styles.scss
@@ -6,6 +6,7 @@
 @use '../internal/styles' as styles;
 @use './text';
 @use './layout';
+@use './style-box';
 
 .root {
   @include styles.default-text-style;

From 95d865e3d5e26ab66b4ede28682f5bb0526e8172 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 24 Jun 2026 12:47:24 +0200
Subject: [PATCH 02/19] chore: Update example page

---
 pages/box/style-box.page.tsx | 191 +++++++++++++++++++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 pages/box/style-box.page.tsx

diff --git a/pages/box/style-box.page.tsx b/pages/box/style-box.page.tsx
new file mode 100644
index 0000000000..613ce1b2bd
--- /dev/null
+++ b/pages/box/style-box.page.tsx
@@ -0,0 +1,191 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box, { BoxProps } from '~components/box';
+import ButtonDropdown from '~components/button-dropdown';
+import CopyToClipboard from '~components/copy-to-clipboard';
+import Icon from '~components/icon';
+import KeyValuePairs from '~components/key-value-pairs';
+import Link from '~components/link';
+import List from '~components/list';
+import ProgressBar from '~components/progress-bar';
+import SpaceBetween from '~components/space-between';
+import StatusIndicator from '~components/status-indicator';
+
+// ─── Data ──────────────────────────────────────────────────────────────────────
+
+const ALL_VARIANTS: BoxProps.AccentColor[] = [
+  'red',
+  'yellow',
+  'indigo',
+  'green',
+  'orange',
+  'purple',
+  'mint',
+  'lime',
+  'grey',
+];
+
+const BOX_VARIANTS: { variant: BoxProps['variant']; label: string; content: string }[] = [
+  { variant: 'h3', label: 'h3', content: 'Heading 3' },
+  { variant: 'h4', label: 'h4', content: 'Heading 4' },
+  { variant: 'p', label: 'p', content: 'Body paragraph text' },
+];
+
+const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.AccentColor }[] = [
+  { id: 'health', content: 'Health overview', icon: 'face-happy', color: 'green' },
+  { id: 'functions', content: 'Functions', icon: 'script', color: 'indigo' },
+  { id: 'network', content: 'Network configuration', icon: 'globe', color: 'grey' },
+  { id: 'multi-session', content: 'Multi-session data', icon: 'multiscreen', color: 'purple' },
+  { id: 'alert', content: 'Alert center', icon: 'security', color: 'red' },
+  { id: 'communication', content: 'Communication', icon: 'contact', color: 'mint' },
+];
+
+// ─── Page ──────────────────────────────────────────────────────────────────────
+
+export default function StyleBoxPage() {
+  return (
+    <article>
+      <Box variant="h1" padding={{ bottom: 'l' }}>
+        Box variant=&quot;awsui-accent&quot; — Direction 4
+      </Box>
+
+      <Box variant="p" color="text-body-secondary" padding={{ bottom: 'xl' }}>
+        Uses the existing Box component with a new <code>awsui-accent</code> variant and <code>accentColor</code> prop.
+        No wrapper component or utility classes needed.
+      </Box>
+
+      {/* ── Box text variants × accent colors ─────────────────────────── */}
+      <Box variant="h2" padding={{ top: 'l', bottom: 'm' }}>
+        Text inside accent boxes
+      </Box>
+
+      {BOX_VARIANTS.map(({ variant, label, content }) => (
+        <section key={label}>
+          <Box variant="h3" padding={{ top: 'l', bottom: 's' }}>
+            Wrapping Box variant=&quot;{label}&quot;
+          </Box>
+          <SpaceBetween size="m" direction="horizontal">
+            {ALL_VARIANTS.map(color => (
+              <Box key={color} variant="awsui-accent" accentColor={color}>
+                <Box variant={variant}>{content}</Box>
+              </Box>
+            ))}
+          </SpaceBetween>
+        </section>
+      ))}
+
+      {/* ── Icons in accent boxes ─────────────────────────────────────── */}
+      <Box variant="h2" padding={{ top: 'xxxl', bottom: 'm' }}>
+        Icons in accent boxes
+      </Box>
+      <SpaceBetween size="m" direction="horizontal">
+        {ALL_VARIANTS.map(color => (
+          <Box key={color} variant="awsui-accent" accentColor={color}>
+            <Icon name="check" size="medium" variant="subtle" />
+          </Box>
+        ))}
+      </SpaceBetween>
+
+      {/* ── Application in components ──────────────────────────────────── */}
+      <Box variant="h2" padding={{ top: 'xxxl', bottom: 'm' }}>
+        Application in components
+      </Box>
+
+      <Box variant="h3" padding={{ bottom: 's' }}>
+        KeyValuePairs
+      </Box>
+      <KeyValuePairs
+        columns={3}
+        items={[
+          {
+            label: 'Distribution ID',
+            value: (
+              <Box variant="awsui-accent" accentColor="indigo">
+                <Box variant="p">E1WG1ZNPRXT0D4</Box>
+              </Box>
+            ),
+            info: (
+              <Link variant="info" href="#">
+                Info
+              </Link>
+            ),
+          },
+          {
+            label: 'ARN',
+            value: (
+              <CopyToClipboard
+                copyButtonAriaLabel="Copy ARN"
+                copyErrorText="ARN failed to copy"
+                copySuccessText="ARN copied"
+                textToCopy="arn:service23G24::111122223333:distribution/23E1WG1ZNPRXT0D4"
+                variant="inline"
+              />
+            ),
+          },
+          {
+            label: 'Status',
+            value: <StatusIndicator>Available</StatusIndicator>,
+          },
+          {
+            label: 'SSL Certificate',
+            id: 'ssl-certificate-id',
+            value: (
+              <ProgressBar
+                value={30}
+                additionalInfo="Additional information"
+                description="Progress bar description"
+                ariaLabelledby="ssl-certificate-id"
+              />
+            ),
+          },
+          {
+            label: 'Price class',
+            value: (
+              <Box variant="awsui-accent" accentColor="green">
+                <Box variant="p">Use only US, Canada, Europe</Box>
+              </Box>
+            ),
+          },
+          {
+            label: 'CNAMEs',
+            value: (
+              <Link external={true} href="#">
+                abc.service23G24.xyz
+              </Link>
+            ),
+          },
+        ]}
+      />
+
+      <Box variant="h3" padding={{ top: 'xl', bottom: 's' }}>
+        List
+      </Box>
+      <List
+        ariaLabel="List with accent icon badges"
+        items={LIST_ITEMS}
+        renderItem={item => ({
+          id: item.id,
+          content: item.content,
+          icon: (
+            <Box variant="awsui-accent" accentColor={item.color} color="inherit">
+              <Icon name={item.icon as any} size="medium" />
+            </Box>
+          ),
+          actions: (
+            <ButtonDropdown
+              items={[
+                { id: '1', text: 'Action one' },
+                { id: '2', text: 'Action two' },
+                { id: '3', text: 'Action three' },
+              ]}
+              variant="icon"
+              ariaLabel={`Actions for ${item.content}`}
+            />
+          ),
+        })}
+      />
+    </article>
+  );
+}

From 8811a0369a1908210b08057753cc0ea4ca1d3090 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 29 Jun 2026 23:25:25 +0200
Subject: [PATCH 03/19] chore: Tokenize accent colors

---
 src/box/style-box.scss                        | 75 +++++-----------
 style-dictionary/utils/token-names.ts         | 18 ++++
 .../visual-refresh/color-palette.ts           | 30 +++++++
 style-dictionary/visual-refresh/colors.ts     | 28 ++++++
 .../visual-refresh/metadata/colors.ts         | 90 +++++++++++++++++++
 5 files changed, 186 insertions(+), 55 deletions(-)

diff --git a/src/box/style-box.scss b/src/box/style-box.scss
index 2350a8d66e..0f38203c1f 100644
--- a/src/box/style-box.scss
+++ b/src/box/style-box.scss
@@ -4,7 +4,6 @@
 */
 
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/styles/utils/theming' as theming;
 
 // ─── Base accent variant ─────────────────────────────────────────────────────
 .accent-variant {
@@ -19,84 +18,50 @@
 }
 
 // ─── Accent colors ──────────────────────────────────────────────────────────────
+// Light/dark values are resolved by the design tokens, so no explicit dark-mode
+// overrides are needed here.
 
 .accent-red {
-  background-color: #fff5f5;
-  color: #db0000;
-  @include theming.dark-mode-only {
-    background-color: rgba(82, 0, 0, 0.8);
-    color: #ff7a7a;
-  }
+  background-color: awsui.$color-background-accent-red;
+  color: awsui.$color-text-accent-red;
 }
 
 .accent-yellow {
-  background-color: #fffef0;
-  color: #f2b100;
-  @include theming.dark-mode-only {
-    background-color: rgba(87, 58, 0, 0.8);
-    color: #ffe347;
-  }
+  background-color: awsui.$color-background-accent-yellow;
+  color: awsui.$color-text-accent-yellow;
 }
 
 .accent-indigo {
-  background-color: #f5f7ff;
-  color: #295eff;
-  @include theming.dark-mode-only {
-    background-color: rgba(0, 20, 117, 0.8);
-    color: #7598ff;
-  }
+  background-color: awsui.$color-background-accent-indigo;
+  color: awsui.$color-text-accent-indigo;
 }
 
 .accent-green {
-  background-color: #effff1;
-  color: #00802f;
-  @include theming.dark-mode-only {
-    background-color: rgba(0, 51, 17, 0.8);
-    color: #00e500;
-  }
+  background-color: awsui.$color-background-accent-green;
+  color: awsui.$color-text-accent-green;
 }
 
 .accent-orange {
-  background-color: #fff7f5;
-  color: #db3300;
-  @include theming.dark-mode-only {
-    background-color: rgba(71, 17, 0, 0.8);
-    color: #ff6a3d;
-  }
+  background-color: awsui.$color-background-accent-orange;
+  color: awsui.$color-text-accent-orange;
 }
 
 .accent-purple {
-  background-color: #faf5ff;
-  color: #962eff;
-  @include theming.dark-mode-only {
-    background-color: rgba(48, 0, 97, 0.8);
-    color: #bf80ff;
-  }
+  background-color: awsui.$color-background-accent-purple;
+  color: awsui.$color-text-accent-purple;
 }
 
 .accent-mint {
-  background-color: #ebfff6;
-  color: #008559;
-  @include theming.dark-mode-only {
-    background-color: rgba(0, 51, 34, 0.8);
-    color: #00e582;
-  }
+  background-color: awsui.$color-background-accent-mint;
+  color: awsui.$color-text-accent-mint;
 }
 
 .accent-lime {
-  background-color: #f7ffeb;
-  color: #008a00;
-  @include theming.dark-mode-only {
-    background-color: rgba(0, 46, 0, 0.8);
-    color: #7ae500;
-  }
+  background-color: awsui.$color-background-accent-lime;
+  color: awsui.$color-text-accent-lime;
 }
 
 .accent-grey {
-  background-color: #fcfcfc;
-  color: #6b6b6b;
-  @include theming.dark-mode-only {
-    background-color: rgba(21, 21, 21, 0.8);
-    color: #b7b7b7;
-  }
+  background-color: awsui.$color-background-accent-grey;
+  color: awsui.$color-text-accent-grey;
 }
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 5106958a6e..14ac9e7562 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -608,6 +608,15 @@ export type ColorsTokenName =
   | 'colorBackgroundNotificationStackBar'
   | 'colorBackgroundNotificationStackBarActive'
   | 'colorBackgroundNotificationStackBarHover'
+  | 'colorBackgroundAccentRed'
+  | 'colorBackgroundAccentYellow'
+  | 'colorBackgroundAccentIndigo'
+  | 'colorBackgroundAccentGreen'
+  | 'colorBackgroundAccentOrange'
+  | 'colorBackgroundAccentPurple'
+  | 'colorBackgroundAccentMint'
+  | 'colorBackgroundAccentLime'
+  | 'colorBackgroundAccentGrey'
   | 'colorBackgroundPopover'
   | 'colorBackgroundProgressBarValueDefault'
   | 'colorBackgroundProgressBarDefault'
@@ -732,6 +741,15 @@ export type ColorsTokenName =
   | 'colorStrokeCodeEditorGutterActiveLineDefault'
   | 'colorStrokeCodeEditorGutterActiveLineHover'
   | 'colorTextAccent'
+  | 'colorTextAccentRed'
+  | 'colorTextAccentYellow'
+  | 'colorTextAccentIndigo'
+  | 'colorTextAccentGreen'
+  | 'colorTextAccentOrange'
+  | 'colorTextAccentPurple'
+  | 'colorTextAccentMint'
+  | 'colorTextAccentLime'
+  | 'colorTextAccentGrey'
   | 'colorTextBodyDefault'
   | 'colorTextBodySecondary'
   | 'colorTextBreadcrumbCurrent'
diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index b9c75b7770..65bede511c 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -68,6 +68,36 @@ const tokens: StyleDictionary.ColorPaletteDictionary = {
     'colorPurple700',
     'colorAmber400',
     'colorAmber500',
+    // Accent palette steps (Box `awsui-accent` variant): each family uses 50/600 (light bg/text)
+    // and 950/400 (dark bg/text).
+    'colorNeutralGrey50',
+    'colorNeutralGrey400',
+    'colorNeutralGrey600',
+    'colorNeutralGrey950',
+    'colorRed950',
+    'colorOrange50',
+    'colorOrange400',
+    'colorOrange600',
+    'colorOrange950',
+    'colorYellow600',
+    'colorYellow950',
+    'colorLime50',
+    'colorLime400',
+    'colorLime600',
+    'colorLime950',
+    'colorGreen400',
+    'colorGreen950',
+    'colorMint50',
+    'colorMint400',
+    'colorMint600',
+    'colorMint950',
+    'colorIndigo50',
+    'colorIndigo400',
+    'colorIndigo600',
+    'colorIndigo950',
+    'colorPurple50',
+    'colorPurple600',
+    'colorPurple950',
     'colorAwsSquidInk',
     'colorTransparent',
     'colorBlack',
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 927657bff9..6ac6a255c5 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -91,6 +91,34 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundNotificationStackBar: '{colorNeutral750}',
   colorBackgroundNotificationStackBarActive: '{colorNeutral750}',
   colorBackgroundNotificationStackBarHover: '{colorNeutral650}',
+
+  // ── Accent (Box `awsui-accent` variant) ───────────────────────────────────
+  // A decorative ornament palette, not semantic status colors. Each accent uses a
+  // tinted background and a matching content color: light mode uses the 50/600 palette
+  // steps, dark mode uses 950/400. These specific steps aren't exposed by the semantic
+  // reference scales (e.g. colorError has no 950, colorSuccess no 400/950, colorWarning
+  // no 600/950), so the palette tokens are referenced directly and no-legacy-tokens is
+  // intentionally disabled for this block.
+  /* eslint-disable @cloudscape-design/components/no-legacy-tokens */
+  colorBackgroundAccentRed: { light: '{colorRed50}', dark: '{colorRed950}' },
+  colorBackgroundAccentYellow: { light: '{colorYellow50}', dark: '{colorYellow950}' },
+  colorBackgroundAccentIndigo: { light: '{colorIndigo50}', dark: '{colorIndigo950}' },
+  colorBackgroundAccentGreen: { light: '{colorGreen50}', dark: '{colorGreen950}' },
+  colorBackgroundAccentOrange: { light: '{colorOrange50}', dark: '{colorOrange950}' },
+  colorBackgroundAccentPurple: { light: '{colorPurple50}', dark: '{colorPurple950}' },
+  colorBackgroundAccentMint: { light: '{colorMint50}', dark: '{colorMint950}' },
+  colorBackgroundAccentLime: { light: '{colorLime50}', dark: '{colorLime950}' },
+  colorBackgroundAccentGrey: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey950}' },
+  colorTextAccentRed: { light: '{colorRed600}', dark: '{colorRed400}' },
+  colorTextAccentYellow: { light: '{colorYellow600}', dark: '{colorYellow400}' },
+  colorTextAccentIndigo: { light: '{colorIndigo600}', dark: '{colorIndigo400}' },
+  colorTextAccentGreen: { light: '{colorGreen600}', dark: '{colorGreen400}' },
+  colorTextAccentOrange: { light: '{colorOrange600}', dark: '{colorOrange400}' },
+  colorTextAccentPurple: { light: '{colorPurple600}', dark: '{colorPurple400}' },
+  colorTextAccentMint: { light: '{colorMint600}', dark: '{colorMint400}' },
+  colorTextAccentLime: { light: '{colorLime600}', dark: '{colorLime400}' },
+  colorTextAccentGrey: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey400}' },
+  /* eslint-enable @cloudscape-design/components/no-legacy-tokens */
   colorBackgroundPopover: { light: '{colorWhite}', dark: '{colorNeutral800}' },
   colorBackgroundProgressBarValueDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
   colorBackgroundProgressBarDefault: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index 35e79814da..d4f14ad4f4 100644
--- a/style-dictionary/visual-refresh/metadata/colors.ts
+++ b/style-dictionary/visual-refresh/metadata/colors.ts
@@ -276,6 +276,96 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorBackgroundAccentRed: {
+    description: 'The background color of the red accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentYellow: {
+    description: 'The background color of the yellow accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentIndigo: {
+    description: 'The background color of the indigo accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentGreen: {
+    description: 'The background color of the green accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentOrange: {
+    description: 'The background color of the orange accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentPurple: {
+    description: 'The background color of the purple accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentMint: {
+    description: 'The background color of the mint accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentLime: {
+    description: 'The background color of the lime accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentGrey: {
+    description: 'The background color of the grey accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentRed: {
+    description: 'The content color of the red accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentYellow: {
+    description: 'The content color of the yellow accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentIndigo: {
+    description: 'The content color of the indigo accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentGreen: {
+    description: 'The content color of the green accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentOrange: {
+    description: 'The content color of the orange accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentPurple: {
+    description: 'The content color of the purple accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentMint: {
+    description: 'The content color of the mint accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentLime: {
+    description: 'The content color of the lime accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentGrey: {
+    description: 'The content color of the grey accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
   colorBackgroundPopover: {
     description: 'Background color for the popover container.',
     public: true,

From 8c847bba4dc5ff3834a0f16bf024d7ff684a5b43 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 29 Jun 2026 23:36:09 +0200
Subject: [PATCH 04/19] chore: Fix accent color inheritance in Box component

- Remove redundant `color: inherit` from `.awsui-accent-base` base class
- Increase specificity of accent color selectors from `.accent-*` to `.box.accent-*` (0,1,0 to 0,2,0) to ensure accent text colors override root default-text-style
- Add `color: inherit` to nested Box elements within accented containers to properly propagate parent accent color
- Remove explicit `variant="subtle"` from Icon in accent context to use inherited styling
- Remove unnecessary `color="inherit"` from Icon wrapper in table rows as specificity fix handles propagation
- Update SCSS documentation to clarify specificity strategy and color inheritance behavior
- Ensures accent content text colors take precedence and cascade correctly to descendants
---
 pages/box/style-box.page.tsx | 16 +++++++++++-----
 src/box/style-box.scss       | 23 ++++++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/pages/box/style-box.page.tsx b/pages/box/style-box.page.tsx
index 613ce1b2bd..0577a199d5 100644
--- a/pages/box/style-box.page.tsx
+++ b/pages/box/style-box.page.tsx
@@ -69,7 +69,9 @@ export default function StyleBoxPage() {
           <SpaceBetween size="m" direction="horizontal">
             {ALL_VARIANTS.map(color => (
               <Box key={color} variant="awsui-accent" accentColor={color}>
-                <Box variant={variant}>{content}</Box>
+                <Box variant={variant} color="inherit">
+                  {content}
+                </Box>
               </Box>
             ))}
           </SpaceBetween>
@@ -83,7 +85,7 @@ export default function StyleBoxPage() {
       <SpaceBetween size="m" direction="horizontal">
         {ALL_VARIANTS.map(color => (
           <Box key={color} variant="awsui-accent" accentColor={color}>
-            <Icon name="check" size="medium" variant="subtle" />
+            <Icon name="check" size="medium" />
           </Box>
         ))}
       </SpaceBetween>
@@ -103,7 +105,9 @@ export default function StyleBoxPage() {
             label: 'Distribution ID',
             value: (
               <Box variant="awsui-accent" accentColor="indigo">
-                <Box variant="p">E1WG1ZNPRXT0D4</Box>
+                <Box variant="p" color="inherit">
+                  E1WG1ZNPRXT0D4
+                </Box>
               </Box>
             ),
             info: (
@@ -144,7 +148,9 @@ export default function StyleBoxPage() {
             label: 'Price class',
             value: (
               <Box variant="awsui-accent" accentColor="green">
-                <Box variant="p">Use only US, Canada, Europe</Box>
+                <Box variant="p" color="inherit">
+                  Use only US, Canada, Europe
+                </Box>
               </Box>
             ),
           },
@@ -169,7 +175,7 @@ export default function StyleBoxPage() {
           id: item.id,
           content: item.content,
           icon: (
-            <Box variant="awsui-accent" accentColor={item.color} color="inherit">
+            <Box variant="awsui-accent" accentColor={item.color}>
               <Icon name={item.icon as any} size="medium" />
             </Box>
           ),
diff --git a/src/box/style-box.scss b/src/box/style-box.scss
index 0f38203c1f..91a6aaf865 100644
--- a/src/box/style-box.scss
+++ b/src/box/style-box.scss
@@ -14,54 +14,55 @@
   border-start-end-radius: 2px;
   border-end-start-radius: 2px;
   border-end-end-radius: 2px;
-  color: inherit;
 }
 
 // ─── Accent colors ──────────────────────────────────────────────────────────────
 // Light/dark values are resolved by the design tokens, so no explicit dark-mode
-// overrides are needed here.
+// overrides are needed here. The `.box` prefix raises specificity to (0,2,0) so the
+// accent content color wins over `.root`'s default-text-style color (0,1,0), which is
+// emitted later in `styles.scss`. Descendants (nested Box, Icon) inherit this color.
 
-.accent-red {
+.box.accent-red {
   background-color: awsui.$color-background-accent-red;
   color: awsui.$color-text-accent-red;
 }
 
-.accent-yellow {
+.box.accent-yellow {
   background-color: awsui.$color-background-accent-yellow;
   color: awsui.$color-text-accent-yellow;
 }
 
-.accent-indigo {
+.box.accent-indigo {
   background-color: awsui.$color-background-accent-indigo;
   color: awsui.$color-text-accent-indigo;
 }
 
-.accent-green {
+.box.accent-green {
   background-color: awsui.$color-background-accent-green;
   color: awsui.$color-text-accent-green;
 }
 
-.accent-orange {
+.box.accent-orange {
   background-color: awsui.$color-background-accent-orange;
   color: awsui.$color-text-accent-orange;
 }
 
-.accent-purple {
+.box.accent-purple {
   background-color: awsui.$color-background-accent-purple;
   color: awsui.$color-text-accent-purple;
 }
 
-.accent-mint {
+.box.accent-mint {
   background-color: awsui.$color-background-accent-mint;
   color: awsui.$color-text-accent-mint;
 }
 
-.accent-lime {
+.box.accent-lime {
   background-color: awsui.$color-background-accent-lime;
   color: awsui.$color-text-accent-lime;
 }
 
-.accent-grey {
+.box.accent-grey {
   background-color: awsui.$color-background-accent-grey;
   color: awsui.$color-text-accent-grey;
 }

From f5c4f62eafa889ce11860f0bc39cb6824e071015 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Tue, 30 Jun 2026 16:46:28 +0200
Subject: [PATCH 05/19] chore: Add accentShape prop for accent variant styling

---
 pages/box/style-box.page.tsx   |  9 ++++--
 src/box/__tests__/box.test.tsx | 57 ++++++++++++++++++++++++++++++++++
 src/box/interfaces.ts          | 14 +++++++--
 src/box/internal.tsx           |  2 ++
 src/box/style-box.scss         | 28 +++++++++++++++++
 5 files changed, 106 insertions(+), 4 deletions(-)

diff --git a/pages/box/style-box.page.tsx b/pages/box/style-box.page.tsx
index 0577a199d5..e024322868 100644
--- a/pages/box/style-box.page.tsx
+++ b/pages/box/style-box.page.tsx
@@ -68,7 +68,12 @@ export default function StyleBoxPage() {
           </Box>
           <SpaceBetween size="m" direction="horizontal">
             {ALL_VARIANTS.map(color => (
-              <Box key={color} variant="awsui-accent" accentColor={color}>
+              <Box
+                key={color}
+                variant="awsui-accent"
+                accentColor={color}
+                padding={{ horizontal: 'xxxs', vertical: 'n' }}
+              >
                 <Box variant={variant} color="inherit">
                   {content}
                 </Box>
@@ -84,7 +89,7 @@ export default function StyleBoxPage() {
       </Box>
       <SpaceBetween size="m" direction="horizontal">
         {ALL_VARIANTS.map(color => (
-          <Box key={color} variant="awsui-accent" accentColor={color}>
+          <Box key={color} variant="awsui-accent" accentColor={color} accentShape="circle">
             <Icon name="check" size="medium" />
           </Box>
         ))}
diff --git a/src/box/__tests__/box.test.tsx b/src/box/__tests__/box.test.tsx
index 1db48d5d10..b3a4deedbc 100644
--- a/src/box/__tests__/box.test.tsx
+++ b/src/box/__tests__/box.test.tsx
@@ -174,4 +174,61 @@ describe('Box', () => {
       expect(container.firstChild).toHaveClass('additional-class');
     });
   });
+
+  describe('awsui-accent variant', () => {
+    test('uses span as tag name', () => {
+      const boxWrapper = renderBox({ variant: 'awsui-accent' });
+      expect(boxWrapper.getElement().tagName).toBe('SPAN');
+    });
+
+    test('applies the accent-variant class', () => {
+      const boxWrapper = renderBox({ variant: 'awsui-accent' });
+      expect(boxWrapper.getElement()).toHaveClass(styles['accent-variant']);
+    });
+
+    test('applies the correct accentColor class', () => {
+      const colors: Array<BoxProps.AccentColor> = [
+        'red',
+        'yellow',
+        'indigo',
+        'green',
+        'orange',
+        'purple',
+        'mint',
+        'lime',
+        'grey',
+      ];
+      colors.forEach(color => {
+        const boxWrapper = renderBox({ variant: 'awsui-accent', accentColor: color });
+        expect(boxWrapper.getElement()).toHaveClass(styles[`accent-${color}`]);
+      });
+    });
+
+    test('does not apply accentColor class when accentColor is not set', () => {
+      const boxWrapper = renderBox({ variant: 'awsui-accent' });
+      const element = boxWrapper.getElement();
+      expect(element.className).not.toMatch(
+        /accent-red|accent-yellow|accent-indigo|accent-green|accent-orange|accent-purple|accent-mint|accent-lime|accent-grey/
+      );
+    });
+
+    test('applies the correct accentShape class', () => {
+      const shapes: Array<BoxProps.AccentShape> = ['sharp', 'circle'];
+      shapes.forEach(shape => {
+        const boxWrapper = renderBox({ variant: 'awsui-accent', accentColor: 'indigo', accentShape: shape });
+        expect(boxWrapper.getElement()).toHaveClass(styles[`accent-shape-${shape}`]);
+      });
+    });
+
+    test('does not apply accentShape class when accentShape is not set', () => {
+      const boxWrapper = renderBox({ variant: 'awsui-accent', accentColor: 'indigo' });
+      const element = boxWrapper.getElement();
+      expect(element.className).not.toMatch(/accent-shape-sharp|accent-shape-circle/);
+    });
+
+    test('tagOverride works with accent variant', () => {
+      const boxWrapper = renderBox({ variant: 'awsui-accent', tagOverride: 'div' });
+      expect(boxWrapper.getElement().tagName).toBe('DIV');
+    });
+  });
 });
diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts
index 71531f2bee..d719c71a3c 100644
--- a/src/box/interfaces.ts
+++ b/src/box/interfaces.ts
@@ -27,10 +27,18 @@ export interface BoxProps extends BaseComponentProps {
    */
   variant?: BoxProps.Variant;
   /**
-   * Defines the accent color for the `awsui-style-box` variant.
-   * Only applies when `variant` is set to `awsui-style-box`.
+   * Defines the accent color for the `awsui-accent` variant.
+   * Only applies when `variant` is set to `awsui-accent`.
    */
   accentColor?: BoxProps.AccentColor;
+  /**
+   * Controls the border-radius shape of the accent container.
+   * Only applies when `variant` is set to `awsui-accent`.
+   *
+   * - `sharp` (default) — applies a small border-radius (2px).
+   * - `circle` — applies a fully circular shape with equal width and height, suitable for wrapping icons.
+   */
+  accentShape?: BoxProps.AccentShape;
   /**
    * Overrides the default HTML tag provided by the variant.
    */
@@ -167,6 +175,8 @@ export namespace BoxProps {
 
   export type AccentColor = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'mint' | 'lime' | 'grey';
 
+  export type AccentShape = 'sharp' | 'circle';
+
   export type Display = 'block' | 'inline' | 'inline-block' | 'none';
   export type TextAlign = 'left' | 'center' | 'right';
   export type Float = 'left' | 'right';
diff --git a/src/box/internal.tsx b/src/box/internal.tsx
index dd1578d217..a226cf17ea 100644
--- a/src/box/internal.tsx
+++ b/src/box/internal.tsx
@@ -24,6 +24,7 @@ export default function InternalBox({
   fontWeight,
   color,
   accentColor,
+  accentShape,
   children,
   nativeAttributes,
   __internalRootRef,
@@ -39,6 +40,7 @@ export default function InternalBox({
     styles.box,
     styles[`${variant.replace(/^awsui-/, '')}-variant`],
     accentColor && styles[`accent-${accentColor}`],
+    accentShape && styles[`accent-shape-${accentShape}`],
     marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]),
     paddingsClassNamesSuffices.map(suffix => styles[`p-${suffix}`]),
     styles[`d-${display}`],
diff --git a/src/box/style-box.scss b/src/box/style-box.scss
index 91a6aaf865..735d39097a 100644
--- a/src/box/style-box.scss
+++ b/src/box/style-box.scss
@@ -8,12 +8,40 @@
 // ─── Base accent variant ─────────────────────────────────────────────────────
 .accent-variant {
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
   padding-block: awsui.$space-xxs;
   padding-inline: awsui.$space-xs;
+}
+
+// ─── Accent shapes ───────────────────────────────────────────────────────────
+// `sharp` — small border-radius for badge/tag-like appearance (default).
+// `circle` — fully circular with equal dimensions, suitable for icon wrapping.
+
+.accent-shape-sharp {
   border-start-start-radius: 2px;
   border-start-end-radius: 2px;
   border-end-start-radius: 2px;
   border-end-end-radius: 2px;
+  padding-block: awsui.$space-xxxs;
+  padding-inline: awsui.$space-xxxs;
+}
+
+.accent-shape-circle {
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  // Equal padding on all sides.
+  padding-block: awsui.$space-xs;
+  padding-inline: awsui.$space-xs;
+  // Force the element to be a square regardless of content dimensions.
+  // The width is constrained to match the height (content + padding).
+  aspect-ratio: 1 / 1;
+  // Prevent content from stretching the box wider than tall.
+  overflow: hidden;
+  // Let the box shrink-wrap to its height, width follows via aspect-ratio.
+  inline-size: fit-content;
 }
 
 // ─── Accent colors ──────────────────────────────────────────────────────────────

From 3e1d9eaa52a831272d229ea08e1b6929146aa837 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 1 Jul 2026 07:38:04 +0200
Subject: [PATCH 06/19] chore: Update snapshots

---
 .../__snapshots__/themes.test.ts.snap         |  424 ++
 .../__snapshots__/design-tokens.test.ts.snap  | 2016 ++++++++
 .../__snapshots__/documenter.test.ts.snap     |   44 +
 .../test-utils-wrappers.test.tsx.snap         | 4532 -----------------
 4 files changed, 2484 insertions(+), 4532 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index f538fa177a..0d1a1ee797 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -79,6 +79,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-green": "#f2f8f0",
+  "color-background-accent-grey": "#fcfcfc",
+  "color-background-accent-indigo": "#f5f7ff",
+  "color-background-accent-lime": "#f7ffeb",
+  "color-background-accent-mint": "#ebfff6",
+  "color-background-accent-orange": "#fff7f5",
+  "color-background-accent-purple": "#faf5ff",
+  "color-background-accent-red": "#fdf3f1",
+  "color-background-accent-yellow": "#fffef0",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -471,6 +480,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
   "color-gap-global-drawer": "#eaeded",
+  "color-green-400": "#00e500",
+  "color-green-50": "#f2f8f0",
+  "color-green-600": "#1d8102",
+  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(255, 255, 255, 0.7)",
@@ -483,12 +496,24 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-icon-action-card-default": "#0073bb",
   "color-icon-action-card-disabled": "#aab7b8",
   "color-icon-action-card-hover": "#002b66",
+  "color-indigo-400": "#7598ff",
+  "color-indigo-50": "#f5f7ff",
+  "color-indigo-600": "#295eff",
+  "color-indigo-950": "#001475",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
   "color-item-selected": "#0073bb",
+  "color-lime-400": "#7ae500",
+  "color-lime-50": "#f7ffeb",
+  "color-lime-600": "#008a00",
+  "color-lime-950": "#002e00",
+  "color-mint-400": "#00e582",
+  "color-mint-50": "#ebfff6",
+  "color-mint-600": "#008559",
+  "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -509,6 +534,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
+  "color-neutral-grey-400": "#b7b7b7",
+  "color-neutral-grey-50": "#fcfcfc",
+  "color-neutral-grey-600": "#6b6b6b",
+  "color-neutral-grey-950": "#151515",
+  "color-orange-400": "#ff6a3d",
+  "color-orange-50": "#fff7f5",
+  "color-orange-600": "#db3300",
+  "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -521,7 +554,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-purple-400": "#bf80ff",
+  "color-purple-50": "#faf5ff",
+  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
+  "color-purple-950": "#300061",
+  "color-red-400": "#ff5d64",
+  "color-red-50": "#fdf3f1",
+  "color-red-600": "#d13212",
+  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -536,6 +576,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
   "color-text-accent": "#0073bb",
+  "color-text-accent-green": "#1d8102",
+  "color-text-accent-grey": "#6b6b6b",
+  "color-text-accent-indigo": "#295eff",
+  "color-text-accent-lime": "#008a00",
+  "color-text-accent-mint": "#008559",
+  "color-text-accent-orange": "#db3300",
+  "color-text-accent-purple": "#962eff",
+  "color-text-accent-red": "#d13212",
+  "color-text-accent-yellow": "#f2b100",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -673,6 +722,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-warning-500": "#fbd332",
   "color-warning-900": "#906806",
   "color-white": "#ffffff",
+  "color-yellow-400": "#ffe347",
+  "color-yellow-50": "#fffef0",
+  "color-yellow-600": "#f2b100",
+  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.25px",
   "font-chart-detail-size": "14px",
   "font-decoration-style-link": "solid",
@@ -1006,6 +1059,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-green": "#003311",
+  "color-background-accent-grey": "#151515",
+  "color-background-accent-indigo": "#001475",
+  "color-background-accent-lime": "#002e00",
+  "color-background-accent-mint": "#003322",
+  "color-background-accent-orange": "#471100",
+  "color-background-accent-purple": "#300061",
+  "color-background-accent-red": "#520000",
+  "color-background-accent-yellow": "#573a00",
   "color-background-action-card-active": "#414750",
   "color-background-action-card-default": "#1a2029",
   "color-background-action-card-disabled": "#21252c",
@@ -1398,6 +1460,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-foreground-control-disabled": "#687078",
   "color-foreground-control-read-only": "#95a5a6",
   "color-gap-global-drawer": "#16191f",
+  "color-green-400": "#00e500",
+  "color-green-50": "#f2f8f0",
+  "color-green-600": "#1d8102",
+  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(255, 255, 255, 0.7)",
@@ -1410,12 +1476,24 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-icon-action-card-default": "#00a1c9",
   "color-icon-action-card-disabled": "#687078",
   "color-icon-action-card-hover": "#44b9d6",
+  "color-indigo-400": "#7598ff",
+  "color-indigo-50": "#f5f7ff",
+  "color-indigo-600": "#295eff",
+  "color-indigo-950": "#001475",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
   "color-item-selected": "#44b9d6",
+  "color-lime-400": "#7ae500",
+  "color-lime-50": "#f7ffeb",
+  "color-lime-600": "#008a00",
+  "color-lime-950": "#002e00",
+  "color-mint-400": "#00e582",
+  "color-mint-50": "#ebfff6",
+  "color-mint-600": "#008559",
+  "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -1436,6 +1514,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
+  "color-neutral-grey-400": "#b7b7b7",
+  "color-neutral-grey-50": "#fcfcfc",
+  "color-neutral-grey-600": "#6b6b6b",
+  "color-neutral-grey-950": "#151515",
+  "color-orange-400": "#ff6a3d",
+  "color-orange-50": "#fff7f5",
+  "color-orange-600": "#db3300",
+  "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -1448,7 +1534,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-purple-400": "#bf80ff",
+  "color-purple-50": "#faf5ff",
+  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
+  "color-purple-950": "#300061",
+  "color-red-400": "#ff5d64",
+  "color-red-50": "#fdf3f1",
+  "color-red-600": "#d13212",
+  "color-red-950": "#520000",
   "color-severity-dark-red": "#d63f38",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -1463,6 +1556,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
   "color-text-accent": "#44b9d6",
+  "color-text-accent-green": "#00e500",
+  "color-text-accent-grey": "#b7b7b7",
+  "color-text-accent-indigo": "#7598ff",
+  "color-text-accent-lime": "#7ae500",
+  "color-text-accent-mint": "#00e582",
+  "color-text-accent-orange": "#ff6a3d",
+  "color-text-accent-purple": "#bf80ff",
+  "color-text-accent-red": "#ff5d64",
+  "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -1600,6 +1702,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-warning-500": "#fbd332",
   "color-warning-900": "#906806",
   "color-white": "#ffffff",
+  "color-yellow-400": "#ffe347",
+  "color-yellow-50": "#fffef0",
+  "color-yellow-600": "#f2b100",
+  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.25px",
   "font-chart-detail-size": "14px",
   "font-decoration-style-link": "solid",
@@ -1933,6 +2039,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-green": "#f2f8f0",
+  "color-background-accent-grey": "#fcfcfc",
+  "color-background-accent-indigo": "#f5f7ff",
+  "color-background-accent-lime": "#f7ffeb",
+  "color-background-accent-mint": "#ebfff6",
+  "color-background-accent-orange": "#fff7f5",
+  "color-background-accent-purple": "#faf5ff",
+  "color-background-accent-red": "#fdf3f1",
+  "color-background-accent-yellow": "#fffef0",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -2325,6 +2440,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
   "color-gap-global-drawer": "#eaeded",
+  "color-green-400": "#00e500",
+  "color-green-50": "#f2f8f0",
+  "color-green-600": "#1d8102",
+  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(255, 255, 255, 0.7)",
@@ -2337,12 +2456,24 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-icon-action-card-default": "#0073bb",
   "color-icon-action-card-disabled": "#aab7b8",
   "color-icon-action-card-hover": "#002b66",
+  "color-indigo-400": "#7598ff",
+  "color-indigo-50": "#f5f7ff",
+  "color-indigo-600": "#295eff",
+  "color-indigo-950": "#001475",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
   "color-item-selected": "#0073bb",
+  "color-lime-400": "#7ae500",
+  "color-lime-50": "#f7ffeb",
+  "color-lime-600": "#008a00",
+  "color-lime-950": "#002e00",
+  "color-mint-400": "#00e582",
+  "color-mint-50": "#ebfff6",
+  "color-mint-600": "#008559",
+  "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -2363,6 +2494,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
+  "color-neutral-grey-400": "#b7b7b7",
+  "color-neutral-grey-50": "#fcfcfc",
+  "color-neutral-grey-600": "#6b6b6b",
+  "color-neutral-grey-950": "#151515",
+  "color-orange-400": "#ff6a3d",
+  "color-orange-50": "#fff7f5",
+  "color-orange-600": "#db3300",
+  "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -2375,7 +2514,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-purple-400": "#bf80ff",
+  "color-purple-50": "#faf5ff",
+  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
+  "color-purple-950": "#300061",
+  "color-red-400": "#ff5d64",
+  "color-red-50": "#fdf3f1",
+  "color-red-600": "#d13212",
+  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -2390,6 +2536,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
   "color-text-accent": "#0073bb",
+  "color-text-accent-green": "#1d8102",
+  "color-text-accent-grey": "#6b6b6b",
+  "color-text-accent-indigo": "#295eff",
+  "color-text-accent-lime": "#008a00",
+  "color-text-accent-mint": "#008559",
+  "color-text-accent-orange": "#db3300",
+  "color-text-accent-purple": "#962eff",
+  "color-text-accent-red": "#d13212",
+  "color-text-accent-yellow": "#f2b100",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -2527,6 +2682,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-warning-500": "#fbd332",
   "color-warning-900": "#906806",
   "color-white": "#ffffff",
+  "color-yellow-400": "#ffe347",
+  "color-yellow-50": "#fffef0",
+  "color-yellow-600": "#f2b100",
+  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.25px",
   "font-chart-detail-size": "14px",
   "font-decoration-style-link": "solid",
@@ -2860,6 +3019,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-green": "#f2f8f0",
+  "color-background-accent-grey": "#fcfcfc",
+  "color-background-accent-indigo": "#f5f7ff",
+  "color-background-accent-lime": "#f7ffeb",
+  "color-background-accent-mint": "#ebfff6",
+  "color-background-accent-orange": "#fff7f5",
+  "color-background-accent-purple": "#faf5ff",
+  "color-background-accent-red": "#fdf3f1",
+  "color-background-accent-yellow": "#fffef0",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -3252,6 +3420,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
   "color-gap-global-drawer": "#eaeded",
+  "color-green-400": "#00e500",
+  "color-green-50": "#f2f8f0",
+  "color-green-600": "#1d8102",
+  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(255, 255, 255, 0.7)",
@@ -3264,12 +3436,24 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-icon-action-card-default": "#0073bb",
   "color-icon-action-card-disabled": "#aab7b8",
   "color-icon-action-card-hover": "#002b66",
+  "color-indigo-400": "#7598ff",
+  "color-indigo-50": "#f5f7ff",
+  "color-indigo-600": "#295eff",
+  "color-indigo-950": "#001475",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
   "color-item-selected": "#0073bb",
+  "color-lime-400": "#7ae500",
+  "color-lime-50": "#f7ffeb",
+  "color-lime-600": "#008a00",
+  "color-lime-950": "#002e00",
+  "color-mint-400": "#00e582",
+  "color-mint-50": "#ebfff6",
+  "color-mint-600": "#008559",
+  "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -3290,6 +3474,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
+  "color-neutral-grey-400": "#b7b7b7",
+  "color-neutral-grey-50": "#fcfcfc",
+  "color-neutral-grey-600": "#6b6b6b",
+  "color-neutral-grey-950": "#151515",
+  "color-orange-400": "#ff6a3d",
+  "color-orange-50": "#fff7f5",
+  "color-orange-600": "#db3300",
+  "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -3302,7 +3494,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-purple-400": "#bf80ff",
+  "color-purple-50": "#faf5ff",
+  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
+  "color-purple-950": "#300061",
+  "color-red-400": "#ff5d64",
+  "color-red-50": "#fdf3f1",
+  "color-red-600": "#d13212",
+  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -3317,6 +3516,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
   "color-text-accent": "#0073bb",
+  "color-text-accent-green": "#1d8102",
+  "color-text-accent-grey": "#6b6b6b",
+  "color-text-accent-indigo": "#295eff",
+  "color-text-accent-lime": "#008a00",
+  "color-text-accent-mint": "#008559",
+  "color-text-accent-orange": "#db3300",
+  "color-text-accent-purple": "#962eff",
+  "color-text-accent-red": "#d13212",
+  "color-text-accent-yellow": "#f2b100",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -3454,6 +3662,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-warning-500": "#fbd332",
   "color-warning-900": "#906806",
   "color-white": "#ffffff",
+  "color-yellow-400": "#ffe347",
+  "color-yellow-50": "#fffef0",
+  "color-yellow-600": "#f2b100",
+  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.25px",
   "font-chart-detail-size": "14px",
   "font-decoration-style-link": "solid",
@@ -3787,6 +3999,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-green": "#effff1",
+  "color-background-accent-grey": "#fcfcfc",
+  "color-background-accent-indigo": "#f5f7ff",
+  "color-background-accent-lime": "#f7ffeb",
+  "color-background-accent-mint": "#ebfff6",
+  "color-background-accent-orange": "#fff7f5",
+  "color-background-accent-purple": "#faf5ff",
+  "color-background-accent-red": "#fff5f5",
+  "color-background-accent-yellow": "#fffef0",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#ffffff",
@@ -4179,6 +4400,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#656871",
   "color-gap-global-drawer": "#ebebf0",
+  "color-green-400": "#00e500",
+  "color-green-50": "#effff1",
+  "color-green-600": "#00802f",
+  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(35, 43, 55, 0.7)",
@@ -4191,12 +4416,24 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-icon-action-card-default": "#006ce0",
   "color-icon-action-card-disabled": "#b4b4bb",
   "color-icon-action-card-hover": "#002b66",
+  "color-indigo-400": "#7598ff",
+  "color-indigo-50": "#f5f7ff",
+  "color-indigo-600": "#295eff",
+  "color-indigo-950": "#001475",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
   "color-item-selected": "#006ce0",
+  "color-lime-400": "#7ae500",
+  "color-lime-50": "#f7ffeb",
+  "color-lime-600": "#008a00",
+  "color-lime-950": "#002e00",
+  "color-mint-400": "#00e582",
+  "color-mint-50": "#ebfff6",
+  "color-mint-600": "#008559",
+  "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -4217,6 +4454,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
+  "color-neutral-grey-400": "#b7b7b7",
+  "color-neutral-grey-50": "#fcfcfc",
+  "color-neutral-grey-600": "#6b6b6b",
+  "color-neutral-grey-950": "#151515",
+  "color-orange-400": "#ff6a3d",
+  "color-orange-50": "#fff7f5",
+  "color-orange-600": "#db3300",
+  "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -4229,7 +4474,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-purple-400": "#bf80ff",
+  "color-purple-50": "#faf5ff",
+  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
+  "color-purple-950": "#300061",
+  "color-red-400": "#ff7a7a",
+  "color-red-50": "#fff5f5",
+  "color-red-600": "#db0000",
+  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -4244,6 +4496,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
   "color-text-accent": "#006ce0",
+  "color-text-accent-green": "#00802f",
+  "color-text-accent-grey": "#6b6b6b",
+  "color-text-accent-indigo": "#295eff",
+  "color-text-accent-lime": "#008a00",
+  "color-text-accent-mint": "#008559",
+  "color-text-accent-orange": "#db3300",
+  "color-text-accent-purple": "#962eff",
+  "color-text-accent-red": "#db0000",
+  "color-text-accent-yellow": "#f2b100",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -4381,6 +4642,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-warning-500": "#fbd332",
   "color-warning-900": "#855900",
   "color-white": "#ffffff",
+  "color-yellow-400": "#ffe347",
+  "color-yellow-50": "#fffef0",
+  "color-yellow-600": "#f2b100",
+  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.005em",
   "font-chart-detail-size": "12px",
   "font-decoration-style-link": "solid",
@@ -4714,6 +4979,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-green": "#effff1",
+  "color-background-accent-grey": "#fcfcfc",
+  "color-background-accent-indigo": "#f5f7ff",
+  "color-background-accent-lime": "#f7ffeb",
+  "color-background-accent-mint": "#ebfff6",
+  "color-background-accent-orange": "#fff7f5",
+  "color-background-accent-purple": "#faf5ff",
+  "color-background-accent-red": "#fff5f5",
+  "color-background-accent-yellow": "#fffef0",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#ffffff",
@@ -5106,6 +5380,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#656871",
   "color-gap-global-drawer": "#ebebf0",
+  "color-green-400": "#00e500",
+  "color-green-50": "#effff1",
+  "color-green-600": "#00802f",
+  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(35, 43, 55, 0.7)",
@@ -5118,12 +5396,24 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-icon-action-card-default": "#006ce0",
   "color-icon-action-card-disabled": "#b4b4bb",
   "color-icon-action-card-hover": "#002b66",
+  "color-indigo-400": "#7598ff",
+  "color-indigo-50": "#f5f7ff",
+  "color-indigo-600": "#295eff",
+  "color-indigo-950": "#001475",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
   "color-item-selected": "#006ce0",
+  "color-lime-400": "#7ae500",
+  "color-lime-50": "#f7ffeb",
+  "color-lime-600": "#008a00",
+  "color-lime-950": "#002e00",
+  "color-mint-400": "#00e582",
+  "color-mint-50": "#ebfff6",
+  "color-mint-600": "#008559",
+  "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -5144,6 +5434,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
+  "color-neutral-grey-400": "#b7b7b7",
+  "color-neutral-grey-50": "#fcfcfc",
+  "color-neutral-grey-600": "#6b6b6b",
+  "color-neutral-grey-950": "#151515",
+  "color-orange-400": "#ff6a3d",
+  "color-orange-50": "#fff7f5",
+  "color-orange-600": "#db3300",
+  "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -5156,7 +5454,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-purple-400": "#bf80ff",
+  "color-purple-50": "#faf5ff",
+  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
+  "color-purple-950": "#300061",
+  "color-red-400": "#ff7a7a",
+  "color-red-50": "#fff5f5",
+  "color-red-600": "#db0000",
+  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -5171,6 +5476,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
   "color-text-accent": "#006ce0",
+  "color-text-accent-green": "#00802f",
+  "color-text-accent-grey": "#6b6b6b",
+  "color-text-accent-indigo": "#295eff",
+  "color-text-accent-lime": "#008a00",
+  "color-text-accent-mint": "#008559",
+  "color-text-accent-orange": "#db3300",
+  "color-text-accent-purple": "#962eff",
+  "color-text-accent-red": "#db0000",
+  "color-text-accent-yellow": "#f2b100",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -5308,6 +5622,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-warning-500": "#fbd332",
   "color-warning-900": "#855900",
   "color-white": "#ffffff",
+  "color-yellow-400": "#ffe347",
+  "color-yellow-50": "#fffef0",
+  "color-yellow-600": "#f2b100",
+  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.005em",
   "font-chart-detail-size": "12px",
   "font-decoration-style-link": "solid",
@@ -5641,6 +5959,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-green": "#003311",
+  "color-background-accent-grey": "#151515",
+  "color-background-accent-indigo": "#001475",
+  "color-background-accent-lime": "#002e00",
+  "color-background-accent-mint": "#003322",
+  "color-background-accent-orange": "#471100",
+  "color-background-accent-purple": "#300061",
+  "color-background-accent-red": "#520000",
+  "color-background-accent-yellow": "#573a00",
   "color-background-action-card-active": "#333843",
   "color-background-action-card-default": "#161d26",
   "color-background-action-card-disabled": "#161d26",
@@ -6033,6 +6360,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-foreground-control-disabled": "#161d26",
   "color-foreground-control-read-only": "#a4a4ad",
   "color-gap-global-drawer": "#0f141a",
+  "color-green-400": "#00e500",
+  "color-green-50": "#effff1",
+  "color-green-600": "#00802f",
+  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(15, 20, 26, 0.7)",
@@ -6045,12 +6376,24 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-icon-action-card-default": "#42b4ff",
   "color-icon-action-card-disabled": "#656871",
   "color-icon-action-card-hover": "#75cfff",
+  "color-indigo-400": "#7598ff",
+  "color-indigo-50": "#f5f7ff",
+  "color-indigo-600": "#295eff",
+  "color-indigo-950": "#001475",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
   "color-item-selected": "#42b4ff",
+  "color-lime-400": "#7ae500",
+  "color-lime-50": "#f7ffeb",
+  "color-lime-600": "#008a00",
+  "color-lime-950": "#002e00",
+  "color-mint-400": "#00e582",
+  "color-mint-50": "#ebfff6",
+  "color-mint-600": "#008559",
+  "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -6071,6 +6414,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
+  "color-neutral-grey-400": "#b7b7b7",
+  "color-neutral-grey-50": "#fcfcfc",
+  "color-neutral-grey-600": "#6b6b6b",
+  "color-neutral-grey-950": "#151515",
+  "color-orange-400": "#ff6a3d",
+  "color-orange-50": "#fff7f5",
+  "color-orange-600": "#db3300",
+  "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -6083,7 +6434,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-purple-400": "#bf80ff",
+  "color-purple-50": "#faf5ff",
+  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
+  "color-purple-950": "#300061",
+  "color-red-400": "#ff7a7a",
+  "color-red-50": "#fff5f5",
+  "color-red-600": "#db0000",
+  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -6098,6 +6456,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
   "color-text-accent": "#42b4ff",
+  "color-text-accent-green": "#00e500",
+  "color-text-accent-grey": "#b7b7b7",
+  "color-text-accent-indigo": "#7598ff",
+  "color-text-accent-lime": "#7ae500",
+  "color-text-accent-mint": "#00e582",
+  "color-text-accent-orange": "#ff6a3d",
+  "color-text-accent-purple": "#bf80ff",
+  "color-text-accent-red": "#ff7a7a",
+  "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -6235,6 +6602,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-warning-500": "#fbd332",
   "color-warning-900": "#855900",
   "color-white": "#ffffff",
+  "color-yellow-400": "#ffe347",
+  "color-yellow-50": "#fffef0",
+  "color-yellow-600": "#f2b100",
+  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.005em",
   "font-chart-detail-size": "12px",
   "font-decoration-style-link": "solid",
@@ -6568,6 +6939,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-green": "#003311",
+  "color-background-accent-grey": "#151515",
+  "color-background-accent-indigo": "#001475",
+  "color-background-accent-lime": "#002e00",
+  "color-background-accent-mint": "#003322",
+  "color-background-accent-orange": "#471100",
+  "color-background-accent-purple": "#300061",
+  "color-background-accent-red": "#520000",
+  "color-background-accent-yellow": "#573a00",
   "color-background-action-card-active": "#333843",
   "color-background-action-card-default": "#161d26",
   "color-background-action-card-disabled": "#161d26",
@@ -6960,6 +7340,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-foreground-control-disabled": "#161d26",
   "color-foreground-control-read-only": "#a4a4ad",
   "color-gap-global-drawer": "#0f141a",
+  "color-green-400": "#00e500",
+  "color-green-50": "#effff1",
+  "color-green-600": "#00802f",
+  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(15, 20, 26, 0.7)",
@@ -6972,12 +7356,24 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-icon-action-card-default": "#42b4ff",
   "color-icon-action-card-disabled": "#656871",
   "color-icon-action-card-hover": "#75cfff",
+  "color-indigo-400": "#7598ff",
+  "color-indigo-50": "#f5f7ff",
+  "color-indigo-600": "#295eff",
+  "color-indigo-950": "#001475",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
   "color-item-selected": "#42b4ff",
+  "color-lime-400": "#7ae500",
+  "color-lime-50": "#f7ffeb",
+  "color-lime-600": "#008a00",
+  "color-lime-950": "#002e00",
+  "color-mint-400": "#00e582",
+  "color-mint-50": "#ebfff6",
+  "color-mint-600": "#008559",
+  "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -6998,6 +7394,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
+  "color-neutral-grey-400": "#b7b7b7",
+  "color-neutral-grey-50": "#fcfcfc",
+  "color-neutral-grey-600": "#6b6b6b",
+  "color-neutral-grey-950": "#151515",
+  "color-orange-400": "#ff6a3d",
+  "color-orange-50": "#fff7f5",
+  "color-orange-600": "#db3300",
+  "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -7010,7 +7414,14 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-purple-400": "#bf80ff",
+  "color-purple-50": "#faf5ff",
+  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
+  "color-purple-950": "#300061",
+  "color-red-400": "#ff7a7a",
+  "color-red-50": "#fff5f5",
+  "color-red-600": "#db0000",
+  "color-red-950": "#520000",
   "color-severity-dark-red": "#d63f38",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -7025,6 +7436,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
   "color-text-accent": "#42b4ff",
+  "color-text-accent-green": "#00e500",
+  "color-text-accent-grey": "#b7b7b7",
+  "color-text-accent-indigo": "#7598ff",
+  "color-text-accent-lime": "#7ae500",
+  "color-text-accent-mint": "#00e582",
+  "color-text-accent-orange": "#ff6a3d",
+  "color-text-accent-purple": "#bf80ff",
+  "color-text-accent-red": "#ff7a7a",
+  "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -7162,6 +7582,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-warning-500": "#fbd332",
   "color-warning-900": "#855900",
   "color-white": "#ffffff",
+  "color-yellow-400": "#ffe347",
+  "color-yellow-50": "#fffef0",
+  "color-yellow-600": "#f2b100",
+  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.005em",
   "font-chart-detail-size": "12px",
   "font-decoration-style-link": "solid",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 882cd94320..d8a446454d 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -197,6 +197,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#f2f8f0",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#fcfcfc",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#f5f7ff",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#f7ffeb",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#ebfff6",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#fff7f5",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#faf5ff",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#fdf3f1",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#fffef0",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -2381,6 +2444,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#1d8102",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#6b6b6b",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#295eff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#008a00",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#008559",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#db3300",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#962eff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5d64",
+            "light": "#d13212",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#f2b100",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -3801,6 +3927,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#f2f8f0",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#fcfcfc",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#f5f7ff",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#f7ffeb",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#ebfff6",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#fff7f5",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#faf5ff",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#fdf3f1",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#fffef0",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -5985,6 +6174,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#1d8102",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#6b6b6b",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#295eff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#008a00",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#008559",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#db3300",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#962eff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5d64",
+            "light": "#d13212",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#f2b100",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -7405,6 +7657,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#f2f8f0",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#fcfcfc",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#f5f7ff",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#f7ffeb",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#ebfff6",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#fff7f5",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#faf5ff",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#fdf3f1",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#fffef0",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -9589,6 +9904,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#1d8102",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#6b6b6b",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#295eff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#008a00",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#008559",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#db3300",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#962eff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5d64",
+            "light": "#d13212",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#f2b100",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -11009,6 +11387,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#f2f8f0",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#fcfcfc",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#f5f7ff",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#f7ffeb",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#ebfff6",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#fff7f5",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#faf5ff",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#fdf3f1",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#fffef0",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -13193,6 +13634,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#1d8102",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#6b6b6b",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#295eff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#008a00",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#008559",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#db3300",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#962eff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5d64",
+            "light": "#d13212",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#f2b100",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -14613,6 +15117,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#f2f8f0",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#fcfcfc",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#f5f7ff",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#f7ffeb",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#ebfff6",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#fff7f5",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#faf5ff",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#fdf3f1",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#fffef0",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -16797,6 +17364,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#1d8102",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#6b6b6b",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#295eff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#008a00",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#008559",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#db3300",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#962eff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5d64",
+            "light": "#d13212",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#f2b100",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -18217,6 +18847,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#003311",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#151515",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#001475",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#002e00",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#003322",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#471100",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#300061",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#520000",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#573a00",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -20401,6 +21094,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#44b9d6",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#00e500",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#b7b7b7",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#7598ff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#7ae500",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#00e582",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#ff6a3d",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5d64",
+            "light": "#ff5d64",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -21821,6 +22577,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The border width of tokens.",
       "$value": "1px",
     },
+    "color-background-accent-green": {
+      "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#003311",
+        "light": "#f2f8f0",
+      },
+    },
+    "color-background-accent-grey": {
+      "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#151515",
+        "light": "#fcfcfc",
+      },
+    },
+    "color-background-accent-indigo": {
+      "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#001475",
+        "light": "#f5f7ff",
+      },
+    },
+    "color-background-accent-lime": {
+      "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#002e00",
+        "light": "#f7ffeb",
+      },
+    },
+    "color-background-accent-mint": {
+      "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#003322",
+        "light": "#ebfff6",
+      },
+    },
+    "color-background-accent-orange": {
+      "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#471100",
+        "light": "#fff7f5",
+      },
+    },
+    "color-background-accent-purple": {
+      "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#300061",
+        "light": "#faf5ff",
+      },
+    },
+    "color-background-accent-red": {
+      "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#520000",
+        "light": "#fdf3f1",
+      },
+    },
+    "color-background-accent-yellow": {
+      "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#573a00",
+        "light": "#fffef0",
+      },
+    },
     "color-background-action-card-active": {
       "$description": "The background color of action cards in active state.",
       "$value": {
@@ -24005,6 +24824,69 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "light": "#0073bb",
       },
     },
+    "color-text-accent-green": {
+      "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#00e500",
+        "light": "#1d8102",
+      },
+    },
+    "color-text-accent-grey": {
+      "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#b7b7b7",
+        "light": "#6b6b6b",
+      },
+    },
+    "color-text-accent-indigo": {
+      "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#7598ff",
+        "light": "#295eff",
+      },
+    },
+    "color-text-accent-lime": {
+      "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#7ae500",
+        "light": "#008a00",
+      },
+    },
+    "color-text-accent-mint": {
+      "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#00e582",
+        "light": "#008559",
+      },
+    },
+    "color-text-accent-orange": {
+      "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff6a3d",
+        "light": "#db3300",
+      },
+    },
+    "color-text-accent-purple": {
+      "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#bf80ff",
+        "light": "#962eff",
+      },
+    },
+    "color-text-accent-red": {
+      "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff5d64",
+        "light": "#d13212",
+      },
+    },
+    "color-text-accent-yellow": {
+      "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ffe347",
+        "light": "#f2b100",
+      },
+    },
     "color-text-action-card-disabled": {
       "$description": "The text color of action cards in disabled state.",
       "$value": {
@@ -25430,6 +26312,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#effff1",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#fcfcfc",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#f5f7ff",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#f7ffeb",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#ebfff6",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#fff7f5",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#faf5ff",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#fff5f5",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#fffef0",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -27614,6 +28559,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#00802f",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#6b6b6b",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#295eff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#008a00",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#008559",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#db3300",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#962eff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#f2b100",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -29034,6 +30042,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#003311",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#151515",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#001475",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#002e00",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#003322",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#471100",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#300061",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#520000",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#573a00",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -31218,6 +32289,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#42b4ff",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#00e500",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#b7b7b7",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#7598ff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#7ae500",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#00e582",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#ff6a3d",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -32638,6 +33772,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#effff1",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#fcfcfc",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#f5f7ff",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#f7ffeb",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#ebfff6",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#fff7f5",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#faf5ff",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#fff5f5",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#fffef0",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -34822,6 +36019,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#00802f",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#6b6b6b",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#295eff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#008a00",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#008559",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#db3300",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#962eff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#f2b100",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -36242,6 +37502,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#effff1",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#fcfcfc",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#f5f7ff",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#f7ffeb",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#ebfff6",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#fff7f5",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#faf5ff",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#fff5f5",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#fffef0",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -38426,6 +39749,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#00802f",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#6b6b6b",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#295eff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#008a00",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#008559",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#db3300",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#962eff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#f2b100",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -39846,6 +41232,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#effff1",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#fcfcfc",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#f5f7ff",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#f7ffeb",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#ebfff6",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#fff7f5",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#faf5ff",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#fff5f5",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#fffef0",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -42030,6 +43479,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#00802f",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#6b6b6b",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#295eff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#008a00",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#008559",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#db3300",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#962eff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#f2b100",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -43450,6 +44962,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#effff1",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#fcfcfc",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#f5f7ff",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#f7ffeb",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#ebfff6",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#fff7f5",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#faf5ff",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#fff5f5",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#fffef0",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -45634,6 +47209,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#00802f",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#6b6b6b",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#295eff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#008a00",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#008559",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#db3300",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#962eff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#f2b100",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -47054,6 +48692,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#003311",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#151515",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#001475",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#002e00",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#003322",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#471100",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#300061",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#520000",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#573a00",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -49238,6 +50939,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#42b4ff",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#00e500",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#b7b7b7",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#7598ff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#7ae500",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#00e582",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#ff6a3d",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -50658,6 +52422,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-green": {
+          "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003311",
+            "light": "#003311",
+          },
+        },
+        "color-background-accent-grey": {
+          "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#151515",
+            "light": "#151515",
+          },
+        },
+        "color-background-accent-indigo": {
+          "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#001475",
+            "light": "#001475",
+          },
+        },
+        "color-background-accent-lime": {
+          "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#002e00",
+            "light": "#002e00",
+          },
+        },
+        "color-background-accent-mint": {
+          "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#003322",
+            "light": "#003322",
+          },
+        },
+        "color-background-accent-orange": {
+          "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#471100",
+            "light": "#471100",
+          },
+        },
+        "color-background-accent-purple": {
+          "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#300061",
+            "light": "#300061",
+          },
+        },
+        "color-background-accent-red": {
+          "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#520000",
+            "light": "#520000",
+          },
+        },
+        "color-background-accent-yellow": {
+          "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#573a00",
+            "light": "#573a00",
+          },
+        },
         "color-background-action-card-active": {
           "$description": "The background color of action cards in active state.",
           "$value": {
@@ -52842,6 +54669,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#42b4ff",
           },
         },
+        "color-text-accent-green": {
+          "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e500",
+            "light": "#00e500",
+          },
+        },
+        "color-text-accent-grey": {
+          "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#b7b7b7",
+            "light": "#b7b7b7",
+          },
+        },
+        "color-text-accent-indigo": {
+          "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7598ff",
+            "light": "#7598ff",
+          },
+        },
+        "color-text-accent-lime": {
+          "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#7ae500",
+            "light": "#7ae500",
+          },
+        },
+        "color-text-accent-mint": {
+          "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00e582",
+            "light": "#00e582",
+          },
+        },
+        "color-text-accent-orange": {
+          "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff6a3d",
+            "light": "#ff6a3d",
+          },
+        },
+        "color-text-accent-purple": {
+          "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-accent-red": {
+          "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-text-accent-yellow": {
+          "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
         "color-text-action-card-disabled": {
           "$description": "The text color of action cards in disabled state.",
           "$value": {
@@ -54262,6 +56152,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The border width of tokens.",
       "$value": "2px",
     },
+    "color-background-accent-green": {
+      "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#003311",
+        "light": "#effff1",
+      },
+    },
+    "color-background-accent-grey": {
+      "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#151515",
+        "light": "#fcfcfc",
+      },
+    },
+    "color-background-accent-indigo": {
+      "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#001475",
+        "light": "#f5f7ff",
+      },
+    },
+    "color-background-accent-lime": {
+      "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#002e00",
+        "light": "#f7ffeb",
+      },
+    },
+    "color-background-accent-mint": {
+      "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#003322",
+        "light": "#ebfff6",
+      },
+    },
+    "color-background-accent-orange": {
+      "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#471100",
+        "light": "#fff7f5",
+      },
+    },
+    "color-background-accent-purple": {
+      "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#300061",
+        "light": "#faf5ff",
+      },
+    },
+    "color-background-accent-red": {
+      "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#520000",
+        "light": "#fff5f5",
+      },
+    },
+    "color-background-accent-yellow": {
+      "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#573a00",
+        "light": "#fffef0",
+      },
+    },
     "color-background-action-card-active": {
       "$description": "The background color of action cards in active state.",
       "$value": {
@@ -56446,6 +58399,69 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "light": "#006ce0",
       },
     },
+    "color-text-accent-green": {
+      "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#00e500",
+        "light": "#00802f",
+      },
+    },
+    "color-text-accent-grey": {
+      "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#b7b7b7",
+        "light": "#6b6b6b",
+      },
+    },
+    "color-text-accent-indigo": {
+      "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#7598ff",
+        "light": "#295eff",
+      },
+    },
+    "color-text-accent-lime": {
+      "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#7ae500",
+        "light": "#008a00",
+      },
+    },
+    "color-text-accent-mint": {
+      "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#00e582",
+        "light": "#008559",
+      },
+    },
+    "color-text-accent-orange": {
+      "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff6a3d",
+        "light": "#db3300",
+      },
+    },
+    "color-text-accent-purple": {
+      "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#bf80ff",
+        "light": "#962eff",
+      },
+    },
+    "color-text-accent-red": {
+      "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff7a7a",
+        "light": "#db0000",
+      },
+    },
+    "color-text-accent-yellow": {
+      "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ffe347",
+        "light": "#f2b100",
+      },
+    },
     "color-text-action-card-disabled": {
       "$description": "The text color of action cards in disabled state.",
       "$value": {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 3a778ff8b2..c09d6dae2a 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -4723,6 +4723,46 @@ exports[`Components definition for box matches the snapshot: box 1`] = `
   "functions": [],
   "name": "Box",
   "properties": [
+    {
+      "description": "Defines the accent color for the \`awsui-accent\` variant.
+Only applies when \`variant\` is set to \`awsui-accent\`.",
+      "inlineType": {
+        "name": "BoxProps.AccentColor",
+        "type": "union",
+        "values": [
+          "green",
+          "grey",
+          "indigo",
+          "lime",
+          "orange",
+          "purple",
+          "red",
+          "yellow",
+          "mint",
+        ],
+      },
+      "name": "accentColor",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Controls the border-radius shape of the accent container.
+Only applies when \`variant\` is set to \`awsui-accent\`.
+
+- \`sharp\` (default) — applies a small border-radius (2px).
+- \`circle\` — applies a fully circular shape with equal width and height, suitable for wrapping icons.",
+      "inlineType": {
+        "name": "BoxProps.AccentShape",
+        "type": "union",
+        "values": [
+          "circle",
+          "sharp",
+        ],
+      },
+      "name": "accentShape",
+      "optional": true,
+      "type": "string",
+    },
     {
       "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
       "description": "Adds the specified classes to the root element of the component.",
@@ -4988,6 +5028,9 @@ Sizes are automatically scaled down in compact mode.
   styled using "Display large light" typography.
 - If you set it to \`awsui-inline-code\`, the component will render a \`code\` element,
   styled with a background and padding for inline code snippets.
+- If you set it to \`awsui-accent\`, the component will render a \`span\`,
+  styled as a visual accent container with background and content color combinations.
+  Use with the \`accentColor\` prop to select a color variant.
 
 Override the HTML tag by using property \`tagOverride\`.",
       "inlineType": {
@@ -5011,6 +5054,7 @@ Override the HTML tag by using property \`tagOverride\`.",
           "awsui-key-label",
           "awsui-gen-ai-label",
           "awsui-inline-code",
+          "awsui-accent",
         ],
       },
       "name": "variant",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
index 118ac8d1b2..941f04fc00 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
@@ -2,4541 +2,9 @@
 
 exports[`Generate test utils ElementWrapper dom ElementWrapper matches the snapshot 1`] = `
 "
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
 import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
-import { appendSelector } from '@cloudscape-design/test-utils-core/utils';
-
 export { ElementWrapper };
-
-import ActionCardWrapper from './action-card';
-import AlertWrapper from './alert';
-import AnchorNavigationWrapper from './anchor-navigation';
-import AnnotationWrapper from './annotation';
-import AppLayoutWrapper from './app-layout';
-import AppLayoutToolbarWrapper from './app-layout-toolbar';
-import AreaChartWrapper from './area-chart';
-import AttributeEditorWrapper from './attribute-editor';
-import AutosuggestWrapper from './autosuggest';
-import BadgeWrapper from './badge';
-import BarChartWrapper from './bar-chart';
-import BoxWrapper from './box';
-import BreadcrumbGroupWrapper from './breadcrumb-group';
-import ButtonWrapper from './button';
-import ButtonDropdownWrapper from './button-dropdown';
-import ButtonGroupWrapper from './button-group';
-import CalendarWrapper from './calendar';
-import CardsWrapper from './cards';
-import CheckboxWrapper from './checkbox';
-import CodeEditorWrapper from './code-editor';
-import CollectionPreferencesWrapper from './collection-preferences';
-import ColumnLayoutWrapper from './column-layout';
-import ContainerWrapper from './container';
-import ContentLayoutWrapper from './content-layout';
-import CopyToClipboardWrapper from './copy-to-clipboard';
-import DateInputWrapper from './date-input';
-import DatePickerWrapper from './date-picker';
-import DateRangePickerWrapper from './date-range-picker';
-import DividerWrapper from './divider';
-import DrawerWrapper from './drawer';
-import DropdownWrapper from './dropdown';
-import ErrorBoundaryWrapper from './error-boundary';
-import ExpandableSectionWrapper from './expandable-section';
-import FileDropzoneWrapper from './file-dropzone';
-import FileInputWrapper from './file-input';
-import FileTokenGroupWrapper from './file-token-group';
-import FileUploadWrapper from './file-upload';
-import FlashbarWrapper from './flashbar';
-import FormWrapper from './form';
-import FormFieldWrapper from './form-field';
-import GridWrapper from './grid';
-import HeaderWrapper from './header';
-import HelpPanelWrapper from './help-panel';
-import HotspotWrapper from './hotspot';
-import IconWrapper from './icon';
-import InputWrapper from './input';
-import ItemCardWrapper from './item-card';
-import KeyValuePairsWrapper from './key-value-pairs';
-import LineChartWrapper from './line-chart';
-import LinkWrapper from './link';
-import ListWrapper from './list';
-import LiveRegionWrapper from './live-region';
-import MixedLineBarChartWrapper from './mixed-line-bar-chart';
-import ModalWrapper from './modal';
-import MultiselectWrapper from './multiselect';
-import NavigableGroupWrapper from './navigable-group';
-import PaginationWrapper from './pagination';
-import PanelLayoutWrapper from './panel-layout';
-import PieChartWrapper from './pie-chart';
-import PopoverWrapper from './popover';
-import ProgressBarWrapper from './progress-bar';
-import PromptInputWrapper from './prompt-input';
-import PropertyFilterWrapper from './property-filter';
-import RadioButtonWrapper from './radio-button';
-import RadioGroupWrapper from './radio-group';
-import S3ResourceSelectorWrapper from './s3-resource-selector';
-import SegmentedControlWrapper from './segmented-control';
-import SelectWrapper from './select';
-import SideNavigationWrapper from './side-navigation';
-import SkeletonWrapper from './skeleton';
-import SliderWrapper from './slider';
-import SpaceBetweenWrapper from './space-between';
-import SpinnerWrapper from './spinner';
-import SplitPanelWrapper from './split-panel';
-import StatusIndicatorWrapper from './status-indicator';
-import StepsWrapper from './steps';
-import TableWrapper from './table';
-import TabsWrapper from './tabs';
-import TagEditorWrapper from './tag-editor';
-import TextContentWrapper from './text-content';
-import TextFilterWrapper from './text-filter';
-import TextareaWrapper from './textarea';
-import TilesWrapper from './tiles';
-import TimeInputWrapper from './time-input';
-import ToggleWrapper from './toggle';
-import ToggleButtonWrapper from './toggle-button';
-import TokenWrapper from './token';
-import TokenGroupWrapper from './token-group';
-import TooltipWrapper from './tooltip';
-import TopNavigationWrapper from './top-navigation';
-import TreeViewWrapper from './tree-view';
-import TruncatedTextWrapper from './truncated-text';
-import TutorialPanelWrapper from './tutorial-panel';
-import WizardWrapper from './wizard';
-
-
-export { ActionCardWrapper };
-export { AlertWrapper };
-export { AnchorNavigationWrapper };
-export { AnnotationWrapper };
-export { AppLayoutWrapper };
-export { AppLayoutToolbarWrapper };
-export { AreaChartWrapper };
-export { AttributeEditorWrapper };
-export { AutosuggestWrapper };
-export { BadgeWrapper };
-export { BarChartWrapper };
-export { BoxWrapper };
-export { BreadcrumbGroupWrapper };
-export { ButtonWrapper };
-export { ButtonDropdownWrapper };
-export { ButtonGroupWrapper };
-export { CalendarWrapper };
-export { CardsWrapper };
-export { CheckboxWrapper };
-export { CodeEditorWrapper };
-export { CollectionPreferencesWrapper };
-export { ColumnLayoutWrapper };
-export { ContainerWrapper };
-export { ContentLayoutWrapper };
-export { CopyToClipboardWrapper };
-export { DateInputWrapper };
-export { DatePickerWrapper };
-export { DateRangePickerWrapper };
-export { DividerWrapper };
-export { DrawerWrapper };
-export { DropdownWrapper };
-export { ErrorBoundaryWrapper };
-export { ExpandableSectionWrapper };
-export { FileDropzoneWrapper };
-export { FileInputWrapper };
-export { FileTokenGroupWrapper };
-export { FileUploadWrapper };
-export { FlashbarWrapper };
-export { FormWrapper };
-export { FormFieldWrapper };
-export { GridWrapper };
-export { HeaderWrapper };
-export { HelpPanelWrapper };
-export { HotspotWrapper };
-export { IconWrapper };
-export { InputWrapper };
-export { ItemCardWrapper };
-export { KeyValuePairsWrapper };
-export { LineChartWrapper };
-export { LinkWrapper };
-export { ListWrapper };
-export { LiveRegionWrapper };
-export { MixedLineBarChartWrapper };
-export { ModalWrapper };
-export { MultiselectWrapper };
-export { NavigableGroupWrapper };
-export { PaginationWrapper };
-export { PanelLayoutWrapper };
-export { PieChartWrapper };
-export { PopoverWrapper };
-export { ProgressBarWrapper };
-export { PromptInputWrapper };
-export { PropertyFilterWrapper };
-export { RadioButtonWrapper };
-export { RadioGroupWrapper };
-export { S3ResourceSelectorWrapper };
-export { SegmentedControlWrapper };
-export { SelectWrapper };
-export { SideNavigationWrapper };
-export { SkeletonWrapper };
-export { SliderWrapper };
-export { SpaceBetweenWrapper };
-export { SpinnerWrapper };
-export { SplitPanelWrapper };
-export { StatusIndicatorWrapper };
-export { StepsWrapper };
-export { TableWrapper };
-export { TabsWrapper };
-export { TagEditorWrapper };
-export { TextContentWrapper };
-export { TextFilterWrapper };
-export { TextareaWrapper };
-export { TilesWrapper };
-export { TimeInputWrapper };
-export { ToggleWrapper };
-export { ToggleButtonWrapper };
-export { TokenWrapper };
-export { TokenGroupWrapper };
-export { TooltipWrapper };
-export { TopNavigationWrapper };
-export { TreeViewWrapper };
-export { TruncatedTextWrapper };
-export { TutorialPanelWrapper };
-export { WizardWrapper };
-
-declare module '@cloudscape-design/test-utils-core/dist/dom' {
-   interface ElementWrapper {
-    
-/**
- * Returns the wrapper of the first ActionCard that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ActionCard.
- * If no matching ActionCard is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ActionCardWrapper | null}
- */
-findActionCard(selector?: string): ActionCardWrapper | null;
-
-/**
- * Returns an array of ActionCard wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ActionCards inside the current wrapper.
- * If no matching ActionCard is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ActionCardWrapper>}
- */
-findAllActionCards(selector?: string): Array<ActionCardWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ActionCard for the current element,
- * or the element itself if it is an instance of ActionCard.
- * If no ActionCard is found, returns \`null\`.
- *
- * @returns {ActionCardWrapper | null}
- */
-findClosestActionCard(): ActionCardWrapper | null;
-/**
- * Returns the wrapper of the first Alert that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Alert.
- * If no matching Alert is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AlertWrapper | null}
- */
-findAlert(selector?: string): AlertWrapper | null;
-
-/**
- * Returns an array of Alert wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Alerts inside the current wrapper.
- * If no matching Alert is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AlertWrapper>}
- */
-findAllAlerts(selector?: string): Array<AlertWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Alert for the current element,
- * or the element itself if it is an instance of Alert.
- * If no Alert is found, returns \`null\`.
- *
- * @returns {AlertWrapper | null}
- */
-findClosestAlert(): AlertWrapper | null;
-/**
- * Returns the wrapper of the first AnchorNavigation that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first AnchorNavigation.
- * If no matching AnchorNavigation is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AnchorNavigationWrapper | null}
- */
-findAnchorNavigation(selector?: string): AnchorNavigationWrapper | null;
-
-/**
- * Returns an array of AnchorNavigation wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the AnchorNavigations inside the current wrapper.
- * If no matching AnchorNavigation is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AnchorNavigationWrapper>}
- */
-findAllAnchorNavigations(selector?: string): Array<AnchorNavigationWrapper>;
-
-/**
- * Returns the wrapper of the closest parent AnchorNavigation for the current element,
- * or the element itself if it is an instance of AnchorNavigation.
- * If no AnchorNavigation is found, returns \`null\`.
- *
- * @returns {AnchorNavigationWrapper | null}
- */
-findClosestAnchorNavigation(): AnchorNavigationWrapper | null;
-/**
- * Returns the wrapper of the first Annotation that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Annotation.
- * If no matching Annotation is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AnnotationWrapper | null}
- */
-findAnnotation(selector?: string): AnnotationWrapper | null;
-
-/**
- * Returns an array of Annotation wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Annotations inside the current wrapper.
- * If no matching Annotation is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AnnotationWrapper>}
- */
-findAllAnnotations(selector?: string): Array<AnnotationWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Annotation for the current element,
- * or the element itself if it is an instance of Annotation.
- * If no Annotation is found, returns \`null\`.
- *
- * @returns {AnnotationWrapper | null}
- */
-findClosestAnnotation(): AnnotationWrapper | null;
-/**
- * Returns the wrapper of the first AppLayout that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first AppLayout.
- * If no matching AppLayout is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AppLayoutWrapper | null}
- */
-findAppLayout(selector?: string): AppLayoutWrapper | null;
-
-/**
- * Returns an array of AppLayout wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the AppLayouts inside the current wrapper.
- * If no matching AppLayout is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AppLayoutWrapper>}
- */
-findAllAppLayouts(selector?: string): Array<AppLayoutWrapper>;
-
-/**
- * Returns the wrapper of the closest parent AppLayout for the current element,
- * or the element itself if it is an instance of AppLayout.
- * If no AppLayout is found, returns \`null\`.
- *
- * @returns {AppLayoutWrapper | null}
- */
-findClosestAppLayout(): AppLayoutWrapper | null;
-/**
- * Returns the wrapper of the first AppLayoutToolbar that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first AppLayoutToolbar.
- * If no matching AppLayoutToolbar is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AppLayoutToolbarWrapper | null}
- */
-findAppLayoutToolbar(selector?: string): AppLayoutToolbarWrapper | null;
-
-/**
- * Returns an array of AppLayoutToolbar wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the AppLayoutToolbars inside the current wrapper.
- * If no matching AppLayoutToolbar is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AppLayoutToolbarWrapper>}
- */
-findAllAppLayoutToolbars(selector?: string): Array<AppLayoutToolbarWrapper>;
-
-/**
- * Returns the wrapper of the closest parent AppLayoutToolbar for the current element,
- * or the element itself if it is an instance of AppLayoutToolbar.
- * If no AppLayoutToolbar is found, returns \`null\`.
- *
- * @returns {AppLayoutToolbarWrapper | null}
- */
-findClosestAppLayoutToolbar(): AppLayoutToolbarWrapper | null;
-/**
- * Returns the wrapper of the first AreaChart that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first AreaChart.
- * If no matching AreaChart is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AreaChartWrapper | null}
- */
-findAreaChart(selector?: string): AreaChartWrapper | null;
-
-/**
- * Returns an array of AreaChart wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the AreaCharts inside the current wrapper.
- * If no matching AreaChart is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AreaChartWrapper>}
- */
-findAllAreaCharts(selector?: string): Array<AreaChartWrapper>;
-
-/**
- * Returns the wrapper of the closest parent AreaChart for the current element,
- * or the element itself if it is an instance of AreaChart.
- * If no AreaChart is found, returns \`null\`.
- *
- * @returns {AreaChartWrapper | null}
- */
-findClosestAreaChart(): AreaChartWrapper | null;
-/**
- * Returns the wrapper of the first AttributeEditor that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first AttributeEditor.
- * If no matching AttributeEditor is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AttributeEditorWrapper | null}
- */
-findAttributeEditor(selector?: string): AttributeEditorWrapper | null;
-
-/**
- * Returns an array of AttributeEditor wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the AttributeEditors inside the current wrapper.
- * If no matching AttributeEditor is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AttributeEditorWrapper>}
- */
-findAllAttributeEditors(selector?: string): Array<AttributeEditorWrapper>;
-
-/**
- * Returns the wrapper of the closest parent AttributeEditor for the current element,
- * or the element itself if it is an instance of AttributeEditor.
- * If no AttributeEditor is found, returns \`null\`.
- *
- * @returns {AttributeEditorWrapper | null}
- */
-findClosestAttributeEditor(): AttributeEditorWrapper | null;
-/**
- * Returns the wrapper of the first Autosuggest that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Autosuggest.
- * If no matching Autosuggest is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AutosuggestWrapper | null}
- */
-findAutosuggest(selector?: string): AutosuggestWrapper | null;
-
-/**
- * Returns an array of Autosuggest wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Autosuggests inside the current wrapper.
- * If no matching Autosuggest is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AutosuggestWrapper>}
- */
-findAllAutosuggests(selector?: string): Array<AutosuggestWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Autosuggest for the current element,
- * or the element itself if it is an instance of Autosuggest.
- * If no Autosuggest is found, returns \`null\`.
- *
- * @returns {AutosuggestWrapper | null}
- */
-findClosestAutosuggest(): AutosuggestWrapper | null;
-/**
- * Returns the wrapper of the first Badge that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Badge.
- * If no matching Badge is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {BadgeWrapper | null}
- */
-findBadge(selector?: string): BadgeWrapper | null;
-
-/**
- * Returns an array of Badge wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Badges inside the current wrapper.
- * If no matching Badge is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<BadgeWrapper>}
- */
-findAllBadges(selector?: string): Array<BadgeWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Badge for the current element,
- * or the element itself if it is an instance of Badge.
- * If no Badge is found, returns \`null\`.
- *
- * @returns {BadgeWrapper | null}
- */
-findClosestBadge(): BadgeWrapper | null;
-/**
- * Returns the wrapper of the first BarChart that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first BarChart.
- * If no matching BarChart is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {BarChartWrapper | null}
- */
-findBarChart(selector?: string): BarChartWrapper | null;
-
-/**
- * Returns an array of BarChart wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the BarCharts inside the current wrapper.
- * If no matching BarChart is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<BarChartWrapper>}
- */
-findAllBarCharts(selector?: string): Array<BarChartWrapper>;
-
-/**
- * Returns the wrapper of the closest parent BarChart for the current element,
- * or the element itself if it is an instance of BarChart.
- * If no BarChart is found, returns \`null\`.
- *
- * @returns {BarChartWrapper | null}
- */
-findClosestBarChart(): BarChartWrapper | null;
-/**
- * Returns the wrapper of the first Box that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Box.
- * If no matching Box is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {BoxWrapper | null}
- */
-findBox(selector?: string): BoxWrapper | null;
-
-/**
- * Returns an array of Box wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Boxes inside the current wrapper.
- * If no matching Box is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<BoxWrapper>}
- */
-findAllBoxes(selector?: string): Array<BoxWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Box for the current element,
- * or the element itself if it is an instance of Box.
- * If no Box is found, returns \`null\`.
- *
- * @returns {BoxWrapper | null}
- */
-findClosestBox(): BoxWrapper | null;
-/**
- * Returns the wrapper of the first BreadcrumbGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first BreadcrumbGroup.
- * If no matching BreadcrumbGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {BreadcrumbGroupWrapper | null}
- */
-findBreadcrumbGroup(selector?: string): BreadcrumbGroupWrapper | null;
-
-/**
- * Returns an array of BreadcrumbGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the BreadcrumbGroups inside the current wrapper.
- * If no matching BreadcrumbGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<BreadcrumbGroupWrapper>}
- */
-findAllBreadcrumbGroups(selector?: string): Array<BreadcrumbGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent BreadcrumbGroup for the current element,
- * or the element itself if it is an instance of BreadcrumbGroup.
- * If no BreadcrumbGroup is found, returns \`null\`.
- *
- * @returns {BreadcrumbGroupWrapper | null}
- */
-findClosestBreadcrumbGroup(): BreadcrumbGroupWrapper | null;
-/**
- * Returns the wrapper of the first Button that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Button.
- * If no matching Button is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ButtonWrapper | null}
- */
-findButton(selector?: string): ButtonWrapper | null;
-
-/**
- * Returns an array of Button wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Buttons inside the current wrapper.
- * If no matching Button is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ButtonWrapper>}
- */
-findAllButtons(selector?: string): Array<ButtonWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Button for the current element,
- * or the element itself if it is an instance of Button.
- * If no Button is found, returns \`null\`.
- *
- * @returns {ButtonWrapper | null}
- */
-findClosestButton(): ButtonWrapper | null;
-/**
- * Returns the wrapper of the first ButtonDropdown that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ButtonDropdown.
- * If no matching ButtonDropdown is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ButtonDropdownWrapper | null}
- */
-findButtonDropdown(selector?: string): ButtonDropdownWrapper | null;
-
-/**
- * Returns an array of ButtonDropdown wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ButtonDropdowns inside the current wrapper.
- * If no matching ButtonDropdown is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ButtonDropdownWrapper>}
- */
-findAllButtonDropdowns(selector?: string): Array<ButtonDropdownWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ButtonDropdown for the current element,
- * or the element itself if it is an instance of ButtonDropdown.
- * If no ButtonDropdown is found, returns \`null\`.
- *
- * @returns {ButtonDropdownWrapper | null}
- */
-findClosestButtonDropdown(): ButtonDropdownWrapper | null;
-/**
- * Returns the wrapper of the first ButtonGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ButtonGroup.
- * If no matching ButtonGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ButtonGroupWrapper | null}
- */
-findButtonGroup(selector?: string): ButtonGroupWrapper | null;
-
-/**
- * Returns an array of ButtonGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ButtonGroups inside the current wrapper.
- * If no matching ButtonGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ButtonGroupWrapper>}
- */
-findAllButtonGroups(selector?: string): Array<ButtonGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ButtonGroup for the current element,
- * or the element itself if it is an instance of ButtonGroup.
- * If no ButtonGroup is found, returns \`null\`.
- *
- * @returns {ButtonGroupWrapper | null}
- */
-findClosestButtonGroup(): ButtonGroupWrapper | null;
-/**
- * Returns the wrapper of the first Calendar that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Calendar.
- * If no matching Calendar is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CalendarWrapper | null}
- */
-findCalendar(selector?: string): CalendarWrapper | null;
-
-/**
- * Returns an array of Calendar wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Calendars inside the current wrapper.
- * If no matching Calendar is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CalendarWrapper>}
- */
-findAllCalendars(selector?: string): Array<CalendarWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Calendar for the current element,
- * or the element itself if it is an instance of Calendar.
- * If no Calendar is found, returns \`null\`.
- *
- * @returns {CalendarWrapper | null}
- */
-findClosestCalendar(): CalendarWrapper | null;
-/**
- * Returns the wrapper of the first Cards that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Cards.
- * If no matching Cards is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CardsWrapper | null}
- */
-findCards(selector?: string): CardsWrapper | null;
-
-/**
- * Returns an array of Cards wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Cards inside the current wrapper.
- * If no matching Cards is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CardsWrapper>}
- */
-findAllCards(selector?: string): Array<CardsWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Cards for the current element,
- * or the element itself if it is an instance of Cards.
- * If no Cards is found, returns \`null\`.
- *
- * @returns {CardsWrapper | null}
- */
-findClosestCards(): CardsWrapper | null;
-/**
- * Returns the wrapper of the first Checkbox that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Checkbox.
- * If no matching Checkbox is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CheckboxWrapper | null}
- */
-findCheckbox(selector?: string): CheckboxWrapper | null;
-
-/**
- * Returns an array of Checkbox wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Checkboxes inside the current wrapper.
- * If no matching Checkbox is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CheckboxWrapper>}
- */
-findAllCheckboxes(selector?: string): Array<CheckboxWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Checkbox for the current element,
- * or the element itself if it is an instance of Checkbox.
- * If no Checkbox is found, returns \`null\`.
- *
- * @returns {CheckboxWrapper | null}
- */
-findClosestCheckbox(): CheckboxWrapper | null;
-/**
- * Returns the wrapper of the first CodeEditor that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first CodeEditor.
- * If no matching CodeEditor is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CodeEditorWrapper | null}
- */
-findCodeEditor(selector?: string): CodeEditorWrapper | null;
-
-/**
- * Returns an array of CodeEditor wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the CodeEditors inside the current wrapper.
- * If no matching CodeEditor is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CodeEditorWrapper>}
- */
-findAllCodeEditors(selector?: string): Array<CodeEditorWrapper>;
-
-/**
- * Returns the wrapper of the closest parent CodeEditor for the current element,
- * or the element itself if it is an instance of CodeEditor.
- * If no CodeEditor is found, returns \`null\`.
- *
- * @returns {CodeEditorWrapper | null}
- */
-findClosestCodeEditor(): CodeEditorWrapper | null;
-/**
- * Returns the wrapper of the first CollectionPreferences that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first CollectionPreferences.
- * If no matching CollectionPreferences is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CollectionPreferencesWrapper | null}
- */
-findCollectionPreferences(selector?: string): CollectionPreferencesWrapper | null;
-
-/**
- * Returns an array of CollectionPreferences wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the CollectionPreferences inside the current wrapper.
- * If no matching CollectionPreferences is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CollectionPreferencesWrapper>}
- */
-findAllCollectionPreferences(selector?: string): Array<CollectionPreferencesWrapper>;
-
-/**
- * Returns the wrapper of the closest parent CollectionPreferences for the current element,
- * or the element itself if it is an instance of CollectionPreferences.
- * If no CollectionPreferences is found, returns \`null\`.
- *
- * @returns {CollectionPreferencesWrapper | null}
- */
-findClosestCollectionPreferences(): CollectionPreferencesWrapper | null;
-/**
- * Returns the wrapper of the first ColumnLayout that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ColumnLayout.
- * If no matching ColumnLayout is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ColumnLayoutWrapper | null}
- */
-findColumnLayout(selector?: string): ColumnLayoutWrapper | null;
-
-/**
- * Returns an array of ColumnLayout wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ColumnLayouts inside the current wrapper.
- * If no matching ColumnLayout is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ColumnLayoutWrapper>}
- */
-findAllColumnLayouts(selector?: string): Array<ColumnLayoutWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ColumnLayout for the current element,
- * or the element itself if it is an instance of ColumnLayout.
- * If no ColumnLayout is found, returns \`null\`.
- *
- * @returns {ColumnLayoutWrapper | null}
- */
-findClosestColumnLayout(): ColumnLayoutWrapper | null;
-/**
- * Returns the wrapper of the first Container that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Container.
- * If no matching Container is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ContainerWrapper | null}
- */
-findContainer(selector?: string): ContainerWrapper | null;
-
-/**
- * Returns an array of Container wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Containers inside the current wrapper.
- * If no matching Container is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ContainerWrapper>}
- */
-findAllContainers(selector?: string): Array<ContainerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Container for the current element,
- * or the element itself if it is an instance of Container.
- * If no Container is found, returns \`null\`.
- *
- * @returns {ContainerWrapper | null}
- */
-findClosestContainer(): ContainerWrapper | null;
-/**
- * Returns the wrapper of the first ContentLayout that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ContentLayout.
- * If no matching ContentLayout is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ContentLayoutWrapper | null}
- */
-findContentLayout(selector?: string): ContentLayoutWrapper | null;
-
-/**
- * Returns an array of ContentLayout wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ContentLayouts inside the current wrapper.
- * If no matching ContentLayout is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ContentLayoutWrapper>}
- */
-findAllContentLayouts(selector?: string): Array<ContentLayoutWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ContentLayout for the current element,
- * or the element itself if it is an instance of ContentLayout.
- * If no ContentLayout is found, returns \`null\`.
- *
- * @returns {ContentLayoutWrapper | null}
- */
-findClosestContentLayout(): ContentLayoutWrapper | null;
-/**
- * Returns the wrapper of the first CopyToClipboard that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first CopyToClipboard.
- * If no matching CopyToClipboard is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CopyToClipboardWrapper | null}
- */
-findCopyToClipboard(selector?: string): CopyToClipboardWrapper | null;
-
-/**
- * Returns an array of CopyToClipboard wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the CopyToClipboards inside the current wrapper.
- * If no matching CopyToClipboard is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CopyToClipboardWrapper>}
- */
-findAllCopyToClipboards(selector?: string): Array<CopyToClipboardWrapper>;
-
-/**
- * Returns the wrapper of the closest parent CopyToClipboard for the current element,
- * or the element itself if it is an instance of CopyToClipboard.
- * If no CopyToClipboard is found, returns \`null\`.
- *
- * @returns {CopyToClipboardWrapper | null}
- */
-findClosestCopyToClipboard(): CopyToClipboardWrapper | null;
-/**
- * Returns the wrapper of the first DateInput that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first DateInput.
- * If no matching DateInput is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DateInputWrapper | null}
- */
-findDateInput(selector?: string): DateInputWrapper | null;
-
-/**
- * Returns an array of DateInput wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the DateInputs inside the current wrapper.
- * If no matching DateInput is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DateInputWrapper>}
- */
-findAllDateInputs(selector?: string): Array<DateInputWrapper>;
-
-/**
- * Returns the wrapper of the closest parent DateInput for the current element,
- * or the element itself if it is an instance of DateInput.
- * If no DateInput is found, returns \`null\`.
- *
- * @returns {DateInputWrapper | null}
- */
-findClosestDateInput(): DateInputWrapper | null;
-/**
- * Returns the wrapper of the first DatePicker that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first DatePicker.
- * If no matching DatePicker is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DatePickerWrapper | null}
- */
-findDatePicker(selector?: string): DatePickerWrapper | null;
-
-/**
- * Returns an array of DatePicker wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the DatePickers inside the current wrapper.
- * If no matching DatePicker is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DatePickerWrapper>}
- */
-findAllDatePickers(selector?: string): Array<DatePickerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent DatePicker for the current element,
- * or the element itself if it is an instance of DatePicker.
- * If no DatePicker is found, returns \`null\`.
- *
- * @returns {DatePickerWrapper | null}
- */
-findClosestDatePicker(): DatePickerWrapper | null;
-/**
- * Returns the wrapper of the first DateRangePicker that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first DateRangePicker.
- * If no matching DateRangePicker is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DateRangePickerWrapper | null}
- */
-findDateRangePicker(selector?: string): DateRangePickerWrapper | null;
-
-/**
- * Returns an array of DateRangePicker wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the DateRangePickers inside the current wrapper.
- * If no matching DateRangePicker is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DateRangePickerWrapper>}
- */
-findAllDateRangePickers(selector?: string): Array<DateRangePickerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent DateRangePicker for the current element,
- * or the element itself if it is an instance of DateRangePicker.
- * If no DateRangePicker is found, returns \`null\`.
- *
- * @returns {DateRangePickerWrapper | null}
- */
-findClosestDateRangePicker(): DateRangePickerWrapper | null;
-/**
- * Returns the wrapper of the first Divider that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Divider.
- * If no matching Divider is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DividerWrapper | null}
- */
-findDivider(selector?: string): DividerWrapper | null;
-
-/**
- * Returns an array of Divider wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Dividers inside the current wrapper.
- * If no matching Divider is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DividerWrapper>}
- */
-findAllDividers(selector?: string): Array<DividerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Divider for the current element,
- * or the element itself if it is an instance of Divider.
- * If no Divider is found, returns \`null\`.
- *
- * @returns {DividerWrapper | null}
- */
-findClosestDivider(): DividerWrapper | null;
-/**
- * Returns the wrapper of the first Drawer that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Drawer.
- * If no matching Drawer is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DrawerWrapper | null}
- */
-findDrawer(selector?: string): DrawerWrapper | null;
-
-/**
- * Returns an array of Drawer wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Drawers inside the current wrapper.
- * If no matching Drawer is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DrawerWrapper>}
- */
-findAllDrawers(selector?: string): Array<DrawerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Drawer for the current element,
- * or the element itself if it is an instance of Drawer.
- * If no Drawer is found, returns \`null\`.
- *
- * @returns {DrawerWrapper | null}
- */
-findClosestDrawer(): DrawerWrapper | null;
-/**
- * Returns the wrapper of the first Dropdown that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Dropdown.
- * If no matching Dropdown is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DropdownWrapper | null}
- */
-findDropdown(selector?: string): DropdownWrapper | null;
-
-/**
- * Returns an array of Dropdown wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Dropdowns inside the current wrapper.
- * If no matching Dropdown is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DropdownWrapper>}
- */
-findAllDropdowns(selector?: string): Array<DropdownWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Dropdown for the current element,
- * or the element itself if it is an instance of Dropdown.
- * If no Dropdown is found, returns \`null\`.
- *
- * @returns {DropdownWrapper | null}
- */
-findClosestDropdown(): DropdownWrapper | null;
-/**
- * Returns the wrapper of the first ErrorBoundary that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ErrorBoundary.
- * If no matching ErrorBoundary is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ErrorBoundaryWrapper | null}
- */
-findErrorBoundary(selector?: string): ErrorBoundaryWrapper | null;
-
-/**
- * Returns an array of ErrorBoundary wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ErrorBoundaries inside the current wrapper.
- * If no matching ErrorBoundary is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ErrorBoundaryWrapper>}
- */
-findAllErrorBoundaries(selector?: string): Array<ErrorBoundaryWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ErrorBoundary for the current element,
- * or the element itself if it is an instance of ErrorBoundary.
- * If no ErrorBoundary is found, returns \`null\`.
- *
- * @returns {ErrorBoundaryWrapper | null}
- */
-findClosestErrorBoundary(): ErrorBoundaryWrapper | null;
-/**
- * Returns the wrapper of the first ExpandableSection that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ExpandableSection.
- * If no matching ExpandableSection is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ExpandableSectionWrapper | null}
- */
-findExpandableSection(selector?: string): ExpandableSectionWrapper | null;
-
-/**
- * Returns an array of ExpandableSection wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ExpandableSections inside the current wrapper.
- * If no matching ExpandableSection is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ExpandableSectionWrapper>}
- */
-findAllExpandableSections(selector?: string): Array<ExpandableSectionWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ExpandableSection for the current element,
- * or the element itself if it is an instance of ExpandableSection.
- * If no ExpandableSection is found, returns \`null\`.
- *
- * @returns {ExpandableSectionWrapper | null}
- */
-findClosestExpandableSection(): ExpandableSectionWrapper | null;
-/**
- * Returns the wrapper of the first FileDropzone that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first FileDropzone.
- * If no matching FileDropzone is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FileDropzoneWrapper | null}
- */
-findFileDropzone(selector?: string): FileDropzoneWrapper | null;
-
-/**
- * Returns an array of FileDropzone wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the FileDropzones inside the current wrapper.
- * If no matching FileDropzone is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FileDropzoneWrapper>}
- */
-findAllFileDropzones(selector?: string): Array<FileDropzoneWrapper>;
-
-/**
- * Returns the wrapper of the closest parent FileDropzone for the current element,
- * or the element itself if it is an instance of FileDropzone.
- * If no FileDropzone is found, returns \`null\`.
- *
- * @returns {FileDropzoneWrapper | null}
- */
-findClosestFileDropzone(): FileDropzoneWrapper | null;
-/**
- * Returns the wrapper of the first FileInput that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first FileInput.
- * If no matching FileInput is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FileInputWrapper | null}
- */
-findFileInput(selector?: string): FileInputWrapper | null;
-
-/**
- * Returns an array of FileInput wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the FileInputs inside the current wrapper.
- * If no matching FileInput is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FileInputWrapper>}
- */
-findAllFileInputs(selector?: string): Array<FileInputWrapper>;
-
-/**
- * Returns the wrapper of the closest parent FileInput for the current element,
- * or the element itself if it is an instance of FileInput.
- * If no FileInput is found, returns \`null\`.
- *
- * @returns {FileInputWrapper | null}
- */
-findClosestFileInput(): FileInputWrapper | null;
-/**
- * Returns the wrapper of the first FileTokenGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first FileTokenGroup.
- * If no matching FileTokenGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FileTokenGroupWrapper | null}
- */
-findFileTokenGroup(selector?: string): FileTokenGroupWrapper | null;
-
-/**
- * Returns an array of FileTokenGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the FileTokenGroups inside the current wrapper.
- * If no matching FileTokenGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FileTokenGroupWrapper>}
- */
-findAllFileTokenGroups(selector?: string): Array<FileTokenGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent FileTokenGroup for the current element,
- * or the element itself if it is an instance of FileTokenGroup.
- * If no FileTokenGroup is found, returns \`null\`.
- *
- * @returns {FileTokenGroupWrapper | null}
- */
-findClosestFileTokenGroup(): FileTokenGroupWrapper | null;
-/**
- * Returns the wrapper of the first FileUpload that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first FileUpload.
- * If no matching FileUpload is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FileUploadWrapper | null}
- */
-findFileUpload(selector?: string): FileUploadWrapper | null;
-
-/**
- * Returns an array of FileUpload wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the FileUploads inside the current wrapper.
- * If no matching FileUpload is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FileUploadWrapper>}
- */
-findAllFileUploads(selector?: string): Array<FileUploadWrapper>;
-
-/**
- * Returns the wrapper of the closest parent FileUpload for the current element,
- * or the element itself if it is an instance of FileUpload.
- * If no FileUpload is found, returns \`null\`.
- *
- * @returns {FileUploadWrapper | null}
- */
-findClosestFileUpload(): FileUploadWrapper | null;
-/**
- * Returns the wrapper of the first Flashbar that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Flashbar.
- * If no matching Flashbar is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FlashbarWrapper | null}
- */
-findFlashbar(selector?: string): FlashbarWrapper | null;
-
-/**
- * Returns an array of Flashbar wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Flashbars inside the current wrapper.
- * If no matching Flashbar is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FlashbarWrapper>}
- */
-findAllFlashbars(selector?: string): Array<FlashbarWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Flashbar for the current element,
- * or the element itself if it is an instance of Flashbar.
- * If no Flashbar is found, returns \`null\`.
- *
- * @returns {FlashbarWrapper | null}
- */
-findClosestFlashbar(): FlashbarWrapper | null;
-/**
- * Returns the wrapper of the first Form that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Form.
- * If no matching Form is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FormWrapper | null}
- */
-findForm(selector?: string): FormWrapper | null;
-
-/**
- * Returns an array of Form wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Forms inside the current wrapper.
- * If no matching Form is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FormWrapper>}
- */
-findAllForms(selector?: string): Array<FormWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Form for the current element,
- * or the element itself if it is an instance of Form.
- * If no Form is found, returns \`null\`.
- *
- * @returns {FormWrapper | null}
- */
-findClosestForm(): FormWrapper | null;
-/**
- * Returns the wrapper of the first FormField that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first FormField.
- * If no matching FormField is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FormFieldWrapper | null}
- */
-findFormField(selector?: string): FormFieldWrapper | null;
-
-/**
- * Returns an array of FormField wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the FormFields inside the current wrapper.
- * If no matching FormField is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FormFieldWrapper>}
- */
-findAllFormFields(selector?: string): Array<FormFieldWrapper>;
-
-/**
- * Returns the wrapper of the closest parent FormField for the current element,
- * or the element itself if it is an instance of FormField.
- * If no FormField is found, returns \`null\`.
- *
- * @returns {FormFieldWrapper | null}
- */
-findClosestFormField(): FormFieldWrapper | null;
-/**
- * Returns the wrapper of the first Grid that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Grid.
- * If no matching Grid is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {GridWrapper | null}
- */
-findGrid(selector?: string): GridWrapper | null;
-
-/**
- * Returns an array of Grid wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Grids inside the current wrapper.
- * If no matching Grid is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<GridWrapper>}
- */
-findAllGrids(selector?: string): Array<GridWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Grid for the current element,
- * or the element itself if it is an instance of Grid.
- * If no Grid is found, returns \`null\`.
- *
- * @returns {GridWrapper | null}
- */
-findClosestGrid(): GridWrapper | null;
-/**
- * Returns the wrapper of the first Header that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Header.
- * If no matching Header is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {HeaderWrapper | null}
- */
-findHeader(selector?: string): HeaderWrapper | null;
-
-/**
- * Returns an array of Header wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Headers inside the current wrapper.
- * If no matching Header is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<HeaderWrapper>}
- */
-findAllHeaders(selector?: string): Array<HeaderWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Header for the current element,
- * or the element itself if it is an instance of Header.
- * If no Header is found, returns \`null\`.
- *
- * @returns {HeaderWrapper | null}
- */
-findClosestHeader(): HeaderWrapper | null;
-/**
- * Returns the wrapper of the first HelpPanel that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first HelpPanel.
- * If no matching HelpPanel is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {HelpPanelWrapper | null}
- */
-findHelpPanel(selector?: string): HelpPanelWrapper | null;
-
-/**
- * Returns an array of HelpPanel wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the HelpPanels inside the current wrapper.
- * If no matching HelpPanel is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<HelpPanelWrapper>}
- */
-findAllHelpPanels(selector?: string): Array<HelpPanelWrapper>;
-
-/**
- * Returns the wrapper of the closest parent HelpPanel for the current element,
- * or the element itself if it is an instance of HelpPanel.
- * If no HelpPanel is found, returns \`null\`.
- *
- * @returns {HelpPanelWrapper | null}
- */
-findClosestHelpPanel(): HelpPanelWrapper | null;
-/**
- * Returns the wrapper of the first Hotspot that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Hotspot.
- * If no matching Hotspot is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {HotspotWrapper | null}
- */
-findHotspot(selector?: string): HotspotWrapper | null;
-
-/**
- * Returns an array of Hotspot wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Hotspots inside the current wrapper.
- * If no matching Hotspot is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<HotspotWrapper>}
- */
-findAllHotspots(selector?: string): Array<HotspotWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Hotspot for the current element,
- * or the element itself if it is an instance of Hotspot.
- * If no Hotspot is found, returns \`null\`.
- *
- * @returns {HotspotWrapper | null}
- */
-findClosestHotspot(): HotspotWrapper | null;
-/**
- * Returns the wrapper of the first Icon that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Icon.
- * If no matching Icon is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {IconWrapper | null}
- */
-findIcon(selector?: string): IconWrapper | null;
-
-/**
- * Returns an array of Icon wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Icons inside the current wrapper.
- * If no matching Icon is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<IconWrapper>}
- */
-findAllIcons(selector?: string): Array<IconWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Icon for the current element,
- * or the element itself if it is an instance of Icon.
- * If no Icon is found, returns \`null\`.
- *
- * @returns {IconWrapper | null}
- */
-findClosestIcon(): IconWrapper | null;
-/**
- * Returns the wrapper of the first Input that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Input.
- * If no matching Input is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {InputWrapper | null}
- */
-findInput(selector?: string): InputWrapper | null;
-
-/**
- * Returns an array of Input wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Inputs inside the current wrapper.
- * If no matching Input is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<InputWrapper>}
- */
-findAllInputs(selector?: string): Array<InputWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Input for the current element,
- * or the element itself if it is an instance of Input.
- * If no Input is found, returns \`null\`.
- *
- * @returns {InputWrapper | null}
- */
-findClosestInput(): InputWrapper | null;
-/**
- * Returns the wrapper of the first ItemCard that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ItemCard.
- * If no matching ItemCard is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ItemCardWrapper | null}
- */
-findItemCard(selector?: string): ItemCardWrapper | null;
-
-/**
- * Returns an array of ItemCard wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ItemCards inside the current wrapper.
- * If no matching ItemCard is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ItemCardWrapper>}
- */
-findAllItemCards(selector?: string): Array<ItemCardWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ItemCard for the current element,
- * or the element itself if it is an instance of ItemCard.
- * If no ItemCard is found, returns \`null\`.
- *
- * @returns {ItemCardWrapper | null}
- */
-findClosestItemCard(): ItemCardWrapper | null;
-/**
- * Returns the wrapper of the first KeyValuePairs that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first KeyValuePairs.
- * If no matching KeyValuePairs is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {KeyValuePairsWrapper | null}
- */
-findKeyValuePairs(selector?: string): KeyValuePairsWrapper | null;
-
-/**
- * Returns an array of KeyValuePairs wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the KeyValuePairs inside the current wrapper.
- * If no matching KeyValuePairs is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<KeyValuePairsWrapper>}
- */
-findAllKeyValuePairs(selector?: string): Array<KeyValuePairsWrapper>;
-
-/**
- * Returns the wrapper of the closest parent KeyValuePairs for the current element,
- * or the element itself if it is an instance of KeyValuePairs.
- * If no KeyValuePairs is found, returns \`null\`.
- *
- * @returns {KeyValuePairsWrapper | null}
- */
-findClosestKeyValuePairs(): KeyValuePairsWrapper | null;
-/**
- * Returns the wrapper of the first LineChart that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first LineChart.
- * If no matching LineChart is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {LineChartWrapper | null}
- */
-findLineChart(selector?: string): LineChartWrapper | null;
-
-/**
- * Returns an array of LineChart wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the LineCharts inside the current wrapper.
- * If no matching LineChart is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<LineChartWrapper>}
- */
-findAllLineCharts(selector?: string): Array<LineChartWrapper>;
-
-/**
- * Returns the wrapper of the closest parent LineChart for the current element,
- * or the element itself if it is an instance of LineChart.
- * If no LineChart is found, returns \`null\`.
- *
- * @returns {LineChartWrapper | null}
- */
-findClosestLineChart(): LineChartWrapper | null;
-/**
- * Returns the wrapper of the first Link that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Link.
- * If no matching Link is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {LinkWrapper | null}
- */
-findLink(selector?: string): LinkWrapper | null;
-
-/**
- * Returns an array of Link wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Links inside the current wrapper.
- * If no matching Link is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<LinkWrapper>}
- */
-findAllLinks(selector?: string): Array<LinkWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Link for the current element,
- * or the element itself if it is an instance of Link.
- * If no Link is found, returns \`null\`.
- *
- * @returns {LinkWrapper | null}
- */
-findClosestLink(): LinkWrapper | null;
-/**
- * Returns the wrapper of the first List that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first List.
- * If no matching List is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ListWrapper | null}
- */
-findList(selector?: string): ListWrapper | null;
-
-/**
- * Returns an array of List wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Lists inside the current wrapper.
- * If no matching List is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ListWrapper>}
- */
-findAllLists(selector?: string): Array<ListWrapper>;
-
-/**
- * Returns the wrapper of the closest parent List for the current element,
- * or the element itself if it is an instance of List.
- * If no List is found, returns \`null\`.
- *
- * @returns {ListWrapper | null}
- */
-findClosestList(): ListWrapper | null;
-/**
- * Returns the wrapper of the first LiveRegion that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first LiveRegion.
- * If no matching LiveRegion is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {LiveRegionWrapper | null}
- */
-findLiveRegion(selector?: string): LiveRegionWrapper | null;
-
-/**
- * Returns an array of LiveRegion wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the LiveRegions inside the current wrapper.
- * If no matching LiveRegion is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<LiveRegionWrapper>}
- */
-findAllLiveRegions(selector?: string): Array<LiveRegionWrapper>;
-
-/**
- * Returns the wrapper of the closest parent LiveRegion for the current element,
- * or the element itself if it is an instance of LiveRegion.
- * If no LiveRegion is found, returns \`null\`.
- *
- * @returns {LiveRegionWrapper | null}
- */
-findClosestLiveRegion(): LiveRegionWrapper | null;
-/**
- * Returns the wrapper of the first MixedLineBarChart that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first MixedLineBarChart.
- * If no matching MixedLineBarChart is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {MixedLineBarChartWrapper | null}
- */
-findMixedLineBarChart(selector?: string): MixedLineBarChartWrapper | null;
-
-/**
- * Returns an array of MixedLineBarChart wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the MixedLineBarCharts inside the current wrapper.
- * If no matching MixedLineBarChart is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<MixedLineBarChartWrapper>}
- */
-findAllMixedLineBarCharts(selector?: string): Array<MixedLineBarChartWrapper>;
-
-/**
- * Returns the wrapper of the closest parent MixedLineBarChart for the current element,
- * or the element itself if it is an instance of MixedLineBarChart.
- * If no MixedLineBarChart is found, returns \`null\`.
- *
- * @returns {MixedLineBarChartWrapper | null}
- */
-findClosestMixedLineBarChart(): MixedLineBarChartWrapper | null;
-/**
- * Returns the wrapper of the first Modal that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Modal.
- * If no matching Modal is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ModalWrapper | null}
- */
-findModal(selector?: string): ModalWrapper | null;
-
-/**
- * Returns an array of Modal wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Modals inside the current wrapper.
- * If no matching Modal is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ModalWrapper>}
- */
-findAllModals(selector?: string): Array<ModalWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Modal for the current element,
- * or the element itself if it is an instance of Modal.
- * If no Modal is found, returns \`null\`.
- *
- * @returns {ModalWrapper | null}
- */
-findClosestModal(): ModalWrapper | null;
-/**
- * Returns the wrapper of the first Multiselect that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Multiselect.
- * If no matching Multiselect is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {MultiselectWrapper | null}
- */
-findMultiselect(selector?: string): MultiselectWrapper | null;
-
-/**
- * Returns an array of Multiselect wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Multiselects inside the current wrapper.
- * If no matching Multiselect is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<MultiselectWrapper>}
- */
-findAllMultiselects(selector?: string): Array<MultiselectWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Multiselect for the current element,
- * or the element itself if it is an instance of Multiselect.
- * If no Multiselect is found, returns \`null\`.
- *
- * @returns {MultiselectWrapper | null}
- */
-findClosestMultiselect(): MultiselectWrapper | null;
-/**
- * Returns the wrapper of the first NavigableGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first NavigableGroup.
- * If no matching NavigableGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {NavigableGroupWrapper | null}
- */
-findNavigableGroup(selector?: string): NavigableGroupWrapper | null;
-
-/**
- * Returns an array of NavigableGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the NavigableGroups inside the current wrapper.
- * If no matching NavigableGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<NavigableGroupWrapper>}
- */
-findAllNavigableGroups(selector?: string): Array<NavigableGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent NavigableGroup for the current element,
- * or the element itself if it is an instance of NavigableGroup.
- * If no NavigableGroup is found, returns \`null\`.
- *
- * @returns {NavigableGroupWrapper | null}
- */
-findClosestNavigableGroup(): NavigableGroupWrapper | null;
-/**
- * Returns the wrapper of the first Pagination that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Pagination.
- * If no matching Pagination is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PaginationWrapper | null}
- */
-findPagination(selector?: string): PaginationWrapper | null;
-
-/**
- * Returns an array of Pagination wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Paginations inside the current wrapper.
- * If no matching Pagination is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PaginationWrapper>}
- */
-findAllPaginations(selector?: string): Array<PaginationWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Pagination for the current element,
- * or the element itself if it is an instance of Pagination.
- * If no Pagination is found, returns \`null\`.
- *
- * @returns {PaginationWrapper | null}
- */
-findClosestPagination(): PaginationWrapper | null;
-/**
- * Returns the wrapper of the first PanelLayout that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first PanelLayout.
- * If no matching PanelLayout is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PanelLayoutWrapper | null}
- */
-findPanelLayout(selector?: string): PanelLayoutWrapper | null;
-
-/**
- * Returns an array of PanelLayout wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the PanelLayouts inside the current wrapper.
- * If no matching PanelLayout is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PanelLayoutWrapper>}
- */
-findAllPanelLayouts(selector?: string): Array<PanelLayoutWrapper>;
-
-/**
- * Returns the wrapper of the closest parent PanelLayout for the current element,
- * or the element itself if it is an instance of PanelLayout.
- * If no PanelLayout is found, returns \`null\`.
- *
- * @returns {PanelLayoutWrapper | null}
- */
-findClosestPanelLayout(): PanelLayoutWrapper | null;
-/**
- * Returns the wrapper of the first PieChart that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first PieChart.
- * If no matching PieChart is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PieChartWrapper | null}
- */
-findPieChart(selector?: string): PieChartWrapper | null;
-
-/**
- * Returns an array of PieChart wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the PieCharts inside the current wrapper.
- * If no matching PieChart is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PieChartWrapper>}
- */
-findAllPieCharts(selector?: string): Array<PieChartWrapper>;
-
-/**
- * Returns the wrapper of the closest parent PieChart for the current element,
- * or the element itself if it is an instance of PieChart.
- * If no PieChart is found, returns \`null\`.
- *
- * @returns {PieChartWrapper | null}
- */
-findClosestPieChart(): PieChartWrapper | null;
-/**
- * Returns the wrapper of the first Popover that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Popover.
- * If no matching Popover is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PopoverWrapper | null}
- */
-findPopover(selector?: string): PopoverWrapper | null;
-
-/**
- * Returns an array of Popover wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Popovers inside the current wrapper.
- * If no matching Popover is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PopoverWrapper>}
- */
-findAllPopovers(selector?: string): Array<PopoverWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Popover for the current element,
- * or the element itself if it is an instance of Popover.
- * If no Popover is found, returns \`null\`.
- *
- * @returns {PopoverWrapper | null}
- */
-findClosestPopover(): PopoverWrapper | null;
-/**
- * Returns the wrapper of the first ProgressBar that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ProgressBar.
- * If no matching ProgressBar is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ProgressBarWrapper | null}
- */
-findProgressBar(selector?: string): ProgressBarWrapper | null;
-
-/**
- * Returns an array of ProgressBar wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ProgressBars inside the current wrapper.
- * If no matching ProgressBar is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ProgressBarWrapper>}
- */
-findAllProgressBars(selector?: string): Array<ProgressBarWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ProgressBar for the current element,
- * or the element itself if it is an instance of ProgressBar.
- * If no ProgressBar is found, returns \`null\`.
- *
- * @returns {ProgressBarWrapper | null}
- */
-findClosestProgressBar(): ProgressBarWrapper | null;
-/**
- * Returns the wrapper of the first PromptInput that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first PromptInput.
- * If no matching PromptInput is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PromptInputWrapper | null}
- */
-findPromptInput(selector?: string): PromptInputWrapper | null;
-
-/**
- * Returns an array of PromptInput wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the PromptInputs inside the current wrapper.
- * If no matching PromptInput is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PromptInputWrapper>}
- */
-findAllPromptInputs(selector?: string): Array<PromptInputWrapper>;
-
-/**
- * Returns the wrapper of the closest parent PromptInput for the current element,
- * or the element itself if it is an instance of PromptInput.
- * If no PromptInput is found, returns \`null\`.
- *
- * @returns {PromptInputWrapper | null}
- */
-findClosestPromptInput(): PromptInputWrapper | null;
-/**
- * Returns the wrapper of the first PropertyFilter that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first PropertyFilter.
- * If no matching PropertyFilter is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PropertyFilterWrapper | null}
- */
-findPropertyFilter(selector?: string): PropertyFilterWrapper | null;
-
-/**
- * Returns an array of PropertyFilter wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the PropertyFilters inside the current wrapper.
- * If no matching PropertyFilter is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PropertyFilterWrapper>}
- */
-findAllPropertyFilters(selector?: string): Array<PropertyFilterWrapper>;
-
-/**
- * Returns the wrapper of the closest parent PropertyFilter for the current element,
- * or the element itself if it is an instance of PropertyFilter.
- * If no PropertyFilter is found, returns \`null\`.
- *
- * @returns {PropertyFilterWrapper | null}
- */
-findClosestPropertyFilter(): PropertyFilterWrapper | null;
-/**
- * Returns the wrapper of the first RadioButton that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first RadioButton.
- * If no matching RadioButton is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {RadioButtonWrapper | null}
- */
-findRadioButton(selector?: string): RadioButtonWrapper | null;
-
-/**
- * Returns an array of RadioButton wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the RadioButtons inside the current wrapper.
- * If no matching RadioButton is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<RadioButtonWrapper>}
- */
-findAllRadioButtons(selector?: string): Array<RadioButtonWrapper>;
-
-/**
- * Returns the wrapper of the closest parent RadioButton for the current element,
- * or the element itself if it is an instance of RadioButton.
- * If no RadioButton is found, returns \`null\`.
- *
- * @returns {RadioButtonWrapper | null}
- */
-findClosestRadioButton(): RadioButtonWrapper | null;
-/**
- * Returns the wrapper of the first RadioGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first RadioGroup.
- * If no matching RadioGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {RadioGroupWrapper | null}
- */
-findRadioGroup(selector?: string): RadioGroupWrapper | null;
-
-/**
- * Returns an array of RadioGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the RadioGroups inside the current wrapper.
- * If no matching RadioGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<RadioGroupWrapper>}
- */
-findAllRadioGroups(selector?: string): Array<RadioGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent RadioGroup for the current element,
- * or the element itself if it is an instance of RadioGroup.
- * If no RadioGroup is found, returns \`null\`.
- *
- * @returns {RadioGroupWrapper | null}
- */
-findClosestRadioGroup(): RadioGroupWrapper | null;
-/**
- * Returns the wrapper of the first S3ResourceSelector that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first S3ResourceSelector.
- * If no matching S3ResourceSelector is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {S3ResourceSelectorWrapper | null}
- */
-findS3ResourceSelector(selector?: string): S3ResourceSelectorWrapper | null;
-
-/**
- * Returns an array of S3ResourceSelector wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the S3ResourceSelectors inside the current wrapper.
- * If no matching S3ResourceSelector is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<S3ResourceSelectorWrapper>}
- */
-findAllS3ResourceSelectors(selector?: string): Array<S3ResourceSelectorWrapper>;
-
-/**
- * Returns the wrapper of the closest parent S3ResourceSelector for the current element,
- * or the element itself if it is an instance of S3ResourceSelector.
- * If no S3ResourceSelector is found, returns \`null\`.
- *
- * @returns {S3ResourceSelectorWrapper | null}
- */
-findClosestS3ResourceSelector(): S3ResourceSelectorWrapper | null;
-/**
- * Returns the wrapper of the first SegmentedControl that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first SegmentedControl.
- * If no matching SegmentedControl is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SegmentedControlWrapper | null}
- */
-findSegmentedControl(selector?: string): SegmentedControlWrapper | null;
-
-/**
- * Returns an array of SegmentedControl wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the SegmentedControls inside the current wrapper.
- * If no matching SegmentedControl is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SegmentedControlWrapper>}
- */
-findAllSegmentedControls(selector?: string): Array<SegmentedControlWrapper>;
-
-/**
- * Returns the wrapper of the closest parent SegmentedControl for the current element,
- * or the element itself if it is an instance of SegmentedControl.
- * If no SegmentedControl is found, returns \`null\`.
- *
- * @returns {SegmentedControlWrapper | null}
- */
-findClosestSegmentedControl(): SegmentedControlWrapper | null;
-/**
- * Returns the wrapper of the first Select that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Select.
- * If no matching Select is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SelectWrapper | null}
- */
-findSelect(selector?: string): SelectWrapper | null;
-
-/**
- * Returns an array of Select wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Selects inside the current wrapper.
- * If no matching Select is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SelectWrapper>}
- */
-findAllSelects(selector?: string): Array<SelectWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Select for the current element,
- * or the element itself if it is an instance of Select.
- * If no Select is found, returns \`null\`.
- *
- * @returns {SelectWrapper | null}
- */
-findClosestSelect(): SelectWrapper | null;
-/**
- * Returns the wrapper of the first SideNavigation that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first SideNavigation.
- * If no matching SideNavigation is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SideNavigationWrapper | null}
- */
-findSideNavigation(selector?: string): SideNavigationWrapper | null;
-
-/**
- * Returns an array of SideNavigation wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the SideNavigations inside the current wrapper.
- * If no matching SideNavigation is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SideNavigationWrapper>}
- */
-findAllSideNavigations(selector?: string): Array<SideNavigationWrapper>;
-
-/**
- * Returns the wrapper of the closest parent SideNavigation for the current element,
- * or the element itself if it is an instance of SideNavigation.
- * If no SideNavigation is found, returns \`null\`.
- *
- * @returns {SideNavigationWrapper | null}
- */
-findClosestSideNavigation(): SideNavigationWrapper | null;
-/**
- * Returns the wrapper of the first Skeleton that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Skeleton.
- * If no matching Skeleton is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SkeletonWrapper | null}
- */
-findSkeleton(selector?: string): SkeletonWrapper | null;
-
-/**
- * Returns an array of Skeleton wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Skeletons inside the current wrapper.
- * If no matching Skeleton is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SkeletonWrapper>}
- */
-findAllSkeletons(selector?: string): Array<SkeletonWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Skeleton for the current element,
- * or the element itself if it is an instance of Skeleton.
- * If no Skeleton is found, returns \`null\`.
- *
- * @returns {SkeletonWrapper | null}
- */
-findClosestSkeleton(): SkeletonWrapper | null;
-/**
- * Returns the wrapper of the first Slider that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Slider.
- * If no matching Slider is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SliderWrapper | null}
- */
-findSlider(selector?: string): SliderWrapper | null;
-
-/**
- * Returns an array of Slider wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Sliders inside the current wrapper.
- * If no matching Slider is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SliderWrapper>}
- */
-findAllSliders(selector?: string): Array<SliderWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Slider for the current element,
- * or the element itself if it is an instance of Slider.
- * If no Slider is found, returns \`null\`.
- *
- * @returns {SliderWrapper | null}
- */
-findClosestSlider(): SliderWrapper | null;
-/**
- * Returns the wrapper of the first SpaceBetween that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first SpaceBetween.
- * If no matching SpaceBetween is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SpaceBetweenWrapper | null}
- */
-findSpaceBetween(selector?: string): SpaceBetweenWrapper | null;
-
-/**
- * Returns an array of SpaceBetween wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the SpaceBetweens inside the current wrapper.
- * If no matching SpaceBetween is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SpaceBetweenWrapper>}
- */
-findAllSpaceBetweens(selector?: string): Array<SpaceBetweenWrapper>;
-
-/**
- * Returns the wrapper of the closest parent SpaceBetween for the current element,
- * or the element itself if it is an instance of SpaceBetween.
- * If no SpaceBetween is found, returns \`null\`.
- *
- * @returns {SpaceBetweenWrapper | null}
- */
-findClosestSpaceBetween(): SpaceBetweenWrapper | null;
-/**
- * Returns the wrapper of the first Spinner that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Spinner.
- * If no matching Spinner is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SpinnerWrapper | null}
- */
-findSpinner(selector?: string): SpinnerWrapper | null;
-
-/**
- * Returns an array of Spinner wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Spinners inside the current wrapper.
- * If no matching Spinner is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SpinnerWrapper>}
- */
-findAllSpinners(selector?: string): Array<SpinnerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Spinner for the current element,
- * or the element itself if it is an instance of Spinner.
- * If no Spinner is found, returns \`null\`.
- *
- * @returns {SpinnerWrapper | null}
- */
-findClosestSpinner(): SpinnerWrapper | null;
-/**
- * Returns the wrapper of the first SplitPanel that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first SplitPanel.
- * If no matching SplitPanel is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SplitPanelWrapper | null}
- */
-findSplitPanel(selector?: string): SplitPanelWrapper | null;
-
-/**
- * Returns an array of SplitPanel wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the SplitPanels inside the current wrapper.
- * If no matching SplitPanel is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SplitPanelWrapper>}
- */
-findAllSplitPanels(selector?: string): Array<SplitPanelWrapper>;
-
-/**
- * Returns the wrapper of the closest parent SplitPanel for the current element,
- * or the element itself if it is an instance of SplitPanel.
- * If no SplitPanel is found, returns \`null\`.
- *
- * @returns {SplitPanelWrapper | null}
- */
-findClosestSplitPanel(): SplitPanelWrapper | null;
-/**
- * Returns the wrapper of the first StatusIndicator that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first StatusIndicator.
- * If no matching StatusIndicator is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {StatusIndicatorWrapper | null}
- */
-findStatusIndicator(selector?: string): StatusIndicatorWrapper | null;
-
-/**
- * Returns an array of StatusIndicator wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the StatusIndicators inside the current wrapper.
- * If no matching StatusIndicator is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<StatusIndicatorWrapper>}
- */
-findAllStatusIndicators(selector?: string): Array<StatusIndicatorWrapper>;
-
-/**
- * Returns the wrapper of the closest parent StatusIndicator for the current element,
- * or the element itself if it is an instance of StatusIndicator.
- * If no StatusIndicator is found, returns \`null\`.
- *
- * @returns {StatusIndicatorWrapper | null}
- */
-findClosestStatusIndicator(): StatusIndicatorWrapper | null;
-/**
- * Returns the wrapper of the first Steps that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Steps.
- * If no matching Steps is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {StepsWrapper | null}
- */
-findSteps(selector?: string): StepsWrapper | null;
-
-/**
- * Returns an array of Steps wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Steps inside the current wrapper.
- * If no matching Steps is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<StepsWrapper>}
- */
-findAllSteps(selector?: string): Array<StepsWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Steps for the current element,
- * or the element itself if it is an instance of Steps.
- * If no Steps is found, returns \`null\`.
- *
- * @returns {StepsWrapper | null}
- */
-findClosestSteps(): StepsWrapper | null;
-/**
- * Returns the wrapper of the first Table that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Table.
- * If no matching Table is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TableWrapper | null}
- */
-findTable(selector?: string): TableWrapper | null;
-
-/**
- * Returns an array of Table wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Tables inside the current wrapper.
- * If no matching Table is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TableWrapper>}
- */
-findAllTables(selector?: string): Array<TableWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Table for the current element,
- * or the element itself if it is an instance of Table.
- * If no Table is found, returns \`null\`.
- *
- * @returns {TableWrapper | null}
- */
-findClosestTable(): TableWrapper | null;
-/**
- * Returns the wrapper of the first Tabs that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Tabs.
- * If no matching Tabs is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TabsWrapper | null}
- */
-findTabs(selector?: string): TabsWrapper | null;
-
-/**
- * Returns an array of Tabs wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Tabs inside the current wrapper.
- * If no matching Tabs is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TabsWrapper>}
- */
-findAllTabs(selector?: string): Array<TabsWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Tabs for the current element,
- * or the element itself if it is an instance of Tabs.
- * If no Tabs is found, returns \`null\`.
- *
- * @returns {TabsWrapper | null}
- */
-findClosestTabs(): TabsWrapper | null;
-/**
- * Returns the wrapper of the first TagEditor that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TagEditor.
- * If no matching TagEditor is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TagEditorWrapper | null}
- */
-findTagEditor(selector?: string): TagEditorWrapper | null;
-
-/**
- * Returns an array of TagEditor wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TagEditors inside the current wrapper.
- * If no matching TagEditor is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TagEditorWrapper>}
- */
-findAllTagEditors(selector?: string): Array<TagEditorWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TagEditor for the current element,
- * or the element itself if it is an instance of TagEditor.
- * If no TagEditor is found, returns \`null\`.
- *
- * @returns {TagEditorWrapper | null}
- */
-findClosestTagEditor(): TagEditorWrapper | null;
-/**
- * Returns the wrapper of the first TextContent that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TextContent.
- * If no matching TextContent is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TextContentWrapper | null}
- */
-findTextContent(selector?: string): TextContentWrapper | null;
-
-/**
- * Returns an array of TextContent wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TextContents inside the current wrapper.
- * If no matching TextContent is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TextContentWrapper>}
- */
-findAllTextContents(selector?: string): Array<TextContentWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TextContent for the current element,
- * or the element itself if it is an instance of TextContent.
- * If no TextContent is found, returns \`null\`.
- *
- * @returns {TextContentWrapper | null}
- */
-findClosestTextContent(): TextContentWrapper | null;
-/**
- * Returns the wrapper of the first TextFilter that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TextFilter.
- * If no matching TextFilter is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TextFilterWrapper | null}
- */
-findTextFilter(selector?: string): TextFilterWrapper | null;
-
-/**
- * Returns an array of TextFilter wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TextFilters inside the current wrapper.
- * If no matching TextFilter is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TextFilterWrapper>}
- */
-findAllTextFilters(selector?: string): Array<TextFilterWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TextFilter for the current element,
- * or the element itself if it is an instance of TextFilter.
- * If no TextFilter is found, returns \`null\`.
- *
- * @returns {TextFilterWrapper | null}
- */
-findClosestTextFilter(): TextFilterWrapper | null;
-/**
- * Returns the wrapper of the first Textarea that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Textarea.
- * If no matching Textarea is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TextareaWrapper | null}
- */
-findTextarea(selector?: string): TextareaWrapper | null;
-
-/**
- * Returns an array of Textarea wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Textareas inside the current wrapper.
- * If no matching Textarea is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TextareaWrapper>}
- */
-findAllTextareas(selector?: string): Array<TextareaWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Textarea for the current element,
- * or the element itself if it is an instance of Textarea.
- * If no Textarea is found, returns \`null\`.
- *
- * @returns {TextareaWrapper | null}
- */
-findClosestTextarea(): TextareaWrapper | null;
-/**
- * Returns the wrapper of the first Tiles that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Tiles.
- * If no matching Tiles is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TilesWrapper | null}
- */
-findTiles(selector?: string): TilesWrapper | null;
-
-/**
- * Returns an array of Tiles wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Tiles inside the current wrapper.
- * If no matching Tiles is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TilesWrapper>}
- */
-findAllTiles(selector?: string): Array<TilesWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Tiles for the current element,
- * or the element itself if it is an instance of Tiles.
- * If no Tiles is found, returns \`null\`.
- *
- * @returns {TilesWrapper | null}
- */
-findClosestTiles(): TilesWrapper | null;
-/**
- * Returns the wrapper of the first TimeInput that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TimeInput.
- * If no matching TimeInput is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TimeInputWrapper | null}
- */
-findTimeInput(selector?: string): TimeInputWrapper | null;
-
-/**
- * Returns an array of TimeInput wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TimeInputs inside the current wrapper.
- * If no matching TimeInput is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TimeInputWrapper>}
- */
-findAllTimeInputs(selector?: string): Array<TimeInputWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TimeInput for the current element,
- * or the element itself if it is an instance of TimeInput.
- * If no TimeInput is found, returns \`null\`.
- *
- * @returns {TimeInputWrapper | null}
- */
-findClosestTimeInput(): TimeInputWrapper | null;
-/**
- * Returns the wrapper of the first Toggle that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Toggle.
- * If no matching Toggle is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ToggleWrapper | null}
- */
-findToggle(selector?: string): ToggleWrapper | null;
-
-/**
- * Returns an array of Toggle wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Toggles inside the current wrapper.
- * If no matching Toggle is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ToggleWrapper>}
- */
-findAllToggles(selector?: string): Array<ToggleWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Toggle for the current element,
- * or the element itself if it is an instance of Toggle.
- * If no Toggle is found, returns \`null\`.
- *
- * @returns {ToggleWrapper | null}
- */
-findClosestToggle(): ToggleWrapper | null;
-/**
- * Returns the wrapper of the first ToggleButton that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ToggleButton.
- * If no matching ToggleButton is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ToggleButtonWrapper | null}
- */
-findToggleButton(selector?: string): ToggleButtonWrapper | null;
-
-/**
- * Returns an array of ToggleButton wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ToggleButtons inside the current wrapper.
- * If no matching ToggleButton is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ToggleButtonWrapper>}
- */
-findAllToggleButtons(selector?: string): Array<ToggleButtonWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ToggleButton for the current element,
- * or the element itself if it is an instance of ToggleButton.
- * If no ToggleButton is found, returns \`null\`.
- *
- * @returns {ToggleButtonWrapper | null}
- */
-findClosestToggleButton(): ToggleButtonWrapper | null;
-/**
- * Returns the wrapper of the first Token that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Token.
- * If no matching Token is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TokenWrapper | null}
- */
-findToken(selector?: string): TokenWrapper | null;
-
-/**
- * Returns an array of Token wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Tokens inside the current wrapper.
- * If no matching Token is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TokenWrapper>}
- */
-findAllTokens(selector?: string): Array<TokenWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Token for the current element,
- * or the element itself if it is an instance of Token.
- * If no Token is found, returns \`null\`.
- *
- * @returns {TokenWrapper | null}
- */
-findClosestToken(): TokenWrapper | null;
-/**
- * Returns the wrapper of the first TokenGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TokenGroup.
- * If no matching TokenGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TokenGroupWrapper | null}
- */
-findTokenGroup(selector?: string): TokenGroupWrapper | null;
-
-/**
- * Returns an array of TokenGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TokenGroups inside the current wrapper.
- * If no matching TokenGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TokenGroupWrapper>}
- */
-findAllTokenGroups(selector?: string): Array<TokenGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TokenGroup for the current element,
- * or the element itself if it is an instance of TokenGroup.
- * If no TokenGroup is found, returns \`null\`.
- *
- * @returns {TokenGroupWrapper | null}
- */
-findClosestTokenGroup(): TokenGroupWrapper | null;
-/**
- * Returns the wrapper of the first Tooltip that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Tooltip.
- * If no matching Tooltip is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TooltipWrapper | null}
- */
-findTooltip(selector?: string): TooltipWrapper | null;
-
-/**
- * Returns an array of Tooltip wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Tooltips inside the current wrapper.
- * If no matching Tooltip is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TooltipWrapper>}
- */
-findAllTooltips(selector?: string): Array<TooltipWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Tooltip for the current element,
- * or the element itself if it is an instance of Tooltip.
- * If no Tooltip is found, returns \`null\`.
- *
- * @returns {TooltipWrapper | null}
- */
-findClosestTooltip(): TooltipWrapper | null;
-/**
- * Returns the wrapper of the first TopNavigation that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TopNavigation.
- * If no matching TopNavigation is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TopNavigationWrapper | null}
- */
-findTopNavigation(selector?: string): TopNavigationWrapper | null;
-
-/**
- * Returns an array of TopNavigation wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TopNavigations inside the current wrapper.
- * If no matching TopNavigation is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TopNavigationWrapper>}
- */
-findAllTopNavigations(selector?: string): Array<TopNavigationWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TopNavigation for the current element,
- * or the element itself if it is an instance of TopNavigation.
- * If no TopNavigation is found, returns \`null\`.
- *
- * @returns {TopNavigationWrapper | null}
- */
-findClosestTopNavigation(): TopNavigationWrapper | null;
-/**
- * Returns the wrapper of the first TreeView that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TreeView.
- * If no matching TreeView is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TreeViewWrapper | null}
- */
-findTreeView(selector?: string): TreeViewWrapper | null;
-
-/**
- * Returns an array of TreeView wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TreeViews inside the current wrapper.
- * If no matching TreeView is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TreeViewWrapper>}
- */
-findAllTreeViews(selector?: string): Array<TreeViewWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TreeView for the current element,
- * or the element itself if it is an instance of TreeView.
- * If no TreeView is found, returns \`null\`.
- *
- * @returns {TreeViewWrapper | null}
- */
-findClosestTreeView(): TreeViewWrapper | null;
-/**
- * Returns the wrapper of the first TruncatedText that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TruncatedText.
- * If no matching TruncatedText is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TruncatedTextWrapper | null}
- */
-findTruncatedText(selector?: string): TruncatedTextWrapper | null;
-
-/**
- * Returns an array of TruncatedText wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TruncatedTexts inside the current wrapper.
- * If no matching TruncatedText is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TruncatedTextWrapper>}
- */
-findAllTruncatedTexts(selector?: string): Array<TruncatedTextWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TruncatedText for the current element,
- * or the element itself if it is an instance of TruncatedText.
- * If no TruncatedText is found, returns \`null\`.
- *
- * @returns {TruncatedTextWrapper | null}
- */
-findClosestTruncatedText(): TruncatedTextWrapper | null;
-/**
- * Returns the wrapper of the first TutorialPanel that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TutorialPanel.
- * If no matching TutorialPanel is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TutorialPanelWrapper | null}
- */
-findTutorialPanel(selector?: string): TutorialPanelWrapper | null;
-
-/**
- * Returns an array of TutorialPanel wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TutorialPanels inside the current wrapper.
- * If no matching TutorialPanel is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TutorialPanelWrapper>}
- */
-findAllTutorialPanels(selector?: string): Array<TutorialPanelWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TutorialPanel for the current element,
- * or the element itself if it is an instance of TutorialPanel.
- * If no TutorialPanel is found, returns \`null\`.
- *
- * @returns {TutorialPanelWrapper | null}
- */
-findClosestTutorialPanel(): TutorialPanelWrapper | null;
-/**
- * Returns the wrapper of the first Wizard that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Wizard.
- * If no matching Wizard is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {WizardWrapper | null}
- */
-findWizard(selector?: string): WizardWrapper | null;
-
-/**
- * Returns an array of Wizard wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Wizards inside the current wrapper.
- * If no matching Wizard is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<WizardWrapper>}
- */
-findAllWizards(selector?: string): Array<WizardWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Wizard for the current element,
- * or the element itself if it is an instance of Wizard.
- * If no Wizard is found, returns \`null\`.
- *
- * @returns {WizardWrapper | null}
- */
-findClosestWizard(): WizardWrapper | null;
-   }
-}
-
-
-ElementWrapper.prototype.findActionCard = function(selector) {
-  let rootSelector = \`.\${ActionCardWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ActionCardWrapper && ActionCardWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ActionCardWrapper.rootSelector}, .\${ActionCardWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ActionCardWrapper);
-};
-
-ElementWrapper.prototype.findAllActionCards = function(selector) {
-  return this.findAllComponents(ActionCardWrapper, selector);
-};
-ElementWrapper.prototype.findAlert = function(selector) {
-  let rootSelector = \`.\${AlertWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AlertWrapper && AlertWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AlertWrapper.rootSelector}, .\${AlertWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AlertWrapper);
-};
-
-ElementWrapper.prototype.findAllAlerts = function(selector) {
-  return this.findAllComponents(AlertWrapper, selector);
-};
-ElementWrapper.prototype.findAnchorNavigation = function(selector) {
-  let rootSelector = \`.\${AnchorNavigationWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AnchorNavigationWrapper && AnchorNavigationWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AnchorNavigationWrapper.rootSelector}, .\${AnchorNavigationWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AnchorNavigationWrapper);
-};
-
-ElementWrapper.prototype.findAllAnchorNavigations = function(selector) {
-  return this.findAllComponents(AnchorNavigationWrapper, selector);
-};
-ElementWrapper.prototype.findAnnotation = function(selector) {
-  let rootSelector = \`.\${AnnotationWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AnnotationWrapper && AnnotationWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AnnotationWrapper.rootSelector}, .\${AnnotationWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AnnotationWrapper);
-};
-
-ElementWrapper.prototype.findAllAnnotations = function(selector) {
-  return this.findAllComponents(AnnotationWrapper, selector);
-};
-ElementWrapper.prototype.findAppLayout = function(selector) {
-  let rootSelector = \`.\${AppLayoutWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AppLayoutWrapper && AppLayoutWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AppLayoutWrapper.rootSelector}, .\${AppLayoutWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AppLayoutWrapper);
-};
-
-ElementWrapper.prototype.findAllAppLayouts = function(selector) {
-  return this.findAllComponents(AppLayoutWrapper, selector);
-};
-ElementWrapper.prototype.findAppLayoutToolbar = function(selector) {
-  let rootSelector = \`.\${AppLayoutToolbarWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AppLayoutToolbarWrapper && AppLayoutToolbarWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AppLayoutToolbarWrapper.rootSelector}, .\${AppLayoutToolbarWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AppLayoutToolbarWrapper);
-};
-
-ElementWrapper.prototype.findAllAppLayoutToolbars = function(selector) {
-  return this.findAllComponents(AppLayoutToolbarWrapper, selector);
-};
-ElementWrapper.prototype.findAreaChart = function(selector) {
-  let rootSelector = \`.\${AreaChartWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AreaChartWrapper && AreaChartWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AreaChartWrapper.rootSelector}, .\${AreaChartWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AreaChartWrapper);
-};
-
-ElementWrapper.prototype.findAllAreaCharts = function(selector) {
-  return this.findAllComponents(AreaChartWrapper, selector);
-};
-ElementWrapper.prototype.findAttributeEditor = function(selector) {
-  let rootSelector = \`.\${AttributeEditorWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AttributeEditorWrapper && AttributeEditorWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AttributeEditorWrapper.rootSelector}, .\${AttributeEditorWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AttributeEditorWrapper);
-};
-
-ElementWrapper.prototype.findAllAttributeEditors = function(selector) {
-  return this.findAllComponents(AttributeEditorWrapper, selector);
-};
-ElementWrapper.prototype.findAutosuggest = function(selector) {
-  let rootSelector = \`.\${AutosuggestWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AutosuggestWrapper && AutosuggestWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AutosuggestWrapper.rootSelector}, .\${AutosuggestWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AutosuggestWrapper);
-};
-
-ElementWrapper.prototype.findAllAutosuggests = function(selector) {
-  return this.findAllComponents(AutosuggestWrapper, selector);
-};
-ElementWrapper.prototype.findBadge = function(selector) {
-  let rootSelector = \`.\${BadgeWrapper.rootSelector}\`;
-  if("legacyRootSelector" in BadgeWrapper && BadgeWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${BadgeWrapper.rootSelector}, .\${BadgeWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BadgeWrapper);
-};
-
-ElementWrapper.prototype.findAllBadges = function(selector) {
-  return this.findAllComponents(BadgeWrapper, selector);
-};
-ElementWrapper.prototype.findBarChart = function(selector) {
-  let rootSelector = \`.\${BarChartWrapper.rootSelector}\`;
-  if("legacyRootSelector" in BarChartWrapper && BarChartWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${BarChartWrapper.rootSelector}, .\${BarChartWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BarChartWrapper);
-};
-
-ElementWrapper.prototype.findAllBarCharts = function(selector) {
-  return this.findAllComponents(BarChartWrapper, selector);
-};
-ElementWrapper.prototype.findBox = function(selector) {
-  let rootSelector = \`.\${BoxWrapper.rootSelector}\`;
-  if("legacyRootSelector" in BoxWrapper && BoxWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${BoxWrapper.rootSelector}, .\${BoxWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoxWrapper);
-};
-
-ElementWrapper.prototype.findAllBoxes = function(selector) {
-  return this.findAllComponents(BoxWrapper, selector);
-};
-ElementWrapper.prototype.findBreadcrumbGroup = function(selector) {
-  let rootSelector = \`.\${BreadcrumbGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in BreadcrumbGroupWrapper && BreadcrumbGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${BreadcrumbGroupWrapper.rootSelector}, .\${BreadcrumbGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BreadcrumbGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllBreadcrumbGroups = function(selector) {
-  return this.findAllComponents(BreadcrumbGroupWrapper, selector);
-};
-ElementWrapper.prototype.findButton = function(selector) {
-  let rootSelector = \`.\${ButtonWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ButtonWrapper && ButtonWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ButtonWrapper.rootSelector}, .\${ButtonWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonWrapper);
-};
-
-ElementWrapper.prototype.findAllButtons = function(selector) {
-  return this.findAllComponents(ButtonWrapper, selector);
-};
-ElementWrapper.prototype.findButtonDropdown = function(selector) {
-  let rootSelector = \`.\${ButtonDropdownWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ButtonDropdownWrapper && ButtonDropdownWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ButtonDropdownWrapper.rootSelector}, .\${ButtonDropdownWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonDropdownWrapper);
-};
-
-ElementWrapper.prototype.findAllButtonDropdowns = function(selector) {
-  return this.findAllComponents(ButtonDropdownWrapper, selector);
-};
-ElementWrapper.prototype.findButtonGroup = function(selector) {
-  let rootSelector = \`.\${ButtonGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ButtonGroupWrapper && ButtonGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ButtonGroupWrapper.rootSelector}, .\${ButtonGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllButtonGroups = function(selector) {
-  return this.findAllComponents(ButtonGroupWrapper, selector);
-};
-ElementWrapper.prototype.findCalendar = function(selector) {
-  let rootSelector = \`.\${CalendarWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CalendarWrapper && CalendarWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CalendarWrapper.rootSelector}, .\${CalendarWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CalendarWrapper);
-};
-
-ElementWrapper.prototype.findAllCalendars = function(selector) {
-  return this.findAllComponents(CalendarWrapper, selector);
-};
-ElementWrapper.prototype.findCards = function(selector) {
-  let rootSelector = \`.\${CardsWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CardsWrapper && CardsWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CardsWrapper.rootSelector}, .\${CardsWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CardsWrapper);
-};
-
-ElementWrapper.prototype.findAllCards = function(selector) {
-  return this.findAllComponents(CardsWrapper, selector);
-};
-ElementWrapper.prototype.findCheckbox = function(selector) {
-  let rootSelector = \`.\${CheckboxWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CheckboxWrapper && CheckboxWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CheckboxWrapper.rootSelector}, .\${CheckboxWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CheckboxWrapper);
-};
-
-ElementWrapper.prototype.findAllCheckboxes = function(selector) {
-  return this.findAllComponents(CheckboxWrapper, selector);
-};
-ElementWrapper.prototype.findCodeEditor = function(selector) {
-  let rootSelector = \`.\${CodeEditorWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CodeEditorWrapper && CodeEditorWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CodeEditorWrapper.rootSelector}, .\${CodeEditorWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CodeEditorWrapper);
-};
-
-ElementWrapper.prototype.findAllCodeEditors = function(selector) {
-  return this.findAllComponents(CodeEditorWrapper, selector);
-};
-ElementWrapper.prototype.findCollectionPreferences = function(selector) {
-  let rootSelector = \`.\${CollectionPreferencesWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CollectionPreferencesWrapper && CollectionPreferencesWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CollectionPreferencesWrapper.rootSelector}, .\${CollectionPreferencesWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CollectionPreferencesWrapper);
-};
-
-ElementWrapper.prototype.findAllCollectionPreferences = function(selector) {
-  return this.findAllComponents(CollectionPreferencesWrapper, selector);
-};
-ElementWrapper.prototype.findColumnLayout = function(selector) {
-  let rootSelector = \`.\${ColumnLayoutWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ColumnLayoutWrapper && ColumnLayoutWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ColumnLayoutWrapper.rootSelector}, .\${ColumnLayoutWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ColumnLayoutWrapper);
-};
-
-ElementWrapper.prototype.findAllColumnLayouts = function(selector) {
-  return this.findAllComponents(ColumnLayoutWrapper, selector);
-};
-ElementWrapper.prototype.findContainer = function(selector) {
-  let rootSelector = \`.\${ContainerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ContainerWrapper && ContainerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ContainerWrapper.rootSelector}, .\${ContainerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ContainerWrapper);
-};
-
-ElementWrapper.prototype.findAllContainers = function(selector) {
-  return this.findAllComponents(ContainerWrapper, selector);
-};
-ElementWrapper.prototype.findContentLayout = function(selector) {
-  let rootSelector = \`.\${ContentLayoutWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ContentLayoutWrapper && ContentLayoutWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ContentLayoutWrapper.rootSelector}, .\${ContentLayoutWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ContentLayoutWrapper);
-};
-
-ElementWrapper.prototype.findAllContentLayouts = function(selector) {
-  return this.findAllComponents(ContentLayoutWrapper, selector);
-};
-ElementWrapper.prototype.findCopyToClipboard = function(selector) {
-  let rootSelector = \`.\${CopyToClipboardWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CopyToClipboardWrapper && CopyToClipboardWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CopyToClipboardWrapper.rootSelector}, .\${CopyToClipboardWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CopyToClipboardWrapper);
-};
-
-ElementWrapper.prototype.findAllCopyToClipboards = function(selector) {
-  return this.findAllComponents(CopyToClipboardWrapper, selector);
-};
-ElementWrapper.prototype.findDateInput = function(selector) {
-  let rootSelector = \`.\${DateInputWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DateInputWrapper && DateInputWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DateInputWrapper.rootSelector}, .\${DateInputWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DateInputWrapper);
-};
-
-ElementWrapper.prototype.findAllDateInputs = function(selector) {
-  return this.findAllComponents(DateInputWrapper, selector);
-};
-ElementWrapper.prototype.findDatePicker = function(selector) {
-  let rootSelector = \`.\${DatePickerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DatePickerWrapper && DatePickerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DatePickerWrapper.rootSelector}, .\${DatePickerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DatePickerWrapper);
-};
-
-ElementWrapper.prototype.findAllDatePickers = function(selector) {
-  return this.findAllComponents(DatePickerWrapper, selector);
-};
-ElementWrapper.prototype.findDateRangePicker = function(selector) {
-  let rootSelector = \`.\${DateRangePickerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DateRangePickerWrapper && DateRangePickerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DateRangePickerWrapper.rootSelector}, .\${DateRangePickerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DateRangePickerWrapper);
-};
-
-ElementWrapper.prototype.findAllDateRangePickers = function(selector) {
-  return this.findAllComponents(DateRangePickerWrapper, selector);
-};
-ElementWrapper.prototype.findDivider = function(selector) {
-  let rootSelector = \`.\${DividerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DividerWrapper && DividerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DividerWrapper.rootSelector}, .\${DividerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DividerWrapper);
-};
-
-ElementWrapper.prototype.findAllDividers = function(selector) {
-  return this.findAllComponents(DividerWrapper, selector);
-};
-ElementWrapper.prototype.findDrawer = function(selector) {
-  let rootSelector = \`.\${DrawerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DrawerWrapper && DrawerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DrawerWrapper.rootSelector}, .\${DrawerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DrawerWrapper);
-};
-
-ElementWrapper.prototype.findAllDrawers = function(selector) {
-  return this.findAllComponents(DrawerWrapper, selector);
-};
-ElementWrapper.prototype.findDropdown = function(selector) {
-  let rootSelector = \`.\${DropdownWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DropdownWrapper && DropdownWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DropdownWrapper.rootSelector}, .\${DropdownWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DropdownWrapper);
-};
-
-ElementWrapper.prototype.findAllDropdowns = function(selector) {
-  return this.findAllComponents(DropdownWrapper, selector);
-};
-ElementWrapper.prototype.findErrorBoundary = function(selector) {
-  let rootSelector = \`.\${ErrorBoundaryWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ErrorBoundaryWrapper && ErrorBoundaryWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ErrorBoundaryWrapper.rootSelector}, .\${ErrorBoundaryWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ErrorBoundaryWrapper);
-};
-
-ElementWrapper.prototype.findAllErrorBoundaries = function(selector) {
-  return this.findAllComponents(ErrorBoundaryWrapper, selector);
-};
-ElementWrapper.prototype.findExpandableSection = function(selector) {
-  let rootSelector = \`.\${ExpandableSectionWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ExpandableSectionWrapper && ExpandableSectionWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ExpandableSectionWrapper.rootSelector}, .\${ExpandableSectionWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ExpandableSectionWrapper);
-};
-
-ElementWrapper.prototype.findAllExpandableSections = function(selector) {
-  return this.findAllComponents(ExpandableSectionWrapper, selector);
-};
-ElementWrapper.prototype.findFileDropzone = function(selector) {
-  let rootSelector = \`.\${FileDropzoneWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FileDropzoneWrapper && FileDropzoneWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FileDropzoneWrapper.rootSelector}, .\${FileDropzoneWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileDropzoneWrapper);
-};
-
-ElementWrapper.prototype.findAllFileDropzones = function(selector) {
-  return this.findAllComponents(FileDropzoneWrapper, selector);
-};
-ElementWrapper.prototype.findFileInput = function(selector) {
-  let rootSelector = \`.\${FileInputWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FileInputWrapper && FileInputWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FileInputWrapper.rootSelector}, .\${FileInputWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileInputWrapper);
-};
-
-ElementWrapper.prototype.findAllFileInputs = function(selector) {
-  return this.findAllComponents(FileInputWrapper, selector);
-};
-ElementWrapper.prototype.findFileTokenGroup = function(selector) {
-  let rootSelector = \`.\${FileTokenGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FileTokenGroupWrapper && FileTokenGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FileTokenGroupWrapper.rootSelector}, .\${FileTokenGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileTokenGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllFileTokenGroups = function(selector) {
-  return this.findAllComponents(FileTokenGroupWrapper, selector);
-};
-ElementWrapper.prototype.findFileUpload = function(selector) {
-  let rootSelector = \`.\${FileUploadWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FileUploadWrapper && FileUploadWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FileUploadWrapper.rootSelector}, .\${FileUploadWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileUploadWrapper);
-};
-
-ElementWrapper.prototype.findAllFileUploads = function(selector) {
-  return this.findAllComponents(FileUploadWrapper, selector);
-};
-ElementWrapper.prototype.findFlashbar = function(selector) {
-  let rootSelector = \`.\${FlashbarWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FlashbarWrapper && FlashbarWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FlashbarWrapper.rootSelector}, .\${FlashbarWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FlashbarWrapper);
-};
-
-ElementWrapper.prototype.findAllFlashbars = function(selector) {
-  return this.findAllComponents(FlashbarWrapper, selector);
-};
-ElementWrapper.prototype.findForm = function(selector) {
-  let rootSelector = \`.\${FormWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FormWrapper && FormWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FormWrapper.rootSelector}, .\${FormWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FormWrapper);
-};
-
-ElementWrapper.prototype.findAllForms = function(selector) {
-  return this.findAllComponents(FormWrapper, selector);
-};
-ElementWrapper.prototype.findFormField = function(selector) {
-  let rootSelector = \`.\${FormFieldWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FormFieldWrapper && FormFieldWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FormFieldWrapper.rootSelector}, .\${FormFieldWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FormFieldWrapper);
-};
-
-ElementWrapper.prototype.findAllFormFields = function(selector) {
-  return this.findAllComponents(FormFieldWrapper, selector);
-};
-ElementWrapper.prototype.findGrid = function(selector) {
-  let rootSelector = \`.\${GridWrapper.rootSelector}\`;
-  if("legacyRootSelector" in GridWrapper && GridWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${GridWrapper.rootSelector}, .\${GridWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, GridWrapper);
-};
-
-ElementWrapper.prototype.findAllGrids = function(selector) {
-  return this.findAllComponents(GridWrapper, selector);
-};
-ElementWrapper.prototype.findHeader = function(selector) {
-  let rootSelector = \`.\${HeaderWrapper.rootSelector}\`;
-  if("legacyRootSelector" in HeaderWrapper && HeaderWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${HeaderWrapper.rootSelector}, .\${HeaderWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HeaderWrapper);
-};
-
-ElementWrapper.prototype.findAllHeaders = function(selector) {
-  return this.findAllComponents(HeaderWrapper, selector);
-};
-ElementWrapper.prototype.findHelpPanel = function(selector) {
-  let rootSelector = \`.\${HelpPanelWrapper.rootSelector}\`;
-  if("legacyRootSelector" in HelpPanelWrapper && HelpPanelWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${HelpPanelWrapper.rootSelector}, .\${HelpPanelWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HelpPanelWrapper);
-};
-
-ElementWrapper.prototype.findAllHelpPanels = function(selector) {
-  return this.findAllComponents(HelpPanelWrapper, selector);
-};
-ElementWrapper.prototype.findHotspot = function(selector) {
-  let rootSelector = \`.\${HotspotWrapper.rootSelector}\`;
-  if("legacyRootSelector" in HotspotWrapper && HotspotWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${HotspotWrapper.rootSelector}, .\${HotspotWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HotspotWrapper);
-};
-
-ElementWrapper.prototype.findAllHotspots = function(selector) {
-  return this.findAllComponents(HotspotWrapper, selector);
-};
-ElementWrapper.prototype.findIcon = function(selector) {
-  let rootSelector = \`.\${IconWrapper.rootSelector}\`;
-  if("legacyRootSelector" in IconWrapper && IconWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${IconWrapper.rootSelector}, .\${IconWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, IconWrapper);
-};
-
-ElementWrapper.prototype.findAllIcons = function(selector) {
-  return this.findAllComponents(IconWrapper, selector);
-};
-ElementWrapper.prototype.findInput = function(selector) {
-  let rootSelector = \`.\${InputWrapper.rootSelector}\`;
-  if("legacyRootSelector" in InputWrapper && InputWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${InputWrapper.rootSelector}, .\${InputWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, InputWrapper);
-};
-
-ElementWrapper.prototype.findAllInputs = function(selector) {
-  return this.findAllComponents(InputWrapper, selector);
-};
-ElementWrapper.prototype.findItemCard = function(selector) {
-  let rootSelector = \`.\${ItemCardWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ItemCardWrapper && ItemCardWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ItemCardWrapper.rootSelector}, .\${ItemCardWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemCardWrapper);
-};
-
-ElementWrapper.prototype.findAllItemCards = function(selector) {
-  return this.findAllComponents(ItemCardWrapper, selector);
-};
-ElementWrapper.prototype.findKeyValuePairs = function(selector) {
-  let rootSelector = \`.\${KeyValuePairsWrapper.rootSelector}\`;
-  if("legacyRootSelector" in KeyValuePairsWrapper && KeyValuePairsWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${KeyValuePairsWrapper.rootSelector}, .\${KeyValuePairsWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, KeyValuePairsWrapper);
-};
-
-ElementWrapper.prototype.findAllKeyValuePairs = function(selector) {
-  return this.findAllComponents(KeyValuePairsWrapper, selector);
-};
-ElementWrapper.prototype.findLineChart = function(selector) {
-  let rootSelector = \`.\${LineChartWrapper.rootSelector}\`;
-  if("legacyRootSelector" in LineChartWrapper && LineChartWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${LineChartWrapper.rootSelector}, .\${LineChartWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LineChartWrapper);
-};
-
-ElementWrapper.prototype.findAllLineCharts = function(selector) {
-  return this.findAllComponents(LineChartWrapper, selector);
-};
-ElementWrapper.prototype.findLink = function(selector) {
-  let rootSelector = \`.\${LinkWrapper.rootSelector}\`;
-  if("legacyRootSelector" in LinkWrapper && LinkWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${LinkWrapper.rootSelector}, .\${LinkWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LinkWrapper);
-};
-
-ElementWrapper.prototype.findAllLinks = function(selector) {
-  return this.findAllComponents(LinkWrapper, selector);
-};
-ElementWrapper.prototype.findList = function(selector) {
-  let rootSelector = \`.\${ListWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ListWrapper && ListWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ListWrapper.rootSelector}, .\${ListWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ListWrapper);
-};
-
-ElementWrapper.prototype.findAllLists = function(selector) {
-  return this.findAllComponents(ListWrapper, selector);
-};
-ElementWrapper.prototype.findLiveRegion = function(selector) {
-  let rootSelector = \`.\${LiveRegionWrapper.rootSelector}\`;
-  if("legacyRootSelector" in LiveRegionWrapper && LiveRegionWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${LiveRegionWrapper.rootSelector}, .\${LiveRegionWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LiveRegionWrapper);
-};
-
-ElementWrapper.prototype.findAllLiveRegions = function(selector) {
-  return this.findAllComponents(LiveRegionWrapper, selector);
-};
-ElementWrapper.prototype.findMixedLineBarChart = function(selector) {
-  let rootSelector = \`.\${MixedLineBarChartWrapper.rootSelector}\`;
-  if("legacyRootSelector" in MixedLineBarChartWrapper && MixedLineBarChartWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${MixedLineBarChartWrapper.rootSelector}, .\${MixedLineBarChartWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, MixedLineBarChartWrapper);
-};
-
-ElementWrapper.prototype.findAllMixedLineBarCharts = function(selector) {
-  return this.findAllComponents(MixedLineBarChartWrapper, selector);
-};
-ElementWrapper.prototype.findModal = function(selector) {
-  let rootSelector = \`.\${ModalWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ModalWrapper && ModalWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ModalWrapper.rootSelector}, .\${ModalWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ModalWrapper);
-};
-
-ElementWrapper.prototype.findAllModals = function(selector) {
-  return this.findAllComponents(ModalWrapper, selector);
-};
-ElementWrapper.prototype.findMultiselect = function(selector) {
-  let rootSelector = \`.\${MultiselectWrapper.rootSelector}\`;
-  if("legacyRootSelector" in MultiselectWrapper && MultiselectWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${MultiselectWrapper.rootSelector}, .\${MultiselectWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, MultiselectWrapper);
-};
-
-ElementWrapper.prototype.findAllMultiselects = function(selector) {
-  return this.findAllComponents(MultiselectWrapper, selector);
-};
-ElementWrapper.prototype.findNavigableGroup = function(selector) {
-  let rootSelector = \`.\${NavigableGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in NavigableGroupWrapper && NavigableGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${NavigableGroupWrapper.rootSelector}, .\${NavigableGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, NavigableGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllNavigableGroups = function(selector) {
-  return this.findAllComponents(NavigableGroupWrapper, selector);
-};
-ElementWrapper.prototype.findPagination = function(selector) {
-  let rootSelector = \`.\${PaginationWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PaginationWrapper && PaginationWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PaginationWrapper.rootSelector}, .\${PaginationWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PaginationWrapper);
-};
-
-ElementWrapper.prototype.findAllPaginations = function(selector) {
-  return this.findAllComponents(PaginationWrapper, selector);
-};
-ElementWrapper.prototype.findPanelLayout = function(selector) {
-  let rootSelector = \`.\${PanelLayoutWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PanelLayoutWrapper && PanelLayoutWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PanelLayoutWrapper.rootSelector}, .\${PanelLayoutWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PanelLayoutWrapper);
-};
-
-ElementWrapper.prototype.findAllPanelLayouts = function(selector) {
-  return this.findAllComponents(PanelLayoutWrapper, selector);
-};
-ElementWrapper.prototype.findPieChart = function(selector) {
-  let rootSelector = \`.\${PieChartWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PieChartWrapper && PieChartWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PieChartWrapper.rootSelector}, .\${PieChartWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PieChartWrapper);
-};
-
-ElementWrapper.prototype.findAllPieCharts = function(selector) {
-  return this.findAllComponents(PieChartWrapper, selector);
-};
-ElementWrapper.prototype.findPopover = function(selector) {
-  let rootSelector = \`.\${PopoverWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PopoverWrapper && PopoverWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PopoverWrapper.rootSelector}, .\${PopoverWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PopoverWrapper);
-};
-
-ElementWrapper.prototype.findAllPopovers = function(selector) {
-  return this.findAllComponents(PopoverWrapper, selector);
-};
-ElementWrapper.prototype.findProgressBar = function(selector) {
-  let rootSelector = \`.\${ProgressBarWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ProgressBarWrapper && ProgressBarWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ProgressBarWrapper.rootSelector}, .\${ProgressBarWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ProgressBarWrapper);
-};
-
-ElementWrapper.prototype.findAllProgressBars = function(selector) {
-  return this.findAllComponents(ProgressBarWrapper, selector);
-};
-ElementWrapper.prototype.findPromptInput = function(selector) {
-  let rootSelector = \`.\${PromptInputWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PromptInputWrapper && PromptInputWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PromptInputWrapper.rootSelector}, .\${PromptInputWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PromptInputWrapper);
-};
-
-ElementWrapper.prototype.findAllPromptInputs = function(selector) {
-  return this.findAllComponents(PromptInputWrapper, selector);
-};
-ElementWrapper.prototype.findPropertyFilter = function(selector) {
-  let rootSelector = \`.\${PropertyFilterWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PropertyFilterWrapper && PropertyFilterWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PropertyFilterWrapper.rootSelector}, .\${PropertyFilterWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PropertyFilterWrapper);
-};
-
-ElementWrapper.prototype.findAllPropertyFilters = function(selector) {
-  return this.findAllComponents(PropertyFilterWrapper, selector);
-};
-ElementWrapper.prototype.findRadioButton = function(selector) {
-  let rootSelector = \`.\${RadioButtonWrapper.rootSelector}\`;
-  if("legacyRootSelector" in RadioButtonWrapper && RadioButtonWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${RadioButtonWrapper.rootSelector}, .\${RadioButtonWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, RadioButtonWrapper);
-};
-
-ElementWrapper.prototype.findAllRadioButtons = function(selector) {
-  return this.findAllComponents(RadioButtonWrapper, selector);
-};
-ElementWrapper.prototype.findRadioGroup = function(selector) {
-  let rootSelector = \`.\${RadioGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in RadioGroupWrapper && RadioGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${RadioGroupWrapper.rootSelector}, .\${RadioGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, RadioGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllRadioGroups = function(selector) {
-  return this.findAllComponents(RadioGroupWrapper, selector);
-};
-ElementWrapper.prototype.findS3ResourceSelector = function(selector) {
-  let rootSelector = \`.\${S3ResourceSelectorWrapper.rootSelector}\`;
-  if("legacyRootSelector" in S3ResourceSelectorWrapper && S3ResourceSelectorWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${S3ResourceSelectorWrapper.rootSelector}, .\${S3ResourceSelectorWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, S3ResourceSelectorWrapper);
-};
-
-ElementWrapper.prototype.findAllS3ResourceSelectors = function(selector) {
-  return this.findAllComponents(S3ResourceSelectorWrapper, selector);
-};
-ElementWrapper.prototype.findSegmentedControl = function(selector) {
-  let rootSelector = \`.\${SegmentedControlWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SegmentedControlWrapper && SegmentedControlWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SegmentedControlWrapper.rootSelector}, .\${SegmentedControlWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SegmentedControlWrapper);
-};
-
-ElementWrapper.prototype.findAllSegmentedControls = function(selector) {
-  return this.findAllComponents(SegmentedControlWrapper, selector);
-};
-ElementWrapper.prototype.findSelect = function(selector) {
-  let rootSelector = \`.\${SelectWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SelectWrapper && SelectWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SelectWrapper.rootSelector}, .\${SelectWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SelectWrapper);
-};
-
-ElementWrapper.prototype.findAllSelects = function(selector) {
-  return this.findAllComponents(SelectWrapper, selector);
-};
-ElementWrapper.prototype.findSideNavigation = function(selector) {
-  let rootSelector = \`.\${SideNavigationWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SideNavigationWrapper && SideNavigationWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SideNavigationWrapper.rootSelector}, .\${SideNavigationWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SideNavigationWrapper);
-};
-
-ElementWrapper.prototype.findAllSideNavigations = function(selector) {
-  return this.findAllComponents(SideNavigationWrapper, selector);
-};
-ElementWrapper.prototype.findSkeleton = function(selector) {
-  let rootSelector = \`.\${SkeletonWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SkeletonWrapper && SkeletonWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SkeletonWrapper.rootSelector}, .\${SkeletonWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SkeletonWrapper);
-};
-
-ElementWrapper.prototype.findAllSkeletons = function(selector) {
-  return this.findAllComponents(SkeletonWrapper, selector);
-};
-ElementWrapper.prototype.findSlider = function(selector) {
-  let rootSelector = \`.\${SliderWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SliderWrapper && SliderWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SliderWrapper.rootSelector}, .\${SliderWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SliderWrapper);
-};
-
-ElementWrapper.prototype.findAllSliders = function(selector) {
-  return this.findAllComponents(SliderWrapper, selector);
-};
-ElementWrapper.prototype.findSpaceBetween = function(selector) {
-  let rootSelector = \`.\${SpaceBetweenWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SpaceBetweenWrapper && SpaceBetweenWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SpaceBetweenWrapper.rootSelector}, .\${SpaceBetweenWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpaceBetweenWrapper);
-};
-
-ElementWrapper.prototype.findAllSpaceBetweens = function(selector) {
-  return this.findAllComponents(SpaceBetweenWrapper, selector);
-};
-ElementWrapper.prototype.findSpinner = function(selector) {
-  let rootSelector = \`.\${SpinnerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SpinnerWrapper && SpinnerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SpinnerWrapper.rootSelector}, .\${SpinnerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpinnerWrapper);
-};
-
-ElementWrapper.prototype.findAllSpinners = function(selector) {
-  return this.findAllComponents(SpinnerWrapper, selector);
-};
-ElementWrapper.prototype.findSplitPanel = function(selector) {
-  let rootSelector = \`.\${SplitPanelWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SplitPanelWrapper && SplitPanelWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SplitPanelWrapper.rootSelector}, .\${SplitPanelWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SplitPanelWrapper);
-};
-
-ElementWrapper.prototype.findAllSplitPanels = function(selector) {
-  return this.findAllComponents(SplitPanelWrapper, selector);
-};
-ElementWrapper.prototype.findStatusIndicator = function(selector) {
-  let rootSelector = \`.\${StatusIndicatorWrapper.rootSelector}\`;
-  if("legacyRootSelector" in StatusIndicatorWrapper && StatusIndicatorWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${StatusIndicatorWrapper.rootSelector}, .\${StatusIndicatorWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StatusIndicatorWrapper);
-};
-
-ElementWrapper.prototype.findAllStatusIndicators = function(selector) {
-  return this.findAllComponents(StatusIndicatorWrapper, selector);
-};
-ElementWrapper.prototype.findSteps = function(selector) {
-  let rootSelector = \`.\${StepsWrapper.rootSelector}\`;
-  if("legacyRootSelector" in StepsWrapper && StepsWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${StepsWrapper.rootSelector}, .\${StepsWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StepsWrapper);
-};
-
-ElementWrapper.prototype.findAllSteps = function(selector) {
-  return this.findAllComponents(StepsWrapper, selector);
-};
-ElementWrapper.prototype.findTable = function(selector) {
-  let rootSelector = \`.\${TableWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TableWrapper && TableWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TableWrapper.rootSelector}, .\${TableWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TableWrapper);
-};
-
-ElementWrapper.prototype.findAllTables = function(selector) {
-  return this.findAllComponents(TableWrapper, selector);
-};
-ElementWrapper.prototype.findTabs = function(selector) {
-  let rootSelector = \`.\${TabsWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TabsWrapper && TabsWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TabsWrapper.rootSelector}, .\${TabsWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TabsWrapper);
-};
-
-ElementWrapper.prototype.findAllTabs = function(selector) {
-  return this.findAllComponents(TabsWrapper, selector);
-};
-ElementWrapper.prototype.findTagEditor = function(selector) {
-  let rootSelector = \`.\${TagEditorWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TagEditorWrapper && TagEditorWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TagEditorWrapper.rootSelector}, .\${TagEditorWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TagEditorWrapper);
-};
-
-ElementWrapper.prototype.findAllTagEditors = function(selector) {
-  return this.findAllComponents(TagEditorWrapper, selector);
-};
-ElementWrapper.prototype.findTextContent = function(selector) {
-  let rootSelector = \`.\${TextContentWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TextContentWrapper && TextContentWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TextContentWrapper.rootSelector}, .\${TextContentWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextContentWrapper);
-};
-
-ElementWrapper.prototype.findAllTextContents = function(selector) {
-  return this.findAllComponents(TextContentWrapper, selector);
-};
-ElementWrapper.prototype.findTextFilter = function(selector) {
-  let rootSelector = \`.\${TextFilterWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TextFilterWrapper && TextFilterWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TextFilterWrapper.rootSelector}, .\${TextFilterWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextFilterWrapper);
-};
-
-ElementWrapper.prototype.findAllTextFilters = function(selector) {
-  return this.findAllComponents(TextFilterWrapper, selector);
-};
-ElementWrapper.prototype.findTextarea = function(selector) {
-  let rootSelector = \`.\${TextareaWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TextareaWrapper && TextareaWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TextareaWrapper.rootSelector}, .\${TextareaWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextareaWrapper);
-};
-
-ElementWrapper.prototype.findAllTextareas = function(selector) {
-  return this.findAllComponents(TextareaWrapper, selector);
-};
-ElementWrapper.prototype.findTiles = function(selector) {
-  let rootSelector = \`.\${TilesWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TilesWrapper && TilesWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TilesWrapper.rootSelector}, .\${TilesWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TilesWrapper);
-};
-
-ElementWrapper.prototype.findAllTiles = function(selector) {
-  return this.findAllComponents(TilesWrapper, selector);
-};
-ElementWrapper.prototype.findTimeInput = function(selector) {
-  let rootSelector = \`.\${TimeInputWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TimeInputWrapper && TimeInputWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TimeInputWrapper.rootSelector}, .\${TimeInputWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TimeInputWrapper);
-};
-
-ElementWrapper.prototype.findAllTimeInputs = function(selector) {
-  return this.findAllComponents(TimeInputWrapper, selector);
-};
-ElementWrapper.prototype.findToggle = function(selector) {
-  let rootSelector = \`.\${ToggleWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ToggleWrapper && ToggleWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ToggleWrapper.rootSelector}, .\${ToggleWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleWrapper);
-};
-
-ElementWrapper.prototype.findAllToggles = function(selector) {
-  return this.findAllComponents(ToggleWrapper, selector);
-};
-ElementWrapper.prototype.findToggleButton = function(selector) {
-  let rootSelector = \`.\${ToggleButtonWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ToggleButtonWrapper && ToggleButtonWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ToggleButtonWrapper.rootSelector}, .\${ToggleButtonWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleButtonWrapper);
-};
-
-ElementWrapper.prototype.findAllToggleButtons = function(selector) {
-  return this.findAllComponents(ToggleButtonWrapper, selector);
-};
-ElementWrapper.prototype.findToken = function(selector) {
-  let rootSelector = \`.\${TokenWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TokenWrapper && TokenWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TokenWrapper.rootSelector}, .\${TokenWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenWrapper);
-};
-
-ElementWrapper.prototype.findAllTokens = function(selector) {
-  return this.findAllComponents(TokenWrapper, selector);
-};
-ElementWrapper.prototype.findTokenGroup = function(selector) {
-  let rootSelector = \`.\${TokenGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TokenGroupWrapper && TokenGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TokenGroupWrapper.rootSelector}, .\${TokenGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllTokenGroups = function(selector) {
-  return this.findAllComponents(TokenGroupWrapper, selector);
-};
-ElementWrapper.prototype.findTooltip = function(selector) {
-  let rootSelector = \`.\${TooltipWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TooltipWrapper && TooltipWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TooltipWrapper.rootSelector}, .\${TooltipWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TooltipWrapper);
-};
-
-ElementWrapper.prototype.findAllTooltips = function(selector) {
-  return this.findAllComponents(TooltipWrapper, selector);
-};
-ElementWrapper.prototype.findTopNavigation = function(selector) {
-  let rootSelector = \`.\${TopNavigationWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TopNavigationWrapper && TopNavigationWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TopNavigationWrapper.rootSelector}, .\${TopNavigationWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TopNavigationWrapper);
-};
-
-ElementWrapper.prototype.findAllTopNavigations = function(selector) {
-  return this.findAllComponents(TopNavigationWrapper, selector);
-};
-ElementWrapper.prototype.findTreeView = function(selector) {
-  let rootSelector = \`.\${TreeViewWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TreeViewWrapper && TreeViewWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TreeViewWrapper.rootSelector}, .\${TreeViewWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TreeViewWrapper);
-};
-
-ElementWrapper.prototype.findAllTreeViews = function(selector) {
-  return this.findAllComponents(TreeViewWrapper, selector);
-};
-ElementWrapper.prototype.findTruncatedText = function(selector) {
-  let rootSelector = \`.\${TruncatedTextWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TruncatedTextWrapper && TruncatedTextWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TruncatedTextWrapper.rootSelector}, .\${TruncatedTextWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TruncatedTextWrapper);
-};
-
-ElementWrapper.prototype.findAllTruncatedTexts = function(selector) {
-  return this.findAllComponents(TruncatedTextWrapper, selector);
-};
-ElementWrapper.prototype.findTutorialPanel = function(selector) {
-  let rootSelector = \`.\${TutorialPanelWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TutorialPanelWrapper && TutorialPanelWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TutorialPanelWrapper.rootSelector}, .\${TutorialPanelWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TutorialPanelWrapper);
-};
-
-ElementWrapper.prototype.findAllTutorialPanels = function(selector) {
-  return this.findAllComponents(TutorialPanelWrapper, selector);
-};
-ElementWrapper.prototype.findWizard = function(selector) {
-  let rootSelector = \`.\${WizardWrapper.rootSelector}\`;
-  if("legacyRootSelector" in WizardWrapper && WizardWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${WizardWrapper.rootSelector}, .\${WizardWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, WizardWrapper);
-};
-
-ElementWrapper.prototype.findAllWizards = function(selector) {
-  return this.findAllComponents(WizardWrapper, selector);
-};
-
-ElementWrapper.prototype.findClosestActionCard = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ActionCardWrapper);
-};
-ElementWrapper.prototype.findClosestAlert = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AlertWrapper);
-};
-ElementWrapper.prototype.findClosestAnchorNavigation = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AnchorNavigationWrapper);
-};
-ElementWrapper.prototype.findClosestAnnotation = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AnnotationWrapper);
-};
-ElementWrapper.prototype.findClosestAppLayout = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AppLayoutWrapper);
-};
-ElementWrapper.prototype.findClosestAppLayoutToolbar = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AppLayoutToolbarWrapper);
-};
-ElementWrapper.prototype.findClosestAreaChart = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AreaChartWrapper);
-};
-ElementWrapper.prototype.findClosestAttributeEditor = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AttributeEditorWrapper);
-};
-ElementWrapper.prototype.findClosestAutosuggest = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AutosuggestWrapper);
-};
-ElementWrapper.prototype.findClosestBadge = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(BadgeWrapper);
-};
-ElementWrapper.prototype.findClosestBarChart = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(BarChartWrapper);
-};
-ElementWrapper.prototype.findClosestBox = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(BoxWrapper);
-};
-ElementWrapper.prototype.findClosestBreadcrumbGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(BreadcrumbGroupWrapper);
-};
-ElementWrapper.prototype.findClosestButton = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ButtonWrapper);
-};
-ElementWrapper.prototype.findClosestButtonDropdown = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ButtonDropdownWrapper);
-};
-ElementWrapper.prototype.findClosestButtonGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ButtonGroupWrapper);
-};
-ElementWrapper.prototype.findClosestCalendar = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CalendarWrapper);
-};
-ElementWrapper.prototype.findClosestCards = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CardsWrapper);
-};
-ElementWrapper.prototype.findClosestCheckbox = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CheckboxWrapper);
-};
-ElementWrapper.prototype.findClosestCodeEditor = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CodeEditorWrapper);
-};
-ElementWrapper.prototype.findClosestCollectionPreferences = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CollectionPreferencesWrapper);
-};
-ElementWrapper.prototype.findClosestColumnLayout = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ColumnLayoutWrapper);
-};
-ElementWrapper.prototype.findClosestContainer = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ContainerWrapper);
-};
-ElementWrapper.prototype.findClosestContentLayout = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ContentLayoutWrapper);
-};
-ElementWrapper.prototype.findClosestCopyToClipboard = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CopyToClipboardWrapper);
-};
-ElementWrapper.prototype.findClosestDateInput = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DateInputWrapper);
-};
-ElementWrapper.prototype.findClosestDatePicker = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DatePickerWrapper);
-};
-ElementWrapper.prototype.findClosestDateRangePicker = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DateRangePickerWrapper);
-};
-ElementWrapper.prototype.findClosestDivider = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DividerWrapper);
-};
-ElementWrapper.prototype.findClosestDrawer = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DrawerWrapper);
-};
-ElementWrapper.prototype.findClosestDropdown = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DropdownWrapper);
-};
-ElementWrapper.prototype.findClosestErrorBoundary = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ErrorBoundaryWrapper);
-};
-ElementWrapper.prototype.findClosestExpandableSection = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ExpandableSectionWrapper);
-};
-ElementWrapper.prototype.findClosestFileDropzone = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FileDropzoneWrapper);
-};
-ElementWrapper.prototype.findClosestFileInput = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FileInputWrapper);
-};
-ElementWrapper.prototype.findClosestFileTokenGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FileTokenGroupWrapper);
-};
-ElementWrapper.prototype.findClosestFileUpload = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FileUploadWrapper);
-};
-ElementWrapper.prototype.findClosestFlashbar = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FlashbarWrapper);
-};
-ElementWrapper.prototype.findClosestForm = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FormWrapper);
-};
-ElementWrapper.prototype.findClosestFormField = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FormFieldWrapper);
-};
-ElementWrapper.prototype.findClosestGrid = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(GridWrapper);
-};
-ElementWrapper.prototype.findClosestHeader = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(HeaderWrapper);
-};
-ElementWrapper.prototype.findClosestHelpPanel = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(HelpPanelWrapper);
-};
-ElementWrapper.prototype.findClosestHotspot = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(HotspotWrapper);
-};
-ElementWrapper.prototype.findClosestIcon = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(IconWrapper);
-};
-ElementWrapper.prototype.findClosestInput = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(InputWrapper);
-};
-ElementWrapper.prototype.findClosestItemCard = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ItemCardWrapper);
-};
-ElementWrapper.prototype.findClosestKeyValuePairs = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(KeyValuePairsWrapper);
-};
-ElementWrapper.prototype.findClosestLineChart = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(LineChartWrapper);
-};
-ElementWrapper.prototype.findClosestLink = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(LinkWrapper);
-};
-ElementWrapper.prototype.findClosestList = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ListWrapper);
-};
-ElementWrapper.prototype.findClosestLiveRegion = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(LiveRegionWrapper);
-};
-ElementWrapper.prototype.findClosestMixedLineBarChart = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(MixedLineBarChartWrapper);
-};
-ElementWrapper.prototype.findClosestModal = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ModalWrapper);
-};
-ElementWrapper.prototype.findClosestMultiselect = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(MultiselectWrapper);
-};
-ElementWrapper.prototype.findClosestNavigableGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(NavigableGroupWrapper);
-};
-ElementWrapper.prototype.findClosestPagination = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PaginationWrapper);
-};
-ElementWrapper.prototype.findClosestPanelLayout = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PanelLayoutWrapper);
-};
-ElementWrapper.prototype.findClosestPieChart = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PieChartWrapper);
-};
-ElementWrapper.prototype.findClosestPopover = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PopoverWrapper);
-};
-ElementWrapper.prototype.findClosestProgressBar = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ProgressBarWrapper);
-};
-ElementWrapper.prototype.findClosestPromptInput = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PromptInputWrapper);
-};
-ElementWrapper.prototype.findClosestPropertyFilter = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PropertyFilterWrapper);
-};
-ElementWrapper.prototype.findClosestRadioButton = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(RadioButtonWrapper);
-};
-ElementWrapper.prototype.findClosestRadioGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(RadioGroupWrapper);
-};
-ElementWrapper.prototype.findClosestS3ResourceSelector = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(S3ResourceSelectorWrapper);
-};
-ElementWrapper.prototype.findClosestSegmentedControl = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SegmentedControlWrapper);
-};
-ElementWrapper.prototype.findClosestSelect = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SelectWrapper);
-};
-ElementWrapper.prototype.findClosestSideNavigation = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SideNavigationWrapper);
-};
-ElementWrapper.prototype.findClosestSkeleton = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SkeletonWrapper);
-};
-ElementWrapper.prototype.findClosestSlider = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SliderWrapper);
-};
-ElementWrapper.prototype.findClosestSpaceBetween = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SpaceBetweenWrapper);
-};
-ElementWrapper.prototype.findClosestSpinner = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SpinnerWrapper);
-};
-ElementWrapper.prototype.findClosestSplitPanel = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SplitPanelWrapper);
-};
-ElementWrapper.prototype.findClosestStatusIndicator = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(StatusIndicatorWrapper);
-};
-ElementWrapper.prototype.findClosestSteps = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(StepsWrapper);
-};
-ElementWrapper.prototype.findClosestTable = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TableWrapper);
-};
-ElementWrapper.prototype.findClosestTabs = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TabsWrapper);
-};
-ElementWrapper.prototype.findClosestTagEditor = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TagEditorWrapper);
-};
-ElementWrapper.prototype.findClosestTextContent = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TextContentWrapper);
-};
-ElementWrapper.prototype.findClosestTextFilter = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TextFilterWrapper);
-};
-ElementWrapper.prototype.findClosestTextarea = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TextareaWrapper);
-};
-ElementWrapper.prototype.findClosestTiles = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TilesWrapper);
-};
-ElementWrapper.prototype.findClosestTimeInput = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TimeInputWrapper);
-};
-ElementWrapper.prototype.findClosestToggle = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ToggleWrapper);
-};
-ElementWrapper.prototype.findClosestToggleButton = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ToggleButtonWrapper);
-};
-ElementWrapper.prototype.findClosestToken = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TokenWrapper);
-};
-ElementWrapper.prototype.findClosestTokenGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TokenGroupWrapper);
-};
-ElementWrapper.prototype.findClosestTooltip = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TooltipWrapper);
-};
-ElementWrapper.prototype.findClosestTopNavigation = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TopNavigationWrapper);
-};
-ElementWrapper.prototype.findClosestTreeView = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TreeViewWrapper);
-};
-ElementWrapper.prototype.findClosestTruncatedText = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TruncatedTextWrapper);
-};
-ElementWrapper.prototype.findClosestTutorialPanel = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TutorialPanelWrapper);
-};
-ElementWrapper.prototype.findClosestWizard = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(WizardWrapper);
-};
-
 export default function wrapper(root: Element = document.body) {
-  if (document && document.body && !document.body.contains(root)) {
-    console.warn('[AwsUi] [test-utils] provided element is not part of the document body, interactions may work incorrectly')
-  };
   return new ElementWrapper(root);
 }
 "

From 47030b0f0aad22e73317ff3667fca76623d7daf3 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 1 Jul 2026 10:25:22 +0200
Subject: [PATCH 07/19] chore: Update styles for visual accent

---
 pages/box/style-box.page.tsx                  |  1 -
 .../visual-refresh/color-palette.ts           |  8 ++++
 style-dictionary/visual-refresh/colors.ts     | 48 ++++++++-----------
 3 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/pages/box/style-box.page.tsx b/pages/box/style-box.page.tsx
index e024322868..0eb01e89df 100644
--- a/pages/box/style-box.page.tsx
+++ b/pages/box/style-box.page.tsx
@@ -28,7 +28,6 @@ const ALL_VARIANTS: BoxProps.AccentColor[] = [
 ];
 
 const BOX_VARIANTS: { variant: BoxProps['variant']; label: string; content: string }[] = [
-  { variant: 'h3', label: 'h3', content: 'Heading 3' },
   { variant: 'h4', label: 'h4', content: 'Heading 4' },
   { variant: 'p', label: 'p', content: 'Body paragraph text' },
 ];
diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index 65bede511c..aca8fbd6b0 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -119,6 +119,7 @@ const referenceTokens: ReferenceTokens = {
       700: brand.colorBlue700,
       800: brand.colorBlue800,
       900: brand.colorBlue900,
+      950: brand.colorBlue950,
       1000: brand.colorBlue1000,
     },
     neutral: {
@@ -148,19 +149,25 @@ const referenceTokens: ReferenceTokens = {
       400: brand.colorRed400,
       600: brand.colorRed600,
       900: brand.colorRed900,
+      950: brand.colorRed950,
       1000: brand.colorRed1000,
     },
     success: {
       50: brand.colorGreen50,
+      400: brand.colorGreen400,
       500: brand.colorGreen500,
       600: brand.colorGreen600,
+      950: brand.colorGreen950,
       1000: brand.colorGreen1000,
     },
     warning: {
       50: brand.colorYellow50,
       400: brand.colorYellow400,
       500: brand.colorYellow500,
+      600: brand.colorYellow600,
+      800: brand.colorYellow800,
       900: brand.colorYellow900,
+      950: brand.colorYellow950,
       1000: brand.colorYellow1000,
     },
     info: {
@@ -168,6 +175,7 @@ const referenceTokens: ReferenceTokens = {
       300: brand.colorBlue300,
       400: brand.colorBlue400,
       600: brand.colorBlue600,
+      950: brand.colorBlue950,
       1000: brand.colorBlue1000,
     },
   },
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 6ac6a255c5..050e10b5a8 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -91,34 +91,6 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundNotificationStackBar: '{colorNeutral750}',
   colorBackgroundNotificationStackBarActive: '{colorNeutral750}',
   colorBackgroundNotificationStackBarHover: '{colorNeutral650}',
-
-  // ── Accent (Box `awsui-accent` variant) ───────────────────────────────────
-  // A decorative ornament palette, not semantic status colors. Each accent uses a
-  // tinted background and a matching content color: light mode uses the 50/600 palette
-  // steps, dark mode uses 950/400. These specific steps aren't exposed by the semantic
-  // reference scales (e.g. colorError has no 950, colorSuccess no 400/950, colorWarning
-  // no 600/950), so the palette tokens are referenced directly and no-legacy-tokens is
-  // intentionally disabled for this block.
-  /* eslint-disable @cloudscape-design/components/no-legacy-tokens */
-  colorBackgroundAccentRed: { light: '{colorRed50}', dark: '{colorRed950}' },
-  colorBackgroundAccentYellow: { light: '{colorYellow50}', dark: '{colorYellow950}' },
-  colorBackgroundAccentIndigo: { light: '{colorIndigo50}', dark: '{colorIndigo950}' },
-  colorBackgroundAccentGreen: { light: '{colorGreen50}', dark: '{colorGreen950}' },
-  colorBackgroundAccentOrange: { light: '{colorOrange50}', dark: '{colorOrange950}' },
-  colorBackgroundAccentPurple: { light: '{colorPurple50}', dark: '{colorPurple950}' },
-  colorBackgroundAccentMint: { light: '{colorMint50}', dark: '{colorMint950}' },
-  colorBackgroundAccentLime: { light: '{colorLime50}', dark: '{colorLime950}' },
-  colorBackgroundAccentGrey: { light: '{colorNeutralGrey50}', dark: '{colorNeutralGrey950}' },
-  colorTextAccentRed: { light: '{colorRed600}', dark: '{colorRed400}' },
-  colorTextAccentYellow: { light: '{colorYellow600}', dark: '{colorYellow400}' },
-  colorTextAccentIndigo: { light: '{colorIndigo600}', dark: '{colorIndigo400}' },
-  colorTextAccentGreen: { light: '{colorGreen600}', dark: '{colorGreen400}' },
-  colorTextAccentOrange: { light: '{colorOrange600}', dark: '{colorOrange400}' },
-  colorTextAccentPurple: { light: '{colorPurple600}', dark: '{colorPurple400}' },
-  colorTextAccentMint: { light: '{colorMint600}', dark: '{colorMint400}' },
-  colorTextAccentLime: { light: '{colorLime600}', dark: '{colorLime400}' },
-  colorTextAccentGrey: { light: '{colorNeutralGrey600}', dark: '{colorNeutralGrey400}' },
-  /* eslint-enable @cloudscape-design/components/no-legacy-tokens */
   colorBackgroundPopover: { light: '{colorWhite}', dark: '{colorNeutral800}' },
   colorBackgroundProgressBarValueDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
   colorBackgroundProgressBarDefault: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
@@ -398,6 +370,26 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextBadgeBlue: '{colorTextNotificationDefault}',
   colorTextBadgeRed: '{colorTextNotificationDefault}',
   colorBackgroundCodeView: { light: '#f8f8f8', dark: '#282c34' },
+
+  // ── Accent (Box `awsui-accent` variant) ───────────────────────────────────
+  colorBackgroundAccentRed: { light: '{colorError50}', dark: '{colorError950}' },
+  colorBackgroundAccentYellow: { light: '{colorWarning50}', dark: '{colorWarning950}' },
+  colorBackgroundAccentIndigo: { light: '{colorInfo50}', dark: '{colorInfo950}' },
+  colorBackgroundAccentGreen: { light: '{colorSuccess50}', dark: '{colorSuccess950}' },
+  colorBackgroundAccentOrange: { light: '{colorOrange50}', dark: '{colorOrange950}' },
+  colorBackgroundAccentPurple: { light: '{colorPurple50}', dark: '{colorPurple950}' },
+  colorBackgroundAccentMint: { light: '{colorMint50}', dark: '{colorMint950}' },
+  colorBackgroundAccentLime: { light: '{colorLime50}', dark: '{colorLime950}' },
+  colorBackgroundAccentGrey: { light: '{colorNeutral100}', dark: '{colorNeutral750}' },
+  colorTextAccentRed: { light: '{colorError600}', dark: '{colorError400}' },
+  colorTextAccentYellow: { light: '{colorWarning800}', dark: '{colorWarning400}' },
+  colorTextAccentIndigo: { light: '{colorInfo600}', dark: '{colorInfo400}' },
+  colorTextAccentGreen: { light: '{colorSuccess600}', dark: '{colorSuccess400}' },
+  colorTextAccentOrange: { light: '{colorOrange600}', dark: '{colorOrange400}' },
+  colorTextAccentPurple: { light: '{colorPurple600}', dark: '{colorPurple400}' },
+  colorTextAccentMint: { light: '{colorMint600}', dark: '{colorMint400}' },
+  colorTextAccentLime: { light: '{colorLime600}', dark: '{colorLime400}' },
+  colorTextAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral100}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);

From b5fafda8a6560aec48e65cd630db3dbbf95abb8f Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 2 Jul 2026 15:25:57 +0200
Subject: [PATCH 08/19] Merge remote-tracking branch 'origin/main' into
 onetheme/box-accent


From 1c70c8d9d56896bdf14643d469f0f862c2d3fd29 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 3 Jul 2026 10:02:17 +0200
Subject: [PATCH 09/19] chore: Add visualAccent prop for styled accent styling

- Replace `variant="awsui-accent"` and `accentColor` props with new `visualAccent` prop object
- Add `boxVisualAccentBorderRadius` custom CSS property to design tokens
- Update Box interfaces to support `visualAccent` with color, aspectRatio, and borderRadius options
- Simplify accent box implementation in Box component internal styles
- Replace `accentShape` prop with `aspectRatio` and `borderRadius` in visualAccent object
---
 build-tools/utils/custom-css-properties.js    |    2 +
 pages/box/style-box.page.tsx                  |  259 +-
 .../__snapshots__/themes.test.ts.snap         |  298 +-
 .../__snapshots__/design-tokens.test.ts.snap  |  280 +-
 .../test-utils-wrappers.test.tsx.snap         | 4532 +++++++++++++++++
 src/box/__tests__/box.test.tsx                |   92 +-
 src/box/interfaces.ts                         |   81 +-
 src/box/internal.tsx                          |   39 +-
 src/box/style-box.scss                        |   86 +-
 9 files changed, 5102 insertions(+), 567 deletions(-)

diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js
index 73511df043..76c4803e36 100644
--- a/build-tools/utils/custom-css-properties.js
+++ b/build-tools/utils/custom-css-properties.js
@@ -178,6 +178,8 @@ const customCssPropertiesList = [
   'tokenStyleDismissColorDisabled',
   'tokenStyleDismissColorHover',
   'tokenStyleDismissColorReadOnly',
+  // Box visual accent properties
+  'boxVisualAccentBorderRadius',
   // Item card specific style properties
   'styleItemCardBackgroundDefault',
   'styleItemCardBorderColorDefault',
diff --git a/pages/box/style-box.page.tsx b/pages/box/style-box.page.tsx
index 0eb01e89df..b622edfe98 100644
--- a/pages/box/style-box.page.tsx
+++ b/pages/box/style-box.page.tsx
@@ -3,19 +3,16 @@
 import React from 'react';
 
 import Box, { BoxProps } from '~components/box';
-import ButtonDropdown from '~components/button-dropdown';
-import CopyToClipboard from '~components/copy-to-clipboard';
+import Container from '~components/container';
+import Header from '~components/header';
 import Icon from '~components/icon';
 import KeyValuePairs from '~components/key-value-pairs';
-import Link from '~components/link';
 import List from '~components/list';
-import ProgressBar from '~components/progress-bar';
 import SpaceBetween from '~components/space-between';
-import StatusIndicator from '~components/status-indicator';
 
 // ─── Data ──────────────────────────────────────────────────────────────────────
 
-const ALL_VARIANTS: BoxProps.AccentColor[] = [
+const ALL_VARIANTS: BoxProps.VisualAccent.Color[] = [
   'red',
   'yellow',
   'indigo',
@@ -32,7 +29,7 @@ const BOX_VARIANTS: { variant: BoxProps['variant']; label: string; content: stri
   { variant: 'p', label: 'p', content: 'Body paragraph text' },
 ];
 
-const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.AccentColor }[] = [
+const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.VisualAccent.Color }[] = [
   { id: 'health', content: 'Health overview', icon: 'face-happy', color: 'green' },
   { id: 'functions', content: 'Functions', icon: 'script', color: 'indigo' },
   { id: 'network', content: 'Network configuration', icon: 'globe', color: 'grey' },
@@ -45,157 +42,117 @@ const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.A
 
 export default function StyleBoxPage() {
   return (
-    <article>
-      <Box variant="h1" padding={{ bottom: 'l' }}>
-        Box variant=&quot;awsui-accent&quot; — Direction 4
-      </Box>
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <article style={{ inlineSize: '90%' }}>
+        <Box variant="h1" padding={{ bottom: 'l' }}>
+          Box visualAccent
+        </Box>
 
-      <Box variant="p" color="text-body-secondary" padding={{ bottom: 'xl' }}>
-        Uses the existing Box component with a new <code>awsui-accent</code> variant and <code>accentColor</code> prop.
-        No wrapper component or utility classes needed.
-      </Box>
+        <Box variant="p" color="text-body-secondary" padding={{ bottom: 'xl' }}>
+          Uses the existing Box component with a new <code>visualAccent</code> prop. No wrapper component or utility
+          classes needed.
+        </Box>
 
-      {/* ── Box text variants × accent colors ─────────────────────────── */}
-      <Box variant="h2" padding={{ top: 'l', bottom: 'm' }}>
-        Text inside accent boxes
-      </Box>
+        {/* ── Box text variants × accent colors ─────────────────────────── */}
+        <Box variant="h2" padding={{ top: 'l', bottom: 'm' }}>
+          Text inside accent boxes
+        </Box>
 
-      {BOX_VARIANTS.map(({ variant, label, content }) => (
-        <section key={label}>
-          <Box variant="h3" padding={{ top: 'l', bottom: 's' }}>
-            Wrapping Box variant=&quot;{label}&quot;
-          </Box>
-          <SpaceBetween size="m" direction="horizontal">
-            {ALL_VARIANTS.map(color => (
-              <Box
-                key={color}
-                variant="awsui-accent"
-                accentColor={color}
-                padding={{ horizontal: 'xxxs', vertical: 'n' }}
-              >
-                <Box variant={variant} color="inherit">
-                  {content}
+        {BOX_VARIANTS.map(({ variant, label, content }) => (
+          <section key={label}>
+            <Box variant="h3" padding={{ top: 'l', bottom: 's' }}>
+              Wrapping Box variant=&quot;{label}&quot;
+            </Box>
+            <SpaceBetween size="m" direction="horizontal">
+              {ALL_VARIANTS.map(color => (
+                <Box key={color} visualAccent={{ color }} padding={{ horizontal: 'xxxs', vertical: 'n' }}>
+                  <Box variant={variant} color="inherit">
+                    {content}
+                  </Box>
                 </Box>
-              </Box>
-            ))}
-          </SpaceBetween>
-        </section>
-      ))}
-
-      {/* ── Icons in accent boxes ─────────────────────────────────────── */}
-      <Box variant="h2" padding={{ top: 'xxxl', bottom: 'm' }}>
-        Icons in accent boxes
-      </Box>
-      <SpaceBetween size="m" direction="horizontal">
-        {ALL_VARIANTS.map(color => (
-          <Box key={color} variant="awsui-accent" accentColor={color} accentShape="circle">
-            <Icon name="check" size="medium" />
-          </Box>
+              ))}
+            </SpaceBetween>
+          </section>
         ))}
-      </SpaceBetween>
 
-      {/* ── Application in components ──────────────────────────────────── */}
-      <Box variant="h2" padding={{ top: 'xxxl', bottom: 'm' }}>
-        Application in components
-      </Box>
+        {/* ── Icons in accent boxes ─────────────────────────────────────── */}
+        <Box variant="h2" padding={{ top: 'xxxl', bottom: 'm' }}>
+          Icons in accent boxes
+        </Box>
+        <SpaceBetween size="m" direction="horizontal">
+          {ALL_VARIANTS.map(color => (
+            <Box key={color} visualAccent={{ color, aspectRatio: 'equal', borderRadius: '50%' }}>
+              <Icon name="check" size="medium" />
+            </Box>
+          ))}
+        </SpaceBetween>
 
-      <Box variant="h3" padding={{ bottom: 's' }}>
-        KeyValuePairs
-      </Box>
-      <KeyValuePairs
-        columns={3}
-        items={[
-          {
-            label: 'Distribution ID',
-            value: (
-              <Box variant="awsui-accent" accentColor="indigo">
-                <Box variant="p" color="inherit">
-                  E1WG1ZNPRXT0D4
-                </Box>
-              </Box>
-            ),
-            info: (
-              <Link variant="info" href="#">
-                Info
-              </Link>
-            ),
-          },
-          {
-            label: 'ARN',
-            value: (
-              <CopyToClipboard
-                copyButtonAriaLabel="Copy ARN"
-                copyErrorText="ARN failed to copy"
-                copySuccessText="ARN copied"
-                textToCopy="arn:service23G24::111122223333:distribution/23E1WG1ZNPRXT0D4"
-                variant="inline"
-              />
-            ),
-          },
-          {
-            label: 'Status',
-            value: <StatusIndicator>Available</StatusIndicator>,
-          },
-          {
-            label: 'SSL Certificate',
-            id: 'ssl-certificate-id',
-            value: (
-              <ProgressBar
-                value={30}
-                additionalInfo="Additional information"
-                description="Progress bar description"
-                ariaLabelledby="ssl-certificate-id"
-              />
-            ),
-          },
-          {
-            label: 'Price class',
-            value: (
-              <Box variant="awsui-accent" accentColor="green">
-                <Box variant="p" color="inherit">
-                  Use only US, Canada, Europe
-                </Box>
-              </Box>
-            ),
-          },
-          {
-            label: 'CNAMEs',
-            value: (
-              <Link external={true} href="#">
-                abc.service23G24.xyz
-              </Link>
-            ),
-          },
-        ]}
-      />
+        {/* ── Application in components ──────────────────────────────────── */}
+        <Box variant="h2" padding={{ top: 'xxxl', bottom: 'm' }}>
+          Application in components
+        </Box>
 
-      <Box variant="h3" padding={{ top: 'xl', bottom: 's' }}>
-        List
-      </Box>
-      <List
-        ariaLabel="List with accent icon badges"
-        items={LIST_ITEMS}
-        renderItem={item => ({
-          id: item.id,
-          content: item.content,
-          icon: (
-            <Box variant="awsui-accent" accentColor={item.color}>
-              <Icon name={item.icon as any} size="medium" />
-            </Box>
-          ),
-          actions: (
-            <ButtonDropdown
-              items={[
-                { id: '1', text: 'Action one' },
-                { id: '2', text: 'Action two' },
-                { id: '3', text: 'Action three' },
-              ]}
-              variant="icon"
-              ariaLabel={`Actions for ${item.content}`}
-            />
-          ),
-        })}
-      />
-    </article>
+        <Container header={<Header variant="h3">KeyValuePairs</Header>}>
+          <KeyValuePairs
+            columns={3}
+            items={[
+              {
+                label: 'Components',
+                value: (
+                  <Box
+                    visualAccent={{ color: 'mint' }}
+                    padding={{ horizontal: 'xxxs', vertical: 'xxxs' }}
+                    margin={{ top: 'xxs' }}
+                  >
+                    <span style={{ fontSize: '20px' }}>114</span>
+                  </Box>
+                ),
+              },
+              {
+                label: 'Patterns',
+                value: (
+                  <Box
+                    visualAccent={{ color: 'mint' }}
+                    padding={{ horizontal: 'xxxs', vertical: 'xxxs' }}
+                    margin={{ top: 'xxs' }}
+                  >
+                    <span style={{ fontSize: '20px' }}>81</span>
+                  </Box>
+                ),
+              },
+              {
+                label: 'Demos',
+                value: (
+                  <Box
+                    visualAccent={{ color: 'mint' }}
+                    padding={{ horizontal: 'xxxs', vertical: 'xxxs' }}
+                    margin={{ top: 'xxs' }}
+                  >
+                    <span style={{ fontSize: '20px' }}>35</span>
+                  </Box>
+                ),
+              },
+            ]}
+          />
+        </Container>
+
+        <Box padding={{ top: 'xl' }} />
+        <Container header={<Header variant="h3">List</Header>}>
+          <List
+            ariaLabel="List with accent icon badges"
+            items={LIST_ITEMS}
+            renderItem={item => ({
+              id: item.id,
+              content: item.content,
+              icon: (
+                <Box padding={'s'} visualAccent={{ color: item.color, borderRadius: '6px', aspectRatio: 'equal' }}>
+                  <Icon name={item.icon as any} size="medium" />
+                </Box>
+              ),
+            })}
+          />
+        </Container>
+      </article>
+    </div>
   );
 }
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 0d1a1ee797..0903fa4fdf 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -80,8 +80,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
   "color-background-accent-green": "#f2f8f0",
-  "color-background-accent-grey": "#fcfcfc",
-  "color-background-accent-indigo": "#f5f7ff",
+  "color-background-accent-grey": "#fafafa",
+  "color-background-accent-indigo": "#f1faff",
   "color-background-accent-lime": "#f7ffeb",
   "color-background-accent-mint": "#ebfff6",
   "color-background-accent-orange": "#fff7f5",
@@ -476,14 +476,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
   "color-error-900": "#700000",
+  "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
   "color-gap-global-drawer": "#eaeded",
-  "color-green-400": "#00e500",
-  "color-green-50": "#f2f8f0",
-  "color-green-600": "#1d8102",
-  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(255, 255, 255, 0.7)",
@@ -496,15 +493,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-icon-action-card-default": "#0073bb",
   "color-icon-action-card-disabled": "#aab7b8",
   "color-icon-action-card-hover": "#002b66",
-  "color-indigo-400": "#7598ff",
-  "color-indigo-50": "#f5f7ff",
-  "color-indigo-600": "#295eff",
-  "color-indigo-950": "#001475",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
+  "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
@@ -534,10 +528,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
-  "color-neutral-grey-400": "#b7b7b7",
-  "color-neutral-grey-50": "#fcfcfc",
-  "color-neutral-grey-600": "#6b6b6b",
-  "color-neutral-grey-950": "#151515",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-600": "#db3300",
@@ -553,15 +543,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-primary-700": "#0a4a74",
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
+  "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
-  "color-red-400": "#ff5d64",
-  "color-red-50": "#fdf3f1",
-  "color-red-600": "#d13212",
-  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -572,19 +559,21 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#879596",
   "color-success-1000": "#172211",
+  "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
+  "color-success-950": "#003311",
   "color-text-accent": "#0073bb",
   "color-text-accent-green": "#1d8102",
-  "color-text-accent-grey": "#6b6b6b",
-  "color-text-accent-indigo": "#295eff",
+  "color-text-accent-grey": "#21252c",
+  "color-text-accent-indigo": "#0073bb",
   "color-text-accent-lime": "#008a00",
   "color-text-accent-mint": "#008559",
   "color-text-accent-orange": "#db3300",
   "color-text-accent-purple": "#962eff",
   "color-text-accent-red": "#d13212",
-  "color-text-accent-yellow": "#f2b100",
+  "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -720,12 +709,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
+  "color-warning-600": "#f2b100",
+  "color-warning-800": "#9e6900",
   "color-warning-900": "#906806",
+  "color-warning-950": "#573a00",
   "color-white": "#ffffff",
-  "color-yellow-400": "#ffe347",
-  "color-yellow-50": "#fffef0",
-  "color-yellow-600": "#f2b100",
-  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.25px",
   "font-chart-detail-size": "14px",
   "font-decoration-style-link": "solid",
@@ -1060,8 +1048,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
   "color-background-accent-green": "#003311",
-  "color-background-accent-grey": "#151515",
-  "color-background-accent-indigo": "#001475",
+  "color-background-accent-grey": "#2a2e33",
+  "color-background-accent-indigo": "#00204d",
   "color-background-accent-lime": "#002e00",
   "color-background-accent-mint": "#003322",
   "color-background-accent-orange": "#471100",
@@ -1456,14 +1444,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
   "color-error-900": "#700000",
+  "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#687078",
   "color-foreground-control-read-only": "#95a5a6",
   "color-gap-global-drawer": "#16191f",
-  "color-green-400": "#00e500",
-  "color-green-50": "#f2f8f0",
-  "color-green-600": "#1d8102",
-  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(255, 255, 255, 0.7)",
@@ -1476,15 +1461,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-icon-action-card-default": "#00a1c9",
   "color-icon-action-card-disabled": "#687078",
   "color-icon-action-card-hover": "#44b9d6",
-  "color-indigo-400": "#7598ff",
-  "color-indigo-50": "#f5f7ff",
-  "color-indigo-600": "#295eff",
-  "color-indigo-950": "#001475",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
+  "color-info-950": "#00204d",
   "color-item-selected": "#44b9d6",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
@@ -1514,10 +1496,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
-  "color-neutral-grey-400": "#b7b7b7",
-  "color-neutral-grey-50": "#fcfcfc",
-  "color-neutral-grey-600": "#6b6b6b",
-  "color-neutral-grey-950": "#151515",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-600": "#db3300",
@@ -1533,15 +1511,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-primary-700": "#0a4a74",
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
+  "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
-  "color-red-400": "#ff5d64",
-  "color-red-50": "#fdf3f1",
-  "color-red-600": "#d13212",
-  "color-red-950": "#520000",
   "color-severity-dark-red": "#d63f38",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -1552,13 +1527,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#879596",
   "color-success-1000": "#172211",
+  "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
+  "color-success-950": "#003311",
   "color-text-accent": "#44b9d6",
   "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#b7b7b7",
-  "color-text-accent-indigo": "#7598ff",
+  "color-text-accent-grey": "#fafafa",
+  "color-text-accent-indigo": "#00a1c9",
   "color-text-accent-lime": "#7ae500",
   "color-text-accent-mint": "#00e582",
   "color-text-accent-orange": "#ff6a3d",
@@ -1700,12 +1677,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
+  "color-warning-600": "#f2b100",
+  "color-warning-800": "#9e6900",
   "color-warning-900": "#906806",
+  "color-warning-950": "#573a00",
   "color-white": "#ffffff",
-  "color-yellow-400": "#ffe347",
-  "color-yellow-50": "#fffef0",
-  "color-yellow-600": "#f2b100",
-  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.25px",
   "font-chart-detail-size": "14px",
   "font-decoration-style-link": "solid",
@@ -2040,8 +2016,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
   "color-background-accent-green": "#f2f8f0",
-  "color-background-accent-grey": "#fcfcfc",
-  "color-background-accent-indigo": "#f5f7ff",
+  "color-background-accent-grey": "#fafafa",
+  "color-background-accent-indigo": "#f1faff",
   "color-background-accent-lime": "#f7ffeb",
   "color-background-accent-mint": "#ebfff6",
   "color-background-accent-orange": "#fff7f5",
@@ -2436,14 +2412,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
   "color-error-900": "#700000",
+  "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
   "color-gap-global-drawer": "#eaeded",
-  "color-green-400": "#00e500",
-  "color-green-50": "#f2f8f0",
-  "color-green-600": "#1d8102",
-  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(255, 255, 255, 0.7)",
@@ -2456,15 +2429,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-icon-action-card-default": "#0073bb",
   "color-icon-action-card-disabled": "#aab7b8",
   "color-icon-action-card-hover": "#002b66",
-  "color-indigo-400": "#7598ff",
-  "color-indigo-50": "#f5f7ff",
-  "color-indigo-600": "#295eff",
-  "color-indigo-950": "#001475",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
+  "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
@@ -2494,10 +2464,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
-  "color-neutral-grey-400": "#b7b7b7",
-  "color-neutral-grey-50": "#fcfcfc",
-  "color-neutral-grey-600": "#6b6b6b",
-  "color-neutral-grey-950": "#151515",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-600": "#db3300",
@@ -2513,15 +2479,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-primary-700": "#0a4a74",
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
+  "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
-  "color-red-400": "#ff5d64",
-  "color-red-50": "#fdf3f1",
-  "color-red-600": "#d13212",
-  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -2532,19 +2495,21 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#879596",
   "color-success-1000": "#172211",
+  "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
+  "color-success-950": "#003311",
   "color-text-accent": "#0073bb",
   "color-text-accent-green": "#1d8102",
-  "color-text-accent-grey": "#6b6b6b",
-  "color-text-accent-indigo": "#295eff",
+  "color-text-accent-grey": "#21252c",
+  "color-text-accent-indigo": "#0073bb",
   "color-text-accent-lime": "#008a00",
   "color-text-accent-mint": "#008559",
   "color-text-accent-orange": "#db3300",
   "color-text-accent-purple": "#962eff",
   "color-text-accent-red": "#d13212",
-  "color-text-accent-yellow": "#f2b100",
+  "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -2680,12 +2645,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
+  "color-warning-600": "#f2b100",
+  "color-warning-800": "#9e6900",
   "color-warning-900": "#906806",
+  "color-warning-950": "#573a00",
   "color-white": "#ffffff",
-  "color-yellow-400": "#ffe347",
-  "color-yellow-50": "#fffef0",
-  "color-yellow-600": "#f2b100",
-  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.25px",
   "font-chart-detail-size": "14px",
   "font-decoration-style-link": "solid",
@@ -3020,8 +2984,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
   "color-background-accent-green": "#f2f8f0",
-  "color-background-accent-grey": "#fcfcfc",
-  "color-background-accent-indigo": "#f5f7ff",
+  "color-background-accent-grey": "#fafafa",
+  "color-background-accent-indigo": "#f1faff",
   "color-background-accent-lime": "#f7ffeb",
   "color-background-accent-mint": "#ebfff6",
   "color-background-accent-orange": "#fff7f5",
@@ -3416,14 +3380,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
   "color-error-900": "#700000",
+  "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
   "color-gap-global-drawer": "#eaeded",
-  "color-green-400": "#00e500",
-  "color-green-50": "#f2f8f0",
-  "color-green-600": "#1d8102",
-  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(255, 255, 255, 0.7)",
@@ -3436,15 +3397,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-icon-action-card-default": "#0073bb",
   "color-icon-action-card-disabled": "#aab7b8",
   "color-icon-action-card-hover": "#002b66",
-  "color-indigo-400": "#7598ff",
-  "color-indigo-50": "#f5f7ff",
-  "color-indigo-600": "#295eff",
-  "color-indigo-950": "#001475",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
+  "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
@@ -3474,10 +3432,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
-  "color-neutral-grey-400": "#b7b7b7",
-  "color-neutral-grey-50": "#fcfcfc",
-  "color-neutral-grey-600": "#6b6b6b",
-  "color-neutral-grey-950": "#151515",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-600": "#db3300",
@@ -3493,15 +3447,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-primary-700": "#0a4a74",
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
+  "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
-  "color-red-400": "#ff5d64",
-  "color-red-50": "#fdf3f1",
-  "color-red-600": "#d13212",
-  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -3512,19 +3463,21 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#879596",
   "color-success-1000": "#172211",
+  "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
+  "color-success-950": "#003311",
   "color-text-accent": "#0073bb",
   "color-text-accent-green": "#1d8102",
-  "color-text-accent-grey": "#6b6b6b",
-  "color-text-accent-indigo": "#295eff",
+  "color-text-accent-grey": "#21252c",
+  "color-text-accent-indigo": "#0073bb",
   "color-text-accent-lime": "#008a00",
   "color-text-accent-mint": "#008559",
   "color-text-accent-orange": "#db3300",
   "color-text-accent-purple": "#962eff",
   "color-text-accent-red": "#d13212",
-  "color-text-accent-yellow": "#f2b100",
+  "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -3660,12 +3613,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
+  "color-warning-600": "#f2b100",
+  "color-warning-800": "#9e6900",
   "color-warning-900": "#906806",
+  "color-warning-950": "#573a00",
   "color-white": "#ffffff",
-  "color-yellow-400": "#ffe347",
-  "color-yellow-50": "#fffef0",
-  "color-yellow-600": "#f2b100",
-  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.25px",
   "font-chart-detail-size": "14px",
   "font-decoration-style-link": "solid",
@@ -4000,8 +3952,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
   "color-background-accent-green": "#effff1",
-  "color-background-accent-grey": "#fcfcfc",
-  "color-background-accent-indigo": "#f5f7ff",
+  "color-background-accent-grey": "#f9f9fa",
+  "color-background-accent-indigo": "#f0fbff",
   "color-background-accent-lime": "#f7ffeb",
   "color-background-accent-mint": "#ebfff6",
   "color-background-accent-orange": "#fff7f5",
@@ -4396,14 +4348,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
   "color-error-900": "#700000",
+  "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#656871",
   "color-gap-global-drawer": "#ebebf0",
-  "color-green-400": "#00e500",
-  "color-green-50": "#effff1",
-  "color-green-600": "#00802f",
-  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(35, 43, 55, 0.7)",
@@ -4416,15 +4365,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-icon-action-card-default": "#006ce0",
   "color-icon-action-card-disabled": "#b4b4bb",
   "color-icon-action-card-hover": "#002b66",
-  "color-indigo-400": "#7598ff",
-  "color-indigo-50": "#f5f7ff",
-  "color-indigo-600": "#295eff",
-  "color-indigo-950": "#001475",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
+  "color-info-950": "#00204d",
   "color-item-selected": "#006ce0",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
@@ -4454,10 +4400,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
-  "color-neutral-grey-400": "#b7b7b7",
-  "color-neutral-grey-50": "#fcfcfc",
-  "color-neutral-grey-600": "#6b6b6b",
-  "color-neutral-grey-950": "#151515",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-600": "#db3300",
@@ -4473,15 +4415,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-primary-700": "#004a9e",
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
+  "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
-  "color-red-400": "#ff7a7a",
-  "color-red-50": "#fff5f5",
-  "color-red-600": "#db0000",
-  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -4492,19 +4431,21 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#8c8c94",
   "color-success-1000": "#001401",
+  "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
+  "color-success-950": "#003311",
   "color-text-accent": "#006ce0",
   "color-text-accent-green": "#00802f",
-  "color-text-accent-grey": "#6b6b6b",
-  "color-text-accent-indigo": "#295eff",
+  "color-text-accent-grey": "#1b232d",
+  "color-text-accent-indigo": "#006ce0",
   "color-text-accent-lime": "#008a00",
   "color-text-accent-mint": "#008559",
   "color-text-accent-orange": "#db3300",
   "color-text-accent-purple": "#962eff",
   "color-text-accent-red": "#db0000",
-  "color-text-accent-yellow": "#f2b100",
+  "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -4640,12 +4581,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
+  "color-warning-600": "#f2b100",
+  "color-warning-800": "#9e6900",
   "color-warning-900": "#855900",
+  "color-warning-950": "#573a00",
   "color-white": "#ffffff",
-  "color-yellow-400": "#ffe347",
-  "color-yellow-50": "#fffef0",
-  "color-yellow-600": "#f2b100",
-  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.005em",
   "font-chart-detail-size": "12px",
   "font-decoration-style-link": "solid",
@@ -4980,8 +4920,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
   "color-background-accent-green": "#effff1",
-  "color-background-accent-grey": "#fcfcfc",
-  "color-background-accent-indigo": "#f5f7ff",
+  "color-background-accent-grey": "#f9f9fa",
+  "color-background-accent-indigo": "#f0fbff",
   "color-background-accent-lime": "#f7ffeb",
   "color-background-accent-mint": "#ebfff6",
   "color-background-accent-orange": "#fff7f5",
@@ -5376,14 +5316,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
   "color-error-900": "#700000",
+  "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#656871",
   "color-gap-global-drawer": "#ebebf0",
-  "color-green-400": "#00e500",
-  "color-green-50": "#effff1",
-  "color-green-600": "#00802f",
-  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(35, 43, 55, 0.7)",
@@ -5396,15 +5333,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-icon-action-card-default": "#006ce0",
   "color-icon-action-card-disabled": "#b4b4bb",
   "color-icon-action-card-hover": "#002b66",
-  "color-indigo-400": "#7598ff",
-  "color-indigo-50": "#f5f7ff",
-  "color-indigo-600": "#295eff",
-  "color-indigo-950": "#001475",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
+  "color-info-950": "#00204d",
   "color-item-selected": "#006ce0",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
@@ -5434,10 +5368,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
-  "color-neutral-grey-400": "#b7b7b7",
-  "color-neutral-grey-50": "#fcfcfc",
-  "color-neutral-grey-600": "#6b6b6b",
-  "color-neutral-grey-950": "#151515",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-600": "#db3300",
@@ -5453,15 +5383,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-700": "#004a9e",
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
+  "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
-  "color-red-400": "#ff7a7a",
-  "color-red-50": "#fff5f5",
-  "color-red-600": "#db0000",
-  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -5472,19 +5399,21 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#8c8c94",
   "color-success-1000": "#001401",
+  "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
+  "color-success-950": "#003311",
   "color-text-accent": "#006ce0",
   "color-text-accent-green": "#00802f",
-  "color-text-accent-grey": "#6b6b6b",
-  "color-text-accent-indigo": "#295eff",
+  "color-text-accent-grey": "#1b232d",
+  "color-text-accent-indigo": "#006ce0",
   "color-text-accent-lime": "#008a00",
   "color-text-accent-mint": "#008559",
   "color-text-accent-orange": "#db3300",
   "color-text-accent-purple": "#962eff",
   "color-text-accent-red": "#db0000",
-  "color-text-accent-yellow": "#f2b100",
+  "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -5620,12 +5549,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
+  "color-warning-600": "#f2b100",
+  "color-warning-800": "#9e6900",
   "color-warning-900": "#855900",
+  "color-warning-950": "#573a00",
   "color-white": "#ffffff",
-  "color-yellow-400": "#ffe347",
-  "color-yellow-50": "#fffef0",
-  "color-yellow-600": "#f2b100",
-  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.005em",
   "font-chart-detail-size": "12px",
   "font-decoration-style-link": "solid",
@@ -5960,8 +5888,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
   "color-background-accent-green": "#003311",
-  "color-background-accent-grey": "#151515",
-  "color-background-accent-indigo": "#001475",
+  "color-background-accent-grey": "#232b37",
+  "color-background-accent-indigo": "#00204d",
   "color-background-accent-lime": "#002e00",
   "color-background-accent-mint": "#003322",
   "color-background-accent-orange": "#471100",
@@ -6356,14 +6284,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
   "color-error-900": "#700000",
+  "color-error-950": "#520000",
   "color-foreground-control-default": "#0f141a",
   "color-foreground-control-disabled": "#161d26",
   "color-foreground-control-read-only": "#a4a4ad",
   "color-gap-global-drawer": "#0f141a",
-  "color-green-400": "#00e500",
-  "color-green-50": "#effff1",
-  "color-green-600": "#00802f",
-  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(15, 20, 26, 0.7)",
@@ -6376,15 +6301,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-icon-action-card-default": "#42b4ff",
   "color-icon-action-card-disabled": "#656871",
   "color-icon-action-card-hover": "#75cfff",
-  "color-indigo-400": "#7598ff",
-  "color-indigo-50": "#f5f7ff",
-  "color-indigo-600": "#295eff",
-  "color-indigo-950": "#001475",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
+  "color-info-950": "#00204d",
   "color-item-selected": "#42b4ff",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
@@ -6414,10 +6336,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
-  "color-neutral-grey-400": "#b7b7b7",
-  "color-neutral-grey-50": "#fcfcfc",
-  "color-neutral-grey-600": "#6b6b6b",
-  "color-neutral-grey-950": "#151515",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-600": "#db3300",
@@ -6433,15 +6351,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-700": "#004a9e",
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
+  "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
-  "color-red-400": "#ff7a7a",
-  "color-red-50": "#fff5f5",
-  "color-red-600": "#db0000",
-  "color-red-950": "#520000",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -6452,13 +6367,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#8c8c94",
   "color-success-1000": "#001401",
+  "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
+  "color-success-950": "#003311",
   "color-text-accent": "#42b4ff",
   "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#b7b7b7",
-  "color-text-accent-indigo": "#7598ff",
+  "color-text-accent-grey": "#f9f9fa",
+  "color-text-accent-indigo": "#42b4ff",
   "color-text-accent-lime": "#7ae500",
   "color-text-accent-mint": "#00e582",
   "color-text-accent-orange": "#ff6a3d",
@@ -6600,12 +6517,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
+  "color-warning-600": "#f2b100",
+  "color-warning-800": "#9e6900",
   "color-warning-900": "#855900",
+  "color-warning-950": "#573a00",
   "color-white": "#ffffff",
-  "color-yellow-400": "#ffe347",
-  "color-yellow-50": "#fffef0",
-  "color-yellow-600": "#f2b100",
-  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.005em",
   "font-chart-detail-size": "12px",
   "font-decoration-style-link": "solid",
@@ -6940,8 +6856,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
   "color-background-accent-green": "#003311",
-  "color-background-accent-grey": "#151515",
-  "color-background-accent-indigo": "#001475",
+  "color-background-accent-grey": "#232b37",
+  "color-background-accent-indigo": "#00204d",
   "color-background-accent-lime": "#002e00",
   "color-background-accent-mint": "#003322",
   "color-background-accent-orange": "#471100",
@@ -7336,14 +7252,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
   "color-error-900": "#700000",
+  "color-error-950": "#520000",
   "color-foreground-control-default": "#0f141a",
   "color-foreground-control-disabled": "#161d26",
   "color-foreground-control-read-only": "#a4a4ad",
   "color-gap-global-drawer": "#0f141a",
-  "color-green-400": "#00e500",
-  "color-green-50": "#effff1",
-  "color-green-600": "#00802f",
-  "color-green-950": "#003311",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
   "color-grey-opaque-70": "rgba(15, 20, 26, 0.7)",
@@ -7356,15 +7269,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-icon-action-card-default": "#42b4ff",
   "color-icon-action-card-disabled": "#656871",
   "color-icon-action-card-hover": "#75cfff",
-  "color-indigo-400": "#7598ff",
-  "color-indigo-50": "#f5f7ff",
-  "color-indigo-600": "#295eff",
-  "color-indigo-950": "#001475",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
+  "color-info-950": "#00204d",
   "color-item-selected": "#42b4ff",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
@@ -7394,10 +7304,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
-  "color-neutral-grey-400": "#b7b7b7",
-  "color-neutral-grey-50": "#fcfcfc",
-  "color-neutral-grey-600": "#6b6b6b",
-  "color-neutral-grey-950": "#151515",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-600": "#db3300",
@@ -7413,15 +7319,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-700": "#004a9e",
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
+  "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
-  "color-red-400": "#ff7a7a",
-  "color-red-50": "#fff5f5",
-  "color-red-600": "#db0000",
-  "color-red-950": "#520000",
   "color-severity-dark-red": "#d63f38",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -7432,13 +7335,15 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#8c8c94",
   "color-success-1000": "#001401",
+  "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
+  "color-success-950": "#003311",
   "color-text-accent": "#42b4ff",
   "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#b7b7b7",
-  "color-text-accent-indigo": "#7598ff",
+  "color-text-accent-grey": "#f9f9fa",
+  "color-text-accent-indigo": "#42b4ff",
   "color-text-accent-lime": "#7ae500",
   "color-text-accent-mint": "#00e582",
   "color-text-accent-orange": "#ff6a3d",
@@ -7580,12 +7485,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
   "color-warning-500": "#fbd332",
+  "color-warning-600": "#f2b100",
+  "color-warning-800": "#9e6900",
   "color-warning-900": "#855900",
+  "color-warning-950": "#573a00",
   "color-white": "#ffffff",
-  "color-yellow-400": "#ffe347",
-  "color-yellow-50": "#fffef0",
-  "color-yellow-600": "#f2b100",
-  "color-yellow-950": "#573a00",
   "font-button-letter-spacing": "0.005em",
   "font-chart-detail-size": "12px",
   "font-decoration-style-link": "solid",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index d8a446454d..647e121a4f 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -207,15 +207,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#fcfcfc",
+            "dark": "#2a2e33",
+            "light": "#fafafa",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#f5f7ff",
+            "dark": "#00204d",
+            "light": "#f1faff",
           },
         },
         "color-background-accent-lime": {
@@ -2454,15 +2454,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#6b6b6b",
+            "dark": "#fafafa",
+            "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#295eff",
+            "dark": "#00a1c9",
+            "light": "#0073bb",
           },
         },
         "color-text-accent-lime": {
@@ -2504,7 +2504,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#f2b100",
+            "light": "#9e6900",
           },
         },
         "color-text-action-card-disabled": {
@@ -3937,15 +3937,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#fcfcfc",
+            "dark": "#2a2e33",
+            "light": "#fafafa",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#f5f7ff",
+            "dark": "#00204d",
+            "light": "#f1faff",
           },
         },
         "color-background-accent-lime": {
@@ -6184,15 +6184,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#6b6b6b",
+            "dark": "#fafafa",
+            "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#295eff",
+            "dark": "#00a1c9",
+            "light": "#0073bb",
           },
         },
         "color-text-accent-lime": {
@@ -6234,7 +6234,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#f2b100",
+            "light": "#9e6900",
           },
         },
         "color-text-action-card-disabled": {
@@ -7667,15 +7667,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#fcfcfc",
+            "dark": "#2a2e33",
+            "light": "#fafafa",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#f5f7ff",
+            "dark": "#00204d",
+            "light": "#f1faff",
           },
         },
         "color-background-accent-lime": {
@@ -9914,15 +9914,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#6b6b6b",
+            "dark": "#fafafa",
+            "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#295eff",
+            "dark": "#00a1c9",
+            "light": "#0073bb",
           },
         },
         "color-text-accent-lime": {
@@ -9964,7 +9964,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#f2b100",
+            "light": "#9e6900",
           },
         },
         "color-text-action-card-disabled": {
@@ -11397,15 +11397,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#fcfcfc",
+            "dark": "#2a2e33",
+            "light": "#fafafa",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#f5f7ff",
+            "dark": "#00204d",
+            "light": "#f1faff",
           },
         },
         "color-background-accent-lime": {
@@ -13644,15 +13644,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#6b6b6b",
+            "dark": "#fafafa",
+            "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#295eff",
+            "dark": "#00a1c9",
+            "light": "#0073bb",
           },
         },
         "color-text-accent-lime": {
@@ -13694,7 +13694,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#f2b100",
+            "light": "#9e6900",
           },
         },
         "color-text-action-card-disabled": {
@@ -15127,15 +15127,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#fcfcfc",
+            "dark": "#2a2e33",
+            "light": "#fafafa",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#f5f7ff",
+            "dark": "#00204d",
+            "light": "#f1faff",
           },
         },
         "color-background-accent-lime": {
@@ -17374,15 +17374,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#6b6b6b",
+            "dark": "#fafafa",
+            "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#295eff",
+            "dark": "#00a1c9",
+            "light": "#0073bb",
           },
         },
         "color-text-accent-lime": {
@@ -17424,7 +17424,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#f2b100",
+            "light": "#9e6900",
           },
         },
         "color-text-action-card-disabled": {
@@ -18857,15 +18857,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#151515",
+            "dark": "#2a2e33",
+            "light": "#2a2e33",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#001475",
+            "dark": "#00204d",
+            "light": "#00204d",
           },
         },
         "color-background-accent-lime": {
@@ -21104,15 +21104,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#b7b7b7",
+            "dark": "#fafafa",
+            "light": "#fafafa",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#7598ff",
+            "dark": "#00a1c9",
+            "light": "#00a1c9",
           },
         },
         "color-text-accent-lime": {
@@ -22587,15 +22587,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-accent-grey": {
       "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#151515",
-        "light": "#fcfcfc",
+        "dark": "#2a2e33",
+        "light": "#fafafa",
       },
     },
     "color-background-accent-indigo": {
       "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#001475",
-        "light": "#f5f7ff",
+        "dark": "#00204d",
+        "light": "#f1faff",
       },
     },
     "color-background-accent-lime": {
@@ -24834,15 +24834,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-text-accent-grey": {
       "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#b7b7b7",
-        "light": "#6b6b6b",
+        "dark": "#fafafa",
+        "light": "#21252c",
       },
     },
     "color-text-accent-indigo": {
       "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#7598ff",
-        "light": "#295eff",
+        "dark": "#00a1c9",
+        "light": "#0073bb",
       },
     },
     "color-text-accent-lime": {
@@ -24884,7 +24884,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ffe347",
-        "light": "#f2b100",
+        "light": "#9e6900",
       },
     },
     "color-text-action-card-disabled": {
@@ -26322,15 +26322,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#fcfcfc",
+            "dark": "#232b37",
+            "light": "#f9f9fa",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#f5f7ff",
+            "dark": "#00204d",
+            "light": "#f0fbff",
           },
         },
         "color-background-accent-lime": {
@@ -28569,15 +28569,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#6b6b6b",
+            "dark": "#f9f9fa",
+            "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#295eff",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-accent-lime": {
@@ -28619,7 +28619,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#f2b100",
+            "light": "#9e6900",
           },
         },
         "color-text-action-card-disabled": {
@@ -30052,15 +30052,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#151515",
+            "dark": "#232b37",
+            "light": "#232b37",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#001475",
+            "dark": "#00204d",
+            "light": "#00204d",
           },
         },
         "color-background-accent-lime": {
@@ -32299,15 +32299,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#b7b7b7",
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#7598ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-text-accent-lime": {
@@ -33782,15 +33782,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#fcfcfc",
+            "dark": "#232b37",
+            "light": "#f9f9fa",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#f5f7ff",
+            "dark": "#00204d",
+            "light": "#f0fbff",
           },
         },
         "color-background-accent-lime": {
@@ -36029,15 +36029,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#6b6b6b",
+            "dark": "#f9f9fa",
+            "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#295eff",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-accent-lime": {
@@ -36079,7 +36079,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#f2b100",
+            "light": "#9e6900",
           },
         },
         "color-text-action-card-disabled": {
@@ -37512,15 +37512,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#fcfcfc",
+            "dark": "#232b37",
+            "light": "#f9f9fa",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#f5f7ff",
+            "dark": "#00204d",
+            "light": "#f0fbff",
           },
         },
         "color-background-accent-lime": {
@@ -39759,15 +39759,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#6b6b6b",
+            "dark": "#f9f9fa",
+            "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#295eff",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-accent-lime": {
@@ -39809,7 +39809,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#f2b100",
+            "light": "#9e6900",
           },
         },
         "color-text-action-card-disabled": {
@@ -41242,15 +41242,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#fcfcfc",
+            "dark": "#232b37",
+            "light": "#f9f9fa",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#f5f7ff",
+            "dark": "#00204d",
+            "light": "#f0fbff",
           },
         },
         "color-background-accent-lime": {
@@ -43489,15 +43489,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#6b6b6b",
+            "dark": "#f9f9fa",
+            "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#295eff",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-accent-lime": {
@@ -43539,7 +43539,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#f2b100",
+            "light": "#9e6900",
           },
         },
         "color-text-action-card-disabled": {
@@ -44972,15 +44972,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#fcfcfc",
+            "dark": "#232b37",
+            "light": "#f9f9fa",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#f5f7ff",
+            "dark": "#00204d",
+            "light": "#f0fbff",
           },
         },
         "color-background-accent-lime": {
@@ -47219,15 +47219,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#6b6b6b",
+            "dark": "#f9f9fa",
+            "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#295eff",
+            "dark": "#42b4ff",
+            "light": "#006ce0",
           },
         },
         "color-text-accent-lime": {
@@ -47269,7 +47269,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#f2b100",
+            "light": "#9e6900",
           },
         },
         "color-text-action-card-disabled": {
@@ -48702,15 +48702,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#151515",
+            "dark": "#232b37",
+            "light": "#232b37",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#001475",
+            "dark": "#00204d",
+            "light": "#00204d",
           },
         },
         "color-background-accent-lime": {
@@ -50949,15 +50949,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#b7b7b7",
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#7598ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-text-accent-lime": {
@@ -52432,15 +52432,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#151515",
-            "light": "#151515",
+            "dark": "#232b37",
+            "light": "#232b37",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#001475",
-            "light": "#001475",
+            "dark": "#00204d",
+            "light": "#00204d",
           },
         },
         "color-background-accent-lime": {
@@ -54679,15 +54679,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#b7b7b7",
-            "light": "#b7b7b7",
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#7598ff",
-            "light": "#7598ff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-text-accent-lime": {
@@ -56162,15 +56162,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-accent-grey": {
       "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#151515",
-        "light": "#fcfcfc",
+        "dark": "#232b37",
+        "light": "#f9f9fa",
       },
     },
     "color-background-accent-indigo": {
       "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#001475",
-        "light": "#f5f7ff",
+        "dark": "#00204d",
+        "light": "#f0fbff",
       },
     },
     "color-background-accent-lime": {
@@ -58409,15 +58409,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-text-accent-grey": {
       "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#b7b7b7",
-        "light": "#6b6b6b",
+        "dark": "#f9f9fa",
+        "light": "#1b232d",
       },
     },
     "color-text-accent-indigo": {
       "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#7598ff",
-        "light": "#295eff",
+        "dark": "#42b4ff",
+        "light": "#006ce0",
       },
     },
     "color-text-accent-lime": {
@@ -58459,7 +58459,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ffe347",
-        "light": "#f2b100",
+        "light": "#9e6900",
       },
     },
     "color-text-action-card-disabled": {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
index 941f04fc00..118ac8d1b2 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
@@ -2,9 +2,4541 @@
 
 exports[`Generate test utils ElementWrapper dom ElementWrapper matches the snapshot 1`] = `
 "
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
 import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
+import { appendSelector } from '@cloudscape-design/test-utils-core/utils';
+
 export { ElementWrapper };
+
+import ActionCardWrapper from './action-card';
+import AlertWrapper from './alert';
+import AnchorNavigationWrapper from './anchor-navigation';
+import AnnotationWrapper from './annotation';
+import AppLayoutWrapper from './app-layout';
+import AppLayoutToolbarWrapper from './app-layout-toolbar';
+import AreaChartWrapper from './area-chart';
+import AttributeEditorWrapper from './attribute-editor';
+import AutosuggestWrapper from './autosuggest';
+import BadgeWrapper from './badge';
+import BarChartWrapper from './bar-chart';
+import BoxWrapper from './box';
+import BreadcrumbGroupWrapper from './breadcrumb-group';
+import ButtonWrapper from './button';
+import ButtonDropdownWrapper from './button-dropdown';
+import ButtonGroupWrapper from './button-group';
+import CalendarWrapper from './calendar';
+import CardsWrapper from './cards';
+import CheckboxWrapper from './checkbox';
+import CodeEditorWrapper from './code-editor';
+import CollectionPreferencesWrapper from './collection-preferences';
+import ColumnLayoutWrapper from './column-layout';
+import ContainerWrapper from './container';
+import ContentLayoutWrapper from './content-layout';
+import CopyToClipboardWrapper from './copy-to-clipboard';
+import DateInputWrapper from './date-input';
+import DatePickerWrapper from './date-picker';
+import DateRangePickerWrapper from './date-range-picker';
+import DividerWrapper from './divider';
+import DrawerWrapper from './drawer';
+import DropdownWrapper from './dropdown';
+import ErrorBoundaryWrapper from './error-boundary';
+import ExpandableSectionWrapper from './expandable-section';
+import FileDropzoneWrapper from './file-dropzone';
+import FileInputWrapper from './file-input';
+import FileTokenGroupWrapper from './file-token-group';
+import FileUploadWrapper from './file-upload';
+import FlashbarWrapper from './flashbar';
+import FormWrapper from './form';
+import FormFieldWrapper from './form-field';
+import GridWrapper from './grid';
+import HeaderWrapper from './header';
+import HelpPanelWrapper from './help-panel';
+import HotspotWrapper from './hotspot';
+import IconWrapper from './icon';
+import InputWrapper from './input';
+import ItemCardWrapper from './item-card';
+import KeyValuePairsWrapper from './key-value-pairs';
+import LineChartWrapper from './line-chart';
+import LinkWrapper from './link';
+import ListWrapper from './list';
+import LiveRegionWrapper from './live-region';
+import MixedLineBarChartWrapper from './mixed-line-bar-chart';
+import ModalWrapper from './modal';
+import MultiselectWrapper from './multiselect';
+import NavigableGroupWrapper from './navigable-group';
+import PaginationWrapper from './pagination';
+import PanelLayoutWrapper from './panel-layout';
+import PieChartWrapper from './pie-chart';
+import PopoverWrapper from './popover';
+import ProgressBarWrapper from './progress-bar';
+import PromptInputWrapper from './prompt-input';
+import PropertyFilterWrapper from './property-filter';
+import RadioButtonWrapper from './radio-button';
+import RadioGroupWrapper from './radio-group';
+import S3ResourceSelectorWrapper from './s3-resource-selector';
+import SegmentedControlWrapper from './segmented-control';
+import SelectWrapper from './select';
+import SideNavigationWrapper from './side-navigation';
+import SkeletonWrapper from './skeleton';
+import SliderWrapper from './slider';
+import SpaceBetweenWrapper from './space-between';
+import SpinnerWrapper from './spinner';
+import SplitPanelWrapper from './split-panel';
+import StatusIndicatorWrapper from './status-indicator';
+import StepsWrapper from './steps';
+import TableWrapper from './table';
+import TabsWrapper from './tabs';
+import TagEditorWrapper from './tag-editor';
+import TextContentWrapper from './text-content';
+import TextFilterWrapper from './text-filter';
+import TextareaWrapper from './textarea';
+import TilesWrapper from './tiles';
+import TimeInputWrapper from './time-input';
+import ToggleWrapper from './toggle';
+import ToggleButtonWrapper from './toggle-button';
+import TokenWrapper from './token';
+import TokenGroupWrapper from './token-group';
+import TooltipWrapper from './tooltip';
+import TopNavigationWrapper from './top-navigation';
+import TreeViewWrapper from './tree-view';
+import TruncatedTextWrapper from './truncated-text';
+import TutorialPanelWrapper from './tutorial-panel';
+import WizardWrapper from './wizard';
+
+
+export { ActionCardWrapper };
+export { AlertWrapper };
+export { AnchorNavigationWrapper };
+export { AnnotationWrapper };
+export { AppLayoutWrapper };
+export { AppLayoutToolbarWrapper };
+export { AreaChartWrapper };
+export { AttributeEditorWrapper };
+export { AutosuggestWrapper };
+export { BadgeWrapper };
+export { BarChartWrapper };
+export { BoxWrapper };
+export { BreadcrumbGroupWrapper };
+export { ButtonWrapper };
+export { ButtonDropdownWrapper };
+export { ButtonGroupWrapper };
+export { CalendarWrapper };
+export { CardsWrapper };
+export { CheckboxWrapper };
+export { CodeEditorWrapper };
+export { CollectionPreferencesWrapper };
+export { ColumnLayoutWrapper };
+export { ContainerWrapper };
+export { ContentLayoutWrapper };
+export { CopyToClipboardWrapper };
+export { DateInputWrapper };
+export { DatePickerWrapper };
+export { DateRangePickerWrapper };
+export { DividerWrapper };
+export { DrawerWrapper };
+export { DropdownWrapper };
+export { ErrorBoundaryWrapper };
+export { ExpandableSectionWrapper };
+export { FileDropzoneWrapper };
+export { FileInputWrapper };
+export { FileTokenGroupWrapper };
+export { FileUploadWrapper };
+export { FlashbarWrapper };
+export { FormWrapper };
+export { FormFieldWrapper };
+export { GridWrapper };
+export { HeaderWrapper };
+export { HelpPanelWrapper };
+export { HotspotWrapper };
+export { IconWrapper };
+export { InputWrapper };
+export { ItemCardWrapper };
+export { KeyValuePairsWrapper };
+export { LineChartWrapper };
+export { LinkWrapper };
+export { ListWrapper };
+export { LiveRegionWrapper };
+export { MixedLineBarChartWrapper };
+export { ModalWrapper };
+export { MultiselectWrapper };
+export { NavigableGroupWrapper };
+export { PaginationWrapper };
+export { PanelLayoutWrapper };
+export { PieChartWrapper };
+export { PopoverWrapper };
+export { ProgressBarWrapper };
+export { PromptInputWrapper };
+export { PropertyFilterWrapper };
+export { RadioButtonWrapper };
+export { RadioGroupWrapper };
+export { S3ResourceSelectorWrapper };
+export { SegmentedControlWrapper };
+export { SelectWrapper };
+export { SideNavigationWrapper };
+export { SkeletonWrapper };
+export { SliderWrapper };
+export { SpaceBetweenWrapper };
+export { SpinnerWrapper };
+export { SplitPanelWrapper };
+export { StatusIndicatorWrapper };
+export { StepsWrapper };
+export { TableWrapper };
+export { TabsWrapper };
+export { TagEditorWrapper };
+export { TextContentWrapper };
+export { TextFilterWrapper };
+export { TextareaWrapper };
+export { TilesWrapper };
+export { TimeInputWrapper };
+export { ToggleWrapper };
+export { ToggleButtonWrapper };
+export { TokenWrapper };
+export { TokenGroupWrapper };
+export { TooltipWrapper };
+export { TopNavigationWrapper };
+export { TreeViewWrapper };
+export { TruncatedTextWrapper };
+export { TutorialPanelWrapper };
+export { WizardWrapper };
+
+declare module '@cloudscape-design/test-utils-core/dist/dom' {
+   interface ElementWrapper {
+    
+/**
+ * Returns the wrapper of the first ActionCard that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ActionCard.
+ * If no matching ActionCard is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ActionCardWrapper | null}
+ */
+findActionCard(selector?: string): ActionCardWrapper | null;
+
+/**
+ * Returns an array of ActionCard wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ActionCards inside the current wrapper.
+ * If no matching ActionCard is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ActionCardWrapper>}
+ */
+findAllActionCards(selector?: string): Array<ActionCardWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ActionCard for the current element,
+ * or the element itself if it is an instance of ActionCard.
+ * If no ActionCard is found, returns \`null\`.
+ *
+ * @returns {ActionCardWrapper | null}
+ */
+findClosestActionCard(): ActionCardWrapper | null;
+/**
+ * Returns the wrapper of the first Alert that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Alert.
+ * If no matching Alert is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AlertWrapper | null}
+ */
+findAlert(selector?: string): AlertWrapper | null;
+
+/**
+ * Returns an array of Alert wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Alerts inside the current wrapper.
+ * If no matching Alert is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AlertWrapper>}
+ */
+findAllAlerts(selector?: string): Array<AlertWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Alert for the current element,
+ * or the element itself if it is an instance of Alert.
+ * If no Alert is found, returns \`null\`.
+ *
+ * @returns {AlertWrapper | null}
+ */
+findClosestAlert(): AlertWrapper | null;
+/**
+ * Returns the wrapper of the first AnchorNavigation that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first AnchorNavigation.
+ * If no matching AnchorNavigation is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AnchorNavigationWrapper | null}
+ */
+findAnchorNavigation(selector?: string): AnchorNavigationWrapper | null;
+
+/**
+ * Returns an array of AnchorNavigation wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the AnchorNavigations inside the current wrapper.
+ * If no matching AnchorNavigation is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AnchorNavigationWrapper>}
+ */
+findAllAnchorNavigations(selector?: string): Array<AnchorNavigationWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent AnchorNavigation for the current element,
+ * or the element itself if it is an instance of AnchorNavigation.
+ * If no AnchorNavigation is found, returns \`null\`.
+ *
+ * @returns {AnchorNavigationWrapper | null}
+ */
+findClosestAnchorNavigation(): AnchorNavigationWrapper | null;
+/**
+ * Returns the wrapper of the first Annotation that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Annotation.
+ * If no matching Annotation is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AnnotationWrapper | null}
+ */
+findAnnotation(selector?: string): AnnotationWrapper | null;
+
+/**
+ * Returns an array of Annotation wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Annotations inside the current wrapper.
+ * If no matching Annotation is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AnnotationWrapper>}
+ */
+findAllAnnotations(selector?: string): Array<AnnotationWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Annotation for the current element,
+ * or the element itself if it is an instance of Annotation.
+ * If no Annotation is found, returns \`null\`.
+ *
+ * @returns {AnnotationWrapper | null}
+ */
+findClosestAnnotation(): AnnotationWrapper | null;
+/**
+ * Returns the wrapper of the first AppLayout that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first AppLayout.
+ * If no matching AppLayout is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AppLayoutWrapper | null}
+ */
+findAppLayout(selector?: string): AppLayoutWrapper | null;
+
+/**
+ * Returns an array of AppLayout wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the AppLayouts inside the current wrapper.
+ * If no matching AppLayout is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AppLayoutWrapper>}
+ */
+findAllAppLayouts(selector?: string): Array<AppLayoutWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent AppLayout for the current element,
+ * or the element itself if it is an instance of AppLayout.
+ * If no AppLayout is found, returns \`null\`.
+ *
+ * @returns {AppLayoutWrapper | null}
+ */
+findClosestAppLayout(): AppLayoutWrapper | null;
+/**
+ * Returns the wrapper of the first AppLayoutToolbar that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first AppLayoutToolbar.
+ * If no matching AppLayoutToolbar is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AppLayoutToolbarWrapper | null}
+ */
+findAppLayoutToolbar(selector?: string): AppLayoutToolbarWrapper | null;
+
+/**
+ * Returns an array of AppLayoutToolbar wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the AppLayoutToolbars inside the current wrapper.
+ * If no matching AppLayoutToolbar is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AppLayoutToolbarWrapper>}
+ */
+findAllAppLayoutToolbars(selector?: string): Array<AppLayoutToolbarWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent AppLayoutToolbar for the current element,
+ * or the element itself if it is an instance of AppLayoutToolbar.
+ * If no AppLayoutToolbar is found, returns \`null\`.
+ *
+ * @returns {AppLayoutToolbarWrapper | null}
+ */
+findClosestAppLayoutToolbar(): AppLayoutToolbarWrapper | null;
+/**
+ * Returns the wrapper of the first AreaChart that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first AreaChart.
+ * If no matching AreaChart is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AreaChartWrapper | null}
+ */
+findAreaChart(selector?: string): AreaChartWrapper | null;
+
+/**
+ * Returns an array of AreaChart wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the AreaCharts inside the current wrapper.
+ * If no matching AreaChart is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AreaChartWrapper>}
+ */
+findAllAreaCharts(selector?: string): Array<AreaChartWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent AreaChart for the current element,
+ * or the element itself if it is an instance of AreaChart.
+ * If no AreaChart is found, returns \`null\`.
+ *
+ * @returns {AreaChartWrapper | null}
+ */
+findClosestAreaChart(): AreaChartWrapper | null;
+/**
+ * Returns the wrapper of the first AttributeEditor that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first AttributeEditor.
+ * If no matching AttributeEditor is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AttributeEditorWrapper | null}
+ */
+findAttributeEditor(selector?: string): AttributeEditorWrapper | null;
+
+/**
+ * Returns an array of AttributeEditor wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the AttributeEditors inside the current wrapper.
+ * If no matching AttributeEditor is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AttributeEditorWrapper>}
+ */
+findAllAttributeEditors(selector?: string): Array<AttributeEditorWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent AttributeEditor for the current element,
+ * or the element itself if it is an instance of AttributeEditor.
+ * If no AttributeEditor is found, returns \`null\`.
+ *
+ * @returns {AttributeEditorWrapper | null}
+ */
+findClosestAttributeEditor(): AttributeEditorWrapper | null;
+/**
+ * Returns the wrapper of the first Autosuggest that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Autosuggest.
+ * If no matching Autosuggest is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AutosuggestWrapper | null}
+ */
+findAutosuggest(selector?: string): AutosuggestWrapper | null;
+
+/**
+ * Returns an array of Autosuggest wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Autosuggests inside the current wrapper.
+ * If no matching Autosuggest is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AutosuggestWrapper>}
+ */
+findAllAutosuggests(selector?: string): Array<AutosuggestWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Autosuggest for the current element,
+ * or the element itself if it is an instance of Autosuggest.
+ * If no Autosuggest is found, returns \`null\`.
+ *
+ * @returns {AutosuggestWrapper | null}
+ */
+findClosestAutosuggest(): AutosuggestWrapper | null;
+/**
+ * Returns the wrapper of the first Badge that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Badge.
+ * If no matching Badge is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {BadgeWrapper | null}
+ */
+findBadge(selector?: string): BadgeWrapper | null;
+
+/**
+ * Returns an array of Badge wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Badges inside the current wrapper.
+ * If no matching Badge is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<BadgeWrapper>}
+ */
+findAllBadges(selector?: string): Array<BadgeWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Badge for the current element,
+ * or the element itself if it is an instance of Badge.
+ * If no Badge is found, returns \`null\`.
+ *
+ * @returns {BadgeWrapper | null}
+ */
+findClosestBadge(): BadgeWrapper | null;
+/**
+ * Returns the wrapper of the first BarChart that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first BarChart.
+ * If no matching BarChart is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {BarChartWrapper | null}
+ */
+findBarChart(selector?: string): BarChartWrapper | null;
+
+/**
+ * Returns an array of BarChart wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the BarCharts inside the current wrapper.
+ * If no matching BarChart is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<BarChartWrapper>}
+ */
+findAllBarCharts(selector?: string): Array<BarChartWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent BarChart for the current element,
+ * or the element itself if it is an instance of BarChart.
+ * If no BarChart is found, returns \`null\`.
+ *
+ * @returns {BarChartWrapper | null}
+ */
+findClosestBarChart(): BarChartWrapper | null;
+/**
+ * Returns the wrapper of the first Box that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Box.
+ * If no matching Box is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {BoxWrapper | null}
+ */
+findBox(selector?: string): BoxWrapper | null;
+
+/**
+ * Returns an array of Box wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Boxes inside the current wrapper.
+ * If no matching Box is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<BoxWrapper>}
+ */
+findAllBoxes(selector?: string): Array<BoxWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Box for the current element,
+ * or the element itself if it is an instance of Box.
+ * If no Box is found, returns \`null\`.
+ *
+ * @returns {BoxWrapper | null}
+ */
+findClosestBox(): BoxWrapper | null;
+/**
+ * Returns the wrapper of the first BreadcrumbGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first BreadcrumbGroup.
+ * If no matching BreadcrumbGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {BreadcrumbGroupWrapper | null}
+ */
+findBreadcrumbGroup(selector?: string): BreadcrumbGroupWrapper | null;
+
+/**
+ * Returns an array of BreadcrumbGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the BreadcrumbGroups inside the current wrapper.
+ * If no matching BreadcrumbGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<BreadcrumbGroupWrapper>}
+ */
+findAllBreadcrumbGroups(selector?: string): Array<BreadcrumbGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent BreadcrumbGroup for the current element,
+ * or the element itself if it is an instance of BreadcrumbGroup.
+ * If no BreadcrumbGroup is found, returns \`null\`.
+ *
+ * @returns {BreadcrumbGroupWrapper | null}
+ */
+findClosestBreadcrumbGroup(): BreadcrumbGroupWrapper | null;
+/**
+ * Returns the wrapper of the first Button that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Button.
+ * If no matching Button is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ButtonWrapper | null}
+ */
+findButton(selector?: string): ButtonWrapper | null;
+
+/**
+ * Returns an array of Button wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Buttons inside the current wrapper.
+ * If no matching Button is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ButtonWrapper>}
+ */
+findAllButtons(selector?: string): Array<ButtonWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Button for the current element,
+ * or the element itself if it is an instance of Button.
+ * If no Button is found, returns \`null\`.
+ *
+ * @returns {ButtonWrapper | null}
+ */
+findClosestButton(): ButtonWrapper | null;
+/**
+ * Returns the wrapper of the first ButtonDropdown that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ButtonDropdown.
+ * If no matching ButtonDropdown is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ButtonDropdownWrapper | null}
+ */
+findButtonDropdown(selector?: string): ButtonDropdownWrapper | null;
+
+/**
+ * Returns an array of ButtonDropdown wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ButtonDropdowns inside the current wrapper.
+ * If no matching ButtonDropdown is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ButtonDropdownWrapper>}
+ */
+findAllButtonDropdowns(selector?: string): Array<ButtonDropdownWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ButtonDropdown for the current element,
+ * or the element itself if it is an instance of ButtonDropdown.
+ * If no ButtonDropdown is found, returns \`null\`.
+ *
+ * @returns {ButtonDropdownWrapper | null}
+ */
+findClosestButtonDropdown(): ButtonDropdownWrapper | null;
+/**
+ * Returns the wrapper of the first ButtonGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ButtonGroup.
+ * If no matching ButtonGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ButtonGroupWrapper | null}
+ */
+findButtonGroup(selector?: string): ButtonGroupWrapper | null;
+
+/**
+ * Returns an array of ButtonGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ButtonGroups inside the current wrapper.
+ * If no matching ButtonGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ButtonGroupWrapper>}
+ */
+findAllButtonGroups(selector?: string): Array<ButtonGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ButtonGroup for the current element,
+ * or the element itself if it is an instance of ButtonGroup.
+ * If no ButtonGroup is found, returns \`null\`.
+ *
+ * @returns {ButtonGroupWrapper | null}
+ */
+findClosestButtonGroup(): ButtonGroupWrapper | null;
+/**
+ * Returns the wrapper of the first Calendar that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Calendar.
+ * If no matching Calendar is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CalendarWrapper | null}
+ */
+findCalendar(selector?: string): CalendarWrapper | null;
+
+/**
+ * Returns an array of Calendar wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Calendars inside the current wrapper.
+ * If no matching Calendar is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CalendarWrapper>}
+ */
+findAllCalendars(selector?: string): Array<CalendarWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Calendar for the current element,
+ * or the element itself if it is an instance of Calendar.
+ * If no Calendar is found, returns \`null\`.
+ *
+ * @returns {CalendarWrapper | null}
+ */
+findClosestCalendar(): CalendarWrapper | null;
+/**
+ * Returns the wrapper of the first Cards that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Cards.
+ * If no matching Cards is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CardsWrapper | null}
+ */
+findCards(selector?: string): CardsWrapper | null;
+
+/**
+ * Returns an array of Cards wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Cards inside the current wrapper.
+ * If no matching Cards is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CardsWrapper>}
+ */
+findAllCards(selector?: string): Array<CardsWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Cards for the current element,
+ * or the element itself if it is an instance of Cards.
+ * If no Cards is found, returns \`null\`.
+ *
+ * @returns {CardsWrapper | null}
+ */
+findClosestCards(): CardsWrapper | null;
+/**
+ * Returns the wrapper of the first Checkbox that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Checkbox.
+ * If no matching Checkbox is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CheckboxWrapper | null}
+ */
+findCheckbox(selector?: string): CheckboxWrapper | null;
+
+/**
+ * Returns an array of Checkbox wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Checkboxes inside the current wrapper.
+ * If no matching Checkbox is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CheckboxWrapper>}
+ */
+findAllCheckboxes(selector?: string): Array<CheckboxWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Checkbox for the current element,
+ * or the element itself if it is an instance of Checkbox.
+ * If no Checkbox is found, returns \`null\`.
+ *
+ * @returns {CheckboxWrapper | null}
+ */
+findClosestCheckbox(): CheckboxWrapper | null;
+/**
+ * Returns the wrapper of the first CodeEditor that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first CodeEditor.
+ * If no matching CodeEditor is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CodeEditorWrapper | null}
+ */
+findCodeEditor(selector?: string): CodeEditorWrapper | null;
+
+/**
+ * Returns an array of CodeEditor wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the CodeEditors inside the current wrapper.
+ * If no matching CodeEditor is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CodeEditorWrapper>}
+ */
+findAllCodeEditors(selector?: string): Array<CodeEditorWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent CodeEditor for the current element,
+ * or the element itself if it is an instance of CodeEditor.
+ * If no CodeEditor is found, returns \`null\`.
+ *
+ * @returns {CodeEditorWrapper | null}
+ */
+findClosestCodeEditor(): CodeEditorWrapper | null;
+/**
+ * Returns the wrapper of the first CollectionPreferences that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first CollectionPreferences.
+ * If no matching CollectionPreferences is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CollectionPreferencesWrapper | null}
+ */
+findCollectionPreferences(selector?: string): CollectionPreferencesWrapper | null;
+
+/**
+ * Returns an array of CollectionPreferences wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the CollectionPreferences inside the current wrapper.
+ * If no matching CollectionPreferences is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CollectionPreferencesWrapper>}
+ */
+findAllCollectionPreferences(selector?: string): Array<CollectionPreferencesWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent CollectionPreferences for the current element,
+ * or the element itself if it is an instance of CollectionPreferences.
+ * If no CollectionPreferences is found, returns \`null\`.
+ *
+ * @returns {CollectionPreferencesWrapper | null}
+ */
+findClosestCollectionPreferences(): CollectionPreferencesWrapper | null;
+/**
+ * Returns the wrapper of the first ColumnLayout that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ColumnLayout.
+ * If no matching ColumnLayout is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ColumnLayoutWrapper | null}
+ */
+findColumnLayout(selector?: string): ColumnLayoutWrapper | null;
+
+/**
+ * Returns an array of ColumnLayout wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ColumnLayouts inside the current wrapper.
+ * If no matching ColumnLayout is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ColumnLayoutWrapper>}
+ */
+findAllColumnLayouts(selector?: string): Array<ColumnLayoutWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ColumnLayout for the current element,
+ * or the element itself if it is an instance of ColumnLayout.
+ * If no ColumnLayout is found, returns \`null\`.
+ *
+ * @returns {ColumnLayoutWrapper | null}
+ */
+findClosestColumnLayout(): ColumnLayoutWrapper | null;
+/**
+ * Returns the wrapper of the first Container that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Container.
+ * If no matching Container is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ContainerWrapper | null}
+ */
+findContainer(selector?: string): ContainerWrapper | null;
+
+/**
+ * Returns an array of Container wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Containers inside the current wrapper.
+ * If no matching Container is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ContainerWrapper>}
+ */
+findAllContainers(selector?: string): Array<ContainerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Container for the current element,
+ * or the element itself if it is an instance of Container.
+ * If no Container is found, returns \`null\`.
+ *
+ * @returns {ContainerWrapper | null}
+ */
+findClosestContainer(): ContainerWrapper | null;
+/**
+ * Returns the wrapper of the first ContentLayout that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ContentLayout.
+ * If no matching ContentLayout is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ContentLayoutWrapper | null}
+ */
+findContentLayout(selector?: string): ContentLayoutWrapper | null;
+
+/**
+ * Returns an array of ContentLayout wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ContentLayouts inside the current wrapper.
+ * If no matching ContentLayout is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ContentLayoutWrapper>}
+ */
+findAllContentLayouts(selector?: string): Array<ContentLayoutWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ContentLayout for the current element,
+ * or the element itself if it is an instance of ContentLayout.
+ * If no ContentLayout is found, returns \`null\`.
+ *
+ * @returns {ContentLayoutWrapper | null}
+ */
+findClosestContentLayout(): ContentLayoutWrapper | null;
+/**
+ * Returns the wrapper of the first CopyToClipboard that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first CopyToClipboard.
+ * If no matching CopyToClipboard is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CopyToClipboardWrapper | null}
+ */
+findCopyToClipboard(selector?: string): CopyToClipboardWrapper | null;
+
+/**
+ * Returns an array of CopyToClipboard wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the CopyToClipboards inside the current wrapper.
+ * If no matching CopyToClipboard is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CopyToClipboardWrapper>}
+ */
+findAllCopyToClipboards(selector?: string): Array<CopyToClipboardWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent CopyToClipboard for the current element,
+ * or the element itself if it is an instance of CopyToClipboard.
+ * If no CopyToClipboard is found, returns \`null\`.
+ *
+ * @returns {CopyToClipboardWrapper | null}
+ */
+findClosestCopyToClipboard(): CopyToClipboardWrapper | null;
+/**
+ * Returns the wrapper of the first DateInput that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first DateInput.
+ * If no matching DateInput is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DateInputWrapper | null}
+ */
+findDateInput(selector?: string): DateInputWrapper | null;
+
+/**
+ * Returns an array of DateInput wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the DateInputs inside the current wrapper.
+ * If no matching DateInput is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DateInputWrapper>}
+ */
+findAllDateInputs(selector?: string): Array<DateInputWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent DateInput for the current element,
+ * or the element itself if it is an instance of DateInput.
+ * If no DateInput is found, returns \`null\`.
+ *
+ * @returns {DateInputWrapper | null}
+ */
+findClosestDateInput(): DateInputWrapper | null;
+/**
+ * Returns the wrapper of the first DatePicker that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first DatePicker.
+ * If no matching DatePicker is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DatePickerWrapper | null}
+ */
+findDatePicker(selector?: string): DatePickerWrapper | null;
+
+/**
+ * Returns an array of DatePicker wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the DatePickers inside the current wrapper.
+ * If no matching DatePicker is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DatePickerWrapper>}
+ */
+findAllDatePickers(selector?: string): Array<DatePickerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent DatePicker for the current element,
+ * or the element itself if it is an instance of DatePicker.
+ * If no DatePicker is found, returns \`null\`.
+ *
+ * @returns {DatePickerWrapper | null}
+ */
+findClosestDatePicker(): DatePickerWrapper | null;
+/**
+ * Returns the wrapper of the first DateRangePicker that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first DateRangePicker.
+ * If no matching DateRangePicker is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DateRangePickerWrapper | null}
+ */
+findDateRangePicker(selector?: string): DateRangePickerWrapper | null;
+
+/**
+ * Returns an array of DateRangePicker wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the DateRangePickers inside the current wrapper.
+ * If no matching DateRangePicker is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DateRangePickerWrapper>}
+ */
+findAllDateRangePickers(selector?: string): Array<DateRangePickerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent DateRangePicker for the current element,
+ * or the element itself if it is an instance of DateRangePicker.
+ * If no DateRangePicker is found, returns \`null\`.
+ *
+ * @returns {DateRangePickerWrapper | null}
+ */
+findClosestDateRangePicker(): DateRangePickerWrapper | null;
+/**
+ * Returns the wrapper of the first Divider that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Divider.
+ * If no matching Divider is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DividerWrapper | null}
+ */
+findDivider(selector?: string): DividerWrapper | null;
+
+/**
+ * Returns an array of Divider wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Dividers inside the current wrapper.
+ * If no matching Divider is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DividerWrapper>}
+ */
+findAllDividers(selector?: string): Array<DividerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Divider for the current element,
+ * or the element itself if it is an instance of Divider.
+ * If no Divider is found, returns \`null\`.
+ *
+ * @returns {DividerWrapper | null}
+ */
+findClosestDivider(): DividerWrapper | null;
+/**
+ * Returns the wrapper of the first Drawer that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Drawer.
+ * If no matching Drawer is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DrawerWrapper | null}
+ */
+findDrawer(selector?: string): DrawerWrapper | null;
+
+/**
+ * Returns an array of Drawer wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Drawers inside the current wrapper.
+ * If no matching Drawer is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DrawerWrapper>}
+ */
+findAllDrawers(selector?: string): Array<DrawerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Drawer for the current element,
+ * or the element itself if it is an instance of Drawer.
+ * If no Drawer is found, returns \`null\`.
+ *
+ * @returns {DrawerWrapper | null}
+ */
+findClosestDrawer(): DrawerWrapper | null;
+/**
+ * Returns the wrapper of the first Dropdown that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Dropdown.
+ * If no matching Dropdown is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DropdownWrapper | null}
+ */
+findDropdown(selector?: string): DropdownWrapper | null;
+
+/**
+ * Returns an array of Dropdown wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Dropdowns inside the current wrapper.
+ * If no matching Dropdown is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DropdownWrapper>}
+ */
+findAllDropdowns(selector?: string): Array<DropdownWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Dropdown for the current element,
+ * or the element itself if it is an instance of Dropdown.
+ * If no Dropdown is found, returns \`null\`.
+ *
+ * @returns {DropdownWrapper | null}
+ */
+findClosestDropdown(): DropdownWrapper | null;
+/**
+ * Returns the wrapper of the first ErrorBoundary that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ErrorBoundary.
+ * If no matching ErrorBoundary is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ErrorBoundaryWrapper | null}
+ */
+findErrorBoundary(selector?: string): ErrorBoundaryWrapper | null;
+
+/**
+ * Returns an array of ErrorBoundary wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ErrorBoundaries inside the current wrapper.
+ * If no matching ErrorBoundary is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ErrorBoundaryWrapper>}
+ */
+findAllErrorBoundaries(selector?: string): Array<ErrorBoundaryWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ErrorBoundary for the current element,
+ * or the element itself if it is an instance of ErrorBoundary.
+ * If no ErrorBoundary is found, returns \`null\`.
+ *
+ * @returns {ErrorBoundaryWrapper | null}
+ */
+findClosestErrorBoundary(): ErrorBoundaryWrapper | null;
+/**
+ * Returns the wrapper of the first ExpandableSection that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ExpandableSection.
+ * If no matching ExpandableSection is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ExpandableSectionWrapper | null}
+ */
+findExpandableSection(selector?: string): ExpandableSectionWrapper | null;
+
+/**
+ * Returns an array of ExpandableSection wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ExpandableSections inside the current wrapper.
+ * If no matching ExpandableSection is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ExpandableSectionWrapper>}
+ */
+findAllExpandableSections(selector?: string): Array<ExpandableSectionWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ExpandableSection for the current element,
+ * or the element itself if it is an instance of ExpandableSection.
+ * If no ExpandableSection is found, returns \`null\`.
+ *
+ * @returns {ExpandableSectionWrapper | null}
+ */
+findClosestExpandableSection(): ExpandableSectionWrapper | null;
+/**
+ * Returns the wrapper of the first FileDropzone that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first FileDropzone.
+ * If no matching FileDropzone is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FileDropzoneWrapper | null}
+ */
+findFileDropzone(selector?: string): FileDropzoneWrapper | null;
+
+/**
+ * Returns an array of FileDropzone wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the FileDropzones inside the current wrapper.
+ * If no matching FileDropzone is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FileDropzoneWrapper>}
+ */
+findAllFileDropzones(selector?: string): Array<FileDropzoneWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent FileDropzone for the current element,
+ * or the element itself if it is an instance of FileDropzone.
+ * If no FileDropzone is found, returns \`null\`.
+ *
+ * @returns {FileDropzoneWrapper | null}
+ */
+findClosestFileDropzone(): FileDropzoneWrapper | null;
+/**
+ * Returns the wrapper of the first FileInput that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first FileInput.
+ * If no matching FileInput is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FileInputWrapper | null}
+ */
+findFileInput(selector?: string): FileInputWrapper | null;
+
+/**
+ * Returns an array of FileInput wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the FileInputs inside the current wrapper.
+ * If no matching FileInput is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FileInputWrapper>}
+ */
+findAllFileInputs(selector?: string): Array<FileInputWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent FileInput for the current element,
+ * or the element itself if it is an instance of FileInput.
+ * If no FileInput is found, returns \`null\`.
+ *
+ * @returns {FileInputWrapper | null}
+ */
+findClosestFileInput(): FileInputWrapper | null;
+/**
+ * Returns the wrapper of the first FileTokenGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first FileTokenGroup.
+ * If no matching FileTokenGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FileTokenGroupWrapper | null}
+ */
+findFileTokenGroup(selector?: string): FileTokenGroupWrapper | null;
+
+/**
+ * Returns an array of FileTokenGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the FileTokenGroups inside the current wrapper.
+ * If no matching FileTokenGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FileTokenGroupWrapper>}
+ */
+findAllFileTokenGroups(selector?: string): Array<FileTokenGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent FileTokenGroup for the current element,
+ * or the element itself if it is an instance of FileTokenGroup.
+ * If no FileTokenGroup is found, returns \`null\`.
+ *
+ * @returns {FileTokenGroupWrapper | null}
+ */
+findClosestFileTokenGroup(): FileTokenGroupWrapper | null;
+/**
+ * Returns the wrapper of the first FileUpload that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first FileUpload.
+ * If no matching FileUpload is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FileUploadWrapper | null}
+ */
+findFileUpload(selector?: string): FileUploadWrapper | null;
+
+/**
+ * Returns an array of FileUpload wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the FileUploads inside the current wrapper.
+ * If no matching FileUpload is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FileUploadWrapper>}
+ */
+findAllFileUploads(selector?: string): Array<FileUploadWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent FileUpload for the current element,
+ * or the element itself if it is an instance of FileUpload.
+ * If no FileUpload is found, returns \`null\`.
+ *
+ * @returns {FileUploadWrapper | null}
+ */
+findClosestFileUpload(): FileUploadWrapper | null;
+/**
+ * Returns the wrapper of the first Flashbar that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Flashbar.
+ * If no matching Flashbar is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FlashbarWrapper | null}
+ */
+findFlashbar(selector?: string): FlashbarWrapper | null;
+
+/**
+ * Returns an array of Flashbar wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Flashbars inside the current wrapper.
+ * If no matching Flashbar is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FlashbarWrapper>}
+ */
+findAllFlashbars(selector?: string): Array<FlashbarWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Flashbar for the current element,
+ * or the element itself if it is an instance of Flashbar.
+ * If no Flashbar is found, returns \`null\`.
+ *
+ * @returns {FlashbarWrapper | null}
+ */
+findClosestFlashbar(): FlashbarWrapper | null;
+/**
+ * Returns the wrapper of the first Form that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Form.
+ * If no matching Form is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FormWrapper | null}
+ */
+findForm(selector?: string): FormWrapper | null;
+
+/**
+ * Returns an array of Form wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Forms inside the current wrapper.
+ * If no matching Form is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FormWrapper>}
+ */
+findAllForms(selector?: string): Array<FormWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Form for the current element,
+ * or the element itself if it is an instance of Form.
+ * If no Form is found, returns \`null\`.
+ *
+ * @returns {FormWrapper | null}
+ */
+findClosestForm(): FormWrapper | null;
+/**
+ * Returns the wrapper of the first FormField that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first FormField.
+ * If no matching FormField is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FormFieldWrapper | null}
+ */
+findFormField(selector?: string): FormFieldWrapper | null;
+
+/**
+ * Returns an array of FormField wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the FormFields inside the current wrapper.
+ * If no matching FormField is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FormFieldWrapper>}
+ */
+findAllFormFields(selector?: string): Array<FormFieldWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent FormField for the current element,
+ * or the element itself if it is an instance of FormField.
+ * If no FormField is found, returns \`null\`.
+ *
+ * @returns {FormFieldWrapper | null}
+ */
+findClosestFormField(): FormFieldWrapper | null;
+/**
+ * Returns the wrapper of the first Grid that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Grid.
+ * If no matching Grid is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {GridWrapper | null}
+ */
+findGrid(selector?: string): GridWrapper | null;
+
+/**
+ * Returns an array of Grid wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Grids inside the current wrapper.
+ * If no matching Grid is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<GridWrapper>}
+ */
+findAllGrids(selector?: string): Array<GridWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Grid for the current element,
+ * or the element itself if it is an instance of Grid.
+ * If no Grid is found, returns \`null\`.
+ *
+ * @returns {GridWrapper | null}
+ */
+findClosestGrid(): GridWrapper | null;
+/**
+ * Returns the wrapper of the first Header that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Header.
+ * If no matching Header is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {HeaderWrapper | null}
+ */
+findHeader(selector?: string): HeaderWrapper | null;
+
+/**
+ * Returns an array of Header wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Headers inside the current wrapper.
+ * If no matching Header is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<HeaderWrapper>}
+ */
+findAllHeaders(selector?: string): Array<HeaderWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Header for the current element,
+ * or the element itself if it is an instance of Header.
+ * If no Header is found, returns \`null\`.
+ *
+ * @returns {HeaderWrapper | null}
+ */
+findClosestHeader(): HeaderWrapper | null;
+/**
+ * Returns the wrapper of the first HelpPanel that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first HelpPanel.
+ * If no matching HelpPanel is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {HelpPanelWrapper | null}
+ */
+findHelpPanel(selector?: string): HelpPanelWrapper | null;
+
+/**
+ * Returns an array of HelpPanel wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the HelpPanels inside the current wrapper.
+ * If no matching HelpPanel is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<HelpPanelWrapper>}
+ */
+findAllHelpPanels(selector?: string): Array<HelpPanelWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent HelpPanel for the current element,
+ * or the element itself if it is an instance of HelpPanel.
+ * If no HelpPanel is found, returns \`null\`.
+ *
+ * @returns {HelpPanelWrapper | null}
+ */
+findClosestHelpPanel(): HelpPanelWrapper | null;
+/**
+ * Returns the wrapper of the first Hotspot that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Hotspot.
+ * If no matching Hotspot is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {HotspotWrapper | null}
+ */
+findHotspot(selector?: string): HotspotWrapper | null;
+
+/**
+ * Returns an array of Hotspot wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Hotspots inside the current wrapper.
+ * If no matching Hotspot is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<HotspotWrapper>}
+ */
+findAllHotspots(selector?: string): Array<HotspotWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Hotspot for the current element,
+ * or the element itself if it is an instance of Hotspot.
+ * If no Hotspot is found, returns \`null\`.
+ *
+ * @returns {HotspotWrapper | null}
+ */
+findClosestHotspot(): HotspotWrapper | null;
+/**
+ * Returns the wrapper of the first Icon that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Icon.
+ * If no matching Icon is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {IconWrapper | null}
+ */
+findIcon(selector?: string): IconWrapper | null;
+
+/**
+ * Returns an array of Icon wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Icons inside the current wrapper.
+ * If no matching Icon is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<IconWrapper>}
+ */
+findAllIcons(selector?: string): Array<IconWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Icon for the current element,
+ * or the element itself if it is an instance of Icon.
+ * If no Icon is found, returns \`null\`.
+ *
+ * @returns {IconWrapper | null}
+ */
+findClosestIcon(): IconWrapper | null;
+/**
+ * Returns the wrapper of the first Input that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Input.
+ * If no matching Input is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {InputWrapper | null}
+ */
+findInput(selector?: string): InputWrapper | null;
+
+/**
+ * Returns an array of Input wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Inputs inside the current wrapper.
+ * If no matching Input is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<InputWrapper>}
+ */
+findAllInputs(selector?: string): Array<InputWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Input for the current element,
+ * or the element itself if it is an instance of Input.
+ * If no Input is found, returns \`null\`.
+ *
+ * @returns {InputWrapper | null}
+ */
+findClosestInput(): InputWrapper | null;
+/**
+ * Returns the wrapper of the first ItemCard that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ItemCard.
+ * If no matching ItemCard is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ItemCardWrapper | null}
+ */
+findItemCard(selector?: string): ItemCardWrapper | null;
+
+/**
+ * Returns an array of ItemCard wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ItemCards inside the current wrapper.
+ * If no matching ItemCard is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ItemCardWrapper>}
+ */
+findAllItemCards(selector?: string): Array<ItemCardWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ItemCard for the current element,
+ * or the element itself if it is an instance of ItemCard.
+ * If no ItemCard is found, returns \`null\`.
+ *
+ * @returns {ItemCardWrapper | null}
+ */
+findClosestItemCard(): ItemCardWrapper | null;
+/**
+ * Returns the wrapper of the first KeyValuePairs that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first KeyValuePairs.
+ * If no matching KeyValuePairs is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {KeyValuePairsWrapper | null}
+ */
+findKeyValuePairs(selector?: string): KeyValuePairsWrapper | null;
+
+/**
+ * Returns an array of KeyValuePairs wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the KeyValuePairs inside the current wrapper.
+ * If no matching KeyValuePairs is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<KeyValuePairsWrapper>}
+ */
+findAllKeyValuePairs(selector?: string): Array<KeyValuePairsWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent KeyValuePairs for the current element,
+ * or the element itself if it is an instance of KeyValuePairs.
+ * If no KeyValuePairs is found, returns \`null\`.
+ *
+ * @returns {KeyValuePairsWrapper | null}
+ */
+findClosestKeyValuePairs(): KeyValuePairsWrapper | null;
+/**
+ * Returns the wrapper of the first LineChart that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first LineChart.
+ * If no matching LineChart is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {LineChartWrapper | null}
+ */
+findLineChart(selector?: string): LineChartWrapper | null;
+
+/**
+ * Returns an array of LineChart wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the LineCharts inside the current wrapper.
+ * If no matching LineChart is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<LineChartWrapper>}
+ */
+findAllLineCharts(selector?: string): Array<LineChartWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent LineChart for the current element,
+ * or the element itself if it is an instance of LineChart.
+ * If no LineChart is found, returns \`null\`.
+ *
+ * @returns {LineChartWrapper | null}
+ */
+findClosestLineChart(): LineChartWrapper | null;
+/**
+ * Returns the wrapper of the first Link that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Link.
+ * If no matching Link is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {LinkWrapper | null}
+ */
+findLink(selector?: string): LinkWrapper | null;
+
+/**
+ * Returns an array of Link wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Links inside the current wrapper.
+ * If no matching Link is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<LinkWrapper>}
+ */
+findAllLinks(selector?: string): Array<LinkWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Link for the current element,
+ * or the element itself if it is an instance of Link.
+ * If no Link is found, returns \`null\`.
+ *
+ * @returns {LinkWrapper | null}
+ */
+findClosestLink(): LinkWrapper | null;
+/**
+ * Returns the wrapper of the first List that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first List.
+ * If no matching List is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ListWrapper | null}
+ */
+findList(selector?: string): ListWrapper | null;
+
+/**
+ * Returns an array of List wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Lists inside the current wrapper.
+ * If no matching List is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ListWrapper>}
+ */
+findAllLists(selector?: string): Array<ListWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent List for the current element,
+ * or the element itself if it is an instance of List.
+ * If no List is found, returns \`null\`.
+ *
+ * @returns {ListWrapper | null}
+ */
+findClosestList(): ListWrapper | null;
+/**
+ * Returns the wrapper of the first LiveRegion that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first LiveRegion.
+ * If no matching LiveRegion is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {LiveRegionWrapper | null}
+ */
+findLiveRegion(selector?: string): LiveRegionWrapper | null;
+
+/**
+ * Returns an array of LiveRegion wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the LiveRegions inside the current wrapper.
+ * If no matching LiveRegion is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<LiveRegionWrapper>}
+ */
+findAllLiveRegions(selector?: string): Array<LiveRegionWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent LiveRegion for the current element,
+ * or the element itself if it is an instance of LiveRegion.
+ * If no LiveRegion is found, returns \`null\`.
+ *
+ * @returns {LiveRegionWrapper | null}
+ */
+findClosestLiveRegion(): LiveRegionWrapper | null;
+/**
+ * Returns the wrapper of the first MixedLineBarChart that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first MixedLineBarChart.
+ * If no matching MixedLineBarChart is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {MixedLineBarChartWrapper | null}
+ */
+findMixedLineBarChart(selector?: string): MixedLineBarChartWrapper | null;
+
+/**
+ * Returns an array of MixedLineBarChart wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the MixedLineBarCharts inside the current wrapper.
+ * If no matching MixedLineBarChart is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<MixedLineBarChartWrapper>}
+ */
+findAllMixedLineBarCharts(selector?: string): Array<MixedLineBarChartWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent MixedLineBarChart for the current element,
+ * or the element itself if it is an instance of MixedLineBarChart.
+ * If no MixedLineBarChart is found, returns \`null\`.
+ *
+ * @returns {MixedLineBarChartWrapper | null}
+ */
+findClosestMixedLineBarChart(): MixedLineBarChartWrapper | null;
+/**
+ * Returns the wrapper of the first Modal that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Modal.
+ * If no matching Modal is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ModalWrapper | null}
+ */
+findModal(selector?: string): ModalWrapper | null;
+
+/**
+ * Returns an array of Modal wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Modals inside the current wrapper.
+ * If no matching Modal is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ModalWrapper>}
+ */
+findAllModals(selector?: string): Array<ModalWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Modal for the current element,
+ * or the element itself if it is an instance of Modal.
+ * If no Modal is found, returns \`null\`.
+ *
+ * @returns {ModalWrapper | null}
+ */
+findClosestModal(): ModalWrapper | null;
+/**
+ * Returns the wrapper of the first Multiselect that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Multiselect.
+ * If no matching Multiselect is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {MultiselectWrapper | null}
+ */
+findMultiselect(selector?: string): MultiselectWrapper | null;
+
+/**
+ * Returns an array of Multiselect wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Multiselects inside the current wrapper.
+ * If no matching Multiselect is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<MultiselectWrapper>}
+ */
+findAllMultiselects(selector?: string): Array<MultiselectWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Multiselect for the current element,
+ * or the element itself if it is an instance of Multiselect.
+ * If no Multiselect is found, returns \`null\`.
+ *
+ * @returns {MultiselectWrapper | null}
+ */
+findClosestMultiselect(): MultiselectWrapper | null;
+/**
+ * Returns the wrapper of the first NavigableGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first NavigableGroup.
+ * If no matching NavigableGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {NavigableGroupWrapper | null}
+ */
+findNavigableGroup(selector?: string): NavigableGroupWrapper | null;
+
+/**
+ * Returns an array of NavigableGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the NavigableGroups inside the current wrapper.
+ * If no matching NavigableGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<NavigableGroupWrapper>}
+ */
+findAllNavigableGroups(selector?: string): Array<NavigableGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent NavigableGroup for the current element,
+ * or the element itself if it is an instance of NavigableGroup.
+ * If no NavigableGroup is found, returns \`null\`.
+ *
+ * @returns {NavigableGroupWrapper | null}
+ */
+findClosestNavigableGroup(): NavigableGroupWrapper | null;
+/**
+ * Returns the wrapper of the first Pagination that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Pagination.
+ * If no matching Pagination is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PaginationWrapper | null}
+ */
+findPagination(selector?: string): PaginationWrapper | null;
+
+/**
+ * Returns an array of Pagination wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Paginations inside the current wrapper.
+ * If no matching Pagination is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PaginationWrapper>}
+ */
+findAllPaginations(selector?: string): Array<PaginationWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Pagination for the current element,
+ * or the element itself if it is an instance of Pagination.
+ * If no Pagination is found, returns \`null\`.
+ *
+ * @returns {PaginationWrapper | null}
+ */
+findClosestPagination(): PaginationWrapper | null;
+/**
+ * Returns the wrapper of the first PanelLayout that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first PanelLayout.
+ * If no matching PanelLayout is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PanelLayoutWrapper | null}
+ */
+findPanelLayout(selector?: string): PanelLayoutWrapper | null;
+
+/**
+ * Returns an array of PanelLayout wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the PanelLayouts inside the current wrapper.
+ * If no matching PanelLayout is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PanelLayoutWrapper>}
+ */
+findAllPanelLayouts(selector?: string): Array<PanelLayoutWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent PanelLayout for the current element,
+ * or the element itself if it is an instance of PanelLayout.
+ * If no PanelLayout is found, returns \`null\`.
+ *
+ * @returns {PanelLayoutWrapper | null}
+ */
+findClosestPanelLayout(): PanelLayoutWrapper | null;
+/**
+ * Returns the wrapper of the first PieChart that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first PieChart.
+ * If no matching PieChart is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PieChartWrapper | null}
+ */
+findPieChart(selector?: string): PieChartWrapper | null;
+
+/**
+ * Returns an array of PieChart wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the PieCharts inside the current wrapper.
+ * If no matching PieChart is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PieChartWrapper>}
+ */
+findAllPieCharts(selector?: string): Array<PieChartWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent PieChart for the current element,
+ * or the element itself if it is an instance of PieChart.
+ * If no PieChart is found, returns \`null\`.
+ *
+ * @returns {PieChartWrapper | null}
+ */
+findClosestPieChart(): PieChartWrapper | null;
+/**
+ * Returns the wrapper of the first Popover that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Popover.
+ * If no matching Popover is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PopoverWrapper | null}
+ */
+findPopover(selector?: string): PopoverWrapper | null;
+
+/**
+ * Returns an array of Popover wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Popovers inside the current wrapper.
+ * If no matching Popover is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PopoverWrapper>}
+ */
+findAllPopovers(selector?: string): Array<PopoverWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Popover for the current element,
+ * or the element itself if it is an instance of Popover.
+ * If no Popover is found, returns \`null\`.
+ *
+ * @returns {PopoverWrapper | null}
+ */
+findClosestPopover(): PopoverWrapper | null;
+/**
+ * Returns the wrapper of the first ProgressBar that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ProgressBar.
+ * If no matching ProgressBar is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ProgressBarWrapper | null}
+ */
+findProgressBar(selector?: string): ProgressBarWrapper | null;
+
+/**
+ * Returns an array of ProgressBar wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ProgressBars inside the current wrapper.
+ * If no matching ProgressBar is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ProgressBarWrapper>}
+ */
+findAllProgressBars(selector?: string): Array<ProgressBarWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ProgressBar for the current element,
+ * or the element itself if it is an instance of ProgressBar.
+ * If no ProgressBar is found, returns \`null\`.
+ *
+ * @returns {ProgressBarWrapper | null}
+ */
+findClosestProgressBar(): ProgressBarWrapper | null;
+/**
+ * Returns the wrapper of the first PromptInput that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first PromptInput.
+ * If no matching PromptInput is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PromptInputWrapper | null}
+ */
+findPromptInput(selector?: string): PromptInputWrapper | null;
+
+/**
+ * Returns an array of PromptInput wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the PromptInputs inside the current wrapper.
+ * If no matching PromptInput is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PromptInputWrapper>}
+ */
+findAllPromptInputs(selector?: string): Array<PromptInputWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent PromptInput for the current element,
+ * or the element itself if it is an instance of PromptInput.
+ * If no PromptInput is found, returns \`null\`.
+ *
+ * @returns {PromptInputWrapper | null}
+ */
+findClosestPromptInput(): PromptInputWrapper | null;
+/**
+ * Returns the wrapper of the first PropertyFilter that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first PropertyFilter.
+ * If no matching PropertyFilter is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PropertyFilterWrapper | null}
+ */
+findPropertyFilter(selector?: string): PropertyFilterWrapper | null;
+
+/**
+ * Returns an array of PropertyFilter wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the PropertyFilters inside the current wrapper.
+ * If no matching PropertyFilter is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PropertyFilterWrapper>}
+ */
+findAllPropertyFilters(selector?: string): Array<PropertyFilterWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent PropertyFilter for the current element,
+ * or the element itself if it is an instance of PropertyFilter.
+ * If no PropertyFilter is found, returns \`null\`.
+ *
+ * @returns {PropertyFilterWrapper | null}
+ */
+findClosestPropertyFilter(): PropertyFilterWrapper | null;
+/**
+ * Returns the wrapper of the first RadioButton that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first RadioButton.
+ * If no matching RadioButton is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {RadioButtonWrapper | null}
+ */
+findRadioButton(selector?: string): RadioButtonWrapper | null;
+
+/**
+ * Returns an array of RadioButton wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the RadioButtons inside the current wrapper.
+ * If no matching RadioButton is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<RadioButtonWrapper>}
+ */
+findAllRadioButtons(selector?: string): Array<RadioButtonWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent RadioButton for the current element,
+ * or the element itself if it is an instance of RadioButton.
+ * If no RadioButton is found, returns \`null\`.
+ *
+ * @returns {RadioButtonWrapper | null}
+ */
+findClosestRadioButton(): RadioButtonWrapper | null;
+/**
+ * Returns the wrapper of the first RadioGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first RadioGroup.
+ * If no matching RadioGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {RadioGroupWrapper | null}
+ */
+findRadioGroup(selector?: string): RadioGroupWrapper | null;
+
+/**
+ * Returns an array of RadioGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the RadioGroups inside the current wrapper.
+ * If no matching RadioGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<RadioGroupWrapper>}
+ */
+findAllRadioGroups(selector?: string): Array<RadioGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent RadioGroup for the current element,
+ * or the element itself if it is an instance of RadioGroup.
+ * If no RadioGroup is found, returns \`null\`.
+ *
+ * @returns {RadioGroupWrapper | null}
+ */
+findClosestRadioGroup(): RadioGroupWrapper | null;
+/**
+ * Returns the wrapper of the first S3ResourceSelector that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first S3ResourceSelector.
+ * If no matching S3ResourceSelector is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {S3ResourceSelectorWrapper | null}
+ */
+findS3ResourceSelector(selector?: string): S3ResourceSelectorWrapper | null;
+
+/**
+ * Returns an array of S3ResourceSelector wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the S3ResourceSelectors inside the current wrapper.
+ * If no matching S3ResourceSelector is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<S3ResourceSelectorWrapper>}
+ */
+findAllS3ResourceSelectors(selector?: string): Array<S3ResourceSelectorWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent S3ResourceSelector for the current element,
+ * or the element itself if it is an instance of S3ResourceSelector.
+ * If no S3ResourceSelector is found, returns \`null\`.
+ *
+ * @returns {S3ResourceSelectorWrapper | null}
+ */
+findClosestS3ResourceSelector(): S3ResourceSelectorWrapper | null;
+/**
+ * Returns the wrapper of the first SegmentedControl that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first SegmentedControl.
+ * If no matching SegmentedControl is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SegmentedControlWrapper | null}
+ */
+findSegmentedControl(selector?: string): SegmentedControlWrapper | null;
+
+/**
+ * Returns an array of SegmentedControl wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the SegmentedControls inside the current wrapper.
+ * If no matching SegmentedControl is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SegmentedControlWrapper>}
+ */
+findAllSegmentedControls(selector?: string): Array<SegmentedControlWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent SegmentedControl for the current element,
+ * or the element itself if it is an instance of SegmentedControl.
+ * If no SegmentedControl is found, returns \`null\`.
+ *
+ * @returns {SegmentedControlWrapper | null}
+ */
+findClosestSegmentedControl(): SegmentedControlWrapper | null;
+/**
+ * Returns the wrapper of the first Select that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Select.
+ * If no matching Select is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SelectWrapper | null}
+ */
+findSelect(selector?: string): SelectWrapper | null;
+
+/**
+ * Returns an array of Select wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Selects inside the current wrapper.
+ * If no matching Select is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SelectWrapper>}
+ */
+findAllSelects(selector?: string): Array<SelectWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Select for the current element,
+ * or the element itself if it is an instance of Select.
+ * If no Select is found, returns \`null\`.
+ *
+ * @returns {SelectWrapper | null}
+ */
+findClosestSelect(): SelectWrapper | null;
+/**
+ * Returns the wrapper of the first SideNavigation that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first SideNavigation.
+ * If no matching SideNavigation is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SideNavigationWrapper | null}
+ */
+findSideNavigation(selector?: string): SideNavigationWrapper | null;
+
+/**
+ * Returns an array of SideNavigation wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the SideNavigations inside the current wrapper.
+ * If no matching SideNavigation is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SideNavigationWrapper>}
+ */
+findAllSideNavigations(selector?: string): Array<SideNavigationWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent SideNavigation for the current element,
+ * or the element itself if it is an instance of SideNavigation.
+ * If no SideNavigation is found, returns \`null\`.
+ *
+ * @returns {SideNavigationWrapper | null}
+ */
+findClosestSideNavigation(): SideNavigationWrapper | null;
+/**
+ * Returns the wrapper of the first Skeleton that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Skeleton.
+ * If no matching Skeleton is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SkeletonWrapper | null}
+ */
+findSkeleton(selector?: string): SkeletonWrapper | null;
+
+/**
+ * Returns an array of Skeleton wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Skeletons inside the current wrapper.
+ * If no matching Skeleton is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SkeletonWrapper>}
+ */
+findAllSkeletons(selector?: string): Array<SkeletonWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Skeleton for the current element,
+ * or the element itself if it is an instance of Skeleton.
+ * If no Skeleton is found, returns \`null\`.
+ *
+ * @returns {SkeletonWrapper | null}
+ */
+findClosestSkeleton(): SkeletonWrapper | null;
+/**
+ * Returns the wrapper of the first Slider that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Slider.
+ * If no matching Slider is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SliderWrapper | null}
+ */
+findSlider(selector?: string): SliderWrapper | null;
+
+/**
+ * Returns an array of Slider wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Sliders inside the current wrapper.
+ * If no matching Slider is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SliderWrapper>}
+ */
+findAllSliders(selector?: string): Array<SliderWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Slider for the current element,
+ * or the element itself if it is an instance of Slider.
+ * If no Slider is found, returns \`null\`.
+ *
+ * @returns {SliderWrapper | null}
+ */
+findClosestSlider(): SliderWrapper | null;
+/**
+ * Returns the wrapper of the first SpaceBetween that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first SpaceBetween.
+ * If no matching SpaceBetween is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SpaceBetweenWrapper | null}
+ */
+findSpaceBetween(selector?: string): SpaceBetweenWrapper | null;
+
+/**
+ * Returns an array of SpaceBetween wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the SpaceBetweens inside the current wrapper.
+ * If no matching SpaceBetween is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SpaceBetweenWrapper>}
+ */
+findAllSpaceBetweens(selector?: string): Array<SpaceBetweenWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent SpaceBetween for the current element,
+ * or the element itself if it is an instance of SpaceBetween.
+ * If no SpaceBetween is found, returns \`null\`.
+ *
+ * @returns {SpaceBetweenWrapper | null}
+ */
+findClosestSpaceBetween(): SpaceBetweenWrapper | null;
+/**
+ * Returns the wrapper of the first Spinner that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Spinner.
+ * If no matching Spinner is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SpinnerWrapper | null}
+ */
+findSpinner(selector?: string): SpinnerWrapper | null;
+
+/**
+ * Returns an array of Spinner wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Spinners inside the current wrapper.
+ * If no matching Spinner is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SpinnerWrapper>}
+ */
+findAllSpinners(selector?: string): Array<SpinnerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Spinner for the current element,
+ * or the element itself if it is an instance of Spinner.
+ * If no Spinner is found, returns \`null\`.
+ *
+ * @returns {SpinnerWrapper | null}
+ */
+findClosestSpinner(): SpinnerWrapper | null;
+/**
+ * Returns the wrapper of the first SplitPanel that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first SplitPanel.
+ * If no matching SplitPanel is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SplitPanelWrapper | null}
+ */
+findSplitPanel(selector?: string): SplitPanelWrapper | null;
+
+/**
+ * Returns an array of SplitPanel wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the SplitPanels inside the current wrapper.
+ * If no matching SplitPanel is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SplitPanelWrapper>}
+ */
+findAllSplitPanels(selector?: string): Array<SplitPanelWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent SplitPanel for the current element,
+ * or the element itself if it is an instance of SplitPanel.
+ * If no SplitPanel is found, returns \`null\`.
+ *
+ * @returns {SplitPanelWrapper | null}
+ */
+findClosestSplitPanel(): SplitPanelWrapper | null;
+/**
+ * Returns the wrapper of the first StatusIndicator that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first StatusIndicator.
+ * If no matching StatusIndicator is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {StatusIndicatorWrapper | null}
+ */
+findStatusIndicator(selector?: string): StatusIndicatorWrapper | null;
+
+/**
+ * Returns an array of StatusIndicator wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the StatusIndicators inside the current wrapper.
+ * If no matching StatusIndicator is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<StatusIndicatorWrapper>}
+ */
+findAllStatusIndicators(selector?: string): Array<StatusIndicatorWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent StatusIndicator for the current element,
+ * or the element itself if it is an instance of StatusIndicator.
+ * If no StatusIndicator is found, returns \`null\`.
+ *
+ * @returns {StatusIndicatorWrapper | null}
+ */
+findClosestStatusIndicator(): StatusIndicatorWrapper | null;
+/**
+ * Returns the wrapper of the first Steps that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Steps.
+ * If no matching Steps is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {StepsWrapper | null}
+ */
+findSteps(selector?: string): StepsWrapper | null;
+
+/**
+ * Returns an array of Steps wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Steps inside the current wrapper.
+ * If no matching Steps is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<StepsWrapper>}
+ */
+findAllSteps(selector?: string): Array<StepsWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Steps for the current element,
+ * or the element itself if it is an instance of Steps.
+ * If no Steps is found, returns \`null\`.
+ *
+ * @returns {StepsWrapper | null}
+ */
+findClosestSteps(): StepsWrapper | null;
+/**
+ * Returns the wrapper of the first Table that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Table.
+ * If no matching Table is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TableWrapper | null}
+ */
+findTable(selector?: string): TableWrapper | null;
+
+/**
+ * Returns an array of Table wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Tables inside the current wrapper.
+ * If no matching Table is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TableWrapper>}
+ */
+findAllTables(selector?: string): Array<TableWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Table for the current element,
+ * or the element itself if it is an instance of Table.
+ * If no Table is found, returns \`null\`.
+ *
+ * @returns {TableWrapper | null}
+ */
+findClosestTable(): TableWrapper | null;
+/**
+ * Returns the wrapper of the first Tabs that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Tabs.
+ * If no matching Tabs is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TabsWrapper | null}
+ */
+findTabs(selector?: string): TabsWrapper | null;
+
+/**
+ * Returns an array of Tabs wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Tabs inside the current wrapper.
+ * If no matching Tabs is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TabsWrapper>}
+ */
+findAllTabs(selector?: string): Array<TabsWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Tabs for the current element,
+ * or the element itself if it is an instance of Tabs.
+ * If no Tabs is found, returns \`null\`.
+ *
+ * @returns {TabsWrapper | null}
+ */
+findClosestTabs(): TabsWrapper | null;
+/**
+ * Returns the wrapper of the first TagEditor that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TagEditor.
+ * If no matching TagEditor is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TagEditorWrapper | null}
+ */
+findTagEditor(selector?: string): TagEditorWrapper | null;
+
+/**
+ * Returns an array of TagEditor wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TagEditors inside the current wrapper.
+ * If no matching TagEditor is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TagEditorWrapper>}
+ */
+findAllTagEditors(selector?: string): Array<TagEditorWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TagEditor for the current element,
+ * or the element itself if it is an instance of TagEditor.
+ * If no TagEditor is found, returns \`null\`.
+ *
+ * @returns {TagEditorWrapper | null}
+ */
+findClosestTagEditor(): TagEditorWrapper | null;
+/**
+ * Returns the wrapper of the first TextContent that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TextContent.
+ * If no matching TextContent is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TextContentWrapper | null}
+ */
+findTextContent(selector?: string): TextContentWrapper | null;
+
+/**
+ * Returns an array of TextContent wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TextContents inside the current wrapper.
+ * If no matching TextContent is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TextContentWrapper>}
+ */
+findAllTextContents(selector?: string): Array<TextContentWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TextContent for the current element,
+ * or the element itself if it is an instance of TextContent.
+ * If no TextContent is found, returns \`null\`.
+ *
+ * @returns {TextContentWrapper | null}
+ */
+findClosestTextContent(): TextContentWrapper | null;
+/**
+ * Returns the wrapper of the first TextFilter that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TextFilter.
+ * If no matching TextFilter is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TextFilterWrapper | null}
+ */
+findTextFilter(selector?: string): TextFilterWrapper | null;
+
+/**
+ * Returns an array of TextFilter wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TextFilters inside the current wrapper.
+ * If no matching TextFilter is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TextFilterWrapper>}
+ */
+findAllTextFilters(selector?: string): Array<TextFilterWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TextFilter for the current element,
+ * or the element itself if it is an instance of TextFilter.
+ * If no TextFilter is found, returns \`null\`.
+ *
+ * @returns {TextFilterWrapper | null}
+ */
+findClosestTextFilter(): TextFilterWrapper | null;
+/**
+ * Returns the wrapper of the first Textarea that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Textarea.
+ * If no matching Textarea is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TextareaWrapper | null}
+ */
+findTextarea(selector?: string): TextareaWrapper | null;
+
+/**
+ * Returns an array of Textarea wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Textareas inside the current wrapper.
+ * If no matching Textarea is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TextareaWrapper>}
+ */
+findAllTextareas(selector?: string): Array<TextareaWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Textarea for the current element,
+ * or the element itself if it is an instance of Textarea.
+ * If no Textarea is found, returns \`null\`.
+ *
+ * @returns {TextareaWrapper | null}
+ */
+findClosestTextarea(): TextareaWrapper | null;
+/**
+ * Returns the wrapper of the first Tiles that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Tiles.
+ * If no matching Tiles is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TilesWrapper | null}
+ */
+findTiles(selector?: string): TilesWrapper | null;
+
+/**
+ * Returns an array of Tiles wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Tiles inside the current wrapper.
+ * If no matching Tiles is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TilesWrapper>}
+ */
+findAllTiles(selector?: string): Array<TilesWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Tiles for the current element,
+ * or the element itself if it is an instance of Tiles.
+ * If no Tiles is found, returns \`null\`.
+ *
+ * @returns {TilesWrapper | null}
+ */
+findClosestTiles(): TilesWrapper | null;
+/**
+ * Returns the wrapper of the first TimeInput that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TimeInput.
+ * If no matching TimeInput is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TimeInputWrapper | null}
+ */
+findTimeInput(selector?: string): TimeInputWrapper | null;
+
+/**
+ * Returns an array of TimeInput wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TimeInputs inside the current wrapper.
+ * If no matching TimeInput is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TimeInputWrapper>}
+ */
+findAllTimeInputs(selector?: string): Array<TimeInputWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TimeInput for the current element,
+ * or the element itself if it is an instance of TimeInput.
+ * If no TimeInput is found, returns \`null\`.
+ *
+ * @returns {TimeInputWrapper | null}
+ */
+findClosestTimeInput(): TimeInputWrapper | null;
+/**
+ * Returns the wrapper of the first Toggle that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Toggle.
+ * If no matching Toggle is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ToggleWrapper | null}
+ */
+findToggle(selector?: string): ToggleWrapper | null;
+
+/**
+ * Returns an array of Toggle wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Toggles inside the current wrapper.
+ * If no matching Toggle is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ToggleWrapper>}
+ */
+findAllToggles(selector?: string): Array<ToggleWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Toggle for the current element,
+ * or the element itself if it is an instance of Toggle.
+ * If no Toggle is found, returns \`null\`.
+ *
+ * @returns {ToggleWrapper | null}
+ */
+findClosestToggle(): ToggleWrapper | null;
+/**
+ * Returns the wrapper of the first ToggleButton that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ToggleButton.
+ * If no matching ToggleButton is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ToggleButtonWrapper | null}
+ */
+findToggleButton(selector?: string): ToggleButtonWrapper | null;
+
+/**
+ * Returns an array of ToggleButton wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ToggleButtons inside the current wrapper.
+ * If no matching ToggleButton is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ToggleButtonWrapper>}
+ */
+findAllToggleButtons(selector?: string): Array<ToggleButtonWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ToggleButton for the current element,
+ * or the element itself if it is an instance of ToggleButton.
+ * If no ToggleButton is found, returns \`null\`.
+ *
+ * @returns {ToggleButtonWrapper | null}
+ */
+findClosestToggleButton(): ToggleButtonWrapper | null;
+/**
+ * Returns the wrapper of the first Token that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Token.
+ * If no matching Token is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TokenWrapper | null}
+ */
+findToken(selector?: string): TokenWrapper | null;
+
+/**
+ * Returns an array of Token wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Tokens inside the current wrapper.
+ * If no matching Token is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TokenWrapper>}
+ */
+findAllTokens(selector?: string): Array<TokenWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Token for the current element,
+ * or the element itself if it is an instance of Token.
+ * If no Token is found, returns \`null\`.
+ *
+ * @returns {TokenWrapper | null}
+ */
+findClosestToken(): TokenWrapper | null;
+/**
+ * Returns the wrapper of the first TokenGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TokenGroup.
+ * If no matching TokenGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TokenGroupWrapper | null}
+ */
+findTokenGroup(selector?: string): TokenGroupWrapper | null;
+
+/**
+ * Returns an array of TokenGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TokenGroups inside the current wrapper.
+ * If no matching TokenGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TokenGroupWrapper>}
+ */
+findAllTokenGroups(selector?: string): Array<TokenGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TokenGroup for the current element,
+ * or the element itself if it is an instance of TokenGroup.
+ * If no TokenGroup is found, returns \`null\`.
+ *
+ * @returns {TokenGroupWrapper | null}
+ */
+findClosestTokenGroup(): TokenGroupWrapper | null;
+/**
+ * Returns the wrapper of the first Tooltip that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Tooltip.
+ * If no matching Tooltip is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TooltipWrapper | null}
+ */
+findTooltip(selector?: string): TooltipWrapper | null;
+
+/**
+ * Returns an array of Tooltip wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Tooltips inside the current wrapper.
+ * If no matching Tooltip is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TooltipWrapper>}
+ */
+findAllTooltips(selector?: string): Array<TooltipWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Tooltip for the current element,
+ * or the element itself if it is an instance of Tooltip.
+ * If no Tooltip is found, returns \`null\`.
+ *
+ * @returns {TooltipWrapper | null}
+ */
+findClosestTooltip(): TooltipWrapper | null;
+/**
+ * Returns the wrapper of the first TopNavigation that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TopNavigation.
+ * If no matching TopNavigation is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TopNavigationWrapper | null}
+ */
+findTopNavigation(selector?: string): TopNavigationWrapper | null;
+
+/**
+ * Returns an array of TopNavigation wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TopNavigations inside the current wrapper.
+ * If no matching TopNavigation is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TopNavigationWrapper>}
+ */
+findAllTopNavigations(selector?: string): Array<TopNavigationWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TopNavigation for the current element,
+ * or the element itself if it is an instance of TopNavigation.
+ * If no TopNavigation is found, returns \`null\`.
+ *
+ * @returns {TopNavigationWrapper | null}
+ */
+findClosestTopNavigation(): TopNavigationWrapper | null;
+/**
+ * Returns the wrapper of the first TreeView that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TreeView.
+ * If no matching TreeView is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TreeViewWrapper | null}
+ */
+findTreeView(selector?: string): TreeViewWrapper | null;
+
+/**
+ * Returns an array of TreeView wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TreeViews inside the current wrapper.
+ * If no matching TreeView is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TreeViewWrapper>}
+ */
+findAllTreeViews(selector?: string): Array<TreeViewWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TreeView for the current element,
+ * or the element itself if it is an instance of TreeView.
+ * If no TreeView is found, returns \`null\`.
+ *
+ * @returns {TreeViewWrapper | null}
+ */
+findClosestTreeView(): TreeViewWrapper | null;
+/**
+ * Returns the wrapper of the first TruncatedText that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TruncatedText.
+ * If no matching TruncatedText is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TruncatedTextWrapper | null}
+ */
+findTruncatedText(selector?: string): TruncatedTextWrapper | null;
+
+/**
+ * Returns an array of TruncatedText wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TruncatedTexts inside the current wrapper.
+ * If no matching TruncatedText is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TruncatedTextWrapper>}
+ */
+findAllTruncatedTexts(selector?: string): Array<TruncatedTextWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TruncatedText for the current element,
+ * or the element itself if it is an instance of TruncatedText.
+ * If no TruncatedText is found, returns \`null\`.
+ *
+ * @returns {TruncatedTextWrapper | null}
+ */
+findClosestTruncatedText(): TruncatedTextWrapper | null;
+/**
+ * Returns the wrapper of the first TutorialPanel that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TutorialPanel.
+ * If no matching TutorialPanel is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TutorialPanelWrapper | null}
+ */
+findTutorialPanel(selector?: string): TutorialPanelWrapper | null;
+
+/**
+ * Returns an array of TutorialPanel wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TutorialPanels inside the current wrapper.
+ * If no matching TutorialPanel is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TutorialPanelWrapper>}
+ */
+findAllTutorialPanels(selector?: string): Array<TutorialPanelWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TutorialPanel for the current element,
+ * or the element itself if it is an instance of TutorialPanel.
+ * If no TutorialPanel is found, returns \`null\`.
+ *
+ * @returns {TutorialPanelWrapper | null}
+ */
+findClosestTutorialPanel(): TutorialPanelWrapper | null;
+/**
+ * Returns the wrapper of the first Wizard that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Wizard.
+ * If no matching Wizard is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {WizardWrapper | null}
+ */
+findWizard(selector?: string): WizardWrapper | null;
+
+/**
+ * Returns an array of Wizard wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Wizards inside the current wrapper.
+ * If no matching Wizard is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<WizardWrapper>}
+ */
+findAllWizards(selector?: string): Array<WizardWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Wizard for the current element,
+ * or the element itself if it is an instance of Wizard.
+ * If no Wizard is found, returns \`null\`.
+ *
+ * @returns {WizardWrapper | null}
+ */
+findClosestWizard(): WizardWrapper | null;
+   }
+}
+
+
+ElementWrapper.prototype.findActionCard = function(selector) {
+  let rootSelector = \`.\${ActionCardWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ActionCardWrapper && ActionCardWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ActionCardWrapper.rootSelector}, .\${ActionCardWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ActionCardWrapper);
+};
+
+ElementWrapper.prototype.findAllActionCards = function(selector) {
+  return this.findAllComponents(ActionCardWrapper, selector);
+};
+ElementWrapper.prototype.findAlert = function(selector) {
+  let rootSelector = \`.\${AlertWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AlertWrapper && AlertWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AlertWrapper.rootSelector}, .\${AlertWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AlertWrapper);
+};
+
+ElementWrapper.prototype.findAllAlerts = function(selector) {
+  return this.findAllComponents(AlertWrapper, selector);
+};
+ElementWrapper.prototype.findAnchorNavigation = function(selector) {
+  let rootSelector = \`.\${AnchorNavigationWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AnchorNavigationWrapper && AnchorNavigationWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AnchorNavigationWrapper.rootSelector}, .\${AnchorNavigationWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AnchorNavigationWrapper);
+};
+
+ElementWrapper.prototype.findAllAnchorNavigations = function(selector) {
+  return this.findAllComponents(AnchorNavigationWrapper, selector);
+};
+ElementWrapper.prototype.findAnnotation = function(selector) {
+  let rootSelector = \`.\${AnnotationWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AnnotationWrapper && AnnotationWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AnnotationWrapper.rootSelector}, .\${AnnotationWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AnnotationWrapper);
+};
+
+ElementWrapper.prototype.findAllAnnotations = function(selector) {
+  return this.findAllComponents(AnnotationWrapper, selector);
+};
+ElementWrapper.prototype.findAppLayout = function(selector) {
+  let rootSelector = \`.\${AppLayoutWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AppLayoutWrapper && AppLayoutWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AppLayoutWrapper.rootSelector}, .\${AppLayoutWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AppLayoutWrapper);
+};
+
+ElementWrapper.prototype.findAllAppLayouts = function(selector) {
+  return this.findAllComponents(AppLayoutWrapper, selector);
+};
+ElementWrapper.prototype.findAppLayoutToolbar = function(selector) {
+  let rootSelector = \`.\${AppLayoutToolbarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AppLayoutToolbarWrapper && AppLayoutToolbarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AppLayoutToolbarWrapper.rootSelector}, .\${AppLayoutToolbarWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AppLayoutToolbarWrapper);
+};
+
+ElementWrapper.prototype.findAllAppLayoutToolbars = function(selector) {
+  return this.findAllComponents(AppLayoutToolbarWrapper, selector);
+};
+ElementWrapper.prototype.findAreaChart = function(selector) {
+  let rootSelector = \`.\${AreaChartWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AreaChartWrapper && AreaChartWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AreaChartWrapper.rootSelector}, .\${AreaChartWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AreaChartWrapper);
+};
+
+ElementWrapper.prototype.findAllAreaCharts = function(selector) {
+  return this.findAllComponents(AreaChartWrapper, selector);
+};
+ElementWrapper.prototype.findAttributeEditor = function(selector) {
+  let rootSelector = \`.\${AttributeEditorWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AttributeEditorWrapper && AttributeEditorWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AttributeEditorWrapper.rootSelector}, .\${AttributeEditorWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AttributeEditorWrapper);
+};
+
+ElementWrapper.prototype.findAllAttributeEditors = function(selector) {
+  return this.findAllComponents(AttributeEditorWrapper, selector);
+};
+ElementWrapper.prototype.findAutosuggest = function(selector) {
+  let rootSelector = \`.\${AutosuggestWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AutosuggestWrapper && AutosuggestWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AutosuggestWrapper.rootSelector}, .\${AutosuggestWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AutosuggestWrapper);
+};
+
+ElementWrapper.prototype.findAllAutosuggests = function(selector) {
+  return this.findAllComponents(AutosuggestWrapper, selector);
+};
+ElementWrapper.prototype.findBadge = function(selector) {
+  let rootSelector = \`.\${BadgeWrapper.rootSelector}\`;
+  if("legacyRootSelector" in BadgeWrapper && BadgeWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${BadgeWrapper.rootSelector}, .\${BadgeWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BadgeWrapper);
+};
+
+ElementWrapper.prototype.findAllBadges = function(selector) {
+  return this.findAllComponents(BadgeWrapper, selector);
+};
+ElementWrapper.prototype.findBarChart = function(selector) {
+  let rootSelector = \`.\${BarChartWrapper.rootSelector}\`;
+  if("legacyRootSelector" in BarChartWrapper && BarChartWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${BarChartWrapper.rootSelector}, .\${BarChartWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BarChartWrapper);
+};
+
+ElementWrapper.prototype.findAllBarCharts = function(selector) {
+  return this.findAllComponents(BarChartWrapper, selector);
+};
+ElementWrapper.prototype.findBox = function(selector) {
+  let rootSelector = \`.\${BoxWrapper.rootSelector}\`;
+  if("legacyRootSelector" in BoxWrapper && BoxWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${BoxWrapper.rootSelector}, .\${BoxWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoxWrapper);
+};
+
+ElementWrapper.prototype.findAllBoxes = function(selector) {
+  return this.findAllComponents(BoxWrapper, selector);
+};
+ElementWrapper.prototype.findBreadcrumbGroup = function(selector) {
+  let rootSelector = \`.\${BreadcrumbGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in BreadcrumbGroupWrapper && BreadcrumbGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${BreadcrumbGroupWrapper.rootSelector}, .\${BreadcrumbGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BreadcrumbGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllBreadcrumbGroups = function(selector) {
+  return this.findAllComponents(BreadcrumbGroupWrapper, selector);
+};
+ElementWrapper.prototype.findButton = function(selector) {
+  let rootSelector = \`.\${ButtonWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ButtonWrapper && ButtonWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ButtonWrapper.rootSelector}, .\${ButtonWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonWrapper);
+};
+
+ElementWrapper.prototype.findAllButtons = function(selector) {
+  return this.findAllComponents(ButtonWrapper, selector);
+};
+ElementWrapper.prototype.findButtonDropdown = function(selector) {
+  let rootSelector = \`.\${ButtonDropdownWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ButtonDropdownWrapper && ButtonDropdownWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ButtonDropdownWrapper.rootSelector}, .\${ButtonDropdownWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonDropdownWrapper);
+};
+
+ElementWrapper.prototype.findAllButtonDropdowns = function(selector) {
+  return this.findAllComponents(ButtonDropdownWrapper, selector);
+};
+ElementWrapper.prototype.findButtonGroup = function(selector) {
+  let rootSelector = \`.\${ButtonGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ButtonGroupWrapper && ButtonGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ButtonGroupWrapper.rootSelector}, .\${ButtonGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllButtonGroups = function(selector) {
+  return this.findAllComponents(ButtonGroupWrapper, selector);
+};
+ElementWrapper.prototype.findCalendar = function(selector) {
+  let rootSelector = \`.\${CalendarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CalendarWrapper && CalendarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CalendarWrapper.rootSelector}, .\${CalendarWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CalendarWrapper);
+};
+
+ElementWrapper.prototype.findAllCalendars = function(selector) {
+  return this.findAllComponents(CalendarWrapper, selector);
+};
+ElementWrapper.prototype.findCards = function(selector) {
+  let rootSelector = \`.\${CardsWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CardsWrapper && CardsWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CardsWrapper.rootSelector}, .\${CardsWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CardsWrapper);
+};
+
+ElementWrapper.prototype.findAllCards = function(selector) {
+  return this.findAllComponents(CardsWrapper, selector);
+};
+ElementWrapper.prototype.findCheckbox = function(selector) {
+  let rootSelector = \`.\${CheckboxWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CheckboxWrapper && CheckboxWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CheckboxWrapper.rootSelector}, .\${CheckboxWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CheckboxWrapper);
+};
+
+ElementWrapper.prototype.findAllCheckboxes = function(selector) {
+  return this.findAllComponents(CheckboxWrapper, selector);
+};
+ElementWrapper.prototype.findCodeEditor = function(selector) {
+  let rootSelector = \`.\${CodeEditorWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CodeEditorWrapper && CodeEditorWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CodeEditorWrapper.rootSelector}, .\${CodeEditorWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CodeEditorWrapper);
+};
+
+ElementWrapper.prototype.findAllCodeEditors = function(selector) {
+  return this.findAllComponents(CodeEditorWrapper, selector);
+};
+ElementWrapper.prototype.findCollectionPreferences = function(selector) {
+  let rootSelector = \`.\${CollectionPreferencesWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CollectionPreferencesWrapper && CollectionPreferencesWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CollectionPreferencesWrapper.rootSelector}, .\${CollectionPreferencesWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CollectionPreferencesWrapper);
+};
+
+ElementWrapper.prototype.findAllCollectionPreferences = function(selector) {
+  return this.findAllComponents(CollectionPreferencesWrapper, selector);
+};
+ElementWrapper.prototype.findColumnLayout = function(selector) {
+  let rootSelector = \`.\${ColumnLayoutWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ColumnLayoutWrapper && ColumnLayoutWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ColumnLayoutWrapper.rootSelector}, .\${ColumnLayoutWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ColumnLayoutWrapper);
+};
+
+ElementWrapper.prototype.findAllColumnLayouts = function(selector) {
+  return this.findAllComponents(ColumnLayoutWrapper, selector);
+};
+ElementWrapper.prototype.findContainer = function(selector) {
+  let rootSelector = \`.\${ContainerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ContainerWrapper && ContainerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ContainerWrapper.rootSelector}, .\${ContainerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ContainerWrapper);
+};
+
+ElementWrapper.prototype.findAllContainers = function(selector) {
+  return this.findAllComponents(ContainerWrapper, selector);
+};
+ElementWrapper.prototype.findContentLayout = function(selector) {
+  let rootSelector = \`.\${ContentLayoutWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ContentLayoutWrapper && ContentLayoutWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ContentLayoutWrapper.rootSelector}, .\${ContentLayoutWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ContentLayoutWrapper);
+};
+
+ElementWrapper.prototype.findAllContentLayouts = function(selector) {
+  return this.findAllComponents(ContentLayoutWrapper, selector);
+};
+ElementWrapper.prototype.findCopyToClipboard = function(selector) {
+  let rootSelector = \`.\${CopyToClipboardWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CopyToClipboardWrapper && CopyToClipboardWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CopyToClipboardWrapper.rootSelector}, .\${CopyToClipboardWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CopyToClipboardWrapper);
+};
+
+ElementWrapper.prototype.findAllCopyToClipboards = function(selector) {
+  return this.findAllComponents(CopyToClipboardWrapper, selector);
+};
+ElementWrapper.prototype.findDateInput = function(selector) {
+  let rootSelector = \`.\${DateInputWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DateInputWrapper && DateInputWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DateInputWrapper.rootSelector}, .\${DateInputWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DateInputWrapper);
+};
+
+ElementWrapper.prototype.findAllDateInputs = function(selector) {
+  return this.findAllComponents(DateInputWrapper, selector);
+};
+ElementWrapper.prototype.findDatePicker = function(selector) {
+  let rootSelector = \`.\${DatePickerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DatePickerWrapper && DatePickerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DatePickerWrapper.rootSelector}, .\${DatePickerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DatePickerWrapper);
+};
+
+ElementWrapper.prototype.findAllDatePickers = function(selector) {
+  return this.findAllComponents(DatePickerWrapper, selector);
+};
+ElementWrapper.prototype.findDateRangePicker = function(selector) {
+  let rootSelector = \`.\${DateRangePickerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DateRangePickerWrapper && DateRangePickerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DateRangePickerWrapper.rootSelector}, .\${DateRangePickerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DateRangePickerWrapper);
+};
+
+ElementWrapper.prototype.findAllDateRangePickers = function(selector) {
+  return this.findAllComponents(DateRangePickerWrapper, selector);
+};
+ElementWrapper.prototype.findDivider = function(selector) {
+  let rootSelector = \`.\${DividerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DividerWrapper && DividerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DividerWrapper.rootSelector}, .\${DividerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DividerWrapper);
+};
+
+ElementWrapper.prototype.findAllDividers = function(selector) {
+  return this.findAllComponents(DividerWrapper, selector);
+};
+ElementWrapper.prototype.findDrawer = function(selector) {
+  let rootSelector = \`.\${DrawerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DrawerWrapper && DrawerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DrawerWrapper.rootSelector}, .\${DrawerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DrawerWrapper);
+};
+
+ElementWrapper.prototype.findAllDrawers = function(selector) {
+  return this.findAllComponents(DrawerWrapper, selector);
+};
+ElementWrapper.prototype.findDropdown = function(selector) {
+  let rootSelector = \`.\${DropdownWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DropdownWrapper && DropdownWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DropdownWrapper.rootSelector}, .\${DropdownWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DropdownWrapper);
+};
+
+ElementWrapper.prototype.findAllDropdowns = function(selector) {
+  return this.findAllComponents(DropdownWrapper, selector);
+};
+ElementWrapper.prototype.findErrorBoundary = function(selector) {
+  let rootSelector = \`.\${ErrorBoundaryWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ErrorBoundaryWrapper && ErrorBoundaryWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ErrorBoundaryWrapper.rootSelector}, .\${ErrorBoundaryWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ErrorBoundaryWrapper);
+};
+
+ElementWrapper.prototype.findAllErrorBoundaries = function(selector) {
+  return this.findAllComponents(ErrorBoundaryWrapper, selector);
+};
+ElementWrapper.prototype.findExpandableSection = function(selector) {
+  let rootSelector = \`.\${ExpandableSectionWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ExpandableSectionWrapper && ExpandableSectionWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ExpandableSectionWrapper.rootSelector}, .\${ExpandableSectionWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ExpandableSectionWrapper);
+};
+
+ElementWrapper.prototype.findAllExpandableSections = function(selector) {
+  return this.findAllComponents(ExpandableSectionWrapper, selector);
+};
+ElementWrapper.prototype.findFileDropzone = function(selector) {
+  let rootSelector = \`.\${FileDropzoneWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FileDropzoneWrapper && FileDropzoneWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FileDropzoneWrapper.rootSelector}, .\${FileDropzoneWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileDropzoneWrapper);
+};
+
+ElementWrapper.prototype.findAllFileDropzones = function(selector) {
+  return this.findAllComponents(FileDropzoneWrapper, selector);
+};
+ElementWrapper.prototype.findFileInput = function(selector) {
+  let rootSelector = \`.\${FileInputWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FileInputWrapper && FileInputWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FileInputWrapper.rootSelector}, .\${FileInputWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileInputWrapper);
+};
+
+ElementWrapper.prototype.findAllFileInputs = function(selector) {
+  return this.findAllComponents(FileInputWrapper, selector);
+};
+ElementWrapper.prototype.findFileTokenGroup = function(selector) {
+  let rootSelector = \`.\${FileTokenGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FileTokenGroupWrapper && FileTokenGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FileTokenGroupWrapper.rootSelector}, .\${FileTokenGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileTokenGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllFileTokenGroups = function(selector) {
+  return this.findAllComponents(FileTokenGroupWrapper, selector);
+};
+ElementWrapper.prototype.findFileUpload = function(selector) {
+  let rootSelector = \`.\${FileUploadWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FileUploadWrapper && FileUploadWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FileUploadWrapper.rootSelector}, .\${FileUploadWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileUploadWrapper);
+};
+
+ElementWrapper.prototype.findAllFileUploads = function(selector) {
+  return this.findAllComponents(FileUploadWrapper, selector);
+};
+ElementWrapper.prototype.findFlashbar = function(selector) {
+  let rootSelector = \`.\${FlashbarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FlashbarWrapper && FlashbarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FlashbarWrapper.rootSelector}, .\${FlashbarWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FlashbarWrapper);
+};
+
+ElementWrapper.prototype.findAllFlashbars = function(selector) {
+  return this.findAllComponents(FlashbarWrapper, selector);
+};
+ElementWrapper.prototype.findForm = function(selector) {
+  let rootSelector = \`.\${FormWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FormWrapper && FormWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FormWrapper.rootSelector}, .\${FormWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FormWrapper);
+};
+
+ElementWrapper.prototype.findAllForms = function(selector) {
+  return this.findAllComponents(FormWrapper, selector);
+};
+ElementWrapper.prototype.findFormField = function(selector) {
+  let rootSelector = \`.\${FormFieldWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FormFieldWrapper && FormFieldWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FormFieldWrapper.rootSelector}, .\${FormFieldWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FormFieldWrapper);
+};
+
+ElementWrapper.prototype.findAllFormFields = function(selector) {
+  return this.findAllComponents(FormFieldWrapper, selector);
+};
+ElementWrapper.prototype.findGrid = function(selector) {
+  let rootSelector = \`.\${GridWrapper.rootSelector}\`;
+  if("legacyRootSelector" in GridWrapper && GridWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${GridWrapper.rootSelector}, .\${GridWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, GridWrapper);
+};
+
+ElementWrapper.prototype.findAllGrids = function(selector) {
+  return this.findAllComponents(GridWrapper, selector);
+};
+ElementWrapper.prototype.findHeader = function(selector) {
+  let rootSelector = \`.\${HeaderWrapper.rootSelector}\`;
+  if("legacyRootSelector" in HeaderWrapper && HeaderWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${HeaderWrapper.rootSelector}, .\${HeaderWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HeaderWrapper);
+};
+
+ElementWrapper.prototype.findAllHeaders = function(selector) {
+  return this.findAllComponents(HeaderWrapper, selector);
+};
+ElementWrapper.prototype.findHelpPanel = function(selector) {
+  let rootSelector = \`.\${HelpPanelWrapper.rootSelector}\`;
+  if("legacyRootSelector" in HelpPanelWrapper && HelpPanelWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${HelpPanelWrapper.rootSelector}, .\${HelpPanelWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HelpPanelWrapper);
+};
+
+ElementWrapper.prototype.findAllHelpPanels = function(selector) {
+  return this.findAllComponents(HelpPanelWrapper, selector);
+};
+ElementWrapper.prototype.findHotspot = function(selector) {
+  let rootSelector = \`.\${HotspotWrapper.rootSelector}\`;
+  if("legacyRootSelector" in HotspotWrapper && HotspotWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${HotspotWrapper.rootSelector}, .\${HotspotWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HotspotWrapper);
+};
+
+ElementWrapper.prototype.findAllHotspots = function(selector) {
+  return this.findAllComponents(HotspotWrapper, selector);
+};
+ElementWrapper.prototype.findIcon = function(selector) {
+  let rootSelector = \`.\${IconWrapper.rootSelector}\`;
+  if("legacyRootSelector" in IconWrapper && IconWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${IconWrapper.rootSelector}, .\${IconWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, IconWrapper);
+};
+
+ElementWrapper.prototype.findAllIcons = function(selector) {
+  return this.findAllComponents(IconWrapper, selector);
+};
+ElementWrapper.prototype.findInput = function(selector) {
+  let rootSelector = \`.\${InputWrapper.rootSelector}\`;
+  if("legacyRootSelector" in InputWrapper && InputWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${InputWrapper.rootSelector}, .\${InputWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, InputWrapper);
+};
+
+ElementWrapper.prototype.findAllInputs = function(selector) {
+  return this.findAllComponents(InputWrapper, selector);
+};
+ElementWrapper.prototype.findItemCard = function(selector) {
+  let rootSelector = \`.\${ItemCardWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ItemCardWrapper && ItemCardWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ItemCardWrapper.rootSelector}, .\${ItemCardWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemCardWrapper);
+};
+
+ElementWrapper.prototype.findAllItemCards = function(selector) {
+  return this.findAllComponents(ItemCardWrapper, selector);
+};
+ElementWrapper.prototype.findKeyValuePairs = function(selector) {
+  let rootSelector = \`.\${KeyValuePairsWrapper.rootSelector}\`;
+  if("legacyRootSelector" in KeyValuePairsWrapper && KeyValuePairsWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${KeyValuePairsWrapper.rootSelector}, .\${KeyValuePairsWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, KeyValuePairsWrapper);
+};
+
+ElementWrapper.prototype.findAllKeyValuePairs = function(selector) {
+  return this.findAllComponents(KeyValuePairsWrapper, selector);
+};
+ElementWrapper.prototype.findLineChart = function(selector) {
+  let rootSelector = \`.\${LineChartWrapper.rootSelector}\`;
+  if("legacyRootSelector" in LineChartWrapper && LineChartWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${LineChartWrapper.rootSelector}, .\${LineChartWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LineChartWrapper);
+};
+
+ElementWrapper.prototype.findAllLineCharts = function(selector) {
+  return this.findAllComponents(LineChartWrapper, selector);
+};
+ElementWrapper.prototype.findLink = function(selector) {
+  let rootSelector = \`.\${LinkWrapper.rootSelector}\`;
+  if("legacyRootSelector" in LinkWrapper && LinkWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${LinkWrapper.rootSelector}, .\${LinkWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LinkWrapper);
+};
+
+ElementWrapper.prototype.findAllLinks = function(selector) {
+  return this.findAllComponents(LinkWrapper, selector);
+};
+ElementWrapper.prototype.findList = function(selector) {
+  let rootSelector = \`.\${ListWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ListWrapper && ListWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ListWrapper.rootSelector}, .\${ListWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ListWrapper);
+};
+
+ElementWrapper.prototype.findAllLists = function(selector) {
+  return this.findAllComponents(ListWrapper, selector);
+};
+ElementWrapper.prototype.findLiveRegion = function(selector) {
+  let rootSelector = \`.\${LiveRegionWrapper.rootSelector}\`;
+  if("legacyRootSelector" in LiveRegionWrapper && LiveRegionWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${LiveRegionWrapper.rootSelector}, .\${LiveRegionWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LiveRegionWrapper);
+};
+
+ElementWrapper.prototype.findAllLiveRegions = function(selector) {
+  return this.findAllComponents(LiveRegionWrapper, selector);
+};
+ElementWrapper.prototype.findMixedLineBarChart = function(selector) {
+  let rootSelector = \`.\${MixedLineBarChartWrapper.rootSelector}\`;
+  if("legacyRootSelector" in MixedLineBarChartWrapper && MixedLineBarChartWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${MixedLineBarChartWrapper.rootSelector}, .\${MixedLineBarChartWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, MixedLineBarChartWrapper);
+};
+
+ElementWrapper.prototype.findAllMixedLineBarCharts = function(selector) {
+  return this.findAllComponents(MixedLineBarChartWrapper, selector);
+};
+ElementWrapper.prototype.findModal = function(selector) {
+  let rootSelector = \`.\${ModalWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ModalWrapper && ModalWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ModalWrapper.rootSelector}, .\${ModalWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ModalWrapper);
+};
+
+ElementWrapper.prototype.findAllModals = function(selector) {
+  return this.findAllComponents(ModalWrapper, selector);
+};
+ElementWrapper.prototype.findMultiselect = function(selector) {
+  let rootSelector = \`.\${MultiselectWrapper.rootSelector}\`;
+  if("legacyRootSelector" in MultiselectWrapper && MultiselectWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${MultiselectWrapper.rootSelector}, .\${MultiselectWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, MultiselectWrapper);
+};
+
+ElementWrapper.prototype.findAllMultiselects = function(selector) {
+  return this.findAllComponents(MultiselectWrapper, selector);
+};
+ElementWrapper.prototype.findNavigableGroup = function(selector) {
+  let rootSelector = \`.\${NavigableGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in NavigableGroupWrapper && NavigableGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${NavigableGroupWrapper.rootSelector}, .\${NavigableGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, NavigableGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllNavigableGroups = function(selector) {
+  return this.findAllComponents(NavigableGroupWrapper, selector);
+};
+ElementWrapper.prototype.findPagination = function(selector) {
+  let rootSelector = \`.\${PaginationWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PaginationWrapper && PaginationWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PaginationWrapper.rootSelector}, .\${PaginationWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PaginationWrapper);
+};
+
+ElementWrapper.prototype.findAllPaginations = function(selector) {
+  return this.findAllComponents(PaginationWrapper, selector);
+};
+ElementWrapper.prototype.findPanelLayout = function(selector) {
+  let rootSelector = \`.\${PanelLayoutWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PanelLayoutWrapper && PanelLayoutWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PanelLayoutWrapper.rootSelector}, .\${PanelLayoutWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PanelLayoutWrapper);
+};
+
+ElementWrapper.prototype.findAllPanelLayouts = function(selector) {
+  return this.findAllComponents(PanelLayoutWrapper, selector);
+};
+ElementWrapper.prototype.findPieChart = function(selector) {
+  let rootSelector = \`.\${PieChartWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PieChartWrapper && PieChartWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PieChartWrapper.rootSelector}, .\${PieChartWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PieChartWrapper);
+};
+
+ElementWrapper.prototype.findAllPieCharts = function(selector) {
+  return this.findAllComponents(PieChartWrapper, selector);
+};
+ElementWrapper.prototype.findPopover = function(selector) {
+  let rootSelector = \`.\${PopoverWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PopoverWrapper && PopoverWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PopoverWrapper.rootSelector}, .\${PopoverWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PopoverWrapper);
+};
+
+ElementWrapper.prototype.findAllPopovers = function(selector) {
+  return this.findAllComponents(PopoverWrapper, selector);
+};
+ElementWrapper.prototype.findProgressBar = function(selector) {
+  let rootSelector = \`.\${ProgressBarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ProgressBarWrapper && ProgressBarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ProgressBarWrapper.rootSelector}, .\${ProgressBarWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ProgressBarWrapper);
+};
+
+ElementWrapper.prototype.findAllProgressBars = function(selector) {
+  return this.findAllComponents(ProgressBarWrapper, selector);
+};
+ElementWrapper.prototype.findPromptInput = function(selector) {
+  let rootSelector = \`.\${PromptInputWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PromptInputWrapper && PromptInputWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PromptInputWrapper.rootSelector}, .\${PromptInputWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PromptInputWrapper);
+};
+
+ElementWrapper.prototype.findAllPromptInputs = function(selector) {
+  return this.findAllComponents(PromptInputWrapper, selector);
+};
+ElementWrapper.prototype.findPropertyFilter = function(selector) {
+  let rootSelector = \`.\${PropertyFilterWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PropertyFilterWrapper && PropertyFilterWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PropertyFilterWrapper.rootSelector}, .\${PropertyFilterWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PropertyFilterWrapper);
+};
+
+ElementWrapper.prototype.findAllPropertyFilters = function(selector) {
+  return this.findAllComponents(PropertyFilterWrapper, selector);
+};
+ElementWrapper.prototype.findRadioButton = function(selector) {
+  let rootSelector = \`.\${RadioButtonWrapper.rootSelector}\`;
+  if("legacyRootSelector" in RadioButtonWrapper && RadioButtonWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${RadioButtonWrapper.rootSelector}, .\${RadioButtonWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, RadioButtonWrapper);
+};
+
+ElementWrapper.prototype.findAllRadioButtons = function(selector) {
+  return this.findAllComponents(RadioButtonWrapper, selector);
+};
+ElementWrapper.prototype.findRadioGroup = function(selector) {
+  let rootSelector = \`.\${RadioGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in RadioGroupWrapper && RadioGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${RadioGroupWrapper.rootSelector}, .\${RadioGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, RadioGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllRadioGroups = function(selector) {
+  return this.findAllComponents(RadioGroupWrapper, selector);
+};
+ElementWrapper.prototype.findS3ResourceSelector = function(selector) {
+  let rootSelector = \`.\${S3ResourceSelectorWrapper.rootSelector}\`;
+  if("legacyRootSelector" in S3ResourceSelectorWrapper && S3ResourceSelectorWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${S3ResourceSelectorWrapper.rootSelector}, .\${S3ResourceSelectorWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, S3ResourceSelectorWrapper);
+};
+
+ElementWrapper.prototype.findAllS3ResourceSelectors = function(selector) {
+  return this.findAllComponents(S3ResourceSelectorWrapper, selector);
+};
+ElementWrapper.prototype.findSegmentedControl = function(selector) {
+  let rootSelector = \`.\${SegmentedControlWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SegmentedControlWrapper && SegmentedControlWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SegmentedControlWrapper.rootSelector}, .\${SegmentedControlWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SegmentedControlWrapper);
+};
+
+ElementWrapper.prototype.findAllSegmentedControls = function(selector) {
+  return this.findAllComponents(SegmentedControlWrapper, selector);
+};
+ElementWrapper.prototype.findSelect = function(selector) {
+  let rootSelector = \`.\${SelectWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SelectWrapper && SelectWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SelectWrapper.rootSelector}, .\${SelectWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SelectWrapper);
+};
+
+ElementWrapper.prototype.findAllSelects = function(selector) {
+  return this.findAllComponents(SelectWrapper, selector);
+};
+ElementWrapper.prototype.findSideNavigation = function(selector) {
+  let rootSelector = \`.\${SideNavigationWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SideNavigationWrapper && SideNavigationWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SideNavigationWrapper.rootSelector}, .\${SideNavigationWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SideNavigationWrapper);
+};
+
+ElementWrapper.prototype.findAllSideNavigations = function(selector) {
+  return this.findAllComponents(SideNavigationWrapper, selector);
+};
+ElementWrapper.prototype.findSkeleton = function(selector) {
+  let rootSelector = \`.\${SkeletonWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SkeletonWrapper && SkeletonWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SkeletonWrapper.rootSelector}, .\${SkeletonWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SkeletonWrapper);
+};
+
+ElementWrapper.prototype.findAllSkeletons = function(selector) {
+  return this.findAllComponents(SkeletonWrapper, selector);
+};
+ElementWrapper.prototype.findSlider = function(selector) {
+  let rootSelector = \`.\${SliderWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SliderWrapper && SliderWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SliderWrapper.rootSelector}, .\${SliderWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SliderWrapper);
+};
+
+ElementWrapper.prototype.findAllSliders = function(selector) {
+  return this.findAllComponents(SliderWrapper, selector);
+};
+ElementWrapper.prototype.findSpaceBetween = function(selector) {
+  let rootSelector = \`.\${SpaceBetweenWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SpaceBetweenWrapper && SpaceBetweenWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SpaceBetweenWrapper.rootSelector}, .\${SpaceBetweenWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpaceBetweenWrapper);
+};
+
+ElementWrapper.prototype.findAllSpaceBetweens = function(selector) {
+  return this.findAllComponents(SpaceBetweenWrapper, selector);
+};
+ElementWrapper.prototype.findSpinner = function(selector) {
+  let rootSelector = \`.\${SpinnerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SpinnerWrapper && SpinnerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SpinnerWrapper.rootSelector}, .\${SpinnerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpinnerWrapper);
+};
+
+ElementWrapper.prototype.findAllSpinners = function(selector) {
+  return this.findAllComponents(SpinnerWrapper, selector);
+};
+ElementWrapper.prototype.findSplitPanel = function(selector) {
+  let rootSelector = \`.\${SplitPanelWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SplitPanelWrapper && SplitPanelWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SplitPanelWrapper.rootSelector}, .\${SplitPanelWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SplitPanelWrapper);
+};
+
+ElementWrapper.prototype.findAllSplitPanels = function(selector) {
+  return this.findAllComponents(SplitPanelWrapper, selector);
+};
+ElementWrapper.prototype.findStatusIndicator = function(selector) {
+  let rootSelector = \`.\${StatusIndicatorWrapper.rootSelector}\`;
+  if("legacyRootSelector" in StatusIndicatorWrapper && StatusIndicatorWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${StatusIndicatorWrapper.rootSelector}, .\${StatusIndicatorWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StatusIndicatorWrapper);
+};
+
+ElementWrapper.prototype.findAllStatusIndicators = function(selector) {
+  return this.findAllComponents(StatusIndicatorWrapper, selector);
+};
+ElementWrapper.prototype.findSteps = function(selector) {
+  let rootSelector = \`.\${StepsWrapper.rootSelector}\`;
+  if("legacyRootSelector" in StepsWrapper && StepsWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${StepsWrapper.rootSelector}, .\${StepsWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StepsWrapper);
+};
+
+ElementWrapper.prototype.findAllSteps = function(selector) {
+  return this.findAllComponents(StepsWrapper, selector);
+};
+ElementWrapper.prototype.findTable = function(selector) {
+  let rootSelector = \`.\${TableWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TableWrapper && TableWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TableWrapper.rootSelector}, .\${TableWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TableWrapper);
+};
+
+ElementWrapper.prototype.findAllTables = function(selector) {
+  return this.findAllComponents(TableWrapper, selector);
+};
+ElementWrapper.prototype.findTabs = function(selector) {
+  let rootSelector = \`.\${TabsWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TabsWrapper && TabsWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TabsWrapper.rootSelector}, .\${TabsWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TabsWrapper);
+};
+
+ElementWrapper.prototype.findAllTabs = function(selector) {
+  return this.findAllComponents(TabsWrapper, selector);
+};
+ElementWrapper.prototype.findTagEditor = function(selector) {
+  let rootSelector = \`.\${TagEditorWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TagEditorWrapper && TagEditorWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TagEditorWrapper.rootSelector}, .\${TagEditorWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TagEditorWrapper);
+};
+
+ElementWrapper.prototype.findAllTagEditors = function(selector) {
+  return this.findAllComponents(TagEditorWrapper, selector);
+};
+ElementWrapper.prototype.findTextContent = function(selector) {
+  let rootSelector = \`.\${TextContentWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TextContentWrapper && TextContentWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TextContentWrapper.rootSelector}, .\${TextContentWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextContentWrapper);
+};
+
+ElementWrapper.prototype.findAllTextContents = function(selector) {
+  return this.findAllComponents(TextContentWrapper, selector);
+};
+ElementWrapper.prototype.findTextFilter = function(selector) {
+  let rootSelector = \`.\${TextFilterWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TextFilterWrapper && TextFilterWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TextFilterWrapper.rootSelector}, .\${TextFilterWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextFilterWrapper);
+};
+
+ElementWrapper.prototype.findAllTextFilters = function(selector) {
+  return this.findAllComponents(TextFilterWrapper, selector);
+};
+ElementWrapper.prototype.findTextarea = function(selector) {
+  let rootSelector = \`.\${TextareaWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TextareaWrapper && TextareaWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TextareaWrapper.rootSelector}, .\${TextareaWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextareaWrapper);
+};
+
+ElementWrapper.prototype.findAllTextareas = function(selector) {
+  return this.findAllComponents(TextareaWrapper, selector);
+};
+ElementWrapper.prototype.findTiles = function(selector) {
+  let rootSelector = \`.\${TilesWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TilesWrapper && TilesWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TilesWrapper.rootSelector}, .\${TilesWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TilesWrapper);
+};
+
+ElementWrapper.prototype.findAllTiles = function(selector) {
+  return this.findAllComponents(TilesWrapper, selector);
+};
+ElementWrapper.prototype.findTimeInput = function(selector) {
+  let rootSelector = \`.\${TimeInputWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TimeInputWrapper && TimeInputWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TimeInputWrapper.rootSelector}, .\${TimeInputWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TimeInputWrapper);
+};
+
+ElementWrapper.prototype.findAllTimeInputs = function(selector) {
+  return this.findAllComponents(TimeInputWrapper, selector);
+};
+ElementWrapper.prototype.findToggle = function(selector) {
+  let rootSelector = \`.\${ToggleWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ToggleWrapper && ToggleWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ToggleWrapper.rootSelector}, .\${ToggleWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleWrapper);
+};
+
+ElementWrapper.prototype.findAllToggles = function(selector) {
+  return this.findAllComponents(ToggleWrapper, selector);
+};
+ElementWrapper.prototype.findToggleButton = function(selector) {
+  let rootSelector = \`.\${ToggleButtonWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ToggleButtonWrapper && ToggleButtonWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ToggleButtonWrapper.rootSelector}, .\${ToggleButtonWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleButtonWrapper);
+};
+
+ElementWrapper.prototype.findAllToggleButtons = function(selector) {
+  return this.findAllComponents(ToggleButtonWrapper, selector);
+};
+ElementWrapper.prototype.findToken = function(selector) {
+  let rootSelector = \`.\${TokenWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TokenWrapper && TokenWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TokenWrapper.rootSelector}, .\${TokenWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenWrapper);
+};
+
+ElementWrapper.prototype.findAllTokens = function(selector) {
+  return this.findAllComponents(TokenWrapper, selector);
+};
+ElementWrapper.prototype.findTokenGroup = function(selector) {
+  let rootSelector = \`.\${TokenGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TokenGroupWrapper && TokenGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TokenGroupWrapper.rootSelector}, .\${TokenGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllTokenGroups = function(selector) {
+  return this.findAllComponents(TokenGroupWrapper, selector);
+};
+ElementWrapper.prototype.findTooltip = function(selector) {
+  let rootSelector = \`.\${TooltipWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TooltipWrapper && TooltipWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TooltipWrapper.rootSelector}, .\${TooltipWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TooltipWrapper);
+};
+
+ElementWrapper.prototype.findAllTooltips = function(selector) {
+  return this.findAllComponents(TooltipWrapper, selector);
+};
+ElementWrapper.prototype.findTopNavigation = function(selector) {
+  let rootSelector = \`.\${TopNavigationWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TopNavigationWrapper && TopNavigationWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TopNavigationWrapper.rootSelector}, .\${TopNavigationWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TopNavigationWrapper);
+};
+
+ElementWrapper.prototype.findAllTopNavigations = function(selector) {
+  return this.findAllComponents(TopNavigationWrapper, selector);
+};
+ElementWrapper.prototype.findTreeView = function(selector) {
+  let rootSelector = \`.\${TreeViewWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TreeViewWrapper && TreeViewWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TreeViewWrapper.rootSelector}, .\${TreeViewWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TreeViewWrapper);
+};
+
+ElementWrapper.prototype.findAllTreeViews = function(selector) {
+  return this.findAllComponents(TreeViewWrapper, selector);
+};
+ElementWrapper.prototype.findTruncatedText = function(selector) {
+  let rootSelector = \`.\${TruncatedTextWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TruncatedTextWrapper && TruncatedTextWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TruncatedTextWrapper.rootSelector}, .\${TruncatedTextWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TruncatedTextWrapper);
+};
+
+ElementWrapper.prototype.findAllTruncatedTexts = function(selector) {
+  return this.findAllComponents(TruncatedTextWrapper, selector);
+};
+ElementWrapper.prototype.findTutorialPanel = function(selector) {
+  let rootSelector = \`.\${TutorialPanelWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TutorialPanelWrapper && TutorialPanelWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TutorialPanelWrapper.rootSelector}, .\${TutorialPanelWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TutorialPanelWrapper);
+};
+
+ElementWrapper.prototype.findAllTutorialPanels = function(selector) {
+  return this.findAllComponents(TutorialPanelWrapper, selector);
+};
+ElementWrapper.prototype.findWizard = function(selector) {
+  let rootSelector = \`.\${WizardWrapper.rootSelector}\`;
+  if("legacyRootSelector" in WizardWrapper && WizardWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${WizardWrapper.rootSelector}, .\${WizardWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, WizardWrapper);
+};
+
+ElementWrapper.prototype.findAllWizards = function(selector) {
+  return this.findAllComponents(WizardWrapper, selector);
+};
+
+ElementWrapper.prototype.findClosestActionCard = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ActionCardWrapper);
+};
+ElementWrapper.prototype.findClosestAlert = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AlertWrapper);
+};
+ElementWrapper.prototype.findClosestAnchorNavigation = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AnchorNavigationWrapper);
+};
+ElementWrapper.prototype.findClosestAnnotation = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AnnotationWrapper);
+};
+ElementWrapper.prototype.findClosestAppLayout = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AppLayoutWrapper);
+};
+ElementWrapper.prototype.findClosestAppLayoutToolbar = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AppLayoutToolbarWrapper);
+};
+ElementWrapper.prototype.findClosestAreaChart = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AreaChartWrapper);
+};
+ElementWrapper.prototype.findClosestAttributeEditor = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AttributeEditorWrapper);
+};
+ElementWrapper.prototype.findClosestAutosuggest = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AutosuggestWrapper);
+};
+ElementWrapper.prototype.findClosestBadge = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(BadgeWrapper);
+};
+ElementWrapper.prototype.findClosestBarChart = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(BarChartWrapper);
+};
+ElementWrapper.prototype.findClosestBox = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(BoxWrapper);
+};
+ElementWrapper.prototype.findClosestBreadcrumbGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(BreadcrumbGroupWrapper);
+};
+ElementWrapper.prototype.findClosestButton = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ButtonWrapper);
+};
+ElementWrapper.prototype.findClosestButtonDropdown = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ButtonDropdownWrapper);
+};
+ElementWrapper.prototype.findClosestButtonGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ButtonGroupWrapper);
+};
+ElementWrapper.prototype.findClosestCalendar = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CalendarWrapper);
+};
+ElementWrapper.prototype.findClosestCards = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CardsWrapper);
+};
+ElementWrapper.prototype.findClosestCheckbox = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CheckboxWrapper);
+};
+ElementWrapper.prototype.findClosestCodeEditor = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CodeEditorWrapper);
+};
+ElementWrapper.prototype.findClosestCollectionPreferences = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CollectionPreferencesWrapper);
+};
+ElementWrapper.prototype.findClosestColumnLayout = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ColumnLayoutWrapper);
+};
+ElementWrapper.prototype.findClosestContainer = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ContainerWrapper);
+};
+ElementWrapper.prototype.findClosestContentLayout = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ContentLayoutWrapper);
+};
+ElementWrapper.prototype.findClosestCopyToClipboard = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CopyToClipboardWrapper);
+};
+ElementWrapper.prototype.findClosestDateInput = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DateInputWrapper);
+};
+ElementWrapper.prototype.findClosestDatePicker = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DatePickerWrapper);
+};
+ElementWrapper.prototype.findClosestDateRangePicker = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DateRangePickerWrapper);
+};
+ElementWrapper.prototype.findClosestDivider = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DividerWrapper);
+};
+ElementWrapper.prototype.findClosestDrawer = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DrawerWrapper);
+};
+ElementWrapper.prototype.findClosestDropdown = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DropdownWrapper);
+};
+ElementWrapper.prototype.findClosestErrorBoundary = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ErrorBoundaryWrapper);
+};
+ElementWrapper.prototype.findClosestExpandableSection = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ExpandableSectionWrapper);
+};
+ElementWrapper.prototype.findClosestFileDropzone = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FileDropzoneWrapper);
+};
+ElementWrapper.prototype.findClosestFileInput = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FileInputWrapper);
+};
+ElementWrapper.prototype.findClosestFileTokenGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FileTokenGroupWrapper);
+};
+ElementWrapper.prototype.findClosestFileUpload = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FileUploadWrapper);
+};
+ElementWrapper.prototype.findClosestFlashbar = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FlashbarWrapper);
+};
+ElementWrapper.prototype.findClosestForm = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FormWrapper);
+};
+ElementWrapper.prototype.findClosestFormField = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FormFieldWrapper);
+};
+ElementWrapper.prototype.findClosestGrid = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(GridWrapper);
+};
+ElementWrapper.prototype.findClosestHeader = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(HeaderWrapper);
+};
+ElementWrapper.prototype.findClosestHelpPanel = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(HelpPanelWrapper);
+};
+ElementWrapper.prototype.findClosestHotspot = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(HotspotWrapper);
+};
+ElementWrapper.prototype.findClosestIcon = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(IconWrapper);
+};
+ElementWrapper.prototype.findClosestInput = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(InputWrapper);
+};
+ElementWrapper.prototype.findClosestItemCard = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ItemCardWrapper);
+};
+ElementWrapper.prototype.findClosestKeyValuePairs = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(KeyValuePairsWrapper);
+};
+ElementWrapper.prototype.findClosestLineChart = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(LineChartWrapper);
+};
+ElementWrapper.prototype.findClosestLink = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(LinkWrapper);
+};
+ElementWrapper.prototype.findClosestList = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ListWrapper);
+};
+ElementWrapper.prototype.findClosestLiveRegion = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(LiveRegionWrapper);
+};
+ElementWrapper.prototype.findClosestMixedLineBarChart = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(MixedLineBarChartWrapper);
+};
+ElementWrapper.prototype.findClosestModal = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ModalWrapper);
+};
+ElementWrapper.prototype.findClosestMultiselect = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(MultiselectWrapper);
+};
+ElementWrapper.prototype.findClosestNavigableGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(NavigableGroupWrapper);
+};
+ElementWrapper.prototype.findClosestPagination = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PaginationWrapper);
+};
+ElementWrapper.prototype.findClosestPanelLayout = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PanelLayoutWrapper);
+};
+ElementWrapper.prototype.findClosestPieChart = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PieChartWrapper);
+};
+ElementWrapper.prototype.findClosestPopover = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PopoverWrapper);
+};
+ElementWrapper.prototype.findClosestProgressBar = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ProgressBarWrapper);
+};
+ElementWrapper.prototype.findClosestPromptInput = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PromptInputWrapper);
+};
+ElementWrapper.prototype.findClosestPropertyFilter = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PropertyFilterWrapper);
+};
+ElementWrapper.prototype.findClosestRadioButton = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(RadioButtonWrapper);
+};
+ElementWrapper.prototype.findClosestRadioGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(RadioGroupWrapper);
+};
+ElementWrapper.prototype.findClosestS3ResourceSelector = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(S3ResourceSelectorWrapper);
+};
+ElementWrapper.prototype.findClosestSegmentedControl = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SegmentedControlWrapper);
+};
+ElementWrapper.prototype.findClosestSelect = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SelectWrapper);
+};
+ElementWrapper.prototype.findClosestSideNavigation = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SideNavigationWrapper);
+};
+ElementWrapper.prototype.findClosestSkeleton = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SkeletonWrapper);
+};
+ElementWrapper.prototype.findClosestSlider = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SliderWrapper);
+};
+ElementWrapper.prototype.findClosestSpaceBetween = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SpaceBetweenWrapper);
+};
+ElementWrapper.prototype.findClosestSpinner = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SpinnerWrapper);
+};
+ElementWrapper.prototype.findClosestSplitPanel = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SplitPanelWrapper);
+};
+ElementWrapper.prototype.findClosestStatusIndicator = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(StatusIndicatorWrapper);
+};
+ElementWrapper.prototype.findClosestSteps = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(StepsWrapper);
+};
+ElementWrapper.prototype.findClosestTable = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TableWrapper);
+};
+ElementWrapper.prototype.findClosestTabs = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TabsWrapper);
+};
+ElementWrapper.prototype.findClosestTagEditor = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TagEditorWrapper);
+};
+ElementWrapper.prototype.findClosestTextContent = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TextContentWrapper);
+};
+ElementWrapper.prototype.findClosestTextFilter = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TextFilterWrapper);
+};
+ElementWrapper.prototype.findClosestTextarea = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TextareaWrapper);
+};
+ElementWrapper.prototype.findClosestTiles = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TilesWrapper);
+};
+ElementWrapper.prototype.findClosestTimeInput = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TimeInputWrapper);
+};
+ElementWrapper.prototype.findClosestToggle = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ToggleWrapper);
+};
+ElementWrapper.prototype.findClosestToggleButton = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ToggleButtonWrapper);
+};
+ElementWrapper.prototype.findClosestToken = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TokenWrapper);
+};
+ElementWrapper.prototype.findClosestTokenGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TokenGroupWrapper);
+};
+ElementWrapper.prototype.findClosestTooltip = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TooltipWrapper);
+};
+ElementWrapper.prototype.findClosestTopNavigation = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TopNavigationWrapper);
+};
+ElementWrapper.prototype.findClosestTreeView = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TreeViewWrapper);
+};
+ElementWrapper.prototype.findClosestTruncatedText = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TruncatedTextWrapper);
+};
+ElementWrapper.prototype.findClosestTutorialPanel = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TutorialPanelWrapper);
+};
+ElementWrapper.prototype.findClosestWizard = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(WizardWrapper);
+};
+
 export default function wrapper(root: Element = document.body) {
+  if (document && document.body && !document.body.contains(root)) {
+    console.warn('[AwsUi] [test-utils] provided element is not part of the document body, interactions may work incorrectly')
+  };
   return new ElementWrapper(root);
 }
 "
diff --git a/src/box/__tests__/box.test.tsx b/src/box/__tests__/box.test.tsx
index b3a4deedbc..6c118fc543 100644
--- a/src/box/__tests__/box.test.tsx
+++ b/src/box/__tests__/box.test.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import Box, { BoxProps } from '../../../lib/components/box';
+import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
 import BoxWrapper from '../../../lib/components/test-utils/dom/box';
 
 import styles from '../../../lib/components/box/styles.css.js';
@@ -175,19 +176,19 @@ describe('Box', () => {
     });
   });
 
-  describe('awsui-accent variant', () => {
-    test('uses span as tag name', () => {
-      const boxWrapper = renderBox({ variant: 'awsui-accent' });
+  describe('visualAccent property', () => {
+    test('renders a span by default', () => {
+      const boxWrapper = renderBox({ visualAccent: { color: 'indigo' } });
       expect(boxWrapper.getElement().tagName).toBe('SPAN');
     });
 
-    test('applies the accent-variant class', () => {
-      const boxWrapper = renderBox({ variant: 'awsui-accent' });
-      expect(boxWrapper.getElement()).toHaveClass(styles['accent-variant']);
+    test('applies the base visual-accent class', () => {
+      const boxWrapper = renderBox({ visualAccent: { color: 'indigo' } });
+      expect(boxWrapper.getElement()).toHaveClass(styles['visual-accent']);
     });
 
-    test('applies the correct accentColor class', () => {
-      const colors: Array<BoxProps.AccentColor> = [
+    test('applies the correct color class', () => {
+      const colors: Array<BoxProps.VisualAccent.Color> = [
         'red',
         'yellow',
         'indigo',
@@ -199,35 +200,76 @@ describe('Box', () => {
         'grey',
       ];
       colors.forEach(color => {
-        const boxWrapper = renderBox({ variant: 'awsui-accent', accentColor: color });
-        expect(boxWrapper.getElement()).toHaveClass(styles[`accent-${color}`]);
+        const boxWrapper = renderBox({ visualAccent: { color } });
+        expect(boxWrapper.getElement()).toHaveClass(styles[`visual-accent-${color}`]);
       });
     });
 
-    test('does not apply accentColor class when accentColor is not set', () => {
-      const boxWrapper = renderBox({ variant: 'awsui-accent' });
+    test('does not apply any accent class when visualAccent is not set', () => {
+      const boxWrapper = renderBox({});
       const element = boxWrapper.getElement();
-      expect(element.className).not.toMatch(
-        /accent-red|accent-yellow|accent-indigo|accent-green|accent-orange|accent-purple|accent-mint|accent-lime|accent-grey/
-      );
+      expect(element.className).not.toMatch(/visual-accent/);
+      expect(element.tagName).toBe('DIV');
+    });
+
+    test('defaults to the auto aspect ratio', () => {
+      const boxWrapper = renderBox({ visualAccent: { color: 'indigo' } });
+      expect(boxWrapper.getElement()).toHaveClass(styles['visual-accent-aspect-auto']);
     });
 
-    test('applies the correct accentShape class', () => {
-      const shapes: Array<BoxProps.AccentShape> = ['sharp', 'circle'];
-      shapes.forEach(shape => {
-        const boxWrapper = renderBox({ variant: 'awsui-accent', accentColor: 'indigo', accentShape: shape });
-        expect(boxWrapper.getElement()).toHaveClass(styles[`accent-shape-${shape}`]);
+    test('applies the correct aspect ratio class', () => {
+      const aspectRatios: Array<BoxProps.VisualAccent.AspectRatio> = ['auto', 'equal'];
+      aspectRatios.forEach(aspectRatio => {
+        const boxWrapper = renderBox({ visualAccent: { color: 'indigo', aspectRatio } });
+        expect(boxWrapper.getElement()).toHaveClass(styles[`visual-accent-aspect-${aspectRatio}`]);
+      });
+    });
+
+    test('applies the correct class for each t-shirt size borderRadius keyword', () => {
+      const keywords: Array<BoxProps.VisualAccent.BorderRadius> = [
+        'n',
+        'xxxs',
+        'xxs',
+        'xs',
+        's',
+        'm',
+        'l',
+        'xl',
+        'xxl',
+        'xxxl',
+      ];
+      keywords.forEach(borderRadius => {
+        const boxWrapper = renderBox({ visualAccent: { color: 'indigo', borderRadius } });
+        const element = boxWrapper.getElement();
+        expect(element).toHaveClass(styles[`visual-accent-radius-${borderRadius}`]);
+        // Keyword radii are applied via class, not the custom property.
+        expect(element.style.getPropertyValue(customCssProps.boxVisualAccentBorderRadius)).toBe('');
       });
     });
 
-    test('does not apply accentShape class when accentShape is not set', () => {
-      const boxWrapper = renderBox({ variant: 'awsui-accent', accentColor: 'indigo' });
+    test('applies an arbitrary CSS borderRadius value through the custom property', () => {
+      const boxWrapper = renderBox({ visualAccent: { color: 'indigo', borderRadius: '13px' } });
+      const element = boxWrapper.getElement();
+      expect(element.style.getPropertyValue(customCssProps.boxVisualAccentBorderRadius)).toBe('13px');
+      expect(element.className).not.toMatch(/visual-accent-radius-/);
+    });
+
+    test('does not set the borderRadius custom property or class when borderRadius is not set', () => {
+      const boxWrapper = renderBox({ visualAccent: { color: 'indigo' } });
+      const element = boxWrapper.getElement();
+      expect(element.style.getPropertyValue(customCssProps.boxVisualAccentBorderRadius)).toBe('');
+      expect(element.className).not.toMatch(/visual-accent-radius-/);
+    });
+
+    test('renders a circle when combining equal aspect ratio and 50% borderRadius', () => {
+      const boxWrapper = renderBox({ visualAccent: { color: 'indigo', aspectRatio: 'equal', borderRadius: '50%' } });
       const element = boxWrapper.getElement();
-      expect(element.className).not.toMatch(/accent-shape-sharp|accent-shape-circle/);
+      expect(element).toHaveClass(styles['visual-accent-aspect-equal']);
+      expect(element.style.getPropertyValue(customCssProps.boxVisualAccentBorderRadius)).toBe('50%');
     });
 
-    test('tagOverride works with accent variant', () => {
-      const boxWrapper = renderBox({ variant: 'awsui-accent', tagOverride: 'div' });
+    test('tagOverride works with visualAccent', () => {
+      const boxWrapper = renderBox({ visualAccent: { color: 'indigo' }, tagOverride: 'div' });
       expect(boxWrapper.getElement().tagName).toBe('DIV');
     });
   });
diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts
index d719c71a3c..85f019de44 100644
--- a/src/box/interfaces.ts
+++ b/src/box/interfaces.ts
@@ -19,26 +19,32 @@ export interface BoxProps extends BaseComponentProps {
    *   styled using "Display large light" typography.
    * - If you set it to `awsui-inline-code`, the component will render a `code` element,
    *   styled with a background and padding for inline code snippets.
-   * - If you set it to `awsui-accent`, the component will render a `span`,
-   *   styled as a visual accent container with background and content color combinations.
-   *   Use with the `accentColor` prop to select a color variant.
    *
    * Override the HTML tag by using property `tagOverride`.
    */
   variant?: BoxProps.Variant;
   /**
-   * Defines the accent color for the `awsui-accent` variant.
-   * Only applies when `variant` is set to `awsui-accent`.
-   */
-  accentColor?: BoxProps.AccentColor;
-  /**
-   * Controls the border-radius shape of the accent container.
-   * Only applies when `variant` is set to `awsui-accent`.
+   * Renders the box as a visual accent container to emphasize its content.
+   *
+   * Setting this property activates the accent styling: the component renders a `span`
+   * with a coordinated background and content color combination that works in both light
+   * and dark modes. A `variant` is not required to activate the accent.
    *
-   * - `sharp` (default) — applies a small border-radius (2px).
-   * - `circle` — applies a fully circular shape with equal width and height, suitable for wrapping icons.
+   * The object accepts the following fields:
+   * - `color` (required) — the coordinated background and foreground color pair. The foreground
+   *   color is applied as the container's CSS `color`, so it only affects content that inherits
+   *   the current color (for example an `Icon`, or a nested `Box` with `color="inherit"`).
+   *   Content that sets its own color is not overridden.
+   * - `aspectRatio` — `auto` (default) lets the container's width follow its content;
+   *   `equal` forces equal width and height, suitable for wrapping icons.
+   * - `borderRadius` — the corner rounding applied to the container. Accepts a t-shirt size keyword
+   *   from the Box spacing scale (`n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`) or
+   *   any valid CSS `border-radius` value such as `'13px'`. Set it to `'50%'` together with
+   *   `aspectRatio: 'equal'` to render a circle.
+   *
+   * Composes with existing Box props such as `padding` and `margin`.
    */
-  accentShape?: BoxProps.AccentShape;
+  visualAccent?: BoxProps.VisualAccent;
   /**
    * Overrides the default HTML tag provided by the variant.
    */
@@ -170,12 +176,53 @@ export namespace BoxProps {
     | 'awsui-key-label'
     | 'awsui-gen-ai-label'
     | 'awsui-value-large'
-    | 'awsui-inline-code'
-    | 'awsui-accent';
+    | 'awsui-inline-code';
 
-  export type AccentColor = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'mint' | 'lime' | 'grey';
+  export interface VisualAccent {
+    /**
+     * The coordinated background and foreground color pair applied to the accent container.
+     * Each color works in both light and dark modes.
+     *
+     * The background color is applied directly to the container. The foreground color is applied
+     * as the container's CSS `color` and is therefore only picked up by content that inherits the
+     * current color, such as an `Icon` or a nested `Box` with `color="inherit"`. Content that
+     * defines its own color (for example a `Box` with an explicit `color`, or a `Link`) keeps that
+     * color and is not recolored by the accent.
+     */
+    color: BoxProps.VisualAccent.Color;
+    /**
+     * Controls the aspect ratio of the accent container.
+     *
+     * - `auto` (default) — the container's width follows its content.
+     * - `equal` — the container has equal width and height, suitable for wrapping icons.
+     *
+     * Combine `aspectRatio: 'equal'` with `borderRadius: '50%'` to render a circle.
+     */
+    aspectRatio?: BoxProps.VisualAccent.AspectRatio;
+    /**
+     * The corner rounding applied to the accent container.
+     *
+     * You can use one of the curated t-shirt size keywords, which map to the same spacing scale
+     * used by `padding` and `margin`: `n` (none), `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`,
+     * or `xxxl`.
+     *
+     * You can also pass any valid CSS `border-radius` value as a string (for example `'13px'`,
+     * `'0.5rem'`, or `'50%'`), which is applied as-is. Combine `borderRadius: '50%'` with
+     * `aspectRatio: 'equal'` to render a circle.
+     */
+    borderRadius?: BoxProps.VisualAccent.BorderRadius;
+  }
 
-  export type AccentShape = 'sharp' | 'circle';
+  export namespace VisualAccent {
+    export type Color = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'mint' | 'lime' | 'grey';
+    export type AspectRatio = 'auto' | 'equal';
+    /**
+     * A curated t-shirt size keyword aligned to the Box spacing scale
+     * (`n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`), or any valid CSS
+     * `border-radius` value.
+     */
+    export type BorderRadius = 'n' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | (string & {});
+  }
 
   export type Display = 'block' | 'inline' | 'inline-block' | 'none';
   export type TextAlign = 'left' | 'center' | 'right';
diff --git a/src/box/internal.tsx b/src/box/internal.tsx
index a226cf17ea..426d87907d 100644
--- a/src/box/internal.tsx
+++ b/src/box/internal.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import clsx from 'clsx';
 
 import { getBaseProps } from '../internal/base-component';
+import customCssProps from '../internal/generated/custom-css-properties';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import WithNativeAttributes from '../internal/utils/with-native-attributes';
 import { BoxProps } from './interfaces';
@@ -12,6 +13,11 @@ import styles from './styles.css.js';
 
 type InternalBoxProps = BoxProps & InternalBaseComponentProps;
 
+// Curated t-shirt size keywords mirror the Box spacing scale and are applied via CSS classes so
+// they resolve to the corresponding space tokens. Any other value is treated as a raw CSS
+// `border-radius` string and applied through a custom property.
+const RADIUS_KEYWORDS: ReadonlyArray<string> = ['n', 'xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'];
+
 export default function InternalBox({
   variant = 'div',
   tagOverride,
@@ -23,8 +29,7 @@ export default function InternalBox({
   fontSize,
   fontWeight,
   color,
-  accentColor,
-  accentShape,
+  visualAccent,
   children,
   nativeAttributes,
   __internalRootRef,
@@ -34,13 +39,26 @@ export default function InternalBox({
   const marginsClassNamesSuffices = getClassNamesSuffixes(margin);
   const paddingsClassNamesSuffices = getClassNamesSuffixes(padding);
 
+  const accentAspectRatio = visualAccent?.aspectRatio ?? 'auto';
+  const accentBorderRadius = visualAccent?.borderRadius;
+  const isRadiusKeyword = accentBorderRadius !== undefined && RADIUS_KEYWORDS.includes(accentBorderRadius);
+  // Arbitrary (non-keyword) values are applied through a custom CSS property, which the base
+  // `.visual-accent` rule reads. This keeps custom rounding CSP-safe. Keyword values are handled
+  // by dedicated classes that map to the spacing tokens.
+  const accentStyle =
+    accentBorderRadius !== undefined && !isRadiusKeyword
+      ? { [customCssProps.boxVisualAccentBorderRadius]: accentBorderRadius }
+      : undefined;
+
   const className = clsx(
     baseProps.className,
     styles.root,
     styles.box,
     styles[`${variant.replace(/^awsui-/, '')}-variant`],
-    accentColor && styles[`accent-${accentColor}`],
-    accentShape && styles[`accent-shape-${accentShape}`],
+    visualAccent && styles['visual-accent'],
+    visualAccent && styles[`visual-accent-${visualAccent.color}`],
+    visualAccent && styles[`visual-accent-aspect-${accentAspectRatio}`],
+    visualAccent && isRadiusKeyword && styles[`visual-accent-radius-${accentBorderRadius}`],
     marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]),
     paddingsClassNamesSuffices.map(suffix => styles[`p-${suffix}`]),
     styles[`d-${display}`],
@@ -57,11 +75,12 @@ export default function InternalBox({
   return (
     <WithNativeAttributes
       {...baseProps}
-      tag={getTag(variant, tagOverride)}
+      tag={getTag(variant, tagOverride, !!visualAccent)}
       componentName="Box"
       tabIndex={tabindex}
       nativeAttributes={nativeAttributes}
       className={className}
+      style={accentStyle}
       ref={__internalRootRef}
     >
       {children}
@@ -77,11 +96,15 @@ const getClassNamesSuffixes = (value: BoxProps.SpacingSize | BoxProps.Spacing) =
   return sides.filter(side => !!value[side]).map(side => `${side}-${value[side]}`);
 };
 
-const getTag = (variant: BoxProps.Variant, tagOverride: BoxProps['tagOverride']) => {
+const getTag = (variant: BoxProps.Variant, tagOverride: BoxProps['tagOverride'], hasVisualAccent: boolean) => {
   if (tagOverride) {
     return tagOverride;
   }
 
+  if (hasVisualAccent) {
+    return 'span';
+  }
+
   if (variant === 'awsui-value-large') {
     return 'span';
   }
@@ -94,9 +117,5 @@ const getTag = (variant: BoxProps.Variant, tagOverride: BoxProps['tagOverride'])
     return 'code';
   }
 
-  if (variant === 'awsui-accent') {
-    return 'span';
-  }
-
   return variant;
 };
diff --git a/src/box/style-box.scss b/src/box/style-box.scss
index 735d39097a..a501e00134 100644
--- a/src/box/style-box.scss
+++ b/src/box/style-box.scss
@@ -3,35 +3,67 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
+@use 'sass:map';
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
-// ─── Base accent variant ─────────────────────────────────────────────────────
-.accent-variant {
+// T-shirt size keywords mirror the Box spacing scale (see spacing.scss).
+$accent-radii: (
+  'n': awsui.$space-none,
+  'xxxs': awsui.$space-xxxs,
+  'xxs': awsui.$space-xxs,
+  'xs': awsui.$space-xs,
+  's': awsui.$space-s,
+  'm': awsui.$space-m,
+  'l': awsui.$space-l,
+  'xl': awsui.$space-xl,
+  'xxl': awsui.$space-xxl,
+  'xxxl': awsui.$space-xxxl,
+);
+
+@mixin accent-radius($value) {
+  border-start-start-radius: $value;
+  border-start-end-radius: $value;
+  border-end-start-radius: $value;
+  border-end-end-radius: $value;
+}
+
+// ─── Base visual accent container ─────────────────────────────────────────────
+// Applied whenever the `visualAccent` prop is set. Provides the container layout and default
+// corner rounding. Corner rounding falls back to the `boxVisualAccentBorderRadius` custom
+// property (set by the component for arbitrary CSS `borderRadius` values), or a small default
+// when `borderRadius` is not set. Curated t-shirt size keywords are handled by the
+// `.visual-accent-radius-*` classes below, which override this value.
+.visual-accent {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding-block: awsui.$space-xxs;
   padding-inline: awsui.$space-xs;
+  box-sizing: border-box;
+  @include accent-radius(var(#{custom-props.$boxVisualAccentBorderRadius}, 2px));
 }
 
-// ─── Accent shapes ───────────────────────────────────────────────────────────
-// `sharp` — small border-radius for badge/tag-like appearance (default).
-// `circle` — fully circular with equal dimensions, suitable for icon wrapping.
-
-.accent-shape-sharp {
-  border-start-start-radius: 2px;
-  border-start-end-radius: 2px;
-  border-end-start-radius: 2px;
-  border-end-end-radius: 2px;
-  padding-block: awsui.$space-xxxs;
-  padding-inline: awsui.$space-xxxs;
+// ─── Accent border radius (t-shirt size keywords) ─────────────────────────────
+// Mirror the Box spacing scale so `borderRadius` keywords align with `padding` / `margin`.
+@each $name, $value in $accent-radii {
+  .visual-accent-radius-#{$name} {
+    @include accent-radius($value);
+  }
+}
+
+// ─── Accent aspect ratio ──────────────────────────────────────────────────────
+// `auto`  — default; the container's width follows its content.
+// `equal` — equal width and height, suitable for icon wrapping. Combine with
+//           `borderRadius: '50%'` to render a circle.
+
+.visual-accent-aspect-auto {
+  // Reset any square constraints so content can size the container naturally.
+  aspect-ratio: auto;
+  inline-size: auto;
 }
 
-.accent-shape-circle {
-  border-start-start-radius: 50%;
-  border-start-end-radius: 50%;
-  border-end-start-radius: 50%;
-  border-end-end-radius: 50%;
+.visual-accent-aspect-equal {
   // Equal padding on all sides.
   padding-block: awsui.$space-xs;
   padding-inline: awsui.$space-xs;
@@ -50,47 +82,47 @@
 // accent content color wins over `.root`'s default-text-style color (0,1,0), which is
 // emitted later in `styles.scss`. Descendants (nested Box, Icon) inherit this color.
 
-.box.accent-red {
+.box.visual-accent-red {
   background-color: awsui.$color-background-accent-red;
   color: awsui.$color-text-accent-red;
 }
 
-.box.accent-yellow {
+.box.visual-accent-yellow {
   background-color: awsui.$color-background-accent-yellow;
   color: awsui.$color-text-accent-yellow;
 }
 
-.box.accent-indigo {
+.box.visual-accent-indigo {
   background-color: awsui.$color-background-accent-indigo;
   color: awsui.$color-text-accent-indigo;
 }
 
-.box.accent-green {
+.box.visual-accent-green {
   background-color: awsui.$color-background-accent-green;
   color: awsui.$color-text-accent-green;
 }
 
-.box.accent-orange {
+.box.visual-accent-orange {
   background-color: awsui.$color-background-accent-orange;
   color: awsui.$color-text-accent-orange;
 }
 
-.box.accent-purple {
+.box.visual-accent-purple {
   background-color: awsui.$color-background-accent-purple;
   color: awsui.$color-text-accent-purple;
 }
 
-.box.accent-mint {
+.box.visual-accent-mint {
   background-color: awsui.$color-background-accent-mint;
   color: awsui.$color-text-accent-mint;
 }
 
-.box.accent-lime {
+.box.visual-accent-lime {
   background-color: awsui.$color-background-accent-lime;
   color: awsui.$color-text-accent-lime;
 }
 
-.box.accent-grey {
+.box.visual-accent-grey {
   background-color: awsui.$color-background-accent-grey;
   color: awsui.$color-text-accent-grey;
 }

From 58d3e771b607a6c2bceee65a7d3565cd6b9d7465 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 3 Jul 2026 10:53:45 +0200
Subject: [PATCH 10/19] chore: Update snapshots

---
 .../__snapshots__/documenter.test.ts.snap     | 129 ++++++++++------
 .../__snapshots__/styles.test.tsx.snap        |   6 +-
 .../__snapshots__/styles.test.tsx.snap        | 144 +++++++++---------
 .../__snapshots__/styles.test.tsx.snap        |  10 +-
 .../__snapshots__/styles.test.tsx.snap        |  66 ++++----
 .../__snapshots__/styles.test.tsx.snap        |  42 ++---
 .../__snapshots__/styles.test.tsx.snap        |  40 ++---
 .../__snapshots__/styles.test.tsx.snap        | 144 +++++++++---------
 .../__snapshots__/styles.test.tsx.snap        |  26 ++--
 9 files changed, 324 insertions(+), 283 deletions(-)

diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index c09d6dae2a..249a959036 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -4723,46 +4723,6 @@ exports[`Components definition for box matches the snapshot: box 1`] = `
   "functions": [],
   "name": "Box",
   "properties": [
-    {
-      "description": "Defines the accent color for the \`awsui-accent\` variant.
-Only applies when \`variant\` is set to \`awsui-accent\`.",
-      "inlineType": {
-        "name": "BoxProps.AccentColor",
-        "type": "union",
-        "values": [
-          "green",
-          "grey",
-          "indigo",
-          "lime",
-          "orange",
-          "purple",
-          "red",
-          "yellow",
-          "mint",
-        ],
-      },
-      "name": "accentColor",
-      "optional": true,
-      "type": "string",
-    },
-    {
-      "description": "Controls the border-radius shape of the accent container.
-Only applies when \`variant\` is set to \`awsui-accent\`.
-
-- \`sharp\` (default) — applies a small border-radius (2px).
-- \`circle\` — applies a fully circular shape with equal width and height, suitable for wrapping icons.",
-      "inlineType": {
-        "name": "BoxProps.AccentShape",
-        "type": "union",
-        "values": [
-          "circle",
-          "sharp",
-        ],
-      },
-      "name": "accentShape",
-      "optional": true,
-      "type": "string",
-    },
     {
       "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
       "description": "Adds the specified classes to the root element of the component.",
@@ -5028,9 +4988,6 @@ Sizes are automatically scaled down in compact mode.
   styled using "Display large light" typography.
 - If you set it to \`awsui-inline-code\`, the component will render a \`code\` element,
   styled with a background and padding for inline code snippets.
-- If you set it to \`awsui-accent\`, the component will render a \`span\`,
-  styled as a visual accent container with background and content color combinations.
-  Use with the \`accentColor\` prop to select a color variant.
 
 Override the HTML tag by using property \`tagOverride\`.",
       "inlineType": {
@@ -5054,13 +5011,97 @@ Override the HTML tag by using property \`tagOverride\`.",
           "awsui-key-label",
           "awsui-gen-ai-label",
           "awsui-inline-code",
-          "awsui-accent",
         ],
       },
       "name": "variant",
       "optional": true,
       "type": "string",
     },
+    {
+      "description": "Renders the box as a visual accent container to emphasize its content.
+
+Setting this property activates the accent styling: the component renders a \`span\`
+with a coordinated background and content color combination that works in both light
+and dark modes. A \`variant\` is not required to activate the accent.
+
+The object accepts the following fields:
+- \`color\` (required) — the coordinated background and foreground color pair. The foreground
+  color is applied as the container's CSS \`color\`, so it only affects content that inherits
+  the current color (for example an \`Icon\`, or a nested \`Box\` with \`color="inherit"\`).
+  Content that sets its own color is not overridden.
+- \`aspectRatio\` — \`auto\` (default) lets the container's width follow its content;
+  \`equal\` forces equal width and height, suitable for wrapping icons.
+- \`borderRadius\` — the corner rounding applied to the container. Accepts a t-shirt size keyword
+  from the Box spacing scale (\`n\`, \`xxxs\`, \`xxs\`, \`xs\`, \`s\`, \`m\`, \`l\`, \`xl\`, \`xxl\`, \`xxxl\`) or
+  any valid CSS \`border-radius\` value such as \`'13px'\`. Set it to \`'50%'\` together with
+  \`aspectRatio: 'equal'\` to render a circle.
+
+Composes with existing Box props such as \`padding\` and \`margin\`.",
+      "inlineType": {
+        "name": "BoxProps.VisualAccent",
+        "properties": [
+          {
+            "inlineType": {
+              "name": "BoxProps.VisualAccent.AspectRatio",
+              "type": "union",
+              "values": [
+                "auto",
+                "equal",
+              ],
+            },
+            "name": "aspectRatio",
+            "optional": true,
+            "type": "string",
+          },
+          {
+            "inlineType": {
+              "name": "BoxProps.VisualAccent.BorderRadius",
+              "type": "union",
+              "values": [
+                ""s"",
+                ""m"",
+                "string & {}",
+                ""n"",
+                ""xxxs"",
+                ""xxs"",
+                ""xs"",
+                ""l"",
+                ""xl"",
+                ""xxl"",
+                ""xxxl"",
+              ],
+            },
+            "name": "borderRadius",
+            "optional": true,
+            "type": "BoxProps.VisualAccent.BorderRadius",
+          },
+          {
+            "inlineType": {
+              "name": "BoxProps.VisualAccent.Color",
+              "type": "union",
+              "values": [
+                "green",
+                "grey",
+                "indigo",
+                "lime",
+                "orange",
+                "purple",
+                "red",
+                "yellow",
+                "mint",
+              ],
+            },
+            "name": "color",
+            "optional": false,
+            "type": "string",
+          },
+        ],
+        "type": "object",
+      },
+      "name": "visualAccent",
+      "optional": true,
+      "type": "BoxProps.VisualAccent",
+    },
   ],
   "regions": [
     {
diff --git a/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap b/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
index e365408648..9c001baa70 100644
--- a/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
@@ -6,9 +6,9 @@ exports[`getDropdownStyles handles all possible style configurations 2`] = `unde
 
 exports[`getDropdownStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-dropdown-content-border-color-6b9ypa": "rgb(0, 0, 0)",
-  "--awsui-dropdown-content-border-radius-6b9ypa": "8px",
-  "--awsui-dropdown-content-border-width-6b9ypa": "2px",
+  "--awsui-dropdown-content-border-color-alpv7o": "rgb(0, 0, 0)",
+  "--awsui-dropdown-content-border-radius-alpv7o": "8px",
+  "--awsui-dropdown-content-border-width-alpv7o": "2px",
   "background": "rgb(255, 255, 255)",
 }
 `;
diff --git a/src/input/__tests__/__snapshots__/styles.test.tsx.snap b/src/input/__tests__/__snapshots__/styles.test.tsx.snap
index 85c1053781..1c933681d0 100644
--- a/src/input/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/input/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,30 +2,30 @@
 
 exports[`getInputStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-focus-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-background-readonly-6b9ypa": undefined,
-  "--awsui-style-border-color-default-6b9ypa": undefined,
-  "--awsui-style-border-color-disabled-6b9ypa": undefined,
-  "--awsui-style-border-color-focus-6b9ypa": undefined,
-  "--awsui-style-border-color-hover-6b9ypa": undefined,
-  "--awsui-style-border-color-readonly-6b9ypa": undefined,
-  "--awsui-style-box-shadow-default-6b9ypa": undefined,
-  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
-  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
-  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
-  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-focus-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-color-readonly-6b9ypa": undefined,
-  "--awsui-style-placeholder-color-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
+  "--awsui-style-background-default-alpv7o": undefined,
+  "--awsui-style-background-disabled-alpv7o": undefined,
+  "--awsui-style-background-focus-alpv7o": undefined,
+  "--awsui-style-background-hover-alpv7o": undefined,
+  "--awsui-style-background-readonly-alpv7o": undefined,
+  "--awsui-style-border-color-default-alpv7o": undefined,
+  "--awsui-style-border-color-disabled-alpv7o": undefined,
+  "--awsui-style-border-color-focus-alpv7o": undefined,
+  "--awsui-style-border-color-hover-alpv7o": undefined,
+  "--awsui-style-border-color-readonly-alpv7o": undefined,
+  "--awsui-style-box-shadow-default-alpv7o": undefined,
+  "--awsui-style-box-shadow-disabled-alpv7o": undefined,
+  "--awsui-style-box-shadow-focus-alpv7o": undefined,
+  "--awsui-style-box-shadow-hover-alpv7o": undefined,
+  "--awsui-style-box-shadow-readonly-alpv7o": undefined,
+  "--awsui-style-color-default-alpv7o": undefined,
+  "--awsui-style-color-disabled-alpv7o": undefined,
+  "--awsui-style-color-focus-alpv7o": undefined,
+  "--awsui-style-color-hover-alpv7o": undefined,
+  "--awsui-style-color-readonly-alpv7o": undefined,
+  "--awsui-style-placeholder-color-alpv7o": undefined,
+  "--awsui-style-placeholder-font-size-alpv7o": undefined,
+  "--awsui-style-placeholder-font-style-alpv7o": undefined,
+  "--awsui-style-placeholder-font-weight-alpv7o": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -37,30 +37,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = `
 
 exports[`getInputStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-focus-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-background-readonly-6b9ypa": undefined,
-  "--awsui-style-border-color-default-6b9ypa": undefined,
-  "--awsui-style-border-color-disabled-6b9ypa": undefined,
-  "--awsui-style-border-color-focus-6b9ypa": undefined,
-  "--awsui-style-border-color-hover-6b9ypa": undefined,
-  "--awsui-style-border-color-readonly-6b9ypa": undefined,
-  "--awsui-style-box-shadow-default-6b9ypa": undefined,
-  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
-  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
-  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
-  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-focus-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-color-readonly-6b9ypa": undefined,
-  "--awsui-style-placeholder-color-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
+  "--awsui-style-background-default-alpv7o": undefined,
+  "--awsui-style-background-disabled-alpv7o": undefined,
+  "--awsui-style-background-focus-alpv7o": undefined,
+  "--awsui-style-background-hover-alpv7o": undefined,
+  "--awsui-style-background-readonly-alpv7o": undefined,
+  "--awsui-style-border-color-default-alpv7o": undefined,
+  "--awsui-style-border-color-disabled-alpv7o": undefined,
+  "--awsui-style-border-color-focus-alpv7o": undefined,
+  "--awsui-style-border-color-hover-alpv7o": undefined,
+  "--awsui-style-border-color-readonly-alpv7o": undefined,
+  "--awsui-style-box-shadow-default-alpv7o": undefined,
+  "--awsui-style-box-shadow-disabled-alpv7o": undefined,
+  "--awsui-style-box-shadow-focus-alpv7o": undefined,
+  "--awsui-style-box-shadow-hover-alpv7o": undefined,
+  "--awsui-style-box-shadow-readonly-alpv7o": undefined,
+  "--awsui-style-color-default-alpv7o": undefined,
+  "--awsui-style-color-disabled-alpv7o": undefined,
+  "--awsui-style-color-focus-alpv7o": undefined,
+  "--awsui-style-color-hover-alpv7o": undefined,
+  "--awsui-style-color-readonly-alpv7o": undefined,
+  "--awsui-style-placeholder-color-alpv7o": undefined,
+  "--awsui-style-placeholder-font-size-alpv7o": undefined,
+  "--awsui-style-placeholder-font-style-alpv7o": undefined,
+  "--awsui-style-placeholder-font-weight-alpv7o": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -72,30 +72,30 @@ exports[`getInputStyles handles all possible style configurations 2`] = `
 
 exports[`getInputStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-default-6b9ypa": "#ffffff",
-  "--awsui-style-background-disabled-6b9ypa": "#f0f0f0",
-  "--awsui-style-background-focus-6b9ypa": "#ffffff",
-  "--awsui-style-background-hover-6b9ypa": "#fafafa",
-  "--awsui-style-background-readonly-6b9ypa": "#ffffff",
-  "--awsui-style-border-color-default-6b9ypa": "#cccccc",
-  "--awsui-style-border-color-disabled-6b9ypa": "#e0e0e0",
-  "--awsui-style-border-color-focus-6b9ypa": "#0073bb",
-  "--awsui-style-border-color-hover-6b9ypa": "#999999",
-  "--awsui-style-border-color-readonly-6b9ypa": "#e0e0e0",
-  "--awsui-style-box-shadow-default-6b9ypa": "none",
-  "--awsui-style-box-shadow-disabled-6b9ypa": "none",
-  "--awsui-style-box-shadow-focus-6b9ypa": "0 0 0 2px #0073bb",
-  "--awsui-style-box-shadow-hover-6b9ypa": "0 1px 2px rgba(0,0,0,0.1)",
-  "--awsui-style-box-shadow-readonly-6b9ypa": "none",
-  "--awsui-style-color-default-6b9ypa": "#000000",
-  "--awsui-style-color-disabled-6b9ypa": "#999999",
-  "--awsui-style-color-focus-6b9ypa": "#000000",
-  "--awsui-style-color-hover-6b9ypa": "#000000",
-  "--awsui-style-color-readonly-6b9ypa": "#000000",
-  "--awsui-style-placeholder-color-6b9ypa": "#999999",
-  "--awsui-style-placeholder-font-size-6b9ypa": "14px",
-  "--awsui-style-placeholder-font-style-6b9ypa": "italic",
-  "--awsui-style-placeholder-font-weight-6b9ypa": "400",
+  "--awsui-style-background-default-alpv7o": "#ffffff",
+  "--awsui-style-background-disabled-alpv7o": "#f0f0f0",
+  "--awsui-style-background-focus-alpv7o": "#ffffff",
+  "--awsui-style-background-hover-alpv7o": "#fafafa",
+  "--awsui-style-background-readonly-alpv7o": "#ffffff",
+  "--awsui-style-border-color-default-alpv7o": "#cccccc",
+  "--awsui-style-border-color-disabled-alpv7o": "#e0e0e0",
+  "--awsui-style-border-color-focus-alpv7o": "#0073bb",
+  "--awsui-style-border-color-hover-alpv7o": "#999999",
+  "--awsui-style-border-color-readonly-alpv7o": "#e0e0e0",
+  "--awsui-style-box-shadow-default-alpv7o": "none",
+  "--awsui-style-box-shadow-disabled-alpv7o": "none",
+  "--awsui-style-box-shadow-focus-alpv7o": "0 0 0 2px #0073bb",
+  "--awsui-style-box-shadow-hover-alpv7o": "0 1px 2px rgba(0,0,0,0.1)",
+  "--awsui-style-box-shadow-readonly-alpv7o": "none",
+  "--awsui-style-color-default-alpv7o": "#000000",
+  "--awsui-style-color-disabled-alpv7o": "#999999",
+  "--awsui-style-color-focus-alpv7o": "#000000",
+  "--awsui-style-color-hover-alpv7o": "#000000",
+  "--awsui-style-color-readonly-alpv7o": "#000000",
+  "--awsui-style-placeholder-color-alpv7o": "#999999",
+  "--awsui-style-placeholder-font-size-alpv7o": "14px",
+  "--awsui-style-placeholder-font-style-alpv7o": "italic",
+  "--awsui-style-placeholder-font-weight-alpv7o": "400",
   "borderRadius": "4px",
   "borderWidth": "1px",
   "fontSize": "14px",
diff --git a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
index ecc1b65139..1c53ea3fae 100644
--- a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap
@@ -42,11 +42,11 @@ exports[`getRootStyles handles all possible style configurations 2`] = `{}`;
 
 exports[`getRootStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-item-card-background-default-6b9ypa": "#ffffff",
-  "--awsui-style-item-card-border-color-default-6b9ypa": "#e0e0e0",
-  "--awsui-style-item-card-border-radius-6b9ypa": "8px",
-  "--awsui-style-item-card-border-width-default-6b9ypa": "1px",
-  "--awsui-style-item-card-box-shadow-default-6b9ypa": "0 1px 3px rgba(0,0,0,0.1)",
+  "--awsui-style-item-card-background-default-alpv7o": "#ffffff",
+  "--awsui-style-item-card-border-color-default-alpv7o": "#e0e0e0",
+  "--awsui-style-item-card-border-radius-alpv7o": "8px",
+  "--awsui-style-item-card-border-width-default-alpv7o": "1px",
+  "--awsui-style-item-card-box-shadow-default-alpv7o": "0 1px 3px rgba(0,0,0,0.1)",
   "borderRadius": "8px",
 }
 `;
diff --git a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
index 9cfed12417..9c9c7ca8fc 100644
--- a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap
@@ -20,17 +20,17 @@ exports[`getSegmentedControlRootStyles handles all possible style configurations
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-active-6b9ypa": undefined,
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-color-active-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-color-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-radius-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-width-6b9ypa": undefined,
+  "--awsui-style-background-active-alpv7o": undefined,
+  "--awsui-style-background-default-alpv7o": undefined,
+  "--awsui-style-background-disabled-alpv7o": undefined,
+  "--awsui-style-background-hover-alpv7o": undefined,
+  "--awsui-style-color-active-alpv7o": undefined,
+  "--awsui-style-color-default-alpv7o": undefined,
+  "--awsui-style-color-disabled-alpv7o": undefined,
+  "--awsui-style-color-hover-alpv7o": undefined,
+  "--awsui-style-focus-ring-border-color-alpv7o": undefined,
+  "--awsui-style-focus-ring-border-radius-alpv7o": undefined,
+  "--awsui-style-focus-ring-border-width-alpv7o": undefined,
   "borderRadius": undefined,
   "fontSize": undefined,
   "paddingBlock": undefined,
@@ -40,17 +40,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-active-6b9ypa": undefined,
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-color-active-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-color-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-radius-6b9ypa": undefined,
-  "--awsui-style-focus-ring-border-width-6b9ypa": undefined,
+  "--awsui-style-background-active-alpv7o": undefined,
+  "--awsui-style-background-default-alpv7o": undefined,
+  "--awsui-style-background-disabled-alpv7o": undefined,
+  "--awsui-style-background-hover-alpv7o": undefined,
+  "--awsui-style-color-active-alpv7o": undefined,
+  "--awsui-style-color-default-alpv7o": undefined,
+  "--awsui-style-color-disabled-alpv7o": undefined,
+  "--awsui-style-color-hover-alpv7o": undefined,
+  "--awsui-style-focus-ring-border-color-alpv7o": undefined,
+  "--awsui-style-focus-ring-border-radius-alpv7o": undefined,
+  "--awsui-style-focus-ring-border-width-alpv7o": undefined,
   "borderRadius": undefined,
   "fontSize": undefined,
   "paddingBlock": undefined,
@@ -60,17 +60,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati
 
 exports[`getSegmentedControlSegmentStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-active-6b9ypa": "#0073bb",
-  "--awsui-style-background-default-6b9ypa": "#ffffff",
-  "--awsui-style-background-disabled-6b9ypa": "#f0f0f0",
-  "--awsui-style-background-hover-6b9ypa": "#fafafa",
-  "--awsui-style-color-active-6b9ypa": "#ffffff",
-  "--awsui-style-color-default-6b9ypa": "#000000",
-  "--awsui-style-color-disabled-6b9ypa": "#999999",
-  "--awsui-style-color-hover-6b9ypa": "#000000",
-  "--awsui-style-focus-ring-border-color-6b9ypa": "#0073bb",
-  "--awsui-style-focus-ring-border-radius-6b9ypa": "8px",
-  "--awsui-style-focus-ring-border-width-6b9ypa": "2px",
+  "--awsui-style-background-active-alpv7o": "#0073bb",
+  "--awsui-style-background-default-alpv7o": "#ffffff",
+  "--awsui-style-background-disabled-alpv7o": "#f0f0f0",
+  "--awsui-style-background-hover-alpv7o": "#fafafa",
+  "--awsui-style-color-active-alpv7o": "#ffffff",
+  "--awsui-style-color-default-alpv7o": "#000000",
+  "--awsui-style-color-disabled-alpv7o": "#999999",
+  "--awsui-style-color-hover-alpv7o": "#000000",
+  "--awsui-style-focus-ring-border-color-alpv7o": "#0073bb",
+  "--awsui-style-focus-ring-border-radius-alpv7o": "8px",
+  "--awsui-style-focus-ring-border-width-alpv7o": "2px",
   "borderRadius": "6px",
   "fontSize": "14px",
   "paddingBlock": "8px",
diff --git a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
index 2ee8224105..41ac800738 100644
--- a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,36 +2,36 @@
 
 exports[`getSliderStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-slider-handle-background-active-6b9ypa": undefined,
-  "--awsui-style-slider-handle-background-default-6b9ypa": undefined,
-  "--awsui-style-slider-handle-background-hover-6b9ypa": undefined,
-  "--awsui-style-slider-handle-border-radius-6b9ypa": undefined,
-  "--awsui-style-slider-range-background-active-6b9ypa": undefined,
-  "--awsui-style-slider-range-background-default-6b9ypa": undefined,
-  "--awsui-style-slider-track-background-color-6b9ypa": undefined,
+  "--awsui-style-slider-handle-background-active-alpv7o": undefined,
+  "--awsui-style-slider-handle-background-default-alpv7o": undefined,
+  "--awsui-style-slider-handle-background-hover-alpv7o": undefined,
+  "--awsui-style-slider-handle-border-radius-alpv7o": undefined,
+  "--awsui-style-slider-range-background-active-alpv7o": undefined,
+  "--awsui-style-slider-range-background-default-alpv7o": undefined,
+  "--awsui-style-slider-track-background-color-alpv7o": undefined,
 }
 `;
 
 exports[`getSliderStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-slider-handle-background-active-6b9ypa": undefined,
-  "--awsui-style-slider-handle-background-default-6b9ypa": undefined,
-  "--awsui-style-slider-handle-background-hover-6b9ypa": undefined,
-  "--awsui-style-slider-handle-border-radius-6b9ypa": undefined,
-  "--awsui-style-slider-range-background-active-6b9ypa": undefined,
-  "--awsui-style-slider-range-background-default-6b9ypa": undefined,
-  "--awsui-style-slider-track-background-color-6b9ypa": undefined,
+  "--awsui-style-slider-handle-background-active-alpv7o": undefined,
+  "--awsui-style-slider-handle-background-default-alpv7o": undefined,
+  "--awsui-style-slider-handle-background-hover-alpv7o": undefined,
+  "--awsui-style-slider-handle-border-radius-alpv7o": undefined,
+  "--awsui-style-slider-range-background-active-alpv7o": undefined,
+  "--awsui-style-slider-range-background-default-alpv7o": undefined,
+  "--awsui-style-slider-track-background-color-alpv7o": undefined,
 }
 `;
 
 exports[`getSliderStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-slider-handle-background-active-6b9ypa": "#1d4ed8",
-  "--awsui-style-slider-handle-background-default-6b9ypa": "#3b82f6",
-  "--awsui-style-slider-handle-background-hover-6b9ypa": "#2563eb",
-  "--awsui-style-slider-handle-border-radius-6b9ypa": "50%",
-  "--awsui-style-slider-range-background-active-6b9ypa": "#2563eb",
-  "--awsui-style-slider-range-background-default-6b9ypa": "#3b82f6",
-  "--awsui-style-slider-track-background-color-6b9ypa": "#dbeafe",
+  "--awsui-style-slider-handle-background-active-alpv7o": "#1d4ed8",
+  "--awsui-style-slider-handle-background-default-alpv7o": "#3b82f6",
+  "--awsui-style-slider-handle-background-hover-alpv7o": "#2563eb",
+  "--awsui-style-slider-handle-border-radius-alpv7o": "50%",
+  "--awsui-style-slider-range-background-active-alpv7o": "#2563eb",
+  "--awsui-style-slider-range-background-default-alpv7o": "#3b82f6",
+  "--awsui-style-slider-track-background-color-alpv7o": "#dbeafe",
 }
 `;
diff --git a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
index 369fed8a6e..d9bb4af343 100644
--- a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,21 +2,21 @@
 
 exports[`getTabStyles transforms tab styles to CSS properties 1`] = `
 {
-  "--awsui-style-background-active-6b9ypa": "#bfdbfe",
-  "--awsui-style-background-default-6b9ypa": "#dbeafe",
-  "--awsui-style-background-disabled-6b9ypa": "#f3f4f6",
-  "--awsui-style-background-hover-6b9ypa": "#eff6ff",
-  "--awsui-style-border-color-active-6b9ypa": "#1d4ed8",
-  "--awsui-style-border-color-default-6b9ypa": "#3b82f6",
-  "--awsui-style-border-color-disabled-6b9ypa": "#93c5fd",
-  "--awsui-style-border-color-hover-6b9ypa": "#2563eb",
-  "--awsui-style-color-active-6b9ypa": "#1e3a8a",
-  "--awsui-style-color-default-6b9ypa": "#1e40af",
-  "--awsui-style-color-disabled-6b9ypa": "#93c5fd",
-  "--awsui-style-color-hover-6b9ypa": "#1e40af",
-  "--awsui-style-focus-ring-border-color-6b9ypa": "#3b82f6",
-  "--awsui-style-focus-ring-border-radius-6b9ypa": "4px",
-  "--awsui-style-focus-ring-border-width-6b9ypa": "2px",
+  "--awsui-style-background-active-alpv7o": "#bfdbfe",
+  "--awsui-style-background-default-alpv7o": "#dbeafe",
+  "--awsui-style-background-disabled-alpv7o": "#f3f4f6",
+  "--awsui-style-background-hover-alpv7o": "#eff6ff",
+  "--awsui-style-border-color-active-alpv7o": "#1d4ed8",
+  "--awsui-style-border-color-default-alpv7o": "#3b82f6",
+  "--awsui-style-border-color-disabled-alpv7o": "#93c5fd",
+  "--awsui-style-border-color-hover-alpv7o": "#2563eb",
+  "--awsui-style-color-active-alpv7o": "#1e3a8a",
+  "--awsui-style-color-default-alpv7o": "#1e40af",
+  "--awsui-style-color-disabled-alpv7o": "#93c5fd",
+  "--awsui-style-color-hover-alpv7o": "#1e40af",
+  "--awsui-style-focus-ring-border-color-alpv7o": "#3b82f6",
+  "--awsui-style-focus-ring-border-radius-alpv7o": "4px",
+  "--awsui-style-focus-ring-border-width-alpv7o": "2px",
   "borderRadius": "4px",
   "borderWidth": "2px",
   "fontSize": "16px",
@@ -28,10 +28,10 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = `
 
 exports[`getTabStyles transforms tab styles to CSS properties 2`] = `
 {
-  "--awsui-style-tabs-active-indicator-border-radius-6b9ypa": "2px",
-  "--awsui-style-tabs-active-indicator-color-6b9ypa": "#1d4ed8",
-  "--awsui-style-tabs-active-indicator-width-6b9ypa": "3px",
-  "--awsui-style-tabs-separator-color-6b9ypa": "#cbd5e1",
-  "--awsui-style-tabs-separator-width-6b9ypa": "2px",
+  "--awsui-style-tabs-active-indicator-border-radius-alpv7o": "2px",
+  "--awsui-style-tabs-active-indicator-color-alpv7o": "#1d4ed8",
+  "--awsui-style-tabs-active-indicator-width-alpv7o": "3px",
+  "--awsui-style-tabs-separator-color-alpv7o": "#cbd5e1",
+  "--awsui-style-tabs-separator-width-alpv7o": "2px",
 }
 `;
diff --git a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
index daf5208fe6..4d682fb96b 100644
--- a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,30 +2,30 @@
 
 exports[`getTextFilterStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-focus-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-background-readonly-6b9ypa": undefined,
-  "--awsui-style-border-color-default-6b9ypa": undefined,
-  "--awsui-style-border-color-disabled-6b9ypa": undefined,
-  "--awsui-style-border-color-focus-6b9ypa": undefined,
-  "--awsui-style-border-color-hover-6b9ypa": undefined,
-  "--awsui-style-border-color-readonly-6b9ypa": undefined,
-  "--awsui-style-box-shadow-default-6b9ypa": undefined,
-  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
-  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
-  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
-  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-focus-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-color-readonly-6b9ypa": undefined,
-  "--awsui-style-placeholder-color-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
+  "--awsui-style-background-default-alpv7o": undefined,
+  "--awsui-style-background-disabled-alpv7o": undefined,
+  "--awsui-style-background-focus-alpv7o": undefined,
+  "--awsui-style-background-hover-alpv7o": undefined,
+  "--awsui-style-background-readonly-alpv7o": undefined,
+  "--awsui-style-border-color-default-alpv7o": undefined,
+  "--awsui-style-border-color-disabled-alpv7o": undefined,
+  "--awsui-style-border-color-focus-alpv7o": undefined,
+  "--awsui-style-border-color-hover-alpv7o": undefined,
+  "--awsui-style-border-color-readonly-alpv7o": undefined,
+  "--awsui-style-box-shadow-default-alpv7o": undefined,
+  "--awsui-style-box-shadow-disabled-alpv7o": undefined,
+  "--awsui-style-box-shadow-focus-alpv7o": undefined,
+  "--awsui-style-box-shadow-hover-alpv7o": undefined,
+  "--awsui-style-box-shadow-readonly-alpv7o": undefined,
+  "--awsui-style-color-default-alpv7o": undefined,
+  "--awsui-style-color-disabled-alpv7o": undefined,
+  "--awsui-style-color-focus-alpv7o": undefined,
+  "--awsui-style-color-hover-alpv7o": undefined,
+  "--awsui-style-color-readonly-alpv7o": undefined,
+  "--awsui-style-placeholder-color-alpv7o": undefined,
+  "--awsui-style-placeholder-font-size-alpv7o": undefined,
+  "--awsui-style-placeholder-font-style-alpv7o": undefined,
+  "--awsui-style-placeholder-font-weight-alpv7o": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -37,30 +37,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = `
 
 exports[`getTextFilterStyles handles all possible style configurations 2`] = `
 {
-  "--awsui-style-background-default-6b9ypa": undefined,
-  "--awsui-style-background-disabled-6b9ypa": undefined,
-  "--awsui-style-background-focus-6b9ypa": undefined,
-  "--awsui-style-background-hover-6b9ypa": undefined,
-  "--awsui-style-background-readonly-6b9ypa": undefined,
-  "--awsui-style-border-color-default-6b9ypa": undefined,
-  "--awsui-style-border-color-disabled-6b9ypa": undefined,
-  "--awsui-style-border-color-focus-6b9ypa": undefined,
-  "--awsui-style-border-color-hover-6b9ypa": undefined,
-  "--awsui-style-border-color-readonly-6b9ypa": undefined,
-  "--awsui-style-box-shadow-default-6b9ypa": undefined,
-  "--awsui-style-box-shadow-disabled-6b9ypa": undefined,
-  "--awsui-style-box-shadow-focus-6b9ypa": undefined,
-  "--awsui-style-box-shadow-hover-6b9ypa": undefined,
-  "--awsui-style-box-shadow-readonly-6b9ypa": undefined,
-  "--awsui-style-color-default-6b9ypa": undefined,
-  "--awsui-style-color-disabled-6b9ypa": undefined,
-  "--awsui-style-color-focus-6b9ypa": undefined,
-  "--awsui-style-color-hover-6b9ypa": undefined,
-  "--awsui-style-color-readonly-6b9ypa": undefined,
-  "--awsui-style-placeholder-color-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-size-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-style-6b9ypa": undefined,
-  "--awsui-style-placeholder-font-weight-6b9ypa": undefined,
+  "--awsui-style-background-default-alpv7o": undefined,
+  "--awsui-style-background-disabled-alpv7o": undefined,
+  "--awsui-style-background-focus-alpv7o": undefined,
+  "--awsui-style-background-hover-alpv7o": undefined,
+  "--awsui-style-background-readonly-alpv7o": undefined,
+  "--awsui-style-border-color-default-alpv7o": undefined,
+  "--awsui-style-border-color-disabled-alpv7o": undefined,
+  "--awsui-style-border-color-focus-alpv7o": undefined,
+  "--awsui-style-border-color-hover-alpv7o": undefined,
+  "--awsui-style-border-color-readonly-alpv7o": undefined,
+  "--awsui-style-box-shadow-default-alpv7o": undefined,
+  "--awsui-style-box-shadow-disabled-alpv7o": undefined,
+  "--awsui-style-box-shadow-focus-alpv7o": undefined,
+  "--awsui-style-box-shadow-hover-alpv7o": undefined,
+  "--awsui-style-box-shadow-readonly-alpv7o": undefined,
+  "--awsui-style-color-default-alpv7o": undefined,
+  "--awsui-style-color-disabled-alpv7o": undefined,
+  "--awsui-style-color-focus-alpv7o": undefined,
+  "--awsui-style-color-hover-alpv7o": undefined,
+  "--awsui-style-color-readonly-alpv7o": undefined,
+  "--awsui-style-placeholder-color-alpv7o": undefined,
+  "--awsui-style-placeholder-font-size-alpv7o": undefined,
+  "--awsui-style-placeholder-font-style-alpv7o": undefined,
+  "--awsui-style-placeholder-font-weight-alpv7o": undefined,
   "borderRadius": undefined,
   "borderWidth": undefined,
   "fontSize": undefined,
@@ -72,30 +72,30 @@ exports[`getTextFilterStyles handles all possible style configurations 2`] = `
 
 exports[`getTextFilterStyles handles all possible style configurations 3`] = `
 {
-  "--awsui-style-background-default-6b9ypa": "#ffffff",
-  "--awsui-style-background-disabled-6b9ypa": "#f0f0f0",
-  "--awsui-style-background-focus-6b9ypa": "#ffffff",
-  "--awsui-style-background-hover-6b9ypa": "#fafafa",
-  "--awsui-style-background-readonly-6b9ypa": "#ffffff",
-  "--awsui-style-border-color-default-6b9ypa": "#cccccc",
-  "--awsui-style-border-color-disabled-6b9ypa": "#e0e0e0",
-  "--awsui-style-border-color-focus-6b9ypa": "#0073bb",
-  "--awsui-style-border-color-hover-6b9ypa": "#999999",
-  "--awsui-style-border-color-readonly-6b9ypa": "#e0e0e0",
-  "--awsui-style-box-shadow-default-6b9ypa": "none",
-  "--awsui-style-box-shadow-disabled-6b9ypa": "none",
-  "--awsui-style-box-shadow-focus-6b9ypa": "0 0 0 2px #0073bb",
-  "--awsui-style-box-shadow-hover-6b9ypa": "0 1px 2px rgba(0,0,0,0.1)",
-  "--awsui-style-box-shadow-readonly-6b9ypa": "none",
-  "--awsui-style-color-default-6b9ypa": "#000000",
-  "--awsui-style-color-disabled-6b9ypa": "#999999",
-  "--awsui-style-color-focus-6b9ypa": "#000000",
-  "--awsui-style-color-hover-6b9ypa": "#000000",
-  "--awsui-style-color-readonly-6b9ypa": "#000000",
-  "--awsui-style-placeholder-color-6b9ypa": "#999999",
-  "--awsui-style-placeholder-font-size-6b9ypa": "14px",
-  "--awsui-style-placeholder-font-style-6b9ypa": "italic",
-  "--awsui-style-placeholder-font-weight-6b9ypa": "400",
+  "--awsui-style-background-default-alpv7o": "#ffffff",
+  "--awsui-style-background-disabled-alpv7o": "#f0f0f0",
+  "--awsui-style-background-focus-alpv7o": "#ffffff",
+  "--awsui-style-background-hover-alpv7o": "#fafafa",
+  "--awsui-style-background-readonly-alpv7o": "#ffffff",
+  "--awsui-style-border-color-default-alpv7o": "#cccccc",
+  "--awsui-style-border-color-disabled-alpv7o": "#e0e0e0",
+  "--awsui-style-border-color-focus-alpv7o": "#0073bb",
+  "--awsui-style-border-color-hover-alpv7o": "#999999",
+  "--awsui-style-border-color-readonly-alpv7o": "#e0e0e0",
+  "--awsui-style-box-shadow-default-alpv7o": "none",
+  "--awsui-style-box-shadow-disabled-alpv7o": "none",
+  "--awsui-style-box-shadow-focus-alpv7o": "0 0 0 2px #0073bb",
+  "--awsui-style-box-shadow-hover-alpv7o": "0 1px 2px rgba(0,0,0,0.1)",
+  "--awsui-style-box-shadow-readonly-alpv7o": "none",
+  "--awsui-style-color-default-alpv7o": "#000000",
+  "--awsui-style-color-disabled-alpv7o": "#999999",
+  "--awsui-style-color-focus-alpv7o": "#000000",
+  "--awsui-style-color-hover-alpv7o": "#000000",
+  "--awsui-style-color-readonly-alpv7o": "#000000",
+  "--awsui-style-placeholder-color-alpv7o": "#999999",
+  "--awsui-style-placeholder-font-size-alpv7o": "14px",
+  "--awsui-style-placeholder-font-style-alpv7o": "italic",
+  "--awsui-style-placeholder-font-weight-alpv7o": "400",
   "borderRadius": "4px",
   "borderWidth": "1px",
   "fontSize": "14px",
diff --git a/src/token/__tests__/__snapshots__/styles.test.tsx.snap b/src/token/__tests__/__snapshots__/styles.test.tsx.snap
index 6e76a3e401..c65c0f5df9 100644
--- a/src/token/__tests__/__snapshots__/styles.test.tsx.snap
+++ b/src/token/__tests__/__snapshots__/styles.test.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`getTokenRootStyles handles all possible style configurations 1`] = `
 {
-  "--awsui-style-focus-ring-border-color-6b9ypa": "#6366f1",
-  "--awsui-style-focus-ring-border-radius-6b9ypa": "12px",
-  "--awsui-style-focus-ring-border-width-6b9ypa": "2px",
-  "--awsui-token-style-background-default-6b9ypa": "#eef2ff",
-  "--awsui-token-style-background-disabled-6b9ypa": "#f1f5f9",
-  "--awsui-token-style-background-read-only-6b9ypa": "#f8fafc",
-  "--awsui-token-style-border-color-default-6b9ypa": "#c7d2fe",
-  "--awsui-token-style-border-color-disabled-6b9ypa": "#e2e8f0",
-  "--awsui-token-style-border-color-read-only-6b9ypa": "#cbd5e1",
-  "--awsui-token-style-dismiss-color-default-6b9ypa": "#6366f1",
-  "--awsui-token-style-dismiss-color-disabled-6b9ypa": "#cbd5e1",
-  "--awsui-token-style-dismiss-color-hover-6b9ypa": "#4338ca",
-  "--awsui-token-style-dismiss-color-read-only-6b9ypa": "#94a3b8",
+  "--awsui-style-focus-ring-border-color-alpv7o": "#6366f1",
+  "--awsui-style-focus-ring-border-radius-alpv7o": "12px",
+  "--awsui-style-focus-ring-border-width-alpv7o": "2px",
+  "--awsui-token-style-background-default-alpv7o": "#eef2ff",
+  "--awsui-token-style-background-disabled-alpv7o": "#f1f5f9",
+  "--awsui-token-style-background-read-only-alpv7o": "#f8fafc",
+  "--awsui-token-style-border-color-default-alpv7o": "#c7d2fe",
+  "--awsui-token-style-border-color-disabled-alpv7o": "#e2e8f0",
+  "--awsui-token-style-border-color-read-only-alpv7o": "#cbd5e1",
+  "--awsui-token-style-dismiss-color-default-alpv7o": "#6366f1",
+  "--awsui-token-style-dismiss-color-disabled-alpv7o": "#cbd5e1",
+  "--awsui-token-style-dismiss-color-hover-alpv7o": "#4338ca",
+  "--awsui-token-style-dismiss-color-read-only-alpv7o": "#94a3b8",
   "borderRadius": "24px",
   "borderWidth": "2px",
   "paddingBlock": "4px",

From f4c2999cadc40ff4c149815694d543866116f289 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 3 Jul 2026 11:35:17 +0200
Subject: [PATCH 11/19] chore: Update specificity and change file name

---
 ...le-box.page.tsx => visual-accent.page.tsx} |  0
 src/box/styles.scss                           |  2 +-
 .../{style-box.scss => visual-accent.scss}    | 31 +++++++++++--------
 3 files changed, 19 insertions(+), 14 deletions(-)
 rename pages/box/{style-box.page.tsx => visual-accent.page.tsx} (100%)
 rename src/box/{style-box.scss => visual-accent.scss} (82%)

diff --git a/pages/box/style-box.page.tsx b/pages/box/visual-accent.page.tsx
similarity index 100%
rename from pages/box/style-box.page.tsx
rename to pages/box/visual-accent.page.tsx
diff --git a/src/box/styles.scss b/src/box/styles.scss
index 9beaa46c4a..789004f659 100644
--- a/src/box/styles.scss
+++ b/src/box/styles.scss
@@ -6,7 +6,7 @@
 @use '../internal/styles' as styles;
 @use './text';
 @use './layout';
-@use './style-box';
+@use './visual-accent';
 
 .root {
   @include styles.default-text-style;
diff --git a/src/box/style-box.scss b/src/box/visual-accent.scss
similarity index 82%
rename from src/box/style-box.scss
rename to src/box/visual-accent.scss
index a501e00134..de2f9688a4 100644
--- a/src/box/style-box.scss
+++ b/src/box/visual-accent.scss
@@ -78,51 +78,56 @@ $accent-radii: (
 
 // ─── Accent colors ──────────────────────────────────────────────────────────────
 // Light/dark values are resolved by the design tokens, so no explicit dark-mode
-// overrides are needed here. The `.box` prefix raises specificity to (0,2,0) so the
-// accent content color wins over `.root`'s default-text-style color (0,1,0), which is
-// emitted later in `styles.scss`. Descendants (nested Box, Icon) inherit this color.
-
-.box.visual-accent-red {
+// overrides are needed here.
+//
+// The selectors chain the `.visual-accent` base class with the `.visual-accent-{color}`
+// modifier (both are always applied together whenever `visualAccent` is set) to reach a
+// specificity of (0,3,0). This intentionally beats the `color` prop's `.box.color-*`
+// selector (0,2,0) so the accent's coordinated foreground color always wins, regardless of
+// stylesheet source order. Winning here preserves the guaranteed background/foreground color
+// contrast of the accent pair. Descendants (nested Box, Icon) inherit this color.
+
+.box.visual-accent.visual-accent-red {
   background-color: awsui.$color-background-accent-red;
   color: awsui.$color-text-accent-red;
 }
 
-.box.visual-accent-yellow {
+.box.visual-accent.visual-accent-yellow {
   background-color: awsui.$color-background-accent-yellow;
   color: awsui.$color-text-accent-yellow;
 }
 
-.box.visual-accent-indigo {
+.box.visual-accent.visual-accent-indigo {
   background-color: awsui.$color-background-accent-indigo;
   color: awsui.$color-text-accent-indigo;
 }
 
-.box.visual-accent-green {
+.box.visual-accent.visual-accent-green {
   background-color: awsui.$color-background-accent-green;
   color: awsui.$color-text-accent-green;
 }
 
-.box.visual-accent-orange {
+.box.visual-accent.visual-accent-orange {
   background-color: awsui.$color-background-accent-orange;
   color: awsui.$color-text-accent-orange;
 }
 
-.box.visual-accent-purple {
+.box.visual-accent.visual-accent-purple {
   background-color: awsui.$color-background-accent-purple;
   color: awsui.$color-text-accent-purple;
 }
 
-.box.visual-accent-mint {
+.box.visual-accent.visual-accent-mint {
   background-color: awsui.$color-background-accent-mint;
   color: awsui.$color-text-accent-mint;
 }
 
-.box.visual-accent-lime {
+.box.visual-accent.visual-accent-lime {
   background-color: awsui.$color-background-accent-lime;
   color: awsui.$color-text-accent-lime;
 }
 
-.box.visual-accent-grey {
+.box.visual-accent.visual-accent-grey {
   background-color: awsui.$color-background-accent-grey;
   color: awsui.$color-text-accent-grey;
 }

From 3af1c21cff71216251783a78f7a3a77bc72fa984 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 3 Jul 2026 11:55:19 +0200
Subject: [PATCH 12/19] chore: Update accent color to have accessible colors

---
 style-dictionary/visual-refresh/color-palette.ts |  8 +++-----
 style-dictionary/visual-refresh/colors.ts        | 14 +++++++-------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index aca8fbd6b0..bff0922fa7 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -68,8 +68,6 @@ const tokens: StyleDictionary.ColorPaletteDictionary = {
     'colorPurple700',
     'colorAmber400',
     'colorAmber500',
-    // Accent palette steps (Box `awsui-accent` variant): each family uses 50/600 (light bg/text)
-    // and 950/400 (dark bg/text).
     'colorNeutralGrey50',
     'colorNeutralGrey400',
     'colorNeutralGrey600',
@@ -77,19 +75,19 @@ const tokens: StyleDictionary.ColorPaletteDictionary = {
     'colorRed950',
     'colorOrange50',
     'colorOrange400',
-    'colorOrange600',
+    'colorOrange700',
     'colorOrange950',
     'colorYellow600',
     'colorYellow950',
     'colorLime50',
     'colorLime400',
-    'colorLime600',
+    'colorLime700',
     'colorLime950',
     'colorGreen400',
     'colorGreen950',
     'colorMint50',
     'colorMint400',
-    'colorMint600',
+    'colorMint700',
     'colorMint950',
     'colorIndigo50',
     'colorIndigo400',
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 050e10b5a8..c5535b5ab4 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -371,7 +371,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextBadgeRed: '{colorTextNotificationDefault}',
   colorBackgroundCodeView: { light: '#f8f8f8', dark: '#282c34' },
 
-  // ── Accent (Box `awsui-accent` variant) ───────────────────────────────────
+  // ── Visual accent ───────────────────────────────────
   colorBackgroundAccentRed: { light: '{colorError50}', dark: '{colorError950}' },
   colorBackgroundAccentYellow: { light: '{colorWarning50}', dark: '{colorWarning950}' },
   colorBackgroundAccentIndigo: { light: '{colorInfo50}', dark: '{colorInfo950}' },
@@ -383,13 +383,13 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundAccentGrey: { light: '{colorNeutral100}', dark: '{colorNeutral750}' },
   colorTextAccentRed: { light: '{colorError600}', dark: '{colorError400}' },
   colorTextAccentYellow: { light: '{colorWarning800}', dark: '{colorWarning400}' },
-  colorTextAccentIndigo: { light: '{colorInfo600}', dark: '{colorInfo400}' },
+  colorTextAccentIndigo: { light: '{colorInfo600}', dark: '{colorInfo300}' },
   colorTextAccentGreen: { light: '{colorSuccess600}', dark: '{colorSuccess400}' },
-  colorTextAccentOrange: { light: '{colorOrange600}', dark: '{colorOrange400}' },
-  colorTextAccentPurple: { light: '{colorPurple600}', dark: '{colorPurple400}' },
-  colorTextAccentMint: { light: '{colorMint600}', dark: '{colorMint400}' },
-  colorTextAccentLime: { light: '{colorLime600}', dark: '{colorLime400}' },
-  colorTextAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral100}' },
+  colorTextAccentOrange: { light: '{colorOrange700}', dark: '{colorOrange400}' },
+  colorTextAccentPurple: { light: '{colorPurple700}', dark: '{colorPurple400}' },
+  colorTextAccentMint: { light: '{colorMint700}', dark: '{colorMint400}' },
+  colorTextAccentLime: { light: '{colorLime700}', dark: '{colorLime400}' },
+  colorTextAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral200}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);

From 8a2b822c9fc25b30af61b21cc19f89751cb0bb0f Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Fri, 3 Jul 2026 14:34:48 +0200
Subject: [PATCH 13/19] chore: Update snapshots and description on interface

---
 .../__snapshots__/themes.test.ts.snap         | 108 +++++------
 .../__snapshots__/design-tokens.test.ts.snap  | 176 +++++++++---------
 src/box/interfaces.ts                         |  22 +--
 3 files changed, 149 insertions(+), 157 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 0903fa4fdf..d743638971 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -502,11 +502,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-item-selected": "#0073bb",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
-  "color-lime-600": "#008a00",
+  "color-lime-700": "#007000",
   "color-lime-950": "#002e00",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
-  "color-mint-600": "#008559",
+  "color-mint-700": "#006b48",
   "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
@@ -530,7 +530,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-neutral-950": "#16191f",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
-  "color-orange-600": "#db3300",
+  "color-orange-700": "#a82700",
   "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
@@ -546,7 +546,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
-  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
   "color-severity-dark-red": "#870303",
@@ -568,10 +567,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-text-accent-green": "#1d8102",
   "color-text-accent-grey": "#21252c",
   "color-text-accent-indigo": "#0073bb",
-  "color-text-accent-lime": "#008a00",
-  "color-text-accent-mint": "#008559",
-  "color-text-accent-orange": "#db3300",
-  "color-text-accent-purple": "#962eff",
+  "color-text-accent-lime": "#007000",
+  "color-text-accent-mint": "#006b48",
+  "color-text-accent-orange": "#a82700",
+  "color-text-accent-purple": "#7300e5",
   "color-text-accent-red": "#d13212",
   "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#879596",
@@ -1470,11 +1469,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-item-selected": "#44b9d6",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
-  "color-lime-600": "#008a00",
+  "color-lime-700": "#007000",
   "color-lime-950": "#002e00",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
-  "color-mint-600": "#008559",
+  "color-mint-700": "#006b48",
   "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
@@ -1498,7 +1497,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-neutral-950": "#16191f",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
-  "color-orange-600": "#db3300",
+  "color-orange-700": "#a82700",
   "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
@@ -1514,7 +1513,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
-  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
   "color-severity-dark-red": "#d63f38",
@@ -1534,8 +1532,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-success-950": "#003311",
   "color-text-accent": "#44b9d6",
   "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#fafafa",
-  "color-text-accent-indigo": "#00a1c9",
+  "color-text-accent-grey": "#f2f3f3",
+  "color-text-accent-indigo": "#44b9d6",
   "color-text-accent-lime": "#7ae500",
   "color-text-accent-mint": "#00e582",
   "color-text-accent-orange": "#ff6a3d",
@@ -2438,11 +2436,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-item-selected": "#0073bb",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
-  "color-lime-600": "#008a00",
+  "color-lime-700": "#007000",
   "color-lime-950": "#002e00",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
-  "color-mint-600": "#008559",
+  "color-mint-700": "#006b48",
   "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
@@ -2466,7 +2464,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-neutral-950": "#16191f",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
-  "color-orange-600": "#db3300",
+  "color-orange-700": "#a82700",
   "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
@@ -2482,7 +2480,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
-  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
   "color-severity-dark-red": "#870303",
@@ -2504,10 +2501,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-text-accent-green": "#1d8102",
   "color-text-accent-grey": "#21252c",
   "color-text-accent-indigo": "#0073bb",
-  "color-text-accent-lime": "#008a00",
-  "color-text-accent-mint": "#008559",
-  "color-text-accent-orange": "#db3300",
-  "color-text-accent-purple": "#962eff",
+  "color-text-accent-lime": "#007000",
+  "color-text-accent-mint": "#006b48",
+  "color-text-accent-orange": "#a82700",
+  "color-text-accent-purple": "#7300e5",
   "color-text-accent-red": "#d13212",
   "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#879596",
@@ -3406,11 +3403,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-item-selected": "#0073bb",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
-  "color-lime-600": "#008a00",
+  "color-lime-700": "#007000",
   "color-lime-950": "#002e00",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
-  "color-mint-600": "#008559",
+  "color-mint-700": "#006b48",
   "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
@@ -3434,7 +3431,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-neutral-950": "#16191f",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
-  "color-orange-600": "#db3300",
+  "color-orange-700": "#a82700",
   "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
@@ -3450,7 +3447,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
-  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
   "color-severity-dark-red": "#870303",
@@ -3472,10 +3468,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-text-accent-green": "#1d8102",
   "color-text-accent-grey": "#21252c",
   "color-text-accent-indigo": "#0073bb",
-  "color-text-accent-lime": "#008a00",
-  "color-text-accent-mint": "#008559",
-  "color-text-accent-orange": "#db3300",
-  "color-text-accent-purple": "#962eff",
+  "color-text-accent-lime": "#007000",
+  "color-text-accent-mint": "#006b48",
+  "color-text-accent-orange": "#a82700",
+  "color-text-accent-purple": "#7300e5",
   "color-text-accent-red": "#d13212",
   "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#879596",
@@ -4374,11 +4370,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-item-selected": "#006ce0",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
-  "color-lime-600": "#008a00",
+  "color-lime-700": "#007000",
   "color-lime-950": "#002e00",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
-  "color-mint-600": "#008559",
+  "color-mint-700": "#006b48",
   "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
@@ -4402,7 +4398,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-neutral-950": "#0f141a",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
-  "color-orange-600": "#db3300",
+  "color-orange-700": "#a82700",
   "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
@@ -4418,7 +4414,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
-  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
   "color-severity-dark-red": "#870303",
@@ -4440,10 +4435,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-text-accent-green": "#00802f",
   "color-text-accent-grey": "#1b232d",
   "color-text-accent-indigo": "#006ce0",
-  "color-text-accent-lime": "#008a00",
-  "color-text-accent-mint": "#008559",
-  "color-text-accent-orange": "#db3300",
-  "color-text-accent-purple": "#962eff",
+  "color-text-accent-lime": "#007000",
+  "color-text-accent-mint": "#006b48",
+  "color-text-accent-orange": "#a82700",
+  "color-text-accent-purple": "#7300e5",
   "color-text-accent-red": "#db0000",
   "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#8c8c94",
@@ -5342,11 +5337,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-item-selected": "#006ce0",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
-  "color-lime-600": "#008a00",
+  "color-lime-700": "#007000",
   "color-lime-950": "#002e00",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
-  "color-mint-600": "#008559",
+  "color-mint-700": "#006b48",
   "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
@@ -5370,7 +5365,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-950": "#0f141a",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
-  "color-orange-600": "#db3300",
+  "color-orange-700": "#a82700",
   "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
@@ -5386,7 +5381,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
-  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
   "color-severity-dark-red": "#870303",
@@ -5408,10 +5402,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-accent-green": "#00802f",
   "color-text-accent-grey": "#1b232d",
   "color-text-accent-indigo": "#006ce0",
-  "color-text-accent-lime": "#008a00",
-  "color-text-accent-mint": "#008559",
-  "color-text-accent-orange": "#db3300",
-  "color-text-accent-purple": "#962eff",
+  "color-text-accent-lime": "#007000",
+  "color-text-accent-mint": "#006b48",
+  "color-text-accent-orange": "#a82700",
+  "color-text-accent-purple": "#7300e5",
   "color-text-accent-red": "#db0000",
   "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#8c8c94",
@@ -6310,11 +6304,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-item-selected": "#42b4ff",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
-  "color-lime-600": "#008a00",
+  "color-lime-700": "#007000",
   "color-lime-950": "#002e00",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
-  "color-mint-600": "#008559",
+  "color-mint-700": "#006b48",
   "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
@@ -6338,7 +6332,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-950": "#0f141a",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
-  "color-orange-600": "#db3300",
+  "color-orange-700": "#a82700",
   "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
@@ -6354,7 +6348,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
-  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
   "color-severity-dark-red": "#870303",
@@ -6374,8 +6367,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-950": "#003311",
   "color-text-accent": "#42b4ff",
   "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#f9f9fa",
-  "color-text-accent-indigo": "#42b4ff",
+  "color-text-accent-grey": "#f3f3f7",
+  "color-text-accent-indigo": "#75cfff",
   "color-text-accent-lime": "#7ae500",
   "color-text-accent-mint": "#00e582",
   "color-text-accent-orange": "#ff6a3d",
@@ -7278,11 +7271,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-item-selected": "#42b4ff",
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
-  "color-lime-600": "#008a00",
+  "color-lime-700": "#007000",
   "color-lime-950": "#002e00",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
-  "color-mint-600": "#008559",
+  "color-mint-700": "#006b48",
   "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
@@ -7306,7 +7299,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-950": "#0f141a",
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
-  "color-orange-600": "#db3300",
+  "color-orange-700": "#a82700",
   "color-orange-950": "#471100",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
@@ -7322,7 +7315,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-950": "#00204d",
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
-  "color-purple-600": "#962eff",
   "color-purple-700": "#7300e5",
   "color-purple-950": "#300061",
   "color-severity-dark-red": "#d63f38",
@@ -7342,8 +7334,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-950": "#003311",
   "color-text-accent": "#42b4ff",
   "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#f9f9fa",
-  "color-text-accent-indigo": "#42b4ff",
+  "color-text-accent-grey": "#f3f3f7",
+  "color-text-accent-indigo": "#75cfff",
   "color-text-accent-lime": "#7ae500",
   "color-text-accent-mint": "#00e582",
   "color-text-accent-orange": "#ff6a3d",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 647e121a4f..cc4691daaa 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -2454,14 +2454,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#fafafa",
+            "dark": "#f2f3f3",
             "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00a1c9",
+            "dark": "#44b9d6",
             "light": "#0073bb",
           },
         },
@@ -2469,28 +2469,28 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#008a00",
+            "light": "#007000",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#008559",
+            "light": "#006b48",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#db3300",
+            "light": "#a82700",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#962eff",
+            "light": "#7300e5",
           },
         },
         "color-text-accent-red": {
@@ -6184,14 +6184,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#fafafa",
+            "dark": "#f2f3f3",
             "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00a1c9",
+            "dark": "#44b9d6",
             "light": "#0073bb",
           },
         },
@@ -6199,28 +6199,28 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#008a00",
+            "light": "#007000",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#008559",
+            "light": "#006b48",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#db3300",
+            "light": "#a82700",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#962eff",
+            "light": "#7300e5",
           },
         },
         "color-text-accent-red": {
@@ -9914,14 +9914,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#fafafa",
+            "dark": "#f2f3f3",
             "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00a1c9",
+            "dark": "#44b9d6",
             "light": "#0073bb",
           },
         },
@@ -9929,28 +9929,28 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#008a00",
+            "light": "#007000",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#008559",
+            "light": "#006b48",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#db3300",
+            "light": "#a82700",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#962eff",
+            "light": "#7300e5",
           },
         },
         "color-text-accent-red": {
@@ -13644,14 +13644,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#fafafa",
+            "dark": "#f2f3f3",
             "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00a1c9",
+            "dark": "#44b9d6",
             "light": "#0073bb",
           },
         },
@@ -13659,28 +13659,28 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#008a00",
+            "light": "#007000",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#008559",
+            "light": "#006b48",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#db3300",
+            "light": "#a82700",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#962eff",
+            "light": "#7300e5",
           },
         },
         "color-text-accent-red": {
@@ -17374,14 +17374,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#fafafa",
+            "dark": "#f2f3f3",
             "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00a1c9",
+            "dark": "#44b9d6",
             "light": "#0073bb",
           },
         },
@@ -17389,28 +17389,28 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#008a00",
+            "light": "#007000",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#008559",
+            "light": "#006b48",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#db3300",
+            "light": "#a82700",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#962eff",
+            "light": "#7300e5",
           },
         },
         "color-text-accent-red": {
@@ -21104,15 +21104,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#fafafa",
-            "light": "#fafafa",
+            "dark": "#f2f3f3",
+            "light": "#f2f3f3",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00a1c9",
-            "light": "#00a1c9",
+            "dark": "#44b9d6",
+            "light": "#44b9d6",
           },
         },
         "color-text-accent-lime": {
@@ -24834,14 +24834,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-text-accent-grey": {
       "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#fafafa",
+        "dark": "#f2f3f3",
         "light": "#21252c",
       },
     },
     "color-text-accent-indigo": {
       "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#00a1c9",
+        "dark": "#44b9d6",
         "light": "#0073bb",
       },
     },
@@ -24849,28 +24849,28 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#7ae500",
-        "light": "#008a00",
+        "light": "#007000",
       },
     },
     "color-text-accent-mint": {
       "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00e582",
-        "light": "#008559",
+        "light": "#006b48",
       },
     },
     "color-text-accent-orange": {
       "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff6a3d",
-        "light": "#db3300",
+        "light": "#a82700",
       },
     },
     "color-text-accent-purple": {
       "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#bf80ff",
-        "light": "#962eff",
+        "light": "#7300e5",
       },
     },
     "color-text-accent-red": {
@@ -28569,14 +28569,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f9f9fa",
+            "dark": "#f3f3f7",
             "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#42b4ff",
+            "dark": "#75cfff",
             "light": "#006ce0",
           },
         },
@@ -28584,28 +28584,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#008a00",
+            "light": "#007000",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#008559",
+            "light": "#006b48",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#db3300",
+            "light": "#a82700",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#962eff",
+            "light": "#7300e5",
           },
         },
         "color-text-accent-red": {
@@ -32299,15 +32299,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "dark": "#f3f3f7",
+            "light": "#f3f3f7",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "dark": "#75cfff",
+            "light": "#75cfff",
           },
         },
         "color-text-accent-lime": {
@@ -36029,14 +36029,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f9f9fa",
+            "dark": "#f3f3f7",
             "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#42b4ff",
+            "dark": "#75cfff",
             "light": "#006ce0",
           },
         },
@@ -36044,28 +36044,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#008a00",
+            "light": "#007000",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#008559",
+            "light": "#006b48",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#db3300",
+            "light": "#a82700",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#962eff",
+            "light": "#7300e5",
           },
         },
         "color-text-accent-red": {
@@ -39759,14 +39759,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f9f9fa",
+            "dark": "#f3f3f7",
             "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#42b4ff",
+            "dark": "#75cfff",
             "light": "#006ce0",
           },
         },
@@ -39774,28 +39774,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#008a00",
+            "light": "#007000",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#008559",
+            "light": "#006b48",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#db3300",
+            "light": "#a82700",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#962eff",
+            "light": "#7300e5",
           },
         },
         "color-text-accent-red": {
@@ -43489,14 +43489,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f9f9fa",
+            "dark": "#f3f3f7",
             "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#42b4ff",
+            "dark": "#75cfff",
             "light": "#006ce0",
           },
         },
@@ -43504,28 +43504,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#008a00",
+            "light": "#007000",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#008559",
+            "light": "#006b48",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#db3300",
+            "light": "#a82700",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#962eff",
+            "light": "#7300e5",
           },
         },
         "color-text-accent-red": {
@@ -47219,14 +47219,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f9f9fa",
+            "dark": "#f3f3f7",
             "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#42b4ff",
+            "dark": "#75cfff",
             "light": "#006ce0",
           },
         },
@@ -47234,28 +47234,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#008a00",
+            "light": "#007000",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#008559",
+            "light": "#006b48",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#db3300",
+            "light": "#a82700",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#962eff",
+            "light": "#7300e5",
           },
         },
         "color-text-accent-red": {
@@ -50949,15 +50949,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "dark": "#f3f3f7",
+            "light": "#f3f3f7",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "dark": "#75cfff",
+            "light": "#75cfff",
           },
         },
         "color-text-accent-lime": {
@@ -54679,15 +54679,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f9f9fa",
-            "light": "#f9f9fa",
+            "dark": "#f3f3f7",
+            "light": "#f3f3f7",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#42b4ff",
-            "light": "#42b4ff",
+            "dark": "#75cfff",
+            "light": "#75cfff",
           },
         },
         "color-text-accent-lime": {
@@ -58409,14 +58409,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-text-accent-grey": {
       "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#f9f9fa",
+        "dark": "#f3f3f7",
         "light": "#1b232d",
       },
     },
     "color-text-accent-indigo": {
       "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#42b4ff",
+        "dark": "#75cfff",
         "light": "#006ce0",
       },
     },
@@ -58424,28 +58424,28 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#7ae500",
-        "light": "#008a00",
+        "light": "#007000",
       },
     },
     "color-text-accent-mint": {
       "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00e582",
-        "light": "#008559",
+        "light": "#006b48",
       },
     },
     "color-text-accent-orange": {
       "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff6a3d",
-        "light": "#db3300",
+        "light": "#a82700",
       },
     },
     "color-text-accent-purple": {
       "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#bf80ff",
-        "light": "#962eff",
+        "light": "#7300e5",
       },
     },
     "color-text-accent-red": {
diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts
index 85f019de44..12a92dd117 100644
--- a/src/box/interfaces.ts
+++ b/src/box/interfaces.ts
@@ -24,7 +24,7 @@ export interface BoxProps extends BaseComponentProps {
    */
   variant?: BoxProps.Variant;
   /**
-   * Renders the box as a visual accent container to emphasize its content.
+   * Renders the box as a visual accent wrapper to emphasize its content.
    *
    * Setting this property activates the accent styling: the component renders a `span`
    * with a coordinated background and content color combination that works in both light
@@ -32,12 +32,12 @@ export interface BoxProps extends BaseComponentProps {
    *
    * The object accepts the following fields:
    * - `color` (required) — the coordinated background and foreground color pair. The foreground
-   *   color is applied as the container's CSS `color`, so it only affects content that inherits
+   *   color is applied as the wrapper's CSS `color`, so it only affects content that inherits
    *   the current color (for example an `Icon`, or a nested `Box` with `color="inherit"`).
    *   Content that sets its own color is not overridden.
-   * - `aspectRatio` — `auto` (default) lets the container's width follow its content;
+   * - `aspectRatio` — `auto` (default) lets the wrapper's width follow its content;
    *   `equal` forces equal width and height, suitable for wrapping icons.
-   * - `borderRadius` — the corner rounding applied to the container. Accepts a t-shirt size keyword
+   * - `borderRadius` — the corner rounding applied to the wrapper. Accepts a t-shirt size keyword
    *   from the Box spacing scale (`n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`) or
    *   any valid CSS `border-radius` value such as `'13px'`. Set it to `'50%'` together with
    *   `aspectRatio: 'equal'` to render a circle.
@@ -180,27 +180,27 @@ export namespace BoxProps {
 
   export interface VisualAccent {
     /**
-     * The coordinated background and foreground color pair applied to the accent container.
+     * The coordinated background and foreground color pair applied to the accent wrapper.
      * Each color works in both light and dark modes.
      *
-     * The background color is applied directly to the container. The foreground color is applied
-     * as the container's CSS `color` and is therefore only picked up by content that inherits the
+     * The background color is applied directly to the wrapper. The foreground color is applied
+     * as the wrapper's CSS `color` and is therefore only picked up by content that inherits the
      * current color, such as an `Icon` or a nested `Box` with `color="inherit"`. Content that
      * defines its own color (for example a `Box` with an explicit `color`, or a `Link`) keeps that
      * color and is not recolored by the accent.
      */
     color: BoxProps.VisualAccent.Color;
     /**
-     * Controls the aspect ratio of the accent container.
+     * Controls the aspect ratio of the accent wrapper.
      *
-     * - `auto` (default) — the container's width follows its content.
-     * - `equal` — the container has equal width and height, suitable for wrapping icons.
+     * - `auto` (default) — the wrapper's width follows its content.
+     * - `equal` — the wrapper has equal width and height, suitable for wrapping icons.
      *
      * Combine `aspectRatio: 'equal'` with `borderRadius: '50%'` to render a circle.
      */
     aspectRatio?: BoxProps.VisualAccent.AspectRatio;
     /**
-     * The corner rounding applied to the accent container.
+     * The corner rounding applied to the accent wrapper.
      *
      * You can use one of the curated t-shirt size keywords, which map to the same spacing scale
      * used by `padding` and `margin`: `n` (none), `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`,

From 19b20374ad8dbbc17922b1219ad1ce9bab0e92b7 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 6 Jul 2026 00:27:50 +0200
Subject: [PATCH 14/19] chore: Update background colors for marker

---
 package.json                                  |    2 +-
 pages/box/visual-accent.page.tsx              |   16 +
 .../__snapshots__/themes.test.ts.snap         |  450 +-
 .../__snapshots__/design-tokens.test.ts.snap  | 2360 ++++++++-
 .../__snapshots__/documenter.test.ts.snap     |   17 +-
 .../test-utils-wrappers.test.tsx.snap         | 4532 -----------------
 src/box/interfaces.ts                         |   20 +-
 src/box/visual-accent.scss                    |   46 +
 style-dictionary/utils/token-names.ts         |   18 +
 .../visual-refresh/color-palette.ts           |   33 +
 style-dictionary/visual-refresh/colors.ts     |   36 +-
 .../visual-refresh/metadata/colors.ts         |   90 +
 12 files changed, 2840 insertions(+), 4780 deletions(-)

diff --git a/package.json b/package.json
index 9af50e9da5..49e1d87120 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1310 kB",
+      "limit": "1320 kB",
       "ignore": "react-dom"
     }
   ],
diff --git a/pages/box/visual-accent.page.tsx b/pages/box/visual-accent.page.tsx
index b622edfe98..d539a4a34b 100644
--- a/pages/box/visual-accent.page.tsx
+++ b/pages/box/visual-accent.page.tsx
@@ -22,6 +22,15 @@ const ALL_VARIANTS: BoxProps.VisualAccent.Color[] = [
   'mint',
   'lime',
   'grey',
+  'teal',
+  'cyan',
+  'blue',
+  'violet',
+  'fuchsia',
+  'magenta',
+  'pink',
+  'rose',
+  'amber',
 ];
 
 const BOX_VARIANTS: { variant: BoxProps['variant']; label: string; content: string }[] = [
@@ -152,6 +161,13 @@ export default function StyleBoxPage() {
             })}
           />
         </Container>
+
+        <Box padding={{ top: 'xl' }} />
+        <Container header={<Header variant="h3">Other example</Header>}>
+          <Box visualAccent={{ color: 'purple' }} padding={{ horizontal: 's', vertical: 'n' }} variant="h4">
+            Helloo
+          </Box>
+        </Container>
       </article>
     </div>
   );
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index d743638971..8bf44e38f8 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -78,15 +78,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-width-item-selected": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
+  "color-amber-400": "#ff9900",
+  "color-amber-50": "#fff7e6",
+  "color-amber-700": "#9e3700",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "#fff7e6",
+  "color-background-accent-blue": "#f1faff",
+  "color-background-accent-cyan": "#f0feff",
+  "color-background-accent-fuchsia": "#fff5fe",
   "color-background-accent-green": "#f2f8f0",
-  "color-background-accent-grey": "#fafafa",
+  "color-background-accent-grey": "#f6f6f9",
   "color-background-accent-indigo": "#f1faff",
   "color-background-accent-lime": "#f7ffeb",
+  "color-background-accent-magenta": "#fff5fe",
   "color-background-accent-mint": "#ebfff6",
   "color-background-accent-orange": "#fff7f5",
+  "color-background-accent-pink": "#fff5fa",
   "color-background-accent-purple": "#faf5ff",
   "color-background-accent-red": "#fdf3f1",
+  "color-background-accent-rose": "#fff5f8",
+  "color-background-accent-teal": "#ebfffe",
+  "color-background-accent-violet": "#f6f5ff",
   "color-background-accent-yellow": "#fffef0",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
@@ -222,6 +234,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
   "color-black": "#000000",
+  "color-blue-400": "#00a1c9",
+  "color-blue-50": "#f1faff",
+  "color-blue-700": "#0a4a74",
   "color-board-placeholder-active": "#d5dbdb",
   "color-board-placeholder-hover": "#99cbe4",
   "color-border-action-card-active": "#002b66",
@@ -463,6 +478,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-400": "#00d2e5",
+  "color-cyan-50": "#f0feff",
+  "color-cyan-700": "#00627a",
   "color-drag-placeholder-active": "#d5dbdb",
   "color-drag-placeholder-hover": "#99cbe4",
   "color-dropzone-background-default": "#ffffff",
@@ -480,6 +498,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
+  "color-fuchsia-400": "#ec70ff",
+  "color-fuchsia-50": "#fff5fe",
+  "color-fuchsia-700": "#a000b8",
   "color-gap-global-drawer": "#eaeded",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -503,11 +524,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
   "color-lime-700": "#007000",
-  "color-lime-950": "#002e00",
+  "color-magenta-400": "#ff57e9",
+  "color-magenta-50": "#fff5fe",
+  "color-magenta-700": "#b2008f",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
   "color-mint-700": "#006b48",
-  "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -531,7 +553,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-700": "#a82700",
-  "color-orange-950": "#471100",
+  "color-pink-400": "#ff66b2",
+  "color-pink-50": "#fff5fa",
+  "color-pink-700": "#bb005d",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -547,7 +571,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
-  "color-purple-950": "#300061",
+  "color-rose-400": "#ff5c85",
+  "color-rose-50": "#fff5f8",
+  "color-rose-700": "#c20030",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -563,15 +589,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
   "color-success-950": "#003311",
+  "color-teal-400": "#00d6c8",
+  "color-teal-50": "#ebfffe",
+  "color-teal-700": "#00665f",
   "color-text-accent": "#0073bb",
+  "color-text-accent-amber": "#9e3700",
+  "color-text-accent-blue": "#0a4a74",
+  "color-text-accent-cyan": "#00627a",
+  "color-text-accent-fuchsia": "#a000b8",
   "color-text-accent-green": "#1d8102",
   "color-text-accent-grey": "#21252c",
   "color-text-accent-indigo": "#0073bb",
   "color-text-accent-lime": "#007000",
+  "color-text-accent-magenta": "#b2008f",
   "color-text-accent-mint": "#006b48",
   "color-text-accent-orange": "#a82700",
+  "color-text-accent-pink": "#bb005d",
   "color-text-accent-purple": "#7300e5",
   "color-text-accent-red": "#d13212",
+  "color-text-accent-rose": "#c20030",
+  "color-text-accent-teal": "#00665f",
+  "color-text-accent-violet": "#5724ff",
   "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
@@ -704,6 +742,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-text-tutorial-hotspot-hover": "#0a4a74",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
+  "color-violet-400": "#978aff",
+  "color-violet-50": "#f6f5ff",
+  "color-violet-700": "#5724ff",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -1045,16 +1086,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-width-item-selected": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
+  "color-amber-400": "#ff9900",
+  "color-amber-50": "#fff7e6",
+  "color-amber-700": "#9e3700",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-green": "#003311",
+  "color-background-accent-amber": "rgba(122, 43, 0, 0.4)",
+  "color-background-accent-blue": "rgba(0, 59, 143, 0.4)",
+  "color-background-accent-cyan": "rgba(0, 71, 97, 0.4)",
+  "color-background-accent-fuchsia": "rgba(120, 0, 138, 0.4)",
+  "color-background-accent-green": "rgba(0, 92, 38, 0.4)",
   "color-background-accent-grey": "#2a2e33",
-  "color-background-accent-indigo": "#00204d",
-  "color-background-accent-lime": "#002e00",
-  "color-background-accent-mint": "#003322",
-  "color-background-accent-orange": "#471100",
-  "color-background-accent-purple": "#300061",
-  "color-background-accent-red": "#520000",
-  "color-background-accent-yellow": "#573a00",
+  "color-background-accent-indigo": "rgba(0, 59, 143, 0.4)",
+  "color-background-accent-lime": "rgba(0, 87, 0, 0.4)",
+  "color-background-accent-magenta": "rgba(143, 0, 114, 0.4)",
+  "color-background-accent-mint": "rgba(0, 82, 55, 0.4)",
+  "color-background-accent-orange": "rgba(138, 32, 0, 0.4)",
+  "color-background-accent-pink": "rgba(143, 0, 71, 0.4)",
+  "color-background-accent-purple": "rgba(89, 0, 178, 0.4)",
+  "color-background-accent-red": "rgba(153, 0, 0, 0.4)",
+  "color-background-accent-rose": "rgba(148, 0, 37, 0.4)",
+  "color-background-accent-teal": "rgba(0, 82, 76, 0.4)",
+  "color-background-accent-violet": "rgba(66, 0, 219, 0.4)",
+  "color-background-accent-yellow": "rgba(158, 105, 0, 0.4)",
   "color-background-action-card-active": "#414750",
   "color-background-action-card-default": "#1a2029",
   "color-background-action-card-disabled": "#21252c",
@@ -1189,6 +1242,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-toggle-checked-disabled": "#0a4a74",
   "color-background-toggle-default": "#879596",
   "color-black": "#000000",
+  "color-blue-400": "#00a1c9",
+  "color-blue-50": "#f1faff",
+  "color-blue-700": "#0a4a74",
   "color-board-placeholder-active": "#687078",
   "color-board-placeholder-hover": "#0073bb",
   "color-border-action-card-active": "#44b9d6",
@@ -1430,6 +1486,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-charts-yellow-700": "#dfb52c",
   "color-charts-yellow-800": "#eac33a",
   "color-charts-yellow-900": "#f1cf65",
+  "color-cyan-400": "#00d2e5",
+  "color-cyan-50": "#f0feff",
+  "color-cyan-700": "#00627a",
   "color-drag-placeholder-active": "#687078",
   "color-drag-placeholder-hover": "#0073bb",
   "color-dropzone-background-default": "#1a2029",
@@ -1447,6 +1506,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#687078",
   "color-foreground-control-read-only": "#95a5a6",
+  "color-fuchsia-400": "#ec70ff",
+  "color-fuchsia-50": "#fff5fe",
+  "color-fuchsia-700": "#a000b8",
   "color-gap-global-drawer": "#16191f",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -1470,11 +1532,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
   "color-lime-700": "#007000",
-  "color-lime-950": "#002e00",
+  "color-magenta-400": "#ff57e9",
+  "color-magenta-50": "#fff5fe",
+  "color-magenta-700": "#b2008f",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
   "color-mint-700": "#006b48",
-  "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -1498,7 +1561,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-700": "#a82700",
-  "color-orange-950": "#471100",
+  "color-pink-400": "#ff66b2",
+  "color-pink-50": "#fff5fa",
+  "color-pink-700": "#bb005d",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -1514,7 +1579,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
-  "color-purple-950": "#300061",
+  "color-rose-400": "#ff5c85",
+  "color-rose-50": "#fff5f8",
+  "color-rose-700": "#c20030",
   "color-severity-dark-red": "#d63f38",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -1530,15 +1597,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
   "color-success-950": "#003311",
+  "color-teal-400": "#00d6c8",
+  "color-teal-50": "#ebfffe",
+  "color-teal-700": "#00665f",
   "color-text-accent": "#44b9d6",
+  "color-text-accent-amber": "#ff9900",
+  "color-text-accent-blue": "#00a1c9",
+  "color-text-accent-cyan": "#00d2e5",
+  "color-text-accent-fuchsia": "#ec70ff",
   "color-text-accent-green": "#00e500",
   "color-text-accent-grey": "#f2f3f3",
   "color-text-accent-indigo": "#44b9d6",
   "color-text-accent-lime": "#7ae500",
+  "color-text-accent-magenta": "#ff57e9",
   "color-text-accent-mint": "#00e582",
   "color-text-accent-orange": "#ff6a3d",
+  "color-text-accent-pink": "#ff66b2",
   "color-text-accent-purple": "#bf80ff",
   "color-text-accent-red": "#ff5d64",
+  "color-text-accent-rose": "#ff5c85",
+  "color-text-accent-teal": "#00d6c8",
+  "color-text-accent-violet": "#978aff",
   "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
@@ -1671,6 +1750,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-text-tutorial-hotspot-hover": "#99cbe4",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#d5dbdb",
+  "color-violet-400": "#978aff",
+  "color-violet-50": "#f6f5ff",
+  "color-violet-700": "#5724ff",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -2012,15 +2094,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-width-item-selected": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
+  "color-amber-400": "#ff9900",
+  "color-amber-50": "#fff7e6",
+  "color-amber-700": "#9e3700",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "#fff7e6",
+  "color-background-accent-blue": "#f1faff",
+  "color-background-accent-cyan": "#f0feff",
+  "color-background-accent-fuchsia": "#fff5fe",
   "color-background-accent-green": "#f2f8f0",
-  "color-background-accent-grey": "#fafafa",
+  "color-background-accent-grey": "#f6f6f9",
   "color-background-accent-indigo": "#f1faff",
   "color-background-accent-lime": "#f7ffeb",
+  "color-background-accent-magenta": "#fff5fe",
   "color-background-accent-mint": "#ebfff6",
   "color-background-accent-orange": "#fff7f5",
+  "color-background-accent-pink": "#fff5fa",
   "color-background-accent-purple": "#faf5ff",
   "color-background-accent-red": "#fdf3f1",
+  "color-background-accent-rose": "#fff5f8",
+  "color-background-accent-teal": "#ebfffe",
+  "color-background-accent-violet": "#f6f5ff",
   "color-background-accent-yellow": "#fffef0",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
@@ -2156,6 +2250,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
   "color-black": "#000000",
+  "color-blue-400": "#00a1c9",
+  "color-blue-50": "#f1faff",
+  "color-blue-700": "#0a4a74",
   "color-board-placeholder-active": "#d5dbdb",
   "color-board-placeholder-hover": "#99cbe4",
   "color-border-action-card-active": "#002b66",
@@ -2397,6 +2494,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-400": "#00d2e5",
+  "color-cyan-50": "#f0feff",
+  "color-cyan-700": "#00627a",
   "color-drag-placeholder-active": "#d5dbdb",
   "color-drag-placeholder-hover": "#99cbe4",
   "color-dropzone-background-default": "#ffffff",
@@ -2414,6 +2514,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
+  "color-fuchsia-400": "#ec70ff",
+  "color-fuchsia-50": "#fff5fe",
+  "color-fuchsia-700": "#a000b8",
   "color-gap-global-drawer": "#eaeded",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -2437,11 +2540,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
   "color-lime-700": "#007000",
-  "color-lime-950": "#002e00",
+  "color-magenta-400": "#ff57e9",
+  "color-magenta-50": "#fff5fe",
+  "color-magenta-700": "#b2008f",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
   "color-mint-700": "#006b48",
-  "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -2465,7 +2569,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-700": "#a82700",
-  "color-orange-950": "#471100",
+  "color-pink-400": "#ff66b2",
+  "color-pink-50": "#fff5fa",
+  "color-pink-700": "#bb005d",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -2481,7 +2587,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
-  "color-purple-950": "#300061",
+  "color-rose-400": "#ff5c85",
+  "color-rose-50": "#fff5f8",
+  "color-rose-700": "#c20030",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -2497,15 +2605,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
   "color-success-950": "#003311",
+  "color-teal-400": "#00d6c8",
+  "color-teal-50": "#ebfffe",
+  "color-teal-700": "#00665f",
   "color-text-accent": "#0073bb",
+  "color-text-accent-amber": "#9e3700",
+  "color-text-accent-blue": "#0a4a74",
+  "color-text-accent-cyan": "#00627a",
+  "color-text-accent-fuchsia": "#a000b8",
   "color-text-accent-green": "#1d8102",
   "color-text-accent-grey": "#21252c",
   "color-text-accent-indigo": "#0073bb",
   "color-text-accent-lime": "#007000",
+  "color-text-accent-magenta": "#b2008f",
   "color-text-accent-mint": "#006b48",
   "color-text-accent-orange": "#a82700",
+  "color-text-accent-pink": "#bb005d",
   "color-text-accent-purple": "#7300e5",
   "color-text-accent-red": "#d13212",
+  "color-text-accent-rose": "#c20030",
+  "color-text-accent-teal": "#00665f",
+  "color-text-accent-violet": "#5724ff",
   "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
@@ -2638,6 +2758,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-text-tutorial-hotspot-hover": "#0a4a74",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
+  "color-violet-400": "#978aff",
+  "color-violet-50": "#f6f5ff",
+  "color-violet-700": "#5724ff",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -2979,15 +3102,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-width-item-selected": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
+  "color-amber-400": "#ff9900",
+  "color-amber-50": "#fff7e6",
+  "color-amber-700": "#9e3700",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "#fff7e6",
+  "color-background-accent-blue": "#f1faff",
+  "color-background-accent-cyan": "#f0feff",
+  "color-background-accent-fuchsia": "#fff5fe",
   "color-background-accent-green": "#f2f8f0",
-  "color-background-accent-grey": "#fafafa",
+  "color-background-accent-grey": "#f6f6f9",
   "color-background-accent-indigo": "#f1faff",
   "color-background-accent-lime": "#f7ffeb",
+  "color-background-accent-magenta": "#fff5fe",
   "color-background-accent-mint": "#ebfff6",
   "color-background-accent-orange": "#fff7f5",
+  "color-background-accent-pink": "#fff5fa",
   "color-background-accent-purple": "#faf5ff",
   "color-background-accent-red": "#fdf3f1",
+  "color-background-accent-rose": "#fff5f8",
+  "color-background-accent-teal": "#ebfffe",
+  "color-background-accent-violet": "#f6f5ff",
   "color-background-accent-yellow": "#fffef0",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
@@ -3123,6 +3258,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
   "color-black": "#000000",
+  "color-blue-400": "#00a1c9",
+  "color-blue-50": "#f1faff",
+  "color-blue-700": "#0a4a74",
   "color-board-placeholder-active": "#d5dbdb",
   "color-board-placeholder-hover": "#99cbe4",
   "color-border-action-card-active": "#002b66",
@@ -3364,6 +3502,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-400": "#00d2e5",
+  "color-cyan-50": "#f0feff",
+  "color-cyan-700": "#00627a",
   "color-drag-placeholder-active": "#d5dbdb",
   "color-drag-placeholder-hover": "#99cbe4",
   "color-dropzone-background-default": "#ffffff",
@@ -3381,6 +3522,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
+  "color-fuchsia-400": "#ec70ff",
+  "color-fuchsia-50": "#fff5fe",
+  "color-fuchsia-700": "#a000b8",
   "color-gap-global-drawer": "#eaeded",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -3404,11 +3548,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
   "color-lime-700": "#007000",
-  "color-lime-950": "#002e00",
+  "color-magenta-400": "#ff57e9",
+  "color-magenta-50": "#fff5fe",
+  "color-magenta-700": "#b2008f",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
   "color-mint-700": "#006b48",
-  "color-mint-950": "#003322",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -3432,7 +3577,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-700": "#a82700",
-  "color-orange-950": "#471100",
+  "color-pink-400": "#ff66b2",
+  "color-pink-50": "#fff5fa",
+  "color-pink-700": "#bb005d",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -3448,7 +3595,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
-  "color-purple-950": "#300061",
+  "color-rose-400": "#ff5c85",
+  "color-rose-50": "#fff5f8",
+  "color-rose-700": "#c20030",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -3464,15 +3613,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
   "color-success-950": "#003311",
+  "color-teal-400": "#00d6c8",
+  "color-teal-50": "#ebfffe",
+  "color-teal-700": "#00665f",
   "color-text-accent": "#0073bb",
+  "color-text-accent-amber": "#9e3700",
+  "color-text-accent-blue": "#0a4a74",
+  "color-text-accent-cyan": "#00627a",
+  "color-text-accent-fuchsia": "#a000b8",
   "color-text-accent-green": "#1d8102",
   "color-text-accent-grey": "#21252c",
   "color-text-accent-indigo": "#0073bb",
   "color-text-accent-lime": "#007000",
+  "color-text-accent-magenta": "#b2008f",
   "color-text-accent-mint": "#006b48",
   "color-text-accent-orange": "#a82700",
+  "color-text-accent-pink": "#bb005d",
   "color-text-accent-purple": "#7300e5",
   "color-text-accent-red": "#d13212",
+  "color-text-accent-rose": "#c20030",
+  "color-text-accent-teal": "#00665f",
+  "color-text-accent-violet": "#5724ff",
   "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
@@ -3605,6 +3766,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-text-tutorial-hotspot-hover": "#0a4a74",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
+  "color-violet-400": "#978aff",
+  "color-violet-50": "#f6f5ff",
+  "color-violet-700": "#5724ff",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -3946,15 +4110,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-width-item-selected": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
+  "color-amber-400": "#ff9900",
+  "color-amber-50": "#fff7e6",
+  "color-amber-700": "#9e3700",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "#fff7e6",
+  "color-background-accent-blue": "#f0fbff",
+  "color-background-accent-cyan": "#f0feff",
+  "color-background-accent-fuchsia": "#fff5fe",
   "color-background-accent-green": "#effff1",
-  "color-background-accent-grey": "#f9f9fa",
+  "color-background-accent-grey": "#f6f6f9",
   "color-background-accent-indigo": "#f0fbff",
   "color-background-accent-lime": "#f7ffeb",
+  "color-background-accent-magenta": "#fff5fe",
   "color-background-accent-mint": "#ebfff6",
   "color-background-accent-orange": "#fff7f5",
+  "color-background-accent-pink": "#fff5fa",
   "color-background-accent-purple": "#faf5ff",
   "color-background-accent-red": "#fff5f5",
+  "color-background-accent-rose": "#fff5f8",
+  "color-background-accent-teal": "#ebfffe",
+  "color-background-accent-violet": "#f6f5ff",
   "color-background-accent-yellow": "#fffef0",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
@@ -4090,6 +4266,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-toggle-checked-disabled": "#b8e7ff",
   "color-background-toggle-default": "#424650",
   "color-black": "#000000",
+  "color-blue-400": "#42b4ff",
+  "color-blue-50": "#f0fbff",
+  "color-blue-700": "#004a9e",
   "color-board-placeholder-active": "#ebebf0",
   "color-board-placeholder-hover": "#d1f1ff",
   "color-border-action-card-active": "#002b66",
@@ -4331,6 +4510,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-400": "#00d2e5",
+  "color-cyan-50": "#f0feff",
+  "color-cyan-700": "#00627a",
   "color-drag-placeholder-active": "#ebebf0",
   "color-drag-placeholder-hover": "#d1f1ff",
   "color-dropzone-background-default": "#ffffff",
@@ -4348,6 +4530,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#656871",
+  "color-fuchsia-400": "#ec70ff",
+  "color-fuchsia-50": "#fff5fe",
+  "color-fuchsia-700": "#a000b8",
   "color-gap-global-drawer": "#ebebf0",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -4371,11 +4556,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
   "color-lime-700": "#007000",
-  "color-lime-950": "#002e00",
+  "color-magenta-400": "#ff57e9",
+  "color-magenta-50": "#fff5fe",
+  "color-magenta-700": "#b2008f",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
   "color-mint-700": "#006b48",
-  "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -4399,7 +4585,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-700": "#a82700",
-  "color-orange-950": "#471100",
+  "color-pink-400": "#ff66b2",
+  "color-pink-50": "#fff5fa",
+  "color-pink-700": "#bb005d",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -4415,7 +4603,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
-  "color-purple-950": "#300061",
+  "color-rose-400": "#ff5c85",
+  "color-rose-50": "#fff5f8",
+  "color-rose-700": "#c20030",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -4431,15 +4621,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
   "color-success-950": "#003311",
+  "color-teal-400": "#00d6c8",
+  "color-teal-50": "#ebfffe",
+  "color-teal-700": "#00665f",
   "color-text-accent": "#006ce0",
+  "color-text-accent-amber": "#9e3700",
+  "color-text-accent-blue": "#004a9e",
+  "color-text-accent-cyan": "#00627a",
+  "color-text-accent-fuchsia": "#a000b8",
   "color-text-accent-green": "#00802f",
   "color-text-accent-grey": "#1b232d",
   "color-text-accent-indigo": "#006ce0",
   "color-text-accent-lime": "#007000",
+  "color-text-accent-magenta": "#b2008f",
   "color-text-accent-mint": "#006b48",
   "color-text-accent-orange": "#a82700",
+  "color-text-accent-pink": "#bb005d",
   "color-text-accent-purple": "#7300e5",
   "color-text-accent-red": "#db0000",
+  "color-text-accent-rose": "#c20030",
+  "color-text-accent-teal": "#00665f",
+  "color-text-accent-violet": "#5724ff",
   "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
@@ -4572,6 +4774,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-text-tutorial-hotspot-hover": "#002b66",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#8c8c94",
+  "color-violet-400": "#978aff",
+  "color-violet-50": "#f6f5ff",
+  "color-violet-700": "#5724ff",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -4913,15 +5118,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-item-selected": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
+  "color-amber-400": "#ff9900",
+  "color-amber-50": "#fff7e6",
+  "color-amber-700": "#9e3700",
   "color-aws-squid-ink": "#232f3e",
+  "color-background-accent-amber": "#fff7e6",
+  "color-background-accent-blue": "#f0fbff",
+  "color-background-accent-cyan": "#f0feff",
+  "color-background-accent-fuchsia": "#fff5fe",
   "color-background-accent-green": "#effff1",
-  "color-background-accent-grey": "#f9f9fa",
+  "color-background-accent-grey": "#f6f6f9",
   "color-background-accent-indigo": "#f0fbff",
   "color-background-accent-lime": "#f7ffeb",
+  "color-background-accent-magenta": "#fff5fe",
   "color-background-accent-mint": "#ebfff6",
   "color-background-accent-orange": "#fff7f5",
+  "color-background-accent-pink": "#fff5fa",
   "color-background-accent-purple": "#faf5ff",
   "color-background-accent-red": "#fff5f5",
+  "color-background-accent-rose": "#fff5f8",
+  "color-background-accent-teal": "#ebfffe",
+  "color-background-accent-violet": "#f6f5ff",
   "color-background-accent-yellow": "#fffef0",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
@@ -5057,6 +5274,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-checked-disabled": "#b8e7ff",
   "color-background-toggle-default": "#424650",
   "color-black": "#000000",
+  "color-blue-400": "#42b4ff",
+  "color-blue-50": "#f0fbff",
+  "color-blue-700": "#004a9e",
   "color-board-placeholder-active": "#ebebf0",
   "color-board-placeholder-hover": "#d1f1ff",
   "color-border-action-card-active": "#002b66",
@@ -5298,6 +5518,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-400": "#00d2e5",
+  "color-cyan-50": "#f0feff",
+  "color-cyan-700": "#00627a",
   "color-drag-placeholder-active": "#ebebf0",
   "color-drag-placeholder-hover": "#d1f1ff",
   "color-dropzone-background-default": "#ffffff",
@@ -5315,6 +5538,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#656871",
+  "color-fuchsia-400": "#ec70ff",
+  "color-fuchsia-50": "#fff5fe",
+  "color-fuchsia-700": "#a000b8",
   "color-gap-global-drawer": "#ebebf0",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -5338,11 +5564,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
   "color-lime-700": "#007000",
-  "color-lime-950": "#002e00",
+  "color-magenta-400": "#ff57e9",
+  "color-magenta-50": "#fff5fe",
+  "color-magenta-700": "#b2008f",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
   "color-mint-700": "#006b48",
-  "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -5366,7 +5593,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-700": "#a82700",
-  "color-orange-950": "#471100",
+  "color-pink-400": "#ff66b2",
+  "color-pink-50": "#fff5fa",
+  "color-pink-700": "#bb005d",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -5382,7 +5611,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
-  "color-purple-950": "#300061",
+  "color-rose-400": "#ff5c85",
+  "color-rose-50": "#fff5f8",
+  "color-rose-700": "#c20030",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -5398,15 +5629,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
   "color-success-950": "#003311",
+  "color-teal-400": "#00d6c8",
+  "color-teal-50": "#ebfffe",
+  "color-teal-700": "#00665f",
   "color-text-accent": "#006ce0",
+  "color-text-accent-amber": "#9e3700",
+  "color-text-accent-blue": "#004a9e",
+  "color-text-accent-cyan": "#00627a",
+  "color-text-accent-fuchsia": "#a000b8",
   "color-text-accent-green": "#00802f",
   "color-text-accent-grey": "#1b232d",
   "color-text-accent-indigo": "#006ce0",
   "color-text-accent-lime": "#007000",
+  "color-text-accent-magenta": "#b2008f",
   "color-text-accent-mint": "#006b48",
   "color-text-accent-orange": "#a82700",
+  "color-text-accent-pink": "#bb005d",
   "color-text-accent-purple": "#7300e5",
   "color-text-accent-red": "#db0000",
+  "color-text-accent-rose": "#c20030",
+  "color-text-accent-teal": "#00665f",
+  "color-text-accent-violet": "#5724ff",
   "color-text-accent-yellow": "#9e6900",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
@@ -5539,6 +5782,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-tutorial-hotspot-hover": "#002b66",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#8c8c94",
+  "color-violet-400": "#978aff",
+  "color-violet-50": "#f6f5ff",
+  "color-violet-700": "#5724ff",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -5880,16 +6126,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-item-selected": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
+  "color-amber-400": "#ff9900",
+  "color-amber-50": "#fff7e6",
+  "color-amber-700": "#9e3700",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-green": "#003311",
+  "color-background-accent-amber": "rgba(122, 43, 0, 0.4)",
+  "color-background-accent-blue": "rgba(0, 59, 143, 0.4)",
+  "color-background-accent-cyan": "rgba(0, 71, 97, 0.4)",
+  "color-background-accent-fuchsia": "rgba(120, 0, 138, 0.4)",
+  "color-background-accent-green": "rgba(0, 92, 38, 0.4)",
   "color-background-accent-grey": "#232b37",
-  "color-background-accent-indigo": "#00204d",
-  "color-background-accent-lime": "#002e00",
-  "color-background-accent-mint": "#003322",
-  "color-background-accent-orange": "#471100",
-  "color-background-accent-purple": "#300061",
-  "color-background-accent-red": "#520000",
-  "color-background-accent-yellow": "#573a00",
+  "color-background-accent-indigo": "rgba(0, 59, 143, 0.4)",
+  "color-background-accent-lime": "rgba(0, 87, 0, 0.4)",
+  "color-background-accent-magenta": "rgba(143, 0, 114, 0.4)",
+  "color-background-accent-mint": "rgba(0, 82, 55, 0.4)",
+  "color-background-accent-orange": "rgba(138, 32, 0, 0.4)",
+  "color-background-accent-pink": "rgba(143, 0, 71, 0.4)",
+  "color-background-accent-purple": "rgba(89, 0, 178, 0.4)",
+  "color-background-accent-red": "rgba(153, 0, 0, 0.4)",
+  "color-background-accent-rose": "rgba(148, 0, 37, 0.4)",
+  "color-background-accent-teal": "rgba(0, 82, 76, 0.4)",
+  "color-background-accent-violet": "rgba(66, 0, 219, 0.4)",
+  "color-background-accent-yellow": "rgba(158, 105, 0, 0.4)",
   "color-background-action-card-active": "#333843",
   "color-background-action-card-default": "#161d26",
   "color-background-action-card-disabled": "#161d26",
@@ -6024,6 +6282,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-checked-disabled": "#002b66",
   "color-background-toggle-default": "#8c8c94",
   "color-black": "#000000",
+  "color-blue-400": "#42b4ff",
+  "color-blue-50": "#f0fbff",
+  "color-blue-700": "#004a9e",
   "color-board-placeholder-active": "#656871",
   "color-board-placeholder-hover": "#006ce0",
   "color-border-action-card-active": "#75cfff",
@@ -6265,6 +6526,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-400": "#00d2e5",
+  "color-cyan-50": "#f0feff",
+  "color-cyan-700": "#00627a",
   "color-drag-placeholder-active": "#656871",
   "color-drag-placeholder-hover": "#006ce0",
   "color-dropzone-background-default": "#161d26",
@@ -6282,6 +6546,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-foreground-control-default": "#0f141a",
   "color-foreground-control-disabled": "#161d26",
   "color-foreground-control-read-only": "#a4a4ad",
+  "color-fuchsia-400": "#ec70ff",
+  "color-fuchsia-50": "#fff5fe",
+  "color-fuchsia-700": "#a000b8",
   "color-gap-global-drawer": "#0f141a",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -6305,11 +6572,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
   "color-lime-700": "#007000",
-  "color-lime-950": "#002e00",
+  "color-magenta-400": "#ff57e9",
+  "color-magenta-50": "#fff5fe",
+  "color-magenta-700": "#b2008f",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
   "color-mint-700": "#006b48",
-  "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -6333,7 +6601,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-700": "#a82700",
-  "color-orange-950": "#471100",
+  "color-pink-400": "#ff66b2",
+  "color-pink-50": "#fff5fa",
+  "color-pink-700": "#bb005d",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -6349,7 +6619,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
-  "color-purple-950": "#300061",
+  "color-rose-400": "#ff5c85",
+  "color-rose-50": "#fff5f8",
+  "color-rose-700": "#c20030",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -6365,15 +6637,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
   "color-success-950": "#003311",
+  "color-teal-400": "#00d6c8",
+  "color-teal-50": "#ebfffe",
+  "color-teal-700": "#00665f",
   "color-text-accent": "#42b4ff",
+  "color-text-accent-amber": "#ff9900",
+  "color-text-accent-blue": "#42b4ff",
+  "color-text-accent-cyan": "#00d2e5",
+  "color-text-accent-fuchsia": "#ec70ff",
   "color-text-accent-green": "#00e500",
   "color-text-accent-grey": "#f3f3f7",
   "color-text-accent-indigo": "#75cfff",
   "color-text-accent-lime": "#7ae500",
+  "color-text-accent-magenta": "#ff57e9",
   "color-text-accent-mint": "#00e582",
   "color-text-accent-orange": "#ff6a3d",
+  "color-text-accent-pink": "#ff66b2",
   "color-text-accent-purple": "#bf80ff",
   "color-text-accent-red": "#ff7a7a",
+  "color-text-accent-rose": "#ff5c85",
+  "color-text-accent-teal": "#00d6c8",
+  "color-text-accent-violet": "#978aff",
   "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
@@ -6506,6 +6790,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-tutorial-hotspot-hover": "#75cfff",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#dedee3",
+  "color-violet-400": "#978aff",
+  "color-violet-50": "#f6f5ff",
+  "color-violet-700": "#5724ff",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -6847,16 +7134,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-item-selected": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
+  "color-amber-400": "#ff9900",
+  "color-amber-50": "#fff7e6",
+  "color-amber-700": "#9e3700",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-green": "#003311",
+  "color-background-accent-amber": "rgba(122, 43, 0, 0.4)",
+  "color-background-accent-blue": "rgba(0, 59, 143, 0.4)",
+  "color-background-accent-cyan": "rgba(0, 71, 97, 0.4)",
+  "color-background-accent-fuchsia": "rgba(120, 0, 138, 0.4)",
+  "color-background-accent-green": "rgba(0, 92, 38, 0.4)",
   "color-background-accent-grey": "#232b37",
-  "color-background-accent-indigo": "#00204d",
-  "color-background-accent-lime": "#002e00",
-  "color-background-accent-mint": "#003322",
-  "color-background-accent-orange": "#471100",
-  "color-background-accent-purple": "#300061",
-  "color-background-accent-red": "#520000",
-  "color-background-accent-yellow": "#573a00",
+  "color-background-accent-indigo": "rgba(0, 59, 143, 0.4)",
+  "color-background-accent-lime": "rgba(0, 87, 0, 0.4)",
+  "color-background-accent-magenta": "rgba(143, 0, 114, 0.4)",
+  "color-background-accent-mint": "rgba(0, 82, 55, 0.4)",
+  "color-background-accent-orange": "rgba(138, 32, 0, 0.4)",
+  "color-background-accent-pink": "rgba(143, 0, 71, 0.4)",
+  "color-background-accent-purple": "rgba(89, 0, 178, 0.4)",
+  "color-background-accent-red": "rgba(153, 0, 0, 0.4)",
+  "color-background-accent-rose": "rgba(148, 0, 37, 0.4)",
+  "color-background-accent-teal": "rgba(0, 82, 76, 0.4)",
+  "color-background-accent-violet": "rgba(66, 0, 219, 0.4)",
+  "color-background-accent-yellow": "rgba(158, 105, 0, 0.4)",
   "color-background-action-card-active": "#333843",
   "color-background-action-card-default": "#161d26",
   "color-background-action-card-disabled": "#161d26",
@@ -6991,6 +7290,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-checked-disabled": "#002b66",
   "color-background-toggle-default": "#8c8c94",
   "color-black": "#000000",
+  "color-blue-400": "#42b4ff",
+  "color-blue-50": "#f0fbff",
+  "color-blue-700": "#004a9e",
   "color-board-placeholder-active": "#656871",
   "color-board-placeholder-hover": "#006ce0",
   "color-border-action-card-active": "#75cfff",
@@ -7232,6 +7534,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-charts-yellow-700": "#dfb52c",
   "color-charts-yellow-800": "#eac33a",
   "color-charts-yellow-900": "#f1cf65",
+  "color-cyan-400": "#00d2e5",
+  "color-cyan-50": "#f0feff",
+  "color-cyan-700": "#00627a",
   "color-drag-placeholder-active": "#656871",
   "color-drag-placeholder-hover": "#006ce0",
   "color-dropzone-background-default": "#161d26",
@@ -7249,6 +7554,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-foreground-control-default": "#0f141a",
   "color-foreground-control-disabled": "#161d26",
   "color-foreground-control-read-only": "#a4a4ad",
+  "color-fuchsia-400": "#ec70ff",
+  "color-fuchsia-50": "#fff5fe",
+  "color-fuchsia-700": "#a000b8",
   "color-gap-global-drawer": "#0f141a",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -7272,11 +7580,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-lime-400": "#7ae500",
   "color-lime-50": "#f7ffeb",
   "color-lime-700": "#007000",
-  "color-lime-950": "#002e00",
+  "color-magenta-400": "#ff57e9",
+  "color-magenta-50": "#fff5fe",
+  "color-magenta-700": "#b2008f",
   "color-mint-400": "#00e582",
   "color-mint-50": "#ebfff6",
   "color-mint-700": "#006b48",
-  "color-mint-950": "#003322",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -7300,7 +7609,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-orange-400": "#ff6a3d",
   "color-orange-50": "#fff7f5",
   "color-orange-700": "#a82700",
-  "color-orange-950": "#471100",
+  "color-pink-400": "#ff66b2",
+  "color-pink-50": "#fff5fa",
+  "color-pink-700": "#bb005d",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -7316,7 +7627,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-purple-400": "#bf80ff",
   "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
-  "color-purple-950": "#300061",
+  "color-rose-400": "#ff5c85",
+  "color-rose-50": "#fff5f8",
+  "color-rose-700": "#c20030",
   "color-severity-dark-red": "#d63f38",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -7332,15 +7645,27 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
   "color-success-950": "#003311",
+  "color-teal-400": "#00d6c8",
+  "color-teal-50": "#ebfffe",
+  "color-teal-700": "#00665f",
   "color-text-accent": "#42b4ff",
+  "color-text-accent-amber": "#ff9900",
+  "color-text-accent-blue": "#42b4ff",
+  "color-text-accent-cyan": "#00d2e5",
+  "color-text-accent-fuchsia": "#ec70ff",
   "color-text-accent-green": "#00e500",
   "color-text-accent-grey": "#f3f3f7",
   "color-text-accent-indigo": "#75cfff",
   "color-text-accent-lime": "#7ae500",
+  "color-text-accent-magenta": "#ff57e9",
   "color-text-accent-mint": "#00e582",
   "color-text-accent-orange": "#ff6a3d",
+  "color-text-accent-pink": "#ff66b2",
   "color-text-accent-purple": "#bf80ff",
   "color-text-accent-red": "#ff7a7a",
+  "color-text-accent-rose": "#ff5c85",
+  "color-text-accent-teal": "#00d6c8",
+  "color-text-accent-violet": "#978aff",
   "color-text-accent-yellow": "#ffe347",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
@@ -7473,6 +7798,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-tutorial-hotspot-hover": "#75cfff",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#dedee3",
+  "color-violet-400": "#978aff",
+  "color-violet-50": "#f6f5ff",
+  "color-violet-700": "#5724ff",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index cc4691daaa..5e25e2d510 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -197,10 +197,38 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "#fff7e6",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "#f1faff",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "#f0feff",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
             "light": "#f2f8f0",
           },
         },
@@ -208,55 +236,90 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#2a2e33",
-            "light": "#fafafa",
+            "light": "#f6f6f9",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
             "light": "#f1faff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
             "light": "#f7ffeb",
           },
         },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
             "light": "#ebfff6",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
             "light": "#fff7f5",
           },
         },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "#fff5fa",
+          },
+        },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
             "light": "#faf5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
             "light": "#fdf3f1",
           },
         },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "#fff5f8",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "#ebfffe",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "#f6f5ff",
+          },
+        },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
             "light": "#fffef0",
           },
         },
@@ -2444,6 +2507,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#9e3700",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00a1c9",
+            "light": "#0a4a74",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00627a",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#a000b8",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -2472,6 +2563,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#007000",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#b2008f",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -2486,6 +2584,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#a82700",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#bb005d",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -2500,6 +2605,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#d13212",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#c20030",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00665f",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#5724ff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -3927,10 +4053,38 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "#fff7e6",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "#f1faff",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "#f0feff",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
             "light": "#f2f8f0",
           },
         },
@@ -3938,55 +4092,90 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#2a2e33",
-            "light": "#fafafa",
+            "light": "#f6f6f9",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
             "light": "#f1faff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
             "light": "#f7ffeb",
           },
         },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
             "light": "#ebfff6",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
             "light": "#fff7f5",
           },
         },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "#fff5fa",
+          },
+        },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
             "light": "#faf5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
             "light": "#fdf3f1",
           },
         },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "#fff5f8",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "#ebfffe",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "#f6f5ff",
+          },
+        },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
             "light": "#fffef0",
           },
         },
@@ -6174,6 +6363,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#9e3700",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00a1c9",
+            "light": "#0a4a74",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00627a",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#a000b8",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -6202,6 +6419,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#007000",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#b2008f",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -6216,6 +6440,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#a82700",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#bb005d",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -6230,6 +6461,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#d13212",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#c20030",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00665f",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#5724ff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -7657,10 +7909,38 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "#fff7e6",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "#f1faff",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "#f0feff",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
             "light": "#f2f8f0",
           },
         },
@@ -7668,55 +7948,90 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#2a2e33",
-            "light": "#fafafa",
+            "light": "#f6f6f9",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
             "light": "#f1faff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
             "light": "#f7ffeb",
           },
         },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
             "light": "#ebfff6",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
             "light": "#fff7f5",
           },
         },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "#fff5fa",
+          },
+        },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
             "light": "#faf5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
             "light": "#fdf3f1",
           },
         },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "#fff5f8",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "#ebfffe",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "#f6f5ff",
+          },
+        },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
             "light": "#fffef0",
           },
         },
@@ -9904,6 +10219,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#9e3700",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00a1c9",
+            "light": "#0a4a74",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00627a",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#a000b8",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -9932,6 +10275,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#007000",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#b2008f",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -9946,6 +10296,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#a82700",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#bb005d",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -9960,6 +10317,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#d13212",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#c20030",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00665f",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#5724ff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -11387,10 +11765,38 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "#fff7e6",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "#f1faff",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "#f0feff",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
             "light": "#f2f8f0",
           },
         },
@@ -11398,55 +11804,90 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#2a2e33",
-            "light": "#fafafa",
+            "light": "#f6f6f9",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
             "light": "#f1faff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
             "light": "#f7ffeb",
           },
         },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
             "light": "#ebfff6",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
             "light": "#fff7f5",
           },
         },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "#fff5fa",
+          },
+        },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
             "light": "#faf5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
             "light": "#fdf3f1",
           },
         },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "#fff5f8",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "#ebfffe",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "#f6f5ff",
+          },
+        },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
             "light": "#fffef0",
           },
         },
@@ -13634,6 +14075,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#9e3700",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00a1c9",
+            "light": "#0a4a74",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00627a",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#a000b8",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -13662,6 +14131,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#007000",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#b2008f",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -13676,6 +14152,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#a82700",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#bb005d",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -13690,6 +14173,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#d13212",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#c20030",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00665f",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#5724ff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -15117,10 +15621,38 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "#fff7e6",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "#f1faff",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "#f0feff",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
             "light": "#f2f8f0",
           },
         },
@@ -15128,55 +15660,90 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#2a2e33",
-            "light": "#fafafa",
+            "light": "#f6f6f9",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
             "light": "#f1faff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
             "light": "#f7ffeb",
           },
         },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
             "light": "#ebfff6",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
             "light": "#fff7f5",
           },
         },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "#fff5fa",
+          },
+        },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
             "light": "#faf5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
             "light": "#fdf3f1",
           },
         },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "#fff5f8",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "#ebfffe",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "#f6f5ff",
+          },
+        },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
             "light": "#fffef0",
           },
         },
@@ -17364,6 +17931,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#9e3700",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00a1c9",
+            "light": "#0a4a74",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00627a",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#a000b8",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -17392,6 +17987,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#007000",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#b2008f",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -17406,6 +18008,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#a82700",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#bb005d",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -17420,6 +18029,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#d13212",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#c20030",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00665f",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#5724ff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -18847,11 +19477,39 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of tokens.",
           "$value": "1px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "rgba(122, 43, 0, 0.4)",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "rgba(0, 59, 143, 0.4)",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "rgba(0, 71, 97, 0.4)",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "rgba(120, 0, 138, 0.4)",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
-            "light": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
+            "light": "rgba(0, 92, 38, 0.4)",
           },
         },
         "color-background-accent-grey": {
@@ -18864,50 +19522,85 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
-            "light": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "rgba(0, 59, 143, 0.4)",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
-            "light": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
+            "light": "rgba(0, 87, 0, 0.4)",
+          },
+        },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "rgba(143, 0, 114, 0.4)",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
-            "light": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
+            "light": "rgba(0, 82, 55, 0.4)",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
-            "light": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
+            "light": "rgba(138, 32, 0, 0.4)",
+          },
+        },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "rgba(143, 0, 71, 0.4)",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
-            "light": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
+            "light": "rgba(89, 0, 178, 0.4)",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
-            "light": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
+            "light": "rgba(153, 0, 0, 0.4)",
+          },
+        },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "rgba(148, 0, 37, 0.4)",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "rgba(0, 82, 76, 0.4)",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "rgba(66, 0, 219, 0.4)",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
-            "light": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
+            "light": "rgba(158, 105, 0, 0.4)",
           },
         },
         "color-background-action-card-active": {
@@ -21094,6 +21787,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#44b9d6",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#ff9900",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00a1c9",
+            "light": "#00a1c9",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00d2e5",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#ec70ff",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -21122,6 +21843,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#7ae500",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#ff57e9",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -21136,6 +21864,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#ff6a3d",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#ff66b2",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -21150,6 +21885,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#ff5d64",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#ff5c85",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00d6c8",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#978aff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -22577,10 +23333,38 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The border width of tokens.",
       "$value": "1px",
     },
+    "color-background-accent-amber": {
+      "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(122, 43, 0, 0.4)",
+        "light": "#fff7e6",
+      },
+    },
+    "color-background-accent-blue": {
+      "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(0, 59, 143, 0.4)",
+        "light": "#f1faff",
+      },
+    },
+    "color-background-accent-cyan": {
+      "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(0, 71, 97, 0.4)",
+        "light": "#f0feff",
+      },
+    },
+    "color-background-accent-fuchsia": {
+      "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(120, 0, 138, 0.4)",
+        "light": "#fff5fe",
+      },
+    },
     "color-background-accent-green": {
       "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#003311",
+        "dark": "rgba(0, 92, 38, 0.4)",
         "light": "#f2f8f0",
       },
     },
@@ -22588,55 +23372,90 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#2a2e33",
-        "light": "#fafafa",
+        "light": "#f6f6f9",
       },
     },
     "color-background-accent-indigo": {
       "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#00204d",
+        "dark": "rgba(0, 59, 143, 0.4)",
         "light": "#f1faff",
       },
     },
     "color-background-accent-lime": {
       "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#002e00",
+        "dark": "rgba(0, 87, 0, 0.4)",
         "light": "#f7ffeb",
       },
     },
+    "color-background-accent-magenta": {
+      "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(143, 0, 114, 0.4)",
+        "light": "#fff5fe",
+      },
+    },
     "color-background-accent-mint": {
       "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#003322",
+        "dark": "rgba(0, 82, 55, 0.4)",
         "light": "#ebfff6",
       },
     },
     "color-background-accent-orange": {
       "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#471100",
+        "dark": "rgba(138, 32, 0, 0.4)",
         "light": "#fff7f5",
       },
     },
+    "color-background-accent-pink": {
+      "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(143, 0, 71, 0.4)",
+        "light": "#fff5fa",
+      },
+    },
     "color-background-accent-purple": {
       "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#300061",
+        "dark": "rgba(89, 0, 178, 0.4)",
         "light": "#faf5ff",
       },
     },
     "color-background-accent-red": {
       "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#520000",
+        "dark": "rgba(153, 0, 0, 0.4)",
         "light": "#fdf3f1",
       },
     },
+    "color-background-accent-rose": {
+      "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(148, 0, 37, 0.4)",
+        "light": "#fff5f8",
+      },
+    },
+    "color-background-accent-teal": {
+      "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(0, 82, 76, 0.4)",
+        "light": "#ebfffe",
+      },
+    },
+    "color-background-accent-violet": {
+      "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(66, 0, 219, 0.4)",
+        "light": "#f6f5ff",
+      },
+    },
     "color-background-accent-yellow": {
       "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#573a00",
+        "dark": "rgba(158, 105, 0, 0.4)",
         "light": "#fffef0",
       },
     },
@@ -24824,6 +25643,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "light": "#0073bb",
       },
     },
+    "color-text-accent-amber": {
+      "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff9900",
+        "light": "#9e3700",
+      },
+    },
+    "color-text-accent-blue": {
+      "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#00a1c9",
+        "light": "#0a4a74",
+      },
+    },
+    "color-text-accent-cyan": {
+      "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#00d2e5",
+        "light": "#00627a",
+      },
+    },
+    "color-text-accent-fuchsia": {
+      "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ec70ff",
+        "light": "#a000b8",
+      },
+    },
     "color-text-accent-green": {
       "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
       "$value": {
@@ -24852,6 +25699,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "light": "#007000",
       },
     },
+    "color-text-accent-magenta": {
+      "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff57e9",
+        "light": "#b2008f",
+      },
+    },
     "color-text-accent-mint": {
       "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
       "$value": {
@@ -24866,6 +25720,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "light": "#a82700",
       },
     },
+    "color-text-accent-pink": {
+      "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff66b2",
+        "light": "#bb005d",
+      },
+    },
     "color-text-accent-purple": {
       "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
       "$value": {
@@ -24880,6 +25741,27 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "light": "#d13212",
       },
     },
+    "color-text-accent-rose": {
+      "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff5c85",
+        "light": "#c20030",
+      },
+    },
+    "color-text-accent-teal": {
+      "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#00d6c8",
+        "light": "#00665f",
+      },
+    },
+    "color-text-accent-violet": {
+      "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#978aff",
+        "light": "#5724ff",
+      },
+    },
     "color-text-accent-yellow": {
       "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
       "$value": {
@@ -26312,10 +27194,38 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "#fff7e6",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "#f0fbff",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "#f0feff",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
             "light": "#effff1",
           },
         },
@@ -26323,55 +27233,90 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#232b37",
-            "light": "#f9f9fa",
+            "light": "#f6f6f9",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
             "light": "#f0fbff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
             "light": "#f7ffeb",
           },
         },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
             "light": "#ebfff6",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
             "light": "#fff7f5",
           },
         },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "#fff5fa",
+          },
+        },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
             "light": "#faf5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
             "light": "#fff5f5",
           },
         },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "#fff5f8",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "#ebfffe",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "#f6f5ff",
+          },
+        },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
             "light": "#fffef0",
           },
         },
@@ -28559,6 +29504,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#9e3700",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#004a9e",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00627a",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#a000b8",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -28587,6 +29560,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#007000",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#b2008f",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -28601,6 +29581,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#a82700",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#bb005d",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -28615,6 +29602,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#db0000",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#c20030",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00665f",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#5724ff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -30042,11 +31050,39 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "rgba(122, 43, 0, 0.4)",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "rgba(0, 59, 143, 0.4)",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "rgba(0, 71, 97, 0.4)",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "rgba(120, 0, 138, 0.4)",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
-            "light": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
+            "light": "rgba(0, 92, 38, 0.4)",
           },
         },
         "color-background-accent-grey": {
@@ -30059,50 +31095,85 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
-            "light": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "rgba(0, 59, 143, 0.4)",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
-            "light": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
+            "light": "rgba(0, 87, 0, 0.4)",
+          },
+        },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "rgba(143, 0, 114, 0.4)",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
-            "light": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
+            "light": "rgba(0, 82, 55, 0.4)",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
-            "light": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
+            "light": "rgba(138, 32, 0, 0.4)",
+          },
+        },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "rgba(143, 0, 71, 0.4)",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
-            "light": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
+            "light": "rgba(89, 0, 178, 0.4)",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
-            "light": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
+            "light": "rgba(153, 0, 0, 0.4)",
+          },
+        },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "rgba(148, 0, 37, 0.4)",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "rgba(0, 82, 76, 0.4)",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "rgba(66, 0, 219, 0.4)",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
-            "light": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
+            "light": "rgba(158, 105, 0, 0.4)",
           },
         },
         "color-background-action-card-active": {
@@ -32289,6 +33360,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#42b4ff",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#ff9900",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00d2e5",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#ec70ff",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -32317,6 +33416,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#7ae500",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#ff57e9",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -32331,6 +33437,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ff6a3d",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#ff66b2",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -32345,6 +33458,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ff7a7a",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#ff5c85",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00d6c8",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#978aff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -33772,10 +34906,38 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "#fff7e6",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "#f0fbff",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "#f0feff",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
             "light": "#effff1",
           },
         },
@@ -33783,55 +34945,90 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#232b37",
-            "light": "#f9f9fa",
+            "light": "#f6f6f9",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
             "light": "#f0fbff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
             "light": "#f7ffeb",
           },
         },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
             "light": "#ebfff6",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
             "light": "#fff7f5",
           },
         },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "#fff5fa",
+          },
+        },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
             "light": "#faf5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
             "light": "#fff5f5",
           },
         },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "#fff5f8",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "#ebfffe",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "#f6f5ff",
+          },
+        },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
             "light": "#fffef0",
           },
         },
@@ -36019,6 +37216,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#9e3700",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#004a9e",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00627a",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#a000b8",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -36047,6 +37272,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#007000",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#b2008f",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -36061,6 +37293,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#a82700",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#bb005d",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -36075,6 +37314,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#db0000",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#c20030",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00665f",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#5724ff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -37502,10 +38762,38 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "#fff7e6",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "#f0fbff",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "#f0feff",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
             "light": "#effff1",
           },
         },
@@ -37513,55 +38801,90 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#232b37",
-            "light": "#f9f9fa",
+            "light": "#f6f6f9",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
             "light": "#f0fbff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
             "light": "#f7ffeb",
           },
         },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
             "light": "#ebfff6",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
             "light": "#fff7f5",
           },
         },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "#fff5fa",
+          },
+        },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
             "light": "#faf5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
             "light": "#fff5f5",
           },
         },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "#fff5f8",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "#ebfffe",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "#f6f5ff",
+          },
+        },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
             "light": "#fffef0",
           },
         },
@@ -39749,6 +41072,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#9e3700",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#004a9e",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00627a",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#a000b8",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -39777,6 +41128,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#007000",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#b2008f",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -39791,6 +41149,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#a82700",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#bb005d",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -39805,6 +41170,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#db0000",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#c20030",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00665f",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#5724ff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -41232,10 +42618,38 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "#fff7e6",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "#f0fbff",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "#f0feff",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
             "light": "#effff1",
           },
         },
@@ -41243,55 +42657,90 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#232b37",
-            "light": "#f9f9fa",
+            "light": "#f6f6f9",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
             "light": "#f0fbff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
             "light": "#f7ffeb",
           },
         },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
             "light": "#ebfff6",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
             "light": "#fff7f5",
           },
         },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "#fff5fa",
+          },
+        },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
             "light": "#faf5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
             "light": "#fff5f5",
           },
         },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "#fff5f8",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "#ebfffe",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "#f6f5ff",
+          },
+        },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
             "light": "#fffef0",
           },
         },
@@ -43479,6 +44928,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#9e3700",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#004a9e",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00627a",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#a000b8",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -43507,6 +44984,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#007000",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#b2008f",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -43521,6 +45005,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#a82700",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#bb005d",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -43535,6 +45026,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#db0000",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#c20030",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00665f",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#5724ff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -44962,10 +46474,38 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "#fff7e6",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "#f0fbff",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "#f0feff",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
             "light": "#effff1",
           },
         },
@@ -44973,55 +46513,90 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#232b37",
-            "light": "#f9f9fa",
+            "light": "#f6f6f9",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
             "light": "#f0fbff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
             "light": "#f7ffeb",
           },
         },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "#fff5fe",
+          },
+        },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
             "light": "#ebfff6",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
             "light": "#fff7f5",
           },
         },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "#fff5fa",
+          },
+        },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
             "light": "#faf5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
             "light": "#fff5f5",
           },
         },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "#fff5f8",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "#ebfffe",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "#f6f5ff",
+          },
+        },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
             "light": "#fffef0",
           },
         },
@@ -47209,6 +48784,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#9e3700",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#004a9e",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00627a",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#a000b8",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -47237,6 +48840,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#007000",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#b2008f",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -47251,6 +48861,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#a82700",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#bb005d",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -47265,6 +48882,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#db0000",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#c20030",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00665f",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#5724ff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -48692,11 +50330,39 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "rgba(122, 43, 0, 0.4)",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "rgba(0, 59, 143, 0.4)",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "rgba(0, 71, 97, 0.4)",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "rgba(120, 0, 138, 0.4)",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
-            "light": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
+            "light": "rgba(0, 92, 38, 0.4)",
           },
         },
         "color-background-accent-grey": {
@@ -48709,50 +50375,85 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
-            "light": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "rgba(0, 59, 143, 0.4)",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
-            "light": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
+            "light": "rgba(0, 87, 0, 0.4)",
+          },
+        },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "rgba(143, 0, 114, 0.4)",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
-            "light": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
+            "light": "rgba(0, 82, 55, 0.4)",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
-            "light": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
+            "light": "rgba(138, 32, 0, 0.4)",
+          },
+        },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "rgba(143, 0, 71, 0.4)",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
-            "light": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
+            "light": "rgba(89, 0, 178, 0.4)",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
-            "light": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
+            "light": "rgba(153, 0, 0, 0.4)",
+          },
+        },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "rgba(148, 0, 37, 0.4)",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "rgba(0, 82, 76, 0.4)",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "rgba(66, 0, 219, 0.4)",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
-            "light": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
+            "light": "rgba(158, 105, 0, 0.4)",
           },
         },
         "color-background-action-card-active": {
@@ -50939,6 +52640,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#42b4ff",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#ff9900",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00d2e5",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#ec70ff",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -50967,6 +52696,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#7ae500",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#ff57e9",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -50981,6 +52717,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ff6a3d",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#ff66b2",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -50995,6 +52738,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ff7a7a",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#ff5c85",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00d6c8",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#978aff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -52422,11 +54186,39 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of tokens.",
           "$value": "2px",
         },
+        "color-background-accent-amber": {
+          "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(122, 43, 0, 0.4)",
+            "light": "rgba(122, 43, 0, 0.4)",
+          },
+        },
+        "color-background-accent-blue": {
+          "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "rgba(0, 59, 143, 0.4)",
+          },
+        },
+        "color-background-accent-cyan": {
+          "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 71, 97, 0.4)",
+            "light": "rgba(0, 71, 97, 0.4)",
+          },
+        },
+        "color-background-accent-fuchsia": {
+          "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(120, 0, 138, 0.4)",
+            "light": "rgba(120, 0, 138, 0.4)",
+          },
+        },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003311",
-            "light": "#003311",
+            "dark": "rgba(0, 92, 38, 0.4)",
+            "light": "rgba(0, 92, 38, 0.4)",
           },
         },
         "color-background-accent-grey": {
@@ -52439,50 +54231,85 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#00204d",
-            "light": "#00204d",
+            "dark": "rgba(0, 59, 143, 0.4)",
+            "light": "rgba(0, 59, 143, 0.4)",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#002e00",
-            "light": "#002e00",
+            "dark": "rgba(0, 87, 0, 0.4)",
+            "light": "rgba(0, 87, 0, 0.4)",
+          },
+        },
+        "color-background-accent-magenta": {
+          "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 114, 0.4)",
+            "light": "rgba(143, 0, 114, 0.4)",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#003322",
-            "light": "#003322",
+            "dark": "rgba(0, 82, 55, 0.4)",
+            "light": "rgba(0, 82, 55, 0.4)",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#471100",
-            "light": "#471100",
+            "dark": "rgba(138, 32, 0, 0.4)",
+            "light": "rgba(138, 32, 0, 0.4)",
+          },
+        },
+        "color-background-accent-pink": {
+          "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(143, 0, 71, 0.4)",
+            "light": "rgba(143, 0, 71, 0.4)",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#300061",
-            "light": "#300061",
+            "dark": "rgba(89, 0, 178, 0.4)",
+            "light": "rgba(89, 0, 178, 0.4)",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#520000",
-            "light": "#520000",
+            "dark": "rgba(153, 0, 0, 0.4)",
+            "light": "rgba(153, 0, 0, 0.4)",
+          },
+        },
+        "color-background-accent-rose": {
+          "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(148, 0, 37, 0.4)",
+            "light": "rgba(148, 0, 37, 0.4)",
+          },
+        },
+        "color-background-accent-teal": {
+          "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(0, 82, 76, 0.4)",
+            "light": "rgba(0, 82, 76, 0.4)",
+          },
+        },
+        "color-background-accent-violet": {
+          "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "rgba(66, 0, 219, 0.4)",
+            "light": "rgba(66, 0, 219, 0.4)",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#573a00",
-            "light": "#573a00",
+            "dark": "rgba(158, 105, 0, 0.4)",
+            "light": "rgba(158, 105, 0, 0.4)",
           },
         },
         "color-background-action-card-active": {
@@ -54669,6 +56496,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#42b4ff",
           },
         },
+        "color-text-accent-amber": {
+          "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff9900",
+            "light": "#ff9900",
+          },
+        },
+        "color-text-accent-blue": {
+          "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-accent-cyan": {
+          "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d2e5",
+            "light": "#00d2e5",
+          },
+        },
+        "color-text-accent-fuchsia": {
+          "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ec70ff",
+            "light": "#ec70ff",
+          },
+        },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -54697,6 +56552,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#7ae500",
           },
         },
+        "color-text-accent-magenta": {
+          "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff57e9",
+            "light": "#ff57e9",
+          },
+        },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -54711,6 +56573,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ff6a3d",
           },
         },
+        "color-text-accent-pink": {
+          "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff66b2",
+            "light": "#ff66b2",
+          },
+        },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -54725,6 +56594,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#ff7a7a",
           },
         },
+        "color-text-accent-rose": {
+          "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#ff5c85",
+            "light": "#ff5c85",
+          },
+        },
+        "color-text-accent-teal": {
+          "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#00d6c8",
+            "light": "#00d6c8",
+          },
+        },
+        "color-text-accent-violet": {
+          "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+          "$value": {
+            "dark": "#978aff",
+            "light": "#978aff",
+          },
+        },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
@@ -56152,10 +58042,38 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The border width of tokens.",
       "$value": "2px",
     },
+    "color-background-accent-amber": {
+      "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(122, 43, 0, 0.4)",
+        "light": "#fff7e6",
+      },
+    },
+    "color-background-accent-blue": {
+      "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(0, 59, 143, 0.4)",
+        "light": "#f0fbff",
+      },
+    },
+    "color-background-accent-cyan": {
+      "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(0, 71, 97, 0.4)",
+        "light": "#f0feff",
+      },
+    },
+    "color-background-accent-fuchsia": {
+      "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(120, 0, 138, 0.4)",
+        "light": "#fff5fe",
+      },
+    },
     "color-background-accent-green": {
       "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#003311",
+        "dark": "rgba(0, 92, 38, 0.4)",
         "light": "#effff1",
       },
     },
@@ -56163,55 +58081,90 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#232b37",
-        "light": "#f9f9fa",
+        "light": "#f6f6f9",
       },
     },
     "color-background-accent-indigo": {
       "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#00204d",
+        "dark": "rgba(0, 59, 143, 0.4)",
         "light": "#f0fbff",
       },
     },
     "color-background-accent-lime": {
       "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#002e00",
+        "dark": "rgba(0, 87, 0, 0.4)",
         "light": "#f7ffeb",
       },
     },
+    "color-background-accent-magenta": {
+      "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(143, 0, 114, 0.4)",
+        "light": "#fff5fe",
+      },
+    },
     "color-background-accent-mint": {
       "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#003322",
+        "dark": "rgba(0, 82, 55, 0.4)",
         "light": "#ebfff6",
       },
     },
     "color-background-accent-orange": {
       "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#471100",
+        "dark": "rgba(138, 32, 0, 0.4)",
         "light": "#fff7f5",
       },
     },
+    "color-background-accent-pink": {
+      "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(143, 0, 71, 0.4)",
+        "light": "#fff5fa",
+      },
+    },
     "color-background-accent-purple": {
       "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#300061",
+        "dark": "rgba(89, 0, 178, 0.4)",
         "light": "#faf5ff",
       },
     },
     "color-background-accent-red": {
       "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#520000",
+        "dark": "rgba(153, 0, 0, 0.4)",
         "light": "#fff5f5",
       },
     },
+    "color-background-accent-rose": {
+      "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(148, 0, 37, 0.4)",
+        "light": "#fff5f8",
+      },
+    },
+    "color-background-accent-teal": {
+      "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(0, 82, 76, 0.4)",
+        "light": "#ebfffe",
+      },
+    },
+    "color-background-accent-violet": {
+      "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "rgba(66, 0, 219, 0.4)",
+        "light": "#f6f5ff",
+      },
+    },
     "color-background-accent-yellow": {
       "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#573a00",
+        "dark": "rgba(158, 105, 0, 0.4)",
         "light": "#fffef0",
       },
     },
@@ -58399,6 +60352,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "light": "#006ce0",
       },
     },
+    "color-text-accent-amber": {
+      "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff9900",
+        "light": "#9e3700",
+      },
+    },
+    "color-text-accent-blue": {
+      "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#42b4ff",
+        "light": "#004a9e",
+      },
+    },
+    "color-text-accent-cyan": {
+      "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#00d2e5",
+        "light": "#00627a",
+      },
+    },
+    "color-text-accent-fuchsia": {
+      "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ec70ff",
+        "light": "#a000b8",
+      },
+    },
     "color-text-accent-green": {
       "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
       "$value": {
@@ -58427,6 +60408,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "light": "#007000",
       },
     },
+    "color-text-accent-magenta": {
+      "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff57e9",
+        "light": "#b2008f",
+      },
+    },
     "color-text-accent-mint": {
       "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
       "$value": {
@@ -58441,6 +60429,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "light": "#a82700",
       },
     },
+    "color-text-accent-pink": {
+      "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff66b2",
+        "light": "#bb005d",
+      },
+    },
     "color-text-accent-purple": {
       "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
       "$value": {
@@ -58455,6 +60450,27 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "light": "#db0000",
       },
     },
+    "color-text-accent-rose": {
+      "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#ff5c85",
+        "light": "#c20030",
+      },
+    },
+    "color-text-accent-teal": {
+      "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#00d6c8",
+        "light": "#00665f",
+      },
+    },
+    "color-text-accent-violet": {
+      "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
+      "$value": {
+        "dark": "#978aff",
+        "light": "#5724ff",
+      },
+    },
     "color-text-accent-yellow": {
       "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
       "$value": {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 249a959036..dc0ae04f50 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -5018,7 +5018,7 @@ Override the HTML tag by using property \`tagOverride\`.",
       "type": "string",
     },
     {
-      "description": "Renders the box as a visual accent container to emphasize its content.
+      "description": "Renders the box as a visual accent wrapper to emphasize its content.
 
 Setting this property activates the accent styling: the component renders a \`span\`
 with a coordinated background and content color combination that works in both light
@@ -5026,12 +5026,12 @@ and dark modes. A \`variant\` is not required to activate the accent.
 
 The object accepts the following fields:
 - \`color\` (required) — the coordinated background and foreground color pair. The foreground
-  color is applied as the container's CSS \`color\`, so it only affects content that inherits
+  color is applied as the wrapper's CSS \`color\`, so it only affects content that inherits
   the current color (for example an \`Icon\`, or a nested \`Box\` with \`color="inherit"\`).
   Content that sets its own color is not overridden.
-- \`aspectRatio\` — \`auto\` (default) lets the container's width follow its content;
+- \`aspectRatio\` — \`auto\` (default) lets the wrapper's width follow its content;
   \`equal\` forces equal width and height, suitable for wrapping icons.
-- \`borderRadius\` — the corner rounding applied to the container. Accepts a t-shirt size keyword
+- \`borderRadius\` — the corner rounding applied to the wrapper. Accepts a t-shirt size keyword
   from the Box spacing scale (\`n\`, \`xxxs\`, \`xxs\`, \`xs\`, \`s\`, \`m\`, \`l\`, \`xl\`, \`xxl\`, \`xxxl\`) or
   any valid CSS \`border-radius\` value such as \`'13px'\`. Set it to \`'50%'\` together with
   \`aspectRatio: 'equal'\` to render a circle.
@@ -5080,15 +5080,24 @@ Composes with existing Box props such as \`padding\` and \`margin\`.",
               "name": "BoxProps.VisualAccent.Color",
               "type": "union",
               "values": [
+                "blue",
+                "cyan",
+                "fuchsia",
                 "green",
                 "grey",
                 "indigo",
                 "lime",
+                "magenta",
                 "orange",
+                "pink",
                 "purple",
                 "red",
+                "teal",
+                "violet",
                 "yellow",
                 "mint",
+                "rose",
+                "amber",
               ],
             },
             "name": "color",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
index 118ac8d1b2..941f04fc00 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
@@ -2,4541 +2,9 @@
 
 exports[`Generate test utils ElementWrapper dom ElementWrapper matches the snapshot 1`] = `
 "
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
 import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
-import { appendSelector } from '@cloudscape-design/test-utils-core/utils';
-
 export { ElementWrapper };
-
-import ActionCardWrapper from './action-card';
-import AlertWrapper from './alert';
-import AnchorNavigationWrapper from './anchor-navigation';
-import AnnotationWrapper from './annotation';
-import AppLayoutWrapper from './app-layout';
-import AppLayoutToolbarWrapper from './app-layout-toolbar';
-import AreaChartWrapper from './area-chart';
-import AttributeEditorWrapper from './attribute-editor';
-import AutosuggestWrapper from './autosuggest';
-import BadgeWrapper from './badge';
-import BarChartWrapper from './bar-chart';
-import BoxWrapper from './box';
-import BreadcrumbGroupWrapper from './breadcrumb-group';
-import ButtonWrapper from './button';
-import ButtonDropdownWrapper from './button-dropdown';
-import ButtonGroupWrapper from './button-group';
-import CalendarWrapper from './calendar';
-import CardsWrapper from './cards';
-import CheckboxWrapper from './checkbox';
-import CodeEditorWrapper from './code-editor';
-import CollectionPreferencesWrapper from './collection-preferences';
-import ColumnLayoutWrapper from './column-layout';
-import ContainerWrapper from './container';
-import ContentLayoutWrapper from './content-layout';
-import CopyToClipboardWrapper from './copy-to-clipboard';
-import DateInputWrapper from './date-input';
-import DatePickerWrapper from './date-picker';
-import DateRangePickerWrapper from './date-range-picker';
-import DividerWrapper from './divider';
-import DrawerWrapper from './drawer';
-import DropdownWrapper from './dropdown';
-import ErrorBoundaryWrapper from './error-boundary';
-import ExpandableSectionWrapper from './expandable-section';
-import FileDropzoneWrapper from './file-dropzone';
-import FileInputWrapper from './file-input';
-import FileTokenGroupWrapper from './file-token-group';
-import FileUploadWrapper from './file-upload';
-import FlashbarWrapper from './flashbar';
-import FormWrapper from './form';
-import FormFieldWrapper from './form-field';
-import GridWrapper from './grid';
-import HeaderWrapper from './header';
-import HelpPanelWrapper from './help-panel';
-import HotspotWrapper from './hotspot';
-import IconWrapper from './icon';
-import InputWrapper from './input';
-import ItemCardWrapper from './item-card';
-import KeyValuePairsWrapper from './key-value-pairs';
-import LineChartWrapper from './line-chart';
-import LinkWrapper from './link';
-import ListWrapper from './list';
-import LiveRegionWrapper from './live-region';
-import MixedLineBarChartWrapper from './mixed-line-bar-chart';
-import ModalWrapper from './modal';
-import MultiselectWrapper from './multiselect';
-import NavigableGroupWrapper from './navigable-group';
-import PaginationWrapper from './pagination';
-import PanelLayoutWrapper from './panel-layout';
-import PieChartWrapper from './pie-chart';
-import PopoverWrapper from './popover';
-import ProgressBarWrapper from './progress-bar';
-import PromptInputWrapper from './prompt-input';
-import PropertyFilterWrapper from './property-filter';
-import RadioButtonWrapper from './radio-button';
-import RadioGroupWrapper from './radio-group';
-import S3ResourceSelectorWrapper from './s3-resource-selector';
-import SegmentedControlWrapper from './segmented-control';
-import SelectWrapper from './select';
-import SideNavigationWrapper from './side-navigation';
-import SkeletonWrapper from './skeleton';
-import SliderWrapper from './slider';
-import SpaceBetweenWrapper from './space-between';
-import SpinnerWrapper from './spinner';
-import SplitPanelWrapper from './split-panel';
-import StatusIndicatorWrapper from './status-indicator';
-import StepsWrapper from './steps';
-import TableWrapper from './table';
-import TabsWrapper from './tabs';
-import TagEditorWrapper from './tag-editor';
-import TextContentWrapper from './text-content';
-import TextFilterWrapper from './text-filter';
-import TextareaWrapper from './textarea';
-import TilesWrapper from './tiles';
-import TimeInputWrapper from './time-input';
-import ToggleWrapper from './toggle';
-import ToggleButtonWrapper from './toggle-button';
-import TokenWrapper from './token';
-import TokenGroupWrapper from './token-group';
-import TooltipWrapper from './tooltip';
-import TopNavigationWrapper from './top-navigation';
-import TreeViewWrapper from './tree-view';
-import TruncatedTextWrapper from './truncated-text';
-import TutorialPanelWrapper from './tutorial-panel';
-import WizardWrapper from './wizard';
-
-
-export { ActionCardWrapper };
-export { AlertWrapper };
-export { AnchorNavigationWrapper };
-export { AnnotationWrapper };
-export { AppLayoutWrapper };
-export { AppLayoutToolbarWrapper };
-export { AreaChartWrapper };
-export { AttributeEditorWrapper };
-export { AutosuggestWrapper };
-export { BadgeWrapper };
-export { BarChartWrapper };
-export { BoxWrapper };
-export { BreadcrumbGroupWrapper };
-export { ButtonWrapper };
-export { ButtonDropdownWrapper };
-export { ButtonGroupWrapper };
-export { CalendarWrapper };
-export { CardsWrapper };
-export { CheckboxWrapper };
-export { CodeEditorWrapper };
-export { CollectionPreferencesWrapper };
-export { ColumnLayoutWrapper };
-export { ContainerWrapper };
-export { ContentLayoutWrapper };
-export { CopyToClipboardWrapper };
-export { DateInputWrapper };
-export { DatePickerWrapper };
-export { DateRangePickerWrapper };
-export { DividerWrapper };
-export { DrawerWrapper };
-export { DropdownWrapper };
-export { ErrorBoundaryWrapper };
-export { ExpandableSectionWrapper };
-export { FileDropzoneWrapper };
-export { FileInputWrapper };
-export { FileTokenGroupWrapper };
-export { FileUploadWrapper };
-export { FlashbarWrapper };
-export { FormWrapper };
-export { FormFieldWrapper };
-export { GridWrapper };
-export { HeaderWrapper };
-export { HelpPanelWrapper };
-export { HotspotWrapper };
-export { IconWrapper };
-export { InputWrapper };
-export { ItemCardWrapper };
-export { KeyValuePairsWrapper };
-export { LineChartWrapper };
-export { LinkWrapper };
-export { ListWrapper };
-export { LiveRegionWrapper };
-export { MixedLineBarChartWrapper };
-export { ModalWrapper };
-export { MultiselectWrapper };
-export { NavigableGroupWrapper };
-export { PaginationWrapper };
-export { PanelLayoutWrapper };
-export { PieChartWrapper };
-export { PopoverWrapper };
-export { ProgressBarWrapper };
-export { PromptInputWrapper };
-export { PropertyFilterWrapper };
-export { RadioButtonWrapper };
-export { RadioGroupWrapper };
-export { S3ResourceSelectorWrapper };
-export { SegmentedControlWrapper };
-export { SelectWrapper };
-export { SideNavigationWrapper };
-export { SkeletonWrapper };
-export { SliderWrapper };
-export { SpaceBetweenWrapper };
-export { SpinnerWrapper };
-export { SplitPanelWrapper };
-export { StatusIndicatorWrapper };
-export { StepsWrapper };
-export { TableWrapper };
-export { TabsWrapper };
-export { TagEditorWrapper };
-export { TextContentWrapper };
-export { TextFilterWrapper };
-export { TextareaWrapper };
-export { TilesWrapper };
-export { TimeInputWrapper };
-export { ToggleWrapper };
-export { ToggleButtonWrapper };
-export { TokenWrapper };
-export { TokenGroupWrapper };
-export { TooltipWrapper };
-export { TopNavigationWrapper };
-export { TreeViewWrapper };
-export { TruncatedTextWrapper };
-export { TutorialPanelWrapper };
-export { WizardWrapper };
-
-declare module '@cloudscape-design/test-utils-core/dist/dom' {
-   interface ElementWrapper {
-    
-/**
- * Returns the wrapper of the first ActionCard that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ActionCard.
- * If no matching ActionCard is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ActionCardWrapper | null}
- */
-findActionCard(selector?: string): ActionCardWrapper | null;
-
-/**
- * Returns an array of ActionCard wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ActionCards inside the current wrapper.
- * If no matching ActionCard is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ActionCardWrapper>}
- */
-findAllActionCards(selector?: string): Array<ActionCardWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ActionCard for the current element,
- * or the element itself if it is an instance of ActionCard.
- * If no ActionCard is found, returns \`null\`.
- *
- * @returns {ActionCardWrapper | null}
- */
-findClosestActionCard(): ActionCardWrapper | null;
-/**
- * Returns the wrapper of the first Alert that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Alert.
- * If no matching Alert is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AlertWrapper | null}
- */
-findAlert(selector?: string): AlertWrapper | null;
-
-/**
- * Returns an array of Alert wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Alerts inside the current wrapper.
- * If no matching Alert is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AlertWrapper>}
- */
-findAllAlerts(selector?: string): Array<AlertWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Alert for the current element,
- * or the element itself if it is an instance of Alert.
- * If no Alert is found, returns \`null\`.
- *
- * @returns {AlertWrapper | null}
- */
-findClosestAlert(): AlertWrapper | null;
-/**
- * Returns the wrapper of the first AnchorNavigation that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first AnchorNavigation.
- * If no matching AnchorNavigation is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AnchorNavigationWrapper | null}
- */
-findAnchorNavigation(selector?: string): AnchorNavigationWrapper | null;
-
-/**
- * Returns an array of AnchorNavigation wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the AnchorNavigations inside the current wrapper.
- * If no matching AnchorNavigation is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AnchorNavigationWrapper>}
- */
-findAllAnchorNavigations(selector?: string): Array<AnchorNavigationWrapper>;
-
-/**
- * Returns the wrapper of the closest parent AnchorNavigation for the current element,
- * or the element itself if it is an instance of AnchorNavigation.
- * If no AnchorNavigation is found, returns \`null\`.
- *
- * @returns {AnchorNavigationWrapper | null}
- */
-findClosestAnchorNavigation(): AnchorNavigationWrapper | null;
-/**
- * Returns the wrapper of the first Annotation that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Annotation.
- * If no matching Annotation is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AnnotationWrapper | null}
- */
-findAnnotation(selector?: string): AnnotationWrapper | null;
-
-/**
- * Returns an array of Annotation wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Annotations inside the current wrapper.
- * If no matching Annotation is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AnnotationWrapper>}
- */
-findAllAnnotations(selector?: string): Array<AnnotationWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Annotation for the current element,
- * or the element itself if it is an instance of Annotation.
- * If no Annotation is found, returns \`null\`.
- *
- * @returns {AnnotationWrapper | null}
- */
-findClosestAnnotation(): AnnotationWrapper | null;
-/**
- * Returns the wrapper of the first AppLayout that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first AppLayout.
- * If no matching AppLayout is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AppLayoutWrapper | null}
- */
-findAppLayout(selector?: string): AppLayoutWrapper | null;
-
-/**
- * Returns an array of AppLayout wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the AppLayouts inside the current wrapper.
- * If no matching AppLayout is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AppLayoutWrapper>}
- */
-findAllAppLayouts(selector?: string): Array<AppLayoutWrapper>;
-
-/**
- * Returns the wrapper of the closest parent AppLayout for the current element,
- * or the element itself if it is an instance of AppLayout.
- * If no AppLayout is found, returns \`null\`.
- *
- * @returns {AppLayoutWrapper | null}
- */
-findClosestAppLayout(): AppLayoutWrapper | null;
-/**
- * Returns the wrapper of the first AppLayoutToolbar that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first AppLayoutToolbar.
- * If no matching AppLayoutToolbar is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AppLayoutToolbarWrapper | null}
- */
-findAppLayoutToolbar(selector?: string): AppLayoutToolbarWrapper | null;
-
-/**
- * Returns an array of AppLayoutToolbar wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the AppLayoutToolbars inside the current wrapper.
- * If no matching AppLayoutToolbar is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AppLayoutToolbarWrapper>}
- */
-findAllAppLayoutToolbars(selector?: string): Array<AppLayoutToolbarWrapper>;
-
-/**
- * Returns the wrapper of the closest parent AppLayoutToolbar for the current element,
- * or the element itself if it is an instance of AppLayoutToolbar.
- * If no AppLayoutToolbar is found, returns \`null\`.
- *
- * @returns {AppLayoutToolbarWrapper | null}
- */
-findClosestAppLayoutToolbar(): AppLayoutToolbarWrapper | null;
-/**
- * Returns the wrapper of the first AreaChart that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first AreaChart.
- * If no matching AreaChart is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AreaChartWrapper | null}
- */
-findAreaChart(selector?: string): AreaChartWrapper | null;
-
-/**
- * Returns an array of AreaChart wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the AreaCharts inside the current wrapper.
- * If no matching AreaChart is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AreaChartWrapper>}
- */
-findAllAreaCharts(selector?: string): Array<AreaChartWrapper>;
-
-/**
- * Returns the wrapper of the closest parent AreaChart for the current element,
- * or the element itself if it is an instance of AreaChart.
- * If no AreaChart is found, returns \`null\`.
- *
- * @returns {AreaChartWrapper | null}
- */
-findClosestAreaChart(): AreaChartWrapper | null;
-/**
- * Returns the wrapper of the first AttributeEditor that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first AttributeEditor.
- * If no matching AttributeEditor is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AttributeEditorWrapper | null}
- */
-findAttributeEditor(selector?: string): AttributeEditorWrapper | null;
-
-/**
- * Returns an array of AttributeEditor wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the AttributeEditors inside the current wrapper.
- * If no matching AttributeEditor is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AttributeEditorWrapper>}
- */
-findAllAttributeEditors(selector?: string): Array<AttributeEditorWrapper>;
-
-/**
- * Returns the wrapper of the closest parent AttributeEditor for the current element,
- * or the element itself if it is an instance of AttributeEditor.
- * If no AttributeEditor is found, returns \`null\`.
- *
- * @returns {AttributeEditorWrapper | null}
- */
-findClosestAttributeEditor(): AttributeEditorWrapper | null;
-/**
- * Returns the wrapper of the first Autosuggest that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Autosuggest.
- * If no matching Autosuggest is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {AutosuggestWrapper | null}
- */
-findAutosuggest(selector?: string): AutosuggestWrapper | null;
-
-/**
- * Returns an array of Autosuggest wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Autosuggests inside the current wrapper.
- * If no matching Autosuggest is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<AutosuggestWrapper>}
- */
-findAllAutosuggests(selector?: string): Array<AutosuggestWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Autosuggest for the current element,
- * or the element itself if it is an instance of Autosuggest.
- * If no Autosuggest is found, returns \`null\`.
- *
- * @returns {AutosuggestWrapper | null}
- */
-findClosestAutosuggest(): AutosuggestWrapper | null;
-/**
- * Returns the wrapper of the first Badge that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Badge.
- * If no matching Badge is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {BadgeWrapper | null}
- */
-findBadge(selector?: string): BadgeWrapper | null;
-
-/**
- * Returns an array of Badge wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Badges inside the current wrapper.
- * If no matching Badge is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<BadgeWrapper>}
- */
-findAllBadges(selector?: string): Array<BadgeWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Badge for the current element,
- * or the element itself if it is an instance of Badge.
- * If no Badge is found, returns \`null\`.
- *
- * @returns {BadgeWrapper | null}
- */
-findClosestBadge(): BadgeWrapper | null;
-/**
- * Returns the wrapper of the first BarChart that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first BarChart.
- * If no matching BarChart is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {BarChartWrapper | null}
- */
-findBarChart(selector?: string): BarChartWrapper | null;
-
-/**
- * Returns an array of BarChart wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the BarCharts inside the current wrapper.
- * If no matching BarChart is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<BarChartWrapper>}
- */
-findAllBarCharts(selector?: string): Array<BarChartWrapper>;
-
-/**
- * Returns the wrapper of the closest parent BarChart for the current element,
- * or the element itself if it is an instance of BarChart.
- * If no BarChart is found, returns \`null\`.
- *
- * @returns {BarChartWrapper | null}
- */
-findClosestBarChart(): BarChartWrapper | null;
-/**
- * Returns the wrapper of the first Box that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Box.
- * If no matching Box is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {BoxWrapper | null}
- */
-findBox(selector?: string): BoxWrapper | null;
-
-/**
- * Returns an array of Box wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Boxes inside the current wrapper.
- * If no matching Box is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<BoxWrapper>}
- */
-findAllBoxes(selector?: string): Array<BoxWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Box for the current element,
- * or the element itself if it is an instance of Box.
- * If no Box is found, returns \`null\`.
- *
- * @returns {BoxWrapper | null}
- */
-findClosestBox(): BoxWrapper | null;
-/**
- * Returns the wrapper of the first BreadcrumbGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first BreadcrumbGroup.
- * If no matching BreadcrumbGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {BreadcrumbGroupWrapper | null}
- */
-findBreadcrumbGroup(selector?: string): BreadcrumbGroupWrapper | null;
-
-/**
- * Returns an array of BreadcrumbGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the BreadcrumbGroups inside the current wrapper.
- * If no matching BreadcrumbGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<BreadcrumbGroupWrapper>}
- */
-findAllBreadcrumbGroups(selector?: string): Array<BreadcrumbGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent BreadcrumbGroup for the current element,
- * or the element itself if it is an instance of BreadcrumbGroup.
- * If no BreadcrumbGroup is found, returns \`null\`.
- *
- * @returns {BreadcrumbGroupWrapper | null}
- */
-findClosestBreadcrumbGroup(): BreadcrumbGroupWrapper | null;
-/**
- * Returns the wrapper of the first Button that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Button.
- * If no matching Button is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ButtonWrapper | null}
- */
-findButton(selector?: string): ButtonWrapper | null;
-
-/**
- * Returns an array of Button wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Buttons inside the current wrapper.
- * If no matching Button is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ButtonWrapper>}
- */
-findAllButtons(selector?: string): Array<ButtonWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Button for the current element,
- * or the element itself if it is an instance of Button.
- * If no Button is found, returns \`null\`.
- *
- * @returns {ButtonWrapper | null}
- */
-findClosestButton(): ButtonWrapper | null;
-/**
- * Returns the wrapper of the first ButtonDropdown that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ButtonDropdown.
- * If no matching ButtonDropdown is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ButtonDropdownWrapper | null}
- */
-findButtonDropdown(selector?: string): ButtonDropdownWrapper | null;
-
-/**
- * Returns an array of ButtonDropdown wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ButtonDropdowns inside the current wrapper.
- * If no matching ButtonDropdown is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ButtonDropdownWrapper>}
- */
-findAllButtonDropdowns(selector?: string): Array<ButtonDropdownWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ButtonDropdown for the current element,
- * or the element itself if it is an instance of ButtonDropdown.
- * If no ButtonDropdown is found, returns \`null\`.
- *
- * @returns {ButtonDropdownWrapper | null}
- */
-findClosestButtonDropdown(): ButtonDropdownWrapper | null;
-/**
- * Returns the wrapper of the first ButtonGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ButtonGroup.
- * If no matching ButtonGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ButtonGroupWrapper | null}
- */
-findButtonGroup(selector?: string): ButtonGroupWrapper | null;
-
-/**
- * Returns an array of ButtonGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ButtonGroups inside the current wrapper.
- * If no matching ButtonGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ButtonGroupWrapper>}
- */
-findAllButtonGroups(selector?: string): Array<ButtonGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ButtonGroup for the current element,
- * or the element itself if it is an instance of ButtonGroup.
- * If no ButtonGroup is found, returns \`null\`.
- *
- * @returns {ButtonGroupWrapper | null}
- */
-findClosestButtonGroup(): ButtonGroupWrapper | null;
-/**
- * Returns the wrapper of the first Calendar that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Calendar.
- * If no matching Calendar is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CalendarWrapper | null}
- */
-findCalendar(selector?: string): CalendarWrapper | null;
-
-/**
- * Returns an array of Calendar wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Calendars inside the current wrapper.
- * If no matching Calendar is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CalendarWrapper>}
- */
-findAllCalendars(selector?: string): Array<CalendarWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Calendar for the current element,
- * or the element itself if it is an instance of Calendar.
- * If no Calendar is found, returns \`null\`.
- *
- * @returns {CalendarWrapper | null}
- */
-findClosestCalendar(): CalendarWrapper | null;
-/**
- * Returns the wrapper of the first Cards that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Cards.
- * If no matching Cards is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CardsWrapper | null}
- */
-findCards(selector?: string): CardsWrapper | null;
-
-/**
- * Returns an array of Cards wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Cards inside the current wrapper.
- * If no matching Cards is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CardsWrapper>}
- */
-findAllCards(selector?: string): Array<CardsWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Cards for the current element,
- * or the element itself if it is an instance of Cards.
- * If no Cards is found, returns \`null\`.
- *
- * @returns {CardsWrapper | null}
- */
-findClosestCards(): CardsWrapper | null;
-/**
- * Returns the wrapper of the first Checkbox that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Checkbox.
- * If no matching Checkbox is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CheckboxWrapper | null}
- */
-findCheckbox(selector?: string): CheckboxWrapper | null;
-
-/**
- * Returns an array of Checkbox wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Checkboxes inside the current wrapper.
- * If no matching Checkbox is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CheckboxWrapper>}
- */
-findAllCheckboxes(selector?: string): Array<CheckboxWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Checkbox for the current element,
- * or the element itself if it is an instance of Checkbox.
- * If no Checkbox is found, returns \`null\`.
- *
- * @returns {CheckboxWrapper | null}
- */
-findClosestCheckbox(): CheckboxWrapper | null;
-/**
- * Returns the wrapper of the first CodeEditor that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first CodeEditor.
- * If no matching CodeEditor is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CodeEditorWrapper | null}
- */
-findCodeEditor(selector?: string): CodeEditorWrapper | null;
-
-/**
- * Returns an array of CodeEditor wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the CodeEditors inside the current wrapper.
- * If no matching CodeEditor is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CodeEditorWrapper>}
- */
-findAllCodeEditors(selector?: string): Array<CodeEditorWrapper>;
-
-/**
- * Returns the wrapper of the closest parent CodeEditor for the current element,
- * or the element itself if it is an instance of CodeEditor.
- * If no CodeEditor is found, returns \`null\`.
- *
- * @returns {CodeEditorWrapper | null}
- */
-findClosestCodeEditor(): CodeEditorWrapper | null;
-/**
- * Returns the wrapper of the first CollectionPreferences that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first CollectionPreferences.
- * If no matching CollectionPreferences is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CollectionPreferencesWrapper | null}
- */
-findCollectionPreferences(selector?: string): CollectionPreferencesWrapper | null;
-
-/**
- * Returns an array of CollectionPreferences wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the CollectionPreferences inside the current wrapper.
- * If no matching CollectionPreferences is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CollectionPreferencesWrapper>}
- */
-findAllCollectionPreferences(selector?: string): Array<CollectionPreferencesWrapper>;
-
-/**
- * Returns the wrapper of the closest parent CollectionPreferences for the current element,
- * or the element itself if it is an instance of CollectionPreferences.
- * If no CollectionPreferences is found, returns \`null\`.
- *
- * @returns {CollectionPreferencesWrapper | null}
- */
-findClosestCollectionPreferences(): CollectionPreferencesWrapper | null;
-/**
- * Returns the wrapper of the first ColumnLayout that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ColumnLayout.
- * If no matching ColumnLayout is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ColumnLayoutWrapper | null}
- */
-findColumnLayout(selector?: string): ColumnLayoutWrapper | null;
-
-/**
- * Returns an array of ColumnLayout wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ColumnLayouts inside the current wrapper.
- * If no matching ColumnLayout is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ColumnLayoutWrapper>}
- */
-findAllColumnLayouts(selector?: string): Array<ColumnLayoutWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ColumnLayout for the current element,
- * or the element itself if it is an instance of ColumnLayout.
- * If no ColumnLayout is found, returns \`null\`.
- *
- * @returns {ColumnLayoutWrapper | null}
- */
-findClosestColumnLayout(): ColumnLayoutWrapper | null;
-/**
- * Returns the wrapper of the first Container that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Container.
- * If no matching Container is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ContainerWrapper | null}
- */
-findContainer(selector?: string): ContainerWrapper | null;
-
-/**
- * Returns an array of Container wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Containers inside the current wrapper.
- * If no matching Container is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ContainerWrapper>}
- */
-findAllContainers(selector?: string): Array<ContainerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Container for the current element,
- * or the element itself if it is an instance of Container.
- * If no Container is found, returns \`null\`.
- *
- * @returns {ContainerWrapper | null}
- */
-findClosestContainer(): ContainerWrapper | null;
-/**
- * Returns the wrapper of the first ContentLayout that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ContentLayout.
- * If no matching ContentLayout is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ContentLayoutWrapper | null}
- */
-findContentLayout(selector?: string): ContentLayoutWrapper | null;
-
-/**
- * Returns an array of ContentLayout wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ContentLayouts inside the current wrapper.
- * If no matching ContentLayout is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ContentLayoutWrapper>}
- */
-findAllContentLayouts(selector?: string): Array<ContentLayoutWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ContentLayout for the current element,
- * or the element itself if it is an instance of ContentLayout.
- * If no ContentLayout is found, returns \`null\`.
- *
- * @returns {ContentLayoutWrapper | null}
- */
-findClosestContentLayout(): ContentLayoutWrapper | null;
-/**
- * Returns the wrapper of the first CopyToClipboard that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first CopyToClipboard.
- * If no matching CopyToClipboard is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {CopyToClipboardWrapper | null}
- */
-findCopyToClipboard(selector?: string): CopyToClipboardWrapper | null;
-
-/**
- * Returns an array of CopyToClipboard wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the CopyToClipboards inside the current wrapper.
- * If no matching CopyToClipboard is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<CopyToClipboardWrapper>}
- */
-findAllCopyToClipboards(selector?: string): Array<CopyToClipboardWrapper>;
-
-/**
- * Returns the wrapper of the closest parent CopyToClipboard for the current element,
- * or the element itself if it is an instance of CopyToClipboard.
- * If no CopyToClipboard is found, returns \`null\`.
- *
- * @returns {CopyToClipboardWrapper | null}
- */
-findClosestCopyToClipboard(): CopyToClipboardWrapper | null;
-/**
- * Returns the wrapper of the first DateInput that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first DateInput.
- * If no matching DateInput is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DateInputWrapper | null}
- */
-findDateInput(selector?: string): DateInputWrapper | null;
-
-/**
- * Returns an array of DateInput wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the DateInputs inside the current wrapper.
- * If no matching DateInput is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DateInputWrapper>}
- */
-findAllDateInputs(selector?: string): Array<DateInputWrapper>;
-
-/**
- * Returns the wrapper of the closest parent DateInput for the current element,
- * or the element itself if it is an instance of DateInput.
- * If no DateInput is found, returns \`null\`.
- *
- * @returns {DateInputWrapper | null}
- */
-findClosestDateInput(): DateInputWrapper | null;
-/**
- * Returns the wrapper of the first DatePicker that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first DatePicker.
- * If no matching DatePicker is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DatePickerWrapper | null}
- */
-findDatePicker(selector?: string): DatePickerWrapper | null;
-
-/**
- * Returns an array of DatePicker wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the DatePickers inside the current wrapper.
- * If no matching DatePicker is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DatePickerWrapper>}
- */
-findAllDatePickers(selector?: string): Array<DatePickerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent DatePicker for the current element,
- * or the element itself if it is an instance of DatePicker.
- * If no DatePicker is found, returns \`null\`.
- *
- * @returns {DatePickerWrapper | null}
- */
-findClosestDatePicker(): DatePickerWrapper | null;
-/**
- * Returns the wrapper of the first DateRangePicker that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first DateRangePicker.
- * If no matching DateRangePicker is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DateRangePickerWrapper | null}
- */
-findDateRangePicker(selector?: string): DateRangePickerWrapper | null;
-
-/**
- * Returns an array of DateRangePicker wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the DateRangePickers inside the current wrapper.
- * If no matching DateRangePicker is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DateRangePickerWrapper>}
- */
-findAllDateRangePickers(selector?: string): Array<DateRangePickerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent DateRangePicker for the current element,
- * or the element itself if it is an instance of DateRangePicker.
- * If no DateRangePicker is found, returns \`null\`.
- *
- * @returns {DateRangePickerWrapper | null}
- */
-findClosestDateRangePicker(): DateRangePickerWrapper | null;
-/**
- * Returns the wrapper of the first Divider that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Divider.
- * If no matching Divider is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DividerWrapper | null}
- */
-findDivider(selector?: string): DividerWrapper | null;
-
-/**
- * Returns an array of Divider wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Dividers inside the current wrapper.
- * If no matching Divider is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DividerWrapper>}
- */
-findAllDividers(selector?: string): Array<DividerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Divider for the current element,
- * or the element itself if it is an instance of Divider.
- * If no Divider is found, returns \`null\`.
- *
- * @returns {DividerWrapper | null}
- */
-findClosestDivider(): DividerWrapper | null;
-/**
- * Returns the wrapper of the first Drawer that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Drawer.
- * If no matching Drawer is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DrawerWrapper | null}
- */
-findDrawer(selector?: string): DrawerWrapper | null;
-
-/**
- * Returns an array of Drawer wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Drawers inside the current wrapper.
- * If no matching Drawer is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DrawerWrapper>}
- */
-findAllDrawers(selector?: string): Array<DrawerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Drawer for the current element,
- * or the element itself if it is an instance of Drawer.
- * If no Drawer is found, returns \`null\`.
- *
- * @returns {DrawerWrapper | null}
- */
-findClosestDrawer(): DrawerWrapper | null;
-/**
- * Returns the wrapper of the first Dropdown that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Dropdown.
- * If no matching Dropdown is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {DropdownWrapper | null}
- */
-findDropdown(selector?: string): DropdownWrapper | null;
-
-/**
- * Returns an array of Dropdown wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Dropdowns inside the current wrapper.
- * If no matching Dropdown is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<DropdownWrapper>}
- */
-findAllDropdowns(selector?: string): Array<DropdownWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Dropdown for the current element,
- * or the element itself if it is an instance of Dropdown.
- * If no Dropdown is found, returns \`null\`.
- *
- * @returns {DropdownWrapper | null}
- */
-findClosestDropdown(): DropdownWrapper | null;
-/**
- * Returns the wrapper of the first ErrorBoundary that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ErrorBoundary.
- * If no matching ErrorBoundary is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ErrorBoundaryWrapper | null}
- */
-findErrorBoundary(selector?: string): ErrorBoundaryWrapper | null;
-
-/**
- * Returns an array of ErrorBoundary wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ErrorBoundaries inside the current wrapper.
- * If no matching ErrorBoundary is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ErrorBoundaryWrapper>}
- */
-findAllErrorBoundaries(selector?: string): Array<ErrorBoundaryWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ErrorBoundary for the current element,
- * or the element itself if it is an instance of ErrorBoundary.
- * If no ErrorBoundary is found, returns \`null\`.
- *
- * @returns {ErrorBoundaryWrapper | null}
- */
-findClosestErrorBoundary(): ErrorBoundaryWrapper | null;
-/**
- * Returns the wrapper of the first ExpandableSection that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ExpandableSection.
- * If no matching ExpandableSection is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ExpandableSectionWrapper | null}
- */
-findExpandableSection(selector?: string): ExpandableSectionWrapper | null;
-
-/**
- * Returns an array of ExpandableSection wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ExpandableSections inside the current wrapper.
- * If no matching ExpandableSection is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ExpandableSectionWrapper>}
- */
-findAllExpandableSections(selector?: string): Array<ExpandableSectionWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ExpandableSection for the current element,
- * or the element itself if it is an instance of ExpandableSection.
- * If no ExpandableSection is found, returns \`null\`.
- *
- * @returns {ExpandableSectionWrapper | null}
- */
-findClosestExpandableSection(): ExpandableSectionWrapper | null;
-/**
- * Returns the wrapper of the first FileDropzone that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first FileDropzone.
- * If no matching FileDropzone is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FileDropzoneWrapper | null}
- */
-findFileDropzone(selector?: string): FileDropzoneWrapper | null;
-
-/**
- * Returns an array of FileDropzone wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the FileDropzones inside the current wrapper.
- * If no matching FileDropzone is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FileDropzoneWrapper>}
- */
-findAllFileDropzones(selector?: string): Array<FileDropzoneWrapper>;
-
-/**
- * Returns the wrapper of the closest parent FileDropzone for the current element,
- * or the element itself if it is an instance of FileDropzone.
- * If no FileDropzone is found, returns \`null\`.
- *
- * @returns {FileDropzoneWrapper | null}
- */
-findClosestFileDropzone(): FileDropzoneWrapper | null;
-/**
- * Returns the wrapper of the first FileInput that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first FileInput.
- * If no matching FileInput is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FileInputWrapper | null}
- */
-findFileInput(selector?: string): FileInputWrapper | null;
-
-/**
- * Returns an array of FileInput wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the FileInputs inside the current wrapper.
- * If no matching FileInput is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FileInputWrapper>}
- */
-findAllFileInputs(selector?: string): Array<FileInputWrapper>;
-
-/**
- * Returns the wrapper of the closest parent FileInput for the current element,
- * or the element itself if it is an instance of FileInput.
- * If no FileInput is found, returns \`null\`.
- *
- * @returns {FileInputWrapper | null}
- */
-findClosestFileInput(): FileInputWrapper | null;
-/**
- * Returns the wrapper of the first FileTokenGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first FileTokenGroup.
- * If no matching FileTokenGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FileTokenGroupWrapper | null}
- */
-findFileTokenGroup(selector?: string): FileTokenGroupWrapper | null;
-
-/**
- * Returns an array of FileTokenGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the FileTokenGroups inside the current wrapper.
- * If no matching FileTokenGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FileTokenGroupWrapper>}
- */
-findAllFileTokenGroups(selector?: string): Array<FileTokenGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent FileTokenGroup for the current element,
- * or the element itself if it is an instance of FileTokenGroup.
- * If no FileTokenGroup is found, returns \`null\`.
- *
- * @returns {FileTokenGroupWrapper | null}
- */
-findClosestFileTokenGroup(): FileTokenGroupWrapper | null;
-/**
- * Returns the wrapper of the first FileUpload that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first FileUpload.
- * If no matching FileUpload is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FileUploadWrapper | null}
- */
-findFileUpload(selector?: string): FileUploadWrapper | null;
-
-/**
- * Returns an array of FileUpload wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the FileUploads inside the current wrapper.
- * If no matching FileUpload is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FileUploadWrapper>}
- */
-findAllFileUploads(selector?: string): Array<FileUploadWrapper>;
-
-/**
- * Returns the wrapper of the closest parent FileUpload for the current element,
- * or the element itself if it is an instance of FileUpload.
- * If no FileUpload is found, returns \`null\`.
- *
- * @returns {FileUploadWrapper | null}
- */
-findClosestFileUpload(): FileUploadWrapper | null;
-/**
- * Returns the wrapper of the first Flashbar that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Flashbar.
- * If no matching Flashbar is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FlashbarWrapper | null}
- */
-findFlashbar(selector?: string): FlashbarWrapper | null;
-
-/**
- * Returns an array of Flashbar wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Flashbars inside the current wrapper.
- * If no matching Flashbar is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FlashbarWrapper>}
- */
-findAllFlashbars(selector?: string): Array<FlashbarWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Flashbar for the current element,
- * or the element itself if it is an instance of Flashbar.
- * If no Flashbar is found, returns \`null\`.
- *
- * @returns {FlashbarWrapper | null}
- */
-findClosestFlashbar(): FlashbarWrapper | null;
-/**
- * Returns the wrapper of the first Form that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Form.
- * If no matching Form is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FormWrapper | null}
- */
-findForm(selector?: string): FormWrapper | null;
-
-/**
- * Returns an array of Form wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Forms inside the current wrapper.
- * If no matching Form is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FormWrapper>}
- */
-findAllForms(selector?: string): Array<FormWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Form for the current element,
- * or the element itself if it is an instance of Form.
- * If no Form is found, returns \`null\`.
- *
- * @returns {FormWrapper | null}
- */
-findClosestForm(): FormWrapper | null;
-/**
- * Returns the wrapper of the first FormField that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first FormField.
- * If no matching FormField is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {FormFieldWrapper | null}
- */
-findFormField(selector?: string): FormFieldWrapper | null;
-
-/**
- * Returns an array of FormField wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the FormFields inside the current wrapper.
- * If no matching FormField is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<FormFieldWrapper>}
- */
-findAllFormFields(selector?: string): Array<FormFieldWrapper>;
-
-/**
- * Returns the wrapper of the closest parent FormField for the current element,
- * or the element itself if it is an instance of FormField.
- * If no FormField is found, returns \`null\`.
- *
- * @returns {FormFieldWrapper | null}
- */
-findClosestFormField(): FormFieldWrapper | null;
-/**
- * Returns the wrapper of the first Grid that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Grid.
- * If no matching Grid is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {GridWrapper | null}
- */
-findGrid(selector?: string): GridWrapper | null;
-
-/**
- * Returns an array of Grid wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Grids inside the current wrapper.
- * If no matching Grid is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<GridWrapper>}
- */
-findAllGrids(selector?: string): Array<GridWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Grid for the current element,
- * or the element itself if it is an instance of Grid.
- * If no Grid is found, returns \`null\`.
- *
- * @returns {GridWrapper | null}
- */
-findClosestGrid(): GridWrapper | null;
-/**
- * Returns the wrapper of the first Header that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Header.
- * If no matching Header is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {HeaderWrapper | null}
- */
-findHeader(selector?: string): HeaderWrapper | null;
-
-/**
- * Returns an array of Header wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Headers inside the current wrapper.
- * If no matching Header is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<HeaderWrapper>}
- */
-findAllHeaders(selector?: string): Array<HeaderWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Header for the current element,
- * or the element itself if it is an instance of Header.
- * If no Header is found, returns \`null\`.
- *
- * @returns {HeaderWrapper | null}
- */
-findClosestHeader(): HeaderWrapper | null;
-/**
- * Returns the wrapper of the first HelpPanel that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first HelpPanel.
- * If no matching HelpPanel is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {HelpPanelWrapper | null}
- */
-findHelpPanel(selector?: string): HelpPanelWrapper | null;
-
-/**
- * Returns an array of HelpPanel wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the HelpPanels inside the current wrapper.
- * If no matching HelpPanel is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<HelpPanelWrapper>}
- */
-findAllHelpPanels(selector?: string): Array<HelpPanelWrapper>;
-
-/**
- * Returns the wrapper of the closest parent HelpPanel for the current element,
- * or the element itself if it is an instance of HelpPanel.
- * If no HelpPanel is found, returns \`null\`.
- *
- * @returns {HelpPanelWrapper | null}
- */
-findClosestHelpPanel(): HelpPanelWrapper | null;
-/**
- * Returns the wrapper of the first Hotspot that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Hotspot.
- * If no matching Hotspot is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {HotspotWrapper | null}
- */
-findHotspot(selector?: string): HotspotWrapper | null;
-
-/**
- * Returns an array of Hotspot wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Hotspots inside the current wrapper.
- * If no matching Hotspot is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<HotspotWrapper>}
- */
-findAllHotspots(selector?: string): Array<HotspotWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Hotspot for the current element,
- * or the element itself if it is an instance of Hotspot.
- * If no Hotspot is found, returns \`null\`.
- *
- * @returns {HotspotWrapper | null}
- */
-findClosestHotspot(): HotspotWrapper | null;
-/**
- * Returns the wrapper of the first Icon that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Icon.
- * If no matching Icon is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {IconWrapper | null}
- */
-findIcon(selector?: string): IconWrapper | null;
-
-/**
- * Returns an array of Icon wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Icons inside the current wrapper.
- * If no matching Icon is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<IconWrapper>}
- */
-findAllIcons(selector?: string): Array<IconWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Icon for the current element,
- * or the element itself if it is an instance of Icon.
- * If no Icon is found, returns \`null\`.
- *
- * @returns {IconWrapper | null}
- */
-findClosestIcon(): IconWrapper | null;
-/**
- * Returns the wrapper of the first Input that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Input.
- * If no matching Input is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {InputWrapper | null}
- */
-findInput(selector?: string): InputWrapper | null;
-
-/**
- * Returns an array of Input wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Inputs inside the current wrapper.
- * If no matching Input is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<InputWrapper>}
- */
-findAllInputs(selector?: string): Array<InputWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Input for the current element,
- * or the element itself if it is an instance of Input.
- * If no Input is found, returns \`null\`.
- *
- * @returns {InputWrapper | null}
- */
-findClosestInput(): InputWrapper | null;
-/**
- * Returns the wrapper of the first ItemCard that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ItemCard.
- * If no matching ItemCard is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ItemCardWrapper | null}
- */
-findItemCard(selector?: string): ItemCardWrapper | null;
-
-/**
- * Returns an array of ItemCard wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ItemCards inside the current wrapper.
- * If no matching ItemCard is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ItemCardWrapper>}
- */
-findAllItemCards(selector?: string): Array<ItemCardWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ItemCard for the current element,
- * or the element itself if it is an instance of ItemCard.
- * If no ItemCard is found, returns \`null\`.
- *
- * @returns {ItemCardWrapper | null}
- */
-findClosestItemCard(): ItemCardWrapper | null;
-/**
- * Returns the wrapper of the first KeyValuePairs that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first KeyValuePairs.
- * If no matching KeyValuePairs is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {KeyValuePairsWrapper | null}
- */
-findKeyValuePairs(selector?: string): KeyValuePairsWrapper | null;
-
-/**
- * Returns an array of KeyValuePairs wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the KeyValuePairs inside the current wrapper.
- * If no matching KeyValuePairs is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<KeyValuePairsWrapper>}
- */
-findAllKeyValuePairs(selector?: string): Array<KeyValuePairsWrapper>;
-
-/**
- * Returns the wrapper of the closest parent KeyValuePairs for the current element,
- * or the element itself if it is an instance of KeyValuePairs.
- * If no KeyValuePairs is found, returns \`null\`.
- *
- * @returns {KeyValuePairsWrapper | null}
- */
-findClosestKeyValuePairs(): KeyValuePairsWrapper | null;
-/**
- * Returns the wrapper of the first LineChart that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first LineChart.
- * If no matching LineChart is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {LineChartWrapper | null}
- */
-findLineChart(selector?: string): LineChartWrapper | null;
-
-/**
- * Returns an array of LineChart wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the LineCharts inside the current wrapper.
- * If no matching LineChart is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<LineChartWrapper>}
- */
-findAllLineCharts(selector?: string): Array<LineChartWrapper>;
-
-/**
- * Returns the wrapper of the closest parent LineChart for the current element,
- * or the element itself if it is an instance of LineChart.
- * If no LineChart is found, returns \`null\`.
- *
- * @returns {LineChartWrapper | null}
- */
-findClosestLineChart(): LineChartWrapper | null;
-/**
- * Returns the wrapper of the first Link that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Link.
- * If no matching Link is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {LinkWrapper | null}
- */
-findLink(selector?: string): LinkWrapper | null;
-
-/**
- * Returns an array of Link wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Links inside the current wrapper.
- * If no matching Link is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<LinkWrapper>}
- */
-findAllLinks(selector?: string): Array<LinkWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Link for the current element,
- * or the element itself if it is an instance of Link.
- * If no Link is found, returns \`null\`.
- *
- * @returns {LinkWrapper | null}
- */
-findClosestLink(): LinkWrapper | null;
-/**
- * Returns the wrapper of the first List that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first List.
- * If no matching List is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ListWrapper | null}
- */
-findList(selector?: string): ListWrapper | null;
-
-/**
- * Returns an array of List wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Lists inside the current wrapper.
- * If no matching List is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ListWrapper>}
- */
-findAllLists(selector?: string): Array<ListWrapper>;
-
-/**
- * Returns the wrapper of the closest parent List for the current element,
- * or the element itself if it is an instance of List.
- * If no List is found, returns \`null\`.
- *
- * @returns {ListWrapper | null}
- */
-findClosestList(): ListWrapper | null;
-/**
- * Returns the wrapper of the first LiveRegion that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first LiveRegion.
- * If no matching LiveRegion is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {LiveRegionWrapper | null}
- */
-findLiveRegion(selector?: string): LiveRegionWrapper | null;
-
-/**
- * Returns an array of LiveRegion wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the LiveRegions inside the current wrapper.
- * If no matching LiveRegion is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<LiveRegionWrapper>}
- */
-findAllLiveRegions(selector?: string): Array<LiveRegionWrapper>;
-
-/**
- * Returns the wrapper of the closest parent LiveRegion for the current element,
- * or the element itself if it is an instance of LiveRegion.
- * If no LiveRegion is found, returns \`null\`.
- *
- * @returns {LiveRegionWrapper | null}
- */
-findClosestLiveRegion(): LiveRegionWrapper | null;
-/**
- * Returns the wrapper of the first MixedLineBarChart that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first MixedLineBarChart.
- * If no matching MixedLineBarChart is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {MixedLineBarChartWrapper | null}
- */
-findMixedLineBarChart(selector?: string): MixedLineBarChartWrapper | null;
-
-/**
- * Returns an array of MixedLineBarChart wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the MixedLineBarCharts inside the current wrapper.
- * If no matching MixedLineBarChart is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<MixedLineBarChartWrapper>}
- */
-findAllMixedLineBarCharts(selector?: string): Array<MixedLineBarChartWrapper>;
-
-/**
- * Returns the wrapper of the closest parent MixedLineBarChart for the current element,
- * or the element itself if it is an instance of MixedLineBarChart.
- * If no MixedLineBarChart is found, returns \`null\`.
- *
- * @returns {MixedLineBarChartWrapper | null}
- */
-findClosestMixedLineBarChart(): MixedLineBarChartWrapper | null;
-/**
- * Returns the wrapper of the first Modal that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Modal.
- * If no matching Modal is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ModalWrapper | null}
- */
-findModal(selector?: string): ModalWrapper | null;
-
-/**
- * Returns an array of Modal wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Modals inside the current wrapper.
- * If no matching Modal is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ModalWrapper>}
- */
-findAllModals(selector?: string): Array<ModalWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Modal for the current element,
- * or the element itself if it is an instance of Modal.
- * If no Modal is found, returns \`null\`.
- *
- * @returns {ModalWrapper | null}
- */
-findClosestModal(): ModalWrapper | null;
-/**
- * Returns the wrapper of the first Multiselect that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Multiselect.
- * If no matching Multiselect is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {MultiselectWrapper | null}
- */
-findMultiselect(selector?: string): MultiselectWrapper | null;
-
-/**
- * Returns an array of Multiselect wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Multiselects inside the current wrapper.
- * If no matching Multiselect is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<MultiselectWrapper>}
- */
-findAllMultiselects(selector?: string): Array<MultiselectWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Multiselect for the current element,
- * or the element itself if it is an instance of Multiselect.
- * If no Multiselect is found, returns \`null\`.
- *
- * @returns {MultiselectWrapper | null}
- */
-findClosestMultiselect(): MultiselectWrapper | null;
-/**
- * Returns the wrapper of the first NavigableGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first NavigableGroup.
- * If no matching NavigableGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {NavigableGroupWrapper | null}
- */
-findNavigableGroup(selector?: string): NavigableGroupWrapper | null;
-
-/**
- * Returns an array of NavigableGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the NavigableGroups inside the current wrapper.
- * If no matching NavigableGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<NavigableGroupWrapper>}
- */
-findAllNavigableGroups(selector?: string): Array<NavigableGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent NavigableGroup for the current element,
- * or the element itself if it is an instance of NavigableGroup.
- * If no NavigableGroup is found, returns \`null\`.
- *
- * @returns {NavigableGroupWrapper | null}
- */
-findClosestNavigableGroup(): NavigableGroupWrapper | null;
-/**
- * Returns the wrapper of the first Pagination that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Pagination.
- * If no matching Pagination is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PaginationWrapper | null}
- */
-findPagination(selector?: string): PaginationWrapper | null;
-
-/**
- * Returns an array of Pagination wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Paginations inside the current wrapper.
- * If no matching Pagination is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PaginationWrapper>}
- */
-findAllPaginations(selector?: string): Array<PaginationWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Pagination for the current element,
- * or the element itself if it is an instance of Pagination.
- * If no Pagination is found, returns \`null\`.
- *
- * @returns {PaginationWrapper | null}
- */
-findClosestPagination(): PaginationWrapper | null;
-/**
- * Returns the wrapper of the first PanelLayout that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first PanelLayout.
- * If no matching PanelLayout is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PanelLayoutWrapper | null}
- */
-findPanelLayout(selector?: string): PanelLayoutWrapper | null;
-
-/**
- * Returns an array of PanelLayout wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the PanelLayouts inside the current wrapper.
- * If no matching PanelLayout is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PanelLayoutWrapper>}
- */
-findAllPanelLayouts(selector?: string): Array<PanelLayoutWrapper>;
-
-/**
- * Returns the wrapper of the closest parent PanelLayout for the current element,
- * or the element itself if it is an instance of PanelLayout.
- * If no PanelLayout is found, returns \`null\`.
- *
- * @returns {PanelLayoutWrapper | null}
- */
-findClosestPanelLayout(): PanelLayoutWrapper | null;
-/**
- * Returns the wrapper of the first PieChart that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first PieChart.
- * If no matching PieChart is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PieChartWrapper | null}
- */
-findPieChart(selector?: string): PieChartWrapper | null;
-
-/**
- * Returns an array of PieChart wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the PieCharts inside the current wrapper.
- * If no matching PieChart is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PieChartWrapper>}
- */
-findAllPieCharts(selector?: string): Array<PieChartWrapper>;
-
-/**
- * Returns the wrapper of the closest parent PieChart for the current element,
- * or the element itself if it is an instance of PieChart.
- * If no PieChart is found, returns \`null\`.
- *
- * @returns {PieChartWrapper | null}
- */
-findClosestPieChart(): PieChartWrapper | null;
-/**
- * Returns the wrapper of the first Popover that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Popover.
- * If no matching Popover is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PopoverWrapper | null}
- */
-findPopover(selector?: string): PopoverWrapper | null;
-
-/**
- * Returns an array of Popover wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Popovers inside the current wrapper.
- * If no matching Popover is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PopoverWrapper>}
- */
-findAllPopovers(selector?: string): Array<PopoverWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Popover for the current element,
- * or the element itself if it is an instance of Popover.
- * If no Popover is found, returns \`null\`.
- *
- * @returns {PopoverWrapper | null}
- */
-findClosestPopover(): PopoverWrapper | null;
-/**
- * Returns the wrapper of the first ProgressBar that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ProgressBar.
- * If no matching ProgressBar is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ProgressBarWrapper | null}
- */
-findProgressBar(selector?: string): ProgressBarWrapper | null;
-
-/**
- * Returns an array of ProgressBar wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ProgressBars inside the current wrapper.
- * If no matching ProgressBar is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ProgressBarWrapper>}
- */
-findAllProgressBars(selector?: string): Array<ProgressBarWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ProgressBar for the current element,
- * or the element itself if it is an instance of ProgressBar.
- * If no ProgressBar is found, returns \`null\`.
- *
- * @returns {ProgressBarWrapper | null}
- */
-findClosestProgressBar(): ProgressBarWrapper | null;
-/**
- * Returns the wrapper of the first PromptInput that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first PromptInput.
- * If no matching PromptInput is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PromptInputWrapper | null}
- */
-findPromptInput(selector?: string): PromptInputWrapper | null;
-
-/**
- * Returns an array of PromptInput wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the PromptInputs inside the current wrapper.
- * If no matching PromptInput is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PromptInputWrapper>}
- */
-findAllPromptInputs(selector?: string): Array<PromptInputWrapper>;
-
-/**
- * Returns the wrapper of the closest parent PromptInput for the current element,
- * or the element itself if it is an instance of PromptInput.
- * If no PromptInput is found, returns \`null\`.
- *
- * @returns {PromptInputWrapper | null}
- */
-findClosestPromptInput(): PromptInputWrapper | null;
-/**
- * Returns the wrapper of the first PropertyFilter that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first PropertyFilter.
- * If no matching PropertyFilter is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {PropertyFilterWrapper | null}
- */
-findPropertyFilter(selector?: string): PropertyFilterWrapper | null;
-
-/**
- * Returns an array of PropertyFilter wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the PropertyFilters inside the current wrapper.
- * If no matching PropertyFilter is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<PropertyFilterWrapper>}
- */
-findAllPropertyFilters(selector?: string): Array<PropertyFilterWrapper>;
-
-/**
- * Returns the wrapper of the closest parent PropertyFilter for the current element,
- * or the element itself if it is an instance of PropertyFilter.
- * If no PropertyFilter is found, returns \`null\`.
- *
- * @returns {PropertyFilterWrapper | null}
- */
-findClosestPropertyFilter(): PropertyFilterWrapper | null;
-/**
- * Returns the wrapper of the first RadioButton that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first RadioButton.
- * If no matching RadioButton is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {RadioButtonWrapper | null}
- */
-findRadioButton(selector?: string): RadioButtonWrapper | null;
-
-/**
- * Returns an array of RadioButton wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the RadioButtons inside the current wrapper.
- * If no matching RadioButton is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<RadioButtonWrapper>}
- */
-findAllRadioButtons(selector?: string): Array<RadioButtonWrapper>;
-
-/**
- * Returns the wrapper of the closest parent RadioButton for the current element,
- * or the element itself if it is an instance of RadioButton.
- * If no RadioButton is found, returns \`null\`.
- *
- * @returns {RadioButtonWrapper | null}
- */
-findClosestRadioButton(): RadioButtonWrapper | null;
-/**
- * Returns the wrapper of the first RadioGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first RadioGroup.
- * If no matching RadioGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {RadioGroupWrapper | null}
- */
-findRadioGroup(selector?: string): RadioGroupWrapper | null;
-
-/**
- * Returns an array of RadioGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the RadioGroups inside the current wrapper.
- * If no matching RadioGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<RadioGroupWrapper>}
- */
-findAllRadioGroups(selector?: string): Array<RadioGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent RadioGroup for the current element,
- * or the element itself if it is an instance of RadioGroup.
- * If no RadioGroup is found, returns \`null\`.
- *
- * @returns {RadioGroupWrapper | null}
- */
-findClosestRadioGroup(): RadioGroupWrapper | null;
-/**
- * Returns the wrapper of the first S3ResourceSelector that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first S3ResourceSelector.
- * If no matching S3ResourceSelector is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {S3ResourceSelectorWrapper | null}
- */
-findS3ResourceSelector(selector?: string): S3ResourceSelectorWrapper | null;
-
-/**
- * Returns an array of S3ResourceSelector wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the S3ResourceSelectors inside the current wrapper.
- * If no matching S3ResourceSelector is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<S3ResourceSelectorWrapper>}
- */
-findAllS3ResourceSelectors(selector?: string): Array<S3ResourceSelectorWrapper>;
-
-/**
- * Returns the wrapper of the closest parent S3ResourceSelector for the current element,
- * or the element itself if it is an instance of S3ResourceSelector.
- * If no S3ResourceSelector is found, returns \`null\`.
- *
- * @returns {S3ResourceSelectorWrapper | null}
- */
-findClosestS3ResourceSelector(): S3ResourceSelectorWrapper | null;
-/**
- * Returns the wrapper of the first SegmentedControl that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first SegmentedControl.
- * If no matching SegmentedControl is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SegmentedControlWrapper | null}
- */
-findSegmentedControl(selector?: string): SegmentedControlWrapper | null;
-
-/**
- * Returns an array of SegmentedControl wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the SegmentedControls inside the current wrapper.
- * If no matching SegmentedControl is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SegmentedControlWrapper>}
- */
-findAllSegmentedControls(selector?: string): Array<SegmentedControlWrapper>;
-
-/**
- * Returns the wrapper of the closest parent SegmentedControl for the current element,
- * or the element itself if it is an instance of SegmentedControl.
- * If no SegmentedControl is found, returns \`null\`.
- *
- * @returns {SegmentedControlWrapper | null}
- */
-findClosestSegmentedControl(): SegmentedControlWrapper | null;
-/**
- * Returns the wrapper of the first Select that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Select.
- * If no matching Select is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SelectWrapper | null}
- */
-findSelect(selector?: string): SelectWrapper | null;
-
-/**
- * Returns an array of Select wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Selects inside the current wrapper.
- * If no matching Select is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SelectWrapper>}
- */
-findAllSelects(selector?: string): Array<SelectWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Select for the current element,
- * or the element itself if it is an instance of Select.
- * If no Select is found, returns \`null\`.
- *
- * @returns {SelectWrapper | null}
- */
-findClosestSelect(): SelectWrapper | null;
-/**
- * Returns the wrapper of the first SideNavigation that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first SideNavigation.
- * If no matching SideNavigation is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SideNavigationWrapper | null}
- */
-findSideNavigation(selector?: string): SideNavigationWrapper | null;
-
-/**
- * Returns an array of SideNavigation wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the SideNavigations inside the current wrapper.
- * If no matching SideNavigation is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SideNavigationWrapper>}
- */
-findAllSideNavigations(selector?: string): Array<SideNavigationWrapper>;
-
-/**
- * Returns the wrapper of the closest parent SideNavigation for the current element,
- * or the element itself if it is an instance of SideNavigation.
- * If no SideNavigation is found, returns \`null\`.
- *
- * @returns {SideNavigationWrapper | null}
- */
-findClosestSideNavigation(): SideNavigationWrapper | null;
-/**
- * Returns the wrapper of the first Skeleton that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Skeleton.
- * If no matching Skeleton is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SkeletonWrapper | null}
- */
-findSkeleton(selector?: string): SkeletonWrapper | null;
-
-/**
- * Returns an array of Skeleton wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Skeletons inside the current wrapper.
- * If no matching Skeleton is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SkeletonWrapper>}
- */
-findAllSkeletons(selector?: string): Array<SkeletonWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Skeleton for the current element,
- * or the element itself if it is an instance of Skeleton.
- * If no Skeleton is found, returns \`null\`.
- *
- * @returns {SkeletonWrapper | null}
- */
-findClosestSkeleton(): SkeletonWrapper | null;
-/**
- * Returns the wrapper of the first Slider that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Slider.
- * If no matching Slider is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SliderWrapper | null}
- */
-findSlider(selector?: string): SliderWrapper | null;
-
-/**
- * Returns an array of Slider wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Sliders inside the current wrapper.
- * If no matching Slider is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SliderWrapper>}
- */
-findAllSliders(selector?: string): Array<SliderWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Slider for the current element,
- * or the element itself if it is an instance of Slider.
- * If no Slider is found, returns \`null\`.
- *
- * @returns {SliderWrapper | null}
- */
-findClosestSlider(): SliderWrapper | null;
-/**
- * Returns the wrapper of the first SpaceBetween that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first SpaceBetween.
- * If no matching SpaceBetween is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SpaceBetweenWrapper | null}
- */
-findSpaceBetween(selector?: string): SpaceBetweenWrapper | null;
-
-/**
- * Returns an array of SpaceBetween wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the SpaceBetweens inside the current wrapper.
- * If no matching SpaceBetween is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SpaceBetweenWrapper>}
- */
-findAllSpaceBetweens(selector?: string): Array<SpaceBetweenWrapper>;
-
-/**
- * Returns the wrapper of the closest parent SpaceBetween for the current element,
- * or the element itself if it is an instance of SpaceBetween.
- * If no SpaceBetween is found, returns \`null\`.
- *
- * @returns {SpaceBetweenWrapper | null}
- */
-findClosestSpaceBetween(): SpaceBetweenWrapper | null;
-/**
- * Returns the wrapper of the first Spinner that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Spinner.
- * If no matching Spinner is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SpinnerWrapper | null}
- */
-findSpinner(selector?: string): SpinnerWrapper | null;
-
-/**
- * Returns an array of Spinner wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Spinners inside the current wrapper.
- * If no matching Spinner is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SpinnerWrapper>}
- */
-findAllSpinners(selector?: string): Array<SpinnerWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Spinner for the current element,
- * or the element itself if it is an instance of Spinner.
- * If no Spinner is found, returns \`null\`.
- *
- * @returns {SpinnerWrapper | null}
- */
-findClosestSpinner(): SpinnerWrapper | null;
-/**
- * Returns the wrapper of the first SplitPanel that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first SplitPanel.
- * If no matching SplitPanel is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {SplitPanelWrapper | null}
- */
-findSplitPanel(selector?: string): SplitPanelWrapper | null;
-
-/**
- * Returns an array of SplitPanel wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the SplitPanels inside the current wrapper.
- * If no matching SplitPanel is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<SplitPanelWrapper>}
- */
-findAllSplitPanels(selector?: string): Array<SplitPanelWrapper>;
-
-/**
- * Returns the wrapper of the closest parent SplitPanel for the current element,
- * or the element itself if it is an instance of SplitPanel.
- * If no SplitPanel is found, returns \`null\`.
- *
- * @returns {SplitPanelWrapper | null}
- */
-findClosestSplitPanel(): SplitPanelWrapper | null;
-/**
- * Returns the wrapper of the first StatusIndicator that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first StatusIndicator.
- * If no matching StatusIndicator is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {StatusIndicatorWrapper | null}
- */
-findStatusIndicator(selector?: string): StatusIndicatorWrapper | null;
-
-/**
- * Returns an array of StatusIndicator wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the StatusIndicators inside the current wrapper.
- * If no matching StatusIndicator is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<StatusIndicatorWrapper>}
- */
-findAllStatusIndicators(selector?: string): Array<StatusIndicatorWrapper>;
-
-/**
- * Returns the wrapper of the closest parent StatusIndicator for the current element,
- * or the element itself if it is an instance of StatusIndicator.
- * If no StatusIndicator is found, returns \`null\`.
- *
- * @returns {StatusIndicatorWrapper | null}
- */
-findClosestStatusIndicator(): StatusIndicatorWrapper | null;
-/**
- * Returns the wrapper of the first Steps that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Steps.
- * If no matching Steps is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {StepsWrapper | null}
- */
-findSteps(selector?: string): StepsWrapper | null;
-
-/**
- * Returns an array of Steps wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Steps inside the current wrapper.
- * If no matching Steps is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<StepsWrapper>}
- */
-findAllSteps(selector?: string): Array<StepsWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Steps for the current element,
- * or the element itself if it is an instance of Steps.
- * If no Steps is found, returns \`null\`.
- *
- * @returns {StepsWrapper | null}
- */
-findClosestSteps(): StepsWrapper | null;
-/**
- * Returns the wrapper of the first Table that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Table.
- * If no matching Table is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TableWrapper | null}
- */
-findTable(selector?: string): TableWrapper | null;
-
-/**
- * Returns an array of Table wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Tables inside the current wrapper.
- * If no matching Table is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TableWrapper>}
- */
-findAllTables(selector?: string): Array<TableWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Table for the current element,
- * or the element itself if it is an instance of Table.
- * If no Table is found, returns \`null\`.
- *
- * @returns {TableWrapper | null}
- */
-findClosestTable(): TableWrapper | null;
-/**
- * Returns the wrapper of the first Tabs that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Tabs.
- * If no matching Tabs is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TabsWrapper | null}
- */
-findTabs(selector?: string): TabsWrapper | null;
-
-/**
- * Returns an array of Tabs wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Tabs inside the current wrapper.
- * If no matching Tabs is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TabsWrapper>}
- */
-findAllTabs(selector?: string): Array<TabsWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Tabs for the current element,
- * or the element itself if it is an instance of Tabs.
- * If no Tabs is found, returns \`null\`.
- *
- * @returns {TabsWrapper | null}
- */
-findClosestTabs(): TabsWrapper | null;
-/**
- * Returns the wrapper of the first TagEditor that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TagEditor.
- * If no matching TagEditor is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TagEditorWrapper | null}
- */
-findTagEditor(selector?: string): TagEditorWrapper | null;
-
-/**
- * Returns an array of TagEditor wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TagEditors inside the current wrapper.
- * If no matching TagEditor is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TagEditorWrapper>}
- */
-findAllTagEditors(selector?: string): Array<TagEditorWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TagEditor for the current element,
- * or the element itself if it is an instance of TagEditor.
- * If no TagEditor is found, returns \`null\`.
- *
- * @returns {TagEditorWrapper | null}
- */
-findClosestTagEditor(): TagEditorWrapper | null;
-/**
- * Returns the wrapper of the first TextContent that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TextContent.
- * If no matching TextContent is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TextContentWrapper | null}
- */
-findTextContent(selector?: string): TextContentWrapper | null;
-
-/**
- * Returns an array of TextContent wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TextContents inside the current wrapper.
- * If no matching TextContent is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TextContentWrapper>}
- */
-findAllTextContents(selector?: string): Array<TextContentWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TextContent for the current element,
- * or the element itself if it is an instance of TextContent.
- * If no TextContent is found, returns \`null\`.
- *
- * @returns {TextContentWrapper | null}
- */
-findClosestTextContent(): TextContentWrapper | null;
-/**
- * Returns the wrapper of the first TextFilter that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TextFilter.
- * If no matching TextFilter is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TextFilterWrapper | null}
- */
-findTextFilter(selector?: string): TextFilterWrapper | null;
-
-/**
- * Returns an array of TextFilter wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TextFilters inside the current wrapper.
- * If no matching TextFilter is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TextFilterWrapper>}
- */
-findAllTextFilters(selector?: string): Array<TextFilterWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TextFilter for the current element,
- * or the element itself if it is an instance of TextFilter.
- * If no TextFilter is found, returns \`null\`.
- *
- * @returns {TextFilterWrapper | null}
- */
-findClosestTextFilter(): TextFilterWrapper | null;
-/**
- * Returns the wrapper of the first Textarea that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Textarea.
- * If no matching Textarea is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TextareaWrapper | null}
- */
-findTextarea(selector?: string): TextareaWrapper | null;
-
-/**
- * Returns an array of Textarea wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Textareas inside the current wrapper.
- * If no matching Textarea is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TextareaWrapper>}
- */
-findAllTextareas(selector?: string): Array<TextareaWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Textarea for the current element,
- * or the element itself if it is an instance of Textarea.
- * If no Textarea is found, returns \`null\`.
- *
- * @returns {TextareaWrapper | null}
- */
-findClosestTextarea(): TextareaWrapper | null;
-/**
- * Returns the wrapper of the first Tiles that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Tiles.
- * If no matching Tiles is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TilesWrapper | null}
- */
-findTiles(selector?: string): TilesWrapper | null;
-
-/**
- * Returns an array of Tiles wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Tiles inside the current wrapper.
- * If no matching Tiles is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TilesWrapper>}
- */
-findAllTiles(selector?: string): Array<TilesWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Tiles for the current element,
- * or the element itself if it is an instance of Tiles.
- * If no Tiles is found, returns \`null\`.
- *
- * @returns {TilesWrapper | null}
- */
-findClosestTiles(): TilesWrapper | null;
-/**
- * Returns the wrapper of the first TimeInput that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TimeInput.
- * If no matching TimeInput is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TimeInputWrapper | null}
- */
-findTimeInput(selector?: string): TimeInputWrapper | null;
-
-/**
- * Returns an array of TimeInput wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TimeInputs inside the current wrapper.
- * If no matching TimeInput is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TimeInputWrapper>}
- */
-findAllTimeInputs(selector?: string): Array<TimeInputWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TimeInput for the current element,
- * or the element itself if it is an instance of TimeInput.
- * If no TimeInput is found, returns \`null\`.
- *
- * @returns {TimeInputWrapper | null}
- */
-findClosestTimeInput(): TimeInputWrapper | null;
-/**
- * Returns the wrapper of the first Toggle that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Toggle.
- * If no matching Toggle is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ToggleWrapper | null}
- */
-findToggle(selector?: string): ToggleWrapper | null;
-
-/**
- * Returns an array of Toggle wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Toggles inside the current wrapper.
- * If no matching Toggle is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ToggleWrapper>}
- */
-findAllToggles(selector?: string): Array<ToggleWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Toggle for the current element,
- * or the element itself if it is an instance of Toggle.
- * If no Toggle is found, returns \`null\`.
- *
- * @returns {ToggleWrapper | null}
- */
-findClosestToggle(): ToggleWrapper | null;
-/**
- * Returns the wrapper of the first ToggleButton that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first ToggleButton.
- * If no matching ToggleButton is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {ToggleButtonWrapper | null}
- */
-findToggleButton(selector?: string): ToggleButtonWrapper | null;
-
-/**
- * Returns an array of ToggleButton wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the ToggleButtons inside the current wrapper.
- * If no matching ToggleButton is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<ToggleButtonWrapper>}
- */
-findAllToggleButtons(selector?: string): Array<ToggleButtonWrapper>;
-
-/**
- * Returns the wrapper of the closest parent ToggleButton for the current element,
- * or the element itself if it is an instance of ToggleButton.
- * If no ToggleButton is found, returns \`null\`.
- *
- * @returns {ToggleButtonWrapper | null}
- */
-findClosestToggleButton(): ToggleButtonWrapper | null;
-/**
- * Returns the wrapper of the first Token that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Token.
- * If no matching Token is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TokenWrapper | null}
- */
-findToken(selector?: string): TokenWrapper | null;
-
-/**
- * Returns an array of Token wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Tokens inside the current wrapper.
- * If no matching Token is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TokenWrapper>}
- */
-findAllTokens(selector?: string): Array<TokenWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Token for the current element,
- * or the element itself if it is an instance of Token.
- * If no Token is found, returns \`null\`.
- *
- * @returns {TokenWrapper | null}
- */
-findClosestToken(): TokenWrapper | null;
-/**
- * Returns the wrapper of the first TokenGroup that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TokenGroup.
- * If no matching TokenGroup is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TokenGroupWrapper | null}
- */
-findTokenGroup(selector?: string): TokenGroupWrapper | null;
-
-/**
- * Returns an array of TokenGroup wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TokenGroups inside the current wrapper.
- * If no matching TokenGroup is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TokenGroupWrapper>}
- */
-findAllTokenGroups(selector?: string): Array<TokenGroupWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TokenGroup for the current element,
- * or the element itself if it is an instance of TokenGroup.
- * If no TokenGroup is found, returns \`null\`.
- *
- * @returns {TokenGroupWrapper | null}
- */
-findClosestTokenGroup(): TokenGroupWrapper | null;
-/**
- * Returns the wrapper of the first Tooltip that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Tooltip.
- * If no matching Tooltip is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TooltipWrapper | null}
- */
-findTooltip(selector?: string): TooltipWrapper | null;
-
-/**
- * Returns an array of Tooltip wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Tooltips inside the current wrapper.
- * If no matching Tooltip is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TooltipWrapper>}
- */
-findAllTooltips(selector?: string): Array<TooltipWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Tooltip for the current element,
- * or the element itself if it is an instance of Tooltip.
- * If no Tooltip is found, returns \`null\`.
- *
- * @returns {TooltipWrapper | null}
- */
-findClosestTooltip(): TooltipWrapper | null;
-/**
- * Returns the wrapper of the first TopNavigation that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TopNavigation.
- * If no matching TopNavigation is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TopNavigationWrapper | null}
- */
-findTopNavigation(selector?: string): TopNavigationWrapper | null;
-
-/**
- * Returns an array of TopNavigation wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TopNavigations inside the current wrapper.
- * If no matching TopNavigation is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TopNavigationWrapper>}
- */
-findAllTopNavigations(selector?: string): Array<TopNavigationWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TopNavigation for the current element,
- * or the element itself if it is an instance of TopNavigation.
- * If no TopNavigation is found, returns \`null\`.
- *
- * @returns {TopNavigationWrapper | null}
- */
-findClosestTopNavigation(): TopNavigationWrapper | null;
-/**
- * Returns the wrapper of the first TreeView that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TreeView.
- * If no matching TreeView is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TreeViewWrapper | null}
- */
-findTreeView(selector?: string): TreeViewWrapper | null;
-
-/**
- * Returns an array of TreeView wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TreeViews inside the current wrapper.
- * If no matching TreeView is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TreeViewWrapper>}
- */
-findAllTreeViews(selector?: string): Array<TreeViewWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TreeView for the current element,
- * or the element itself if it is an instance of TreeView.
- * If no TreeView is found, returns \`null\`.
- *
- * @returns {TreeViewWrapper | null}
- */
-findClosestTreeView(): TreeViewWrapper | null;
-/**
- * Returns the wrapper of the first TruncatedText that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TruncatedText.
- * If no matching TruncatedText is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TruncatedTextWrapper | null}
- */
-findTruncatedText(selector?: string): TruncatedTextWrapper | null;
-
-/**
- * Returns an array of TruncatedText wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TruncatedTexts inside the current wrapper.
- * If no matching TruncatedText is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TruncatedTextWrapper>}
- */
-findAllTruncatedTexts(selector?: string): Array<TruncatedTextWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TruncatedText for the current element,
- * or the element itself if it is an instance of TruncatedText.
- * If no TruncatedText is found, returns \`null\`.
- *
- * @returns {TruncatedTextWrapper | null}
- */
-findClosestTruncatedText(): TruncatedTextWrapper | null;
-/**
- * Returns the wrapper of the first TutorialPanel that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first TutorialPanel.
- * If no matching TutorialPanel is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {TutorialPanelWrapper | null}
- */
-findTutorialPanel(selector?: string): TutorialPanelWrapper | null;
-
-/**
- * Returns an array of TutorialPanel wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the TutorialPanels inside the current wrapper.
- * If no matching TutorialPanel is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<TutorialPanelWrapper>}
- */
-findAllTutorialPanels(selector?: string): Array<TutorialPanelWrapper>;
-
-/**
- * Returns the wrapper of the closest parent TutorialPanel for the current element,
- * or the element itself if it is an instance of TutorialPanel.
- * If no TutorialPanel is found, returns \`null\`.
- *
- * @returns {TutorialPanelWrapper | null}
- */
-findClosestTutorialPanel(): TutorialPanelWrapper | null;
-/**
- * Returns the wrapper of the first Wizard that matches the specified CSS selector.
- * If no CSS selector is specified, returns the wrapper of the first Wizard.
- * If no matching Wizard is found, returns \`null\`.
- *
- * @param {string} [selector] CSS Selector
- * @returns {WizardWrapper | null}
- */
-findWizard(selector?: string): WizardWrapper | null;
-
-/**
- * Returns an array of Wizard wrapper that matches the specified CSS selector.
- * If no CSS selector is specified, returns all of the Wizards inside the current wrapper.
- * If no matching Wizard is found, returns an empty array.
- *
- * @param {string} [selector] CSS Selector
- * @returns {Array<WizardWrapper>}
- */
-findAllWizards(selector?: string): Array<WizardWrapper>;
-
-/**
- * Returns the wrapper of the closest parent Wizard for the current element,
- * or the element itself if it is an instance of Wizard.
- * If no Wizard is found, returns \`null\`.
- *
- * @returns {WizardWrapper | null}
- */
-findClosestWizard(): WizardWrapper | null;
-   }
-}
-
-
-ElementWrapper.prototype.findActionCard = function(selector) {
-  let rootSelector = \`.\${ActionCardWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ActionCardWrapper && ActionCardWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ActionCardWrapper.rootSelector}, .\${ActionCardWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ActionCardWrapper);
-};
-
-ElementWrapper.prototype.findAllActionCards = function(selector) {
-  return this.findAllComponents(ActionCardWrapper, selector);
-};
-ElementWrapper.prototype.findAlert = function(selector) {
-  let rootSelector = \`.\${AlertWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AlertWrapper && AlertWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AlertWrapper.rootSelector}, .\${AlertWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AlertWrapper);
-};
-
-ElementWrapper.prototype.findAllAlerts = function(selector) {
-  return this.findAllComponents(AlertWrapper, selector);
-};
-ElementWrapper.prototype.findAnchorNavigation = function(selector) {
-  let rootSelector = \`.\${AnchorNavigationWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AnchorNavigationWrapper && AnchorNavigationWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AnchorNavigationWrapper.rootSelector}, .\${AnchorNavigationWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AnchorNavigationWrapper);
-};
-
-ElementWrapper.prototype.findAllAnchorNavigations = function(selector) {
-  return this.findAllComponents(AnchorNavigationWrapper, selector);
-};
-ElementWrapper.prototype.findAnnotation = function(selector) {
-  let rootSelector = \`.\${AnnotationWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AnnotationWrapper && AnnotationWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AnnotationWrapper.rootSelector}, .\${AnnotationWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AnnotationWrapper);
-};
-
-ElementWrapper.prototype.findAllAnnotations = function(selector) {
-  return this.findAllComponents(AnnotationWrapper, selector);
-};
-ElementWrapper.prototype.findAppLayout = function(selector) {
-  let rootSelector = \`.\${AppLayoutWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AppLayoutWrapper && AppLayoutWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AppLayoutWrapper.rootSelector}, .\${AppLayoutWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AppLayoutWrapper);
-};
-
-ElementWrapper.prototype.findAllAppLayouts = function(selector) {
-  return this.findAllComponents(AppLayoutWrapper, selector);
-};
-ElementWrapper.prototype.findAppLayoutToolbar = function(selector) {
-  let rootSelector = \`.\${AppLayoutToolbarWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AppLayoutToolbarWrapper && AppLayoutToolbarWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AppLayoutToolbarWrapper.rootSelector}, .\${AppLayoutToolbarWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AppLayoutToolbarWrapper);
-};
-
-ElementWrapper.prototype.findAllAppLayoutToolbars = function(selector) {
-  return this.findAllComponents(AppLayoutToolbarWrapper, selector);
-};
-ElementWrapper.prototype.findAreaChart = function(selector) {
-  let rootSelector = \`.\${AreaChartWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AreaChartWrapper && AreaChartWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AreaChartWrapper.rootSelector}, .\${AreaChartWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AreaChartWrapper);
-};
-
-ElementWrapper.prototype.findAllAreaCharts = function(selector) {
-  return this.findAllComponents(AreaChartWrapper, selector);
-};
-ElementWrapper.prototype.findAttributeEditor = function(selector) {
-  let rootSelector = \`.\${AttributeEditorWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AttributeEditorWrapper && AttributeEditorWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AttributeEditorWrapper.rootSelector}, .\${AttributeEditorWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AttributeEditorWrapper);
-};
-
-ElementWrapper.prototype.findAllAttributeEditors = function(selector) {
-  return this.findAllComponents(AttributeEditorWrapper, selector);
-};
-ElementWrapper.prototype.findAutosuggest = function(selector) {
-  let rootSelector = \`.\${AutosuggestWrapper.rootSelector}\`;
-  if("legacyRootSelector" in AutosuggestWrapper && AutosuggestWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${AutosuggestWrapper.rootSelector}, .\${AutosuggestWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AutosuggestWrapper);
-};
-
-ElementWrapper.prototype.findAllAutosuggests = function(selector) {
-  return this.findAllComponents(AutosuggestWrapper, selector);
-};
-ElementWrapper.prototype.findBadge = function(selector) {
-  let rootSelector = \`.\${BadgeWrapper.rootSelector}\`;
-  if("legacyRootSelector" in BadgeWrapper && BadgeWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${BadgeWrapper.rootSelector}, .\${BadgeWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BadgeWrapper);
-};
-
-ElementWrapper.prototype.findAllBadges = function(selector) {
-  return this.findAllComponents(BadgeWrapper, selector);
-};
-ElementWrapper.prototype.findBarChart = function(selector) {
-  let rootSelector = \`.\${BarChartWrapper.rootSelector}\`;
-  if("legacyRootSelector" in BarChartWrapper && BarChartWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${BarChartWrapper.rootSelector}, .\${BarChartWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BarChartWrapper);
-};
-
-ElementWrapper.prototype.findAllBarCharts = function(selector) {
-  return this.findAllComponents(BarChartWrapper, selector);
-};
-ElementWrapper.prototype.findBox = function(selector) {
-  let rootSelector = \`.\${BoxWrapper.rootSelector}\`;
-  if("legacyRootSelector" in BoxWrapper && BoxWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${BoxWrapper.rootSelector}, .\${BoxWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoxWrapper);
-};
-
-ElementWrapper.prototype.findAllBoxes = function(selector) {
-  return this.findAllComponents(BoxWrapper, selector);
-};
-ElementWrapper.prototype.findBreadcrumbGroup = function(selector) {
-  let rootSelector = \`.\${BreadcrumbGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in BreadcrumbGroupWrapper && BreadcrumbGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${BreadcrumbGroupWrapper.rootSelector}, .\${BreadcrumbGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BreadcrumbGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllBreadcrumbGroups = function(selector) {
-  return this.findAllComponents(BreadcrumbGroupWrapper, selector);
-};
-ElementWrapper.prototype.findButton = function(selector) {
-  let rootSelector = \`.\${ButtonWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ButtonWrapper && ButtonWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ButtonWrapper.rootSelector}, .\${ButtonWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonWrapper);
-};
-
-ElementWrapper.prototype.findAllButtons = function(selector) {
-  return this.findAllComponents(ButtonWrapper, selector);
-};
-ElementWrapper.prototype.findButtonDropdown = function(selector) {
-  let rootSelector = \`.\${ButtonDropdownWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ButtonDropdownWrapper && ButtonDropdownWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ButtonDropdownWrapper.rootSelector}, .\${ButtonDropdownWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonDropdownWrapper);
-};
-
-ElementWrapper.prototype.findAllButtonDropdowns = function(selector) {
-  return this.findAllComponents(ButtonDropdownWrapper, selector);
-};
-ElementWrapper.prototype.findButtonGroup = function(selector) {
-  let rootSelector = \`.\${ButtonGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ButtonGroupWrapper && ButtonGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ButtonGroupWrapper.rootSelector}, .\${ButtonGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllButtonGroups = function(selector) {
-  return this.findAllComponents(ButtonGroupWrapper, selector);
-};
-ElementWrapper.prototype.findCalendar = function(selector) {
-  let rootSelector = \`.\${CalendarWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CalendarWrapper && CalendarWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CalendarWrapper.rootSelector}, .\${CalendarWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CalendarWrapper);
-};
-
-ElementWrapper.prototype.findAllCalendars = function(selector) {
-  return this.findAllComponents(CalendarWrapper, selector);
-};
-ElementWrapper.prototype.findCards = function(selector) {
-  let rootSelector = \`.\${CardsWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CardsWrapper && CardsWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CardsWrapper.rootSelector}, .\${CardsWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CardsWrapper);
-};
-
-ElementWrapper.prototype.findAllCards = function(selector) {
-  return this.findAllComponents(CardsWrapper, selector);
-};
-ElementWrapper.prototype.findCheckbox = function(selector) {
-  let rootSelector = \`.\${CheckboxWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CheckboxWrapper && CheckboxWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CheckboxWrapper.rootSelector}, .\${CheckboxWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CheckboxWrapper);
-};
-
-ElementWrapper.prototype.findAllCheckboxes = function(selector) {
-  return this.findAllComponents(CheckboxWrapper, selector);
-};
-ElementWrapper.prototype.findCodeEditor = function(selector) {
-  let rootSelector = \`.\${CodeEditorWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CodeEditorWrapper && CodeEditorWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CodeEditorWrapper.rootSelector}, .\${CodeEditorWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CodeEditorWrapper);
-};
-
-ElementWrapper.prototype.findAllCodeEditors = function(selector) {
-  return this.findAllComponents(CodeEditorWrapper, selector);
-};
-ElementWrapper.prototype.findCollectionPreferences = function(selector) {
-  let rootSelector = \`.\${CollectionPreferencesWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CollectionPreferencesWrapper && CollectionPreferencesWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CollectionPreferencesWrapper.rootSelector}, .\${CollectionPreferencesWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CollectionPreferencesWrapper);
-};
-
-ElementWrapper.prototype.findAllCollectionPreferences = function(selector) {
-  return this.findAllComponents(CollectionPreferencesWrapper, selector);
-};
-ElementWrapper.prototype.findColumnLayout = function(selector) {
-  let rootSelector = \`.\${ColumnLayoutWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ColumnLayoutWrapper && ColumnLayoutWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ColumnLayoutWrapper.rootSelector}, .\${ColumnLayoutWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ColumnLayoutWrapper);
-};
-
-ElementWrapper.prototype.findAllColumnLayouts = function(selector) {
-  return this.findAllComponents(ColumnLayoutWrapper, selector);
-};
-ElementWrapper.prototype.findContainer = function(selector) {
-  let rootSelector = \`.\${ContainerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ContainerWrapper && ContainerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ContainerWrapper.rootSelector}, .\${ContainerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ContainerWrapper);
-};
-
-ElementWrapper.prototype.findAllContainers = function(selector) {
-  return this.findAllComponents(ContainerWrapper, selector);
-};
-ElementWrapper.prototype.findContentLayout = function(selector) {
-  let rootSelector = \`.\${ContentLayoutWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ContentLayoutWrapper && ContentLayoutWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ContentLayoutWrapper.rootSelector}, .\${ContentLayoutWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ContentLayoutWrapper);
-};
-
-ElementWrapper.prototype.findAllContentLayouts = function(selector) {
-  return this.findAllComponents(ContentLayoutWrapper, selector);
-};
-ElementWrapper.prototype.findCopyToClipboard = function(selector) {
-  let rootSelector = \`.\${CopyToClipboardWrapper.rootSelector}\`;
-  if("legacyRootSelector" in CopyToClipboardWrapper && CopyToClipboardWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${CopyToClipboardWrapper.rootSelector}, .\${CopyToClipboardWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CopyToClipboardWrapper);
-};
-
-ElementWrapper.prototype.findAllCopyToClipboards = function(selector) {
-  return this.findAllComponents(CopyToClipboardWrapper, selector);
-};
-ElementWrapper.prototype.findDateInput = function(selector) {
-  let rootSelector = \`.\${DateInputWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DateInputWrapper && DateInputWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DateInputWrapper.rootSelector}, .\${DateInputWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DateInputWrapper);
-};
-
-ElementWrapper.prototype.findAllDateInputs = function(selector) {
-  return this.findAllComponents(DateInputWrapper, selector);
-};
-ElementWrapper.prototype.findDatePicker = function(selector) {
-  let rootSelector = \`.\${DatePickerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DatePickerWrapper && DatePickerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DatePickerWrapper.rootSelector}, .\${DatePickerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DatePickerWrapper);
-};
-
-ElementWrapper.prototype.findAllDatePickers = function(selector) {
-  return this.findAllComponents(DatePickerWrapper, selector);
-};
-ElementWrapper.prototype.findDateRangePicker = function(selector) {
-  let rootSelector = \`.\${DateRangePickerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DateRangePickerWrapper && DateRangePickerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DateRangePickerWrapper.rootSelector}, .\${DateRangePickerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DateRangePickerWrapper);
-};
-
-ElementWrapper.prototype.findAllDateRangePickers = function(selector) {
-  return this.findAllComponents(DateRangePickerWrapper, selector);
-};
-ElementWrapper.prototype.findDivider = function(selector) {
-  let rootSelector = \`.\${DividerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DividerWrapper && DividerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DividerWrapper.rootSelector}, .\${DividerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DividerWrapper);
-};
-
-ElementWrapper.prototype.findAllDividers = function(selector) {
-  return this.findAllComponents(DividerWrapper, selector);
-};
-ElementWrapper.prototype.findDrawer = function(selector) {
-  let rootSelector = \`.\${DrawerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DrawerWrapper && DrawerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DrawerWrapper.rootSelector}, .\${DrawerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DrawerWrapper);
-};
-
-ElementWrapper.prototype.findAllDrawers = function(selector) {
-  return this.findAllComponents(DrawerWrapper, selector);
-};
-ElementWrapper.prototype.findDropdown = function(selector) {
-  let rootSelector = \`.\${DropdownWrapper.rootSelector}\`;
-  if("legacyRootSelector" in DropdownWrapper && DropdownWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${DropdownWrapper.rootSelector}, .\${DropdownWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DropdownWrapper);
-};
-
-ElementWrapper.prototype.findAllDropdowns = function(selector) {
-  return this.findAllComponents(DropdownWrapper, selector);
-};
-ElementWrapper.prototype.findErrorBoundary = function(selector) {
-  let rootSelector = \`.\${ErrorBoundaryWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ErrorBoundaryWrapper && ErrorBoundaryWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ErrorBoundaryWrapper.rootSelector}, .\${ErrorBoundaryWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ErrorBoundaryWrapper);
-};
-
-ElementWrapper.prototype.findAllErrorBoundaries = function(selector) {
-  return this.findAllComponents(ErrorBoundaryWrapper, selector);
-};
-ElementWrapper.prototype.findExpandableSection = function(selector) {
-  let rootSelector = \`.\${ExpandableSectionWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ExpandableSectionWrapper && ExpandableSectionWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ExpandableSectionWrapper.rootSelector}, .\${ExpandableSectionWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ExpandableSectionWrapper);
-};
-
-ElementWrapper.prototype.findAllExpandableSections = function(selector) {
-  return this.findAllComponents(ExpandableSectionWrapper, selector);
-};
-ElementWrapper.prototype.findFileDropzone = function(selector) {
-  let rootSelector = \`.\${FileDropzoneWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FileDropzoneWrapper && FileDropzoneWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FileDropzoneWrapper.rootSelector}, .\${FileDropzoneWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileDropzoneWrapper);
-};
-
-ElementWrapper.prototype.findAllFileDropzones = function(selector) {
-  return this.findAllComponents(FileDropzoneWrapper, selector);
-};
-ElementWrapper.prototype.findFileInput = function(selector) {
-  let rootSelector = \`.\${FileInputWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FileInputWrapper && FileInputWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FileInputWrapper.rootSelector}, .\${FileInputWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileInputWrapper);
-};
-
-ElementWrapper.prototype.findAllFileInputs = function(selector) {
-  return this.findAllComponents(FileInputWrapper, selector);
-};
-ElementWrapper.prototype.findFileTokenGroup = function(selector) {
-  let rootSelector = \`.\${FileTokenGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FileTokenGroupWrapper && FileTokenGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FileTokenGroupWrapper.rootSelector}, .\${FileTokenGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileTokenGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllFileTokenGroups = function(selector) {
-  return this.findAllComponents(FileTokenGroupWrapper, selector);
-};
-ElementWrapper.prototype.findFileUpload = function(selector) {
-  let rootSelector = \`.\${FileUploadWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FileUploadWrapper && FileUploadWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FileUploadWrapper.rootSelector}, .\${FileUploadWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileUploadWrapper);
-};
-
-ElementWrapper.prototype.findAllFileUploads = function(selector) {
-  return this.findAllComponents(FileUploadWrapper, selector);
-};
-ElementWrapper.prototype.findFlashbar = function(selector) {
-  let rootSelector = \`.\${FlashbarWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FlashbarWrapper && FlashbarWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FlashbarWrapper.rootSelector}, .\${FlashbarWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FlashbarWrapper);
-};
-
-ElementWrapper.prototype.findAllFlashbars = function(selector) {
-  return this.findAllComponents(FlashbarWrapper, selector);
-};
-ElementWrapper.prototype.findForm = function(selector) {
-  let rootSelector = \`.\${FormWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FormWrapper && FormWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FormWrapper.rootSelector}, .\${FormWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FormWrapper);
-};
-
-ElementWrapper.prototype.findAllForms = function(selector) {
-  return this.findAllComponents(FormWrapper, selector);
-};
-ElementWrapper.prototype.findFormField = function(selector) {
-  let rootSelector = \`.\${FormFieldWrapper.rootSelector}\`;
-  if("legacyRootSelector" in FormFieldWrapper && FormFieldWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${FormFieldWrapper.rootSelector}, .\${FormFieldWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FormFieldWrapper);
-};
-
-ElementWrapper.prototype.findAllFormFields = function(selector) {
-  return this.findAllComponents(FormFieldWrapper, selector);
-};
-ElementWrapper.prototype.findGrid = function(selector) {
-  let rootSelector = \`.\${GridWrapper.rootSelector}\`;
-  if("legacyRootSelector" in GridWrapper && GridWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${GridWrapper.rootSelector}, .\${GridWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, GridWrapper);
-};
-
-ElementWrapper.prototype.findAllGrids = function(selector) {
-  return this.findAllComponents(GridWrapper, selector);
-};
-ElementWrapper.prototype.findHeader = function(selector) {
-  let rootSelector = \`.\${HeaderWrapper.rootSelector}\`;
-  if("legacyRootSelector" in HeaderWrapper && HeaderWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${HeaderWrapper.rootSelector}, .\${HeaderWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HeaderWrapper);
-};
-
-ElementWrapper.prototype.findAllHeaders = function(selector) {
-  return this.findAllComponents(HeaderWrapper, selector);
-};
-ElementWrapper.prototype.findHelpPanel = function(selector) {
-  let rootSelector = \`.\${HelpPanelWrapper.rootSelector}\`;
-  if("legacyRootSelector" in HelpPanelWrapper && HelpPanelWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${HelpPanelWrapper.rootSelector}, .\${HelpPanelWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HelpPanelWrapper);
-};
-
-ElementWrapper.prototype.findAllHelpPanels = function(selector) {
-  return this.findAllComponents(HelpPanelWrapper, selector);
-};
-ElementWrapper.prototype.findHotspot = function(selector) {
-  let rootSelector = \`.\${HotspotWrapper.rootSelector}\`;
-  if("legacyRootSelector" in HotspotWrapper && HotspotWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${HotspotWrapper.rootSelector}, .\${HotspotWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HotspotWrapper);
-};
-
-ElementWrapper.prototype.findAllHotspots = function(selector) {
-  return this.findAllComponents(HotspotWrapper, selector);
-};
-ElementWrapper.prototype.findIcon = function(selector) {
-  let rootSelector = \`.\${IconWrapper.rootSelector}\`;
-  if("legacyRootSelector" in IconWrapper && IconWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${IconWrapper.rootSelector}, .\${IconWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, IconWrapper);
-};
-
-ElementWrapper.prototype.findAllIcons = function(selector) {
-  return this.findAllComponents(IconWrapper, selector);
-};
-ElementWrapper.prototype.findInput = function(selector) {
-  let rootSelector = \`.\${InputWrapper.rootSelector}\`;
-  if("legacyRootSelector" in InputWrapper && InputWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${InputWrapper.rootSelector}, .\${InputWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, InputWrapper);
-};
-
-ElementWrapper.prototype.findAllInputs = function(selector) {
-  return this.findAllComponents(InputWrapper, selector);
-};
-ElementWrapper.prototype.findItemCard = function(selector) {
-  let rootSelector = \`.\${ItemCardWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ItemCardWrapper && ItemCardWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ItemCardWrapper.rootSelector}, .\${ItemCardWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemCardWrapper);
-};
-
-ElementWrapper.prototype.findAllItemCards = function(selector) {
-  return this.findAllComponents(ItemCardWrapper, selector);
-};
-ElementWrapper.prototype.findKeyValuePairs = function(selector) {
-  let rootSelector = \`.\${KeyValuePairsWrapper.rootSelector}\`;
-  if("legacyRootSelector" in KeyValuePairsWrapper && KeyValuePairsWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${KeyValuePairsWrapper.rootSelector}, .\${KeyValuePairsWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, KeyValuePairsWrapper);
-};
-
-ElementWrapper.prototype.findAllKeyValuePairs = function(selector) {
-  return this.findAllComponents(KeyValuePairsWrapper, selector);
-};
-ElementWrapper.prototype.findLineChart = function(selector) {
-  let rootSelector = \`.\${LineChartWrapper.rootSelector}\`;
-  if("legacyRootSelector" in LineChartWrapper && LineChartWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${LineChartWrapper.rootSelector}, .\${LineChartWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LineChartWrapper);
-};
-
-ElementWrapper.prototype.findAllLineCharts = function(selector) {
-  return this.findAllComponents(LineChartWrapper, selector);
-};
-ElementWrapper.prototype.findLink = function(selector) {
-  let rootSelector = \`.\${LinkWrapper.rootSelector}\`;
-  if("legacyRootSelector" in LinkWrapper && LinkWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${LinkWrapper.rootSelector}, .\${LinkWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LinkWrapper);
-};
-
-ElementWrapper.prototype.findAllLinks = function(selector) {
-  return this.findAllComponents(LinkWrapper, selector);
-};
-ElementWrapper.prototype.findList = function(selector) {
-  let rootSelector = \`.\${ListWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ListWrapper && ListWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ListWrapper.rootSelector}, .\${ListWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ListWrapper);
-};
-
-ElementWrapper.prototype.findAllLists = function(selector) {
-  return this.findAllComponents(ListWrapper, selector);
-};
-ElementWrapper.prototype.findLiveRegion = function(selector) {
-  let rootSelector = \`.\${LiveRegionWrapper.rootSelector}\`;
-  if("legacyRootSelector" in LiveRegionWrapper && LiveRegionWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${LiveRegionWrapper.rootSelector}, .\${LiveRegionWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LiveRegionWrapper);
-};
-
-ElementWrapper.prototype.findAllLiveRegions = function(selector) {
-  return this.findAllComponents(LiveRegionWrapper, selector);
-};
-ElementWrapper.prototype.findMixedLineBarChart = function(selector) {
-  let rootSelector = \`.\${MixedLineBarChartWrapper.rootSelector}\`;
-  if("legacyRootSelector" in MixedLineBarChartWrapper && MixedLineBarChartWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${MixedLineBarChartWrapper.rootSelector}, .\${MixedLineBarChartWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, MixedLineBarChartWrapper);
-};
-
-ElementWrapper.prototype.findAllMixedLineBarCharts = function(selector) {
-  return this.findAllComponents(MixedLineBarChartWrapper, selector);
-};
-ElementWrapper.prototype.findModal = function(selector) {
-  let rootSelector = \`.\${ModalWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ModalWrapper && ModalWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ModalWrapper.rootSelector}, .\${ModalWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ModalWrapper);
-};
-
-ElementWrapper.prototype.findAllModals = function(selector) {
-  return this.findAllComponents(ModalWrapper, selector);
-};
-ElementWrapper.prototype.findMultiselect = function(selector) {
-  let rootSelector = \`.\${MultiselectWrapper.rootSelector}\`;
-  if("legacyRootSelector" in MultiselectWrapper && MultiselectWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${MultiselectWrapper.rootSelector}, .\${MultiselectWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, MultiselectWrapper);
-};
-
-ElementWrapper.prototype.findAllMultiselects = function(selector) {
-  return this.findAllComponents(MultiselectWrapper, selector);
-};
-ElementWrapper.prototype.findNavigableGroup = function(selector) {
-  let rootSelector = \`.\${NavigableGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in NavigableGroupWrapper && NavigableGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${NavigableGroupWrapper.rootSelector}, .\${NavigableGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, NavigableGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllNavigableGroups = function(selector) {
-  return this.findAllComponents(NavigableGroupWrapper, selector);
-};
-ElementWrapper.prototype.findPagination = function(selector) {
-  let rootSelector = \`.\${PaginationWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PaginationWrapper && PaginationWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PaginationWrapper.rootSelector}, .\${PaginationWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PaginationWrapper);
-};
-
-ElementWrapper.prototype.findAllPaginations = function(selector) {
-  return this.findAllComponents(PaginationWrapper, selector);
-};
-ElementWrapper.prototype.findPanelLayout = function(selector) {
-  let rootSelector = \`.\${PanelLayoutWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PanelLayoutWrapper && PanelLayoutWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PanelLayoutWrapper.rootSelector}, .\${PanelLayoutWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PanelLayoutWrapper);
-};
-
-ElementWrapper.prototype.findAllPanelLayouts = function(selector) {
-  return this.findAllComponents(PanelLayoutWrapper, selector);
-};
-ElementWrapper.prototype.findPieChart = function(selector) {
-  let rootSelector = \`.\${PieChartWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PieChartWrapper && PieChartWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PieChartWrapper.rootSelector}, .\${PieChartWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PieChartWrapper);
-};
-
-ElementWrapper.prototype.findAllPieCharts = function(selector) {
-  return this.findAllComponents(PieChartWrapper, selector);
-};
-ElementWrapper.prototype.findPopover = function(selector) {
-  let rootSelector = \`.\${PopoverWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PopoverWrapper && PopoverWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PopoverWrapper.rootSelector}, .\${PopoverWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PopoverWrapper);
-};
-
-ElementWrapper.prototype.findAllPopovers = function(selector) {
-  return this.findAllComponents(PopoverWrapper, selector);
-};
-ElementWrapper.prototype.findProgressBar = function(selector) {
-  let rootSelector = \`.\${ProgressBarWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ProgressBarWrapper && ProgressBarWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ProgressBarWrapper.rootSelector}, .\${ProgressBarWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ProgressBarWrapper);
-};
-
-ElementWrapper.prototype.findAllProgressBars = function(selector) {
-  return this.findAllComponents(ProgressBarWrapper, selector);
-};
-ElementWrapper.prototype.findPromptInput = function(selector) {
-  let rootSelector = \`.\${PromptInputWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PromptInputWrapper && PromptInputWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PromptInputWrapper.rootSelector}, .\${PromptInputWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PromptInputWrapper);
-};
-
-ElementWrapper.prototype.findAllPromptInputs = function(selector) {
-  return this.findAllComponents(PromptInputWrapper, selector);
-};
-ElementWrapper.prototype.findPropertyFilter = function(selector) {
-  let rootSelector = \`.\${PropertyFilterWrapper.rootSelector}\`;
-  if("legacyRootSelector" in PropertyFilterWrapper && PropertyFilterWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${PropertyFilterWrapper.rootSelector}, .\${PropertyFilterWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PropertyFilterWrapper);
-};
-
-ElementWrapper.prototype.findAllPropertyFilters = function(selector) {
-  return this.findAllComponents(PropertyFilterWrapper, selector);
-};
-ElementWrapper.prototype.findRadioButton = function(selector) {
-  let rootSelector = \`.\${RadioButtonWrapper.rootSelector}\`;
-  if("legacyRootSelector" in RadioButtonWrapper && RadioButtonWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${RadioButtonWrapper.rootSelector}, .\${RadioButtonWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, RadioButtonWrapper);
-};
-
-ElementWrapper.prototype.findAllRadioButtons = function(selector) {
-  return this.findAllComponents(RadioButtonWrapper, selector);
-};
-ElementWrapper.prototype.findRadioGroup = function(selector) {
-  let rootSelector = \`.\${RadioGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in RadioGroupWrapper && RadioGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${RadioGroupWrapper.rootSelector}, .\${RadioGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, RadioGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllRadioGroups = function(selector) {
-  return this.findAllComponents(RadioGroupWrapper, selector);
-};
-ElementWrapper.prototype.findS3ResourceSelector = function(selector) {
-  let rootSelector = \`.\${S3ResourceSelectorWrapper.rootSelector}\`;
-  if("legacyRootSelector" in S3ResourceSelectorWrapper && S3ResourceSelectorWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${S3ResourceSelectorWrapper.rootSelector}, .\${S3ResourceSelectorWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, S3ResourceSelectorWrapper);
-};
-
-ElementWrapper.prototype.findAllS3ResourceSelectors = function(selector) {
-  return this.findAllComponents(S3ResourceSelectorWrapper, selector);
-};
-ElementWrapper.prototype.findSegmentedControl = function(selector) {
-  let rootSelector = \`.\${SegmentedControlWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SegmentedControlWrapper && SegmentedControlWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SegmentedControlWrapper.rootSelector}, .\${SegmentedControlWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SegmentedControlWrapper);
-};
-
-ElementWrapper.prototype.findAllSegmentedControls = function(selector) {
-  return this.findAllComponents(SegmentedControlWrapper, selector);
-};
-ElementWrapper.prototype.findSelect = function(selector) {
-  let rootSelector = \`.\${SelectWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SelectWrapper && SelectWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SelectWrapper.rootSelector}, .\${SelectWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SelectWrapper);
-};
-
-ElementWrapper.prototype.findAllSelects = function(selector) {
-  return this.findAllComponents(SelectWrapper, selector);
-};
-ElementWrapper.prototype.findSideNavigation = function(selector) {
-  let rootSelector = \`.\${SideNavigationWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SideNavigationWrapper && SideNavigationWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SideNavigationWrapper.rootSelector}, .\${SideNavigationWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SideNavigationWrapper);
-};
-
-ElementWrapper.prototype.findAllSideNavigations = function(selector) {
-  return this.findAllComponents(SideNavigationWrapper, selector);
-};
-ElementWrapper.prototype.findSkeleton = function(selector) {
-  let rootSelector = \`.\${SkeletonWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SkeletonWrapper && SkeletonWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SkeletonWrapper.rootSelector}, .\${SkeletonWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SkeletonWrapper);
-};
-
-ElementWrapper.prototype.findAllSkeletons = function(selector) {
-  return this.findAllComponents(SkeletonWrapper, selector);
-};
-ElementWrapper.prototype.findSlider = function(selector) {
-  let rootSelector = \`.\${SliderWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SliderWrapper && SliderWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SliderWrapper.rootSelector}, .\${SliderWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SliderWrapper);
-};
-
-ElementWrapper.prototype.findAllSliders = function(selector) {
-  return this.findAllComponents(SliderWrapper, selector);
-};
-ElementWrapper.prototype.findSpaceBetween = function(selector) {
-  let rootSelector = \`.\${SpaceBetweenWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SpaceBetweenWrapper && SpaceBetweenWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SpaceBetweenWrapper.rootSelector}, .\${SpaceBetweenWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpaceBetweenWrapper);
-};
-
-ElementWrapper.prototype.findAllSpaceBetweens = function(selector) {
-  return this.findAllComponents(SpaceBetweenWrapper, selector);
-};
-ElementWrapper.prototype.findSpinner = function(selector) {
-  let rootSelector = \`.\${SpinnerWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SpinnerWrapper && SpinnerWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SpinnerWrapper.rootSelector}, .\${SpinnerWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpinnerWrapper);
-};
-
-ElementWrapper.prototype.findAllSpinners = function(selector) {
-  return this.findAllComponents(SpinnerWrapper, selector);
-};
-ElementWrapper.prototype.findSplitPanel = function(selector) {
-  let rootSelector = \`.\${SplitPanelWrapper.rootSelector}\`;
-  if("legacyRootSelector" in SplitPanelWrapper && SplitPanelWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${SplitPanelWrapper.rootSelector}, .\${SplitPanelWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SplitPanelWrapper);
-};
-
-ElementWrapper.prototype.findAllSplitPanels = function(selector) {
-  return this.findAllComponents(SplitPanelWrapper, selector);
-};
-ElementWrapper.prototype.findStatusIndicator = function(selector) {
-  let rootSelector = \`.\${StatusIndicatorWrapper.rootSelector}\`;
-  if("legacyRootSelector" in StatusIndicatorWrapper && StatusIndicatorWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${StatusIndicatorWrapper.rootSelector}, .\${StatusIndicatorWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StatusIndicatorWrapper);
-};
-
-ElementWrapper.prototype.findAllStatusIndicators = function(selector) {
-  return this.findAllComponents(StatusIndicatorWrapper, selector);
-};
-ElementWrapper.prototype.findSteps = function(selector) {
-  let rootSelector = \`.\${StepsWrapper.rootSelector}\`;
-  if("legacyRootSelector" in StepsWrapper && StepsWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${StepsWrapper.rootSelector}, .\${StepsWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StepsWrapper);
-};
-
-ElementWrapper.prototype.findAllSteps = function(selector) {
-  return this.findAllComponents(StepsWrapper, selector);
-};
-ElementWrapper.prototype.findTable = function(selector) {
-  let rootSelector = \`.\${TableWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TableWrapper && TableWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TableWrapper.rootSelector}, .\${TableWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TableWrapper);
-};
-
-ElementWrapper.prototype.findAllTables = function(selector) {
-  return this.findAllComponents(TableWrapper, selector);
-};
-ElementWrapper.prototype.findTabs = function(selector) {
-  let rootSelector = \`.\${TabsWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TabsWrapper && TabsWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TabsWrapper.rootSelector}, .\${TabsWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TabsWrapper);
-};
-
-ElementWrapper.prototype.findAllTabs = function(selector) {
-  return this.findAllComponents(TabsWrapper, selector);
-};
-ElementWrapper.prototype.findTagEditor = function(selector) {
-  let rootSelector = \`.\${TagEditorWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TagEditorWrapper && TagEditorWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TagEditorWrapper.rootSelector}, .\${TagEditorWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TagEditorWrapper);
-};
-
-ElementWrapper.prototype.findAllTagEditors = function(selector) {
-  return this.findAllComponents(TagEditorWrapper, selector);
-};
-ElementWrapper.prototype.findTextContent = function(selector) {
-  let rootSelector = \`.\${TextContentWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TextContentWrapper && TextContentWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TextContentWrapper.rootSelector}, .\${TextContentWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextContentWrapper);
-};
-
-ElementWrapper.prototype.findAllTextContents = function(selector) {
-  return this.findAllComponents(TextContentWrapper, selector);
-};
-ElementWrapper.prototype.findTextFilter = function(selector) {
-  let rootSelector = \`.\${TextFilterWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TextFilterWrapper && TextFilterWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TextFilterWrapper.rootSelector}, .\${TextFilterWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextFilterWrapper);
-};
-
-ElementWrapper.prototype.findAllTextFilters = function(selector) {
-  return this.findAllComponents(TextFilterWrapper, selector);
-};
-ElementWrapper.prototype.findTextarea = function(selector) {
-  let rootSelector = \`.\${TextareaWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TextareaWrapper && TextareaWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TextareaWrapper.rootSelector}, .\${TextareaWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextareaWrapper);
-};
-
-ElementWrapper.prototype.findAllTextareas = function(selector) {
-  return this.findAllComponents(TextareaWrapper, selector);
-};
-ElementWrapper.prototype.findTiles = function(selector) {
-  let rootSelector = \`.\${TilesWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TilesWrapper && TilesWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TilesWrapper.rootSelector}, .\${TilesWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TilesWrapper);
-};
-
-ElementWrapper.prototype.findAllTiles = function(selector) {
-  return this.findAllComponents(TilesWrapper, selector);
-};
-ElementWrapper.prototype.findTimeInput = function(selector) {
-  let rootSelector = \`.\${TimeInputWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TimeInputWrapper && TimeInputWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TimeInputWrapper.rootSelector}, .\${TimeInputWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TimeInputWrapper);
-};
-
-ElementWrapper.prototype.findAllTimeInputs = function(selector) {
-  return this.findAllComponents(TimeInputWrapper, selector);
-};
-ElementWrapper.prototype.findToggle = function(selector) {
-  let rootSelector = \`.\${ToggleWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ToggleWrapper && ToggleWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ToggleWrapper.rootSelector}, .\${ToggleWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleWrapper);
-};
-
-ElementWrapper.prototype.findAllToggles = function(selector) {
-  return this.findAllComponents(ToggleWrapper, selector);
-};
-ElementWrapper.prototype.findToggleButton = function(selector) {
-  let rootSelector = \`.\${ToggleButtonWrapper.rootSelector}\`;
-  if("legacyRootSelector" in ToggleButtonWrapper && ToggleButtonWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${ToggleButtonWrapper.rootSelector}, .\${ToggleButtonWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleButtonWrapper);
-};
-
-ElementWrapper.prototype.findAllToggleButtons = function(selector) {
-  return this.findAllComponents(ToggleButtonWrapper, selector);
-};
-ElementWrapper.prototype.findToken = function(selector) {
-  let rootSelector = \`.\${TokenWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TokenWrapper && TokenWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TokenWrapper.rootSelector}, .\${TokenWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenWrapper);
-};
-
-ElementWrapper.prototype.findAllTokens = function(selector) {
-  return this.findAllComponents(TokenWrapper, selector);
-};
-ElementWrapper.prototype.findTokenGroup = function(selector) {
-  let rootSelector = \`.\${TokenGroupWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TokenGroupWrapper && TokenGroupWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TokenGroupWrapper.rootSelector}, .\${TokenGroupWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenGroupWrapper);
-};
-
-ElementWrapper.prototype.findAllTokenGroups = function(selector) {
-  return this.findAllComponents(TokenGroupWrapper, selector);
-};
-ElementWrapper.prototype.findTooltip = function(selector) {
-  let rootSelector = \`.\${TooltipWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TooltipWrapper && TooltipWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TooltipWrapper.rootSelector}, .\${TooltipWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TooltipWrapper);
-};
-
-ElementWrapper.prototype.findAllTooltips = function(selector) {
-  return this.findAllComponents(TooltipWrapper, selector);
-};
-ElementWrapper.prototype.findTopNavigation = function(selector) {
-  let rootSelector = \`.\${TopNavigationWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TopNavigationWrapper && TopNavigationWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TopNavigationWrapper.rootSelector}, .\${TopNavigationWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TopNavigationWrapper);
-};
-
-ElementWrapper.prototype.findAllTopNavigations = function(selector) {
-  return this.findAllComponents(TopNavigationWrapper, selector);
-};
-ElementWrapper.prototype.findTreeView = function(selector) {
-  let rootSelector = \`.\${TreeViewWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TreeViewWrapper && TreeViewWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TreeViewWrapper.rootSelector}, .\${TreeViewWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TreeViewWrapper);
-};
-
-ElementWrapper.prototype.findAllTreeViews = function(selector) {
-  return this.findAllComponents(TreeViewWrapper, selector);
-};
-ElementWrapper.prototype.findTruncatedText = function(selector) {
-  let rootSelector = \`.\${TruncatedTextWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TruncatedTextWrapper && TruncatedTextWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TruncatedTextWrapper.rootSelector}, .\${TruncatedTextWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TruncatedTextWrapper);
-};
-
-ElementWrapper.prototype.findAllTruncatedTexts = function(selector) {
-  return this.findAllComponents(TruncatedTextWrapper, selector);
-};
-ElementWrapper.prototype.findTutorialPanel = function(selector) {
-  let rootSelector = \`.\${TutorialPanelWrapper.rootSelector}\`;
-  if("legacyRootSelector" in TutorialPanelWrapper && TutorialPanelWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${TutorialPanelWrapper.rootSelector}, .\${TutorialPanelWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TutorialPanelWrapper);
-};
-
-ElementWrapper.prototype.findAllTutorialPanels = function(selector) {
-  return this.findAllComponents(TutorialPanelWrapper, selector);
-};
-ElementWrapper.prototype.findWizard = function(selector) {
-  let rootSelector = \`.\${WizardWrapper.rootSelector}\`;
-  if("legacyRootSelector" in WizardWrapper && WizardWrapper.legacyRootSelector){
-    rootSelector = \`:is(.\${WizardWrapper.rootSelector}, .\${WizardWrapper.legacyRootSelector})\`;
-  }
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, WizardWrapper);
-};
-
-ElementWrapper.prototype.findAllWizards = function(selector) {
-  return this.findAllComponents(WizardWrapper, selector);
-};
-
-ElementWrapper.prototype.findClosestActionCard = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ActionCardWrapper);
-};
-ElementWrapper.prototype.findClosestAlert = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AlertWrapper);
-};
-ElementWrapper.prototype.findClosestAnchorNavigation = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AnchorNavigationWrapper);
-};
-ElementWrapper.prototype.findClosestAnnotation = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AnnotationWrapper);
-};
-ElementWrapper.prototype.findClosestAppLayout = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AppLayoutWrapper);
-};
-ElementWrapper.prototype.findClosestAppLayoutToolbar = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AppLayoutToolbarWrapper);
-};
-ElementWrapper.prototype.findClosestAreaChart = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AreaChartWrapper);
-};
-ElementWrapper.prototype.findClosestAttributeEditor = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AttributeEditorWrapper);
-};
-ElementWrapper.prototype.findClosestAutosuggest = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(AutosuggestWrapper);
-};
-ElementWrapper.prototype.findClosestBadge = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(BadgeWrapper);
-};
-ElementWrapper.prototype.findClosestBarChart = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(BarChartWrapper);
-};
-ElementWrapper.prototype.findClosestBox = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(BoxWrapper);
-};
-ElementWrapper.prototype.findClosestBreadcrumbGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(BreadcrumbGroupWrapper);
-};
-ElementWrapper.prototype.findClosestButton = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ButtonWrapper);
-};
-ElementWrapper.prototype.findClosestButtonDropdown = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ButtonDropdownWrapper);
-};
-ElementWrapper.prototype.findClosestButtonGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ButtonGroupWrapper);
-};
-ElementWrapper.prototype.findClosestCalendar = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CalendarWrapper);
-};
-ElementWrapper.prototype.findClosestCards = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CardsWrapper);
-};
-ElementWrapper.prototype.findClosestCheckbox = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CheckboxWrapper);
-};
-ElementWrapper.prototype.findClosestCodeEditor = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CodeEditorWrapper);
-};
-ElementWrapper.prototype.findClosestCollectionPreferences = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CollectionPreferencesWrapper);
-};
-ElementWrapper.prototype.findClosestColumnLayout = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ColumnLayoutWrapper);
-};
-ElementWrapper.prototype.findClosestContainer = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ContainerWrapper);
-};
-ElementWrapper.prototype.findClosestContentLayout = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ContentLayoutWrapper);
-};
-ElementWrapper.prototype.findClosestCopyToClipboard = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(CopyToClipboardWrapper);
-};
-ElementWrapper.prototype.findClosestDateInput = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DateInputWrapper);
-};
-ElementWrapper.prototype.findClosestDatePicker = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DatePickerWrapper);
-};
-ElementWrapper.prototype.findClosestDateRangePicker = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DateRangePickerWrapper);
-};
-ElementWrapper.prototype.findClosestDivider = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DividerWrapper);
-};
-ElementWrapper.prototype.findClosestDrawer = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DrawerWrapper);
-};
-ElementWrapper.prototype.findClosestDropdown = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(DropdownWrapper);
-};
-ElementWrapper.prototype.findClosestErrorBoundary = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ErrorBoundaryWrapper);
-};
-ElementWrapper.prototype.findClosestExpandableSection = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ExpandableSectionWrapper);
-};
-ElementWrapper.prototype.findClosestFileDropzone = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FileDropzoneWrapper);
-};
-ElementWrapper.prototype.findClosestFileInput = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FileInputWrapper);
-};
-ElementWrapper.prototype.findClosestFileTokenGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FileTokenGroupWrapper);
-};
-ElementWrapper.prototype.findClosestFileUpload = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FileUploadWrapper);
-};
-ElementWrapper.prototype.findClosestFlashbar = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FlashbarWrapper);
-};
-ElementWrapper.prototype.findClosestForm = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FormWrapper);
-};
-ElementWrapper.prototype.findClosestFormField = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(FormFieldWrapper);
-};
-ElementWrapper.prototype.findClosestGrid = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(GridWrapper);
-};
-ElementWrapper.prototype.findClosestHeader = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(HeaderWrapper);
-};
-ElementWrapper.prototype.findClosestHelpPanel = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(HelpPanelWrapper);
-};
-ElementWrapper.prototype.findClosestHotspot = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(HotspotWrapper);
-};
-ElementWrapper.prototype.findClosestIcon = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(IconWrapper);
-};
-ElementWrapper.prototype.findClosestInput = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(InputWrapper);
-};
-ElementWrapper.prototype.findClosestItemCard = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ItemCardWrapper);
-};
-ElementWrapper.prototype.findClosestKeyValuePairs = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(KeyValuePairsWrapper);
-};
-ElementWrapper.prototype.findClosestLineChart = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(LineChartWrapper);
-};
-ElementWrapper.prototype.findClosestLink = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(LinkWrapper);
-};
-ElementWrapper.prototype.findClosestList = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ListWrapper);
-};
-ElementWrapper.prototype.findClosestLiveRegion = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(LiveRegionWrapper);
-};
-ElementWrapper.prototype.findClosestMixedLineBarChart = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(MixedLineBarChartWrapper);
-};
-ElementWrapper.prototype.findClosestModal = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ModalWrapper);
-};
-ElementWrapper.prototype.findClosestMultiselect = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(MultiselectWrapper);
-};
-ElementWrapper.prototype.findClosestNavigableGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(NavigableGroupWrapper);
-};
-ElementWrapper.prototype.findClosestPagination = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PaginationWrapper);
-};
-ElementWrapper.prototype.findClosestPanelLayout = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PanelLayoutWrapper);
-};
-ElementWrapper.prototype.findClosestPieChart = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PieChartWrapper);
-};
-ElementWrapper.prototype.findClosestPopover = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PopoverWrapper);
-};
-ElementWrapper.prototype.findClosestProgressBar = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ProgressBarWrapper);
-};
-ElementWrapper.prototype.findClosestPromptInput = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PromptInputWrapper);
-};
-ElementWrapper.prototype.findClosestPropertyFilter = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(PropertyFilterWrapper);
-};
-ElementWrapper.prototype.findClosestRadioButton = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(RadioButtonWrapper);
-};
-ElementWrapper.prototype.findClosestRadioGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(RadioGroupWrapper);
-};
-ElementWrapper.prototype.findClosestS3ResourceSelector = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(S3ResourceSelectorWrapper);
-};
-ElementWrapper.prototype.findClosestSegmentedControl = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SegmentedControlWrapper);
-};
-ElementWrapper.prototype.findClosestSelect = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SelectWrapper);
-};
-ElementWrapper.prototype.findClosestSideNavigation = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SideNavigationWrapper);
-};
-ElementWrapper.prototype.findClosestSkeleton = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SkeletonWrapper);
-};
-ElementWrapper.prototype.findClosestSlider = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SliderWrapper);
-};
-ElementWrapper.prototype.findClosestSpaceBetween = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SpaceBetweenWrapper);
-};
-ElementWrapper.prototype.findClosestSpinner = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SpinnerWrapper);
-};
-ElementWrapper.prototype.findClosestSplitPanel = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(SplitPanelWrapper);
-};
-ElementWrapper.prototype.findClosestStatusIndicator = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(StatusIndicatorWrapper);
-};
-ElementWrapper.prototype.findClosestSteps = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(StepsWrapper);
-};
-ElementWrapper.prototype.findClosestTable = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TableWrapper);
-};
-ElementWrapper.prototype.findClosestTabs = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TabsWrapper);
-};
-ElementWrapper.prototype.findClosestTagEditor = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TagEditorWrapper);
-};
-ElementWrapper.prototype.findClosestTextContent = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TextContentWrapper);
-};
-ElementWrapper.prototype.findClosestTextFilter = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TextFilterWrapper);
-};
-ElementWrapper.prototype.findClosestTextarea = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TextareaWrapper);
-};
-ElementWrapper.prototype.findClosestTiles = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TilesWrapper);
-};
-ElementWrapper.prototype.findClosestTimeInput = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TimeInputWrapper);
-};
-ElementWrapper.prototype.findClosestToggle = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ToggleWrapper);
-};
-ElementWrapper.prototype.findClosestToggleButton = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(ToggleButtonWrapper);
-};
-ElementWrapper.prototype.findClosestToken = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TokenWrapper);
-};
-ElementWrapper.prototype.findClosestTokenGroup = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TokenGroupWrapper);
-};
-ElementWrapper.prototype.findClosestTooltip = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TooltipWrapper);
-};
-ElementWrapper.prototype.findClosestTopNavigation = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TopNavigationWrapper);
-};
-ElementWrapper.prototype.findClosestTreeView = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TreeViewWrapper);
-};
-ElementWrapper.prototype.findClosestTruncatedText = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TruncatedTextWrapper);
-};
-ElementWrapper.prototype.findClosestTutorialPanel = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(TutorialPanelWrapper);
-};
-ElementWrapper.prototype.findClosestWizard = function() {
-  // casting to 'any' is needed to avoid this issue with generics
-  // https://github.com/microsoft/TypeScript/issues/29132
-  return (this as any).findClosestComponent(WizardWrapper);
-};
-
 export default function wrapper(root: Element = document.body) {
-  if (document && document.body && !document.body.contains(root)) {
-    console.warn('[AwsUi] [test-utils] provided element is not part of the document body, interactions may work incorrectly')
-  };
   return new ElementWrapper(root);
 }
 "
diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts
index 12a92dd117..26fab89e05 100644
--- a/src/box/interfaces.ts
+++ b/src/box/interfaces.ts
@@ -214,7 +214,25 @@ export namespace BoxProps {
   }
 
   export namespace VisualAccent {
-    export type Color = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'mint' | 'lime' | 'grey';
+    export type Color =
+      | 'red'
+      | 'yellow'
+      | 'indigo'
+      | 'green'
+      | 'orange'
+      | 'purple'
+      | 'mint'
+      | 'lime'
+      | 'grey'
+      | 'teal'
+      | 'cyan'
+      | 'blue'
+      | 'violet'
+      | 'fuchsia'
+      | 'magenta'
+      | 'pink'
+      | 'rose'
+      | 'amber';
     export type AspectRatio = 'auto' | 'equal';
     /**
      * A curated t-shirt size keyword aligned to the Box spacing scale
diff --git a/src/box/visual-accent.scss b/src/box/visual-accent.scss
index de2f9688a4..c88c76aa8a 100644
--- a/src/box/visual-accent.scss
+++ b/src/box/visual-accent.scss
@@ -5,6 +5,7 @@
 
 @use 'sass:map';
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/utils/theming' as theming;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 // T-shirt size keywords mirror the Box spacing scale (see spacing.scss).
@@ -131,3 +132,48 @@ $accent-radii: (
   background-color: awsui.$color-background-accent-grey;
   color: awsui.$color-text-accent-grey;
 }
+
+.box.visual-accent.visual-accent-teal {
+  background-color: awsui.$color-background-accent-teal;
+  color: awsui.$color-text-accent-teal;
+}
+
+.box.visual-accent.visual-accent-cyan {
+  background-color: awsui.$color-background-accent-cyan;
+  color: awsui.$color-text-accent-cyan;
+}
+
+.box.visual-accent.visual-accent-blue {
+  background-color: awsui.$color-background-accent-blue;
+  color: awsui.$color-text-accent-blue;
+}
+
+.box.visual-accent.visual-accent-violet {
+  background-color: awsui.$color-background-accent-violet;
+  color: awsui.$color-text-accent-violet;
+}
+
+.box.visual-accent.visual-accent-fuchsia {
+  background-color: awsui.$color-background-accent-fuchsia;
+  color: awsui.$color-text-accent-fuchsia;
+}
+
+.box.visual-accent.visual-accent-magenta {
+  background-color: awsui.$color-background-accent-magenta;
+  color: awsui.$color-text-accent-magenta;
+}
+
+.box.visual-accent.visual-accent-pink {
+  background-color: awsui.$color-background-accent-pink;
+  color: awsui.$color-text-accent-pink;
+}
+
+.box.visual-accent.visual-accent-rose {
+  background-color: awsui.$color-background-accent-rose;
+  color: awsui.$color-text-accent-rose;
+}
+
+.box.visual-accent.visual-accent-amber {
+  background-color: awsui.$color-background-accent-amber;
+  color: awsui.$color-text-accent-amber;
+}
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 14ac9e7562..54c95afe42 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -617,6 +617,15 @@ export type ColorsTokenName =
   | 'colorBackgroundAccentMint'
   | 'colorBackgroundAccentLime'
   | 'colorBackgroundAccentGrey'
+  | 'colorBackgroundAccentTeal'
+  | 'colorBackgroundAccentCyan'
+  | 'colorBackgroundAccentBlue'
+  | 'colorBackgroundAccentViolet'
+  | 'colorBackgroundAccentFuchsia'
+  | 'colorBackgroundAccentMagenta'
+  | 'colorBackgroundAccentPink'
+  | 'colorBackgroundAccentRose'
+  | 'colorBackgroundAccentAmber'
   | 'colorBackgroundPopover'
   | 'colorBackgroundProgressBarValueDefault'
   | 'colorBackgroundProgressBarDefault'
@@ -750,6 +759,15 @@ export type ColorsTokenName =
   | 'colorTextAccentMint'
   | 'colorTextAccentLime'
   | 'colorTextAccentGrey'
+  | 'colorTextAccentTeal'
+  | 'colorTextAccentCyan'
+  | 'colorTextAccentBlue'
+  | 'colorTextAccentViolet'
+  | 'colorTextAccentFuchsia'
+  | 'colorTextAccentMagenta'
+  | 'colorTextAccentPink'
+  | 'colorTextAccentRose'
+  | 'colorTextAccentAmber'
   | 'colorTextBodyDefault'
   | 'colorTextBodySecondary'
   | 'colorTextBreadcrumbCurrent'
diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index bff0922fa7..7dace8fd53 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -96,6 +96,39 @@ const tokens: StyleDictionary.ColorPaletteDictionary = {
     'colorPurple50',
     'colorPurple600',
     'colorPurple950',
+    // Additional visual accent hues (mirror base color primitives)
+    'colorTeal50',
+    'colorTeal400',
+    'colorTeal700',
+    'colorTeal950',
+    'colorCyan50',
+    'colorCyan400',
+    'colorCyan700',
+    'colorCyan950',
+    'colorBlue950',
+    'colorViolet50',
+    'colorViolet400',
+    'colorViolet700',
+    'colorViolet950',
+    'colorFuchsia50',
+    'colorFuchsia400',
+    'colorFuchsia700',
+    'colorFuchsia950',
+    'colorMagenta50',
+    'colorMagenta400',
+    'colorMagenta700',
+    'colorMagenta950',
+    'colorPink50',
+    'colorPink400',
+    'colorPink700',
+    'colorPink950',
+    'colorRose50',
+    'colorRose400',
+    'colorRose700',
+    'colorRose950',
+    'colorAmber50',
+    'colorAmber700',
+    'colorAmber950',
     'colorAwsSquidInk',
     'colorTransparent',
     'colorBlack',
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index c5535b5ab4..1c4cf269da 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -372,15 +372,24 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundCodeView: { light: '#f8f8f8', dark: '#282c34' },
 
   // ── Visual accent ───────────────────────────────────
-  colorBackgroundAccentRed: { light: '{colorError50}', dark: '{colorError950}' },
-  colorBackgroundAccentYellow: { light: '{colorWarning50}', dark: '{colorWarning950}' },
-  colorBackgroundAccentIndigo: { light: '{colorInfo50}', dark: '{colorInfo950}' },
-  colorBackgroundAccentGreen: { light: '{colorSuccess50}', dark: '{colorSuccess950}' },
-  colorBackgroundAccentOrange: { light: '{colorOrange50}', dark: '{colorOrange950}' },
-  colorBackgroundAccentPurple: { light: '{colorPurple50}', dark: '{colorPurple950}' },
-  colorBackgroundAccentMint: { light: '{colorMint50}', dark: '{colorMint950}' },
-  colorBackgroundAccentLime: { light: '{colorLime50}', dark: '{colorLime950}' },
-  colorBackgroundAccentGrey: { light: '{colorNeutral100}', dark: '{colorNeutral750}' },
+  colorBackgroundAccentRed: { light: '{colorError50}', dark: 'rgba(153, 0, 0, 0.4)' },
+  colorBackgroundAccentYellow: { light: '{colorWarning50}', dark: 'rgba(158, 105, 0, 0.4)' },
+  colorBackgroundAccentIndigo: { light: '{colorInfo50}', dark: 'rgba(0, 59, 143, 0.4)' },
+  colorBackgroundAccentGreen: { light: '{colorSuccess50}', dark: 'rgba(0, 92, 38, 0.4)' },
+  colorBackgroundAccentOrange: { light: '{colorOrange50}', dark: 'rgba(138, 32, 0, 0.4)' },
+  colorBackgroundAccentPurple: { light: '{colorPurple50}', dark: 'rgba(89, 0, 178, 0.4)' },
+  colorBackgroundAccentMint: { light: '{colorMint50}', dark: 'rgba(0, 82, 55, 0.4)' },
+  colorBackgroundAccentLime: { light: '{colorLime50}', dark: 'rgba(0, 87, 0, 0.4)' },
+  colorBackgroundAccentGrey: { light: '{colorNeutral150}', dark: '{colorNeutral750}' },
+  colorBackgroundAccentTeal: { light: '{colorTeal50}', dark: 'rgba(0, 82, 76, 0.4)' },
+  colorBackgroundAccentCyan: { light: '{colorCyan50}', dark: 'rgba(0, 71, 97, 0.4)' },
+  colorBackgroundAccentBlue: { light: '{colorInfo50}', dark: 'rgba(0, 59, 143, 0.4)' },
+  colorBackgroundAccentViolet: { light: '{colorViolet50}', dark: 'rgba(66, 0, 219, 0.4)' },
+  colorBackgroundAccentFuchsia: { light: '{colorFuchsia50}', dark: 'rgba(120, 0, 138, 0.4)' },
+  colorBackgroundAccentMagenta: { light: '{colorMagenta50}', dark: 'rgba(143, 0, 114, 0.4)' },
+  colorBackgroundAccentPink: { light: '{colorPink50}', dark: 'rgba(143, 0, 71, 0.4)' },
+  colorBackgroundAccentRose: { light: '{colorRose50}', dark: 'rgba(148, 0, 37, 0.4)' },
+  colorBackgroundAccentAmber: { light: '{colorAmber50}', dark: 'rgba(122, 43, 0, 0.4)' },
   colorTextAccentRed: { light: '{colorError600}', dark: '{colorError400}' },
   colorTextAccentYellow: { light: '{colorWarning800}', dark: '{colorWarning400}' },
   colorTextAccentIndigo: { light: '{colorInfo600}', dark: '{colorInfo300}' },
@@ -390,6 +399,15 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextAccentMint: { light: '{colorMint700}', dark: '{colorMint400}' },
   colorTextAccentLime: { light: '{colorLime700}', dark: '{colorLime400}' },
   colorTextAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral200}' },
+  colorTextAccentTeal: { light: '{colorTeal700}', dark: '{colorTeal400}' },
+  colorTextAccentCyan: { light: '{colorCyan700}', dark: '{colorCyan400}' },
+  colorTextAccentBlue: { light: '{colorInfo700}', dark: '{colorInfo400}' },
+  colorTextAccentViolet: { light: '{colorViolet700}', dark: '{colorViolet400}' },
+  colorTextAccentFuchsia: { light: '{colorFuchsia700}', dark: '{colorFuchsia400}' },
+  colorTextAccentMagenta: { light: '{colorMagenta700}', dark: '{colorMagenta400}' },
+  colorTextAccentPink: { light: '{colorPink700}', dark: '{colorPink400}' },
+  colorTextAccentRose: { light: '{colorRose700}', dark: '{colorRose400}' },
+  colorTextAccentAmber: { light: '{colorAmber700}', dark: '{colorAmber400}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index d4f14ad4f4..15e5e8f8bc 100644
--- a/style-dictionary/visual-refresh/metadata/colors.ts
+++ b/style-dictionary/visual-refresh/metadata/colors.ts
@@ -321,6 +321,51 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorBackgroundAccentTeal: {
+    description: 'The background color of the teal accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentCyan: {
+    description: 'The background color of the cyan accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentBlue: {
+    description: 'The background color of the blue accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentViolet: {
+    description: 'The background color of the violet accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentFuchsia: {
+    description: 'The background color of the fuchsia accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentMagenta: {
+    description: 'The background color of the magenta accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentPink: {
+    description: 'The background color of the pink accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentRose: {
+    description: 'The background color of the rose accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorBackgroundAccentAmber: {
+    description: 'The background color of the amber accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
   colorTextAccentRed: {
     description: 'The content color of the red accent in the Box `awsui-accent` variant.',
     public: true,
@@ -366,6 +411,51 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  colorTextAccentTeal: {
+    description: 'The content color of the teal accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentCyan: {
+    description: 'The content color of the cyan accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentBlue: {
+    description: 'The content color of the blue accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentViolet: {
+    description: 'The content color of the violet accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentFuchsia: {
+    description: 'The content color of the fuchsia accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentMagenta: {
+    description: 'The content color of the magenta accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentPink: {
+    description: 'The content color of the pink accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentRose: {
+    description: 'The content color of the rose accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
+  colorTextAccentAmber: {
+    description: 'The content color of the amber accent in the Box `awsui-accent` variant.',
+    public: true,
+    themeable: true,
+  },
   colorBackgroundPopover: {
     description: 'Background color for the popover container.',
     public: true,

From b8b000b3db27bb23794d9b545f8b15faa8a7de88 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 6 Jul 2026 08:05:27 +0200
Subject: [PATCH 15/19] chore: Add info 700 to reference token

---
 .../__snapshots__/themes.test.ts.snap         |   38 +-
 .../__snapshots__/design-tokens.test.ts.snap  |   12 +-
 .../test-utils-wrappers.test.tsx.snap         | 4532 +++++++++++++++++
 .../visual-refresh/color-palette.ts           |    1 +
 4 files changed, 4550 insertions(+), 33 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 8bf44e38f8..cfba78f503 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -234,9 +234,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
   "color-black": "#000000",
-  "color-blue-400": "#00a1c9",
-  "color-blue-50": "#f1faff",
-  "color-blue-700": "#0a4a74",
   "color-board-placeholder-active": "#d5dbdb",
   "color-board-placeholder-hover": "#99cbe4",
   "color-border-action-card-active": "#002b66",
@@ -519,6 +516,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
+  "color-info-700": "#004a9e",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
   "color-lime-400": "#7ae500",
@@ -594,7 +592,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-teal-700": "#00665f",
   "color-text-accent": "#0073bb",
   "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#0a4a74",
+  "color-text-accent-blue": "#004a9e",
   "color-text-accent-cyan": "#00627a",
   "color-text-accent-fuchsia": "#a000b8",
   "color-text-accent-green": "#1d8102",
@@ -1242,9 +1240,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-toggle-checked-disabled": "#0a4a74",
   "color-background-toggle-default": "#879596",
   "color-black": "#000000",
-  "color-blue-400": "#00a1c9",
-  "color-blue-50": "#f1faff",
-  "color-blue-700": "#0a4a74",
   "color-board-placeholder-active": "#687078",
   "color-board-placeholder-hover": "#0073bb",
   "color-border-action-card-active": "#44b9d6",
@@ -1527,6 +1522,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
+  "color-info-700": "#004a9e",
   "color-info-950": "#00204d",
   "color-item-selected": "#44b9d6",
   "color-lime-400": "#7ae500",
@@ -2250,9 +2246,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
   "color-black": "#000000",
-  "color-blue-400": "#00a1c9",
-  "color-blue-50": "#f1faff",
-  "color-blue-700": "#0a4a74",
   "color-board-placeholder-active": "#d5dbdb",
   "color-board-placeholder-hover": "#99cbe4",
   "color-border-action-card-active": "#002b66",
@@ -2535,6 +2528,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
+  "color-info-700": "#004a9e",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
   "color-lime-400": "#7ae500",
@@ -2610,7 +2604,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-teal-700": "#00665f",
   "color-text-accent": "#0073bb",
   "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#0a4a74",
+  "color-text-accent-blue": "#004a9e",
   "color-text-accent-cyan": "#00627a",
   "color-text-accent-fuchsia": "#a000b8",
   "color-text-accent-green": "#1d8102",
@@ -3258,9 +3252,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-toggle-checked-disabled": "#99cbe4",
   "color-background-toggle-default": "#545b64",
   "color-black": "#000000",
-  "color-blue-400": "#00a1c9",
-  "color-blue-50": "#f1faff",
-  "color-blue-700": "#0a4a74",
   "color-board-placeholder-active": "#d5dbdb",
   "color-board-placeholder-hover": "#99cbe4",
   "color-border-action-card-active": "#002b66",
@@ -3543,6 +3534,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
+  "color-info-700": "#004a9e",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
   "color-lime-400": "#7ae500",
@@ -3618,7 +3610,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-teal-700": "#00665f",
   "color-text-accent": "#0073bb",
   "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#0a4a74",
+  "color-text-accent-blue": "#004a9e",
   "color-text-accent-cyan": "#00627a",
   "color-text-accent-fuchsia": "#a000b8",
   "color-text-accent-green": "#1d8102",
@@ -4266,9 +4258,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-toggle-checked-disabled": "#b8e7ff",
   "color-background-toggle-default": "#424650",
   "color-black": "#000000",
-  "color-blue-400": "#42b4ff",
-  "color-blue-50": "#f0fbff",
-  "color-blue-700": "#004a9e",
   "color-board-placeholder-active": "#ebebf0",
   "color-board-placeholder-hover": "#d1f1ff",
   "color-border-action-card-active": "#002b66",
@@ -4551,6 +4540,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
+  "color-info-700": "#004a9e",
   "color-info-950": "#00204d",
   "color-item-selected": "#006ce0",
   "color-lime-400": "#7ae500",
@@ -5274,9 +5264,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-checked-disabled": "#b8e7ff",
   "color-background-toggle-default": "#424650",
   "color-black": "#000000",
-  "color-blue-400": "#42b4ff",
-  "color-blue-50": "#f0fbff",
-  "color-blue-700": "#004a9e",
   "color-board-placeholder-active": "#ebebf0",
   "color-board-placeholder-hover": "#d1f1ff",
   "color-border-action-card-active": "#002b66",
@@ -5559,6 +5546,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
+  "color-info-700": "#004a9e",
   "color-info-950": "#00204d",
   "color-item-selected": "#006ce0",
   "color-lime-400": "#7ae500",
@@ -6282,9 +6270,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-checked-disabled": "#002b66",
   "color-background-toggle-default": "#8c8c94",
   "color-black": "#000000",
-  "color-blue-400": "#42b4ff",
-  "color-blue-50": "#f0fbff",
-  "color-blue-700": "#004a9e",
   "color-board-placeholder-active": "#656871",
   "color-board-placeholder-hover": "#006ce0",
   "color-border-action-card-active": "#75cfff",
@@ -6567,6 +6552,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
+  "color-info-700": "#004a9e",
   "color-info-950": "#00204d",
   "color-item-selected": "#42b4ff",
   "color-lime-400": "#7ae500",
@@ -7290,9 +7276,6 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-toggle-checked-disabled": "#002b66",
   "color-background-toggle-default": "#8c8c94",
   "color-black": "#000000",
-  "color-blue-400": "#42b4ff",
-  "color-blue-50": "#f0fbff",
-  "color-blue-700": "#004a9e",
   "color-board-placeholder-active": "#656871",
   "color-board-placeholder-hover": "#006ce0",
   "color-border-action-card-active": "#75cfff",
@@ -7575,6 +7558,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
+  "color-info-700": "#004a9e",
   "color-info-950": "#00204d",
   "color-item-selected": "#42b4ff",
   "color-lime-400": "#7ae500",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 5e25e2d510..a0e6e76ed1 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -2518,7 +2518,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00a1c9",
-            "light": "#0a4a74",
+            "light": "#004a9e",
           },
         },
         "color-text-accent-cyan": {
@@ -6374,7 +6374,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00a1c9",
-            "light": "#0a4a74",
+            "light": "#004a9e",
           },
         },
         "color-text-accent-cyan": {
@@ -10230,7 +10230,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00a1c9",
-            "light": "#0a4a74",
+            "light": "#004a9e",
           },
         },
         "color-text-accent-cyan": {
@@ -14086,7 +14086,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00a1c9",
-            "light": "#0a4a74",
+            "light": "#004a9e",
           },
         },
         "color-text-accent-cyan": {
@@ -17942,7 +17942,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00a1c9",
-            "light": "#0a4a74",
+            "light": "#004a9e",
           },
         },
         "color-text-accent-cyan": {
@@ -25654,7 +25654,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00a1c9",
-        "light": "#0a4a74",
+        "light": "#004a9e",
       },
     },
     "color-text-accent-cyan": {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
index 941f04fc00..118ac8d1b2 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
@@ -2,9 +2,4541 @@
 
 exports[`Generate test utils ElementWrapper dom ElementWrapper matches the snapshot 1`] = `
 "
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
 import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
+import { appendSelector } from '@cloudscape-design/test-utils-core/utils';
+
 export { ElementWrapper };
+
+import ActionCardWrapper from './action-card';
+import AlertWrapper from './alert';
+import AnchorNavigationWrapper from './anchor-navigation';
+import AnnotationWrapper from './annotation';
+import AppLayoutWrapper from './app-layout';
+import AppLayoutToolbarWrapper from './app-layout-toolbar';
+import AreaChartWrapper from './area-chart';
+import AttributeEditorWrapper from './attribute-editor';
+import AutosuggestWrapper from './autosuggest';
+import BadgeWrapper from './badge';
+import BarChartWrapper from './bar-chart';
+import BoxWrapper from './box';
+import BreadcrumbGroupWrapper from './breadcrumb-group';
+import ButtonWrapper from './button';
+import ButtonDropdownWrapper from './button-dropdown';
+import ButtonGroupWrapper from './button-group';
+import CalendarWrapper from './calendar';
+import CardsWrapper from './cards';
+import CheckboxWrapper from './checkbox';
+import CodeEditorWrapper from './code-editor';
+import CollectionPreferencesWrapper from './collection-preferences';
+import ColumnLayoutWrapper from './column-layout';
+import ContainerWrapper from './container';
+import ContentLayoutWrapper from './content-layout';
+import CopyToClipboardWrapper from './copy-to-clipboard';
+import DateInputWrapper from './date-input';
+import DatePickerWrapper from './date-picker';
+import DateRangePickerWrapper from './date-range-picker';
+import DividerWrapper from './divider';
+import DrawerWrapper from './drawer';
+import DropdownWrapper from './dropdown';
+import ErrorBoundaryWrapper from './error-boundary';
+import ExpandableSectionWrapper from './expandable-section';
+import FileDropzoneWrapper from './file-dropzone';
+import FileInputWrapper from './file-input';
+import FileTokenGroupWrapper from './file-token-group';
+import FileUploadWrapper from './file-upload';
+import FlashbarWrapper from './flashbar';
+import FormWrapper from './form';
+import FormFieldWrapper from './form-field';
+import GridWrapper from './grid';
+import HeaderWrapper from './header';
+import HelpPanelWrapper from './help-panel';
+import HotspotWrapper from './hotspot';
+import IconWrapper from './icon';
+import InputWrapper from './input';
+import ItemCardWrapper from './item-card';
+import KeyValuePairsWrapper from './key-value-pairs';
+import LineChartWrapper from './line-chart';
+import LinkWrapper from './link';
+import ListWrapper from './list';
+import LiveRegionWrapper from './live-region';
+import MixedLineBarChartWrapper from './mixed-line-bar-chart';
+import ModalWrapper from './modal';
+import MultiselectWrapper from './multiselect';
+import NavigableGroupWrapper from './navigable-group';
+import PaginationWrapper from './pagination';
+import PanelLayoutWrapper from './panel-layout';
+import PieChartWrapper from './pie-chart';
+import PopoverWrapper from './popover';
+import ProgressBarWrapper from './progress-bar';
+import PromptInputWrapper from './prompt-input';
+import PropertyFilterWrapper from './property-filter';
+import RadioButtonWrapper from './radio-button';
+import RadioGroupWrapper from './radio-group';
+import S3ResourceSelectorWrapper from './s3-resource-selector';
+import SegmentedControlWrapper from './segmented-control';
+import SelectWrapper from './select';
+import SideNavigationWrapper from './side-navigation';
+import SkeletonWrapper from './skeleton';
+import SliderWrapper from './slider';
+import SpaceBetweenWrapper from './space-between';
+import SpinnerWrapper from './spinner';
+import SplitPanelWrapper from './split-panel';
+import StatusIndicatorWrapper from './status-indicator';
+import StepsWrapper from './steps';
+import TableWrapper from './table';
+import TabsWrapper from './tabs';
+import TagEditorWrapper from './tag-editor';
+import TextContentWrapper from './text-content';
+import TextFilterWrapper from './text-filter';
+import TextareaWrapper from './textarea';
+import TilesWrapper from './tiles';
+import TimeInputWrapper from './time-input';
+import ToggleWrapper from './toggle';
+import ToggleButtonWrapper from './toggle-button';
+import TokenWrapper from './token';
+import TokenGroupWrapper from './token-group';
+import TooltipWrapper from './tooltip';
+import TopNavigationWrapper from './top-navigation';
+import TreeViewWrapper from './tree-view';
+import TruncatedTextWrapper from './truncated-text';
+import TutorialPanelWrapper from './tutorial-panel';
+import WizardWrapper from './wizard';
+
+
+export { ActionCardWrapper };
+export { AlertWrapper };
+export { AnchorNavigationWrapper };
+export { AnnotationWrapper };
+export { AppLayoutWrapper };
+export { AppLayoutToolbarWrapper };
+export { AreaChartWrapper };
+export { AttributeEditorWrapper };
+export { AutosuggestWrapper };
+export { BadgeWrapper };
+export { BarChartWrapper };
+export { BoxWrapper };
+export { BreadcrumbGroupWrapper };
+export { ButtonWrapper };
+export { ButtonDropdownWrapper };
+export { ButtonGroupWrapper };
+export { CalendarWrapper };
+export { CardsWrapper };
+export { CheckboxWrapper };
+export { CodeEditorWrapper };
+export { CollectionPreferencesWrapper };
+export { ColumnLayoutWrapper };
+export { ContainerWrapper };
+export { ContentLayoutWrapper };
+export { CopyToClipboardWrapper };
+export { DateInputWrapper };
+export { DatePickerWrapper };
+export { DateRangePickerWrapper };
+export { DividerWrapper };
+export { DrawerWrapper };
+export { DropdownWrapper };
+export { ErrorBoundaryWrapper };
+export { ExpandableSectionWrapper };
+export { FileDropzoneWrapper };
+export { FileInputWrapper };
+export { FileTokenGroupWrapper };
+export { FileUploadWrapper };
+export { FlashbarWrapper };
+export { FormWrapper };
+export { FormFieldWrapper };
+export { GridWrapper };
+export { HeaderWrapper };
+export { HelpPanelWrapper };
+export { HotspotWrapper };
+export { IconWrapper };
+export { InputWrapper };
+export { ItemCardWrapper };
+export { KeyValuePairsWrapper };
+export { LineChartWrapper };
+export { LinkWrapper };
+export { ListWrapper };
+export { LiveRegionWrapper };
+export { MixedLineBarChartWrapper };
+export { ModalWrapper };
+export { MultiselectWrapper };
+export { NavigableGroupWrapper };
+export { PaginationWrapper };
+export { PanelLayoutWrapper };
+export { PieChartWrapper };
+export { PopoverWrapper };
+export { ProgressBarWrapper };
+export { PromptInputWrapper };
+export { PropertyFilterWrapper };
+export { RadioButtonWrapper };
+export { RadioGroupWrapper };
+export { S3ResourceSelectorWrapper };
+export { SegmentedControlWrapper };
+export { SelectWrapper };
+export { SideNavigationWrapper };
+export { SkeletonWrapper };
+export { SliderWrapper };
+export { SpaceBetweenWrapper };
+export { SpinnerWrapper };
+export { SplitPanelWrapper };
+export { StatusIndicatorWrapper };
+export { StepsWrapper };
+export { TableWrapper };
+export { TabsWrapper };
+export { TagEditorWrapper };
+export { TextContentWrapper };
+export { TextFilterWrapper };
+export { TextareaWrapper };
+export { TilesWrapper };
+export { TimeInputWrapper };
+export { ToggleWrapper };
+export { ToggleButtonWrapper };
+export { TokenWrapper };
+export { TokenGroupWrapper };
+export { TooltipWrapper };
+export { TopNavigationWrapper };
+export { TreeViewWrapper };
+export { TruncatedTextWrapper };
+export { TutorialPanelWrapper };
+export { WizardWrapper };
+
+declare module '@cloudscape-design/test-utils-core/dist/dom' {
+   interface ElementWrapper {
+    
+/**
+ * Returns the wrapper of the first ActionCard that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ActionCard.
+ * If no matching ActionCard is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ActionCardWrapper | null}
+ */
+findActionCard(selector?: string): ActionCardWrapper | null;
+
+/**
+ * Returns an array of ActionCard wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ActionCards inside the current wrapper.
+ * If no matching ActionCard is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ActionCardWrapper>}
+ */
+findAllActionCards(selector?: string): Array<ActionCardWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ActionCard for the current element,
+ * or the element itself if it is an instance of ActionCard.
+ * If no ActionCard is found, returns \`null\`.
+ *
+ * @returns {ActionCardWrapper | null}
+ */
+findClosestActionCard(): ActionCardWrapper | null;
+/**
+ * Returns the wrapper of the first Alert that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Alert.
+ * If no matching Alert is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AlertWrapper | null}
+ */
+findAlert(selector?: string): AlertWrapper | null;
+
+/**
+ * Returns an array of Alert wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Alerts inside the current wrapper.
+ * If no matching Alert is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AlertWrapper>}
+ */
+findAllAlerts(selector?: string): Array<AlertWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Alert for the current element,
+ * or the element itself if it is an instance of Alert.
+ * If no Alert is found, returns \`null\`.
+ *
+ * @returns {AlertWrapper | null}
+ */
+findClosestAlert(): AlertWrapper | null;
+/**
+ * Returns the wrapper of the first AnchorNavigation that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first AnchorNavigation.
+ * If no matching AnchorNavigation is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AnchorNavigationWrapper | null}
+ */
+findAnchorNavigation(selector?: string): AnchorNavigationWrapper | null;
+
+/**
+ * Returns an array of AnchorNavigation wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the AnchorNavigations inside the current wrapper.
+ * If no matching AnchorNavigation is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AnchorNavigationWrapper>}
+ */
+findAllAnchorNavigations(selector?: string): Array<AnchorNavigationWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent AnchorNavigation for the current element,
+ * or the element itself if it is an instance of AnchorNavigation.
+ * If no AnchorNavigation is found, returns \`null\`.
+ *
+ * @returns {AnchorNavigationWrapper | null}
+ */
+findClosestAnchorNavigation(): AnchorNavigationWrapper | null;
+/**
+ * Returns the wrapper of the first Annotation that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Annotation.
+ * If no matching Annotation is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AnnotationWrapper | null}
+ */
+findAnnotation(selector?: string): AnnotationWrapper | null;
+
+/**
+ * Returns an array of Annotation wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Annotations inside the current wrapper.
+ * If no matching Annotation is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AnnotationWrapper>}
+ */
+findAllAnnotations(selector?: string): Array<AnnotationWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Annotation for the current element,
+ * or the element itself if it is an instance of Annotation.
+ * If no Annotation is found, returns \`null\`.
+ *
+ * @returns {AnnotationWrapper | null}
+ */
+findClosestAnnotation(): AnnotationWrapper | null;
+/**
+ * Returns the wrapper of the first AppLayout that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first AppLayout.
+ * If no matching AppLayout is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AppLayoutWrapper | null}
+ */
+findAppLayout(selector?: string): AppLayoutWrapper | null;
+
+/**
+ * Returns an array of AppLayout wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the AppLayouts inside the current wrapper.
+ * If no matching AppLayout is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AppLayoutWrapper>}
+ */
+findAllAppLayouts(selector?: string): Array<AppLayoutWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent AppLayout for the current element,
+ * or the element itself if it is an instance of AppLayout.
+ * If no AppLayout is found, returns \`null\`.
+ *
+ * @returns {AppLayoutWrapper | null}
+ */
+findClosestAppLayout(): AppLayoutWrapper | null;
+/**
+ * Returns the wrapper of the first AppLayoutToolbar that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first AppLayoutToolbar.
+ * If no matching AppLayoutToolbar is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AppLayoutToolbarWrapper | null}
+ */
+findAppLayoutToolbar(selector?: string): AppLayoutToolbarWrapper | null;
+
+/**
+ * Returns an array of AppLayoutToolbar wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the AppLayoutToolbars inside the current wrapper.
+ * If no matching AppLayoutToolbar is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AppLayoutToolbarWrapper>}
+ */
+findAllAppLayoutToolbars(selector?: string): Array<AppLayoutToolbarWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent AppLayoutToolbar for the current element,
+ * or the element itself if it is an instance of AppLayoutToolbar.
+ * If no AppLayoutToolbar is found, returns \`null\`.
+ *
+ * @returns {AppLayoutToolbarWrapper | null}
+ */
+findClosestAppLayoutToolbar(): AppLayoutToolbarWrapper | null;
+/**
+ * Returns the wrapper of the first AreaChart that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first AreaChart.
+ * If no matching AreaChart is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AreaChartWrapper | null}
+ */
+findAreaChart(selector?: string): AreaChartWrapper | null;
+
+/**
+ * Returns an array of AreaChart wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the AreaCharts inside the current wrapper.
+ * If no matching AreaChart is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AreaChartWrapper>}
+ */
+findAllAreaCharts(selector?: string): Array<AreaChartWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent AreaChart for the current element,
+ * or the element itself if it is an instance of AreaChart.
+ * If no AreaChart is found, returns \`null\`.
+ *
+ * @returns {AreaChartWrapper | null}
+ */
+findClosestAreaChart(): AreaChartWrapper | null;
+/**
+ * Returns the wrapper of the first AttributeEditor that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first AttributeEditor.
+ * If no matching AttributeEditor is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AttributeEditorWrapper | null}
+ */
+findAttributeEditor(selector?: string): AttributeEditorWrapper | null;
+
+/**
+ * Returns an array of AttributeEditor wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the AttributeEditors inside the current wrapper.
+ * If no matching AttributeEditor is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AttributeEditorWrapper>}
+ */
+findAllAttributeEditors(selector?: string): Array<AttributeEditorWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent AttributeEditor for the current element,
+ * or the element itself if it is an instance of AttributeEditor.
+ * If no AttributeEditor is found, returns \`null\`.
+ *
+ * @returns {AttributeEditorWrapper | null}
+ */
+findClosestAttributeEditor(): AttributeEditorWrapper | null;
+/**
+ * Returns the wrapper of the first Autosuggest that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Autosuggest.
+ * If no matching Autosuggest is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {AutosuggestWrapper | null}
+ */
+findAutosuggest(selector?: string): AutosuggestWrapper | null;
+
+/**
+ * Returns an array of Autosuggest wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Autosuggests inside the current wrapper.
+ * If no matching Autosuggest is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<AutosuggestWrapper>}
+ */
+findAllAutosuggests(selector?: string): Array<AutosuggestWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Autosuggest for the current element,
+ * or the element itself if it is an instance of Autosuggest.
+ * If no Autosuggest is found, returns \`null\`.
+ *
+ * @returns {AutosuggestWrapper | null}
+ */
+findClosestAutosuggest(): AutosuggestWrapper | null;
+/**
+ * Returns the wrapper of the first Badge that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Badge.
+ * If no matching Badge is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {BadgeWrapper | null}
+ */
+findBadge(selector?: string): BadgeWrapper | null;
+
+/**
+ * Returns an array of Badge wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Badges inside the current wrapper.
+ * If no matching Badge is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<BadgeWrapper>}
+ */
+findAllBadges(selector?: string): Array<BadgeWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Badge for the current element,
+ * or the element itself if it is an instance of Badge.
+ * If no Badge is found, returns \`null\`.
+ *
+ * @returns {BadgeWrapper | null}
+ */
+findClosestBadge(): BadgeWrapper | null;
+/**
+ * Returns the wrapper of the first BarChart that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first BarChart.
+ * If no matching BarChart is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {BarChartWrapper | null}
+ */
+findBarChart(selector?: string): BarChartWrapper | null;
+
+/**
+ * Returns an array of BarChart wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the BarCharts inside the current wrapper.
+ * If no matching BarChart is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<BarChartWrapper>}
+ */
+findAllBarCharts(selector?: string): Array<BarChartWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent BarChart for the current element,
+ * or the element itself if it is an instance of BarChart.
+ * If no BarChart is found, returns \`null\`.
+ *
+ * @returns {BarChartWrapper | null}
+ */
+findClosestBarChart(): BarChartWrapper | null;
+/**
+ * Returns the wrapper of the first Box that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Box.
+ * If no matching Box is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {BoxWrapper | null}
+ */
+findBox(selector?: string): BoxWrapper | null;
+
+/**
+ * Returns an array of Box wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Boxes inside the current wrapper.
+ * If no matching Box is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<BoxWrapper>}
+ */
+findAllBoxes(selector?: string): Array<BoxWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Box for the current element,
+ * or the element itself if it is an instance of Box.
+ * If no Box is found, returns \`null\`.
+ *
+ * @returns {BoxWrapper | null}
+ */
+findClosestBox(): BoxWrapper | null;
+/**
+ * Returns the wrapper of the first BreadcrumbGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first BreadcrumbGroup.
+ * If no matching BreadcrumbGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {BreadcrumbGroupWrapper | null}
+ */
+findBreadcrumbGroup(selector?: string): BreadcrumbGroupWrapper | null;
+
+/**
+ * Returns an array of BreadcrumbGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the BreadcrumbGroups inside the current wrapper.
+ * If no matching BreadcrumbGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<BreadcrumbGroupWrapper>}
+ */
+findAllBreadcrumbGroups(selector?: string): Array<BreadcrumbGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent BreadcrumbGroup for the current element,
+ * or the element itself if it is an instance of BreadcrumbGroup.
+ * If no BreadcrumbGroup is found, returns \`null\`.
+ *
+ * @returns {BreadcrumbGroupWrapper | null}
+ */
+findClosestBreadcrumbGroup(): BreadcrumbGroupWrapper | null;
+/**
+ * Returns the wrapper of the first Button that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Button.
+ * If no matching Button is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ButtonWrapper | null}
+ */
+findButton(selector?: string): ButtonWrapper | null;
+
+/**
+ * Returns an array of Button wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Buttons inside the current wrapper.
+ * If no matching Button is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ButtonWrapper>}
+ */
+findAllButtons(selector?: string): Array<ButtonWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Button for the current element,
+ * or the element itself if it is an instance of Button.
+ * If no Button is found, returns \`null\`.
+ *
+ * @returns {ButtonWrapper | null}
+ */
+findClosestButton(): ButtonWrapper | null;
+/**
+ * Returns the wrapper of the first ButtonDropdown that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ButtonDropdown.
+ * If no matching ButtonDropdown is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ButtonDropdownWrapper | null}
+ */
+findButtonDropdown(selector?: string): ButtonDropdownWrapper | null;
+
+/**
+ * Returns an array of ButtonDropdown wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ButtonDropdowns inside the current wrapper.
+ * If no matching ButtonDropdown is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ButtonDropdownWrapper>}
+ */
+findAllButtonDropdowns(selector?: string): Array<ButtonDropdownWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ButtonDropdown for the current element,
+ * or the element itself if it is an instance of ButtonDropdown.
+ * If no ButtonDropdown is found, returns \`null\`.
+ *
+ * @returns {ButtonDropdownWrapper | null}
+ */
+findClosestButtonDropdown(): ButtonDropdownWrapper | null;
+/**
+ * Returns the wrapper of the first ButtonGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ButtonGroup.
+ * If no matching ButtonGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ButtonGroupWrapper | null}
+ */
+findButtonGroup(selector?: string): ButtonGroupWrapper | null;
+
+/**
+ * Returns an array of ButtonGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ButtonGroups inside the current wrapper.
+ * If no matching ButtonGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ButtonGroupWrapper>}
+ */
+findAllButtonGroups(selector?: string): Array<ButtonGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ButtonGroup for the current element,
+ * or the element itself if it is an instance of ButtonGroup.
+ * If no ButtonGroup is found, returns \`null\`.
+ *
+ * @returns {ButtonGroupWrapper | null}
+ */
+findClosestButtonGroup(): ButtonGroupWrapper | null;
+/**
+ * Returns the wrapper of the first Calendar that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Calendar.
+ * If no matching Calendar is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CalendarWrapper | null}
+ */
+findCalendar(selector?: string): CalendarWrapper | null;
+
+/**
+ * Returns an array of Calendar wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Calendars inside the current wrapper.
+ * If no matching Calendar is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CalendarWrapper>}
+ */
+findAllCalendars(selector?: string): Array<CalendarWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Calendar for the current element,
+ * or the element itself if it is an instance of Calendar.
+ * If no Calendar is found, returns \`null\`.
+ *
+ * @returns {CalendarWrapper | null}
+ */
+findClosestCalendar(): CalendarWrapper | null;
+/**
+ * Returns the wrapper of the first Cards that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Cards.
+ * If no matching Cards is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CardsWrapper | null}
+ */
+findCards(selector?: string): CardsWrapper | null;
+
+/**
+ * Returns an array of Cards wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Cards inside the current wrapper.
+ * If no matching Cards is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CardsWrapper>}
+ */
+findAllCards(selector?: string): Array<CardsWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Cards for the current element,
+ * or the element itself if it is an instance of Cards.
+ * If no Cards is found, returns \`null\`.
+ *
+ * @returns {CardsWrapper | null}
+ */
+findClosestCards(): CardsWrapper | null;
+/**
+ * Returns the wrapper of the first Checkbox that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Checkbox.
+ * If no matching Checkbox is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CheckboxWrapper | null}
+ */
+findCheckbox(selector?: string): CheckboxWrapper | null;
+
+/**
+ * Returns an array of Checkbox wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Checkboxes inside the current wrapper.
+ * If no matching Checkbox is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CheckboxWrapper>}
+ */
+findAllCheckboxes(selector?: string): Array<CheckboxWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Checkbox for the current element,
+ * or the element itself if it is an instance of Checkbox.
+ * If no Checkbox is found, returns \`null\`.
+ *
+ * @returns {CheckboxWrapper | null}
+ */
+findClosestCheckbox(): CheckboxWrapper | null;
+/**
+ * Returns the wrapper of the first CodeEditor that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first CodeEditor.
+ * If no matching CodeEditor is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CodeEditorWrapper | null}
+ */
+findCodeEditor(selector?: string): CodeEditorWrapper | null;
+
+/**
+ * Returns an array of CodeEditor wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the CodeEditors inside the current wrapper.
+ * If no matching CodeEditor is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CodeEditorWrapper>}
+ */
+findAllCodeEditors(selector?: string): Array<CodeEditorWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent CodeEditor for the current element,
+ * or the element itself if it is an instance of CodeEditor.
+ * If no CodeEditor is found, returns \`null\`.
+ *
+ * @returns {CodeEditorWrapper | null}
+ */
+findClosestCodeEditor(): CodeEditorWrapper | null;
+/**
+ * Returns the wrapper of the first CollectionPreferences that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first CollectionPreferences.
+ * If no matching CollectionPreferences is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CollectionPreferencesWrapper | null}
+ */
+findCollectionPreferences(selector?: string): CollectionPreferencesWrapper | null;
+
+/**
+ * Returns an array of CollectionPreferences wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the CollectionPreferences inside the current wrapper.
+ * If no matching CollectionPreferences is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CollectionPreferencesWrapper>}
+ */
+findAllCollectionPreferences(selector?: string): Array<CollectionPreferencesWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent CollectionPreferences for the current element,
+ * or the element itself if it is an instance of CollectionPreferences.
+ * If no CollectionPreferences is found, returns \`null\`.
+ *
+ * @returns {CollectionPreferencesWrapper | null}
+ */
+findClosestCollectionPreferences(): CollectionPreferencesWrapper | null;
+/**
+ * Returns the wrapper of the first ColumnLayout that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ColumnLayout.
+ * If no matching ColumnLayout is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ColumnLayoutWrapper | null}
+ */
+findColumnLayout(selector?: string): ColumnLayoutWrapper | null;
+
+/**
+ * Returns an array of ColumnLayout wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ColumnLayouts inside the current wrapper.
+ * If no matching ColumnLayout is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ColumnLayoutWrapper>}
+ */
+findAllColumnLayouts(selector?: string): Array<ColumnLayoutWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ColumnLayout for the current element,
+ * or the element itself if it is an instance of ColumnLayout.
+ * If no ColumnLayout is found, returns \`null\`.
+ *
+ * @returns {ColumnLayoutWrapper | null}
+ */
+findClosestColumnLayout(): ColumnLayoutWrapper | null;
+/**
+ * Returns the wrapper of the first Container that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Container.
+ * If no matching Container is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ContainerWrapper | null}
+ */
+findContainer(selector?: string): ContainerWrapper | null;
+
+/**
+ * Returns an array of Container wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Containers inside the current wrapper.
+ * If no matching Container is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ContainerWrapper>}
+ */
+findAllContainers(selector?: string): Array<ContainerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Container for the current element,
+ * or the element itself if it is an instance of Container.
+ * If no Container is found, returns \`null\`.
+ *
+ * @returns {ContainerWrapper | null}
+ */
+findClosestContainer(): ContainerWrapper | null;
+/**
+ * Returns the wrapper of the first ContentLayout that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ContentLayout.
+ * If no matching ContentLayout is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ContentLayoutWrapper | null}
+ */
+findContentLayout(selector?: string): ContentLayoutWrapper | null;
+
+/**
+ * Returns an array of ContentLayout wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ContentLayouts inside the current wrapper.
+ * If no matching ContentLayout is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ContentLayoutWrapper>}
+ */
+findAllContentLayouts(selector?: string): Array<ContentLayoutWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ContentLayout for the current element,
+ * or the element itself if it is an instance of ContentLayout.
+ * If no ContentLayout is found, returns \`null\`.
+ *
+ * @returns {ContentLayoutWrapper | null}
+ */
+findClosestContentLayout(): ContentLayoutWrapper | null;
+/**
+ * Returns the wrapper of the first CopyToClipboard that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first CopyToClipboard.
+ * If no matching CopyToClipboard is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {CopyToClipboardWrapper | null}
+ */
+findCopyToClipboard(selector?: string): CopyToClipboardWrapper | null;
+
+/**
+ * Returns an array of CopyToClipboard wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the CopyToClipboards inside the current wrapper.
+ * If no matching CopyToClipboard is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<CopyToClipboardWrapper>}
+ */
+findAllCopyToClipboards(selector?: string): Array<CopyToClipboardWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent CopyToClipboard for the current element,
+ * or the element itself if it is an instance of CopyToClipboard.
+ * If no CopyToClipboard is found, returns \`null\`.
+ *
+ * @returns {CopyToClipboardWrapper | null}
+ */
+findClosestCopyToClipboard(): CopyToClipboardWrapper | null;
+/**
+ * Returns the wrapper of the first DateInput that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first DateInput.
+ * If no matching DateInput is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DateInputWrapper | null}
+ */
+findDateInput(selector?: string): DateInputWrapper | null;
+
+/**
+ * Returns an array of DateInput wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the DateInputs inside the current wrapper.
+ * If no matching DateInput is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DateInputWrapper>}
+ */
+findAllDateInputs(selector?: string): Array<DateInputWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent DateInput for the current element,
+ * or the element itself if it is an instance of DateInput.
+ * If no DateInput is found, returns \`null\`.
+ *
+ * @returns {DateInputWrapper | null}
+ */
+findClosestDateInput(): DateInputWrapper | null;
+/**
+ * Returns the wrapper of the first DatePicker that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first DatePicker.
+ * If no matching DatePicker is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DatePickerWrapper | null}
+ */
+findDatePicker(selector?: string): DatePickerWrapper | null;
+
+/**
+ * Returns an array of DatePicker wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the DatePickers inside the current wrapper.
+ * If no matching DatePicker is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DatePickerWrapper>}
+ */
+findAllDatePickers(selector?: string): Array<DatePickerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent DatePicker for the current element,
+ * or the element itself if it is an instance of DatePicker.
+ * If no DatePicker is found, returns \`null\`.
+ *
+ * @returns {DatePickerWrapper | null}
+ */
+findClosestDatePicker(): DatePickerWrapper | null;
+/**
+ * Returns the wrapper of the first DateRangePicker that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first DateRangePicker.
+ * If no matching DateRangePicker is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DateRangePickerWrapper | null}
+ */
+findDateRangePicker(selector?: string): DateRangePickerWrapper | null;
+
+/**
+ * Returns an array of DateRangePicker wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the DateRangePickers inside the current wrapper.
+ * If no matching DateRangePicker is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DateRangePickerWrapper>}
+ */
+findAllDateRangePickers(selector?: string): Array<DateRangePickerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent DateRangePicker for the current element,
+ * or the element itself if it is an instance of DateRangePicker.
+ * If no DateRangePicker is found, returns \`null\`.
+ *
+ * @returns {DateRangePickerWrapper | null}
+ */
+findClosestDateRangePicker(): DateRangePickerWrapper | null;
+/**
+ * Returns the wrapper of the first Divider that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Divider.
+ * If no matching Divider is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DividerWrapper | null}
+ */
+findDivider(selector?: string): DividerWrapper | null;
+
+/**
+ * Returns an array of Divider wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Dividers inside the current wrapper.
+ * If no matching Divider is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DividerWrapper>}
+ */
+findAllDividers(selector?: string): Array<DividerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Divider for the current element,
+ * or the element itself if it is an instance of Divider.
+ * If no Divider is found, returns \`null\`.
+ *
+ * @returns {DividerWrapper | null}
+ */
+findClosestDivider(): DividerWrapper | null;
+/**
+ * Returns the wrapper of the first Drawer that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Drawer.
+ * If no matching Drawer is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DrawerWrapper | null}
+ */
+findDrawer(selector?: string): DrawerWrapper | null;
+
+/**
+ * Returns an array of Drawer wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Drawers inside the current wrapper.
+ * If no matching Drawer is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DrawerWrapper>}
+ */
+findAllDrawers(selector?: string): Array<DrawerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Drawer for the current element,
+ * or the element itself if it is an instance of Drawer.
+ * If no Drawer is found, returns \`null\`.
+ *
+ * @returns {DrawerWrapper | null}
+ */
+findClosestDrawer(): DrawerWrapper | null;
+/**
+ * Returns the wrapper of the first Dropdown that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Dropdown.
+ * If no matching Dropdown is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {DropdownWrapper | null}
+ */
+findDropdown(selector?: string): DropdownWrapper | null;
+
+/**
+ * Returns an array of Dropdown wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Dropdowns inside the current wrapper.
+ * If no matching Dropdown is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<DropdownWrapper>}
+ */
+findAllDropdowns(selector?: string): Array<DropdownWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Dropdown for the current element,
+ * or the element itself if it is an instance of Dropdown.
+ * If no Dropdown is found, returns \`null\`.
+ *
+ * @returns {DropdownWrapper | null}
+ */
+findClosestDropdown(): DropdownWrapper | null;
+/**
+ * Returns the wrapper of the first ErrorBoundary that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ErrorBoundary.
+ * If no matching ErrorBoundary is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ErrorBoundaryWrapper | null}
+ */
+findErrorBoundary(selector?: string): ErrorBoundaryWrapper | null;
+
+/**
+ * Returns an array of ErrorBoundary wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ErrorBoundaries inside the current wrapper.
+ * If no matching ErrorBoundary is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ErrorBoundaryWrapper>}
+ */
+findAllErrorBoundaries(selector?: string): Array<ErrorBoundaryWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ErrorBoundary for the current element,
+ * or the element itself if it is an instance of ErrorBoundary.
+ * If no ErrorBoundary is found, returns \`null\`.
+ *
+ * @returns {ErrorBoundaryWrapper | null}
+ */
+findClosestErrorBoundary(): ErrorBoundaryWrapper | null;
+/**
+ * Returns the wrapper of the first ExpandableSection that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ExpandableSection.
+ * If no matching ExpandableSection is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ExpandableSectionWrapper | null}
+ */
+findExpandableSection(selector?: string): ExpandableSectionWrapper | null;
+
+/**
+ * Returns an array of ExpandableSection wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ExpandableSections inside the current wrapper.
+ * If no matching ExpandableSection is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ExpandableSectionWrapper>}
+ */
+findAllExpandableSections(selector?: string): Array<ExpandableSectionWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ExpandableSection for the current element,
+ * or the element itself if it is an instance of ExpandableSection.
+ * If no ExpandableSection is found, returns \`null\`.
+ *
+ * @returns {ExpandableSectionWrapper | null}
+ */
+findClosestExpandableSection(): ExpandableSectionWrapper | null;
+/**
+ * Returns the wrapper of the first FileDropzone that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first FileDropzone.
+ * If no matching FileDropzone is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FileDropzoneWrapper | null}
+ */
+findFileDropzone(selector?: string): FileDropzoneWrapper | null;
+
+/**
+ * Returns an array of FileDropzone wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the FileDropzones inside the current wrapper.
+ * If no matching FileDropzone is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FileDropzoneWrapper>}
+ */
+findAllFileDropzones(selector?: string): Array<FileDropzoneWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent FileDropzone for the current element,
+ * or the element itself if it is an instance of FileDropzone.
+ * If no FileDropzone is found, returns \`null\`.
+ *
+ * @returns {FileDropzoneWrapper | null}
+ */
+findClosestFileDropzone(): FileDropzoneWrapper | null;
+/**
+ * Returns the wrapper of the first FileInput that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first FileInput.
+ * If no matching FileInput is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FileInputWrapper | null}
+ */
+findFileInput(selector?: string): FileInputWrapper | null;
+
+/**
+ * Returns an array of FileInput wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the FileInputs inside the current wrapper.
+ * If no matching FileInput is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FileInputWrapper>}
+ */
+findAllFileInputs(selector?: string): Array<FileInputWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent FileInput for the current element,
+ * or the element itself if it is an instance of FileInput.
+ * If no FileInput is found, returns \`null\`.
+ *
+ * @returns {FileInputWrapper | null}
+ */
+findClosestFileInput(): FileInputWrapper | null;
+/**
+ * Returns the wrapper of the first FileTokenGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first FileTokenGroup.
+ * If no matching FileTokenGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FileTokenGroupWrapper | null}
+ */
+findFileTokenGroup(selector?: string): FileTokenGroupWrapper | null;
+
+/**
+ * Returns an array of FileTokenGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the FileTokenGroups inside the current wrapper.
+ * If no matching FileTokenGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FileTokenGroupWrapper>}
+ */
+findAllFileTokenGroups(selector?: string): Array<FileTokenGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent FileTokenGroup for the current element,
+ * or the element itself if it is an instance of FileTokenGroup.
+ * If no FileTokenGroup is found, returns \`null\`.
+ *
+ * @returns {FileTokenGroupWrapper | null}
+ */
+findClosestFileTokenGroup(): FileTokenGroupWrapper | null;
+/**
+ * Returns the wrapper of the first FileUpload that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first FileUpload.
+ * If no matching FileUpload is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FileUploadWrapper | null}
+ */
+findFileUpload(selector?: string): FileUploadWrapper | null;
+
+/**
+ * Returns an array of FileUpload wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the FileUploads inside the current wrapper.
+ * If no matching FileUpload is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FileUploadWrapper>}
+ */
+findAllFileUploads(selector?: string): Array<FileUploadWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent FileUpload for the current element,
+ * or the element itself if it is an instance of FileUpload.
+ * If no FileUpload is found, returns \`null\`.
+ *
+ * @returns {FileUploadWrapper | null}
+ */
+findClosestFileUpload(): FileUploadWrapper | null;
+/**
+ * Returns the wrapper of the first Flashbar that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Flashbar.
+ * If no matching Flashbar is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FlashbarWrapper | null}
+ */
+findFlashbar(selector?: string): FlashbarWrapper | null;
+
+/**
+ * Returns an array of Flashbar wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Flashbars inside the current wrapper.
+ * If no matching Flashbar is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FlashbarWrapper>}
+ */
+findAllFlashbars(selector?: string): Array<FlashbarWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Flashbar for the current element,
+ * or the element itself if it is an instance of Flashbar.
+ * If no Flashbar is found, returns \`null\`.
+ *
+ * @returns {FlashbarWrapper | null}
+ */
+findClosestFlashbar(): FlashbarWrapper | null;
+/**
+ * Returns the wrapper of the first Form that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Form.
+ * If no matching Form is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FormWrapper | null}
+ */
+findForm(selector?: string): FormWrapper | null;
+
+/**
+ * Returns an array of Form wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Forms inside the current wrapper.
+ * If no matching Form is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FormWrapper>}
+ */
+findAllForms(selector?: string): Array<FormWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Form for the current element,
+ * or the element itself if it is an instance of Form.
+ * If no Form is found, returns \`null\`.
+ *
+ * @returns {FormWrapper | null}
+ */
+findClosestForm(): FormWrapper | null;
+/**
+ * Returns the wrapper of the first FormField that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first FormField.
+ * If no matching FormField is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {FormFieldWrapper | null}
+ */
+findFormField(selector?: string): FormFieldWrapper | null;
+
+/**
+ * Returns an array of FormField wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the FormFields inside the current wrapper.
+ * If no matching FormField is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<FormFieldWrapper>}
+ */
+findAllFormFields(selector?: string): Array<FormFieldWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent FormField for the current element,
+ * or the element itself if it is an instance of FormField.
+ * If no FormField is found, returns \`null\`.
+ *
+ * @returns {FormFieldWrapper | null}
+ */
+findClosestFormField(): FormFieldWrapper | null;
+/**
+ * Returns the wrapper of the first Grid that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Grid.
+ * If no matching Grid is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {GridWrapper | null}
+ */
+findGrid(selector?: string): GridWrapper | null;
+
+/**
+ * Returns an array of Grid wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Grids inside the current wrapper.
+ * If no matching Grid is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<GridWrapper>}
+ */
+findAllGrids(selector?: string): Array<GridWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Grid for the current element,
+ * or the element itself if it is an instance of Grid.
+ * If no Grid is found, returns \`null\`.
+ *
+ * @returns {GridWrapper | null}
+ */
+findClosestGrid(): GridWrapper | null;
+/**
+ * Returns the wrapper of the first Header that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Header.
+ * If no matching Header is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {HeaderWrapper | null}
+ */
+findHeader(selector?: string): HeaderWrapper | null;
+
+/**
+ * Returns an array of Header wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Headers inside the current wrapper.
+ * If no matching Header is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<HeaderWrapper>}
+ */
+findAllHeaders(selector?: string): Array<HeaderWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Header for the current element,
+ * or the element itself if it is an instance of Header.
+ * If no Header is found, returns \`null\`.
+ *
+ * @returns {HeaderWrapper | null}
+ */
+findClosestHeader(): HeaderWrapper | null;
+/**
+ * Returns the wrapper of the first HelpPanel that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first HelpPanel.
+ * If no matching HelpPanel is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {HelpPanelWrapper | null}
+ */
+findHelpPanel(selector?: string): HelpPanelWrapper | null;
+
+/**
+ * Returns an array of HelpPanel wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the HelpPanels inside the current wrapper.
+ * If no matching HelpPanel is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<HelpPanelWrapper>}
+ */
+findAllHelpPanels(selector?: string): Array<HelpPanelWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent HelpPanel for the current element,
+ * or the element itself if it is an instance of HelpPanel.
+ * If no HelpPanel is found, returns \`null\`.
+ *
+ * @returns {HelpPanelWrapper | null}
+ */
+findClosestHelpPanel(): HelpPanelWrapper | null;
+/**
+ * Returns the wrapper of the first Hotspot that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Hotspot.
+ * If no matching Hotspot is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {HotspotWrapper | null}
+ */
+findHotspot(selector?: string): HotspotWrapper | null;
+
+/**
+ * Returns an array of Hotspot wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Hotspots inside the current wrapper.
+ * If no matching Hotspot is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<HotspotWrapper>}
+ */
+findAllHotspots(selector?: string): Array<HotspotWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Hotspot for the current element,
+ * or the element itself if it is an instance of Hotspot.
+ * If no Hotspot is found, returns \`null\`.
+ *
+ * @returns {HotspotWrapper | null}
+ */
+findClosestHotspot(): HotspotWrapper | null;
+/**
+ * Returns the wrapper of the first Icon that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Icon.
+ * If no matching Icon is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {IconWrapper | null}
+ */
+findIcon(selector?: string): IconWrapper | null;
+
+/**
+ * Returns an array of Icon wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Icons inside the current wrapper.
+ * If no matching Icon is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<IconWrapper>}
+ */
+findAllIcons(selector?: string): Array<IconWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Icon for the current element,
+ * or the element itself if it is an instance of Icon.
+ * If no Icon is found, returns \`null\`.
+ *
+ * @returns {IconWrapper | null}
+ */
+findClosestIcon(): IconWrapper | null;
+/**
+ * Returns the wrapper of the first Input that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Input.
+ * If no matching Input is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {InputWrapper | null}
+ */
+findInput(selector?: string): InputWrapper | null;
+
+/**
+ * Returns an array of Input wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Inputs inside the current wrapper.
+ * If no matching Input is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<InputWrapper>}
+ */
+findAllInputs(selector?: string): Array<InputWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Input for the current element,
+ * or the element itself if it is an instance of Input.
+ * If no Input is found, returns \`null\`.
+ *
+ * @returns {InputWrapper | null}
+ */
+findClosestInput(): InputWrapper | null;
+/**
+ * Returns the wrapper of the first ItemCard that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ItemCard.
+ * If no matching ItemCard is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ItemCardWrapper | null}
+ */
+findItemCard(selector?: string): ItemCardWrapper | null;
+
+/**
+ * Returns an array of ItemCard wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ItemCards inside the current wrapper.
+ * If no matching ItemCard is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ItemCardWrapper>}
+ */
+findAllItemCards(selector?: string): Array<ItemCardWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ItemCard for the current element,
+ * or the element itself if it is an instance of ItemCard.
+ * If no ItemCard is found, returns \`null\`.
+ *
+ * @returns {ItemCardWrapper | null}
+ */
+findClosestItemCard(): ItemCardWrapper | null;
+/**
+ * Returns the wrapper of the first KeyValuePairs that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first KeyValuePairs.
+ * If no matching KeyValuePairs is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {KeyValuePairsWrapper | null}
+ */
+findKeyValuePairs(selector?: string): KeyValuePairsWrapper | null;
+
+/**
+ * Returns an array of KeyValuePairs wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the KeyValuePairs inside the current wrapper.
+ * If no matching KeyValuePairs is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<KeyValuePairsWrapper>}
+ */
+findAllKeyValuePairs(selector?: string): Array<KeyValuePairsWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent KeyValuePairs for the current element,
+ * or the element itself if it is an instance of KeyValuePairs.
+ * If no KeyValuePairs is found, returns \`null\`.
+ *
+ * @returns {KeyValuePairsWrapper | null}
+ */
+findClosestKeyValuePairs(): KeyValuePairsWrapper | null;
+/**
+ * Returns the wrapper of the first LineChart that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first LineChart.
+ * If no matching LineChart is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {LineChartWrapper | null}
+ */
+findLineChart(selector?: string): LineChartWrapper | null;
+
+/**
+ * Returns an array of LineChart wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the LineCharts inside the current wrapper.
+ * If no matching LineChart is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<LineChartWrapper>}
+ */
+findAllLineCharts(selector?: string): Array<LineChartWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent LineChart for the current element,
+ * or the element itself if it is an instance of LineChart.
+ * If no LineChart is found, returns \`null\`.
+ *
+ * @returns {LineChartWrapper | null}
+ */
+findClosestLineChart(): LineChartWrapper | null;
+/**
+ * Returns the wrapper of the first Link that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Link.
+ * If no matching Link is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {LinkWrapper | null}
+ */
+findLink(selector?: string): LinkWrapper | null;
+
+/**
+ * Returns an array of Link wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Links inside the current wrapper.
+ * If no matching Link is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<LinkWrapper>}
+ */
+findAllLinks(selector?: string): Array<LinkWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Link for the current element,
+ * or the element itself if it is an instance of Link.
+ * If no Link is found, returns \`null\`.
+ *
+ * @returns {LinkWrapper | null}
+ */
+findClosestLink(): LinkWrapper | null;
+/**
+ * Returns the wrapper of the first List that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first List.
+ * If no matching List is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ListWrapper | null}
+ */
+findList(selector?: string): ListWrapper | null;
+
+/**
+ * Returns an array of List wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Lists inside the current wrapper.
+ * If no matching List is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ListWrapper>}
+ */
+findAllLists(selector?: string): Array<ListWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent List for the current element,
+ * or the element itself if it is an instance of List.
+ * If no List is found, returns \`null\`.
+ *
+ * @returns {ListWrapper | null}
+ */
+findClosestList(): ListWrapper | null;
+/**
+ * Returns the wrapper of the first LiveRegion that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first LiveRegion.
+ * If no matching LiveRegion is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {LiveRegionWrapper | null}
+ */
+findLiveRegion(selector?: string): LiveRegionWrapper | null;
+
+/**
+ * Returns an array of LiveRegion wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the LiveRegions inside the current wrapper.
+ * If no matching LiveRegion is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<LiveRegionWrapper>}
+ */
+findAllLiveRegions(selector?: string): Array<LiveRegionWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent LiveRegion for the current element,
+ * or the element itself if it is an instance of LiveRegion.
+ * If no LiveRegion is found, returns \`null\`.
+ *
+ * @returns {LiveRegionWrapper | null}
+ */
+findClosestLiveRegion(): LiveRegionWrapper | null;
+/**
+ * Returns the wrapper of the first MixedLineBarChart that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first MixedLineBarChart.
+ * If no matching MixedLineBarChart is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {MixedLineBarChartWrapper | null}
+ */
+findMixedLineBarChart(selector?: string): MixedLineBarChartWrapper | null;
+
+/**
+ * Returns an array of MixedLineBarChart wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the MixedLineBarCharts inside the current wrapper.
+ * If no matching MixedLineBarChart is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<MixedLineBarChartWrapper>}
+ */
+findAllMixedLineBarCharts(selector?: string): Array<MixedLineBarChartWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent MixedLineBarChart for the current element,
+ * or the element itself if it is an instance of MixedLineBarChart.
+ * If no MixedLineBarChart is found, returns \`null\`.
+ *
+ * @returns {MixedLineBarChartWrapper | null}
+ */
+findClosestMixedLineBarChart(): MixedLineBarChartWrapper | null;
+/**
+ * Returns the wrapper of the first Modal that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Modal.
+ * If no matching Modal is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ModalWrapper | null}
+ */
+findModal(selector?: string): ModalWrapper | null;
+
+/**
+ * Returns an array of Modal wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Modals inside the current wrapper.
+ * If no matching Modal is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ModalWrapper>}
+ */
+findAllModals(selector?: string): Array<ModalWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Modal for the current element,
+ * or the element itself if it is an instance of Modal.
+ * If no Modal is found, returns \`null\`.
+ *
+ * @returns {ModalWrapper | null}
+ */
+findClosestModal(): ModalWrapper | null;
+/**
+ * Returns the wrapper of the first Multiselect that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Multiselect.
+ * If no matching Multiselect is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {MultiselectWrapper | null}
+ */
+findMultiselect(selector?: string): MultiselectWrapper | null;
+
+/**
+ * Returns an array of Multiselect wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Multiselects inside the current wrapper.
+ * If no matching Multiselect is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<MultiselectWrapper>}
+ */
+findAllMultiselects(selector?: string): Array<MultiselectWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Multiselect for the current element,
+ * or the element itself if it is an instance of Multiselect.
+ * If no Multiselect is found, returns \`null\`.
+ *
+ * @returns {MultiselectWrapper | null}
+ */
+findClosestMultiselect(): MultiselectWrapper | null;
+/**
+ * Returns the wrapper of the first NavigableGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first NavigableGroup.
+ * If no matching NavigableGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {NavigableGroupWrapper | null}
+ */
+findNavigableGroup(selector?: string): NavigableGroupWrapper | null;
+
+/**
+ * Returns an array of NavigableGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the NavigableGroups inside the current wrapper.
+ * If no matching NavigableGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<NavigableGroupWrapper>}
+ */
+findAllNavigableGroups(selector?: string): Array<NavigableGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent NavigableGroup for the current element,
+ * or the element itself if it is an instance of NavigableGroup.
+ * If no NavigableGroup is found, returns \`null\`.
+ *
+ * @returns {NavigableGroupWrapper | null}
+ */
+findClosestNavigableGroup(): NavigableGroupWrapper | null;
+/**
+ * Returns the wrapper of the first Pagination that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Pagination.
+ * If no matching Pagination is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PaginationWrapper | null}
+ */
+findPagination(selector?: string): PaginationWrapper | null;
+
+/**
+ * Returns an array of Pagination wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Paginations inside the current wrapper.
+ * If no matching Pagination is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PaginationWrapper>}
+ */
+findAllPaginations(selector?: string): Array<PaginationWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Pagination for the current element,
+ * or the element itself if it is an instance of Pagination.
+ * If no Pagination is found, returns \`null\`.
+ *
+ * @returns {PaginationWrapper | null}
+ */
+findClosestPagination(): PaginationWrapper | null;
+/**
+ * Returns the wrapper of the first PanelLayout that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first PanelLayout.
+ * If no matching PanelLayout is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PanelLayoutWrapper | null}
+ */
+findPanelLayout(selector?: string): PanelLayoutWrapper | null;
+
+/**
+ * Returns an array of PanelLayout wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the PanelLayouts inside the current wrapper.
+ * If no matching PanelLayout is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PanelLayoutWrapper>}
+ */
+findAllPanelLayouts(selector?: string): Array<PanelLayoutWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent PanelLayout for the current element,
+ * or the element itself if it is an instance of PanelLayout.
+ * If no PanelLayout is found, returns \`null\`.
+ *
+ * @returns {PanelLayoutWrapper | null}
+ */
+findClosestPanelLayout(): PanelLayoutWrapper | null;
+/**
+ * Returns the wrapper of the first PieChart that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first PieChart.
+ * If no matching PieChart is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PieChartWrapper | null}
+ */
+findPieChart(selector?: string): PieChartWrapper | null;
+
+/**
+ * Returns an array of PieChart wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the PieCharts inside the current wrapper.
+ * If no matching PieChart is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PieChartWrapper>}
+ */
+findAllPieCharts(selector?: string): Array<PieChartWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent PieChart for the current element,
+ * or the element itself if it is an instance of PieChart.
+ * If no PieChart is found, returns \`null\`.
+ *
+ * @returns {PieChartWrapper | null}
+ */
+findClosestPieChart(): PieChartWrapper | null;
+/**
+ * Returns the wrapper of the first Popover that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Popover.
+ * If no matching Popover is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PopoverWrapper | null}
+ */
+findPopover(selector?: string): PopoverWrapper | null;
+
+/**
+ * Returns an array of Popover wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Popovers inside the current wrapper.
+ * If no matching Popover is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PopoverWrapper>}
+ */
+findAllPopovers(selector?: string): Array<PopoverWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Popover for the current element,
+ * or the element itself if it is an instance of Popover.
+ * If no Popover is found, returns \`null\`.
+ *
+ * @returns {PopoverWrapper | null}
+ */
+findClosestPopover(): PopoverWrapper | null;
+/**
+ * Returns the wrapper of the first ProgressBar that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ProgressBar.
+ * If no matching ProgressBar is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ProgressBarWrapper | null}
+ */
+findProgressBar(selector?: string): ProgressBarWrapper | null;
+
+/**
+ * Returns an array of ProgressBar wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ProgressBars inside the current wrapper.
+ * If no matching ProgressBar is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ProgressBarWrapper>}
+ */
+findAllProgressBars(selector?: string): Array<ProgressBarWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ProgressBar for the current element,
+ * or the element itself if it is an instance of ProgressBar.
+ * If no ProgressBar is found, returns \`null\`.
+ *
+ * @returns {ProgressBarWrapper | null}
+ */
+findClosestProgressBar(): ProgressBarWrapper | null;
+/**
+ * Returns the wrapper of the first PromptInput that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first PromptInput.
+ * If no matching PromptInput is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PromptInputWrapper | null}
+ */
+findPromptInput(selector?: string): PromptInputWrapper | null;
+
+/**
+ * Returns an array of PromptInput wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the PromptInputs inside the current wrapper.
+ * If no matching PromptInput is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PromptInputWrapper>}
+ */
+findAllPromptInputs(selector?: string): Array<PromptInputWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent PromptInput for the current element,
+ * or the element itself if it is an instance of PromptInput.
+ * If no PromptInput is found, returns \`null\`.
+ *
+ * @returns {PromptInputWrapper | null}
+ */
+findClosestPromptInput(): PromptInputWrapper | null;
+/**
+ * Returns the wrapper of the first PropertyFilter that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first PropertyFilter.
+ * If no matching PropertyFilter is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {PropertyFilterWrapper | null}
+ */
+findPropertyFilter(selector?: string): PropertyFilterWrapper | null;
+
+/**
+ * Returns an array of PropertyFilter wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the PropertyFilters inside the current wrapper.
+ * If no matching PropertyFilter is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<PropertyFilterWrapper>}
+ */
+findAllPropertyFilters(selector?: string): Array<PropertyFilterWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent PropertyFilter for the current element,
+ * or the element itself if it is an instance of PropertyFilter.
+ * If no PropertyFilter is found, returns \`null\`.
+ *
+ * @returns {PropertyFilterWrapper | null}
+ */
+findClosestPropertyFilter(): PropertyFilterWrapper | null;
+/**
+ * Returns the wrapper of the first RadioButton that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first RadioButton.
+ * If no matching RadioButton is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {RadioButtonWrapper | null}
+ */
+findRadioButton(selector?: string): RadioButtonWrapper | null;
+
+/**
+ * Returns an array of RadioButton wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the RadioButtons inside the current wrapper.
+ * If no matching RadioButton is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<RadioButtonWrapper>}
+ */
+findAllRadioButtons(selector?: string): Array<RadioButtonWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent RadioButton for the current element,
+ * or the element itself if it is an instance of RadioButton.
+ * If no RadioButton is found, returns \`null\`.
+ *
+ * @returns {RadioButtonWrapper | null}
+ */
+findClosestRadioButton(): RadioButtonWrapper | null;
+/**
+ * Returns the wrapper of the first RadioGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first RadioGroup.
+ * If no matching RadioGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {RadioGroupWrapper | null}
+ */
+findRadioGroup(selector?: string): RadioGroupWrapper | null;
+
+/**
+ * Returns an array of RadioGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the RadioGroups inside the current wrapper.
+ * If no matching RadioGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<RadioGroupWrapper>}
+ */
+findAllRadioGroups(selector?: string): Array<RadioGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent RadioGroup for the current element,
+ * or the element itself if it is an instance of RadioGroup.
+ * If no RadioGroup is found, returns \`null\`.
+ *
+ * @returns {RadioGroupWrapper | null}
+ */
+findClosestRadioGroup(): RadioGroupWrapper | null;
+/**
+ * Returns the wrapper of the first S3ResourceSelector that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first S3ResourceSelector.
+ * If no matching S3ResourceSelector is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {S3ResourceSelectorWrapper | null}
+ */
+findS3ResourceSelector(selector?: string): S3ResourceSelectorWrapper | null;
+
+/**
+ * Returns an array of S3ResourceSelector wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the S3ResourceSelectors inside the current wrapper.
+ * If no matching S3ResourceSelector is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<S3ResourceSelectorWrapper>}
+ */
+findAllS3ResourceSelectors(selector?: string): Array<S3ResourceSelectorWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent S3ResourceSelector for the current element,
+ * or the element itself if it is an instance of S3ResourceSelector.
+ * If no S3ResourceSelector is found, returns \`null\`.
+ *
+ * @returns {S3ResourceSelectorWrapper | null}
+ */
+findClosestS3ResourceSelector(): S3ResourceSelectorWrapper | null;
+/**
+ * Returns the wrapper of the first SegmentedControl that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first SegmentedControl.
+ * If no matching SegmentedControl is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SegmentedControlWrapper | null}
+ */
+findSegmentedControl(selector?: string): SegmentedControlWrapper | null;
+
+/**
+ * Returns an array of SegmentedControl wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the SegmentedControls inside the current wrapper.
+ * If no matching SegmentedControl is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SegmentedControlWrapper>}
+ */
+findAllSegmentedControls(selector?: string): Array<SegmentedControlWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent SegmentedControl for the current element,
+ * or the element itself if it is an instance of SegmentedControl.
+ * If no SegmentedControl is found, returns \`null\`.
+ *
+ * @returns {SegmentedControlWrapper | null}
+ */
+findClosestSegmentedControl(): SegmentedControlWrapper | null;
+/**
+ * Returns the wrapper of the first Select that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Select.
+ * If no matching Select is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SelectWrapper | null}
+ */
+findSelect(selector?: string): SelectWrapper | null;
+
+/**
+ * Returns an array of Select wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Selects inside the current wrapper.
+ * If no matching Select is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SelectWrapper>}
+ */
+findAllSelects(selector?: string): Array<SelectWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Select for the current element,
+ * or the element itself if it is an instance of Select.
+ * If no Select is found, returns \`null\`.
+ *
+ * @returns {SelectWrapper | null}
+ */
+findClosestSelect(): SelectWrapper | null;
+/**
+ * Returns the wrapper of the first SideNavigation that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first SideNavigation.
+ * If no matching SideNavigation is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SideNavigationWrapper | null}
+ */
+findSideNavigation(selector?: string): SideNavigationWrapper | null;
+
+/**
+ * Returns an array of SideNavigation wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the SideNavigations inside the current wrapper.
+ * If no matching SideNavigation is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SideNavigationWrapper>}
+ */
+findAllSideNavigations(selector?: string): Array<SideNavigationWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent SideNavigation for the current element,
+ * or the element itself if it is an instance of SideNavigation.
+ * If no SideNavigation is found, returns \`null\`.
+ *
+ * @returns {SideNavigationWrapper | null}
+ */
+findClosestSideNavigation(): SideNavigationWrapper | null;
+/**
+ * Returns the wrapper of the first Skeleton that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Skeleton.
+ * If no matching Skeleton is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SkeletonWrapper | null}
+ */
+findSkeleton(selector?: string): SkeletonWrapper | null;
+
+/**
+ * Returns an array of Skeleton wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Skeletons inside the current wrapper.
+ * If no matching Skeleton is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SkeletonWrapper>}
+ */
+findAllSkeletons(selector?: string): Array<SkeletonWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Skeleton for the current element,
+ * or the element itself if it is an instance of Skeleton.
+ * If no Skeleton is found, returns \`null\`.
+ *
+ * @returns {SkeletonWrapper | null}
+ */
+findClosestSkeleton(): SkeletonWrapper | null;
+/**
+ * Returns the wrapper of the first Slider that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Slider.
+ * If no matching Slider is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SliderWrapper | null}
+ */
+findSlider(selector?: string): SliderWrapper | null;
+
+/**
+ * Returns an array of Slider wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Sliders inside the current wrapper.
+ * If no matching Slider is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SliderWrapper>}
+ */
+findAllSliders(selector?: string): Array<SliderWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Slider for the current element,
+ * or the element itself if it is an instance of Slider.
+ * If no Slider is found, returns \`null\`.
+ *
+ * @returns {SliderWrapper | null}
+ */
+findClosestSlider(): SliderWrapper | null;
+/**
+ * Returns the wrapper of the first SpaceBetween that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first SpaceBetween.
+ * If no matching SpaceBetween is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SpaceBetweenWrapper | null}
+ */
+findSpaceBetween(selector?: string): SpaceBetweenWrapper | null;
+
+/**
+ * Returns an array of SpaceBetween wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the SpaceBetweens inside the current wrapper.
+ * If no matching SpaceBetween is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SpaceBetweenWrapper>}
+ */
+findAllSpaceBetweens(selector?: string): Array<SpaceBetweenWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent SpaceBetween for the current element,
+ * or the element itself if it is an instance of SpaceBetween.
+ * If no SpaceBetween is found, returns \`null\`.
+ *
+ * @returns {SpaceBetweenWrapper | null}
+ */
+findClosestSpaceBetween(): SpaceBetweenWrapper | null;
+/**
+ * Returns the wrapper of the first Spinner that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Spinner.
+ * If no matching Spinner is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SpinnerWrapper | null}
+ */
+findSpinner(selector?: string): SpinnerWrapper | null;
+
+/**
+ * Returns an array of Spinner wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Spinners inside the current wrapper.
+ * If no matching Spinner is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SpinnerWrapper>}
+ */
+findAllSpinners(selector?: string): Array<SpinnerWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Spinner for the current element,
+ * or the element itself if it is an instance of Spinner.
+ * If no Spinner is found, returns \`null\`.
+ *
+ * @returns {SpinnerWrapper | null}
+ */
+findClosestSpinner(): SpinnerWrapper | null;
+/**
+ * Returns the wrapper of the first SplitPanel that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first SplitPanel.
+ * If no matching SplitPanel is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {SplitPanelWrapper | null}
+ */
+findSplitPanel(selector?: string): SplitPanelWrapper | null;
+
+/**
+ * Returns an array of SplitPanel wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the SplitPanels inside the current wrapper.
+ * If no matching SplitPanel is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<SplitPanelWrapper>}
+ */
+findAllSplitPanels(selector?: string): Array<SplitPanelWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent SplitPanel for the current element,
+ * or the element itself if it is an instance of SplitPanel.
+ * If no SplitPanel is found, returns \`null\`.
+ *
+ * @returns {SplitPanelWrapper | null}
+ */
+findClosestSplitPanel(): SplitPanelWrapper | null;
+/**
+ * Returns the wrapper of the first StatusIndicator that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first StatusIndicator.
+ * If no matching StatusIndicator is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {StatusIndicatorWrapper | null}
+ */
+findStatusIndicator(selector?: string): StatusIndicatorWrapper | null;
+
+/**
+ * Returns an array of StatusIndicator wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the StatusIndicators inside the current wrapper.
+ * If no matching StatusIndicator is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<StatusIndicatorWrapper>}
+ */
+findAllStatusIndicators(selector?: string): Array<StatusIndicatorWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent StatusIndicator for the current element,
+ * or the element itself if it is an instance of StatusIndicator.
+ * If no StatusIndicator is found, returns \`null\`.
+ *
+ * @returns {StatusIndicatorWrapper | null}
+ */
+findClosestStatusIndicator(): StatusIndicatorWrapper | null;
+/**
+ * Returns the wrapper of the first Steps that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Steps.
+ * If no matching Steps is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {StepsWrapper | null}
+ */
+findSteps(selector?: string): StepsWrapper | null;
+
+/**
+ * Returns an array of Steps wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Steps inside the current wrapper.
+ * If no matching Steps is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<StepsWrapper>}
+ */
+findAllSteps(selector?: string): Array<StepsWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Steps for the current element,
+ * or the element itself if it is an instance of Steps.
+ * If no Steps is found, returns \`null\`.
+ *
+ * @returns {StepsWrapper | null}
+ */
+findClosestSteps(): StepsWrapper | null;
+/**
+ * Returns the wrapper of the first Table that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Table.
+ * If no matching Table is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TableWrapper | null}
+ */
+findTable(selector?: string): TableWrapper | null;
+
+/**
+ * Returns an array of Table wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Tables inside the current wrapper.
+ * If no matching Table is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TableWrapper>}
+ */
+findAllTables(selector?: string): Array<TableWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Table for the current element,
+ * or the element itself if it is an instance of Table.
+ * If no Table is found, returns \`null\`.
+ *
+ * @returns {TableWrapper | null}
+ */
+findClosestTable(): TableWrapper | null;
+/**
+ * Returns the wrapper of the first Tabs that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Tabs.
+ * If no matching Tabs is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TabsWrapper | null}
+ */
+findTabs(selector?: string): TabsWrapper | null;
+
+/**
+ * Returns an array of Tabs wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Tabs inside the current wrapper.
+ * If no matching Tabs is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TabsWrapper>}
+ */
+findAllTabs(selector?: string): Array<TabsWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Tabs for the current element,
+ * or the element itself if it is an instance of Tabs.
+ * If no Tabs is found, returns \`null\`.
+ *
+ * @returns {TabsWrapper | null}
+ */
+findClosestTabs(): TabsWrapper | null;
+/**
+ * Returns the wrapper of the first TagEditor that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TagEditor.
+ * If no matching TagEditor is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TagEditorWrapper | null}
+ */
+findTagEditor(selector?: string): TagEditorWrapper | null;
+
+/**
+ * Returns an array of TagEditor wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TagEditors inside the current wrapper.
+ * If no matching TagEditor is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TagEditorWrapper>}
+ */
+findAllTagEditors(selector?: string): Array<TagEditorWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TagEditor for the current element,
+ * or the element itself if it is an instance of TagEditor.
+ * If no TagEditor is found, returns \`null\`.
+ *
+ * @returns {TagEditorWrapper | null}
+ */
+findClosestTagEditor(): TagEditorWrapper | null;
+/**
+ * Returns the wrapper of the first TextContent that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TextContent.
+ * If no matching TextContent is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TextContentWrapper | null}
+ */
+findTextContent(selector?: string): TextContentWrapper | null;
+
+/**
+ * Returns an array of TextContent wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TextContents inside the current wrapper.
+ * If no matching TextContent is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TextContentWrapper>}
+ */
+findAllTextContents(selector?: string): Array<TextContentWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TextContent for the current element,
+ * or the element itself if it is an instance of TextContent.
+ * If no TextContent is found, returns \`null\`.
+ *
+ * @returns {TextContentWrapper | null}
+ */
+findClosestTextContent(): TextContentWrapper | null;
+/**
+ * Returns the wrapper of the first TextFilter that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TextFilter.
+ * If no matching TextFilter is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TextFilterWrapper | null}
+ */
+findTextFilter(selector?: string): TextFilterWrapper | null;
+
+/**
+ * Returns an array of TextFilter wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TextFilters inside the current wrapper.
+ * If no matching TextFilter is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TextFilterWrapper>}
+ */
+findAllTextFilters(selector?: string): Array<TextFilterWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TextFilter for the current element,
+ * or the element itself if it is an instance of TextFilter.
+ * If no TextFilter is found, returns \`null\`.
+ *
+ * @returns {TextFilterWrapper | null}
+ */
+findClosestTextFilter(): TextFilterWrapper | null;
+/**
+ * Returns the wrapper of the first Textarea that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Textarea.
+ * If no matching Textarea is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TextareaWrapper | null}
+ */
+findTextarea(selector?: string): TextareaWrapper | null;
+
+/**
+ * Returns an array of Textarea wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Textareas inside the current wrapper.
+ * If no matching Textarea is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TextareaWrapper>}
+ */
+findAllTextareas(selector?: string): Array<TextareaWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Textarea for the current element,
+ * or the element itself if it is an instance of Textarea.
+ * If no Textarea is found, returns \`null\`.
+ *
+ * @returns {TextareaWrapper | null}
+ */
+findClosestTextarea(): TextareaWrapper | null;
+/**
+ * Returns the wrapper of the first Tiles that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Tiles.
+ * If no matching Tiles is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TilesWrapper | null}
+ */
+findTiles(selector?: string): TilesWrapper | null;
+
+/**
+ * Returns an array of Tiles wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Tiles inside the current wrapper.
+ * If no matching Tiles is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TilesWrapper>}
+ */
+findAllTiles(selector?: string): Array<TilesWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Tiles for the current element,
+ * or the element itself if it is an instance of Tiles.
+ * If no Tiles is found, returns \`null\`.
+ *
+ * @returns {TilesWrapper | null}
+ */
+findClosestTiles(): TilesWrapper | null;
+/**
+ * Returns the wrapper of the first TimeInput that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TimeInput.
+ * If no matching TimeInput is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TimeInputWrapper | null}
+ */
+findTimeInput(selector?: string): TimeInputWrapper | null;
+
+/**
+ * Returns an array of TimeInput wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TimeInputs inside the current wrapper.
+ * If no matching TimeInput is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TimeInputWrapper>}
+ */
+findAllTimeInputs(selector?: string): Array<TimeInputWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TimeInput for the current element,
+ * or the element itself if it is an instance of TimeInput.
+ * If no TimeInput is found, returns \`null\`.
+ *
+ * @returns {TimeInputWrapper | null}
+ */
+findClosestTimeInput(): TimeInputWrapper | null;
+/**
+ * Returns the wrapper of the first Toggle that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Toggle.
+ * If no matching Toggle is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ToggleWrapper | null}
+ */
+findToggle(selector?: string): ToggleWrapper | null;
+
+/**
+ * Returns an array of Toggle wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Toggles inside the current wrapper.
+ * If no matching Toggle is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ToggleWrapper>}
+ */
+findAllToggles(selector?: string): Array<ToggleWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Toggle for the current element,
+ * or the element itself if it is an instance of Toggle.
+ * If no Toggle is found, returns \`null\`.
+ *
+ * @returns {ToggleWrapper | null}
+ */
+findClosestToggle(): ToggleWrapper | null;
+/**
+ * Returns the wrapper of the first ToggleButton that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first ToggleButton.
+ * If no matching ToggleButton is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {ToggleButtonWrapper | null}
+ */
+findToggleButton(selector?: string): ToggleButtonWrapper | null;
+
+/**
+ * Returns an array of ToggleButton wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the ToggleButtons inside the current wrapper.
+ * If no matching ToggleButton is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<ToggleButtonWrapper>}
+ */
+findAllToggleButtons(selector?: string): Array<ToggleButtonWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent ToggleButton for the current element,
+ * or the element itself if it is an instance of ToggleButton.
+ * If no ToggleButton is found, returns \`null\`.
+ *
+ * @returns {ToggleButtonWrapper | null}
+ */
+findClosestToggleButton(): ToggleButtonWrapper | null;
+/**
+ * Returns the wrapper of the first Token that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Token.
+ * If no matching Token is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TokenWrapper | null}
+ */
+findToken(selector?: string): TokenWrapper | null;
+
+/**
+ * Returns an array of Token wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Tokens inside the current wrapper.
+ * If no matching Token is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TokenWrapper>}
+ */
+findAllTokens(selector?: string): Array<TokenWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Token for the current element,
+ * or the element itself if it is an instance of Token.
+ * If no Token is found, returns \`null\`.
+ *
+ * @returns {TokenWrapper | null}
+ */
+findClosestToken(): TokenWrapper | null;
+/**
+ * Returns the wrapper of the first TokenGroup that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TokenGroup.
+ * If no matching TokenGroup is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TokenGroupWrapper | null}
+ */
+findTokenGroup(selector?: string): TokenGroupWrapper | null;
+
+/**
+ * Returns an array of TokenGroup wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TokenGroups inside the current wrapper.
+ * If no matching TokenGroup is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TokenGroupWrapper>}
+ */
+findAllTokenGroups(selector?: string): Array<TokenGroupWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TokenGroup for the current element,
+ * or the element itself if it is an instance of TokenGroup.
+ * If no TokenGroup is found, returns \`null\`.
+ *
+ * @returns {TokenGroupWrapper | null}
+ */
+findClosestTokenGroup(): TokenGroupWrapper | null;
+/**
+ * Returns the wrapper of the first Tooltip that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Tooltip.
+ * If no matching Tooltip is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TooltipWrapper | null}
+ */
+findTooltip(selector?: string): TooltipWrapper | null;
+
+/**
+ * Returns an array of Tooltip wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Tooltips inside the current wrapper.
+ * If no matching Tooltip is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TooltipWrapper>}
+ */
+findAllTooltips(selector?: string): Array<TooltipWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Tooltip for the current element,
+ * or the element itself if it is an instance of Tooltip.
+ * If no Tooltip is found, returns \`null\`.
+ *
+ * @returns {TooltipWrapper | null}
+ */
+findClosestTooltip(): TooltipWrapper | null;
+/**
+ * Returns the wrapper of the first TopNavigation that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TopNavigation.
+ * If no matching TopNavigation is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TopNavigationWrapper | null}
+ */
+findTopNavigation(selector?: string): TopNavigationWrapper | null;
+
+/**
+ * Returns an array of TopNavigation wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TopNavigations inside the current wrapper.
+ * If no matching TopNavigation is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TopNavigationWrapper>}
+ */
+findAllTopNavigations(selector?: string): Array<TopNavigationWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TopNavigation for the current element,
+ * or the element itself if it is an instance of TopNavigation.
+ * If no TopNavigation is found, returns \`null\`.
+ *
+ * @returns {TopNavigationWrapper | null}
+ */
+findClosestTopNavigation(): TopNavigationWrapper | null;
+/**
+ * Returns the wrapper of the first TreeView that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TreeView.
+ * If no matching TreeView is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TreeViewWrapper | null}
+ */
+findTreeView(selector?: string): TreeViewWrapper | null;
+
+/**
+ * Returns an array of TreeView wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TreeViews inside the current wrapper.
+ * If no matching TreeView is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TreeViewWrapper>}
+ */
+findAllTreeViews(selector?: string): Array<TreeViewWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TreeView for the current element,
+ * or the element itself if it is an instance of TreeView.
+ * If no TreeView is found, returns \`null\`.
+ *
+ * @returns {TreeViewWrapper | null}
+ */
+findClosestTreeView(): TreeViewWrapper | null;
+/**
+ * Returns the wrapper of the first TruncatedText that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TruncatedText.
+ * If no matching TruncatedText is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TruncatedTextWrapper | null}
+ */
+findTruncatedText(selector?: string): TruncatedTextWrapper | null;
+
+/**
+ * Returns an array of TruncatedText wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TruncatedTexts inside the current wrapper.
+ * If no matching TruncatedText is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TruncatedTextWrapper>}
+ */
+findAllTruncatedTexts(selector?: string): Array<TruncatedTextWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TruncatedText for the current element,
+ * or the element itself if it is an instance of TruncatedText.
+ * If no TruncatedText is found, returns \`null\`.
+ *
+ * @returns {TruncatedTextWrapper | null}
+ */
+findClosestTruncatedText(): TruncatedTextWrapper | null;
+/**
+ * Returns the wrapper of the first TutorialPanel that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TutorialPanel.
+ * If no matching TutorialPanel is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TutorialPanelWrapper | null}
+ */
+findTutorialPanel(selector?: string): TutorialPanelWrapper | null;
+
+/**
+ * Returns an array of TutorialPanel wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TutorialPanels inside the current wrapper.
+ * If no matching TutorialPanel is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TutorialPanelWrapper>}
+ */
+findAllTutorialPanels(selector?: string): Array<TutorialPanelWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent TutorialPanel for the current element,
+ * or the element itself if it is an instance of TutorialPanel.
+ * If no TutorialPanel is found, returns \`null\`.
+ *
+ * @returns {TutorialPanelWrapper | null}
+ */
+findClosestTutorialPanel(): TutorialPanelWrapper | null;
+/**
+ * Returns the wrapper of the first Wizard that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first Wizard.
+ * If no matching Wizard is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {WizardWrapper | null}
+ */
+findWizard(selector?: string): WizardWrapper | null;
+
+/**
+ * Returns an array of Wizard wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the Wizards inside the current wrapper.
+ * If no matching Wizard is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<WizardWrapper>}
+ */
+findAllWizards(selector?: string): Array<WizardWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent Wizard for the current element,
+ * or the element itself if it is an instance of Wizard.
+ * If no Wizard is found, returns \`null\`.
+ *
+ * @returns {WizardWrapper | null}
+ */
+findClosestWizard(): WizardWrapper | null;
+   }
+}
+
+
+ElementWrapper.prototype.findActionCard = function(selector) {
+  let rootSelector = \`.\${ActionCardWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ActionCardWrapper && ActionCardWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ActionCardWrapper.rootSelector}, .\${ActionCardWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ActionCardWrapper);
+};
+
+ElementWrapper.prototype.findAllActionCards = function(selector) {
+  return this.findAllComponents(ActionCardWrapper, selector);
+};
+ElementWrapper.prototype.findAlert = function(selector) {
+  let rootSelector = \`.\${AlertWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AlertWrapper && AlertWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AlertWrapper.rootSelector}, .\${AlertWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AlertWrapper);
+};
+
+ElementWrapper.prototype.findAllAlerts = function(selector) {
+  return this.findAllComponents(AlertWrapper, selector);
+};
+ElementWrapper.prototype.findAnchorNavigation = function(selector) {
+  let rootSelector = \`.\${AnchorNavigationWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AnchorNavigationWrapper && AnchorNavigationWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AnchorNavigationWrapper.rootSelector}, .\${AnchorNavigationWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AnchorNavigationWrapper);
+};
+
+ElementWrapper.prototype.findAllAnchorNavigations = function(selector) {
+  return this.findAllComponents(AnchorNavigationWrapper, selector);
+};
+ElementWrapper.prototype.findAnnotation = function(selector) {
+  let rootSelector = \`.\${AnnotationWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AnnotationWrapper && AnnotationWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AnnotationWrapper.rootSelector}, .\${AnnotationWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AnnotationWrapper);
+};
+
+ElementWrapper.prototype.findAllAnnotations = function(selector) {
+  return this.findAllComponents(AnnotationWrapper, selector);
+};
+ElementWrapper.prototype.findAppLayout = function(selector) {
+  let rootSelector = \`.\${AppLayoutWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AppLayoutWrapper && AppLayoutWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AppLayoutWrapper.rootSelector}, .\${AppLayoutWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AppLayoutWrapper);
+};
+
+ElementWrapper.prototype.findAllAppLayouts = function(selector) {
+  return this.findAllComponents(AppLayoutWrapper, selector);
+};
+ElementWrapper.prototype.findAppLayoutToolbar = function(selector) {
+  let rootSelector = \`.\${AppLayoutToolbarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AppLayoutToolbarWrapper && AppLayoutToolbarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AppLayoutToolbarWrapper.rootSelector}, .\${AppLayoutToolbarWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AppLayoutToolbarWrapper);
+};
+
+ElementWrapper.prototype.findAllAppLayoutToolbars = function(selector) {
+  return this.findAllComponents(AppLayoutToolbarWrapper, selector);
+};
+ElementWrapper.prototype.findAreaChart = function(selector) {
+  let rootSelector = \`.\${AreaChartWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AreaChartWrapper && AreaChartWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AreaChartWrapper.rootSelector}, .\${AreaChartWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AreaChartWrapper);
+};
+
+ElementWrapper.prototype.findAllAreaCharts = function(selector) {
+  return this.findAllComponents(AreaChartWrapper, selector);
+};
+ElementWrapper.prototype.findAttributeEditor = function(selector) {
+  let rootSelector = \`.\${AttributeEditorWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AttributeEditorWrapper && AttributeEditorWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AttributeEditorWrapper.rootSelector}, .\${AttributeEditorWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AttributeEditorWrapper);
+};
+
+ElementWrapper.prototype.findAllAttributeEditors = function(selector) {
+  return this.findAllComponents(AttributeEditorWrapper, selector);
+};
+ElementWrapper.prototype.findAutosuggest = function(selector) {
+  let rootSelector = \`.\${AutosuggestWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AutosuggestWrapper && AutosuggestWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AutosuggestWrapper.rootSelector}, .\${AutosuggestWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AutosuggestWrapper);
+};
+
+ElementWrapper.prototype.findAllAutosuggests = function(selector) {
+  return this.findAllComponents(AutosuggestWrapper, selector);
+};
+ElementWrapper.prototype.findBadge = function(selector) {
+  let rootSelector = \`.\${BadgeWrapper.rootSelector}\`;
+  if("legacyRootSelector" in BadgeWrapper && BadgeWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${BadgeWrapper.rootSelector}, .\${BadgeWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BadgeWrapper);
+};
+
+ElementWrapper.prototype.findAllBadges = function(selector) {
+  return this.findAllComponents(BadgeWrapper, selector);
+};
+ElementWrapper.prototype.findBarChart = function(selector) {
+  let rootSelector = \`.\${BarChartWrapper.rootSelector}\`;
+  if("legacyRootSelector" in BarChartWrapper && BarChartWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${BarChartWrapper.rootSelector}, .\${BarChartWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BarChartWrapper);
+};
+
+ElementWrapper.prototype.findAllBarCharts = function(selector) {
+  return this.findAllComponents(BarChartWrapper, selector);
+};
+ElementWrapper.prototype.findBox = function(selector) {
+  let rootSelector = \`.\${BoxWrapper.rootSelector}\`;
+  if("legacyRootSelector" in BoxWrapper && BoxWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${BoxWrapper.rootSelector}, .\${BoxWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoxWrapper);
+};
+
+ElementWrapper.prototype.findAllBoxes = function(selector) {
+  return this.findAllComponents(BoxWrapper, selector);
+};
+ElementWrapper.prototype.findBreadcrumbGroup = function(selector) {
+  let rootSelector = \`.\${BreadcrumbGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in BreadcrumbGroupWrapper && BreadcrumbGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${BreadcrumbGroupWrapper.rootSelector}, .\${BreadcrumbGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BreadcrumbGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllBreadcrumbGroups = function(selector) {
+  return this.findAllComponents(BreadcrumbGroupWrapper, selector);
+};
+ElementWrapper.prototype.findButton = function(selector) {
+  let rootSelector = \`.\${ButtonWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ButtonWrapper && ButtonWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ButtonWrapper.rootSelector}, .\${ButtonWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonWrapper);
+};
+
+ElementWrapper.prototype.findAllButtons = function(selector) {
+  return this.findAllComponents(ButtonWrapper, selector);
+};
+ElementWrapper.prototype.findButtonDropdown = function(selector) {
+  let rootSelector = \`.\${ButtonDropdownWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ButtonDropdownWrapper && ButtonDropdownWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ButtonDropdownWrapper.rootSelector}, .\${ButtonDropdownWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonDropdownWrapper);
+};
+
+ElementWrapper.prototype.findAllButtonDropdowns = function(selector) {
+  return this.findAllComponents(ButtonDropdownWrapper, selector);
+};
+ElementWrapper.prototype.findButtonGroup = function(selector) {
+  let rootSelector = \`.\${ButtonGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ButtonGroupWrapper && ButtonGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ButtonGroupWrapper.rootSelector}, .\${ButtonGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ButtonGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllButtonGroups = function(selector) {
+  return this.findAllComponents(ButtonGroupWrapper, selector);
+};
+ElementWrapper.prototype.findCalendar = function(selector) {
+  let rootSelector = \`.\${CalendarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CalendarWrapper && CalendarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CalendarWrapper.rootSelector}, .\${CalendarWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CalendarWrapper);
+};
+
+ElementWrapper.prototype.findAllCalendars = function(selector) {
+  return this.findAllComponents(CalendarWrapper, selector);
+};
+ElementWrapper.prototype.findCards = function(selector) {
+  let rootSelector = \`.\${CardsWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CardsWrapper && CardsWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CardsWrapper.rootSelector}, .\${CardsWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CardsWrapper);
+};
+
+ElementWrapper.prototype.findAllCards = function(selector) {
+  return this.findAllComponents(CardsWrapper, selector);
+};
+ElementWrapper.prototype.findCheckbox = function(selector) {
+  let rootSelector = \`.\${CheckboxWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CheckboxWrapper && CheckboxWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CheckboxWrapper.rootSelector}, .\${CheckboxWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CheckboxWrapper);
+};
+
+ElementWrapper.prototype.findAllCheckboxes = function(selector) {
+  return this.findAllComponents(CheckboxWrapper, selector);
+};
+ElementWrapper.prototype.findCodeEditor = function(selector) {
+  let rootSelector = \`.\${CodeEditorWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CodeEditorWrapper && CodeEditorWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CodeEditorWrapper.rootSelector}, .\${CodeEditorWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CodeEditorWrapper);
+};
+
+ElementWrapper.prototype.findAllCodeEditors = function(selector) {
+  return this.findAllComponents(CodeEditorWrapper, selector);
+};
+ElementWrapper.prototype.findCollectionPreferences = function(selector) {
+  let rootSelector = \`.\${CollectionPreferencesWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CollectionPreferencesWrapper && CollectionPreferencesWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CollectionPreferencesWrapper.rootSelector}, .\${CollectionPreferencesWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CollectionPreferencesWrapper);
+};
+
+ElementWrapper.prototype.findAllCollectionPreferences = function(selector) {
+  return this.findAllComponents(CollectionPreferencesWrapper, selector);
+};
+ElementWrapper.prototype.findColumnLayout = function(selector) {
+  let rootSelector = \`.\${ColumnLayoutWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ColumnLayoutWrapper && ColumnLayoutWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ColumnLayoutWrapper.rootSelector}, .\${ColumnLayoutWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ColumnLayoutWrapper);
+};
+
+ElementWrapper.prototype.findAllColumnLayouts = function(selector) {
+  return this.findAllComponents(ColumnLayoutWrapper, selector);
+};
+ElementWrapper.prototype.findContainer = function(selector) {
+  let rootSelector = \`.\${ContainerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ContainerWrapper && ContainerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ContainerWrapper.rootSelector}, .\${ContainerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ContainerWrapper);
+};
+
+ElementWrapper.prototype.findAllContainers = function(selector) {
+  return this.findAllComponents(ContainerWrapper, selector);
+};
+ElementWrapper.prototype.findContentLayout = function(selector) {
+  let rootSelector = \`.\${ContentLayoutWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ContentLayoutWrapper && ContentLayoutWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ContentLayoutWrapper.rootSelector}, .\${ContentLayoutWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ContentLayoutWrapper);
+};
+
+ElementWrapper.prototype.findAllContentLayouts = function(selector) {
+  return this.findAllComponents(ContentLayoutWrapper, selector);
+};
+ElementWrapper.prototype.findCopyToClipboard = function(selector) {
+  let rootSelector = \`.\${CopyToClipboardWrapper.rootSelector}\`;
+  if("legacyRootSelector" in CopyToClipboardWrapper && CopyToClipboardWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${CopyToClipboardWrapper.rootSelector}, .\${CopyToClipboardWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, CopyToClipboardWrapper);
+};
+
+ElementWrapper.prototype.findAllCopyToClipboards = function(selector) {
+  return this.findAllComponents(CopyToClipboardWrapper, selector);
+};
+ElementWrapper.prototype.findDateInput = function(selector) {
+  let rootSelector = \`.\${DateInputWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DateInputWrapper && DateInputWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DateInputWrapper.rootSelector}, .\${DateInputWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DateInputWrapper);
+};
+
+ElementWrapper.prototype.findAllDateInputs = function(selector) {
+  return this.findAllComponents(DateInputWrapper, selector);
+};
+ElementWrapper.prototype.findDatePicker = function(selector) {
+  let rootSelector = \`.\${DatePickerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DatePickerWrapper && DatePickerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DatePickerWrapper.rootSelector}, .\${DatePickerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DatePickerWrapper);
+};
+
+ElementWrapper.prototype.findAllDatePickers = function(selector) {
+  return this.findAllComponents(DatePickerWrapper, selector);
+};
+ElementWrapper.prototype.findDateRangePicker = function(selector) {
+  let rootSelector = \`.\${DateRangePickerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DateRangePickerWrapper && DateRangePickerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DateRangePickerWrapper.rootSelector}, .\${DateRangePickerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DateRangePickerWrapper);
+};
+
+ElementWrapper.prototype.findAllDateRangePickers = function(selector) {
+  return this.findAllComponents(DateRangePickerWrapper, selector);
+};
+ElementWrapper.prototype.findDivider = function(selector) {
+  let rootSelector = \`.\${DividerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DividerWrapper && DividerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DividerWrapper.rootSelector}, .\${DividerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DividerWrapper);
+};
+
+ElementWrapper.prototype.findAllDividers = function(selector) {
+  return this.findAllComponents(DividerWrapper, selector);
+};
+ElementWrapper.prototype.findDrawer = function(selector) {
+  let rootSelector = \`.\${DrawerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DrawerWrapper && DrawerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DrawerWrapper.rootSelector}, .\${DrawerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DrawerWrapper);
+};
+
+ElementWrapper.prototype.findAllDrawers = function(selector) {
+  return this.findAllComponents(DrawerWrapper, selector);
+};
+ElementWrapper.prototype.findDropdown = function(selector) {
+  let rootSelector = \`.\${DropdownWrapper.rootSelector}\`;
+  if("legacyRootSelector" in DropdownWrapper && DropdownWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${DropdownWrapper.rootSelector}, .\${DropdownWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, DropdownWrapper);
+};
+
+ElementWrapper.prototype.findAllDropdowns = function(selector) {
+  return this.findAllComponents(DropdownWrapper, selector);
+};
+ElementWrapper.prototype.findErrorBoundary = function(selector) {
+  let rootSelector = \`.\${ErrorBoundaryWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ErrorBoundaryWrapper && ErrorBoundaryWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ErrorBoundaryWrapper.rootSelector}, .\${ErrorBoundaryWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ErrorBoundaryWrapper);
+};
+
+ElementWrapper.prototype.findAllErrorBoundaries = function(selector) {
+  return this.findAllComponents(ErrorBoundaryWrapper, selector);
+};
+ElementWrapper.prototype.findExpandableSection = function(selector) {
+  let rootSelector = \`.\${ExpandableSectionWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ExpandableSectionWrapper && ExpandableSectionWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ExpandableSectionWrapper.rootSelector}, .\${ExpandableSectionWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ExpandableSectionWrapper);
+};
+
+ElementWrapper.prototype.findAllExpandableSections = function(selector) {
+  return this.findAllComponents(ExpandableSectionWrapper, selector);
+};
+ElementWrapper.prototype.findFileDropzone = function(selector) {
+  let rootSelector = \`.\${FileDropzoneWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FileDropzoneWrapper && FileDropzoneWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FileDropzoneWrapper.rootSelector}, .\${FileDropzoneWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileDropzoneWrapper);
+};
+
+ElementWrapper.prototype.findAllFileDropzones = function(selector) {
+  return this.findAllComponents(FileDropzoneWrapper, selector);
+};
+ElementWrapper.prototype.findFileInput = function(selector) {
+  let rootSelector = \`.\${FileInputWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FileInputWrapper && FileInputWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FileInputWrapper.rootSelector}, .\${FileInputWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileInputWrapper);
+};
+
+ElementWrapper.prototype.findAllFileInputs = function(selector) {
+  return this.findAllComponents(FileInputWrapper, selector);
+};
+ElementWrapper.prototype.findFileTokenGroup = function(selector) {
+  let rootSelector = \`.\${FileTokenGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FileTokenGroupWrapper && FileTokenGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FileTokenGroupWrapper.rootSelector}, .\${FileTokenGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileTokenGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllFileTokenGroups = function(selector) {
+  return this.findAllComponents(FileTokenGroupWrapper, selector);
+};
+ElementWrapper.prototype.findFileUpload = function(selector) {
+  let rootSelector = \`.\${FileUploadWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FileUploadWrapper && FileUploadWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FileUploadWrapper.rootSelector}, .\${FileUploadWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileUploadWrapper);
+};
+
+ElementWrapper.prototype.findAllFileUploads = function(selector) {
+  return this.findAllComponents(FileUploadWrapper, selector);
+};
+ElementWrapper.prototype.findFlashbar = function(selector) {
+  let rootSelector = \`.\${FlashbarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FlashbarWrapper && FlashbarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FlashbarWrapper.rootSelector}, .\${FlashbarWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FlashbarWrapper);
+};
+
+ElementWrapper.prototype.findAllFlashbars = function(selector) {
+  return this.findAllComponents(FlashbarWrapper, selector);
+};
+ElementWrapper.prototype.findForm = function(selector) {
+  let rootSelector = \`.\${FormWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FormWrapper && FormWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FormWrapper.rootSelector}, .\${FormWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FormWrapper);
+};
+
+ElementWrapper.prototype.findAllForms = function(selector) {
+  return this.findAllComponents(FormWrapper, selector);
+};
+ElementWrapper.prototype.findFormField = function(selector) {
+  let rootSelector = \`.\${FormFieldWrapper.rootSelector}\`;
+  if("legacyRootSelector" in FormFieldWrapper && FormFieldWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${FormFieldWrapper.rootSelector}, .\${FormFieldWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FormFieldWrapper);
+};
+
+ElementWrapper.prototype.findAllFormFields = function(selector) {
+  return this.findAllComponents(FormFieldWrapper, selector);
+};
+ElementWrapper.prototype.findGrid = function(selector) {
+  let rootSelector = \`.\${GridWrapper.rootSelector}\`;
+  if("legacyRootSelector" in GridWrapper && GridWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${GridWrapper.rootSelector}, .\${GridWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, GridWrapper);
+};
+
+ElementWrapper.prototype.findAllGrids = function(selector) {
+  return this.findAllComponents(GridWrapper, selector);
+};
+ElementWrapper.prototype.findHeader = function(selector) {
+  let rootSelector = \`.\${HeaderWrapper.rootSelector}\`;
+  if("legacyRootSelector" in HeaderWrapper && HeaderWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${HeaderWrapper.rootSelector}, .\${HeaderWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HeaderWrapper);
+};
+
+ElementWrapper.prototype.findAllHeaders = function(selector) {
+  return this.findAllComponents(HeaderWrapper, selector);
+};
+ElementWrapper.prototype.findHelpPanel = function(selector) {
+  let rootSelector = \`.\${HelpPanelWrapper.rootSelector}\`;
+  if("legacyRootSelector" in HelpPanelWrapper && HelpPanelWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${HelpPanelWrapper.rootSelector}, .\${HelpPanelWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HelpPanelWrapper);
+};
+
+ElementWrapper.prototype.findAllHelpPanels = function(selector) {
+  return this.findAllComponents(HelpPanelWrapper, selector);
+};
+ElementWrapper.prototype.findHotspot = function(selector) {
+  let rootSelector = \`.\${HotspotWrapper.rootSelector}\`;
+  if("legacyRootSelector" in HotspotWrapper && HotspotWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${HotspotWrapper.rootSelector}, .\${HotspotWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, HotspotWrapper);
+};
+
+ElementWrapper.prototype.findAllHotspots = function(selector) {
+  return this.findAllComponents(HotspotWrapper, selector);
+};
+ElementWrapper.prototype.findIcon = function(selector) {
+  let rootSelector = \`.\${IconWrapper.rootSelector}\`;
+  if("legacyRootSelector" in IconWrapper && IconWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${IconWrapper.rootSelector}, .\${IconWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, IconWrapper);
+};
+
+ElementWrapper.prototype.findAllIcons = function(selector) {
+  return this.findAllComponents(IconWrapper, selector);
+};
+ElementWrapper.prototype.findInput = function(selector) {
+  let rootSelector = \`.\${InputWrapper.rootSelector}\`;
+  if("legacyRootSelector" in InputWrapper && InputWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${InputWrapper.rootSelector}, .\${InputWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, InputWrapper);
+};
+
+ElementWrapper.prototype.findAllInputs = function(selector) {
+  return this.findAllComponents(InputWrapper, selector);
+};
+ElementWrapper.prototype.findItemCard = function(selector) {
+  let rootSelector = \`.\${ItemCardWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ItemCardWrapper && ItemCardWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ItemCardWrapper.rootSelector}, .\${ItemCardWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemCardWrapper);
+};
+
+ElementWrapper.prototype.findAllItemCards = function(selector) {
+  return this.findAllComponents(ItemCardWrapper, selector);
+};
+ElementWrapper.prototype.findKeyValuePairs = function(selector) {
+  let rootSelector = \`.\${KeyValuePairsWrapper.rootSelector}\`;
+  if("legacyRootSelector" in KeyValuePairsWrapper && KeyValuePairsWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${KeyValuePairsWrapper.rootSelector}, .\${KeyValuePairsWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, KeyValuePairsWrapper);
+};
+
+ElementWrapper.prototype.findAllKeyValuePairs = function(selector) {
+  return this.findAllComponents(KeyValuePairsWrapper, selector);
+};
+ElementWrapper.prototype.findLineChart = function(selector) {
+  let rootSelector = \`.\${LineChartWrapper.rootSelector}\`;
+  if("legacyRootSelector" in LineChartWrapper && LineChartWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${LineChartWrapper.rootSelector}, .\${LineChartWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LineChartWrapper);
+};
+
+ElementWrapper.prototype.findAllLineCharts = function(selector) {
+  return this.findAllComponents(LineChartWrapper, selector);
+};
+ElementWrapper.prototype.findLink = function(selector) {
+  let rootSelector = \`.\${LinkWrapper.rootSelector}\`;
+  if("legacyRootSelector" in LinkWrapper && LinkWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${LinkWrapper.rootSelector}, .\${LinkWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LinkWrapper);
+};
+
+ElementWrapper.prototype.findAllLinks = function(selector) {
+  return this.findAllComponents(LinkWrapper, selector);
+};
+ElementWrapper.prototype.findList = function(selector) {
+  let rootSelector = \`.\${ListWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ListWrapper && ListWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ListWrapper.rootSelector}, .\${ListWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ListWrapper);
+};
+
+ElementWrapper.prototype.findAllLists = function(selector) {
+  return this.findAllComponents(ListWrapper, selector);
+};
+ElementWrapper.prototype.findLiveRegion = function(selector) {
+  let rootSelector = \`.\${LiveRegionWrapper.rootSelector}\`;
+  if("legacyRootSelector" in LiveRegionWrapper && LiveRegionWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${LiveRegionWrapper.rootSelector}, .\${LiveRegionWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LiveRegionWrapper);
+};
+
+ElementWrapper.prototype.findAllLiveRegions = function(selector) {
+  return this.findAllComponents(LiveRegionWrapper, selector);
+};
+ElementWrapper.prototype.findMixedLineBarChart = function(selector) {
+  let rootSelector = \`.\${MixedLineBarChartWrapper.rootSelector}\`;
+  if("legacyRootSelector" in MixedLineBarChartWrapper && MixedLineBarChartWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${MixedLineBarChartWrapper.rootSelector}, .\${MixedLineBarChartWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, MixedLineBarChartWrapper);
+};
+
+ElementWrapper.prototype.findAllMixedLineBarCharts = function(selector) {
+  return this.findAllComponents(MixedLineBarChartWrapper, selector);
+};
+ElementWrapper.prototype.findModal = function(selector) {
+  let rootSelector = \`.\${ModalWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ModalWrapper && ModalWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ModalWrapper.rootSelector}, .\${ModalWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ModalWrapper);
+};
+
+ElementWrapper.prototype.findAllModals = function(selector) {
+  return this.findAllComponents(ModalWrapper, selector);
+};
+ElementWrapper.prototype.findMultiselect = function(selector) {
+  let rootSelector = \`.\${MultiselectWrapper.rootSelector}\`;
+  if("legacyRootSelector" in MultiselectWrapper && MultiselectWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${MultiselectWrapper.rootSelector}, .\${MultiselectWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, MultiselectWrapper);
+};
+
+ElementWrapper.prototype.findAllMultiselects = function(selector) {
+  return this.findAllComponents(MultiselectWrapper, selector);
+};
+ElementWrapper.prototype.findNavigableGroup = function(selector) {
+  let rootSelector = \`.\${NavigableGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in NavigableGroupWrapper && NavigableGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${NavigableGroupWrapper.rootSelector}, .\${NavigableGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, NavigableGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllNavigableGroups = function(selector) {
+  return this.findAllComponents(NavigableGroupWrapper, selector);
+};
+ElementWrapper.prototype.findPagination = function(selector) {
+  let rootSelector = \`.\${PaginationWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PaginationWrapper && PaginationWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PaginationWrapper.rootSelector}, .\${PaginationWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PaginationWrapper);
+};
+
+ElementWrapper.prototype.findAllPaginations = function(selector) {
+  return this.findAllComponents(PaginationWrapper, selector);
+};
+ElementWrapper.prototype.findPanelLayout = function(selector) {
+  let rootSelector = \`.\${PanelLayoutWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PanelLayoutWrapper && PanelLayoutWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PanelLayoutWrapper.rootSelector}, .\${PanelLayoutWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PanelLayoutWrapper);
+};
+
+ElementWrapper.prototype.findAllPanelLayouts = function(selector) {
+  return this.findAllComponents(PanelLayoutWrapper, selector);
+};
+ElementWrapper.prototype.findPieChart = function(selector) {
+  let rootSelector = \`.\${PieChartWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PieChartWrapper && PieChartWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PieChartWrapper.rootSelector}, .\${PieChartWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PieChartWrapper);
+};
+
+ElementWrapper.prototype.findAllPieCharts = function(selector) {
+  return this.findAllComponents(PieChartWrapper, selector);
+};
+ElementWrapper.prototype.findPopover = function(selector) {
+  let rootSelector = \`.\${PopoverWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PopoverWrapper && PopoverWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PopoverWrapper.rootSelector}, .\${PopoverWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PopoverWrapper);
+};
+
+ElementWrapper.prototype.findAllPopovers = function(selector) {
+  return this.findAllComponents(PopoverWrapper, selector);
+};
+ElementWrapper.prototype.findProgressBar = function(selector) {
+  let rootSelector = \`.\${ProgressBarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ProgressBarWrapper && ProgressBarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ProgressBarWrapper.rootSelector}, .\${ProgressBarWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ProgressBarWrapper);
+};
+
+ElementWrapper.prototype.findAllProgressBars = function(selector) {
+  return this.findAllComponents(ProgressBarWrapper, selector);
+};
+ElementWrapper.prototype.findPromptInput = function(selector) {
+  let rootSelector = \`.\${PromptInputWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PromptInputWrapper && PromptInputWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PromptInputWrapper.rootSelector}, .\${PromptInputWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PromptInputWrapper);
+};
+
+ElementWrapper.prototype.findAllPromptInputs = function(selector) {
+  return this.findAllComponents(PromptInputWrapper, selector);
+};
+ElementWrapper.prototype.findPropertyFilter = function(selector) {
+  let rootSelector = \`.\${PropertyFilterWrapper.rootSelector}\`;
+  if("legacyRootSelector" in PropertyFilterWrapper && PropertyFilterWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${PropertyFilterWrapper.rootSelector}, .\${PropertyFilterWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PropertyFilterWrapper);
+};
+
+ElementWrapper.prototype.findAllPropertyFilters = function(selector) {
+  return this.findAllComponents(PropertyFilterWrapper, selector);
+};
+ElementWrapper.prototype.findRadioButton = function(selector) {
+  let rootSelector = \`.\${RadioButtonWrapper.rootSelector}\`;
+  if("legacyRootSelector" in RadioButtonWrapper && RadioButtonWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${RadioButtonWrapper.rootSelector}, .\${RadioButtonWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, RadioButtonWrapper);
+};
+
+ElementWrapper.prototype.findAllRadioButtons = function(selector) {
+  return this.findAllComponents(RadioButtonWrapper, selector);
+};
+ElementWrapper.prototype.findRadioGroup = function(selector) {
+  let rootSelector = \`.\${RadioGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in RadioGroupWrapper && RadioGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${RadioGroupWrapper.rootSelector}, .\${RadioGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, RadioGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllRadioGroups = function(selector) {
+  return this.findAllComponents(RadioGroupWrapper, selector);
+};
+ElementWrapper.prototype.findS3ResourceSelector = function(selector) {
+  let rootSelector = \`.\${S3ResourceSelectorWrapper.rootSelector}\`;
+  if("legacyRootSelector" in S3ResourceSelectorWrapper && S3ResourceSelectorWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${S3ResourceSelectorWrapper.rootSelector}, .\${S3ResourceSelectorWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, S3ResourceSelectorWrapper);
+};
+
+ElementWrapper.prototype.findAllS3ResourceSelectors = function(selector) {
+  return this.findAllComponents(S3ResourceSelectorWrapper, selector);
+};
+ElementWrapper.prototype.findSegmentedControl = function(selector) {
+  let rootSelector = \`.\${SegmentedControlWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SegmentedControlWrapper && SegmentedControlWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SegmentedControlWrapper.rootSelector}, .\${SegmentedControlWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SegmentedControlWrapper);
+};
+
+ElementWrapper.prototype.findAllSegmentedControls = function(selector) {
+  return this.findAllComponents(SegmentedControlWrapper, selector);
+};
+ElementWrapper.prototype.findSelect = function(selector) {
+  let rootSelector = \`.\${SelectWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SelectWrapper && SelectWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SelectWrapper.rootSelector}, .\${SelectWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SelectWrapper);
+};
+
+ElementWrapper.prototype.findAllSelects = function(selector) {
+  return this.findAllComponents(SelectWrapper, selector);
+};
+ElementWrapper.prototype.findSideNavigation = function(selector) {
+  let rootSelector = \`.\${SideNavigationWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SideNavigationWrapper && SideNavigationWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SideNavigationWrapper.rootSelector}, .\${SideNavigationWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SideNavigationWrapper);
+};
+
+ElementWrapper.prototype.findAllSideNavigations = function(selector) {
+  return this.findAllComponents(SideNavigationWrapper, selector);
+};
+ElementWrapper.prototype.findSkeleton = function(selector) {
+  let rootSelector = \`.\${SkeletonWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SkeletonWrapper && SkeletonWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SkeletonWrapper.rootSelector}, .\${SkeletonWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SkeletonWrapper);
+};
+
+ElementWrapper.prototype.findAllSkeletons = function(selector) {
+  return this.findAllComponents(SkeletonWrapper, selector);
+};
+ElementWrapper.prototype.findSlider = function(selector) {
+  let rootSelector = \`.\${SliderWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SliderWrapper && SliderWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SliderWrapper.rootSelector}, .\${SliderWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SliderWrapper);
+};
+
+ElementWrapper.prototype.findAllSliders = function(selector) {
+  return this.findAllComponents(SliderWrapper, selector);
+};
+ElementWrapper.prototype.findSpaceBetween = function(selector) {
+  let rootSelector = \`.\${SpaceBetweenWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SpaceBetweenWrapper && SpaceBetweenWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SpaceBetweenWrapper.rootSelector}, .\${SpaceBetweenWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpaceBetweenWrapper);
+};
+
+ElementWrapper.prototype.findAllSpaceBetweens = function(selector) {
+  return this.findAllComponents(SpaceBetweenWrapper, selector);
+};
+ElementWrapper.prototype.findSpinner = function(selector) {
+  let rootSelector = \`.\${SpinnerWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SpinnerWrapper && SpinnerWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SpinnerWrapper.rootSelector}, .\${SpinnerWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpinnerWrapper);
+};
+
+ElementWrapper.prototype.findAllSpinners = function(selector) {
+  return this.findAllComponents(SpinnerWrapper, selector);
+};
+ElementWrapper.prototype.findSplitPanel = function(selector) {
+  let rootSelector = \`.\${SplitPanelWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SplitPanelWrapper && SplitPanelWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SplitPanelWrapper.rootSelector}, .\${SplitPanelWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SplitPanelWrapper);
+};
+
+ElementWrapper.prototype.findAllSplitPanels = function(selector) {
+  return this.findAllComponents(SplitPanelWrapper, selector);
+};
+ElementWrapper.prototype.findStatusIndicator = function(selector) {
+  let rootSelector = \`.\${StatusIndicatorWrapper.rootSelector}\`;
+  if("legacyRootSelector" in StatusIndicatorWrapper && StatusIndicatorWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${StatusIndicatorWrapper.rootSelector}, .\${StatusIndicatorWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StatusIndicatorWrapper);
+};
+
+ElementWrapper.prototype.findAllStatusIndicators = function(selector) {
+  return this.findAllComponents(StatusIndicatorWrapper, selector);
+};
+ElementWrapper.prototype.findSteps = function(selector) {
+  let rootSelector = \`.\${StepsWrapper.rootSelector}\`;
+  if("legacyRootSelector" in StepsWrapper && StepsWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${StepsWrapper.rootSelector}, .\${StepsWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StepsWrapper);
+};
+
+ElementWrapper.prototype.findAllSteps = function(selector) {
+  return this.findAllComponents(StepsWrapper, selector);
+};
+ElementWrapper.prototype.findTable = function(selector) {
+  let rootSelector = \`.\${TableWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TableWrapper && TableWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TableWrapper.rootSelector}, .\${TableWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TableWrapper);
+};
+
+ElementWrapper.prototype.findAllTables = function(selector) {
+  return this.findAllComponents(TableWrapper, selector);
+};
+ElementWrapper.prototype.findTabs = function(selector) {
+  let rootSelector = \`.\${TabsWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TabsWrapper && TabsWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TabsWrapper.rootSelector}, .\${TabsWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TabsWrapper);
+};
+
+ElementWrapper.prototype.findAllTabs = function(selector) {
+  return this.findAllComponents(TabsWrapper, selector);
+};
+ElementWrapper.prototype.findTagEditor = function(selector) {
+  let rootSelector = \`.\${TagEditorWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TagEditorWrapper && TagEditorWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TagEditorWrapper.rootSelector}, .\${TagEditorWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TagEditorWrapper);
+};
+
+ElementWrapper.prototype.findAllTagEditors = function(selector) {
+  return this.findAllComponents(TagEditorWrapper, selector);
+};
+ElementWrapper.prototype.findTextContent = function(selector) {
+  let rootSelector = \`.\${TextContentWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TextContentWrapper && TextContentWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TextContentWrapper.rootSelector}, .\${TextContentWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextContentWrapper);
+};
+
+ElementWrapper.prototype.findAllTextContents = function(selector) {
+  return this.findAllComponents(TextContentWrapper, selector);
+};
+ElementWrapper.prototype.findTextFilter = function(selector) {
+  let rootSelector = \`.\${TextFilterWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TextFilterWrapper && TextFilterWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TextFilterWrapper.rootSelector}, .\${TextFilterWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextFilterWrapper);
+};
+
+ElementWrapper.prototype.findAllTextFilters = function(selector) {
+  return this.findAllComponents(TextFilterWrapper, selector);
+};
+ElementWrapper.prototype.findTextarea = function(selector) {
+  let rootSelector = \`.\${TextareaWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TextareaWrapper && TextareaWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TextareaWrapper.rootSelector}, .\${TextareaWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextareaWrapper);
+};
+
+ElementWrapper.prototype.findAllTextareas = function(selector) {
+  return this.findAllComponents(TextareaWrapper, selector);
+};
+ElementWrapper.prototype.findTiles = function(selector) {
+  let rootSelector = \`.\${TilesWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TilesWrapper && TilesWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TilesWrapper.rootSelector}, .\${TilesWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TilesWrapper);
+};
+
+ElementWrapper.prototype.findAllTiles = function(selector) {
+  return this.findAllComponents(TilesWrapper, selector);
+};
+ElementWrapper.prototype.findTimeInput = function(selector) {
+  let rootSelector = \`.\${TimeInputWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TimeInputWrapper && TimeInputWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TimeInputWrapper.rootSelector}, .\${TimeInputWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TimeInputWrapper);
+};
+
+ElementWrapper.prototype.findAllTimeInputs = function(selector) {
+  return this.findAllComponents(TimeInputWrapper, selector);
+};
+ElementWrapper.prototype.findToggle = function(selector) {
+  let rootSelector = \`.\${ToggleWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ToggleWrapper && ToggleWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ToggleWrapper.rootSelector}, .\${ToggleWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleWrapper);
+};
+
+ElementWrapper.prototype.findAllToggles = function(selector) {
+  return this.findAllComponents(ToggleWrapper, selector);
+};
+ElementWrapper.prototype.findToggleButton = function(selector) {
+  let rootSelector = \`.\${ToggleButtonWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ToggleButtonWrapper && ToggleButtonWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ToggleButtonWrapper.rootSelector}, .\${ToggleButtonWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleButtonWrapper);
+};
+
+ElementWrapper.prototype.findAllToggleButtons = function(selector) {
+  return this.findAllComponents(ToggleButtonWrapper, selector);
+};
+ElementWrapper.prototype.findToken = function(selector) {
+  let rootSelector = \`.\${TokenWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TokenWrapper && TokenWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TokenWrapper.rootSelector}, .\${TokenWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenWrapper);
+};
+
+ElementWrapper.prototype.findAllTokens = function(selector) {
+  return this.findAllComponents(TokenWrapper, selector);
+};
+ElementWrapper.prototype.findTokenGroup = function(selector) {
+  let rootSelector = \`.\${TokenGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TokenGroupWrapper && TokenGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TokenGroupWrapper.rootSelector}, .\${TokenGroupWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenGroupWrapper);
+};
+
+ElementWrapper.prototype.findAllTokenGroups = function(selector) {
+  return this.findAllComponents(TokenGroupWrapper, selector);
+};
+ElementWrapper.prototype.findTooltip = function(selector) {
+  let rootSelector = \`.\${TooltipWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TooltipWrapper && TooltipWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TooltipWrapper.rootSelector}, .\${TooltipWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TooltipWrapper);
+};
+
+ElementWrapper.prototype.findAllTooltips = function(selector) {
+  return this.findAllComponents(TooltipWrapper, selector);
+};
+ElementWrapper.prototype.findTopNavigation = function(selector) {
+  let rootSelector = \`.\${TopNavigationWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TopNavigationWrapper && TopNavigationWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TopNavigationWrapper.rootSelector}, .\${TopNavigationWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TopNavigationWrapper);
+};
+
+ElementWrapper.prototype.findAllTopNavigations = function(selector) {
+  return this.findAllComponents(TopNavigationWrapper, selector);
+};
+ElementWrapper.prototype.findTreeView = function(selector) {
+  let rootSelector = \`.\${TreeViewWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TreeViewWrapper && TreeViewWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TreeViewWrapper.rootSelector}, .\${TreeViewWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TreeViewWrapper);
+};
+
+ElementWrapper.prototype.findAllTreeViews = function(selector) {
+  return this.findAllComponents(TreeViewWrapper, selector);
+};
+ElementWrapper.prototype.findTruncatedText = function(selector) {
+  let rootSelector = \`.\${TruncatedTextWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TruncatedTextWrapper && TruncatedTextWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TruncatedTextWrapper.rootSelector}, .\${TruncatedTextWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TruncatedTextWrapper);
+};
+
+ElementWrapper.prototype.findAllTruncatedTexts = function(selector) {
+  return this.findAllComponents(TruncatedTextWrapper, selector);
+};
+ElementWrapper.prototype.findTutorialPanel = function(selector) {
+  let rootSelector = \`.\${TutorialPanelWrapper.rootSelector}\`;
+  if("legacyRootSelector" in TutorialPanelWrapper && TutorialPanelWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${TutorialPanelWrapper.rootSelector}, .\${TutorialPanelWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TutorialPanelWrapper);
+};
+
+ElementWrapper.prototype.findAllTutorialPanels = function(selector) {
+  return this.findAllComponents(TutorialPanelWrapper, selector);
+};
+ElementWrapper.prototype.findWizard = function(selector) {
+  let rootSelector = \`.\${WizardWrapper.rootSelector}\`;
+  if("legacyRootSelector" in WizardWrapper && WizardWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${WizardWrapper.rootSelector}, .\${WizardWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, WizardWrapper);
+};
+
+ElementWrapper.prototype.findAllWizards = function(selector) {
+  return this.findAllComponents(WizardWrapper, selector);
+};
+
+ElementWrapper.prototype.findClosestActionCard = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ActionCardWrapper);
+};
+ElementWrapper.prototype.findClosestAlert = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AlertWrapper);
+};
+ElementWrapper.prototype.findClosestAnchorNavigation = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AnchorNavigationWrapper);
+};
+ElementWrapper.prototype.findClosestAnnotation = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AnnotationWrapper);
+};
+ElementWrapper.prototype.findClosestAppLayout = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AppLayoutWrapper);
+};
+ElementWrapper.prototype.findClosestAppLayoutToolbar = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AppLayoutToolbarWrapper);
+};
+ElementWrapper.prototype.findClosestAreaChart = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AreaChartWrapper);
+};
+ElementWrapper.prototype.findClosestAttributeEditor = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AttributeEditorWrapper);
+};
+ElementWrapper.prototype.findClosestAutosuggest = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(AutosuggestWrapper);
+};
+ElementWrapper.prototype.findClosestBadge = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(BadgeWrapper);
+};
+ElementWrapper.prototype.findClosestBarChart = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(BarChartWrapper);
+};
+ElementWrapper.prototype.findClosestBox = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(BoxWrapper);
+};
+ElementWrapper.prototype.findClosestBreadcrumbGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(BreadcrumbGroupWrapper);
+};
+ElementWrapper.prototype.findClosestButton = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ButtonWrapper);
+};
+ElementWrapper.prototype.findClosestButtonDropdown = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ButtonDropdownWrapper);
+};
+ElementWrapper.prototype.findClosestButtonGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ButtonGroupWrapper);
+};
+ElementWrapper.prototype.findClosestCalendar = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CalendarWrapper);
+};
+ElementWrapper.prototype.findClosestCards = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CardsWrapper);
+};
+ElementWrapper.prototype.findClosestCheckbox = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CheckboxWrapper);
+};
+ElementWrapper.prototype.findClosestCodeEditor = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CodeEditorWrapper);
+};
+ElementWrapper.prototype.findClosestCollectionPreferences = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CollectionPreferencesWrapper);
+};
+ElementWrapper.prototype.findClosestColumnLayout = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ColumnLayoutWrapper);
+};
+ElementWrapper.prototype.findClosestContainer = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ContainerWrapper);
+};
+ElementWrapper.prototype.findClosestContentLayout = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ContentLayoutWrapper);
+};
+ElementWrapper.prototype.findClosestCopyToClipboard = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(CopyToClipboardWrapper);
+};
+ElementWrapper.prototype.findClosestDateInput = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DateInputWrapper);
+};
+ElementWrapper.prototype.findClosestDatePicker = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DatePickerWrapper);
+};
+ElementWrapper.prototype.findClosestDateRangePicker = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DateRangePickerWrapper);
+};
+ElementWrapper.prototype.findClosestDivider = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DividerWrapper);
+};
+ElementWrapper.prototype.findClosestDrawer = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DrawerWrapper);
+};
+ElementWrapper.prototype.findClosestDropdown = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(DropdownWrapper);
+};
+ElementWrapper.prototype.findClosestErrorBoundary = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ErrorBoundaryWrapper);
+};
+ElementWrapper.prototype.findClosestExpandableSection = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ExpandableSectionWrapper);
+};
+ElementWrapper.prototype.findClosestFileDropzone = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FileDropzoneWrapper);
+};
+ElementWrapper.prototype.findClosestFileInput = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FileInputWrapper);
+};
+ElementWrapper.prototype.findClosestFileTokenGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FileTokenGroupWrapper);
+};
+ElementWrapper.prototype.findClosestFileUpload = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FileUploadWrapper);
+};
+ElementWrapper.prototype.findClosestFlashbar = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FlashbarWrapper);
+};
+ElementWrapper.prototype.findClosestForm = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FormWrapper);
+};
+ElementWrapper.prototype.findClosestFormField = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(FormFieldWrapper);
+};
+ElementWrapper.prototype.findClosestGrid = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(GridWrapper);
+};
+ElementWrapper.prototype.findClosestHeader = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(HeaderWrapper);
+};
+ElementWrapper.prototype.findClosestHelpPanel = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(HelpPanelWrapper);
+};
+ElementWrapper.prototype.findClosestHotspot = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(HotspotWrapper);
+};
+ElementWrapper.prototype.findClosestIcon = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(IconWrapper);
+};
+ElementWrapper.prototype.findClosestInput = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(InputWrapper);
+};
+ElementWrapper.prototype.findClosestItemCard = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ItemCardWrapper);
+};
+ElementWrapper.prototype.findClosestKeyValuePairs = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(KeyValuePairsWrapper);
+};
+ElementWrapper.prototype.findClosestLineChart = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(LineChartWrapper);
+};
+ElementWrapper.prototype.findClosestLink = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(LinkWrapper);
+};
+ElementWrapper.prototype.findClosestList = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ListWrapper);
+};
+ElementWrapper.prototype.findClosestLiveRegion = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(LiveRegionWrapper);
+};
+ElementWrapper.prototype.findClosestMixedLineBarChart = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(MixedLineBarChartWrapper);
+};
+ElementWrapper.prototype.findClosestModal = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ModalWrapper);
+};
+ElementWrapper.prototype.findClosestMultiselect = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(MultiselectWrapper);
+};
+ElementWrapper.prototype.findClosestNavigableGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(NavigableGroupWrapper);
+};
+ElementWrapper.prototype.findClosestPagination = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PaginationWrapper);
+};
+ElementWrapper.prototype.findClosestPanelLayout = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PanelLayoutWrapper);
+};
+ElementWrapper.prototype.findClosestPieChart = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PieChartWrapper);
+};
+ElementWrapper.prototype.findClosestPopover = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PopoverWrapper);
+};
+ElementWrapper.prototype.findClosestProgressBar = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ProgressBarWrapper);
+};
+ElementWrapper.prototype.findClosestPromptInput = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PromptInputWrapper);
+};
+ElementWrapper.prototype.findClosestPropertyFilter = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(PropertyFilterWrapper);
+};
+ElementWrapper.prototype.findClosestRadioButton = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(RadioButtonWrapper);
+};
+ElementWrapper.prototype.findClosestRadioGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(RadioGroupWrapper);
+};
+ElementWrapper.prototype.findClosestS3ResourceSelector = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(S3ResourceSelectorWrapper);
+};
+ElementWrapper.prototype.findClosestSegmentedControl = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SegmentedControlWrapper);
+};
+ElementWrapper.prototype.findClosestSelect = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SelectWrapper);
+};
+ElementWrapper.prototype.findClosestSideNavigation = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SideNavigationWrapper);
+};
+ElementWrapper.prototype.findClosestSkeleton = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SkeletonWrapper);
+};
+ElementWrapper.prototype.findClosestSlider = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SliderWrapper);
+};
+ElementWrapper.prototype.findClosestSpaceBetween = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SpaceBetweenWrapper);
+};
+ElementWrapper.prototype.findClosestSpinner = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SpinnerWrapper);
+};
+ElementWrapper.prototype.findClosestSplitPanel = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(SplitPanelWrapper);
+};
+ElementWrapper.prototype.findClosestStatusIndicator = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(StatusIndicatorWrapper);
+};
+ElementWrapper.prototype.findClosestSteps = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(StepsWrapper);
+};
+ElementWrapper.prototype.findClosestTable = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TableWrapper);
+};
+ElementWrapper.prototype.findClosestTabs = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TabsWrapper);
+};
+ElementWrapper.prototype.findClosestTagEditor = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TagEditorWrapper);
+};
+ElementWrapper.prototype.findClosestTextContent = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TextContentWrapper);
+};
+ElementWrapper.prototype.findClosestTextFilter = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TextFilterWrapper);
+};
+ElementWrapper.prototype.findClosestTextarea = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TextareaWrapper);
+};
+ElementWrapper.prototype.findClosestTiles = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TilesWrapper);
+};
+ElementWrapper.prototype.findClosestTimeInput = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TimeInputWrapper);
+};
+ElementWrapper.prototype.findClosestToggle = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ToggleWrapper);
+};
+ElementWrapper.prototype.findClosestToggleButton = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(ToggleButtonWrapper);
+};
+ElementWrapper.prototype.findClosestToken = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TokenWrapper);
+};
+ElementWrapper.prototype.findClosestTokenGroup = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TokenGroupWrapper);
+};
+ElementWrapper.prototype.findClosestTooltip = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TooltipWrapper);
+};
+ElementWrapper.prototype.findClosestTopNavigation = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TopNavigationWrapper);
+};
+ElementWrapper.prototype.findClosestTreeView = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TreeViewWrapper);
+};
+ElementWrapper.prototype.findClosestTruncatedText = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TruncatedTextWrapper);
+};
+ElementWrapper.prototype.findClosestTutorialPanel = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(TutorialPanelWrapper);
+};
+ElementWrapper.prototype.findClosestWizard = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(WizardWrapper);
+};
+
 export default function wrapper(root: Element = document.body) {
+  if (document && document.body && !document.body.contains(root)) {
+    console.warn('[AwsUi] [test-utils] provided element is not part of the document body, interactions may work incorrectly')
+  };
   return new ElementWrapper(root);
 }
 "
diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index 7dace8fd53..c16bdc929b 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -206,6 +206,7 @@ const referenceTokens: ReferenceTokens = {
       300: brand.colorBlue300,
       400: brand.colorBlue400,
       600: brand.colorBlue600,
+      700: brand.colorBlue700,
       950: brand.colorBlue950,
       1000: brand.colorBlue1000,
     },

From e29ce22378333be655c5190a5b1cdf826fd8a343 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Tue, 7 Jul 2026 16:13:53 +0200
Subject: [PATCH 16/19] chore: Add `awsuiSystem one-theme` tag

---
 src/box/interfaces.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts
index 26fab89e05..fc20ac7d96 100644
--- a/src/box/interfaces.ts
+++ b/src/box/interfaces.ts
@@ -43,6 +43,8 @@ export interface BoxProps extends BaseComponentProps {
    *   `aspectRatio: 'equal'` to render a circle.
    *
    * Composes with existing Box props such as `padding` and `margin`.
+   *
+   * @awsuiSystem one-theme
    */
   visualAccent?: BoxProps.VisualAccent;
   /**

From e238584026bfbb11703be3f03d10a60ecc37c42a Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 8 Jul 2026 19:12:45 +0200
Subject: [PATCH 17/19] chore: Update size-limit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 49e1d87120..96ab16ddc5 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1320 kB",
+      "limit": "1330 kB",
       "ignore": "react-dom"
     }
   ],

From c48bed2d4d851ad49be77065fa6298289145af0c Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 9 Jul 2026 11:23:24 +0200
Subject: [PATCH 18/19] chore: Update styles for visualAccent

---
 pages/box/visual-accent.page.tsx              |    7 -
 .../__snapshots__/design-tokens.test.ts.snap  | 1640 ++++++++---------
 .../__snapshots__/documenter.test.ts.snap     |    3 +
 src/box/interfaces.ts                         |    2 -
 .../visual-refresh/color-palette.ts           |   31 +
 style-dictionary/visual-refresh/colors.ts     |   72 +-
 6 files changed, 890 insertions(+), 865 deletions(-)

diff --git a/pages/box/visual-accent.page.tsx b/pages/box/visual-accent.page.tsx
index d539a4a34b..91ff8fba4e 100644
--- a/pages/box/visual-accent.page.tsx
+++ b/pages/box/visual-accent.page.tsx
@@ -161,13 +161,6 @@ export default function StyleBoxPage() {
             })}
           />
         </Container>
-
-        <Box padding={{ top: 'xl' }} />
-        <Container header={<Header variant="h3">Other example</Header>}>
-          <Box visualAccent={{ color: 'purple' }} padding={{ horizontal: 's', vertical: 'n' }} variant="h4">
-            Helloo
-          </Box>
-        </Container>
       </article>
     </div>
   );
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index a0e6e76ed1..a65ec9cf11 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -200,127 +200,127 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "#fff7e6",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "#ffe8bd",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f1faff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "#f0feff",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "#d1fbff",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "#fce5ff",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "#f2f8f0",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "#d9ffd6",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#2a2e33",
-            "light": "#f6f6f9",
+            "dark": "#414750",
+            "light": "#eaeded",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f1faff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "#f7ffeb",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "#ebffcc",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "#ffe0fb",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "#ebfff6",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "#ccffe9",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "#fff7f5",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "#ffe0d6",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "#fff5fa",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "#ffe0f0",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "#faf5ff",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "#f2e5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "#fdf3f1",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "#ffe0e0",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "#fff5f8",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "#ffe0e8",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "#ebfffe",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "#ccfffc",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "#f6f5ff",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "#e8e5ff",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "#fffef0",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "#fffbbd",
           },
         },
         "color-background-action-card-active": {
@@ -2511,126 +2511,126 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff9900",
-            "light": "#9e3700",
+            "light": "#7a2b00",
           },
         },
         "color-text-accent-blue": {
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00a1c9",
-            "light": "#004a9e",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-cyan": {
           "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d2e5",
-            "light": "#00627a",
+            "light": "#004761",
           },
         },
         "color-text-accent-fuchsia": {
           "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ec70ff",
-            "light": "#a000b8",
+            "light": "#78008a",
           },
         },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e500",
-            "light": "#1d8102",
+            "light": "#005c26",
           },
         },
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f2f3f3",
+            "dark": "#d5dbdb",
             "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#00a1c9",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-lime": {
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#007000",
+            "light": "#005700",
           },
         },
         "color-text-accent-magenta": {
           "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff57e9",
-            "light": "#b2008f",
+            "light": "#8f0072",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#006b48",
+            "light": "#005237",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#a82700",
+            "light": "#8a2000",
           },
         },
         "color-text-accent-pink": {
           "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff66b2",
-            "light": "#bb005d",
+            "light": "#8f0047",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#5900b2",
           },
         },
         "color-text-accent-red": {
           "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5d64",
-            "light": "#d13212",
+            "light": "#990000",
           },
         },
         "color-text-accent-rose": {
           "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5c85",
-            "light": "#c20030",
+            "light": "#940025",
           },
         },
         "color-text-accent-teal": {
           "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d6c8",
-            "light": "#00665f",
+            "light": "#00524c",
           },
         },
         "color-text-accent-violet": {
           "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#978aff",
-            "light": "#5724ff",
+            "light": "#4200db",
           },
         },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#9e6900",
+            "light": "#906806",
           },
         },
         "color-text-action-card-disabled": {
@@ -4056,127 +4056,127 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "#fff7e6",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "#ffe8bd",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f1faff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "#f0feff",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "#d1fbff",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "#fce5ff",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "#f2f8f0",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "#d9ffd6",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#2a2e33",
-            "light": "#f6f6f9",
+            "dark": "#414750",
+            "light": "#eaeded",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f1faff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "#f7ffeb",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "#ebffcc",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "#ffe0fb",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "#ebfff6",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "#ccffe9",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "#fff7f5",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "#ffe0d6",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "#fff5fa",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "#ffe0f0",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "#faf5ff",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "#f2e5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "#fdf3f1",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "#ffe0e0",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "#fff5f8",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "#ffe0e8",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "#ebfffe",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "#ccfffc",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "#f6f5ff",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "#e8e5ff",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "#fffef0",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "#fffbbd",
           },
         },
         "color-background-action-card-active": {
@@ -6367,126 +6367,126 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff9900",
-            "light": "#9e3700",
+            "light": "#7a2b00",
           },
         },
         "color-text-accent-blue": {
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00a1c9",
-            "light": "#004a9e",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-cyan": {
           "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d2e5",
-            "light": "#00627a",
+            "light": "#004761",
           },
         },
         "color-text-accent-fuchsia": {
           "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ec70ff",
-            "light": "#a000b8",
+            "light": "#78008a",
           },
         },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e500",
-            "light": "#1d8102",
+            "light": "#005c26",
           },
         },
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f2f3f3",
+            "dark": "#d5dbdb",
             "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#00a1c9",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-lime": {
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#007000",
+            "light": "#005700",
           },
         },
         "color-text-accent-magenta": {
           "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff57e9",
-            "light": "#b2008f",
+            "light": "#8f0072",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#006b48",
+            "light": "#005237",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#a82700",
+            "light": "#8a2000",
           },
         },
         "color-text-accent-pink": {
           "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff66b2",
-            "light": "#bb005d",
+            "light": "#8f0047",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#5900b2",
           },
         },
         "color-text-accent-red": {
           "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5d64",
-            "light": "#d13212",
+            "light": "#990000",
           },
         },
         "color-text-accent-rose": {
           "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5c85",
-            "light": "#c20030",
+            "light": "#940025",
           },
         },
         "color-text-accent-teal": {
           "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d6c8",
-            "light": "#00665f",
+            "light": "#00524c",
           },
         },
         "color-text-accent-violet": {
           "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#978aff",
-            "light": "#5724ff",
+            "light": "#4200db",
           },
         },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#9e6900",
+            "light": "#906806",
           },
         },
         "color-text-action-card-disabled": {
@@ -7912,127 +7912,127 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "#fff7e6",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "#ffe8bd",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f1faff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "#f0feff",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "#d1fbff",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "#fce5ff",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "#f2f8f0",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "#d9ffd6",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#2a2e33",
-            "light": "#f6f6f9",
+            "dark": "#414750",
+            "light": "#eaeded",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f1faff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "#f7ffeb",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "#ebffcc",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "#ffe0fb",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "#ebfff6",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "#ccffe9",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "#fff7f5",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "#ffe0d6",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "#fff5fa",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "#ffe0f0",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "#faf5ff",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "#f2e5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "#fdf3f1",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "#ffe0e0",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "#fff5f8",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "#ffe0e8",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "#ebfffe",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "#ccfffc",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "#f6f5ff",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "#e8e5ff",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "#fffef0",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "#fffbbd",
           },
         },
         "color-background-action-card-active": {
@@ -10223,126 +10223,126 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff9900",
-            "light": "#9e3700",
+            "light": "#7a2b00",
           },
         },
         "color-text-accent-blue": {
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00a1c9",
-            "light": "#004a9e",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-cyan": {
           "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d2e5",
-            "light": "#00627a",
+            "light": "#004761",
           },
         },
         "color-text-accent-fuchsia": {
           "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ec70ff",
-            "light": "#a000b8",
+            "light": "#78008a",
           },
         },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e500",
-            "light": "#1d8102",
+            "light": "#005c26",
           },
         },
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f2f3f3",
+            "dark": "#d5dbdb",
             "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#00a1c9",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-lime": {
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#007000",
+            "light": "#005700",
           },
         },
         "color-text-accent-magenta": {
           "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff57e9",
-            "light": "#b2008f",
+            "light": "#8f0072",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#006b48",
+            "light": "#005237",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#a82700",
+            "light": "#8a2000",
           },
         },
         "color-text-accent-pink": {
           "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff66b2",
-            "light": "#bb005d",
+            "light": "#8f0047",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#5900b2",
           },
         },
         "color-text-accent-red": {
           "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5d64",
-            "light": "#d13212",
+            "light": "#990000",
           },
         },
         "color-text-accent-rose": {
           "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5c85",
-            "light": "#c20030",
+            "light": "#940025",
           },
         },
         "color-text-accent-teal": {
           "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d6c8",
-            "light": "#00665f",
+            "light": "#00524c",
           },
         },
         "color-text-accent-violet": {
           "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#978aff",
-            "light": "#5724ff",
+            "light": "#4200db",
           },
         },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#9e6900",
+            "light": "#906806",
           },
         },
         "color-text-action-card-disabled": {
@@ -11768,127 +11768,127 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "#fff7e6",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "#ffe8bd",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f1faff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "#f0feff",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "#d1fbff",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "#fce5ff",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "#f2f8f0",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "#d9ffd6",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#2a2e33",
-            "light": "#f6f6f9",
+            "dark": "#414750",
+            "light": "#eaeded",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f1faff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "#f7ffeb",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "#ebffcc",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "#ffe0fb",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "#ebfff6",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "#ccffe9",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "#fff7f5",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "#ffe0d6",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "#fff5fa",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "#ffe0f0",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "#faf5ff",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "#f2e5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "#fdf3f1",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "#ffe0e0",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "#fff5f8",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "#ffe0e8",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "#ebfffe",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "#ccfffc",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "#f6f5ff",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "#e8e5ff",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "#fffef0",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "#fffbbd",
           },
         },
         "color-background-action-card-active": {
@@ -14079,126 +14079,126 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff9900",
-            "light": "#9e3700",
+            "light": "#7a2b00",
           },
         },
         "color-text-accent-blue": {
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00a1c9",
-            "light": "#004a9e",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-cyan": {
           "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d2e5",
-            "light": "#00627a",
+            "light": "#004761",
           },
         },
         "color-text-accent-fuchsia": {
           "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ec70ff",
-            "light": "#a000b8",
+            "light": "#78008a",
           },
         },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e500",
-            "light": "#1d8102",
+            "light": "#005c26",
           },
         },
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f2f3f3",
+            "dark": "#d5dbdb",
             "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#00a1c9",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-lime": {
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#007000",
+            "light": "#005700",
           },
         },
         "color-text-accent-magenta": {
           "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff57e9",
-            "light": "#b2008f",
+            "light": "#8f0072",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#006b48",
+            "light": "#005237",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#a82700",
+            "light": "#8a2000",
           },
         },
         "color-text-accent-pink": {
           "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff66b2",
-            "light": "#bb005d",
+            "light": "#8f0047",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#5900b2",
           },
         },
         "color-text-accent-red": {
           "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5d64",
-            "light": "#d13212",
+            "light": "#990000",
           },
         },
         "color-text-accent-rose": {
           "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5c85",
-            "light": "#c20030",
+            "light": "#940025",
           },
         },
         "color-text-accent-teal": {
           "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d6c8",
-            "light": "#00665f",
+            "light": "#00524c",
           },
         },
         "color-text-accent-violet": {
           "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#978aff",
-            "light": "#5724ff",
+            "light": "#4200db",
           },
         },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#9e6900",
+            "light": "#906806",
           },
         },
         "color-text-action-card-disabled": {
@@ -15624,127 +15624,127 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "#fff7e6",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "#ffe8bd",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f1faff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "#f0feff",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "#d1fbff",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "#fce5ff",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "#f2f8f0",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "#d9ffd6",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#2a2e33",
-            "light": "#f6f6f9",
+            "dark": "#414750",
+            "light": "#eaeded",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f1faff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "#f7ffeb",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "#ebffcc",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "#ffe0fb",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "#ebfff6",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "#ccffe9",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "#fff7f5",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "#ffe0d6",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "#fff5fa",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "#ffe0f0",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "#faf5ff",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "#f2e5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "#fdf3f1",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "#ffe0e0",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "#fff5f8",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "#ffe0e8",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "#ebfffe",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "#ccfffc",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "#f6f5ff",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "#e8e5ff",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "#fffef0",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "#fffbbd",
           },
         },
         "color-background-action-card-active": {
@@ -17935,126 +17935,126 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff9900",
-            "light": "#9e3700",
+            "light": "#7a2b00",
           },
         },
         "color-text-accent-blue": {
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00a1c9",
-            "light": "#004a9e",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-cyan": {
           "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d2e5",
-            "light": "#00627a",
+            "light": "#004761",
           },
         },
         "color-text-accent-fuchsia": {
           "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ec70ff",
-            "light": "#a000b8",
+            "light": "#78008a",
           },
         },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e500",
-            "light": "#1d8102",
+            "light": "#005c26",
           },
         },
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f2f3f3",
+            "dark": "#d5dbdb",
             "light": "#21252c",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#00a1c9",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-lime": {
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#007000",
+            "light": "#005700",
           },
         },
         "color-text-accent-magenta": {
           "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff57e9",
-            "light": "#b2008f",
+            "light": "#8f0072",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#006b48",
+            "light": "#005237",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#a82700",
+            "light": "#8a2000",
           },
         },
         "color-text-accent-pink": {
           "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff66b2",
-            "light": "#bb005d",
+            "light": "#8f0047",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#5900b2",
           },
         },
         "color-text-accent-red": {
           "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5d64",
-            "light": "#d13212",
+            "light": "#990000",
           },
         },
         "color-text-accent-rose": {
           "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5c85",
-            "light": "#c20030",
+            "light": "#940025",
           },
         },
         "color-text-accent-teal": {
           "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d6c8",
-            "light": "#00665f",
+            "light": "#00524c",
           },
         },
         "color-text-accent-violet": {
           "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#978aff",
-            "light": "#5724ff",
+            "light": "#4200db",
           },
         },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#9e6900",
+            "light": "#906806",
           },
         },
         "color-text-action-card-disabled": {
@@ -19480,127 +19480,127 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "rgba(122, 43, 0, 0.4)",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "rgba(250, 111, 0, 0.2)",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "rgba(0, 59, 143, 0.4)",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "rgba(0, 153, 255, 0.2)",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "rgba(0, 71, 97, 0.4)",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "rgba(0, 164, 189, 0.2)",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "rgba(120, 0, 138, 0.4)",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "rgba(228, 51, 255, 0.2)",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "rgba(0, 92, 38, 0.4)",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "rgba(43, 181, 52, 0.2)",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#2a2e33",
-            "light": "#2a2e33",
+            "dark": "#414750",
+            "light": "#414750",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "rgba(0, 59, 143, 0.4)",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "rgba(0, 153, 255, 0.2)",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "rgba(0, 87, 0, 0.4)",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "rgba(49, 184, 0, 0.2)",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "rgba(143, 0, 114, 0.4)",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "rgba(255, 26, 224, 0.2)",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "rgba(0, 82, 55, 0.4)",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "rgba(0, 189, 107, 0.2)",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "rgba(138, 32, 0, 0.4)",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "rgba(255, 75, 20, 0.2)",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "rgba(143, 0, 71, 0.4)",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "rgba(255, 51, 153, 0.2)",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "rgba(89, 0, 178, 0.4)",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "rgba(173, 92, 255, 0.2)",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "rgba(153, 0, 0, 0.4)",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "rgba(255, 61, 61, 0.2)",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "rgba(148, 0, 37, 0.4)",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "rgba(255, 56, 106, 0.2)",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "rgba(0, 82, 76, 0.4)",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "rgba(0, 173, 162, 0.2)",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "rgba(66, 0, 219, 0.4)",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "rgba(133, 117, 255, 0.2)",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "rgba(158, 105, 0, 0.4)",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "rgba(251, 211, 50, 0.2)",
           },
         },
         "color-background-action-card-active": {
@@ -21825,15 +21825,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f2f3f3",
-            "light": "#f2f3f3",
+            "dark": "#d5dbdb",
+            "light": "#d5dbdb",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#44b9d6",
-            "light": "#44b9d6",
+            "dark": "#00a1c9",
+            "light": "#00a1c9",
           },
         },
         "color-text-accent-lime": {
@@ -23336,127 +23336,127 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     "color-background-accent-amber": {
       "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(122, 43, 0, 0.4)",
-        "light": "#fff7e6",
+        "dark": "rgba(250, 111, 0, 0.2)",
+        "light": "#ffe8bd",
       },
     },
     "color-background-accent-blue": {
       "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 59, 143, 0.4)",
-        "light": "#f1faff",
+        "dark": "rgba(0, 153, 255, 0.2)",
+        "light": "#d1f1ff",
       },
     },
     "color-background-accent-cyan": {
       "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 71, 97, 0.4)",
-        "light": "#f0feff",
+        "dark": "rgba(0, 164, 189, 0.2)",
+        "light": "#d1fbff",
       },
     },
     "color-background-accent-fuchsia": {
       "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(120, 0, 138, 0.4)",
-        "light": "#fff5fe",
+        "dark": "rgba(228, 51, 255, 0.2)",
+        "light": "#fce5ff",
       },
     },
     "color-background-accent-green": {
       "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 92, 38, 0.4)",
-        "light": "#f2f8f0",
+        "dark": "rgba(43, 181, 52, 0.2)",
+        "light": "#d9ffd6",
       },
     },
     "color-background-accent-grey": {
       "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#2a2e33",
-        "light": "#f6f6f9",
+        "dark": "#414750",
+        "light": "#eaeded",
       },
     },
     "color-background-accent-indigo": {
       "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 59, 143, 0.4)",
-        "light": "#f1faff",
+        "dark": "rgba(0, 153, 255, 0.2)",
+        "light": "#d1f1ff",
       },
     },
     "color-background-accent-lime": {
       "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 87, 0, 0.4)",
-        "light": "#f7ffeb",
+        "dark": "rgba(49, 184, 0, 0.2)",
+        "light": "#ebffcc",
       },
     },
     "color-background-accent-magenta": {
       "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(143, 0, 114, 0.4)",
-        "light": "#fff5fe",
+        "dark": "rgba(255, 26, 224, 0.2)",
+        "light": "#ffe0fb",
       },
     },
     "color-background-accent-mint": {
       "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 82, 55, 0.4)",
-        "light": "#ebfff6",
+        "dark": "rgba(0, 189, 107, 0.2)",
+        "light": "#ccffe9",
       },
     },
     "color-background-accent-orange": {
       "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(138, 32, 0, 0.4)",
-        "light": "#fff7f5",
+        "dark": "rgba(255, 75, 20, 0.2)",
+        "light": "#ffe0d6",
       },
     },
     "color-background-accent-pink": {
       "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(143, 0, 71, 0.4)",
-        "light": "#fff5fa",
+        "dark": "rgba(255, 51, 153, 0.2)",
+        "light": "#ffe0f0",
       },
     },
     "color-background-accent-purple": {
       "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(89, 0, 178, 0.4)",
-        "light": "#faf5ff",
+        "dark": "rgba(173, 92, 255, 0.2)",
+        "light": "#f2e5ff",
       },
     },
     "color-background-accent-red": {
       "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(153, 0, 0, 0.4)",
-        "light": "#fdf3f1",
+        "dark": "rgba(255, 61, 61, 0.2)",
+        "light": "#ffe0e0",
       },
     },
     "color-background-accent-rose": {
       "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(148, 0, 37, 0.4)",
-        "light": "#fff5f8",
+        "dark": "rgba(255, 56, 106, 0.2)",
+        "light": "#ffe0e8",
       },
     },
     "color-background-accent-teal": {
       "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 82, 76, 0.4)",
-        "light": "#ebfffe",
+        "dark": "rgba(0, 173, 162, 0.2)",
+        "light": "#ccfffc",
       },
     },
     "color-background-accent-violet": {
       "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(66, 0, 219, 0.4)",
-        "light": "#f6f5ff",
+        "dark": "rgba(133, 117, 255, 0.2)",
+        "light": "#e8e5ff",
       },
     },
     "color-background-accent-yellow": {
       "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(158, 105, 0, 0.4)",
-        "light": "#fffef0",
+        "dark": "rgba(251, 211, 50, 0.2)",
+        "light": "#fffbbd",
       },
     },
     "color-background-action-card-active": {
@@ -25647,126 +25647,126 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff9900",
-        "light": "#9e3700",
+        "light": "#7a2b00",
       },
     },
     "color-text-accent-blue": {
       "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00a1c9",
-        "light": "#004a9e",
+        "light": "#003b8f",
       },
     },
     "color-text-accent-cyan": {
       "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00d2e5",
-        "light": "#00627a",
+        "light": "#004761",
       },
     },
     "color-text-accent-fuchsia": {
       "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ec70ff",
-        "light": "#a000b8",
+        "light": "#78008a",
       },
     },
     "color-text-accent-green": {
       "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00e500",
-        "light": "#1d8102",
+        "light": "#005c26",
       },
     },
     "color-text-accent-grey": {
       "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#f2f3f3",
+        "dark": "#d5dbdb",
         "light": "#21252c",
       },
     },
     "color-text-accent-indigo": {
       "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#44b9d6",
-        "light": "#0073bb",
+        "dark": "#00a1c9",
+        "light": "#003b8f",
       },
     },
     "color-text-accent-lime": {
       "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#7ae500",
-        "light": "#007000",
+        "light": "#005700",
       },
     },
     "color-text-accent-magenta": {
       "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff57e9",
-        "light": "#b2008f",
+        "light": "#8f0072",
       },
     },
     "color-text-accent-mint": {
       "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00e582",
-        "light": "#006b48",
+        "light": "#005237",
       },
     },
     "color-text-accent-orange": {
       "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff6a3d",
-        "light": "#a82700",
+        "light": "#8a2000",
       },
     },
     "color-text-accent-pink": {
       "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff66b2",
-        "light": "#bb005d",
+        "light": "#8f0047",
       },
     },
     "color-text-accent-purple": {
       "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#bf80ff",
-        "light": "#7300e5",
+        "light": "#5900b2",
       },
     },
     "color-text-accent-red": {
       "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff5d64",
-        "light": "#d13212",
+        "light": "#990000",
       },
     },
     "color-text-accent-rose": {
       "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff5c85",
-        "light": "#c20030",
+        "light": "#940025",
       },
     },
     "color-text-accent-teal": {
       "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00d6c8",
-        "light": "#00665f",
+        "light": "#00524c",
       },
     },
     "color-text-accent-violet": {
       "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#978aff",
-        "light": "#5724ff",
+        "light": "#4200db",
       },
     },
     "color-text-accent-yellow": {
       "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ffe347",
-        "light": "#9e6900",
+        "light": "#906806",
       },
     },
     "color-text-action-card-disabled": {
@@ -27197,127 +27197,127 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "#fff7e6",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "#ffe8bd",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f0fbff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "#f0feff",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "#d1fbff",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "#fce5ff",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "#effff1",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "#d9ffd6",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#232b37",
-            "light": "#f6f6f9",
+            "dark": "#333843",
+            "light": "#ebebf0",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f0fbff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "#f7ffeb",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "#ebffcc",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "#ffe0fb",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "#ebfff6",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "#ccffe9",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "#fff7f5",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "#ffe0d6",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "#fff5fa",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "#ffe0f0",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "#faf5ff",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "#f2e5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "#fff5f5",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "#ffe0e0",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "#fff5f8",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "#ffe0e8",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "#ebfffe",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "#ccfffc",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "#f6f5ff",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "#e8e5ff",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "#fffef0",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "#fffbbd",
           },
         },
         "color-background-action-card-active": {
@@ -29508,126 +29508,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff9900",
-            "light": "#9e3700",
+            "light": "#7a2b00",
           },
         },
         "color-text-accent-blue": {
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#004a9e",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-cyan": {
           "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d2e5",
-            "light": "#00627a",
+            "light": "#004761",
           },
         },
         "color-text-accent-fuchsia": {
           "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ec70ff",
-            "light": "#a000b8",
+            "light": "#78008a",
           },
         },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e500",
-            "light": "#00802f",
+            "light": "#005c26",
           },
         },
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f3f3f7",
+            "dark": "#dedee3",
             "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#42b4ff",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-lime": {
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#007000",
+            "light": "#005700",
           },
         },
         "color-text-accent-magenta": {
           "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff57e9",
-            "light": "#b2008f",
+            "light": "#8f0072",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#006b48",
+            "light": "#005237",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#a82700",
+            "light": "#8a2000",
           },
         },
         "color-text-accent-pink": {
           "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff66b2",
-            "light": "#bb005d",
+            "light": "#8f0047",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#5900b2",
           },
         },
         "color-text-accent-red": {
           "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#990000",
           },
         },
         "color-text-accent-rose": {
           "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5c85",
-            "light": "#c20030",
+            "light": "#940025",
           },
         },
         "color-text-accent-teal": {
           "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d6c8",
-            "light": "#00665f",
+            "light": "#00524c",
           },
         },
         "color-text-accent-violet": {
           "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#978aff",
-            "light": "#5724ff",
+            "light": "#4200db",
           },
         },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#9e6900",
+            "light": "#855900",
           },
         },
         "color-text-action-card-disabled": {
@@ -31053,127 +31053,127 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "rgba(122, 43, 0, 0.4)",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "rgba(250, 111, 0, 0.2)",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "rgba(0, 59, 143, 0.4)",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "rgba(0, 153, 255, 0.2)",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "rgba(0, 71, 97, 0.4)",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "rgba(0, 164, 189, 0.2)",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "rgba(120, 0, 138, 0.4)",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "rgba(228, 51, 255, 0.2)",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "rgba(0, 92, 38, 0.4)",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "rgba(43, 181, 52, 0.2)",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
+            "dark": "#333843",
+            "light": "#333843",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "rgba(0, 59, 143, 0.4)",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "rgba(0, 153, 255, 0.2)",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "rgba(0, 87, 0, 0.4)",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "rgba(49, 184, 0, 0.2)",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "rgba(143, 0, 114, 0.4)",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "rgba(255, 26, 224, 0.2)",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "rgba(0, 82, 55, 0.4)",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "rgba(0, 189, 107, 0.2)",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "rgba(138, 32, 0, 0.4)",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "rgba(255, 75, 20, 0.2)",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "rgba(143, 0, 71, 0.4)",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "rgba(255, 51, 153, 0.2)",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "rgba(89, 0, 178, 0.4)",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "rgba(173, 92, 255, 0.2)",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "rgba(153, 0, 0, 0.4)",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "rgba(255, 61, 61, 0.2)",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "rgba(148, 0, 37, 0.4)",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "rgba(255, 56, 106, 0.2)",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "rgba(0, 82, 76, 0.4)",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "rgba(0, 173, 162, 0.2)",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "rgba(66, 0, 219, 0.4)",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "rgba(133, 117, 255, 0.2)",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "rgba(158, 105, 0, 0.4)",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "rgba(251, 211, 50, 0.2)",
           },
         },
         "color-background-action-card-active": {
@@ -33398,15 +33398,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f3f3f7",
-            "light": "#f3f3f7",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-text-accent-lime": {
@@ -34909,127 +34909,127 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "#fff7e6",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "#ffe8bd",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f0fbff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "#f0feff",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "#d1fbff",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "#fce5ff",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "#effff1",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "#d9ffd6",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#232b37",
-            "light": "#f6f6f9",
+            "dark": "#333843",
+            "light": "#ebebf0",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f0fbff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "#f7ffeb",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "#ebffcc",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "#ffe0fb",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "#ebfff6",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "#ccffe9",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "#fff7f5",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "#ffe0d6",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "#fff5fa",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "#ffe0f0",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "#faf5ff",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "#f2e5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "#fff5f5",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "#ffe0e0",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "#fff5f8",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "#ffe0e8",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "#ebfffe",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "#ccfffc",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "#f6f5ff",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "#e8e5ff",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "#fffef0",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "#fffbbd",
           },
         },
         "color-background-action-card-active": {
@@ -37220,126 +37220,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff9900",
-            "light": "#9e3700",
+            "light": "#7a2b00",
           },
         },
         "color-text-accent-blue": {
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#004a9e",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-cyan": {
           "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d2e5",
-            "light": "#00627a",
+            "light": "#004761",
           },
         },
         "color-text-accent-fuchsia": {
           "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ec70ff",
-            "light": "#a000b8",
+            "light": "#78008a",
           },
         },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e500",
-            "light": "#00802f",
+            "light": "#005c26",
           },
         },
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f3f3f7",
+            "dark": "#dedee3",
             "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#42b4ff",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-lime": {
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#007000",
+            "light": "#005700",
           },
         },
         "color-text-accent-magenta": {
           "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff57e9",
-            "light": "#b2008f",
+            "light": "#8f0072",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#006b48",
+            "light": "#005237",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#a82700",
+            "light": "#8a2000",
           },
         },
         "color-text-accent-pink": {
           "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff66b2",
-            "light": "#bb005d",
+            "light": "#8f0047",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#5900b2",
           },
         },
         "color-text-accent-red": {
           "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#990000",
           },
         },
         "color-text-accent-rose": {
           "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5c85",
-            "light": "#c20030",
+            "light": "#940025",
           },
         },
         "color-text-accent-teal": {
           "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d6c8",
-            "light": "#00665f",
+            "light": "#00524c",
           },
         },
         "color-text-accent-violet": {
           "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#978aff",
-            "light": "#5724ff",
+            "light": "#4200db",
           },
         },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#9e6900",
+            "light": "#855900",
           },
         },
         "color-text-action-card-disabled": {
@@ -38765,127 +38765,127 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "#fff7e6",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "#ffe8bd",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f0fbff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "#f0feff",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "#d1fbff",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "#fce5ff",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "#effff1",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "#d9ffd6",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#232b37",
-            "light": "#f6f6f9",
+            "dark": "#333843",
+            "light": "#ebebf0",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f0fbff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "#f7ffeb",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "#ebffcc",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "#ffe0fb",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "#ebfff6",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "#ccffe9",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "#fff7f5",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "#ffe0d6",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "#fff5fa",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "#ffe0f0",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "#faf5ff",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "#f2e5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "#fff5f5",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "#ffe0e0",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "#fff5f8",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "#ffe0e8",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "#ebfffe",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "#ccfffc",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "#f6f5ff",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "#e8e5ff",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "#fffef0",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "#fffbbd",
           },
         },
         "color-background-action-card-active": {
@@ -41076,126 +41076,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff9900",
-            "light": "#9e3700",
+            "light": "#7a2b00",
           },
         },
         "color-text-accent-blue": {
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#004a9e",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-cyan": {
           "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d2e5",
-            "light": "#00627a",
+            "light": "#004761",
           },
         },
         "color-text-accent-fuchsia": {
           "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ec70ff",
-            "light": "#a000b8",
+            "light": "#78008a",
           },
         },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e500",
-            "light": "#00802f",
+            "light": "#005c26",
           },
         },
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f3f3f7",
+            "dark": "#dedee3",
             "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#42b4ff",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-lime": {
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#007000",
+            "light": "#005700",
           },
         },
         "color-text-accent-magenta": {
           "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff57e9",
-            "light": "#b2008f",
+            "light": "#8f0072",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#006b48",
+            "light": "#005237",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#a82700",
+            "light": "#8a2000",
           },
         },
         "color-text-accent-pink": {
           "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff66b2",
-            "light": "#bb005d",
+            "light": "#8f0047",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#5900b2",
           },
         },
         "color-text-accent-red": {
           "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#990000",
           },
         },
         "color-text-accent-rose": {
           "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5c85",
-            "light": "#c20030",
+            "light": "#940025",
           },
         },
         "color-text-accent-teal": {
           "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d6c8",
-            "light": "#00665f",
+            "light": "#00524c",
           },
         },
         "color-text-accent-violet": {
           "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#978aff",
-            "light": "#5724ff",
+            "light": "#4200db",
           },
         },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#9e6900",
+            "light": "#855900",
           },
         },
         "color-text-action-card-disabled": {
@@ -42621,127 +42621,127 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "#fff7e6",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "#ffe8bd",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f0fbff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "#f0feff",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "#d1fbff",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "#fce5ff",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "#effff1",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "#d9ffd6",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#232b37",
-            "light": "#f6f6f9",
+            "dark": "#333843",
+            "light": "#ebebf0",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f0fbff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "#f7ffeb",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "#ebffcc",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "#ffe0fb",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "#ebfff6",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "#ccffe9",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "#fff7f5",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "#ffe0d6",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "#fff5fa",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "#ffe0f0",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "#faf5ff",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "#f2e5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "#fff5f5",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "#ffe0e0",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "#fff5f8",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "#ffe0e8",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "#ebfffe",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "#ccfffc",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "#f6f5ff",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "#e8e5ff",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "#fffef0",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "#fffbbd",
           },
         },
         "color-background-action-card-active": {
@@ -44932,126 +44932,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff9900",
-            "light": "#9e3700",
+            "light": "#7a2b00",
           },
         },
         "color-text-accent-blue": {
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#004a9e",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-cyan": {
           "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d2e5",
-            "light": "#00627a",
+            "light": "#004761",
           },
         },
         "color-text-accent-fuchsia": {
           "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ec70ff",
-            "light": "#a000b8",
+            "light": "#78008a",
           },
         },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e500",
-            "light": "#00802f",
+            "light": "#005c26",
           },
         },
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f3f3f7",
+            "dark": "#dedee3",
             "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#42b4ff",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-lime": {
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#007000",
+            "light": "#005700",
           },
         },
         "color-text-accent-magenta": {
           "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff57e9",
-            "light": "#b2008f",
+            "light": "#8f0072",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#006b48",
+            "light": "#005237",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#a82700",
+            "light": "#8a2000",
           },
         },
         "color-text-accent-pink": {
           "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff66b2",
-            "light": "#bb005d",
+            "light": "#8f0047",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#5900b2",
           },
         },
         "color-text-accent-red": {
           "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#990000",
           },
         },
         "color-text-accent-rose": {
           "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5c85",
-            "light": "#c20030",
+            "light": "#940025",
           },
         },
         "color-text-accent-teal": {
           "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d6c8",
-            "light": "#00665f",
+            "light": "#00524c",
           },
         },
         "color-text-accent-violet": {
           "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#978aff",
-            "light": "#5724ff",
+            "light": "#4200db",
           },
         },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#9e6900",
+            "light": "#855900",
           },
         },
         "color-text-action-card-disabled": {
@@ -46477,127 +46477,127 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "#fff7e6",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "#ffe8bd",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f0fbff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "#f0feff",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "#d1fbff",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "#fce5ff",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "#effff1",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "#d9ffd6",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#232b37",
-            "light": "#f6f6f9",
+            "dark": "#333843",
+            "light": "#ebebf0",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "#f0fbff",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "#d1f1ff",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "#f7ffeb",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "#ebffcc",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "#fff5fe",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "#ffe0fb",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "#ebfff6",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "#ccffe9",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "#fff7f5",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "#ffe0d6",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "#fff5fa",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "#ffe0f0",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "#faf5ff",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "#f2e5ff",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "#fff5f5",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "#ffe0e0",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "#fff5f8",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "#ffe0e8",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "#ebfffe",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "#ccfffc",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "#f6f5ff",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "#e8e5ff",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "#fffef0",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "#fffbbd",
           },
         },
         "color-background-action-card-active": {
@@ -48788,126 +48788,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff9900",
-            "light": "#9e3700",
+            "light": "#7a2b00",
           },
         },
         "color-text-accent-blue": {
           "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#42b4ff",
-            "light": "#004a9e",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-cyan": {
           "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d2e5",
-            "light": "#00627a",
+            "light": "#004761",
           },
         },
         "color-text-accent-fuchsia": {
           "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ec70ff",
-            "light": "#a000b8",
+            "light": "#78008a",
           },
         },
         "color-text-accent-green": {
           "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e500",
-            "light": "#00802f",
+            "light": "#005c26",
           },
         },
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f3f3f7",
+            "dark": "#dedee3",
             "light": "#1b232d",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#006ce0",
+            "dark": "#42b4ff",
+            "light": "#003b8f",
           },
         },
         "color-text-accent-lime": {
           "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#7ae500",
-            "light": "#007000",
+            "light": "#005700",
           },
         },
         "color-text-accent-magenta": {
           "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff57e9",
-            "light": "#b2008f",
+            "light": "#8f0072",
           },
         },
         "color-text-accent-mint": {
           "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00e582",
-            "light": "#006b48",
+            "light": "#005237",
           },
         },
         "color-text-accent-orange": {
           "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff6a3d",
-            "light": "#a82700",
+            "light": "#8a2000",
           },
         },
         "color-text-accent-pink": {
           "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff66b2",
-            "light": "#bb005d",
+            "light": "#8f0047",
           },
         },
         "color-text-accent-purple": {
           "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#bf80ff",
-            "light": "#7300e5",
+            "light": "#5900b2",
           },
         },
         "color-text-accent-red": {
           "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff7a7a",
-            "light": "#db0000",
+            "light": "#990000",
           },
         },
         "color-text-accent-rose": {
           "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ff5c85",
-            "light": "#c20030",
+            "light": "#940025",
           },
         },
         "color-text-accent-teal": {
           "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#00d6c8",
-            "light": "#00665f",
+            "light": "#00524c",
           },
         },
         "color-text-accent-violet": {
           "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#978aff",
-            "light": "#5724ff",
+            "light": "#4200db",
           },
         },
         "color-text-accent-yellow": {
           "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
             "dark": "#ffe347",
-            "light": "#9e6900",
+            "light": "#855900",
           },
         },
         "color-text-action-card-disabled": {
@@ -50333,127 +50333,127 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "rgba(122, 43, 0, 0.4)",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "rgba(250, 111, 0, 0.2)",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "rgba(0, 59, 143, 0.4)",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "rgba(0, 153, 255, 0.2)",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "rgba(0, 71, 97, 0.4)",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "rgba(0, 164, 189, 0.2)",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "rgba(120, 0, 138, 0.4)",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "rgba(228, 51, 255, 0.2)",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "rgba(0, 92, 38, 0.4)",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "rgba(43, 181, 52, 0.2)",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
+            "dark": "#333843",
+            "light": "#333843",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "rgba(0, 59, 143, 0.4)",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "rgba(0, 153, 255, 0.2)",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "rgba(0, 87, 0, 0.4)",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "rgba(49, 184, 0, 0.2)",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "rgba(143, 0, 114, 0.4)",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "rgba(255, 26, 224, 0.2)",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "rgba(0, 82, 55, 0.4)",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "rgba(0, 189, 107, 0.2)",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "rgba(138, 32, 0, 0.4)",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "rgba(255, 75, 20, 0.2)",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "rgba(143, 0, 71, 0.4)",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "rgba(255, 51, 153, 0.2)",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "rgba(89, 0, 178, 0.4)",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "rgba(173, 92, 255, 0.2)",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "rgba(153, 0, 0, 0.4)",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "rgba(255, 61, 61, 0.2)",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "rgba(148, 0, 37, 0.4)",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "rgba(255, 56, 106, 0.2)",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "rgba(0, 82, 76, 0.4)",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "rgba(0, 173, 162, 0.2)",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "rgba(66, 0, 219, 0.4)",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "rgba(133, 117, 255, 0.2)",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "rgba(158, 105, 0, 0.4)",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "rgba(251, 211, 50, 0.2)",
           },
         },
         "color-background-action-card-active": {
@@ -52678,15 +52678,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f3f3f7",
-            "light": "#f3f3f7",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-text-accent-lime": {
@@ -54189,127 +54189,127 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-background-accent-amber": {
           "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(122, 43, 0, 0.4)",
-            "light": "rgba(122, 43, 0, 0.4)",
+            "dark": "rgba(250, 111, 0, 0.2)",
+            "light": "rgba(250, 111, 0, 0.2)",
           },
         },
         "color-background-accent-blue": {
           "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "rgba(0, 59, 143, 0.4)",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "rgba(0, 153, 255, 0.2)",
           },
         },
         "color-background-accent-cyan": {
           "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 71, 97, 0.4)",
-            "light": "rgba(0, 71, 97, 0.4)",
+            "dark": "rgba(0, 164, 189, 0.2)",
+            "light": "rgba(0, 164, 189, 0.2)",
           },
         },
         "color-background-accent-fuchsia": {
           "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(120, 0, 138, 0.4)",
-            "light": "rgba(120, 0, 138, 0.4)",
+            "dark": "rgba(228, 51, 255, 0.2)",
+            "light": "rgba(228, 51, 255, 0.2)",
           },
         },
         "color-background-accent-green": {
           "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 92, 38, 0.4)",
-            "light": "rgba(0, 92, 38, 0.4)",
+            "dark": "rgba(43, 181, 52, 0.2)",
+            "light": "rgba(43, 181, 52, 0.2)",
           },
         },
         "color-background-accent-grey": {
           "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#232b37",
-            "light": "#232b37",
+            "dark": "#333843",
+            "light": "#333843",
           },
         },
         "color-background-accent-indigo": {
           "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 59, 143, 0.4)",
-            "light": "rgba(0, 59, 143, 0.4)",
+            "dark": "rgba(0, 153, 255, 0.2)",
+            "light": "rgba(0, 153, 255, 0.2)",
           },
         },
         "color-background-accent-lime": {
           "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 87, 0, 0.4)",
-            "light": "rgba(0, 87, 0, 0.4)",
+            "dark": "rgba(49, 184, 0, 0.2)",
+            "light": "rgba(49, 184, 0, 0.2)",
           },
         },
         "color-background-accent-magenta": {
           "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 114, 0.4)",
-            "light": "rgba(143, 0, 114, 0.4)",
+            "dark": "rgba(255, 26, 224, 0.2)",
+            "light": "rgba(255, 26, 224, 0.2)",
           },
         },
         "color-background-accent-mint": {
           "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 55, 0.4)",
-            "light": "rgba(0, 82, 55, 0.4)",
+            "dark": "rgba(0, 189, 107, 0.2)",
+            "light": "rgba(0, 189, 107, 0.2)",
           },
         },
         "color-background-accent-orange": {
           "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(138, 32, 0, 0.4)",
-            "light": "rgba(138, 32, 0, 0.4)",
+            "dark": "rgba(255, 75, 20, 0.2)",
+            "light": "rgba(255, 75, 20, 0.2)",
           },
         },
         "color-background-accent-pink": {
           "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(143, 0, 71, 0.4)",
-            "light": "rgba(143, 0, 71, 0.4)",
+            "dark": "rgba(255, 51, 153, 0.2)",
+            "light": "rgba(255, 51, 153, 0.2)",
           },
         },
         "color-background-accent-purple": {
           "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(89, 0, 178, 0.4)",
-            "light": "rgba(89, 0, 178, 0.4)",
+            "dark": "rgba(173, 92, 255, 0.2)",
+            "light": "rgba(173, 92, 255, 0.2)",
           },
         },
         "color-background-accent-red": {
           "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(153, 0, 0, 0.4)",
-            "light": "rgba(153, 0, 0, 0.4)",
+            "dark": "rgba(255, 61, 61, 0.2)",
+            "light": "rgba(255, 61, 61, 0.2)",
           },
         },
         "color-background-accent-rose": {
           "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(148, 0, 37, 0.4)",
-            "light": "rgba(148, 0, 37, 0.4)",
+            "dark": "rgba(255, 56, 106, 0.2)",
+            "light": "rgba(255, 56, 106, 0.2)",
           },
         },
         "color-background-accent-teal": {
           "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(0, 82, 76, 0.4)",
-            "light": "rgba(0, 82, 76, 0.4)",
+            "dark": "rgba(0, 173, 162, 0.2)",
+            "light": "rgba(0, 173, 162, 0.2)",
           },
         },
         "color-background-accent-violet": {
           "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(66, 0, 219, 0.4)",
-            "light": "rgba(66, 0, 219, 0.4)",
+            "dark": "rgba(133, 117, 255, 0.2)",
+            "light": "rgba(133, 117, 255, 0.2)",
           },
         },
         "color-background-accent-yellow": {
           "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "rgba(158, 105, 0, 0.4)",
-            "light": "rgba(158, 105, 0, 0.4)",
+            "dark": "rgba(251, 211, 50, 0.2)",
+            "light": "rgba(251, 211, 50, 0.2)",
           },
         },
         "color-background-action-card-active": {
@@ -56534,15 +56534,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "color-text-accent-grey": {
           "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#f3f3f7",
-            "light": "#f3f3f7",
+            "dark": "#dedee3",
+            "light": "#dedee3",
           },
         },
         "color-text-accent-indigo": {
           "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
           "$value": {
-            "dark": "#75cfff",
-            "light": "#75cfff",
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
           },
         },
         "color-text-accent-lime": {
@@ -58045,127 +58045,127 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     "color-background-accent-amber": {
       "$description": "The background color of the amber accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(122, 43, 0, 0.4)",
-        "light": "#fff7e6",
+        "dark": "rgba(250, 111, 0, 0.2)",
+        "light": "#ffe8bd",
       },
     },
     "color-background-accent-blue": {
       "$description": "The background color of the blue accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 59, 143, 0.4)",
-        "light": "#f0fbff",
+        "dark": "rgba(0, 153, 255, 0.2)",
+        "light": "#d1f1ff",
       },
     },
     "color-background-accent-cyan": {
       "$description": "The background color of the cyan accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 71, 97, 0.4)",
-        "light": "#f0feff",
+        "dark": "rgba(0, 164, 189, 0.2)",
+        "light": "#d1fbff",
       },
     },
     "color-background-accent-fuchsia": {
       "$description": "The background color of the fuchsia accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(120, 0, 138, 0.4)",
-        "light": "#fff5fe",
+        "dark": "rgba(228, 51, 255, 0.2)",
+        "light": "#fce5ff",
       },
     },
     "color-background-accent-green": {
       "$description": "The background color of the green accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 92, 38, 0.4)",
-        "light": "#effff1",
+        "dark": "rgba(43, 181, 52, 0.2)",
+        "light": "#d9ffd6",
       },
     },
     "color-background-accent-grey": {
       "$description": "The background color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#232b37",
-        "light": "#f6f6f9",
+        "dark": "#333843",
+        "light": "#ebebf0",
       },
     },
     "color-background-accent-indigo": {
       "$description": "The background color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 59, 143, 0.4)",
-        "light": "#f0fbff",
+        "dark": "rgba(0, 153, 255, 0.2)",
+        "light": "#d1f1ff",
       },
     },
     "color-background-accent-lime": {
       "$description": "The background color of the lime accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 87, 0, 0.4)",
-        "light": "#f7ffeb",
+        "dark": "rgba(49, 184, 0, 0.2)",
+        "light": "#ebffcc",
       },
     },
     "color-background-accent-magenta": {
       "$description": "The background color of the magenta accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(143, 0, 114, 0.4)",
-        "light": "#fff5fe",
+        "dark": "rgba(255, 26, 224, 0.2)",
+        "light": "#ffe0fb",
       },
     },
     "color-background-accent-mint": {
       "$description": "The background color of the mint accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 82, 55, 0.4)",
-        "light": "#ebfff6",
+        "dark": "rgba(0, 189, 107, 0.2)",
+        "light": "#ccffe9",
       },
     },
     "color-background-accent-orange": {
       "$description": "The background color of the orange accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(138, 32, 0, 0.4)",
-        "light": "#fff7f5",
+        "dark": "rgba(255, 75, 20, 0.2)",
+        "light": "#ffe0d6",
       },
     },
     "color-background-accent-pink": {
       "$description": "The background color of the pink accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(143, 0, 71, 0.4)",
-        "light": "#fff5fa",
+        "dark": "rgba(255, 51, 153, 0.2)",
+        "light": "#ffe0f0",
       },
     },
     "color-background-accent-purple": {
       "$description": "The background color of the purple accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(89, 0, 178, 0.4)",
-        "light": "#faf5ff",
+        "dark": "rgba(173, 92, 255, 0.2)",
+        "light": "#f2e5ff",
       },
     },
     "color-background-accent-red": {
       "$description": "The background color of the red accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(153, 0, 0, 0.4)",
-        "light": "#fff5f5",
+        "dark": "rgba(255, 61, 61, 0.2)",
+        "light": "#ffe0e0",
       },
     },
     "color-background-accent-rose": {
       "$description": "The background color of the rose accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(148, 0, 37, 0.4)",
-        "light": "#fff5f8",
+        "dark": "rgba(255, 56, 106, 0.2)",
+        "light": "#ffe0e8",
       },
     },
     "color-background-accent-teal": {
       "$description": "The background color of the teal accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(0, 82, 76, 0.4)",
-        "light": "#ebfffe",
+        "dark": "rgba(0, 173, 162, 0.2)",
+        "light": "#ccfffc",
       },
     },
     "color-background-accent-violet": {
       "$description": "The background color of the violet accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(66, 0, 219, 0.4)",
-        "light": "#f6f5ff",
+        "dark": "rgba(133, 117, 255, 0.2)",
+        "light": "#e8e5ff",
       },
     },
     "color-background-accent-yellow": {
       "$description": "The background color of the yellow accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "rgba(158, 105, 0, 0.4)",
-        "light": "#fffef0",
+        "dark": "rgba(251, 211, 50, 0.2)",
+        "light": "#fffbbd",
       },
     },
     "color-background-action-card-active": {
@@ -60356,126 +60356,126 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The content color of the amber accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff9900",
-        "light": "#9e3700",
+        "light": "#7a2b00",
       },
     },
     "color-text-accent-blue": {
       "$description": "The content color of the blue accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#42b4ff",
-        "light": "#004a9e",
+        "light": "#003b8f",
       },
     },
     "color-text-accent-cyan": {
       "$description": "The content color of the cyan accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00d2e5",
-        "light": "#00627a",
+        "light": "#004761",
       },
     },
     "color-text-accent-fuchsia": {
       "$description": "The content color of the fuchsia accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ec70ff",
-        "light": "#a000b8",
+        "light": "#78008a",
       },
     },
     "color-text-accent-green": {
       "$description": "The content color of the green accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00e500",
-        "light": "#00802f",
+        "light": "#005c26",
       },
     },
     "color-text-accent-grey": {
       "$description": "The content color of the grey accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#f3f3f7",
+        "dark": "#dedee3",
         "light": "#1b232d",
       },
     },
     "color-text-accent-indigo": {
       "$description": "The content color of the indigo accent in the Box \`awsui-accent\` variant.",
       "$value": {
-        "dark": "#75cfff",
-        "light": "#006ce0",
+        "dark": "#42b4ff",
+        "light": "#003b8f",
       },
     },
     "color-text-accent-lime": {
       "$description": "The content color of the lime accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#7ae500",
-        "light": "#007000",
+        "light": "#005700",
       },
     },
     "color-text-accent-magenta": {
       "$description": "The content color of the magenta accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff57e9",
-        "light": "#b2008f",
+        "light": "#8f0072",
       },
     },
     "color-text-accent-mint": {
       "$description": "The content color of the mint accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00e582",
-        "light": "#006b48",
+        "light": "#005237",
       },
     },
     "color-text-accent-orange": {
       "$description": "The content color of the orange accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff6a3d",
-        "light": "#a82700",
+        "light": "#8a2000",
       },
     },
     "color-text-accent-pink": {
       "$description": "The content color of the pink accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff66b2",
-        "light": "#bb005d",
+        "light": "#8f0047",
       },
     },
     "color-text-accent-purple": {
       "$description": "The content color of the purple accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#bf80ff",
-        "light": "#7300e5",
+        "light": "#5900b2",
       },
     },
     "color-text-accent-red": {
       "$description": "The content color of the red accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff7a7a",
-        "light": "#db0000",
+        "light": "#990000",
       },
     },
     "color-text-accent-rose": {
       "$description": "The content color of the rose accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ff5c85",
-        "light": "#c20030",
+        "light": "#940025",
       },
     },
     "color-text-accent-teal": {
       "$description": "The content color of the teal accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#00d6c8",
-        "light": "#00665f",
+        "light": "#00524c",
       },
     },
     "color-text-accent-violet": {
       "$description": "The content color of the violet accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#978aff",
-        "light": "#5724ff",
+        "light": "#4200db",
       },
     },
     "color-text-accent-yellow": {
       "$description": "The content color of the yellow accent in the Box \`awsui-accent\` variant.",
       "$value": {
         "dark": "#ffe347",
-        "light": "#9e6900",
+        "light": "#855900",
       },
     },
     "color-text-action-card-disabled": {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index dc0ae04f50..bf15e2b671 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -5109,6 +5109,9 @@ Composes with existing Box props such as \`padding\` and \`margin\`.",
       },
       "name": "visualAccent",
       "optional": true,
+      "systemTags": [
+        "one-theme",
+      ],
       "type": "BoxProps.VisualAccent",
     },
   ],
diff --git a/src/box/interfaces.ts b/src/box/interfaces.ts
index fc20ac7d96..26fab89e05 100644
--- a/src/box/interfaces.ts
+++ b/src/box/interfaces.ts
@@ -43,8 +43,6 @@ export interface BoxProps extends BaseComponentProps {
    *   `aspectRatio: 'equal'` to render a circle.
    *
    * Composes with existing Box props such as `padding` and `margin`.
-   *
-   * @awsuiSystem one-theme
    */
   visualAccent?: BoxProps.VisualAccent;
   /**
diff --git a/style-dictionary/visual-refresh/color-palette.ts b/style-dictionary/visual-refresh/color-palette.ts
index c16bdc929b..27c899c506 100644
--- a/style-dictionary/visual-refresh/color-palette.ts
+++ b/style-dictionary/visual-refresh/color-palette.ts
@@ -74,60 +74,84 @@ const tokens: StyleDictionary.ColorPaletteDictionary = {
     'colorNeutralGrey950',
     'colorRed950',
     'colorOrange50',
+    'colorOrange100',
     'colorOrange400',
     'colorOrange700',
+    'colorOrange800',
     'colorOrange950',
     'colorYellow600',
     'colorYellow950',
     'colorLime50',
+    'colorLime100',
     'colorLime400',
     'colorLime700',
+    'colorLime800',
     'colorLime950',
     'colorGreen400',
     'colorGreen950',
     'colorMint50',
+    'colorMint100',
     'colorMint400',
     'colorMint700',
+    'colorMint800',
     'colorMint950',
     'colorIndigo50',
     'colorIndigo400',
     'colorIndigo600',
     'colorIndigo950',
     'colorPurple50',
+    'colorPurple100',
     'colorPurple600',
+    'colorPurple800',
     'colorPurple950',
     // Additional visual accent hues (mirror base color primitives)
     'colorTeal50',
+    'colorTeal100',
     'colorTeal400',
     'colorTeal700',
+    'colorTeal800',
     'colorTeal950',
     'colorCyan50',
+    'colorCyan100',
     'colorCyan400',
     'colorCyan700',
+    'colorCyan800',
     'colorCyan950',
     'colorBlue950',
     'colorViolet50',
+    'colorViolet100',
     'colorViolet400',
     'colorViolet700',
+    'colorViolet800',
     'colorViolet950',
     'colorFuchsia50',
+    'colorFuchsia100',
     'colorFuchsia400',
     'colorFuchsia700',
+    'colorFuchsia800',
     'colorFuchsia950',
     'colorMagenta50',
+    'colorMagenta100',
     'colorMagenta400',
     'colorMagenta700',
+    'colorMagenta800',
     'colorMagenta950',
     'colorPink50',
+    'colorPink100',
     'colorPink400',
     'colorPink700',
+    'colorPink800',
     'colorPink950',
     'colorRose50',
+    'colorRose100',
     'colorRose400',
     'colorRose700',
+    'colorRose800',
     'colorRose950',
     'colorAmber50',
+    'colorAmber100',
     'colorAmber700',
+    'colorAmber800',
     'colorAmber950',
     'colorAwsSquidInk',
     'colorTransparent',
@@ -177,22 +201,27 @@ const referenceTokens: ReferenceTokens = {
     },
     error: {
       50: brand.colorRed50,
+      100: brand.colorRed100,
       400: brand.colorRed400,
       600: brand.colorRed600,
+      800: brand.colorRed800,
       900: brand.colorRed900,
       950: brand.colorRed950,
       1000: brand.colorRed1000,
     },
     success: {
       50: brand.colorGreen50,
+      100: brand.colorGreen100,
       400: brand.colorGreen400,
       500: brand.colorGreen500,
       600: brand.colorGreen600,
+      800: brand.colorGreen800,
       950: brand.colorGreen950,
       1000: brand.colorGreen1000,
     },
     warning: {
       50: brand.colorYellow50,
+      100: brand.colorYellow100,
       400: brand.colorYellow400,
       500: brand.colorYellow500,
       600: brand.colorYellow600,
@@ -203,10 +232,12 @@ const referenceTokens: ReferenceTokens = {
     },
     info: {
       50: brand.colorBlue50,
+      100: brand.colorBlue100,
       300: brand.colorBlue300,
       400: brand.colorBlue400,
       600: brand.colorBlue600,
       700: brand.colorBlue700,
+      800: brand.colorBlue800,
       950: brand.colorBlue950,
       1000: brand.colorBlue1000,
     },
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 1c4cf269da..3ac0267871 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -372,42 +372,42 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundCodeView: { light: '#f8f8f8', dark: '#282c34' },
 
   // ── Visual accent ───────────────────────────────────
-  colorBackgroundAccentRed: { light: '{colorError50}', dark: 'rgba(153, 0, 0, 0.4)' },
-  colorBackgroundAccentYellow: { light: '{colorWarning50}', dark: 'rgba(158, 105, 0, 0.4)' },
-  colorBackgroundAccentIndigo: { light: '{colorInfo50}', dark: 'rgba(0, 59, 143, 0.4)' },
-  colorBackgroundAccentGreen: { light: '{colorSuccess50}', dark: 'rgba(0, 92, 38, 0.4)' },
-  colorBackgroundAccentOrange: { light: '{colorOrange50}', dark: 'rgba(138, 32, 0, 0.4)' },
-  colorBackgroundAccentPurple: { light: '{colorPurple50}', dark: 'rgba(89, 0, 178, 0.4)' },
-  colorBackgroundAccentMint: { light: '{colorMint50}', dark: 'rgba(0, 82, 55, 0.4)' },
-  colorBackgroundAccentLime: { light: '{colorLime50}', dark: 'rgba(0, 87, 0, 0.4)' },
-  colorBackgroundAccentGrey: { light: '{colorNeutral150}', dark: '{colorNeutral750}' },
-  colorBackgroundAccentTeal: { light: '{colorTeal50}', dark: 'rgba(0, 82, 76, 0.4)' },
-  colorBackgroundAccentCyan: { light: '{colorCyan50}', dark: 'rgba(0, 71, 97, 0.4)' },
-  colorBackgroundAccentBlue: { light: '{colorInfo50}', dark: 'rgba(0, 59, 143, 0.4)' },
-  colorBackgroundAccentViolet: { light: '{colorViolet50}', dark: 'rgba(66, 0, 219, 0.4)' },
-  colorBackgroundAccentFuchsia: { light: '{colorFuchsia50}', dark: 'rgba(120, 0, 138, 0.4)' },
-  colorBackgroundAccentMagenta: { light: '{colorMagenta50}', dark: 'rgba(143, 0, 114, 0.4)' },
-  colorBackgroundAccentPink: { light: '{colorPink50}', dark: 'rgba(143, 0, 71, 0.4)' },
-  colorBackgroundAccentRose: { light: '{colorRose50}', dark: 'rgba(148, 0, 37, 0.4)' },
-  colorBackgroundAccentAmber: { light: '{colorAmber50}', dark: 'rgba(122, 43, 0, 0.4)' },
-  colorTextAccentRed: { light: '{colorError600}', dark: '{colorError400}' },
-  colorTextAccentYellow: { light: '{colorWarning800}', dark: '{colorWarning400}' },
-  colorTextAccentIndigo: { light: '{colorInfo600}', dark: '{colorInfo300}' },
-  colorTextAccentGreen: { light: '{colorSuccess600}', dark: '{colorSuccess400}' },
-  colorTextAccentOrange: { light: '{colorOrange700}', dark: '{colorOrange400}' },
-  colorTextAccentPurple: { light: '{colorPurple700}', dark: '{colorPurple400}' },
-  colorTextAccentMint: { light: '{colorMint700}', dark: '{colorMint400}' },
-  colorTextAccentLime: { light: '{colorLime700}', dark: '{colorLime400}' },
-  colorTextAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral200}' },
-  colorTextAccentTeal: { light: '{colorTeal700}', dark: '{colorTeal400}' },
-  colorTextAccentCyan: { light: '{colorCyan700}', dark: '{colorCyan400}' },
-  colorTextAccentBlue: { light: '{colorInfo700}', dark: '{colorInfo400}' },
-  colorTextAccentViolet: { light: '{colorViolet700}', dark: '{colorViolet400}' },
-  colorTextAccentFuchsia: { light: '{colorFuchsia700}', dark: '{colorFuchsia400}' },
-  colorTextAccentMagenta: { light: '{colorMagenta700}', dark: '{colorMagenta400}' },
-  colorTextAccentPink: { light: '{colorPink700}', dark: '{colorPink400}' },
-  colorTextAccentRose: { light: '{colorRose700}', dark: '{colorRose400}' },
-  colorTextAccentAmber: { light: '{colorAmber700}', dark: '{colorAmber400}' },
+  colorBackgroundAccentRed: { light: '{colorError100}', dark: 'rgba(255, 61, 61, 0.2)' },
+  colorBackgroundAccentYellow: { light: '{colorWarning100}', dark: 'rgba(251, 211, 50, 0.2)' },
+  colorBackgroundAccentIndigo: { light: '{colorInfo100}', dark: 'rgba(0, 153, 255, 0.2)' },
+  colorBackgroundAccentGreen: { light: '{colorSuccess100}', dark: 'rgba(43, 181, 52, 0.2)' },
+  colorBackgroundAccentOrange: { light: '{colorOrange100}', dark: 'rgba(255, 75, 20, 0.2)' },
+  colorBackgroundAccentPurple: { light: '{colorPurple100}', dark: 'rgba(173, 92, 255, 0.2)' },
+  colorBackgroundAccentMint: { light: '{colorMint100}', dark: 'rgba(0, 189, 107, 0.2)' },
+  colorBackgroundAccentLime: { light: '{colorLime100}', dark: 'rgba(49, 184, 0, 0.2)' },
+  colorBackgroundAccentGrey: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
+  colorBackgroundAccentTeal: { light: '{colorTeal100}', dark: 'rgba(0, 173, 162, 0.2)' },
+  colorBackgroundAccentCyan: { light: '{colorCyan100}', dark: 'rgba(0, 164, 189, 0.2)' },
+  colorBackgroundAccentBlue: { light: '{colorInfo100}', dark: 'rgba(0, 153, 255, 0.2)' },
+  colorBackgroundAccentViolet: { light: '{colorViolet100}', dark: 'rgba(133, 117, 255, 0.2)' },
+  colorBackgroundAccentFuchsia: { light: '{colorFuchsia100}', dark: 'rgba(228, 51, 255, 0.2)' },
+  colorBackgroundAccentMagenta: { light: '{colorMagenta100}', dark: 'rgba(255, 26, 224, 0.2)' },
+  colorBackgroundAccentPink: { light: '{colorPink100}', dark: 'rgba(255, 51, 153, 0.2)' },
+  colorBackgroundAccentRose: { light: '{colorRose100}', dark: 'rgba(255, 56, 106, 0.2)' },
+  colorBackgroundAccentAmber: { light: '{colorAmber100}', dark: 'rgba(250, 111, 0, 0.2)' },
+  colorTextAccentRed: { light: '{colorError800}', dark: '{colorError400}' },
+  colorTextAccentYellow: { light: '{colorWarning900}', dark: '{colorWarning400}' },
+  colorTextAccentIndigo: { light: '{colorInfo800}', dark: '{colorInfo400}' },
+  colorTextAccentGreen: { light: '{colorSuccess800}', dark: '{colorSuccess400}' },
+  colorTextAccentOrange: { light: '{colorOrange800}', dark: '{colorOrange400}' },
+  colorTextAccentPurple: { light: '{colorPurple800}', dark: '{colorPurple400}' },
+  colorTextAccentMint: { light: '{colorMint800}', dark: '{colorMint400}' },
+  colorTextAccentLime: { light: '{colorLime800}', dark: '{colorLime400}' },
+  colorTextAccentGrey: { light: '{colorNeutral800}', dark: '{colorNeutral300}' },
+  colorTextAccentTeal: { light: '{colorTeal800}', dark: '{colorTeal400}' },
+  colorTextAccentCyan: { light: '{colorCyan800}', dark: '{colorCyan400}' },
+  colorTextAccentBlue: { light: '{colorInfo800}', dark: '{colorInfo400}' },
+  colorTextAccentViolet: { light: '{colorViolet800}', dark: '{colorViolet400}' },
+  colorTextAccentFuchsia: { light: '{colorFuchsia800}', dark: '{colorFuchsia400}' },
+  colorTextAccentMagenta: { light: '{colorMagenta800}', dark: '{colorMagenta400}' },
+  colorTextAccentPink: { light: '{colorPink800}', dark: '{colorPink400}' },
+  colorTextAccentRose: { light: '{colorRose800}', dark: '{colorRose400}' },
+  colorTextAccentAmber: { light: '{colorAmber800}', dark: '{colorAmber400}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);

From d079ddccda481fc6d8b059239c49e87a8de7e8da Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 9 Jul 2026 14:20:13 +0200
Subject: [PATCH 19/19] chore: Update snapshots

---
 .../__snapshots__/themes.test.ts.snap         | 902 ++++++++++--------
 .../__snapshots__/documenter.test.ts.snap     |   3 -
 2 files changed, 483 insertions(+), 422 deletions(-)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index cfba78f503..55e1d36f1e 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -78,28 +78,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-width-item-selected": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
+  "color-amber-100": "#ffe8bd",
   "color-amber-400": "#ff9900",
-  "color-amber-50": "#fff7e6",
-  "color-amber-700": "#9e3700",
+  "color-amber-800": "#7a2b00",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "#fff7e6",
-  "color-background-accent-blue": "#f1faff",
-  "color-background-accent-cyan": "#f0feff",
-  "color-background-accent-fuchsia": "#fff5fe",
-  "color-background-accent-green": "#f2f8f0",
-  "color-background-accent-grey": "#f6f6f9",
-  "color-background-accent-indigo": "#f1faff",
-  "color-background-accent-lime": "#f7ffeb",
-  "color-background-accent-magenta": "#fff5fe",
-  "color-background-accent-mint": "#ebfff6",
-  "color-background-accent-orange": "#fff7f5",
-  "color-background-accent-pink": "#fff5fa",
-  "color-background-accent-purple": "#faf5ff",
-  "color-background-accent-red": "#fdf3f1",
-  "color-background-accent-rose": "#fff5f8",
-  "color-background-accent-teal": "#ebfffe",
-  "color-background-accent-violet": "#f6f5ff",
-  "color-background-accent-yellow": "#fffef0",
+  "color-background-accent-amber": "#ffe8bd",
+  "color-background-accent-blue": "#d1f1ff",
+  "color-background-accent-cyan": "#d1fbff",
+  "color-background-accent-fuchsia": "#fce5ff",
+  "color-background-accent-green": "#d9ffd6",
+  "color-background-accent-grey": "#eaeded",
+  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-lime": "#ebffcc",
+  "color-background-accent-magenta": "#ffe0fb",
+  "color-background-accent-mint": "#ccffe9",
+  "color-background-accent-orange": "#ffe0d6",
+  "color-background-accent-pink": "#ffe0f0",
+  "color-background-accent-purple": "#f2e5ff",
+  "color-background-accent-red": "#ffe0e0",
+  "color-background-accent-rose": "#ffe0e8",
+  "color-background-accent-teal": "#ccfffc",
+  "color-background-accent-violet": "#e8e5ff",
+  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -475,9 +475,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-100": "#d1fbff",
   "color-cyan-400": "#00d2e5",
-  "color-cyan-50": "#f0feff",
-  "color-cyan-700": "#00627a",
+  "color-cyan-800": "#004761",
   "color-drag-placeholder-active": "#d5dbdb",
   "color-drag-placeholder-hover": "#99cbe4",
   "color-dropzone-background-default": "#ffffff",
@@ -486,18 +486,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-dropzone-border-hover": "#002b66",
   "color-dropzone-text-default": "#545b64",
   "color-dropzone-text-hover": "#545b64",
+  "color-error-100": "#ffe0e0",
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
+  "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
+  "color-fuchsia-100": "#fce5ff",
   "color-fuchsia-400": "#ec70ff",
-  "color-fuchsia-50": "#fff5fe",
-  "color-fuchsia-700": "#a000b8",
+  "color-fuchsia-800": "#78008a",
   "color-gap-global-drawer": "#eaeded",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -511,23 +513,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-icon-action-card-default": "#0073bb",
   "color-icon-action-card-disabled": "#aab7b8",
   "color-icon-action-card-hover": "#002b66",
+  "color-info-100": "#d1f1ff",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
   "color-info-700": "#004a9e",
+  "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
+  "color-lime-100": "#ebffcc",
   "color-lime-400": "#7ae500",
-  "color-lime-50": "#f7ffeb",
-  "color-lime-700": "#007000",
+  "color-lime-800": "#005700",
+  "color-magenta-100": "#ffe0fb",
   "color-magenta-400": "#ff57e9",
-  "color-magenta-50": "#fff5fe",
-  "color-magenta-700": "#b2008f",
+  "color-magenta-800": "#8f0072",
+  "color-mint-100": "#ccffe9",
   "color-mint-400": "#00e582",
-  "color-mint-50": "#ebfff6",
-  "color-mint-700": "#006b48",
+  "color-mint-800": "#005237",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -548,12 +552,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
+  "color-orange-100": "#ffe0d6",
   "color-orange-400": "#ff6a3d",
-  "color-orange-50": "#fff7f5",
-  "color-orange-700": "#a82700",
+  "color-orange-800": "#8a2000",
+  "color-pink-100": "#ffe0f0",
   "color-pink-400": "#ff66b2",
-  "color-pink-50": "#fff5fa",
-  "color-pink-700": "#bb005d",
+  "color-pink-800": "#8f0047",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -566,12 +570,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-primary-950": "#00204d",
+  "color-purple-100": "#f2e5ff",
   "color-purple-400": "#bf80ff",
-  "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
+  "color-purple-800": "#5900b2",
+  "color-rose-100": "#ffe0e8",
   "color-rose-400": "#ff5c85",
-  "color-rose-50": "#fff5f8",
-  "color-rose-700": "#c20030",
+  "color-rose-800": "#940025",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -581,34 +586,36 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-shadow-side": "rgba(0, 28, 36, 0.15)",
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#879596",
+  "color-success-100": "#d9ffd6",
   "color-success-1000": "#172211",
   "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
+  "color-success-800": "#005c26",
   "color-success-950": "#003311",
+  "color-teal-100": "#ccfffc",
   "color-teal-400": "#00d6c8",
-  "color-teal-50": "#ebfffe",
-  "color-teal-700": "#00665f",
+  "color-teal-800": "#00524c",
   "color-text-accent": "#0073bb",
-  "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#004a9e",
-  "color-text-accent-cyan": "#00627a",
-  "color-text-accent-fuchsia": "#a000b8",
-  "color-text-accent-green": "#1d8102",
+  "color-text-accent-amber": "#7a2b00",
+  "color-text-accent-blue": "#003b8f",
+  "color-text-accent-cyan": "#004761",
+  "color-text-accent-fuchsia": "#78008a",
+  "color-text-accent-green": "#005c26",
   "color-text-accent-grey": "#21252c",
-  "color-text-accent-indigo": "#0073bb",
-  "color-text-accent-lime": "#007000",
-  "color-text-accent-magenta": "#b2008f",
-  "color-text-accent-mint": "#006b48",
-  "color-text-accent-orange": "#a82700",
-  "color-text-accent-pink": "#bb005d",
-  "color-text-accent-purple": "#7300e5",
-  "color-text-accent-red": "#d13212",
-  "color-text-accent-rose": "#c20030",
-  "color-text-accent-teal": "#00665f",
-  "color-text-accent-violet": "#5724ff",
-  "color-text-accent-yellow": "#9e6900",
+  "color-text-accent-indigo": "#003b8f",
+  "color-text-accent-lime": "#005700",
+  "color-text-accent-magenta": "#8f0072",
+  "color-text-accent-mint": "#005237",
+  "color-text-accent-orange": "#8a2000",
+  "color-text-accent-pink": "#8f0047",
+  "color-text-accent-purple": "#5900b2",
+  "color-text-accent-red": "#990000",
+  "color-text-accent-rose": "#940025",
+  "color-text-accent-teal": "#00524c",
+  "color-text-accent-violet": "#4200db",
+  "color-text-accent-yellow": "#906806",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -740,9 +747,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-text-tutorial-hotspot-hover": "#0a4a74",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
+  "color-violet-100": "#e8e5ff",
   "color-violet-400": "#978aff",
-  "color-violet-50": "#f6f5ff",
-  "color-violet-700": "#5724ff",
+  "color-violet-800": "#4200db",
+  "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -1084,28 +1092,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-width-item-selected": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
+  "color-amber-100": "#ffe8bd",
   "color-amber-400": "#ff9900",
-  "color-amber-50": "#fff7e6",
-  "color-amber-700": "#9e3700",
+  "color-amber-800": "#7a2b00",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(122, 43, 0, 0.4)",
-  "color-background-accent-blue": "rgba(0, 59, 143, 0.4)",
-  "color-background-accent-cyan": "rgba(0, 71, 97, 0.4)",
-  "color-background-accent-fuchsia": "rgba(120, 0, 138, 0.4)",
-  "color-background-accent-green": "rgba(0, 92, 38, 0.4)",
-  "color-background-accent-grey": "#2a2e33",
-  "color-background-accent-indigo": "rgba(0, 59, 143, 0.4)",
-  "color-background-accent-lime": "rgba(0, 87, 0, 0.4)",
-  "color-background-accent-magenta": "rgba(143, 0, 114, 0.4)",
-  "color-background-accent-mint": "rgba(0, 82, 55, 0.4)",
-  "color-background-accent-orange": "rgba(138, 32, 0, 0.4)",
-  "color-background-accent-pink": "rgba(143, 0, 71, 0.4)",
-  "color-background-accent-purple": "rgba(89, 0, 178, 0.4)",
-  "color-background-accent-red": "rgba(153, 0, 0, 0.4)",
-  "color-background-accent-rose": "rgba(148, 0, 37, 0.4)",
-  "color-background-accent-teal": "rgba(0, 82, 76, 0.4)",
-  "color-background-accent-violet": "rgba(66, 0, 219, 0.4)",
-  "color-background-accent-yellow": "rgba(158, 105, 0, 0.4)",
+  "color-background-accent-amber": "rgba(250, 111, 0, 0.2)",
+  "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-cyan": "rgba(0, 164, 189, 0.2)",
+  "color-background-accent-fuchsia": "rgba(228, 51, 255, 0.2)",
+  "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
+  "color-background-accent-grey": "#414750",
+  "color-background-accent-indigo": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
+  "color-background-accent-magenta": "rgba(255, 26, 224, 0.2)",
+  "color-background-accent-mint": "rgba(0, 189, 107, 0.2)",
+  "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
+  "color-background-accent-pink": "rgba(255, 51, 153, 0.2)",
+  "color-background-accent-purple": "rgba(173, 92, 255, 0.2)",
+  "color-background-accent-red": "rgba(255, 61, 61, 0.2)",
+  "color-background-accent-rose": "rgba(255, 56, 106, 0.2)",
+  "color-background-accent-teal": "rgba(0, 173, 162, 0.2)",
+  "color-background-accent-violet": "rgba(133, 117, 255, 0.2)",
+  "color-background-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-background-action-card-active": "#414750",
   "color-background-action-card-default": "#1a2029",
   "color-background-action-card-disabled": "#21252c",
@@ -1481,9 +1489,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-charts-yellow-700": "#dfb52c",
   "color-charts-yellow-800": "#eac33a",
   "color-charts-yellow-900": "#f1cf65",
+  "color-cyan-100": "#d1fbff",
   "color-cyan-400": "#00d2e5",
-  "color-cyan-50": "#f0feff",
-  "color-cyan-700": "#00627a",
+  "color-cyan-800": "#004761",
   "color-drag-placeholder-active": "#687078",
   "color-drag-placeholder-hover": "#0073bb",
   "color-dropzone-background-default": "#1a2029",
@@ -1492,18 +1500,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-dropzone-border-hover": "#44b9d6",
   "color-dropzone-text-default": "#c6c6cd",
   "color-dropzone-text-hover": "#c6c6cd",
+  "color-error-100": "#ffe0e0",
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
+  "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#687078",
   "color-foreground-control-read-only": "#95a5a6",
+  "color-fuchsia-100": "#fce5ff",
   "color-fuchsia-400": "#ec70ff",
-  "color-fuchsia-50": "#fff5fe",
-  "color-fuchsia-700": "#a000b8",
+  "color-fuchsia-800": "#78008a",
   "color-gap-global-drawer": "#16191f",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -1517,23 +1527,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-icon-action-card-default": "#00a1c9",
   "color-icon-action-card-disabled": "#687078",
   "color-icon-action-card-hover": "#44b9d6",
+  "color-info-100": "#d1f1ff",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
   "color-info-700": "#004a9e",
+  "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#44b9d6",
+  "color-lime-100": "#ebffcc",
   "color-lime-400": "#7ae500",
-  "color-lime-50": "#f7ffeb",
-  "color-lime-700": "#007000",
+  "color-lime-800": "#005700",
+  "color-magenta-100": "#ffe0fb",
   "color-magenta-400": "#ff57e9",
-  "color-magenta-50": "#fff5fe",
-  "color-magenta-700": "#b2008f",
+  "color-magenta-800": "#8f0072",
+  "color-mint-100": "#ccffe9",
   "color-mint-400": "#00e582",
-  "color-mint-50": "#ebfff6",
-  "color-mint-700": "#006b48",
+  "color-mint-800": "#005237",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -1554,12 +1566,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
+  "color-orange-100": "#ffe0d6",
   "color-orange-400": "#ff6a3d",
-  "color-orange-50": "#fff7f5",
-  "color-orange-700": "#a82700",
+  "color-orange-800": "#8a2000",
+  "color-pink-100": "#ffe0f0",
   "color-pink-400": "#ff66b2",
-  "color-pink-50": "#fff5fa",
-  "color-pink-700": "#bb005d",
+  "color-pink-800": "#8f0047",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -1572,12 +1584,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-primary-950": "#00204d",
+  "color-purple-100": "#f2e5ff",
   "color-purple-400": "#bf80ff",
-  "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
+  "color-purple-800": "#5900b2",
+  "color-rose-100": "#ffe0e8",
   "color-rose-400": "#ff5c85",
-  "color-rose-50": "#fff5f8",
-  "color-rose-700": "#c20030",
+  "color-rose-800": "#940025",
   "color-severity-dark-red": "#d63f38",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -1587,23 +1600,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-shadow-side": "rgba(0, 0, 0, 0.3)",
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#879596",
+  "color-success-100": "#d9ffd6",
   "color-success-1000": "#172211",
   "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
+  "color-success-800": "#005c26",
   "color-success-950": "#003311",
+  "color-teal-100": "#ccfffc",
   "color-teal-400": "#00d6c8",
-  "color-teal-50": "#ebfffe",
-  "color-teal-700": "#00665f",
+  "color-teal-800": "#00524c",
   "color-text-accent": "#44b9d6",
   "color-text-accent-amber": "#ff9900",
   "color-text-accent-blue": "#00a1c9",
   "color-text-accent-cyan": "#00d2e5",
   "color-text-accent-fuchsia": "#ec70ff",
   "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#f2f3f3",
-  "color-text-accent-indigo": "#44b9d6",
+  "color-text-accent-grey": "#d5dbdb",
+  "color-text-accent-indigo": "#00a1c9",
   "color-text-accent-lime": "#7ae500",
   "color-text-accent-magenta": "#ff57e9",
   "color-text-accent-mint": "#00e582",
@@ -1746,9 +1761,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-text-tutorial-hotspot-hover": "#99cbe4",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#d5dbdb",
+  "color-violet-100": "#e8e5ff",
   "color-violet-400": "#978aff",
-  "color-violet-50": "#f6f5ff",
-  "color-violet-700": "#5724ff",
+  "color-violet-800": "#4200db",
+  "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -2090,28 +2106,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-width-item-selected": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
+  "color-amber-100": "#ffe8bd",
   "color-amber-400": "#ff9900",
-  "color-amber-50": "#fff7e6",
-  "color-amber-700": "#9e3700",
+  "color-amber-800": "#7a2b00",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "#fff7e6",
-  "color-background-accent-blue": "#f1faff",
-  "color-background-accent-cyan": "#f0feff",
-  "color-background-accent-fuchsia": "#fff5fe",
-  "color-background-accent-green": "#f2f8f0",
-  "color-background-accent-grey": "#f6f6f9",
-  "color-background-accent-indigo": "#f1faff",
-  "color-background-accent-lime": "#f7ffeb",
-  "color-background-accent-magenta": "#fff5fe",
-  "color-background-accent-mint": "#ebfff6",
-  "color-background-accent-orange": "#fff7f5",
-  "color-background-accent-pink": "#fff5fa",
-  "color-background-accent-purple": "#faf5ff",
-  "color-background-accent-red": "#fdf3f1",
-  "color-background-accent-rose": "#fff5f8",
-  "color-background-accent-teal": "#ebfffe",
-  "color-background-accent-violet": "#f6f5ff",
-  "color-background-accent-yellow": "#fffef0",
+  "color-background-accent-amber": "#ffe8bd",
+  "color-background-accent-blue": "#d1f1ff",
+  "color-background-accent-cyan": "#d1fbff",
+  "color-background-accent-fuchsia": "#fce5ff",
+  "color-background-accent-green": "#d9ffd6",
+  "color-background-accent-grey": "#eaeded",
+  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-lime": "#ebffcc",
+  "color-background-accent-magenta": "#ffe0fb",
+  "color-background-accent-mint": "#ccffe9",
+  "color-background-accent-orange": "#ffe0d6",
+  "color-background-accent-pink": "#ffe0f0",
+  "color-background-accent-purple": "#f2e5ff",
+  "color-background-accent-red": "#ffe0e0",
+  "color-background-accent-rose": "#ffe0e8",
+  "color-background-accent-teal": "#ccfffc",
+  "color-background-accent-violet": "#e8e5ff",
+  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -2487,9 +2503,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-100": "#d1fbff",
   "color-cyan-400": "#00d2e5",
-  "color-cyan-50": "#f0feff",
-  "color-cyan-700": "#00627a",
+  "color-cyan-800": "#004761",
   "color-drag-placeholder-active": "#d5dbdb",
   "color-drag-placeholder-hover": "#99cbe4",
   "color-dropzone-background-default": "#ffffff",
@@ -2498,18 +2514,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-dropzone-border-hover": "#002b66",
   "color-dropzone-text-default": "#545b64",
   "color-dropzone-text-hover": "#545b64",
+  "color-error-100": "#ffe0e0",
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
+  "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
+  "color-fuchsia-100": "#fce5ff",
   "color-fuchsia-400": "#ec70ff",
-  "color-fuchsia-50": "#fff5fe",
-  "color-fuchsia-700": "#a000b8",
+  "color-fuchsia-800": "#78008a",
   "color-gap-global-drawer": "#eaeded",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -2523,23 +2541,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-icon-action-card-default": "#0073bb",
   "color-icon-action-card-disabled": "#aab7b8",
   "color-icon-action-card-hover": "#002b66",
+  "color-info-100": "#d1f1ff",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
   "color-info-700": "#004a9e",
+  "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
+  "color-lime-100": "#ebffcc",
   "color-lime-400": "#7ae500",
-  "color-lime-50": "#f7ffeb",
-  "color-lime-700": "#007000",
+  "color-lime-800": "#005700",
+  "color-magenta-100": "#ffe0fb",
   "color-magenta-400": "#ff57e9",
-  "color-magenta-50": "#fff5fe",
-  "color-magenta-700": "#b2008f",
+  "color-magenta-800": "#8f0072",
+  "color-mint-100": "#ccffe9",
   "color-mint-400": "#00e582",
-  "color-mint-50": "#ebfff6",
-  "color-mint-700": "#006b48",
+  "color-mint-800": "#005237",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -2560,12 +2580,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
+  "color-orange-100": "#ffe0d6",
   "color-orange-400": "#ff6a3d",
-  "color-orange-50": "#fff7f5",
-  "color-orange-700": "#a82700",
+  "color-orange-800": "#8a2000",
+  "color-pink-100": "#ffe0f0",
   "color-pink-400": "#ff66b2",
-  "color-pink-50": "#fff5fa",
-  "color-pink-700": "#bb005d",
+  "color-pink-800": "#8f0047",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -2578,12 +2598,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-primary-950": "#00204d",
+  "color-purple-100": "#f2e5ff",
   "color-purple-400": "#bf80ff",
-  "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
+  "color-purple-800": "#5900b2",
+  "color-rose-100": "#ffe0e8",
   "color-rose-400": "#ff5c85",
-  "color-rose-50": "#fff5f8",
-  "color-rose-700": "#c20030",
+  "color-rose-800": "#940025",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -2593,34 +2614,36 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-shadow-side": "rgba(0, 28, 36, 0.15)",
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#879596",
+  "color-success-100": "#d9ffd6",
   "color-success-1000": "#172211",
   "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
+  "color-success-800": "#005c26",
   "color-success-950": "#003311",
+  "color-teal-100": "#ccfffc",
   "color-teal-400": "#00d6c8",
-  "color-teal-50": "#ebfffe",
-  "color-teal-700": "#00665f",
+  "color-teal-800": "#00524c",
   "color-text-accent": "#0073bb",
-  "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#004a9e",
-  "color-text-accent-cyan": "#00627a",
-  "color-text-accent-fuchsia": "#a000b8",
-  "color-text-accent-green": "#1d8102",
+  "color-text-accent-amber": "#7a2b00",
+  "color-text-accent-blue": "#003b8f",
+  "color-text-accent-cyan": "#004761",
+  "color-text-accent-fuchsia": "#78008a",
+  "color-text-accent-green": "#005c26",
   "color-text-accent-grey": "#21252c",
-  "color-text-accent-indigo": "#0073bb",
-  "color-text-accent-lime": "#007000",
-  "color-text-accent-magenta": "#b2008f",
-  "color-text-accent-mint": "#006b48",
-  "color-text-accent-orange": "#a82700",
-  "color-text-accent-pink": "#bb005d",
-  "color-text-accent-purple": "#7300e5",
-  "color-text-accent-red": "#d13212",
-  "color-text-accent-rose": "#c20030",
-  "color-text-accent-teal": "#00665f",
-  "color-text-accent-violet": "#5724ff",
-  "color-text-accent-yellow": "#9e6900",
+  "color-text-accent-indigo": "#003b8f",
+  "color-text-accent-lime": "#005700",
+  "color-text-accent-magenta": "#8f0072",
+  "color-text-accent-mint": "#005237",
+  "color-text-accent-orange": "#8a2000",
+  "color-text-accent-pink": "#8f0047",
+  "color-text-accent-purple": "#5900b2",
+  "color-text-accent-red": "#990000",
+  "color-text-accent-rose": "#940025",
+  "color-text-accent-teal": "#00524c",
+  "color-text-accent-violet": "#4200db",
+  "color-text-accent-yellow": "#906806",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -2752,9 +2775,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-text-tutorial-hotspot-hover": "#0a4a74",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
+  "color-violet-100": "#e8e5ff",
   "color-violet-400": "#978aff",
-  "color-violet-50": "#f6f5ff",
-  "color-violet-700": "#5724ff",
+  "color-violet-800": "#4200db",
+  "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -3096,28 +3120,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-width-item-selected": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
+  "color-amber-100": "#ffe8bd",
   "color-amber-400": "#ff9900",
-  "color-amber-50": "#fff7e6",
-  "color-amber-700": "#9e3700",
+  "color-amber-800": "#7a2b00",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "#fff7e6",
-  "color-background-accent-blue": "#f1faff",
-  "color-background-accent-cyan": "#f0feff",
-  "color-background-accent-fuchsia": "#fff5fe",
-  "color-background-accent-green": "#f2f8f0",
-  "color-background-accent-grey": "#f6f6f9",
-  "color-background-accent-indigo": "#f1faff",
-  "color-background-accent-lime": "#f7ffeb",
-  "color-background-accent-magenta": "#fff5fe",
-  "color-background-accent-mint": "#ebfff6",
-  "color-background-accent-orange": "#fff7f5",
-  "color-background-accent-pink": "#fff5fa",
-  "color-background-accent-purple": "#faf5ff",
-  "color-background-accent-red": "#fdf3f1",
-  "color-background-accent-rose": "#fff5f8",
-  "color-background-accent-teal": "#ebfffe",
-  "color-background-accent-violet": "#f6f5ff",
-  "color-background-accent-yellow": "#fffef0",
+  "color-background-accent-amber": "#ffe8bd",
+  "color-background-accent-blue": "#d1f1ff",
+  "color-background-accent-cyan": "#d1fbff",
+  "color-background-accent-fuchsia": "#fce5ff",
+  "color-background-accent-green": "#d9ffd6",
+  "color-background-accent-grey": "#eaeded",
+  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-lime": "#ebffcc",
+  "color-background-accent-magenta": "#ffe0fb",
+  "color-background-accent-mint": "#ccffe9",
+  "color-background-accent-orange": "#ffe0d6",
+  "color-background-accent-pink": "#ffe0f0",
+  "color-background-accent-purple": "#f2e5ff",
+  "color-background-accent-red": "#ffe0e0",
+  "color-background-accent-rose": "#ffe0e8",
+  "color-background-accent-teal": "#ccfffc",
+  "color-background-accent-violet": "#e8e5ff",
+  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#eaeded",
@@ -3493,9 +3517,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-100": "#d1fbff",
   "color-cyan-400": "#00d2e5",
-  "color-cyan-50": "#f0feff",
-  "color-cyan-700": "#00627a",
+  "color-cyan-800": "#004761",
   "color-drag-placeholder-active": "#d5dbdb",
   "color-drag-placeholder-hover": "#99cbe4",
   "color-dropzone-background-default": "#ffffff",
@@ -3504,18 +3528,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-dropzone-border-hover": "#002b66",
   "color-dropzone-text-default": "#545b64",
   "color-dropzone-text-hover": "#545b64",
+  "color-error-100": "#ffe0e0",
   "color-error-1000": "#270a11",
   "color-error-400": "#ff5d64",
   "color-error-50": "#fdf3f1",
   "color-error-600": "#d13212",
+  "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#687078",
+  "color-fuchsia-100": "#fce5ff",
   "color-fuchsia-400": "#ec70ff",
-  "color-fuchsia-50": "#fff5fe",
-  "color-fuchsia-700": "#a000b8",
+  "color-fuchsia-800": "#78008a",
   "color-gap-global-drawer": "#eaeded",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -3529,23 +3555,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-icon-action-card-default": "#0073bb",
   "color-icon-action-card-disabled": "#aab7b8",
   "color-icon-action-card-hover": "#002b66",
+  "color-info-100": "#d1f1ff",
   "color-info-1000": "#12293b",
   "color-info-300": "#44b9d6",
   "color-info-400": "#00a1c9",
   "color-info-50": "#f1faff",
   "color-info-600": "#0073bb",
   "color-info-700": "#004a9e",
+  "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#0073bb",
+  "color-lime-100": "#ebffcc",
   "color-lime-400": "#7ae500",
-  "color-lime-50": "#f7ffeb",
-  "color-lime-700": "#007000",
+  "color-lime-800": "#005700",
+  "color-magenta-100": "#ffe0fb",
   "color-magenta-400": "#ff57e9",
-  "color-magenta-50": "#fff5fe",
-  "color-magenta-700": "#b2008f",
+  "color-magenta-800": "#8f0072",
+  "color-mint-100": "#ccffe9",
   "color-mint-400": "#00e582",
-  "color-mint-50": "#ebfff6",
-  "color-mint-700": "#006b48",
+  "color-mint-800": "#005237",
   "color-neutral-100": "#fafafa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -3566,12 +3594,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-neutral-850": "#1a2029",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#16191f",
+  "color-orange-100": "#ffe0d6",
   "color-orange-400": "#ff6a3d",
-  "color-orange-50": "#fff7f5",
-  "color-orange-700": "#a82700",
+  "color-orange-800": "#8a2000",
+  "color-pink-100": "#ffe0f0",
   "color-pink-400": "#ff66b2",
-  "color-pink-50": "#fff5fa",
-  "color-pink-700": "#bb005d",
+  "color-pink-800": "#8f0047",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#12293b",
   "color-primary-200": "#99cbe4",
@@ -3584,12 +3612,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-primary-950": "#00204d",
+  "color-purple-100": "#f2e5ff",
   "color-purple-400": "#bf80ff",
-  "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
+  "color-purple-800": "#5900b2",
+  "color-rose-100": "#ffe0e8",
   "color-rose-400": "#ff5c85",
-  "color-rose-50": "#fff5f8",
-  "color-rose-700": "#c20030",
+  "color-rose-800": "#940025",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#687078",
   "color-severity-orange": "#f89256",
@@ -3599,34 +3628,36 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-shadow-side": "rgba(0, 28, 36, 0.15)",
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#879596",
+  "color-success-100": "#d9ffd6",
   "color-success-1000": "#172211",
   "color-success-400": "#00e500",
   "color-success-50": "#f2f8f0",
   "color-success-500": "#6aaf35",
   "color-success-600": "#1d8102",
+  "color-success-800": "#005c26",
   "color-success-950": "#003311",
+  "color-teal-100": "#ccfffc",
   "color-teal-400": "#00d6c8",
-  "color-teal-50": "#ebfffe",
-  "color-teal-700": "#00665f",
+  "color-teal-800": "#00524c",
   "color-text-accent": "#0073bb",
-  "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#004a9e",
-  "color-text-accent-cyan": "#00627a",
-  "color-text-accent-fuchsia": "#a000b8",
-  "color-text-accent-green": "#1d8102",
+  "color-text-accent-amber": "#7a2b00",
+  "color-text-accent-blue": "#003b8f",
+  "color-text-accent-cyan": "#004761",
+  "color-text-accent-fuchsia": "#78008a",
+  "color-text-accent-green": "#005c26",
   "color-text-accent-grey": "#21252c",
-  "color-text-accent-indigo": "#0073bb",
-  "color-text-accent-lime": "#007000",
-  "color-text-accent-magenta": "#b2008f",
-  "color-text-accent-mint": "#006b48",
-  "color-text-accent-orange": "#a82700",
-  "color-text-accent-pink": "#bb005d",
-  "color-text-accent-purple": "#7300e5",
-  "color-text-accent-red": "#d13212",
-  "color-text-accent-rose": "#c20030",
-  "color-text-accent-teal": "#00665f",
-  "color-text-accent-violet": "#5724ff",
-  "color-text-accent-yellow": "#9e6900",
+  "color-text-accent-indigo": "#003b8f",
+  "color-text-accent-lime": "#005700",
+  "color-text-accent-magenta": "#8f0072",
+  "color-text-accent-mint": "#005237",
+  "color-text-accent-orange": "#8a2000",
+  "color-text-accent-pink": "#8f0047",
+  "color-text-accent-purple": "#5900b2",
+  "color-text-accent-red": "#990000",
+  "color-text-accent-rose": "#940025",
+  "color-text-accent-teal": "#00524c",
+  "color-text-accent-violet": "#4200db",
+  "color-text-accent-yellow": "#906806",
   "color-text-action-card-disabled": "#879596",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#fafafa",
@@ -3758,9 +3789,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-text-tutorial-hotspot-hover": "#0a4a74",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#879596",
+  "color-violet-100": "#e8e5ff",
   "color-violet-400": "#978aff",
-  "color-violet-50": "#f6f5ff",
-  "color-violet-700": "#5724ff",
+  "color-violet-800": "#4200db",
+  "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -4102,28 +4134,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-width-item-selected": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
+  "color-amber-100": "#ffe8bd",
   "color-amber-400": "#ff9900",
-  "color-amber-50": "#fff7e6",
-  "color-amber-700": "#9e3700",
+  "color-amber-800": "#7a2b00",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "#fff7e6",
-  "color-background-accent-blue": "#f0fbff",
-  "color-background-accent-cyan": "#f0feff",
-  "color-background-accent-fuchsia": "#fff5fe",
-  "color-background-accent-green": "#effff1",
-  "color-background-accent-grey": "#f6f6f9",
-  "color-background-accent-indigo": "#f0fbff",
-  "color-background-accent-lime": "#f7ffeb",
-  "color-background-accent-magenta": "#fff5fe",
-  "color-background-accent-mint": "#ebfff6",
-  "color-background-accent-orange": "#fff7f5",
-  "color-background-accent-pink": "#fff5fa",
-  "color-background-accent-purple": "#faf5ff",
-  "color-background-accent-red": "#fff5f5",
-  "color-background-accent-rose": "#fff5f8",
-  "color-background-accent-teal": "#ebfffe",
-  "color-background-accent-violet": "#f6f5ff",
-  "color-background-accent-yellow": "#fffef0",
+  "color-background-accent-amber": "#ffe8bd",
+  "color-background-accent-blue": "#d1f1ff",
+  "color-background-accent-cyan": "#d1fbff",
+  "color-background-accent-fuchsia": "#fce5ff",
+  "color-background-accent-green": "#d9ffd6",
+  "color-background-accent-grey": "#ebebf0",
+  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-lime": "#ebffcc",
+  "color-background-accent-magenta": "#ffe0fb",
+  "color-background-accent-mint": "#ccffe9",
+  "color-background-accent-orange": "#ffe0d6",
+  "color-background-accent-pink": "#ffe0f0",
+  "color-background-accent-purple": "#f2e5ff",
+  "color-background-accent-red": "#ffe0e0",
+  "color-background-accent-rose": "#ffe0e8",
+  "color-background-accent-teal": "#ccfffc",
+  "color-background-accent-violet": "#e8e5ff",
+  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#ffffff",
@@ -4499,9 +4531,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-100": "#d1fbff",
   "color-cyan-400": "#00d2e5",
-  "color-cyan-50": "#f0feff",
-  "color-cyan-700": "#00627a",
+  "color-cyan-800": "#004761",
   "color-drag-placeholder-active": "#ebebf0",
   "color-drag-placeholder-hover": "#d1f1ff",
   "color-dropzone-background-default": "#ffffff",
@@ -4510,18 +4542,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-dropzone-border-hover": "#002b66",
   "color-dropzone-text-default": "#424650",
   "color-dropzone-text-hover": "#424650",
+  "color-error-100": "#ffe0e0",
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
+  "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#656871",
+  "color-fuchsia-100": "#fce5ff",
   "color-fuchsia-400": "#ec70ff",
-  "color-fuchsia-50": "#fff5fe",
-  "color-fuchsia-700": "#a000b8",
+  "color-fuchsia-800": "#78008a",
   "color-gap-global-drawer": "#ebebf0",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -4535,23 +4569,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-icon-action-card-default": "#006ce0",
   "color-icon-action-card-disabled": "#b4b4bb",
   "color-icon-action-card-hover": "#002b66",
+  "color-info-100": "#d1f1ff",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
   "color-info-700": "#004a9e",
+  "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#006ce0",
+  "color-lime-100": "#ebffcc",
   "color-lime-400": "#7ae500",
-  "color-lime-50": "#f7ffeb",
-  "color-lime-700": "#007000",
+  "color-lime-800": "#005700",
+  "color-magenta-100": "#ffe0fb",
   "color-magenta-400": "#ff57e9",
-  "color-magenta-50": "#fff5fe",
-  "color-magenta-700": "#b2008f",
+  "color-magenta-800": "#8f0072",
+  "color-mint-100": "#ccffe9",
   "color-mint-400": "#00e582",
-  "color-mint-50": "#ebfff6",
-  "color-mint-700": "#006b48",
+  "color-mint-800": "#005237",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -4572,12 +4608,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
+  "color-orange-100": "#ffe0d6",
   "color-orange-400": "#ff6a3d",
-  "color-orange-50": "#fff7f5",
-  "color-orange-700": "#a82700",
+  "color-orange-800": "#8a2000",
+  "color-pink-100": "#ffe0f0",
   "color-pink-400": "#ff66b2",
-  "color-pink-50": "#fff5fa",
-  "color-pink-700": "#bb005d",
+  "color-pink-800": "#8f0047",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -4590,12 +4626,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-primary-950": "#00204d",
+  "color-purple-100": "#f2e5ff",
   "color-purple-400": "#bf80ff",
-  "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
+  "color-purple-800": "#5900b2",
+  "color-rose-100": "#ffe0e8",
   "color-rose-400": "#ff5c85",
-  "color-rose-50": "#fff5f8",
-  "color-rose-700": "#c20030",
+  "color-rose-800": "#940025",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -4605,34 +4642,36 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-shadow-side": "rgba(15, 20, 26, 0.12)",
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#8c8c94",
+  "color-success-100": "#d9ffd6",
   "color-success-1000": "#001401",
   "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
+  "color-success-800": "#005c26",
   "color-success-950": "#003311",
+  "color-teal-100": "#ccfffc",
   "color-teal-400": "#00d6c8",
-  "color-teal-50": "#ebfffe",
-  "color-teal-700": "#00665f",
+  "color-teal-800": "#00524c",
   "color-text-accent": "#006ce0",
-  "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#004a9e",
-  "color-text-accent-cyan": "#00627a",
-  "color-text-accent-fuchsia": "#a000b8",
-  "color-text-accent-green": "#00802f",
+  "color-text-accent-amber": "#7a2b00",
+  "color-text-accent-blue": "#003b8f",
+  "color-text-accent-cyan": "#004761",
+  "color-text-accent-fuchsia": "#78008a",
+  "color-text-accent-green": "#005c26",
   "color-text-accent-grey": "#1b232d",
-  "color-text-accent-indigo": "#006ce0",
-  "color-text-accent-lime": "#007000",
-  "color-text-accent-magenta": "#b2008f",
-  "color-text-accent-mint": "#006b48",
-  "color-text-accent-orange": "#a82700",
-  "color-text-accent-pink": "#bb005d",
-  "color-text-accent-purple": "#7300e5",
-  "color-text-accent-red": "#db0000",
-  "color-text-accent-rose": "#c20030",
-  "color-text-accent-teal": "#00665f",
-  "color-text-accent-violet": "#5724ff",
-  "color-text-accent-yellow": "#9e6900",
+  "color-text-accent-indigo": "#003b8f",
+  "color-text-accent-lime": "#005700",
+  "color-text-accent-magenta": "#8f0072",
+  "color-text-accent-mint": "#005237",
+  "color-text-accent-orange": "#8a2000",
+  "color-text-accent-pink": "#8f0047",
+  "color-text-accent-purple": "#5900b2",
+  "color-text-accent-red": "#990000",
+  "color-text-accent-rose": "#940025",
+  "color-text-accent-teal": "#00524c",
+  "color-text-accent-violet": "#4200db",
+  "color-text-accent-yellow": "#855900",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -4764,9 +4803,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-text-tutorial-hotspot-hover": "#002b66",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#8c8c94",
+  "color-violet-100": "#e8e5ff",
   "color-violet-400": "#978aff",
-  "color-violet-50": "#f6f5ff",
-  "color-violet-700": "#5724ff",
+  "color-violet-800": "#4200db",
+  "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -5108,28 +5148,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-item-selected": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
+  "color-amber-100": "#ffe8bd",
   "color-amber-400": "#ff9900",
-  "color-amber-50": "#fff7e6",
-  "color-amber-700": "#9e3700",
+  "color-amber-800": "#7a2b00",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "#fff7e6",
-  "color-background-accent-blue": "#f0fbff",
-  "color-background-accent-cyan": "#f0feff",
-  "color-background-accent-fuchsia": "#fff5fe",
-  "color-background-accent-green": "#effff1",
-  "color-background-accent-grey": "#f6f6f9",
-  "color-background-accent-indigo": "#f0fbff",
-  "color-background-accent-lime": "#f7ffeb",
-  "color-background-accent-magenta": "#fff5fe",
-  "color-background-accent-mint": "#ebfff6",
-  "color-background-accent-orange": "#fff7f5",
-  "color-background-accent-pink": "#fff5fa",
-  "color-background-accent-purple": "#faf5ff",
-  "color-background-accent-red": "#fff5f5",
-  "color-background-accent-rose": "#fff5f8",
-  "color-background-accent-teal": "#ebfffe",
-  "color-background-accent-violet": "#f6f5ff",
-  "color-background-accent-yellow": "#fffef0",
+  "color-background-accent-amber": "#ffe8bd",
+  "color-background-accent-blue": "#d1f1ff",
+  "color-background-accent-cyan": "#d1fbff",
+  "color-background-accent-fuchsia": "#fce5ff",
+  "color-background-accent-green": "#d9ffd6",
+  "color-background-accent-grey": "#ebebf0",
+  "color-background-accent-indigo": "#d1f1ff",
+  "color-background-accent-lime": "#ebffcc",
+  "color-background-accent-magenta": "#ffe0fb",
+  "color-background-accent-mint": "#ccffe9",
+  "color-background-accent-orange": "#ffe0d6",
+  "color-background-accent-pink": "#ffe0f0",
+  "color-background-accent-purple": "#f2e5ff",
+  "color-background-accent-red": "#ffe0e0",
+  "color-background-accent-rose": "#ffe0e8",
+  "color-background-accent-teal": "#ccfffc",
+  "color-background-accent-violet": "#e8e5ff",
+  "color-background-accent-yellow": "#fffbbd",
   "color-background-action-card-active": "#d1f1ff",
   "color-background-action-card-default": "#ffffff",
   "color-background-action-card-disabled": "#ffffff",
@@ -5505,9 +5545,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-100": "#d1fbff",
   "color-cyan-400": "#00d2e5",
-  "color-cyan-50": "#f0feff",
-  "color-cyan-700": "#00627a",
+  "color-cyan-800": "#004761",
   "color-drag-placeholder-active": "#ebebf0",
   "color-drag-placeholder-hover": "#d1f1ff",
   "color-dropzone-background-default": "#ffffff",
@@ -5516,18 +5556,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-dropzone-border-hover": "#002b66",
   "color-dropzone-text-default": "#424650",
   "color-dropzone-text-hover": "#424650",
+  "color-error-100": "#ffe0e0",
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
+  "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
   "color-foreground-control-default": "#ffffff",
   "color-foreground-control-disabled": "#ffffff",
   "color-foreground-control-read-only": "#656871",
+  "color-fuchsia-100": "#fce5ff",
   "color-fuchsia-400": "#ec70ff",
-  "color-fuchsia-50": "#fff5fe",
-  "color-fuchsia-700": "#a000b8",
+  "color-fuchsia-800": "#78008a",
   "color-gap-global-drawer": "#ebebf0",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -5541,23 +5583,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-icon-action-card-default": "#006ce0",
   "color-icon-action-card-disabled": "#b4b4bb",
   "color-icon-action-card-hover": "#002b66",
+  "color-info-100": "#d1f1ff",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
   "color-info-700": "#004a9e",
+  "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#006ce0",
+  "color-lime-100": "#ebffcc",
   "color-lime-400": "#7ae500",
-  "color-lime-50": "#f7ffeb",
-  "color-lime-700": "#007000",
+  "color-lime-800": "#005700",
+  "color-magenta-100": "#ffe0fb",
   "color-magenta-400": "#ff57e9",
-  "color-magenta-50": "#fff5fe",
-  "color-magenta-700": "#b2008f",
+  "color-magenta-800": "#8f0072",
+  "color-mint-100": "#ccffe9",
   "color-mint-400": "#00e582",
-  "color-mint-50": "#ebfff6",
-  "color-mint-700": "#006b48",
+  "color-mint-800": "#005237",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -5578,12 +5622,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
+  "color-orange-100": "#ffe0d6",
   "color-orange-400": "#ff6a3d",
-  "color-orange-50": "#fff7f5",
-  "color-orange-700": "#a82700",
+  "color-orange-800": "#8a2000",
+  "color-pink-100": "#ffe0f0",
   "color-pink-400": "#ff66b2",
-  "color-pink-50": "#fff5fa",
-  "color-pink-700": "#bb005d",
+  "color-pink-800": "#8f0047",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -5596,12 +5640,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-primary-950": "#00204d",
+  "color-purple-100": "#f2e5ff",
   "color-purple-400": "#bf80ff",
-  "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
+  "color-purple-800": "#5900b2",
+  "color-rose-100": "#ffe0e8",
   "color-rose-400": "#ff5c85",
-  "color-rose-50": "#fff5f8",
-  "color-rose-700": "#c20030",
+  "color-rose-800": "#940025",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -5611,34 +5656,36 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-shadow-side": "rgba(15, 20, 26, 0.12)",
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#8c8c94",
+  "color-success-100": "#d9ffd6",
   "color-success-1000": "#001401",
   "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
+  "color-success-800": "#005c26",
   "color-success-950": "#003311",
+  "color-teal-100": "#ccfffc",
   "color-teal-400": "#00d6c8",
-  "color-teal-50": "#ebfffe",
-  "color-teal-700": "#00665f",
+  "color-teal-800": "#00524c",
   "color-text-accent": "#006ce0",
-  "color-text-accent-amber": "#9e3700",
-  "color-text-accent-blue": "#004a9e",
-  "color-text-accent-cyan": "#00627a",
-  "color-text-accent-fuchsia": "#a000b8",
-  "color-text-accent-green": "#00802f",
+  "color-text-accent-amber": "#7a2b00",
+  "color-text-accent-blue": "#003b8f",
+  "color-text-accent-cyan": "#004761",
+  "color-text-accent-fuchsia": "#78008a",
+  "color-text-accent-green": "#005c26",
   "color-text-accent-grey": "#1b232d",
-  "color-text-accent-indigo": "#006ce0",
-  "color-text-accent-lime": "#007000",
-  "color-text-accent-magenta": "#b2008f",
-  "color-text-accent-mint": "#006b48",
-  "color-text-accent-orange": "#a82700",
-  "color-text-accent-pink": "#bb005d",
-  "color-text-accent-purple": "#7300e5",
-  "color-text-accent-red": "#db0000",
-  "color-text-accent-rose": "#c20030",
-  "color-text-accent-teal": "#00665f",
-  "color-text-accent-violet": "#5724ff",
-  "color-text-accent-yellow": "#9e6900",
+  "color-text-accent-indigo": "#003b8f",
+  "color-text-accent-lime": "#005700",
+  "color-text-accent-magenta": "#8f0072",
+  "color-text-accent-mint": "#005237",
+  "color-text-accent-orange": "#8a2000",
+  "color-text-accent-pink": "#8f0047",
+  "color-text-accent-purple": "#5900b2",
+  "color-text-accent-red": "#990000",
+  "color-text-accent-rose": "#940025",
+  "color-text-accent-teal": "#00524c",
+  "color-text-accent-violet": "#4200db",
+  "color-text-accent-yellow": "#855900",
   "color-text-action-card-disabled": "#8c8c94",
   "color-text-avatar": "#ffffff",
   "color-text-badge-blue": "#f9f9fa",
@@ -5770,9 +5817,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-tutorial-hotspot-hover": "#002b66",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#8c8c94",
+  "color-violet-100": "#e8e5ff",
   "color-violet-400": "#978aff",
-  "color-violet-50": "#f6f5ff",
-  "color-violet-700": "#5724ff",
+  "color-violet-800": "#4200db",
+  "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -6114,28 +6162,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-item-selected": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
+  "color-amber-100": "#ffe8bd",
   "color-amber-400": "#ff9900",
-  "color-amber-50": "#fff7e6",
-  "color-amber-700": "#9e3700",
+  "color-amber-800": "#7a2b00",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(122, 43, 0, 0.4)",
-  "color-background-accent-blue": "rgba(0, 59, 143, 0.4)",
-  "color-background-accent-cyan": "rgba(0, 71, 97, 0.4)",
-  "color-background-accent-fuchsia": "rgba(120, 0, 138, 0.4)",
-  "color-background-accent-green": "rgba(0, 92, 38, 0.4)",
-  "color-background-accent-grey": "#232b37",
-  "color-background-accent-indigo": "rgba(0, 59, 143, 0.4)",
-  "color-background-accent-lime": "rgba(0, 87, 0, 0.4)",
-  "color-background-accent-magenta": "rgba(143, 0, 114, 0.4)",
-  "color-background-accent-mint": "rgba(0, 82, 55, 0.4)",
-  "color-background-accent-orange": "rgba(138, 32, 0, 0.4)",
-  "color-background-accent-pink": "rgba(143, 0, 71, 0.4)",
-  "color-background-accent-purple": "rgba(89, 0, 178, 0.4)",
-  "color-background-accent-red": "rgba(153, 0, 0, 0.4)",
-  "color-background-accent-rose": "rgba(148, 0, 37, 0.4)",
-  "color-background-accent-teal": "rgba(0, 82, 76, 0.4)",
-  "color-background-accent-violet": "rgba(66, 0, 219, 0.4)",
-  "color-background-accent-yellow": "rgba(158, 105, 0, 0.4)",
+  "color-background-accent-amber": "rgba(250, 111, 0, 0.2)",
+  "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-cyan": "rgba(0, 164, 189, 0.2)",
+  "color-background-accent-fuchsia": "rgba(228, 51, 255, 0.2)",
+  "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
+  "color-background-accent-grey": "#333843",
+  "color-background-accent-indigo": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
+  "color-background-accent-magenta": "rgba(255, 26, 224, 0.2)",
+  "color-background-accent-mint": "rgba(0, 189, 107, 0.2)",
+  "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
+  "color-background-accent-pink": "rgba(255, 51, 153, 0.2)",
+  "color-background-accent-purple": "rgba(173, 92, 255, 0.2)",
+  "color-background-accent-red": "rgba(255, 61, 61, 0.2)",
+  "color-background-accent-rose": "rgba(255, 56, 106, 0.2)",
+  "color-background-accent-teal": "rgba(0, 173, 162, 0.2)",
+  "color-background-accent-violet": "rgba(133, 117, 255, 0.2)",
+  "color-background-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-background-action-card-active": "#333843",
   "color-background-action-card-default": "#161d26",
   "color-background-action-card-disabled": "#161d26",
@@ -6511,9 +6559,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-charts-yellow-700": "#6f5504",
   "color-charts-yellow-800": "#654d03",
   "color-charts-yellow-900": "#5d4503",
+  "color-cyan-100": "#d1fbff",
   "color-cyan-400": "#00d2e5",
-  "color-cyan-50": "#f0feff",
-  "color-cyan-700": "#00627a",
+  "color-cyan-800": "#004761",
   "color-drag-placeholder-active": "#656871",
   "color-drag-placeholder-hover": "#006ce0",
   "color-dropzone-background-default": "#161d26",
@@ -6522,18 +6570,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-dropzone-border-hover": "#75cfff",
   "color-dropzone-text-default": "#c6c6cd",
   "color-dropzone-text-hover": "#c6c6cd",
+  "color-error-100": "#ffe0e0",
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
+  "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
   "color-foreground-control-default": "#0f141a",
   "color-foreground-control-disabled": "#161d26",
   "color-foreground-control-read-only": "#a4a4ad",
+  "color-fuchsia-100": "#fce5ff",
   "color-fuchsia-400": "#ec70ff",
-  "color-fuchsia-50": "#fff5fe",
-  "color-fuchsia-700": "#a000b8",
+  "color-fuchsia-800": "#78008a",
   "color-gap-global-drawer": "#0f141a",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -6547,23 +6597,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-icon-action-card-default": "#42b4ff",
   "color-icon-action-card-disabled": "#656871",
   "color-icon-action-card-hover": "#75cfff",
+  "color-info-100": "#d1f1ff",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
   "color-info-700": "#004a9e",
+  "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#42b4ff",
+  "color-lime-100": "#ebffcc",
   "color-lime-400": "#7ae500",
-  "color-lime-50": "#f7ffeb",
-  "color-lime-700": "#007000",
+  "color-lime-800": "#005700",
+  "color-magenta-100": "#ffe0fb",
   "color-magenta-400": "#ff57e9",
-  "color-magenta-50": "#fff5fe",
-  "color-magenta-700": "#b2008f",
+  "color-magenta-800": "#8f0072",
+  "color-mint-100": "#ccffe9",
   "color-mint-400": "#00e582",
-  "color-mint-50": "#ebfff6",
-  "color-mint-700": "#006b48",
+  "color-mint-800": "#005237",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -6584,12 +6636,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
+  "color-orange-100": "#ffe0d6",
   "color-orange-400": "#ff6a3d",
-  "color-orange-50": "#fff7f5",
-  "color-orange-700": "#a82700",
+  "color-orange-800": "#8a2000",
+  "color-pink-100": "#ffe0f0",
   "color-pink-400": "#ff66b2",
-  "color-pink-50": "#fff5fa",
-  "color-pink-700": "#bb005d",
+  "color-pink-800": "#8f0047",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -6602,12 +6654,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-primary-950": "#00204d",
+  "color-purple-100": "#f2e5ff",
   "color-purple-400": "#bf80ff",
-  "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
+  "color-purple-800": "#5900b2",
+  "color-rose-100": "#ffe0e8",
   "color-rose-400": "#ff5c85",
-  "color-rose-50": "#fff5f8",
-  "color-rose-700": "#c20030",
+  "color-rose-800": "#940025",
   "color-severity-dark-red": "#870303",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -6617,23 +6670,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-shadow-side": "rgba(15, 20, 26, 1)",
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#8c8c94",
+  "color-success-100": "#d9ffd6",
   "color-success-1000": "#001401",
   "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
+  "color-success-800": "#005c26",
   "color-success-950": "#003311",
+  "color-teal-100": "#ccfffc",
   "color-teal-400": "#00d6c8",
-  "color-teal-50": "#ebfffe",
-  "color-teal-700": "#00665f",
+  "color-teal-800": "#00524c",
   "color-text-accent": "#42b4ff",
   "color-text-accent-amber": "#ff9900",
   "color-text-accent-blue": "#42b4ff",
   "color-text-accent-cyan": "#00d2e5",
   "color-text-accent-fuchsia": "#ec70ff",
   "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#f3f3f7",
-  "color-text-accent-indigo": "#75cfff",
+  "color-text-accent-grey": "#dedee3",
+  "color-text-accent-indigo": "#42b4ff",
   "color-text-accent-lime": "#7ae500",
   "color-text-accent-magenta": "#ff57e9",
   "color-text-accent-mint": "#00e582",
@@ -6776,9 +6831,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-tutorial-hotspot-hover": "#75cfff",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#dedee3",
+  "color-violet-100": "#e8e5ff",
   "color-violet-400": "#978aff",
-  "color-violet-50": "#f6f5ff",
-  "color-violet-700": "#5724ff",
+  "color-violet-800": "#4200db",
+  "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
@@ -7120,28 +7176,28 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-item-selected": "2px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
+  "color-amber-100": "#ffe8bd",
   "color-amber-400": "#ff9900",
-  "color-amber-50": "#fff7e6",
-  "color-amber-700": "#9e3700",
+  "color-amber-800": "#7a2b00",
   "color-aws-squid-ink": "#232f3e",
-  "color-background-accent-amber": "rgba(122, 43, 0, 0.4)",
-  "color-background-accent-blue": "rgba(0, 59, 143, 0.4)",
-  "color-background-accent-cyan": "rgba(0, 71, 97, 0.4)",
-  "color-background-accent-fuchsia": "rgba(120, 0, 138, 0.4)",
-  "color-background-accent-green": "rgba(0, 92, 38, 0.4)",
-  "color-background-accent-grey": "#232b37",
-  "color-background-accent-indigo": "rgba(0, 59, 143, 0.4)",
-  "color-background-accent-lime": "rgba(0, 87, 0, 0.4)",
-  "color-background-accent-magenta": "rgba(143, 0, 114, 0.4)",
-  "color-background-accent-mint": "rgba(0, 82, 55, 0.4)",
-  "color-background-accent-orange": "rgba(138, 32, 0, 0.4)",
-  "color-background-accent-pink": "rgba(143, 0, 71, 0.4)",
-  "color-background-accent-purple": "rgba(89, 0, 178, 0.4)",
-  "color-background-accent-red": "rgba(153, 0, 0, 0.4)",
-  "color-background-accent-rose": "rgba(148, 0, 37, 0.4)",
-  "color-background-accent-teal": "rgba(0, 82, 76, 0.4)",
-  "color-background-accent-violet": "rgba(66, 0, 219, 0.4)",
-  "color-background-accent-yellow": "rgba(158, 105, 0, 0.4)",
+  "color-background-accent-amber": "rgba(250, 111, 0, 0.2)",
+  "color-background-accent-blue": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-cyan": "rgba(0, 164, 189, 0.2)",
+  "color-background-accent-fuchsia": "rgba(228, 51, 255, 0.2)",
+  "color-background-accent-green": "rgba(43, 181, 52, 0.2)",
+  "color-background-accent-grey": "#333843",
+  "color-background-accent-indigo": "rgba(0, 153, 255, 0.2)",
+  "color-background-accent-lime": "rgba(49, 184, 0, 0.2)",
+  "color-background-accent-magenta": "rgba(255, 26, 224, 0.2)",
+  "color-background-accent-mint": "rgba(0, 189, 107, 0.2)",
+  "color-background-accent-orange": "rgba(255, 75, 20, 0.2)",
+  "color-background-accent-pink": "rgba(255, 51, 153, 0.2)",
+  "color-background-accent-purple": "rgba(173, 92, 255, 0.2)",
+  "color-background-accent-red": "rgba(255, 61, 61, 0.2)",
+  "color-background-accent-rose": "rgba(255, 56, 106, 0.2)",
+  "color-background-accent-teal": "rgba(0, 173, 162, 0.2)",
+  "color-background-accent-violet": "rgba(133, 117, 255, 0.2)",
+  "color-background-accent-yellow": "rgba(251, 211, 50, 0.2)",
   "color-background-action-card-active": "#333843",
   "color-background-action-card-default": "#161d26",
   "color-background-action-card-disabled": "#161d26",
@@ -7517,9 +7573,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-charts-yellow-700": "#dfb52c",
   "color-charts-yellow-800": "#eac33a",
   "color-charts-yellow-900": "#f1cf65",
+  "color-cyan-100": "#d1fbff",
   "color-cyan-400": "#00d2e5",
-  "color-cyan-50": "#f0feff",
-  "color-cyan-700": "#00627a",
+  "color-cyan-800": "#004761",
   "color-drag-placeholder-active": "#656871",
   "color-drag-placeholder-hover": "#006ce0",
   "color-dropzone-background-default": "#161d26",
@@ -7528,18 +7584,20 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-dropzone-border-hover": "#75cfff",
   "color-dropzone-text-default": "#c6c6cd",
   "color-dropzone-text-hover": "#c6c6cd",
+  "color-error-100": "#ffe0e0",
   "color-error-1000": "#1f0000",
   "color-error-400": "#ff7a7a",
   "color-error-50": "#fff5f5",
   "color-error-600": "#db0000",
+  "color-error-800": "#990000",
   "color-error-900": "#700000",
   "color-error-950": "#520000",
   "color-foreground-control-default": "#0f141a",
   "color-foreground-control-disabled": "#161d26",
   "color-foreground-control-read-only": "#a4a4ad",
+  "color-fuchsia-100": "#fce5ff",
   "color-fuchsia-400": "#ec70ff",
-  "color-fuchsia-50": "#fff5fe",
-  "color-fuchsia-700": "#a000b8",
+  "color-fuchsia-800": "#78008a",
   "color-gap-global-drawer": "#0f141a",
   "color-grey-opaque-10": "rgba(0, 0, 0, 0.1)",
   "color-grey-opaque-25": "rgba(255, 255, 255, 0.25)",
@@ -7553,23 +7611,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-icon-action-card-default": "#42b4ff",
   "color-icon-action-card-disabled": "#656871",
   "color-icon-action-card-hover": "#75cfff",
+  "color-info-100": "#d1f1ff",
   "color-info-1000": "#001129",
   "color-info-300": "#75cfff",
   "color-info-400": "#42b4ff",
   "color-info-50": "#f0fbff",
   "color-info-600": "#006ce0",
   "color-info-700": "#004a9e",
+  "color-info-800": "#003b8f",
   "color-info-950": "#00204d",
   "color-item-selected": "#42b4ff",
+  "color-lime-100": "#ebffcc",
   "color-lime-400": "#7ae500",
-  "color-lime-50": "#f7ffeb",
-  "color-lime-700": "#007000",
+  "color-lime-800": "#005700",
+  "color-magenta-100": "#ffe0fb",
   "color-magenta-400": "#ff57e9",
-  "color-magenta-50": "#fff5fe",
-  "color-magenta-700": "#b2008f",
+  "color-magenta-800": "#8f0072",
+  "color-mint-100": "#ccffe9",
   "color-mint-400": "#00e582",
-  "color-mint-50": "#ebfff6",
-  "color-mint-700": "#006b48",
+  "color-mint-800": "#005237",
   "color-neutral-100": "#f9f9fa",
   "color-neutral-1000": "#06080a",
   "color-neutral-150": "#f6f6f9",
@@ -7590,12 +7650,12 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-neutral-850": "#161d26",
   "color-neutral-900": "#131920",
   "color-neutral-950": "#0f141a",
+  "color-orange-100": "#ffe0d6",
   "color-orange-400": "#ff6a3d",
-  "color-orange-50": "#fff7f5",
-  "color-orange-700": "#a82700",
+  "color-orange-800": "#8a2000",
+  "color-pink-100": "#ffe0f0",
   "color-pink-400": "#ff66b2",
-  "color-pink-50": "#fff5fa",
-  "color-pink-700": "#bb005d",
+  "color-pink-800": "#8f0047",
   "color-primary-100": "#d1f1ff",
   "color-primary-1000": "#001129",
   "color-primary-200": "#b8e7ff",
@@ -7608,12 +7668,13 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-primary-800": "#003b8f",
   "color-primary-900": "#002b66",
   "color-primary-950": "#00204d",
+  "color-purple-100": "#f2e5ff",
   "color-purple-400": "#bf80ff",
-  "color-purple-50": "#faf5ff",
   "color-purple-700": "#7300e5",
+  "color-purple-800": "#5900b2",
+  "color-rose-100": "#ffe0e8",
   "color-rose-400": "#ff5c85",
-  "color-rose-50": "#fff5f8",
-  "color-rose-700": "#c20030",
+  "color-rose-800": "#940025",
   "color-severity-dark-red": "#d63f38",
   "color-severity-grey": "#656871",
   "color-severity-orange": "#f89256",
@@ -7623,23 +7684,25 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-shadow-side": "rgba(15, 20, 26, 1)",
   "color-shadow-toggle-handle": "rgba(0, 0, 0, 0.25)",
   "color-stroke-chart-line": "#8c8c94",
+  "color-success-100": "#d9ffd6",
   "color-success-1000": "#001401",
   "color-success-400": "#00e500",
   "color-success-50": "#effff1",
   "color-success-500": "#2bb534",
   "color-success-600": "#00802f",
+  "color-success-800": "#005c26",
   "color-success-950": "#003311",
+  "color-teal-100": "#ccfffc",
   "color-teal-400": "#00d6c8",
-  "color-teal-50": "#ebfffe",
-  "color-teal-700": "#00665f",
+  "color-teal-800": "#00524c",
   "color-text-accent": "#42b4ff",
   "color-text-accent-amber": "#ff9900",
   "color-text-accent-blue": "#42b4ff",
   "color-text-accent-cyan": "#00d2e5",
   "color-text-accent-fuchsia": "#ec70ff",
   "color-text-accent-green": "#00e500",
-  "color-text-accent-grey": "#f3f3f7",
-  "color-text-accent-indigo": "#75cfff",
+  "color-text-accent-grey": "#dedee3",
+  "color-text-accent-indigo": "#42b4ff",
   "color-text-accent-lime": "#7ae500",
   "color-text-accent-magenta": "#ff57e9",
   "color-text-accent-mint": "#00e582",
@@ -7782,9 +7845,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-tutorial-hotspot-hover": "#75cfff",
   "color-transparent": "transparent",
   "color-tree-view-connector-line": "#dedee3",
+  "color-violet-100": "#e8e5ff",
   "color-violet-400": "#978aff",
-  "color-violet-50": "#f6f5ff",
-  "color-violet-700": "#5724ff",
+  "color-violet-800": "#4200db",
+  "color-warning-100": "#fffbbd",
   "color-warning-1000": "#191100",
   "color-warning-400": "#ffe347",
   "color-warning-50": "#fffef0",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index bf15e2b671..dc0ae04f50 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -5109,9 +5109,6 @@ Composes with existing Box props such as \`padding\` and \`margin\`.",
       },
       "name": "visualAccent",
       "optional": true,
-      "systemTags": [
-        "one-theme",
-      ],
       "type": "BoxProps.VisualAccent",
     },
   ],