diff --git a/packages/react/src/components/Stepper/Step/Step.api.mdx b/packages/react/src/components/Stepper/Step/Step.api.mdx new file mode 100644 index 000000000..68536a080 --- /dev/null +++ b/packages/react/src/components/Stepper/Step/Step.api.mdx @@ -0,0 +1,37 @@ +import { Meta } from '@storybook/blocks'; +import LinkTo from '@storybook/addon-links/react'; +import { TableInterface } from '~storybook/components/TableInterface'; + + + +# Dropzone API + +```js +import { Step } from '@elonkit/react'; +``` + +## Component name + +The name `ESStep` can be used when providing default props or style overrides in the theme. + +## Props + + + +
+ +## CSS + + + +
+ +## Demos + + diff --git a/packages/react/src/components/Stepper/Step/Step.classes.ts b/packages/react/src/components/Stepper/Step/Step.classes.ts new file mode 100644 index 000000000..981e3b9f0 --- /dev/null +++ b/packages/react/src/components/Stepper/Step/Step.classes.ts @@ -0,0 +1,40 @@ +import { generateUtilityClass, generateUtilityClasses } from '@mui/material'; + +export type StepClasses = { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the root element if component disabled. */ + disabled: string; + /** Styles applied to the size element. */ + size: string; + /** Styles applied to the completed element. */ + completed: string; + /** State class applied to the root element if `error={true}`. */ + error: string; + /** Styles applied to the activeStep element. */ + activeStep: string; + /** Styles applied to the root element if position='bottom'. */ + positionBottom: string; + /** Styles applied to the root element if position='default'. */ + positionDefault: string; + /** Styles applied to the orientation element. */ + vertical: string; +}; + +export type StepClassKey = keyof StepClasses; + +export function getStepUtilityClass(slot: string): string { + return generateUtilityClass('ESStep', slot); +} + +export const stepClasses: StepClasses = generateUtilityClasses('ESStep', [ + 'root', + 'disabled', + 'size', + 'completed', + 'positionBottom', + 'positionDefault', + 'vertical', + 'error', + 'activeStep', +]); diff --git a/packages/react/src/components/Stepper/Step/Step.tsx b/packages/react/src/components/Stepper/Step/Step.tsx new file mode 100644 index 000000000..96799e37f --- /dev/null +++ b/packages/react/src/components/Stepper/Step/Step.tsx @@ -0,0 +1,222 @@ +import { StepProps } from './Step.types'; + +import clsx from 'clsx'; +import { getStepUtilityClass } from './Step.classes'; + +import { unstable_composeClasses as composeClasses } from '@mui/base'; + +import { styled, useThemeProps } from '@mui/material/styles'; +import { capitalize } from '@mui/material'; + +import { IconCheckW500, IconExclamation } from '../../../icons'; +import { ButtonBase, buttonBaseClasses } from '../../ButtonBase'; + +type StepOwnerState = { + classes?: StepProps['classes']; + error?: boolean; + completed?: boolean; + size?: string; + activeStep?: number; + disabled?: boolean; + position?: 'default' | 'bottom'; + orientation?: 'horizontal' | 'vertical'; +}; + +const useUtilityClasses = (ownerState: StepOwnerState) => { + const { classes, completed, error, size, position, orientation } = ownerState; + + const slots = { + root: [ + 'root', + completed && 'completed', + error && 'error', + `size${size}`, + position && `position${capitalize(position)}`, + orientation, + ], + button: ['button'], + circle: ['circle'], + }; + + return composeClasses(slots, getStepUtilityClass, classes); +}; + +const StepRoot = styled(ButtonBase, { + name: 'ESStep', + slot: 'Root', + overridesResolver: (_props, styles) => { + const { + ownerState: { orientation, position }, + } = _props; + return [styles.root, styles[orientation], position && styles[`position${capitalize(position)}`]]; + }, +})<{ ownerState: StepOwnerState }>(({ theme }) => ({ + minHeight: '56px', + height: '100%', + position: 'relative', + '--text': theme.vars.palette.monoA.A900, + '--hovered': theme.vars.palette.monoA.A100, + '--pressed': theme.vars.palette.monoA.A200, + padding: '16px 24px 16px 16px', + borderRadius: '3px', + + [`&.${buttonBaseClasses.disabled}`]: { + '--text': theme.vars.palette.monoA.A500, + '--icon': theme.vars.palette.monoA.A400, + cursor: 'not-allowed', + }, + + [`& .${buttonBaseClasses.wrapper}`]: { + display: 'flex', + justifyContent: 'flex-start', + }, + + variants: [ + { + props: { + position: 'bottom', + orientation: 'horizontal', + }, + style: { + marginTop: '21px', + padding: '16px', + + [`& .${buttonBaseClasses.wrapper}`]: { + flexDirection: 'column', + height: 'auto', + gap: '8px', + }, + }, + }, + { + props: { + error: true, + }, + style: { + '--text': theme.vars.palette.error[300], + }, + }, + ], +})); + +const StepCircle = styled('div', { + name: 'ESStep', + slot: 'Circle', + overridesResolver: (props, styles) => { + const { + ownerState: { completed, error, disabled }, + } = props; + return [styles.circle, completed && styles.completed, error && styles.error, disabled && styles.disabled]; + }, +})<{ ownerState: StepOwnerState }>(({ theme }) => ({ + marginRight: '12px', + marginLeft: '8px', + borderRadius: '50%', + color: theme.vars.palette.monoB[500], + height: '32px', + width: '32px', + minWidth: '32px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + background: theme.vars.palette.monoA.A500, + fontWeight: 700, + + variants: [ + { + props: { + size: '24', + }, + style: { + height: '24px', + width: '24px', + minWidth: '24px', + }, + }, + { + props: { + completed: true, + }, + style: { + background: theme.vars.palette.primary[300], + }, + }, + { + props: { + activeStep: true, + }, + style: { + background: theme.vars.palette.primary[300], + }, + }, + { + props: { + error: true, + }, + style: { + background: theme.vars.palette.error[300], + }, + }, + { + props: { + disabled: true, + }, + style: { + background: theme.vars.palette.monoA.A300, + }, + }, + { + props: { + position: 'bottom', + }, + style: { + marginRight: '8px', + }, + }, + ], +})); + +export const Step = (inProps: StepProps) => { + const { + sx, + className, + disabled, + children, + error, + stepIndex, + completed, + activeStep, + position, + size = '32', + orientation, + required, + iconCompleted = , + iconError = , + ...props + } = useThemeProps({ + props: inProps, + name: 'ESStep', + }); + const ownerState = { + ...props, + size, + error, + completed, + activeStep, + disabled, + position, + orientation, + required, + }; + + const classes = useUtilityClasses(ownerState); + + return ( + + + {completed ? iconCompleted : error ? iconError : stepIndex} + + {children} + + ); +}; diff --git a/packages/react/src/components/Stepper/Step/Step.types.ts b/packages/react/src/components/Stepper/Step/Step.types.ts new file mode 100644 index 000000000..904057196 --- /dev/null +++ b/packages/react/src/components/Stepper/Step/Step.types.ts @@ -0,0 +1,55 @@ +import { ReactNode } from 'react'; + +import { StepClasses } from './Step.classes'; + +import { SxProps, Theme } from '@mui/material'; + +export interface StepProps { + children?: ReactNode; + /** 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; + /** + * Avatar size. + * @default 32 + */ + size?: '24' | '32'; + /** Styles applied to the track element. */ + completed?: boolean; + /** Is the step complete */ + activeStep?: number; + /** + * If `true`, the component is error. + */ + error?: boolean; + + stepIndex?: number; + /** If true, the step is disabled. */ + disabled?: boolean; + + /** + * The component position. + * @default 'default' + */ + position?: 'default' | 'bottom'; + /** + * The component position. + * @default 'horizontal' + */ + orientation?: 'horizontal' | 'vertical'; + + /** Icon to display with completed step. */ + iconCompleted?: ReactNode; + + /** Icon to display with error step. */ + iconError?: ReactNode; + + /** + * If `true`, the `input` element is required. + * @default false + */ + required?: boolean; +} diff --git a/packages/react/src/components/Stepper/Step/index.ts b/packages/react/src/components/Stepper/Step/index.ts new file mode 100644 index 000000000..b2e70e749 --- /dev/null +++ b/packages/react/src/components/Stepper/Step/index.ts @@ -0,0 +1,4 @@ +export { Step } from './Step'; +export type { StepClasses, StepClassKey } from './Step.classes'; +export { stepClasses } from './Step.classes'; +export type { StepProps } from './Step.types'; diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx b/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx new file mode 100644 index 000000000..0a32a6335 --- /dev/null +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx @@ -0,0 +1,37 @@ +import { Meta } from '@storybook/blocks'; +import LinkTo from '@storybook/addon-links/react'; +import { TableInterface } from '~storybook/components/TableInterface'; + + + +# Dropzone API + +```js +import { StepLabel } from '@elonkit/react'; +``` + +## Component name + +The name `ESStepLabel` can be used when providing default props or style overrides in the theme. + +## Props + + + +
+ +## CSS + + + +
+ +## Demos + +
    +
  • + + Stepper + +
    • +
diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.classes.ts b/packages/react/src/components/Stepper/StepLabel/StepLabel.classes.ts new file mode 100644 index 000000000..857bd3304 --- /dev/null +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.classes.ts @@ -0,0 +1,14 @@ +import { generateUtilityClass, generateUtilityClasses } from '@mui/material'; + +export type StepLabelClasses = { + /** Styles applied to the root element. */ + root: string; +}; + +export type StepLabelClassKey = keyof StepLabelClasses; + +export function getStepLabelUtilityClass(slot: string): string { + return generateUtilityClass('ESStepLabel', slot); +} + +export const stepLabelClasses: StepLabelClasses = generateUtilityClasses('ESStepLabel', ['root']); diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx new file mode 100644 index 000000000..a1610cdef --- /dev/null +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx @@ -0,0 +1,46 @@ +import { StepLabelProps } from './StepLabel.types'; + +import clsx from 'clsx'; + +import { unstable_composeClasses as composeClasses } from '@mui/base'; + +import { styled, useThemeProps } from '@mui/material/styles'; +import { getStepLabelUtilityClass, Typography } from '@mui/material'; + +type StepLabelOwnerState = { + classes?: StepLabelProps['classes']; +}; + +const useUtilityClasses = (ownerState: StepLabelOwnerState) => { + const { classes } = ownerState; + + const slots = { + root: ['root'], + }; + + return composeClasses(slots, getStepLabelUtilityClass, classes); +}; + +const StepLabelRoot = styled(Typography, { + name: 'ESStepLabel', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, +})<{ ownerState: StepLabelOwnerState }>(() => ({ + textTransform: 'none', +})); + +export const StepLabel = (inProps: StepLabelProps) => { + const { className, children, ...props } = useThemeProps({ + props: inProps, + name: 'ESStepLabel', + }); + + const ownerState = { ...props }; + const classes = useUtilityClasses(ownerState); + + return ( + + {children} + + ); +}; diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.types.ts b/packages/react/src/components/Stepper/StepLabel/StepLabel.types.ts new file mode 100644 index 000000000..f0ef5c6f5 --- /dev/null +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.types.ts @@ -0,0 +1,15 @@ +import { ReactNode } from 'react'; + +import { StepLabelClasses } from './StepLabel.classes'; + +import { SxProps, Theme } from '@mui/material'; + +export interface StepLabelProps { + children?: ReactNode; + /** 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; +} diff --git a/packages/react/src/components/Stepper/StepLabel/index.ts b/packages/react/src/components/Stepper/StepLabel/index.ts new file mode 100644 index 000000000..81fb812af --- /dev/null +++ b/packages/react/src/components/Stepper/StepLabel/index.ts @@ -0,0 +1,4 @@ +export { StepLabel } from './StepLabel'; +export type { StepLabelClasses, StepLabelClassKey } from './StepLabel.classes'; +export { stepLabelClasses } from './StepLabel.classes'; +export type { StepLabelProps } from './StepLabel.types'; diff --git a/packages/react/src/components/Stepper/Stepper.api.mdx b/packages/react/src/components/Stepper/Stepper.api.mdx new file mode 100644 index 000000000..d4161ff00 --- /dev/null +++ b/packages/react/src/components/Stepper/Stepper.api.mdx @@ -0,0 +1,37 @@ +import { Meta } from '@storybook/blocks'; +import LinkTo from '@storybook/addon-links/react'; +import { TableInterface } from '~storybook/components/TableInterface'; + + + +# Dropzone API + +```js +import { Stepper } from '@elonkit/react'; +``` + +## Component name + +The name `ESStepper` can be used when providing default props or style overrides in the theme. + +## Props + + + +
+ +## CSS + + + +
+ +## Demos + +
    +
  • + + Stepper + +
    • +
diff --git a/packages/react/src/components/Stepper/Stepper.classes.ts b/packages/react/src/components/Stepper/Stepper.classes.ts new file mode 100644 index 000000000..249ed45d0 --- /dev/null +++ b/packages/react/src/components/Stepper/Stepper.classes.ts @@ -0,0 +1,30 @@ +import { generateUtilityClass, generateUtilityClasses } from '@mui/material'; + +export type StepperClasses = { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the root element if component disabled. */ + disabled: string; + /** Styles applied to the orientation element. */ + horizontal: string; + /** Styles applied to the orientation element. */ + vertical: string; + /** Styles applied to the size element. */ + size: string; + size24: string; +}; + +export type StepperClassKey = keyof StepperClasses; + +export function getStepperUtilityClass(slot: string): string { + return generateUtilityClass('ESStepper', slot); +} + +export const stepperClasses: StepperClasses = generateUtilityClasses('ESStepper', [ + 'root', + 'disabled', + 'horizontal', + 'vertical', + 'size', + 'size24', +]); diff --git a/packages/react/src/components/Stepper/Stepper.stories.tsx b/packages/react/src/components/Stepper/Stepper.stories.tsx new file mode 100644 index 000000000..c8ff93e25 --- /dev/null +++ b/packages/react/src/components/Stepper/Stepper.stories.tsx @@ -0,0 +1,78 @@ +import { Meta, StoryContext, StoryObj } from '@storybook/react'; + +import { Step } from './Step/Step'; +import { StepLabel } from './StepLabel'; +import { Stepper } from '.'; + +const getText = (context: StoryContext) => { + return context.globals.locale === 'en' ? 'Button' : 'Кнопка'; +}; + +const meta: Meta = { + tags: ['autodocs'], + component: Stepper, + parameters: { + references: ['Stepper'], + }, + argTypes: { + children: { + control: { + type: 'text', + }, + }, + size: { + options: ['24', '32'], + control: { + type: 'select', + }, + }, + activeStep: { + control: { type: 'number' }, + }, + orientation: { + options: ['horizontal', 'vertical'], + control: { + type: 'select', + }, + }, + }, + args: { + size: '32', + orientation: 'horizontal', + }, +}; + +export default meta; + +type StepStatus = 'completed' | 'inProgress' | 'error'; + +export interface Step { + id: number; + title: string; + status: StepStatus; + content?: React.ReactNode; +} + +type Story = StoryObj; + +export const Demo: Story = { + render: (args, context) => { + const text = getText(context); + return ( + + + {text} + + + {text} + + + {text} + + + {text} + + + ); + }, +}; diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx new file mode 100644 index 000000000..39d49229c --- /dev/null +++ b/packages/react/src/components/Stepper/Stepper.tsx @@ -0,0 +1,181 @@ +import React from 'react'; + +import { StepperProps } from './Stepper.types'; + +import clsx from 'clsx'; +import { getStepperUtilityClass, stepperClasses } from './Stepper.classes'; + +import { unstable_composeClasses as composeClasses } from '@mui/base'; + +import { styled, useThemeProps } from '@mui/material/styles'; + +type StepperOwnerState = { + classes?: StepperProps['classes']; + orientation?: 'horizontal' | 'vertical'; + activeStep?: StepperProps['activeStep']; + size?: StepperProps['size']; + position?: 'default' | 'bottom'; + size24?: boolean; +}; + +const useUtilityClasses = (ownerState: StepperOwnerState) => { + const { classes, orientation, size24 } = ownerState; + + const slots = { + root: ['root', orientation, size24 && 'size24'], + container: ['container'], + activeStep: ['activeStep'], + size: ['size'], + }; + + return composeClasses(slots, getStepperUtilityClass, classes); +}; + +const StepperRoot = styled('div', { + name: 'ESStepper', + slot: 'Root', + overridesResolver: (props, styles) => { + const { + ownerState: { orientation }, + } = props; + + return [styles.root, styles[orientation]]; + }, +})<{ ownerState: StepperOwnerState }>(() => ({ + display: 'flex', + [`&.${stepperClasses.horizontal}`]: { + flexDirection: 'row', + alignItems: 'center', + }, + [`&.${stepperClasses.vertical}`]: { + flexDirection: 'column', + alignItems: 'initial', + //gap: '8px', + }, +})); + +const StepperContainer = styled('div', { + name: 'ESStepper', + slot: 'Container', + overridesResolver: (props, styles) => styles.container, +})(() => ({})); + +const StepperConnectorRoot = styled('div', { + name: 'ESStepperConnector', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, +})(() => ({ + position: 'relative', + width: '100%', +})); + +const StepperConnectorLine = styled('div', { + name: 'ESStepperConnector', + slot: 'Line', + overridesResolver: (props, styles) => { + const { + ownerState: { orientation, size, size24 }, + } = props; + + return [styles.line, styles[orientation], styles[size], styles[size24]]; + }, +})<{ ownerState: StepperOwnerState & { isActive: boolean } }>(({ theme }) => ({ + position: 'absolute', + height: '1px', + backgroundColor: theme.vars.palette.monoA.A300, + + variants: [ + { + props: { + isActive: true, + }, + style: { + backgroundColor: theme.vars.palette.primary[300], + }, + }, + { + props: { + orientation: 'horizontal', + }, + style: { + width: 'calc(100% + 32px)', + left: '-16px', + }, + }, + { + props: { + orientation: 'vertical', + }, + style: { + left: '28px', + width: '24px', + transform: 'rotate(90deg)', + }, + }, + { + props: { + orientation: 'vertical', + size24: true, + }, + style: { + left: '24px', + width: '24px', + transform: 'rotate(90deg)', + }, + }, + ], +})); + +export const Stepper = (inProps: StepperProps) => { + const { + className, + sx, + children, + activeStep, + orientation = 'horizontal', + position = 'default', + size = '32', + ...props + } = useThemeProps({ + props: inProps, + name: 'ESStepper', + }); + + const ownerState = { + ...props, + position, + orientation, + activeStep, + size, + size24: size === '24', + }; + + const classes = useUtilityClasses(ownerState); + + return ( + + {React.Children.map(children, (child, index) => ( + <> + + {React.cloneElement(child as React.ReactElement, { + ...props, + activeStep: activeStep === index, + orientation, + position, + size, + stepIndex: index + 1, + })} + + {index < React.Children.count(children) - 1 && ( + + + + )} + + ))} + + ); +}; diff --git a/packages/react/src/components/Stepper/Stepper.types.ts b/packages/react/src/components/Stepper/Stepper.types.ts new file mode 100644 index 000000000..f7cace758 --- /dev/null +++ b/packages/react/src/components/Stepper/Stepper.types.ts @@ -0,0 +1,31 @@ +import { ReactNode } from 'react'; + +import { StepperClasses } from './Stepper.classes'; + +import { SxProps, Theme } from '@mui/material'; + +export interface StepperProps { + className?: string; + /** Override or extend the styles applied to the component. */ + children: ReactNode; + classes?: Partial; + /** The system prop that allows defining system overrides as well as additional CSS styles. */ + sx?: SxProps; + /** + * Avatar size. + * @default 32 + */ + size?: '24' | '32'; + /** Count the active step. */ + activeStep: number; + /** + * The component orientation. + * @default 'horizontal' + */ + orientation?: 'horizontal' | 'vertical'; + /** + * The component orientation. + * @default 'default' + */ + position?: 'default' | 'bottom'; +} diff --git a/packages/react/src/components/Stepper/index.ts b/packages/react/src/components/Stepper/index.ts new file mode 100644 index 000000000..626ca3d0b --- /dev/null +++ b/packages/react/src/components/Stepper/index.ts @@ -0,0 +1,6 @@ +export * from './Step'; +export * from './StepLabel'; +export { Stepper } from './Stepper'; +export type { StepperClasses, StepperClassKey } from './Stepper.classes'; +export { stepperClasses } from './Stepper.classes'; +export type { StepperProps } from './Stepper.types'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 206915895..0453dc467 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -54,10 +54,9 @@ export * from './Sidenav'; export * from './Snackbar'; export * from './SortingMenu'; export * from './Spinner'; -export * from './Spinner'; +export * from './Stepper'; export * from './SvgIcon'; export * from './Swiper'; -export * from './Swiper'; export * from './Switch'; export * from './SwitchBase'; export * from './TabBar'; diff --git a/packages/react/src/icons/IconCheckW500.tsx b/packages/react/src/icons/IconCheckW500.tsx index ab9a6129b..50f34c81e 100644 --- a/packages/react/src/icons/IconCheckW500.tsx +++ b/packages/react/src/icons/IconCheckW500.tsx @@ -3,7 +3,7 @@ import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; export const IconCheckW500 = (props: SvgIconProps) => { return ( - + ); }; diff --git a/packages/react/src/overrides.d.ts b/packages/react/src/overrides.d.ts index 7f1d55e63..def40ceaf 100644 --- a/packages/react/src/overrides.d.ts +++ b/packages/react/src/overrides.d.ts @@ -255,6 +255,15 @@ import { } from './components/Swiper'; import { SwitchClassKey, SwitchProps } from './components/Switch'; import { SwitchBaseClassKey, SwitchBaseProps } from './components/SwitchBase'; +import { + StepperClassKey, + StepperProps, + StepClassKey, + StepProps, + StepLabelClassKey, + StepLabelProps, +} from './components/Stepper'; + import { TabBarClassKey, TabBarItemClassKey, TabBarItemProps, TabBarProps } from './components/TabBar'; import { TableActionsClassKey, @@ -474,6 +483,9 @@ declare module '@mui/material/styles/props' { ESSwiper: SwiperProps; ESSwitch: SwitchProps; ESSwitchBase: SwitchBaseProps; + ESStepper: StepperProps; + ESStep: StepProps; + ESStepLabel: StepLabelProps; ESSwiperButton: SwiperButtonProps; ESSwiperPagination: SwiperPaginationProps; ESTabBar: TabBarProps; @@ -622,6 +634,9 @@ declare module '@mui/material/styles/overrides' { ESSwiper: SwiperClassKey; ESSwitch: SwitchClassKey; ESSwitchBase: SwitchBaseClassKey; + ESStepper: StepperClassKey; + ESStep: StepClassKey; + ESStepLabel: StepLabelClassKey; ESSwiperButton: SwiperButtonClassKey; ESSwiperPagination: SwiperPaginationClassKey; ESTabBar: TabBarClassKey; @@ -900,6 +915,18 @@ declare module '@mui/material/styles/components' { defaultProps?: ComponentsProps['ESSwitchBase']; styleOverrides?: ComponentsOverrides['ESSwitchBase']; }; + ESStepper?: { + defaultProps?: ComponentsProps['ESStepper']; + styleOverrides?: ComponentsOverrides['ESStepper']; + }; + ESStep?: { + defaultProps?: ComponentsProps['ESStep']; + styleOverrides?: ComponentsOverrides['ESStep']; + }; + ESStepLabel?: { + defaultProps?: ComponentsProps['ESStepLabel']; + styleOverrides?: ComponentsOverrides['ESStepLabel']; + }; ESSwiperButton?: { defaultProps?: ComponentsProps['ESSwiperButton']; styleOverrides?: ComponentsOverrides['ESSwiperButton'];