@thecb/components 10.6.0-beta.1 → 10.6.0-beta.3

package/dist/index.esm.js

@@ -39404,40 +39404,41 @@ var WalletName = function WalletName(_ref) {
     actionText = _ref.actionText,
     themeValues = _ref.themeValues,
     _ref$disableAction = _ref.disableAction,
-    disableAction = _ref$disableAction === void 0 ? false : _ref$disableAction;
+    disableAction = _ref$disableAction === void 0 ? false : _ref$disableAction,
+    _ref$buttonExtraStyle = _ref.buttonExtraStyles,
+    buttonExtraStyles = _ref$buttonExtraStyle === void 0 ? "" : _ref$buttonExtraStyle;
   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(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(Cluster, {
+    align: "center",
+    justify: !!text || !!actionText ? "space-between" : !text && !actionText && isMobile ? "flex-end" : "flex-end",
+    extraStyles: "\n            box-shadow: ".concat(themeValues.boxShadow, "; \n            padding: 1.5rem;\n            ").concat(isMobile ? "span {text-align: right;}" : "", "\n          ")
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 0"
   }, /*#__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: " margin-left: 0; min-width: 0; span {font-size: 0.75rem;} "
-  })))), isMobile && /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 24px",
-    extraStyles: "display: flex; align-items: center; justify-content: flex-end;"
+    extraStyles: "\n                  margin: 0;\n                  min-width: 0;\n                  span {font-size: 0.75rem;}\n                  ".concat(buttonExtraStyles, "\n                ")
+  })))), isMobile && /*#__PURE__*/React.createElement(Cluster, {
+    align: "center",
+    justify: text || actionText ? "flex-end" : "flex-start",
+    extraStyles: "margin-top: 0.75rem;"
   }, 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",
-    extraStyles: "span {font-size: 12px;}",
-    disabled: disableAction
+    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");