@cloudscape-design/components-themeable 3.0.596 → 3.0.598

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "6e53e52d0a9869aebc15da3ae421268e021ef8c4"
+  "commit": "db8df67a8fb08edbfc28306518bc51827c0bef64"
 }

package/lib/internal/scss/box/layout.scss

@@ -24,11 +24,9 @@
   }
 }
 
-/* stylelint-disable csstools/use-logical */
 .f-left {
-  float: left;
+  float: inline-start;
 }
 .f-right {
-  float: right;
+  float: inline-end;
 }
-/* stylelint-enable csstools/use-logical */

package/lib/internal/scss/box/spacing.scss

@@ -35,10 +35,10 @@ $size-prefixes-vertical: (
 );
 
 $side-suffixes: (
-  'top': '-top',
-  'right': '-right',
-  'bottom': '-bottom',
-  'left': '-left',
+  'top': '-block-start',
+  'right': '-inline-end',
+  'bottom': '-block-end',
+  'left': '-inline-start',
 );
 
 $sides: (('top', 'vertical'), ('right', 'horizontal'), ('bottom', 'vertical'), ('left', 'horizontal'));
@@ -48,7 +48,8 @@ $prefixes: 'n', 'xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl';
 @mixin create-spacing($name, $css_property, $parent-selector) {
   @each $p in $prefixes {
     #{$parent-selector}.#{$name}#{$p} {
-      #{$css_property}: #{map.get($size-prefixes-vertical, $p)} #{map.get($size-prefixes-horizontal, $p)};
+      #{$css_property}-block: #{map.get($size-prefixes-vertical, $p)};
+      #{$css_property}-inline: #{map.get($size-prefixes-horizontal, $p)};
     }
     // creates sides and horizontal(h)/vertical(v) padding classes
     @each $side_a, $side_b in $sides {

package/lib/internal/scss/column-layout/styles.scss

@@ -54,7 +54,7 @@ $column-breakpoint-spans: (
 
 @mixin remove-useless-vertical-borders($col-size, $direction) {
   $items-per-row: math.div($grid-columns, $col-size);
-  $items-modifier: if($direction == 'left', '+1', '');
+  $items-modifier: if($direction == 'inline-start', '+1', '');
   > *:nth-child(#{$items-per-row}n#{$items-modifier}) {
     border-#{$direction}-width: 0;
   }
@@ -112,7 +112,7 @@ div.column-layout {
     }
 
     &.grid-variant-text-grid {
-      @include make-vertical-borders('left');
+      @include make-vertical-borders('inline-start');
       margin-block: calc(-1 * #{$grid-gutter-width} / 2);
       margin-inline: calc(-1 * #{$grid-gutter-width});
     }
@@ -131,7 +131,7 @@ div.column-layout {
     }
 
     &.grid-vertical-borders {
-      @include make-vertical-borders('right');
+      @include make-vertical-borders('inline-end');
     }
     &.grid-horizontal-borders {
       @include make-horizontal-borders;

package/lib/internal/scss/expandable-section/styles.scss

@@ -36,6 +36,14 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   &.expanded {
     transform: rotate(0deg);
   }
+
+  @include styles.with-direction('rtl') {
+    transform: rotate(90deg);
+
+    &.expanded {
+      transform: rotate(0deg);
+    }
+  }
 }
 
 .icon-container {

package/lib/internal/scss/link/styles.scss

@@ -54,6 +54,11 @@
       @include styles.link-font-size-style(map.get(constants.$link-font-sizes, $font-size));
     }
   }
+
+  @include styles.with-direction('rtl') {
+    align-items: center;
+    display: inline-flex;
+  }
 }
 
 .icon-wrapper {

package/lib/internal/scss/select/parts/styles.scss

@@ -77,6 +77,10 @@ $checkbox-size: awsui.$size-control;
   // Fade out any overflow tokens
   mask-image: linear-gradient(270deg, transparent, white 20px, white);
 
+  @include styles.with-direction('rtl') {
+    mask-image: linear-gradient(-270deg, transparent, white 20px, white);
+  }
+
   > .inline-token {
     display: flex;
     align-items: center;

package/lib/internal/scss/toggle/styles.scss

@@ -59,6 +59,10 @@ $shadow-color: rgba(0, 0, 0, 0.25);
 
   &-checked {
     transform: translateX(0.8 * styles.$base-size);
+
+    @include styles.with-direction('rtl') {
+      transform: translateX(-0.8 * styles.$base-size);
+    }
   }
 
   &-disabled {

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

@@ -42,7 +42,7 @@ const Anchor = ({ anchor, onFollow, isActive, index }) => {
     const activeItemClasses = clsx(styles['anchor-item--active'], testUtilsStyles['anchor-item--active']);
     return (React.createElement("li", { "data-itemid": `anchor-item-${index + 1}`, className: clsx(styles['anchor-item'], isActive && activeItemClasses) },
         React.createElement("a", Object.assign({ onClick: onClick, className: clsx(styles['anchor-link'], testUtilsStyles['anchor-link'], isActive && styles['anchor-link--active']) }, (isActive ? { 'aria-current': true } : {}), { href: anchor.href }),
-            React.createElement("span", { className: clsx(styles['anchor-link-text'], testUtilsStyles['anchor-link-text']), style: { paddingLeft: `${anchor.level * 16 + 2}px` } }, anchor.text),
+            React.createElement("span", { className: clsx(styles['anchor-link-text'], testUtilsStyles['anchor-link-text']), style: { paddingInlineStart: `${anchor.level * 16 + 2}px` } }, anchor.text),
             anchor.info && (React.createElement("span", { className: clsx(styles['anchor-link-info'], testUtilsStyles['anchor-link-info']) }, anchor.info)))));
 };
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/anchor-navigation/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/anchor-navigation/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEzG,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EASI;QATJ,EAC/C,OAAO,EACP,cAAc,EACd,QAAQ,EACR,kBAAkB,EAClB,UAAU,GAAG,EAAE,EACf,iBAAiB,GAAG,IAAI,EACxB,eAAe,GAAG,CAAC,OAEgC,EADhD,KAAK,cARuC,qHAShD,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3E,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAoC,EAAE,WAAyC,EAAE,EAAE;QAClF,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;IACrD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,iBAAiB,GAAG,YAAY,CAAC;QACrC,KAAK;QACL,eAAe;QACf,UAAU;KACX,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,EAAE;YACrB,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;YAClF,sBAAsB,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC;SAC7D;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErD,OAAO,CACL,6CACM,SAAS,IACb,GAAG,EAAE,iBAAiB,qBACL,cAAc,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC;QAEvE,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC,IACvE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC7B,OAAO,CACL,oBAAC,MAAM,IACL,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,MAAM,CAAC,IAAI,KAAK,iBAAiB,EAC3C,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACH,CAAC;QACJ,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC;AASD,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAe,EAAE,EAAE;IACpE,YAAY,CAAC,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAuB,EAAE,EAAE;QAC1B,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;SACzB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,MAAM,CAAC,CACnB,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAEtG,OAAO,CACL,2CAAiB,eAAe,KAAK,GAAG,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,QAAQ,IAAI,iBAAiB,CAAC;QAChH,yCACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,CAAC,EACrB,eAAe,CAAC,aAAa,CAAC,EAC9B,QAAQ,IAAI,MAAM,CAAC,qBAAqB,CAAC,CAC1C,IACG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC9C,IAAI,EAAE,MAAM,CAAC,IAAI;YAEjB,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC,EAChF,KAAK,EAAE,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE,IAEnD,MAAM,CAAC,IAAI,CACP;YACN,MAAM,CAAC,IAAI,IAAI,CACd,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC,IAAG,MAAM,CAAC,IAAI,CAAQ,CAC7G,CACC,CACD,CACN,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\nimport { AnchorNavigationProps } from './interfaces';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport useScrollSpy from './use-scroll-spy.js';\nimport { fireCancelableEvent, fireNonCancelableEvent, isPlainLeftClick } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { getBaseProps } from '../internal/base-component/index.js';\n\nexport default function InternalAnchorNavigation({\n  anchors,\n  ariaLabelledby,\n  onFollow,\n  onActiveHrefChange,\n  activeHref = '',\n  __internalRootRef = null,\n  scrollSpyOffset = 0,\n  ...props\n}: AnchorNavigationProps & InternalBaseComponentProps) {\n  const baseProps = getBaseProps(props);\n\n  const hrefs = useMemo(() => anchors.map(anchor => anchor.href), [anchors]);\n\n  const onFollowHandler = useCallback(\n    (anchor: AnchorNavigationProps.Anchor, sourceEvent: React.SyntheticEvent | Event) => {\n      fireCancelableEvent(onFollow, anchor, sourceEvent);\n    },\n    [onFollow]\n  );\n\n  const currentActiveHref = useScrollSpy({\n    hrefs,\n    scrollSpyOffset,\n    activeHref,\n  });\n\n  useEffect(() => {\n    if (currentActiveHref) {\n      const newActiveAnchor = anchors.find(anchor => anchor.href === currentActiveHref);\n      fireNonCancelableEvent(onActiveHrefChange, newActiveAnchor);\n    }\n  }, [onActiveHrefChange, anchors, currentActiveHref]);\n\n  return (\n    <nav\n      {...baseProps}\n      ref={__internalRootRef}\n      aria-labelledby={ariaLabelledby}\n      className={clsx(baseProps.className, styles.root, testUtilsStyles.root)}\n    >\n      <ol className={clsx(styles['anchor-list'], testUtilsStyles['anchor-list'])}>\n        {anchors.map((anchor, index) => {\n          return (\n            <Anchor\n              onFollow={onFollowHandler}\n              isActive={anchor.href === currentActiveHref}\n              key={index}\n              index={index}\n              anchor={anchor}\n            />\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n\ninterface AnchorProps {\n  anchor: AnchorNavigationProps.Anchor;\n  onFollow: (anchor: AnchorNavigationProps.Anchor, event: React.SyntheticEvent | Event) => void;\n  isActive: boolean;\n  index: number;\n}\n\nconst Anchor = ({ anchor, onFollow, isActive, index }: AnchorProps) => {\n  checkSafeUrl('SideNavigation', anchor.href);\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (isPlainLeftClick(event)) {\n        onFollow(anchor, event);\n      }\n    },\n    [onFollow, anchor]\n  );\n\n  const activeItemClasses = clsx(styles['anchor-item--active'], testUtilsStyles['anchor-item--active']);\n\n  return (\n    <li data-itemid={`anchor-item-${index + 1}`} className={clsx(styles['anchor-item'], isActive && activeItemClasses)}>\n      <a\n        onClick={onClick}\n        className={clsx(\n          styles['anchor-link'],\n          testUtilsStyles['anchor-link'],\n          isActive && styles['anchor-link--active']\n        )}\n        {...(isActive ? { 'aria-current': true } : {})}\n        href={anchor.href}\n      >\n        <span\n          className={clsx(styles['anchor-link-text'], testUtilsStyles['anchor-link-text'])}\n          style={{ paddingLeft: `${anchor.level * 16 + 2}px` }}\n        >\n          {anchor.text}\n        </span>\n        {anchor.info && (\n          <span className={clsx(styles['anchor-link-info'], testUtilsStyles['anchor-link-info'])}>{anchor.info}</span>\n        )}\n      </a>\n    </li>\n  );\n};\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/anchor-navigation/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\nimport { AnchorNavigationProps } from './interfaces';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport useScrollSpy from './use-scroll-spy.js';\nimport { fireCancelableEvent, fireNonCancelableEvent, isPlainLeftClick } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { getBaseProps } from '../internal/base-component/index.js';\n\nexport default function InternalAnchorNavigation({\n  anchors,\n  ariaLabelledby,\n  onFollow,\n  onActiveHrefChange,\n  activeHref = '',\n  __internalRootRef = null,\n  scrollSpyOffset = 0,\n  ...props\n}: AnchorNavigationProps & InternalBaseComponentProps) {\n  const baseProps = getBaseProps(props);\n\n  const hrefs = useMemo(() => anchors.map(anchor => anchor.href), [anchors]);\n\n  const onFollowHandler = useCallback(\n    (anchor: AnchorNavigationProps.Anchor, sourceEvent: React.SyntheticEvent | Event) => {\n      fireCancelableEvent(onFollow, anchor, sourceEvent);\n    },\n    [onFollow]\n  );\n\n  const currentActiveHref = useScrollSpy({\n    hrefs,\n    scrollSpyOffset,\n    activeHref,\n  });\n\n  useEffect(() => {\n    if (currentActiveHref) {\n      const newActiveAnchor = anchors.find(anchor => anchor.href === currentActiveHref);\n      fireNonCancelableEvent(onActiveHrefChange, newActiveAnchor);\n    }\n  }, [onActiveHrefChange, anchors, currentActiveHref]);\n\n  return (\n    <nav\n      {...baseProps}\n      ref={__internalRootRef}\n      aria-labelledby={ariaLabelledby}\n      className={clsx(baseProps.className, styles.root, testUtilsStyles.root)}\n    >\n      <ol className={clsx(styles['anchor-list'], testUtilsStyles['anchor-list'])}>\n        {anchors.map((anchor, index) => {\n          return (\n            <Anchor\n              onFollow={onFollowHandler}\n              isActive={anchor.href === currentActiveHref}\n              key={index}\n              index={index}\n              anchor={anchor}\n            />\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n\ninterface AnchorProps {\n  anchor: AnchorNavigationProps.Anchor;\n  onFollow: (anchor: AnchorNavigationProps.Anchor, event: React.SyntheticEvent | Event) => void;\n  isActive: boolean;\n  index: number;\n}\n\nconst Anchor = ({ anchor, onFollow, isActive, index }: AnchorProps) => {\n  checkSafeUrl('SideNavigation', anchor.href);\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (isPlainLeftClick(event)) {\n        onFollow(anchor, event);\n      }\n    },\n    [onFollow, anchor]\n  );\n\n  const activeItemClasses = clsx(styles['anchor-item--active'], testUtilsStyles['anchor-item--active']);\n\n  return (\n    <li data-itemid={`anchor-item-${index + 1}`} className={clsx(styles['anchor-item'], isActive && activeItemClasses)}>\n      <a\n        onClick={onClick}\n        className={clsx(\n          styles['anchor-link'],\n          testUtilsStyles['anchor-link'],\n          isActive && styles['anchor-link--active']\n        )}\n        {...(isActive ? { 'aria-current': true } : {})}\n        href={anchor.href}\n      >\n        <span\n          className={clsx(styles['anchor-link-text'], testUtilsStyles['anchor-link-text'])}\n          style={{ paddingInlineStart: `${anchor.level * 16 + 2}px` }}\n        >\n          {anchor.text}\n        </span>\n        {anchor.info && (\n          <span className={clsx(styles['anchor-link-info'], testUtilsStyles['anchor-link-info'])}>{anchor.info}</span>\n        )}\n      </a>\n    </li>\n  );\n};\n"]}

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

@@ -1,195 +1,195 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_18wu0_1880m_99",
-  "box": "awsui_box_18wu0_1880m_219",
-  "p-variant": "awsui_p-variant_18wu0_1880m_219",
-  "color-default": "awsui_color-default_18wu0_1880m_219",
-  "b-variant": "awsui_b-variant_18wu0_1880m_219",
-  "strong-variant": "awsui_strong-variant_18wu0_1880m_219",
-  "code-variant": "awsui_code-variant_18wu0_1880m_219",
-  "pre-variant": "awsui_pre-variant_18wu0_1880m_219",
-  "samp-variant": "awsui_samp-variant_18wu0_1880m_219",
-  "h1-variant": "awsui_h1-variant_18wu0_1880m_223",
-  "h2-variant": "awsui_h2-variant_18wu0_1880m_223",
-  "h3-variant": "awsui_h3-variant_18wu0_1880m_223",
-  "h4-variant": "awsui_h4-variant_18wu0_1880m_223",
-  "h5-variant": "awsui_h5-variant_18wu0_1880m_223",
-  "small-variant": "awsui_small-variant_18wu0_1880m_227",
-  "a-variant": "awsui_a-variant_18wu0_1880m_231",
-  "font-size-default": "awsui_font-size-default_18wu0_1880m_235",
-  "font-weight-default": "awsui_font-weight-default_18wu0_1880m_275",
-  "key-label-variant": "awsui_key-label-variant_18wu0_1880m_317",
-  "value-large-variant": "awsui_value-large-variant_18wu0_1880m_324",
-  "font-weight-heavy": "awsui_font-weight-heavy_18wu0_1880m_331",
-  "color-inverted": "awsui_color-inverted_18wu0_1880m_336",
-  "color-text-label": "awsui_color-text-label_18wu0_1880m_339",
-  "color-text-body-secondary": "awsui_color-text-body-secondary_18wu0_1880m_342",
-  "color-text-status-error": "awsui_color-text-status-error_18wu0_1880m_345",
-  "color-text-status-success": "awsui_color-text-status-success_18wu0_1880m_348",
-  "color-text-status-info": "awsui_color-text-status-info_18wu0_1880m_351",
-  "color-text-status-inactive": "awsui_color-text-status-inactive_18wu0_1880m_354",
-  "color-text-status-warning": "awsui_color-text-status-warning_18wu0_1880m_357",
-  "color-inherit": "awsui_color-inherit_18wu0_1880m_360",
-  "font-size-body-s": "awsui_font-size-body-s_18wu0_1880m_363",
-  "font-size-body-m": "awsui_font-size-body-m_18wu0_1880m_368",
-  "font-size-heading-xs": "awsui_font-size-heading-xs_18wu0_1880m_372",
-  "font-size-heading-s": "awsui_font-size-heading-s_18wu0_1880m_376",
-  "font-size-heading-m": "awsui_font-size-heading-m_18wu0_1880m_381",
-  "font-size-heading-l": "awsui_font-size-heading-l_18wu0_1880m_386",
-  "font-size-heading-xl": "awsui_font-size-heading-xl_18wu0_1880m_391",
-  "font-size-display-l": "awsui_font-size-display-l_18wu0_1880m_396",
-  "font-weight-light": "awsui_font-weight-light_18wu0_1880m_401",
-  "font-weight-normal": "awsui_font-weight-normal_18wu0_1880m_404",
-  "font-weight-bold": "awsui_font-weight-bold_18wu0_1880m_407",
-  "t-left": "awsui_t-left_18wu0_1880m_414",
-  "t-right": "awsui_t-right_18wu0_1880m_418",
-  "t-center": "awsui_t-center_18wu0_1880m_422",
-  "p-n": "awsui_p-n_18wu0_1880m_529",
-  "p-top-n": "awsui_p-top-n_18wu0_1880m_533",
-  "p-vertical-n": "awsui_p-vertical-n_18wu0_1880m_534",
-  "p-right-n": "awsui_p-right-n_18wu0_1880m_538",
-  "p-horizontal-n": "awsui_p-horizontal-n_18wu0_1880m_539",
-  "p-bottom-n": "awsui_p-bottom-n_18wu0_1880m_543",
-  "p-left-n": "awsui_p-left-n_18wu0_1880m_548",
-  "p-xxxs": "awsui_p-xxxs_18wu0_1880m_553",
-  "p-top-xxxs": "awsui_p-top-xxxs_18wu0_1880m_557",
-  "p-vertical-xxxs": "awsui_p-vertical-xxxs_18wu0_1880m_558",
-  "p-right-xxxs": "awsui_p-right-xxxs_18wu0_1880m_562",
-  "p-horizontal-xxxs": "awsui_p-horizontal-xxxs_18wu0_1880m_563",
-  "p-bottom-xxxs": "awsui_p-bottom-xxxs_18wu0_1880m_567",
-  "p-left-xxxs": "awsui_p-left-xxxs_18wu0_1880m_572",
-  "p-xxs": "awsui_p-xxs_18wu0_1880m_577",
-  "p-top-xxs": "awsui_p-top-xxs_18wu0_1880m_581",
-  "p-vertical-xxs": "awsui_p-vertical-xxs_18wu0_1880m_582",
-  "p-right-xxs": "awsui_p-right-xxs_18wu0_1880m_586",
-  "p-horizontal-xxs": "awsui_p-horizontal-xxs_18wu0_1880m_587",
-  "p-bottom-xxs": "awsui_p-bottom-xxs_18wu0_1880m_591",
-  "p-left-xxs": "awsui_p-left-xxs_18wu0_1880m_596",
-  "p-xs": "awsui_p-xs_18wu0_1880m_601",
-  "p-top-xs": "awsui_p-top-xs_18wu0_1880m_605",
-  "p-vertical-xs": "awsui_p-vertical-xs_18wu0_1880m_606",
-  "p-right-xs": "awsui_p-right-xs_18wu0_1880m_610",
-  "p-horizontal-xs": "awsui_p-horizontal-xs_18wu0_1880m_611",
-  "p-bottom-xs": "awsui_p-bottom-xs_18wu0_1880m_615",
-  "p-left-xs": "awsui_p-left-xs_18wu0_1880m_620",
-  "p-s": "awsui_p-s_18wu0_1880m_625",
-  "p-top-s": "awsui_p-top-s_18wu0_1880m_629",
-  "p-vertical-s": "awsui_p-vertical-s_18wu0_1880m_630",
-  "p-right-s": "awsui_p-right-s_18wu0_1880m_634",
-  "p-horizontal-s": "awsui_p-horizontal-s_18wu0_1880m_635",
-  "p-bottom-s": "awsui_p-bottom-s_18wu0_1880m_639",
-  "p-left-s": "awsui_p-left-s_18wu0_1880m_644",
-  "p-m": "awsui_p-m_18wu0_1880m_649",
-  "p-top-m": "awsui_p-top-m_18wu0_1880m_653",
-  "p-vertical-m": "awsui_p-vertical-m_18wu0_1880m_654",
-  "p-right-m": "awsui_p-right-m_18wu0_1880m_658",
-  "p-horizontal-m": "awsui_p-horizontal-m_18wu0_1880m_659",
-  "p-bottom-m": "awsui_p-bottom-m_18wu0_1880m_663",
-  "p-left-m": "awsui_p-left-m_18wu0_1880m_668",
-  "p-l": "awsui_p-l_18wu0_1880m_548",
-  "p-top-l": "awsui_p-top-l_18wu0_1880m_677",
-  "p-vertical-l": "awsui_p-vertical-l_18wu0_1880m_678",
-  "p-right-l": "awsui_p-right-l_18wu0_1880m_682",
-  "p-horizontal-l": "awsui_p-horizontal-l_18wu0_1880m_683",
-  "p-bottom-l": "awsui_p-bottom-l_18wu0_1880m_687",
-  "p-left-l": "awsui_p-left-l_18wu0_1880m_692",
-  "p-xl": "awsui_p-xl_18wu0_1880m_697",
-  "p-top-xl": "awsui_p-top-xl_18wu0_1880m_701",
-  "p-vertical-xl": "awsui_p-vertical-xl_18wu0_1880m_702",
-  "p-right-xl": "awsui_p-right-xl_18wu0_1880m_706",
-  "p-horizontal-xl": "awsui_p-horizontal-xl_18wu0_1880m_707",
-  "p-bottom-xl": "awsui_p-bottom-xl_18wu0_1880m_711",
-  "p-left-xl": "awsui_p-left-xl_18wu0_1880m_716",
-  "p-xxl": "awsui_p-xxl_18wu0_1880m_721",
-  "p-top-xxl": "awsui_p-top-xxl_18wu0_1880m_725",
-  "p-vertical-xxl": "awsui_p-vertical-xxl_18wu0_1880m_726",
-  "p-right-xxl": "awsui_p-right-xxl_18wu0_1880m_730",
-  "p-horizontal-xxl": "awsui_p-horizontal-xxl_18wu0_1880m_731",
-  "p-bottom-xxl": "awsui_p-bottom-xxl_18wu0_1880m_735",
-  "p-left-xxl": "awsui_p-left-xxl_18wu0_1880m_740",
-  "p-xxxl": "awsui_p-xxxl_18wu0_1880m_745",
-  "p-top-xxxl": "awsui_p-top-xxxl_18wu0_1880m_749",
-  "p-vertical-xxxl": "awsui_p-vertical-xxxl_18wu0_1880m_750",
-  "p-right-xxxl": "awsui_p-right-xxxl_18wu0_1880m_754",
-  "p-horizontal-xxxl": "awsui_p-horizontal-xxxl_18wu0_1880m_755",
-  "p-bottom-xxxl": "awsui_p-bottom-xxxl_18wu0_1880m_759",
-  "p-left-xxxl": "awsui_p-left-xxxl_18wu0_1880m_764",
-  "m-n": "awsui_m-n_18wu0_1880m_769",
-  "m-top-n": "awsui_m-top-n_18wu0_1880m_773",
-  "m-vertical-n": "awsui_m-vertical-n_18wu0_1880m_774",
-  "m-right-n": "awsui_m-right-n_18wu0_1880m_778",
-  "m-horizontal-n": "awsui_m-horizontal-n_18wu0_1880m_779",
-  "m-bottom-n": "awsui_m-bottom-n_18wu0_1880m_783",
-  "m-left-n": "awsui_m-left-n_18wu0_1880m_788",
-  "m-xxxs": "awsui_m-xxxs_18wu0_1880m_793",
-  "m-top-xxxs": "awsui_m-top-xxxs_18wu0_1880m_797",
-  "m-vertical-xxxs": "awsui_m-vertical-xxxs_18wu0_1880m_798",
-  "m-right-xxxs": "awsui_m-right-xxxs_18wu0_1880m_802",
-  "m-horizontal-xxxs": "awsui_m-horizontal-xxxs_18wu0_1880m_803",
-  "m-bottom-xxxs": "awsui_m-bottom-xxxs_18wu0_1880m_807",
-  "m-left-xxxs": "awsui_m-left-xxxs_18wu0_1880m_812",
-  "m-xxs": "awsui_m-xxs_18wu0_1880m_817",
-  "m-top-xxs": "awsui_m-top-xxs_18wu0_1880m_821",
-  "m-vertical-xxs": "awsui_m-vertical-xxs_18wu0_1880m_822",
-  "m-right-xxs": "awsui_m-right-xxs_18wu0_1880m_826",
-  "m-horizontal-xxs": "awsui_m-horizontal-xxs_18wu0_1880m_827",
-  "m-bottom-xxs": "awsui_m-bottom-xxs_18wu0_1880m_831",
-  "m-left-xxs": "awsui_m-left-xxs_18wu0_1880m_836",
-  "m-xs": "awsui_m-xs_18wu0_1880m_841",
-  "m-top-xs": "awsui_m-top-xs_18wu0_1880m_845",
-  "m-vertical-xs": "awsui_m-vertical-xs_18wu0_1880m_846",
-  "m-right-xs": "awsui_m-right-xs_18wu0_1880m_850",
-  "m-horizontal-xs": "awsui_m-horizontal-xs_18wu0_1880m_851",
-  "m-bottom-xs": "awsui_m-bottom-xs_18wu0_1880m_855",
-  "m-left-xs": "awsui_m-left-xs_18wu0_1880m_860",
-  "m-s": "awsui_m-s_18wu0_1880m_865",
-  "m-top-s": "awsui_m-top-s_18wu0_1880m_869",
-  "m-vertical-s": "awsui_m-vertical-s_18wu0_1880m_870",
-  "m-right-s": "awsui_m-right-s_18wu0_1880m_874",
-  "m-horizontal-s": "awsui_m-horizontal-s_18wu0_1880m_875",
-  "m-bottom-s": "awsui_m-bottom-s_18wu0_1880m_879",
-  "m-left-s": "awsui_m-left-s_18wu0_1880m_884",
-  "m-m": "awsui_m-m_18wu0_1880m_889",
-  "m-top-m": "awsui_m-top-m_18wu0_1880m_893",
-  "m-vertical-m": "awsui_m-vertical-m_18wu0_1880m_894",
-  "m-right-m": "awsui_m-right-m_18wu0_1880m_898",
-  "m-horizontal-m": "awsui_m-horizontal-m_18wu0_1880m_899",
-  "m-bottom-m": "awsui_m-bottom-m_18wu0_1880m_903",
-  "m-left-m": "awsui_m-left-m_18wu0_1880m_908",
-  "m-l": "awsui_m-l_18wu0_1880m_788",
-  "m-top-l": "awsui_m-top-l_18wu0_1880m_917",
-  "m-vertical-l": "awsui_m-vertical-l_18wu0_1880m_918",
-  "m-right-l": "awsui_m-right-l_18wu0_1880m_922",
-  "m-horizontal-l": "awsui_m-horizontal-l_18wu0_1880m_923",
-  "m-bottom-l": "awsui_m-bottom-l_18wu0_1880m_927",
-  "m-left-l": "awsui_m-left-l_18wu0_1880m_932",
-  "m-xl": "awsui_m-xl_18wu0_1880m_937",
-  "m-top-xl": "awsui_m-top-xl_18wu0_1880m_941",
-  "m-vertical-xl": "awsui_m-vertical-xl_18wu0_1880m_942",
-  "m-right-xl": "awsui_m-right-xl_18wu0_1880m_946",
-  "m-horizontal-xl": "awsui_m-horizontal-xl_18wu0_1880m_947",
-  "m-bottom-xl": "awsui_m-bottom-xl_18wu0_1880m_951",
-  "m-left-xl": "awsui_m-left-xl_18wu0_1880m_956",
-  "m-xxl": "awsui_m-xxl_18wu0_1880m_961",
-  "m-top-xxl": "awsui_m-top-xxl_18wu0_1880m_965",
-  "m-vertical-xxl": "awsui_m-vertical-xxl_18wu0_1880m_966",
-  "m-right-xxl": "awsui_m-right-xxl_18wu0_1880m_970",
-  "m-horizontal-xxl": "awsui_m-horizontal-xxl_18wu0_1880m_971",
-  "m-bottom-xxl": "awsui_m-bottom-xxl_18wu0_1880m_975",
-  "m-left-xxl": "awsui_m-left-xxl_18wu0_1880m_980",
-  "m-xxxl": "awsui_m-xxxl_18wu0_1880m_985",
-  "m-top-xxxl": "awsui_m-top-xxxl_18wu0_1880m_989",
-  "m-vertical-xxxl": "awsui_m-vertical-xxxl_18wu0_1880m_990",
-  "m-right-xxxl": "awsui_m-right-xxxl_18wu0_1880m_994",
-  "m-horizontal-xxxl": "awsui_m-horizontal-xxxl_18wu0_1880m_995",
-  "m-bottom-xxxl": "awsui_m-bottom-xxxl_18wu0_1880m_999",
-  "m-left-xxxl": "awsui_m-left-xxxl_18wu0_1880m_1004",
-  "d-block": "awsui_d-block_18wu0_1880m_1009",
-  "d-inline": "awsui_d-inline_18wu0_1880m_1012",
-  "d-inline-block": "awsui_d-inline-block_18wu0_1880m_1015",
-  "d-none": "awsui_d-none_18wu0_1880m_1018",
-  "f-left": "awsui_f-left_18wu0_1880m_1023",
-  "f-right": "awsui_f-right_18wu0_1880m_1027"
+  "root": "awsui_root_18wu0_12wc1_99",
+  "box": "awsui_box_18wu0_12wc1_219",
+  "p-variant": "awsui_p-variant_18wu0_12wc1_219",
+  "color-default": "awsui_color-default_18wu0_12wc1_219",
+  "b-variant": "awsui_b-variant_18wu0_12wc1_219",
+  "strong-variant": "awsui_strong-variant_18wu0_12wc1_219",
+  "code-variant": "awsui_code-variant_18wu0_12wc1_219",
+  "pre-variant": "awsui_pre-variant_18wu0_12wc1_219",
+  "samp-variant": "awsui_samp-variant_18wu0_12wc1_219",
+  "h1-variant": "awsui_h1-variant_18wu0_12wc1_223",
+  "h2-variant": "awsui_h2-variant_18wu0_12wc1_223",
+  "h3-variant": "awsui_h3-variant_18wu0_12wc1_223",
+  "h4-variant": "awsui_h4-variant_18wu0_12wc1_223",
+  "h5-variant": "awsui_h5-variant_18wu0_12wc1_223",
+  "small-variant": "awsui_small-variant_18wu0_12wc1_227",
+  "a-variant": "awsui_a-variant_18wu0_12wc1_231",
+  "font-size-default": "awsui_font-size-default_18wu0_12wc1_235",
+  "font-weight-default": "awsui_font-weight-default_18wu0_12wc1_275",
+  "key-label-variant": "awsui_key-label-variant_18wu0_12wc1_317",
+  "value-large-variant": "awsui_value-large-variant_18wu0_12wc1_324",
+  "font-weight-heavy": "awsui_font-weight-heavy_18wu0_12wc1_331",
+  "color-inverted": "awsui_color-inverted_18wu0_12wc1_336",
+  "color-text-label": "awsui_color-text-label_18wu0_12wc1_339",
+  "color-text-body-secondary": "awsui_color-text-body-secondary_18wu0_12wc1_342",
+  "color-text-status-error": "awsui_color-text-status-error_18wu0_12wc1_345",
+  "color-text-status-success": "awsui_color-text-status-success_18wu0_12wc1_348",
+  "color-text-status-info": "awsui_color-text-status-info_18wu0_12wc1_351",
+  "color-text-status-inactive": "awsui_color-text-status-inactive_18wu0_12wc1_354",
+  "color-text-status-warning": "awsui_color-text-status-warning_18wu0_12wc1_357",
+  "color-inherit": "awsui_color-inherit_18wu0_12wc1_360",
+  "font-size-body-s": "awsui_font-size-body-s_18wu0_12wc1_363",
+  "font-size-body-m": "awsui_font-size-body-m_18wu0_12wc1_368",
+  "font-size-heading-xs": "awsui_font-size-heading-xs_18wu0_12wc1_372",
+  "font-size-heading-s": "awsui_font-size-heading-s_18wu0_12wc1_376",
+  "font-size-heading-m": "awsui_font-size-heading-m_18wu0_12wc1_381",
+  "font-size-heading-l": "awsui_font-size-heading-l_18wu0_12wc1_386",
+  "font-size-heading-xl": "awsui_font-size-heading-xl_18wu0_12wc1_391",
+  "font-size-display-l": "awsui_font-size-display-l_18wu0_12wc1_396",
+  "font-weight-light": "awsui_font-weight-light_18wu0_12wc1_401",
+  "font-weight-normal": "awsui_font-weight-normal_18wu0_12wc1_404",
+  "font-weight-bold": "awsui_font-weight-bold_18wu0_12wc1_407",
+  "t-left": "awsui_t-left_18wu0_12wc1_414",
+  "t-right": "awsui_t-right_18wu0_12wc1_418",
+  "t-center": "awsui_t-center_18wu0_12wc1_422",
+  "p-n": "awsui_p-n_18wu0_12wc1_529",
+  "p-top-n": "awsui_p-top-n_18wu0_12wc1_534",
+  "p-vertical-n": "awsui_p-vertical-n_18wu0_12wc1_535",
+  "p-right-n": "awsui_p-right-n_18wu0_12wc1_539",
+  "p-horizontal-n": "awsui_p-horizontal-n_18wu0_12wc1_540",
+  "p-bottom-n": "awsui_p-bottom-n_18wu0_12wc1_544",
+  "p-left-n": "awsui_p-left-n_18wu0_12wc1_549",
+  "p-xxxs": "awsui_p-xxxs_18wu0_12wc1_554",
+  "p-top-xxxs": "awsui_p-top-xxxs_18wu0_12wc1_559",
+  "p-vertical-xxxs": "awsui_p-vertical-xxxs_18wu0_12wc1_560",
+  "p-right-xxxs": "awsui_p-right-xxxs_18wu0_12wc1_564",
+  "p-horizontal-xxxs": "awsui_p-horizontal-xxxs_18wu0_12wc1_565",
+  "p-bottom-xxxs": "awsui_p-bottom-xxxs_18wu0_12wc1_569",
+  "p-left-xxxs": "awsui_p-left-xxxs_18wu0_12wc1_574",
+  "p-xxs": "awsui_p-xxs_18wu0_12wc1_579",
+  "p-top-xxs": "awsui_p-top-xxs_18wu0_12wc1_584",
+  "p-vertical-xxs": "awsui_p-vertical-xxs_18wu0_12wc1_585",
+  "p-right-xxs": "awsui_p-right-xxs_18wu0_12wc1_589",
+  "p-horizontal-xxs": "awsui_p-horizontal-xxs_18wu0_12wc1_590",
+  "p-bottom-xxs": "awsui_p-bottom-xxs_18wu0_12wc1_594",
+  "p-left-xxs": "awsui_p-left-xxs_18wu0_12wc1_599",
+  "p-xs": "awsui_p-xs_18wu0_12wc1_604",
+  "p-top-xs": "awsui_p-top-xs_18wu0_12wc1_609",
+  "p-vertical-xs": "awsui_p-vertical-xs_18wu0_12wc1_610",
+  "p-right-xs": "awsui_p-right-xs_18wu0_12wc1_614",
+  "p-horizontal-xs": "awsui_p-horizontal-xs_18wu0_12wc1_615",
+  "p-bottom-xs": "awsui_p-bottom-xs_18wu0_12wc1_619",
+  "p-left-xs": "awsui_p-left-xs_18wu0_12wc1_624",
+  "p-s": "awsui_p-s_18wu0_12wc1_629",
+  "p-top-s": "awsui_p-top-s_18wu0_12wc1_634",
+  "p-vertical-s": "awsui_p-vertical-s_18wu0_12wc1_635",
+  "p-right-s": "awsui_p-right-s_18wu0_12wc1_639",
+  "p-horizontal-s": "awsui_p-horizontal-s_18wu0_12wc1_640",
+  "p-bottom-s": "awsui_p-bottom-s_18wu0_12wc1_644",
+  "p-left-s": "awsui_p-left-s_18wu0_12wc1_649",
+  "p-m": "awsui_p-m_18wu0_12wc1_654",
+  "p-top-m": "awsui_p-top-m_18wu0_12wc1_659",
+  "p-vertical-m": "awsui_p-vertical-m_18wu0_12wc1_660",
+  "p-right-m": "awsui_p-right-m_18wu0_12wc1_664",
+  "p-horizontal-m": "awsui_p-horizontal-m_18wu0_12wc1_665",
+  "p-bottom-m": "awsui_p-bottom-m_18wu0_12wc1_669",
+  "p-left-m": "awsui_p-left-m_18wu0_12wc1_674",
+  "p-l": "awsui_p-l_18wu0_12wc1_549",
+  "p-top-l": "awsui_p-top-l_18wu0_12wc1_684",
+  "p-vertical-l": "awsui_p-vertical-l_18wu0_12wc1_685",
+  "p-right-l": "awsui_p-right-l_18wu0_12wc1_689",
+  "p-horizontal-l": "awsui_p-horizontal-l_18wu0_12wc1_690",
+  "p-bottom-l": "awsui_p-bottom-l_18wu0_12wc1_694",
+  "p-left-l": "awsui_p-left-l_18wu0_12wc1_699",
+  "p-xl": "awsui_p-xl_18wu0_12wc1_704",
+  "p-top-xl": "awsui_p-top-xl_18wu0_12wc1_709",
+  "p-vertical-xl": "awsui_p-vertical-xl_18wu0_12wc1_710",
+  "p-right-xl": "awsui_p-right-xl_18wu0_12wc1_714",
+  "p-horizontal-xl": "awsui_p-horizontal-xl_18wu0_12wc1_715",
+  "p-bottom-xl": "awsui_p-bottom-xl_18wu0_12wc1_719",
+  "p-left-xl": "awsui_p-left-xl_18wu0_12wc1_724",
+  "p-xxl": "awsui_p-xxl_18wu0_12wc1_729",
+  "p-top-xxl": "awsui_p-top-xxl_18wu0_12wc1_734",
+  "p-vertical-xxl": "awsui_p-vertical-xxl_18wu0_12wc1_735",
+  "p-right-xxl": "awsui_p-right-xxl_18wu0_12wc1_739",
+  "p-horizontal-xxl": "awsui_p-horizontal-xxl_18wu0_12wc1_740",
+  "p-bottom-xxl": "awsui_p-bottom-xxl_18wu0_12wc1_744",
+  "p-left-xxl": "awsui_p-left-xxl_18wu0_12wc1_749",
+  "p-xxxl": "awsui_p-xxxl_18wu0_12wc1_754",
+  "p-top-xxxl": "awsui_p-top-xxxl_18wu0_12wc1_759",
+  "p-vertical-xxxl": "awsui_p-vertical-xxxl_18wu0_12wc1_760",
+  "p-right-xxxl": "awsui_p-right-xxxl_18wu0_12wc1_764",
+  "p-horizontal-xxxl": "awsui_p-horizontal-xxxl_18wu0_12wc1_765",
+  "p-bottom-xxxl": "awsui_p-bottom-xxxl_18wu0_12wc1_769",
+  "p-left-xxxl": "awsui_p-left-xxxl_18wu0_12wc1_774",
+  "m-n": "awsui_m-n_18wu0_12wc1_779",
+  "m-top-n": "awsui_m-top-n_18wu0_12wc1_784",
+  "m-vertical-n": "awsui_m-vertical-n_18wu0_12wc1_785",
+  "m-right-n": "awsui_m-right-n_18wu0_12wc1_789",
+  "m-horizontal-n": "awsui_m-horizontal-n_18wu0_12wc1_790",
+  "m-bottom-n": "awsui_m-bottom-n_18wu0_12wc1_794",
+  "m-left-n": "awsui_m-left-n_18wu0_12wc1_799",
+  "m-xxxs": "awsui_m-xxxs_18wu0_12wc1_804",
+  "m-top-xxxs": "awsui_m-top-xxxs_18wu0_12wc1_809",
+  "m-vertical-xxxs": "awsui_m-vertical-xxxs_18wu0_12wc1_810",
+  "m-right-xxxs": "awsui_m-right-xxxs_18wu0_12wc1_814",
+  "m-horizontal-xxxs": "awsui_m-horizontal-xxxs_18wu0_12wc1_815",
+  "m-bottom-xxxs": "awsui_m-bottom-xxxs_18wu0_12wc1_819",
+  "m-left-xxxs": "awsui_m-left-xxxs_18wu0_12wc1_824",
+  "m-xxs": "awsui_m-xxs_18wu0_12wc1_829",
+  "m-top-xxs": "awsui_m-top-xxs_18wu0_12wc1_834",
+  "m-vertical-xxs": "awsui_m-vertical-xxs_18wu0_12wc1_835",
+  "m-right-xxs": "awsui_m-right-xxs_18wu0_12wc1_839",
+  "m-horizontal-xxs": "awsui_m-horizontal-xxs_18wu0_12wc1_840",
+  "m-bottom-xxs": "awsui_m-bottom-xxs_18wu0_12wc1_844",
+  "m-left-xxs": "awsui_m-left-xxs_18wu0_12wc1_849",
+  "m-xs": "awsui_m-xs_18wu0_12wc1_854",
+  "m-top-xs": "awsui_m-top-xs_18wu0_12wc1_859",
+  "m-vertical-xs": "awsui_m-vertical-xs_18wu0_12wc1_860",
+  "m-right-xs": "awsui_m-right-xs_18wu0_12wc1_864",
+  "m-horizontal-xs": "awsui_m-horizontal-xs_18wu0_12wc1_865",
+  "m-bottom-xs": "awsui_m-bottom-xs_18wu0_12wc1_869",
+  "m-left-xs": "awsui_m-left-xs_18wu0_12wc1_874",
+  "m-s": "awsui_m-s_18wu0_12wc1_879",
+  "m-top-s": "awsui_m-top-s_18wu0_12wc1_884",
+  "m-vertical-s": "awsui_m-vertical-s_18wu0_12wc1_885",
+  "m-right-s": "awsui_m-right-s_18wu0_12wc1_889",
+  "m-horizontal-s": "awsui_m-horizontal-s_18wu0_12wc1_890",
+  "m-bottom-s": "awsui_m-bottom-s_18wu0_12wc1_894",
+  "m-left-s": "awsui_m-left-s_18wu0_12wc1_899",
+  "m-m": "awsui_m-m_18wu0_12wc1_904",
+  "m-top-m": "awsui_m-top-m_18wu0_12wc1_909",
+  "m-vertical-m": "awsui_m-vertical-m_18wu0_12wc1_910",
+  "m-right-m": "awsui_m-right-m_18wu0_12wc1_914",
+  "m-horizontal-m": "awsui_m-horizontal-m_18wu0_12wc1_915",
+  "m-bottom-m": "awsui_m-bottom-m_18wu0_12wc1_919",
+  "m-left-m": "awsui_m-left-m_18wu0_12wc1_924",
+  "m-l": "awsui_m-l_18wu0_12wc1_799",
+  "m-top-l": "awsui_m-top-l_18wu0_12wc1_934",
+  "m-vertical-l": "awsui_m-vertical-l_18wu0_12wc1_935",
+  "m-right-l": "awsui_m-right-l_18wu0_12wc1_939",
+  "m-horizontal-l": "awsui_m-horizontal-l_18wu0_12wc1_940",
+  "m-bottom-l": "awsui_m-bottom-l_18wu0_12wc1_944",
+  "m-left-l": "awsui_m-left-l_18wu0_12wc1_949",
+  "m-xl": "awsui_m-xl_18wu0_12wc1_954",
+  "m-top-xl": "awsui_m-top-xl_18wu0_12wc1_959",
+  "m-vertical-xl": "awsui_m-vertical-xl_18wu0_12wc1_960",
+  "m-right-xl": "awsui_m-right-xl_18wu0_12wc1_964",
+  "m-horizontal-xl": "awsui_m-horizontal-xl_18wu0_12wc1_965",
+  "m-bottom-xl": "awsui_m-bottom-xl_18wu0_12wc1_969",
+  "m-left-xl": "awsui_m-left-xl_18wu0_12wc1_974",
+  "m-xxl": "awsui_m-xxl_18wu0_12wc1_979",
+  "m-top-xxl": "awsui_m-top-xxl_18wu0_12wc1_984",
+  "m-vertical-xxl": "awsui_m-vertical-xxl_18wu0_12wc1_985",
+  "m-right-xxl": "awsui_m-right-xxl_18wu0_12wc1_989",
+  "m-horizontal-xxl": "awsui_m-horizontal-xxl_18wu0_12wc1_990",
+  "m-bottom-xxl": "awsui_m-bottom-xxl_18wu0_12wc1_994",
+  "m-left-xxl": "awsui_m-left-xxl_18wu0_12wc1_999",
+  "m-xxxl": "awsui_m-xxxl_18wu0_12wc1_1004",
+  "m-top-xxxl": "awsui_m-top-xxxl_18wu0_12wc1_1009",
+  "m-vertical-xxxl": "awsui_m-vertical-xxxl_18wu0_12wc1_1010",
+  "m-right-xxxl": "awsui_m-right-xxxl_18wu0_12wc1_1014",
+  "m-horizontal-xxxl": "awsui_m-horizontal-xxxl_18wu0_12wc1_1015",
+  "m-bottom-xxxl": "awsui_m-bottom-xxxl_18wu0_12wc1_1019",
+  "m-left-xxxl": "awsui_m-left-xxxl_18wu0_12wc1_1024",
+  "d-block": "awsui_d-block_18wu0_12wc1_1029",
+  "d-inline": "awsui_d-inline_18wu0_12wc1_1032",
+  "d-inline-block": "awsui_d-inline-block_18wu0_12wc1_1035",
+  "d-none": "awsui_d-none_18wu0_12wc1_1038",
+  "f-left": "awsui_f-left_18wu0_12wc1_1042",
+  "f-right": "awsui_f-right_18wu0_12wc1_1046"
 };