@campxdev/react-blueprint 1.7.12 → 1.7.14

package/package.json

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

package/src/App.tsx

@@ -27,9 +27,13 @@ function App() {
       }}
     >
       <FormControlWrapper control={control}>
-        <FileUpload label={'Files'} name="daaku" files={watch().daaku} />
+        <FileUpload
+          label={'Files'}
+          name="daaku"
+          files={watch().daaku}
+          required
+        />
       </FormControlWrapper>
-      <Button onClick={handleSubmit(onSubmit)}>Submit</Button>
     </div>
   );
 }

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

@@ -15,36 +15,33 @@ export const ExportIcon = ({
   return (
     <>
       <svg
-        width={size}
-        height={size}
-        viewBox="0 0 30 30"
+        xmlns="http://www.w3.org/2000/svg"
+        width="25"
+        height="24"
+        viewBox="0 0 25 24"
         style={{
           fill: color,
           ...sx,
         }}
       >
-        <g id="vuesax/outline/export">
-          <g id="export">
-            <path
-              id="Vector"
-              d="M19.0746 27.8126H10.9246C4.78711 27.8126 2.16211 25.1876 2.16211 19.0501V18.8876C2.16211 13.3376 4.34961 10.6626 9.24961 10.1976C9.49694 10.1805 9.74137 10.2592 9.93221 10.4175C10.123 10.5758 10.2457 10.8014 10.2746 11.0476C10.2865 11.1708 10.2739 11.2951 10.2375 11.4134C10.2012 11.5317 10.1418 11.6416 10.0628 11.7369C9.9838 11.8322 9.88675 11.9109 9.77722 11.9685C9.6677 12.0261 9.54786 12.0615 9.42461 12.0726C5.49961 12.4351 4.03711 14.2851 4.03711 18.8976V19.0601C4.03711 24.1476 5.83711 25.9476 10.9246 25.9476H19.0746C24.1621 25.9476 25.9621 24.1476 25.9621 19.0601V18.8976C25.9621 14.2601 24.4746 12.4101 20.4746 12.0726C20.3504 12.0644 20.2291 12.0316 20.1178 11.9759C20.0065 11.9202 19.9074 11.8429 19.8263 11.7484C19.7453 11.6539 19.684 11.5442 19.6459 11.4258C19.6078 11.3073 19.5937 11.1824 19.6045 11.0584C19.6154 10.9344 19.6508 10.8138 19.7089 10.7037C19.7669 10.5936 19.8463 10.4962 19.9425 10.4172C20.0387 10.3382 20.1496 10.2791 20.2689 10.2436C20.3882 10.208 20.5134 10.1967 20.6371 10.2101C25.6121 10.6351 27.8371 13.3226 27.8371 18.9101V19.0726C27.8371 25.1876 25.2121 27.8126 19.0746 27.8126Z"
-              stroke={color}
-              strokeWidth="0.5"
-            />
-            <path
-              id="Vector_2"
-              d="M15 19.6879C14.7519 19.6863 14.5144 19.587 14.3389 19.4115C14.1634 19.236 14.0641 18.9985 14.0625 18.7504V4.52539C14.0641 4.27726 14.1634 4.03975 14.3389 3.86429C14.5144 3.68883 14.7519 3.58953 15 3.58789C15.2481 3.58953 15.4856 3.68883 15.6611 3.86429C15.8366 4.03975 15.9359 4.27726 15.9375 4.52539V18.7504C15.9359 18.9985 15.8366 19.236 15.6611 19.4115C15.4856 19.587 15.2481 19.6863 15 19.6879Z"
-              stroke={color}
-              strokeWidth="0.5"
-            />
-            <path
-              id="Vector_3"
-              d="M19.189 8.24978C19.0658 8.25022 18.9438 8.22614 18.83 8.17892C18.7163 8.1317 18.6131 8.06231 18.5265 7.97478L15.004 4.44978L11.479 7.97478C11.3012 8.14038 11.0662 8.23054 10.8233 8.22625C10.5804 8.22197 10.3487 8.12358 10.1769 7.95181C10.0052 7.78004 9.90678 7.54831 9.90249 7.30544C9.8982 7.06256 9.98836 6.8275 10.154 6.64978L14.339 2.46353C14.5154 2.28918 14.7534 2.19141 15.0015 2.19141C15.2495 2.19141 15.4875 2.28918 15.664 2.46353L19.8515 6.65103C20.0258 6.82746 20.1236 7.06549 20.1236 7.31353C20.1236 7.56157 20.0258 7.79961 19.8515 7.97603C19.7654 8.06431 19.6623 8.13413 19.5484 8.18119C19.4345 8.22826 19.3122 8.2516 19.189 8.24978Z"
-              stroke={color}
-              strokeWidth="0.5"
-            />
-          </g>
-        </g>
+        <path
+          d="M15.5105 22.2501H8.99047C4.08047 22.2501 1.98047 20.1501 1.98047 15.2401V15.1101C1.98047 10.6701 3.73047 8.53009 7.65047 8.15809C7.84833 8.1444 8.04387 8.20739 8.19655 8.334C8.34922 8.4606 8.44731 8.64111 8.47047 8.83809C8.47997 8.93664 8.46988 9.03609 8.4408 9.13073C8.41172 9.22536 8.36422 9.31332 8.30102 9.38953C8.23782 9.46573 8.16018 9.5287 8.07256 9.57479C7.98494 9.62088 7.88907 9.64919 7.79047 9.65809C4.65047 9.94809 3.48047 11.4281 3.48047 15.1181V15.2481C3.48047 19.3181 4.92047 20.7581 8.99047 20.7581H15.5105C19.5805 20.7581 21.0205 19.3181 21.0205 15.2481V15.1181C21.0205 11.4081 19.8305 9.92809 16.6305 9.65809C16.5311 9.65155 16.4341 9.62524 16.345 9.58071C16.256 9.53617 16.1767 9.4743 16.1119 9.39873C16.047 9.32315 15.9979 9.2354 15.9675 9.1406C15.937 9.04581 15.9258 8.94589 15.9344 8.84669C15.9431 8.7475 15.9714 8.65103 16.0179 8.56295C16.0643 8.47486 16.1278 8.39693 16.2048 8.33373C16.2817 8.27052 16.3705 8.22332 16.4659 8.19487C16.5613 8.16643 16.6615 8.15733 16.7605 8.16809C20.7405 8.50809 22.5205 10.6581 22.5205 15.1281V15.2581C22.5205 20.1501 20.4205 22.2501 15.5105 22.2501Z"
+          fill={color}
+          stroke="#121212"
+          stroke-width="0.4"
+        />
+        <path
+          d="M12.25 15.7501C12.0515 15.7488 11.8615 15.6694 11.7211 15.529C11.5807 15.3886 11.5013 15.1986 11.5 15.0001V3.62012C11.5013 3.42161 11.5807 3.2316 11.7211 3.09124C11.8615 2.95087 12.0515 2.87143 12.25 2.87012C12.4485 2.87143 12.6385 2.95087 12.7789 3.09124C12.9193 3.2316 12.9987 3.42161 13 3.62012V15.0001C12.9987 15.1986 12.9193 15.3886 12.7789 15.529C12.6385 15.6694 12.4485 15.7488 12.25 15.7501Z"
+          fill={color}
+          stroke={color}
+          stroke-width="0.4"
+        />
+        <path
+          d="M15.6012 6.60012C15.5026 6.60047 15.405 6.5812 15.314 6.54343C15.223 6.50566 15.1405 6.45014 15.0712 6.38012L12.2532 3.56012L9.43317 6.38012C9.29099 6.5126 9.10295 6.58472 8.90864 6.58129C8.71434 6.57787 8.52896 6.49915 8.39155 6.36174C8.25413 6.22433 8.17542 6.03894 8.17199 5.84464C8.16856 5.65034 8.24069 5.46229 8.37317 5.32012L11.7212 1.97112C11.8623 1.83164 12.0527 1.75342 12.2512 1.75342C12.4496 1.75342 12.64 1.83164 12.7812 1.97112L16.1312 5.32112C16.2706 5.46226 16.3489 5.65269 16.3489 5.85112C16.3489 6.04955 16.2706 6.23998 16.1312 6.38112C16.0624 6.45175 15.9799 6.50759 15.8887 6.54525C15.7976 6.5829 15.6998 6.60157 15.6012 6.60012Z"
+          fill={color}
+          stroke={color}
+          stroke-width="0.4"
+        />
       </svg>
     </>
   );

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

@@ -22,30 +22,30 @@ const ScholarshipIcon = ({
           d="M15.0001 28.4369C14.614 28.4398 14.2313 28.365 13.8748 28.2168C13.5183 28.0686 13.1953 27.8501 12.9251 27.5744L11.0251 25.6744C10.8107 25.4997 10.5501 25.3911 10.2751 25.3619H7.57508C7.18919 25.3624 6.80698 25.2868 6.45037 25.1393C6.09375 24.9919 5.76973 24.7755 5.49686 24.5026C5.22398 24.2298 5.00763 23.9057 4.86018 23.5491C4.71273 23.1925 4.63709 22.8103 4.63758 22.4244V19.7244C4.6084 19.4494 4.49982 19.1888 4.32508 18.9744L2.42508 17.0744C2.15151 16.8026 1.93446 16.4793 1.78643 16.1231C1.6384 15.767 1.56232 15.3851 1.56258 14.9994C1.55966 14.6133 1.63452 14.2307 1.78271 13.8742C1.93089 13.5177 2.14936 13.1946 2.42508 12.9244L4.32508 11.0244C4.49982 10.81 4.6084 10.5494 4.63758 10.2744V7.57441C4.63709 7.18851 4.71273 6.80631 4.86018 6.44969C5.00763 6.09308 5.22398 5.76905 5.49686 5.49618C5.76973 5.22331 6.09375 5.00696 6.45037 4.85951C6.80698 4.71206 7.18919 4.63642 7.57508 4.63691H10.2751C10.5501 4.60773 10.8107 4.49915 11.0251 4.32441L12.9251 2.42441C13.4861 1.8947 14.2285 1.59961 15.0001 1.59961C15.7717 1.59961 16.514 1.8947 17.0751 2.42441L18.9751 4.32441C19.1895 4.49915 19.4501 4.60773 19.7251 4.63691H22.4251C22.811 4.63642 23.1932 4.71206 23.5498 4.85951C23.9064 5.00696 24.2304 5.22331 24.5033 5.49618C24.7762 5.76905 24.9925 6.09308 25.14 6.44969C25.2874 6.80631 25.3631 7.18851 25.3626 7.57441V10.2744C25.3918 10.5494 25.5003 10.81 25.6751 11.0244L27.5751 12.9244C27.8487 13.1963 28.0657 13.5196 28.2137 13.8757C28.3618 14.2318 28.4378 14.6137 28.4376 14.9994C28.4405 15.3855 28.3656 15.7682 28.2175 16.1247C28.0693 16.4812 27.8508 16.8042 27.5751 17.0744L25.6751 18.9744C25.5003 19.1888 25.3918 19.4494 25.3626 19.7244V22.4244C25.3631 22.8103 25.2874 23.1925 25.14 23.5491C24.9925 23.9057 24.7762 24.2298 24.5033 24.5026C24.2304 24.7755 23.9064 24.9919 23.5498 25.1393C23.1932 25.2868 22.811 25.3624 22.4251 25.3619H19.7251C19.4501 25.3911 19.1895 25.4997 18.9751 25.6744L17.0751 27.5744C16.8048 27.8501 16.4818 28.0686 16.1253 28.2168C15.7688 28.365 15.3861 28.4398 15.0001 28.4369ZM5.65008 17.6494C6.17686 18.2154 6.48292 18.9518 6.51258 19.7244V22.4244C6.51242 22.564 6.53979 22.7022 6.59313 22.8312C6.64646 22.9602 6.72472 23.0774 6.82341 23.1761C6.92211 23.2748 7.0393 23.353 7.16829 23.4064C7.29727 23.4597 7.43551 23.4871 7.57508 23.4869H10.2751C11.0478 23.5165 11.7841 23.8225 12.3501 24.3494L14.2501 26.2494C14.4523 26.442 14.7208 26.5494 15.0001 26.5494C15.2793 26.5494 15.5479 26.442 15.7501 26.2494L17.6501 24.3494C18.216 23.8225 18.9524 23.5165 19.7251 23.4869H22.4251C22.5647 23.4871 22.7029 23.4597 22.8319 23.4064C22.9609 23.353 23.0781 23.2748 23.1768 23.1761C23.2754 23.0774 23.3537 22.9602 23.407 22.8312C23.4604 22.7022 23.4877 22.564 23.4876 22.4244V19.7244C23.5172 18.9518 23.8233 18.2154 24.3501 17.6494L26.2501 15.7494C26.3491 15.6512 26.4277 15.5344 26.4813 15.4057C26.535 15.2769 26.5626 15.1389 26.5626 14.9994C26.5626 14.86 26.535 14.7219 26.4813 14.5932C26.4277 14.4644 26.3491 14.3476 26.2501 14.2494L24.3501 12.3494C23.8233 11.7834 23.5172 11.0471 23.4876 10.2744V7.57441C23.4877 7.43483 23.4604 7.2966 23.407 7.16761C23.3537 7.03863 23.2754 6.92144 23.1768 6.82274C23.0781 6.72405 22.9609 6.64579 22.8319 6.59245C22.7029 6.53912 22.5647 6.51175 22.4251 6.51191H19.7251C18.9524 6.48236 18.216 6.17628 17.6501 5.64941L15.7501 3.74941C15.5479 3.55683 15.2793 3.44941 15.0001 3.44941C14.7208 3.44941 14.4523 3.55683 14.2501 3.74941L12.3501 5.64941C11.7841 6.17628 11.0478 6.48236 10.2751 6.51191H7.57508C7.43551 6.51175 7.29727 6.53912 7.16829 6.59245C7.0393 6.64579 6.92211 6.72405 6.82341 6.82274C6.72472 6.92144 6.64646 7.03863 6.59313 7.16761C6.53979 7.2966 6.51242 7.43483 6.51258 7.57441V10.2744C6.48292 11.0471 6.17686 11.7834 5.65008 12.3494L3.75008 14.2494C3.65106 14.3476 3.57247 14.4644 3.51883 14.5932C3.4652 14.7219 3.43758 14.86 3.43758 14.9994C3.43758 15.1389 3.4652 15.2769 3.51883 15.4057C3.57247 15.5344 3.65106 15.6512 3.75008 15.7494L5.65008 17.6494Z"
           fill={color}
           stroke={color}
-          strokeWidth="0.4"
+          stroke-width="0.4"
         />
         <path
           d="M18.7508 19.9999C18.503 20.0024 18.2601 19.9312 18.0529 19.7954C17.8457 19.6595 17.6836 19.4652 17.5871 19.237C17.4905 19.0088 17.464 18.7571 17.5108 18.5138C17.5576 18.2705 17.6757 18.0466 17.85 17.8706C18.0243 17.6945 18.247 17.5742 18.4898 17.5249C18.7326 17.4757 18.9846 17.4997 19.2137 17.5939C19.4428 17.6882 19.6388 17.8484 19.7767 18.0542C19.9146 18.26 19.9883 18.5022 19.9883 18.7499C19.9893 18.9133 19.958 19.0753 19.8963 19.2266C19.8347 19.3779 19.7437 19.5155 19.6288 19.6316C19.5138 19.7477 19.3771 19.84 19.2265 19.9032C19.0758 19.9664 18.9142 19.9993 18.7508 19.9999Z"
           fill={color}
           stroke={color}
-          strokeWidth="0.4"
+          stroke-width="0.4"
         />
         <path
           d="M11.2625 12.4999C11.0148 12.5024 10.7719 12.4312 10.5647 12.2954C10.3575 12.1595 10.1953 11.9652 10.0988 11.737C10.0022 11.5088 9.9757 11.2571 10.0225 11.0138C10.0693 10.7705 10.1874 10.5466 10.3617 10.3706C10.536 10.1945 10.7587 10.0742 11.0015 10.0249C11.2443 9.9757 11.4963 9.99971 11.7254 10.0939C11.9546 10.1882 12.1505 10.3484 12.2884 10.5542C12.4264 10.76 12.5 11.0022 12.5 11.2499C12.501 11.4133 12.4697 11.5753 12.4081 11.7266C12.3464 11.8779 12.2555 12.0155 12.1405 12.1316C12.0256 12.2477 11.8888 12.34 11.7382 12.4032C11.5875 12.4664 11.4259 12.4993 11.2625 12.4999Z"
           fill={color}
           stroke={color}
-          strokeWidth="0.4"
+          stroke-width="0.4"
         />
         <path
           d="M11.2486 19.6905C11.1254 19.6909 11.0034 19.6668 10.8897 19.6196C10.7759 19.5724 10.6727 19.503 10.5861 19.4155C10.412 19.2389 10.3145 19.0009 10.3145 18.753C10.3145 18.505 10.412 18.2671 10.5861 18.0905L18.0861 10.5905C18.2638 10.4249 18.4989 10.3347 18.7417 10.339C18.9846 10.3433 19.2163 10.4417 19.3881 10.6135C19.5599 10.7852 19.6583 11.017 19.6625 11.2598C19.6668 11.5027 19.5767 11.7378 19.4111 11.9155L11.9111 19.4155C11.8244 19.503 11.7212 19.5724 11.6075 19.6196C11.4937 19.6668 11.3717 19.6909 11.2486 19.6905Z"
           fill={color}
           stroke={color}
-          strokeWidth="0.4"
+          stroke-width="0.4"
         />
       </g>
       <defs>
         <clipPath id="clip0_4286_29361">
-          <rect width={size} height={size} fill="white" />
+          <rect width="30" height="30" fill="white" />
         </clipPath>
       </defs>
     </svg>

package/src/components/DataDisplay/AccordionGroup/AccordionGroup.tsx

@@ -19,6 +19,7 @@ export const AccordionGroup = ({ data, containerSx }: AccordionGroupProps) => {
     <Box sx={{ ...containerSx }}>
       {data?.map((itemProps, index) => (
         <Accordion
+          elevation={0}
           {...itemProps}
           expanded={expanded}
           index={index}

package/src/components/DataDisplay/Card/Card.tsx

@@ -48,7 +48,7 @@ export interface CardProps {
   checkBox?: boolean;
 
   moreOptions?: boolean;
-  menu?: Array<ReactNode>;
+  menu?: ReactNode[] | ((props: { close: () => void }) => ReactNode[]);
   icon?: ReactNode;
   headerSx?: SxProps;
   statusSx?: SxProps;

package/src/components/Input/DatePicker/DatePicker.tsx

@@ -20,6 +20,7 @@ type DatePickerProps<
   required?: boolean;
   containerProps?: StackProps;
   openPickerIcon?: React.ElementType;
+  error?: any;
 } & MuiDatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>;
 
 export const DatePicker = <
@@ -37,6 +38,7 @@ export const DatePicker = <
   shortcutsItems = [],
   openPickerIcon: Icon = Icons.NoteIcon,
   containerProps,
+  error,
   ...rest
 }: DatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
   return (
@@ -54,6 +56,7 @@ export const DatePicker = <
           textField: {
             helperText,
             placeholder,
+            error: !!error,
           },
           shortcuts: {
             items: shortcutsItems,

package/src/components/Input/DateTimePicker/DateTimePicker.tsx

@@ -43,6 +43,7 @@ type DateTimePickerProps<
   required?: boolean;
   containerProps?: StackProps;
   openPickerIcon?: React.ElementType;
+  error?: any;
 } & MuiDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>;
 
 export const DateTimePicker = <
@@ -60,6 +61,7 @@ export const DateTimePicker = <
   openPickerIcon: Icon = Icons.NoteIcon,
   containerProps,
   value,
+  error,
   ...rest
 }: DateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
   return (
@@ -77,6 +79,7 @@ export const DateTimePicker = <
           textField: {
             helperText,
             placeholder,
+            error: !!error,
           },
           shortcuts: {
             items: shortcutsItems,

package/src/components/Input/FileUpload/FileUpload.tsx

@@ -5,8 +5,10 @@ import {
   styled,
   SxProps,
   useTheme,
+  useMediaQuery,
 } from '@mui/material';
 import { IconButtons, Icons, PreviewFiles, Typography } from '../../export';
+import { alpha } from '@mui/system';
 
 export type FileUploadProps = {
   label: string;
@@ -24,6 +26,7 @@ export type FileUploadProps = {
   sx?: SxProps;
   showImage?: boolean;
   previewSx?: SxProps;
+  required?: boolean;
 };
 
 export const FileUpload = ({
@@ -42,8 +45,10 @@ export const FileUpload = ({
   showImage,
   previewSx,
   sx,
+  required,
 }: FileUploadProps) => {
   const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down(768));
 
   if (!onChange) {
     return <Typography>onChange Missing</Typography>;
@@ -81,7 +86,14 @@ export const FileUpload = ({
 
   return (
     <Stack sx={sx}>
-      <Typography variant="label1">{label}</Typography>
+      <Typography variant="label1">
+        {label}{' '}
+        {required && (
+          <span style={{ color: `${theme.palette.tertiary.main}` }}>
+            {' *'}
+          </span>
+        )}
+      </Typography>{' '}
       <input
         accept={accept}
         style={{ display: 'none' }}
@@ -92,19 +104,11 @@ export const FileUpload = ({
         disabled={disabled}
         onChange={handleFileChange}
       />
-
       <FormLabel htmlFor={name}>
         <StyledFileSelectorContainer>
           <Stack display={'flex'} alignItems={'center'}>
             <Icons.ExportIcon size={20} />
-            <Typography
-              color={
-                disabled
-                  ? theme.palette.secondary.dark
-                  : theme.palette.primary.main
-              }
-              variant="label2"
-            >
+            <Typography color={theme.palette.text.tertiary} variant="label2">
               {inputText ?? 'Upload Files'}
             </Typography>
           </Stack>
@@ -123,11 +127,13 @@ export const FileUpload = ({
           </Typography>
         )}
       </FormLabel>
-
       <Box display="flex" gap="12px" flexWrap="wrap">
         {showImage ? (
           files.map((file, index) => (
-            <StyledSelectedFileContainer key={index}>
+            <StyledSelectedFileContainer
+              key={index}
+              isSmallScreen={isSmallScreen}
+            >
               <Box
                 sx={{
                   height: '120px',
@@ -183,13 +189,15 @@ export const FileUpload = ({
   );
 };
 
-const StyledSelectedFileContainer = styled(Box)(({ theme }) => ({
+const StyledSelectedFileContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'isSmallScreen',
+})<{ isSmallScreen: boolean }>(({ theme, isSmallScreen }) => ({
   borderRadius: '10px',
   position: 'relative',
-  flex: '1 1 auto',
   textAlign: 'center',
   marginTop: '5px',
-  minWidth: '400px',
+  minWidth: isSmallScreen ? '100%' : '300px', // Full width on small screens, 300px on larger
+  maxWidth: '100%',
   '& > button': {
     position: 'absolute',
     right: '-4%',
@@ -198,14 +206,17 @@ const StyledSelectedFileContainer = styled(Box)(({ theme }) => ({
 }));
 
 const StyledFileSelectorContainer = styled(Box)(({ theme }) => ({
-  border: '1.5px dotted',
+  border: '2.5px dashed',
   height: '120px',
   display: 'flex',
   width: '100%',
+  minWidth: '200px',
   borderRadius: '5px',
-  borderColor: theme.palette.primary.main,
+  borderColor: theme.palette.border.primary,
   justifyContent: 'center',
   alignItems: 'center',
+  padding: '8px',
+  textAlign: 'center',
   '&:hover': {
     borderColor: theme.palette.primary.light,
     backgroundColor: theme.palette.secondary.light,

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

@@ -18,6 +18,7 @@ import {
   Typography,
 } from '../../export';
 import { FiltersAnchor } from './components/Anchors';
+import { ManageFilters } from './components/ManageFilters/ManageFilters';
 import { SearchBar } from './components/SearchBar';
 
 interface PageHeaderProps {
@@ -64,6 +65,8 @@ export const PageHeader = ({
 }: PageHeaderProps) => {
   const [expanded, setExpanded] = useState(false);
 
+  const [hiddenLabels, setHiddenLabels] = useState<string[]>([]);
+
   const dispatch = useDispatch();
 
   const wrapProps = (element: ReactElement): ReactElement => {
@@ -100,6 +103,10 @@ export const PageHeader = ({
 
   const isTableMode = columns && uniqueId;
 
+  const finalFilterComponents = filterComponents.filter(
+    (filter) => !hiddenLabels.includes(filter.props['label']),
+  );
+
   return (
     <motion.div
       style={{
@@ -149,10 +156,10 @@ export const PageHeader = ({
       )}
       {expanded && (
         <Stack direction="row" width="100%" alignItems="center" gap={2}>
-          {filterComponents.map((filter, index) => (
+          {finalFilterComponents.map((filter, index) => (
             <Fragment key={index}>
               {wrapProps(filter)}
-              {index < filterComponents.length - 1 && (
+              {index < finalFilterComponents.length - 1 && (
                 <Divider
                   orientation="vertical"
                   style={{
@@ -163,6 +170,27 @@ export const PageHeader = ({
               )}
             </Fragment>
           ))}
+          <ManageFilters
+            filterLabels={filterComponents.map((filter) => {
+              return filter.props['label'] || 'Label Not Found';
+            })}
+            selectedFilterLabels={finalFilterComponents.map(
+              (filter) => filter.props['label'] || 'Label Not Found',
+            )}
+            handleCheckboxChange={function (
+              label: string,
+              checked: boolean,
+            ): void {
+              if (checked) {
+                setHiddenLabels(hiddenLabels.filter((l) => label !== l));
+              } else {
+                setHiddenLabels([...hiddenLabels, label]);
+              }
+            }}
+            handleReset={() => {
+              setHiddenLabels([]);
+            }}
+          />
         </Stack>
       )}
     </motion.div>

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

@@ -0,0 +1,172 @@
+import {
+  MenuListProps,
+  MenuProps,
+  Stack,
+  styled,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { useState } from 'react';
+import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
+import { DropdownMenu } from '../../../../Navigation/export';
+
+export type ManageFiltersProps = {
+  filterLabels: string[];
+  selectedFilterLabels: string[];
+  handleCheckboxChange: (label: string, checked: boolean) => void;
+  handleReset: () => void;
+  menuProps?: Omit<MenuProps, 'open'>;
+  menuListProps?: MenuListProps;
+};
+
+const FooterContainerContainer = styled(Stack)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.defaultBackground,
+  borderRadius: '4px',
+  height: '40px',
+}));
+
+export const ManageFiltersMenuFooter = ({
+  onClick,
+}: {
+  onClick: () => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <FooterContainerContainer direction="row" alignItems="center">
+      <Button
+        variant="text"
+        onClick={onClick}
+        sx={{
+          fontFamily: 'Heebo',
+          minWidth: '0px',
+          margin: '0px 16px',
+        }}
+        disableRipple
+        color={theme.palette.text.tertiary}
+      >
+        Reset
+      </Button>
+    </FooterContainerContainer>
+  );
+};
+
+export const ManageFilters = ({
+  filterLabels,
+  selectedFilterLabels,
+  handleCheckboxChange,
+  handleReset,
+  ...props
+}: ManageFiltersProps) => {
+  const theme = useTheme();
+  const [search, setSearch] = useState<string>('');
+
+  const filteredOptions = filterLabels.filter((label) =>
+    label.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  return (
+    <DropdownMenu
+      menuListProps={{
+        sx: {
+          padding: '0px',
+          width: '250px',
+        },
+        ...props.menuListProps,
+      }}
+      anchor={({ open }: { open: (e: any) => void }) => (
+        <Button onClick={open} sx={{ gap: '1px' }} variant="text">
+          {<Icons.ConfigureIcon />} Manage Filters
+        </Button>
+      )}
+      menuProps={{
+        ...props.menuProps,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'left',
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'left',
+        },
+      }}
+      menuHeader={
+        <SearchBar
+          fullWidth
+          size="small"
+          placeholder="Search"
+          onSearch={(value) => {
+            setSearch(value);
+          }}
+        />
+      }
+      menuListContainerSx={{
+        margin: '12px 12px 0px 12px',
+        gap: 0,
+        maxHeight: '310px',
+        overflowY: 'scroll',
+      }}
+      menu={filteredOptions.map((item, index) => (
+        <SingleCheckBox
+          key={index}
+          formControlLabelProps={{
+            labelPlacement: 'start',
+            sx: {
+              display: 'flex',
+              justifyContent: 'space-between',
+              margin: '0px',
+              width: '100%',
+              '.MuiFormControlLabel-label': {
+                width: '100%',
+              },
+            },
+          }}
+          icon={<Icons.VisibilityOffIcon />}
+          checkedIcon={<Icons.VisibilityIcon />}
+          checked={selectedFilterLabels.includes(item)}
+          label={
+            <Typography
+              color={
+                !selectedFilterLabels.includes(item)
+                  ? theme.palette.text.tertiary
+                  : theme.palette.text.primary
+              }
+              variant="subtitle3"
+            >
+              {item}
+            </Typography>
+          }
+          onChange={(e) => {
+            handleCheckboxChange(item, e.target.checked);
+          }}
+        />
+      ))}
+      menuFooter={<ManageFiltersMenuFooter onClick={handleReset} />}
+    />
+  );
+};
+
+// const FilterAnchorContainer = styled(Box)(({ theme }) => ({
+//   height: '40px',
+//   width: '40px',
+//   backgroundColor: theme.palette.secondary.main,
+//   borderRadius: '5px',
+//   display: 'flex',
+//   alignItems: 'center',
+//   justifyContent: 'center',
+// }));
+
+/* <DropDownIcon
+  icon={{
+    icon: (
+      <Badge
+        overlap="circular"
+        variant={values.length > 0 ? 'dot' : 'standard'}
+      >
+        <FilterAnchorContainer>
+          <FilterViewIcon />
+        </FilterAnchorContainer>
+      </Badge>
+    ),
+  }}
+  handleClick={open}
+/>; */

package/src/components/Navigation/DropDownMenu/DropDownMenu.tsx

@@ -7,7 +7,7 @@ import {
   StackProps,
   useTheme,
 } from '@mui/material';
-import { Fragment, ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 export type DropdownMenuProps = {
   anchor: (props: { open: (e: any) => void }) => ReactNode;
@@ -73,6 +73,7 @@ export const DropdownMenu = ({
         }}
         MenuListProps={{
           ...menuListProps,
+          // sx: { padding: '0px' },
         }}
         {...menuProps}
       >
@@ -96,12 +97,12 @@ export const DropdownMenu = ({
           {useMenuSlot && menuSlot
             ? menuSlot({ close: handleClose })
             : menuItems.map((item, index) => (
-                <Fragment key={index}>
+                <div key={index}>
                   {item}
                   {index < menuItems.length - 1 && (
                     <Divider flexItem sx={{ margin: '0 !important' }} />
                   )}
-                </Fragment>
+                </div>
               ))}
         </Stack>
         {menuFooter}

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

@@ -12,6 +12,7 @@ export interface TabsContainerProps {
   onTabChange?: (tabKey: string) => void;
   currentTabIndex?: number;
   tabsProps: TabsProps;
+  variant?: 'fixed' | 'dynamic';
 }
 
 const TabContent = styled(Box)(({ theme }) => ({
@@ -27,11 +28,19 @@ const TabContent = styled(Box)(({ theme }) => ({
   },
 }));
 
+const DynamicContent = styled(Box)(({ theme }) => ({
+  width: '100%',
+  height: 'max-content',
+  backgroundColor: theme.palette.surface.paperBackground,
+  '&::-webkit-scrollbar': { display: 'none' },
+}));
+
 export const TabsContainer = ({
   tabs,
   onTabChange,
   currentTabIndex = 0,
   tabsProps,
+  variant = 'fixed',
 }: TabsContainerProps) => {
   const [currentTab, setCurrentTab] = useState(tabs[currentTabIndex]?.key);
 
@@ -67,9 +76,15 @@ export const TabsContainer = ({
           />
         ))}
       </Tabs>
-      <TabContent>
-        {tabs.find((tab) => tab?.key === currentTab)?.component}
-      </TabContent>
+      {variant === 'fixed' ? (
+        <TabContent>
+          {tabs.find((tab) => tab?.key === currentTab)?.component}
+        </TabContent>
+      ) : (
+        <DynamicContent>
+          {tabs.find((tab) => tab?.key === currentTab)?.component}
+        </DynamicContent>
+      )}
     </>
   );
 };

package/src/components/Navigation/export.ts

@@ -7,7 +7,6 @@ export * from './DropDownMenu/DropDownButton';
 export * from './DropDownMenu/DropDownIcon';
 export * from './DropDownMenu/DropDownMenu';
 export * from './DropDownMenu/DropdownMenuItem';
-export * from './ManageFilters/ManageFilters';
 export * from './PreviewFiles/PreviewFiles';
 export * from './Sidebar/Sidebar';
 export * from './Stepper/Stepper';

package/src/stories/Navigation/FileUpload.stories.tsx

@@ -0,0 +1,43 @@
+import { action } from '@storybook/addon-actions';
+import { StoryFn } from '@storybook/react/*';
+import { FileUpload, FileUploadProps } from '../../components/export';
+
+export default {
+  title: 'Navigation/FileUpload',
+  component: FileUpload,
+  argTypes: {
+    onChange: { action: 'onChange' },
+    handleRemove: { action: 'handleRemove' },
+    onInvalidFile: { action: 'onInvalidFile' },
+    label: { control: 'text' },
+    accept: { control: 'text' },
+    disabled: { control: 'boolean' },
+    multiple: { control: 'boolean' },
+    hideDeleteButton: { control: 'boolean' },
+    showImage: { control: 'boolean' },
+    errorText: { control: 'text' },
+  },
+};
+
+const Template: StoryFn<FileUploadProps> = (args: any) => (
+  <FileUpload {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Upload File',
+  files: [],
+  onChange: action('onChange'),
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+};
+
+export const AcceptOnlyPDF = Template.bind({});
+AcceptOnlyPDF.args = {
+  ...Default.args,
+  accept: '.pdf',
+};

package/src/components/Navigation/ManageFilters/ManageFilters.tsx

@@ -1,130 +0,0 @@
-import { MenuListProps, MenuProps, Typography } from '@mui/material';
-import { ReactNode, useState } from 'react';
-import { Button, Icons, SearchBar, SingleCheckBox } from '../../export';
-import { DropdownMenu } from '../export';
-
-type Options = {
-  label: string;
-  value: ReactNode;
-};
-
-export type ManageFiltersProps = {
-  options: Options[];
-  onChange: (values: ReactNode[]) => void;
-  menuProps?: Omit<MenuProps, 'open'>;
-  menuListProps?: MenuListProps;
-};
-
-export const ManageFilters = ({
-  options,
-  onChange,
-  ...props
-}: ManageFiltersProps) => {
-  const [values, setValues] = useState<Options[]>([]);
-  const [search, setSearch] = useState<string>('');
-
-  const filteredOptions = options.filter((option) =>
-    option.label.toLowerCase().includes(search.toLowerCase()),
-  );
-
-  const handleCheckboxChange = (
-    value: ReactNode,
-    label: string,
-    checked: boolean,
-  ) => {
-    const updatedValues = checked
-      ? [...values, { label, value }]
-      : values.filter((v) => v.label !== label);
-    setValues(updatedValues);
-    onChange(updatedValues.map((v) => v.value));
-  };
-
-  return (
-    <DropdownMenu
-      menuListProps={{
-        sx: {
-          padding: '12px',
-          width: '250px',
-        },
-        ...props.menuListProps,
-      }}
-      anchor={({ open }: { open: (e: any) => void }) => (
-        <Button onClick={open} sx={{ gap: '1px' }} variant="text">
-          {<Icons.ConfigureIcon />} Manage Filters
-        </Button>
-      )}
-      menuProps={{
-        ...props.menuProps,
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'left',
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'left',
-        },
-      }}
-      menuHeader={
-        <SearchBar
-          fullWidth
-          size="small"
-          placeholder="Search"
-          onSearch={(value) => {
-            setSearch(value);
-          }}
-        />
-      }
-      menuListContainerSx={{
-        margin: '10px 5px 0px 5px',
-        gap: 1,
-        maxHeight: '350px',
-      }}
-      menu={filteredOptions.map((item, index) => (
-        <SingleCheckBox
-          key={index}
-          formControlLabelProps={{
-            labelPlacement: 'start',
-            sx: {
-              display: 'flex',
-              justifyContent: 'space-between',
-              marginLeft: '0px',
-            },
-          }}
-          icon={<Icons.VisibilityIcon />}
-          checkedIcon={<Icons.VisibilityOffIcon />}
-          checked={values.map((s) => s.label).includes(item.label)}
-          label={<Typography variant="subtitle3">{item.label}</Typography>}
-          onChange={(e) => {
-            handleCheckboxChange(item.value, item.label, e.target.checked);
-          }}
-        />
-      ))}
-    />
-  );
-};
-
-// const FilterAnchorContainer = styled(Box)(({ theme }) => ({
-//   height: '40px',
-//   width: '40px',
-//   backgroundColor: theme.palette.secondary.main,
-//   borderRadius: '5px',
-//   display: 'flex',
-//   alignItems: 'center',
-//   justifyContent: 'center',
-// }));
-
-/* <DropDownIcon
-  icon={{
-    icon: (
-      <Badge
-        overlap="circular"
-        variant={values.length > 0 ? 'dot' : 'standard'}
-      >
-        <FilterAnchorContainer>
-          <FilterViewIcon />
-        </FilterAnchorContainer>
-      </Badge>
-    ),
-  }}
-  handleClick={open}
-/>; */