pixel-react 1.7.8 → 1.7.9

package/src/assets/icons/settings.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.31255 4.21386C5.54028 4.21386 5.7629 4.28139 5.95225 4.40791C6.1416 4.53443 6.28918 4.71426 6.37633 4.92465C6.46348 5.13505 6.48628 5.36656 6.44185 5.58992C6.39743 5.81327 6.28776 6.01844 6.12673 6.17947C5.9657 6.3405 5.76054 6.45016 5.53718 6.49459C5.31383 6.53902 5.08231 6.51621 4.87192 6.42907C4.66152 6.34192 4.48169 6.19434 4.35517 6.00498C4.22865 5.81563 4.16112 5.59302 4.16112 5.36528C4.1615 5.06002 4.28293 4.76737 4.49878 4.55152C4.71464 4.33567 5.00729 4.21423 5.31255 4.21386ZM6.41398 7.40386C5.92406 7.66867 5.3552 7.74831 4.8114 7.6282C4.2676 7.50808 3.7852 7.19625 3.4524 6.74972C3.11961 6.30318 2.95865 5.75178 2.99897 5.19633C3.03929 4.64089 3.27819 4.11851 3.67198 3.72472C4.06577 3.33092 4.58815 3.09203 5.1436 3.05171C5.69904 3.01139 6.25045 3.17234 6.69698 3.50513C7.14352 3.83793 7.45535 4.32033 7.57546 4.86413C7.69557 5.40793 7.61594 5.9768 7.35112 6.46671C7.56408 6.35703 7.80269 6.30684 8.04179 6.32142C8.2809 6.336 8.51164 6.41482 8.70969 6.54957C8.76759 6.24456 8.93015 5.96933 9.16931 5.77137C9.40847 5.57342 9.70923 5.46516 10.0197 5.46528H10.3683V5.03671C10.3677 4.90016 10.3191 4.76814 10.2312 4.66371C10.1432 4.55927 10.0213 4.48905 9.88684 4.46528L9.12969 4.33243C9.04081 4.00244 8.90922 3.68548 8.73826 3.38957L9.17969 2.75957C9.25541 2.64822 9.29023 2.51409 9.27825 2.37997C9.26628 2.24586 9.20823 2.12002 9.11398 2.02386L8.65969 1.56243C8.56272 1.46588 8.43486 1.40652 8.29852 1.39477C8.16218 1.38302 8.02605 1.41961 7.91398 1.49814L7.28398 1.93957C6.98809 1.76857 6.67112 1.63698 6.34112 1.54814L6.20826 0.790999C6.1845 0.656524 6.11428 0.534661 6.00984 0.446675C5.90541 0.358688 5.77339 0.310165 5.63684 0.30957H4.99398C4.85742 0.310165 4.72541 0.358688 4.62097 0.446675C4.51654 0.534661 4.44631 0.656524 4.42255 0.790999L4.28969 1.54814C3.95969 1.63696 3.64272 1.76855 3.34684 1.93957L2.71112 1.49814C2.59955 1.42112 2.46462 1.38541 2.32955 1.39714C2.19449 1.40887 2.06774 1.46732 1.97112 1.56243L1.50969 2.02386C1.41278 2.12092 1.3532 2.24906 1.34144 2.38572C1.32968 2.52238 1.3665 2.65881 1.44541 2.771L1.88684 3.401C1.71594 3.69694 1.58435 4.01389 1.49541 4.34386L0.738264 4.47671C0.603789 4.50048 0.481927 4.5707 0.39394 4.67514C0.305954 4.77957 0.25743 4.91158 0.256836 5.04814V5.691C0.25743 5.82756 0.305954 5.95957 0.39394 6.064C0.481927 6.16844 0.603789 6.23866 0.738264 6.26243L1.49541 6.39528C1.58427 6.72527 1.71586 7.04224 1.88684 7.33814L1.44541 7.96528C1.3665 8.07748 1.32968 8.21391 1.34144 8.35057C1.3532 8.48723 1.41278 8.61536 1.50969 8.71243L1.97112 9.16671C2.06801 9.26385 2.19605 9.32369 2.33272 9.33571C2.46938 9.34773 2.60591 9.31116 2.71826 9.23243L3.34826 8.791C3.64419 8.96193 3.96115 9.09352 4.29112 9.18243L4.42398 9.93957C4.44774 10.074 4.51797 10.1959 4.6224 10.2839C4.72684 10.3719 4.85885 10.4204 4.99541 10.421H5.42398V10.0724C5.42386 9.76197 5.53211 9.46121 5.73007 9.22204C5.92802 8.98288 6.20325 8.82032 6.50826 8.76243C6.37171 8.56543 6.29087 8.33523 6.27428 8.09611C6.25768 7.85699 6.30595 7.61783 6.41398 7.40386ZM14.2568 10.0724V10.5781C14.2554 10.6851 14.2167 10.7882 14.1473 10.8696C14.0779 10.951 13.9822 11.0055 13.8768 11.0239L13.2797 11.1281C13.2105 11.3916 13.1067 11.6447 12.9711 11.881L13.3197 12.3781C13.3819 12.4666 13.4108 12.5741 13.4014 12.6818C13.392 12.7895 13.3448 12.8904 13.2683 12.9667L12.9097 13.3253C12.8334 13.4019 12.7325 13.449 12.6248 13.4584C12.5171 13.4678 12.4095 13.4389 12.3211 13.3767L11.8283 13.0239C11.5951 13.1586 11.3454 13.2623 11.0854 13.3324L10.9711 13.9296C10.9528 14.0349 10.8982 14.1306 10.8168 14.2C10.7354 14.2694 10.6324 14.3082 10.5254 14.3096H10.0197C9.91151 14.3098 9.80673 14.2718 9.72386 14.2023C9.64099 14.1327 9.58537 14.0361 9.56684 13.9296L9.46255 13.3324C9.20256 13.2623 8.95283 13.1586 8.71969 13.0239L8.22255 13.3724C8.13412 13.4346 8.02657 13.4635 7.91888 13.4541C7.81119 13.4447 7.71028 13.3976 7.63398 13.321L7.27541 12.9624C7.19884 12.8861 7.15169 12.7852 7.14228 12.6775C7.13287 12.5698 7.1618 12.4623 7.22398 12.3739L7.57398 11.881C7.43922 11.6479 7.33549 11.3981 7.26541 11.1381L6.66826 11.0239C6.56168 11.0053 6.46509 10.9497 6.39555 10.8668C6.32601 10.784 6.28801 10.6792 6.28826 10.571V10.0724C6.28801 9.96425 6.32601 9.85946 6.39555 9.77659C6.46509 9.69372 6.56168 9.63811 6.66826 9.61957L7.26541 9.51528C7.33553 9.2553 7.43927 9.00558 7.57398 8.77243L7.22541 8.27671C7.16323 8.18828 7.13429 8.08073 7.1437 7.97304C7.15311 7.86535 7.20027 7.76445 7.27684 7.68814L7.63541 7.32957C7.71171 7.253 7.81262 7.20585 7.92031 7.19644C8.028 7.18703 8.13555 7.21597 8.22398 7.27814L8.71969 7.62671C8.95282 7.49194 9.20255 7.38821 9.46255 7.31814L9.56684 6.721C9.58537 6.61442 9.64099 6.51782 9.72386 6.44829C9.80673 6.37875 9.91151 6.34075 10.0197 6.341H10.5254C10.6324 6.34242 10.7354 6.38118 10.8168 6.45057C10.8982 6.51996 10.9528 6.61562 10.9711 6.721L11.0754 7.31814C11.3389 7.38738 11.592 7.49114 11.8283 7.62671L12.324 7.27814C12.4124 7.21597 12.52 7.18703 12.6277 7.19644C12.7353 7.20585 12.8362 7.253 12.9125 7.32957L13.2711 7.68814C13.3477 7.76445 13.3948 7.86535 13.4043 7.97304C13.4137 8.08073 13.3847 8.18828 13.3225 8.27671L12.9711 8.77243C13.1059 9.00556 13.2096 9.25529 13.2797 9.51528L13.8768 9.61957C13.9834 9.63811 14.08 9.69372 14.1495 9.77659C14.2191 9.85946 14.2571 9.96425 14.2568 10.0724ZM11.6397 10.3253C11.6397 10.0549 11.5595 9.79057 11.4093 9.56574C11.2591 9.34091 11.0455 9.16568 10.7957 9.06221C10.5459 8.95873 10.271 8.93166 10.0058 8.98441C9.74063 9.03716 9.49703 9.16737 9.30583 9.35857C9.11464 9.54977 8.98443 9.79337 8.93168 10.0586C8.87892 10.3238 8.906 10.5987 9.00947 10.8485C9.11295 11.0983 9.28818 11.3118 9.51301 11.462C9.73783 11.6122 10.0022 11.6924 10.2725 11.6924C10.6351 11.6924 10.9829 11.5484 11.2393 11.292C11.4957 11.0356 11.6397 10.6879 11.6397 10.3253Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/skipped_status_icon.svg

@@ -2,7 +2,7 @@
 <g clip-path="url(#clip0_5540_15039)">
 <path d="M16.6261 16.6281C20.2867 12.9675 20.2867 7.03249 16.6261 3.37187C12.9655 -0.288738 7.03044 -0.288737 3.36982 3.37187C-0.290788 7.03249 -0.290788 12.9675 3.36982 16.6281C7.03044 20.2887 12.9655 20.2887 16.6261 16.6281Z" fill="#E071FF"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2399 11.5904C18.5728 15.4935 15.4933 18.5729 11.5903 19.24L6.54334 14.1931C5.33564 13.1964 4.56592 11.6881 4.56592 9.99999C4.56592 6.99885 6.99873 4.56604 9.99986 4.56604C11.688 4.56604 13.1963 5.33581 14.193 6.54346L19.2399 11.5904Z" fill="#A83FC4"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.45635 10.3226L9.00393 11.7438C9.22967 11.9516 9.57908 11.9406 9.79139 11.7217L12.5523 9.07827C12.7769 8.86233 12.7837 8.50506 12.5676 8.28038C12.3516 8.05604 11.9946 8.04901 11.77 8.26495L9.3785 10.5547L8.22088 9.49166C7.99154 9.28065 7.63424 9.29545 7.42311 9.52502C7.21201 9.75436 7.22689 10.1114 7.45635 10.3226ZM9.99986 4.56604C13.001 4.56604 15.4338 6.99885 15.4338 9.99999C15.4338 13.0011 13.001 15.4339 9.99986 15.4339C6.99873 15.4339 4.56592 13.0011 4.56592 9.99999C4.56592 6.99885 6.99873 4.56604 9.99986 4.56604Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2169 9.99999C15.2169 6.99885 12.8326 4.56604 9.8914 4.56604C6.95017 4.56604 4.56592 6.99885 4.56592 9.99999C4.56592 13.0011 6.95017 15.4339 9.8914 15.4339C12.8326 15.4339 15.2169 13.0011 15.2169 9.99999ZM7.39471 11.9004L7.48132 11.0344V11.0344H8.39046L8.47706 11.9004C8.51499 12.2107 8.24839 12.5052 7.9359 12.4984C7.62336 12.5052 7.35684 12.2107 7.39471 11.9004ZM12.3244 10.3265L11.913 9.55955L11.073 9.90746L11.3244 10.7407C11.3687 10.8875 11.4736 11.0094 11.6122 11.0751C12.0769 11.3017 12.5738 10.7792 12.3244 10.3265ZM11.5626 8.75389L11.7867 9.29491L10.9752 9.63107L10.7511 9.09004L11.0216 8.978L10.8121 8.47226C10.7236 8.25853 10.5024 8.13638 10.2744 8.17518C10.0369 8.2156 9.8645 8.41981 9.8645 8.66074C9.8645 9.12489 10.0564 9.57767 10.391 9.90298C10.583 10.0897 10.6895 10.3504 10.6832 10.6184C10.6773 10.8663 10.5768 11.1002 10.3999 11.277C10.2231 11.4538 9.9892 11.5544 9.74129 11.5603L9.71782 11.5605C9.46414 11.5606 9.22553 11.4635 9.04361 11.2858C8.85603 11.1026 8.75273 10.8573 8.75273 10.5952V8.12929C8.75273 7.94445 8.60236 7.79406 8.41751 7.79406C8.23267 7.79406 8.08229 7.94445 8.08229 8.12929V10.156H8.37509V10.7416H7.49669V10.156H7.78949V8.12929C7.78949 7.783 8.0712 7.50126 8.41749 7.50126C8.76379 7.50126 9.04552 7.783 9.04552 8.12929V10.5952C9.04552 10.7778 9.11749 10.9487 9.24818 11.0764C9.37882 11.204 9.55176 11.2718 9.73439 11.2676C9.90672 11.2635 10.0695 11.1933 10.1929 11.07C10.3162 10.9466 10.3864 10.7838 10.3905 10.6115C10.3949 10.422 10.3226 10.2449 10.1869 10.1129C9.99141 9.92286 9.83843 9.69955 9.7322 9.44922C9.6257 9.1982 9.5717 8.93293 9.5717 8.66074C9.5717 8.27658 9.84657 7.95097 10.2253 7.88653C10.4 7.85679 10.5817 7.88762 10.7368 7.97334C10.892 8.05906 11.0148 8.19645 11.0826 8.3602L11.2921 8.86594L11.5626 8.75389Z" fill="white"/>
 </g>
 <defs>
 <clipPath id="clip0_5540_15039">

package/src/assets/icons/step_group.svg

@@ -1,10 +1,10 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.6871 0.646463L12.5406 0.5H12.3335H3.11475C2.40704 0.5 1.8335 1.07355 1.8335 1.78125V16.2188C1.8335 16.9265 2.40704 17.5 3.11475 17.5H14.8854C15.5931 17.5 16.1666 16.9265 16.1666 16.2188V4.33344V4.12634L16.0202 3.9799L12.6871 0.646463Z" fill="white" stroke="currentColor"/>
-<path d="M12.3335 1L15.6669 4.33344H13.1147C12.6832 4.33344 12.3335 3.98375 12.3335 3.55219V1Z" fill="currentColor"/>
-<path d="M16.2188 8.26343H1.78125C1.07364 8.26343 0.5 8.83706 0.5 9.54468V13.9822C0.5 14.6898 1.07364 15.2634 1.78125 15.2634H16.2188C16.9264 15.2634 17.5 14.6898 17.5 13.9822V9.54468C17.5 8.83706 16.9264 8.26343 16.2188 8.26343Z" fill="white" stroke="currentColor"/>
-<path d="M8.00338 4.22314H3.979C3.80641 4.22314 3.6665 4.36306 3.6665 4.53564V4.57721C3.6665 4.7498 3.80641 4.88971 3.979 4.88971H8.00338C8.17597 4.88971 8.31588 4.7498 8.31588 4.57721V4.53564C8.31588 4.36306 8.17597 4.22314 8.00338 4.22314Z" fill="currentColor"/>
-<path d="M11.0206 5.49316H3.979C3.80641 5.49316 3.6665 5.63308 3.6665 5.80566V5.84723C3.6665 6.01982 3.80641 6.15973 3.979 6.15973H11.0206C11.1932 6.15973 11.3331 6.01982 11.3331 5.84723V5.80566C11.3331 5.63308 11.1932 5.49316 11.0206 5.49316Z" fill="currentColor"/>
-<path d="M11.0206 6.76343H3.979C3.80641 6.76343 3.6665 6.90334 3.6665 7.07593V7.11749C3.6665 7.29008 3.80641 7.42999 3.979 7.42999H11.0206C11.1932 7.42999 11.3331 7.29008 11.3331 7.11749V7.07593C11.3331 6.90334 11.1932 6.76343 11.0206 6.76343Z" fill="currentColor"/>
-<path d="M11.7289 10.8835C11.6529 10.7435 11.5429 10.6375 11.3989 10.5655C11.2589 10.4895 11.0929 10.4515 10.9009 10.4515C10.5689 10.4515 10.3029 10.5615 10.1029 10.7815C9.90291 10.9975 9.80291 11.2875 9.80291 11.6515C9.80291 12.0395 9.90691 12.3435 10.1149 12.5635C10.3269 12.7795 10.6169 12.8875 10.9849 12.8875C11.2369 12.8875 11.4489 12.8235 11.6209 12.6955C11.7969 12.5675 11.9249 12.3835 12.0049 12.1435H10.7029V11.3875H12.9349V12.3415C12.8589 12.5975 12.7289 12.8355 12.5449 13.0555C12.3649 13.2755 12.1349 13.4535 11.8549 13.5895C11.5749 13.7255 11.2589 13.7935 10.9069 13.7935C10.4909 13.7935 10.1189 13.7035 9.79091 13.5235C9.46691 13.3395 9.21291 13.0855 9.02891 12.7615C8.84891 12.4375 8.75891 12.0675 8.75891 11.6515C8.75891 11.2355 8.84891 10.8655 9.02891 10.5415C9.21291 10.2135 9.46691 9.95948 9.79091 9.77948C10.1149 9.59548 10.4849 9.50348 10.9009 9.50348C11.4049 9.50348 11.8289 9.62548 12.1729 9.86948C12.5209 10.1135 12.7509 10.4515 12.8629 10.8835H11.7289Z" fill="currentColor"/>
-<path d="M6.76546 13.8055C6.45746 13.8055 6.18146 13.7555 5.93746 13.6555C5.69346 13.5555 5.49746 13.4075 5.34946 13.2115C5.20546 13.0155 5.12946 12.7795 5.12146 12.5035H6.21346C6.22946 12.6595 6.28346 12.7795 6.37546 12.8635C6.46746 12.9435 6.58746 12.9835 6.73546 12.9835C6.88746 12.9835 7.00746 12.9495 7.09546 12.8815C7.18346 12.8095 7.22746 12.7115 7.22746 12.5875C7.22746 12.4835 7.19146 12.3975 7.11946 12.3295C7.05146 12.2615 6.96546 12.2055 6.86146 12.1615C6.76146 12.1175 6.61746 12.0675 6.42946 12.0115C6.15746 11.9275 5.93546 11.8435 5.76346 11.7595C5.59146 11.6755 5.44346 11.5515 5.31946 11.3875C5.19546 11.2235 5.13346 11.0095 5.13346 10.7455C5.13346 10.3535 5.27546 10.0475 5.55946 9.82746C5.84346 9.60346 6.21346 9.49146 6.66946 9.49146C7.13346 9.49146 7.50746 9.60346 7.79146 9.82746C8.07546 10.0475 8.22746 10.3555 8.24746 10.7515H7.13746C7.12946 10.6155 7.07946 10.5095 6.98746 10.4335C6.89546 10.3535 6.77746 10.3135 6.63346 10.3135C6.50946 10.3135 6.40946 10.3475 6.33346 10.4155C6.25746 10.4795 6.21946 10.5735 6.21946 10.6975C6.21946 10.8335 6.28346 10.9395 6.41146 11.0155C6.53946 11.0915 6.73946 11.1735 7.01146 11.2615C7.28346 11.3535 7.50346 11.4415 7.67146 11.5255C7.84346 11.6095 7.99146 11.7315 8.11546 11.8915C8.23946 12.0515 8.30146 12.2575 8.30146 12.5095C8.30146 12.7495 8.23946 12.9675 8.11546 13.1635C7.99546 13.3595 7.81946 13.5155 7.58746 13.6315C7.35546 13.7475 7.08146 13.8055 6.76546 13.8055Z" fill="currentColor"/>
-</svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6871 0.646463L12.5406 0.5H12.3335H3.11475C2.40704 0.5 1.8335 1.07355 1.8335 1.78125V16.2188C1.8335 16.9265 2.40704 17.5 3.11475 17.5H14.8854C15.5931 17.5 16.1666 16.9265 16.1666 16.2188V4.33344V4.12634L16.0202 3.9799L12.6871 0.646463Z" fill="white" stroke="currentColor"/>
+<path d="M12.3335 1L15.6669 4.33344H13.1147C12.6832 4.33344 12.3335 3.98375 12.3335 3.55219V1Z" fill="currentColor"/>
+<path d="M16.2188 8.26343H1.78125C1.07364 8.26343 0.5 8.83706 0.5 9.54468V13.9822C0.5 14.6898 1.07364 15.2634 1.78125 15.2634H16.2188C16.9264 15.2634 17.5 14.6898 17.5 13.9822V9.54468C17.5 8.83706 16.9264 8.26343 16.2188 8.26343Z" fill="white" stroke="currentColor"/>
+<path d="M8.00338 4.22314H3.979C3.80641 4.22314 3.6665 4.36306 3.6665 4.53564V4.57721C3.6665 4.7498 3.80641 4.88971 3.979 4.88971H8.00338C8.17597 4.88971 8.31588 4.7498 8.31588 4.57721V4.53564C8.31588 4.36306 8.17597 4.22314 8.00338 4.22314Z" fill="currentColor"/>
+<path d="M11.0206 5.49316H3.979C3.80641 5.49316 3.6665 5.63308 3.6665 5.80566V5.84723C3.6665 6.01982 3.80641 6.15973 3.979 6.15973H11.0206C11.1932 6.15973 11.3331 6.01982 11.3331 5.84723V5.80566C11.3331 5.63308 11.1932 5.49316 11.0206 5.49316Z" fill="currentColor"/>
+<path d="M11.0206 6.76343H3.979C3.80641 6.76343 3.6665 6.90334 3.6665 7.07593V7.11749C3.6665 7.29008 3.80641 7.42999 3.979 7.42999H11.0206C11.1932 7.42999 11.3331 7.29008 11.3331 7.11749V7.07593C11.3331 6.90334 11.1932 6.76343 11.0206 6.76343Z" fill="currentColor"/>
+<path d="M11.7289 10.8835C11.6529 10.7435 11.5429 10.6375 11.3989 10.5655C11.2589 10.4895 11.0929 10.4515 10.9009 10.4515C10.5689 10.4515 10.3029 10.5615 10.1029 10.7815C9.90291 10.9975 9.80291 11.2875 9.80291 11.6515C9.80291 12.0395 9.90691 12.3435 10.1149 12.5635C10.3269 12.7795 10.6169 12.8875 10.9849 12.8875C11.2369 12.8875 11.4489 12.8235 11.6209 12.6955C11.7969 12.5675 11.9249 12.3835 12.0049 12.1435H10.7029V11.3875H12.9349V12.3415C12.8589 12.5975 12.7289 12.8355 12.5449 13.0555C12.3649 13.2755 12.1349 13.4535 11.8549 13.5895C11.5749 13.7255 11.2589 13.7935 10.9069 13.7935C10.4909 13.7935 10.1189 13.7035 9.79091 13.5235C9.46691 13.3395 9.21291 13.0855 9.02891 12.7615C8.84891 12.4375 8.75891 12.0675 8.75891 11.6515C8.75891 11.2355 8.84891 10.8655 9.02891 10.5415C9.21291 10.2135 9.46691 9.95948 9.79091 9.77948C10.1149 9.59548 10.4849 9.50348 10.9009 9.50348C11.4049 9.50348 11.8289 9.62548 12.1729 9.86948C12.5209 10.1135 12.7509 10.4515 12.8629 10.8835H11.7289Z" fill="currentColor"/>
+<path d="M6.76546 13.8055C6.45746 13.8055 6.18146 13.7555 5.93746 13.6555C5.69346 13.5555 5.49746 13.4075 5.34946 13.2115C5.20546 13.0155 5.12946 12.7795 5.12146 12.5035H6.21346C6.22946 12.6595 6.28346 12.7795 6.37546 12.8635C6.46746 12.9435 6.58746 12.9835 6.73546 12.9835C6.88746 12.9835 7.00746 12.9495 7.09546 12.8815C7.18346 12.8095 7.22746 12.7115 7.22746 12.5875C7.22746 12.4835 7.19146 12.3975 7.11946 12.3295C7.05146 12.2615 6.96546 12.2055 6.86146 12.1615C6.76146 12.1175 6.61746 12.0675 6.42946 12.0115C6.15746 11.9275 5.93546 11.8435 5.76346 11.7595C5.59146 11.6755 5.44346 11.5515 5.31946 11.3875C5.19546 11.2235 5.13346 11.0095 5.13346 10.7455C5.13346 10.3535 5.27546 10.0475 5.55946 9.82746C5.84346 9.60346 6.21346 9.49146 6.66946 9.49146C7.13346 9.49146 7.50746 9.60346 7.79146 9.82746C8.07546 10.0475 8.22746 10.3555 8.24746 10.7515H7.13746C7.12946 10.6155 7.07946 10.5095 6.98746 10.4335C6.89546 10.3535 6.77746 10.3135 6.63346 10.3135C6.50946 10.3135 6.40946 10.3475 6.33346 10.4155C6.25746 10.4795 6.21946 10.5735 6.21946 10.6975C6.21946 10.8335 6.28346 10.9395 6.41146 11.0155C6.53946 11.0915 6.73946 11.1735 7.01146 11.2615C7.28346 11.3535 7.50346 11.4415 7.67146 11.5255C7.84346 11.6095 7.99146 11.7315 8.11546 11.8915C8.23946 12.0515 8.30146 12.2575 8.30146 12.5095C8.30146 12.7495 8.23946 12.9675 8.11546 13.1635C7.99546 13.3595 7.81946 13.5155 7.58746 13.6315C7.35546 13.7475 7.08146 13.8055 6.76546 13.8055Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/variable.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.9799 1.25165L14.98 1.25157C14.7152 0.961146 14.2958 0.772921 13.667 0.762264L13.6603 0.762149L13.6603 0.762103C12.7479 0.734285 11.9951 0.96121 11.384 1.41819C10.8289 1.83329 10.3593 2.46205 10.001 3.33573C10.1534 3.30977 10.311 3.29489 10.4753 3.29489C10.7848 3.29489 11.4004 3.3316 11.7695 3.80919L11.7739 3.81488L11.7738 3.81491C12.0596 4.19596 12.0442 4.69533 11.9167 5.14881L11.9148 5.1555L11.9148 5.15548C11.8487 5.3786 11.679 5.72644 11.4767 6.10052C11.2662 6.48991 10.996 6.95156 10.702 7.42063L10.6993 7.42506L10.6992 7.42504C10.3347 7.99341 10.0495 8.41568 9.83621 8.69902C9.73082 8.839 9.63297 8.95859 9.54476 9.04759C9.50132 9.09141 9.44774 9.14065 9.3864 9.18221C9.33933 9.2141 9.21625 9.29216 9.04751 9.29216H9.03969L9.03189 9.29192C8.86024 9.28655 8.74138 9.20288 8.68565 9.15592C8.62506 9.10486 8.58139 9.04856 8.55261 9.00722C8.49422 8.92335 8.44439 8.82359 8.40245 8.72934C8.31617 8.5355 8.22417 8.27484 8.13119 7.98249C7.94369 7.393 7.73346 6.61448 7.53672 5.84142C7.33946 5.06626 7.15363 4.28817 7.01499 3.6962C6.94564 3.40006 6.88802 3.15019 6.84663 2.97037L6.79742 2.75665C6.78998 2.72446 6.7853 2.7045 6.78273 2.69357C6.78085 2.68557 6.78011 2.68241 6.78026 2.68285C6.57968 1.95823 6.4571 1.54402 6.26635 1.28514C6.18505 1.17481 6.0959 1.10218 5.9786 1.05184C5.85381 0.998295 5.67159 0.959272 5.39186 0.959272C5.26627 0.959272 5.03076 1.0232 4.67253 1.206C4.32974 1.38093 3.92898 1.63585 3.49123 1.94799C2.6167 2.57158 1.63791 3.39214 0.748646 4.17102L0.746028 4.17331L0.74602 4.1733L0.529348 4.36043L0.770345 4.6639C1.04584 4.45958 1.33341 4.25452 1.60844 4.09759C1.8837 3.94053 2.21683 3.7892 2.55433 3.78725C3.08046 3.77664 3.42074 4.18183 3.64468 4.58689C3.88424 5.02023 4.10594 5.65616 4.33533 6.49304C4.78297 8.11185 5.33179 9.86026 5.93252 11.1966C6.23406 11.8673 6.53701 12.4074 6.83047 12.772C7.13988 13.1564 7.35241 13.2402 7.4597 13.2402C8.04015 13.2402 8.72417 12.9975 9.55755 12.3699C10.3917 11.7418 11.3418 10.753 12.4423 9.32413L14.9799 1.25165ZM14.9799 1.25165L14.9874 1.25952M14.9799 1.25165L14.9874 1.25952M14.9874 1.25952C15.338 1.62763 15.549 2.31697 15.4903 3.3985L15.4902 3.3985M14.9874 1.25952L15.4902 3.3985M15.4902 3.3985L15.4899 3.40533M15.4902 3.3985L15.4899 3.40533M15.4899 3.40533C15.4633 4.06042 15.2114 4.88481 14.6981 5.88902M15.4899 3.40533L14.6981 5.88902M14.6981 5.88902C14.1875 6.88796 13.4345 8.03371 12.4424 9.32404L14.6981 5.88902Z" fill="white" stroke="currentColor"/>
-</svg>
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9799 1.25165L14.98 1.25157C14.7152 0.961146 14.2958 0.772921 13.667 0.762264L13.6603 0.762149L13.6603 0.762103C12.7479 0.734285 11.9951 0.96121 11.384 1.41819C10.8289 1.83329 10.3593 2.46205 10.001 3.33573C10.1534 3.30977 10.311 3.29489 10.4753 3.29489C10.7848 3.29489 11.4004 3.3316 11.7695 3.80919L11.7739 3.81488L11.7738 3.81491C12.0596 4.19596 12.0442 4.69533 11.9167 5.14881L11.9148 5.1555L11.9148 5.15548C11.8487 5.3786 11.679 5.72644 11.4767 6.10052C11.2662 6.48991 10.996 6.95156 10.702 7.42063L10.6993 7.42506L10.6992 7.42504C10.3347 7.99341 10.0495 8.41568 9.83621 8.69902C9.73082 8.839 9.63297 8.95859 9.54476 9.04759C9.50132 9.09141 9.44774 9.14065 9.3864 9.18221C9.33933 9.2141 9.21625 9.29216 9.04751 9.29216H9.03969L9.03189 9.29192C8.86024 9.28655 8.74138 9.20288 8.68565 9.15592C8.62506 9.10486 8.58139 9.04856 8.55261 9.00722C8.49422 8.92335 8.44439 8.82359 8.40245 8.72934C8.31617 8.5355 8.22417 8.27484 8.13119 7.98249C7.94369 7.393 7.73346 6.61448 7.53672 5.84142C7.33946 5.06626 7.15363 4.28817 7.01499 3.6962C6.94564 3.40006 6.88802 3.15019 6.84663 2.97037L6.79742 2.75665C6.78998 2.72446 6.7853 2.7045 6.78273 2.69357C6.78085 2.68557 6.78011 2.68241 6.78026 2.68285C6.57968 1.95823 6.4571 1.54402 6.26635 1.28514C6.18505 1.17481 6.0959 1.10218 5.9786 1.05184C5.85381 0.998295 5.67159 0.959272 5.39186 0.959272C5.26627 0.959272 5.03076 1.0232 4.67253 1.206C4.32974 1.38093 3.92898 1.63585 3.49123 1.94799C2.6167 2.57158 1.63791 3.39214 0.748646 4.17102L0.746028 4.17331L0.74602 4.1733L0.529348 4.36043L0.770345 4.6639C1.04584 4.45958 1.33341 4.25452 1.60844 4.09759C1.8837 3.94053 2.21683 3.7892 2.55433 3.78725C3.08046 3.77664 3.42074 4.18183 3.64468 4.58689C3.88424 5.02023 4.10594 5.65616 4.33533 6.49304C4.78297 8.11185 5.33179 9.86026 5.93252 11.1966C6.23406 11.8673 6.53701 12.4074 6.83047 12.772C7.13988 13.1564 7.35241 13.2402 7.4597 13.2402C8.04015 13.2402 8.72417 12.9975 9.55755 12.3699C10.3917 11.7418 11.3418 10.753 12.4423 9.32413L14.9799 1.25165ZM14.9799 1.25165L14.9874 1.25952M14.9799 1.25165L14.9874 1.25952M14.9874 1.25952C15.338 1.62763 15.549 2.31697 15.4903 3.3985L15.4902 3.3985M14.9874 1.25952L15.4902 3.3985M15.4902 3.3985L15.4899 3.40533M15.4902 3.3985L15.4899 3.40533M15.4899 3.40533C15.4633 4.06042 15.2114 4.88481 14.6981 5.88902M15.4899 3.40533L14.6981 5.88902M14.6981 5.88902C14.1875 6.88796 13.4345 8.03371 12.4424 9.32404L14.6981 5.88902Z" fill="white" stroke="currentColor"/>
+</svg>

package/src/assets/icons/warning_status_icon.svg

@@ -2,7 +2,7 @@
 <g clip-path="url(#clip0_5540_15040)">
 <path d="M16.6261 16.6281C20.2867 12.9675 20.2867 7.03249 16.6261 3.37187C12.9655 -0.288738 7.03044 -0.288737 3.36982 3.37187C-0.290788 7.03249 -0.290788 12.9675 3.36982 16.6281C7.03044 20.2887 12.9655 20.2887 16.6261 16.6281Z" fill="#FDA24C"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2399 11.5904C18.5728 15.4935 15.4933 18.5729 11.5903 19.24L6.54334 14.1931C5.33564 13.1964 4.56592 11.6881 4.56592 9.99999C4.56592 6.99885 6.99873 4.56604 9.99986 4.56604C11.688 4.56604 13.1963 5.33581 14.193 6.54346L19.2399 11.5904Z" fill="#E2750F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.45635 10.3226L9.00393 11.7438C9.22967 11.9516 9.57908 11.9406 9.79139 11.7217L12.5523 9.07827C12.7769 8.86233 12.7837 8.50506 12.5676 8.28038C12.3516 8.05604 11.9946 8.04901 11.77 8.26495L9.3785 10.5547L8.22088 9.49166C7.99154 9.28065 7.63424 9.29545 7.42311 9.52502C7.21201 9.75436 7.22689 10.1114 7.45635 10.3226ZM9.99986 4.56604C13.001 4.56604 15.4338 6.99885 15.4338 9.99999C15.4338 13.0011 13.001 15.4339 9.99986 15.4339C6.99873 15.4339 4.56592 13.0011 4.56592 9.99999C4.56592 6.99885 6.99873 4.56604 9.99986 4.56604Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.8914 4.56592C12.8326 4.56592 15.2169 6.99873 15.2169 9.99986C15.2169 13.001 12.8326 15.4338 9.8914 15.4338C6.95017 15.4338 4.56592 13.001 4.56592 9.99986C4.56592 6.99873 6.95017 4.56592 9.8914 4.56592ZM9.89132 11.2679C9.55057 11.2679 9.27336 11.5451 9.27336 11.8858C9.30442 12.7045 10.4784 12.7043 10.5093 11.8858C10.5093 11.5451 10.2321 11.2679 9.89132 11.2679ZM9.27371 7.78514C9.58049 7.40454 10.2023 7.40472 10.509 7.78513C10.6626 7.96803 10.7271 8.20782 10.6859 8.44299L10.312 10.5793C10.225 11.0472 9.55772 11.0473 9.47059 10.5793L9.09677 8.44299C9.05559 8.20781 9.12009 7.96803 9.27371 7.78514Z" fill="white"/>
 </g>
 <defs>
 <clipPath id="clip0_5540_15040">

package/src/assets/icons/web_service_icon.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.845864 11.5813C0.304532 10.504 0 9.28691 0 7.99998C0 6.71305 0.304532 5.49599 0.845864 4.41866C2.16053 1.79893 4.87199 0 7.99998 0C11.128 0 13.8394 1.79893 15.1541 4.41866C15.6954 5.49599 16 6.71305 16 7.99998C16 8.74122 15.8989 9.45928 15.7098 10.1408C15.5178 9.64596 15.2368 9.19545 14.8865 8.8089C14.9174 8.54352 14.9333 8.27358 14.9333 7.99998C14.9333 7.06079 14.7461 6.16479 14.4074 5.34772C13.5365 5.68532 12.5098 5.95626 11.3765 6.13866C11.4167 6.54759 11.4442 6.96932 11.4575 7.40092C11.0893 7.42113 10.7334 7.48763 10.3956 7.59469C10.386 7.14382 10.3603 6.70393 10.32 6.27892C9.57811 6.35786 8.80052 6.39999 7.99998 6.39999C7.19945 6.39999 6.42185 6.35786 5.67999 6.27892C5.62772 6.83039 5.59999 7.40692 5.59999 7.99998C5.59999 8.59305 5.62772 9.16958 5.67999 9.72105C6.40301 9.64412 7.15998 9.60215 7.93903 9.60006C7.75305 9.93264 7.60993 10.2924 7.51716 10.672C6.93298 10.6849 6.36403 10.7212 5.81545 10.7781C6.01065 11.9786 6.33066 13.0128 6.73812 13.7733C6.94452 14.1589 7.17065 14.4688 7.41812 14.6789C7.60265 14.8357 7.79465 14.9333 7.99998 14.9333C8.20532 14.9333 8.39732 14.8357 8.58185 14.6789L8.58903 14.6728C9.02045 15.1233 9.54884 15.4802 10.1407 15.7099C9.4592 15.8989 8.74129 16 7.99998 16C4.87199 16 2.16053 14.201 0.845864 11.5813ZM1.59253 5.34772C1.25386 6.16479 1.06666 7.06079 1.06666 7.99998C1.06666 8.93918 1.25386 9.83518 1.59253 10.6522C2.46346 10.3146 3.49013 10.0437 4.62346 9.86131C4.56479 9.26505 4.53332 8.64158 4.53332 7.99998C4.53332 7.35839 4.56479 6.73492 4.62346 6.13866C3.49013 5.95626 2.46346 5.68532 1.59253 5.34772ZM13.9205 4.39252C13.0378 2.94773 11.6416 1.8512 9.98665 1.35626C10.0608 1.47146 10.1328 1.5936 10.2021 1.72267C10.657 2.57226 11.0208 3.73279 11.2394 5.08159C12.2357 4.91999 13.1429 4.68479 13.9205 4.39252ZM6.01332 1.35626C4.35839 1.8512 2.96213 2.94773 2.07946 4.39252C2.85706 4.68532 3.76426 4.91999 4.76053 5.08159C4.97919 3.73279 5.34292 2.57226 5.79786 1.72267C5.86719 1.5936 5.93919 1.47146 6.01332 1.35626ZM2.07946 11.6074C2.96213 13.0522 4.35839 14.1488 6.01332 14.6437C5.93919 14.5285 5.86719 14.4064 5.79786 14.2773C5.34292 13.4277 4.97919 12.2672 4.76053 10.9184C3.76426 11.08 2.85706 11.3152 2.07946 11.6074ZM7.99998 1.06666C7.79465 1.06666 7.60265 1.16426 7.41812 1.32106C7.17065 1.5312 6.94452 1.84106 6.73812 2.22666C6.33066 2.9872 6.01065 4.02133 5.81545 5.22186C6.51412 5.29492 7.24585 5.33332 7.99998 5.33332C8.75412 5.33332 9.48585 5.29439 10.1845 5.22186C9.98931 4.02133 9.66931 2.9872 9.26185 2.22666C9.05545 1.84106 8.82932 1.5312 8.58185 1.32106C8.39732 1.16426 8.20532 1.06666 7.99998 1.06666ZM15.3852 11.7118L14.6747 11.839C14.6625 12.1002 14.6178 12.3527 14.5446 12.5925L15.1688 12.9585L14.5112 14.1149L13.8862 13.7485C13.7155 13.9359 13.5218 14.1016 13.3095 14.2404L13.5563 14.9286L12.3204 15.3853L12.0737 14.6971C11.9504 14.7129 11.8246 14.7211 11.6971 14.7211C11.5696 14.7211 11.4438 14.7129 11.3205 14.6971L11.0738 15.3853L9.83792 14.9286L10.0847 14.2404C9.8724 14.1016 9.6787 13.9359 9.50803 13.7485L8.88303 14.1149L8.22538 12.9585L8.84963 12.5925C8.77643 12.3527 8.73174 12.1002 8.71954 11.839L8.00897 11.7118L8.23727 10.3967L8.94724 10.5238C9.04546 10.2861 9.1728 10.064 9.32441 9.86175L8.86061 9.30034L9.86812 8.44189L10.3315 9.00283C10.5528 8.88684 10.7902 8.79826 11.0396 8.74126V8.00904H12.3546V8.74126C12.6039 8.79824 12.8414 8.88684 13.0627 9.00283L13.5261 8.44187L14.5336 9.30031L14.0698 9.86172C14.2214 10.064 14.3487 10.2861 14.447 10.5238L15.1569 10.3967L15.3852 11.7118ZM10.3235 11.6942C10.3235 12.4645 10.9385 13.0889 11.6971 13.0889C12.4557 13.0889 13.0707 12.4645 13.0707 11.6942C13.0707 10.9238 12.4557 10.2994 11.6971 10.2994C10.9385 10.2994 10.3235 10.9238 10.3235 11.6942Z" fill="currentColor"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.845864 11.5813C0.304532 10.504 0 9.28691 0 7.99998C0 6.71305 0.304532 5.49599 0.845864 4.41866C2.16053 1.79893 4.87199 0 7.99998 0C11.128 0 13.8394 1.79893 15.1541 4.41866C15.6954 5.49599 16 6.71305 16 7.99998C16 8.74122 15.8989 9.45928 15.7098 10.1408C15.5178 9.64596 15.2368 9.19545 14.8865 8.8089C14.9174 8.54352 14.9333 8.27358 14.9333 7.99998C14.9333 7.06079 14.7461 6.16479 14.4074 5.34772C13.5365 5.68532 12.5098 5.95626 11.3765 6.13866C11.4167 6.54759 11.4442 6.96932 11.4575 7.40092C11.0893 7.42113 10.7334 7.48763 10.3956 7.59469C10.386 7.14382 10.3603 6.70393 10.32 6.27892C9.57811 6.35786 8.80052 6.39999 7.99998 6.39999C7.19945 6.39999 6.42185 6.35786 5.67999 6.27892C5.62772 6.83039 5.59999 7.40692 5.59999 7.99998C5.59999 8.59305 5.62772 9.16958 5.67999 9.72105C6.40301 9.64412 7.15998 9.60215 7.93903 9.60006C7.75305 9.93264 7.60993 10.2924 7.51716 10.672C6.93298 10.6849 6.36403 10.7212 5.81545 10.7781C6.01065 11.9786 6.33066 13.0128 6.73812 13.7733C6.94452 14.1589 7.17065 14.4688 7.41812 14.6789C7.60265 14.8357 7.79465 14.9333 7.99998 14.9333C8.20532 14.9333 8.39732 14.8357 8.58185 14.6789L8.58903 14.6728C9.02045 15.1233 9.54884 15.4802 10.1407 15.7099C9.4592 15.8989 8.74129 16 7.99998 16C4.87199 16 2.16053 14.201 0.845864 11.5813ZM1.59253 5.34772C1.25386 6.16479 1.06666 7.06079 1.06666 7.99998C1.06666 8.93918 1.25386 9.83518 1.59253 10.6522C2.46346 10.3146 3.49013 10.0437 4.62346 9.86131C4.56479 9.26505 4.53332 8.64158 4.53332 7.99998C4.53332 7.35839 4.56479 6.73492 4.62346 6.13866C3.49013 5.95626 2.46346 5.68532 1.59253 5.34772ZM13.9205 4.39252C13.0378 2.94773 11.6416 1.8512 9.98665 1.35626C10.0608 1.47146 10.1328 1.5936 10.2021 1.72267C10.657 2.57226 11.0208 3.73279 11.2394 5.08159C12.2357 4.91999 13.1429 4.68479 13.9205 4.39252ZM6.01332 1.35626C4.35839 1.8512 2.96213 2.94773 2.07946 4.39252C2.85706 4.68532 3.76426 4.91999 4.76053 5.08159C4.97919 3.73279 5.34292 2.57226 5.79786 1.72267C5.86719 1.5936 5.93919 1.47146 6.01332 1.35626ZM2.07946 11.6074C2.96213 13.0522 4.35839 14.1488 6.01332 14.6437C5.93919 14.5285 5.86719 14.4064 5.79786 14.2773C5.34292 13.4277 4.97919 12.2672 4.76053 10.9184C3.76426 11.08 2.85706 11.3152 2.07946 11.6074ZM7.99998 1.06666C7.79465 1.06666 7.60265 1.16426 7.41812 1.32106C7.17065 1.5312 6.94452 1.84106 6.73812 2.22666C6.33066 2.9872 6.01065 4.02133 5.81545 5.22186C6.51412 5.29492 7.24585 5.33332 7.99998 5.33332C8.75412 5.33332 9.48585 5.29439 10.1845 5.22186C9.98931 4.02133 9.66931 2.9872 9.26185 2.22666C9.05545 1.84106 8.82932 1.5312 8.58185 1.32106C8.39732 1.16426 8.20532 1.06666 7.99998 1.06666ZM15.3852 11.7118L14.6747 11.839C14.6625 12.1002 14.6178 12.3527 14.5446 12.5925L15.1688 12.9585L14.5112 14.1149L13.8862 13.7485C13.7155 13.9359 13.5218 14.1016 13.3095 14.2404L13.5563 14.9286L12.3204 15.3853L12.0737 14.6971C11.9504 14.7129 11.8246 14.7211 11.6971 14.7211C11.5696 14.7211 11.4438 14.7129 11.3205 14.6971L11.0738 15.3853L9.83792 14.9286L10.0847 14.2404C9.8724 14.1016 9.6787 13.9359 9.50803 13.7485L8.88303 14.1149L8.22538 12.9585L8.84963 12.5925C8.77643 12.3527 8.73174 12.1002 8.71954 11.839L8.00897 11.7118L8.23727 10.3967L8.94724 10.5238C9.04546 10.2861 9.1728 10.064 9.32441 9.86175L8.86061 9.30034L9.86812 8.44189L10.3315 9.00283C10.5528 8.88684 10.7902 8.79826 11.0396 8.74126V8.00904H12.3546V8.74126C12.6039 8.79824 12.8414 8.88684 13.0627 9.00283L13.5261 8.44187L14.5336 9.30031L14.0698 9.86172C14.2214 10.064 14.3487 10.2861 14.447 10.5238L15.1569 10.3967L15.3852 11.7118ZM10.3235 11.6942C10.3235 12.4645 10.9385 13.0889 11.6971 13.0889C12.4557 13.0889 13.0707 12.4645 13.0707 11.6942C13.0707 10.9238 12.4557 10.2994 11.6971 10.2994C10.9385 10.2994 10.3235 10.9238 10.3235 11.6942Z" fill="currentColor"/>
+</svg>

package/src/components/Button/Button.scss

@@ -153,3 +153,15 @@
     color: transparent;
   }
 }
+.ff-button-icon {
+  cursor: pointer;
+}
+
+.ff-button-choose-file-text {
+  color: var(--dotted-border-color);
+}
+
+.ff-button-choose-file {
+  display: flex;
+  justify-content: space-between;
+}

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import './Button.scss';
 import '../../assets/styles/_colors.scss';
 import Icon from '../Icon';
@@ -6,6 +6,9 @@ import { ButtonProps } from './types';
 import classNames from 'classnames';
 import Typography from '../Typography';
 
+const areEqual = (prevProps: ButtonProps, nextProps: ButtonProps) =>
+  prevProps.selectedFile?.name === nextProps.selectedFile?.name;
+
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
@@ -15,28 +18,41 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onClick,
       label,
       disabled = false,
-      children = null,
       type = 'button',
       className = '',
       style = {},
       iconName,
       iconPosition = 'left',
+      isChooseFile = false,
+      buttonWidth = 'auto',
+      handleCloseIcon,
+      selectedFile,
       ...props
     }: ButtonProps,
     ref
   ) => {
     const renderIcon = () =>
       iconName && (
-        <div>
+        <div
+          onClick={(e) => {
+            if (iconName === 'close') {
+              e.stopPropagation();
+              handleCloseIcon?.();
+            }
+          }}
+        >
           <Icon
-            height={8}
-            width={8}
+            height={isChooseFile ? 14 : 8}
+            width={isChooseFile ? 14 : 8}
             color={
-              variant === 'primary'
+              iconName === 'close'
+                ? 'var(--ff-delete-button-attachment)'
+                : variant === 'primary'
                 ? `var(--primary-icon-color)`
                 : `var(--secondary-icon-color)`
             }
             name={iconName}
+            className="ff-button-icon"
           />
         </div>
       );
@@ -49,9 +65,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           `ff-button--${size}`,
           `ff-button--${variant}`,
           `${className}`,
-          'button'
+          { 'ff-button-choose-file': isChooseFile },
+          { 'ff-button-choose-file-text': selectedFile }
         )}
-        style={{ backgroundColor, ...style }}
+        style={{ backgroundColor, ...style, width: buttonWidth }}
         onClick={onClick}
         disabled={disabled}
         {...props}
@@ -60,14 +77,15 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <Typography
           fontSize={10}
           fontWeight="semi-bold"
-          className={classNames(`ff-button-${variant}--text`)}
+          className={classNames(`ff-button-${variant}--text`, {
+            'ff-button-choose-file-text': selectedFile,
+          })}
         >
           {label}
         </Typography>
         {iconPosition === 'right' && renderIcon()}
-        {children}
       </button>
     );
   }
 );
-export default Button;
+export default memo(Button, areEqual);

package/src/components/Button/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { DynamicObj } from '../CreateVariable/types';
 
 export interface ButtonProps {
   /**
@@ -66,4 +67,24 @@ export interface ButtonProps {
    * form to accept form id in string
    */
   form?: string;
+
+  /**
+   * Is the Type ChooseFile for the button
+   */
+  isChooseFile?: boolean;
+
+  /**
+   * Custom Width for the button
+   */
+  buttonWidth?: string;
+
+  /**
+   * selectedfile object will be send.
+   */
+  selectedFile?: File | DynamicObj | null;
+
+  /**
+   * handleCloseIcon function will set to the initial state .
+   */
+  handleCloseIcon?: () => void;
 }

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss

@@ -18,14 +18,15 @@
 
   .ff-dashboard-donut-chart-svg-container {
     text-align: center;
+
     svg {
       display: block;
+
       text:nth-of-type(1) {
-        @extend .font2Xl;
         font-weight: 600;
       }
+
       text:nth-of-type(2) {
-        @extend .fontMd;
         font-weight: 500;
       }
     }
@@ -40,28 +41,95 @@
     }
   }
 
+  @mixin ff-legend-item-styles {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
+
+    .ff-legend-value {
+      white-space: nowrap;
+    }
+  }
+
+  @mixin ff-side-legend-styles {
+    flex-direction: column;
+    flex-wrap: wrap;
+    height: 200px;
+    width: auto;
+    justify-content: center;
+
+    .ff-legend-item {
+      flex: 0 0 auto !important;
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
   .ff-legend-container {
-    display: grid;
-    grid-auto-rows: 1fr;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: var(--donut-legend-gap, 5px); // Dynamic gap support with fallback
+
+    .ff-legend-item {
+      @include ff-legend-item-styles;
+    }
+
+    &.ff-count-2,
+    &.ff-count-4 {
+      .ff-legend-item {
+        flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));
+      }
+    }
 
-    &.ff-number-legend {
-      grid-template-columns: repeat(3, 100px);
+    &.ff-count-5 {
+      .ff-legend-item:nth-child(-n + 3) {
+        flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
+      }
 
-      &.ff-side-legend {
-        grid-template-columns: repeat(2, 100px);
+      .ff-legend-item:nth-child(n + 4) {
+        flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));
       }
+    }
+
+    &.ff-count-3,
+    &.ff-count-6,
+    &.ff-count-more {
       .ff-legend-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+        flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
+      }
+    }
+
+    &.ff-side-legend {
+      @include ff-side-legend-styles;
+
+      &.ff-count-2,
+      &.ff-count-4 {
+        .ff-legend-item {
+          height: calc(50% - var(--donut-legend-gap, 5px));
+        }
+      }
+
+      &.ff-count-3,
+      &.ff-count-5,
+      &.ff-count-6,
+      &.ff-count-more {
+        .ff-legend-item {
+          height: calc(33.33% - var(--donut-legend-gap, 5px));
+        }
       }
     }
 
     &.ff-pill-legend {
-      grid-template-columns: repeat(2, 130px);
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--donut-legend-gap, 5px);
 
       .ff-legend-item {
         display: flex;
+        flex-direction: row;
         align-items: center;
 
         .ff-legend-capsule {
@@ -80,22 +148,6 @@
         }
       }
     }
-
-    &.ff-memory-legend {
-      grid-template-columns: repeat(3, 100px);
-
-      &.ff-side-legend {
-        grid-template-columns: repeat(2, 100px);
-      }
-
-      .ff-legend-item {
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-      }
-    }
   }
 
   .ff-legend-table-wrapper {
@@ -112,9 +164,9 @@
     text-align: left;
 
     .ff-legend-table-thead {
-      position: static; 
+      position: static;
       top: auto;
-    } 
+    }
     .ff-table-header {
       @extend .fontXs;
       font-weight: bold;
@@ -160,6 +212,7 @@
         gap: 5px;
         color: var(--input-hover-border-color);
       }
+
       .ff-legend-count {
         text-align: right;
       }

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx

@@ -18,6 +18,7 @@ export const Default: Story = {
     radius: 70,
     lineWidth: 15,
     tableWidth: 500,
+    tableHeight: 190,
     legendDetailsType: 'Scripts',
     isLegendDetails: true,
     statusValues: [
@@ -25,6 +26,8 @@ export const Default: Story = {
       { key: 'failed', value: 20, color: 'var(--status-rejected-text-color)' },
       { key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
       { key: 'skipped', value: 10, color: 'var(--status-button-text-skipped)' },
+      { key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
+      { key: 'skipped', value: 10, color: 'var(--status-button-text-skipped)' },
     ],
     gapAngle: 0,
     legendType: 'numberLegend',

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx

@@ -40,6 +40,7 @@ const colorMapping = [
 const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
   radius = 60,
   tableWidth,
+  tableHeight = 190,
   lineWidth = 15,
   statusValues = [],
   gapAngle = 0,
@@ -58,6 +59,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
   legendKeyFontSize = 12,
   labelYoffSet = -5,
   subLabelYoffSet = 20,
+  onSelectedStatus = (_value) => {},
 }) => {
   const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
@@ -142,6 +144,10 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
     });
   };
 
+  const handleSelectStatus = (value: string) => {
+    onSelectedStatus(value);
+  };
+
   const SVG_PADDING = 3;
   const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
   const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING * 2;
@@ -172,6 +178,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
           onMouseLeave={handleMouseLeave}
           strokeOpacity={0.8}
           onMouseMove={handleMouseMove}
+          onClick={() => handleSelectStatus(chartItem?.key)}
         />
       </g>
     );
@@ -188,7 +195,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
       >
         <Typography fontSize={12}>
           {hoveredItemIndex !== null &&
-            `${nonZeroValues[hoveredItemIndex]?.key}:`}
+            `${nonZeroValues[hoveredItemIndex]?.key} : `}
         </Typography>
         <Typography fontSize={12}>
           {hoveredItemIndex !== null &&
@@ -205,15 +212,25 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
     legendType: LegendType,
     legendPosition: string
   ) => {
+    const legendCount = legendData.length;
+    const legendCountClass =
+      legendCount > 6 ? 'ff-count-more' : `ff-count-${legendCount}`;
+    const isSideLegend =
+      legendPosition === 'left' || legendPosition === 'right';
+
     switch (legendType) {
-      case 'numberLegend':
+      case 'numberLegend': {
         return (
           <div
-            className={classNames('ff-legend-container ff-number-legend', {
-              'ff-side-legend':
-                legendPosition === 'left' || legendPosition === 'right',
-            })}
-            style={{ gap: `${legendGap}px` }}
+            className={classNames(
+              'ff-legend-container',
+              'ff-number-legend',
+              legendCountClass,
+              { 'ff-side-legend': isSideLegend }
+            )}
+            style={
+              { '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
+            }
           >
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
@@ -240,12 +257,14 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             ))}
           </div>
         );
-
+      }
       case 'pillLegend':
         return (
           <div
             className="ff-legend-container ff-pill-legend"
-            style={{ gap: `${legendGap}px` }}
+            style={
+              { '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
+            }
           >
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
@@ -273,11 +292,15 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
       case 'memoryLegend':
         return (
           <div
-            className={classNames('ff-legend-container ff-memory-legend', {
-              'ff-side-legend':
-                legendPosition === 'left' || legendPosition === 'right',
-            })}
-            style={{ gap: `${legendGap}px` }}
+            className={classNames(
+              'ff-legend-container',
+              'ff-memory-legend',
+              legendCountClass,
+              { 'ff-side-legend': isSideLegend }
+            )}
+            style={
+              { '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
+            }
           >
             {legendData.map((item, index) => (
               <React.Fragment key={index}>
@@ -313,8 +336,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
       case 'tableLegend':
         return (
           <div className="ff-legend-table-wrapper">
-            <table className="ff-legend-table">
-              <thead className='ff-legend-table-thead'>
+            <table className="ff-legend-table" style={{ height: tableHeight }}>
+              <thead className="ff-legend-table-thead">
                 <tr>
                   <th className="ff-table-header" style={{ width: tableWidth }}>
                     Name

package/src/components/Charts/DashboardDonutChart/types.ts

@@ -51,8 +51,10 @@ export type DashboardDonutChartProps = {
   chartGap?: number;
   legendGap?: number;
   tableWidth?: number;
+  tableHeight?:number;
   legendValueFontSize?: number;
   legendKeyFontSize?: number;
   labelYoffSet?: number;
   subLabelYoffSet?: number;
+  onSelectedStatus?: (_value: string) => void;
 };

package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss

@@ -19,7 +19,6 @@
     font-weight: 600;
   }
   .ff-center-text {
-    @extend .fontSm;
     color: var(--text-color);
     font-weight: 400;
   }

package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx

@@ -82,7 +82,6 @@ export const PillLegend: Story = {
     radius: 50,
     lineWidth: 4,
     labelHeading: '00 module',
-    fontSize: 16,
     barValues: [
       {
         value: 10,
@@ -112,5 +111,7 @@ export const PillLegend: Story = {
     lineCap: 'round',
     legendType: 'pillLegend',
     isLegendDetails: true,
+    labelFontSize: 12,
+    subLabelFontSize: 8
   },
 };