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

package/dist/index.cjs.js

@@ -5051,7 +5051,8 @@ var FANTASY_RED = "#FCF4F4";
 var COSMOS_RED = "#FFD0D3";
 var BLUSH_RED = "#FFF0F5"; // Second level color constants
 
-var ERROR_COLOR = RAZZMATAZZ_RED; // These colors are sequestered so that the alert component can reference them // by type of alert
+var ERROR_COLOR = RAZZMATAZZ_RED;
+var ERROR_BACKGROUND_COLOR = "#FFF4F8"; // These colors are sequestered so that the alert component can reference them // by type of alert
 
 var ALERT_COLORS = {
   warn: {
@@ -5182,7 +5183,8 @@ var colors = /*#__PURE__*/Object.freeze({
   RASPBERRY: RASPBERRY,
   ALERT_COLORS: ALERT_COLORS,
   PILL_COLORS: PILL_COLORS,
-  ERROR_COLOR: ERROR_COLOR
+  ERROR_COLOR: ERROR_COLOR,
+  ERROR_BACKGROUND_COLOR: ERROR_BACKGROUND_COLOR
 });
 
 var TextSpan = styled__default.span.withConfig({
@@ -50290,10 +50292,6 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
-var CloseIconWrapper = styled__default.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"
@@ -50309,6 +50307,8 @@ var ToastNotification = function ToastNotification(_ref) {
       maxWidth = _ref$maxWidth === void 0 ? "350px" : _ref$maxWidth,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? "56px" : _ref$height,
+      _ref$childGap = _ref.childGap,
+      childGap = _ref$childGap === void 0 ? "1rem" : _ref$childGap,
       closeToastNotification = _ref.closeToastNotification,
       toastOpen = _ref.toastOpen,
       _ref$variant = _ref.variant,
@@ -50316,25 +50316,25 @@ var ToastNotification = function ToastNotification(_ref) {
       backgroundColor = _ref.backgroundColor;
   return /*#__PURE__*/React__default.createElement(Box, {
     onClick: closeToastNotification,
-    background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === "error" ? ERROR_COLOR : WHITE,
+    background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === "error" ? ERROR_BACKGROUND_COLOR : WHITE,
     minWidth: minWidth,
     minHeight: height && parseInt(height) < 100 ? height : "100px",
     height: height ? height : "auto",
     tabIndex: toastOpen ? "-1" : "0",
-    padding: "0",
+    padding: "0rem 1rem",
     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__default.createElement(Cluster, {
     align: "center",
-    childGap: "0"
-  }, variant === "success" && /*#__PURE__*/React__default.createElement(SuccessfulIconSmall, null), variant === "error" && /*#__PURE__*/React__default.createElement(ErroredIcon, null), /*#__PURE__*/React__default.createElement(Box, {
+    childGap: childGap
+  }, variant === "success" && /*#__PURE__*/React__default.createElement(SuccessfulIconMedium, null), variant === "error" && /*#__PURE__*/React__default.createElement(ErroredIcon, null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "1rem 0",
     maxWidth: maxWidth
   }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
     weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "word-break: break-word;"
-  }, message)), /*#__PURE__*/React__default.createElement(CloseIconWrapper, null, /*#__PURE__*/React__default.createElement(IconQuitLarge, null))));
+  }, message)), /*#__PURE__*/React__default.createElement(IconQuitLarge, null)));
 };
 
 var fontWeight$9 = "600";