@astral/ui 4.49.0 → 4.51.0

package/components/NewStepper/NewStepper.d.ts

@@ -0,0 +1,2 @@
+import { type StepperProps } from './types';
+export declare const NewStepper: (props: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/components/NewStepper/NewStepper.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
+import { stepperClassnames } from './constants';
+import { StepperContextProvider } from './StepperContext';
+import { Wrapper } from './styles';
+import { useLogic } from './useLogic';
+const stepper = cva(stepperClassnames.root, {
+    variants: {
+        orientation: {
+            horizontal: stepperClassnames.orientationHorizontal,
+            vertical: stepperClassnames.orientationVertical,
+        },
+        alternativeLabel: {
+            true: stepperClassnames.alternativeLabel,
+        },
+        connector: {
+            arrow: stepperClassnames.arrowConnector,
+            line: stepperClassnames.lineConnector,
+        },
+    },
+});
+export const NewStepper = (props) => {
+    const { containerRef, stepperConnector, stepperAlternativeLabel, activeStep, onClickPrevStep, onClickStep, orientation, className, children, } = useLogic(props);
+    return (_jsx(StepperContextProvider, { orientation: orientation, activeStep: activeStep, connector: stepperConnector, alternativeLabel: stepperAlternativeLabel, onClickPrevStep: onClickPrevStep, onClickStep: onClickStep, children: _jsx(Wrapper, { ref: containerRef, role: "group", className: classNames(stepper({
+                alternativeLabel: stepperAlternativeLabel,
+                connector: stepperConnector,
+                orientation,
+            }), className), children: children }) }));
+};

package/components/NewStepper/Step/Description/Description.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type DescriptionProps = {
+    children: ReactNode;
+    className?: string;
+};
+export declare const Description: ({ children, className }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/NewStepper/Step/Description/Description.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledTypography } from './styles';
+export const Description = ({ children, className }) => {
+    if (typeof children === 'string') {
+        return (_jsx(StyledTypography, { variant: "caption", className: className, children: children }));
+    }
+    return (_jsx(StyledTypography, { component: "div", className: className, children: children }));
+};

package/components/NewStepper/Step/Description/index.d.ts

@@ -0,0 +1 @@
+export * from './Description';

package/components/NewStepper/Step/Description/index.js

@@ -0,0 +1 @@
+export * from './Description';

package/components/NewStepper/Step/Description/styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledTypography: import("../../../styled").StyledComponent<import("../../../Typography/types").TypographyPropsBase & {
+    color?: import("../../../Typography").TypographyColor | undefined;
+    variant?: import("../../../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../../../Typography").Intensity | undefined;
+    component?: import("../../../Typography/types").ComponentProp | undefined;
+    isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/NewStepper/Step/Description/styles.js

@@ -0,0 +1,18 @@
+import { styled } from '../../../styled';
+import { Typography } from '../../../Typography';
+export const StyledTypography = styled(Typography) `
+  min-height: 22px;
+  margin-bottom: ${({ theme }) => theme.microSpacing(1)};
+  margin-left: 9px;
+  padding-left: 13px;
+
+  text-align: start;
+
+  border-left: 2px solid ${({ theme }) => theme.palette.grey[300]};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-bottom: 0;
+    margin-left: 11px;
+    padding-left: 15px;
+  }
+`;

package/components/NewStepper/Step/Label/Label.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type LabelProps = {
+    label: ReactNode;
+    isActiveStep?: boolean;
+};
+export declare const Label: ({ label, isActiveStep }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/NewStepper/Step/Label/Label.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Collapse } from '../../../Collapse';
+import { Typography } from '../../../Typography';
+import { Fade } from '../../../transitions/Fade';
+import { stepClassnames } from '../constants';
+import { DesktopLabel, MobileCompactLabel, MobileLabelGroup } from './styles';
+export const Label = ({ label, isActiveStep }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(DesktopLabel, { className: stepClassnames.label, variant: "caption", children: label }), _jsxs(MobileLabelGroup, { className: stepClassnames.labelMobile, children: [_jsx(Collapse, { in: !isActiveStep, orientation: "horizontal", children: _jsx(Fade, { in: !isActiveStep, children: _jsx(MobileCompactLabel, { className: stepClassnames.label, component: "span" }) }) }), _jsx(Collapse, { in: isActiveStep, orientation: "horizontal", children: _jsx(Fade, { in: isActiveStep, children: _jsx(Typography, { className: stepClassnames.label, children: label }) }) })] })] }));
+};

package/components/NewStepper/Step/Label/index.d.ts

@@ -0,0 +1 @@
+export { Label } from './Label';

package/components/NewStepper/Step/Label/index.js

@@ -0,0 +1 @@
+export { Label } from './Label';

package/components/NewStepper/Step/Label/styles.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const MobileLabelGroup: import("../../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MobileCompactLabel: import("../../../styled").StyledComponent<import("../../../Typography/types").TypographyPropsBase & {
+    color?: import("../../../Typography").TypographyColor | undefined;
+    variant?: import("../../../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../../../Typography").Intensity | undefined;
+    component?: import("../../../Typography/types").ComponentProp | undefined;
+    isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DesktopLabel: import("../../../styled").StyledComponent<import("../../../Typography/types").TypographyPropsBase & {
+    color?: import("../../../Typography").TypographyColor | undefined;
+    variant?: import("../../../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../../../Typography").Intensity | undefined;
+    component?: import("../../../Typography/types").ComponentProp | undefined;
+    isUpperCase?: boolean | undefined;
+    withoutCalt?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/NewStepper/Step/Label/styles.js

@@ -0,0 +1,23 @@
+import { styled } from '../../../styled';
+import { Typography } from '../../../Typography';
+import { STEPPER_ORDER_COUNTER_NAME } from '../../constants';
+export const MobileLabelGroup = styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    align-items: center;
+  }
+`;
+export const MobileCompactLabel = styled(Typography) `
+  display: inline-block;
+
+  &::before {
+    content: counter(${STEPPER_ORDER_COUNTER_NAME});
+  }
+`;
+export const DesktopLabel = styled(Typography) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/components/NewStepper/Step/Step.d.ts

@@ -0,0 +1,2 @@
+import type { StepProps } from './types';
+export declare const Step: (props: StepProps) => import("react/jsx-runtime").JSX.Element;

package/components/NewStepper/Step/Step.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../utils/classNames';
+import { cva } from '../../utils/cva';
+import { StepIcon } from '../StepIcon';
+import { stepClassnames } from './constants';
+import { Description } from './Description';
+import { Label } from './Label';
+import { ArrowConnector, IconWrapper, LabelWrapper, LineConnector, StepContentWrapper, StyledButton, Wrapper, } from './styles';
+import { useLogic } from './useLogic';
+const step = cva(stepClassnames.root, {
+    variants: {
+        isError: {
+            true: stepClassnames.error,
+        },
+        isCompleted: {
+            true: stepClassnames.completed,
+        },
+        connector: {
+            arrow: stepClassnames.connectorArrow,
+            line: stepClassnames.connectorLine,
+        },
+        activeStep: {
+            true: stepClassnames.active,
+        },
+        alternativeLabel: {
+            true: stepClassnames.alternativeLabel,
+        },
+        orientation: {
+            horizontal: stepClassnames.orientationHorizontal,
+            vertical: stepClassnames.orientationVertical,
+        },
+        isDisabled: {
+            true: stepClassnames.disabled,
+        },
+    },
+});
+const connector = cva(stepClassnames.connector, {
+    variants: {
+        connector: {
+            arrow: stepClassnames.connectorArrow,
+            line: stepClassnames.connectorLine,
+        },
+        alternativeLabel: {
+            true: stepClassnames.alternativeLabel,
+        },
+        orientation: {
+            horizontal: stepClassnames.orientationHorizontal,
+            vertical: stepClassnames.orientationVertical,
+        },
+        hasDescription: {
+            true: stepClassnames.hasDescription,
+        },
+    },
+});
+export const Step = (props) => {
+    const { isCompletedStep, isRenderButton, handleClick, connectorVariant, alternativeLabel, orientation, children, isError, isWarning, icon, className, label, isRenderVerticalLineConnector, isRenderHorizontalLineConnector, isDisabled, isActiveStep, } = useLogic(props);
+    const StepContent = isRenderButton ? StyledButton : StepContentWrapper;
+    return (_jsxs(Wrapper, { "data-active-step": isActiveStep, className: classNames(step({
+            isError,
+            isCompleted: isCompletedStep,
+            connector: connectorVariant,
+            activeStep: isActiveStep,
+            alternativeLabel,
+            orientation,
+            isDisabled,
+        }), className), children: [_jsxs(StepContent, { variant: "text", onClick: handleClick, disabled: isDisabled, className: classNames(stepClassnames.content, {
+                    [stepClassnames.active]: isActiveStep,
+                }), children: [_jsxs(LabelWrapper, { className: stepClassnames.labelContainer, children: [_jsx(IconWrapper, { className: stepClassnames.iconContainer, children: _jsx(StepIcon, { icon: icon, isActive: isActiveStep, isCompleted: isCompletedStep, isError: isError, isWarning: isWarning }) }), _jsx(Label, { label: label, isActiveStep: isActiveStep }), connectorVariant === 'arrow' && (_jsx(ArrowConnector, { className: connector({
+                                    connector: connectorVariant,
+                                    alternativeLabel,
+                                    orientation,
+                                }) }))] }), children && (_jsx(Description, { className: stepClassnames.description, children: children })), isRenderVerticalLineConnector && (_jsx(LineConnector, { className: connector({
+                            connector: connectorVariant,
+                            orientation,
+                        }) }))] }), isRenderHorizontalLineConnector && (_jsx(LineConnector, { className: connector({
+                    connector: connectorVariant,
+                    alternativeLabel,
+                    orientation,
+                }) }))] }));
+};

package/components/NewStepper/Step/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const stepStateClassnames: {
+    active: string;
+    completed: string;
+    error: string;
+    warning: string;
+    disabled: string;
+};
+export declare const stepClassnames: {
+    active: string;
+    completed: string;
+    error: string;
+    warning: string;
+    disabled: string;
+    root: string;
+    label: string;
+    description: string;
+    iconContainer: string;
+    connector: string;
+    connectorLine: string;
+    connectorArrow: string;
+    alternativeLabel: string;
+    orientationHorizontal: string;
+    orientationVertical: string;
+    labelContainer: string;
+    labelMobile: string;
+    content: string;
+    hasDescription: string;
+};

package/components/NewStepper/Step/constants.js

@@ -0,0 +1,25 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const stepStateClassnames = {
+    active: createUIKitClassname('step_active'),
+    completed: createUIKitClassname('step_completed'),
+    error: createUIKitClassname('step_error'),
+    warning: createUIKitClassname('step_warning'),
+    disabled: createUIKitClassname('step_disabled'),
+};
+export const stepClassnames = {
+    root: createUIKitClassname('step'),
+    label: createUIKitClassname('step__label'),
+    description: createUIKitClassname('step__description'),
+    iconContainer: createUIKitClassname('step__icon-container'),
+    connector: createUIKitClassname('step__connector'),
+    connectorLine: createUIKitClassname('step_connector-line'),
+    connectorArrow: createUIKitClassname('step_connector-arrow'),
+    alternativeLabel: createUIKitClassname('step_alternative-label'),
+    orientationHorizontal: createUIKitClassname('step_orientation-horizontal'),
+    orientationVertical: createUIKitClassname('step_orientation-vertical'),
+    labelContainer: createUIKitClassname('step__label-container'),
+    labelMobile: createUIKitClassname('step__label-mobile'),
+    content: createUIKitClassname('step__content'),
+    hasDescription: createUIKitClassname('step_has-description'),
+    ...stepStateClassnames,
+};

package/components/NewStepper/Step/index.d.ts

@@ -0,0 +1,3 @@
+export { Step } from './Step';
+export type { StepProps } from './types';
+export { stepClassnames } from './constants';

package/components/NewStepper/Step/index.js

@@ -0,0 +1,2 @@
+export { Step } from './Step';
+export { stepClassnames } from './constants';

package/components/NewStepper/Step/styles.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArrowConnector: import("../../styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    color?: string | undefined;
+    titleAccess?: string | undefined;
+    size?: "sm" | "md" | undefined;
+} & import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const LineConnector: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LabelWrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepContentWrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/NewStepper/Step/styles.js

@@ -0,0 +1,312 @@
+import { NextOutlineMd } from '../../../icons/NextOutlineMd';
+import { Button } from '../../Button';
+import { styled } from '../../styled';
+import { typographyClassnames } from '../../Typography/constants';
+import { STEPPER_ORDER_COUNTER_NAME } from '../constants';
+import { stepIconClassnames } from '../StepIcon/constants';
+import { stepClassnames } from './constants';
+export const Wrapper = styled.div `
+  counter-increment: ${STEPPER_ORDER_COUNTER_NAME};
+
+  display: flex;
+  gap: ${({ theme }) => theme.microSpacing(5)};
+  align-items: center;
+
+  &.${stepClassnames.alternativeLabel} {
+    position: relative;
+
+    flex: 1;
+    flex-direction: column;
+
+    & .${stepClassnames.labelContainer} {
+      flex-direction: column;
+
+      text-align: center;
+    }
+
+    &:first-of-type {
+      & .${stepClassnames.connector} {
+        display: none;
+      }
+    }
+  }
+
+  &.${stepClassnames.connectorArrow} {
+    & .${stepClassnames.content} {
+      padding: ${({ theme }) => theme.microSpacing(5, 0)};
+    }
+    
+    &:not(:first-of-type) .${stepClassnames.content} {
+      margin-left: ${({ theme }) => theme.spacing(2)};
+    }
+
+    &:last-of-type .${stepClassnames.connector} {
+      display: none;
+    }
+  }
+
+  &.${stepClassnames.connectorLine} {
+    &.${stepClassnames.orientationHorizontal} {
+      & .${stepClassnames.content} {
+        align-items: center;
+
+        padding: ${({ theme }) => theme.spacing(0, 1)};
+      }
+
+    
+      &.${stepClassnames.alternativeLabel} {
+        & .${stepClassnames.content} {
+          padding: ${({ theme }) => theme.microSpacing(3, 0)};
+        }
+      }
+    }
+
+    &.${stepClassnames.orientationVertical} {
+
+      & .${stepClassnames.label} {
+        font-size: ${({ theme }) => theme.typography.body1.fontSize};
+        line-height: ${({ theme }) => theme.typography.body1.lineHeight};
+      }
+      
+      & .${stepClassnames.content} {
+        padding: ${({ theme }) => theme.spacing(1, 0, 0)};
+      }
+
+      & .${stepClassnames.connector}:not(.${stepClassnames.hasDescription}) {
+        margin-bottom: ${({ theme }) => theme.microSpacing(1)};
+      }
+
+      &:last-of-type {
+        & .${stepClassnames.description} {
+          min-height: 0;
+          margin: 0;
+          padding-left: ${({ theme }) => theme.spacing(6)};
+
+          border-left: none;
+
+          ${({ theme }) => theme.breakpoints.down('sm')} {
+            padding-left: ${({ theme }) => theme.spacing(7)};
+          }
+        }
+
+        & .${stepClassnames.connector} {
+          display: none;
+        }
+      }
+
+      &:last-of-type {
+        & .${stepClassnames.content} {
+          padding: ${({ theme }) => theme.spacing(1, 0)};
+    
+          & .${stepClassnames.description} {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      & .${stepClassnames.labelMobile} {
+        display: none;
+      }
+
+      & .${stepClassnames.label} {
+        display: block;
+      }
+    }
+  }
+
+  & .${stepClassnames.content} {
+    &.${stepClassnames.active} {
+      & .${stepClassnames.label} {
+        color: ${({ theme }) => theme.palette.grey[900]};
+      }
+
+      & .${stepIconClassnames.root} {
+        color: ${({ theme }) => theme.palette.primary[800]};
+
+        &.${stepIconClassnames.success} {
+          color: ${({ theme }) => theme.palette.success[800]};
+        }
+
+        &.${stepIconClassnames.error} {
+          color: ${({ theme }) => theme.palette.error[800]};
+        }
+
+        &.${stepIconClassnames.warning} {
+          color: ${({ theme }) => theme.palette.warning[800]};
+        }
+      }
+    }
+  }
+`;
+export const IconWrapper = styled.div `
+  display: flex;
+
+  & .${stepIconClassnames.root} {
+    width: 20px;
+    height: 20px;
+
+    color: ${({ theme }) => theme.palette.grey[300]};
+    
+    transition: ${({ theme }) => theme.transitions.create(['color'], {
+    duration: theme.transitions.duration.shorter,
+})};
+
+    &.${stepIconClassnames.active} {
+      color: ${({ theme }) => theme.palette.primary[800]};
+    }
+
+    &.${stepIconClassnames.success} {
+      color: ${({ theme }) => theme.palette.success[800]};
+    }
+
+    &.${stepIconClassnames.error} {
+      color: ${({ theme }) => theme.palette.error[800]};
+    }
+
+    &.${stepIconClassnames.warning} {
+      color: ${({ theme }) => theme.palette.warning[800]};
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      width: 24px;
+      height: 24px;
+    }
+  }
+`;
+export const ArrowConnector = styled(NextOutlineMd) `
+  width: 20px;
+  height: 20px;
+
+  color: ${({ theme }) => theme.palette.grey[400]};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 24px;
+    height: 24px;
+  }
+`;
+export const LineConnector = styled.div `
+  flex: 1 1 auto;
+
+  height: 2px;
+
+  border-top: 2px solid ${({ theme }) => theme.palette.grey[300]};
+
+  &.${stepClassnames.alternativeLabel} {
+    position: absolute;
+    top: 15px;
+    right: calc(50% + 14px);
+    left: calc(-50% + 14px);
+  }
+
+  &.${stepClassnames.orientationVertical} {
+    min-height: 16px;
+
+    /* Смещение необходимо для центрирования линии относительно иконки, т.к. линия шириной 2px, то для выравнивания необходимо число не кратное 2ум  */
+    margin-left: 9px;
+
+    border-top: unset;
+    border-left: 2px solid ${({ theme }) => theme.palette.grey[300]};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      margin-left: 11px;
+    }
+  }
+`;
+export const LabelWrapper = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  align-items: center;
+
+  color: ${({ theme }) => theme.palette.grey[600]};
+
+  & .${typographyClassnames.root} {
+    transition: ${({ theme }) => theme.transitions.create(['color'], {
+    duration: theme.transitions.duration.shorter,
+})};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    white-space: nowrap;
+  }
+`;
+export const StepContentWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.microSpacing(1)};
+  }
+`;
+export const StyledButton = styled(Button) `
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  width: 100%;
+  height: auto;
+  padding: 0;
+
+  background: transparent;
+  border: 0;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.microSpacing(1)};
+  }
+
+  &:hover {
+    background: transparent;
+
+    & .${stepClassnames.label} {
+      color: ${({ theme }) => theme.palette.grey[700]};
+    }
+
+    & .${stepIconClassnames.root} {
+      color: ${({ theme }) => theme.palette.primary[700]};
+
+      &.${stepIconClassnames.success} {
+        color: ${({ theme }) => theme.palette.success[700]};
+      }
+
+      &.${stepIconClassnames.error} {
+        color: ${({ theme }) => theme.palette.error[700]};
+      }
+
+      &.${stepIconClassnames.warning} {
+        color: ${({ theme }) => theme.palette.warning[700]};
+      }
+    }
+  }
+
+  &:active {
+    background: transparent;
+    & .${stepClassnames.label} {
+      color: ${({ theme }) => theme.palette.grey[900]};
+    }
+
+    & .${stepIconClassnames.root} {
+      color: ${({ theme }) => theme.palette.primary[800]};
+
+      &.${stepIconClassnames.success} {
+        color: ${({ theme }) => theme.palette.success[800]};
+      }
+
+      &.${stepIconClassnames.error} {
+        color: ${({ theme }) => theme.palette.error[800]};
+      }
+
+      &.${stepIconClassnames.warning} {
+        color: ${({ theme }) => theme.palette.warning[700]};
+      }
+    }
+  }
+
+  &:focus-visible {
+    border-radius: ${({ theme }) => theme.shape.medium};
+    outline: 1px solid ${({ theme }) => theme.palette.components.focused};
+  }
+`;