pixel-react 1.5.4 → 1.5.5

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: #575757;
-$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: #575757;
+$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,43 +1,43 @@
-@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-32 {
-  @include fontPoppins(32px);
-}
-
-.font-size-80 {
-  @include fontPoppins(80px);
-}
-
-
+@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-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;
+  }
+}

package/src/assets/utils/functionUtils.ts

@@ -1,42 +1,96 @@
-export const isFunction = (functionToCheck: any) => {
-  return (
-    functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'
-  );
-};
-
-
-export const convertTo24Hour = (time12h: string): string => {
-  const [time, modifier] = time12h.split(' ');
-  if (!time || !modifier) return '00:00';
-
-  let [hours, minutes] = time.split(':');
-  if (!hours || !minutes) return '00:00';
-
-  if (hours === '12') {
-    hours = '00';
-  }
-
-  if (modifier.toUpperCase() === 'PM') {
-    hours = (parseInt(hours, 10) + 12).toString();
-  }
-
-  return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
-};
-
-export const convertTo12Hour = (time24: string): string => {
-  const [hoursStr, minutesStr] = time24.split(':');
-  const hours = parseInt(hoursStr ?? '0', 10);
-  const minutes = parseInt(minutesStr ?? '0', 10);
-
-  const ampm = hours >= 12 ? 'PM' : 'AM';
-  const hours12 = hours % 12 || 12;
-
-  return `${hours12.toString().padStart(2, '0')}:${minutes
-    .toString()
-    .padStart(2, '0')} ${ampm}`;
-};
-
-export const isValid12HourTime = (timeString: string): boolean => {
-  const regex = /^(0[1-9]|1[0-2]):([0-5][0-9])(?:\s?(AM|PM))?$/i;
-  return regex.test(timeString);
-};
+export const isFunction = (functionToCheck: any) => {
+  return (
+    functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'
+  );
+};
+
+export const convertTo24Hour = (time12h: string): string => {
+  const [time, modifier] = time12h.split(' ');
+  if (!time || !modifier) return '00:00';
+
+  let [hours, minutes] = time.split(':');
+  if (!hours || !minutes) return '00:00';
+
+  if (hours === '12') {
+    hours = '00';
+  }
+
+  if (modifier.toUpperCase() === 'PM') {
+    hours = (parseInt(hours, 10) + 12).toString();
+  }
+
+  return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
+};
+
+export const convertTo12Hour = (time24: string): string => {
+  const [hoursStr, minutesStr] = time24.split(':');
+  const hours = parseInt(hoursStr ?? '0', 10);
+  const minutes = parseInt(minutesStr ?? '0', 10);
+
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+  const hours12 = hours % 12 || 12;
+
+  return `${hours12.toString().padStart(2, '0')}:${minutes
+    .toString()
+    .padStart(2, '0')} ${ampm}`;
+};
+
+export const isValid12HourTime = (timeString: string): boolean => {
+  const regex = /^(0[1-9]|1[0-2]):([0-5][0-9])(?:\s?(AM|PM))?$/i;
+  return regex.test(timeString);
+};
+
+// Utility to normalize memory values to bytes
+export const UNIT_MULTIPLIERS: Record<string, number> = {
+  B: 1,
+  KB: 1024,
+  MB: 1024 * 1024,
+  GB: 1024 * 1024 * 1024,
+};
+
+// Parses a storage value string and converts it into a normalized value in bytes along with its unit.
+export function normalizeStorageValue(value: string): {
+  normalizedValue: number;
+  unit: string;
+  value: number;
+} {
+  const match = value.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);
+  if (!match) {
+    throw new Error(`Invalid storage value format: ${value}`);
+  }
+
+  const [, numericPart, unit] = match;
+  // Ensure numericPart and unit are defined
+  if (!numericPart || !unit) {
+    throw new Error(`Invalid storage value format: ${value}`);
+  }
+
+  const normalizedValue =
+    parseFloat(numericPart) * (UNIT_MULTIPLIERS[unit.toUpperCase()] || 1);
+
+  return {
+    normalizedValue,
+    unit: unit.toUpperCase(),
+    value: parseFloat(numericPart),
+  };
+}
+
+// Converts a byte value into a readable string with the largest appropriate unit (GB, MB, KB, B).
+export function formatMemoryValue(valueInBytes: number): string {
+  const units = ['GB', 'MB', 'KB', 'B'];
+
+  for (const unit of units) {
+    const factor = UNIT_MULTIPLIERS[unit];
+    if (factor === undefined) {
+      throw new Error(`Missing factor for unit: ${unit}`);
+    }
+
+    if (valueInBytes >= factor || unit === 'B') {
+      const normalizedValue = valueInBytes / factor;
+      const formattedValue = normalizedValue % 1 === 0 ? `${normalizedValue.toFixed(0)}` : `${normalizedValue.toFixed(2)}`;
+      return `${formattedValue} ${unit}`;
+    }
+  }
+  return `${valueInBytes} B`;
+}
+