@thecb/components 10.5.0-beta.4 → 10.5.0-beta.6

package/dist/index.cjs.js

@@ -4908,8 +4908,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";
@@ -4919,13 +4930,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,
@@ -4935,8 +4950,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
 });
 
 /*
@@ -14139,7 +14153,9 @@ var GenericErrorIcon = function GenericErrorIcon() {
   }));
 };
 
-var IconAdd = function IconAdd() {
+var IconAdd = function IconAdd(_ref) {
+  var _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -14154,7 +14170,7 @@ var IconAdd = function IconAdd() {
     fill: "none",
     fillRule: "evenodd",
     stroke: "none",
-    strokeWidth: "1"
+    strokeWidth: strokeWidth
   }, /*#__PURE__*/React__default.createElement("g", {
     transform: "translate(-407 -563)"
   }, /*#__PURE__*/React__default.createElement("g", {
@@ -14172,6 +14188,7 @@ var IconAdd = function IconAdd() {
     xlinkHref: "#path-1"
   })), /*#__PURE__*/React__default.createElement("circle", {
     className: "stroke",
+    strokeWidth: strokeWidth,
     cx: "8.155",
     cy: "8.072",
     r: "8"
@@ -14188,7 +14205,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__default.createElement("title", null, "Icon/X"), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("polygon", {
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.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__default.createElement("g", {
@@ -26002,7 +26019,7 @@ var useToastNotification = function useToastNotification() {
     toastState = _useState2[0],
     setToastState = _useState2[1];
   React.useEffect(function () {
-    if (toastState.isOpen) {
+    if (toastState.isOpen && timeout > 0) {
       setTimeout(function () {
         setToastState(initialToastState);
       }, timeout);
@@ -27844,13 +27861,13 @@ var Placeholder = function Placeholder(_ref2) {
     childGap: "0"
   }, variant === "large" && /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: ".fill { \n                    fill: ".concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  }")
+    extraStyles: ".fill { \n                    fill: ".concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } ")
   }, variant === "large" ? /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, getLargeIcon(largeIcon), /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.color,
-    weight: FONT_WEIGHT_REGULAR,
+    weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "text-align: center;"
   }, text)) : /*#__PURE__*/React__default.createElement(Cover, {
     singleChild: true,
@@ -27858,12 +27875,14 @@ var Placeholder = function Placeholder(_ref2) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(IconAdd, null), /*#__PURE__*/React__default.createElement(Center, {
+  }, /*#__PURE__*/React__default.createElement(IconAdd, {
+    strokeWidth: "2"
+  }), /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     color: themeValues.color,
-    weight: FONT_WEIGHT_REGULAR,
+    weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "padding: 0 0 0 8px; text-align: center;"
   }, text)))))))))));
 };
@@ -46317,7 +46336,7 @@ var Modal$1 = function Modal(_ref) {
   //   - https://react.dev/reference/react/useRef#caveats
   //   - https://github.com/davidtheclark/react-aria-modal/pull/103
   //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
-  var modalContainerRef = React.useRef("[id='react-aria-modal-dialog']");
+  var modalContainerRef = React.useRef("#react-aria-modal-dialog");
   return /*#__PURE__*/React__default.createElement("div", {
     ref: modalContainerRef,
     tabIndex: "-1",
@@ -46457,7 +46476,7 @@ var ButtonLayoutWrapper = function ButtonLayoutWrapper(_ref) {
   var safeChildren = Array.isArray(children) ? children : [children];
   var flexGrow = isMobile ? "flex-grow: 1;" : "";
   return /*#__PURE__*/React__default.createElement(Box, {
-    padding: SPACING_NORMAL
+    padding: SPACING.MD
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -46482,16 +46501,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__default.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"
   });
 };
@@ -46505,16 +46526,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__default.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"
   });
 };
@@ -46537,19 +46560,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__default.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"
   });
@@ -46604,11 +46629,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,
@@ -46640,7 +46665,7 @@ var Modal$2 = function Modal(_ref) {
   //   - https://react.dev/reference/react/useRef#caveats
   //   - https://github.com/davidtheclark/react-aria-modal/pull/103
   //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
-  var modalContainerRef = React.useRef("[id='react-aria-modal-dialog']");
+  var modalContainerRef = React.useRef("#react-aria-modal-dialog");
   var hasCloseButton = onlyCloseButton && !noButtons;
   var hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
   var hasContinueButton = onlyContinueButton && !noButtons || !onlyCloseButton && !noButtons;
@@ -46666,8 +46691,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"
     },
@@ -46679,29 +46704,29 @@ var Modal$2 = function Modal(_ref) {
     padding: "0",
     boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)"
   }, /*#__PURE__*/React__default.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__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Title$1, {
     as: "h2",
     weight: FONT_WEIGHT_SEMIBOLD,
-    fontSize: "1.25rem"
+    fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG
   }, modalHeaderText))), /*#__PURE__*/React__default.createElement(Box, {
-    background: modalBodyBg,
+    background: modalBodyBg || ATHENS_GREY,
     padding: "0"
   }, /*#__PURE__*/React__default.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__default.createElement(Paragraph$1, {
-    variant: "p"
+    variant: isMobile ? "pS" : "p"
   }, modalBodyText) : /*#__PURE__*/React__default.createElement(Box, {
-    padding: maxHeight ? "0 0 ".concat(SPACING_XS, " 0") : "0"
+    padding: maxHeight ? "0 0 ".concat(SPACING.XS, " 0") : "0"
   }, modalBodyText)), noButtons ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : /*#__PURE__*/React__default.createElement(ButtonLayoutWrapper, {
     isMobile: isMobile
   }, [hasCancelButton && /*#__PURE__*/React__default.createElement(CancelButton, {
@@ -50233,7 +50258,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__default.createElement(Box, {
     onClick: closeToastNotification,
     background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === VARIANTS.ERROR ? ERROR_BACKGROUND_COLOR : WHITE,
@@ -50244,7 +50271,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__default.createElement(Cluster, {
+    align: "center",
+    childGap: childGap,
+    justify: "space-between"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     align: "center",
     childGap: childGap
@@ -50254,7 +50286,7 @@ var ToastNotification = function ToastNotification(_ref) {
   }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
     weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "word-break: break-word;"
-  }, message)), /*#__PURE__*/React__default.createElement(IconQuitLarge, null)));
+  }, message))), /*#__PURE__*/React__default.createElement(IconQuitLarge, null)));
 };
 
 var fontWeight$9 = "600";