@cloudscape-design/components-themeable 3.0.305 → 3.0.307

package/lib/internal/template/code-editor/pane.js

@@ -65,11 +65,14 @@ export const Pane = ({ id, visible, annotations, highlighted, onClose, onAnnotat
                         React.createElement("colgroup", null,
                             React.createElement("col", { style: { width: 1 } /* shrink to fit content */ }),
                             React.createElement("col", { style: { width: 'auto' } })),
-                        React.createElement("tbody", { ref: listRef }, annotations.map((annotation, i) => (React.createElement("tr", { key: i, className: clsx(styles.pane__item, {
-                                [styles['pane__item--highlighted']]: annotation === highlighted,
-                            }), onFocus: onItemFocus, onMouseOver: onAnnotationClear, onClick: onItemClick.bind(null, annotation), onKeyDown: onItemKeyDown.bind(null, annotation), tabIndex: 0, role: "link" },
-                            React.createElement("td", { className: clsx(styles.pane__location, styles.pane__cell), tabIndex: -1 }, cursorPositionLabel((annotation.row || 0) + 1, (annotation.column || 0) + 1)),
-                            React.createElement("td", { className: clsx(styles.pane__description, styles.pane__cell), tabIndex: -1 }, annotation.text))))))),
+                        React.createElement("tbody", { ref: listRef }, annotations.map((annotation, i) => {
+                            var _a;
+                            return (React.createElement("tr", { key: i, className: clsx(styles.pane__item, {
+                                    [styles['pane__item--highlighted']]: annotation === highlighted,
+                                }), onFocus: onItemFocus, onMouseOver: onAnnotationClear, onClick: onItemClick.bind(null, annotation), onKeyDown: onItemKeyDown.bind(null, annotation), tabIndex: 0, role: "link" },
+                                React.createElement("td", { className: clsx(styles.pane__location, styles.pane__cell), tabIndex: -1 }, (_a = cursorPositionLabel === null || cursorPositionLabel === void 0 ? void 0 : cursorPositionLabel((annotation.row || 0) + 1, (annotation.column || 0) + 1)) !== null && _a !== void 0 ? _a : ''),
+                                React.createElement("td", { className: clsx(styles.pane__description, styles.pane__cell), tabIndex: -1 }, annotation.text)));
+                        })))),
                 React.createElement("div", { className: styles['pane__close-container'] },
                     React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "close", onClick: onClose, ariaLabel: closeButtonAriaLabel }))))));
 };

package/lib/internal/template/code-editor/pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"pane.js","sourceRoot":"lib/default/","sources":["code-editor/pane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { Ace } from 'ace-builds';\n\nimport { KeyCode } from '../internal/keycode';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport FocusLock from '../internal/components/focus-lock';\n\nimport { InternalButton } from '../button/internal';\nimport { ResizableBox } from './resizable-box';\n\nimport styles from './styles.css.js';\n\nconst ANNOTATION_ITEM_HEIGHT = 31;\nconst PANE_ANNOTATIONS_PADDING = 12;\nconst MIN_HEIGHT = 3 * ANNOTATION_ITEM_HEIGHT + 2 * PANE_ANNOTATIONS_PADDING;\n\nexport interface PaneProps {\n  id: string;\n\n  visible: boolean;\n  annotations: Ace.Annotation[];\n  highlighted?: Ace.Annotation;\n\n  cursorPositionLabel: (row: number, column: number) => string;\n  closeButtonAriaLabel: string;\n\n  onClose: () => void;\n  onAnnotationClick: (annotation: Ace.Annotation) => void;\n  onAnnotationClear: () => void;\n}\n\nexport const Pane = ({\n  id,\n  visible,\n  annotations,\n  highlighted,\n  onClose,\n  onAnnotationClick,\n  onAnnotationClear,\n  cursorPositionLabel,\n  closeButtonAriaLabel,\n}: PaneProps) => {\n  const [paneHeight, setPaneHeight] = useState(MIN_HEIGHT);\n  const listRef = useRef<HTMLTableSectionElement>(null);\n  const [isFocusTrapActive, setFocusTrapActive] = useState(false);\n\n  useEffect(() => {\n    if (!highlighted) {\n      return;\n    }\n    const { row, column } = highlighted;\n    const highlightedAnnotationIndex = annotations.indexOf(\n      annotations.filter(a => a.row === row && a.column === column)[0]\n    );\n\n    if (highlightedAnnotationIndex > -1) {\n      const errorItem = listRef.current?.children[highlightedAnnotationIndex] as HTMLElement | undefined;\n      scrollElementIntoView(errorItem);\n    }\n  }, [highlighted, annotations]);\n\n  useEffect(() => {\n    if (!visible) {\n      setFocusTrapActive(false);\n    }\n  }, [visible]);\n\n  const onItemFocus = () => {\n    setFocusTrapActive(true);\n    onAnnotationClear();\n  };\n\n  const onItemClick = (annotation: Ace.Annotation) => {\n    setFocusTrapActive(false);\n    onAnnotationClick(annotation);\n  };\n\n  const onItemKeyDown = (annotation: Ace.Annotation, event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {\n      event.preventDefault();\n      setFocusTrapActive(false);\n      onAnnotationClick(annotation);\n    }\n  };\n\n  const onEscKeyDown = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.escape) {\n      event.preventDefault();\n      setFocusTrapActive(false);\n      onClose();\n    }\n  };\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <div id={id} className={styles.pane} onKeyDown={onEscKeyDown} role=\"tabpanel\">\n      <ResizableBox height={paneHeight} minHeight={MIN_HEIGHT} onResize={newHeight => setPaneHeight(newHeight)}>\n        <FocusLock disabled={!isFocusTrapActive} className={styles['focus-lock']} autoFocus={true}>\n          <div className={styles.pane__list} tabIndex={-1}>\n            <table className={styles.pane__table} role=\"presentation\">\n              <colgroup>\n                <col style={{ width: 1 } /* shrink to fit content */} />\n                <col style={{ width: 'auto' }} />\n              </colgroup>\n              <tbody ref={listRef}>\n                {annotations.map((annotation, i) => (\n                  <tr\n                    key={i}\n                    className={clsx(styles.pane__item, {\n                      [styles['pane__item--highlighted']]: annotation === highlighted,\n                    })}\n                    onFocus={onItemFocus}\n                    onMouseOver={onAnnotationClear}\n                    onClick={onItemClick.bind(null, annotation)}\n                    onKeyDown={onItemKeyDown.bind(null, annotation)}\n                    tabIndex={0}\n                    role=\"link\"\n                  >\n                    <td className={clsx(styles.pane__location, styles.pane__cell)} tabIndex={-1}>\n                      {cursorPositionLabel((annotation.row || 0) + 1, (annotation.column || 0) + 1)}\n                    </td>\n                    <td className={clsx(styles.pane__description, styles.pane__cell)} tabIndex={-1}>\n                      {annotation.text}\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n          <div className={styles['pane__close-container']}>\n            <InternalButton\n              formAction=\"none\"\n              variant=\"icon\"\n              iconName=\"close\"\n              onClick={onClose}\n              ariaLabel={closeButtonAriaLabel}\n            />\n          </div>\n        </FocusLock>\n      </ResizableBox>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"pane.js","sourceRoot":"lib/default/","sources":["code-editor/pane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { Ace } from 'ace-builds';\n\nimport { KeyCode } from '../internal/keycode';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport FocusLock from '../internal/components/focus-lock';\n\nimport { InternalButton } from '../button/internal';\nimport { ResizableBox } from './resizable-box';\n\nimport styles from './styles.css.js';\n\nconst ANNOTATION_ITEM_HEIGHT = 31;\nconst PANE_ANNOTATIONS_PADDING = 12;\nconst MIN_HEIGHT = 3 * ANNOTATION_ITEM_HEIGHT + 2 * PANE_ANNOTATIONS_PADDING;\n\nexport interface PaneProps {\n  id: string;\n\n  visible: boolean;\n  annotations: Ace.Annotation[];\n  highlighted?: Ace.Annotation;\n\n  cursorPositionLabel?: (row: number, column: number) => string;\n  closeButtonAriaLabel?: string;\n\n  onClose: () => void;\n  onAnnotationClick: (annotation: Ace.Annotation) => void;\n  onAnnotationClear: () => void;\n}\n\nexport const Pane = ({\n  id,\n  visible,\n  annotations,\n  highlighted,\n  onClose,\n  onAnnotationClick,\n  onAnnotationClear,\n  cursorPositionLabel,\n  closeButtonAriaLabel,\n}: PaneProps) => {\n  const [paneHeight, setPaneHeight] = useState(MIN_HEIGHT);\n  const listRef = useRef<HTMLTableSectionElement>(null);\n  const [isFocusTrapActive, setFocusTrapActive] = useState(false);\n\n  useEffect(() => {\n    if (!highlighted) {\n      return;\n    }\n    const { row, column } = highlighted;\n    const highlightedAnnotationIndex = annotations.indexOf(\n      annotations.filter(a => a.row === row && a.column === column)[0]\n    );\n\n    if (highlightedAnnotationIndex > -1) {\n      const errorItem = listRef.current?.children[highlightedAnnotationIndex] as HTMLElement | undefined;\n      scrollElementIntoView(errorItem);\n    }\n  }, [highlighted, annotations]);\n\n  useEffect(() => {\n    if (!visible) {\n      setFocusTrapActive(false);\n    }\n  }, [visible]);\n\n  const onItemFocus = () => {\n    setFocusTrapActive(true);\n    onAnnotationClear();\n  };\n\n  const onItemClick = (annotation: Ace.Annotation) => {\n    setFocusTrapActive(false);\n    onAnnotationClick(annotation);\n  };\n\n  const onItemKeyDown = (annotation: Ace.Annotation, event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {\n      event.preventDefault();\n      setFocusTrapActive(false);\n      onAnnotationClick(annotation);\n    }\n  };\n\n  const onEscKeyDown = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.escape) {\n      event.preventDefault();\n      setFocusTrapActive(false);\n      onClose();\n    }\n  };\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <div id={id} className={styles.pane} onKeyDown={onEscKeyDown} role=\"tabpanel\">\n      <ResizableBox height={paneHeight} minHeight={MIN_HEIGHT} onResize={newHeight => setPaneHeight(newHeight)}>\n        <FocusLock disabled={!isFocusTrapActive} className={styles['focus-lock']} autoFocus={true}>\n          <div className={styles.pane__list} tabIndex={-1}>\n            <table className={styles.pane__table} role=\"presentation\">\n              <colgroup>\n                <col style={{ width: 1 } /* shrink to fit content */} />\n                <col style={{ width: 'auto' }} />\n              </colgroup>\n              <tbody ref={listRef}>\n                {annotations.map((annotation, i) => (\n                  <tr\n                    key={i}\n                    className={clsx(styles.pane__item, {\n                      [styles['pane__item--highlighted']]: annotation === highlighted,\n                    })}\n                    onFocus={onItemFocus}\n                    onMouseOver={onAnnotationClear}\n                    onClick={onItemClick.bind(null, annotation)}\n                    onKeyDown={onItemKeyDown.bind(null, annotation)}\n                    tabIndex={0}\n                    role=\"link\"\n                  >\n                    <td className={clsx(styles.pane__location, styles.pane__cell)} tabIndex={-1}>\n                      {cursorPositionLabel?.((annotation.row || 0) + 1, (annotation.column || 0) + 1) ?? ''}\n                    </td>\n                    <td className={clsx(styles.pane__description, styles.pane__cell)} tabIndex={-1}>\n                      {annotation.text}\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n          <div className={styles['pane__close-container']}>\n            <InternalButton\n              formAction=\"none\"\n              variant=\"icon\"\n              iconName=\"close\"\n              onClick={onClose}\n              ariaLabel={closeButtonAriaLabel}\n            />\n          </div>\n        </FocusLock>\n      </ResizableBox>\n    </div>\n  );\n};\n"]}

package/lib/internal/template/code-editor/preferences-modal.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import { CodeEditorProps } from './interfaces';
 interface PreferencesModali18nStrings {
-    header: string;
-    cancel: string;
-    confirm: string;
-    wrapLines: string;
-    theme: string;
-    lightThemes: string;
-    darkThemes: string;
+    header?: string;
+    cancel?: string;
+    confirm?: string;
+    wrapLines?: string;
+    theme?: string;
+    lightThemes?: string;
+    darkThemes?: string;
     themeFilteringPlaceholder?: string;
     themeFilteringAriaLabel?: string;
     themeFilteringClearAriaLabel?: string;

package/lib/internal/template/code-editor/preferences-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preferences-modal.d.ts","sourceRoot":"lib/default/","sources":["code-editor/preferences-modal.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAEnD,WAAW,EAAE,2BAA2B,CAAC;IAEzC,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,YAAY,EAAE,eAAe,CAAC,KAAK,CAAC;IAEpC,SAAS,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC,WAAW,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;gCASsB,qBAAqB;AAA5C,wBA8DE"}
+{"version":3,"file":"preferences-modal.d.ts","sourceRoot":"lib/default/","sources":["code-editor/preferences-modal.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,UAAU,2BAA2B;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAEnD,WAAW,EAAE,2BAA2B,CAAC;IAEzC,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,YAAY,EAAE,eAAe,CAAC,KAAK,CAAC;IAEpC,SAAS,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC,WAAW,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;gCASsB,qBAAqB;AAA5C,wBA8DE"}

package/lib/internal/template/code-editor/preferences-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"preferences-modal.js","sourceRoot":"lib/default/","sources":["code-editor/preferences-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\n\nimport InternalBox from '../box/internal';\nimport { InternalButton } from '../button/internal';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalModal from '../modal/internal';\nimport { SelectProps } from '../select/interfaces';\nimport InternalSelect from '../select/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { NonCancelableCustomEvent } from '../internal/events';\nimport { LightThemes, DarkThemes } from './ace-themes';\nimport { CodeEditorProps } from './interfaces';\n\ninterface PreferencesModali18nStrings {\n  header: string;\n  cancel: string;\n  confirm: string;\n  wrapLines: string;\n  theme: string;\n  lightThemes: string;\n  darkThemes: string;\n  themeFilteringPlaceholder?: string;\n  themeFilteringAriaLabel?: string;\n  themeFilteringClearAriaLabel?: string;\n}\n\ninterface PreferencesModalProps {\n  preferences?: Partial<CodeEditorProps.Preferences>;\n\n  i18nStrings: PreferencesModali18nStrings;\n\n  themes: CodeEditorProps['themes'];\n  defaultTheme: CodeEditorProps.Theme;\n\n  onConfirm: (preferences: CodeEditorProps.Preferences) => void;\n  onDismiss: () => void;\n}\n\nfunction filterThemes(allThemes: ReadonlyArray<SelectProps.Option>, available: ReadonlyArray<string> | undefined) {\n  if (!available) {\n    return allThemes;\n  }\n  return allThemes.filter(theme => available.indexOf(theme.value!) > -1);\n}\n\nexport default (props: PreferencesModalProps) => {\n  const [wrapLines, setWrapLines] = useState<boolean>(props.preferences?.wrapLines ?? true);\n  const [theme, setTheme] = useState<CodeEditorProps.Theme>(props.preferences?.theme ?? props.defaultTheme);\n  const themeOptions = [\n    {\n      label: props.i18nStrings.lightThemes,\n      options: filterThemes(LightThemes, props.themes?.light),\n    },\n    {\n      label: props.i18nStrings.darkThemes,\n      options: filterThemes(DarkThemes, props.themes?.dark),\n    },\n  ];\n  const [selectedThemeOption, setSelectedThemeOption] = useState<SelectProps.Option>(\n    () => [...LightThemes, ...DarkThemes].filter(t => t.value === theme)[0]\n  );\n\n  const onThemeSelected = (e: NonCancelableCustomEvent<SelectProps.ChangeDetail>) => {\n    setTheme(e.detail.selectedOption.value as CodeEditorProps.Theme);\n    setSelectedThemeOption(e.detail.selectedOption);\n  };\n\n  return (\n    <InternalModal\n      size=\"medium\"\n      visible={true}\n      onDismiss={props.onDismiss}\n      header={props.i18nStrings.header}\n      closeAriaLabel={props.i18nStrings.cancel}\n      footer={\n        <InternalBox float=\"right\">\n          <InternalSpaceBetween direction=\"horizontal\" size=\"xs\">\n            <InternalButton onClick={props.onDismiss}>{props.i18nStrings.cancel}</InternalButton>\n            <InternalButton onClick={() => props.onConfirm({ wrapLines, theme })} variant=\"primary\">\n              {props.i18nStrings.confirm}\n            </InternalButton>\n          </InternalSpaceBetween>\n        </InternalBox>\n      }\n    >\n      <InternalColumnLayout columns={2} variant=\"text-grid\">\n        <div>\n          <InternalCheckbox checked={wrapLines} onChange={e => setWrapLines(e.detail.checked)}>\n            {props.i18nStrings.wrapLines}\n          </InternalCheckbox>\n        </div>\n        <div>\n          <InternalFormField label={props.i18nStrings.theme}>\n            <InternalSelect\n              selectedOption={selectedThemeOption}\n              onChange={onThemeSelected}\n              options={themeOptions}\n              filteringType=\"auto\"\n              filteringAriaLabel={props.i18nStrings.themeFilteringAriaLabel}\n              filteringClearAriaLabel={props.i18nStrings.themeFilteringClearAriaLabel}\n              filteringPlaceholder={props.i18nStrings.themeFilteringPlaceholder}\n            />\n          </InternalFormField>\n        </div>\n      </InternalColumnLayout>\n    </InternalModal>\n  );\n};\n"]}
+{"version":3,"file":"preferences-modal.js","sourceRoot":"lib/default/","sources":["code-editor/preferences-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\n\nimport InternalBox from '../box/internal';\nimport { InternalButton } from '../button/internal';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalModal from '../modal/internal';\nimport { SelectProps } from '../select/interfaces';\nimport InternalSelect from '../select/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { NonCancelableCustomEvent } from '../internal/events';\nimport { LightThemes, DarkThemes } from './ace-themes';\nimport { CodeEditorProps } from './interfaces';\n\ninterface PreferencesModali18nStrings {\n  header?: string;\n  cancel?: string;\n  confirm?: string;\n  wrapLines?: string;\n  theme?: string;\n  lightThemes?: string;\n  darkThemes?: string;\n  themeFilteringPlaceholder?: string;\n  themeFilteringAriaLabel?: string;\n  themeFilteringClearAriaLabel?: string;\n}\n\ninterface PreferencesModalProps {\n  preferences?: Partial<CodeEditorProps.Preferences>;\n\n  i18nStrings: PreferencesModali18nStrings;\n\n  themes: CodeEditorProps['themes'];\n  defaultTheme: CodeEditorProps.Theme;\n\n  onConfirm: (preferences: CodeEditorProps.Preferences) => void;\n  onDismiss: () => void;\n}\n\nfunction filterThemes(allThemes: ReadonlyArray<SelectProps.Option>, available: ReadonlyArray<string> | undefined) {\n  if (!available) {\n    return allThemes;\n  }\n  return allThemes.filter(theme => available.indexOf(theme.value!) > -1);\n}\n\nexport default (props: PreferencesModalProps) => {\n  const [wrapLines, setWrapLines] = useState<boolean>(props.preferences?.wrapLines ?? true);\n  const [theme, setTheme] = useState<CodeEditorProps.Theme>(props.preferences?.theme ?? props.defaultTheme);\n  const themeOptions = [\n    {\n      label: props.i18nStrings.lightThemes,\n      options: filterThemes(LightThemes, props.themes?.light),\n    },\n    {\n      label: props.i18nStrings.darkThemes,\n      options: filterThemes(DarkThemes, props.themes?.dark),\n    },\n  ];\n  const [selectedThemeOption, setSelectedThemeOption] = useState<SelectProps.Option>(\n    () => [...LightThemes, ...DarkThemes].filter(t => t.value === theme)[0]\n  );\n\n  const onThemeSelected = (e: NonCancelableCustomEvent<SelectProps.ChangeDetail>) => {\n    setTheme(e.detail.selectedOption.value as CodeEditorProps.Theme);\n    setSelectedThemeOption(e.detail.selectedOption);\n  };\n\n  return (\n    <InternalModal\n      size=\"medium\"\n      visible={true}\n      onDismiss={props.onDismiss}\n      header={props.i18nStrings.header}\n      closeAriaLabel={props.i18nStrings.cancel}\n      footer={\n        <InternalBox float=\"right\">\n          <InternalSpaceBetween direction=\"horizontal\" size=\"xs\">\n            <InternalButton onClick={props.onDismiss}>{props.i18nStrings.cancel}</InternalButton>\n            <InternalButton onClick={() => props.onConfirm({ wrapLines, theme })} variant=\"primary\">\n              {props.i18nStrings.confirm}\n            </InternalButton>\n          </InternalSpaceBetween>\n        </InternalBox>\n      }\n    >\n      <InternalColumnLayout columns={2} variant=\"text-grid\">\n        <div>\n          <InternalCheckbox checked={wrapLines} onChange={e => setWrapLines(e.detail.checked)}>\n            {props.i18nStrings.wrapLines}\n          </InternalCheckbox>\n        </div>\n        <div>\n          <InternalFormField label={props.i18nStrings.theme}>\n            <InternalSelect\n              selectedOption={selectedThemeOption}\n              onChange={onThemeSelected}\n              options={themeOptions}\n              filteringType=\"auto\"\n              filteringAriaLabel={props.i18nStrings.themeFilteringAriaLabel}\n              filteringClearAriaLabel={props.i18nStrings.themeFilteringClearAriaLabel}\n              filteringPlaceholder={props.i18nStrings.themeFilteringPlaceholder}\n            />\n          </InternalFormField>\n        </div>\n      </InternalColumnLayout>\n    </InternalModal>\n  );\n};\n"]}

package/lib/internal/template/code-editor/status-bar.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { CodeEditorProps } from './interfaces';
 interface StatusBarProps {
     languageLabel: string;
-    cursorPosition: string;
+    cursorPosition?: string;
     paneStatus: string;
     isTabFocused: boolean;
     paneId?: string;
-    i18nStrings: CodeEditorProps.I18nStrings;
+    i18nStrings?: CodeEditorProps.I18nStrings;
     errorCount: number;
     warningCount: number;
     isRefresh: boolean;

package/lib/internal/template/code-editor/status-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-bar.d.ts","sourceRoot":"lib/default/","sources":["code-editor/status-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,UAAU,cAAc;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IAEnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAEpD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AA+GD,eAAO,MAAM,SAAS,mDAAoD,cAAc,gBAqBvF,CAAC"}
+{"version":3,"file":"status-bar.d.ts","sourceRoot":"lib/default/","sources":["code-editor/status-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,UAAU,cAAc;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IAEnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAEpD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AAgHD,eAAO,MAAM,SAAS,mDAAoD,cAAc,gBAqBvF,CAAC"}

package/lib/internal/template/code-editor/status-bar.js

@@ -8,9 +8,11 @@ import LiveRegion from '../internal/components/live-region/index';
 import { TabButton } from './tab-button';
 import { InternalButton } from '../button/internal';
 import { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';
+import { useInternalI18n } from '../internal/i18n/context.js';
 function InternalStatusBar({ languageLabel, cursorPosition, paneStatus, onErrorPaneToggle, onWarningPaneToggle, onTabFocus, onTabBlur, errorsTabRef, warningsTabRef, isTabFocused, paneId, onPreferencesOpen, i18nStrings, errorCount, warningCount, leftBarRef, isVirtual, minifyCounters, isRefresh, }) {
-    const errorText = `${i18nStrings.errorsTab}: ${errorCount}`;
-    const warningText = `${i18nStrings.warningsTab}: ${warningCount}`;
+    const i18n = useInternalI18n('code-editor');
+    const errorText = `${i18n('i18nStrings.errorsTab', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorsTab)}: ${errorCount}`;
+    const warningText = `${i18n('i18nStrings.warningsTab', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningsTab)}: ${warningCount}`;
     // Virtual status bar is inaccessible for screen readers and keyboard interactions.
     return (React.createElement("div", { className: clsx(styles['status-bar'], {
             [styles['status-bar-with-hidden-pane']]: paneStatus === 'hidden',
@@ -32,7 +34,7 @@ function InternalStatusBar({ languageLabel, cursorPosition, paneStatus, onErrorP
                 React.createElement("span", null, warningText))),
         React.createElement("div", { className: styles['status-bar__right'] },
             React.createElement("div", { className: styles['status-bar__cog-button'] },
-                React.createElement(InternalButton, { disabled: isVirtual, formAction: "none", variant: "icon", iconName: "settings", iconAlt: "Settings", ariaLabel: i18nStrings.preferencesButtonAriaLabel, onClick: onPreferencesOpen, __nativeAttributes: {
+                React.createElement(InternalButton, { disabled: isVirtual, formAction: "none", variant: "icon", iconName: "settings", iconAlt: "Settings", ariaLabel: i18n('i18nStrings.preferencesButtonAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesButtonAriaLabel), onClick: onPreferencesOpen, __nativeAttributes: {
                         tabIndex: paneStatus !== 'hidden' && isTabFocused ? -1 : undefined,
                         'aria-hidden': paneStatus !== 'hidden' && isTabFocused ? true : undefined,
                     } })))));

package/lib/internal/template/code-editor/status-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-bar.js","sourceRoot":"lib/default/","sources":["code-editor/status-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport LiveRegion from '../internal/components/live-region/index';\nimport { TabButton } from './tab-button';\nimport { InternalButton } from '../button/internal';\nimport { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';\nimport { CodeEditorProps } from './interfaces';\n\ninterface StatusBarProps {\n  languageLabel: string;\n  cursorPosition: string;\n  paneStatus: string;\n  isTabFocused: boolean;\n  paneId?: string;\n  i18nStrings: CodeEditorProps.I18nStrings;\n  errorCount: number;\n  warningCount: number;\n  isRefresh: boolean;\n\n  errorsTabRef?: React.RefObject<HTMLButtonElement>;\n  warningsTabRef?: React.RefObject<HTMLButtonElement>;\n\n  onErrorPaneToggle: () => void;\n  onWarningPaneToggle: () => void;\n  onTabFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  onTabBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  onPreferencesOpen: () => void;\n  onHeightChange?: (height: number | null) => void;\n}\n\ntype InternalStatusBarProps = StatusBarProps & {\n  leftBarRef: React.Ref<HTMLDivElement>;\n  isVirtual: boolean;\n  minifyCounters: boolean;\n};\n\nfunction InternalStatusBar({\n  languageLabel,\n  cursorPosition,\n  paneStatus,\n  onErrorPaneToggle,\n  onWarningPaneToggle,\n  onTabFocus,\n  onTabBlur,\n  errorsTabRef,\n  warningsTabRef,\n  isTabFocused,\n  paneId,\n  onPreferencesOpen,\n  i18nStrings,\n  errorCount,\n  warningCount,\n  leftBarRef,\n  isVirtual,\n  minifyCounters,\n  isRefresh,\n}: InternalStatusBarProps) {\n  const errorText = `${i18nStrings.errorsTab}: ${errorCount}`;\n  const warningText = `${i18nStrings.warningsTab}: ${warningCount}`;\n\n  // Virtual status bar is inaccessible for screen readers and keyboard interactions.\n\n  return (\n    <div\n      className={clsx(styles['status-bar'], {\n        [styles['status-bar-with-hidden-pane']]: paneStatus === 'hidden',\n        [styles['status-bar-virtual']]: isVirtual,\n      })}\n      aria-hidden={isVirtual}\n    >\n      <div\n        className={clsx(styles['status-bar__left'], {\n          [styles['status-bar__left-virtual']]: isVirtual,\n        })}\n        ref={leftBarRef}\n      >\n        <span className={styles['status-bar__language-mode']}>{languageLabel}</span>\n        <span className={styles['status-bar__cursor-position']}>{cursorPosition}</span>\n\n        <div role=\"tablist\">\n          <TabButton\n            text={minifyCounters ? ` ${errorCount}` : errorText}\n            className={styles['tab-button--errors']}\n            iconName=\"status-negative\"\n            disabled={errorCount === 0 || isVirtual}\n            active={paneStatus === 'error'}\n            onClick={onErrorPaneToggle}\n            onFocus={onTabFocus}\n            onBlur={onTabBlur}\n            ref={errorsTabRef}\n            ariaLabel={errorText}\n            paneId={paneId}\n            isRefresh={isRefresh}\n          />\n          <span className={styles['tab-button--divider']}></span>\n          <TabButton\n            text={minifyCounters ? ` ${warningCount}` : warningText}\n            className={styles['tab-button--warnings']}\n            iconName=\"status-warning\"\n            disabled={warningCount === 0 || isVirtual}\n            active={paneStatus === 'warning'}\n            onClick={onWarningPaneToggle}\n            onFocus={onTabFocus}\n            onBlur={onTabBlur}\n            ref={warningsTabRef}\n            tabIndex={paneStatus === 'error' && isTabFocused ? -1 : undefined}\n            ariaHidden={paneStatus === 'error' && isTabFocused ? true : undefined}\n            ariaLabel={warningText}\n            paneId={paneId}\n            isRefresh={isRefresh}\n          />\n        </div>\n        <LiveRegion assertive={true}>\n          <span>{errorText} </span>\n          <span>{warningText}</span>\n        </LiveRegion>\n      </div>\n\n      <div className={styles['status-bar__right']}>\n        <div className={styles['status-bar__cog-button']}>\n          <InternalButton\n            disabled={isVirtual}\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"settings\"\n            iconAlt=\"Settings\"\n            ariaLabel={i18nStrings.preferencesButtonAriaLabel}\n            onClick={onPreferencesOpen}\n            __nativeAttributes={{\n              tabIndex: paneStatus !== 'hidden' && isTabFocused ? -1 : undefined,\n              'aria-hidden': paneStatus !== 'hidden' && isTabFocused ? true : undefined,\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const StatusBar = ({ errorsTabRef, warningsTabRef, ...restProps }: StatusBarProps) => {\n  // create a virtual status bar, in order to calculate the width with full tab button text\n  // and decide if tab button text needs to be reduced\n  const [realWidth, statusLeftBarRef] = useContainerQuery(rect => rect.width);\n  const [virtualWidth, virtualStatusLeftBarRef] = useContainerQuery(rect => rect.width);\n\n  const minifyCounters = virtualWidth !== null && realWidth !== null && virtualWidth > realWidth;\n\n  return (\n    <>\n      <InternalStatusBar\n        {...restProps}\n        isVirtual={false}\n        leftBarRef={statusLeftBarRef}\n        errorsTabRef={errorsTabRef}\n        warningsTabRef={warningsTabRef}\n        minifyCounters={minifyCounters}\n      />\n      <InternalStatusBar {...restProps} isVirtual={true} leftBarRef={virtualStatusLeftBarRef} minifyCounters={false} />\n    </>\n  );\n};\n"]}
+{"version":3,"file":"status-bar.js","sourceRoot":"lib/default/","sources":["code-editor/status-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport LiveRegion from '../internal/components/live-region/index';\nimport { TabButton } from './tab-button';\nimport { InternalButton } from '../button/internal';\nimport { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';\nimport { CodeEditorProps } from './interfaces';\nimport { useInternalI18n } from '../internal/i18n/context.js';\n\ninterface StatusBarProps {\n  languageLabel: string;\n  cursorPosition?: string;\n  paneStatus: string;\n  isTabFocused: boolean;\n  paneId?: string;\n  i18nStrings?: CodeEditorProps.I18nStrings;\n  errorCount: number;\n  warningCount: number;\n  isRefresh: boolean;\n\n  errorsTabRef?: React.RefObject<HTMLButtonElement>;\n  warningsTabRef?: React.RefObject<HTMLButtonElement>;\n\n  onErrorPaneToggle: () => void;\n  onWarningPaneToggle: () => void;\n  onTabFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  onTabBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  onPreferencesOpen: () => void;\n  onHeightChange?: (height: number | null) => void;\n}\n\ntype InternalStatusBarProps = StatusBarProps & {\n  leftBarRef: React.Ref<HTMLDivElement>;\n  isVirtual: boolean;\n  minifyCounters: boolean;\n};\n\nfunction InternalStatusBar({\n  languageLabel,\n  cursorPosition,\n  paneStatus,\n  onErrorPaneToggle,\n  onWarningPaneToggle,\n  onTabFocus,\n  onTabBlur,\n  errorsTabRef,\n  warningsTabRef,\n  isTabFocused,\n  paneId,\n  onPreferencesOpen,\n  i18nStrings,\n  errorCount,\n  warningCount,\n  leftBarRef,\n  isVirtual,\n  minifyCounters,\n  isRefresh,\n}: InternalStatusBarProps) {\n  const i18n = useInternalI18n('code-editor');\n  const errorText = `${i18n('i18nStrings.errorsTab', i18nStrings?.errorsTab)}: ${errorCount}`;\n  const warningText = `${i18n('i18nStrings.warningsTab', i18nStrings?.warningsTab)}: ${warningCount}`;\n\n  // Virtual status bar is inaccessible for screen readers and keyboard interactions.\n\n  return (\n    <div\n      className={clsx(styles['status-bar'], {\n        [styles['status-bar-with-hidden-pane']]: paneStatus === 'hidden',\n        [styles['status-bar-virtual']]: isVirtual,\n      })}\n      aria-hidden={isVirtual}\n    >\n      <div\n        className={clsx(styles['status-bar__left'], {\n          [styles['status-bar__left-virtual']]: isVirtual,\n        })}\n        ref={leftBarRef}\n      >\n        <span className={styles['status-bar__language-mode']}>{languageLabel}</span>\n        <span className={styles['status-bar__cursor-position']}>{cursorPosition}</span>\n\n        <div role=\"tablist\">\n          <TabButton\n            text={minifyCounters ? ` ${errorCount}` : errorText}\n            className={styles['tab-button--errors']}\n            iconName=\"status-negative\"\n            disabled={errorCount === 0 || isVirtual}\n            active={paneStatus === 'error'}\n            onClick={onErrorPaneToggle}\n            onFocus={onTabFocus}\n            onBlur={onTabBlur}\n            ref={errorsTabRef}\n            ariaLabel={errorText}\n            paneId={paneId}\n            isRefresh={isRefresh}\n          />\n          <span className={styles['tab-button--divider']}></span>\n          <TabButton\n            text={minifyCounters ? ` ${warningCount}` : warningText}\n            className={styles['tab-button--warnings']}\n            iconName=\"status-warning\"\n            disabled={warningCount === 0 || isVirtual}\n            active={paneStatus === 'warning'}\n            onClick={onWarningPaneToggle}\n            onFocus={onTabFocus}\n            onBlur={onTabBlur}\n            ref={warningsTabRef}\n            tabIndex={paneStatus === 'error' && isTabFocused ? -1 : undefined}\n            ariaHidden={paneStatus === 'error' && isTabFocused ? true : undefined}\n            ariaLabel={warningText}\n            paneId={paneId}\n            isRefresh={isRefresh}\n          />\n        </div>\n        <LiveRegion assertive={true}>\n          <span>{errorText} </span>\n          <span>{warningText}</span>\n        </LiveRegion>\n      </div>\n\n      <div className={styles['status-bar__right']}>\n        <div className={styles['status-bar__cog-button']}>\n          <InternalButton\n            disabled={isVirtual}\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"settings\"\n            iconAlt=\"Settings\"\n            ariaLabel={i18n('i18nStrings.preferencesButtonAriaLabel', i18nStrings?.preferencesButtonAriaLabel)}\n            onClick={onPreferencesOpen}\n            __nativeAttributes={{\n              tabIndex: paneStatus !== 'hidden' && isTabFocused ? -1 : undefined,\n              'aria-hidden': paneStatus !== 'hidden' && isTabFocused ? true : undefined,\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const StatusBar = ({ errorsTabRef, warningsTabRef, ...restProps }: StatusBarProps) => {\n  // create a virtual status bar, in order to calculate the width with full tab button text\n  // and decide if tab button text needs to be reduced\n  const [realWidth, statusLeftBarRef] = useContainerQuery(rect => rect.width);\n  const [virtualWidth, virtualStatusLeftBarRef] = useContainerQuery(rect => rect.width);\n\n  const minifyCounters = virtualWidth !== null && realWidth !== null && virtualWidth > realWidth;\n\n  return (\n    <>\n      <InternalStatusBar\n        {...restProps}\n        isVirtual={false}\n        leftBarRef={statusLeftBarRef}\n        errorsTabRef={errorsTabRef}\n        warningsTabRef={warningsTabRef}\n        minifyCounters={minifyCounters}\n      />\n      <InternalStatusBar {...restProps} isVirtual={true} leftBarRef={virtualStatusLeftBarRef} minifyCounters={false} />\n    </>\n  );\n};\n"]}

package/lib/internal/template/expandable-section/interfaces.d.ts

@@ -41,7 +41,7 @@ export interface ExpandableSectionProps extends BaseComponentProps {
      */
     header?: React.ReactNode;
     /**
-     * Heading displayed above the content text. When using the container variant, use it with additional header props. Otherwise, use plain text.
+     * The heading text. Use plain text. When using the container variant, you can use additional header props like `headerDescription` and `headerCounter` to display other elements in the header.
      */
     headerText?: React.ReactNode;
     /**

package/lib/internal/template/expandable-section/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["expandable-section/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace ExpandableSectionProps {\n  export type Variant = 'default' | 'footer' | 'container' | 'navigation';\n  export interface ChangeDetail {\n    expanded: boolean;\n  }\n  export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n  /**\n   * Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n   * manner even if you provide a value for this property.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n   * manner if you provide a value for this property.\n   */\n  expanded?: boolean;\n\n  /**\n   * The possible variants of an expandable section are as follows:\n   *  * `default` - Use this variant in any context.\n   *  * `footer` - Use this variant in container footers.\n   *  * `container` - Use this variant in a detail page alongside other containers.\n   *  * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n   *    It doesn't have any default styles.\n   * */\n  variant?: ExpandableSectionProps.Variant;\n\n  /**\n   * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Primary content displayed in the expandable section element.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * @deprecated Use `headerText` instead.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Heading displayed above the content text. When using the container variant, use it with additional header props. Otherwise, use plain text.\n   */\n  headerText?: React.ReactNode;\n\n  /**\n   * Supplementary text below the heading. Use with container variant.\n   */\n  headerDescription?: string;\n\n  /**\n   * Specifies secondary text that's displayed to the right of the heading title. Use with container variant.\n   * Behaves similar to the Header component counter.\n   */\n  headerCounter?: string;\n\n  /**\n   * Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).\n   * Use with container variant (which defaults to H2) or default/footer variants (which default to DIV). Note that this only\n   * works with the `headerText` slot (not with the deprecated `header`), and not with the navigation variant.\n   */\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n\n  /**\n   * Adds `aria-label` to the header element.\n   * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.\n   */\n  headerAriaLabel?: string;\n\n  /**\n   * Called when the state changes (that is, when the user expands or collapses the component).\n   * The event `detail` contains the current value of the `expanded` property.\n   */\n  onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["expandable-section/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace ExpandableSectionProps {\n  export type Variant = 'default' | 'footer' | 'container' | 'navigation';\n  export interface ChangeDetail {\n    expanded: boolean;\n  }\n  export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n  /**\n   * Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n   * manner even if you provide a value for this property.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n   * manner if you provide a value for this property.\n   */\n  expanded?: boolean;\n\n  /**\n   * The possible variants of an expandable section are as follows:\n   *  * `default` - Use this variant in any context.\n   *  * `footer` - Use this variant in container footers.\n   *  * `container` - Use this variant in a detail page alongside other containers.\n   *  * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n   *    It doesn't have any default styles.\n   * */\n  variant?: ExpandableSectionProps.Variant;\n\n  /**\n   * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Primary content displayed in the expandable section element.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * @deprecated Use `headerText` instead.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * The heading text. Use plain text. When using the container variant, you can use additional header props like `headerDescription` and `headerCounter` to display other elements in the header.\n   */\n  headerText?: React.ReactNode;\n\n  /**\n   * Supplementary text below the heading. Use with container variant.\n   */\n  headerDescription?: string;\n\n  /**\n   * Specifies secondary text that's displayed to the right of the heading title. Use with container variant.\n   * Behaves similar to the Header component counter.\n   */\n  headerCounter?: string;\n\n  /**\n   * Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).\n   * Use with container variant (which defaults to H2) or default/footer variants (which default to DIV). Note that this only\n   * works with the `headerText` slot (not with the deprecated `header`), and not with the navigation variant.\n   */\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n\n  /**\n   * Adds `aria-label` to the header element.\n   * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.\n   */\n  headerAriaLabel?: string;\n\n  /**\n   * Called when the state changes (that is, when the user expands or collapses the component).\n   * The event `detail` contains the current value of the `expanded` property.\n   */\n  onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,eAoBjH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,eAqBjH"}

package/lib/internal/template/help-panel/index.js

@@ -9,14 +9,16 @@ import styles from './styles.css.js';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import LiveRegion from '../internal/components/live-region';
+import { useInternalI18n } from '../internal/i18n/context';
 export default function HelpPanel(_a) {
     var { header, footer, children, loading, loadingText } = _a, restProps = __rest(_a, ["header", "footer", "children", "loading", "loadingText"]);
     const { __internalRootRef } = useBaseComponent('HelpPanel');
     const baseProps = getBaseProps(restProps);
+    const i18n = useInternalI18n('help-panel');
     const containerProps = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles['help-panel']) });
     return loading ? (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
         React.createElement(InternalStatusIndicator, { type: "loading" },
-            React.createElement(LiveRegion, { visible: true }, loadingText)))) : (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
+            React.createElement(LiveRegion, { visible: true }, i18n('loadingText', loadingText))))) : (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
         header && React.createElement("div", { className: clsx(styles.header) }, header),
         React.createElement("div", { className: clsx(styles.content) }, children),
         footer && React.createElement("div", { className: styles.footer }, footer)));

package/lib/internal/template/help-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAI5D,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAgF;QAAhF,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,OAAgC,EAA3B,SAAS,cAA9D,0DAAgE,CAAF;IAC9F,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,GAC3D,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,IAAG,WAAW,CAAc,CAC7B,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,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAG,QAAQ,CAAO;QACrD,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CACpD,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { HelpPanelProps } from './interfaces';\nimport LiveRegion from '../internal/components/live-region';\n\nexport { HelpPanelProps };\n\nexport default function HelpPanel({ header, footer, children, loading, loadingText, ...restProps }: HelpPanelProps) {\n  const { __internalRootRef } = useBaseComponent('HelpPanel');\n  const baseProps = getBaseProps(restProps);\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles['help-panel']),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <LiveRegion visible={true}>{loadingText}</LiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={clsx(styles.header)}>{header}</div>}\n      <div className={clsx(styles.content)}>{children}</div>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  );\n}\n\napplyDisplayName(HelpPanel, 'HelpPanel');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["help-panel/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAgF;QAAhF,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,OAAgC,EAA3B,SAAS,cAA9D,0DAAgE,CAAF;IAC9F,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,GAC3D,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,IAAG,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAc,CAClD,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAG,MAAM,CAAO;QAC9D,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAG,QAAQ,CAAO;QACrD,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CACpD,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { HelpPanelProps } from './interfaces';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nexport { HelpPanelProps };\n\nexport default function HelpPanel({ header, footer, children, loading, loadingText, ...restProps }: HelpPanelProps) {\n  const { __internalRootRef } = useBaseComponent('HelpPanel');\n  const baseProps = getBaseProps(restProps);\n  const i18n = useInternalI18n('help-panel');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles['help-panel']),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <LiveRegion visible={true}>{i18n('loadingText', loadingText)}</LiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={clsx(styles.header)}>{header}</div>}\n      <div className={clsx(styles.content)}>{children}</div>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  );\n}\n\napplyDisplayName(HelpPanel, 'HelpPanel');\n"]}

package/lib/internal/template/internal/components/token-list/token-limit-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-limit-toggle.d.ts","sourceRoot":"lib/default/","sources":["internal/components/token-list/token-limit-toggle.tsx"],"names":[],"mappings":";AAKA,OAAO,EAA0B,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAgB,GACjB,EAAE,qBAAqB,eAsBvB"}
+{"version":3,"file":"token-limit-toggle.d.ts","sourceRoot":"lib/default/","sources":["internal/components/token-list/token-limit-toggle.tsx"],"names":[],"mappings":";AAKA,OAAO,EAA0B,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAgB,GACjB,EAAE,qBAAqB,eAwBvB"}

package/lib/internal/template/internal/components/token-list/token-limit-toggle.js

@@ -4,11 +4,13 @@ import React, { useCallback } from 'react';
 import InternalIcon from '../../../icon/internal';
 import { fireNonCancelableEvent } from '../../events';
 import styles from './styles.css.js';
+import { useInternalI18n } from '../../i18n/context';
 export default function TokenLimitToggle({ controlId, allHidden, expanded, numberOfHiddenOptions, onClick, i18nStrings = {}, }) {
+    const i18n = useInternalI18n('token-group');
     const numberOfHiddenOptionLabel = allHidden ? numberOfHiddenOptions : `+${numberOfHiddenOptions}`;
     const description = expanded
-        ? i18nStrings.limitShowFewer
-        : `${i18nStrings.limitShowMore || ''} (${numberOfHiddenOptionLabel})`;
+        ? i18n('i18nStrings.limitShowFewer', i18nStrings.limitShowFewer)
+        : `${i18n('i18nStrings.limitShowMore', i18nStrings.limitShowMore) || ''} (${numberOfHiddenOptionLabel})`;
     const handleClick = useCallback(() => {
         fireNonCancelableEvent(onClick, null);
     }, [onClick]);

package/lib/internal/template/internal/components/token-list/token-limit-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"token-limit-toggle.js","sourceRoot":"lib/default/","sources":["internal/components/token-list/token-limit-toggle.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAA6B,MAAM,cAAc,CAAC;AAGjF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAW,GAAG,EAAE,GACM;IACtB,MAAM,yBAAyB,GAAG,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,qBAAqB,EAAE,CAAC;IAClG,MAAM,WAAW,GAAG,QAAQ;QAC1B,CAAC,CAAC,WAAW,CAAC,cAAc;QAC5B,CAAC,CAAC,GAAG,WAAW,CAAC,aAAa,IAAI,EAAE,KAAK,yBAAyB,GAAG,CAAC;IAExE,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,sBAAsB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,OAAO,EAAE,WAAW,mBACL,SAAS,mBACT,QAAQ;QAEvB,oBAAC,YAAY,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,GAAI;QAC1E,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,WAAW,CAAQ,CAClD,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback } from 'react';\nimport InternalIcon from '../../../icon/internal';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport { I18nStrings } from './interfaces';\n\nimport styles from './styles.css.js';\ninterface TokenLimitToggleProps {\n  controlId?: string;\n  allHidden: boolean;\n  expanded: boolean;\n  numberOfHiddenOptions: number;\n  onClick?: NonCancelableEventHandler<null>;\n  i18nStrings?: I18nStrings;\n}\n\nexport default function TokenLimitToggle({\n  controlId,\n  allHidden,\n  expanded,\n  numberOfHiddenOptions,\n  onClick,\n  i18nStrings = {},\n}: TokenLimitToggleProps) {\n  const numberOfHiddenOptionLabel = allHidden ? numberOfHiddenOptions : `+${numberOfHiddenOptions}`;\n  const description = expanded\n    ? i18nStrings.limitShowFewer\n    : `${i18nStrings.limitShowMore || ''} (${numberOfHiddenOptionLabel})`;\n\n  const handleClick = useCallback(() => {\n    fireNonCancelableEvent(onClick, null);\n  }, [onClick]);\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.toggle}\n      onClick={handleClick}\n      aria-controls={controlId}\n      aria-expanded={expanded}\n    >\n      <InternalIcon name={expanded ? 'treeview-collapse' : 'treeview-expand'} />\n      <span className={styles.description}>{description}</span>\n    </button>\n  );\n}\n"]}
+{"version":3,"file":"token-limit-toggle.js","sourceRoot":"lib/default/","sources":["internal/components/token-list/token-limit-toggle.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAA6B,MAAM,cAAc,CAAC;AAGjF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAUrD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,WAAW,GAAG,EAAE,GACM;IACtB,MAAM,IAAI,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;IAE5C,MAAM,yBAAyB,GAAG,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,qBAAqB,EAAE,CAAC;IAClG,MAAM,WAAW,GAAG,QAAQ;QAC1B,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE,WAAW,CAAC,cAAc,CAAC;QAChE,CAAC,CAAC,GAAG,IAAI,CAAC,2BAA2B,EAAE,WAAW,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,yBAAyB,GAAG,CAAC;IAE3G,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,sBAAsB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,OAAO,EAAE,WAAW,mBACL,SAAS,mBACT,QAAQ;QAEvB,oBAAC,YAAY,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,GAAI;QAC1E,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,WAAW,CAAQ,CAClD,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback } from 'react';\nimport InternalIcon from '../../../icon/internal';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport { I18nStrings } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { useInternalI18n } from '../../i18n/context';\ninterface TokenLimitToggleProps {\n  controlId?: string;\n  allHidden: boolean;\n  expanded: boolean;\n  numberOfHiddenOptions: number;\n  onClick?: NonCancelableEventHandler<null>;\n  i18nStrings?: I18nStrings;\n}\n\nexport default function TokenLimitToggle({\n  controlId,\n  allHidden,\n  expanded,\n  numberOfHiddenOptions,\n  onClick,\n  i18nStrings = {},\n}: TokenLimitToggleProps) {\n  const i18n = useInternalI18n('token-group');\n\n  const numberOfHiddenOptionLabel = allHidden ? numberOfHiddenOptions : `+${numberOfHiddenOptions}`;\n  const description = expanded\n    ? i18n('i18nStrings.limitShowFewer', i18nStrings.limitShowFewer)\n    : `${i18n('i18nStrings.limitShowMore', i18nStrings.limitShowMore) || ''} (${numberOfHiddenOptionLabel})`;\n\n  const handleClick = useCallback(() => {\n    fireNonCancelableEvent(onClick, null);\n  }, [onClick]);\n\n  return (\n    <button\n      type=\"button\"\n      className={styles.toggle}\n      onClick={handleClick}\n      aria-controls={controlId}\n      aria-expanded={expanded}\n    >\n      <InternalIcon name={expanded ? 'treeview-collapse' : 'treeview-expand'} />\n      <span className={styles.description}>{description}</span>\n    </button>\n  );\n}\n"]}

package/lib/internal/template/internal/environment.js

@@ -1,6 +1,6 @@
 
     export var PACKAGE_SOURCE = 'components';
-    export var PACKAGE_VERSION = '3.0.0 (4551b53)';
+    export var PACKAGE_VERSION = '3.0.0 (589b1d2)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/lib/internal/template/internal/generated/theming/index.cjs.d.ts

@@ -534,7 +534,7 @@ export declare interface TypedOverride {
         borderRadiusTutorialPanelItem?: GlobalValue;
       }
     };
-    'flashbar'?: {
+    'header'?: {
       tokens: {
         colorChartsStatusCritical?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorChartsStatusHigh?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -712,7 +712,7 @@ export declare interface TypedOverride {
         borderRadiusTutorialPanelItem?: GlobalValue;
       }
     };
-    'header'?: {
+    'flashbar'?: {
       tokens: {
         colorChartsStatusCritical?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorChartsStatusHigh?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;

package/lib/internal/template/internal/generated/theming/index.d.ts

@@ -534,7 +534,7 @@ export declare interface TypedOverride {
         borderRadiusTutorialPanelItem?: GlobalValue;
       }
     };
-    'flashbar'?: {
+    'header'?: {
       tokens: {
         colorChartsStatusCritical?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorChartsStatusHigh?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
@@ -712,7 +712,7 @@ export declare interface TypedOverride {
         borderRadiusTutorialPanelItem?: GlobalValue;
       }
     };
-    'header'?: {
+    'flashbar'?: {
       tokens: {
         colorChartsStatusCritical?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;
         colorChartsStatusHigh?: GlobalValue | TypedModeValueOverride<'light' | 'dark'>;

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAelF,QAAA,MAAM,YAAY;cAHJ,SAAS,CAAC,SAAS,CAAC,GAAG,gBAAgB,GAAG,MAAM,GAAG,UAAU;uCA8I1E,CAAC;AAqBF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAgBlF,QAAA,MAAM,YAAY;cAHJ,SAAS,CAAC,SAAS,CAAC,GAAG,gBAAgB,GAAG,MAAM,GAAG,UAAU;uCAgJ1E,CAAC;AAqBF,eAAe,YAAY,CAAC"}

package/lib/internal/template/link/internal.js

@@ -12,6 +12,7 @@ import { KeyCode } from '../internal/keycode';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
+import { useInternalI18n } from '../internal/i18n/context';
 import { useFunnel, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 import { FunnelMetrics } from '../internal/analytics';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
@@ -22,6 +23,7 @@ const InternalLink = React.forwardRef((_a, ref) => {
     const isButton = !href;
     const specialStyles = ['top-navigation', 'link', 'recovery'];
     const hasSpecialStyle = specialStyles.indexOf(variant) > -1;
+    const i18n = useInternalI18n('link');
     const baseProps = getBaseProps(props);
     const anchorTarget = target !== null && target !== void 0 ? target : (external ? '_blank' : undefined);
     const anchorRel = rel !== null && rel !== void 0 ? rel : (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);
@@ -81,11 +83,12 @@ const InternalLink = React.forwardRef((_a, ref) => {
         // https://github.com/microsoft/TypeScript/issues/36659
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref: useMergeRefs(linkRef, __internalRootRef), className: clsx(styles.link, baseProps.className, applyButtonStyles ? styles.button : null, styles[getVariantStyle(variant)], styles[getFontSizeStyle(variant, fontSize)], styles[getColorStyle(variant, color)]), 'aria-label': ariaLabel, 'data-analytics-id': uniqueId });
+    const renderedExternalIconAriaLabel = i18n('externalIconAriaLabel', externalIconAriaLabel);
     const content = (React.createElement(React.Fragment, null,
         children,
         external && (React.createElement("span", { className: styles['icon-wrapper'] },
             "\u00A0",
-            React.createElement("span", { className: styles.icon, "aria-label": externalIconAriaLabel, role: externalIconAriaLabel ? 'img' : undefined },
+            React.createElement("span", { className: styles.icon, "aria-label": renderedExternalIconAriaLabel, role: renderedExternalIconAriaLabel ? 'img' : undefined },
                 React.createElement(InternalIcon, { name: "external", size: "inherit" }))))));
     if (isButton) {
         return (React.createElement("a", Object.assign({}, sharedProps, { role: "button", tabIndex: 0, onKeyDown: handleButtonKeyDown, onClick: handleButtonClick }), content));

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { KeyCode } from '../internal/keycode';\nimport { LinkProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useFunnel, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { getElementSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\n\ntype InternalLinkProps = InternalBaseComponentProps &\n  Omit<LinkProps, 'variant'> & {\n    variant?: LinkProps['variant'] | 'top-navigation' | 'link' | 'recovery';\n  };\n\nconst InternalLink = React.forwardRef(\n  (\n    {\n      variant = 'secondary',\n      fontSize = 'body-m',\n      color = 'normal',\n      external = false,\n      target,\n      href,\n      rel,\n      ariaLabel,\n      externalIconAriaLabel,\n      onFollow,\n      children,\n      __internalRootRef = null,\n      ...props\n    }: InternalLinkProps,\n    ref: React.Ref<LinkProps.Ref>\n  ) => {\n    checkSafeUrl('Link', href);\n    const isButton = !href;\n    const specialStyles = ['top-navigation', 'link', 'recovery'];\n    const hasSpecialStyle = specialStyles.indexOf(variant) > -1;\n\n    const baseProps = getBaseProps(props);\n    const anchorTarget = target ?? (external ? '_blank' : undefined);\n    const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n    const uniqueId = useUniqueId('link');\n\n    const { funnelInteractionId } = useFunnel();\n    const { stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n    const fireFunnelEvent = (funnelInteractionId: string) => {\n      if (variant === 'info') {\n        FunnelMetrics.helpPanelInteracted({\n          funnelInteractionId,\n          stepNumber,\n          stepNameSelector,\n          subStepSelector,\n          subStepNameSelector,\n          elementSelector: getElementSelector(uniqueId),\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      } else if (external) {\n        FunnelMetrics.externalLinkInteracted({\n          funnelInteractionId,\n          stepNumber,\n          stepNameSelector,\n          subStepSelector,\n          subStepNameSelector,\n          elementSelector: getElementSelector(uniqueId),\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      }\n    };\n\n    const fireFollowEvent = (event: React.SyntheticEvent) => {\n      if (funnelInteractionId) {\n        fireFunnelEvent(funnelInteractionId);\n      }\n\n      fireCancelableEvent(onFollow, { href, external, target: anchorTarget }, event);\n    };\n\n    const handleLinkClick = (event: React.MouseEvent) => {\n      if (isPlainLeftClick(event)) {\n        fireFollowEvent(event);\n      }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent) => {\n      fireFollowEvent(event);\n    };\n\n    const handleButtonKeyDown = (event: React.KeyboardEvent) => {\n      if (event.keyCode === KeyCode.space || event.keyCode === KeyCode.enter) {\n        event.preventDefault();\n        fireFollowEvent(event);\n      }\n    };\n\n    const linkRef = useRef<HTMLElement>(null);\n    const isVisualRefresh = useVisualRefresh();\n    useForwardFocus(ref, linkRef);\n\n    // Visual refresh should only add styles to buttons that don't already have unique styles (e.g. primary/secondary variants)\n    const applyButtonStyles = isButton && isVisualRefresh && !hasSpecialStyle;\n\n    const sharedProps = {\n      ...baseProps,\n      // https://github.com/microsoft/TypeScript/issues/36659\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref: useMergeRefs(linkRef as any, __internalRootRef),\n      className: clsx(\n        styles.link,\n        baseProps.className,\n        applyButtonStyles ? styles.button : null,\n        styles[getVariantStyle(variant)],\n        styles[getFontSizeStyle(variant, fontSize)],\n        styles[getColorStyle(variant, color)]\n      ),\n      'aria-label': ariaLabel,\n      'data-analytics-id': uniqueId,\n    };\n\n    const content = (\n      <>\n        {children}\n        {external && (\n          <span className={styles['icon-wrapper']}>\n            &nbsp;\n            <span\n              className={styles.icon}\n              aria-label={externalIconAriaLabel}\n              role={externalIconAriaLabel ? 'img' : undefined}\n            >\n              <InternalIcon name=\"external\" size=\"inherit\" />\n            </span>\n          </span>\n        )}\n      </>\n    );\n\n    if (isButton) {\n      return (\n        <a {...sharedProps} role=\"button\" tabIndex={0} onKeyDown={handleButtonKeyDown} onClick={handleButtonClick}>\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      // we dynamically set proper rel in the code above\n      // eslint-disable-next-line react/jsx-no-target-blank\n      <a {...sharedProps} target={anchorTarget} rel={anchorRel} href={href} onClick={handleLinkClick}>\n        {content}\n      </a>\n    );\n  }\n);\n\nfunction getVariantStyle(variant: Exclude<InternalLinkProps['variant'], undefined>) {\n  return `variant-${variant.replace(/^awsui-/, '')}`;\n}\n\nfunction getFontSizeStyle(variant: InternalLinkProps['variant'], fontSize: InternalLinkProps['fontSize']) {\n  switch (variant) {\n    case 'info':\n      return 'font-size-body-s';\n    case 'awsui-value-large':\n      return 'font-size-display-l';\n    default:\n      return `font-size-${fontSize}`;\n  }\n}\n\nfunction getColorStyle(variant: InternalLinkProps['variant'], color: InternalLinkProps['color']) {\n  return `color-${variant === 'info' ? 'normal' : color}`;\n}\n\nexport default InternalLink;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { KeyCode } from '../internal/keycode';\nimport { LinkProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { useFunnel, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { getElementSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\n\ntype InternalLinkProps = InternalBaseComponentProps &\n  Omit<LinkProps, 'variant'> & {\n    variant?: LinkProps['variant'] | 'top-navigation' | 'link' | 'recovery';\n  };\n\nconst InternalLink = React.forwardRef(\n  (\n    {\n      variant = 'secondary',\n      fontSize = 'body-m',\n      color = 'normal',\n      external = false,\n      target,\n      href,\n      rel,\n      ariaLabel,\n      externalIconAriaLabel,\n      onFollow,\n      children,\n      __internalRootRef = null,\n      ...props\n    }: InternalLinkProps,\n    ref: React.Ref<LinkProps.Ref>\n  ) => {\n    checkSafeUrl('Link', href);\n    const isButton = !href;\n    const specialStyles = ['top-navigation', 'link', 'recovery'];\n    const hasSpecialStyle = specialStyles.indexOf(variant) > -1;\n\n    const i18n = useInternalI18n('link');\n    const baseProps = getBaseProps(props);\n    const anchorTarget = target ?? (external ? '_blank' : undefined);\n    const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n    const uniqueId = useUniqueId('link');\n\n    const { funnelInteractionId } = useFunnel();\n    const { stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n    const fireFunnelEvent = (funnelInteractionId: string) => {\n      if (variant === 'info') {\n        FunnelMetrics.helpPanelInteracted({\n          funnelInteractionId,\n          stepNumber,\n          stepNameSelector,\n          subStepSelector,\n          subStepNameSelector,\n          elementSelector: getElementSelector(uniqueId),\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      } else if (external) {\n        FunnelMetrics.externalLinkInteracted({\n          funnelInteractionId,\n          stepNumber,\n          stepNameSelector,\n          subStepSelector,\n          subStepNameSelector,\n          elementSelector: getElementSelector(uniqueId),\n          subStepAllSelector: getSubStepAllSelector(),\n        });\n      }\n    };\n\n    const fireFollowEvent = (event: React.SyntheticEvent) => {\n      if (funnelInteractionId) {\n        fireFunnelEvent(funnelInteractionId);\n      }\n\n      fireCancelableEvent(onFollow, { href, external, target: anchorTarget }, event);\n    };\n\n    const handleLinkClick = (event: React.MouseEvent) => {\n      if (isPlainLeftClick(event)) {\n        fireFollowEvent(event);\n      }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent) => {\n      fireFollowEvent(event);\n    };\n\n    const handleButtonKeyDown = (event: React.KeyboardEvent) => {\n      if (event.keyCode === KeyCode.space || event.keyCode === KeyCode.enter) {\n        event.preventDefault();\n        fireFollowEvent(event);\n      }\n    };\n\n    const linkRef = useRef<HTMLElement>(null);\n    const isVisualRefresh = useVisualRefresh();\n    useForwardFocus(ref, linkRef);\n\n    // Visual refresh should only add styles to buttons that don't already have unique styles (e.g. primary/secondary variants)\n    const applyButtonStyles = isButton && isVisualRefresh && !hasSpecialStyle;\n\n    const sharedProps = {\n      ...baseProps,\n      // https://github.com/microsoft/TypeScript/issues/36659\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref: useMergeRefs(linkRef as any, __internalRootRef),\n      className: clsx(\n        styles.link,\n        baseProps.className,\n        applyButtonStyles ? styles.button : null,\n        styles[getVariantStyle(variant)],\n        styles[getFontSizeStyle(variant, fontSize)],\n        styles[getColorStyle(variant, color)]\n      ),\n      'aria-label': ariaLabel,\n      'data-analytics-id': uniqueId,\n    };\n\n    const renderedExternalIconAriaLabel = i18n('externalIconAriaLabel', externalIconAriaLabel);\n    const content = (\n      <>\n        {children}\n        {external && (\n          <span className={styles['icon-wrapper']}>\n            &nbsp;\n            <span\n              className={styles.icon}\n              aria-label={renderedExternalIconAriaLabel}\n              role={renderedExternalIconAriaLabel ? 'img' : undefined}\n            >\n              <InternalIcon name=\"external\" size=\"inherit\" />\n            </span>\n          </span>\n        )}\n      </>\n    );\n\n    if (isButton) {\n      return (\n        <a {...sharedProps} role=\"button\" tabIndex={0} onKeyDown={handleButtonKeyDown} onClick={handleButtonClick}>\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      // we dynamically set proper rel in the code above\n      // eslint-disable-next-line react/jsx-no-target-blank\n      <a {...sharedProps} target={anchorTarget} rel={anchorRel} href={href} onClick={handleLinkClick}>\n        {content}\n      </a>\n    );\n  }\n);\n\nfunction getVariantStyle(variant: Exclude<InternalLinkProps['variant'], undefined>) {\n  return `variant-${variant.replace(/^awsui-/, '')}`;\n}\n\nfunction getFontSizeStyle(variant: InternalLinkProps['variant'], fontSize: InternalLinkProps['fontSize']) {\n  switch (variant) {\n    case 'info':\n      return 'font-size-body-s';\n    case 'awsui-value-large':\n      return 'font-size-display-l';\n    default:\n      return `font-size-${fontSize}`;\n  }\n}\n\nfunction getColorStyle(variant: InternalLinkProps['variant'], color: InternalLinkProps['color']) {\n  return `color-${variant === 'info' ? 'normal' : color}`;\n}\n\nexport default InternalLink;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA2B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,QAAA,MAAM,mBAAmB,4HA0SxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA2B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,QAAA,MAAM,mBAAmB,4HA6SxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/internal/template/multiselect/internal.js

@@ -27,12 +27,14 @@ import InternalTokenGroup from '../token-group/internal';
 import styles from './styles.css.js';
 import ScreenreaderOnly from '../internal/components/screenreader-only';
 import { joinStrings } from '../internal/utils/strings';
+import { useInternalI18n } from '../internal/i18n/context';
 const InternalMultiselect = React.forwardRef((_a, externalRef) => {
     var _b;
     var { options = [], filteringType = 'none', filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, filteringResultsText, ariaRequired, placeholder, disabled, ariaLabel, statusType = 'finished', empty, loadingText, finishedText, errorText, recoveryText, noMatch, selectedAriaLabel, renderHighlightedAriaLive, selectedOptions = [], deselectAriaLabel, keepOpen = true, tokenLimit, i18nStrings, onBlur, onFocus, onLoadItems, onChange, virtualScroll, hideTokens = false, expandToViewport, __internalRootRef = null, autoFocus } = _a, restProps = __rest(_a, ["options", "filteringType", "filteringPlaceholder", "filteringAriaLabel", "filteringClearAriaLabel", "filteringResultsText", "ariaRequired", "placeholder", "disabled", "ariaLabel", "statusType", "empty", "loadingText", "finishedText", "errorText", "recoveryText", "noMatch", "selectedAriaLabel", "renderHighlightedAriaLive", "selectedOptions", "deselectAriaLabel", "keepOpen", "tokenLimit", "i18nStrings", "onBlur", "onFocus", "onLoadItems", "onChange", "virtualScroll", "hideTokens", "expandToViewport", "__internalRootRef", "autoFocus"]);
     checkOptionValueField('Multiselect', 'options', options);
     const baseProps = getBaseProps(restProps);
     const formFieldContext = useFormFieldContext(restProps);
+    const i18n = useInternalI18n('multiselect');
     const { handleLoadMore, handleRecoveryClick, fireLoadItems } = useLoadItems({
         onLoadItems,
         options,
@@ -136,7 +138,7 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
         iconUrl: option.iconUrl,
         iconSvg: option.iconSvg,
         tags: option.tags,
-        dismissLabel: deselectAriaLabel ? deselectAriaLabel(option) : undefined,
+        dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel === null || deselectAriaLabel === void 0 ? void 0 : deselectAriaLabel(option), format => { var _a; return format({ option__label: (_a = option.label) !== null && _a !== void 0 ? _a : '' }); }),
     }));
     useEffect(() => {
         var _a;