@thecb/components 10.6.0-beta.0 → 10.6.0-beta.2

package/dist/index.cjs.js

@@ -4919,7 +4919,9 @@ var FONT_SIZE = {
   // 14px
   MD: "1.000rem",
   // 16px
-  LG: "1.125rem" // 18px
+  LG: "1.125rem",
+  // 18px
+  XL: "1.250rem" //20px
 };
 var FONT_WEIGHT_REGULAR = "400";
 var FONT_WEIGHT_SEMIBOLD = "600";
@@ -39262,11 +39264,15 @@ var LoadingLine = function LoadingLine(_ref) {
 var backgroundColor$6 = {
   primary: WHITE
 };
+var color$b = {
+  primary: ROYAL_BLUE
+};
 var boxShadow$1 = {
   primary: "box-shadow: 0px 1px 2px 0px rgba(".concat(CHARADE_GREY, ", 0.1);\n    box-shadow: 0px 2px 6px 0px rgba(").concat(CHARADE_GREY, ", 0.2);\n    box-shadow: 0px -1px 0px 0px rgba(").concat(CHARADE_GREY, ", 0.1) inset;")
 };
 var fallbackValues$C = {
   backgroundColor: backgroundColor$6,
+  color: color$b,
   boxShadow: boxShadow$1
 };
 
@@ -39400,17 +39406,17 @@ var Module = function Module(_ref) {
 var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$D, "default"));
 
 var WalletName = function WalletName(_ref) {
-  var _ref$mainText = _ref.mainText,
-    mainText = _ref$mainText === void 0 ? "" : _ref$mainText,
-    _ref$action = _ref.action,
-    action = _ref$action === void 0 ? noop : _ref$action,
-    _ref$text = _ref.text,
-    text = _ref$text === void 0 ? "Not you?" : _ref$text,
-    _ref$actionText = _ref.actionText,
-    actionText = _ref$actionText === void 0 ? "Check out as a guest" : _ref$actionText,
-    themeValues = _ref.themeValues;
-  var themeContext = React.useContext(styled.ThemeContext);
-  var isMobile = themeContext.isMobile;
+  var mainText = _ref.mainText,
+    action = _ref.action,
+    text = _ref.text,
+    actionText = _ref.actionText,
+    themeValues = _ref.themeValues,
+    _ref$disableAction = _ref.disableAction,
+    disableAction = _ref$disableAction === void 0 ? false : _ref$disableAction,
+    _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle;
+  var _useContext = React.useContext(styled.ThemeContext),
+    isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Module$1, {
     spacingBottom: isMobile ? "0" : "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -39418,28 +39424,30 @@ var WalletName = function WalletName(_ref) {
     boxShadow: themeValues.boxShadow,
     spacingBottom: "0",
     margin: "0 0 0 0",
-    extraStyles: isMobile ? "display: flex; flex-direction: column; flex-wrap: wrap;  span {text - align: right;}" : "display: flex; justify-content: space-between; align-items: center;"
+    extraStyles: isMobile ? "display: flex; flex-direction: column; flex-wrap: wrap;  span {text-align: right;}" : "display: flex; justify-content: space-between; align-items: center;"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0"
   }, /*#__PURE__*/React__default.createElement(Text$1, null, mainText)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
+  }, text && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pXS"
-  }, text), "\xA0", /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+  }, text), text && actionText && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    disabled: disableAction,
     text: actionText,
     action: action,
     variant: "smallGhost",
-    extraStyles: " margin-left: 0; span {font-size: 0.75rem;} "
+    extraStyles: "\n                  margin: 0;\n                  min-width: 0;\n                  span {font-size: 0.75rem;}\n                  ".concat(buttonExtraStyles, "\n                ")
   })))), isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 24px",
     extraStyles: "display: flex; align-items: center; justify-content: flex-end;"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
+  }, text && /*#__PURE__*/React__default.createElement(Text$1, {
     extraStyles: "font-size: 12px"
-  }, text), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+  }, text), action && actionText && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: actionText,
     action: action,
     variant: "smallGhost",
-    extraStyles: "span {font-size: 12px;}"
+    disabled: disableAction,
+    extraStyles: "\n                margin: 0;\n                min-width: 0;\n                span {font-size: 0.75rem;}\n                ".concat(buttonExtraStyles, "\n              ")
   })));
 };
 var WalletName$1 = themeComponent(WalletName, "WalletName", fallbackValues$C, "primary");
@@ -42877,7 +42885,7 @@ var backgroundColor$b = {
 var borderColor$5 = {
   primary: MOON_RAKER
 };
-var color$b = {
+var color$c = {
   primary: ROYAL_BLUE_VIVID
 };
 var fallbackValues$K = {
@@ -42887,7 +42895,7 @@ var fallbackValues$K = {
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$b,
   borderColor: borderColor$5,
-  color: color$b
+  color: color$c
 };
 
 var Container = styled__default(Box).withConfig({
@@ -46682,6 +46690,8 @@ var CancelButton = function CancelButton(_ref) {
     cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
     _ref$cancelButtonText = _ref.cancelButtonText,
     cancelButtonText = _ref$cancelButtonText === void 0 ? "" : _ref$cancelButtonText,
+    _ref$cancelButtonVari = _ref.cancelButtonVariant,
+    cancelButtonVariant = _ref$cancelButtonVari === void 0 ? "secondary" : _ref$cancelButtonVari,
     _ref$hideModal = _ref.hideModal,
     hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
     _ref$isMobile = _ref.isMobile,
@@ -46698,7 +46708,7 @@ var CancelButton = function CancelButton(_ref) {
     role: "button",
     text: cancelButtonText,
     textExtraStyles: "".concat(fontSize),
-    variant: "secondary"
+    variant: cancelButtonVariant
   });
 };
 
@@ -46727,6 +46737,30 @@ var CloseButton = function CloseButton(_ref) {
   });
 };
 
+var CloseIconButton = function CloseIconButton(_ref) {
+  var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    _ref$hideModal = _ref.hideModal,
+    hideModal = _ref$hideModal === void 0 ? noop : _ref$hideModal,
+    _ref$iconWidth = _ref.iconWidth,
+    iconWidth = _ref$iconWidth === void 0 ? "24" : _ref$iconWidth,
+    _ref$iconHeight = _ref.iconHeight,
+    iconHeight = _ref$iconHeight === void 0 ? "24" : _ref$iconHeight,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? "Close Modal" : _ref$ariaLabel;
+  return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    action: hideModal,
+    "aria-label": ariaLabel,
+    contentOverride: true,
+    extraStyles: "\n        min-height: auto;\n        min-width: auto;\n        height: 1.5rem;\n        margin: 0 0 0 0.5rem;\n        &:focus {\n            outline-offset: -3px;\n        }\n     ",
+    variant: "smallGhost"
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    role: "img",
+    "aria-hidden": "true",
+    iconWidth: iconWidth,
+    iconHeight: iconHeight
+  }));
+};
+
 var ContinueButton = function ContinueButton(_ref) {
   var _ref$buttonExtraStyle = _ref.buttonExtraStyles,
     buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
@@ -46736,6 +46770,8 @@ var ContinueButton = function ContinueButton(_ref) {
     continueButtonText = _ref$continueButtonTe === void 0 ? "" : _ref$continueButtonTe,
     _ref$continueURL = _ref.continueURL,
     continueURL = _ref$continueURL === void 0 ? "" : _ref$continueURL,
+    _ref$continueButtonVa = _ref.continueButtonVariant,
+    continueButtonVariant = _ref$continueButtonVa === void 0 ? "primary" : _ref$continueButtonVa,
     _ref$isContinueAction = _ref.isContinueActionDisabled,
     isContinueActionDisabled = _ref$isContinueAction === void 0 ? false : _ref$isContinueAction,
     _ref$isLoading = _ref.isLoading,
@@ -46761,7 +46797,7 @@ var ContinueButton = function ContinueButton(_ref) {
     text: continueButtonText,
     textExtraStyles: "".concat(fontSize),
     url: continueURL,
-    variant: useDangerButton ? "danger" : "primary"
+    variant: useDangerButton ? "danger" : continueButtonVariant
   });
 };
 
@@ -46787,6 +46823,8 @@ var Modal$2 = function Modal(_ref) {
     cancelAction = _ref$cancelAction === void 0 ? noop : _ref$cancelAction,
     _ref$cancelButtonText = _ref.cancelButtonText,
     cancelButtonText = _ref$cancelButtonText === void 0 ? "Cancel" : _ref$cancelButtonText,
+    _ref$cancelButtonVari = _ref.cancelButtonVariant,
+    cancelButtonVariant = _ref$cancelButtonVari === void 0 ? "secondary" : _ref$cancelButtonVari,
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? [] : _ref$children,
     _ref$closeButtonText = _ref.closeButtonText,
@@ -46795,6 +46833,8 @@ var Modal$2 = function Modal(_ref) {
     continueAction = _ref$continueAction === void 0 ? noop : _ref$continueAction,
     _ref$continueButtonTe = _ref.continueButtonText,
     continueButtonText = _ref$continueButtonTe === void 0 ? "Continue" : _ref$continueButtonTe,
+    _ref$continueButtonVa = _ref.continueButtonVariant,
+    continueButtonVariant = _ref$continueButtonVa === void 0 ? "primary" : _ref$continueButtonVa,
     _ref$continueURL = _ref.continueURL,
     continueURL = _ref$continueURL === void 0 ? "" : _ref$continueURL,
     _ref$customWidth = _ref.customWidth,
@@ -46831,6 +46871,8 @@ var Modal$2 = function Modal(_ref) {
     onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
     _ref$onlyContinueButt = _ref.onlyContinueButton,
     onlyContinueButton = _ref$onlyContinueButt === void 0 ? false : _ref$onlyContinueButt,
+    _ref$showCloseIconBut = _ref.showCloseIconButton,
+    showCloseIconButton = _ref$showCloseIconBut === void 0 ? false : _ref$showCloseIconBut,
     _ref$underlayClickExi = _ref.underlayClickExits,
     underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
     _ref$useDangerButton = _ref.useDangerButton,
@@ -46879,7 +46921,7 @@ var Modal$2 = function Modal(_ref) {
       borderRadius: BORDER_RADIUS.MD,
       margin: SPACING.XS,
       overflow: "auto",
-      width: isMobile ? "" : customWidth || "615px"
+      width: isMobile ? "" : customWidth || "576px"
     },
     underlayClickExits: underlayClickExits,
     "aria-modal": true,
@@ -46894,13 +46936,16 @@ var Modal$2 = function Modal(_ref) {
     borderWidthOverride: "0 0 ".concat(BORDER_THIN, " 0"),
     padding: "".concat(SPACING.XS, " ").concat(SPACING.MD)
   }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "flex-start",
-    align: "center"
+    justify: showCloseIconButton ? "space-between" : "flex-start",
+    align: showCloseIconButton && isMobile ? "flex-start" : "center",
+    nowrap: true
   }, /*#__PURE__*/React__default.createElement(Title$1, {
     as: "h2",
     weight: FONT_WEIGHT_SEMIBOLD,
     fontSize: isMobile ? FONT_SIZE.MD : FONT_SIZE.LG
-  }, modalHeaderText))), /*#__PURE__*/React__default.createElement(Box, {
+  }, modalHeaderText), showCloseIconButton && /*#__PURE__*/React__default.createElement(CloseIconButton, {
+    hideModal: hideModal
+  }))), /*#__PURE__*/React__default.createElement(Box, {
     background: modalBodyBg || ATHENS_GREY,
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -46918,6 +46963,7 @@ var Modal$2 = function Modal(_ref) {
     buttonExtraStyles: buttonExtraStyles,
     cancelAction: cancelAction,
     cancelButtonText: cancelButtonText,
+    cancelButtonVariant: cancelButtonVariant,
     hideModal: hideModal,
     isMobile: isMobile,
     key: "cancel"
@@ -46926,6 +46972,7 @@ var Modal$2 = function Modal(_ref) {
     continueAction: continueAction,
     continueButtonText: continueButtonText,
     continueURL: continueURL,
+    continueButtonVariant: continueButtonVariant,
     isContinueActionDisabled: isContinueActionDisabled,
     isLoading: isLoading,
     isMobile: isMobile,
@@ -47108,14 +47155,14 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
-var color$c = "#15749D";
+var color$d = "#15749D";
 var hoverColor$5 = "#116285";
 var activeColor$8 = "#0E506D";
 var linkColor$4 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
 var fallbackValues$M = {
-  color: color$c,
+  color: color$d,
   hoverColor: hoverColor$5,
   activeColor: activeColor$8,
   linkColor: linkColor$4,