@thecb/components 3.1.4-beta.0 → 3.2.0

package/dist/index.esm.js

@@ -2171,7 +2171,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;
@@ -2194,22 +2194,25 @@ var ClusterWrapper = styled.div(_templateObject$2(), function (_ref) {
   return overflow ? "visible" : "hidden";
 });
 var ClusterInnerWrapper = styled.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;
 });
 
@@ -2228,10 +2231,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.createElement(ClusterWrapper, _extends({
     overflow: overflow
@@ -2240,7 +2244,8 @@ var Cluster = function Cluster(_ref) {
     align: align,
     childGap: childGap,
     minHeight: minHeight,
-    minWidth: minWidth
+    minWidth: minWidth,
+    nowrap: nowrap
   }, safeChildren(children, /*#__PURE__*/React.createElement(Fragment, null))));
 };
 
@@ -9533,8 +9538,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
@@ -9979,14 +9988,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 = {
@@ -10044,10 +10053,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() {
@@ -10105,8 +10116,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,
@@ -10125,7 +10134,7 @@ var ExternalLink = function ExternalLink(_ref) {
   return /*#__PURE__*/React.createElement(StyledExternalLink, {
     href: href,
     target: newTab ? "_blank" : "",
-    color: color,
+    color: themeValues.externalLinkColor,
     size: size,
     lineheight: lineHeight,
     weight: weight,
@@ -10139,7 +10148,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;
@@ -10184,16 +10193,13 @@ var StyledInternalLink = styled(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 */
@@ -13531,10 +13537,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,
@@ -13547,7 +13555,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       return safeChildren(children, /*#__PURE__*/React.createElement("span", null));
     }
 
-    return test(URL_TEST, url) ? /*#__PURE__*/React.createElement(ExternalLink, {
+    return test(URL_TEST, url) || fileLink ? /*#__PURE__*/React.createElement(ExternalLink, {
       href: url,
       tabIndex: "-1",
       newTab: newTab,
@@ -15244,8 +15252,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",
@@ -15350,12 +15362,14 @@ var DisplayCard = function DisplayCard(_ref) {
     text: buttonText,
     url: url,
     variant: "smallGhost",
-    dataQa: buttonText
+    dataQa: buttonText,
+    extraStyles: "min-width: 0;"
   }) : /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: buttonText,
     action: buttonAction,
     variant: "smallGhost",
-    dataQa: buttonText
+    dataQa: buttonText,
+    extraStyles: "min-width: 0;"
   }))))));
 };
 
@@ -16014,8 +16028,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,
@@ -16024,14 +16037,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.createElement(Box, {
-    padding: themeValues.padding,
-    isActive: isActive,
-    isRadio: isRadio
+    padding: themeValues.padding
   }, name && /*#__PURE__*/React.createElement(Text$1, {
     variant: "p",
     color: themeValues.color,
@@ -16192,7 +16202,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.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
     onClick: onClick,
@@ -17170,7 +17181,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, /*#__PURE__*/React.createElement(LabeledAmountText, {
     variant: variant,
     weight: themeValues.fontWeight,
-    extraStyles: "text-align: end; flex: 3;"
+    extraStyles: "text-align: start; flex: 3;"
   }, label, ":"), /*#__PURE__*/React.createElement(LabeledAmountText, {
     variant: variant,
     weight: themeValues.fontWeight,
@@ -17199,6 +17210,7 @@ var LineItem = function LineItem(_ref) {
       amount = _ref.amount,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React.createElement(Cluster, {
+    nowrap: true,
     justify: "space-between",
     align: "start"
   }, /*#__PURE__*/React.createElement(Stack, {
@@ -17212,7 +17224,7 @@ var LineItem = function LineItem(_ref) {
   }, subDescription)), /*#__PURE__*/React.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));
 };
 
@@ -17734,7 +17746,12 @@ var Placeholder = function Placeholder(_ref2) {
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(PlaceholderContentWrapper, {
+    isLink: isLink,
+    action: action,
+    destination: destination,
+    dataQa: dataQa
+  }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
     border: "none",
@@ -17742,11 +17759,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.createElement(PlaceholderContentWrapper, {
-    isLink: isLink,
-    action: action,
-    destination: destination,
-    dataQa: dataQa
   }, /*#__PURE__*/React.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -30480,6 +30492,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,
@@ -30533,7 +30546,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: isOpen ? "0.5rem" : "0rem"
   }, /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
+    padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
     onClick: isMobile && supportsTouch ? noop : toggleSection,
     onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
@@ -31068,6 +31081,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,
@@ -31106,14 +31126,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React.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__*/memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$p));
+var HighlightTabRow$1 = /*#__PURE__*/memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$p));
 
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
@@ -32444,35 +32457,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.createElement(Fragment, null, heading && /*#__PURE__*/React.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.createElement(Box, {
-    padding: "0 0 ".concat(spacingBottom)
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: padding,
-    background: themeValues.backgroundColor,
-    borderRadius: themeValues.borderRadius,
-    boxShadow: themeValues.boxShadow
-  }, children)));
-};
-
 var fontSize$7 = {
   "default": "1.375rem",
   largeTitle: "1.75rem"
@@ -32526,7 +32510,36 @@ var fallbackValues$q = {
   backgroundColor: backgroundColor$5
 };
 
-var index$4 = /*#__PURE__*/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.createElement(Fragment, null, heading && /*#__PURE__*/React.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.createElement(Box, {
+    padding: "0 0 ".concat(spacingBottom)
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: padding,
+    background: themeValues.backgroundColor,
+    borderRadius: themeValues.borderRadius,
+    boxShadow: themeValues.boxShadow
+  }, children)));
+};
+
+var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$q, "default"));
 
 var backgroundColor$6 = "#3b414d";
 var fallbackValues$r = {
@@ -34137,7 +34150,8 @@ var AmountModule = function AmountModule(_ref) {
     childGap: "0"
   }, /*#__PURE__*/React.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.createElement(AmountCallout$1, {
     amount: displayCurrency(totalAmountDue),
     textAlign: "right"
@@ -34145,7 +34159,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")));
 };
 
@@ -34230,7 +34244,8 @@ var Obligation = function Obligation(_ref) {
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "space-between",
     align: "center",
-    childGap: "4px"
+    childGap: "4px",
+    nowrap: true
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(Cluster, {
@@ -34338,7 +34353,8 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
 
     return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, item.id, {
       validators: validators,
-      constraints: [onlyNaturals()]
+      constraints: [onlyNaturals()],
+      defaultValue: String(item.amount)
     }));
   }, {});
 
@@ -36067,7 +36083,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
@@ -36075,10 +36091,10 @@ var index$5 = /*#__PURE__*/Object.freeze({
 
 
 
-var index$6 = /*#__PURE__*/Object.freeze({
+var index$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   formats: formats,
   general: general
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AddressForm, Alert$1 as Alert, AmountCallout$1 as AmountCallout, BankIcon, Box, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, DefaultPageTemplate, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, EditNameForm, EditableList, EditableTable, EmailForm, ExternalLink, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, index$3 as HighlightTabRow, Imposter, InternalLink, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, index$4 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, Obligation, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard, PaymentIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RegistrationForm, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordSuccess, RoutingNumberImage, SettingsIconSmall$1 as SettingsIconSmall, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, Switcher, TabSidebar$1 as TabSidebar, TableListItem, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, ToggleSwitch$1 as ToggleSwitch, VerifiedEmailIcon$1 as VerifiedEmailIcon, WorkflowTile, index$5 as constants, createPartialAmountFormState, index$6 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AddressForm, Alert$1 as Alert, AmountCallout$1 as AmountCallout, BankIcon, Box, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, DefaultPageTemplate, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, EditNameForm, EditableList, EditableTable, EmailForm, ExternalLink, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, Imposter, InternalLink, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, Obligation, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard, PaymentIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RegistrationForm, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordSuccess, RoutingNumberImage, SettingsIconSmall$1 as SettingsIconSmall, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, Switcher, TabSidebar$1 as TabSidebar, TableListItem, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, ToggleSwitch$1 as ToggleSwitch, VerifiedEmailIcon$1 as VerifiedEmailIcon, WorkflowTile, index$3 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.1.4-beta.0",
+  "version": "3.2.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -48,7 +48,7 @@
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
     "react-redux": "^7.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "6.0.0-alpha.3",
     "redux": "^4.0.5",
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",
@@ -57,15 +57,15 @@
     "rollup-plugin-node-resolve": "^5.1.0",
     "rollup-plugin-visualizer": "^4.0.4",
     "storybook": "^5.3.14",
-    "styled-components": "^5.1.1",
+    "styled-components": "5.1.1",
     "styled-theming": "^2.2.0"
   },
   "peerDependencies": {
     "ramda": "^0.27.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "styled-components": "^5.1.1",
+    "react-router-dom": "6.0.0-alpha.3",
+    "styled-components": "5.1.1",
     "styled-theming": "^2.2.0"
   },
   "husky": {

package/src/components/atoms/alert/Alert.stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import Alert from "./Alert";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  info: "info",
+  warn: "warn",
+  error: "error",
+  success: "success"
+};
+const defaultValue = "info";
+const groupId = "props";
+
+export const alert = () => (
+  <Alert
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    text={text("text", "Alert Bar", "props")}
+    showQuitLink={boolean("showQuitLink", true, "props")}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Alert",
+  Component: Alert
+});
+export default story;

package/src/components/atoms/amount-callout/AmountCallout.stories.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import AmountCallout from "./AmountCallout";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  None: undefined
+};
+const defaultValue = "large";
+
+const textAlignLabel = "textAlign";
+const textAlign = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+const defaultTextAlignValue = "left";
+const groupId = "props";
+
+export const amountCallout = () => (
+  <AmountCallout
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    amount={text("text", "$1.23", "props")}
+    textAlign={select(
+      textAlignLabel,
+      textAlign,
+      defaultTextAlignValue,
+      groupId
+    )}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/AmountCallout",
+  Component: AmountCallout
+});
+export default story;

package/src/components/atoms/amount-callout/AmountCallout.theme.js

@@ -1,14 +1,14 @@
 const fontSize = {
-  large: "1.75rem",
-  medium: "1.5rem",
+  large: "1.5rem",
+  medium: "1.25rem",
   small: "1.094rem"
 };
 
 const color = "#15749D";
 
 const lineHeight = {
-  large: "2.25rem",
-  medium: "2rem",
+  large: "2rem",
+  medium: "1.875rem",
   small: "1.641rem"
 };
 

package/src/components/atoms/breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { object } from "@storybook/addon-knobs";
+import Breadcrumb from "./Breadcrumb";
+import page from "../../../../.storybook/page";
+
+const labelInactive = "Inactive Breadcrumb";
+const defaultInactiveValue = {
+  linkText: "Home",
+  linkDestination: location.pathname,
+  isActive: false
+};
+
+const labelActive = "Active Breadcrumb";
+const defaultActiveValue = {
+  linkText: "Page",
+  linkDestination: location.pathname,
+  isActive: true
+};
+const groupId = "props";
+
+export const breadcrumb = () => (
+  <Breadcrumb
+    breadcrumbsList={[
+      {
+        ...object(labelInactive, defaultInactiveValue, groupId)
+      },
+      {
+        ...object(labelActive, defaultActiveValue, groupId)
+      }
+    ]}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Breadcrumb",
+  Component: Breadcrumb
+});
+export default story;

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -8,6 +8,7 @@ import ButtonWithAction from "../button-with-action";
 const ButtonWithLink = ({
   url = "/",
   disabled = false,
+  fileLink = false,
   extraStyles,
   newTab = false,
   ...otherProps
@@ -22,7 +23,7 @@ const ButtonWithLink = ({
     if (disabled) {
       return safeChildren(children, <span />);
     }
-    return R.test(URL_TEST, url) ? (
+    return R.test(URL_TEST, url) || fileLink ? (
       <ExternalLink
         href={url}
         tabIndex="-1"