@purpurds/spinner 3.0.0

package/dist/LICENSE.txt

@@ -0,0 +1,31 @@
+Name: classnames
+Version: 2.5.1
+License: MIT
+Private: false
+Description: A simple utility for conditionally joining classNames together
+Repository: git+https://github.com/JedWatson/classnames.git
+Author: Jed Watson
+License Copyright:
+===
+
+The MIT License (MIT)
+
+Copyright (c) 2018 Jed Watson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/spinner.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime");function S(s){return s&&s.__esModule&&Object.prototype.hasOwnProperty.call(s,"default")?s.default:s}var f={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(s){(function(){var u={}.hasOwnProperty;function n(){for(var r="",e=0;e<arguments.length;e++){var t=arguments[e];t&&(r=l(r,c(t)))}return r}function c(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return n.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var e="";for(var t in r)u.call(r,t)&&r[t]&&(e=l(e,t));return e}function l(r,e){return e?r?r+" "+e:r+e:r}s.exports?(n.default=n,s.exports=n):window.classNames=n})()})(f);var g=f.exports;const d=S(g),m="_rotate_7s2g1_1",v="_dash_7s2g1_1",p={"purpur-spinner":"_purpur-spinner_7s2g1_1",rotate:m,"purpur-spinner--xxs":"_purpur-spinner--xxs_7s2g1_4","purpur-spinner--xs":"_purpur-spinner--xs_7s2g1_8","purpur-spinner--sm":"_purpur-spinner--sm_7s2g1_12","purpur-spinner--md":"_purpur-spinner--md_7s2g1_16","purpur-spinner--lg":"_purpur-spinner--lg_7s2g1_20","purpur-spinner__circle":"_purpur-spinner__circle_7s2g1_24",dash:v,"purpur-spinner__circle--disabled":"_purpur-spinner__circle--disabled_7s2g1_33","purpur-spinner__circle--negative":"_purpur-spinner__circle--negative_7s2g1_36","purpur-spinner__circle--negative-disabled":"_purpur-spinner__circle--negative-disabled_7s2g1_39"},i="purpur-spinner",a={PRIMARY:"primary",DISABLED:"disabled",NEGATIVE:"negative",NEGATIVE_DISABLED:"negative-disabled"},x=Object.values(a),o={XXS:"xxs",XS:"xs",SM:"sm",MD:"md",LG:"lg"},N=Object.values(o),b=({["data-testid"]:s,size:u=o.SM,variant:n=a.PRIMARY,...c})=>_.jsx("div",{className:d([p[i],p[`${i}--${u}`]]),"data-testid":s,...c,children:_.jsx("svg",{viewBox:"0 0 50 50",children:_.jsx("circle",{className:d(p[`${i}__circle`],p[`${i}__circle--${n}`]),cx:"25",cy:"25",r:"20"})})});exports.SPINNER_SIZE=o;exports.SPINNER_VARIANT=a;exports.Spinner=b;exports.spinnerSizes=N;exports.spinnerVariants=x;
+//# sourceMappingURL=spinner.cjs.js.map

package/dist/spinner.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/spinner.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./spinner.module.scss\";\nconst rootClassName = \"purpur-spinner\";\n\nexport const SPINNER_VARIANT = {\n  PRIMARY: \"primary\",\n  DISABLED: \"disabled\",\n  NEGATIVE: \"negative\",\n  NEGATIVE_DISABLED: \"negative-disabled\",\n} as const;\n\nexport const spinnerVariants = Object.values(SPINNER_VARIANT);\nexport type SpinnerVariant = (typeof SPINNER_VARIANT)[keyof typeof SPINNER_VARIANT];\n\nexport const SPINNER_SIZE = {\n  XXS: \"xxs\",\n  XS: \"xs\",\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n} as const;\n\nexport const spinnerSizes = Object.values(SPINNER_SIZE);\nexport type SpinnerSize = (typeof SPINNER_SIZE)[keyof typeof SPINNER_SIZE];\n\nexport type SpinnerProps = {\n  [\"data-testid\"]?: string;\n  size?: SpinnerSize;\n  variant?: SpinnerVariant;\n};\n\nexport const Spinner = ({\n  [\"data-testid\"]: dataTestid,\n  size = SPINNER_SIZE.SM,\n  variant = SPINNER_VARIANT.PRIMARY,\n  ...props\n}: SpinnerProps) => {\n  return (\n    <div\n      className={c([styles[rootClassName], styles[`${rootClassName}--${size}`]])}\n      data-testid={dataTestid}\n      {...props}\n    >\n      <svg viewBox=\"0 0 50 50\">\n        <circle\n          className={c(\n            styles[`${rootClassName}__circle`],\n            styles[`${rootClassName}__circle--${variant}`]\n          )}\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","rootClassName","SPINNER_VARIANT","spinnerVariants","SPINNER_SIZE","spinnerSizes","Spinner","dataTestid","size","variant","props","jsx","c","styles"],"mappings":";;;;gBAOC,UAAY,CAGZ,IAAIA,EAAS,CAAE,EAAC,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAWF,CAAG,CAAC,EAE/C,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAOA,EAGR,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,WAGZ,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAASK,CAAG,GAIpC,OAAOL,CACP,CAED,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,EAAA,QAAiBT,GAOjB,OAAO,WAAaA,CAEtB,8sBCxEMU,EAAgB,iBAETC,EAAkB,CAC7B,QAAS,UACT,SAAU,WACV,SAAU,WACV,kBAAmB,mBACrB,EAEaC,EAAkB,OAAO,OAAOD,CAAe,EAG/CE,EAAe,CAC1B,IAAK,MACL,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAe,OAAO,OAAOD,CAAY,EASzCE,EAAU,CAAC,CACtB,CAAC,eAAgBC,EACjB,KAAAC,EAAOJ,EAAa,GACpB,QAAAK,EAAUP,EAAgB,QAC1B,GAAGQ,CACL,IAEIC,EAAA,IAAC,MAAA,CACC,UAAWC,EAAE,CAACC,EAAOZ,CAAa,EAAGY,EAAO,GAAGZ,CAAa,KAAKO,CAAI,EAAE,CAAC,CAAC,EACzE,cAAaD,EACZ,GAAGG,EAEJ,SAAAC,EAAA,IAAC,MAAI,CAAA,QAAQ,YACX,SAAAA,EAAA,IAAC,SAAA,CACC,UAAWC,EACTC,EAAO,GAAGZ,CAAa,UAAU,EACjCY,EAAO,GAAGZ,CAAa,aAAaQ,CAAO,EAAE,CAC/C,EACA,GAAG,KACH,GAAG,KACH,EAAE,IAAA,CAAA,EAEN,CAAA,CAAA","x_google_ignoreList":[0]}

package/dist/spinner.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export declare const SPINNER_VARIANT: {
+    readonly PRIMARY: "primary";
+    readonly DISABLED: "disabled";
+    readonly NEGATIVE: "negative";
+    readonly NEGATIVE_DISABLED: "negative-disabled";
+};
+export declare const spinnerVariants: ("primary" | "disabled" | "negative" | "negative-disabled")[];
+export type SpinnerVariant = (typeof SPINNER_VARIANT)[keyof typeof SPINNER_VARIANT];
+export declare const SPINNER_SIZE: {
+    readonly XXS: "xxs";
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export declare const spinnerSizes: ("xxs" | "xs" | "sm" | "md" | "lg")[];
+export type SpinnerSize = (typeof SPINNER_SIZE)[keyof typeof SPINNER_SIZE];
+export type SpinnerProps = {
+    ["data-testid"]?: string;
+    size?: SpinnerSize;
+    variant?: SpinnerVariant;
+};
+export declare const Spinner: ({ ["data-testid"]: dataTestid, size, variant, ...props }: SpinnerProps) => React.JSX.Element;
+//# sourceMappingURL=spinner.d.ts.map

package/dist/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../src/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX,eAAO,MAAM,eAAe,+DAAiC,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAEpF,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,eAAO,MAAM,YAAY,uCAA8B,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE3E,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,OAAO,6DAKjB,YAAY,sBAoBd,CAAC"}

package/dist/spinner.es.js

@@ -0,0 +1,98 @@
+import { jsx as c } from "react/jsx-runtime";
+function g(s) {
+  return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
+}
+var l = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(s) {
+  (function() {
+    var u = {}.hasOwnProperty;
+    function n() {
+      for (var r = "", e = 0; e < arguments.length; e++) {
+        var t = arguments[e];
+        t && (r = a(r, _(t)));
+      }
+      return r;
+    }
+    function _(r) {
+      if (typeof r == "string" || typeof r == "number")
+        return r;
+      if (typeof r != "object")
+        return "";
+      if (Array.isArray(r))
+        return n.apply(null, r);
+      if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+        return r.toString();
+      var e = "";
+      for (var t in r)
+        u.call(r, t) && r[t] && (e = a(e, t));
+      return e;
+    }
+    function a(r, e) {
+      return e ? r ? r + " " + e : r + e : r;
+    }
+    s.exports ? (n.default = n, s.exports = n) : window.classNames = n;
+  })();
+})(l);
+var m = l.exports;
+const o = /* @__PURE__ */ g(m), v = "_rotate_7s2g1_1", S = "_dash_7s2g1_1", p = {
+  "purpur-spinner": "_purpur-spinner_7s2g1_1",
+  rotate: v,
+  "purpur-spinner--xxs": "_purpur-spinner--xxs_7s2g1_4",
+  "purpur-spinner--xs": "_purpur-spinner--xs_7s2g1_8",
+  "purpur-spinner--sm": "_purpur-spinner--sm_7s2g1_12",
+  "purpur-spinner--md": "_purpur-spinner--md_7s2g1_16",
+  "purpur-spinner--lg": "_purpur-spinner--lg_7s2g1_20",
+  "purpur-spinner__circle": "_purpur-spinner__circle_7s2g1_24",
+  dash: S,
+  "purpur-spinner__circle--disabled": "_purpur-spinner__circle--disabled_7s2g1_33",
+  "purpur-spinner__circle--negative": "_purpur-spinner__circle--negative_7s2g1_36",
+  "purpur-spinner__circle--negative-disabled": "_purpur-spinner__circle--negative-disabled_7s2g1_39"
+}, i = "purpur-spinner", d = {
+  PRIMARY: "primary",
+  DISABLED: "disabled",
+  NEGATIVE: "negative",
+  NEGATIVE_DISABLED: "negative-disabled"
+}, b = Object.values(d), f = {
+  XXS: "xxs",
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+}, N = Object.values(f), y = ({
+  ["data-testid"]: s,
+  size: u = f.SM,
+  variant: n = d.PRIMARY,
+  ..._
+}) => /* @__PURE__ */ c(
+  "div",
+  {
+    className: o([p[i], p[`${i}--${u}`]]),
+    "data-testid": s,
+    ..._,
+    children: /* @__PURE__ */ c("svg", { viewBox: "0 0 50 50", children: /* @__PURE__ */ c(
+      "circle",
+      {
+        className: o(
+          p[`${i}__circle`],
+          p[`${i}__circle--${n}`]
+        ),
+        cx: "25",
+        cy: "25",
+        r: "20"
+      }
+    ) })
+  }
+);
+export {
+  f as SPINNER_SIZE,
+  d as SPINNER_VARIANT,
+  y as Spinner,
+  N as spinnerSizes,
+  b as spinnerVariants
+};
+//# sourceMappingURL=spinner.es.js.map

package/dist/spinner.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/spinner.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./spinner.module.scss\";\nconst rootClassName = \"purpur-spinner\";\n\nexport const SPINNER_VARIANT = {\n  PRIMARY: \"primary\",\n  DISABLED: \"disabled\",\n  NEGATIVE: \"negative\",\n  NEGATIVE_DISABLED: \"negative-disabled\",\n} as const;\n\nexport const spinnerVariants = Object.values(SPINNER_VARIANT);\nexport type SpinnerVariant = (typeof SPINNER_VARIANT)[keyof typeof SPINNER_VARIANT];\n\nexport const SPINNER_SIZE = {\n  XXS: \"xxs\",\n  XS: \"xs\",\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n} as const;\n\nexport const spinnerSizes = Object.values(SPINNER_SIZE);\nexport type SpinnerSize = (typeof SPINNER_SIZE)[keyof typeof SPINNER_SIZE];\n\nexport type SpinnerProps = {\n  [\"data-testid\"]?: string;\n  size?: SpinnerSize;\n  variant?: SpinnerVariant;\n};\n\nexport const Spinner = ({\n  [\"data-testid\"]: dataTestid,\n  size = SPINNER_SIZE.SM,\n  variant = SPINNER_VARIANT.PRIMARY,\n  ...props\n}: SpinnerProps) => {\n  return (\n    <div\n      className={c([styles[rootClassName], styles[`${rootClassName}--${size}`]])}\n      data-testid={dataTestid}\n      {...props}\n    >\n      <svg viewBox=\"0 0 50 50\">\n        <circle\n          className={c(\n            styles[`${rootClassName}__circle`],\n            styles[`${rootClassName}__circle--${variant}`]\n          )}\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","rootClassName","SPINNER_VARIANT","spinnerVariants","SPINNER_SIZE","spinnerSizes","Spinner","dataTestid","size","variant","props","jsx","c","styles"],"mappings":";;;;;;;;;;;AAOA,GAAC,WAAY;AAGZ,QAAIA,IAAS,CAAE,EAAC;AAEhB,aAASC,IAAc;AAGtB,eAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,YAAIC,IAAM,UAAUD,CAAC;AACrB,QAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAWF,CAAG,CAAC;AAAA,MAE/C;AAED,aAAOF;AAAA,IACP;AAED,aAASI,EAAYF,GAAK;AACzB,UAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,eAAOA;AAGR,UAAI,OAAOA,KAAQ;AAClB,eAAO;AAGR,UAAI,MAAM,QAAQA,CAAG;AACpB,eAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,UAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,eAAOA,EAAI;AAGZ,UAAIF,IAAU;AAEd,eAASK,KAAOH;AACf,QAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAASK,CAAG;AAIpC,aAAOL;AAAA,IACP;AAED,aAASG,EAAaG,GAAOC,GAAU;AACtC,aAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,IAQR;AAED,IAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,EAAA,UAAiBT,KAOjB,OAAO,aAAaA;AAAA,EAEtB;;;;;;;;;;;;;;;;GCxEMU,IAAgB,kBAETC,IAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB,GAEaC,IAAkB,OAAO,OAAOD,CAAe,GAG/CE,IAAe;AAAA,EAC1B,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAe,OAAO,OAAOD,CAAY,GASzCE,IAAU,CAAC;AAAA,EACtB,CAAC,gBAAgBC;AAAA,EACjB,MAAAC,IAAOJ,EAAa;AAAA,EACpB,SAAAK,IAAUP,EAAgB;AAAA,EAC1B,GAAGQ;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAE,CAACC,EAAOZ,CAAa,GAAGY,EAAO,GAAGZ,CAAa,KAAKO,CAAI,EAAE,CAAC,CAAC;AAAA,IACzE,eAAaD;AAAA,IACZ,GAAGG;AAAA,IAEJ,UAAA,gBAAAC,EAAC,OAAI,EAAA,SAAQ,aACX,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACTC,EAAO,GAAGZ,CAAa,UAAU;AAAA,UACjCY,EAAO,GAAGZ,CAAa,aAAaQ,CAAO,EAAE;AAAA,QAC/C;AAAA,QACA,IAAG;AAAA,QACH,IAAG;AAAA,QACH,GAAE;AAAA,MAAA;AAAA,IAAA,GAEN;AAAA,EAAA;AAAA;","x_google_ignoreList":[0]}

package/dist/spinner.system.js

@@ -0,0 +1,6 @@
+System.register(["react"],function(i,v){"use strict";var p;return{setters:[a=>{p=a.default}],execute:function(){function a(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var o={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(n){(function(){var _={}.hasOwnProperty;function s(){for(var r="",e=0;e<arguments.length;e++){var t=arguments[e];t&&(r=S(r,l(t)))}return r}function l(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return s.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var e="";for(var t in r)_.call(r,t)&&r[t]&&(e=S(e,t));return e}function S(r,e){return e?r?r+" "+e:r+e:r}n.exports?(s.default=s,n.exports=s):window.classNames=s})()})(o);var g=o.exports;const d=a(g),u={"purpur-spinner":"_purpur-spinner_7s2g1_1",rotate:"_rotate_7s2g1_1","purpur-spinner--xxs":"_purpur-spinner--xxs_7s2g1_4","purpur-spinner--xs":"_purpur-spinner--xs_7s2g1_8","purpur-spinner--sm":"_purpur-spinner--sm_7s2g1_12","purpur-spinner--md":"_purpur-spinner--md_7s2g1_16","purpur-spinner--lg":"_purpur-spinner--lg_7s2g1_20","purpur-spinner__circle":"_purpur-spinner__circle_7s2g1_24",dash:"_dash_7s2g1_1","purpur-spinner__circle--disabled":"_purpur-spinner__circle--disabled_7s2g1_33","purpur-spinner__circle--negative":"_purpur-spinner__circle--negative_7s2g1_36","purpur-spinner__circle--negative-disabled":"_purpur-spinner__circle--negative-disabled_7s2g1_39"},c="purpur-spinner",f=i("SPINNER_VARIANT",{PRIMARY:"primary",DISABLED:"disabled",NEGATIVE:"negative",NEGATIVE_DISABLED:"negative-disabled"}),I=i("spinnerVariants",Object.values(f)),m=i("SPINNER_SIZE",{XXS:"xxs",XS:"xs",SM:"sm",MD:"md",LG:"lg"}),b=i("spinnerSizes",Object.values(m)),y=i("Spinner",({["data-testid"]:n,size:_=m.SM,variant:s=f.PRIMARY,...l})=>p.createElement("div",{className:d([u[c],u[`${c}--${_}`]]),"data-testid":n,...l},p.createElement("svg",{viewBox:"0 0 50 50"},p.createElement("circle",{className:d(u[`${c}__circle`],u[`${c}__circle--${s}`]),cx:"25",cy:"25",r:"20"}))))}}});
+//# sourceMappingURL=spinner.system.js.map

package/dist/spinner.system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.system.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/spinner.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./spinner.module.scss\";\nconst rootClassName = \"purpur-spinner\";\n\nexport const SPINNER_VARIANT = {\n  PRIMARY: \"primary\",\n  DISABLED: \"disabled\",\n  NEGATIVE: \"negative\",\n  NEGATIVE_DISABLED: \"negative-disabled\",\n} as const;\n\nexport const spinnerVariants = Object.values(SPINNER_VARIANT);\nexport type SpinnerVariant = (typeof SPINNER_VARIANT)[keyof typeof SPINNER_VARIANT];\n\nexport const SPINNER_SIZE = {\n  XXS: \"xxs\",\n  XS: \"xs\",\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n} as const;\n\nexport const spinnerSizes = Object.values(SPINNER_SIZE);\nexport type SpinnerSize = (typeof SPINNER_SIZE)[keyof typeof SPINNER_SIZE];\n\nexport type SpinnerProps = {\n  [\"data-testid\"]?: string;\n  size?: SpinnerSize;\n  variant?: SpinnerVariant;\n};\n\nexport const Spinner = ({\n  [\"data-testid\"]: dataTestid,\n  size = SPINNER_SIZE.SM,\n  variant = SPINNER_VARIANT.PRIMARY,\n  ...props\n}: SpinnerProps) => {\n  return (\n    <div\n      className={c([styles[rootClassName], styles[`${rootClassName}--${size}`]])}\n      data-testid={dataTestid}\n      {...props}\n    >\n      <svg viewBox=\"0 0 50 50\">\n        <circle\n          className={c(\n            styles[`${rootClassName}__circle`],\n            styles[`${rootClassName}__circle--${variant}`]\n          )}\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","rootClassName","SPINNER_VARIANT","exports","spinnerVariants","SPINNER_SIZE","spinnerSizes","Spinner","dataTestid","size","variant","props","React","c","styles"],"mappings":";;;;gBAOC,UAAY,CAGZ,IAAIA,EAAS,CAAE,EAAC,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAWF,CAAG,CAAC,EAE/C,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAOA,EAGR,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,WAGZ,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAASK,CAAG,GAIpC,OAAOL,CACP,CAED,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,EAAA,QAAiBT,GAOjB,OAAO,WAAaA,CAEtB,ssBCxEMU,EAAgB,iBAETC,EAAkBC,EAAA,kBAAA,CAC7B,QAAS,UACT,SAAU,WACV,SAAU,WACV,kBAAmB,mBACrB,CAAA,EAEaC,EAAkBD,EAAA,kBAAA,OAAO,OAAOD,CAAe,CAAA,EAG/CG,EAAeF,EAAA,eAAA,CAC1B,IAAK,MACL,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,CAAA,EAEaG,EAAeH,EAAA,eAAA,OAAO,OAAOE,CAAY,CAAA,EASzCE,cAAU,CAAC,CACtB,CAAC,eAAgBC,EACjB,KAAAC,EAAOJ,EAAa,GACpB,QAAAK,EAAUR,EAAgB,QAC1B,GAAGS,CACL,IAEIC,EAAA,cAAC,MAAA,CACC,UAAWC,EAAE,CAACC,EAAOb,CAAa,EAAGa,EAAO,GAAGb,CAAa,KAAKQ,CAAI,EAAE,CAAC,CAAC,EACzE,cAAaD,EACZ,GAAGG,CAAA,EAEJC,EAAA,cAAC,MAAI,CAAA,QAAQ,WACX,EAAAA,EAAA,cAAC,SAAA,CACC,UAAWC,EACTC,EAAO,GAAGb,CAAa,UAAU,EACjCa,EAAO,GAAGb,CAAa,aAAaS,CAAO,EAAE,CAC/C,EACA,GAAG,KACH,GAAG,KACH,EAAE,IAAA,CAAA,CAEN,CAAA,CAGN","x_google_ignoreList":[0]}

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-spinner_7s2g1_1{animation:_rotate_7s2g1_1 1s linear infinite}._purpur-spinner--xxs_7s2g1_4{height:var(--purpur-spacing-250);width:var(--purpur-spacing-250)}._purpur-spinner--xs_7s2g1_8{height:var(--purpur-spacing-300);width:var(--purpur-spacing-300)}._purpur-spinner--sm_7s2g1_12{height:var(--purpur-spacing-400);width:var(--purpur-spacing-400)}._purpur-spinner--md_7s2g1_16{height:var(--purpur-spacing-600);width:var(--purpur-spacing-600)}._purpur-spinner--lg_7s2g1_20{height:var(--purpur-spacing-800);width:var(--purpur-spacing-800)}._purpur-spinner__circle_7s2g1_24{--stroke-color: var(--purpur-color-border-interactive-primary);stroke-dasharray:150;animation:_dash_7s2g1_1 2s ease-in-out infinite;stroke-width:3;stroke-linecap:round;fill:transparent;stroke:var(--stroke-color)}._purpur-spinner__circle--disabled_7s2g1_33{--stroke-color: var(--purpur-color-border-weak)}._purpur-spinner__circle--negative_7s2g1_36{--stroke-color: var(--purpur-color-border-interactive-primary-negative)}._purpur-spinner__circle--negative-disabled_7s2g1_39{--stroke-color: var(--purpur-color-border-weak-negative)}@keyframes _rotate_7s2g1_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes _dash_7s2g1_1{0%{stroke-dashoffset:125}50%{stroke-dashoffset:62.5}to{stroke-dashoffset:125}}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@purpurds/spinner",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/spinner.cjs.js",
+  "types": "./dist/spinner.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/spinner.cjs.js",
+      "systemjs": "./dist/spinner.system.js",
+      "types": "./dist/spinner.d.ts",
+      "default": "./dist/spinner.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/spinner.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/tokens": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,56 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as SpinnerStories from "./src/spinner.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Spinner" of={SpinnerStories} />
+
+# Spinner
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/spinner": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/spinner/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { Spinner } from "@purpurds/spinner";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <Spinner {...someProps}>Some content</Spinner>
+    </div>
+  );
+};
+```

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/spinner.module.scss

@@ -0,0 +1,72 @@
+.purpur-spinner {
+  animation: rotate 1s linear infinite;
+
+  &--xxs {
+    height: var(--purpur-spacing-250);
+    width: var(--purpur-spacing-250);
+  }
+
+  &--xs {
+    height: var(--purpur-spacing-300);
+    width: var(--purpur-spacing-300);
+  }
+
+  &--sm {
+    height: var(--purpur-spacing-400);
+    width: var(--purpur-spacing-400);
+  }
+
+  &--md {
+    height: var(--purpur-spacing-600);
+    width: var(--purpur-spacing-600);
+  }
+
+  &--lg {
+    height: var(--purpur-spacing-800);
+    width: var(--purpur-spacing-800);
+  }
+
+  &__circle {
+    --stroke-color: var(--purpur-color-border-interactive-primary);
+    stroke-dasharray: 150;
+    animation: dash 2s ease-in-out infinite;
+    stroke-width: 3;
+    stroke-linecap: round;
+
+    fill: transparent;
+    stroke: var(--stroke-color);
+
+    &--disabled {
+      --stroke-color: var(--purpur-color-border-weak);
+    }
+
+    &--negative {
+      --stroke-color: var(--purpur-color-border-interactive-primary-negative);
+    }
+
+    &--negative-disabled {
+      --stroke-color: var(--purpur-color-border-weak-negative);
+    }
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 125;
+  }
+  50% {
+    stroke-dashoffset: 62.5;
+  }
+  100% {
+    stroke-dashoffset: 125;
+  }
+}

package/src/spinner.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Spinner, SpinnerVariant, spinnerSizes, spinnerVariants } from "./spinner";
+
+const adaptiveBackground = (variant?: SpinnerVariant) => ({
+  margin: "calc(var(--purpur-spacing-250) * -1)",
+  padding: "var(--purpur-spacing-250)",
+  background: variant?.includes("negative") ? "var(--purpur-color-purple-900)" : "transparent",
+});
+
+const meta: Meta<typeof Spinner> = {
+  title: "Components/Spinner",
+  component: Spinner,
+  parameters: {
+    design: [
+      {
+        name: "Spinner",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-Library?type=design&node-id=18542%3A11852&mode=design&t=xlTz4vnzzpyUopLt-1",
+      },
+    ],
+  },
+  argTypes: {
+    ["data-testid"]: {
+      control: { type: "text" },
+    },
+    size: {
+      options: spinnerSizes,
+      control: { type: "select" },
+    },
+    variant: {
+      options: spinnerVariants,
+      control: { type: "select" },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Spinner>;
+
+export const Showcase: Story = {
+  args: {
+    size: spinnerSizes[0],
+    variant: spinnerVariants[0],
+  },
+  render: (args) => (
+    <div style={adaptiveBackground(args.variant)}>
+      <Spinner {...args} />
+    </div>
+  ),
+};

package/src/spinner.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Spinner } from "./spinner";
+
+expect.extend(matchers);
+
+describe("Spinner", () => {
+  it("should render", () => {
+    render(<Spinner data-testid="spinner" />);
+
+    expect(screen.getByTestId("spinner")).toBeTruthy();
+  });
+});

package/src/spinner.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import c from "classnames";
+
+import styles from "./spinner.module.scss";
+const rootClassName = "purpur-spinner";
+
+export const SPINNER_VARIANT = {
+  PRIMARY: "primary",
+  DISABLED: "disabled",
+  NEGATIVE: "negative",
+  NEGATIVE_DISABLED: "negative-disabled",
+} as const;
+
+export const spinnerVariants = Object.values(SPINNER_VARIANT);
+export type SpinnerVariant = (typeof SPINNER_VARIANT)[keyof typeof SPINNER_VARIANT];
+
+export const SPINNER_SIZE = {
+  XXS: "xxs",
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+} as const;
+
+export const spinnerSizes = Object.values(SPINNER_SIZE);
+export type SpinnerSize = (typeof SPINNER_SIZE)[keyof typeof SPINNER_SIZE];
+
+export type SpinnerProps = {
+  ["data-testid"]?: string;
+  size?: SpinnerSize;
+  variant?: SpinnerVariant;
+};
+
+export const Spinner = ({
+  ["data-testid"]: dataTestid,
+  size = SPINNER_SIZE.SM,
+  variant = SPINNER_VARIANT.PRIMARY,
+  ...props
+}: SpinnerProps) => {
+  return (
+    <div
+      className={c([styles[rootClassName], styles[`${rootClassName}--${size}`]])}
+      data-testid={dataTestid}
+      {...props}
+    >
+      <svg viewBox="0 0 50 50">
+        <circle
+          className={c(
+            styles[`${rootClassName}__circle`],
+            styles[`${rootClassName}__circle--${variant}`]
+          )}
+          cx="25"
+          cy="25"
+          r="20"
+        />
+      </svg>
+    </div>
+  );
+};