Merge commit 'a8390532f7' as 'ai-context/workbench-ui'

ai-context/workbench-ui/src/components/common/SelectOption.tsx

@@ -0,0 +1,34 @@
+/*
+ * CRITICAL: DO NOT MODIFY THIS COMPONENT WITHOUT DESIGN AUTHORITY APPROVAL
+ *
+ * This SelectOption component is used by SelectField throughout the application.
+ * Changes to this component's interface or styling will affect all dropdown
+ * options across multiple domains. Any modifications require extensive testing
+ * and approval from the application design authority.
+ */
+
+import React, { PropsWithChildren } from "react";
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
+
+const SelectOption: React.FC<
+  PropsWithChildren<{
+    title: string;
+    badge?: React.ReactNode;
+  }>
+> = ({ title, badge, children }) => {
+  return (
+    <Box>
+      <Flex alignItems="center">
+        <Heading as="h1" size="sm" color="fg" fontWeight="bold">
+          {title}
+        </Heading>
+        {badge && badge}
+      </Flex>
+      <Text mt={1} textStyle="xs" color="fg.muted">
+        {children}
+      </Text>
+    </Box>
+  );
+};
+
+export default SelectOption;