@thecb/components 5.8.2-beta.5 → 5.8.2-beta.8

package/dist/index.cjs.js

@@ -4826,25 +4826,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";
@@ -4948,6 +4957,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,
@@ -6219,13 +6229,12 @@ var BoxWrapper = styled__default(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:", ";width:", " 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,
-      borderColor = _ref3.borderColor;
-  return "".concat(borderSize, " solid ").concat(borderColor);
+  var border = _ref3.border;
+  return border;
 }, function (_ref4) {
   var boxShadow = _ref4.boxShadow;
   return boxShadow;
@@ -6237,7 +6246,7 @@ var BoxWrapper = styled__default(function (_ref) {
   return minHeight ? minHeight : "auto";
 }, function (_ref7) {
   var width = _ref7.width;
-  return width && "width: ".concat(width, ";");
+  return width;
 }, function (_ref8) {
   var minWidth = _ref8.minWidth;
   return minWidth ? minWidth : "auto";
@@ -6251,38 +6260,34 @@ var BoxWrapper = styled__default(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 styled.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 styled.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 styled.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 styled.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 styled.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 && styled.css(["display:none;"]);
-}, function (_ref21) {
-  var extraStyles = _ref21.extraStyles;
+}, function (_ref20) {
+  var extraStyles = _ref20.extraStyles;
   return styled.css(["", ""], extraStyles);
 });
 /* eslint-enable no-unused-vars */
@@ -13789,8 +13794,7 @@ var TimeoutImage = function TimeoutImage() {
   })))));
 };
 
-var AutopayOnIcon = function AutopayOnIcon(_ref) {
-  var themeValues = _ref.themeValues;
+var AutopayOnIcon = function AutopayOnIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "12",
@@ -13803,14 +13807,12 @@ var AutopayOnIcon = function AutopayOnIcon(_ref) {
     strokeWidth: "1"
   }, /*#__PURE__*/React__default.createElement("path", {
     className: "autopayIcon",
-    fill: themeValues.primaryColor,
+    fill: SEA_GREEN,
     fillRule: "nonzero",
     d: "M1.898 5.75c.079 0 .141-.02.188-.059a.281.281 0 00.094-.152 3.825 3.825 0 011.394-2.144A3.838 3.838 0 016 2.563c.5 0 .98.09 1.441.27.461.179.88.44 1.254.784l-.984.985A.542.542 0 007.547 5c0 .156.055.29.164.398.11.11.242.165.398.165h3.141c.156 0 .289-.055.398-.165A.542.542 0 0011.812 5V1.86a.542.542 0 00-.164-.399.542.542 0 00-.398-.164.542.542 0 00-.398.164l-.844.844A5.699 5.699 0 006 .688c-.938 0-1.809.207-2.613.62-.805.415-1.48.981-2.028 1.7A5.726 5.726 0 00.281 5.422a.265.265 0 00.059.223c.055.07.129.105.222.105h1.336zM6 12.312c.937 0 1.809-.207 2.613-.62a5.919 5.919 0 002.028-1.7 5.726 5.726 0 001.078-2.414.265.265 0 00-.059-.223.267.267 0 00-.223-.105h-1.335c-.079 0-.141.02-.188.059a.281.281 0 00-.094.152 3.825 3.825 0 01-1.394 2.144c-.711.555-1.52.833-2.426.833-.5 0-.98-.09-1.441-.27a3.985 3.985 0 01-1.254-.785l.984-.985A.542.542 0 004.453 8a.542.542 0 00-.164-.398.542.542 0 00-.398-.164H.75a.542.542 0 00-.398.164A.542.542 0 00.187 8v3.14c0 .157.055.29.165.4.109.108.242.163.398.163.156 0 .29-.055.398-.164l.844-.844A5.699 5.699 0 006 12.312z"
   })));
 };
 
-var AutopayOnIcon$1 = themeComponent(AutopayOnIcon, "Icons", fallbackValues$2, "primary");
-
 var NotFoundIcon = function NotFoundIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "548px",
@@ -40405,7 +40407,7 @@ var AutopayModal = function AutopayModal(_ref) {
           }, /*#__PURE__*/React__default.createElement(Cluster, {
             justify: isMobile ? "flex-start" : "flex-end",
             align: "center"
-          }, /*#__PURE__*/React__default.createElement(AutopayOnIcon$1, null), /*#__PURE__*/React__default.createElement(Text$1, {
+          }, /*#__PURE__*/React__default.createElement(AutopayOnIcon, null), /*#__PURE__*/React__default.createElement(Text$1, {
             variant: "pS",
             onClick: function onClick() {
               return toggleModal(true);
@@ -40590,8 +40592,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate
   })), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
-    padding: isMobile ? "0 0 0 8px" : "0",
-    extraStyles: isMobile && "flex-grow: 1;"
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     isLoading: isLoading,
     action: function action() {
@@ -40599,8 +40600,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__default.createElement(Box, {
     padding: "8px 0 0",
     width: "100%"
@@ -40612,7 +40612,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;"
   }))));
 };
 
@@ -40644,7 +40644,7 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     border: isMobile ? "1px solid ".concat(GHOST_GREY) : "0px",
     borderWidthOverride: isMobile ? "1px 0 0 0" : "0px"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
-    childGap: "8px",
+    childGap: autoPayEnabled ? "8px" : "0",
     nowrap: true
   }, autoPayEnabled && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -40670,7 +40670,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;"
   }))));
 };
 
@@ -40739,13 +40739,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__default.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__default.createElement(Box, {
     background: WHITE,
     padding: "24px 16px"
@@ -42893,7 +42895,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
 };
@@ -42917,7 +42919,7 @@ var CenterSingle = function CenterSingle(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
     centerOverride: isMobile && !centeredMobileContent
@@ -42962,7 +42964,7 @@ var CenterStack = function CenterStack(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, null, header ? header : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -43002,7 +43004,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
     childGap: "0",
@@ -43053,7 +43055,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
     centerOverride: !sidebarVerticalCenter
@@ -43109,7 +43111,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     key: "page-bg",
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
@@ -43177,7 +43179,7 @@ exports.AddressForm = AddressForm;
 exports.Alert = Alert$1;
 exports.AllocatedIcon = AllocatedIcon;
 exports.AmountCallout = AmountCallout$1;
-exports.AutopayOnIcon = AutopayOnIcon$1;
+exports.AutopayOnIcon = AutopayOnIcon;
 exports.BankIcon = BankIcon;
 exports.Box = Box;
 exports.BoxWithShadow = BoxWithShadow$1;