@thecb/components 3.6.0-beta.2 → 4.0.0

package/dist/index.cjs.js

@@ -6087,12 +6087,19 @@ var displayCurrency = function displayCurrency(cents) {
 var convertCentsToMoneyInt = function convertCentsToMoneyInt(n) {
   return (n / 100).toFixed(0);
 };
+
+var createUniqueId = function createUniqueId() {
+  return "_" + Math.random().toString(36).substr(2, 9);
+};
+
 var safeChildren = function safeChildren(children) {
   var replacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
 
   if (children && children instanceof Array) {
     return children.map(function (child) {
-      return !child ? replacement : child;
+      return !child ? /*#__PURE__*/React__default.createElement(React.Fragment, {
+        key: createUniqueId()
+      }, replacement) : child;
     });
   }
 
@@ -6251,7 +6258,8 @@ var BoxWrapper = styled__default(function (_ref) {
       minWidth = _ref.minWidth,
       maxWidth = _ref.maxWidth,
       padding = _ref.padding,
-      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding"]);
+      hiddenStyles = _ref.hiddenStyles,
+      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles"]);
 
   return /*#__PURE__*/React__default.createElement("div", props);
 })(_templateObject$1(), function (_ref2) {
@@ -6462,30 +6470,37 @@ function _templateObject$3() {
 
   return data;
 }
-var ClusterWrapper = styled__default.div(_templateObject$3(), function (_ref) {
-  var overflow = _ref.overflow;
+/* eslint-disable no-unused-vars */
+
+var ClusterWrapper = styled__default(function (_ref) {
+  var overflow = _ref.overflow,
+      props = _objectWithoutProperties(_ref, ["overflow"]);
+
+  return /*#__PURE__*/React__default.createElement("div", props);
+})(_templateObject$3(), function (_ref2) {
+  var overflow = _ref2.overflow;
   return overflow ? "visible" : "hidden";
 });
-var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref2) {
-  var nowrap = _ref2.nowrap;
+var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref3) {
+  var nowrap = _ref3.nowrap;
   return nowrap ? "nowrap" : "wrap";
-}, function (_ref3) {
-  var justify = _ref3.justify;
-  return justify;
 }, function (_ref4) {
-  var align = _ref4.align;
-  return align;
+  var justify = _ref4.justify;
+  return justify;
 }, function (_ref5) {
-  var childGap = _ref5.childGap;
-  return childGap;
+  var align = _ref5.align;
+  return align;
 }, function (_ref6) {
-  var minHeight = _ref6.minHeight;
-  return minHeight;
+  var childGap = _ref6.childGap;
+  return childGap;
 }, function (_ref7) {
-  var minWidth = _ref7.minWidth;
-  return minWidth;
+  var minHeight = _ref7.minHeight;
+  return minHeight;
 }, function (_ref8) {
-  var childGap = _ref8.childGap;
+  var minWidth = _ref8.minWidth;
+  return minWidth;
+}, function (_ref9) {
+  var childGap = _ref9.childGap;
   return childGap;
 });
 
@@ -6608,25 +6623,35 @@ var SidebarWrapper = styled__default.div(_templateObject$5(), function (_ref) {
   var fullHeight = _ref.fullHeight;
   return fullHeight ? "height: 100%;" : "";
 });
-var SidebarInnerWrapper = styled__default.div(_templateObject2$3(), function (_ref2) {
-  var childGap = _ref2.childGap;
-  return childGap;
-}, function (_ref3) {
+var SidebarInnerWrapper = styled__default( // eslint-disable-next-line no-unused-vars
+function (_ref2) {
+  var onRight = _ref2.onRight,
+      childGap = _ref2.childGap,
+      contentMinWidth = _ref2.contentMinWidth,
+      minHeight = _ref2.minHeight,
+      fullHeight = _ref2.fullHeight,
+      props = _objectWithoutProperties(_ref2, ["onRight", "childGap", "contentMinWidth", "minHeight", "fullHeight"]);
+
+  return /*#__PURE__*/React__default.createElement("div", props);
+})(_templateObject2$3(), function (_ref3) {
   var childGap = _ref3.childGap;
   return childGap;
 }, function (_ref4) {
-  var width = _ref4.width;
-  return width ? "flex-basis: ".concat(width) : "";
+  var childGap = _ref4.childGap;
+  return childGap;
 }, function (_ref5) {
-  var minHeight = _ref5.minHeight;
-  return minHeight ? "margin-top: 0; margin-bottom: 0;" : "";
+  var width = _ref5.width;
+  return width ? "flex-basis: ".concat(width) : "";
 }, function (_ref6) {
-  var sidebarOnRight = _ref6.sidebarOnRight,
-      contentMinWidth = _ref6.contentMinWidth,
-      childGap = _ref6.childGap;
-  return sidebarOnRight ? "> :first-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-width: calc(".concat(contentMinWidth, " - ").concat(childGap, ");\n    }\n    ") : "> :last-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-width: calc(".concat(contentMinWidth, " - ").concat(childGap, ");\n    }");
+  var minHeight = _ref6.minHeight;
+  return minHeight ? "margin-top: 0; margin-bottom: 0;" : "";
 }, function (_ref7) {
-  var fullHeight = _ref7.fullHeight;
+  var sidebarOnRight = _ref7.sidebarOnRight,
+      contentMinWidth = _ref7.contentMinWidth,
+      childGap = _ref7.childGap;
+  return sidebarOnRight ? "> :first-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-width: calc(".concat(contentMinWidth, " - ").concat(childGap, ");\n    }\n    ") : "> :last-child {\n      flex-basis: 0;\n      flex-grow: 999;\n      min-width: calc(".concat(contentMinWidth, " - ").concat(childGap, ");\n    }");
+}, function (_ref8) {
+  var fullHeight = _ref8.fullHeight;
   return fullHeight ? "min-height: 100%;" : "";
 });
 
@@ -12641,7 +12666,7 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
   var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem;");
   var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
-  var disabledStyles = "\n    background-clor: #6E727E;\n    border-clor: #6E727E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6E727E;\n      outline: none;\n    }\n  ";
+  var disabledStyles = "\n    background-clor: #6E727E;\n    border-color: #6E727E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6E727E;\n      outline: none;\n    }\n  ";
   return /*#__PURE__*/React__default.createElement(Box, {
     variant: variant,
     padding: themeValues.padding,
@@ -12653,7 +12678,7 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
     activeStyles: activeStyles,
     disabledStyles: disabledStyles,
     as: "button",
-    onClick: action,
+    onClick: !isLoading && action,
     borderRadius: "2px",
     theme: themeContext,
     extraStyles: isLoading ? loadingExtraStyles : extraStyles,
@@ -12936,29 +12961,17 @@ var AccountsIconSmall = function AccountsIconSmall(_ref) {
     width: "29",
     height: "27"
   })), /*#__PURE__*/React__default.createElement("g", {
-    id: "Random-Icon-Work",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Header/Desktop/Menu"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Header/Desktop/Menu/Accounts-Tab"
-  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", {
-    id: "Payments"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "folder-open"
-  }, /*#__PURE__*/React__default.createElement("mask", {
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("mask", {
     id: "mask-2-accountssmall",
     fill: "white"
   }, /*#__PURE__*/React__default.createElement("use", {
     xlinkHref: "#path-1-accountssmall"
-  })), /*#__PURE__*/React__default.createElement("g", {
-    id: "Mask"
-  }), /*#__PURE__*/React__default.createElement("path", {
+  })), /*#__PURE__*/React__default.createElement("g", null), /*#__PURE__*/React__default.createElement("path", {
     d: "M1.875,17.9609424 L4.30077547,13.8125148 C4.60546242,13.2968908 5.01561733,12.8867359 5.53124128,12.5820489 C6.04686523,12.277362 6.60936389,12.1250188 7.21873726,12.1250188 L7.21873726,12.1250188 L18.7499598,12.1250188 L18.7499598,10.4375228 C18.7499598,9.9687741 18.5858975,9.57033719 18.2577734,9.24221315 C17.9296494,8.91408911 17.5312125,8.75002682 17.0624638,8.75002682 L17.0624638,8.75002682 L11.4374772,8.75002682 L9.18748257,6.50003219 L3.56249598,6.50003219 C3.09374727,6.50003219 2.69531037,6.66409447 2.36718633,6.99221851 C2.03906229,7.32034255 1.875,7.71877946 1.875,8.18752816 L1.875,8.18752816 L1.875,17.9609424 Z M17.519494,20 C17.9179303,20 18.2929296,19.900391 18.6444913,19.7011726 C18.9960529,19.5019541 19.2655837,19.2265643 19.4530831,18.8750027 L19.4530831,18.8750027 L22.0194832,14.5156381 C22.1835455,14.2343887 22.1835455,13.9531394 22.0194832,13.6718901 C21.8554209,13.3906408 21.6093278,13.2500161 21.2812037,13.2500161 L21.2812037,13.2500161 L7.21873726,13.2500161 C6.82030089,13.2500161 6.4453016,13.3496251 6.09373994,13.5488435 C5.74217828,13.748062 5.47264749,14.0234517 5.28514812,14.3750134 L5.28514812,14.3750134 L2.71874799,18.734378 C2.5546857,19.0156273 2.5546857,19.2968767 2.71874799,19.578126 C2.88281028,19.8593753 3.12890344,20 3.45702748,20 L3.45702748,20 L17.519494,20 Z",
-    id: "f",
     fill: themeValues.singleIconColor,
     fillRule: "nonzero",
     mask: "url(#mask-2-accountssmall)"
@@ -13099,7 +13112,8 @@ var SettingsIconSmall = function SettingsIconSmall(_ref) {
 var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackValues$2, "primary");
 
 var ChevronIcon = function ChevronIcon(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+      iconFill = _ref.iconFill;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "24",
     height: "24",
@@ -13120,16 +13134,16 @@ var ChevronIcon = function ChevronIcon(_ref) {
   }, /*#__PURE__*/React__default.createElement("mask", {
     id: "icon-chevron-mask-2"
   }, /*#__PURE__*/React__default.createElement("use", {
-    fill: themeValues.singleIconColor,
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
     xlinkHref: "#icon-chevron-path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
-    fill: themeValues.singleIconColor,
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
     id: "icon-chevron-Fill-2",
     xlinkHref: "#icon-chevron-path-1"
   }), /*#__PURE__*/React__default.createElement("g", {
     id: "Colors/Blue-Dark",
     mask: "url(#icon-chevron-mask-2)",
-    fill: themeValues.singleIconColor
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor
   }, /*#__PURE__*/React__default.createElement("rect", {
     id: "icon-chevron-rect",
     width: "24",
@@ -13879,18 +13893,13 @@ var IconNeutral = function IconNeutral(_ref) {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     style: {
       margin: margin
-    }
+    },
+    "aria-label": "Neutral"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-neutral-group",
     fill: fill,
     fillRule: "nonzero",
     stroke: fill
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-neutral-Group-2"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-neutral-PasswordVerification-Empty"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    id: "icon-neutral-Oval",
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("circle", {
     cx: "9",
     cy: "9",
     r: "8.5"
@@ -13917,27 +13926,22 @@ var IconValid = function IconValid(_ref) {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     style: {
       margin: margin
-    }
+    },
+    "aria-label": "Valid"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-Authentication",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-00.1.0.1---HSS---Register---Already-Exists-Error",
     transform: "translate(-538.000000, -996.000000)"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-Password-Requirements",
     transform: "translate(457.000000, 938.000000)"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-Group-2",
     transform: "translate(81.000000, 20.000000)"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-PasswordVerification-Sucess",
     transform: "translate(0.000000, 38.000000)"
   }, /*#__PURE__*/React__default.createElement("circle", {
-    id: "icon-valid-Oval",
     stroke: bgFill,
     fill: bgFill,
     fillRule: "nonzero",
@@ -13945,13 +13949,10 @@ var IconValid = function IconValid(_ref) {
     cy: "9",
     r: "8.5"
   }), /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-valid-baseline-check-24px",
     transform: "translate(2.000000, 2.000000)"
   }, /*#__PURE__*/React__default.createElement("polygon", {
-    id: "icon-valid-Path",
     points: "0 0 14 0 14 14 0 14"
   }), /*#__PURE__*/React__default.createElement("polygon", {
-    id: "icon-valid-Path-2",
     fill: iconFill,
     points: "5.25 9.4325 2.8175 7 1.98916667 7.8225 5.25 11.0833333 12.25 4.08333333 11.4275 3.26083333"
   }))))))));
@@ -13977,40 +13978,33 @@ var IconInvalid = function IconInvalid(_ref) {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     style: {
       margin: margin
-    }
+    },
+    "aria-label": "Invalid"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-Authentication",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-00.1.0.1---HSS---Register---Already-Exists-Error",
     transform: "translate(-538.000000, -1064.000000)",
     fillRule: "nonzero"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-Password-Requirements",
     transform: "translate(457.000000, 938.000000)"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-Group-2",
     transform: "translate(81.000000, 20.000000)"
   }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-PasswordVerification-Error",
     transform: "translate(0.000000, 106.000000)"
   }, /*#__PURE__*/React__default.createElement("circle", {
-    id: "icon-invalid-Oval",
     stroke: bgFill,
     fill: bgFill,
     cx: "9",
     cy: "9",
     r: "8.5"
   }), /*#__PURE__*/React__default.createElement("g", {
-    id: "icon-invalid-Icon/Close",
     transform: "translate(2.000000, 2.000000)",
     fill: iconFill
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M7.58333333,7.58333333 L7.58333333,11.6666667 L6.41666667,11.6666667 L6.41666667,7.58333333 L2.33333333,7.58333333 L2.33333333,6.41666667 L6.41666667,6.41666667 L6.41666667,2.33333333 L7.58333333,2.33333333 L7.58333333,6.41666667 L11.6666667,6.41666667 L11.6666667,7.58333333 L7.58333333,7.58333333 Z",
-    id: "icon-invalid-x",
     transform: "translate(7.000000, 7.000000) rotate(45.000000) translate(-7.000000, -7.000000) "
   }))))))));
 };
@@ -14243,28 +14237,24 @@ var fallbackValues$4 = {
 var Alert = function Alert(_ref) {
   var heading = _ref.heading,
       text = _ref.text,
+      textOverride = _ref.textOverride,
       variant = _ref.variant,
       children = _ref.children,
       height = _ref.height,
       onLinkClick = _ref.onLinkClick,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? "0.5rem" : _ref$padding,
       _ref$showQuitLink = _ref.showQuitLink,
       showQuitLink = _ref$showQuitLink === void 0 ? true : _ref$showQuitLink,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      extraStyles = _ref.extraStyles,
+      maxContentWidth = _ref.maxContentWidth;
   var Icon = AlertIcons[variant];
-  return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.5rem",
-    width: "100%",
-    minHeight: "100px",
-    height: height ? height : "auto",
-    background: themeValues.background,
-    borderRadius: "4px",
-    borderColor: themeValues.border,
-    borderSize: "1px"
-  }, /*#__PURE__*/React__default.createElement(Sidebar, {
+  var content = /*#__PURE__*/React__default.createElement(Sidebar, {
     width: "24px",
     childGap: "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0.5rem 0 1rem",
+    padding: "0 0 0 1rem",
     minHeight: "100%"
   }, /*#__PURE__*/React__default.createElement(Cover, {
     minHeight: "100%",
@@ -14276,15 +14266,15 @@ var Alert = function Alert(_ref) {
   }, /*#__PURE__*/React__default.createElement(Icon, null)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(Sidebar, {
-    sidebarOnRight: true,
+    onRight: true,
     width: "24px",
     childGap: "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "1rem 1rem 1rem 0.5rem"
+    padding: "".concat(padding, " 1rem")
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+  }, textOverride ? textOverride : /*#__PURE__*/React__default.createElement(Stack, {
     fullHeight: true,
     childGap: "0.25rem"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -14301,7 +14291,20 @@ var Alert = function Alert(_ref) {
     padding: "0",
     minHeight: "100%",
     onClick: onLinkClick
-  }, /*#__PURE__*/React__default.createElement(IconQuit, null)))))));
+  }, /*#__PURE__*/React__default.createElement(IconQuit, null))))));
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: padding,
+    width: "100%",
+    minHeight: height && parseInt(height) < 100 ? height : "100px",
+    height: height ? height : "auto",
+    background: themeValues.background,
+    borderRadius: "4px",
+    borderColor: themeValues.border,
+    borderSize: "1px",
+    extraStyles: extraStyles
+  }, maxContentWidth ? /*#__PURE__*/React__default.createElement(Center, {
+    maxWidth: maxContentWidth
+  }, content) : content);
 };
 
 var Alert$1 = themeComponent(Alert, "Alert", fallbackValues$4, "info");
@@ -14647,8 +14650,8 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   var themeValues = createThemeValues(themeContext, fallbackValues$7, "Breadcrumb");
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    role: "region",
-    "aria-level": "Breadcrumb navigation"
+    as: "nav",
+    "aria-label": "Breadcrumb navigation"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
@@ -14659,6 +14662,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     return /*#__PURE__*/React__default.createElement(React.Fragment, {
       key: "breadcrumb-".concat(linkText)
     }, /*#__PURE__*/React__default.createElement(InternalLink, {
+      "aria-current": index === breadcrumbsList.length - 1 && "location",
       to: linkDestination,
       active: isActive.toString(),
       color: themeValues.color,
@@ -16505,6 +16509,7 @@ var Checkbox = function Checkbox(_ref4) {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
+    "aria-label": name,
     checked: checked,
     onChange: onChange,
     tabIndex: "-1"
@@ -16619,7 +16624,8 @@ var RadioButton = function RadioButton(_ref3) {
       name = _ref3.name;
   return /*#__PURE__*/React__default.createElement(RadioButtonBorder, {
     isSelected: isSelected,
-    name: name
+    name: name,
+    "aria-checked": isSelected
   }, isSelected && /*#__PURE__*/React__default.createElement(RadioButtonCenter, null));
 };
 
@@ -16665,6 +16671,8 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
       name = _ref.name,
       imageUrl = _ref.imageUrl,
       image = _ref.image,
+      _ref$imageAlt = _ref.imageAlt,
+      imageAlt = _ref$imageAlt === void 0 ? "checkbox icon" : _ref$imageAlt,
       disabled = _ref.disabled,
       borderColor = _ref.borderColor,
       color = _ref.color,
@@ -16688,6 +16696,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     id: "checkbox-".concat(name, "-").concat(index)
   }), /*#__PURE__*/React__default.createElement(CheckboxLabel, {
     name: name,
+    "aria-label": name,
     htmlFor: "checkbox-".concat(name, "-").concat(index),
     onClick: disabled ? noop : onSelect,
     onKeyDown: disabled ? noop : onSelect,
@@ -16707,7 +16716,8 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     justify: "flex-start",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(CheckboxItemIcon, {
-    src: imageUrl
+    src: imageUrl,
+    alt: imageAlt
   }))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0rem 0.5rem 0rem 0rem",
     hiddenStyles: !image
@@ -16804,7 +16814,7 @@ function _templateObject4$2() {
 }
 
 function _templateObject3$5() {
-  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  text-align: start;\n  border-size: 0px;\n  border-color: transparent;\n  box-shadow: none;\n  padding: 1rem;\n  box-sizing: border-box;\n  width: 100%;\n  cursor: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    background-color: ", ";\n    outline: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  text-align: start;\n  border-width: 0px;\n  border-color: transparent;\n  box-shadow: none;\n  padding: 1rem;\n  box-sizing: border-box;\n  width: 100%;\n  cursor: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    background-color: ", ";\n    outline: none;\n  }\n"]);
 
   _templateObject3$5 = function _templateObject3() {
     return data;
@@ -17009,7 +17019,7 @@ var Dropdown = function Dropdown(_ref7) {
     tabIndex: 0,
     padding: "0",
     width: "100%",
-    focusStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
+    hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     "aria-expanded": isOpen
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "button",
@@ -17017,7 +17027,6 @@ var Dropdown = function Dropdown(_ref7) {
     width: "100%",
     padding: "12px",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
-    focusStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
     borderRadius: "2px",
@@ -17027,6 +17036,7 @@ var Dropdown = function Dropdown(_ref7) {
     direction: "row",
     bottomItem: 2
   }, isOpen ? /*#__PURE__*/React__default.createElement(SearchInput, {
+    "aria-label": inputValue || "Dropdown awaiting search value",
     value: inputValue,
     onChange: noop,
     themeValues: themeValues
@@ -17039,7 +17049,7 @@ var Dropdown = function Dropdown(_ref7) {
   }, /*#__PURE__*/React__default.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
     open: isOpen,
     ref: dropdownRef,
-    tabIndex: -1
+    tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, filteredOptions.map(function (choice, i) {
@@ -18081,13 +18091,13 @@ var DisplayCard = function DisplayCard(_ref) {
     variant: "smallGhost",
     dataQa: buttonText,
     extraStyles: "min-width: 0;"
-  }) : /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+  }) : buttonAction ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: buttonText,
     action: buttonAction,
     variant: "smallGhost",
     dataQa: buttonText,
     extraStyles: "min-width: 0;"
-  }))))));
+  }) : /*#__PURE__*/React__default.createElement(React.Fragment, null))))));
 };
 
 var src = createCommonjsModule(function (module, exports) {
@@ -18512,7 +18522,8 @@ var InputField = styled__default.input(_templateObject$p(), function (_ref) {
 
 var FormattedInputField = styled__default(function (_ref7) {
   var showErrors = _ref7.showErrors,
-      props = _objectWithoutProperties(_ref7, ["showErrors"]);
+      themeValues = _ref7.themeValues,
+      props = _objectWithoutProperties(_ref7, ["showErrors", "themeValues"]);
 
   return /*#__PURE__*/React__default.createElement(src_1, props);
 })(_templateObject3$7(), function (_ref8) {
@@ -18571,10 +18582,12 @@ var FormInput = function FormInput(_ref13) {
     justify: "space-between",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    as: "label",
     color: themeValues.labelColor,
     variant: "pS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }"
+    extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
+    id: labelTextWhenNoError.replace(/\s+/g, "-")
   }, labelTextWhenNoError), /*#__PURE__*/React__default.createElement(Text$1, {
     color: themeValues.linkColor,
     variant: "pS",
@@ -18586,11 +18599,12 @@ var FormInput = function FormInput(_ref13) {
     justify: "space-between",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    as: "label",
     color: themeValues.labelColor,
     variant: "pS",
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
-    id: labelTextWhenNoError
+    id: labelTextWhenNoError.replace(/\s+/g, "-")
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.linkColor,
@@ -18610,7 +18624,7 @@ var FormInput = function FormInput(_ref13) {
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
-    "aria-labelledby": labelTextWhenNoError,
+    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     onChange: function onChange(e) {
       return fieldActions.set(e);
     },
@@ -18626,7 +18640,7 @@ var FormInput = function FormInput(_ref13) {
     customHeight: customHeight,
     extraStyles: extraStyles
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
-    "aria-labelledby": labelTextWhenNoError,
+    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     onChange: function onChange(e) {
       return fieldActions.set(e.target.value);
     },
@@ -18917,13 +18931,14 @@ var HamburgerButton = function HamburgerButton(_ref4) {
       inactiveColor = _ref4.inactiveColor,
       isActive = _ref4.isActive,
       _ref4$onClick = _ref4.onClick,
-      onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick;
+      onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick,
+      controls = _ref4.controls;
   return /*#__PURE__*/React__default.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
     onClick: onClick,
     type: "button",
-    ariaLabel: "Menu",
-    ariaControls: "navigation"
+    "aria-label": "Menu",
+    "aria-controls": controls
   }, /*#__PURE__*/React__default.createElement(HamburgerBox, null, /*#__PURE__*/React__default.createElement(HamburgerInner, {
     className: isActive === true ? "active" : "",
     inactiveColor: inactiveColor,
@@ -19732,6 +19747,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
     animate: radioOn ? radioFocused ? "onFocused" : "on" : radioFocused ? "offFocused" : "off"
   }, /*#__PURE__*/React__default.createElement(HiddenRadioButton, {
     id: "#radio-".concat(name),
+    "aria-label": name,
     disabled: disabled,
     onClick: toggleRadio,
     tabIndex: "-1"
@@ -30537,6 +30553,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     extraStyles: "display: flex; align-items: center;",
     dataQa: dataQa
   }, /*#__PURE__*/React__default.createElement(HiddenToggleSwitchBox, {
+    "aria-label": name,
     checked: isOn,
     onChange: disabled ? noop : onToggle,
     disabled: disabled,
@@ -32618,29 +32635,31 @@ var EditableList = function EditableList(_ref) {
     padding: "0",
     borderRadius: "4px",
     extraStyles: "box-shadow: 0px 2px 14px 0px rgb(246, 246, 249),\n    0px 3px 8px 0px rgb(202, 206, 216);"
-  }, items.map(function (props) {
+  }, items.map(function (item) {
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
         modalOpen = _useState2[0],
         toggleModal = _useState2[1];
 
     return /*#__PURE__*/React__default.createElement(EditableListItem, {
-      listItemSize: !!props.id && props.id === autoPayMethod ? "big" : listItemSize,
-      key: props.id
+      listItemSize: !!item.id && item.id === autoPayMethod ? "big" : listItemSize,
+      key: item.id || item
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: CHARADE_GREY
-    }, renderItem(props)), /*#__PURE__*/React__default.createElement(EditableListItemControls, null, props.isPrimary && /*#__PURE__*/React__default.createElement(Text$1, {
+    }, renderItem(item)), /*#__PURE__*/React__default.createElement(EditableListItemControls, null, item.isPrimary && /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: STORM_GREY,
-      extraStyles: "font-style: italic;"
+      extraStyles: "font-style: italic;",
+      key: "Default ".concat(itemName)
     }, "Default ", itemName), canRemove && /*#__PURE__*/React__default.createElement(Box, {
       padding: "0 0.5rem",
       border: "2px solid transparent",
       extraStyles: ":not(:first-child) { border-left: 2px solid ".concat(BOSTON_BLUE, ";}"),
-      dataQa: qaPrefix + " Remove"
+      dataQa: qaPrefix + " Remove",
+      key: "Remove ".concat(item.id)
     }, useModal ? /*#__PURE__*/React__default.createElement(Modal, _extends({
-      item: _objectSpread2({}, props)
+      item: _objectSpread2({}, item)
     }, modalProps, {
       modalOpen: modalOpen,
       toggleModal: toggleModal
@@ -32648,19 +32667,20 @@ var EditableList = function EditableList(_ref) {
       variant: "smallGhost",
       text: "Remove",
       action: function action() {
-        return removeItem(props.id);
+        return removeItem(item.id);
       },
       extraStyles: "min-width: 0;"
     })), canEdit && /*#__PURE__*/React__default.createElement(Box, {
       padding: "0 0.5rem",
       border: "2px solid transparent",
       extraStyles: ":not(:first-child) { border-left: 2px solid ".concat(BOSTON_BLUE, ";}"),
-      dataQa: qaPrefix + " Edit"
+      dataQa: qaPrefix + " Edit",
+      key: "Edit ".concat(item.id)
     }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
       variant: "smallGhost",
       text: "Edit",
       action: function action() {
-        return editItem(props.id);
+        return editItem(item.id);
       },
       extraStyles: "min-width: 0;"
     }))));
@@ -34448,7 +34468,8 @@ var fallbackValues$s = {
 };
 
 var NavMenuDesktop = function NavMenuDesktop(_ref) {
-  var _ref$top = _ref.top,
+  var id = _ref.id,
+      _ref$top = _ref.top,
       top = _ref$top === void 0 ? "125%" : _ref$top,
       _ref$left = _ref.left,
       left = _ref$left === void 0 ? "-100%" : _ref$left,
@@ -34463,6 +34484,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
       themeValues = _ref.themeValues;
   var menuCarat = "&:after { bottom: 100%; right: 10px; border: solid transparent; content: \" \"; height: 0; width: 0; position: absolute; pointer-events: none; border-color: ".concat(themeValues.backgroundColor, "00; border-bottom-color: ").concat(themeValues.backgroundColor, "; border-width: 10px; margin-left: -10px; }");
   return /*#__PURE__*/React__default.createElement(Imposter, {
+    id: id,
     breakout: true,
     top: top,
     left: left,
@@ -34525,12 +34547,14 @@ var menu = posed.div({
 var ImposterMenu = styled__default(menu)(_templateObject$y());
 
 var NavMenuMobile = function NavMenuMobile(_ref) {
-  var _ref$menuContent = _ref.menuContent,
+  var id = _ref.id,
+      _ref$menuContent = _ref.menuContent,
       menuContent = _ref$menuContent === void 0 ? [] : _ref$menuContent,
       _ref$visible = _ref.visible,
       visible = _ref$visible === void 0 ? false : _ref$visible,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(ImposterMenu, {
+    id: id,
     initialPose: "invisible",
     pose: visible ? "visible" : "invisible"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -36203,9 +36227,6 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     justify: "space-between",
     align: "center",
     nowrap: true
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    width: "100%"
   }, /*#__PURE__*/React__default.createElement(AmountModule, {
     totalAmountDue: obligations.reduce(function (acc, curr) {
       return acc + curr.amountDue;
@@ -36215,19 +36236,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     navigateToSettings: navigateToSettings,
     autoPaySchedule: autoPaySchedule
-  })), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    width: "100%"
-  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    isLoading: isLoading,
-    action: function action() {
-      return handleClick(obligations);
-    },
-    text: "Pay Now",
-    variant: isMobile ? "smallSecondary" : "secondary",
-    dataQa: "Pay Now",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
-  })))), /*#__PURE__*/React__default.createElement(Box, {
+  }))), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: isMobile ? "center" : "flex-end",
@@ -36275,7 +36284,19 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
     extraStyles: isMobile && "flex-grow: 1; width: 100%;"
-  })))));
+  }))), isMobile && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "8px 0 0",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    isLoading: isLoading,
+    action: function action() {
+      return handleClick(obligations);
+    },
+    text: "Pay Now",
+    variant: isMobile ? "smallSecondary" : "secondary",
+    dataQa: "Pay Now",
+    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+  }))));
 };
 
 var Obligation = function Obligation(_ref) {
@@ -36313,7 +36334,7 @@ var Obligation = function Obligation(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(IconsModule, {
+  }, !isMobile && /*#__PURE__*/React__default.createElement(IconsModule, {
     icon: config.icon,
     iconDefault: config.iconDefault,
     configIconMap: config.iconMap,
@@ -36452,6 +36473,132 @@ 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,
+      arrowColor = _ref.arrowColor,
+      numberColor = _ref.numberColor;
+  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        background-color: ".concat(numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE, ";\n        border-color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE, "\n      ")
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: type === "prev" && "transform: scaleX(-1)"
+  }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, {
+    variant: "darkMode",
+    iconFill: arrowColor
+  }))));
+};
+
+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,
+      numberColor = _ref2.numberColor,
+      arrowColor = _ref2.arrowColor;
+  return /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center",
+    childGap: "10px"
+  }, currentPage > 1 && /*#__PURE__*/React__default.createElement(PrevNextButton, {
+    type: "prev",
+    action: pagePrevious,
+    arrowColor: arrowColor,
+    numberColor: numberColor
+  }), getPagesPanel(currentPage, pageCount).map(function (item, index) {
+    return item.isButton ? /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0",
+      border: item.active && "1px solid ".concat(numberColor !== null && numberColor !== void 0 ? numberColor : 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              > * > span {\n                color: ".concat(numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE, "\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: numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE
+    }, "...")));
+  }), currentPage < pageCount && /*#__PURE__*/React__default.createElement(PrevNextButton, {
+    type: "next",
+    action: pageNext,
+    arrowColor: arrowColor,
+    numberColor: numberColor
+  }));
+};
+
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$forwardButtonTex = _ref.forwardButtonText,
       forwardButtonText = _ref$forwardButtonTex === void 0 ? "Next" : _ref$forwardButtonTex,
@@ -37281,10 +37428,10 @@ var RadioSection = function RadioSection(_ref) {
     }, /*#__PURE__*/React__default.createElement(Box, {
       padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem 1.25rem 1.25rem",
       background: section.disabled ? themeValues.headingDisabledColor : themeValues.headingBackgroundColor,
-      onClick: isMobile && supportsTouch ? noop : function () {
+      onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
       },
-      onTouchEnd: isMobile && supportsTouch ? function () {
+      onTouchEnd: isMobile && supportsTouch || !section.disabled ? function () {
         return toggleOpenSection(section.id);
       } : noop,
       key: "header-".concat(section.id),
@@ -37308,7 +37455,7 @@ var RadioSection = function RadioSection(_ref) {
       name: section.id,
       radioOn: openSection === section.id,
       radioFocused: focused === section.id,
-      toggleRadio: function toggleRadio() {
+      toggleRadio: section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1"
@@ -38292,6 +38439,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;