@onewelcome/react-lib-components 8.4.0 → 8.5.0

package/dist/esm/Spinner/Spinner.esm.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import classes from './Spinner.module.scss.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const Spinner = ({ size = 32, thickness, ...props }) => {
+    if (!thickness) {
+        thickness = size / 16;
+    }
+    return (React.createElement("svg", { ...props, className: classes["spinner"], width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("circle", { cx: size / 2, cy: size / 2, r: (size - thickness) / 2, stroke: "var(--orbit-color)", strokeWidth: thickness, fill: "none" }),
+        React.createElement("circle", { className: classes["arch"], cx: size / 2, cy: size / 2, r: (size - thickness) / 2, stroke: "var(--arch-color)", strokeWidth: thickness, strokeLinecap: "round", fill: "none", strokeDasharray: `${size}`, transform: "rotate(-90 25 25)" })));
+};
+
+export { Spinner };
+//# sourceMappingURL=Spinner.esm.js.map

package/dist/esm/Spinner/Spinner.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.esm.js","sources":["../../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React from \"react\";\nimport classes from \"./Spinner.module.scss\";\n\nexport interface SpinnerProps extends React.SVGProps<SVGSVGElement> {\n  size?: number;\n  thickness?: number;\n}\n\nexport const Spinner: React.FC<SpinnerProps> = ({ size = 32, thickness, ...props }) => {\n  if (!thickness) {\n    thickness = size / 16;\n  }\n  return (\n    <svg\n      {...props}\n      className={classes[\"spinner\"]}\n      width={size}\n      height={size}\n      viewBox={`0 0 ${size} ${size}`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle\n        cx={size / 2}\n        cy={size / 2}\n        r={(size - thickness) / 2}\n        stroke=\"var(--orbit-color)\"\n        strokeWidth={thickness}\n        fill=\"none\"\n      ></circle>\n      <circle\n        className={classes[\"arch\"]}\n        cx={size / 2}\n        cy={size / 2}\n        r={(size - thickness) / 2}\n        stroke=\"var(--arch-color)\"\n        strokeWidth={thickness}\n        strokeLinecap=\"round\"\n        fill=\"none\"\n        strokeDasharray={`${size}`}\n        transform=\"rotate(-90 25 25)\"\n      />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;AAcG;AAUU,MAAA,OAAO,GAA2B,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,KAAI;IACpF,IAAI,CAAC,SAAS,EAAE;AACd,QAAA,SAAS,GAAG,IAAI,GAAG,EAAE,CAAC;KACvB;AACD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EACT,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAC7B,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,CAAA,IAAA,EAAO,IAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,EAC9B,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA;AAElC,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,EAAE,EAAE,IAAI,GAAG,CAAC,EACZ,EAAE,EAAE,IAAI,GAAG,CAAC,EACZ,CAAC,EAAE,CAAC,IAAI,GAAG,SAAS,IAAI,CAAC,EACzB,MAAM,EAAC,oBAAoB,EAC3B,WAAW,EAAE,SAAS,EACtB,IAAI,EAAC,MAAM,EACH,CAAA;QACV,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,EAC1B,EAAE,EAAE,IAAI,GAAG,CAAC,EACZ,EAAE,EAAE,IAAI,GAAG,CAAC,EACZ,CAAC,EAAE,CAAC,IAAI,GAAG,SAAS,IAAI,CAAC,EACzB,MAAM,EAAC,mBAAmB,EAC1B,WAAW,EAAE,SAAS,EACtB,aAAa,EAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,eAAe,EAAE,CAAG,EAAA,IAAI,CAAE,CAAA,EAC1B,SAAS,EAAC,mBAAmB,EAAA,CAC7B,CACE,EACN;AACJ;;;;"}

package/dist/esm/Spinner/Spinner.module.scss.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Spinner-module_sr-only__xhjJ8{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.Spinner-module_hidden__Oy9-U{display:none}.Spinner-module_slide-in__APLCs{animation:Spinner-module_slide-in__APLCs .5s forwards}@media (prefers-reduced-motion:reduce){.Spinner-module_slide-in__APLCs{animation-duration:.1ms}}.Spinner-module_slide-out__G8udv{animation:Spinner-module_slide-out__G8udv .5s forwards}@media (prefers-reduced-motion:reduce){.Spinner-module_slide-out__G8udv{animation-duration:.1ms}}@keyframes Spinner-module_slide-in__APLCs{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Spinner-module_slide-out__G8udv{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.Spinner-module_spinner__SZoUP{--orbit-color:var(--color-blue-grey100);--arch-color:var(--color-blue-grey900)}@keyframes Spinner-module_rotate__ZJ5Dg{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Spinner-module_spinner__SZoUP .Spinner-module_arch__tNBgF{animation:Spinner-module_rotate__ZJ5Dg 1s linear infinite;transform-origin:center}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwaW5uZXIubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7O0VBY0U7QUFDRjs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLCtCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSw4QkFDRSxZQUNGLENBRUEsZ0NBQ0UscURBQ0YsQ0FFQSx1Q0FDRSxnQ0FDRSx1QkFDRixDQUNGLENBQ0EsaUNBQ0Usc0RBQ0YsQ0FFQSx1Q0FDRSxpQ0FDRSx1QkFDRixDQUNGLENBQ0EsMENBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLDJDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YsQ0FDQSwrQkFDRSx1Q0FBd0MsQ0FDeEMsc0NBQ0YsQ0FDQSx3Q0FDRSxHQUNFLHNCQUNGLENBQ0EsR0FDRSx1QkFDRixDQUNGLENBQ0EsMkRBQ0UseURBQW9DLENBQ3BDLHVCQUNGIiwiZmlsZSI6IlNwaW5uZXIubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1pbiB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1vdXQge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn1cbi5zcGlubmVyIHtcbiAgLS1vcmJpdC1jb2xvcjogdmFyKC0tY29sb3ItYmx1ZS1ncmV5MTAwKTtcbiAgLS1hcmNoLWNvbG9yOiB2YXIoLS1jb2xvci1ibHVlLWdyZXk5MDApO1xufVxuQGtleWZyYW1lcyByb3RhdGUge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgfVxufVxuLnNwaW5uZXIgLmFyY2gge1xuICBhbmltYXRpb246IHJvdGF0ZSAxcyBsaW5lYXIgaW5maW5pdGU7XG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlcjtcbn0iXX0= */";
+var classes = {"sr-only":"Spinner-module_sr-only__xhjJ8","hidden":"Spinner-module_hidden__Oy9-U","slide-in":"Spinner-module_slide-in__APLCs","slide-out":"Spinner-module_slide-out__G8udv","spinner":"Spinner-module_spinner__SZoUP","arch":"Spinner-module_arch__tNBgF","rotate":"Spinner-module_rotate__ZJ5Dg"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=Spinner.module.scss.esm.js.map

package/dist/esm/Spinner/Spinner.module.scss.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.module.scss.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/src/components/Button/Spinner.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const Spinner: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const ButtonSpinner: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/esm/src/components/Icon/Icon.d.ts

@@ -83,7 +83,9 @@ export declare enum Icons {
     ZoomOut = "zoom-out",
     ArrowUp = "arrow-up",
     ExternalLink = "external-link",
-    SideSheetHandle = "sidesheet-handle"
+    SideSheetHandle = "sidesheet-handle",
+    PendingCircle = "pending-circle",
+    MinusCircle = "minus-circle"
 }
 type Tag = "span" | "div" | "i";
 export interface Props extends ComponentPropsWithRef<"div"> {

package/dist/esm/src/components/Spinner/Spinner.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+    thickness?: number;
+}
+export declare const Spinner: React.FC<SpinnerProps>;

package/dist/esm/src/components/Spinner/Spinner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/index.d.ts

@@ -34,6 +34,8 @@ export { ProgressBar } from "./components/ProgressBar/ProgressBar";
 export type { Props as ProgressBarProps } from "./components/ProgressBar/ProgressBar";
 export { Skeleton } from "./components/Skeleton/Skeleton";
 export type { Props as SkeletonProps } from "./components/Skeleton/Skeleton";
+export { Spinner } from "./components/Spinner/Spinner";
+export type { SpinnerProps } from "./components/Spinner/Spinner";
 export { Stepper } from "./components/Stepper/Stepper";
 export type { Props as StepperProps } from "./components/Stepper/Stepper";
 export type { Props as StepProps } from "./components/Stepper/Step";

package/dist/esm/src/index.esm.js

@@ -16,6 +16,7 @@ export { Tooltip } from '../Tooltip/Tooltip.esm.js';
 export { Typography } from '../Typography/Typography.esm.js';
 export { ProgressBar } from '../ProgressBar/ProgressBar.esm.js';
 export { Skeleton } from '../Skeleton/Skeleton.esm.js';
+export { Spinner } from '../Spinner/Spinner.esm.js';
 export { Stepper } from '../Stepper/Stepper.esm.js';
 export { Pagination } from '../Pagination/Pagination.esm.js';
 export { useRepeater } from './hooks/useRepeater.esm.js';

package/dist/esm/src/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/style-inject.js

@@ -2,51 +2,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-var styleInject$1 = {exports: {}};
-
-(function (module, exports) {
-	(function (global, factory) {
-		module.exports = factory() ;
-	}(commonjsGlobal, (function () {
-	function styleInject(css, ref) {
-	  if ( ref === void 0 ) ref = {};
-	  var insertAt = ref.insertAt;
-
-	  if (!css || typeof document === 'undefined') { return; }
-
-	  var head = document.head || document.getElementsByTagName('head')[0];
-	  var style = document.createElement('style');
-	  style.type = 'text/css';
-
-	  if (insertAt === 'top') {
-	    if (head.firstChild) {
-	      head.insertBefore(style, head.firstChild);
-	    } else {
-	      head.appendChild(style);
-	    }
-	  } else {
-	    head.appendChild(style);
-	  }
-
-	  if (style.styleSheet) {
-	    style.styleSheet.cssText = css;
-	  } else {
-	    style.appendChild(document.createTextNode(css));
-	  }
-	}
-
-	return styleInject;
-
-	}))); 
-} (styleInject$1));
-
-var styleInjectExports = styleInject$1.exports;
+var styleInject$2 = {exports: {}};
+
+var styleInject$1 = styleInject$2.exports;
+
+var hasRequiredStyleInject;
+
+function requireStyleInject () {
+	if (hasRequiredStyleInject) return styleInject$2.exports;
+	hasRequiredStyleInject = 1;
+	(function (module, exports) {
+		(function (global, factory) {
+			module.exports = factory() ;
+		}(styleInject$1, (function () {
+		function styleInject(css, ref) {
+		  if ( ref === void 0 ) ref = {};
+		  var insertAt = ref.insertAt;
+
+		  if (!css || typeof document === 'undefined') { return; }
+
+		  var head = document.head || document.getElementsByTagName('head')[0];
+		  var style = document.createElement('style');
+		  style.type = 'text/css';
+
+		  if (insertAt === 'top') {
+		    if (head.firstChild) {
+		      head.insertBefore(style, head.firstChild);
+		    } else {
+		      head.appendChild(style);
+		    }
+		  } else {
+		    head.appendChild(style);
+		  }
+
+		  if (style.styleSheet) {
+		    style.styleSheet.cssText = css;
+		  } else {
+		    style.appendChild(document.createTextNode(css));
+		  }
+		}
+
+		return styleInject;
+
+		}))); 
+	} (styleInject$2));
+	return styleInject$2.exports;
+}
+
+var styleInjectExports = requireStyleInject();
 var styleInject = /*@__PURE__*/getDefaultExportFromCjs(styleInjectExports);
 
 exports.default = styleInject;

package/dist/lib/style-inject.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-inject.js","sources":["../../node_modules/style-inject/dist/style-inject.js"],"sourcesContent":["(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n\ttypeof define === 'function' && define.amd ? define(factory) :\n\t(global.styleInject = factory());\n}(this, (function () { 'use strict';\n\nfunction styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nreturn styleInject;\n\n})));\n"],"names":["this"],"mappings":";;;;;;;;;;;;;AAAA,CAAA,CAAC,UAAU,MAAM,EAAE,OAAO,EAAE;EACoC,MAAiB,CAAA,OAAA,GAAA,OAAO,EAAE,CAEzD,CAAC;AAClC,EAAC,CAACA,cAAI,GAAG,YAAY,CACrB;AACA,CAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;GAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,GAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;GACE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,GAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;GACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,GAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,GAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,KAAI,IAAI,IAAI,CAAC,UAAU,EAAE;OACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,MAAK,MAAM;AACX,OAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MACzB;AACL,IAAG,MAAM;AACT,KAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB;AACH;AACA,GAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,KAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,IAAG,MAAM;KACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;IACjD;EACF;AACD;AACA,CAAA,OAAO,WAAW,CAAC;AACnB;AACA,EAAC,EAAE,EAAA;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"style-inject.js","sources":["../../node_modules/style-inject/dist/style-inject.js","../../node_modules/style-inject/dist/style-inject.js?commonjs-entry"],"sourcesContent":["(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n\ttypeof define === 'function' && define.amd ? define(factory) :\n\t(global.styleInject = factory());\n}(this, (function () { 'use strict';\n\nfunction styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nreturn styleInject;\n\n})));\n","import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireStyleInject } from \"/home/circleci/project/node_modules/style-inject/dist/style-inject.js\";\nvar styleInjectExports = requireStyleInject();\nexport { styleInjectExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(styleInjectExports);"],"names":["this"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,EAAA,CAAC,UAAU,MAAM,EAAE,OAAO,EAAE;GACoC,MAAiB,CAAA,OAAA,GAAA,OAAO,EAAE,CAEzD,CAAC;AAClC,GAAC,CAACA,aAAI,GAAG,YAAY,CACrB;AACA,EAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;IAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,IAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;IACE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,IAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,IAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,IAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,MAAI,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,OAAK,MAAM;AACX,QAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;OACzB;AACL,KAAG,MAAM;AACT,MAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACzB;AACH;AACA,IAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,MAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,KAAG,MAAM;MACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;KACjD;GACF;AACD;AACA,EAAA,OAAO,WAAW,CAAC;AACnB;AACA,GAAC,EAAE,EAAA;;;;;ACjCH,IAAI,kBAAkB,GAAG,kBAAkB,EAAE,CAAC;AAE9C,kBAAe,aAAa,uBAAuB,CAAC,kBAAkB,CAAC;;;;","x_google_ignoreList":[0,1]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "8.4.0",
+  "version": "8.5.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -61,7 +61,7 @@
     "@mdx-js/react": "^3.0.1",
     "@onewelcome/eslint-config-shared-codestyle": "^9.2.3",
     "@onewelcome/storybook-addon-basestyling": "^2.0.0",
-    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",

package/src/components/Button/BaseButton.tsx

@@ -16,7 +16,7 @@
 
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
 import classes from "./BaseButton.module.scss";
-import { Spinner } from "./Spinner";
+import { ButtonSpinner } from "./Spinner";
 
 export interface Props extends ComponentPropsWithRef<"button"> {
   type?: "submit" | "button" | "reset";
@@ -49,7 +49,7 @@ const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> =
       {loading ? (
         <Fragment>
           <div className={classes["content-hidden"]}>{children}</div>
-          <Spinner className={classes["spinner"]} />
+          <ButtonSpinner className={classes["spinner"]} />
         </Fragment>
       ) : (
         children

package/src/components/Button/Spinner.tsx

@@ -16,7 +16,7 @@
 
 import React from "react";
 
-export const Spinner: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+export const ButtonSpinner: React.FC<React.SVGProps<SVGSVGElement>> = props => (
   <svg
     {...props}
     width="24"

package/src/components/Icon/Icon.module.scss

@@ -377,8 +377,15 @@
   content: "\e950";
   @include fontProperties();
 }
-
 .icon-sidesheet-handle:before {
   content: "\e951";
   @include fontProperties();
 }
+.icon-pending-circle:before {
+  content: "\e952";
+  @include fontProperties();
+}
+.icon-minus-circle:before {
+  content: "\e953";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -101,7 +101,9 @@ export enum Icons {
   ZoomOut = "zoom-out",
   ArrowUp = "arrow-up",
   ExternalLink = "external-link",
-  SideSheetHandle = "sidesheet-handle"
+  SideSheetHandle = "sidesheet-handle",
+  PendingCircle = "pending-circle",
+  MinusCircle = "minus-circle"
 }
 
 type Tag = "span" | "div" | "i";

package/src/components/Spinner/Spinner.module.scss

@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+@import "../../mixins.module.scss";
+
+.spinner {
+  --orbit-color: var(--color-blue-grey100);
+  --arch-color: var(--color-blue-grey900);
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  .arch {
+    animation: rotate 1s linear infinite;
+    transform-origin: center;
+  }
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React from "react";
+import classes from "./Spinner.module.scss";
+
+export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  thickness?: number;
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({ size = 32, thickness, ...props }) => {
+  if (!thickness) {
+    thickness = size / 16;
+  }
+  return (
+    <svg
+      {...props}
+      className={classes["spinner"]}
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={(size - thickness) / 2}
+        stroke="var(--orbit-color)"
+        strokeWidth={thickness}
+        fill="none"
+      ></circle>
+      <circle
+        className={classes["arch"]}
+        cx={size / 2}
+        cy={size / 2}
+        r={(size - thickness) / 2}
+        stroke="var(--arch-color)"
+        strokeWidth={thickness}
+        strokeLinecap="round"
+        fill="none"
+        strokeDasharray={`${size}`}
+        transform="rotate(-90 25 25)"
+      />
+    </svg>
+  );
+};

package/src/font/icomoon.svg

@@ -89,5 +89,7 @@
 <glyph unicode="&#xe94f;" glyph-name="arrow-up" d="M0.001 448.003l90.24-90.24 357.76 357.117v-778.879h128.002v778.879l357.12-357.762 90.877 90.885-512.002 511.996-511.996-511.996z" />
 <glyph unicode="&#xe950;" glyph-name="external-link" d="M910.225 49.775h-796.448v796.448h398.223v113.777h-398.223c-63.146 0-113.777-51.2-113.777-113.777v-796.448c0-62.575 50.631-113.775 113.777-113.775h796.448c62.575 0 113.775 51.2 113.775 113.775v398.225h-113.775v-398.225zM625.777 960v-113.777h204.232l-559.218-559.218 80.213-80.213 559.221 559.218v-204.232h113.775v398.223h-398.223z" />
 <glyph unicode="&#xe951;" glyph-name="sidesheet-handle" horiz-adv-x="1317" d="M1316.785 960v-146.286h-292.571v146.286h292.571zM1316.785 667.429v-146.286h-292.571v146.286h292.571zM1316.785 228.571v146.286h-292.571v-146.286h292.571zM1316.785 82.286v-146.286h-292.571v146.286h292.571zM660.044 508.952h-659.83v-121.904h659.83l-203.662-218.819 80.213-85.943 341.334 365.714-341.334 365.714-80.213-85.943 203.662-218.819z" />
+<glyph unicode="&#xe952;" glyph-name="pending-circle" d="M511.997 959.999c-282.621 0-511.997-229.375-511.997-511.998 0-282.62 229.376-512.001 511.997-512.001 282.623 0 512.003 229.38 512.003 512.001 0 282.623-229.38 511.998-512.003 511.998zM511.997 38.402c-226.302 0-409.598 183.294-409.598 409.598s183.295 409.6 409.598 409.6c226.308 0 409.601-183.296 409.601-409.6s-183.294-409.598-409.601-409.598zM255.999 371.203c42.415 0 76.8 34.382 76.8 76.796s-34.385 76.8-76.8 76.8c-42.415 0-76.8-34.385-76.8-76.8s34.385-76.796 76.8-76.796zM511.997 371.203c42.418 0 76.8 34.382 76.8 76.796s-34.382 76.8-76.8 76.8c-42.414 0-76.797-34.385-76.797-76.8s34.385-76.796 76.797-76.796zM767.998 371.203c42.412 0 76.8 34.382 76.8 76.796s-34.388 76.8-76.8 76.8c-42.418 0-76.8-34.385-76.8-76.8s34.382-76.796 76.8-76.796z" />
+<glyph unicode="&#xe953;" glyph-name="minus-circle" d="M255.999 499.2v-102.401h511.999v102.401h-511.999zM511.997 959.999c-282.621 0-511.997-229.375-511.997-511.998 0-282.62 229.376-512.001 511.997-512.001 282.623 0 512.003 229.38 512.003 512.001 0 282.623-229.38 511.998-512.003 511.998zM511.997 38.402c-225.789 0-409.598 183.81-409.598 409.598 0 225.792 183.808 409.6 409.598 409.6 225.792 0 409.601-183.808 409.601-409.6 0-225.788-183.81-409.598-409.601-409.598z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>