@razorpay/blade 8.10.1 → 8.10.3

package/build/components/index.web.js

@@ -5,9 +5,11 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import styled, { ThemeProvider, css, keyframes } from 'styled-components';
 import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
-import { FloatingDelayGroup, FloatingOverlay, useFloating, FloatingFocusManager, shift, flip, offset, arrow, autoUpdate, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingPortal, FloatingArrow } from '@floating-ui/react';
+import { FloatingDelayGroup, detectOverflow, useFloating, FloatingOverlay, FloatingFocusManager, shift, flip, offset, arrow, autoUpdate, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingPortal, FloatingArrow } from '@floating-ui/react';
 import _toConsumableArray$1 from '@babel/runtime/helpers/toConsumableArray';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import { createPortal } from 'react-dom';
@@ -2097,14 +2099,14 @@ var MetaConstants = {
   VisuallyHidden: 'visually-hidden'
 };
 
-function ownKeys$5R(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 ownKeys$5S(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$5Q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5R(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5R(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5R(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5S(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5S(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$5Q(_objectSpread$5Q({}, name ? _defineProperty$2({}, "data-".concat(MetaConstants.Component), name) : {}), testID ? _defineProperty$2({}, "data-testid", testID) : {});
+  return _objectSpread$5R(_objectSpread$5R({}, name ? _defineProperty$2({}, "data-".concat(MetaConstants.Component), name) : {}), testID ? _defineProperty$2({}, "data-testid", testID) : {});
 };
 
 var getColorScheme = function getColorScheme() {
@@ -2637,9 +2639,9 @@ var isValidAllowedChildren = function isValidAllowedChildren(component, id) {
   return getComponentId(component) === id;
 };
 
-function ownKeys$5Q(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 ownKeys$5R(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$5P(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5Q(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5Q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5Q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5R(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5R(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var accessibilityValue = {
   valueMax: 'aria-valuemax',
@@ -2656,7 +2658,7 @@ var accessibilityState = {
 }; // TODO:
 // accessibilityViewIsModal
 
-var accessibilityMap = _objectSpread$5P(_objectSpread$5P(_objectSpread$5P({}, accessibilityState), accessibilityValue), {}, {
+var accessibilityMap = _objectSpread$5Q(_objectSpread$5Q(_objectSpread$5Q({}, accessibilityState), accessibilityValue), {}, {
   activeDescendant: 'aria-activedescendant',
   atomic: 'aria-atomic',
   autoComplete: 'aria-autocomplete',
@@ -3679,6 +3681,19 @@ var assignWithoutSideEffects = function assignWithoutSideEffects(component, sour
   return /*#__PURE__*/Object.assign(component, sourceObj);
 };
 
+// The reason we need to omit them is because styled-component thinks they are valid html attributes
+// because fontFamily, fontWeight etc are valid SVG props.
+// Here are list of valid props which emotion checks https://github.com/emotion-js/emotion/blob/main/packages/is-prop-valid/src/props.js
+// Thus we just need to ignore few of these
+var filterProps = ['cursor', 'display', 'overflow', 'order', 'color', 'fontFamily', 'fontWeight', 'fontSize', 'fontStyle', 'lineHeight', // width height are only accepted in few components,
+// canvas, embed, iframe, input, object, video, img
+// none of them are currently supported in Box
+'width', 'height'];
+
+var omitPropsFromHTML = function omitPropsFromHTML(prop, defaultValidatorFn) {
+  return !filterProps.includes(prop) && defaultValidatorFn(prop);
+};
+
 /**
  * is the role supposed to be `menu`
  */
@@ -3769,9 +3784,9 @@ var componentIds$1 = {
   ActionListSection: 'ActionListSection'
 };
 
-function ownKeys$5P(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 ownKeys$5Q(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$5O(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5P(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5P(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5P(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5Q(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5Q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Returns if there is ActionListItem after ActionListSection
@@ -3838,7 +3853,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$5O(_objectSpread$5O({}, child.props), {}, {
+        foundSection === null || foundSection === void 0 ? void 0 : foundSection.data.push(_objectSpread$5P(_objectSpread$5P({}, child.props), {}, {
           _index: currentIndex
         }));
       } else {
@@ -3846,7 +3861,7 @@ var getActionListProperties = function getActionListProperties(children) {
         sectionData.push({
           title: currentSection,
           hideDivider: hideDivider,
-          data: [_objectSpread$5O(_objectSpread$5O({}, child.props), {}, {
+          data: [_objectSpread$5P(_objectSpread$5P({}, child.props), {}, {
             _index: currentIndex
           })]
         });
@@ -3985,9 +4000,9 @@ var fontFamily = {
   code: 'monospace'
 };
 
-function ownKeys$5O(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 ownKeys$5P(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$5N(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5O(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5O(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5O(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5P(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5P(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var fontWeight = {
   regular: 400,
   bold: 700
@@ -3995,7 +4010,7 @@ var fontWeight = {
 ({
   onDesktop: {
     fonts: {
-      family: _objectSpread$5N({}, fontFamily),
+      family: _objectSpread$5O({}, fontFamily),
       size: {
         10: 9,
         25: 10,
@@ -4012,7 +4027,7 @@ var fontWeight = {
         900: 36,
         1000: 40
       },
-      weight: _objectSpread$5N({}, fontWeight)
+      weight: _objectSpread$5O({}, fontWeight)
     },
     lineHeights: {
       0: 0,
@@ -4032,7 +4047,7 @@ var fontWeight = {
   },
   onMobile: {
     fonts: {
-      family: _objectSpread$5N({}, fontFamily),
+      family: _objectSpread$5O({}, fontFamily),
       size: {
         10: 9,
         25: 10,
@@ -4049,7 +4064,7 @@ var fontWeight = {
         900: 32,
         1000: 32
       },
-      weight: _objectSpread$5N({}, fontWeight)
+      weight: _objectSpread$5O({}, fontWeight)
     },
     lineHeights: {
       0: 0,
@@ -4201,9 +4216,9 @@ var size = {
 
 var _excluded$4T = ["base"];
 
-function ownKeys$5N(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 ownKeys$5O(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$5M(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5N(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5N(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5O(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5O(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * A helper function that returns the exact value for that breakpoint on passing the prop and breakpoint
@@ -4458,7 +4473,7 @@ var getAllMediaQueries = function getAllMediaQueries(props) {
 };
 
 var getBaseBoxStyles = function getBaseBoxStyles(props) {
-  return _objectSpread$5M(_objectSpread$5M({}, getAllProps(props)), getAllMediaQueries(props));
+  return _objectSpread$5N(_objectSpread$5N({}, getAllProps(props)), getAllMediaQueries(props));
 };
 
 var ThemeContext = /*#__PURE__*/createContext({
@@ -4485,9 +4500,9 @@ var useTheme = function useTheme() {
   return themeContext;
 };
 
-function ownKeys$5M(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 ownKeys$5N(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$5L(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5M(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5M(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5N(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5N(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
@@ -4519,7 +4534,7 @@ var useBladeProvider = function useBladeProvider(_ref) {
   var onColorMode = "on".concat(toTitleCase(colorScheme));
   var onDeviceType = "on".concat(toTitleCase(matchedDeviceType));
 
-  var theme = _objectSpread$5L(_objectSpread$5L({}, themeTokens), {}, {
+  var theme = _objectSpread$5M(_objectSpread$5M({}, themeTokens), {}, {
     colors: themeTokens.colors[onColorMode],
     elevation: themeTokens.elevation[onColorMode],
     typography: themeTokens.typography[onDeviceType]
@@ -4633,9 +4648,9 @@ var BladeProvider = function BladeProvider(_ref) {
 
 var _excluded$4S = ["theme", "colorScheme", "children", "className", "id"];
 
-function ownKeys$5L(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 ownKeys$5M(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$5K(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5L(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5L(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5L(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5M(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5M(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
@@ -4676,11 +4691,11 @@ var useMemoizedStyles = function useMemoizedStyles(boxProps) {
   var _useTheme = useTheme(),
       colorScheme = _useTheme.colorScheme;
 
-  var boxPropsMemoDependency = getMemoDependency(_objectSpread$5K(_objectSpread$5K({}, boxProps), {}, {
+  var boxPropsMemoDependency = getMemoDependency(_objectSpread$5L(_objectSpread$5L({}, boxProps), {}, {
     colorScheme: colorScheme
   }));
   var boxPropsCSSObject = React__default.useMemo(function () {
-    return getBaseBoxStyles(_objectSpread$5K(_objectSpread$5K({}, boxProps), {}, {
+    return getBaseBoxStyles(_objectSpread$5L(_objectSpread$5L({}, boxProps), {}, {
       theme: boxProps.theme
     }));
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4689,21 +4704,21 @@ var useMemoizedStyles = function useMemoizedStyles(boxProps) {
 };
 
 var BaseBox = /*#__PURE__*/styled.div.withConfig({
-  displayName: "BaseBoxweb__BaseBox",
-  componentId: "sc-1icfu8j-0"
+  shouldForwardProp: omitPropsFromHTML,
+  displayName: 'BaseBox'
 })(function (props) {
   var cssObject = useMemoizedStyles(props);
   return cssObject;
 });
 
-function ownKeys$5K(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 ownKeys$5L(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$5J(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5K(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5K(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5K(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5L(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5L(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledActionList = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "StyledActionListweb__StyledActionList",
   componentId: "lwcs1w-0"
 })(function (props) {
-  return _objectSpread$5J({}, getBaseActionListStyles(props));
+  return _objectSpread$5K({}, getBaseActionListStyles(props));
 });
 
 var getBaseListBoxWrapperStyles = function getBaseListBoxWrapperStyles(props) {
@@ -4713,16 +4728,16 @@ var getBaseListBoxWrapperStyles = function getBaseListBoxWrapperStyles(props) {
   };
 };
 
-function ownKeys$5J(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 ownKeys$5K(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$5I(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5J(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5J(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5J(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5K(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5K(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$5I((_objectSpread2 = {}, _defineProperty$2(_objectSpread2, "& [role=group]:last-child > [role=separator]:last-child", {
+  return _objectSpread$5J((_objectSpread2 = {}, _defineProperty$2(_objectSpread2, "& [role=group]:last-child > [role=separator]:last-child", {
     display: 'none'
   }), _defineProperty$2(_objectSpread2, "overflowY", 'auto'), _objectSpread2), getBaseListBoxWrapperStyles({
     theme: props.theme,
@@ -4766,9 +4781,9 @@ var useBottomSheetAndDropdownGlue = function useBottomSheetAndDropdownGlue() {
   return state;
 };
 
-function ownKeys$5I(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 ownKeys$5J(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$5H(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5I(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5I(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5I(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5J(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5J(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,
@@ -4778,7 +4793,7 @@ var _ActionListBox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var _useBottomSheetContex = useBottomSheetContext(),
       isInBottomSheet = _useBottomSheetContex.isInBottomSheet;
 
-  return /*#__PURE__*/jsx(StyledListBoxWrapper, _objectSpread$5H(_objectSpread$5H({
+  return /*#__PURE__*/jsx(StyledListBoxWrapper, _objectSpread$5I(_objectSpread$5I({
     isInBottomSheet: isInBottomSheet,
     ref: ref
   }, makeAccessible({
@@ -4793,14 +4808,6 @@ var ActionListBox = /*#__PURE__*/assignWithoutSideEffects(_ActionListBox, {
   displayName: 'ActionListBox'
 });
 
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * This software or document includes material copied from or derived from
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html.
- * Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang)
- */
 var componentIds = {
   DropdownOverlay: 'DropdownOverlay',
   Dropdown: 'Dropdown',
@@ -5087,11 +5094,101 @@ var makeInputDisplayValue = function makeInputDisplayValue(selectedIndices, opti
   return "".concat(selectedIndices.length, " items selected");
 };
 
+/**
+ * This object is used for calculating overflows in dropdown overlay.
+ * 400 is used since max-width of dropdown overlay is 400px.
+ */
+var POSITION_THRESHOLDS = {
+  top: -400,
+  bottom: -300,
+  left: -400,
+  right: -400
+};
+/**
+ * This function calculates the position of dropdown overlay with respect to dropdown trigger element.
+ * For non-menus (e.g SelectInput), position is flipped if overflow is on bottom.
+ * For menus (e.g. DropdownButton), position is flipped if overflow is on right or bottom.
+ * Additional spacing is added to clientHeight to provide spacing above the dropdown trigger.
+ */
+
+var getDropdownOverlayPosition = function getDropdownOverlayPosition(_ref) {
+  var position = _ref.overflow,
+      isMenu = _ref.isMenu,
+      triggererEl = _ref.triggererEl;
+  var zeroSpacing = 'spacing.0';
+  var bottom = position.bottom,
+      right = position.right;
+  var newPosition = {
+    left: zeroSpacing
+  };
+
+  if (!isMenu) {
+    if (bottom > POSITION_THRESHOLDS.bottom) {
+      newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[32]), "px");
+    }
+
+    console.log({
+      newPosition: newPosition
+    });
+    return newPosition;
+  }
+
+  if (right > POSITION_THRESHOLDS.right) {
+    newPosition.right = zeroSpacing;
+    newPosition.left = undefined;
+  }
+
+  if (bottom > POSITION_THRESHOLDS.bottom) {
+    newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[20]), "px");
+    newPosition.top = undefined;
+  }
+
+  return newPosition;
+};
+var getDropdownOverflowMiddleware = function getDropdownOverflowMiddleware(_ref2) {
+  var isMenu = _ref2.isMenu,
+      triggererRef = _ref2.triggererRef,
+      setDropdownPosition = _ref2.setDropdownPosition;
+  return {
+    name: 'detectOverflowMiddleware',
+    fn: function fn(state) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var overflow, position;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return detectOverflow(state, {
+                  elementContext: 'reference'
+                });
+
+              case 2:
+                overflow = _context.sent;
+                position = getDropdownOverlayPosition({
+                  overflow: overflow,
+                  isMenu: isMenu,
+                  triggererEl: triggererRef.current
+                });
+                setDropdownPosition(position);
+                return _context.abrupt("return", {});
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    }
+  };
+};
+
 var _excluded$4R = ["isOpen", "setIsOpen", "close", "selectedIndices", "setSelectedIndices", "activeIndex", "setActiveIndex", "shouldIgnoreBlur", "setShouldIgnoreBlur", "isKeydownPressed", "setIsKeydownPressed", "options", "selectionType", "changeCallbackTriggerer", "setChangeCallbackTriggerer", "isControlled", "setControlledValueIndices"];
 
-function ownKeys$5H(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 ownKeys$5I(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$5G(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5H(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5H(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5H(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5I(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5I(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var noop$1 = function noop() {};
 
@@ -5387,7 +5484,7 @@ var useDropdown = function useDropdown() {
     }
   };
 
-  return _objectSpread$5G({
+  return _objectSpread$5H({
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     close: close,
@@ -5414,9 +5511,9 @@ var useDropdown = function useDropdown() {
   }, rest);
 };
 
-function ownKeys$5G(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 ownKeys$5H(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$5F(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5G(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5G(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5G(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5H(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5H(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ActionListContext = /*#__PURE__*/React__default.createContext({
   surfaceLevel: 2
 });
@@ -5526,7 +5623,7 @@ var _ActionList = function _ActionList(_ref) {
       sectionData: sectionData,
       isMultiSelectable: isMultiSelectable,
       ref: actionListItemRef
-    }) : /*#__PURE__*/jsxs(StyledActionList, _objectSpread$5F(_objectSpread$5F(_objectSpread$5F({
+    }) : /*#__PURE__*/jsxs(StyledActionList, _objectSpread$5G(_objectSpread$5G(_objectSpread$5G({
       isInBottomSheet: isInBottomSheet,
       surfaceLevel: surfaceLevel,
       id: "".concat(dropdownBaseId, "-actionlist")
@@ -5571,14 +5668,14 @@ var getBaseActionListItemStyles = function getBaseActionListItemStyles(props) {
   };
 };
 
-function ownKeys$5F(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 ownKeys$5G(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$5E(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5F(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5F(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5F(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5G(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5G(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$5E(_objectSpread$5E({}, getBaseActionListItemStyles(props)), {}, {
+  return _objectSpread$5F(_objectSpread$5F({}, getBaseActionListItemStyles(props)), {}, {
     // fixes bug in web where the if rendered as a link it's messing the styles
     display: 'block',
     // Web-specific styles
@@ -5594,6 +5691,10 @@ var StyledActionListItem = /*#__PURE__*/styled(BaseBox).withConfig({
   });
 });
 
+function ownKeys$5F(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$5E(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5F(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5F(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,
@@ -5607,6 +5708,7 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
       fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
       _ref$textDecorationLi = _ref.textDecorationLine,
       textDecorationLine = _ref$textDecorationLi === void 0 ? 'none' : _ref$textDecorationLi,
+      numberOfLines = _ref.numberOfLines,
       _ref$lineHeight = _ref.lineHeight,
       lineHeight = _ref$lineHeight === void 0 ? 100 : _ref$lineHeight,
       textAlign = _ref.textAlign,
@@ -5616,7 +5718,23 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
   var themeFontSize = makeTypographySize(theme.typography.fonts.size[fontSize]);
   var themeFontWeight = theme.typography.fonts.weight[fontWeight];
   var themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);
-  return {
+  var truncateStyles = {};
+
+  if (numberOfLines !== undefined) {
+    if (isReactNative$4()) {
+      truncateStyles = {};
+    }
+
+    truncateStyles = {
+      overflow: 'hidden',
+      display: '-webkit-box',
+      'line-clamp': "".concat(numberOfLines),
+      '-webkit-line-clamp': "".concat(numberOfLines),
+      '-webkit-box-orient': 'vertical'
+    };
+  }
+
+  return _objectSpread$5E({
     color: textColor,
     fontFamily: themeFontFamily,
     fontSize: themeFontSize,
@@ -5627,7 +5745,7 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
     textAlign: textAlign,
     margin: 0,
     padding: 0
-  };
+  }, truncateStyles);
 };
 
 /**
@@ -5848,15 +5966,15 @@ var useStyledProps = function useStyledProps(props) {
   return styledPropsWithoutUndefined;
 };
 
-var _excluded$4Q = ["color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "lineHeight", "textAlign"],
+var _excluded$4Q = ["color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "numberOfLines", "lineHeight", "textAlign"],
     _excluded2$1 = ["id", "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "lineHeight", "as", "textAlign", "children", "truncateAfterLines", "className", "style", "accessibilityProps", "componentName", "testID"];
 
 function ownKeys$5D(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$5C(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5D(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5D(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
-  displayName: "BaseTextweb__StyledBaseText",
-  componentId: "sc-1ob51ew-0"
+  shouldForwardProp: omitPropsFromHTML,
+  displayName: 'StyledBaseText'
 })(function (_ref) {
   var color = _ref.color,
       fontFamily = _ref.fontFamily,
@@ -5864,6 +5982,7 @@ var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
       fontWeight = _ref.fontWeight,
       fontStyle = _ref.fontStyle,
       textDecorationLine = _ref.textDecorationLine,
+      numberOfLines = _ref.numberOfLines,
       lineHeight = _ref.lineHeight,
       textAlign = _ref.textAlign,
       props = _objectWithoutProperties$1(_ref, _excluded$4Q);
@@ -5876,6 +5995,7 @@ var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
     fontWeight: fontWeight,
     fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
+    numberOfLines: numberOfLines,
     lineHeight: lineHeight,
     textAlign: textAlign,
     theme: props.theme
@@ -5924,14 +6044,27 @@ var BaseText = function BaseText(_ref2) {
   }));
 };
 
-var _excluded$4P = ["size", "type", "contrast", "color", "children", "testID"];
+var useValidateAsProp = function useValidateAsProp(_ref) {
+  var as = _ref.as,
+      componentName = _ref.componentName,
+      validAsValues = _ref.validAsValues;
+  React__default.useEffect(function () {
+    if (as && !validAsValues.includes(as)) {
+      throw new Error("[Blade ".concat(componentName, "]: Invalid `as` prop value - ").concat(as, ". Only ").concat(validAsValues.join(', '), " are accepted"));
+    }
+  }, [as, componentName, validAsValues]);
+};
+
+var _excluded$4P = ["as", "size", "type", "contrast", "color", "children", "testID", "textAlign"];
 
 function ownKeys$5C(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$5B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5C(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5C(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 size = _ref.size,
+  var as = _ref.as,
+      size = _ref.size,
       type = _ref.type,
       contrast = _ref.contrast,
       color = _ref.color,
@@ -5968,13 +6101,16 @@ var getProps$3 = function getProps(_ref) {
     props.fontSize = 1000;
     props.lineHeight = 800;
     props.as = isPlatformWeb ? 'h1' : undefined;
-  }
+  } // override the computed `as` prop if user passed an `as` prop
+
 
+  props.as = as || props.as;
   return props;
 };
 
 var Title = function Title(_ref2) {
-  var _ref2$size = _ref2.size,
+  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,
@@ -5983,35 +6119,45 @@ var Title = function Title(_ref2) {
       color = _ref2.color,
       children = _ref2.children,
       testID = _ref2.testID,
+      textAlign = _ref2.textAlign,
       styledProps = _objectWithoutProperties$1(_ref2, _excluded$4P);
 
+  useValidateAsProp({
+    componentName: 'Title',
+    as: as,
+    validAsValues: validAsValues$2
+  });
   var props = getProps$3({
+    as: as,
     size: size,
     type: type,
     contrast: contrast,
     color: color,
     testID: testID
   });
-  return /*#__PURE__*/jsx(BaseText, _objectSpread$5B(_objectSpread$5B(_objectSpread$5B({}, props), getStyledProps(styledProps)), {}, {
+  return /*#__PURE__*/jsx(BaseText, _objectSpread$5B(_objectSpread$5B(_objectSpread$5B({}, props), {}, {
+    textAlign: textAlign
+  }, getStyledProps(styledProps)), {}, {
     children: children
   }));
 };
 
-var _excluded$4O = ["variant", "size", "type", "weight", "contrast", "color", "children", "testID", "textAlign"];
+var _excluded$4O = ["as", "variant", "size", "type", "weight", "contrast", "color", "children", "testID", "textAlign"];
 
 function ownKeys$5B(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$5A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5B(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5B(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 getProps$2 = function getProps(_ref) {
-  var variant = _ref.variant,
+  var as = _ref.as,
+      variant = _ref.variant,
       size = _ref.size,
       type = _ref.type,
       weight = _ref.weight,
       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),
@@ -6020,9 +6166,9 @@ var getProps$2 = function getProps(_ref) {
     fontStyle: 'normal',
     lineHeight: 300,
     fontFamily: 'text',
-    accessibilityProps: isPlatformWeb ? {} : {
+    accessibilityProps: isReactNative$4() ? {
       role: 'heading'
-    },
+    } : {},
     componentName: 'heading',
     testID: testID
   };
@@ -6031,15 +6177,15 @@ var getProps$2 = function getProps(_ref) {
     if (!size || size === 'small') {
       props.fontSize = 200;
       props.lineHeight = 300;
-      props.as = isPlatformWeb ? 'h6' : undefined;
+      props.as = 'h6';
     } else if (size === 'medium') {
       props.fontSize = 300;
       props.lineHeight = 200;
-      props.as = isPlatformWeb ? 'h5' : undefined;
+      props.as = 'h5';
     } else if (size === 'large') {
       props.fontSize = 400;
       props.lineHeight = 400;
-      props.as = isPlatformWeb ? 'h4' : undefined;
+      props.as = 'h4';
     }
   } else if (variant === 'subheading') {
     if (weight === 'regular') {
@@ -6052,14 +6198,17 @@ var getProps$2 = function getProps(_ref) {
 
     props.fontSize = 75;
     props.lineHeight = 50;
-    props.as = isPlatformWeb ? 'h6' : undefined;
-  }
+    props.as = 'p';
+  } // override the computed `as` prop if user passed an `as` prop
+
 
+  props.as = as || props.as;
   return props;
 };
 
 var Heading = function Heading(_ref2) {
-  var _ref2$variant = _ref2.variant,
+  var as = _ref2.as,
+      _ref2$variant = _ref2.variant,
       variant = _ref2$variant === void 0 ? 'regular' : _ref2$variant,
       size = _ref2.size,
       _ref2$type = _ref2.type,
@@ -6074,7 +6223,13 @@ var Heading = function Heading(_ref2) {
       textAlign = _ref2.textAlign,
       styledProps = _objectWithoutProperties$1(_ref2, _excluded$4O);
 
+  useValidateAsProp({
+    componentName: 'Heading',
+    as: as,
+    validAsValues: validAsValues$1
+  });
   var props = getProps$2({
+    as: as,
     variant: variant,
     size: size,
     type: type,
@@ -6090,11 +6245,12 @@ var Heading = function Heading(_ref2) {
   }));
 };
 
-var _excluded$4N = ["variant", "weight", "size", "type", "contrast", "truncateAfterLines", "children", "color", "testID", "textAlign"];
+var _excluded$4N = ["as", "variant", "weight", "size", "type", "contrast", "truncateAfterLines", "children", "color", "testID", "textAlign"];
 
 function ownKeys$5A(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$5A(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5A(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 getTextProps = function getTextProps(_ref) {
   var variant = _ref.variant,
@@ -6105,7 +6261,6 @@ var getTextProps = function getTextProps(_ref) {
       contrast = _ref.contrast,
       testID = _ref.testID,
       textAlign = _ref.textAlign;
-  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),
@@ -6114,7 +6269,6 @@ var getTextProps = function getTextProps(_ref) {
     fontStyle: 'normal',
     lineHeight: 100,
     fontFamily: 'text',
-    forwardedAs: isPlatformWeb ? 'p' : undefined,
     componentName: 'text',
     testID: testID,
     textAlign: textAlign
@@ -6156,48 +6310,28 @@ var getTextProps = function getTextProps(_ref) {
   return props;
 };
 
-var StyledText = /*#__PURE__*/styled(BaseText).withConfig({
-  displayName: "Text__StyledText",
-  componentId: "wkh56f-0"
-})(function (_ref2) {
-  var truncateAfterLines = _ref2.truncateAfterLines;
-
-  if (truncateAfterLines) {
-    if (getPlatformType() === 'react-native') {
-      return null;
-    }
-
-    return {
-      overflow: 'hidden',
-      display: '-webkit-box',
-      'line-clamp': "".concat(truncateAfterLines),
-      '-webkit-line-clamp': "".concat(truncateAfterLines),
-      '-webkit-box-orient': 'vertical'
-    };
-  }
-
-  return {};
-});
-
-var _Text = function _Text(_ref3) {
-  var _ref3$variant = _ref3.variant,
-      variant = _ref3$variant === void 0 ? 'body' : _ref3$variant,
-      _ref3$weight = _ref3.weight,
-      weight = _ref3$weight === void 0 ? 'regular' : _ref3$weight,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? 'medium' : _ref3$size,
-      _ref3$type = _ref3.type,
-      type = _ref3$type === void 0 ? 'normal' : _ref3$type,
-      _ref3$contrast = _ref3.contrast,
-      contrast = _ref3$contrast === void 0 ? 'low' : _ref3$contrast,
-      truncateAfterLines = _ref3.truncateAfterLines,
-      children = _ref3.children,
-      color = _ref3.color,
-      testID = _ref3.testID,
-      textAlign = _ref3.textAlign,
-      styledProps = _objectWithoutProperties$1(_ref3, _excluded$4N);
+var _Text = function _Text(_ref2) {
+  var _ref2$as = _ref2.as,
+      as = _ref2$as === void 0 ? 'p' : _ref2$as,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'body' : _ref2$variant,
+      _ref2$weight = _ref2.weight,
+      weight = _ref2$weight === void 0 ? 'regular' : _ref2$weight,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 'medium' : _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,
+      truncateAfterLines = _ref2.truncateAfterLines,
+      children = _ref2.children,
+      color = _ref2.color,
+      testID = _ref2.testID,
+      textAlign = _ref2.textAlign,
+      styledProps = _objectWithoutProperties$1(_ref2, _excluded$4N);
 
   var props = _objectSpread$5z({
+    as: as,
     truncateAfterLines: truncateAfterLines
   }, getTextProps({
     variant: variant,
@@ -6210,7 +6344,12 @@ var _Text = function _Text(_ref3) {
     textAlign: textAlign
   }));
 
-  return /*#__PURE__*/jsx(StyledText, _objectSpread$5z(_objectSpread$5z(_objectSpread$5z({}, props), getStyledProps(styledProps)), {}, {
+  useValidateAsProp({
+    componentName: 'Text',
+    as: as,
+    validAsValues: validAsValues
+  });
+  return /*#__PURE__*/jsx(BaseText, _objectSpread$5z(_objectSpread$5z(_objectSpread$5z({}, props), getStyledProps(styledProps)), {}, {
     children: children
   }));
 };
@@ -17439,7 +17578,8 @@ var useBladeInnerRef = function useBladeInnerRef(targetRef, handlers) {
       },
       getBoundingClientRect: function getBoundingClientRect() {
         return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
-      }
+      },
+      clientHeight: element.clientHeight
     };
   }, [innerRef, handlers]);
   return innerRef;
@@ -18654,7 +18794,10 @@ var getBaseButtonStyles = function getBaseButtonStyles(_ref) {
 function ownKeys$16(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$15(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$16(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$16(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledBaseButton = /*#__PURE__*/styled.button.attrs(function (props) {
+var StyledBaseButton = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: omitPropsFromHTML,
+  displayName: 'StyledBaseButton'
+}).attrs(function (props) {
   return _objectSpread$15({}, props.accessibilityProps);
 }).withConfig({
   displayName: "StyledBaseButtonweb__StyledBaseButton",
@@ -19429,7 +19572,10 @@ var getStyledLinkStyles = function getStyledLinkStyles(_ref) {
 function ownKeys$13(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$12(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$13(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$13(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledLink$1 = /*#__PURE__*/styled.button.attrs(function (props) {
+var StyledLink$1 = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: omitPropsFromHTML,
+  displayName: 'StyledLink'
+}).attrs(function (props) {
   return _objectSpread$12({}, props.accessibilityProps);
 }).withConfig({
   displayName: "StyledBaseLinkweb__StyledLink",
@@ -21674,7 +21820,8 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
       isOpen = _useDropdown.isOpen,
       triggererRef = _useDropdown.triggererRef,
       hasLabelOnLeft = _useDropdown.hasLabelOnLeft,
-      dropdownTriggerer = _useDropdown.dropdownTriggerer;
+      dropdownTriggerer = _useDropdown.dropdownTriggerer,
+      setIsOpen = _useDropdown.setIsOpen;
 
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
@@ -21689,7 +21836,29 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
       width = _React$useState4[0],
       setWidth = _React$useState4[1];
 
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      dropdownPosition = _useState2[0],
+      setDropdownPosition = _useState2[1];
+
   var isMenu = dropdownTriggerer !== 'SelectInput';
+
+  var _useFloating = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    strategy: 'absolute',
+    placement: 'bottom-start',
+    elements: {
+      reference: triggererRef.current
+    },
+    middleware: [getDropdownOverflowMiddleware({
+      isMenu: isMenu,
+      triggererRef: triggererRef,
+      setDropdownPosition: setDropdownPosition
+    })]
+  }),
+      refs = _useFloating.refs;
+
   var fadeIn = /*#__PURE__*/css(["animation:", " ", " ", ";"], dropdownFadeIn, makeMotionTime(theme.motion.duration.quick), String(theme.motion.easing.entrance.revealing));
   var fadeOut = /*#__PURE__*/css(["animation:", " ", " ", ";"], dropdownFadeOut, makeMotionTime(theme.motion.duration.quick), String(theme.motion.easing.entrance.revealing));
   React__default.useEffect(function () {
@@ -21745,28 +21914,34 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
       opacity: isOpen ? 1 : 0
     };
   }, [isOpen]);
-  return /*#__PURE__*/jsx(BaseBox, {
-    position: "relative",
-    children: /*#__PURE__*/jsx(StyledDropdownOverlay, _objectSpread$Q(_objectSpread$Q({
-      width: isMenu ? undefined : width // In SelectInput, Overlay should always take width of Input
-      ,
-      minWidth: isMenu ? '240px' : undefined // in SelectInput, we don't want to set maxWidth because it takes width according to the trigger
-      ,
-      maxWidth: isMenu ? '400px' : undefined,
-      left: isMenu ? 'spacing.0' : undefined,
-      right: isMenu ? undefined : 'spacing.0',
-      style: styles,
-      display: castWebType(display),
-      position: "absolute",
-      transition: isOpen ? fadeIn : fadeOut,
-      onAnimationEnd: onAnimationEnd
-    }, metaAttribute({
-      name: MetaConstants.DropdownOverlay,
-      testID: testID
-    })), {}, {
-      children: children
-    }))
-  });
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    jsx(BaseBox, {
+      position: "relative",
+      ref: refs.setFloating,
+      children: /*#__PURE__*/jsx(StyledDropdownOverlay, _objectSpread$Q(_objectSpread$Q({
+        width: isMenu ? 'max-content' : width // In SelectInput, Overlay should always take width of Input
+        ,
+        minWidth: isMenu ? '240px' : undefined // in SelectInput, we don't want to set maxWidth because it takes width according to the trigger
+        ,
+        maxWidth: isMenu ? '400px' : undefined,
+        left: dropdownPosition.left,
+        right: dropdownPosition.right,
+        bottom: dropdownPosition.bottom,
+        style: styles,
+        display: castWebType(display),
+        position: "absolute",
+        transition: isOpen ? fadeIn : fadeOut,
+        onAnimationEnd: onAnimationEnd
+      }, metaAttribute({
+        name: MetaConstants.DropdownOverlay,
+        testID: testID
+      })), {}, {
+        children: children
+      }))
+    })
+  );
 };
 
 var DropdownOverlay = /*#__PURE__*/assignWithoutSideEffects(_DropdownOverlay, {