chromia 0.1.8 → 0.1.10

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/AddImageIcon.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/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/AddSquareIcon.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/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/AlertCircleIcon.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/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/AnnotationXIcon.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/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/ArrowCalendarIcon.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/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/ArrowLeftIcon.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/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/ArrowSwitchIcon.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/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/ArrowUpIcon.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/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/BackArrowIcon.svelte.d.ts

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

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/BellIcon.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/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/BezierIcon.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/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/BoxIcon.svelte.d.ts

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

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"