@cloudscape-design/components-themeable 3.0.707 → 3.0.709

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/header/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, { useContext } from 'react';\nimport clsx from 'clsx';\n\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_SUBSTEP_NAME } from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { useContainerHeader } from '../internal/context/container-header';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SomeRequired } from '../internal/types';\nimport { HeaderProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalHeaderProps extends SomeRequired<HeaderProps, 'variant'>, InternalBaseComponentProps {\n  __disableActionsWrapping?: boolean;\n}\n\nexport default function InternalHeader({\n  variant,\n  headingTagOverride,\n  children,\n  actions,\n  counter,\n  description,\n  info,\n  __internalRootRef = null,\n  __disableActionsWrapping,\n  ...restProps\n}: InternalHeaderProps) {\n  const isMobile = useMobile();\n  const HeadingTag = headingTagOverride ?? (variant === 'awsui-h1-sticky' ? 'h1' : variant);\n  const { isStuck } = useContext(StickyHeaderContext);\n  const baseProps = getBaseProps(restProps);\n  const isRefresh = useVisualRefresh();\n  const assignHeaderId = useContext(CollectionLabelContext).assignId;\n  const isInContainer = useContainerHeader();\n  const headingId = useUniqueId('heading');\n  if (assignHeaderId !== undefined) {\n    assignHeaderId(headingId);\n  }\n  // If is mobile there is no need to have the dynamic variant because it's scrolled out of view\n  const dynamicVariant = !isMobile && isStuck ? 'h2' : 'h1';\n  const variantOverride = variant === 'awsui-h1-sticky' ? (isRefresh ? dynamicVariant : 'h2') : variant;\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        styles[`root-variant-${variantOverride}`],\n        isRefresh && styles.refresh,\n        !actions && [styles[`root-no-actions`]],\n        description && [styles[`root-has-description`]]\n      )}\n      ref={__internalRootRef}\n    >\n      <div\n        className={clsx(\n          styles.main,\n          styles[`main-variant-${variantOverride}`],\n          isRefresh && styles.refresh,\n          __disableActionsWrapping && [styles['no-wrap']]\n        )}\n      >\n        <div className={clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles.refresh)}>\n          <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>\n            <span\n              {...(isInContainer ? { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_SUBSTEP_NAME } : {})}\n              className={clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`])}\n              id={headingId}\n            >\n              {children}\n            </span>\n            {counter !== undefined && <span className={styles.counter}> {counter}</span>}\n          </HeadingTag>\n          {info && (\n            <InfoLinkLabelContext.Provider value={headingId}>\n              {/* Exists to create a space between heading text and info so that a double-click selection on the last word of the heading doesn't also include info */}\n              <span className={styles['virtual-space']}> &nbsp;</span>\n              <span className={styles.info}>{info}</span>\n            </InfoLinkLabelContext.Provider>\n          )}\n        </div>\n        {actions && (\n          <div\n            className={clsx(\n              styles.actions,\n              styles[`actions-variant-${variantOverride}`],\n              isRefresh && styles.refresh,\n              !__disableActionsWrapping && [styles['actions-centered']]\n            )}\n          >\n            {actions}\n          </div>\n        )}\n      </div>\n      <Description variantOverride={variantOverride}>{description}</Description>\n    </div>\n  );\n}\n\nexport function Description({ children, variantOverride }: { children: React.ReactNode; variantOverride: string }) {\n  const isRefresh = useVisualRefresh();\n  return (\n    (children && (\n      <p\n        className={clsx(\n          styles.description,\n          styles[`description-variant-${variantOverride}`],\n          isRefresh && styles.refresh\n        )}\n      >\n        {children}\n      </p>\n    )) ||\n    null\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/header/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,kEAAkE,CAAC;AAE9G,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAEnF,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAIrE,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAWjB;QAXiB,EACrC,OAAO,EACP,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,IAAI,EACJ,iBAAiB,GAAG,IAAI,EACxB,wBAAwB,OAEJ,EADjB,SAAS,cAVyB,2IAWtC,CADa;IAEZ,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,UAAU,GAAG,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,CAAC,OAAO,KAAK,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC1F,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,MAAM,cAAc,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,kBAAkB,EAAE,CAAC;IAC3C,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,IAAI,cAAc,KAAK,SAAS,EAAE;QAChC,cAAc,CAAC,SAAS,CAAC,CAAC;KAC3B;IACD,8FAA8F;IAC9F,MAAM,cAAc,GAAG,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1D,MAAM,eAAe,GAAG,OAAO,KAAK,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEtG,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,IAAI,EACX,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,gBAAgB,eAAe,EAAE,CAAC,EACzC,SAAS,IAAI,MAAM,CAAC,OAAO,EAC3B,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EACvC,WAAW,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,CAChD,EACD,GAAG,EAAE,iBAAiB;QAEtB,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,gBAAgB,eAAe,EAAE,CAAC,EACzC,SAAS,IAAI,MAAM,CAAC,OAAO,EAC3B,wBAAwB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAChD;YAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,iBAAiB,eAAe,EAAE,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC;gBACzG,oBAAC,UAAU,kBACT,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,mBAAmB,eAAe,EAAE,CAAC,CAAC,IACzE,0BAA0B,CAAC,IAAI,kBAAkB,CAAC,cAAc,CAAC,EAAE,CAAC;oBAExE,8CACM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,oBAAoB,CAAC,EAAE,uBAAuB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC9E,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,cAAc,CAAC,EACtB,kBAAkB,CAAC,cAAc,CAAC,EAClC,MAAM,CAAC,wBAAwB,eAAe,EAAE,CAAC,CAClD,EACD,EAAE,EAAE,SAAS,KAEZ,QAAQ,CACJ;oBACN,OAAO,KAAK,SAAS,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO;;wBAAI,OAAO,CAAQ,CACjE;gBACZ,IAAI,IAAI,CACP,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS;oBAE7C,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,cAAgB;oBACxD,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAQ,CACb,CACjC,CACG;YACL,OAAO,IAAI,CACV,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd,MAAM,CAAC,mBAAmB,eAAe,EAAE,CAAC,EAC5C,SAAS,IAAI,MAAM,CAAC,OAAO,EAC3B,CAAC,wBAAwB,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAC1D,IAEA,OAAO,CACJ,CACP,CACG;QACN,oBAAC,WAAW,IAAC,eAAe,EAAE,eAAe,IAAG,WAAW,CAAe,CACtE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,eAAe,EAA0D;IAC/G,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,OAAO,CACL,CAAC,QAAQ,IAAI,CACX,2BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,WAAW,EAClB,MAAM,CAAC,uBAAuB,eAAe,EAAE,CAAC,EAChD,SAAS,IAAI,MAAM,CAAC,OAAO,CAC5B,IAEA,QAAQ,CACP,CACL,CAAC;QACF,IAAI,CACL,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_SUBSTEP_NAME } from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { useContainerHeader } from '../internal/context/container-header';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SomeRequired } from '../internal/types';\nimport { HeaderProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface InternalHeaderProps extends SomeRequired<HeaderProps, 'variant'>, InternalBaseComponentProps {\n  __disableActionsWrapping?: boolean;\n}\n\nexport default function InternalHeader({\n  variant,\n  headingTagOverride,\n  children,\n  actions,\n  counter,\n  description,\n  info,\n  __internalRootRef = null,\n  __disableActionsWrapping,\n  ...restProps\n}: InternalHeaderProps) {\n  const isMobile = useMobile();\n  const HeadingTag = headingTagOverride ?? (variant === 'awsui-h1-sticky' ? 'h1' : variant);\n  const { isStuck } = useContext(StickyHeaderContext);\n  const baseProps = getBaseProps(restProps);\n  const isRefresh = useVisualRefresh();\n  const assignHeaderId = useContext(CollectionLabelContext).assignId;\n  const isInContainer = useContainerHeader();\n  const headingId = useUniqueId('heading');\n  if (assignHeaderId !== undefined) {\n    assignHeaderId(headingId);\n  }\n  // If is mobile there is no need to have the dynamic variant because it's scrolled out of view\n  const dynamicVariant = !isMobile && isStuck ? 'h2' : 'h1';\n  const variantOverride = variant === 'awsui-h1-sticky' ? (isRefresh ? dynamicVariant : 'h2') : variant;\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        styles[`root-variant-${variantOverride}`],\n        isRefresh && styles.refresh,\n        !actions && [styles[`root-no-actions`]],\n        description && [styles[`root-has-description`]]\n      )}\n      ref={__internalRootRef}\n    >\n      <div\n        className={clsx(\n          styles.main,\n          styles[`main-variant-${variantOverride}`],\n          isRefresh && styles.refresh,\n          __disableActionsWrapping && [styles['no-wrap']]\n        )}\n      >\n        <div className={clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles.refresh)}>\n          <HeadingTag\n            className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}\n            {...getAnalyticsLabelAttribute(`.${analyticsSelectors['heading-text']}`)}\n          >\n            <span\n              {...(isInContainer ? { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_SUBSTEP_NAME } : {})}\n              className={clsx(\n                styles['heading-text'],\n                analyticsSelectors['heading-text'],\n                styles[`heading-text-variant-${variantOverride}`]\n              )}\n              id={headingId}\n            >\n              {children}\n            </span>\n            {counter !== undefined && <span className={styles.counter}> {counter}</span>}\n          </HeadingTag>\n          {info && (\n            <InfoLinkLabelContext.Provider value={headingId}>\n              {/* Exists to create a space between heading text and info so that a double-click selection on the last word of the heading doesn't also include info */}\n              <span className={styles['virtual-space']}> &nbsp;</span>\n              <span className={styles.info}>{info}</span>\n            </InfoLinkLabelContext.Provider>\n          )}\n        </div>\n        {actions && (\n          <div\n            className={clsx(\n              styles.actions,\n              styles[`actions-variant-${variantOverride}`],\n              isRefresh && styles.refresh,\n              !__disableActionsWrapping && [styles['actions-centered']]\n            )}\n          >\n            {actions}\n          </div>\n        )}\n      </div>\n      <Description variantOverride={variantOverride}>{description}</Description>\n    </div>\n  );\n}\n\nexport function Description({ children, variantOverride }: { children: React.ReactNode; variantOverride: string }) {\n  const isRefresh = useVisualRefresh();\n  return (\n    (children && (\n      <p\n        className={clsx(\n          styles.description,\n          styles[`description-variant-${variantOverride}`],\n          isRefresh && styles.refresh\n        )}\n      >\n        {children}\n      </p>\n    )) ||\n    null\n  );\n}\n"]}

package/lib/internal/template/help-panel/implementation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/help-panel/implementation.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAAG,0BAA0B,CAAC;AAEjF,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,sBAAsB,eAsBxB;AAED,eAAO,MAAM,yBAAyB,yFAAqD,CAAC"}
+{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/help-panel/implementation.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAAG,0BAA0B,CAAC;AAEjF,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,sBAAsB,eAuBxB;AAED,eAAO,MAAM,yBAAyB,yFAAqD,CAAC"}

package/lib/internal/template/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/lib/internal/template/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/lib/internal/template/help-panel/styles.css.js

@@ -1,9 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "help-panel": "awsui_help-panel_1d237_1eixv_97",
-  "header": "awsui_header_1d237_1eixv_268",
-  "content": "awsui_content_1d237_1eixv_301",
-  "footer": "awsui_footer_1d237_1eixv_349"
+  "help-panel": "awsui_help-panel_1d237_cqzlj_97",
+  "with-toolbar": "awsui_with-toolbar_1d237_cqzlj_138",
+  "header": "awsui_header_1d237_cqzlj_272",
+  "content": "awsui_content_1d237_cqzlj_310",
+  "footer": "awsui_footer_1d237_cqzlj_358"
 };
   

package/lib/internal/template/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_1eixv_97:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_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_1eixv_97 hr:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97.awsui_with-toolbar_1d237_cqzlj_138:not(#\9) {
+  padding-block-start: var(--space-static-m-qndr1s, 16px);
+}
+.awsui_help-panel_1d237_cqzlj_97 hr:not(#\9) {
   border-block: none;
   border-inline: none;
   border-block-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
   margin-block: var(--space-scaled-xl-rljqft, 24px);
   margin-inline: calc(-1 * var(--space-panel-divider-margin-horizontal-2jmfkj, 12px));
 }
-.awsui_help-panel_1d237_1eixv_97 ol:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 ul:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 ol:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 ul:not(#\9) {
   padding-inline-start: var(--space-l-xu1x80, 20px);
   list-style-position: outside;
   margin-block: var(--space-s-2025hl, 12px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_1eixv_97 li:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 li:not(#\9) {
   margin-block: var(--space-scaled-xxs-t7ij38, 4px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_1eixv_97 a:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 h2:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 h3:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 h4:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 h5:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 pre:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 code:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 a:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 h2:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 h3:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 h4:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 h5:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 pre:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 code:not(#\9) {
   margin-block: var(--space-xs-xf5ch3, 8px);
   margin-inline: 0;
   padding-block: 0;
 }
-.awsui_help-panel_1d237_1eixv_97 code:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 code:not(#\9) {
   font-size: var(--font-size-body-s-533prh, 12px);
   line-height: var(--line-height-body-s-n0pazd, 16px);
   letter-spacing: var(--letter-spacing-body-s-nkvets, normal);
@@ -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_1eixv_97 pre:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 pre:not(#\9) {
   font-size: var(--font-size-body-s-533prh, 12px);
   line-height: var(--line-height-body-s-n0pazd, 16px);
   letter-spacing: var(--letter-spacing-body-s-nkvets, normal);
@@ -189,41 +192,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-xxs-9rrxti, 4px);
   padding-inline: var(--space-xxs-9rrxti, 4px);
 }
-.awsui_help-panel_1d237_1eixv_97 dl:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 dl:not(#\9) {
   margin-block: var(--space-s-2025hl, 12px);
   margin-inline: 0;
   /* stylelint-disable-next-line selector-max-universal */
 }
-.awsui_help-panel_1d237_1eixv_97 dl *:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 dl *:not(#\9) {
   margin-block: 0;
 }
-.awsui_help-panel_1d237_1eixv_97 dt:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 dt:not(#\9) {
   margin-block-start: var(--space-xs-xf5ch3, 8px);
   font-weight: 700;
 }
-.awsui_help-panel_1d237_1eixv_97 dd:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 dd:not(#\9) {
   margin-block-start: 0;
   margin-block-end: var(--space-xs-xf5ch3, 8px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_1eixv_97 h2:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 h3:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 h4:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 h5:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 h6:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 h2:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 h3:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 h4:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 h5:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 h6:not(#\9) {
   margin-block-start: var(--space-xl-5fdwzu, 24px);
   color: var(--color-text-heading-default-tsgvby, #16191f);
 }
-.awsui_help-panel_1d237_1eixv_97 > :not(#\9):last-child {
+.awsui_help-panel_1d237_cqzlj_97 > :not(#\9):last-child {
   margin-block-end: var(--space-panel-content-bottom-a67jcq, 40px);
 }
-.awsui_help-panel_1d237_1eixv_97 p:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 p:not(#\9) {
   color: inherit;
   text-decoration: none;
   margin-block: var(--space-s-2025hl, 12px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_1eixv_97 h1:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 h1:not(#\9) {
   font-size: var(--font-size-heading-xl-k9a0qt, 28px);
   line-height: var(--line-height-heading-xl-v9hsvt, 36px);
   letter-spacing: var(--letter-spacing-heading-xl-87t96e, normal);
@@ -231,7 +234,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-8fiijr, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-fw8n0n, auto);
 }
-.awsui_help-panel_1d237_1eixv_97 h2:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 h2:not(#\9) {
   font-size: var(--font-size-heading-l-l21r86, 18px);
   line-height: var(--line-height-heading-l-vog8w7, 22px);
   letter-spacing: var(--letter-spacing-heading-l-bejyzw, normal);
@@ -239,7 +242,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-8fiijr, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-fw8n0n, auto);
 }
-.awsui_help-panel_1d237_1eixv_97 h3:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 h3:not(#\9) {
   font-size: var(--font-size-heading-m-io97me, 18px);
   line-height: var(--line-height-heading-m-6mmwjh, 22px);
   letter-spacing: var(--letter-spacing-heading-m-kfwhdw, normal);
@@ -247,7 +250,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-8fiijr, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-fw8n0n, auto);
 }
-.awsui_help-panel_1d237_1eixv_97 h4:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 h4:not(#\9) {
   font-size: var(--font-size-heading-s-w1c4ce, 16px);
   line-height: var(--line-height-heading-s-h0lds9, 20px);
   letter-spacing: var(--letter-spacing-heading-s-badvkb, normal);
@@ -255,18 +258,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-8fiijr, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-fw8n0n, auto);
 }
-.awsui_help-panel_1d237_1eixv_97 h5:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 h5:not(#\9) {
   font-size: var(--font-size-heading-xs-pz04z3, 16px);
   line-height: var(--line-height-heading-xs-jsenn1, 20px);
   font-weight: var(--font-weight-heading-xs-lfmr92, 400);
   -webkit-font-smoothing: var(--font-smoothing-webkit-8fiijr, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-fw8n0n, auto);
 }
-.awsui_help-panel_1d237_1eixv_97 b:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 strong:not(#\9) {
+.awsui_help-panel_1d237_cqzlj_97 b:not(#\9),
+.awsui_help-panel_1d237_cqzlj_97 strong:not(#\9) {
   font-weight: 700;
 }
-.awsui_help-panel_1d237_1eixv_97 > .awsui_header_1d237_1eixv_268:not(#\9) {
+
+.awsui_header_1d237_cqzlj_272:not(#\9) {
   font-size: var(--font-panel-header-size-tbwmfr, 18px);
   line-height: var(--font-panel-header-line-height-leujyg, 22px);
   font-weight: var(--font-weight-heading-l-1hf845, 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_1eixv_97 > .awsui_header_1d237_1eixv_268 h2:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 > .awsui_header_1d237_1eixv_268 h3:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 > .awsui_header_1d237_1eixv_268 h4:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 > .awsui_header_1d237_1eixv_268 h5:not(#\9),
-.awsui_help-panel_1d237_1eixv_97 > .awsui_header_1d237_1eixv_268 h6:not(#\9) {
+.awsui_with-toolbar_1d237_cqzlj_138 > .awsui_header_1d237_cqzlj_272:not(#\9) {
+  border-color: transparent;
+  padding-block-end: var(--space-static-m-qndr1s, 16px);
+  margin-block-end: 0px;
+}
+.awsui_header_1d237_cqzlj_272 h2:not(#\9),
+.awsui_header_1d237_cqzlj_272 h3:not(#\9),
+.awsui_header_1d237_cqzlj_272 h4:not(#\9),
+.awsui_header_1d237_cqzlj_272 h5:not(#\9),
+.awsui_header_1d237_cqzlj_272 h6:not(#\9) {
   font-size: var(--font-panel-header-size-tbwmfr, 18px);
   line-height: var(--font-panel-header-line-height-leujyg, 22px);
   font-weight: var(--font-weight-heading-l-1hf845, 700);
@@ -299,19 +308,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: 0;
 }
 
-.awsui_content_1d237_1eixv_301:not(#\9) {
+.awsui_content_1d237_cqzlj_310:not(#\9) {
   color: var(--color-text-body-secondary-6ysfsn, #545b64);
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
-.awsui_content_1d237_1eixv_301 h2:not(#\9):first-child,
-.awsui_content_1d237_1eixv_301 h3:not(#\9):first-child,
-.awsui_content_1d237_1eixv_301 h4:not(#\9):first-child,
-.awsui_content_1d237_1eixv_301 h5:not(#\9):first-child,
-.awsui_content_1d237_1eixv_301 h6:not(#\9):first-child {
+.awsui_content_1d237_cqzlj_310 h2:not(#\9):first-child,
+.awsui_content_1d237_cqzlj_310 h3:not(#\9):first-child,
+.awsui_content_1d237_cqzlj_310 h4:not(#\9):first-child,
+.awsui_content_1d237_cqzlj_310 h5:not(#\9):first-child,
+.awsui_content_1d237_cqzlj_310 h6:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_content_1d237_1eixv_301 a:not(#\9) {
+.awsui_content_1d237_cqzlj_310 a:not(#\9) {
   color: var(--color-text-link-default-hop3gv, #0073bb);
   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_1eixv_301 a:not(#\9) {
+  .awsui_content_1d237_cqzlj_310 a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content_1d237_1eixv_301 a:not(#\9), .awsui-mode-entering .awsui_content_1d237_1eixv_301 a:not(#\9) {
+.awsui-motion-disabled .awsui_content_1d237_cqzlj_310 a:not(#\9), .awsui-mode-entering .awsui_content_1d237_cqzlj_310 a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_content_1d237_1eixv_301 a:not(#\9):hover {
+.awsui_content_1d237_cqzlj_310 a:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_content_1d237_1eixv_301 a:not(#\9):focus {
+.awsui_content_1d237_cqzlj_310 a:not(#\9):focus {
   outline: none;
 }
-.awsui_content_1d237_1eixv_301 a:not(#\9):active {
+.awsui_content_1d237_cqzlj_310 a:not(#\9):active {
   color: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_content_1d237_1eixv_301 a:not(#\9):active, .awsui_content_1d237_1eixv_301 a:not(#\9):focus, .awsui_content_1d237_1eixv_301 a:not(#\9):hover {
+.awsui_content_1d237_cqzlj_310 a:not(#\9):active, .awsui_content_1d237_cqzlj_310 a:not(#\9):focus, .awsui_content_1d237_cqzlj_310 a:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
 
-.awsui_footer_1d237_1eixv_349:not(#\9) {
+.awsui_footer_1d237_cqzlj_358:not(#\9) {
   color: var(--color-text-body-secondary-6ysfsn, #545b64);
   border-block-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
   margin-block: var(--space-scaled-xl-rljqft, 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_1eixv_349 > :not(#\9):first-child {
+.awsui_footer_1d237_cqzlj_358 > :not(#\9):first-child {
   margin-block-start: var(--space-scaled-xl-rljqft, 24px);
 }
-.awsui_footer_1d237_1eixv_349 ul:not(#\9) {
+.awsui_footer_1d237_cqzlj_358 ul:not(#\9) {
   list-style: none;
   padding-inline-start: 0;
 }
-.awsui_footer_1d237_1eixv_349 a:not(#\9) {
+.awsui_footer_1d237_cqzlj_358 a:not(#\9) {
   color: var(--color-text-link-default-hop3gv, #0073bb);
   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_1eixv_349 a:not(#\9) {
+  .awsui_footer_1d237_cqzlj_358 a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_footer_1d237_1eixv_349 a:not(#\9), .awsui-mode-entering .awsui_footer_1d237_1eixv_349 a:not(#\9) {
+.awsui-motion-disabled .awsui_footer_1d237_cqzlj_358 a:not(#\9), .awsui-mode-entering .awsui_footer_1d237_cqzlj_358 a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_footer_1d237_1eixv_349 a:not(#\9):hover {
+.awsui_footer_1d237_cqzlj_358 a:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_footer_1d237_1eixv_349 a:not(#\9):focus {
+.awsui_footer_1d237_cqzlj_358 a:not(#\9):focus {
   outline: none;
 }
-.awsui_footer_1d237_1eixv_349 a:not(#\9):active {
+.awsui_footer_1d237_cqzlj_358 a:not(#\9):active {
   color: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_footer_1d237_1eixv_349 a:not(#\9):active, .awsui_footer_1d237_1eixv_349 a:not(#\9):focus, .awsui_footer_1d237_1eixv_349 a:not(#\9):hover {
+.awsui_footer_1d237_cqzlj_358 a:not(#\9):active, .awsui_footer_1d237_cqzlj_358 a:not(#\9):focus, .awsui_footer_1d237_cqzlj_358 a:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
 
-.awsui_content_1d237_1eixv_301:not(#\9),
-.awsui_footer_1d237_1eixv_349:not(#\9) {
+.awsui_content_1d237_cqzlj_310:not(#\9),
+.awsui_footer_1d237_cqzlj_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_1eixv_301 a:not(#\9):focus,
-.awsui_footer_1d237_1eixv_349 a:not(#\9):focus {
+.awsui_content_1d237_cqzlj_310 a:not(#\9):focus,
+.awsui_footer_1d237_cqzlj_358 a:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-gygm43, 5px auto Highlight);
   outline-offset: 2px;

package/lib/internal/template/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_1eixv_97",
-  "header": "awsui_header_1d237_1eixv_268",
-  "content": "awsui_content_1d237_1eixv_301",
-  "footer": "awsui_footer_1d237_1eixv_349"
+  "help-panel": "awsui_help-panel_1d237_cqzlj_97",
+  "with-toolbar": "awsui_with-toolbar_1d237_cqzlj_138",
+  "header": "awsui_header_1d237_cqzlj_272",
+  "content": "awsui_content_1d237_cqzlj_310",
+  "footer": "awsui_footer_1d237_cqzlj_358"
 };
   

package/lib/internal/template/internal/components/button-trigger/styles.css.js

@@ -1,16 +1,16 @@
 
     import './styles.scoped.css';
     export default {
-  "button-trigger": "awsui_button-trigger_18eso_svu85_101",
-  "arrow": "awsui_arrow_18eso_svu85_101",
-  "has-caret": "awsui_has-caret_18eso_svu85_168",
-  "placeholder": "awsui_placeholder_18eso_svu85_171",
-  "pressed": "awsui_pressed_18eso_svu85_184",
-  "disabled": "awsui_disabled_18eso_svu85_187",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_svu85_197",
-  "readonly": "awsui_readonly_18eso_svu85_203",
-  "invalid": "awsui_invalid_18eso_svu85_225",
-  "warning": "awsui_warning_18eso_svu85_236",
-  "inline-tokens": "awsui_inline-tokens_18eso_svu85_274"
+  "button-trigger": "awsui_button-trigger_18eso_9hg0q_101",
+  "arrow": "awsui_arrow_18eso_9hg0q_101",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_9hg0q_168",
+  "has-caret": "awsui_has-caret_18eso_9hg0q_198",
+  "placeholder": "awsui_placeholder_18eso_9hg0q_201",
+  "pressed": "awsui_pressed_18eso_9hg0q_214",
+  "disabled": "awsui_disabled_18eso_9hg0q_217",
+  "readonly": "awsui_readonly_18eso_9hg0q_233",
+  "invalid": "awsui_invalid_18eso_9hg0q_255",
+  "warning": "awsui_warning_18eso_9hg0q_266",
+  "inline-tokens": "awsui_inline-tokens_18eso_9hg0q_277"
 };