@thecb/components 4.1.12-beta.0 → 4.1.12

package/dist/index.cjs.js

@@ -19202,7 +19202,7 @@ function _templateObject2$c() {
 }
 
 function _templateObject$o() {
-  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  > * + * {\n    margin-top: 0.25rem;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n"]);
 
   _templateObject$o = function _templateObject() {
     return data;
@@ -19221,74 +19221,14 @@ var SelectField = styled__default.select(_templateObject3$6(), function (_ref2)
       showErrors = _ref2.showErrors;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : GHOST_GREY;
 }, FONT_WEIGHT_REGULAR, function (_ref3) {
-  var themeValues = _ref3.themeValues;
-  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
+  var disabled = _ref3.disabled;
+  return disabled ? SEASHELL_WHITE : WHITE;
 }, function (_ref4) {
-  var themeValues = _ref4.themeValues;
-  return themeValues.color && themeValues.color;
+  var disabled = _ref4.disabled;
+  return disabled ? DUSTY_GREY : MINESHAFT_GREY;
 }, MATISSE_BLUE);
 var SelectOption = styled__default.option(_templateObject4$3());
 
-var linkColor$1 = {
-  "default": "".concat(MATISSE_BLUE),
-  disabled: "".concat(MATISSE_BLUE)
-};
-var formBackgroundColor = {
-  "default": "".concat(WHITE),
-  disabled: "".concat(WHITE),
-  checkout: "".concat(ATHENS_GREY),
-  collapsible: "".concat(ATHENS_GREY)
-};
-var inputBackgroundColor = {
-  "default": "".concat(WHITE),
-  disabled: "".concat(SEASHELL_WHITE)
-};
-var color$5 = {
-  "default": "".concat(MINESHAFT_GREY),
-  disabled: "".concat(DUSTY_GREY)
-};
-var labelColor = {
-  "default": "".concat(CHARADE_GREY),
-  disabled: "".concat(CHARADE_GREY)
-};
-var borderColor = {
-  "default": "".concat(GREY_CHATEAU),
-  disabled: "".concat(GREY_CHATEAU)
-};
-var lineHeight$2 = {
-  "default": "1rem",
-  disabled: "1rem"
-};
-var fontSize$5 = {
-  "default": "0.875rem",
-  disabled: "0.875rem"
-};
-var errorFontSize = {
-  "default": "0.75rem",
-  disabled: "0.75rem"
-};
-var fontWeight$2 = {
-  "default": "".concat(FONT_WEIGHT_REGULAR),
-  disabled: "".concat(FONT_WEIGHT_REGULAR)
-};
-var hoverFocusStyles = {
-  "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
-  disabled: "color: #6E727E;"
-};
-var fallbackValues$f = {
-  linkColor: linkColor$1,
-  formBackgroundColor: formBackgroundColor,
-  inputBackgroundColor: inputBackgroundColor,
-  color: color$5,
-  labelColor: labelColor,
-  borderColor: borderColor,
-  lineHeight: lineHeight$2,
-  fontSize: fontSize$5,
-  errorFontSize: errorFontSize,
-  fontWeight: fontWeight$2,
-  hoverFocusStyles: hoverFocusStyles
-};
-
 var FormSelect = function FormSelect(_ref) {
   var fieldActions = _ref.fieldActions,
       labelTextWhenNoError = _ref.labelTextWhenNoError,
@@ -19297,9 +19237,7 @@ var FormSelect = function FormSelect(_ref) {
       field = _ref.field,
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
-      dropdownMaxHeight = _ref.dropdownMaxHeight,
-      disabledValues = _ref.disabledValues,
-      themeValues = _ref.themeValues;
+      dropdownMaxHeight = _ref.dropdownMaxHeight;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19322,26 +19260,18 @@ var FormSelect = function FormSelect(_ref) {
   });
   return /*#__PURE__*/React__default.createElement(SelectContainer, {
     ref: dropdownRef
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    minWidth: "100%"
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "space-between",
-    align: "center"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
-    as: "label",
     variant: "pS",
-    color: themeValues.labelColor,
-    weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }"
-  }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    color: STORM_GREY,
+    weight: "400",
+    extraStyles: "margin-bottom: 4px;"
+  }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Dropdown$1, {
     maxHeight: dropdownMaxHeight,
     placeholder: options[0] ? options[0].text : "",
     options: options,
     value: field.rawValue,
-    disabledValues: disabledValues,
     isOpen: open,
-    isError: field.hasErrors && field.dirty || field.hasErrors && showErrors,
+    isError: false,
     onSelect: onChange ? function (value) {
       return onChange(value);
     } : function (value) {
@@ -19353,18 +19283,9 @@ var FormSelect = function FormSelect(_ref) {
   }), /*#__PURE__*/React__default.createElement(SelectLabel, {
     field: field,
     showErrors: showErrors
-  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
-    color: ERROR_COLOR,
-    variant: "pXS",
-    weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }"
-  }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
-    extraStyles: "height: ".concat(themeValues.lineHeight, ";")
-  })));
+  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : null));
 };
 
-var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$f, "default");
-
 var options = [{
   text: "Afghanistan",
   value: "AF"
@@ -20115,7 +20036,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
       onChange = _ref.onChange;
-  return /*#__PURE__*/React__default.createElement(FormSelect$1, {
+  return /*#__PURE__*/React__default.createElement(FormSelect, {
     options: options,
     field: field,
     fieldActions: fieldActions,
@@ -20128,7 +20049,7 @@ var CountryDropdown = function CountryDropdown(_ref) {
 
 var backgroundColor$3 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
-var fallbackValues$g = {
+var fallbackValues$f = {
   backgroundColor: backgroundColor$3,
   boxShadow: boxShadow
 };
@@ -20149,7 +20070,7 @@ var DisplayBox = function DisplayBox(_ref) {
   }, children));
 };
 
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$g);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$f);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -20496,64 +20417,64 @@ var src_1 = src.FormattedInput;
 var src_2 = src.createFormat;
 var src_3 = src.format;
 
-var linkColor$2 = {
+var linkColor$1 = {
   "default": "".concat(MATISSE_BLUE),
   disabled: "".concat(MATISSE_BLUE)
 };
-var formBackgroundColor$1 = {
+var formBackgroundColor = {
   "default": "".concat(WHITE),
   disabled: "".concat(WHITE),
   checkout: "".concat(ATHENS_GREY),
   collapsible: "".concat(ATHENS_GREY)
 };
-var inputBackgroundColor$1 = {
+var inputBackgroundColor = {
   "default": "".concat(WHITE),
   disabled: "".concat(SEASHELL_WHITE)
 };
-var color$6 = {
+var color$5 = {
   "default": "".concat(MINESHAFT_GREY),
   disabled: "".concat(DUSTY_GREY)
 };
-var labelColor$1 = {
-  "default": "".concat(CHARADE_GREY),
-  disabled: "".concat(CHARADE_GREY)
+var labelColor = {
+  "default": "".concat(FIREFLY_GREY),
+  disabled: "".concat(FIREFLY_GREY)
 };
-var borderColor$1 = {
+var borderColor = {
   "default": "".concat(GREY_CHATEAU),
   disabled: "".concat(GREY_CHATEAU)
 };
-var lineHeight$3 = {
+var lineHeight$2 = {
   "default": "1rem",
   disabled: "1rem"
 };
-var fontSize$6 = {
+var fontSize$5 = {
   "default": "0.875rem",
   disabled: "0.875rem"
 };
-var errorFontSize$1 = {
+var errorFontSize = {
   "default": "0.75rem",
   disabled: "0.75rem"
 };
-var fontWeight$3 = {
+var fontWeight$2 = {
   "default": "".concat(FONT_WEIGHT_REGULAR),
   disabled: "".concat(FONT_WEIGHT_REGULAR)
 };
-var hoverFocusStyles$1 = {
+var hoverFocusStyles = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6E727E;"
 };
-var fallbackValues$h = {
-  linkColor: linkColor$2,
-  formBackgroundColor: formBackgroundColor$1,
-  inputBackgroundColor: inputBackgroundColor$1,
-  color: color$6,
-  labelColor: labelColor$1,
-  borderColor: borderColor$1,
-  lineHeight: lineHeight$3,
-  fontSize: fontSize$6,
-  errorFontSize: errorFontSize$1,
-  fontWeight: fontWeight$3,
-  hoverFocusStyles: hoverFocusStyles$1
+var fallbackValues$g = {
+  linkColor: linkColor$1,
+  formBackgroundColor: formBackgroundColor,
+  inputBackgroundColor: inputBackgroundColor,
+  color: color$5,
+  labelColor: labelColor,
+  borderColor: borderColor,
+  lineHeight: lineHeight$2,
+  fontSize: fontSize$5,
+  errorFontSize: errorFontSize,
+  fontWeight: fontWeight$2,
+  hoverFocusStyles: hoverFocusStyles
 };
 
 function _templateObject4$4() {
@@ -20769,7 +20690,7 @@ var FormInput = function FormInput(_ref13) {
   }, decorator)));
 };
 
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$h, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$g, "default");
 
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
@@ -20819,9 +20740,9 @@ var FormContainer = function FormContainer(_ref) {
   }, rest), children);
 };
 
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$h, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$g, "default");
 
-var fontSize$7 = {
+var fontSize$6 = {
   "default": "1rem",
   radio: "1.0625rem"
 };
@@ -20829,14 +20750,14 @@ var padding$1 = {
   "default": "0",
   radio: "0.625rem 0"
 };
-var color$7 = {
+var color$6 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$i = {
-  fontSize: fontSize$7,
+var fallbackValues$h = {
+  fontSize: fontSize$6,
   padding: padding$1,
-  color: color$7
+  color: color$6
 };
 
 var FormattedAddress = function FormattedAddress(_ref) {
@@ -20876,11 +20797,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
 
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$i, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$h, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$j = {
+var fallbackValues$i = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -20933,7 +20854,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$j, "default");
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$i, "default");
 
 function _templateObject3$8() {
   var data = _taggedTemplateLiteral(["\n  display: block;\n  top: auto;\n  bottom: 6px;\n  left: 2px;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  margin-top: 12px;\n  background-color: ", ";\n\n  &, &::before, &::after {\n    background-color: ", ";\n    width: 30px;\n    height: 3px;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before, &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: -10px;\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  }\n\n  &::after {\n    bottom: -10px;\n    top: -20px;\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                opacity 0.1s linear;\n  }\n\n  &.active, &.active::before, &.active::after {\n    background-color: ", ";\n  }\n\n  &.active {\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\n    transition-delay: 0.22s;\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  &.active::after {\n    top: 0;\n    opacity: 0;\n    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                opacity: 0.1s 0.22s linear;\n  }\n\n  &.active::before {\n    top: 0;\n    transform: rotate(-90deg);\n    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n"]);
@@ -21050,14 +20971,14 @@ var Jumbo = function Jumbo(_ref) {
 
 var Jumbo$1 = withWindowSize(Jumbo);
 
-var fontWeight$4 = {
+var fontWeight$3 = {
   "default": "600",
   p: "600",
   pL: "600",
   h6: "700"
 };
-var fallbackValues$k = {
-  fontWeight: fontWeight$4
+var fallbackValues$j = {
+  fontWeight: fontWeight$3
 };
 
 var LabeledAmount = function LabeledAmount(_ref) {
@@ -21083,7 +21004,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$k, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$j, "default");
 
 var weightTitle = {
   "default": "600",
@@ -21093,7 +21014,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "p"
 };
-var fallbackValues$l = {
+var fallbackValues$k = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -21122,11 +21043,11 @@ var LineItem = function LineItem(_ref) {
   }, amount));
 };
 
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$l, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$k, "default");
 
-var color$8 = "#15749D";
-var fallbackValues$m = {
-  color: color$8
+var color$7 = "#15749D";
+var fallbackValues$l = {
+  color: color$7
 };
 
 function _templateObject2$g() {
@@ -21177,7 +21098,7 @@ var Spinner$1 = function Spinner(_ref4) {
   })));
 };
 
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$m);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$l);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -21591,7 +21512,7 @@ var PasswordRequirements = function PasswordRequirements(_ref) {
   }))));
 };
 
-var color$9 = {
+var color$8 = {
   "default": "".concat(CHARADE_GREY),
   large: "".concat(BRIGHT_GREY)
 };
@@ -21599,8 +21520,8 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$n = {
-  color: color$9,
+var fallbackValues$m = {
+  color: color$8,
   height: height$1
 };
 
@@ -21688,12 +21609,12 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$n, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$m, "default");
 
 var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$o = {
+var fallbackValues$n = {
   backgroundColor: backgroundColor$4
 };
 
@@ -21721,11 +21642,11 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$o, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$n, "default");
 
 var activeColor$4 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
-var fallbackValues$p = {
+var fallbackValues$o = {
   activeColor: activeColor$4,
   inactiveColor: inactiveColor
 };
@@ -21821,16 +21742,16 @@ var RadioButton$1 = function RadioButton(_ref2) {
   })));
 };
 
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$p);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$o);
 
-var borderColor$2 = {
+var borderColor$1 = {
   "default": "".concat(GREY_CHATEAU)
 };
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$q = {
-  borderColor: borderColor$2,
+var fallbackValues$p = {
+  borderColor: borderColor$1,
   borderSize: borderSize
 };
 
@@ -21846,7 +21767,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$q, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$p, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -32411,7 +32332,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       countryCode = _ref.countryCode;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
-  return /*#__PURE__*/React__default.createElement(FormSelect$1, {
+  return /*#__PURE__*/React__default.createElement(FormSelect, {
     options: options,
     field: field,
     fieldActions: fieldActions,
@@ -32428,7 +32349,7 @@ var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
-var fallbackValues$r = {
+var fallbackValues$q = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   white: white,
@@ -32630,7 +32551,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, label))));
 };
 
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$r);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$q);
 
 var background$1 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -34562,7 +34483,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$s = {
+var fallbackValues$r = {
   titleColor: titleColor,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -34663,7 +34584,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$s);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$r);
 
 var EditNameForm = function EditNameForm(_ref) {
   var fields = _ref.fields,
@@ -35198,7 +35119,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$2 = "#ffffff";
 var backgroundColor$5 = "#182848";
-var fallbackValues$t = {
+var fallbackValues$s = {
   textColor: textColor$2,
   backgroundColor: backgroundColor$5
 };
@@ -35242,7 +35163,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter)));
 };
 
-var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$t));
+var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$s));
 
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
@@ -36577,11 +36498,11 @@ var Modal$1 = function Modal(_ref) {
   })))))))));
 };
 
-var fontSize$8 = {
+var fontSize$7 = {
   "default": "1.375rem",
   largeTitle: "1.75rem"
 };
-var fontWeight$5 = {
+var fontWeight$4 = {
   "default": "600",
   largeTitle: "700"
 };
@@ -36589,7 +36510,7 @@ var fontColor = {
   "default": CHARADE_GREY,
   largeTitle: CHARADE_GREY
 };
-var lineHeight$4 = {
+var lineHeight$3 = {
   "default": "2rem",
   largeTitle: "2rem"
 };
@@ -36617,11 +36538,11 @@ var backgroundColor$6 = {
   "default": WHITE,
   largeTitle: WHITE
 };
-var fallbackValues$u = {
-  fontSize: fontSize$8,
-  fontWeight: fontWeight$5,
+var fallbackValues$t = {
+  fontSize: fontSize$7,
+  fontWeight: fontWeight$4,
   fontColor: fontColor,
-  lineHeight: lineHeight$4,
+  lineHeight: lineHeight$3,
   textAlign: textAlign,
   titleType: titleType,
   titleSpacing: titleSpacing,
@@ -36658,7 +36579,7 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$u, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$t, "default"));
 
 var backgroundColor$7 = {
   profile: "#3b414d",
@@ -36668,7 +36589,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$v = {
+var fallbackValues$u = {
   backgroundColor: backgroundColor$7,
   shadowColor: shadowColor
 };
@@ -36709,7 +36630,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$v, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$u, "profile");
 
 function _templateObject$B() {
   var data = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 72px;\n"]);
@@ -36771,7 +36692,7 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$v, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$u, "profile");
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -38270,11 +38191,11 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
-var color$a = "#15749D";
+var color$9 = "#15749D";
 var hoverColor$4 = "#116285";
 var activeColor$5 = "#0E506D";
-var fallbackValues$w = {
-  color: color$a,
+var fallbackValues$v = {
+  color: color$9,
   hoverColor: hoverColor$4,
   activeColor: activeColor$5
 };
@@ -38344,7 +38265,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, modalExtraProps));
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$w);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$v);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -38901,7 +38822,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "pL"
 };
-var fallbackValues$x = {
+var fallbackValues$w = {
   backgroundColor: backgroundColor$8,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -39077,21 +38998,21 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$x, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$w, "default");
 
-var linkColor$3 = {
+var linkColor$2 = {
   "default": "#357fb8",
   footer: "#ffffff"
 };
-var fontSize$9 = {
+var fontSize$8 = {
   "default": "1rem",
   footer: "0.875rem"
 };
-var lineHeight$5 = {
+var lineHeight$4 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
-var fontWeight$6 = {
+var fontWeight$5 = {
   "default": FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
@@ -39099,11 +39020,11 @@ var modalLinkHoverFocus = {
   "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$y = {
-  linkColor: linkColor$3,
-  fontSize: fontSize$9,
-  lineHeight: lineHeight$5,
-  fontWeight: fontWeight$6,
+var fallbackValues$x = {
+  linkColor: linkColor$2,
+  fontSize: fontSize$8,
+  lineHeight: lineHeight$4,
+  fontWeight: fontWeight$5,
   modalLinkHoverFocus: modalLinkHoverFocus
 };
 
@@ -39162,7 +39083,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   });
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$y, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$x, "default");
 
 function _templateObject2$l() {
   var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
@@ -39326,7 +39247,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
+  }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect, {
     labelTextWhenNoError: "Account type",
     options: [{
       text: "Select account type",
@@ -39686,13 +39607,13 @@ PhoneForm.mapDispatchToProps = mapDispatchToProps$8;
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
-var borderColor$3 = "".concat(GREY_CHATEAU);
+var borderColor$2 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$z = {
+var fallbackValues$y = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
-  borderColor: borderColor$3,
+  borderColor: borderColor$2,
   focusStyles: focusStyles
 };
 
@@ -39879,7 +39800,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$z);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$y);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -40168,7 +40089,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$A = {
+var fallbackValues$z = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -40224,13 +40145,13 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$A);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$z);
 
 var backgroundColor$9 = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
-var linkColor$4 = {
+var linkColor$3 = {
   "default": "#357fb8",
   footer: "#ffffff"
 };
@@ -40238,15 +40159,15 @@ var border$2 = {
   "default": "#cdcdcd",
   footer: "#cdcdcd"
 };
-var fontSize$a = {
+var fontSize$9 = {
   "default": "1rem",
   footer: "0.875rem"
 };
-var lineHeight$6 = {
+var lineHeight$5 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
-var fontWeight$7 = {
+var fontWeight$6 = {
   "default": FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
@@ -40254,13 +40175,13 @@ var modalLinkHoverFocus$1 = {
   "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$B = {
+var fallbackValues$A = {
   backgroundColor: backgroundColor$9,
-  linkColor: linkColor$4,
+  linkColor: linkColor$3,
   border: border$2,
-  fontSize: fontSize$a,
-  lineHeight: lineHeight$6,
-  fontWeight: fontWeight$7,
+  fontSize: fontSize$9,
+  lineHeight: lineHeight$5,
+  fontWeight: fontWeight$6,
   modalLinkHoverFocus: modalLinkHoverFocus$1
 };
 
@@ -40318,7 +40239,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   });
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$B, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$A, "default");
 
 function _templateObject2$m() {
   var data = _taggedTemplateLiteral([""]);
@@ -40442,13 +40363,13 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
-var fontWeight$8 = "600";
+var fontWeight$7 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor = BRIGHT_GREY;
 var imageBackgroundColor = MATISSE_BLUE;
-var fallbackValues$C = {
-  fontWeight: fontWeight$8,
+var fallbackValues$B = {
+  fontWeight: fontWeight$7,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
   headerBackgroundColor: headerBackgroundColor,
@@ -40500,7 +40421,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$C));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$B));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -40548,7 +40469,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#F6F6F9";
-var fallbackValues$D = {
+var fallbackValues$C = {
   pageBackground: pageBackground
 };
 
@@ -40595,7 +40516,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$D));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$C));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -40637,7 +40558,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$D));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$C));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -40677,7 +40598,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$D));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$C));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -40731,7 +40652,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$D));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$C));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -40802,7 +40723,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$D));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$C));
 
 
 
@@ -40872,7 +40793,7 @@ exports.FormContainer = FormContainer$1;
 exports.FormInput = FormInput$1;
 exports.FormInputColumn = FormInputColumn;
 exports.FormInputRow = FormInputRow;
-exports.FormSelect = FormSelect$1;
+exports.FormSelect = FormSelect;
 exports.FormattedAddress = FormattedAddress$1;
 exports.FormattedCreditCard = FormattedCreditCard$1;
 exports.Frame = Frame;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.12-beta.0",
+  "version": "4.1.12",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -48,7 +48,7 @@
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
     "react-redux": "^7.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "6.0.0-alpha.3",
     "redux": "^4.0.5",
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",

package/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -1,5 +1,5 @@
 import {
-  CHARADE_GREY,
+  FIREFLY_GREY,
   MATISSE_BLUE,
   WHITE,
   SEASHELL_WHITE,
@@ -23,7 +23,7 @@ const inputBackgroundColor = {
   disabled: `${SEASHELL_WHITE}`
 };
 const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
-const labelColor = { default: `${CHARADE_GREY}`, disabled: `${CHARADE_GREY}` };
+const labelColor = { default: `${FIREFLY_GREY}`, disabled: `${FIREFLY_GREY}` };
 const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
 const lineHeight = { default: "1rem", disabled: "1rem" };
 const fontSize = { default: "0.875rem", disabled: "0.875rem" };

package/src/components/atoms/form-select/FormSelect.js

@@ -1,11 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
 import Dropdown from "../dropdown";
 import Text from "../text";
-import { ERROR_COLOR } from "../../../constants/colors";
+import { STORM_GREY } from "../../../constants/colors";
 import { SelectContainer, SelectLabel } from "./FormSelect.styled";
-import { fallbackValues } from "./FormSelect.theme";
-import { themeComponent } from "../../../util/themeUtils";
-import { Box, Cluster } from "../layouts";
 
 const FormSelect = ({
   fieldActions,
@@ -15,9 +12,7 @@ const FormSelect = ({
   field,
   showErrors,
   onChange,
-  dropdownMaxHeight,
-  disabledValues,
-  themeValues
+  dropdownMaxHeight
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -37,63 +32,33 @@ const FormSelect = ({
 
   return (
     <SelectContainer ref={dropdownRef}>
-      <Box padding="0" minWidth="100%">
-        <Cluster justify="space-between" align="center">
-          <Text
-            as="label"
-            variant="pS"
-            color={themeValues.labelColor}
-            weight={themeValues.fontWeight}
-            extraStyles={`word-break: break-word;
-              font-family: Public Sans;
-              &::first-letter {
-                text-transform: uppercase;
-              }`}
-          >
-            {labelTextWhenNoError}
-          </Text>
-        </Cluster>
-      </Box>
+      <Text
+        variant="pS"
+        color={STORM_GREY}
+        weight="400"
+        extraStyles={`margin-bottom: 4px;`}
+      >
+        {labelTextWhenNoError}
+      </Text>
       <Dropdown
         maxHeight={dropdownMaxHeight}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
         value={field.rawValue}
-        disabledValues={disabledValues}
         isOpen={open}
-        isError={
-          (field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
-        }
+        isError={false}
         onSelect={
           onChange ? value => onChange(value) : value => fieldActions.set(value)
         }
         onClick={() => setOpen(!open)}
       />
       <SelectLabel field={field} showErrors={showErrors}>
-        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
-          <Text
-            color={ERROR_COLOR}
-            variant="pXS"
-            weight={themeValues.fontWeight}
-            extraStyles={`word-break: break-word;
-                font-family: Public Sans;
-                &::first-letter {
-                  text-transform: uppercase;
-                }`}
-          >
-            {errorMessages[field.errors[0]]}
-          </Text>
-        ) : (
-          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
-        )}
+        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
+          ? errorMessages[field.errors[0]]
+          : null}
       </SelectLabel>
     </SelectContainer>
   );
 };
 
-export default themeComponent(
-  FormSelect,
-  "FormSelect",
-  fallbackValues,
-  "default"
-);
+export default FormSelect;

package/src/components/atoms/form-select/FormSelect.stories.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
 import { createFormState, required } from "redux-freeform";
 
 import FormSelect from "./FormSelect";
@@ -17,8 +18,7 @@ const options = [
   { value: "", text: "choose name" },
   { value: "foo", text: "foo" },
   { value: "bar", text: "bar" },
-  { value: "baz", text: "baz" },
-  { value: "disabled", text: "disabled" }
+  { value: "baz", text: "baz" }
 ];
 
 const story = page({
@@ -32,12 +32,10 @@ const story = page({
 
 const FormWrapper = ({ fields, actions }) => (
   <FormSelect
-    labelTextWhenNoError="Form Select"
     errorMessages={errorMessages}
     options={options}
     field={fields.thing}
     fieldActions={actions.fields.thing}
-    disabledValues={["disabled"]}
   />
 );
 

package/src/components/atoms/form-select/FormSelect.styled.js

@@ -1,6 +1,10 @@
 import styled from "styled-components";
 import {
+  MINESHAFT_GREY,
   STORM_GREY,
+  WHITE,
+  SEASHELL_WHITE,
+  DUSTY_GREY,
   GHOST_GREY,
   ERROR_COLOR,
   MATISSE_BLUE
@@ -13,9 +17,6 @@ export const SelectContainer = styled.div`
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
-  > * + * {
-    margin-top: 0.25rem;
-  }
 `;
 
 export const SelectLabel = styled.label`
@@ -52,9 +53,8 @@ export const SelectField = styled.select`
   font-family: Public Sans;
   line-height: 2rem;
   font-weight: ${FONT_WEIGHT_REGULAR};
-  background-color: ${({ themeValues }) =>
-    themeValues.inputBackgroundColor && themeValues.inputBackgroundColor};
-  color: ${({ themeValues }) => themeValues.color && themeValues.color};
+  background-color: ${({ disabled }) => (disabled ? SEASHELL_WHITE : WHITE)};
+  color: ${({ disabled }) => (disabled ? DUSTY_GREY : MINESHAFT_GREY)};
   box-shadow: none;
 
   &:focus {

package/src/components/atoms/form-select/FormSelect.theme.js

@@ -1,52 +0,0 @@
-import {
-  CHARADE_GREY,
-  MATISSE_BLUE,
-  WHITE,
-  SEASHELL_WHITE,
-  MINESHAFT_GREY,
-  DUSTY_GREY,
-  GREY_CHATEAU,
-  ATHENS_GREY
-} from "../../../constants/colors";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-
-const linkColor = { default: `${MATISSE_BLUE}`, disabled: `${MATISSE_BLUE}` };
-const formBackgroundColor = {
-  default: `${WHITE}`,
-  disabled: `${WHITE}`,
-  checkout: `${ATHENS_GREY}`,
-  collapsible: `${ATHENS_GREY}`
-};
-
-const inputBackgroundColor = {
-  default: `${WHITE}`,
-  disabled: `${SEASHELL_WHITE}`
-};
-const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
-const labelColor = { default: `${CHARADE_GREY}`, disabled: `${CHARADE_GREY}` };
-const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
-const lineHeight = { default: "1rem", disabled: "1rem" };
-const fontSize = { default: "0.875rem", disabled: "0.875rem" };
-const errorFontSize = { default: "0.75rem", disabled: "0.75rem" };
-const fontWeight = {
-  default: `${FONT_WEIGHT_REGULAR}`,
-  disabled: `${FONT_WEIGHT_REGULAR}`
-};
-const hoverFocusStyles = {
-  default: `color: #0E506D; outline: none; text-decoration: underline;  `,
-  disabled: `color: #6E727E;`
-};
-
-export const fallbackValues = {
-  linkColor,
-  formBackgroundColor,
-  inputBackgroundColor,
-  color,
-  labelColor,
-  borderColor,
-  lineHeight,
-  fontSize,
-  errorFontSize,
-  fontWeight,
-  hoverFocusStyles
-};