@thecb/components 10.5.0-beta.5 → 10.5.0

package/dist/index.d.ts

@@ -292,8 +292,17 @@ declare namespace colors_d {
 
 type StyleDeclaration = string;
 
+interface StyleOptions {
+  XS?: string;
+  SM?: string;
+  MD?: string;
+  LG?: string;
+  XL?: string;
+}
+
+declare const BORDER_RADIUS: StyleOptions;
 declare const BORDER_THIN: StyleDeclaration;
-declare const CORNER_STANDARD: StyleDeclaration;
+declare const FONT_SIZE: StyleOptions;
 declare const FONT_WEIGHT_REGULAR: StyleDeclaration;
 declare const FONT_WEIGHT_SEMIBOLD: StyleDeclaration;
 declare const FONT_WEIGHT_BOLD: StyleDeclaration;
@@ -303,11 +312,11 @@ declare const COMPACT_JUMBO_HEIGHT: StyleDeclaration;
 declare const JUMBO_HEIGHT: StyleDeclaration;
 declare const SPACER_HEIGHT: StyleDeclaration;
 declare const LINK_TEXT_DECORATION: StyleDeclaration;
-declare const SPACING_XS: StyleDeclaration;
-declare const SPACING_NORMAL: StyleDeclaration;
+declare const SPACING: StyleOptions;
 
+declare const style_constants_d_BORDER_RADIUS: typeof BORDER_RADIUS;
 declare const style_constants_d_BORDER_THIN: typeof BORDER_THIN;
-declare const style_constants_d_CORNER_STANDARD: typeof CORNER_STANDARD;
+declare const style_constants_d_FONT_SIZE: typeof FONT_SIZE;
 declare const style_constants_d_FONT_WEIGHT_REGULAR: typeof FONT_WEIGHT_REGULAR;
 declare const style_constants_d_FONT_WEIGHT_SEMIBOLD: typeof FONT_WEIGHT_SEMIBOLD;
 declare const style_constants_d_FONT_WEIGHT_BOLD: typeof FONT_WEIGHT_BOLD;
@@ -317,12 +326,12 @@ declare const style_constants_d_COMPACT_JUMBO_HEIGHT: typeof COMPACT_JUMBO_HEIGH
 declare const style_constants_d_JUMBO_HEIGHT: typeof JUMBO_HEIGHT;
 declare const style_constants_d_SPACER_HEIGHT: typeof SPACER_HEIGHT;
 declare const style_constants_d_LINK_TEXT_DECORATION: typeof LINK_TEXT_DECORATION;
-declare const style_constants_d_SPACING_XS: typeof SPACING_XS;
-declare const style_constants_d_SPACING_NORMAL: typeof SPACING_NORMAL;
+declare const style_constants_d_SPACING: typeof SPACING;
 declare namespace style_constants_d {
   export {
+    style_constants_d_BORDER_RADIUS as BORDER_RADIUS,
     style_constants_d_BORDER_THIN as BORDER_THIN,
-    style_constants_d_CORNER_STANDARD as CORNER_STANDARD,
+    style_constants_d_FONT_SIZE as FONT_SIZE,
     style_constants_d_FONT_WEIGHT_REGULAR as FONT_WEIGHT_REGULAR,
     style_constants_d_FONT_WEIGHT_SEMIBOLD as FONT_WEIGHT_SEMIBOLD,
     style_constants_d_FONT_WEIGHT_BOLD as FONT_WEIGHT_BOLD,
@@ -332,8 +341,7 @@ declare namespace style_constants_d {
     style_constants_d_JUMBO_HEIGHT as JUMBO_HEIGHT,
     style_constants_d_SPACER_HEIGHT as SPACER_HEIGHT,
     style_constants_d_LINK_TEXT_DECORATION as LINK_TEXT_DECORATION,
-    style_constants_d_SPACING_XS as SPACING_XS,
-    style_constants_d_SPACING_NORMAL as SPACING_NORMAL,
+    style_constants_d_SPACING as SPACING,
   };
 }
 

package/dist/index.esm.js

@@ -4900,8 +4900,19 @@ var themeUtils = /*#__PURE__*/Object.freeze({
 
 /* These are constants used by nav frontend components */
 
+var BORDER_RADIUS = {
+  MD: "4px" // Figma: Corners/Standard Corner
+};
 var BORDER_THIN = "1px";
-var CORNER_STANDARD = "4px";
+var FONT_SIZE = {
+  XS: "0.750rem",
+  // 12px
+  SM: "0.875rem",
+  // 14px
+  MD: "1.000rem",
+  // 16px
+  LG: "1.125rem" // 18px
+};
 var FONT_WEIGHT_REGULAR = "400";
 var FONT_WEIGHT_SEMIBOLD = "600";
 var FONT_WEIGHT_BOLD = "700";
@@ -4911,13 +4922,17 @@ var COMPACT_JUMBO_HEIGHT = "65px";
 var JUMBO_HEIGHT = "300px";
 var SPACER_HEIGHT = "65px";
 var LINK_TEXT_DECORATION = "underline solid 1px";
-var SPACING_XS = "1.0rem";
-var SPACING_NORMAL = "1.5rem";
+var SPACING = {
+  XS: "1.0rem",
+  // Figma: Spacing/XS
+  MD: "1.5rem" // Figma: Spacing/Normal
+};
 
 var style_constants = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  BORDER_RADIUS: BORDER_RADIUS,
   BORDER_THIN: BORDER_THIN,
-  CORNER_STANDARD: CORNER_STANDARD,
+  FONT_SIZE: FONT_SIZE,
   FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR,
   FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
   FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
@@ -4927,8 +4942,7 @@ var style_constants = /*#__PURE__*/Object.freeze({
   JUMBO_HEIGHT: JUMBO_HEIGHT,
   SPACER_HEIGHT: SPACER_HEIGHT,
   LINK_TEXT_DECORATION: LINK_TEXT_DECORATION,
-  SPACING_XS: SPACING_XS,
-  SPACING_NORMAL: SPACING_NORMAL
+  SPACING: SPACING
 });
 
 /*
@@ -14183,7 +14197,7 @@ var IconQuitLarge = function IconQuitLarge(_ref) {
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
-  }, /*#__PURE__*/React.createElement("title", null, "Icon/X"), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("polygon", {
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("polygon", {
     id: "quit-large-path-1",
     points: "18.9999989 6.40999946 17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993"
   })), /*#__PURE__*/React.createElement("g", {
@@ -25997,7 +26011,7 @@ var useToastNotification = function useToastNotification() {
     toastState = _useState2[0],
     setToastState = _useState2[1];
   useEffect$1(function () {
-    if (toastState.isOpen) {
+    if (toastState.isOpen && timeout > 0) {
       setTimeout(function () {
         setToastState(initialToastState);
       }, timeout);
@@ -46454,7 +46468,7 @@ var ButtonLayoutWrapper = function ButtonLayoutWrapper(_ref) {
   var safeChildren = Array.isArray(children) ? children : [children];
   var flexGrow = isMobile ? "flex-grow: 1;" : "";
   return /*#__PURE__*/React.createElement(Box, {
-    padding: SPACING_NORMAL
+    padding: SPACING.MD
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -46479,16 +46493,18 @@ var CancelButton = function CancelButton(_ref) {
     hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
     _ref$isMobile = _ref.isMobile,
     isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
-  var fullWidth = isMobile ? "width: 100%;" : "";
+  var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
+  var width = isMobile ? "width: 100%;" : "";
   return /*#__PURE__*/React.createElement(ButtonWithAction, {
     action: cancelAction ? cancelAction : hideModal,
-    borderRadius: CORNER_STANDARD,
+    borderRadius: BORDER_RADIUS.MD,
     className: "modal-cancel-button",
     dataQa: cancelButtonText,
-    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(fullWidth),
+    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(width),
     name: cancelButtonText,
     role: "button",
     text: cancelButtonText,
+    textExtraStyles: "".concat(fontSize),
     variant: "secondary"
   });
 };
@@ -46502,16 +46518,18 @@ var CloseButton = function CloseButton(_ref) {
     hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
     _ref$isMobile = _ref.isMobile,
     isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
-  var fullWidth = isMobile ? "width: 100%;" : "";
+  var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
+  var width = isMobile ? "width: 100%;" : "";
   return /*#__PURE__*/React.createElement(ButtonWithAction, {
     action: hideModal,
-    borderRadius: CORNER_STANDARD,
+    borderRadius: BORDER_RADIUS.MD,
     className: "modal-close-button",
     dataQa: closeButtonText,
-    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(fullWidth),
+    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(width),
     name: closeButtonText,
     role: "button",
     text: closeButtonText,
+    textExtraStyles: "".concat(fontSize),
     variant: "primary"
   });
 };
@@ -46534,19 +46552,21 @@ var ContinueButton = function ContinueButton(_ref) {
     _ref$useDangerButton = _ref.useDangerButton,
     useDangerButton = _ref$useDangerButton === void 0 ? false : _ref$useDangerButton;
   var ContinueButtonAtom = continueURL ? ButtonWithLink : ButtonWithAction;
-  var fullWidth = isMobile ? "width: 100%;" : "";
+  var fontSize = "font-size: ".concat(isMobile ? FONT_SIZE.XS : FONT_SIZE.SM, ";");
+  var width = isMobile ? "width: 100%;" : "";
   return /*#__PURE__*/React.createElement(ContinueButtonAtom, {
     action: continueAction,
-    borderRadius: CORNER_STANDARD,
+    borderRadius: BORDER_RADIUS.MD,
     className: "modal-continue-button",
     dataQa: continueButtonText,
     disabled: isContinueActionDisabled,
-    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(fullWidth),
+    extraStyles: "".concat(buttonExtraStyles, "; margin: 0; ").concat(width),
     isLoading: isLoading,
-    linkExtraStyles: "display: inline-block; ".concat(fullWidth),
+    linkExtraStyles: "display: inline-block; ".concat(width),
     name: continueButtonText,
     role: "button",
     text: continueButtonText,
+    textExtraStyles: "".concat(fontSize),
     url: continueURL,
     variant: useDangerButton ? "danger" : "primary"
   });
@@ -46601,11 +46621,11 @@ var Modal$2 = function Modal(_ref) {
     _ref$maxHeight = _ref.maxHeight,
     maxHeight = _ref$maxHeight === void 0 ? "" : _ref$maxHeight,
     _ref$modalBodyBg = _ref.modalBodyBg,
-    modalBodyBg = _ref$modalBodyBg === void 0 ? ATHENS_GREY : _ref$modalBodyBg,
+    modalBodyBg = _ref$modalBodyBg === void 0 ? "" : _ref$modalBodyBg,
     _ref$modalBodyText = _ref.modalBodyText,
     modalBodyText = _ref$modalBodyText === void 0 ? "" : _ref$modalBodyText,
     _ref$modalHeaderBg = _ref.modalHeaderBg,
-    modalHeaderBg = _ref$modalHeaderBg === void 0 ? WHITE : _ref$modalHeaderBg,
+    modalHeaderBg = _ref$modalHeaderBg === void 0 ? "" : _ref$modalHeaderBg,
     _ref$modalHeaderText = _ref.modalHeaderText,
     modalHeaderText = _ref$modalHeaderText === void 0 ? "" : _ref$modalHeaderText,
     _ref$modalOpen = _ref.modalOpen,
@@ -46663,8 +46683,8 @@ var Modal$2 = function Modal(_ref) {
       WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
     },
     dialogStyle: {
-      borderRadius: CORNER_STANDARD,
-      margin: SPACING_XS,
+      borderRadius: BORDER_RADIUS.MD,
+      margin: SPACING.XS,
       overflow: "auto",
       width: isMobile ? "" : customWidth || "615px"
     },
@@ -46676,29 +46696,29 @@ var Modal$2 = function Modal(_ref) {
     padding: "0",
     boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)"
   }, /*#__PURE__*/React.createElement(Box, {
-    background: modalHeaderBg,
+    background: modalHeaderBg || WHITE,
     borderColor: SILVER_GREY,
     borderWidthOverride: "0 0 ".concat(BORDER_THIN, " 0"),
-    padding: "".concat(SPACING_XS, " ").concat(SPACING_NORMAL)
+    padding: "".concat(SPACING.XS, " ").concat(SPACING.MD)
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
   }, /*#__PURE__*/React.createElement(Title$1, {
     as: "h2",
     weight: FONT_WEIGHT_SEMIBOLD,
-    fontSize: "1.25rem"
+    fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG
   }, modalHeaderText))), /*#__PURE__*/React.createElement(Box, {
-    background: modalBodyBg,
+    background: modalBodyBg || ATHENS_GREY,
     padding: "0"
   }, /*#__PURE__*/React.createElement(Box, {
-    padding: SPACING_NORMAL,
+    padding: SPACING.MD,
     borderWidthOverride: !noButtons && "0 0 ".concat(BORDER_THIN, " 0"),
     borderColor: !noButtons && SILVER_GREY,
     extraStyles: maxHeight ? "max-height: ".concat(maxHeight, "; overflow: auto;") : ""
   }, defaultWrapper ? /*#__PURE__*/React.createElement(Paragraph$1, {
-    variant: "p"
+    variant: isMobile ? "pS" : "p"
   }, modalBodyText) : /*#__PURE__*/React.createElement(Box, {
-    padding: maxHeight ? "0 0 ".concat(SPACING_XS, " 0") : "0"
+    padding: maxHeight ? "0 0 ".concat(SPACING.XS, " 0") : "0"
   }, modalBodyText)), noButtons ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement(ButtonLayoutWrapper, {
     isMobile: isMobile
   }, [hasCancelButton && /*#__PURE__*/React.createElement(CancelButton, {
@@ -50230,7 +50250,9 @@ var ToastNotification = function ToastNotification(_ref) {
     height = _ref$height === void 0 ? "56px" : _ref$height,
     _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? "1rem" : _ref$childGap,
-    backgroundColor = _ref.backgroundColor;
+    backgroundColor = _ref.backgroundColor,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? "alert" : _ref$role;
   return /*#__PURE__*/React.createElement(Box, {
     onClick: closeToastNotification,
     background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === VARIANTS.ERROR ? ERROR_BACKGROUND_COLOR : WHITE,
@@ -50241,7 +50263,12 @@ var ToastNotification = function ToastNotification(_ref) {
     padding: "0rem 1rem",
     borderRadius: "4px",
     boxShadow: generateShadows().standard.base,
-    extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n      cursor: pointer;\n    ")
+    extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n      cursor: pointer;\n    "),
+    role: role
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    align: "center",
+    childGap: childGap,
+    justify: "space-between"
   }, /*#__PURE__*/React.createElement(Cluster, {
     align: "center",
     childGap: childGap
@@ -50251,7 +50278,7 @@ var ToastNotification = function ToastNotification(_ref) {
   }, /*#__PURE__*/React.createElement(Paragraph$1, {
     weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "word-break: break-word;"
-  }, message)), /*#__PURE__*/React.createElement(IconQuitLarge, null)));
+  }, message))), /*#__PURE__*/React.createElement(IconQuitLarge, null)));
 };
 
 var fontWeight$9 = "600";