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

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

@@ -1,96 +0,0 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import { transformTemplatesToViewMenuItems, deepCloneColumns } from '../utils';
-/**
- * Simplified hook for managing templates and views.
- *
- * Key principles:
- * - Templates from parent are parsed into allTemplates
- * - defaultColumns is the local working copy that can be modified
- * - When user modifies default template, we keep changes locally
- */
-export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
-    // Parse templates (this just transforms the data, doesn't manage modifications)
-    const parsedTemplates = useMemo(() => {
-        if (!templates || templates.length === 0) {
-            return {
-                customViews: [],
-                defaultTemplate: undefined,
-                templateDefaultColumns: [],
-                allTemplates: [],
-            };
-        }
-        const { customViews, defaultTemplate } = transformTemplatesToViewMenuItems(templates, tableMode, lang);
-        // Combine all templates for easy access
-        const allTemplates = defaultTemplate ? [defaultTemplate, ...customViews] : customViews;
-        return {
-            customViews,
-            defaultTemplate,
-            templateDefaultColumns: (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.submenu) || [],
-            allTemplates,
-        };
-    }, [templates, tableMode, lang]);
-    // Local state for default columns - this is the working copy that can be modified
-    const [defaultColumns, setDefaultColumns] = useState([]);
-    // Track if we've initialized for this mode (to avoid resetting user modifications)
-    const [initializedMode, setInitializedMode] = useState(null);
-    // Initialize defaultColumns when templates load or mode changes
-    useEffect(() => {
-        // Only initialize if mode changed or we haven't initialized yet
-        if (initializedMode !== tableMode && parsedTemplates.templateDefaultColumns.length > 0) {
-            setDefaultColumns(deepCloneColumns(parsedTemplates.templateDefaultColumns));
-            setInitializedMode(tableMode);
-        }
-    }, [tableMode, parsedTemplates.templateDefaultColumns, initializedMode]);
-    // Custom views state
-    const [internalCustomViews, setInternalCustomViews] = useState([]);
-    useEffect(() => {
-        setInternalCustomViews([...parsedTemplates.customViews]);
-    }, [parsedTemplates.customViews]);
-    // Function to update default columns (called when user modifies and clicks Okay)
-    const updateDefaultColumns = useCallback((columns) => {
-        setDefaultColumns(deepCloneColumns(columns));
-    }, []);
-    // Create an updated default template with current defaultColumns
-    // IMPORTANT: When mode just changed (initializedMode !== tableMode), use parsedTemplates
-    // directly because defaultColumns state hasn't updated yet
-    const updatedDefaultTemplate = useMemo(() => {
-        if (!parsedTemplates.defaultTemplate) {
-            return parsedTemplates.defaultTemplate;
-        }
-        // If mode just changed, use the fresh parsed columns, not the stale state
-        const columnsToUse = initializedMode !== tableMode ? parsedTemplates.templateDefaultColumns : defaultColumns;
-        if (columnsToUse.length === 0) {
-            return parsedTemplates.defaultTemplate;
-        }
-        return Object.assign(Object.assign({}, parsedTemplates.defaultTemplate), { submenu: columnsToUse, columns: columnsToUse.map((col) => col.name) });
-    }, [parsedTemplates.defaultTemplate, parsedTemplates.templateDefaultColumns, defaultColumns, initializedMode, tableMode]);
-    // Build allTemplates with the updated default template
-    const updatedAllTemplates = useMemo(() => {
-        if (!updatedDefaultTemplate) {
-            return parsedTemplates.customViews;
-        }
-        return [updatedDefaultTemplate, ...parsedTemplates.customViews];
-    }, [updatedDefaultTemplate, parsedTemplates.customViews]);
-    // For mode changes, provide the correct columns
-    // Key: ALWAYS prefer state columns if they exist (preserves user modifications)
-    const effectiveDefaultColumns = useMemo(() => {
-        // If mode just changed AND we have no initialized state, use parsed columns
-        if (initializedMode !== tableMode && defaultColumns.length === 0) {
-            return parsedTemplates.templateDefaultColumns;
-        }
-        // Otherwise use state columns (which may include user edits)
-        return defaultColumns.length > 0 ? defaultColumns : parsedTemplates.templateDefaultColumns;
-    }, [initializedMode, tableMode, defaultColumns, parsedTemplates.templateDefaultColumns]);
-    return {
-        // Template data (with updated default template including modifications)
-        defaultTemplate: updatedDefaultTemplate,
-        customViews: parsedTemplates.customViews,
-        allTemplates: updatedAllTemplates,
-        // Default columns - preserves user edits
-        defaultColumns: effectiveDefaultColumns,
-        updateDefaultColumns,
-        // Internal state
-        internalCustomViews,
-        setInternalCustomViews,
-    };
-};

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

@@ -1,127 +0,0 @@
-/// <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;
-    zIndex: number;
-    '& .MuiDialog-container': {
-        transition: string;
-        zIndex: number;
-    };
-    '& .MuiDialog-paper': {
-        transition: string;
-        pointerEvents: string;
-        zIndex: number;
-    };
-};
-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>;
-export declare const ModifiedTextSx: {
-    readonly color: "#20232B80";
-    readonly fontSize: "9px";
-    readonly fontWeight: 500;
-    readonly marginLeft: "4px";
-};

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

@@ -1,426 +0,0 @@
-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',
-    paddingRight: 0,
-    marginRight: 0,
-    '&: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,
-    },
-    '& > *:last-child': {
-        marginRight: 0,
-        paddingRight: 0,
-    },
-}));
-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',
-    marginRight: 0,
-    paddingRight: 0,
-}));
-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: 14,
-    height: 14,
-    minWidth: 14,
-    minHeight: 14,
-    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',
-}));
-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: 14,
-    height: 14,
-    minWidth: 14,
-    minHeight: 14,
-    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: 14,
-        height: 14,
-    },
-    '& img': {
-        width: 14,
-        height: 14,
-    },
-};
-export const getDialogPaperStyle = (width, height) => ({
-    margin: 0,
-    maxHeight: '100%',
-    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',
-    zIndex: 1300,
-    '& .MuiDialog-container': {
-        transition: 'none !important',
-        zIndex: 1300,
-    },
-    '& .MuiDialog-paper': {
-        transition: 'none !important',
-        pointerEvents: 'auto',
-        zIndex: 1300,
-    },
-};
-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,
-    display: 'flex',
-    flexDirection: 'column',
-    maxHeight: '80vh',
-    overflow: 'hidden',
-}));
-export const ColumnItemsContainer = styled(Box)(() => ({
-    flex: 1,
-    overflowY: 'auto',
-    paddingLeft: 6,
-    paddingRight: 6,
-    minHeight: 0,
-}));
-export const SaveCustomViewBox = styled(Box)(() => ({
-    paddingLeft: 8,
-    paddingRight: 8,
-    paddingTop: 8,
-    paddingBottom: 8,
-    flexShrink: 0,
-}));
-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)(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'flex-end',
-    gap: 12,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 12,
-    paddingRight: 12,
-    flexShrink: 0,
-    borderTop: '1px solid',
-    borderColor: theme.palette.divider,
-}));
-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',
-    },
-};
-export const ModifiedTextSx = {
-    color: '#20232B80',
-    fontSize: '9px',
-    fontWeight: 500,
-    marginLeft: '4px',
-};