@razorpay/blade 6.2.0 → 6.2.1

package/build/components/index.web.js

@@ -3959,7 +3959,7 @@ var getSpacingValue = function getSpacingValue(_ref) {
   return value ? makeSpace(get_1(theme, value)) : undefined;
 };
 
-var getBoxStyles = function getBoxStyles(_ref2) {
+var getBaseBoxStyles = function getBaseBoxStyles(_ref2) {
   var theme = _ref2.theme,
       display = _ref2.display,
       flex = _ref2.flex,
@@ -4064,15 +4064,15 @@ var getBoxStyles = function getBoxStyles(_ref2) {
   };
 };
 
-var Box = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Boxweb__Box",
-  componentId: "xvyj85-0"
-})(getBoxStyles);
+var BaseBox = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BaseBoxweb__BaseBox",
+  componentId: "sc-1icfu8j-0"
+})(getBaseBoxStyles);
 
 function ownKeys$R(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$R(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$R(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$R(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledActionList = /*#__PURE__*/styled(Box).withConfig({
+var StyledActionList = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledActionListweb__StyledActionList",
   componentId: "lwcs1w-0"
 })(function (props) {
@@ -4089,7 +4089,7 @@ var getBaseListBoxWrapperStyles = function getBaseListBoxWrapperStyles(props) {
 function ownKeys$Q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$Q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Q(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledListBoxWrapper = /*#__PURE__*/styled(Box).withConfig({
+var StyledListBoxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledListBoxWrapperweb__StyledListBoxWrapper",
   componentId: "sc-1eo4pr6-0"
 })(function (props) {
@@ -4862,7 +4862,7 @@ var getBaseActionListItemStyles = function getBaseActionListItemStyles(props) {
 function ownKeys$M(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$M(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$M(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledActionListItem = /*#__PURE__*/styled(Box).withConfig({
+var StyledActionListItem = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledActionListItemweb__StyledActionListItem",
   componentId: "sc-1okp9u4-0"
 })(function (props) {
@@ -5242,7 +5242,7 @@ var getCodeFontSize = function getCodeFontSize(size) {
   }
 };
 
-var CodeContainer = /*#__PURE__*/styled(Box).withConfig({
+var CodeContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "Code__CodeContainer",
   componentId: "l9m17z-0"
 })(function (props) {
@@ -5276,11 +5276,11 @@ var CodeContainer = /*#__PURE__*/styled(Box).withConfig({
  * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
  *
  * ```tsx
- *  <Box flexWrap="wrap" flexDirection="row" alignItems="flex-start">
+ *  <BaseBox flexWrap="wrap" flexDirection="row" alignItems="flex-start">
  *   <Text>Lorem ipsum </Text>
  *   <Code>SENTRY_TOKEN</Code>
  *   <Text> normal text</Text>
- * </Box>
+ * </BaseBox>
  * ```
  */
 
@@ -14111,7 +14111,7 @@ var HintText = function HintText(_ref) {
       id = _ref.id,
       color = _ref.color;
   var isReactNative = getPlatformType() === 'react-native';
-  return /*#__PURE__*/jsx(Box, {
+  return /*#__PURE__*/jsx(BaseBox, {
     marginTop: "spacing.2",
     children: /*#__PURE__*/jsxs(FormHintWrapper, {
       children: [Icon ? /*#__PURE__*/jsx(Icon, {}) : null, /*#__PURE__*/jsx(BaseText, {
@@ -14134,7 +14134,7 @@ var Icons = {
       children: [/*#__PURE__*/jsx(InfoIcon, {
         color: "feedback.icon.negative.lowContrast",
         size: "small"
-      }), /*#__PURE__*/jsx(Box, {
+      }), /*#__PURE__*/jsx(BaseBox, {
         marginRight: "spacing.2"
       })]
     });
@@ -14144,7 +14144,7 @@ var Icons = {
       children: [/*#__PURE__*/jsx(CheckIcon, {
         color: "feedback.icon.positive.lowContrast",
         size: "small"
-      }), /*#__PURE__*/jsx(Box, {
+      }), /*#__PURE__*/jsx(BaseBox, {
         marginRight: "spacing.2"
       })]
     });
@@ -14272,7 +14272,7 @@ var FormLabel = function FormLabel(_ref) {
     })]
   });
 
-  var textNode = /*#__PURE__*/jsxs(Box, {
+  var textNode = /*#__PURE__*/jsxs(BaseBox, {
     gap: necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0',
     display: "flex",
     flexDirection: "row",
@@ -14290,7 +14290,7 @@ var FormLabel = function FormLabel(_ref) {
 
 
   if (isReactNative) {
-    return /*#__PURE__*/jsx(Box, {
+    return /*#__PURE__*/jsx(BaseBox, {
       marginRight: "spacing.5",
       marginBottom: "spacing.2",
       children: textNode
@@ -14309,7 +14309,7 @@ var FormLabel = function FormLabel(_ref) {
       wordBreak: 'break-all'
     },
     id: id,
-    children: /*#__PURE__*/jsx(Box, {
+    children: /*#__PURE__*/jsx(BaseBox, {
       marginBottom: isLabelLeftPositioned ? 'spacing.0' : 'spacing.2',
       children: textNode
     })
@@ -14350,7 +14350,7 @@ var SelectorTitle = function SelectorTitle(_ref) {
     medium: 100
   };
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Box, {
+    children: [/*#__PURE__*/jsx(BaseBox, {
       marginLeft: "spacing.2"
     }), /*#__PURE__*/jsx(BaseText, {
       lineHeight: lineHeight[size],
@@ -14587,13 +14587,13 @@ var _Checkbox = function _Checkbox(_ref, ref) {
       ids = _useCheckbox.ids,
       inputProps = _useCheckbox.inputProps;
 
-  return /*#__PURE__*/jsxs(Box, _objectSpread$C(_objectSpread$C({}, metaAttribute(MetaConstants.Component, MetaConstants.Checkbox)), {}, {
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread$C(_objectSpread$C({}, metaAttribute(MetaConstants.Component, MetaConstants.Checkbox)), {}, {
     children: [/*#__PURE__*/jsx(SelectorLabel, {
       inputProps: state.isReactNative ? inputProps : {},
-      children: /*#__PURE__*/jsxs(Box, {
+      children: /*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         flexDirection: "column",
-        children: [/*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsxs(BaseBox, {
           display: "flex",
           alignItems: "center",
           flexDirection: "row",
@@ -14615,7 +14615,7 @@ var _Checkbox = function _Checkbox(_ref, ref) {
             isDisabled: _isDisabled,
             children: children
           })]
-        }), /*#__PURE__*/jsx(Box, {
+        }), /*#__PURE__*/jsx(BaseBox, {
           marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
           children: showSupportingText && /*#__PURE__*/jsx(SelectorSupportText, {
             id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
@@ -14749,7 +14749,7 @@ var SelectorGroupField = function SelectorGroupField(_ref) {
   var labelPosition = position === 'top' ? 'column' : 'row';
   if (isReactNative) labelPosition = 'column';
   var role = accessibilityRole === 'group' && isReactNative ? undefined : accessibilityRole;
-  return /*#__PURE__*/jsx(Box, _objectSpread$B(_objectSpread$B(_objectSpread$B({
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread$B(_objectSpread$B(_objectSpread$B({
     display: "flex",
     flexDirection: labelPosition
   }, makeAccessible({
@@ -14818,12 +14818,12 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
         id: ids.labelId,
         accessibilityText: accessibilityText,
         children: label
-      }), /*#__PURE__*/jsxs(Box, {
-        children: [/*#__PURE__*/jsx(Box, {
+      }), /*#__PURE__*/jsxs(BaseBox, {
+        children: [/*#__PURE__*/jsx(BaseBox, {
           display: "flex",
           flexDirection: "column",
           children: React__default.Children.map(children, function (child, index) {
-            return /*#__PURE__*/jsx(Box, {
+            return /*#__PURE__*/jsx(BaseBox, {
               marginBottom: index === childCount - 1 ? 0 : gap,
               children: child
             }, index);
@@ -14842,7 +14842,7 @@ function ownKeys$A(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ActionListItemContext = /*#__PURE__*/React__default.createContext({});
-var StyledSectionDivider = /*#__PURE__*/styled(Box).withConfig({
+var StyledSectionDivider = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ActionListItem__StyledSectionDivider",
   componentId: "m6qdwa-0"
 })(function (props) {
@@ -14860,7 +14860,7 @@ var ActionListSectionDivider = function ActionListSectionDivider() {
   })));
 };
 
-var StyledActionListSectionTitle = /*#__PURE__*/styled(Box).withConfig({
+var StyledActionListSectionTitle = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ActionListItem__StyledActionListSectionTitle",
   componentId: "m6qdwa-1"
 })(function (props) {
@@ -14874,7 +14874,7 @@ var ActionListSection = function ActionListSection(_ref) {
   var title = _ref.title,
       children = _ref.children,
       _hideDivider = _ref._hideDivider;
-  return /*#__PURE__*/jsxs(Box, _objectSpread$A(_objectSpread$A(_objectSpread$A({}, makeAccessible({
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread$A(_objectSpread$A(_objectSpread$A({}, makeAccessible({
     role: getActionListSectionRole(),
     label: title
   })), metaAttribute(MetaConstants.Component, MetaConstants.ActionListSection)), {}, {
@@ -14887,7 +14887,7 @@ var ActionListSection = function ActionListSection(_ref) {
         weight: "bold",
         children: title
       })
-    })), /*#__PURE__*/jsx(Box, _objectSpread$A(_objectSpread$A({}, makeAccessible({
+    })), /*#__PURE__*/jsx(BaseBox, _objectSpread$A(_objectSpread$A({}, makeAccessible({
       // On web, we just wrap it in another listbox to announce item count properly for particular group.
       // On React Native, we ignore it since `menu` + `group` role will take care of accessibility
       role: isReactNative$4() ? undefined : 'listbox'
@@ -14933,7 +14933,7 @@ var ActionListItemText = function ActionListItemText(_ref3) {
 };
 
 ActionListItemText.componentId = componentIds$1.ActionListItemText;
-var ActionListCheckboxWrapper = /*#__PURE__*/styled(Box).withConfig({
+var ActionListCheckboxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ActionListItem__ActionListCheckboxWrapper",
   componentId: "m6qdwa-2"
 })(function (_props) {
@@ -15050,13 +15050,13 @@ var ActionListItem = function ActionListItem(props) {
       intent: props.intent,
       isSelected: isSelected,
       isKeydownPressed: isKeydownPressed,
-      children: [/*#__PURE__*/jsxs(Box, {
+      children: [/*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         justifyContent: "center",
         flexDirection: "row",
         alignItems: "center",
         maxHeight: isReactNative$4() ? undefined : theme.spacing[6],
-        children: [/*#__PURE__*/jsx(Box, {
+        children: [/*#__PURE__*/jsx(BaseBox, {
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -15075,7 +15075,7 @@ var ActionListItem = function ActionListItem(props) {
               children: null
             })
           })) : props.leading
-        }), /*#__PURE__*/jsx(Box, {
+        }), /*#__PURE__*/jsx(BaseBox, {
           paddingLeft: selectionType === 'multiple' || !props.leading ? 'spacing.0' : 'spacing.3',
           paddingRight: "spacing.3",
           children: /*#__PURE__*/jsx(Text, {
@@ -15083,11 +15083,11 @@ var ActionListItem = function ActionListItem(props) {
             color: props.intent === 'negative' ? 'feedback.text.negative.lowContrast' : getNormalTextColor(props.isDisabled),
             children: props.title
           })
-        }), /*#__PURE__*/jsx(Box, {
+        }), /*#__PURE__*/jsx(BaseBox, {
           marginLeft: "auto",
           children: props.trailing
         })]
-      }), /*#__PURE__*/jsx(Box, {
+      }), /*#__PURE__*/jsx(BaseBox, {
         paddingLeft: props.leading || selectionType === 'multiple' ? 'spacing.7' : undefined,
         children: props.description ? /*#__PURE__*/jsx(Text, {
           color: getNormalTextColor(props.isDisabled, {
@@ -15106,7 +15106,7 @@ ActionListItem.componentId = componentIds$1.ActionListItem;
 function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledActionListHeader = /*#__PURE__*/styled(Box).withConfig({
+var StyledActionListHeader = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ActionListHeader__StyledActionListHeader",
   componentId: "x9xazr-0"
 })(function (props) {
@@ -15147,9 +15147,9 @@ var ActionListHeader = function ActionListHeader(props) {
     });
   }, [props.leading]);
   return /*#__PURE__*/jsxs(StyledActionListHeader, _objectSpread$z(_objectSpread$z({}, metaAttribute(MetaConstants.Component, MetaConstants.ActionListHeader)), {}, {
-    children: [/*#__PURE__*/jsx(Box, {
+    children: [/*#__PURE__*/jsx(BaseBox, {
       children: props.leading
-    }), /*#__PURE__*/jsx(Box, {
+    }), /*#__PURE__*/jsx(BaseBox, {
       paddingLeft: "spacing.3",
       paddingRight: "spacing.3",
       children: /*#__PURE__*/jsx(Text, {
@@ -15177,7 +15177,7 @@ ActionListHeaderIcon.componentId = componentIds$1.ActionListHeaderIcon;
 function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledActionListFooter = /*#__PURE__*/styled(Box).withConfig({
+var StyledActionListFooter = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ActionListFooter__StyledActionListFooter",
   componentId: "px4gxj-0"
 })(function (props) {
@@ -15279,9 +15279,9 @@ var ActionListFooter = function ActionListFooter(props) {
     role: getActionListFooterRole(),
     label: props.title
   })), metaAttribute(MetaConstants.Component, MetaConstants.ActionListFooter)), {}, {
-    children: [props.leading ? /*#__PURE__*/jsx(Box, {
+    children: [props.leading ? /*#__PURE__*/jsx(BaseBox, {
       children: props.leading
-    }) : null, props.title ? /*#__PURE__*/jsx(Box, {
+    }) : null, props.title ? /*#__PURE__*/jsx(BaseBox, {
       flex: 1,
       paddingLeft: "spacing.3",
       paddingRight: "spacing.3",
@@ -15290,7 +15290,7 @@ var ActionListFooter = function ActionListFooter(props) {
         color: "surface.text.subdued.lowContrast",
         children: props.title
       })
-    }) : null, props.trailing ? /*#__PURE__*/jsx(Box, {
+    }) : null, props.trailing ? /*#__PURE__*/jsx(BaseBox, {
       display: "flex",
       alignItems: "center",
       marginLeft: isOnlyActionButton ? undefined : 'auto',
@@ -15746,7 +15746,7 @@ var SpinnerIcon = function SpinnerIcon(_ref) {
 };
 
 var rotate = /*#__PURE__*/keyframes(["from{transform:rotate(0deg);}to{transform:rotate(360deg);}"]);
-var SpinningBox = /*#__PURE__*/styled(Box).withConfig({
+var SpinningBox = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "SpinningBoxweb__SpinningBox",
   componentId: "zswieh-0"
 })(function (_ref) {
@@ -15786,10 +15786,10 @@ var BaseSpinner = function BaseSpinner(_ref2) {
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
 
-  return /*#__PURE__*/jsx(Box, _objectSpread$v(_objectSpread$v({
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread$v(_objectSpread$v({
     display: "flex"
   }, metaAttribute(MetaConstants.Component, MetaConstants.Spinner)), {}, {
-    children: /*#__PURE__*/jsxs(Box, _objectSpread$v(_objectSpread$v({
+    children: /*#__PURE__*/jsxs(BaseBox, _objectSpread$v(_objectSpread$v({
       display: "flex",
       alignItems: "center",
       flexDirection: labelPosition === 'right' ? 'row' : 'column'
@@ -15806,7 +15806,7 @@ var BaseSpinner = function BaseSpinner(_ref2) {
             theme: theme
           })
         })
-      }), label && label.trim().length > 0 ? /*#__PURE__*/jsx(Box, {
+      }), label && label.trim().length > 0 ? /*#__PURE__*/jsx(BaseBox, {
         marginLeft: labelPosition === 'right' ? 'spacing.3' : 'spacing.0',
         marginTop: labelPosition === 'bottom' ? 'spacing.3' : 'spacing.0',
         children: /*#__PURE__*/jsx(Text, {
@@ -15983,7 +15983,7 @@ var getProps$1 = function getProps(_ref2) {
   return props;
 };
 
-var ButtonContent = /*#__PURE__*/styled(Box).withConfig({
+var ButtonContent = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "BaseButton__ButtonContent",
   componentId: "zf1huq-0"
 })(function (_ref3) {
@@ -16099,7 +16099,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
     motionDuration: motionDuration,
     motionEasing: motionEasing
   }, metaAttribute(MetaConstants.Component, MetaConstants.Button)), {}, {
-    children: [isLoading ? /*#__PURE__*/jsx(Box, {
+    children: [isLoading ? /*#__PURE__*/jsx(BaseBox, {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -16121,7 +16121,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
       justifyContent: "center",
       flex: 1,
       isHidden: isLoading,
-      children: [Icon && iconPosition == 'left' ? /*#__PURE__*/jsx(Box, {
+      children: [Icon && iconPosition == 'left' ? /*#__PURE__*/jsx(BaseBox, {
         paddingRight: iconPadding,
         display: "flex",
         justifyContent: "center",
@@ -16137,7 +16137,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
         textAlign: "center",
         color: textColor,
         children: text
-      }) : null, Icon && iconPosition == 'right' ? /*#__PURE__*/jsx(Box, {
+      }) : null, Icon && iconPosition == 'right' ? /*#__PURE__*/jsx(BaseBox, {
         paddingLeft: iconPadding,
         display: "flex",
         justifyContent: "center",
@@ -16412,12 +16412,12 @@ var BaseLink = function BaseLink(_ref3) {
     ,
     className: className,
     style: style,
-    children: /*#__PURE__*/jsxs(Box, {
+    children: /*#__PURE__*/jsxs(BaseBox, {
       display: "flex",
       flexDirection: "row",
       className: "content-container",
       alignItems: "center",
-      children: [Icon && iconPosition == 'left' ? /*#__PURE__*/jsx(Box, {
+      children: [Icon && iconPosition == 'left' ? /*#__PURE__*/jsx(BaseBox, {
         paddingRight: iconPadding,
         display: "flex",
         alignItems: "center",
@@ -16433,7 +16433,7 @@ var BaseLink = function BaseLink(_ref3) {
         textAlign: "center",
         fontWeight: "bold",
         children: children
-      }), Icon && iconPosition == 'right' ? /*#__PURE__*/jsx(Box, {
+      }), Icon && iconPosition == 'right' ? /*#__PURE__*/jsx(BaseBox, {
         paddingLeft: iconPadding,
         display: "flex",
         alignItems: "center",
@@ -16451,7 +16451,7 @@ function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var isReactNative$3 = getPlatformType() === 'react-native'; // Need extra wrappers on React Native only for alignment
 
-var CloseButtonWrapper = isReactNative$3 ? Box : Fragment$1;
+var CloseButtonWrapper = isReactNative$3 ? BaseBox : Fragment$1;
 var intentIconMap = {
   positive: CheckCircleIcon,
   negative: AlertTriangleIcon,
@@ -16518,7 +16518,7 @@ var Alert = function Alert(_ref) {
     iconOffset = 'spacing.0';
   }
 
-  var icon = /*#__PURE__*/jsx(Box, {
+  var icon = /*#__PURE__*/jsx(BaseBox, {
     marginTop: iconOffset,
     display: "flex",
     children: /*#__PURE__*/jsx(Icon, {
@@ -16527,7 +16527,7 @@ var Alert = function Alert(_ref) {
     })
   });
 
-  var _title = title ? /*#__PURE__*/jsx(Box, {
+  var _title = title ? /*#__PURE__*/jsx(BaseBox, {
     marginBottom: "spacing.2",
     children: isFullWidth ? /*#__PURE__*/jsx(Heading, {
       type: "subtle",
@@ -16542,7 +16542,7 @@ var Alert = function Alert(_ref) {
     })
   }) : null;
 
-  var _description = /*#__PURE__*/jsx(Box, {
+  var _description = /*#__PURE__*/jsx(BaseBox, {
     marginTop: title || isReactNative$3 ? 'spacing.0' : 'spacing.1',
     children: /*#__PURE__*/jsx(Text, {
       type: "subtle",
@@ -16552,7 +16552,7 @@ var Alert = function Alert(_ref) {
     })
   });
 
-  var primaryAction = actions !== null && actions !== void 0 && actions.primary ? /*#__PURE__*/jsx(Box, {
+  var primaryAction = actions !== null && actions !== void 0 && actions.primary ? /*#__PURE__*/jsx(BaseBox, {
     marginRight: "spacing.5",
     display: isReactNative$3 ? 'flex' : 'inline-flex',
     children: /*#__PURE__*/jsx(BaseButton, {
@@ -16579,7 +16579,7 @@ var Alert = function Alert(_ref) {
     secondaryActionParams.rel = actions.secondary.rel;
   }
 
-  var secondaryAction = actions !== null && actions !== void 0 && actions.secondary ? /*#__PURE__*/jsx(Box, {
+  var secondaryAction = actions !== null && actions !== void 0 && actions.secondary ? /*#__PURE__*/jsx(BaseBox, {
     marginRight: "spacing.4",
     display: isReactNative$3 ? 'flex' : 'inline-flex',
     children: /*#__PURE__*/jsx(BaseLink, _objectSpread$r(_objectSpread$r({
@@ -16592,12 +16592,12 @@ var Alert = function Alert(_ref) {
   }) : null; // For certain cases we wish to render actions inline with text content
 
   var showActionsHorizontal = isFullWidth && isDesktop;
-  var actionsHorizontal = showActionsHorizontal && (primaryAction || secondaryAction) ? /*#__PURE__*/jsxs(Box, {
+  var actionsHorizontal = showActionsHorizontal && (primaryAction || secondaryAction) ? /*#__PURE__*/jsxs(BaseBox, {
     flexDirection: "row",
     alignItems: "center",
     children: [primaryAction, secondaryAction]
   }) : null;
-  var actionsVertical = !showActionsHorizontal && (primaryAction || secondaryAction) ? /*#__PURE__*/jsxs(Box, {
+  var actionsVertical = !showActionsHorizontal && (primaryAction || secondaryAction) ? /*#__PURE__*/jsxs(BaseBox, {
     marginTop: "spacing.4",
     flexDirection: "row",
     alignItems: "center",
@@ -16638,7 +16638,7 @@ var Alert = function Alert(_ref) {
     isFullWidth: isFullWidth,
     isDesktop: isDesktop
   }, a11yProps), metaAttribute(MetaConstants.Component, MetaConstants.Alert)), {}, {
-    children: [icon, /*#__PURE__*/jsxs(Box, {
+    children: [icon, /*#__PURE__*/jsxs(BaseBox, {
       flex: 1,
       paddingLeft: isFullWidth ? 'spacing.4' : 'spacing.3',
       paddingRight: showActionsHorizontal ? 'spacing.4' : 'spacing.2',
@@ -16764,7 +16764,7 @@ var Badge = function Badge(_ref2) {
     backgroundColor: backgroundColor,
     size: size
   }, metaAttribute(MetaConstants.Component, MetaConstants.Badge)), {}, {
-    children: /*#__PURE__*/jsxs(Box, {
+    children: /*#__PURE__*/jsxs(BaseBox, {
       paddingRight: horizontalPadding$1[size],
       paddingLeft: horizontalPadding$1[size],
       paddingTop: verticalPadding$1[size],
@@ -16774,7 +16774,7 @@ var Badge = function Badge(_ref2) {
       justifyContent: "center",
       alignItems: "center",
       overflow: "hidden",
-      children: [Icon ? /*#__PURE__*/jsx(Box, {
+      children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
         paddingRight: Boolean(Icon) ? iconPadding[size] : 'spacing.0',
         display: "flex",
         children: /*#__PURE__*/jsx(Icon, {
@@ -16792,7 +16792,7 @@ var Badge = function Badge(_ref2) {
   }));
 };
 
-var CardSurface = /*#__PURE__*/styled(Box).withConfig({
+var CardSurface = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "CardSurfaceweb__CardSurface",
   componentId: "sc-1pgxikk-0"
 })(function (_ref) {
@@ -16888,7 +16888,7 @@ var Card = function Card(_ref) {
 var CardBody = function CardBody(_ref2) {
   var children = _ref2.children;
   useVerifyInsideCard('CardBody');
-  return /*#__PURE__*/jsx(Box, _objectSpread$o(_objectSpread$o({}, metaAttribute(MetaConstants.Component, MetaConstants.CardBody)), {}, {
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread$o(_objectSpread$o({}, metaAttribute(MetaConstants.Component, MetaConstants.CardBody)), {}, {
     children: children
   }));
 };
@@ -17092,7 +17092,7 @@ var Counter = function Counter(_ref2) {
     backgroundColor: backgroundColor,
     size: size,
     platform: platform,
-    children: /*#__PURE__*/jsx(Box, _objectSpread$k(_objectSpread$k({
+    children: /*#__PURE__*/jsx(BaseBox, _objectSpread$k(_objectSpread$k({
       paddingRight: horizontalPadding[size],
       paddingLeft: horizontalPadding[size],
       paddingTop: verticalPadding[size],
@@ -17159,7 +17159,7 @@ CardHeaderLink.componentId = ComponentIds$1.CardHeaderLink;
 
 var CardHeaderIconButton = function CardHeaderIconButton(props) {
   useVerifyInsideCard('CardHeaderIconButton');
-  return /*#__PURE__*/jsx(Box, {
+  return /*#__PURE__*/jsx(BaseBox, {
     width: makeSpace(minHeight.xsmall),
     children: /*#__PURE__*/jsx(Button, _objectSpread$j(_objectSpread$j({}, props), {}, {
       variant: "tertiary",
@@ -17176,10 +17176,10 @@ var CardHeader = function CardHeader(_ref2) {
   var children = _ref2.children;
   useVerifyInsideCard('CardHeader');
   useVerifyAllowedComponents(children, 'CardHeader', [ComponentIds$1.CardHeaderLeading, ComponentIds$1.CardHeaderTrailing]);
-  return /*#__PURE__*/jsxs(Box, _objectSpread$j(_objectSpread$j({
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread$j(_objectSpread$j({
     marginBottom: "spacing.7"
   }, metaAttribute(MetaConstants.Component, MetaConstants.CardHeader)), {}, {
-    children: [/*#__PURE__*/jsx(Box, {
+    children: [/*#__PURE__*/jsx(BaseBox, {
       marginBottom: "spacing.7",
       display: "flex",
       flexDirection: "row",
@@ -17206,17 +17206,17 @@ var CardHeaderLeading = function CardHeaderLeading(_ref3) {
     throw new Error("[Blade CardHeaderLeading]: Only `".concat(ComponentIds$1.CardHeaderCounter, "` component is accepted in prefix"));
   }
 
-  return /*#__PURE__*/jsxs(Box, {
+  return /*#__PURE__*/jsxs(BaseBox, {
     flex: 1,
     display: "flex",
     flexDirection: "row",
-    children: [/*#__PURE__*/jsx(Box, {
+    children: [/*#__PURE__*/jsx(BaseBox, {
       marginRight: "spacing.3",
       alignSelf: "center",
       display: "flex",
       children: prefix
-    }), /*#__PURE__*/jsxs(Box, {
-      children: [/*#__PURE__*/jsxs(Box, {
+    }), /*#__PURE__*/jsxs(BaseBox, {
+      children: [/*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
@@ -17226,7 +17226,7 @@ var CardHeaderLeading = function CardHeaderLeading(_ref3) {
           variant: "regular",
           type: "normal",
           children: title
-        }), /*#__PURE__*/jsx(Box, {
+        }), /*#__PURE__*/jsx(BaseBox, {
           marginLeft: "spacing.3",
           children: suffix
         })]
@@ -17251,7 +17251,7 @@ var CardHeaderTrailing = function CardHeaderTrailing(_ref4) {
     throw new Error("[Blade CardHeaderTrailing]: Only one of `".concat(headerTrailingAllowedComponents.join(', '), "` component is accepted in visual"));
   }
 
-  return /*#__PURE__*/jsx(Box, {
+  return /*#__PURE__*/jsx(BaseBox, {
     alignSelf: "center",
     children: visual
   });
@@ -17280,12 +17280,12 @@ var CardFooter = function CardFooter(_ref) {
   var isMobile = useIsMobile();
   useVerifyInsideCard('CardFooter');
   useVerifyAllowedComponents(children, 'CardFooter', [ComponentIds$1.CardFooterLeading, ComponentIds$1.CardFooterTrailing]);
-  return /*#__PURE__*/jsxs(Box, _objectSpread$i(_objectSpread$i({
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread$i(_objectSpread$i({
     marginTop: "auto"
   }, metaAttribute(MetaConstants.Component, MetaConstants.CardFooter)), {}, {
-    children: [/*#__PURE__*/jsx(Box, {
+    children: [/*#__PURE__*/jsx(BaseBox, {
       marginTop: "spacing.7"
-    }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(Box, {
+    }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(BaseBox, {
       marginTop: "spacing.7",
       display: "flex",
       flexDirection: isMobile ? 'column' : 'row',
@@ -17302,7 +17302,7 @@ var CardFooterLeading = function CardFooterLeading(_ref2) {
   var title = _ref2.title,
       subtitle = _ref2.subtitle;
   useVerifyInsideCard('CardFooterLeading');
-  return /*#__PURE__*/jsxs(Box, {
+  return /*#__PURE__*/jsxs(BaseBox, {
     children: [title && /*#__PURE__*/jsx(Text, {
       variant: "body",
       size: "medium",
@@ -17323,13 +17323,13 @@ var CardFooterTrailing = function CardFooterTrailing(_ref3) {
   var actions = _ref3.actions;
   var isMobile = useIsMobile();
   useVerifyInsideCard('CardFooterTrailing');
-  return /*#__PURE__*/jsxs(Box, {
+  return /*#__PURE__*/jsxs(BaseBox, {
     display: "flex",
     flexDirection: "row",
     alignSelf: isMobile ? 'auto' : 'center',
     marginTop: isMobile ? 'spacing.5' : 'spacing.0',
     marginLeft: isMobile ? 'spacing.0' : 'spacing.5',
-    children: [/*#__PURE__*/jsx(Box, {
+    children: [/*#__PURE__*/jsx(BaseBox, {
       flexGrow: 1,
       children: actions !== null && actions !== void 0 && actions.secondary ? /*#__PURE__*/jsx(Button, _objectSpread$i(_objectSpread$i({
         isFullWidth: true,
@@ -17338,9 +17338,9 @@ var CardFooterTrailing = function CardFooterTrailing(_ref3) {
       }, actions.secondary), {}, {
         children: actions.secondary.text
       })) : null
-    }), /*#__PURE__*/jsx(Box, {
+    }), /*#__PURE__*/jsx(BaseBox, {
       marginLeft: "spacing.5"
-    }), /*#__PURE__*/jsx(Box, {
+    }), /*#__PURE__*/jsx(BaseBox, {
       flexGrow: 1,
       children: actions !== null && actions !== void 0 && actions.primary ? /*#__PURE__*/jsx(Button, _objectSpread$i(_objectSpread$i({
         isFullWidth: true,
@@ -17476,7 +17476,10 @@ var Dropdown = function Dropdown(_ref) {
   [isOpen, selectedIndices, options, activeIndex, shouldIgnoreBlur, shouldIgnoreBlurAnimation, selectionType, hasFooterAction, hasLabelOnLeft, isKeydownPressed]);
   return /*#__PURE__*/jsx(DropdownContext.Provider, {
     value: contextValue,
-    children: children
+    children: /*#__PURE__*/jsx(BaseBox, {
+      position: "relative",
+      children: children
+    })
   });
 };
 
@@ -17879,7 +17882,7 @@ function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var dropdownFadeIn = /*#__PURE__*/keyframes(["from{transform:translateY(", ");opacity:0;}to{transform:translateY(", ");opacity:1;}"], makeSize(spacing[0]), makeSize(spacing[3]));
 var dropdownFadeOut = /*#__PURE__*/keyframes(["from{transform:translateY(", ");opacity:1;}to{transform:translateY(", ");opacity:0;}"], makeSize(spacing[3]), makeSize(spacing[0]));
-var StyledDropdownOverlay = /*#__PURE__*/styled(Box).withConfig({
+var StyledDropdownOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "DropdownOverlayweb__StyledDropdownOverlay",
   componentId: "sc-9pwxtx-0"
 })(function (props) {
@@ -17918,6 +17921,7 @@ var DropdownOverlay = function DropdownOverlay(_ref) {
     if (isOpen) {
       var _triggererRef$current;
 
+      // On Safari clicking on a non input element doesn't focuses it https://bugs.webkit.org/show_bug.cgi?id=22261
       (_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 ? void 0 : _triggererRef$current.focus();
       setDisplay('block');
     } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -17949,7 +17953,7 @@ var DropdownOverlay = function DropdownOverlay(_ref) {
       window.removeEventListener('resize', setOverlayWidth);
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setWidth, triggererRef, hasLabelOnLeft]);
-  return /*#__PURE__*/jsx(Box, {
+  return /*#__PURE__*/jsx(BaseBox, {
     position: "relative",
     children: /*#__PURE__*/jsx(StyledDropdownOverlay, _objectSpread$h(_objectSpread$h({
       width: width,
@@ -18090,15 +18094,15 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
   var hasTrailingVisuals = hasInteractionElement || hasSuffix || hasTrailingIcon;
 
   if (hasLeadingVisuals) {
-    return /*#__PURE__*/jsxs(Box, _objectSpread$g(_objectSpread$g({}, getVisualContainerStyles()), {}, {
-      children: [LeadingIcon ? /*#__PURE__*/jsx(Box, {
+    return /*#__PURE__*/jsxs(BaseBox, _objectSpread$g(_objectSpread$g({}, getVisualContainerStyles()), {}, {
+      children: [LeadingIcon ? /*#__PURE__*/jsx(BaseBox, {
         paddingLeft: "spacing.4",
         display: "flex",
         children: /*#__PURE__*/jsx(LeadingIcon, {
           size: "medium",
           color: isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast'
         })
-      }) : null, hasPrefix ? /*#__PURE__*/jsx(Box, _objectSpread$g(_objectSpread$g({}, getPrefixStyles({
+      }) : null, hasPrefix ? /*#__PURE__*/jsx(BaseBox, _objectSpread$g(_objectSpread$g({}, getPrefixStyles({
         hasLeadingIcon: hasLeadingIcon,
         hasPrefix: hasPrefix
       })), {}, {
@@ -18115,15 +18119,15 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
   }
 
   if (hasTrailingVisuals) {
-    return /*#__PURE__*/jsxs(Box, _objectSpread$g(_objectSpread$g({}, getVisualContainerStyles()), {}, {
-      children: [hasInteractionElement ? /*#__PURE__*/jsx(Box, _objectSpread$g(_objectSpread$g({}, getInteractionElementStyles({
+    return /*#__PURE__*/jsxs(BaseBox, _objectSpread$g(_objectSpread$g({}, getVisualContainerStyles()), {}, {
+      children: [hasInteractionElement ? /*#__PURE__*/jsx(BaseBox, _objectSpread$g(_objectSpread$g({}, getInteractionElementStyles({
         hasTrailingIcon: hasTrailingIcon,
         hasInteractionElement: hasInteractionElement,
         hasSuffix: hasSuffix
       })), {}, {
         display: "flex",
         children: interactionElement
-      })) : null, hasSuffix ? /*#__PURE__*/jsx(Box, _objectSpread$g(_objectSpread$g({}, getSuffixStyles({
+      })) : null, hasSuffix ? /*#__PURE__*/jsx(BaseBox, _objectSpread$g(_objectSpread$g({}, getSuffixStyles({
         hasTrailingIcon: hasTrailingIcon,
         hasSuffix: hasSuffix
       })), {}, {
@@ -18135,7 +18139,7 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
           type: isDisabled ? 'placeholder' : 'subtle',
           children: suffix
         })
-      })) : null, TrailingIcon ? /*#__PURE__*/jsx(Box, {
+      })) : null, TrailingIcon ? /*#__PURE__*/jsx(BaseBox, {
         paddingRight: "spacing.4",
         display: "flex",
         children: /*#__PURE__*/jsx(TrailingIcon, {
@@ -18431,7 +18435,7 @@ StyledBaseInput.displayName = 'StyledBaseInput';
 
 var scaleBorder = /*#__PURE__*/keyframes(["from{transform:scaleX(0);transform-origin:left;opacity:0;}to{transform:scaleX(1);transform-origin:left;opacity:1;}"]);
 var fadeOutBorder = /*#__PURE__*/keyframes(["from{opacity:1}to{opacity:0}"]);
-var BaseInputStyledAnimatedBorder = /*#__PURE__*/styled(Box).withConfig({
+var BaseInputStyledAnimatedBorder = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder",
   componentId: "sc-2cepod-0"
 })(function (_ref) {
@@ -18470,7 +18474,7 @@ var _excluded$1 = ["children", "validationState", "currentInteraction", "isLabel
 function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledBaseInputWrapper = /*#__PURE__*/styled(Box).withConfig({
+var StyledBaseInputWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "BaseInputWrapper__StyledBaseInputWrapper",
   componentId: "sc-27jk75-0"
 })(function (props) {
@@ -18828,14 +18832,14 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref10, ref) {
 
   var isTextArea = as === 'textarea';
   var isReactNative = getPlatformType() === 'react-native';
-  return /*#__PURE__*/jsxs(Box, _objectSpread$b(_objectSpread$b({}, metaAttribute(MetaConstants.Component, componentName)), {}, {
-    children: [/*#__PURE__*/jsxs(Box, {
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread$b(_objectSpread$b({}, metaAttribute(MetaConstants.Component, componentName)), {}, {
+    children: [/*#__PURE__*/jsxs(BaseBox, {
       display: "flex",
       flexDirection: isLabelLeftPositioned ? 'row' : 'column',
       justifyContent: isLabelLeftPositioned ? 'center' : undefined,
       alignItems: isLabelLeftPositioned ? 'center' : undefined,
       position: "relative",
-      children: [!hideLabelText && /*#__PURE__*/jsxs(Box, {
+      children: [!hideLabelText && /*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         flexDirection: isLabelLeftPositioned ? 'column' : 'row',
         justifyContent: "space-between",
@@ -18904,9 +18908,9 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref10, ref) {
           isDisabled: isDisabled
         })]
       })]
-    }), !hideFormHint && /*#__PURE__*/jsx(Box, {
+    }), !hideFormHint && /*#__PURE__*/jsx(BaseBox, {
       marginLeft: isLabelLeftPositioned ? 136 : 0,
-      children: /*#__PURE__*/jsxs(Box, {
+      children: /*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         flexDirection: "row",
         justifyContent: willRenderHintText ? 'space-between' : 'flex-end',
@@ -19156,7 +19160,7 @@ var _TextInput = function _TextInput(_ref2, ref) {
     trailingFooterSlot: function trailingFooterSlot(value) {
       var _value$length;
 
-      return maxCharacters ? /*#__PURE__*/jsx(Box, {
+      return maxCharacters ? /*#__PURE__*/jsx(BaseBox, {
         marginTop: "spacing.2",
         marginRight: "spacing.1",
         children: /*#__PURE__*/jsx(CharacterCounter, {
@@ -19236,7 +19240,7 @@ var _PasswordInput = function _PasswordInput(_ref, ref) {
   var trailingFooterSlot = function trailingFooterSlot(value) {
     var _value$length;
 
-    return maxCharacters ? /*#__PURE__*/jsx(Box, {
+    return maxCharacters ? /*#__PURE__*/jsx(BaseBox, {
       marginTop: "spacing.2",
       marginRight: "spacing.1",
       children: /*#__PURE__*/jsx(CharacterCounter, {
@@ -19323,7 +19327,7 @@ var _TextArea = function _TextArea(_ref, ref) {
 
   var renderInteractionElement = function renderInteractionElement() {
     if (shouldShowClearButton) {
-      return /*#__PURE__*/jsx(Box, {
+      return /*#__PURE__*/jsx(BaseBox, {
         paddingTop: "spacing.3",
         marginTop: "spacing.1",
         children: /*#__PURE__*/jsx(IconButton, {
@@ -19401,7 +19405,7 @@ var _TextArea = function _TextArea(_ref, ref) {
     trailingFooterSlot: function trailingFooterSlot(value) {
       var _value$length;
 
-      return maxCharacters ? /*#__PURE__*/jsx(Box, {
+      return maxCharacters ? /*#__PURE__*/jsx(BaseBox, {
         marginTop: "spacing.2",
         marginRight: "spacing.1",
         children: /*#__PURE__*/jsx(CharacterCounter, {
@@ -19681,7 +19685,7 @@ var OTPInput = function OTPInput(_ref) {
       }
 
       inputRefs.push(ref);
-      inputs.push( /*#__PURE__*/jsx(Box, {
+      inputs.push( /*#__PURE__*/jsx(BaseBox, {
         flex: 1,
         marginLeft: index == 0 ? 'spacing.0' : 'spacing.3',
         maxWidth: platform === 'onDesktop' ? 36 : 40 // TODO: use size tokens
@@ -19735,8 +19739,8 @@ var OTPInput = function OTPInput(_ref) {
     return inputs;
   };
 
-  return /*#__PURE__*/jsxs(Box, _objectSpread$9(_objectSpread$9({}, metaAttribute(MetaConstants.Component, MetaConstants.OTPInput)), {}, {
-    children: [/*#__PURE__*/jsxs(Box, {
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread$9(_objectSpread$9({}, metaAttribute(MetaConstants.Component, MetaConstants.OTPInput)), {}, {
+    children: [/*#__PURE__*/jsxs(BaseBox, {
       display: "flex",
       flexDirection: isLabelLeftPositioned ? 'row' : 'column',
       alignItems: isLabelLeftPositioned ? 'center' : undefined,
@@ -19746,12 +19750,12 @@ var OTPInput = function OTPInput(_ref) {
         position: labelPosition,
         htmlFor: inputId,
         children: label
-      }), /*#__PURE__*/jsxs(Box, {
+      }), /*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         flexDirection: "row",
         children: [getHiddenInput(), getOTPInputFields()]
       })]
-    }), /*#__PURE__*/jsx(Box, {
+    }), /*#__PURE__*/jsx(BaseBox, {
       marginLeft: isLabelLeftPositioned ? 136 : 0,
       children: /*#__PURE__*/jsx(FormHint, {
         type: getHintType({
@@ -19771,7 +19775,7 @@ var OTPInput = function OTPInput(_ref) {
 
 var SelectChevronIcon = function SelectChevronIcon(props) {
   var Icon = props.icon;
-  return /*#__PURE__*/jsx(Box, {
+  return /*#__PURE__*/jsx(BaseBox, {
     as: "div",
     display: "flex",
     justifyContent: "center",
@@ -19823,12 +19827,12 @@ var _SelectInput = function _SelectInput(props, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange({
       name: props.name,
       values: value.split(', ')
-    });
-  }, [value, onChange, props.name]);
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, props.name]);
   React__default.useEffect(function () {
     setHasLabelOnLeft(props.labelPosition === 'left');
   }, [props.labelPosition, setHasLabelOnLeft]);
-  return /*#__PURE__*/jsxs(Box, {
+  return /*#__PURE__*/jsxs(BaseBox, {
     position: "relative",
     children: [!isReactNative$4() ? /*#__PURE__*/jsx(VisuallyHidden, {
       children: /*#__PURE__*/jsx("input", {
@@ -19956,7 +19960,7 @@ var Indicator = function Indicator(_ref) {
   }, isWeb && {
     role: 'status'
   }));
-  return /*#__PURE__*/jsxs(Box, _objectSpread$7(_objectSpread$7(_objectSpread$7({
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread$7(_objectSpread$7(_objectSpread$7({
     display: "flex",
     flexDirection: "row",
     alignItems: "center"
@@ -19978,7 +19982,7 @@ var Indicator = function Indicator(_ref) {
         stroke: strokeColor,
         strokeWidth: "0.5"
       })]
-    }), /*#__PURE__*/jsx(Box, {
+    }), /*#__PURE__*/jsx(BaseBox, {
       marginLeft: "spacing.2",
       children: /*#__PURE__*/jsx(Text, {
         contrast: "low",
@@ -20447,12 +20451,12 @@ var ListItem = function ListItem(_ref2) {
     variant: variant,
     hasIcon: hasIcon
   }, metaAttribute(MetaConstants.Component, MetaConstants.ListItem)), {}, {
-    children: [/*#__PURE__*/jsxs(Box, {
+    children: [/*#__PURE__*/jsxs(BaseBox, {
       display: "flex",
       flexDirection: "row",
       alignItems: "center",
       marginBottom: listItemMarginBottom,
-      children: [variant === 'unordered' ? /*#__PURE__*/jsx(Box, {
+      children: [variant === 'unordered' ? /*#__PURE__*/jsx(BaseBox, {
         marginRight: listItemBulletMarginRight[variant],
         marginTop: listItemBulletMarginTop["".concat(variant).concat(hasIcon ? 'WithIcon' : '')][platform][size],
         display: "flex",
@@ -20463,7 +20467,7 @@ var ListItem = function ListItem(_ref2) {
         }) : /*#__PURE__*/jsx(UnorderedItemIcon, {
           level: level
         })
-      }) : /*#__PURE__*/jsx(Box, {
+      }) : /*#__PURE__*/jsx(BaseBox, {
         width: listItemOrderedBulletBoxSize[variant][platform][size],
         height: listItemOrderedBulletBoxSize[variant][platform][size],
         marginRight: listItemBulletMarginRight[variant],
@@ -20636,7 +20640,7 @@ var getPulseAnimationStyles = function getPulseAnimationStyles(_ref) {
   return css(["height:100%;width:100%;opacity:", ";background-color:", ";animation:", " ", " ", " infinite;animation-delay:", ";"], pulseAnimation.opacityInitial, pulseAnimation.backgroundColor, pulseKeyframes, duration, easing, delay);
 };
 
-var BoxWithIndeterminateAnimation = /*#__PURE__*/styled(Box).withConfig({
+var BoxWithIndeterminateAnimation = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ProgressBarFilledweb__BoxWithIndeterminateAnimation",
   componentId: "sc-15oi5xk-0"
 })(function (_ref2) {
@@ -20674,7 +20678,7 @@ var IndeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithIndeterminateAnimat
     delay: delay
   }) : '';
 });
-var BoxWithProgressFillTransition = /*#__PURE__*/styled(Box).withConfig({
+var BoxWithProgressFillTransition = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ProgressBarFilledweb__BoxWithProgressFillTransition",
   componentId: "sc-15oi5xk-3"
 })(function (_ref5) {
@@ -20815,7 +20819,7 @@ var ProgressBar = function ProgressBar(_ref) {
   }
 
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(Box, {
+    children: [/*#__PURE__*/jsxs(BaseBox, {
       display: "flex",
       flexDirection: "row",
       justifyContent: hasLabel ? 'space-between' : 'flex-end',
@@ -20824,7 +20828,7 @@ var ProgressBar = function ProgressBar(_ref) {
         htmlFor: id,
         contrast: contrast,
         children: label
-      }) : null, shouldShowPercentage ? /*#__PURE__*/jsx(Box, {
+      }) : null, shouldShowPercentage ? /*#__PURE__*/jsx(BaseBox, {
         marginBottom: "spacing.2",
         children: /*#__PURE__*/jsx(Text, {
           type: "subdued",
@@ -20834,7 +20838,7 @@ var ProgressBar = function ProgressBar(_ref) {
           children: "".concat(percentageProgressValue, "%")
         })
       }) : null]
-    }), /*#__PURE__*/jsx(Box, _objectSpread$3(_objectSpread$3(_objectSpread$3({
+    }), /*#__PURE__*/jsx(BaseBox, _objectSpread$3(_objectSpread$3(_objectSpread$3({
       id: id
     }, metaAttribute(MetaConstants.Component, MetaConstants.ProgressBar)), makeAccessible({
       role: accessibilityProps.role,
@@ -20844,7 +20848,7 @@ var ProgressBar = function ProgressBar(_ref) {
       valueMin: accessibilityProps.valueMin,
       valueMax: accessibilityProps.valueMax
     })), {}, {
-      children: /*#__PURE__*/jsx(Box, {
+      children: /*#__PURE__*/jsx(BaseBox, {
         backgroundColor: unfilledBackgroundColor,
         height: makeSize(progressBarHeight[size]),
         overflow: "hidden",
@@ -21331,10 +21335,10 @@ var _Radio = function _Radio(_ref, ref) {
 
   return /*#__PURE__*/jsx(SelectorLabel, {
     inputProps: isReactNative ? inputProps : {},
-    children: /*#__PURE__*/jsxs(Box, {
+    children: /*#__PURE__*/jsxs(BaseBox, {
       display: "flex",
       flexDirection: "column",
-      children: [/*#__PURE__*/jsxs(Box, {
+      children: [/*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         alignItems: "center",
         flexDirection: "row",
@@ -21354,7 +21358,7 @@ var _Radio = function _Radio(_ref, ref) {
           isDisabled: _isDisabled,
           children: children
         })]
-      }), /*#__PURE__*/jsx(Box, {
+      }), /*#__PURE__*/jsx(BaseBox, {
         marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
         children: showHelpText && /*#__PURE__*/jsx(SelectorSupportText, {
           id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
@@ -21516,12 +21520,12 @@ var RadioGroup = function RadioGroup(_ref) {
         id: ids.labelId,
         accessibilityText: accessibilityText && ",".concat(accessibilityText),
         children: label
-      }), /*#__PURE__*/jsxs(Box, {
-        children: [/*#__PURE__*/jsx(Box, {
+      }), /*#__PURE__*/jsxs(BaseBox, {
+        children: [/*#__PURE__*/jsx(BaseBox, {
           display: "flex",
           flexDirection: "column",
           children: React__default.Children.map(children, function (child, index) {
-            return /*#__PURE__*/jsx(Box, {
+            return /*#__PURE__*/jsx(BaseBox, {
               marginBottom: index === childCount - 1 ? 0 : gap,
               children: child
             }, index);