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

package/dist/index.d.ts

@@ -99,6 +99,7 @@ declare const COSMOS_RED: Color;
 declare const BLUSH_RED: Color;
 
 declare const ERROR_COLOR: Color;
+declare const ERROR_BACKGROUND_COLOR: Color;
 
 declare const ALERT_COLORS: {
   warn: ColorSet;
@@ -203,6 +204,7 @@ declare const colors_d_FANTASY_RED: typeof FANTASY_RED;
 declare const colors_d_COSMOS_RED: typeof COSMOS_RED;
 declare const colors_d_BLUSH_RED: typeof BLUSH_RED;
 declare const colors_d_ERROR_COLOR: typeof ERROR_COLOR;
+declare const colors_d_ERROR_BACKGROUND_COLOR: typeof ERROR_BACKGROUND_COLOR;
 declare const colors_d_ALERT_COLORS: typeof ALERT_COLORS;
 declare const colors_d_PILL_COLORS: typeof PILL_COLORS;
 declare namespace colors_d {
@@ -282,6 +284,7 @@ declare namespace colors_d {
     colors_d_COSMOS_RED as COSMOS_RED,
     colors_d_BLUSH_RED as BLUSH_RED,
     colors_d_ERROR_COLOR as ERROR_COLOR,
+    colors_d_ERROR_BACKGROUND_COLOR as ERROR_BACKGROUND_COLOR,
     colors_d_ALERT_COLORS as ALERT_COLORS,
     colors_d_PILL_COLORS as PILL_COLORS,
   };

package/dist/index.esm.js

@@ -5043,7 +5043,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: {
@@ -5174,7 +5175,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.span.withConfig({
@@ -50282,10 +50284,6 @@ 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"
@@ -50301,6 +50299,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,
@@ -50308,25 +50308,25 @@ var ToastNotification = function ToastNotification(_ref) {
       backgroundColor = _ref.backgroundColor;
   return /*#__PURE__*/React.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    ")
+    extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n      cursor: pointer;\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, {
+    childGap: childGap
+  }, variant === "success" && /*#__PURE__*/React.createElement(SuccessfulIconMedium, 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))));
+  }, message)), /*#__PURE__*/React.createElement(IconQuitLarge, null)));
 };
 
 var fontWeight$9 = "600";