@campxdev/react-blueprint 1.2.4 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/App.tsx

@@ -1,13 +1,12 @@
-import { Button } from '@mui/material';
-import { useState } from 'react';
+import { Stack } from '@mui/material';
+import { ReactNode, useState } from 'react';
 import './App.css';
-import Chips from './components/DataDisplay/Chips/Chips';
 import { Tags } from './components/Input/Tags/Tags';
-import { AppHeader, SearchBar, UnAuthorized } from './components/export';
+import { AppHeader, SearchBar } from './components/export';
 import Providers from './contexts/Providers';
 
 function App() {
-  const [selected, setSelected] = useState<string | number | string[]>([]);
+  const [selected, setSelected] = useState<ReactNode[]>([]);
   const sampleChips = [
     { label: 'Chip1', value: 1 },
     { label: 'Chip2', value: 2 },
@@ -23,24 +22,15 @@ function App() {
         collapsed={false}
         institutionsData={[]}
       />
-      <UnAuthorized
-        component={
-          <Button sx={{ marginTop: '20px' }} variant="contained">
-            Click Here to Login
-          </Button>
-        }
-      />
       <SearchBar onSearch={() => {}} value={''} placeholder="Search by Name" />
-      <Chips
-        list={sampleChips}
-        singleSelection={false}
-        selected={selected}
-        onSelected={(selectedValue) => {
-          console.log(selectedValue, 'selectedValue');
-          setSelected(selectedValue);
-        }}
-      />
+
       <Tags tags={sampleChips} />
+
+      <Stack>
+        {selected.map((item) => {
+          return <>{item}</>;
+        })}
+      </Stack>
     </Providers>
   );
 }

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

@@ -2,51 +2,57 @@ import { useTheme } from '@mui/material';
 
 export const CampxFullLogoIcon = () => {
   const theme = useTheme();
-  const color = theme.palette.mode === 'dark' ? '#FFFFFF' : '#1e19f5';
 
   return (
     <svg
-      id="Layer_2"
-      data-name="Layer 2"
+      width="130"
+      height="24"
+      viewBox="0 0 130 24"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 1177.77 217.66"
-      style={{
-        strokeWidth: '0px',
-        fill: theme.palette.text.primary,
-      }}
     >
-      {/* <defs>
-    <style>
-      .cls-1, .cls-2, .cls-3 {
-        stroke-width: 0px;
-      }
-
-      .cls-2 {
-        fill: #1e19f5;
-      }
-
-      .cls-3 {
-        fill: #121212;
-      }
-    </style>
-  </defs> */}
-      <g id="Layer_1-2" data-name="Layer 1">
-        <g>
-          <g id="Group_4155" data-name="Group 4155">
-            <path d="m189.83,186.55c-21.46,21.16-49.17,30.99-79.27,30.99C33.08,217.54.3,164.2,0,109.96-.3,55.43,35.17,0,110.56,0c28.31,0,55.13,10.73,76.59,31.89l-26.22,25.33c-13.71-13.41-32.18-19.67-50.36-19.67-50.36,0-72.12,37.55-71.82,72.41.3,34.57,20.26,70.63,71.82,70.63,18.18,0,38.74-7.45,52.45-21.16l26.82,27.12Z" />
-            <path d="m375.48,173.44h-109.07l-17.88,39.34h-42.61L299.49,4.17h42.91l93.57,208.6h-42.91l-17.58-39.34Zm-54.53-125.46l-38.74,88.8h77.48l-38.74-88.8Z" />
-            <path d="m652.33,61.69l-67.94,90.59h-7.75l-66.46-90.89v151.68h-39.34V4.47h45.3l65.26,89.7L646.66,4.47h45v208.6h-39.34V61.69Z" />
-            <path d="m789.7,151.39v61.39h-39.34V4.17c32.48,0,65.86-.3,98.34-.3,102.51,0,102.81,146.62,0,147.51h-59Zm0-36.06h59c50.36,0,50.07-73.91,0-73.91h-59v73.91Z" />
-            <path
-              id="Subtraction_8"
-              data-name="Subtraction 8"
-              style={{ fill: color }}
-              d="m1149.43,217.66h-50.26l-29.65-40.82,25.85-35.57,55,75.71-.94.68h0Zm-153.97,0h-50.36l-.94-.69,77.35-106.47L944.16,4.04l.52-.38h51.01l51.73,71.2h.01s25.9,35.63,25.9,35.63v.02s.03.05.03.05l-25.9,35.65-.04-.05-51.95,71.51h0Zm99.7-137.63h0l-25.85-35.57,29.64-40.8h50.9l.52.38-55.21,76Z"
-            />
-          </g>
-          <g>
-            <path d="m1165.77,3.47c-2.37,0-4.69.7-6.67,2.02-1.97,1.32-3.51,3.19-4.42,5.39-.91,2.19-1.15,4.61-.68,6.93.46,2.33,1.61,4.47,3.28,6.14,1.68,1.68,3.82,2.82,6.14,3.28,2.33.46,4.74.23,6.93-.68,2.19-.91,4.07-2.45,5.39-4.42,1.32-1.97,2.02-4.29,2.02-6.67,0-3.18-1.26-6.23-3.51-8.49-2.25-2.25-5.3-3.51-8.49-3.51h0Zm0,21.6c-1.9,0-3.75-.56-5.33-1.62-1.58-1.05-2.81-2.55-3.54-4.31s-.92-3.68-.55-5.55c.37-1.86,1.28-3.57,2.63-4.92s3.05-2.26,4.92-2.63c1.86-.37,3.79-.18,5.55.55,1.75.73,3.25,1.96,4.31,3.54,1.05,1.58,1.62,3.43,1.62,5.33,0,2.55-1.01,4.99-2.81,6.79-1.8,1.8-4.24,2.81-6.79,2.81h0Z" />
-            <path d="m1170.57,13.07c0-.95-.38-1.87-1.05-2.55s-1.59-1.05-2.55-1.05h-6v12h2.4v-4.8h1.75l3.2,4.8h2.88l-3.3-4.94c.76-.2,1.43-.65,1.92-1.28.48-.62.74-1.39.75-2.18Zm-3.6,1.2h-3.6v-2.4h3.6c.32,0,.62.13.85.35.22.23.35.53.35.85s-.13.62-.35.85-.53.35-.85.35Z" />
+      <g id="Campx LogoAsset 2 1" clip-path="url(#clip0_4651_30457)">
+        <g id="Layer 1">
+          <g id="Group">
+            <g id="Group 4155">
+              <path
+                id="Vector"
+                d="M20.9316 20.5697C18.5653 22.9029 15.5099 23.9868 12.191 23.9868C3.64773 23.9868 0.0332872 18.1053 0.00020804 12.1246C-0.0328711 6.11192 3.87818 0 12.191 0C15.3125 0 18.2698 1.18313 20.6361 3.51631L17.7449 6.30929C16.2332 4.83065 14.1967 4.1404 12.1921 4.1404C6.63919 4.1404 4.23985 8.2808 4.27293 12.1246C4.30601 15.9364 6.50687 19.9125 12.1921 19.9125C14.1967 19.9125 16.4637 19.0911 17.9754 17.5793L20.9327 20.5697H20.9316Z"
+                fill={theme.palette.text.primary}
+              />
+              <path
+                id="Vector_2"
+                d="M41.4024 19.1243H29.3759L27.4044 23.4621H22.7061L33.0234 0.459961H37.7548L48.0722 23.461H43.3408L41.4024 19.1232V19.1243ZM35.3897 5.29061L31.1181 15.082H39.6613L35.3897 5.29061Z"
+                fill={theme.palette.text.primary}
+              />
+              <path
+                id="Vector_3"
+                d="M71.9288 6.80245L64.4374 16.7912H63.5829L56.2548 6.76937V23.4942H51.917V0.493164H56.9119L64.1077 10.3838L71.3036 0.493164H76.2654V23.4942H71.9276V6.80245H71.9288Z"
+                fill={theme.palette.text.primary}
+              />
+              <path
+                id="Vector_4"
+                d="M87.0751 16.6929V23.462H82.7373V0.459837C86.3187 0.459837 89.9993 0.426758 93.5806 0.426758C104.884 0.426758 104.917 16.5936 93.5806 16.6918H87.0751V16.6929ZM87.0751 12.7168H93.5806C99.1335 12.7168 99.1015 4.56716 93.5806 4.56716H87.0751V12.7168Z"
+                fill={theme.palette.text.primary}
+              />
+              <path
+                id="Subtraction 8"
+                d="M126.74 23.9998H121.198L117.929 19.4988L120.779 15.5767L126.844 23.9248L126.74 23.9998ZM109.763 23.9998H104.21L104.106 23.9237L112.635 12.1839L104.106 0.445221L104.164 0.40332H109.788L115.492 8.2541H115.493L118.349 12.1828V12.185L118.353 12.1905L115.497 16.1214L115.492 16.1159L109.764 24.0009L109.763 23.9998ZM120.756 8.82416L117.906 4.90208L121.174 0.40332H126.787L126.844 0.445221L120.756 8.82526V8.82416Z"
+                fill={theme.palette.primary.main}
+              />
+            </g>
+            <g id="Group_2">
+              <path
+                id="Vector_5"
+                d="M128.542 0.382939C128.281 0.382939 128.025 0.460123 127.807 0.605671C127.59 0.751219 127.42 0.957412 127.32 1.19999C127.219 1.44147 127.193 1.70831 127.245 1.96412C127.295 2.22103 127.422 2.457 127.606 2.64114C127.792 2.82638 128.028 2.95208 128.283 3.0028C128.54 3.05353 128.806 3.02816 129.047 2.92782C129.289 2.82748 129.496 2.65768 129.642 2.44046C129.787 2.22324 129.865 1.96743 129.865 1.705C129.865 1.35436 129.726 1.01806 129.477 0.768862C129.229 0.520768 128.893 0.381836 128.541 0.381836L128.542 0.382939ZM128.542 2.76463C128.333 2.76463 128.129 2.70289 127.955 2.58601C127.781 2.47023 127.645 2.30483 127.564 2.11077C127.484 1.91671 127.463 1.705 127.504 1.49881C127.545 1.29372 127.645 1.10517 127.794 0.95631C127.943 0.807454 128.13 0.707114 128.336 0.666316C128.541 0.625519 128.754 0.646469 128.948 0.726961C129.141 0.807454 129.307 0.943078 129.423 1.11729C129.539 1.29151 129.602 1.4955 129.602 1.705C129.602 1.98617 129.491 2.25522 129.292 2.45369C129.094 2.65217 128.825 2.76353 128.544 2.76353L128.542 2.76463Z"
+                fill={theme.palette.text.primary}
+              />
+              <path
+                id="Vector_6"
+                d="M129.071 1.44187C129.071 1.33712 129.029 1.23568 128.955 1.1607C128.882 1.08572 128.78 1.04492 128.674 1.04492H128.013V2.36809H128.277V1.83882H128.47L128.823 2.36809H129.141L128.777 1.82338C128.861 1.80133 128.934 1.75171 128.989 1.68225C129.041 1.61388 129.07 1.52898 129.071 1.44187ZM128.674 1.57419H128.277V1.30955H128.674C128.71 1.30955 128.743 1.32389 128.768 1.34815C128.792 1.37351 128.807 1.40659 128.807 1.44187C128.807 1.47716 128.792 1.51023 128.768 1.5356C128.744 1.56096 128.71 1.57419 128.674 1.57419Z"
+                fill={theme.palette.text.primary}
+              />
+            </g>
           </g>
         </g>
       </g>

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

@@ -3,23 +3,25 @@ import { useTheme } from '@mui/material';
 export const CampxIcon = ({ size = 16 }) => {
   const theme = useTheme();
 
-  const color = theme.palette.mode === 'dark' ? 'white' : 'blue';
-
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={size}
       height={size}
-      viewBox="0 5 101.234 104.906"
-      style={{
-        fill: color,
-      }}
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        id="Subtraction_130"
-        data-name="Subtraction 130"
-        d="M100.772,104.906H76.085L61.518,84.856l12.7-17.476,27.02,37.19-.463.336Zm-75.622,0H.463L0,104.57,37.92,52.377,0,.185.254,0H25.26L50.617,34.9l.005-.007,12.7,17.475-.005.007.018.024-12.7,17.476-.017-.024L25.15,104.906ZM74.112,37.516h0L61.415,20.04,75.975,0H100.98l.254.185L74.112,37.516Z"
-      />
+      <g id="Layer 1">
+        <g id="Group">
+          <g id="Group 4155">
+            <path
+              id="Subtraction 8"
+              d="M27.3643 27.9987H20.7886L16.9093 22.658L20.2914 18.0042L27.4873 27.9097L27.3643 27.9987ZM7.21966 27.9987H0.630798L0.507812 27.9084L10.6279 13.9784L0.507812 0.0497173L0.575849 0H7.24974L14.0178 9.31545H14.0192L17.4078 13.9771V13.9797L17.4117 13.9863L14.0231 18.6505L14.0178 18.644L7.22096 28L7.21966 27.9987ZM20.2639 9.99187L16.8818 5.33807L20.7598 0H27.4193L27.4873 0.0497173L20.2639 9.99318V9.99187Z"
+              fill={theme.palette.primary.main}
+            />
+          </g>
+        </g>
+      </g>
     </svg>
   );
 };

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

@@ -2,43 +2,24 @@ import { useTheme } from '@mui/material';
 
 export const CheckedCheckboxIcon = ({ size = 16 }) => {
   const theme = useTheme();
-  const color = theme.palette.text.primary;
+  const color = theme.palette.primary.main;
+  const paperBackground = theme.palette.surface.paperBackground;
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={size}
       height={size}
-      viewBox="0 0 20 20"
-      style={{
-        fill: color,
-      }}
+      viewBox="0 0 16 17"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        id="Group_9716"
-        data-name="Group 9716"
-        transform="translate(-130 -30.299)"
-      >
-        <g
-          id="Rectangle_23617"
-          data-name="Rectangle 23617"
-          transform="translate(130 30.299)"
-          fill="#f8f8f8"
-          stroke="#323167"
-          stroke-width="1"
-        >
-          <rect width="20" height="20" rx="3" stroke="none" />
-          <rect x="0.5" y="0.5" width="19" height="19" rx="2.5" fill="none" />
-        </g>
-        <rect
-          id="Rectangle_23618"
-          data-name="Rectangle 23618"
-          width="8"
-          height="8"
-          rx="1"
-          transform="translate(136 36.299)"
-          fill="#323167"
-        />
-      </g>
+      <path
+        d="M0.5 4.5C0.5 2.567 2.067 1 4 1H12C13.933 1 15.5 2.567 15.5 4.5V12.5C15.5 14.433 13.933 16 12 16H4C2.067 16 0.5 14.433 0.5 12.5V4.5Z"
+        fill={paperBackground}
+        stroke={color}
+      />
+      <path
+        d="M5 7.5C5 6.39543 5.89543 5.5 7 5.5H9C10.1046 5.5 11 6.39543 11 7.5V9.5C11 10.6046 10.1046 11.5 9 11.5H7C5.89543 11.5 5 10.6046 5 9.5V7.5Z"
+        fill={color}
+      />
     </svg>
   );
 };

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

@@ -0,0 +1,21 @@
+import { useTheme } from '@mui/material';
+
+export const ComfortableIcon = ({ size = 16, color }: any) => {
+  const theme = useTheme();
+  const updatedColor = color ?? theme.palette.primary.main;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 21"
+      style={{
+        stroke: updatedColor,
+        fill: updatedColor,
+      }}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect y="0.5" width="20" height="9" />
+      <rect y="11.5" width="20" height="9" />
+    </svg>
+  );
+};

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

@@ -0,0 +1,23 @@
+import { useTheme } from '@mui/material';
+
+export const CompactIcon = ({ size = 16, color }: any) => {
+  const theme = useTheme();
+  const updatedColor = color ?? theme.palette.primary.main;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 21"
+      style={{
+        stroke: updatedColor,
+        fill: updatedColor,
+      }}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect y="0.5" width="20" height="3.5" />
+      <rect y="6" width="20" height="3.5" />
+      <rect y="11.5" width="20" height="3.5" />
+      <rect y="17" width="20" height="3.5" />
+    </svg>
+  );
+};

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

@@ -0,0 +1,35 @@
+import { useTheme } from '@mui/material';
+
+export const ConfigureIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.primary.main;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        fill: color,
+        stroke: color,
+      }}
+    >
+      <g clip-path="url(#clip0_2365_6420)">
+        <path
+          d="M7.99983 15.0868C7.56259 15.0945 7.1308 14.9889 6.7465 14.7802L3.07983 12.6668C1.5865 11.6608 1.49316 11.5088 1.49316 9.92751V6.07351C1.49316 4.49351 1.57983 4.34018 3.0465 3.34684L6.73983 1.21418C7.12603 1.01378 7.55474 0.90918 7.98983 0.90918C8.42492 0.90918 8.85364 1.01378 9.23983 1.21418L12.9198 3.33418C14.4132 4.34084 14.5065 4.49418 14.5065 6.07418V9.92084C14.5065 11.5008 14.4198 11.6542 12.9532 12.6475L9.25983 14.7808C8.87283 14.9887 8.43906 15.0941 7.99983 15.0868ZM7.99983 1.91351C7.74083 1.90476 7.48386 1.96212 7.25316 2.08018L3.5865 4.20018C2.49983 4.93351 2.49983 4.93351 2.49983 6.07351V9.92018C2.49983 11.0602 2.49983 11.0602 3.61316 11.8135L7.25316 13.9135C7.48735 14.0254 7.74361 14.0835 8.00316 14.0835C8.26272 14.0835 8.51898 14.0254 8.75316 13.9135L12.4198 11.7935C13.4998 11.0602 13.4998 11.0602 13.4998 9.92018V6.07351C13.4998 4.93351 13.4998 4.93351 12.3865 4.18018L8.7465 2.08018C8.5158 1.96212 8.25883 1.90476 7.99983 1.91351Z"
+          stroke-width="0.4"
+        />
+        <path
+          d="M8 10.5C7.50555 10.5 7.0222 10.3534 6.61108 10.0787C6.19995 9.80397 5.87952 9.41352 5.6903 8.95671C5.50108 8.49989 5.45157 7.99723 5.54804 7.51228C5.6445 7.02732 5.8826 6.58187 6.23223 6.23223C6.58187 5.8826 7.02732 5.6445 7.51228 5.54804C7.99723 5.45157 8.49989 5.50108 8.95671 5.6903C9.41352 5.87952 9.80397 6.19995 10.0787 6.61108C10.3534 7.0222 10.5 7.50555 10.5 8C10.4998 8.66299 10.2364 9.29877 9.76757 9.76757C9.29877 10.2364 8.66299 10.4998 8 10.5ZM8 6.5C7.70333 6.5 7.41332 6.58797 7.16665 6.7528C6.91997 6.91762 6.72771 7.15189 6.61418 7.42598C6.50065 7.70006 6.47095 8.00167 6.52882 8.29264C6.5867 8.58361 6.72956 8.85088 6.93934 9.06066C7.14912 9.27044 7.41639 9.4133 7.70737 9.47118C7.99834 9.52906 8.29994 9.49935 8.57403 9.38582C8.84812 9.27229 9.08238 9.08003 9.24721 8.83336C9.41203 8.58668 9.5 8.29667 9.5 8C9.49947 7.60234 9.34127 7.22112 9.06008 6.93993C8.77889 6.65874 8.39766 6.50053 8 6.5Z"
+          stroke-width="0.4"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2365_6420">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { useTheme } from '@mui/material';
+
+export const FilterViewIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        fill: theme.palette.primary.main,
+        stroke: theme.palette.primary.main,
+      }}
+    >
+      <path
+        d="M14.0008 5.16602H2.00022C1.86789 5.16504 1.74127 5.112 1.64775 5.01838C1.55423 4.92476 1.50133 4.79808 1.50049 4.66575C1.50147 4.53351 1.55443 4.40697 1.64794 4.31346C1.74144 4.21996 1.86799 4.16699 2.00022 4.16602H14.0002C14.1325 4.16699 14.259 4.21996 14.3525 4.31346C14.446 4.40697 14.499 4.53351 14.5 4.66575C14.4991 4.79799 14.4463 4.92458 14.3529 5.01819C14.2595 5.1118 14.133 5.1649 14.0008 5.16602Z"
+        strokeWidth="0.4"
+      />
+      <path
+        d="M12.0002 8.5H4.00022C3.86789 8.49902 3.74127 8.44598 3.64775 8.35236C3.55423 8.25874 3.50133 8.13206 3.50049 7.99973C3.50147 7.8675 3.55443 7.74096 3.64794 7.64745C3.74144 7.55394 3.86799 7.50098 4.00022 7.5H12.0002C12.1326 7.50084 12.2592 7.55374 12.3529 7.64726C12.4465 7.74078 12.4995 7.86741 12.5005 7.99973C12.4997 8.13215 12.4467 8.25891 12.353 8.35255C12.2594 8.44618 12.1326 8.49916 12.0002 8.5Z"
+        strokeWidth="0.4"
+      />
+      <path
+        d="M9.33339 11.834H6.66673C6.5344 11.833 6.40778 11.78 6.31425 11.6863C6.22073 11.5927 6.16783 11.466 6.16699 11.3337C6.16797 11.2015 6.22093 11.0749 6.31444 10.9814C6.40795 10.8879 6.53449 10.835 6.66673 10.834H9.33339C9.46572 10.8348 9.5924 10.8877 9.68602 10.9812C9.77964 11.0748 9.83268 11.2014 9.83366 11.3337C9.83282 11.4661 9.77984 11.5929 9.68621 11.6865C9.59257 11.7802 9.46581 11.8331 9.33339 11.834Z"
+        strokeWidth="0.4"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,22 @@
+import { useTheme } from '@mui/material';
+
+export const StandardIcon = ({ size = 16, color }: any) => {
+  const theme = useTheme();
+  const updatedColor = color ?? theme.palette.primary.main;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 21"
+      style={{
+        stroke: updatedColor,
+        fill: updatedColor,
+      }}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect y="0.5" width="20" height="5.33333" />
+      <rect y="7.83398" width="20" height="5.33333" />
+      <rect y="15.166" width="20" height="5.33333" />
+    </svg>
+  );
+};

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

@@ -2,27 +2,21 @@ import { useTheme } from '@mui/material';
 
 export const UnCheckedCheckboxIcon = ({ size = 16 }) => {
   const theme = useTheme();
-  const color = theme.palette.secondary.main;
+  const color = theme.palette.primary.main;
+
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={size}
       height={size}
-      viewBox="0 0 20 20"
-      style={{
-        fill: color,
-      }}
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        id="Rectangle_23614"
-        data-name="Rectangle 23614"
-        fill="#f8f8f8"
-        stroke="rgba(18,18,18,0.1)"
-        stroke-width="1"
-      >
-        <rect width="20" height="20" rx="3" stroke="none" />
-        <rect x="0.5" y="0.5" width="19" height="19" rx="2.5" fill="none" />
-      </g>
+      <path
+        d="M0.5 4.5C0.5 2.567 2.067 1 4 1H12C13.933 1 15.5 2.567 15.5 4.5V12.5C15.5 14.433 13.933 16 12 16H4C2.067 16 0.5 14.433 0.5 12.5V4.5Z"
+        fill="white"
+        stroke={color}
+      />
     </svg>
   );
 };

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

@@ -1,27 +1,20 @@
 import { useTheme } from '@mui/material';
 
-export const VisibilityOffIcon = ({ size = 16 }) => {
+export const VisibilityOffIcon = ({ size = 16, color }: any) => {
   const theme = useTheme();
-  const color = theme.palette.text.primary;
+  const updatedColor = color ?? theme.palette.text.tertiary;
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 17 16"
+      viewBox="0 0 30 30"
       style={{
-        fill: color,
-        stroke: color,
+        fill: updatedColor,
+        stroke: updatedColor,
       }}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g opacity="0.5">
-        <path
-          d="M14.1191 6.7759C14.5889 6.38566 14.9815 5.98185 15.3013 5.60619C15.5012 5.3713 15.4682 5.022 15.2289 4.82702L15.2289 4.82702C14.9909 4.63308 14.6375 4.66423 14.4386 4.89781L14.4386 4.89781C13.3705 6.15247 11.437 7.7143 8.39892 7.7143C5.36076 7.7143 3.42726 6.15246 2.35914 4.8978L2.35914 4.8978C2.16029 4.66422 1.80691 4.63307 1.56886 4.827L14.1191 6.7759ZM14.1191 6.7759C14.1264 6.78787 14.1333 6.8002 14.1398 6.81287L14.1398 6.81293L15.3724 9.22448L15.3724 9.22448C15.5126 9.49877 15.398 9.83078 15.1206 9.96648L15.1206 9.96649C14.8443 10.1016 14.507 9.99292 14.3675 9.71997L14.4565 9.67445L14.3675 9.71996L13.2046 7.44464C12.4682 7.91518 11.5948 8.32026 10.5743 8.56629L11.1071 11.1722C11.1687 11.4734 10.9687 11.7631 10.6657 11.8224C10.3634 11.8816 10.0661 11.6901 10.0047 11.3896L10.0047 11.3896L9.46705 8.76005C9.12496 8.79822 8.76899 8.8186 8.39892 8.8186C8.02879 8.8186 7.67281 8.79822 7.33066 8.76004L6.79308 11.3896L6.69511 11.3696L6.79308 11.3896C6.73164 11.6901 6.43433 11.8816 6.13201 11.8224C5.82908 11.7631 5.62907 11.4734 5.69064 11.1722L5.78862 11.1922L5.69064 11.1722L6.22341 8.56623C5.38442 8.36396 4.64476 8.05415 3.99891 7.68879L2.37696 9.80438L2.37695 9.80439C2.19035 10.0477 1.83898 10.0963 1.59134 9.91461L1.59132 9.9146C1.34241 9.73191 1.29105 9.38484 1.47868 9.14007L1.47869 9.14006L3.06069 7.0766C2.41767 6.59736 1.89937 6.0794 1.4965 5.60618C1.29654 5.37129 1.32953 5.02199 1.56886 4.827L14.1191 6.7759Z"
-          fill="#121212"
-          stroke="#121212"
-          stroke-width="0.2"
-        />
-      </g>
+      <path d="M28.1446 11.9344C27.0918 10.1868 25.7638 8.62586 24.2133 7.31338L27.4787 4.00339C27.6912 3.78043 27.8087 3.48182 27.806 3.17187C27.8034 2.86192 27.6807 2.56542 27.4645 2.34624C27.2483 2.12706 26.9558 2.00274 26.65 2.00004C26.3442 1.99735 26.0496 2.1165 25.8297 2.33184L22.2785 5.93619C20.0771 4.6108 17.5604 3.92 15 3.93837C7.77984 3.93837 3.66537 8.94828 1.85537 11.9344C1.29619 12.8511 1 13.9076 1 14.9855C1 16.0633 1.29619 17.1198 1.85537 18.0366C2.9082 19.7841 4.23623 21.3451 5.78675 22.6576L2.52129 25.9676C2.4099 26.0766 2.32106 26.2071 2.25994 26.3513C2.19881 26.4955 2.16664 26.6506 2.1653 26.8076C2.16395 26.9646 2.19346 27.1202 2.2521 27.2655C2.31074 27.4108 2.39733 27.5428 2.50683 27.6538C2.61634 27.7648 2.74655 27.8525 2.88987 27.912C3.0332 27.9714 3.18677 28.0013 3.34162 28C3.49647 27.9986 3.64951 27.966 3.79179 27.904C3.93408 27.8421 4.06276 27.752 4.17035 27.6391L7.72969 24.0312C9.92836 25.3564 12.4421 26.0484 15 26.0326C22.2202 26.0326 26.3346 21.0227 28.1446 18.0366C28.7038 17.1198 29 16.0633 29 14.9855C29 13.9076 28.7038 12.8511 28.1446 11.9344ZM3.84263 16.7989C3.51041 16.254 3.33445 15.626 3.33445 14.9855C3.33445 14.3449 3.51041 13.717 3.84263 13.1721C5.39839 10.6116 8.91459 6.30265 15 6.30265C16.9363 6.29166 18.8454 6.76468 20.5583 7.67985L18.2106 10.0595C17.091 9.306 15.7486 8.96837 14.4113 9.10391C13.074 9.23944 11.8242 9.83978 10.8739 10.8031C9.92354 11.7663 9.33128 13.0332 9.19757 14.3888C9.06386 15.7443 9.39694 17.105 10.1403 18.2399L7.4463 20.9707C6.01778 19.8 4.79876 18.3888 3.84263 16.7989ZM18.4987 14.9855C18.4987 15.926 18.1301 16.8281 17.474 17.4932C16.8178 18.1583 15.9279 18.5319 15 18.5319C14.4805 18.5299 13.9681 18.4086 13.5014 18.1773L18.1488 13.4664C18.3771 13.9395 18.4967 14.4588 18.4987 14.9855ZM11.5013 14.9855C11.5013 14.0449 11.8699 13.1429 12.526 12.4778C13.1822 11.8127 14.0721 11.4391 15 11.4391C15.5195 11.4411 16.0319 11.5623 16.4986 11.7937L11.8512 16.5045C11.6229 16.0314 11.5033 15.5121 11.5013 14.9855ZM26.1574 16.7989C24.6016 19.3594 21.0854 23.6683 15 23.6683C13.0637 23.6793 11.1546 23.2063 9.44173 22.2911L11.7894 19.9115C12.909 20.6649 14.2514 21.0026 15.5887 20.867C16.926 20.7315 18.1758 20.1312 19.1261 19.1679C20.0765 18.2046 20.6687 16.9377 20.8024 15.5822C20.9361 14.2266 20.6031 12.866 19.8597 11.731L22.5537 9.0003C23.9822 10.1709 25.2012 11.5821 26.1574 13.1721C26.4896 13.717 26.6656 14.3449 26.6656 14.9855C26.6656 15.626 26.4896 16.254 26.1574 16.7989Z" />
     </svg>
   );
 };

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

@@ -1,33 +1,28 @@
 import { useTheme } from '@mui/material';
 
-export const VisibilityIcon = ({ size = 16 }) => {
+export const VisibilityIcon = ({ size = 16, color }: any) => {
   const theme = useTheme();
-  const color = theme.palette.text.primary;
+  const updatedColor = color ?? theme.palette.text.tertiary;
+
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 17 16"
+      viewBox="0 0 30 30"
       style={{
-        fill: color,
-        stroke: color,
+        fill: updatedColor,
+        stroke: updatedColor,
       }}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g opacity="0.5">
-        <path
-          d="M11.3848 7.99974V7.99968C11.3848 7.40903 11.2096 6.83164 10.8815 6.34053C10.5533 5.84942 10.0869 5.46664 9.54121 5.24061C8.99552 5.01458 8.39505 4.95543 7.81575 5.07067C7.23644 5.1859 6.70432 5.47032 6.28666 5.88798C5.869 6.30563 5.58458 6.83776 5.46935 7.41706C5.35412 7.99637 5.41326 8.59684 5.63929 9.14253C5.86532 9.68822 6.2481 10.1546 6.73921 10.4828C7.23032 10.8109 7.80771 10.9861 8.39836 10.9861H8.39842C9.19031 10.9856 9.94965 10.6709 10.5096 10.1109C11.0696 9.55096 11.3843 8.79163 11.3848 7.99974ZM7.40606 6.51406C7.69973 6.31773 8.04503 6.21287 8.39828 6.21275C8.87197 6.21329 9.32612 6.40167 9.66112 6.73657C9.99612 7.07149 10.1846 7.52559 10.1853 7.99929C10.1853 8.35254 10.0805 8.69785 9.88427 8.99157C9.688 9.28533 9.40903 9.5143 9.08264 9.64952C8.75625 9.78474 8.39709 9.82015 8.05057 9.75126C7.70406 9.68237 7.38575 9.51229 7.1359 9.2625C6.88605 9.01272 6.71587 8.69446 6.64688 8.34797C6.5779 8.00147 6.6132 7.6423 6.74833 7.31587C6.88346 6.98944 7.11235 6.71041 7.40606 6.51406Z"
-          fill="#121212"
-          stroke="#121212"
-          stroke-width="0.2"
-        />
-        <path
-          d="M1.81217 10.0492L1.81206 10.0492L1.81477 10.0535C3.45532 12.6219 5.8504 14.113 8.39878 14.113C10.9408 14.113 13.3359 12.6218 14.9764 10.0535L14.9765 10.0536L14.979 10.0492C15.3349 9.42477 15.5221 8.71841 15.5221 7.99966C15.5221 7.28091 15.3349 6.57455 14.979 5.95014L14.9791 5.95007L14.9764 5.94583C13.3359 3.37748 10.9403 1.88633 8.39878 1.88633C5.85728 1.88633 3.46174 3.37748 1.81487 5.94568L1.81475 5.94561L1.81217 5.95014C1.45621 6.57455 1.26902 7.28091 1.26902 7.99966C1.26902 8.71841 1.45621 9.42477 1.81217 10.0492ZM2.83152 6.5904C4.25818 4.35317 6.28873 3.08633 8.39878 3.08633C10.5088 3.08633 12.5394 4.35317 13.966 6.59039C14.2029 7.02223 14.3271 7.50683 14.3271 7.99939C14.3271 8.49196 14.2029 8.97656 13.966 9.4084C12.5394 11.6456 10.5088 12.9125 8.39878 12.9125C6.28872 12.9125 4.25817 11.6461 2.83153 9.4084C2.59466 8.97656 2.47048 8.49196 2.47048 7.99939C2.47048 7.50683 2.59466 7.02223 2.83152 6.5904Z"
-          fill="#121212"
-          stroke="#121212"
-          stroke-width="0.2"
-        />
-      </g>
+      <path
+        d="M14.9999 20.4119C13.9295 20.4119 12.8831 20.0945 11.9931 19.4998C11.1031 18.9051 10.4095 18.0599 9.99986 17.071C9.59024 16.0821 9.48306 14.9939 9.69188 13.9441C9.90071 12.8942 10.4161 11.9299 11.173 11.173C11.9299 10.4161 12.8942 9.90071 13.9441 9.69188C14.9939 9.48306 16.0821 9.59024 17.071 9.99986C18.0599 10.4095 18.9051 11.1031 19.4998 11.9931C20.0945 12.8831 20.4119 13.9295 20.4119 14.9999C20.4111 16.435 19.8407 17.8111 18.8259 18.8259C17.8111 19.8407 16.435 20.4111 14.9999 20.4119ZM14.9999 11.4619C14.3004 11.4621 13.6166 11.6697 13.0351 12.0585C12.4536 12.4472 12.0004 12.9997 11.7328 13.646C11.4653 14.2924 11.3954 15.0035 11.532 15.6895C11.6686 16.3756 12.0055 17.0057 12.5002 17.5003C12.9949 17.9948 13.6251 18.3316 14.3112 18.468C14.9973 18.6044 15.7084 18.5343 16.3547 18.2666C17.0009 17.9988 17.5533 17.5455 17.9419 16.9638C18.3305 16.3822 18.5379 15.6984 18.5379 14.9989C18.5366 14.0611 18.1634 13.162 17.5001 12.499C16.8369 11.8359 15.9377 11.463 14.9999 11.4619Z"
+        stroke-width="0.4"
+      />
+      <path
+        d="M14.9992 26.2746C10.2992 26.2746 5.86216 23.5246 2.81216 18.7496C2.16087 17.6071 1.81836 16.3147 1.81836 14.9996C1.81836 13.6845 2.16087 12.3921 2.81216 11.2496C5.87416 6.47461 10.3122 3.72461 14.9992 3.72461C19.6862 3.72461 24.1242 6.47461 27.1742 11.2496C27.8255 12.3921 28.168 13.6845 28.168 14.9996C28.168 16.3147 27.8255 17.6071 27.1742 18.7496C24.1242 23.5246 19.6872 26.2746 14.9992 26.2746ZM14.9992 5.59961C10.9612 5.59961 7.09916 8.02461 4.39916 12.2616C3.93794 13.1003 3.6961 14.042 3.6961 14.9991C3.6961 15.9563 3.93794 16.8979 4.39916 17.7366C7.09916 21.9746 10.9612 24.3986 14.9992 24.3986C19.0372 24.3986 22.8992 21.9736 25.5992 17.7366C26.0604 16.8979 26.3022 15.9563 26.3022 14.9991C26.3022 14.042 26.0604 13.1003 25.5992 12.2616C22.8992 8.02461 19.0372 5.59961 14.9992 5.59961Z"
+        stroke-width="0.4"
+      />
     </svg>
   );
 };

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

@@ -15,8 +15,11 @@ import { CheckedCheckboxIcon } from './IconComponents/CheckedCheckBoxIcon';
 import { CheckedRadioIcon } from './IconComponents/CheckedRadioIcon';
 import { ClogWheelIcon } from './IconComponents/ClogWheelIcon';
 import { CollapseIcon } from './IconComponents/CollapseIcon';
+import { ComfortableIcon } from './IconComponents/Comfortable';
 import { CommutexIcon } from './IconComponents/CommutexIcon';
+import { CompactIcon } from './IconComponents/CompactIcon';
 import { CompletedStateIcon } from './IconComponents/CompletedStateIcon';
+import { ConfigureIcon } from './IconComponents/ConfigureIcon';
 import { CrossIcon } from './IconComponents/CrossIcon';
 import { CrossIcon2 } from './IconComponents/CrossIcon2';
 import { DashBoardIcon } from './IconComponents/DashBoardIcon';
@@ -32,6 +35,7 @@ import { ExcelIcon } from './IconComponents/ExcelIcon';
 import { ExpandIcon } from './IconComponents/ExpandIcon';
 import { ExportIcon } from './IconComponents/ExportIcon';
 import { FilterIcon } from './IconComponents/FilterIcon';
+import { FilterViewIcon } from './IconComponents/FilterViewIcon';
 import { HelpIcon } from './IconComponents/HelpIcon';
 import { HomeIcon } from './IconComponents/HomeIcon';
 import { HostelxIcon } from './IconComponents/HostelxIcon';
@@ -56,6 +60,7 @@ import { RightIcon } from './IconComponents/RightIcon';
 import { SaveIcon } from './IconComponents/SaveIcon';
 import { SearchIcon } from './IconComponents/SearchIcon';
 import { ShareIcon } from './IconComponents/ShareIcon';
+import { StandardIcon } from './IconComponents/StandardIcon';
 import { SuccessFilledIcon } from './IconComponents/SuccessFilledIcon';
 import { TicketsIcon } from './IconComponents/TicketsIcon';
 import { UmsIcon } from './IconComponents/UmsIcon';
@@ -95,6 +100,11 @@ export const Icons = {
   AttachmentIcon,
   PdfIcon,
   DocumentIcon,
+  FilterViewIcon,
+  ConfigureIcon,
+  ComfortableIcon,
+  CompactIcon,
+  StandardIcon,
   LogoutIcon,
   AccordionArrow,
   TicketsIcon,

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

@@ -2,7 +2,6 @@ import { ChevronRight, MoreHoriz } from '@mui/icons-material';
 
 import {
   CardContent,
-  Checkbox,
   Card as MuiCard,
   Stack,
   SxProps,
@@ -18,13 +17,13 @@ import {
   StyledHeader,
   StyledIcon,
   StyledImage,
-  StyledStack,
   StyledStatusText,
 } from './styles';
 
 export interface CardProps {
   title: string;
   caption?: string;
+  children?: ReactNode;
   footer?: {
     buttonText?: string | ReactNode;
     onClick: () => void;
@@ -45,6 +44,7 @@ export interface CardProps {
   };
   status?: string;
   imageSrc?: string;
+  titleImgUrl?: string;
   checkBox?: boolean;
   moreOptions?: boolean;
   menu?: Array<ReactNode>;
@@ -56,6 +56,7 @@ export interface CardProps {
 
 export const Card = ({
   title,
+  titleImgUrl,
   caption,
   status,
   footer,
@@ -73,6 +74,7 @@ export const Card = ({
     variant: 'caption',
   },
   icon,
+  children,
   menu = [],
 }: CardProps) => {
   const handleClick = (e: any) => {
@@ -81,13 +83,19 @@ export const Card = ({
 
   return (
     <MuiCard sx={cardSx}>
+      {children}
       {imageSrc && <StyledImage src={imageSrc} alt="Card image" />}
       <StyledHeader sx={headerSx}>
         <Stack gap={'8px'} flexDirection={'row'}>
-          {checkBox && (
+          {/* check box onclick functionality need to add */}
+          {/* {checkBox && (
             <StyledStack>
               <Checkbox />
             </StyledStack>
+          )} */}
+
+          {titleImgUrl && (
+            <img src={titleImgUrl} alt={title} height={'50px'} width={'50px'} />
           )}
 
           <Stack justifyContent={'center'}>