@alma-oss/spirit-web-react 4.2.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 });
@@ -1107,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];
@@ -1119,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 });
@@ -1135,7 +1180,7 @@ 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];
@@ -1157,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;
@@ -1174,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];
@@ -1185,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));
@@ -1209,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];
@@ -1220,12 +1265,12 @@ var __rest$2P = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
-const defaultProps$_ = {
+const defaultProps$$ = {
     elementType: 'h3',
 };
 const AccordionHeader = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$_), props);
-    const { elementType: ElementTag = 'h3', children, slot } = propsWithDefaults, restProps = __rest$2P(propsWithDefaults, ["elementType", "children", "slot"]);
+    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();
@@ -1252,7 +1297,7 @@ 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];
@@ -1267,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,
@@ -1314,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];
@@ -1332,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);
@@ -1378,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];
@@ -1389,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;
@@ -1410,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];
@@ -1422,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);
@@ -1433,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];
@@ -1445,7 +1490,7 @@ 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({}, restProps, { open: open, toggle: toggle }));
 };
@@ -1453,7 +1498,7 @@ 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];
@@ -1465,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',
@@ -1487,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];
@@ -1498,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,
@@ -1506,8 +1551,8 @@ 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 });
@@ -1517,7 +1562,7 @@ 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];
@@ -1528,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,
@@ -1539,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];
@@ -1557,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`;
@@ -1582,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];
@@ -1593,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 });
@@ -1610,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];
@@ -1623,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), {
@@ -1635,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];
@@ -1646,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 });
@@ -1664,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];
@@ -1676,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 : '';
@@ -1699,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];
@@ -1710,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 });
@@ -1726,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];
@@ -1738,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`;
@@ -1757,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];
@@ -1768,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 });
@@ -1785,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];
@@ -1797,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');
@@ -1815,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];
@@ -1826,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) }),
@@ -1844,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];
@@ -1855,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 });
@@ -1886,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];
@@ -1900,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,
@@ -1911,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,
@@ -1935,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];
@@ -1947,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');
@@ -1965,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];
@@ -1976,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,
@@ -1988,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);
@@ -2016,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];
@@ -2030,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,
@@ -2041,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];
@@ -2068,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,
@@ -2078,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);
@@ -2146,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];
@@ -2157,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 });
@@ -2172,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];
@@ -2183,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];
@@ -2206,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];
@@ -2230,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];
@@ -2248,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];
@@ -2271,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 });
@@ -2285,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];
@@ -2297,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));
@@ -2317,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];
@@ -2328,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,
@@ -2352,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];
@@ -2363,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 });
@@ -2377,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];
@@ -2388,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(() => {
@@ -2411,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];
@@ -2423,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));
@@ -2456,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];
@@ -2467,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 });
@@ -2511,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];
@@ -2523,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`;
@@ -2537,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,
@@ -2558,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];
@@ -2571,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);
@@ -2589,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];
@@ -2601,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}`;
@@ -2615,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];
@@ -2626,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,
@@ -2653,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];
@@ -2666,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];
@@ -2697,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,
@@ -2706,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);
@@ -2767,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];
@@ -2779,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);
@@ -2855,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];
@@ -2867,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 = {
@@ -2881,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];
@@ -2893,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,
@@ -2901,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];
@@ -2913,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 });
@@ -2921,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];
@@ -2932,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);
@@ -2950,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];
@@ -2962,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 });
@@ -3014,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];
@@ -3026,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' : '';
@@ -3047,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];
@@ -3059,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);
@@ -3082,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];
@@ -3093,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);
@@ -3108,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];
@@ -3120,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);
@@ -3155,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];
@@ -3167,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);
@@ -3178,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];
@@ -3190,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`;
@@ -3214,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];
@@ -3225,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,
@@ -3233,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, {
@@ -3247,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];
@@ -3259,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, {
@@ -3283,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];
@@ -3295,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];
@@ -3314,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));
@@ -3346,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];
@@ -3358,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);
@@ -3503,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];
@@ -3515,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 = {
@@ -3688,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];
@@ -3701,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,
@@ -3745,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];
@@ -3757,7 +3803,7 @@ var __rest$1R = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const FileUploaderList = (props) => {
-    const { label = DEFAULT_ATTACHMENT_LIST_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();
@@ -3780,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];
@@ -3792,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) }),
@@ -3801,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];
@@ -3813,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) }),
@@ -3822,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;
@@ -3911,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];
@@ -3923,7 +3969,7 @@ var __rest$1O = (undefined && undefined.__rest) || function (s, e) {
     return t;
 };
 const FileUploaderAttachment = (props) => {
-    const { editText = DEFAULT_EDIT_BUTTON_LABEL, file, hasImagePreview, iconName = DEFAULT_ICON_NAME, id, imageObjectFit, label, meta, name, onDismiss, onEdit, onError, removeText = DEFAULT_BUTTON_LABEL } = props, restProps = __rest$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);
@@ -3998,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];
@@ -4010,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) {
@@ -4038,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];
@@ -4057,7 +4103,7 @@ const defaultStyleProps = {
 };
 const Footer = (props) => {
     const propsWithDefaults = Object.assign(Object.assign({}, defaultStyleProps), props);
-    const { elementType: ElementTag = defaultStyleProps.elementType, children, backgroundColor } = propsWithDefaults, restProps = __rest$1M(propsWithDefaults, ["elementType", "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,
@@ -4069,7 +4115,7 @@ const Footer = (props) => {
 };
 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];
@@ -4081,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) {
@@ -4108,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];
@@ -4119,14 +4165,14 @@ 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 });
@@ -4156,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];
@@ -4183,7 +4230,7 @@ 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 });
@@ -4252,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];
@@ -4264,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({
@@ -4285,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];
@@ -4296,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 })));
@@ -4318,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];
@@ -4330,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 };
@@ -4342,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];
@@ -4354,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 })));
@@ -4368,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];
@@ -4380,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();
@@ -4395,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];
@@ -4407,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, {
@@ -4441,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];
@@ -4453,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, {
@@ -4466,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];
@@ -4478,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 }),
@@ -4503,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];
@@ -4515,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}`, {
@@ -4527,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];
@@ -4538,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,
@@ -4557,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',
@@ -4946,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}`;
@@ -5303,7 +5375,7 @@ const _PaginationLink = (props, ref) => {
     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 }),
+    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)));
 };
@@ -6179,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,
@@ -8096,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`;
@@ -8107,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,
@@ -8453,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;
@@ -8460,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;
@@ -8664,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;
@@ -8687,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;
@@ -8721,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;