fix utils path hotfix

src/lib/atoms/IconButton.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-  import { cn } from '../../utils/utils';
+    import {cn} from '../utils/utils';
 
-  export let label: string = '';
-  export let href: string = '';
-  export let isRound = false;
+    export let label: string = '';
+    export let href: string = '';
+    export let isRound = false;
 </script>
 
 <a
-  aria-label={label}
-  class={cn(
+        aria-label={label}
+        class={cn(
     `flex h-f32 w-f32 items-center justify-center bg-black p-1 transition-colors duration-[0.3s] hover:bg-brightBlue`,
     isRound ? 'rounded-full' : 'rounded',
     $$restProps.class
   )}
-  {href}
-  target="_blank"
+        {href}
+        target="_blank"
 >
-  <div class="h-auto w-full text-white">
-    <slot />
-  </div>
+    <div class="h-auto w-full text-white">
+        <slot/>
+    </div>
 </a>

src/lib/atoms/Input.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-  import { cn } from '../../utils/utils';
-  import FormElement from './FormElement.svelte';
+    import {cn} from '../utils/utils';
+    import FormElement from './FormElement.svelte';
 
-  export let label = '';
-  export let isRequired = false;
-  export let description = '';
-  export let value = '';
-  export let placeholder = 'Enter some text...';
-  export let error: string | undefined;
+    export let label = '';
+    export let isRequired = false;
+    export let description = '';
+    export let value = '';
+    export let placeholder = 'Enter some text...';
+    export let error: string | undefined;
 </script>
 
 <FormElement {label} {isRequired} {description} {value} {placeholder} {error}>
-  <input
-    class={cn(
+    <input
+            class={cn(
       'border-input aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground sm flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border bg-cream px-3 py-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       error ? 'border-2 border-error' : 'border border-gray3',
       $$restProps.class
     )}
-    type="text"
-    {placeholder}
-    bind:value
-  />
+            type="text"
+            {placeholder}
+            bind:value
+    />
 </FormElement>

src/lib/atoms/Textarea.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-  import { cn } from '../../utils/utils';
-  import FormElement from './FormElement.svelte';
+    import {cn} from '../utils/utils';
+    import FormElement from './FormElement.svelte';
 
-  export let label = '';
-  export let isRequired = false;
-  export let description = '';
-  export let value: string = '';
-  export let placeholder = 'Enter some text...';
-  export let error: string | undefined;
+    export let label = '';
+    export let isRequired = false;
+    export let description = '';
+    export let value: string = '';
+    export let placeholder = 'Enter some text...';
+    export let error: string | undefined;
 </script>
 
 <FormElement {label} {isRequired} {description} {value} {placeholder} {error}>
   <textarea
-    class={cn(
+          class={cn(
       'border-input aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground sm flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border bg-cream px-3 py-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       error ? 'border-2 border-error' : 'border border-gray3'
     )}
-    {placeholder}
-    bind:value
+          {placeholder}
+          bind:value
   ></textarea>
 </FormElement>

src/lib/features/Card.stories.svelte

@@ -13,36 +13,22 @@
 
 <!-- 320px Width -->
 <Story name="Specific Width">
-  <Card
-      title="320px width"
-      class="w-f320 my-4"
-      icon={UserKey}
-  />
+  <Card title="320px width" class="my-4 w-f320" icon={UserKey} />
 </Story>
 
 <!-- Half Width -->
-<Story name="Half Width" >
-  <Card
-    title="Half width"
-    icon={Wallet}
-    class="w-1/2 mb-4"
-  >
-    <p slot="content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun
-    </p>
+<Story name="Half Width">
+  <Card title="Half width" icon={Wallet} class="mb-4 w-1/2">
+    <p slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun</p>
   </Card>
 </Story>
 
 <!-- Another color -->
-<Story name="Alt Color" >
-  <Card
-    title="Alternate color card"
-    titleColor="cream"
-    bgColor="teal"
-    >
+<Story name="Alt Color">
+  <Card title="Alternate color card" titleColor="cream" bgColor="teal">
     <div slot="content">
-      <h4 class="font-bold md text-navy">Slot content title</h4>
-      <p class="text-error bg-white w-fit px-2 rounded">Slot content: Error text!</p>
+      <h4 class="md font-bold text-navy">Slot content title</h4>
+      <p class="w-fit rounded bg-white px-2 text-error">Slot content: Error text!</p>
       <p class="text-white">Slot content: error message!</p>
     </div>
   </Card>

src/lib/features/Card.svelte

@@ -3,17 +3,14 @@
 
   export let title = 'Default Card Header';
   export let bgColor = 'cream';
-  export let titleColor = 'navy'
+  export let titleColor = 'navy';
   export let icon = UserFilled;
 </script>
 
-<div class="p-6 card-shadow rounded-xl bg-{bgColor} {$$restProps.class}">
-  <div class="pb-6 flex justify-between">
+<div class="card-shadow rounded-xl p-6 bg-{bgColor} {$$restProps.class}">
+  <div class="flex justify-between pb-6">
     <h5 class="font-bold text-{titleColor} inline">{title}</h5>
-    <svelte:component this={icon} class="w-f48 h-f48"/>
+    <svelte:component this={icon} class="h-f48 w-f48" />
   </div>
-    <slot name="content" >
-      This is default content
-    </slot>
+  <slot name="content">This is default content</slot>
 </div>
-

src/lib/features/Header.stories.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Meta, Story } from '@storybook/addon-svelte-csf';
   import Header from './Header.svelte';
-  import { MenuItem } from '../../utils/types.js';
+  import { MenuItem } from '../utils/types.js';
 
   const menuItems: MenuItem[] = [
     { label: 'Home', href: '/' },

src/lib/features/Header.svelte

@@ -2,7 +2,7 @@
   import { FrequencyAccessLogo, OpenClose } from '../assets/index';
   import NavMenu from './NavMenu.svelte';
   import NavMenuMobile from './NavMenuMobile.svelte';
-  import { MenuItem } from '../../utils/types.js';
+  import { MenuItem } from '$lib/utils/types.js';
 
   export let menuItems: MenuItem[] = [];
 

src/lib/features/NavMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { MenuItem } from '../../utils/types.js';
+  import { MenuItem } from '../utils/types.js';
   import Button from '../atoms/Button.svelte';
 
   export let menuItems: MenuItem[] = [];

src/lib/features/NavMenuMobile.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { MenuItem } from '../../utils/types.js';
+  import { MenuItem } from '$lib/utils/types.js';
   import Button from '../atoms/Button.svelte';
 
   export let menuItems: MenuItem[] = [];

src/lib/index.ts

@@ -12,7 +12,7 @@ export { default as Header } from './features/Header.svelte';
 export { default as Modal } from './features/Modal.stories.svelte';
 export { default as NavMenu } from './features/NavMenu.stories.svelte';
 export { default as NavMenuMobile } from './features/NavMenuMobile.svelte';
-export { default as Card } from './features/Card.svelte'
+export { default as Card } from './features/Card.svelte';
 
 // icons & logos
 export * as Assets from './assets/index';

src/lib/shadcnComponents/ui/accordion/accordion-content.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-  import { Accordion as AccordionPrimitive } from 'bits-ui';
-  import { slide } from 'svelte/transition';
-  import { cn } from '../../../../utils/utils';
+    import {Accordion as AccordionPrimitive} from 'bits-ui';
+    import {slide} from 'svelte/transition';
+    import {cn} from '../../../utils/utils';
 
-  type $$Props = AccordionPrimitive.ContentProps;
+    type $$Props = AccordionPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = slide;
-  export let transitionConfig: $$Props['transitionConfig'] = {
-    duration: 200,
-  };
-  export { className as class };
+    let className: $$Props['class'] = undefined;
+    export let transition: $$Props['transition'] = slide;
+    export let transitionConfig: $$Props['transitionConfig'] = {
+        duration: 200,
+    };
+    export {className as class};
 </script>
 
 <AccordionPrimitive.Content
-  class={cn('sm overflow-hidden transition-all', className)}
-  {transition}
-  {transitionConfig}
-  {...$$restProps}
+        class={cn('sm overflow-hidden transition-all', className)}
+        {transition}
+        {transitionConfig}
+        {...$$restProps}
 >
-  <div class="pb-4 pt-0 text-normal">
-    <slot />
-  </div>
+    <div class="pb-4 pt-0 text-normal">
+        <slot/>
+    </div>
 </AccordionPrimitive.Content>

src/lib/shadcnComponents/ui/accordion/accordion-item.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { Accordion as AccordionPrimitive } from 'bits-ui';
-  import { cn } from '../../../../utils/utils';
+    import {Accordion as AccordionPrimitive} from 'bits-ui';
+    import {cn} from '../../../utils/utils';
 
-  type $$Props = AccordionPrimitive.ItemProps;
+    type $$Props = AccordionPrimitive.ItemProps;
 
-  let className: $$Props['class'] = undefined;
-  export let value: $$Props['value'];
-  export { className as class };
+    let className: $$Props['class'] = undefined;
+    export let value: $$Props['value'];
+    export {className as class};
 </script>
 
 <AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
-  <slot />
+    <slot/>
 </AccordionPrimitive.Item>

src/lib/shadcnComponents/ui/accordion/accordion-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Accordion as AccordionPrimitive } from 'bits-ui';
   import { Chevron } from '../../../../lib/assets/index';
-  import { cn } from '../../../../utils/utils';
+  import { cn } from '../../../utils/utils';
 
   type $$Props = AccordionPrimitive.TriggerProps;
   type $$Events = AccordionPrimitive.TriggerEvents;

src/lib/shadcnComponents/ui/dialog/dialog-content.svelte

@@ -1,34 +1,34 @@
 <script lang="ts">
-  import { Dialog as DialogPrimitive } from 'bits-ui';
-  import { Exit } from '../../../assets/index';
-  import * as Dialog from './index.js';
-  import { cn, flyAndScale } from '../../../../utils/utils';
+    import {Dialog as DialogPrimitive} from 'bits-ui';
+    import {Exit} from '../../../assets/index';
+    import * as Dialog from './index.js';
+    import {cn, flyAndScale} from '../../../utils/utils';
 
-  type $$Props = DialogPrimitive.ContentProps;
+    type $$Props = DialogPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = flyAndScale;
-  export let transitionConfig: $$Props['transitionConfig'] = {
-    duration: 200,
-  };
-  export { className as class };
+    let className: $$Props['class'] = undefined;
+    export let transition: $$Props['transition'] = flyAndScale;
+    export let transitionConfig: $$Props['transitionConfig'] = {
+        duration: 200,
+    };
+    export {className as class};
 </script>
 
 <Dialog.Portal>
-  <Dialog.Overlay />
-  <DialogPrimitive.Content
-    {transition}
-    {transitionConfig}
-    class={cn(
+    <Dialog.Overlay/>
+    <DialogPrimitive.Content
+            {transition}
+            {transitionConfig}
+            class={cn(
       'normal fixed left-[50%] top-[50%] z-50 grid w-full max-w-[500px] translate-x-[-50%] translate-y-[-50%] gap-f24 rounded-lg bg-cream p-f48 shadow-lg md:w-full',
       className
     )}
-    {...$$restProps}
-  >
-    <slot />
-    <DialogPrimitive.Close class="absolute right-f24 top-f24 disabled:pointer-events-none">
-      <Exit class="h-4 w-4 text-navy" />
-      <span class="sr-only">Close</span>
-    </DialogPrimitive.Close>
-  </DialogPrimitive.Content>
+            {...$$restProps}
+    >
+        <slot/>
+        <DialogPrimitive.Close class="absolute right-f24 top-f24 disabled:pointer-events-none">
+            <Exit class="h-4 w-4 text-navy"/>
+            <span class="sr-only">Close</span>
+        </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
 </Dialog.Portal>

src/lib/shadcnComponents/ui/dialog/dialog-description.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { Dialog as DialogPrimitive } from 'bits-ui';
-  import { cn } from '../../../../utils/utils.js';
+    import {Dialog as DialogPrimitive} from 'bits-ui';
+    import {cn} from '../../../utils/utils.js';
 
-  type $$Props = DialogPrimitive.DescriptionProps;
+    type $$Props = DialogPrimitive.DescriptionProps;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+    let className: $$Props['class'] = undefined;
+    export {className as class};
 </script>
 
 <DialogPrimitive.Description class={cn('sm', className)} {...$$restProps}>
-  <slot />
+    <slot/>
 </DialogPrimitive.Description>

src/lib/shadcnComponents/ui/dialog/dialog-footer.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '../../../../utils/utils.js';
+    import type {HTMLAttributes} from 'svelte/elements';
+    import {cn} from '../../../utils/utils.js';
 
-  type $$Props = HTMLAttributes<HTMLDivElement>;
+    type $$Props = HTMLAttributes<HTMLDivElement>;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+    let className: $$Props['class'] = undefined;
+    export {className as class};
 </script>
 
 <div class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...$$restProps}>
-  <slot />
+    <slot/>
 </div>