@tap-payments/os-micro-frontend-shared 0.1.367-test.1 → 0.1.367-test.1-test.2-test.3

package/build/components/TableHeader/TableView/hooks.d.ts

@@ -0,0 +1,25 @@
+import type { ColumnViewProps } from '../../../types/index.js';
+export { useSubMenu } from './hooks/useSubMenu';
+export { useViewColumns } from './hooks/useViewColumns';
+export { useColumnItem } from './hooks/useColumnItem';
+export declare const useSubmenuHover: () => {
+    hoveredColumn: string | null;
+    anchorEl: HTMLElement | null;
+    openSubmenu: (columnName: string, element: HTMLElement) => void;
+    closeSubmenu: () => void;
+    cancelClose: () => void;
+    forceClose: () => void;
+};
+export declare const useDialogPosition: (width: number, height: number, dialogWidth: number, dialogHeight: number) => {
+    position: {
+        x: number;
+        y: number;
+    };
+    resetPosition: () => void;
+    updatePosition: (x: number, y: number) => void;
+};
+export declare const useOriginalColumns: (defaultColumns: ColumnViewProps[]) => {
+    originalColumns: ColumnViewProps[];
+    saveOriginalState: () => void;
+    clearOriginalState: () => void;
+};

package/build/components/TableHeader/TableView/hooks.js

@@ -0,0 +1,79 @@
+import { useState, useRef, useCallback } from 'react';
+import { SUBMENU_CLOSE_DELAY } from './constants';
+export { useSubMenu } from './hooks/useSubMenu';
+export { useViewColumns } from './hooks/useViewColumns';
+export { useColumnItem } from './hooks/useColumnItem';
+export const useSubmenuHover = () => {
+    const [hoveredColumn, setHoveredColumn] = useState(null);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const closeTimeoutRef = useRef(null);
+    const openSubmenu = useCallback((columnName, element) => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+        setHoveredColumn(columnName);
+        setAnchorEl(element);
+    }, []);
+    const closeSubmenu = useCallback(() => {
+        closeTimeoutRef.current = setTimeout(() => {
+            setHoveredColumn(null);
+            setAnchorEl(null);
+        }, SUBMENU_CLOSE_DELAY);
+    }, []);
+    const cancelClose = useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    const forceClose = useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+        setHoveredColumn(null);
+        setAnchorEl(null);
+    }, []);
+    return {
+        hoveredColumn,
+        anchorEl,
+        openSubmenu,
+        closeSubmenu,
+        cancelClose,
+        forceClose,
+    };
+};
+export const useDialogPosition = (width, height, dialogWidth, dialogHeight) => {
+    const [position, setPosition] = useState({
+        x: width / 2 - dialogWidth / 2,
+        y: height / 2 - dialogHeight / 2,
+    });
+    const resetPosition = useCallback(() => {
+        setPosition({
+            x: width / 2 - dialogWidth / 2,
+            y: height / 2 - dialogHeight / 2,
+        });
+    }, [width, height, dialogWidth, dialogHeight]);
+    const updatePosition = useCallback((x, y) => {
+        setPosition({ x, y });
+    }, []);
+    return { position, resetPosition, updatePosition };
+};
+export const useOriginalColumns = (defaultColumns) => {
+    const [originalColumns, setOriginalColumns] = useState([]);
+    const saveOriginalState = useCallback(() => {
+        setOriginalColumns(defaultColumns.map((col) => {
+            var _a;
+            return (Object.assign(Object.assign({}, col), { selected: col.selected, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: item.selected }))) }));
+        }));
+    }, [defaultColumns]);
+    const clearOriginalState = useCallback(() => {
+        setOriginalColumns([]);
+    }, []);
+    return {
+        originalColumns,
+        saveOriginalState,
+        clearOriginalState,
+    };
+};

package/build/components/TableHeader/TableView/index.d.ts

@@ -1,3 +1,12 @@
-import TableView from './TableView';
-export * from './TableView';
-export default TableView;
+export { default } from './TableView';
+export { default as TableView } from './TableView';
+export { default as DefaultViews } from './DefaultViews';
+export { default as CustomViews } from './CustomViews';
+export { default as ViewsManager } from './ViewsManager';
+export { default as ViewsDropdown } from './ViewsDropdown';
+export { default as CreateViewDialog } from './CreateViewDialog';
+export type { ViewMenuItem, ViewMode, CreateCustomViewDialogProps, LayoutSection, ColumnItem, FieldItem } from './types';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, isDateColumn, getColumnCheckState } from './utils';
+export { useSubmenuHover, useDialogPosition } from './hooks';
+export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
+export { defaultViewList, advancedColumns, sheetColumns } from './data';

package/build/components/TableHeader/TableView/index.js

@@ -1,3 +1,11 @@
-import TableView from './TableView';
-export * from './TableView';
-export default TableView;
+export { default } from './TableView';
+export { default as TableView } from './TableView';
+export { default as DefaultViews } from './DefaultViews';
+export { default as CustomViews } from './CustomViews';
+export { default as ViewsManager } from './ViewsManager';
+export { default as ViewsDropdown } from './ViewsDropdown';
+export { default as CreateViewDialog } from './CreateViewDialog';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, isDateColumn, getColumnCheckState } from './utils';
+export { useSubmenuHover, useDialogPosition } from './hooks';
+export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
+export { defaultViewList, advancedColumns, sheetColumns } from './data';

package/build/components/TableHeader/TableView/styles.d.ts

@@ -0,0 +1,114 @@
+/// <reference types="react" />
+import type { SxProps, Theme } from '@mui/material/styles';
+export declare const ButtonStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ViewWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ListStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DropdownStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const MenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    addColumnViewEl?: boolean | undefined;
+}, {}, {}>;
+export declare const Space: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SpaceAfter: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DialogContentWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ScrollableContent: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const TitleSection: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ColumnListContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SelectAllHeader: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ColumnItemRow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    isHovered?: boolean | undefined;
+    isDate?: boolean | undefined;
+}, {}, {}>;
+export declare const DragIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const CheckboxWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const FooterBar: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const CreateButtonWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SubmenuPaper: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "classes" | "className" | "style" | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SubmenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DeleteButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const CreateButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const NameTextField: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const checkboxSx: SxProps<Theme>;
+export declare const getDialogPaperStyle: (width: number, height: number) => {
+    margin: number;
+    maxHeight: string;
+    maxWidth: string;
+    width: number;
+    height: number;
+    borderRadius: number;
+    overflow: string;
+    boxShadow: string;
+};
+export declare const dialogSx: {
+    backgroundColor: string;
+    pointerEvents: string;
+    '& .MuiDialog-paper': {
+        pointerEvents: string;
+    };
+};
+export declare const ResetHeaderBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ResetCheckboxSx: SxProps<Theme>;
+export declare const SubmenuContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ColumnItemsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SaveCustomViewBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SaveCustomViewInnerBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    disabled?: boolean | undefined;
+}, {}, {}>;
+export declare const ButtonsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const CancelButtonSx: SxProps<Theme>;
+export declare const OkayButtonSx: SxProps<Theme>;

package/build/components/TableHeader/TableView/styles.js

@@ -0,0 +1,399 @@
+import { Box, styled, Button, Paper, TextField } from '@mui/material';
+export const ButtonStyled = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: '4px',
+    background: theme.palette.common.white,
+    padding: '8px',
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    gap: 8,
+    height: 32,
+    cursor: 'pointer',
+    '&:hover': {
+        border: '1px solid',
+        borderColor: theme.palette.info.dark,
+        boxShadow: theme.shadows[7],
+    },
+}));
+export const ViewWrapper = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    display: 'flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    fontWeight: theme.typography.fontWeightRegular,
+    textTransform: 'capitalize',
+    position: 'relative',
+    transition: '0.5s',
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        left: -8,
+        right: 0,
+        width: '100%',
+        height: '100%',
+        boxShadow: theme.shadows[11],
+        borderRadius: theme.spacing(0.5),
+        paddingInlineStart: theme.spacing(1),
+        paddingTop: '9px',
+        paddingBottom: '9px',
+        paddingInlineEnd: '9px',
+        zIndex: -1,
+    },
+}));
+export const ListStyled = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    borderRadius: theme.spacing(1),
+    boxShadow: theme.shadows[5],
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    zIndex: 5,
+    fontSize: '11px',
+    width: 192,
+}));
+export const DropdownStyled = styled(Box)(() => ({
+    minWidth: 160,
+    position: 'relative',
+}));
+export const MenuItem = styled(Box, { shouldForwardProp: (props) => props !== 'addColumnViewEl' })(({ theme }) => ({
+    padding: theme.spacing(1),
+    paddingInlineEnd: 2,
+    borderBottom: '1px solid',
+    borderColor: theme.palette.divider,
+    display: 'flex',
+    alignItems: 'center',
+    height: 32,
+    cursor: 'pointer',
+    img: {
+        height: 12,
+    },
+    '.check-icon': {
+        height: 'auto',
+        marginInlineEnd: theme.spacing(1),
+    },
+    '&:hover': {
+        color: theme.palette.info.dark,
+        fontWeight: theme.typography.fontWeightBold,
+    },
+    '&.add-column': {
+        justifyContent: 'space-between',
+        paddingInlineEnd: theme.spacing(1),
+        position: 'relative',
+        border: 'none',
+        zIndex: 5,
+        borderBottom: '1px solid',
+        borderColor: theme.palette.divider,
+        borderTopRightRadius: theme.spacing(1),
+        borderTopLeftRadius: theme.spacing(1),
+        '&:hover': {
+            boxShadow: theme.shadows[6],
+        },
+    },
+}));
+export const Space = styled(Box)(({ theme }) => ({
+    width: 12,
+    marginInlineEnd: theme.spacing(1),
+}));
+export const SpaceAfter = styled(Box)(() => ({
+    width: 16,
+}));
+export const DialogContentWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: 'calc(100% - 32px)',
+    backgroundColor: theme.palette.background.paper,
+    position: 'relative',
+}));
+export const ScrollableContent = styled(Box)(() => ({
+    flex: 1,
+    overflowY: 'auto',
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 64,
+}));
+export const TitleSection = styled(Box)(() => ({
+    padding: '24px 0',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+}));
+export const ColumnListContainer = styled(Box)(({ theme }) => ({
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    borderRadius: '8px',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    minHeight: 0,
+}));
+export const SelectAllHeader = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '12px',
+    borderBottom: '1px solid',
+    borderColor: theme.palette.divider,
+    backgroundColor: '#FAFAFA',
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: '#F0F0F0',
+    },
+}));
+export const ColumnItemRow = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'isHovered' && prop !== 'isDate',
+})(({ theme, isHovered, isDate }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '12px',
+    borderBottom: '1px solid',
+    borderColor: theme.palette.divider,
+    backgroundColor: isHovered ? theme.palette.action.hover : theme.palette.background.paper,
+    cursor: isDate ? 'default' : 'grab',
+    '&:hover': {
+        backgroundColor: isDate ? theme.palette.background.paper : theme.palette.action.hover,
+    },
+    '&:last-child': {
+        borderBottom: 'none',
+    },
+}));
+export const DragIconWrapper = styled(Box)(() => ({
+    width: 20,
+    height: 20,
+    marginRight: 8,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+}));
+export const CheckboxWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+    width: 18,
+    height: 18,
+    minWidth: 18,
+    minHeight: 18,
+    flexShrink: 0,
+}));
+export const FooterBar = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 35,
+    backgroundColor: '#F8F9FB',
+    borderTop: '1px solid',
+    borderColor: theme.palette.divider,
+}));
+export const CreateButtonWrapper = styled(Box)(() => ({
+    position: 'absolute',
+    bottom: 12,
+    right: 16,
+    padding: 6,
+    backgroundColor: 'white',
+}));
+export const SubmenuPaper = styled(Paper)(() => ({
+    paddingTop: 4,
+    paddingBottom: 4,
+    minWidth: 180,
+    boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+    borderRadius: '8px',
+}));
+export const SubmenuItem = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px 12px',
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+    },
+}));
+export const DeleteButton = styled(Button)(() => ({
+    color: '#FF0000',
+    textTransform: 'none',
+    fontSize: 10,
+    fontWeight: 500,
+    borderRadius: '4px',
+    border: '1px solid #F4F4F4',
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    paddingBottom: 4,
+    '&:hover': {
+        backgroundColor: 'transparent',
+    },
+}));
+export const CreateButton = styled(Button)(({ theme }) => ({
+    fontSize: 9,
+    fontWeight: 600,
+    borderRadius: 4,
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 8,
+    paddingBottom: 8,
+    textTransform: 'none',
+    backgroundColor: '#1F88D0',
+    '&:hover': {
+        backgroundColor: '#1A7BC0',
+    },
+    '&.Mui-disabled': {
+        backgroundColor: theme.palette.grey[300],
+        color: theme.palette.grey[500],
+    },
+}));
+export const NameTextField = styled(TextField)(({ theme }) => ({
+    '& .MuiFilledInput-root': {
+        borderRadius: '8px',
+        backgroundColor: theme.palette.background.paper,
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        '&:hover': {
+            backgroundColor: theme.palette.background.paper,
+        },
+        '&.Mui-focused': {
+            backgroundColor: theme.palette.background.paper,
+        },
+        '&::before, &::after': {
+            display: 'none',
+        },
+    },
+}));
+export const checkboxSx = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+    width: 18,
+    height: 18,
+    minWidth: 18,
+    minHeight: 18,
+    flexShrink: 0,
+    color: 'grey.A400',
+    '&.Mui-checked': {
+        color: 'info.dark',
+    },
+    '&.MuiCheckbox-indeterminate': {
+        color: 'info.dark',
+    },
+    '&.Mui-disabled.Mui-checked': {
+        color: 'grey.500',
+        '& .MuiSvgIcon-root': {
+            backgroundColor: 'grey.500',
+            borderRadius: '3px',
+            color: '#fff',
+        },
+    },
+    '& .MuiSvgIcon-root': {
+        width: 18,
+        height: 18,
+    },
+    '& img': {
+        width: 14,
+        height: 14,
+    },
+};
+export const getDialogPaperStyle = (width, height) => ({
+    margin: 0,
+    maxHeight: '90vh',
+    maxWidth: 'none',
+    width,
+    height,
+    borderRadius: 12,
+    overflow: 'hidden',
+    boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.15)',
+});
+export const dialogSx = {
+    backgroundColor: 'transparent',
+    pointerEvents: 'none',
+    '& .MuiDialog-paper': {
+        pointerEvents: 'auto',
+    },
+};
+export const ResetHeaderBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+    },
+}));
+export const ResetCheckboxSx = {
+    p: 0,
+    width: 14,
+    height: 14,
+    minWidth: 14,
+    minHeight: 14,
+    '&.Mui-checked': { color: 'info.dark' },
+    '&.MuiCheckbox-indeterminate': { color: 'info.dark' },
+    '& .MuiSvgIcon-root': { width: 14, height: 14 },
+};
+export const SubmenuContainer = styled(Box)(() => ({
+    minWidth: 200,
+}));
+export const ColumnItemsContainer = styled(Box)(() => ({
+    maxHeight: 300,
+    overflowY: 'auto',
+    paddingLeft: 6,
+    paddingRight: 6,
+}));
+export const SaveCustomViewBox = styled(Box)(() => ({
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 8,
+    paddingBottom: 8,
+}));
+export const SaveCustomViewInnerBox = styled(Box)(({ disabled }) => ({
+    width: '100%',
+    borderRadius: '8px',
+    backgroundColor: '#1F88D00D',
+    padding: '8px',
+    marginLeft: 6,
+    marginRight: 6,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.5 : 1,
+}));
+export const ButtonsContainer = styled(Box)(() => ({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 12,
+    paddingRight: 12,
+}));
+export const CancelButtonSx = {
+    fontSize: 11,
+    fontWeight: 400,
+    textTransform: 'none',
+    color: 'text.primary',
+    minWidth: 80,
+    height: 38,
+    borderRadius: '8px',
+    border: '1px solid #F2F2F2',
+};
+export const OkayButtonSx = {
+    fontSize: 11,
+    fontWeight: 500,
+    textTransform: 'none',
+    backgroundColor: '#1F88D0',
+    minWidth: 80,
+    height: 38,
+    borderRadius: '8px',
+    boxShadow: 'none',
+    '&:hover': {
+        backgroundColor: '#1976B8',
+        boxShadow: 'none',
+    },
+};