fix: update spinner to use svg instead

packages/design-system/lib/components/Spinner/Spinner.stories.tsx

@@ -7,98 +7,35 @@ import { Spinner } from './Spinner'
 const meta: Meta<typeof Spinner> = {
   title: 'Components/Spinner',
   component: Spinner,
-  argTypes: {},
+  argTypes: {
+    type: {
+      control: 'text',
+    },
+    size: {
+      control: 'number',
+    },
+  },
 }
 
 export default meta
 
 type Story = StoryObj<typeof Spinner>
 
-function Wrapper({
-  children,
-  backgroundColor,
-}: {
-  children: React.ReactNode
-  backgroundColor?: string
-}) {
-  return (
-    <div
-      style={{
-        height: '200px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor,
-      }}
-    >
-      {children}
-    </div>
-  )
+export const Dark: Story = {
+  args: {
+    type: 'Dark',
+    size: 40,
+  },
 }
 
-export const Default: Story = {
+export const White: Story = {
   args: {
-    color: 'Accent',
-    size: 'Medium',
+    type: 'White',
+    size: 40,
   },
-  decorators: [
-    (Story) => (
-      <Wrapper>
-        <Story />
-      </Wrapper>
-    ),
-  ],
-}
-
-export const Inverted: Story = {
-  args: {
-    color: 'Inverted',
-    size: 'Medium',
+  parameters: {
+    backgrounds: {
+      default: 'Scandic Primary Dark',
+    },
   },
-  decorators: [
-    (Story) => (
-      <Wrapper backgroundColor="var(--Icon-Interactive-Default)">
-        <Story />
-      </Wrapper>
-    ),
-  ],
-}
-
-export const Small: Story = {
-  args: {
-    size: 'Small',
-  },
-  decorators: [
-    (Story) => (
-      <Wrapper>
-        <Story />
-      </Wrapper>
-    ),
-  ],
-}
-
-export const Medium: Story = {
-  args: {
-    size: 'Medium',
-  },
-  decorators: [
-    (Story) => (
-      <Wrapper>
-        <Story />
-      </Wrapper>
-    ),
-  ],
-}
-
-export const Large: Story = {
-  args: {
-    size: 'Large',
-  },
-  decorators: [
-    (Story) => (
-      <Wrapper>
-        <Story />
-      </Wrapper>
-    ),
-  ],
 }