@campxdev/react-blueprint 2.3.3 → 2.3.6

package/dist/esm/types/src/assets/images/svg/Empty.d.ts

@@ -1 +1,4 @@
-export declare const Empty: () => import("react/jsx-runtime").JSX.Element;
+export declare const Empty: ({ height, width, }: {
+    height?: string | number;
+    width?: string | number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/assets/images/svg/index.d.ts

@@ -5,6 +5,9 @@ export declare const Svgs: {
     ServerError: () => import("react/jsx-runtime").JSX.Element;
     Unauthorized: () => import("react/jsx-runtime").JSX.Element;
     ComingSoon: () => import("react/jsx-runtime").JSX.Element;
-    Empty: () => import("react/jsx-runtime").JSX.Element;
+    Empty: ({ height, width, }: {
+        height?: string | number;
+        width?: string | number;
+    }) => import("react/jsx-runtime").JSX.Element;
     ResourceNotFound: () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/esm/types/src/components/Assets/ErrorPages/NoItemFound.d.ts

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 interface NoItemFoundProps {
     title?: string;
     description: ReactNode;
+    height?: string | number;
+    width?: string | number;
 }
-export declare const NoItemFound: ({ title, description, }: NoItemFoundProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NoItemFound: ({ title, description, height, width, }: NoItemFoundProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/components/Assets/Icons/Icons.d.ts

@@ -1,9 +1,10 @@
 import { FC, MouseEvent } from 'react';
 export interface IconProps {
-    color?: string;
     size?: number;
-    hoverColor?: string;
+    color?: string;
     disabled?: boolean;
+    hoverColor?: string;
+    backgroundColor?: string;
     onClick?: (event: MouseEvent<Element>) => void;
 }
 export type IconComponent = FC<IconProps>;

package/dist/esm/types/src/components/DataDisplay/ActivityLogView/styles.d.ts

@@ -3,7 +3,7 @@ export declare const StyledSpinnerBox: import("@mui/styled-engine").StyledCompon
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledSectionTitle: import("@mui/styled-engine").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("@types/react").DetailedHTMLProps<import("@types/react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: import("@types/react").Ref<HTMLSpanElement>;
-}, "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "height" | "width" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledTimeline: import("@mui/styled-engine").StyledComponent<import("@mui/lab").TimelineProps & import("@types/react").RefAttributes<HTMLUListElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledTimelineDot: import("@mui/styled-engine").StyledComponent<import("@mui/lab").TimelineDotProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledTimelineConnector: import("@mui/styled-engine").StyledComponent<import("@mui/lab").TimelineConnectorProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/types/src/components/DataDisplay/Card/styles.d.ts

@@ -11,7 +11,7 @@ export declare const StyledStack: import("@mui/styled-engine").StyledComponent<i
 }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledStatusText: import("@mui/styled-engine").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("@types/react").DetailedHTMLProps<import("@types/react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: import("@types/react").Ref<HTMLSpanElement>;
-}, "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "height" | "width" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledIcon: import("@mui/styled-engine").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("@types/react").DetailedHTMLProps<import("@types/react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: import("@types/react").Ref<HTMLButtonElement>;
 }, "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loadingIndicator" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/types/src/components/DataDisplay/ReactJoyride/ReactJoyride.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import './CustomJoyRideStyles.css';
+interface JoyrideStep {
+    target: string;
+    content: string | ReactNode;
+    title?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'center' | 'auto';
+    disableBeacon?: boolean;
+    hideCloseButton?: boolean;
+    showProgress?: boolean;
+    showSkipButton?: boolean;
+    spotlightClicks?: boolean;
+    styles?: Record<string, any>;
+}
+export declare const ReactJoyRide: ({ steps, children, tourName, }: {
+    steps: JoyrideStep[];
+    children?: ReactNode;
+    tourName: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/src/components/DataDisplay/SidePanel/styles.d.ts

@@ -9,4 +9,4 @@ export declare const StyledTextContainer: import("@mui/styled-engine").StyledCom
 }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledTypography: import("@mui/styled-engine").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("@types/react").DetailedHTMLProps<import("@types/react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: import("@types/react").Ref<HTMLSpanElement>;
-}, "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "height" | "width" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/types/src/components/DataDisplay/export.d.ts

@@ -7,6 +7,7 @@ export * from './Chips/Chips';
 export * from './DataTable/DataTable';
 export * from './EditableDataTable/EditableDataTable';
 export * from './EmptyIllustration/EmptyIllustration';
+export * from './ReactJoyride/ReactJoyride';
 export * from './SidePanel/SidePanel';
 export * from './StatusCard/StatusCard';
 export * from './Timeline/Timeline';

package/dist/index.d.ts

@@ -38,7 +38,10 @@ declare const Svgs: {
     ServerError: () => react_jsx_runtime.JSX.Element;
     Unauthorized: () => react_jsx_runtime.JSX.Element;
     ComingSoon: () => react_jsx_runtime.JSX.Element;
-    Empty: () => react_jsx_runtime.JSX.Element;
+    Empty: ({ height, width, }: {
+        height?: string | number;
+        width?: string | number;
+    }) => react_jsx_runtime.JSX.Element;
     ResourceNotFound: () => react_jsx_runtime.JSX.Element;
 };
 
@@ -55,8 +58,10 @@ declare const NoInterneConnection: ({ resetBoundary }: any) => react_jsx_runtime
 interface NoItemFoundProps {
     title?: string;
     description: ReactNode;
+    height?: string | number;
+    width?: string | number;
 }
-declare const NoItemFound: ({ title, description, }: NoItemFoundProps) => react_jsx_runtime.JSX.Element;
+declare const NoItemFound: ({ title, description, height, width, }: NoItemFoundProps) => react_jsx_runtime.JSX.Element;
 
 declare const PageNotFound: () => react_jsx_runtime.JSX.Element;
 
@@ -67,10 +72,11 @@ declare const UnAuthorized: ({ component }: {
 }) => react_jsx_runtime.JSX.Element;
 
 interface IconProps {
-    color?: string;
     size?: number;
-    hoverColor?: string;
+    color?: string;
     disabled?: boolean;
+    hoverColor?: string;
+    backgroundColor?: string;
     onClick?: (event: MouseEvent$1<Element>) => void;
 }
 type IconComponent = FC<IconProps>;
@@ -593,6 +599,24 @@ declare const EmptyIllustration: ({ message, imageSize, messageProps, containerP
     containerProps?: SxProps;
 }) => react_jsx_runtime.JSX.Element;
 
+interface JoyrideStep {
+    target: string;
+    content: string | ReactNode;
+    title?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'center' | 'auto';
+    disableBeacon?: boolean;
+    hideCloseButton?: boolean;
+    showProgress?: boolean;
+    showSkipButton?: boolean;
+    spotlightClicks?: boolean;
+    styles?: Record<string, any>;
+}
+declare const ReactJoyRide: ({ steps, children, tourName, }: {
+    steps: JoyrideStep[];
+    children?: ReactNode;
+    tourName: string;
+}) => react_jsx_runtime.JSX.Element;
+
 interface SidePanelProps {
     variables?: {
         label: string;
@@ -1570,5 +1594,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, 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 { 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "2.3.3",
+  "version": "2.3.6",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

package/src/assets/images/svg/Empty.tsx

@@ -1,8 +1,14 @@
-export const Empty = () => {
+export const Empty = ({
+  height,
+  width,
+}: {
+  height?: string | number;
+  width?: string | number;
+}) => {
   return (
     <svg
-      width="350"
-      height="243"
+      width={width || '350'}
+      height={height || '243'}
       viewBox="0 0 350 243"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

package/src/components/Assets/ErrorPages/NoItemFound.tsx

@@ -7,15 +7,19 @@ import { CenterBox } from './styles';
 interface NoItemFoundProps {
   title?: string;
   description: ReactNode;
+  height?: string | number;
+  width?: string | number;
 }
 
 export const NoItemFound = ({
   title = 'No Items Found',
   description,
+  height,
+  width,
 }: NoItemFoundProps) => {
   return (
     <CenterBox>
-      <Svgs.Empty />
+      <Svgs.Empty height={height} width={width} />
       <Typography variant="subtitle1">{title}</Typography>
       <Typography variant="body2">{description}</Typography>
     </CenterBox>

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

@@ -1,8 +1,8 @@
 import { AcademicFeesIcon } from './IconComponents/AcademicFeesIcon';
 import { AcademicsIcon } from './IconComponents/AcademicIcon';
-import { ActivitiesIcon } from './IconComponents/ActivitiesIcon';
 import { AccordionArrow } from './IconComponents/AccordionArrow';
 import { ActiveDevicesIcon } from './IconComponents/ActiveDevicesIcon';
+import { ActivitiesIcon } from './IconComponents/ActivitiesIcon';
 import { ActivitylogsIcon } from './IconComponents/ActivityLogsIcon';
 import { AddSquare } from './IconComponents/AddSquare';
 import { AdminIcon } from './IconComponents/AdminIcon';
@@ -176,10 +176,11 @@ import { FC, MouseEvent } from 'react';
 import { ChallansIcon } from './IconComponents/ChallansIcon';
 
 export interface IconProps {
-  color?: string;
   size?: number;
-  hoverColor?: string;
+  color?: string;
   disabled?: boolean;
+  hoverColor?: string;
+  backgroundColor?: string;
   onClick?: (event: MouseEvent<Element>) => void;
 }
 

package/src/components/DataDisplay/ReactJoyride/CustomJoyRideStyles.css

@@ -0,0 +1,84 @@
+/* Modern ReactJoyride Styles */
+.react-joyride__tooltip {
+  background-color: #ffffff !important;
+  border-radius: 12px !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  border: 1px solid #f3f4f6 !important;
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
+  padding-top: 16px !important;
+}
+
+.react-joyride__tooltip div {
+  text-align: left !important;
+}
+
+
+.react-joyride__tooltip > div:nth-child(1) div:nth-child(2) {
+  padding: 0 !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  color: #4b5563 !important;
+}
+
+/* Adjust skip button positioning */
+.react-joyride__tooltip button[data-action="skip"] {
+  top: 16px !important;
+  right: 16px !important;
+}
+
+/* Beacon styling */
+.react-joyride__beacon {
+  background-color: #3b82f6 !important;
+  border: 3px solid #3b82f6 !important;
+  border-radius: 50% !important;
+  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2) !important;
+}
+
+.react-joyride__beacon::before {
+  background-color: #3b82f6 !important;
+  animation: joyride-beacon-pulse 1.5s ease-in-out infinite !important;
+}
+
+/* Button hover effects */
+.react-joyride__tooltip button[data-action="next"]:hover {
+  background-color: #000000 !important;
+  transform: translateY(-1px) !important;
+}
+
+.react-joyride__tooltip button[data-action="back"]:hover {
+  background-color: #f9fafb !important;
+  border-color: #d1d5db !important;
+}
+
+.react-joyride__tooltip button[data-action="skip"]:hover {
+  background-color: #f3f4f6 !important;
+  color: #374151 !important;
+}
+
+/* Progress indicator */
+.react-joyride__tooltip .react-joyride__tooltip-footer {
+  margin-top: 16px !important;
+  padding-top: 16px !important;
+  border-top: 1px solid #f3f4f6 !important;
+}
+
+/* Arrow styling */
+.react-joyride__tooltip-arrow {
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)) !important;
+}
+
+/* Custom keyframe for beacon pulse */
+@keyframes joyride-beacon-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/src/components/DataDisplay/ReactJoyride/ReactJoyride.tsx

@@ -0,0 +1,264 @@
+import { Box, Button, Typography } from '@mui/material';
+import { ReactNode, useState } from 'react';
+import Joyride, { CallBackProps } from 'react-joyride';
+import './CustomJoyRideStyles.css';
+
+interface JoyrideStep {
+  target: string;
+  content: string | ReactNode;
+  title?: string;
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'center' | 'auto';
+  disableBeacon?: boolean;
+  hideCloseButton?: boolean;
+  showProgress?: boolean;
+  showSkipButton?: boolean;
+  spotlightClicks?: boolean;
+  styles?: Record<string, any>;
+}
+
+export const ReactJoyRide = ({
+  steps,
+  children,
+  tourName,
+}: {
+  steps: JoyrideStep[];
+  children?: ReactNode;
+  tourName: string;
+}) => {
+  const [run, setRun] = useState(false);
+  const [stepIndex, setStepIndex] = useState(0);
+
+  const handleJoyRideCallback = (data: CallBackProps) => {
+    const { action, status, index } = data;
+
+    if (action === 'next' || action === 'prev') {
+      setStepIndex(index + (action === 'next' ? 1 : 0));
+    }
+
+    if (action === 'reset') {
+      setRun(false);
+      setStepIndex(0);
+    }
+  };
+
+  const customSteps = steps.map((step, index) => {
+    const customStep = {
+      ...step,
+      title: '', // Remove the automatic title
+      content: (
+        <Box
+          sx={{
+            fontFamily: 'Roboto, sans-serif',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Typography
+            variant="caption"
+            sx={{
+              color: '#6b7280',
+              fontWeight: 500,
+              textTransform: 'uppercase',
+              letterSpacing: '0.5px',
+              fontSize: '11px',
+            }}
+          >
+            Step {index + 1}
+          </Typography>
+          <Box sx={{ padding: '4px 0' }}>
+            <Typography
+              sx={{
+                lineHeight: 1.5,
+                color: '#4b5563',
+                fontFamily: 'Poppins, sans-serif',
+                fontSize: '16px',
+                fontWeight: '600',
+                marginTop: '12px',
+              }}
+            >
+              {step.title}
+            </Typography>
+          </Box>
+          <Box sx={{ padding: '4px 0' }}>
+            <Typography
+              sx={{
+                fontSize: '14px',
+                lineHeight: 1.5,
+                color: '#4b5563',
+                fontFamily: 'Heebo, sans-serif',
+                fontWeight: '500',
+              }}
+            >
+              {step.content}
+            </Typography>
+          </Box>
+        </Box>
+      ),
+    };
+    return customStep;
+  });
+
+  return (
+    <>
+      <Box>
+        {/* @ts-ignore */}
+        <Joyride
+          callback={handleJoyRideCallback}
+          run={run}
+          steps={customSteps as any[]}
+          styles={
+            {
+              options: {
+                primaryColor: '#121212',
+                textColor: '#1f2937',
+                backgroundColor: '#ffffff',
+                overlayColor: 'rgba(0, 0, 0, 0.4)',
+                arrowColor: '#ffffff',
+                zIndex: 1000,
+              },
+              tooltip: {
+                borderRadius: '12px',
+                boxShadow:
+                  '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+                fontSize: '14px',
+                padding: '20px',
+                minWidth: '320px',
+                maxWidth: '400px',
+              },
+              tooltipContainer: {
+                textAlign: 'left' as const,
+              },
+              tooltipTitle: {
+                fontSize: '16px',
+                fontWeight: '600',
+                color: '#1f2937',
+                fontFamily: 'Poppins, sans-serif',
+              },
+              tooltipContent: {
+                fontSize: '14px',
+                lineHeight: '1.5',
+                color: '#4b5563',
+                padding: '0',
+                fontFamily: 'Heebo, sans-serif !important',
+                fontWeight: '400',
+              },
+              buttonNext: {
+                backgroundColor: '#121212',
+                color: 'white',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontWeight: '500',
+                height: '40px',
+                minWidth: '80px',
+                padding: '0 16px',
+                border: 'none',
+                cursor: 'pointer' as const,
+                transition: 'all 0.2s ease',
+                fontFamily: 'Roboto, sans-serif',
+              },
+              buttonBack: {
+                backgroundColor: 'transparent',
+                color: '#121212',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontWeight: '500',
+                height: '40px',
+                minWidth: '80px',
+                padding: '0 16px',
+                border: '1.5px solid #e5e7eb',
+                cursor: 'pointer' as const,
+                transition: 'all 0.2s ease',
+                marginRight: '8px',
+                fontFamily: 'Roboto, sans-serif',
+              },
+              buttonSkip: {
+                backgroundColor: 'transparent',
+                color: '#6b7280',
+                fontSize: '13px',
+                fontWeight: '500',
+                border: 'none',
+                cursor: 'pointer' as const,
+                position: 'absolute' as const,
+                top: '16px',
+                right: '16px',
+                padding: '4px 8px',
+                borderRadius: '6px',
+                transition: 'all 0.2s ease',
+                fontFamily: 'Roboto, sans-serif',
+              },
+              buttonClose: {
+                display: 'none' as const,
+              },
+              beacon: {
+                backgroundColor: '#3b82f6',
+                borderRadius: '50%',
+                border: '3px solid #3b82f6',
+                boxShadow: '0 0 0 6px rgba(59, 130, 246, 0.2)',
+              },
+              beaconInner: {
+                backgroundColor: '#3b82f6',
+                borderRadius: '50%',
+              },
+            } as any
+          }
+          continuous
+          showSkipButton
+          showProgress
+          scrollToFirstStep
+          disableOverlay={false}
+          disableOverlayClose
+          disableScrolling={false}
+          hideCloseButton
+          locale={{
+            last: 'Finish',
+            next: 'Next',
+            skip: 'Skip',
+            back: 'Previous',
+          }}
+        />
+
+        {children}
+
+        <Button
+          onClick={() => setRun(true)}
+          variant="contained"
+          sx={{
+            position: 'fixed',
+            top: '50%',
+            right: '0px',
+            transform: 'translateY(-50%)',
+            zIndex: 1000,
+            borderRadius: '8px 0 0 8px',
+            backgroundColor: '#E0E0E7',
+            color: '#4b5261ff',
+            fontSize: '14px',
+            fontWeight: 500,
+            padding: '60px 4px',
+            minWidth: 'auto',
+            textTransform: 'none',
+            border: '1px solid #D0D0E3',
+            borderRight: 'none',
+            fontFamily: 'Roboto, sans-serif',
+            letterSpacing: '0.025em',
+            writingMode: 'vertical-rl',
+            textOrientation: 'mixed',
+            whiteSpace: 'nowrap',
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 2)',
+            '&:hover': {
+              backgroundColor: '#1E027F',
+              color: 'white',
+              boxShadow:
+                '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+              transform: 'translateY(-50%) translateX(-4px)',
+            },
+            '&:active': {
+              transform: 'translateY(-50%) translateX(0px)',
+            },
+          }}
+        >
+          Take a Tour
+        </Button>
+      </Box>
+    </>
+  );
+};

package/src/components/DataDisplay/export.ts

@@ -7,6 +7,7 @@ export * from './Chips/Chips';
 export * from './DataTable/DataTable';
 export * from './EditableDataTable/EditableDataTable';
 export * from './EmptyIllustration/EmptyIllustration';
+export * from './ReactJoyride/ReactJoyride';
 export * from './SidePanel/SidePanel';
 export * from './StatusCard/StatusCard';
 export * from './Timeline/Timeline';

package/src/components/Layout/AppLayout/AppLayout.tsx

@@ -76,4 +76,7 @@ const MainContent = styled(Box)(({ theme }: { theme?: any }) => ({
   '&::-webkit-scrollbar': {
     display: 'none', // Safari and Chrome
   },
+  [theme.breakpoints.down('md')]: {
+    padding: '0 8px',
+  },
 }));