@cloudscape-design/components-themeable 3.0.826 → 3.0.828

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/constants.scss +1 -1
  3. package/lib/internal/scss/drawer/styles.scss +7 -11
  4. package/lib/internal/scss/help-panel/styles.scss +11 -16
  5. package/lib/internal/scss/side-navigation/styles.scss +23 -10
  6. package/lib/internal/template/app-layout/{runtime-api.d.ts → runtime-drawer/index.d.ts} +3 -3
  7. package/lib/internal/template/app-layout/runtime-drawer/index.d.ts.map +1 -0
  8. package/lib/internal/template/app-layout/{runtime-api.js → runtime-drawer/index.js} +30 -6
  9. package/lib/internal/template/app-layout/runtime-drawer/index.js.map +1 -0
  10. package/lib/internal/template/app-layout/utils/use-drawers.js +1 -1
  11. package/lib/internal/template/app-layout/utils/use-drawers.js.map +1 -1
  12. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +10 -10
  13. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +13 -13
  14. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +10 -10
  15. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
  16. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +6 -6
  17. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
  18. package/lib/internal/template/drawer/implementation.js +1 -1
  19. package/lib/internal/template/drawer/implementation.js.map +1 -1
  20. package/lib/internal/template/drawer/styles.css.js +5 -4
  21. package/lib/internal/template/drawer/styles.scoped.css +16 -20
  22. package/lib/internal/template/drawer/styles.selectors.js +5 -4
  23. package/lib/internal/template/help-panel/implementation.d.ts.map +1 -1
  24. package/lib/internal/template/help-panel/implementation.js +4 -2
  25. package/lib/internal/template/help-panel/implementation.js.map +1 -1
  26. package/lib/internal/template/help-panel/styles.css.js +6 -5
  27. package/lib/internal/template/help-panel/styles.scoped.css +75 -80
  28. package/lib/internal/template/help-panel/styles.selectors.js +6 -5
  29. package/lib/internal/template/internal/environment.js +1 -1
  30. package/lib/internal/template/internal/environment.json +1 -1
  31. package/lib/internal/template/internal/plugins/helpers/index.d.ts +0 -1
  32. package/lib/internal/template/internal/plugins/helpers/index.d.ts.map +1 -1
  33. package/lib/internal/template/internal/plugins/helpers/index.js +0 -1
  34. package/lib/internal/template/internal/plugins/helpers/index.js.map +1 -1
  35. package/lib/internal/template/internal/plugins/helpers/use-discovered-action.d.ts.map +1 -1
  36. package/lib/internal/template/internal/plugins/helpers/use-discovered-action.js +13 -2
  37. package/lib/internal/template/internal/plugins/helpers/use-discovered-action.js.map +1 -1
  38. package/lib/internal/template/side-navigation/styles.css.js +30 -30
  39. package/lib/internal/template/side-navigation/styles.scoped.css +65 -48
  40. package/lib/internal/template/side-navigation/styles.selectors.js +30 -30
  41. package/lib/internal/template/split-panel/styles.css.js +26 -26
  42. package/lib/internal/template/split-panel/styles.scoped.css +45 -45
  43. package/lib/internal/template/split-panel/styles.selectors.js +26 -26
  44. package/package.json +1 -1
  45. package/lib/internal/template/app-layout/runtime-api.d.ts.map +0 -1
  46. package/lib/internal/template/app-layout/runtime-api.js.map +0 -1
  47. package/lib/internal/template/internal/plugins/helpers/runtime-content-wrapper.d.ts +0 -10
  48. package/lib/internal/template/internal/plugins/helpers/runtime-content-wrapper.d.ts.map +0 -1
  49. package/lib/internal/template/internal/plugins/helpers/runtime-content-wrapper.js +0 -29
  50. package/lib/internal/template/internal/plugins/helpers/runtime-content-wrapper.js.map +0 -1
package/lib/internal/template/drawer/styles.css.js CHANGED
@@ -1,9 +1,10 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "drawer": "awsui_drawer_1sxt8_190p7_177",
5
- "with-toolbar": "awsui_with-toolbar_1sxt8_190p7_216",
6
- "header": "awsui_header_1sxt8_190p7_220",
7
- "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_190p7_256"
4
+ "drawer": "awsui_drawer_1sxt8_11t5u_177",
5
+ "header": "awsui_header_1sxt8_11t5u_213",
6
+ "with-toolbar": "awsui_with-toolbar_1sxt8_11t5u_228",
7
+ "content": "awsui_content_1sxt8_11t5u_246",
8
+ "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_11t5u_252"
8
9
  };
9
10
 
package/lib/internal/template/drawer/styles.scoped.css CHANGED
@@ -174,7 +174,7 @@
174
174
  */
175
175
  /* Style used for links in slots/components that are text heavy, to help links stand out among
176
176
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
177
- .awsui_drawer_1sxt8_190p7_177:not(#\9) {
177
+ .awsui_drawer_1sxt8_11t5u_177:not(#\9) {
178
178
  border-collapse: separate;
179
179
  border-spacing: 0;
180
180
  box-sizing: border-box;
@@ -209,42 +209,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
209
209
  -webkit-font-smoothing: auto;
210
210
  -moz-osx-font-smoothing: auto;
211
211
  word-wrap: break-word;
212
- padding-block-start: var(--space-panel-header-vertical-d3wku0, 20px);
213
- padding-block-end: var(--space-panel-content-bottom-attpcy, 40px);
214
- padding-inline-start: var(--space-panel-side-left-1i2jyv, 32px);
215
- padding-inline-end: var(--space-panel-side-right-otvpm8, 32px);
216
- }
217
- .awsui_drawer_1sxt8_190p7_177.awsui_with-toolbar_1sxt8_190p7_216:not(#\9) {
218
- padding-block-start: var(--space-static-m-rufxr5, 16px);
219
212
  }
220
213
 
221
- .awsui_header_1sxt8_190p7_220:not(#\9) {
214
+ .awsui_header_1sxt8_11t5u_213:not(#\9) {
222
215
  font-size: var(--font-panel-header-size-197c0y, 18px);
223
216
  line-height: var(--font-panel-header-line-height-av95ns, 22px);
224
217
  font-weight: var(--font-weight-heading-l-ypbqtk, 700);
225
218
  -webkit-font-smoothing: var(--font-smoothing-webkit-trr1e8, auto);
226
219
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hyxkxc, auto);
227
220
  color: var(--color-text-heading-default-8wpkvf, #16191f);
228
- padding-block-end: var(--space-panel-header-vertical-d3wku0, 20px);
221
+ padding-block: var(--space-panel-header-vertical-d3wku0, 20px);
229
222
  padding-inline: var(--space-panel-side-left-1i2jyv, 32px) calc(var(--space-xl-vss8pc, 24px) + var(--space-scaled-xxl-6fqphi, 32px));
230
223
  border-block-end: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-panel-header-q2vg1j, #eaeded);
231
224
  margin-block-start: 0;
232
225
  margin-block-end: var(--space-panel-content-top-rr28ru, 20px);
233
- margin-inline-end: calc(-1 * var(--space-panel-side-right-otvpm8, 32px));
234
- margin-inline-start: calc(-1 * var(--space-panel-side-left-1i2jyv, 32px));
235
226
  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
236
227
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
237
228
  }
238
- .awsui_with-toolbar_1sxt8_190p7_216 > .awsui_header_1sxt8_190p7_220:not(#\9) {
229
+ .awsui_with-toolbar_1sxt8_11t5u_228 > .awsui_header_1sxt8_11t5u_213:not(#\9) {
239
230
  border-color: transparent;
240
- padding-block-end: var(--space-static-m-rufxr5, 16px);
241
231
  margin-block-end: 0px;
242
232
  }
243
- .awsui_header_1sxt8_190p7_220 h2:not(#\9),
244
- .awsui_header_1sxt8_190p7_220 h3:not(#\9),
245
- .awsui_header_1sxt8_190p7_220 h4:not(#\9),
246
- .awsui_header_1sxt8_190p7_220 h5:not(#\9),
247
- .awsui_header_1sxt8_190p7_220 h6:not(#\9) {
233
+ .awsui_header_1sxt8_11t5u_213 h2:not(#\9),
234
+ .awsui_header_1sxt8_11t5u_213 h3:not(#\9),
235
+ .awsui_header_1sxt8_11t5u_213 h4:not(#\9),
236
+ .awsui_header_1sxt8_11t5u_213 h5:not(#\9),
237
+ .awsui_header_1sxt8_11t5u_213 h6:not(#\9) {
248
238
  font-size: var(--font-panel-header-size-197c0y, 18px);
249
239
  line-height: var(--font-panel-header-line-height-av95ns, 22px);
250
240
  font-weight: var(--font-weight-heading-l-ypbqtk, 700);
@@ -254,6 +244,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
254
244
  margin-block: 0;
255
245
  }
256
246
 
257
- .awsui_test-utils-drawer-content_1sxt8_190p7_256:not(#\9) {
247
+ .awsui_content_1sxt8_11t5u_246:not(#\9):not(:empty) {
248
+ padding-inline-start: var(--space-panel-side-left-1i2jyv, 32px);
249
+ padding-inline-end: var(--space-panel-side-right-otvpm8, 32px);
250
+ padding-block-end: var(--space-panel-content-bottom-attpcy, 40px);
251
+ }
252
+
253
+ .awsui_test-utils-drawer-content_1sxt8_11t5u_252:not(#\9) {
258
254
  /* used in test-utils */
259
255
  }
package/lib/internal/template/drawer/styles.selectors.js CHANGED
@@ -2,9 +2,10 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "drawer": "awsui_drawer_1sxt8_190p7_177",
6
- "with-toolbar": "awsui_with-toolbar_1sxt8_190p7_216",
7
- "header": "awsui_header_1sxt8_190p7_220",
8
- "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_190p7_256"
5
+ "drawer": "awsui_drawer_1sxt8_11t5u_177",
6
+ "header": "awsui_header_1sxt8_11t5u_213",
7
+ "with-toolbar": "awsui_with-toolbar_1sxt8_11t5u_228",
8
+ "content": "awsui_content_1sxt8_11t5u_246",
9
+ "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_11t5u_252"
9
10
  };
10
11
 
package/lib/internal/template/help-panel/implementation.d.ts.map CHANGED
@@ -1 +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;AAIlF,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"}
1
+ {"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/help-panel/implementation.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,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,eAiCxB;AAED,eAAO,MAAM,yBAAyB,yFAAqD,CAAC"}
package/lib/internal/template/help-panel/implementation.js CHANGED
@@ -16,14 +16,16 @@ export function HelpPanelImplementation(_a) {
16
16
  const baseProps = getBaseProps(restProps);
17
17
  const isToolbar = useAppLayoutToolbarEnabled();
18
18
  const i18n = useInternalI18n('help-panel');
19
- const containerProps = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles['help-panel'], isToolbar && styles['with-toolbar']) });
19
+ const containerProps = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles['help-panel'], isToolbar && styles['with-toolbar'], loading && styles.loading) });
20
20
  return loading ? (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
21
21
  React.createElement(InternalStatusIndicator, { type: "loading" },
22
22
  React.createElement(InternalLiveRegion, { tagName: "span" }, i18n('loadingText', loadingText))))) : (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
23
23
  header && React.createElement("div", { className: clsx(styles.header) }, header),
24
24
  React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
25
25
  React.createElement("div", { className: styles.content }, children)),
26
- footer && React.createElement("div", { className: styles.footer }, footer)));
26
+ footer && (React.createElement("div", { className: styles.footer },
27
+ React.createElement("hr", { role: "presentation" }),
28
+ footer))));
27
29
  }
28
30
  export const createWidgetizedHelpPanel = createWidgetizedComponent(HelpPanelImplementation);
29
31
  //# sourceMappingURL=implementation.js.map
package/lib/internal/template/help-panel/implementation.js.map CHANGED
@@ -1 +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,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAE7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,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,SAAS,GAAG,0BAA0B,EAAE,CAAC;IAC/C,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,EAAE,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,GAChG,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAsB,CAClE,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 { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\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 isToolbar = useAppLayoutToolbarEnabled();\n const i18n = useInternalI18n('help-panel');\n const containerProps = {\n ...baseProps,\n className: clsx(baseProps.className, styles['help-panel'], isToolbar && styles['with-toolbar']),\n };\n return loading ? (\n <div {...containerProps} ref={__internalRootRef}>\n <InternalStatusIndicator type=\"loading\">\n <InternalLiveRegion tagName=\"span\">{i18n('loadingText', loadingText)}</InternalLiveRegion>\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"]}
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,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAE7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,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,SAAS,GAAG,0BAA0B,EAAE,CAAC;IAC/C,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,YAAY,CAAC,EACpB,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,EACnC,OAAO,IAAI,MAAM,CAAC,OAAO,CAC1B,GACF,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAsB,CAClE,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,CACT,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,4BAAI,IAAI,EAAC,cAAc,GAAG;YACzB,MAAM,CACH,CACP,CACG,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 { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\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 isToolbar = useAppLayoutToolbarEnabled();\n const i18n = useInternalI18n('help-panel');\n const containerProps = {\n ...baseProps,\n className: clsx(\n baseProps.className,\n styles['help-panel'],\n isToolbar && styles['with-toolbar'],\n loading && styles.loading\n ),\n };\n return loading ? (\n <div {...containerProps} ref={__internalRootRef}>\n <InternalStatusIndicator type=\"loading\">\n <InternalLiveRegion tagName=\"span\">{i18n('loadingText', loadingText)}</InternalLiveRegion>\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 && (\n <div className={styles.footer}>\n <hr role=\"presentation\" />\n {footer}\n </div>\n )}\n </div>\n );\n}\n\nexport const createWidgetizedHelpPanel = createWidgetizedComponent(HelpPanelImplementation);\n"]}
package/lib/internal/template/help-panel/styles.css.js CHANGED
@@ -1,10 +1,11 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "help-panel": "awsui_help-panel_1d237_1580q_177",
5
- "with-toolbar": "awsui_with-toolbar_1d237_1580q_218",
6
- "header": "awsui_header_1d237_1580q_352",
7
- "content": "awsui_content_1d237_1580q_390",
8
- "footer": "awsui_footer_1d237_1580q_438"
4
+ "help-panel": "awsui_help-panel_1d237_rcn2t_177",
5
+ "loading": "awsui_loading_1d237_rcn2t_347",
6
+ "header": "awsui_header_1d237_rcn2t_352",
7
+ "with-toolbar": "awsui_with-toolbar_1d237_rcn2t_369",
8
+ "content": "awsui_content_1d237_rcn2t_387",
9
+ "footer": "awsui_footer_1d237_rcn2t_438"
9
10
  };
10
11
 
package/lib/internal/template/help-panel/styles.scoped.css CHANGED
@@ -174,7 +174,7 @@
174
174
  */
175
175
  /* Style used for links in slots/components that are text heavy, to help links stand out among
176
176
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
177
- .awsui_help-panel_1d237_1580q_177:not(#\9) {
177
+ .awsui_help-panel_1d237_rcn2t_177:not(#\9) {
178
178
  border-collapse: separate;
179
179
  border-spacing: 0;
180
180
  box-sizing: border-box;
@@ -211,44 +211,39 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
211
211
  word-wrap: break-word;
212
212
  padding-block-start: var(--space-panel-header-vertical-d3wku0, 20px);
213
213
  padding-block-end: 0;
214
- padding-inline-end: var(--space-panel-side-right-otvpm8, 32px);
215
- padding-inline-start: var(--space-panel-side-left-1i2jyv, 32px);
216
214
  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
217
215
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
218
216
  }
219
- .awsui_help-panel_1d237_1580q_177.awsui_with-toolbar_1d237_1580q_218:not(#\9) {
220
- padding-block-start: var(--space-static-m-rufxr5, 16px);
221
- }
222
- .awsui_help-panel_1d237_1580q_177 hr:not(#\9) {
217
+ .awsui_help-panel_1d237_rcn2t_177 hr:not(#\9) {
223
218
  border-block: none;
224
219
  border-inline: none;
225
220
  border-block-start: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-divider-default-u5ytia, #eaeded);
226
221
  margin-block: var(--space-scaled-xl-etns6t, 24px);
227
222
  margin-inline: calc(-1 * var(--space-panel-divider-margin-horizontal-ugd64r, 12px));
228
223
  }
229
- .awsui_help-panel_1d237_1580q_177 ol:not(#\9),
230
- .awsui_help-panel_1d237_1580q_177 ul:not(#\9) {
224
+ .awsui_help-panel_1d237_rcn2t_177 ol:not(#\9),
225
+ .awsui_help-panel_1d237_rcn2t_177 ul:not(#\9) {
231
226
  padding-inline-start: var(--space-l-eenfqd, 20px);
232
227
  list-style-position: outside;
233
228
  margin-block: var(--space-s-vmutj3, 12px);
234
229
  margin-inline: 0;
235
230
  }
236
- .awsui_help-panel_1d237_1580q_177 li:not(#\9) {
231
+ .awsui_help-panel_1d237_rcn2t_177 li:not(#\9) {
237
232
  margin-block: var(--space-scaled-xxs-krq5fq, 4px);
238
233
  margin-inline: 0;
239
234
  }
240
- .awsui_help-panel_1d237_1580q_177 a:not(#\9),
241
- .awsui_help-panel_1d237_1580q_177 h2:not(#\9),
242
- .awsui_help-panel_1d237_1580q_177 h3:not(#\9),
243
- .awsui_help-panel_1d237_1580q_177 h4:not(#\9),
244
- .awsui_help-panel_1d237_1580q_177 h5:not(#\9),
245
- .awsui_help-panel_1d237_1580q_177 pre:not(#\9),
246
- .awsui_help-panel_1d237_1580q_177 code:not(#\9) {
235
+ .awsui_help-panel_1d237_rcn2t_177 a:not(#\9),
236
+ .awsui_help-panel_1d237_rcn2t_177 h2:not(#\9),
237
+ .awsui_help-panel_1d237_rcn2t_177 h3:not(#\9),
238
+ .awsui_help-panel_1d237_rcn2t_177 h4:not(#\9),
239
+ .awsui_help-panel_1d237_rcn2t_177 h5:not(#\9),
240
+ .awsui_help-panel_1d237_rcn2t_177 pre:not(#\9),
241
+ .awsui_help-panel_1d237_rcn2t_177 code:not(#\9) {
247
242
  margin-block: var(--space-xs-6dgkww, 8px);
248
243
  margin-inline: 0;
249
244
  padding-block: 0;
250
245
  }
251
- .awsui_help-panel_1d237_1580q_177 code:not(#\9) {
246
+ .awsui_help-panel_1d237_rcn2t_177 code:not(#\9) {
252
247
  font-size: var(--font-size-body-s-4dzx5q, 12px);
253
248
  line-height: var(--line-height-body-s-egzl4q, 16px);
254
249
  letter-spacing: var(--letter-spacing-body-s-cbaxyl, normal);
@@ -259,7 +254,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
259
254
  word-wrap: break-word;
260
255
  white-space: pre-wrap;
261
256
  }
262
- .awsui_help-panel_1d237_1580q_177 pre:not(#\9) {
257
+ .awsui_help-panel_1d237_rcn2t_177 pre:not(#\9) {
263
258
  font-size: var(--font-size-body-s-4dzx5q, 12px);
264
259
  line-height: var(--line-height-body-s-egzl4q, 16px);
265
260
  letter-spacing: var(--letter-spacing-body-s-cbaxyl, normal);
@@ -272,41 +267,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
272
267
  padding-block: var(--space-xxs-y2432o, 4px);
273
268
  padding-inline: var(--space-xxs-y2432o, 4px);
274
269
  }
275
- .awsui_help-panel_1d237_1580q_177 dl:not(#\9) {
270
+ .awsui_help-panel_1d237_rcn2t_177 dl:not(#\9) {
276
271
  margin-block: var(--space-s-vmutj3, 12px);
277
272
  margin-inline: 0;
278
273
  /* stylelint-disable-next-line selector-max-universal */
279
274
  }
280
- .awsui_help-panel_1d237_1580q_177 dl *:not(#\9) {
275
+ .awsui_help-panel_1d237_rcn2t_177 dl *:not(#\9) {
281
276
  margin-block: 0;
282
277
  }
283
- .awsui_help-panel_1d237_1580q_177 dt:not(#\9) {
278
+ .awsui_help-panel_1d237_rcn2t_177 dt:not(#\9) {
284
279
  margin-block-start: var(--space-xs-6dgkww, 8px);
285
280
  font-weight: 700;
286
281
  }
287
- .awsui_help-panel_1d237_1580q_177 dd:not(#\9) {
282
+ .awsui_help-panel_1d237_rcn2t_177 dd:not(#\9) {
288
283
  margin-block-start: 0;
289
284
  margin-block-end: var(--space-xs-6dgkww, 8px);
290
285
  margin-inline: 0;
291
286
  }
292
- .awsui_help-panel_1d237_1580q_177 h2:not(#\9),
293
- .awsui_help-panel_1d237_1580q_177 h3:not(#\9),
294
- .awsui_help-panel_1d237_1580q_177 h4:not(#\9),
295
- .awsui_help-panel_1d237_1580q_177 h5:not(#\9),
296
- .awsui_help-panel_1d237_1580q_177 h6:not(#\9) {
287
+ .awsui_help-panel_1d237_rcn2t_177 h2:not(#\9),
288
+ .awsui_help-panel_1d237_rcn2t_177 h3:not(#\9),
289
+ .awsui_help-panel_1d237_rcn2t_177 h4:not(#\9),
290
+ .awsui_help-panel_1d237_rcn2t_177 h5:not(#\9),
291
+ .awsui_help-panel_1d237_rcn2t_177 h6:not(#\9) {
297
292
  margin-block-start: var(--space-xl-vss8pc, 24px);
298
293
  color: var(--color-text-heading-default-8wpkvf, #16191f);
299
294
  }
300
- .awsui_help-panel_1d237_1580q_177 > :not(#\9):last-child {
295
+ .awsui_help-panel_1d237_rcn2t_177 > :not(#\9):last-child {
301
296
  margin-block-end: var(--space-panel-content-bottom-attpcy, 40px);
302
297
  }
303
- .awsui_help-panel_1d237_1580q_177 p:not(#\9) {
298
+ .awsui_help-panel_1d237_rcn2t_177 p:not(#\9) {
304
299
  color: inherit;
305
300
  text-decoration: none;
306
301
  margin-block: var(--space-s-vmutj3, 12px);
307
302
  margin-inline: 0;
308
303
  }
309
- .awsui_help-panel_1d237_1580q_177 h1:not(#\9) {
304
+ .awsui_help-panel_1d237_rcn2t_177 h1:not(#\9) {
310
305
  font-size: var(--font-size-heading-xl-93wrkf, 28px);
311
306
  line-height: var(--line-height-heading-xl-66u22x, 36px);
312
307
  letter-spacing: var(--letter-spacing-heading-xl-oxckqz, normal);
@@ -314,7 +309,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
314
309
  -webkit-font-smoothing: var(--font-smoothing-webkit-trr1e8, auto);
315
310
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hyxkxc, auto);
316
311
  }
317
- .awsui_help-panel_1d237_1580q_177 h2:not(#\9) {
312
+ .awsui_help-panel_1d237_rcn2t_177 h2:not(#\9) {
318
313
  font-size: var(--font-size-heading-l-51gng7, 18px);
319
314
  line-height: var(--line-height-heading-l-643aq3, 22px);
320
315
  letter-spacing: var(--letter-spacing-heading-l-ty6arx, normal);
@@ -322,7 +317,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
322
317
  -webkit-font-smoothing: var(--font-smoothing-webkit-trr1e8, auto);
323
318
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hyxkxc, auto);
324
319
  }
325
- .awsui_help-panel_1d237_1580q_177 h3:not(#\9) {
320
+ .awsui_help-panel_1d237_rcn2t_177 h3:not(#\9) {
326
321
  font-size: var(--font-size-heading-m-abxcoe, 18px);
327
322
  line-height: var(--line-height-heading-m-v86qsm, 22px);
328
323
  letter-spacing: var(--letter-spacing-heading-m-790tuq, normal);
@@ -330,7 +325,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
330
325
  -webkit-font-smoothing: var(--font-smoothing-webkit-trr1e8, auto);
331
326
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hyxkxc, auto);
332
327
  }
333
- .awsui_help-panel_1d237_1580q_177 h4:not(#\9) {
328
+ .awsui_help-panel_1d237_rcn2t_177 h4:not(#\9) {
334
329
  font-size: var(--font-size-heading-s-1xsp6b, 16px);
335
330
  line-height: var(--line-height-heading-s-av19j1, 20px);
336
331
  letter-spacing: var(--letter-spacing-heading-s-zr7975, normal);
@@ -338,19 +333,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
338
333
  -webkit-font-smoothing: var(--font-smoothing-webkit-trr1e8, auto);
339
334
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hyxkxc, auto);
340
335
  }
341
- .awsui_help-panel_1d237_1580q_177 h5:not(#\9) {
336
+ .awsui_help-panel_1d237_rcn2t_177 h5:not(#\9) {
342
337
  font-size: var(--font-size-heading-xs-grnyyg, 16px);
343
338
  line-height: var(--line-height-heading-xs-funjxm, 20px);
344
339
  font-weight: var(--font-weight-heading-xs-y5uryl, 400);
345
340
  -webkit-font-smoothing: var(--font-smoothing-webkit-trr1e8, auto);
346
341
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hyxkxc, auto);
347
342
  }
348
- .awsui_help-panel_1d237_1580q_177 b:not(#\9),
349
- .awsui_help-panel_1d237_1580q_177 strong:not(#\9) {
343
+ .awsui_help-panel_1d237_rcn2t_177 b:not(#\9),
344
+ .awsui_help-panel_1d237_rcn2t_177 strong:not(#\9) {
350
345
  font-weight: 700;
351
346
  }
352
347
 
353
- .awsui_header_1d237_1580q_352:not(#\9) {
348
+ .awsui_loading_1d237_rcn2t_347:not(#\9) {
349
+ padding-inline-start: var(--space-panel-side-left-1i2jyv, 32px);
350
+ padding-inline-end: var(--space-panel-side-right-otvpm8, 32px);
351
+ }
352
+
353
+ .awsui_header_1d237_rcn2t_352:not(#\9) {
354
354
  font-size: var(--font-panel-header-size-197c0y, 18px);
355
355
  line-height: var(--font-panel-header-line-height-av95ns, 22px);
356
356
  font-weight: var(--font-weight-heading-l-ypbqtk, 700);
@@ -364,21 +364,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
364
364
  border-block-end: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-panel-header-q2vg1j, #eaeded);
365
365
  margin-block-start: 0;
366
366
  margin-block-end: var(--space-panel-content-top-rr28ru, 20px);
367
- margin-inline-end: calc(-1 * var(--space-panel-side-right-otvpm8, 32px));
368
- margin-inline-start: calc(-1 * var(--space-panel-side-left-1i2jyv, 32px));
369
367
  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
370
368
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
371
369
  }
372
- .awsui_with-toolbar_1d237_1580q_218 > .awsui_header_1d237_1580q_352:not(#\9) {
370
+ .awsui_with-toolbar_1d237_rcn2t_369 > .awsui_header_1d237_rcn2t_352:not(#\9) {
373
371
  border-color: transparent;
374
- padding-block-end: var(--space-static-m-rufxr5, 16px);
375
372
  margin-block-end: 0px;
376
373
  }
377
- .awsui_header_1d237_1580q_352 h2:not(#\9),
378
- .awsui_header_1d237_1580q_352 h3:not(#\9),
379
- .awsui_header_1d237_1580q_352 h4:not(#\9),
380
- .awsui_header_1d237_1580q_352 h5:not(#\9),
381
- .awsui_header_1d237_1580q_352 h6:not(#\9) {
374
+ .awsui_header_1d237_rcn2t_352 h2:not(#\9),
375
+ .awsui_header_1d237_rcn2t_352 h3:not(#\9),
376
+ .awsui_header_1d237_rcn2t_352 h4:not(#\9),
377
+ .awsui_header_1d237_rcn2t_352 h5:not(#\9),
378
+ .awsui_header_1d237_rcn2t_352 h6:not(#\9) {
382
379
  font-size: var(--font-panel-header-size-197c0y, 18px);
383
380
  line-height: var(--font-panel-header-line-height-av95ns, 22px);
384
381
  font-weight: var(--font-weight-heading-l-ypbqtk, 700);
@@ -388,19 +385,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
388
385
  margin-block: 0;
389
386
  }
390
387
 
391
- .awsui_content_1d237_1580q_390:not(#\9) {
388
+ .awsui_content_1d237_rcn2t_387:not(#\9) {
392
389
  color: var(--color-text-body-secondary-z2wo4i, #545b64);
390
+ padding-inline-start: var(--space-panel-side-left-1i2jyv, 32px);
391
+ padding-inline-end: var(--space-panel-side-right-otvpm8, 32px);
393
392
  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
394
393
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
395
394
  }
396
- .awsui_content_1d237_1580q_390 h2:not(#\9):first-child,
397
- .awsui_content_1d237_1580q_390 h3:not(#\9):first-child,
398
- .awsui_content_1d237_1580q_390 h4:not(#\9):first-child,
399
- .awsui_content_1d237_1580q_390 h5:not(#\9):first-child,
400
- .awsui_content_1d237_1580q_390 h6:not(#\9):first-child {
395
+ .awsui_content_1d237_rcn2t_387 h2:not(#\9):first-child,
396
+ .awsui_content_1d237_rcn2t_387 h3:not(#\9):first-child,
397
+ .awsui_content_1d237_rcn2t_387 h4:not(#\9):first-child,
398
+ .awsui_content_1d237_rcn2t_387 h5:not(#\9):first-child,
399
+ .awsui_content_1d237_rcn2t_387 h6:not(#\9):first-child,
400
+ .awsui_content_1d237_rcn2t_387 p:not(#\9):first-child {
401
401
  margin-block-start: 0;
402
402
  }
403
- .awsui_content_1d237_1580q_390 a:not(#\9) {
403
+ .awsui_content_1d237_rcn2t_387 a:not(#\9) {
404
404
  text-underline-offset: 0.25em;
405
405
  text-decoration-thickness: 1px;
406
406
  color: var(--color-text-link-default-8s05yu, #0073bb);
@@ -414,48 +414,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
414
414
  transition-duration: var(--motion-duration-refresh-only-medium-kd6k1u, 0ms);
415
415
  }
416
416
  @media (prefers-reduced-motion: reduce) {
417
- .awsui_content_1d237_1580q_390 a:not(#\9) {
417
+ .awsui_content_1d237_rcn2t_387 a:not(#\9) {
418
418
  animation: none;
419
419
  transition: none;
420
420
  }
421
421
  }
422
- .awsui-motion-disabled .awsui_content_1d237_1580q_390 a:not(#\9), .awsui-mode-entering .awsui_content_1d237_1580q_390 a:not(#\9) {
422
+ .awsui-motion-disabled .awsui_content_1d237_rcn2t_387 a:not(#\9), .awsui-mode-entering .awsui_content_1d237_rcn2t_387 a:not(#\9) {
423
423
  animation: none;
424
424
  transition: none;
425
425
  }
426
- .awsui_content_1d237_1580q_390 a:not(#\9):hover {
426
+ .awsui_content_1d237_rcn2t_387 a:not(#\9):hover {
427
427
  cursor: pointer;
428
428
  color: var(--color-text-link-hover-jvu4dp, #0a4a74);
429
429
  }
430
- .awsui_content_1d237_1580q_390 a:not(#\9):focus {
430
+ .awsui_content_1d237_rcn2t_387 a:not(#\9):focus {
431
431
  outline: none;
432
432
  }
433
- .awsui_content_1d237_1580q_390 a:not(#\9):active {
433
+ .awsui_content_1d237_rcn2t_387 a:not(#\9):active {
434
434
  color: var(--color-text-link-hover-jvu4dp, #0a4a74);
435
435
  }
436
- .awsui_content_1d237_1580q_390 a:not(#\9):active, .awsui_content_1d237_1580q_390 a:not(#\9):focus, .awsui_content_1d237_1580q_390 a:not(#\9):hover {
436
+ .awsui_content_1d237_rcn2t_387 a:not(#\9):active, .awsui_content_1d237_rcn2t_387 a:not(#\9):focus, .awsui_content_1d237_rcn2t_387 a:not(#\9):hover {
437
437
  text-decoration-line: underline;
438
438
  text-decoration-color: currentColor;
439
439
  }
440
440
 
441
- .awsui_footer_1d237_1580q_438:not(#\9) {
441
+ .awsui_footer_1d237_rcn2t_438:not(#\9) {
442
442
  color: var(--color-text-body-secondary-z2wo4i, #545b64);
443
- border-block-start: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-divider-default-u5ytia, #eaeded);
444
- margin-block: var(--space-scaled-xl-etns6t, 24px);
445
- margin-inline: calc(-1 * var(--space-panel-divider-margin-horizontal-ugd64r, 12px));
446
443
  padding-block: 0;
447
- padding-inline: var(--space-panel-divider-margin-horizontal-ugd64r, 12px);
444
+ padding-inline-start: var(--space-panel-side-left-1i2jyv, 32px);
445
+ padding-inline-end: var(--space-panel-side-right-otvpm8, 32px);
448
446
  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
449
447
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
450
448
  }
451
- .awsui_footer_1d237_1580q_438 > :not(#\9):first-child {
452
- margin-block-start: var(--space-scaled-xl-etns6t, 24px);
453
- }
454
- .awsui_footer_1d237_1580q_438 ul:not(#\9) {
449
+ .awsui_footer_1d237_rcn2t_438 ul:not(#\9) {
455
450
  list-style: none;
456
451
  padding-inline-start: 0;
457
452
  }
458
- .awsui_footer_1d237_1580q_438 a:not(#\9) {
453
+ .awsui_footer_1d237_rcn2t_438 a:not(#\9) {
459
454
  text-underline-offset: 0.25em;
460
455
  text-decoration-thickness: 1px;
461
456
  color: var(--color-text-link-default-8s05yu, #0073bb);
@@ -469,37 +464,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
469
464
  transition-duration: var(--motion-duration-refresh-only-medium-kd6k1u, 0ms);
470
465
  }
471
466
  @media (prefers-reduced-motion: reduce) {
472
- .awsui_footer_1d237_1580q_438 a:not(#\9) {
467
+ .awsui_footer_1d237_rcn2t_438 a:not(#\9) {
473
468
  animation: none;
474
469
  transition: none;
475
470
  }
476
471
  }
477
- .awsui-motion-disabled .awsui_footer_1d237_1580q_438 a:not(#\9), .awsui-mode-entering .awsui_footer_1d237_1580q_438 a:not(#\9) {
472
+ .awsui-motion-disabled .awsui_footer_1d237_rcn2t_438 a:not(#\9), .awsui-mode-entering .awsui_footer_1d237_rcn2t_438 a:not(#\9) {
478
473
  animation: none;
479
474
  transition: none;
480
475
  }
481
- .awsui_footer_1d237_1580q_438 a:not(#\9):hover {
476
+ .awsui_footer_1d237_rcn2t_438 a:not(#\9):hover {
482
477
  cursor: pointer;
483
478
  color: var(--color-text-link-hover-jvu4dp, #0a4a74);
484
479
  }
485
- .awsui_footer_1d237_1580q_438 a:not(#\9):focus {
480
+ .awsui_footer_1d237_rcn2t_438 a:not(#\9):focus {
486
481
  outline: none;
487
482
  }
488
- .awsui_footer_1d237_1580q_438 a:not(#\9):active {
483
+ .awsui_footer_1d237_rcn2t_438 a:not(#\9):active {
489
484
  color: var(--color-text-link-hover-jvu4dp, #0a4a74);
490
485
  }
491
- .awsui_footer_1d237_1580q_438 a:not(#\9):active, .awsui_footer_1d237_1580q_438 a:not(#\9):focus, .awsui_footer_1d237_1580q_438 a:not(#\9):hover {
486
+ .awsui_footer_1d237_rcn2t_438 a:not(#\9):active, .awsui_footer_1d237_rcn2t_438 a:not(#\9):focus, .awsui_footer_1d237_rcn2t_438 a:not(#\9):hover {
492
487
  text-decoration-line: underline;
493
488
  text-decoration-color: currentColor;
494
489
  }
495
490
 
496
- .awsui_content_1d237_1580q_390:not(#\9),
497
- .awsui_footer_1d237_1580q_438:not(#\9) {
491
+ .awsui_content_1d237_rcn2t_387:not(#\9),
492
+ .awsui_footer_1d237_rcn2t_438:not(#\9) {
498
493
  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
499
494
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
500
495
  }
501
- .awsui_content_1d237_1580q_390 a:not(#\9):focus,
502
- .awsui_footer_1d237_1580q_438 a:not(#\9):focus {
496
+ .awsui_content_1d237_rcn2t_387 a:not(#\9):focus,
497
+ .awsui_footer_1d237_rcn2t_438 a:not(#\9):focus {
503
498
  outline: thin dotted;
504
499
  outline: var(--border-link-focus-ring-outline-bptw2p, 5px auto Highlight);
505
500
  outline-offset: 2px;
package/lib/internal/template/help-panel/styles.selectors.js CHANGED
@@ -2,10 +2,11 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "help-panel": "awsui_help-panel_1d237_1580q_177",
6
- "with-toolbar": "awsui_with-toolbar_1d237_1580q_218",
7
- "header": "awsui_header_1d237_1580q_352",
8
- "content": "awsui_content_1d237_1580q_390",
9
- "footer": "awsui_footer_1d237_1580q_438"
5
+ "help-panel": "awsui_help-panel_1d237_rcn2t_177",
6
+ "loading": "awsui_loading_1d237_rcn2t_347",
7
+ "header": "awsui_header_1d237_rcn2t_352",
8
+ "with-toolbar": "awsui_with-toolbar_1d237_rcn2t_369",
9
+ "content": "awsui_content_1d237_rcn2t_387",
10
+ "footer": "awsui_footer_1d237_rcn2t_438"
10
11
  };
11
12
 
package/lib/internal/template/internal/environment.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (c527559a)";
2
+ export var PACKAGE_VERSION = "3.0.0 (1d068084)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
package/lib/internal/template/internal/environment.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (c527559a)",
3
+ "PACKAGE_VERSION": "3.0.0 (1d068084)",
4
4
  "THEME": "default",
5
5
  "ALWAYS_VISUAL_REFRESH": false
6
6
  }
package/lib/internal/template/internal/plugins/helpers/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- export { RuntimeContentWrapper } from './runtime-content-wrapper';
2
1
  export { createUseDiscoveredAction } from './use-discovered-action';
3
2
  export { createUseDiscoveredContent } from './use-discovered-content';
4
3
  //# sourceMappingURL=index.d.ts.map
package/lib/internal/template/internal/plugins/helpers/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/plugins/helpers/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/plugins/helpers/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC"}
package/lib/internal/template/internal/plugins/helpers/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- export { RuntimeContentWrapper } from './runtime-content-wrapper';
4
3
  export { createUseDiscoveredAction } from './use-discovered-action';
5
4
  export { createUseDiscoveredContent } from './use-discovered-content';
6
5
  //# sourceMappingURL=index.js.map
package/lib/internal/template/internal/plugins/helpers/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/plugins/helpers/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport { RuntimeContentWrapper } from './runtime-content-wrapper';\nexport { createUseDiscoveredAction } from './use-discovered-action';\nexport { createUseDiscoveredContent } from './use-discovered-content';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/plugins/helpers/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport { createUseDiscoveredAction } from './use-discovered-action';\nexport { createUseDiscoveredContent } from './use-discovered-content';\n"]}
package/lib/internal/template/internal/plugins/helpers/use-discovered-action.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-discovered-action.d.ts","sourceRoot":"","sources":["../../../../../src/internal/plugins/helpers/use-discovered-action.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,uBAAuB,EAA+B,MAAM,+BAA+B,CAAC;AAgBrG,wBAAgB,yBAAyB,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,oBAAoB,CAAC,UAC/D,MAAM;uBAC3B,MAAM,SAAS,EAAE;eACzB,MAAM,GAAG,CAAC,cAAc,CAAC;gBACxB,MAAM,GAAG,CAAC,cAAc,CAAC;EAcxC"}
1
+ {"version":3,"file":"use-discovered-action.d.ts","sourceRoot":"","sources":["../../../../../src/internal/plugins/helpers/use-discovered-action.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,uBAAuB,EAA+B,MAAM,+BAA+B,CAAC;AAqCrG,wBAAgB,yBAAyB,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,oBAAoB,CAAC,UAC/D,MAAM;uBAC3B,MAAM,SAAS,EAAE;eACzB,MAAM,GAAG,CAAC,cAAc,CAAC;gBACxB,MAAM,GAAG,CAAC,cAAc,CAAC;EAcxC"}
package/lib/internal/template/internal/plugins/helpers/use-discovered-action.js CHANGED
@@ -1,12 +1,23 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React, { useEffect, useRef, useState } from 'react';
4
- import { RuntimeContentWrapper } from './runtime-content-wrapper';
4
+ function RuntimeActionWrapper({ mountContent, unmountContent, context }) {
5
+ const ref = useRef(null);
6
+ useEffect(() => {
7
+ const container = ref.current;
8
+ mountContent(container, context);
9
+ return () => {
10
+ unmountContent(container);
11
+ };
12
+ // eslint-disable-next-line react-hooks/exhaustive-deps
13
+ }, []);
14
+ return React.createElement("div", { ref: ref });
15
+ }
5
16
  function convertRuntimeAction(action, context) {
6
17
  if (!action) {
7
18
  return null;
8
19
  }
9
- return (React.createElement(RuntimeContentWrapper, { key: action.id + '-' + context.type, mountContent: container => action.mountContent(container, context), unmountContent: container => action.unmountContent(container) }));
20
+ return (React.createElement(RuntimeActionWrapper, { key: action.id + '-' + context.type, context: context, mountContent: action.mountContent, unmountContent: action.unmountContent }));
10
21
  }
11
22
  export function createUseDiscoveredAction(onActionRegistered) {
12
23
  return function useDiscoveredAction(type) {