Vertical version causes a Using kebab-case for css properties error in console.

[huseyindeniz]

Hi and it's me again : ) (#108)

Vertical version is causing an error in console. Full error message is:

Using kebab-case for css properties in objects is not supported. Did you mean insetInlineStart? 
./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js/withEmotionCache/<@http://localhost:3000/static/js/bundle.js:1184:66
ChakraComponent@http://localhost:3000/static/js/bundle.js:51080:76
./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js/VerticalStep<@http://localhost:3000/static/js/bundle.js:3402:7
./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js/Step<@http://localhost:3000/static/js/bundle.js:3488:7
div
./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js/withEmotionCache/<@http://localhost:3000/static/js/bundle.js:1184:66
ChakraComponent@http://localhost:3000/static/js/bundle.js:51080:76
StepsProvider@http://localhost:3000/static/js/bundle.js:3027:7
./node_modules/chakra-ui-steps/dist/chakra-ui-steps.es.js/Steps<@http://localhost:3000/static/js/bundle.js:3076:107
MySteps
EnvironmentProvider@http://localhost:3000/static/js/bundle.js:48664:7
ColorModeProvider@http://localhost:3000/static/js/bundle.js:47444:7
ThemeProvider@http://localhost:3000/static/js/bundle.js:1214:64
ThemeProvider@http://localhost:3000/static/js/bundle.js:50894:7
ChakraProvider@http://localhost:3000/static/js/bundle.js:48552:7
ChakraProvider2@http://localhost:3000/static/js/bundle.js:48884:9
App

and here is my example:

App.tsx

import { ChakraProvider, extendTheme } from "@chakra-ui/react";

import { StepsTheme as Steps } from "chakra-ui-steps";
import { MySteps } from "./MySteps";

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

export const App = () => (
  <ChakraProvider theme={theme}>
    <MySteps />
  </ChakraProvider>
);

and MySteps.tsx

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

export const MySteps = () => {
  return (
    <Steps activeStep={0} orientation="vertical">
      <Step>test 1</Step>
    </Steps>
  );
};

If I remove the orientation or set it to "horizontal" then the error is gone. I believe it's related to my previous issue that I reported lately.

PS: I was planning to publish my create-react-app template for web3 soon and this "vertical steps" is used in it's main feature. When a user clicks the Connect button, I'm showing wallet connection steps in a modal. I'll downgrade this package to fix the issue temporarily and I hope it'll work. And as a feedback, the logo in error case is too "red" in latest versions :D . I mean the tone of the red is too shiny/sharp and with bold black edges the contrast make my eyes uncomfortable. I'll customize it in my package but just wanted to share it with you.
Update: I downgraded the package to the version 1.8.0 and there is no problem in that version.

[jeanverster]

Hi @huseyindeniz sorry for the delayed reply here - this should be fixed in the most recent version! Let me know if you're still running into this