pixel-react 1.7.9 → 1.8.1

package/src/assets/icons/window_restore.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.58189 0H14.2429C14.7086 0.00113232 15.1548 0.188831 15.4841 0.522043C15.8134 0.855255 15.9989 1.30686 16 1.7781V11.3632C15.9989 11.8345 15.8134 12.2861 15.4841 12.6193C15.1548 12.9525 14.7086 13.1402 14.2429 13.1413H4.58189C4.11623 13.1402 3.66997 12.9525 3.3407 12.6193C3.01143 12.2861 2.82595 11.8345 2.82483 11.3632V1.7781C2.82595 1.30686 3.01143 0.855255 3.3407 0.522043C3.66997 0.188831 4.11623 0.00113232 4.58189 0ZM4.58189 11.3618H14.2429V1.7781H4.58189V11.3618Z" fill="currentColor"/>
-<path d="M1.75706 2.85889H11.4181C11.8837 2.86002 12.33 3.04772 12.6593 3.38093C12.9885 3.71414 13.174 4.16575 13.1751 4.63698V14.2221C13.174 14.6933 12.9885 15.145 12.6593 15.4782C12.33 15.8114 11.8837 15.9991 11.4181 16.0002H1.75706C1.2914 15.9991 0.845138 15.8114 0.515867 15.4782C0.186597 15.145 0.00111893 14.6933 0 14.2221V4.63698C0.00111893 4.16575 0.186597 3.71414 0.515867 3.38093C0.845138 3.04772 1.2914 2.86002 1.75706 2.85889ZM1.75706 14.2207H11.4181V4.63698H1.75706V14.2207Z" fill="currentColor"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.58189 0H14.2429C14.7086 0.00113232 15.1548 0.188831 15.4841 0.522043C15.8134 0.855255 15.9989 1.30686 16 1.7781V11.3632C15.9989 11.8345 15.8134 12.2861 15.4841 12.6193C15.1548 12.9525 14.7086 13.1402 14.2429 13.1413H4.58189C4.11623 13.1402 3.66997 12.9525 3.3407 12.6193C3.01143 12.2861 2.82595 11.8345 2.82483 11.3632V1.7781C2.82595 1.30686 3.01143 0.855255 3.3407 0.522043C3.66997 0.188831 4.11623 0.00113232 4.58189 0ZM4.58189 11.3618H14.2429V1.7781H4.58189V11.3618Z" fill="currentColor"/>
+<path d="M1.75706 2.85889H11.4181C11.8837 2.86002 12.33 3.04772 12.6593 3.38093C12.9885 3.71414 13.174 4.16575 13.1751 4.63698V14.2221C13.174 14.6933 12.9885 15.145 12.6593 15.4782C12.33 15.8114 11.8837 15.9991 11.4181 16.0002H1.75706C1.2914 15.9991 0.845138 15.8114 0.515867 15.4782C0.186597 15.145 0.00111893 14.6933 0 14.2221V4.63698C0.00111893 4.16575 0.186597 3.71414 0.515867 3.38093C0.845138 3.04772 1.2914 2.86002 1.75706 2.85889ZM1.75706 14.2207H11.4181V4.63698H1.75706V14.2207Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/windows.svg

@@ -1,10 +1,10 @@
-<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.80888 12.0185L0.114433 11.3751L0.00422248 11.36L0.00421445 11.2489L0.00396729 7.39195V7.26428H0.131141H4.82583H4.95351V7.39195V11.8924V12.0384L4.80888 12.0185Z"
-          fill="currentColor"/>
-    <path d="M12.0003 7.39195L11.9987 12.8732V13.0197L11.8541 12.9993L5.59136 12.1182L5.48114 12.1028V11.9921V7.39195V7.26428H5.60882H11.8731H12.0003V7.39195Z"
-          fill="currentColor"/>
-    <path d="M5.59086 1.91281L11.8536 1.00154L11.9993 0.980347V1.12771V6.60891V6.73658H11.8715H5.60882H5.48114V6.60891V2.03899V1.92879L5.59086 1.91281Z"
-          fill="currentColor"/>
-    <path d="M0.00418431 6.60893L-0.000124334 2.79077L-0.000244141 2.67959L0.110094 2.6646L4.80836 2.02659L4.95299 2.00696V2.15276V6.60893V6.7366H4.82531H0.131358H0.00433601L0.00418431 6.60893Z"
-          fill="currentColor"/>
-</svg>
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.80888 12.0185L0.114433 11.3751L0.00422248 11.36L0.00421445 11.2489L0.00396729 7.39195V7.26428H0.131141H4.82583H4.95351V7.39195V11.8924V12.0384L4.80888 12.0185Z"
+          fill="currentColor"/>
+    <path d="M12.0003 7.39195L11.9987 12.8732V13.0197L11.8541 12.9993L5.59136 12.1182L5.48114 12.1028V11.9921V7.39195V7.26428H5.60882H11.8731H12.0003V7.39195Z"
+          fill="currentColor"/>
+    <path d="M5.59086 1.91281L11.8536 1.00154L11.9993 0.980347V1.12771V6.60891V6.73658H11.8715H5.60882H5.48114V6.60891V2.03899V1.92879L5.59086 1.91281Z"
+          fill="currentColor"/>
+    <path d="M0.00418431 6.60893L-0.000124334 2.79077L-0.000244141 2.67959L0.110094 2.6646L4.80836 2.02659L4.95299 2.00696V2.15276V6.60893V6.7366H4.82531H0.131358H0.00433601L0.00418431 6.60893Z"
+          fill="currentColor"/>
+</svg>

package/src/assets/icons/wrong_mark.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50139 2.11982L5.8514 0.4552V0.456744L4.00446 2.29277L2.11053 0.456744L0.498413 2.11982L2.4105 3.97267L0.510132 5.86731L2.10193 7.5448L3.94549 5.70878L5.83942 7.5448L7.50158 5.87237L5.54463 4.02766L7.50139 2.11982Z" fill="currentColor"/>
-</svg>
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50139 2.11982L5.8514 0.4552V0.456744L4.00446 2.29277L2.11053 0.456744L0.498413 2.11982L2.4105 3.97267L0.510132 5.86731L2.10193 7.5448L3.94549 5.70878L5.83942 7.5448L7.50158 5.87237L5.54463 4.02766L7.50139 2.11982Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/wswb_delete_icon.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.77783 17.4447C7.77783 17.8571 7.94168 18.2527 8.23333 18.5443C8.52498 18.836 8.92054 18.9998 9.333 18.9998H15.556C15.9685 18.9998 16.364 18.836 16.6557 18.5443C16.9473 18.2527 17.1112 17.8571 17.1112 17.4447V8.11133H7.77783V17.4447Z" fill="currentColor"/>
-<path d="M15.1667 5.77817L14.3897 5H10.5L9.723 5.77817H7V7.33333H17.8885V5.77817H15.1667Z" fill="currentColor"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.77783 17.4447C7.77783 17.8571 7.94168 18.2527 8.23333 18.5443C8.52498 18.836 8.92054 18.9998 9.333 18.9998H15.556C15.9685 18.9998 16.364 18.836 16.6557 18.5443C16.9473 18.2527 17.1112 17.8571 17.1112 17.4447V8.11133H7.77783V17.4447Z" fill="currentColor"/>
+<path d="M15.1667 5.77817L14.3897 5H10.5L9.723 5.77817H7V7.33333H17.8885V5.77817H15.1667Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/wswb_plus_icon.svg

@@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.4">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 5.25C12.6796 5.25 13.0278 5.59822 13.0278 6.02778V11.4722H18.4722C18.9018 11.4722 19.25 11.8204 19.25 12.25C19.25 12.6796 18.9018 13.0278 18.4722 13.0278H13.0278V18.4722C13.0278 18.9018 12.6796 19.25 12.25 19.25C11.8204 19.25 11.4722 18.9018 11.4722 18.4722V13.0278H6.02778C5.59822 13.0278 5.25 12.6796 5.25 12.25C5.25 11.8204 5.59822 11.4722 6.02778 11.4722H11.4722V6.02778C11.4722 5.59822 11.8204 5.25 12.25 5.25Z" fill="currentColor"/>
-</g>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.4">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 5.25C12.6796 5.25 13.0278 5.59822 13.0278 6.02778V11.4722H18.4722C18.9018 11.4722 19.25 11.8204 19.25 12.25C19.25 12.6796 18.9018 13.0278 18.4722 13.0278H13.0278V18.4722C13.0278 18.9018 12.6796 19.25 12.25 19.25C11.8204 19.25 11.4722 18.9018 11.4722 18.4722V13.0278H6.02778C5.59822 13.0278 5.25 12.6796 5.25 12.25C5.25 11.8204 5.59822 11.4722 6.02778 11.4722H11.4722V6.02778C11.4722 5.59822 11.8204 5.25 12.25 5.25Z" fill="currentColor"/>
+</g>
 </svg>

package/src/assets/icons/xls_file_type.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.4273 4.75176L10.7936 0.117383C10.7467 0.0705078 10.6833 0.0439453 10.617 0.0439453H5.36828C4.14672 0.0439453 3.15297 1.03801 3.15297 2.25957V6.64426H1.20859C0.832969 6.64426 0.527344 6.94988 0.527344 7.32551V11.2418C0.527344 11.6174 0.832969 11.923 1.20859 11.923H3.15297V13.8283C3.15297 15.0499 4.14672 16.0439 5.36828 16.0439H13.2852C14.5067 16.0439 15.5005 15.0499 15.5005 13.8283V4.92863C15.5005 4.86238 15.4742 4.79863 15.4273 4.75176ZM15.0008 13.8283C15.0008 14.7746 14.2311 15.5443 13.2852 15.5443H5.36828C4.42234 15.5443 3.65266 14.7746 3.65266 13.8283V11.923H11.8836C12.2592 11.923 12.5648 11.6174 12.5648 11.2418V7.32551C12.5648 6.94988 12.2592 6.64426 11.8836 6.64426H3.65266V2.25957C3.65266 1.31332 4.42234 0.543633 5.36828 0.543633H10.367V4.42801C10.367 4.84176 10.7033 5.17832 11.1164 5.17832H15.0008V13.8283Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.1648 9.96852L4.9198 11.1435H5.7248L4.6098 9.40852L5.7048 7.65352H4.9148L4.2348 8.82352L3.4798 7.65352H2.6748L3.7898 9.38352L2.6898 11.1435H3.4798L4.1648 9.96852ZM8.10754 10.5885H6.95754V7.65352H6.25754V11.1435H8.10754V10.5885ZM9.09746 11.0535C9.29413 11.1368 9.51413 11.1785 9.75746 11.1785C10.0141 11.1785 10.2358 11.1318 10.4225 11.0385C10.6091 10.9418 10.7508 10.8135 10.8475 10.6535C10.9441 10.4935 10.9925 10.3202 10.9925 10.1335C10.9925 9.91685 10.9408 9.74185 10.8375 9.60852C10.7341 9.47518 10.6108 9.37518 10.4675 9.30852C10.3241 9.24185 10.1391 9.17518 9.91246 9.10852C9.74579 9.05852 9.61579 9.01518 9.52246 8.97852C9.43246 8.93852 9.35579 8.88852 9.29246 8.82852C9.23246 8.76518 9.20246 8.68685 9.20246 8.59352C9.20246 8.46018 9.24246 8.35852 9.32246 8.28852C9.40579 8.21852 9.51579 8.18352 9.65246 8.18352C9.80913 8.18352 9.93413 8.22352 10.0275 8.30352C10.1241 8.38018 10.1758 8.47852 10.1825 8.59852H10.9525C10.9291 8.28518 10.8041 8.04185 10.5775 7.86852C10.3541 7.69185 10.0625 7.60352 9.70246 7.60352C9.46246 7.60352 9.24913 7.64518 9.06246 7.72852C8.87579 7.80852 8.73079 7.92518 8.62746 8.07852C8.52413 8.23185 8.47246 8.41185 8.47246 8.61852C8.47246 8.83852 8.52246 9.01518 8.62246 9.14852C8.72579 9.27852 8.84746 9.37685 8.98746 9.44352C9.13079 9.50685 9.31579 9.57185 9.54246 9.63852C9.70913 9.68518 9.83913 9.72852 9.93246 9.76852C10.0291 9.80518 10.1091 9.85685 10.1725 9.92352C10.2358 9.99018 10.2675 10.0752 10.2675 10.1785C10.2675 10.3052 10.2208 10.4085 10.1275 10.4885C10.0341 10.5652 9.90579 10.6035 9.74246 10.6035C9.58246 10.6035 9.45579 10.5618 9.36246 10.4785C9.27246 10.3952 9.22246 10.2818 9.21246 10.1385H8.46246C8.46579 10.3518 8.52413 10.5368 8.63746 10.6935C8.75079 10.8502 8.90413 10.9702 9.09746 11.0535Z" fill="white"/>
-</svg>
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4273 4.75176L10.7936 0.117383C10.7467 0.0705078 10.6833 0.0439453 10.617 0.0439453H5.36828C4.14672 0.0439453 3.15297 1.03801 3.15297 2.25957V6.64426H1.20859C0.832969 6.64426 0.527344 6.94988 0.527344 7.32551V11.2418C0.527344 11.6174 0.832969 11.923 1.20859 11.923H3.15297V13.8283C3.15297 15.0499 4.14672 16.0439 5.36828 16.0439H13.2852C14.5067 16.0439 15.5005 15.0499 15.5005 13.8283V4.92863C15.5005 4.86238 15.4742 4.79863 15.4273 4.75176ZM15.0008 13.8283C15.0008 14.7746 14.2311 15.5443 13.2852 15.5443H5.36828C4.42234 15.5443 3.65266 14.7746 3.65266 13.8283V11.923H11.8836C12.2592 11.923 12.5648 11.6174 12.5648 11.2418V7.32551C12.5648 6.94988 12.2592 6.64426 11.8836 6.64426H3.65266V2.25957C3.65266 1.31332 4.42234 0.543633 5.36828 0.543633H10.367V4.42801C10.367 4.84176 10.7033 5.17832 11.1164 5.17832H15.0008V13.8283Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.1648 9.96852L4.9198 11.1435H5.7248L4.6098 9.40852L5.7048 7.65352H4.9148L4.2348 8.82352L3.4798 7.65352H2.6748L3.7898 9.38352L2.6898 11.1435H3.4798L4.1648 9.96852ZM8.10754 10.5885H6.95754V7.65352H6.25754V11.1435H8.10754V10.5885ZM9.09746 11.0535C9.29413 11.1368 9.51413 11.1785 9.75746 11.1785C10.0141 11.1785 10.2358 11.1318 10.4225 11.0385C10.6091 10.9418 10.7508 10.8135 10.8475 10.6535C10.9441 10.4935 10.9925 10.3202 10.9925 10.1335C10.9925 9.91685 10.9408 9.74185 10.8375 9.60852C10.7341 9.47518 10.6108 9.37518 10.4675 9.30852C10.3241 9.24185 10.1391 9.17518 9.91246 9.10852C9.74579 9.05852 9.61579 9.01518 9.52246 8.97852C9.43246 8.93852 9.35579 8.88852 9.29246 8.82852C9.23246 8.76518 9.20246 8.68685 9.20246 8.59352C9.20246 8.46018 9.24246 8.35852 9.32246 8.28852C9.40579 8.21852 9.51579 8.18352 9.65246 8.18352C9.80913 8.18352 9.93413 8.22352 10.0275 8.30352C10.1241 8.38018 10.1758 8.47852 10.1825 8.59852H10.9525C10.9291 8.28518 10.8041 8.04185 10.5775 7.86852C10.3541 7.69185 10.0625 7.60352 9.70246 7.60352C9.46246 7.60352 9.24913 7.64518 9.06246 7.72852C8.87579 7.80852 8.73079 7.92518 8.62746 8.07852C8.52413 8.23185 8.47246 8.41185 8.47246 8.61852C8.47246 8.83852 8.52246 9.01518 8.62246 9.14852C8.72579 9.27852 8.84746 9.37685 8.98746 9.44352C9.13079 9.50685 9.31579 9.57185 9.54246 9.63852C9.70913 9.68518 9.83913 9.72852 9.93246 9.76852C10.0291 9.80518 10.1091 9.85685 10.1725 9.92352C10.2358 9.99018 10.2675 10.0752 10.2675 10.1785C10.2675 10.3052 10.2208 10.4085 10.1275 10.4885C10.0341 10.5652 9.90579 10.6035 9.74246 10.6035C9.58246 10.6035 9.45579 10.5618 9.36246 10.4785C9.27246 10.3952 9.22246 10.2818 9.21246 10.1385H8.46246C8.46579 10.3518 8.52413 10.5368 8.63746 10.6935C8.75079 10.8502 8.90413 10.9702 9.09746 11.0535Z" fill="white"/>
+</svg>

package/src/assets/icons/xlsx_file_type.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.4273 4.75176L10.7936 0.117383C10.7467 0.0705078 10.6833 0.0439453 10.617 0.0439453H5.36828C4.14672 0.0439453 3.15297 1.03801 3.15297 2.25957V6.64426H1.20859C0.832969 6.64426 0.527344 6.94988 0.527344 7.32551V11.2418C0.527344 11.6174 0.832969 11.923 1.20859 11.923H3.15297V13.8283C3.15297 15.0499 4.14672 16.0439 5.36828 16.0439H13.2852C14.5067 16.0439 15.5005 15.0499 15.5005 13.8283V4.92863C15.5005 4.86238 15.4742 4.79863 15.4273 4.75176ZM15.0008 13.8283C15.0008 14.7746 14.2311 15.5443 13.2852 15.5443H5.36828C4.42234 15.5443 3.65266 14.7746 3.65266 13.8283V11.923H11.8836C12.2592 11.923 12.5648 11.6174 12.5648 11.2418V7.32551C12.5648 6.94988 12.2592 6.64426 11.8836 6.64426H3.65266V2.25957C3.65266 1.31332 4.42234 0.543633 5.36828 0.543633H10.367V4.42801C10.367 4.84176 10.7033 5.17832 11.1164 5.17832H15.0008V13.8283Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.88829 9.74649L3.49229 10.6865H4.13629L3.24429 9.29849L4.12029 7.89449H3.48829L2.94429 8.83049L2.34029 7.89449H1.69629L2.58829 9.27849L1.70829 10.6865H2.34029L2.88829 9.74649ZM6.04248 10.2425H5.12248V7.89449H4.56248V10.6865H6.04248V10.2425ZM6.83441 10.6145C6.99175 10.6812 7.16775 10.7145 7.36241 10.7145C7.56775 10.7145 7.74508 10.6772 7.89441 10.6025C8.04375 10.5252 8.15708 10.4225 8.23441 10.2945C8.31175 10.1665 8.35041 10.0278 8.35041 9.87849C8.35041 9.70516 8.30908 9.56516 8.22641 9.45849C8.14375 9.35183 8.04508 9.27183 7.93041 9.21849C7.81575 9.16516 7.66775 9.11183 7.48641 9.05849C7.35308 9.01849 7.24908 8.98383 7.17441 8.95449C7.10241 8.92249 7.04108 8.88249 6.99041 8.83449C6.94241 8.78383 6.91841 8.72116 6.91841 8.64649C6.91841 8.53983 6.95041 8.45849 7.01441 8.40249C7.08108 8.34649 7.16908 8.31849 7.27841 8.31849C7.40375 8.31849 7.50375 8.35049 7.57841 8.41449C7.65575 8.47583 7.69708 8.55449 7.70241 8.65049H8.31841C8.29975 8.39983 8.19975 8.20516 8.01841 8.06649C7.83975 7.92516 7.60641 7.85449 7.31841 7.85449C7.12641 7.85449 6.95575 7.88783 6.80641 7.95449C6.65708 8.01849 6.54108 8.11183 6.45841 8.23449C6.37575 8.35716 6.33441 8.50116 6.33441 8.66649C6.33441 8.84249 6.37441 8.98383 6.45441 9.09049C6.53708 9.19449 6.63441 9.27316 6.74641 9.32649C6.86108 9.37716 7.00908 9.42916 7.19041 9.48249C7.32375 9.51983 7.42775 9.55449 7.50241 9.58649C7.57975 9.61583 7.64375 9.65716 7.69441 9.71049C7.74508 9.76383 7.77041 9.83183 7.77041 9.91449C7.77041 10.0158 7.73308 10.0985 7.65841 10.1625C7.58375 10.2238 7.48108 10.2545 7.35041 10.2545C7.22241 10.2545 7.12108 10.2212 7.04641 10.1545C6.97441 10.0878 6.93441 9.99716 6.92641 9.88249H6.32641C6.32908 10.0532 6.37575 10.2012 6.46641 10.3265C6.55708 10.4518 6.67975 10.5478 6.83441 10.6145ZM9.90391 9.74649L10.5079 10.6865H11.1519L10.2599 9.29849L11.1359 7.89449H10.5039L9.95991 8.83049L9.35591 7.89449H8.71191L9.60391 9.27849L8.72391 10.6865H9.35591L9.90391 9.74649Z" fill="white"/>
-</svg>
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4273 4.75176L10.7936 0.117383C10.7467 0.0705078 10.6833 0.0439453 10.617 0.0439453H5.36828C4.14672 0.0439453 3.15297 1.03801 3.15297 2.25957V6.64426H1.20859C0.832969 6.64426 0.527344 6.94988 0.527344 7.32551V11.2418C0.527344 11.6174 0.832969 11.923 1.20859 11.923H3.15297V13.8283C3.15297 15.0499 4.14672 16.0439 5.36828 16.0439H13.2852C14.5067 16.0439 15.5005 15.0499 15.5005 13.8283V4.92863C15.5005 4.86238 15.4742 4.79863 15.4273 4.75176ZM15.0008 13.8283C15.0008 14.7746 14.2311 15.5443 13.2852 15.5443H5.36828C4.42234 15.5443 3.65266 14.7746 3.65266 13.8283V11.923H11.8836C12.2592 11.923 12.5648 11.6174 12.5648 11.2418V7.32551C12.5648 6.94988 12.2592 6.64426 11.8836 6.64426H3.65266V2.25957C3.65266 1.31332 4.42234 0.543633 5.36828 0.543633H10.367V4.42801C10.367 4.84176 10.7033 5.17832 11.1164 5.17832H15.0008V13.8283Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.88829 9.74649L3.49229 10.6865H4.13629L3.24429 9.29849L4.12029 7.89449H3.48829L2.94429 8.83049L2.34029 7.89449H1.69629L2.58829 9.27849L1.70829 10.6865H2.34029L2.88829 9.74649ZM6.04248 10.2425H5.12248V7.89449H4.56248V10.6865H6.04248V10.2425ZM6.83441 10.6145C6.99175 10.6812 7.16775 10.7145 7.36241 10.7145C7.56775 10.7145 7.74508 10.6772 7.89441 10.6025C8.04375 10.5252 8.15708 10.4225 8.23441 10.2945C8.31175 10.1665 8.35041 10.0278 8.35041 9.87849C8.35041 9.70516 8.30908 9.56516 8.22641 9.45849C8.14375 9.35183 8.04508 9.27183 7.93041 9.21849C7.81575 9.16516 7.66775 9.11183 7.48641 9.05849C7.35308 9.01849 7.24908 8.98383 7.17441 8.95449C7.10241 8.92249 7.04108 8.88249 6.99041 8.83449C6.94241 8.78383 6.91841 8.72116 6.91841 8.64649C6.91841 8.53983 6.95041 8.45849 7.01441 8.40249C7.08108 8.34649 7.16908 8.31849 7.27841 8.31849C7.40375 8.31849 7.50375 8.35049 7.57841 8.41449C7.65575 8.47583 7.69708 8.55449 7.70241 8.65049H8.31841C8.29975 8.39983 8.19975 8.20516 8.01841 8.06649C7.83975 7.92516 7.60641 7.85449 7.31841 7.85449C7.12641 7.85449 6.95575 7.88783 6.80641 7.95449C6.65708 8.01849 6.54108 8.11183 6.45841 8.23449C6.37575 8.35716 6.33441 8.50116 6.33441 8.66649C6.33441 8.84249 6.37441 8.98383 6.45441 9.09049C6.53708 9.19449 6.63441 9.27316 6.74641 9.32649C6.86108 9.37716 7.00908 9.42916 7.19041 9.48249C7.32375 9.51983 7.42775 9.55449 7.50241 9.58649C7.57975 9.61583 7.64375 9.65716 7.69441 9.71049C7.74508 9.76383 7.77041 9.83183 7.77041 9.91449C7.77041 10.0158 7.73308 10.0985 7.65841 10.1625C7.58375 10.2238 7.48108 10.2545 7.35041 10.2545C7.22241 10.2545 7.12108 10.2212 7.04641 10.1545C6.97441 10.0878 6.93441 9.99716 6.92641 9.88249H6.32641C6.32908 10.0532 6.37575 10.2012 6.46641 10.3265C6.55708 10.4518 6.67975 10.5478 6.83441 10.6145ZM9.90391 9.74649L10.5079 10.6865H11.1519L10.2599 9.29849L11.1359 7.89449H10.5039L9.95991 8.83049L9.35591 7.89449H8.71191L9.60391 9.27849L8.72391 10.6865H9.35591L9.90391 9.74649Z" fill="white"/>
+</svg>

package/src/assets/icons/xml_file_type.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.4273 4.75176L10.7936 0.117383C10.7467 0.0705078 10.6833 0.0439453 10.617 0.0439453H5.36828C4.14672 0.0439453 3.15297 1.03801 3.15297 2.25957V6.64426H1.20859C0.832969 6.64426 0.527344 6.94988 0.527344 7.32551V11.2418C0.527344 11.6174 0.832969 11.923 1.20859 11.923H3.15297V13.8283C3.15297 15.0499 4.14672 16.0439 5.36828 16.0439H13.2852C14.5067 16.0439 15.5005 15.0499 15.5005 13.8283V4.92863C15.5005 4.86238 15.4742 4.79863 15.4273 4.75176ZM15.0008 13.8283C15.0008 14.7746 14.2311 15.5443 13.2852 15.5443H5.36828C4.42234 15.5443 3.65266 14.7746 3.65266 13.8283V11.923H11.8836C12.2592 11.923 12.5648 11.6174 12.5648 11.2418V7.32551C12.5648 6.94988 12.2592 6.64426 11.8836 6.64426H3.65266V2.25957C3.65266 1.31332 4.42234 0.543633 5.36828 0.543633H10.367V4.42801C10.367 4.84176 10.7033 5.17832 11.1164 5.17832H15.0008V13.8283Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.59742 9.91949L4.35242 11.0945H5.15742L4.04242 9.35949L5.13742 7.60449H4.34742L3.66742 8.77449L2.91242 7.60449H2.10742L3.22242 9.33449L2.12242 11.0945H2.91242L3.59742 9.91949ZM9.49516 11.0945V7.60449H8.70516L7.59516 10.1995L6.48516 7.60449H5.69016V11.0945H6.39016V8.82449L7.33016 11.0945H7.86016L8.79516 8.82449V11.0945H9.49516ZM12.0372 10.5395H10.8872V7.60449H10.1872V11.0945H12.0372V10.5395Z" fill="white"/>
-</svg>
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4273 4.75176L10.7936 0.117383C10.7467 0.0705078 10.6833 0.0439453 10.617 0.0439453H5.36828C4.14672 0.0439453 3.15297 1.03801 3.15297 2.25957V6.64426H1.20859C0.832969 6.64426 0.527344 6.94988 0.527344 7.32551V11.2418C0.527344 11.6174 0.832969 11.923 1.20859 11.923H3.15297V13.8283C3.15297 15.0499 4.14672 16.0439 5.36828 16.0439H13.2852C14.5067 16.0439 15.5005 15.0499 15.5005 13.8283V4.92863C15.5005 4.86238 15.4742 4.79863 15.4273 4.75176ZM15.0008 13.8283C15.0008 14.7746 14.2311 15.5443 13.2852 15.5443H5.36828C4.42234 15.5443 3.65266 14.7746 3.65266 13.8283V11.923H11.8836C12.2592 11.923 12.5648 11.6174 12.5648 11.2418V7.32551C12.5648 6.94988 12.2592 6.64426 11.8836 6.64426H3.65266V2.25957C3.65266 1.31332 4.42234 0.543633 5.36828 0.543633H10.367V4.42801C10.367 4.84176 10.7033 5.17832 11.1164 5.17832H15.0008V13.8283Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.59742 9.91949L4.35242 11.0945H5.15742L4.04242 9.35949L5.13742 7.60449H4.34742L3.66742 8.77449L2.91242 7.60449H2.10742L3.22242 9.33449L2.12242 11.0945H2.91242L3.59742 9.91949ZM9.49516 11.0945V7.60449H8.70516L7.59516 10.1995L6.48516 7.60449H5.69016V11.0945H6.39016V8.82449L7.33016 11.0945H7.86016L8.79516 8.82449V11.0945H9.49516ZM12.0372 10.5395H10.8872V7.60449H10.1872V11.0945H12.0372V10.5395Z" fill="white"/>
+</svg>

package/src/assets/styles/_colors.scss

@@ -1,150 +1,150 @@
-$brand-color: #71347b;
-$text-color: #1e161f;
-$icons-default-color: #71347b;
-$default-icon-color: #a3a3a3;
-$border-color: #f0e7f4;
-$disable-color: #71347b80;
-$hover-color: #f7ebff;
-$pop-up-background-blur: #14041c;
-$drawer-footer-bg: #ffffff;
-$slider-table-color: #efe1f9;
-$tooltip-bg-color: #1e161f;
-$tooltip-text-color: #ffffff;
-$toggle-strip-color: #cfd1e2;
-$toggle-cross-color: #aeb0c0;
-$toggle-strip-shadow: #00000040; // TODO : Color Name is Not Provided By Designers
-$toggle-button-bg-color: #ffffff; // TODO : Color Name is Not Provided By Designers
-$toggle-disable-icon-color: #767994; // TODO : Color Name is Not Provided By Designers
-$arrow-button-bg-color: #ffffff; // TODO : Color Name is Not Provided By Designers
-$shadow-strip-enable-shadow: #141a60;
-$text-bg-highlight: #f5fb00;
-$toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);
-$drawer-footer-border: #f0e7f4;
-$primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);
-$table-header-color: #f0e7f4;
-$table-lines-color: #d7b5e3;
-$primary-button-color: linear-gradient(
-  188.79deg,
-  #71347b 2.94%,
-  #46164d 93.09%
-);
-
-$primary-button-hover: linear-gradient(
-  179.06deg,
-  #8d3b9a 3.49%,
-  #781f86 99.22%
-);
-
-$primary-button-disable: linear-gradient(180deg, #46164d 0%, $brand-color 100%);
-$primary-button-text-color: #ffffff;
-$secondary-button-color-text: linear-gradient(
-  179.06deg,
-  #71347b 3.49%,
-  #46164d 99.22%
-);
-$secondary-button-text-color: #46164d;
-$secondary-button-hover: linear-gradient(
-  179.06deg,
-  #71347b0d 3.49%,
-  #46164d0d 99.22%
-);
-$tertiary-button-color: linear-gradient(
-  179.06deg,
-  #71347b0d 3.49%,
-  #46164d0d 99.22%
-);
-$tertiary-button-hover: linear-gradient(
-  179.06deg,
-  #71347b1a 3.49%,
-  #46164d1a 99.22%
-);
-$delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);
-$delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);
-$delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);
-$secondary-button-color: linear-gradient(180deg, #46164d 0%, #71347b 100%);
-$secondary-icon-color: #71347b;
-
-///!-----------------------------------------------------------------------------------------------------
-
-$drawer-title-color: #252c37;
-$button-bg-color: #f6ebff;
-$description-text: #d9d9d9;
-$error_light: #e42525;
-$text-area-border-hover: #1e161f;
-$text-area-border-color: #a3a3a3;
-$default-color: #747474;
-
-///!-----------------------------------------------------------------------------------------------------
-
-$description-text: #d9d9d9;
-$ff-success: #079455;
-$ff-warning: #f79009;
-$ff-error-light: #e42525;
-$ff-chips-fill-color: #f9d5ff;
-$ff-chips-blur-color: #57575766;
-$hovered-add-button-color: #fce9ff; // TODO: Change the color variable name
-$arrows-button-border-color: #ded1e5; // TODO: Change the color variable name
-$add-icon-hover-color: #431b4a; ////TODO: color need to be add into style guide
-
-$add-icon-hover-color: #431b4a; //TODO : Color Name is Not Provided By Designers
-$default-icon-color: #a3a3a3;
-$expandable-menu-default-bg: #fdfaff;
-$expandable-menu-option-bg: #610b861a;
-$file-dropzone-default-color: #71347b1a;
-$file-dropzone-selected-color: #71347b33;
-$file-details-container-shadow: #1e161f29;
-$file-details-bg: #ffffff;
-
-$variable-dropdown-bg: #ffffff;
-
-:root {
-  --tooltip-bg-color: #{$tooltip-bg-color};
-  --status-approved-text-color: #016102;
-  --status-warning-text-color: #ff8b00;
-  --status-rejected-text-color: #c60202;
-  --status-skipped-text-color: #3c3838;
-  --status-approved-bg-color: #c6efcd;
-  --status-rejected-bg-color: #f7d9d9;
-  --status-warning-bg-color: #fae2c6; // TODO: Change the color variable name
-  --status-skipped-bg-color: #c4c3c3; // TODO: Change the color variable name
-  --brand-color: #{$brand-color};
-  --icons-default-color: #{$icons-default-color};
-  --default-icon-color: #{$default-icon-color};
-  --default-color: #747474; // todo color need to be add into style guide
-  --primary-icon-color: #ffffff;
-  --secondary-icon-color: #71347b;
-  --system-color--error: #c50303;
-  --hover-color: #{$hover-color};
-  --brand2-color: #610b86; // Todo:Change the color variable name
-  --status-warning-hover-bg-color: #fcd8ac; // Todo:Change the color variable name
-  --status-percentage-growth-bg-color: #ecedf8; // Todo:Change the color variable name
-  --primary-icon-color: #{$primary-button-text-color};
-  --secondary-icon-color: #71347b;
-  --description-text-color: #{$description-text};
-  --expandable-menu-default-bg: #{$expandable-menu-default-bg}; // TODO: Change the color variable name
-  --expandable-menu-option-bg: #{$expandable-menu-option-bg}; // TODO: Change the color variable name
-  --text-color: #{$text-color};
-  --file-dropzone-default-color: #{$file-dropzone-default-color};
-  --file-dropzone-selected-color: #{$file-dropzone-selected-color};
-  --file-details-container-shadow: #{$file-details-container-shadow}; // TODO: Change the color variable name
-  --file-details-bg: #{$file-details-bg}; // TODO: Change the color variable name
-  --error-light: #{$error_light};
-
-  --tabs-label-default-color: #{tabs-label-default-color};
-  --tabs-label-active-color: #{tabs-label-active-color};
-  --tabs-border-color: #{tabs-border-color};
-  --tabs-bg-color: #{tabs-bg-color};
-  --tab-bg-color: #{tab-bg-color};
-  --toggle-button-bg-color: #{$toggle-button-bg-color}; // TODO: Change the color variable name
-  --toggle-strip-shadow: #{$toggle-strip-shadow}; // TODO: Change the color variable name
-  --toggle-strip-color: #{$toggle-strip-color}; // TODO: Change the color variable name
-  --disable-color: #{$disable-color};
-  --toggle-strip-color: #{$toggle-strip-color};
-  --add-icon-hover-color: #{$add-icon-hover-color}; // TODO: Change the color variable name
-  --arrows-button-border-color: #{$arrows-button-border-color}; // TODO: Change the color variable name
-  --arrow-button-bg-color: #{$arrow-button-bg-color}; // TODO: Change the color variable name
-  --text-bg-highlight: #{$text-bg-highlight};
-  --slider-table-color: #{$slider-table-color};
-
-  --variable-dropdown-bg: #($variable-dropdown-bg);
-}
+$brand-color: #71347b;
+$text-color: #1e161f;
+$icons-default-color: #71347b;
+$default-icon-color: #a3a3a3;
+$border-color: #f0e7f4;
+$disable-color: #71347b80;
+$hover-color: #f7ebff;
+$pop-up-background-blur: #14041c;
+$drawer-footer-bg: #ffffff;
+$slider-table-color: #efe1f9;
+$tooltip-bg-color: #1e161f;
+$tooltip-text-color: #ffffff;
+$toggle-strip-color: #cfd1e2;
+$toggle-cross-color: #aeb0c0;
+$toggle-strip-shadow: #00000040; // TODO : Color Name is Not Provided By Designers
+$toggle-button-bg-color: #ffffff; // TODO : Color Name is Not Provided By Designers
+$toggle-disable-icon-color: #767994; // TODO : Color Name is Not Provided By Designers
+$arrow-button-bg-color: #ffffff; // TODO : Color Name is Not Provided By Designers
+$shadow-strip-enable-shadow: #141a60;
+$text-bg-highlight: #f5fb00;
+$toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);
+$drawer-footer-border: #f0e7f4;
+$primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);
+$table-header-color: #f0e7f4;
+$table-lines-color: #d7b5e3;
+$primary-button-color: linear-gradient(
+  188.79deg,
+  #71347b 2.94%,
+  #46164d 93.09%
+);
+
+$primary-button-hover: linear-gradient(
+  179.06deg,
+  #8d3b9a 3.49%,
+  #781f86 99.22%
+);
+
+$primary-button-disable: linear-gradient(180deg, #46164d 0%, $brand-color 100%);
+$primary-button-text-color: #ffffff;
+$secondary-button-color-text: linear-gradient(
+  179.06deg,
+  #71347b 3.49%,
+  #46164d 99.22%
+);
+$secondary-button-text-color: #46164d;
+$secondary-button-hover: linear-gradient(
+  179.06deg,
+  #71347b0d 3.49%,
+  #46164d0d 99.22%
+);
+$tertiary-button-color: linear-gradient(
+  179.06deg,
+  #71347b0d 3.49%,
+  #46164d0d 99.22%
+);
+$tertiary-button-hover: linear-gradient(
+  179.06deg,
+  #71347b1a 3.49%,
+  #46164d1a 99.22%
+);
+$delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);
+$delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);
+$delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);
+$secondary-button-color: linear-gradient(180deg, #46164d 0%, #71347b 100%);
+$secondary-icon-color: #71347b;
+
+///!-----------------------------------------------------------------------------------------------------
+
+$drawer-title-color: #252c37;
+$button-bg-color: #f6ebff;
+$description-text: #d9d9d9;
+$error_light: #e42525;
+$text-area-border-hover: #1e161f;
+$text-area-border-color: #a3a3a3;
+$default-color: #747474;
+
+///!-----------------------------------------------------------------------------------------------------
+
+$description-text: #d9d9d9;
+$ff-success: #079455;
+$ff-warning: #f79009;
+$ff-error-light: #e42525;
+$ff-chips-fill-color: #f9d5ff;
+$ff-chips-blur-color: #57575766;
+$hovered-add-button-color: #fce9ff; // TODO: Change the color variable name
+$arrows-button-border-color: #ded1e5; // TODO: Change the color variable name
+$add-icon-hover-color: #431b4a; ////TODO: color need to be add into style guide
+
+$add-icon-hover-color: #431b4a; //TODO : Color Name is Not Provided By Designers
+$default-icon-color: #a3a3a3;
+$expandable-menu-default-bg: #fdfaff;
+$expandable-menu-option-bg: #610b861a;
+$file-dropzone-default-color: #71347b1a;
+$file-dropzone-selected-color: #71347b33;
+$file-details-container-shadow: #1e161f29;
+$file-details-bg: #ffffff;
+
+$variable-dropdown-bg: #ffffff;
+
+:root {
+  --tooltip-bg-color: #{$tooltip-bg-color};
+  --status-approved-text-color: #016102;
+  --status-warning-text-color: #ff8b00;
+  --status-rejected-text-color: #c60202;
+  --status-skipped-text-color: #3c3838;
+  --status-approved-bg-color: #c6efcd;
+  --status-rejected-bg-color: #f7d9d9;
+  --status-warning-bg-color: #fae2c6; // TODO: Change the color variable name
+  --status-skipped-bg-color: #c4c3c3; // TODO: Change the color variable name
+  --brand-color: #{$brand-color};
+  --icons-default-color: #{$icons-default-color};
+  --default-icon-color: #{$default-icon-color};
+  --default-color: #747474; // todo color need to be add into style guide
+  --primary-icon-color: #ffffff;
+  --secondary-icon-color: #71347b;
+  --system-color--error: #c50303;
+  --hover-color: #{$hover-color};
+  --brand2-color: #610b86; // Todo:Change the color variable name
+  --status-warning-hover-bg-color: #fcd8ac; // Todo:Change the color variable name
+  --status-percentage-growth-bg-color: #ecedf8; // Todo:Change the color variable name
+  --primary-icon-color: #{$primary-button-text-color};
+  --secondary-icon-color: #71347b;
+  --description-text-color: #{$description-text};
+  --expandable-menu-default-bg: #{$expandable-menu-default-bg}; // TODO: Change the color variable name
+  --expandable-menu-option-bg: #{$expandable-menu-option-bg}; // TODO: Change the color variable name
+  --text-color: #{$text-color};
+  --file-dropzone-default-color: #{$file-dropzone-default-color};
+  --file-dropzone-selected-color: #{$file-dropzone-selected-color};
+  --file-details-container-shadow: #{$file-details-container-shadow}; // TODO: Change the color variable name
+  --file-details-bg: #{$file-details-bg}; // TODO: Change the color variable name
+  --error-light: #{$error_light};
+
+  --tabs-label-default-color: #{tabs-label-default-color};
+  --tabs-label-active-color: #{tabs-label-active-color};
+  --tabs-border-color: #{tabs-border-color};
+  --tabs-bg-color: #{tabs-bg-color};
+  --tab-bg-color: #{tab-bg-color};
+  --toggle-button-bg-color: #{$toggle-button-bg-color}; // TODO: Change the color variable name
+  --toggle-strip-shadow: #{$toggle-strip-shadow}; // TODO: Change the color variable name
+  --toggle-strip-color: #{$toggle-strip-color}; // TODO: Change the color variable name
+  --disable-color: #{$disable-color};
+  --toggle-strip-color: #{$toggle-strip-color};
+  --add-icon-hover-color: #{$add-icon-hover-color}; // TODO: Change the color variable name
+  --arrows-button-border-color: #{$arrows-button-border-color}; // TODO: Change the color variable name
+  --arrow-button-bg-color: #{$arrow-button-bg-color}; // TODO: Change the color variable name
+  --text-bg-highlight: #{$text-bg-highlight};
+  --slider-table-color: #{$slider-table-color};
+
+  --variable-dropdown-bg: #($variable-dropdown-bg);
+}

package/src/assets/styles/_fonts.scss

@@ -1,45 +1,45 @@
-@mixin fontPoppins($size: 16px) {
-  font-family: 'Poppins';
-  font-size: $size;
-}
-
-.fontXs {
-  @include fontPoppins(10px);
-}
-
-.fontSm {
-  @include fontPoppins(12px);
-}
-
-.fontMd {
-  @include fontPoppins(14px);
-}
-
-.fontLg {
-  @include fontPoppins(16px);
-}
-
-.fontXL {
-  @include fontPoppins(18px);
-}
-
-.font2Xl {
-  @include fontPoppins(24px);
-}
-
-.font-size-8 {
-  @include fontPoppins(8px);
-}
-.font-size-20 {
-  @include fontPoppins(20px);
-}
-
-.font-size-32 {
-  @include fontPoppins(32px);
-}
-
-.font-size-80 {
-  @include fontPoppins(80px);
-}
-
-//NOTE: Please Don't use these classes use Typography component TODO: Need to remove this file
+@mixin fontPoppins($size: 16px) {
+  font-family: 'Poppins';
+  font-size: $size;
+}
+
+.fontXs {
+  @include fontPoppins(10px);
+}
+
+.fontSm {
+  @include fontPoppins(12px);
+}
+
+.fontMd {
+  @include fontPoppins(14px);
+}
+
+.fontLg {
+  @include fontPoppins(16px);
+}
+
+.fontXL {
+  @include fontPoppins(18px);
+}
+
+.font2Xl {
+  @include fontPoppins(24px);
+}
+
+.font-size-8 {
+  @include fontPoppins(8px);
+}
+.font-size-20 {
+  @include fontPoppins(20px);
+}
+
+.font-size-32 {
+  @include fontPoppins(32px);
+}
+
+.font-size-80 {
+  @include fontPoppins(80px);
+}
+
+//NOTE: Please Don't use these classes use Typography component TODO: Need to remove this file

package/src/assets/styles/_mixins.scss

@@ -1,21 +1,21 @@
-// Mixin for centering content
-@mixin center-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-}
-
-// Mixin for transition effects
-@mixin transition($properties, $duration: 0.3s) {
-  transition: $properties $duration;
-}
-
-//Mixin for height, width and border
-@mixin box($size, $border: none) {
-  width: $size;
-  height: $size;
-  @if $border != none {
-    border: $border;
-  }
-}
+// Mixin for centering content
+@mixin center-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+}
+
+// Mixin for transition effects
+@mixin transition($properties, $duration: 0.3s) {
+  transition: $properties $duration;
+}
+
+//Mixin for height, width and border
+@mixin box($size, $border: none) {
+  width: $size;
+  height: $size;
+  @if $border != none {
+    border: $border;
+  }
+}