@thecb/components 7.5.1 → 7.5.2

package/dist/index.esm.js

@@ -16049,6 +16049,48 @@ var ProfileImage = function ProfileImage() {
   }));
 };
 
+var FindIconSmall = function FindIconSmall(_ref) {
+  var themeValues = _ref.themeValues,
+      _ref$iconIndex = _ref.iconIndex,
+      iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex;
+  var maskId = "find-icon-mask-".concat(iconIndex);
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.4142 4.34313C13.1295 6.05839 13.338 8.70983 12.0397 10.6527L15.9968 14.6098C16.1921 14.805 16.1921 15.1216 15.9968 15.3169L15.4665 15.8472C15.2712 16.0425 14.9546 16.0425 14.7594 15.8472L10.8287 11.9165C8.87269 13.3493 6.1108 13.1818 4.34315 11.4142C2.39053 9.46157 2.39053 6.29575 4.34315 4.34313C6.29577 2.39051 9.4616 2.39051 11.4142 4.34313ZM10.4246 10.4246C11.7915 9.05777 11.7915 6.84169 10.4246 5.47486C9.05779 4.10802 6.84171 4.10802 5.47488 5.47486C4.10804 6.84169 4.10804 9.05777 5.47488 10.4246C6.84171 11.7914 9.05779 11.7914 10.4246 10.4246Z",
+    fill: themeValues.singleIconColor
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: maskId,
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "2",
+    y: "2",
+    width: "15",
+    height: "14"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.4142 4.34313C13.1295 6.05839 13.338 8.70983 12.0397 10.6527L15.9968 14.6098C16.1921 14.805 16.1921 15.1216 15.9968 15.3169L15.4665 15.8472C15.2712 16.0425 14.9546 16.0425 14.7594 15.8472L10.8287 11.9165C8.87269 13.3493 6.1108 13.1818 4.34315 11.4142C2.39053 9.46157 2.39053 6.29575 4.34315 4.34313C6.29577 2.39051 9.4616 2.39051 11.4142 4.34313ZM10.4246 10.4246C11.7915 9.05777 11.7915 6.84169 10.4246 5.47486C9.05779 4.10802 6.84171 4.10802 5.47488 5.47486C4.10804 6.84169 4.10804 9.05777 5.47488 10.4246C6.84171 11.7914 9.05779 11.7914 10.4246 10.4246Z",
+    fill: "white"
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#".concat(maskId, ")")
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "20",
+    height: "20",
+    fill: themeValues.singleIconColor
+  })));
+};
+
+var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$2, "primary");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -17601,14 +17643,16 @@ var _excluded$k = ["hoverColor", "activeColor", "extrastyles"];
 
 /* eslint-disable no-unused-vars */
 
-var StyledExternalLink = styled(function (_ref) {
+var StyledExternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var hoverColor = _ref.hoverColor,
       activeColor = _ref.activeColor,
       extrastyles = _ref.extrastyles,
       props = _objectWithoutProperties(_ref, _excluded$k);
 
-  return /*#__PURE__*/React.createElement("a", props);
-}).withConfig({
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    ref: ref
+  }));
+})).withConfig({
   displayName: "ExternalLinkstyled__StyledExternalLink",
   componentId: "sc-m1q2m2-0"
 })(["display:flex;font-size:", ";color:", ";font-weight:", ";font-family:", ";line-height:", ";&:hover{color:", ";text-decoration:underline;}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{text-decoration:underline;color:", ";}", ""], function (_ref2) {
@@ -17638,7 +17682,7 @@ var StyledExternalLink = styled(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var ExternalLink = function ExternalLink(_ref) {
+var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
       href = _ref$href === void 0 ? "" : _ref$href,
       _ref$newTab = _ref.newTab,
@@ -17674,9 +17718,10 @@ var ExternalLink = function ExternalLink(_ref) {
     extrastyles: extraStyles,
     rel: newTab ? "noopener" : "",
     "data-qa": dataQa,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
-};
+});
 
 var _excluded$l = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
 /*
@@ -17686,7 +17731,7 @@ var _excluded$l = ["hoverColor", "activeColor", "active", "color", "extrastyles"
 
 /* eslint-disable no-unused-vars */
 
-var StyledInternalLink = styled(function (_ref) {
+var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var hoverColor = _ref.hoverColor,
       activeColor = _ref.activeColor,
       active = _ref.active,
@@ -17694,8 +17739,10 @@ var StyledInternalLink = styled(function (_ref) {
       extrastyles = _ref.extrastyles,
       props = _objectWithoutProperties(_ref, _excluded$l);
 
-  return /*#__PURE__*/React.createElement(Link, props);
-}).withConfig({
+  return /*#__PURE__*/React.createElement(Link, _extends({}, props, {
+    ref: ref
+  }));
+})).withConfig({
   displayName: "InternalLinkstyled__StyledInternalLink",
   componentId: "sc-cuqxud-0"
 })(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";&:hover{color:", ";text-decoration:underline;}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{text-decoration:underline;color:", ";}", ""], function (_ref2) {
@@ -17730,7 +17777,7 @@ var StyledInternalLink = styled(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var InternalLink = function InternalLink(_ref) {
+var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$to = _ref.to,
       to = _ref$to === void 0 ? "" : _ref$to,
       color = _ref.color,
@@ -17762,9 +17809,10 @@ var InternalLink = function InternalLink(_ref) {
     activeColor: themeValues.activeColor,
     tabIndex: tabIndex,
     extrastyles: extraStyles,
-    "data-qa": dataQa
+    "data-qa": dataQa,
+    ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
-};
+});
 
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var _ref$breadcrumbsList = _ref.breadcrumbsList,
@@ -24624,6 +24672,64 @@ var ProcessingFee = function ProcessingFee(_ref) {
 
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$r, "default");
 
+
+
+var index$5 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colors: colors,
+  fontWeights: style_constants
+});
+
+var HiddenRadioInput = styled.input.withConfig({
+  displayName: "RadioButtonWithLabel__HiddenRadioInput",
+  componentId: "sc-1m9whwg-0"
+})(["position:absolute;opacity:0;margin:0;"]);
+var Circle = styled.div.withConfig({
+  displayName: "RadioButtonWithLabel__Circle",
+  componentId: "sc-1m9whwg-1"
+})(["flex-shrink:0;margin-right:8px;width:1.5rem;height 1.5rem;border:1px solid ", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], GREY_CHATEAU, MATISSE_BLUE);
+var InputAndLabelContainer = styled(Cluster).withConfig({
+  displayName: "RadioButtonWithLabel__InputAndLabelContainer",
+  componentId: "sc-1m9whwg-2"
+})(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:1px solid ", ";}", ":focus + label ", "{{box-shadow:0px 0px 2px 1px ", ";}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, MATISSE_BLUE, HiddenRadioInput, Circle, MATISSE_BLUE);
+
+var RadioButtonWithLabel = function RadioButtonWithLabel(_ref) {
+  var _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "" : _ref$id,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? "" : _ref$value,
+      _ref$labelText = _ref.labelText,
+      labelText = _ref$labelText === void 0 ? "" : _ref$labelText,
+      groupName = _ref.groupName,
+      setValue = _ref.setValue,
+      ariaInvalid = _ref.ariaInvalid,
+      index = _ref.index,
+      _ref$handleChange = _ref.handleChange,
+      handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange;
+  return /*#__PURE__*/React.createElement(InputAndLabelContainer, {
+    align: "center",
+    childGap: "0.5rem"
+  }, /*#__PURE__*/React.createElement(HiddenRadioInput, {
+    "aria-invalid": ariaInvalid,
+    style: {
+      marginTop: 0
+    },
+    type: "radio",
+    name: groupName,
+    id: id,
+    value: value,
+    onChange: function onChange(e) {
+      setValue(e.target.value);
+      handleChange(e);
+    },
+    defaultChecked: index === 0
+  }), /*#__PURE__*/React.createElement(Text$1, {
+    as: "label",
+    htmlFor: id,
+    extraStyles: "\n          font-size: 1rem;\n          display: flex; \n          width: 100%;\n          :hover {\n            cursor: pointer;\n          }\n        "
+  }, /*#__PURE__*/React.createElement(Circle, null), labelText));
+};
+
 var activeColor$5 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
 var fallbackValues$s = {
@@ -24633,7 +24739,7 @@ var fallbackValues$s = {
 
 var HiddenRadioButton = styled.input.withConfig({
   displayName: "RadioButton__HiddenRadioButton",
-  componentId: "sc-v6hie9-0"
+  componentId: "sc-1jed2i-0"
 })(["opacity:0;position:absolute;cursor:", ";"], function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? "auto" : "pointer";
@@ -35837,14 +35943,6 @@ var NavTabs = function NavTabs(_ref) {
   }, tabs)));
 };
 
-
-
-var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colors: colors,
-  fontWeights: style_constants
-});
-
 var shineFrames = keyframes$3(["{0{background-position:0 0;}20%{background-position:100% 100%;}100%{background-position:100% 100%;}}"]);
 var LoadingPill = styled.div.withConfig({
   displayName: "LoadingPillstyled__LoadingPill",
@@ -40280,269 +40378,6 @@ 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,
-      namesDisabled = _ref.namesDisabled,
-      emailDisabled = _ref.emailDisabled,
-      roleDisabled = _ref.roleDisabled,
-      selectionDisabled = _ref.selectionDisabled,
-      formType = _ref.formType,
-      openChangePasswordForm = _ref.openChangePasswordForm,
-      firstName = _ref.firstName,
-      lastName = _ref.lastName;
-  useEffect$1(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) {
-    useEffect$1(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({}, isProbablyEmail.error, "Invalid email address");
-
-  var roleErrorMessages = _defineProperty({}, required.error, "Role is required");
-
-  return /*#__PURE__*/React.createElement(FormContainer$1, {
-    variant: variant,
-    role: "form",
-    "aria-label": "user-info-form",
-    extraStyles: "padding: 0;"
-  }, formType === PROFILE && /*#__PURE__*/React.createElement(Box, {
-    padding: "1.5rem"
-  }, /*#__PURE__*/React.createElement(Cluster, {
-    justify: "flex-start",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: "1.25rem",
-    borderRadius: "50%",
-    background: "#CACED8"
-  }, /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h4",
-    weight: "700"
-  }, firstName.charAt(0).toUpperCase(), lastName.charAt(0).toUpperCase())), /*#__PURE__*/React.createElement(Text$1, {
-    variant: "p",
-    weight: "700",
-    extraStyles: "padding-left: 1rem;"
-  }, firstName, " ", lastName))), formType === CREATE_CLIENT_ADMIN && /*#__PURE__*/React.createElement(Box, {
-    padding: "1.5rem 1.5rem 0.5rem",
-    borderColor: GHOST_GREY,
-    borderSize: "1px",
-    borderWidthOverride: "0 0 1px 0"
-  }, /*#__PURE__*/React.createElement(FormInputColumn, null, /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h6",
-    weight: "700",
-    margin: "0 0 1rem"
-  }, "Select Client"), /*#__PURE__*/React.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.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.createElement(FormInputColumn, null, /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h6",
-    weight: "700",
-    margin: "0 0 1rem"
-  }, "Personal Information"), /*#__PURE__*/React.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);
-    },
-    disabled: namesDisabled,
-    autocomplete: "given-name"
-  }), /*#__PURE__*/React.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);
-    },
-    disabled: namesDisabled,
-    autocomplete: "family-name"
-  }), /*#__PURE__*/React.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: emailDisabled,
-    autocomplete: "email"
-  }), formType === PROFILE && /*#__PURE__*/React.createElement(FormInput$1, {
-    labelTextWhenNoError: "Password",
-    errorMessages: {},
-    field: {
-      rawValue: "•••••••••••••"
-    },
-    disabled: true,
-    decorator: /*#__PURE__*/React.createElement(Text$1, {
-      variant: "pS",
-      color: "#15749D",
-      onClick: openChangePasswordForm,
-      extraStyles: "cursor: pointer;"
-    }, "Change Password")
-  }))), /*#__PURE__*/React.createElement(Box, {
-    padding: "1.5rem"
-  }, formType !== PROFILE && /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 0.5rem"
-  }, /*#__PURE__*/React.createElement(FormInputColumn, null, /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h6",
-    weight: "700",
-    margin: "0 0 1rem"
-  }, "User Settings"), /*#__PURE__*/React.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: roleDisabled
-  }))), (formType === ADD || formType === EDIT) && /*#__PURE__*/React.createElement(Box, {
-    padding: "0.5rem 0 1.5rem"
-  }, /*#__PURE__*/React.createElement(FormInputColumn, null, /*#__PURE__*/React.createElement(Text$1, {
-    variant: "p"
-  }, "Select which agencies the user can view"), /*#__PURE__*/React.createElement(SearchableSelect$1, {
-    actions: actions,
-    fields: fields,
-    items: allAgencyOptions,
-    selectedItems: selectedAgencies,
-    allSelected: allSelected,
-    toggleSelectAllItems: toggleSelectAllAgencies,
-    selectItem: selectAgency,
-    disabled: selectionDisabled
-  }))), /*#__PURE__*/React.createElement(Box, {
-    padding: "0"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    childGap: "1rem",
-    direction: "row",
-    justify: "flex-end"
-  }, /*#__PURE__*/React.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.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;
 
@@ -40594,7 +40429,7 @@ var LoginForm = function LoginForm(_ref) {
   }));
 };
 
-var formConfig$6 = {
+var formConfig$5 = {
   email: {
     validators: [required(), isProbablyEmail()]
   },
@@ -40603,14 +40438,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$5 = createFormState(formConfig$5),
+    reducer$5 = _createFormState$5.reducer,
+    mapStateToProps$6 = _createFormState$5.mapStateToProps,
+    mapDispatchToProps$5 = _createFormState$5.mapDispatchToProps;
 
-LoginForm.reducer = reducer$6;
-LoginForm.mapStateToProps = mapStateToProps$7;
-LoginForm.mapDispatchToProps = mapDispatchToProps$6;
+LoginForm.reducer = reducer$5;
+LoginForm.mapStateToProps = mapStateToProps$6;
+LoginForm.mapDispatchToProps = mapDispatchToProps$5;
 
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -45872,7 +45707,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
   })));
 };
 
-var formConfig$7 = {
+var formConfig$6 = {
   name: {
     validators: [required()]
   },
@@ -45898,14 +45733,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$6 = createFormState(formConfig$6),
+    reducer$6 = _createFormState$6.reducer,
+    mapStateToProps$7 = _createFormState$6.mapStateToProps,
+    mapDispatchToProps$6 = _createFormState$6.mapDispatchToProps;
 
-PaymentFormACH.reducer = reducer$7;
-PaymentFormACH.mapStateToProps = mapStateToProps$8;
-PaymentFormACH.mapDispatchToProps = mapDispatchToProps$7;
+PaymentFormACH.reducer = reducer$6;
+PaymentFormACH.mapStateToProps = mapStateToProps$7;
+PaymentFormACH.mapDispatchToProps = mapDispatchToProps$6;
 
 var PaymentFormCard = function PaymentFormCard(_ref) {
   var _creditCardNumberErro, _expirationDateErrors, _cvvErrors, _zipCodeErrors;
@@ -46046,7 +45881,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
 
 var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
 
-var formConfig$8 = {
+var formConfig$7 = {
   country: {
     defaultValue: "US",
     validators: [required()]
@@ -46072,14 +45907,14 @@ var formConfig$8 = {
   }
 };
 
-var _createFormState$8 = createFormState(formConfig$8),
-    reducer$8 = _createFormState$8.reducer,
-    mapStateToProps$9 = _createFormState$8.mapStateToProps,
-    mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
+var _createFormState$7 = createFormState(formConfig$7),
+    reducer$7 = _createFormState$7.reducer,
+    mapStateToProps$8 = _createFormState$7.mapStateToProps,
+    mapDispatchToProps$7 = _createFormState$7.mapDispatchToProps;
 
-PaymentFormCard$1.reducer = reducer$8;
-PaymentFormCard$1.mapStateToProps = mapStateToProps$9;
-PaymentFormCard$1.mapDispatchToProps = mapDispatchToProps$8;
+PaymentFormCard$1.reducer = reducer$7;
+PaymentFormCard$1.mapStateToProps = mapStateToProps$8;
+PaymentFormCard$1.mapDispatchToProps = mapDispatchToProps$7;
 
 var DashboardIframe = styled.iframe.withConfig({
   displayName: "PeriscopeDashboardIframestyled__DashboardIframe",
@@ -46252,21 +46087,70 @@ var PhoneForm = function PhoneForm(_ref) {
   })));
 };
 
-var formConfig$9 = {
+var formConfig$8 = {
   phone: {
     validators: [required(), hasLength(10, 10)],
     constraints: [onlyIntegers(), hasLength(0, 10)]
   }
 };
 
-var _createFormState$9 = createFormState(formConfig$9),
-    reducer$9 = _createFormState$9.reducer,
-    mapStateToProps$a = _createFormState$9.mapStateToProps,
-    mapDispatchToProps$9 = _createFormState$9.mapDispatchToProps;
+var _createFormState$8 = createFormState(formConfig$8),
+    reducer$8 = _createFormState$8.reducer,
+    mapStateToProps$9 = _createFormState$8.mapStateToProps,
+    mapDispatchToProps$8 = _createFormState$8.mapDispatchToProps;
+
+PhoneForm.reducer = reducer$8;
+PhoneForm.mapStateToProps = mapStateToProps$9;
+PhoneForm.mapDispatchToProps = mapDispatchToProps$8;
+
+var DefaultHeading = styled.div.withConfig({
+  displayName: "RadioGroup__DefaultHeading",
+  componentId: "sc-7lqrl8-0"
+})(["font-size:0.875rem;color:", " margin:0;padding:8px 0px;"], CHARADE_GREY);
+var StyledFieldset = styled.fieldset.withConfig({
+  displayName: "RadioGroup__StyledFieldset",
+  componentId: "sc-7lqrl8-1"
+})(["", ""], function (props) {
+  return props.$extraStyles;
+});
 
-PhoneForm.reducer = reducer$9;
-PhoneForm.mapStateToProps = mapStateToProps$a;
-PhoneForm.mapDispatchToProps = mapDispatchToProps$9;
+var RadioGroup = function RadioGroup(_ref) {
+  var headingText = _ref.headingText,
+      groupName = _ref.groupName,
+      _ref$heading = _ref.heading,
+      Heading = _ref$heading === void 0 ? /*#__PURE__*/React.createElement(DefaultHeading, {
+    role: "heading",
+    id: "radio-group-".concat(groupName, "-heading")
+  }, headingText) : _ref$heading,
+      config = _ref.config,
+      extraStyles = _ref.extraStyles,
+      _ref$handleChange = _ref.handleChange,
+      handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
+      field = _ref.field,
+      fieldActions = _ref.fieldActions;
+
+  var setValue = function setValue(value) {
+    return fieldActions.set(value);
+  };
+
+  return /*#__PURE__*/React.createElement(StyledFieldset, {
+    role: "radiogroup",
+    "aria-labelledby": "radio-group-".concat(groupName, "-heading"),
+    $extraStyles: extraStyles
+  }, Heading !== null && Heading, /*#__PURE__*/React.createElement(Stack, {
+    childGap: "4px"
+  }, config.map(function (c, idx) {
+    return /*#__PURE__*/React.createElement(RadioButtonWithLabel, _extends({
+      index: idx,
+      key: c.id
+    }, c, {
+      groupName: groupName,
+      setValue: setValue,
+      handleChange: handleChange,
+      "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors
+    }));
+  })));
+};
 
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
@@ -46587,7 +46471,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
   })));
 };
 
-var formConfig$a = {
+var formConfig$9 = {
   firstName: {
     validators: [required()]
   },
@@ -46605,14 +46489,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$9 = createFormState(formConfig$9),
+    reducer$9 = _createFormState$9.reducer,
+    mapStateToProps$a = _createFormState$9.mapStateToProps,
+    mapDispatchToProps$9 = _createFormState$9.mapDispatchToProps;
 
-RegistrationForm.reducer = reducer$a;
-RegistrationForm.mapStateToProps = mapStateToProps$b;
-RegistrationForm.mapDispatchToProps = mapDispatchToProps$a;
+RegistrationForm.reducer = reducer$9;
+RegistrationForm.mapStateToProps = mapStateToProps$a;
+RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var _useContext = useContext(ThemeContext),
@@ -46719,7 +46603,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
   })));
 };
 
-var formConfig$b = {
+var formConfig$a = {
   password: {
     validators: [required(), hasLength(8, 100), hasNumber(), hasLowercaseLetter(), hasUppercaseLetter(), hasSpecialCharacter()]
   },
@@ -46728,14 +46612,14 @@ var formConfig$b = {
   }
 };
 
-var _createFormState$b = createFormState(formConfig$b),
-    reducer$b = _createFormState$b.reducer,
-    mapStateToProps$c = _createFormState$b.mapStateToProps,
-    mapDispatchToProps$b = _createFormState$b.mapDispatchToProps;
+var _createFormState$a = createFormState(formConfig$a),
+    reducer$a = _createFormState$a.reducer,
+    mapStateToProps$b = _createFormState$a.mapStateToProps,
+    mapDispatchToProps$a = _createFormState$a.mapDispatchToProps;
 
-ResetPasswordForm.reducer = reducer$b;
-ResetPasswordForm.mapStateToProps = mapStateToProps$c;
-ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$b;
+ResetPasswordForm.reducer = reducer$a;
+ResetPasswordForm.mapStateToProps = mapStateToProps$b;
+ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var ResetConfirmationForm$2 = function ResetConfirmationForm() {
   var _useContext = useContext(ThemeContext),
@@ -47153,11 +47037,14 @@ var WorkflowTile = function WorkflowTile(_ref) {
       workflowDescription = _ref$workflowDescript === void 0 ? "Link your benefit plan" : _ref$workflowDescript,
       _ref$workflowActionNa = _ref.workflowActionName,
       workflowActionName = _ref$workflowActionNa === void 0 ? "Search" : _ref$workflowActionNa,
-      slug = _ref.slug;
+      slug = _ref.slug,
+      _ref$buttonVariant = _ref.buttonVariant,
+      buttonVariant = _ref$buttonVariant === void 0 ? "primary" : _ref$buttonVariant;
   return /*#__PURE__*/React.createElement(Box, {
     background: WHITE,
     boxShadow: "0px 0px 5px 0px ".concat(GHOST_GREY),
-    padding: 0
+    padding: 0,
+    borderRadius: "4px"
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -47177,17 +47064,19 @@ var WorkflowTile = function WorkflowTile(_ref) {
     color: STORM_GREY
   }, workflowDescription)), /*#__PURE__*/React.createElement(Box, {
     padding: "1.5rem 1rem",
-    background: GRECIAN_GREY
+    background: ATHENS_GREY,
+    borderColor: GRECIAN_GREY,
+    borderWidthOverride: "2px 0 0 0"
   }, /*#__PURE__*/React.createElement(ButtonWithLink, {
-    primary: true,
+    variant: buttonVariant,
+    primary: buttonVariant == "primary",
     primaryBG: MATISSE_BLUE,
     fontWeight: FONT_WEIGHT_SEMIBOLD,
     fontSize: "1.125rem",
-    borderRadius: "0px",
     text: workflowActionName,
     minWidth: "100%",
     url: "/service/".concat(slug),
-    extraStyles: "width: 100%;",
+    extraStyles: "width: 100%; margin: 0;",
     linkExtraStyles: "justify-content: center;",
     dataQa: slug
   }))));
@@ -47455,5 +47344,5 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$N));
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map