@xaypay/tui 0.0.80 → 0.0.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/assets/attach.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#EEEEEE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7396 7C17.6559 7 16.6157 7.42413 15.8479 8.18065L8.65581 15.2671L8.64978 15.2733C7.58341 16.3517 6.99017 17.8017 7.00012 19.3095C7.01008 20.8173 7.62243 22.2595 8.70291 23.3241C9.78322 24.3886 11.2446 24.9901 12.7702 24.9999C14.2959 25.0097 15.765 24.427 16.8593 23.3765L24 16.3405L23.0614 15.4157L15.9372 22.4355C15.0929 23.2445 13.9585 23.6946 12.7788 23.687C11.5976 23.6795 10.468 23.2137 9.63429 22.3922C8.80072 21.5709 8.32998 20.4602 8.32233 19.3009C8.31468 18.1429 8.76963 17.0276 9.5904 16.196L16.7793 9.11256C17.2983 8.60109 18.0034 8.31288 18.7396 8.31288C19.4758 8.31288 20.1809 8.60109 20.7 9.11256C21.2189 9.62386 21.5094 10.3162 21.5094 11.0371C21.5094 11.7579 21.2189 12.4503 20.7 12.9616L13.7154 19.8437C13.518 20.0382 13.2493 20.1483 12.968 20.1483C12.6868 20.1483 12.4181 20.0382 12.2207 19.8437C12.0235 19.6494 11.9137 19.387 11.9137 19.1145C11.9137 18.8419 12.0235 18.5795 12.2207 18.3852L19.1479 11.5596L18.2093 10.6348L11.2893 17.4533C10.8431 17.893 10.5915 18.4904 10.5915 19.1145C10.5915 19.7385 10.8431 20.336 11.2893 20.7757C11.7354 21.2152 12.3393 21.4612 12.968 21.4612C13.5968 21.4612 14.2007 21.2152 14.6468 20.7757L21.6313 13.8935C22.3993 13.1368 22.8317 12.1094 22.8317 11.0371C22.8317 9.96471 22.3993 8.93733 21.6313 8.18065C20.8636 7.42413 19.8233 7 18.7396 7Z" fill="#0DA574"/>
+</svg>

package/src/assets/delete.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#EEEEEE"/>
+<path d="M14.1818 10.8333H17.8182C17.8182 10.3637 17.6266 9.91326 17.2856 9.58117C16.9447 9.24907 16.4822 9.0625 16 9.0625C15.5178 9.0625 15.0553 9.24907 14.7144 9.58117C14.3734 9.91326 14.1818 10.3637 14.1818 10.8333ZM13.0909 10.8333C13.0909 10.0819 13.3974 9.36122 13.943 8.82986C14.4885 8.29851 15.2285 8 16 8C16.7715 8 17.5115 8.29851 18.057 8.82986C18.6026 9.36122 18.9091 10.0819 18.9091 10.8333H23.4545C23.5992 10.8333 23.7379 10.8893 23.8402 10.9889C23.9425 11.0886 24 11.2237 24 11.3646C24 11.5055 23.9425 11.6406 23.8402 11.7402C23.7379 11.8399 23.5992 11.8958 23.4545 11.8958H22.5018L21.6167 22.2396C21.5523 22.9921 21.2 23.6935 20.6295 24.2048C20.059 24.7161 19.312 24.9999 18.5367 25H13.4633C12.688 24.9999 11.941 24.7161 11.3705 24.2048C10.8001 23.6935 10.4477 22.9921 10.3833 22.2396L9.49818 11.8958H8.54545C8.40079 11.8958 8.26205 11.8399 8.15976 11.7402C8.05747 11.6406 8 11.5055 8 11.3646C8 11.2237 8.05747 11.0886 8.15976 10.9889C8.26205 10.8893 8.40079 10.8333 8.54545 10.8333H13.0909ZM14.9091 14.9062C14.9091 14.7654 14.8516 14.6302 14.7493 14.5306C14.647 14.431 14.5083 14.375 14.3636 14.375C14.219 14.375 14.0802 14.431 13.9779 14.5306C13.8756 14.6302 13.8182 14.7654 13.8182 14.9062V20.9271C13.8182 21.068 13.8756 21.2031 13.9779 21.3027C14.0802 21.4024 14.219 21.4583 14.3636 21.4583C14.5083 21.4583 14.647 21.4024 14.7493 21.3027C14.8516 21.2031 14.9091 21.068 14.9091 20.9271V14.9062ZM17.6364 14.375C17.4917 14.375 17.353 14.431 17.2507 14.5306C17.1484 14.6302 17.0909 14.7654 17.0909 14.9062V20.9271C17.0909 21.068 17.1484 21.2031 17.2507 21.3027C17.353 21.4024 17.4917 21.4583 17.6364 21.4583C17.781 21.4583 17.9198 21.4024 18.0221 21.3027C18.1244 21.2031 18.1818 21.068 18.1818 20.9271V14.9062C18.1818 14.7654 18.1244 14.6302 18.0221 14.5306C17.9198 14.431 17.781 14.375 17.6364 14.375Z" fill="#EE0000"/>
+</svg>

package/src/assets/down-arrow.svg

@@ -0,0 +1,4 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="20" height="20" rx="0.5" fill="white" stroke="#EEEEEE"/>
+<path d="M10.4914 13.998C10.3081 13.9984 10.1305 13.9287 9.98939 13.8009L5.28335 9.51743C5.12317 9.37202 5.02244 9.16306 5.00332 8.93652C4.9842 8.70999 5.04825 8.48444 5.18138 8.30948C5.31451 8.13453 5.50582 8.02451 5.71322 8.00363C5.92062 7.98274 6.12713 8.0527 6.2873 8.19811L10.4914 12.0361L14.6954 8.33519C14.7757 8.26402 14.868 8.21088 14.9671 8.17881C15.0662 8.14675 15.1701 8.13638 15.2729 8.14833C15.3756 8.16027 15.4752 8.19428 15.5659 8.2484C15.6566 8.30252 15.7366 8.37568 15.8014 8.46369C15.8732 8.55178 15.9276 8.65512 15.9612 8.76724C15.9947 8.87936 16.0067 8.99784 15.9964 9.11526C15.9861 9.23268 15.9537 9.34652 15.9013 9.44963C15.8488 9.55273 15.7774 9.6429 15.6916 9.71447L10.9855 13.8523C10.8403 13.9599 10.6664 14.0111 10.4914 13.998Z" fill="#3C393E"/>
+</svg>

package/src/assets/minus.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#EEEEEE"/>
+<path d="M22.7692 8H9.23077C8.9044 8 8.59121 8.12967 8.36044 8.36044C8.12967 8.59121 8 8.9044 8 9.23077V22.7692C8 23.0956 8.12967 23.4088 8.36044 23.6396C8.59121 23.8703 8.9044 24 9.23077 24H22.7692C23.0956 24 23.4088 23.8703 23.6396 23.6396C23.8703 23.4088 24 23.0956 24 22.7692V9.23077C24 8.9044 23.8703 8.59121 23.6396 8.36044C23.4088 8.12967 23.0956 8 22.7692 8ZM20.8676 16.6154H11.1326C10.7924 16.6154 10.5172 16.3398 10.5172 16C10.5172 15.6602 10.7924 15.3846 11.1326 15.3846H20.8676C21.2077 15.3846 21.483 15.6602 21.483 16C21.483 16.3398 21.2077 16.6154 20.8676 16.6154Z" fill="#D1D1D1"/>
+</svg>

package/src/assets/plus.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#EEEEEE"/>
+<path d="M22.7692 8H9.23077C8.9044 8 8.59121 8.12967 8.36044 8.36044C8.12967 8.59121 8 8.9044 8 9.23077V22.7692C8 23.0956 8.12967 23.4088 8.36044 23.6396C8.59121 23.8703 8.9044 24 9.23077 24H22.7692C23.0956 24 23.4088 23.8703 23.6396 23.6396C23.8703 23.4088 24 23.0956 24 22.7692V9.23077C24 8.9044 23.8703 8.59121 23.6396 8.36044C23.4088 8.12967 23.0956 8 22.7692 8ZM20.8676 16.6154H16.6154V20.8676C16.6154 21.2077 16.3398 21.483 16 21.483C15.6602 21.483 15.3846 21.2077 15.3846 20.8676V16.6154H11.1324C10.7923 16.6154 10.517 16.3398 10.517 16C10.517 15.6602 10.7923 15.3846 11.1324 15.3846H15.3846V11.1324C15.3846 10.7923 15.6602 10.517 16 10.517C16.3398 10.517 16.6154 10.7923 16.6154 11.1324V15.3846H20.8676C21.2077 15.3846 21.483 15.6602 21.483 16C21.483 16.3398 21.2077 16.6154 20.8676 16.6154Z" fill="#FECD29"/>
+</svg>

package/src/assets/up-arrow.svg

@@ -0,0 +1,4 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="20" height="20" rx="0.5" fill="white" stroke="#EEEEEE"/>
+<path d="M10.5086 8.00203C10.6919 8.00164 10.8695 8.07135 11.0106 8.19907L15.7167 12.4826C15.8768 12.628 15.9776 12.8369 15.9967 13.0635C16.0158 13.29 15.9518 13.5156 15.8186 13.6905C15.6855 13.8655 15.4942 13.9755 15.2868 13.9964C15.0794 14.0173 14.8729 13.9473 14.7127 13.8019L10.5086 9.96387L6.30456 13.6648C6.22433 13.736 6.13201 13.7891 6.03292 13.8212C5.93383 13.8533 5.82991 13.8636 5.72714 13.8517C5.62437 13.8397 5.52477 13.8057 5.43407 13.7516C5.34337 13.6975 5.26336 13.6243 5.19864 13.5363C5.12681 13.4482 5.0724 13.3449 5.03884 13.2328C5.00528 13.1206 4.99327 13.0022 5.00358 12.8847C5.01389 12.7673 5.04629 12.6535 5.09875 12.5504C5.15121 12.4473 5.2226 12.3571 5.30844 12.2855L10.0145 8.14767C10.1597 8.04014 10.3336 7.98886 10.5086 8.00203Z" fill="#3C393E"/>
+</svg>

package/src/components/icon/Arrow.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgArrow = ({ title, titleId, ...props }) => (
+const SvgArrow = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="15"
     height="9"
@@ -12,7 +12,7 @@ const SvgArrow = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M7.988 8a.997.997 0 0 1-.64-.23l-5.989-5a1.002 1.002 0 0 1 .548-1.767.998.998 0 0 1 .73.227l5.35 4.48 5.351-4.32a.997.997 0 0 1 1.408.15 1 1 0 0 1-.14 1.46l-5.99 4.83a.997.997 0 0 1-.628.17Z"
-      fill="#3C393E"
+      fill={fillColor ? fillColor : '#3C393E'}
     />
   </svg>
 );

package/src/components/icon/CaptchaArrowDown.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgCaptchaArrowDown = ({ title, titleId, ...props }) => (
+const SvgCaptchaArrowDown = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="12"
     height="15"
@@ -12,7 +12,7 @@ const SvgCaptchaArrowDown = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
         d="M6 0.00146537C5.77271 0.00146539 5.55473 0.0936418 5.39402 0.257718C5.2333 0.421795 5.14301 0.64433 5.14301 0.876368L5.14301 11.013L1.46482 7.25615C1.38514 7.17481 1.29055 7.11028 1.18644 7.06626C1.08233 7.02224 0.970753 6.99958 0.85807 6.99958C0.745386 6.99958 0.633807 7.02224 0.529701 7.06626C0.425595 7.11028 0.331002 7.17481 0.251322 7.25616C0.171643 7.3375 0.108438 7.43407 0.0653156 7.54035C0.0221934 7.64663 -5.45598e-07 7.76055 -5.35541e-07 7.87559C-5.25484e-07 7.99063 0.0221934 8.10454 0.0653157 8.21082C0.108438 8.3171 0.171643 8.41367 0.251322 8.49502L5.39325 13.7444C5.47286 13.8259 5.56743 13.8905 5.67155 13.9347C5.77566 13.9788 5.88728 14.0015 6 14.0015C6.11272 14.0015 6.22434 13.9788 6.32846 13.9347C6.43257 13.8905 6.52714 13.8259 6.60675 13.7444L11.7487 8.49502C11.9096 8.33073 12 8.10792 12 7.87559C12 7.64325 11.9096 7.42044 11.7487 7.25615C11.5878 7.09187 11.3695 6.99958 11.1419 6.99958C10.9144 6.99958 10.6961 7.09187 10.5352 7.25615L6.85699 11.013L6.85699 0.876368C6.85699 0.64433 6.7667 0.421794 6.60598 0.257718C6.44526 0.0936418 6.22729 0.00146535 6 0.00146537Z"
-        fill="#00236A"
+        fill={fillColor ? fillColor : '#00236A'}
     />
   </svg>
 );

package/src/components/icon/CaptchaArrowUp.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgCaptchaArrowUp = ({ title, titleId, ...props }) => (
+const SvgCaptchaArrowUp = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="12"
     height="15"
@@ -12,7 +12,7 @@ const SvgCaptchaArrowUp = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
         d="M6 14.9988C6.22729 14.9988 6.44527 14.9066 6.60598 14.7425C6.7667 14.5785 6.85699 14.3559 6.85699 14.1239L6.85699 3.98726L10.5352 7.74409C10.6149 7.82543 10.7095 7.88996 10.8136 7.93398C10.9177 7.97801 11.0292 8.00067 11.1419 8.00067C11.2546 8.00067 11.3662 7.97801 11.4703 7.93398C11.5744 7.88996 11.669 7.82543 11.7487 7.74409C11.8284 7.66274 11.8916 7.56617 11.9347 7.45989C11.9778 7.35361 12 7.2397 12 7.12466C12 7.00962 11.9778 6.89571 11.9347 6.78943C11.8916 6.68314 11.8284 6.58657 11.7487 6.50523L6.60675 1.25581C6.52714 1.17434 6.43257 1.1097 6.32845 1.06559C6.22434 1.02148 6.11272 0.998779 6 0.998779C5.88728 0.998779 5.77566 1.02148 5.67154 1.06559C5.56743 1.1097 5.47286 1.17434 5.39325 1.25581L0.251323 6.50523C0.0904038 6.66951 0 6.89233 0 7.12466C0 7.35699 0.0904038 7.57981 0.251323 7.74409C0.412243 7.90837 0.630497 8.00067 0.858071 8.00067C1.08565 8.00067 1.3039 7.90837 1.46482 7.74409L5.14301 3.98726L5.14301 14.1239C5.14301 14.3559 5.2333 14.5785 5.39402 14.7425C5.55473 14.9066 5.77271 14.9988 6 14.9988Z"
-        fill="#00236A"
+        fill={fillColor ? fillColor : '#00236A'}
     />
   </svg>
 );

package/src/components/icon/CheckboxChecked.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgCheckboxChecked = ({ title, titleId, ...props }) => (
+const SvgCheckboxChecked = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="16"
     height="16"
@@ -14,7 +14,7 @@ const SvgCheckboxChecked = ({ title, titleId, ...props }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M12.8 0H3.2A3.2 3.2 0 0 0 0 3.2v9.6A3.2 3.2 0 0 0 3.2 16h9.6a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 12.8 0ZM6.85 10.966c.068.023.14.034.218.034.078 0 .151-.011.219-.034a.515.515 0 0 0 .19-.114l5.363-4.94A.496.496 0 0 0 13 5.53a.496.496 0 0 0-.16-.382.589.589 0 0 0-.415-.148.59.59 0 0 0-.416.148l-4.94 4.55-2.085-1.92a.579.579 0 0 0-.408-.147.579.579 0 0 0-.408.148A.52.52 0 0 0 4 8.16a.476.476 0 0 0 .154.383l2.506 2.308a.515.515 0 0 0 .19.114Z"
-      fill="#00236A"
+      fill={fillColor ? fillColor : '#00236A'}
     />
   </svg>
 );

package/src/components/icon/CheckboxUnchecked.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgCheckboxUnchecked = ({ title, titleId, ...props }) => (
+const SvgCheckboxUnchecked = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="16"
     height="16"
@@ -14,7 +14,7 @@ const SvgCheckboxUnchecked = ({ title, titleId, ...props }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm0 1.6a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H3.2Z"
-      fill="#D1D1D1"
+      fill={fillColor ? fillColor : '#D1D1D1'}
     />
   </svg>
 );

package/src/components/icon/Close.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgClose = ({ title, titleId, ...props }) => (
+const SvgClose = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="18"
     height="18"
@@ -12,7 +12,7 @@ const SvgClose = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
-      fill="#3C393E"
+      fill={fillColor ? fillColor : '#3C393E'}
     />
   </svg>
 );

package/src/components/icon/CloseIcon.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgCloseIcon = ({ title, titleId, ...props }) => (
+const SvgCloseIcon = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="14"
     height="14"
@@ -12,7 +12,7 @@ const SvgCloseIcon = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z"
-      fill="#3C393E"
+      fill={fillColor ? fillColor : '#3C393E'}
     />
   </svg>
 );

package/src/components/icon/CloseSlide.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgCloseSlide = ({ title, titleId, ...props }) => (
+const SvgCloseSlide = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="18"
     height="18"
@@ -12,7 +12,7 @@ const SvgCloseSlide = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
-      fill="#fff"
+      fill={fillColor ? fillColor : '#3C393E'}
     />
   </svg>
 );

package/src/components/icon/DeleteComponent.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgDeleteComponent = ({ title, titleId, ...props }) => (
+const SvgDeleteComponent = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="26"
     height="26"
@@ -13,7 +13,7 @@ const SvgDeleteComponent = ({ title, titleId, ...props }) => (
     <rect x={0.5} y={0.5} width={25} height={25} rx={5.5} stroke="#D1D1D1" />
     <path
       d="M13 4c.822 0 1.611.296 2.206.826s.95 1.255.99 2.024l.005.15h4c.204 0 .4.073.548.205.148.13.238.31.25.501a.72.72 0 0 1-.185.525.817.817 0 0 1-.52.264l-.093.005h-.68l-.943 10.915a2.75 2.75 0 0 1-.957 1.84 3.114 3.114 0 0 1-2.034.745h-5.173c-.754 0-1.48-.266-2.034-.745a2.75 2.75 0 0 1-.957-1.84L6.478 8.5H5.8a.831.831 0 0 1-.531-.19.736.736 0 0 1-.263-.472L5 7.75c0-.184.072-.361.202-.498a.818.818 0 0 1 .504-.247L5.8 7h4c0-.796.337-1.559.938-2.121A3.312 3.312 0 0 1 13 4Zm-1.8 6.938a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.006.076v6l.006.076c.02.135.09.258.2.348.11.09.25.138.394.138.145 0 .285-.049.395-.138.109-.09.18-.213.2-.348l.005-.076v-6l-.005-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139Zm3.6 0a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.005.076v6l.005.076c.02.135.091.258.2.348.11.09.25.138.394.138.145 0 .286-.049.395-.138.11-.09.18-.213.2-.348l.006-.076v-6l-.006-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139ZM13 5.5a1.66 1.66 0 0 0-1.088.4c-.296.257-.477.61-.508.987L11.4 7h3.2l-.003-.112a1.465 1.465 0 0 0-.508-.988A1.66 1.66 0 0 0 13 5.5Z"
-      fill="#E00"
+      fill={fillColor ? fillColor : '#E00'}
     />
   </svg>
 );

package/src/components/icon/Dots.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgDots = ({ title, titleId, ...props }) => (
+const SvgDots = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="11"
     height="3"
@@ -12,7 +12,7 @@ const SvgDots = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M.23 1.136C.23.742.326.464.518.304c.192-.16.421-.24.688-.24.277 0 .512.08.704.24.203.16.304.438.304.832 0 .384-.101.662-.304.832-.192.17-.427.256-.704.256a1 1 0 0 1-.688-.256C.326 1.798.23 1.52.23 1.136Zm4.281 0c0-.394.096-.672.288-.832.192-.16.422-.24.688-.24.278 0 .512.08.704.24.203.16.304.438.304.832 0 .384-.101.662-.304.832-.192.17-.426.256-.704.256a1 1 0 0 1-.688-.256c-.192-.17-.288-.448-.288-.832Zm4.282 0c0-.394.096-.672.288-.832.192-.16.421-.24.688-.24.277 0 .512.08.704.24.202.16.304.438.304.832 0 .384-.102.662-.304.832-.192.17-.427.256-.704.256a1 1 0 0 1-.688-.256c-.192-.17-.288-.448-.288-.832Z"
-      fill="#3C393E"
+      fill={fillColor ? fillColor : '#3C393E'}
     />
   </svg>
 );

package/src/components/icon/HeartFilled.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 
-const SvgHeartFilled = ({ title, titleId, ...props }) => (
+const SvgHeartFilled = ({ title, titleId, fillColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="1em"
@@ -18,7 +18,7 @@ const SvgHeartFilled = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M475.366 71.951c-24.175-23.606-57.575-35.404-100.215-35.404-11.8 0-23.843 2.046-36.117 6.136-12.279 4.093-23.702 9.615-34.256 16.562-10.568 6.945-19.65 13.467-27.269 19.556a263.828 263.828 0 0 0-21.696 19.414 264.184 264.184 0 0 0-21.698-19.414c-7.616-6.089-16.702-12.607-27.268-19.556-10.564-6.95-21.985-12.468-34.261-16.562-12.275-4.089-24.316-6.136-36.116-6.136-42.637 0-76.039 11.801-100.211 35.404C12.087 95.552 0 128.288 0 170.162c0 12.753 2.24 25.889 6.711 39.398 4.471 13.514 9.566 25.031 15.275 34.546 5.708 9.514 12.181 18.796 19.414 27.837 7.233 9.042 12.519 15.27 15.846 18.699 3.33 3.422 5.948 5.899 7.851 7.419L243.25 469.937c3.427 3.429 7.614 5.144 12.562 5.144s9.138-1.715 12.563-5.137l177.87-171.307c43.588-43.583 65.38-86.41 65.38-128.475.001-41.874-12.088-74.61-36.259-98.211z"
-      fill="currentColor"
+      fill={fillColor ? fillColor : 'currentColor'}
     />
   </svg>
 );

package/src/components/icon/HeartOutline.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-const SvgHeartOutline = ({ title, titleId, ...props }) => (
+const SvgHeartOutline = ({ title, titleId, fillColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 471.701 471.701"
@@ -17,7 +17,7 @@ const SvgHeartOutline = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M433.601 67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7 13.6-92.4 38.3l-12.9 12.9-13.1-13.1c-24.7-24.7-57.6-38.4-92.5-38.4-34.8 0-67.6 13.6-92.2 38.2-24.7 24.7-38.3 57.5-38.2 92.4 0 34.9 13.7 67.6 38.4 92.3l187.8 187.8c2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-3.9l188.2-187.5c24.7-24.7 38.3-57.5 38.3-92.4.1-34.9-13.4-67.7-38.1-92.4zm-19.2 165.7-178.7 178-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3s10.7-53.7 30.3-73.2c19.5-19.5 45.5-30.3 73.1-30.3 27.7 0 53.8 10.8 73.4 30.4l22.6 22.6c5.3 5.3 13.8 5.3 19.1 0l22.4-22.4c19.6-19.6 45.7-30.4 73.3-30.4 27.6 0 53.6 10.8 73.2 30.3 19.6 19.6 30.3 45.6 30.3 73.3.1 27.7-10.7 53.7-30.3 73.3z"
-      fill="currentColor"
+      fill={fillColor ? fillColor : 'currentColor'}
     />
   </svg>
 );

package/src/components/icon/ListItemDelete.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgListItemDelete = ({ title, titleId, ...props }) => (
+const SvgListItemDelete = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="22"
     height="22"
@@ -12,7 +12,7 @@ const SvgListItemDelete = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M7.071 3.144V.786A.786.786 0 0 1 7.857 0h6.286a.786.786 0 0 1 .786.786v2.358h6.285a.786.786 0 0 1 0 1.572H.786a.786.786 0 1 1 0-1.572H7.07Zm1.572 0h4.714V1.573H8.643v1.571ZM3.143 22a.786.786 0 0 1-.786-.786V4.716h17.286v16.498a.786.786 0 0 1-.786.786H3.143Zm5.5-4.714a.786.786 0 0 0 .786-.786V8.644a.786.786 0 0 0-1.572 0V16.5a.785.785 0 0 0 .786.786Zm4.714 0a.785.785 0 0 0 .786-.786V8.644a.785.785 0 0 0-1.572 0V16.5a.785.785 0 0 0 .786.786Z"
-      fill="#051942"
+      fill={fillColor ? fillColor : '#051942'}
     />
   </svg>
 );

package/src/components/icon/ListItemJpeg.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgListItemJpeg = ({ title, titleId, ...props }) => (
+const SvgListItemJpeg = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="33"
     height="42"
@@ -14,7 +14,7 @@ const SvgListItemJpeg = ({ title, titleId, ...props }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="m32.384 10.667-.022-.026-.021-.025a.356.356 0 0 0-.052-.058L21.896.21 21.87.188l-.025-.021-.029-.026a.477.477 0 0 1-.029-.025L21.678 0H3.41c-.771 0-1.511.305-2.057.848A2.891 2.891 0 0 0 .5 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 3.409 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108Zm-1.338 28.437a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H3.41a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.588 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.588Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.98a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.588a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.588 11.99a.724.724 0 1 1 0-1.448H17.02a.724.724 0 0 1 0 1.449H5.588Zm17.974-1.643A1.451 1.451 0 0 1 22.107 8.9V2.47l7.913 7.878h-6.458ZM8.576 32.088v4.478c0 .246-.042.454-.127.624a.91.91 0 0 1-.352.382.99.99 0 0 1-.505.128c-.2 0-.374-.034-.523-.101a.755.755 0 0 1-.343-.334c-.079-.156-.119-.36-.119-.611H5.5c0 .436.09.797.268 1.08.179.285.425.496.738.634.317.137.679.206 1.086.206.398 0 .754-.079 1.068-.237.313-.158.56-.387.742-.686.182-.299.273-.66.273-1.085v-4.478H8.576Zm3.472 4.012h1.327c.495 0 .915-.079 1.261-.237.349-.158.614-.386.796-.681.181-.296.272-.65.272-1.064 0-.392-.09-.741-.272-1.046a1.849 1.849 0 0 0-.796-.72c-.345-.176-.766-.264-1.261-.264h-2.43v6.398h1.103V36.1Zm0-.874v-2.26h1.327c.29 0 .524.055.703.163a.97.97 0 0 1 .391.431c.085.176.128.365.128.567 0 .214-.043.404-.128.571a.876.876 0 0 1-.39.387c-.18.094-.414.14-.704.14h-1.327Zm14.545.087v2.444c-.09.12-.233.252-.426.395-.19.141-.444.263-.76.365-.317.103-.71.154-1.182.154-.402 0-.77-.068-1.103-.202a2.415 2.415 0 0 1-.866-.602 2.755 2.755 0 0 1-.558-.963 3.964 3.964 0 0 1-.198-1.3v-.444c0-.484.06-.914.18-1.292.123-.381.299-.703.527-.967.229-.264.504-.463.827-.598a2.805 2.805 0 0 1 1.103-.206c.524 0 .958.088 1.3.263.346.173.613.413.8.721.188.308.307.66.356 1.055h-1.08a1.7 1.7 0 0 0-.207-.598 1.046 1.046 0 0 0-.431-.413c-.185-.102-.425-.154-.72-.154-.256 0-.48.049-.673.145a1.271 1.271 0 0 0-.483.426 2.093 2.093 0 0 0-.286.686c-.065.27-.097.577-.097.923v.452c0 .352.037.664.11.937.076.272.185.502.325.69.144.187.318.33.523.426.205.093.437.14.695.14.252 0 .458-.02.62-.061.16-.044.288-.095.381-.154.097-.062.172-.12.225-.176v-1.27h-1.332v-.822h2.43ZM16.7 32.085h3.791v.884h-2.78v1.754h2.618v.875H17.71v2.033h2.781v.884h-3.79v-6.43Z"
-      fill="#051942"
+      fill={fillColor ? fillColor : '#051942'}
     />
   </svg>
 );

package/src/components/icon/ListItemJpg.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgListItemJpg = ({ title, titleId, ...props }) => (
+const SvgListItemJpg = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="32"
     height="42"
@@ -14,7 +14,7 @@ const SvgListItemJpg = ({ title, titleId, ...props }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M31.862 10.64c.007.01.015.02.022.027l.116.108v28.328c0 .768-.306 1.505-.852 2.049a2.917 2.917 0 0 1-2.057.848H2.909a2.917 2.917 0 0 1-2.057-.848A2.891 2.891 0 0 1 0 39.103V2.897C0 2.128.306 1.392.852.848A2.917 2.917 0 0 1 2.909 0h18.27l.108.116.03.025.028.026.025.02.026.023L31.79 10.558c.02.018.037.037.052.058l.02.025Zm-1.743 29.486a1.45 1.45 0 0 0 .427-1.022v-8.77H13.95a.716.716 0 0 1-.546-.246l-1.963-2.238H1.455v11.254c.001.383.155.751.427 1.022.273.272.642.425 1.027.426h26.182a1.463 1.463 0 0 0 1.027-.426ZM4.364 17.633c0 .4.324.724.724.724h21.825a.724.724 0 1 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm23.273 3.186c0-.4-.325-.724-.724-.724H15.48a.724.724 0 0 0 0 1.448h11.432c.4 0 .724-.324.724-.724Zm-.724-5.641a.724.724 0 1 0 0-1.449H5.088a.724.724 0 1 0 0 1.449h21.825Zm-22.55-3.91c0 .4.325.723.725.723H16.52a.724.724 0 0 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm17.672-1.345c.272.27.642.423 1.027.425h6.458l-7.913-7.879V8.9c.002.384.155.752.428 1.024Zm2.071 27.737v-2.443h-2.43v.822h1.331v1.27a1.19 1.19 0 0 1-.224.175c-.094.059-.221.11-.382.154a2.579 2.579 0 0 1-.62.062c-.258 0-.489-.047-.694-.14a1.408 1.408 0 0 1-.523-.427 2.062 2.062 0 0 1-.325-.69 3.614 3.614 0 0 1-.11-.936v-.453c0-.346.032-.653.097-.923.064-.27.16-.498.285-.685.13-.188.29-.33.484-.426.193-.097.417-.146.672-.146.296 0 .536.052.72.154.188.1.332.238.431.413.103.176.172.375.207.598h1.081a2.633 2.633 0 0 0-.356-1.055 1.913 1.913 0 0 0-.8-.72c-.343-.176-.776-.264-1.3-.264-.41 0-.778.069-1.104.206a2.204 2.204 0 0 0-.826.598 2.742 2.742 0 0 0-.527.967c-.12.378-.18.809-.18 1.292v.444c0 .486.066.92.197 1.3.132.378.318.7.559.963.243.264.531.464.865.602.334.135.702.202 1.103.202.472 0 .866-.051 1.182-.154.317-.102.57-.224.76-.364a2.13 2.13 0 0 0 .427-.396Zm-13.03-1.094v-4.478h1.099v4.478c0 .425-.091.786-.273 1.085-.181.3-.429.528-.742.686-.314.158-.67.237-1.068.237-.407 0-.77-.069-1.086-.206a1.622 1.622 0 0 1-.738-.633C8.09 37.45 8 37.09 8 36.654h1.107c0 .252.04.455.12.61a.755.755 0 0 0 .342.335c.15.067.324.1.523.1a.99.99 0 0 0 .505-.127.909.909 0 0 0 .352-.382c.085-.17.127-.378.127-.624Zm4.799-.466h-1.327v2.386h-1.103v-6.398h2.43c.495 0 .916.088 1.261.264.349.172.614.413.796.72.181.305.272.654.272 1.046 0 .413-.09.768-.272 1.064a1.753 1.753 0 0 1-.796.68c-.345.159-.766.238-1.261.238Zm-1.327-3.133v2.259h1.327c.29 0 .524-.047.703-.141a.876.876 0 0 0 .391-.387c.085-.167.128-.357.128-.571 0-.202-.043-.391-.128-.567a.97.97 0 0 0-.39-.43c-.18-.109-.414-.163-.704-.163h-1.327Z"
-      fill="#051942"
+      fill={fillColor ? fillColor : '#051942'}
     />
   </svg>
 );

package/src/components/icon/ListItemPdf.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgListItemPdf = ({ title, titleId, ...props }) => (
+const SvgListItemPdf = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="32"
     height="42"
@@ -14,7 +14,7 @@ const SvgListItemPdf = ({ title, titleId, ...props }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M31.862 10.64c.007.01.015.02.022.027l.116.108v28.328c0 .768-.306 1.505-.852 2.049a2.917 2.917 0 0 1-2.057.848H2.909a2.917 2.917 0 0 1-2.057-.848A2.891 2.891 0 0 1 0 39.103V2.897C0 2.128.306 1.392.852.848A2.917 2.917 0 0 1 2.909 0h18.27l.108.116.03.025.028.026.025.02.026.023L31.79 10.558c.02.018.037.037.052.058l.02.025Zm-1.743 29.486a1.45 1.45 0 0 0 .427-1.022v-8.77H13.95a.716.716 0 0 1-.546-.246l-1.963-2.238H1.455v11.254c.001.383.155.751.427 1.022.273.272.642.425 1.027.426h26.182a1.463 1.463 0 0 0 1.027-.426ZM4.364 17.633c0 .4.324.724.724.724h21.825a.724.724 0 1 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm23.273 3.186c0-.4-.325-.724-.724-.724H15.48a.724.724 0 0 0 0 1.448h11.432c.4 0 .724-.324.724-.724Zm-.724-5.641a.724.724 0 1 0 0-1.449H5.088a.724.724 0 1 0 0 1.449h21.825Zm-22.55-3.91c0 .4.325.723.725.723H16.52a.724.724 0 0 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm17.672-1.345c.272.27.642.423 1.027.425h6.458l-7.913-7.879V8.9c.002.384.155.752.428 1.024ZM10.43 36.013H9.103v2.385H8V32h2.43c.495 0 .916.088 1.261.264.349.172.614.413.796.72.181.305.272.654.272 1.046 0 .413-.09.768-.272 1.064a1.754 1.754 0 0 1-.796.68c-.345.16-.766.238-1.26.238Zm-1.327-3.134v2.259h1.327c.29 0 .525-.047.703-.14a.877.877 0 0 0 .391-.388c.085-.167.128-.357.128-.57 0-.203-.043-.392-.128-.568a.971.971 0 0 0-.39-.43c-.18-.109-.414-.163-.704-.163H9.103Zm6.504 5.52h-1.859V32H15.646c.425 0 .813.072 1.165.215.352.141.655.345.91.611.258.267.455.586.593.958.138.372.206.788.206 1.248v.339c0 .46-.068.876-.206 1.248a2.714 2.714 0 0 1-.593.958 2.662 2.662 0 0 1-.923.61c-.355.141-.752.211-1.191.211Zm0-.875h-.756v-4.645h.795c.285 0 .535.047.752.14.22.094.404.232.554.414a1.8 1.8 0 0 1 .342.672c.08.267.12.573.12.918v.348c0 .445-.07.829-.208 1.151-.134.322-.336.57-.606.743-.267.172-.598.259-.993.259Zm5.124-2.725v-1.92h2.975V32h-4.078v6.398h1.103v-2.724h2.61v-.875h-2.61Z"
-      fill="#051942"
+      fill={fillColor ? fillColor : '#051942'}
     />
   </svg>
 );

package/src/components/icon/ListItemPng.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgListItemPng = ({ title, titleId, ...props }) => (
+const SvgListItemPng = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="32"
     height="42"
@@ -14,7 +14,7 @@ const SvgListItemPng = ({ title, titleId, ...props }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="m31.873 10.655-.011-.014c-.007-.01-.014-.018-.021-.025a.356.356 0 0 0-.052-.058L21.396.21 21.37.188l-.025-.021a.476.476 0 0 0-.029-.025l-.029-.026L21.178 0H2.91C2.138 0 1.398.305.852.848A2.891 2.891 0 0 0 0 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 2.909 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108a.21.21 0 0 1-.01-.012Zm-1.327 28.449a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H2.91a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.088 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.088Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.48a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.088a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.088 11.99a.724.724 0 1 1 0-1.448H16.52a.724.724 0 0 1 0 1.449H5.088Zm17.974-1.643A1.451 1.451 0 0 1 21.607 8.9V2.47l7.913 7.878h-6.458ZM9.103 36.012h1.327c.495 0 .916-.079 1.261-.237.349-.158.614-.385.796-.681.181-.296.272-.65.272-1.064 0-.392-.09-.74-.272-1.046a1.85 1.85 0 0 0-.796-.72c-.345-.176-.766-.264-1.26-.264H8v6.398h1.103v-2.386Zm0-.874v-2.26h1.327c.29 0 .525.055.703.163.179.109.31.253.391.431.085.176.128.365.128.567 0 .214-.043.404-.128.571a.877.877 0 0 1-.39.387c-.18.094-.414.14-.704.14H9.103ZM13.7 32h1.09l3.292 5.106a63.566 63.566 0 0 1-.044-1.379V32h.956v6.398h-1.1l-3.303-4.9.002.044c.012.134.02.279.027.435l.018.468c.006.163.009.327.009.49v3.463H13.7V32Zm11.393 5.66v-2.443h-2.43v.822h1.332v1.27a1.19 1.19 0 0 1-.225.175c-.093.059-.22.11-.382.154a2.578 2.578 0 0 1-.62.062c-.257 0-.489-.047-.694-.14a1.408 1.408 0 0 1-.523-.427 2.062 2.062 0 0 1-.325-.69 3.614 3.614 0 0 1-.11-.936v-.453c0-.346.032-.653.097-.923.064-.27.16-.498.285-.685.13-.188.29-.33.484-.426.193-.097.417-.146.672-.146.296 0 .536.052.721.154.188.1.331.238.43.413a1.7 1.7 0 0 1 .207.598h1.081a2.633 2.633 0 0 0-.356-1.055 1.913 1.913 0 0 0-.8-.72c-.342-.176-.776-.264-1.3-.264-.41 0-.778.069-1.103.206a2.204 2.204 0 0 0-.826.598 2.742 2.742 0 0 0-.528.967c-.12.378-.18.809-.18 1.292v.444c0 .486.066.92.198 1.3.132.378.318.7.558.963.243.264.532.464.866.602.334.135.701.202 1.103.202.471 0 .865-.051 1.182-.154.316-.102.57-.224.76-.364.193-.144.335-.276.426-.396Z"
-      fill="#051942"
+      fill={fillColor ? fillColor : '#051942'}
     />
   </svg>
 );

package/src/components/icon/Next.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgNext = ({ title, titleId, ...props }) => (
+const SvgNext = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="24"
     height="24"
@@ -14,7 +14,7 @@ const SvgNext = ({ title, titleId, ...props }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.4-11.443a.854.854 0 0 0 .198-.548.855.855 0 0 0-.146-.539l-4.137-5.134a.857.857 0 0 0-1.251-.12.856.856 0 0 0-.129 1.207l3.701 4.586-3.838 4.587a.856.856 0 0 0 .739 1.4.858.858 0 0 0 .58-.305l4.284-5.134Z"
-      fill="#fff"
+      fill={fillColor ? fillColor : '#fff'}
     />
   </svg>
 );

package/src/components/icon/Nextarrow.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgNextarrow = ({ title, titleId, ...props }) => (
+const SvgNextarrow = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="6"
     height="12"
@@ -12,7 +12,7 @@ const SvgNextarrow = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M.851 11.998a.847.847 0 0 1-.847-.776.86.86 0 0 1 .193-.626l3.808-4.584L.333 1.419A.857.857 0 0 1 .46.213a.849.849 0 0 1 1.241.128l4.106 5.132a.859.859 0 0 1 0 1.086l-4.25 5.132a.85.85 0 0 1-.706.307Z"
-      fill="#3C393E"
+      fill={fillColor ? fillColor : '#3C393E'}
     />
   </svg>
 );

package/src/components/icon/PDF.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgPdf = ({ title, titleId, ...props }) => (
+const SvgPdf = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="40"
     height="52"
@@ -12,7 +12,7 @@ const SvgPdf = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
         d="M39.1304 13.1106V36.2849V36.2853C39.394 36.4388 39.6133 36.6599 39.7659 36.9263C39.9189 37.1931 39.9992 37.4956 40 37.8037V47.5932C39.9984 48.7614 39.54 49.8816 38.7252 50.7079C37.91 51.5337 36.8048 51.9984 35.6522 52H4.34783C3.19523 51.9984 2.09005 51.5338 1.27483 50.7079C0.460015 49.8816 0.0015528 48.7614 0 47.5932V34.7817C0.000775155 34.4736 0.0815204 34.1714 0.234087 33.9051C0.386643 33.6383 0.605983 33.4176 0.869565 33.2641V3.52545C0.869565 2.5906 1.23602 1.69387 1.8882 1.03245C2.54072 0.371431 3.42547 0 4.34783 0H26.1953L39.1304 13.1106ZM13.872 45.3893C14.6037 45.4385 15.3293 45.2261 15.9225 44.7893C16.4303 44.3463 16.7036 43.6872 16.6605 43.0096C16.671 42.6272 16.598 42.2471 16.4478 41.8965C16.3154 41.6026 16.1136 41.3464 15.8597 41.1509C15.5976 40.9542 15.2991 40.8137 14.9816 40.7385C14.6225 40.6512 14.2541 40.6083 13.8849 40.6115H11.0258V48.4741H12.6849V45.3893H13.872ZM22.6954 47.4563C23.0149 47.1041 23.2498 46.6815 23.3814 46.2224C23.5347 45.6809 23.6084 45.1195 23.5999 44.5564C23.6065 44.008 23.5362 43.4614 23.3918 42.933C23.2672 42.477 23.0475 42.0532 22.7474 41.6904C22.4465 41.3379 22.0669 41.064 21.6398 40.8917C21.1305 40.6934 20.5882 40.5982 20.0432 40.6116H17.506V48.4821H20.0642C21.0475 48.5494 22.0103 48.1743 22.6954 47.4563ZM26.1252 42.05H29.4956L29.4956 40.6115H24.4661V48.4804L26.1287 48.4808V45.1068L28.6505 45.0962L28.64 43.6577H26.1252V42.05ZM18.3352 36.0407H37.3911L37.3908 14.3567H28.4428C27.5205 14.3567 26.6358 13.9852 25.9836 13.3238C25.331 12.6628 24.9646 11.7661 24.9646 10.8312V1.76186H4.34743C3.88625 1.76186 3.4437 1.94758 3.11762 2.27808C2.79153 2.60859 2.6083 3.05715 2.6083 3.52458V33.0185H14.9392C15.4408 33.0185 15.9179 33.238 16.2482 33.6205L18.3352 36.0407ZM6.08594 13.7151C6.08594 13.2283 6.48054 12.8337 6.9673 12.8337H20.6043C21.0911 12.8337 21.4857 13.2283 21.4857 13.7151C21.4857 14.2019 21.0911 14.5965 20.6043 14.5965H6.9673C6.48054 14.5965 6.08594 14.2019 6.08594 13.7151ZM18.5137 25.3369C18.5137 24.8502 18.9083 24.4556 19.395 24.4556H33.0321C33.5188 24.4556 33.9134 24.8502 33.9134 25.3369C33.9134 25.8237 33.5188 26.2183 33.0321 26.2183H19.395C18.9083 26.2183 18.5137 25.8237 18.5137 25.3369ZM6.9673 16.7056C6.48054 16.7056 6.08594 17.1002 6.08594 17.5869C6.08594 18.0737 6.48054 18.4683 6.9673 18.4683H33.0307C33.5174 18.4683 33.912 18.0737 33.912 17.5869C33.912 17.1002 33.5174 16.7056 33.0307 16.7056H6.9673ZM6.08594 21.4618C6.08594 20.975 6.48054 20.5804 6.9673 20.5804H33.0307C33.5174 20.5804 33.912 20.975 33.912 21.4618C33.912 21.9486 33.5174 22.3432 33.0307 22.3432H6.9673C6.48054 22.3432 6.08594 21.9486 6.08594 21.4618ZM21.4704 42.6691C21.1241 42.239 20.5919 42.0085 20.0457 42.0521H19.166V47.0441H20.0251C20.352 47.0567 20.6773 46.9886 20.9727 46.8469C21.213 46.7226 21.4156 46.5345 21.5589 46.3032C21.7076 46.0577 21.8089 45.7862 21.8582 45.5029C21.9164 45.1846 21.9455 44.8615 21.9451 44.5377C21.951 44.1698 21.9106 43.8023 21.8252 43.4446C21.758 43.1653 21.6373 42.9016 21.4704 42.6691ZM13.7445 42.0508C14.085 42.0213 14.4258 42.1008 14.7193 42.2782C14.8136 42.3518 14.8858 42.4501 14.9282 42.5627C14.9825 42.7134 15.0077 42.8731 15.0019 43.0333C15.0093 43.1969 14.9728 43.3594 14.8967 43.5039C14.8311 43.6211 14.7352 43.7175 14.6195 43.7832C14.4961 43.8525 14.361 43.8981 14.2212 43.9182C14.0636 43.9426 13.9041 43.9548 13.7445 43.9544H12.6855V42.0508H13.7445Z"
-        fill="#00236A"
+        fill={fillColor ? fillColor : '#00236A'}
     />
   </svg>
 );

package/src/components/icon/Prev.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgPrev = ({ title, titleId, ...props }) => (
+const SvgPrev = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="24"
     height="24"
@@ -14,7 +14,7 @@ const SvgPrev = ({ title, titleId, ...props }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0ZM8.6 11.443a.855.855 0 0 0-.198.548c-.013.19.038.38.146.539l4.137 5.133a.857.857 0 0 0 1.251.12.856.856 0 0 0 .129-1.206l-3.701-4.586 3.838-4.587a.856.856 0 0 0-.739-1.4.858.858 0 0 0-.58.305l-4.284 5.134Z"
-      fill="#fff"
+      fill={fillColor ? fillColor : '#fff'}
     />
   </svg>
 );

package/src/components/icon/RangeArrowDefault.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgRangeArrowDefault = ({ title, titleId, ...props }) => (
+const SvgRangeArrowDefault = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="1em"
     height="1em"
@@ -16,7 +16,7 @@ const SvgRangeArrowDefault = ({ title, titleId, ...props }) => (
     </g>
     <path
       d="M25.998 23.011c0 .233-.081.46-.23.639l-4.998 5.99a1.001 1.001 0 0 1-1.539-1.278l4.478-5.351-4.318-5.35a.998.998 0 0 1 .15-1.408 1 1 0 0 1 1.46.14l4.827 5.99a.997.997 0 0 1 .17.628Z"
-      fill="#fff"
+      fill={fillColor ? fillColor : '#fff'}
     />
     <defs>
       <filter

package/src/components/icon/RangeArrowError.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgRangeArrowError = ({ title, titleId, ...props }) => (
+const SvgRangeArrowError = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="1em"
     height="1em"
@@ -16,7 +16,7 @@ const SvgRangeArrowError = ({ title, titleId, ...props }) => (
     </g>
     <path
       d="M25.998 23.011c0 .233-.081.46-.23.639l-4.998 5.99a1.001 1.001 0 0 1-1.539-1.278l4.478-5.351-4.318-5.35a.998.998 0 0 1 .15-1.408 1 1 0 0 1 1.46.14l4.827 5.99a.997.997 0 0 1 .17.628Z"
-      fill="#fff"
+      fill={fillColor ? fillColor : '#fff'}
     />
     <defs>
       <filter

package/src/components/icon/RangeArrowSuccess.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgRangeArrowSuccess = ({ title, titleId, ...props }) => (
+const SvgRangeArrowSuccess = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="1em"
     height="1em"
@@ -16,7 +16,7 @@ const SvgRangeArrowSuccess = ({ title, titleId, ...props }) => (
     </g>
     <path
       d="M25.998 23.011c0 .233-.081.46-.23.639l-4.998 5.99a1.001 1.001 0 0 1-1.539-1.278l4.478-5.351-4.318-5.35a.998.998 0 0 1 .15-1.408 1 1 0 0 1 1.46.14l4.827 5.99a.997.997 0 0 1 .17.628Z"
-      fill="#fff"
+      fill={fillColor ? fillColor : '#fff'}
     />
     <defs>
       <filter

package/src/components/icon/RemoveFile.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgRemoveFile = ({ title, titleId, ...props }) => (
+const SvgRemoveFile = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="26"
     height="26"
@@ -13,7 +13,7 @@ const SvgRemoveFile = ({ title, titleId, ...props }) => (
     <rect width={26} height={26} rx={6} fill="#FBFBFB" />
     <path
       d="M13 4c.822 0 1.611.296 2.206.826s.95 1.255.99 2.024l.005.15h4c.204 0 .4.073.548.205.148.13.238.31.25.501a.72.72 0 0 1-.185.525.817.817 0 0 1-.52.264l-.093.005h-.68l-.943 10.915a2.75 2.75 0 0 1-.957 1.84 3.114 3.114 0 0 1-2.034.745h-5.173c-.754 0-1.48-.266-2.034-.745a2.75 2.75 0 0 1-.957-1.84L6.478 8.5H5.8a.831.831 0 0 1-.531-.19.736.736 0 0 1-.263-.472L5 7.75c0-.184.072-.361.202-.498a.818.818 0 0 1 .504-.247L5.8 7h4c0-.796.337-1.559.938-2.121A3.312 3.312 0 0 1 13 4Zm-1.8 6.938a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.006.076v6l.006.076c.02.135.09.258.2.348.11.09.25.138.394.138.145 0 .285-.049.395-.138.109-.09.18-.213.2-.348l.005-.076v-6l-.005-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139Zm3.6 0a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.005.076v6l.005.076c.02.135.091.258.2.348.11.09.25.138.394.138.145 0 .286-.049.395-.138.11-.09.18-.213.2-.348l.006-.076v-6l-.006-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139ZM13 5.5a1.66 1.66 0 0 0-1.088.4c-.296.257-.477.61-.508.987L11.4 7h3.2l-.003-.112a1.465 1.465 0 0 0-.508-.988A1.66 1.66 0 0 0 13 5.5Z"
-      fill="#00236A"
+      fill={fillColor ? fillColor : '#00236A'}
     />
   </svg>
 );

package/src/components/icon/ToasterClose.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgToasterClose = ({ title, titleId, ...props }) => (
+const SvgToasterClose = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="18"
     height="18"
@@ -12,7 +12,7 @@ const SvgToasterClose = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
-      fill="#D1D1D1"
+      fill={fillColor ? fillColor : '#D1D1D1'}
     />
   </svg>
 );

package/src/components/icon/ToasterError.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgToasterError = ({ title, titleId, ...props }) => (
+const SvgToasterError = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="24"
     height="24"
@@ -12,7 +12,7 @@ const SvgToasterError = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 16a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-11a1 1 0 0 0-.984.82L11 6v7l.016.18a1 1 0 0 0 1.968 0L13 13V6l-.016-.18A1 1 0 0 0 12 5Z"
-      fill="#E00"
+      fill={fillColor ? fillColor : '#E00'}
     />
   </svg>
 );

package/src/components/icon/ToasterInfo.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgToasterInfo = ({ title, titleId, ...props }) => (
+const SvgToasterInfo = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="24"
     height="24"
@@ -12,7 +12,7 @@ const SvgToasterInfo = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M12 18c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854v-4.83c0-.34-.115-.62-.346-.84A1.19 1.19 0 0 0 12 10.8c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854v4.83c0 .34.115.62.346.84.23.22.515.33.854.33Zm0-9.6c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854 0-.34-.115-.625-.346-.856A1.157 1.157 0 0 0 12 6c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854 0 .34.115.625.346.856.23.23.515.345.854.344ZM12 24c-1.66 0-3.22-.315-4.68-.946a12.137 12.137 0 0 1-3.81-2.564 12.11 12.11 0 0 1-2.564-3.81C.316 15.22 0 13.66 0 12c0-1.66.315-3.22.946-4.68.63-1.46 1.485-2.73 2.564-3.81A12.11 12.11 0 0 1 7.32.946C8.78.316 10.34 0 12 0c1.66 0 3.22.315 4.68.946 1.46.63 2.73 1.485 3.81 2.564a12.127 12.127 0 0 1 2.566 3.81c.63 1.46.945 3.02.944 4.68 0 1.66-.315 3.22-.946 4.68a12.137 12.137 0 0 1-2.564 3.81 12.127 12.127 0 0 1-3.81 2.566c-1.46.63-3.02.945-4.68.944Z"
-      fill="#00236A"
+      fill={fillColor ? fillColor : '#00236A'}
     />
   </svg>
 );

package/src/components/icon/ToasterSuccess.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgToasterSuccess = ({ title, titleId, ...props }) => (
+const SvgToasterSuccess = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="24"
     height="24"
@@ -12,7 +12,7 @@ const SvgToasterSuccess = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm-1.495 14.367L7.84 11.7a1.028 1.028 0 1 0-1.455 1.455l3.394 3.395a1.024 1.024 0 0 0 1.456 0l7.028-7.03a1.03 1.03 0 1 0-1.453-1.456l-6.304 6.303Z"
-      fill="#0DA574"
+      fill={fillColor ? fillColor : '#0DA574'}
     />
   </svg>
 );

package/src/components/icon/ToasterWarning.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgToasterWarning = ({ title, titleId, ...props }) => (
+const SvgToasterWarning = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="24"
     height="24"
@@ -12,7 +12,7 @@ const SvgToasterWarning = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M1.156 21a1.143 1.143 0 0 1-.994-.583 1.285 1.285 0 0 1-.16-.57c-.01-.204.043-.403.16-.597L10.978.583c.117-.194.268-.34.454-.437C11.616.049 11.806 0 12 0c.194 0 .384.049.57.146.185.097.336.243.452.437L23.838 19.25c.116.194.17.394.161.599a1.26 1.26 0 0 1-.161.568 1.14 1.14 0 0 1-.41.423 1.09 1.09 0 0 1-.584.16H1.156ZM12 17.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83 0-.331-.112-.608-.337-.832a1.128 1.128 0 0 0-.832-.335c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83 0 .33.112.608.337.832.224.224.502.336.832.335Zm0-3.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83v-3.5c0-.331-.112-.608-.337-.832A1.128 1.128 0 0 0 12 8.166c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83v3.5c0 .33.112.608.337.832.224.224.502.336.832.335Z"
-      fill="#FF8A00"
+      fill={fillColor ? fillColor : '#FF8A00'}
     />
   </svg>
 );

package/src/components/icon/Tooltip.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgTooltip = ({ title, titleId, ...props }) => (
+const SvgTooltip = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="16"
     height="16"
@@ -12,7 +12,7 @@ const SvgTooltip = ({ title, titleId, ...props }) => (
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       d="M8 0a8 8 0 1 0 .001 16.001A8 8 0 0 0 8 0Zm.571 11.857A.143.143 0 0 1 8.43 12H7.57a.143.143 0 0 1-.142-.143V7c0-.079.064-.143.142-.143h.858c.078 0 .142.064.142.143v4.857ZM8 5.714A.857.857 0 0 1 8 4a.857.857 0 0 1 0 1.714Z"
-      fill="#D1D1D1"
+      fill={fillColor ? fillColor : '#D1D1D1'}
     />
   </svg>
 );