@razorpay/blade 10.10.0 → 10.11.0

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

@@ -407,6 +407,8 @@ var getActionListItemRole = function getActionListItemRole(dropdownTriggerer, hr
 var componentIds = {
   ActionList: 'ActionList',
   ActionListItem: 'ActionListItem',
+  ActionListItemBadge: 'ActionListItemBadge',
+  ActionListItemBadgeGroup: 'ActionListItemBadgeGroup',
   ActionListItemAsset: 'ActionListItemAsset',
   ActionListItemIcon: 'ActionListItemIcon',
   ActionListItemText: 'ActionListItemText',
@@ -563,6 +565,7 @@ var getActionListProperties = function getActionListProperties(children) {
 var validateActionListItemProps = function validateActionListItemProps(_ref) {
   _ref.leading;
     _ref.trailing;
+    _ref.titleSuffix;
 };
 var getNormalTextColor = function getNormalTextColor(isDisabled) {
   var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -13954,37 +13957,6 @@ var useActionListContext = function useActionListContext() {
   var context = React__default.useContext(ActionListContext);
   return context;
 };
-/**
- * ### ActionList
- *
- * List of multiple actionable items. Can be used as menu items inside `Dropdown`,
- * `BottomSheet` and as selectable items when combined with `SelectInput`
- *
- * #### Usage
- *
- * ```jsx
- * <Dropdown>
- *  <SelectInput label="Select Action" />
- *  <DropdownOverlay>
- *    <DropdownHeader title="Header Title" />
- *    <ActionList>
- *      <ActionListItem
- *        title="Home"
- *        value="home"
- *        leading={<ActionListItemIcon icon={HomeIcon} />}
- *      />
- *      <ActionListItem
- *        title="Pricing"
- *        value="pricing"
- *        leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
- *      />
- *    </ActionList>
- *    <DropdownFooter><Button>Apply</Button></DropdownFooter>
- *  </DropdownOverlay>
- * </Dropdown>
- * ```
- *
- */
 var _ActionList = function _ActionList(_ref) {
   var children = _ref.children,
     _ref$surfaceLevel = _ref.surfaceLevel,
@@ -14057,6 +14029,38 @@ var _ActionList = function _ActionList(_ref) {
     }))
   });
 };
+
+/**
+ * ### ActionList
+ *
+ * List of multiple actionable items. Can be used as menu items inside `Dropdown`,
+ * `BottomSheet` and as selectable items when combined with `SelectInput`
+ *
+ * #### Usage
+ *
+ * ```jsx
+ * <Dropdown>
+ *  <SelectInput label="Select Action" />
+ *  <DropdownOverlay>
+ *    <DropdownHeader title="Header Title" />
+ *    <ActionList>
+ *      <ActionListItem
+ *        title="Home"
+ *        value="home"
+ *        leading={<ActionListItemIcon icon={HomeIcon} />}
+ *      />
+ *      <ActionListItem
+ *        title="Pricing"
+ *        value="pricing"
+ *        leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
+ *      />
+ *    </ActionList>
+ *    <DropdownFooter><Button>Apply</Button></DropdownFooter>
+ *  </DropdownOverlay>
+ * </Dropdown>
+ * ```
+ *
+ */
 var ActionList = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.memo(_ActionList), {
   displayName: componentIds.ActionList,
   componentId: componentIds.ActionList
@@ -15414,8 +15418,165 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
   });
 };
 
+var getStyledBadgeStyles = function getStyledBadgeStyles(_ref) {
+  var theme = _ref.theme,
+    backgroundColor = _ref.backgroundColor;
+  return {
+    backgroundColor: getIn(theme.colors, backgroundColor),
+    borderRadius: makeBorderSize(theme.border.radius.max),
+    display: 'flex',
+    flexWrap: 'nowrap'
+  };
+};
+
 function ownKeys$1t(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$1s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1t(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var StyledBadge = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "StyledBadgeweb__StyledBadge",
+  componentId: "sc-1svn4tv-0"
+})(function (props) {
+  return _objectSpread$1s(_objectSpread$1s({}, getStyledBadgeStyles(props)), {}, {
+    width: 'fit-content'
+  });
+});
+
+var verticalPadding$1 = {
+  small: 'spacing.0',
+  medium: 'spacing.1',
+  large: 'spacing.2'
+};
+var horizontalPadding$1 = {
+  small: 'spacing.3',
+  medium: 'spacing.3',
+  large: 'spacing.4'
+};
+var iconPadding = {
+  small: 'spacing.1',
+  medium: 'spacing.2',
+  large: 'spacing.2'
+};
+var iconSize = {
+  small: 'xsmall',
+  medium: 'small',
+  large: 'small'
+};
+
+var getStringFromReactText = function getStringFromReactText(childReactText) {
+  if (isEmpty$1(childReactText)) {
+    return undefined;
+  }
+  if (Array.isArray(childReactText)) {
+    return childReactText.join('');
+  }
+  return String(childReactText);
+};
+
+var _excluded$C = ["children", "contrast", "fontWeight", "icon", "size", "variant", "testID"];
+function ownKeys$1s(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$1r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1s(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var isFeedbackVariant$1 = function isFeedbackVariant(variant) {
+  var feedbackVariants = ['information', 'negative', 'neutral', 'notice', 'positive'];
+  return feedbackVariants.includes(variant);
+};
+var getColorProps$1 = function getColorProps(_ref) {
+  var variant = _ref.variant,
+    contrast = _ref.contrast;
+  var props = {
+    iconColor: 'feedback.icon.neutral.lowContrast',
+    textColor: 'feedback.text.neutral.lowContrast',
+    backgroundColor: 'feedback.background.neutral.lowContrast'
+  };
+  if (isFeedbackVariant$1(variant)) {
+    props.iconColor = "feedback.icon.".concat(variant, ".").concat(contrast, "Contrast");
+    props.textColor = "feedback.text.".concat(variant, ".").concat(contrast, "Contrast");
+    props.backgroundColor = "feedback.background.".concat(variant, ".").concat(contrast, "Contrast");
+  } else {
+    props.iconColor = "badge.icon.".concat(variant, ".").concat(contrast, "Contrast");
+    props.textColor = "badge.text.".concat(variant, ".").concat(contrast, "Contrast");
+    props.backgroundColor = "badge.background.".concat(variant, ".").concat(contrast, "Contrast");
+  }
+  return props;
+};
+var _Badge = function _Badge(_ref2) {
+  var children = _ref2.children,
+    _ref2$contrast = _ref2.contrast,
+    contrast = _ref2$contrast === void 0 ? 'low' : _ref2$contrast,
+    _ref2$fontWeight = _ref2.fontWeight,
+    fontWeight = _ref2$fontWeight === void 0 ? 'regular' : _ref2$fontWeight,
+    Icon = _ref2.icon,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'neutral' : _ref2$variant,
+    testID = _ref2.testID,
+    styledProps = _objectWithoutProperties$1(_ref2, _excluded$C);
+  getStringFromReactText(children);
+  var _getColorProps = getColorProps$1({
+      variant: variant,
+      contrast: contrast
+    }),
+    backgroundColor = _getColorProps.backgroundColor,
+    iconColor = _getColorProps.iconColor,
+    textColor = _getColorProps.textColor;
+  var badgeTextSizes = {
+    small: {
+      variant: 'body',
+      size: 'xsmall'
+    },
+    medium: {
+      variant: 'body',
+      size: 'small'
+    },
+    large: {
+      variant: 'body',
+      size: 'small'
+    }
+  };
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread$1r(_objectSpread$1r(_objectSpread$1r({
+    display: isReactNative$4() ? 'flex' : 'inline-flex'
+  }, metaAttribute({
+    name: MetaConstants.Badge,
+    testID: testID
+  })), getStyledProps(styledProps)), {}, {
+    children: /*#__PURE__*/jsx(StyledBadge, {
+      backgroundColor: backgroundColor,
+      size: size,
+      textAlign: 'left',
+      children: /*#__PURE__*/jsxs(BaseBox, {
+        paddingRight: horizontalPadding$1[size],
+        paddingLeft: horizontalPadding$1[size],
+        paddingTop: verticalPadding$1[size],
+        paddingBottom: verticalPadding$1[size],
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
+          paddingRight: Boolean(Icon) ? iconPadding[size] : 'spacing.0',
+          display: "flex",
+          children: /*#__PURE__*/jsx(Icon, {
+            color: iconColor,
+            size: iconSize[size]
+          })
+        }) : null, /*#__PURE__*/jsx(Text, _objectSpread$1r(_objectSpread$1r({}, badgeTextSizes[size]), {}, {
+          type: "normal",
+          weight: fontWeight,
+          truncateAfterLines: 1,
+          color: textColor,
+          children: children
+        }))]
+      })
+    })
+  }));
+};
+var Badge = /*#__PURE__*/assignWithoutSideEffects(_Badge, {
+  displayName: 'Badge',
+  componentId: 'Badge'
+});
+
+function ownKeys$1r(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$1q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1r(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ActionListItemContext = /*#__PURE__*/React__default.createContext({});
 var StyledActionListSectionTitle = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "ActionListItem__StyledActionListSectionTitle",
@@ -15433,7 +15594,7 @@ var _ActionListSection = function _ActionListSection(_ref) {
     _hideDivider = _ref._hideDivider;
   var _useActionListContext = useActionListContext(),
     surfaceLevel = _useActionListContext.surfaceLevel;
-  return /*#__PURE__*/jsxs(BaseBox, _objectSpread$1s(_objectSpread$1s(_objectSpread$1s({}, makeAccessible({
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread$1q(_objectSpread$1q(_objectSpread$1q({}, makeAccessible({
     role: getActionListSectionRole(),
     label: title
   })), {}, {
@@ -15442,7 +15603,7 @@ var _ActionListSection = function _ActionListSection(_ref) {
     name: MetaConstants.ActionListSection,
     testID: testID
   })), {}, {
-    children: [/*#__PURE__*/jsx(StyledActionListSectionTitle, _objectSpread$1s(_objectSpread$1s({}, makeAccessible({
+    children: [/*#__PURE__*/jsx(StyledActionListSectionTitle, _objectSpread$1q(_objectSpread$1q({}, makeAccessible({
       hidden: true
     })), {}, {
       children: /*#__PURE__*/jsx(Text, {
@@ -15451,7 +15612,7 @@ var _ActionListSection = function _ActionListSection(_ref) {
         weight: "bold",
         children: title
       })
-    })), /*#__PURE__*/jsx(BaseBox, _objectSpread$1s(_objectSpread$1s({}, makeAccessible({
+    })), /*#__PURE__*/jsx(BaseBox, _objectSpread$1q(_objectSpread$1q({}, makeAccessible({
       // On web, we just wrap it in another listbox to announce item count properly for particular group.
       // On React Native, we ignore it since `menu` + `group` role will take care of accessibility
       role: isReactNative$4() ? undefined : 'listbox'
@@ -15482,8 +15643,29 @@ var _ActionListItemIcon = function _ActionListItemIcon(_ref2) {
 var ActionListItemIcon = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemIcon, {
   componentId: componentIds.ActionListItemIcon
 });
-var _ActionListItemText = function _ActionListItemText(_ref3) {
+var _ActionListItemBadgeGroup = function _ActionListItemBadgeGroup(_ref3) {
   var children = _ref3.children;
+  return /*#__PURE__*/jsx(Box, {
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    children: children
+  });
+};
+var ActionListItemBadgeGroup = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemBadgeGroup, {
+  componentId: componentIds.ActionListItemBadgeGroup
+});
+var _ActionListItemBadge = function _ActionListItemBadge(props) {
+  return /*#__PURE__*/jsx(Badge, _objectSpread$1q({
+    size: "medium",
+    marginLeft: "spacing.3"
+  }, props));
+};
+var ActionListItemBadge = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemBadge, {
+  componentId: componentIds.ActionListItemBadge
+});
+var _ActionListItemText = function _ActionListItemText(_ref4) {
+  var children = _ref4.children;
   var _React$useContext2 = React__default.useContext(ActionListItemContext),
     isDisabled = _React$useContext2.isDisabled;
   return /*#__PURE__*/jsx(Text, {
@@ -15517,15 +15699,16 @@ var makeActionListItemClickable = function makeActionListItemClickable(clickHand
     onClick: clickHandler
   };
 };
-var _ActionListItemBody = function _ActionListItemBody(_ref4) {
-  var selectionType = _ref4.selectionType,
-    intent = _ref4.intent,
-    description = _ref4.description,
-    isDisabled = _ref4.isDisabled,
-    leading = _ref4.leading,
-    trailing = _ref4.trailing,
-    title = _ref4.title,
-    isSelected = _ref4.isSelected;
+var _ActionListItemBody = function _ActionListItemBody(_ref5) {
+  var selectionType = _ref5.selectionType,
+    intent = _ref5.intent,
+    description = _ref5.description,
+    isDisabled = _ref5.isDisabled,
+    leading = _ref5.leading,
+    trailing = _ref5.trailing,
+    title = _ref5.title,
+    titleSuffix = _ref5.titleSuffix,
+    isSelected = _ref5.isSelected;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs(BaseBox, {
       display: "flex",
@@ -15540,7 +15723,7 @@ var _ActionListItemBody = function _ActionListItemBody(_ref4) {
         children: selectionType === 'multiple' ?
         /*#__PURE__*/
         // Adding aria-hidden because the listbox item in multiselect in itself explains the behaviour so announcing checkbox is unneccesary and just a nice UI tweak for us
-        jsx(ActionListCheckboxWrapper, _objectSpread$1s(_objectSpread$1s({
+        jsx(ActionListCheckboxWrapper, _objectSpread$1q(_objectSpread$1q({
           hasDescription: Boolean(description)
         }, makeAccessible({
           hidden: true
@@ -15552,14 +15735,17 @@ var _ActionListItemBody = function _ActionListItemBody(_ref4) {
             children: null
           })
         })) : leading
-      }), /*#__PURE__*/jsx(BaseBox, {
+      }), /*#__PURE__*/jsxs(BaseBox, {
         paddingLeft: selectionType === 'multiple' || !leading ? 'spacing.0' : 'spacing.3',
         paddingRight: "spacing.3",
-        children: /*#__PURE__*/jsx(Text, {
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "row",
+        children: [/*#__PURE__*/jsx(Text, {
           truncateAfterLines: 1,
           color: intent === 'negative' ? 'feedback.text.negative.lowContrast' : getNormalTextColor(isDisabled),
           children: title
-        })
+        }), titleSuffix]
       }), /*#__PURE__*/jsx(BaseBox, {
         marginLeft: "auto",
         children: trailing
@@ -15633,9 +15819,10 @@ var _ActionListItem = function _ActionListItem(props) {
   React__default.useEffect(function () {
     validateActionListItemProps({
       leading: props.leading,
-      trailing: props.trailing
+      trailing: props.trailing,
+      titleSuffix: props.titleSuffix
     });
-  }, [props.leading, props.trailing]);
+  }, [props.leading, props.trailing, props.titleSuffix]);
   React__default.useEffect(function () {
   }, [props.intent, dropdownTriggerer]);
   return /*#__PURE__*/jsx(ActionListItemContext.Provider, {
@@ -15643,7 +15830,7 @@ var _ActionListItem = function _ActionListItem(props) {
       intent: props.intent,
       isDisabled: props.isDisabled
     },
-    children: /*#__PURE__*/jsx(StyledActionListItem, _objectSpread$1s(_objectSpread$1s(_objectSpread$1s(_objectSpread$1s({
+    children: /*#__PURE__*/jsx(StyledActionListItem, _objectSpread$1q(_objectSpread$1q(_objectSpread$1q(_objectSpread$1q({
       isVisible: hasAutoComplete && filteredValues ? filteredValues.includes(props.value) : true,
       as: !isReactNative$4() ? renderOnWebAs : undefined,
       id: "".concat(dropdownBaseId, "-").concat(props._index),
@@ -15697,6 +15884,7 @@ var _ActionListItem = function _ActionListItem(props) {
         leading: props.leading,
         trailing: props.trailing,
         title: props.title,
+        titleSuffix: props.titleSuffix,
         isSelected: isSelected
       })
     }))
@@ -15748,8 +15936,8 @@ var StyledAlert = /*#__PURE__*/styled(BaseBox).withConfig({
   componentId: "sc-1dcpe4h-0"
 })(getCommonStyles);
 
-function ownKeys$1s(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$1r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1s(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$1q(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$1p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1q(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1q(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"
@@ -15802,7 +15990,7 @@ var StyledIconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     onTouchEnd = _ref.onTouchEnd,
     onTouchStart = _ref.onTouchStart,
     tabIndex = _ref.tabIndex;
-  return /*#__PURE__*/jsx(StyledButton, _objectSpread$1r(_objectSpread$1r(_objectSpread$1r({
+  return /*#__PURE__*/jsx(StyledButton, _objectSpread$1p(_objectSpread$1p(_objectSpread$1p({
     ref: ref,
     onClick: castWebType(onClick),
     contrast: contrast,
@@ -15906,19 +16094,19 @@ var getBaseButtonStyles = function getBaseButtonStyles(_ref) {
   };
 };
 
-function ownKeys$1r(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$1q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1r(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$1p(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$1o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1p(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBaseButton = /*#__PURE__*/styled.button.withConfig({
   shouldForwardProp: omitPropsFromHTML,
   displayName: 'StyledBaseButton'
 }).attrs(function (props) {
-  return _objectSpread$1q({}, props.accessibilityProps);
+  return _objectSpread$1o({}, props.accessibilityProps);
 }).withConfig({
   displayName: "StyledBaseButtonweb__StyledBaseButton",
   componentId: "sc-26bt38-0"
 })(function (props) {
   var styledPropsCSSObject = useStyledProps(props);
-  return _objectSpread$1q(_objectSpread$1q({}, getBaseButtonStyles(props)), {}, {
+  return _objectSpread$1o(_objectSpread$1o({}, getBaseButtonStyles(props)), {}, {
     display: 'inline-flex',
     transitionProperty: 'background-color, border-color, box-shadow',
     transitionTimingFunction: getIn(props.theme.motion, props.motionEasing),
@@ -16187,9 +16375,9 @@ var SpinningBox = /*#__PURE__*/styled(BaseBox).withConfig({
   return css(["padding:1px;width:max-content;display:inline-flex;animation:", " ", " ", " infinite;"], rotate, makeMotionTime(getIn(theme.motion, motion.duration)), getIn(theme.motion, motion.easing));
 });
 
-var _excluded$C = ["label", "labelPosition", "accessibilityLabel", "contrast", "intent", "size", "testID"];
-function ownKeys$1q(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$1p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1q(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$B = ["label", "labelPosition", "accessibilityLabel", "contrast", "intent", "size", "testID"];
+function ownKeys$1o(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$1n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1o(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getColor = function getColor(_ref) {
   var contrast = _ref.contrast,
     intent = _ref.intent,
@@ -16213,14 +16401,14 @@ var BaseSpinner = function BaseSpinner(_ref2) {
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'medium' : _ref2$size,
     testID = _ref2.testID,
-    styledProps = _objectWithoutProperties$1(_ref2, _excluded$C);
+    styledProps = _objectWithoutProperties$1(_ref2, _excluded$B);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread$1p(_objectSpread$1p(_objectSpread$1p({}, metaAttribute({
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread$1n(_objectSpread$1n(_objectSpread$1n({}, metaAttribute({
     name: MetaConstants.Spinner,
     testID: testID
   })), getStyledProps(styledProps)), {}, {
-    children: /*#__PURE__*/jsxs(BaseBox, _objectSpread$1p(_objectSpread$1p({
+    children: /*#__PURE__*/jsxs(BaseBox, _objectSpread$1n(_objectSpread$1n({
       display: "flex",
       alignItems: "center",
       flexDirection: labelPosition === 'right' ? 'row' : 'column'
@@ -16253,19 +16441,9 @@ var BaseSpinner = function BaseSpinner(_ref2) {
   }));
 };
 
-var getStringFromReactText = function getStringFromReactText(childReactText) {
-  if (isEmpty$1(childReactText)) {
-    return undefined;
-  }
-  if (Array.isArray(childReactText)) {
-    return childReactText.join('');
-  }
-  return String(childReactText);
-};
-
-var _excluded$B = ["href", "target", "rel", "variant", "intent", "contrast", "size", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "onClick", "onBlur", "onKeyDown", "type", "children", "testID", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "accessibilityProps", "onTouchEnd", "onTouchStart"];
-function ownKeys$1p(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$1o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1p(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$A = ["href", "target", "rel", "variant", "intent", "contrast", "size", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "onClick", "onBlur", "onKeyDown", "type", "children", "testID", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "accessibilityProps", "onTouchEnd", "onTouchStart"];
+function ownKeys$1n(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$1m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1n(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getRenderElement = function getRenderElement(href) {
   if (isReactNative$4()) {
     return undefined; // as property doesn't work with react native
@@ -16471,7 +16649,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
     accessibilityProps = _ref4.accessibilityProps,
     onTouchEnd = _ref4.onTouchEnd,
     onTouchStart = _ref4.onTouchStart,
-    rest = _objectWithoutProperties$1(_ref4, _excluded$B);
+    rest = _objectWithoutProperties$1(_ref4, _excluded$A);
   var isLink = Boolean(href);
   var childrenString = getStringFromReactText(children);
   // Button cannot be disabled when its rendered as Link
@@ -16524,7 +16702,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
     return getRenderElement(href);
   }, [href]);
   var defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;
-  return /*#__PURE__*/jsxs(StyledBaseButton, _objectSpread$1o(_objectSpread$1o(_objectSpread$1o({
+  return /*#__PURE__*/jsxs(StyledBaseButton, _objectSpread$1m(_objectSpread$1m(_objectSpread$1m({
     ref: ref
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
     // @ts-ignore: On React Native it will always be undefined but TS doesn't understand that
@@ -16533,7 +16711,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
     href: href,
     target: target,
     rel: rel !== null && rel !== void 0 ? rel : defaultRel,
-    accessibilityProps: _objectSpread$1o({}, makeAccessible(_objectSpread$1o({
+    accessibilityProps: _objectSpread$1m({}, makeAccessible(_objectSpread$1m({
       role: isLink ? 'link' : 'button'
     }, accessibilityProps))),
     isLoading: isLoading,
@@ -16639,19 +16817,19 @@ var getStyledLinkStyles = function getStyledLinkStyles(_ref) {
   };
 };
 
-function ownKeys$1o(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$1n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1o(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$1m(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$1l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1m(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledLink$1 = /*#__PURE__*/styled.button.withConfig({
   shouldForwardProp: omitPropsFromHTML,
   displayName: 'StyledLink'
 }).attrs(function (props) {
-  return _objectSpread$1n({}, props.accessibilityProps);
+  return _objectSpread$1l({}, props.accessibilityProps);
 }).withConfig({
   displayName: "StyledBaseLinkweb__StyledLink",
   componentId: "sc-1yj1z8h-0"
 })(function (props) {
   var styledPropsCSSObject = useStyledProps(props);
-  return _objectSpread$1n(_objectSpread$1n({}, getStyledLinkStyles(props)), {}, {
+  return _objectSpread$1l(_objectSpread$1l({}, getStyledLinkStyles(props)), {}, {
     display: 'inline-block',
     borderRadius: makeBorderSize(props.theme.border.radius.small),
     transitionProperty: 'box-shadow',
@@ -16701,10 +16879,10 @@ var useInteraction = function useInteraction() {
   };
 };
 
-var _excluded$A = ["children", "icon", "iconPosition", "isDisabled", "onClick", "onKeyDown", "variant", "href", "target", "rel", "intent", "contrast", "accessibilityProps", "className", "style", "size", "testID", "hitSlop", "htmlTitle", "onBlur", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"],
+var _excluded$z = ["children", "icon", "iconPosition", "isDisabled", "onClick", "onKeyDown", "variant", "href", "target", "rel", "intent", "contrast", "accessibilityProps", "className", "style", "size", "testID", "hitSlop", "htmlTitle", "onBlur", "onFocus", "onMouseLeave", "onMouseMove", "onPointerDown", "onPointerEnter", "onTouchStart", "onTouchEnd"],
   _excluded2 = ["currentInteraction", "setCurrentInteraction"];
-function ownKeys$1n(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$1m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1n(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$1l(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$1k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1l(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getColorToken = function getColorToken(_ref) {
   var variant = _ref.variant,
     intent = _ref.intent,
@@ -16821,7 +16999,7 @@ var _BaseLink = function _BaseLink(_ref3, ref) {
     onPointerEnter = _ref3.onPointerEnter,
     onTouchStart = _ref3.onTouchStart,
     onTouchEnd = _ref3.onTouchEnd,
-    styledProps = _objectWithoutProperties$1(_ref3, _excluded$A);
+    styledProps = _objectWithoutProperties$1(_ref3, _excluded$z);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isVisited = _useState2[0],
@@ -16871,13 +17049,13 @@ var _BaseLink = function _BaseLink(_ref3, ref) {
     }
   };
   var asProp = isReactNative$4() ? undefined : 'span';
-  return /*#__PURE__*/jsx(StyledLink$1, _objectSpread$1m(_objectSpread$1m(_objectSpread$1m(_objectSpread$1m({
+  return /*#__PURE__*/jsx(StyledLink$1, _objectSpread$1k(_objectSpread$1k(_objectSpread$1k(_objectSpread$1k({
     ref: ref
   }, metaAttribute({
     name: MetaConstants.Link,
     testID: testID
   })), {}, {
-    accessibilityProps: _objectSpread$1m({}, makeAccessible(_objectSpread$1m({
+    accessibilityProps: _objectSpread$1k({}, makeAccessible(_objectSpread$1k({
       role: role,
       disabled: disabled
     }, accessibilityProps))),
@@ -16963,9 +17141,9 @@ var BaseLink = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__defaul
   componentId: 'BaseLink'
 });
 
-var _excluded$z = ["description", "title", "isDismissible", "onDismiss", "contrast", "isFullWidth", "intent", "actions", "testID"];
-function ownKeys$1m(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$1l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1m(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$y = ["description", "title", "isDismissible", "onDismiss", "contrast", "isFullWidth", "intent", "actions", "testID"];
+function ownKeys$1k(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$1j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1k(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1k(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
@@ -16991,7 +17169,7 @@ var Alert = function Alert(_ref) {
     intent = _ref$intent === void 0 ? 'neutral' : _ref$intent,
     actions = _ref.actions,
     testID = _ref.testID,
-    styledProps = _objectWithoutProperties$1(_ref, _excluded$z);
+    styledProps = _objectWithoutProperties$1(_ref, _excluded$y);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var _useBreakpoint = useBreakpoint({
@@ -17088,7 +17266,7 @@ var Alert = function Alert(_ref) {
   var secondaryAction = actions !== null && actions !== void 0 && actions.secondary ? /*#__PURE__*/jsx(BaseBox, {
     marginRight: "spacing.4",
     display: isReactNative$3 ? castNativeType('flex') : castWebType('inline-flex'),
-    children: /*#__PURE__*/jsx(BaseLink, _objectSpread$1l(_objectSpread$1l({
+    children: /*#__PURE__*/jsx(BaseLink, _objectSpread$1j(_objectSpread$1j({
       size: textSize,
       contrast: contrast,
       intent: intent
@@ -17125,7 +17303,7 @@ var Alert = function Alert(_ref) {
       icon: CloseIcon
     })
   }) : null;
-  var a11yProps = makeAccessible(_objectSpread$1l({
+  var a11yProps = makeAccessible(_objectSpread$1j({
     // React Native doesn't has status as role
     role: isReactNative$3 || intent === 'negative' || intent === 'notice' ? 'alert' : 'status'
   }, intent === 'notice' && {
@@ -17134,7 +17312,7 @@ var Alert = function Alert(_ref) {
   if (!isVisible) {
     return null;
   }
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread$1l(_objectSpread$1l(_objectSpread$1l(_objectSpread$1l({}, a11yProps), metaAttribute({
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread$1j(_objectSpread$1j(_objectSpread$1j(_objectSpread$1j({}, a11yProps), metaAttribute({
     name: MetaConstants.Alert,
     testID: testID
   })), getStyledProps(styledProps)), {}, {
@@ -17154,153 +17332,6 @@ var Alert = function Alert(_ref) {
   }));
 };
 
-var getStyledBadgeStyles = function getStyledBadgeStyles(_ref) {
-  var theme = _ref.theme,
-    backgroundColor = _ref.backgroundColor;
-  return {
-    backgroundColor: getIn(theme.colors, backgroundColor),
-    borderRadius: makeBorderSize(theme.border.radius.max),
-    display: 'flex',
-    flexWrap: 'nowrap'
-  };
-};
-
-function ownKeys$1l(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$1k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1l(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledBadge = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "StyledBadgeweb__StyledBadge",
-  componentId: "sc-1svn4tv-0"
-})(function (props) {
-  return _objectSpread$1k(_objectSpread$1k({}, getStyledBadgeStyles(props)), {}, {
-    width: 'fit-content'
-  });
-});
-
-var verticalPadding$1 = {
-  small: 'spacing.0',
-  medium: 'spacing.1',
-  large: 'spacing.2'
-};
-var horizontalPadding$1 = {
-  small: 'spacing.3',
-  medium: 'spacing.3',
-  large: 'spacing.4'
-};
-var iconPadding = {
-  small: 'spacing.1',
-  medium: 'spacing.2',
-  large: 'spacing.2'
-};
-var iconSize = {
-  small: 'xsmall',
-  medium: 'small',
-  large: 'small'
-};
-
-var _excluded$y = ["children", "contrast", "fontWeight", "icon", "size", "variant", "testID"];
-function ownKeys$1k(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$1j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1k(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var isFeedbackVariant$1 = function isFeedbackVariant(variant) {
-  var feedbackVariants = ['information', 'negative', 'neutral', 'notice', 'positive'];
-  return feedbackVariants.includes(variant);
-};
-var getColorProps$1 = function getColorProps(_ref) {
-  var variant = _ref.variant,
-    contrast = _ref.contrast;
-  var props = {
-    iconColor: 'feedback.icon.neutral.lowContrast',
-    textColor: 'feedback.text.neutral.lowContrast',
-    backgroundColor: 'feedback.background.neutral.lowContrast'
-  };
-  if (isFeedbackVariant$1(variant)) {
-    props.iconColor = "feedback.icon.".concat(variant, ".").concat(contrast, "Contrast");
-    props.textColor = "feedback.text.".concat(variant, ".").concat(contrast, "Contrast");
-    props.backgroundColor = "feedback.background.".concat(variant, ".").concat(contrast, "Contrast");
-  } else {
-    props.iconColor = "badge.icon.".concat(variant, ".").concat(contrast, "Contrast");
-    props.textColor = "badge.text.".concat(variant, ".").concat(contrast, "Contrast");
-    props.backgroundColor = "badge.background.".concat(variant, ".").concat(contrast, "Contrast");
-  }
-  return props;
-};
-var _Badge = function _Badge(_ref2) {
-  var children = _ref2.children,
-    _ref2$contrast = _ref2.contrast,
-    contrast = _ref2$contrast === void 0 ? 'low' : _ref2$contrast,
-    _ref2$fontWeight = _ref2.fontWeight,
-    fontWeight = _ref2$fontWeight === void 0 ? 'regular' : _ref2$fontWeight,
-    Icon = _ref2.icon,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'neutral' : _ref2$variant,
-    testID = _ref2.testID,
-    styledProps = _objectWithoutProperties$1(_ref2, _excluded$y);
-  getStringFromReactText(children);
-  var _getColorProps = getColorProps$1({
-      variant: variant,
-      contrast: contrast
-    }),
-    backgroundColor = _getColorProps.backgroundColor,
-    iconColor = _getColorProps.iconColor,
-    textColor = _getColorProps.textColor;
-  var badgeTextSizes = {
-    small: {
-      variant: 'body',
-      size: 'xsmall'
-    },
-    medium: {
-      variant: 'body',
-      size: 'small'
-    },
-    large: {
-      variant: 'body',
-      size: 'small'
-    }
-  };
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread$1j(_objectSpread$1j(_objectSpread$1j({
-    display: isReactNative$4() ? 'flex' : 'inline-flex'
-  }, metaAttribute({
-    name: MetaConstants.Badge,
-    testID: testID
-  })), getStyledProps(styledProps)), {}, {
-    children: /*#__PURE__*/jsx(StyledBadge, {
-      backgroundColor: backgroundColor,
-      size: size,
-      textAlign: 'left',
-      children: /*#__PURE__*/jsxs(BaseBox, {
-        paddingRight: horizontalPadding$1[size],
-        paddingLeft: horizontalPadding$1[size],
-        paddingTop: verticalPadding$1[size],
-        paddingBottom: verticalPadding$1[size],
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        overflow: "hidden",
-        children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
-          paddingRight: Boolean(Icon) ? iconPadding[size] : 'spacing.0',
-          display: "flex",
-          children: /*#__PURE__*/jsx(Icon, {
-            color: iconColor,
-            size: iconSize[size]
-          })
-        }) : null, /*#__PURE__*/jsx(Text, _objectSpread$1j(_objectSpread$1j({}, badgeTextSizes[size]), {}, {
-          type: "normal",
-          weight: fontWeight,
-          truncateAfterLines: 1,
-          color: textColor,
-          children: children
-        }))]
-      })
-    })
-  }));
-};
-var Badge = /*#__PURE__*/assignWithoutSideEffects(_Badge, {
-  displayName: 'Badge',
-  componentId: 'Badge'
-});
-
 var CardSurface = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "CardSurfaceweb__CardSurface",
   componentId: "sc-1pgxikk-0"
@@ -19925,7 +19956,7 @@ var ComponentIds = {
   BottomSheetGrabHandle: 'BottomSheetGrabHandle'
 };
 
-var _excluded$p = ["children", "selectionType", "onDismiss", "testID"];
+var _excluded$p = ["children", "isOpen", "onOpenChange", "selectionType", "onDismiss", "testID"];
 function ownKeys$$(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$_(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$$(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$$(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
@@ -19957,12 +19988,14 @@ function _objectSpread$_(target) { for (var i = 1; i < arguments.length; i++) {
  */
 var _Dropdown = function _Dropdown(_ref) {
   var children = _ref.children,
+    isOpenControlled = _ref.isOpen,
+    onOpenChange = _ref.onOpenChange,
     _ref$selectionType = _ref.selectionType,
     selectionType = _ref$selectionType === void 0 ? 'single' : _ref$selectionType,
     onDismiss = _ref.onDismiss,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$p);
-  var _React$useState = React__default.useState(false),
+  var _React$useState = React__default.useState(isOpenControlled !== null && isOpenControlled !== void 0 ? isOpenControlled : false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],
     setIsOpen = _React$useState2[1];
@@ -20028,7 +20061,6 @@ var _Dropdown = function _Dropdown(_ref) {
   var triggererRef = React__default.useRef(null);
   var actionListItemRef = React__default.useRef(null);
   var dropdownTriggerer = React__default.useRef();
-  var isFirstRenderRef = React__default.useRef(true);
   var isTagDismissedRef = React__default.useRef({
     value: false
   });
@@ -20037,22 +20069,22 @@ var _Dropdown = function _Dropdown(_ref) {
   });
   var dropdownContainerRef = React__default.useRef(null);
   var dropdownBaseId = useId('dropdown');
-  React__default.useEffect(function () {
-    // Ignoring the `onDismiss` call on first render
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
-      return;
-    }
-    if (!isOpen && onDismiss) {
-      onDismiss();
+  useDidUpdate(function () {
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+    if (!isOpen) {
+      onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
+  React__default.useEffect(function () {
+    if (isOpenControlled !== undefined) {
+      setIsOpen(isOpenControlled);
+    }
+  }, [isOpenControlled]);
   var close = React__default.useCallback(function () {
     setActiveTagIndex(-1);
     setIsOpen(false);
-    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-  }, [onDismiss]);
+  }, []);
   React__default.Children.map(children, function (child) {
     if ( /*#__PURE__*/React__default.isValidElement(child)) {
       if (isValidAllowedChildren(child, dropdownComponentIds.triggers.SelectInput)) {
@@ -30588,5 +30620,5 @@ var PopoverInteractiveWrapper = /*#__PURE__*/React__default.forwardRef(function
   })));
 });
 
-export { Accordion, AccordionItem, ActionList, ActionListItem, ActionListItemAsset, ActionListItemIcon, ActionListItemText, ActionListSection, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AutoComplete, AwardIcon, Badge, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetHeader, Box, BoxIcon, BriefcaseIcon, BulkPayoutsIcon, Button, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, Carousel, CarouselItem, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleButton, CollapsibleLink, CommandIcon, CompassIcon, ComponentIds$1 as ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, Divider, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, InboxIcon, Indicator, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, List, ListIcon, ListItem, ListItemCode, ListItemLink, ListItemText, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalFooter, ModalHeader, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PowerIcon, PrinterIcon, ProgressBar, QRCodeIcon, Radio, RadioGroup, RadioIcon$1 as RadioIcon, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, TabletIcon, Tag, TagIcon, TargetIcon, Text, TextArea, TextInput, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useActionListContext, useTheme };
+export { Accordion, AccordionItem, ActionList, ActionListItem, ActionListItemAsset, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AutoComplete, AwardIcon, Badge, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetHeader, Box, BoxIcon, BriefcaseIcon, BulkPayoutsIcon, Button, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, Carousel, CarouselItem, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleButton, CollapsibleLink, CommandIcon, CompassIcon, ComponentIds$1 as ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, Divider, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, InboxIcon, Indicator, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, List, ListIcon, ListItem, ListItemCode, ListItemLink, ListItemText, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalFooter, ModalHeader, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PowerIcon, PrinterIcon, ProgressBar, QRCodeIcon, Radio, RadioGroup, RadioIcon$1 as RadioIcon, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, TabletIcon, Tag, TagIcon, TargetIcon, Text, TextArea, TextInput, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useActionListContext, useTheme };
 //# sourceMappingURL=index.production.web.js.map