Adding spinner indicator

src/Spinner/Overview.mdx

@@ -0,0 +1,16 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as Stories from './Spinner.stories.jsx';
+
+<Meta of={Stories} />
+
+# Spinner
+
+Renders a loading spinner. You can specify the `size` prop to change the size of the spinner. Use `sm` for 
+loading in buttons, `md` and `lg` for loading content panels like modals.
+
+<Canvas of={Stories.Example} />
+
+## Props
+
+<Controls />

src/Spinner/Spinner.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import classes from './Spinner.module.css';
+
+const sizeMap = {
+  sm: 16,
+  md: 32,
+  lg: 64,
+}
+
+const Spinner = ({
+  size: sizeKey = 'md',
+  ...props
+}) => {
+
+  const size = sizeMap[sizeKey];
+
+  return (
+    /* inline-flex removes the extra line height */
+    <span style={{ display: 'inline-flex' }}>
+      <svg
+        className={classes.Spinner}
+        height={size}
+        width={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        aria-hidden
+        {...props}
+      >
+        <circle
+          cx="8"
+          cy="8"
+          r="7"
+          stroke="currentColor"
+          strokeOpacity="0.25"
+          strokeWidth="2"
+          vectorEffect="non-scaling-stroke"
+        />
+        <path
+          d="M15 8a7.002 7.002 0 00-7-7"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+    </span>
+  )
+}
+
+export default Spinner;

src/Spinner/Spinner.module.css

@@ -0,0 +1,9 @@
+.Spinner {
+  animation: rotate-keyframes 1s linear infinite;
+}
+
+@keyframes rotate-keyframes {
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/Spinner/Spinner.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import Spinner from '@harvest-profit/npk/Spinner';
+
+export default {
+  title: 'Components/Spinner',
+  component: Spinner,
+  argTypes: {
+    size: {
+      control: {
+        type: 'radio',
+      },
+      options: ['sm', 'md', 'lg'],
+      table: { defaultValue: { summary: "md" } }
+    },
+  }
+}
+
+export const Playground = ({ ...props }) => (<div>
+  <Spinner {...props} />
+</div>);
+
+export const Example = () => (<div>
+  <div>Small <Spinner size="sm" /></div>
+  <div>Medium <Spinner /></div>
+  <div>Large <Spinner size="lg" /></div>
+</div>);

src/Spinner/index.js

@@ -0,0 +1 @@
+export { default } from './Spinner';

src/index.js

@@ -1,6 +1,7 @@
 import ApplicationAlert from './ApplicationAlert';
 import Button from './Button';
 import Placeholder from './Placeholder';
+import Spinner from './Spinner';
 import Tooltip from './Tooltip';
 import ThemeContext, { ThemeContextProvider } from './ThemeContext';
 
@@ -11,5 +12,6 @@ export {
   ApplicationAlert,
   Button,
   Placeholder,
+  Spinner,
   Tooltip
 }