@thecb/components 3.1.4-beta.0 → 3.1.10

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/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.13.0

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 */
@@ -15252,8 +15258,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 +15368,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 +16034,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 +16043,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 +16208,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 +17187,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 +17216,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 +17230,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 +17752,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 +17765,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 +30498,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 +30552,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 +31087,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 +31132,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 +32463,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 +32516,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 +34156,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 +34165,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 +34250,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, {
@@ -36075,7 +36088,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 +36096,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 +36150,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 +36159,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 +36207,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.1.4-beta.0",
+  "version": "3.1.10",
   "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;