@thecb/components 4.3.0 → 4.3.3

package/dist/index.cjs.js

@@ -6471,7 +6471,7 @@ var Center = function Center(_ref) {
 };
 
 function _templateObject2$2() {
-  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  margin: calc(", " / 2 * -1);\n  min-height: ", ";\n  min-width: ", ";\n\n  > * {\n    margin: calc(", " / 2);\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  margin: calc(", " / 2 * -1);\n  min-height: ", ";\n  min-width: ", ";\n  > * {\n    margin: calc(", " / 2);\n  }\n"]);
 
   _templateObject2$2 = function _templateObject2() {
     return data;
@@ -15609,19 +15609,10 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
+  subClass.__proto__ = superClass;
 }
 
 function _getPrototypeOf(o) {
@@ -15631,6 +15622,15 @@ function _getPrototypeOf(o) {
   return _getPrototypeOf(o);
 }
 
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 function _isNativeFunction(fn) {
   return Function.toString.call(fn).indexOf("[native code]") !== -1;
 }
@@ -15641,7 +15641,7 @@ function _isNativeReflectConstruct() {
   if (typeof Proxy === "function") return true;
 
   try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
     return true;
   } catch (e) {
     return false;
@@ -15781,9 +15781,7 @@ var ERRORS = {
   "73": "Please provide a valid CSS variable.\n\n",
   "74": "CSS variable not found and no default was provided.\n\n",
   "75": "important requires a valid style object, got a %s instead.\n\n",
-  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n",
-  "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
-  "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
+  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
 };
 /**
  * super basic version of sprintf
@@ -18583,7 +18581,7 @@ var textColor = {
   "default": "".concat(CHARADE_GREY)
 };
 var disabledCheckColor = {
-  "default": "".concat(GHOST_GREY, ";")
+  "default": "".concat(WHITE, ";")
 };
 var checkColor = {
   "default": "".concat(WHITE, ";")
@@ -18594,6 +18592,9 @@ var errorStyles = {
 var focusedStyles = {
   "default": "box-shadow: 0 0 5px 0 ".concat(MATISSE_BLUE, ";")
 };
+var disabledCheckedStyles = {
+  "default": "\n  background: #6d717e;\n  border: 1px solid #6d717e;\n"
+};
 var disabledStyles = {
   "default": "\n  background: ".concat(SEASHELL_WHITE, ";\n  border: 1px solid ").concat(GHOST_GREY, ";\n")
 };
@@ -18615,7 +18616,8 @@ var fallbackValues$c = {
   focusedStyles: focusedStyles,
   disabledStyles: disabledStyles,
   checkedStyles: checkedStyles,
-  defaultStyles: defaultStyles
+  defaultStyles: defaultStyles,
+  disabledCheckedStyles: disabledCheckedStyles
 };
 
 function _templateObject11() {
@@ -18750,8 +18752,9 @@ var StyledCheckbox = styled__default.div(_templateObject7$1(), CheckboxIcon, fun
       checkedStyles = _ref3.checkedStyles,
       focusedStyles = _ref3.focusedStyles,
       errorStyles = _ref3.errorStyles,
-      disabledStyles = _ref3.disabledStyles;
-  return error ? styled.css(_templateObject8(), errorStyles, focused && focusedStyles) : disabled ? styled.css(_templateObject9(), disabledStyles) : checked ? styled.css(_templateObject10(), checkedStyles, focused && focusedStyles) : styled.css(_templateObject11(), defaultStyles, focused && focusedStyles);
+      disabledStyles = _ref3.disabledStyles,
+      disabledCheckedStyles = _ref3.disabledCheckedStyles;
+  return error ? styled.css(_templateObject8(), errorStyles, focused && focusedStyles) : disabled ? styled.css(_templateObject9(), checked ? disabledCheckedStyles : disabledStyles) : checked ? styled.css(_templateObject10(), checkedStyles, focused && focusedStyles) : styled.css(_templateObject11(), defaultStyles, focused && focusedStyles);
 });
 
 var Checkbox = function Checkbox(_ref4) {
@@ -18766,7 +18769,8 @@ var Checkbox = function Checkbox(_ref4) {
       _ref4$hidden = _ref4.hidden,
       hidden = _ref4$hidden === void 0 ? false : _ref4$hidden,
       _ref4$error = _ref4.error,
-      error = _ref4$error === void 0 ? false : _ref4$error;
+      error = _ref4$error === void 0 ? false : _ref4$error,
+      textExtraStyles = _ref4.textExtraStyles;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18813,6 +18817,7 @@ var Checkbox = function Checkbox(_ref4) {
     checkedStyles: themeValues.checkedStyles,
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
+    disabledCheckedStyles: themeValues.disabledCheckedStyles,
     focusedStyles: themeValues.focusedStyles
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
@@ -18825,7 +18830,7 @@ var Checkbox = function Checkbox(_ref4) {
     variant: "p",
     weight: themeValues.textFontWeight,
     color: themeValues.textColor,
-    extraStyles: "margin-left: 1rem"
+    extraStyles: textExtraStyles ? "".concat(textExtraStyles, " ").concat(disabled && "color: #6e727e; background-color: #f7f7f7;", " ") : "margin-left: 1rem ".concat(disabled && "color: #6e727e; background-color: #f7f7f7;")
   }, title)));
 };
 
@@ -19125,7 +19130,7 @@ function _templateObject2$b() {
 }
 
 function _templateObject$n() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  padding-left: 8px;\n  flex-direction: column;\n  justify-content: center;\n  transition: transform 0.3s ease;\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  transition: transform 0.3s ease;\n  ", "\n"]);
 
   _templateObject$n = function _templateObject() {
     return data;
@@ -19183,7 +19188,8 @@ var Dropdown = function Dropdown(_ref9) {
       themeValues = _ref9.themeValues,
       maxHeight = _ref9.maxHeight,
       _ref9$widthFitOptions = _ref9.widthFitOptions,
-      widthFitOptions = _ref9$widthFitOptions === void 0 ? false : _ref9$widthFitOptions;
+      widthFitOptions = _ref9$widthFitOptions === void 0 ? false : _ref9$widthFitOptions,
+      disabled = _ref9.disabled;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19319,7 +19325,8 @@ var Dropdown = function Dropdown(_ref9) {
     padding: "0",
     width: "100%",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
-    "aria-expanded": isOpen
+    "aria-expanded": isOpen,
+    extraStyles: disabled && "color: #6e727e;\n      background-color: #f7f7f7;\n      pointer-events: none;"
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "button",
     background: isOpen ? themeValues.hoverColor : WHITE,
@@ -19330,8 +19337,8 @@ var Dropdown = function Dropdown(_ref9) {
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
     borderRadius: "2px",
     tabIndex: 0,
-    extraStyles: "height: 48px;",
-    dataQa: placeholder
+    dataQa: placeholder,
+    extraStyles: "height: 48px;\n          ".concat(disabled && "color: #6e727e;\n          background-color: #f7f7f7;\n          pointer-events: none;", "\n          ")
   }, /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     bottomItem: 2
@@ -19341,7 +19348,8 @@ var Dropdown = function Dropdown(_ref9) {
     onChange: noop,
     themeValues: themeValues
   }) : /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "p"
+    variant: "p",
+    extraStyles: disabled && "color: #6e727e;\n            background-color: #f7f7f7;\n            pointer-events: none;"
   }, value ? (_options$find = options.find(function (option) {
     return option.value === value;
   })) === null || _options$find === void 0 ? void 0 : _options$find.text : placeholder), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -19492,6 +19500,7 @@ var FormSelect = function FormSelect(_ref) {
       onChange = _ref.onChange,
       dropdownMaxHeight = _ref.dropdownMaxHeight,
       disabledValues = _ref.disabledValues,
+      disabled = _ref.disabled,
       themeValues = _ref.themeValues;
 
   var _useState = React.useState(false),
@@ -19514,7 +19523,8 @@ var FormSelect = function FormSelect(_ref) {
     };
   });
   return /*#__PURE__*/React__default.createElement(SelectContainer, {
-    ref: dropdownRef
+    ref: dropdownRef,
+    disabled: disabled
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%"
@@ -19544,7 +19554,8 @@ var FormSelect = function FormSelect(_ref) {
     },
     onClick: function onClick() {
       return setOpen(!open);
-    }
+    },
+    disabled: disabled
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -20755,9 +20766,29 @@ var fallbackValues$h = {
   formFooterPanel: formFooterPanel
 };
 
-function _templateObject4$3() {
+function _templateObject6$2() {
   var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
+  _templateObject6$2 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5$2() {
+  var data = _taggedTemplateLiteral(["\n      color: #6e727e;\n      background-color: #f7f7f7;\n    "]);
+
+  _templateObject5$2 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4$3() {
+  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"]);
+
   _templateObject4$3 = function _templateObject4() {
     return data;
   };
@@ -20766,7 +20797,7 @@ function _templateObject4$3() {
 }
 
 function _templateObject3$7() {
-  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
   _templateObject3$7 = function _templateObject3() {
     return data;
@@ -20776,7 +20807,7 @@ function _templateObject3$7() {
 }
 
 function _templateObject2$d() {
-  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
+  var data = _taggedTemplateLiteral(["\n      color: #6e727e;\n      background-color: #f7f7f7;\n    "]);
 
   _templateObject2$d = function _templateObject2() {
     return data;
@@ -20786,7 +20817,7 @@ function _templateObject2$d() {
 }
 
 function _templateObject$p() {
-  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"]);
 
   _templateObject$p = function _templateObject() {
     return data;
@@ -20813,58 +20844,64 @@ var InputField = styled__default.input(_templateObject$p(), function (_ref) {
       themeValues = _ref5.themeValues;
   return background && "background: ".concat(themeValues.inputBackgroundColor, " url(").concat(background, ") no-repeat right 0.5rem center;");
 }, ROYAL_BLUE, function (_ref6) {
-  var extraStyles = _ref6.extraStyles;
-  return styled.css(_templateObject2$d(), extraStyles);
+  var disabled = _ref6.disabled;
+  return disabled && styled.css(_templateObject2$d());
+}, function (_ref7) {
+  var extraStyles = _ref7.extraStyles;
+  return styled.css(_templateObject3$7(), extraStyles);
 }); // eslint-disable-next-line no-unused-vars
 
-var FormattedInputField = styled__default(function (_ref7) {
-  var showErrors = _ref7.showErrors,
-      themeValues = _ref7.themeValues,
-      props = _objectWithoutProperties(_ref7, ["showErrors", "themeValues"]);
+var FormattedInputField = styled__default(function (_ref8) {
+  var showErrors = _ref8.showErrors,
+      themeValues = _ref8.themeValues,
+      props = _objectWithoutProperties(_ref8, ["showErrors", "themeValues"]);
 
   return /*#__PURE__*/React__default.createElement(src_1, props);
-})(_templateObject3$7(), function (_ref8) {
-  var field = _ref8.field,
-      showErrors = _ref8.showErrors,
-      themeValues = _ref8.themeValues;
+})(_templateObject4$3(), function (_ref9) {
+  var field = _ref9.field,
+      showErrors = _ref9.showErrors,
+      themeValues = _ref9.themeValues;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : themeValues.borderColor;
-}, function (_ref9) {
-  var customHeight = _ref9.customHeight;
+}, function (_ref10) {
+  var customHeight = _ref10.customHeight;
   return customHeight ? customHeight : "48px";
-}, FONT_WEIGHT_REGULAR, function (_ref10) {
-  var themeValues = _ref10.themeValues;
-  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_ref11) {
+}, FONT_WEIGHT_REGULAR, function (_ref11) {
   var themeValues = _ref11.themeValues;
+  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
+}, function (_ref12) {
+  var themeValues = _ref12.themeValues;
   return themeValues.color && themeValues.color;
-}, ROYAL_BLUE, function (_ref12) {
-  var extraStyles = _ref12.extraStyles;
-  return styled.css(_templateObject4$3(), extraStyles);
+}, ROYAL_BLUE, function (_ref13) {
+  var disabled = _ref13.disabled;
+  return disabled && styled.css(_templateObject5$2());
+}, function (_ref14) {
+  var extraStyles = _ref14.extraStyles;
+  return styled.css(_templateObject6$2(), extraStyles);
 });
 
-var FormInput = function FormInput(_ref13) {
-  var _ref13$type = _ref13.type,
-      type = _ref13$type === void 0 ? "text" : _ref13$type,
-      _ref13$labelTextWhenN = _ref13.labelTextWhenNoError,
-      labelTextWhenNoError = _ref13$labelTextWhenN === void 0 ? "" : _ref13$labelTextWhenN,
-      errorMessages = _ref13.errorMessages,
-      _ref13$isNum = _ref13.isNum,
-      isNum = _ref13$isNum === void 0 ? false : _ref13$isNum,
-      _ref13$isEmail = _ref13.isEmail,
-      isEmail = _ref13$isEmail === void 0 ? false : _ref13$isEmail,
-      _ref13$helperModal = _ref13.helperModal,
-      helperModal = _ref13$helperModal === void 0 ? false : _ref13$helperModal,
-      field = _ref13.field,
-      fieldActions = _ref13.fieldActions,
-      showErrors = _ref13.showErrors,
-      _ref13$formatter = _ref13.formatter,
-      formatter = _ref13$formatter === void 0 ? null : _ref13$formatter,
-      decorator = _ref13.decorator,
-      themeValues = _ref13.themeValues,
-      background = _ref13.background,
-      customHeight = _ref13.customHeight,
-      extraStyles = _ref13.extraStyles,
-      props = _objectWithoutProperties(_ref13, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"]);
+var FormInput = function FormInput(_ref15) {
+  var _ref15$type = _ref15.type,
+      type = _ref15$type === void 0 ? "text" : _ref15$type,
+      _ref15$labelTextWhenN = _ref15.labelTextWhenNoError,
+      labelTextWhenNoError = _ref15$labelTextWhenN === void 0 ? "" : _ref15$labelTextWhenN,
+      errorMessages = _ref15.errorMessages,
+      _ref15$isNum = _ref15.isNum,
+      isNum = _ref15$isNum === void 0 ? false : _ref15$isNum,
+      _ref15$isEmail = _ref15.isEmail,
+      isEmail = _ref15$isEmail === void 0 ? false : _ref15$isEmail,
+      _ref15$helperModal = _ref15.helperModal,
+      helperModal = _ref15$helperModal === void 0 ? false : _ref15$helperModal,
+      field = _ref15.field,
+      fieldActions = _ref15.fieldActions,
+      showErrors = _ref15.showErrors,
+      _ref15$formatter = _ref15.formatter,
+      formatter = _ref15$formatter === void 0 ? null : _ref15$formatter,
+      decorator = _ref15.decorator,
+      themeValues = _ref15.themeValues,
+      background = _ref15.background,
+      customHeight = _ref15.customHeight,
+      extraStyles = _ref15.extraStyles,
+      props = _objectWithoutProperties(_ref15, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"]);
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -21638,20 +21675,20 @@ function _templateObject7$2() {
   return data;
 }
 
-function _templateObject6$2() {
+function _templateObject6$3() {
   var data = _taggedTemplateLiteral(["", " needs a number"]);
 
-  _templateObject6$2 = function _templateObject6() {
+  _templateObject6$3 = function _templateObject6() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject5$2() {
+function _templateObject5$3() {
   var data = _taggedTemplateLiteral(["", " is not a valid email address"]);
 
-  _templateObject5$2 = function _templateObject5() {
+  _templateObject5$3 = function _templateObject5() {
     return data;
   };
 
@@ -21737,7 +21774,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$3(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$3(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -22090,13 +22127,90 @@ var RadioButton$1 = function RadioButton(_ref2) {
 
 var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$p);
 
+var border$2 = {
+  "default": "1px solid #caced8"
+};
+var fallbackValues$q = {
+  border: border$2
+};
+
+var SELECT_ALL = "Select All";
+
+var SearchableSelect = function SearchableSelect(_ref) {
+  var items = _ref.items,
+      selectedItems = _ref.selectedItems,
+      allSelected = _ref.allSelected,
+      toggleSelectAllItems = _ref.toggleSelectAllItems,
+      selectItem = _ref.selectItem,
+      fields = _ref.fields,
+      actions = _ref.actions,
+      disabled = _ref.disabled,
+      themeValues = _ref.themeValues;
+
+  var _useState = React.useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      itemList = _useState2[0],
+      setItemList = _useState2[1];
+
+  React.useEffect(function () {
+    return setItemList(items);
+  }, [items, selectedItems]);
+  React.useEffect(function () {
+    var filteredItems = items.filter(function (item) {
+      var _item$name, _fields$searchTerm, _fields$searchTerm$ra;
+
+      return item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toLowerCase().includes(fields === null || fields === void 0 ? void 0 : (_fields$searchTerm = fields.searchTerm) === null || _fields$searchTerm === void 0 ? void 0 : (_fields$searchTerm$ra = _fields$searchTerm.rawValue) === null || _fields$searchTerm$ra === void 0 ? void 0 : _fields$searchTerm$ra.toLowerCase());
+    });
+    setItemList(filteredItems);
+  }, [fields.searchTerm.rawValue]);
+
+  var handleSelect = function handleSelect(value) {
+    if (value.name === SELECT_ALL) {
+      allSelected ? toggleSelectAllItems(false) : toggleSelectAllItems(true);
+    } else {
+      selectItem(value);
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1rem",
+    border: themeValues.border,
+    extraStyles: disabled && "color: #6e727e; background-color: #f7f7f7; pointer-events: none;"
+  }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
+    errorMessages: {},
+    field: fields.searchTerm,
+    fieldActions: actions.fields.searchTerm,
+    placeholder: "Search departments",
+    disabled: disabled
+  }), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.5rem 0",
+    extraStyles: "overflow-y: scroll; height: 250px;"
+  }, /*#__PURE__*/React__default.createElement(Stack, null, itemList.map(function (value) {
+    return /*#__PURE__*/React__default.createElement(Checkbox$1, {
+      key: value.name,
+      title: value.name,
+      name: value.name,
+      checked: selectedItems.find(function (item) {
+        return item.name === value.name;
+      }),
+      onChange: function onChange() {
+        return handleSelect(value);
+      },
+      textExtraStyles: "margin: 0;",
+      disabled: disabled
+    });
+  })))));
+};
+
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$q, "default");
+
 var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
 };
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$q = {
+var fallbackValues$r = {
   borderColor: borderColor$2,
   borderSize: borderSize
 };
@@ -22113,7 +22227,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$q, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$r, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -32695,7 +32809,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$s = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   white: white,
@@ -32897,7 +33011,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, label))));
 };
 
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$r);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$s);
 
 var background$1 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -34819,7 +34933,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$s = {
+var fallbackValues$t = {
   titleColor: titleColor,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -34926,7 +35040,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$s);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$t);
 
 var EditNameForm = function EditNameForm(_ref) {
   var fields = _ref.fields,
@@ -35156,20 +35270,20 @@ function _templateObject7$3() {
   return data;
 }
 
-function _templateObject6$3() {
+function _templateObject6$4() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n  justify-content: flex-end;\n  ", ";\n  flex: 1;\n"]);
 
-  _templateObject6$3 = function _templateObject6() {
+  _templateObject6$4 = function _templateObject6() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject5$3() {
+function _templateObject5$4() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  width: 100%;\n  border-bottom: 1px solid ", ";\n"]);
 
-  _templateObject5$3 = function _templateObject5() {
+  _templateObject5$4 = function _templateObject5() {
     return data;
   };
 
@@ -35237,8 +35351,8 @@ var EditableListAction = styled__default.div(_templateObject4$6(), MATISSE_BLUE,
   var hide = _ref6.hide;
   return hide ? "none" : "flex";
 });
-var ItemWrapper = styled__default.div(_templateObject5$3(), GHOST_GREY);
-var ActionWrapper = styled__default.div(_templateObject6$3(), function (_ref7) {
+var ItemWrapper = styled__default.div(_templateObject5$4(), GHOST_GREY);
+var ActionWrapper = styled__default.div(_templateObject6$4(), function (_ref7) {
   var isMobile = _ref7.isMobile;
   return isMobile && "display: none";
 });
@@ -35442,7 +35556,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$2 = "#ffffff";
 var backgroundColor$5 = "#182848";
-var fallbackValues$t = {
+var fallbackValues$u = {
   textColor: textColor$2,
   backgroundColor: backgroundColor$5
 };
@@ -35488,7 +35602,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$u));
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -36941,6 +37055,182 @@ var PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
 var MISC_BILL_ICON = "MISC_SINGLE_BILL";
 var iconsMap = (_iconsMap = {}, _defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), _defineProperty(_iconsMap, ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), _defineProperty(_iconsMap, ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), _defineProperty(_iconsMap, ACCOUNTS_DENTAL_ICON, AccountDentalIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), _defineProperty(_iconsMap, PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), _defineProperty(_iconsMap, PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), _defineProperty(_iconsMap, PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), _defineProperty(_iconsMap, PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), _defineProperty(_iconsMap, PROPERTIES_LAND_ICON, PropertyLandIcon), _defineProperty(_iconsMap, PROPERTIES_CAR_ICON, PropertyCarIcon), _defineProperty(_iconsMap, PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), _defineProperty(_iconsMap, PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), _defineProperty(_iconsMap, MISC_BILL_ICON, AccountBillIcon), _iconsMap);
 
+var _roleDescriptions;
+var RESEARCHER = "RESEARCHER";
+var AGENCY_ADMIN = "AGENCY_ADMIN";
+var CLIENT_ADMIN = "CLIENT_ADMIN";
+var SUPERVISOR = "SUPERVISOR";
+var CB_ADMIN = "CITYBASE_ADMIN";
+var CREATE_CLIENT_ADMIN = "CREATE_CLIENT_ADMIN";
+var roleDescriptions = (_roleDescriptions = {}, _defineProperty(_roleDescriptions, RESEARCHER, "Researcher"), _defineProperty(_roleDescriptions, AGENCY_ADMIN, "Agency admin"), _defineProperty(_roleDescriptions, CLIENT_ADMIN, "Client admin"), _defineProperty(_roleDescriptions, SUPERVISOR, "Supervisor"), _defineProperty(_roleDescriptions, CB_ADMIN, "Citybase admin"), _roleDescriptions);
+
+var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "default" : _ref$variant,
+      fields = _ref.fields,
+      actions = _ref.actions,
+      clearOnDismount = _ref.clearOnDismount,
+      showErrors = _ref.showErrors,
+      _ref$handleSubmit = _ref.handleSubmit,
+      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      allAgencyOptions = _ref.allAgencyOptions,
+      selectedAgencies = _ref.selectedAgencies,
+      allSelected = _ref.allSelected,
+      toggleSelectAllAgencies = _ref.toggleSelectAllAgencies,
+      selectAgency = _ref.selectAgency,
+      roleOptions = _ref.roleOptions,
+      clientOptions = _ref.clientOptions,
+      disabled = _ref.disabled,
+      emailDisabled = _ref.emailDisabled,
+      roleDisabled = _ref.roleDisabled,
+      formType = _ref.formType;
+  React.useEffect(function () {
+    if (formType === CREATE_CLIENT_ADMIN) {
+      actions.fields.client.addValidator(required());
+    }
+  }, []);
+
+  if (clearOnDismount) {
+    React.useEffect(function () {
+      return function () {
+        return actions.form.clear();
+      };
+    }, []);
+  }
+
+  var clientErrorMessages = _defineProperty({}, required.error, "Client is required");
+
+  var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
+
+  var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
+
+  var emailErrorMessages = _defineProperty({}, required.error, "Email is required");
+
+  var roleErrorMessages = _defineProperty({}, required.error, "Role is required");
+
+  return /*#__PURE__*/React__default.createElement(FormContainer$1, {
+    variant: variant,
+    role: "form",
+    "aria-label": "user-info-form"
+  }, /*#__PURE__*/React__default.createElement(Stack, null, formType === CREATE_CLIENT_ADMIN && /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h6",
+    weight: "700",
+    margin: "0 0 1rem"
+  }, "Select Client"), /*#__PURE__*/React__default.createElement(FormSelect$1, {
+    labelTextWhenNoError: "Client",
+    errorMessages: clientErrorMessages,
+    options: clientOptions.map(function (client) {
+      return {
+        text: client,
+        value: client,
+        id: client
+      };
+    }),
+    field: fields.client,
+    fieldActions: actions.fields.client,
+    showErrors: showErrors,
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && handleSubmit(e);
+    }
+  })), /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h6",
+    weight: "700",
+    margin: "0 0 1rem"
+  }, "Personal Information"), /*#__PURE__*/React__default.createElement(FormInput$1, {
+    labelTextWhenNoError: "First Name",
+    errorMessages: firstNameErrorMessages,
+    field: fields.firstName,
+    fieldActions: actions.fields.firstName,
+    showErrors: showErrors,
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && handleSubmit(e);
+    }
+  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
+    labelTextWhenNoError: "Last Name",
+    errorMessages: lastNameErrorMessages,
+    field: fields.lastName,
+    fieldActions: actions.fields.lastName,
+    showErrors: showErrors,
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && handleSubmit(e);
+    }
+  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
+    labelTextWhenNoError: "Email",
+    errorMessages: emailErrorMessages,
+    field: fields.email,
+    fieldActions: actions.fields.email,
+    showErrors: showErrors,
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && handleSubmit(e);
+    },
+    disabled: disabled || emailDisabled
+  })), /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h6",
+    weight: "700",
+    margin: "0 0 1rem"
+  }, "Dashboard Settings"), /*#__PURE__*/React__default.createElement(FormSelect$1, {
+    labelTextWhenNoError: "Role",
+    errorMessages: roleErrorMessages,
+    options: roleOptions.map(function (role) {
+      return {
+        text: roleDescriptions[role],
+        value: role,
+        id: role
+      };
+    }),
+    field: fields.role,
+    fieldActions: actions.fields.role,
+    showErrors: showErrors,
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && handleSubmit(e);
+    },
+    disabled: disabled || roleDisabled
+  })), formType !== CREATE_CLIENT_ADMIN && /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h6",
+    weight: "700",
+    margin: "0 0 1rem"
+  }, "Select Agencies"), /*#__PURE__*/React__default.createElement(SearchableSelect$1, {
+    actions: actions,
+    fields: fields,
+    items: allAgencyOptions,
+    selectedItems: selectedAgencies,
+    allSelected: allSelected,
+    toggleSelectAllItems: toggleSelectAllAgencies,
+    selectItem: selectAgency,
+    disabled: disabled
+  }))));
+};
+
+var formConfig$5 = {
+  client: {
+    validators: []
+  },
+  firstName: {
+    validators: [required()]
+  },
+  lastName: {
+    validators: [required()]
+  },
+  email: {
+    validators: [required(), isProbablyEmail()]
+  },
+  role: {
+    validators: [required()]
+  },
+  searchTerm: {
+    validators: []
+  }
+};
+
+var _createFormState$5 = createFormState(formConfig$5),
+    reducer$5 = _createFormState$5.reducer,
+    mapStateToProps$6 = _createFormState$5.mapStateToProps,
+    mapDispatchToProps$5 = _createFormState$5.mapDispatchToProps;
+
+InternalUserInfoForm.reducer = reducer$5;
+InternalUserInfoForm.mapStateToProps = mapStateToProps$6;
+InternalUserInfoForm.mapDispatchToProps = mapDispatchToProps$5;
+
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
 
@@ -36990,7 +37280,7 @@ var LoginForm = function LoginForm(_ref) {
   }));
 };
 
-var formConfig$5 = {
+var formConfig$6 = {
   email: {
     validators: [required(), isProbablyEmail()]
   },
@@ -36999,14 +37289,14 @@ var formConfig$5 = {
   }
 };
 
-var _createFormState$5 = createFormState(formConfig$5),
-    reducer$5 = _createFormState$5.reducer,
-    mapStateToProps$6 = _createFormState$5.mapStateToProps,
-    mapDispatchToProps$5 = _createFormState$5.mapDispatchToProps;
+var _createFormState$6 = createFormState(formConfig$6),
+    reducer$6 = _createFormState$6.reducer,
+    mapStateToProps$7 = _createFormState$6.mapStateToProps,
+    mapDispatchToProps$6 = _createFormState$6.mapDispatchToProps;
 
-LoginForm.reducer = reducer$5;
-LoginForm.mapStateToProps = mapStateToProps$6;
-LoginForm.mapDispatchToProps = mapDispatchToProps$5;
+LoginForm.reducer = reducer$6;
+LoginForm.mapStateToProps = mapStateToProps$7;
+LoginForm.mapDispatchToProps = mapDispatchToProps$6;
 
 var candidateSelectors = [
   'input',
@@ -38313,7 +38603,7 @@ var backgroundColor$6 = {
   "default": WHITE,
   largeTitle: WHITE
 };
-var fallbackValues$u = {
+var fallbackValues$v = {
   fontSize: fontSize$8,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -38354,7 +38644,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$v, "default"));
 
 var backgroundColor$7 = {
   profile: "#3b414d",
@@ -38364,7 +38654,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$v = {
+var fallbackValues$w = {
   backgroundColor: backgroundColor$7,
   shadowColor: shadowColor
 };
@@ -38405,7 +38695,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$v, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$w, "profile");
 
 function _templateObject$z() {
   var data = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 72px;\n"]);
@@ -38467,7 +38757,7 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$v, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$w, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -38521,7 +38811,7 @@ var activeColor$5 = "#0E506D";
 var linkColor$3 = "#357fb8";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
-var fallbackValues$w = {
+var fallbackValues$x = {
   color: color$a,
   hoverColor: hoverColor$4,
   activeColor: activeColor$5,
@@ -38604,7 +38894,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, "".concat(planType, " ").concat(nextAutopayDate)))));
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$w);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$x);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -39172,7 +39462,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "pL"
 };
-var fallbackValues$x = {
+var fallbackValues$y = {
   backgroundColor: backgroundColor$8,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -39348,7 +39638,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$x, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$y, "default");
 
 var linkColor$4 = {
   "default": "#357fb8"
@@ -39365,7 +39655,7 @@ var fontWeight$7 = {
 var modalLinkHoverFocus$1 = {
   "default": "outline: none; text-decoration: underline;"
 };
-var fallbackValues$y = {
+var fallbackValues$z = {
   linkColor: linkColor$4,
   fontSize: fontSize$9,
   lineHeight: lineHeight$5,
@@ -39424,7 +39714,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   }, link));
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$y, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$z, "default");
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
@@ -39579,7 +39869,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
   })));
 };
 
-var formConfig$6 = {
+var formConfig$7 = {
   name: {
     validators: [required()]
   },
@@ -39605,14 +39895,14 @@ var formConfig$6 = {
   }
 };
 
-var _createFormState$6 = createFormState(formConfig$6),
-    reducer$6 = _createFormState$6.reducer,
-    mapStateToProps$7 = _createFormState$6.mapStateToProps,
-    mapDispatchToProps$6 = _createFormState$6.mapDispatchToProps;
+var _createFormState$7 = createFormState(formConfig$7),
+    reducer$7 = _createFormState$7.reducer,
+    mapStateToProps$8 = _createFormState$7.mapStateToProps,
+    mapDispatchToProps$7 = _createFormState$7.mapDispatchToProps;
 
-PaymentFormACH.reducer = reducer$6;
-PaymentFormACH.mapStateToProps = mapStateToProps$7;
-PaymentFormACH.mapDispatchToProps = mapDispatchToProps$6;
+PaymentFormACH.reducer = reducer$7;
+PaymentFormACH.mapStateToProps = mapStateToProps$8;
+PaymentFormACH.mapDispatchToProps = mapDispatchToProps$7;
 
 var PaymentFormCard = function PaymentFormCard(_ref) {
   var _creditCardNumberErro, _expirationDateErrors, _cvvErrors, _zipCodeErrors;
@@ -39740,7 +40030,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
   })));
 };
 
-var formConfig$7 = {
+var formConfig$8 = {
   country: {
     defaultValue: "US",
     validators: [required()]
@@ -39766,14 +40056,14 @@ var formConfig$7 = {
   }
 };
 
-var _createFormState$7 = createFormState(formConfig$7),
-    reducer$7 = _createFormState$7.reducer,
-    mapStateToProps$8 = _createFormState$7.mapStateToProps,
-    mapDispatchToProps$7 = _createFormState$7.mapDispatchToProps;
+var _createFormState$8 = createFormState(formConfig$8),
+    reducer$8 = _createFormState$8.reducer,
+    mapStateToProps$9 = _createFormState$8.mapStateToProps,
+    mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
 
-PaymentFormCard.reducer = reducer$7;
-PaymentFormCard.mapStateToProps = mapStateToProps$8;
-PaymentFormCard.mapDispatchToProps = mapDispatchToProps$7;
+PaymentFormCard.reducer = reducer$8;
+PaymentFormCard.mapStateToProps = mapStateToProps$9;
+PaymentFormCard.mapDispatchToProps = mapDispatchToProps$8;
 
 var PhoneForm = function PhoneForm(_ref) {
   var _phoneErrorMessage;
@@ -39822,28 +40112,28 @@ var PhoneForm = function PhoneForm(_ref) {
   })));
 };
 
-var formConfig$8 = {
+var formConfig$9 = {
   phone: {
     validators: [required(), hasLength(10, 10)],
     constraints: [onlyIntegers(), hasLength(0, 10)]
   }
 };
 
-var _createFormState$8 = createFormState(formConfig$8),
-    reducer$8 = _createFormState$8.reducer,
-    mapStateToProps$9 = _createFormState$8.mapStateToProps,
-    mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
+var _createFormState$9 = createFormState(formConfig$9),
+    reducer$9 = _createFormState$9.reducer,
+    mapStateToProps$a = _createFormState$9.mapStateToProps,
+    mapDispatchToProps$9 = _createFormState$9.mapDispatchToProps;
 
-PhoneForm.reducer = reducer$8;
-PhoneForm.mapStateToProps = mapStateToProps$9;
-PhoneForm.mapDispatchToProps = mapDispatchToProps$8;
+PhoneForm.reducer = reducer$9;
+PhoneForm.mapStateToProps = mapStateToProps$a;
+PhoneForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$3 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$z = {
+var fallbackValues$A = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -40066,7 +40356,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$z);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$A);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -40156,7 +40446,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
   })));
 };
 
-var formConfig$9 = {
+var formConfig$a = {
   firstName: {
     validators: [required()]
   },
@@ -40174,14 +40464,14 @@ var formConfig$9 = {
   }
 };
 
-var _createFormState$9 = createFormState(formConfig$9),
-    reducer$9 = _createFormState$9.reducer,
-    mapStateToProps$a = _createFormState$9.mapStateToProps,
-    mapDispatchToProps$9 = _createFormState$9.mapDispatchToProps;
+var _createFormState$a = createFormState(formConfig$a),
+    reducer$a = _createFormState$a.reducer,
+    mapStateToProps$b = _createFormState$a.mapStateToProps,
+    mapDispatchToProps$a = _createFormState$a.mapDispatchToProps;
 
-RegistrationForm.reducer = reducer$9;
-RegistrationForm.mapStateToProps = mapStateToProps$a;
-RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
+RegistrationForm.reducer = reducer$a;
+RegistrationForm.mapStateToProps = mapStateToProps$b;
+RegistrationForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var _useContext = React.useContext(styled.ThemeContext),
@@ -40286,7 +40576,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
   })));
 };
 
-var formConfig$a = {
+var formConfig$b = {
   password: {
     validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
   },
@@ -40295,14 +40585,14 @@ var formConfig$a = {
   }
 };
 
-var _createFormState$a = createFormState(formConfig$a),
-    reducer$a = _createFormState$a.reducer,
-    mapStateToProps$b = _createFormState$a.mapStateToProps,
-    mapDispatchToProps$a = _createFormState$a.mapDispatchToProps;
+var _createFormState$b = createFormState(formConfig$b),
+    reducer$b = _createFormState$b.reducer,
+    mapStateToProps$c = _createFormState$b.mapStateToProps,
+    mapDispatchToProps$b = _createFormState$b.mapDispatchToProps;
 
-ResetPasswordForm.reducer = reducer$a;
-ResetPasswordForm.mapStateToProps = mapStateToProps$b;
-ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
+ResetPasswordForm.reducer = reducer$b;
+ResetPasswordForm.mapStateToProps = mapStateToProps$c;
+ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$b;
 
 var ResetConfirmationForm$2 = function ResetConfirmationForm() {
   var _useContext = React.useContext(styled.ThemeContext),
@@ -40356,12 +40646,94 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$A = {
+var fallbackValues$B = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
 };
 
+var Tab = function Tab(_ref) {
+  var label = _ref.label,
+      activeTab = _ref.activeTab,
+      setActiveTab = _ref.setActiveTab;
+
+  var onClick = function onClick() {
+    setActiveTab(label);
+  };
+
+  var className = "tab-list-item";
+
+  if (activeTab === label) {
+    className += " tab-list-active";
+  }
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    className: className,
+    onClick: onClick,
+    margin: "0 0 -1px 0",
+    padding: "0.5rem 0.75rem",
+    background: activeTab === label ? WHITE : GRECIAN_GREY,
+    extraStyles: "cursor: pointer; flex-grow: 1; text-align: center; ".concat(activeTab === label ? "list-style: none;" : "")
+  }, /*#__PURE__*/React__default.createElement(Text$1, null, label));
+};
+
+var HORIZONTAL = "horizontal";
+
+var Tabs = function Tabs(_ref) {
+  var tabsConfig = _ref.tabsConfig,
+      tabsDisplayMode = _ref.tabsDisplayMode;
+
+  var _useState = React.useState(tabsConfig.tabs[0].label),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeTab = _useState2[0],
+      toggleActiveTab = _useState2[1];
+
+  var createTabs = function createTabs(tabConfig, activeTab) {
+    return tabConfig.tabs.map(function (tab) {
+      return /*#__PURE__*/React__default.createElement(Tab, {
+        activeTab: activeTab,
+        key: tab.label,
+        label: tab.label,
+        setActiveTab: function setActiveTab() {
+          return toggleActiveTab(tab.label);
+        }
+      });
+    });
+  };
+
+  var showHorozontal = function showHorozontal(tabsConfig, activeTab) {
+    return /*#__PURE__*/React__default.createElement(Cluster, {
+      justify: "space-around"
+    }, createTabs(tabsConfig, activeTab));
+  };
+
+  var showVertical = function showVertical(tabsConfig, activeTab) {
+    return /*#__PURE__*/React__default.createElement(Stack, null, createTabs(tabsConfig, activeTab));
+  };
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    className: "tabs"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    className: "tab-list"
+  }, tabsDisplayMode == HORIZONTAL ? showHorozontal(tabsConfig, activeTab) : showVertical(tabsConfig, activeTab)), /*#__PURE__*/React__default.createElement(Box, {
+    className: "tab-content"
+  }, /*#__PURE__*/React__default.createElement(Box, null, tabsConfig.tabs.map(function (tab) {
+    if (tab.label !== activeTab) return undefined;
+    return tab.content;
+  }))));
+};
+
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$B);
+
+var activeTabBackground$1 = "#FFFFFF";
+var activeTabAccent$1 = "#15749D";
+var activeTabHover$1 = "#B8D5E1";
+var fallbackValues$C = {
+  activeTabBackground: activeTabBackground$1,
+  activeTabAccent: activeTabAccent$1,
+  activeTabHover: activeTabHover$1
+};
+
 var TabSidebar = function TabSidebar(_ref) {
   var links = _ref.links,
       isMobile = _ref.isMobile,
@@ -40412,7 +40784,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$A);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$C);
 
 var backgroundColor$9 = {
   "default": "#ffffff",
@@ -40422,7 +40794,7 @@ var linkColor$5 = {
   "default": "#357fb8",
   footer: "#ffffff"
 };
-var border$2 = {
+var border$3 = {
   "default": "#cdcdcd",
   footer: "#cdcdcd"
 };
@@ -40446,10 +40818,10 @@ var accessibilityColor = {
   "default": "#3181E3",
   footer: "#3181E3"
 };
-var fallbackValues$B = {
+var fallbackValues$D = {
   backgroundColor: backgroundColor$9,
   linkColor: linkColor$5,
-  border: border$2,
+  border: border$3,
   fontSize: fontSize$a,
   lineHeight: lineHeight$6,
   fontWeight: fontWeight$8,
@@ -40508,7 +40880,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$B, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$D, "default");
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
@@ -40583,7 +40955,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor = BRIGHT_GREY;
 var imageBackgroundColor = MATISSE_BLUE;
-var fallbackValues$C = {
+var fallbackValues$E = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -40636,7 +41008,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$E));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -40684,7 +41056,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#F6F6F9";
-var fallbackValues$D = {
+var fallbackValues$F = {
   pageBackground: pageBackground
 };
 
@@ -40731,7 +41103,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$D));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$F));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -40773,7 +41145,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$D));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$F));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -40813,7 +41185,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$D));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$F));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -40867,7 +41239,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$D));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$F));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -40938,7 +41310,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$D));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$F));
 
 
 
@@ -41025,6 +41397,7 @@ exports.IconAdd = IconAdd;
 exports.IconQuitLarge = IconQuitLarge;
 exports.Imposter = Imposter;
 exports.InternalLink = InternalLink;
+exports.InternalUserInfoForm = InternalUserInfoForm;
 exports.Jumbo = Jumbo$1;
 exports.LabeledAmount = LabeledAmount$1;
 exports.LineItem = LineItem$1;
@@ -41072,6 +41445,7 @@ exports.ResetPasswordForm = ResetPasswordForm;
 exports.ResetPasswordSuccess = ResetPasswordSuccess;
 exports.RoutingNumberImage = RoutingNumberImage;
 exports.SearchIcon = SearchIcon;
+exports.SearchableSelect = SearchableSelect$1;
 exports.SettingsIconSmall = SettingsIconSmall$1;
 exports.ShoppingCartIcon = ShoppingCartIcon;
 exports.Sidebar = Sidebar;
@@ -41086,6 +41460,7 @@ exports.SuccessfulIcon = SuccessfulIcon;
 exports.Switcher = Switcher;
 exports.TabSidebar = TabSidebar$1;
 exports.TableListItem = TableListItem;
+exports.Tabs = Tabs$1;
 exports.TermsAndConditions = TermsAndConditions;
 exports.TermsAndConditionsModal = TermsAndConditionsModal$1;
 exports.Text = Text$1;