@nulogy/components 8.14.5 → 8.15.0

package/dist/main.js

@@ -8543,79 +8543,87 @@
       }
     };
 
-    var prefix = "random-id-";
-    var randomId = 0;
-
-    var generateId = function generateId() {
-      randomId += 1;
-      return prefix + randomId;
-    };
-
-    var LoadingIcon = function LoadingIcon(_a) {
-      var _a$color = _a.color,
-          color = _a$color === void 0 ? "currentColor" : _a$color,
-          _a$size = _a.size,
-          size = _a$size === void 0 ? "24px" : _a$size;
-          _a.title;
-          var props = __rest(_a, ["color", "size", "title"]);
-
-      var id = generateId();
-      return (
-        /*#__PURE__*/
-        // Modified svg By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL
-        React__default["default"].createElement("svg", Object.assign({
-          width: size,
-          height: size,
-          viewBox: "0 0 38 38",
-          xmlns: "http://www.w3.org/2000/svg"
-        }, props), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("linearGradient", {
-          x1: "8.042%",
-          y1: "0%",
-          x2: "65.682%",
-          y2: "23.865%",
-          id: id
-        }, /*#__PURE__*/React__default["default"].createElement("stop", {
-          stopColor: color,
-          stopOpacity: "0",
-          offset: "0%"
-        }), /*#__PURE__*/React__default["default"].createElement("stop", {
-          stopColor: color,
-          stopOpacity: ".631",
-          offset: "63.146%"
-        }), /*#__PURE__*/React__default["default"].createElement("stop", {
-          stopColor: color,
-          offset: "100%"
-        }))), /*#__PURE__*/React__default["default"].createElement("g", {
-          fill: "none",
-          fillRule: "evenodd"
-        }, /*#__PURE__*/React__default["default"].createElement("g", {
-          transform: "translate(1 1)"
-        }, /*#__PURE__*/React__default["default"].createElement("path", {
-          d: "M36 18c0-9.94-8.06-18-18-18",
-          id: "Oval-2",
-          stroke: "url(#" + id + ")",
-          strokeWidth: "2"
-        }, /*#__PURE__*/React__default["default"].createElement("animateTransform", {
-          attributeName: "transform",
-          type: "rotate",
-          from: "0 18 18",
-          to: "360 18 18",
-          dur: "0.9s",
-          repeatCount: "indefinite"
-        })), /*#__PURE__*/React__default["default"].createElement("circle", {
-          fill: color,
-          cx: "36",
-          cy: "18",
-          r: "1"
-        }, /*#__PURE__*/React__default["default"].createElement("animateTransform", {
-          attributeName: "transform",
-          type: "rotate",
-          from: "0 18 18",
-          to: "360 18 18",
-          dur: "0.9s",
-          repeatCount: "indefinite"
-        })))))
-      );
+    var LoadingIcon = function LoadingIcon(props) {
+      return /*#__PURE__*/React__default["default"].createElement("svg", Object.assign({
+        viewBox: "0 0 24px 24px",
+        width: "24px",
+        height: "24px",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        preserveAspectRatio: "xMidYMid"
+      }, props), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("circle", {
+        cx: "3.5",
+        cy: "12",
+        fill: "#C0C8D1",
+        "transform-origin": "3.5 3.5"
+      }, /*#__PURE__*/React__default["default"].createElement("animate", {
+        attributeName: "r",
+        values: "3;3;3.5;3",
+        keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+        keyTimes: "0; 0.25;0.4; 1",
+        calcMode: "spline",
+        dur: "0.8s",
+        repeatCount: "indefinite"
+      }), /*#__PURE__*/React__default["default"].createElement("animate", {
+        id: "first",
+        attributeName: "fill",
+        values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1",
+        keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+        keyTimes: "0; 0.25;0.4; 1",
+        calcMode: "spline",
+        dur: "0.8s",
+        repeatCount: "indefinite"
+      })), /*#__PURE__*/React__default["default"].createElement("circle", {
+        cx: "12",
+        cy: "12",
+        r: "3",
+        fill: "#C0C8D1",
+        "transform-origin": "12 3.5"
+      }, /*#__PURE__*/React__default["default"].createElement("animate", {
+        attributeName: "r",
+        begin: "0.2s; first.begin",
+        values: "3;3;3.5;3",
+        keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+        keyTimes: "0; 0.25;0.4; 1",
+        calcMode: "spline",
+        dur: "0.8s",
+        repeatCount: "indefinite"
+      }), /*#__PURE__*/React__default["default"].createElement("animate", {
+        id: "second",
+        attributeName: "fill",
+        begin: "0.2s; first.begin",
+        values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1",
+        keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+        keyTimes: "0; 0.25;0.4; 1",
+        calcMode: "spline",
+        dur: "0.8s",
+        repeatCount: "indefinite"
+      })), /*#__PURE__*/React__default["default"].createElement("circle", {
+        cx: "20.5",
+        cy: "12",
+        r: "3",
+        fill: "#C0C8D1",
+        "transform-origin": "20.5 3.5"
+      }, /*#__PURE__*/React__default["default"].createElement("animate", {
+        attributeName: "r",
+        begin: "0.3s; first.begin",
+        values: "3;3;3.5;3",
+        keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+        keyTimes: "0; 0.25;0.4; 1",
+        calcMode: "spline",
+        dur: "0.8s",
+        repeatCount: "indefinite"
+      }), /*#__PURE__*/React__default["default"].createElement("animate", {
+        id: "third",
+        attributeName: "fill",
+        begin: "0.3s; first.begin",
+        values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1",
+        keySplines: "\n                .24 .1 .35 .8;\n                .24 .1 .35 .8;\n                0.1 0.8 0.2 1",
+        keyTimes: "0; 0.25;0.4; 1",
+        calcMode: "spline",
+        dur: "0.8s",
+        repeatCount: "indefinite"
+      }))));
     };
 
     /* eslint-disable react/no-array-index-key */
@@ -8646,7 +8654,6 @@
       if (icon === "loading") {
         return /*#__PURE__*/React__default["default"].createElement(LoadingIcon, Object.assign({
           color: Theme.colors[fillColor] ? Theme.colors[fillColor] : fillColor,
-          size: space[size] || size,
           className: className
         }, props));
       }
@@ -17633,6 +17640,14 @@
       return parseInt(val1.replace("px", ""), 10) - parseInt(val2Str.replace("px", ""), 10) + "px";
     };
 
+    var prefix = "random-id-";
+    var randomId = 0;
+
+    var generateId = function generateId() {
+      randomId += 1;
+      return prefix + randomId;
+    };
+
     var WindowDimensions = /*#__PURE__*/function (_React$Component) {
       _inheritsLoose__default["default"](WindowDimensions, _React$Component);
 
@@ -50031,7 +50046,7 @@
       quiet: "quiet"
     };
 
-    var StatusIndicatorColours = function StatusIndicatorColours(theme) {
+    var statusIndicatorStyles = function statusIndicatorStyles(theme) {
       var _ref;
 
       return _ref = {}, _ref[StatusIndicatorValues.neutral] = {
@@ -50043,7 +50058,8 @@
         backgroundColor: theme.colors.blackBlue,
         color: theme.colors.white
       }, _ref[StatusIndicatorValues.quiet] = {
-        borderColor: theme.colors.white,
+        border: "1px solid",
+        borderColor: theme.colors.grey,
         backgroundColor: theme.colors.white,
         color: theme.colors.darkGrey
       }, _ref[StatusIndicatorValues.danger] = {
@@ -50065,10 +50081,6 @@
       }, _ref;
     };
 
-    var getStatusIndicatorColours = function getStatusIndicatorColours(type, theme) {
-      return StatusIndicatorColours(theme)[type];
-    };
-
     var StatusIndicator = styled__default["default"].span.withConfig({
       displayName: "StatusIndicator",
       componentId: "sc-17eyafq-0"
@@ -50081,7 +50093,7 @@
         textTransform: "uppercase",
         letterSpacing: ".05em",
         borderRadius: theme.space.x1
-      }, getStatusIndicatorColours(type, theme));
+      }, statusIndicatorStyles(theme)[type]);
     });
     StatusIndicator.defaultProps = {
       type: StatusIndicatorValues.neutral,

package/dist/main.module.js

@@ -8520,79 +8520,87 @@ var Theme = {
   }
 };
 
-var prefix = "random-id-";
-var randomId = 0;
-
-var generateId = function generateId() {
-  randomId += 1;
-  return prefix + randomId;
-};
-
-var LoadingIcon = function LoadingIcon(_a) {
-  var _a$color = _a.color,
-      color = _a$color === void 0 ? "currentColor" : _a$color,
-      _a$size = _a.size,
-      size = _a$size === void 0 ? "24px" : _a$size;
-      _a.title;
-      var props = __rest(_a, ["color", "size", "title"]);
-
-  var id = generateId();
-  return (
-    /*#__PURE__*/
-    // Modified svg By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL
-    React__default.createElement("svg", Object.assign({
-      width: size,
-      height: size,
-      viewBox: "0 0 38 38",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, props), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
-      x1: "8.042%",
-      y1: "0%",
-      x2: "65.682%",
-      y2: "23.865%",
-      id: id
-    }, /*#__PURE__*/React__default.createElement("stop", {
-      stopColor: color,
-      stopOpacity: "0",
-      offset: "0%"
-    }), /*#__PURE__*/React__default.createElement("stop", {
-      stopColor: color,
-      stopOpacity: ".631",
-      offset: "63.146%"
-    }), /*#__PURE__*/React__default.createElement("stop", {
-      stopColor: color,
-      offset: "100%"
-    }))), /*#__PURE__*/React__default.createElement("g", {
-      fill: "none",
-      fillRule: "evenodd"
-    }, /*#__PURE__*/React__default.createElement("g", {
-      transform: "translate(1 1)"
-    }, /*#__PURE__*/React__default.createElement("path", {
-      d: "M36 18c0-9.94-8.06-18-18-18",
-      id: "Oval-2",
-      stroke: "url(#" + id + ")",
-      strokeWidth: "2"
-    }, /*#__PURE__*/React__default.createElement("animateTransform", {
-      attributeName: "transform",
-      type: "rotate",
-      from: "0 18 18",
-      to: "360 18 18",
-      dur: "0.9s",
-      repeatCount: "indefinite"
-    })), /*#__PURE__*/React__default.createElement("circle", {
-      fill: color,
-      cx: "36",
-      cy: "18",
-      r: "1"
-    }, /*#__PURE__*/React__default.createElement("animateTransform", {
-      attributeName: "transform",
-      type: "rotate",
-      from: "0 18 18",
-      to: "360 18 18",
-      dur: "0.9s",
-      repeatCount: "indefinite"
-    })))))
-  );
+var LoadingIcon = function LoadingIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 24px 24px",
+    width: "24px",
+    height: "24px",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMidYMid"
+  }, props), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "3.5",
+    cy: "12",
+    fill: "#C0C8D1",
+    "transform-origin": "3.5 3.5"
+  }, /*#__PURE__*/React__default.createElement("animate", {
+    attributeName: "r",
+    values: "3;3;3.5;3",
+    keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+    keyTimes: "0; 0.25;0.4; 1",
+    calcMode: "spline",
+    dur: "0.8s",
+    repeatCount: "indefinite"
+  }), /*#__PURE__*/React__default.createElement("animate", {
+    id: "first",
+    attributeName: "fill",
+    values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1",
+    keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+    keyTimes: "0; 0.25;0.4; 1",
+    calcMode: "spline",
+    dur: "0.8s",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/React__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3",
+    fill: "#C0C8D1",
+    "transform-origin": "12 3.5"
+  }, /*#__PURE__*/React__default.createElement("animate", {
+    attributeName: "r",
+    begin: "0.2s; first.begin",
+    values: "3;3;3.5;3",
+    keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+    keyTimes: "0; 0.25;0.4; 1",
+    calcMode: "spline",
+    dur: "0.8s",
+    repeatCount: "indefinite"
+  }), /*#__PURE__*/React__default.createElement("animate", {
+    id: "second",
+    attributeName: "fill",
+    begin: "0.2s; first.begin",
+    values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1",
+    keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+    keyTimes: "0; 0.25;0.4; 1",
+    calcMode: "spline",
+    dur: "0.8s",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/React__default.createElement("circle", {
+    cx: "20.5",
+    cy: "12",
+    r: "3",
+    fill: "#C0C8D1",
+    "transform-origin": "20.5 3.5"
+  }, /*#__PURE__*/React__default.createElement("animate", {
+    attributeName: "r",
+    begin: "0.3s; first.begin",
+    values: "3;3;3.5;3",
+    keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+    keyTimes: "0; 0.25;0.4; 1",
+    calcMode: "spline",
+    dur: "0.8s",
+    repeatCount: "indefinite"
+  }), /*#__PURE__*/React__default.createElement("animate", {
+    id: "third",
+    attributeName: "fill",
+    begin: "0.3s; first.begin",
+    values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1",
+    keySplines: "\n                .24 .1 .35 .8;\n                .24 .1 .35 .8;\n                0.1 0.8 0.2 1",
+    keyTimes: "0; 0.25;0.4; 1",
+    calcMode: "spline",
+    dur: "0.8s",
+    repeatCount: "indefinite"
+  }))));
 };
 
 /* eslint-disable react/no-array-index-key */
@@ -8623,7 +8631,6 @@ var Svg$1 = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   if (icon === "loading") {
     return /*#__PURE__*/React__default.createElement(LoadingIcon, Object.assign({
       color: Theme.colors[fillColor] ? Theme.colors[fillColor] : fillColor,
-      size: space[size] || size,
       className: className
     }, props));
   }
@@ -17610,6 +17617,14 @@ var subPx = function subPx(val1, val2) {
   return parseInt(val1.replace("px", ""), 10) - parseInt(val2Str.replace("px", ""), 10) + "px";
 };
 
+var prefix = "random-id-";
+var randomId = 0;
+
+var generateId = function generateId() {
+  randomId += 1;
+  return prefix + randomId;
+};
+
 var WindowDimensions = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose$2(WindowDimensions, _React$Component);
 
@@ -50008,7 +50023,7 @@ var StatusIndicatorValues = {
   quiet: "quiet"
 };
 
-var StatusIndicatorColours = function StatusIndicatorColours(theme) {
+var statusIndicatorStyles = function statusIndicatorStyles(theme) {
   var _ref;
 
   return _ref = {}, _ref[StatusIndicatorValues.neutral] = {
@@ -50020,7 +50035,8 @@ var StatusIndicatorColours = function StatusIndicatorColours(theme) {
     backgroundColor: theme.colors.blackBlue,
     color: theme.colors.white
   }, _ref[StatusIndicatorValues.quiet] = {
-    borderColor: theme.colors.white,
+    border: "1px solid",
+    borderColor: theme.colors.grey,
     backgroundColor: theme.colors.white,
     color: theme.colors.darkGrey
   }, _ref[StatusIndicatorValues.danger] = {
@@ -50042,10 +50058,6 @@ var StatusIndicatorColours = function StatusIndicatorColours(theme) {
   }, _ref;
 };
 
-var getStatusIndicatorColours = function getStatusIndicatorColours(type, theme) {
-  return StatusIndicatorColours(theme)[type];
-};
-
 var StatusIndicator = styled.span.withConfig({
   displayName: "StatusIndicator",
   componentId: "sc-17eyafq-0"
@@ -50058,7 +50070,7 @@ var StatusIndicator = styled.span.withConfig({
     textTransform: "uppercase",
     letterSpacing: ".05em",
     borderRadius: theme.space.x1
-  }, getStatusIndicatorColours(type, theme));
+  }, statusIndicatorStyles(theme)[type]);
 });
 StatusIndicator.defaultProps = {
   type: StatusIndicatorValues.neutral,

package/dist/src/Icon/LoadingIcon.d.ts

@@ -1,9 +1,4 @@
 import React from "react";
-type LoadingIconProps = {
-    size?: string | number;
-    color?: string;
-    title?: string;
-    className?: string;
-};
+type LoadingIconProps = React.ComponentPropsWithoutRef<"svg">;
 declare const LoadingIcon: React.FC<LoadingIconProps>;
 export default LoadingIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.14.5",
+  "version": "8.15.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {