@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/patterns/chat/index.js

@@ -1,22 +1,22 @@
-// =============================================================================
-// CHAT PATTERNS - Chat interface components
-// =============================================================================
-
-// Core layout
-export { default as ChatContainer } from './ChatContainer.svelte';
-export { default as ChatMessageGroup } from './ChatMessageGroup.svelte';
-
-// Message bubbles
-export { default as ChatBubble } from './ChatBubble.svelte';
-export { default as ChatTextBubble } from './ChatTextBubble.svelte';
-export { default as ChatInvitationBubble } from './ChatInvitationBubble.svelte';
-
-// Status displays
-export { default as ChatStatusBadge } from './ChatStatusBadge.svelte';
-export { default as ChatStatusTransition } from './ChatStatusTransition.svelte';
-export { default as ChatSlotUpdate } from './ChatSlotUpdate.svelte';
-
-// Dividers and notices
-export { default as ChatDateDivider } from './ChatDateDivider.svelte';
-export { default as ChatActivityNotice } from './ChatActivityNotice.svelte';
-export { default as ChatInvitationNotice } from './ChatInvitationNotice.svelte';
+// =============================================================================
+// CHAT PATTERNS - Chat interface components
+// =============================================================================
+
+// Core layout
+export { default as ChatContainer } from './ChatContainer.svelte';
+export { default as ChatMessageGroup } from './ChatMessageGroup.svelte';
+
+// Message bubbles
+export { default as ChatBubble } from './ChatBubble.svelte';
+export { default as ChatTextBubble } from './ChatTextBubble.svelte';
+export { default as ChatInvitationBubble } from './ChatInvitationBubble.svelte';
+
+// Status displays
+export { default as ChatStatusBadge } from './ChatStatusBadge.svelte';
+export { default as ChatStatusTransition } from './ChatStatusTransition.svelte';
+export { default as ChatSlotUpdate } from './ChatSlotUpdate.svelte';
+
+// Dividers and notices
+export { default as ChatDateDivider } from './ChatDateDivider.svelte';
+export { default as ChatActivityNotice } from './ChatActivityNotice.svelte';
+export { default as ChatInvitationNotice } from './ChatInvitationNotice.svelte';

package/dist/patterns/data/DataGrid.svelte

@@ -1,45 +1,45 @@
-<script>
-  let {
-    items = [],
-    cols = 3,
-    gap = 4,
-    minWidth = null,
-    class: className = '',
-    children,
-  } = $props();
-
-  const colsClasses = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 sm:grid-cols-2',
-    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-    5: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
-    6: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
-  };
-
-  const gapClasses = {
-    2: 'gap-2',
-    3: 'gap-3',
-    4: 'gap-4',
-    5: 'gap-5',
-    6: 'gap-6',
-    8: 'gap-8'
-  };
-
-  let gridCols = $derived(colsClasses[cols] || colsClasses[3]);
-  let gridGap = $derived(gapClasses[gap] || gapClasses[4]);
-  let gridStyle = $derived(minWidth ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr))` : '');
-</script>
-
-<div
-  class="grid {minWidth ? '' : gridCols} {gridGap} {className}"
-  style={gridStyle}
->
-  {#if items.length > 0}
-    {#each items as item, index}
-      {@render children?.(item, index)}
-    {/each}
-  {:else}
-    {@render children?.()}
-  {/if}
-</div>
+<script>
+  let {
+    items = [],
+    cols = 3,
+    gap = 4,
+    minWidth = null,
+    class: className = '',
+    children,
+  } = $props();
+
+  const colsClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    5: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
+    6: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
+  };
+
+  const gapClasses = {
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    5: 'gap-5',
+    6: 'gap-6',
+    8: 'gap-8'
+  };
+
+  let gridCols = $derived(colsClasses[cols] || colsClasses[3]);
+  let gridGap = $derived(gapClasses[gap] || gapClasses[4]);
+  let gridStyle = $derived(minWidth ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr))` : '');
+</script>
+
+<div
+  class="grid {minWidth ? '' : gridCols} {gridGap} {className}"
+  style={gridStyle}
+>
+  {#if items.length > 0}
+    {#each items as item, index}
+      {@render children?.(item, index)}
+    {/each}
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>

package/dist/patterns/data/DataList.spec.js

@@ -26,27 +26,27 @@ describe('DataList Dividers', () => {
     const { container } = render(DataList);
     const list = container.querySelector('ul');
     expect(list).toHaveClass('divide-y');
-    expect(list).toHaveClass('divide-gray-200');
+    expect(list).toHaveClass('divide-border');
   });
 
   test('dividers=true shows divide classes', () => {
     const { container } = render(DataList, { props: { dividers: true } });
     const list = container.querySelector('ul');
     expect(list).toHaveClass('divide-y');
-    expect(list).toHaveClass('divide-gray-200');
+    expect(list).toHaveClass('divide-border');
   });
 
   test('dividers=false removes divide classes', () => {
     const { container } = render(DataList, { props: { dividers: false } });
     const list = container.querySelector('ul');
     expect(list).not.toHaveClass('divide-y');
-    expect(list).not.toHaveClass('divide-gray-200');
+    expect(list).not.toHaveClass('divide-border');
   });
 
-  test('dividers have dark mode class', () => {
+  test('dividers use token-based border class', () => {
     const { container } = render(DataList, { props: { dividers: true } });
     const list = container.querySelector('ul');
-    expect(list).toHaveClass('dark:divide-gray-700');
+    expect(list).toHaveClass('divide-border');
   });
 });
 

package/dist/patterns/data/DataList.svelte

@@ -1,24 +1,24 @@
-<script>
-  let {
-    items = [],
-    dividers = true,
-    gap = 0,
-    class: className = '',
-    children,
-  } = $props();
-
-  let gapClass = $derived(gap > 0 ? `space-y-${gap}` : '');
-  let dividerClass = $derived(dividers && gap === 0 ? 'divide-y divide-gray-200 dark:divide-gray-700' : '');
-</script>
-
-<ul class="{dividerClass} {gapClass} {className}" role="list">
-  {#if items.length > 0}
-    {#each items as item, index}
-      <li class="py-3 first:pt-0 last:pb-0">
-        {@render children?.(item, index)}
-      </li>
-    {/each}
-  {:else}
-    {@render children?.()}
-  {/if}
-</ul>
+<script>
+  let {
+    items = [],
+    dividers = true,
+    gap = 0,
+    class: className = '',
+    children,
+  } = $props();
+
+  let gapClass = $derived(gap > 0 ? `space-y-${gap}` : '');
+  let dividerClass = $derived(dividers && gap === 0 ? 'divide-y divide-border' : '');
+</script>
+
+<ul class="{dividerClass} {gapClass} {className}" role="list">
+  {#if items.length > 0}
+    {#each items as item, index}
+      <li class="py-3 first:pt-0 last:pb-0">
+        {@render children?.(item, index)}
+      </li>
+    {/each}
+  {:else}
+    {@render children?.()}
+  {/if}
+</ul>

package/dist/patterns/data/DataTable.spec.js

@@ -18,7 +18,7 @@ describe('DataTable Component', () => {
     const { container } = render(DataTable);
     const wrapper = container.querySelector('.overflow-x-auto');
     expect(wrapper).toBeInTheDocument();
-    expect(wrapper).toHaveClass('rounded-lg', 'border', 'border-gray-200');
+    expect(wrapper).toHaveClass('rounded-lg', 'border', 'border-border');
   });
 
   it('applies custom className', () => {
@@ -37,7 +37,7 @@ describe('DataTable Component', () => {
     it('applies striped classes when striped is true', () => {
       const { container } = render(DataTable, { props: { striped: true } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-bg-secondary');
     });
   });
 
@@ -45,13 +45,13 @@ describe('DataTable Component', () => {
     it('applies hover classes by default', () => {
       const { container } = render(DataTable);
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('[&>tr]:hover:bg-gray-50');
+      expect(tbody.className).toContain('[&>tr]:hover:bg-bg-secondary');
     });
 
     it('does not apply hover classes when hoverable is false', () => {
       const { container } = render(DataTable, { props: { hoverable: false } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).not.toContain('[&>tr]:hover:bg-gray-50');
+      expect(tbody.className).not.toContain('[&>tr]:hover:bg-bg-secondary');
     });
   });
 
@@ -106,7 +106,7 @@ describe('DataTable Component', () => {
     it('tbody has divide styles', () => {
       const { container } = render(DataTable);
       const tbody = container.querySelector('tbody');
-      expect(tbody).toHaveClass('divide-y', 'divide-gray-200');
+      expect(tbody).toHaveClass('divide-y', 'divide-border');
     });
 
     it('table has full width', () => {
@@ -126,31 +126,31 @@ describe('DataTable Component', () => {
     it('includes dark mode border classes', () => {
       const { container } = render(DataTable);
       const wrapper = container.querySelector('.overflow-x-auto');
-      expect(wrapper.className).toContain('dark:border-gray-700');
+      expect(wrapper.className).toContain('');
     });
 
     it('includes dark mode divide classes on tbody', () => {
       const { container } = render(DataTable);
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('dark:divide-gray-700');
+      expect(tbody.className).toContain('');
     });
 
-    it('includes dark mode striped classes when enabled', () => {
+    it('striped classes use token-based bg (auto dark mode via CSS vars)', () => {
       const { container } = render(DataTable, { props: { striped: true } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('dark:[&>tr:nth-child(odd)]:bg-gray-800');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-bg-secondary');
     });
 
-    it('includes dark mode hover classes when enabled', () => {
+    it('hover classes use token-based bg (auto dark mode via CSS vars)', () => {
       const { container } = render(DataTable, { props: { hoverable: true } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('dark:[&>tr]:hover:bg-gray-700');
+      expect(tbody.className).toContain('[&>tr]:hover:bg-bg-secondary');
     });
 
-    it('includes dark mode bordered classes when enabled', () => {
+    it('bordered classes use token-based border (auto dark mode via CSS vars)', () => {
       const { container } = render(DataTable, { props: { bordered: true } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('dark:[&_td]:border-gray-700');
+      expect(tbody.className).toContain('[&_td]:border-border');
     });
   });
 
@@ -158,7 +158,7 @@ describe('DataTable Component', () => {
     it('can combine striped and bordered', () => {
       const { container } = render(DataTable, { props: { striped: true, bordered: true } });
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-bg-secondary');
       expect(tbody.className).toContain('[&_td]:border-x');
     });
 
@@ -175,9 +175,9 @@ describe('DataTable Component', () => {
       const wrapper = container.querySelector('.overflow-x-auto');
       expect(wrapper).toHaveClass('test-class');
       const tbody = container.querySelector('tbody');
-      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-bg-secondary');
       expect(tbody.className).toContain('[&_td]:border-x');
-      expect(tbody.className).toContain('[&>tr]:hover:bg-gray-50');
+      expect(tbody.className).toContain('[&>tr]:hover:bg-bg-secondary');
     });
 
     it('can disable all visual effects', () => {
@@ -209,7 +209,7 @@ describe('DataTable Component', () => {
       const { container } = render(DataTable, { props: { header } });
       const thead = container.querySelector('thead');
       expect(thead).toBeInTheDocument();
-      expect(thead).toHaveClass('text-xs', 'uppercase', 'bg-gray-50');
+      expect(thead).toHaveClass('text-xs', 'uppercase', 'bg-bg-secondary');
     });
 
     it('header receives cellSize as argument', () => {
@@ -228,7 +228,7 @@ describe('DataTable Component', () => {
       }));
       const { container } = render(DataTable, { props: { header } });
       const thead = container.querySelector('thead');
-      expect(thead.className).toContain('dark:bg-gray-700');
+      expect(thead.className).toContain('');
     });
   });
 

package/dist/patterns/data/DataTable.svelte

@@ -1,45 +1,45 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    striped = false,
-    hoverable = true,
-    bordered = false,
-    size = 'md',
-    class: className = '',
-    header,
-    children,
-  } = $props();
-
-  const sizeClasses = {
-    sm: 'px-3 py-2 text-xs',
-    md: 'px-4 py-3 text-sm',
-    lg: 'px-6 py-4 text-base'
-  };
-
-  let cellSize = $derived(sizeClasses[size] || sizeClasses.md);
-</script>
-
-<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 {className}">
-  <table class={`w-full text-left ${typography.textMuted}`}>
-    {#if header}
-      <thead class={`text-xs uppercase bg-gray-50 dark:bg-gray-700 ${typography.textMuted}`}>
-        {@render header(cellSize)}
-      </thead>
-    {/if}
-
-    <tbody class="divide-y divide-gray-200 dark:divide-gray-700 {striped ? '[&>tr:nth-child(odd)]:bg-gray-50 dark:[&>tr:nth-child(odd)]:bg-gray-800' : ''} {hoverable ? '[&>tr]:hover:bg-gray-50 dark:[&>tr]:hover:bg-gray-700' : ''} {bordered ? '[&_td]:border-x [&_td]:border-gray-200 dark:[&_td]:border-gray-700' : ''}">
-      {@render children?.(cellSize)}
-    </tbody>
-  </table>
-</div>
-
-<style>
-  :global(table th),
-  :global(table td) {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-</style>
+<script>
+  import { typography } from '../../tokens/typography';
+
+  let {
+    striped = false,
+    hoverable = true,
+    bordered = false,
+    size = 'md',
+    class: className = '',
+    header,
+    children,
+  } = $props();
+
+  const sizeClasses = {
+    sm: 'px-3 py-2 text-xs',
+    md: 'px-4 py-3 text-sm',
+    lg: 'px-6 py-4 text-base'
+  };
+
+  let cellSize = $derived(sizeClasses[size] || sizeClasses.md);
+</script>
+
+<div class="overflow-x-auto rounded-lg border border-border {className}">
+  <table class={`w-full text-left ${typography.textMuted}`}>
+    {#if header}
+      <thead class={`text-xs uppercase bg-bg-secondary ${typography.textMuted}`}>
+        {@render header(cellSize)}
+      </thead>
+    {/if}
+
+    <tbody class="divide-y divide-border {striped ? '[&>tr:nth-child(odd)]:bg-bg-secondary' : ''} {hoverable ? '[&>tr]:hover:bg-bg-secondary' : ''} {bordered ? '[&_td]:border-x [&_td]:border-border' : ''}">
+      {@render children?.(cellSize)}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  :global(table th),
+  :global(table td) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+</style>

package/dist/patterns/data/index.js

@@ -1,4 +1,4 @@
-// Data display pattern components
-export { default as DataGrid } from './DataGrid.svelte';
-export { default as DataList } from './DataList.svelte';
-export { default as DataTable } from './DataTable.svelte';
+// Data display pattern components
+export { default as DataGrid } from './DataGrid.svelte';
+export { default as DataList } from './DataList.svelte';
+export { default as DataTable } from './DataTable.svelte';

package/dist/patterns/forms/FormActions.spec.js

@@ -1,95 +1,95 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import FormActions from "./FormActions.svelte";
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component, container } = render(FormActions, {
-    props: {
-      onCancel: vi.fn(),
-      onSubmit: vi.fn(),
-      ...args,
-    },
-  });
-  return { user, component, container };
-}
-
-describe("FormActions Component Tests", () => {
-  test("Renders submit and cancel buttons", () => {
-    setupTest();
-    expect(screen.getByText("Save")).toBeInTheDocument();
-    expect(screen.getByText("Cancel")).toBeInTheDocument();
-  });
-
-  test("Uses custom button labels", () => {
-    setupTest({ submitLabel: "Update", cancelLabel: "Discard" });
-    expect(screen.getByText("Update")).toBeInTheDocument();
-    expect(screen.getByText("Discard")).toBeInTheDocument();
-  });
-
-  test("Calls onSubmit when submit button clicked", async () => {
-    const onSubmit = vi.fn();
-    const { user } = setupTest({ onSubmit });
-
-    await user.click(screen.getByText("Save"));
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-  });
-
-  test("Calls onCancel when cancel button clicked", async () => {
-    const onCancel = vi.fn();
-    const { user } = setupTest({ onCancel });
-
-    await user.click(screen.getByText("Cancel"));
-    expect(onCancel).toHaveBeenCalledTimes(1);
-  });
-
-  test("Submit button shows loading state", () => {
-    setupTest({ isSubmitting: true });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toBeDisabled();
-  });
-
-  test("Submit button shows success state", () => {
-    setupTest({ isSuccess: true });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    // Check for success variant classes (green background)
-    expect(submitBtn).toHaveClass("bg-green-600");
-    expect(submitBtn).toHaveClass("border-green-600");
-  });
-
-  test("Submit button is disabled when disabled prop is true", () => {
-    setupTest({ disabled: true });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toBeDisabled();
-  });
-
-  test("Hides cancel button when showCancel is false", () => {
-    setupTest({ showCancel: false });
-    expect(screen.queryByText("Cancel")).not.toBeInTheDocument();
-  });
-
-  test("Uses custom submit variant", () => {
-    setupTest({ submitVariant: "red-solid" });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    // Check for red variant classes (red-solid maps to "red" variant)
-    expect(submitBtn).toHaveClass("bg-red-700");
-    expect(submitBtn).toHaveClass("border-red-700");
-  });
-
-  test("Uses custom cancel variant", () => {
-    setupTest({ cancelVariant: "blue-outline" });
-    const cancelBtn = screen.getByText("Cancel").closest("button, a");
-    // Check for outline variant classes (blue-outline maps to "outline" variant)
-    expect(cancelBtn).toHaveClass("text-blue-700");
-    expect(cancelBtn).toHaveClass("border-blue-700");
-    expect(cancelBtn).toHaveClass("bg-transparent");
-  });
-
-  test("Has responsive layout classes", () => {
-    const { container } = setupTest();
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("w-full");
-    expect(wrapper).toHaveClass("flex");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import FormActions from "./FormActions.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component, container } = render(FormActions, {
+    props: {
+      onCancel: vi.fn(),
+      onSubmit: vi.fn(),
+      ...args,
+    },
+  });
+  return { user, component, container };
+}
+
+describe("FormActions Component Tests", () => {
+  test("Renders submit and cancel buttons", () => {
+    setupTest();
+    expect(screen.getByText("Save")).toBeInTheDocument();
+    expect(screen.getByText("Cancel")).toBeInTheDocument();
+  });
+
+  test("Uses custom button labels", () => {
+    setupTest({ submitLabel: "Update", cancelLabel: "Discard" });
+    expect(screen.getByText("Update")).toBeInTheDocument();
+    expect(screen.getByText("Discard")).toBeInTheDocument();
+  });
+
+  test("Calls onSubmit when submit button clicked", async () => {
+    const onSubmit = vi.fn();
+    const { user } = setupTest({ onSubmit });
+
+    await user.click(screen.getByText("Save"));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  test("Calls onCancel when cancel button clicked", async () => {
+    const onCancel = vi.fn();
+    const { user } = setupTest({ onCancel });
+
+    await user.click(screen.getByText("Cancel"));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  test("Submit button shows loading state", () => {
+    setupTest({ isSubmitting: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toBeDisabled();
+  });
+
+  test("Submit button shows success state", () => {
+    setupTest({ isSuccess: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    // Check for success variant classes (green background)
+    expect(submitBtn).toHaveClass("bg-accent-success");
+    expect(submitBtn).toHaveClass("border-accent-success");
+  });
+
+  test("Submit button is disabled when disabled prop is true", () => {
+    setupTest({ disabled: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toBeDisabled();
+  });
+
+  test("Hides cancel button when showCancel is false", () => {
+    setupTest({ showCancel: false });
+    expect(screen.queryByText("Cancel")).not.toBeInTheDocument();
+  });
+
+  test("Uses custom submit variant", () => {
+    setupTest({ submitVariant: "red-solid" });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    // Check for red variant classes (red-solid maps to "red" variant)
+    expect(submitBtn).toHaveClass("bg-accent-danger");
+    expect(submitBtn).toHaveClass("border-accent-danger");
+  });
+
+  test("Uses custom cancel variant", () => {
+    setupTest({ cancelVariant: "blue-outline" });
+    const cancelBtn = screen.getByText("Cancel").closest("button, a");
+    // Check for outline variant classes (blue-outline maps to "outline" variant)
+    expect(cancelBtn).toHaveClass("text-brand-primary");
+    expect(cancelBtn).toHaveClass("border-brand-primary");
+    expect(cancelBtn).toHaveClass("bg-transparent");
+  });
+
+  test("Has responsive layout classes", () => {
+    const { container } = setupTest();
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("w-full");
+    expect(wrapper).toHaveClass("flex");
+  });
+});