@thecb/components 7.12.2-beta.5 → 7.12.2-beta.6

package/dist/index.esm.js

@@ -17762,7 +17762,62 @@ 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(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
+  };
+};
+
 var Alert = function Alert(_ref) {
+  var _generateShadows, _generateShadows$inse;
+
   var heading = _ref.heading,
       text = _ref.text,
       textOverride = _ref.textOverride,
@@ -17776,7 +17831,11 @@ 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;
   var Icon = AlertIcons[variant];
   var content = /*#__PURE__*/React.createElement(Sidebar, {
     width: "24px",
@@ -17828,7 +17887,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
@@ -46996,7 +47056,7 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
 var LoadingDetails = function LoadingDetails() {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
-    background: GHOST_GREY,
+    background: GRECIAN_GREY,
     borderRadius: "4px",
     minHeight: "196px"
   }, /*#__PURE__*/React.createElement(Cover, {
@@ -47021,7 +47081,10 @@ var ErrorDetails = function ErrorDetails() {
     variant: "error",
     heading: "Error Loading Payment",
     text: "Please go back and try again.",
-    showQuitLink: false
+    showQuitLink: false,
+    height: "67px",
+    noBorder: true,
+    enableBoxShadow: true
   }));
 };
 
@@ -47435,59 +47498,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