jeanverster / chakra-ui-steps

Steps component designed to work seamlessly with Chakra UI

chakra-ui-steps

Steps component designed to work seamlessly with Chakra UI. All documentation and a variety of code examples can be viewed here.

Installation

Yarn:

yarn add chakra-ui-steps

NPM:

npm i chakra-ui-steps

Usage

In order to use the Steps component you will need to first extend the theme with the StepsTheme object. This can be done in your theme file:

import { extendTheme } from "@chakra-ui/react";
import { StepsTheme as Steps } from "chakra-ui-steps";

const theme = extendTheme({
  components: {
    Steps,
  },
});

export default theme;

Then you can use the Steps component in your app:

import { Steps, Step } from "chakra-ui-steps";

const Example = () => {
  const { nextStep, prevStep, reset, activeStep } = useSteps({
    initialStep: 0,
  });
  return (
    <div>
      <Steps activeStep={activeStep}>
        <Step label="Step 1" description="This is the first step" />
        <Step label="Step 2" description="This is the second step" />
        <Step label="Step 3" description="This is the third step" />
      </Steps>
      <Button onClick={() => prevStep()}>Back</Button>
      <Button onClick={() => nextStep()}>Next</Button>
    </div>
  );
};

Docs

For a full list of available props and examples of how to use the component, please visit the documentation site.

If you found this package useful, please consider leaving a star ⭐️ on the repo. Thanks!

---

Upgrade guide

If you are upgrading to v2 of this component you will need to make the following changes:

• StepsStyleConfig has been renamed to StepsTheme - so you will need to update the reference to this in your theme config:

- import { StepsStyleConfig as Steps } from 'chakra-ui-steps';
+ import { StepsTheme as Steps } from 'chakra-ui-steps';

• Previously the Steps component accepted a labelOrientation prop, this has been removed in favor of the circles-alt variant. If you were using this prop you will need to update your code to use the variant instead:

- <Steps labelOrientation="vertical" />
+ <Steps variant="circles-alt" />

The rest of the API remains the same.

chakra-ui-steps's Issues

Clicking anywhere inside the step contents triggers onClickStep

When using the onClickStep prop, the user can no longer interact with the contents without triggering the function.

For example, clicking on prev/next Buttons that are inside the step, triggers the onClickStep and prevents navigation.

Ideally, this would only be triggered when clicking on the step label or icon.

Is there any way to trigger navigation when clicking on the label?
The styling seems to be perfect for this, as the label turns into a link.

is not assignable to type 'IntrinsicAttributes' Type issue

Hello,

Somehow wierdly today i'm getting this error which was not from before :

Type '{ children: Element; label: string; isCompletedStep: any; description: string; key: string; icon: IconType; }' is not assignable to type 'IntrinsicAttributes & OmitCommonProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StepProps> & StepProps & { ...; }'.
  Property 'isCompletedStep' does not exist on type 'IntrinsicAttributes & OmitCommonProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StepProps> & StepProps & { ...; }'.

This is my template

<Step 
   label="Information" 
   isCompletedStep={data.submitted} 
   description="basic records" key="Records" icon={AnIconHere}
> </Step>

Does this make any sense?
Thank you very much in advance.

Responsive breakpoint

Hey, love this component. Would you be willing to accept a PR that lets the consumer adjust the responsive breakpoint?

const [isMobile] = useMediaQuery('(max-width: 43em)'); // Current behavior

https://github.com/jeanverster/chakra-ui-steps/blob/main/chakra-ui-steps/src/components/Steps/index.tsx#L65

I could see this a couple different ways:

Explicit mediaQuery prop

  interface StepsProps extends HTMLChakraProps<'ol'>, ThemingProps {
    mediaQuery?: string;
    ...
  }

  <Steps activeStep={activeStep} mediaQuery="max-width: 375px">...</Steps> 

External useMediaQuery check

  interface StepsProps extends HTMLChakraProps<'ol'>, ThemingProps {
    isAtBreakpoint?: boolean;
    ...
  }

  const [isSmallerThan375] = useMediaQuery('(max-width: 375px)');

  <Steps activeStep={activeStep} isAtBreakpoint={isSmallerThan375}>...</Steps> 

688px (< 43em)	689px (> 43em)

Bug in Safari

Hi, thanks for your work!
I found a markup bug in mobile Safari.

Can pass styling to step label and step description

[RESOLVED] Bug fix reqd: Cannot read properties of undefined (reading 'width') at chakra-ui-steps.es.js:315:25

Hi,

I'm sharing a link to a public repo that I created to recreate the issue using the latest version of chakra-ui-steps:
https://github.com/balu9230/issue-chakra-ui-steps
Kindly clone it and read the README file for further details.

Due to this error, the page is, of course, not rendering.

I've used the same example code snippet that you have mentioned on the main repo of chakra-ui-steps inside the file Steps.tsx
This sample project is built using Vite and Typescript. But that's about it.

Happy to help with any further questions that you may have.

Add support for React javascript (right now it is only typescript)

Module not found: Can't resolve '@chakra-ui/system'

Got some error

maybe anyone has the same problem and already solve it.

custom icon stroke width?

hi,

is there a way to change the strokeWidth via the theme settings? using custom icons and would
like to make it 1px.

thanks, sam

const baseStyleIcon: SystemStyleObject = {
strokeWidth: '2px',
};

Custom error icon

I would like to pass a custom error icon to Steps component same way that you can pass a custom check icon through checkIcon prop. I can make PR for that if it is okay.

Step connector is not responsive

The step Connector breaks when the step title/label/description changes in size:

This makes it unusable with dynamic content unless you set a fixed width to the Steps component

the example code didn't work

chakra-ui-steps.esm.js:310 Uncaught TypeError: Cannot read properties of undefined (reading 'width')
at chakra-ui-steps.esm.js:310:1
at renderWithHooks (react-dom.development.js:14985:1)
at updateForwardRef (react-dom.development.js:17044:1)
at beginWork (react-dom.development.js:19098:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
(anonymous) @ chakra-ui-steps.esm.js:310
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ render.js:62
_callee$ @ render.js:61
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ render.js:36
_next @ render.js:38
(anonymous) @ render.js:38
(anonymous) @ render.js:38
renderElement @ render.js:76
_callee2$ @ render.js:167
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ render.js:36
_next @ render.js:38
(anonymous) @ render.js:38
(anonymous) @ render.js:38
_renderToDOM @ render.js:176
renderToDOM @ render.js:139
(anonymous) @ PreviewWeb.js:1122
_callee12$ @ PreviewWeb.js:1051
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ PreviewWeb.js:8
_next @ PreviewWeb.js:10
(anonymous) @ PreviewWeb.js:10
(anonymous) @ PreviewWeb.js:10
runPhase @ PreviewWeb.js:1072
_callee14$ @ PreviewWeb.js:1121
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ PreviewWeb.js:8
_next @ PreviewWeb.js:10
Promise.then (async)
asyncGeneratorStep @ PreviewWeb.js:8
_next @ PreviewWeb.js:10
(anonymous) @ PreviewWeb.js:10
(anonymous) @ PreviewWeb.js:10
render @ PreviewWeb.js:1185
renderStoryToElement @ PreviewWeb.js:1193
renderStory @ PreviewWeb.js:973
_callee8$ @ PreviewWeb.js:795
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ PreviewWeb.js:8
_next @ PreviewWeb.js:10
Promise.then (async)
asyncGeneratorStep @ PreviewWeb.js:8
_next @ PreviewWeb.js:10
Promise.then (async)
asyncGeneratorStep @ PreviewWeb.js:8
_next @ PreviewWeb.js:10
(anonymous) @ PreviewWeb.js:10
(anonymous) @ PreviewWeb.js:10
renderSelection @ PreviewWeb.js:808
_callee3$ @ PreviewWeb.js:336
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ PreviewWeb.js:8
_next @ PreviewWeb.js:10
(anonymous) @ PreviewWeb.js:10
(anonymous) @ PreviewWeb.js:10
selectSpecifiedStory @ PreviewWeb.js:349
(anonymous) @ PreviewWeb.js:289
(anonymous) @ index.js:217
_runResolutions @ index.js:214
then @ index.js:67
initializeWithStoryIndex @ PreviewWeb.js:282
(anonymous) @ PreviewWeb.js:179
(anonymous) @ index.js:217
_runResolutions @ index.js:214
then @ index.js:67
initializeWithProjectAnnotations @ PreviewWeb.js:178
(anonymous) @ PreviewWeb.js:120
(anonymous) @ index.js:217
_runResolutions @ index.js:214
then @ index.js:67
initialize @ PreviewWeb.js:119
configure @ start.js:148
configure @ index.js:21
(anonymous) @ generated-stories-entry.js:6
./generated-stories-entry.js @ generated-stories-entry.js:6
webpack_require @ bootstrap:853
fn @ bootstrap:150
0 @ storybook-init-framework-entry.js:1
webpack_require @ bootstrap:853
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.iframe.bundle.js:1
Show 64 more frames
3react-dom.development.js:20085 The above error occurred in the component:

at http://localhost:6006/vendors~main.iframe.bundle.js:101192:24
at div
at http://localhost:6006/vendors~main.iframe.bundle.js:64702:73
at StepsProvider (http://localhost:6006/vendors~main.iframe.bundle.js:100982:20)
at http://localhost:6006/vendors~main.iframe.bundle.js:101302:101
at div
at http://localhost:6006/vendors~main.iframe.bundle.js:64702:73
at http://localhost:6006/vendors~main.iframe.bundle.js:47087:25
at Stepper (http://localhost:6006/main.iframe.bundle.js:3514:160)
at EnvironmentProvider (http://localhost:6006/vendors~main.iframe.bundle.js:51921:24)
at ColorModeProvider (http://localhost:6006/vendors~main.iframe.bundle.js:43626:21)
at ThemeProvider (http://localhost:6006/vendors~main.iframe.bundle.js:64741:71)
at ThemeProvider (http://localhost:6006/vendors~main.iframe.bundle.js:54750:27)
at http://localhost:6006/vendors~main.iframe.bundle.js:45253:23
at ChakraProvider (http://localhost:6006/vendors~main.iframe.bundle.js:51766:24)
at unboundStoryFn (http://localhost:6006/vendors~main.iframe.bundle.js:95967:12)
at ErrorBoundary (http://localhost:6006/vendors~main.iframe.bundle.js:93156:5)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Uncaught TypeError: Cannot read properties of undefined (reading 'width')

Hi.

These are my dependencies:

"@chakra-ui/icons": "^2.0.6",
"@chakra-ui/react": "^2.2.6",
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@types/react": "^18.0.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"framer-motion": "^6.0.0",
"chakra-ui-steps": "^1.7.3",

I tried copying first code example from docs and it threw this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'width')

So I tried to strip it down to minimal code

<Steps activeStep={0}>
  <Step>
    <Text>Hello</Text>
  </Step>
</Steps>

And it still throws the same error. Not sure how beneficial this would be but it shows error here

Any clue what is going on and how to fix it?

Alternative strategy for checks

I would like to have something like GitHub has in their steps, see images below. Essentially, the difference is that the final step is the actually completion. So when you reach it, we're done. I want to show a check only on the last step, and I want to have the background filled when you reach that step, not when it completes.

I looked at the options available, and it doesn't look like it's possible. But maybe it wouldn't be too much work to add the support for it? Not sure how to best configure it though...

Step 1

Step 4 (completion)
\

Getting: ContextError: useStyles: `styles` is undefined. Seems you forgot to wrap the components in `<StylesProvider />`

Hi,

I'm trying to export a component using the stepper using the example and following the instructions, but I'm getting this error. I added steps to the theme as well. The component and my chakraprovider are apart of a monorepo they are being exported from if that could a potential cause.

Add support for clickable steps

Add support for clickable steps. ie Click on step number/icon to toggle through the steps as an addition to the prev/next buttons.

Cant install package

Hey, I have started a new chakra ui project (it is 1.8.8 at the moment of writing) and npm gives me the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/framer-motion
npm ERR!   framer-motion@"^6.3.3" from the root project
npm ERR!   peer framer-motion@"3.x || 4.x || 5.x || 6.x" from @chakra-ui/[email protected]
npm ERR!   node_modules/@chakra-ui/react
npm ERR!     @chakra-ui/react@"^1.8.8" from the root project
npm ERR!     peer @chakra-ui/react@">=1.6.7" from [email protected]
npm ERR!     node_modules/chakra-ui-steps
npm ERR!       chakra-ui-steps@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer framer-motion@"^5" from [email protected]
npm ERR! node_modules/chakra-ui-steps
npm ERR!   chakra-ui-steps@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

It seems that you need to update peer dependencies for framer motion from 5 to 6

In vertical mode it would be nice if the step was full width

Uncaught TypeError: stepIconContainer is undefined when creating a variant

Hey!

I'm trying to create a custom variant and receive the following error.

I'm adding the variant to the custom theme like this

and here is CustomSteps

If I apply CustomSteps directly to Steps it works perfectly fine. However, I need the variant to prevent the left shift on mobile devices.

Additionally, if I add stepIconContainer:{} directly to the alternate variant, the page renders but the steps have no styles. Do I need to specifically add the baseStyle for this in CustomSteps?

My apologies if this is painfully obvious, this is my first project with Chakra.

Cannot read properties of undefined (reading 'width') on Step component typescript

To reproduce use nextjs 12.^

// Trowing error
{content}

How can I style the current active step's label?

Hey, first of all great stepper, kudos to the development team
I have one query, How can I style the current active step's label design??
Right now I am using this one for customization and I don't know if it is possible to style the current step's label

const CustomSteps = {
  ...StepsStyleConfig,
  baseStyle: (props: any) => {
    console.log("baseStyle ", props);
    return {
      ...StepsStyleConfig.baseStyle(props),
      stepIconContainer: {
        ...StepsStyleConfig.baseStyle(props).stepIconContainer,
        bg: "rgba(0, 0, 0, 0.38)",
        border: "none",
        width: "24px",
        height: "24px",
        _activeStep: {
          bg: "primary",
        },
      },
      label: {
        color: "darkBlue.500",
        fontWeight: "bold",
       // didn't work
        _activeStep: {
          fontWeight: "bold",
          color: "primary.500",
        },

      },
    };
  },
};

Also I edited the main source for removing the "padding" of 8px on connectors left and right calculations, I would like to make a PR for this that based on prop passed to Steps component it will either add or don't add the spacing on left and right on connnectior.....although this was my requirement for project I am working on.....so if this feature is popular to have than let me know

How to disable checkIcons

Hello,
I want to show the number of that step instead of check icons in steps, how can I do that?

an example; (sorry my paint ability :) )

Gray background color on steps

Hi! The horizontal steps when resized to mobile has this gray background, I'm not sure if is a feature or a bug, but is there a way to disable it? Thank you!

Horizontal on Mobile	Vertical on Mobile

TypeError: Cannot read properties of undefined (reading 'width')

"dependencies": {
    "@chakra-ui/icons": "^1.1.7",
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "chakra-ui-steps": "^1.3.0",
    "framer-motion": "^6.3.11",
    "next": "10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  }

Kindly Use Framer motion v5

Uncaught TypeError: Cannot read properties of undefined (reading 'width') - With ViteJs and typescript

Uncaught TypeError: Cannot read properties of undefined (reading 'width')
I'm working with ViteJs and Typescript

This is my view.

import ChakraUiIcon from "@chakra-ui/icon";
import { Box, Button, ChakraProvider, extendTheme, Flex, Heading } from "@chakra-ui/react";
import { Step, Steps, useSteps } from "chakra-ui-steps"
import { StepsStyleConfig} from 'chakra-ui-steps';

const StepsTheme = {
    ...StepsStyleConfig,
    baseStyle: {
      steps: {
        display: "none",
      },
    },
  }

const theme = extendTheme({
    components: {
        StepsTheme,
    },
});

const steps = [{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }];

export const SalesViewPage = () => {
    const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
        initialStep: 0
    });

    return (
        <>
            <div>
                <h1>Sales View Page</h1>
            </div>
            <ChakraProvider theme={ theme }>

                <Flex
                    alignItems="center"
                    direction="column"
                    justifyContent="center"
                    style={ {width:100, height: "80vh" } }
                >
                    <Heading m={ 30 }>How to save a life</Heading>
                    <Flex>
                        <Steps activeStep={ activeStep } orientation="horizontal" responsive>
                            { steps.map(({ label }) => (
                                <Step label={ label } key={ label } />
                            )) }
                        </Steps>
                    </Flex>
                    <Box
                        bg="gray.200"
                        style={ {
                            width: "80%",
                            height: "40vh"
                        } }
                        margin={ 10 }
                        borderRadius={ 5 }
                        p={ 4 }
                        color="gray.700"
                    >
                        This is the Box
                    </Box>
                    <Flex gridGap={ 10 }>
                        <Button
                            style={
                                {
                                    width: 250
                                }
                            }
                            size="md"
                            onClick={ prevStep }
                        >
                            amdsf
                            {/* <ArrowBackIcon /> */ }
                        </Button>
                        <Button
                            style={ {
                                width: 250
                            } }
                            size="md"
                            onClick={ nextStep }
                        >
                            sigui
                            {/* <ArrowForwardIcon /> */ }
                        </Button>
                    </Flex>
                </Flex>
            </ChakraProvider>
        </>
    );

`ResetPrompt` and `StepButtons` ?

in the demo, where do you get the navigation buttons from?

ResetPrompt and StepButtons ?

I was going to add basic buttons but it seems they have specific methods required...

      {activeStep === 3 ? (
        <ResetPrompt onReset={reset} />
      ) : (
        <StepButtons
          nextStep={nextStep}
          prevStep={prevStep}
          prevDisabled={activeStep === 0}
        />
      )}

How to disable collapsing

Hello,
I want always to show the contents in all steps. Is it possible to disable collapsing?

NextJS SSR TSX: TypeError: Cannot read properties of undefined (reading 'width')

I'm trying to try the "Basic Example" (https://www.npmjs.com/package/chakra-ui-steps) on my Next Js + TS project , but got a compile error.

This is my /pages/_app.tsx

import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import { AppProps } from "next/app";
import { Provider } from "react-redux";
import { StepsStyleConfig as Steps } from "chakra-ui-steps";
import store from "../store";

export const theme = extendTheme({
  components: {
    Steps,
  },
});

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <Provider store={store}>
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
    </Provider>
  );
};
export default App;

This is my StepsExample component

import { Button, Flex, Text } from "@chakra-ui/react";
import { Step, Steps, useSteps } from "chakra-ui-steps";

const content = (
  <Flex py={4}>
    <Text p={1}>Hello world!</Text>
  </Flex>
);

const steps = [
  { label: "Step 1", content },
  { label: "Step 2", content },
  { label: "Step 3", content },
];

export const StepsExample = () => {
  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
    initialStep: 0,
  });

  return (
    <Flex flexDir="column" width="100%">
      <Steps activeStep={activeStep}>
        {steps.map(({ label, content }) => (
          <Step label={label} key={label}>
            {content}
          </Step>
        ))}
      </Steps>
      {activeStep === steps.length ? (
        <Flex p={4}>
          <Button mx="auto" size="sm" onClick={reset}>
            Reset
          </Button>
        </Flex>
      ) : (
        <Flex width="100%" justify="flex-end">
          <Button
            isDisabled={activeStep === 0}
            mr={4}
            onClick={prevStep}
            size="sm"
            variant="ghost"
          >
            Prev
          </Button>
          <Button size="sm" onClick={nextStep}>
            {activeStep === steps.length - 1 ? "Finish" : "Next"}
          </Button>
        </Flex>
      )}
    </Flex>
  );
};

Context:

└─$ node -v
v17.7.1
└─$ yarn -v
1.22.17
└─$ npm -v
8.5.2

I'm using Next JS 12.1.0 with Typescript (yarn create next-app demo --typescript)
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"chakra-ui-steps": "^1.6.2",
"@chakra-ui/react": "^1.8.6",
"@emotion/react": "^11",
"@emotion/styled": "^11",

Output:

TypeError: Cannot read properties of undefined (reading 'width')

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.render
file:///path_of_my_project/node_modules/chakra-ui-steps/dist/chakra-ui-steps.cjs.development.js (317:25)
ReactDOMServerRenderer.render
file:///path_of_my_project/node_modules/react-dom/cjs/react-dom-server.node.development.js (3872:44)
ReactDOMServerRenderer.read
file:///path_of_my_project/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29)
Object.renderToString
file:///path_of_my_project/node_modules/react-dom/cjs/react-dom-server.node.development.js (4298:27)
Object.renderPage
file:///path_of_my_project/node_modules/next/dist/server/render.js (751:45)
Object.defaultGetInitialProps
file:///path_of_my_project/node_modules/next/dist/server/render.js (389:51)
Function.getInitialProps
node_modules/next/dist/pages/_document.js (145:19)
Object.loadGetInitialProps
file:///path_of_my_project/node_modules/next/dist/shared/lib/utils.js (69:29)
renderDocument
file:///path_of_my_project/node_modules/next/dist/server/render.js (764:48)
Object.renderToHTML
file:///path_of_my_project/node_modules/next/dist/server/render.js (828:34)

Color scheme steps inside a modal

In a modal, the stepper form doesn't work well.

What is the suggested or best option for different color schemes? Or maybe using blackAlpha/whiteAlpha would be a better option than gray.

React not defined in build while loading component with chakra-ui-steps

• In my project, I have a button that opens a modal with chakra-ui steps
• Image shown below:
  
• This is from the development environment(vite)
• After building the app(vite build), when I try to access the modal(by clicking the button), i get this error:
  
• I think this is an issue with chakra-ui-steps because all the other packages are being used in other components within the same project and they all seem to work fine in the build

has problem in rtl mode

hello
when you use RTL direction ,make problem in styling each line between steps,
and we can not edit connector `s styling in responsive beceause you use position absolute

Keep steps at top

How can I go about to set things up so that the steps stay on top horizontally like

instead of changing to vertical when narrow (mobile)

Option to customize the CheckIcon

Using vertical orientation, "Cannot read properties of undefined (reading 'width')"

I tried doing using the vertical orientation and even used the code from https://jeanverster.github.io/chakra-ui-steps-site/ however I get the error

TypeError
Cannot read properties of undefined (reading 'width')
Call Stack
 getMargin
  vendor.js:41803:51
 undefined
  vendor.js:41810:11
 renderWithHooks
  vendor.js:76418:18
 updateFunctionComponent
  vendor.js:78789:20
 updateSimpleMemoComponent
  vendor.js:78648:10
 updateMemoComponent
  vendor.js:78525:14
 beginWork
  vendor.js:80568:16
 HTMLUnknownElement.callCallback
  vendor.js:65378:14
 Object.invokeGuardedCallbackDev
  vendor.js:65427:16
 invokeGuardedCallback
  vendor.js:65489:31

I can not set .chakra-collapse: overflow hidden to overflow unset.

Hey everyone, recently y was implementing this stepper and i came to a wall when y want to display a popover inside a vertical stepper.

There is a div with class of .chakra-collapse, that has a css overflow property set to hidden.

I'd tryed :

• To add custom styling to a Step component.
• Config a global object inside my theme stylesConfigs.
• Wrap the Step component on container with styled div but it broke the ui.

but i can not overide succesfully that property.

¿have the Step Component a way to make this happen via props or anothersolution?

Lazyness behaviour on vertical vs horizontal mode

Hi, thank you for such a great component I truly love it.

I have been using it on my desktop just fine, right now I am putting some focus on responsiveness and I found that the stepper will become vertical by default which is great, the issue is that every render function for every step triggers immediately, on the horizontal mode they just trigger when you reach that step.

Sandbox which replicates the issue:
https://codesandbox.io/s/sharp-johnson-l4qyk?file=/src/Test.js

Steps container

Hi thanks for the very useful tool, how can I hide the "1,2,3" strap header please

Contents is not defined

Error: Cannot find name 'Contents'

When the first example on https://jeanverster.github.io/chakra-ui-steps-site/ is rendered, there's an error saying "Contents is not defined". The component 'Contents' isn't declared, where is it being rendered from in the example?

Reproduction: https://codesandbox.io/s/still-hooks-vc25zs?file=/src/Horizontal.tsx

Screenshot of interactive demo's code

Duplicate steps in vertical demo

The demo has a duplicate component on the vertical example.

      <Steps orientation="vertical" activeStep={activeStep}>
        <Steps activeStep={activeStep}>
          {steps.map(({ label, content }) => (
            <Step label={label} key={label}>
              {content}
            </Step>
          ))}
        </Steps>
      </Steps>

Thanks for the awesome work 🙌

Cannot read properties of undefined (reading 'borderColor')

Getting the following error when using this library with Nextjs/typescript:

Cannot read properties of undefined (reading 'borderColor')

error occurs on file: chakra-ui-steps\dist\chakra-ui-steps.esm.js

If I add the commented code it "fixes" it for me, but that's just to get the error to go away.

here's my package.json if that helps:

"dependencies": {
"@chakra-ui/icons": "^1.0.15",
"@chakra-ui/react": "^1.6.7",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@fontsource/open-sans": "^4.5.1",
"@fontsource/raleway": "^4.5.0",
"@hookform/resolvers": "^2.8.3",
"@prisma/client": "^3.3.0",
"@types/next-auth": "^3.15.0",
"axios": "^0.23.0",
"chakra-ui-steps": "^1.5.0",
"framer-motion": "^4.1.17",
"next": "11.1.2",
"next-auth": "^3.28.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-hook-form": "^7.17.4",
"react-icons": "^4.3.1",
"react-new-window": "^0.1.3",
"react-query": "^3.32.3",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/node": "latest",
"@types/react": "17.0.27",
"eslint": "7.32.0",
"eslint-config-next": "11.1.2",
"prisma": "^3.3.0",
"typescript": "4.4.3"
}

Margins on connector incorrect

I can reliably replicate this when using next.js (see https://codesandbox.io/s/patient-cdn-is6vgj?file=/pages/_app.js), but only sporadically when using vanilla react, (see https://codesandbox.io/s/chakra-ui-steps-s78fzp)

Summary

What happens is that the connector sometimes doesn't have the margins set correctly resulting in it overlapping the icon. Note the left and right margins in the following screenshot

Background

In trying to determine the cause I have noticed that inside the Step component the width of the Step is not set correctly in

chakra-ui-steps/chakra-ui-steps/src/components/Step/index.tsx

Line 75 in 468b640

if (containerRef && containerRef.current && setWidths) {

It appears this is because the containerRef.current reference is null when called inside the setWidth function, but not outside it in that useEffect hook (components/Step/index.tsx#L75). Ie. the following code resolves my issue.

      if (containerRef && containerRef.current && setWidths) {
        const width = [containerRef.current?.offsetWidth || 0];
        setWidths(prev => {
          if (prev.length === stepCount) {
            return width;
          }
          return [...prev, width];
        });
      }
    }, [stepIconContainer.width, stepIconContainer.height]);

Additionally, if I change the keys on the Step while developing, causing react to soft-refresh, then the margins are calculated correctly. Until I next hard reload the page when it forgets the width again.

My React Foo isn't great enough here but I think there is something fishy happening that you might wish to look at. :)

"@chakra-ui/react": "2.2.1",
"@emotion/react": "11.9.3",
"@emotion/styled": "11.9.3",
"chakra-ui-steps": "1.7.3",
"framer-motion": "6.3.15",
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0"

Upgrade to react 18 and Charka v2

Hi @jeanverster or anyone else, have you tried upgrading React and Charka to newer versions?

Need step label on center

I need to move the step label on the centre but I don't know how to do that.

Can't resolve `useStyles` and `StylesProvider` imports from `@chakra-ui/system` and `@chakra-ui/react `

Out of the blue I get the following error:

Failed to compile.

Attempted import error: 'useStyles' is not exported from '@chakra-ui/system' (imported as 'useStyles').
ERROR in ./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js 87:6-15
export 'useStyles' (imported as 'useStyles') was not found in '@chakra-ui/system' (possible exports: CSSVars, ColorModeContext, ColorModeProvider, ColorModeScript, DarkMode, GlobalStyle, LightMode, STORAGE_KEY, ThemeProvider, addPrefix, background, border, calc, chakra, color, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createLocalStorageManager, createStylesContext, css, cssVar, effect, filter, flattenTokens, flexbox, forwardRef, getCss, getScriptSrc, grid, interactivity, isStyleProp, keyframes, layout, layoutPropNames, list, localStorageManager, omitThemingProps, others, position, propNames, pseudoPropNames, pseudoSelectors, resolveStyleConfig, ring, scroll, shouldForwardProp, space, styled, systemProps, textDecoration, toCSSObject, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography, useChakra, useColorMode, useColorModeValue, useMultiStyleConfig, useProps, useStyleConfig, useTheme, useToken)

ERROR in ./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js 168:6-17
export 'useStyles' (imported as 'useStyles$1') was not found in '@chakra-ui/react' (possible exports: AbsoluteCenter, Accordion, AccordionButton, AccordionDescendantsProvider, AccordionIcon, AccordionItem, AccordionPanel, AccordionProvider, Alert, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, AspectRatio, Avatar, AvatarBadge, AvatarGroup, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, Button, ButtonGroup, ButtonSpinner, CSSReset, CSSVars, Center, ChakraProvider, Checkbox, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Collapse, ColorModeContext, ColorModeProvider, ColorModeScript, Container, ControlBox, DarkMode, DefaultIcon, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, EASINGS, Editable, EditableInput, EditablePreview, EditableTextarea, Fade, Flex, FormControl, FormErrorIcon, FormErrorMessage, FormHelperText, FormLabel, GlobalStyle, Grid, GridItem, HStack, Heading, Hide, Icon, IconButton, Image, Img, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, LightMode, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, Menu, MenuButton, MenuCommand, MenuDescendantsProvider, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, MenuProvider, Modal, ModalBody, ModalCloseButton, ModalContent, ModalContextProvider, ModalFocusScope, ModalFooter, ModalHeader, ModalOverlay, NumberDecrementStepper, NumberIncrementStepper, NumberInput, NumberInputField, NumberInputStepper, OrderedList, PinInput, PinInputDescendantsProvider, PinInputField, PinInputProvider, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, PortalManager, Progress, ProgressLabel, Radio, RadioGroup, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderProvider, RangeSliderThumb, RangeSliderTrack, RequiredIndicator, STORAGE_KEY, ScaleFade, Select, SelectField, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slide, SlideFade, Slider, SliderFilledTrack, SliderMark, SliderProvider, SliderThumb, SliderTrack, Spacer, Spinner, Square, Stack, StackDivider, StackItem, Stat, StatArrow, StatDownArrow, StatGroup, StatHelpText, StatLabel, StatNumber, StatUpArrow, StyledStepper, Switch, Tab, TabIndicator, TabList, TabPanel, TabPanels, Table, TableCaption, TableContainer, Tabs, TabsDescendantsProvider, TabsProvider, Tag, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Textarea, Tfoot, Th, Thead, ThemeProvider, Toast, ToastProvider, Tooltip, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, addPrefix, assignRef, background, baseStyle, border, calc, chakra, color, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createIcon, createLocalStorageManager, createRenderToast, createStandaloneToast, createStylesContext, createToastFn, css, cssVar, defaultStandaloneParam, effect, extendTheme, fadeConfig, filter, flattenTokens, flexbox, forwardRef, getCss, getScriptSrc, getToastPlacement, grid, interactivity, isChakraTheme, isStyleProp, keyframes, layout, layoutPropNames, list, localStorageManager, mergeThemeOverride, omitThemingProps, others, popperCSSVars, position, propNames, pseudoPropNames, pseudoSelectors, requiredChakraThemeKeys, resolveStyleConfig, ring, scaleFadeConfig, scroll, shouldForwardProp, shouldShowFallbackImage, slideFadeConfig, space, styled, systemProps, textDecoration, theme, toCSSObject, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography, useAccordion, useAccordionContext, useAccordionDescendant, useAccordionDescendants, useAccordionDescendantsContext, useAccordionItem, useAccordionItemState, useAnimationState, useAriaHidden, useBoolean, useBreakpoint, useBreakpointValue, useButtonGroup, useCallbackRef, useChakra, useCheckbox, useCheckboxGroup, useCheckboxGroupContext, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useConst, useControllableProp, useControllableState, useCounter, useDimensions, useDisclosure, useEditable, useEditableControls, useEditableState, useEventListener, useEventListenerMap, useFocusEffect, useFocusOnHide, useFocusOnPointerDown, useFocusOnShow, useForceUpdate, useFormControl, useFormControlContext, useFormControlProps, useFormControlStyles, useId, useIds, useImage, useInputGroupStyles, useInterval, useLatestRef, useMediaQuery, useMenu, useMenuButton, useMenuContext, useMenuDescendant, useMenuDescendants, useMenuDescendantsContext, useMenuItem, useMenuList, useMenuOption, useMenuOptionGroup, useMenuPositioner, useMenuState, useMergeRefs, useModal, useModalContext, useModalStyles, useMouseDownRef, useMultiStyleConfig, useNumberInput, useOptionalPart, useOutsideClick, usePanGesture, usePinInput, usePinInputContext, usePinInputDescendant, usePinInputDescendants, usePinInputDescendantsContext, usePinInputField, usePointerEvent, usePopover, usePopoverContext, usePopper, usePortalManager, usePrefersReducedMotion, usePrevious, useProps, useQuery, useRadio, useRadioGroup, useRadioGroupContext, useRangeSlider, useRangeSliderContext, useSafeLayoutEffect, useShortcut, useSlider, useSliderContext, useStyleConfig, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTheme, useTimeout, useToast, useToken, useTooltip, useUnmountEffect, useUpdateEffect, useWhyDidYouUpdate, visuallyHiddenStyle, withDefaultColorScheme, withDefaultProps, withDefaultSize, withDefaultVariant)

ERROR in ./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js 236:6-17
export 'useStyles' (imported as 'useStyles$1') was not found in '@chakra-ui/react' (possible exports: AbsoluteCenter, Accordion, AccordionButton, AccordionDescendantsProvider, AccordionIcon, AccordionItem, AccordionPanel, AccordionProvider, Alert, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, AspectRatio, Avatar, AvatarBadge, AvatarGroup, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, Button, ButtonGroup, ButtonSpinner, CSSReset, CSSVars, Center, ChakraProvider, Checkbox, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Collapse, ColorModeContext, ColorModeProvider, ColorModeScript, Container, ControlBox, DarkMode, DefaultIcon, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, EASINGS, Editable, EditableInput, EditablePreview, EditableTextarea, Fade, Flex, FormControl, FormErrorIcon, FormErrorMessage, FormHelperText, FormLabel, GlobalStyle, Grid, GridItem, HStack, Heading, Hide, Icon, IconButton, Image, Img, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, LightMode, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, Menu, MenuButton, MenuCommand, MenuDescendantsProvider, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, MenuProvider, Modal, ModalBody, ModalCloseButton, ModalContent, ModalContextProvider, ModalFocusScope, ModalFooter, ModalHeader, ModalOverlay, NumberDecrementStepper, NumberIncrementStepper, NumberInput, NumberInputField, NumberInputStepper, OrderedList, PinInput, PinInputDescendantsProvider, PinInputField, PinInputProvider, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, PortalManager, Progress, ProgressLabel, Radio, RadioGroup, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderProvider, RangeSliderThumb, RangeSliderTrack, RequiredIndicator, STORAGE_KEY, ScaleFade, Select, SelectField, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slide, SlideFade, Slider, SliderFilledTrack, SliderMark, SliderProvider, SliderThumb, SliderTrack, Spacer, Spinner, Square, Stack, StackDivider, StackItem, Stat, StatArrow, StatDownArrow, StatGroup, StatHelpText, StatLabel, StatNumber, StatUpArrow, StyledStepper, Switch, Tab, TabIndicator, TabList, TabPanel, TabPanels, Table, TableCaption, TableContainer, Tabs, TabsDescendantsProvider, TabsProvider, Tag, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Textarea, Tfoot, Th, Thead, ThemeProvider, Toast, ToastProvider, Tooltip, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, addPrefix, assignRef, background, baseStyle, border, calc, chakra, color, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createIcon, createLocalStorageManager, createRenderToast, createStandaloneToast, createStylesContext, createToastFn, css, cssVar, defaultStandaloneParam, effect, extendTheme, fadeConfig, filter, flattenTokens, flexbox, forwardRef, getCss, getScriptSrc, getToastPlacement, grid, interactivity, isChakraTheme, isStyleProp, keyframes, layout, layoutPropNames, list, localStorageManager, mergeThemeOverride, omitThemingProps, others, popperCSSVars, position, propNames, pseudoPropNames, pseudoSelectors, requiredChakraThemeKeys, resolveStyleConfig, ring, scaleFadeConfig, scroll, shouldForwardProp, shouldShowFallbackImage, slideFadeConfig, space, styled, systemProps, textDecoration, theme, toCSSObject, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography, useAccordion, useAccordionContext, useAccordionDescendant, useAccordionDescendants, useAccordionDescendantsContext, useAccordionItem, useAccordionItemState, useAnimationState, useAriaHidden, useBoolean, useBreakpoint, useBreakpointValue, useButtonGroup, useCallbackRef, useChakra, useCheckbox, useCheckboxGroup, useCheckboxGroupContext, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useConst, useControllableProp, useControllableState, useCounter, useDimensions, useDisclosure, useEditable, useEditableControls, useEditableState, useEventListener, useEventListenerMap, useFocusEffect, useFocusOnHide, useFocusOnPointerDown, useFocusOnShow, useForceUpdate, useFormControl, useFormControlContext, useFormControlProps, useFormControlStyles, useId, useIds, useImage, useInputGroupStyles, useInterval, useLatestRef, useMediaQuery, useMenu, useMenuButton, useMenuContext, useMenuDescendant, useMenuDescendants, useMenuDescendantsContext, useMenuItem, useMenuList, useMenuOption, useMenuOptionGroup, useMenuPositioner, useMenuState, useMergeRefs, useModal, useModalContext, useModalStyles, useMouseDownRef, useMultiStyleConfig, useNumberInput, useOptionalPart, useOutsideClick, usePanGesture, usePinInput, usePinInputContext, usePinInputDescendant, usePinInputDescendants, usePinInputDescendantsContext, usePinInputField, usePointerEvent, usePopover, usePopoverContext, usePopper, usePortalManager, usePrefersReducedMotion, usePrevious, useProps, useQuery, useRadio, useRadioGroup, useRadioGroupContext, useRangeSlider, useRangeSliderContext, useSafeLayoutEffect, useShortcut, useSlider, useSliderContext, useStyleConfig, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs, useTabsContext, useTabsDescendant, useTabsDescendants, useTabsDescendantsContext, useTheme, useTimeout, useToast, useToken, useTooltip, useUnmountEffect, useUpdateEffect, useWhyDidYouUpdate, visuallyHiddenStyle, withDefaultColorScheme, withDefaultProps, withDefaultSize, withDefaultVariant)

ERROR in ./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js 294:6-15
export 'useStyles' (imported as 'useStyles') was not found in '@chakra-ui/system' (possible exports: CSSVars, ColorModeContext, ColorModeProvider, ColorModeScript, DarkMode, GlobalStyle, LightMode, STORAGE_KEY, ThemeProvider, addPrefix, background, border, calc, chakra, color, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createLocalStorageManager, createStylesContext, css, cssVar, effect, filter, flattenTokens, flexbox, forwardRef, getCss, getScriptSrc, grid, interactivity, isStyleProp, keyframes, layout, layoutPropNames, list, localStorageManager, omitThemingProps, others, position, propNames, pseudoPropNames, pseudoSelectors, resolveStyleConfig, ring, scroll, shouldForwardProp, space, styled, systemProps, textDecoration, toCSSObject, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography, useChakra, useColorMode, useColorModeValue, useMultiStyleConfig, useProps, useStyleConfig, useTheme, useToken)

ERROR in ./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js 417:13-27
export 'StylesProvider' (imported as 'StylesProvider') was not found in '@chakra-ui/system' (possible exports: CSSVars, ColorModeContext, ColorModeProvider, ColorModeScript, DarkMode, GlobalStyle, LightMode, STORAGE_KEY, ThemeProvider, addPrefix, background, border, calc, chakra, color, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createLocalStorageManager, createStylesContext, css, cssVar, effect, filter, flattenTokens, flexbox, forwardRef, getCss, getScriptSrc, grid, interactivity, isStyleProp, keyframes, layout, layoutPropNames, list, localStorageManager, omitThemingProps, others, position, propNames, pseudoPropNames, pseudoSelectors, resolveStyleConfig, ring, scroll, shouldForwardProp, space, styled, systemProps, textDecoration, toCSSObject, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography, useChakra, useColorMode, useColorModeValue, useMultiStyleConfig, useProps, useStyleConfig, useTheme, useToken)

webpack compiled with 5 errors
No issues found.

I'm using

    "@chakra-ui/icons": "^2.0.1",
    "@chakra-ui/react": "^2.1.2",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.0.0",
    "chakra-ui-steps": "^1.7.3",

Stepper always horizontal on initial load

When loading on a smaller screen. The initial load is always in horizontal mode.

When changing orientation of the device to horizontal and then to vertical again. Then the stepper goes into vertical orientation.

Expected behaviour: Directly in vertical orientation when initialised on smaller screens

Component not defined

Hello, Thank you for making this stepper for chakra-UI.

I am getting errors on ResetPrompt and StepButtons is not defined. I am trying to use stepper from your example.

Styling active label text

Is it possible to change the color and font weight of the default numerical indicator that is active?

I'm trying to go from this:

To this:

I've tried styling it with

label: {
  _activeStep: {
    fontWeight: 700,
    color: #000000,
  }
}

(and also _active instead of _activeStep) but that isn't working.

Allow passing Elements as description to the Step

The <Step/> description field is typed as string | undefined, but it actually works perfectly fine with React elements too. If the typing is updated this adds extra flexibility to the description field.

chakra-ui-steps/src/components/Step/index.tsx

Line 19 in b457fcf

description?: string;

chakra-ui-steps/src/components/StepLabel/index.tsx

Line 9 in b457fcf

description?: string;

How to modify the default style

Hi! I really liked this addon!
I have a doubt about the customization of styles, following the chakra documents and as the library is created for the lib, I think I should follow the "theme edit" of the chakra itself...

Searching in some items of the author necessarily the following option.
const Steps = { ...StepsStyleConfig, baseStyle: { // change styles here... }, };
Example.

But on my front I get a restyle of the component's styling.

I referred to modifying the theme in chackara, because modifying it in this way, it keeps the previous styles (default) of the component.
I'm confused if it's an error in my code or a bug.