message: fix(theme): add root to number input theme and update styles
diff: @@ -2,20 +2,26 @@ import { mode } from "@chakra-ui/theme-tools"
  import Input from "./input"
  import typography from "../foundations/typography"
  -const parts = ["field", "stepper", "stepperGroup"]
  +const parts = ["root", "field", "stepper", "stepperGroup"]
  const { variants, defaultProps } = Input
  +const baseStyleRoot = {
  + "--number-input-stepper-width": "24px",
  + "--number-input-field-padding":
  + "calc(var(--number-input-stepper-width) + 0.5rem)",
  +}
  +
  const baseStyleField = Input.baseStyle?.field
  const baseStyleStepperGroup = {
  - width: "24px",
  + width: "var(--number-input-stepper-width)",
  }
  function baseStyleStepper(props: Record<string, any>) {
  return {
  - borderLeft: "1px solid",
  - borderLeftColor: mode("inherit", "whiteAlpha.300")(props),
  + borderStart: "1px solid",
  + borderStartColor: mode("inherit", "whiteAlpha.300")(props),
  color: mode("inherit", "whiteAlpha.800")(props),
  _active: {
  bg: mode("gray.200", "whiteAlpha.300")(props),
  @@ -28,6 +34,7 @@ function baseStyleStepper(props: Record<string, any>) {
  }
  const baseStyle = (props: Record<string, any>) => ({
  + root: baseStyleRoot,
  field: baseStyleField,
  stepperGroup: baseStyleStepperGroup,
  stepper: baseStyleStepper(props),
  @@ -48,15 +55,16 @@ function getSize(size: "xs" | "sm" | "md" | "lg") {
  return {
  field: {
  ...sizeStyle.field,
  + paddingInlineEnd: "var(--number-input-field-padding)",
  verticalAlign: "top",
  },
  stepper: {
  fontSize: `calc(${resolvedFontSize} * 0.75)`,
  _first: {
  - borderTopRightRadius: radius[size],
  + borderTopEndRadius: radius[size],
  },
  _last: {
  - borderBottomRightRadius: radius[size],
  + borderBottomEndRadius: radius[size],
  mt: "-1px",
  borderTopWidth: 1,
  },
  