@activecollab/components 1.0.125 → 1.0.126

package/dist/cjs/components/Loaders/Spinner/SpinnerLoader.js

@@ -9,13 +9,9 @@ exports.SpinnerLoader = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _Styles = require("./Styles");
 
-var _excluded = ["className"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _excluded = ["radius", "strokeWidth", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -28,22 +24,31 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var SpinnerLoader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var className = _ref.className,
+  var _ref$radius = _ref.radius,
+      radius = _ref$radius === void 0 ? 20 : _ref$radius,
+      _ref$strokeWidth = _ref.strokeWidth,
+      strokeWidth = _ref$strokeWidth === void 0 ? 2 : _ref$strokeWidth,
+      _ref$activeStrokeColo = _ref.activeStrokeColor,
+      activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-primary)" : _ref$activeStrokeColo,
+      _ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
+      inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-300)" : _ref$inactiveStrokeCo,
+      _ref$activeColorPerce = _ref.activeColorPercentage,
+      activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
+      _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
+      rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
+      className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledSpinnerLoader, _extends({
     ref: ref,
-    className: (0, _classnames.default)("c-loader c-loader--spinner", className)
-  }, rest), /*#__PURE__*/_react.default.createElement("svg", {
-    viewBox: "25 25 50 50"
-  }, /*#__PURE__*/_react.default.createElement("circle", {
-    cx: "50",
-    cy: "50",
-    r: "20",
-    fill: "none",
-    strokeWidth: "4",
-    strokeMiterlimit: "10"
-  })));
+    className: className,
+    $radius: radius,
+    $strokeWidth: strokeWidth,
+    $activeStrokeColor: activeStrokeColor,
+    $inactiveStrokeColor: inactiveStrokeColor,
+    $activeColorPercentage: activeColorPercentage,
+    $rotateDurationInSeconds: rotateDurationInSeconds
+  }, rest));
 });
 exports.SpinnerLoader = SpinnerLoader;
 SpinnerLoader.displayName = "SpinnerLoader";

package/dist/cjs/components/Loaders/Spinner/SpinnerLoader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["SpinnerLoader","ref","className","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,aAAa,gBAAG,uBAG3B,gBAAyBC,GAAzB,EAAiC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;;AACjC,sBACE,6BAAC,2BAAD;AACE,IAAA,GAAG,EAAEF,GADP;AAEE,IAAA,SAAS,EAAE,yBAAW,4BAAX,EAAyCC,SAAzC;AAFb,KAGMC,IAHN,gBAKE;AAAK,IAAA,OAAO,EAAC;AAAb,kBACE;AACE,IAAA,EAAE,EAAC,IADL;AAEE,IAAA,EAAE,EAAC,IAFL;AAGE,IAAA,CAAC,EAAC,IAHJ;AAIE,IAAA,IAAI,EAAC,MAJP;AAKE,IAAA,WAAW,EAAC,GALd;AAME,IAAA,gBAAgB,EAAC;AANnB,IADF,CALF,CADF;AAkBD,CAtB4B,CAAtB;;AAwBPH,aAAa,CAACI,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledSpinnerLoader } from \"./Styles\";\n\nexport const SpinnerLoader = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...rest }, ref) => {\n  return (\n    <StyledSpinnerLoader\n      ref={ref}\n      className={classNames(\"c-loader c-loader--spinner\", className)}\n      {...rest}\n    >\n      <svg viewBox=\"25 25 50 50\">\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r=\"20\"\n          fill=\"none\"\n          strokeWidth=\"4\"\n          strokeMiterlimit=\"10\"\n        />\n      </svg>\n    </StyledSpinnerLoader>\n  );\n});\n\nSpinnerLoader.displayName = \"SpinnerLoader\";\n"],"file":"SpinnerLoader.js"}
+{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["SpinnerLoader","ref","radius","strokeWidth","activeStrokeColor","inactiveStrokeColor","activeColorPercentage","rotateDurationInSeconds","className","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAiBO,IAAMA,aAAa,gBAAG,uBAI3B,gBAWEC,GAXF,EAYK;AAAA,yBAVDC,MAUC;AAAA,MAVDA,MAUC,4BAVQ,EAUR;AAAA,8BATDC,WASC;AAAA,MATDA,WASC,iCATa,CASb;AAAA,mCARDC,iBAQC;AAAA,MARDA,iBAQC,sCARmB,sBAQnB;AAAA,mCAPDC,mBAOC;AAAA,MAPDA,mBAOC,sCAPqB,wBAOrB;AAAA,mCANDC,qBAMC;AAAA,MANDA,qBAMC,sCANuB,KAMvB;AAAA,mCALDC,uBAKC;AAAA,MALDA,uBAKC,sCALyB,IAKzB;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,6BAAC,2BAAD;AACE,IAAA,GAAG,EAAER,GADP;AAEE,IAAA,SAAS,EAAEO,SAFb;AAGE,IAAA,OAAO,EAAEN,MAHX;AAIE,IAAA,YAAY,EAAEC,WAJhB;AAKE,IAAA,kBAAkB,EAAEC,iBALtB;AAME,IAAA,oBAAoB,EAAEC,mBANxB;AAOE,IAAA,sBAAsB,EAAEC,qBAP1B;AAQE,IAAA,wBAAwB,EAAEC;AAR5B,KASME,IATN,EADF;AAaD,CA9B0B,CAAtB;;AAiCPT,aAAa,CAACU,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef } from \"react\";\nimport { StyledSpinnerLoader } from \"./Styles\";\n\nexport interface SpinnerLoaderProps {\n  /** Loader circumference size */\n  radius?: number;\n  /** Stroke width of the loader */\n  strokeWidth?: number;\n  /** Active color of spinning loader */\n  activeStrokeColor?: string;\n  /** Percentage of the circle which the active color takes */\n  activeColorPercentage?: \"25%\" | \"50%\" | \"75%\";\n  /** Inactive color of spinning loader */\n  inactiveStrokeColor?: string;\n  /** Rotate speed of animation in seconds */\n  rotateDurationInSeconds?: number;\n}\n\nexport const SpinnerLoader = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\"> & SpinnerLoaderProps\n>(\n  (\n    {\n      radius = 20,\n      strokeWidth = 2,\n      activeStrokeColor = \"var(--color-primary)\",\n      inactiveStrokeColor = \"var(--color-theme-300)\",\n      activeColorPercentage = \"25%\",\n      rotateDurationInSeconds = 0.75,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <StyledSpinnerLoader\n        ref={ref}\n        className={className}\n        $radius={radius}\n        $strokeWidth={strokeWidth}\n        $activeStrokeColor={activeStrokeColor}\n        $inactiveStrokeColor={inactiveStrokeColor}\n        $activeColorPercentage={activeColorPercentage}\n        $rotateDurationInSeconds={rotateDurationInSeconds}\n        {...rest}\n      />\n    );\n  }\n);\n\nSpinnerLoader.displayName = \"SpinnerLoader\";\n"],"file":"SpinnerLoader.js"}

package/dist/cjs/components/Loaders/Spinner/Styles.js

@@ -9,17 +9,26 @@ exports.StyledSpinnerLoader = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _BoxSizingStyle = require("../../BoxSizingStyle");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var rotateAnimation = (0, _styledComponents.keyframes)(["100%{transform:rotate(360deg);}"]);
-var dashAnimation = (0, _styledComponents.keyframes)(["0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px;}"]);
+var rotateAnimation = (0, _styledComponents.keyframes)(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
 
 var StyledSpinnerLoader = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledSpinnerLoader",
   componentId: "sc-1ht53g9-0"
-})(["position:relative;width:20px;&:before{content:\"\";display:block;padding-top:100%;}svg{animation:", " 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;circle{stroke-dasharray:1,200;stroke-dashoffset:0;stroke:var(--color-theme-600);animation:", " 1.5s ease-in-out infinite;stroke-linecap:round;}}"], rotateAnimation, dashAnimation);
+})(["", " border-radius:100%;", " ", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, function (props) {
+  return (0, _styledComponents.css)(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$radius, props.$radius, rotateAnimation, props.$rotateDurationInSeconds);
+}, function (props) {
+  return props.$activeColorPercentage === "25%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$activeStrokeColor);
+}, function (props) {
+  return props.$activeColorPercentage === "50%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$strokeWidth, props.$activeStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$activeStrokeColor);
+}, function (props) {
+  return props.$activeColorPercentage === "75%" && (0, _styledComponents.css)(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$strokeWidth, props.$activeStrokeColor, props.$strokeWidth, props.$activeStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$activeStrokeColor);
+});
 
 exports.StyledSpinnerLoader = StyledSpinnerLoader;
 //# sourceMappingURL=Styles.js.map

package/dist/cjs/components/Loaders/Spinner/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["rotateAnimation","keyframes","dashAnimation","StyledSpinnerLoader","styled","div"],"mappings":";;;;;;;;;AAAA;;;;;;AAEA,IAAMA,eAAe,OAAGC,2BAAH,sCAArB;AAMA,IAAMC,aAAa,OAAGD,2BAAH,kKAAnB;;AAeO,IAAME,mBAAmB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oYAWfL,eAXe,EA0BbE,aA1Ba,CAAzB","sourcesContent":["import styled, { keyframes } from \"styled-components\";\n\nconst rotateAnimation = keyframes`\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst dashAnimation = keyframes`\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n`;\n\nexport const StyledSpinnerLoader = styled.div`\n  position: relative;\n  width: 20px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    padding-top: 100%;\n  }\n\n  svg {\n    animation: ${rotateAnimation} 2s linear infinite;\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n\n    circle {\n      stroke-dasharray: 1, 200;\n      stroke-dashoffset: 0;\n      stroke: var(--color-theme-600);\n      animation: ${dashAnimation} 1.5s ease-in-out infinite;\n      stroke-linecap: round;\n    }\n  }\n`;\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["rotateAnimation","keyframes","StyledSpinnerLoader","styled","div","BoxSizingStyle","props","css","$radius","$rotateDurationInSeconds","$activeColorPercentage","$strokeWidth","$inactiveStrokeColor","$activeStrokeColor"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,eAAe,OAAGC,2BAAH,iEAArB;;AAcO,IAAMC,mBAAmB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oDAC5BC,8BAD4B,EAG5B,UAACC,KAAD;AAAA,aACAC,qBADA,wEAEWD,KAAK,CAACE,OAFjB,EAGYF,KAAK,CAACE,OAHlB,EAIeR,eAJf,EAIkCM,KAAK,CAACG,wBAJxC;AAAA,CAH4B,EAW5B,UAACH,KAAD;AAAA,SACAA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,YAFxB,EAEgDL,KAAK,CAACM,oBAFtD,EAGmBN,KAAK,CAACK,YAHzB,EAGiDL,KAAK,CAACM,oBAHvD,EAIiBN,KAAK,CAACK,YAJvB,EAI+CL,KAAK,CAACM,oBAJrD,EAKgBN,KAAK,CAACK,YALtB,EAK8CL,KAAK,CAACO,kBALpD,CADA;AAAA,CAX4B,EAoB5B,UAACP,KAAD;AAAA,SACAA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,YAFxB,EAEgDL,KAAK,CAACO,kBAFtD,EAGmBP,KAAK,CAACK,YAHzB,EAGiDL,KAAK,CAACM,oBAHvD,EAIiBN,KAAK,CAACK,YAJvB,EAI+CL,KAAK,CAACM,oBAJrD,EAKgBN,KAAK,CAACK,YALtB,EAK8CL,KAAK,CAACO,kBALpD,CADA;AAAA,CApB4B,EA6B1B,UAACP,KAAD;AAAA,SACFA,KAAK,CAACI,sBAAN,KAAiC,KAAjC,QACAH,qBADA,kIAEkBD,KAAK,CAACK,YAFxB,EAEgDL,KAAK,CAACO,kBAFtD,EAGmBP,KAAK,CAACK,YAHzB,EAGiDL,KAAK,CAACO,kBAHvD,EAIiBP,KAAK,CAACK,YAJvB,EAI+CL,KAAK,CAACM,oBAJrD,EAKgBN,KAAK,CAACK,YALtB,EAK8CL,KAAK,CAACO,kBALpD,CADE;AAAA,CA7B0B,CAAzB","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\n\nconst rotateAnimation = keyframes`\n  from { transform: rotate(0deg); }\n  to { transform: rotate(359deg); }\n`;\n\nexport interface StyledSpinnerLoaderProps {\n  $radius: number;\n  $strokeWidth: number;\n  $activeStrokeColor: string;\n  $inactiveStrokeColor: string;\n  $activeColorPercentage: \"25%\" | \"50%\" | \"75%\";\n  $rotateDurationInSeconds: number;\n}\n\nexport const StyledSpinnerLoader = styled.div<StyledSpinnerLoaderProps>`\n  ${BoxSizingStyle}\n  border-radius: 100%;\n  ${(props) =>\n    css`\n      width: ${props.$radius}px;\n      height: ${props.$radius}px;\n      animation: ${rotateAnimation} ${props.$rotateDurationInSeconds}s infinite\n        linear;\n    `}\n\n  ${(props) =>\n    props.$activeColorPercentage === \"25%\" &&\n    css`\n      border-right: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-bottom: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-left: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n    `}\n\n  ${(props) =>\n    props.$activeColorPercentage === \"50%\" &&\n    css`\n      border-right: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n      border-bottom: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-left: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n    `}\n\n    ${(props) =>\n    props.$activeColorPercentage === \"75%\" &&\n    css`\n      border-right: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n      border-bottom: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n      border-left: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n    `}\n`;\n"],"file":"Styles.js"}

package/dist/esm/components/Loaders/Spinner/SpinnerLoader.d.ts

@@ -1,3 +1,11 @@
 import React from "react";
-export declare const SpinnerLoader: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export interface SpinnerLoaderProps {
+    radius?: number;
+    strokeWidth?: number;
+    activeStrokeColor?: string;
+    activeColorPercentage?: "25%" | "50%" | "75%";
+    inactiveStrokeColor?: string;
+    rotateDurationInSeconds?: number;
+}
+export declare const SpinnerLoader: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & SpinnerLoaderProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=SpinnerLoader.d.ts.map

package/dist/esm/components/Loaders/Spinner/SpinnerLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerLoader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,eAAO,MAAM,aAAa,gNAsBxB,CAAC"}
+{"version":3,"file":"SpinnerLoader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,MAAM,WAAW,kBAAkB;IAEjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,qBAAqB,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAE9C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,aAAa,qOA+BzB,CAAC"}

package/dist/esm/components/Loaders/Spinner/SpinnerLoader.js

@@ -1,26 +1,34 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["className"];
+var _excluded = ["radius", "strokeWidth", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
 import React, { forwardRef } from "react";
-import classNames from "classnames";
 import { StyledSpinnerLoader } from "./Styles";
 export var SpinnerLoader = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
+  var _ref$radius = _ref.radius,
+      radius = _ref$radius === void 0 ? 20 : _ref$radius,
+      _ref$strokeWidth = _ref.strokeWidth,
+      strokeWidth = _ref$strokeWidth === void 0 ? 2 : _ref$strokeWidth,
+      _ref$activeStrokeColo = _ref.activeStrokeColor,
+      activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-primary)" : _ref$activeStrokeColo,
+      _ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
+      inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-300)" : _ref$inactiveStrokeCo,
+      _ref$activeColorPerce = _ref.activeColorPercentage,
+      activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
+      _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
+      rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
+      className = _ref.className,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(StyledSpinnerLoader, _extends({
     ref: ref,
-    className: classNames("c-loader c-loader--spinner", className)
-  }, rest), /*#__PURE__*/React.createElement("svg", {
-    viewBox: "25 25 50 50"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "50",
-    cy: "50",
-    r: "20",
-    fill: "none",
-    strokeWidth: "4",
-    strokeMiterlimit: "10"
-  })));
+    className: className,
+    $radius: radius,
+    $strokeWidth: strokeWidth,
+    $activeStrokeColor: activeStrokeColor,
+    $inactiveStrokeColor: inactiveStrokeColor,
+    $activeColorPercentage: activeColorPercentage,
+    $rotateDurationInSeconds: rotateDurationInSeconds
+  }, rest));
 });
 SpinnerLoader.displayName = "SpinnerLoader";
 //# sourceMappingURL=SpinnerLoader.js.map

package/dist/esm/components/Loaders/Spinner/SpinnerLoader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["React","forwardRef","classNames","StyledSpinnerLoader","SpinnerLoader","ref","className","rest","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,mBAAT,QAAoC,UAApC;AAEA,OAAO,IAAMC,aAAa,gBAAGH,UAAU,CAGrC,gBAAyBI,GAAzB,EAAiC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;;AACjC,sBACE,oBAAC,mBAAD;AACE,IAAA,GAAG,EAAEF,GADP;AAEE,IAAA,SAAS,EAAEH,UAAU,CAAC,4BAAD,EAA+BI,SAA/B;AAFvB,KAGMC,IAHN,gBAKE;AAAK,IAAA,OAAO,EAAC;AAAb,kBACE;AACE,IAAA,EAAE,EAAC,IADL;AAEE,IAAA,EAAE,EAAC,IAFL;AAGE,IAAA,CAAC,EAAC,IAHJ;AAIE,IAAA,IAAI,EAAC,MAJP;AAKE,IAAA,WAAW,EAAC,GALd;AAME,IAAA,gBAAgB,EAAC;AANnB,IADF,CALF,CADF;AAkBD,CAtBsC,CAAhC;AAwBPH,aAAa,CAACI,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledSpinnerLoader } from \"./Styles\";\n\nexport const SpinnerLoader = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...rest }, ref) => {\n  return (\n    <StyledSpinnerLoader\n      ref={ref}\n      className={classNames(\"c-loader c-loader--spinner\", className)}\n      {...rest}\n    >\n      <svg viewBox=\"25 25 50 50\">\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r=\"20\"\n          fill=\"none\"\n          strokeWidth=\"4\"\n          strokeMiterlimit=\"10\"\n        />\n      </svg>\n    </StyledSpinnerLoader>\n  );\n});\n\nSpinnerLoader.displayName = \"SpinnerLoader\";\n"],"file":"SpinnerLoader.js"}
+{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/SpinnerLoader.tsx"],"names":["React","forwardRef","StyledSpinnerLoader","SpinnerLoader","ref","radius","strokeWidth","activeStrokeColor","inactiveStrokeColor","activeColorPercentage","rotateDurationInSeconds","className","rest","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,mBAAT,QAAoC,UAApC;AAiBA,OAAO,IAAMC,aAAa,gBAAGF,UAAU,CAIrC,gBAWEG,GAXF,EAYK;AAAA,yBAVDC,MAUC;AAAA,MAVDA,MAUC,4BAVQ,EAUR;AAAA,8BATDC,WASC;AAAA,MATDA,WASC,iCATa,CASb;AAAA,mCARDC,iBAQC;AAAA,MARDA,iBAQC,sCARmB,sBAQnB;AAAA,mCAPDC,mBAOC;AAAA,MAPDA,mBAOC,sCAPqB,wBAOrB;AAAA,mCANDC,qBAMC;AAAA,MANDA,qBAMC,sCANuB,KAMvB;AAAA,mCALDC,uBAKC;AAAA,MALDA,uBAKC,sCALyB,IAKzB;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,oBAAC,mBAAD;AACE,IAAA,GAAG,EAAER,GADP;AAEE,IAAA,SAAS,EAAEO,SAFb;AAGE,IAAA,OAAO,EAAEN,MAHX;AAIE,IAAA,YAAY,EAAEC,WAJhB;AAKE,IAAA,kBAAkB,EAAEC,iBALtB;AAME,IAAA,oBAAoB,EAAEC,mBANxB;AAOE,IAAA,sBAAsB,EAAEC,qBAP1B;AAQE,IAAA,wBAAwB,EAAEC;AAR5B,KASME,IATN,EADF;AAaD,CA9BoC,CAAhC;AAiCPT,aAAa,CAACU,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef } from \"react\";\nimport { StyledSpinnerLoader } from \"./Styles\";\n\nexport interface SpinnerLoaderProps {\n  /** Loader circumference size */\n  radius?: number;\n  /** Stroke width of the loader */\n  strokeWidth?: number;\n  /** Active color of spinning loader */\n  activeStrokeColor?: string;\n  /** Percentage of the circle which the active color takes */\n  activeColorPercentage?: \"25%\" | \"50%\" | \"75%\";\n  /** Inactive color of spinning loader */\n  inactiveStrokeColor?: string;\n  /** Rotate speed of animation in seconds */\n  rotateDurationInSeconds?: number;\n}\n\nexport const SpinnerLoader = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\"> & SpinnerLoaderProps\n>(\n  (\n    {\n      radius = 20,\n      strokeWidth = 2,\n      activeStrokeColor = \"var(--color-primary)\",\n      inactiveStrokeColor = \"var(--color-theme-300)\",\n      activeColorPercentage = \"25%\",\n      rotateDurationInSeconds = 0.75,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <StyledSpinnerLoader\n        ref={ref}\n        className={className}\n        $radius={radius}\n        $strokeWidth={strokeWidth}\n        $activeStrokeColor={activeStrokeColor}\n        $inactiveStrokeColor={inactiveStrokeColor}\n        $activeColorPercentage={activeColorPercentage}\n        $rotateDurationInSeconds={rotateDurationInSeconds}\n        {...rest}\n      />\n    );\n  }\n);\n\nSpinnerLoader.displayName = \"SpinnerLoader\";\n"],"file":"SpinnerLoader.js"}

package/dist/esm/components/Loaders/Spinner/Styles.d.ts

@@ -1,2 +1,10 @@
-export declare const StyledSpinnerLoader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface StyledSpinnerLoaderProps {
+    $radius: number;
+    $strokeWidth: number;
+    $activeStrokeColor: string;
+    $inactiveStrokeColor: string;
+    $activeColorPercentage: "25%" | "50%" | "75%";
+    $rotateDurationInSeconds: number;
+}
+export declare const StyledSpinnerLoader: import("styled-components").StyledComponent<"div", any, StyledSpinnerLoaderProps, never>;
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Loaders/Spinner/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAM,mBAAmB,oEA8B/B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAC9C,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,0FAqC/B,CAAC"}

package/dist/esm/components/Loaders/Spinner/Styles.js

@@ -1,8 +1,16 @@
-import styled, { keyframes } from "styled-components";
-var rotateAnimation = keyframes(["100%{transform:rotate(360deg);}"]);
-var dashAnimation = keyframes(["0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px;}"]);
+import styled, { css, keyframes } from "styled-components";
+import { BoxSizingStyle } from "../../BoxSizingStyle";
+var rotateAnimation = keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
 export var StyledSpinnerLoader = styled.div.withConfig({
   displayName: "Styles__StyledSpinnerLoader",
   componentId: "sc-1ht53g9-0"
-})(["position:relative;width:20px;&:before{content:\"\";display:block;padding-top:100%;}svg{animation:", " 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;circle{stroke-dasharray:1,200;stroke-dashoffset:0;stroke:var(--color-theme-600);animation:", " 1.5s ease-in-out infinite;stroke-linecap:round;}}"], rotateAnimation, dashAnimation);
+})(["", " border-radius:100%;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
+  return css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$radius, props.$radius, rotateAnimation, props.$rotateDurationInSeconds);
+}, function (props) {
+  return props.$activeColorPercentage === "25%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$activeStrokeColor);
+}, function (props) {
+  return props.$activeColorPercentage === "50%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$strokeWidth, props.$activeStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$activeStrokeColor);
+}, function (props) {
+  return props.$activeColorPercentage === "75%" && css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$strokeWidth, props.$activeStrokeColor, props.$strokeWidth, props.$activeStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$activeStrokeColor);
+});
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Loaders/Spinner/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["styled","keyframes","rotateAnimation","dashAnimation","StyledSpinnerLoader","div"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,SAAjB,QAAkC,mBAAlC;AAEA,IAAMC,eAAe,GAAGD,SAAH,qCAArB;AAMA,IAAME,aAAa,GAAGF,SAAH,iKAAnB;AAeA,OAAO,IAAMG,mBAAmB,GAAGJ,MAAM,CAACK,GAAV;AAAA;AAAA;AAAA,oYAWfH,eAXe,EA0BbC,aA1Ba,CAAzB","sourcesContent":["import styled, { keyframes } from \"styled-components\";\n\nconst rotateAnimation = keyframes`\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst dashAnimation = keyframes`\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n`;\n\nexport const StyledSpinnerLoader = styled.div`\n  position: relative;\n  width: 20px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    padding-top: 100%;\n  }\n\n  svg {\n    animation: ${rotateAnimation} 2s linear infinite;\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto;\n\n    circle {\n      stroke-dasharray: 1, 200;\n      stroke-dashoffset: 0;\n      stroke: var(--color-theme-600);\n      animation: ${dashAnimation} 1.5s ease-in-out infinite;\n      stroke-linecap: round;\n    }\n  }\n`;\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../../src/components/Loaders/Spinner/Styles.ts"],"names":["styled","css","keyframes","BoxSizingStyle","rotateAnimation","StyledSpinnerLoader","div","props","$radius","$rotateDurationInSeconds","$activeColorPercentage","$strokeWidth","$inactiveStrokeColor","$activeStrokeColor"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AACA,SAASC,cAAT,QAA+B,sBAA/B;AAEA,IAAMC,eAAe,GAAGF,SAAH,gEAArB;AAcA,OAAO,IAAMG,mBAAmB,GAAGL,MAAM,CAACM,GAAV;AAAA;AAAA;AAAA,oDAC5BH,cAD4B,EAG5B,UAACI,KAAD;AAAA,SACAN,GADA,uEAEWM,KAAK,CAACC,OAFjB,EAGYD,KAAK,CAACC,OAHlB,EAIeJ,eAJf,EAIkCG,KAAK,CAACE,wBAJxC;AAAA,CAH4B,EAW5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,sBAAN,KAAiC,KAAjC,IACAT,GADA,iIAEkBM,KAAK,CAACI,YAFxB,EAEgDJ,KAAK,CAACK,oBAFtD,EAGmBL,KAAK,CAACI,YAHzB,EAGiDJ,KAAK,CAACK,oBAHvD,EAIiBL,KAAK,CAACI,YAJvB,EAI+CJ,KAAK,CAACK,oBAJrD,EAKgBL,KAAK,CAACI,YALtB,EAK8CJ,KAAK,CAACM,kBALpD,CADA;AAAA,CAX4B,EAoB5B,UAACN,KAAD;AAAA,SACAA,KAAK,CAACG,sBAAN,KAAiC,KAAjC,IACAT,GADA,iIAEkBM,KAAK,CAACI,YAFxB,EAEgDJ,KAAK,CAACM,kBAFtD,EAGmBN,KAAK,CAACI,YAHzB,EAGiDJ,KAAK,CAACK,oBAHvD,EAIiBL,KAAK,CAACI,YAJvB,EAI+CJ,KAAK,CAACK,oBAJrD,EAKgBL,KAAK,CAACI,YALtB,EAK8CJ,KAAK,CAACM,kBALpD,CADA;AAAA,CApB4B,EA6B1B,UAACN,KAAD;AAAA,SACFA,KAAK,CAACG,sBAAN,KAAiC,KAAjC,IACAT,GADA,iIAEkBM,KAAK,CAACI,YAFxB,EAEgDJ,KAAK,CAACM,kBAFtD,EAGmBN,KAAK,CAACI,YAHzB,EAGiDJ,KAAK,CAACM,kBAHvD,EAIiBN,KAAK,CAACI,YAJvB,EAI+CJ,KAAK,CAACK,oBAJrD,EAKgBL,KAAK,CAACI,YALtB,EAK8CJ,KAAK,CAACM,kBALpD,CADE;AAAA,CA7B0B,CAAzB","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\n\nconst rotateAnimation = keyframes`\n  from { transform: rotate(0deg); }\n  to { transform: rotate(359deg); }\n`;\n\nexport interface StyledSpinnerLoaderProps {\n  $radius: number;\n  $strokeWidth: number;\n  $activeStrokeColor: string;\n  $inactiveStrokeColor: string;\n  $activeColorPercentage: \"25%\" | \"50%\" | \"75%\";\n  $rotateDurationInSeconds: number;\n}\n\nexport const StyledSpinnerLoader = styled.div<StyledSpinnerLoaderProps>`\n  ${BoxSizingStyle}\n  border-radius: 100%;\n  ${(props) =>\n    css`\n      width: ${props.$radius}px;\n      height: ${props.$radius}px;\n      animation: ${rotateAnimation} ${props.$rotateDurationInSeconds}s infinite\n        linear;\n    `}\n\n  ${(props) =>\n    props.$activeColorPercentage === \"25%\" &&\n    css`\n      border-right: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-bottom: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-left: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n    `}\n\n  ${(props) =>\n    props.$activeColorPercentage === \"50%\" &&\n    css`\n      border-right: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n      border-bottom: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-left: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n    `}\n\n    ${(props) =>\n    props.$activeColorPercentage === \"75%\" &&\n    css`\n      border-right: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n      border-bottom: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n      border-left: ${props.$strokeWidth}px solid ${props.$inactiveStrokeColor};\n      border-top: ${props.$strokeWidth}px solid ${props.$activeStrokeColor};\n    `}\n`;\n"],"file":"Styles.js"}

package/dist/index.js

@@ -6183,31 +6183,47 @@
   });
   DotsLoader.displayName = "DotsLoader";
 
-  var rotateAnimation = styled.keyframes(["100%{transform:rotate(360deg);}"]);
-  var dashAnimation = styled.keyframes(["0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px;}"]);
+  var rotateAnimation = styled.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
   var StyledSpinnerLoader = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSpinnerLoader",
     componentId: "sc-1ht53g9-0"
-  })(["position:relative;width:20px;&:before{content:\"\";display:block;padding-top:100%;}svg{animation:", " 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;circle{stroke-dasharray:1,200;stroke-dashoffset:0;stroke:var(--color-theme-600);animation:", " 1.5s ease-in-out infinite;stroke-linecap:round;}}"], rotateAnimation, dashAnimation);
+  })(["", " border-radius:100%;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
+    return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$radius, props.$radius, rotateAnimation, props.$rotateDurationInSeconds);
+  }, function (props) {
+    return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$activeStrokeColor);
+  }, function (props) {
+    return props.$activeColorPercentage === "50%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$strokeWidth, props.$activeStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$activeStrokeColor);
+  }, function (props) {
+    return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$strokeWidth, props.$activeStrokeColor, props.$strokeWidth, props.$activeStrokeColor, props.$strokeWidth, props.$inactiveStrokeColor, props.$strokeWidth, props.$activeStrokeColor);
+  });
 
-  var _excluded$y = ["className"];
+  var _excluded$y = ["radius", "strokeWidth", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
   var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
+    var _ref$radius = _ref.radius,
+        radius = _ref$radius === void 0 ? 20 : _ref$radius,
+        _ref$strokeWidth = _ref.strokeWidth,
+        strokeWidth = _ref$strokeWidth === void 0 ? 2 : _ref$strokeWidth,
+        _ref$activeStrokeColo = _ref.activeStrokeColor,
+        activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-primary)" : _ref$activeStrokeColo,
+        _ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
+        inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-300)" : _ref$inactiveStrokeCo,
+        _ref$activeColorPerce = _ref.activeColorPercentage,
+        activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
+        _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
+        rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
+        className = _ref.className,
         rest = _objectWithoutProperties(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
       ref: ref,
-      className: classnames__default["default"]("c-loader c-loader--spinner", className)
-    }, rest), /*#__PURE__*/React__default["default"].createElement("svg", {
-      viewBox: "25 25 50 50"
-    }, /*#__PURE__*/React__default["default"].createElement("circle", {
-      cx: "50",
-      cy: "50",
-      r: "20",
-      fill: "none",
-      strokeWidth: "4",
-      strokeMiterlimit: "10"
-    })));
+      className: className,
+      $radius: radius,
+      $strokeWidth: strokeWidth,
+      $activeStrokeColor: activeStrokeColor,
+      $inactiveStrokeColor: inactiveStrokeColor,
+      $activeColorPercentage: activeColorPercentage,
+      $rotateDurationInSeconds: rotateDurationInSeconds
+    }, rest));
   });
   SpinnerLoader.displayName = "SpinnerLoader";