@thecb/components 3.6.0-beta.0 → 3.7.0-beta.1

package/dist/index.cjs.js

@@ -14097,7 +14097,7 @@ var AlertSuccessIcon = function AlertSuccessIcon() {
     xmlnsXlink: "http://www.w3.org/1999/xlink"
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
     d: "M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M16.9497475,7.46446609 L18.363961,8.87867966 L9.87867966,17.363961 L5.63603897,13.1213203 L7.05025253,11.7071068 L9.87803897,14.5354661 L16.9497475,7.46446609 Z",
-    id: "path-1"
+    id: "alertSuccess"
   })), /*#__PURE__*/React__default.createElement("g", {
     id: "Symbols",
     stroke: "none",
@@ -14114,12 +14114,12 @@ var AlertSuccessIcon = function AlertSuccessIcon() {
     id: "mask-2",
     fill: "white"
   }, /*#__PURE__*/React__default.createElement("use", {
-    xlinkHref: "#path-1"
+    xlinkHref: "#alertSuccess"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "background-2",
     fill: "#47B872",
     fillRule: "nonzero",
-    xlinkHref: "#path-1"
+    xlinkHref: "#alertSuccess"
   })))));
 };
 
@@ -14264,7 +14264,7 @@ var Alert = function Alert(_ref) {
     width: "24px",
     childGap: "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 0 1rem",
+    padding: "0 0.5rem 0 1rem",
     minHeight: "100%"
   }, /*#__PURE__*/React__default.createElement(Cover, {
     minHeight: "100%",
@@ -14276,11 +14276,11 @@ var Alert = function Alert(_ref) {
   }, /*#__PURE__*/React__default.createElement(Icon, null)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(Sidebar, {
-    onRight: true,
+    sidebarOnRight: true,
     width: "24px",
     childGap: "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "1rem"
+    padding: "1rem 1rem 1rem 0.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
@@ -15349,7 +15349,7 @@ _curry2(function nth(offset, list) {
  *
  * @func
  * @memberOf R
- * @since v0.27.0
+ * @since v0.27.1
  * @category Object
  * @typedefn Idx = [String | Int]
  * @sig [Idx] -> {a} -> [a | Undefined]
@@ -18448,8 +18448,28 @@ var fallbackValues$e = {
   hoverFocusStyles: hoverFocusStyles
 };
 
+function _templateObject4$4() {
+  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
+
+  _templateObject4$4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$7() {
+  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n\n  ", "\n"]);
+
+  _templateObject3$7 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject2$d() {
-  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
   _templateObject2$d = function _templateObject2() {
     return data;
@@ -18459,7 +18479,7 @@ function _templateObject2$d() {
 }
 
 function _templateObject$p() {
-  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n\n  ", "\n"]);
 
   _templateObject$p = function _templateObject() {
     return data;
@@ -18472,54 +18492,68 @@ var InputField = styled__default.input(_templateObject$p(), function (_ref) {
       showErrors = _ref.showErrors,
       themeValues = _ref.themeValues;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : themeValues.borderColor;
-}, FONT_WEIGHT_REGULAR, function (_ref2) {
-  var themeValues = _ref2.themeValues;
-  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_ref3) {
+}, function (_ref2) {
+  var customHeight = _ref2.customHeight;
+  return customHeight ? customHeight : "48px";
+}, FONT_WEIGHT_REGULAR, function (_ref3) {
   var themeValues = _ref3.themeValues;
-  return themeValues.color && themeValues.color;
+  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
 }, function (_ref4) {
-  var background = _ref4.background,
-      themeValues = _ref4.themeValues;
+  var themeValues = _ref4.themeValues;
+  return themeValues.color && themeValues.color;
+}, function (_ref5) {
+  var background = _ref5.background,
+      themeValues = _ref5.themeValues;
   return background && "background: ".concat(themeValues.inputBackgroundColor, " url(").concat(background, ") no-repeat right 0.5rem center;");
-}, MATISSE_BLUE); // eslint-disable-next-line no-unused-vars
+}, MATISSE_BLUE, function (_ref6) {
+  var extraStyles = _ref6.extraStyles;
+  return styled.css(_templateObject2$d(), extraStyles);
+}); // eslint-disable-next-line no-unused-vars
 
-var FormattedInputField = styled__default(function (_ref5) {
-  var showErrors = _ref5.showErrors,
-      props = _objectWithoutProperties(_ref5, ["showErrors"]);
+var FormattedInputField = styled__default(function (_ref7) {
+  var showErrors = _ref7.showErrors,
+      props = _objectWithoutProperties(_ref7, ["showErrors"]);
 
   return /*#__PURE__*/React__default.createElement(src_1, props);
-})(_templateObject2$d(), function (_ref6) {
-  var field = _ref6.field,
-      showErrors = _ref6.showErrors,
-      themeValues = _ref6.themeValues;
+})(_templateObject3$7(), function (_ref8) {
+  var field = _ref8.field,
+      showErrors = _ref8.showErrors,
+      themeValues = _ref8.themeValues;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : themeValues.borderColor;
-}, FONT_WEIGHT_REGULAR, function (_ref7) {
-  var themeValues = _ref7.themeValues;
+}, function (_ref9) {
+  var customHeight = _ref9.customHeight;
+  return customHeight ? customHeight : "48px";
+}, FONT_WEIGHT_REGULAR, function (_ref10) {
+  var themeValues = _ref10.themeValues;
   return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_ref8) {
-  var themeValues = _ref8.themeValues;
+}, function (_ref11) {
+  var themeValues = _ref11.themeValues;
   return themeValues.color && themeValues.color;
-}, MATISSE_BLUE);
+}, MATISSE_BLUE, function (_ref12) {
+  var extraStyles = _ref12.extraStyles;
+  return styled.css(_templateObject4$4(), extraStyles);
+});
 
-var FormInput = function FormInput(_ref9) {
-  var _ref9$type = _ref9.type,
-      type = _ref9$type === void 0 ? "text" : _ref9$type,
-      labelTextWhenNoError = _ref9.labelTextWhenNoError,
-      errorMessages = _ref9.errorMessages,
-      _ref9$isNum = _ref9.isNum,
-      isNum = _ref9$isNum === void 0 ? false : _ref9$isNum,
-      _ref9$helperModal = _ref9.helperModal,
-      helperModal = _ref9$helperModal === void 0 ? false : _ref9$helperModal,
-      field = _ref9.field,
-      fieldActions = _ref9.fieldActions,
-      showErrors = _ref9.showErrors,
-      _ref9$formatter = _ref9.formatter,
-      formatter = _ref9$formatter === void 0 ? null : _ref9$formatter,
-      decorator = _ref9.decorator,
-      themeValues = _ref9.themeValues,
-      background = _ref9.background,
-      props = _objectWithoutProperties(_ref9, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background"]);
+var FormInput = function FormInput(_ref13) {
+  var _ref13$type = _ref13.type,
+      type = _ref13$type === void 0 ? "text" : _ref13$type,
+      labelTextWhenNoError = _ref13.labelTextWhenNoError,
+      errorMessages = _ref13.errorMessages,
+      _ref13$isNum = _ref13.isNum,
+      isNum = _ref13$isNum === void 0 ? false : _ref13$isNum,
+      _ref13$helperModal = _ref13.helperModal,
+      helperModal = _ref13$helperModal === void 0 ? false : _ref13$helperModal,
+      field = _ref13.field,
+      fieldActions = _ref13.fieldActions,
+      showErrors = _ref13.showErrors,
+      _ref13$formatter = _ref13.formatter,
+      formatter = _ref13$formatter === void 0 ? null : _ref13$formatter,
+      decorator = _ref13.decorator,
+      themeValues = _ref13.themeValues,
+      background = _ref13.background,
+      customHeight = _ref13.customHeight,
+      extraStyles = _ref13.extraStyles,
+      props = _objectWithoutProperties(_ref13, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"]);
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18588,7 +18622,9 @@ var FormInput = function FormInput(_ref9) {
     formatter: formatter,
     showErrors: showErrors,
     "data-qa": labelTextWhenNoError,
-    themeValues: themeValues
+    themeValues: themeValues,
+    customHeight: customHeight,
+    extraStyles: extraStyles
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
     "aria-labelledby": labelTextWhenNoError,
     onChange: function onChange(e) {
@@ -18602,7 +18638,9 @@ var FormInput = function FormInput(_ref9) {
     showErrors: showErrors,
     "data-qa": labelTextWhenNoError,
     themeValues: themeValues,
-    background: background
+    background: background,
+    customHeight: customHeight,
+    extraStyles: extraStyles
   }, props))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -18832,10 +18870,10 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
 
 var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$g, "default");
 
-function _templateObject3$7() {
+function _templateObject3$8() {
   var data = _taggedTemplateLiteral(["\n  display: block;\n  top: auto;\n  bottom: 6px;\n  left: 2px;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  margin-top: 12px;\n  background-color: ", ";\n\n  &, &::before, &::after {\n    background-color: ", ";\n    width: 30px;\n    height: 3px;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before, &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: -10px;\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  }\n\n  &::after {\n    bottom: -10px;\n    top: -20px;\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                opacity 0.1s linear;\n  }\n\n  &.active, &.active::before, &.active::after {\n    background-color: ", ";\n  }\n\n  &.active {\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\n    transition-delay: 0.22s;\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  &.active::after {\n    top: 0;\n    opacity: 0;\n    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                opacity: 0.1s 0.22s linear;\n  }\n\n  &.active::before {\n    top: 0;\n    transform: rotate(-90deg);\n    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n"]);
 
-  _templateObject3$7 = function _templateObject3() {
+  _templateObject3$8 = function _templateObject3() {
     return data;
   };
 
@@ -18863,7 +18901,7 @@ function _templateObject$r() {
 }
 var Hamburger = styled__default.button(_templateObject$r());
 var HamburgerBox = styled__default.span(_templateObject2$f());
-var HamburgerInner = styled__default.span(_templateObject3$7(), function (_ref) {
+var HamburgerInner = styled__default.span(_templateObject3$8(), function (_ref) {
   var inactiveColor = _ref.inactiveColor;
   return inactiveColor;
 }, function (_ref2) {
@@ -19099,7 +19137,8 @@ var NavFooter = function NavFooter(_ref) {
       _ref$footerPadding = _ref.footerPadding,
       footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
       isMobile = _ref.isMobile,
-      rest = _objectWithoutProperties(_ref, ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile"]);
+      footerWidth = _ref.footerWidth,
+      rest = _objectWithoutProperties(_ref, ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"]);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
@@ -19108,7 +19147,7 @@ var NavFooter = function NavFooter(_ref) {
     minWidth: "100%",
     extraStyles: isMobile ? "overflow: hidden;" : "height: ".concat(footerMinHeight, "; > * { height: 100%; };")
   }, rest), /*#__PURE__*/React__default.createElement(Center, {
-    maxWidth: "76.5rem"
+    maxWidth: footerWidth || "76.5rem"
   }, /*#__PURE__*/React__default.createElement(Cover, {
     singleChild: true,
     minHeight: "100%"
@@ -19138,7 +19177,8 @@ var NavHeader = function NavHeader(_ref) {
       headerHeight = _ref$headerHeight === void 0 ? "105px" : _ref$headerHeight,
       isMobile = _ref.isMobile,
       backgroundColor = _ref.backgroundColor,
-      rest = _objectWithoutProperties(_ref, ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor"]);
+      headerWidth = _ref.headerWidth,
+      rest = _objectWithoutProperties(_ref, ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"]);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
@@ -19146,7 +19186,7 @@ var NavHeader = function NavHeader(_ref) {
     extraStyles: isMobile ? "height: 72px; > * { height: 100%; }; z-index: 2;" : "height: ".concat(headerHeight, "; > * { height: 100%; }; z-index: 2;"),
     minWidth: "100%"
   }, rest), /*#__PURE__*/React__default.createElement(Center, {
-    maxWidth: "76.5rem"
+    maxWidth: headerWidth || "76.5rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
     minHeight: "100%",
     padding: "0"
@@ -19286,20 +19326,20 @@ function _templateObject5$2() {
   return data;
 }
 
-function _templateObject4$4() {
+function _templateObject4$5() {
   var data = _taggedTemplateLiteral(["", " is not a valid length"]);
 
-  _templateObject4$4 = function _templateObject4() {
+  _templateObject4$5 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$8() {
+function _templateObject3$9() {
   var data = _taggedTemplateLiteral(["", " is not the right length"]);
 
-  _templateObject3$8 = function _templateObject3() {
+  _templateObject3$9 = function _templateObject3() {
     return data;
   };
 
@@ -19365,7 +19405,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$8(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -30327,20 +30367,20 @@ var fallbackValues$o = {
   leftLabelStyles: leftLabelStyles
 };
 
-function _templateObject4$5() {
+function _templateObject4$6() {
   var data = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  top: 3px;\n  left: 3px;\n  right: 3px;\n  bottom: 3px;\n  border-radius: 50%;\n  box-sizing: border-box;\n"]);
 
-  _templateObject4$5 = function _templateObject4() {
+  _templateObject4$6 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$9() {
+function _templateObject3$a() {
   var data = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: 50%;\n  box-sizing: border-box;\n"]);
 
-  _templateObject3$9 = function _templateObject3() {
+  _templateObject3$a = function _templateObject3() {
     return data;
   };
 
@@ -30383,8 +30423,8 @@ var VisibleSwitchComponent = styled__default.label(_templateObject2$i(), functio
   var isMobile = _ref5.isMobile;
   return isMobile ? "transform: scale(0.75)" : "";
 });
-var ToggleSwitchMiddleRingComponent = styled__default.div(_templateObject3$9());
-var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$5());
+var ToggleSwitchMiddleRingComponent = styled__default.div(_templateObject3$a());
+var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$6());
 
 var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
@@ -32683,20 +32723,20 @@ function _templateObject5$3() {
   return data;
 }
 
-function _templateObject4$6() {
+function _templateObject4$7() {
   var data = _taggedTemplateLiteral(["\n  color: ", ";\n  align-items: center;\n  font-size: 1rem;\n  padding-right: 1rem;\n  cursor: pointer;\n  display: ", ";\n"]);
 
-  _templateObject4$6 = function _templateObject4() {
+  _templateObject4$7 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$a() {
+function _templateObject3$b() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n"]);
 
-  _templateObject3$a = function _templateObject3() {
+  _templateObject3$b = function _templateObject3() {
     return data;
   };
 
@@ -32739,8 +32779,8 @@ var EditableTableListItem = styled__default.div(_templateObject2$k(), function (
   var isMobile = _ref5.isMobile;
   return isMobile ? "padding: 1rem 0.5rem" : "padding: 0 0.5rem";
 });
-var EditableListItemControls$1 = styled__default.div(_templateObject3$a());
-var EditableListAction = styled__default.div(_templateObject4$6(), MATISSE_BLUE, function (_ref6) {
+var EditableListItemControls$1 = styled__default.div(_templateObject3$b());
+var EditableListAction = styled__default.div(_templateObject4$7(), MATISSE_BLUE, function (_ref6) {
   var hide = _ref6.hide;
   return hide ? "none" : "flex";
 });
@@ -36412,6 +36452,123 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
   };
 };
 
+var PAGING_SPACE = 2; // how many pages we want to have before/after delimiter
+
+var PAGING_INIT_SPACE = 3; // first delimiter should appear after 3 pages
+
+var PrevNextButton = function PrevNextButton(_ref) {
+  var action = _ref.action,
+      type = _ref.type;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 10px 0",
+    minHeight: "40px",
+    extraStyles: "max-height: 40px;"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: action,
+    contentOverride: true,
+    dataQa: type,
+    extraStyles: "\n        min-width: 40px;\n        min-height: 100%;\n        max-height: 40px;\n        padding: 6px;\n        border-radius: 3px;\n      "
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: type === "prev" && "transform: scaleX(-1)"
+  }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, {
+    variant: "darkMode"
+  }))));
+};
+
+var getPagesPanel = function getPagesPanel(page, pagesCount) {
+  if (!pagesCount || pagesCount <= 1) {
+    return [];
+  }
+
+  var lastPageNumber = pagesCount;
+  var space = page === 1 ? PAGING_INIT_SPACE : PAGING_SPACE;
+  var pages = [{
+    index: 1,
+    isButton: true
+  }];
+
+  if (page > space + 1) {
+    pages.push({
+      isDelimiter: true
+    });
+  }
+
+  for (var j = Math.max(1, page - space) + 1; j < Math.min(lastPageNumber, page + space); j++) {
+    pages.push({
+      index: j,
+      isButton: true
+    });
+  }
+
+  if (page < lastPageNumber - space) {
+    pages.push({
+      isDelimiter: true
+    });
+  }
+
+  pages.push({
+    index: lastPageNumber,
+    isButton: true
+  });
+  var activePage = pages.find(function (p) {
+    return p.index === page;
+  });
+
+  if (activePage) {
+    activePage.active = true;
+  }
+
+  return pages;
+};
+
+var Pagination = function Pagination(_ref2) {
+  var pagePrevious = _ref2.pagePrevious,
+      pageNext = _ref2.pageNext,
+      setCurrentPage = _ref2.setCurrentPage,
+      currentPage = _ref2.currentPage,
+      pageCount = _ref2.pageCount;
+  return /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center",
+    childGap: "10px"
+  }, currentPage > 1 && /*#__PURE__*/React__default.createElement(PrevNextButton, {
+    type: "prev",
+    action: pagePrevious
+  }), getPagesPanel(currentPage, pageCount).map(function (item, index) {
+    return item.isButton ? /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0",
+      border: item.active && "1px solid ".concat(MATISSE_BLUE),
+      borderRadius: item.active && "3px",
+      extraStyles: "max-height: 40px;"
+    }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      variant: "ghost",
+      key: item.index,
+      text: item.index,
+      disabled: item.active,
+      action: !item.active ? function () {
+        return setCurrentPage({
+          pageNumber: item.index
+        });
+      } : noop,
+      textExtraStyles: "font-size: 17px; font-weight: 900;",
+      extraStyles: "\n              min-width: 40px; min-height: 100%; padding: 0;\n              &:hover, &:focus {\n                text-decoration: none;\n                > * > span {\n                  text-decoration: none;\n                }\n              }\n            }\n            &:hover { ".concat(item.active ? "cursor: default;" : "background-color: ".concat(ALABASTER_WHITE), " }\n            "),
+      dataQa: index
+    }, item.index)) : /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0 10px"
+    }, /*#__PURE__*/React__default.createElement(Cluster, {
+      justify: "flex-end"
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
+      key: index,
+      variant: "pXL",
+      weight: "900",
+      color: MATISSE_BLUE
+    }, "...")));
+  }), currentPage < pageCount && /*#__PURE__*/React__default.createElement(PrevNextButton, {
+    type: "next",
+    action: pageNext
+  }));
+};
+
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$forwardButtonTex = _ref.forwardButtonText,
       forwardButtonText = _ref$forwardButtonTex === void 0 ? "Next" : _ref$forwardButtonTex,
@@ -37272,11 +37429,15 @@ var RadioSection = function RadioSection(_ref) {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1"
-    })), /*#__PURE__*/React__default.createElement(Text$1, {
+    })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
+      align: "center"
+    }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
+      padding: section.titleIcon ? "0 0 0 8px" : "0"
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: CHARADE_GREY,
       "aria-level": "3"
-    }, section.title)), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
+    }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
       childGap: "0.5rem"
     }, section.rightIcons.map(function (icon) {
       return /*#__PURE__*/React__default.createElement(RightIcon, {
@@ -37865,7 +38026,10 @@ var Timeout$1 = withWindowSize(Timeout);
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
       workflowName = _ref$workflowName === void 0 ? "Test Workflow" : _ref$workflowName,
-      workflowDescription = _ref.workflowDescription,
+      _ref$workflowDescript = _ref.workflowDescription,
+      workflowDescription = _ref$workflowDescript === void 0 ? "Link your benefit plan" : _ref$workflowDescript,
+      _ref$workflowActionNa = _ref.workflowActionName,
+      workflowActionName = _ref$workflowActionNa === void 0 ? "Search" : _ref$workflowActionNa,
       slug = _ref.slug;
   return /*#__PURE__*/React__default.createElement(Box, {
     background: WHITE,
@@ -37888,7 +38052,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
   }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
     variant: "pS",
     color: STORM_GREY
-  }, workflowDescription || "Link your benefit plan")), /*#__PURE__*/React__default.createElement(Box, {
+  }, workflowDescription)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "1.5rem 1rem",
     background: GRECIAN_GREY
   }, /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -37897,7 +38061,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
     fontWeight: FONT_WEIGHT_SEMIBOLD,
     fontSize: "1.125rem",
     borderRadius: "0px",
-    text: "Link Benefits",
+    text: workflowActionName,
     minWidth: "100%",
     url: "/service/".concat(slug),
     extraStyles: "width: 100%;"
@@ -38245,6 +38409,7 @@ exports.NavHeader = NavHeader;
 exports.NavMenuDesktop = NavMenuDesktop$1;
 exports.NavMenuMobile = NavMenuMobile$1;
 exports.Obligation = Obligation;
+exports.Pagination = Pagination;
 exports.Paragraph = Paragraph$1;
 exports.PartialAmountForm = PartialAmountForm;
 exports.PasswordRequirements = PasswordRequirements;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

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

@@ -28,7 +28,7 @@ const Alert = ({
       borderSize="1px"
     >
       <Sidebar width="24px" childGap="0rem">
-        <Box padding="0 0 0 1rem" minHeight="100%">
+        <Box padding="0 0.5rem 0 1rem" minHeight="100%">
           <Cover minHeight="100%" singleChild>
             <Box padding="0" width="1.5rem" minHeight="1.5rem">
               <Icon />
@@ -36,8 +36,8 @@ const Alert = ({
           </Cover>
         </Box>
         <Box padding="0">
-          <Sidebar onRight width="24px" childGap="0rem">
-            <Box padding="1rem">
+          <Sidebar sidebarOnRight width="24px" childGap="0rem">
+            <Box padding="1rem 1rem 1rem 0.5rem">
               <Cluster justify="flex-start" align="center">
                 <Stack fullHeight childGap="0.25rem">
                   <Text variant="p" color={themeValues.text} weight="600">

package/src/components/atoms/form-layouts/FormInput.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from "react";
-import styled, { ThemeContext } from "styled-components";
+import styled, { ThemeContext, css } from "styled-components";
 import { FormattedInput } from "formatted-input";
 import { fallbackValues } from "./FormLayouts.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
@@ -15,7 +15,7 @@ const InputField = styled.input`
         ? ERROR_COLOR
         : themeValues.borderColor};
   border-radius: 2px;
-  height: 48px;
+  height: ${({ customHeight }) => (customHeight ? customHeight : "48px")};
   width: 100%;
   padding: 1rem;
   min-width: 100px;
@@ -38,6 +38,11 @@ const InputField = styled.input`
   &:focus {
     border: 1px solid ${MATISSE_BLUE};
   }
+
+  ${({ extraStyles }) =>
+    css`
+      ${extraStyles}
+    `}
 `;
 
 // eslint-disable-next-line no-unused-vars
@@ -50,7 +55,7 @@ const FormattedInputField = styled(({ showErrors, ...props }) => (
         ? ERROR_COLOR
         : themeValues.borderColor};
   border-radius: 2px;
-  height: 48px;
+  height: ${({ customHeight }) => (customHeight ? customHeight : "48px")};
   width: 100%;
   padding: 1rem;
   min-width: 100px;
@@ -68,6 +73,11 @@ const FormattedInputField = styled(({ showErrors, ...props }) => (
   &:focus {
     border: 1px solid ${MATISSE_BLUE};
   }
+
+  ${({ extraStyles }) =>
+    css`
+      ${extraStyles}
+    `}
 `;
 
 const FormInput = ({
@@ -83,6 +93,8 @@ const FormInput = ({
   decorator,
   themeValues,
   background,
+  customHeight,
+  extraStyles,
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -167,6 +179,8 @@ const FormInput = ({
             showErrors={showErrors}
             data-qa={labelTextWhenNoError}
             themeValues={themeValues}
+            customHeight={customHeight}
+            extraStyles={extraStyles}
             {...props}
           />
         ) : (
@@ -182,6 +196,8 @@ const FormInput = ({
             data-qa={labelTextWhenNoError}
             themeValues={themeValues}
             background={background}
+            customHeight={customHeight}
+            extraStyles={extraStyles}
             {...props}
           />
         )}

package/src/components/atoms/nav-footer/NavFooter.js

@@ -10,6 +10,7 @@ const NavFooter = ({
   largeSideSize = "2",
   footerPadding = "1.5rem 1rem",
   isMobile,
+  footerWidth,
   ...rest
 }) => (
   <Box
@@ -24,7 +25,7 @@ const NavFooter = ({
     }
     {...rest}
   >
-    <Center maxWidth="76.5rem">
+    <Center maxWidth={footerWidth || "76.5rem"}>
       <Cover singleChild minHeight="100%">
         <Box minHeight="100%" padding="0">
           <Switcher

package/src/components/atoms/nav-header/NavHeader.js

@@ -7,6 +7,7 @@ const NavHeader = ({
   headerHeight = "105px",
   isMobile,
   backgroundColor,
+  headerWidth,
   ...rest
 }) => (
   <Box
@@ -20,7 +21,7 @@ const NavHeader = ({
     minWidth="100%"
     {...rest}
   >
-    <Center maxWidth="76.5rem">
+    <Center maxWidth={headerWidth || "76.5rem"}>
       <Box minHeight="100%" padding="0">
         <Cover singleChild minHeight={isMobile ? "72px" : headerHeight}>
           <Cluster justify="space-between" align="center" overflow>

package/src/components/molecules/index.js

@@ -13,6 +13,7 @@ export { default as Module } from "./module";
 export * from "./nav-menu";
 export { default as Obligation } from "./obligation";
 export * from "./partial-amount-form";
+export { default as Pagination } from "./pagination";
 export { default as PaymentButtonBar } from "./payment-button-bar";
 export { default as PaymentDetails } from "./payment-details";
 export { default as PaymentFormACH } from "./payment-form-ach";

package/src/components/molecules/pagination/Pagination.js

@@ -0,0 +1,125 @@
+import React from "react";
+import { Cluster, Box } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import ButtonWithAction from "../../atoms/button-with-action";
+import { ChevronIcon } from "../../atoms/icons";
+import { MATISSE_BLUE, ALABASTER_WHITE } from "../../../constants/colors";
+import { noop } from "../../../util/general";
+
+const PAGING_SPACE = 2; // how many pages we want to have before/after delimiter
+const PAGING_INIT_SPACE = 3; // first delimiter should appear after 3 pages
+
+const PrevNextButton = ({ action, type }) => (
+  <Box padding="0 10px 0" minHeight="40px" extraStyles="max-height: 40px;">
+    <ButtonWithAction
+      action={action}
+      contentOverride
+      dataQa={type}
+      extraStyles={`
+        min-width: 40px;
+        min-height: 100%;
+        max-height: 40px;
+        padding: 6px;
+        border-radius: 3px;
+      `}
+    >
+      <Box padding="0" extraStyles={type === "prev" && "transform: scaleX(-1)"}>
+        <ChevronIcon variant="darkMode" />
+      </Box>
+    </ButtonWithAction>
+  </Box>
+);
+
+export const getPagesPanel = (page, pagesCount) => {
+  if (!pagesCount || pagesCount <= 1) {
+    return [];
+  }
+  const lastPageNumber = pagesCount;
+  const space = page === 1 ? PAGING_INIT_SPACE : PAGING_SPACE;
+  const pages = [{ index: 1, isButton: true }];
+  if (page > space + 1) {
+    pages.push({ isDelimiter: true });
+  }
+  for (
+    let j = Math.max(1, page - space) + 1;
+    j < Math.min(lastPageNumber, page + space);
+    j++
+  ) {
+    pages.push({ index: j, isButton: true });
+  }
+  if (page < lastPageNumber - space) {
+    pages.push({ isDelimiter: true });
+  }
+  pages.push({ index: lastPageNumber, isButton: true });
+  const activePage = pages.find(p => p.index === page);
+  if (activePage) {
+    activePage.active = true;
+  }
+  return pages;
+};
+
+const Pagination = ({
+  pagePrevious,
+  pageNext,
+  setCurrentPage,
+  currentPage,
+  pageCount
+}) => (
+  <Cluster justify="center" childGap="10px">
+    {currentPage > 1 && <PrevNextButton type="prev" action={pagePrevious} />}
+    {getPagesPanel(currentPage, pageCount).map((item, index) =>
+      item.isButton ? (
+        <Box
+          padding="0"
+          border={item.active && `1px solid ${MATISSE_BLUE}`}
+          borderRadius={item.active && "3px"}
+          extraStyles="max-height: 40px;"
+        >
+          <ButtonWithAction
+            variant="ghost"
+            key={item.index}
+            text={item.index}
+            disabled={item.active}
+            action={
+              !item.active
+                ? () => setCurrentPage({ pageNumber: item.index })
+                : noop
+            }
+            textExtraStyles={`font-size: 17px; font-weight: 900;`}
+            extraStyles={`
+              min-width: 40px; min-height: 100%; padding: 0;
+              &:hover, &:focus {
+                text-decoration: none;
+                > * > span {
+                  text-decoration: none;
+                }
+              }
+            }
+            &:hover { ${
+              item.active
+                ? "cursor: default;"
+                : `background-color: ${ALABASTER_WHITE}`
+            } }
+            `}
+            dataQa={index}
+          >
+            {item.index}
+          </ButtonWithAction>
+        </Box>
+      ) : (
+        <Box padding="0 10px">
+          <Cluster justify="flex-end">
+            <Text key={index} variant="pXL" weight="900" color={MATISSE_BLUE}>
+              {"..."}
+            </Text>
+          </Cluster>
+        </Box>
+      )
+    )}
+    {currentPage < pageCount && (
+      <PrevNextButton type="next" action={pageNext} />
+    )}
+  </Cluster>
+);
+
+export default Pagination;

package/src/components/molecules/pagination/index.js

@@ -0,0 +1,3 @@
+import Pagination from "./Pagination";
+
+export default Pagination;

package/src/components/molecules/radio-section/RadioSection.js

@@ -160,9 +160,14 @@ const RadioSection = ({
                           />
                         </Box>
                       )}
-                      <Text variant="p" color={CHARADE_GREY} aria-level="3">
-                        {section.title}
-                      </Text>
+                      {section.titleIcon && (
+                        <Cluster align="center">{section.titleIcon}</Cluster>
+                      )}
+                      <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
+                        <Text variant="p" color={CHARADE_GREY} aria-level="3">
+                          {section.title}
+                        </Text>
+                      </Box>
                     </Cluster>
                     {section.rightIcons && (
                       <Cluster childGap="0.5rem">

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -14,7 +14,8 @@ import ButtonWithLink from "../../atoms/button-with-link";
 import { Box, Stack } from "../../atoms/layouts";
 const WorkflowTile = ({
   workflowName = "Test Workflow",
-  workflowDescription,
+  workflowDescription = "Link your benefit plan",
+  workflowActionName = "Search",
   slug
 }) => (
   <Box
@@ -35,7 +36,7 @@ const WorkflowTile = ({
       </Box>
       <Box padding={"0 1rem 1rem 1rem"} minHeight={"4.25rem"}>
         <Paragraph variant="pS" color={STORM_GREY}>
-          {workflowDescription || `Link your benefit plan`}
+          {workflowDescription}
         </Paragraph>
       </Box>
       <Box padding={"1.5rem 1rem"} background={GRECIAN_GREY}>
@@ -45,7 +46,7 @@ const WorkflowTile = ({
           fontWeight={FONT_WEIGHT_SEMIBOLD}
           fontSize={"1.125rem"}
           borderRadius={"0px"}
-          text={"Link Benefits"}
+          text={workflowActionName}
           minWidth={"100%"}
           url={`/service/${slug}`}
           extraStyles={`width: 100%;`}

package/src/deprecated/icons/AlertSuccessIcon.js

@@ -11,7 +11,7 @@ export const AlertSuccessIcon = () => (
     <defs>
       <path
         d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M16.9497475,7.46446609 L18.363961,8.87867966 L9.87867966,17.363961 L5.63603897,13.1213203 L7.05025253,11.7071068 L9.87803897,14.5354661 L16.9497475,7.46446609 Z"
-        id="path-1"
+        id="alertSuccess"
       ></path>
     </defs>
     <g
@@ -27,13 +27,13 @@ export const AlertSuccessIcon = () => (
           transform="translate(24.000000, 34.000000)"
         >
           <mask id="mask-2" fill="white">
-            <use xlinkHref="#path-1"></use>
+            <use xlinkHref="#alertSuccess"></use>
           </mask>
           <use
             id="background-2"
             fill="#47B872"
             fillRule="nonzero"
-            xlinkHref="#path-1"
+            xlinkHref="#alertSuccess"
           ></use>
         </g>
       </g>