chromia 0.1.7 → 0.1.9

package/dist/icons/AddImageIcon.svelte

@@ -1,4 +1,4 @@
-<script>export let color = "#000";
+<script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -19,12 +19,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 20 20"
     fill="none"
   >
@@ -69,7 +72,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 20 20"
     fill="none"
   >
@@ -77,7 +81,7 @@ const getGradientDirection = (direction) => {
       <path
         d="M7.08582 6.91424C7.08582 7.74267 6.41424 8.41424 5.58582 8.41424C4.75739 8.41424 4.08582 7.74267 4.08582 6.91424C4.08582 6.08582 4.75739 5.41424 5.58582 5.41424C6.41424 5.41424 7.08582 6.08582 7.08582 6.91424Z"
         id="icon_AddImage"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -85,7 +89,7 @@ const getGradientDirection = (direction) => {
       <path
         d="M4.08582 18.4142L11.1729 11.7441C11.9601 11.0032 13.1935 11.0219 13.9578 11.7862L16.5858 14.4142M4.08582 18.4142H14.0858C15.7427 18.4142 17.0858 17.0711 17.0858 15.4142V10.4142M4.08582 18.4142C2.42896 18.4142 1.08582 17.0711 1.08582 15.4142V5.41424C1.08582 3.75739 2.42896 2.41424 4.08582 2.41424H10.5858M16.0858 7.24267L16.0858 4.41424M16.0858 4.41424L16.0858 1.58582M16.0858 4.41424L13.2574 4.41424M16.0858 4.41424L18.9142 4.41424M7.08582 6.91424C7.08582 7.74267 6.41424 8.41424 5.58582 8.41424C4.75739 8.41424 4.08582 7.74267 4.08582 6.91424C4.08582 6.08582 4.75739 5.41424 5.58582 5.41424C6.41424 5.41424 7.08582 6.08582 7.08582 6.91424Z"
         id="icon_AddImage"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/AddSquareIcon.svelte

@@ -1,5 +1,5 @@
 
-  <script>export let color = "#000";
+  <script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -20,12 +20,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 12 12"
     fill="none"
   >
@@ -62,7 +65,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 12 12"
     fill="none"
   >
@@ -70,7 +74,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_AddSquare"
         d="M5.99995 3.59995L5.99995 5.99995M5.99995 5.99995V8.39995M5.99995 5.99995H8.39995M5.99995 5.99995H3.59995M10.8 2.99995L10.8 9.00001C10.7999 9.99412 9.99406 10.8 8.99995 10.8H2.99995C2.00584 10.8 1.19995 9.99412 1.19995 9.00001V2.99995C1.19995 2.00584 2.00584 1.19995 2.99995 1.19995H8.99995C9.99406 1.19995 10.8 2.00584 10.8 2.99995Z"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/AlertCircleIcon.svelte

@@ -1,5 +1,5 @@
 
-  <script>export let color = "#000";
+  <script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -20,12 +20,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 16"
     fill="none"
   >
@@ -62,7 +65,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 16"
     fill="none"
   >
@@ -70,7 +74,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_AlertCircle"
         d="M8.00001 8V4.8M8.00001 10.3719V10.4M14.4 8C14.4 11.5346 11.5346 14.4 8.00001 14.4C4.46538 14.4 1.60001 11.5346 1.60001 8C1.60001 4.46538 4.46538 1.6 8.00001 1.6C11.5346 1.6 14.4 4.46538 14.4 8Z"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/AnnotationXIcon.svelte

@@ -1,4 +1,4 @@
-<script>export let color = "#000";
+<script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -19,12 +19,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 46 46"
     fill="none"
   >
@@ -61,7 +64,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 46 46"
     fill="none"
   >
@@ -69,7 +73,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_AnnotationX"
         d="M27.6 23L23 18.5M23 18.5L18.4 14M23 18.5L18.4 23M23 18.5L27.6 14M28 31.6087L23 41L18.4 31.6087H9.20001C6.6595 31.6087 4.60001 29.594 4.60001 27.1087V9.5C4.60001 7.01472 6.6595 5 9.20001 5H36.8C39.3405 5 41.4 7.01472 41.4 9.5V27.1087C41.4 29.594 39.3405 31.6087 36.8 31.6087H28Z"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/ArrowCalendarIcon.svelte

@@ -1,5 +1,5 @@
 
-  <script>export let color = "#000";
+  <script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -20,12 +20,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 14"
     fill="none"
   >
@@ -62,7 +65,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 14"
     fill="none"
   >
@@ -70,7 +74,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_ArrowCalendar"
         d="M8.94447 6.2999L10.5 8.0499M10.5 8.0499L8.94447 9.7999M10.5 8.0499H4.20002M4.20002 3.85024H10.0334M12.6 3.4999V10.4999C12.6 11.6597 11.6598 12.5999 10.5 12.5999H3.50002C2.34023 12.5999 1.40002 11.6597 1.40002 10.4999V3.4999C1.40002 2.3401 2.34023 1.3999 3.50002 1.3999H10.5C11.6598 1.3999 12.6 2.3401 12.6 3.4999Z"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/ArrowLeftIcon.svelte

@@ -1,5 +1,5 @@
 
-  <script>export let color = "#000";
+  <script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -20,12 +20,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 18 18"
     fill="none"
   >
@@ -62,7 +65,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 18 18"
     fill="none"
   >
@@ -70,7 +74,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_ArrowLeft"
         d="M8.125 13.5L3.75 9M3.75 9L8.125 4.5M3.75 9H14.25"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/ArrowSwitchIcon.svelte

@@ -1,5 +1,5 @@
 
-  <script>export let color = "#000";
+  <script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -20,12 +20,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 14"
     fill="none"
   >
@@ -62,7 +65,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 14"
     fill="none"
   >
@@ -70,7 +74,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_ArrowSwitch"
         d="M8.40015 3.4999L10.5001 1.3999M10.5001 1.3999L12.6001 3.4999M10.5001 1.3999L10.5001 12.5999M5.60015 10.4999L3.50015 12.5999M3.50015 12.5999L1.40015 10.4999M3.50015 12.5999L3.50015 1.3999"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/ArrowUpIcon.svelte

@@ -1,5 +1,5 @@
 
-  <script>export let color = "#000";
+  <script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -20,12 +20,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 15"
     fill="none"
   >
@@ -62,7 +65,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 15"
     fill="none"
   >
@@ -70,7 +74,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_ArrowUp"
         d="M4.93383 4.63038L9.905 4.63031M9.905 4.63031L9.905 9.53077M9.905 4.63031L4.13029 10.405"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/BackArrowIcon.svelte

@@ -1,4 +1,4 @@
-<script>export let color = "#000";
+<script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -19,6 +19,8 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
@@ -28,7 +30,7 @@ const getGradientDirection = (direction) => {
     viewBox="0 0 14 12"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
   >
     <path
       d="M3.63552 1.39719L0.59961 4.47419M0.59961 4.47419L3.63552 7.55118M0.59961 4.47419L10.1381 4.47419C11.9394 4.47419 13.3996 5.93441 13.3996 7.73569V7.73569C13.3996 9.53697 11.9394 10.9972 10.1381 10.9972L6.99961 10.9972"
@@ -64,11 +66,11 @@ const getGradientDirection = (direction) => {
     viewBox="0 0 14 12"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
   >
     <path
       d="M3.63552 1.39719L0.59961 4.47419M0.59961 4.47419L3.63552 7.55118M0.59961 4.47419L10.1381 4.47419C11.9394 4.47419 13.3996 5.93441 13.3996 7.73569V7.73569C13.3996 9.53697 11.9394 10.9972 10.1381 10.9972L6.99961 10.9972"
-      stroke={color}
+      stroke="currentColor"
       stroke-width={weight}
       stroke-linecap="round"
       stroke-linejoin="round"

package/dist/icons/BellIcon.svelte

@@ -1,4 +1,4 @@
-<script>export let color = "#000";
+<script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -19,12 +19,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 14"
     fill="none"
   >
@@ -61,7 +64,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 14"
     fill="none"
   >
@@ -72,7 +76,7 @@ const getGradientDirection = (direction) => {
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"
-        fill={color}
+        fill="currentColor"
       />
     </g>
   </svg>

package/dist/icons/BezierIcon.svelte

@@ -1,5 +1,5 @@
 
-  <script>export let color = "#000";
+  <script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -20,12 +20,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 14"
     fill="none"
   >
@@ -62,7 +65,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 14"
     fill="none"
   >
@@ -70,7 +74,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_Bezier"
         d="M5.32361 4.37015C5.59976 4.37015 5.82361 4.14629 5.82361 3.87015C5.82361 3.59401 5.59976 3.37015 5.32361 3.37015V4.37015ZM2.1133 3.37015C1.83716 3.37015 1.6133 3.59401 1.6133 3.87015C1.6133 4.14629 1.83716 4.37015 2.1133 4.37015V3.37015ZM11.8999 4.37015C12.176 4.37015 12.3999 4.14629 12.3999 3.87015C12.3999 3.59401 12.176 3.37015 11.8999 3.37015V4.37015ZM8.53392 3.37015C8.25778 3.37015 8.03392 3.59401 8.03392 3.87015C8.03392 4.14629 8.25778 4.37015 8.53392 4.37015V3.37015ZM6.1343 3.30005H7.71781V2.30005H6.1343V3.30005ZM7.74564 3.32788V4.91139H8.74564V3.32788H7.74564ZM7.71781 4.93922H6.1343V5.93922H7.71781V4.93922ZM6.10647 4.91139V3.32788H5.10647V4.91139H6.10647ZM6.1343 4.93922C6.11893 4.93922 6.10647 4.92676 6.10647 4.91139H5.10647C5.10647 5.47905 5.56665 5.93922 6.1343 5.93922V4.93922ZM7.74564 4.91139C7.74564 4.92676 7.73318 4.93922 7.71781 4.93922V5.93922C8.28547 5.93922 8.74564 5.47905 8.74564 4.91139H7.74564ZM7.71781 3.30005C7.73318 3.30005 7.74564 3.31251 7.74564 3.32788H8.74564C8.74564 2.76023 8.28547 2.30005 7.71781 2.30005V3.30005ZM6.1343 2.30005C5.56665 2.30005 5.10647 2.76023 5.10647 3.32788H6.10647C6.10647 3.31251 6.11893 3.30005 6.1343 3.30005V2.30005ZM1.92774 9.00727H3.51124V8.00727H1.92774V9.00727ZM3.53908 9.0351V10.6186H4.53908V9.0351H3.53908ZM3.51124 10.6464H1.92774V11.6464H3.51124V10.6464ZM1.8999 10.6186V9.0351H0.899902V10.6186H1.8999ZM1.92774 10.6464C1.91237 10.6464 1.8999 10.634 1.8999 10.6186H0.899902C0.899902 11.1863 1.36008 11.6464 1.92774 11.6464V10.6464ZM3.53908 10.6186C3.53908 10.634 3.52661 10.6464 3.51124 10.6464V11.6464C4.0789 11.6464 4.53908 11.1863 4.53908 10.6186H3.53908ZM3.51124 9.00727C3.52661 9.00727 3.53908 9.01973 3.53908 9.0351H4.53908C4.53908 8.46745 4.0789 8.00727 3.51124 8.00727V9.00727ZM1.92774 8.00727C1.36008 8.00727 0.899902 8.46744 0.899902 9.0351H1.8999C1.8999 9.01973 1.91236 9.00727 1.92774 9.00727V8.00727ZM10.4886 9.00727H12.0721V8.00727H10.4886V9.00727ZM12.0999 9.0351V10.6186H13.0999V9.0351H12.0999ZM12.0721 10.6464H10.4886V11.6464H12.0721V10.6464ZM10.4607 10.6186V9.0351H9.46073V10.6186H10.4607ZM10.4886 10.6464C10.4732 10.6464 10.4607 10.634 10.4607 10.6186H9.46073C9.46073 11.1863 9.9209 11.6464 10.4886 11.6464V10.6464ZM12.0999 10.6186C12.0999 10.634 12.0874 10.6464 12.0721 10.6464V11.6464C12.6397 11.6464 13.0999 11.1863 13.0999 10.6186H12.0999ZM12.0721 9.00727C12.0874 9.00727 12.0999 9.01973 12.0999 9.0351H13.0999C13.0999 8.46745 12.6397 8.00727 12.0721 8.00727V9.00727ZM10.4886 8.00727C9.9209 8.00727 9.46073 8.46744 9.46073 9.0351H10.4607C10.4607 9.01973 10.4732 9.00727 10.4886 9.00727V8.00727ZM5.32361 3.37015H2.1133V4.37015H5.32361V3.37015ZM11.8999 3.37015H8.53392V4.37015H11.8999V3.37015ZM2.32671 7.79386V8.50727H3.32671V7.79386H2.32671ZM10.8875 7.79386V8.50727H11.8875V7.79386H10.8875ZM3.32671 7.79386C3.32671 6.39521 4.086 5.1733 5.21728 4.5189L4.71655 3.65329C3.28899 4.47909 2.32671 6.02381 2.32671 7.79386H3.32671ZM8.99696 4.5189C10.1282 5.1733 10.8875 6.39521 10.8875 7.79386H11.8875C11.8875 6.02381 10.9253 4.47909 9.49769 3.65329L8.99696 4.5189Z"
-        fill={color}
+        fill="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/BoxIcon.svelte

@@ -19,12 +19,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 17"
     fill="none"
   >
@@ -57,13 +60,14 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 17"
     fill="none"
   >
     <path
       d="M14.3548 5.01818H1.64523M9.99975 7.21816C8.43765 7.21816 5.99975 7.21816 5.99975 7.21816M14.4 5.39588V13.0182C14.4 13.9018 13.6837 14.6182 12.8 14.6182H3.20001C2.31635 14.6182 1.60001 13.9018 1.60001 13.0182V5.39588C1.60001 5.14749 1.65784 4.90251 1.76892 4.68034L2.86833 2.48152C3.0716 2.07498 3.48712 1.81818 3.94165 1.81818H12.0584C12.5129 1.81818 12.9284 2.07498 13.1317 2.48152L14.2311 4.68034C14.3422 4.90251 14.4 5.14749 14.4 5.39588Z"
-      stroke={color}
+      stroke="currentColor"
       stroke-width={weight}
       stroke-linecap="round"
       stroke-linejoin="round"

package/dist/icons/BrandIcon.svelte

@@ -1,4 +1,4 @@
-<script>export let color = "#000";
+<script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -19,12 +19,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 16"
     fill="none"
   >
@@ -61,7 +64,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 16"
     fill="none"
   >
@@ -69,7 +73,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_Brand"
         d="M4.44728 15.5H15.5L15.4124 8.04187L10.1491 10.9748V8.04187L4.44737 10.9748L4.44728 15.5ZM4.44728 15.5H0.5L1.37719 6.36587H4.44728V10.9329V15.5ZM1.81579 3.85194C1.81579 2.59496 3.13158 1.33799 4.44737 1.33799C6.20175 1.33799 7.07895 2.17587 7.51754 3.01396C7.95614 1.75688 8.79859 0.5 10.5877 0.5C12.7807 0.5 13.6579 2.17597 13.6579 3.01396M4.00877 4.27094C5.32456 3.85194 5.98414 5.24966 7.07895 5.94691C8.39474 6.78489 9.46441 6.18203 9.71053 5.94691C11.9035 3.85194 12.7807 6.78489 14.0965 5.94691M7.95614 12.2318V13.0698M12.7807 12.2318V13.0698"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/BrandIcon.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         } | undefined;
         size?: string | undefined;
         weight?: number | undefined;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/icons/CalendarIcon.svelte

@@ -1,5 +1,5 @@
 
-  <script>export let color = "#000";
+  <script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -20,12 +20,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 16"
     fill="none"
   >
@@ -62,7 +65,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 16"
     fill="none"
   >
@@ -70,7 +74,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_Calendar"
         d="M4.83331 11.7023V11.6459M8.20831 11.7023V11.6459M8.20831 8.64587V8.58947M11.2083 8.64587V8.58947M2.58331 5.64584H13.0833M3.94046 1.33334V2.45847M11.5833 1.33334V2.45834M11.5833 2.45834H4.08331C2.84067 2.45834 1.83331 3.4657 1.83331 4.70834V12.2084C1.83331 13.451 2.84067 14.4584 4.08331 14.4584H11.5833C12.826 14.4584 13.8333 13.451 13.8333 12.2084L13.8333 4.70834C13.8333 3.4657 12.826 2.45834 11.5833 2.45834Z"
-        stroke={color}
+        stroke="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/CameraIcon.svelte

@@ -1,5 +1,5 @@
 
-  <script>export let color = "#000";
+  <script>export let color = "#202020";
 export let gradient = {
   colors: ["", ""],
   direction: "bottom"
@@ -20,12 +20,15 @@ const getGradientDirection = (direction) => {
       return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
   }
 };
+let className = "";
+export { className as class };
 </script>
 
 {#if gradient.colors[1] !== ""}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
     fill="none"
   >
@@ -62,7 +65,8 @@ const getGradientDirection = (direction) => {
 {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    style="width: {size}; height: {size};"
+    class={className}
+    style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
     fill="none"
   >
@@ -70,7 +74,7 @@ const getGradientDirection = (direction) => {
       <path
         id="icon_Camera"
         d="M7.20002 6.11999V7.11999C7.55569 7.11999 7.88459 6.93108 8.0638 6.62386L7.20002 6.11999ZM8.88002 3.23999V2.23999C8.52436 2.23999 8.19546 2.4289 8.01624 2.73612L8.88002 3.23999ZM15.12 3.23999L15.9838 2.73612C15.8046 2.4289 15.4757 2.23999 15.12 2.23999V3.23999ZM16.8 6.11999L15.9362 6.62386C16.1155 6.93108 16.4444 7.11999 16.8 7.11999V6.11999ZM3.40002 18.36V8.51999H1.40002V18.36H3.40002ZM4.80002 7.11999H7.20002V5.11999H4.80002V7.11999ZM8.0638 6.62386L9.7438 3.74386L8.01624 2.73612L6.33624 5.61612L8.0638 6.62386ZM8.88002 4.23999H15.12V2.23999H8.88002V4.23999ZM14.2562 3.74386L15.9362 6.62386L17.6638 5.61612L15.9838 2.73612L14.2562 3.74386ZM16.8 7.11999H19.2V5.11999H16.8V7.11999ZM20.6 8.51999V18.36H22.6V8.51999H20.6ZM20.6 18.36C20.6 19.1332 19.9732 19.76 19.2 19.76V21.76C21.0778 21.76 22.6 20.2378 22.6 18.36H20.6ZM19.2 7.11999C19.9732 7.11999 20.6 7.74679 20.6 8.51999H22.6C22.6 6.64222 21.0778 5.11999 19.2 5.11999V7.11999ZM3.40002 8.51999C3.40002 7.74679 4.02682 7.11999 4.80002 7.11999V5.11999C2.92226 5.11999 1.40002 6.64222 1.40002 8.51999H3.40002ZM4.80002 19.76C4.02683 19.76 3.40002 19.1332 3.40002 18.36H1.40002C1.40002 20.2378 2.92226 21.76 4.80002 21.76V19.76ZM14.6 12.84C14.6 14.2759 13.436 15.44 12 15.44V17.44C14.5405 17.44 16.6 15.3805 16.6 12.84H14.6ZM12 15.44C10.5641 15.44 9.40002 14.2759 9.40002 12.84H7.40002C7.40002 15.3805 9.45951 17.44 12 17.44V15.44ZM9.40002 12.84C9.40002 11.404 10.5641 10.24 12 10.24V8.23999C9.45951 8.23999 7.40002 10.2995 7.40002 12.84H9.40002ZM12 10.24C13.436 10.24 14.6 11.404 14.6 12.84H16.6C16.6 10.2995 14.5405 8.23999 12 8.23999V10.24ZM19.2 19.76H4.80002V21.76H19.2V19.76Z"
-        fill={color}
+        fill="currentColor"
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"