@cloudscape-design/components 3.0.693 → 3.0.695

package/help-panel/implementation.js

@@ -3,6 +3,7 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import { getGlobalFlag } from '@cloudscape-design/component-toolkit/internal';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import LiveRegion from '../internal/components/live-region';
@@ -14,11 +15,12 @@ export function HelpPanelImplementation(_a) {
     var { header, footer, children, loading, loadingText, __internalRootRef } = _a, restProps = __rest(_a, ["header", "footer", "children", "loading", "loadingText", "__internalRootRef"]);
     const baseProps = getBaseProps(restProps);
     const i18n = useInternalI18n('help-panel');
-    const containerProps = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles['help-panel']) });
+    const hasToolbar = getGlobalFlag('appLayoutWidget');
+    const containerProps = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles['help-panel'], hasToolbar && styles['with-toolbar']) });
     return loading ? (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
         React.createElement(InternalStatusIndicator, { type: "loading" },
             React.createElement(LiveRegion, { visible: true }, i18n('loadingText', loadingText))))) : (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
-        header && React.createElement("div", { className: styles.header }, header),
+        header && React.createElement("div", { className: clsx(styles.header) }, header),
         React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
             React.createElement("div", { className: styles.content }, children)),
         footer && React.createElement("div", { className: styles.footer }, footer)));

package/help-panel/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/help-panel/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAE7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,uBAAuB,CAAC,EAQf;QARe,EACtC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,OAEM,EADpB,SAAS,cAP0B,+EAQvC,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,GAC3D,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,IAAG,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAc,CAClD,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO;QACxD,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE;YACtE,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CACb;QACpC,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CACpD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,yBAAyB,CAAC,uBAAuB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { HelpPanelProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport type HelpPanelInternalProps = HelpPanelProps & InternalBaseComponentProps;\n\nexport function HelpPanelImplementation({\n  header,\n  footer,\n  children,\n  loading,\n  loadingText,\n  __internalRootRef,\n  ...restProps\n}: HelpPanelInternalProps) {\n  const baseProps = getBaseProps(restProps);\n  const i18n = useInternalI18n('help-panel');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles['help-panel']),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <LiveRegion visible={true}>{i18n('loadingText', loadingText)}</LiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={styles.header}>{header}</div>}\n      <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n        <div className={styles.content}>{children}</div>\n      </LinkDefaultVariantContext.Provider>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  );\n}\n\nexport const createWidgetizedHelpPanel = createWidgetizedComponent(HelpPanelImplementation);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/help-panel/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAE9E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAE7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,uBAAuB,CAAC,EAQf;QARe,EACtC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,OAEM,EADpB,SAAS,cAP0B,+EAQvC,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACpD,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,GACjG,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,IAAG,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAc,CAClD,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAG,MAAM,CAAO;QAC9D,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE;YACtE,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CACb;QACpC,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CACpD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,yBAAyB,CAAC,uBAAuB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getGlobalFlag } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { HelpPanelProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport type HelpPanelInternalProps = HelpPanelProps & InternalBaseComponentProps;\n\nexport function HelpPanelImplementation({\n  header,\n  footer,\n  children,\n  loading,\n  loadingText,\n  __internalRootRef,\n  ...restProps\n}: HelpPanelInternalProps) {\n  const baseProps = getBaseProps(restProps);\n  const i18n = useInternalI18n('help-panel');\n  const hasToolbar = getGlobalFlag('appLayoutWidget');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles['help-panel'], hasToolbar && styles['with-toolbar']),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <LiveRegion visible={true}>{i18n('loadingText', loadingText)}</LiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={clsx(styles.header)}>{header}</div>}\n      <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n        <div className={styles.content}>{children}</div>\n      </LinkDefaultVariantContext.Provider>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  );\n}\n\nexport const createWidgetizedHelpPanel = createWidgetizedComponent(HelpPanelImplementation);\n"]}

package/help-panel/styles.css.js

@@ -1,9 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "help-panel": "awsui_help-panel_1d237_ql43l_97",
-  "header": "awsui_header_1d237_ql43l_268",
-  "content": "awsui_content_1d237_ql43l_301",
-  "footer": "awsui_footer_1d237_ql43l_349"
+  "help-panel": "awsui_help-panel_1d237_xstvx_97",
+  "with-toolbar": "awsui_with-toolbar_1d237_xstvx_138",
+  "header": "awsui_header_1d237_xstvx_272",
+  "content": "awsui_content_1d237_xstvx_310",
+  "footer": "awsui_footer_1d237_xstvx_358"
 };
   

package/help-panel/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_help-panel_1d237_ql43l_97:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -136,36 +136,39 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
-.awsui_help-panel_1d237_ql43l_97 hr:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97.awsui_with-toolbar_1d237_xstvx_138:not(#\9) {
+  padding-block-start: var(--space-static-m-lrhgl2, 16px);
+}
+.awsui_help-panel_1d237_xstvx_97 hr:not(#\9) {
   border-block: none;
   border-inline: none;
   border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
   margin-block: var(--space-scaled-xl-kswcw7, 24px);
   margin-inline: calc(-1 * var(--space-panel-divider-margin-horizontal-sbik1z, 8px));
 }
-.awsui_help-panel_1d237_ql43l_97 ol:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 ul:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 ol:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 ul:not(#\9) {
   padding-inline-start: var(--space-l-t419sm, 20px);
   list-style-position: outside;
   margin-block: var(--space-s-34lx8l, 12px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_ql43l_97 li:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 li:not(#\9) {
   margin-block: var(--space-scaled-xxs-7597g1, 4px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_ql43l_97 a:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 h2:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 h3:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 h4:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 h5:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 pre:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 code:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 a:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 h2:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 h3:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 h4:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 h5:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 pre:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 code:not(#\9) {
   margin-block: var(--space-xs-zb16t3, 8px);
   margin-inline: 0;
   padding-block: 0;
 }
-.awsui_help-panel_1d237_ql43l_97 code:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 code:not(#\9) {
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
   letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
@@ -176,7 +179,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   white-space: pre-wrap;
 }
-.awsui_help-panel_1d237_ql43l_97 pre:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 pre:not(#\9) {
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
   letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
@@ -189,41 +192,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-xxs-p8yyaw, 4px);
   padding-inline: var(--space-xxs-p8yyaw, 4px);
 }
-.awsui_help-panel_1d237_ql43l_97 dl:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 dl:not(#\9) {
   margin-block: var(--space-s-34lx8l, 12px);
   margin-inline: 0;
   /* stylelint-disable-next-line selector-max-universal */
 }
-.awsui_help-panel_1d237_ql43l_97 dl *:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 dl *:not(#\9) {
   margin-block: 0;
 }
-.awsui_help-panel_1d237_ql43l_97 dt:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 dt:not(#\9) {
   margin-block-start: var(--space-xs-zb16t3, 8px);
   font-weight: 700;
 }
-.awsui_help-panel_1d237_ql43l_97 dd:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 dd:not(#\9) {
   margin-block-start: 0;
   margin-block-end: var(--space-xs-zb16t3, 8px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_ql43l_97 h2:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 h3:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 h4:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 h5:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 h6:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 h2:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 h3:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 h4:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 h5:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 h6:not(#\9) {
   margin-block-start: var(--space-xl-lmui9r, 24px);
   color: var(--color-text-heading-default-lstrpn, #000716);
 }
-.awsui_help-panel_1d237_ql43l_97 > :not(#\9):last-child {
+.awsui_help-panel_1d237_xstvx_97 > :not(#\9):last-child {
   margin-block-end: var(--space-panel-content-bottom-7k6er3, 40px);
 }
-.awsui_help-panel_1d237_ql43l_97 p:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 p:not(#\9) {
   color: inherit;
   text-decoration: none;
   margin-block: var(--space-s-34lx8l, 12px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_ql43l_97 h1:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 h1:not(#\9) {
   font-size: var(--font-size-heading-xl-ypc05a, 24px);
   line-height: var(--line-height-heading-xl-avbttk, 30px);
   letter-spacing: var(--letter-spacing-heading-xl-sagq9c, -0.02em);
@@ -231,7 +234,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_ql43l_97 h2:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 h2:not(#\9) {
   font-size: var(--font-size-heading-l-ou0d0l, 20px);
   line-height: var(--line-height-heading-l-mmm3my, 24px);
   letter-spacing: var(--letter-spacing-heading-l-qqjd4y, -0.015em);
@@ -239,7 +242,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_ql43l_97 h3:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 h3:not(#\9) {
   font-size: var(--font-size-heading-m-sjd256, 18px);
   line-height: var(--line-height-heading-m-50evfk, 22px);
   letter-spacing: var(--letter-spacing-heading-m-0w575i, -0.01em);
@@ -247,7 +250,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_ql43l_97 h4:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 h4:not(#\9) {
   font-size: var(--font-size-heading-s-yykzif, 16px);
   line-height: var(--line-height-heading-s-4i6ewn, 20px);
   letter-spacing: var(--letter-spacing-heading-s-jr3mor, -0.005em);
@@ -255,18 +258,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_ql43l_97 h5:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 h5:not(#\9) {
   font-size: var(--font-size-heading-xs-wo4hpf, 14px);
   line-height: var(--line-height-heading-xs-aeleja, 18px);
   font-weight: var(--font-weight-heading-xs-l7rqme, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_ql43l_97 b:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 strong:not(#\9) {
+.awsui_help-panel_1d237_xstvx_97 b:not(#\9),
+.awsui_help-panel_1d237_xstvx_97 strong:not(#\9) {
   font-weight: 700;
 }
-.awsui_help-panel_1d237_ql43l_97 > .awsui_header_1d237_ql43l_268:not(#\9) {
+
+.awsui_header_1d237_xstvx_272:not(#\9) {
   font-size: var(--font-panel-header-size-edjz3l, 18px);
   line-height: var(--font-panel-header-line-height-kxi4u2, 22px);
   font-weight: var(--font-weight-heading-l-f8711v, 700);
@@ -285,11 +289,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
-.awsui_help-panel_1d237_ql43l_97 > .awsui_header_1d237_ql43l_268 h2:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 > .awsui_header_1d237_ql43l_268 h3:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 > .awsui_header_1d237_ql43l_268 h4:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 > .awsui_header_1d237_ql43l_268 h5:not(#\9),
-.awsui_help-panel_1d237_ql43l_97 > .awsui_header_1d237_ql43l_268 h6:not(#\9) {
+.awsui_with-toolbar_1d237_xstvx_138 > .awsui_header_1d237_xstvx_272:not(#\9) {
+  border-color: transparent;
+  padding-block-end: var(--space-static-m-lrhgl2, 16px);
+  margin-block-end: 0px;
+}
+.awsui_header_1d237_xstvx_272 h2:not(#\9),
+.awsui_header_1d237_xstvx_272 h3:not(#\9),
+.awsui_header_1d237_xstvx_272 h4:not(#\9),
+.awsui_header_1d237_xstvx_272 h5:not(#\9),
+.awsui_header_1d237_xstvx_272 h6:not(#\9) {
   font-size: var(--font-panel-header-size-edjz3l, 18px);
   line-height: var(--font-panel-header-line-height-kxi4u2, 22px);
   font-weight: var(--font-weight-heading-l-f8711v, 700);
@@ -299,19 +308,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: 0;
 }
 
-.awsui_content_1d237_ql43l_301:not(#\9) {
+.awsui_content_1d237_xstvx_310:not(#\9) {
   color: var(--color-text-body-secondary-w9jvno, #414d5c);
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
-.awsui_content_1d237_ql43l_301 h2:not(#\9):first-child,
-.awsui_content_1d237_ql43l_301 h3:not(#\9):first-child,
-.awsui_content_1d237_ql43l_301 h4:not(#\9):first-child,
-.awsui_content_1d237_ql43l_301 h5:not(#\9):first-child,
-.awsui_content_1d237_ql43l_301 h6:not(#\9):first-child {
+.awsui_content_1d237_xstvx_310 h2:not(#\9):first-child,
+.awsui_content_1d237_xstvx_310 h3:not(#\9):first-child,
+.awsui_content_1d237_xstvx_310 h4:not(#\9):first-child,
+.awsui_content_1d237_xstvx_310 h5:not(#\9):first-child,
+.awsui_content_1d237_xstvx_310 h6:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_content_1d237_ql43l_301 a:not(#\9) {
+.awsui_content_1d237_xstvx_310 a:not(#\9) {
   color: var(--color-text-link-default-latg1a, #0972d3);
   font-weight: inherit;
   letter-spacing: normal;
@@ -325,31 +334,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   text-decoration-thickness: 1px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content_1d237_ql43l_301 a:not(#\9) {
+  .awsui_content_1d237_xstvx_310 a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content_1d237_ql43l_301 a:not(#\9), .awsui-mode-entering .awsui_content_1d237_ql43l_301 a:not(#\9) {
+.awsui-motion-disabled .awsui_content_1d237_xstvx_310 a:not(#\9), .awsui-mode-entering .awsui_content_1d237_xstvx_310 a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_content_1d237_ql43l_301 a:not(#\9):hover {
+.awsui_content_1d237_xstvx_310 a:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_content_1d237_ql43l_301 a:not(#\9):focus {
+.awsui_content_1d237_xstvx_310 a:not(#\9):focus {
   outline: none;
 }
-.awsui_content_1d237_ql43l_301 a:not(#\9):active {
+.awsui_content_1d237_xstvx_310 a:not(#\9):active {
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_content_1d237_ql43l_301 a:not(#\9):active, .awsui_content_1d237_ql43l_301 a:not(#\9):focus, .awsui_content_1d237_ql43l_301 a:not(#\9):hover {
+.awsui_content_1d237_xstvx_310 a:not(#\9):active, .awsui_content_1d237_xstvx_310 a:not(#\9):focus, .awsui_content_1d237_xstvx_310 a:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
 
-.awsui_footer_1d237_ql43l_349:not(#\9) {
+.awsui_footer_1d237_xstvx_358:not(#\9) {
   color: var(--color-text-body-secondary-w9jvno, #414d5c);
   border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
   margin-block: var(--space-scaled-xl-kswcw7, 24px);
@@ -359,14 +368,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
-.awsui_footer_1d237_ql43l_349 > :not(#\9):first-child {
+.awsui_footer_1d237_xstvx_358 > :not(#\9):first-child {
   margin-block-start: var(--space-scaled-xl-kswcw7, 24px);
 }
-.awsui_footer_1d237_ql43l_349 ul:not(#\9) {
+.awsui_footer_1d237_xstvx_358 ul:not(#\9) {
   list-style: none;
   padding-inline-start: 0;
 }
-.awsui_footer_1d237_ql43l_349 a:not(#\9) {
+.awsui_footer_1d237_xstvx_358 a:not(#\9) {
   color: var(--color-text-link-default-latg1a, #0972d3);
   font-weight: inherit;
   letter-spacing: normal;
@@ -380,37 +389,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   text-decoration-thickness: 1px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_footer_1d237_ql43l_349 a:not(#\9) {
+  .awsui_footer_1d237_xstvx_358 a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_footer_1d237_ql43l_349 a:not(#\9), .awsui-mode-entering .awsui_footer_1d237_ql43l_349 a:not(#\9) {
+.awsui-motion-disabled .awsui_footer_1d237_xstvx_358 a:not(#\9), .awsui-mode-entering .awsui_footer_1d237_xstvx_358 a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_footer_1d237_ql43l_349 a:not(#\9):hover {
+.awsui_footer_1d237_xstvx_358 a:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_footer_1d237_ql43l_349 a:not(#\9):focus {
+.awsui_footer_1d237_xstvx_358 a:not(#\9):focus {
   outline: none;
 }
-.awsui_footer_1d237_ql43l_349 a:not(#\9):active {
+.awsui_footer_1d237_xstvx_358 a:not(#\9):active {
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_footer_1d237_ql43l_349 a:not(#\9):active, .awsui_footer_1d237_ql43l_349 a:not(#\9):focus, .awsui_footer_1d237_ql43l_349 a:not(#\9):hover {
+.awsui_footer_1d237_xstvx_358 a:not(#\9):active, .awsui_footer_1d237_xstvx_358 a:not(#\9):focus, .awsui_footer_1d237_xstvx_358 a:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
 
-.awsui_content_1d237_ql43l_301:not(#\9),
-.awsui_footer_1d237_ql43l_349:not(#\9) {
+.awsui_content_1d237_xstvx_310:not(#\9),
+.awsui_footer_1d237_xstvx_358:not(#\9) {
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
-.awsui_content_1d237_ql43l_301 a:not(#\9):focus,
-.awsui_footer_1d237_ql43l_349 a:not(#\9):focus {
+.awsui_content_1d237_xstvx_310 a:not(#\9):focus,
+.awsui_footer_1d237_xstvx_358 a:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-kkfop6, 0);
   outline-offset: 2px;

package/help-panel/styles.selectors.js

@@ -2,9 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "help-panel": "awsui_help-panel_1d237_ql43l_97",
-  "header": "awsui_header_1d237_ql43l_268",
-  "content": "awsui_content_1d237_ql43l_301",
-  "footer": "awsui_footer_1d237_ql43l_349"
+  "help-panel": "awsui_help-panel_1d237_xstvx_97",
+  "with-toolbar": "awsui_with-toolbar_1d237_xstvx_138",
+  "header": "awsui_header_1d237_xstvx_272",
+  "content": "awsui_content_1d237_xstvx_310",
+  "footer": "awsui_footer_1d237_xstvx_358"
 };