pixel-react 1.9.0 → 1.9.2

package/src/assets/icons/python.svg

@@ -0,0 +1,19 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_25_22761)">
+<path d="M16.2471 0.777605C14.942 0.783668 13.6957 0.89498 12.5991 1.08904C9.36852 1.65979 8.78195 2.85436 8.78195 5.05742V7.96698H16.4161V8.93679H8.78195H5.91689C3.6982 8.93679 1.75539 10.2704 1.14777 12.8073C0.446829 15.7152 0.415766 17.5298 1.14777 20.5661C1.69045 22.8262 2.98639 24.4365 5.20508 24.4365H7.82989V20.9486C7.82989 18.4288 10.0101 16.2062 12.5991 16.2062H20.2244C22.347 16.2062 24.0415 14.4585 24.0415 12.3268V5.05742C24.0415 2.98854 22.2961 1.43436 20.2244 1.08904C18.913 0.87073 17.5522 0.771543 16.2471 0.777605ZM12.1186 3.11773C12.9071 3.11773 13.5511 3.77223 13.5511 4.57692C13.5511 5.37879 12.9071 6.02723 12.1186 6.02723C11.3272 6.02723 10.6861 5.37879 10.6861 4.57692C10.6861 3.77217 11.3272 3.11773 12.1186 3.11773Z" fill="url(#paint0_linear_25_22761)"/>
+<path d="M24.9935 8.93762V12.3276C24.9935 14.9559 22.7653 17.1679 20.2244 17.1679H12.5991C10.5104 17.1679 8.78198 18.9556 8.78198 21.0473V28.3167C8.78198 30.3856 10.581 31.6025 12.5991 32.1961C15.0157 32.9066 17.333 33.0351 20.2244 32.1961C22.1464 31.6396 24.0415 30.5198 24.0415 28.3167V25.4071H16.4162V24.4373H24.0415H27.8586C30.0773 24.4373 30.9041 22.8897 31.6757 20.5668C32.4728 18.1754 32.4389 15.8758 31.6757 12.808C31.1274 10.5993 30.0802 8.9375 27.8586 8.9375H24.9935V8.93762ZM20.7049 27.3469C21.4963 27.3469 22.1374 27.9953 22.1374 28.7972C22.1374 29.6019 21.4963 30.2564 20.7049 30.2564C19.9164 30.2564 19.2724 29.6019 19.2724 28.7972C19.2724 27.9953 19.9163 27.3469 20.7049 27.3469Z" fill="url(#paint1_linear_25_22761)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_25_22761" x1="-0.137864" y1="1.68738" x2="17.4697" y2="16.703" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5A9FD4"/>
+<stop offset="1" stop-color="#306998"/>
+</linearGradient>
+<linearGradient id="paint1_linear_25_22761" x1="24.0947" y1="26.0377" x2="17.7804" y2="17.1827" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD43B"/>
+<stop offset="1" stop-color="#FFE873"/>
+</linearGradient>
+<clipPath id="clip0_25_22761">
+<rect width="32" height="32" fill="white" transform="translate(0.435547 0.777344)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/regenerate.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.984542 7.79772C0.984542 4.5833 3.52652 1.96829 6.65115 1.96829H13.6511V0.827784C13.6511 0.216723 14.3691 -0.0891503 14.7891 0.342913L16.789 2.51214C17.0497 2.7803 17.049 3.21442 16.789 3.48189L14.7891 5.65112C14.3691 6.08318 13.6511 5.77731 13.6511 5.16625V4.02574H6.65115C4.62917 4.02574 2.98452 5.71833 2.98452 7.79772C2.98452 8.36557 2.53719 8.82644 1.98453 8.82644C1.43187 8.82644 0.984542 8.36557 0.984542 7.79772ZM15.9844 7.45481C15.4317 7.45481 14.9844 7.91568 14.9844 8.48353C14.9844 10.5629 13.3397 12.2555 11.3178 12.2555H4.31784V11.115C4.31784 10.5039 3.59985 10.1981 3.17985 10.6301L1.17987 12.7994C0.919209 13.0675 0.919209 13.5016 1.17987 13.7691L3.17985 15.9383C3.59985 16.3704 4.31784 16.0645 4.31784 15.4535V14.313H11.3178C14.4424 14.313 16.9844 11.6979 16.9844 8.48353C16.9844 7.91568 16.537 7.45481 15.9844 7.45481Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/right_arrow_filled_icon.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect width="24" height="24" rx="12" fill="currentColor"/>
+    <path d="M17.8082 11.5331L13.4746 7.19942C13.3509 7.07571 13.186 7.00781 13.0102 7.00781C12.8342 7.00781 12.6694 7.07581 12.5457 7.19942L12.1522 7.59298C12.0286 7.71649 11.9605 7.88146 11.9605 8.05736C11.9605 8.23317 12.0286 8.4037 12.1522 8.52721L14.6804 11.061H6.64829C6.28614 11.061 6 11.3445 6 11.7067V12.2631C6 12.6253 6.28614 12.9374 6.64829 12.9374H14.7091L12.1523 15.4853C12.0287 15.609 11.9606 15.7695 11.9606 15.9454C11.9606 16.1211 12.0287 16.2839 12.1523 16.4075L12.5458 16.7998C12.6695 16.9235 12.8343 16.991 13.0103 16.991C13.1861 16.991 13.351 16.9227 13.4747 16.799L17.8083 12.4653C17.9323 12.3412 18.0005 12.1756 18 11.9995C18.0004 11.8228 17.9323 11.657 17.8082 11.5331Z" fill="white"/>
+</svg>

package/src/assets/icons/screenshot.svg

@@ -0,0 +1,7 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.68714 13.1255C3.48645 13.1255 2.41842 12.3567 2.03059 11.2122L2.00436 11.1259C1.91289 10.8228 1.87458 10.5679 1.87458 10.3129V5.19922L0.0550636 11.2729C-0.178951 12.1662 0.354311 13.0924 1.24903 13.3392L12.8466 16.4451C12.9914 16.4826 13.1361 16.5006 13.2787 16.5006C14.0256 16.5006 14.7081 16.0048 14.8994 15.2742L15.5751 13.1255H4.68714Z" fill="#ECEFF1"/>
+<path d="M17.9999 1.68754V10.3128C17.9999 11.2428 17.2424 12.0004 16.3124 12.0004H4.68705C4.61207 12.0004 4.53708 11.9928 4.46952 11.9853C3.68205 11.8879 3.06708 11.2428 3.00706 10.4478C2.99951 10.4028 2.99951 10.3577 2.99951 10.3128V1.68754C2.99951 0.757525 3.75704 0 4.68705 0H16.3124C17.2424 0 17.9999 0.757525 17.9999 1.68754Z" fill="#ECEFF1"/>
+<path d="M8.24978 3.75008C8.24978 4.57847 7.57822 5.25016 6.74984 5.25016C5.92131 5.25016 5.24976 4.57847 5.24976 3.75008C5.24976 2.92169 5.92131 2.25 6.74984 2.25C7.57822 2.25 8.24978 2.92169 8.24978 3.75008Z" fill="#FFC107"/>
+<path d="M18.0001 8.20645V10.3141C18.0001 11.2441 17.2426 12.0016 16.3126 12.0016H4.68726C4.61228 12.0016 4.53729 11.9941 4.46973 11.9865L12.1949 4.26145C12.705 3.75139 13.5449 3.75139 14.055 4.26145L18.0001 8.20645Z" fill="#388E3C"/>
+<path d="M13.5447 12.0016H4.68707C4.61208 12.0016 4.5371 11.994 4.46953 11.9865C3.68207 11.8891 3.06709 11.244 3.00708 10.449L6.56962 6.88634C7.07967 6.37643 7.91959 6.37643 8.42965 6.88634L13.5447 12.0016Z" fill="#4CAF50"/>
+</svg>

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/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.tsx

@@ -17,6 +17,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onClick,
       label,
       disabled = false,
+      children = null,
       type = 'button',
       className = '',
       style = {},
@@ -83,6 +84,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           {label}
         </Typography>
         {iconPosition === 'right' && renderIcon()}
+        {children}
       </button>
     );
   }

package/src/components/Comment/Comments.scss

@@ -5,7 +5,6 @@
 
   .comment-wrapper-one {
     position: relative;
-    padding-left: 20px;
   }
   .comment-wrapper {
     position: relative;

package/src/components/Comment/Comments.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Comments from './Comments';
 import '../../assets/styles/_colors.scss';
 import './Comments.scss';
+import { CommentType } from './type';
 import React from 'react';
 
 const meta: Meta<typeof Comments> = {
@@ -37,9 +38,26 @@ export const basicCommentWithOutData: Story = {
 export const basicCommentWithData: Story = {
   render: () => {
     const handleCommentsDataChange = (inputValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
+      //DEMO: we are getting that value from Comment
       console.info('Confirmed input value:', inputValue);
     };
+    const handleAddComment = (
+      newComment: CommentType,
+      parentNode: CommentType | null
+    ) => {
+      console.info('Adding', newComment, parentNode);
+    };
+
+    const handleEditComment = (
+      commentId: string,
+      updatedDescription: string,
+      updatedNode: CommentType | null
+    ) => {
+      console.info('Updated', commentId, updatedDescription, updatedNode);
+    };
+    const handleDelete = (id: string | number) => {
+      console.info('Delete Comment ID:', id);
+    };
     return (
       <Comments
         onCommentsDataChange={handleCommentsDataChange}
@@ -201,9 +219,9 @@ export const basicCommentWithData: Story = {
             },
           ],
         }}
-        handleAddComment={() => {}}
-        handleEditComment={() => {}}
-        handleDeleteComment={() => {}}
+        handleEditComment={handleEditComment}
+        handleAddComment={handleAddComment}
+        handleDeleteComment={handleDelete}
       />
     );
   },

package/src/components/Comment/Comments.tsx

@@ -10,7 +10,9 @@ const initialComments: CommentType = {
 
 const Comments = ({
   commentsData,
-
+  handleAddComment,
+  handleEditComment,
+  handleDeleteComment,
   onCommentsDataChange,
 }: CommentsProps) => {
   const [commentData, setCommentsData] = useState(
@@ -21,21 +23,38 @@ const Comments = ({
   const handleInsertNode: HandleNodeFunction = (commentId, item) => {
     const updatedTree = insertNode(commentData, commentId, item);
     setCommentsData({ ...updatedTree });
+    const updatedNode = findNode(updatedTree, commentId);
+    if (handleAddComment) handleAddComment(item, updatedNode);
   };
 
   const handleEditNode: HandleNodeFunction = (commentId, value) => {
     const updatedTree = editNode(commentData, commentId, value);
     setCommentsData({ ...updatedTree });
+    const updatedNode = findNode(updatedTree, commentId);
+    if (handleEditComment) handleEditComment(commentId, value, updatedNode);
   };
 
   const handleDeleteNode = (commentId: number) => {
     const updatedTree = deleteNode(commentData, commentId);
     setCommentsData({ ...updatedTree });
+    if (handleDeleteComment) handleDeleteComment(commentId);
   };
   useEffect(() => {
     onCommentsDataChange(commentData);
   }, [commentData, onCommentsDataChange]);
+  const findNode = (
+    node: CommentType,
+    id: number | string
+  ): CommentType | null => {
+    if (node.id === id) return node;
+
+    for (const child of node.comments) {
+      const found = findNode(child, id);
+      if (found) return found;
+    }
 
+    return null;
+  };
   return (
     <div className="ff-comments-container">
       <Comment

package/src/components/Comment/type.ts

@@ -29,8 +29,8 @@ export type HandleDeleteComment = (commentId: string) => void;
 export type HandleNodeFunction = (commentId: string, value: string) => void;
 export interface CommentsProps {
   commentsData: any;
-  handleAddComment: HandleAddComment;
-  handleEditComment: HandleEditComment;
-  handleDeleteComment: HandleDeleteComment;
+  handleAddComment: any;
+  handleEditComment: any;
+  handleDeleteComment: any;
   onCommentsDataChange: (data: any) => void;
 }

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -17,9 +17,7 @@ import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
 
 interface ExcelFileProps {
   /** The Excel data containing sheets and their content */
-  excelData: {
-    sheets: WorkSheet[];
-  };
+  excelData: WorkSheet[];
 
   /** Optional: Provide context menu options for actions like right-click */
   contextOption?: {
@@ -130,49 +128,57 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
 
   useEffect(() => {
     const payload = excelData;
-    const sheetNames = payload.sheets.map((e) => e.sheetName);
-    setSheetNames(sheetNames);
-    if (sheetNames.length > 0) {
-      pageRef.current = sheetNames[0] ? sheetNames[0] : '';
-      setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
-    }
-    const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
-    payload.sheets.forEach((sheet) => {
-      const sheetName = sheet.sheetName;
-      const json = sheet.data;
-      const maxRows = Math.max(26, json.length + 2);
-      const maxCols = Math.max(
-        26,
-        Math.max(...json.map((row) => row.length)) + 2
-      );
-
-      let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
-        { length: maxRows },
-        () => Array.from({ length: maxCols }, () => EmptyRow)
-      );
-      json.forEach((row, rowIndex) => {
-        row.forEach((cell, colIndex) => {
-          if (rowIndex < maxRows && colIndex < maxCols) {
-            if (!spreadsheetData[rowIndex]) {
-              spreadsheetData[rowIndex] = [];
+    if (payload) {
+      const sheetNames = payload.map((e) => e.sheetName);
+      setSheetNames(sheetNames);
+
+      if (!checkEmpty(sheetNames.length)) {
+        pageRef.current = sheetNames[0] ? sheetNames[0] : ''; //Ternary is required, must use ''
+        setSelectedSheet({
+          name: sheetNames[0] ? sheetNames[0] : '', //Ternary is required, must use ''
+          index: 0,
+        });
+      }
+      const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
+      payload.forEach((sheet) => {
+        const sheetName = sheet.sheetName;
+        const json = sheet.data;
+        const maxRows = Math.max(26, json.length + 2);
+        const maxCols = Math.max(
+          26,
+          Math.max(...json.map((row) => row.length)) + 2
+        );
+
+        let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
+          { length: maxRows },
+          () => Array.from({ length: maxCols }, () => EmptyRow)
+        );
+
+        json.forEach((row, rowIndex) => {
+          row.forEach((cell, colIndex) => {
+            if (rowIndex < maxRows && colIndex < maxCols) {
+              if (!spreadsheetData[rowIndex]) {
+                spreadsheetData[rowIndex] = [];
+              }
+              spreadsheetData[rowIndex][colIndex] = {
+                value: checkVal(cell.value),
+                style: convertStyleToFrontend(cell?.styles), //TODO remove 's' for Style
+                type: true,
+              };
             }
-            spreadsheetData[rowIndex][colIndex] = {
-              value: checkVal(cell.value),
-              style: convertStyleToFrontend(cell?.style),
-              type: true,
-            };
-          }
+          });
         });
-      });
 
-      newWorksheetsData[sheetName] = spreadsheetData;
-    });
-    setWorksheetsData(newWorksheetsData);
-    const firstSheetName = Object.keys(newWorksheetsData)[0];
-    if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
-      setSelectedSheetData(newWorksheetsData[firstSheetName]);
+        newWorksheetsData[sheetName] = spreadsheetData;
+      });
+      setWorksheetsData(newWorksheetsData);
+      const firstSheetName = Object.keys(newWorksheetsData)[0];
+      if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
+        setSelectedSheetData(newWorksheetsData[firstSheetName]);
+      }
     }
-  }, []);
+  }, [excelData]);
+
   const handleSave = React.useCallback(
     (event: KeyboardEvent) => {
       if (event.ctrlKey && event.key === 's') {

package/src/components/Excel/ExcelFile.stories.tsx

@@ -27,111 +27,113 @@ type Story = StoryObj<typeof ExcelFile>;
 
 export const Default: Story = {
   args: {
-    excelData: {
-      sheets: [
-        {
-          sheetName: 'fireflink',
-          data: [
-            [
-              {
-                value: 'Test Sample Data 1',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: true,
-                  italic: false,
-                  color: 'ffffff', // Sample data from backend without #
-                  backgroundColor: '434db8', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+    excelData: [
+      {
+        sheetName: 'fireflink',
+        data: [
+          [
+            {
+              value: 'Test Sample Data 1',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 11,
+                bold: true,
+                italic: false,
+                color: 'ffffff', // Sample data from backend without #
+                backgroundColor: '434db8', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-              {
-                value: 'Test Data 2',
-                style: {
-                  name: 'Arial',
-                  size: 12,
-                  bold: true,
-                  italic: true,
-                  color: 'EB5B00', // Sample data from backend without #
-                  backgroundColor: '88C273', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+            {
+              value: 'Test Data 2',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 12,
+                bold: true,
+                italic: true,
+                color: 'EB5B00', // Sample data from backend without #
+                backgroundColor: '88C273', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-            ],
-            [
-              {
-                value: 'Test Data 3',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: false,
-                  italic: false,
-                  color: '000000', // Sample data from backend without #
-                  backgroundColor: 'EB5B00', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+          ],
+          [
+            {
+              value: 'Test Data 3',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 11,
+                bold: false,
+                italic: false,
+                color: '000000', // Sample data from backend without #
+                backgroundColor: 'EB5B00', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-              {
-                value: 'Test Sample Data 4',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: false,
-                  italic: false,
-                  color: '3D0301', // Sample data from backend without #
-                  backgroundColor: 'C6E7FF', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'THIN',
-                    bottom: 'THIN',
-                    left: 'THIN',
-                    right: 'THIN',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+            {
+              value: 'Test Sample Data 4',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 11,
+                bold: false,
+                italic: false,
+                color: '3D0301', // Sample data from backend without #
+                backgroundColor: 'C6E7FF', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'THIN',
+                  bottom: 'THIN',
+                  left: 'THIN',
+                  right: 'THIN',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-            ],
+            },
           ],
-        },
-      ],
-    },
+        ],
+      },
+    ],
     toolbar: 'show',
     contextOption: {
       open: true,