@campxdev/react-blueprint 2.3.10 → 3.0.0-alpha.1

package/dist/index.d.ts

@@ -1,26 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import react__default, { ReactNode, MouseEvent as MouseEvent$1, FC, ReactElement } from 'react';
-import * as _mui_material from '@mui/material';
-import { SxProps, AccordionProps as AccordionProps$1, AvatarProps, TypographyOwnProps, TypographyProps as TypographyProps$1, AlertProps as AlertProps$1, SnackbarProps as SnackbarProps$1, TooltipProps as TooltipProps$1, ButtonProps as ButtonProps$1, StackProps, TextFieldProps as TextFieldProps$1, RadioGroupProps as RadioGroupProps$1, FormControlLabelProps, CheckboxProps as CheckboxProps$1, AutocompleteProps, SwitchProps as SwitchProps$1, BoxProps, MenuProps, MenuListProps, BreadcrumbsProps as BreadcrumbsProps$1, DialogProps as DialogProps$1, IconButtonProps, MenuItemProps, TabProps, TabsProps } from '@mui/material';
-import { LayoutType } from 'recharts/types/util/types';
-import { TypographyVariant } from '@mui/material/styles';
+import * as React$1 from 'react';
+import React__default, { ReactNode, MouseEvent as MouseEvent$1, FC, SyntheticEvent, ReactElement } from 'react';
 import { HorizontalAlignmentType, VerticalAlignmentType, IconType } from 'recharts/types/component/DefaultLegendContent';
+import { LayoutType, AnimationTiming } from 'recharts/types/util/types';
 import { CurveType } from 'recharts/types/shape/Curve';
-import * as _emotion_styled from '@emotion/styled';
-import * as _mui_system from '@mui/system';
-import { ResponsiveStyleValue } from '@mui/system';
-import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
-import * as _mui_x_data_grid from '@mui/x-data-grid';
-import { DataGridProps, GridValidRowModel, GridDensity, GridColumnVisibilityModel, GridColDef } from '@mui/x-data-grid';
-import { AxiosInstance, Axios } from 'axios';
-import { TimelineProps as TimelineProps$1 } from '@mui/lab';
-import { PickerValidDate, PickersShortcutsItem, DateTimePickerProps as DateTimePickerProps$1 } from '@mui/x-date-pickers';
-import { DatePickerProps as DatePickerProps$1 } from '@mui/x-date-pickers/DatePicker';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import { VariantProps } from 'class-variance-authority';
+import { ColumnDef, SortingState, Row } from '@tanstack/react-table';
+export { ColumnDef } from '@tanstack/react-table';
+import { Axios, AxiosInstance } from 'axios';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { FieldValues, Control } from 'react-hook-form';
-import { BaseSelectProps } from '@mui/material/Select';
-import { TimePickerProps as TimePickerProps$1 } from '@mui/x-date-pickers/TimePicker';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { EventApi } from '@fullcalendar/core';
+import { ClassValue } from 'clsx';
 import * as redux from 'redux';
 
 declare const AnimatedGIFs: {
@@ -81,190 +76,29 @@ interface IconProps {
 }
 type IconComponent = FC<IconProps>;
 type IconsType = {
-    GatePassIcon: IconComponent;
-    AmenitiesIcon: IconComponent;
-    AcademicFeesIcon: IconComponent;
-    BoardingPointIcon: IconComponent;
-    RouteBusAssignmentIcon: IconComponent;
-    ChallansIcon: IconComponent;
-    AcademicsIcon: IconComponent;
-    ActivitiesIcon: IconComponent;
-    AccordionArrow: IconComponent;
-    ActiveDevicesIcon: IconComponent;
-    ActivitylogsIcon: IconComponent;
-    AddSquare: IconComponent;
-    AdminIcon: IconComponent;
-    AdministratorIcon: IconComponent;
-    AdmissionIcon: IconComponent;
-    AlertFilledIcon: IconComponent;
-    AppsIcon: IconComponent;
-    ApproveIcon: IconComponent;
-    ArchiveIcon: IconComponent;
-    ArrowBackIcon: IconComponent;
-    AssessmentsIcon: IconComponent;
-    AssignmentIcon: IconComponent;
-    AttachmentIcon: IconComponent;
-    AttendanceIcon: IconComponent;
-    BarChartIcon: IconComponent;
-    BookletIcon: IconComponent;
-    BulbIcon: IconComponent;
-    CalendarIcon: IconComponent;
     CampxFullLogoIcon: IconComponent;
     CampxIcon: IconComponent;
-    CareerIcon: IconComponent;
-    CareersIcon: IconComponent;
-    CautionIcon: IconComponent;
-    BusesIcon: IconComponent;
-    TransportRoutesIcon: IconComponent;
-    CertificateIcon: IconComponent;
-    CetIcon: IconComponent;
-    CheckedCheckboxIcon: IconComponent;
-    CheckedRadioIcon: IconComponent;
-    ClassroomsIcon: IconComponent;
-    ClearIcon: IconComponent;
-    ClogWheelIcon: IconComponent;
-    CollapseIcon: IconComponent;
-    ColumnsIcon: IconComponent;
-    ComfortableIcon: IconComponent;
-    CommutexIcon: IconComponent;
-    CompactIcon: IconComponent;
-    CompletedStateIcon: IconComponent;
-    ConcessionIcon: IconComponent;
-    ConfigurationsIcon: IconComponent;
-    ConfigureIcon: IconComponent;
-    CopyIcon: IconComponent;
-    CounsellorIcon: IconComponent;
-    CourseInfoIcon: IconComponent;
-    CreditMemoIcon: IconComponent;
-    CrossIcon: IconComponent;
-    CrossIcon2: IconComponent;
-    DashBoardIcon: IconComponent;
-    DatabaseIcon: IconComponent;
-    DeleteIcon: IconComponent;
-    DeviceIcon: IconComponent;
-    DocumentIcon: IconComponent;
-    DoneSquare: IconComponent;
-    TransportRegistrationIcon: IconComponent;
-    DownArrow: IconComponent;
-    UpArrow: IconComponent;
-    DownloadIcon: IconComponent;
-    DFormsIcon: IconComponent;
-    EditIcon: IconComponent;
-    EmailIcon: IconComponent;
-    EmailNewIcon: IconComponent;
-    EnrollxIcon: IconComponent;
-    EvaluationIcon: IconComponent;
-    ExamConfigurationIcon: IconComponent;
-    ExamDetailsIcon: IconComponent;
-    ExamResultIcon: IconComponent;
-    ExamxIcon: IconComponent;
-    ExcelIcon: IconComponent;
-    ExpandIcon: IconComponent;
-    ExportIcon: IconComponent;
-    ExportMenuIcon: IconComponent;
-    FeeConfigurationIcon: IconComponent;
-    FeePaymentIcon: IconComponent;
-    FeedbackStarIcon: IconComponent;
-    FilterIcon: IconComponent;
-    FormBuilderIcon: IconComponent;
-    HallTicketsIcon: IconComponent;
-    HamburgerMenuIcon: IconComponent;
-    HandoutsIcon: IconComponent;
-    HelpDocsIcon: IconComponent;
-    HelpIcon: IconComponent;
-    HomeIcon: IconComponent;
-    HostelxIcon: IconComponent;
-    HostlerIcon: IconComponent;
-    ImageIcon: IconComponent;
-    ImportIcon: IconComponent;
-    InfoFilledIcon: IconComponent;
-    InfoIcon: IconComponent;
-    InstitutionsIcon: IconComponent;
-    InternalExamsIcon: IconComponent;
-    InvigilationIcon: IconComponent;
-    LegacyIcon: IconComponent;
-    LeadsIcon: IconComponent;
-    LeftIcon: IconComponent;
-    LineDividerIcon: IconComponent;
-    LocationIcon: IconComponent;
-    LogoutIcon: IconComponent;
-    ManageUserIcon: IconComponent;
-    MarksIcon: IconComponent;
-    MenteesIcon: IconComponent;
-    MentorsIcon: IconComponent;
-    MinusSquare: IconComponent;
-    MoreVertIcon: IconComponent;
-    NavigationIcon: IconComponent;
-    NominalSheetsIcon: IconComponent;
-    NoteIcon: IconComponent;
-    NoticeBoardIcon: IconComponent;
-    NotificationIcon: IconComponent;
-    ObeIcon: IconComponent;
-    OmrsIcon: IconComponent;
-    OnlineTransactionIcon: IconComponent;
-    OpenPaymentsIcon: IconComponent;
-    PayxIcon: IconComponent;
-    PdfIcon: IconComponent;
-    PeoplexIcon: IconComponent;
-    PrintDesignerIcon: IconComponent;
-    PrinterIcon: IconComponent;
-    ProductFeaturesIcon: IconComponent;
-    ProfileIcon: IconComponent;
-    QrIcon: IconComponent;
-    QuizIcon: IconComponent;
-    RaiseTicketIcon: IconComponent;
-    RedirectIcon: IconComponent;
-    RedoIcon: IconComponent;
-    RegistrationIcon: IconComponent;
-    RejectIcon: IconComponent;
-    ReportIcon: IconComponent;
-    ReportIssueIcon: IconComponent;
-    ResourcesIcon: IconComponent;
-    RevaluationIcon: IconComponent;
-    RightIcon: IconComponent;
-    RoomsIcon: IconComponent;
-    RouteIcon: IconComponent;
-    SaveIcon: IconComponent;
-    ScanningIcon: IconComponent;
-    ScholarshipIcon: IconComponent;
-    SearchIcon: IconComponent;
-    SeatingPlan: IconComponent;
-    SettlementsIcon: IconComponent;
-    ShareIcon: IconComponent;
-    SignaturesIcon: IconComponent;
-    SmsIcon: IconComponent;
-    StandardIcon: IconComponent;
-    StatisticsIcon: IconComponent;
-    StopWatchIcon: IconComponent;
-    StudentsIcon: IconComponent;
-    SuccessFilledIcon: IconComponent;
-    TasksIcon: IconComponent;
-    ThreeDotsMenuIcon: IconComponent;
-    TicketSystemIcon: IconComponent;
-    TicketsIcon: IconComponent;
-    TimeTableIcon: IconComponent;
-    TimerIcon: IconComponent;
-    TransactionCardIcon: IconComponent;
-    UmsIcon: IconComponent;
-    UnCheckedCheckboxIcon: IconComponent;
-    UnCheckedRadioIcon: IconComponent;
-    ViewIcon: IconComponent;
-    ViewsIcon: IconComponent;
-    VisibilityIcon: IconComponent;
-    VisibilityOffIcon: IconComponent;
-    WarningFilledIcon: IconComponent;
-    WhatsappIcon: IconComponent;
-    WorkFlowDocsIcon: IconComponent;
-    NewSmsIcon: IconComponent;
-    ESSIcon: IconComponent;
-    SalaryIcon: IconComponent;
-    ExpensesIcon: IconComponent;
-    LeavesIcon: IconComponent;
-    CampxFullLogoIconV2: IconComponent;
-    CampxIconV2: IconComponent;
 };
 declare const Icons: IconsType;
 
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React$1.ReactNode;
+        icon?: React$1.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'blockquote' | 'list' | 'inlineCode' | 'lead' | 'large' | 'small' | 'muted';
 type CartesianGridProps = {
     showCartesianGrid: boolean;
     size?: number;
@@ -275,11 +109,11 @@ type AxisLabelProps = {
 };
 type TitleProps = {
     variant?: TypographyVariant;
-    sx?: any;
+    className?: string;
 };
 type SubTitleProps = {
     variant?: TypographyVariant;
-    sx?: any;
+    className?: string;
 };
 type MarginProps = {
     top?: number;
@@ -314,36 +148,89 @@ type LegendProps = {
     className?: string;
 };
 
-type BarChartProps = {
+interface HorizontalBarChartData {
+    [key: string]: string | number;
+}
+interface HorizontalBarChartProps {
+    data: HorizontalBarChartData[];
+    dataKeys: string[];
+    xAxisKey: string;
+    config: ChartConfig;
+    height?: number;
+    margin?: MarginProps;
+    barSize?: number;
+    radius?: number | [number, number, number, number];
+    stackId?: string;
+    hideXAxis?: boolean;
+    yAxisWidth?: number;
+    yAxisTickFormatter?: (value: string | number) => string;
+    xAxisTickFormatter?: (value: number | string) => string;
+    showTooltip?: boolean;
+    tooltipCursor?: boolean | object;
+    hideTooltipLabel?: boolean;
+    tooltipIndicator?: 'line' | 'dot' | 'dashed';
+    legend?: LegendProps;
+    showLegend?: boolean;
     title?: string;
-    showSubtitle?: boolean;
-    subTitle?: string;
     titleProps?: TitleProps;
-    subTitleProps?: SubTitleProps;
-    width?: number;
+    subtitle?: string;
+    subtitleProps?: SubTitleProps;
+    className?: string;
+    onBarClick?: (data: any, index: number) => void;
+    animationDuration?: number;
+    animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+    accessibilityLayer?: boolean;
+}
+declare const HorizontalBarChart: React__default.FC<HorizontalBarChartProps>;
+
+interface VerticalBarChartData {
+    [key: string]: string | number;
+}
+interface VerticalBarChartProps {
+    data: VerticalBarChartData[];
+    dataKeys: string[];
+    xAxisKey: string;
+    config: ChartConfig;
     height?: number;
-    layout?: LayoutType;
-    dataKey: string;
-    data: any[];
-    bars: BarItem[];
-    domain?: any[];
-    barGap?: number | string;
-    barSize?: number | string;
-    showToolTip?: boolean;
-    showLegend?: boolean;
-    cartesianGrid?: CartesianGridProps;
-    axisLabelProps?: AxisLabelProps;
-    baseAxisProps?: BaseAxisProps;
-    legendSx?: LegendProps;
-    containerSx?: SxProps;
     margin?: MarginProps;
-};
-type BarItem = {
-    dataKey: string;
+    barSize?: number;
+    barGap?: number;
+    barCategoryGap?: number | string;
+    radius?: number | [number, number, number, number];
     stackId?: string;
-    fill: string;
-};
-declare const BarChart: ({ title, showSubtitle, subTitle, subTitleProps, titleProps, width, height, margin, layout, dataKey, domain, data, bars, barGap, barSize, showToolTip, showLegend, baseAxisProps, cartesianGrid, axisLabelProps, legendSx, containerSx, }: BarChartProps) => react_jsx_runtime.JSX.Element;
+    showGrid?: boolean;
+    gridStrokeDasharray?: string | number;
+    xAxisTickFormatter?: (value: string | number) => string;
+    yAxisTickFormatter?: (value: number | string) => string;
+    showLabels?: boolean;
+    labelPosition?: 'top' | 'bottom' | 'left' | 'right' | 'inside' | 'outside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'center';
+    labelFormatter?: (value: any) => string;
+    showTooltip?: boolean;
+    tooltipCursor?: boolean | object;
+    hideTooltipLabel?: boolean;
+    tooltipIndicator?: 'line' | 'dot' | 'dashed';
+    legend?: LegendProps;
+    showLegend?: boolean;
+    title?: string;
+    titleProps?: TitleProps;
+    subtitle?: string;
+    subtitleProps?: SubTitleProps;
+    className?: string;
+    activeBar?: boolean;
+    activeBarIndex?: number;
+    onBarClick?: (data: any, index: number) => void;
+    animationDuration?: number;
+    animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+    accessibilityLayer?: boolean;
+}
+declare const VerticalBarChart: React__default.FC<VerticalBarChartProps>;
+
+type BarChartVariant = 'vertical' | 'horizontal';
+type BarChartData = HorizontalBarChartData | VerticalBarChartData;
+interface BarChartProps extends Omit<VerticalBarChartProps, 'data'>, Omit<HorizontalBarChartProps, 'data' | keyof VerticalBarChartProps> {
+    data: BarChartData[];
+    variant?: BarChartVariant;
+}
 
 type LineChartProps = {
     title?: string;
@@ -351,6 +238,7 @@ type LineChartProps = {
     subTitle?: string;
     titleProps?: TitleProps;
     subTitleProps?: SubTitleProps;
+    config: ChartConfig;
     width?: number;
     height?: number;
     dataKey: string;
@@ -362,8 +250,11 @@ type LineChartProps = {
     axisLabelProps?: AxisLabelProps;
     baseAxisProps?: BaseAxisProps;
     legendSx?: LegendProps;
-    containerSx?: SxProps;
+    className?: string;
     margin?: MarginProps;
+    hideTooltipLabel?: boolean;
+    tooltipIndicator?: 'line' | 'dot' | 'dashed';
+    accessibilityLayer?: boolean;
 };
 type LineItem = {
     type: CurveType;
@@ -371,7 +262,7 @@ type LineItem = {
     stroke: string;
     activeDot?: any;
 };
-declare const LineChart: ({ title, showSubtitle, subTitle, subTitleProps, titleProps, width, height, margin, dataKey, data, lines, showToolTip, showLegend, cartesianGrid, axisLabelProps, baseAxisProps, legendSx, containerSx, }: LineChartProps) => react_jsx_runtime.JSX.Element;
+declare const LineChart: ({ title, showSubtitle, subTitle, subTitleProps, titleProps, config, width, height, margin, dataKey, data, lines, showToolTip, showLegend, cartesianGrid, axisLabelProps, baseAxisProps, legendSx, className, hideTooltipLabel, tooltipIndicator, accessibilityLayer, }: LineChartProps) => react_jsx_runtime.JSX.Element;
 
 type PieChartProps = {
     title?: string;
@@ -384,14 +275,17 @@ type PieChartProps = {
     height?: number;
     pie1: PieProps;
     pie2?: PieProps;
-    containerSx?: SxProps;
+    className?: string;
     showLegend?: boolean;
     legendSx?: LegendProps;
     showToolTip?: boolean;
+    config: ChartConfig;
+    hideTooltipLabel?: boolean;
 };
 type PieProps = {
     data: any[];
     dataKey: string;
+    nameKey?: string;
     innerRadius?: number;
     outerRadius?: number;
     fill?: string;
@@ -402,94 +296,45 @@ type PieProps = {
     endAngle?: number;
     colors?: string[];
 };
-declare const PieChart: ({ title, showSubtitle, subTitle, subTitleProps, titleProps, margin, width, height, showToolTip, showLegend, legendSx, pie1, pie2, containerSx, }: PieChartProps) => react_jsx_runtime.JSX.Element;
+declare const PieChart: ({ title, showSubtitle, subTitle, subTitleProps, titleProps, margin, width, height, showToolTip, showLegend, legendSx, pie1, pie2, className, config, hideTooltipLabel, }: PieChartProps) => react_jsx_runtime.JSX.Element;
 
-interface ProgressCardProps {
-    title: string;
-    current: number;
-    total: number;
-    remaining?: number;
-    used?: number;
-    pending?: number;
-    progressBarColor?: string;
-    remainingLabel?: string | ReactNode;
-    usedLabel?: string | ReactNode;
-    totalLabel?: string | ReactNode;
-    pendingLabel?: string | ReactNode;
-    icon?: ReactNode;
-    moreOptions?: boolean;
-    menu?: ReactNode[] | ((props: {
-        close: () => void;
-    }) => ReactNode[]);
-    cardSx?: SxProps;
-    headerSx?: SxProps;
-    progressSx?: SxProps;
-    statsSx?: SxProps;
-    titleProps?: {
-        variant?: any;
-        sx?: SxProps;
-    };
-    remainingProps?: {
-        variant?: any;
-        sx?: SxProps;
-    };
-    usedProps?: {
-        variant?: any;
-        sx?: SxProps;
-    };
-    totalProps?: {
-        variant?: any;
-        sx?: SxProps;
-    };
-    pendingProps?: {
-        variant?: any;
-        sx?: SxProps;
-    };
-    children?: ReactNode;
-    renderHeader?: (props: {
-        title: string;
-        remaining: number;
-    }) => ReactNode;
-    renderProgress?: (props: {
-        current: number;
-        total: number;
-    }) => ReactNode;
-    renderStats?: (props: {
-        used: number;
-        total: number;
-    }) => ReactNode;
-    renderPending?: (props: {
-        pending: number;
-    }) => ReactNode;
-    renderFooter?: (props: {
-        used: number;
-        total: number;
-    }) => ReactNode;
+interface TreeMapProps {
+    data: any;
+    dataKey: string | number;
+    config: ChartConfig;
+    title?: string;
+    showSubtitle?: boolean;
+    subTitle?: string;
+    titleProps?: TitleProps;
+    subTitleProps?: SubTitleProps;
+    width?: number;
+    height?: number;
+    margin?: MarginProps;
+    aspectRatio?: number;
+    fill?: string;
+    stroke?: string;
+    colors?: string[];
+    className?: string;
+    showToolTip?: boolean;
+    isAnimationActive?: boolean;
+    animationEasing?: AnimationTiming;
 }
-declare const ProgressCard: ({ title, current, total, remaining, used, pending, progressBarColor, remainingLabel, usedLabel, totalLabel, pendingLabel, icon, moreOptions, menu, cardSx, headerSx, progressSx, statsSx, titleProps, remainingProps, usedProps, totalProps, pendingProps, children, renderHeader, renderProgress, renderStats, renderPending, renderFooter, }: ProgressCardProps) => react_jsx_runtime.JSX.Element;
-
-declare const StyledContainer: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
-}, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
 
-type AccordionProps = {
+type AccordionItemProps = {
     title: ReactNode;
     content: ReactNode;
     actions?: ReactNode;
-    index?: number;
     errorKeys?: string[];
-    contentSx?: SxProps;
-    expanded?: boolean | number;
-} & Omit<AccordionProps$1, 'children' | 'content' | 'title' | 'index' | 'expanded' | 'actions'>;
-declare const Accordion: (props: AccordionProps) => react_jsx_runtime.JSX.Element;
-
-type AccordionGroupProps = {
-    data: AccordionProps[];
-    containerSx?: SxProps;
+    className?: string;
+    contentClassName?: string;
+};
+type AccordionProps = {
+    data: AccordionItemProps[];
+    className?: string;
     defaultExpandedIndex?: number;
     errorField?: string;
 };
-declare const AccordionGroup: ({ data, containerSx, defaultExpandedIndex, errorField, }: AccordionGroupProps) => react_jsx_runtime.JSX.Element;
+declare const Accordion: ({ data, className, defaultExpandedIndex, errorField, }: AccordionProps) => react_jsx_runtime.JSX.Element;
 
 type ActivityAction = 'create' | 'update' | 'delete';
 interface Activity {
@@ -509,57 +354,99 @@ interface ActivityLogProps {
     setToDate: (date: Date | null) => void;
     isLoading: boolean;
     hideLogFilter?: boolean;
-    timelineContentSx?: SxProps;
-    timelineSx?: SxProps;
+    className?: string;
+    title?: string;
 }
-declare const ActivityLogView: ({ activitiesData, isFetchingNextPage, fetchNextPage, hasNextPage, fromDate, toDate, setFromDate, setToDate, isLoading, hideLogFilter, timelineContentSx, timelineSx, }: ActivityLogProps) => react_jsx_runtime.JSX.Element;
+declare const ActivityLogView: ({ activitiesData, isFetchingNextPage, fetchNextPage, hasNextPage, fromDate, toDate, setFromDate, setToDate, isLoading, hideLogFilter, className, title, }: ActivityLogProps) => react_jsx_runtime.JSX.Element;
 
 type CircularAvatarProps = {
     text: string;
-} & Omit<AvatarProps, 'sx'>;
-declare const CircularAvatar: ({ text, ...rest }: CircularAvatarProps) => react_jsx_runtime.JSX.Element;
-type SquareAvatarProps = {
-    text: string;
-    onlyStartLetters: boolean;
-} & Omit<AvatarProps, 'sx'>;
-declare const SquareAvatar: ({ onlyStartLetters, text, ...rest }: SquareAvatarProps) => react_jsx_runtime.JSX.Element;
+    src?: string;
+    alt?: string;
+    className?: string;
+    fallbackClassName?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+declare const CircularAvatar: ({ text, src, alt, className, fallbackClassName, onClick, }: CircularAvatarProps) => react_jsx_runtime.JSX.Element;
 
-interface CardProps {
-    title: string;
-    caption?: string;
-    children?: ReactNode;
-    footer?: {
-        buttonText?: string | ReactNode;
-        onClick: () => void;
-        endIcon?: ReactNode;
-        buttonProps?: any;
-    };
-    fields?: {
-        title: string;
-        value: ReactNode | string;
-    }[];
-    titleProps?: {
-        variant: TypographyVariant;
-        sx?: SxProps;
-    };
-    captionProps?: {
-        variant: TypographyVariant;
-        sx?: SxProps;
-    };
-    status?: string;
-    imageSrc?: string;
-    titleImgIcon?: ReactNode;
-    checkBox?: boolean;
-    moreOptions?: boolean;
-    menu?: ReactNode[] | ((props: {
-        close: () => void;
-    }) => ReactNode[]);
-    icon?: ReactNode;
-    headerSx?: SxProps;
-    statusSx?: SxProps;
-    cardSx?: SxProps;
+declare function Card$1({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
+interface CardProps extends Omit<React$1.ComponentProps<typeof Card$1>, 'title' | 'content'> {
+    /**
+     * Card title - displayed in the header
+     */
+    title?: React$1.ReactNode;
+    /**
+     * Card description - displayed below the title in the header
+     */
+    description?: React$1.ReactNode;
+    /**
+     * Action buttons or elements - displayed in the top-right of the header
+     */
+    actions?: React$1.ReactNode;
+    /**
+     * Main card content
+     */
+    content?: React$1.ReactNode;
+    /**
+     * Footer content - displayed at the bottom of the card
+     */
+    footer?: React$1.ReactNode;
+    /**
+     * Children - if provided, will override the structured layout and give full control
+     */
+    children?: React$1.ReactNode;
 }
-declare const Card: ({ title, titleImgIcon, caption, status, footer, fields, imageSrc, statusSx, cardSx, headerSx, moreOptions, titleProps, captionProps, icon, children, menu, }: CardProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Card component built on shadcn/ui Card
+ *
+ * @example
+ * // Simple card with all props
+ * <Card
+ *   title="Card Title"
+ *   description="This is a description"
+ *   actions={<Button>Action</Button>}
+ *   content={<p>Main content goes here</p>}
+ *   footer={<Button variant="outline">Footer Action</Button>}
+ * />
+ *
+ * @example
+ * // Custom layout using composition
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Custom Title</CardTitle>
+ *     <CardDescription>Custom Description</CardDescription>
+ *     <CardAction>
+ *       <Button>Action</Button>
+ *     </CardAction>
+ *   </CardHeader>
+ *   <CardContent>
+ *     Custom content layout
+ *   </CardContent>
+ *   <CardFooter>
+ *     Custom footer
+ *   </CardFooter>
+ * </Card>
+ */
+declare const Card: React$1.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+interface ChipProps extends React$1.ComponentPropsWithoutRef<typeof Badge> {
+    label: string;
+}
+declare const Chip: ({ label, ...rest }: ChipProps) => react_jsx_runtime.JSX.Element;
 
 interface ChipsProps {
     list: {
@@ -574,36 +461,68 @@ interface ChipsProps {
 }
 declare const Chips: ({ list, selected: _selected, onSelected, direction, singleSelection, toggle, }: ChipsProps) => react_jsx_runtime.JSX.Element;
 
-type DataTableProps = {
+type PaginationProps = {
+    limit: number;
+    offset: number;
+    totalCount: number;
+    onPageChange: (offset: number) => void;
+    onLimitChange: (limit: number) => void;
+    rowCount: number;
+};
+declare const TablePagination: (props: PaginationProps) => react_jsx_runtime.JSX.Element;
+
+type DataTableProps<TData = any> = {
     limit?: number;
     offset?: number;
     totalCount?: number;
     onPageChange?: (page: number) => void;
     onLimitChange?: (limit: number) => void;
-} & DataGridProps;
-declare const DataTable: (props: DataTableProps) => react_jsx_runtime.JSX.Element;
-declare const CellContainer: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
-}, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
-
-type EditableDataTableProps = {
-    onChange: (rows: GridValidRowModel) => void;
-    onSave?: (params: any) => void;
-    onDelete?: (params: any) => void;
-    editVisibilityArray?: number[];
-    deleteVisibilityArray?: number[];
-} & Omit<DataTableProps, 'rowModesModel' | 'onRowModesModelChange' | 'onRowEditStop' | 'processRowUpdate'>;
-declare const EditableDataTable: (props: EditableDataTableProps) => react_jsx_runtime.JSX.Element;
-declare const EditableTableCore: (props: EditableDataTableProps) => react_jsx_runtime.JSX.Element;
-
-declare const CenterBox: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
-}, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
-declare const EmptyIllustration: ({ message, imageSize, messageProps, containerProps, }: {
+    columns: ColumnDef<TData, any>[];
+    rows: TData[];
+    density?: 'standard' | 'compact' | 'comfortable';
+    columnVisibilityModel?: {
+        [x: string]: boolean;
+    };
+    isLoading?: boolean;
+    checkboxSelection?: boolean;
+    rowSelectionModel?: Record<string, boolean>;
+    onRowSelectionModelChange?: (newRowSelectionModel: Record<string, boolean>) => void;
+    selectionActions?: React__default.ReactNode[];
+    enableSorting?: boolean;
+    sortingState?: SortingState;
+    onSortingChange?: (newSortingState: SortingState) => void;
+    hideTableActionHeader?: boolean;
+    tableActionProps?: {
+        uniqueId: string;
+        viewsProps: {
+            type: string;
+            axios: Axios;
+        };
+    };
+    cards: React__default.ReactNode[];
+    className?: string;
+    tableClassName?: string;
+    headerClassName?: string;
+    rowClassName?: string | ((row: Row<TData>) => string);
+    cellClassName?: string;
+    cardContainerClassName?: string;
+};
+declare const DataTable: <TData extends Record<string, any> = any>(props: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
+
+declare const typographyVariants: (props?: ({
+    variant?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "p" | "small" | "list" | "muted" | "inlineCode" | "lead" | "large" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface TypographyProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    as?: React$1.ElementType;
+    children?: React$1.ReactNode;
+}
+
+declare const Typography: ({ variant, children, ...props }: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+declare const EmptyIllustration: ({ message, messageProps, containerClassName, }: {
     message: string;
-    imageSize?: string;
-    messageProps?: TypographyOwnProps;
-    containerProps?: SxProps;
+    messageProps?: TypographyProps;
+    containerClassName?: string;
 }) => react_jsx_runtime.JSX.Element;
 
 interface JoyrideStep {
@@ -624,36 +543,24 @@ declare const ReactJoyRide: ({ steps, children, tourName, }: {
     tourName: string;
 }) => react_jsx_runtime.JSX.Element;
 
-interface SidePanelProps {
-    variables?: {
-        label: string;
-        value: string;
-    }[];
-    bottomChildren?: ReactNode;
-    containerSx?: SxProps;
-    variablesContainerSX?: SxProps;
-    imageUrl?: string;
-    imageWidth?: string;
-    imageHeight?: string;
-    title?: ReactNode;
-}
-interface variablesProps {
-    data?: {
-        label: string;
-        value: string;
-    }[];
-    variablesContainerSX?: SxProps;
+declare function Separator$1({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+interface SeparatorProps extends React$1.ComponentPropsWithoutRef<typeof Separator$1> {
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+    className?: string;
 }
-declare const SidePanelVariables: ({ data, variablesContainerSX, }: variablesProps) => react_jsx_runtime.JSX.Element;
-declare const SidePanel: ({ variables, bottomChildren, containerSx, variablesContainerSX, imageUrl, imageHeight, imageWidth, title, }: SidePanelProps) => react_jsx_runtime.JSX.Element;
+declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 
 type StatusCardProps = {
     color: 'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink';
     text: string;
-    containerSx?: SxProps;
+    className?: string;
     typographyVariant?: TypographyProps['variant'];
 };
-declare const StatusCard: ({ color, text, containerSx, typographyVariant, }: StatusCardProps) => react_jsx_runtime.JSX.Element;
+declare const StatusCard: ({ color, text, className, typographyVariant, }: StatusCardProps) => react_jsx_runtime.JSX.Element;
 
 type TimelineItems = {
     timelineContent: ReactNode;
@@ -662,71 +569,129 @@ type TimelineItems = {
 };
 type TimelineProps = {
     timelineItems: TimelineItems[];
-} & Omit<TimelineProps$1, 'ref'>;
-declare const Timeline: (props: TimelineProps) => react_jsx_runtime.JSX.Element;
-
-type TypographyProps = {} & TypographyProps$1;
-declare const Typography: ({ variant, children, ...props }: TypographyProps) => react_jsx_runtime.JSX.Element;
+    position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
+    className?: string;
+};
+declare const Timeline: ({ timelineItems, position, className, }: TimelineProps) => react_jsx_runtime.JSX.Element;
 
 type AlertProps = {
     message: string | ReactNode;
-} & AlertProps$1;
-declare const Alert: ({ severity, message, ...rest }: AlertProps) => react_jsx_runtime.JSX.Element;
+    severity?: 'success' | 'error' | 'info' | 'warning';
+    variant?: 'default' | 'destructive';
+    className?: string;
+};
+declare const Alert: ({ severity, message, variant, className, }: AlertProps) => react_jsx_runtime.JSX.Element;
 
 type Severity = 'success' | 'info' | 'warning' | 'error';
+type SnackbarPosition = {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+};
 type SnackbarProps = {
     severity: Severity;
     message: string;
-} & SnackbarProps$1;
-declare const Snackbar: ({ ...props }: SnackbarProps) => react_jsx_runtime.JSX.Element;
+    open: boolean;
+    onClose?: (reason?: 'timeout' | 'clickaway') => void;
+    anchorOrigin?: SnackbarPosition;
+    autoHideDuration?: number;
+};
+declare const Snackbar: ({ severity, message, open, onClose, anchorOrigin, autoHideDuration, }: SnackbarProps) => react_jsx_runtime.JSX.Element | null;
 
 declare const Spinner: () => react_jsx_runtime.JSX.Element;
 
 type TooltipProps = {
     children: ReactNode;
-} & TooltipProps$1;
-type TooltipContentProps = {
-    message: string;
+    title: ReactNode;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    arrow?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    delayDuration?: number;
 };
-declare const Tooltip: ({ placement, arrow, ...props }: TooltipProps) => react_jsx_runtime.JSX.Element;
-
-declare const ToolTipContent: ({ message }: TooltipContentProps) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: ({ children, title, placement, open, defaultOpen, onOpenChange, delayDuration, }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
-declare const Tutorial: () => react_jsx_runtime.JSX.Element;
+declare const buttonVariants: (props?: ({
+    variant?: "input" | "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 
-type ButtonProps = {
+type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     loading?: boolean;
-    background?: string;
-    hoverBackground?: string;
-    textColor?: string;
-} & ButtonProps$1;
-declare const Button: ({ loading, color, background, hoverBackground, textColor, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+    asChild?: boolean;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    fullWidth?: boolean;
+};
+declare const Button: ({ loading, disabled, children, startIcon, endIcon, fullWidth, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
-type DatePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = {
-    format?: 'yyyy' | 'MMMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy';
-    views?: ('year' | 'month' | 'day')[];
+type DateFormat = 'yyyy' | 'MMMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy';
+type DatePickerProps = {
+    label?: React$1.ReactNode | string;
+    name?: string;
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    format?: DateFormat;
     helperText?: string;
     placeholder?: string;
-    shortcutsItems?: PickersShortcutsItem<any>[];
+    shortcutsItems?: {
+        label: string;
+        getValue: () => Date;
+    }[];
     required?: boolean;
-    containerProps?: StackProps;
-    openPickerIcon?: React.ElementType;
+    containerProps?: React$1.HTMLAttributes<HTMLDivElement>;
+    openPickerIcon?: React$1.ReactNode;
     error?: any;
-} & DatePickerProps$1<TEnableAccessibleFieldDOMStructure>;
-declare const DatePicker: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>({ label, name, value, required, format, views, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, ...rest }: DatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => react_jsx_runtime.JSX.Element;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    shouldDisableDate?: (date: Date) => boolean;
+    shouldDisableMonth?: (date: Date) => boolean;
+    shouldDisableYear?: (date: Date) => boolean;
+    className?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onBlur?: React$1.FocusEventHandler;
+    [key: string]: any;
+};
+declare const DatePicker: ({ label, name, value, onChange, required, format, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, ...rest }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
-type DateTimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = {
-    format?: 'yyyy' | 'MMMM yyyy' | 'MMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd' | 'yyyy-MM-dd hh:mm a' | 'yyyy-MM-dd HH:mm' | 'dd MMM yyyy HH:mm' | 'dd MMM yyyy hh:mm a' | 'dd/MM/yyyy hh:mm a' | 'dd/MM/yyyy HH:mm' | 'hh:mm a' | 'HH:mm' | 'hh:mm:ss a' | 'HH:mm:ss' | 'MMM dd, yyyy hh:mm a' | 'MMMM dd, yyyy HH:mm' | 'EEE, MMM dd yyyy' | 'EEEE, MMMM dd, yyyy';
-    views?: ('year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds')[];
+type DateTimePickerViews = 'year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds';
+type DateTimeFormat = 'yyyy' | 'MMMM yyyy' | 'MMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd' | 'yyyy-MM-dd hh:mm a' | 'dd MMM yyyy hh:mm a' | 'dd/MM/yyyy hh:mm a' | 'yyyy-MM-dd hh:mm:ss a' | 'dd MMM yyyy hh:mm:ss a' | 'dd/MM/yyyy hh:mm:ss a' | 'hh:mm a' | 'hh:mm:ss a' | 'MMM dd, yyyy hh:mm a' | 'MMM dd, yyyy hh:mm:ss a' | 'EEE, MMM dd yyyy' | 'EEEE, MMMM dd, yyyy';
+type DateTimePickerProps = {
+    label?: React$1.ReactNode | string;
+    name?: string;
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    format?: DateTimeFormat;
+    views?: DateTimePickerViews[];
     helperText?: string;
     placeholder?: string;
-    shortcutsItems?: PickersShortcutsItem<any>[];
+    shortcutsItems?: {
+        label: string;
+        getValue: () => Date;
+    }[];
     required?: boolean;
-    containerProps?: StackProps;
-    openPickerIcon?: React.ElementType;
+    containerProps?: React$1.HTMLAttributes<HTMLDivElement>;
+    openPickerIcon?: React$1.ReactNode;
     error?: any;
-} & DateTimePickerProps$1<TEnableAccessibleFieldDOMStructure>;
-declare const DateTimePicker: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>({ label, name, required, format, views, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, value, error, ...rest }: DateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => react_jsx_runtime.JSX.Element;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    shouldDisableDate?: (date: Date) => boolean;
+    shouldDisableMonth?: (date: Date) => boolean;
+    shouldDisableYear?: (date: Date) => boolean;
+    className?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onBlur?: React$1.FocusEventHandler;
+    [key: string]: any;
+};
+declare const DateTimePicker: ({ label, name, value, onChange, required, format, views, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, ...rest }: DateTimePickerProps) => react_jsx_runtime.JSX.Element;
 
 type FileUploadProps = {
     label: string;
@@ -742,12 +707,13 @@ type FileUploadProps = {
     hideDeleteButton?: boolean;
     hideInput?: boolean;
     errorText?: string;
-    sx?: SxProps;
+    className?: string;
+    containerClassName?: string;
     showImage?: boolean;
-    previewSx?: SxProps;
+    previewClassName?: string;
     required?: boolean;
 };
-declare const FileUpload: ({ label, name, disabled, onChange, handleRemove, files, accept, inputText, onInvalidFile, hideDeleteButton, hideInput, multiple, errorText, showImage, previewSx, sx, required, }: FileUploadProps) => react_jsx_runtime.JSX.Element;
+declare const FileUpload: ({ label, name, disabled, onChange, handleRemove, files, accept, inputText, onInvalidFile, hideDeleteButton, hideInput, multiple, errorText, showImage, previewClassName, className, containerClassName, required, }: FileUploadProps) => react_jsx_runtime.JSX.Element;
 
 interface ButtonConfig extends ButtonProps {
     show?: boolean;
@@ -757,33 +723,33 @@ interface ButtonConfig extends ButtonProps {
 interface FormActionsProps {
     submitButtonProps?: ButtonConfig;
     cancelButtonProps?: ButtonConfig;
-    stackProps?: StackProps;
+    className?: string;
     showTopBorder?: boolean;
 }
-declare const FormActions: ({ submitButtonProps, cancelButtonProps, stackProps, showTopBorder, }: FormActionsProps) => react_jsx_runtime.JSX.Element;
+declare const FormActions: ({ submitButtonProps, cancelButtonProps, className, showTopBorder, }: FormActionsProps) => react_jsx_runtime.JSX.Element;
 
 interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
     control: Control<T>;
     children: ReactNode;
-    containerSx?: SxProps;
+    containerClassName?: string;
     formActionProps?: FormActionsProps;
     disabled?: boolean;
 }
-declare function FormControlWrapper<T extends FieldValues = FieldValues>({ control, children, containerSx, formActionProps, disabled, }: FormControlWrapperProps<T>): react_jsx_runtime.JSX.Element;
+declare function FormControlWrapper<T extends FieldValues = FieldValues>({ control, children, containerClassName, formActionProps, disabled, }: FormControlWrapperProps<T>): react_jsx_runtime.JSX.Element;
 
 type FormWrapperProps = {
     children: ReactNode;
-    containerSx?: SxProps;
+    className?: string;
 };
-declare const FormWrapper: ({ children, containerSx }: FormWrapperProps) => react_jsx_runtime.JSX.Element;
+declare const FormWrapper: ({ children, className }: FormWrapperProps) => react_jsx_runtime.JSX.Element;
 
-declare function DeleteButton({ disabled, ...props }: ButtonProps$1): react_jsx_runtime.JSX.Element;
+declare function DeleteButton({ disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
-declare function EditButton({ disabled, ...props }: ButtonProps$1): react_jsx_runtime.JSX.Element;
+declare function EditButton({ disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
-declare function RedirectButton({ disabled, ...props }: ButtonProps$1): react_jsx_runtime.JSX.Element;
+declare function RedirectButton({ disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
-declare function ViewButton({ disabled, ...props }: ButtonProps$1): react_jsx_runtime.JSX.Element;
+declare function ViewButton({ disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const IconButtons: {
     DeleteButton: typeof DeleteButton;
@@ -792,99 +758,160 @@ declare const IconButtons: {
     RedirectButton: typeof RedirectButton;
 };
 
-declare const LabelWrapper: ({ required, name, children, containerProps, label, }: {
+interface LabelWrapperProps {
     required: boolean;
     name?: string;
     label?: ReactNode | string;
     children: ReactNode;
-    containerProps?: StackProps;
-}) => react_jsx_runtime.JSX.Element;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+declare const LabelWrapper: ({ required, name, children, containerProps, label, }: LabelWrapperProps) => react_jsx_runtime.JSX.Element;
 
 type MultiCheckboxProps = {
-    containerProps?: StackProps;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
     options: Array<{
         label: ReactNode;
         value: any;
     }>;
     label: string;
-    direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+    direction?: 'row' | 'column';
     values: any[];
     onChange: (values: any[]) => void;
     required: boolean;
     name: string;
+    className?: string;
+};
+declare const MultiCheckBox: ({ name, options, required, containerProps, label, direction, values, onChange, className, ...rest }: MultiCheckboxProps) => react_jsx_runtime.JSX.Element;
+
+type MultiSelectProps = {
+    options?: {
+        label: string;
+        subLabel?: string;
+        value: any;
+        icon?: ReactNode;
+    }[] | any[];
+    optionsApiEndPoint?: string;
+    optionsApiEndpointParams?: any;
+    externalAxios?: AxiosInstance;
+    required?: boolean;
+    label?: string;
+    name?: string;
+    getValue?: (option: any) => any;
+    value?: any[];
+    dbValueProps?: {
+        valueKey: string;
+        isObjectId?: boolean;
+        isInt?: boolean;
+        isFloat?: boolean;
+    };
+    dbLabelProps?: {
+        labelKey: string;
+        subLabelKey?: string;
+        useLabelStartCase?: boolean;
+        useSubLabelStartCase?: boolean;
+    };
+    onChange?: (values: any[]) => void;
+    onOpen?: (event: SyntheticEvent) => void;
+    onClose?: (event: SyntheticEvent, reason: string) => void;
+    error?: any;
+    helperText?: string;
+    type?: 'input' | 'filter';
+    disableClear?: boolean;
+    fullWidth?: boolean;
 };
-declare const MultiCheckBox: ({ name, options, required, containerProps, label, direction, values, onChange, ...rest }: MultiCheckboxProps) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: ({ options, optionsApiEndPoint, optionsApiEndpointParams, externalAxios, getValue, value, onChange, dbValueProps, dbLabelProps, onOpen, onClose, type, ...restProps }: MultiSelectProps) => react_jsx_runtime.JSX.Element;
 
 interface OtpInputProps {
     length: number;
     onChangeOtp: (otp: string) => void;
-    containerSx?: SxProps;
-    inputSx?: SxProps;
+    containerClassName?: string;
+    inputClassName?: string;
     label?: string;
     name?: string;
     required?: boolean;
     error?: boolean;
     helperText?: string;
 }
-declare const OtpInput: ({ length, onChangeOtp, containerSx, inputSx, label, name, required, error, helperText, }: OtpInputProps) => react_jsx_runtime.JSX.Element;
+declare const OtpInput: ({ length, onChangeOtp, containerClassName, inputClassName, label, name, required, error, helperText, }: OtpInputProps) => react_jsx_runtime.JSX.Element;
 
 type PasswordFieldProps = {
-    containerProps?: StackProps;
+    name?: string;
+    label?: string;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    required?: boolean;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
     description?: string;
-} & TextFieldProps$1;
-declare const PasswordField: ({ name, label, value, onChange, required, containerProps, description, type, ...rest }: PasswordFieldProps) => react_jsx_runtime.JSX.Element;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    helperText?: string;
+    className?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+declare const PasswordField: ({ name, label, value, onChange, required, containerProps, description, placeholder, disabled, error, helperText, className, ...rest }: PasswordFieldProps) => react_jsx_runtime.JSX.Element;
 
 type RadioGroupProps = {
-    containerProps?: StackProps;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
     options: Array<{
         label: ReactNode;
         value: any;
         disabled?: boolean;
     }>;
-    label: string;
-    required: boolean;
+    label?: string;
+    required?: boolean;
     name: string;
-    disabled: boolean;
-} & RadioGroupProps$1;
-declare const RadioGroup: ({ label, required, options, name, containerProps, disabled, onChange, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+    disabled?: boolean;
+    value?: any;
+    defaultValue?: any;
+    onChange?: (value: any) => void;
+    onValueChange?: (value: string) => void;
+    direction?: 'row' | 'column';
+    className?: string;
+    error?: boolean;
+    helperText?: ReactNode;
+};
+declare const RadioGroup: ({ label, required, options, name, containerProps, disabled, onChange, onValueChange, direction, className, error, helperText, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
 
 type SearchBarProps = {
     placeholder?: string;
     label?: string | ReactNode;
     value?: string;
-    onSearch: (value: string) => void;
-} & TextFieldProps$1;
-declare const SearchBar: ({ placeholder, label, value, onSearch, ...rest }: SearchBarProps) => react_jsx_runtime.JSX.Element;
+    onSearch?: (value: string) => void;
+    className?: string;
+    containerClassName?: string;
+    inputClassName?: string;
+} & Omit<React.ComponentProps<'input'>, 'onChange' | 'value'>;
+declare const SearchBar: ({ placeholder, label, value, onSearch, className, containerClassName, inputClassName, ...rest }: SearchBarProps) => react_jsx_runtime.JSX.Element;
 
 type SelectProps = {
     options: Array<{
-        label: react.ReactNode;
+        label: React$1.ReactNode;
         value: string | number;
         color?: 'red' | 'green' | 'blue' | 'pink' | 'yellow' | 'orange' | 'secondary';
     }>;
-    onChange?: (event: react.ChangeEvent<{
-        value: any;
-    }>) => void;
-    value: string | number;
-    containerSx?: SxProps;
-} & BaseSelectProps;
-declare const Select: ({ options, onChange, value, containerSx, }: SelectProps) => react_jsx_runtime.JSX.Element;
+    onChange?: (value: string) => void;
+    value?: string | number;
+    defaultValue?: string | number;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+};
+declare const Select: ({ options, onChange, value, placeholder, className, defaultValue, disabled, fullWidth, }: SelectProps) => react_jsx_runtime.JSX.Element;
 
 type CheckboxProps = {
-    checkedIcon?: ReactNode;
-    icon?: ReactNode;
     label: ReactNode;
-    formControlLabelProps?: Omit<FormControlLabelProps, 'control' | 'label'>;
-    typographyProps?: TypographyProps;
-} & CheckboxProps$1;
-declare const SingleCheckBox: ({ checked, label, onChange, required, checkedIcon, icon, formControlLabelProps, typographyProps, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
-
-declare module '@mui/material/Autocomplete' {
-    interface AutocompletePaperSlotPropsOverrides {
-        loadingOptions: boolean;
-        isSearch: boolean;
-    }
-}
+    required?: boolean;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    labelClassName?: string;
+    containerClassName?: string;
+    disabled?: boolean;
+    name?: string;
+} & Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'checked' | 'onChange' | 'onCheckedChange'>;
+declare const SingleCheckBox: ({ checked, label, onChange, required, className, labelClassName, containerClassName, disabled, name, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
 type SingleSelectProps = {
     options?: {
         label: string;
@@ -899,6 +926,7 @@ type SingleSelectProps = {
     label?: string;
     name?: string;
     getValue?: (option: any) => any;
+    value?: any;
     dbValueProps?: {
         valueKey: string;
         isObjectId?: boolean;
@@ -912,43 +940,42 @@ type SingleSelectProps = {
         useSubLabelStartCase?: boolean;
     };
     onChange?: (value: any) => void;
+    onOpen?: (event: SyntheticEvent) => void;
+    onClose?: (event: SyntheticEvent, reason: string) => void;
     error?: any;
     helperText?: string;
     type?: 'input' | 'filter';
     disableClear?: boolean;
-} & Omit<AutocompleteProps<{
-    label: string;
-    subLabel?: string;
-    value: any;
-} | any, false, true, false>, 'options' | 'open' | 'onChange' | 'autoFocus' | 'PaperComponent' | 'renderOption' | 'options' | 'renderInput'>;
+    fullWidth?: boolean;
+};
 declare const SingleSelect: ({ options, optionsApiEndPoint, optionsApiEndpointParams, externalAxios, getValue, value, onChange, dbValueProps, dbLabelProps, onOpen, onClose, type, ...restProps }: SingleSelectProps) => react_jsx_runtime.JSX.Element;
 
-type SwitchProps = {} & SwitchProps$1;
-declare const Switch: (props: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare function Switch$1({ className, ...props }: React$1.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof Switch$1> {
+    label?: string;
+}
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
 
 type TextFieldProps = {
-    containerProps?: StackProps;
+    containerProps?: React$1.HTMLAttributes<HTMLDivElement>;
     description?: string;
-} & TextFieldProps$1;
-declare const TextField: ({ name, label, value, onChange, required, containerProps, description, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
-
-type TimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = {
-    format?: 'hh:mm a' | 'HH:mm' | 'HH:mm:ss a' | 'HH:mm:ss';
-    views?: ('hours' | 'minutes' | 'seconds')[];
-    helperText?: string;
-    placeholder?: string;
+    label?: React$1.ReactNode | string;
     required?: boolean;
-    containerProps?: any;
-} & TimePickerProps$1<TEnableAccessibleFieldDOMStructure>;
-declare const TimePicker: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>({ label, name, value, format, views, helperText, placeholder, required, containerProps, ...rest }: TimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => react_jsx_runtime.JSX.Element;
+    fullWidth?: boolean;
+    error?: boolean;
+} & React$1.ComponentProps<typeof Input>;
+declare const TextField: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
 
-interface SideMenuItemProps$1 {
+interface SideMenuItemProps {
     name: string;
     path: string;
     icon: ReactElement;
     permissionKey?: string;
     subMenu?: SubMenuData[];
-    menu?: SideMenuItemProps$1[];
+    menu?: SideMenuItemProps[];
 }
 interface SubMenuData {
     name: string;
@@ -962,13 +989,13 @@ interface UserProfilePopupProps {
     /** User's email */
     email?: string;
     /** Profile dropdown actions (custom menu items) */
-    profileActions?: react__default.ReactNode[];
+    profileActions?: React__default.ReactNode[];
     /** Logout click handler */
     onLogout?: () => void;
     /** Profile image URL */
     profileUrl?: string;
-    /** Custom styles for the avatar */
-    avatarSx?: any;
+    /** Custom className for the avatar */
+    avatarClassName?: string;
     /** Whether to show active devices option */
     showActiveDevices?: boolean;
     /** Active devices click handler */
@@ -978,25 +1005,7 @@ interface UserProfilePopupProps {
     /**Persistant Side bar collapsed - boolean */
     collapsed?: boolean;
 }
-/**
- * Independent User Profile popup component for AppLayout right section
- * No longer depends on UserBox - contains its own implementation
- * Provides clean, flexible props interface
- *
- * @example
- * <UserProfilePopup
- *   userFullName="John Doe"
- *   designation="Administrator"
- *   profileActions={[
- *     <SwitchInstitutionPopup key="switch" />,
- *     <DropdownMenuItem key="settings" label="Settings" onClick={() => {}} />
- *   ]}
- *   onLogout={handleLogout}
- *   showActiveDevices={true}
- *   onActiveDevicesClick={() => console.log('Active devices')}
- * />
- */
-declare const UserProfilePopup: react__default.FC<UserProfilePopupProps>;
+declare const UserProfilePopup: React__default.FC<UserProfilePopupProps>;
 
 interface HelpDocsAction {
     name: string;
@@ -1012,17 +1021,15 @@ interface AppLayoutProps {
     /** Main content to be rendered */
     children: ReactNode;
     /** Navigation menu items */
-    menu: SideMenuItemProps$1[];
+    menu: SideMenuItemProps[];
     /**User profile parameters */
     userProfileParams: UserProfilePopupProps;
-    /** AppBar customization - Primary approach */
-    leftSection?: ReactNode;
-    /** AppBar customization - Primary approach */
-    rightSection?: ReactNode;
-    /** AppBar center section customization */
-    centerSection?: ReactNode;
+    /** Switchers section customization - receives collapsed state */
+    actions?: ReactNode | ((params: {
+        collapsed: boolean;
+    }) => ReactNode);
     /** Layout customization */
-    mainContainerSx?: any;
+    mainContainerClassName?: string;
     /** Help documentation configuration for route-based contextual help */
     helpDocsConfig?: HelpDocsConfig;
     /**
@@ -1031,224 +1038,69 @@ interface AppLayoutProps {
     initialCollapsed?: boolean;
 }
 
-declare const AppLayout: react__default.FC<AppLayoutProps>;
+declare const AppLayout: React__default.FC<AppLayoutProps>;
 
-interface FloatingHelpDocsProps {
-    /** Array of help actions to display */
-    actions: HelpDocsAction[];
-}
-/**
- * FloatingHelpDocs - Route-aware floating help documentation component
- *
- * This component renders a floating Speed Dial with contextual help actions
- * based on the current route configuration.
- *
- * @example
- * // Renders when actions are provided for current route
- * <FloatingHelpDocs
- *   actions={[
- *     { name: 'Know how to collect fee', onClick: () => window.open('...') }
- *   ]}
- * />
- */
-declare const FloatingHelpDocs: react__default.FC<FloatingHelpDocsProps>;
-
-interface HelpItem {
-    key: string;
-    icon: react__default.ReactNode;
-    title: string;
-    description: string;
-    onClick: () => void;
-}
-interface HelpPopupProps {
-    /** Custom help menu items */
-    helpItems?: HelpItem[];
-    /** Custom icon for the trigger button */
-    icon?: react__default.ReactNode;
-    /** Custom styles for the trigger button */
-    triggerSx?: any;
+interface SidebarContextType {
+    collapsed: boolean;
+    toggleSidebar: () => void;
+    setCollapsed: (collapsed: boolean) => void;
 }
-/**
- * Reusable Help popup component for AppLayout right section
- *
- * @example
- * // In AppLayout rightSection
- * <HelpPopup />
- *
- * // With custom help items
- * <HelpPopup helpItems={customHelpItems} />
- */
-declare const HelpPopup: react__default.FC<HelpPopupProps>;
-
-interface SwitchInstitutionPopupProps {
-    /** Institution data for switching */
-    institutionsData?: any[];
-    /** Custom text for the menu item */
-    menuText?: string;
+interface SidebarProviderProps {
+    children: React__default.ReactNode;
+    initialCollapsed?: boolean;
 }
-/**
- * Reusable SwitchInstitution popup component that renders as a dropdown menu item
- * Designed to be used within profile actions
- *
- * @example
- *  In UserProfilePopup profileActions
- * <SwitchInstitutionPopup institutionsData={institutions} />
- */
-declare const SwitchInstitutionPopup: react__default.FC<SwitchInstitutionPopupProps>;
-
-type AppHeaderProps = {
-    actions?: ReactNode[];
-    profileActions?: ReactNode[];
-    appsMenu?: ReactNode;
-    centerContent?: ReactNode;
-    clientLogoUrl?: string;
-    clientName?: string;
-    userFullName: string;
-    designation?: string;
-    collapsed: boolean;
-    institutionsData?: any[];
-    profileSx?: any;
-    onLogoutClick?: () => void;
-    showActiveDevices?: boolean;
-    headerSx?: SxProps;
-    onAccountClick?: () => void;
-    onActiveDevicesClick?: () => void;
-    onChangeInstitutionClick?: () => void;
-    onAvatarClick?: () => void;
-};
-declare const AppHeader: ({ actions, profileActions, profileSx, clientLogoUrl, onLogoutClick, designation, clientName, userFullName, collapsed, institutionsData, showActiveDevices, headerSx, centerContent, onAccountClick, onActiveDevicesClick, onChangeInstitutionClick, onAvatarClick, }: AppHeaderProps) => react_jsx_runtime.JSX.Element;
+declare const SidebarProvider: React__default.FC<SidebarProviderProps>;
+declare const useSidebar: () => SidebarContextType;
 
-declare const Sidebar: ({ menu, collapsed, setCollapsed, }: {
-    menu: SideMenuItemProps[];
-    collapsed: boolean;
-    setCollapsed: any;
-}) => react_jsx_runtime.JSX.Element;
-interface SideMenuItemProps {
-    name: string;
-    path: string;
-    icon: ReactElement;
-    permissionKey?: string;
-    subMenu?: SubMenuItemProps[];
-    menu?: SideMenuItemProps[];
+interface MenuToggleButtonProps {
+    /** Custom className */
+    className?: string;
 }
-interface SubMenuItemProps {
-    name: string;
-    path: string;
-    permissionKey?: string;
+declare const MenuToggleButton: React__default.FC<MenuToggleButtonProps>;
+
+declare function Sheet({ ...props }: React$1.ComponentProps<typeof SheetPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function SheetTrigger({ ...props }: React$1.ComponentProps<typeof SheetPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function SheetClose({ ...props }: React$1.ComponentProps<typeof SheetPrimitive.Close>): react_jsx_runtime.JSX.Element;
+declare function SheetContent({ className, children, side, ...props }: React$1.ComponentProps<typeof SheetPrimitive.Content> & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+}): react_jsx_runtime.JSX.Element;
+declare function SheetHeader({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SheetFooter({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SheetTitle({ className, ...props }: React$1.ComponentProps<typeof SheetPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function SheetDescription({ className, ...props }: React$1.ComponentProps<typeof SheetPrimitive.Description>): react_jsx_runtime.JSX.Element;
+
+interface PageContentProps {
+    children: ReactNode;
+    className?: string;
 }
-
-type AppHeaderV2Props = {
-    /** Custom action components to display in the header */
-    actions?: ReactNode[];
-    /** Profile dropdown actions */
-    profileActions?: ReactNode[];
-    /** Full name of the current user */
-    userFullName: string;
-    /** User's designation/role */
-    designation?: string;
-    /** Whether the sidebar is collapsed */
-    collapsed: boolean;
-    /** Callback function to toggle sidebar drawer (mobile only) */
-    onToggleSidebar?: () => void;
-    /** Breadcrumb navigation component (displayed on desktop only) */
-    breadcrumbs?: ReactNode;
-    /** Institution data for user profile */
-    institutionsData?: any[];
-    /** Custom styles for profile component */
-    profileSx?: any;
-    /** Logout click handler */
-    onLogoutClick?: () => void;
-    /** Whether to show active devices in profile */
-    showActiveDevices?: boolean;
-    /** Custom styles for the header */
-    headerSx?: SxProps;
-    menu: SideMenuItemProps[];
-};
-declare const AppHeaderV2: ({ actions, profileActions, profileSx, onLogoutClick, designation, userFullName, collapsed, onToggleSidebar, breadcrumbs, institutionsData, showActiveDevices, headerSx, menu, }: AppHeaderV2Props) => react_jsx_runtime.JSX.Element;
-
-type FloatingContainerProps = {
-    title?: string;
-    content: ReactNode;
-    contentProps?: BoxProps;
-    titleProps?: BoxProps;
-};
-declare const FloatingContent: (props: FloatingContainerProps) => react_jsx_runtime.JSX.Element;
-
-type PageContentProps = {
-    variant?: 'stepper' | 'standard' | 'side-panel';
-} & BoxProps;
-declare const PageContent: ({ variant, ...props }: PageContentProps) => react_jsx_runtime.JSX.Element;
-
-type DensitySelectorProps = {
-    menuProps?: Omit<MenuProps, 'open'>;
-    menuListProps?: MenuListProps;
-    uniqueId: string;
-};
-declare const DensitySelector: ({ uniqueId, ...props }: DensitySelectorProps) => react_jsx_runtime.JSX.Element;
-
-type PageHeaderSingleState = {
-    density: GridDensity;
-    columnVisibilityModel: GridColumnVisibilityModel;
-    filters: {
-        search?: string;
-        limit: number;
-        offset: number;
-        skip: number;
-        [x: string]: any;
-    };
-};
-type PageHeaderState = {
-    [uniqueId: string]: PageHeaderSingleState;
-};
-
-type ViewsProps = {
-    type: string;
-    axios: Axios;
-    uniqueId: string;
-};
+declare const PageContent: ({ children, className }: PageContentProps) => react_jsx_runtime.JSX.Element;
 
 interface PageHeaderProps {
     uniqueId?: string;
-    viewsSlot?: ReactNode;
-    filterComponents?: ReactElement[];
-    viewsProps?: Omit<ViewsProps, 'uniqueId'>;
-    actions?: ReactNode[];
-    columns?: GridColDef[];
-    searchText?: string;
-    defaultShowLabels?: string[];
-}
-declare const PageHeader: ({ uniqueId, actions, filterComponents, defaultShowLabels, columns, viewsSlot, searchText, viewsProps, }: PageHeaderProps) => react_jsx_runtime.JSX.Element;
-
-interface TabsLayoutProps {
-    menu: MenuItem[];
-}
-interface MenuItem {
-    title: string;
-    path: string;
-    permissionKey?: string;
+    pathTrimCount: number;
+    searchButtonProps?: SearchBarProps;
+    filterButtonProps?: {
+        label?: string;
+        startIcon?: ReactNode;
+        components: ReactElement[];
+    };
+    addButtonProps?: {
+        label?: string;
+        onClick: any;
+    };
+    actionProps?: {
+        menu: ReactNode[] | ((props: {
+            close: () => void;
+        }) => ReactNode[]);
+    };
 }
-declare const TabsLayout: ({ menu }: TabsLayoutProps) => react_jsx_runtime.JSX.Element;
-
-type TableColumnsSelectorProps = {
-    columns: GridColDef[];
-    menuProps?: Omit<MenuProps, 'open'>;
-    menuListProps?: MenuListProps;
-    uniqueId: string;
-};
-declare const FooterContainerContainer: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
-}, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
-declare const TableColumnsSelectorMenuFooter: ({ onClick, }: {
-    onClick: () => void;
-}) => react_jsx_runtime.JSX.Element;
-declare const TableColumnsSelector: ({ columns, uniqueId, ...props }: TableColumnsSelectorProps) => react_jsx_runtime.JSX.Element;
+declare const PageHeader: ({ uniqueId, pathTrimCount, searchButtonProps, filterButtonProps, addButtonProps, actionProps, }: PageHeaderProps) => react_jsx_runtime.JSX.Element;
 
 type BreadcrumbsProps = {
     pathTrimCount: number;
-    containerProps?: SxProps;
-    actions?: ReactNode[];
-} & BreadcrumbsProps$1;
-declare const Breadcrumbs: ({ pathTrimCount, containerProps, actions, ...rest }: BreadcrumbsProps) => react_jsx_runtime.JSX.Element;
+    containerClassName?: string;
+};
+declare const Breadcrumbs: ({ pathTrimCount, containerClassName, }: BreadcrumbsProps) => react_jsx_runtime.JSX.Element;
 
 interface CalendarEvent {
     id: string | number;
@@ -1323,7 +1175,7 @@ interface CalendarProps {
     dayMaxEvents?: boolean | number;
     height?: string | number;
     aspectRatio?: number;
-    containerProps?: StackProps;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
     locale?: string;
     timezone?: string;
     firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -1339,7 +1191,7 @@ interface CalendarProps {
     selectConstraint?: any;
 }
 
-declare const Calendar: react__default.FC<CalendarProps>;
+declare const Calendar: React__default.FC<CalendarProps>;
 
 /**
  * Generate recurring events based on a pattern
@@ -1397,6 +1249,7 @@ declare const validateEvent: (event: Partial<CalendarEvent>) => {
 };
 
 type ConfirmDialogType = 'confirm' | 'delete';
+type MaxWidthSize$2 = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type ConfirmDialogProps = {
     isOpen: boolean;
     title: string;
@@ -1406,34 +1259,48 @@ type ConfirmDialogProps = {
     type: ConfirmDialogType;
     confirmButtonText?: string;
     cancelButtonText?: string;
+    maxWidth?: MaxWidthSize$2;
 };
 declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
 
+type MaxWidthSize$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type DialogProps = {
     content: (props: {
         close: () => void;
     }) => ReactNode;
     title?: string | undefined;
     onClose: () => void;
-} & Omit<DialogProps$1, 'content'>;
-declare const Dialog: ({ onClose, title, content, open, ...props }: DialogProps) => react_jsx_runtime.JSX.Element;
+    open: boolean;
+    className?: string;
+    showCloseButton?: boolean;
+    maxWidth?: MaxWidthSize$1;
+};
+declare const Dialog: ({ onClose, title, content, open, className, showCloseButton, maxWidth, }: DialogProps) => react_jsx_runtime.JSX.Element;
 
+type MaxWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type DialogButtonProps = {
     anchor: (props: {
         open: () => void;
     }) => ReactNode;
     onDialogOpen?: () => void;
     onDialogClose?: () => void;
-} & Omit<DialogProps, 'open' | 'onClose'>;
-declare const DialogButton: ({ onDialogClose, onDialogOpen, anchor, ...props }: DialogButtonProps) => react_jsx_runtime.JSX.Element;
+    content: (props: {
+        close: () => void;
+    }) => ReactNode;
+    title?: string | undefined;
+    className?: string;
+    showCloseButton?: boolean;
+    maxWidth?: MaxWidthSize;
+};
+declare const DialogButton: ({ onDialogClose, onDialogOpen, anchor, content, title, className, showCloseButton, maxWidth, }: DialogButtonProps) => react_jsx_runtime.JSX.Element;
 
 declare const DropDownButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 declare const DropDownIcon: ({ icon, handleClick, }: {
     icon?: {
         icon?: ReactNode;
-        iconProps?: IconButtonProps;
         outlined?: boolean;
+        className?: string;
     };
     handleClick: any;
 }) => react_jsx_runtime.JSX.Element;
@@ -1449,22 +1316,25 @@ type DropdownMenuProps = {
         close: () => void;
     }) => ReactNode;
     useMenuSlot?: boolean;
-    menuProps?: Omit<MenuProps, 'open'>;
-    menuListProps?: MenuListProps;
-    menuListContainerSx?: StackProps['sx'];
+    menuContentClassName?: string;
+    menuListClassName?: string;
     menuHeader?: ReactNode;
     menuFooter?: ReactNode;
     handleMenuScroll?: (event: any) => Promise<void>;
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'right' | 'bottom' | 'left';
 };
-declare const DropdownMenu: ({ menuProps, menu, menuSlot, useMenuSlot, menuListProps, menuHeader, menuFooter, menuListContainerSx, anchor, handleMenuScroll, }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownMenu: ({ menu, menuSlot, useMenuSlot, menuHeader, menuFooter, menuContentClassName, menuListClassName, anchor, handleMenuScroll, align, side, }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
 
 type DropdownMenuItemProps = {
     icon?: ReactNode;
     label: ReactNode;
-    sx?: SxProps;
+    className?: string;
     onClick: () => void;
-} & MenuItemProps;
-declare const DropdownMenuItem: ({ icon, label, onClick, sx, ...props }: DropdownMenuItemProps) => react_jsx_runtime.JSX.Element;
+    disabled?: boolean;
+    variant?: 'default' | 'destructive';
+};
+declare const DropdownMenuItem: ({ icon, label, onClick, className, disabled, variant, }: DropdownMenuItemProps) => react_jsx_runtime.JSX.Element;
 
 type PreviewFilesProps = {
     files: File[] | File | string[] | string | null;
@@ -1472,71 +1342,65 @@ type PreviewFilesProps = {
     onChange?: (newFiles: File[], deletedFile: File) => void;
     showDownload?: boolean;
     hideDelete?: boolean;
-    sx?: SxProps;
-} & Omit<BoxProps, 'onChange'>;
-declare const PreviewFiles: ({ files, label, onChange, showDownload, hideDelete, sx, ...props }: PreviewFilesProps) => react_jsx_runtime.JSX.Element;
+    className?: string;
+};
+declare const PreviewFiles: ({ files, label, onChange, showDownload, hideDelete, className, }: PreviewFilesProps) => react_jsx_runtime.JSX.Element;
+
+declare const HorizontalStepper: React__default.FC<StepperVariantProps>;
 
-interface StepperProps {
-    /** Orientation of the stepper */
-    orientation: 'vertical' | 'horizontal';
+declare const VerticalStepper: React__default.FC<StepperVariantProps>;
+
+/**
+ * Interface for individual step items
+ */
+interface StepItem {
+    /** The label text for the step */
+    label: string;
+    /** Optional description text shown below the label */
+    description?: string;
+}
+/**
+ * Props for the Stepper Variant components
+ */
+interface StepperVariantProps {
     /** Current active step index (0-based) */
     activeStep: number;
     /** Array of step items with labels and optional descriptions */
     steps: StepItem[];
-    /** Additional styles for the container */
-    containerSx: SxProps;
+    /** Additional className for the container */
+    containerClassName?: string;
     /** Callback function called when a step is clicked. Receives the step index as parameter */
     onStepClick?: (stepIndex: number) => void;
     /** Whether to allow navigation by clicking on steps. Defaults to true */
     allowNavigation?: boolean;
 }
-interface StepItem {
-    /** The label text for the step */
-    label: string;
-    /** Optional description text shown below the label */
-    description?: string;
-}
+type StepperProps = StepperVariantProps & {
+    /** Orientation of the stepper - horizontal or vertical */
+    orientation?: 'vertical' | 'horizontal';
+};
 /**
- * Enhanced Stepper component with navigation capabilities
- *
- * Features:
- * - Click on any step to navigate to it (when allowNavigation is true)
- * - Supports both vertical and horizontal orientations
- * - Customizable styling through containerSx prop
- * - Optional step descriptions
- *
- * @example
- * ```tsx
- * const [activeStep, setActiveStep] = useState(0);
- *
- * <Stepper
- *   orientation="vertical"
- *   activeStep={activeStep}
- *   steps={[
- *     { label: "Step 1", description: "First step" },
- *     { label: "Step 2", description: "Second step" }
- *   ]}
- *   onStepClick={(stepIndex) => setActiveStep(stepIndex)}
- *   allowNavigation={true}
- *   containerSx={{}}
- * />
- * ```
+ * Main Stepper component that handles both horizontal and vertical orientations
  */
-declare const Stepper: ({ orientation, steps, activeStep, containerSx, onStepClick, allowNavigation, }: StepperProps) => react_jsx_runtime.JSX.Element;
+declare const Stepper: React__default.FC<StepperProps>;
 
-interface CustomTabProps extends Omit<TabProps, 'component'> {
+interface CustomTabProps {
     key: string | number;
+    label: React.ReactNode;
     component: React.ReactNode;
     highlight?: boolean;
+    disabled?: boolean;
+    icon?: React.ReactNode;
 }
 interface TabsContainerProps {
     tabs: CustomTabProps[];
     onTabChange?: (tabKey: string) => void;
     currentTabIndex?: number;
-    tabsProps: TabsProps;
+    className?: string;
+    tabsListClassName?: string;
+    tabsTriggerClassName?: string;
     variant?: 'fixed' | 'dynamic';
 }
-declare const TabsContainer: ({ tabs, onTabChange, currentTabIndex, tabsProps, variant, }: TabsContainerProps) => react_jsx_runtime.JSX.Element;
+declare const TabsContainer: ({ tabs, onTabChange, currentTabIndex, className, tabsListClassName, tabsTriggerClassName, variant, }: TabsContainerProps) => react_jsx_runtime.JSX.Element;
 
 type UploadDialogProps = {
     anchor: (props: {
@@ -1549,14 +1413,24 @@ type UploadDialogProps = {
     onUpload: (file: File | File[]) => void;
     acceptFileType?: string;
     loading?: boolean;
-} & Omit<DialogProps, 'content' | 'onClose' | 'open'>;
-declare const UploadDialog: ({ onUpload, sampleFileUrl, acceptFileType, loading, title, anchor, onDialogClose, onDialogOpen, ...props }: UploadDialogProps) => react_jsx_runtime.JSX.Element;
+};
+declare const UploadDialog: ({ onUpload, sampleFileUrl, acceptFileType, loading, title, anchor, onDialogClose, onDialogOpen, }: UploadDialogProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Custom hook to check if the screen size matches the given media query
+ * @param query - Media query string (e.g., '(max-width: 768px)')
+ * @returns boolean indicating if the media query matches
+ */
+declare function useMediaQuery(query: string): boolean;
 
 declare const usePageHeader: (defaultFilters?: {
     [x: string]: any;
 }) => {
-    columnVisibilityModel: _mui_x_data_grid.GridColumnVisibilityModel;
-    density: _mui_x_data_grid.GridDensity;
+    columnVisibilityModel: {
+        [x: string]: boolean;
+    };
+    density: "compact" | "standard" | "comfortable";
+    layoutMode: "table" | "card";
     filters: {
         [x: string]: any;
         search?: string;
@@ -1571,6 +1445,7 @@ declare const usePageHeader: (defaultFilters?: {
     }) => void;
     onPageChange: (offset: number) => void;
     onLimitChange: (limit: number) => void;
+    setLayoutMode: (layoutMode: "table" | "card") => void;
 };
 
 declare const useParams: () => {
@@ -1584,19 +1459,30 @@ declare const useUrlParams: () => {
     [x: string]: string;
 };
 
+declare function cn(...inputs: ClassValue[]): string;
+
+type PageHeaderSingleState = {
+    density: 'compact' | 'standard' | 'comfortable';
+    columnVisibilityModel: {
+        [x: string]: boolean;
+    };
+    layoutMode: 'table' | 'card';
+    filters: {
+        search?: string;
+        limit: number;
+        offset: number;
+        skip: number;
+        [x: string]: any;
+    };
+};
+type PageHeaderState = {
+    [uniqueId: string]: PageHeaderSingleState;
+};
+
 declare const reactBlueprintReducers: {
     pageHeader: redux.Reducer<PageHeaderState>;
 };
 
-declare const darkTheme: CustomTheme;
-
-declare const lightTheme: CustomTheme;
-
-declare const MuiThemeProvider: ({ children, theme, }: {
-    children: ReactNode;
-    theme?: any;
-}) => react_jsx_runtime.JSX.Element;
-
 declare const getBreadcrumbsCharacter: () => string;
 type CreateUrlSlug = {
     name: string;
@@ -1611,5 +1497,5 @@ declare const splitBreadcrumbIdSlug: (param: string) => {
 declare const isLocal: boolean;
 declare const isDevelopment: boolean;
 
-export { Accordion, AccordionGroup, ActivityLogView, Alert, AnimatedGIFs, AppHeader, AppHeaderV2, AppLayout, BarChart, Breadcrumbs, Button, Calendar, Card, CellContainer, CenterBox, Chips, CircularAvatar, ComingSoon, ConfirmDialog, DataTable, DatePicker, DateTimePicker, DensitySelector, Dialog, DialogButton, DropDownButton, DropDownIcon, DropdownMenu, DropdownMenuItem, EditableDataTable, EditableTableCore, EmptyIllustration, FileUpload, FloatingContent, FloatingHelpDocs, FooterContainerContainer, FormActions, FormControlWrapper, FormWrapper, HelpPopup, IconButtons, Icons, InternalServerError, LabelWrapper, LineChart, MuiThemeProvider, MultiCheckBox, NoInterneConnection, NoItemFound, OtpInput, PageContent, PageHeader, PageNotFound, PasswordField, PieChart, PreviewFiles, ProgressCard, RadioGroup, ReactJoyRide, ResourceNotFound, SearchBar, Select, SidePanel, SidePanelVariables, Sidebar, SingleCheckBox, SingleSelect, Snackbar, Spinner, SquareAvatar, StatusCard, Stepper, StyledContainer, Svgs, Switch, SwitchInstitutionPopup, TableColumnsSelector, TableColumnsSelectorMenuFooter, TabsContainer, TabsLayout, TextField, TimePicker, Timeline, ToolTipContent, Tooltip, Tutorial, Typography, UnAuthorized, UploadDialog, UserProfilePopup, calculateEventStats, createBreadcrumbIdSlug, darkTheme, exportEventsToCSV, filterEventsByDateRange, generateBusinessEvents, generateRecurringEvents, getBreadcrumbsCharacter, groupEventsByDate, isDevelopment, isLocal, lightTheme, reactBlueprintReducers, splitBreadcrumbIdSlug, usePageHeader, useParams, useUrlParams, validateEvent };
-export type { AccordionProps, Activity, ActivityAction, AlertProps, AppHeaderProps, AppHeaderV2Props, AppLayoutProps, BarChartProps, BreadcrumbsProps, ButtonConfig, ButtonProps, CalendarDateClickInfo, CalendarDateSelectInfo, CalendarEvent, CalendarEventClickInfo, CalendarEventDropInfo, CalendarEventResizeInfo, CalendarHeaderToolbar, CalendarProps, CalendarView, CardProps, CheckboxProps, CircularAvatarProps, ConfirmDialogProps, ConfirmDialogType, DataTableProps, DensitySelectorProps, DialogButtonProps, DialogProps, DropdownMenuItemProps, DropdownMenuProps, EditableDataTableProps, EventStats, FileUploadProps, FloatingContainerProps, FormActionsProps, HelpDocsAction, HelpDocsConfig, IconComponent, IconProps, IconsType, LineChartProps, MultiCheckboxProps, OtpInputProps, PageContentProps, PasswordFieldProps, PieChartProps, PreviewFilesProps, ProgressCardProps, RadioGroupProps, RecurringEventConfig, SearchBarProps, SelectProps, Severity, SideMenuItemProps, SidePanelProps, SingleSelectProps, SnackbarProps, SquareAvatarProps, StatusCardProps, SubMenuItemProps, SwitchProps, TableColumnsSelectorProps, TabsContainerProps, TextFieldProps, TimelineItems, TimelineProps, TooltipContentProps, TooltipProps, TypographyProps, UploadDialogProps };
+export { Accordion, ActivityLogView, Alert, AnimatedGIFs, AppLayout, Breadcrumbs, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, Card$1 as CardRoot, CardTitle, Chip, Chips, CircularAvatar, ComingSoon, ConfirmDialog, DataTable, DatePicker, DateTimePicker, Dialog, DialogButton, DropDownButton, DropDownIcon, DropdownMenu, DropdownMenuItem, EmptyIllustration, FileUpload, FormActions, FormControlWrapper, FormWrapper, HorizontalBarChart, HorizontalStepper, IconButtons, Icons, InternalServerError, LabelWrapper, LineChart, MenuToggleButton, MultiCheckBox, MultiSelect, NoInterneConnection, NoItemFound, OtpInput, PageContent, PageHeader, PageNotFound, PasswordField, PieChart, PreviewFiles, RadioGroup, ReactJoyRide, ResourceNotFound, SearchBar, Select, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarProvider, SingleCheckBox, SingleSelect, Skeleton, Snackbar, Spinner, StatusCard, Stepper, Svgs, Switch, TablePagination, TabsContainer, TextField, Timeline, Tooltip, Typography, UnAuthorized, UploadDialog, UserProfilePopup, VerticalBarChart, VerticalStepper, buttonVariants, calculateEventStats, cn, createBreadcrumbIdSlug, exportEventsToCSV, filterEventsByDateRange, generateBusinessEvents, generateRecurringEvents, getBreadcrumbsCharacter, groupEventsByDate, isDevelopment, isLocal, reactBlueprintReducers, splitBreadcrumbIdSlug, typographyVariants, useMediaQuery, usePageHeader, useParams, useSidebar, useUrlParams, validateEvent };
+export type { AccordionItemProps, Activity, ActivityAction, AlertProps, AppLayoutProps, BarChartData, BarChartProps, BarChartVariant, BreadcrumbsProps, ButtonConfig, ButtonProps, CalendarDateClickInfo, CalendarDateSelectInfo, CalendarEvent, CalendarEventClickInfo, CalendarEventDropInfo, CalendarEventResizeInfo, CalendarHeaderToolbar, CalendarProps, CalendarView, CardProps, ChartConfig, CheckboxProps, ChipProps, CircularAvatarProps, ConfirmDialogProps, ConfirmDialogType, DataTableProps, DatePickerProps, DateTimePickerProps, DialogButtonProps, DialogProps, DropdownMenuItemProps, DropdownMenuProps, EventStats, FileUploadProps, FormActionsProps, HelpDocsAction, HelpDocsConfig, HorizontalBarChartProps, IconComponent, IconProps, IconsType, LabelWrapperProps, LineChartProps, MaxWidthSize$1 as MaxWidthSize, MultiCheckboxProps, MultiSelectProps, OtpInputProps, PageHeaderProps, PaginationProps, PasswordFieldProps, PieChartProps, PreviewFilesProps, RadioGroupProps, RecurringEventConfig, SearchBarProps, SelectProps, Severity, SingleSelectProps, SnackbarPosition, SnackbarProps, StatusCardProps, StepItem, StepperProps, StepperVariantProps, SwitchProps, TabsContainerProps, TextFieldProps, TimelineItems, TimelineProps, TooltipProps, TreeMapProps, TypographyProps, UploadDialogProps, VerticalBarChartProps };