@thecb/components 3.1.4-beta.0 → 3.2.0

package/.storybook/page.js

@@ -30,7 +30,7 @@ const themeDecorator = storyFn => (
   <ThemeProvider theme={select(themesLabel, themes, defaultValue, groupId)}>{storyFn()}</ThemeProvider>
 )
 
-export default ({ title, Component, reducer = () => { }}) => {
+export default ({ title, Component, height, reducer = () => { }, containerMax = "40rem", containerMin = "20rem" }) => {
   const history = createBrowserHistory();
   const store =createStore(
     reducer,
@@ -45,11 +45,12 @@ export default ({ title, Component, reducer = () => { }}) => {
       storyFn => (
         <Router history={history} >
           <Provider store={store}>
-              <div style={{ height: "600px", display: "flex", justifyContent: "center", flexDirection: "column" }}>
+              <div style={{ height: "max-content", display: "flex", justifyContent: "center", flexDirection: "column" }}>
                 <ResizingContainer
+                  height={height}
                   animate={radios(animateLabel, animateOptions, animateDefaultValue, animateGroupID)}
-                  containerMax={text("Container Max", "40rem", animateGroupID)}
-                  containerMin={text("Container Min", "20rem", animateGroupID)}>
+                  containerMax={text("Container Max", containerMax, animateGroupID)}
+                  containerMin={text("Container Min", containerMin, animateGroupID)}>
                   {storyFn()}
                 </ResizingContainer >
               </div>

package/README.md

@@ -13,10 +13,11 @@ This library contains Citybase React components for use across all current and f
   - [Version bumping](#version-bumping)
   - [Publishing new versions to NPM](#publishing-new-versions-to-npm)
 - [Consuming in your application](#consuming-in-your-application)
+
   - [Adding to existing application](#adding-to-existing-application)
   - [Local import and development](#local-import-and-development)
   - [Importing and using components](#importing-and-using-components)
-  
+
 <!-- /TOC -->
 
 ## Development setup
@@ -58,7 +59,7 @@ Please include new component stories as this library will also be a sandbox.
 
 - New components may be added to this library via pull request. Only components that are currently used in, or expected to be used in, more than one CB frontend should be present in this library. Very niche application specific components should be kept in the `components/atoms` and `components/molecules` directory of their parent application.
 
-- Almost all components in this library, and almost all newly added components, should be as "dumb" as possible. Ideally avoid introducing components that have tight integrations with application state. Forms and form components that make use of redux-freeform are an exception to this rule. 
+- Almost all components in this library, and almost all newly added components, should be as "dumb" as possible. Ideally avoid introducing components that have tight integrations with application state. Forms and form components that make use of redux-freeform are an exception to this rule.
 
 - If a non-form component contains integration with application state, or business logic specific to a particular application, breaking the component up into styled/layout atoms and an application specific molecule that consumes them is the best practice. An example of this can be observed with the `Header` and `Footer` molecules in Navigate Frontend. Both of these molcules make use of component library atoms such as `NavHeader` to layout out content. NFE then has `Header` and `Footer` molecules which live in the NFE components directory and use NFE specific business logic to provide content to these atoms, resulting in a complete `Header` and `Footer`.
 
@@ -78,7 +79,7 @@ Please include new component stories as this library will also be a sandbox.
 
 ### Publishing new versions to NPM
 
-- While GitHub will handle bumping the version of the library with every PR merge to master, publishing an update version of the library to NPM requires creating a release using the `release` script. This script triggers an action in the repo to create a release tagged with a publication date. After a new release is created, an action checks to see whether the library version differs from that on NPM. If the library version has changed, the action attempts to publish the new version to NPM.
+- While GitHub will handle bumping the version of the library with every PR merge to master, publishing an update version of the library to NPM requires creating a release using the `release` script. This script triggers an action in the repo to create a release tagged with a publication date. After a new release is created, manually run `yarn build && yarn publish` in your repo directory to publish a new version to NPM. When yarn asks you what version to publish, enter the same number that it gives you, as this number will already reflect the increase in version from the auto version bump action.
 
 - Once a new version of the library is published to NPM, you may either manually update your application's `package.json` to request that new version, or wait until the following morning when dependabot will pick up the change and create an update PR for you.
 
@@ -86,12 +87,12 @@ Please include new component stories as this library will also be a sandbox.
 
 ### Adding to existing application
 
-- Run `yarn add @thecb/components`. 
+- Run `yarn add @thecb/components`.
 - To verify it installed successfully, make sure it is in the applicaton's `package.json` file.
 
 ### Local import and development
 
-If you are developing locally, you can add or make changes to components in the `@thecb/components` package and see those changes in the application running locally by linking the `@thecb/components` package to your application. 
+If you are developing locally, you can add or make changes to components in the `@thecb/components` package and see those changes in the application running locally by linking the `@thecb/components` package to your application.
 Open the `@thecb/components`, and in the command line
 
 - Run `yarn build`
@@ -104,7 +105,7 @@ You should see a success message, and directions on how to link this package int
 Now the package is linked locally and you can make changes to the `@thecb/components` and you’ll see the changes in the application running `@thecb/components`. To unlink the package, in the application running `@thecb/components` and in the command line
 
 - Run `yarn unlink @thecb/components`
-- Run `yarn install` `--``force`
+- Run `yarn install` ` --``force `
 
 Next go to the `@thecb/components` and in the command line
 
@@ -116,9 +117,9 @@ Now the package is unlinked, and you’re using the version on NPM.
 
 To use components, you need to import the desired components inside the file you’d like them in. For example, to import the `<ButtonWithAction />` component into a file
 
-- `import { ButtonWithAction } from` `"``@thecb/components``"``;`
+- `import { ButtonWithAction } from` ` "``@thecb/components``"``; `
 
-You can alias the component by 
+You can alias the component by
 
 - `import { ButtonWithAction as MyButton } from "@thecb/components";`
 

package/dist/index.cjs.js

@@ -2179,7 +2179,7 @@ var Center = function Center(_ref) {
 };
 
 function _templateObject2$1() {
-  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: ", ";\n  align-items: ", ";\n  margin: calc(", " / 2 * -1);\n  min-height: ", ";\n  min-width: ", ";\n\n  > * {\n    margin: calc(", " / 2);\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  margin: calc(", " / 2 * -1);\n  min-height: ", ";\n  min-width: ", ";\n\n  > * {\n    margin: calc(", " / 2);\n  }\n"]);
 
   _templateObject2$1 = function _templateObject2() {
     return data;
@@ -2202,22 +2202,25 @@ var ClusterWrapper = styled__default.div(_templateObject$2(), function (_ref) {
   return overflow ? "visible" : "hidden";
 });
 var ClusterInnerWrapper = styled__default.div(_templateObject2$1(), function (_ref2) {
-  var justify = _ref2.justify;
-  return justify;
+  var nowrap = _ref2.nowrap;
+  return nowrap ? "nowrap" : "wrap";
 }, function (_ref3) {
-  var align = _ref3.align;
-  return align;
+  var justify = _ref3.justify;
+  return justify;
 }, function (_ref4) {
-  var childGap = _ref4.childGap;
-  return childGap;
+  var align = _ref4.align;
+  return align;
 }, function (_ref5) {
-  var minHeight = _ref5.minHeight;
-  return minHeight;
+  var childGap = _ref5.childGap;
+  return childGap;
 }, function (_ref6) {
-  var minWidth = _ref6.minWidth;
-  return minWidth;
+  var minHeight = _ref6.minHeight;
+  return minHeight;
 }, function (_ref7) {
-  var childGap = _ref7.childGap;
+  var minWidth = _ref7.minWidth;
+  return minWidth;
+}, function (_ref8) {
+  var childGap = _ref8.childGap;
   return childGap;
 });
 
@@ -2236,10 +2239,11 @@ var Cluster = function Cluster(_ref) {
       childGap = _ref.childGap,
       minHeight = _ref.minHeight,
       minWidth = _ref.minWidth,
+      nowrap = _ref.nowrap,
       _ref$overflow = _ref.overflow,
       overflow = _ref$overflow === void 0 ? false : _ref$overflow,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["justify", "align", "childGap", "minHeight", "minWidth", "overflow", "children"]);
+      rest = _objectWithoutProperties(_ref, ["justify", "align", "childGap", "minHeight", "minWidth", "nowrap", "overflow", "children"]);
 
   return /*#__PURE__*/React__default.createElement(ClusterWrapper, _extends({
     overflow: overflow
@@ -2248,7 +2252,8 @@ var Cluster = function Cluster(_ref) {
     align: align,
     childGap: childGap,
     minHeight: minHeight,
-    minWidth: minWidth
+    minWidth: minWidth,
+    nowrap: nowrap
   }, safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null))));
 };
 
@@ -9541,8 +9546,12 @@ var Reel = function Reel(_ref) {
 };
 
 var fontFamily = {
-  primary: "Public Sans",
-  secondary: "Open Sans"
+  p: "Public Sans",
+  pL: "Public Sans",
+  pS: "Public Sans",
+  pXS: "Public Sans",
+  pXXS: "Public Sans",
+  pXL: "Public Sans"
 }; // Text uses the same variants as paragraph
 // Use a Paragraph if you want a block level element
 // Use a Text if you want an inline element
@@ -9987,14 +9996,14 @@ var Heading = function Heading(_ref) {
 var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$2, "h1");
 
 var fontSize$2 = {
-  large: "1.75rem",
-  medium: "1.5rem",
+  large: "1.5rem",
+  medium: "1.25rem",
   small: "1.094rem"
 };
 var color$1 = "#15749D";
 var lineHeight = {
-  large: "2.25rem",
-  medium: "2rem",
+  large: "2rem",
+  medium: "1.875rem",
   small: "1.641rem"
 };
 var fallbackValues$3 = {
@@ -10052,10 +10061,12 @@ var fontFamily$2 = {
 };
 var hoverColor = "#116285";
 var activeColor$1 = "#0E506D";
+var externalLinkColor = "#15749D";
 var fallbackValues$5 = {
   fontFamily: fontFamily$2,
   hoverColor: hoverColor,
-  activeColor: activeColor$1
+  activeColor: activeColor$1,
+  externalLinkColor: externalLinkColor
 };
 
 function _templateObject$e() {
@@ -10113,8 +10124,6 @@ var ExternalLink = function ExternalLink(_ref) {
       href = _ref$href === void 0 ? "" : _ref$href,
       _ref$newTab = _ref.newTab,
       newTab = _ref$newTab === void 0 ? false : _ref$newTab,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? CONGRESS_BLUE : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "1rem" : _ref$size,
       _ref$lineHeight = _ref.lineHeight,
@@ -10133,7 +10142,7 @@ var ExternalLink = function ExternalLink(_ref) {
   return /*#__PURE__*/React__default.createElement(StyledExternalLink, {
     href: href,
     target: newTab ? "_blank" : "",
-    color: color,
+    color: themeValues.externalLinkColor,
     size: size,
     lineheight: lineHeight,
     weight: weight,
@@ -10147,7 +10156,7 @@ var ExternalLink = function ExternalLink(_ref) {
 };
 
 function _templateObject$f() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  margin: ", ";\n  text-decoration: ", ";\n\n  &:hover,\n  &:focus {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\n  }\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  margin: ", ";\n\n  &:hover,\n  &:focus {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\n  }\n\n  ", "\n"]);
 
   _templateObject$f = function _templateObject() {
     return data;
@@ -10192,16 +10201,13 @@ var StyledInternalLink = styled__default(function (_ref) {
   var margin = _ref7.margin;
   return margin;
 }, function (_ref8) {
-  var active = _ref8.active;
-  return active === "true" ? "underline" : "none";
-}, function (_ref9) {
-  var hoverColor = _ref9.hoverColor;
+  var hoverColor = _ref8.hoverColor;
   return hoverColor;
-}, function (_ref10) {
-  var activeColor = _ref10.activeColor;
+}, function (_ref9) {
+  var activeColor = _ref9.activeColor;
   return activeColor;
-}, function (_ref11) {
-  var extrastyles = _ref11.extrastyles;
+}, function (_ref10) {
+  var extrastyles = _ref10.extrastyles;
   return extrastyles;
 });
 /* eslint-enable no-unused-vars */
@@ -13539,10 +13545,12 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       url = _ref$url === void 0 ? "/" : _ref$url,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$fileLink = _ref.fileLink,
+      fileLink = _ref$fileLink === void 0 ? false : _ref$fileLink,
       extraStyles = _ref.extraStyles,
       _ref$newTab = _ref.newTab,
       newTab = _ref$newTab === void 0 ? false : _ref$newTab,
-      otherProps = _objectWithoutProperties(_ref, ["url", "disabled", "extraStyles", "newTab"]);
+      otherProps = _objectWithoutProperties(_ref, ["url", "disabled", "fileLink", "extraStyles", "newTab"]);
 
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
@@ -13555,7 +13563,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       return safeChildren(children, /*#__PURE__*/React__default.createElement("span", null));
     }
 
-    return R.test(URL_TEST, url) ? /*#__PURE__*/React__default.createElement(ExternalLink, {
+    return R.test(URL_TEST, url) || fileLink ? /*#__PURE__*/React__default.createElement(ExternalLink, {
       href: url,
       tabIndex: "-1",
       newTab: newTab,
@@ -15252,8 +15260,12 @@ var DisplayBox = function DisplayBox(_ref) {
 var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$a);
 
 var fontFamily$3 = {
-  primary: "Public Sans",
-  secondary: "Open Sans"
+  p: "Public Sans",
+  pL: "Public Sans",
+  pS: "Public Sans",
+  pXS: "Public Sans",
+  pXXS: "Public Sans",
+  pXL: "Public Sans"
 };
 var fontSize$4 = {
   p: "1rem",
@@ -15358,12 +15370,14 @@ var DisplayCard = function DisplayCard(_ref) {
     text: buttonText,
     url: url,
     variant: "smallGhost",
-    dataQa: buttonText
+    dataQa: buttonText,
+    extraStyles: "min-width: 0;"
   }) : /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: buttonText,
     action: buttonAction,
     variant: "smallGhost",
-    dataQa: buttonText
+    dataQa: buttonText,
+    extraStyles: "min-width: 0;"
   }))))));
 };
 
@@ -16022,8 +16036,7 @@ var fallbackValues$d = {
 };
 
 var FormattedAddress = function FormattedAddress(_ref) {
-  var isActive = _ref.isActive,
-      street1 = _ref.street1,
+  var street1 = _ref.street1,
       city = _ref.city,
       stateProvince = _ref.stateProvince,
       country = _ref.country,
@@ -16032,14 +16045,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
       street2 = _ref$street === void 0 ? null : _ref$street,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? null : _ref$name,
-      isRadio = _ref.isRadio,
       themeValues = _ref.themeValues,
       _ref$qaPrefix = _ref.qaPrefix,
       qaPrefix = _ref$qaPrefix === void 0 ? "address" : _ref$qaPrefix;
   return /*#__PURE__*/React__default.createElement(Box, {
-    padding: themeValues.padding,
-    isActive: isActive,
-    isRadio: isRadio
+    padding: themeValues.padding
   }, name && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.color,
@@ -16200,7 +16210,8 @@ var HamburgerButton = function HamburgerButton(_ref4) {
   var activeColor = _ref4.activeColor,
       inactiveColor = _ref4.inactiveColor,
       isActive = _ref4.isActive,
-      onClick = _ref4.onClick;
+      _ref4$onClick = _ref4.onClick,
+      onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick;
   return /*#__PURE__*/React__default.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
     onClick: onClick,
@@ -17178,7 +17189,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, /*#__PURE__*/React__default.createElement(LabeledAmountText, {
     variant: variant,
     weight: themeValues.fontWeight,
-    extraStyles: "text-align: end; flex: 3;"
+    extraStyles: "text-align: start; flex: 3;"
   }, label, ":"), /*#__PURE__*/React__default.createElement(LabeledAmountText, {
     variant: variant,
     weight: themeValues.fontWeight,
@@ -17207,6 +17218,7 @@ var LineItem = function LineItem(_ref) {
       amount = _ref.amount,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Cluster, {
+    nowrap: true,
     justify: "space-between",
     align: "start"
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -17220,7 +17232,7 @@ var LineItem = function LineItem(_ref) {
   }, subDescription)), /*#__PURE__*/React__default.createElement(Paragraph$1, {
     variant: themeValues.paragraphVariant,
     weight: "600",
-    extraStyles: "margin: 0;"
+    extraStyles: "margin: 0; text-align: end; min-width: fit-content; padding-left: 32px;"
   }, amount));
 };
 
@@ -17742,7 +17754,12 @@ var Placeholder = function Placeholder(_ref2) {
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
 
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
+    isLink: isLink,
+    action: action,
+    destination: destination,
+    dataQa: dataQa
+  }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
     border: "none",
@@ -17750,11 +17767,6 @@ var Placeholder = function Placeholder(_ref2) {
     hiddenStyles: !visible,
     extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(STORM_GREY, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(STORM_GREY, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(STORM_GREY, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(STORM_GREY, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
     hoverStyles: "background-color: ".concat(GRECIAN_GREY, ";")
-  }, /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
-    isLink: isLink,
-    action: action,
-    destination: destination,
-    dataQa: dataQa
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -30488,6 +30500,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       isMobile = _ref.isMobile,
       supportsTouch = _ref.supportsTouch,
       title = _ref.title,
+      customPadding = _ref.customPadding,
       _ref$initiallyOpen = _ref.initiallyOpen,
       initiallyOpen = _ref$initiallyOpen === void 0 ? true : _ref$initiallyOpen,
       _ref$openHeight = _ref.openHeight,
@@ -30541,7 +30554,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: isOpen ? "0.5rem" : "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
+    padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
     onClick: isMobile && supportsTouch ? noop : toggleSection,
     onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
@@ -31076,6 +31089,13 @@ ForgotPasswordForm.reducer = reducer$4;
 ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
+var textColor$2 = "#ffffff";
+var backgroundColor$4 = "#182848";
+var fallbackValues$p = {
+  textColor: textColor$2,
+  backgroundColor: backgroundColor$4
+};
+
 var HighlightTabRow = function HighlightTabRow(_ref) {
   var tabs = _ref.tabs,
       highlightIndex = _ref.highlightIndex,
@@ -31114,14 +31134,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), R.repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter)));
 };
 
-var textColor$2 = "#ffffff";
-var backgroundColor$4 = "#182848";
-var fallbackValues$p = {
-  textColor: textColor$2,
-  backgroundColor: backgroundColor$4
-};
-
-var index$3 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$p));
+var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$p));
 
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
@@ -32452,35 +32465,6 @@ var Modal$1 = function Modal(_ref) {
   })))))))));
 };
 
-var Module = function Module(_ref) {
-  var heading = _ref.heading,
-      _ref$spacing = _ref.spacing,
-      spacing = _ref$spacing === void 0 ? "1rem" : _ref$spacing,
-      _ref$padding = _ref.padding,
-      padding = _ref$padding === void 0 ? "0" : _ref$padding,
-      _ref$spacingBottom = _ref.spacingBottom,
-      spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
-      themeValues = _ref.themeValues,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "default" : _ref$variant,
-      children = _ref.children;
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: variant === "default" ? "h5" : "h3",
-    weight: themeValues.fontWeight,
-    color: themeValues.fontColor,
-    margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
-    textAlign: themeValues.textAlign,
-    "aria-level": variant === "default" ? "3" : "1"
-  }, heading), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 ".concat(spacingBottom)
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: padding,
-    background: themeValues.backgroundColor,
-    borderRadius: themeValues.borderRadius,
-    boxShadow: themeValues.boxShadow
-  }, children)));
-};
-
 var fontSize$7 = {
   "default": "1.375rem",
   largeTitle: "1.75rem"
@@ -32534,7 +32518,36 @@ var fallbackValues$q = {
   backgroundColor: backgroundColor$5
 };
 
-var index$4 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$q, "default"));
+var Module = function Module(_ref) {
+  var heading = _ref.heading,
+      _ref$spacing = _ref.spacing,
+      spacing = _ref$spacing === void 0 ? "1rem" : _ref$spacing,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? "0" : _ref$padding,
+      _ref$spacingBottom = _ref.spacingBottom,
+      spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
+      themeValues = _ref.themeValues,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "default" : _ref$variant,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: variant === "default" ? "h5" : "h3",
+    weight: themeValues.fontWeight,
+    color: themeValues.fontColor,
+    margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
+    textAlign: themeValues.textAlign,
+    "aria-level": variant === "default" ? "3" : "1"
+  }, heading), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 ".concat(spacingBottom)
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: padding,
+    background: themeValues.backgroundColor,
+    borderRadius: themeValues.borderRadius,
+    boxShadow: themeValues.boxShadow
+  }, children)));
+};
+
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$q, "default"));
 
 var backgroundColor$6 = "#3b414d";
 var fallbackValues$r = {
@@ -34145,7 +34158,8 @@ var AmountModule = function AmountModule(_ref) {
     childGap: "0"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    weight: FONT_WEIGHT_SEMIBOLD
+    weight: FONT_WEIGHT_SEMIBOLD,
+    extraStyles: "text-align: right;"
   }, isMobile ? "Total Due" : "Total Amount Due"), /*#__PURE__*/React__default.createElement(AmountCallout$1, {
     amount: displayCurrency(totalAmountDue),
     textAlign: "right"
@@ -34153,7 +34167,7 @@ var AmountModule = function AmountModule(_ref) {
     variant: "p",
     weight: FONT_WEIGHT_REGULAR,
     color: REGENT_GREY,
-    extraStyles: "font-style: italic"
+    extraStyles: "font-style: italic; text-align: right;"
   }, isMobile ? "Autopay On" : "Autopay Enabled")));
 };
 
@@ -34238,7 +34252,8 @@ var Obligation = function Obligation(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center",
-    childGap: "4px"
+    childGap: "4px",
+    nowrap: true
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -34346,7 +34361,8 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
 
     return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, item.id, {
       validators: validators,
-      constraints: [onlyNaturals()]
+      constraints: [onlyNaturals()],
+      defaultValue: String(item.amount)
     }));
   }, {});
 
@@ -36075,7 +36091,7 @@ var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "
 
 
 
-var index$5 = /*#__PURE__*/Object.freeze({
+var index$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   colors: colors,
   fontWeights: style_constants
@@ -36083,7 +36099,7 @@ var index$5 = /*#__PURE__*/Object.freeze({
 
 
 
-var index$6 = /*#__PURE__*/Object.freeze({
+var index$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   formats: formats,
   general: general
@@ -36137,7 +36153,7 @@ exports.GoToEmailIcon = GoToEmailIcon$1;
 exports.Grid = Grid;
 exports.HamburgerButton = HamburgerButton;
 exports.Heading = Heading$1;
-exports.HighlightTabRow = index$3;
+exports.HighlightTabRow = HighlightTabRow$1;
 exports.Imposter = Imposter;
 exports.InternalLink = InternalLink;
 exports.Jumbo = Jumbo$1;
@@ -36146,7 +36162,7 @@ exports.LineItem = LineItem$1;
 exports.Loading = Loading;
 exports.LoginForm = LoginForm;
 exports.Modal = Modal$1;
-exports.Module = index$4;
+exports.Module = Module$1;
 exports.Motion = Motion;
 exports.NavFooter = NavFooter;
 exports.NavHeader = NavHeader;
@@ -36194,7 +36210,7 @@ exports.Text = Text$1;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.WorkflowTile = WorkflowTile;
-exports.constants = index$5;
+exports.constants = index$3;
 exports.createPartialAmountFormState = createPartialAmountFormState;
-exports.util = index$6;
+exports.util = index$4;
 exports.withWindowSize = withWindowSize;