diff --git a/packages/react/src/components/FolderIcon/FolderIcon.api.mdx b/packages/react/src/components/FolderIcon/FolderIcon.api.mdx new file mode 100644 index 000000000..e7ec2fc59 --- /dev/null +++ b/packages/react/src/components/FolderIcon/FolderIcon.api.mdx @@ -0,0 +1,37 @@ +import { Meta } from '@storybook/blocks'; +import LinkTo from '@storybook/addon-links/react'; +import { TableInterface } from '~storybook/components/TableInterface'; + + + +# FolderIcon API + +```js +import { FolderIcon } from '@esfront/react'; +``` + +## Component name + +The name `ESFolderIcon` can be used when providing default props or style overrides in the theme. + +## Props + + + +
+ +## CSS + + + +
+ +## Demos + + diff --git a/packages/react/src/components/FolderIcon/FolderIcon.classes.ts b/packages/react/src/components/FolderIcon/FolderIcon.classes.ts new file mode 100644 index 000000000..f0a63a5c8 --- /dev/null +++ b/packages/react/src/components/FolderIcon/FolderIcon.classes.ts @@ -0,0 +1,31 @@ +import { generateUtilityClass, generateUtilityClasses } from '@mui/material'; + +export type FolderIconClasses = { + /** Styles applied to the root element. */ + root: string; + + filled: string; + + variantOutlined: string; + variantContained: string; + variantColored: string; + variantDefault: string; + + /** Styles applied to the icon element. */ + icon: string; +}; +export type FolderIconClassKey = keyof FolderIconClasses; + +export function getFolderIconUtilityClass(slot: string): string { + return generateUtilityClass('ESFolderIcon', slot); +} + +export const folderIconClasses: FolderIconClasses = generateUtilityClasses('ESFolderIcon', [ + 'root', + 'filled', + 'variantOutlined', + 'variantContained', + 'variantColored', + 'variantDefault', + 'icon', +]); diff --git a/packages/react/src/components/FolderIcon/FolderIcon.stories.tsx b/packages/react/src/components/FolderIcon/FolderIcon.stories.tsx new file mode 100644 index 000000000..4d4d18a4a --- /dev/null +++ b/packages/react/src/components/FolderIcon/FolderIcon.stories.tsx @@ -0,0 +1,98 @@ +import { ComponentProps } from 'react'; + +import { Meta, StoryObj } from '@storybook/react'; + +import { FolderIcon } from './'; + +type Args = ComponentProps; + +const meta: Meta = { + tags: ['autodocs'], + component: FolderIcon, + parameters: { + references: ['FolderIcon'], + }, + argTypes: { + color: { + control: { type: 'text' }, + }, + variant: { + options: ['outline', 'contained', 'default', 'colored'], + control: { type: 'select' }, + }, + className: { + table: { + disable: true, + }, + }, + classes: { + table: { + disable: true, + }, + }, + sx: { + table: { + disable: true, + }, + }, + icon: { + table: { + disable: true, + }, + }, + SvgIconProps: { + table: { + disable: true, + }, + }, + }, + args: { + variant: 'default', + size: '500', + filled: true, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Demo: Story = { + render: (args) => { + return ( +
+ +
+ ); + }, +}; + +export const Sizes: Story = { + render: () => { + return ( +
+ + + + + + + + +
+ ); + }, +}; diff --git a/packages/react/src/components/FolderIcon/FolderIcon.tsx b/packages/react/src/components/FolderIcon/FolderIcon.tsx new file mode 100644 index 000000000..eb5eff0d6 --- /dev/null +++ b/packages/react/src/components/FolderIcon/FolderIcon.tsx @@ -0,0 +1,237 @@ +import { FolderIconProps } from './FolderIcon.types'; + +import clsx from 'clsx'; +import { folderIconClasses, getFolderIconUtilityClass } from './FolderIcon.classes'; + +import { unstable_composeClasses as composeClasses } from '@mui/base'; + +import { PaletteColor, styled, useThemeProps } from '@mui/material/styles'; +import { capitalize } from '@mui/material/utils'; + +import { + FolderIconIcon100, + FolderIconIcon200, + FolderIconIcon300, + FolderIconIcon400, + FolderIconIcon500, + FolderIconIcon600, + FolderIconIcon700, + FolderIconIcon800, + FolderIconOutlinedIcon100, + FolderIconOutlinedIcon200, + FolderIconOutlinedIcon300, + FolderIconOutlinedIcon400, + FolderIconOutlinedIcon500, + FolderIconOutlinedIcon600, + FolderIconOutlinedIcon700, + FolderIconOutlinedIcon800, +} from './icons'; + +const SIZE = { + '100': { + width: '15px', + height: '20px', + icon: FolderIconIcon100, + iconOutline: FolderIconOutlinedIcon100, + }, + '200': { + width: '18px', + height: '24px', + icon: FolderIconIcon200, + iconOutline: FolderIconOutlinedIcon200, + }, + '300': { + width: '21px', + height: '28px', + icon: FolderIconIcon300, + iconOutline: FolderIconOutlinedIcon300, + }, + '400': { + width: '24px', + height: '32px', + icon: FolderIconIcon400, + iconOutline: FolderIconOutlinedIcon400, + }, + '500': { + width: '27px', + height: '36px', + icon: FolderIconIcon500, + iconOutline: FolderIconOutlinedIcon500, + }, + '600': { + width: '30px', + height: '40px', + icon: FolderIconIcon600, + iconOutline: FolderIconOutlinedIcon600, + }, + '700': { + width: '33px', + height: '44px', + icon: FolderIconIcon700, + iconOutline: FolderIconOutlinedIcon700, + }, + '800': { + width: '36px', + height: '48px', + icon: FolderIconIcon800, + iconOutline: FolderIconOutlinedIcon800, + }, +}; + +function getPath

(obj: any, path: string): P | null { + return path.split('.').reduce((acc, item) => (acc && acc[item] ? acc[item] : null), obj); +} + +type FolderIconOwnerState = { + classes?: FolderIconProps['classes']; + filled: FolderIconProps['filled']; + + color: NonNullable; + size?: NonNullable; + variant: NonNullable; +}; + +const useUtilityClasses = (ownerState: FolderIconOwnerState) => { + const { classes, color, variant, filled } = ownerState; + + const slots = { + root: ['root', filled && 'filled', `color${capitalize(color)}`, `variant${capitalize(variant)}`], + icon: ['icon'], + }; + + return composeClasses(slots, getFolderIconUtilityClass, classes); +}; + +const FolderIconRoot = styled('div', { + name: 'ESFolderIcon', + slot: 'Root', + overridesResolver: (props, styles) => { + const { + ownerState: { color, variant, filled }, + } = props; + + return [ + styles.root, + filled && styles.filled, + styles[`color${capitalize(color)}`], + styles[`variant${capitalize(variant)}`], + ]; + }, +})<{ ownerState: FolderIconOwnerState }>(({ ownerState: { color }, theme }) => ({ + display: 'flex', + height: 'auto', + justifyContent: 'center', + + [`&.${folderIconClasses.variantDefault}`]: { + color: theme.vars.palette.yellow[300], + + '& svg path': { + ':nth-of-type(3)': { + display: 'none', + }, + ':nth-of-type(2)': { + color: theme.vars.palette.yellow[400], + }, + }, + + [`&.${folderIconClasses.filled}`]: { + '& svg path': { + ':nth-of-type(3)': { + display: 'block', + }, + }, + }, + }, + + [`&.${folderIconClasses.variantOutlined}`]: { + color: theme.vars.palette.monoA.A150, + '& svg path': { + ':nth-of-type(3)': { + display: 'none', + }, + }, + + [`&.${folderIconClasses.filled}`]: { + '& svg path': { + ':nth-of-type(3)': { + display: 'block', + }, + }, + }, + }, + + [`&.${folderIconClasses.variantContained}`]: { + color: theme.vars.palette.monoA.A150, + + '& svg path': { + ':nth-of-type(2)': { + fill: theme.vars.palette.monoA.A400, + }, + ':nth-of-type(3)': { + display: 'none', + }, + }, + + [`&.${folderIconClasses.filled}`]: { + '& svg path': { + ':nth-of-type(3)': { + display: 'block', + }, + }, + }, + }, + [`&.${folderIconClasses.variantColored}`]: { + color: getPath(theme, `palette.${color}`)?.A500 || (color as string), + + '& svg path': { + ':nth-of-type(2)': { + color: getPath(theme, `palette.${color}`)?.A800 || (color as string), + }, + ':nth-of-type(3)': { + display: 'none', + }, + }, + + [`&.${folderIconClasses.filled}`]: { + '& svg path': { + ':nth-of-type(3)': { + display: 'block', + }, + }, + }, + }, +})); + +/** + * This component is for displaying folder. + */ +export const FolderIcon = (inProps: FolderIconProps) => { + const { + className, + sx, + variant = 'default', + icon, + size = '500', + filled = true, + color = 'violet', + SvgIconProps, + + ...props + } = useThemeProps({ + props: inProps, + name: 'ESFileIcon', + }); + + const ownerState = { ...props, color, variant, filled }; + const classes = useUtilityClasses(ownerState); + + const defaultIconFilled = variant === 'outlined' ? SIZE[size]?.iconOutline : SIZE[size]?.icon; + + const Icon = icon ?? defaultIconFilled; + + return ( + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/FolderIcon.types.ts b/packages/react/src/components/FolderIcon/FolderIcon.types.ts new file mode 100644 index 000000000..06afbbcf8 --- /dev/null +++ b/packages/react/src/components/FolderIcon/FolderIcon.types.ts @@ -0,0 +1,51 @@ +/* eslint-disable @typescript-eslint/no-empty-object-type */ + +import { FolderIconClasses } from './FolderIcon.classes'; + +import { SxProps, Theme } from '@mui/material'; + +import { SvgIconProps } from '../SvgIcon'; + +import { OverridableStringUnion } from '@mui/types'; + +export interface FolderIconPropsSizeOverrides {} + +export interface FolderIconProps { + /** Class applied to the root element. */ + className?: string; + /** Override or extend the styles applied to the component. */ + classes?: Partial; + /** The system prop that allows defining system overrides as well as additional CSS styles. */ + sx?: SxProps; + + /** + * The size of the component. + * @default '500' + */ + size?: OverridableStringUnion< + '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800', + FolderIconPropsSizeOverrides + >; + + /** The icon component. */ + icon?: React.FC; + + /** + * The variant to use. + * @default 'default' + */ + variant?: 'outlined' | 'contained' | 'default' | 'colored'; + + /** + * The color of the component. + * It supports both default and custom theme colors + * @default 'violet' + */ + color?: string; + + /** If true, the filled icon component show. */ + filled?: boolean; + + /** Props applied to the icon component. */ + SvgIconProps?: Partial; +} diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconIcon100.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconIcon100.tsx new file mode 100644 index 000000000..35d6e698f --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconIcon100.tsx @@ -0,0 +1,34 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconIcon100 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconIcon200.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconIcon200.tsx new file mode 100644 index 000000000..4d9ae0939 --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconIcon200.tsx @@ -0,0 +1,34 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconIcon200 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconIcon300.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconIcon300.tsx new file mode 100644 index 000000000..41dca2b8d --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconIcon300.tsx @@ -0,0 +1,34 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconIcon300 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconIcon400.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconIcon400.tsx new file mode 100644 index 000000000..61edfbd15 --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconIcon400.tsx @@ -0,0 +1,34 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconIcon400 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconIcon500.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconIcon500.tsx new file mode 100644 index 000000000..07690f508 --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconIcon500.tsx @@ -0,0 +1,34 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconIcon500 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconIcon600.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconIcon600.tsx new file mode 100644 index 000000000..daf51b0c2 --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconIcon600.tsx @@ -0,0 +1,34 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconIcon600 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconIcon700.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconIcon700.tsx new file mode 100644 index 000000000..e47b23366 --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconIcon700.tsx @@ -0,0 +1,34 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconIcon700 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconIcon800.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconIcon800.tsx new file mode 100644 index 000000000..e4d3bde6d --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconIcon800.tsx @@ -0,0 +1,66 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconIcon800 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + + + + + + + + + ); +}; + +/* + + + + + */ diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon100.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon100.tsx new file mode 100644 index 000000000..690dca799 --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon100.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconOutlinedIcon100 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon200.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon200.tsx new file mode 100644 index 000000000..f426ae088 --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon200.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconOutlinedIcon200 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon300.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon300.tsx new file mode 100644 index 000000000..667d0a7e8 --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon300.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconOutlinedIcon300 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon400.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon400.tsx new file mode 100644 index 000000000..b75e994c4 --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon400.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconOutlinedIcon400 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon500.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon500.tsx new file mode 100644 index 000000000..8ce59bcab --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon500.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconOutlinedIcon500 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon600.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon600.tsx new file mode 100644 index 000000000..e3d67830c --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon600.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconOutlinedIcon600 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon700.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon700.tsx new file mode 100644 index 000000000..794d24a1a --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon700.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconOutlinedIcon700 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon800.tsx b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon800.tsx new file mode 100644 index 000000000..6edf1d87d --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/FolderIconOutlinedIcon800.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@mui/material/styles'; + +import { SvgIcon, SvgIconProps } from '../../SvgIcon'; + +export const FolderIconOutlinedIcon800 = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/components/FolderIcon/icons/index.ts b/packages/react/src/components/FolderIcon/icons/index.ts new file mode 100644 index 000000000..03bd6f63a --- /dev/null +++ b/packages/react/src/components/FolderIcon/icons/index.ts @@ -0,0 +1,16 @@ +export { FolderIconIcon100 } from './FolderIconIcon100'; +export { FolderIconIcon200 } from './FolderIconIcon200'; +export { FolderIconIcon300 } from './FolderIconIcon300'; +export { FolderIconIcon400 } from './FolderIconIcon400'; +export { FolderIconIcon500 } from './FolderIconIcon500'; +export { FolderIconIcon600 } from './FolderIconIcon600'; +export { FolderIconIcon700 } from './FolderIconIcon700'; +export { FolderIconIcon800 } from './FolderIconIcon800'; +export { FolderIconOutlinedIcon100 } from './FolderIconOutlinedIcon100'; +export { FolderIconOutlinedIcon200 } from './FolderIconOutlinedIcon200'; +export { FolderIconOutlinedIcon300 } from './FolderIconOutlinedIcon300'; +export { FolderIconOutlinedIcon400 } from './FolderIconOutlinedIcon400'; +export { FolderIconOutlinedIcon500 } from './FolderIconOutlinedIcon500'; +export { FolderIconOutlinedIcon600 } from './FolderIconOutlinedIcon600'; +export { FolderIconOutlinedIcon700 } from './FolderIconOutlinedIcon700'; +export { FolderIconOutlinedIcon800 } from './FolderIconOutlinedIcon800'; diff --git a/packages/react/src/components/FolderIcon/index.ts b/packages/react/src/components/FolderIcon/index.ts new file mode 100644 index 000000000..d9ffbe533 --- /dev/null +++ b/packages/react/src/components/FolderIcon/index.ts @@ -0,0 +1,4 @@ +export { FolderIcon } from './FolderIcon'; +export { FolderIconClasses, folderIconClasses, FolderIconClassKey } from './FolderIcon.classes'; +export { FolderIconProps, FolderIconPropsSizeOverrides } from './FolderIcon.types'; +export * from './icons'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index df146bfcb..e495dbd4c 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -28,6 +28,7 @@ export * from './ErrorPage'; export * from './FileIcon'; export * from './FileInfo'; export * from './Flags'; +export * from './FolderIcon'; export * from './FormatDate'; export * from './FormatSize'; export * from './Gallery'; diff --git a/packages/react/src/overrides.d.ts b/packages/react/src/overrides.d.ts index 2e751aa35..7a551624d 100644 --- a/packages/react/src/overrides.d.ts +++ b/packages/react/src/overrides.d.ts @@ -128,6 +128,7 @@ import { FileInfoProps, } from './components/FileInfo'; import { FlagClassKey } from './components/Flags'; +import { FolderIconClassKey, FolderIconProps } from './components/FolderIcon'; import { FormatDateProps } from './components/FormatDate'; import { FormatSizeProps } from './components/FormatSize'; import { @@ -391,6 +392,7 @@ declare module '@mui/material/styles/props' { ESFileInfoMeta: FileInfoMetaProps; ESFileInfoMetaSeparator: FileInfoMetaSeparatorProps; ESFileInfoName: FileInfoNameProps; + ESFolderIcon: FolderIconProps; ESFormatDate: FormatDateProps; ESFormatSize: FormatSizeProps; ESGallery: GalleryProps; @@ -531,6 +533,7 @@ declare module '@mui/material/styles/overrides' { ESFileInfoMetaSeparator: FileInfoMetaSeparatorClassKey; ESFileInfoName: FileInfoNameClassKey; ESFlag: FlagClassKey; + ESFolderIcon: FolderIconClassKey; ESGallery: GalleryClassKey; ESGalleryActions: GalleryActionsClassKey; ESGalleryActionsButtonGroup: GalleryActionsButtonGroupClassKey; @@ -908,6 +911,10 @@ declare module '@mui/material/styles/components' { ESFlag?: { styleOverrides?: ComponentsOverrides['ESFlag']; }; + ESFolderIcon?: { + defaultProps?: ComponentsProps['ESFolderIcon']; + styleOverrides?: ComponentsOverrides['ESFolderIcon']; + }; ESFormatDate?: { defaultProps?: ComponentsProps['ESFormatDate']; };