work on team enrollment

src/components/sheet/slide-panel/slide-panel-field.tsx

@@ -1,6 +1,6 @@
 import { Box, Text, UnstyledButton, Flex, Stack } from "@mantine/core";
 import { CaretRightIcon } from "@phosphor-icons/react";
-import { ComponentType, useContext } from "react";
+import React, { ComponentType, useContext } from "react";
 import { SlidePanelContext } from "./slide-panel-context";
 
 interface SlidePanelFieldProps {
@@ -11,7 +11,7 @@ interface SlidePanelFieldProps {
   title: string;
   label?: string;
   placeholder?: string;
-  formatValue?: (value: any) => string;
+  formatValue?: (value: any) => string | React.ReactNode;
   componentProps?: Record<string, any>;
   withAsterisk?: boolean;
   error?: string;

src/components/sheet/slide-panel/slide-panel.tsx

@@ -167,14 +167,11 @@ const SlidePanel = ({
                 bg="var(--mantine-color-dimmed)"
                 my="xs"
               />
-
-              <Box>
-                <panelConfig.Component
-                  value={tempValue}
-                  onChange={setTempValue}
-                  {...(panelConfig.componentProps || {})}
-                />
-              </Box>
+              <panelConfig.Component
+                value={tempValue}
+                onChange={setTempValue}
+                {...(panelConfig.componentProps || {})}
+              />
             </>
           )}
         </Box>