@razorpay/blade 8.10.0 → 8.10.2

package/build/components/index.web.js

@@ -2097,14 +2097,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 +2637,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 +2656,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 +3679,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 +3782,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 +3851,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 +3859,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 +3998,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 +4008,7 @@ var fontWeight = {
 ({
   onDesktop: {
     fonts: {
-      family: _objectSpread$5N({}, fontFamily),
+      family: _objectSpread$5O({}, fontFamily),
       size: {
         10: 9,
         25: 10,
@@ -4012,7 +4025,7 @@ var fontWeight = {
         900: 36,
         1000: 40
       },
-      weight: _objectSpread$5N({}, fontWeight)
+      weight: _objectSpread$5O({}, fontWeight)
     },
     lineHeights: {
       0: 0,
@@ -4032,7 +4045,7 @@ var fontWeight = {
   },
   onMobile: {
     fonts: {
-      family: _objectSpread$5N({}, fontFamily),
+      family: _objectSpread$5O({}, fontFamily),
       size: {
         10: 9,
         25: 10,
@@ -4049,7 +4062,7 @@ var fontWeight = {
         900: 32,
         1000: 32
       },
-      weight: _objectSpread$5N({}, fontWeight)
+      weight: _objectSpread$5O({}, fontWeight)
     },
     lineHeights: {
       0: 0,
@@ -4201,9 +4214,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 +4471,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 +4498,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 +4532,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 +4646,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 +4689,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 +4702,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 +4726,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 +4779,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 +4791,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({
@@ -5089,9 +5102,9 @@ var makeInputDisplayValue = function makeInputDisplayValue(selectedIndices, opti
 
 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 +5400,7 @@ var useDropdown = function useDropdown() {
     }
   };
 
-  return _objectSpread$5G({
+  return _objectSpread$5H({
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     close: close,
@@ -5414,9 +5427,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 +5539,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 +5584,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 +5607,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 +5624,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 +5634,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 +5661,7 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
     textAlign: textAlign,
     margin: 0,
     padding: 0
-  };
+  }, truncateStyles);
 };
 
 /**
@@ -5848,15 +5882,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 +5898,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 +5911,7 @@ var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
     fontWeight: fontWeight,
     fontStyle: fontStyle,
     textDecorationLine: textDecorationLine,
+    numberOfLines: numberOfLines,
     lineHeight: lineHeight,
     textAlign: textAlign,
     theme: props.theme
@@ -5924,14 +5960,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 +6017,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 +6035,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 +6082,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 +6093,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 +6114,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 +6139,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 +6161,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 +6177,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 +6185,6 @@ var getTextProps = function getTextProps(_ref) {
     fontStyle: 'normal',
     lineHeight: 100,
     fontFamily: 'text',
-    forwardedAs: isPlatformWeb ? 'p' : undefined,
     componentName: 'text',
     testID: testID,
     textAlign: textAlign
@@ -6156,48 +6226,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 +6260,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
   }));
 };
@@ -18654,7 +18709,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 +19487,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",
@@ -19681,6 +19742,7 @@ var _BaseLink = function _BaseLink(_ref3, ref) {
     }
   };
 
+  var asProp = isReactNative$4() ? undefined : 'span';
   return /*#__PURE__*/jsx(StyledLink$1, _objectSpread$11(_objectSpread$11(_objectSpread$11(_objectSpread$11({
     ref: ref
   }, metaAttribute({
@@ -19734,11 +19796,13 @@ var _BaseLink = function _BaseLink(_ref3, ref) {
     hitSlop: hitSlop,
     title: htmlTitle,
     children: /*#__PURE__*/jsxs(BaseBox, {
+      as: asProp,
       display: "flex",
       flexDirection: "row",
       className: "content-container",
       alignItems: "center",
       children: [Icon && iconPosition == 'left' ? /*#__PURE__*/jsx(BaseBox, {
+        as: asProp,
         paddingRight: iconPadding,
         display: "flex",
         alignItems: "center",
@@ -19747,6 +19811,7 @@ var _BaseLink = function _BaseLink(_ref3, ref) {
           size: iconSize
         })
       }) : null, /*#__PURE__*/jsx(BaseText, {
+        as: asProp,
         textDecorationLine: textDecorationLine,
         color: textColor,
         fontSize: fontSize,
@@ -19755,6 +19820,7 @@ var _BaseLink = function _BaseLink(_ref3, ref) {
         fontWeight: "bold",
         children: children
       }), Icon && iconPosition == 'right' ? /*#__PURE__*/jsx(BaseBox, {
+        as: asProp,
         paddingLeft: iconPadding,
         display: "flex",
         alignItems: "center",