@cerebruminc/cerebellum 13.0.3 → 13.1.0

package/lib/cjs/Avatar-7853412b.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var _tslib = require('./_tslib-955e611e.js');
+var jsxRuntime = require('react/jsx-runtime');
+var pressedEnter = require('./pressedEnter.cjs');
+var styled = require('styled-components');
+var getInitialsOnly = require('./getInitialsOnly.cjs');
+
+var Base = styled.styled.div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  background: url(", ") no-repeat center,\n    ", ";\n  background-size: ", ";\n  position: relative;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  background: url(", ") no-repeat center,\n    ", ";\n  background-size: ", ";\n  position: relative;\n"])), function (_a) {
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) || theme.avatar.size;
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) || theme.avatar.size;
+}, function (_a) {
+    var $square = _a.$square, $themeOverride = _a.$themeOverride;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderRadius) ? "".concat($themeOverride.borderRadius, "px") : $square ? "0px" : "50%";
+}, function (_a) {
+    var $imageUrl = _a.$imageUrl;
+    return $imageUrl;
+}, function (_a) {
+    var $backgroundGradient = _a.$backgroundGradient, $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return $backgroundGradient || ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.backgroundColor) || theme.avatar.backgroundColor;
+}, function (_a) {
+    var $logo = _a.$logo;
+    return ($logo ? "contain" : "cover");
+});
+var Initials = styled.styled.h2(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n  position: relative;\n  top: 2px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n  position: relative;\n  top: 2px;\n"])), function (_a) {
+    var $placeholderInitialsColorOverride = _a.$placeholderInitialsColorOverride;
+    return $placeholderInitialsColorOverride;
+}, function (_a) {
+    var _b;
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return ((_b = $themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) !== null && _b !== void 0 ? _b : theme.avatar.size) / 3.13;
+});
+var Badge = styled.styled.div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  background: url(", ") no-repeat;\n  background-size: contain;\n  border-radius: 50%;\n  bottom: 0;\n  height: ", "px;\n  left: 50%;\n  position: absolute;\n  transform: translate(-46%, 40%);\n  width: ", "px;\n  z-index: 10;\n"], ["\n  background: url(", ") no-repeat;\n  background-size: contain;\n  border-radius: 50%;\n  bottom: 0;\n  height: ", "px;\n  left: 50%;\n  position: absolute;\n  transform: translate(-46%, 40%);\n  width: ", "px;\n  z-index: 10;\n"])), function (_a) {
+    var $badgeUrl = _a.$badgeUrl;
+    return $badgeUrl;
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) ? $themeOverride.size * 0.28 : theme.avatar.size * 0.28);
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) ? $themeOverride.size * 0.28 : theme.avatar.size * 0.28);
+});
+var templateObject_1, templateObject_2, templateObject_3;
+
+var Avatar = function (_a) {
+    var backgroundGradient = _a.backgroundGradient, badgeUrl = _a.badgeUrl, imageUrl = _a.imageUrl, logo = _a.logo, placeholderInitials = _a.placeholderInitials, placeholderInitialsColorOverride = _a.placeholderInitialsColorOverride, square = _a.square, themeOverride = _a.themeOverride;
+    var theme = styled.useTheme();
+    var bgColor = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.backgroundColor) || theme.avatar.backgroundColor;
+    return (jsxRuntime.jsxs(Base, _tslib.__assign({ "data-testid": "bg-base", "$backgroundGradient": backgroundGradient, "$imageUrl": imageUrl, "$logo": logo, "$themeOverride": themeOverride, "$square": square }, { children: [!imageUrl && (jsxRuntime.jsx(Initials, _tslib.__assign({ "$placeholderInitialsColorOverride": placeholderInitialsColorOverride || pressedEnter.higherContrast({ color: bgColor, preferHigh: true }), "$themeOverride": themeOverride }, { children: getInitialsOnly.getInitialsOnly(placeholderInitials) }), void 0)), badgeUrl && jsxRuntime.jsx(Badge, { "$badgeUrl": badgeUrl, "$themeOverride": themeOverride }, void 0)] }), void 0));
+};
+Avatar.defaultProps = {};
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar-7853412b.js.map

package/lib/cjs/Avatar-7853412b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-7853412b.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/Avatar.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Avatar = require('./Avatar-01129ec7.js');
+var Avatar = require('./Avatar-7853412b.js');
 var getInitialsOnly = require('./getInitialsOnly.cjs');
 require('./_tslib-955e611e.js');
 require('react/jsx-runtime');

package/lib/cjs/Form.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormikContainer = require('./FormikContainer-2566c74f.js');
-var FormWrapper = require('./FormStyles-91ec9d95.js');
+var FormikContainer = require('./FormikContainer-0693d658.js');
+var FormWrapper = require('./FormStyles-32ed485a.js');
 var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
 require('./_tslib-955e611e.js');
 require('react/jsx-runtime');

package/lib/cjs/{FormStyles-91ec9d95.js → FormStyles-32ed485a.js}

@@ -537,7 +537,7 @@ var ClearFormButtonWrap = styled.styled.div(templateObject_5 || (templateObject_
     var $clickable = _a.$clickable;
     return ($clickable ? 1 : 0);
 });
-var FieldBox = styled.styled.div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  column-gap: 12px;\n  grid-template-columns: ", ";\n  margin-bottom: ", "px;\n  max-width: ", ";\n  opacity: ", ";\n"], ["\n  display: ", ";\n  column-gap: 12px;\n  grid-template-columns: ", ";\n  margin-bottom: ", "px;\n  max-width: ", ";\n  opacity: ", ";\n"])), function (_a) {
+var FieldBox = styled.styled.div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  column-gap: 12px;\n  grid-template-columns: ", ";\n  margin-bottom: ", "px;\n  max-width: ", ";\n  margin: ", ";\n  opacity: ", ";\n"], ["\n  display: ", ";\n  column-gap: 12px;\n  grid-template-columns: ", ";\n  margin-bottom: ", "px;\n  max-width: ", ";\n  margin: ", ";\n  opacity: ", ";\n"])), function (_a) {
     var $leftLabelLayout = _a.$leftLabelLayout;
     return ($leftLabelLayout ? "grid" : "block");
 }, function (_a) {
@@ -549,6 +549,9 @@ var FieldBox = styled.styled.div(templateObject_6 || (templateObject_6 = _tslib.
 }, function (_a) {
     var $fieldWidth = _a.$fieldWidth;
     return ($fieldWidth ? "".concat($fieldWidth, "px") : "inherit");
+}, function (_a) {
+    var $marginString = _a.$marginString;
+    return $marginString;
 }, function (_a) {
     var $fade = _a.$fade;
     return ($fade ? 0 : 1);
@@ -680,7 +683,10 @@ var SubHeader = styled.styled(BodyLEmphasis.BodyXSEmphasis)(templateObject_27 ||
     var $maxWidth = _a.$maxWidth;
     return $maxWidth !== null && $maxWidth !== void 0 ? $maxWidth : 700;
 });
-var Separator = styled.styled.hr(templateObject_28 || (templateObject_28 = _tslib.__makeTemplateObject(["\n  margin: ", ";\n  border: none;\n  background-color: ", ";\n  height: 1px;\n"], ["\n  margin: ", ";\n  border: none;\n  background-color: ", ";\n  height: 1px;\n"])), function (_a) {
+var Separator = styled.styled.hr(templateObject_28 || (templateObject_28 = _tslib.__makeTemplateObject(["\n  width: calc(100% + ", "px);\n  margin: ", ";\n  border: none;\n  background-color: ", ";\n  height: 1px;\n"], ["\n  width: calc(100% + ", "px);\n  margin: ", ";\n  border: none;\n  background-color: ", ";\n  height: 1px;\n"])), function (_a) {
+    var $seperatorOverflow = _a.$seperatorOverflow;
+    return $seperatorOverflow !== null && $seperatorOverflow !== void 0 ? $seperatorOverflow : 0;
+}, function (_a) {
     var $marginString = _a.$marginString;
     return $marginString;
 }, function (_a) {
@@ -748,4 +754,4 @@ exports.formHasValues = formHasValues;
 exports.formatInitialValues = formatInitialValues;
 exports.formatValidation = formatValidation;
 exports.shouldFade = shouldFade;
-//# sourceMappingURL=FormStyles-91ec9d95.js.map
+//# sourceMappingURL=FormStyles-32ed485a.js.map

package/lib/cjs/{FormStyles-91ec9d95.js.map → FormStyles-32ed485a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormStyles-91ec9d95.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormStyles-32ed485a.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/FormWrapper.cjs

@@ -7,7 +7,7 @@ require('styled-components');
 require('./BodyLEmphasis.cjs');
 require('./Inputs-e71bb0b9.js');
 require('./colors.cjs');
-var FormWrapper = require('./FormStyles-91ec9d95.js');
+var FormWrapper = require('./FormStyles-32ed485a.js');
 require('./Loading.cjs');
 require('./Scroller.cjs');
 require('react/jsx-runtime');

package/lib/cjs/{FormikContainer-2566c74f.js → FormikContainer-0693d658.js}

@@ -17,7 +17,7 @@ var usePrevious = require('./usePrevious.cjs');
 require('./Loading.cjs');
 var Scroller = require('./Scroller.cjs');
 var ButtonColorFamilyEnum = require('./ButtonColorFamilyEnum.cjs');
-var FormWrapper = require('./FormStyles-91ec9d95.js');
+var FormWrapper = require('./FormStyles-32ed485a.js');
 var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
 var AddressInput = require('./AddressInput-868cf326.js');
 var Inputs = require('./Inputs-e71bb0b9.js');
@@ -62,7 +62,6 @@ require('./colors.cjs');
 require('chroma-js');
 require('./IconComponentStyles-64e1c8e7.js');
 var PlusCircle = require('./PlusCircle.cjs');
-var BodyLEmphasis = require('./BodyLEmphasis.cjs');
 var ToggleItem = require('./ToggleItem-a6e5b1bd.js');
 var InlineTextarea = require('./InlineTextarea.cjs');
 var Textarea = require('./Textarea.cjs');
@@ -912,17 +911,33 @@ var RemovableField = function (_a) {
             }), jsxRuntime.jsx(FormWrapper.RemoveButtonWrapper, { children: jsxRuntime.jsx(TextButton.TextButton, { onClick: handleRemove, text: removeButtonText }, void 0) }, void 0)] }), void 0)) : (jsxRuntime.jsx(FormWrapper.RemovableButtonBox, _tslib.__assign({ "$fade": fade, "$rowGap": rowGap }, { children: jsxRuntime.jsx(TextButton.TextButton, { onClick: function () { return setShowInput(true); }, text: addButtonText, Icon: PlusCircle.PlusCircle, iconGap: 14 }, void 0) }), void 0));
 };
 
+var Header = styled.styled.h3(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  letter-spacing: 0.48px;\n  line-height: ", "px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  letter-spacing: 0.48px;\n  line-height: ", "px;\n"])), function (_a) {
+    var _b;
+    var $textColor = _a.$textColor, theme = _a.theme;
+    return $textColor || ((_b = theme.text) === null || _b === void 0 ? void 0 : _b.primary);
+}, function (_a) {
+    var $fontSize = _a.$fontSize;
+    return $fontSize || 22;
+}, function (_a) {
+    var $fontWeight = _a.$fontWeight;
+    return $fontWeight || 600;
+}, function (_a) {
+    var $lineHeight = _a.$lineHeight, $fontSize = _a.$fontSize;
+    return $lineHeight || (($fontSize || 22) * 1.6);
+});
+var templateObject_1;
+
 var SectionHeader = function (_a) {
     var fade = _a.fade, field = _a.field, fieldIndex = _a.fieldIndex, removeAnimation = _a.removeAnimation, rowGap = _a.rowGap, setIsDeleting = _a.setIsDeleting, themeOverride = _a.themeOverride;
-    var header = field.header, nextGap = field.nextGap, separator = field.separator, _b = field.separatorMarginString, separatorMarginString = _b === void 0 ? "42px 0 26px" : _b, subHeader = field.subHeader, text = field.text, remove = field.remove, _c = field.width, width = _c === void 0 ? 700 : _c;
+    var header = field.header, nextGap = field.nextGap, separatorOverflow = field.separatorOverflow, separator = field.separator, _b = field.separatorPosition, separatorPosition = _b === void 0 ? "top" : _b, _c = field.separatorMarginString, separatorMarginString = _c === void 0 ? "42px 0 26px" : _c, subHeader = field.subHeader, text = field.text, remove = field.remove, _d = field.width, width = _d === void 0 ? 700 : _d;
     var theme = styled.useTheme();
-    return (jsxRuntime.jsxs(FormWrapper.FieldBox, _tslib.__assign({ "$fade": fade, "$rowGap": nextGap !== null && nextGap !== void 0 ? nextGap : rowGap }, { children: [separator && (jsxRuntime.jsx(FormWrapper.Separator, { "$marginString": separatorMarginString, "$themeOverride": themeOverride, "data-testid": "SectionHeader_separator" }, void 0)), jsxRuntime.jsxs(FormWrapper.TitleGroup, _tslib.__assign({ "$roomForRemove": !!remove, "$maxWidth": width }, { children: [header && jsxRuntime.jsx(BodyLEmphasis.HeadingH3, _tslib.__assign({ "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionHeaderColor }, { children: header }), void 0), remove && (jsxRuntime.jsx(TextButton.TextButton, { onClick: function (event) {
+    return (jsxRuntime.jsxs(FormWrapper.FieldBox, _tslib.__assign({ "$fade": fade, "$rowGap": nextGap !== null && nextGap !== void 0 ? nextGap : rowGap }, { children: [separator && (separatorPosition === "top" || separatorPosition === undefined) && (jsxRuntime.jsx(FormWrapper.Separator, { "$marginString": separatorMarginString, "$themeOverride": themeOverride, "$seperatorOverflow": separatorOverflow, "data-testid": "SectionHeader_separator" }, void 0)), jsxRuntime.jsxs(FormWrapper.TitleGroup, _tslib.__assign({ "$roomForRemove": !!remove, "$maxWidth": width }, { children: [header && jsxRuntime.jsx(Header, _tslib.__assign({ "$fontSize": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionHeaderFontSize, "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionHeaderColor, "$fontWeight": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionHeaderFontWeight, "$lineHeight": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionHeaderLineHeight }, { children: header }), void 0), remove && (jsxRuntime.jsx(TextButton.TextButton, { onClick: function (event) {
                             removeAnimation(fieldIndex);
                             setTimeout(function () {
                                 remove(event);
                                 setIsDeleting(false);
                             }, 400);
-                        }, text: "Remove", colorFamily: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.removeButtonColorFamily) || theme.form.removeButtonColorFamily }, void 0))] }), void 0), text && (jsxRuntime.jsx(FormWrapper.Text, _tslib.__assign({ "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionTextColor, "$maxWidth": width }, { children: text }), void 0)), subHeader && (jsxRuntime.jsx(FormWrapper.SubHeader, _tslib.__assign({ "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionSubHeaderColor, "$maxWidth": width }, { children: subHeader }), void 0))] }), void 0));
+                        }, text: "Remove", colorFamily: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.removeButtonColorFamily) || theme.form.removeButtonColorFamily }, void 0))] }), void 0), text && (jsxRuntime.jsx(FormWrapper.Text, _tslib.__assign({ "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionTextColor, "$maxWidth": width }, { children: text }), void 0)), subHeader && (jsxRuntime.jsx(FormWrapper.SubHeader, _tslib.__assign({ "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionSubHeaderColor, "$maxWidth": width }, { children: subHeader }), void 0)), separator && separatorPosition === "bottom" && (jsxRuntime.jsx(FormWrapper.Separator, { "$marginString": separatorMarginString, "$themeOverride": themeOverride, "$seperatorOverflow": separatorOverflow, "data-testid": "SectionHeader_separator" }, void 0))] }), void 0));
 };
 
 var ToggleField = function (_a) {
@@ -1281,4 +1296,4 @@ FormikContainer.defaultProps = {
 };
 
 exports.FormikContainer = FormikContainer;
-//# sourceMappingURL=FormikContainer-2566c74f.js.map
+//# sourceMappingURL=FormikContainer-0693d658.js.map

package/lib/{esm/FormikContainer-a2570f47.js.map → cjs/FormikContainer-0693d658.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormikContainer-a2570f47.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormikContainer-0693d658.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/{LogoSidebar-0bf2f163.js → LogoSidebar-0dcda0c6.js}

@@ -4,7 +4,7 @@ var _tslib = require('./_tslib-955e611e.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var styled = require('styled-components');
-var Avatar = require('./Avatar-01129ec7.js');
+var Avatar = require('./Avatar-7853412b.js');
 var InteriorSidebar = require('./InteriorSidebar-d3b7fa0d.js');
 var useMeasure = require('./useMeasure-99851af4.js');
 var isEmptyObject = require('./isEmptyObject.cjs');
@@ -56,4 +56,4 @@ var LogoSidebar = function (_a) {
 LogoSidebar.defaultProps = {};
 
 exports.LogoSidebar = LogoSidebar;
-//# sourceMappingURL=LogoSidebar-0bf2f163.js.map
+//# sourceMappingURL=LogoSidebar-0dcda0c6.js.map

package/lib/cjs/LogoSidebar-0dcda0c6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoSidebar-0dcda0c6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/LogoSidebar.cjs

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LogoSidebar = require('./LogoSidebar-0bf2f163.js');
+var LogoSidebar = require('./LogoSidebar-0dcda0c6.js');
 require('./_tslib-955e611e.js');
 require('react/jsx-runtime');
 require('react');
 require('styled-components');
-require('./Avatar-01129ec7.js');
+require('./Avatar-7853412b.js');
 require('./pressedEnter.cjs');
 require('chroma-js');
 require('./getInitialsOnly.cjs');

package/lib/cjs/{RJSForm-0eab2678.js → RJSForm-41ffb951.js}

@@ -22,7 +22,7 @@ require('./Button.cjs');
 var PrimaryButton = require('./PrimaryButton.cjs');
 require('./ButtonVariantEnum.cjs');
 var isEmptyObject = require('./isEmptyObject.cjs');
-var FormWrapper = require('./FormStyles-91ec9d95.js');
+var FormWrapper = require('./FormStyles-32ed485a.js');
 var BodyLEmphasis = require('./BodyLEmphasis.cjs');
 var TextButton = require('./TextButton.cjs');
 var AddButton = require('./AddButton-91ec6c74.js');
@@ -373,4 +373,4 @@ RJSForm.defaultProps = {
 };
 
 exports.RJSForm = RJSForm;
-//# sourceMappingURL=RJSForm-0eab2678.js.map
+//# sourceMappingURL=RJSForm-41ffb951.js.map

package/lib/cjs/{RJSForm-0eab2678.js.map → RJSForm-41ffb951.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RJSForm-0eab2678.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RJSForm-41ffb951.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/RJSForm.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var RJSForm = require('./RJSForm-0eab2678.js');
+var RJSForm = require('./RJSForm-41ffb951.js');
 var types = require('./types-92e1c1ae.js');
 require('./_tslib-955e611e.js');
 require('react/jsx-runtime');
@@ -81,7 +81,7 @@ require('./Close-e7de6f54.js');
 require('./useMeasureWatchResize-1bef92e8.js');
 require('./DropdownInputStyles-13901ba5.js');
 require('./PrimaryButton.cjs');
-require('./FormStyles-91ec9d95.js');
+require('./FormStyles-32ed485a.js');
 require('yup');
 require('./FormFieldTypeEnum.cjs');
 require('./northAmericanNumberingPlanRegex.cjs');

package/lib/cjs/UserCard.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('./_tslib-955e611e.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Avatar = require('./Avatar-01129ec7.js');
+var Avatar = require('./Avatar-7853412b.js');
 var getInitialsOnly = require('./getInitialsOnly.cjs');
 var colors = require('./colors.cjs');
 var pressedEnter = require('./pressedEnter.cjs');

package/lib/cjs/UserCardModal.cjs

@@ -11,7 +11,7 @@ require('react');
 require('react-dom');
 require('./position-0d230ab8.js');
 require('./isEmptyObject.cjs');
-require('./Avatar-01129ec7.js');
+require('./Avatar-7853412b.js');
 require('./pressedEnter.cjs');
 require('chroma-js');
 require('./getInitialsOnly.cjs');

package/lib/cjs/{UserInformationCard-d3ac00b2.js → UserInformationCard-7bc7953d.js}

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var colors = require('./colors.cjs');
 var isEmptyObject = require('./isEmptyObject.cjs');
-var Avatar = require('./Avatar-01129ec7.js');
+var Avatar = require('./Avatar-7853412b.js');
 var useMeasure = require('./useMeasure-99851af4.js');
 var TruncatePicker = require('./TruncatePicker-36c3071c.js');
 var BodyLEmphasis = require('./BodyLEmphasis.cjs');
@@ -105,7 +105,7 @@ var TextWithLoader = styled.styled(BodyLEmphasis.BodyMPrimary)(templateObject_9
     var $isLoading = _a.$isLoading;
     return $isLoading && Loading.loadingPseudo({ loadingColor: colors.colors.COOL_GREY_15, bgColor: colors.colors.COOL_GREY_4, borderRadius: 6, topOffset: 2 });
 });
-var TitleWithLoader = styled.styled(BodyLEmphasis.BodyLEmphasis)(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  overflow-wrap: anywhere;\n  line-height: ", "px;\n  display: ", ";\n  max-width: ", ";\n  ", ";\n"], ["\n  color: ", ";\n  overflow-wrap: anywhere;\n  line-height: ", "px;\n  display: ", ";\n  max-width: ", ";\n  ", ";\n"])), function (_a) {
+var TitleWithLoader = styled.styled(BodyLEmphasis.BodyLEmphasis)(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  overflow-wrap: anywhere;\n  line-height: ", "px;\n  display: ", ";\n  max-width: ", ";\n  ", ";\n  text-align: ", ";\n"], ["\n  color: ", ";\n  overflow-wrap: anywhere;\n  line-height: ", "px;\n  display: ", ";\n  max-width: ", ";\n  ", ";\n  text-align: ", ";\n"])), function (_a) {
     var $textColor = _a.$textColor;
     return $textColor !== null && $textColor !== void 0 ? $textColor : colors.colors.BLACK;
 }, function (_a) {
@@ -120,6 +120,9 @@ var TitleWithLoader = styled.styled(BodyLEmphasis.BodyLEmphasis)(templateObject_
 }, function (_a) {
     var isLoading = _a.$isLoading;
     return isLoading && Loading.loadingPseudo({ loadingColor: colors.colors.COOL_GREY_15, bgColor: colors.colors.COOL_GREY_4, borderRadius: 6, topOffset: 2 });
+}, function (_a) {
+    var $centerName = _a.$centerName, $horizontal = _a.$horizontal;
+    return ($centerName && !$horizontal ? "center" : "left");
 });
 var ChildWrapper = styled.styled.div(templateObject_11 || (templateObject_11 = _tslib.__makeTemplateObject(["\n  padding: 0 42px 52px 42px;\n"], ["\n  padding: 0 42px 52px 42px;\n"])));
 var Divider = styled.styled.hr(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  height: 1px;\n  margin: 0 -9px 8px;\n"], ["\n  background-color: ", ";\n  border: none;\n  height: 1px;\n  margin: 0 -9px 8px;\n"])), function (_a) {
@@ -131,7 +134,7 @@ var ClearableTagWrapper = styled.styled.div(templateObject_13 || (templateObject
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
 
 var UserInformationCard = function (_a) {
-    var avatarImageUrl = _a.avatarImageUrl, horizontal = _a.horizontal, address1 = _a.address1, address2 = _a.address2, boxShadowString = _a.boxShadowString, children = _a.children, city = _a.city, dob = _a.dob, firstName = _a.firstName, isLoading = _a.isLoading, lastName = _a.lastName, maxHeightInternalCalcString = _a.maxHeightInternalCalcString, middleName = _a.middleName, orderType = _a.orderType, squareAvatar = _a.squareAvatar, state = _a.state, ssn = _a.ssn, themeOverride = _a.themeOverride, width = _a.width, zip = _a.zip, clearableMessage = _a.clearableMessage, ClearableMessageIcon = _a.ClearableMessageIcon;
+    var address1 = _a.address1, address2 = _a.address2, avatarBadgeUrl = _a.avatarBadgeUrl, avatarImageUrl = _a.avatarImageUrl, boxShadowString = _a.boxShadowString, centerName = _a.centerName, children = _a.children, city = _a.city, clearableMessage = _a.clearableMessage, ClearableMessageIcon = _a.ClearableMessageIcon, dob = _a.dob, firstName = _a.firstName, horizontal = _a.horizontal, isLoading = _a.isLoading, lastName = _a.lastName, maxHeightInternalCalcString = _a.maxHeightInternalCalcString, middleName = _a.middleName, orderType = _a.orderType, removeConsumerLabel = _a.removeConsumerLabel, squareAvatar = _a.squareAvatar, state = _a.state, ssn = _a.ssn, themeOverride = _a.themeOverride, width = _a.width, zip = _a.zip;
     var _b = useMeasure.useMeasure(), dataWrapperRef = _b[0], dataWrapperMeasure = _b[1];
     var _c = useMeasure.useMeasure(), avatarWrapperRef = _c[0], avatarWrapperMeasure = _c[1];
     var _d = React.useState(186), orderTagMaxWidth = _d[0], setOrderTagMaxWidth = _d[1];
@@ -212,7 +215,7 @@ var UserInformationCard = function (_a) {
     React.useEffect(function () {
         setOrderTagMaxWidth(avatarWrapperMeasure.width);
     }, [avatarWrapperMeasure.width]);
-    return (jsxRuntime.jsxs(CardBox, _tslib.__assign({ "$boxShadowString": boxShadowString, "$horizontal": horizontal, "$maxHeightInternalCalcString": maxHeightInternalCalcString, "$width": width }, { children: [jsxRuntime.jsxs(AvatarWrapper, _tslib.__assign({ ref: avatarWrapperRef, "$horizontal": horizontal, "$themeOverride": themeOverride }, { children: [jsxRuntime.jsx(OrderTag, _tslib.__assign({ "$width": orderTagMaxWidth }, { children: jsxRuntime.jsx(TruncatePicker.TruncatePicker, { children: orderType }, void 0) }), void 0), jsxRuntime.jsx(Avatar.Avatar, { backgroundGradient: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.avatarBackgroundColor) || gradients.gradients.avatar, imageUrl: avatarImageUrl, square: squareAvatar, themeOverride: avatarOverride, placeholderInitials: fullName }, void 0)] }), void 0), jsxRuntime.jsx(HorizontalMeasure, _tslib.__assign({}, (horizontal ? { ref: dataWrapperRef } : {}), { children: jsxRuntime.jsxs(ScrollBox, _tslib.__assign({ "$maxHeightInternalCalcString": maxHeightInternalCalcString, "$horizontal": horizontal }, { children: [jsxRuntime.jsxs(DataWrapper, _tslib.__assign({ "$hasChildren": hasChildren, "$horizontal": horizontal, "$breakSSN": breakSSN, "$breakLayout": breakLayout }, { children: [clearableMessage && showClearableMessage && (jsxRuntime.jsx(ClearableTagWrapper, { children: jsxRuntime.jsx(ClearableTag.ClearableTag, { noXShadow: true, colorFamily: ButtonColorFamilyEnum.ButtonColorFamilyEnum.Purple, tag: {
+    return (jsxRuntime.jsxs(CardBox, _tslib.__assign({ "$boxShadowString": boxShadowString, "$horizontal": horizontal, "$maxHeightInternalCalcString": maxHeightInternalCalcString, "$width": width }, { children: [jsxRuntime.jsxs(AvatarWrapper, _tslib.__assign({ ref: avatarWrapperRef, "$horizontal": horizontal, "$themeOverride": themeOverride }, { children: [orderType && (jsxRuntime.jsx(OrderTag, _tslib.__assign({ "$width": orderTagMaxWidth }, { children: jsxRuntime.jsx(TruncatePicker.TruncatePicker, { children: orderType }, void 0) }), void 0)), jsxRuntime.jsx(Avatar.Avatar, { backgroundGradient: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.avatarBackgroundColor) || gradients.gradients.avatar, badgeUrl: avatarBadgeUrl, imageUrl: avatarImageUrl, square: squareAvatar, themeOverride: avatarOverride, placeholderInitials: fullName }, void 0)] }), void 0), jsxRuntime.jsx(HorizontalMeasure, _tslib.__assign({}, (horizontal ? { ref: dataWrapperRef } : {}), { children: jsxRuntime.jsxs(ScrollBox, _tslib.__assign({ "$maxHeightInternalCalcString": maxHeightInternalCalcString, "$horizontal": horizontal }, { children: [jsxRuntime.jsxs(DataWrapper, _tslib.__assign({ "$hasChildren": hasChildren, "$horizontal": horizontal, "$breakSSN": breakSSN, "$breakLayout": breakLayout }, { children: [clearableMessage && showClearableMessage && (jsxRuntime.jsx(ClearableTagWrapper, { children: jsxRuntime.jsx(ClearableTag.ClearableTag, { noXShadow: true, colorFamily: ButtonColorFamilyEnum.ButtonColorFamilyEnum.Purple, tag: {
                                             Icon: ClearableMessageIcon,
                                             id: "clearable-tag",
                                             label: clearableMessage || "",
@@ -220,8 +223,8 @@ var UserInformationCard = function (_a) {
                                             fontSize: 13,
                                         }, xClick: function () {
                                             setShowClearableMessage(false);
-                                        } }, void 0) }, void 0)), jsxRuntime.jsxs(Item, _tslib.__assign({ "$gridArea": "name" }, { children: [jsxRuntime.jsx(Label, { children: "Consumer" }, void 0), jsxRuntime.jsx(TitleWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$lineHeight": 24 }, { children: displayName }), void 0)] }), void 0), jsxRuntime.jsxs(Item, _tslib.__assign({ "$gridArea": "address" }, { children: [jsxRuntime.jsx(Label, { children: "Address" }, void 0), addressLineOne && (jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.colors.COOL_GREY_100 }, { children: addressLineOne }), void 0)), addressLineTwo && (jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.colors.COOL_GREY_100 }, { children: addressLineTwo }), void 0)), !(addressLineOne || addressLineTwo) && (jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.colors.COOL_GREY_100 }, { children: "N/A" }), void 0))] }), void 0), jsxRuntime.jsxs(Item, _tslib.__assign({ "$gridArea": "dob" }, { children: [jsxRuntime.jsx(Label, { children: "DOB" }, void 0), jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$loadingLength": 140, "$textColor": colors.colors.COOL_GREY_100 }, { children: dob || "N/A" }), void 0)] }), void 0), jsxRuntime.jsxs(Item, _tslib.__assign({ "$gridArea": "ssn" }, { children: [jsxRuntime.jsx(Label, { children: "SSN" }, void 0), jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$loadingLength": 120, "$textColor": colors.colors.COOL_GREY_100 }, { children: applySsnMask.applySsnMask({ numberValue: ssn || "" }) || "N/A" }), void 0), !(addressLineOne || addressLineTwo) && (jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.colors.COOL_GREY_100 }, { children: "N/A" }), void 0))] }), void 0)] }), void 0), hasChildren && !horizontal && (jsxRuntime.jsxs(ChildWrapper, { children: [jsxRuntime.jsx(Divider, { "$themeOverride": themeOverride }, void 0), children] }, void 0))] }), void 0) }), void 0)] }), void 0));
+                                        } }, void 0) }, void 0)), jsxRuntime.jsxs(Item, _tslib.__assign({ "$gridArea": "name" }, { children: [!removeConsumerLabel && jsxRuntime.jsx(Label, { children: "Consumer" }, void 0), jsxRuntime.jsx(TitleWithLoader, _tslib.__assign({ "$centerName": centerName, "$horizontal": horizontal, "$isLoading": isLoading, "$lineHeight": 24 }, { children: displayName }), void 0)] }), void 0), jsxRuntime.jsxs(Item, _tslib.__assign({ "$gridArea": "address" }, { children: [jsxRuntime.jsx(Label, { children: "Address" }, void 0), addressLineOne || addressLineTwo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [addressLineOne && (jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.colors.COOL_GREY_100 }, { children: addressLineOne }), void 0)), addressLineTwo && (jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.colors.COOL_GREY_100 }, { children: addressLineTwo }), void 0))] }, void 0)) : (jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.colors.COOL_GREY_100 }, { children: "N/A" }), void 0))] }), void 0), dob != null && (jsxRuntime.jsxs(Item, _tslib.__assign({ "$gridArea": "dob" }, { children: [jsxRuntime.jsx(Label, { children: "DOB" }, void 0), jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$loadingLength": 140, "$textColor": colors.colors.COOL_GREY_100 }, { children: dob === "" ? "N/A" : dob }), void 0)] }), void 0)), ssn != null && (jsxRuntime.jsxs(Item, _tslib.__assign({ "$gridArea": "ssn" }, { children: [jsxRuntime.jsx(Label, { children: "SSN" }, void 0), jsxRuntime.jsx(TextWithLoader, _tslib.__assign({ "$isLoading": isLoading, "$loadingLength": 120, "$textColor": colors.colors.COOL_GREY_100 }, { children: ssn === "" ? "N/A" : applySsnMask.applySsnMask({ numberValue: ssn }) }), void 0)] }), void 0))] }), void 0), hasChildren && !horizontal && (jsxRuntime.jsxs(ChildWrapper, { children: [jsxRuntime.jsx(Divider, { "$themeOverride": themeOverride }, void 0), children] }, void 0))] }), void 0) }), void 0)] }), void 0));
 };
 
 exports.UserInformationCard = UserInformationCard;
-//# sourceMappingURL=UserInformationCard-d3ac00b2.js.map
+//# sourceMappingURL=UserInformationCard-7bc7953d.js.map

package/lib/{esm/UserInformationCard-cce874e4.js.map → cjs/UserInformationCard-7bc7953d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"UserInformationCard-cce874e4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"UserInformationCard-7bc7953d.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/UserInformationCard.cjs

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var UserInformationCard = require('./UserInformationCard-d3ac00b2.js');
+var UserInformationCard = require('./UserInformationCard-7bc7953d.js');
 require('./_tslib-955e611e.js');
 require('react/jsx-runtime');
 require('react');
 require('./colors.cjs');
 require('./isEmptyObject.cjs');
-require('./Avatar-01129ec7.js');
+require('./Avatar-7853412b.js');
 require('./pressedEnter.cjs');
 require('chroma-js');
 require('styled-components');

package/lib/cjs/index.cjs

@@ -7,10 +7,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var Drawer = require('./Drawer-09efe2ea.js');
 var styled = require('styled-components');
-var FormWrapper = require('./FormStyles-91ec9d95.js');
+var FormWrapper = require('./FormStyles-32ed485a.js');
 var AlertCount = require('./AlertCount-66fb29b9.js');
 var AddressInput = require('./AddressInput-868cf326.js');
-var Avatar = require('./Avatar-01129ec7.js');
+var Avatar = require('./Avatar-7853412b.js');
 var getInitialsOnly = require('./getInitialsOnly.cjs');
 var BoxedButton = require('./BoxedButton.cjs');
 var BoxedOutlineButton = require('./BoxedOutlineButton.cjs');
@@ -46,7 +46,7 @@ var helpers = require('./helpers-b07f14f3.js');
 var DrawerDivider = require('./DrawerDivider-8f1e423f.js');
 var EmailInput = require('./EmailInput-08b54599.js');
 var Footer = require('./Footer.cjs');
-var FormikContainer = require('./FormikContainer-2566c74f.js');
+var FormikContainer = require('./FormikContainer-0693d658.js');
 var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
 var FiltersBar = require('./FiltersBar-0c09771a.js');
 var HorizontalTabMenu = require('./HorizontalTabMenu-64d6e3a1.js');
@@ -67,7 +67,7 @@ var Loading = require('./Loading.cjs');
 var focusAfter = require('./focusAfter.cjs');
 var Scroller = require('./Scroller.cjs');
 var LoadingEllipsis = require('./LoadingEllipsis-b9895744.js');
-var LogoSidebar = require('./LogoSidebar-0bf2f163.js');
+var LogoSidebar = require('./LogoSidebar-0dcda0c6.js');
 var Modal = require('./Modal-c16dd7a7.js');
 var PasswordInput = require('./PasswordInput.cjs');
 var InlinePasswordInput = require('./InlinePasswordInput.cjs');
@@ -76,7 +76,7 @@ var PieChart = require('./PieChart-b221fe62.js');
 var Radio = require('./Radio-eb69f788.js');
 var RadioGroup = require('./RadioGroup-2654ae70.js');
 var RadioItem = require('./RadioItem-d4d9b513.js');
-var RJSForm = require('./RJSForm-0eab2678.js');
+var RJSForm = require('./RJSForm-41ffb951.js');
 require('./types-92e1c1ae.js');
 var RJSFormRenderer = require('./RJSFormRenderer-0ea1d6a2.js');
 require('react-dom');
@@ -116,7 +116,7 @@ var UploadDropzone = require('./UploadDropzone-554e6c21.js');
 var DropzoneColorFamilyEnum = require('./DropzoneColorFamilyEnum.cjs');
 var UserCard = require('./UserCard.cjs');
 var UserCardModal = require('./UserCardModal.cjs');
-var UserInformationCard = require('./UserInformationCard-d3ac00b2.js');
+var UserInformationCard = require('./UserInformationCard-7bc7953d.js');
 var ZipCodeInput = require('./ZipCodeInput.cjs');
 var InlineZipCodeInput = require('./InlineZipCodeInput.cjs');
 var applyZipCodeMask = require('./applyZipCodeMask.cjs');

package/lib/esm/{Avatar-5871e463.js → Avatar-8566fcdb.js}

@@ -1,10 +1,10 @@
 import { a as __makeTemplateObject, _ as __assign } from './_tslib-1a4c929e.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { higherContrast } from './pressedEnter.js';
 import { styled, useTheme } from 'styled-components';
 import { getInitialsOnly } from './getInitialsOnly.js';
 
-var Base = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  background: url(", ") no-repeat center,\n    ", ";\n  background-size: ", ";\n"], ["\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  background: url(", ") no-repeat center,\n    ", ";\n  background-size: ", ";\n"])), function (_a) {
+var Base = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  background: url(", ") no-repeat center,\n    ", ";\n  background-size: ", ";\n  position: relative;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  background: url(", ") no-repeat center,\n    ", ";\n  background-size: ", ";\n  position: relative;\n"])), function (_a) {
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) || theme.avatar.size;
 }, function (_a) {
@@ -31,15 +31,25 @@ var Initials = styled.h2(templateObject_2 || (templateObject_2 = __makeTemplateO
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ((_b = $themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) !== null && _b !== void 0 ? _b : theme.avatar.size) / 3.13;
 });
-var templateObject_1, templateObject_2;
+var Badge = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: url(", ") no-repeat;\n  background-size: contain;\n  border-radius: 50%;\n  bottom: 0;\n  height: ", "px;\n  left: 50%;\n  position: absolute;\n  transform: translate(-46%, 40%);\n  width: ", "px;\n  z-index: 10;\n"], ["\n  background: url(", ") no-repeat;\n  background-size: contain;\n  border-radius: 50%;\n  bottom: 0;\n  height: ", "px;\n  left: 50%;\n  position: absolute;\n  transform: translate(-46%, 40%);\n  width: ", "px;\n  z-index: 10;\n"])), function (_a) {
+    var $badgeUrl = _a.$badgeUrl;
+    return $badgeUrl;
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) ? $themeOverride.size * 0.28 : theme.avatar.size * 0.28);
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) ? $themeOverride.size * 0.28 : theme.avatar.size * 0.28);
+});
+var templateObject_1, templateObject_2, templateObject_3;
 
 var Avatar = function (_a) {
-    var backgroundGradient = _a.backgroundGradient, imageUrl = _a.imageUrl, logo = _a.logo, placeholderInitials = _a.placeholderInitials, placeholderInitialsColorOverride = _a.placeholderInitialsColorOverride, square = _a.square, themeOverride = _a.themeOverride;
+    var backgroundGradient = _a.backgroundGradient, badgeUrl = _a.badgeUrl, imageUrl = _a.imageUrl, logo = _a.logo, placeholderInitials = _a.placeholderInitials, placeholderInitialsColorOverride = _a.placeholderInitialsColorOverride, square = _a.square, themeOverride = _a.themeOverride;
     var theme = useTheme();
     var bgColor = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.backgroundColor) || theme.avatar.backgroundColor;
-    return (jsx(Base, __assign({ "data-testid": "bg-base", "$backgroundGradient": backgroundGradient, "$imageUrl": imageUrl, "$logo": logo, "$themeOverride": themeOverride, "$square": square }, { children: !imageUrl && (jsx(Initials, __assign({ "$placeholderInitialsColorOverride": placeholderInitialsColorOverride || higherContrast({ color: bgColor, preferHigh: true }), "$themeOverride": themeOverride }, { children: getInitialsOnly(placeholderInitials) }), void 0)) }), void 0));
+    return (jsxs(Base, __assign({ "data-testid": "bg-base", "$backgroundGradient": backgroundGradient, "$imageUrl": imageUrl, "$logo": logo, "$themeOverride": themeOverride, "$square": square }, { children: [!imageUrl && (jsx(Initials, __assign({ "$placeholderInitialsColorOverride": placeholderInitialsColorOverride || higherContrast({ color: bgColor, preferHigh: true }), "$themeOverride": themeOverride }, { children: getInitialsOnly(placeholderInitials) }), void 0)), badgeUrl && jsx(Badge, { "$badgeUrl": badgeUrl, "$themeOverride": themeOverride }, void 0)] }), void 0));
 };
 Avatar.defaultProps = {};
 
 export { Avatar as A };
-//# sourceMappingURL=Avatar-5871e463.js.map
+//# sourceMappingURL=Avatar-8566fcdb.js.map

package/lib/esm/Avatar-8566fcdb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-8566fcdb.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/Avatar.js

@@ -1,4 +1,4 @@
-export { A as Avatar } from './Avatar-5871e463.js';
+export { A as Avatar } from './Avatar-8566fcdb.js';
 export { getInitialsOnly } from './getInitialsOnly.js';
 import './_tslib-1a4c929e.js';
 import 'react/jsx-runtime';

package/lib/esm/Form.js

@@ -1,5 +1,5 @@
-export { F as Form } from './FormikContainer-a2570f47.js';
-export { F as FormWrapper } from './FormStyles-6cb7c6ff.js';
+export { F as Form } from './FormikContainer-0040cee3.js';
+export { F as FormWrapper } from './FormStyles-dc1864ed.js';
 export { FormFieldTypeEnum, RemovableFieldTypeEnum } from './FormFieldTypeEnum.js';
 import './_tslib-1a4c929e.js';
 import 'react/jsx-runtime';

package/lib/esm/{FormStyles-6cb7c6ff.js → FormStyles-dc1864ed.js}

@@ -515,7 +515,7 @@ var ClearFormButtonWrap = styled.div(templateObject_5 || (templateObject_5 = __m
     var $clickable = _a.$clickable;
     return ($clickable ? 1 : 0);
 });
-var FieldBox = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: ", ";\n  column-gap: 12px;\n  grid-template-columns: ", ";\n  margin-bottom: ", "px;\n  max-width: ", ";\n  opacity: ", ";\n"], ["\n  display: ", ";\n  column-gap: 12px;\n  grid-template-columns: ", ";\n  margin-bottom: ", "px;\n  max-width: ", ";\n  opacity: ", ";\n"])), function (_a) {
+var FieldBox = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: ", ";\n  column-gap: 12px;\n  grid-template-columns: ", ";\n  margin-bottom: ", "px;\n  max-width: ", ";\n  margin: ", ";\n  opacity: ", ";\n"], ["\n  display: ", ";\n  column-gap: 12px;\n  grid-template-columns: ", ";\n  margin-bottom: ", "px;\n  max-width: ", ";\n  margin: ", ";\n  opacity: ", ";\n"])), function (_a) {
     var $leftLabelLayout = _a.$leftLabelLayout;
     return ($leftLabelLayout ? "grid" : "block");
 }, function (_a) {
@@ -527,6 +527,9 @@ var FieldBox = styled.div(templateObject_6 || (templateObject_6 = __makeTemplate
 }, function (_a) {
     var $fieldWidth = _a.$fieldWidth;
     return ($fieldWidth ? "".concat($fieldWidth, "px") : "inherit");
+}, function (_a) {
+    var $marginString = _a.$marginString;
+    return $marginString;
 }, function (_a) {
     var $fade = _a.$fade;
     return ($fade ? 0 : 1);
@@ -658,7 +661,10 @@ var SubHeader = styled(BodyXSEmphasis)(templateObject_27 || (templateObject_27 =
     var $maxWidth = _a.$maxWidth;
     return $maxWidth !== null && $maxWidth !== void 0 ? $maxWidth : 700;
 });
-var Separator = styled.hr(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  margin: ", ";\n  border: none;\n  background-color: ", ";\n  height: 1px;\n"], ["\n  margin: ", ";\n  border: none;\n  background-color: ", ";\n  height: 1px;\n"])), function (_a) {
+var Separator = styled.hr(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  width: calc(100% + ", "px);\n  margin: ", ";\n  border: none;\n  background-color: ", ";\n  height: 1px;\n"], ["\n  width: calc(100% + ", "px);\n  margin: ", ";\n  border: none;\n  background-color: ", ";\n  height: 1px;\n"])), function (_a) {
+    var $seperatorOverflow = _a.$seperatorOverflow;
+    return $seperatorOverflow !== null && $seperatorOverflow !== void 0 ? $seperatorOverflow : 0;
+}, function (_a) {
     var $marginString = _a.$marginString;
     return $marginString;
 }, function (_a) {
@@ -691,4 +697,4 @@ var LoadingInput = styled.div(templateObject_32 || (templateObject_32 = __makeTe
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
 
 export { AddButtonGroup as A, ButtonGroup as B, CenterCheckbox as C, DefaultPixelWidth as D, FormWrapper as F, HelperTextGrid as H, InputBox as I, LeftGutter as L, RightGutter as R, Separator as S, TitleGroup as T, ValidationTextGrid as V, FieldBox as a, LeftLabel as b, RemovableFieldBox as c, RemoveButtonWrapper as d, RemovableButtonBox as e, formHasValues as f, Text as g, SubHeader as h, InlineFieldGrid as i, InlineFieldCell as j, CenterToggle as k, LoadingBase as l, LoadingBox as m, LoadingLabel as n, LoadingInput as o, FormGroup as p, FormTitleGroup as q, Title as r, ClearFormButtonWrap as s, shouldFade as t, AddButtonBox as u, SubmitButton as v, CancelButton as w, formatInitialValues as x, formatValidation as y };
-//# sourceMappingURL=FormStyles-6cb7c6ff.js.map
+//# sourceMappingURL=FormStyles-dc1864ed.js.map

package/lib/esm/{FormStyles-6cb7c6ff.js.map → FormStyles-dc1864ed.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormStyles-6cb7c6ff.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormStyles-dc1864ed.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/FormWrapper.js

@@ -3,7 +3,7 @@ import 'styled-components';
 import './BodyLEmphasis.js';
 import './Inputs-34227839.js';
 import './colors.js';
-export { u as AddButtonBox, A as AddButtonGroup, B as ButtonGroup, w as CancelButton, C as CenterCheckbox, k as CenterToggle, s as ClearFormButtonWrap, a as FieldBox, p as FormGroup, q as FormTitleGroup, F as FormWrapper, H as HelperTextGrid, j as InlineFieldCell, i as InlineFieldGrid, I as InputBox, L as LeftGutter, b as LeftLabel, l as LoadingBase, m as LoadingBox, o as LoadingInput, n as LoadingLabel, e as RemovableButtonBox, c as RemovableFieldBox, d as RemoveButtonWrapper, R as RightGutter, S as Separator, h as SubHeader, v as SubmitButton, g as Text, r as Title, T as TitleGroup, V as ValidationTextGrid } from './FormStyles-6cb7c6ff.js';
+export { u as AddButtonBox, A as AddButtonGroup, B as ButtonGroup, w as CancelButton, C as CenterCheckbox, k as CenterToggle, s as ClearFormButtonWrap, a as FieldBox, p as FormGroup, q as FormTitleGroup, F as FormWrapper, H as HelperTextGrid, j as InlineFieldCell, i as InlineFieldGrid, I as InputBox, L as LeftGutter, b as LeftLabel, l as LoadingBase, m as LoadingBox, o as LoadingInput, n as LoadingLabel, e as RemovableButtonBox, c as RemovableFieldBox, d as RemoveButtonWrapper, R as RightGutter, S as Separator, h as SubHeader, v as SubmitButton, g as Text, r as Title, T as TitleGroup, V as ValidationTextGrid } from './FormStyles-dc1864ed.js';
 import './Loading.js';
 import './Scroller.js';
 import 'react/jsx-runtime';

package/lib/esm/{FormikContainer-a2570f47.js → FormikContainer-0040cee3.js}

@@ -1,8 +1,8 @@
-import { _ as __assign, f as __spreadArray } from './_tslib-1a4c929e.js';
+import { _ as __assign, f as __spreadArray, a as __makeTemplateObject } from './_tslib-1a4c929e.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment, useState, useEffect, useCallback } from 'react';
 import { Formik, useFormikContext } from 'formik';
-import { useTheme } from 'styled-components';
+import { useTheme, styled } from 'styled-components';
 import { A as AddButton } from './AddButton-59c22abc.js';
 import './Button.js';
 import { PrimaryButton } from './PrimaryButton.js';
@@ -15,7 +15,7 @@ import { usePrevious } from './usePrevious.js';
 import './Loading.js';
 import { ShortScroller } from './Scroller.js';
 import { USStatesEnum, CreditCardTypes, TextStyleEnum } from './ButtonColorFamilyEnum.js';
-import { a as FieldBox, L as LeftGutter, b as LeftLabel, H as HelperTextGrid, R as RightGutter, V as ValidationTextGrid, I as InputBox, f as formHasValues, D as DefaultPixelWidth, c as RemovableFieldBox, d as RemoveButtonWrapper, e as RemovableButtonBox, S as Separator, T as TitleGroup, g as Text, h as SubHeader, i as InlineFieldGrid, j as InlineFieldCell, C as CenterCheckbox, k as CenterToggle, l as LoadingBase, m as LoadingBox, n as LoadingLabel, o as LoadingInput, p as FormGroup, q as FormTitleGroup, r as Title, s as ClearFormButtonWrap, t as shouldFade, A as AddButtonGroup, u as AddButtonBox, B as ButtonGroup, v as SubmitButton, w as CancelButton, x as formatInitialValues, y as formatValidation } from './FormStyles-6cb7c6ff.js';
+import { a as FieldBox, L as LeftGutter, b as LeftLabel, H as HelperTextGrid, R as RightGutter, V as ValidationTextGrid, I as InputBox, f as formHasValues, D as DefaultPixelWidth, c as RemovableFieldBox, d as RemoveButtonWrapper, e as RemovableButtonBox, S as Separator, T as TitleGroup, g as Text, h as SubHeader, i as InlineFieldGrid, j as InlineFieldCell, C as CenterCheckbox, k as CenterToggle, l as LoadingBase, m as LoadingBox, n as LoadingLabel, o as LoadingInput, p as FormGroup, q as FormTitleGroup, r as Title, s as ClearFormButtonWrap, t as shouldFade, A as AddButtonGroup, u as AddButtonBox, B as ButtonGroup, v as SubmitButton, w as CancelButton, x as formatInitialValues, y as formatValidation } from './FormStyles-dc1864ed.js';
 import { isSelectOptionType, isSwitchMenuOptionsType, isArrayOfSelectOptionsType, isAddress, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isMultiSelect, isNumber, isPassword, isPhone, isSelect, isSocialSecurity, isStateSelect, isZipCode, isText, RemovableFieldTypeEnum, isSplitLine, isSectionHeader, isCheckbox, isImagePicker, isToggle, isFormFieldType, isCheckboxGroup, isConfigurableInput, isHidden, isRadioGroup, isRemovable, isTextarea, isToggleGroup } from './FormFieldTypeEnum.js';
 import { A as AddressInput } from './AddressInput-53f61e14.js';
 import { A as Asterisk } from './Inputs-34227839.js';
@@ -60,7 +60,6 @@ import './colors.js';
 import 'chroma-js';
 import './IconComponentStyles-091931ba.js';
 import { PlusCircle } from './PlusCircle.js';
-import { HeadingH3 } from './BodyLEmphasis.js';
 import { T as ToggleItem } from './ToggleItem-29649e46.js';
 import { InlineTextarea } from './InlineTextarea.js';
 import { Textarea } from './Textarea.js';
@@ -910,17 +909,33 @@ var RemovableField = function (_a) {
             }), jsx(RemoveButtonWrapper, { children: jsx(TextButton, { onClick: handleRemove, text: removeButtonText }, void 0) }, void 0)] }), void 0)) : (jsx(RemovableButtonBox, __assign({ "$fade": fade, "$rowGap": rowGap }, { children: jsx(TextButton, { onClick: function () { return setShowInput(true); }, text: addButtonText, Icon: PlusCircle, iconGap: 14 }, void 0) }), void 0));
 };
 
+var Header = styled.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  letter-spacing: 0.48px;\n  line-height: ", "px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  letter-spacing: 0.48px;\n  line-height: ", "px;\n"])), function (_a) {
+    var _b;
+    var $textColor = _a.$textColor, theme = _a.theme;
+    return $textColor || ((_b = theme.text) === null || _b === void 0 ? void 0 : _b.primary);
+}, function (_a) {
+    var $fontSize = _a.$fontSize;
+    return $fontSize || 22;
+}, function (_a) {
+    var $fontWeight = _a.$fontWeight;
+    return $fontWeight || 600;
+}, function (_a) {
+    var $lineHeight = _a.$lineHeight, $fontSize = _a.$fontSize;
+    return $lineHeight || (($fontSize || 22) * 1.6);
+});
+var templateObject_1;
+
 var SectionHeader = function (_a) {
     var fade = _a.fade, field = _a.field, fieldIndex = _a.fieldIndex, removeAnimation = _a.removeAnimation, rowGap = _a.rowGap, setIsDeleting = _a.setIsDeleting, themeOverride = _a.themeOverride;
-    var header = field.header, nextGap = field.nextGap, separator = field.separator, _b = field.separatorMarginString, separatorMarginString = _b === void 0 ? "42px 0 26px" : _b, subHeader = field.subHeader, text = field.text, remove = field.remove, _c = field.width, width = _c === void 0 ? 700 : _c;
+    var header = field.header, nextGap = field.nextGap, separatorOverflow = field.separatorOverflow, separator = field.separator, _b = field.separatorPosition, separatorPosition = _b === void 0 ? "top" : _b, _c = field.separatorMarginString, separatorMarginString = _c === void 0 ? "42px 0 26px" : _c, subHeader = field.subHeader, text = field.text, remove = field.remove, _d = field.width, width = _d === void 0 ? 700 : _d;
     var theme = useTheme();
-    return (jsxs(FieldBox, __assign({ "$fade": fade, "$rowGap": nextGap !== null && nextGap !== void 0 ? nextGap : rowGap }, { children: [separator && (jsx(Separator, { "$marginString": separatorMarginString, "$themeOverride": themeOverride, "data-testid": "SectionHeader_separator" }, void 0)), jsxs(TitleGroup, __assign({ "$roomForRemove": !!remove, "$maxWidth": width }, { children: [header && jsx(HeadingH3, __assign({ "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionHeaderColor }, { children: header }), void 0), remove && (jsx(TextButton, { onClick: function (event) {
+    return (jsxs(FieldBox, __assign({ "$fade": fade, "$rowGap": nextGap !== null && nextGap !== void 0 ? nextGap : rowGap }, { children: [separator && (separatorPosition === "top" || separatorPosition === undefined) && (jsx(Separator, { "$marginString": separatorMarginString, "$themeOverride": themeOverride, "$seperatorOverflow": separatorOverflow, "data-testid": "SectionHeader_separator" }, void 0)), jsxs(TitleGroup, __assign({ "$roomForRemove": !!remove, "$maxWidth": width }, { children: [header && jsx(Header, __assign({ "$fontSize": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionHeaderFontSize, "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionHeaderColor, "$fontWeight": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionHeaderFontWeight, "$lineHeight": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionHeaderLineHeight }, { children: header }), void 0), remove && (jsx(TextButton, { onClick: function (event) {
                             removeAnimation(fieldIndex);
                             setTimeout(function () {
                                 remove(event);
                                 setIsDeleting(false);
                             }, 400);
-                        }, text: "Remove", colorFamily: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.removeButtonColorFamily) || theme.form.removeButtonColorFamily }, void 0))] }), void 0), text && (jsx(Text, __assign({ "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionTextColor, "$maxWidth": width }, { children: text }), void 0)), subHeader && (jsx(SubHeader, __assign({ "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionSubHeaderColor, "$maxWidth": width }, { children: subHeader }), void 0))] }), void 0));
+                        }, text: "Remove", colorFamily: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.removeButtonColorFamily) || theme.form.removeButtonColorFamily }, void 0))] }), void 0), text && (jsx(Text, __assign({ "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionTextColor, "$maxWidth": width }, { children: text }), void 0)), subHeader && (jsx(SubHeader, __assign({ "$textColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sectionSubHeaderColor, "$maxWidth": width }, { children: subHeader }), void 0)), separator && separatorPosition === "bottom" && (jsx(Separator, { "$marginString": separatorMarginString, "$themeOverride": themeOverride, "$seperatorOverflow": separatorOverflow, "data-testid": "SectionHeader_separator" }, void 0))] }), void 0));
 };
 
 var ToggleField = function (_a) {
@@ -1279,4 +1294,4 @@ FormikContainer.defaultProps = {
 };
 
 export { FormikContainer as F };
-//# sourceMappingURL=FormikContainer-a2570f47.js.map
+//# sourceMappingURL=FormikContainer-0040cee3.js.map

package/lib/{cjs/FormikContainer-2566c74f.js.map → esm/FormikContainer-0040cee3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormikContainer-2566c74f.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormikContainer-0040cee3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/{LogoSidebar-afdfe6f3.js → LogoSidebar-0903b0b7.js}

@@ -2,7 +2,7 @@ import { a as __makeTemplateObject, _ as __assign } from './_tslib-1a4c929e.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { styled, useTheme } from 'styled-components';
-import { A as Avatar } from './Avatar-5871e463.js';
+import { A as Avatar } from './Avatar-8566fcdb.js';
 import { I as InteriorSidebar } from './InteriorSidebar-89187e84.js';
 import { u as useMeasure } from './useMeasure-22bc3b9f.js';
 import { isBrowser } from './isEmptyObject.js';
@@ -54,4 +54,4 @@ var LogoSidebar = function (_a) {
 LogoSidebar.defaultProps = {};
 
 export { LogoSidebar as L };
-//# sourceMappingURL=LogoSidebar-afdfe6f3.js.map
+//# sourceMappingURL=LogoSidebar-0903b0b7.js.map

package/lib/esm/LogoSidebar-0903b0b7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoSidebar-0903b0b7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/LogoSidebar.js

@@ -1,9 +1,9 @@
-export { L as LogoSidebar } from './LogoSidebar-afdfe6f3.js';
+export { L as LogoSidebar } from './LogoSidebar-0903b0b7.js';
 import './_tslib-1a4c929e.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'styled-components';
-import './Avatar-5871e463.js';
+import './Avatar-8566fcdb.js';
 import './pressedEnter.js';
 import 'chroma-js';
 import './getInitialsOnly.js';

package/lib/esm/{RJSForm-9962f5d7.js → RJSForm-27c455a6.js}

@@ -20,7 +20,7 @@ import './Button.js';
 import { PrimaryButton } from './PrimaryButton.js';
 import './ButtonVariantEnum.js';
 import { noop } from './isEmptyObject.js';
-import { S as Separator, T as TitleGroup } from './FormStyles-6cb7c6ff.js';
+import { S as Separator, T as TitleGroup } from './FormStyles-dc1864ed.js';
 import { HeadingH3 } from './BodyLEmphasis.js';
 import { TextButton } from './TextButton.js';
 import { A as AddButton } from './AddButton-59c22abc.js';
@@ -365,4 +365,4 @@ RJSForm.defaultProps = {
 };
 
 export { RJSForm as R };
-//# sourceMappingURL=RJSForm-9962f5d7.js.map
+//# sourceMappingURL=RJSForm-27c455a6.js.map

package/lib/esm/{RJSForm-9962f5d7.js.map → RJSForm-27c455a6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RJSForm-9962f5d7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RJSForm-27c455a6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/RJSForm.js

@@ -1,4 +1,4 @@
-export { R as RJSForm } from './RJSForm-9962f5d7.js';
+export { R as RJSForm } from './RJSForm-27c455a6.js';
 export { R as RJSFormFields } from './types-20c5eba5.js';
 import './_tslib-1a4c929e.js';
 import 'react/jsx-runtime';
@@ -77,7 +77,7 @@ import './Close-8d7dda02.js';
 import './useMeasureWatchResize-eae7908b.js';
 import './DropdownInputStyles-fab99b6a.js';
 import './PrimaryButton.js';
-import './FormStyles-6cb7c6ff.js';
+import './FormStyles-dc1864ed.js';
 import 'yup';
 import './FormFieldTypeEnum.js';
 import './northAmericanNumberingPlanRegex.js';

package/lib/esm/UserCard.js

@@ -1,7 +1,7 @@
 import { a as __makeTemplateObject, _ as __assign } from './_tslib-1a4c929e.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useRef, useEffect } from 'react';
-import { A as Avatar } from './Avatar-5871e463.js';
+import { A as Avatar } from './Avatar-8566fcdb.js';
 import { getInitialsOnly } from './getInitialsOnly.js';
 import { colors } from './colors.js';
 import { pressedEnter } from './pressedEnter.js';

package/lib/esm/UserCardModal.js

@@ -7,7 +7,7 @@ import 'react';
 import 'react-dom';
 import './position-70aef3e6.js';
 import './isEmptyObject.js';
-import './Avatar-5871e463.js';
+import './Avatar-8566fcdb.js';
 import './pressedEnter.js';
 import 'chroma-js';
 import './getInitialsOnly.js';

package/lib/esm/{UserInformationCard-cce874e4.js → UserInformationCard-d25a7d83.js}

@@ -1,9 +1,9 @@
 import { a as __makeTemplateObject, _ as __assign } from './_tslib-1a4c929e.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { colors } from './colors.js';
 import { getTextWidth } from './isEmptyObject.js';
-import { A as Avatar } from './Avatar-5871e463.js';
+import { A as Avatar } from './Avatar-8566fcdb.js';
 import { u as useMeasure } from './useMeasure-22bc3b9f.js';
 import { T as TruncatePicker } from './TruncatePicker-c7931408.js';
 import { BodyMPrimary, BodyLEmphasis } from './BodyLEmphasis.js';
@@ -103,7 +103,7 @@ var TextWithLoader = styled(BodyMPrimary)(templateObject_9 || (templateObject_9
     var $isLoading = _a.$isLoading;
     return $isLoading && loadingPseudo({ loadingColor: colors.COOL_GREY_15, bgColor: colors.COOL_GREY_4, borderRadius: 6, topOffset: 2 });
 });
-var TitleWithLoader = styled(BodyLEmphasis)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  overflow-wrap: anywhere;\n  line-height: ", "px;\n  display: ", ";\n  max-width: ", ";\n  ", ";\n"], ["\n  color: ", ";\n  overflow-wrap: anywhere;\n  line-height: ", "px;\n  display: ", ";\n  max-width: ", ";\n  ", ";\n"])), function (_a) {
+var TitleWithLoader = styled(BodyLEmphasis)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  overflow-wrap: anywhere;\n  line-height: ", "px;\n  display: ", ";\n  max-width: ", ";\n  ", ";\n  text-align: ", ";\n"], ["\n  color: ", ";\n  overflow-wrap: anywhere;\n  line-height: ", "px;\n  display: ", ";\n  max-width: ", ";\n  ", ";\n  text-align: ", ";\n"])), function (_a) {
     var $textColor = _a.$textColor;
     return $textColor !== null && $textColor !== void 0 ? $textColor : colors.BLACK;
 }, function (_a) {
@@ -118,6 +118,9 @@ var TitleWithLoader = styled(BodyLEmphasis)(templateObject_10 || (templateObject
 }, function (_a) {
     var isLoading = _a.$isLoading;
     return isLoading && loadingPseudo({ loadingColor: colors.COOL_GREY_15, bgColor: colors.COOL_GREY_4, borderRadius: 6, topOffset: 2 });
+}, function (_a) {
+    var $centerName = _a.$centerName, $horizontal = _a.$horizontal;
+    return ($centerName && !$horizontal ? "center" : "left");
 });
 var ChildWrapper = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding: 0 42px 52px 42px;\n"], ["\n  padding: 0 42px 52px 42px;\n"])));
 var Divider = styled.hr(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  height: 1px;\n  margin: 0 -9px 8px;\n"], ["\n  background-color: ", ";\n  border: none;\n  height: 1px;\n  margin: 0 -9px 8px;\n"])), function (_a) {
@@ -129,7 +132,7 @@ var ClearableTagWrapper = styled.div(templateObject_13 || (templateObject_13 = _
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
 
 var UserInformationCard = function (_a) {
-    var avatarImageUrl = _a.avatarImageUrl, horizontal = _a.horizontal, address1 = _a.address1, address2 = _a.address2, boxShadowString = _a.boxShadowString, children = _a.children, city = _a.city, dob = _a.dob, firstName = _a.firstName, isLoading = _a.isLoading, lastName = _a.lastName, maxHeightInternalCalcString = _a.maxHeightInternalCalcString, middleName = _a.middleName, orderType = _a.orderType, squareAvatar = _a.squareAvatar, state = _a.state, ssn = _a.ssn, themeOverride = _a.themeOverride, width = _a.width, zip = _a.zip, clearableMessage = _a.clearableMessage, ClearableMessageIcon = _a.ClearableMessageIcon;
+    var address1 = _a.address1, address2 = _a.address2, avatarBadgeUrl = _a.avatarBadgeUrl, avatarImageUrl = _a.avatarImageUrl, boxShadowString = _a.boxShadowString, centerName = _a.centerName, children = _a.children, city = _a.city, clearableMessage = _a.clearableMessage, ClearableMessageIcon = _a.ClearableMessageIcon, dob = _a.dob, firstName = _a.firstName, horizontal = _a.horizontal, isLoading = _a.isLoading, lastName = _a.lastName, maxHeightInternalCalcString = _a.maxHeightInternalCalcString, middleName = _a.middleName, orderType = _a.orderType, removeConsumerLabel = _a.removeConsumerLabel, squareAvatar = _a.squareAvatar, state = _a.state, ssn = _a.ssn, themeOverride = _a.themeOverride, width = _a.width, zip = _a.zip;
     var _b = useMeasure(), dataWrapperRef = _b[0], dataWrapperMeasure = _b[1];
     var _c = useMeasure(), avatarWrapperRef = _c[0], avatarWrapperMeasure = _c[1];
     var _d = useState(186), orderTagMaxWidth = _d[0], setOrderTagMaxWidth = _d[1];
@@ -210,7 +213,7 @@ var UserInformationCard = function (_a) {
     useEffect(function () {
         setOrderTagMaxWidth(avatarWrapperMeasure.width);
     }, [avatarWrapperMeasure.width]);
-    return (jsxs(CardBox, __assign({ "$boxShadowString": boxShadowString, "$horizontal": horizontal, "$maxHeightInternalCalcString": maxHeightInternalCalcString, "$width": width }, { children: [jsxs(AvatarWrapper, __assign({ ref: avatarWrapperRef, "$horizontal": horizontal, "$themeOverride": themeOverride }, { children: [jsx(OrderTag, __assign({ "$width": orderTagMaxWidth }, { children: jsx(TruncatePicker, { children: orderType }, void 0) }), void 0), jsx(Avatar, { backgroundGradient: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.avatarBackgroundColor) || gradients.avatar, imageUrl: avatarImageUrl, square: squareAvatar, themeOverride: avatarOverride, placeholderInitials: fullName }, void 0)] }), void 0), jsx(HorizontalMeasure, __assign({}, (horizontal ? { ref: dataWrapperRef } : {}), { children: jsxs(ScrollBox, __assign({ "$maxHeightInternalCalcString": maxHeightInternalCalcString, "$horizontal": horizontal }, { children: [jsxs(DataWrapper, __assign({ "$hasChildren": hasChildren, "$horizontal": horizontal, "$breakSSN": breakSSN, "$breakLayout": breakLayout }, { children: [clearableMessage && showClearableMessage && (jsx(ClearableTagWrapper, { children: jsx(ClearableTag, { noXShadow: true, colorFamily: ButtonColorFamilyEnum.Purple, tag: {
+    return (jsxs(CardBox, __assign({ "$boxShadowString": boxShadowString, "$horizontal": horizontal, "$maxHeightInternalCalcString": maxHeightInternalCalcString, "$width": width }, { children: [jsxs(AvatarWrapper, __assign({ ref: avatarWrapperRef, "$horizontal": horizontal, "$themeOverride": themeOverride }, { children: [orderType && (jsx(OrderTag, __assign({ "$width": orderTagMaxWidth }, { children: jsx(TruncatePicker, { children: orderType }, void 0) }), void 0)), jsx(Avatar, { backgroundGradient: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.avatarBackgroundColor) || gradients.avatar, badgeUrl: avatarBadgeUrl, imageUrl: avatarImageUrl, square: squareAvatar, themeOverride: avatarOverride, placeholderInitials: fullName }, void 0)] }), void 0), jsx(HorizontalMeasure, __assign({}, (horizontal ? { ref: dataWrapperRef } : {}), { children: jsxs(ScrollBox, __assign({ "$maxHeightInternalCalcString": maxHeightInternalCalcString, "$horizontal": horizontal }, { children: [jsxs(DataWrapper, __assign({ "$hasChildren": hasChildren, "$horizontal": horizontal, "$breakSSN": breakSSN, "$breakLayout": breakLayout }, { children: [clearableMessage && showClearableMessage && (jsx(ClearableTagWrapper, { children: jsx(ClearableTag, { noXShadow: true, colorFamily: ButtonColorFamilyEnum.Purple, tag: {
                                             Icon: ClearableMessageIcon,
                                             id: "clearable-tag",
                                             label: clearableMessage || "",
@@ -218,8 +221,8 @@ var UserInformationCard = function (_a) {
                                             fontSize: 13,
                                         }, xClick: function () {
                                             setShowClearableMessage(false);
-                                        } }, void 0) }, void 0)), jsxs(Item, __assign({ "$gridArea": "name" }, { children: [jsx(Label, { children: "Consumer" }, void 0), jsx(TitleWithLoader, __assign({ "$isLoading": isLoading, "$lineHeight": 24 }, { children: displayName }), void 0)] }), void 0), jsxs(Item, __assign({ "$gridArea": "address" }, { children: [jsx(Label, { children: "Address" }, void 0), addressLineOne && (jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.COOL_GREY_100 }, { children: addressLineOne }), void 0)), addressLineTwo && (jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.COOL_GREY_100 }, { children: addressLineTwo }), void 0)), !(addressLineOne || addressLineTwo) && (jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.COOL_GREY_100 }, { children: "N/A" }), void 0))] }), void 0), jsxs(Item, __assign({ "$gridArea": "dob" }, { children: [jsx(Label, { children: "DOB" }, void 0), jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$loadingLength": 140, "$textColor": colors.COOL_GREY_100 }, { children: dob || "N/A" }), void 0)] }), void 0), jsxs(Item, __assign({ "$gridArea": "ssn" }, { children: [jsx(Label, { children: "SSN" }, void 0), jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$loadingLength": 120, "$textColor": colors.COOL_GREY_100 }, { children: applySsnMask({ numberValue: ssn || "" }) || "N/A" }), void 0), !(addressLineOne || addressLineTwo) && (jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.COOL_GREY_100 }, { children: "N/A" }), void 0))] }), void 0)] }), void 0), hasChildren && !horizontal && (jsxs(ChildWrapper, { children: [jsx(Divider, { "$themeOverride": themeOverride }, void 0), children] }, void 0))] }), void 0) }), void 0)] }), void 0));
+                                        } }, void 0) }, void 0)), jsxs(Item, __assign({ "$gridArea": "name" }, { children: [!removeConsumerLabel && jsx(Label, { children: "Consumer" }, void 0), jsx(TitleWithLoader, __assign({ "$centerName": centerName, "$horizontal": horizontal, "$isLoading": isLoading, "$lineHeight": 24 }, { children: displayName }), void 0)] }), void 0), jsxs(Item, __assign({ "$gridArea": "address" }, { children: [jsx(Label, { children: "Address" }, void 0), addressLineOne || addressLineTwo ? (jsxs(Fragment, { children: [addressLineOne && (jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.COOL_GREY_100 }, { children: addressLineOne }), void 0)), addressLineTwo && (jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.COOL_GREY_100 }, { children: addressLineTwo }), void 0))] }, void 0)) : (jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$long": true, "$textColor": colors.COOL_GREY_100 }, { children: "N/A" }), void 0))] }), void 0), dob != null && (jsxs(Item, __assign({ "$gridArea": "dob" }, { children: [jsx(Label, { children: "DOB" }, void 0), jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$loadingLength": 140, "$textColor": colors.COOL_GREY_100 }, { children: dob === "" ? "N/A" : dob }), void 0)] }), void 0)), ssn != null && (jsxs(Item, __assign({ "$gridArea": "ssn" }, { children: [jsx(Label, { children: "SSN" }, void 0), jsx(TextWithLoader, __assign({ "$isLoading": isLoading, "$loadingLength": 120, "$textColor": colors.COOL_GREY_100 }, { children: ssn === "" ? "N/A" : applySsnMask({ numberValue: ssn }) }), void 0)] }), void 0))] }), void 0), hasChildren && !horizontal && (jsxs(ChildWrapper, { children: [jsx(Divider, { "$themeOverride": themeOverride }, void 0), children] }, void 0))] }), void 0) }), void 0)] }), void 0));
 };
 
 export { UserInformationCard as U };
-//# sourceMappingURL=UserInformationCard-cce874e4.js.map
+//# sourceMappingURL=UserInformationCard-d25a7d83.js.map

package/lib/{cjs/UserInformationCard-d3ac00b2.js.map → esm/UserInformationCard-d25a7d83.js.map}

@@ -1 +1 @@
-{"version":3,"file":"UserInformationCard-d3ac00b2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"UserInformationCard-d25a7d83.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/UserInformationCard.js

@@ -1,10 +1,10 @@
-export { U as UserInformationCard } from './UserInformationCard-cce874e4.js';
+export { U as UserInformationCard } from './UserInformationCard-d25a7d83.js';
 import './_tslib-1a4c929e.js';
 import 'react/jsx-runtime';
 import 'react';
 import './colors.js';
 import './isEmptyObject.js';
-import './Avatar-5871e463.js';
+import './Avatar-8566fcdb.js';
 import './pressedEnter.js';
 import 'chroma-js';
 import 'styled-components';

package/lib/esm/index.js

@@ -4,11 +4,11 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import { D as Drawer } from './Drawer-6fd06d3a.js';
 export { D as Drawer } from './Drawer-6fd06d3a.js';
 import { styled, useTheme } from 'styled-components';
-import { S as Separator } from './FormStyles-6cb7c6ff.js';
-export { F as FormWrapper } from './FormStyles-6cb7c6ff.js';
+import { S as Separator } from './FormStyles-dc1864ed.js';
+export { F as FormWrapper } from './FormStyles-dc1864ed.js';
 export { A as AlertCount } from './AlertCount-5c367a1f.js';
 export { A as AddressInput } from './AddressInput-53f61e14.js';
-export { A as Avatar } from './Avatar-5871e463.js';
+export { A as Avatar } from './Avatar-8566fcdb.js';
 export { getInitialsOnly } from './getInitialsOnly.js';
 export { BoxedButton } from './BoxedButton.js';
 export { BoxedOutlineButton } from './BoxedOutlineButton.js';
@@ -47,7 +47,7 @@ import { A as ASTERISK_OFFSET_SPACE } from './helpers-e2f33583.js';
 export { D as DrawerDivider } from './DrawerDivider-5b10a31b.js';
 export { E as EmailInput } from './EmailInput-7c2c993b.js';
 export { Footer } from './Footer.js';
-export { F as Form } from './FormikContainer-a2570f47.js';
+export { F as Form } from './FormikContainer-0040cee3.js';
 export { FormFieldTypeEnum, RemovableFieldTypeEnum } from './FormFieldTypeEnum.js';
 export { F as FiltersBar } from './FiltersBar-a6dbd832.js';
 export { H as HorizontalTabMenu } from './HorizontalTabMenu-417ead69.js';
@@ -71,7 +71,7 @@ import { focusAfter } from './focusAfter.js';
 export { focusAfter } from './focusAfter.js';
 export { Scroller, ShortScroller } from './Scroller.js';
 export { L as LoadingEllipsis } from './LoadingEllipsis-505a407e.js';
-export { L as LogoSidebar } from './LogoSidebar-afdfe6f3.js';
+export { L as LogoSidebar } from './LogoSidebar-0903b0b7.js';
 export { M as Modal } from './Modal-84eaf0a9.js';
 export { PasswordInput } from './PasswordInput.js';
 export { InlinePasswordInput } from './InlinePasswordInput.js';
@@ -80,7 +80,7 @@ export { P as PieChart } from './PieChart-cbdf1de9.js';
 export { R as Radio } from './Radio-a25910f6.js';
 export { R as RadioGroup } from './RadioGroup-5deefd5f.js';
 export { R as RadioItem } from './RadioItem-5cbc814b.js';
-export { R as RJSForm } from './RJSForm-9962f5d7.js';
+export { R as RJSForm } from './RJSForm-27c455a6.js';
 import './types-20c5eba5.js';
 export { R as RJSFormRenderer } from './RJSFormRenderer-0cda19b4.js';
 import 'react-dom';
@@ -120,7 +120,7 @@ export { U as UploadDropzone } from './UploadDropzone-530529b4.js';
 export { DropzoneColorFamilyEnum } from './DropzoneColorFamilyEnum.js';
 export { UserCard } from './UserCard.js';
 export { UserCardModal } from './UserCardModal.js';
-export { U as UserInformationCard } from './UserInformationCard-cce874e4.js';
+export { U as UserInformationCard } from './UserInformationCard-d25a7d83.js';
 export { ZipCodeInput } from './ZipCodeInput.js';
 export { InlineZipCodeInput } from './InlineZipCodeInput.js';
 export { applyZipCodeMask } from './applyZipCodeMask.js';

package/lib/types/src/components/Avatar/AvatarStyles.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-import { BaseProps, InitialsProps } from "./types";
+import { BadgeProps, BaseProps, InitialsProps } from "./types";
 export declare const Base: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BaseProps>>;
 export declare const Initials: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, InitialsProps>>;
+export declare const Badge: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BadgeProps>>;

package/lib/types/src/components/Avatar/types.d.ts

@@ -1,6 +1,8 @@
 export interface AvatarType {
     /** A string gradient style for the Avatar background. Nothing will be applied if this is not passed. */
     backgroundGradient?: string;
+    /** Passing badgeUrl will render a small badge under the Avatar. */
+    badgeUrl?: string;
     /** URL to the image to be displayed. It's highly recommended the images are square and the size matches the component size. */
     imageUrl?: string;
     /** Will format the image to work with a logo. Mainly, this means no cropping. */
@@ -30,3 +32,7 @@ export interface InitialsProps {
     $placeholderInitialsColorOverride?: string;
     $themeOverride?: ThemeOverride;
 }
+export interface BadgeProps {
+    $badgeUrl: string;
+    $themeOverride?: ThemeOverride;
+}

package/lib/types/src/components/Form/fields/SectionHeader/SectionHeaderStyles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type SectionHeaderProps = {
+    $textColor?: string;
+    $lineHeight?: number;
+    $fontSize?: number;
+    $fontWeight?: number;
+};
+export declare const Header: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, SectionHeaderProps>>;
+export {};

package/lib/types/src/components/Form/types.d.ts

@@ -93,6 +93,9 @@ export interface ThemeOverride {
     clearButtonColorFamily?: ButtonColorFamilyEnum;
     removeButtonColorFamily?: ButtonColorFamilyEnum;
     sectionHeaderColor?: string;
+    sectionHeaderFontSize?: number;
+    sectionHeaderFontWeight?: number;
+    sectionHeaderLineHeight?: number;
     sectionSeparatorColor?: string;
     sectionSubHeaderColor?: string;
     sectionTextColor?: string;
@@ -940,15 +943,18 @@ export interface RemovableFieldProps {
 }
 export interface SectionHeaderType {
     header?: string;
-    remove?: (event: KeyboardEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement>) => void;
     nextGap?: number;
+    remove?: (event: KeyboardEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement>) => void;
     separator?: boolean;
     separatorMarginString?: string;
+    separatorOverflow?: number;
+    separatorPosition?: "top" | "bottom";
     showIf?: ({ values }: {
         values: any;
     }) => boolean;
     subHeader?: string;
     text?: string;
+    themeOverride?: ThemeOverride;
     type: FormFieldTypeEnum;
     width?: number;
 }
@@ -1179,6 +1185,7 @@ export interface FieldBoxProps {
     $leftLabelsRightGutter?: number;
     $leftLabelWidth?: number;
     $rowGap?: number;
+    $marginString?: string;
 }
 export interface RemovableFieldBoxProps {
     $fade?: boolean;
@@ -1213,6 +1220,7 @@ export interface ButtonGroupProps {
 }
 export interface SeparatorProps {
     $marginString: string;
+    $seperatorOverflow?: number;
     $themeOverride?: ThemeOverride;
 }
 export interface LoadingBaseProps {

package/lib/types/src/components/UserInformationCard/types.d.ts

@@ -1,10 +1,14 @@
 import { ReactNode } from "react";
 import { IconType } from "../Icons";
 export interface UserInformationCardType {
+    /** Possible badge URL to be sent to the Avatar component */
+    avatarBadgeUrl?: string;
     /** Possible URL to be sent to the Avatar component */
     avatarImageUrl?: string;
     /** Overrides the default box shadow */
     boxShadowString?: string;
+    /** Changes the style of the name to act like the title of UserInformationCard, displayed without a label at the center. */
+    centerName?: boolean;
     /** `UserInformationCard` supports children */
     children?: ReactNode;
     /** Sets the component to horizontal mode */
@@ -33,6 +37,8 @@ export interface UserInformationCardType {
     dob?: string;
     /** User's SSN */
     ssn?: string;
+    /** It's possible to remove the "Consumer" label  */
+    removeConsumerLabel?: boolean;
     /** Type of order. This is usually Standard, vID or Rapid Request. */
     orderType?: string;
     /** Card width override. Grows to fill the parent otherwise. */
@@ -73,6 +79,8 @@ export interface CardTextProps {
     lineHeight?: number;
     $long?: boolean;
     $loadingLength?: number;
+    $centerName?: boolean;
+    $horizontal?: boolean;
 }
 export interface DataWrapperProps {
     $breakLayout?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "13.0.3",
+  "version": "13.1.0",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "lib/cjs/index.cjs",

package/lib/cjs/Avatar-01129ec7.js

@@ -1,47 +0,0 @@
-'use strict';
-
-var _tslib = require('./_tslib-955e611e.js');
-var jsxRuntime = require('react/jsx-runtime');
-var pressedEnter = require('./pressedEnter.cjs');
-var styled = require('styled-components');
-var getInitialsOnly = require('./getInitialsOnly.cjs');
-
-var Base = styled.styled.div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  background: url(", ") no-repeat center,\n    ", ";\n  background-size: ", ";\n"], ["\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n  background: url(", ") no-repeat center,\n    ", ";\n  background-size: ", ";\n"])), function (_a) {
-    var $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) || theme.avatar.size;
-}, function (_a) {
-    var $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) || theme.avatar.size;
-}, function (_a) {
-    var $square = _a.$square, $themeOverride = _a.$themeOverride;
-    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderRadius) ? "".concat($themeOverride.borderRadius, "px") : $square ? "0px" : "50%";
-}, function (_a) {
-    var $imageUrl = _a.$imageUrl;
-    return $imageUrl;
-}, function (_a) {
-    var $backgroundGradient = _a.$backgroundGradient, $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return $backgroundGradient || ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.backgroundColor) || theme.avatar.backgroundColor;
-}, function (_a) {
-    var $logo = _a.$logo;
-    return ($logo ? "contain" : "cover");
-});
-var Initials = styled.styled.h2(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n  position: relative;\n  top: 2px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n  position: relative;\n  top: 2px;\n"])), function (_a) {
-    var $placeholderInitialsColorOverride = _a.$placeholderInitialsColorOverride;
-    return $placeholderInitialsColorOverride;
-}, function (_a) {
-    var _b;
-    var $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return ((_b = $themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.size) !== null && _b !== void 0 ? _b : theme.avatar.size) / 3.13;
-});
-var templateObject_1, templateObject_2;
-
-var Avatar = function (_a) {
-    var backgroundGradient = _a.backgroundGradient, imageUrl = _a.imageUrl, logo = _a.logo, placeholderInitials = _a.placeholderInitials, placeholderInitialsColorOverride = _a.placeholderInitialsColorOverride, square = _a.square, themeOverride = _a.themeOverride;
-    var theme = styled.useTheme();
-    var bgColor = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.backgroundColor) || theme.avatar.backgroundColor;
-    return (jsxRuntime.jsx(Base, _tslib.__assign({ "data-testid": "bg-base", "$backgroundGradient": backgroundGradient, "$imageUrl": imageUrl, "$logo": logo, "$themeOverride": themeOverride, "$square": square }, { children: !imageUrl && (jsxRuntime.jsx(Initials, _tslib.__assign({ "$placeholderInitialsColorOverride": placeholderInitialsColorOverride || pressedEnter.higherContrast({ color: bgColor, preferHigh: true }), "$themeOverride": themeOverride }, { children: getInitialsOnly.getInitialsOnly(placeholderInitials) }), void 0)) }), void 0));
-};
-Avatar.defaultProps = {};
-
-exports.Avatar = Avatar;
-//# sourceMappingURL=Avatar-01129ec7.js.map

package/lib/cjs/Avatar-01129ec7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar-01129ec7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/LogoSidebar-0bf2f163.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LogoSidebar-0bf2f163.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/Avatar-5871e463.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar-5871e463.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/LogoSidebar-afdfe6f3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LogoSidebar-afdfe6f3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}