@getmicdrop/svelte-components 5.3.10 → 5.3.13

package/dist/primitives/Icons/ErrorCircle.svelte

@@ -1,19 +1,19 @@
-<script>
-  let { size = "20", color = "currentColor" } = $props();
-</script>
-
-<svg
-    {size}
-    width={size}
-    height={size}
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
->
-    <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM7.55055 5.78278C7.06239 5.29463 6.27094 5.29463 5.78278 5.78278C5.29463 6.27094 5.29463 7.06239 5.78278 7.55055L8.23223 10L5.78278 12.4495C5.29463 12.9376 5.29463 13.7291 5.78278 14.2172C6.27094 14.7054 7.06239 14.7054 7.55055 14.2172L10 11.7678L12.4495 14.2172C12.9376 14.7054 13.7291 14.7054 14.2172 14.2172C14.7054 13.7291 14.7054 12.9376 14.2172 12.4495L11.7678 10L14.2172 7.55055C14.7054 7.06239 14.7054 6.27094 14.2172 5.78278C13.7291 5.29463 12.9376 5.29463 12.4495 5.78278L10 8.23223L7.55055 5.78278Z"
-        fill={color}
-    />
+<script>
+  let { size = "20", color = "currentColor" } = $props();
+</script>
+
+<svg
+    {size}
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM7.55055 5.78278C7.06239 5.29463 6.27094 5.29463 5.78278 5.78278C5.29463 6.27094 5.29463 7.06239 5.78278 7.55055L8.23223 10L5.78278 12.4495C5.29463 12.9376 5.29463 13.7291 5.78278 14.2172C6.27094 14.7054 7.06239 14.7054 7.55055 14.2172L10 11.7678L12.4495 14.2172C12.9376 14.7054 13.7291 14.7054 14.2172 14.2172C14.7054 13.7291 14.7054 12.9376 14.2172 12.4495L11.7678 10L14.2172 7.55055C14.7054 7.06239 14.7054 6.27094 14.2172 5.78278C13.7291 5.29463 12.9376 5.29463 12.4495 5.78278L10 8.23223L7.55055 5.78278Z"
+        fill={color}
+    />
 </svg>    

package/dist/primitives/Icons/FacebookIcon.svelte

@@ -1,13 +1,13 @@
-<script>
-  let { size = "20", color = "currentColor" } = $props();
-</script>
-
-<svg
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  fill={color}
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
-</svg>
+<script>
+  let { size = "20", color = "currentColor" } = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill={color}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
+</svg>

package/dist/primitives/Icons/Home.svelte

@@ -1,27 +1,27 @@
-<script>
-  let { size = "20", color = "currentColor" } = $props();
-</script>
-
-<svg
-  {size}
-  width={size}
-  height={size}
-  viewBox="0 0 20 21"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M12.5 18V11.3333C12.5 11.1123 12.4122 10.9004 12.2559 10.7441C12.0996 10.5878 11.8877 10.5 11.6667 10.5H8.33333C8.11232 10.5 7.90036 10.5878 7.74408 10.7441C7.5878 10.9004 7.5 11.1123 7.5 11.3333V18"
-    stroke={color}
-    stroke-width="1.66667"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M2.5 8.8342C2.49994 8.59176 2.55278 8.35222 2.65482 8.1323C2.75687 7.91238 2.90566 7.71737 3.09083 7.56087L8.92417 2.5617C9.22499 2.30746 9.60613 2.16797 10 2.16797C10.3939 2.16797 10.775 2.30746 11.0758 2.5617L16.9092 7.56087C17.0943 7.71737 17.2431 7.91238 17.3452 8.1323C17.4472 8.35222 17.5001 8.59176 17.5 8.8342V16.3342C17.5 16.7762 17.3244 17.2002 17.0118 17.5127C16.6993 17.8253 16.2754 18.0009 15.8333 18.0009H4.16667C3.72464 18.0009 3.30072 17.8253 2.98816 17.5127C2.67559 17.2002 2.5 16.7762 2.5 16.3342V8.8342Z"
-    stroke={color}
-    stroke-width="1.66667"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+<script>
+  let { size = "20", color = "currentColor" } = $props();
+</script>
+
+<svg
+  {size}
+  width={size}
+  height={size}
+  viewBox="0 0 20 21"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12.5 18V11.3333C12.5 11.1123 12.4122 10.9004 12.2559 10.7441C12.0996 10.5878 11.8877 10.5 11.6667 10.5H8.33333C8.11232 10.5 7.90036 10.5878 7.74408 10.7441C7.5878 10.9004 7.5 11.1123 7.5 11.3333V18"
+    stroke={color}
+    stroke-width="1.66667"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M2.5 8.8342C2.49994 8.59176 2.55278 8.35222 2.65482 8.1323C2.75687 7.91238 2.90566 7.71737 3.09083 7.56087L8.92417 2.5617C9.22499 2.30746 9.60613 2.16797 10 2.16797C10.3939 2.16797 10.775 2.30746 11.0758 2.5617L16.9092 7.56087C17.0943 7.71737 17.2431 7.91238 17.3452 8.1323C17.4472 8.35222 17.5001 8.59176 17.5 8.8342V16.3342C17.5 16.7762 17.3244 17.2002 17.0118 17.5127C16.6993 17.8253 16.2754 18.0009 15.8333 18.0009H4.16667C3.72464 18.0009 3.30072 17.8253 2.98816 17.5127C2.67559 17.2002 2.5 16.7762 2.5 16.3342V8.8342Z"
+    stroke={color}
+    stroke-width="1.66667"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/Icon.spec.js

@@ -1,175 +1,175 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import Icon from "./Icon.svelte";
-
-describe("Icon Component Tests", () => {
-  test("Renders Home icon", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Shows icon", () => {
-    const { container } = render(Icon, { props: { name: "Shows" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Availability icon", () => {
-    const { container } = render(Icon, { props: { name: "Availability" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Profile icon", () => {
-    const { container } = render(Icon, { props: { name: "Profile" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Payment icon", () => {
-    const { container } = render(Icon, { props: { name: "Payment" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Notification icon", () => {
-    const { container } = render(Icon, { props: { name: "Notification" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Signout icon", () => {
-    const { container } = render(Icon, { props: { name: "Signout" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ChevronLeft icon", () => {
-    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ChevronRight icon", () => {
-    const { container } = render(Icon, { props: { name: "ChevronRight" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders CheckCircle icon", () => {
-    const { container } = render(Icon, { props: { name: "CheckCircle" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ErrorCircle icon", () => {
-    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ArrowLeft icon", () => {
-    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Back icon", () => {
-    const { container } = render(Icon, { props: { name: "Back" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Shows error message for unknown icon", () => {
-    render(Icon, { props: { name: "UnknownIcon" } });
-    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
-  });
-
-  test("Default size is 20", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    // Check width or height attribute
-    expect(svg).toHaveAttribute("width", "20");
-  });
-
-  test("Accepts custom size prop", () => {
-    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("width", "32");
-  });
-
-  test("Default color is currentColor", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    // Color is typically applied to stroke or fill
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Accepts custom color prop", () => {
-    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders More icon", () => {
-    const { container } = render(Icon, { props: { name: "More" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Info icon", () => {
-    const { container } = render(Icon, { props: { name: "Info" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Message icon", () => {
-    const { container } = render(Icon, { props: { name: "Message" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Reload icon", () => {
-    const { container } = render(Icon, { props: { name: "Reload" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Copy icon", () => {
-    const { container } = render(Icon, { props: { name: "Copy" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Cross icon", () => {
-    const { container } = render(Icon, { props: { name: "Cross" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ArrowRight icon", () => {
-    const { container } = render(Icon, { props: { name: "ArrowRight" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders DownArrow icon", () => {
-    const { container } = render(Icon, { props: { name: "DownArrow" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders MoreHori icon", () => {
-    const { container } = render(Icon, { props: { name: "MoreHori" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders CheckCircleOutline icon", () => {
-    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Icon from "./Icon.svelte";
+
+describe("Icon Component Tests", () => {
+  test("Renders Home icon", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Shows icon", () => {
+    const { container } = render(Icon, { props: { name: "Shows" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Availability icon", () => {
+    const { container } = render(Icon, { props: { name: "Availability" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Profile icon", () => {
+    const { container } = render(Icon, { props: { name: "Profile" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Payment icon", () => {
+    const { container } = render(Icon, { props: { name: "Payment" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Notification icon", () => {
+    const { container } = render(Icon, { props: { name: "Notification" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Signout icon", () => {
+    const { container } = render(Icon, { props: { name: "Signout" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ErrorCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Back icon", () => {
+    const { container } = render(Icon, { props: { name: "Back" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Shows error message for unknown icon", () => {
+    render(Icon, { props: { name: "UnknownIcon" } });
+    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
+  });
+
+  test("Default size is 20", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    // Check width or height attribute
+    expect(svg).toHaveAttribute("width", "20");
+  });
+
+  test("Accepts custom size prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("width", "32");
+  });
+
+  test("Default color is currentColor", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    // Color is typically applied to stroke or fill
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Accepts custom color prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders More icon", () => {
+    const { container } = render(Icon, { props: { name: "More" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Info icon", () => {
+    const { container } = render(Icon, { props: { name: "Info" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Message icon", () => {
+    const { container } = render(Icon, { props: { name: "Message" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Reload icon", () => {
+    const { container } = render(Icon, { props: { name: "Reload" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Copy icon", () => {
+    const { container } = render(Icon, { props: { name: "Copy" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Cross icon", () => {
+    const { container } = render(Icon, { props: { name: "Cross" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders DownArrow icon", () => {
+    const { container } = render(Icon, { props: { name: "DownArrow" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders MoreHori icon", () => {
+    const { container } = render(Icon, { props: { name: "MoreHori" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircleOutline icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+});