@campxdev/react-blueprint 1.7.0 → 1.7.2

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

@@ -7,36 +7,36 @@ export const TransactionCardIcon = ({ size = 16 }) => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_43_272)">
+      <g clipPath="url(#clip0_43_272)">
         <path
           d="M8.78359 18.2834C8.68644 18.2841 8.59049 18.2618 8.50359 18.2184C8.41669 18.1749 8.34131 18.1115 8.28359 18.0334L7.44193 16.9084C7.36686 16.8002 7.26901 16.7099 7.15528 16.6437C7.04154 16.5774 6.91467 16.5369 6.78359 16.525C6.65146 16.5221 6.5203 16.5482 6.39935 16.6014C6.2784 16.6547 6.17061 16.7339 6.08359 16.8334C4.87526 18.125 3.95859 18.0167 3.51693 17.85C3.07526 17.6834 2.30859 17.1 2.30859 15.25V5.86669C2.30859 2.16669 3.37526 1.04169 6.86693 1.04169H13.1586C16.6503 1.04169 17.7169 2.16669 17.7169 5.86669V9.41669C17.7169 9.58245 17.6511 9.74142 17.5339 9.85863C17.4167 9.97584 17.2577 10.0417 17.0919 10.0417C16.9262 10.0417 16.7672 9.97584 16.65 9.85863C16.5328 9.74142 16.4669 9.58245 16.4669 9.41669V5.86669C16.4669 2.85835 15.9419 2.29169 13.1586 2.29169H6.86693C4.08359 2.29169 3.55859 2.85835 3.55859 5.86669V15.25C3.55859 16.125 3.77526 16.6084 3.97526 16.6834C4.12526 16.7417 4.53359 16.6584 5.16693 15.9834C5.3786 15.7493 5.63906 15.5646 5.92992 15.4422C6.22077 15.3198 6.53494 15.2628 6.85026 15.275C7.16404 15.2968 7.46921 15.3872 7.74424 15.5399C8.01926 15.6925 8.25743 15.9036 8.44193 16.1584L9.29193 17.2834C9.39138 17.416 9.43409 17.5827 9.41065 17.7467C9.3872 17.9108 9.29954 18.0589 9.16693 18.1584C9.05607 18.2405 8.92154 18.2843 8.78359 18.2834Z"
           fill="#121212"
           stroke="#121212"
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
         <path
           d="M15.1667 18.4583C14.5156 18.4583 13.8792 18.2653 13.3379 17.9036C12.7966 17.5419 12.3747 17.0278 12.1256 16.4263C11.8764 15.8249 11.8112 15.163 11.9382 14.5245C12.0653 13.886 12.3788 13.2995 12.8391 12.8391C13.2995 12.3788 13.886 12.0653 14.5245 11.9382C15.163 11.8112 15.8249 11.8764 16.4263 12.1256C17.0278 12.3747 17.5419 12.7966 17.9036 13.3379C18.2653 13.8792 18.4583 14.5156 18.4583 15.1667C18.4579 16.0395 18.111 16.8765 17.4937 17.4937C16.8765 18.111 16.0395 18.4579 15.1667 18.4583ZM15.1667 13.125C14.7629 13.125 14.3681 13.2447 14.0324 13.4691C13.6966 13.6934 13.4349 14.0123 13.2804 14.3854C13.1259 14.7584 13.0855 15.1689 13.1642 15.565C13.243 15.961 13.4375 16.3248 13.723 16.6103C14.0085 16.8959 14.3723 17.0903 14.7684 17.1691C15.1644 17.2479 15.5749 17.2075 15.948 17.0529C16.321 16.8984 16.6399 16.6367 16.8643 16.301C17.0886 15.9652 17.2083 15.5705 17.2083 15.1667C17.2075 14.6255 16.9921 14.1067 16.6094 13.724C16.2267 13.3413 15.7079 13.1259 15.1667 13.125Z"
           fill="#121212"
           stroke="#121212"
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
         <path
           d="M18.3326 18.9608C18.2505 18.9611 18.1691 18.9451 18.0933 18.9136C18.0175 18.8821 17.9486 18.8359 17.8909 18.7775L17.0576 17.9442C16.9402 17.827 16.8742 17.6681 16.874 17.5023C16.8739 17.3364 16.9396 17.1774 17.0567 17.06C17.1739 16.9426 17.3328 16.8766 17.4986 16.8765C17.6644 16.8763 17.8235 16.942 17.9409 17.0592L18.7742 17.8925C18.8905 18.0101 18.9556 18.1688 18.9556 18.3342C18.9556 18.4995 18.8905 18.6582 18.7742 18.7758C18.7166 18.8345 18.6479 18.8811 18.572 18.9128C18.4962 18.9446 18.4148 18.9609 18.3326 18.9608Z"
           fill="#121212"
           stroke="#121212"
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
         <path
           d="M13.3337 6.45831H6.66699C6.50157 6.45722 6.34323 6.39102 6.22626 6.27405C6.10928 6.15707 6.04308 5.99874 6.04199 5.83331C6.04308 5.66789 6.10928 5.50955 6.22626 5.39258C6.34323 5.2756 6.50157 5.2094 6.66699 5.20831H13.3337C13.4991 5.2094 13.6574 5.2756 13.7744 5.39258C13.8914 5.50955 13.9576 5.66789 13.9587 5.83331C13.9576 5.99874 13.8914 6.15707 13.7744 6.27405C13.6574 6.39102 13.4991 6.45722 13.3337 6.45831Z"
           fill="#121212"
           stroke="#121212"
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
         <path
           d="M12.5 9.79169H7.5C7.33458 9.7906 7.17624 9.7244 7.05926 9.60742C6.94229 9.49045 6.87609 9.33211 6.875 9.16669C6.87609 9.00126 6.94229 8.84293 7.05926 8.72595C7.17624 8.60898 7.33458 8.54278 7.5 8.54169H12.5C12.6654 8.54278 12.8238 8.60898 12.9407 8.72595C13.0577 8.84293 13.1239 9.00126 13.125 9.16669C13.1239 9.33211 13.0577 9.49045 12.9407 9.60742C12.8238 9.7244 12.6654 9.7906 12.5 9.79169Z"
           fill="#121212"
           stroke="#121212"
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
       </g>
       <defs>

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

@@ -18,7 +18,7 @@ export const UnCheckedRadioIcon = ({ size = 16 }) => {
         data-name="Rectangle 23803"
         fill="#f8f8f8"
         stroke="rgba(18,18,18,0.1)"
-        stroke-width="1"
+        strokeWidth="1"
       >
         <rect width="20" height="20" rx="10" stroke="none" />
         <rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="none" />

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

@@ -15,7 +15,7 @@ export const ViewIcon = ({ size = 16 }) => {
     >
       <path
         d="M11.4861 8.49974V8.49968C11.4861 7.90903 11.3109 7.33164 10.9828 6.84053C10.6546 6.34942 10.1882 5.96664 9.64253 5.74061C9.09683 5.51458 8.49637 5.45543 7.91706 5.57067C7.33776 5.6859 6.80563 5.97032 6.38798 6.38798C5.97032 6.80563 5.6859 7.33776 5.57067 7.91706C5.45543 8.49637 5.51458 9.09684 5.74061 9.64253C5.96664 10.1882 6.34942 10.6546 6.84053 10.9828C7.33164 11.3109 7.90903 11.4861 8.49968 11.4861H8.49974C9.29163 11.4856 10.051 11.1709 10.6109 10.6109C11.1709 10.051 11.4856 9.29163 11.4861 8.49974ZM7.50738 7.01406C7.80105 6.81773 8.14634 6.71287 8.4996 6.71275C8.97329 6.71329 9.42743 6.90167 9.76243 7.23657C10.0974 7.57149 10.2859 8.02559 10.2866 8.49929C10.2866 8.85254 10.1818 9.19785 9.98559 9.49157C9.78932 9.78533 9.51035 10.0143 9.18396 10.1495C8.85757 10.2847 8.49841 10.3201 8.15189 10.2513C7.80538 10.1824 7.48707 10.0123 7.23722 9.7625C6.98737 9.51272 6.81719 9.19446 6.7482 8.84797C6.67922 8.50147 6.71452 8.1423 6.84965 7.81587C6.98478 7.48944 7.21367 7.21041 7.50738 7.01406Z"
-        stroke-width="0.2"
+        strokeWidth="0.2"
         style={{
           fill: color,
           stroke: color,
@@ -27,7 +27,7 @@ export const ViewIcon = ({ size = 16 }) => {
           fill: color,
           stroke: color,
         }}
-        stroke-width="0.2"
+        strokeWidth="0.2"
       />
     </svg>
   );

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

@@ -16,18 +16,18 @@ export const ViewsIcon = ({ size = 16 }: { size?: number }) => {
         stroke: color,
       }}
     >
-      <g clip-path="url(#clip0_2213_7884)">
+      <g clipPath="url(#clip0_2213_7884)">
         <path
           d="M14 3.83301H2C1.86766 3.83213 1.74099 3.77918 1.64741 3.6856C1.55383 3.59202 1.50087 3.46535 1.5 3.33301C1.50087 3.20067 1.55383 3.074 1.64741 2.98042C1.74099 2.88684 1.86766 2.83388 2 2.83301H14C14.1323 2.83388 14.259 2.88684 14.3526 2.98042C14.4462 3.074 14.4991 3.20067 14.5 3.33301C14.4991 3.46535 14.4462 3.59202 14.3526 3.6856C14.259 3.77918 14.1323 3.83213 14 3.83301Z"
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
         <path
           d="M14 8.5H2C1.86766 8.49913 1.74099 8.44617 1.64741 8.35259C1.55383 8.25901 1.50087 8.13234 1.5 8C1.50087 7.86766 1.55383 7.74099 1.64741 7.64741C1.74099 7.55383 1.86766 7.50087 2 7.5H14C14.1323 7.50087 14.259 7.55383 14.3526 7.64741C14.4462 7.74099 14.4991 7.86766 14.5 8C14.4991 8.13234 14.4462 8.25901 14.3526 8.35259C14.259 8.44617 14.1323 8.49913 14 8.5Z"
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
         <path
           d="M14 13.167H2C1.86766 13.1661 1.74099 13.1132 1.64741 13.0196C1.55383 12.926 1.50087 12.7993 1.5 12.667C1.50087 12.5347 1.55383 12.408 1.64741 12.3144C1.74099 12.2208 1.86766 12.1679 2 12.167H14C14.1323 12.1679 14.259 12.2208 14.3526 12.3144C14.4462 12.408 14.4991 12.5347 14.5 12.667C14.4991 12.7993 14.4462 12.926 14.3526 13.0196C14.259 13.1132 14.1323 13.1661 14 13.167Z"
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
       </g>
     </svg>

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

@@ -17,11 +17,11 @@ export const VisibilityIcon = ({ size = 16, color }: any) => {
     >
       <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"
+        strokeWidth="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"
+        strokeWidth="0.4"
       />
     </svg>
   );

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

@@ -29,8 +29,8 @@ export const WarningFilledIcon = ({
       </mask>
       <g mask="url(#mask0_194_1734)">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M8.67604 2.57149L0.492704 16.7448C0.344646 17.0009 0.266662 17.2914 0.266602 17.5871C0.266542 17.8829 0.344408 18.1735 0.492362 18.4296C0.640315 18.6857 0.853133 18.8983 1.10938 19.0459C1.36564 19.1936 1.65628 19.2712 1.95204 19.2708H18.3167C18.6123 19.2709 18.9026 19.1931 19.1586 19.0454C19.4146 18.8976 19.6271 18.6851 19.7749 18.4292C19.9227 18.1732 20.0005 17.8828 20.0004 17.5873C20.0004 17.2917 19.9225 17.0014 19.7747 16.7455L11.592 2.57149C11.4443 2.3155 11.2318 2.10292 10.9759 1.95511C10.7199 1.80731 10.4296 1.72949 10.134 1.72949C9.83849 1.72949 9.54814 1.80731 9.29221 1.95511C9.03627 2.10292 8.82376 2.3155 8.67604 2.57149ZM11.1914 7.10489C11.1914 6.52021 10.7175 6.04622 10.133 6.04622C9.54854 6.04622 9.07471 6.52021 9.07471 7.10489V11.4396C9.07471 12.0242 9.54854 12.4982 10.133 12.4982C10.7175 12.4982 11.1914 12.0242 11.1914 11.4396V7.10489ZM11.192 15.0476C11.192 15.6323 10.7181 16.1063 10.1334 16.1063C9.54869 16.1063 9.07471 15.6323 9.07471 15.0476C9.07471 14.4629 9.54869 13.9889 10.1334 13.9889C10.7181 13.9889 11.192 14.4629 11.192 15.0476Z"
           fill={backgroundColor ?? color}
         />

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

@@ -74,6 +74,7 @@ import { NavigationIcon } from './IconComponents/NavigationIcon';
 import { NoteIcon } from './IconComponents/NoteIcon';
 import { NoticeBoardIcon } from './IconComponents/NoticeBoardIcon';
 import { NotificationIcon } from './IconComponents/NotificationIcon';
+import { ObeIcon } from './IconComponents/ObeIcon';
 import { OnlineTransactionIcon } from './IconComponents/OnlineTransactions';
 import { OpenPaymentsIcon } from './IconComponents/OpenPaymentsIcon';
 import { PayxIcon } from './IconComponents/PayxIcon';
@@ -234,4 +235,5 @@ export const Icons = {
   OnlineTransactionIcon,
   OpenPaymentsIcon,
   TransactionCardIcon,
+  ObeIcon,
 };

package/src/components/Charts/BarChart/BarChart.tsx

@@ -234,7 +234,7 @@ const CustomTooltip = ({ active, payload }: any) => {
                   color: theme.palette.text.primary,
                 }}
               >
-                {'\xa0\xa0' + `${p.value}`}
+                {`\xa0\xa0${p.value}`}
               </span>
             </Typography>
           ))}

package/src/components/Charts/TreeMap/TreeMap.tsx

@@ -120,7 +120,6 @@ const CustomizedContent = (props: any) => {
 };
 
 const CustomTooltip = ({ active, payload }: any) => {
-  const theme = useTheme();
   if (active && payload && payload.length) {
     return (
       <StyledContainer>

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

@@ -83,77 +83,86 @@ export const Card = ({
   };
 
   return (
-    <MuiCard sx={cardSx}>
-      {children}
-      {imageSrc && <StyledImage src={imageSrc} alt="Card image" />}
-      <StyledHeader sx={headerSx}>
-        <Stack gap={'8px'} flexDirection={'row'} alignItems={'center'}>
-          {/* check box onclick functionality need to add */}
-          {/* {checkBox && (
+    <MuiCard
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        ...cardSx,
+      }}
+    >
+      <Stack>
+        {children}
+        {imageSrc && <StyledImage src={imageSrc} alt="Card image" />}
+        <StyledHeader sx={headerSx}>
+          <Stack gap={'8px'} flexDirection={'row'} alignItems={'center'}>
+            {/* check box onclick functionality need to add */}
+            {/* {checkBox && (
             <StyledStack>
               <Checkbox />
             </StyledStack>
           )} */}
 
-          {titleImgIcon && titleImgIcon}
+            {titleImgIcon && titleImgIcon}
 
-          <Stack justifyContent={'center'}>
-            <Typography variant={titleProps.variant} sx={titleProps.sx}>
-              {title}
-            </Typography>
-            <Typography variant={captionProps.variant} sx={captionProps.sx}>
-              {caption}
-            </Typography>
+            <Stack justifyContent={'center'}>
+              <Typography variant={titleProps.variant} sx={titleProps.sx}>
+                {title}
+              </Typography>
+              <Typography variant={captionProps.variant} sx={captionProps.sx}>
+                {caption}
+              </Typography>
+            </Stack>
           </Stack>
-        </Stack>
-        <Stack flexDirection={'row'} gap={'12px'} alignItems={'center'}>
-          {status && (
-            <StyledStatusText variant="label2" sx={statusSx}>
-              {status}{' '}
-            </StyledStatusText>
-          )}
-          {moreOptions && (
-            <>
-              <DropdownMenu
-                anchor={({ open }) => (
-                  <DropDownIcon
-                    handleClick={open}
-                    icon={{
-                      icon: (
-                        <StyledIcon>{icon ? icon : <MoreHoriz />}</StyledIcon>
-                      ),
-                      iconProps: { color: 'secondary' },
-                      outlined: false,
-                    }}
-                  />
-                )}
-                menu={menu}
-              />
-            </>
-          )}
-        </Stack>
-      </StyledHeader>
-      {fields && (
-        <CardContent>
-          <Stack
-            sx={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr',
-              gap: '20px',
-            }}
-          >
-            {fields.map((field, index) => (
-              <Stack key={index} flexDirection="row" gap="14px">
-                {index % 2 === 1 && <StyledDivider flexItem />}
-                <Stack gap="4px">
-                  <Typography variant="caption">{field.title}</Typography>
-                  <Typography variant="body2">{field.value}</Typography>
-                </Stack>
-              </Stack>
-            ))}
+          <Stack flexDirection={'row'} gap={'12px'} alignItems={'center'}>
+            {status && (
+              <StyledStatusText variant="label2" sx={statusSx}>
+                {status}{' '}
+              </StyledStatusText>
+            )}
+            {moreOptions && (
+              <>
+                <DropdownMenu
+                  anchor={({ open }) => (
+                    <DropDownIcon
+                      handleClick={open}
+                      icon={{
+                        icon: (
+                          <StyledIcon>{icon ? icon : <MoreHoriz />}</StyledIcon>
+                        ),
+                        iconProps: { color: 'secondary' },
+                        outlined: false,
+                      }}
+                    />
+                  )}
+                  menu={menu}
+                />
+              </>
+            )}
           </Stack>
-        </CardContent>
-      )}
+        </StyledHeader>
+        {fields && (
+          <CardContent>
+            <Stack
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr',
+                gap: '20px',
+              }}
+            >
+              {fields.map((field, index) => (
+                <Stack key={index} flexDirection="row" gap="14px">
+                  {index % 2 === 1 && <StyledDivider flexItem />}
+                  <Stack gap="4px">
+                    <Typography variant="caption">{field.title}</Typography>
+                    <Typography variant="body2">{field.value}</Typography>
+                  </Stack>
+                </Stack>
+              ))}
+            </Stack>
+          </CardContent>
+        )}
+      </Stack>
 
       {footer && (
         <StyledCardActions>

package/src/components/DataDisplay/Timeline/Timeline.tsx

@@ -50,8 +50,8 @@ export const Timeline = (props: TimelineProps) => {
       {...props}
       sx={
         hasOppositeContent ||
-        props.position == 'alternate' ||
-        props.position == 'alternate-reverse'
+        props.position === 'alternate' ||
+        props.position === 'alternate-reverse'
           ? { ...props.sx }
           : {
               [`& .${timelineItemClasses.root}:before`]: {

package/src/components/Feedback/Spinner/Spinner.css

@@ -6,27 +6,39 @@
   animation: rotate 1s linear infinite;
   scale: 0.4;
 }
-.spinner::before , .spinner::after {
-  content: "";
+.spinner::before,
+.spinner::after {
+  content: '';
   box-sizing: border-box;
   position: absolute;
   inset: 0px;
   border-radius: 50%;
-  border: 5px solid #7D60D9;
-  animation: prixClipFix 1.5s linear infinite ;
+  border: 5px solid #7d60d9;
+  animation: prixClipFix 1.5s linear infinite;
 }
-.spinner::after{
-  transform: rotate3d(90, 90, 0, 180deg );
-  border-color: #FF3D00;
+.spinner::after {
+  transform: rotate3d(90, 90, 0, 180deg);
+  border-color: #ff3d00;
 }
 
 @keyframes rotate {
-  0%   {transform: rotate(0deg)}
-  100%   {transform: rotate(360deg)}
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes prixClipFix {
-    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-}
+  0% {
+    clippath: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  50% {
+    clippath: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  75%,
+  100% {
+    clippath: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+}

package/src/components/Input/FormActions/FormActions.tsx

@@ -1,12 +1,10 @@
-import { ButtonProps, Stack, StackProps, useTheme } from '@mui/material';
-import { Button } from '../export';
+import { Stack, StackProps, useTheme } from '@mui/material';
+import { Button, ButtonProps } from '../export';
 
-export interface ButtonConfig {
+export interface ButtonConfig extends ButtonProps {
   title: string;
-  onClick?: () => void;
   show?: boolean;
-  variant?: ButtonProps['variant'];
-  loading?: boolean;
+  onClick?: () => void;
 }
 
 export interface FormActionsProps {
@@ -34,6 +32,7 @@ function FormActions({
     title: 'Cancel',
     show: true,
     variant: 'text',
+    disableRipple: true,
     ...cancelButtonProps,
   };
 

package/src/components/Input/FormControlWrapper/FormControlWrapper.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@mui/material';
+import { Stack, SxProps } from '@mui/material';
 import { TextFieldProps } from '@mui/material/TextField';
 import React, { ReactElement, ReactNode, isValidElement } from 'react';
 import { Control, Controller, FieldValues, Path } from 'react-hook-form';
@@ -7,6 +7,7 @@ import FormActions, { FormActionsProps } from '../FormActions/FormActions';
 interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
   control: Control<T>;
   children: ReactNode;
+  containerSx?: SxProps;
   formActionProps?: FormActionsProps;
 }
 
@@ -26,6 +27,7 @@ type ControlledElementProps<T extends FieldValues = FieldValues> = {
 export function FormControlWrapper<T extends FieldValues = FieldValues>({
   control,
   children,
+  containerSx,
   formActionProps,
 }: FormControlWrapperProps<T>) {
   const wrapWithController = (
@@ -78,7 +80,7 @@ export function FormControlWrapper<T extends FieldValues = FieldValues>({
 
   return (
     <>
-      <Stack sx={{ m: '8px' }}>
+      <Stack sx={{ m: '16px', gap: '12px', ...containerSx }}>
         {React.Children.map(children as any, wrapWithController) || null}
       </Stack>
       {formActionProps && <FormActions {...formActionProps} showTopBorder />}

package/src/components/Input/FormWrapper/FormWrapper.tsx

@@ -0,0 +1,12 @@
+import { Stack, SxProps } from '@mui/material';
+import { ReactNode } from 'react';
+
+type FormWrapperProps = {
+  children: ReactNode;
+  containerSx?: SxProps;
+};
+export const FormWrapper = ({ children, containerSx }: FormWrapperProps) => {
+  return (
+    <Stack sx={{ m: '16px', gap: '12px', ...containerSx }}>{children}</Stack>
+  );
+};

package/src/components/Input/LabelWrapper/LabelWrapper.tsx

@@ -16,7 +16,7 @@ export const LabelWrapper = ({
 }) => {
   const theme = useTheme();
   return (
-    <Stack margin={' 8px 12px'} {...containerProps}>
+    <Stack {...containerProps}>
       {typeof label === 'string' ? (
         <Typography htmlFor={name} component="label" variant="label1">
           {label}

package/src/components/Input/export.ts

@@ -2,6 +2,7 @@ export * from './Button/Button';
 export * from './DatePicker/DatePicker';
 export * from './FormActions/FormActions';
 export * from './FormControlWrapper/FormControlWrapper';
+export * from './FormWrapper/FormWrapper';
 export * from './IconButtons/IconButtons';
 export * from './MultiCheckBox/MultiCheckBox';
 export * from './PasswordField/PasswordField';

package/src/components/Layout/TabsLayout/Tabs.tsx

@@ -45,6 +45,7 @@ const StyledNavLink = styled(NavLink)(({ theme }) => ({
   textAlign: 'center',
   textDecoration: 'none',
   fontWeight: 400,
+  fontFamily: 'Poppins',
   color: theme.palette.text.secondary,
   borderTopRightRadius: '12px',
   borderTopLeftRadius: '12px',

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

@@ -11,7 +11,7 @@ export const StyledIconButton = styled(IconButton, {
   }),
 }));
 
-export const StyledMenuItem = styled(MenuItem)(({}) => ({
+export const StyledMenuItem = styled(MenuItem)(() => ({
   display: 'flex',
   alignItems: 'center',
   gap: '5px',

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

@@ -2,9 +2,9 @@ import { Box, styled, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
 import { ChangeEvent, useEffect, useState } from 'react';
 
 interface CustomTabProps extends Omit<TabProps, 'component'> {
+  key: string | number;
   component: React.ReactNode;
   highlight?: boolean;
-  key: string | number;
 }
 
 export interface TabsContainerProps {
@@ -16,7 +16,7 @@ export interface TabsContainerProps {
 
 const TabContent = styled(Box)(({ theme }) => ({
   width: '100%',
-  height: 'calc(100vh - 200px)',
+  minHeight: 'calc(100vh - 148px)',
   backgroundColor: theme.palette.surface.paperBackground,
 }));
 
@@ -32,6 +32,7 @@ export const TabsContainer = ({
     setCurrentTab(value);
     onTabChange && onTabChange(value);
   };
+
   useEffect(() => {
     setCurrentTab(tabs[currentTabIndex]?.key);
   }, []);
@@ -48,11 +49,12 @@ export const TabsContainer = ({
         }}
         {...tabsProps}
       >
-        {tabs.map(({ component, ...tab }) => (
+        {tabs.map(({ key, component, ...tab }, index) => (
           <Tab
-            label={tab.label}
-            value={tab?.key}
-            icon={tab.highlight ? <span>{'.'}</span> : <></>}
+            key={index}
+            value={key}
+            label={tab?.label}
+            icon={tab?.highlight ? <span>{'.'}</span> : <></>}
             iconPosition="end"
             {...tab}
           />

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

@@ -5,27 +5,26 @@ interface StyledBoxProps {
   dragging: boolean;
 }
 
-export const UploadDialogBox = styled(Box)<StyledBoxProps>(({
-  theme,
-  dragging,
-}) => {
-  const strokeColor = dragging
-    ? encodeURIComponent(theme.palette.primary.dark)
-    : encodeURIComponent(theme.palette.primary.main);
+export const UploadDialogBox = styled(Box)<StyledBoxProps>(
+  ({ theme, dragging }) => {
+    const strokeColor = dragging
+      ? encodeURIComponent(theme.palette.primary.dark)
+      : encodeURIComponent(theme.palette.primary.main);
 
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '250px',
-    borderRadius: '7px',
-    backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='7' ry='7' stroke='${strokeColor}' stroke-width='3' stroke-dasharray='4%2c 8' stroke-dashoffset='8' stroke-linecap='round'/%3e%3c/svg%3e")`,
-    backgroundColor: theme.palette.surface.defaultBackground,
-    justifyContent: 'center',
-    alignItems: 'center',
-    transition: 'background-color 0.3s, border-color 0.3s',
-  };
-});
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '250px',
+      borderRadius: '7px',
+      backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='7' ry='7' stroke='${strokeColor}' stroke-width='3' stroke-dasharray='4%2c 8' stroke-dashoffset='8' strokeLinecap='round'/%3e%3c/svg%3e")`,
+      backgroundColor: theme.palette.surface.defaultBackground,
+      justifyContent: 'center',
+      alignItems: 'center',
+      transition: 'background-color 0.3s, border-color 0.3s',
+    };
+  },
+);
 
 export const ImageContainer = React.memo(
   styled('img')<{ size?: number }>(({ size }) => ({

package/src/stories/Assets/Icons.stories.tsx

@@ -9,6 +9,7 @@ const IconsStory = () => {
     <Stack gap={2} direction={'column'}>
       {Object.entries(Icons).map(([key, Icon], index) => (
         <Stack
+          key={index}
           direction="row"
           alignItems="center"
           gap={4}

package/src/stories/DataDisplay/Card.stories.tsx

@@ -1,7 +1,6 @@
+import { Stack } from '@mui/material';
 import { Meta } from '@storybook/react';
 import { Card, CardProps } from '../../components/DataDisplay/Card/Card';
-import { Stack } from '@mui/material';
-import { GridMenuIcon } from '@mui/x-data-grid';
 
 export default {
   title: 'DataDisplay/Card',

package/src/stories/DataDisplay/CircularAvatar.stories.tsx

@@ -15,14 +15,14 @@ export default {
 } as Meta<typeof CircularAvatar>;
 
 // Define stories directly as objects with render function
-export const withText = {
+export const WithText = {
   render: (args: CircularAvatarProps) => <CircularAvatar {...args} />,
   args: {
     text: 'Sh auy',
   },
 };
 
-export const withImage = {
+export const WithImage = {
   render: (args: CircularAvatarProps) => <CircularAvatar {...args} />,
   args: {
     src: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNzM3ODF8MHwxfGFsbHwxfHx8fHx8fHwxNjM4MjM2MDg0&ixlib=rb-1.2.1&q=80&w=400',

package/src/stories/DataDisplay/SidePanel.stories.tsx

@@ -10,7 +10,7 @@ export default {
   component: SidePanel,
 } as Meta<typeof SidePanel>;
 
-export const withText = {
+export const WithText = {
   render: (args: SidePanelProps) => <SidePanel {...args} />,
   args: {
     variables: [