@thecb/components 10.2.1-beta.7 → 10.2.1-beta.8

package/dist/index.cjs.js

@@ -18308,6 +18308,84 @@ var MultiCartIcon = function MultiCartIcon(_ref) {
   }));
 };
 
+var _excluded$j = ["iconFill", "iconWidth", "iconHeight"];
+var CloseIcon = function CloseIcon(_ref) {
+  var _ref$iconFill = _ref.iconFill,
+    iconFill = _ref$iconFill === void 0 ? "#3B414D" : _ref$iconFill,
+    _ref$iconWidth = _ref.iconWidth,
+    iconWidth = _ref$iconWidth === void 0 ? "24" : _ref$iconWidth,
+    _ref$iconHeight = _ref.iconHeight,
+    iconHeight = _ref$iconHeight === void 0 ? "24" : _ref$iconHeight,
+    rest = _objectWithoutProperties(_ref, _excluded$j);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: iconWidth,
+    height: iconHeight,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, rest), /*#__PURE__*/React__default.createElement("title", null, "Close Icon"), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z",
+    fill: iconFill
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_3727_16765",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "5",
+    y: "5",
+    width: "14",
+    height: "14"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z",
+    fill: "none"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_3727_16765)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H24V24H0V0Z",
+    fill: iconFill
+  })));
+};
+
+var TrashIconV2 = function TrashIconV2(_ref) {
+  var themeValues = _ref.themeValues,
+    iconFill = _ref.iconFill;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.5 4H14V6H4V4H6.5L7.21429 3H10.7857L11.5 4ZM6.99048 15C6.25714 15 5.65714 14.4857 5.65714 13.8571L4.85714 7H12.8571L12.0571 13.8571C12.0571 14.4857 11.4571 15 10.7238 15H6.99048Z",
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_4292_11876",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "4",
+    y: "3",
+    width: "10",
+    height: "12"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.5 4H14V6H4V4H6.5L7.21429 3H10.7857L11.5 4ZM6.99048 15C6.25714 15 5.65714 14.4857 5.65714 13.8571L4.85714 7H12.8571L12.0571 13.8571C12.0571 14.4857 11.4571 15 10.7238 15H6.99048Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_4292_11876)"
+  }));
+};
+var TrashIconV2$1 = themeComponent(TrashIconV2, "Icons", fallbackValues$2, "primary");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -18954,7 +19032,7 @@ var mobileFallbackValues = {
 };
 var MOBILE_BREAKPOINT = 768;
 
-var _excluded$j = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$k = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Title elements
@@ -19001,7 +19079,7 @@ var Title = function Title(_ref) {
     as = _ref$as === void 0 ? "h1" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$j);
+    rest = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default.createElement(TitleText, _extends({
     variant: variant,
     as: as,
@@ -20425,12 +20503,12 @@ var fallbackValues$8 = {
   linkColor: linkColor
 };
 
-var _excluded$k = ["variant", "themeValues", "children"];
+var _excluded$l = ["variant", "themeValues", "children"];
 var BoxWithShadow = function BoxWithShadow(_ref) {
   var variant = _ref.variant,
     themeValues = _ref.themeValues,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var shadowRegistry = {
     baseStandard: "0px 3px 7px 2px ".concat(rgba$1(BLACK, 0.1), ", 0px 1px 2px 1px ").concat(rgba$1(BLACK, 0.1), ";"),
     baseHover: "0px 1px 7px 0px ".concat(rgba$1(BLACK, 0.3), ", 0px 1px 4px 0px ").concat(rgba$1(BLACK, 0.2), ", 0px 7px 12px 0px ").concat(rgba$1(BLACK, 0.2), ";"),
@@ -20490,7 +20568,7 @@ var fallbackValues$a = {
   externalLinkColor: externalLinkColor
 };
 
-var _excluded$l = ["hoverColor", "activeColor", "extrastyles"];
+var _excluded$m = ["hoverColor", "activeColor", "extrastyles"];
 var ROYAL_BLUE$1 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$3 = LINK_TEXT_DECORATION;
 
@@ -20504,7 +20582,7 @@ var StyledExternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
   var hoverColor = _ref.hoverColor,
     activeColor = _ref.activeColor,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement("a", _extends({}, props, {
     ref: ref
   }));
@@ -20579,7 +20657,7 @@ var ExternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 });
 
-var _excluded$m = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
+var _excluded$n = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
 var ROYAL_BLUE$2 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$4 = LINK_TEXT_DECORATION;
 
@@ -20595,7 +20673,7 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
     active = _ref.active,
     color = _ref.color,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, _extends({}, props, {
     ref: ref
   }));
@@ -20698,7 +20776,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       lineheight: themeValues.lineHeight,
       fontWeight: themeValues.fontWeight,
       margin: themeValues.margin,
-      extraStyles: "\n                          text-transform: uppercase;\n                          ".concat(isActive.toString() === "true" && "color: ".concat(themeValues.activeBreadcrumbColor, ";\n                             pointer-events: none;\n                             text-decoration: none;\n                            "), "\n                          &:first-child {\n                            margin-left: 0;\n                          }\n                          &:active {\n                            color: ").concat(themeValues.activeColor, ";\n                          }")
+      extraStyles: "\n                          text-transform: uppercase;\n                          text-decoration: none;\n                          ".concat(isActive.toString() === "true" && "color: ".concat(themeValues.activeBreadcrumbColor, ";\n                             pointer-events: none;\n                             text-decoration: none;\n                            "), "\n                          &:first-child {\n                            margin-left: 0;\n                          }\n                          &:active {\n                            color: ").concat(themeValues.activeColor, ";\n                          }")
     }, linkText), index < breadcrumbsList.length - 1 ? /*#__PURE__*/React__default.createElement(IconChevron, null) : /*#__PURE__*/React__default.createElement(React.Fragment, null));
   })));
 };
@@ -22278,7 +22356,7 @@ _curry2(function test(pattern, str) {
   return _cloneRegExp(pattern).test(str);
 });
 
-var _excluded$n = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
+var _excluded$o = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
     url = _ref$url === void 0 ? "/" : _ref$url,
@@ -22293,7 +22371,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     _ref$newTab = _ref.newTab,
     newTab = _ref$newTab === void 0 ? false : _ref$newTab,
     dataQa = _ref.dataQa,
-    otherProps = _objectWithoutProperties(_ref, _excluded$n);
+    otherProps = _objectWithoutProperties(_ref, _excluded$o);
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
       url = _ref2.url,
@@ -22381,7 +22459,7 @@ var ParagraphText = styled__default.p.withConfig({
   return extraStyles;
 });
 
-var _excluded$o = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
+var _excluded$p = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
 var Paragraph = function Paragraph(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -22395,7 +22473,7 @@ var Paragraph = function Paragraph(_ref) {
     dataQa = _ref.dataQa,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded$o);
+    rest = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
     weight: weight,
     color: color,
@@ -25704,7 +25782,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$p = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$q = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 /*
   New responsive text component for Detail elements
@@ -25754,7 +25832,7 @@ var Detail = function Detail(_ref) {
     as = _ref$as === void 0 ? "p" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
     as: as,
@@ -26464,7 +26542,7 @@ var fallbackValues$k = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$q = ["showErrors", "themeValues"],
+var _excluded$r = ["showErrors", "themeValues"],
   _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
@@ -26499,7 +26577,7 @@ var InputField = styled__default.input.withConfig({
 var FormattedInputField = styled__default(function (_ref8) {
   var showErrors = _ref8.showErrors,
     themeValues = _ref8.themeValues,
-    props = _objectWithoutProperties(_ref8, _excluded$q);
+    props = _objectWithoutProperties(_ref8, _excluded$r);
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
@@ -26671,7 +26749,7 @@ var FormInput = function FormInput(_ref15) {
 };
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
 
-var _excluded$r = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$s = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? "30rem" : _ref$breakpoint,
@@ -26680,7 +26758,7 @@ var FormInputRow = function FormInputRow(_ref) {
     largeChild = _ref.largeChild,
     largeChildSize = _ref.largeChildSize,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
   }, rest), /*#__PURE__*/React__default.createElement(Switcher, {
@@ -26691,24 +26769,24 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$s = ["childGap", "bottomItem", "children"];
+var _excluded$t = ["childGap", "bottomItem", "children"];
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
     bottomItem = _ref.bottomItem,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$s);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
     bottomItem: bottomItem
   }, rest), children);
 };
 
-var _excluded$t = ["themeValues", "children"];
+var _excluded$u = ["themeValues", "children"];
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$t);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
@@ -27018,7 +27096,7 @@ var fallbackValues$o = {
   fontSize: fontSize$8
 };
 
-var _excluded$u = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$v = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -27037,7 +27115,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -27238,11 +27316,11 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
 };
 
-var _excluded$v = ["version"];
+var _excluded$w = ["version"];
 var LabeledAmount = function LabeledAmount(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$v);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
@@ -27379,7 +27457,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$w = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$x = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -27394,7 +27472,7 @@ var NavFooter = function NavFooter(_ref) {
     footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
     isMobile = _ref.isMobile,
     footerWidth = _ref.footerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -27425,7 +27503,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$x = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$y = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -27434,7 +27512,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -27648,7 +27726,10 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
     dataQa = _ref.dataQa;
   return isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
     to: destination,
-    "data-qa": dataQa
+    "data-qa": dataQa,
+    style: {
+      textDecoration: "none"
+    }
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minHeight: "100%",
@@ -39180,7 +39261,7 @@ var TableRowWrapper = styled__default.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$y = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$z = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
     extraStyles = _ref.extraStyles,
@@ -39189,7 +39270,7 @@ var TableRow = function TableRow(_ref) {
     hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
     onClick = _ref.onClick,
     themeValues = _ref.themeValues,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
     onClick: onClick,
     hoverEffect: hoverEffect,
@@ -47619,7 +47700,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$z = ["amount"],
+var _excluded$A = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -47859,7 +47940,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$z);
+      rest = _objectWithoutProperties(_ref5, _excluded$A);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -48279,11 +48360,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$A = ["version"];
+var _excluded$B = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -49082,7 +49163,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$B = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
+var _excluded$C = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -49130,7 +49211,7 @@ var RadioSection = function RadioSection(_ref) {
     _ref$isSectionRequire = _ref.isSectionRequired,
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -49602,7 +49683,7 @@ var TabSidebar = function TabSidebar(_ref) {
     return /*#__PURE__*/React__default.createElement(InternalLink, {
       to: route,
       key: "".concat(route, "-").concat(index),
-      extraStyles: "&:hover {\n            ".concat(active ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }") : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}")
+      extraStyles: "text-decoration: none;\n            &:hover {\n            ".concat(active ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }") : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}")
     }, /*#__PURE__*/React__default.createElement(Box, {
       padding: isMobile ? "6px 4px" : "18px 16px",
       background: active ? themeValues.activeTabBackground : "transparent",
@@ -49811,8 +49892,225 @@ var WorkflowTile = function WorkflowTile(_ref) {
   }))));
 };
 
-var pageBackground = "#FBFCFD";
+var menuItemBackgroundColor = WHITE;
+var menuItemColor = ROYAL_BLUE_VIVID;
+var menuItemColorDelete = RAZZMATAZZ_RED;
+var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
+var menuItemHoverBackgroundColorDelete = BLUSH_RED;
+var menuItemHoverColor = ROYAL_BLUE_VIVID;
 var fallbackValues$U = {
+  menuItemBackgroundColor: menuItemBackgroundColor,
+  menuItemColor: menuItemColor,
+  menuItemColorDelete: menuItemColorDelete,
+  menuItemHoverBackgroundColor: menuItemHoverBackgroundColor,
+  menuItemHoverBackgroundColorDelete: menuItemHoverBackgroundColorDelete,
+  menuItemHoverColor: menuItemHoverColor
+};
+
+var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
+  displayName: "PopupMenuItemstyled__PopupMenuItemContainer",
+  componentId: "sc-urj1su-0"
+})(["width:100%;margin:0;padding:17px 11px;margin-bottom:5px;border:0;cursor:pointer;text-decoration:none;", " &:hover,&:active{text-decoration:none;", "}"], function (_ref) {
+  var theme = _ref.theme,
+    isDeleteAction = _ref.isDeleteAction;
+  return "\n    background-color: ".concat(theme.menuItemBackgroundColor, ";\n    color: ").concat(isDeleteAction ? theme.menuItemColorDelete : theme.menuItemColor, ";\n  ");
+}, function (_ref2) {
+  var theme = _ref2.theme,
+    isDeleteAction = _ref2.isDeleteAction;
+  return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
+});
+
+var _excluded$D = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var PopupMenuItem = function PopupMenuItem(_ref) {
+  var id = _ref.id,
+    closeMenuCallback = _ref.closeMenuCallback,
+    _action = _ref.action,
+    themeValues = _ref.themeValues,
+    text = _ref.text,
+    _ref$hasIcon = _ref.hasIcon,
+    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+    _ref$isDeleteAction = _ref.isDeleteAction,
+    isDeleteAction = _ref$isDeleteAction === void 0 ? false : _ref$isDeleteAction,
+    Icon = _ref.icon,
+    textExtraStyles = _ref.textExtraStyles,
+    hoverStyles = _ref.hoverStyles,
+    activeStyles = _ref.activeStyles,
+    extraStyles = _ref.extraStyles,
+    rest = _objectWithoutProperties(_ref, _excluded$D);
+  return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
+    id: id,
+    role: "menuItem",
+    text: text,
+    action: function action() {
+      _action();
+      closeMenuCallback();
+    },
+    variant: "smallGhost",
+    isDeleteAction: isDeleteAction,
+    theme: themeValues,
+    contentOverride: true,
+    textExtraStyles: textExtraStyles,
+    hoverStyles: hoverStyles,
+    extraStyles: extraStyles,
+    activeStyles: "outline: none; ".concat(activeStyles)
+  }, rest), /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "\n            display: flex;\n            gap: 8px;\n            justify-content: center;\n            padding: 0;\n        "
+  }, hasIcon && /*#__PURE__*/React__default.createElement(Icon, {
+    iconFill: isDeleteAction ? themeValues.menuItemColorDelete : themeValues.menuItemColor
+  }), text && /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "pS",
+    weight: FONT_WEIGHT_SEMIBOLD,
+    fontFamily: "Public Sans, sans-serif",
+    color: isDeleteAction ? themeValues.menuItemColorDelete : themeValues.menuItemColor,
+    extraStyles: textExtraStyles
+  }, text)));
+};
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$U);
+
+var hoverColor$6 = "#116285";
+var activeColor$a = "#0E506D";
+var menuTriggerColor = "#15749D";
+var backgroundColor$e = "white";
+var fallbackValues$V = {
+  hoverColor: hoverColor$6,
+  activeColor: activeColor$a,
+  menuTriggerColor: menuTriggerColor,
+  backgroundColor: backgroundColor$e
+};
+
+var PopupMenuContainer = styled__default(Box).withConfig({
+  displayName: "PopupMenustyled__PopupMenuContainer",
+  componentId: "sc-1ge13q9-0"
+})(["display:flex;position:relative;padding:0;"]);
+var PopupMenuTriggerButton = styled__default(ButtonWithAction).withConfig({
+  displayName: "PopupMenustyled__PopupMenuTriggerButton",
+  componentId: "sc-1ge13q9-1"
+})(["padding:10px 15px;min-width:auto;&:active,&:focus{outline:none;border:1px solid rgba(196,206,244,1);background-color:rgba(235,239,251,1);}"]);
+
+var PopupMenu = function PopupMenu(_ref) {
+  var _ref$menuId = _ref.menuId,
+    menuId = _ref$menuId === void 0 ? "popup-menu" : _ref$menuId,
+    _ref$menuItems = _ref.menuItems,
+    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems,
+    themeValues = _ref.themeValues,
+    _ref$triggerText = _ref.triggerText,
+    triggerText = _ref$triggerText === void 0 ? "trigger text" : _ref$triggerText,
+    _ref$hasIcon = _ref.hasIcon,
+    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
+    Icon = _ref.icon,
+    _ref$iconHelpText = _ref.iconHelpText,
+    iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
+    menuFocus = _ref.menuFocus,
+    containerExtraStyles = _ref.containerExtraStyles,
+    textExtraStyles = _ref.textExtraStyles,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "auto" : _ref$height,
+    position = _ref.position,
+    _ref$transform = _ref.transform,
+    transform = _ref$transform === void 0 ? "none" : _ref$transform,
+    buttonExtraStyles = _ref.buttonExtraStyles,
+    popupExtraStyles = _ref.popupExtraStyles;
+  var hoverColor = themeValues.hoverColor,
+    activeColor = themeValues.activeColor,
+    menuTriggerColor = themeValues.menuTriggerColor,
+    backgroundColor = themeValues.backgroundColor;
+  var _ref2 = position !== null && position !== void 0 ? position : {},
+    _ref2$top = _ref2.top,
+    top = _ref2$top === void 0 ? "".concat(height, "px") : _ref2$top,
+    _ref2$right = _ref2.right,
+    right = _ref2$right === void 0 ? "auto" : _ref2$right,
+    _ref2$bottom = _ref2.bottom,
+    bottom = _ref2$bottom === void 0 ? "auto" : _ref2$bottom,
+    _ref2$left = _ref2.left,
+    left = _ref2$left === void 0 ? "0" : _ref2$left;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpen = _useState2[1];
+  var menuRef = React.useRef();
+  var triggerRef = React.useRef();
+  var toggleMenu = function toggleMenu(menuState) {
+    return setIsMenuOpen(menuState);
+  };
+  React.useEffect(function () {
+    var checkIfClickedOutside = function checkIfClickedOutside(e) {
+      // If the menu is open and the clicked target is not within the menu or the trigger
+      if (isMenuOpen && menuRef.current && !menuRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
+        toggleMenu(false);
+      }
+    };
+    document.addEventListener("click", checkIfClickedOutside);
+    return function () {
+      document.removeEventListener("click", checkIfClickedOutside);
+    };
+  }, [isMenuOpen]);
+  return /*#__PURE__*/React__default.createElement(PopupMenuContainer, {
+    extraStyles: containerExtraStyles
+  }, /*#__PURE__*/React__default.createElement(PopupMenuTriggerButton, {
+    ref: triggerRef,
+    action: function action() {
+      toggleMenu(!isMenuOpen);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Escape") {
+        toggleMenu(false);
+      }
+    },
+    contentOverride: true,
+    variant: "smallGhost",
+    tabIndex: "0",
+    id: menuId,
+    borderRadius: "8px",
+    "aria-haspopup": "true",
+    "aria-expanded": isMenuOpen,
+    "aria-controls": "".concat(menuId, "-container"),
+    extraStyles: buttonExtraStyles
+  }, hasIcon && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, null), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    srOnly: true
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    id: "btn".concat(menuId, "_info")
+  }, iconHelpText))), !hasIcon && /*#__PURE__*/React__default.createElement(Text$1, {
+    color: menuTriggerColor,
+    extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
+  }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
+    as: "div",
+    id: "".concat(menuId, "-container"),
+    ref: menuRef,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Escape") {
+        toggleMenu(false);
+      }
+    },
+    background: backgroundColor,
+    borderRadius: "8px",
+    boxShadow: "\n          0px 7px 32px 0px rgba(41, 42, 51, 0.2),\n          0px 1px 4px 0px rgba(41, 42, 51, 0.2),\n          0px 1px 8px -1px rgba(41, 42, 51, 0.3);\n        ",
+    role: "menu",
+    "aria-labelledby": menuId,
+    tabIndex: menuFocus && isMenuOpen ? "0" : "-1",
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    extraStyles: "\n          display: ".concat(isMenuOpen ? "block" : "none", ";\n          position: absolute;\n          padding: 8px 8px 3px 8px;\n          top: ").concat(top, "; \n          left: ").concat(left, ";\n          right: ").concat(right, ";\n          bottom: ").concat(bottom, ";\n          height: ").concat(height, ";\n          transform: ").concat(transform, ";\n          ").concat(popupExtraStyles, ";\n        ")
+  }, menuItems.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(PopupMenuItem$1, _extends({
+      key: index,
+      id: "".concat(menuId, "-item-").concat(index),
+      closeMenuCallback: function closeMenuCallback() {
+        toggleMenu(false);
+        // focus back to trigger button when menu closes
+        triggerRef.current.focus();
+      }
+    }, item));
+  })));
+};
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$V);
+
+var pageBackground = "#FBFCFD";
+var fallbackValues$W = {
   pageBackground: pageBackground
 };
 
@@ -49860,7 +50158,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$U));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$W));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -49903,7 +50201,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$U));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$W));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -49918,13 +50216,15 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     _ref$gutters = _ref.gutters,
     gutters = _ref$gutters === void 0 ? "2rem" : _ref$gutters,
     _ref$fillPageVertical = _ref.fillPageVertical,
-    fillPageVertical = _ref$fillPageVertical === void 0 ? false : _ref$fillPageVertical;
+    fillPageVertical = _ref$fillPageVertical === void 0 ? false : _ref$fillPageVertical,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? COOL_GREY_05 : _ref$background;
   var themeContext = React.useContext(styled.ThemeContext);
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: COOL_GREY_05,
+    background: background,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
     childGap: "0",
@@ -49947,7 +50247,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$U));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$W));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -50000,7 +50300,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$U));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$W));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -50070,7 +50370,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$W));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -50148,6 +50448,7 @@ exports.Checkbox = Checkbox$1;
 exports.CheckboxList = CheckboxList$1;
 exports.CheckmarkIcon = CheckmarkIcon;
 exports.ChevronIcon = ChevronIcon$1;
+exports.CloseIcon = CloseIcon;
 exports.Cluster = Cluster;
 exports.CollapsibleSection = CollapsibleSection$1;
 exports.Copyable = Copyable;
@@ -50242,6 +50543,7 @@ exports.Placeholder = Placeholder$1;
 exports.PlusCircleIcon = PlusCircleIcon;
 exports.PointOfSaleImage = PointOfSaleImage;
 exports.Popover = Popover$1;
+exports.PopupMenu = PopupMenu$1;
 exports.ProcessingFee = ProcessingFee$1;
 exports.ProfileIcon = ProfileIcon$1;
 exports.ProfileIconSmall = ProfileIconSmall$1;
@@ -50300,6 +50602,7 @@ exports.Title = Title$1;
 exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.TrashIcon = TrashIcon$1;
+exports.TrashIconV2 = TrashIconV2$1;
 exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.VoidedIcon = VoidedIcon;