@razorpay/blade 5.1.0 → 5.1.2

package/build/components/index.web.js

@@ -2038,6 +2038,31 @@ var nodeUtil = _nodeUtil.exports;
 /* Node.js helper references. */
 nodeUtil && nodeUtil.isSet;
 
+var metaAttribute = function metaAttribute(name, value) {
+  if (!value) return {};
+  return _defineProperty$1({}, "data-".concat(name), value);
+};
+
+var MetaConstants = {
+  Alert: 'alert',
+  Badge: 'badge',
+  Button: 'button',
+  Checkbox: 'checkbox',
+  CheckboxGroup: 'checkbox-group',
+  Code: 'code',
+  Component: 'blade-component',
+  Counter: 'counter',
+  Icon: 'icon',
+  IconButton: 'icon-button',
+  Indicator: 'indicator',
+  Link: 'link',
+  OTPInput: 'otp-input',
+  Radio: 'radio',
+  RadioGroup: 'radio-group',
+  SkipNav: 'skipnav',
+  Spinner: 'spinner'
+};
+
 var getColorScheme = function getColorScheme() {
   var colorScheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
   // @TODO: create a useMediaQuery hook with an event listener which will subscribe to changes and move all this logic there
@@ -2541,9 +2566,9 @@ var Symbol = _Symbol;
 var symbolProto = Symbol ? Symbol.prototype : undefined;
     symbolProto ? symbolProto.valueOf : undefined;
 
-function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$C(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$C(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$C(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$C(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var accessibilityValue = {
   valueMax: 'aria-valuemax',
@@ -2560,7 +2585,7 @@ var accessibilityState = {
 }; // TODO:
 // accessibilityViewIsModal
 
-var accessibilityMap = _objectSpread$z(_objectSpread$z(_objectSpread$z({}, accessibilityState), accessibilityValue), {}, {
+var accessibilityMap = _objectSpread$C(_objectSpread$C(_objectSpread$C({}, accessibilityState), accessibilityValue), {}, {
   activeDescendant: 'aria-activedescendant',
   atomic: 'aria-atomic',
   autoComplete: 'aria-autocomplete',
@@ -3469,9 +3494,9 @@ var fontFamily = {
   code: 'monospace'
 };
 
-function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$B(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$B(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var fontWeight = {
   regular: 400,
   bold: 700
@@ -3479,7 +3504,7 @@ var fontWeight = {
 ({
   onDesktop: {
     fonts: {
-      family: _objectSpread$y({}, fontFamily),
+      family: _objectSpread$B({}, fontFamily),
       size: {
         10: 9,
         25: 10,
@@ -3496,7 +3521,7 @@ var fontWeight = {
         900: 36,
         1000: 40
       },
-      weight: _objectSpread$y({}, fontWeight)
+      weight: _objectSpread$B({}, fontWeight)
     },
     lineHeights: {
       s: 16,
@@ -3513,7 +3538,7 @@ var fontWeight = {
   },
   onMobile: {
     fonts: {
-      family: _objectSpread$y({}, fontFamily),
+      family: _objectSpread$B({}, fontFamily),
       size: {
         10: 10,
         25: 11,
@@ -3530,7 +3555,7 @@ var fontWeight = {
         900: 29,
         1000: 29
       },
-      weight: _objectSpread$y({}, fontWeight)
+      weight: _objectSpread$B({}, fontWeight)
     },
     lineHeights: {
       s: 16,
@@ -3705,9 +3730,9 @@ var Rect = function Rect(_ref) {
   });
 };
 
-function ownKeys$x(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$A(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$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Svg = function Svg(_ref) {
   var children = _ref.children,
@@ -3715,9 +3740,9 @@ var Svg = function Svg(_ref) {
       viewBox = _ref.viewBox,
       width = _ref.width,
       fill = _ref.fill;
-  return /*#__PURE__*/jsx("svg", _objectSpread$x(_objectSpread$x({}, makeAccessible({
+  return /*#__PURE__*/jsx("svg", _objectSpread$A(_objectSpread$A(_objectSpread$A({}, makeAccessible({
     hidden: true
-  })), {}, {
+  })), metaAttribute(MetaConstants.Component, MetaConstants.Icon)), {}, {
     height: height,
     viewBox: viewBox,
     width: width,
@@ -3750,9 +3775,9 @@ var useTheme = function useTheme() {
   return themeContext;
 };
 
-function ownKeys$w(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$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var BladeProvider = function BladeProvider(_ref) {
   var themeTokens = _ref.themeTokens,
@@ -3779,9 +3804,9 @@ var BladeProvider = function BladeProvider(_ref) {
   var onColorMode = "on".concat(toTitleCase(colorScheme));
   var onDeviceType = "on".concat(toTitleCase(matchedDeviceType));
 
-  var theme = _objectSpread$w(_objectSpread$w({}, themeTokens), {}, {
+  var theme = _objectSpread$z(_objectSpread$z({}, themeTokens), {}, {
     colors: themeTokens.colors[onColorMode],
-    shadows: _objectSpread$w(_objectSpread$w({}, themeTokens.shadows), {}, {
+    shadows: _objectSpread$z(_objectSpread$z({}, themeTokens.shadows), {}, {
       color: themeTokens.shadows.color[onColorMode]
     }),
     typography: themeTokens.typography[onDeviceType]
@@ -4967,9 +4992,35 @@ var ExternalLinkIcon = function ExternalLinkIcon(_ref) {
   });
 };
 
-function ownKeys$v(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; }
+var MailIcon = function MailIcon(_ref) {
+  var size = _ref.size,
+      color = _ref.color;
 
-function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  var _useIconProps = useIconProps({
+    size: size,
+    color: color
+  }),
+      height = _useIconProps.height,
+      width = _useIconProps.width,
+      iconColor = _useIconProps.iconColor;
+
+  return /*#__PURE__*/jsx(Svg, {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: /*#__PURE__*/jsx(Path, {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M23 6.01769V18C23 19.6523 21.6523 21 20 21H4C2.34772 21 1 19.6523 1 18V6C1 4.34772 2.34772 3 4 3H20C21.6443 3 22.987 4.33473 22.9999 5.97608C23.0002 5.98996 23.0003 6.00383 23 6.01769ZM3.10659 5.55392C3.27198 5.22691 3.61205 5 4 5H20C20.388 5 20.7281 5.22695 20.8935 5.55401L12.0001 11.7794L3.10659 5.55392ZM3 7.92062V18C3 18.5477 3.45228 19 4 19H20C20.5477 19 21 18.5477 21 18V7.92074L12.5735 13.8193C12.2292 14.0603 11.7709 14.0603 11.4266 13.8193L3 7.92062Z",
+      fill: iconColor
+    })
+  });
+};
+
+function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledIconButtonweb__StyledButton",
   componentId: "sc-1f4cg7d-0"
@@ -5012,13 +5063,13 @@ var StyledIconButton = function StyledIconButton(_ref) {
       size = _ref.size,
       contrast = _ref.contrast,
       accessibilityLabel = _ref.accessibilityLabel;
-  return /*#__PURE__*/jsx(StyledButton, _objectSpread$v(_objectSpread$v({
+  return /*#__PURE__*/jsx(StyledButton, _objectSpread$y(_objectSpread$y(_objectSpread$y({
     onClick: onClick,
     contrast: contrast,
     type: "button"
   }, makeAccessible({
     label: accessibilityLabel
-  })), {}, {
+  })), metaAttribute(MetaConstants.Component, MetaConstants.IconButton)), {}, {
     children: /*#__PURE__*/jsx(Icon, {
       size: size,
       color: "currentColor"
@@ -5206,9 +5257,9 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
 
 var _excluded$3 = ["color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "lineHeight", "textAlign"];
 
-function ownKeys$u(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$x(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$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(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"
@@ -5251,8 +5302,9 @@ var BaseText = function BaseText(_ref2) {
       className = _ref2.className,
       style = _ref2.style,
       _ref2$accessibilityPr = _ref2.accessibilityProps,
-      accessibilityProps = _ref2$accessibilityPr === void 0 ? {} : _ref2$accessibilityPr;
-  return /*#__PURE__*/jsx(StyledBaseText, _objectSpread$u(_objectSpread$u({
+      accessibilityProps = _ref2$accessibilityPr === void 0 ? {} : _ref2$accessibilityPr,
+      componentName = _ref2.componentName;
+  return /*#__PURE__*/jsx(StyledBaseText, _objectSpread$x(_objectSpread$x(_objectSpread$x({
     color: color,
     fontFamily: fontFamily,
     fontSize: fontSize,
@@ -5266,14 +5318,14 @@ var BaseText = function BaseText(_ref2) {
     className: className,
     style: style,
     id: id
-  }, makeAccessible(accessibilityProps)), {}, {
+  }, makeAccessible(accessibilityProps)), metaAttribute(MetaConstants.Component, componentName)), {}, {
     children: children
   }));
 };
 
-function ownKeys$t(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$w(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$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getProps$3 = function getProps(_ref) {
   var size = _ref.size,
@@ -5290,7 +5342,8 @@ var getProps$3 = function getProps(_ref) {
     fontFamily: 'text',
     accessibilityProps: isPlatformWeb ? {} : {
       role: 'heading'
-    }
+    },
+    componentName: 'title'
   };
 
   if (size === 'small') {
@@ -5323,14 +5376,14 @@ var Title = function Title(_ref2) {
     type: type,
     contrast: contrast
   });
-  return /*#__PURE__*/jsx(BaseText, _objectSpread$t(_objectSpread$t({}, props), {}, {
+  return /*#__PURE__*/jsx(BaseText, _objectSpread$w(_objectSpread$w({}, props), {}, {
     children: children
   }));
 };
 
-function ownKeys$s(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$v(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$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getProps$2 = function getProps(_ref) {
   var variant = _ref.variant,
@@ -5349,7 +5402,8 @@ var getProps$2 = function getProps(_ref) {
     fontFamily: 'text',
     accessibilityProps: isPlatformWeb ? {} : {
       role: 'heading'
-    }
+    },
+    componentName: 'heading'
   };
 
   if (variant === 'regular') {
@@ -5401,14 +5455,14 @@ var Heading = function Heading(_ref2) {
     weight: weight,
     contrast: contrast
   });
-  return /*#__PURE__*/jsx(BaseText, _objectSpread$s(_objectSpread$s({}, props), {}, {
+  return /*#__PURE__*/jsx(BaseText, _objectSpread$v(_objectSpread$v({}, props), {}, {
     children: children
   }));
 };
 
-function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getTextProps = function getTextProps(_ref) {
   var variant = _ref.variant,
@@ -5425,7 +5479,8 @@ var getTextProps = function getTextProps(_ref) {
     fontStyle: 'normal',
     lineHeight: 'l',
     fontFamily: 'text',
-    forwardedAs: isPlatformWeb ? 'p' : undefined
+    forwardedAs: isPlatformWeb ? 'p' : undefined,
+    componentName: 'text'
   };
 
   if (variant === 'body') {
@@ -5484,7 +5539,7 @@ var Text = function Text(_ref3) {
       children = _ref3.children,
       color = _ref3.color;
 
-  var props = _objectSpread$r(_objectSpread$r({
+  var props = _objectSpread$u(_objectSpread$u({
     truncateAfterLines: truncateAfterLines
   }, getTextProps({
     variant: variant,
@@ -5496,11 +5551,14 @@ var Text = function Text(_ref3) {
     color: color
   } : {});
 
-  return /*#__PURE__*/jsx(StyledText, _objectSpread$r(_objectSpread$r({}, props), {}, {
+  return /*#__PURE__*/jsx(StyledText, _objectSpread$u(_objectSpread$u({}, props), {}, {
     children: children
   }));
 };
 
+function ownKeys$t(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$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var platformType = getPlatformType();
 var isPlatformWeb = platformType === 'browser' || platformType === 'node';
 
@@ -5560,9 +5618,10 @@ var Code = function Code(_ref) {
   var children = _ref.children,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'small' : _ref$size;
-  return /*#__PURE__*/jsx(CodeContainer, {
+  return /*#__PURE__*/jsx(CodeContainer, _objectSpread$t(_objectSpread$t({
     size: size,
-    as: isPlatformWeb ? 'span' : undefined,
+    as: isPlatformWeb ? 'span' : undefined
+  }, metaAttribute(MetaConstants.Component, MetaConstants.Code)), {}, {
     children: /*#__PURE__*/jsx(BaseText, {
       color: "surface.text.subtle.lowContrast",
       fontFamily: "code",
@@ -5570,7 +5629,7 @@ var Code = function Code(_ref) {
       as: isPlatformWeb ? 'code' : undefined,
       children: children
     })
-  });
+  }));
 };
 
 var getBaseButtonStyles = function getBaseButtonStyles(_ref) {
@@ -5601,16 +5660,16 @@ var getBaseButtonStyles = function getBaseButtonStyles(_ref) {
   };
 };
 
-function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBaseButton = /*#__PURE__*/styled.button.attrs(function (props) {
-  return _objectSpread$q({}, props.accessibilityProps);
+  return _objectSpread$s({}, props.accessibilityProps);
 }).withConfig({
   displayName: "StyledBaseButtonweb__StyledBaseButton",
   componentId: "sc-26bt38-0"
 })(function (props) {
-  return _objectSpread$q(_objectSpread$q({}, getBaseButtonStyles(props)), {}, {
+  return _objectSpread$s(_objectSpread$s({}, getBaseButtonStyles(props)), {}, {
     transitionProperty: 'background-color, border-color, box-shadow',
     transitionTimingFunction: get_1(props.theme.motion, props.motionEasing),
     transitionDuration: castWebType(makeMotionTime(get_1(props.theme.motion, props.motionDuration))),
@@ -5907,9 +5966,9 @@ var SpinningBox = /*#__PURE__*/styled(Box).withConfig({
   return css(["padding:1px;width:max-content;display:inline-flex;animation:", " ", " ", " infinite;"], rotate, makeMotionTime(get_1(theme.motion, motion.duration)), get_1(theme.motion, motion.easing));
 });
 
-function ownKeys$p(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$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getColor = function getColor(_ref) {
   var contrast = _ref.contrast,
@@ -5939,9 +5998,10 @@ var BaseSpinner = function BaseSpinner(_ref2) {
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
 
-  return /*#__PURE__*/jsx(Box, {
-    display: "flex",
-    children: /*#__PURE__*/jsxs(Box, _objectSpread$p(_objectSpread$p({
+  return /*#__PURE__*/jsx(Box, _objectSpread$r(_objectSpread$r({
+    display: "flex"
+  }, metaAttribute(MetaConstants.Component, MetaConstants.Spinner)), {}, {
+    children: /*#__PURE__*/jsxs(Box, _objectSpread$r(_objectSpread$r({
       display: "flex",
       alignItems: "center",
       flexDirection: labelPosition === 'right' ? 'row' : 'column'
@@ -5971,12 +6031,12 @@ var BaseSpinner = function BaseSpinner(_ref2) {
         })
       }) : null]
     }))
-  });
+  }));
 };
 
-function ownKeys$o(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$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getColorToken$1 = function getColorToken(_ref) {
   var property = _ref.property,
@@ -6220,8 +6280,8 @@ var BaseButton = function BaseButton(_ref4) {
       motionDuration = _getProps.motionDuration,
       motionEasing = _getProps.motionEasing;
 
-  return /*#__PURE__*/jsxs(StyledBaseButton, {
-    accessibilityProps: _objectSpread$o({}, makeAccessible({
+  return /*#__PURE__*/jsxs(StyledBaseButton, _objectSpread$q(_objectSpread$q({
+    accessibilityProps: _objectSpread$q({}, makeAccessible({
       role: 'button',
       label: accessibilityLabel
     })),
@@ -6247,7 +6307,8 @@ var BaseButton = function BaseButton(_ref4) {
     borderWidth: borderWidth,
     borderRadius: borderRadius,
     motionDuration: motionDuration,
-    motionEasing: motionEasing,
+    motionEasing: motionEasing
+  }, metaAttribute(MetaConstants.Component, MetaConstants.Button)), {}, {
     children: [isLoading ? /*#__PURE__*/jsx(Box, {
       display: "flex",
       justifyContent: "center",
@@ -6297,7 +6358,7 @@ var BaseButton = function BaseButton(_ref4) {
         })
       }) : null]
     })]
-  });
+  }));
 };
 
 var getStyledLinkStyles = function getStyledLinkStyles(_ref) {
@@ -6312,16 +6373,16 @@ var getStyledLinkStyles = function getStyledLinkStyles(_ref) {
   };
 };
 
-function ownKeys$n(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$p(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$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledLink$1 = /*#__PURE__*/styled.button.attrs(function (props) {
-  return _objectSpread$n({}, props.accessibilityProps);
+  return _objectSpread$p({}, props.accessibilityProps);
 }).withConfig({
   displayName: "StyledBaseLinkweb__StyledLink",
   componentId: "sc-1yj1z8h-0"
 })(function (props) {
-  return _objectSpread$n(_objectSpread$n({}, getStyledLinkStyles(props)), {}, {
+  return _objectSpread$p(_objectSpread$p({}, getStyledLinkStyles(props)), {}, {
     display: 'inline-block',
     borderRadius: makeBorderSize(props.theme.border.radius.small),
     transitionProperty: 'box-shadow',
@@ -6378,9 +6439,9 @@ var useInteraction = function useInteraction() {
 
 var _excluded$2 = ["currentInteraction", "setCurrentInteraction"];
 
-function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getColorToken = function getColorToken(_ref) {
   var variant = _ref.variant,
@@ -6534,8 +6595,8 @@ var BaseLink = function BaseLink(_ref3) {
     }
   };
 
-  return /*#__PURE__*/jsx(StyledLink$1, _objectSpread$m(_objectSpread$m({}, syntheticEvents), {}, {
-    accessibilityProps: _objectSpread$m({}, makeAccessible({
+  return /*#__PURE__*/jsx(StyledLink$1, _objectSpread$o(_objectSpread$o(_objectSpread$o({}, syntheticEvents), metaAttribute(MetaConstants.Component, MetaConstants.Link)), {}, {
+    accessibilityProps: _objectSpread$o({}, makeAccessible({
       role: role,
       label: accessibilityLabel,
       disabled: disabled
@@ -6589,9 +6650,9 @@ var BaseLink = function BaseLink(_ref3) {
   }));
 };
 
-function ownKeys$l(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$n(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$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var isReactNative$3 = getPlatformType() === 'react-native'; // Need extra wrappers on React Native only for alignment
 
 var SecondaryActionWrapper = isReactNative$3 ? Box : Fragment;
@@ -6693,7 +6754,7 @@ var Alert = function Alert(_ref) {
   }
 
   var secondaryAction = actions !== null && actions !== void 0 && actions.secondary ? /*#__PURE__*/jsx(SecondaryActionWrapper, {
-    children: /*#__PURE__*/jsx(BaseLink, _objectSpread$l(_objectSpread$l({
+    children: /*#__PURE__*/jsx(BaseLink, _objectSpread$n(_objectSpread$n({
       size: textSize,
       contrast: contrast,
       intent: intent
@@ -6726,7 +6787,7 @@ var Alert = function Alert(_ref) {
       icon: CloseIcon
     })
   }) : null;
-  var a11yProps = makeAccessible(_objectSpread$l({
+  var a11yProps = makeAccessible(_objectSpread$n({
     // React Native doesn't has status as role
     role: isReactNative$3 || intent === 'negative' || intent === 'notice' ? 'alert' : 'status'
   }, intent === 'notice' && {
@@ -6737,12 +6798,12 @@ var Alert = function Alert(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/jsxs(StyledAlert, _objectSpread$l(_objectSpread$l({
+  return /*#__PURE__*/jsxs(StyledAlert, _objectSpread$n(_objectSpread$n(_objectSpread$n({
     intent: intent,
     contrastType: contrastType,
     isFullWidth: isFullWidth,
     isBorderless: isBorderless
-  }, a11yProps), {}, {
+  }, a11yProps), metaAttribute(MetaConstants.Component, MetaConstants.Alert)), {}, {
     children: [icon, /*#__PURE__*/jsxs(Box, {
       flex: 1,
       paddingLeft: isBorderless ? 'spacing.4' : 'spacing.3',
@@ -6790,21 +6851,21 @@ var getStyledBadgeStyles = function getStyledBadgeStyles(_ref) {
   };
 };
 
-function ownKeys$k(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$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeweb__StyledBadge",
   componentId: "sc-1svn4tv-0"
 })(function (props) {
-  return _objectSpread$k(_objectSpread$k({}, getStyledBadgeStyles(props)), {}, {
+  return _objectSpread$m(_objectSpread$m({}, getStyledBadgeStyles(props)), {}, {
     width: 'fit-content'
   });
 });
 
-function ownKeys$j(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$l(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$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var isFeedbackVariant = function isFeedbackVariant(variant) {
   var feedbackVariants = ['information', 'negative', 'neutral', 'notice', 'positive'];
@@ -6860,10 +6921,11 @@ var Badge = function Badge(_ref2) {
       iconColor = _getColorProps.iconColor,
       textColor = _getColorProps.textColor;
 
-  return /*#__PURE__*/jsx(StyledBadge, {
+  return /*#__PURE__*/jsx(StyledBadge, _objectSpread$l(_objectSpread$l({
     backgroundColor: backgroundColor,
     size: size,
-    platform: platform,
+    platform: platform
+  }, metaAttribute(MetaConstants.Component, MetaConstants.Badge)), {}, {
     children: /*#__PURE__*/jsxs(Box, {
       paddingRight: horizontalPadding$1[size],
       paddingLeft: horizontalPadding$1[size],
@@ -6881,7 +6943,7 @@ var Badge = function Badge(_ref2) {
           color: iconColor,
           size: iconSize[size]
         })
-      }) : null, /*#__PURE__*/jsx(Text, _objectSpread$j(_objectSpread$j({}, size === 'small' ? {
+      }) : null, /*#__PURE__*/jsx(Text, _objectSpread$l(_objectSpread$l({}, size === 'small' ? {
         variant: 'caption'
       } : {
         variant: 'body',
@@ -6894,12 +6956,12 @@ var Badge = function Badge(_ref2) {
         children: children
       }))]
     })
-  });
+  }));
 };
 
-function ownKeys$i(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$k(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$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Button = function Button(_ref) {
   var children = _ref.children,
@@ -6920,7 +6982,7 @@ var Button = function Button(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
       accessibilityLabel = _ref.accessibilityLabel;
-  return /*#__PURE__*/jsx(BaseButton, _objectSpread$i(_objectSpread$i({}, icon ? {
+  return /*#__PURE__*/jsx(BaseButton, _objectSpread$k(_objectSpread$k({}, icon ? {
     icon: icon,
     children: children
   } : {
@@ -6966,21 +7028,21 @@ var getStyledCounterStyles = function getStyledCounterStyles(_ref) {
   };
 };
 
-function ownKeys$h(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$j(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$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledCounter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledCounterweb__StyledCounter",
   componentId: "sc-1itt9w6-0"
 })(function (props) {
-  return _objectSpread$h(_objectSpread$h({}, getStyledCounterStyles(props)), {}, {
+  return _objectSpread$j(_objectSpread$j({}, getStyledCounterStyles(props)), {}, {
     width: 'fit-content'
   });
 });
 
-function ownKeys$g(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$i(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$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getColorProps = function getColorProps(_ref) {
   var _ref$intent = _ref.intent,
@@ -7036,7 +7098,7 @@ var Counter = function Counter(_ref2) {
     backgroundColor: backgroundColor,
     size: size,
     platform: platform,
-    children: /*#__PURE__*/jsx(Box, {
+    children: /*#__PURE__*/jsx(Box, _objectSpread$i(_objectSpread$i({
       paddingRight: horizontalPadding[size],
       paddingLeft: horizontalPadding[size],
       paddingTop: verticalPadding[size],
@@ -7045,15 +7107,16 @@ var Counter = function Counter(_ref2) {
       flexDirection: "row",
       justifyContent: "center",
       alignItems: "center",
-      overflow: "hidden",
-      children: /*#__PURE__*/jsx(Text, _objectSpread$g(_objectSpread$g({}, textSizes[size]), {}, {
+      overflow: "hidden"
+    }, metaAttribute(MetaConstants.Component, MetaConstants.Counter)), {}, {
+      children: /*#__PURE__*/jsx(Text, _objectSpread$i(_objectSpread$i({}, textSizes[size]), {}, {
         type: "normal",
         weight: "regular",
         truncateAfterLines: 1,
         color: textColor,
         children: content
       }))
-    })
+    }))
   });
 };
 
@@ -7185,9 +7248,9 @@ var CheckboxIconWrapper = /*#__PURE__*/styled.div.withConfig({
   return getCheckboxIconWrapperStyles(props);
 });
 
-function ownKeys$f(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$h(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$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var fadeIn = /*#__PURE__*/keyframes(["from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}"]);
 var fadeOut$1 = /*#__PURE__*/keyframes(["from{transform:scale(1);opacity:1;}to{transform:scale(.6);opacity:0;}"]);
 var AnimatedFade$1 = /*#__PURE__*/styled.div.withConfig({
@@ -7213,7 +7276,7 @@ var Fade$1 = function Fade(_ref2) {
   var animation = show === undefined ? null : show ? enter : exit;
   return /*#__PURE__*/jsx(AnimatedFade$1, {
     animationType: animation,
-    style: _objectSpread$f({
+    style: _objectSpread$h({
       opacity: show ? 1 : 0
     }, styles),
     children: children
@@ -7436,9 +7499,9 @@ var useFormId = function useFormId(prefix) {
   };
 };
 
-function ownKeys$e(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$g(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$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * indeterminate is not a HTML input element prop,
@@ -7512,7 +7575,7 @@ var useCheckbox = function useCheckbox(_ref) {
       errorTextId = _useFormId.errorTextId,
       helpTextId = _useFormId.helpTextId;
 
-  var accessibilityProps = makeAccessible(_objectSpread$e(_objectSpread$e({
+  var accessibilityProps = makeAccessible(_objectSpread$g(_objectSpread$g({
     role: 'checkbox',
     required: Boolean(isRequired),
     invalid: Boolean(hasError),
@@ -7527,7 +7590,7 @@ var useCheckbox = function useCheckbox(_ref) {
   if (isReactNative) {
     return {
       state: state,
-      inputProps: _objectSpread$e({
+      inputProps: _objectSpread$g({
         onPress: handleOnChange,
         name: name,
         value: value
@@ -7542,7 +7605,7 @@ var useCheckbox = function useCheckbox(_ref) {
       errorTextId: errorTextId,
       helpTextId: helpTextId
     },
-    inputProps: _objectSpread$e({
+    inputProps: _objectSpread$g({
       ref: inputRef,
       onChange: handleOnChange,
       type: 'checkbox',
@@ -7822,9 +7885,9 @@ var SelectorSupportText = function SelectorSupportText(_ref) {
   });
 };
 
-function ownKeys$d(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$f(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$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var variants = {
   "default": {
     background: {
@@ -7863,13 +7926,13 @@ var StyledInput = /*#__PURE__*/styled.input.withConfig({
       isChecked = _ref2.isChecked,
       isDisabled = _ref2.isDisabled,
       hasError = _ref2.hasError;
-  return _objectSpread$d(_objectSpread$d({}, screenReaderStyles), {}, {
+  return _objectSpread$f(_objectSpread$f({}, screenReaderStyles), {}, {
     '&:focus + div': {
       // TODO: Replace with focus outline token
       outline: '1px solid white',
       boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400])
     },
-    '&:hover + div, &:focus + div': _objectSpread$d({}, getHoverStyles({
+    '&:hover + div, &:focus + div': _objectSpread$f({}, getHoverStyles({
       theme: theme,
       isChecked: isChecked,
       isDisabled: isDisabled,
@@ -7883,14 +7946,16 @@ var SelectorInput = function SelectorInput(_ref3) {
       isChecked = _ref3.isChecked,
       isDisabled = _ref3.isDisabled,
       hasError = _ref3.hasError;
-  return /*#__PURE__*/jsx(StyledInput, _objectSpread$d({
+  return /*#__PURE__*/jsx(StyledInput, _objectSpread$f({
     isChecked: isChecked,
     isDisabled: isDisabled,
     hasError: hasError
   }, inputProps));
 };
 
-/* eslint-disable @typescript-eslint/no-shadow */
+function ownKeys$e(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$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Checkbox = function Checkbox(_ref) {
   var _groupProps$state, _groupProps$size;
@@ -7982,7 +8047,7 @@ var Checkbox = function Checkbox(_ref) {
       ids = _useCheckbox.ids,
       inputProps = _useCheckbox.inputProps;
 
-  return /*#__PURE__*/jsxs(Box, {
+  return /*#__PURE__*/jsxs(Box, _objectSpread$e(_objectSpread$e({}, metaAttribute(MetaConstants.Component, MetaConstants.Checkbox)), {}, {
     children: [/*#__PURE__*/jsx(SelectorLabel, {
       inputProps: state.isReactNative ? inputProps : {},
       children: /*#__PURE__*/jsxs(Box, {
@@ -8021,7 +8086,7 @@ var Checkbox = function Checkbox(_ref) {
       errorTextId: ids === null || ids === void 0 ? void 0 : ids.errorTextId,
       type: validationState === 'error' ? 'error' : 'help'
     })]
-  });
+  }));
 };
 
 var useCheckboxGroup = function useCheckboxGroup(_ref) {
@@ -8124,27 +8189,28 @@ var useCheckboxGroup = function useCheckboxGroup(_ref) {
   };
 };
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var SelectorGroupField = function SelectorGroupField(_ref) {
   var children = _ref.children,
       labelledBy = _ref.labelledBy,
       position = _ref.position,
       _ref$accessibilityRol = _ref.accessibilityRole,
-      accessibilityRole = _ref$accessibilityRol === void 0 ? 'group' : _ref$accessibilityRol;
+      accessibilityRole = _ref$accessibilityRol === void 0 ? 'group' : _ref$accessibilityRol,
+      componentName = _ref.componentName;
   var isReactNative = getPlatformType() === 'react-native';
   var labelPosition = position === 'top' ? 'column' : 'row';
   if (isReactNative) labelPosition = 'column';
   var role = accessibilityRole === 'group' && isReactNative ? undefined : accessibilityRole;
-  return /*#__PURE__*/jsx(Box, _objectSpread$c(_objectSpread$c({
+  return /*#__PURE__*/jsx(Box, _objectSpread$d(_objectSpread$d(_objectSpread$d({
     display: "flex",
     flexDirection: labelPosition
   }, makeAccessible({
     role: role,
     labelledBy: labelledBy
-  })), {}, {
+  })), metaAttribute(MetaConstants.Component, componentName)), {}, {
     children: children
   }));
 };
@@ -8199,6 +8265,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     children: /*#__PURE__*/jsxs(SelectorGroupField, {
       position: labelPosition,
       labelledBy: ids.labelId,
+      componentName: "checkbox-group",
       children: [/*#__PURE__*/jsx(FormLabel, {
         as: "span",
         necessityIndicator: necessityIndicator,
@@ -8226,9 +8293,9 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
   });
 };
 
-function ownKeys$b(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$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getVisualContainerStyles = function getVisualContainerStyles() {
   return {
@@ -8341,7 +8408,7 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
   var hasTrailingVisuals = hasInteractionElement || hasSuffix || hasTrailingIcon;
 
   if (hasLeadingVisuals) {
-    return /*#__PURE__*/jsxs(Box, _objectSpread$b(_objectSpread$b({}, getVisualContainerStyles()), {}, {
+    return /*#__PURE__*/jsxs(Box, _objectSpread$c(_objectSpread$c({}, getVisualContainerStyles()), {}, {
       children: [LeadingIcon ? /*#__PURE__*/jsx(Box, {
         paddingLeft: "spacing.4",
         display: "flex",
@@ -8349,7 +8416,7 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
           size: "medium",
           color: isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast'
         })
-      }) : null, hasPrefix ? /*#__PURE__*/jsx(Box, _objectSpread$b(_objectSpread$b({}, getPrefixStyles({
+      }) : null, hasPrefix ? /*#__PURE__*/jsx(Box, _objectSpread$c(_objectSpread$c({}, getPrefixStyles({
         hasLeadingIcon: hasLeadingIcon,
         hasPrefix: hasPrefix
       })), {}, {
@@ -8366,15 +8433,15 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
   }
 
   if (hasTrailingVisuals) {
-    return /*#__PURE__*/jsxs(Box, _objectSpread$b(_objectSpread$b({}, getVisualContainerStyles()), {}, {
-      children: [hasInteractionElement ? /*#__PURE__*/jsx(Box, _objectSpread$b(_objectSpread$b({}, getInteractionElementStyles({
+    return /*#__PURE__*/jsxs(Box, _objectSpread$c(_objectSpread$c({}, getVisualContainerStyles()), {}, {
+      children: [hasInteractionElement ? /*#__PURE__*/jsx(Box, _objectSpread$c(_objectSpread$c({}, getInteractionElementStyles({
         hasTrailingIcon: hasTrailingIcon,
         hasInteractionElement: hasInteractionElement,
         hasSuffix: hasSuffix
       })), {}, {
         display: "flex",
         children: interactionElement
-      })) : null, hasSuffix ? /*#__PURE__*/jsx(Box, _objectSpread$b(_objectSpread$b({}, getSuffixStyles({
+      })) : null, hasSuffix ? /*#__PURE__*/jsx(Box, _objectSpread$c(_objectSpread$c({}, getSuffixStyles({
         hasTrailingIcon: hasTrailingIcon,
         hasSuffix: hasSuffix
       })), {}, {
@@ -8400,9 +8467,9 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
   return null;
 };
 
-function ownKeys$a(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$b(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getTextStyles = function getTextStyles(_ref) {
   var variant = _ref.variant,
@@ -8411,7 +8478,7 @@ var getTextStyles = function getTextStyles(_ref) {
       size = _ref.size,
       contrast = _ref.contrast,
       theme = _ref.theme;
-  return getBaseTextStyles(_objectSpread$a(_objectSpread$a({}, getTextProps({
+  return getBaseTextStyles(_objectSpread$b(_objectSpread$b({}, getTextProps({
     variant: variant,
     type: type,
     weight: weight,
@@ -8422,9 +8489,9 @@ var getTextStyles = function getTextStyles(_ref) {
   }));
 };
 
-function ownKeys$9(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$a(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getInputBackgroundAndBorderStyles = function getInputBackgroundAndBorderStyles(_ref) {
   var theme = _ref.theme,
       isHovered = _ref.isHovered,
@@ -8492,7 +8559,7 @@ var getBaseInputStyles = function getBaseInputStyles(_ref2) {
       hasTrailingIcon = _getInputVisualsToBeR.hasTrailingIcon;
 
   var isReactNative = getPlatformType() === 'react-native';
-  return _objectSpread$9(_objectSpread$9({}, getTextStyles({
+  return _objectSpread$a(_objectSpread$a({}, getTextStyles({
     size: 'medium',
     variant: 'body',
     type: isDisabled ? 'placeholder' : 'subtle',
@@ -8516,14 +8583,14 @@ var getBaseInputStyles = function getBaseInputStyles(_ref2) {
 
 var _excluded$1 = ["name", "isDisabled", "isRequired", "maxCharacters", "handleOnFocus", "handleOnChange", "handleOnBlur", "handleOnInput", "handleOnKeyDown", "keyboardType", "keyboardReturnKeyType", "autoCompleteSuggestionType", "accessibilityProps", "setCurrentInteraction", "numberOfLines", "type"];
 
-function ownKeys$8(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$9(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBaseNativeInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledBaseInputweb__StyledBaseNativeInput",
   componentId: "hsusrk-0"
 })(function (props) {
-  return _objectSpread$8(_objectSpread$8({}, getBaseInputStyles({
+  return _objectSpread$9(_objectSpread$9({}, getBaseInputStyles({
     isDisabled: props.disabled,
     theme: props.theme,
     validationState: props.validationState,
@@ -8536,7 +8603,7 @@ var StyledBaseNativeInput = /*#__PURE__*/styled.input.withConfig({
   })), {}, {
     outline: 'none',
     border: 'none',
-    '::placeholder': _objectSpread$8(_objectSpread$8({}, getTextStyles({
+    '::placeholder': _objectSpread$9(_objectSpread$9({}, getTextStyles({
       size: 'medium',
       variant: 'body',
       type: 'placeholder',
@@ -8588,7 +8655,7 @@ var StyledBaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       type = _ref.type,
       props = _objectWithoutProperties(_ref, _excluded$1);
 
-  return /*#__PURE__*/jsx(StyledBaseNativeInput, _objectSpread$8(_objectSpread$8({
+  return /*#__PURE__*/jsx(StyledBaseNativeInput, _objectSpread$9(_objectSpread$9({
     ref: ref,
     name: name,
     type: type === 'telephone' ? 'tel' : type,
@@ -8675,20 +8742,20 @@ var BaseInputAnimatedBorder = function BaseInputAnimatedBorder(_ref2) {
 
 var _excluded = ["children", "validationState", "currentInteraction", "isLabelLeftPositioned", "isTextArea"];
 
-function ownKeys$7(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$8(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBaseInputWrapper = /*#__PURE__*/styled(Box).withConfig({
   displayName: "BaseInputWrapper__StyledBaseInputWrapper",
   componentId: "sc-27jk75-0"
 })(function (props) {
-  return _objectSpread$7(_objectSpread$7({}, getInputBackgroundAndBorderStyles({
+  return _objectSpread$8(_objectSpread$8({}, getInputBackgroundAndBorderStyles({
     theme: props.theme,
     isFocused: props.currentInteraction === 'active',
     isDisabled: props.isDisabled,
     validationState: props.validationState
   })), {}, {
-    '&:hover': getPlatformType() === 'react-native' ? undefined : _objectSpread$7(_objectSpread$7({}, getInputBackgroundAndBorderStyles({
+    '&:hover': getPlatformType() === 'react-native' ? undefined : _objectSpread$8(_objectSpread$8({}, getInputBackgroundAndBorderStyles({
       theme: props.theme,
       isHovered: true,
       isFocused: props.currentInteraction === 'active',
@@ -8699,7 +8766,7 @@ var StyledBaseInputWrapper = /*#__PURE__*/styled(Box).withConfig({
       transitionDuration: castWebType(makeMotionTime(props.theme.motion.duration.xquick)),
       transitionTimingFunction: castWebType(props.theme.motion.easing.standard.effective)
     }),
-    ':focus-within': getPlatformType() === 'react-native' ? undefined : _objectSpread$7({}, getInputBackgroundAndBorderStyles({
+    ':focus-within': getPlatformType() === 'react-native' ? undefined : _objectSpread$8({}, getInputBackgroundAndBorderStyles({
       theme: props.theme,
       isFocused: props.currentInteraction === 'active',
       isDisabled: props.isDisabled,
@@ -8716,7 +8783,7 @@ var BaseInputWrapper = function BaseInputWrapper(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/jsxs(Fragment$1, {
-    children: [/*#__PURE__*/jsx(StyledBaseInputWrapper, _objectSpread$7(_objectSpread$7({
+    children: [/*#__PURE__*/jsx(StyledBaseInputWrapper, _objectSpread$8(_objectSpread$8({
       display: "flex",
       flexDirection: "row",
       width: "100%",
@@ -8733,6 +8800,9 @@ var BaseInputWrapper = function BaseInputWrapper(_ref) {
   });
 };
 
+function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var autoCompleteSuggestionTypeValues = ['none', 'name', 'email', 'username', 'password', 'newPassword', 'oneTimeCode', 'telephone', 'postalCode', 'countryName', 'creditCardNumber', 'creditCardCSC', 'creditCardExpiry', 'creditCardExpiryMonth', 'creditCardExpiryYear'];
 
 var useInput = function useInput(_ref) {
@@ -8934,6 +9004,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref9, ref) {
       trailingFooterSlot = _ref9.trailingFooterSlot,
       numberOfLines = _ref9.numberOfLines,
       id = _ref9.id,
+      componentName = _ref9.componentName,
       accessibilityLabel = _ref9.accessibilityLabel,
       hideLabelText = _ref9.hideLabelText,
       hideFormHint = _ref9.hideFormHint;
@@ -8997,7 +9068,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref9, ref) {
 
   var isTextArea = as === 'textarea';
   var isReactNative = getPlatformType() === 'react-native';
-  return /*#__PURE__*/jsxs(Box, {
+  return /*#__PURE__*/jsxs(Box, _objectSpread$7(_objectSpread$7({}, metaAttribute(MetaConstants.Component, componentName)), {}, {
     children: [/*#__PURE__*/jsxs(Box, {
       display: "flex",
       flexDirection: isLabelLeftPositioned ? 'row' : 'column',
@@ -9089,7 +9160,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref9, ref) {
         }), trailingFooterSlot === null || trailingFooterSlot === void 0 ? void 0 : trailingFooterSlot(inputValue)]
       })
     })]
-  });
+  }));
 });
 
 var CharacterCounter = function CharacterCounter(_ref) {
@@ -9274,6 +9345,7 @@ var TextInput = function TextInput(_ref2) {
 
   return /*#__PURE__*/jsx(BaseInput, _objectSpread$6({
     id: "textinput",
+    componentName: "textinput",
     ref: textInputRef,
     label: label,
     labelPosition: labelPosition,
@@ -9403,6 +9475,7 @@ var PasswordInput = function PasswordInput(_ref) {
   };
 
   return /*#__PURE__*/jsx(BaseInput, {
+    componentName: "password-input",
     id: "password-field",
     label: label,
     labelPosition: labelPosition,
@@ -9503,6 +9576,7 @@ var TextArea = function TextArea(_ref) {
   return /*#__PURE__*/jsx(BaseInput, {
     as: "textarea",
     id: "textarea",
+    componentName: "textarea",
     autoFocus: autoFocus,
     ref: inputRef,
     label: label,
@@ -9835,7 +9909,7 @@ var OTPInput = function OTPInput(_ref) {
     return inputs;
   };
 
-  return /*#__PURE__*/jsxs(Fragment$1, {
+  return /*#__PURE__*/jsxs(Box, _objectSpread$5(_objectSpread$5({}, metaAttribute(MetaConstants.Component, MetaConstants.OTPInput)), {}, {
     children: [/*#__PURE__*/jsxs(Box, {
       display: "flex",
       flexDirection: isLabelLeftPositioned ? 'row' : 'column',
@@ -9866,7 +9940,7 @@ var OTPInput = function OTPInput(_ref) {
         successTextId: successTextId
       })
     })]
-  });
+  }));
 };
 
 var Circle = function Circle(_ref) {
@@ -9936,11 +10010,11 @@ var Indicator = function Indicator(_ref) {
   }, isWeb && {
     role: 'status'
   }));
-  return /*#__PURE__*/jsxs(Box, _objectSpread$4(_objectSpread$4({
+  return /*#__PURE__*/jsxs(Box, _objectSpread$4(_objectSpread$4(_objectSpread$4({
     display: "flex",
     flexDirection: "row",
     alignItems: "center"
-  }, a11yProps), {}, {
+  }, a11yProps), metaAttribute(MetaConstants.Component, MetaConstants.Indicator)), {}, {
     children: [/*#__PURE__*/jsxs(Svg, {
       width: dimensions.svgSize,
       height: dimensions.svgSize,
@@ -10649,6 +10723,7 @@ var RadioGroup = function RadioGroup(_ref) {
       position: labelPosition,
       labelledBy: ids.labelId,
       accessibilityRole: isReactNative ? 'radiogroup' : 'group',
+      componentName: "radio-group",
       children: [/*#__PURE__*/jsx(FormLabel, {
         as: "span",
         necessityIndicator: necessityIndicator,
@@ -10712,14 +10787,14 @@ var SkipNavLink = function SkipNavLink(_ref2) {
 var SkipNavContent = function SkipNavContent(_ref3) {
   var _ref3$id = _ref3.id,
       id = _ref3$id === void 0 ? fallbackId : _ref3$id;
-  return /*#__PURE__*/jsx("div", _objectSpread({
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     tabIndex: -1,
     id: id,
     style: {
       outline: 0
     }
-  }, testID('skipnav-content')));
+  }, testID('skipnav-content')), metaAttribute(MetaConstants.Component, MetaConstants.SkipNav)));
 };
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, Counter, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, Indicator, InfoIcon, Link, LinkIcon, LockIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, UsersIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, Counter, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, Indicator, InfoIcon, Link, LinkIcon, LockIcon, MailIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, UsersIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
 //# sourceMappingURL=index.web.js.map