@cloudscape-design/components-themeable 3.0.243 → 3.0.244

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "543b6496673e316c85444104e9108da9ad7b8c5b"
+  "commit": "fae213c62ab1c7147ecb6d01b2a41ff4b1d7dc24"
 }

package/lib/internal/scss/container/styles.scss

@@ -155,18 +155,12 @@ the default white background of the container component.
     flex: 1;
     overflow: auto;
   }
-  .with-content-paddings > & {
+  &.with-paddings {
     padding: awsui.$space-scaled-l awsui.$space-container-horizontal;
-  }
-  .with-content-paddings > .header + & {
-    padding-top: awsui.$space-container-content-top;
-  }
-}
 
-.fit-height.with-content-paddings:not(.with-footer) {
-  padding-bottom: awsui.$space-scaled-l;
-  & > .content {
-    padding-bottom: 0;
+    .header + & {
+      padding-top: awsui.$space-container-content-top;
+    }
   }
 }
 

package/lib/internal/scss/modal/styles.scss

@@ -106,6 +106,15 @@ $modal-z-index: 5000;
 .footer {
   @include container.divider;
   padding: container.$footer-padding;
+  background-color: awsui.$color-background-container-content;
+
+  // Make sure that the footer is always visible
+  position: sticky;
+  bottom: 0;
+
+  &--stuck {
+    border-radius: 0 0 awsui.$border-radius-container awsui.$border-radius-container;
+  }
 
   &:after {
     content: '';

package/lib/internal/scss/property-filter/styles.scss

@@ -91,16 +91,6 @@
   flex: 1;
 }
 
-.results {
-  color: awsui.$color-text-form-label;
-  display: inline-block;
-  box-sizing: border-box;
-  white-space: nowrap;
-  &-visible {
-    padding-left: awsui.$space-s;
-  }
-}
-
 .separator {
   margin: 0px awsui.$space-scaled-m;
   height: 100%;

package/lib/internal/scss/text-filter/styles.scss

@@ -23,7 +23,5 @@
   display: inline-block;
   box-sizing: border-box;
   white-space: nowrap;
-  &-visible {
-    padding-left: awsui.$space-s;
-  }
+  padding-left: awsui.$space-s;
 }

package/lib/internal/template/container/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;CAC1E;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,cAAc,EACd,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAU,EACV,YAAoB,EACpB,GAAG,SAAS,EACb,EAAE,sBAAsB,eAmFxB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;CAC1E;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,cAAc,EACd,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAU,EACV,YAAoB,EACpB,GAAG,SAAS,EACb,EAAE,sBAAsB,eAuFxB"}

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

@@ -39,7 +39,7 @@ export default function InternalContainer(_a) {
             }
         };
     }, [isSticky, setHasStickyBackground, variant]);
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], isSticky && [styles['sticky-enabled']], !disableContentPaddings && styles['with-content-paddings'], footer && styles['with-footer']), ref: mergedRef }),
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], isSticky && [styles['sticky-enabled']]), ref: mergedRef }),
         header && (React.createElement(StickyHeaderContext.Provider, { value: { isStuck } },
             React.createElement("div", Object.assign({ className: clsx(styles.header, styles[`header-variant-${variant}`], {
                     [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
@@ -49,7 +49,9 @@ export default function InternalContainer(_a) {
                     [styles['with-paddings']]: !disableHeaderPaddings,
                     [styles['with-hidden-content']]: !children || __hiddenContent,
                 }) }, headerIdProp, stickyStyles, { ref: headerMergedRef }), __darkHeader ? (React.createElement("div", { className: clsx(styles['dark-header'], 'awsui-context-content-header') }, header)) : (header)))),
-        React.createElement("div", { className: styles.content }, children),
+        React.createElement("div", { className: clsx(styles.content, {
+                [styles['with-paddings']]: !disableContentPaddings,
+            }) }, children),
         footer && (React.createElement("div", { className: clsx(styles.footer, {
                 [styles['with-divider']]: !__disableFooterDivider,
                 [styles['with-paddings']]: !__disableFooterPaddings,

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAE7E,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAoBrC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAkBjB;QAlBiB,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,KAAK,EAC9B,SAAS,EACT,cAAc,EACd,cAAc,GAAG,KAAK,EACtB,iBAAiB,GAAG,IAAI,EACxB,sBAAsB,GAAG,KAAK,EAC9B,uBAAuB,GAAG,KAAK,EAC/B,eAAe,GAAG,KAAK,EACvB,WAAW,EACX,UAAU,EACV,YAAY,GAAG,KAAK,OAEG,EADpB,SAAS,cAjB4B,yRAkBzC,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC;IAChH,MAAM,EAAE,sBAAsB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACzD,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,gBAAgB,GAAG,SAAS,IAAI,OAAO,KAAK,WAAW,CAAC;IAC9D,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,gBAAgB,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IAE3F,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAC3D,MAAM,eAAe,GAAG,YAAY,CAAC,SAAS,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC;IAC7E,MAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE1D;;;;OAIG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,4BAA4B,GAAG,QAAQ,IAAI,OAAO,KAAK,WAAW,IAAI,sBAAsB,CAAC;QACnG,IAAI,4BAA4B,EAAE;YAChC,sBAAsB,CAAC,IAAI,CAAC,CAAC;SAC9B;QAED,OAAO,GAAG,EAAE;YACV,IAAI,4BAA4B,EAAE;gBAChC,sBAAsB,CAAC,KAAK,CAAC,CAAC;aAC/B;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhD,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAC5B,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,EACjC,QAAQ,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EACtC,CAAC,sBAAsB,IAAI,MAAM,CAAC,uBAAuB,CAAC,EAC1D,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,CAChC,EACD,GAAG,EAAE,SAAS;QAEb,MAAM,IAAI,CACT,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE;YAC9C,2CACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,kBAAkB,OAAO,EAAE,CAAC,EAAE;oBAClE,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,cAAc,IAAI,CAAC,QAAQ;oBAC/D,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,QAAQ;oBAC3C,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,gBAAgB;oBACnD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,OAAO;oBACjC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,qBAAqB;oBACjD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,CAAC,QAAQ,IAAI,eAAe;iBAC9D,CAAC,IACE,YAAY,EACZ,YAAY,IAChB,GAAG,EAAE,eAAe,KAEnB,YAAY,CAAC,CAAC,CAAC,CACd,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,8BAA8B,CAAC,IAAG,MAAM,CAAO,CAC5F,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CACG,CACuB,CAChC;QACD,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO;QAC/C,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;gBAC7B,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,sBAAsB;gBACjD,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,uBAAuB;aACpD,CAAC,IAED,MAAM,CACH,CACP,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __disableFooterPaddings?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __headerId?: string;\n  __darkHeader?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  fitHeight,\n  __stickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __hiddenContent = false,\n  __headerRef,\n  __headerId,\n  __darkHeader = false,\n  ...restProps\n}: InternalContainerProps) {\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset);\n  const { setHasStickyBackground } = useAppLayoutContext();\n  const isRefresh = useVisualRefresh();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n  const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n  const headerIdProp = __headerId ? { id: __headerId } : {};\n\n  /**\n   * The visual refresh AppLayout component needs to know if a child component\n   * has a high contrast sticky header. This is to make sure the background element\n   * stays in the same vertical position as the header content.\n   */\n  useEffect(() => {\n    const shouldUpdateStickyBackground = isSticky && variant === 'full-page' && setHasStickyBackground;\n    if (shouldUpdateStickyBackground) {\n      setHasStickyBackground(true);\n    }\n\n    return () => {\n      if (shouldUpdateStickyBackground) {\n        setHasStickyBackground(false);\n      }\n    };\n  }, [isSticky, setHasStickyBackground, variant]);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        isSticky && [styles['sticky-enabled']],\n        !disableContentPaddings && styles['with-content-paddings'],\n        footer && styles['with-footer']\n      )}\n      ref={mergedRef}\n    >\n      {header && (\n        <StickyHeaderContext.Provider value={{ isStuck }}>\n          <div\n            className={clsx(styles.header, styles[`header-variant-${variant}`], {\n              [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n              [styles['header-sticky-enabled']]: isSticky,\n              [styles['header-dynamic-height']]: hasDynamicHeight,\n              [styles['header-stuck']]: isStuck,\n              [styles['with-paddings']]: !disableHeaderPaddings,\n              [styles['with-hidden-content']]: !children || __hiddenContent,\n            })}\n            {...headerIdProp}\n            {...stickyStyles}\n            ref={headerMergedRef}\n          >\n            {__darkHeader ? (\n              <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n            ) : (\n              header\n            )}\n          </div>\n        </StickyHeaderContext.Provider>\n      )}\n      <div className={styles.content}>{children}</div>\n      {footer && (\n        <div\n          className={clsx(styles.footer, {\n            [styles['with-divider']]: !__disableFooterDivider,\n            [styles['with-paddings']]: !__disableFooterPaddings,\n          })}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/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 clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __disableFooterPaddings?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __headerId?: string;\n  __darkHeader?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  fitHeight,\n  __stickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __disableFooterPaddings = false,\n  __hiddenContent = false,\n  __headerRef,\n  __headerId,\n  __darkHeader = false,\n  ...restProps\n}: InternalContainerProps) {\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset);\n  const { setHasStickyBackground } = useAppLayoutContext();\n  const isRefresh = useVisualRefresh();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n  const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n  const headerIdProp = __headerId ? { id: __headerId } : {};\n\n  /**\n   * The visual refresh AppLayout component needs to know if a child component\n   * has a high contrast sticky header. This is to make sure the background element\n   * stays in the same vertical position as the header content.\n   */\n  useEffect(() => {\n    const shouldUpdateStickyBackground = isSticky && variant === 'full-page' && setHasStickyBackground;\n    if (shouldUpdateStickyBackground) {\n      setHasStickyBackground(true);\n    }\n\n    return () => {\n      if (shouldUpdateStickyBackground) {\n        setHasStickyBackground(false);\n      }\n    };\n  }, [isSticky, setHasStickyBackground, variant]);\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        isSticky && [styles['sticky-enabled']]\n      )}\n      ref={mergedRef}\n    >\n      {header && (\n        <StickyHeaderContext.Provider value={{ isStuck }}>\n          <div\n            className={clsx(styles.header, styles[`header-variant-${variant}`], {\n              [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n              [styles['header-sticky-enabled']]: isSticky,\n              [styles['header-dynamic-height']]: hasDynamicHeight,\n              [styles['header-stuck']]: isStuck,\n              [styles['with-paddings']]: !disableHeaderPaddings,\n              [styles['with-hidden-content']]: !children || __hiddenContent,\n            })}\n            {...headerIdProp}\n            {...stickyStyles}\n            ref={headerMergedRef}\n          >\n            {__darkHeader ? (\n              <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n            ) : (\n              header\n            )}\n          </div>\n        </StickyHeaderContext.Provider>\n      )}\n      <div\n        className={clsx(styles.content, {\n          [styles['with-paddings']]: !disableContentPaddings,\n        })}\n      >\n        {children}\n      </div>\n      {footer && (\n        <div\n          className={clsx(styles.footer, {\n            [styles['with-divider']]: !__disableFooterDivider,\n            [styles['with-paddings']]: !__disableFooterPaddings,\n          })}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

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

@@ -1,25 +1,23 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_kxs3k_97",
-  "fit-height": "awsui_fit-height_14iqq_kxs3k_111",
-  "variant-default": "awsui_variant-default_14iqq_kxs3k_116",
-  "variant-stacked": "awsui_variant-stacked_14iqq_kxs3k_116",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_kxs3k_169",
-  "header": "awsui_header_14iqq_kxs3k_176",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_kxs3k_181",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_kxs3k_185",
-  "header-stuck": "awsui_header-stuck_14iqq_kxs3k_191",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_kxs3k_197",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_kxs3k_200",
-  "with-paddings": "awsui_with-paddings_14iqq_kxs3k_206",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_kxs3k_209",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_kxs3k_259",
-  "dark-header": "awsui_dark-header_14iqq_kxs3k_277",
-  "content": "awsui_content_14iqq_kxs3k_282",
-  "with-content-paddings": "awsui_with-content-paddings_14iqq_kxs3k_286",
-  "with-footer": "awsui_with-footer_14iqq_kxs3k_293",
-  "footer": "awsui_footer_14iqq_kxs3k_300",
-  "with-divider": "awsui_with-divider_14iqq_kxs3k_303"
+  "root": "awsui_root_14iqq_5x9t2_97",
+  "fit-height": "awsui_fit-height_14iqq_5x9t2_111",
+  "variant-default": "awsui_variant-default_14iqq_5x9t2_116",
+  "variant-stacked": "awsui_variant-stacked_14iqq_5x9t2_116",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_5x9t2_169",
+  "header": "awsui_header_14iqq_5x9t2_176",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_5x9t2_181",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_5x9t2_185",
+  "header-stuck": "awsui_header-stuck_14iqq_5x9t2_191",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_5x9t2_197",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_5x9t2_200",
+  "with-paddings": "awsui_with-paddings_14iqq_5x9t2_206",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_5x9t2_209",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_5x9t2_259",
+  "dark-header": "awsui_dark-header_14iqq_5x9t2_277",
+  "content": "awsui_content_14iqq_5x9t2_282",
+  "footer": "awsui_footer_14iqq_5x9t2_293",
+  "with-divider": "awsui_with-divider_14iqq_5x9t2_296"
 };
   

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

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_14iqq_kxs3k_97:not(#\9) {
+.awsui_root_14iqq_5x9t2_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -134,17 +134,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   position: relative;
 }
-.awsui_root_14iqq_kxs3k_97.awsui_fit-height_14iqq_kxs3k_111:not(#\9) {
+.awsui_root_14iqq_5x9t2_97.awsui_fit-height_14iqq_5x9t2_111:not(#\9) {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-.awsui_root_14iqq_kxs3k_97.awsui_variant-default_14iqq_kxs3k_116:not(#\9), .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9) {
+.awsui_root_14iqq_5x9t2_97.awsui_variant-default_14iqq_5x9t2_116:not(#\9), .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9) {
   border-radius: var(--border-radius-container-1aveko, 0px);
   box-sizing: border-box;
   background-color: var(--color-background-container-content-o88wxm, #ffffff);
 }
-.awsui_root_14iqq_kxs3k_97.awsui_variant-default_14iqq_kxs3k_116:not(#\9)::before, .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9)::before {
+.awsui_root_14iqq_5x9t2_97.awsui_variant-default_14iqq_5x9t2_116:not(#\9)::before, .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9)::before {
   content: "";
   position: absolute;
   left: 0px;
@@ -159,7 +159,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-container-1aveko, 0px);
   z-index: 1;
 }
-.awsui_root_14iqq_kxs3k_97.awsui_variant-default_14iqq_kxs3k_116:not(#\9)::after, .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9)::after {
+.awsui_root_14iqq_5x9t2_97.awsui_variant-default_14iqq_5x9t2_116:not(#\9)::after, .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9)::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -174,76 +174,76 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   mix-blend-mode: multiply;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_root_14iqq_kxs3k_97.awsui_variant-default_14iqq_kxs3k_116:not(#\9), .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9) {
+  .awsui_root_14iqq_5x9t2_97.awsui_variant-default_14iqq_5x9t2_116:not(#\9), .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9) {
     border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   }
 }
-.awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9):not(:last-child), .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9):not(:last-child)::before, .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9):not(:last-child)::after {
+.awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9):not(:last-child), .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9):not(:last-child)::before, .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9):not(:last-child)::after {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116 + .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9), .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116 + .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9)::before, .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116 + .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9)::after {
+.awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116 + .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9), .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116 + .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9)::before, .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116 + .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9)::after {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116 + .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9)::before {
+.awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116 + .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9)::before {
   border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
-.awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116 + .awsui_root_14iqq_kxs3k_97.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9)::after {
+.awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116 + .awsui_root_14iqq_5x9t2_97.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9)::after {
   box-shadow: var(--shadow-container-stacked-j8j87i, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_root_14iqq_kxs3k_97.awsui_sticky-enabled_14iqq_kxs3k_169:not(#\9)::before {
+.awsui_root_14iqq_5x9t2_97.awsui_sticky-enabled_14iqq_5x9t2_169:not(#\9)::before {
   top: calc(-1 * var(--border-container-top-width-fs2udu, 1px));
 }
-.awsui_root_14iqq_kxs3k_97.awsui_sticky-enabled_14iqq_kxs3k_169.awsui_variant-stacked_14iqq_kxs3k_116:not(#\9)::before {
+.awsui_root_14iqq_5x9t2_97.awsui_sticky-enabled_14iqq_5x9t2_169.awsui_variant-stacked_14iqq_5x9t2_116:not(#\9)::before {
   top: calc(-1 * var(--border-divider-section-width-5a4cv1, 1px));
 }
 
-.awsui_header_14iqq_kxs3k_176:not(#\9) {
+.awsui_header_14iqq_5x9t2_176:not(#\9) {
   background-color: var(--color-background-container-header-g9rg0j, #fafafa);
   border-top-left-radius: var(--border-radius-container-1aveko, 0px);
   border-top-right-radius: var(--border-radius-container-1aveko, 0px);
 }
-.awsui_header-sticky-disabled_14iqq_kxs3k_181:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_5x9t2_181:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_kxs3k_185:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_5x9t2_185:not(#\9) {
   top: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_kxs3k_191:not(#\9) {
+.awsui_header-stuck_14iqq_5x9t2_191:not(#\9) {
   border-radius: 0;
 }
-.awsui_header-stuck_14iqq_kxs3k_191:not(#\9)::before {
+.awsui_header-stuck_14iqq_5x9t2_191:not(#\9)::before {
   border: 0;
 }
-.awsui_header-stuck_14iqq_kxs3k_191:not(#\9):not(.awsui_header-variant-cards_14iqq_kxs3k_197) {
+.awsui_header-stuck_14iqq_5x9t2_191:not(#\9):not(.awsui_header-variant-cards_14iqq_5x9t2_197) {
   box-shadow: var(--shadow-sticky-embedded-5acv0s, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
 }
-.awsui_header-dynamic-height_14iqq_kxs3k_200.awsui_header-stuck_14iqq_kxs3k_191:not(#\9) {
+.awsui_header-dynamic-height_14iqq_5x9t2_200.awsui_header-stuck_14iqq_5x9t2_191:not(#\9) {
   margin-bottom: calc(var(--font-heading-xl-line-height-qeciux, 36px) - var(--font-heading-l-line-height-oujdab, 22px));
 }
-.awsui_header_14iqq_kxs3k_176:not(#\9):not(:empty) {
+.awsui_header_14iqq_5x9t2_176:not(#\9):not(:empty) {
   border-bottom: var(--border-container-sticky-width-pybmba, 1px) solid var(--color-border-container-divider-z203b8, #eaeded);
 }
-.awsui_header_14iqq_kxs3k_176.awsui_with-paddings_14iqq_kxs3k_206:not(#\9) {
+.awsui_header_14iqq_5x9t2_176.awsui_with-paddings_14iqq_5x9t2_206:not(#\9) {
   padding: var(--space-container-header-vertical-0bd19u, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_header_14iqq_kxs3k_176.awsui_with-hidden-content_14iqq_kxs3k_209:not(#\9) {
+.awsui_header_14iqq_5x9t2_176.awsui_with-hidden-content_14iqq_5x9t2_209:not(#\9) {
   border-bottom-left-radius: var(--border-radius-container-1aveko, 0px);
   border-bottom-right-radius: var(--border-radius-container-1aveko, 0px);
 }
-.awsui_header-variant-cards_14iqq_kxs3k_197:not(#\9) {
+.awsui_header-variant-cards_14iqq_5x9t2_197:not(#\9) {
   border-radius: var(--border-radius-container-1aveko, 0px);
   box-sizing: border-box;
 }
-.awsui_header-variant-cards_14iqq_kxs3k_197:not(#\9):not(.awsui_header-sticky-enabled_14iqq_kxs3k_185) {
+.awsui_header-variant-cards_14iqq_5x9t2_197:not(#\9):not(.awsui_header-sticky-enabled_14iqq_5x9t2_185) {
   position: relative;
 }
-.awsui_header-variant-cards_14iqq_kxs3k_197:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_5x9t2_197:not(#\9)::before {
   content: "";
   position: absolute;
   left: 0px;
@@ -258,7 +258,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-container-1aveko, 0px);
   z-index: 1;
 }
-.awsui_header-variant-cards_14iqq_kxs3k_197:not(#\9)::after {
+.awsui_header-variant-cards_14iqq_5x9t2_197:not(#\9)::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -273,19 +273,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   mix-blend-mode: multiply;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_header-variant-cards_14iqq_kxs3k_197:not(#\9) {
+  .awsui_header-variant-cards_14iqq_5x9t2_197:not(#\9) {
     border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
   }
 }
-.awsui_header-variant-cards_14iqq_kxs3k_197.awsui_header-stuck_14iqq_kxs3k_191:not(#\9)::after, .awsui_header-variant-cards_14iqq_kxs3k_197.awsui_header-stuck_14iqq_kxs3k_191:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_5x9t2_197.awsui_header-stuck_14iqq_5x9t2_191:not(#\9)::after, .awsui_header-variant-cards_14iqq_5x9t2_197.awsui_header-stuck_14iqq_5x9t2_191:not(#\9)::before {
   border: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.awsui_header-variant-full-page_14iqq_kxs3k_259.awsui_header-stuck_14iqq_kxs3k_191:not(#\9) {
+.awsui_header-variant-full-page_14iqq_5x9t2_259.awsui_header-stuck_14iqq_5x9t2_191:not(#\9) {
   box-shadow: none;
 }
-.awsui_header-variant-full-page_14iqq_kxs3k_259.awsui_header-stuck_14iqq_kxs3k_191:not(#\9)::after {
+.awsui_header-variant-full-page_14iqq_5x9t2_259.awsui_header-stuck_14iqq_5x9t2_191:not(#\9)::after {
   content: "";
   position: absolute;
   right: 0;
@@ -300,32 +300,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 The dynamic height dark header needs a background that will cover
 the default white background of the container component.
 */
-.awsui_dark-header_14iqq_kxs3k_277:not(#\9) {
+.awsui_dark-header_14iqq_5x9t2_277:not(#\9) {
   background-color: var(--color-background-layout-main-q0tbxx, #f2f3f3);
   color: var(--color-text-body-default-7m2b3r, #16191f);
 }
 
-.awsui_fit-height_14iqq_kxs3k_111 > .awsui_content_14iqq_kxs3k_282:not(#\9) {
+.awsui_fit-height_14iqq_5x9t2_111 > .awsui_content_14iqq_5x9t2_282:not(#\9) {
   flex: 1;
   overflow: auto;
 }
-.awsui_with-content-paddings_14iqq_kxs3k_286 > .awsui_content_14iqq_kxs3k_282:not(#\9) {
+.awsui_content_14iqq_5x9t2_282.awsui_with-paddings_14iqq_5x9t2_206:not(#\9) {
   padding: var(--space-scaled-l-t03y3z, 20px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_with-content-paddings_14iqq_kxs3k_286 > .awsui_header_14iqq_kxs3k_176 + .awsui_content_14iqq_kxs3k_282:not(#\9) {
+.awsui_header_14iqq_5x9t2_176 + .awsui_content_14iqq_5x9t2_282.awsui_with-paddings_14iqq_5x9t2_206:not(#\9) {
   padding-top: var(--space-container-content-top-u412x3, 16px);
 }
 
-.awsui_fit-height_14iqq_kxs3k_111.awsui_with-content-paddings_14iqq_kxs3k_286:not(#\9):not(.awsui_with-footer_14iqq_kxs3k_293) {
-  padding-bottom: var(--space-scaled-l-t03y3z, 20px);
-}
-.awsui_fit-height_14iqq_kxs3k_111.awsui_with-content-paddings_14iqq_kxs3k_286:not(#\9):not(.awsui_with-footer_14iqq_kxs3k_293) > .awsui_content_14iqq_kxs3k_282 {
-  padding-bottom: 0;
-}
-
-.awsui_footer_14iqq_kxs3k_300.awsui_with-paddings_14iqq_kxs3k_206:not(#\9) {
+.awsui_footer_14iqq_5x9t2_293.awsui_with-paddings_14iqq_5x9t2_206:not(#\9) {
   padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-.awsui_footer_14iqq_kxs3k_300.awsui_with-divider_14iqq_kxs3k_303:not(#\9) {
+.awsui_footer_14iqq_5x9t2_293.awsui_with-divider_14iqq_5x9t2_296:not(#\9) {
   border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }

package/lib/internal/template/container/styles.selectors.js

@@ -2,25 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_14iqq_kxs3k_97",
-  "fit-height": "awsui_fit-height_14iqq_kxs3k_111",
-  "variant-default": "awsui_variant-default_14iqq_kxs3k_116",
-  "variant-stacked": "awsui_variant-stacked_14iqq_kxs3k_116",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_kxs3k_169",
-  "header": "awsui_header_14iqq_kxs3k_176",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_kxs3k_181",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_kxs3k_185",
-  "header-stuck": "awsui_header-stuck_14iqq_kxs3k_191",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_kxs3k_197",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_kxs3k_200",
-  "with-paddings": "awsui_with-paddings_14iqq_kxs3k_206",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_kxs3k_209",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_kxs3k_259",
-  "dark-header": "awsui_dark-header_14iqq_kxs3k_277",
-  "content": "awsui_content_14iqq_kxs3k_282",
-  "with-content-paddings": "awsui_with-content-paddings_14iqq_kxs3k_286",
-  "with-footer": "awsui_with-footer_14iqq_kxs3k_293",
-  "footer": "awsui_footer_14iqq_kxs3k_300",
-  "with-divider": "awsui_with-divider_14iqq_kxs3k_303"
+  "root": "awsui_root_14iqq_5x9t2_97",
+  "fit-height": "awsui_fit-height_14iqq_5x9t2_111",
+  "variant-default": "awsui_variant-default_14iqq_5x9t2_116",
+  "variant-stacked": "awsui_variant-stacked_14iqq_5x9t2_116",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_5x9t2_169",
+  "header": "awsui_header_14iqq_5x9t2_176",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_5x9t2_181",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_5x9t2_185",
+  "header-stuck": "awsui_header-stuck_14iqq_5x9t2_191",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_5x9t2_197",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_5x9t2_200",
+  "with-paddings": "awsui_with-paddings_14iqq_5x9t2_206",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_5x9t2_209",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_5x9t2_259",
+  "dark-header": "awsui_dark-header_14iqq_5x9t2_277",
+  "content": "awsui_content_14iqq_5x9t2_282",
+  "footer": "awsui_footer_14iqq_5x9t2_293",
+  "with-divider": "awsui_with-divider_14iqq_5x9t2_296"
 };