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

package/index.cjs

@@ -88,7 +88,7 @@ const ColorPrefixes = {
     EMOTION: 'emotion',
 };
 
-var __rest$2V = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2W = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -188,7 +188,7 @@ const Sizes = {
     LARGE: 'large',
 };
 const SizesExtended = Object.assign(Object.assign({ XSMALL: 'xsmall' }, Sizes), { XLARGE: 'xlarge' });
-const _a = createUppercaseKeyDictionary(spiritDesignTokens.containers), { MAXWIDTH, PADDING } = _a, ContainerTokenSizes = __rest$2V(_a, ["MAXWIDTH", "PADDING"]);
+const _a = createUppercaseKeyDictionary(spiritDesignTokens.containers), { MAXWIDTH, PADDING } = _a, ContainerTokenSizes = __rest$2W(_a, ["MAXWIDTH", "PADDING"]);
 const ValidationStates = {
     SUCCESS: 'success',
     WARNING: 'warning',
@@ -215,6 +215,11 @@ exports.DirectionAxis = void 0;
 })(exports.DirectionAxis || (exports.DirectionAxis = {}));
 const isDirectionHorizontal = (direction) => direction === Direction.HORIZONTAL;
 
+const InputPositions = {
+    START: 'start',
+    END: 'end',
+};
+
 const ObjectFit = {
     CONTAIN: 'contain',
     COVER: 'cover',
@@ -626,7 +631,7 @@ const useStyleUtilities = (props, prefix = '', additionalProps = {}) => {
     };
 };
 
-var __rest$2U = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2V = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -639,7 +644,7 @@ var __rest$2U = (undefined && undefined.__rest) || function (s, e) {
 };
 function useStyleProps(props, additionalUtilities) {
     const classNamePrefix = React.useContext(ClassNamePrefixContext);
-    const { UNSAFE_className, UNSAFE_style } = props, otherProps = __rest$2U(props, ["UNSAFE_className", "UNSAFE_style"]);
+    const { UNSAFE_className, UNSAFE_style } = props, otherProps = __rest$2V(props, ["UNSAFE_className", "UNSAFE_style"]);
     const styleUtilitiesConfig = Object.assign({ theme: ThemeStyleProps.theme }, (additionalUtilities !== null && additionalUtilities !== void 0 ? additionalUtilities : {}));
     const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix, styleUtilitiesConfig);
     const style = Object.assign({}, UNSAFE_style);
@@ -765,11 +770,11 @@ const useClickOutside = ({ ref, callback }) => {
 };
 
 const useDeprecationMessage = ({ method = 'component', trigger, componentName, componentProps, propertyProps, customText, }) => {
-    let message;
-    let hasProps;
     const messageBase = `Deprecation warning (${componentName}):`;
     React.useEffect(() => {
         const isExecutable = trigger && componentName && process.env.NODE_ENV === 'development';
+        let message;
+        let hasProps;
         switch (method) {
             case 'property':
                 if (propertyProps === null || propertyProps === void 0 ? void 0 : propertyProps.delete) {
@@ -820,10 +825,6 @@ const useDimensionStyle = (property, prefix) => {
     return style;
 };
 
-function useDirectionClass(componentClass, property) {
-    return generateStylePropsClassNames(componentClass, property);
-}
-
 const useDragAndDrop = (props) => {
     const [isDragging, setDragging] = React.useState(false);
     const onDragOverHandler = (event) => {
@@ -878,6 +879,13 @@ function useIconName(key, iconMap, defaultKey = 'default') {
     return key && iconMap[key] ? iconMap[key] : iconMap[defaultKey];
 }
 
+function useInputPositionClass(componentClass, property) {
+    if (!property) {
+        return '';
+    }
+    return generateStylePropsClassNames(componentClass, property, 'inputPosition');
+}
+
 const useLastActiveFocus = (isOpen) => {
     const lastActiveElement = React.useRef(null);
     React.useEffect(() => {
@@ -1007,6 +1015,43 @@ function useSpacingStyle(spacing, prefix, direction = undefined) {
     return style;
 }
 
+const SYMMETRICAL_CLASS_SUFFIX = '--symmetrical';
+const NON_SYMMETRICAL_CLASS_SUFFIX = '--asymmetrical';
+function getSymmetryClassNamesReducer(componentClass, isSymmetrical) {
+    return (acc, breakpoint) => {
+        if (breakpoint in isSymmetrical) {
+            const value = isSymmetrical[breakpoint];
+            const infix = breakpoint === BREAKPOINT_MOBILE ? '' : `--${breakpoint}`;
+            if (value) {
+                return {
+                    classes: [...acc.classes, `${componentClass}${infix}${SYMMETRICAL_CLASS_SUFFIX}`],
+                    wasSymmetrical: true,
+                };
+            }
+            if (acc.wasSymmetrical) {
+                return {
+                    classes: [...acc.classes, `${componentClass}${infix}${NON_SYMMETRICAL_CLASS_SUFFIX}`],
+                    wasSymmetrical: acc.wasSymmetrical,
+                };
+            }
+        }
+        return acc;
+    };
+}
+function useSymmetry(componentClass, isSymmetrical) {
+    if (typeof isSymmetrical !== 'object' || isSymmetrical === null) {
+        return {
+            isSymmetricalActive: isSymmetrical === true,
+            symmetricalClassName: isSymmetrical ? `${componentClass}${SYMMETRICAL_CLASS_SUFFIX}` : '',
+        };
+    }
+    const { classes } = Object.keys(spiritDesignTokens.breakpoints).reduce(getSymmetryClassNamesReducer(componentClass, isSymmetrical), { classes: [], wasSymmetrical: false });
+    return {
+        isSymmetricalActive: Object.values(isSymmetrical).includes(true),
+        symmetricalClassName: classes.join(' '),
+    };
+}
+
 const useToggle = (initialState = false) => {
     const [state, setState] = React.useState(initialState);
     const toggle = React.useCallback(() => setState((prevState) => !prevState), []);
@@ -1072,7 +1117,7 @@ const useOpenItem = (id) => {
     };
 };
 
-var __rest$2T = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2U = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1084,7 +1129,7 @@ var __rest$2T = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const Accordion = (props) => {
-    const { children, elementType: ElementTag = 'section', open, toggle } = props, restProps = __rest$2T(props, ["children", "elementType", "open", "toggle"]);
+    const { children, elementType: ElementTag = 'section', open, toggle } = props, restProps = __rest$2U(props, ["children", "elementType", "open", "toggle"]);
     const { classProps } = useAccordionStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps });
@@ -1096,6 +1141,8 @@ const Accordion = (props) => {
         React.createElement(AccordionProvider, { value: contextValue }, children)));
 };
 Accordion.spiritComponent = 'Accordion';
+Accordion.spiritDefaultElement = 'section';
+Accordion.spiritDefaultProps = null;
 
 const defaultContext$8 = {
     id: '',
@@ -1105,7 +1152,7 @@ const AccordionItemProvider = AccordionItemContext.Provider;
 AccordionItemContext.Consumer;
 const useAccordionItemContext = () => React.useContext(AccordionItemContext);
 
-var __rest$2S = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2T = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1117,7 +1164,7 @@ var __rest$2S = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const AccordionItem = (props) => {
-    const { children, elementType: ElementTag = 'article', id } = props, restProps = __rest$2S(props, ["children", "elementType", "id"]);
+    const { children, elementType: ElementTag = 'article', id } = props, restProps = __rest$2T(props, ["children", "elementType", "id"]);
     const { classProps } = useAccordionStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.item, styleProps });
@@ -1126,12 +1173,14 @@ const AccordionItem = (props) => {
         React.createElement(AccordionItemProvider, { value: contextValue }, children)));
 };
 AccordionItem.spiritComponent = 'AccordionItem';
+AccordionItem.spiritDefaultElement = 'article';
+AccordionItem.spiritDefaultProps = null;
 
 const DEFAULT_BOX_SIZE = 24;
 
 const useIconBoxSize = (boxSize) => { var _a; return typeof boxSize === 'object' ? ((_a = boxSize.mobile) !== null && _a !== void 0 ? _a : DEFAULT_BOX_SIZE) : (boxSize !== null && boxSize !== void 0 ? boxSize : DEFAULT_BOX_SIZE); };
 
-var __rest$2R = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2S = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1153,7 +1202,7 @@ const setCustomDimension$1 = (prefix, size) => {
     return style;
 };
 const useIconStyleProps = (props) => {
-    const { boxSize, color, name } = props, otherProps = __rest$2R(props, ["boxSize", "color", "name"]);
+    const { boxSize, color, name } = props, otherProps = __rest$2S(props, ["boxSize", "color", "name"]);
     const stylePrefix = `--${spiritDesignTokens.cssVariablePrefix}icon`;
     const isDualtoneIcon = String(name).includes('-dualtone');
     const dualtoneColorWithDefault = isDualtoneIcon && !color ? TextColors.PRIMARY : color;
@@ -1170,7 +1219,7 @@ const useIconStyleProps = (props) => {
     };
 };
 
-var __rest$2Q = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2R = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1181,13 +1230,13 @@ var __rest$2Q = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$_ = {
+const defaultProps$10 = {
     ariaHidden: true,
     boxSize: DEFAULT_BOX_SIZE,
 };
 const _Icon = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$_), props);
-    const { boxSize, name, title, ariaHidden } = propsWithDefaults, restProps = __rest$2Q(propsWithDefaults, ["boxSize", "name", "title", "ariaHidden"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$10), props);
+    const { boxSize, name, title, ariaHidden } = propsWithDefaults, restProps = __rest$2R(propsWithDefaults, ["boxSize", "name", "title", "ariaHidden"]);
     let icon = useIcon(name);
     const iconSize = useIconBoxSize(boxSize);
     const { classProps, iconStyleProps, props: modifiedProps } = useIconStyleProps(Object.assign({ boxSize, name }, restProps));
@@ -1205,7 +1254,7 @@ const _Icon = (props, ref) => {
 const Icon = React.forwardRef(_Icon);
 Icon.spiritComponent = 'Icon';
 
-var __rest$2P = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2Q = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1216,20 +1265,28 @@ var __rest$2P = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const AccordionHeader = (_a) => {
-    var { children, slot } = _a, restProps = __rest$2P(_a, ["children", "slot"]);
+const defaultProps$$ = {
+    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 { 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, {
+        classProps: classProps.header,
+        styleProps,
+    });
     const itemToggle = () => {
         if (toggle && id) {
             toggle(id);
         }
     };
-    return (React.createElement("h3", Object.assign({}, transferProps, styleProps, headerProps, { className: classNames(classProps.header, styleProps.className) }),
+    return (React.createElement(ElementTag, Object.assign({}, transferProps, mergedStyleProps, headerProps),
         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),
@@ -1237,8 +1294,10 @@ const AccordionHeader = (_a) => {
                 React.createElement(Icon, { name: "chevron-down" })))));
 };
 AccordionHeader.spiritComponent = 'AccordionHeader';
+AccordionHeader.spiritDefaultElement = 'h3';
+AccordionHeader.spiritDefaultProps = null;
 
-var __rest$2O = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2P = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1253,7 +1312,7 @@ const ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';
 const ATTRIBUTE_ARIA_CONTROLS = 'aria-controls';
 const ATTRIBUTE_DATA_BREAKPOINT = 'data-spirit-breakpoint';
 const useCollapseAriaProps = (props) => {
-    const { isOpen, collapsibleToBreakpoint } = props, modifiedProps = __rest$2O(props, ["isOpen", "collapsibleToBreakpoint"]);
+    const { isOpen, collapsibleToBreakpoint } = props, modifiedProps = __rest$2P(props, ["isOpen", "collapsibleToBreakpoint"]);
     useDeprecationMessage({
         method: 'custom',
         trigger: !modifiedProps.id,
@@ -1300,7 +1359,7 @@ const useResizeHeight = (ref) => {
     return height;
 };
 
-var __rest$2N = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2O = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1318,15 +1377,15 @@ const transitioningStyles = {
     exiting: 'is-transitioning',
     exited: '',
 };
-const defaultProps$Z = {
+const defaultProps$_ = {
     elementType: 'div',
     isOpen: false,
     collapsibleToBreakpoint: undefined,
     transitionDuration: TRANSITION_DURATION$1,
 };
 const Collapse = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$Z), props);
-    const { elementType: ElementTag = defaultProps$Z.elementType, children, transitionDuration = TRANSITION_DURATION$1 } = propsWithDefaults, restProps = __rest$2N(propsWithDefaults, ["elementType", "children", "transitionDuration"]);
+    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 rootElementRef = React.useRef(null);
     const collapseElementRef = React.useRef(null);
     const collapseHeight = useResizeHeight(collapseElementRef);
@@ -1364,7 +1423,7 @@ const useCollapse = (defaultOpenState) => {
     };
 };
 
-var __rest$2M = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2N = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1375,12 +1434,12 @@ var __rest$2M = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$Y = {
+const defaultProps$Z = {
     isOpen: false,
 };
 const UncontrolledCollapse = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$Y), props);
-    const { children, hideOnCollapse, isDisposable, renderTrigger } = propsWithDefaults, restProps = __rest$2M(propsWithDefaults, ["children", "hideOnCollapse", "isDisposable", "renderTrigger"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$Z), 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 }));
     const isDisposed = hideOnCollapse || isDisposable;
@@ -1396,7 +1455,7 @@ const UncontrolledCollapse = (props) => {
 };
 UncontrolledCollapse.spiritComponent = 'UncontrolledCollapse';
 
-var __rest$2L = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2M = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1408,7 +1467,7 @@ var __rest$2L = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const AccordionContent = (_a) => {
-    var { children } = _a, restProps = __rest$2L(_a, ["children"]);
+    var { children } = _a, restProps = __rest$2M(_a, ["children"]);
     const { classProps } = useAccordionStyleProps();
     const { id } = useAccordionItemContext();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
@@ -1419,7 +1478,7 @@ const AccordionContent = (_a) => {
 };
 AccordionContent.spiritComponent = 'AccordionContent';
 
-var __rest$2K = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2L = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1431,13 +1490,15 @@ var __rest$2K = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const UncontrolledAccordion = (props) => {
-    const { defaultOpen, stayOpen } = props, restProps = __rest$2K(props, ["defaultOpen", "stayOpen"]);
+    const { defaultOpen, stayOpen } = props, restProps = __rest$2L(props, ["defaultOpen", "stayOpen"]);
     const { open, toggle } = useAccordion({ defaultOpen, stayOpen });
-    return React.createElement(Accordion, Object.assign({ open: open, toggle: toggle }, restProps));
+    return React.createElement(Accordion, Object.assign({}, restProps, { open: open, toggle: toggle }));
 };
 UncontrolledAccordion.spiritComponent = 'UncontrolledAccordion';
+UncontrolledAccordion.spiritDefaultElement = 'section';
+UncontrolledAccordion.spiritDefaultProps = null;
 
-var __rest$2J = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2K = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1449,7 +1510,7 @@ var __rest$2J = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useFlexStyleProps(props) {
-    const { alignmentX, alignmentY, direction, spacing, spacingX, spacingY, isWrapping } = props, restProps = __rest$2J(props, ["alignmentX", "alignmentY", "direction", "spacing", "spacingX", "spacingY", "isWrapping"]);
+    const { alignmentX, alignmentY, direction, spacing, spacingX, spacingY, isWrapping } = props, restProps = __rest$2K(props, ["alignmentX", "alignmentY", "direction", "spacing", "spacingX", "spacingY", "isWrapping"]);
     useDeprecationMessage({
         method: 'custom',
         trigger: direction === 'row' || direction === 'column',
@@ -1471,7 +1532,7 @@ function useFlexStyleProps(props) {
     };
 }
 
-var __rest$2I = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2J = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1482,7 +1543,7 @@ var __rest$2I = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$X = {
+const defaultProps$Y = {
     alignmentX: AlignmentXExtended.STRETCH,
     alignmentY: AlignmentYExtended.STRETCH,
     direction: DirectionExtended.HORIZONTAL,
@@ -1490,16 +1551,18 @@ const defaultProps$X = {
     isWrapping: false,
 };
 const Flex = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$X), props);
-    const { elementType: ElementTag = 'div', direction, children } = propsWithDefaults, restProps = __rest$2I(propsWithDefaults, ["elementType", "direction", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$Y), props);
+    const { elementType: ElementTag = 'div', direction, children } = propsWithDefaults, restProps = __rest$2J(propsWithDefaults, ["elementType", "direction", "children"]);
     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));
 };
 Flex.spiritComponent = 'Flex';
+Flex.spiritDefaultElement = 'div';
+Flex.spiritDefaultProps = null;
 
-var __rest$2H = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2I = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1510,7 +1573,7 @@ var __rest$2H = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$W = {
+const defaultProps$X = {
     alignmentX: {
         mobile: AlignmentXExtended.STRETCH,
         tablet: AlignmentXExtended.LEFT,
@@ -1521,13 +1584,13 @@ const defaultProps$W = {
     },
 };
 const ActionGroup = (props) => {
-    const { children } = props, restProps = __rest$2H(props, ["children"]);
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$W), restProps);
+    const { children } = props, restProps = __rest$2I(props, ["children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$X), restProps);
     return React.createElement(Flex, Object.assign({}, propsWithDefaults), children);
 };
 ActionGroup.spiritComponent = 'ActionGroup';
 
-var __rest$2G = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2H = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1539,7 +1602,7 @@ var __rest$2G = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useAlertStyleProps(props) {
-    const { color, isCentered } = props, modifiedProps = __rest$2G(props, ["color", "isCentered"]);
+    const { color, isCentered } = props, modifiedProps = __rest$2H(props, ["color", "isCentered"]);
     const alertClass = useClassNamePrefix('Alert');
     const alertColorClass = `${alertClass}--${color}`;
     const alertCenteredClass = `${alertClass}--center`;
@@ -1564,7 +1627,7 @@ function useAlertIcon({ color, iconName }) {
     return iconName || iconNameValue;
 }
 
-var __rest$2F = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2G = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1575,13 +1638,13 @@ var __rest$2F = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$V = {
+const defaultProps$W = {
     color: 'success',
     isCentered: false,
 };
 const Alert = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$V), props);
-    const { elementType: ElementTag = 'div', children, color, iconName } = propsWithDefaults, restProps = __rest$2F(propsWithDefaults, ["elementType", "children", "color", "iconName"]);
+    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 { classProps, props: modifiedProps } = useAlertStyleProps(Object.assign({ color }, restProps));
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
@@ -1592,7 +1655,7 @@ const Alert = (props) => {
 };
 Alert.spiritComponent = 'Alert';
 
-var __rest$2E = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2F = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1605,7 +1668,7 @@ var __rest$2E = (undefined && undefined.__rest) || function (s, e) {
 };
 const getAvatarSizeClassname = (className, size) => compose(applySize(size))(className);
 function useAvatarStyleProps(props) {
-    const { isSquare, size } = props, restProps = __rest$2E(props, ["isSquare", "size"]);
+    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), {
@@ -1617,7 +1680,7 @@ function useAvatarStyleProps(props) {
     };
 }
 
-var __rest$2D = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2E = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1628,14 +1691,14 @@ var __rest$2D = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$U = {
+const defaultProps$V = {
     elementType: 'div',
     isSquare: false,
     size: SizesExtended.MEDIUM,
 };
 const _Avatar = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$U), props);
-    const { elementType: ElementTag = 'div', children } = propsWithDefaults, restProps = __rest$2D(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$V), props);
+    const { elementType: ElementTag = 'div', children } = propsWithDefaults, restProps = __rest$2E(propsWithDefaults, ["elementType", "children"]);
     const { classProps, props: modifiedProps } = useAvatarStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps });
@@ -1646,7 +1709,7 @@ _Avatar.spiritDefaultElement = 'div';
 _Avatar.spiritDefaultProps = null;
 const Avatar = React.forwardRef(_Avatar);
 
-var __rest$2C = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2D = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1658,7 +1721,7 @@ var __rest$2C = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const useBoxStyleProps = (props) => {
-    const _a = props || {}, { backgroundColor, borderColor, borderStyle, borderWidth, textColor } = _a, restProps = __rest$2C(_a, ["backgroundColor", "borderColor", "borderStyle", "borderWidth", "textColor"]);
+    const _a = props || {}, { backgroundColor, borderColor, borderStyle, borderWidth, textColor } = _a, restProps = __rest$2D(_a, ["backgroundColor", "borderColor", "borderStyle", "borderWidth", "textColor"]);
     const boxBackgroundClassName = useClassNamePrefix(`bg-${backgroundColor}`);
     const boxBorderClassName = useClassNamePrefix('border-');
     const boxBackgroundColor = backgroundColor ? boxBackgroundClassName : '';
@@ -1681,7 +1744,7 @@ const useBoxStyleProps = (props) => {
     };
 };
 
-var __rest$2B = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2C = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1692,13 +1755,13 @@ var __rest$2B = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$T = {
+const defaultProps$U = {
     elementType: 'div',
     borderStyle: BorderStyles.SOLID,
 };
 const Box = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$T), props);
-    const { elementType: ElementTag = 'div', children } = propsWithDefaults, restProps = __rest$2B(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$U), props);
+    const { elementType: ElementTag = 'div', children } = propsWithDefaults, restProps = __rest$2C(propsWithDefaults, ["elementType", "children"]);
     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 });
@@ -1708,7 +1771,7 @@ Box.spiritComponent = 'Box';
 Box.spiritDefaultElement = 'div';
 Box.spiritDefaultProps = null;
 
-var __rest$2A = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2B = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1720,7 +1783,7 @@ var __rest$2A = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useLinkStyleProps(props) {
-    const { color, hasVisitedStyleAllowed, isDisabled, underlined } = props, restProps = __rest$2A(props, ["color", "hasVisitedStyleAllowed", "isDisabled", "underlined"]);
+    const { color, hasVisitedStyleAllowed, isDisabled, underlined } = props, restProps = __rest$2B(props, ["color", "hasVisitedStyleAllowed", "isDisabled", "underlined"]);
     const linkClass = useClassNamePrefix('link');
     const linkColorClass = `${linkClass}-${color}`;
     const linkDisabledClass = `${linkClass}-disabled`;
@@ -1739,7 +1802,7 @@ function useLinkStyleProps(props) {
     };
 }
 
-var __rest$2z = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2A = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1750,15 +1813,15 @@ var __rest$2z = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$S = {
+const defaultProps$T = {
     elementType: 'a',
     color: 'primary',
     hasVisitedStyleAllowed: false,
     underlined: 'hover',
 };
 const _Link = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$S), props);
-    const { elementType: ElementTag = defaultProps$S.elementType, children } = propsWithDefaults, restProps = __rest$2z(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$T), props);
+    const { elementType: ElementTag = defaultProps$T.elementType, children } = propsWithDefaults, restProps = __rest$2A(propsWithDefaults, ["elementType", "children"]);
     const { classProps, props: modifiedProps } = useLinkStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
@@ -1767,7 +1830,7 @@ const _Link = (props, ref) => {
 const Link = React.forwardRef(_Link);
 Link.spiritComponent = 'Link';
 
-var __rest$2y = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2z = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1779,7 +1842,7 @@ var __rest$2y = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useBreadcrumbsStyleProps(props) {
-    const { isGoBackOnly } = props, restProps = __rest$2y(props, ["isGoBackOnly"]);
+    const { isGoBackOnly } = props, restProps = __rest$2z(props, ["isGoBackOnly"]);
     const breadcrumbsClass = useClassNamePrefix('Breadcrumbs');
     const displayNoneClassName = useClassNamePrefix('d-none');
     const displayTabletFlexClassName = useClassNamePrefix('d-tablet-flex');
@@ -1797,7 +1860,7 @@ function useBreadcrumbsStyleProps(props) {
     };
 }
 
-var __rest$2x = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2y = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1808,15 +1871,15 @@ var __rest$2x = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$R = {
+const defaultProps$S = {
     iconNameEnd: 'chevron-right',
     iconNameStart: 'chevron-left',
     isCurrent: false,
     isGoBackOnly: false,
 };
 const BreadcrumbsItem = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$R), props);
-    const { children, href, isCurrent, iconNameStart, iconNameEnd } = propsWithDefaults, restProps = __rest$2x(propsWithDefaults, ["children", "href", "isCurrent", "iconNameStart", "iconNameEnd"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$S), 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);
     return (React.createElement("li", Object.assign({}, transferProps, styleProps, { className: classNames(classProps.item, styleProps.className) }),
@@ -1826,7 +1889,7 @@ const BreadcrumbsItem = (props) => {
 };
 BreadcrumbsItem.spiritComponent = 'BreadcrumbsItem';
 
-var __rest$2w = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2x = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1837,13 +1900,13 @@ var __rest$2w = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$Q = {
+const defaultProps$R = {
     elementType: 'nav',
     items: [],
 };
 const Breadcrumbs = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$Q), props);
-    const { children, elementType: ElementTag = 'nav', goBackTitle, items } = propsWithDefaults, restProps = __rest$2w(propsWithDefaults, ["children", "elementType", "goBackTitle", "items"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$R), 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);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps });
@@ -1868,7 +1931,7 @@ const useButtonProps = (props) => {
     };
 };
 
-var __rest$2v = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2w = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1882,7 +1945,7 @@ var __rest$2v = (undefined && undefined.__rest) || function (s, e) {
 const getButtonColorClassname = (className, color) => compose(applyColor(color))(className);
 const getButtonSizeClassname = (className, size) => compose(applySize(size))(className);
 function useButtonStyleProps(props) {
-    const { color, isBlock, isDisabled, isLoading, isSymmetrical, size } = props, restProps = __rest$2v(props, ["color", "isBlock", "isDisabled", "isLoading", "isSymmetrical", "size"]);
+    const { color, isBlock, isDisabled, isLoading, isSymmetrical, size } = props, restProps = __rest$2w(props, ["color", "isBlock", "isDisabled", "isLoading", "isSymmetrical", "size"]);
     useDeprecationMessage({
         method: 'custom',
         trigger: !!isBlock,
@@ -1893,16 +1956,16 @@ function useButtonStyleProps(props) {
     const buttonBlockClass = `${buttonClass}--block`;
     const buttonDisabledClass = `${buttonClass}--disabled`;
     const buttonLoadingClass = `${buttonClass}--loading`;
-    const buttonSymmetricalClass = `${buttonClass}--symmetrical`;
-    if (isBlock && isSymmetrical) {
+    const { isSymmetricalActive, symmetricalClassName } = useSymmetry(buttonClass, isSymmetrical);
+    if (isBlock && isSymmetricalActive) {
         warning(false, 'isBlock and isSymmetrical props are mutually exclusive');
     }
+    const shouldApplyBlock = () => isBlock && !isSymmetricalActive;
     const classProps = classNames(buttonClass, getButtonColorClassname(buttonClass, color), getButtonSizeClassname(buttonClass, size), {
-        [buttonBlockClass]: isBlock && !isSymmetrical,
+        [buttonBlockClass]: shouldApplyBlock(),
         [buttonDisabledClass]: isDisabled || isLoading,
         [buttonLoadingClass]: isLoading,
-        [buttonSymmetricalClass]: isSymmetrical && !isBlock,
-    });
+    }, symmetricalClassName);
     return {
         classProps,
         props: restProps,
@@ -1917,7 +1980,7 @@ const usePropsContext = (props = {}) => {
     return context ? Object.assign(Object.assign({}, props), context) : props;
 };
 
-var __rest$2u = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2v = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1929,7 +1992,7 @@ var __rest$2u = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useSpinnerStyleProps(props) {
-    const { color } = props, restProps = __rest$2u(props, ["color"]);
+    const { color } = props, restProps = __rest$2v(props, ["color"]);
     const spinnerClass = useClassNamePrefix('text');
     const spinnerColorClass = color ? `${spinnerClass}-${color}` : '';
     const spinnerAnimation = useClassNamePrefix('animation-spin-clockwise');
@@ -1947,7 +2010,7 @@ const Spinner = (props) => {
 };
 Spinner.spiritComponent = 'Spinner';
 
-var __rest$2t = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2u = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1958,7 +2021,7 @@ var __rest$2t = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$P = {
+const defaultProps$Q = {
     color: 'primary',
     isBlock: false,
     isDisabled: false,
@@ -1970,8 +2033,8 @@ const defaultProps$P = {
 };
 const _Button = (props, ref) => {
     const propsWithContext = usePropsContext();
-    const propsWithDefaults = Object.assign(Object.assign(Object.assign({}, defaultProps$P), props), propsWithContext);
-    const { elementType: ElementTag = defaultProps$P.elementType, children } = propsWithDefaults, restProps = __rest$2t(propsWithDefaults, ["elementType", "children"]);
+    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 { buttonProps } = useButtonProps(restProps);
     const { classProps, props: modifiedProps } = useButtonStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -1998,7 +2061,7 @@ const useButtonLinkProps = (props) => {
     };
 };
 
-var __rest$2s = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2t = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2012,7 +2075,7 @@ var __rest$2s = (undefined && undefined.__rest) || function (s, e) {
 const getButtonLinkColorClassname = (className, color) => compose(applyColor(color))(className);
 const getButtonLinkSizeClassname = (className, size) => compose(applySize(size))(className);
 function useButtonLinkStyleProps(props) {
-    const { color, isBlock, isDisabled, isLoading, isSymmetrical, size } = props, restProps = __rest$2s(props, ["color", "isBlock", "isDisabled", "isLoading", "isSymmetrical", "size"]);
+    const { color, isBlock, isDisabled, isLoading, isSymmetrical, size } = props, restProps = __rest$2t(props, ["color", "isBlock", "isDisabled", "isLoading", "isSymmetrical", "size"]);
     useDeprecationMessage({
         method: 'custom',
         trigger: !!isBlock,
@@ -2023,23 +2086,23 @@ function useButtonLinkStyleProps(props) {
     const buttonBlockClass = `${buttonClass}--block`;
     const buttonDisabledClass = `${buttonClass}--disabled`;
     const buttonLoadingClass = `${buttonClass}--loading`;
-    const buttonSymmetricalClass = `${buttonClass}--symmetrical`;
-    if (isBlock && isSymmetrical) {
+    const { isSymmetricalActive, symmetricalClassName } = useSymmetry(buttonClass, isSymmetrical);
+    if (isBlock && isSymmetricalActive) {
         warning(false, 'isBlock and isSymmetrical props are mutually exclusive');
     }
+    const shouldApplyBlock = () => isBlock && !isSymmetricalActive;
     const classProps = classNames(buttonClass, getButtonLinkColorClassname(buttonClass, color), getButtonLinkSizeClassname(buttonClass, size), {
-        [buttonBlockClass]: isBlock && !isSymmetrical,
+        [buttonBlockClass]: shouldApplyBlock(),
         [buttonDisabledClass]: isDisabled || isLoading,
         [buttonLoadingClass]: isLoading,
-        [buttonSymmetricalClass]: isSymmetrical && !isBlock,
-    });
+    }, symmetricalClassName);
     return {
         classProps,
         props: restProps,
     };
 }
 
-var __rest$2r = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2s = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2050,7 +2113,7 @@ var __rest$2r = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$O = {
+const defaultProps$P = {
     color: 'primary',
     elementType: 'a',
     isBlock: false,
@@ -2060,8 +2123,8 @@ const defaultProps$O = {
     size: 'medium',
 };
 const _ButtonLink = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$O), props);
-    const { elementType: ElementTag = defaultProps$O.elementType, children } = propsWithDefaults, restProps = __rest$2r(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$P), props);
+    const { elementType: ElementTag = defaultProps$P.elementType, children } = propsWithDefaults, restProps = __rest$2s(propsWithDefaults, ["elementType", "children"]);
     const { buttonLinkProps } = useButtonLinkProps(propsWithDefaults);
     const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -2128,7 +2191,7 @@ function useCardStyleProps(props) {
     };
 }
 
-var __rest$2q = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2r = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2139,14 +2202,14 @@ var __rest$2q = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$N = {
+const defaultProps$O = {
     direction: DirectionExtended.VERTICAL,
     elementType: 'article',
     isBoxed: false,
 };
 const Card = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$N), props);
-    const { elementType: ElementTag = 'article', direction, isBoxed, children } = propsWithDefaults, restProps = __rest$2q(propsWithDefaults, ["elementType", "direction", "isBoxed", "children"]);
+    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 { styleProps, props: otherProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps, otherProps });
@@ -2154,7 +2217,7 @@ const Card = (props) => {
 };
 Card.spiritComponent = 'Card';
 
-var __rest$2p = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2q = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2165,19 +2228,19 @@ var __rest$2p = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$M = {
+const defaultProps$N = {
     alignmentX: AlignmentX.LEFT,
 };
 const CardArtwork = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$M), props);
-    const { children, alignmentX } = propsWithDefaults, restProps = __rest$2p(propsWithDefaults, ["children", "alignmentX"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$N), props);
+    const { children, alignmentX } = propsWithDefaults, restProps = __rest$2q(propsWithDefaults, ["children", "alignmentX"]);
     const { classProps } = useCardStyleProps({ artworkAlignmentX: alignmentX });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return (React.createElement("div", Object.assign({}, otherProps, { className: classNames(classProps.artwork, styleProps.className), style: styleProps.style }), children));
 };
 CardArtwork.spiritComponent = 'CardArtwork';
 
-var __rest$2o = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2p = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2188,19 +2251,19 @@ var __rest$2o = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$L = {
+const defaultProps$M = {
     isSelectable: false,
 };
 const CardBody = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$L), props);
-    const { children, isSelectable } = propsWithDefaults, restProps = __rest$2o(propsWithDefaults, ["children", "isSelectable"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$M), props);
+    const { children, isSelectable } = propsWithDefaults, restProps = __rest$2p(propsWithDefaults, ["children", "isSelectable"]);
     const { classProps } = useCardStyleProps({ isSelectable });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return (React.createElement("div", Object.assign({}, otherProps, { className: classNames(classProps.body, styleProps.className), style: styleProps.style }), children));
 };
 CardBody.spiritComponent = 'CardBody';
 
-var __rest$2n = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2o = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2212,14 +2275,14 @@ var __rest$2n = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const CardEyebrow = (props) => {
-    const { children } = props, restProps = __rest$2n(props, ["children"]);
+    const { children } = props, restProps = __rest$2o(props, ["children"]);
     const { classProps } = useCardStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return (React.createElement("div", Object.assign({}, otherProps, { className: classNames(classProps.eyebrow, styleProps.className), style: styleProps.style }), children));
 };
 CardEyebrow.spiritComponent = 'CardEyebrow';
 
-var __rest$2m = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2n = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2230,19 +2293,19 @@ var __rest$2m = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$K = {
+const defaultProps$L = {
     alignmentX: AlignmentX.LEFT,
 };
 const CardFooter = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$K), props);
-    const { children, alignmentX } = propsWithDefaults, restProps = __rest$2m(propsWithDefaults, ["children", "alignmentX"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$L), props);
+    const { children, alignmentX } = propsWithDefaults, restProps = __rest$2n(propsWithDefaults, ["children", "alignmentX"]);
     const { classProps } = useCardStyleProps({ footerAlignmentX: alignmentX });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return (React.createElement("footer", Object.assign({}, otherProps, { className: classNames(classProps.footer, styleProps.className), style: styleProps.style }), children));
 };
 CardFooter.spiritComponent = 'CardFooter';
 
-var __rest$2l = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2m = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2253,12 +2316,12 @@ var __rest$2l = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$J = {
+const defaultProps$K = {
     elementType: 'a',
 };
 const _CardLink = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$J), props);
-    const { elementType: ElementTag = defaultProps$J.elementType, children, href } = propsWithDefaults, restProps = __rest$2l(propsWithDefaults, ["elementType", "children", "href"]);
+    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 { classProps } = useCardStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.link, styleProps, otherProps });
@@ -2267,7 +2330,7 @@ const _CardLink = (props, ref) => {
 const CardLink = React.forwardRef(_CardLink);
 CardLink.spiritComponent = 'CardLink';
 
-var __rest$2k = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2l = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2279,7 +2342,7 @@ var __rest$2k = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const CardLogo = (props) => {
-    const { children } = props, restProps = __rest$2k(props, ["children"]);
+    const { children } = props, restProps = __rest$2l(props, ["children"]);
     const { classProps } = useCardStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return (React.createElement("div", Object.assign({}, otherProps, { className: classNames(classProps.logo, styleProps.className), style: Object.assign({}, styleProps.style) }), children));
@@ -2299,7 +2362,7 @@ const useCardMediaStyleProps = (props) => {
     };
 };
 
-var __rest$2j = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2k = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2310,15 +2373,15 @@ var __rest$2j = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$I = {
+const defaultProps$J = {
     fit: ObjectFit.COVER,
     hasFilledHeight: false,
     isExpanded: false,
     size: CardSizes.AUTO,
 };
 const CardMedia = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$I), props);
-    const { backgroundColor, children, fit, hasFilledHeight, isExpanded, size } = propsWithDefaults, restProps = __rest$2j(propsWithDefaults, ["backgroundColor", "children", "fit", "hasFilledHeight", "isExpanded", "size"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$J), 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({
         backgroundColor,
@@ -2334,7 +2397,7 @@ const CardMedia = (props) => {
 };
 CardMedia.spiritComponent = 'CardMedia';
 
-var __rest$2i = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2j = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2345,13 +2408,13 @@ var __rest$2i = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$H = {
+const defaultProps$I = {
     elementType: 'h4',
     isHeading: true,
 };
 const CardTitle = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$H), props);
-    const { elementType: ElementTag = 'h4', children, isHeading } = propsWithDefaults, restProps = __rest$2i(propsWithDefaults, ["elementType", "children", "isHeading"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$I), 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);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.title, styleProps, otherProps });
@@ -2359,7 +2422,7 @@ const CardTitle = (props) => {
 };
 CardTitle.spiritComponent = 'CardTitle';
 
-var __rest$2h = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2i = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2370,14 +2433,14 @@ var __rest$2h = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$G = {
+const defaultProps$H = {
     elementType: 'div',
     id: undefined,
     registerAria: undefined,
 };
 const HelperText = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$G), props);
-    const { helperText, elementType: ElementTag = defaultProps$G.elementType, id, registerAria } = propsWithDefaults, restProps = __rest$2h(propsWithDefaults, ["helperText", "elementType", "id", "registerAria"]);
+    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 { styleProps, props: transferProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, transferProps });
     React.useEffect(() => {
@@ -2393,7 +2456,7 @@ const HelperText = (props) => {
 };
 HelperText.spiritComponent = 'HelperText';
 
-var __rest$2g = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2h = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2405,7 +2468,7 @@ var __rest$2g = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const Label = (props) => {
-    const { elementType: ElementTag = 'label', children, htmlFor, for: labelFor } = props, restProps = __rest$2g(props, ["elementType", "children", "htmlFor", "for"]);
+    const { elementType: ElementTag = 'label', children, htmlFor, for: labelFor } = props, restProps = __rest$2h(props, ["elementType", "children", "htmlFor", "for"]);
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, otherProps });
     return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { htmlFor: ElementTag === 'label' ? labelFor || htmlFor : undefined }), children));
@@ -2438,7 +2501,7 @@ function useValidationIcon({ hasValidationStateIcon }) {
     return iconNameValue;
 }
 
-var __rest$2f = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2g = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2449,15 +2512,15 @@ var __rest$2f = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$F = {
+const defaultProps$G = {
     elementType: 'div',
     id: undefined,
     registerAria: undefined,
     role: undefined,
 };
 const ValidationText = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$F), props);
-    const { elementType: ElementTag = defaultProps$F.elementType, id, hasValidationStateIcon, registerAria, role, validationText } = propsWithDefaults, restProps = __rest$2f(propsWithDefaults, ["elementType", "id", "hasValidationStateIcon", "registerAria", "role", "validationText"]);
+    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 validationIconName = useValidationIcon({ hasValidationStateIcon });
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, transferProps });
@@ -2493,7 +2556,7 @@ const useValidationTextRole = ({ validationState, validationText, }) => {
     return role;
 };
 
-var __rest$2e = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2f = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2505,12 +2568,13 @@ var __rest$2e = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useCheckboxStyleProps(props) {
-    const { validationState, isItem, isLabelHidden } = props, restProps = __rest$2e(props, ["validationState", "isItem", "isLabelHidden"]);
+    const { inputPosition = InputPositions.START, isItem, isLabelHidden, validationState } = props, restProps = __rest$2f(props, ["inputPosition", "isItem", "isLabelHidden", "validationState"]);
     const { isDisabled, isRequired } = restProps;
     const checkboxClass = useClassNamePrefix('Checkbox');
     const checkboxDisabledClass = `${checkboxClass}--disabled`;
     const checkboxItemClass = `${checkboxClass}--item`;
     const checkboxInputClass = `${checkboxClass}__input`;
+    const checkboxInputPositionClass = useInputPositionClass(checkboxClass, inputPosition);
     const checkboxTextClass = `${checkboxClass}__text`;
     const checkboxLabelClass = `${checkboxClass}__label`;
     const checkboxLabelRequiredClass = `${checkboxClass}__label--required`;
@@ -2519,6 +2583,7 @@ function useCheckboxStyleProps(props) {
     const checkboxValidationTextClass = `${checkboxClass}__validationText`;
     const checkboxValidationClass = `${checkboxClass}--${validationState}`;
     const rootStyles = classNames(checkboxClass, {
+        [checkboxInputPositionClass]: checkboxInputPositionClass,
         [checkboxDisabledClass]: isDisabled,
         [checkboxItemClass]: isItem,
         [checkboxValidationClass]: validationState,
@@ -2540,7 +2605,7 @@ function useCheckboxStyleProps(props) {
     };
 }
 
-var __rest$2d = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2e = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2553,7 +2618,7 @@ var __rest$2d = (undefined && undefined.__rest) || function (s, e) {
 };
 const _Checkbox = (props, ref) => {
     const { classProps, props: modifiedProps } = useCheckboxStyleProps(props);
-    const { 'aria-describedby': ariaDescribedBy = '', hasValidationIcon, helperText, id, isChecked, isDisabled, isRequired, label, validationState, validationText, value } = modifiedProps, restProps = __rest$2d(modifiedProps, ['aria-describedby', "hasValidationIcon", "helperText", "id", "isChecked", "isDisabled", "isRequired", "label", "validationState", "validationText", "value"]);
+    const { 'aria-describedby': ariaDescribedBy = '', hasValidationIcon, helperText, id, isChecked, isDisabled, isRequired, label, validationState, validationText, value } = modifiedProps, restProps = __rest$2e(modifiedProps, ['aria-describedby', "hasValidationIcon", "helperText", "id", "isChecked", "isDisabled", "isRequired", "label", "validationState", "validationText", "value"]);
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const [ids, register] = useAriaIds(ariaDescribedBy);
     const ariaDescribedByProp = useAriaDescribedBy(ids);
@@ -2571,7 +2636,7 @@ const _Checkbox = (props, ref) => {
 const Checkbox = React.forwardRef(_Checkbox);
 Checkbox.spiritComponent = 'Checkbox';
 
-var __rest$2c = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2d = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2583,7 +2648,7 @@ var __rest$2c = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useContainerStyleProps(props) {
-    const { isFluid, size } = props, modifiedProps = __rest$2c(props, ["isFluid", "size"]);
+    const { isFluid, size } = props, modifiedProps = __rest$2d(props, ["isFluid", "size"]);
     const containerClass = useClassNamePrefix('Container');
     const containerFluidClass = `${containerClass}--fluid`;
     const containerSizeClass = `${containerClass}--${size}`;
@@ -2597,7 +2662,7 @@ function useContainerStyleProps(props) {
     };
 }
 
-var __rest$2b = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2c = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2608,13 +2673,13 @@ var __rest$2b = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$E = {
+const defaultProps$F = {
     isFluid: false,
     size: SizesExtended.XLARGE,
 };
 const Container = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$E), props);
-    const { children } = propsWithDefaults, restProps = __rest$2b(propsWithDefaults, ["children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$F), props);
+    const { children } = propsWithDefaults, restProps = __rest$2c(propsWithDefaults, ["children"]);
     const { classProps, props: modifiedProps } = useContainerStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps, {
         textAlignment: TextStyleProps.textAlignment,
@@ -2635,7 +2700,7 @@ const useControlButtonProps = (props) => {
     };
 };
 
-var __rest$2a = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2b = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2648,27 +2713,26 @@ var __rest$2a = (undefined && undefined.__rest) || function (s, e) {
 };
 const getControlButtonSizeClassname = (className, size) => compose(applySize(size))(className);
 function useControlButtonStyleProps(props) {
-    const { isDisabled, isSubtle, isSymmetrical, size } = props, restProps = __rest$2a(props, ["isDisabled", "isSubtle", "isSymmetrical", "size"]);
+    const { isDisabled, isSubtle, isSymmetrical, size } = props, restProps = __rest$2b(props, ["isDisabled", "isSubtle", "isSymmetrical", "size"]);
     const controlButtonClass = useClassNamePrefix('ControlButton');
     const controlButtonBackgroundClass = `${controlButtonClass}--hasBackground`;
     const controlButtonDisabledClass = `${controlButtonClass}--disabled`;
-    const controlButtonSymmetricalClass = `${controlButtonClass}--symmetrical`;
     const dynamicColorBackgroundInteractiveClass = useClassNamePrefix('dynamic-color-background-interactive');
     const dynamicColorBorderClass = useClassNamePrefix('dynamic-color-border');
     const accessibilityTapTargetClass = useClassNamePrefix('accessibility-tap-target');
+    const { symmetricalClassName } = useSymmetry(controlButtonClass, isSymmetrical);
     const classProps = classNames(controlButtonClass, getControlButtonSizeClassname(controlButtonClass, size), dynamicColorBackgroundInteractiveClass, accessibilityTapTargetClass, {
         [controlButtonDisabledClass]: isDisabled,
-        [controlButtonSymmetricalClass]: isSymmetrical,
         [controlButtonBackgroundClass]: !isSubtle,
         [dynamicColorBorderClass]: !isSubtle,
-    });
+    }, symmetricalClassName);
     return {
         classProps,
         props: restProps,
     };
 }
 
-var __rest$29 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$2a = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2679,7 +2743,7 @@ var __rest$29 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$D = {
+const defaultProps$E = {
     elementType: 'button',
     isDisabled: false,
     isSubtle: false,
@@ -2688,8 +2752,8 @@ const defaultProps$D = {
     type: 'button',
 };
 const _ControlButton = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$D), props);
-    const { elementType: ElementTag = defaultProps$D.elementType, children } = propsWithDefaults, restProps = __rest$29(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$E), props);
+    const { elementType: ElementTag = defaultProps$E.elementType, children } = propsWithDefaults, restProps = __rest$2a(propsWithDefaults, ["elementType", "children"]);
     const { controlButtonProps } = useControlButtonProps(restProps);
     const { classProps, props: modifiedProps } = useControlButtonStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -2749,7 +2813,7 @@ const useDialog = (ref, isOpen) => {
     };
 };
 
-var __rest$28 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$29 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2761,7 +2825,7 @@ var __rest$28 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const Dialog = (props, ref) => {
-    const { children, isOpen, onClose, closeOnBackdropClick = true, closeOnEscapeKeyDown } = props, restProps = __rest$28(props, ["children", "isOpen", "onClose", "closeOnBackdropClick", "closeOnEscapeKeyDown"]);
+    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);
     const { closeDialog, onTransitionEnd } = useDialog(dialogElementRef, isOpen);
@@ -2837,7 +2901,7 @@ const useDrawerStyleProps = (props = {}) => {
     };
 };
 
-var __rest$27 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$28 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2849,7 +2913,7 @@ var __rest$27 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const Drawer = (props) => {
-    const { children, alignmentX = DRAWER_ALIGNMENT_DEFAULT, isOpen, onClose, id } = props, restProps = __rest$27(props, ["children", "alignmentX", "isOpen", "onClose", "id"]);
+    const { children, alignmentX = DRAWER_ALIGNMENT_DEFAULT, isOpen, onClose, id } = props, restProps = __rest$28(props, ["children", "alignmentX", "isOpen", "onClose", "id"]);
     const { classProps } = useDrawerStyleProps({ drawerAlignmentX: alignmentX });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const contextValue = {
@@ -2863,7 +2927,7 @@ const Drawer = (props) => {
 };
 Drawer.spiritComponent = 'Drawer';
 
-var __rest$26 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$27 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2875,7 +2939,7 @@ var __rest$26 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useVisuallyHiddenProps(props) {
-    const restProps = __rest$26(props, []);
+    const restProps = __rest$27(props, []);
     const visuallyHiddenClass = useClassNamePrefix('accessibility-hidden');
     return {
         classProps: visuallyHiddenClass,
@@ -2883,7 +2947,7 @@ function useVisuallyHiddenProps(props) {
     };
 }
 
-var __rest$25 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$26 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2895,7 +2959,7 @@ var __rest$25 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const VisuallyHidden = (props) => {
-    const { children, elementType: ElementTag = 'span' } = props, rest = __rest$25(props, ["children", "elementType"]);
+    const { children, elementType: ElementTag = 'span' } = props, rest = __rest$26(props, ["children", "elementType"]);
     const { classProps, props: modifiedProps } = useVisuallyHiddenProps(rest);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
@@ -2903,7 +2967,7 @@ const VisuallyHidden = (props) => {
 };
 VisuallyHidden.spiritComponent = 'VisuallyHidden';
 
-var __rest$24 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$25 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2914,15 +2978,15 @@ var __rest$24 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$C = {
+const defaultProps$D = {
     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$C), props);
-    const { color, iconBoxSize, label, size } = propsWithDefaults, restProps = __rest$24(propsWithDefaults, ["color", "iconBoxSize", "label", "size"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$D), props);
+    const { color, iconBoxSize, label, size } = propsWithDefaults, restProps = __rest$25(propsWithDefaults, ["color", "iconBoxSize", "label", "size"]);
     const { id, isOpen, onClose } = useDrawerContext();
     const { classProps } = useDrawerStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -2932,7 +2996,7 @@ const DrawerCloseButton = (props) => {
 };
 DrawerCloseButton.spiritComponent = 'DrawerCloseButton';
 
-var __rest$23 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$24 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -2944,7 +3008,7 @@ var __rest$23 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _DrawerPanel = (props, ref) => {
-    const { elementType: ElementTag = 'div', children } = props, restProps = __rest$23(props, ["elementType", "children"]);
+    const { elementType: ElementTag = 'div', children } = props, restProps = __rest$24(props, ["elementType", "children"]);
     const { classProps } = useDrawerStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.panel, styleProps, otherProps });
@@ -2996,7 +3060,7 @@ const DropdownProvider = DropdownContext.Provider;
 DropdownContext.Consumer;
 const useDropdownContext = () => React.useContext(DropdownContext);
 
-var __rest$22 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$23 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3008,7 +3072,7 @@ var __rest$22 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const useDropdownStyleProps = (props = { isOpen: false }) => {
-    const { alignmentX, alignmentY, isOpen } = props, modifiedProps = __rest$22(props, ["alignmentX", "alignmentY", "isOpen"]);
+    const { alignmentX, alignmentY, isOpen } = props, modifiedProps = __rest$23(props, ["alignmentX", "alignmentY", "isOpen"]);
     const dropdownRootClass = useClassNamePrefix('Dropdown');
     const dropdownPopoverClass = `${dropdownRootClass}Popover`;
     const expandedClass = isOpen ? 'is-expanded' : '';
@@ -3029,7 +3093,7 @@ const useDropdownStyleProps = (props = { isOpen: false }) => {
     };
 };
 
-var __rest$21 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$22 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3041,7 +3105,7 @@ var __rest$21 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const Dropdown = (props) => {
-    const { children, enableAutoClose = true, fullWidthMode, id, isOpen = false, onAutoClose, onToggle, placement } = props, rest = __rest$21(props, ["children", "enableAutoClose", "fullWidthMode", "id", "isOpen", "onAutoClose", "onToggle", "placement"]);
+    const { children, enableAutoClose = true, fullWidthMode, id, isOpen = false, onAutoClose, onToggle, placement } = props, rest = __rest$22(props, ["children", "enableAutoClose", "fullWidthMode", "id", "isOpen", "onAutoClose", "onToggle", "placement"]);
     const { classProps, props: modifiedProps } = useDropdownStyleProps(Object.assign({ isOpen }, rest));
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const dropdownRef = React.useRef(null);
@@ -3064,7 +3128,7 @@ const Dropdown = (props) => {
 };
 Dropdown.spiritComponent = 'Dropdown';
 
-var __rest$20 = (undefined && undefined.__rest) || function (s, e) {
+var __rest$21 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3075,12 +3139,12 @@ var __rest$20 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$B = {
+const defaultProps$C = {
     elementType: 'button',
 };
 const DropdownTrigger = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$B), props);
-    const { elementType: ElementTag = 'button', children } = propsWithDefaults, rest = __rest$20(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$C), 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));
     const { styleProps: triggerStyleProps, props: transferProps } = useStyleProps(modifiedProps);
@@ -3090,7 +3154,7 @@ const DropdownTrigger = (props) => {
 };
 DropdownTrigger.spiritComponent = 'DropdownTrigger';
 
-var __rest$1$ = (undefined && undefined.__rest) || function (s, e) {
+var __rest$20 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3102,7 +3166,7 @@ var __rest$1$ = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const DropdownPopover = (props) => {
-    const { children } = props, rest = __rest$1$(props, ["children"]);
+    const { children } = props, rest = __rest$20(props, ["children"]);
     const { id, isOpen, onToggle, fullWidthMode, placement } = useDropdownContext();
     const { classProps, props: modifiedProps } = useDropdownStyleProps(Object.assign({ isOpen }, rest));
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
@@ -3137,7 +3201,7 @@ const useDropdown = ({ dropdownRef, triggerRef, enableAutoClose, onAutoClose, })
     };
 };
 
-var __rest$1_ = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1$ = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3149,7 +3213,7 @@ var __rest$1_ = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const UncontrolledDropdown = (props) => {
-    const { children, enableAutoClose = true, fullWidthMode, id, onAutoClose, placement } = props, rest = __rest$1_(props, ["children", "enableAutoClose", "fullWidthMode", "id", "onAutoClose", "placement"]);
+    const { children, enableAutoClose = true, fullWidthMode, id, onAutoClose, placement } = props, rest = __rest$1$(props, ["children", "enableAutoClose", "fullWidthMode", "id", "onAutoClose", "placement"]);
     const { classProps, props: modifiedProps } = useDropdownStyleProps(rest);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const dropdownRef = React.useRef(null);
@@ -3160,7 +3224,7 @@ const UncontrolledDropdown = (props) => {
 };
 UncontrolledDropdown.spiritComponent = 'UncontrolledDropdown';
 
-var __rest$1Z = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1_ = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3172,7 +3236,7 @@ var __rest$1Z = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useStackStyleProps(props) {
-    const { hasEndDivider, hasIntermediateDividers, hasSpacing, hasStartDivider, spacing } = props, restProps = __rest$1Z(props, ["hasEndDivider", "hasIntermediateDividers", "hasSpacing", "hasStartDivider", "spacing"]);
+    const { hasEndDivider, hasIntermediateDividers, hasSpacing, hasStartDivider, spacing } = props, restProps = __rest$1_(props, ["hasEndDivider", "hasIntermediateDividers", "hasSpacing", "hasStartDivider", "spacing"]);
     const StackClass = useClassNamePrefix('Stack');
     const StackBottomDividerClass = `${StackClass}--hasEndDivider`;
     const StackMiddleDividersClass = `${StackClass}--hasIntermediateDividers`;
@@ -3196,7 +3260,7 @@ function useStackStyleProps(props) {
     };
 }
 
-var __rest$1Y = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1Z = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3207,7 +3271,7 @@ var __rest$1Y = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$A = {
+const defaultProps$B = {
     elementType: 'div',
     hasSpacing: false,
     hasEndDivider: false,
@@ -3215,8 +3279,8 @@ const defaultProps$A = {
     hasStartDivider: false,
 };
 const Stack = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$A), props);
-    const { elementType: ElementTag = defaultProps$A.elementType, children } = propsWithDefaults, restProps = __rest$1Y(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$B), props);
+    const { elementType: ElementTag = defaultProps$B.elementType, children } = propsWithDefaults, restProps = __rest$1Z(propsWithDefaults, ["elementType", "children"]);
     const { classProps, props: modifiedProps, styleProps: stackStyle } = useStackStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, {
@@ -3229,7 +3293,7 @@ const Stack = (props) => {
 };
 Stack.spiritComponent = 'Stack';
 
-var __rest$1X = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1Y = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3241,7 +3305,7 @@ var __rest$1X = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const StackItem = (props) => {
-    const { elementType: ElementTag = 'div', children } = props, restProps = __rest$1X(props, ["elementType", "children"]);
+    const { elementType: ElementTag = 'div', children } = props, restProps = __rest$1Y(props, ["elementType", "children"]);
     const { classProps, props: modifiedProps } = useStackStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, {
@@ -3265,7 +3329,7 @@ function useEmptyStateStyleProps(props) {
     };
 }
 
-var __rest$1W = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1X = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3277,14 +3341,14 @@ var __rest$1W = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const EmptyState = (props) => {
-    const { children } = props, restProps = __rest$1W(props, ["children"]);
+    const { children } = props, restProps = __rest$1X(props, ["children"]);
     const { classProps, props: modifiedProps } = useEmptyStateStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     return (React.createElement(Stack, Object.assign({}, otherProps, { UNSAFE_className: classNames(classProps.root, styleProps.className), UNSAFE_style: styleProps.style }), children));
 };
 EmptyState.spiritComponent = 'EmptyState';
 
-var __rest$1V = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1W = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3296,7 +3360,7 @@ var __rest$1V = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const EmptyStateSection = (props) => {
-    const { children } = props, restProps = __rest$1V(props, ["children"]);
+    const { children } = props, restProps = __rest$1W(props, ["children"]);
     const { classProps, props: modifiedProps } = useEmptyStateStyleProps(restProps);
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
     return (React.createElement(Stack, Object.assign({}, otherProps, { UNSAFE_className: classNames(classProps.section, styleProps.className), UNSAFE_style: styleProps.style }), children));
@@ -3328,7 +3392,7 @@ const useFieldGroupStyleProps = ({ isFluid, isRequired, validationState, }) => {
     };
 };
 
-var __rest$1U = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1V = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3340,7 +3404,7 @@ var __rest$1U = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const FieldGroup = (props) => {
-    const { 'aria-describedby': ariaDescribedBy = '', children, helperText, hasValidationIcon, id, isDisabled, isFluid, isLabelHidden, isRequired, label, validationState, validationText } = props, rest = __rest$1U(props, ['aria-describedby', "children", "helperText", "hasValidationIcon", "id", "isDisabled", "isFluid", "isLabelHidden", "isRequired", "label", "validationState", "validationText"]);
+    const { 'aria-describedby': ariaDescribedBy = '', children, helperText, hasValidationIcon, id, isDisabled, isFluid, isLabelHidden, isRequired, label, validationState, validationText } = props, rest = __rest$1V(props, ['aria-describedby', "children", "helperText", "hasValidationIcon", "id", "isDisabled", "isFluid", "isLabelHidden", "isRequired", "label", "validationState", "validationText"]);
     const { classProps } = useFieldGroupStyleProps({ isFluid, isRequired, validationState });
     const { styleProps, props: transferProps } = useStyleProps(rest);
     const [ids, register] = useAriaIds(ariaDescribedBy);
@@ -3369,6 +3433,7 @@ 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',
@@ -3484,7 +3549,7 @@ const useFileUploaderStyleProps = (props) => {
     };
 };
 
-var __rest$1T = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1U = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3496,7 +3561,7 @@ var __rest$1T = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const FileUploader = (props) => {
-    const { addToQueue, children, clearQueue, errorMessages, fileQueue, findInQueue, id, isFluid, onDismiss, updateQueue } = props, restProps = __rest$1T(props, ["addToQueue", "children", "clearQueue", "errorMessages", "fileQueue", "findInQueue", "id", "isFluid", "onDismiss", "updateQueue"]);
+    const { addToQueue, children, clearQueue, errorMessages, fileQueue, findInQueue, id, isFluid, onDismiss, updateQueue } = props, restProps = __rest$1U(props, ["addToQueue", "children", "clearQueue", "errorMessages", "fileQueue", "findInQueue", "id", "isFluid", "onDismiss", "updateQueue"]);
     const { classProps } = useFileUploaderStyleProps({ isFluid });
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     const contextValue = {
@@ -3669,7 +3734,7 @@ const useFileUploaderInput = (props) => {
     return Object.assign({ isDropZoneHidden: dropZoneHidden, isDisabledByQueueLimitBehavior: disabledByQueueLimitBehavior, onChange: onChangeHandler }, dragAndDropProps);
 };
 
-var __rest$1S = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1T = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3682,7 +3747,7 @@ var __rest$1S = (undefined && undefined.__rest) || function (s, e) {
 };
 const FileUploaderInput = (props) => {
     const [isDragAndDropSupported, setIsDragAndDropSupported] = React.useState(false);
-    const { accept, 'aria-describedby': ariaDescribedBy = '', dropZoneRef, hasValidationIcon, helperText, iconName = 'upload', id, inputRef, isDisabled, isLabelHidden, isMultiple, isRequired, label, labelText, linkText, maxFileSize = DEFAULT_FILE_SIZE_LIMIT, maxUploadedFiles = DEFAULT_FILE_QUEUE_LIMIT, onError, queueLimitBehavior = 'none', validationState, validationText } = props, restProps = __rest$1S(props, ["accept", 'aria-describedby', "dropZoneRef", "hasValidationIcon", "helperText", "iconName", "id", "inputRef", "isDisabled", "isLabelHidden", "isMultiple", "isRequired", "label", "labelText", "linkText", "maxFileSize", "maxUploadedFiles", "onError", "queueLimitBehavior", "validationState", "validationText"]);
+    const { accept, 'aria-describedby': ariaDescribedBy = '', dropZoneRef, hasValidationIcon, helperText, iconName = 'upload', id, inputRef, isDisabled, isLabelHidden, isMultiple, isRequired, label, labelText, linkText, maxFileSize = DEFAULT_FILE_SIZE_LIMIT, maxUploadedFiles = DEFAULT_FILE_QUEUE_LIMIT, onError, queueLimitBehavior = 'none', validationState, validationText } = props, restProps = __rest$1T(props, ["accept", 'aria-describedby', "dropZoneRef", "hasValidationIcon", "helperText", "iconName", "id", "inputRef", "isDisabled", "isLabelHidden", "isMultiple", "isRequired", "label", "labelText", "linkText", "maxFileSize", "maxUploadedFiles", "onError", "queueLimitBehavior", "validationState", "validationText"]);
     const { isDisabledByQueueLimitBehavior, isDragging, isDropZoneHidden, onChange, onDragEnter, onDragLeave, onDragOver, onDrop, } = useFileUploaderInput({
         accept,
         isMultiple,
@@ -3726,7 +3791,7 @@ const FileUploaderInput = (props) => {
 };
 FileUploaderInput.spiritComponent = 'FileUploaderInput';
 
-var __rest$1R = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1S = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3738,7 +3803,7 @@ var __rest$1R = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const FileUploaderList = (props) => {
-    const { label, id, attachmentComponent, inputName, hasImagePreview } = props, restProps = __rest$1R(props, ["label", "id", "attachmentComponent", "inputName", "hasImagePreview"]);
+    const { label = DEFAULT_ATTACHMENT_LIST_LABEL, id, attachmentComponent, inputName, hasImagePreview } = props, restProps = __rest$1S(props, ["label", "id", "attachmentComponent", "inputName", "hasImagePreview"]);
     const { classProps } = useFileUploaderStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     const { fileQueue, onDismiss } = useFileUploaderContext();
@@ -3761,7 +3826,7 @@ const FileUploaderList = (props) => {
 };
 FileUploaderList.spiritComponent = 'FileUploaderList';
 
-var __rest$1Q = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1R = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3773,7 +3838,7 @@ var __rest$1Q = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const AttachmentActionButton = (props) => {
-    const { name = 'edit', children } = props, restProps = __rest$1Q(props, ["name", "children"]);
+    const { name = 'edit', children } = props, restProps = __rest$1R(props, ["name", "children"]);
     const { classProps } = useFileUploaderStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     return (React.createElement("button", Object.assign({ type: "button" }, transferProps, styleProps, { className: classNames(classProps.attachment.button, styleProps.className) }),
@@ -3782,7 +3847,7 @@ const AttachmentActionButton = (props) => {
 };
 AttachmentActionButton.spiritComponent = 'AttachmentActionButton';
 
-var __rest$1P = (undefined && undefined.__rest) || function (s, e) {
+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)
         t[p] = s[p];
@@ -3794,7 +3859,7 @@ var __rest$1P = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const AttachmentDismissButton = (props) => {
-    const { children } = props, restProps = __rest$1P(props, ["children"]);
+    const { children } = props, restProps = __rest$1Q(props, ["children"]);
     const { classProps } = useFileUploaderStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
     return (React.createElement("button", Object.assign({ type: "button" }, transferProps, styleProps, { className: classNames(classProps.attachment.button, styleProps.className) }),
@@ -3803,12 +3868,12 @@ const AttachmentDismissButton = (props) => {
 };
 AttachmentDismissButton.spiritComponent = 'AttachmentDismissButton';
 
-const defaultProps$z = {
+const defaultProps$A = {
     meta: undefined,
     imageObjectFit: 'cover',
 };
 const AttachmentImagePreview = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$z), props);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$A), props);
     const { label, imagePreview, meta, imageObjectFit } = propsWithDefaults;
     const { classProps } = useFileUploaderStyleProps({ meta, imageObjectFit });
     const { imageCropStyles, attachmentStyles } = classProps;
@@ -3892,7 +3957,7 @@ const useFileUploaderAttachment = ({ attachmentRef, file, name, meta, onError, }
     }, [attachmentRef, file, name, meta, onError]);
 };
 
-var __rest$1O = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1P = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3904,7 +3969,7 @@ var __rest$1O = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const FileUploaderAttachment = (props) => {
-    const { editText, file, hasImagePreview, iconName = DEFAULT_ICON_NAME, id, imageObjectFit, label, meta, name, onDismiss, onEdit, onError, removeText } = props, restProps = __rest$1O(props, ["editText", "file", "hasImagePreview", "iconName", "id", "imageObjectFit", "label", "meta", "name", "onDismiss", "onEdit", "onError", "removeText"]);
+    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 [imagePreview, setImagePreview] = React.useState('');
     const { classProps } = useFileUploaderStyleProps();
     const { styleProps, props: transferProps } = useStyleProps(restProps);
@@ -3925,8 +3990,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 || DEFAULT_EDIT_BUTTON_LABEL))),
-        React.createElement(AttachmentDismissButton, { onClick: dismissHandler }, removeText || DEFAULT_BUTTON_LABEL)));
+            React.createElement(AttachmentActionButton, { onClick: onEditHandler }, editText))),
+        React.createElement(AttachmentDismissButton, { onClick: dismissHandler }, removeText)));
 };
 FileUploaderAttachment.spiritComponent = 'FileUploaderAttachment';
 
@@ -3979,7 +4044,7 @@ const useFileQueue = () => {
     };
 };
 
-var __rest$1N = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1O = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -3991,7 +4056,7 @@ var __rest$1N = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const UncontrolledFileUploader = (props) => {
-    const { attachmentComponent, maxFileSize, maxUploadedFiles, helperText, iconName, inputId, inputLabel, inputName, inputProps, isLabelHidden, isDisabled, isFluid, queueLimitBehavior, isMultiple, isRequired, labelText, linkText, listId, listProps, onInputError, onChange, errorMessages, validationState, validationText } = props, restProps = __rest$1N(props, ["attachmentComponent", "maxFileSize", "maxUploadedFiles", "helperText", "iconName", "inputId", "inputLabel", "inputName", "inputProps", "isLabelHidden", "isDisabled", "isFluid", "queueLimitBehavior", "isMultiple", "isRequired", "labelText", "linkText", "listId", "listProps", "onInputError", "onChange", "errorMessages", "validationState", "validationText"]);
+    const { attachmentComponent, maxFileSize, maxUploadedFiles, helperText, iconName, inputId, inputLabel, inputName, inputProps, isLabelHidden, isDisabled, isFluid, queueLimitBehavior, isMultiple, isRequired, labelText, linkText, listId, listProps, onInputError, onChange, errorMessages, validationState, validationText } = props, restProps = __rest$1O(props, ["attachmentComponent", "maxFileSize", "maxUploadedFiles", "helperText", "iconName", "inputId", "inputLabel", "inputName", "inputProps", "isLabelHidden", "isDisabled", "isFluid", "queueLimitBehavior", "isMultiple", "isRequired", "labelText", "linkText", "listId", "listProps", "onInputError", "onChange", "errorMessages", "validationState", "validationText"]);
     const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue();
     React.useEffect(() => {
         if (onChange) {
@@ -4019,7 +4084,7 @@ const useFooterStyleProps = (props) => {
     };
 };
 
-var __rest$1M = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1N = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4032,23 +4097,25 @@ var __rest$1M = (undefined && undefined.__rest) || function (s, e) {
 };
 const defaultStyleProps = {
     backgroundColor: BackgroundColors.SECONDARY,
+    elementType: 'footer',
     paddingBottom: PADDING_BOTTOM,
     paddingTop: PADDING_TOP,
 };
 const Footer = (props) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultStyleProps), props);
-    const { children, backgroundColor } = propsWithDefaults, restProps = __rest$1M(propsWithDefaults, ["children", "backgroundColor"]);
+    const { elementType: ElementTag = defaultStyleProps.elementType, children, backgroundColor } = propsWithDefaults, restProps = __rest$1N(propsWithDefaults, ["elementType", "children", "backgroundColor"]);
     const { classProps } = useFooterStyleProps({ backgroundColor });
     const { styleProps, props: otherProps } = useStyleProps(restProps, {
         paddingBottom: PaddingStyleProps.paddingBottom,
         paddingTop: PaddingStyleProps.paddingTop,
         textAlignment: TextStyleProps.textAlignment,
     });
-    return (React.createElement("footer", Object.assign({}, otherProps, styleProps, { className: classNames(classProps, styleProps.className) }), children));
+    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
+    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
 };
 Footer.spiritComponent = 'Footer';
 
-var __rest$1L = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1M = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4060,7 +4127,7 @@ var __rest$1L = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useGridStyleProps(props) {
-    const { alignmentX, alignmentY, cols, spacing, spacingX, spacingY } = props, restProps = __rest$1L(props, ["alignmentX", "alignmentY", "cols", "spacing", "spacingX", "spacingY"]);
+    const { alignmentX, alignmentY, cols, spacing, spacingX, spacingY } = props, restProps = __rest$1M(props, ["alignmentX", "alignmentY", "cols", "spacing", "spacingX", "spacingY"]);
     const gridClass = useClassNamePrefix('Grid');
     const gridStyle = Object.assign(Object.assign(Object.assign(Object.assign({}, useSpacingStyle(spacing, 'grid', exports.DirectionAxis.X)), useSpacingStyle(spacing, 'grid', exports.DirectionAxis.Y)), useSpacingStyle(spacingX, 'grid', exports.DirectionAxis.X)), useSpacingStyle(spacingY, 'grid', exports.DirectionAxis.Y));
     function generateColsClasses(componentClass, property, type) {
@@ -4087,7 +4154,7 @@ function useGridStyleProps(props) {
     };
 }
 
-var __rest$1K = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1L = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4098,20 +4165,22 @@ var __rest$1K = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$y = {
+const defaultProps$z = {
     alignmentX: AlignmentXExtended.STRETCH,
     alignmentY: AlignmentYExtended.STRETCH,
     elementType: 'div',
 };
 const Grid = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$y), props);
-    const { elementType: ElementTag = 'div', children } = propsWithDefaults, restProps = __rest$1K(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$z), props);
+    const { elementType: ElementTag = 'div', children } = propsWithDefaults, restProps = __rest$1L(propsWithDefaults, ["elementType", "children"]);
     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));
 };
 Grid.spiritComponent = 'Grid';
+Grid.spiritDefaultElement = 'div';
+Grid.spiritDefaultProps = null;
 
 const setStyleProperty = (styleObject, propertyName, value) => {
     styleObject[propertyName] = value;
@@ -4133,22 +4202,23 @@ const setGridItemStyle = (styleObject, baseVarName, propValue) => {
 function useGridItemStyleProps(props) {
     const gridItemClass = useClassNamePrefix('GridItem');
     const gridItemStyle = {};
-    const typePropNames = Object.keys(props).filter((propName) => propName.startsWith('column') || propName.startsWith('row'));
+    const propsClone = Object.assign({}, props);
+    const typePropNames = Object.keys(propsClone).filter((propName) => propName.startsWith('column') || propName.startsWith('row'));
     typePropNames.forEach((propName) => {
         const type = propName.startsWith('column') ? 'column' : 'row';
-        if (props[propName]) {
-            setGridItemStyle(gridItemStyle, `grid-item-${type}-${propName.replace(type, '').toLowerCase()}`, props[propName]);
+        if (propsClone[propName]) {
+            setGridItemStyle(gridItemStyle, `grid-item-${type}-${propName.replace(type, '').toLowerCase()}`, propsClone[propName]);
         }
-        delete props[propName];
+        delete propsClone[propName];
     });
     return {
         classProps: gridItemClass,
-        props,
+        props: propsClone,
         styleProps: gridItemStyle,
     };
 }
 
-var __rest$1J = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1K = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4160,13 +4230,15 @@ var __rest$1J = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const GridItem = (props) => {
-    const { elementType: ElementTag = 'div', children } = props, restProps = __rest$1J(props, ["elementType", "children"]);
+    const { elementType: ElementTag = 'div', children } = props, restProps = __rest$1K(props, ["elementType", "children"]);
     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));
 };
 GridItem.spiritComponent = 'GridItem';
+GridItem.spiritDefaultElement = 'div';
+GridItem.spiritDefaultProps = null;
 
 const HEADER_COLOR_DEFAULT = 'primary';
 const HEADER_ACTIONS_COLOR_DEFAULT = 'primary';
@@ -4227,7 +4299,7 @@ const useHeaderStyleProps = ({ actionsColor = HEADER_ACTIONS_COLOR_DEFAULT, colo
     };
 };
 
-var __rest$1I = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1J = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4239,7 +4311,7 @@ var __rest$1I = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const Header = (props) => {
-    const { children, color = HEADER_COLOR_DEFAULT, isSimple } = props, restProps = __rest$1I(props, ["children", "color", "isSimple"]);
+    const { children, color = HEADER_COLOR_DEFAULT, isSimple } = props, restProps = __rest$1J(props, ["children", "color", "isSimple"]);
     const { classProps } = useHeaderStyleProps({ color, isSimple });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     useDeprecationMessage({
@@ -4260,7 +4332,7 @@ const HeaderButton = (props) => {
 };
 HeaderButton.spiritComponent = 'HeaderButton';
 
-var __rest$1H = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1I = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4271,12 +4343,12 @@ var __rest$1H = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$x = {
+const defaultProps$y = {
     isAtEnd: false,
 };
 const HeaderDesktopActions = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$x), props);
-    const { isAtEnd } = propsWithDefaults, restProps = __rest$1H(propsWithDefaults, ["isAtEnd"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$y), props);
+    const { isAtEnd } = propsWithDefaults, restProps = __rest$1I(propsWithDefaults, ["isAtEnd"]);
     const { classProps } = useHeaderStyleProps({ hasActionsAtEnd: isAtEnd });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return (React.createElement("nav", Object.assign({}, otherProps, { className: classNames(classProps.headerDesktopActions, styleProps.className), style: styleProps.style })));
@@ -4293,7 +4365,7 @@ const HeaderDialogProvider = HeaderDialogContext.Provider;
 const HeaderDialogConsumer = HeaderDialogContext.Consumer;
 const useHeaderDialogContext = () => React.useContext(HeaderDialogContext);
 
-var __rest$1G = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1H = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4305,7 +4377,7 @@ var __rest$1G = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const HeaderDialog = (props) => {
-    const { children, id, isOpen, onClose } = props, restProps = __rest$1G(props, ["children", "id", "isOpen", "onClose"]);
+    const { children, id, isOpen, onClose } = props, restProps = __rest$1H(props, ["children", "id", "isOpen", "onClose"]);
     const { classProps } = useHeaderStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const providerValue = { id, isOpen, onClose };
@@ -4317,7 +4389,7 @@ const HeaderDialog = (props) => {
 };
 HeaderDialog.spiritComponent = 'HeaderDialog';
 
-var __rest$1F = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1G = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4329,7 +4401,7 @@ var __rest$1F = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const HeaderDialogActions = (props) => {
-    const { color = HEADER_ACTIONS_COLOR_DEFAULT } = props, restProps = __rest$1F(props, ["color"]);
+    const { color = HEADER_ACTIONS_COLOR_DEFAULT } = props, restProps = __rest$1G(props, ["color"]);
     const { classProps } = useHeaderStyleProps({ actionsColor: color });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return (React.createElement("nav", Object.assign({}, otherProps, { className: classNames(classProps.headerDialogActions, styleProps.className), style: styleProps.style })));
@@ -4343,7 +4415,7 @@ const HeaderDialogButton = (props) => {
 };
 HeaderDialogButton.spiritComponent = 'HeaderDialogButton';
 
-var __rest$1E = (undefined && undefined.__rest) || function (s, e) {
+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)
         t[p] = s[p];
@@ -4355,7 +4427,7 @@ var __rest$1E = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const HeaderDialogCloseButton = (props) => {
-    const { label = HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT, onClick } = props, restProps = __rest$1E(props, ["label", "onClick"]);
+    const { label = HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT, onClick } = props, restProps = __rest$1F(props, ["label", "onClick"]);
     const { classProps } = useHeaderStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const { id, isOpen, onClose } = useHeaderDialogContext();
@@ -4370,7 +4442,7 @@ const HeaderDialogCloseButton = (props) => {
 };
 HeaderDialogCloseButton.spiritComponent = 'HeaderDialogCloseButton';
 
-var __rest$1D = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1E = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4382,7 +4454,7 @@ var __rest$1D = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _HeaderDialogLink = (props, ref) => {
-    const { elementType: ElementTag = 'a', children, isCurrent } = props, restProps = __rest$1D(props, ["elementType", "children", "isCurrent"]);
+    const { elementType: ElementTag = 'a', children, isCurrent } = props, restProps = __rest$1E(props, ["elementType", "children", "isCurrent"]);
     const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, {
@@ -4416,7 +4488,7 @@ const HeaderDialogText = (props) => {
 };
 HeaderDialogText.spiritComponent = 'HeaderDialogText';
 
-var __rest$1C = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1D = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4428,7 +4500,7 @@ var __rest$1C = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _HeaderLink = (props, ref) => {
-    const { elementType: ElementTag = 'a', children, isCurrent } = props, restProps = __rest$1C(props, ["elementType", "children", "isCurrent"]);
+    const { elementType: ElementTag = 'a', children, isCurrent } = props, restProps = __rest$1D(props, ["elementType", "children", "isCurrent"]);
     const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, {
@@ -4441,7 +4513,7 @@ const _HeaderLink = (props, ref) => {
 const HeaderLink = React.forwardRef(_HeaderLink);
 HeaderLink.spiritComponent = 'HeaderLink';
 
-var __rest$1B = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1C = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4453,7 +4525,7 @@ var __rest$1B = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const HeaderMobileActions = (props) => {
-    const { children, dialogId, menuToggleLabel = HEADER_MENU_TOGGLE_LABEL_DEFAULT, isOpen, onOpen } = props, restProps = __rest$1B(props, ["children", "dialogId", "menuToggleLabel", "isOpen", "onOpen"]);
+    const { children, dialogId, menuToggleLabel = HEADER_MENU_TOGGLE_LABEL_DEFAULT, isOpen, onOpen } = props, restProps = __rest$1C(props, ["children", "dialogId", "menuToggleLabel", "isOpen", "onOpen"]);
     const { classProps } = useHeaderStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     return (React.createElement("div", Object.assign({}, otherProps, { className: classNames(classProps.headerMobileActions, styleProps.className), style: styleProps.style }),
@@ -4478,7 +4550,7 @@ const HeaderNavItem = (props) => {
 };
 HeaderNavItem.spiritComponent = 'HeaderNavItem';
 
-var __rest$1A = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1B = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4490,7 +4562,7 @@ var __rest$1A = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useHeadingStyleProps(props) {
-    const { emphasis, size, textColor } = props, restProps = __rest$1A(props, ["emphasis", "size", "textColor"]);
+    const { emphasis, size, textColor } = props, restProps = __rest$1B(props, ["emphasis", "size", "textColor"]);
     const headingClass = useClassNamePrefix('typography-heading');
     const headingTextColorClass = useClassNamePrefix(textColor ? `text-${textColor}` : '');
     const className = classNames(`${headingClass}-${size}-${emphasis}`, {
@@ -4502,7 +4574,7 @@ function useHeadingStyleProps(props) {
     };
 }
 
-var __rest$1z = (undefined && undefined.__rest) || function (s, e) {
+var __rest$1A = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -4513,13 +4585,13 @@ var __rest$1z = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$w = {
+const defaultProps$x = {
     emphasis: Emphasis.BOLD,
     size: SizesExtended.MEDIUM,
 };
 const Heading = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$w), props);
-    const { elementType: ElementTag, children } = propsWithDefaults, restProps = __rest$1z(propsWithDefaults, ["elementType", "children"]);
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$x), props);
+    const { elementType: ElementTag, children } = propsWithDefaults, restProps = __rest$1A(propsWithDefaults, ["elementType", "children"]);
     const { classProps, props: modifiedProps } = useHeadingStyleProps(Object.assign({}, restProps));
     const { styleProps, props: otherProps } = useStyleProps(modifiedProps, {
         isTextBalanced: HeadingStyleProps.isTextBalanced,
@@ -4532,6 +4604,32 @@ const Heading = (props) => {
 };
 Heading.spiritComponent = 'Heading';
 
+var __rest$1z = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const defaultProps$w = {
+    elementType: 'span',
+};
+const Hidden = (props) => {
+    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 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));
+};
+Hidden.spiritComponent = 'Hidden';
+Hidden.spiritDefaultElement = 'span';
+Hidden.spiritDefaultProps = null;
+
 const IconBoxShapes = {
     ROUNDED: 'rounded',
     SQUARE: 'square',
@@ -4881,6 +4979,8 @@ 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)
@@ -4893,7 +4993,7 @@ var __rest$1q = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const ModalCloseButton = (_a) => {
-    var { label = 'Close', onClose, id, isOpen } = _a, restProps = __rest$1q(_a, ["label", "onClose", "id", "isOpen"]);
+    var { label = MODAL_CLOSE_BUTTON_LABEL_DEFAULT, onClose, id, isOpen } = _a, restProps = __rest$1q(_a, ["label", "onClose", "id", "isOpen"]);
     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)));
@@ -4919,8 +5019,7 @@ const setCustomHeight = (baseVarName, propValue) => {
             var _a;
             const suffix = key === 'mobile' ? '' : `-${key}`;
             const propName = `--${baseVarName}${suffix}`;
-            acc[propName] = (_a = propValue[key]) === null || _a === void 0 ? void 0 : _a.toString();
-            return acc;
+            return Object.assign(Object.assign({}, acc), { [propName]: (_a = propValue[key]) === null || _a === void 0 ? void 0 : _a.toString() });
         }, {});
     }
     const propName = `--${baseVarName}`;
@@ -4999,7 +5098,7 @@ const defaultProps$t = {
 };
 const ModalHeader = (props) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$t), props);
-    const { children, closeLabel, hasCloseButton } = propsWithDefaults, restProps = __rest$1m(propsWithDefaults, ["children", "closeLabel", "hasCloseButton"]);
+    const { children, closeLabel = MODAL_CLOSE_BUTTON_LABEL_DEFAULT, hasCloseButton } = propsWithDefaults, restProps = __rest$1m(propsWithDefaults, ["children", "closeLabel", "hasCloseButton"]);
     const { classProps } = useModalStyleProps();
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const { id, isOpen, onClose } = useModalContext();
@@ -5210,6 +5309,10 @@ 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)
@@ -5222,7 +5325,9 @@ var __rest$1f = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const _PaginationButtonLink = (props, ref) => {
-    const _a = props, { direction, accessibilityLabel } = _a, restProps = __rest$1f(_a, ["direction", "accessibilityLabel"]);
+    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 iconType = {
         previous: 'chevron-left',
         next: 'chevron-right',
@@ -5266,19 +5371,17 @@ var __rest$1d = (undefined && undefined.__rest) || function (s, e) {
 };
 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 { classProps } = usePaginationStyleProps({ isCurrent });
     const { styleProps, props: otherProps } = useStyleProps(restProps);
     const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.link, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { ref: ref }),
-        React.createElement(VisuallyHidden, null, accessibilityLabel),
+    return (React.createElement(ElementTag, 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';
 
-const PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL = 'Previous';
-const PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL = 'Next';
-
 var __rest$1c = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -5360,7 +5463,7 @@ var __rest$1a = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const UncontrolledPagination = (props) => {
-    const { accessibilityLabel, accessibilityLabelPrevious = 'Previous', accessibilityLabelNext = 'Next', defaultPage = 1, onChange, totalPages = 0, visiblePages = 5 } = props, rest = __rest$1a(props, ["accessibilityLabel", "accessibilityLabelPrevious", "accessibilityLabelNext", "defaultPage", "onChange", "totalPages", "visiblePages"]);
+    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 { currentPage, pages, handlePageChange } = usePagination({
         defaultPage,
         onChange,
@@ -6148,18 +6251,20 @@ var __rest$U = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useRadioStyleProps(props) {
-    const { isItem, validationState, isLabelHidden } = props, restProps = __rest$U(props, ["isItem", "validationState", "isLabelHidden"]);
+    const { inputPosition = InputPositions.START, isItem, isLabelHidden, validationState } = props, restProps = __rest$U(props, ["inputPosition", "isItem", "isLabelHidden", "validationState"]);
     const { isDisabled } = restProps;
     const radioClass = useClassNamePrefix('Radio');
     const radioDisabledClass = `${radioClass}--disabled`;
     const radioItemClass = `${radioClass}--item`;
     const radioInputClass = `${radioClass}__input`;
+    const radioInputPositionClass = useInputPositionClass(radioClass, inputPosition);
     const radioLabelClass = `${radioClass}__label`;
     const radioLabelHiddenClass = `${radioClass}__label--hidden`;
     const radioTextClass = `${radioClass}__text`;
     const radioHelperTextClass = `${radioClass}__helperText`;
     const radioValidationClass = `${radioClass}--${validationState}`;
     const rootStyles = classNames(radioClass, {
+        [radioInputPositionClass]: radioInputPositionClass,
         [radioDisabledClass]: isDisabled,
         [radioItemClass]: isItem,
         [radioValidationClass]: validationState,
@@ -6207,6 +6312,7 @@ Radio.spiritComponent = 'Radio';
 
 const DEBOUNCE_DELAY = 50;
 const EDGE_DETECTION_INACCURACY_PX = 1;
+const SCROLL_CANCEL_DELAY = 10;
 const SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_END = 'Scroll right';
 const SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_START = 'Scroll left';
 const SCROLL_VIEW_ARROWS_LABEL_VERTICAL_END = 'Scroll down';
@@ -6214,6 +6320,43 @@ const SCROLL_VIEW_ARROWS_LABEL_VERTICAL_START = 'Scroll up';
 const SCROLL_VIEW_DEFAULT_DIRECTION = Direction.VERTICAL;
 const SCROLL_VIEW_DEFAULT_OVERFLOW_DECORATOR = 'shadows';
 
+const useScrollCallback = ({ viewportRef, direction }) => {
+    const scrollTimeoutRef = React.useRef(null);
+    React.useEffect(() => () => {
+        if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+        }
+    }, []);
+    const handleScroll = React.useCallback((step) => {
+        if (!viewportRef.current) {
+            return;
+        }
+        const isHorizontal = isDirectionHorizontal(direction);
+        const scrollToDirection = isHorizontal ? Position.LEFT : Position.TOP;
+        const currentScrollPosition = isHorizontal ? viewportRef.current.scrollLeft : viewportRef.current.scrollTop;
+        const maxScroll = isHorizontal
+            ? viewportRef.current.scrollWidth - viewportRef.current.clientWidth
+            : viewportRef.current.scrollHeight - viewportRef.current.clientHeight;
+        viewportRef.current.scrollTo({
+            [scrollToDirection]: currentScrollPosition,
+            behavior: 'auto',
+        });
+        if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+        }
+        const targetPosition = Math.max(0, Math.min(currentScrollPosition + step, maxScroll));
+        scrollTimeoutRef.current = setTimeout(() => {
+            if (viewportRef.current) {
+                viewportRef.current.scrollTo({
+                    [scrollToDirection]: targetPosition,
+                    behavior: 'smooth',
+                });
+            }
+        }, SCROLL_CANCEL_DELAY);
+    }, [viewportRef, direction]);
+    return { handleScroll };
+};
+
 const getDefaultArrowLabels = (isHorizontal) => isHorizontal
     ? {
         start: SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_START,
@@ -6297,14 +6440,7 @@ const ScrollViewArrows = (props) => {
     const mergedStyleProps = mergeStyleProps('button', { classProps: classProps.arrows, styleProps });
     const isHorizontal = isDirectionHorizontal(direction);
     const { arrows } = useScrollViewArrows(isHorizontal, ariaLabelArrows, scrollStep);
-    const handleScroll = (step) => {
-        var _a;
-        const scrollToDirection = isHorizontal ? 'left' : 'top';
-        (_a = viewportRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
-            [scrollToDirection]: step,
-            behavior: 'smooth',
-        });
-    };
+    const { handleScroll } = useScrollCallback({ viewportRef, direction });
     return (React.createElement("div", Object.assign({}, otherProps, mergedStyleProps), arrows.map(({ icon, label, step }) => (React.createElement(ControlButton, { key: icon, "aria-label": label, onClick: () => handleScroll(step), size: "small", isSymmetrical: true },
         React.createElement(Icon, { name: icon }))))));
 };
@@ -7012,6 +7148,8 @@ 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)
@@ -7026,6 +7164,7 @@ 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 propsWithDefaults = Object.assign(Object.assign({}, defaultProps$a), props);
@@ -7435,6 +7574,9 @@ 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`;
@@ -7452,9 +7594,12 @@ function useTextFieldBasePasswordToggleStyleProps() {
 const TextFieldBasePasswordToggle = (props) => {
     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;
     return (React.createElement("div", { className: classProps.passwordToggle },
         children,
-        React.createElement("button", { className: classProps.passwordToggleButton, type: "button", role: "switch", "aria-checked": !!isPasswordShown, "aria-label": `${isPasswordShown ? 'Hide' : 'Show'} password`, onClick: () => onToggleClick(), disabled: isDisabled },
+        React.createElement("button", { className: classProps.passwordToggleButton, type: "button", role: "switch", "aria-checked": !!isPasswordShown, "aria-label": ariaLabel, onClick: () => onToggleClick(), disabled: isDisabled },
             React.createElement("span", { className: classProps.passwordToggleIcon },
                 React.createElement(Icon, { name: `visibility-${isPasswordShown ? 'off' : 'on'}`, boxSize: size === Sizes.SMALL ? 16 : 20 })))));
 };
@@ -8002,7 +8147,7 @@ var __rest$7 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const UncontrolledToast = (props) => {
-    const { alignmentX, alignmentY, isCollapsible, closeLabel } = props, restProps = __rest$7(props, ["alignmentX", "alignmentY", "isCollapsible", "closeLabel"]);
+    const { alignmentX, alignmentY, isCollapsible, closeLabel = TOAST_BAR_CLOSE_BUTTON_LABEL_DEFAULT } = props, restProps = __rest$7(props, ["alignmentX", "alignmentY", "isCollapsible", "closeLabel"]);
     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;
@@ -8025,7 +8170,7 @@ var __rest$6 = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 function useToggleStyleProps(props) {
-    const { isRequired = false, isFluid = false, isDisabled = false, isLabelHidden = false, validationState, hasIndicators = false } = props, restProps = __rest$6(props, ["isRequired", "isFluid", "isDisabled", "isLabelHidden", "validationState", "hasIndicators"]);
+    const { hasIndicators = false, inputPosition = InputPositions.END, isDisabled = false, isFluid = false, isLabelHidden = false, isRequired = false, validationState } = props, restProps = __rest$6(props, ["hasIndicators", "inputPosition", "isDisabled", "isFluid", "isLabelHidden", "isRequired", "validationState"]);
     const toggleClass = useClassNamePrefix('Toggle');
     const toggleFluidClass = `${toggleClass}--fluid`;
     const toggleDisabledClass = `${toggleClass}--disabled`;
@@ -8036,9 +8181,11 @@ function useToggleStyleProps(props) {
     const toggleRequiredClass = `${toggleLabelClass}--required`;
     const toggleInputClass = `${toggleClass}__input`;
     const toggleInputIndicatorsClass = `${toggleInputClass}--indicators`;
+    const toggleInputPositionClass = useInputPositionClass(toggleClass, inputPosition);
     const toggleHelperTextClass = `${toggleClass}__helperText`;
     const toggleValidationTextClass = `${toggleClass}__validationText`;
     const rootClass = classNames(toggleClass, {
+        [toggleInputPositionClass]: toggleInputPositionClass,
         [toggleFluidClass]: isFluid,
         [toggleDisabledClass]: isDisabled,
         [toggleValidationClass]: validationState,
@@ -8315,6 +8462,7 @@ exports.Container = Container;
 exports.ContainerTokenSizes = ContainerTokenSizes;
 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;
@@ -8381,6 +8529,7 @@ exports.HeaderNavItem = HeaderNavItem;
 exports.Heading = Heading;
 exports.HeadingStyleProps = HeadingStyleProps;
 exports.HelperText = HelperText;
+exports.Hidden = Hidden;
 exports.ICON_BOX_SIZE = ICON_BOX_SIZE;
 exports.IMAGE_DIMENSION = IMAGE_DIMENSION;
 exports.IMAGE_PREVIEW_BASE64_MAX_WIDTH = IMAGE_PREVIEW_BASE64_MAX_WIDTH;
@@ -8388,6 +8537,7 @@ exports.Icon = Icon;
 exports.IconBox = IconBox;
 exports.IconsConsumer = IconsConsumer;
 exports.IconsProvider = IconsProvider;
+exports.InputPositions = InputPositions;
 exports.Intensity = Intensity;
 exports.Item = Item;
 exports.Label = Label;
@@ -8408,6 +8558,7 @@ exports.NavigationAvatar = NavigationAvatar;
 exports.NavigationItem = NavigationItem;
 exports.NoSsr = NoSsr;
 exports.ObjectFit = ObjectFit;
+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.PaddingStyleProps = PaddingStyleProps;
@@ -8430,6 +8581,7 @@ exports.ProductLogo = ProductLogo;
 exports.PropsConsumer = PropsConsumer;
 exports.PropsProvider = PropsProvider;
 exports.Radio = Radio;
+exports.SCROLL_CANCEL_DELAY = SCROLL_CANCEL_DELAY;
 exports.SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_END = SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_END;
 exports.SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_START = SCROLL_VIEW_ARROWS_LABEL_HORIZONTAL_START;
 exports.SCROLL_VIEW_ARROWS_LABEL_VERTICAL_END = SCROLL_VIEW_ARROWS_LABEL_VERTICAL_END;
@@ -8590,7 +8742,6 @@ exports.useDefaultResponsiveRowsStyle = useDefaultResponsiveRowsStyle;
 exports.useDeprecationMessage = useDeprecationMessage;
 exports.useDialog = useDialog;
 exports.useDimensionStyle = useDimensionStyle;
-exports.useDirectionClass = useDirectionClass;
 exports.useDividerStyleProps = useDividerStyleProps;
 exports.useDragAndDrop = useDragAndDrop;
 exports.useDrawerContext = useDrawerContext;
@@ -8613,6 +8764,7 @@ exports.useIconBoxColors = useIconBoxColors;
 exports.useIconBoxStyleProps = useIconBoxStyleProps;
 exports.useIconName = useIconName;
 exports.useIconStyleProps = useIconStyleProps;
+exports.useInputPositionClass = useInputPositionClass;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useItemStyleProps = useItemStyleProps;
 exports.useLastActiveFocus = useLastActiveFocus;
@@ -8630,6 +8782,7 @@ exports.usePricingPlanStyleProps = usePricingPlanStyleProps;
 exports.usePropsContext = usePropsContext;
 exports.useRadioStyleProps = useRadioStyleProps;
 exports.useResizeObserver = useResizeObserver;
+exports.useScrollCallback = useScrollCallback;
 exports.useScrollControl = useScrollControl;
 exports.useScrollPosition = useScrollPosition;
 exports.useScrollViewArrows = useScrollViewArrows;
@@ -8646,6 +8799,7 @@ exports.useSpacingStyle = useSpacingStyle;
 exports.useSpinnerStyleProps = useSpinnerStyleProps;
 exports.useSplitButtonStyleProps = useSplitButtonStyleProps;
 exports.useStyleProps = useStyleProps;
+exports.useSymmetry = useSymmetry;
 exports.useTab = useTab;
 exports.useTabContext = useTabContext;
 exports.useTabsStyleProps = useTabsStyleProps;