@m4l/components 7.2.0 → 7.2.2

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Density/index.tsx

@@ -1,87 +0,0 @@
-// react
-import { useMemo } from 'react';
-// m4l
-import { useEnvironment, useModuleDictionary } from '@m4l/core';
-
-// mui
-import { useTheme } from '@mui/material';
-// internl components
-import { MenuActions } from '../../../../../mui_extended/MenuActions';
-
-// componentes estilados
-// types
-import type { MenuAction } from '../../../../../mui_extended/MenuActions/types';
-// hooks
-import { useDataGrid } from '../../../../hooks/useDataGrid';
-
-// consts
-
-/**
- * TODO: Documentar
- */
-export function Density() {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { rowHeights, currentRowHeightVariant, setRowHeightVariant, classes } = useDataGrid();
-  const { getLabel } = useModuleDictionary();
-  const menuActions: MenuAction[] = useMemo(() => {
-    if (typeof rowHeights === 'number') {
-      return [];
-    }
-
-    return [
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
-        onClick: () => setRowHeightVariant('compact'),
-        disabled: currentRowHeightVariant === 'compact',
-        dictionaryField: 'data_grid.density_compact',
-      },
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
-        onClick: () => setRowHeightVariant('standard'),
-        disabled: currentRowHeightVariant === 'standard',
-        dictionaryField: 'data_grid.density_standard',
-      },
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
-        onClick: () => setRowHeightVariant('confortable'),
-        disabled: currentRowHeightVariant === 'confortable',
-        dictionaryField: 'data_grid.density_confortable',
-      },
-    ];
-  }, [
-    rowHeights,
-    currentRowHeightVariant,
-    setRowHeightVariant,
-    host_static_assets,
-    environment_assets,
-  ]);
-  const theme = useTheme();
-
-  const currenViewIcon: string = useMemo(() => {
-    if (currentRowHeightVariant === 'compact') {
-      return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`;
-    }
-    if (currentRowHeightVariant === 'standard') {
-      return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`;
-    }
-    return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`;
-  }, [currentRowHeightVariant, host_static_assets, environment_assets]);
-
-  if (menuActions.length === 0) {
-
-    return <></>;
-  }
-
-  return (
-    <MenuActions
-      arrowType="right-top"
-      className={classes.actionDensityPopover}
-      menuActionSx={theme.components?.M4LDataGridDensityPopover?.styleOverrides}
-      anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
-      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-      menuActions={menuActions}
-      urlIcon={currenViewIcon}
-      toolTip={getLabel('data_grid.tooltip_density')}
-    />
-  );
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Density/types.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface DensityProps {}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Filter/index.tsx

@@ -1,40 +0,0 @@
-// react
-// material
-
-// componentes estilados
-
-// types
-
-// hooks
-import { useFilters } from '../../../../hooks/useFilters';
-
-import { IconButton } from '../../../../../mui_extended/IconButton/IconButton';
-
-import { useEnvironment } from '@m4l/core';
-/* import useDataGrid from 'src/components/DataGrid/hooks/useDataGrid'; */
-import useDataGrid from '../../../../hooks/useDataGrid';
-
-/**
- * TODO: Documentar
- */
-export function Filter() {
-  const { activeFilters, setActiveFilters } = useFilters();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes } = useDataGrid();
-
-  const toggleIcon = () => {
-    setActiveFilters(!activeFilters);
-  };
-
-  return (
-    <IconButton
-      dictionaryTooltipId={
-        activeFilters ? 'data_grid.tooltip_filter_hide' : 'data_grid.tooltip_filter_show'
-      }
-      className={classes.actionFilter}
-      onClick={toggleIcon}
-      aria-label="filter"
-      src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`}
-    />
-  );
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Filter/types.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface FilterProps {}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/MobileMenuActions/index.tsx

@@ -1,64 +0,0 @@
-import { useEnvironment } from '@m4l/core';
-import useDataGrid from '../../../../hooks/useDataGrid';
-import { useFilters } from '../../../../hooks/useFilters';
-import { MenuActions } from '../../../../../mui_extended/MenuActions';
-import type { MenuAction } from '../../../../../mui_extended/MenuActions/types';
-import useModalSettings from '../hooks/useModalSettings';
-
-/**
- * TODO: Documentar
- */
-export const MobileMenuActions = () => {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
-  const { activeFilters, setActiveFilters } = useFilters();
-  const modalSettings = useModalSettings();
-
-  const toggleIcon = () => {
-    setActiveFilters(!activeFilters);
-  };
-  const menuActions: MenuAction[] = [
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
-      onClick: () => setRowHeightVariant('compact'),
-      disabled: currentRowHeightVariant === 'compact',
-      dictionaryId: 'data_grid.density_compact',
-    },
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
-      onClick: () => setRowHeightVariant('standard'),
-      disabled: currentRowHeightVariant === 'standard',
-      dictionaryId: 'data_grid.density_standard',
-    },
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
-      onClick: () => setRowHeightVariant('confortable'),
-      disabled: currentRowHeightVariant === 'confortable',
-      dictionaryId: 'data_grid.density_confortable',
-    },
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`,
-      onClick: () => toggleIcon(),
-      dictionaryId: activeFilters
-        ? 'data_grid.tooltip_filter_hide'
-        : 'data_grid.tooltip_filter_show',
-    },
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`,
-      onClick: () => modalSettings(),
-      dictionaryId: 'data_grid.tooltip_settings',
-    },
-  ];
-
-  return (
-    <MenuActions
-      urlIcon={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/menu.svg`}
-      arrowType="no-arrow"
-      marginTop={'12px'}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-      menuActions={menuActions}
-      /* externalClose={() => setFocus(false)} */
-    />
-  );
-};

package/src/components/DataGrid/subcomponents/Actions/subcomponents/RowsCount/index.tsx

@@ -1,38 +0,0 @@
-// m4l
-import { useModuleDictionary, useModuleSkeleton } from '@m4l/core';
-// componentes estilados
-import { Skeleton } from '@mui/material';
-// hooks
-import { useDataGrid } from '../../../../hooks/useDataGrid';
-// types
-
-// utils
-
-/**
- * TODO: Documentar
- */
-export function RowsCount() {
-  const { rowsCount, classes } = useDataGrid();
-  const { getLabel } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-
-  return (
-    <div className={classes.rowsCount}>
-      {!isSkeleton ? (
-        <>
-          <div className={classes.rowsCountLabel}>{getLabel('data_grid.rows')}</div>
-          <div className={classes.rowsCountValue}>{rowsCount}</div>
-        </>
-      ) : (
-        <>
-          <div className={classes.rowsCountLabel}>
-            <Skeleton variant="text" width="40px" height="16px" />
-          </div>
-          <div className={classes.rowsCountValue}>
-            <Skeleton variant="text" width="20px" height="16px" />
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/RowsCount/types.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface TotalRecordProps {}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/index.tsx

@@ -1,39 +0,0 @@
-// react
-// mui
-
-// styled components
-
-// internal components
-import { IconButton } from '../../../../../mui_extended/IconButton/IconButton';
-// sub components
-// types
-
-// hooks
-import { useDataGrid } from '../../../../hooks/useDataGrid';
-
-// utils
-
-// constants
-
-import { useEnvironment } from '@m4l/core';
-import useModalSettings from '../hooks/useModalSettings';
-
-/**
- * TODO: Documentar
- */
-export function Settings() {
-  const { host_static_assets, environment_assets } = useEnvironment();
-
-  const { classes } = useDataGrid();
-  const modalSettings = useModalSettings();
-
-  return (
-    <IconButton
-      className={classes.actionSettings}
-      dictionaryTooltipId="data_grid.tooltip_settings"
-      onClick={modalSettings}
-      aria-label="settings"
-      src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`}
-    />
-  );
-}

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/index.tsx

@@ -1,356 +0,0 @@
-// react
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-// m4l
-import { useEnvironment, useModuleDictionary } from '@m4l/core';
-
-// librerías externas
-import DataGrid, { Column, DataGridHandle } from 'react-data-grid';
-
-// mui
-import { IconButton } from '../../../../../../../mui_extended/IconButton/IconButton';
-// internal components
-
-// styled components
-import { WrapperColumnsConfig, WrapperDataGrid, DivSelColumns, ColumnActions } from './styles';
-
-// hooks
-
-// types
-import type { RowKey } from '../../../../../../types';
-import type { IConfigColumn } from '../../../../../../contexts/DataGridContext/types';
-import type { ColumnsConfigRef, ConfigProps, Row } from './types';
-import { ColumnInteractiveCheckFormatter } from '../../../../../../formatters';
-
-/* import useDataGrid from 'src/components/DataGrid/hooks/useDataGrid'; */
-
-/**
- * TODO: Documentar
- */
-function getRowsFromColumnsConfig(columnsConfig: IConfigColumn[]): Row[] {
-  // Filtrar los hidden y
-
-  return columnsConfig
-    .filter(column => !column.hidden)
-    .map(
-      column =>
-        ({
-          key: column.key,
-          name: column.name,
-          visible: column.visible === undefined ? true : column.visible,
-          frozen: column.frozen === undefined ? false : column.frozen,
-          originalIndex: column.orginalIndex,
-          originalFrozen: column.originalFrozen,
-          originalVisible: column.originalVisible,
-        } as Row),
-    );
-}
-
-export const ColumnsConfig = forwardRef<ColumnsConfigRef, ConfigProps>((props, ref) => {
-  const refdata_grid = useRef<DataGridHandle>(null);
-  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, classes } = props;
-  const { getLabel } = useModuleDictionary();
-
-  const [isInit, setIsInit] = useState(true);
-
-  const [rows, setRows] = useState<Row[]>(getRowsFromColumnsConfig(columnsConfig));
-  const [selRows, setSelRows] = useState<ReadonlySet<RowKey>>(() => new Set());
-  const divRef = useRef<HTMLDivElement>(null);
-  const { host_static_assets, environment_assets } = useEnvironment();
-
-  useImperativeHandle(ref, () => ({
-    onClickIntro: handleIntro,
-    current: divRef.current,
-  }));
-
-  const columnsdata_grid: Column<Row>[] = useMemo(
-    () => [
-      {
-        key: 'name',
-        name: getLabel('data_grid.settings_column_name'),
-        width: 200,
-        resizable: true,
-        type: 'string',
-      },
-      {
-        key: 'originalIndex',
-        name: getLabel('data_grid.settings_column_position'),
-        width: 50,
-        type: 'number',
-        cellClass: 'rdg-cell-align-center',
-      },
-      {
-        key: 'visible',
-        name: getLabel('data_grid.settings_column_visible'),
-        width: 80,
-        type: 'boolean',
-        formatter: ColumnInteractiveCheckFormatter,
-        cellClass: 'rdg-cell-align-center',
-      },
-      {
-        key: 'frozen',
-        name: getLabel('data_grid.settings_column_frozen'),
-        width: 80,
-        type: 'boolean',
-        formatter: ColumnInteractiveCheckFormatter,
-        cellClass: 'rdg-cell-align-center',
-      },
-    ],
-    [getLabel],
-  );
-
-  const checkAll = () => {
-    setRows(rows.map(row => ({ ...row, visible: true })));
-  };
-
-  const unCheckAll = () => {
-    setRows(rows.map(row => ({ ...row, visible: false })));
-  };
-
-  /**
-   * TODO: Documentar
-   */
-  const restoreAll = () => {
-    setRows(
-      rows
-        .map(row => ({
-          ...row,
-          visible: row.originalVisible,
-          frozen: row.originalFrozen,
-          index: row.originalIndex,
-        }))
-        .sort((a, b) => a.index - b.index),
-    );
-  };
-
-  useEffect(() => {
-    if (isInit === false) {
-      setRows(getRowsFromColumnsConfig(columnsConfig));
-    }
-    setIsInit(false);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columnsConfig]);
-
-  const rowSelectedIndex: number = useMemo(() => {
-    let rowIndex = -1;
-    if (selRows.size !== 1) {return rowIndex;}
-
-    const iterator = selRows.entries();
-    const entry = iterator.next().value?.[1];
-
-    rowIndex = rows.findIndex(row => row.key === entry);
-    return rowIndex;
-  }, [rows, selRows]);
-
-  /**
-   * TODO: Documentar
-   */
-  const handleMoveFirst = () => {
-    if (rowSelectedIndex === -1) {return -1;}
-
-    const newRows: Row[] = [...rows];
-
-    newRows.splice(rowSelectedIndex, 1);
-    newRows.splice(0, 0, rows[rowSelectedIndex]);
-
-    refdata_grid.current?.selectCell({ idx: 0, rowIdx: 0 });
-    setRows(newRows);
-  };
-
-  /**
-   * TODO: Documentar
-   */
-  const handleMoveLast = () => {
-    if (rowSelectedIndex === -1) {return -1;}
-
-    const newRows: Row[] = [...rows];
-
-    newRows.splice(rowSelectedIndex, 1);
-    newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
-
-    refdata_grid.current?.selectCell({ idx: 0, rowIdx: newRows.length - 1 });
-
-    setRows(newRows);
-  };
-
-  /**
-   * TODO: Documentar
-   */
-  const handleMoveUpDownd = (position: number) => {
-    if (rowSelectedIndex === -1) {return -1;}
-
-    const newRows: Row[] = [...rows];
-    const element = newRows[rowSelectedIndex];
-
-    newRows.splice(rowSelectedIndex, 1);
-    newRows.splice(rowSelectedIndex + position, 0, element);
-
-    refdata_grid.current?.selectCell({ idx: 0, rowIdx: rowSelectedIndex + position });
-
-    setRows(newRows);
-  };
-
-  /**
-   * TODO: Documentar
-   */
-  const getColumnConfigByKey = (
-    key: string,
-  ): Pick<IConfigColumn, 'visible' | 'frozen'> | undefined => {
-    const rowIndexFinded = rows.findIndex(row => row.key === key);
-
-    if (rowIndexFinded > -1) {
-      return {
-        visible: rows[rowIndexFinded].visible,
-        frozen: rows[rowIndexFinded].frozen,
-        // index: rowIndexFinded,
-      };
-    }
-
-    return undefined;
-  };
-
-  /**
-   * TODO: Documentar
-   */
-  const getRowIndex = (column: IConfigColumn): number => {
-    const rowIndexFinded = rows.findIndex(row => row.key === column.key);
-
-    if (rowIndexFinded > -1) {
-      return rowIndexFinded;
-    }
-
-    return columnsConfig.findIndex(columnConfig => columnConfig.key === column.key);
-  };
-
-  /**
-   * TODO: Documentar
-   */
-  const handleIntro = () => {
-    const newColumnsConfig = columnsConfig
-      .map(columnConfig => {
-        const newColumnConfig = { ...columnConfig };
-
-        if (!columnConfig.hidden) {
-          const columnConfigRow = getColumnConfigByKey(columnConfig.key);
-
-          if (columnConfigRow) {
-            newColumnConfig.visible = columnConfigRow.visible;
-            // newColumnConfig.index = columnConfigRow.index;
-            newColumnConfig.frozen = columnConfigRow.frozen;
-          }
-        }
-
-        return newColumnConfig;
-      })
-      .sort((a, b) => getRowIndex(a) - getRowIndex(b));
-
-    onChangeColumnsConfig(newColumnsConfig);
-
-    onCloseSettings(); // Cerrar la ventana
-  };
-
-  const onInternalSelectedRowsChange = () => {};
-
-  const onInternalRowsChange = (newRows: Row[]) => {
-    setRows(newRows);
-  };
-
-  /**
-   * TODO: Documentar
-   */
-  const onRowClick = (row: Row) => {
-    if (selRows.has(row.key)) {return;}
-
-    const mySet: ReadonlySet<RowKey> = new Set([row.key]);
-    setSelRows(mySet);
-  };
-
-  return (
-    <WrapperColumnsConfig ref={divRef} className={classes.columnsConfigContainer}>
-      <DivSelColumns className={classes.columnsLabelSetColumns}>
-        {getLabel('data_grid.settings_sel_columns')}
-      </DivSelColumns>
-      <WrapperDataGrid className={classes.columnsConfigContent}>
-        <div className={classes.wrapperDataGridCss}>
-          <DataGrid
-            className={classes.columnsConfigGrid}
-            ref={refdata_grid}
-            // header
-
-            // columnas
-            columns={columnsdata_grid}
-            // sortColumns={sortColumns}
-            // onSortColumnsChange={setSortColumns}
-
-            // filas
-            rows={rows}
-            onRowsChange={onInternalRowsChange}
-            selectedRows={selRows}
-            onSelectedRowsChange={onInternalSelectedRowsChange}
-            onRowClick={onRowClick}
-            // rowHeight={props.rowHeight}
-            rowKeyGetter={(row: Row) => row.key}
-            // celdas
-            cellNavigationMode="CHANGE_ROW"
-            defaultColumnOptions={{ resizable: true, sortable: true }}
-          />
-        </div>
-      </WrapperDataGrid>
-      <ColumnActions className={classes.columnsConfigActions}>
-        <IconButton
-          tooltip={getLabel('data_grid.settings_move_first')}
-          onClick={handleMoveFirst}
-          aria-label="move first place"
-          disabled={rowSelectedIndex < 1}
-          src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`}
-        />
-        <IconButton
-          tooltip={getLabel('data_grid.settings_move_up')}
-          dictionaryTooltipId="data_grid.settings_move_up"
-          onClick={() => handleMoveUpDownd(-1)}
-          aria-label="move up place"
-          disabled={rowSelectedIndex < 1}
-          src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`}
-        />
-        <IconButton
-          tooltip={getLabel('data_grid.settings_move_last')}
-          onClick={handleMoveLast}
-          aria-label="move last place"
-          disabled={!!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1)}
-          src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`}
-        />
-        <IconButton
-          tooltip={getLabel('data_grid.settings_move_down')}
-          onClick={() => handleMoveUpDownd(+1)}
-          aria-label="move down place"
-          disabled={!!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1)}
-          src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`}
-        />
-        <IconButton
-          tooltip={getLabel('data_grid.settings_visible_all')}
-          onClick={checkAll}
-          aria-label="check visible all"
-          src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`}
-        />
-        <IconButton
-          tooltip={getLabel('data_grid.settings_no_visible_all')}
-          onClick={unCheckAll}
-          aria-label="un check all"
-          src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`}
-        />
-        <IconButton
-          tooltip={getLabel('data_grid.settings_restore')}
-          onClick={restoreAll}
-          aria-label="Restore columns"
-          src={`${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`}
-        />
-      </ColumnActions>
-      {/* <DialogActions >
-                // {/* <Button variant="outlined" color="inherit" onClick={onCloseSettings}>{getLabel( 'data_grid.cancel')}</Button> */}
-      {/* <Button variant="contained" onClick={handleIntro} >{getLabel( 'data_grid.intro')}</Button> */}
-      {/* </DialogActions> } */}
-    </WrapperColumnsConfig>
-  );
-});
-
-ColumnsConfig.displayName = 'ColumnsConfig';

package/src/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/styles.ts

@@ -1,50 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperColumnsConfig = styled('div')(({ theme }) => ({
-  color: theme.vars.palette.text.primary,
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100%',
-  width: '100%',
-}));
-
-export const DivAll = styled('div')(({ theme }) => ({
-  color: theme.vars.palette.text.primary,
-  fontSize: theme.typography.h4.fontSize,
-}));
-
-export const DivSelColumns = styled('div')(({ theme }) => ({
-  ...theme.colorSchemes.finalTheme.typography.bodyDens,
-  color: theme.vars.palette.text.primary,
-  padding: `16px 8px`,
-}));
-
-export const WrapperDataGrid = styled('div')(() => ({
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  flexGrow: 1,
-  overflow: 'auto',
-}));
-
-export const DivColumn = styled('div')(() => ({
-  display: 'flex',
-  flexDirection: 'row',
-}));
-
-export const ColumnActions = styled('div')(() => ({
-  paddingTop: '16px',
-  paddingBottom: '8px',
-  display: 'flex',
-  flexDirection: 'row',
-}));
-export const DialogActions = styled('div')(({ theme }) => ({
-  paddingTop: theme.spacing(3),
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'flex-end',
-  '& > button': {
-    marginLeft: '10px',
-  },
-}));