@nulogy/components 8.14.5 → 8.15.1

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));
   }
@@ -8742,38 +8749,74 @@ Text.defaultProps = {
   disabled: false
 };
 
-var Heading1 = Text.withComponent("h1");
-Heading1.defaultProps = {
-  fontSize: "heading1",
-  lineHeight: "heading1",
-  fontWeight: "light",
-  mt: 0,
-  mb: "x6"
-};
-var Heading2 = Text.withComponent("h2");
-Heading2.defaultProps = {
-  fontSize: "heading2",
-  lineHeight: "heading2",
-  fontWeight: "normal",
-  mt: 0,
-  mb: "x2"
-};
-var Heading3 = Text.withComponent("h3");
-Heading3.defaultProps = {
-  fontSize: "heading3",
-  lineHeight: "heading3",
-  fontWeight: "medium",
-  mt: 0,
-  mb: "x1"
-};
-var Heading4 = Text.withComponent("h4");
-Heading4.defaultProps = {
-  fontSize: "heading4",
-  lineHeight: "heading4",
-  fontWeight: "bold",
-  mt: 0,
-  mb: "x1"
-};
+var Heading1 = styled(Text).attrs(function (props) {
+  return Object.assign({
+    as: "h1"
+  }, props);
+}).withConfig({
+  displayName: "Headings__Heading1",
+  componentId: "sc-7kwh7g-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: theme.fontSizes.heading1,
+    lineHeight: theme.lineHeights.heading1,
+    fontWeight: theme.fontWeights.light,
+    marginTop: 0,
+    marginBottom: theme.space.x6
+  };
+}, addStyledProps);
+var Heading2 = styled(Text).attrs(function (props) {
+  return Object.assign({
+    as: "h2"
+  }, props);
+}).withConfig({
+  displayName: "Headings__Heading2",
+  componentId: "sc-7kwh7g-1"
+})(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    fontSize: theme.fontSizes.heading2,
+    lineHeight: theme.lineHeights.heading2,
+    fontWeight: theme.fontWeights.normal,
+    marginTop: 0,
+    marginBottom: theme.space.x2
+  };
+}, addStyledProps);
+var Heading3 = styled(Text).attrs(function (props) {
+  return Object.assign({
+    as: "h3"
+  }, props);
+}).withConfig({
+  displayName: "Headings__Heading3",
+  componentId: "sc-7kwh7g-2"
+})(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    fontSize: theme.fontSizes.heading3,
+    lineHeight: theme.lineHeights.heading3,
+    fontWeight: theme.fontWeights.medium,
+    marginTop: 0,
+    marginBottom: theme.space.x1
+  };
+}, addStyledProps);
+var Heading4 = styled(Text).attrs(function (props) {
+  return Object.assign({
+    as: "h4"
+  }, props);
+}).withConfig({
+  displayName: "Headings__Heading4",
+  componentId: "sc-7kwh7g-3"
+})(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    fontSize: theme.fontSizes.heading4,
+    lineHeight: theme.lineHeights.heading4,
+    fontWeight: theme.fontWeights.bold,
+    marginTop: 0,
+    marginBottom: theme.space.x1
+  };
+}, addStyledProps);
 
 var defaultOptions = {
   bindI18n: 'languageChanged',
@@ -17610,6 +17653,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 +50059,7 @@ var StatusIndicatorValues = {
   quiet: "quiet"
 };
 
-var StatusIndicatorColours = function StatusIndicatorColours(theme) {
+var statusIndicatorStyles = function statusIndicatorStyles(theme) {
   var _ref;
 
   return _ref = {}, _ref[StatusIndicatorValues.neutral] = {
@@ -50020,7 +50071,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 +50094,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 +50106,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;