@thecb/components 7.13.2-beta.0 → 7.13.2

package/dist/index.esm.js

@@ -18463,7 +18463,63 @@ var fallbackValues$4 = {
   link: link
 };
 
+/* 
+
+A utility function that can generate box-shadow values for components
+Takes a string representing an rgb color value and returns an object
+with values for standard, inset, and overlay shadows.
+
+The objects for standard and inset shadows contain versions approiate
+for base, hover, and active interaction states.
+
+*/
+
+/* 
+  Function to convert string representing rgb color to rgba value with provided opacity
+  ("rgb(41, 42, 51)", "0.1") => "rgba(41, 42, 51, 0.1)"
+
+*/
+var rgbToRgba = function rgbToRgba() {
+  var rgbValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+
+  if (typeof rgbValue !== "string" || typeof opacity !== "string" || rgbValue.charAt(0) === "#") {
+    return "";
+  }
+
+  return "".concat(rgbValue.slice(0, 3), "a").concat(rgbValue.slice(3, -1), ", ").concat(opacity).concat(rgbValue.slice(-1));
+};
+
+var generateShadows = function generateShadows() {
+  var baseColorRGB = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(41, 42, 51)";
+  var colorTen = rgbToRgba(baseColorRGB, "0.1") || "rgba(41, 42, 51, 0.1)";
+  var colorTwenty = rgbToRgba(baseColorRGB, "0.2") || "rgba(41, 42, 51, 0.2)";
+  var colorTwentyFive = rgbToRgba(baseColorRGB, "0.25") || "rgba(41, 42, 51, 0.25)";
+  var colorThirty = rgbToRgba(baseColorRGB, "0.3") || "rgba(41, 42, 51, 0.3)";
+  var blackTwentyFive = "rgba(0, 0, 0, 0.25)";
+  var standard = {
+    base: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 6px 0px ").concat(colorTwenty, ", inset 0px 1px 0px 0px ").concat(colorTen),
+    hover: "0px 1px 2px 0px ".concat(colorTwenty, ", 0px 4px 8px 0px ").concat(blackTwentyFive, ", 0px 6px 12px 0px ").concat(colorTen),
+    active: "0px 2px 8px 0px ".concat(colorTwenty, ", 0px 4px 8px 0px ").concat(colorThirty, ", 0px 6px 12px 0px ").concat(colorTwentyFive)
+  };
+  var inset = {
+    base: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 4px 0px ").concat(colorTwenty, ", inset 0px 1px 0px 0px ").concat(colorTen),
+    hover: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 4px 0px ").concat(colorTwentyFive, ", 0px 4px 8px 0px ").concat(colorTen),
+    active: "0px 1px 2px 2px ".concat(colorTwenty, ", 0px 3px 6px 0px ").concat(colorThirty, ", 0px 4px 8px 0px ").concat(colorTwenty)
+  };
+  var overlay = {
+    base: "0px 7px 32px 0px ".concat(colorTwenty, ", 0px 1px 4px 0px ").concat(colorTwenty, ", 0px 1px 8px -1px ").concat(colorThirty)
+  };
+  return {
+    standard: standard,
+    inset: inset,
+    overlay: overlay
+  };
+};
+
 var Alert = function Alert(_ref) {
+  var _generateShadows, _generateShadows$inse;
+
   var heading = _ref.heading,
       text = _ref.text,
       textOverride = _ref.textOverride,
@@ -18477,13 +18533,26 @@ var Alert = function Alert(_ref) {
       showQuitLink = _ref$showQuitLink === void 0 ? true : _ref$showQuitLink,
       themeValues = _ref.themeValues,
       extraStyles = _ref.extraStyles,
-      maxContentWidth = _ref.maxContentWidth;
+      maxContentWidth = _ref.maxContentWidth,
+      _ref$noBorder = _ref.noBorder,
+      noBorder = _ref$noBorder === void 0 ? false : _ref$noBorder,
+      _ref$enableBoxShadow = _ref.enableBoxShadow,
+      enableBoxShadow = _ref$enableBoxShadow === void 0 ? false : _ref$enableBoxShadow,
+      _ref$enableSmallText = _ref.enableSmallText,
+      enableSmallText = _ref$enableSmallText === void 0 ? false : _ref$enableSmallText,
+      _ref$innerContentPadd = _ref.innerContentPadding,
+      innerContentPadding = _ref$innerContentPadd === void 0 ? "1rem" : _ref$innerContentPadd,
+      _ref$iconPadding = _ref.iconPadding,
+      iconPadding = _ref$iconPadding === void 0 ? "0 0 0 1rem" : _ref$iconPadding,
+      _ref$contentFullHeigh = _ref.contentFullHeight,
+      contentFullHeight = _ref$contentFullHeigh === void 0 ? false : _ref$contentFullHeigh;
   var Icon = AlertIcons[variant];
+  var contentPadding = maxContentWidth ? "".concat(padding, " 1rem") : innerContentPadding;
   var content = /*#__PURE__*/React.createElement(Sidebar, {
     width: "24px",
     childGap: "0rem"
   }, /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 0 1rem",
+    padding: iconPadding,
     minHeight: "100%"
   }, /*#__PURE__*/React.createElement(Cover, {
     minHeight: "100%",
@@ -18497,17 +18566,18 @@ var Alert = function Alert(_ref) {
   }, /*#__PURE__*/React.createElement(Sidebar, {
     sidebarOnRight: true,
     width: "24px",
-    childGap: "0rem"
+    childGap: "0rem",
+    fullHeight: contentFullHeight
   }, /*#__PURE__*/React.createElement(Box, {
-    padding: maxContentWidth ? "".concat(padding, " 1rem") : "1rem"
+    padding: contentPadding
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
   }, textOverride ? textOverride : /*#__PURE__*/React.createElement(Stack, {
     fullHeight: true,
-    childGap: "0.25rem"
+    childGap: "0"
   }, /*#__PURE__*/React.createElement(Text$1, {
-    variant: "p",
+    variant: enableSmallText ? "pS" : "p",
     color: themeValues.text,
     weight: "600"
   }, heading), /*#__PURE__*/React.createElement(Text$1, {
@@ -18529,7 +18599,8 @@ var Alert = function Alert(_ref) {
     background: themeValues.background,
     borderRadius: "4px",
     borderColor: themeValues.border,
-    borderSize: "1px",
+    borderSize: noBorder ? "0px" : "1px",
+    boxShadow: enableBoxShadow ? (_generateShadows = generateShadows()) === null || _generateShadows === void 0 ? void 0 : (_generateShadows$inse = _generateShadows.inset) === null || _generateShadows$inse === void 0 ? void 0 : _generateShadows$inse.base : "",
     extraStyles: extraStyles
   }, maxContentWidth ? /*#__PURE__*/React.createElement(Center, {
     maxWidth: maxContentWidth
@@ -26274,7 +26345,7 @@ var fallbackValues$q = {
 var SpinnerSvgAnimation = styled.svg.withConfig({
   displayName: "Spinner__SpinnerSvgAnimation",
   componentId: "sc-vhupl9-0"
-})(["animation:rotate 2s linear infinite;margin:-25px 0 0 -25px;width:", "px;height:", "px;& .path{stroke:", ";stroke-linecap:round;animation:dash 1.5s ease-in-out infinite;}@keyframes rotate{100%{transform:rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"], function (_ref) {
+})(["animation:rotate 2s linear infinite;margin:-25px 0 0 -25px;width:", "px;height:", "px;& .path{stroke:", ";stroke-linecap:round;animation:dash 1.5s ease-in-out infinite;}@keyframes rotate{100%{transform:rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", ""], function (_ref) {
   var size = _ref.size;
   return size;
 }, function (_ref2) {
@@ -26283,19 +26354,36 @@ var SpinnerSvgAnimation = styled.svg.withConfig({
 }, function (_ref3) {
   var color = _ref3.color;
   return color;
+}, function (_ref4) {
+  var centerSpinner = _ref4.centerSpinner;
+  return centerSpinner ? css(["margin:0;"]) : "";
 });
 var SpinnerContainer$2 = styled.div.withConfig({
   displayName: "Spinner__SpinnerContainer",
   componentId: "sc-vhupl9-1"
-})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;"]);
+})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;", ""], function (_ref5) {
+  var centerSpinner = _ref5.centerSpinner,
+      size = _ref5.size;
+  return centerSpinner ? css(["width:", "px;height:", "px;"], size, size) : "";
+});
+/*
+  `centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
+  containers. Default is false to preserve legacy behavior for past uses.
+*/
 
-var Spinner$1 = function Spinner(_ref4) {
-  var _ref4$size = _ref4.size,
-      size = _ref4$size === void 0 ? "24" : _ref4$size,
-      themeValues = _ref4.themeValues;
-  return /*#__PURE__*/React.createElement(SpinnerContainer$2, null, /*#__PURE__*/React.createElement(SpinnerSvgAnimation, {
+var Spinner$1 = function Spinner(_ref6) {
+  var _ref6$size = _ref6.size,
+      size = _ref6$size === void 0 ? "24" : _ref6$size,
+      _ref6$centerSpinner = _ref6.centerSpinner,
+      centerSpinner = _ref6$centerSpinner === void 0 ? false : _ref6$centerSpinner,
+      themeValues = _ref6.themeValues;
+  return /*#__PURE__*/React.createElement(SpinnerContainer$2, {
+    centerSpinner: centerSpinner,
+    size: size
+  }, /*#__PURE__*/React.createElement(SpinnerSvgAnimation, {
     size: size,
-    color: themeValues.color
+    color: themeValues.color,
+    centerSpinner: centerSpinner
   }, /*#__PURE__*/React.createElement("circle", {
     className: "path",
     cx: "50",
@@ -47653,7 +47741,7 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       },
       text: "Void",
       padding: "0",
-      extraStyles: "\n                  min-width: 65px; \n                  margin: 0px;\n                  min-height: 0px;\n                ",
+      extraStyles: "\n                  min-width: 65px;\n                  margin: 0px;\n                  min-height: 0px;\n                ",
       textExtraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 14px;")
     })), /*#__PURE__*/React.createElement(Box, {
       padding: "0",
@@ -47681,12 +47769,69 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   }));
 };
 
+var LoadingDetails = function LoadingDetails() {
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    background: GRECIAN_GREY,
+    borderRadius: "4px",
+    minHeight: "196px"
+  }, /*#__PURE__*/React.createElement(Cover, {
+    minHeight: "196px",
+    singleChild: true,
+    fillCenter: true
+  }, /*#__PURE__*/React.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: "flex-grow: 1; display: flex; justify-content: center; align-items: center;"
+  }, /*#__PURE__*/React.createElement(Spinner$2, {
+    size: "100",
+    centerSpinner: true
+  })))));
+};
+
+var ErrorDetails = function ErrorDetails() {
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Alert$1, {
+    variant: "error",
+    heading: "Error Loading Payment",
+    text: "Please go back and try again.",
+    showQuitLink: false,
+    noBorder: true,
+    enableBoxShadow: true,
+    enableSmallText: true,
+    innerContentPadding: "0 0 0 0.75rem",
+    iconPadding: "0 0 0 0",
+    height: "67px",
+    minHeight: "67px",
+    padding: "0.75rem"
+  }));
+};
+
+var getLoadingOrErrorContent = function getLoadingOrErrorContent() {
+  var isLoading = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var isError = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(LoadingDetails, null);
+  } else if (isError) {
+    return /*#__PURE__*/React.createElement(ErrorDetails, null);
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment$1, null);
+};
+
 var Collapsible = function Collapsible(_ref2) {
   var content = _ref2.content,
       title = _ref2.title,
       supportsTouch = _ref2.supportsTouch,
       isOpen = _ref2.isOpen,
-      setIsOpen = _ref2.setIsOpen;
+      setIsOpen = _ref2.setIsOpen,
+      _ref2$isLoading = _ref2.isLoading,
+      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
+      _ref2$isError = _ref2.isError,
+      isError = _ref2$isError === void 0 ? false : _ref2$isError;
   return /*#__PURE__*/React.createElement(CollapsibleSection$1, {
     isMobile: true,
     supportsTouch: supportsTouch,
@@ -47709,13 +47854,17 @@ var Collapsible = function Collapsible(_ref2) {
     },
     positionTransition: true,
     initial: "closed"
-  }, content));
+  }, isLoading || isError ? getLoadingOrErrorContent(isLoading, isError) : content));
 };
 
 var NonCollapsible = function NonCollapsible(_ref3) {
   var title = _ref3.title,
-      content = _ref3.content;
-  return /*#__PURE__*/React.createElement(Stack, null, title, content);
+      content = _ref3.content,
+      _ref3$isLoading = _ref3.isLoading,
+      isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
+      _ref3$isError = _ref3.isError,
+      isError = _ref3$isError === void 0 ? false : _ref3$isError;
+  return /*#__PURE__*/React.createElement(Stack, null, title, isLoading || isError ? getLoadingOrErrorContent(isLoading, isError) : content);
 };
 
 var PaymentDetails = function PaymentDetails(_ref4) {
@@ -47745,7 +47894,11 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       _ref4$voidableAmountP = _ref4.voidableAmountPaid,
       voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP,
       _ref4$remainingBalanc = _ref4.remainingBalance,
-      remainingBalance = _ref4$remainingBalanc === void 0 ? false : _ref4$remainingBalanc;
+      remainingBalance = _ref4$remainingBalanc === void 0 ? false : _ref4$remainingBalanc,
+      _ref4$isLoading = _ref4.isLoading,
+      isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
+      _ref4$isError = _ref4.isError,
+      isError = _ref4$isError === void 0 ? false : _ref4$isError;
 
   var _useState = useState(initiallyOpen),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47848,10 +48001,14 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     isMobile: isMobile,
-    supportsTouch: supportsTouch
+    supportsTouch: supportsTouch,
+    isLoading: isLoading,
+    isError: isError
   }) : /*#__PURE__*/React.createElement(NonCollapsible, {
     title: title,
-    content: content
+    content: content,
+    isLoading: isLoading,
+    isError: isError
   });
 };
 
@@ -48062,59 +48219,6 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   })))));
 };
 
-/* 
-
-A utility function that can generate box-shadow values for components
-Takes a string representing an rgb color value and returns an object
-with values for standard, inset, and overlay shadows.
-
-The objects for standard and inset shadows contain versions approiate
-for base, hover, and active interaction states.
-
-*/
-
-/* 
-  Function to convert string representing rgb color to rgba value with provided opacity
-  ("rgb(41, 42, 51)", "0.1") => "rgba(41, 42, 51, 0.1)"
-
-*/
-var rgbToRgba = function rgbToRgba() {
-  var rgbValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-
-  if (typeof rgbValue !== "string" || typeof opacity !== "string" || rgbValue.charAt(0) === "#") {
-    return "";
-  }
-
-  return "".concat(rgbValue.slice(0, 3), "a").concat(rgbValue.slice(3, -1), ", ").concat(opacity).concat(rgbValue.slice(-1));
-};
-
-var generateShadows = function generateShadows(baseColorRGB) {
-  var colorTen = rgbToRgba(baseColorRGB, "0.1") || "rgba(41, 42, 51, 0.1)";
-  var colorTwenty = rgbToRgba(baseColorRGB, "0.2") || "rgba(41, 42, 51, 0.2)";
-  var colorTwentyFive = rgbToRgba(baseColorRGB, "0.25") || "rgba(41, 42, 51, 0.25)";
-  var colorThirty = rgbToRgba(baseColorRGB, "0.3") || "rgba(41, 42, 51, 0.3)";
-  var blackTwentyFive = "rgba(0, 0, 0, 0.25)";
-  var standard = {
-    base: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 6px 0px ").concat(colorTwenty, ", inset 0px 1px 0px 0px ").concat(colorTen),
-    hover: "0px 1px 2px 0px ".concat(colorTwenty, ", 0px 4px 8px 0px ").concat(blackTwentyFive, ", 0px 6px 12px 0px ").concat(colorTen),
-    active: "0px 2px 8px 0px ".concat(colorTwenty, ", 0px 4px 8px 0px ").concat(colorThirty, ", 0px 6px 12px 0px ").concat(colorTwentyFive)
-  };
-  var inset = {
-    base: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 4px 0px ").concat(colorTwenty, ", inset 0px 1px 0px 0px ").concat(colorTen),
-    hover: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 4px 0px ").concat(colorTwentyFive, ", 0px 4px 8px 0px ").concat(colorTen),
-    active: "0px 1px 2px 2px ".concat(colorTwenty, ", 0px 3px 6px 0px ").concat(colorThirty, ", 0px 4px 8px 0px ").concat(colorTwenty)
-  };
-  var overlay = {
-    base: "0px 7px 32px 0px ".concat(colorTwenty, ", 0px 1px 4px 0px ").concat(colorTwenty, ", 0px 1px 8px -1px ").concat(colorThirty)
-  };
-  return {
-    standard: standard,
-    inset: inset,
-    overlay: overlay
-  };
-};
-
 /* 
   Hook that takes an ID selector for an element on the screen
   And optionally values for top position, left position, smooth behavior