@alma-oss/spirit-web-react 4.2.1 → 4.3.0

package/components/components.cjs

@@ -327,8 +327,11 @@ const htmlReactParser = (html) => {
     return domToReact(htmlToDOM(html));
 };
 
+function hasSpiritComponent(elementTag) {
+    return typeof elementTag !== 'string' && elementTag !== null && 'spiritComponent' in elementTag;
+}
 function mergeStyleProps(ElementTag, styleProps) {
-    const isSpiritComponent = typeof ElementTag !== 'string' && !!(ElementTag === null || ElementTag === void 0 ? void 0 : ElementTag.spiritComponent);
+    const isSpiritComponent = hasSpiritComponent(ElementTag);
     const isNonNullableObject = (styleProp) => typeof styleProp === 'object' && styleProp !== null;
     const extractClassNames = (styleProp) => {
         if (typeof styleProp === 'string') {
@@ -495,8 +498,10 @@ const processProperties = (utilityKey, utilityName, propValue, prefix) => {
 };
 const isStylePropProcessable = (styleProps, stylePropKey, stylePropValue, options = { includesKey: true }) => {
     const isStylePropKeyIncluded = isKeyIncluded(styleProps, stylePropKey);
-    const isProcessable = (options.includesKey ? isStylePropKeyIncluded : !isStylePropKeyIncluded) && !isEmpty(stylePropValue);
-    return isProcessable;
+    if (options.includesKey) {
+        return isStylePropKeyIncluded && !isEmpty(stylePropValue);
+    }
+    return !isStylePropKeyIncluded;
 };
 const useStyleUtilities = (props, prefix = '', additionalProps = {}) => {
     const styleProps = Object.assign(Object.assign(Object.assign(Object.assign({}, SpacingStyleProp), DisplayStyleProps), ThemeStyleProps), additionalProps);
@@ -753,6 +758,63 @@ const useDragAndDrop = (props) => {
     };
 };
 
+const defaultLabels = {
+    common: {
+        close: 'Close',
+        edit: 'Edit',
+        remove: 'Remove',
+    },
+    breadcrumbs: {
+        back: 'Go back',
+    },
+    fileUploader: {
+        edit: 'Edit',
+        remove: 'Remove',
+        attachments: 'Attachments',
+    },
+    pagination: {
+        next: 'Next',
+        previous: 'Previous',
+        goToPage: 'Go to page',
+    },
+    textField: {
+        password: {
+            show: 'Show password',
+            hide: 'Hide password',
+        },
+    },
+    splitButton: {
+        dropdown: 'More',
+    },
+};
+
+const replaceTranslationParams = (translation, params) => Object.entries(params).reduce((result, [paramKey, value]) => {
+    const safeParamKey = paramKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return result.replace(new RegExp(`\\{${safeParamKey}\\}`, 'g'), String(value));
+}, translation);
+
+const resolveTranslationKey = (obj, path) => {
+    const keys = path.split('.');
+    let current = obj;
+    for (const key of keys) {
+        if (typeof current === 'object' && current !== null && key in current) {
+            current = current[key];
+        }
+        else {
+            return path;
+        }
+    }
+    return typeof current === 'string' ? current : path;
+};
+
+const useI18n = () => {
+    const t = (key, params) => {
+        const translation = resolveTranslationKey(defaultLabels, key);
+        return !params ? translation : replaceTranslationParams(translation, params);
+    };
+    return { t };
+};
+
 const defaultContext$a = undefined;
 const IconsContext = React.createContext(defaultContext$a);
 IconsContext.Provider;
@@ -1020,21 +1082,22 @@ var __rest$2U = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const Accordion = (props) => {
-    const { children, elementType: ElementTag = 'section', open, toggle } = props, restProps = __rest$2U(props, ["children", "elementType", "open", "toggle"]);
+const _Accordion = (props, ref) => {
+    const { children, elementType = 'section', open, toggle } = props, restProps = __rest$2U(props, ["children", "elementType", "open", "toggle"]);
+    const Component = elementType;
     const { classProps } = useAccordionStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.root, styleProps });
     const contextValue = {
         open,
         toggle,
     };
-    return (React.createElement(ElementTag, Object.assign({}, transferProps, mergedStyleProps),
+    return (React.createElement(Component, Object.assign({}, transferProps, mergedStyleProps, { ref: ref }),
         React.createElement(AccordionProvider, { value: contextValue }, children)));
 };
+const Accordion = React.forwardRef(_Accordion);
 Accordion.spiritComponent = 'Accordion';
-Accordion.spiritDefaultElement = 'section';
-Accordion.spiritDefaultProps = null;
+Accordion.displayName = 'Accordion';
 
 const defaultContext$8 = {
     id: '',
@@ -1055,18 +1118,19 @@ var __rest$2T = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const AccordionItem = (props) => {
-    const { children, elementType: ElementTag = 'article', id } = props, restProps = __rest$2T(props, ["children", "elementType", "id"]);
+const _AccordionItem = (props, ref) => {
+    const { children, elementType = 'article', id } = props, restProps = __rest$2T(props, ["children", "elementType", "id"]);
+    const Component = elementType;
     const { classProps } = useAccordionStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.item, styleProps });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.item, styleProps });
     const contextValue = { id };
-    return (React.createElement(ElementTag, Object.assign({}, transferProps, { id: id }, mergedStyleProps),
+    return (React.createElement(Component, Object.assign({}, transferProps, { id: id }, mergedStyleProps, { ref: ref }),
         React.createElement(AccordionItemProvider, { value: contextValue }, children)));
 };
+const AccordionItem = React.forwardRef(_AccordionItem);
 AccordionItem.spiritComponent = 'AccordionItem';
-AccordionItem.spiritDefaultElement = 'article';
-AccordionItem.spiritDefaultProps = null;
+AccordionItem.displayName = 'AccordionItem';
 
 const DEFAULT_BOX_SIZE = 24;
 
@@ -1122,12 +1186,12 @@ var __rest$2R = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$10 = {
+const defaultProps$13 = {
     ariaHidden: true,
     boxSize: DEFAULT_BOX_SIZE,
 };
 const _Icon = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$10), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$13), props);
     const { boxSize, name, title, ariaHidden } = propsWithDefaults, restProps = __rest$2R(propsWithDefaults, ["boxSize", "name", "title", "ariaHidden"]);
     let icon = useIcon(name);
     const iconSize = useIconBoxSize(boxSize);
@@ -1145,6 +1209,7 @@ const _Icon = (props, ref) => {
 };
 const Icon = React.forwardRef(_Icon);
 Icon.spiritComponent = 'Icon';
+Icon.displayName = 'Icon';
 
 var __rest$2Q = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1157,19 +1222,20 @@ var __rest$2Q = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$$ = {
+const defaultProps$12 = {
     elementType: 'h3',
 };
-const AccordionHeader = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$$), props);
-    const { elementType: ElementTag = 'h3', children, slot } = propsWithDefaults, restProps = __rest$2Q(propsWithDefaults, ["elementType", "children", "slot"]);
+const _AccordionHeader = (props, ref) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$12), props);
+    const { elementType = 'h3', children, slot } = propsWithDefaults, restProps = __rest$2Q(propsWithDefaults, ["elementType", "children", "slot"]);
+    const Component = elementType;
     const { classProps } = useAccordionStyleProps();
     const { toggle } = useAccordionContext();
     const { id } = useAccordionItemContext();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     const { isOpen } = useOpenItem(id);
     const { triggerProps, headerProps } = useAccordionAriaProps({ id, isOpen });
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
         classProps: classProps.header,
         styleProps,
     });
@@ -1178,16 +1244,16 @@ const AccordionHeader = (props) => {
             toggle(id);
         }
     };
-    return (React.createElement(ElementTag, Object.assign({}, transferProps, mergedStyleProps, headerProps),
+    return (React.createElement(Component, Object.assign({}, transferProps, mergedStyleProps, headerProps, { ref: ref }),
         React.createElement("button", Object.assign({ type: "button", className: classProps.toggle, onClick: itemToggle }, triggerProps), children),
         React.createElement("span", { className: classProps.side },
             slot && React.createElement("span", { className: classProps.slot }, slot),
             React.createElement("span", { className: classProps.icon },
                 React.createElement(Icon, { name: "chevron-down" })))));
 };
+const AccordionHeader = React.forwardRef(_AccordionHeader);
 AccordionHeader.spiritComponent = 'AccordionHeader';
-AccordionHeader.spiritDefaultElement = 'h3';
-AccordionHeader.spiritDefaultProps = null;
+AccordionHeader.displayName = 'AccordionHeader';
 
 var __rest$2P = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1269,15 +1335,15 @@ const transitioningStyles = {
     exiting: 'is-transitioning',
     exited: '',
 };
-const defaultProps$_ = {
+const defaultProps$11 = {
     elementType: 'div',
     isOpen: false,
     collapsibleToBreakpoint: undefined,
     transitionDuration: TRANSITION_DURATION$1,
 };
 const Collapse = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$_), props);
-    const { elementType: ElementTag = defaultProps$_.elementType, children, transitionDuration = TRANSITION_DURATION$1 } = propsWithDefaults, restProps = __rest$2O(propsWithDefaults, ["elementType", "children", "transitionDuration"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$11), props);
+    const { elementType: ElementTag = defaultProps$11.elementType, children, transitionDuration = TRANSITION_DURATION$1 } = propsWithDefaults, restProps = __rest$2O(propsWithDefaults, ["elementType", "children", "transitionDuration"]);
     const rootElementRef = React.useRef(null);
     const collapseElementRef = React.useRef(null);
     const collapseHeight = useResizeHeight(collapseElementRef);
@@ -1326,11 +1392,11 @@ var __rest$2N = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$Z = {
+const defaultProps$10 = {
     isOpen: false,
 };
 const UncontrolledCollapse = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$Z), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$10), props);
     const { children, hideOnCollapse, isDisposable, renderTrigger } = propsWithDefaults, restProps = __rest$2N(propsWithDefaults, ["children", "hideOnCollapse", "isDisposable", "renderTrigger"]);
     const { isOpen, toggleHandler } = useCollapse(restProps.isOpen);
     const { ariaProps } = useCollapseAriaProps(Object.assign(Object.assign({}, restProps), { isOpen }));
@@ -1387,8 +1453,7 @@ const UncontrolledAccordion = (props) => {
     return React.createElement(Accordion, Object.assign({}, restProps, { open: open, toggle: toggle }));
 };
 UncontrolledAccordion.spiritComponent = 'UncontrolledAccordion';
-UncontrolledAccordion.spiritDefaultElement = 'section';
-UncontrolledAccordion.spiritDefaultProps = null;
+UncontrolledAccordion.displayName = 'UncontrolledAccordion';
 
 var __rest$2K = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1435,24 +1500,25 @@ var __rest$2J = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$Y = {
+const defaultProps$$ = {
     alignmentX: AlignmentXExtended.STRETCH,
     alignmentY: AlignmentYExtended.STRETCH,
     direction: DirectionExtended.HORIZONTAL,
     elementType: 'div',
     isWrapping: false,
 };
-const Flex = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$Y), props);
-    const { elementType: ElementTag = 'div', direction, children } = propsWithDefaults, restProps = __rest$2J(propsWithDefaults, ["elementType", "direction", "children"]);
+const _Flex = (props, ref) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$$), props);
+    const { elementType = defaultProps$$.elementType, direction, children } = propsWithDefaults, restProps = __rest$2J(propsWithDefaults, ["elementType", "direction", "children"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps, styleProps: flexStyle } = useFlexStyleProps(Object.assign({ direction }, restProps));
     const { styleProps, props: otherProps } = useStyleProps(Object.assign({}, modifiedProps));
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, flexStyle, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, flexStyle, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
+const Flex = React.forwardRef(_Flex);
 Flex.spiritComponent = 'Flex';
-Flex.spiritDefaultElement = 'div';
-Flex.spiritDefaultProps = null;
+Flex.displayName = 'Flex';
 
 var __rest$2I = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1465,7 +1531,7 @@ var __rest$2I = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$X = {
+const defaultProps$_ = {
     alignmentX: {
         mobile: AlignmentXExtended.STRETCH,
         tablet: AlignmentXExtended.LEFT,
@@ -1477,7 +1543,7 @@ const defaultProps$X = {
 };
 const ActionGroup = (props) => {
     const { children } = props, restProps = __rest$2I(props, ["children"]);
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$X), restProps);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$_), restProps);
     return React.createElement(Flex, Object.assign({}, propsWithDefaults), children);
 };
 ActionGroup.spiritComponent = 'ActionGroup';
@@ -1530,22 +1596,26 @@ var __rest$2G = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$W = {
+const defaultProps$Z = {
     color: 'success',
     isCentered: false,
+    elementType: 'div',
 };
-const Alert = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$W), props);
-    const { elementType: ElementTag = 'div', children, color, iconName } = propsWithDefaults, restProps = __rest$2G(propsWithDefaults, ["elementType", "children", "color", "iconName"]);
+const _Alert = (props) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$Z), props);
+    const { elementType, children, color, iconName } = propsWithDefaults, restProps = __rest$2G(propsWithDefaults, ["elementType", "children", "color", "iconName"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useAlertStyleProps(Object.assign({ color }, restProps));
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
     const alertIconName = useAlertIcon(Object.assign({ color, iconName }, otherProps));
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps),
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps),
         React.createElement(Icon, { name: alertIconName }),
         React.createElement("div", null, children)));
 };
+const Alert = React.forwardRef(_Alert);
 Alert.spiritComponent = 'Alert';
+Alert.displayName = 'Alert';
 
 var __rest$2F = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1558,19 +1628,19 @@ var __rest$2F = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const getAvatarSizeClassname = (className, size) => compose(applySize(size))(className);
-function useAvatarStyleProps(props) {
+const useAvatarStyleProps = (props) => {
     const { isSquare, size } = props, restProps = __rest$2F(props, ["isSquare", "size"]);
     const avatarClass = useClassNamePrefix('Avatar');
     const avatarSquareClass = `${avatarClass}--square`;
-    const classProps = classNames(avatarClass, getAvatarSizeClassname(avatarClass, size), {
+    const avatarSizeClass = generateResponsiveClassNames(avatarClass, size);
+    const classProps = classNames(avatarClass, ...avatarSizeClass, {
         [avatarSquareClass]: isSquare,
     });
     return {
         classProps,
         props: restProps,
     };
-}
+};
 
 var __rest$2E = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1583,23 +1653,23 @@ var __rest$2E = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$V = {
+const defaultProps$Y = {
     elementType: 'div',
     isSquare: false,
     size: SizesExtended.MEDIUM,
 };
 const _Avatar = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$V), props);
-    const { elementType: ElementTag = 'div', children } = propsWithDefaults, restProps = __rest$2E(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$Y), props);
+    const { elementType = defaultProps$Y.elementType, children } = propsWithDefaults, restProps = __rest$2E(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useAvatarStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
-_Avatar.spiritComponent = 'Avatar';
-_Avatar.spiritDefaultElement = 'div';
-_Avatar.spiritDefaultProps = null;
 const Avatar = React.forwardRef(_Avatar);
+Avatar.spiritComponent = 'Avatar';
+Avatar.displayName = 'Avatar';
 
 var __rest$2D = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1647,21 +1717,22 @@ var __rest$2C = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$U = {
+const defaultProps$X = {
     elementType: 'div',
     borderStyle: BorderStyles.SOLID,
 };
-const Box = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$U), props);
-    const { elementType: ElementTag = 'div', children } = propsWithDefaults, restProps = __rest$2C(propsWithDefaults, ["elementType", "children"]);
+const _Box = (props, ref) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$X), props);
+    const { elementType = defaultProps$X.elementType, children } = propsWithDefaults, restProps = __rest$2C(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useBoxStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps, Object.assign(Object.assign(Object.assign({}, BackgroundStyleProps), BorderRadiusStyleProps), PaddingStyleProps));
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
+const Box = React.forwardRef(_Box);
 Box.spiritComponent = 'Box';
-Box.spiritDefaultElement = 'div';
-Box.spiritDefaultProps = null;
+Box.displayName = 'Box';
 
 var __rest$2B = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1705,22 +1776,24 @@ var __rest$2A = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$T = {
+const defaultProps$W = {
     elementType: 'a',
     color: 'primary',
     hasVisitedStyleAllowed: false,
     underlined: 'hover',
 };
 const _Link = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$T), props);
-    const { elementType: ElementTag = defaultProps$T.elementType, children } = propsWithDefaults, restProps = __rest$2A(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$W), props);
+    const { elementType = defaultProps$W.elementType, children } = propsWithDefaults, restProps = __rest$2A(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useLinkStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { href: restProps.href, ref: ref }), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { href: restProps.href, ref: ref }), children));
 };
 const Link = React.forwardRef(_Link);
 Link.spiritComponent = 'Link';
+Link.displayName = 'Link';
 
 var __rest$2z = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1763,14 +1836,14 @@ var __rest$2y = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$S = {
+const defaultProps$V = {
     iconNameEnd: 'chevron-right',
     iconNameStart: 'chevron-left',
     isCurrent: false,
     isGoBackOnly: false,
 };
 const BreadcrumbsItem = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$S), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$V), props);
     const { children, href, isCurrent, iconNameStart, iconNameEnd } = propsWithDefaults, restProps = __rest$2y(propsWithDefaults, ["children", "href", "isCurrent", "iconNameStart", "iconNameEnd"]);
     const { classProps, props: otherProps } = useBreadcrumbsStyleProps(Object.assign({}, restProps));
     const { styleProps, props: transferProps } = useStyleProps(otherProps);
@@ -1792,12 +1865,12 @@ var __rest$2x = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$R = {
+const defaultProps$U = {
     elementType: 'nav',
     items: [],
 };
 const Breadcrumbs = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$R), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$U), props);
     const { children, elementType: ElementTag = 'nav', goBackTitle, items } = propsWithDefaults, restProps = __rest$2x(propsWithDefaults, ["children", "elementType", "goBackTitle", "items"]);
     const { classProps, props: modifiedProps } = useBreadcrumbsStyleProps(Object.assign({}, restProps));
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -1913,7 +1986,7 @@ var __rest$2u = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$Q = {
+const defaultProps$T = {
     color: 'primary',
     isBlock: false,
     isDisabled: false,
@@ -1925,18 +1998,20 @@ const defaultProps$Q = {
 };
 const _Button = (props, ref) => {
     const propsWithContext = usePropsContext();
-    const propsWithDefaults = Object.assign(Object.assign(Object.assign({}, defaultProps$Q), props), propsWithContext);
-    const { elementType: ElementTag = defaultProps$Q.elementType, children } = propsWithDefaults, restProps = __rest$2u(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign(Object.assign({}, defaultProps$T), props), propsWithContext);
+    const { elementType = defaultProps$T.elementType, children } = propsWithDefaults, restProps = __rest$2u(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { buttonProps } = useButtonProps(restProps);
     const { classProps, props: modifiedProps } = useButtonStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, buttonProps, { ref: ref }, mergedStyleProps),
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, buttonProps, { ref: ref }, mergedStyleProps),
         children,
         restProps.isLoading && React.createElement(Spinner, null)));
 };
 const Button = React.forwardRef(_Button);
 Button.spiritComponent = 'Button';
+Button.displayName = 'Button';
 
 const useButtonLinkProps = (props) => {
     const { elementType, isDisabled, isLoading, onClick, href, target, rel } = props;
@@ -2005,7 +2080,7 @@ var __rest$2s = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$P = {
+const defaultProps$S = {
     color: 'primary',
     elementType: 'a',
     isBlock: false,
@@ -2015,21 +2090,23 @@ const defaultProps$P = {
     size: 'medium',
 };
 const _ButtonLink = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$P), props);
-    const { elementType: ElementTag = defaultProps$P.elementType, children } = propsWithDefaults, restProps = __rest$2s(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$S), props);
+    const { elementType = defaultProps$S.elementType, children } = propsWithDefaults, restProps = __rest$2s(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { buttonLinkProps } = useButtonLinkProps(propsWithDefaults);
     const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, buttonLinkProps, mergedStyleProps, { ref: ref }),
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, buttonLinkProps, mergedStyleProps, { ref: ref }),
         children,
         restProps.isLoading && React.createElement(Spinner, null)));
 };
 const ButtonLink = React.forwardRef(_ButtonLink);
 ButtonLink.spiritComponent = 'ButtonLink';
+ButtonLink.displayName = 'ButtonLink';
 
 function useCardStyleProps(props) {
-    const { artworkAlignmentX, direction, footerAlignmentX, hasFilledHeight, isBoxed, isExpanded, isHeading, isSelectable, size, } = props || {};
+    const { alignmentY, artworkAlignmentX, direction, footerAlignmentX, hasFilledHeight, isBoxed, isExpanded, isHeading, isSelectable, size, } = props || {};
     const cardClass = useClassNamePrefix('Card');
     const artworkClass = `${cardClass}Artwork`;
     const bodyClass = `${cardClass}Body`;
@@ -2061,6 +2138,7 @@ function useCardStyleProps(props) {
         [mediaHasFilledHeightClass]: hasFilledHeight,
     });
     const rootClasses = classNames(cardClass, {
+        [useAlignmentClass(cardClass, alignmentY, 'alignmentY')]: alignmentY,
         [directionClass]: direction,
         [isBoxedClass]: isBoxed,
     });
@@ -2094,15 +2172,15 @@ var __rest$2r = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$O = {
+const defaultProps$R = {
     direction: DirectionExtended.VERTICAL,
     elementType: 'article',
     isBoxed: false,
 };
 const Card = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$O), props);
-    const { elementType: ElementTag = 'article', direction, isBoxed, children } = propsWithDefaults, restProps = __rest$2r(propsWithDefaults, ["elementType", "direction", "isBoxed", "children"]);
-    const { classProps } = useCardStyleProps({ direction, isBoxed });
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$R), props);
+    const { elementType: ElementTag = 'article', alignmentY, direction, isBoxed, children } = propsWithDefaults, restProps = __rest$2r(propsWithDefaults, ["elementType", "alignmentY", "direction", "isBoxed", "children"]);
+    const { classProps } = useCardStyleProps({ alignmentY, direction, isBoxed });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps, otherProps });
     return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
@@ -2120,11 +2198,11 @@ var __rest$2q = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$N = {
+const defaultProps$Q = {
     alignmentX: AlignmentX.LEFT,
 };
 const CardArtwork = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$N), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$Q), props);
     const { children, alignmentX } = propsWithDefaults, restProps = __rest$2q(propsWithDefaults, ["children", "alignmentX"]);
     const { classProps } = useCardStyleProps({ artworkAlignmentX: alignmentX });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -2143,11 +2221,11 @@ var __rest$2p = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$M = {
+const defaultProps$P = {
     isSelectable: false,
 };
 const CardBody = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$M), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$P), props);
     const { children, isSelectable } = propsWithDefaults, restProps = __rest$2p(propsWithDefaults, ["children", "isSelectable"]);
     const { classProps } = useCardStyleProps({ isSelectable });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -2185,11 +2263,11 @@ var __rest$2n = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$L = {
+const defaultProps$O = {
     alignmentX: AlignmentX.LEFT,
 };
 const CardFooter = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$L), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$O), props);
     const { children, alignmentX } = propsWithDefaults, restProps = __rest$2n(propsWithDefaults, ["children", "alignmentX"]);
     const { classProps } = useCardStyleProps({ footerAlignmentX: alignmentX });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -2208,12 +2286,12 @@ var __rest$2m = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$K = {
+const defaultProps$N = {
     elementType: 'a',
 };
 const _CardLink = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$K), props);
-    const { elementType: ElementTag = defaultProps$K.elementType, children, href } = propsWithDefaults, restProps = __rest$2m(propsWithDefaults, ["elementType", "children", "href"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$N), props);
+    const { elementType: ElementTag = defaultProps$N.elementType, children, href } = propsWithDefaults, restProps = __rest$2m(propsWithDefaults, ["elementType", "children", "href"]);
     const { classProps } = useCardStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.link, styleProps, otherProps });
@@ -2221,6 +2299,7 @@ const _CardLink = (props, ref) => {
 };
 const CardLink = React.forwardRef(_CardLink);
 CardLink.spiritComponent = 'CardLink';
+CardLink.displayName = 'CardLink';
 
 var __rest$2l = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -2265,14 +2344,14 @@ var __rest$2k = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$J = {
+const defaultProps$M = {
     fit: ObjectFit.COVER,
     hasFilledHeight: false,
     isExpanded: false,
     size: CardSizes.AUTO,
 };
 const CardMedia = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$J), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$M), props);
     const { backgroundColor, children, fit, hasFilledHeight, isExpanded, size } = propsWithDefaults, restProps = __rest$2k(propsWithDefaults, ["backgroundColor", "children", "fit", "hasFilledHeight", "isExpanded", "size"]);
     const { classProps } = useCardStyleProps({ size, isExpanded, hasFilledHeight });
     const { classProps: cardMediaClassProps, styleProps: cardMediaStyleProps } = useCardMediaStyleProps({
@@ -2300,12 +2379,12 @@ var __rest$2j = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$I = {
+const defaultProps$L = {
     elementType: 'h4',
     isHeading: true,
 };
 const CardTitle = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$I), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$L), props);
     const { elementType: ElementTag = 'h4', children, isHeading } = propsWithDefaults, restProps = __rest$2j(propsWithDefaults, ["elementType", "children", "isHeading"]);
     const { classProps } = useCardStyleProps({ isHeading });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -2325,14 +2404,14 @@ var __rest$2i = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$H = {
+const defaultProps$K = {
     elementType: 'div',
     id: undefined,
     registerAria: undefined,
 };
 const HelperText = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$H), props);
-    const { helperText, elementType: ElementTag = defaultProps$H.elementType, id, registerAria } = propsWithDefaults, restProps = __rest$2i(propsWithDefaults, ["helperText", "elementType", "id", "registerAria"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$K), props);
+    const { helperText, elementType: ElementTag = defaultProps$K.elementType, id, registerAria } = propsWithDefaults, restProps = __rest$2i(propsWithDefaults, ["helperText", "elementType", "id", "registerAria"]);
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, transferProps });
     React.useEffect(() => {
@@ -2404,15 +2483,15 @@ var __rest$2g = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$G = {
+const defaultProps$J = {
     elementType: 'div',
     id: undefined,
     registerAria: undefined,
     role: undefined,
 };
 const ValidationText = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$G), props);
-    const { elementType: ElementTag = defaultProps$G.elementType, id, hasValidationStateIcon, registerAria, role, validationText } = propsWithDefaults, restProps = __rest$2g(propsWithDefaults, ["elementType", "id", "hasValidationStateIcon", "registerAria", "role", "validationText"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$J), props);
+    const { elementType: ElementTag = defaultProps$J.elementType, id, hasValidationStateIcon, registerAria, role, validationText } = propsWithDefaults, restProps = __rest$2g(propsWithDefaults, ["elementType", "id", "hasValidationStateIcon", "registerAria", "role", "validationText"]);
     const validationIconName = useValidationIcon({ hasValidationStateIcon });
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, transferProps });
@@ -2427,7 +2506,7 @@ const ValidationText = (props) => {
     }
     const nonArrayValidationText = hasValidationStateIcon ? React.createElement("div", null, validationText) : validationText;
     return (React.createElement(ElementTag, Object.assign({}, transferProps, mergedStyleProps, { id: id, role: role }),
-        hasValidationStateIcon && React.createElement(Icon, { name: validationIconName, boxSize: "20" }),
+        hasValidationStateIcon && React.createElement(Icon, { name: validationIconName, boxSize: 20 }),
         Array.isArray(validationText) ? (React.createElement("ul", null, validationText.map((item) => (React.createElement("li", { key: `validationText_${item}` }, item))))) : (nonArrayValidationText)));
 };
 ValidationText.spiritComponent = 'ValidationText';
@@ -2527,6 +2606,7 @@ const _Checkbox = (props, ref) => {
 };
 const Checkbox = React.forwardRef(_Checkbox);
 Checkbox.spiritComponent = 'Checkbox';
+Checkbox.displayName = 'Checkbox';
 
 var __rest$2d = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -2565,12 +2645,12 @@ var __rest$2c = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$F = {
+const defaultProps$I = {
     isFluid: false,
     size: SizesExtended.XLARGE,
 };
 const Container = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$F), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$I), props);
     const { children } = propsWithDefaults, restProps = __rest$2c(propsWithDefaults, ["children"]);
     const { classProps, props: modifiedProps } = useContainerStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps, {
@@ -2635,7 +2715,7 @@ var __rest$2a = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$E = {
+const defaultProps$H = {
     elementType: 'button',
     isDisabled: false,
     isSubtle: false,
@@ -2644,24 +2724,44 @@ const defaultProps$E = {
     type: 'button',
 };
 const _ControlButton = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$E), props);
-    const { elementType: ElementTag = defaultProps$E.elementType, children } = propsWithDefaults, restProps = __rest$2a(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$H), props);
+    const { elementType = defaultProps$H.elementType, children } = propsWithDefaults, restProps = __rest$2a(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { controlButtonProps } = useControlButtonProps(restProps);
     const { classProps, props: modifiedProps } = useControlButtonStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, controlButtonProps, { ref: ref }, mergedStyleProps), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, controlButtonProps, { ref: ref }, mergedStyleProps), children));
 };
 const ControlButton = React.forwardRef(_ControlButton);
 ControlButton.spiritComponent = 'ControlButton';
+ControlButton.displayName = 'ControlButton';
+
+const TRANSITION_FALLBACK_TIMEOUT = 300;
 
 const useDialog = (ref, isOpen) => {
+    const closeTimeoutRef = React.useRef(null);
+    const clearCloseTimeout = React.useCallback(() => {
+        if (closeTimeoutRef.current !== null) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    const scheduleDialogClose = React.useCallback((dialogNode) => {
+        clearCloseTimeout();
+        closeTimeoutRef.current = setTimeout(() => {
+            if (dialogNode.open && dialogNode.close) {
+                dialogNode.close();
+            }
+        }, TRANSITION_FALLBACK_TIMEOUT);
+    }, [clearCloseTimeout]);
     const handleTransitionEnd = React.useCallback((event) => {
         const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
         if (dialogNode && event.target === dialogNode && !isOpen && dialogNode.open && dialogNode.close) {
+            clearCloseTimeout();
             dialogNode.close();
         }
-    }, [isOpen, ref]);
+    }, [isOpen, ref, clearCloseTimeout]);
     useScrollControl(ref, isOpen);
     const setOpenClass = React.useCallback((shouldAdd) => {
         const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
@@ -2677,25 +2777,37 @@ const useDialog = (ref, isOpen) => {
     React.useEffect(() => {
         const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
         if (dialogNode) {
-            if (isOpen && !dialogNode.open && dialogNode.showModal) {
-                dialogNode.showModal();
-                setOpenClass(true);
+            if (isOpen) {
+                clearCloseTimeout();
+                if (!dialogNode.open && dialogNode.showModal) {
+                    dialogNode.showModal();
+                    setOpenClass(true);
+                }
             }
             else if (!isOpen && dialogNode.open) {
                 setOpenClass(false);
+                scheduleDialogClose(dialogNode);
             }
         }
-    }, [isOpen, ref, setOpenClass]);
+        return () => {
+            clearCloseTimeout();
+        };
+    }, [isOpen, ref, setOpenClass, clearCloseTimeout, scheduleDialogClose]);
     const openDialog = () => {
-        if ((ref === null || ref === void 0 ? void 0 : ref.current) && !ref.current.open) {
-            ref.current.showModal();
-            setOpenClass(true);
+        const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (dialogNode) {
+            clearCloseTimeout();
+            if (!dialogNode.open && dialogNode.showModal) {
+                dialogNode.showModal();
+                setOpenClass(true);
+            }
         }
     };
     const closeDialog = () => {
         const dialogNode = ref === null || ref === void 0 ? void 0 : ref.current;
         if (dialogNode && dialogNode.open) {
             setOpenClass(false);
+            scheduleDialogClose(dialogNode);
         }
     };
     return {
@@ -2716,7 +2828,7 @@ var __rest$29 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const Dialog = (props, ref) => {
+const _Dialog = (props, ref) => {
     const { children, isOpen, onClose, closeOnBackdropClick = true, closeOnEscapeKeyDown } = props, restProps = __rest$29(props, ["children", "isOpen", "onClose", "closeOnBackdropClick", "closeOnEscapeKeyDown"]);
     const dialogElementRef = React.useRef(ref);
     const contentElementRef = React.useRef(null);
@@ -2739,8 +2851,9 @@ const Dialog = (props, ref) => {
         },
     })));
 };
+const Dialog = React.forwardRef(_Dialog);
 Dialog.spiritComponent = 'Dialog';
-var Dialog$1 = React.forwardRef(Dialog);
+Dialog.displayName = 'Dialog';
 
 function useDividerStyleProps(props) {
     const DividerClass = useClassNamePrefix('Divider');
@@ -2757,7 +2870,6 @@ const Divider = (props) => {
 };
 Divider.spiritComponent = 'Divider';
 
-const DRAWER_CLOSE_BUTTON_LABEL_DEFAULT = 'Close';
 const DRAWER_ALIGNMENT_DEFAULT = AlignmentX.RIGHT;
 
 const defaultContext$7 = {
@@ -2815,7 +2927,7 @@ const Drawer = (props) => {
     };
     useLastActiveFocus(isOpen);
     return (React.createElement(DrawerProvider, { value: contextValue },
-        React.createElement(Dialog$1, Object.assign({}, otherProps, styleProps, { id: id, isOpen: isOpen, onClose: onClose, className: classNames(classProps.root, styleProps.className) }), children)));
+        React.createElement(Dialog, Object.assign({}, otherProps, styleProps, { id: id, isOpen: isOpen, onClose: onClose, className: classNames(classProps.root, styleProps.className) }), children)));
 };
 Drawer.spiritComponent = 'Drawer';
 
@@ -2870,21 +2982,22 @@ var __rest$25 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$D = {
+const defaultProps$G = {
     color: ComponentButtonColors.TERTIARY,
     iconBoxSize: DEFAULT_BOX_SIZE,
-    label: DRAWER_CLOSE_BUTTON_LABEL_DEFAULT,
     size: Sizes.MEDIUM,
 };
 const DrawerCloseButton = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$D), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$G), props);
     const { color, iconBoxSize, label, size } = propsWithDefaults, restProps = __rest$25(propsWithDefaults, ["color", "iconBoxSize", "label", "size"]);
+    const { t } = useI18n();
+    const closeLabel = label !== null && label !== void 0 ? label : t('common.close');
     const { id, isOpen, onClose } = useDrawerContext();
     const { classProps } = useDrawerStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return (React.createElement(Button, Object.assign({}, otherProps, { "aria-expanded": isOpen, "aria-controls": id, onClick: onClose, color: color, size: size, UNSAFE_className: classNames(classProps.closeButton, styleProps.className), UNSAFE_style: styleProps.style, isSymmetrical: true }),
         React.createElement(Icon, { name: "close", boxSize: iconBoxSize }),
-        React.createElement(VisuallyHidden, null, label)));
+        React.createElement(VisuallyHidden, null, closeLabel)));
 };
 DrawerCloseButton.spiritComponent = 'DrawerCloseButton';
 
@@ -2900,15 +3013,17 @@ var __rest$24 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _DrawerPanel = (props, ref) => {
-    const { elementType: ElementTag = 'div', children } = props, restProps = __rest$24(props, ["elementType", "children"]);
+    const { elementType = 'div', children } = props, restProps = __rest$24(props, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps } = useDrawerStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.panel, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }),
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.panel, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }),
         React.createElement("div", { className: classProps.content }, children)));
 };
 const DrawerPanel = React.forwardRef(_DrawerPanel);
 DrawerPanel.spiritComponent = 'DrawerPanel';
+DrawerPanel.displayName = 'DrawerPanel';
 
 const NAME_ARIA_EXPANDED = 'aria-expanded';
 const NAME_ARIA_CONTROLS = 'aria-controls';
@@ -3031,11 +3146,11 @@ var __rest$21 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$C = {
+const defaultProps$F = {
     elementType: 'button',
 };
 const DropdownTrigger = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$C), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$F), props);
     const { elementType: ElementTag = 'button', children } = propsWithDefaults, rest = __rest$21(propsWithDefaults, ["elementType", "children"]);
     const { id, isOpen, onToggle, fullWidthMode, triggerRef } = useDropdownContext();
     const { classProps, props: modifiedProps } = useDropdownStyleProps(Object.assign({ isOpen }, rest));
@@ -3163,27 +3278,30 @@ var __rest$1Z = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$B = {
+const defaultProps$E = {
     elementType: 'div',
     hasSpacing: false,
     hasEndDivider: false,
     hasIntermediateDividers: false,
     hasStartDivider: false,
 };
-const Stack = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$B), props);
-    const { elementType: ElementTag = defaultProps$B.elementType, children } = propsWithDefaults, restProps = __rest$1Z(propsWithDefaults, ["elementType", "children"]);
+const _Stack = (props, ref) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$E), props);
+    const { elementType = defaultProps$E.elementType, children } = propsWithDefaults, restProps = __rest$1Z(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps, styleProps: stackStyle } = useStackStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
         classProps: classProps.root,
         stackStyle,
         styleProps,
         otherProps,
     });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
+const Stack = React.forwardRef(_Stack);
 Stack.spiritComponent = 'Stack';
+Stack.displayName = 'Stack';
 
 var __rest$1Y = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -3196,18 +3314,24 @@ var __rest$1Y = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const StackItem = (props) => {
-    const { elementType: ElementTag = 'div', children } = props, restProps = __rest$1Y(props, ["elementType", "children"]);
+const defaultProps$D = {
+    elementType: 'div',
+};
+const _StackItem = (props, ref) => {
+    const { elementType = defaultProps$D.elementType, children } = props, restProps = __rest$1Y(props, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useStackStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
         classProps: classProps.item,
         styleProps,
         otherProps,
     });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
+const StackItem = React.forwardRef(_StackItem);
 StackItem.spiritComponent = 'StackItem';
+StackItem.displayName = 'StackItem';
 
 function useEmptyStateStyleProps(props) {
     const emptyStateClass = useClassNamePrefix('EmptyState');
@@ -3323,9 +3447,6 @@ const DEFAULT_ERROR_MESSAGE_QUEUE_DUPLICITY = 'This file already exists in the q
 const DEFAULT_ERROR_MESSAGE_QUEUE_LIMIT = 'You have exceeded the number of files allowed in the queue';
 const DEFAULT_ERROR_MESSAGE_UNSUPPORTED_FILE = 'This file type is not supported';
 const DEFAULT_ICON_NAME = 'file';
-const DEFAULT_BUTTON_LABEL = 'Remove';
-const DEFAULT_EDIT_BUTTON_LABEL = 'Edit';
-const DEFAULT_ATTACHMENT_LIST_LABEL = 'Attachments';
 const FileUploaderCropCSS = {
     TOP: '--file-uploader-attachment-image-top',
     LEFT: '--file-uploader-attachment-image-left',
@@ -3695,7 +3816,9 @@ var __rest$1S = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const FileUploaderList = (props) => {
-    const { label = DEFAULT_ATTACHMENT_LIST_LABEL, id, attachmentComponent, inputName, hasImagePreview } = props, restProps = __rest$1S(props, ["label", "id", "attachmentComponent", "inputName", "hasImagePreview"]);
+    const { t } = useI18n();
+    const { label, id, attachmentComponent, inputName, hasImagePreview } = props, restProps = __rest$1S(props, ["label", "id", "attachmentComponent", "inputName", "hasImagePreview"]);
+    const attachmentsLabel = label !== null && label !== void 0 ? label : t('fileUploader.attachments');
     const { classProps } = useFileUploaderStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     const { fileQueue, onDismiss } = useFileUploaderContext();
@@ -3713,7 +3836,7 @@ const FileUploaderList = (props) => {
             }));
     }, [attachmentComponent, fileQueue, inputName, onDismiss, hasImagePreview]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("h3", { id: id, hidden: true }, label),
+        React.createElement("h3", { id: id, hidden: true }, attachmentsLabel),
         React.createElement("ul", Object.assign({ "aria-labelledby": id }, transferProps, styleProps, { className: classNames(classProps.list, styleProps.className) }), renderAttachments)));
 };
 FileUploaderList.spiritComponent = 'FileUploaderList';
@@ -3760,12 +3883,12 @@ const AttachmentDismissButton = (props) => {
 };
 AttachmentDismissButton.spiritComponent = 'AttachmentDismissButton';
 
-const defaultProps$A = {
+const defaultProps$C = {
     meta: undefined,
     imageObjectFit: 'cover',
 };
 const AttachmentImagePreview = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$A), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$C), props);
     const { label, imagePreview, meta, imageObjectFit } = propsWithDefaults;
     const { classProps } = useFileUploaderStyleProps({ meta, imageObjectFit });
     const { imageCropStyles, attachmentStyles } = classProps;
@@ -3861,7 +3984,10 @@ var __rest$1P = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const FileUploaderAttachment = (props) => {
-    const { editText = DEFAULT_EDIT_BUTTON_LABEL, file, hasImagePreview, iconName = DEFAULT_ICON_NAME, id, imageObjectFit, label, meta, name, onDismiss, onEdit, onError, removeText = DEFAULT_BUTTON_LABEL } = props, restProps = __rest$1P(props, ["editText", "file", "hasImagePreview", "iconName", "id", "imageObjectFit", "label", "meta", "name", "onDismiss", "onEdit", "onError", "removeText"]);
+    const { t } = useI18n();
+    const { editText, file, hasImagePreview, iconName = DEFAULT_ICON_NAME, id, imageObjectFit, label, meta, name, onDismiss, onEdit, onError, removeText } = props, restProps = __rest$1P(props, ["editText", "file", "hasImagePreview", "iconName", "id", "imageObjectFit", "label", "meta", "name", "onDismiss", "onEdit", "onError", "removeText"]);
+    const resolvedEditText = editText !== null && editText !== void 0 ? editText : t('fileUploader.edit');
+    const resolvedRemoveText = removeText !== null && removeText !== void 0 ? removeText : t('fileUploader.remove');
     const [imagePreview, setImagePreview] = React.useState('');
     const { classProps } = useFileUploaderStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
@@ -3882,8 +4008,8 @@ const FileUploaderAttachment = (props) => {
         React.createElement("span", { className: classProps.attachment.name },
             React.createElement("span", { className: useClassNamePrefix('text-truncate') }, label)),
         onEdit && (React.createElement("span", { className: classProps.attachment.slot },
-            React.createElement(AttachmentActionButton, { onClick: onEditHandler }, editText))),
-        React.createElement(AttachmentDismissButton, { onClick: dismissHandler }, removeText)));
+            React.createElement(AttachmentActionButton, { onClick: onEditHandler }, resolvedEditText))),
+        React.createElement(AttachmentDismissButton, { onClick: dismissHandler }, resolvedRemoveText)));
 };
 FileUploaderAttachment.spiritComponent = 'FileUploaderAttachment';
 
@@ -3987,25 +4113,28 @@ var __rest$1N = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultStyleProps = {
+const defaultProps$B = {
     backgroundColor: BackgroundColors.SECONDARY,
     elementType: 'footer',
     paddingBottom: PADDING_BOTTOM,
     paddingTop: PADDING_TOP,
 };
-const Footer = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultStyleProps), props);
-    const { elementType: ElementTag = defaultStyleProps.elementType, children, backgroundColor } = propsWithDefaults, restProps = __rest$1N(propsWithDefaults, ["elementType", "children", "backgroundColor"]);
+const _Footer = (props, ref) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$B), props);
+    const { elementType = defaultProps$B.elementType, children, backgroundColor } = propsWithDefaults, restProps = __rest$1N(propsWithDefaults, ["elementType", "children", "backgroundColor"]);
+    const Component = elementType;
     const { classProps } = useFooterStyleProps({ backgroundColor });
     const { styleProps, props: otherProps } = useStyleProps(restProps, {
         paddingBottom: PaddingStyleProps.paddingBottom,
         paddingTop: PaddingStyleProps.paddingTop,
         textAlignment: TextStyleProps.textAlignment,
     });
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
+const Footer = React.forwardRef(_Footer);
 Footer.spiritComponent = 'Footer';
+Footer.displayName = 'Footer';
 
 var __rest$1M = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -4057,22 +4186,23 @@ var __rest$1L = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$z = {
+const defaultProps$A = {
     alignmentX: AlignmentXExtended.STRETCH,
     alignmentY: AlignmentYExtended.STRETCH,
     elementType: 'div',
 };
-const Grid = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$z), props);
-    const { elementType: ElementTag = 'div', children } = propsWithDefaults, restProps = __rest$1L(propsWithDefaults, ["elementType", "children"]);
+const _Grid = (props, ref) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$A), props);
+    const { elementType = defaultProps$A.elementType, children } = propsWithDefaults, restProps = __rest$1L(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps, styleProps: gridStyle } = useGridStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps, gridStyle });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps, gridStyle });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
+const Grid = React.forwardRef(_Grid);
 Grid.spiritComponent = 'Grid';
-Grid.spiritDefaultElement = 'div';
-Grid.spiritDefaultProps = null;
+Grid.displayName = 'Grid';
 
 const setStyleProperty = (styleObject, propertyName, value) => {
     styleObject[propertyName] = value;
@@ -4094,18 +4224,19 @@ const setGridItemStyle = (styleObject, baseVarName, propValue) => {
 function useGridItemStyleProps(props) {
     const gridItemClass = useClassNamePrefix('GridItem');
     const gridItemStyle = {};
-    const propsClone = Object.assign({}, props);
-    const typePropNames = Object.keys(propsClone).filter((propName) => propName.startsWith('column') || propName.startsWith('row'));
+    const mutableProps = Object.assign({}, props);
+    const typePropNames = Object.keys(mutableProps).filter((propName) => propName.startsWith('column') || propName.startsWith('row'));
     typePropNames.forEach((propName) => {
         const type = propName.startsWith('column') ? 'column' : 'row';
-        if (propsClone[propName]) {
-            setGridItemStyle(gridItemStyle, `grid-item-${type}-${propName.replace(type, '').toLowerCase()}`, propsClone[propName]);
+        const value = mutableProps[propName];
+        if (value) {
+            setGridItemStyle(gridItemStyle, `grid-item-${type}-${propName.replace(type, '').toLowerCase()}`, value);
         }
-        delete propsClone[propName];
+        delete mutableProps[propName];
     });
     return {
         classProps: gridItemClass,
-        props: propsClone,
+        props: mutableProps,
         styleProps: gridItemStyle,
     };
 }
@@ -4121,16 +4252,20 @@ var __rest$1K = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const GridItem = (props) => {
-    const { elementType: ElementTag = 'div', children } = props, restProps = __rest$1K(props, ["elementType", "children"]);
+const defaultProps$z = {
+    elementType: 'div',
+};
+const _GridItem = (props, ref) => {
+    const { elementType = defaultProps$z.elementType, children } = props, restProps = __rest$1K(props, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps, styleProps: gridItemStyle, props: modifiedProps } = useGridItemStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps, gridItemStyle });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps, gridItemStyle });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
+const GridItem = React.forwardRef(_GridItem);
 GridItem.spiritComponent = 'GridItem';
-GridItem.spiritDefaultElement = 'div';
-GridItem.spiritDefaultProps = null;
+GridItem.displayName = 'GridItem';
 
 const HEADER_COLOR_DEFAULT = 'primary';
 const HEADER_ACTIONS_COLOR_DEFAULT = 'primary';
@@ -4275,7 +4410,7 @@ const HeaderDialog = (props) => {
     const providerValue = { id, isOpen, onClose };
     useLastActiveFocus(isOpen);
     return (React.createElement(HeaderDialogProvider, { value: providerValue },
-        React.createElement(Dialog$1, Object.assign({}, otherProps, { id: id, isOpen: isOpen, onClose: onClose, className: classNames(classProps.headerDialog.root, styleProps.className), style: styleProps.style }),
+        React.createElement(Dialog, Object.assign({}, otherProps, { id: id, isOpen: isOpen, onClose: onClose, className: classNames(classProps.headerDialog.root, styleProps.className), style: styleProps.style }),
             React.createElement("div", { className: classProps.headerDialog.panel },
                 React.createElement("div", { className: classProps.headerDialog.content }, children)))));
 };
@@ -4346,18 +4481,20 @@ var __rest$1E = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _HeaderDialogLink = (props, ref) => {
-    const { elementType: ElementTag = 'a', children, isCurrent } = props, restProps = __rest$1E(props, ["elementType", "children", "isCurrent"]);
+    const { elementType = 'a', children, isCurrent } = props, restProps = __rest$1E(props, ["elementType", "children", "isCurrent"]);
+    const Component = elementType;
     const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
         classProps: classProps.headerDialogLink,
         styleProps,
         otherProps,
     });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
 const HeaderDialogLink = React.forwardRef(_HeaderDialogLink);
 HeaderDialogLink.spiritComponent = 'HeaderDialogLink';
+HeaderDialogLink.displayName = 'HeaderDialogLink';
 
 const HeaderDialogNav = (props) => {
     const { classProps } = useHeaderStyleProps();
@@ -4392,18 +4529,20 @@ var __rest$1D = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _HeaderLink = (props, ref) => {
-    const { elementType: ElementTag = 'a', children, isCurrent } = props, restProps = __rest$1D(props, ["elementType", "children", "isCurrent"]);
+    const { elementType = 'a', children, isCurrent } = props, restProps = __rest$1D(props, ["elementType", "children", "isCurrent"]);
+    const Component = elementType;
     const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
         classProps: classProps.headerLink,
         styleProps,
         otherProps,
     });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
 const HeaderLink = React.forwardRef(_HeaderLink);
 HeaderLink.spiritComponent = 'HeaderLink';
+HeaderLink.displayName = 'HeaderLink';
 
 var __rest$1C = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -4510,17 +4649,18 @@ var __rest$1z = (undefined && undefined.__rest) || function (s, e) {
 const defaultProps$w = {
     elementType: 'span',
 };
-const Hidden = (props) => {
+const _Hidden = (props, ref) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$w), props);
-    const { elementType: ElementTag = 'span', children, on, from } = propsWithDefaults, restProps = __rest$1z(propsWithDefaults, ["elementType", "children", "on", "from"]);
+    const { elementType = defaultProps$w.elementType, children, on, from } = propsWithDefaults, restProps = __rest$1z(propsWithDefaults, ["elementType", "children", "on", "from"]);
+    const Component = elementType;
     const stylePropsWithMapping = Object.assign(Object.assign({}, restProps), { hideOn: on || restProps.hideOn, hideFrom: from || restProps.hideFrom });
     const { styleProps, props: otherProps } = useStyleProps(stylePropsWithMapping);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+    const mergedStyleProps = mergeStyleProps(Component, { styleProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
+const Hidden = React.forwardRef(_Hidden);
 Hidden.spiritComponent = 'Hidden';
-Hidden.spiritDefaultElement = 'span';
-Hidden.spiritDefaultProps = null;
+Hidden.displayName = 'Hidden';
 
 const IconBoxShapes = {
     ROUNDED: 'rounded',
@@ -4620,17 +4760,20 @@ const defaultProps$v = {
     isSubtle: true,
     size: SizesExtended.MEDIUM,
 };
-const IconBox = (props) => {
+const _IconBox = (props, ref) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$v), props);
     const { elementType, shape, color, iconName, isSubtle, hasBorder, size } = propsWithDefaults, restProps = __rest$1x(propsWithDefaults, ["elementType", "shape", "color", "iconName", "isSubtle", "hasBorder", "size"]);
+    const Component = elementType;
     const { colors } = useIconBoxColors(color, isSubtle);
     const { iconBoxStyles: iconBoxStyleProps, props: modifiedProps, shapesProps, sizeProps: { padding, iconSize }, } = useIconBoxStyleProps(Object.assign({ size,
         shape }, restProps));
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    return (React.createElement(Box, Object.assign({}, otherProps, { backgroundColor: colors.background, elementType: elementType, borderColor: hasBorder ? colors.border : undefined, borderRadius: shapesProps, borderWidth: hasBorder ? BorderWidths['100'] : undefined, padding: padding, textColor: colors.text, UNSAFE_className: classNames(styleProps.className, 'd-inline-flex'), UNSAFE_style: Object.assign(Object.assign({}, styleProps.style), iconBoxStyleProps) }),
+    return (React.createElement(Box, Object.assign({}, otherProps, { backgroundColor: colors.background, elementType: Component, borderColor: hasBorder ? colors.border : undefined, borderRadius: shapesProps, borderWidth: hasBorder ? BorderWidths['100'] : undefined, padding: padding, textColor: colors.text, UNSAFE_className: classNames(styleProps.className, 'd-inline-flex'), UNSAFE_style: Object.assign(Object.assign({}, styleProps.style), iconBoxStyleProps), ref: ref }),
         React.createElement(Icon, { "aria-hidden": "true", boxSize: iconSize, name: iconName })));
 };
+const IconBox = React.forwardRef(_IconBox);
 IconBox.spiritComponent = 'IconBox';
+IconBox.displayName = 'IconBox';
 
 var __rest$1w = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -4848,7 +4991,7 @@ const Modal = (props) => {
     };
     useLastActiveFocus(isOpen);
     return (React.createElement(ModalProvider, { value: contextValue },
-        React.createElement(Dialog$1, Object.assign({}, otherProps, styleProps, { id: id, isOpen: isOpen, onClose: onClose, className: classNames(classProps.root, styleProps.className), "aria-labelledby": `${id}__title` }), children)));
+        React.createElement(Dialog, Object.assign({}, otherProps, styleProps, { id: id, isOpen: isOpen, onClose: onClose, className: classNames(classProps.root, styleProps.className), "aria-labelledby": `${id}__title` }), children)));
 };
 Modal.spiritComponent = 'Modal';
 
@@ -4871,8 +5014,6 @@ const ModalBody = (_a) => {
 };
 ModalBody.spiritComponent = 'ModalBody';
 
-const MODAL_CLOSE_BUTTON_LABEL_DEFAULT = 'Close';
-
 var __rest$1q = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -4885,10 +5026,12 @@ var __rest$1q = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const ModalCloseButton = (_a) => {
-    var { label = MODAL_CLOSE_BUTTON_LABEL_DEFAULT, onClose, id, isOpen } = _a, restProps = __rest$1q(_a, ["label", "onClose", "id", "isOpen"]);
+    var { label, onClose, id, isOpen } = _a, restProps = __rest$1q(_a, ["label", "onClose", "id", "isOpen"]);
+    const { t } = useI18n();
+    const closeLabel = label !== null && label !== void 0 ? label : t('common.close');
     return (React.createElement(Button, Object.assign({}, restProps, { isSymmetrical: true, color: "tertiary", onClick: onClose, "aria-expanded": isOpen, "aria-controls": id }),
         React.createElement(Icon, { name: "close" }),
-        React.createElement(VisuallyHidden, null, label)));
+        React.createElement(VisuallyHidden, null, closeLabel)));
 };
 ModalCloseButton.spiritComponent = 'ModalCloseButton';
 
@@ -4937,21 +5080,23 @@ var __rest$1o = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const ModalDialog = (props, ref) => {
-    const { elementType: ElementTag = 'article', children, isDockedOnMobile, isExpandedOnMobile, isScrollable } = props, restProps = __rest$1o(props, ["elementType", "children", "isDockedOnMobile", "isExpandedOnMobile", "isScrollable"]);
+const _ModalDialog = (props, ref) => {
+    const { elementType = 'article', children, isDockedOnMobile, isExpandedOnMobile, isScrollable } = props, restProps = __rest$1o(props, ["elementType", "children", "isDockedOnMobile", "isExpandedOnMobile", "isScrollable"]);
+    const Component = elementType;
     const { classProps } = useModalStyleProps({ isDockedOnMobile, isExpandedOnMobile, isScrollable });
     const { modalDialogStyleProps, props: modifiedProps } = useModalDialogStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
         classProps: classProps.dialog,
         modalDialogStyleProps,
         styleProps,
         otherProps,
     });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
+const ModalDialog = React.forwardRef(_ModalDialog);
 ModalDialog.spiritComponent = 'ModalDialog';
-var ModalDialog$1 = React.forwardRef(ModalDialog);
+ModalDialog.displayName = 'ModalDialog';
 
 var __rest$1n = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -4990,13 +5135,15 @@ const defaultProps$t = {
 };
 const ModalHeader = (props) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$t), props);
-    const { children, closeLabel = MODAL_CLOSE_BUTTON_LABEL_DEFAULT, hasCloseButton } = propsWithDefaults, restProps = __rest$1m(propsWithDefaults, ["children", "closeLabel", "hasCloseButton"]);
+    const { children, closeLabel, hasCloseButton } = propsWithDefaults, restProps = __rest$1m(propsWithDefaults, ["children", "closeLabel", "hasCloseButton"]);
+    const { t } = useI18n();
+    const resolvedCloseLabel = closeLabel !== null && closeLabel !== void 0 ? closeLabel : t('common.close');
     const { classProps } = useModalStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const { id, isOpen, onClose } = useModalContext();
     return (React.createElement("header", Object.assign({}, otherProps, styleProps, { className: classNames(classProps.header, styleProps.className) }),
         children && (React.createElement("h2", { id: `${id}__title`, className: classProps.title }, children)),
-        hasCloseButton && React.createElement(ModalCloseButton, { id: id, isOpen: isOpen, label: closeLabel, onClose: onClose })));
+        hasCloseButton && React.createElement(ModalCloseButton, { id: id, isOpen: isOpen, label: resolvedCloseLabel, onClose: onClose })));
 };
 ModalHeader.spiritComponent = 'ModalHeader';
 
@@ -5105,6 +5252,7 @@ const _NavigationAction = (props, ref) => {
 };
 const NavigationAction = React.forwardRef(_NavigationAction);
 NavigationAction.spiritComponent = 'NavigationAction';
+NavigationAction.displayName = 'NavigationAction';
 
 var __rest$1i = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -5120,19 +5268,21 @@ var __rest$1i = (undefined && undefined.__rest) || function (s, e) {
 const defaultProps$q = {
     elementType: 'a',
     isSquare: false,
+    avatarSize: Sizes.SMALL,
 };
 const _NavigationAvatar = (props, ref) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$q), props);
-    const { elementType: ElementTag = defaultProps$q.elementType, avatarContent, isSquare, children } = propsWithDefaults, restProps = __rest$1i(propsWithDefaults, ["elementType", "avatarContent", "isSquare", "children"]);
+    const { elementType: ElementTag = defaultProps$q.elementType, avatarContent, avatarSize = defaultProps$q.avatarSize, isSquare, children } = propsWithDefaults, restProps = __rest$1i(propsWithDefaults, ["elementType", "avatarContent", "avatarSize", "isSquare", "children"]);
     const { classProps, props: modifiedProps } = useNavigationStyleProps(Object.assign({ isSquare }, restProps));
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.avatar, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { href: restProps.href, ref: ref }),
-        React.createElement(Avatar, { size: Sizes.SMALL, isSquare: isSquare }, avatarContent),
+    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }),
+        React.createElement(Avatar, { size: avatarSize, isSquare: isSquare }, avatarContent),
         children));
 };
 const NavigationAvatar = React.forwardRef(_NavigationAvatar);
 NavigationAvatar.spiritComponent = 'NavigationAvatar';
+NavigationAvatar.displayName = 'NavigationAvatar';
 
 var __rest$1h = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -5201,10 +5351,6 @@ const Pagination = (props) => {
 };
 Pagination.spiritComponent = 'Pagination';
 
-const PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL = 'Previous';
-const PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL = 'Next';
-const PAGINATION_LINK_DEFAULT_ACCESSIBILITY_LABEL_PREFIX = 'Go to page';
-
 var __rest$1f = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -5217,19 +5363,20 @@ var __rest$1f = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _PaginationButtonLink = (props, ref) => {
-    const _a = props, { direction, accessibilityLabel = direction === 'previous'
-        ? PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL
-        : PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL } = _a, restProps = __rest$1f(_a, ["direction", "accessibilityLabel"]);
+    const { t } = useI18n();
+    const _a = props, { direction, accessibilityLabel } = _a, restProps = __rest$1f(_a, ["direction", "accessibilityLabel"]);
+    const directionLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : (direction === 'previous' ? t('pagination.previous') : t('pagination.next'));
     const iconType = {
         previous: 'chevron-left',
         next: 'chevron-right',
     };
     return (React.createElement(ButtonLink, Object.assign({ color: "secondary", isSymmetrical: true }, restProps, { ref: ref }),
         React.createElement(Icon, { name: iconType[direction] }),
-        React.createElement(VisuallyHidden, null, accessibilityLabel)));
+        React.createElement(VisuallyHidden, null, directionLabel)));
 };
 const PaginationButtonLink = React.forwardRef(_PaginationButtonLink);
 PaginationButtonLink.spiritComponent = 'PaginationButtonLink';
+PaginationButtonLink.displayName = 'PaginationButtonLink';
 
 var __rest$1e = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -5262,17 +5409,20 @@ var __rest$1d = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _PaginationLink = (props, ref) => {
-    const { elementType: ElementTag = 'a', accessibilityLabel, isCurrent, pageNumber } = props, restProps = __rest$1d(props, ["elementType", "accessibilityLabel", "isCurrent", "pageNumber"]);
-    const visuallyHiddenLabel = accessibilityLabel || `${PAGINATION_LINK_DEFAULT_ACCESSIBILITY_LABEL_PREFIX} ${pageNumber}`;
+    const { t } = useI18n();
+    const { elementType = 'a', accessibilityLabel, isCurrent, pageNumber } = props, restProps = __rest$1d(props, ["elementType", "accessibilityLabel", "isCurrent", "pageNumber"]);
+    const visuallyHiddenLabel = accessibilityLabel || `${t('pagination.goToPage')} ${pageNumber}`;
+    const Component = elementType;
     const { classProps } = usePaginationStyleProps({ isCurrent });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.link, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, (isCurrent && { 'aria-current': 'page' }), otherProps, mergedStyleProps, { ref: ref }),
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, (isCurrent && { 'aria-current': 'page' }), otherProps, mergedStyleProps, { ref: ref }),
         React.createElement(VisuallyHidden, null, visuallyHiddenLabel),
         React.createElement("span", { "aria-hidden": "true" }, pageNumber)));
 };
 const PaginationLink = React.forwardRef(_PaginationLink);
 PaginationLink.spiritComponent = 'PaginationLink';
+PaginationLink.displayName = 'PaginationLink';
 
 var __rest$1c = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -5286,11 +5436,14 @@ var __rest$1c = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _PaginationLinkNext = (_a, ref) => {
-    var { accessibilityLabel = PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL } = _a, restProps = __rest$1c(_a, ["accessibilityLabel"]);
-    return React.createElement(PaginationButtonLink, Object.assign({ direction: "next", accessibilityLabel: accessibilityLabel }, restProps, { ref: ref }));
+    var { accessibilityLabel } = _a, restProps = __rest$1c(_a, ["accessibilityLabel"]);
+    const { t } = useI18n();
+    const nextLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : t('pagination.next');
+    return React.createElement(PaginationButtonLink, Object.assign({ direction: "next", accessibilityLabel: nextLabel }, restProps, { ref: ref }));
 };
 const PaginationLinkNext = React.forwardRef(_PaginationLinkNext);
 PaginationLinkNext.spiritComponent = 'PaginationLinkNext';
+PaginationLinkNext.displayName = 'PaginationLinkNext';
 
 var __rest$1b = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -5304,11 +5457,14 @@ var __rest$1b = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _PaginationLinkPrevious = (_a, ref) => {
-    var { accessibilityLabel = PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL } = _a, restProps = __rest$1b(_a, ["accessibilityLabel"]);
-    return React.createElement(PaginationButtonLink, Object.assign({ direction: "previous", accessibilityLabel: accessibilityLabel }, restProps, { ref: ref }));
+    var { accessibilityLabel } = _a, restProps = __rest$1b(_a, ["accessibilityLabel"]);
+    const { t } = useI18n();
+    const previousLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : t('pagination.previous');
+    return React.createElement(PaginationButtonLink, Object.assign({ direction: "previous", accessibilityLabel: previousLabel }, restProps, { ref: ref }));
 };
 const PaginationLinkPrevious = React.forwardRef(_PaginationLinkPrevious);
 PaginationLinkPrevious.spiritComponent = 'PaginationLinkPrevious';
+PaginationLinkPrevious.displayName = 'PaginationLinkPrevious';
 
 const usePagination = ({ totalPages, onChange, defaultPage, visiblePages }) => {
     const [currentPage, setCurrentPage] = React.useState(defaultPage <= 0 || defaultPage > totalPages ? 1 : (defaultPage !== null && defaultPage !== void 0 ? defaultPage : 1));
@@ -5355,7 +5511,11 @@ var __rest$1a = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const UncontrolledPagination = (props) => {
-    const { accessibilityLabel = PAGINATION_LINK_DEFAULT_ACCESSIBILITY_LABEL_PREFIX, accessibilityLabelPrevious = PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL, accessibilityLabelNext = PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL, defaultPage = 1, onChange, totalPages = 0, visiblePages = 5 } = props, rest = __rest$1a(props, ["accessibilityLabel", "accessibilityLabelPrevious", "accessibilityLabelNext", "defaultPage", "onChange", "totalPages", "visiblePages"]);
+    const { t } = useI18n();
+    const { accessibilityLabel, accessibilityLabelPrevious, accessibilityLabelNext, defaultPage = 1, onChange, totalPages = 0, visiblePages = 5 } = props, rest = __rest$1a(props, ["accessibilityLabel", "accessibilityLabelPrevious", "accessibilityLabelNext", "defaultPage", "onChange", "totalPages", "visiblePages"]);
+    const resolvedAccessibilityLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : t('pagination.goToPage');
+    const resolvedAccessibilityLabelPrevious = accessibilityLabelPrevious !== null && accessibilityLabelPrevious !== void 0 ? accessibilityLabelPrevious : t('pagination.previous');
+    const resolvedAccessibilityLabelNext = accessibilityLabelNext !== null && accessibilityLabelNext !== void 0 ? accessibilityLabelNext : t('pagination.next');
     const { currentPage, pages, handlePageChange } = usePagination({
         defaultPage,
         onChange,
@@ -5363,16 +5523,16 @@ const UncontrolledPagination = (props) => {
         visiblePages,
     });
     return (React.createElement(Pagination, Object.assign({}, rest),
-        currentPage !== 1 && (React.createElement(PaginationLinkPrevious, { accessibilityLabel: accessibilityLabelPrevious, onClick: (event) => {
+        currentPage !== 1 && (React.createElement(PaginationLinkPrevious, { accessibilityLabel: resolvedAccessibilityLabelPrevious, onClick: (event) => {
                 event.preventDefault();
                 handlePageChange(currentPage - 1);
             } })), pages === null || pages === void 0 ? void 0 :
         pages.map((pageNumber) => (React.createElement(PaginationItem, { key: pageNumber },
-            React.createElement(PaginationLink, { accessibilityLabel: `${accessibilityLabel} ${pageNumber}`, href: "#", isCurrent: currentPage === pageNumber, pageNumber: pageNumber, onClick: (event) => {
+            React.createElement(PaginationLink, { accessibilityLabel: `${resolvedAccessibilityLabel} ${pageNumber}`, href: "#", isCurrent: currentPage === pageNumber, pageNumber: pageNumber, onClick: (event) => {
                     event.preventDefault();
                     handlePageChange(pageNumber);
                 } })))),
-        currentPage !== totalPages && (React.createElement(PaginationLinkNext, { accessibilityLabel: accessibilityLabelNext, onClick: (event) => {
+        currentPage !== totalPages && (React.createElement(PaginationLinkNext, { accessibilityLabel: resolvedAccessibilityLabelNext, onClick: (event) => {
                 event.preventDefault();
                 handlePageChange(currentPage + 1);
             } }))));
@@ -5820,18 +5980,19 @@ var __rest$11 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const Tooltip = (props) => {
+const _Tooltip = (props, ref) => {
     var _a;
-    const { children, elementType: ElementTag = 'div', enableFlipping: flipProp = true, enableFlippingCrossAxis: flipCrossAxis = true, enableShifting: shiftProp = true, enableSizing: sizeProp = true, flipFallbackAxisSideDirection = 'none', flipFallbackPlacements = ['bottom', 'top'], id, isDismissible = false, isFocusableOnHover = false, isOpen = false, onToggle, placement: tooltipPlacement, positionStrategy = 'absolute', trigger = ['click', 'hover'] } = props, restProps = __rest$11(props, ["children", "elementType", "enableFlipping", "enableFlippingCrossAxis", "enableShifting", "enableSizing", "flipFallbackAxisSideDirection", "flipFallbackPlacements", "id", "isDismissible", "isFocusableOnHover", "isOpen", "onToggle", "placement", "positionStrategy", "trigger"]);
+    const { children, elementType = 'div', enableFlipping: flipProp = true, enableFlippingCrossAxis: flipCrossAxis = true, enableShifting: shiftProp = true, enableSizing: sizeProp = true, flipFallbackAxisSideDirection = 'none', flipFallbackPlacements = ['bottom', 'top'], id, isDismissible = false, isFocusableOnHover = false, isOpen = false, onToggle, placement: tooltipPlacement, positionStrategy = 'absolute', trigger = ['click', 'hover'] } = props, restProps = __rest$11(props, ["children", "elementType", "enableFlipping", "enableFlippingCrossAxis", "enableShifting", "enableSizing", "flipFallbackAxisSideDirection", "flipFallbackPlacements", "id", "isDismissible", "isFocusableOnHover", "isOpen", "onToggle", "placement", "positionStrategy", "trigger"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useTooltipStyleProps(Object.assign({ isDismissible,
         isOpen }, restProps));
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, {
+    const mergedStyleProps = mergeStyleProps(Component, {
         classProps: classProps.rootClassName,
         styleProps,
     });
     const arrowRef = React.useRef(null);
-    const tooltipRef = React.useRef(null);
+    const tooltipRef = React.useRef(ref);
     let tooltipMaxWidth;
     let tooltipOffset;
     let tooltipCornerOffset;
@@ -5886,9 +6047,11 @@ const Tooltip = (props) => {
             y,
             position,
         } },
-        React.createElement(ElementTag, Object.assign({}, otherProps, { ref: tooltipRef }, mergedStyleProps), children)));
+        React.createElement(Component, Object.assign({}, otherProps, { ref: tooltipRef }, mergedStyleProps), children)));
 };
+const Tooltip = React.forwardRef(_Tooltip);
 Tooltip.spiritComponent = 'Tooltip';
+Tooltip.displayName = 'Tooltip';
 
 var __rest$10 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -5902,12 +6065,14 @@ var __rest$10 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const TooltipCloseButton = (_a) => {
-    var { label = 'Close', onClick } = _a, restProps = __rest$10(_a, ["label", "onClick"]);
+    var { label, onClick } = _a, restProps = __rest$10(_a, ["label", "onClick"]);
+    const { t } = useI18n();
+    const closeLabel = label !== null && label !== void 0 ? label : t('common.close');
     const { classProps, props: modifiedProps } = useTooltipStyleProps(restProps);
     const { styleProps } = useStyleProps(Object.assign({}, modifiedProps));
     return (React.createElement("button", { type: "button", className: classNames(classProps.closeButtonClassName, styleProps.className), style: styleProps.style, onClick: onClick, "aria-expanded": "true" },
         React.createElement(Icon, { name: "close", "aria-hidden": "true" }),
-        React.createElement(VisuallyHidden, null, label)));
+        React.createElement(VisuallyHidden, null, closeLabel)));
 };
 TooltipCloseButton.spiritComponent = 'TooltipCloseButton';
 
@@ -6039,7 +6204,7 @@ const PricingPlanFeatureTitle = (_a) => {
             React.createElement(Icon, { name: "check-plain", boxSize: 16 }),
             React.createElement("button", { type: "button", onClick: () => setIsModalOpen(true), className: classNames(classProps.body.featureTitleText, 'text-underlined-dotted') }, title),
             React.createElement(Modal, { id: `${featureId}-modal`, isOpen: isModalOpen, onClose: () => setIsModalOpen(false) },
-                React.createElement(ModalDialog$1, { isScrollable: true },
+                React.createElement(ModalDialog, { isScrollable: true },
                     React.createElement(ModalHeader, null, title),
                     React.createElement(ModalBody, null, modalContent)))));
     }
@@ -6201,6 +6366,7 @@ const _Radio = (props, ref) => {
 };
 const Radio = React.forwardRef(_Radio);
 Radio.spiritComponent = 'Radio';
+Radio.displayName = 'Radio';
 
 const DEBOUNCE_DELAY = 50;
 const EDGE_DETECTION_INACCURACY_PX = 1;
@@ -6427,7 +6593,7 @@ const sizePaddingMapping = {
     [SizesExtended.LARGE]: { paddingY: { mobile: 'space-1200', tablet: 'space-1400' } },
     [SizesExtended.XLARGE]: { paddingY: { mobile: 'space-1400', tablet: 'space-1600' } },
 };
-const useSectionSizeProps = (props) => {
+const useSectionSizeProps = (props = {}) => {
     const { size } = props;
     const modifiedProps = size ? Object.assign(Object.assign({}, sizePaddingMapping[size]), props) : props;
     return {
@@ -6459,14 +6625,14 @@ var __rest$Q = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const defaultProps$i = {
-    containerProps: undefined,
     elementType: 'section',
     hasContainer: true,
     size: undefined,
 };
-const Section = (props) => {
+const _Section = (props, ref) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$i), props);
-    const { elementType: ElementTag = 'section', backgroundColor, children, containerProps, hasContainer } = propsWithDefaults, restProps = __rest$Q(propsWithDefaults, ["elementType", "backgroundColor", "children", "containerProps", "hasContainer"]);
+    const { elementType = defaultProps$i.elementType, backgroundColor, children, containerProps, hasContainer } = propsWithDefaults, restProps = __rest$Q(propsWithDefaults, ["elementType", "backgroundColor", "children", "containerProps", "hasContainer"]);
+    const Component = elementType;
     const { classProps } = useSectionStyleProps({ backgroundColor });
     const { modifiedProps } = useSectionSizeProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps, {
@@ -6475,10 +6641,12 @@ const Section = (props) => {
         paddingY: PaddingStyleProps.paddingY,
         textAlignment: TextStyleProps.textAlignment,
     });
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), hasContainer ? React.createElement(Container, Object.assign({}, containerProps), children) : children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), hasContainer ? React.createElement(Container, Object.assign({}, containerProps), children) : children));
 };
+const Section = React.forwardRef(_Section);
 Section.spiritComponent = 'Section';
+Section.displayName = 'Section';
 
 const defaultContext$1 = {
     isMultiselect: false,
@@ -6569,9 +6737,9 @@ var __rest$N = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const SegmentedControlItem = React.forwardRef((props, ref) => {
+const _SegmentedControlItem = (props, ref) => {
     const { isMultiselect, name, onSelectionChange, selectedValue, setSelectedValue } = useSegmentedControlContext();
-    const { id, isDisabled, value, children } = props, restProps = __rest$N(props, ["id", "isDisabled", "value", "children"]);
+    const _a = props, { id, isDisabled, value, children } = _a, restProps = __rest$N(_a, ["id", "isDisabled", "value", "children"]);
     const { classProps, props: modifiedProps } = useSegmentedControlStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const handleSetSelectedValue = (v) => {
@@ -6596,8 +6764,10 @@ const SegmentedControlItem = React.forwardRef((props, ref) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("input", Object.assign({}, otherProps, styleProps, (isDisabled && { disabled: true }), { className: classNames(classProps.input, styleProps.className), type: isMultiselect ? 'checkbox' : 'radio', name: name, id: id, value: value, checked: isChecked, onChange: () => handleSetSelectedValue(String(value)) })),
         React.createElement("label", Object.assign({ ref: ref, htmlFor: id }, styleProps, { className: classNames(classProps.label, styleProps.className) }), children)));
-});
+};
+const SegmentedControlItem = React.forwardRef(_SegmentedControlItem);
 SegmentedControlItem.spiritComponent = 'SegmentedControlItem';
+SegmentedControlItem.displayName = 'SegmentedControlItem';
 
 const useSegmentedControl = ({ defaultSelectedValue, isMultiselect }) => {
     let initialValue;
@@ -6696,6 +6866,7 @@ const _Select = (props, ref) => {
 };
 const Select = React.forwardRef(_Select);
 Select.spiritComponent = 'Select';
+Select.displayName = 'Select';
 
 var __rest$L = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -6921,6 +7092,7 @@ const _SkipLink = (props, ref) => {
 };
 const SkipLink = React.forwardRef(_SkipLink);
 SkipLink.spiritComponent = 'SkipLink';
+SkipLink.displayName = 'SkipLink';
 
 const SLIDER_DEFAULT_PROPS = {
     max: 100,
@@ -7008,6 +7180,7 @@ const _Slider = (props, ref) => {
 };
 const Slider = React.forwardRef(_Slider);
 Slider.spiritComponent = 'Slider';
+Slider.displayName = 'Slider';
 
 function useSplitButtonStyleProps() {
     const SplitButtonClass = useClassNamePrefix('SplitButton');
@@ -7040,8 +7213,6 @@ const SplitButton = (props) => {
         React.createElement("div", Object.assign({}, styleProps, otherProps, { className: classNames(classProps, styleProps.className) }), children)));
 };
 
-const UNCONTROLLED_SPLIT_BUTTON_DROPDOWN_TRIGGER_LABEL_DEFAULT = 'More';
-
 var __rest$B = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -7056,20 +7227,21 @@ var __rest$B = (undefined && undefined.__rest) || function (s, e) {
 const defaultProps$a = {
     dropdownPlacement: 'bottom-end',
     dropdownTriggerIconName: 'chevron-down',
-    dropdownTriggerLabel: UNCONTROLLED_SPLIT_BUTTON_DROPDOWN_TRIGGER_LABEL_DEFAULT,
 };
 const UncontrolledSplitButton = (props) => {
+    const { t } = useI18n();
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$a), props);
     const { buttonIconName, buttonLabel, buttonOnClick, children, dropdownTriggerIconName, dropdownTriggerLabel, dropdownPlacement, id, isButtonLabelHidden, isDisabled, isDropdownTriggerLabelHidden } = propsWithDefaults, restProps = __rest$B(propsWithDefaults, ["buttonIconName", "buttonLabel", "buttonOnClick", "children", "dropdownTriggerIconName", "dropdownTriggerLabel", "dropdownPlacement", "id", "isButtonLabelHidden", "isDisabled", "isDropdownTriggerLabelHidden"]);
+    const resolvedDropdownTriggerLabel = dropdownTriggerLabel !== null && dropdownTriggerLabel !== void 0 ? dropdownTriggerLabel : t('splitButton.dropdown');
     const [openDropdownState, setOpenDropdownState] = React.useState(false);
     return (React.createElement(SplitButton, Object.assign({}, restProps, { id: id, isDisabled: isDisabled }),
         React.createElement(Button, { onClick: buttonOnClick },
-            buttonIconName && React.createElement(Icon, { name: buttonIconName, marginRight: !isButtonLabelHidden && 'space-400' }),
+            buttonIconName && React.createElement(Icon, Object.assign({ name: buttonIconName }, (!isButtonLabelHidden && { marginRight: 'space-400' }))),
             isButtonLabelHidden ? React.createElement(VisuallyHidden, null, buttonLabel) : buttonLabel),
         React.createElement(Dropdown, { id: `${id}-dropdown`, isOpen: openDropdownState, onToggle: () => setOpenDropdownState(!openDropdownState), placement: dropdownPlacement },
             React.createElement(DropdownTrigger, { elementType: Button },
-                isDropdownTriggerLabelHidden ? (React.createElement(VisuallyHidden, null, dropdownTriggerLabel)) : (dropdownTriggerLabel),
-                React.createElement(Icon, { name: dropdownTriggerIconName, marginLeft: !isDropdownTriggerLabelHidden && 'space-400' })),
+                isDropdownTriggerLabelHidden ? (React.createElement(VisuallyHidden, null, resolvedDropdownTriggerLabel)) : (resolvedDropdownTriggerLabel),
+                React.createElement(Icon, Object.assign({ name: dropdownTriggerIconName }, (!isDropdownTriggerLabelHidden && { marginLeft: 'space-400' })))),
             React.createElement(DropdownPopover, null, children))));
 };
 
@@ -7183,15 +7355,17 @@ const defaultProps$9 = {
 };
 const _TabLink = (props, ref) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$9), props);
-    const { elementType: ElementTag = 'a', children, itemProps = {} } = propsWithDefaults, restProps = __rest$x(propsWithDefaults, ["elementType", "children", "itemProps"]);
+    const { elementType = 'a', children, itemProps = {} } = propsWithDefaults, restProps = __rest$x(propsWithDefaults, ["elementType", "children", "itemProps"]);
+    const Component = elementType;
     const { classProps } = useTabsStyleProps();
     const { styleProps: itemStyleProps, props: itemTransferProps } = useStyleProps(itemProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.link });
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link });
     return (React.createElement("li", Object.assign({}, itemStyleProps, itemTransferProps, { className: classNames(classProps.item, itemStyleProps.className), role: "presentation" }),
-        React.createElement(ElementTag, Object.assign({}, restProps, mergedStyleProps, { ref: ref }), children)));
+        React.createElement(Component, Object.assign({}, restProps, mergedStyleProps, { ref: ref }), children)));
 };
 const TabLink = React.forwardRef(_TabLink);
 TabLink.spiritComponent = 'TabLink';
+TabLink.displayName = 'TabLink';
 
 var __rest$w = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -7303,14 +7477,16 @@ const defaultProps$8 = {
 };
 const _Tag = (props, ref) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$8), props);
-    const { elementType: ElementTag = defaultProps$8.elementType, children } = propsWithDefaults, restProps = __rest$t(propsWithDefaults, ["elementType", "children"]);
+    const { elementType = defaultProps$8.elementType, children } = propsWithDefaults, restProps = __rest$t(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useTagStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
 const Tag = React.forwardRef(_Tag);
 Tag.spiritComponent = 'Tag';
+Tag.displayName = 'Tag';
 
 var __rest$s = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -7406,12 +7582,13 @@ const _TextFieldBaseInput = (props, ref) => {
     const { classProps, props: modifiedProps } = useTextFieldBaseInputStyleProps(props);
     const { id, isDisabled, isMultiline, isRequired, inputWidth, type } = modifiedProps, restProps = __rest$p(modifiedProps, ["id", "isDisabled", "isMultiline", "isRequired", "inputWidth", "type"]);
     const { props: otherProps } = useStyleProps(restProps);
-    const ElementType = isMultiline ? 'textarea' : 'input';
+    const Component = isMultiline ? 'textarea' : 'input';
     const inputType = isMultiline ? undefined : type;
-    return (React.createElement(ElementType, Object.assign({}, otherProps, { className: classProps.input, disabled: isDisabled, id: id, required: isRequired, size: inputWidth, type: inputType, ref: ref })));
+    return (React.createElement(Component, Object.assign({}, otherProps, { className: classProps.input, disabled: isDisabled, id: id, required: isRequired, size: inputWidth, type: inputType, ref: ref })));
 };
 const TextFieldBaseInput = React.forwardRef(_TextFieldBaseInput);
 TextFieldBaseInput.spiritComponent = 'TextFieldBaseInput';
+TextFieldBaseInput.displayName = 'TextFieldBaseInput';
 
 var __rest$o = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -7466,9 +7643,6 @@ function useTextFieldBaseStyleProps(props) {
     };
 }
 
-const TEXT_FIELD_BASE_PASSWORD_TOGGLE_SHOW_LABEL_DEFAULT = 'Show password';
-const TEXT_FIELD_BASE_PASSWORD_TOGGLE_HIDE_LABEL_DEFAULT = 'Hide password';
-
 function useTextFieldBasePasswordToggleStyleProps() {
     const TextFieldBaseClass = useClassNamePrefix('TextField');
     const TextFieldBasePasswordToggleClass = `${TextFieldBaseClass}__passwordToggle`;
@@ -7484,11 +7658,10 @@ function useTextFieldBasePasswordToggleStyleProps() {
 }
 
 const TextFieldBasePasswordToggle = (props) => {
+    const { t } = useI18n();
     const { children, isPasswordShown, onToggleClick, isDisabled, size } = props;
     const { classProps } = useTextFieldBasePasswordToggleStyleProps();
-    const ariaLabel = isPasswordShown
-        ? TEXT_FIELD_BASE_PASSWORD_TOGGLE_HIDE_LABEL_DEFAULT
-        : TEXT_FIELD_BASE_PASSWORD_TOGGLE_SHOW_LABEL_DEFAULT;
+    const ariaLabel = isPasswordShown ? t('textField.password.hide') : t('textField.password.show');
     return (React.createElement("div", { className: classProps.passwordToggle },
         children,
         React.createElement("button", { className: classProps.passwordToggleButton, type: "button", role: "switch", "aria-checked": !!isPasswordShown, "aria-label": ariaLabel, onClick: () => onToggleClick(), disabled: isDisabled },
@@ -7562,6 +7735,7 @@ const _TextFieldBase = (props, ref) => {
 };
 const TextFieldBase = React.forwardRef(_TextFieldBase);
 TextFieldBase.spiritComponent = 'TextFieldBase';
+TextFieldBase.displayName = 'TextFieldBase';
 
 const useAdjustHeight = ({ elementReference, maxHeight, onInput, isAutoResizing, }) => {
     const adjustHeight = (element) => {
@@ -7622,10 +7796,12 @@ const _TextArea = (props, ref) => {
 };
 const TextArea = React.forwardRef(_TextArea);
 TextArea.spiritComponent = 'TextArea';
+TextArea.displayName = 'TextArea';
 
 const _TextField = (props, ref) => (React.createElement(TextFieldBase, Object.assign({ type: "text" }, props, { ref: ref })));
 const TextField = React.forwardRef(_TextField);
 TextField.spiritComponent = 'TextField';
+TextField.displayName = 'TextField';
 
 const TIMELINE_MARKER = {
     DOT: 'dot',
@@ -7861,7 +8037,6 @@ const TRANSITIONING_STYLES = {
     exited: 'is-hidden',
 };
 const ICON_BOX_SIZE = 20;
-const TOAST_BAR_CLOSE_BUTTON_LABEL_DEFAULT = 'Close';
 const DEFAULT_TOAST_COLOR = 'neutral';
 const DEFAULT_TOAST_AUTO_CLOSE_INTERVAL = 3000;
 const ToastColorsExtended = {
@@ -7952,7 +8127,9 @@ var __rest$a = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const ToastBar = (props) => {
-    const { id, children, closeLabel = TOAST_BAR_CLOSE_BUTTON_LABEL_DEFAULT, color = DEFAULT_TOAST_COLOR, hasIcon, iconName, isDismissible, isOpen = true, onClose = () => { } } = props, restProps = __rest$a(props, ["id", "children", "closeLabel", "color", "hasIcon", "iconName", "isDismissible", "isOpen", "onClose"]);
+    const { t } = useI18n();
+    const { id, children, closeLabel, color = DEFAULT_TOAST_COLOR, hasIcon, iconName, isDismissible, isOpen = true, onClose = () => { } } = props, restProps = __rest$a(props, ["id", "children", "closeLabel", "color", "hasIcon", "iconName", "isDismissible", "isOpen", "onClose"]);
+    const resolvedCloseLabel = closeLabel !== null && closeLabel !== void 0 ? closeLabel : t('common.close');
     const rootElementRef = React.useRef(null);
     const toastIconName = useToastIcon({ color, iconName });
     const { classProps, props: modifiedProps } = useToastBarStyleProps(Object.assign(Object.assign({}, restProps), { color,
@@ -7963,7 +8140,7 @@ const ToastBar = (props) => {
             React.createElement("div", { className: classProps.container },
                 (hasIcon || iconName) && React.createElement(Icon, { name: toastIconName, boxSize: ICON_BOX_SIZE }),
                 React.createElement("div", { className: classProps.content }, children)),
-            React.createElement(ToastCloseButton, { id: id, isOpen: isOpen, closeLabel: closeLabel, onClose: onClose, isDismissible: isDismissible }))))));
+            React.createElement(ToastCloseButton, { id: id, isOpen: isOpen, closeLabel: resolvedCloseLabel, onClose: onClose, isDismissible: isDismissible }))))));
 };
 ToastBar.spiritComponent = 'ToastBar';
 
@@ -8001,14 +8178,16 @@ const defaultProps$2 = {
 };
 const _ToastBarLink = (props, ref) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$2), props);
-    const { elementType: ElementTag = defaultProps$2.elementType, children } = propsWithDefaults, restProps = __rest$8(propsWithDefaults, ["elementType", "children"]);
+    const { elementType = defaultProps$2.elementType, children } = propsWithDefaults, restProps = __rest$8(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useToastBarStyleProps(Object.assign({}, restProps));
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.link, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.link, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }), children));
 };
 const ToastBarLink = React.forwardRef(_ToastBarLink);
 ToastBarLink.spiritComponent = 'ToastBarLink';
+ToastBarLink.displayName = 'ToastBarLink';
 
 const defaultToastContext = {
     clear: () => { },
@@ -8039,11 +8218,13 @@ var __rest$7 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const UncontrolledToast = (props) => {
-    const { alignmentX, alignmentY, isCollapsible, closeLabel = TOAST_BAR_CLOSE_BUTTON_LABEL_DEFAULT } = props, restProps = __rest$7(props, ["alignmentX", "alignmentY", "isCollapsible", "closeLabel"]);
+    const { t } = useI18n();
+    const { alignmentX, alignmentY, isCollapsible, closeLabel } = props, restProps = __rest$7(props, ["alignmentX", "alignmentY", "isCollapsible", "closeLabel"]);
+    const resolvedCloseLabel = closeLabel !== null && closeLabel !== void 0 ? closeLabel : t('common.close');
     const { hide, queue } = useToast();
     return (React.createElement(Toast, { alignmentX: alignmentX, alignmentY: alignmentY, isCollapsible: isCollapsible }, queue.map((item) => {
         const { color, iconName, id, isOpen, content, hasIcon, isDismissible, linkProps } = item;
-        return (React.createElement(ToastBar, Object.assign({}, restProps, { key: id, id: id, closeLabel: closeLabel, color: color, hasIcon: hasIcon, iconName: iconName, isDismissible: isDismissible, onClose: () => hide(id), isOpen: isOpen && !!content }),
+        return (React.createElement(ToastBar, Object.assign({}, restProps, { key: id, id: id, closeLabel: resolvedCloseLabel, color: color, hasIcon: hasIcon, iconName: iconName, isDismissible: isDismissible, onClose: () => hide(id), isOpen: isOpen && !!content }),
             React.createElement(ToastBarMessage, null, content.message),
             content.link && React.createElement(ToastBarLink, Object.assign({}, linkProps), content.link)));
     })));
@@ -8137,6 +8318,7 @@ const _Toggle = (props, ref) => {
 };
 const Toggle = React.forwardRef(_Toggle);
 Toggle.spiritComponent = 'Toggle';
+Toggle.displayName = 'Toggle';
 
 const ELLIPSIS = '…';
 const truncateByWords = (content, limit) => {
@@ -8295,14 +8477,16 @@ const defaultProps = {
 };
 const _HeaderLogo = (props, ref) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), props);
-    const { elementType: ElementTag = defaultProps.elementType, children } = propsWithDefaults, restProps = __rest(propsWithDefaults, ["elementType", "children"]);
+    const { elementType = defaultProps.elementType, children } = propsWithDefaults, restProps = __rest(propsWithDefaults, ["elementType", "children"]);
+    const Component = elementType;
     const { classProps, props: modifiedProps } = useUnstableHeaderStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.logo, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { href: restProps.href, ref: ref }), children));
+    const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.logo, styleProps, otherProps });
+    return (React.createElement(Component, Object.assign({}, otherProps, mergedStyleProps, { href: restProps.href, ref: ref }), children));
 };
 const UNSTABLE_HeaderLogo = React.forwardRef(_HeaderLogo);
 UNSTABLE_HeaderLogo.spiritComponent = 'UNSTABLE_HeaderLogo';
+UNSTABLE_HeaderLogo.displayName = 'UNSTABLE_HeaderLogo';
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -8334,9 +8518,6 @@ exports.Collapse = Collapse;
 exports.Container = Container;
 exports.ControlButton = ControlButton;
 exports.DEBOUNCE_DELAY = DEBOUNCE_DELAY;
-exports.DEFAULT_ATTACHMENT_LIST_LABEL = DEFAULT_ATTACHMENT_LIST_LABEL;
-exports.DEFAULT_BUTTON_LABEL = DEFAULT_BUTTON_LABEL;
-exports.DEFAULT_EDIT_BUTTON_LABEL = DEFAULT_EDIT_BUTTON_LABEL;
 exports.DEFAULT_ERROR_MESSAGE_MAX_FILE_SIZE = DEFAULT_ERROR_MESSAGE_MAX_FILE_SIZE;
 exports.DEFAULT_ERROR_MESSAGE_QUEUE_DUPLICITY = DEFAULT_ERROR_MESSAGE_QUEUE_DUPLICITY;
 exports.DEFAULT_ERROR_MESSAGE_QUEUE_LIMIT = DEFAULT_ERROR_MESSAGE_QUEUE_LIMIT;
@@ -8346,7 +8527,7 @@ exports.DEFAULT_FILE_SIZE_LIMIT = DEFAULT_FILE_SIZE_LIMIT;
 exports.DEFAULT_ICON_NAME = DEFAULT_ICON_NAME;
 exports.DEFAULT_TOAST_AUTO_CLOSE_INTERVAL = DEFAULT_TOAST_AUTO_CLOSE_INTERVAL;
 exports.DEFAULT_TOAST_COLOR = DEFAULT_TOAST_COLOR;
-exports.Dialog = Dialog$1;
+exports.Dialog = Dialog;
 exports.Divider = Divider;
 exports.Drawer = Drawer;
 exports.DrawerCloseButton = DrawerCloseButton;
@@ -8407,7 +8588,7 @@ exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalCloseButton = ModalCloseButton;
 exports.ModalConsumer = ModalConsumer;
-exports.ModalDialog = ModalDialog$1;
+exports.ModalDialog = ModalDialog;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
 exports.ModalProvider = ModalProvider;
@@ -8416,9 +8597,6 @@ exports.NavigationAction = NavigationAction;
 exports.NavigationAvatar = NavigationAvatar;
 exports.NavigationItem = NavigationItem;
 exports.NoSsr = NoSsr;
-exports.PAGINATION_LINK_DEFAULT_ACCESSIBILITY_LABEL_PREFIX = PAGINATION_LINK_DEFAULT_ACCESSIBILITY_LABEL_PREFIX;
-exports.PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL = PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL;
-exports.PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL = PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL;
 exports.Pagination = Pagination;
 exports.PaginationButtonLink = PaginationButtonLink;
 exports.PaginationItem = PaginationItem;
@@ -8457,7 +8635,6 @@ exports.Spinner = Spinner;
 exports.SplitButton = SplitButton;
 exports.Stack = Stack;
 exports.StackItem = StackItem;
-exports.TOAST_BAR_CLOSE_BUTTON_LABEL_DEFAULT = TOAST_BAR_CLOSE_BUTTON_LABEL_DEFAULT;
 exports.TRANSITIONING_STYLES = TRANSITIONING_STYLES;
 exports.TRANSITION_DURATION = TRANSITION_DURATION;
 exports.TabContent = TabContent;