@thecb/components 7.12.2-beta.4 → 7.12.2-beta.5

package/dist/index.cjs.js

@@ -25581,7 +25581,7 @@ var fallbackValues$q = {
 var SpinnerSvgAnimation = styled__default.svg.withConfig({
   displayName: "Spinner__SpinnerSvgAnimation",
   componentId: "sc-vhupl9-0"
-})(["animation:rotate 2s linear infinite;margin:-25px 0 0 -25px;width:", "px;height:", "px;& .path{stroke:", ";stroke-linecap:round;animation:dash 1.5s ease-in-out infinite;}@keyframes rotate{100%{transform:rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"], function (_ref) {
+})(["animation:rotate 2s linear infinite;margin:-25px 0 0 -25px;width:", "px;height:", "px;& .path{stroke:", ";stroke-linecap:round;animation:dash 1.5s ease-in-out infinite;}@keyframes rotate{100%{transform:rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", ""], function (_ref) {
   var size = _ref.size;
   return size;
 }, function (_ref2) {
@@ -25590,19 +25590,36 @@ var SpinnerSvgAnimation = styled__default.svg.withConfig({
 }, function (_ref3) {
   var color = _ref3.color;
   return color;
+}, function (_ref4) {
+  var centerSpinner = _ref4.centerSpinner;
+  return centerSpinner ? styled.css(["margin:0;"]) : "";
 });
 var SpinnerContainer$2 = styled__default.div.withConfig({
   displayName: "Spinner__SpinnerContainer",
   componentId: "sc-vhupl9-1"
-})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;"]);
+})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;", ""], function (_ref5) {
+  var centerSpinner = _ref5.centerSpinner,
+      size = _ref5.size;
+  return centerSpinner ? styled.css(["width:", "px;height:", "px;"], size, size) : "";
+});
+/*
+  `centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
+  containers. Default is false to preserve legacy behavior for past uses.
+*/
 
-var Spinner$1 = function Spinner(_ref4) {
-  var _ref4$size = _ref4.size,
-      size = _ref4$size === void 0 ? "24" : _ref4$size,
-      themeValues = _ref4.themeValues;
-  return /*#__PURE__*/React__default.createElement(SpinnerContainer$2, null, /*#__PURE__*/React__default.createElement(SpinnerSvgAnimation, {
+var Spinner$1 = function Spinner(_ref6) {
+  var _ref6$size = _ref6.size,
+      size = _ref6$size === void 0 ? "24" : _ref6$size,
+      _ref6$centerSpinner = _ref6.centerSpinner,
+      centerSpinner = _ref6$centerSpinner === void 0 ? false : _ref6$centerSpinner,
+      themeValues = _ref6.themeValues;
+  return /*#__PURE__*/React__default.createElement(SpinnerContainer$2, {
+    centerSpinner: centerSpinner,
+    size: size
+  }, /*#__PURE__*/React__default.createElement(SpinnerSvgAnimation, {
     size: size,
-    color: themeValues.color
+    color: themeValues.color,
+    centerSpinner: centerSpinner
   }, /*#__PURE__*/React__default.createElement("circle", {
     className: "path",
     cx: "50",
@@ -46998,10 +47015,10 @@ var LoadingDetails = function LoadingDetails() {
     intrinsic: true
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    minHeight: "100px",
-    minWidth: "100px"
+    extraStyles: "flex-grow: 1; display: flex; justify-content: center; align-items: center;"
   }, /*#__PURE__*/React__default.createElement(Spinner$2, {
-    size: "100"
+    size: "100",
+    centerSpinner: true
   })))));
 };