@campxdev/react-blueprint 1.8.4 → 1.8.6

package/package.json

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

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

@@ -0,0 +1,36 @@
+import { useTheme } from '@mui/material';
+
+export const FeedbackStarIcon = ({ size = 16 }: { size: number }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        fill: color,
+        stroke: color,
+      }}
+    >
+      <path
+        d="M7.9 17.2411C7.58329 17.2493 7.27276 17.1526 7.01666 16.9661C6.68333 16.7245 6.16666 16.0995 6.49166 14.6995L6.96666 12.6495C6.9933 12.4262 6.93037 12.2015 6.79166 12.0245L5.13083 10.3661C4.83482 10.1334 4.6127 9.81977 4.49141 9.46329C4.37011 9.10681 4.35486 8.72279 4.4475 8.35781C4.5821 8.00646 4.81612 7.70193 5.12099 7.48142C5.42585 7.26092 5.78834 7.13399 6.16416 7.11615L8.28916 6.76615C8.48892 6.71034 8.66104 6.58273 8.7725 6.40781L9.9475 4.05781C10.0739 3.69572 10.3045 3.37909 10.6104 3.14777C10.9163 2.91645 11.2838 2.78077 11.6667 2.75781C12.0486 2.78173 12.415 2.91785 12.7199 3.1491C13.0249 3.38036 13.2548 3.69647 13.3808 4.05781L14.5558 6.40781C14.6691 6.58104 14.8405 6.70812 15.0392 6.76615L17.1642 7.11615C17.5404 7.13241 17.9036 7.25872 18.2088 7.47944C18.5139 7.70015 18.7476 8.00556 18.8808 8.35781C18.9735 8.72279 18.9582 9.10681 18.8369 9.46329C18.7156 9.81977 18.4935 10.1334 18.1975 10.3661L16.5392 12.0245C16.47 12.1118 16.4189 12.2121 16.3889 12.3194C16.3588 12.4267 16.3504 12.5389 16.3642 12.6495L16.8392 14.6995C17.1642 16.1078 16.6475 16.7245 16.3142 16.9661C15.9808 17.2078 15.2392 17.5161 13.9892 16.7745L12 15.5911C11.8929 15.5417 11.7763 15.5162 11.6583 15.5162C11.5404 15.5162 11.4238 15.5417 11.3167 15.5911L9.325 16.7745C8.90157 17.0573 8.40872 17.2188 7.9 17.2411ZM11.6667 4.00781C11.5333 4.00781 11.2917 4.16615 11.0667 4.61615L9.89166 6.96615C9.7487 7.23078 9.5491 7.4606 9.3071 7.63921C9.0651 7.81783 8.78667 7.94085 8.49166 7.99948L6.36666 8.34948C5.89166 8.43281 5.675 8.60781 5.63333 8.74115C5.59166 8.87448 5.66666 9.14115 6.00833 9.48281L7.66666 11.1411C7.88442 11.3785 8.04436 11.6629 8.13399 11.9723C8.22362 12.2816 8.2405 12.6075 8.18333 12.9245L7.70833 14.9745C7.56666 15.5661 7.65833 15.8828 7.75 15.9578C7.84166 16.0328 8.175 16.0161 8.69166 15.6995L10.6917 14.5161C10.9905 14.3522 11.3258 14.2662 11.6667 14.2662C12.0075 14.2662 12.3429 14.3522 12.6417 14.5161L14.6333 15.6995C15.1583 16.0078 15.4917 16.0245 15.5833 15.9578C15.675 15.8911 15.7667 15.5745 15.625 14.9745L15.15 12.9245C15.0902 12.6075 15.1058 12.281 15.1955 11.9712C15.2853 11.6614 15.4467 11.377 15.6667 11.1411L17.325 9.48281C17.6667 9.14115 17.7417 8.86615 17.7 8.74115C17.6583 8.61615 17.4417 8.43281 16.9667 8.34948L14.8417 7.99948C14.5467 7.94085 14.2682 7.81783 14.0262 7.63921C13.7842 7.4606 13.5846 7.23078 13.4417 6.96615L12.2667 4.61615C12.0417 4.16615 11.7975 4.00781 11.6667 4.00781Z"
+        stroke-width="0.4"
+      />
+      <path
+        d="M6.66699 4.79102H1.66699C1.50157 4.78992 1.34323 4.72373 1.22626 4.60675C1.10928 4.48978 1.04308 4.33144 1.04199 4.16602C1.04308 4.00059 1.10928 3.84225 1.22626 3.72528C1.34323 3.60831 1.50157 3.54211 1.66699 3.54102H6.66699C6.83242 3.54211 6.99075 3.60831 7.10773 3.72528C7.2247 3.84225 7.2909 4.00059 7.29199 4.16602C7.2909 4.33144 7.2247 4.48978 7.10773 4.60675C6.99075 4.72373 6.83242 4.78992 6.66699 4.79102Z"
+        stroke-width="0.4"
+      />
+      <path
+        d="M4.16699 16.459H1.66699C1.50157 16.4579 1.34323 16.3917 1.22626 16.2747C1.10928 16.1577 1.04308 15.9994 1.04199 15.834C1.04308 15.6686 1.10928 15.5102 1.22626 15.3932C1.34323 15.2763 1.50157 15.2101 1.66699 15.209H4.16699C4.33242 15.2101 4.49075 15.2763 4.60773 15.3932C4.7247 15.5102 4.7909 15.6686 4.79199 15.834C4.7909 15.9994 4.7247 16.1577 4.60773 16.2747C4.49075 16.3917 4.33242 16.4579 4.16699 16.459Z"
+        stroke-width="0.4"
+      />
+      <path
+        d="M2.50033 10.625H1.66699C1.50157 10.6239 1.34323 10.5577 1.22626 10.4407C1.10928 10.3238 1.04308 10.1654 1.04199 10C1.04308 9.83458 1.10928 9.67624 1.22626 9.55926C1.34323 9.44229 1.50157 9.37609 1.66699 9.375H2.50033C2.66575 9.37609 2.82409 9.44229 2.94106 9.55926C3.05803 9.67624 3.12423 9.83458 3.12533 10C3.12423 10.1654 3.05803 10.3238 2.94106 10.4407C2.82409 10.5577 2.66575 10.6239 2.50033 10.625Z"
+        stroke-width="0.4"
+      />
+    </svg>
+  );
+};

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

@@ -56,6 +56,7 @@ import { ExpandIcon } from './IconComponents/ExpandIcon';
 import { ExportIcon } from './IconComponents/ExportIcon';
 import { ExportMenuIcon } from './IconComponents/ExportMenuIcon';
 import { FeePaymentIcon } from './IconComponents/FeePaymentIcon';
+import { FeedbackStarIcon } from './IconComponents/FeedbackStarIcon';
 import { FilterIcon } from './IconComponents/FilterIcon';
 import { HamburgerMenuIcon } from './IconComponents/HamburgerMenuIcon';
 import { HandoutsIcon } from './IconComponents/HandoutsIcon';
@@ -262,4 +263,5 @@ export const Icons = {
   WorkFlowDocsIcon,
   RaiseTicketIcon,
   HelpDocsIcon,
+  FeedbackStarIcon,
 };

package/src/components/DataDisplay/Accordion/Accordion.tsx

@@ -1,19 +1,20 @@
 import {
+  AccordionDetails,
+  AccordionSummary,
   Box,
-  Accordion as MuiAccordion,
-  AccordionDetails as MuiAccordionDetails,
   AccordionProps as MuiAccordionProps,
-  AccordionSummary as MuiAccordionSummary,
   Stack,
 } from '@mui/material';
 import { ReactNode } from 'react';
 import { Icons, Typography } from '../../export';
+import { StyledMuiAccordion } from './styles';
 
 export type AccordionProps = {
   title: ReactNode;
   content: ReactNode;
   actions?: ReactNode;
   index?: number;
+  errorKeys?: string[];
   expanded?: boolean | number;
 } & Omit<
   MuiAccordionProps,
@@ -25,29 +26,29 @@ export const Accordion = (props: AccordionProps) => {
     props;
 
   return (
-    <MuiAccordion
+    <StyledMuiAccordion
       key={index}
       onChange={onChange}
       expanded={typeof expanded == 'number' ? expanded === index : expanded}
       {...restProps}
     >
       <Stack direction="row" justifyContent="space-between" alignItems="center">
-        <MuiAccordionSummary expandIcon={<Icons.AccordionArrow />}>
+        <AccordionSummary expandIcon={<Icons.AccordionArrow />}>
           {typeof title === 'string' ? (
             <Typography variant="subtitle2">{title}</Typography>
           ) : (
             title
           )}
-        </MuiAccordionSummary>
+        </AccordionSummary>
         <Box>{actions}</Box>
       </Stack>
-      <MuiAccordionDetails>
+      <AccordionDetails>
         {typeof content === 'string' ? (
           <Typography variant="label1">{content}</Typography>
         ) : (
           content
         )}
-      </MuiAccordionDetails>
-    </MuiAccordion>
+      </AccordionDetails>
+    </StyledMuiAccordion>
   );
 };

package/src/components/DataDisplay/Accordion/styles.ts

@@ -0,0 +1,10 @@
+import { Accordion as MuiAccordion, styled } from '@mui/material';
+
+export const StyledMuiAccordion = styled(MuiAccordion)(() => ({
+  '&:before': {
+    display: 'none',
+  },
+  '&.Mui-expanded': {
+    margin: '0px',
+  },
+}));

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

@@ -1,14 +1,35 @@
-import { Box, SxProps } from '@mui/material';
-import { SyntheticEvent, useState } from 'react';
+import { SxProps } from '@mui/material';
+import { SyntheticEvent, useEffect, useState } from 'react';
 import { Accordion, AccordionProps } from '../Accordion/Accordion';
+import { StyledAccordionContainer } from './styles';
 
 type AccordionGroupProps = {
   data: AccordionProps[];
   containerSx?: SxProps;
+  defaultExpandedIndex?: number;
+  errorField?: string;
 };
 
-export const AccordionGroup = ({ data, containerSx }: AccordionGroupProps) => {
-  const [expanded, setExpanded] = useState<number | false>(false);
+export const AccordionGroup = ({
+  data,
+  containerSx,
+  defaultExpandedIndex,
+  errorField,
+}: AccordionGroupProps) => {
+  const [expanded, setExpanded] = useState<number | false>(
+    defaultExpandedIndex ?? false,
+  );
+
+  useEffect(() => {
+    if (errorField) {
+      const errorIndex = data.findIndex((item) =>
+        Array.isArray(item.errorKeys)
+          ? item.errorKeys.includes(errorField)
+          : false,
+      );
+      if (errorIndex !== -1) setExpanded(errorIndex);
+    }
+  }, [errorField, data]);
 
   const handleChange =
     (panel: number) => (event: SyntheticEvent, isExpanded: boolean) => {
@@ -16,16 +37,16 @@ export const AccordionGroup = ({ data, containerSx }: AccordionGroupProps) => {
     };
 
   return (
-    <Box sx={{ ...containerSx }}>
+    <StyledAccordionContainer sx={{ ...containerSx }}>
       {data?.map((itemProps, index) => (
         <Accordion
           elevation={0}
-          {...itemProps}
           expanded={expanded}
+          {...itemProps}
           index={index}
           onChange={handleChange(index)}
         />
       ))}
-    </Box>
+    </StyledAccordionContainer>
   );
 };

package/src/components/DataDisplay/AccordionGroup/styles.ts

@@ -0,0 +1,8 @@
+import { Box, styled } from '@mui/material';
+
+export const StyledAccordionContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  gap: '4px',
+  flexDirection: 'column',
+  backgroundColor: theme.palette.surface.defaultBackground,
+}));

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

@@ -1,8 +1,9 @@
 import { TimelineContent, TimelineItem, TimelineSeparator } from '@mui/lab';
-import { Box, Stack, Typography, useTheme } from '@mui/material';
+import { Box, Stack, SxProps, Typography, useTheme } from '@mui/material';
 import { format, isToday } from 'date-fns';
 import _ from 'lodash';
 import { useState } from 'react';
+import { AddSquare } from '../../Assets/Icons/IconComponents/AddSquare';
 import { Button, DatePicker, Spinner } from '../../export';
 import { EmptyIllustration } from '../EmptyIllustration/EmptyIllustration';
 import {
@@ -14,7 +15,6 @@ import {
 import {
   StyledActivityLogViewBox,
   StyledIconBox,
-  StyledSectionTitle,
   StyledSpinnerBox,
   StyledTimeline,
   StyledTimelineConnector,
@@ -24,8 +24,8 @@ import {
 export type ActivityAction = 'create' | 'update' | 'delete';
 
 export interface Activity {
-  userName: string;
-  action: ActivityAction;
+  userName?: string;
+  action?: ActivityAction;
   message: string;
   timestamp: string;
 }
@@ -40,6 +40,9 @@ interface ActivityLogProps {
   setFromDate: (date: Date | null) => void;
   setToDate: (date: Date | null) => void;
   isLoading: boolean;
+  hideLogFilter?: boolean;
+  timelineContentSx?: SxProps;
+  timelineSx?: SxProps;
 }
 
 const ActivityLogFilter = ({
@@ -115,6 +118,9 @@ export const ActivityLogView = ({
   setFromDate,
   setToDate,
   isLoading,
+  hideLogFilter = false,
+  timelineContentSx = {},
+  timelineSx = {},
 }: ActivityLogProps) => {
   const theme = useTheme();
   const lastItemRef = useIntersectionObserver(() => {
@@ -134,14 +140,14 @@ export const ActivityLogView = ({
   });
 
   const renderMessage = (activity: Activity) =>
-    activity.message.split('\n').map((part, index) => (
-      <Typography key={index} component="div">
-        {index === 0 && (
+    activity.message?.split('\n').map((part, index) => (
+      <Typography key={index} variant="body1" sx={{ fontWeight: 500 }}>
+        {index === 0 && activity.userName && (
           <span style={{ color: theme.palette.text.primary }}>
             {activity.userName}
           </span>
         )}{' '}
-        {part.split(/('[^']*')/g).map((text, idx) => {
+        {part?.split(/('[^']*')/g).map((text, idx) => {
           const isQuotedText = text.startsWith("'") && text.endsWith("'");
           return (
             <span
@@ -161,14 +167,16 @@ export const ActivityLogView = ({
 
   return (
     <StyledActivityLogViewBox className="scrollable-activity-log">
-      <ActivityLogFilter
-        fromDate={fromDate}
-        toDate={toDate}
-        setFromDate={setFromDate}
-        setToDate={setToDate}
-        fetchNextPage={fetchNextPage}
-        isLoading={isLoading}
-      />
+      {!hideLogFilter && (
+        <ActivityLogFilter
+          fromDate={fromDate}
+          toDate={toDate}
+          setFromDate={setFromDate}
+          setToDate={setToDate}
+          fetchNextPage={fetchNextPage}
+          isLoading={isLoading}
+        />
+      )}
 
       {loading ? (
         <StyledSpinnerBox>
@@ -179,8 +187,8 @@ export const ActivityLogView = ({
       ) : (
         Object.entries(groupedActivities).map(([section, activities]) => (
           <Box key={section}>
-            <StyledSectionTitle>{section}</StyledSectionTitle>
-            <StyledTimeline>
+            <Typography variant="caption">{section}</Typography>
+            <StyledTimeline sx={{ ...timelineSx }}>
               {activities.map((activity, index) => (
                 <TimelineItem
                   key={index}
@@ -189,7 +197,11 @@ export const ActivityLogView = ({
                   <TimelineSeparator>
                     <StyledTimelineDot>
                       <StyledIconBox>
-                        <ActivityIcon type={activity.action} />
+                        {activity.action ? (
+                          <ActivityIcon type={activity.action} />
+                        ) : (
+                          <AddSquare />
+                        )}
                       </StyledIconBox>
                     </StyledTimelineDot>
                     {index < activities.length - 1 && (
@@ -201,9 +213,12 @@ export const ActivityLogView = ({
                       display: 'flex',
                       justifyContent: 'space-between',
                       marginTop: 1,
+                      ...timelineContentSx,
                     }}
                   >
-                    <Typography>{renderMessage(activity)}</Typography>
+                    <Typography variant="body1" sx={{ fontWeight: 500 }}>
+                      {renderMessage(activity)}
+                    </Typography>
                     <Typography variant="caption">
                       {format(
                         convertUTCtoIST(activity.timestamp),

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

@@ -22,6 +22,8 @@ export const StyledTimeline = styled(Timeline)({
   [`& .${timelineItemClasses.root}:not(:first-of-type)`]: {
     marginTop: '0px',
   },
+  padding: 0,
+  margin: 0,
 });
 
 export const StyledTimelineDot = styled(TimelineDot)(({ theme }) => ({

package/src/components/DataDisplay/StatusCard/StatusCard.tsx

@@ -1,17 +1,24 @@
-import { Box, styled, Theme, useTheme } from '@mui/material';
-import { Typography } from '../../export';
+import { Box, styled, SxProps, Theme, useTheme } from '@mui/material';
+import { Typography, TypographyProps } from '../../export';
 
 export type StatusCardProps = {
   color: 'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink';
   text: string;
+  containerSx?: SxProps;
+  typographyVariant?: TypographyProps['variant'];
 };
 
-export const StatusCard = ({ color, text }: StatusCardProps) => {
+export const StatusCard = ({
+  color,
+  text,
+  containerSx = {},
+  typographyVariant = 'label2',
+}: StatusCardProps) => {
   const theme = useTheme();
   const { textColor, backgroundColor } = getStatusColor(color, theme);
   return (
-    <StatusContainer backgroundColor={backgroundColor}>
-      <Typography variant="label2" color={textColor}>
+    <StatusContainer backgroundColor={backgroundColor} sx={containerSx}>
+      <Typography variant={typographyVariant} color={textColor}>
         {text}
       </Typography>
     </StatusContainer>

package/src/components/Input/MultiCheckBox/MultiCheckBox.tsx

@@ -2,7 +2,7 @@ import { Stack, StackProps } from '@mui/material';
 import { ResponsiveStyleValue } from '@mui/system';
 import { ReactNode } from 'react';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
-import { SingleCheckBox } from '../SingleCheckBox/SIngleCheckBox';
+import { SingleCheckBox } from '../SingleCheckBox/SingleCheckBox';
 
 export type MultiCheckboxProps = {
   containerProps?: StackProps;

package/src/components/Input/SingleCheckBox/{SIngleCheckBox.tsx → SingleCheckBox.tsx}

@@ -3,6 +3,7 @@ import {
   FormControlLabelProps,
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
+  SxProps,
   useTheme,
 } from '@mui/material';
 import { ReactNode } from 'react';

package/src/components/Input/SingleSelect/components/SingleFilter.tsx

@@ -97,6 +97,7 @@ export const SingleFilter = ({
           sx: {
             padding: '0px',
             width: '250px',
+            minWidth: 'max-content',
           },
         }}
         anchor={({ open }: { open: (e: any) => void }) => (
@@ -109,6 +110,10 @@ export const SingleFilter = ({
             sx={{
               gap: '1px',
               borderRadius: '20px',
+              textWrap: 'nowrap',
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              minWidth: 'max-content',
             }}
             variant="contained"
             background={

package/src/components/Input/export.ts

@@ -11,7 +11,7 @@ export * from './PasswordField/PasswordField';
 export * from './RadioGroup/RadioGroup';
 export * from './SearchBar/SearchBar';
 export * from './Select/Select';
-export * from './SingleCheckBox/SIngleCheckBox';
+export * from './SingleCheckBox/SingleCheckBox';
 export * from './SingleSelect/SingleSelect';
 export * from './Switch/Switch';
 export * from './TextField/TextField';

package/src/components/Layout/{StepperTitle/StepperTitle.tsx → FloatingContainer/FloatingContainer.tsx}

@@ -2,22 +2,21 @@ import { Box, BoxProps, styled } from '@mui/material';
 import { ReactNode } from 'react';
 import { Typography } from '../../export';
 
-export type StepperTitleProps = {
+export type FloatingContainerProps = {
   title?: string;
-  isShowTitle?: boolean;
   content: ReactNode;
   contentProps?: BoxProps;
   titleProps?: BoxProps;
 };
 
-const StepperTitleContainer = styled(Box)(({ theme }) => ({
+const FloatingContainer = styled(Box)(({ theme }) => ({
   borderRadius: '8px',
   minHeight: '100px',
   minWidth: '60%',
   backgroundColor: theme.palette.surface.paperBackground,
 }));
 
-const TitleContainer = styled(Box)(({ theme }) => ({
+const Title = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.surface.grey,
   height: '45px',
   display: 'flex',
@@ -25,15 +24,15 @@ const TitleContainer = styled(Box)(({ theme }) => ({
   paddingLeft: '16px',
 }));
 
-export const StepperTitle = (props: StepperTitleProps) => {
+export const FloatingContent = (props: FloatingContainerProps) => {
   return (
-    <StepperTitleContainer {...props.contentProps}>
-      {props.isShowTitle && (
-        <TitleContainer {...props.titleProps}>
+    <FloatingContainer {...props.contentProps}>
+      {props.title && (
+        <Title {...props.titleProps}>
           <Typography variant="subtitle3">{props.title}</Typography>
-        </TitleContainer>
+        </Title>
       )}
       {props.content}
-    </StepperTitleContainer>
+    </FloatingContainer>
   );
 };

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

@@ -28,6 +28,7 @@ interface PageHeaderProps {
   actions?: ReactNode[];
   columns?: GridColDef[];
   searchText?: string;
+  defaultShowLabels?: string[];
 }
 
 const ViewTab = ({ title }: { title: string }) => {
@@ -59,13 +60,23 @@ export const PageHeader = ({
   uniqueId,
   actions = [],
   filterComponents = [],
+  defaultShowLabels = [],
   columns,
   viewsSlot = <Box></Box>,
   searchText = 'Search',
 }: PageHeaderProps) => {
   const [expanded, setExpanded] = useState(false);
 
-  const [hiddenLabels, setHiddenLabels] = useState<string[]>([]);
+  const allFilterLabels = filterComponents.map(
+    (filter) => filter.props['label'] || 'Label Not Found',
+  );
+
+  const initialHiddenLabels = allFilterLabels.filter(
+    (label) => !defaultShowLabels.includes(label),
+  );
+
+  const [hiddenLabels, setHiddenLabels] =
+    useState<string[]>(initialHiddenLabels);
 
   const dispatch = useDispatch();
 
@@ -188,7 +199,7 @@ export const PageHeader = ({
               }
             }}
             handleReset={() => {
-              setHiddenLabels([]);
+              setHiddenLabels(initialHiddenLabels);
             }}
           />
         </Stack>

package/src/components/Layout/export.ts

@@ -1,6 +1,6 @@
 export * from './AppHeader/AppHeader';
+export * from './FloatingContainer/FloatingContainer';
 export * from './PageContent/PageContent';
 export * from './PageHeader/components/DensitySelector/DensitySelector';
 export * from './PageHeader/PageHeader';
-export * from './StepperTitle/StepperTitle';
 export * from './TabsLayout/TabsLayout';

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

@@ -51,7 +51,7 @@ export const TabsContainer = ({
 
   useEffect(() => {
     setCurrentTab(tabs[currentTabIndex]?.key);
-  }, []);
+  }, [tabs, currentTabIndex]);
 
   return (
     <>

package/src/stories/Input/SingleCheckBox.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import {
   CheckboxProps,
   SingleCheckBox,
-} from '../../components/Input/SingleCheckBox/SIngleCheckBox';
+} from '../../components/Input/SingleCheckBox/SingleCheckBox';
 
 export default {
   title: 'Input/SingleCheckBox',

package/src/themes/commonTheme.ts

@@ -91,14 +91,11 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
-      // MuiAccordian: {
-      //   root: {},
-      // },
       MuiAccordionSummary: {
         styleOverrides: {
           root: {
             justifyContent: 'flex-start',
-            paddingLeft: '20px',
+            padding: '0px 16px',
             '&.Mui-expanded': {
               minHeight: '0px',
             },
@@ -118,6 +115,13 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiAccordionDetails: {
+        styleOverrides: {
+          root: {
+            padding: '0px 16px',
+          },
+        },
+      },
       MuiStepLabel: {
         styleOverrides: {
           root: {