@janiscommerce/ui-web 0.30.0 → 0.31.0

package/dist/index.umd.js

@@ -5647,7 +5647,7 @@
   });
 
   var _templateObject$4;
-  var styles = {
+  var styles$2 = {
     Svg: styled__default["default"].svg.withConfig({
       displayName: "styles__Svg",
       componentId: "sc-jf3e5i-0"
@@ -5671,7 +5671,7 @@
     Item: styled__default["default"].div.withConfig({
       displayName: "styles__Item",
       componentId: "sc-jf3e5i-3"
-    })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), palette.blue, styles.Svg, palette.blue),
+    })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles$2.Svg, mixins.transition('fill'), palette.blue, styles$2.Svg, palette.blue),
     SearchInput: styled__default["default"].input.withConfig({
       displayName: "styles__SearchInput",
       componentId: "sc-jf3e5i-4"
@@ -7098,7 +7098,7 @@
     var color = _ref.color,
         name = _ref.name,
         sizeProp = _ref.size,
-        styles$1 = _ref.styles,
+        styles = _ref.styles,
         pathStyles = _ref.pathStyles,
         width = _ref.width,
         height = _ref.height,
@@ -7111,14 +7111,14 @@
         defaultSize = _icons$name.size;
     var size = sizeProp || defaultSize;
     if (!path) return null;
-    return /*#__PURE__*/React__default["default"].createElement(styles.Svg, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(styles$2.Svg, _extends$1({
       width: width || size,
       height: height || size,
-      styles: styles$1,
+      styles: styles,
       color: color,
       viewBox: viewBox,
       size: size
-    }, props), /*#__PURE__*/React__default["default"].createElement(styles.Path, {
+    }, props), /*#__PURE__*/React__default["default"].createElement(styles$2.Path, {
       d: path,
       styles: pathStyles
     }));
@@ -35518,6 +35518,105 @@
     }));
   };
 
+  var rotate = styled$g.keyframes(["to{transform:rotate(360deg);}"]);
+  var Spinner$1 = styled__default["default"].div.withConfig({
+    displayName: "styles__Spinner",
+    componentId: "sc-1e490ps-0"
+  })(["", ""], function (_ref) {
+    var color = _ref.color,
+        duration = _ref.duration,
+        size = _ref.size,
+        thickness = _ref.thickness,
+        backSpinnerColor = _ref.backSpinnerColor;
+    return styled$g.css(["width:", "px;height:", "px;border-radius:50%;background-color:transparent;border-top:", "px solid ", ";border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";animation:", " ", "s linear infinite;position:absolute;"], size, size, thickness, getColor(color), thickness, getColor(color), thickness, getColor(color), thickness, getColor(backSpinnerColor), rotate, duration);
+  });
+  var SpinnerWrapper = styled__default["default"].div.withConfig({
+    displayName: "styles__SpinnerWrapper",
+    componentId: "sc-1e490ps-1"
+  })(["position:relative;display:flex;justify-content:center;align-items:center;width:", "px;height:", "px;"], function (_ref2) {
+    var size = _ref2.size;
+    return size;
+  }, function (_ref3) {
+    var size = _ref3.size;
+    return size;
+  });
+  var CenterContent = styled__default["default"].div.withConfig({
+    displayName: "styles__CenterContent",
+    componentId: "sc-1e490ps-2"
+  })(["position:absolute;display:flex;justify-content:center;align-items:center;"]);
+  var styles$1 = {
+    Spinner: Spinner$1,
+    CenterContent: CenterContent,
+    SpinnerWrapper: SpinnerWrapper
+  };
+
+  var Spinner = function Spinner(_ref) {
+    var _ref$config = _ref.config,
+        config = _ref$config === void 0 ? {} : _ref$config,
+        children = _ref.children;
+    var _config$color = config.color,
+        color = _config$color === void 0 ? 'blue' : _config$color,
+        _config$duration = config.duration,
+        duration = _config$duration === void 0 ? 4 : _config$duration,
+        _config$size = config.size,
+        size = _config$size === void 0 ? 115 : _config$size,
+        _config$thickness = config.thickness,
+        thickness = _config$thickness === void 0 ? 8 : _config$thickness,
+        _config$backSpinnerCo = config.backSpinnerColor,
+        backSpinnerColor = _config$backSpinnerCo === void 0 ? 'grey' : _config$backSpinnerCo;
+    return /*#__PURE__*/React__default["default"].createElement(styles$1.SpinnerWrapper, {
+      size: size
+    }, /*#__PURE__*/React__default["default"].createElement(styles$1.Spinner, {
+      color: color,
+      duration: duration,
+      size: size,
+      thickness: thickness,
+      backSpinnerColor: backSpinnerColor
+    }), children && /*#__PURE__*/React__default["default"].createElement(styles$1.CenterContent, null, children));
+  };
+
+  var show = styled$g.keyframes(["0%{opacity:0;}to{opacity:1;}"]);
+  var Container = styled__default["default"].section.withConfig({
+    displayName: "styles__Container",
+    componentId: "sc-19kt9g-0"
+  })(["display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;position:fixed;top:0;left:0;background:", ";", ";z-index:100;animation:", " 0.2s ease-in;"], function (_ref) {
+    var backgroundColor = _ref.backgroundColor;
+    return backgroundColor;
+  }, function (_ref2) {
+    var effect = _ref2.effect;
+    return effect && styled$g.css(effect);
+  }, show);
+  var LoaderContainer = styled__default["default"].div.withConfig({
+    displayName: "styles__LoaderContainer",
+    componentId: "sc-19kt9g-1"
+  })(["position:relative;display:flex;justify-content:center;align-items:center;width:115px;height:115px;"]);
+  var styles = {
+    Container: Container,
+    LoaderContainer: LoaderContainer
+  };
+
+  var FullLoader = function FullLoader(_ref) {
+    var children = _ref.children,
+        _ref$backgroundColor = _ref.backgroundColor,
+        backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor,
+        _ref$spinnerConfig = _ref.spinnerConfig,
+        spinnerConfig = _ref$spinnerConfig === void 0 ? {} : _ref$spinnerConfig,
+        _ref$effect = _ref.effect,
+        effect = _ref$effect === void 0 ? {} : _ref$effect;
+    var defaultSpinnerConfig = {
+      color: 'blue',
+      duration: 4,
+      size: 115,
+      thickness: 8
+    };
+    return /*#__PURE__*/React__default["default"].createElement(styles.Container, {
+      effect: effect,
+      backgroundColor: backgroundColor
+    }, /*#__PURE__*/React__default["default"].createElement(styles.LoaderContainer, null, children || /*#__PURE__*/React__default["default"].createElement(Spinner, {
+      config: _objectSpread2(_objectSpread2({}, defaultSpinnerConfig), spinnerConfig)
+    })));
+  };
+
   exports.Avatar = Avatar;
   exports.AvatarGroup = AvatarGroup$1;
   exports.Button = Button;
@@ -35528,6 +35627,7 @@
   exports.ColorPicker = ColorPicker;
   exports.Drawer = Drawer;
   exports.ErrorBoundary = ErrorBoundary;
+  exports.FullLoader = FullLoader;
   exports.HTML = HTML;
   exports.Icon = Icon;
   exports.Image = Image;
@@ -35536,6 +35636,7 @@
   exports.Map = Map$1;
   exports.QRCode = QRCode;
   exports.Skeleton = Skeleton;
+  exports.Spinner = Spinner;
   exports.Switch = Switch;
   exports.Textarea = Textarea;
   exports.icons = icons;