feat: move away from carbon components and TinyMCE (#597)

* feat: remove tinymce & replace org sidebar

* chore: PR Fixes

* chore: move ui font into src dir

* remove files in vite config

* use google font import for loading font

* remove custom font

* more fonts update

* remove font bold

* more removals of font bold

* fix import

* checkpoint

* chore: checkpoint (add course & lms shadcn sidebar)

* minor css improvements and try out font sans

* chore: replace carbon components with shadcn's

* chore: replace carbon components with shadcn _ v3

* chore: ui fixes & storybook update

* feat: UI cleanup

* fix: quick ui fixes

* chore: update pnpm-lock.yaml with new dependencies and versions; fix output.css formatting

* chore: add isloading to button

* feat: add loading state to button stories

* chore: feedback fixes

* fix: feedback fixes

* chore: remove console

* fix: PR comments

* fix: PR comments

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/routes/onboarding/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { env } from '$env/dynamic/public';
   import { goto } from '$app/navigation';
-  import { Dropdown } from 'carbon-components-svelte';
+  import * as Select from '@cio/ui/base/select';
   import TextField from '$lib/components/Form/TextField.svelte';
   import UserProfileIcon from '$lib/components/Icons/UserProfileIcon.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -43,19 +43,18 @@
   let step = $state(1);
   let loading = $state(false);
   let isSiteNameTouched = $state(false);
-  let selectedId = 'en';
 
   let dropdownItems = [
-    { id: 'de', text: 'German' },
-    { id: 'en', text: 'English' },
-    { id: 'es', text: 'Spanish' },
-    { id: 'fr', text: 'French' },
-    { id: 'hi', text: 'Hindi' },
-    { id: 'pl', text: 'Polish' },
-    { id: 'pt', text: 'Portuguese' },
-    { id: 'ru', text: 'Russian' },
-    { id: 'vi', text: 'Vietnamese' },
-    { id: 'da', text: 'Danish' }
+    { id: 'de' as LOCALE, text: 'German' },
+    { id: 'en' as LOCALE, text: 'English' },
+    { id: 'es' as LOCALE, text: 'Spanish' },
+    { id: 'fr' as LOCALE, text: 'French' },
+    { id: 'hi' as LOCALE, text: 'Hindi' },
+    { id: 'pl' as LOCALE, text: 'Polish' },
+    { id: 'pt' as LOCALE, text: 'Portuguese' },
+    { id: 'ru' as LOCALE, text: 'Russian' },
+    { id: 'vi' as LOCALE, text: 'Vietnamese' },
+    { id: 'da' as LOCALE, text: 'Danish' }
   ];
 
   const progress = $derived(Math.round((step / maxSteps) * 100));
@@ -102,11 +101,6 @@
     }
   ];
 
-  function handleSelect(event) {
-    const newSelectedId = event.detail.selectedId;
-    fields.locale = newSelectedId;
-  }
-
   async function setMetaData() {
     if (!env.PUBLIC_IP_REGISTRY_KEY) return;
 
@@ -363,8 +357,17 @@
 
               <!-- Language Picker -->
               <div class="mt-10">
-                <span>{$t('content.toggle_label')}: </span>
-                <Dropdown items={dropdownItems} {selectedId} on:select={handleSelect} class="w-full" />
+                <span class="dark:text-white">{$t('content.toggle_label')}: </span>
+                <Select.Root type="single" bind:value={fields.locale}>
+                  <Select.Trigger class="w-full">
+                    <p>{fields.locale}</p>
+                  </Select.Trigger>
+                  <Select.Content>
+                    {#each dropdownItems as item}
+                      <Select.Item value={item.id}>{item.text}</Select.Item>
+                    {/each}
+                  </Select.Content>
+                </Select.Root>
               </div>
             </div>
           </div>