@astral/ui 4.49.0 → 4.51.0

package/hook-form/FormWizard/styles.d.ts

@@ -7,10 +7,7 @@ export declare const BeforeContentWrapper: import("../../components/styled").Sty
     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 StyledStepperWizard: import("../../components/styled").StyledComponent<Omit<import("../..").StepperProps, "children"> & {
-    steps: import("../../components/StepperWizard").StepWizard[];
-    onClickPrevStep?: ((index: number) => void) | undefined;
-} & {
+export declare const StyledNewStepper: import("../../components/styled").StyledComponent<import("../../components/NewStepper").StepperProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const FormContent: import("../../components/styled").StyledComponent<{

package/hook-form/FormWizard/styles.js

@@ -1,4 +1,4 @@
-import { StepperWizard } from '../../components/StepperWizard';
+import { NewStepper } from '../../components/NewStepper';
 import { styled } from '../../components/styled';
 export const Wrapper = styled.section `
   display: flex;
@@ -13,14 +13,12 @@ export const BeforeContentWrapper = styled.div `
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;
-export const StyledStepperWizard = styled(StepperWizard) `
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
+export const StyledNewStepper = styled(NewStepper) `
+  margin-bottom: ${({ theme }) => theme.spacing(5)};
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    overflow-x: auto;
-
-    margin-bottom: ${({ theme }) => theme.spacing(6)};
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
     padding: ${({ theme }) => theme.spacing(0, 4)};
   }
 `;

package/hook-form/FormWizard/useLogic/useLogic.d.ts

@@ -3,12 +3,11 @@ import { type FormWizardProps } from '../FormWizard';
 type UseLogicParams<TFormValues extends Record<string, unknown>> = FormWizardProps<TFormValues>;
 export declare const useLogic: <TFormValues extends Record<string, unknown>>({ currentStepId, steps, submitButtonText, isLastStep, }: UseLogicParams<TFormValues>) => {
     Component: import("react").FunctionComponent<{}>;
-    stepWizardProps: {
-        activeStep: number;
-        steps: {
-            label: string;
-        }[];
-    };
+    steps: {
+        label: string;
+        stepId: number;
+    }[];
+    activeStep: number;
     footerProps: {
         prevButtonText: string;
         submitButtonText: string;

package/hook-form/FormWizard/useLogic/useLogic.js

@@ -5,17 +5,16 @@ export const useLogic = ({ currentStepId, steps, submitButtonText, isLastStep, }
         ? steps?.findIndex(({ id }) => Object.is(id, currentStepId))
         : 0, [currentStepId, steps]);
     const currentStep = steps[indexStep];
-    const stepsByLabel = steps.map(({ label }) => ({
+    const stepsByLabel = steps.map(({ label }, index) => ({
         label,
+        stepId: index,
     }));
     const prevButtonText = currentStep.prevButtonText || DEFAULT_PREV_BUTTON_TEXT;
     const nextButtonText = currentStep.nextButtonText || DEFAULT_NEXT_BUTTON_TEXT;
     return {
         Component: currentStep.component,
-        stepWizardProps: {
-            activeStep: indexStep,
-            steps: stepsByLabel,
-        },
+        steps: stepsByLabel,
+        activeStep: indexStep,
         footerProps: {
             prevButtonText,
             submitButtonText: isLastStep ? submitButtonText : nextButtonText,

package/hook-form/useFormWizard/useFormWizard.js

@@ -65,8 +65,10 @@ export const useFormWizard = ({ initialStepId, defaultValues, isDisabled, steps,
         return;
     };
     const handleClickStep = (index) => {
-        const stepId = steps[index].id;
-        setCurrentStepId(stepId);
+        if (index < 0 || index >= visibleSteps.length) {
+            return;
+        }
+        setCurrentStepId(visibleSteps[index].id);
     };
     const handlePrevStep = () => {
         if (isFirstStep) {

package/node/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/node/components/NewStepper/NewStepper.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewStepper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../utils/classNames");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
+const StepperContext_1 = require("./StepperContext");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const stepper = (0, cva_1.cva)(constants_1.stepperClassnames.root, {
+    variants: {
+        orientation: {
+            horizontal: constants_1.stepperClassnames.orientationHorizontal,
+            vertical: constants_1.stepperClassnames.orientationVertical,
+        },
+        alternativeLabel: {
+            true: constants_1.stepperClassnames.alternativeLabel,
+        },
+        connector: {
+            arrow: constants_1.stepperClassnames.arrowConnector,
+            line: constants_1.stepperClassnames.lineConnector,
+        },
+    },
+});
+const NewStepper = (props) => {
+    const { containerRef, stepperConnector, stepperAlternativeLabel, activeStep, onClickPrevStep, onClickStep, orientation, className, children, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(StepperContext_1.StepperContextProvider, { orientation: orientation, activeStep: activeStep, connector: stepperConnector, alternativeLabel: stepperAlternativeLabel, onClickPrevStep: onClickPrevStep, onClickStep: onClickStep, children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ref: containerRef, role: "group", className: (0, classNames_1.classNames)(stepper({
+                alternativeLabel: stepperAlternativeLabel,
+                connector: stepperConnector,
+                orientation,
+            }), className), children: children }) }));
+};
+exports.NewStepper = NewStepper;

package/node/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/node/components/NewStepper/Step/Description/Description.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Description = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const Description = ({ children, className }) => {
+    if (typeof children === 'string') {
+        return ((0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { variant: "caption", className: className, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { component: "div", className: className, children: children }));
+};
+exports.Description = Description;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Description"), exports);

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledTypography: import("@emotion/styled/dist/declarations/src/types").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/node/components/NewStepper/Step/Description/styles.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTypography = void 0;
+const styled_1 = require("../../../styled");
+const Typography_1 = require("../../../Typography");
+exports.StyledTypography = (0, styled_1.styled)(Typography_1.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/node/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/node/components/NewStepper/Step/Label/Label.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Collapse_1 = require("../../../Collapse");
+const Typography_1 = require("../../../Typography");
+const Fade_1 = require("../../../transitions/Fade");
+const constants_1 = require("../constants");
+const styles_1 = require("./styles");
+const Label = ({ label, isActiveStep }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.DesktopLabel, { className: constants_1.stepClassnames.label, variant: "caption", children: label }), (0, jsx_runtime_1.jsxs)(styles_1.MobileLabelGroup, { className: constants_1.stepClassnames.labelMobile, children: [(0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: !isActiveStep, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(Fade_1.Fade, { in: !isActiveStep, children: (0, jsx_runtime_1.jsx)(styles_1.MobileCompactLabel, { className: constants_1.stepClassnames.label, component: "span" }) }) }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isActiveStep, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(Fade_1.Fade, { in: isActiveStep, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: constants_1.stepClassnames.label, children: label }) }) })] })] }));
+};
+exports.Label = Label;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+var Label_1 = require("./Label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const MobileLabelGroup: import("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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/node/components/NewStepper/Step/Label/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopLabel = exports.MobileCompactLabel = exports.MobileLabelGroup = void 0;
+const styled_1 = require("../../../styled");
+const Typography_1 = require("../../../Typography");
+const constants_1 = require("../../constants");
+exports.MobileLabelGroup = styled_1.styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    align-items: center;
+  }
+`;
+exports.MobileCompactLabel = (0, styled_1.styled)(Typography_1.Typography) `
+  display: inline-block;
+
+  &::before {
+    content: counter(${constants_1.STEPPER_ORDER_COUNTER_NAME});
+  }
+`;
+exports.DesktopLabel = (0, styled_1.styled)(Typography_1.Typography) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/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/node/components/NewStepper/Step/Step.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Step = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../utils/classNames");
+const cva_1 = require("../../utils/cva");
+const StepIcon_1 = require("../StepIcon");
+const constants_1 = require("./constants");
+const Description_1 = require("./Description");
+const Label_1 = require("./Label");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const step = (0, cva_1.cva)(constants_1.stepClassnames.root, {
+    variants: {
+        isError: {
+            true: constants_1.stepClassnames.error,
+        },
+        isCompleted: {
+            true: constants_1.stepClassnames.completed,
+        },
+        connector: {
+            arrow: constants_1.stepClassnames.connectorArrow,
+            line: constants_1.stepClassnames.connectorLine,
+        },
+        activeStep: {
+            true: constants_1.stepClassnames.active,
+        },
+        alternativeLabel: {
+            true: constants_1.stepClassnames.alternativeLabel,
+        },
+        orientation: {
+            horizontal: constants_1.stepClassnames.orientationHorizontal,
+            vertical: constants_1.stepClassnames.orientationVertical,
+        },
+        isDisabled: {
+            true: constants_1.stepClassnames.disabled,
+        },
+    },
+});
+const connector = (0, cva_1.cva)(constants_1.stepClassnames.connector, {
+    variants: {
+        connector: {
+            arrow: constants_1.stepClassnames.connectorArrow,
+            line: constants_1.stepClassnames.connectorLine,
+        },
+        alternativeLabel: {
+            true: constants_1.stepClassnames.alternativeLabel,
+        },
+        orientation: {
+            horizontal: constants_1.stepClassnames.orientationHorizontal,
+            vertical: constants_1.stepClassnames.orientationVertical,
+        },
+        hasDescription: {
+            true: constants_1.stepClassnames.hasDescription,
+        },
+    },
+});
+const Step = (props) => {
+    const { isCompletedStep, isRenderButton, handleClick, connectorVariant, alternativeLabel, orientation, children, isError, isWarning, icon, className, label, isRenderVerticalLineConnector, isRenderHorizontalLineConnector, isDisabled, isActiveStep, } = (0, useLogic_1.useLogic)(props);
+    const StepContent = isRenderButton ? styles_1.StyledButton : styles_1.StepContentWrapper;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "data-active-step": isActiveStep, className: (0, classNames_1.classNames)(step({
+            isError,
+            isCompleted: isCompletedStep,
+            connector: connectorVariant,
+            activeStep: isActiveStep,
+            alternativeLabel,
+            orientation,
+            isDisabled,
+        }), className), children: [(0, jsx_runtime_1.jsxs)(StepContent, { variant: "text", onClick: handleClick, disabled: isDisabled, className: (0, classNames_1.classNames)(constants_1.stepClassnames.content, {
+                    [constants_1.stepClassnames.active]: isActiveStep,
+                }), children: [(0, jsx_runtime_1.jsxs)(styles_1.LabelWrapper, { className: constants_1.stepClassnames.labelContainer, children: [(0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.stepClassnames.iconContainer, children: (0, jsx_runtime_1.jsx)(StepIcon_1.StepIcon, { icon: icon, isActive: isActiveStep, isCompleted: isCompletedStep, isError: isError, isWarning: isWarning }) }), (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, isActiveStep: isActiveStep }), connectorVariant === 'arrow' && ((0, jsx_runtime_1.jsx)(styles_1.ArrowConnector, { className: connector({
+                                    connector: connectorVariant,
+                                    alternativeLabel,
+                                    orientation,
+                                }) }))] }), children && ((0, jsx_runtime_1.jsx)(Description_1.Description, { className: constants_1.stepClassnames.description, children: children })), isRenderVerticalLineConnector && ((0, jsx_runtime_1.jsx)(styles_1.LineConnector, { className: connector({
+                            connector: connectorVariant,
+                            orientation,
+                        }) }))] }), isRenderHorizontalLineConnector && ((0, jsx_runtime_1.jsx)(styles_1.LineConnector, { className: connector({
+                    connector: connectorVariant,
+                    alternativeLabel,
+                    orientation,
+                }) }))] }));
+};
+exports.Step = Step;

package/node/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/node/components/NewStepper/Step/constants.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepClassnames = exports.stepStateClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.stepStateClassnames = {
+    active: (0, createUIKitClassname_1.createUIKitClassname)('step_active'),
+    completed: (0, createUIKitClassname_1.createUIKitClassname)('step_completed'),
+    error: (0, createUIKitClassname_1.createUIKitClassname)('step_error'),
+    warning: (0, createUIKitClassname_1.createUIKitClassname)('step_warning'),
+    disabled: (0, createUIKitClassname_1.createUIKitClassname)('step_disabled'),
+};
+exports.stepClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('step'),
+    label: (0, createUIKitClassname_1.createUIKitClassname)('step__label'),
+    description: (0, createUIKitClassname_1.createUIKitClassname)('step__description'),
+    iconContainer: (0, createUIKitClassname_1.createUIKitClassname)('step__icon-container'),
+    connector: (0, createUIKitClassname_1.createUIKitClassname)('step__connector'),
+    connectorLine: (0, createUIKitClassname_1.createUIKitClassname)('step_connector-line'),
+    connectorArrow: (0, createUIKitClassname_1.createUIKitClassname)('step_connector-arrow'),
+    alternativeLabel: (0, createUIKitClassname_1.createUIKitClassname)('step_alternative-label'),
+    orientationHorizontal: (0, createUIKitClassname_1.createUIKitClassname)('step_orientation-horizontal'),
+    orientationVertical: (0, createUIKitClassname_1.createUIKitClassname)('step_orientation-vertical'),
+    labelContainer: (0, createUIKitClassname_1.createUIKitClassname)('step__label-container'),
+    labelMobile: (0, createUIKitClassname_1.createUIKitClassname)('step__label-mobile'),
+    content: (0, createUIKitClassname_1.createUIKitClassname)('step__content'),
+    hasDescription: (0, createUIKitClassname_1.createUIKitClassname)('step_has-description'),
+    ...exports.stepStateClassnames,
+};

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepClassnames = exports.Step = void 0;
+var Step_1 = require("./Step");
+Object.defineProperty(exports, "Step", { enumerable: true, get: function () { return Step_1.Step; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "stepClassnames", { enumerable: true, get: function () { return constants_1.stepClassnames; } });

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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;
+}, {}, {}>;