feat: redo settings and all org pages. (#601)

* feat: new components, deploy storybook

* refactor: simplify component field definitions and enhance button loading state

- Removed unnecessary type imports and simplified the FIELDS array definitions across multiple components in Storybook.
- Updated button component to use a loading state instead of isLoading, improving clarity and consistency in props.
- Adjusted button stories to reflect the new loading prop and enhanced the button's loading visual feedback.
- Minor CSS adjustments for better layout and styling consistency.

* chore: add field, card, password components

* feat: improve page component & update AuthUI path

* chore: update bits-ui to version 2.14.4 and all org related UI's

- Updated bits-ui dependency in pnpm-lock.yaml and package.json to version 2.14.4.
- Refactored imports for RoleBasedSecurity and UpgradeBanner components to use the new ui feature directory.
- Removed unused Course components and related files to clean up the codebase.
- Enhanced various components to improve consistency and maintainability.

* chore: move all setting buttons to the top and update auth ui styles

* chore: remove svelte-loading-spinners and replace with @cio/ui/base/spinner

- Removed all instances of svelte-loading-spinners from the project.
- Updated components to use the new Spinner from @cio/ui/base/spinner.
- Cleaned up pnpm-lock.yaml and package.json to reflect the removal of svelte-loading-spinners.
- Added new CSS animations for rocket launch effects in app.css.
- Enhanced email change flow with updated verification messages in translations.

* chore: remove supabase file upload from dashboard and move to r2

* chore: update organization API and UI components

- Added new API methods for organization plan operations and team management.
- Introduced middleware for API key authentication and organization admin checks.
- Refactored organization-related components to utilize the new API structure.
- Updated various UI components to improve consistency and maintainability.
- Enhanced error handling and validation for organization-related actions.
- Removed deprecated services and streamlined the codebase.

packages/storybook/src/molecules/card/card.stories.svelte

@@ -0,0 +1,123 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import * as Card from '@cio/ui/base/card';
+  import { Button } from '@cio/ui/base/button';
+  import { Label } from '@cio/ui/base/label';
+  import { Input } from '@cio/ui/base/input';
+
+  import { FIELDS } from './fields';
+
+  const { Story } = defineMeta({
+    title: 'Molecules/Card',
+    component: Card.Root,
+    parameters: {
+      layout: 'centered',
+      controls: {
+        include: FIELDS
+      }
+    },
+    tags: ['autodocs']
+  });
+
+  let email = $state('');
+  let password = $state('');
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <Card.Root class="w-full max-w-sm">
+      <Card.Header>
+        <Card.Title>Login to your account</Card.Title>
+        <Card.Description>Enter your email below to login to your account</Card.Description>
+        <Card.Action>
+          <Button variant="link">Sign Up</Button>
+        </Card.Action>
+      </Card.Header>
+      <Card.Content>
+        <form>
+          <div class="ui:flex ui:flex-col ui:gap-6">
+            <div class="ui:grid ui:gap-2">
+              <Label for="email">Email</Label>
+              <Input id="email" type="email" bind:value={email} placeholder="m@example.com" required />
+            </div>
+            <div class="ui:grid ui:gap-2">
+              <div class="ui:flex ui:items-center">
+                <Label for="password">Password</Label>
+                <a href="#" class="ui:ms-auto ui:inline-block ui:text-sm ui:underline-offset-4 hover:ui:underline">
+                  Forgot your password?
+                </a>
+              </div>
+              <Input id="password" type="password" bind:value={password} required />
+            </div>
+          </div>
+        </form>
+      </Card.Content>
+      <Card.Footer class="ui:flex-col ui:gap-2">
+        <Button type="submit" class="ui:w-full">Login</Button>
+        <Button variant="outline" class="ui:w-full">Login with Google</Button>
+      </Card.Footer>
+    </Card.Root>
+  {/snippet}
+</Story>
+
+<Story name="Simple">
+  {#snippet template()}
+    <Card.Root class="ui:w-full ui:max-w-sm">
+      <Card.Header>
+        <Card.Title>Card Title</Card.Title>
+        <Card.Description>Card description goes here.</Card.Description>
+      </Card.Header>
+      <Card.Content>
+        <p>Card content goes here.</p>
+      </Card.Content>
+    </Card.Root>
+  {/snippet}
+</Story>
+
+<Story name="With Footer">
+  {#snippet template()}
+    <Card.Root class="ui:w-full ui:max-w-sm">
+      <Card.Header>
+        <Card.Title>Card Title</Card.Title>
+        <Card.Description>Card description goes here.</Card.Description>
+      </Card.Header>
+      <Card.Content>
+        <p>Card content goes here.</p>
+      </Card.Content>
+      <Card.Footer>
+        <Button size="sm">Action</Button>
+      </Card.Footer>
+    </Card.Root>
+  {/snippet}
+</Story>
+
+<Story name="With Action">
+  {#snippet template()}
+    <Card.Root class="ui:w-full ui:max-w-sm">
+      <Card.Header>
+        <Card.Title>Card Title</Card.Title>
+        <Card.Description>Card description goes here.</Card.Description>
+        <Card.Action>
+          <Button variant="ghost" size="sm">More</Button>
+        </Card.Action>
+      </Card.Header>
+      <Card.Content>
+        <p>Card content goes here.</p>
+      </Card.Content>
+    </Card.Root>
+  {/snippet}
+</Story>
+
+<Story name="No Header">
+  {#snippet template()}
+    <Card.Root class="ui:w-full ui:max-w-sm">
+      <Card.Content>
+        <p>Card content without header.</p>
+      </Card.Content>
+      <Card.Footer>
+        <Button size="sm">Action</Button>
+      </Card.Footer>
+    </Card.Root>
+  {/snippet}
+</Story>

packages/storybook/src/molecules/card/fields.ts

@@ -0,0 +1 @@
+export const FIELDS = ['class'] as string[];