@getmicdrop/svelte-components 5.21.0 → 5.21.2

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

@@ -199,18 +199,18 @@ function testIcon(name, config) {
         });
         it('accepts custom color prop', () => {
             const { container } = render(IconComponent, {
-                props: { color: '#ff0000' },
+                props: { color: 'hsl(var(--accent-danger))' },
             });
             if (colorAttribute === 'stroke' || colorAttribute === 'both') {
                 const strokeElements = container.querySelectorAll('[stroke]');
-                const hasCustomStroke = Array.from(strokeElements).some((el) => el.getAttribute('stroke') === '#ff0000');
+                const hasCustomStroke = Array.from(strokeElements).some((el) => el.getAttribute('stroke') === 'hsl(var(--accent-danger))');
                 if (strokeElements.length > 0) {
                     expect(hasCustomStroke).toBe(true);
                 }
             }
             if (colorAttribute === 'fill' || colorAttribute === 'both') {
                 const fillElements = container.querySelectorAll('[fill]:not([fill="none"])');
-                const hasCustomFill = Array.from(fillElements).some((el) => el.getAttribute('fill') === '#ff0000');
+                const hasCustomFill = Array.from(fillElements).some((el) => el.getAttribute('fill') === 'hsl(var(--accent-danger))');
                 if (fillElements.length > 0) {
                     expect(hasCustomFill).toBe(true);
                 }

package/dist/primitives/Icons/ImageOutline.svelte

@@ -1,21 +1,21 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  fill="none"
-  stroke={color}
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-  />
-</svg>
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  fill="none"
+  stroke={color}
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+  />
+</svg>

package/dist/primitives/Icons/Info.svelte

@@ -1,20 +1,20 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  viewBox="0 0 18 18"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M8.99935 2.33341C5.31745 2.33341 2.33268 5.31818 2.33268 9.00008C2.33268 12.682 5.31745 15.6667 8.99935 15.6667C12.6812 15.6667 15.666 12.682 15.666 9.00008C15.666 5.31818 12.6812 2.33341 8.99935 2.33341ZM0.666016 9.00008C0.666016 4.39771 4.39698 0.666748 8.99935 0.666748C13.6017 0.666748 17.3327 4.39771 17.3327 9.00008C17.3327 13.6025 13.6017 17.3334 8.99935 17.3334C4.39698 17.3334 0.666016 13.6025 0.666016 9.00008ZM7.6726 5.25008C7.6726 4.78984 8.04569 4.41675 8.50593 4.41675H8.51426C8.9745 4.41675 9.3476 4.78984 9.3476 5.25008C9.3476 5.71032 8.9745 6.08342 8.51426 6.08342H8.50593C8.04569 6.08342 7.6726 5.71032 7.6726 5.25008ZM6.49935 8.16675C6.49935 7.70651 6.87245 7.33342 7.33268 7.33342H8.99935C9.45959 7.33342 9.83268 7.70651 9.83268 8.16675V11.5001H10.666C11.1263 11.5001 11.4993 11.8732 11.4993 12.3334C11.4993 12.7937 11.1263 13.1667 10.666 13.1667H7.33268C6.87245 13.1667 6.49935 12.7937 6.49935 12.3334C6.49935 11.8732 6.87245 11.5001 7.33268 11.5001H8.16602V9.00008H7.33268C6.87245 9.00008 6.49935 8.62699 6.49935 8.16675Z"
-    fill={color}
-  />
-</svg>
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  viewBox="0 0 18 18"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.99935 2.33341C5.31745 2.33341 2.33268 5.31818 2.33268 9.00008C2.33268 12.682 5.31745 15.6667 8.99935 15.6667C12.6812 15.6667 15.666 12.682 15.666 9.00008C15.666 5.31818 12.6812 2.33341 8.99935 2.33341ZM0.666016 9.00008C0.666016 4.39771 4.39698 0.666748 8.99935 0.666748C13.6017 0.666748 17.3327 4.39771 17.3327 9.00008C17.3327 13.6025 13.6017 17.3334 8.99935 17.3334C4.39698 17.3334 0.666016 13.6025 0.666016 9.00008ZM7.6726 5.25008C7.6726 4.78984 8.04569 4.41675 8.50593 4.41675H8.51426C8.9745 4.41675 9.3476 4.78984 9.3476 5.25008C9.3476 5.71032 8.9745 6.08342 8.51426 6.08342H8.50593C8.04569 6.08342 7.6726 5.71032 7.6726 5.25008ZM6.49935 8.16675C6.49935 7.70651 6.87245 7.33342 7.33268 7.33342H8.99935C9.45959 7.33342 9.83268 7.70651 9.83268 8.16675V11.5001H10.666C11.1263 11.5001 11.4993 11.8732 11.4993 12.3334C11.4993 12.7937 11.1263 13.1667 10.666 13.1667H7.33268C6.87245 13.1667 6.49935 12.7937 6.49935 12.3334C6.49935 11.8732 6.87245 11.5001 7.33268 11.5001H8.16602V9.00008H7.33268C6.87245 9.00008 6.49935 8.62699 6.49935 8.16675Z"
+    fill={color}
+  />
+</svg>

package/dist/primitives/Icons/InstagramIcon.svelte

@@ -1,21 +1,21 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke={color}
-  stroke-width="1.5"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
-  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
-  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
-</svg>
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke={color}
+  stroke-width="1.5"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
+  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
+  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
+</svg>

package/dist/primitives/Icons/LogoInstagram.svelte

@@ -1,15 +1,15 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  fill={color}
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
-</svg>
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  fill={color}
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
+</svg>

package/dist/primitives/Icons/Message.svelte

@@ -1,28 +1,28 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  viewBox="0 0 17 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M10.1902 14.4577C10.2155 14.5208 10.2596 14.5747 10.3164 14.6121C10.3732 14.6494 10.4401 14.6685 10.5081 14.6668C10.5761 14.665 10.6419 14.6426 10.6968 14.6023C10.7516 14.5621 10.7928 14.506 10.8149 14.4417L15.1482 1.77503C15.1695 1.71596 15.1736 1.65203 15.16 1.59073C15.1463 1.52943 15.1154 1.47329 15.071 1.42888C15.0266 1.38447 14.9705 1.35363 14.9092 1.33996C14.8479 1.32629 14.7839 1.33036 14.7249 1.3517L2.05821 5.68503C1.99388 5.70709 1.93783 5.74831 1.89759 5.80314C1.85736 5.85798 1.83486 5.92381 1.83312 5.9918C1.83138 6.05979 1.85047 6.12669 1.88785 6.18351C1.92523 6.24034 1.97909 6.28437 2.04221 6.3097L7.32888 8.4297C7.496 8.49661 7.64785 8.59667 7.77526 8.72385C7.90266 8.85103 8.003 9.00269 8.07021 9.1697L10.1902 14.4577Z"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M15.0697 1.43164L7.77637 8.72431"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  viewBox="0 0 17 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M10.1902 14.4577C10.2155 14.5208 10.2596 14.5747 10.3164 14.6121C10.3732 14.6494 10.4401 14.6685 10.5081 14.6668C10.5761 14.665 10.6419 14.6426 10.6968 14.6023C10.7516 14.5621 10.7928 14.506 10.8149 14.4417L15.1482 1.77503C15.1695 1.71596 15.1736 1.65203 15.16 1.59073C15.1463 1.52943 15.1154 1.47329 15.071 1.42888C15.0266 1.38447 14.9705 1.35363 14.9092 1.33996C14.8479 1.32629 14.7839 1.33036 14.7249 1.3517L2.05821 5.68503C1.99388 5.70709 1.93783 5.74831 1.89759 5.80314C1.85736 5.85798 1.83486 5.92381 1.83312 5.9918C1.83138 6.05979 1.85047 6.12669 1.88785 6.18351C1.92523 6.24034 1.97909 6.28437 2.04221 6.3097L7.32888 8.4297C7.496 8.49661 7.64785 8.59667 7.77526 8.72385C7.90266 8.85103 8.003 9.00269 8.07021 9.1697L10.1902 14.4577Z"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M15.0697 1.43164L7.77637 8.72431"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/MoonIcon.svelte

@@ -1,18 +1,18 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M21.0009 12.79C20.8436 14.4922 20.2047 16.1144 19.1591 17.4668C18.1135 18.8192 16.7044 19.8458 15.0966 20.4265C13.4888 21.0073 11.748 21.1181 10.0795 20.7461C8.41104 20.3741 6.88302 19.5345 5.67426 18.3258C4.46551 17.117 3.62596 15.589 3.25393 13.9205C2.8819 12.252 2.99274 10.5112 3.57348 8.9034C4.15423 7.29557 5.18085 5.88651 6.53324 4.84088C7.88562 3.79525 9.50782 3.15731 11.2101 3C10.2147 4.34827 9.73521 6.00945 9.85856 7.68141C9.98191 9.35338 10.7002 10.9251 11.8788 12.1037C13.0574 13.2823 14.6291 14.0006 16.3011 14.1239C17.973 14.2473 19.6342 13.7678 20.9825 12.7724L21.0009 12.79Z"
-    fill={color}
-  />
-</svg>
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M21.0009 12.79C20.8436 14.4922 20.2047 16.1144 19.1591 17.4668C18.1135 18.8192 16.7044 19.8458 15.0966 20.4265C13.4888 21.0073 11.748 21.1181 10.0795 20.7461C8.41104 20.3741 6.88302 19.5345 5.67426 18.3258C4.46551 17.117 3.62596 15.589 3.25393 13.9205C2.8819 12.252 2.99274 10.5112 3.57348 8.9034C4.15423 7.29557 5.18085 5.88651 6.53324 4.84088C7.88562 3.79525 9.50782 3.15731 11.2101 3C10.2147 4.34827 9.73521 6.00945 9.85856 7.68141C9.98191 9.35338 10.7002 10.9251 11.8788 12.1037C13.0574 13.2823 14.6291 14.0006 16.3011 14.1239C17.973 14.2473 19.6342 13.7678 20.9825 12.7724L21.0009 12.79Z"
+    fill={color}
+  />
+</svg>

package/dist/primitives/Icons/More.svelte

@@ -1,35 +1,35 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  viewBox="0 0 20 20"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-    <path
-        d="M9.99935 10.8333C10.4596 10.8333 10.8327 10.4602 10.8327 9.99996C10.8327 9.53972 10.4596 9.16663 9.99935 9.16663C9.53911 9.16663 9.16602 9.53972 9.16602 9.99996C9.16602 10.4602 9.53911 10.8333 9.99935 10.8333Z"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
-    <path
-        d="M9.99935 5.00004C10.4596 5.00004 10.8327 4.62694 10.8327 4.16671C10.8327 3.70647 10.4596 3.33337 9.99935 3.33337C9.53911 3.33337 9.16602 3.70647 9.16602 4.16671C9.16602 4.62694 9.53911 5.00004 9.99935 5.00004Z"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
-    <path
-        d="M9.99935 16.6667C10.4596 16.6667 10.8327 16.2936 10.8327 15.8333C10.8327 15.3731 10.4596 15 9.99935 15C9.53911 15 9.16602 15.3731 9.16602 15.8333C9.16602 16.2936 9.53911 16.6667 9.99935 16.6667Z"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        d="M9.99935 10.8333C10.4596 10.8333 10.8327 10.4602 10.8327 9.99996C10.8327 9.53972 10.4596 9.16663 9.99935 9.16663C9.53911 9.16663 9.16602 9.53972 9.16602 9.99996C9.16602 10.4602 9.53911 10.8333 9.99935 10.8333Z"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M9.99935 5.00004C10.4596 5.00004 10.8327 4.62694 10.8327 4.16671C10.8327 3.70647 10.4596 3.33337 9.99935 3.33337C9.53911 3.33337 9.16602 3.70647 9.16602 4.16671C9.16602 4.62694 9.53911 5.00004 9.99935 5.00004Z"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M9.99935 16.6667C10.4596 16.6667 10.8327 16.2936 10.8327 15.8333C10.8327 15.3731 10.4596 15 9.99935 15C9.53911 15 9.16602 15.3731 9.16602 15.8333C9.16602 16.2936 9.53911 16.6667 9.99935 16.6667Z"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
 </svg>    

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

@@ -1,67 +1,67 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/svelte';
-import MoreHori from './MoreHori.svelte';
-
-describe('MoreHori Icon', () => {
-  it('renders an svg element', () => {
-    const { container } = render(MoreHori);
-    const svg = container.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('uses default size of 24', () => {
-    const { container } = render(MoreHori);
-    const svg = container.querySelector('svg');
-    expect(svg.getAttribute('width')).toBe('24');
-    expect(svg.getAttribute('height')).toBe('24');
-  });
-
-  it('accepts custom size', () => {
-    const { container } = render(MoreHori, { props: { size: '32' } });
-    const svg = container.querySelector('svg');
-    expect(svg.getAttribute('width')).toBe('32');
-    expect(svg.getAttribute('height')).toBe('32');
-  });
-
-  it('uses default color of currentColor', () => {
-    const { container } = render(MoreHori);
-    const path = container.querySelector('path');
-    expect(path.getAttribute('stroke')).toBe('currentColor');
-  });
-
-  it('accepts custom color', () => {
-    const { container } = render(MoreHori, { props: { color: 'red' } });
-    const path = container.querySelector('path');
-    expect(path.getAttribute('stroke')).toBe('red');
-  });
-
-  it('renders three horizontal dots (three paths)', () => {
-    const { container } = render(MoreHori);
-    const paths = container.querySelectorAll('path');
-    expect(paths.length).toBe(3);
-  });
-
-  it('has correct viewBox', () => {
-    const { container } = render(MoreHori);
-    const svg = container.querySelector('svg');
-    expect(svg.getAttribute('viewBox')).toBe('0 0 16 16');
-  });
-
-  it('has stroke-linecap="round" on paths', () => {
-    const { container } = render(MoreHori);
-    const path = container.querySelector('path');
-    expect(path.getAttribute('stroke-linecap')).toBe('round');
-  });
-
-  it('has stroke-linejoin="round" on paths', () => {
-    const { container } = render(MoreHori);
-    const path = container.querySelector('path');
-    expect(path.getAttribute('stroke-linejoin')).toBe('round');
-  });
-
-  it('has fill="none" on svg', () => {
-    const { container } = render(MoreHori);
-    const svg = container.querySelector('svg');
-    expect(svg.getAttribute('fill')).toBe('none');
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import MoreHori from './MoreHori.svelte';
+
+describe('MoreHori Icon', () => {
+  it('renders an svg element', () => {
+    const { container } = render(MoreHori);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('uses default size of 24', () => {
+    const { container } = render(MoreHori);
+    const svg = container.querySelector('svg');
+    expect(svg.getAttribute('width')).toBe('24');
+    expect(svg.getAttribute('height')).toBe('24');
+  });
+
+  it('accepts custom size', () => {
+    const { container } = render(MoreHori, { props: { size: '32' } });
+    const svg = container.querySelector('svg');
+    expect(svg.getAttribute('width')).toBe('32');
+    expect(svg.getAttribute('height')).toBe('32');
+  });
+
+  it('uses default color of currentColor', () => {
+    const { container } = render(MoreHori);
+    const path = container.querySelector('path');
+    expect(path.getAttribute('stroke')).toBe('currentColor');
+  });
+
+  it('accepts custom color', () => {
+    const { container } = render(MoreHori, { props: { color: 'red' } });
+    const path = container.querySelector('path');
+    expect(path.getAttribute('stroke')).toBe('red');
+  });
+
+  it('renders three horizontal dots (three paths)', () => {
+    const { container } = render(MoreHori);
+    const paths = container.querySelectorAll('path');
+    expect(paths.length).toBe(3);
+  });
+
+  it('has correct viewBox', () => {
+    const { container } = render(MoreHori);
+    const svg = container.querySelector('svg');
+    expect(svg.getAttribute('viewBox')).toBe('0 0 16 16');
+  });
+
+  it('has stroke-linecap="round" on paths', () => {
+    const { container } = render(MoreHori);
+    const path = container.querySelector('path');
+    expect(path.getAttribute('stroke-linecap')).toBe('round');
+  });
+
+  it('has stroke-linejoin="round" on paths', () => {
+    const { container } = render(MoreHori);
+    const path = container.querySelector('path');
+    expect(path.getAttribute('stroke-linejoin')).toBe('round');
+  });
+
+  it('has fill="none" on svg', () => {
+    const { container } = render(MoreHori);
+    const svg = container.querySelector('svg');
+    expect(svg.getAttribute('fill')).toBe('none');
+  });
+});

package/dist/primitives/Icons/MoreHori.svelte

@@ -1,35 +1,35 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  viewBox="0 0 16 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M7.99967 8.66683C8.36786 8.66683 8.66634 8.36835 8.66634 8.00016C8.66634 7.63197 8.36786 7.3335 7.99967 7.3335C7.63148 7.3335 7.33301 7.63197 7.33301 8.00016C7.33301 8.36835 7.63148 8.66683 7.99967 8.66683Z"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M12.6667 8.66683C13.0349 8.66683 13.3333 8.36835 13.3333 8.00016C13.3333 7.63197 13.0349 7.3335 12.6667 7.3335C12.2985 7.3335 12 7.63197 12 8.00016C12 8.36835 12.2985 8.66683 12.6667 8.66683Z"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M3.33366 8.66683C3.70185 8.66683 4.00033 8.36835 4.00033 8.00016C4.00033 7.63197 3.70185 7.3335 3.33366 7.3335C2.96547 7.3335 2.66699 7.63197 2.66699 8.00016C2.66699 8.36835 2.96547 8.66683 3.33366 8.66683Z"
-    stroke={color}
-    stroke-width="1.33333"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7.99967 8.66683C8.36786 8.66683 8.66634 8.36835 8.66634 8.00016C8.66634 7.63197 8.36786 7.3335 7.99967 7.3335C7.63148 7.3335 7.33301 7.63197 7.33301 8.00016C7.33301 8.36835 7.63148 8.66683 7.99967 8.66683Z"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M12.6667 8.66683C13.0349 8.66683 13.3333 8.36835 13.3333 8.00016C13.3333 7.63197 13.0349 7.3335 12.6667 7.3335C12.2985 7.3335 12 7.63197 12 8.00016C12 8.36835 12.2985 8.66683 12.6667 8.66683Z"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M3.33366 8.66683C3.70185 8.66683 4.00033 8.36835 4.00033 8.00016C4.00033 7.63197 3.70185 7.3335 3.33366 7.3335C2.96547 7.3335 2.66699 7.63197 2.66699 8.00016C2.66699 8.36835 2.96547 8.66683 3.33366 8.66683Z"
+    stroke={color}
+    stroke-width="1.33333"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/primitives/Icons/Notification.svelte

@@ -1,28 +1,28 @@
-<script>
-  let { size = "24", color = "currentColor", class: className = "" } = $props();
-</script>
-
-<svg
-  class={className}
-  aria-hidden="true"
-  width={size}
-  height={size}
-  viewBox="0 0 20 21"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-    <path
-        d="M5 7.16602C5 5.83993 5.52678 4.56816 6.46447 3.63048C7.40215 2.6928 8.67392 2.16602 10 2.16602C11.3261 2.16602 12.5979 2.6928 13.5355 3.63048C14.4732 4.56816 15 5.83993 15 7.16602C15 12.9993 17.5 14.666 17.5 14.666H2.5C2.5 14.666 5 12.9993 5 7.16602Z"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
-    <path
-        d="M8.58301 18C8.72249 18.2537 8.92755 18.4653 9.17675 18.6127C9.42595 18.76 9.71016 18.8378 9.99967 18.8378C10.2892 18.8378 10.5734 18.76 10.8226 18.6127C11.0718 18.4653 11.2769 18.2537 11.4163 18"
-        stroke={color}
-        stroke-width="1.66667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-    />
+<script>
+  let { size = "24", color = "currentColor", class: className = "" } = $props();
+</script>
+
+<svg
+  class={className}
+  aria-hidden="true"
+  width={size}
+  height={size}
+  viewBox="0 0 20 21"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        d="M5 7.16602C5 5.83993 5.52678 4.56816 6.46447 3.63048C7.40215 2.6928 8.67392 2.16602 10 2.16602C11.3261 2.16602 12.5979 2.6928 13.5355 3.63048C14.4732 4.56816 15 5.83993 15 7.16602C15 12.9993 17.5 14.666 17.5 14.666H2.5C2.5 14.666 5 12.9993 5 7.16602Z"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M8.58301 18C8.72249 18.2537 8.92755 18.4653 9.17675 18.6127C9.42595 18.76 9.71016 18.8378 9.99967 18.8378C10.2892 18.8378 10.5734 18.76 10.8226 18.6127C11.0718 18.4653 11.2769 18.2537 11.4163 18"
+        stroke={color}
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
 </svg>