@cloudscape-design/components 3.0.307 → 3.0.308

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 (48) hide show
  1. package/column-layout/interfaces.d.ts +1 -3
  2. package/column-layout/interfaces.d.ts.map +1 -1
  3. package/column-layout/interfaces.js.map +1 -1
  4. package/expandable-section/expandable-section-header.d.ts.map +1 -1
  5. package/expandable-section/expandable-section-header.js +6 -7
  6. package/expandable-section/expandable-section-header.js.map +1 -1
  7. package/expandable-section/styles.css.js +27 -26
  8. package/expandable-section/styles.scoped.css +51 -47
  9. package/expandable-section/styles.selectors.js +27 -26
  10. package/i18n/messages/all.all.d.ts +1 -1
  11. package/i18n/messages/all.de.d.ts +1 -1
  12. package/i18n/messages/all.en-GB.d.ts +1 -1
  13. package/i18n/messages/all.en.d.ts +1 -1
  14. package/i18n/messages/all.es.d.ts +1 -1
  15. package/i18n/messages/all.fr.d.ts +1 -1
  16. package/i18n/messages/all.id.d.ts +1 -1
  17. package/i18n/messages/all.it.d.ts +1 -1
  18. package/i18n/messages/all.ja.d.ts +1 -1
  19. package/i18n/messages/all.ko.d.ts +1 -1
  20. package/i18n/messages/all.pt-BR.d.ts +1 -1
  21. package/i18n/messages/all.zh-CN.d.ts +1 -1
  22. package/i18n/messages/all.zh-TW.d.ts +1 -1
  23. package/internal/environment.js +1 -1
  24. package/internal/i18n/messages/all.all.d.ts +1 -1
  25. package/internal/i18n/messages/all.de.d.ts +1 -1
  26. package/internal/i18n/messages/all.en-GB.d.ts +1 -1
  27. package/internal/i18n/messages/all.en.d.ts +1 -1
  28. package/internal/i18n/messages/all.es.d.ts +1 -1
  29. package/internal/i18n/messages/all.fr.d.ts +1 -1
  30. package/internal/i18n/messages/all.id.d.ts +1 -1
  31. package/internal/i18n/messages/all.it.d.ts +1 -1
  32. package/internal/i18n/messages/all.ja.d.ts +1 -1
  33. package/internal/i18n/messages/all.ko.d.ts +1 -1
  34. package/internal/i18n/messages/all.pt-BR.d.ts +1 -1
  35. package/internal/i18n/messages/all.zh-CN.d.ts +1 -1
  36. package/internal/i18n/messages/all.zh-TW.d.ts +1 -1
  37. package/internal/manifest.json +1 -1
  38. package/modal/styles.css.js +23 -23
  39. package/modal/styles.scoped.css +39 -38
  40. package/modal/styles.selectors.js +23 -23
  41. package/package.json +1 -1
  42. package/test-utils/dom/expandable-section/index.d.ts +1 -0
  43. package/test-utils/dom/expandable-section/index.js +6 -0
  44. package/test-utils/dom/expandable-section/index.js.map +1 -1
  45. package/test-utils/selectors/expandable-section/index.d.ts +1 -0
  46. package/test-utils/selectors/expandable-section/index.js +6 -0
  47. package/test-utils/selectors/expandable-section/index.js.map +1 -1
  48. package/test-utils/tsconfig.tsbuildinfo +1 -1
@@ -5,9 +5,7 @@ import { ColumnLayoutBreakpoint } from './internal';
5
5
  export interface ColumnLayoutProps extends BaseComponentProps {
6
6
  /**
7
7
  * Specifies the number of columns in each grid row.
8
- * Valid values are any integer between 1 and 4.
9
- *
10
- * Note that there is no upper limit when used in combination with `minColumnWidth`.
8
+ * When `minColumnWidth` is not set, only up to 4 columns are supported.
11
9
  */
12
10
  columns?: number;
13
11
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["column-layout/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,iBAAiB,CAAC;IACjC,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC9C,KAAY,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,KAAK,CAAC;CAClE;AAED,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,EAAE,0BAA0B;IAC9F,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACvC"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["column-layout/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,iBAAiB,CAAC;IACjC,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC9C,KAAY,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,KAAK,CAAC;CAClE;AAED,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,EAAE,0BAA0B;IAC9F,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACvC"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["column-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ColumnLayoutBreakpoint } from './internal';\n\nexport interface ColumnLayoutProps extends BaseComponentProps {\n /**\n * Specifies the number of columns in each grid row.\n * Valid values are any integer between 1 and 4.\n *\n * Note that there is no upper limit when used in combination with `minColumnWidth`.\n */\n columns?: number;\n\n /**\n * Specifies the content type. This determines the spacing of the grid.\n */\n variant?: ColumnLayoutProps.Variant;\n\n /**\n * Controls whether dividers are placed between rows and columns.\n *\n * Note: This is not supported when used with `minColumnWidth`.\n */\n borders?: ColumnLayoutProps.Borders;\n\n /**\n * Determines whether the default gutters between columns are removed.\n */\n disableGutters?: boolean;\n\n /**\n * Use together with `columns` to specify the desired minimum width for each column in pixels.\n *\n * The number of columns is determined by the value of this property, the available space,\n * and the maximum number of columns as defined by the `columns` property.\n */\n minColumnWidth?: number;\n\n /**\n * The columns to render.\n */\n children?: React.ReactNode;\n}\n\nexport namespace ColumnLayoutProps {\n export type Variant = 'default' | 'text-grid';\n export type Borders = 'none' | 'vertical' | 'horizontal' | 'all';\n}\n\nexport interface InternalColumnLayoutProps extends ColumnLayoutProps, InternalBaseComponentProps {\n __breakpoint?: ColumnLayoutBreakpoint;\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["column-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ColumnLayoutBreakpoint } from './internal';\n\nexport interface ColumnLayoutProps extends BaseComponentProps {\n /**\n * Specifies the number of columns in each grid row.\n * When `minColumnWidth` is not set, only up to 4 columns are supported.\n */\n columns?: number;\n\n /**\n * Specifies the content type. This determines the spacing of the grid.\n */\n variant?: ColumnLayoutProps.Variant;\n\n /**\n * Controls whether dividers are placed between rows and columns.\n *\n * Note: This is not supported when used with `minColumnWidth`.\n */\n borders?: ColumnLayoutProps.Borders;\n\n /**\n * Determines whether the default gutters between columns are removed.\n */\n disableGutters?: boolean;\n\n /**\n * Use together with `columns` to specify the desired minimum width for each column in pixels.\n *\n * The number of columns is determined by the value of this property, the available space,\n * and the maximum number of columns as defined by the `columns` property.\n */\n minColumnWidth?: number;\n\n /**\n * The columns to render.\n */\n children?: React.ReactNode;\n}\n\nexport namespace ColumnLayoutProps {\n export type Variant = 'default' | 'text-grid';\n export type Borders = 'none' | 'vertical' | 'horizontal' | 'all';\n}\n\nexport interface InternalColumnLayoutProps extends ColumnLayoutProps, InternalBaseComponentProps {\n __breakpoint?: ColumnLayoutBreakpoint;\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUlF,eAAO,MAAM,aAAa,sBAAsB,CAAC;AAEjD,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;CACzC;AAcD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAiID,eAAO,MAAM,uBAAuB,qNAkBjC,4BAA4B,gBA4E9B,CAAC"}
1
+ {"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUlF,eAAO,MAAM,aAAa,sBAAsB,CAAC;AAEjD,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;CACzC;AAcD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAwID,eAAO,MAAM,uBAAuB,qNAkBjC,4BAA4B,gBAsE9B,CAAC"}
@@ -9,27 +9,27 @@ import { isDevelopment } from '../internal/is-development';
9
9
  import { warnOnce } from '../internal/logging';
10
10
  export const componentName = 'ExpandableSection';
11
11
  const ExpandableDefaultHeader = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, onKeyUp, onKeyDown, variant, }) => {
12
- return (React.createElement("div", { id: id, role: "button", className: className, tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded },
12
+ return (React.createElement("div", { id: id, role: "button", className: clsx(className, styles['expand-button']), tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded },
13
13
  React.createElement("div", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
14
14
  children));
15
15
  };
16
16
  const ExpandableNavigationHeader = ({ id, className, onClick, ariaLabelledBy, ariaLabel, ariaControls, expanded, children, icon, }) => {
17
17
  return (React.createElement("div", { id: id, className: className, onClick: onClick },
18
- React.createElement("button", { className: styles['icon-container'], "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded, type: "button" }, icon),
18
+ React.createElement("button", { className: clsx(styles['icon-container'], styles['expand-button']), "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded, type: "button" }, icon),
19
19
  children));
20
20
  };
21
21
  const ExpandableHeaderTextWrapper = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, headerDescription, headerCounter, headerInfo, headerActions, variant, headingTagOverride, onKeyUp, onKeyDown, }) => {
22
22
  const screenreaderContentId = useUniqueId('expandable-section-header-content-');
23
23
  const isContainer = variant === 'container';
24
24
  const HeadingTag = headingTagOverride || 'div';
25
- const hasInteractiveElements = headerInfo || headerActions;
25
+ const hasInteractiveElements = isContainer && (headerInfo || headerActions);
26
26
  const listeners = { onClick, onKeyDown, onKeyUp };
27
27
  const wrapperListeners = hasInteractiveElements ? undefined : listeners;
28
28
  const headerButtonListeners = hasInteractiveElements ? listeners : undefined;
29
- const headerButton = (React.createElement("span", Object.assign({ className: isContainer ? styles['header-container-button'] : styles['header-button'], role: "button", tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabel || !isContainer ? undefined : screenreaderContentId, "aria-controls": ariaControls, "aria-expanded": expanded }, headerButtonListeners),
29
+ const headerButton = (React.createElement("span", Object.assign({ className: clsx(styles['expand-button'], isContainer ? styles['header-container-button'] : styles['header-button']), role: "button", tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabel || !isContainer ? undefined : screenreaderContentId, "aria-controls": ariaControls, "aria-expanded": expanded }, headerButtonListeners),
30
30
  React.createElement("span", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
31
31
  React.createElement("span", null, children)));
32
- return (React.createElement("div", Object.assign({ id: id, className: className }, wrapperListeners),
32
+ return (React.createElement("div", Object.assign({ id: id, className: clsx(className, hasInteractiveElements && styles['with-interactive-elements']) }, wrapperListeners),
33
33
  isContainer ? (React.createElement(InternalHeader, { variant: "h2", description: headerDescription, counter: headerCounter, info: headerInfo, actions: headerActions, headingTagOverride: headingTagOverride }, headerButton)) : (React.createElement(HeadingTag, { className: styles['header-wrapper'] }, headerButton)),
34
34
  isContainer && (React.createElement(ScreenreaderOnly, { id: screenreaderContentId },
35
35
  children,
@@ -57,8 +57,7 @@ export const ExpandableSectionHeader = ({ id, className, variant, header, header
57
57
  return (React.createElement(ExpandableNavigationHeader, Object.assign({ className: clsx(className, wrapperClassName), ariaLabelledBy: ariaLabelledBy }, defaultHeaderProps), headerText !== null && headerText !== void 0 ? headerText : header));
58
58
  }
59
59
  if (headerText) {
60
- const hasInteractiveElements = headerInfo || headerActions;
61
- return (React.createElement(ExpandableHeaderTextWrapper, Object.assign({ className: clsx(className, wrapperClassName, hasInteractiveElements && styles['with-interactive-elements'], expanded && styles.expanded), headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride, onKeyUp: onKeyUp, onKeyDown: onKeyDown }, defaultHeaderProps), headerText));
60
+ return (React.createElement(ExpandableHeaderTextWrapper, Object.assign({ className: clsx(className, wrapperClassName, expanded && styles.expanded), headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride, onKeyUp: onKeyUp, onKeyDown: onKeyDown }, defaultHeaderProps), headerText));
62
61
  }
63
62
  if (variant === 'container' && header && isDevelopment) {
64
63
  warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');
@@ -1 +1 @@
1
- {"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.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 { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\n\nexport const componentName = 'ExpandableSection';\n\ninterface ExpandableDefaultHeaderProps {\n id: string;\n className?: string;\n children?: ReactNode;\n expanded: boolean;\n ariaControls: string;\n ariaLabel?: string;\n onKeyUp: KeyboardEventHandler;\n onKeyDown: KeyboardEventHandler;\n onClick: MouseEventHandler;\n icon: JSX.Element;\n variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {\n ariaLabelledBy?: string;\n}\n\ninterface ExpandableHeaderTextWrapperProps extends ExpandableDefaultHeaderProps {\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {\n variant: ExpandableSectionProps.Variant;\n header?: ReactNode;\n headerText?: ReactNode;\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n onKeyUp,\n onKeyDown,\n variant,\n}: ExpandableDefaultHeaderProps) => {\n return (\n <div\n id={id}\n role=\"button\"\n className={className}\n tabIndex={0}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n onClick={onClick}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n >\n <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n {children}\n </div>\n );\n};\n\nconst ExpandableNavigationHeader = ({\n id,\n className,\n onClick,\n ariaLabelledBy,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n}: ExpandableNavigationHeaderProps) => {\n return (\n <div id={id} className={className} onClick={onClick}>\n <button\n className={styles['icon-container']}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n type=\"button\"\n >\n {icon}\n </button>\n {children}\n </div>\n );\n};\n\nconst ExpandableHeaderTextWrapper = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n variant,\n headingTagOverride,\n onKeyUp,\n onKeyDown,\n}: ExpandableHeaderTextWrapperProps) => {\n const screenreaderContentId = useUniqueId('expandable-section-header-content-');\n const isContainer = variant === 'container';\n const HeadingTag = headingTagOverride || 'div';\n const hasInteractiveElements = headerInfo || headerActions;\n const listeners = { onClick, onKeyDown, onKeyUp };\n const wrapperListeners = hasInteractiveElements ? undefined : listeners;\n const headerButtonListeners = hasInteractiveElements ? listeners : undefined;\n const headerButton = (\n <span\n className={isContainer ? styles['header-container-button'] : styles['header-button']}\n role=\"button\"\n tabIndex={0}\n aria-label={ariaLabel}\n // Do not use aria-labelledby={id} but ScreenreaderOnly because safari+VO does not read headerText in this case.\n aria-labelledby={ariaLabel || !isContainer ? undefined : screenreaderContentId}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n {...headerButtonListeners}\n >\n <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n <span>{children}</span>\n </span>\n );\n\n return (\n <div id={id} className={className} {...wrapperListeners}>\n {isContainer ? (\n <InternalHeader\n variant=\"h2\"\n description={headerDescription}\n counter={headerCounter}\n info={headerInfo}\n actions={headerActions}\n headingTagOverride={headingTagOverride}\n >\n {headerButton}\n </InternalHeader>\n ) : (\n <HeadingTag className={styles['header-wrapper']}>{headerButton}</HeadingTag>\n )}\n {isContainer && (\n <ScreenreaderOnly id={screenreaderContentId}>\n {children} {headerCounter} {headerDescription}\n </ScreenreaderOnly>\n )}\n </div>\n );\n};\n\nexport const ExpandableSectionHeader = ({\n id,\n className,\n variant,\n header,\n headerText,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n headingTagOverride,\n expanded,\n ariaControls,\n ariaLabel,\n ariaLabelledBy,\n onKeyUp,\n onKeyDown,\n onClick,\n}: ExpandableSectionHeaderProps) => {\n const icon = (\n <InternalIcon\n size={variant === 'container' ? 'medium' : 'normal'}\n className={clsx(styles.icon, expanded && styles.expanded)}\n name=\"caret-down-filled\"\n />\n );\n const defaultHeaderProps = {\n id: id,\n icon: icon,\n expanded: expanded,\n ariaControls: ariaControls,\n ariaLabel: ariaLabel,\n onClick: onClick,\n variant,\n };\n\n if ((headerDescription || headerCounter || headerInfo || headerActions) && variant !== 'container' && isDevelopment) {\n warnOnce(\n componentName,\n 'The `headerCounter`, `headerDescription`, `headerInfo` and `headerActions` props are only supported for the \"container\" variant.'\n );\n }\n\n const wrapperClassName = clsx(styles.wrapper, styles[`wrapper-${variant}`], expanded && styles['wrapper-expanded']);\n if (variant === 'navigation') {\n return (\n <ExpandableNavigationHeader\n className={clsx(className, wrapperClassName)}\n ariaLabelledBy={ariaLabelledBy}\n {...defaultHeaderProps}\n >\n {headerText ?? header}\n </ExpandableNavigationHeader>\n );\n }\n\n if (headerText) {\n const hasInteractiveElements = headerInfo || headerActions;\n return (\n <ExpandableHeaderTextWrapper\n className={clsx(\n className,\n wrapperClassName,\n hasInteractiveElements && styles['with-interactive-elements'],\n expanded && styles.expanded\n )}\n headerDescription={headerDescription}\n headerCounter={headerCounter}\n headerInfo={headerInfo}\n headerActions={headerActions}\n headingTagOverride={headingTagOverride}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {headerText}\n </ExpandableHeaderTextWrapper>\n );\n }\n\n if (variant === 'container' && header && isDevelopment) {\n warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');\n }\n\n return (\n <ExpandableDefaultHeader\n className={clsx(className, wrapperClassName, styles.focusable, expanded && styles.expanded)}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {header}\n </ExpandableDefaultHeader>\n );\n};\n"]}
1
+ {"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.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 { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\n\nexport const componentName = 'ExpandableSection';\n\ninterface ExpandableDefaultHeaderProps {\n id: string;\n className?: string;\n children?: ReactNode;\n expanded: boolean;\n ariaControls: string;\n ariaLabel?: string;\n onKeyUp: KeyboardEventHandler;\n onKeyDown: KeyboardEventHandler;\n onClick: MouseEventHandler;\n icon: JSX.Element;\n variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {\n ariaLabelledBy?: string;\n}\n\ninterface ExpandableHeaderTextWrapperProps extends ExpandableDefaultHeaderProps {\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {\n variant: ExpandableSectionProps.Variant;\n header?: ReactNode;\n headerText?: ReactNode;\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n onKeyUp,\n onKeyDown,\n variant,\n}: ExpandableDefaultHeaderProps) => {\n return (\n <div\n id={id}\n role=\"button\"\n className={clsx(className, styles['expand-button'])}\n tabIndex={0}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n onClick={onClick}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n >\n <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n {children}\n </div>\n );\n};\n\nconst ExpandableNavigationHeader = ({\n id,\n className,\n onClick,\n ariaLabelledBy,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n}: ExpandableNavigationHeaderProps) => {\n return (\n <div id={id} className={className} onClick={onClick}>\n <button\n className={clsx(styles['icon-container'], styles['expand-button'])}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n type=\"button\"\n >\n {icon}\n </button>\n {children}\n </div>\n );\n};\n\nconst ExpandableHeaderTextWrapper = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n variant,\n headingTagOverride,\n onKeyUp,\n onKeyDown,\n}: ExpandableHeaderTextWrapperProps) => {\n const screenreaderContentId = useUniqueId('expandable-section-header-content-');\n const isContainer = variant === 'container';\n const HeadingTag = headingTagOverride || 'div';\n const hasInteractiveElements = isContainer && (headerInfo || headerActions);\n const listeners = { onClick, onKeyDown, onKeyUp };\n const wrapperListeners = hasInteractiveElements ? undefined : listeners;\n const headerButtonListeners = hasInteractiveElements ? listeners : undefined;\n const headerButton = (\n <span\n className={clsx(\n styles['expand-button'],\n isContainer ? styles['header-container-button'] : styles['header-button']\n )}\n role=\"button\"\n tabIndex={0}\n aria-label={ariaLabel}\n // Do not use aria-labelledby={id} but ScreenreaderOnly because safari+VO does not read headerText in this case.\n aria-labelledby={ariaLabel || !isContainer ? undefined : screenreaderContentId}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n {...headerButtonListeners}\n >\n <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n <span>{children}</span>\n </span>\n );\n\n return (\n <div\n id={id}\n className={clsx(className, hasInteractiveElements && styles['with-interactive-elements'])}\n {...wrapperListeners}\n >\n {isContainer ? (\n <InternalHeader\n variant=\"h2\"\n description={headerDescription}\n counter={headerCounter}\n info={headerInfo}\n actions={headerActions}\n headingTagOverride={headingTagOverride}\n >\n {headerButton}\n </InternalHeader>\n ) : (\n <HeadingTag className={styles['header-wrapper']}>{headerButton}</HeadingTag>\n )}\n {isContainer && (\n <ScreenreaderOnly id={screenreaderContentId}>\n {children} {headerCounter} {headerDescription}\n </ScreenreaderOnly>\n )}\n </div>\n );\n};\n\nexport const ExpandableSectionHeader = ({\n id,\n className,\n variant,\n header,\n headerText,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n headingTagOverride,\n expanded,\n ariaControls,\n ariaLabel,\n ariaLabelledBy,\n onKeyUp,\n onKeyDown,\n onClick,\n}: ExpandableSectionHeaderProps) => {\n const icon = (\n <InternalIcon\n size={variant === 'container' ? 'medium' : 'normal'}\n className={clsx(styles.icon, expanded && styles.expanded)}\n name=\"caret-down-filled\"\n />\n );\n const defaultHeaderProps = {\n id: id,\n icon: icon,\n expanded: expanded,\n ariaControls: ariaControls,\n ariaLabel: ariaLabel,\n onClick: onClick,\n variant,\n };\n\n if ((headerDescription || headerCounter || headerInfo || headerActions) && variant !== 'container' && isDevelopment) {\n warnOnce(\n componentName,\n 'The `headerCounter`, `headerDescription`, `headerInfo` and `headerActions` props are only supported for the \"container\" variant.'\n );\n }\n\n const wrapperClassName = clsx(styles.wrapper, styles[`wrapper-${variant}`], expanded && styles['wrapper-expanded']);\n if (variant === 'navigation') {\n return (\n <ExpandableNavigationHeader\n className={clsx(className, wrapperClassName)}\n ariaLabelledBy={ariaLabelledBy}\n {...defaultHeaderProps}\n >\n {headerText ?? header}\n </ExpandableNavigationHeader>\n );\n }\n\n if (headerText) {\n return (\n <ExpandableHeaderTextWrapper\n className={clsx(className, wrapperClassName, expanded && styles.expanded)}\n headerDescription={headerDescription}\n headerCounter={headerCounter}\n headerInfo={headerInfo}\n headerActions={headerActions}\n headingTagOverride={headingTagOverride}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {headerText}\n </ExpandableHeaderTextWrapper>\n );\n }\n\n if (variant === 'container' && header && isDevelopment) {\n warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');\n }\n\n return (\n <ExpandableDefaultHeader\n className={clsx(className, wrapperClassName, styles.focusable, expanded && styles.expanded)}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {header}\n </ExpandableDefaultHeader>\n );\n};\n"]}
@@ -1,31 +1,32 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "content-enter": "awsui_content-enter_gwq0h_1g95t_97",
5
- "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1g95t_1",
6
- "trigger-expanded": "awsui_trigger-expanded_gwq0h_1g95t_119",
7
- "icon": "awsui_icon_gwq0h_1g95t_133",
8
- "root": "awsui_root_gwq0h_1g95t_151",
9
- "expanded": "awsui_expanded_gwq0h_1g95t_171",
10
- "icon-container": "awsui_icon-container_gwq0h_1g95t_175",
11
- "icon-container-container": "awsui_icon-container-container_gwq0h_1g95t_180",
12
- "wrapper": "awsui_wrapper_gwq0h_1g95t_184",
13
- "wrapper-default": "awsui_wrapper-default_gwq0h_1g95t_192",
14
- "wrapper-footer": "awsui_wrapper-footer_gwq0h_1g95t_195",
15
- "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1g95t_201",
16
- "wrapper-container": "awsui_wrapper-container_gwq0h_1g95t_215",
17
- "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1g95t_221",
18
- "header": "awsui_header_gwq0h_1g95t_225",
19
- "header-wrapper": "awsui_header-wrapper_gwq0h_1g95t_228",
20
- "header-button": "awsui_header-button_gwq0h_1g95t_235",
21
- "header-container-button": "awsui_header-container-button_gwq0h_1g95t_239",
22
- "with-interactive-elements": "awsui_with-interactive-elements_gwq0h_1g95t_257",
23
- "header-container": "awsui_header-container_gwq0h_1g95t_239",
24
- "header-navigation": "awsui_header-navigation_gwq0h_1g95t_269",
25
- "content": "awsui_content_gwq0h_1g95t_97",
26
- "content-default": "awsui_content-default_gwq0h_1g95t_305",
27
- "content-footer": "awsui_content-footer_gwq0h_1g95t_308",
28
- "content-expanded": "awsui_content-expanded_gwq0h_1g95t_311",
29
- "focusable": "awsui_focusable_gwq0h_1g95t_315"
4
+ "content-enter": "awsui_content-enter_gwq0h_ohtdp_97",
5
+ "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_ohtdp_1",
6
+ "trigger-expanded": "awsui_trigger-expanded_gwq0h_ohtdp_119",
7
+ "icon": "awsui_icon_gwq0h_ohtdp_133",
8
+ "root": "awsui_root_gwq0h_ohtdp_151",
9
+ "expand-button": "awsui_expand-button_gwq0h_ohtdp_168",
10
+ "expanded": "awsui_expanded_gwq0h_ohtdp_175",
11
+ "icon-container": "awsui_icon-container_gwq0h_ohtdp_179",
12
+ "icon-container-container": "awsui_icon-container-container_gwq0h_ohtdp_184",
13
+ "wrapper": "awsui_wrapper_gwq0h_ohtdp_188",
14
+ "wrapper-default": "awsui_wrapper-default_gwq0h_ohtdp_196",
15
+ "wrapper-footer": "awsui_wrapper-footer_gwq0h_ohtdp_199",
16
+ "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_ohtdp_205",
17
+ "wrapper-container": "awsui_wrapper-container_gwq0h_ohtdp_219",
18
+ "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_ohtdp_225",
19
+ "header": "awsui_header_gwq0h_ohtdp_229",
20
+ "header-wrapper": "awsui_header-wrapper_gwq0h_ohtdp_232",
21
+ "header-button": "awsui_header-button_gwq0h_ohtdp_239",
22
+ "header-container-button": "awsui_header-container-button_gwq0h_ohtdp_243",
23
+ "with-interactive-elements": "awsui_with-interactive-elements_gwq0h_ohtdp_261",
24
+ "header-container": "awsui_header-container_gwq0h_ohtdp_243",
25
+ "header-navigation": "awsui_header-navigation_gwq0h_ohtdp_273",
26
+ "content": "awsui_content_gwq0h_ohtdp_97",
27
+ "content-default": "awsui_content-default_gwq0h_ohtdp_309",
28
+ "content-footer": "awsui_content-footer_gwq0h_ohtdp_312",
29
+ "content-expanded": "awsui_content-expanded_gwq0h_ohtdp_315",
30
+ "focusable": "awsui_focusable_gwq0h_ohtdp_319"
30
31
  };
31
32
 
@@ -94,10 +94,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
94
94
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
95
95
  SPDX-License-Identifier: Apache-2.0
96
96
  */
97
- .awsui_content-enter_gwq0h_1g95t_97:not(#\9) {
98
- animation: awsui_awsui-motion-fade-in_gwq0h_1g95t_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
97
+ .awsui_content-enter_gwq0h_ohtdp_97:not(#\9) {
98
+ animation: awsui_awsui-motion-fade-in_gwq0h_ohtdp_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
99
99
  }
100
- @keyframes awsui_awsui-motion-fade-in_gwq0h_1g95t_1 {
100
+ @keyframes awsui_awsui-motion-fade-in_gwq0h_ohtdp_1 {
101
101
  from {
102
102
  opacity: 0.2;
103
103
  }
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
106
106
  }
107
107
  }
108
108
  @media (prefers-reduced-motion: reduce) {
109
- .awsui_content-enter_gwq0h_1g95t_97:not(#\9) {
109
+ .awsui_content-enter_gwq0h_ohtdp_97:not(#\9) {
110
110
  animation: none;
111
111
  transition: none;
112
112
  }
113
113
  }
114
- .awsui-motion-disabled .awsui_content-enter_gwq0h_1g95t_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1g95t_97:not(#\9) {
114
+ .awsui-motion-disabled .awsui_content-enter_gwq0h_ohtdp_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_ohtdp_97:not(#\9) {
115
115
  animation: none;
116
116
  transition: none;
117
117
  }
118
118
 
119
- .awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9) {
119
+ .awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9) {
120
120
  transition: border-bottom-color var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
121
121
  }
122
122
  @media (prefers-reduced-motion: reduce) {
123
- .awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9) {
123
+ .awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9) {
124
124
  animation: none;
125
125
  transition: none;
126
126
  }
127
127
  }
128
- .awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9) {
128
+ .awsui-motion-disabled .awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9) {
129
129
  animation: none;
130
130
  transition: none;
131
131
  }
132
132
 
133
- .awsui_icon_gwq0h_1g95t_133:not(#\9) {
133
+ .awsui_icon_gwq0h_ohtdp_133:not(#\9) {
134
134
  transition: transform var(--motion-duration-rotate-90-jfxxiy, 135ms) var(--motion-easing-rotate-90-ax5lt7, cubic-bezier(0.165, 0.84, 0.44, 1));
135
135
  }
136
136
  @media (prefers-reduced-motion: reduce) {
137
- .awsui_icon_gwq0h_1g95t_133:not(#\9) {
137
+ .awsui_icon_gwq0h_ohtdp_133:not(#\9) {
138
138
  animation: none;
139
139
  transition: none;
140
140
  }
141
141
  }
142
- .awsui-motion-disabled .awsui_icon_gwq0h_1g95t_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1g95t_133:not(#\9) {
142
+ .awsui-motion-disabled .awsui_icon_gwq0h_ohtdp_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_ohtdp_133:not(#\9) {
143
143
  animation: none;
144
144
  transition: none;
145
145
  }
@@ -148,7 +148,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
148
148
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
149
149
  SPDX-License-Identifier: Apache-2.0
150
150
  */
151
- .awsui_root_gwq0h_1g95t_151:not(#\9) {
151
+ .awsui_root_gwq0h_ohtdp_151:not(#\9) {
152
152
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
153
153
  border-collapse: separate;
154
154
  border-spacing: 0;
@@ -191,23 +191,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
191
191
  display: block;
192
192
  }
193
193
 
194
- .awsui_icon_gwq0h_1g95t_133:not(#\9) {
194
+ .awsui_expand-button_gwq0h_ohtdp_168:not(#\9) {
195
+ /* used in test-utils */
196
+ }
197
+
198
+ .awsui_icon_gwq0h_ohtdp_133:not(#\9) {
195
199
  transform: rotate(-90deg);
196
200
  }
197
- .awsui_icon_gwq0h_1g95t_133.awsui_expanded_gwq0h_1g95t_171:not(#\9) {
201
+ .awsui_icon_gwq0h_ohtdp_133.awsui_expanded_gwq0h_ohtdp_175:not(#\9) {
198
202
  transform: rotate(0deg);
199
203
  }
200
204
 
201
- .awsui_icon-container_gwq0h_1g95t_175:not(#\9) {
205
+ .awsui_icon-container_gwq0h_ohtdp_179:not(#\9) {
202
206
  position: relative;
203
207
  margin-left: calc((var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2);
204
208
  margin-right: calc(var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px));
205
209
  }
206
- .awsui_icon-container-container_gwq0h_1g95t_180:not(#\9) {
210
+ .awsui_icon-container-container_gwq0h_ohtdp_184:not(#\9) {
207
211
  margin-right: var(--space-xs-edba2s, 8px);
208
212
  }
209
213
 
210
- .awsui_wrapper_gwq0h_1g95t_184:not(#\9) {
214
+ .awsui_wrapper_gwq0h_ohtdp_188:not(#\9) {
211
215
  box-sizing: border-box;
212
216
  display: flex;
213
217
  border: none;
@@ -215,19 +219,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
215
219
  line-height: var(--font-body-m-line-height-rfgrp9, 22px);
216
220
  text-align: left;
217
221
  }
218
- .awsui_wrapper-default_gwq0h_1g95t_192:not(#\9) {
222
+ .awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9) {
219
223
  padding: var(--space-scaled-xxs-t2t62i, 4px) var(--space-xxs-ja5cp8, 4px);
220
224
  }
221
- .awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9) {
225
+ .awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9) {
222
226
  padding: var(--space-scaled-xxs-t2t62i, 4px) 0;
223
227
  }
224
- .awsui_wrapper-default_gwq0h_1g95t_192:not(#\9), .awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9) {
228
+ .awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9), .awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9) {
225
229
  border: var(--border-divider-section-width-orq175, 2px) solid transparent;
226
230
  }
227
- .awsui_wrapper-navigation_gwq0h_1g95t_201:not(#\9) {
231
+ .awsui_wrapper-navigation_gwq0h_ohtdp_205:not(#\9) {
228
232
  border-left: var(--border-divider-section-width-orq175, 2px) solid transparent;
229
233
  }
230
- .awsui_wrapper-default_gwq0h_1g95t_192:not(#\9), .awsui_wrapper-navigation_gwq0h_1g95t_201:not(#\9), .awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9) {
234
+ .awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9), .awsui_wrapper-navigation_gwq0h_ohtdp_205:not(#\9), .awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9) {
231
235
  color: var(--color-text-expandable-section-default-fvf8va, #000716);
232
236
  font-weight: var(--font-heading-s-weight-5y5giq, 800);
233
237
  -webkit-font-smoothing: var(--font-smoothing-webkit-fyh4as, antialiased);
@@ -235,41 +239,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
235
239
  font-size: var(--font-expandable-heading-size-mkp9vq, 16px);
236
240
  letter-spacing: var(--font-heading-s-letter-spacing-j4vcrt, -0.005em);
237
241
  }
238
- .awsui_wrapper-default_gwq0h_1g95t_192:not(#\9):hover, .awsui_wrapper-navigation_gwq0h_1g95t_201:not(#\9):hover, .awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9):hover {
242
+ .awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9):hover, .awsui_wrapper-navigation_gwq0h_ohtdp_205:not(#\9):hover, .awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9):hover {
239
243
  color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
240
244
  }
241
- .awsui_wrapper-container_gwq0h_1g95t_215:not(#\9) {
245
+ .awsui_wrapper-container_gwq0h_ohtdp_219:not(#\9) {
242
246
  padding: var(--space-container-header-vertical-di96ce, 12px) var(--space-container-horizontal-jxdgil, 20px);
243
247
  }
244
- body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_1g95t_215:not(#\9):focus {
248
+ body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_ohtdp_219:not(#\9):focus {
245
249
  padding: calc(var(--space-scaled-s-913kwi, 12px) - var(--border-divider-section-width-orq175, 2px)) calc(var(--space-l-f4l5gr, 20px) - var(--border-divider-section-width-orq175, 2px));
246
250
  }
247
- .awsui_wrapper-default_gwq0h_1g95t_192.awsui_wrapper-expanded_gwq0h_1g95t_221:not(#\9) {
251
+ .awsui_wrapper-default_gwq0h_ohtdp_196.awsui_wrapper-expanded_gwq0h_ohtdp_225:not(#\9) {
248
252
  border-bottom-color: var(--color-border-divider-default-9o8zql, #e9ebed);
249
253
  }
250
254
 
251
- .awsui_header_gwq0h_1g95t_225:not(#\9) {
255
+ .awsui_header_gwq0h_ohtdp_229:not(#\9) {
252
256
  display: flex;
253
257
  }
254
- .awsui_header-wrapper_gwq0h_1g95t_228:not(#\9) {
258
+ .awsui_header-wrapper_gwq0h_ohtdp_232:not(#\9) {
255
259
  font-weight: inherit;
256
260
  font-size: inherit;
257
261
  letter-spacing: inherit;
258
262
  margin: 0;
259
263
  padding: 0;
260
264
  }
261
- .awsui_header-button_gwq0h_1g95t_235:not(#\9) {
265
+ .awsui_header-button_gwq0h_ohtdp_239:not(#\9) {
262
266
  box-sizing: border-box;
263
267
  display: flex;
264
268
  }
265
- body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g95t_239:not(#\9):focus {
269
+ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9):focus {
266
270
  position: relative;
267
271
  }
268
- body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g95t_239:not(#\9):focus {
272
+ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9):focus {
269
273
  outline: 2px dotted transparent;
270
274
  outline-offset: calc(0px - 1px);
271
275
  }
272
- body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g95t_239:not(#\9):focus::before {
276
+ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9):focus::before {
273
277
  content: " ";
274
278
  display: block;
275
279
  position: absolute;
@@ -280,19 +284,19 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9
280
284
  border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
281
285
  box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
282
286
  }
283
- .awsui_header_gwq0h_1g95t_225:not(#\9):not(.awsui_with-interactive-elements_gwq0h_1g95t_257) {
287
+ .awsui_header_gwq0h_ohtdp_229:not(#\9):not(.awsui_with-interactive-elements_gwq0h_ohtdp_261) {
284
288
  cursor: pointer;
285
289
  }
286
- .awsui_header-container_gwq0h_1g95t_239:not(#\9) {
290
+ .awsui_header-container_gwq0h_ohtdp_243:not(#\9) {
287
291
  width: 100%;
288
292
  }
289
- .awsui_header-container_gwq0h_1g95t_239 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9) {
293
+ .awsui_header-container_gwq0h_ohtdp_243 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9) {
290
294
  margin-top: var(--space-expandable-section-icon-offset-top-qfofw6, 4px);
291
295
  }
292
- .awsui_header-container_gwq0h_1g95t_239.awsui_with-interactive-elements_gwq0h_1g95t_257 .awsui_header-container-button_gwq0h_1g95t_239:not(#\9) {
296
+ .awsui_header-container_gwq0h_ohtdp_243.awsui_with-interactive-elements_gwq0h_ohtdp_261 .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9) {
293
297
  cursor: pointer;
294
298
  }
295
- .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9) {
299
+ .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9) {
296
300
  display: inline-flex;
297
301
  cursor: pointer;
298
302
  color: var(--color-text-expandable-section-navigation-icon-default-lzmj1u, #414d5c);
@@ -303,17 +307,17 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9
303
307
  text-decoration: none;
304
308
  flex-direction: column;
305
309
  }
306
- .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):hover {
310
+ .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):hover {
307
311
  color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
308
312
  }
309
- body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):focus {
313
+ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):focus {
310
314
  position: relative;
311
315
  }
312
- body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):focus {
316
+ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):focus {
313
317
  outline: 2px dotted transparent;
314
318
  outline-offset: calc(2px - 1px);
315
319
  }
316
- body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):focus::before {
320
+ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):focus::before {
317
321
  content: " ";
318
322
  display: block;
319
323
  position: absolute;
@@ -325,24 +329,24 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .
325
329
  box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
326
330
  }
327
331
 
328
- .awsui_content_gwq0h_1g95t_97:not(#\9) {
332
+ .awsui_content_gwq0h_ohtdp_97:not(#\9) {
329
333
  display: none;
330
334
  }
331
- .awsui_content-default_gwq0h_1g95t_305:not(#\9) {
335
+ .awsui_content-default_gwq0h_ohtdp_309:not(#\9) {
332
336
  padding: var(--space-scaled-xs-wbfgrv, 8px) 0;
333
337
  }
334
- .awsui_content-footer_gwq0h_1g95t_308:not(#\9) {
338
+ .awsui_content-footer_gwq0h_ohtdp_312:not(#\9) {
335
339
  padding: var(--space-xs-edba2s, 8px) 0;
336
340
  }
337
- .awsui_content-expanded_gwq0h_1g95t_311:not(#\9) {
341
+ .awsui_content-expanded_gwq0h_ohtdp_315:not(#\9) {
338
342
  display: block;
339
343
  }
340
344
 
341
- .awsui_focusable_gwq0h_1g95t_315:not(#\9):focus {
345
+ .awsui_focusable_gwq0h_ohtdp_319:not(#\9):focus {
342
346
  outline: none;
343
347
  text-decoration: none;
344
348
  }
345
- body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1g95t_315:not(#\9):focus {
349
+ body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_ohtdp_319:not(#\9):focus {
346
350
  outline: 2px dotted transparent;
347
351
  border: var(--border-field-width-riro62, 2px) solid var(--color-border-item-focused-4t19h5, #0972d3);
348
352
  border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
@@ -2,31 +2,32 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "content-enter": "awsui_content-enter_gwq0h_1g95t_97",
6
- "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1g95t_1",
7
- "trigger-expanded": "awsui_trigger-expanded_gwq0h_1g95t_119",
8
- "icon": "awsui_icon_gwq0h_1g95t_133",
9
- "root": "awsui_root_gwq0h_1g95t_151",
10
- "expanded": "awsui_expanded_gwq0h_1g95t_171",
11
- "icon-container": "awsui_icon-container_gwq0h_1g95t_175",
12
- "icon-container-container": "awsui_icon-container-container_gwq0h_1g95t_180",
13
- "wrapper": "awsui_wrapper_gwq0h_1g95t_184",
14
- "wrapper-default": "awsui_wrapper-default_gwq0h_1g95t_192",
15
- "wrapper-footer": "awsui_wrapper-footer_gwq0h_1g95t_195",
16
- "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1g95t_201",
17
- "wrapper-container": "awsui_wrapper-container_gwq0h_1g95t_215",
18
- "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1g95t_221",
19
- "header": "awsui_header_gwq0h_1g95t_225",
20
- "header-wrapper": "awsui_header-wrapper_gwq0h_1g95t_228",
21
- "header-button": "awsui_header-button_gwq0h_1g95t_235",
22
- "header-container-button": "awsui_header-container-button_gwq0h_1g95t_239",
23
- "with-interactive-elements": "awsui_with-interactive-elements_gwq0h_1g95t_257",
24
- "header-container": "awsui_header-container_gwq0h_1g95t_239",
25
- "header-navigation": "awsui_header-navigation_gwq0h_1g95t_269",
26
- "content": "awsui_content_gwq0h_1g95t_97",
27
- "content-default": "awsui_content-default_gwq0h_1g95t_305",
28
- "content-footer": "awsui_content-footer_gwq0h_1g95t_308",
29
- "content-expanded": "awsui_content-expanded_gwq0h_1g95t_311",
30
- "focusable": "awsui_focusable_gwq0h_1g95t_315"
5
+ "content-enter": "awsui_content-enter_gwq0h_ohtdp_97",
6
+ "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_ohtdp_1",
7
+ "trigger-expanded": "awsui_trigger-expanded_gwq0h_ohtdp_119",
8
+ "icon": "awsui_icon_gwq0h_ohtdp_133",
9
+ "root": "awsui_root_gwq0h_ohtdp_151",
10
+ "expand-button": "awsui_expand-button_gwq0h_ohtdp_168",
11
+ "expanded": "awsui_expanded_gwq0h_ohtdp_175",
12
+ "icon-container": "awsui_icon-container_gwq0h_ohtdp_179",
13
+ "icon-container-container": "awsui_icon-container-container_gwq0h_ohtdp_184",
14
+ "wrapper": "awsui_wrapper_gwq0h_ohtdp_188",
15
+ "wrapper-default": "awsui_wrapper-default_gwq0h_ohtdp_196",
16
+ "wrapper-footer": "awsui_wrapper-footer_gwq0h_ohtdp_199",
17
+ "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_ohtdp_205",
18
+ "wrapper-container": "awsui_wrapper-container_gwq0h_ohtdp_219",
19
+ "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_ohtdp_225",
20
+ "header": "awsui_header_gwq0h_ohtdp_229",
21
+ "header-wrapper": "awsui_header-wrapper_gwq0h_ohtdp_232",
22
+ "header-button": "awsui_header-button_gwq0h_ohtdp_239",
23
+ "header-container-button": "awsui_header-container-button_gwq0h_ohtdp_243",
24
+ "with-interactive-elements": "awsui_with-interactive-elements_gwq0h_ohtdp_261",
25
+ "header-container": "awsui_header-container_gwq0h_ohtdp_243",
26
+ "header-navigation": "awsui_header-navigation_gwq0h_ohtdp_273",
27
+ "content": "awsui_content_gwq0h_ohtdp_97",
28
+ "content-default": "awsui_content-default_gwq0h_ohtdp_309",
29
+ "content-footer": "awsui_content-footer_gwq0h_ohtdp_312",
30
+ "content-expanded": "awsui_content-expanded_gwq0h_ohtdp_315",
31
+ "focusable": "awsui_focusable_gwq0h_ohtdp_319"
31
32
  };
32
33
 
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;
@@ -1,3 +1,3 @@
1
1
  import { I18nProviderProps } from '../provider';
2
- const messages: I18nProviderProps.Messages;
2
+ declare const messages: I18nProviderProps.Messages;
3
3
  export default messages;