@thecb/components 8.0.4-beta.4 → 8.0.4-beta.6

package/dist/index.esm.js

@@ -26804,11 +26804,11 @@ var ProcessingFee = function ProcessingFee(_ref) {
 
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$s, "default");
 
-var backgroundColor$5 = MATISSE_BLUE;
-var borderColor$2 = GREY_CHATEAU;
+var activeColor$5 = MATISSE_BLUE;
+var inactiveBorderColor = GREY_CHATEAU;
 var fallbackValues$t = {
-  borderColor: borderColor$2,
-  backgroundColor: backgroundColor$5
+  inactiveBorderColor: inactiveBorderColor,
+  activeColor: activeColor$5
 };
 
 var HiddenRadioInput = styled.input.withConfig({
@@ -26819,21 +26819,21 @@ var Circle = styled.div.withConfig({
   displayName: "RadioButtonWithLabel__Circle",
   componentId: "sc-1m9whwg-1"
 })(["flex-shrink:0;margin-right:8px;width:1.5rem;height 1.5rem;border:", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], function (_ref) {
-  var borderColor = _ref.borderColor;
-  return "1px solid ".concat(borderColor);
+  var inactiveBorderColor = _ref.inactiveBorderColor;
+  return "1px solid ".concat(inactiveBorderColor);
 }, function (_ref2) {
-  var backgroundColor = _ref2.backgroundColor;
-  return backgroundColor;
+  var activeColor = _ref2.activeColor;
+  return activeColor;
 });
 var InputAndLabelContainer = styled(Cluster).withConfig({
   displayName: "RadioButtonWithLabel__InputAndLabelContainer",
   componentId: "sc-1m9whwg-2"
 })(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:", "}", ":focus + label ", "{{box-shadow:", "}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, function (_ref3) {
-  var backgroundColor = _ref3.backgroundColor;
-  return "1px solid ".concat(backgroundColor, ";");
+  var activeColor = _ref3.activeColor;
+  return "1px solid ".concat(activeColor, ";");
 }, HiddenRadioInput, Circle, function (_ref4) {
-  var backgroundColor = _ref4.backgroundColor;
-  return "0px 0px 2px 1px ".concat(backgroundColor, ";");
+  var activeColor = _ref4.activeColor;
+  return "0px 0px 2px 1px ".concat(activeColor, ";");
 });
 
 var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
@@ -26846,12 +26846,14 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       groupName = _ref5.groupName,
       setValue = _ref5.setValue,
       ariaInvalid = _ref5.ariaInvalid,
+      themeValues = _ref5.themeValues,
       index = _ref5.index,
       _ref5$handleChange = _ref5.handleChange,
       handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange;
   return /*#__PURE__*/React.createElement(InputAndLabelContainer, {
     align: "center",
-    childGap: "0.5rem"
+    childGap: "0.5rem",
+    activeColor: themeValues.activeColor
   }, /*#__PURE__*/React.createElement(HiddenRadioInput, {
     "aria-invalid": ariaInvalid,
     style: {
@@ -26870,15 +26872,18 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     as: "label",
     htmlFor: id,
     extraStyles: "\n          font-size: 1rem;\n          display: flex; \n          width: 100%;\n          :hover {\n            cursor: pointer;\n          }\n        "
-  }, /*#__PURE__*/React.createElement(Circle, null), labelText));
+  }, /*#__PURE__*/React.createElement(Circle, {
+    activeColor: themeValues.activeColor,
+    inactiveBorderColor: themeValues.inactiveBorderColor
+  }), labelText));
 };
 
 var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$t);
 
-var activeColor$5 = "".concat(MATISSE_BLUE);
+var activeColor$6 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
 var fallbackValues$u = {
-  activeColor: activeColor$5,
+  activeColor: activeColor$6,
   inactiveColor: inactiveColor
 };
 
@@ -27054,14 +27059,14 @@ var SearchableSelect = function SearchableSelect(_ref) {
 
 var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$v, "default");
 
-var borderColor$3 = {
+var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
 };
 var borderSize = {
   "default": "1px"
 };
 var fallbackValues$w = {
-  borderColor: borderColor$3,
+  borderColor: borderColor$2,
   borderSize: borderSize
 };
 
@@ -37882,12 +37887,12 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
-var backgroundColor$6 = WHITE;
+var backgroundColor$5 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
 var fallbackValues$y = {
-  backgroundColor: backgroundColor$6,
+  backgroundColor: backgroundColor$5,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
   headerColor: headerColor
@@ -38040,11 +38045,11 @@ var Card = function Card(_ref) {
 var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$y);
 
 var fontFamily$6 = "Public Sans, sans-serif";
-var activeColor$6 = MATISSE_BLUE;
+var activeColor$7 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
 var fallbackValues$A = {
   fontFamily: fontFamily$6,
-  activeColor: activeColor$6,
+  activeColor: activeColor$7,
   linkColor: linkColor$3
 };
 
@@ -38174,11 +38179,11 @@ var TableCell_styled = styled.td.withConfig({
   return extraStyles;
 });
 
-var backgroundColor$7 = ALABASTER_WHITE;
-var borderColor$4 = GREY_CHATEAU;
+var backgroundColor$6 = ALABASTER_WHITE;
+var borderColor$3 = GREY_CHATEAU;
 var fallbackValues$B = {
-  backgroundColor: backgroundColor$7,
-  borderColor: borderColor$4
+  backgroundColor: backgroundColor$6,
+  borderColor: borderColor$3
 };
 
 var StyledTableHead = styled.thead.withConfig({
@@ -38196,10 +38201,10 @@ var StyledTableHead = styled.thead.withConfig({
   return fontSize;
 });
 
-var borderColor$5 = GREY_CHATEAU;
+var borderColor$4 = GREY_CHATEAU;
 var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
 var fallbackValues$C = {
-  borderColor: borderColor$5,
+  borderColor: borderColor$4,
   hoverBackgroundColor: hoverBackgroundColor$1
 };
 
@@ -40176,9 +40181,9 @@ AddressForm.reducer = reducer;
 AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
-var backgroundColor$8 = "#ebeffb";
+var backgroundColor$7 = "#ebeffb";
 var fallbackValues$D = {
-  backgroundColor: backgroundColor$8
+  backgroundColor: backgroundColor$7
 };
 
 var Banner = function Banner(_ref) {
@@ -41173,10 +41178,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
-var backgroundColor$9 = "#182848";
+var backgroundColor$8 = "#182848";
 var fallbackValues$G = {
   textColor: textColor$4,
-  backgroundColor: backgroundColor$9
+  backgroundColor: backgroundColor$8
 };
 
 var HighlightTabRow = function HighlightTabRow(_ref) {
@@ -46381,7 +46386,7 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$a = {
+var backgroundColor$9 = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
@@ -46396,7 +46401,7 @@ var fallbackValues$H = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$a
+  backgroundColor: backgroundColor$9
 };
 
 /*
@@ -46456,7 +46461,7 @@ var Module = function Module(_ref) {
 
 var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$H, "default"));
 
-var backgroundColor$b = {
+var backgroundColor$a = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -46465,7 +46470,7 @@ var shadowColor = {
   cms: "#292A33"
 };
 var fallbackValues$I = {
-  backgroundColor: backgroundColor$b,
+  backgroundColor: backgroundColor$a,
   shadowColor: shadowColor
 };
 
@@ -46624,14 +46629,14 @@ var TitleModule = function TitleModule(_ref) {
 
 var color$a = "#15749D";
 var hoverColor$5 = "#116285";
-var activeColor$7 = "#0E506D";
+var activeColor$8 = "#0E506D";
 var linkColor$4 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
 var fallbackValues$J = {
   color: color$a,
   hoverColor: hoverColor$5,
-  activeColor: activeColor$7,
+  activeColor: activeColor$8,
   linkColor: linkColor$4,
   fontWeight: fontWeight$6,
   modalLinkHoverFocus: modalLinkHoverFocus
@@ -47428,9 +47433,9 @@ var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$1 = WHITE;
-var activeColor$8 = MATISSE_BLUE;
+var activeColor$9 = MATISSE_BLUE;
 var fallbackValues$K = {
-  activeColor: activeColor$8,
+  activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$1,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
@@ -47705,7 +47710,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, !hideBackButton && /*#__PURE__*/React.createElement(Fragment$1, null, backButton), !hideForwardButton && /*#__PURE__*/React.createElement(Fragment$1, null, forwardButton))));
 };
 
-var backgroundColor$c = {
+var backgroundColor$b = {
   "default": "transparent",
   small: "transparent"
 };
@@ -47722,7 +47727,7 @@ var labeledAmountTotal = {
   small: "p"
 };
 var fallbackValues$L = {
-  backgroundColor: backgroundColor$c,
+  backgroundColor: backgroundColor$b,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -48119,7 +48124,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
 
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$M, "default");
 
-var backgroundColor$d = {
+var backgroundColor$c = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -48149,7 +48154,7 @@ var modalLinkHoverFocus$2 = {
   footer: standardInteractionStyles
 };
 var fallbackValues$N = {
-  backgroundColor: backgroundColor$d,
+  backgroundColor: backgroundColor$c,
   linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
@@ -49010,13 +49015,13 @@ var RadioGroup = function RadioGroup(_ref) {
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
-var borderColor$6 = "".concat(GREY_CHATEAU);
+var borderColor$5 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
 var fallbackValues$O = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
-  borderColor: borderColor$6,
+  borderColor: borderColor$5,
   focusStyles: focusStyles
 };