@thecb/components 10.4.6-beta.7 → 10.4.7-beta.1

package/dist/index.esm.js

@@ -38763,17 +38763,17 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
 };
 
 var onBackground = "".concat(MATISSE_BLUE);
-var disabledBackground = "".concat(IRON_GREY);
+var disabledBackground = "".concat(MANATEE_GREY);
+var disabledBackgroundLight = "".concat(ATHENS_GREY);
 var white = "".concat(WHITE);
-var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
 var fallbackValues$y = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
+  disabledBackgroundLight: disabledBackgroundLight,
   white: white,
-  offBackground: offBackground,
   rightLabelStyles: rightLabelStyles,
   leftLabelStyles: leftLabelStyles
 };
@@ -38791,7 +38791,7 @@ var HiddenToggleSwitchBox = styled.input.withConfig({
 var VisibleSwitchComponent = styled.label.withConfig({
   displayName: "ToggleSwitch__VisibleSwitchComponent",
   componentId: "sc-1t51u6v-1"
-})(["width:48px;height:24px;border-radius:48px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}", ""], function (_ref3) {
+})(["width:44px;height:24px;border-radius:12px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}", ""], function (_ref3) {
   var disabled = _ref3.disabled;
   return disabled ? "auto" : "pointer";
 }, function (_ref4) {
@@ -38801,14 +38801,10 @@ var VisibleSwitchComponent = styled.label.withConfig({
   var isMobile = _ref5.isMobile;
   return isMobile ? "transform: scale(0.75)" : "";
 });
-var ToggleSwitchMiddleRingComponent = styled.div.withConfig({
-  displayName: "ToggleSwitch__ToggleSwitchMiddleRingComponent",
+var ToggleSwitchRingComponent = styled.div.withConfig({
+  displayName: "ToggleSwitch__ToggleSwitchRingComponent",
   componentId: "sc-1t51u6v-2"
-})(["position:absolute;width:20px;height:20px;border:none;border-radius:50%;box-sizing:border-box;"]);
-var ToggleSwitchInnerRingComponent = styled.div.withConfig({
-  displayName: "ToggleSwitch__ToggleSwitchInnerRingComponent",
-  componentId: "sc-1t51u6v-3"
-})(["position:absolute;width:14px;height:14px;top:3px;left:3px;right:3px;bottom:3px;border-radius:50%;box-sizing:border-box;"]);
+})(["position:absolute;width:16px;height:16px;border:none;border-radius:50%;box-sizing:border-box;"]);
 var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
     isOn = _ref6$isOn === void 0 ? false : _ref6$isOn,
@@ -38825,52 +38821,30 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     themeValues = _ref6.themeValues,
     isMobile = _ref6.isMobile,
     dataQa = _ref6.dataQa;
-  var ToggleSwitchInnerRing = posed(ToggleSwitchInnerRingComponent)({
+  var ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
     off: {
-      backgroundColor: themeValues.offBackground,
-      transition: {
-        ease: "easeOut"
-      }
-    },
-    on: {
-      backgroundColor: themeValues.onBackground,
-      transition: {
-        ease: "easeIn"
-      }
-    },
-    disabled: {
-      backgroundColor: themeValues.disabledBackground
-    }
-  });
-  var ToggleSwitchMiddleRing = posed(ToggleSwitchMiddleRingComponent)({
-    off: {
-      backgroundColor: themeValues.white,
-      left: "2px",
-      top: "2px",
-      bottom: "2px",
-      right: "24px",
+      backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
+      left: "4px",
+      top: "3px",
+      bottom: "3px",
+      right: "20px",
       transition: {
         ease: "backIn"
       }
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "1px",
-      top: "2px",
-      bottom: "2px",
-      left: "25px",
+      right: "8px",
+      top: "3px",
+      bottom: "4px",
+      left: "23px",
       transition: {
         ease: "backIn"
       }
-    },
-    disabled: {
-      backgroundColor: themeValues.white,
-      left: "2px",
-      top: "2px",
-      bottom: "2px",
-      right: "24px"
     }
   });
+
+  // to do: for disabled, background color should not be white (should be lighter disabled background)
   var VisibleSwitch = posed(VisibleSwitchComponent)({
     focusable: true,
     hoverable: true,
@@ -38883,19 +38857,20 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
       boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
     },
     off: {
-      backgroundColor: themeValues.offBackground,
+      border: "1px solid",
+      backgroundColor: disabled ? themeValues.disabledBackgroundLight : themeValues.white,
+      borderColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
       transition: {
         ease: "easeOut"
       }
     },
     on: {
-      backgroundColor: themeValues.onBackground,
+      border: "1px solid",
+      backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
+      borderColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
       transition: {
         ease: "easeIn"
       }
-    },
-    disabled: {
-      backgroundColor: themeValues.disabledBackground
     }
   });
   var handleKeyDown = function handleKeyDown(e) {
@@ -38930,11 +38905,11 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     htmlFor: "#toggle-".concat(name),
     onClick: disabled ? noop : onToggle,
     onKeyDown: disabled ? noop : handleKeyDown,
-    pose: disabled ? "disabled" : isOn ? "on" : "off",
+    pose: isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
     isMobile: isMobile
-  }, /*#__PURE__*/React.createElement(ToggleSwitchMiddleRing, null, /*#__PURE__*/React.createElement(ToggleSwitchInnerRing, null))))), label && /*#__PURE__*/React.createElement(Heading$1, {
+  }, /*#__PURE__*/React.createElement(ToggleSwitchRing, null)))), label && /*#__PURE__*/React.createElement(Heading$1, {
     variant: "h4",
     weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "margin: 0 0.5rem; position: relative; bottom: 1px; display: inline-block;",
@@ -39224,190 +39199,6 @@ var LoadingLine = function LoadingLine(_ref) {
   });
 };
 
-var backgroundColor$6 = {
-  primary: WHITE
-};
-var boxShadow$1 = {
-  primary: "box-shadow: 0px 1px 2px 0px #292A331A;\n    box-shadow: 0px 2px 6px 0px #292a3333; box-shadow: 0px 1px 0px 0px #292A331A inset;"
-};
-var fallbackValues$C = {
-  backgroundColor: backgroundColor$6,
-  boxShadow: boxShadow$1
-};
-
-var fontSize$9 = {
-  "default": "1.375rem",
-  largeTitle: "1.75rem",
-  small: "1.25rem"
-};
-var fontWeight$5 = {
-  "default": "600",
-  largeTitle: "700",
-  small: "600"
-};
-var fontColor = {
-  "default": CHARADE_GREY,
-  largeTitle: CHARADE_GREY,
-  small: CHARADE_GREY
-};
-var lineHeight$3 = {
-  "default": "2rem",
-  largeTitle: "2rem",
-  small: "2rem"
-};
-var textAlign = {
-  "default": "left",
-  largeTitle: "left",
-  small: "left"
-};
-var titleType = {
-  "default": "h5",
-  largeTitle: "h1",
-  small: "h6"
-};
-var titleSpacing = {
-  "default": "0.5rem",
-  largeTitle: "1.125rem",
-  small: "0.5rem"
-};
-var boxShadow$2 = {
-  "default": "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-  largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-  small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
-};
-var borderRadius = {
-  "default": "0.25rem",
-  largeTitle: "0.25rem",
-  small: "0.25rem"
-};
-var backgroundColor$7 = {
-  "default": WHITE,
-  largeTitle: WHITE,
-  small: WHITE
-};
-var fallbackValues$D = {
-  fontSize: fontSize$9,
-  fontWeight: fontWeight$5,
-  fontColor: fontColor,
-  lineHeight: lineHeight$3,
-  textAlign: textAlign,
-  titleType: titleType,
-  titleSpacing: titleSpacing,
-  boxShadow: boxShadow$2,
-  borderRadius: borderRadius,
-  backgroundColor: backgroundColor$7
-};
-
-/*
-  New (01/22) - updated <Module /> to use <Title /> atom
-  Because <Title /> decouples size from element, also gave <Module />
-  two new props: "as" and "fontSize"
-
-  When present, <Module /> will use those values to dictate element type and font size.
-
-  For backwards compatability, <Module /> still computes a themed font size and element type based on old
-  <Heading /> variants. If "fontSize" or "as" is undefined, <Module /> will use themed values.
-*/
-
-var Module = function Module(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "default" : _ref$variant,
-    as = _ref.as,
-    disabled = _ref.disabled,
-    heading = _ref.heading,
-    rightTitleContent = _ref.rightTitleContent,
-    _ref$titleID = _ref.titleID,
-    titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
-    _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$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? "0" : _ref$margin,
-    _ref$spacingBottom = _ref.spacingBottom,
-    spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
-    fontSize = _ref.fontSize,
-    themeValues = _ref.themeValues,
-    children = _ref.children;
-  var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
-  var computedFontSize = fontSize || themedFontSize;
-  var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
-  var computedElemType = as || themedElemType;
-  var disabledStyles = "opacity: 0.40;";
-  var headingText = /*#__PURE__*/React.createElement(Title$1, {
-    weight: themeValues.fontWeight,
-    color: themeValues.fontColor,
-    margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
-    textAlign: themeValues.textAlign,
-    as: computedElemType,
-    extraStyles: "font-size: ".concat(computedFontSize, ";"),
-    id: titleID
-  }, heading);
-  return /*#__PURE__*/React.createElement(Box, {
-    "aria-disabled": disabled,
-    extraStyles: disabled && disabledStyles,
-    padding: "0",
-    role: "group"
-  }, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React.createElement(Cluster, {
-    justify: "space-between",
-    align: "center",
-    nowrap: true
-  }, headingText, rightTitleContent), /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 ".concat(spacingBottom),
-    extraStyles: "margin: ".concat(margin)
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: padding,
-    background: themeValues.backgroundColor,
-    borderRadius: themeValues.borderRadius,
-    boxShadow: themeValues.boxShadow
-  }, children)));
-};
-var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$D, "default"));
-
-var WalletName = function WalletName(_ref) {
-  var personName = _ref.personName,
-    _ref$action = _ref.action,
-    action = _ref$action === void 0 ? noop : _ref$action,
-    _ref$text = _ref.text,
-    text = _ref$text === void 0 ? "Not you?" : _ref$text,
-    _ref$actionText = _ref.actionText,
-    actionText = _ref$actionText === void 0 ? "Check out as a guest" : _ref$actionText,
-    themeValues = _ref.themeValues;
-  var themeContext = useContext(ThemeContext);
-  var isMobile = themeContext.isMobile;
-  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Module$1, {
-    spacingBottom: isMobile ? "0" : "1.5rem"
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: "24px",
-    boxShadow: themeValues.boxShadow,
-    spacingBottom: "0",
-    margin: "0 0 0 0",
-    extraStyles: isMobile ? "display: flex; flex-direction: column; flex-wrap: wrap;  span {text - align: right;}" : "display: flex; justify-content: space-between; align-items: center;"
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 0"
-  }, /*#__PURE__*/React.createElement(Text$1, null, personName)), !isMobile && /*#__PURE__*/React.createElement(Box, {
-    padding: "0"
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    extraStyles: "font-size: 12px"
-  }, text), /*#__PURE__*/React.createElement(ButtonWithAction, {
-    text: actionText,
-    action: action,
-    variant: "smallGhost",
-    extraStyles: "span {font-size: 12px;}"
-  })))), isMobile && /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 24px",
-    extraStyles: "display: flex; align-items: center; justify-content: flex-end;"
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    extraStyles: "font-size: 12px"
-  }, text), /*#__PURE__*/React.createElement(ButtonWithAction, {
-    text: actionText,
-    action: action,
-    variant: "smallGhost",
-    extraStyles: "span {font-size: 12px;}"
-  })));
-};
-var WalletName$1 = themeComponent(WalletName, "WalletName", fallbackValues$C, "primary");
-
 var Table_styled = styled.table.withConfig({
   displayName: "Tablestyled",
   componentId: "sc-mveye7-0"
@@ -39444,10 +39235,10 @@ var TableCell_styled = styled.td.withConfig({
   return extraStyles;
 });
 
-var backgroundColor$8 = ALABASTER_WHITE;
+var backgroundColor$6 = ALABASTER_WHITE;
 var borderColor$3 = GREY_CHATEAU;
-var fallbackValues$E = {
-  backgroundColor: backgroundColor$8,
+var fallbackValues$C = {
+  backgroundColor: backgroundColor$6,
   borderColor: borderColor$3
 };
 
@@ -39468,7 +39259,7 @@ var StyledTableHead = styled.thead.withConfig({
 
 var borderColor$4 = GREY_CHATEAU;
 var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
-var fallbackValues$F = {
+var fallbackValues$D = {
   borderColor: borderColor$4,
   hoverBackgroundColor: hoverBackgroundColor$1
 };
@@ -39507,7 +39298,7 @@ var TableRow = function TableRow(_ref) {
     hoverBackgroundColor: themeValues.hoverBackgroundColor
   }, props), children);
 };
-var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$F);
+var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$D);
 
 var TableHead = function TableHead(_ref) {
   var children = _ref.children,
@@ -39522,7 +39313,7 @@ var TableHead = function TableHead(_ref) {
     hoverEffect: false
   }, children));
 };
-var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$E);
+var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$C);
 
 var TableHeading_styled = styled.th.withConfig({
   displayName: "TableHeadingstyled",
@@ -40348,9 +40139,9 @@ AddressForm.reducer = reducer;
 AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
-var backgroundColor$9 = "#ebeffb";
-var fallbackValues$G = {
-  backgroundColor: backgroundColor$9
+var backgroundColor$7 = "#ebeffb";
+var fallbackValues$E = {
+  backgroundColor: backgroundColor$7
 };
 
 var Banner = function Banner(_ref) {
@@ -40398,7 +40189,7 @@ var Banner = function Banner(_ref) {
     extraStyles: isMobile && "> svg { width: 176px; }"
   }, /*#__PURE__*/React.createElement(Image, null))));
 };
-var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$G);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$E);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -40532,7 +40323,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor$1 = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$H = {
+var fallbackValues$F = {
   titleColor: titleColor$1,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -40657,7 +40448,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     "aria-labelledby": "".concat(id, "-button")
   }, children))));
 };
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$H);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$F);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -41233,7 +41024,7 @@ EmailForm.mapDispatchToProps = mapDispatchToProps$3;
 
 var footerBackgroundColor = BRIGHT_GREY;
 var subfooterBackgroundColor = STORM_GREY;
-var fallbackValues$I = {
+var fallbackValues$G = {
   footerBackgroundColor: footerBackgroundColor,
   subfooterBackgroundColor: subfooterBackgroundColor
 };
@@ -41264,7 +41055,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
     rightContent: rightSubfooterContent
   }));
 };
-var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$I);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$G);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var fields = _ref.fields,
@@ -41310,10 +41101,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
-var backgroundColor$a = "#182848";
-var fallbackValues$J = {
+var backgroundColor$8 = "#182848";
+var fallbackValues$H = {
   textColor: textColor$4,
-  backgroundColor: backgroundColor$a
+  backgroundColor: backgroundColor$8
 };
 
 // this component needs some fix'n
@@ -41370,7 +41161,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     }, t));
   }), repeat( /*#__PURE__*/React.createElement(Box, null), boxesAfter))));
 };
-var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$J);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$H);
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -42835,7 +42626,7 @@ var disabledColor$1 = {
 var activeBackgroundColor$1 = {
   primary: CORNFLOWER_BLUE
 };
-var backgroundColor$b = {
+var backgroundColor$9 = {
   primary: LINK_WATER
 };
 var borderColor$5 = {
@@ -42844,12 +42635,12 @@ var borderColor$5 = {
 var color$b = {
   primary: ROYAL_BLUE_VIVID
 };
-var fallbackValues$K = {
+var fallbackValues$I = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
   disabledColor: disabledColor$1,
   activeBackgroundColor: activeBackgroundColor$1,
-  backgroundColor: backgroundColor$b,
+  backgroundColor: backgroundColor$9,
   borderColor: borderColor$5,
   color: color$b
 };
@@ -42965,7 +42756,7 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "margin-right: auto;"
   }), showRight && !!rightContent && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$K, "primary");
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -46604,7 +46395,136 @@ var Modal$1 = function Modal(_ref) {
   }))))))))), children);
 };
 
-var backgroundColor$c = {
+var fontSize$9 = {
+  "default": "1.375rem",
+  largeTitle: "1.75rem",
+  small: "1.25rem"
+};
+var fontWeight$5 = {
+  "default": "600",
+  largeTitle: "700",
+  small: "600"
+};
+var fontColor = {
+  "default": CHARADE_GREY,
+  largeTitle: CHARADE_GREY,
+  small: CHARADE_GREY
+};
+var lineHeight$3 = {
+  "default": "2rem",
+  largeTitle: "2rem",
+  small: "2rem"
+};
+var textAlign = {
+  "default": "left",
+  largeTitle: "left",
+  small: "left"
+};
+var titleType = {
+  "default": "h5",
+  largeTitle: "h1",
+  small: "h6"
+};
+var titleSpacing = {
+  "default": "0.5rem",
+  largeTitle: "1.125rem",
+  small: "0.5rem"
+};
+var boxShadow$1 = {
+  "default": "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+  largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+  small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+};
+var borderRadius = {
+  "default": "0.25rem",
+  largeTitle: "0.25rem",
+  small: "0.25rem"
+};
+var backgroundColor$a = {
+  "default": WHITE,
+  largeTitle: WHITE,
+  small: WHITE
+};
+var fallbackValues$J = {
+  fontSize: fontSize$9,
+  fontWeight: fontWeight$5,
+  fontColor: fontColor,
+  lineHeight: lineHeight$3,
+  textAlign: textAlign,
+  titleType: titleType,
+  titleSpacing: titleSpacing,
+  boxShadow: boxShadow$1,
+  borderRadius: borderRadius,
+  backgroundColor: backgroundColor$a
+};
+
+/*
+  New (01/22) - updated <Module /> to use <Title /> atom
+  Because <Title /> decouples size from element, also gave <Module />
+  two new props: "as" and "fontSize"
+
+  When present, <Module /> will use those values to dictate element type and font size.
+
+  For backwards compatability, <Module /> still computes a themed font size and element type based on old
+  <Heading /> variants. If "fontSize" or "as" is undefined, <Module /> will use themed values.
+*/
+
+var Module = function Module(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "default" : _ref$variant,
+    as = _ref.as,
+    disabled = _ref.disabled,
+    heading = _ref.heading,
+    rightTitleContent = _ref.rightTitleContent,
+    _ref$titleID = _ref.titleID,
+    titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
+    _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$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? "0" : _ref$margin,
+    _ref$spacingBottom = _ref.spacingBottom,
+    spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
+    fontSize = _ref.fontSize,
+    themeValues = _ref.themeValues,
+    children = _ref.children;
+  var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
+  var computedFontSize = fontSize || themedFontSize;
+  var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
+  var computedElemType = as || themedElemType;
+  var disabledStyles = "opacity: 0.40;";
+  var headingText = /*#__PURE__*/React.createElement(Title$1, {
+    weight: themeValues.fontWeight,
+    color: themeValues.fontColor,
+    margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
+    textAlign: themeValues.textAlign,
+    as: computedElemType,
+    extraStyles: "font-size: ".concat(computedFontSize, ";"),
+    id: titleID
+  }, heading);
+  return /*#__PURE__*/React.createElement(Box, {
+    "aria-disabled": disabled,
+    extraStyles: disabled && disabledStyles,
+    padding: "0",
+    role: "group"
+  }, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    nowrap: true
+  }, headingText, rightTitleContent), /*#__PURE__*/React.createElement(Box, {
+    padding: "0 0 ".concat(spacingBottom),
+    extraStyles: "margin: ".concat(margin)
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: padding,
+    background: themeValues.backgroundColor,
+    borderRadius: themeValues.borderRadius,
+    boxShadow: themeValues.boxShadow
+  }, children)));
+};
+var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$J, "default"));
+
+var backgroundColor$b = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -46612,8 +46532,8 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$L = {
-  backgroundColor: backgroundColor$c,
+var fallbackValues$K = {
+  backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
 
@@ -46652,7 +46572,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
     onBlur: onBlur
   }, menuContent));
 };
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$L, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$K, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -46712,7 +46632,7 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
     background: themeValues.backgroundColor
   }, menuContent));
 };
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$L, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$K, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -46766,7 +46686,7 @@ var activeColor$8 = "#0E506D";
 var linkColor$4 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
-var fallbackValues$M = {
+var fallbackValues$L = {
   color: color$c,
   hoverColor: hoverColor$5,
   activeColor: activeColor$8,
@@ -46892,7 +46812,7 @@ var AutopayModal = function AutopayModal(_ref) {
     modalOpen: modalOpen
   }, modalExtraProps), renderAutoPayControl());
 };
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$M);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$L);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -47582,7 +47502,7 @@ var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$2 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
-var fallbackValues$N = {
+var fallbackValues$M = {
   activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
@@ -47776,7 +47696,7 @@ var Pagination = function Pagination(_ref3) {
     buttonWidth: buttonWidth
   }));
 };
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$N);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$M);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -47857,7 +47777,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, !hideBackButton && /*#__PURE__*/React.createElement(Fragment$1, null, backButton), !hideForwardButton && /*#__PURE__*/React.createElement(Fragment$1, null, forwardButton), !hideAdditionalButton && /*#__PURE__*/React.createElement(Fragment$1, null, additionalButton))));
 };
 
-var backgroundColor$d = {
+var backgroundColor$c = {
   "default": "transparent",
   small: "transparent"
 };
@@ -47873,8 +47793,8 @@ var labeledAmountTotal = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$O = {
-  backgroundColor: backgroundColor$d,
+var fallbackValues$N = {
+  backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -48244,7 +48164,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isError: isError
   });
 };
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$O, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$N, "default");
 
 var linkColor$5 = {
   "default": "#3176AA"
@@ -48264,7 +48184,7 @@ var modalLinkHoverFocus$1 = {
 var linkTextDecoration = {
   "default": LINK_TEXT_DECORATION
 };
-var fallbackValues$P = {
+var fallbackValues$O = {
   linkColor: linkColor$5,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -48328,9 +48248,9 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     }, link)
   }));
 };
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$P, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$O, "default");
 
-var backgroundColor$e = {
+var backgroundColor$d = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -48363,8 +48283,8 @@ var modalLinkTextDecoration = {
   "default": LINK_TEXT_DECORATION,
   footer: "none"
 };
-var fallbackValues$Q = {
-  backgroundColor: backgroundColor$e,
+var fallbackValues$P = {
+  backgroundColor: backgroundColor$d,
   linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
@@ -48435,7 +48355,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     className: "modal-trigger"
   }, link));
 };
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$Q, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$P, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -49198,7 +49118,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GHOST_GREY);
 var focusStyles = "outline: none;";
-var fallbackValues$R = {
+var fallbackValues$Q = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49500,7 +49420,7 @@ var RadioSection = function RadioSection(_ref) {
     });
   })));
 };
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$R);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$Q);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,
@@ -49782,7 +49702,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$S = {
+var fallbackValues$R = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49850,12 +49770,12 @@ var Tabs = function Tabs(_ref) {
     }, tab.content);
   }))));
 };
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$S);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$R);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$T = {
+var fallbackValues$S = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49910,7 +49830,7 @@ var TabSidebar = function TabSidebar(_ref) {
     }, text)))));
   })));
 };
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$T);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$S);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49995,7 +49915,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$U = {
+var fallbackValues$T = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -50040,7 +49960,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
     src: welcomeImage
   })))));
 };
-var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$U));
+var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$T));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -50100,7 +50020,7 @@ var menuItemColorDelete = RAZZMATAZZ_RED;
 var menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
 var menuItemHoverBackgroundColorDelete = BLUSH_RED;
 var menuItemHoverColor = ROYAL_BLUE_VIVID;
-var fallbackValues$V = {
+var fallbackValues$U = {
   menuItemBackgroundColor: menuItemBackgroundColor,
   menuItemColor: menuItemColor,
   menuItemColorDelete: menuItemColorDelete,
@@ -50167,17 +50087,17 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     extraStyles: textExtraStyles
   }, text)));
 };
-var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$V);
+var PopupMenuItem$1 = themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues$U);
 
 var hoverColor$6 = "#116285";
 var activeColor$a = "#0E506D";
 var menuTriggerColor = "#15749D";
-var backgroundColor$f = "white";
-var fallbackValues$W = {
+var backgroundColor$e = "white";
+var fallbackValues$V = {
   hoverColor: hoverColor$6,
   activeColor: activeColor$a,
   menuTriggerColor: menuTriggerColor,
-  backgroundColor: backgroundColor$f
+  backgroundColor: backgroundColor$e
 };
 
 var PopupMenuContainer = styled(Box).withConfig({
@@ -50309,10 +50229,10 @@ var PopupMenu = function PopupMenu(_ref) {
     }, item));
   })));
 };
-var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$W);
+var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$V);
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$X = {
+var fallbackValues$W = {
   pageBackground: pageBackground
 };
 
@@ -50360,7 +50280,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$X));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$W));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -50403,7 +50323,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$X));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$W));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -50449,7 +50369,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$X));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$W));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -50502,7 +50422,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$X));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$W));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -50572,7 +50492,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$X));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$W));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -50604,5 +50524,5 @@ var index$6 = /*#__PURE__*/Object.freeze({
   useToastNotification: useToastNotification
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, MultiCartIcon, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName$1 as WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, MultiCartIcon, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map