@cloudscape-design/components 3.0.1006 → 3.0.1008

package/tabs/analytics-metadata/interfaces.d.ts

@@ -1,32 +1,33 @@
 export interface GeneratedAnalyticsMetadataTabsSelect {
-  action: 'select';
-  detail: {
-    label: string;
-    id: string;
-    position: string;
-    originTabId: string;
-  };
+    action: 'select';
+    detail: {
+        label: string;
+        id: string;
+        position: string;
+        originTabId: string;
+    };
 }
 export interface GeneratedAnalyticsMetadataTabsDismiss {
-  action: 'dismiss';
-  detail: {
-    label: string;
-    id: string;
-    position: string;
-  };
+    action: 'dismiss';
+    detail: {
+        label: string;
+        id: string;
+        position: string;
+    };
 }
 export interface GeneratedAnalyticsMetadataTabsComponent {
-  name: 'awsui.Tabs';
-  label: string;
-  properties?: {
-    activeTabId: string;
-    activeTabLabel: string;
-    activeTabPosition: string;
-    tabsCount: string;
-  };
-  innerContext?: {
-    tabId: string;
-    tabLabel: string;
-    tabPosition: string;
-  };
-}
+    name: 'awsui.Tabs';
+    label: string;
+    properties?: {
+        activeTabId: string;
+        activeTabLabel: string;
+        activeTabPosition: string;
+        tabsCount: string;
+    };
+    innerContext?: {
+        tabId: string;
+        tabLabel: string;
+        tabPosition: string;
+    };
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/tabs/index.d.ts

@@ -1,17 +1,5 @@
 /// <reference types="react" />
 import { TabsProps } from './interfaces';
 export { TabsProps };
-export default function Tabs({
-  tabs,
-  variant,
-  onChange,
-  activeTabId: controlledTabId,
-  ariaLabel,
-  ariaLabelledby,
-  disableContentPaddings,
-  i18nStrings,
-  fitHeight,
-  keyboardActivationMode,
-  actions,
-  ...rest
-}: TabsProps): JSX.Element;
+export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, i18nStrings, fitHeight, keyboardActivationMode, actions, ...rest }: TabsProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/tabs/interfaces.d.ts

@@ -3,179 +3,180 @@ import { ButtonProps } from '../button/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
 import { NonCancelableEventHandler } from '../internal/events';
 export interface TabsProps extends BaseComponentProps {
-  /**
-   * Specifies the tabs to display. Each tab object has the following properties:
-   *
-   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.
-   * - `label` (ReactNode) - Tab label shown in the UI.
-   * - `content` (ReactNode) - (Optional) Tab content to render in the container.
-   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.
-   * - `disabledReason` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.
-   * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.
-   * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.
-   * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.
-   * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.
-   *    Although it is technically possible to insert any content, our UX guidelines only allow you to add
-   *    an icon button or icon button dropdown.
-   * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.
-   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The
-   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,
-   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,
-   *    if your application routing can handle such deep links. You can manually update routing on the current page
-   *    using the `activeTabHref` property of the `change` event's detail.
-   * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:
-       - `'active'`: (Default) Only render content when the tab is active.
-   *   - `'eager'`: Always render tab content (hidden when the tab is not active).
-   *   - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.
-   */
-  tabs: ReadonlyArray<TabsProps.Tab>;
-  /**
-   * Actions for the tabs header, displayed next to the list of tabs.
-   * Use this to add a button or button dropdown that performs actions on the
-   * entire tab list. We recommend a maximum of one interactive element to
-   * minimize the number of keyboard tab stops between the tab list and content.
-   */
-  actions?: React.ReactNode;
-  /**
-   * The possible visual variants of tabs are the following:
-   * * `default` - Use in any context.
-   * * `container` - Use this variant to have the tabs displayed within a container header.
-   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).
-   * @visualrefresh `stacked` variant
-   */
-  variant?: TabsProps.Variant;
-  /**
-   * Called whenever the user selects a different tab.
-   * The event's `detail` contains the new `activeTabId`.
-   */
-  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;
-  /**
-   * The `id` of the currently active tab.
-   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).
-   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).
-   */
-  activeTabId?: string;
-  /**
-   * Provides an `aria-label` to the tab container.
-   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
-   */
-  ariaLabel?: string;
-  /**
-   * Sets the `aria-labelledby` property on the tab container.
-   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.
-   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
-   */
-  ariaLabelledby?: string;
-  /**
-   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.
-   */
-  disableContentPaddings?: boolean;
-  /**
-   * An object containing all the necessary localized strings required by the component.
-   * @i18n
-   */
-  i18nStrings?: TabsProps.I18nStrings;
-  /**
-   * Enabling this property makes the tab content fit to the available height.
-   * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.
-   */
-  fitHeight?: boolean;
-  /**
-   * Determines how the active tab is switched when navigating using
-   * the keyboard. The options are:
-   * - 'automatic' (default): the active tab is switched using the arrow keys.
-   * - 'manual': a tab must be explicitly activated using the enter/space key.
-   * We recommend using 'automatic' in most situations to provide consistent
-   * and quick switching between tabs. Use 'manual' only if there is a specific
-   * need to introduce friction to the switching of tabs.
-   */
-  keyboardActivationMode?: 'automatic' | 'manual';
-}
-export declare namespace TabsProps {
-  type Variant = 'default' | 'container' | 'stacked';
-  interface Tab {
     /**
-     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.
+     * Specifies the tabs to display. Each tab object has the following properties:
+     *
+     * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.
+     * - `label` (ReactNode) - Tab label shown in the UI.
+     * - `content` (ReactNode) - (Optional) Tab content to render in the container.
+     * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.
+     * - `disabledReason` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.
+     * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.
+     * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.
+     * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.
+     * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.
+     *    Although it is technically possible to insert any content, our UX guidelines only allow you to add
+     *    an icon button or icon button dropdown.
+     * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.
+     * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The
+     *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,
+     *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,
+     *    if your application routing can handle such deep links. You can manually update routing on the current page
+     *    using the `activeTabHref` property of the `change` event's detail.
+     * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:
+         - `'active'`: (Default) Only render content when the tab is active.
+     *   - `'eager'`: Always render tab content (hidden when the tab is not active).
+     *   - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.
      */
-    id: string;
+    tabs: ReadonlyArray<TabsProps.Tab>;
     /**
-     * Tab label shown in the UI.
+     * Actions for the tabs header, displayed next to the list of tabs.
+     * Use this to add a button or button dropdown that performs actions on the
+     * entire tab list. We recommend a maximum of one interactive element to
+     * minimize the number of keyboard tab stops between the tab list and content.
      */
-    label: React.ReactNode;
+    actions?: React.ReactNode;
     /**
-     * Tab content to render in the container.
+     * The possible visual variants of tabs are the following:
+     * * `default` - Use in any context.
+     * * `container` - Use this variant to have the tabs displayed within a container header.
+     * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).
+     * @visualrefresh `stacked` variant
      */
-    content?: React.ReactNode;
+    variant?: TabsProps.Variant;
     /**
-     * Whether this tab is disabled.
+     * Called whenever the user selects a different tab.
+     * The event's `detail` contains the new `activeTabId`.
      */
-    disabled?: boolean;
+    onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;
     /**
-     * Provides a reason why this tab is disabled.
+     * The `id` of the currently active tab.
+     * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).
+     * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).
      */
-    disabledReason?: string;
+    activeTabId?: string;
     /**
-     * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.
-     * When a user clicks on this button the onDismiss handler is called.
+     * Provides an `aria-label` to the tab container.
+     * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
      */
-    dismissible?: boolean;
+    ariaLabel?: string;
     /**
-     * (Optional) Specifies an aria-label for the dismiss icon button.
+     * Sets the `aria-labelledby` property on the tab container.
+     * If there's a visible label element that you can reference, use this instead of `ariaLabel`.
+     * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
      */
-    dismissLabel?: string;
+    ariaLabelledby?: string;
     /**
-     * (Optional) Determines whether the dismiss button is disabled.
+     * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.
      */
-    dismissDisabled?: boolean;
+    disableContentPaddings?: boolean;
     /**
-     * (Optional) Action for the tab, rendered next to its corresponding label.
-     * Although it is technically possible to insert any content, our UX guidelines only allow you to add
-     * an icon button or icon button dropdown.
+     * An object containing all the necessary localized strings required by the component.
+     * @i18n
      */
-    action?: React.ReactNode;
+    i18nStrings?: TabsProps.I18nStrings;
     /**
-     * (event => void) Called when a user clicks on the dismiss button.
+     * Enabling this property makes the tab content fit to the available height.
+     * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.
      */
-    onDismiss?: ButtonProps['onClick'];
+    fitHeight?: boolean;
     /**
-     * You can use this parameter to change the default `href` of the internal tab anchor. The
-     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,
-     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,
-     * when the routing can handle such deep links. You can manually update routing on the current page
-     * using the `activeTabHref` property of the `change` event's detail.
+     * Determines how the active tab is switched when navigating using
+     * the keyboard. The options are:
+     * - 'automatic' (default): the active tab is switched using the arrow keys.
+     * - 'manual': a tab must be explicitly activated using the enter/space key.
+     * We recommend using 'automatic' in most situations to provide consistent
+     * and quick switching between tabs. Use 'manual' only if there is a specific
+     * need to introduce friction to the switching of tabs.
      */
-    href?: string;
-    /**
-     * Determines when tab content is rendered:
-     * - 'active' (default): Only render content when the tab is active.
-     * - 'eager': Always render tab content (hidden when the tab is not active).
-     * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.
-     */
-    contentRenderStrategy?: 'active' | 'eager' | 'lazy';
-  }
-  interface ChangeDetail {
-    /**
-     * The ID of the clicked tab.
-     */
-    activeTabId: string;
-    /**
-     * The `href` attribute of the clicked tab, if defined.
-     */
-    activeTabHref?: string;
-  }
-  interface I18nStrings {
-    /**
-     * ARIA label for the scroll left button that appears when the tab header is wider than the container.
-     */
-    scrollLeftAriaLabel?: string;
-    /**
-     * ARIA label for the scroll right button that appears when the tab header is wider than the container.
-     */
-    scrollRightAriaLabel?: string;
-    /**
-     * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used
-     * with role="application" to provide further information on the purpose of this component
-     */
-    tabsWithActionsAriaRoleDescription?: string;
-  }
-}
+    keyboardActivationMode?: 'automatic' | 'manual';
+}
+export declare namespace TabsProps {
+    type Variant = 'default' | 'container' | 'stacked';
+    interface Tab {
+        /**
+         * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.
+         */
+        id: string;
+        /**
+         * Tab label shown in the UI.
+         */
+        label: React.ReactNode;
+        /**
+         * Tab content to render in the container.
+         */
+        content?: React.ReactNode;
+        /**
+         * Whether this tab is disabled.
+         */
+        disabled?: boolean;
+        /**
+         * Provides a reason why this tab is disabled.
+         */
+        disabledReason?: string;
+        /**
+         * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.
+         * When a user clicks on this button the onDismiss handler is called.
+         */
+        dismissible?: boolean;
+        /**
+         * (Optional) Specifies an aria-label for the dismiss icon button.
+         */
+        dismissLabel?: string;
+        /**
+         * (Optional) Determines whether the dismiss button is disabled.
+         */
+        dismissDisabled?: boolean;
+        /**
+         * (Optional) Action for the tab, rendered next to its corresponding label.
+         * Although it is technically possible to insert any content, our UX guidelines only allow you to add
+         * an icon button or icon button dropdown.
+         */
+        action?: React.ReactNode;
+        /**
+         * (event => void) Called when a user clicks on the dismiss button.
+         */
+        onDismiss?: ButtonProps['onClick'];
+        /**
+         * You can use this parameter to change the default `href` of the internal tab anchor. The
+         * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,
+         * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,
+         * when the routing can handle such deep links. You can manually update routing on the current page
+         * using the `activeTabHref` property of the `change` event's detail.
+         */
+        href?: string;
+        /**
+         * Determines when tab content is rendered:
+         * - 'active' (default): Only render content when the tab is active.
+         * - 'eager': Always render tab content (hidden when the tab is not active).
+         * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.
+         */
+        contentRenderStrategy?: 'active' | 'eager' | 'lazy';
+    }
+    interface ChangeDetail {
+        /**
+         * The ID of the clicked tab.
+         */
+        activeTabId: string;
+        /**
+         * The `href` attribute of the clicked tab, if defined.
+         */
+        activeTabHref?: string;
+    }
+    interface I18nStrings {
+        /**
+         * ARIA label for the scroll left button that appears when the tab header is wider than the container.
+         */
+        scrollLeftAriaLabel?: string;
+        /**
+         * ARIA label for the scroll right button that appears when the tab header is wider than the container.
+         */
+        scrollRightAriaLabel?: string;
+        /**
+         * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used
+         * with role="application" to provide further information on the purpose of this component
+         */
+        tabsWithActionsAriaRoleDescription?: string;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/tabs/native-smooth-scroll-supported.d.ts

@@ -1 +1,2 @@
-export default function (): boolean;
+export default function (): boolean;
+//# sourceMappingURL=native-smooth-scroll-supported.d.ts.map

package/tabs/scroll-utils.d.ts

@@ -2,4 +2,5 @@ export declare const onPaginationClick: (headerBarRef: React.RefObject<HTMLUList
 export declare const hasHorizontalOverflow: (headerBar: HTMLElement, inlineStartOverflowButton: React.RefObject<HTMLElement>) => boolean;
 export declare const hasInlineStartOverflow: (headerBar: HTMLElement) => boolean;
 export declare const hasInlineEndOverflow: (headerBar: HTMLElement) => boolean;
-export declare const scrollIntoView: (tabHeader: HTMLElement, headerBar: HTMLElement, smooth?: boolean) => void;
+export declare const scrollIntoView: (tabHeader: HTMLElement, headerBar: HTMLElement, smooth?: boolean) => void;
+//# sourceMappingURL=scroll-utils.d.ts.map

package/tabs/smooth-scroll.d.ts

@@ -1,2 +1,3 @@
 declare const smoothScroll: (element: HTMLElement, to: number) => void;
-export default smoothScroll;
+export default smoothScroll;
+//# sourceMappingURL=smooth-scroll.d.ts.map

package/tabs/tab-header-bar.d.ts

@@ -1,34 +1,21 @@
 /// <reference types="react" />
 import { TabsProps } from './interfaces';
 interface TabHeaderBarProps {
-  onChange: (changeDetail: TabsProps.ChangeDetail) => void;
-  activeTabId: TabsProps['activeTabId'];
-  tabs: TabsProps['tabs'];
-  variant: TabsProps['variant'];
-  idNamespace: string;
-  ariaLabel?: string;
-  ariaLabelledby?: string;
-  i18nStrings?: TabsProps.I18nStrings;
-  keyboardActivationMode: Required<TabsProps['keyboardActivationMode']>;
-  actions?: TabsProps['actions'];
+    onChange: (changeDetail: TabsProps.ChangeDetail) => void;
+    activeTabId: TabsProps['activeTabId'];
+    tabs: TabsProps['tabs'];
+    variant: TabsProps['variant'];
+    idNamespace: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    i18nStrings?: TabsProps.I18nStrings;
+    keyboardActivationMode: Required<TabsProps['keyboardActivationMode']>;
+    actions?: TabsProps['actions'];
 }
-export declare function TabHeaderBar({
-  onChange,
-  activeTabId,
-  tabs,
-  variant,
-  idNamespace,
-  ariaLabel,
-  ariaLabelledby,
-  i18nStrings,
-  keyboardActivationMode,
-  actions
-}: TabHeaderBarProps): JSX.Element;
-export declare function getTabElementId({
-  namespace,
-  tabId
-}: {
-  namespace: string;
-  tabId: string;
+export declare function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, keyboardActivationMode, actions, }: TabHeaderBarProps): JSX.Element;
+export declare function getTabElementId({ namespace, tabId }: {
+    namespace: string;
+    tabId: string;
 }): string;
-export {};
+export {};
+//# sourceMappingURL=tab-header-bar.d.ts.map

package/tag-editor/index.d.ts

@@ -3,4 +3,5 @@ import { TagEditorProps } from './interfaces';
 import { getTagsDiff } from './utils';
 export { TagEditorProps, getTagsDiff };
 declare const TagEditor: React.ForwardRefExoticComponent<TagEditorProps & React.RefAttributes<TagEditorProps.Ref>>;
-export default TagEditor;
+export default TagEditor;
+//# sourceMappingURL=index.d.ts.map

package/tag-editor/index.js

@@ -170,7 +170,7 @@ const TagEditor = React.forwardRef((_a, ref) => {
                 React.createElement(InternalLiveRegion, { tagName: "span" }, i18n('i18nStrings.loading', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.loading)))));
     }
     const baseProps = getBaseProps(restProps);
-    return (React.createElement(InternalAttributeEditor, Object.assign({}, baseProps, baseComponentProps, { ref: attributeEditorRef, className: clsx(styles.root, baseProps.className), items: internalTags, isItemRemovable: isItemRemovable, onAddButtonClick: onAddButtonClick, onRemoveButtonClick: onRemoveButtonClick, addButtonText: (_b = i18n('i18nStrings.addButton', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.addButton)) !== null && _b !== void 0 ? _b : '', removeButtonText: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeButton, disableAddButton: remainingTags <= 0, empty: i18n('i18nStrings.emptyTags', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.emptyTags), addButtonVariant: "normal", additionalInfo: remainingTags < 0 ? (React.createElement(FormFieldError, { errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, (_d = i18n('i18nStrings.tagLimitExceeded', (_c = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitExceeded) === null || _c === void 0 ? void 0 : _c.call(i18nStrings, tagLimit), format => format({ tagLimit }))) !== null && _d !== void 0 ? _d : '')) : remainingTags === 0 ? ((_f = i18n('i18nStrings.tagLimitReached', (_e = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitReached) === null || _e === void 0 ? void 0 : _e.call(i18nStrings, tagLimit), format => format({ tagLimit }))) !== null && _f !== void 0 ? _f : '') : (i18n('i18nStrings.tagLimit', (_g = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimit) === null || _g === void 0 ? void 0 : _g.call(i18nStrings, remainingTags, tagLimit), format => format({ tagLimitAvailable: `${remainingTags === tagLimit}`, availableTags: remainingTags, tagLimit }))), definition: definition, i18nStrings: forwardedI18nStrings })));
+    return (React.createElement(InternalAttributeEditor, Object.assign({}, baseProps, baseComponentProps, { ref: attributeEditorRef, className: clsx(styles.root, baseProps.className), items: internalTags, isItemRemovable: isItemRemovable, onAddButtonClick: onAddButtonClick, onRemoveButtonClick: onRemoveButtonClick, addButtonText: (_b = i18n('i18nStrings.addButton', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.addButton)) !== null && _b !== void 0 ? _b : '', removeButtonText: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeButton, disableAddButton: remainingTags <= 0, empty: i18n('i18nStrings.emptyTags', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.emptyTags), addButtonVariant: "normal", additionalInfo: remainingTags < 0 ? (React.createElement(FormFieldError, { errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, (_d = i18n('i18nStrings.tagLimitExceeded', (_c = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitExceeded) === null || _c === void 0 ? void 0 : _c.call(i18nStrings, tagLimit), format => format({ tagLimit }))) !== null && _d !== void 0 ? _d : '')) : remainingTags === 0 ? (((_f = i18n('i18nStrings.tagLimitReached', (_e = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitReached) === null || _e === void 0 ? void 0 : _e.call(i18nStrings, tagLimit), format => format({ tagLimit }))) !== null && _f !== void 0 ? _f : '')) : (i18n('i18nStrings.tagLimit', (_g = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimit) === null || _g === void 0 ? void 0 : _g.call(i18nStrings, remainingTags, tagLimit), format => format({ tagLimitAvailable: `${remainingTags === tagLimit}`, availableTags: remainingTags, tagLimit }))), definition: definition, i18nStrings: forwardedI18nStrings })));
 });
 applyDisplayName(TagEditor, 'TagEditor');
 export default TagEditor;