significant refactor

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

@@ -32,12 +32,12 @@ const SlidePanelField = ({
   const context = useContext(SlidePanelContext);
 
   if (!context) {
-    throw new Error('SlidePanelField must be used within a SlidePanel');
+    throw new Error("SlidePanelField must be used within a SlidePanel");
   }
 
   const handleClick = () => {
     if (!onChange) return;
-    
+
     context.openPanel({
       title,
       Component,
@@ -64,26 +64,51 @@ const SlidePanelField = ({
     <Box>
       <UnstyledButton
         onClick={handleClick}
-        p='sm'
+        p="sm"
         style={{
-          width: '100%',
-          border: error ? '1px solid var(--mantine-color-error)' : '1px solid var(--mantine-color-dimmed)',
-          borderRadius: 'var(--mantine-radius-md)',
-          backgroundColor: 'var(--mantine-color-body)',
-          textAlign: 'left',
+          width: "100%",
+          border: error
+            ? "1px solid var(--mantine-color-error)"
+            : "1px solid var(--mantine-color-dimmed)",
+          borderRadius: "var(--mantine-radius-md)",
+          backgroundColor: "var(--mantine-color-body)",
+          textAlign: "left",
         }}
       >
         <Flex justify="space-between" align="center">
           <Stack>
-            <Text size="sm" fw={500}>{label}{withAsterisk && <Text span size="sm" c='var(--mantine-color-error)' fw={500} ml={4}>*</Text>}</Text>
-            <Text size="sm" c='dimmed'>{displayValue()}</Text>
+            <Text size="sm" fw={500}>
+              {label}
+              {withAsterisk && (
+                <Text
+                  span
+                  size="sm"
+                  c="var(--mantine-color-error)"
+                  fw={500}
+                  ml={4}
+                >
+                  *
+                </Text>
+              )}
+            </Text>
+            <Text size="sm" c="dimmed">
+              {displayValue()}
+            </Text>
           </Stack>
-          <CaretRightIcon size={24} weight='thin' style={{ marginRight: '12px' }} />
+          <CaretRightIcon
+            size={24}
+            weight="thin"
+            style={{ marginRight: "12px" }}
+          />
         </Flex>
       </UnstyledButton>
-      {error && <Text size="xs" c='var(--mantine-color-error)' fw={500} ml={4} mt={4}>{error}</Text>}
+      {error && (
+        <Text size="xs" c="var(--mantine-color-error)" fw={500} ml={4} mt={4}>
+          {error}
+        </Text>
+      )}
     </Box>
   );
 };
 
-export { SlidePanelField };
+export { SlidePanelField };