@razorpay/blade 10.4.4 → 10.6.0

package/build/components/index.development.web.js

@@ -701,9 +701,9 @@ var useBottomSheetAndDropdownGlue = function useBottomSheetAndDropdownGlue() {
   return state;
 };
 
-var _excluded$50 = ["isOpen", "setIsOpen", "close", "selectedIndices", "setSelectedIndices", "activeIndex", "setActiveIndex", "shouldIgnoreBlur", "setShouldIgnoreBlur", "isKeydownPressed", "setIsKeydownPressed", "options", "selectionType", "changeCallbackTriggerer", "setChangeCallbackTriggerer", "isControlled", "setControlledValueIndices"];
-function ownKeys$6e(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$6d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$51 = ["isOpen", "setIsOpen", "close", "selectedIndices", "setSelectedIndices", "activeIndex", "setActiveIndex", "shouldIgnoreBlur", "setShouldIgnoreBlur", "isKeydownPressed", "setIsKeydownPressed", "options", "selectionType", "changeCallbackTriggerer", "setChangeCallbackTriggerer", "isControlled", "setControlledValueIndices"];
+function ownKeys$6f(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$6e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6f(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 var noop$1 = function noop() {};
@@ -771,7 +771,7 @@ var useDropdown = function useDropdown() {
     setChangeCallbackTriggerer = _React$useContext.setChangeCallbackTriggerer,
     isControlled = _React$useContext.isControlled,
     setControlledValueIndices = _React$useContext.setControlledValueIndices,
-    rest = _objectWithoutProperties$1(_React$useContext, _excluded$50);
+    rest = _objectWithoutProperties$1(_React$useContext, _excluded$51);
   var bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();
   var setIndices = function setIndices(indices) {
     if (isControlled) {
@@ -968,7 +968,7 @@ var useDropdown = function useDropdown() {
       });
     }
   };
-  return _objectSpread$6d({
+  return _objectSpread$6e({
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     close: close,
@@ -1087,8 +1087,8 @@ var isValidAllowedChildren = function isValidAllowedChildren(component, id) {
   return getComponentId(component) === id;
 };
 
-function ownKeys$6d(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$6c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6d(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6e(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$6d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Returns if there is ActionListItem after ActionListSection
@@ -1148,7 +1148,7 @@ var getActionListProperties = function getActionListProperties(children) {
       });
       // push the item in the appropriate bucket
       if (foundSection) {
-        foundSection === null || foundSection === void 0 ? void 0 : foundSection.data.push(_objectSpread$6c(_objectSpread$6c({}, child.props), {}, {
+        foundSection === null || foundSection === void 0 ? void 0 : foundSection.data.push(_objectSpread$6d(_objectSpread$6d({}, child.props), {}, {
           _index: currentIndex
         }));
       } else {
@@ -1156,7 +1156,7 @@ var getActionListProperties = function getActionListProperties(children) {
         sectionData.push({
           title: currentSection,
           hideDivider: hideDivider,
-          data: [_objectSpread$6c(_objectSpread$6c({}, child.props), {}, {
+          data: [_objectSpread$6d(_objectSpread$6d({}, child.props), {}, {
             _index: currentIndex
           })]
         });
@@ -1265,8 +1265,8 @@ var fontFamily = {
   code: 'monospace'
 };
 
-function ownKeys$6c(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$6b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6d(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$6c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6d(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * For font size and line-heights we can’t say from xl to 2xl the value will necessary increase.
@@ -1282,7 +1282,7 @@ var fontWeight = {
 ({
   onDesktop: {
     fonts: {
-      family: _objectSpread$6b({}, fontFamily),
+      family: _objectSpread$6c({}, fontFamily),
       size: {
         10: 9,
         25: 10,
@@ -1297,9 +1297,13 @@ var fontWeight = {
         700: 28,
         800: 32,
         900: 36,
-        1000: 40
+        1000: 40,
+        1100: 48,
+        1200: 56,
+        1300: 64,
+        1600: 88
       },
-      weight: _objectSpread$6b({}, fontWeight)
+      weight: _objectSpread$6c({}, fontWeight)
     },
     lineHeights: {
       0: 0,
@@ -1313,14 +1317,18 @@ var fontWeight = {
       500: 32,
       600: 40,
       700: 40,
-      800: 48
+      800: 48,
+      900: 56,
+      1000: 64,
+      1100: 72,
+      1500: 104
     }
     // letterSpacings: {},
   },
 
   onMobile: {
     fonts: {
-      family: _objectSpread$6b({}, fontFamily),
+      family: _objectSpread$6c({}, fontFamily),
       size: {
         10: 9,
         25: 10,
@@ -1335,9 +1343,13 @@ var fontWeight = {
         700: 24,
         800: 28,
         900: 32,
-        1000: 32
+        1000: 32,
+        1100: 40,
+        1200: 48,
+        1300: 56,
+        1600: 64
       },
-      weight: _objectSpread$6b({}, fontWeight)
+      weight: _objectSpread$6c({}, fontWeight)
     },
     lineHeights: {
       0: 0,
@@ -1351,7 +1363,11 @@ var fontWeight = {
       500: 28,
       600: 32,
       700: 40,
-      800: 40
+      800: 40,
+      900: 48,
+      1000: 56,
+      1100: 64,
+      1500: 72
     }
     // letterSpacings: {},
   }
@@ -3389,9 +3405,9 @@ var getResponsiveValue = function getResponsiveValue(value) {
   return value[breakpoint];
 };
 
-var _excluded$4$ = ["base"];
-function ownKeys$6b(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$6a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6b(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$50 = ["base"];
+function ownKeys$6c(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$6b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getSpacingValue = function getSpacingValue(spacingValue, theme, breakpoint) {
   if (isEmpty_1(spacingValue)) {
     return undefined;
@@ -3436,7 +3452,7 @@ var getElevationValue = function getElevationValue(elevation, theme, breakpoint)
 var getAllProps = function getAllProps(props, breakpoint) {
   var _props$paddingTop, _props$paddingBottom, _props$paddingRight, _props$paddingLeft, _props$marginBottom, _props$marginTop, _props$marginRight, _props$marginLeft;
   var hasBorder = props.borderBottom || props.borderTop || props.borderLeft || props.borderRight || props.borderBottomColor || props.borderTopColor || props.borderLeftColor || props.borderRightColor || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth || props.borderWidth || props.borderColor;
-  return _objectSpread$6a({
+  return _objectSpread$6b({
     display: getResponsiveValue(props.display, breakpoint),
     overflow: getResponsiveValue(props.overflow, breakpoint),
     overflowX: getResponsiveValue(props.overflowX, breakpoint),
@@ -3548,7 +3564,7 @@ var getAllMediaQueries = function getAllMediaQueries(props) {
     return {};
   }
   breakpoints.base;
-    var breakpointsWithoutBase = _objectWithoutProperties$1(breakpoints, _excluded$4$);
+    var breakpointsWithoutBase = _objectWithoutProperties$1(breakpoints, _excluded$50);
   return Object.fromEntries(Object.entries(breakpointsWithoutBase).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       breakpointKey = _ref2[0],
@@ -3564,11 +3580,11 @@ var getAllMediaQueries = function getAllMediaQueries(props) {
   }));
 };
 var getBaseBoxStyles = function getBaseBoxStyles(props) {
-  return _objectSpread$6a(_objectSpread$6a({}, getAllProps(props)), getAllMediaQueries(props));
+  return _objectSpread$6b(_objectSpread$6b({}, getAllProps(props)), getAllMediaQueries(props));
 };
 
-function ownKeys$6a(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$69(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6a(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6b(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$6a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6b(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
  * Reusable hook to be used in BladeProvider.native & BladeProvider.web file
  *
@@ -3601,7 +3617,7 @@ var useBladeProvider = function useBladeProvider(_ref) {
     matchedDeviceType = _useBreakpoint.matchedDeviceType;
   var onColorMode = "on".concat(toTitleCase(colorScheme));
   var onDeviceType = "on".concat(toTitleCase(matchedDeviceType));
-  var theme = _objectSpread$69(_objectSpread$69({}, themeTokens), {}, {
+  var theme = _objectSpread$6a(_objectSpread$6a({}, themeTokens), {}, {
     colors: themeTokens.colors[onColorMode],
     elevation: themeTokens.elevation[onColorMode],
     typography: themeTokens.typography[onDeviceType]
@@ -3704,9 +3720,9 @@ var BladeProvider = function BladeProvider(_ref) {
   });
 };
 
-var _excluded$4_ = ["theme", "colorScheme", "children", "className", "id"];
-function ownKeys$69(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$68(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$69(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$69(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$4$ = ["theme", "colorScheme", "children", "className", "id"];
+function ownKeys$6a(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$69(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6a(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getMemoDependency = function getMemoDependency(props) {
   // These are the props that change nothing in the getBaseBoxStyles calculations
   var theme = props.theme,
@@ -3714,7 +3730,7 @@ var getMemoDependency = function getMemoDependency(props) {
     props.children;
     props.className;
     props.id;
-    var rest = _objectWithoutProperties$1(props, _excluded$4_);
+    var rest = _objectWithoutProperties$1(props, _excluded$4$);
   var dependencyPropString = '';
   try {
     // I know this looks illegal but Dan approves it - https://twitter.com/dan_abramov/status/1104414272753487872?s=20
@@ -3747,11 +3763,11 @@ var getMemoDependency = function getMemoDependency(props) {
 var useMemoizedStyles = function useMemoizedStyles(boxProps) {
   var _useTheme = useTheme(),
     colorScheme = _useTheme.colorScheme;
-  var boxPropsMemoDependency = getMemoDependency(_objectSpread$68(_objectSpread$68({}, boxProps), {}, {
+  var boxPropsMemoDependency = getMemoDependency(_objectSpread$69(_objectSpread$69({}, boxProps), {}, {
     colorScheme: colorScheme
   }));
   var boxPropsCSSObject = React__default.useMemo(function () {
-    return getBaseBoxStyles(_objectSpread$68(_objectSpread$68({}, boxProps), {}, {
+    return getBaseBoxStyles(_objectSpread$69(_objectSpread$69({}, boxProps), {}, {
       theme: boxProps.theme
     }));
   },
@@ -3797,6 +3813,7 @@ var MetaConstants = {
   Code: 'code',
   Component: 'blade-component',
   Counter: 'counter',
+  Display: 'display',
   Divider: 'divider',
   Dropdown: 'dropdown',
   DropdownOverlay: 'dropdown-overlay',
@@ -3852,18 +3869,18 @@ var MetaConstants = {
   Skeleton: 'skeleton'
 };
 
-function ownKeys$68(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$67(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$68(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$68(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$69(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$68(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$69(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$69(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var metaAttribute = function metaAttribute(_ref) {
   var name = _ref.name,
     testID = _ref.testID;
-  return _objectSpread$67(_objectSpread$67({}, name ? _defineProperty$1({}, "data-".concat(MetaConstants.Component), name) : {}), testID ? _defineProperty$1({}, "data-testid", testID) : {});
+  return _objectSpread$68(_objectSpread$68({}, name ? _defineProperty$1({}, "data-".concat(MetaConstants.Component), name) : {}), testID ? _defineProperty$1({}, "data-testid", testID) : {});
 };
 
-function ownKeys$67(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$66(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$67(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$67(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$68(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$67(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$68(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$68(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BaseBox = /*#__PURE__*/styled.div.attrs(function (props) {
-  return _objectSpread$66({}, metaAttribute({
+  return _objectSpread$67({}, metaAttribute({
     name: props['data-blade-component'] || MetaConstants.BaseBox,
     testID: props['data-testid'] || props.testID
   }));
@@ -3875,14 +3892,14 @@ var BaseBox = /*#__PURE__*/styled.div.attrs(function (props) {
   return cssObject;
 });
 
-function ownKeys$66(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$65(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$66(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$66(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$67(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$66(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$67(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$67(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledListBoxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledListBoxWrapperweb__StyledListBoxWrapper",
   componentId: "sc-1eo4pr6-0"
 })(function (props) {
   var _objectSpread2;
-  return _objectSpread$65((_objectSpread2 = {}, _defineProperty$1(_objectSpread2, "& [role=group]:last-child > [role=separator]:last-child", {
+  return _objectSpread$66((_objectSpread2 = {}, _defineProperty$1(_objectSpread2, "& [role=group]:last-child > [role=separator]:last-child", {
     display: 'none'
   }), _defineProperty$1(_objectSpread2, "overflowY", 'auto'), _objectSpread2), getBaseListBoxWrapperStyles({
     theme: props.theme,
@@ -3928,8 +3945,8 @@ var assignWithoutSideEffects = function assignWithoutSideEffects(component, sour
   return /*#__PURE__*/Object.assign(component, sourceObj);
 };
 
-function ownKeys$65(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$64(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$65(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$65(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$66(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$65(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$66(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$66(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var accessibilityValue = {
   valueMax: 'aria-valuemax',
   valueMin: 'aria-valuemin',
@@ -3946,7 +3963,7 @@ var accessibilityState = {
 
 // TODO:
 // accessibilityViewIsModal
-var accessibilityMap = _objectSpread$64(_objectSpread$64(_objectSpread$64({}, accessibilityState), accessibilityValue), {}, {
+var accessibilityMap = _objectSpread$65(_objectSpread$65(_objectSpread$65({}, accessibilityState), accessibilityValue), {}, {
   activeDescendant: 'aria-activedescendant',
   atomic: 'aria-atomic',
   autoComplete: 'aria-autocomplete',
@@ -4011,15 +4028,15 @@ var makeAccessible = function makeAccessible(props) {
   return newProps;
 };
 
-function ownKeys$64(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$63(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$64(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$64(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$65(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$64(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$65(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$65(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _ActionListBox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var childrenWithId = _ref.childrenWithId,
     actionListItemWrapperRole = _ref.actionListItemWrapperRole,
     isMultiSelectable = _ref.isMultiSelectable;
   var _useBottomSheetContex = useBottomSheetContext(),
     isInBottomSheet = _useBottomSheetContex.isInBottomSheet;
-  return /*#__PURE__*/jsx(StyledListBoxWrapper, _objectSpread$63(_objectSpread$63({
+  return /*#__PURE__*/jsx(StyledListBoxWrapper, _objectSpread$64(_objectSpread$64({
     isInBottomSheet: isInBottomSheet,
     ref: ref
   }, makeAccessible({
@@ -4033,8 +4050,8 @@ var ActionListBox = /*#__PURE__*/assignWithoutSideEffects(_ActionListBox, {
   displayName: 'ActionListBox'
 });
 
-function ownKeys$63(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$62(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$63(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$63(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$64(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$63(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$64(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$64(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ActionListContext = /*#__PURE__*/React__default.createContext({
   surfaceLevel: 2
 });
@@ -4128,7 +4145,7 @@ var _ActionList = function _ActionList(_ref) {
       sectionData: sectionData,
       isMultiSelectable: isMultiSelectable,
       ref: actionListItemRef
-    }) : /*#__PURE__*/jsx(BaseBox, _objectSpread$62(_objectSpread$62(_objectSpread$62({
+    }) : /*#__PURE__*/jsx(BaseBox, _objectSpread$63(_objectSpread$63(_objectSpread$63({
       id: "".concat(dropdownBaseId, "-actionlist")
     }, makeAccessible({
       role: actionListContainerRole,
@@ -4170,13 +4187,13 @@ var getBaseActionListItemStyles = function getBaseActionListItemStyles(props) {
   };
 };
 
-function ownKeys$62(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$61(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$62(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$62(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$63(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$62(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$63(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$63(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledActionListItem = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledActionListItemweb__StyledActionListItem",
   componentId: "sc-1okp9u4-0"
 })(function (props) {
-  return _objectSpread$61(_objectSpread$61({}, getBaseActionListItemStyles(props)), {}, {
+  return _objectSpread$62(_objectSpread$62({}, getBaseActionListItemStyles(props)), {}, {
     // fixes bug in web where the if rendered as a link it's messing the styles
     display: 'block',
     // Web-specific styles
@@ -4195,8 +4212,8 @@ var StyledActionListItem = /*#__PURE__*/styled(BaseBox).withConfig({
 // Created this as an array so I can reuse it for runtime validation
 var validBoxAsValues = ['div', 'section', 'footer', 'header', 'main', 'aside', 'nav', 'span', 'label'];
 
-function ownKeys$61(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$60(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$61(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$61(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$62(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$61(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$62(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$62(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var validateBackgroundString = function validateBackgroundString(stringBackgroundColorValue) {
   {
     if (!stringBackgroundColorValue.startsWith('surface.background') && !stringBackgroundColorValue.startsWith('brand.') && stringBackgroundColorValue !== 'transparent') {
@@ -4402,7 +4419,7 @@ var _Box = function _Box(props, ref) {
   }, [props.as]);
   return /*#__PURE__*/jsx(BaseBox
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  , _objectSpread$60(_objectSpread$60({
+  , _objectSpread$61(_objectSpread$61({
     ref: ref
   }, metaAttribute({
     name: MetaConstants.Box,
@@ -4552,8 +4569,8 @@ var getStyledProps = function getStyledProps(props) {
   return removeUndefinedStyledProps(makeStyledProps(props));
 };
 
-function ownKeys$60(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$5$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$60(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$60(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$61(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$60(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$61(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$61(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
  *
  * ## How to add Styled Props to components?
@@ -4616,16 +4633,16 @@ function _objectSpread$5$(target) { for (var i = 1; i < arguments.length; i++) {
  */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var useStyledProps = function useStyledProps(props) {
   var styledPropsStyles = getStyledProps(props);
-  var styledPropsCSSObject = useMemoizedStyles(_objectSpread$5$(_objectSpread$5$({}, styledPropsStyles), {}, {
+  var styledPropsCSSObject = useMemoizedStyles(_objectSpread$60(_objectSpread$60({}, styledPropsStyles), {}, {
     theme: props.theme
   }));
   var styledPropsWithoutUndefined = removeUndefinedStyledProps(styledPropsCSSObject);
   return styledPropsWithoutUndefined;
 };
 
-var _excluded$4Z = ["orientation", "dividerStyle", "variant", "thickness", "contrast", "height", "width", "testID"];
-function ownKeys$5$(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$5_(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5$(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5$(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$4_ = ["orientation", "dividerStyle", "variant", "thickness", "contrast", "height", "width", "testID"];
+function ownKeys$60(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$5$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$60(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$60(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledDivider = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-8k3avj-0"
@@ -4638,7 +4655,7 @@ var StyledDivider = /*#__PURE__*/styled(BaseBox).withConfig({
     isDividerHorizontal = _ref.isDividerHorizontal,
     width = _ref.width,
     height = _ref.height;
-  return _objectSpread$5_((_objectSpread2 = {}, _defineProperty$1(_objectSpread2, "".concat(borderPosition, "Style"), dividerStyle), _defineProperty$1(_objectSpread2, "".concat(borderPosition, "Width"), makeBorderSize(theme.border.width[thickness])), _objectSpread2), isDividerHorizontal ? {
+  return _objectSpread$5$((_objectSpread2 = {}, _defineProperty$1(_objectSpread2, "".concat(borderPosition, "Style"), dividerStyle), _defineProperty$1(_objectSpread2, "".concat(borderPosition, "Width"), makeBorderSize(theme.border.width[thickness])), _objectSpread2), isDividerHorizontal ? {
     flexGrow: 1,
     width: width
   } : {
@@ -4660,12 +4677,12 @@ var Divider = function Divider(_ref2) {
     height = _ref2.height,
     width = _ref2.width,
     testID = _ref2.testID,
-    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4Z);
+    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4_);
   var isDividerHorizontal = orientation === 'horizontal';
   var borderPosition = isDividerHorizontal ? 'borderBottom' : 'borderLeft';
   var colorContrast = "".concat(contrast, "Contrast");
   var borderColor = _defineProperty$1({}, "".concat(borderPosition, "Color"), "surface.border.".concat(variant, ".").concat(colorContrast));
-  return /*#__PURE__*/jsx(StyledDivider, _objectSpread$5_(_objectSpread$5_(_objectSpread$5_({
+  return /*#__PURE__*/jsx(StyledDivider, _objectSpread$5$(_objectSpread$5$(_objectSpread$5$({
     borderWidth: "none",
     borderPosition: borderPosition,
     isDividerHorizontal: isDividerHorizontal,
@@ -4679,8 +4696,8 @@ var Divider = function Divider(_ref2) {
   })), getStyledProps(styledProps)));
 };
 
-function ownKeys$5_(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$5Z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5_(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$5$(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$5_(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5$(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5$(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getBaseTextStyles = function getBaseTextStyles(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'surface.text.normal.lowContrast' : _ref$color,
@@ -4718,7 +4735,7 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
       };
     }
   }
-  return _objectSpread$5Z({
+  return _objectSpread$5_({
     color: textColor,
     fontFamily: themeFontFamily,
     fontSize: themeFontSize,
@@ -4732,10 +4749,10 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
   }, truncateStyles);
 };
 
-var _excluded$4Y = ["color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "numberOfLines", "lineHeight", "textAlign"],
+var _excluded$4Z = ["color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "numberOfLines", "lineHeight", "textAlign"],
   _excluded2$2 = ["id", "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "lineHeight", "as", "textAlign", "children", "truncateAfterLines", "className", "style", "accessibilityProps", "componentName", "testID"];
-function ownKeys$5Z(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$5Y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5Z(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5Z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$5_(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$5Z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5_(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
   shouldForwardProp: omitPropsFromHTML,
   displayName: 'StyledBaseText'
@@ -4749,9 +4766,9 @@ var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
     numberOfLines = _ref.numberOfLines,
     lineHeight = _ref.lineHeight,
     textAlign = _ref.textAlign,
-    props = _objectWithoutProperties$1(_ref, _excluded$4Y);
+    props = _objectWithoutProperties$1(_ref, _excluded$4Z);
   var styledPropsCSSObject = useStyledProps(props);
-  return _objectSpread$5Y(_objectSpread$5Y({}, getBaseTextStyles({
+  return _objectSpread$5Z(_objectSpread$5Z({}, getBaseTextStyles({
     color: color,
     fontFamily: fontFamily,
     fontSize: fontSize,
@@ -4785,7 +4802,7 @@ var BaseText = function BaseText(_ref2) {
     componentName = _ref2$componentName === void 0 ? MetaConstants.BaseText : _ref2$componentName,
     testID = _ref2.testID,
     styledProps = _objectWithoutProperties$1(_ref2, _excluded2$2);
-  return /*#__PURE__*/jsx(StyledBaseText, _objectSpread$5Y(_objectSpread$5Y(_objectSpread$5Y(_objectSpread$5Y({}, getStyledProps(styledProps)), {}, {
+  return /*#__PURE__*/jsx(StyledBaseText, _objectSpread$5Z(_objectSpread$5Z(_objectSpread$5Z(_objectSpread$5Z({}, getStyledProps(styledProps)), {}, {
     color: color,
     fontFamily: fontFamily,
     fontSize: fontSize,
@@ -4823,11 +4840,11 @@ var useValidateAsProp = function useValidateAsProp(_ref) {
   }, [as, componentName, validAsValues]);
 };
 
-var _excluded$4X = ["as", "size", "type", "contrast", "color", "children", "testID", "textAlign", "textDecorationLine"];
-function ownKeys$5Y(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$5X(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5Y(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5Y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var validAsValues$2 = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-var getProps$3 = function getProps(_ref) {
+var _excluded$4Y = ["as", "size", "type", "contrast", "color", "children", "testID", "textAlign", "textDecorationLine"];
+function ownKeys$5Z(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$5Y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5Z(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5Z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var validAsValues$3 = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+var getProps$4 = function getProps(_ref) {
   var as = _ref.as,
     size = _ref.size,
     type = _ref.type,
@@ -4884,13 +4901,13 @@ var Title = function Title(_ref2) {
     testID = _ref2.testID,
     textAlign = _ref2.textAlign,
     textDecorationLine = _ref2.textDecorationLine,
-    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4X);
+    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4Y);
   useValidateAsProp({
     componentName: 'Title',
     as: as,
-    validAsValues: validAsValues$2
+    validAsValues: validAsValues$3
   });
-  var props = getProps$3({
+  var props = getProps$4({
     as: as,
     size: size,
     type: type,
@@ -4898,7 +4915,7 @@ var Title = function Title(_ref2) {
     color: color,
     testID: testID
   });
-  return /*#__PURE__*/jsx(BaseText, _objectSpread$5X(_objectSpread$5X(_objectSpread$5X({}, props), {}, {
+  return /*#__PURE__*/jsx(BaseText, _objectSpread$5Y(_objectSpread$5Y(_objectSpread$5Y({}, props), {}, {
     textAlign: textAlign,
     textDecorationLine: textDecorationLine
   }, getStyledProps(styledProps)), {}, {
@@ -4906,17 +4923,17 @@ var Title = function Title(_ref2) {
   }));
 };
 
-var _excluded$4W = ["as", "variant", "size", "type", "weight", "contrast", "color", "children", "testID", "textAlign", "textDecorationLine"];
-function ownKeys$5X(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$5W(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5X(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5X(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var validAsValues$1 = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+var _excluded$4X = ["as", "variant", "size", "type", "weight", "contrast", "color", "children", "testID", "textAlign", "textDecorationLine"];
+function ownKeys$5Y(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$5X(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5Y(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5Y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var validAsValues$2 = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
 /**
  * Conditionally changing props based on variant.
  * Overloads or union gives wrong intellisense.
  */
 
-var getProps$2 = function getProps(_ref) {
+var getProps$3 = function getProps(_ref) {
   var as = _ref.as,
     variant = _ref.variant,
     size = _ref.size,
@@ -4993,13 +5010,13 @@ var Heading = function Heading(_ref2) {
     testID = _ref2.testID,
     textAlign = _ref2.textAlign,
     textDecorationLine = _ref2.textDecorationLine,
-    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4W);
+    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4X);
   useValidateAsProp({
     componentName: 'Heading',
     as: as,
-    validAsValues: validAsValues$1
+    validAsValues: validAsValues$2
   });
-  var props = getProps$2({
+  var props = getProps$3({
     as: as,
     variant: variant,
     size: size,
@@ -5009,7 +5026,7 @@ var Heading = function Heading(_ref2) {
     contrast: contrast,
     testID: testID
   });
-  return /*#__PURE__*/jsx(BaseText, _objectSpread$5W(_objectSpread$5W(_objectSpread$5W({}, props), {}, {
+  return /*#__PURE__*/jsx(BaseText, _objectSpread$5X(_objectSpread$5X(_objectSpread$5X({}, props), {}, {
     textAlign: textAlign,
     textDecorationLine: textDecorationLine
   }, getStyledProps(styledProps)), {}, {
@@ -5017,10 +5034,10 @@ var Heading = function Heading(_ref2) {
   }));
 };
 
-var _excluded$4V = ["as", "variant", "weight", "size", "type", "contrast", "truncateAfterLines", "children", "color", "testID", "textAlign", "textDecorationLine"];
-function ownKeys$5W(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$5V(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5W(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5W(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var validAsValues = ['p', 'span', 'div', 'abbr', 'figcaption', 'cite', 'q'];
+var _excluded$4W = ["as", "variant", "weight", "size", "type", "contrast", "truncateAfterLines", "children", "color", "testID", "textAlign", "textDecorationLine"];
+function ownKeys$5X(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$5W(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5X(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5X(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var validAsValues$1 = ['p', 'span', 'div', 'abbr', 'figcaption', 'cite', 'q'];
 
 /**
  * Conditionally changing props based on variant.
@@ -5101,8 +5118,8 @@ var _Text = function _Text(_ref2) {
     testID = _ref2.testID,
     textAlign = _ref2.textAlign,
     textDecorationLine = _ref2.textDecorationLine,
-    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4V);
-  var props = _objectSpread$5V({
+    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4W);
+  var props = _objectSpread$5W({
     as: as,
     truncateAfterLines: truncateAfterLines
   }, getTextProps({
@@ -5119,9 +5136,9 @@ var _Text = function _Text(_ref2) {
   useValidateAsProp({
     componentName: 'Text',
     as: as,
-    validAsValues: validAsValues
+    validAsValues: validAsValues$1
   });
-  return /*#__PURE__*/jsx(BaseText, _objectSpread$5V(_objectSpread$5V(_objectSpread$5V({}, props), getStyledProps(styledProps)), {}, {
+  return /*#__PURE__*/jsx(BaseText, _objectSpread$5W(_objectSpread$5W(_objectSpread$5W({}, props), getStyledProps(styledProps)), {}, {
     children: children
   }));
 };
@@ -5130,9 +5147,9 @@ var Text = /*#__PURE__*/assignWithoutSideEffects(_Text, {
   componentId: 'Text'
 });
 
-var _excluded$4U = ["children", "size", "weight", "isHighlighted", "color", "testID"];
-function ownKeys$5V(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$5U(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5V(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5V(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$4V = ["children", "size", "weight", "isHighlighted", "color", "testID"];
+function ownKeys$5W(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$5V(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5W(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5W(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var platformType = getPlatformType();
 var isPlatformWeb = platformType === 'browser' || platformType === 'node';
 var getCodeFontSizeAndLineHeight = function getCodeFontSizeAndLineHeight(size) {
@@ -5227,7 +5244,7 @@ var Code = function Code(_ref2) {
     isHighlighted = _ref2$isHighlighted === void 0 ? true : _ref2$isHighlighted,
     color = _ref2.color,
     testID = _ref2.testID,
-    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4U);
+    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4V);
   var _ref3 = getCodeFontSizeAndLineHeight(size),
     fontSize = _ref3.fontSize,
     lineHeight = _ref3.lineHeight;
@@ -5237,7 +5254,7 @@ var Code = function Code(_ref2) {
       color: color
     });
   }, [isHighlighted, color]);
-  return /*#__PURE__*/jsx(CodeContainer, _objectSpread$5U(_objectSpread$5U(_objectSpread$5U({
+  return /*#__PURE__*/jsx(CodeContainer, _objectSpread$5V(_objectSpread$5V(_objectSpread$5V({
     size: size,
     isHighlighted: isHighlighted,
     as: isPlatformWeb ? 'span' : undefined
@@ -5257,6 +5274,85 @@ var Code = function Code(_ref2) {
   }));
 };
 
+var _excluded$4U = ["as", "size", "type", "contrast", "color", "children", "testID", "textAlign", "textDecorationLine"];
+function ownKeys$5V(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$5U(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5V(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5V(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+var getProps$2 = function getProps(_ref) {
+  var as = _ref.as,
+    size = _ref.size,
+    type = _ref.type,
+    contrast = _ref.contrast,
+    color = _ref.color,
+    testID = _ref.testID;
+  var isPlatformWeb = getPlatformType() === 'browser' || getPlatformType() === 'node';
+  var colorContrast = contrast ? "".concat(contrast, "Contrast") : 'lowContrast';
+  var props = {
+    color: color !== null && color !== void 0 ? color : "surface.text.".concat(type !== null && type !== void 0 ? type : 'normal', ".").concat(colorContrast),
+    fontSize: 1100,
+    fontWeight: 'bold',
+    fontStyle: 'normal',
+    lineHeight: 900,
+    fontFamily: 'text',
+    accessibilityProps: isPlatformWeb ? {} : {
+      role: 'heading'
+    },
+    componentName: 'display',
+    testID: testID
+  };
+  if (size === 'small') {
+    props.fontSize = 1100;
+    props.lineHeight = 900;
+  } else if (size === 'medium') {
+    props.fontSize = 1200;
+    props.lineHeight = 1000;
+  } else if (size === 'large') {
+    props.fontSize = 1300;
+    props.lineHeight = 1100;
+  } else if (size === 'xlarge') {
+    props.fontSize = 1600;
+    props.lineHeight = 1500;
+  }
+  props.as = isPlatformWeb ? 'h1' : undefined;
+  // override the computed `as` prop if user passed an `as` prop
+  props.as = as || props.as;
+  return props;
+};
+var Display = function Display(_ref2) {
+  var as = _ref2.as,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'small' : _ref2$size,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'normal' : _ref2$type,
+    _ref2$contrast = _ref2.contrast,
+    contrast = _ref2$contrast === void 0 ? 'low' : _ref2$contrast,
+    color = _ref2.color,
+    children = _ref2.children,
+    testID = _ref2.testID,
+    textAlign = _ref2.textAlign,
+    textDecorationLine = _ref2.textDecorationLine,
+    styledProps = _objectWithoutProperties$1(_ref2, _excluded$4U);
+  useValidateAsProp({
+    componentName: 'Display',
+    as: as,
+    validAsValues: validAsValues
+  });
+  var props = getProps$2({
+    as: as,
+    size: size,
+    type: type,
+    contrast: contrast,
+    color: color,
+    testID: testID
+  });
+  return /*#__PURE__*/jsx(BaseText, _objectSpread$5U(_objectSpread$5U(_objectSpread$5U({}, props), {}, {
+    textAlign: textAlign,
+    textDecorationLine: textDecorationLine
+  }, getStyledProps(styledProps)), {}, {
+    children: children
+  }));
+};
+
 /**
  * Checks if `value` is `undefined`.
  *
@@ -18681,6 +18777,7 @@ function _objectSpread$13(target) { for (var i = 1; i < arguments.length; i++) {
 var Indicators = function Indicators(props) {
   var _useCarouselContext = useCarouselContext(),
     carouselId = _useCarouselContext.carouselId,
+    isResponsive = _useCarouselContext.isResponsive,
     visibleItems = _useCarouselContext.visibleItems;
   return /*#__PURE__*/jsx(BaseBox, _objectSpread$13(_objectSpread$13({
     display: "flex",
@@ -18691,7 +18788,6 @@ var Indicators = function Indicators(props) {
     label: 'Slides'
   })), {}, {
     children: new Array(props.totalItems).fill(0).map(function (_, idx) {
-      var isResponsive = visibleItems === 'autofit';
       var _visibleItems = visibleItems;
       if (isResponsive) {
         _visibleItems = 1;
@@ -18852,6 +18948,28 @@ var getCarouselItemId = function getCarouselItemId(containerId, index) {
 
 var CAROUSEL_AUTOPLAY_INTERVAL = 6000;
 
+/**
+ * Hook to run an effect on dependencies change after the component has *mounted*.
+ * Core difference from `useEffect` is this will trigger effects after the very first render.
+ *
+ * @param effectCallback `useEffect` callback
+ * @param dependencies `useEffect` dependencies
+ */
+var useDidUpdate = function useDidUpdate(effectCallback, dependencies) {
+  var isMounted = useRef(false);
+  useEffect(function () {
+    if (isMounted.current) {
+      // run normally after the very first render / mount
+      return effectCallback();
+    }
+    isMounted.current = true;
+    return undefined;
+
+    // we don't want to rerun every time effectCallback changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+};
+
 function ownKeys$11(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$10(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$11(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$11(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Controls = function Controls(_ref) {
@@ -18927,7 +19045,6 @@ var CarouselContainer = /*#__PURE__*/styled(BaseBox).withConfig({
     flexWrap: 'nowrap',
     scrollSnapType: 'x mandatory',
     scrollSnapPointsY: "repeat(100%)",
-    scrollBehavior: 'smooth',
     msOverflowStyle: 'none' /* IE and Edge */,
     scrollbarWidth: 'none' /* Firefox */,
 
@@ -19148,6 +19265,8 @@ var Carousel = function Carousel(_ref4) {
 
   // Sync the indicators with scroll
   React__default.useEffect(function () {
+    // do not sync indicators on desktop, we are already in sync because we can only use the next/prev buttons
+    if (!isMobile) return;
     var carouselContainer = containerRef.current;
     if (!carouselContainer) return;
     var handleScroll = debounce_1(function () {
@@ -19176,7 +19295,7 @@ var Carousel = function Carousel(_ref4) {
     return function () {
       carouselContainer === null || carouselContainer === void 0 ? void 0 : carouselContainer.removeEventListener('scroll', handleScroll);
     };
-  }, [_visibleItems, isResponsive, shouldAddStartEndSpacing]);
+  }, [_visibleItems, isMobile, isResponsive, shouldAddStartEndSpacing]);
 
   // auto play
   useInterval(function () {
@@ -19188,7 +19307,8 @@ var Carousel = function Carousel(_ref4) {
   });
   var carouselContext = React__default.useMemo(function () {
     return {
-      visibleItems: visibleItems,
+      isResponsive: isResponsive,
+      visibleItems: _visibleItems,
       carouselItemWidth: carouselItemWidth,
       carouselContainerRef: containerRef,
       setActiveIndicator: setActiveIndicator,
@@ -19198,8 +19318,8 @@ var Carousel = function Carousel(_ref4) {
       startEndMargin: startEndMargin,
       shouldAddStartEndSpacing: shouldAddStartEndSpacing
     };
-  }, [id, startEndMargin, visibleItems, carouselItemWidth, totalNumberOfSlides, activeSlide, shouldAddStartEndSpacing]);
-  React__default.useEffect(function () {
+  }, [id, startEndMargin, isResponsive, _visibleItems, carouselItemWidth, totalNumberOfSlides, activeSlide, shouldAddStartEndSpacing]);
+  useDidUpdate(function () {
     onChange === null || onChange === void 0 ? void 0 : onChange(activeSlide);
   }, [activeSlide, onChange]);
   return /*#__PURE__*/jsx(CarouselContext.Provider, {
@@ -19302,6 +19422,7 @@ var StyledCarouselItem = /*#__PURE__*/styled(BaseBox).withConfig({
   componentId: "sc-56ppo3-0"
 })(function (_ref) {
   var visibleItems = _ref.visibleItems,
+    isResponsive = _ref.isResponsive,
     shouldAddStartEndSpacing = _ref.shouldAddStartEndSpacing,
     shouldHaveStartSpacing = _ref.shouldHaveStartSpacing,
     shouldHaveEndSpacing = _ref.shouldHaveEndSpacing,
@@ -19311,7 +19432,6 @@ var StyledCarouselItem = /*#__PURE__*/styled(BaseBox).withConfig({
     }),
     matchedDeviceType = _useBreakpoint.matchedDeviceType;
   var isMobile = matchedDeviceType === 'mobile';
-  var isResponsive = visibleItems === 'autofit';
   var gap = isMobile ? theme.spacing[4] : theme.spacing[5];
   var calculatedWidth = "calc(100% / ".concat(visibleItems, " - ").concat(gap, "px * (").concat(visibleItems, " - 1) / ").concat(visibleItems, ")");
   return _objectSpread$$({
@@ -19337,6 +19457,7 @@ var CarouselItem = function CarouselItem(_ref2) {
   var _useCarouselContext = useCarouselContext(),
     totalNumberOfSlides = _useCarouselContext.totalNumberOfSlides,
     visibleItems = _useCarouselContext.visibleItems,
+    isResponsive = _useCarouselContext.isResponsive,
     carouselItemWidth = _useCarouselContext.carouselItemWidth,
     shouldAddStartEndSpacing = _useCarouselContext.shouldAddStartEndSpacing;
   var _useTheme = useTheme(),
@@ -19351,6 +19472,7 @@ var CarouselItem = function CarouselItem(_ref2) {
     id: id,
     isMobile: isMobile,
     "data-slide-index": index,
+    isResponsive: isResponsive,
     visibleItems: visibleItems,
     maxWidth: carouselItemWidth,
     shouldAddStartEndSpacing: shouldAddStartEndSpacing,
@@ -29055,28 +29177,6 @@ var CollapsibleButton = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/forw
   componentId: MetaConstants.CollapsibleButton
 });
 
-/**
- * Hook to run an effect on dependencies change after the component has *mounted*.
- * Core difference from `useEffect` is this will trigger effects after the very first render.
- *
- * @param effectCallback `useEffect` callback
- * @param dependencies `useEffect` dependencies
- */
-var useDidUpdate = function useDidUpdate(effectCallback, dependencies) {
-  var isMounted = useRef(false);
-  useEffect(function () {
-    if (isMounted.current) {
-      // run normally after the very first render / mount
-      return effectCallback();
-    }
-    isMounted.current = true;
-    return undefined;
-
-    // we don't want to rerun every time effectCallback changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, dependencies);
-};
-
 function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
@@ -29563,5 +29663,5 @@ var TooltipInteractiveWrapper = /*#__PURE__*/styled(BaseBox).attrs(function () {
   };
 });
 
-export { Accordion, AccordionItem, ActionList, ActionListItem, ActionListItemAsset, ActionListItemIcon, ActionListItemText, ActionListSection, ActionListSectionDivider, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetHeader, Box, BoxIcon, BriefcaseIcon, BulkPayoutsIcon, Button, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, Carousel, CarouselItem, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleButton, CollapsibleLink, CommandIcon, CompassIcon, ComponentIds$1 as ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Divider, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, InboxIcon, Indicator, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, List, ListIcon, ListItem, ListItemCode, ListItemLink, ListItemText, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalFooter, ModalHeader, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, QRCodeIcon, Radio, RadioGroup, RadioIcon$1 as RadioIcon, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, TabletIcon, Tag, TagIcon, TargetIcon, Text, TextArea, TextInput, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useActionListContext, useTheme };
+export { Accordion, AccordionItem, ActionList, ActionListItem, ActionListItemAsset, ActionListItemIcon, ActionListItemText, ActionListSection, ActionListSectionDivider, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetHeader, Box, BoxIcon, BriefcaseIcon, BulkPayoutsIcon, Button, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, Carousel, CarouselItem, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleButton, CollapsibleLink, CommandIcon, CompassIcon, ComponentIds$1 as ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, Divider, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, InboxIcon, Indicator, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, List, ListIcon, ListItem, ListItemCode, ListItemLink, ListItemText, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalFooter, ModalHeader, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, QRCodeIcon, Radio, RadioGroup, RadioIcon$1 as RadioIcon, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, TabletIcon, Tag, TagIcon, TargetIcon, Text, TextArea, TextInput, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useActionListContext, useTheme };
 //# sourceMappingURL=index.development.web.js.map