@campxdev/react-blueprint 1.7.2 → 1.7.3

package/export.ts

@@ -1,3 +1,4 @@
+export * from './src/assets/export';
 export * from './src/components/export';
 export * from './src/hooks/export';
 export * from './src/redux/export';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",

package/src/assets/export.ts

@@ -0,0 +1,2 @@
+export * from './fonts/export';
+export * from './images/export';

package/src/assets/fonts/export.ts

@@ -0,0 +1,2 @@
+export * from './heebo/index';
+export * from './poppins/index';

package/src/assets/images/export.ts

@@ -0,0 +1,2 @@
+export * from './gif/index';
+export * from './svg/index';

package/src/assets/images/gif/index.ts

@@ -4,7 +4,7 @@ import Success from '../gif/success.gif';
 import UploadFile from '../gif/upload-file.gif';
 import UploadingFile from '../gif/uploading-file.gif';
 
-export const AnimatedGifs = {
+export const AnimatedGIFs = {
   ConfirmationAlert,
   DeleteConfirmationAlert,
   UploadFile,

package/src/assets/images/svg/index.ts

@@ -5,7 +5,7 @@ import internalServerError from './Internalserverimage.svg';
 import noConnection from './no-connection.svg';
 import unAuthorized from './unauthorized.svg';
 
-export {
+export const SVGs = {
   assignment,
   emptyListImage,
   errorCactus,

package/src/components/Assets/ErrorPages/InternalServerError.tsx

@@ -1,4 +1,4 @@
-import { internalServerError } from '../../../assets/images/svg';
+import { SVGs } from '../../../assets/export';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../export';
 import { StyledBox } from './styles';
@@ -8,7 +8,7 @@ export const InternalServerError = ({ resetBoundary }: any) => {
     <>
       <StyledBox>
         <img
-          src={internalServerError}
+          src={SVGs.internalServerError}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}

package/src/components/Assets/ErrorPages/NoInternetConnection.tsx

@@ -1,4 +1,4 @@
-import { noConnection } from '../../../assets/images/svg';
+import { SVGs } from '../../../assets/export';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../export';
 import { StyledBox } from './styles';
@@ -8,7 +8,7 @@ export const NoInterneConnection = ({ resetBoundary }: any) => {
     <>
       <StyledBox>
         <img
-          src={noConnection}
+          src={SVGs.noConnection}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}

package/src/components/Assets/ErrorPages/NoItemFound.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { emptyListImage } from '../../../assets/images/svg';
+import { SVGs } from '../../../assets/export';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { StyledBox } from './styles';
 
@@ -15,7 +15,7 @@ export const NoItemFound = ({
   return (
     <StyledBox>
       <img
-        src={emptyListImage}
+        src={SVGs.emptyListImage}
         alt="page not found"
         width="350px"
         style={{ margin: '20px' }}

package/src/components/Assets/ErrorPages/PageNotFound.tsx

@@ -1,4 +1,4 @@
-import { errorCactus } from '../../../assets/images/svg';
+import { SVGs } from '../../../assets/export';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { StyledBox } from './styles';
 
@@ -7,7 +7,7 @@ export const PageNotFound = () => {
     <>
       <StyledBox>
         <img
-          src={errorCactus}
+          src={SVGs.errorCactus}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}

package/src/components/Assets/ErrorPages/UnAuthorized.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { unAuthorized } from '../../../assets/images/svg';
+import { SVGs } from '../../../assets/export';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { StyledBox } from './styles';
 
@@ -8,7 +8,7 @@ export const UnAuthorized = ({ component }: { component?: ReactNode }) => {
     <>
       <StyledBox>
         <img
-          src={unAuthorized}
+          src={SVGs.unAuthorized}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}

package/src/components/Assets/Icons/IconComponents/CautionIcon.tsx

@@ -0,0 +1,37 @@
+export const CautionIcon = ({ size = 16 }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_89_1327)">
+        <path
+          d="M8 9.83333C7.86766 9.83246 7.74099 9.7795 7.64741 9.68592C7.55383 9.59234 7.50087 9.46567 7.5 9.33333V6C7.50087 5.86766 7.55383 5.74099 7.64741 5.64741C7.74099 5.55383 7.86766 5.50087 8 5.5C8.13234 5.50087 8.25901 5.55383 8.35259 5.64741C8.44617 5.74099 8.49913 5.86766 8.5 6V9.33333C8.49913 9.46567 8.44617 9.59234 8.35259 9.68592C8.25901 9.7795 8.13234 9.83246 8 9.83333Z"
+          fill="#F2353C"
+          stroke="#F2353C"
+          strokeWidth="0.4"
+        />
+        <path
+          d="M8.00016 11.998C7.95547 11.9965 7.91093 11.9921 7.86683 11.9846C7.82505 11.9774 7.7846 11.9639 7.74683 11.9446C7.70434 11.9301 7.66398 11.9099 7.62683 11.8846L7.52683 11.8046C7.40512 11.6768 7.33608 11.5078 7.3335 11.3313C7.33658 11.1555 7.40558 10.9873 7.52683 10.86L7.62683 10.7793C7.66398 10.7541 7.70434 10.7339 7.74683 10.7193C7.7846 10.7001 7.82505 10.6866 7.86683 10.6793C7.95234 10.6593 8.04132 10.6593 8.12683 10.6793C8.17099 10.6855 8.2138 10.699 8.2535 10.7193C8.29599 10.7339 8.33634 10.7541 8.3735 10.7793L8.4735 10.8593C8.5949 10.9868 8.66391 11.1553 8.66683 11.3313C8.66424 11.5078 8.59521 11.6768 8.4735 11.8046L8.3735 11.8846C8.33634 11.9099 8.29599 11.9301 8.2535 11.9446C8.2138 11.9649 8.17099 11.9785 8.12683 11.9846C8.08502 11.9924 8.04267 11.9968 8.00016 11.998Z"
+          fill="#F2353C"
+          stroke="#F2353C"
+          strokeWidth="0.4"
+        />
+        <path
+          d="M12.0403 14.7734H3.96292C3.42049 14.8203 2.87534 14.7222 2.38332 14.4891C1.8913 14.2559 1.47011 13.8962 1.16292 13.4467C0.918473 12.9598 0.808153 12.4166 0.843305 11.8729C0.878456 11.3292 1.05781 10.8047 1.36292 10.3534L5.40292 3.08668C6.06958 1.88668 6.98958 1.22668 8.00292 1.22668C9.01625 1.22668 9.93625 1.88668 10.6029 3.08668L14.6429 10.36C14.9494 10.8108 15.1296 11.3354 15.1648 11.8794C15.1999 12.4234 15.0888 12.9669 14.8429 13.4534C14.5339 13.9012 14.1118 14.2593 13.6195 14.4912C13.1273 14.723 12.5824 14.8204 12.0403 14.7734ZM8.00025 2.22668C7.37358 2.22668 6.76025 2.70668 6.27358 3.57335L2.24025 10.8467C2.0256 11.1482 1.89306 11.5003 1.85566 11.8685C1.81825 12.2366 1.87727 12.6082 2.02692 12.9467C2.24905 13.2432 2.54515 13.4763 2.88559 13.6225C3.22603 13.7688 3.5989 13.8231 3.96692 13.78H12.0469C12.4149 13.8223 12.7875 13.7677 13.1278 13.6215C13.4681 13.4753 13.7643 13.2427 13.9869 12.9467C14.1383 12.6086 14.1983 12.2367 14.1609 11.8682C14.1235 11.4996 13.9899 11.1474 13.7736 10.8467L9.72692 3.57335C9.24025 2.70668 8.62958 2.22668 8.00025 2.22668Z"
+          fill="#F2353C"
+          stroke="#F2353C"
+          strokeWidth="0.4"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_89_1327">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/PrintDesignerIcon.tsx

@@ -0,0 +1,47 @@
+export const PrintDesignerIcon = ({ size = 16 }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 117 117"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_1458_2"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="117"
+        height="117"
+      >
+        <path d="M117 0H0V117H117V0Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_1458_2)">
+        <path
+          d="M94 0H23C10.2975 0 0 10.2975 0 23V94C0 106.703 10.2975 117 23 117H94C106.703 117 117 106.703 117 94V23C117 10.2975 106.703 0 94 0Z"
+          fill="#7B4B57"
+        />
+        <path d="M81 31H36.43V21H71L81 31Z" fill="#FDFAED" />
+        <path d="M81 41V31H71V41H81Z" fill="#FDFAED" />
+        <path d="M88 76H98V51H88V76Z" fill="#FDFAED" />
+        <path d="M20 76H30V51H20V76Z" fill="#FDFAED" />
+        <path d="M47 74H36V98H47V74Z" fill="#FDFAED" />
+        <path d="M81 74H71V98H81V74Z" fill="#FDFAED" />
+        <path d="M71.01 98V88H46.44V98H71.01Z" fill="#FDFAED" />
+        <path
+          d="M98 51H20C20 48.3478 20.9668 45.8043 22.6877 43.9289C24.4087 42.0536 26.7427 41 29.1765 41H88.8235C90.0286 41 91.2219 41.2587 92.3352 41.7612C93.4486 42.2638 94.4602 43.0003 95.3123 43.9289C96.1644 44.8575 96.8403 45.9599 97.3017 47.1732C97.7623 48.3864 98 49.6868 98 51Z"
+          fill="#FDFAED"
+        />
+        <path
+          d="M36 76V86H27.3226C25.335 85.8347 23.4714 84.7086 22.111 82.8508C20.7507 80.9931 19.9958 78.5433 20 76H36Z"
+          fill="#FDFAED"
+        />
+        <path
+          d="M98 76V76.53C97.8938 78.9823 97.0237 81.3029 95.5565 83.0493C94.0892 84.7958 92.1271 85.846 90.044 86H81V76H98Z"
+          fill="#FDFAED"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/RedirectIcon.tsx

@@ -1,12 +1,20 @@
 import { useTheme } from '@mui/material';
-export const RedirectIcon = ({ size = 16 }) => {
+export const RedirectIcon = ({
+  size = 16,
+  color,
+  opacity = '0.5',
+}: {
+  color?: string;
+  size?: number;
+  opacity?: string;
+}) => {
   const theme = useTheme();
-  const color = theme.palette.text.secondary;
+  color = color ?? theme.palette.text.primary;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width={size}
+      height={size}
       viewBox="0 0 20 20"
       fill="none"
     >
@@ -15,13 +23,13 @@ export const RedirectIcon = ({ size = 16 }) => {
         maskUnits="userSpaceOnUse"
         x="0"
         y="0"
-        width="20"
-        height="20"
+        width={size}
+        height={size}
       >
         <path d="M20 0H0V20H20V0Z" fill="white" />
       </mask>
       <g mask="url(#mask0_3703_17689)">
-        <g opacity="0.5">
+        <g opacity={opacity}>
           <path
             d="M13.4416 14.6884C13.4414 15.6014 13.0786 16.4769 12.4331 17.1224C11.7875 17.768 10.9121 18.1307 9.99911 18.1309H5.18078C4.26784 18.1307 3.39236 17.768 2.74681 17.1224C2.10126 16.4769 1.7385 15.6014 1.73828 14.6884L1.73828 9.86595C1.7385 8.95301 2.10126 8.07752 2.74681 7.43198C3.39236 6.78643 4.26784 6.42367 5.18078 6.42345H5.86911C6.05167 6.42345 6.22675 6.49597 6.35584 6.62506C6.48493 6.75414 6.55745 6.92922 6.55745 7.11178C6.55745 7.29434 6.48493 7.46942 6.35584 7.59851C6.22675 7.7276 6.05167 7.80012 5.86911 7.80012H5.18078C4.63336 7.80166 4.1088 8.0198 3.72172 8.40689C3.33463 8.79397 3.11649 9.31853 3.11495 9.86595V14.6884C3.11671 15.2356 3.33483 15.7598 3.72171 16.1467C4.1086 16.5336 4.63282 16.7517 5.17995 16.7534H9.99995C10.5471 16.7517 11.0713 16.5336 11.4582 16.1467C11.8451 15.7598 12.0632 15.2356 12.0649 14.6884C12.0649 14.5059 12.1375 14.3308 12.2666 14.2017C12.3956 14.0726 12.5707 14.0001 12.7533 14.0001C12.9358 14.0001 13.1109 14.0726 13.24 14.2017C13.3691 14.3308 13.4416 14.5059 13.4416 14.6884ZM17.6624 5.65928L13.9374 1.81095C13.8752 1.74539 13.8004 1.69293 13.7175 1.65665C13.6347 1.62037 13.5454 1.601 13.455 1.59968C13.3646 1.59836 13.2748 1.61512 13.1909 1.64896C13.1071 1.68281 13.0308 1.73307 12.9666 1.79678C12.9013 1.85967 12.8491 1.9349 12.813 2.0181C12.7769 2.1013 12.7577 2.19083 12.7565 2.2815C12.7552 2.37217 12.772 2.46219 12.8058 2.54635C12.8396 2.63051 12.8897 2.70713 12.9533 2.77178L16.4883 6.41678H10.6883C9.77606 6.417 8.90121 6.77919 8.25578 7.42384C7.61035 8.06848 7.24711 8.9429 7.24578 9.85512V13.2976C7.24578 13.4802 7.3183 13.6553 7.44739 13.7843C7.57648 13.9134 7.75156 13.986 7.93411 13.986C8.11667 13.986 8.29175 13.9134 8.42084 13.7843C8.54993 13.6553 8.62245 13.4802 8.62245 13.2976V9.85512C8.62508 9.30842 8.84371 8.78493 9.23068 8.39874C9.61765 8.01255 10.1416 7.79498 10.6883 7.79345H16.4883L12.9458 11.4384C12.8502 11.5351 12.7855 11.658 12.76 11.7915C12.7344 11.9249 12.7492 12.063 12.8024 12.1881C12.8555 12.3132 12.9447 12.4196 13.0585 12.4939C13.1724 12.5682 13.3057 12.6069 13.4416 12.6051C13.6276 12.6037 13.8056 12.5295 13.9374 12.3984L17.6549 8.56512C18.0411 8.17927 18.2586 7.65613 18.2599 7.11024C18.2611 6.56436 18.046 6.04022 17.6616 5.65262L17.6624 5.65928Z"
             fillOpacity="0.7"

package/src/components/Assets/Icons/IconComponents/SettlementsIcon.tsx

@@ -0,0 +1,53 @@
+import { useTheme } from '@mui/material';
+
+export const SettlementsIcon = ({
+  color,
+  size = 16,
+}: {
+  color?: string;
+  size?: number;
+}) => {
+  const theme = useTheme();
+  color = color ?? theme.palette.text.primary;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.0006 21.7783H3.33398C3.10239 21.7768 2.88072 21.6841 2.71696 21.5203C2.55319 21.3566 2.46051 21.1349 2.45898 20.9033C2.46051 20.6717 2.55319 20.4501 2.71696 20.2863C2.88072 20.1225 3.10239 20.0298 3.33398 20.0283H15.0006C15.2327 20.0283 15.4553 20.1205 15.6194 20.2846C15.7835 20.4487 15.8756 20.6713 15.8756 20.9033C15.8756 21.1354 15.7835 21.3579 15.6194 21.522C15.4553 21.6861 15.2327 21.7783 15.0006 21.7783Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.4"
+      />
+      <path
+        d="M12.4088 27.5417H5.93375C3.37875 27.5417 2.46875 26.6433 2.46875 24.1V19.3167C2.46875 16.7733 3.37875 15.875 5.93375 15.875H12.4088C14.9637 15.875 15.8737 16.7733 15.8737 19.3167V24.1117C15.8737 26.6433 14.9637 27.5417 12.4088 27.5417ZM5.92208 17.625C4.33542 17.625 4.20708 17.7533 4.20708 19.3167V24.1117C4.20708 25.675 4.33542 25.8033 5.92208 25.8033H12.3971C13.9838 25.8033 14.1121 25.675 14.1121 24.1117V19.3167C14.1121 17.7533 13.9838 17.625 12.3971 17.625H5.92208Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.4"
+      />
+      <path
+        d="M18.5008 27.5416C18.3473 27.5401 18.197 27.4983 18.0648 27.4205C17.9325 27.3427 17.823 27.2316 17.7471 27.0983C17.6715 26.9623 17.6328 26.8089 17.6348 26.6534C17.6369 26.4978 17.6796 26.3455 17.7588 26.2116L18.9838 24.1699C19.1043 23.972 19.2978 23.8293 19.5226 23.7726C19.7473 23.7158 19.9853 23.7496 20.1854 23.8666C20.2845 23.9254 20.371 24.0031 20.4399 24.0954C20.5088 24.1877 20.5588 24.2927 20.587 24.4044C20.6152 24.516 20.621 24.6322 20.6042 24.7461C20.5873 24.8601 20.5481 24.9696 20.4888 25.0683L20.1738 25.5933C21.7742 25.2141 23.2002 24.3068 24.2217 23.0177C25.2432 21.7286 25.8007 20.133 25.8041 18.4883C25.8041 18.2562 25.8963 18.0337 26.0604 17.8696C26.2245 17.7055 26.447 17.6133 26.6791 17.6133C26.9112 17.6133 27.1337 17.7055 27.2978 17.8696C27.4619 18.0337 27.5541 18.2562 27.5541 18.4883C27.5479 20.8875 26.5921 23.1867 24.8956 24.8831C23.1991 26.5796 20.9 27.5355 18.5008 27.5416Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.4"
+      />
+      <path
+        d="M3.33398 12.3747C3.10239 12.3731 2.88072 12.2805 2.71696 12.1167C2.55319 11.9529 2.46051 11.7313 2.45898 11.4997C2.46299 9.10291 3.41688 6.80545 5.11166 5.11068C6.80643 3.41591 9.10388 2.46202 11.5007 2.45801C11.6549 2.45874 11.8062 2.5001 11.9393 2.57793C12.0724 2.65576 12.1827 2.76731 12.259 2.90134C12.3346 3.0373 12.3733 3.19068 12.3712 3.34623C12.3692 3.50178 12.3265 3.65408 12.2473 3.78801L11.0223 5.82967C10.9017 6.02763 10.7083 6.17033 10.4835 6.22706C10.2588 6.28379 10.0207 6.25002 9.82065 6.13301C9.72158 6.07426 9.6351 5.99651 9.56619 5.90422C9.49727 5.81193 9.44728 5.70693 9.41909 5.59525C9.3909 5.48358 9.38507 5.36743 9.40192 5.25349C9.41878 5.13955 9.458 5.03007 9.51732 4.93134L9.83232 4.40634C8.23102 4.78463 6.80395 5.69156 5.78152 6.98071C4.75909 8.26985 4.20099 9.86597 4.19732 11.5113C4.19763 11.6248 4.17551 11.7372 4.13223 11.8421C4.08895 11.947 4.02537 12.0423 3.94514 12.1225C3.86491 12.2027 3.76962 12.2663 3.66473 12.3096C3.55985 12.3529 3.44745 12.375 3.33398 12.3747Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.4"
+      />
+      <path
+        d="M22.584 14.708C21.3726 14.708 20.1884 14.3488 19.1811 13.6758C18.1739 13.0027 17.3888 12.0461 16.9252 10.9269C16.4616 9.80775 16.3403 8.57622 16.5767 7.38808C16.813 6.19995 17.3964 5.10858 18.253 4.25198C19.1096 3.39539 20.2009 2.81204 21.3891 2.5757C22.5772 2.33937 23.8087 2.46066 24.9279 2.92425C26.0471 3.38784 27.0037 4.17289 27.6767 5.18014C28.3498 6.18739 28.709 7.3716 28.709 8.58301C28.7071 10.2069 28.0612 11.7637 26.913 12.912C25.7647 14.0603 24.2079 14.7062 22.584 14.708ZM22.584 4.20801C21.7187 4.20801 20.8728 4.4646 20.1534 4.94533C19.4339 5.42606 18.8731 6.10934 18.542 6.90877C18.2109 7.7082 18.1242 8.58786 18.2931 9.43653C18.4619 10.2852 18.8785 11.0647 19.4904 11.6766C20.1022 12.2885 20.8818 12.7051 21.7305 12.8739C22.5791 13.0428 23.4588 12.9561 24.2582 12.625C25.0577 12.2938 25.7409 11.7331 26.2217 11.0136C26.7024 10.2942 26.959 9.4483 26.959 8.58301C26.9587 7.42278 26.4976 6.31016 25.6772 5.48976C24.8568 4.66936 23.7442 4.20832 22.584 4.20801Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.4"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/Icons.tsx

@@ -20,6 +20,7 @@ import { CalendarIcon } from './IconComponents/CalendarIcon';
 import { CampxFullLogoIcon } from './IconComponents/CampxFullLogoIcon';
 import { CampxIcon } from './IconComponents/CampxIcon';
 import { CareerIcon } from './IconComponents/CareerIcon';
+import { CautionIcon } from './IconComponents/CautionIcon';
 import { CertificateIcon } from './IconComponents/CertificatesIcon';
 import { CetIcon } from './IconComponents/CetIcon';
 import { CheckedCheckboxIcon } from './IconComponents/CheckedCheckBoxIcon';
@@ -80,6 +81,7 @@ import { OpenPaymentsIcon } from './IconComponents/OpenPaymentsIcon';
 import { PayxIcon } from './IconComponents/PayxIcon';
 import { PdfIcon } from './IconComponents/PdfIcon';
 import { PeoplexIcon } from './IconComponents/PeoplexIcon';
+import { PrintDesignerIcon } from './IconComponents/PrintDesignerIcon';
 import { PrinterIcon } from './IconComponents/PrinterIcon';
 import { ProductFeaturesIcon } from './IconComponents/ProductFeaturesIcon';
 import { ProfileIcon } from './IconComponents/ProfileIcon';
@@ -94,6 +96,7 @@ import { RightIcon } from './IconComponents/RightIcon';
 import { RouteIcon } from './IconComponents/RoutesIcon';
 import { SaveIcon } from './IconComponents/SaveIcon';
 import { SearchIcon } from './IconComponents/SearchIcon';
+import { SettlementsIcon } from './IconComponents/SettlementsIcon';
 import { ShareIcon } from './IconComponents/ShareIcon';
 import { SmsIcon } from './IconComponents/SmsIcon';
 import { StandardIcon } from './IconComponents/StandardIcon';
@@ -119,6 +122,8 @@ import { WhatsappIcon } from './IconComponents/WhatsappIcon';
 
 export const Icons = {
   NoteIcon,
+  PrintDesignerIcon,
+  CautionIcon,
   PrinterIcon,
   RedoIcon,
   WhatsappIcon,
@@ -236,4 +241,5 @@ export const Icons = {
   OpenPaymentsIcon,
   TransactionCardIcon,
   ObeIcon,
+  SettlementsIcon,
 };

package/src/components/DataDisplay/ActivityLogView/service.tsx

@@ -2,7 +2,7 @@ import { ArrowUpward, Info } from '@mui/icons-material';
 import { Box, Fab, Typography } from '@mui/material';
 import { addHours, addMinutes, parseISO } from 'date-fns';
 import { useCallback, useRef } from 'react';
-import { emptyListImage } from '../../../assets/images/svg';
+import { SVGs } from '../../../assets/images/svg';
 import { StyledBox } from '../../Assets/ErrorPages/styles';
 import { ActivityAction } from '../../export';
 import { CreateIcon, DeleteIcon, UpdateIcon } from './Icons';
@@ -68,7 +68,7 @@ export const NoDataFound = ({ message }: { message: string }) => {
     <>
       <StyledBox>
         <img
-          src={emptyListImage}
+          src={SVGs.emptyListImage}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}

package/src/components/Feedback/Alert/Alert.tsx

@@ -1,9 +1,8 @@
 import { Alert as MuiAlert, AlertProps as MuiAlertProps } from '@mui/material';
-import { Icons } from '../../export';
+import { Icons, Typography } from '../../export';
 
 export type AlertProps = {
   message: string;
-  severity: MuiAlertProps['severity'];
 } & MuiAlertProps;
 
 const getIcon = (severity: MuiAlertProps['severity']) => {
@@ -22,7 +21,7 @@ const getIcon = (severity: MuiAlertProps['severity']) => {
 export const Alert = ({ severity, message, ...rest }: AlertProps) => {
   return (
     <MuiAlert severity={severity} icon={getIcon(severity)} {...rest}>
-      {message}
+      <Typography variant="caption">{message}</Typography>
     </MuiAlert>
   );
 };

package/src/components/Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector.tsx

@@ -36,7 +36,7 @@ export const TableColumnsSelector = ({
   const theme = useTheme();
 
   const filteredOptions = columns.filter((option) =>
-    option.field.toLowerCase().includes(search.toLowerCase()),
+    option.headerName?.toLowerCase().includes(search.toLowerCase()),
   );
 
   const handleCheckboxChange = (column: GridColDef, checked: boolean) => {

package/src/components/Navigation/ConfirmDialog/ConfirmDialog.tsx

@@ -1,5 +1,5 @@
 import { Box, Stack, useTheme } from '@mui/material';
-import { AnimatedGifs } from '../../../assets/images/gif';
+import { AnimatedGIFs } from '../../../assets/images/gif';
 import { Button, Dialog, Typography } from '../../export';
 
 export type ConfirmDialogType = 'confirm' | 'delete';
@@ -41,8 +41,8 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
               <img
                 src={
                   type === 'delete'
-                    ? AnimatedGifs.DeleteConfirmationAlert
-                    : AnimatedGifs.ConfirmationAlert
+                    ? AnimatedGIFs.DeleteConfirmationAlert
+                    : AnimatedGIFs.ConfirmationAlert
                 }
                 alt="Animated GIF"
                 style={{ width: '80px' }}

package/src/components/Navigation/PreviewFiles/PreviewFiles.tsx

@@ -1,32 +1,24 @@
 import {
   Box,
   BoxProps,
-  IconButton,
   Stack,
   styled,
   Typography,
   useTheme,
 } from '@mui/material';
-import { useCallback, useMemo, useState } from 'react';
-import { AttachmentIcon } from '../../Assets/Icons/IconComponents/AttachmentIcon';
-import { DeleteIcon } from '../../Assets/Icons/IconComponents/DeleteIcon';
-import { DocumentIcon } from '../../Assets/Icons/IconComponents/DocumentIcon';
-import { ExcelIcon } from '../../Assets/Icons/IconComponents/ExcelIcon';
-import { ImageIcon } from '../../Assets/Icons/IconComponents/ImageIcon';
-import { PdfIcon } from '../../Assets/Icons/IconComponents/PdfIcon';
+import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
+import { Icons } from '../../export';
 
 export type PreviewFilesProps = {
   files: File[] | File | null;
   label?: string;
-  setFiles?:
-    | React.Dispatch<React.SetStateAction<File | null>>
-    | React.Dispatch<React.SetStateAction<File[]>>;
+  actions?: (file: File) => ReactNode;
 } & BoxProps;
 
 export const PreviewFiles = ({
   files,
   label,
-  setFiles,
+  actions,
   ...props
 }: PreviewFilesProps) => {
   const theme = useTheme();
@@ -40,71 +32,22 @@ export const PreviewFiles = ({
   const handleFilePreview = useCallback(
     (file: File) => {
       if (previews[file.name]) {
-        const newWindow = window.open();
-        newWindow?.document.write(
-          `<iframe src="${previews[file.name]}" frameborder="0" style="border:0; top:0; left:0; bottom:0; right:0; width:100%; height:100%;" allowfullscreen></iframe>`,
-        );
+        // Use the existing blob URL from the previews state
+        const url = previews[file.name];
+        window.open(url, '_blank')?.focus();
       } else {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          setPreviews((prev) => ({
-            ...prev,
-            [file.name]: reader.result as string,
-          }));
-          const url = URL.createObjectURL(file);
-          window.open(url, '_blank')?.focus();
-        };
-        reader.readAsDataURL(file);
+        // Create a new blob URL for the file
+        const url = URL.createObjectURL(file);
+        setPreviews((prev) => ({
+          ...prev,
+          [file.name]: url, // Save the blob URL in the previews state
+        }));
+        window.open(url, '_blank')?.focus();
       }
     },
     [previews],
   );
 
-  const handleDelete =
-    (fileToDelete: File) => (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-      if (setFiles) {
-        if (Array.isArray(files)) {
-          (setFiles as React.Dispatch<React.SetStateAction<File[]>>)(
-            (prevFiles) => prevFiles.filter((file) => file !== fileToDelete),
-          );
-        } else {
-          (setFiles as React.Dispatch<React.SetStateAction<File | null>>)(null);
-        }
-      }
-      setPreviews((prev) => {
-        const newPreviews = { ...prev };
-        delete newPreviews[fileToDelete.name];
-        return newPreviews;
-      });
-    };
-
-  const getFileIcon = (file: File) => {
-    const fileTypeMap: Record<string, React.ElementType> = {
-      'image/': ImageIcon,
-      'application/pdf': PdfIcon,
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-        ExcelIcon,
-      'application/vnd.ms-excel': ExcelIcon,
-      'application/msword': DocumentIcon,
-      'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-        DocumentIcon,
-    };
-
-    const IconComponent =
-      Object.entries(fileTypeMap).find(([key]) =>
-        file.type.startsWith(key),
-      )?.[1] || AttachmentIcon;
-    return <IconComponent fontSize="large" />;
-  };
-
-  const formatFileSize = (size: number) => {
-    if (size < 1024) return `${size} bytes`;
-    if (size < 1048576) return `${(size / 1024).toFixed(2)} KB`;
-    if (size < 1073741824) return `${(size / 1048576).toFixed(2)} MB`;
-    return `${(size / 1073741824).toFixed(2)} GB`;
-  };
-
   if (fileArray.length === 0) return null;
 
   return (
@@ -120,31 +63,35 @@ export const PreviewFiles = ({
         </Typography>
       )}
       {fileArray.map((file, index) => (
-        <PreviewContainer
-          key={file.name + file.lastModified}
-          onClick={() => handleFilePreview(file)}
-        >
+        <PreviewContainer key={index} onClick={() => handleFilePreview(file)}>
           <Stack
             direction={'row'}
-            sx={{ display: 'flex', alignItems: 'center' }}
+            sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}
           >
             {getFileIcon(file)}
             <Stack direction={'column'} marginLeft={'8px'}>
               <Typography
                 fontSize={'14px'}
                 color={theme.palette.primary.main}
-                variant="label1"
+                variant="label2"
               >
                 {file.name}
               </Typography>
-              <Typography color={theme.palette.text.tertiary} variant="label2">
+              <Typography color={theme.palette.text.tertiary} variant="caption">
                 {formatFileSize(file.size)}
               </Typography>
             </Stack>
           </Stack>
-          <IconButton onClick={handleDelete(file)}>
-            <DeleteIcon />
-          </IconButton>
+
+          {actions && (
+            <Box
+              onClick={(event: React.MouseEvent<HTMLDivElement>) => {
+                event.stopPropagation();
+              }}
+            >
+              {actions(file)}
+            </Box>
+          )}
         </PreviewContainer>
       ))}
     </Box>
@@ -163,3 +110,31 @@ const PreviewContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   marginBottom: '8px',
 }));
+
+const formatFileSize = (size: number) => {
+  if (size < 1024) return `${size} bytes`;
+  if (size < 1048576) return `${(size / 1024).toFixed(2)} KB`;
+  if (size < 1073741824) return `${(size / 1048576).toFixed(2)} MB`;
+  return `${(size / 1073741824).toFixed(2)} GB`;
+};
+
+type IconWithSize = FC<{ size?: number }>;
+
+const getFileIcon = (file: File) => {
+  const fileTypeMap: Record<string, IconWithSize> = {
+    'image/': Icons.ImageIcon,
+    'application/pdf': Icons.PdfIcon,
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+      Icons.ExcelIcon,
+    'application/vnd.ms-excel': Icons.ExcelIcon,
+    'application/msword': Icons.DocumentIcon,
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      Icons.DocumentIcon,
+  };
+
+  const IconComponent =
+    Object.entries(fileTypeMap).find(([key]) =>
+      file.type.startsWith(key),
+    )?.[1] || Icons.AttachmentIcon;
+  return <IconComponent size={30} />;
+};

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -16,7 +16,7 @@ export interface TabsContainerProps {
 
 const TabContent = styled(Box)(({ theme }) => ({
   width: '100%',
-  minHeight: 'calc(100vh - 148px)',
+  minHeight: 'calc(100vh - 200px)',
   backgroundColor: theme.palette.surface.paperBackground,
 }));
 

package/src/components/Navigation/UploadDialog/LoadingUploadDialogContainer.tsx

@@ -1,13 +1,13 @@
 import { Typography, useTheme } from '@mui/material';
-import { AnimatedGifs } from '../../../assets/images/gif';
+import { AnimatedGIFs } from '../../../assets/images/gif';
 import { ImageContainer, UploadDialogBox } from './Styles';
 
-export const LoadingUploadDialogConatiner = () => {
+export const LoadingUploadDialogContainer = () => {
   const theme = useTheme();
   return (
     <UploadDialogBox dragging={false}>
       <ImageContainer
-        src={AnimatedGifs.UploadingFile}
+        src={AnimatedGIFs.UploadingFile}
         alt={'Import animation'}
       />
       <Typography

package/src/components/Navigation/UploadDialog/UploadDialog.tsx

@@ -1,9 +1,9 @@
-import { Divider, Stack } from '@mui/material';
+import { Box, Divider, IconButton, Stack } from '@mui/material';
 import { ReactNode, useEffect, useState } from 'react';
-import { Button } from '../../export';
+import { Button, Icons } from '../../export';
 import { Dialog, DialogProps } from '../export';
 import { PreviewFiles } from '../PreviewFiles/PreviewFiles';
-import { LoadingUploadDialogConatiner } from './LoadingUploadDialogContainer';
+import { LoadingUploadDialogContainer } from './LoadingUploadDialogContainer';
 import { UploadDialogContainer } from './UploadDialogContainer';
 
 export type UploadDialogProps = {
@@ -42,6 +42,13 @@ export const UploadDialog = ({
     setOpen(true);
   };
 
+  const handleDelete = (fileToDelete: File) => {
+    setFile((prevFile) => {
+      if (!prevFile) return null;
+      return prevFile === fileToDelete ? null : prevFile;
+    });
+  };
+
   const handleUpload = async (close: () => void) => {
     if (file) {
       try {
@@ -55,6 +62,12 @@ export const UploadDialog = ({
     }
   };
 
+  const Actions = ({ file }: { file: File }) => (
+    <IconButton onClick={() => handleDelete(file)}>
+      <Icons.DeleteIcon />
+    </IconButton>
+  );
+
   useEffect(() => {
     setUploading(loading);
   }, [loading]);
@@ -78,42 +91,41 @@ export const UploadDialog = ({
         content={({ close }: { close: () => void }) => {
           return (
             <>
-              {uploading ? (
-                <LoadingUploadDialogConatiner />
-              ) : (
-                <UploadDialogContainer
-                  setFile={setFile}
-                  acceptFileType={acceptFileType}
-                />
-              )}
+              <Box sx={{ padding: '12px 16px' }}>
+                {uploading ? (
+                  <LoadingUploadDialogContainer />
+                ) : (
+                  <UploadDialogContainer
+                    setFile={setFile}
+                    acceptFileType={acceptFileType}
+                  />
+                )}
 
-              {sampleFileUrl && (
-                <a href={sampleFileUrl} target="_blank" rel="noreferrer">
-                  <Button
-                    sx={{ margin: '12px 0px' }}
-                    color="secondary"
-                    fullWidth
-                    variant="contained"
-                  >
-                    Download Sample File
-                  </Button>
-                </a>
-              )}
-              {file && !uploading && (
-                <PreviewFiles
-                  sx={{ margin: '16px 0px' }}
-                  key={file.name + file.lastModified}
-                  files={file}
-                  label="Selected Files"
-                  setFiles={setFile}
-                />
-              )}
+                <Box sx={{ marginTop: '12px' }}>
+                  {sampleFileUrl && (
+                    <a href={sampleFileUrl} target="_blank" rel="noreferrer">
+                      <Button color="secondary" fullWidth variant="contained">
+                        Download Sample File
+                      </Button>
+                    </a>
+                  )}
+                </Box>
+                {file && !uploading && (
+                  <PreviewFiles
+                    sx={{ marginTop: '16px' }}
+                    key={file.name + file.lastModified}
+                    files={file}
+                    label="Selected Files"
+                    actions={(file) => <Actions file={file} />}
+                  />
+                )}
+              </Box>
               <Divider
                 component="div"
                 variant="fullWidth"
                 orientation="horizontal"
               />
-              <Stack direction={'row'} gap={2} padding={'12px 0px'}>
+              <Stack direction={'row'} gap={2} padding={'12px 16px'}>
                 <Button
                   variant="contained"
                   disabled={!file || uploading}
@@ -128,6 +140,7 @@ export const UploadDialog = ({
                     setFile(null);
                     close();
                   }}
+                  disableRipple
                 >
                   Cancel
                 </Button>

package/src/components/Navigation/UploadDialog/UploadDialogContainer.tsx

@@ -1,6 +1,6 @@
 import { FormLabel, Typography, useTheme } from '@mui/material';
 import React, { useCallback, useState } from 'react';
-import { AnimatedGifs } from '../../../assets/images/gif';
+import { AnimatedGIFs } from '../../../assets/images/gif';
 import { ImageContainer, UploadDialogBox } from './Styles';
 
 export const UploadDialogContainer = ({
@@ -50,7 +50,7 @@ export const UploadDialogContainer = ({
         dragging={dragging}
       >
         <ImageContainer
-          src={AnimatedGifs.UploadFile}
+          src={AnimatedGIFs.UploadFile}
           alt={'Import animation'}
         />
         <Typography

package/src/stories/Navigation/PreviewFiles.stories.tsx

@@ -1,7 +1,11 @@
-import { Box } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
 import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
-import { PreviewFiles, PreviewFilesProps } from '../../components/export';
+import {
+  Icons,
+  PreviewFiles,
+  PreviewFilesProps,
+} from '../../components/export';
 
 export default {
   title: 'Navigation/PreviewFiles',
@@ -40,17 +44,47 @@ const txtFile = createTestFile('notes.txt', 'text/plain', 10 * 1024);
 const Template: StoryFn<PreviewFilesProps> = (args) => {
   const [files, setFiles] = useState<PreviewFilesProps['files']>(args.files);
 
-  const handleSetFiles: PreviewFilesProps['setFiles'] = (newFiles: any) => {
-    if (typeof newFiles === 'function') {
-      setFiles(newFiles(files));
-    } else {
-      setFiles(newFiles);
-    }
+  const Actions = ({ file }: { file: File }) => {
+    const handleDownload = (file: File) => {
+      const url = URL.createObjectURL(file);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = file.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    };
+
+    const handleDelete = (fileToDelete: File) => {
+      setFiles((prevFiles) => {
+        if (!prevFiles) return null;
+        if (Array.isArray(prevFiles)) {
+          return prevFiles.filter((file) => file !== fileToDelete);
+        }
+        return prevFiles === fileToDelete ? null : prevFiles;
+      });
+    };
+
+    return (
+      <>
+        <IconButton onClick={() => handleDownload(file)}>
+          <Icons.DownloadIcon />
+        </IconButton>
+        <IconButton onClick={() => handleDelete(file)}>
+          <Icons.DeleteIcon />
+        </IconButton>
+      </>
+    );
   };
 
   return (
     <Box sx={{ width: '400px', padding: '20px' }}>
-      <PreviewFiles {...args} files={files} setFiles={handleSetFiles} />
+      <PreviewFiles
+        {...args}
+        files={files}
+        actions={(file) => <Actions file={file} />}
+      />
     </Box>
   );
 };

package/src/themes/customCssBaseline.ts

@@ -1,9 +1,10 @@
-import { heeboMedium, heeboSemiBold } from '../assets/fonts/heebo';
 import {
   boldPoppins,
+  heeboMedium,
+  heeboSemiBold,
   mediumPoppins,
   semiboldPoppins,
-} from '../assets/fonts/poppins';
+} from '../assets/export';
 
 export const customCssBaseline = `
     @font-face {