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/ui/src/custom/password/index.ts

@@ -0,0 +1,5 @@
+import Password from './password.svelte';
+
+export { Password };
+export { Password as default };
+

packages/ui/src/custom/password/password.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import * as InputGroup from '../../base/input-group';
+  import * as Tooltip from '../../base/tooltip';
+  import LockIcon from '@lucide/svelte/icons/lock';
+  import EyeIcon from '@lucide/svelte/icons/eye';
+  import EyeOffIcon from '@lucide/svelte/icons/eye-off';
+  import type { ComponentProps } from 'svelte';
+  import { cn } from '../../tools';
+
+  interface Props {
+    placeholder?: string;
+    value?: string;
+    class?: string;
+    disabled?: boolean;
+    'aria-invalid'?: 'true' | 'false' | undefined;
+    autocomplete?: string;
+    showPasswordTooltip?: string;
+    hidePasswordTooltip?: string;
+    showPasswordAriaLabel?: string;
+    hidePasswordAriaLabel?: string;
+  }
+
+  let {
+    placeholder = '************',
+    value = $bindable(''),
+    class: className = '',
+    disabled = false,
+    'aria-invalid': ariaInvalid,
+    autocomplete,
+    showPasswordTooltip = 'Show password',
+    hidePasswordTooltip = 'Hide password',
+    showPasswordAriaLabel = 'Show password',
+    hidePasswordAriaLabel = 'Hide password',
+    ...restProps
+  }: Props & Omit<ComponentProps<typeof InputGroup.Root>, 'class' | 'children'> = $props();
+
+  let showPassword = $state(false);
+
+  const tooltipText = $derived(showPassword ? hidePasswordTooltip : showPasswordTooltip);
+  const ariaLabel = $derived(showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel);
+</script>
+
+<InputGroup.Root class={cn('w-full', className)} data-slot="password">
+  <InputGroup.Addon align="inline-start">
+    <LockIcon />
+  </InputGroup.Addon>
+  <InputGroup.Input
+    type={showPassword ? 'text' : 'password'}
+    {placeholder}
+    bind:value
+    {disabled}
+    aria-invalid={ariaInvalid}
+    autocomplete={autocomplete}
+    {...restProps}
+  />
+  <InputGroup.Addon align="inline-end">
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <InputGroup.Button
+              {...props}
+              onclick={() => (showPassword = !showPassword)}
+              aria-label={ariaLabel}
+              {disabled}
+            >
+              {#if showPassword}
+                <EyeOffIcon />
+              {:else}
+                <EyeIcon />
+              {/if}
+            </InputGroup.Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>{tooltipText}</Tooltip.Content>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  </InputGroup.Addon>
+</InputGroup.Root>
+