@thecb/components 4.3.2 → 4.3.5

package/dist/index.cjs.js

@@ -18581,7 +18581,7 @@ var textColor = {
   "default": "".concat(CHARADE_GREY)
 };
 var disabledCheckColor = {
-  "default": "".concat(GHOST_GREY, ";")
+  "default": "".concat(WHITE, ";")
 };
 var checkColor = {
   "default": "".concat(WHITE, ";")
@@ -18592,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")
 };
@@ -18613,7 +18616,8 @@ var fallbackValues$c = {
   focusedStyles: focusedStyles,
   disabledStyles: disabledStyles,
   checkedStyles: checkedStyles,
-  defaultStyles: defaultStyles
+  defaultStyles: defaultStyles,
+  disabledCheckedStyles: disabledCheckedStyles
 };
 
 function _templateObject11() {
@@ -18748,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) {
@@ -18764,7 +18769,9 @@ 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,
+      extraStyles = _ref4.extraStyles,
+      textExtraStyles = _ref4.textExtraStyles;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18791,7 +18798,7 @@ var Checkbox = function Checkbox(_ref4) {
     },
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
-    extraStyles: "outline: none;"
+    extraStyles: "outline: none; ".concat(extraStyles)
   }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, null, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
@@ -18811,6 +18818,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",
@@ -18823,7 +18831,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)));
 };
 
@@ -19123,7 +19131,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;
@@ -19181,7 +19189,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),
@@ -19317,7 +19326,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,
@@ -19328,8 +19338,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
@@ -19339,7 +19349,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, {
@@ -19490,6 +19501,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),
@@ -19512,7 +19524,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%"
@@ -19542,7 +19555,8 @@ var FormSelect = function FormSelect(_ref) {
     },
     onClick: function onClick() {
       return setOpen(!open);
-    }
+    },
+    disabled: disabled
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -20753,9 +20767,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;
   };
@@ -20764,7 +20798,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;
@@ -20774,7 +20808,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;
@@ -20784,7 +20818,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;
@@ -20811,58 +20845,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),
@@ -21636,20 +21676,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;
   };
 
@@ -21735,7 +21775,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
@@ -21778,17 +21818,17 @@ var PasswordRequirements = function PasswordRequirements(_ref) {
       isMobile = _ref.isMobile;
   var iconMap = (_iconMap = {}, _defineProperty(_iconMap, INPUT_STATE_NEUTRAL, {
     icon: /*#__PURE__*/React__default.createElement(IconNeutral, {
-      margin: "0.125rem 0.5rem 0 0"
+      margin: "0 0.5rem 0 0"
     }),
     color: MINESHAFT_GREY
   }), _defineProperty(_iconMap, INPUT_STATE_INVALID, {
     icon: /*#__PURE__*/React__default.createElement(IconInvalid, {
-      margin: "0.125rem 0.5rem 0 0"
+      margin: "0 0.5rem 0 0"
     }),
     color: RAZZMATAZZ_RED
   }), _defineProperty(_iconMap, INPUT_STATE_VALID, {
     icon: /*#__PURE__*/React__default.createElement(IconValid, {
-      margin: "0.125rem 0.5rem 0 0"
+      margin: "0 0.5rem 0 0"
     }),
     color: FOREST_GREEN
   }), _iconMap);
@@ -21838,7 +21878,7 @@ var PasswordRequirements = function PasswordRequirements(_ref) {
       onRight: true,
       childGap: "0rem"
     }, /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0rem"
+      padding: "0.15rem 0 0 0"
     }, /*#__PURE__*/React__default.createElement(Cluster, {
       justify: "flex-start",
       align: "center"
@@ -22088,13 +22128,91 @@ 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 agencies",
+    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,
+      extraStyles: "margin: 0 0.5rem;"
+    });
+  })))));
+};
+
+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
 };
@@ -22111,7 +22229,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",
@@ -32693,7 +32811,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,
@@ -32895,7 +33013,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);
@@ -34733,7 +34851,11 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       showErrors = _ref.showErrors,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      revenueManagement = _ref.revenueManagement,
+      closeForm = _ref.closeForm,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName;
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -34751,7 +34873,29 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
 
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     role: "form",
-    "aria-label": "Change password"
+    "aria-label": "Change password",
+    extraStyles: "padding: 0;"
+  }, revenueManagement && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem",
+    borderColor: GHOST_GREY,
+    borderSize: "1px",
+    borderWidthOverride: "0 0 1px 0"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.25rem",
+    borderRadius: "50%",
+    background: "#CACED8"
+  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h4",
+    weight: "700"
+  }, firstName.charAt(0).toUpperCase(), lastName.charAt(0).toUpperCase())), /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "p",
+    weight: "700",
+    extraStyles: "padding-left: 1rem;"
+  }, firstName, " ", lastName))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Current password",
     errorMessages: currentPasswordErrorMessages,
@@ -34790,7 +34934,25 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {
     password: fields.newPassword,
     isMobile: isMobile
-  }))));
+  }))), revenueManagement && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem 0 0"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row",
+    justify: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    text: "Cancel",
+    action: closeForm,
+    variant: "secondary",
+    dataQa: "Cancel",
+    extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;"
+  }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    text: "Save",
+    action: handleSubmit,
+    variant: "primary",
+    dataQa: "Save",
+    extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;"
+  })))));
 };
 
 var formConfig$1 = {
@@ -34817,7 +34979,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
@@ -34924,7 +35086,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,
@@ -35154,20 +35316,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;
   };
 
@@ -35235,8 +35397,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";
 });
@@ -35440,7 +35602,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
 };
@@ -35486,7 +35648,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", {
@@ -36939,6 +37101,264 @@ 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 PROFILE = "PROFILE";
+var ADD = "ADD";
+var EDIT = "EDIT";
+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,
+      closeForm = _ref.closeForm,
+      allAgencyOptions = _ref.allAgencyOptions,
+      selectedAgencies = _ref.selectedAgencies,
+      allSelected = _ref.allSelected,
+      _ref$toggleSelectAllA = _ref.toggleSelectAllAgencies,
+      toggleSelectAllAgencies = _ref$toggleSelectAllA === void 0 ? noop : _ref$toggleSelectAllA,
+      selectAgency = _ref.selectAgency,
+      roleOptions = _ref.roleOptions,
+      clientOptions = _ref.clientOptions,
+      disabled = _ref.disabled,
+      emailDisabled = _ref.emailDisabled,
+      roleDisabled = _ref.roleDisabled,
+      formType = _ref.formType,
+      isOktaUser = _ref.isOktaUser,
+      openChangePasswordForm = _ref.openChangePasswordForm,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName;
+  React.useEffect(function () {
+    if (formType === CREATE_CLIENT_ADMIN) {
+      actions.fields.client.addValidator(required());
+    }
+
+    if (formType !== PROFILE) {
+      actions.fields.email.addValidator(required());
+      actions.fields.role.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",
+    extraStyles: "padding: 0;"
+  }, formType === PROFILE && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.25rem",
+    borderRadius: "50%",
+    background: "#CACED8"
+  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h4",
+    weight: "700"
+  }, firstName.charAt(0).toUpperCase(), lastName.charAt(0).toUpperCase())), /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "p",
+    weight: "700",
+    extraStyles: "padding-left: 1rem;"
+  }, firstName, " ", lastName))), formType === CREATE_CLIENT_ADMIN && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem 1.5rem 0.5rem",
+    borderColor: GHOST_GREY,
+    borderSize: "1px",
+    borderWidthOverride: "0 0 1px 0"
+  }, /*#__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(Box, {
+    padding: formType === PROFILE ? "1.5rem 1.5rem 0" : "1.5rem 1.5rem 0.5rem",
+    borderColor: GHOST_GREY,
+    borderSize: "1px",
+    borderWidthOverride: formType === PROFILE ? "1px 0 0" : "0 0 1px 0"
+  }, /*#__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
+  }), formType === PROFILE && !isOktaUser && /*#__PURE__*/React__default.createElement(FormInput$1, {
+    labelTextWhenNoError: "Password",
+    errorMessages: {},
+    field: {
+      rawValue: "•••••••••••••"
+    },
+    disabled: true,
+    decorator: /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "pS",
+      color: "#15749D",
+      onClick: openChangePasswordForm,
+      extraStyles: "cursor: pointer;"
+    }, "Change Password")
+  }))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1.5rem"
+  }, formType !== PROFILE && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 0.5rem"
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h6",
+    weight: "700",
+    margin: "0 0 1rem"
+  }, "User Settings"), /*#__PURE__*/React__default.createElement(FormSelect$1, {
+    labelTextWhenNoError: "User 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 === ADD || formType === EDIT) && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.5rem 0 1.5rem"
+  }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "p"
+  }, "Select which agencies the user can view"), /*#__PURE__*/React__default.createElement(SearchableSelect$1, {
+    actions: actions,
+    fields: fields,
+    items: allAgencyOptions,
+    selectedItems: selectedAgencies,
+    allSelected: allSelected,
+    toggleSelectAllItems: toggleSelectAllAgencies,
+    selectItem: selectAgency,
+    disabled: disabled
+  }))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row",
+    justify: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    text: "Cancel",
+    action: function action() {
+      if (formType !== CREATE_CLIENT_ADMIN) {
+        toggleSelectAllAgencies(false);
+      }
+
+      closeForm();
+    },
+    variant: "secondary",
+    dataQa: "Cancel",
+    extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;"
+  }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    text: "Save",
+    action: handleSubmit,
+    variant: "primary",
+    dataQa: "Save",
+    extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;"
+  })))));
+};
+
+var formConfig$5 = {
+  client: {
+    validators: []
+  },
+  firstName: {
+    validators: [required()]
+  },
+  lastName: {
+    validators: [required()]
+  },
+  email: {
+    validators: [isProbablyEmail()]
+  },
+  role: {
+    validators: []
+  },
+  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;
 
@@ -36988,7 +37408,7 @@ var LoginForm = function LoginForm(_ref) {
   }));
 };
 
-var formConfig$5 = {
+var formConfig$6 = {
   email: {
     validators: [required(), isProbablyEmail()]
   },
@@ -36997,14 +37417,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',
@@ -38311,7 +38731,7 @@ var backgroundColor$6 = {
   "default": WHITE,
   largeTitle: WHITE
 };
-var fallbackValues$u = {
+var fallbackValues$v = {
   fontSize: fontSize$8,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -38352,7 +38772,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",
@@ -38362,7 +38782,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$v = {
+var fallbackValues$w = {
   backgroundColor: backgroundColor$7,
   shadowColor: shadowColor
 };
@@ -38403,7 +38823,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"]);
@@ -38465,7 +38885,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,
@@ -38519,7 +38939,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,
@@ -38602,7 +39022,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,
@@ -39170,7 +39590,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "pL"
 };
-var fallbackValues$x = {
+var fallbackValues$y = {
   backgroundColor: backgroundColor$8,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -39346,7 +39766,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"
@@ -39363,7 +39783,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,
@@ -39422,7 +39842,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;
@@ -39577,7 +39997,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
   })));
 };
 
-var formConfig$6 = {
+var formConfig$7 = {
   name: {
     validators: [required()]
   },
@@ -39603,14 +40023,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;
@@ -39738,7 +40158,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
   })));
 };
 
-var formConfig$7 = {
+var formConfig$8 = {
   country: {
     defaultValue: "US",
     validators: [required()]
@@ -39764,14 +40184,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;
@@ -39820,28 +40240,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,
@@ -40064,7 +40484,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;
@@ -40154,7 +40574,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
   })));
 };
 
-var formConfig$9 = {
+var formConfig$a = {
   firstName: {
     validators: [required()]
   },
@@ -40172,14 +40592,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),
@@ -40284,7 +40704,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
   })));
 };
 
-var formConfig$a = {
+var formConfig$b = {
   password: {
     validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
   },
@@ -40293,14 +40713,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),
@@ -40354,7 +40774,7 @@ 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
@@ -40431,12 +40851,12 @@ var Tabs = function Tabs(_ref) {
   }))));
 };
 
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$A);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$B);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$B = {
+var fallbackValues$C = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -40492,7 +40912,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$B);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$C);
 
 var backgroundColor$9 = {
   "default": "#ffffff",
@@ -40502,7 +40922,7 @@ var linkColor$5 = {
   "default": "#357fb8",
   footer: "#ffffff"
 };
-var border$2 = {
+var border$3 = {
   "default": "#cdcdcd",
   footer: "#cdcdcd"
 };
@@ -40526,10 +40946,10 @@ var accessibilityColor = {
   "default": "#3181E3",
   footer: "#3181E3"
 };
-var fallbackValues$C = {
+var fallbackValues$D = {
   backgroundColor: backgroundColor$9,
   linkColor: linkColor$5,
-  border: border$2,
+  border: border$3,
   fontSize: fontSize$a,
   lineHeight: lineHeight$6,
   fontWeight: fontWeight$8,
@@ -40588,7 +41008,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$C, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$D, "default");
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
@@ -40663,7 +41083,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor = BRIGHT_GREY;
 var imageBackgroundColor = MATISSE_BLUE;
-var fallbackValues$D = {
+var fallbackValues$E = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -40716,7 +41136,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$D));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$E));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -40764,7 +41184,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#F6F6F9";
-var fallbackValues$E = {
+var fallbackValues$F = {
   pageBackground: pageBackground
 };
 
@@ -40811,7 +41231,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$E));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$F));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -40853,7 +41273,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$E));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$F));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -40893,7 +41313,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$E));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$F));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -40947,7 +41367,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$E));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$F));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -41018,7 +41438,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$E));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$F));
 
 
 
@@ -41105,6 +41525,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;
@@ -41152,6 +41573,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;