@thecb/components 10.4.6-beta.6 → 10.4.6-beta.8

package/dist/index.cjs.js

@@ -14131,7 +14131,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",
@@ -14146,7 +14148,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", {
@@ -14164,6 +14166,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"
@@ -14180,7 +14183,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", {
@@ -25994,7 +25997,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);
@@ -27836,13 +27839,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,
@@ -27850,12 +27853,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)))))))))));
 };
@@ -39235,8 +39240,12 @@ var LoadingLine = function LoadingLine(_ref) {
 var backgroundColor$6 = {
   primary: WHITE
 };
+var boxShadow$1 = {
+  primary: "box-shadow: 0px 1px 2px 0px #292A331A;\n    box-shadow: 0px 2px 6px 0px #292a3333; \n    box-shadow: 0px -1px 0px 0px #292A331A inset;"
+};
 var fallbackValues$C = {
-  backgroundColor: backgroundColor$6
+  backgroundColor: backgroundColor$6,
+  boxShadow: boxShadow$1
 };
 
 var fontSize$9 = {
@@ -39274,7 +39283,7 @@ var titleSpacing = {
   largeTitle: "1.125rem",
   small: "0.5rem"
 };
-var boxShadow$1 = {
+var boxShadow$2 = {
   "default": "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
   largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
   small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
@@ -39297,7 +39306,7 @@ var fallbackValues$D = {
   textAlign: textAlign,
   titleType: titleType,
   titleSpacing: titleSpacing,
-  boxShadow: boxShadow$1,
+  boxShadow: boxShadow$2,
   borderRadius: borderRadius,
   backgroundColor: backgroundColor$7
 };
@@ -39375,16 +39384,18 @@ var WalletName = function WalletName(_ref) {
     _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;
+    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;
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Module$1, {
     spacingBottom: isMobile ? "0" : "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "24px",
+    boxShadow: themeValues.boxShadow,
     spacingBottom: "0",
     margin: "0 0 0 0",
-    extraStyles: isMobile ? "box-shadow: 0px 1px 2px 0px #292A331A; box-shadow: 0px 2px 6px 0px #292A3333; box-shadow: 0px 1px 0px 0px #292A331A inset;\n; display: flex; flex-direction: column; flex-wrap: wrap; \n          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, personName)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
@@ -39397,7 +39408,7 @@ var WalletName = function WalletName(_ref) {
     variant: "smallGhost",
     extraStyles: "span {font-size: 12px;}"
   })))), isMobile && /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
+    padding: "0 0 24px",
     extraStyles: "display: flex; align-items: center; justify-content: flex-end;"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     extraStyles: "font-size: 12px"
@@ -48314,23 +48325,21 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       toggleOpen(false);
     },
     initialFocusSelector: "[name='Close']"
-  }, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "pS",
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "ghost",
+    tabIndex: "0",
     onClick: function onClick() {
       return toggleOpen(true);
     },
     onKeyPress: function onKeyPress(e) {
       return e.key === "Enter" && toggleOpen(true);
     },
-    tabIndex: "0",
-    color: themeValues.linkColor,
-    weight: themeValues.fontWeight,
-    hoverStyles: themeValues.modalLinkHoverFocus,
-    textDecoration: themeValues.linkTextDecoration,
-    extraStyles: "cursor: pointer;",
-    role: "button",
-    className: "modal-trigger"
-  }, link));
+    extraStyles: "min-width: 0; min-height: 0;margin: 0; padding: 0; text-transform: none;",
+    text: /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "pS",
+      color: "inherit"
+    }, link)
+  }));
 };
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$P, "default");
 
@@ -49970,7 +49979,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,
@@ -49981,7 +49992,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
@@ -49991,7 +50007,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";