Chakra custom component library - responsive height={{ base: "15vh", "2xl": "30vh" }} not working

I have a custom ui library with NavBar component

function NavBar({ navItems, sticky, maxWidth, logoUrl }: NavProps_t) {
    return sticky ? (

        <Box 
        className={'sticky__nav-bar__container'}
            position={"absolute"} zIndex={1} height={{ base: "15vh", "2xl": "30vh" }} m={0}>
            <Box
                className={cn(styles['sticky__nav-bar'])}
                position={"sticky"}
                zIndex={0}
                minHeight={"5rem"}
                height={"10vh"}
                width={"100vW"}
                maxW={{ base: "100vW", "2xl": maxWidth }}
                top={0}
                left={0}>
                <ResponsiveNavBar navItems={navItems} maxWidth={maxWidth} logoUrl={logoUrl} />
            </Box>
        </Box>
    ) : <Box className={styles['non-sticky__nav-bar']}
        bg={"rgba(123, 60, 45, 0.5)"}
        position={"relative"} zIndex={1}
        top={0}
        minHeight={"5rem"}
        height={"10vh"}
        width={"100vW"}
        maxW={{ base: "100vW", "2xl": maxWidth }}
    >
        <ResponsiveNavBar navItems={navItems} maxWidth={maxWidth} logoUrl={logoUrl} />
    </Box>
}

and once its build i can see it is converted to height: { base: "15vh", "2xl": "30vh" } in line 8 code below

function N({ navItems: s, sticky: a, maxWidth: e, logoUrl: o }) {
  return a ? /* @__PURE__ */ i(
    c,
    {
      className: "sticky__nav-bar__container",
      position: "absolute",
      zIndex: 1,
      height: { base: "15vh", "2xl": "30vh" },
      m: 0,
      children: /* @__PURE__ */ i(
        c,
        {
          className: h(l["sticky__nav-bar"]),
          position: "sticky",
          zIndex: 0,
          minHeight: "5rem",
          height: "10vh",
          width: "100vW",
          maxW: { base: "100vW", "2xl": e },
          top: 0,
          left: 0,
          children: /* @__PURE__ */ i(p, { navItems: s, maxWidth: e, logoUrl: o })
        }
      )
    }
  ) : /* @__PURE__ */ i(
    c,
    {
      className: l["non-sticky__nav-bar"],
      bg: "rgba(123, 60, 45, 0.5)",
      position: "relative",
      zIndex: 1,
      top: 0,
      minHeight: "5rem",
      height: "10vh",
      width: "100vW",
      maxW: { base: "100vW", "2xl": e },
      children: /* @__PURE__ */ i(p, { navItems: s, maxWidth: e, logoUrl: o })
    }
  );
}

which is not working after using in app. when i inspect in the browser

i can see all the other styles except responsive height. I have wrapped the main app with ChakraProvider as well. wonder what i am doing wrong. thanks

The problem was that the Chakra provider was missing for the component in turn with no breakpoints configured. Adding the Context provider in the component library will fix the issue by providing default theme but will override the theme of the application that consumes this component causing theming issue. Marking the Chakra ui as peer dependency and excluding it from the roll up will ensure the theme is provided from the consuming application without theme conflict.

refer following discussion for details https://github.com/chakra-ui/chakra-ui/discussions/4534, and thanks @goutamsamal9 for helping figure it out.