@thecb/components 11.1.13-beta.0 → 11.1.13

package/dist/index.cjs.js

@@ -26858,7 +26858,7 @@ var fallbackValues$n = {
 };
 
 var _excluded$y = ["showErrors", "themeValues"],
-  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
+  _excluded2 = ["type", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -26921,6 +26921,8 @@ var FormattedInputField = styled__default(function (_ref8) {
 var FormInput = function FormInput(_ref15) {
   var _ref15$type = _ref15.type,
     type = _ref15$type === void 0 ? "text" : _ref15$type,
+    _ref15$labelDisplayOv = _ref15.labelDisplayOverride,
+    labelDisplayOverride = _ref15$labelDisplayOv === void 0 ? null : _ref15$labelDisplayOv,
     _ref15$labelTextWhenN = _ref15.labelTextWhenNoError,
     labelTextWhenNoError = _ref15$labelTextWhenN === void 0 ? "" : _ref15$labelTextWhenN,
     errorMessages = _ref15.errorMessages,
@@ -26984,7 +26986,7 @@ var FormInput = function FormInput(_ref15) {
   }, helperModal ? /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
+  }, labelDisplayOverride ? labelDisplayOverride : /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
     variant: labelTextVariant,
@@ -26997,7 +26999,7 @@ var FormInput = function FormInput(_ref15) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
+  }, labelDisplayOverride ? labelDisplayOverride : /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
     variant: labelTextVariant,
@@ -47474,15 +47476,41 @@ var Obligation = function Obligation(_ref) {
 };
 var Obligation$1 = themeComponent(Obligation, "Obligation", fallbackValues$N);
 
+var weightTitle$1 = {
+  "default": "600",
+  small: "400"
+};
+var detailVariant$1 = {
+  "default": "large",
+  small: "small"
+};
+var fallbackValues$O = {
+  weightTitle: weightTitle$1,
+  detailVariant: detailVariant$1
+};
+
 var PartialAmountField = function PartialAmountField(_ref) {
   var lineItem = _ref.lineItem,
     field = _ref.field,
     showErrors = _ref.showErrors,
     errorMessages = _ref.errorMessages,
     moneyFormat = _ref.moneyFormat,
-    fieldActions = _ref.fieldActions;
+    fieldActions = _ref.fieldActions,
+    themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: lineItem.description,
+    labelDisplayOverride: /*#__PURE__*/React__default.createElement(Stack, {
+      childGap: "0px"
+    }, /*#__PURE__*/React__default.createElement(Detail$1, {
+      as: "h3",
+      variant: themeValues.detailVariant,
+      weight: themeValues.weightTitle
+    }, /*#__PURE__*/React__default.createElement("span", null, lineItem.description)), /*#__PURE__*/React__default.createElement(Detail$1, {
+      id: lineItem.subDescription,
+      as: "p",
+      variant: themeValues.detailVariant,
+      weight: "400"
+    }, lineItem.subDescription)),
     key: lineItem.id,
     field: field,
     fieldActions: fieldActions,
@@ -47505,7 +47533,7 @@ var PartialAmountField = function PartialAmountField(_ref) {
 function arePropsEqual(prevProps, nextProps) {
   return equals(prevProps.errorMessages, nextProps.errorMessages) && equals(prevProps.field, nextProps.field) && equals(prevProps.showErrors, nextProps.showErrors) && equals(prevProps.moneyFormat, nextProps.moneyFormat) && equals(prevProps.lineItem, nextProps.lineItem);
 }
-var PartialAmountField$1 = /*#__PURE__*/React__default.memo(PartialAmountField, arePropsEqual);
+var PartialAmountField$1 = /*#__PURE__*/React__default.memo(themeComponent(PartialAmountField, "PartialAmountField", fallbackValues$O, "default"), arePropsEqual);
 
 var PartialAmountForm = function PartialAmountForm(_ref) {
   var _ref$variant = _ref.variant,
@@ -47610,7 +47638,7 @@ var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
-var fallbackValues$O = {
+var fallbackValues$P = {
   activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
@@ -47804,7 +47832,7 @@ var Pagination = function Pagination(_ref3) {
     buttonWidth: buttonWidth
   }));
 };
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$O);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$P);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -47905,7 +47933,7 @@ var labeledAmountTotal = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$P = {
+var fallbackValues$Q = {
   backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -48274,7 +48302,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isError: isError
   });
 };
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$P, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$Q, "default");
 
 var linkColor$4 = {
   "default": "#3176AA"
@@ -48294,7 +48322,7 @@ var modalLinkHoverFocus = {
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
-var fallbackValues$Q = {
+var fallbackValues$R = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -48358,7 +48386,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     }, link)
   }));
 };
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$Q, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$R, "default");
 
 var backgroundColor$d = {
   "default": "#ffffff",
@@ -48393,7 +48421,7 @@ var modalLinkTextDecoration = {
   "default": LINK_TEXT_DECORATION,
   footer: "none"
 };
-var fallbackValues$R = {
+var fallbackValues$S = {
   backgroundColor: backgroundColor$d,
   linkColor: linkColor$5,
   border: border$3,
@@ -48465,7 +48493,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     className: "modal-trigger"
   }, link));
 };
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$R, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$S, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -49237,7 +49265,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GHOST_GREY);
 var focusStyles = "outline: none;";
-var fallbackValues$S = {
+var fallbackValues$T = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49540,7 +49568,7 @@ var RadioSection = function RadioSection(_ref) {
     });
   })));
 };
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$S);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$T);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -49660,13 +49688,13 @@ RegistrationForm.mapDispatchToProps = mapDispatchToProps$9;
 
 var GRECIAN_GREY$1 = GRECIAN_GREY;
 var bannerBackgroundColor = GRECIAN_GREY$1;
-var fallbackValues$T = {
+var fallbackValues$U = {
   bannerBackgroundColor: bannerBackgroundColor
 };
 
 var ResetConfirmationForm = function ResetConfirmationForm() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$T, "ResetConfirmationForm");
+  var themeValues = createThemeValues(themeContext, fallbackValues$U, "ResetConfirmationForm");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49781,13 +49809,13 @@ ResetPasswordForm.mapDispatchToProps = mapDispatchToProps$a;
 
 var GRECIAN_GREY$2 = GRECIAN_GREY;
 var bannerBackgroundColor$1 = GRECIAN_GREY$2;
-var fallbackValues$U = {
+var fallbackValues$V = {
   bannerBackgroundColor: bannerBackgroundColor$1
 };
 
 var ResetPasswordSuccess = function ResetPasswordSuccess() {
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$U, "ResetPasswordSuccess");
+  var themeValues = createThemeValues(themeContext, fallbackValues$V, "ResetPasswordSuccess");
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
@@ -49836,7 +49864,7 @@ var ResetPasswordSuccess$1 = withWindowSize(ResetPasswordSuccess);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$V = {
+var fallbackValues$W = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49904,12 +49932,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$V);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$W);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$W = {
+var fallbackValues$X = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49964,7 +49992,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$W);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$X);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -50085,7 +50113,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$X = {
+var fallbackValues$Y = {
   fontWeight: fontWeight$8,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -50130,7 +50158,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$X));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$Y));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -50190,7 +50218,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$Y = {
+var fallbackValues$Z = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -50257,13 +50285,13 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$Y);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$Z);
 
 var hoverColor$5 = "#116285";
 var activeColor$a = "#0E506D";
 var menuTriggerColor = "#15749D";
 var backgroundColor$e = "white";
-var fallbackValues$Z = {
+var fallbackValues$_ = {
   hoverColor: hoverColor$5,
   activeColor: activeColor$a,
   menuTriggerColor: menuTriggerColor,
@@ -50399,13 +50427,13 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Z);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$_);
 
 var primaryColor$1 = WHITE;
 var primaryHoverColor = INFO_BLUE;
 var secondaryColor = MATISSE_BLUE;
 var secondaryHoverColor = "#115D7E";
-var fallbackValues$_ = {
+var fallbackValues$$ = {
   primaryColor: primaryColor$1,
   primaryHoverColor: primaryHoverColor,
   secondaryColor: secondaryColor,
@@ -51107,10 +51135,10 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
     ariaLabel: "Apply all filters"
   }))));
 };
-var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$_);
+var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$$);
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$$ = {
+var fallbackValues$10 = {
   pageBackground: pageBackground
 };
 
@@ -51158,7 +51186,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$$));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$10));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -51201,7 +51229,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$$));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$10));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -51247,7 +51275,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$$));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$10));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -51300,7 +51328,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$$));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$10));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -51370,7 +51398,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$$));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$10));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};