@thecb/components 9.2.0-beta.0 → 9.2.0-beta.2

package/dist/index.d.ts

@@ -1062,6 +1062,12 @@ interface RadioGroupProps {
 declare const RadioGroup: React.FC<Expand<RadioGroupProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface ToastNotificationProps {
+}
+
+declare const ToastNotification: React.FC<Expand<ToastNotificationProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface DefaultPageTemplateProps {
   content: JSX.Element;
   header?: JSX.Element;
@@ -1076,5 +1082,5 @@ interface DefaultPageTemplateProps {
 declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants };
+export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ToastNotification, ToastNotificationProps, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -4953,7 +4953,7 @@ to the one generated by name-that-color.
 var BLACK = "#000000";
 var TRANSPARENT = "transparent";
 var LINK_WATER = "#FEFEFE";
-var WHITE = "#FFFFFF";
+var WHITE$1 = "#FFFFFF";
 var SOLITUDE_WHITE = "#EBEDF1";
 var SEASHELL_WHITE = "#F1F1F1";
 var ALABASTER_WHITE = "#F7F7F7";
@@ -5097,7 +5097,7 @@ var colors = /*#__PURE__*/Object.freeze({
   __proto__: null,
   BLACK: BLACK,
   TRANSPARENT: TRANSPARENT,
-  WHITE: WHITE,
+  WHITE: WHITE$1,
   LINK_WATER: LINK_WATER,
   SOLITUDE_WHITE: SOLITUDE_WHITE,
   SEASHELL_WHITE: SEASHELL_WHITE,
@@ -12598,18 +12598,18 @@ var padding = {
   whitePrimary: "1.125rem 0.75rem"
 };
 var color$1 = {
-  primary: WHITE,
+  primary: WHITE$1,
   secondary: MATISSE_BLUE,
   back: MATISSE_BLUE,
-  smallPrimary: WHITE,
+  smallPrimary: WHITE$1,
   smallSecondary: MATISSE_BLUE,
   smallGhost: MATISSE_BLUE,
   ghost: MATISSE_BLUE,
   tertiary: MATISSE_BLUE,
-  danger: WHITE,
+  danger: WHITE$1,
   dangerSecondary: ERROR_COLOR,
-  whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  whiteSecondary: WHITE$1,
+  whitePrimary: WHITE$1
 };
 var fontSizeVariant = {
   primary: "pS",
@@ -12692,7 +12692,7 @@ var border = {
   tertiary: "none",
   danger: "2px solid " + RASPBERRY,
   dangerSecondary: "2px solid " + ERROR_COLOR,
-  whiteSecondary: "2px solid " + WHITE,
+  whiteSecondary: "2px solid " + WHITE$1,
   whitePrimary: "2px solid " + TRANSPARENT
 };
 var hoverBackgroundColor = {
@@ -12724,18 +12724,18 @@ var hoverBorderColor = {
   whitePrimary: "2px solid " + TRANSPARENT
 };
 var hoverColor = {
-  primary: WHITE,
+  primary: WHITE$1,
   secondary: SAPPHIRE_BLUE,
   back: SAPPHIRE_BLUE,
-  smallPrimary: WHITE,
+  smallPrimary: WHITE$1,
   smallSecondary: SAPPHIRE_BLUE,
   smallGhost: SAPPHIRE_BLUE,
   ghost: SAPPHIRE_BLUE,
   tertiary: SAPPHIRE_BLUE,
-  danger: WHITE,
+  danger: WHITE$1,
   dangerSecondary: "#B10541",
-  whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  whiteSecondary: WHITE$1,
+  whitePrimary: WHITE$1
 };
 var activeBackgroundColor = {
   primary: PEACOCK_BLUE,
@@ -12766,18 +12766,18 @@ var activeBorderColor = {
   whitePrimary: "2px solid " + TRANSPARENT
 };
 var activeColor = {
-  primary: WHITE,
+  primary: WHITE$1,
   secondary: MATISSE_BLUE,
   back: PEACOCK_BLUE,
-  smallPrimary: WHITE,
+  smallPrimary: WHITE$1,
   smallSecondary: PEACOCK_BLUE,
   smallGhost: PEACOCK_BLUE,
   ghost: PEACOCK_BLUE,
   tertiary: PEACOCK_BLUE,
-  danger: WHITE,
+  danger: WHITE$1,
   dangerSecondary: "#910029",
-  whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  whiteSecondary: WHITE$1,
+  whitePrimary: WHITE$1
 };
 var fallbackValues$1 = {
   padding: padding,
@@ -12976,9 +12976,9 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
 };
 
 var primaryColor = {
-  info: "".concat(WHITE),
-  success: "".concat(WHITE),
-  error: "".concat(WHITE)
+  info: "".concat(WHITE$1),
+  success: "".concat(WHITE$1),
+  error: "".concat(WHITE$1)
 };
 var accentColor = {
   info: "".concat(BRIGHT_GREY),
@@ -12993,7 +12993,7 @@ var subIconColor = {
 var singleIconColor = {
   primary: "".concat(MATISSE_BLUE),
   secondary: "".concat(BRIGHT_GREY),
-  darkMode: "".concat(WHITE)
+  darkMode: "".concat(WHITE$1)
 };
 var fallbackValues$2 = {
   primaryColor: primaryColor,
@@ -18301,7 +18301,7 @@ var IconChevron = function IconChevron(_ref) {
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("mask", {
     id: "icon-chevron-mask-2",
-    fill: WHITE
+    fill: WHITE$1
   }, /*#__PURE__*/React.createElement("use", {
     xlinkHref: "#icon-chevron-path-1"
   })), /*#__PURE__*/React.createElement("use", {
@@ -18354,7 +18354,7 @@ var IconValid = function IconValid(_ref) {
   var _ref$bgFill = _ref.bgFill,
       bgFill = _ref$bgFill === void 0 ? FOREST_GREEN : _ref$bgFill,
       _ref$iconFill = _ref.iconFill,
-      iconFill = _ref$iconFill === void 0 ? WHITE : _ref$iconFill,
+      iconFill = _ref$iconFill === void 0 ? WHITE$1 : _ref$iconFill,
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? "18" : _ref$width,
       _ref$height = _ref.height,
@@ -18406,7 +18406,7 @@ var IconInvalid = function IconInvalid(_ref) {
   var _ref$bgFill = _ref.bgFill,
       bgFill = _ref$bgFill === void 0 ? RAZZMATAZZ_RED : _ref$bgFill,
       _ref$iconFill = _ref.iconFill,
-      iconFill = _ref$iconFill === void 0 ? WHITE : _ref$iconFill,
+      iconFill = _ref$iconFill === void 0 ? WHITE$1 : _ref$iconFill,
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? "18" : _ref$width,
       _ref$height = _ref.height,
@@ -21829,7 +21829,7 @@ var Paragraph = function Paragraph(_ref) {
 
 var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$b, "p");
 
-var backgroundColor$1 = WHITE;
+var backgroundColor$1 = WHITE$1;
 var iconBackgroundColor = GRECIAN_GREY;
 var fallbackValues$c = {
   backgroundColor: backgroundColor$1,
@@ -22022,10 +22022,10 @@ var textColor = {
   "default": "".concat(CHARADE_GREY)
 };
 var disabledCheckColor = {
-  "default": "".concat(WHITE, ";")
+  "default": "".concat(WHITE$1, ";")
 };
 var checkColor = {
-  "default": "".concat(WHITE, ";")
+  "default": "".concat(WHITE$1, ";")
 };
 var errorStyles = {
   "default": "border: 1px solid ".concat(RED, ";")
@@ -22043,7 +22043,7 @@ var checkedStyles = {
   "default": "\n  background: ".concat(MATISSE_BLUE, ";    \n  border: 1px solid ").concat(MATISSE_BLUE, ";\n")
 };
 var defaultStyles = {
-  "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
+  "default": "\n  background: ".concat(WHITE$1, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
 };
 var fallbackValues$d = {
   backgroundColor: backgroundColor$2,
@@ -22196,14 +22196,14 @@ var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$d, "default
 
 var listBackgroundColor = {
   "default": "".concat(ATHENS_GREY),
-  disabled: "".concat(WHITE)
+  disabled: "".concat(WHITE$1)
 };
 var listItemColor = {
   "default": "".concat(MINESHAFT_GREY),
   disabled: "".concat(STORM_GREY)
 };
 var listItemBackgroundColor = {
-  "default": "".concat(WHITE),
+  "default": "".concat(WHITE$1),
   disabled: "".concat(ATHENS_GREY)
 };
 var listItemBorderColor = {
@@ -23705,7 +23705,7 @@ var IconWrapper = styled.div.withConfig({
 var DropdownContentWrapper = styled.div.withConfig({
   displayName: "Dropdown__DropdownContentWrapper",
   componentId: "sc-pn6m0h-1"
-})(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}ul{padding-left:0;}"], GREY_CHATEAU, WHITE, function (_ref2) {
+})(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}ul{padding-left:0;}"], GREY_CHATEAU, WHITE$1, function (_ref2) {
   var widthFitOptions = _ref2.widthFitOptions;
   return widthFitOptions ? "fit-content" : "100%";
 }, function (_ref3) {
@@ -23718,7 +23718,7 @@ var DropdownItemWrapper = styled.li.withConfig({
 })(["background-color:", ";text-align:start;border-width:0px;border-color:transparent;box-shadow:none;padding:1rem;box-sizing:border-box;width:100%;list-style:none;cursor:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:none;}"], function (_ref4) {
   var selected = _ref4.selected,
       themeValues = _ref4.themeValues;
-  return selected ? themeValues.selectedColor : WHITE;
+  return selected ? themeValues.selectedColor : WHITE$1;
 }, function (_ref5) {
   var disabled = _ref5.disabled;
   return disabled ? "default" : "pointer";
@@ -23726,12 +23726,12 @@ var DropdownItemWrapper = styled.li.withConfig({
   var selected = _ref6.selected,
       disabled = _ref6.disabled,
       themeValues = _ref6.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? themeValues.selectedColor : disabled ? WHITE$1 : themeValues.hoverColor;
 }, function (_ref7) {
   var selected = _ref7.selected,
       disabled = _ref7.disabled,
       themeValues = _ref7.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? themeValues.selectedColor : disabled ? WHITE$1 : themeValues.hoverColor;
 });
 
 var Dropdown = function Dropdown(_ref8) {
@@ -23985,7 +23985,7 @@ var Dropdown = function Dropdown(_ref8) {
   }, [filteredOptions]);
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
-    background: isOpen ? themeValues.hoverColor : WHITE,
+    background: isOpen ? themeValues.hoverColor : WHITE$1,
     extraStyles: "position: relative;",
     minWidth: "100%",
     onClick: function onClick() {
@@ -24011,7 +24011,7 @@ var Dropdown = function Dropdown(_ref8) {
     "aria-expanded": isOpen,
     "aria-required": options.required,
     "aria-invalid": ariaInvalid,
-    background: isOpen ? themeValues.hoverColor : WHITE,
+    background: isOpen ? themeValues.hoverColor : WHITE$1,
     borderRadius: "2px",
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
@@ -24084,7 +24084,7 @@ var Dropdown = function Dropdown(_ref8) {
       }
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
-      color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
+      color: choice.value === value ? WHITE$1 : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
       extraStyles: "padding-left: 16px;\n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", ";\n                      white-space: nowrap;\n                      overflow: hidden;\n                      text-overflow: ellipsis;")
     }, choice.text));
   }))) : /*#__PURE__*/React.createElement(Fragment$1, null)));
@@ -24120,13 +24120,13 @@ var linkColor$1 = {
   disabled: "".concat(MATISSE_BLUE)
 };
 var formBackgroundColor = {
-  "default": "".concat(WHITE),
-  disabled: "".concat(WHITE),
+  "default": "".concat(WHITE$1),
+  disabled: "".concat(WHITE$1),
   checkout: "".concat(ATHENS_GREY),
   collapsible: "".concat(ATHENS_GREY)
 };
 var inputBackgroundColor = {
-  "default": "".concat(WHITE),
+  "default": "".concat(WHITE$1),
   disabled: "".concat(SEASHELL_WHITE)
 };
 var color$6 = {
@@ -25173,7 +25173,7 @@ var Detail = function Detail(_ref) {
 
 var Detail$1 = themeComponent(Detail, "Detail", fallbacks$1, "regular");
 
-var backgroundColor$3 = WHITE;
+var backgroundColor$3 = WHITE$1;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
 var fallbackValues$i = {
   backgroundColor: backgroundColor$3,
@@ -25792,7 +25792,7 @@ var DisplayCard = function DisplayCard(_ref) {
     padding: "24px",
     borderSize: "1px",
     borderRadius: "4px",
-    background: WHITE,
+    background: WHITE$1,
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "space-between",
@@ -25822,13 +25822,13 @@ var linkColor$2 = {
   disabled: "".concat(MATISSE_BLUE)
 };
 var formBackgroundColor$1 = {
-  "default": "".concat(WHITE),
-  disabled: "".concat(WHITE),
+  "default": "".concat(WHITE$1),
+  disabled: "".concat(WHITE$1),
   checkout: "".concat(ATHENS_GREY),
   collapsible: "".concat(ATHENS_GREY)
 };
 var inputBackgroundColor$1 = {
-  "default": "".concat(WHITE),
+  "default": "".concat(WHITE$1),
   disabled: "".concat(SEASHELL_WHITE)
 };
 var color$7 = {
@@ -27101,7 +27101,7 @@ var Placeholder = function Placeholder(_ref2) {
 var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$s, "default");
 
 var backgroundColor$4 = {
-  "default": "".concat(WHITE)
+  "default": "".concat(WHITE$1)
 };
 var fallbackValues$t = {
   backgroundColor: backgroundColor$4
@@ -38022,7 +38022,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
 
 var onBackground = "".concat(MATISSE_BLUE);
 var disabledBackground = "".concat(IRON_GREY);
-var white = "".concat(WHITE);
+var white = "".concat(WHITE$1);
 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");
@@ -38206,7 +38206,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
 var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$y);
 
 var background$2 = "".concat(ATHENS_GREY);
-var white$1 = "".concat(WHITE);
+var white$1 = "".concat(WHITE$1);
 var black = "#000";
 var focusBorder = "".concat(MATISSE_BLUE);
 var themeValues = {
@@ -38248,10 +38248,10 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
-var backgroundColor$5 = WHITE;
+var backgroundColor$5 = WHITE$1;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
-var headerColor = WHITE;
+var headerColor = WHITE$1;
 var fallbackValues$z = {
   backgroundColor: backgroundColor$5,
   imageBackgroundColor: imageBackgroundColor,
@@ -41127,7 +41127,7 @@ var EditableListItem = styled.div.withConfig({
   componentId: "sc-10ehkz7-0"
 })(["box-sizing:border-box;background:", ";border-color:", ";height:", ";display:flex;justify-content:space-between;align-items:center;padding:1.5rem;:not(:last-child),:not(:first-child){box-shadow:inset 0px -1px 0px 0px rgb(202,206,216);}:first-child{border-top-left-radius:3px;border-top-right-radius:3px;}:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;box-shadow:none;}"], function (_ref) {
   var disabled = _ref.disabled;
-  return disabled ? "rgba(246, 246, 249, 0.7)" : WHITE;
+  return disabled ? "rgba(246, 246, 249, 0.7)" : WHITE$1;
 }, GHOST_GREY, function (_ref2) {
   var listItemSize = _ref2.listItemSize;
   return listItemSize === "big" ? "120px" : "72px";
@@ -46694,7 +46694,7 @@ var Modal$1 = function Modal(_ref) {
       _ref$closeButtonText = _ref.closeButtonText,
       closeButtonText = _ref$closeButtonText === void 0 ? "Close" : _ref$closeButtonText,
       _ref$modalHeaderBg = _ref.modalHeaderBg,
-      modalHeaderBg = _ref$modalHeaderBg === void 0 ? WHITE : _ref$modalHeaderBg,
+      modalHeaderBg = _ref$modalHeaderBg === void 0 ? WHITE$1 : _ref$modalHeaderBg,
       _ref$modalBodyBg = _ref.modalBodyBg,
       modalBodyBg = _ref$modalBodyBg === void 0 ? ATHENS_GREY : _ref$modalBodyBg,
       _ref$useDangerButton = _ref.useDangerButton,
@@ -46878,9 +46878,9 @@ var borderRadius = {
   small: "0.25rem"
 };
 var backgroundColor$a = {
-  "default": WHITE,
-  largeTitle: WHITE,
-  small: WHITE
+  "default": WHITE$1,
+  largeTitle: WHITE$1,
+  small: WHITE$1
 };
 var fallbackValues$J = {
   fontSize: fontSize$9,
@@ -47660,7 +47660,7 @@ var Obligation = function Obligation(_ref) {
     border: "1px solid ".concat(GRECIAN_GREY),
     borderWidthOverride: "1px 0 0 0"
   }, /*#__PURE__*/React.createElement(Box, {
-    background: WHITE,
+    background: WHITE$1,
     padding: isMobile ? "16px" : "24px 16px"
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "14px"
@@ -47936,10 +47936,10 @@ var createPartialAmountFormValidators = function createPartialAmountFormValidato
   return validators;
 };
 
-var arrowColor = WHITE;
+var arrowColor = WHITE$1;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
-var activeBackgroundColor$2 = WHITE;
+var activeBackgroundColor$2 = WHITE$1;
 var activeColor$9 = MATISSE_BLUE;
 var fallbackValues$M = {
   activeColor: activeColor$9,
@@ -49590,7 +49590,7 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var headingBackgroundColor$1 = "".concat(WHITE);
+var headingBackgroundColor$1 = "".concat(WHITE$1);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$6 = "".concat(GREY_CHATEAU);
@@ -49936,7 +49936,7 @@ var ResetConfirmationForm = function ResetConfirmationForm() {
     padding: "0",
     width: isMobile ? "auto" : "576px",
     borderRadius: "4px",
-    background: WHITE,
+    background: WHITE$1,
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
   }, /*#__PURE__*/React.createElement(Box, {
     background: GRECIAN_GREY,
@@ -50059,7 +50059,7 @@ var ResetConfirmationForm$2 = function ResetConfirmationForm() {
     padding: "0",
     width: isMobile ? "auto" : "576px",
     borderRadius: "4px",
-    background: WHITE,
+    background: WHITE$1,
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
   }, /*#__PURE__*/React.createElement(Box, {
     background: GRECIAN_GREY,
@@ -50129,7 +50129,7 @@ var Tab = function Tab(_ref) {
     onClick: onClick,
     margin: "0 0 -1px 0",
     padding: "0.5rem 0.75rem",
-    background: activeTab === label ? WHITE : GRECIAN_GREY,
+    background: activeTab === label ? WHITE$1 : GRECIAN_GREY,
     extraStyles: "cursor: pointer; flex-grow: 1; text-align: center; ".concat(activeTab === label ? "list-style: none;" : "")
   }, /*#__PURE__*/React.createElement(Text$1, null, label));
 };
@@ -50282,8 +50282,55 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
+var CloseIconWrapper = styled.div.withConfig({
+  displayName: "ToastNotification__CloseIconWrapper",
+  componentId: "sc-116yflm-0"
+})(["min-height:24px;min-width:24px;display:flex;margin:16px;justify-content:center;align-items:center;cursor:pointer;"]);
+var VARIANTS = {
+  SUCCESS: "success",
+  ERROR: "error"
+};
+
+var ToastNotification = function ToastNotification(_ref) {
+  var _ref$message = _ref.message,
+      message = _ref$message === void 0 ? "" : _ref$message,
+      extraStyles = _ref.extraStyles,
+      _ref$minWidth = _ref.minWidth,
+      minWidth = _ref$minWidth === void 0 ? "112px" : _ref$minWidth,
+      _ref$maxWidth = _ref.maxWidth,
+      maxWidth = _ref$maxWidth === void 0 ? "350px" : _ref$maxWidth,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "56px" : _ref$height,
+      closeToastNotification = _ref.closeToastNotification,
+      toastOpen = _ref.toastOpen,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? VARIANTS.SUCCESS : _ref$variant,
+      backgroundColor = _ref.backgroundColor;
+  return /*#__PURE__*/React.createElement(Box, {
+    onClick: closeToastNotification,
+    background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === "error" ? ERROR_COLOR : WHITE,
+    minWidth: minWidth,
+    minHeight: height && parseInt(height) < 100 ? height : "100px",
+    height: height ? height : "auto",
+    tabIndex: toastOpen ? "-1" : "0",
+    padding: "0",
+    borderRadius: "4px",
+    boxShadow: "0px 4px 4px rgba(41, 42, 51, 0.15), 0px 1px 7px rgba(41, 42, 51, 0.2), 0px 7px 12px rgba(41, 42, 51, 0.15)",
+    extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n    ")
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    align: "center",
+    childGap: "0"
+  }, variant === "success" && /*#__PURE__*/React.createElement(SuccessfulIconSmall, null), variant === "error" && /*#__PURE__*/React.createElement(ErroredIcon, null), /*#__PURE__*/React.createElement(Box, {
+    padding: "1rem 0",
+    maxWidth: maxWidth
+  }, /*#__PURE__*/React.createElement(Paragraph$1, {
+    weight: FONT_WEIGHT_SEMIBOLD,
+    extraStyles: "word-break: break-word;"
+  }, message)), /*#__PURE__*/React.createElement(CloseIconWrapper, null, /*#__PURE__*/React.createElement(IconQuitLarge, null))));
+};
+
 var fontWeight$9 = "600";
-var fontColor$1 = WHITE;
+var fontColor$1 = WHITE$1;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
@@ -50347,7 +50394,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
       _ref$buttonVariant = _ref.buttonVariant,
       buttonVariant = _ref$buttonVariant === void 0 ? "primary" : _ref$buttonVariant;
   return /*#__PURE__*/React.createElement(Box, {
-    background: WHITE,
+    background: WHITE$1,
     boxShadow: "0px 0px 5px 0px ".concat(GHOST_GREY),
     padding: 0,
     borderRadius: "4px"
@@ -50654,5 +50701,5 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
 
-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, 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, 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, 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, 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, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, 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$5 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$4 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, 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, 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, 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, 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, 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$5 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$4 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map