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

package/dist/index.esm.js

@@ -27495,7 +27495,15 @@ var Spinner$1 = function Spinner(_ref6) {
     size = _ref6$size === void 0 ? "24" : _ref6$size,
     _ref6$centerSpinner = _ref6.centerSpinner,
     centerSpinner = _ref6$centerSpinner === void 0 ? false : _ref6$centerSpinner,
-    themeValues = _ref6.themeValues;
+    themeValues = _ref6.themeValues,
+    _ref6$cx = _ref6.cx,
+    cx = _ref6$cx === void 0 ? "50" : _ref6$cx,
+    _ref6$cy = _ref6.cy,
+    cy = _ref6$cy === void 0 ? "50" : _ref6$cy,
+    _ref6$radius = _ref6.radius,
+    radius = _ref6$radius === void 0 ? "25" : _ref6$radius,
+    _ref6$strokeWidth = _ref6.strokeWidth,
+    strokeWidth = _ref6$strokeWidth === void 0 ? "6" : _ref6$strokeWidth;
   return /*#__PURE__*/React.createElement(SpinnerContainer$2, {
     centerSpinner: centerSpinner,
     size: size
@@ -27505,11 +27513,11 @@ var Spinner$1 = function Spinner(_ref6) {
     centerSpinner: centerSpinner
   }, /*#__PURE__*/React.createElement("circle", {
     className: "path",
-    cx: "50",
-    cy: "50",
-    r: "25",
+    cx: cx,
+    cy: cy,
+    r: radius,
     fill: "none",
-    strokeWidth: "6"
+    strokeWidth: strokeWidth
   })));
 };
 var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$r);
@@ -39257,7 +39265,7 @@ var backgroundColor$6 = {
   primary: WHITE
 };
 var color$b = {
-  primary: ROYAL_BLUE
+  primary: ROYAL_BLUE_VIVID
 };
 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;")
@@ -39406,35 +39414,49 @@ var WalletName = function WalletName(_ref) {
     _ref$disableAction = _ref.disableAction,
     disableAction = _ref$disableAction === void 0 ? false : _ref$disableAction,
     _ref$buttonExtraStyle = _ref.buttonExtraStyles,
-    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle;
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Module$1, {
     spacingBottom: isMobile ? "0" : "1.5rem"
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    align: "center",
+    justify: !!text || !!actionText ? "space-between" : "flex-start",
+    extraStyles: "\n            box-shadow: ".concat(themeValues.boxShadow, ";\n            padding: 1.5rem;\n            ").concat(isMobile ? "span {text-align: right;}" : "", "\n          ")
   }, /*#__PURE__*/React.createElement(Box, {
-    padding: "24px",
-    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;"
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 0"
-  }, /*#__PURE__*/React.createElement(Text$1, null, mainText)), !isMobile && /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: ""
+  }, isLoading ? /*#__PURE__*/React.createElement(Center, {
+    as: "span",
+    style: {
+      padding: "24px 24px 0"
+    },
+    intrinsic: true
+  }, /*#__PURE__*/React.createElement(Spinner$2, {
+    strokeWidth: "2",
+    size: "24",
+    radius: "10",
+    cx: "12",
+    cy: "12"
+  })) : /*#__PURE__*/React.createElement(Text$1, null, mainText)), !isMobile && /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, text && /*#__PURE__*/React.createElement(Text$1, {
     variant: "pXS"
-  }, text), text && actionText && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React.createElement(ButtonWithAction, {
+  }, text), (text || actionText) && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React.createElement(ButtonWithAction, {
     disabled: disableAction,
     text: actionText,
     action: action,
     variant: "smallGhost",
     extraStyles: "\n                  margin: 0;\n                  min-width: 0;\n                  span {font-size: 0.75rem;}\n                  ".concat(buttonExtraStyles, "\n                ")
-  })))), isMobile && /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 24px",
-    extraStyles: "display: flex; align-items: center; justify-content: flex-end;"
+  })))), isMobile && /*#__PURE__*/React.createElement(Cluster, {
+    align: "center",
+    justify: text || actionText ? "flex-end" : "flex-start",
+    extraStyles: "margin-top: 0.5rem;"
   }, text && /*#__PURE__*/React.createElement(Text$1, {
     extraStyles: "font-size: 12px"
-  }, text), action && actionText && /*#__PURE__*/React.createElement(ButtonWithAction, {
+  }, text), (text || actionText) && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: actionText,
     action: action,
     variant: "smallGhost",