update StatusBadge type and theme

src/components/StatusBadge/StatusBadge.tsx

@@ -1,4 +1,4 @@
-import { Box, chakra, useStyleConfig } from "@chakra-ui/react";
+import { Box, chakra, ChakraComponent, useStyleConfig } from "@chakra-ui/react";
 import React, { forwardRef } from "react";
 
 export const statusBadgeTypeArray = ["low", "medium", "high"] as const;
@@ -16,7 +16,14 @@ export interface StatusBadgeProps {
  * The `StatusBadge` component is used to display a visual badge for three
  * different status levels.
  */
-export const StatusBadge: React.FC<any> = chakra(
+export const StatusBadge: ChakraComponent<
+  React.ForwardRefExoticComponent<
+    StatusBadgeProps & {
+      children?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>
+  >,
+  StatusBadgeProps
+> = chakra(
   forwardRef<HTMLDivElement, React.PropsWithChildren<StatusBadgeProps>>(
     (props, ref?) => {
       const { children, className, id, level = "low", ...rest } = props;

src/theme/components/statusBadge.ts

@@ -1,38 +1,46 @@
-const StatusBadge = {
-  baseStyle: {
-    borderRadius: "base",
-    color: "ui.typography.heading",
-    display: "block",
-    fontSize: "desktop.body.body2", // slightly smaller than the default size
-    fontStyle: "italic",
-    py: "inset.extranarrow",
-    px: "inset.narrow",
-    textAlign: "center",
-    width: "fit-content",
-    _dark: {
-      backgroundColor: "dark.ui.bg.active",
-      borderLeft: "4px solid",
-      borderColor: "dark.ui.border.default",
-      color: "dark.ui.typography.heading",
-    },
+import { defineStyleConfig } from "@chakra-ui/react";
+import { defineStyle } from "@chakra-ui/system";
+
+const baseStyle = defineStyle({
+  borderRadius: "base",
+  color: "ui.typography.heading",
+  display: "block",
+  fontSize: "desktop.body.body2", // slightly smaller than the default size
+  fontStyle: "italic",
+  py: "inset.extranarrow",
+  px: "inset.narrow",
+  textAlign: "center",
+  width: "fit-content",
+  _dark: {
+    backgroundColor: "dark.ui.bg.active",
+    borderLeft: "4px solid",
+    borderColor: "dark.ui.border.default",
+    color: "dark.ui.typography.heading",
+  },
+});
+
+// Variants
+const low = defineStyle({ bg: "ui.gray.light-cool" });
+const medium = defineStyle({
+  bg: "ui.status.primary",
+  _dark: {
+    borderColor: "ui.status.primary",
   },
+});
+const high = defineStyle({
+  bg: "ui.status.secondary",
+  _dark: {
+    borderColor: "dark.ui.error.primary",
+  },
+});
+
+const StatusBadge = defineStyleConfig({
+  baseStyle,
   variants: {
-    low: {
-      bg: "ui.gray.light-cool",
-    },
-    medium: {
-      bg: "ui.status.primary",
-      _dark: {
-        borderColor: "ui.status.primary",
-      },
-    },
-    high: {
-      bg: "ui.status.secondary",
-      _dark: {
-        borderColor: "dark.ui.error.primary",
-      },
-    },
+    low,
+    medium,
+    high,
   },
-};
+});
 
 export default StatusBadge;