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 <[email protected]>

apps/dashboard/src/lib/components/Question/ReasonBox.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { Skeleton } from '@cio/ui/base/skeleton';
+
   import { VARIANTS } from '../PrimaryButton/constants';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { t } from '$lib/utils/functions/translations';
-  import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
+
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
 
   interface Props {
     reason?: string;
@@ -20,12 +22,13 @@
       <div class="flex w-full flex-row items-start space-x-4">
         <img src="/ai.svg" alt="alt" class="animate-pulse" />
         <div class="w-full">
-          <SkeletonText width="100%" paragraph lines={3} />
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-full" />
         </div>
       </div>
       <div class="flex space-x-2">
-        <SkeletonPlaceholder style="height: 2rem; width: 5rem;" />
-        <SkeletonPlaceholder style="height: 2rem; width: 5rem;" />
+        <Skeleton class="h-4 w-20" />
       </div>
     </div>
   {:else}