@thecb/components 5.8.2-beta.6 → 5.8.2-beta.9

package/dist/index.esm.js

@@ -4818,25 +4818,34 @@ var AQUA_HAZE_WHITE = "#F7F9FA";
 var BLEACH_WHITE = "#FEF4d7";
 var CATSKILL_WHITE = "#EAF2F6"; // GREY
 
-var ATHENS_GREY = "#F6F6F9";
+var ATHENS_GREY = "#F6F6F9"; // CBS-100
+
 var ALTO_GREY = "#d1d1d1";
 var SILVER_GREY = "#cdcdcd";
 var PEWTER_GREY = "#DFE1E4";
 var ASH_GREY = "#979797";
 var IRON_GREY = "#d5d8dc";
-var GHOST_GREY = "#CACED8";
+var GHOST_GREY = "#CACED8"; // CBS-300
+
 var DUSTY_GREY = "#9B9B9B";
 var REGENT_GREY = "#959EA7";
-var STORM_GREY = "#6D717E";
+var STORM_GREY = "#6D717E"; // CBS-700
+
 var TROUT_GREY = "#515660";
 var MINESHAFT_GREY = "#333333";
 var SOOT_GREY = "#999999";
 var FIREFLY_GREY = "#091325";
-var BRIGHT_GREY = "#3B414D";
-var CHARADE_GREY = "#292A33";
-var GRECIAN_GREY = "#E5E7EC";
+var BRIGHT_GREY = "#3B414D"; // CBS-800
+
+var CHARADE_GREY = "#292A33"; // CBS-900
+
+var GRECIAN_GREY = "#E5E7EC"; // CBS-200
+
 var BLACK_SQUEEZE = "#EAF2F7";
-var GREY_CHATEAU = "#959CA8"; // BLUE
+var GREY_CHATEAU = "#959CA8"; // CBS-500
+
+var COOL_GREY_05 = "#fbfcfd"; // CBS-050
+// BLUE
 
 var CLOUDBURST_BLUE = "#26395c";
 var ZODIAC_BLUE = "#14284b";
@@ -4940,6 +4949,7 @@ var colors = /*#__PURE__*/Object.freeze({
   BRIGHT_GREY: BRIGHT_GREY,
   CHARADE_GREY: CHARADE_GREY,
   GRECIAN_GREY: GRECIAN_GREY,
+  COOL_GREY_05: COOL_GREY_05,
   BLACK_SQUEEZE: BLACK_SQUEEZE,
   GREY_CHATEAU: GREY_CHATEAU,
   CLOUDBURST_BLUE: CLOUDBURST_BLUE,
@@ -6211,13 +6221,14 @@ var BoxWrapper = styled(function (_ref) {
 }).withConfig({
   displayName: "Boxstyled__BoxWrapper",
   componentId: "sc-1f9ij0d-0"
-})(["position:relative;box-sizing:border-box;padding:", ";border:", ";box-shadow:", ";background-color:", ";min-height:", ";", " min-width:", ";max-width:", ";color:", ";border-radius:", ";border-width:", ";border:", ";text-align:", ";&:hover{", "}&:focus{", "}&:active{", "}&:disabled{", "}& *{color:", ";}", " ", ""], function (_ref2) {
+})(["position:relative;box-sizing:border-box;padding:", ";border:", ";box-shadow:", ";background-color:", ";min-height:", ";", " min-width:", ";max-width:", ";color:", ";border-radius:", ";border-width:", ";text-align:", ";&:hover{", "}&:focus{", "}&:active{", "}&:disabled{", "}& *{color:", ";}", " ", ""], function (_ref2) {
   var padding = _ref2.padding;
   return padding;
 }, function (_ref3) {
-  var borderSize = _ref3.borderSize,
+  var border = _ref3.border,
+      borderSize = _ref3.borderSize,
       borderColor = _ref3.borderColor;
-  return "".concat(borderSize, " solid ").concat(borderColor);
+  return border ? border : "".concat(borderSize, " solid ").concat(borderColor);
 }, function (_ref4) {
   var boxShadow = _ref4.boxShadow;
   return boxShadow;
@@ -6243,38 +6254,34 @@ var BoxWrapper = styled(function (_ref) {
   var borderRadius = _ref11.borderRadius;
   return borderRadius;
 }, function (_ref12) {
-  var borderWidthOverride = _ref12.borderWidthOverride,
-      borderSize = _ref12.borderSize;
-  return borderWidthOverride ? borderWidthOverride : borderSize;
+  var borderWidthOverride = _ref12.borderWidthOverride;
+  return borderWidthOverride;
 }, function (_ref13) {
-  var border = _ref13.border;
-  return border;
-}, function (_ref14) {
-  var textAlign = _ref14.textAlign;
+  var textAlign = _ref13.textAlign;
   return textAlign;
-}, function (_ref15) {
-  var hoverStyles = _ref15.hoverStyles,
-      as = _ref15.as;
+}, function (_ref14) {
+  var hoverStyles = _ref14.hoverStyles,
+      as = _ref14.as;
   return css(["", " ", ""], hoverStyles, as === "button" ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
-}, function (_ref16) {
-  var as = _ref16.as;
+}, function (_ref15) {
+  var as = _ref15.as;
   return css(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
+}, function (_ref16) {
+  var activeStyles = _ref16.activeStyles,
+      as = _ref16.as;
+  return css(["", " ", ""], activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref17) {
-  var activeStyles = _ref17.activeStyles,
+  var disabledStyles = _ref17.disabledStyles,
       as = _ref17.as;
-  return css(["", " ", ""], activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
-}, function (_ref18) {
-  var disabledStyles = _ref18.disabledStyles,
-      as = _ref18.as;
   return css(["", " ", ""], disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
-}, function (_ref19) {
-  var color = _ref19.color;
+}, function (_ref18) {
+  var color = _ref18.color;
   return color;
-}, function (_ref20) {
-  var hiddenStyles = _ref20.hiddenStyles;
+}, function (_ref19) {
+  var hiddenStyles = _ref19.hiddenStyles;
   return hiddenStyles && css(["display:none;"]);
-}, function (_ref21) {
-  var extraStyles = _ref21.extraStyles;
+}, function (_ref20) {
+  var extraStyles = _ref20.extraStyles;
   return css(["", ""], extraStyles);
 });
 /* eslint-enable no-unused-vars */
@@ -40579,8 +40586,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate
   })), !isMobile && /*#__PURE__*/React.createElement(Box, {
-    padding: isMobile ? "0 0 0 8px" : "0",
-    extraStyles: isMobile && "flex-grow: 1;"
+    padding: "0"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     isLoading: isLoading,
     action: function action() {
@@ -40588,8 +40594,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     },
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
-    dataQa: "Pay Now",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+    dataQa: "Pay Now"
   }))), isMobile && /*#__PURE__*/React.createElement(Box, {
     padding: "8px 0 0",
     width: "100%"
@@ -40601,7 +40606,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+    extraStyles: isMobile && "flex-grow: 1; width: 100%; margin: 0;"
   }))));
 };
 
@@ -40633,7 +40638,7 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     border: isMobile ? "1px solid ".concat(GHOST_GREY) : "0px",
     borderWidthOverride: isMobile ? "1px 0 0 0" : "0px"
   }, /*#__PURE__*/React.createElement(Cluster, {
-    childGap: "8px",
+    childGap: autoPayEnabled ? "8px" : "0",
     nowrap: true
   }, autoPayEnabled && /*#__PURE__*/React.createElement(Box, {
     padding: "0",
@@ -40659,7 +40664,7 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     text: "Remove",
     action: handleRemoveAccount,
     dataQa: "Remove Account",
-    extraStyles: isMobile ? "flex-grow: 1; width: 100%;" : "flex-grow: 1;"
+    extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1;"
   }))));
 };
 
@@ -40728,13 +40733,15 @@ var Obligation = function Obligation(_ref) {
   */
   var firstObligation = obligations[0];
   var customAttributes = (_firstObligation$cust = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.customAttributes) !== null && _firstObligation$cust !== void 0 ? _firstObligation$cust : {};
-  var boxShadowValue = "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
+  var boxShadowValue = "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
   var activeObligation = /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
     boxShadow: boxShadowValue,
     as: "section",
-    "aria-label": "".concat((_firstObligation$desc = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description) !== null && _firstObligation$desc !== void 0 ? _firstObligation$desc : "account", " ").concat((_firstObligation$subD = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription) !== null && _firstObligation$subD !== void 0 ? _firstObligation$subD : obligationAssocID)
+    "aria-label": "".concat((_firstObligation$desc = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description) !== null && _firstObligation$desc !== void 0 ? _firstObligation$desc : "account", " ").concat((_firstObligation$subD = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription) !== null && _firstObligation$subD !== void 0 ? _firstObligation$subD : obligationAssocID),
+    border: "1px solid ".concat(GRECIAN_GREY),
+    borderWidthOverride: "1px 0 0 0"
   }, /*#__PURE__*/React.createElement(Box, {
     background: WHITE,
     padding: "24px 16px"
@@ -42882,7 +42889,7 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
   }, "Your organization may not have a dashboard configured."))), !periscopeDataFailure && url && Dashboard(height)(url)));
 };
 
-var pageBackground = "#F6F6F9";
+var pageBackground = "#FBFCFD";
 var fallbackValues$H = {
   pageBackground: pageBackground
 };
@@ -42906,7 +42913,7 @@ var CenterSingle = function CenterSingle(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, {
     centerOverride: isMobile && !centeredMobileContent
@@ -42951,7 +42958,7 @@ var CenterStack = function CenterStack(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, null, header ? header : /*#__PURE__*/React.createElement(Box, {
     padding: "0"
@@ -42991,7 +42998,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, {
     childGap: "0",
@@ -43042,7 +43049,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, {
     centerOverride: !sidebarVerticalCenter
@@ -43098,7 +43105,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     key: "page-bg",
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, {