feat: allow the hiding of top picks

packages/excalidraw/components/ColorPicker/ColorPicker.scss

@@ -22,6 +22,12 @@
     @include isMobile {
       max-width: 11rem;
     }
+
+    &.color-picker-container--no-top-picks {
+      display: flex;
+      justify-content: center;
+      grid-template-columns: unset;
+    }
   }
 
   .color-picker__top-picks {

packages/excalidraw/components/ColorPicker/ColorPicker.tsx

@@ -67,6 +67,7 @@ interface ColorPickerProps {
   palette?: ColorPaletteCustom | null;
   topPicks?: ColorTuple;
   updateData: (formData?: any) => void;
+  hideTopPicks?: boolean;
 }
 
 const ColorPickerPopupContent = ({
@@ -224,17 +225,26 @@ export const ColorPicker = ({
   topPicks,
   updateData,
   appState,
+  hideTopPicks = false,
 }: ColorPickerProps) => {
   return (
     <div>
-      <div role="dialog" aria-modal="true" className="color-picker-container">
+      <div
-        <TopPicks
+        role="dialog"
-          activeColor={color}
+        aria-modal="true"
-          onChange={onChange}
+        className={clsx("color-picker-container", {
-          type={type}
+          "color-picker-container--no-top-picks": hideTopPicks,
-          topPicks={topPicks}
+        })}
-        />
+      >
-        <ButtonSeparator />
+        {!hideTopPicks && (
+          <TopPicks
+            activeColor={color}
+            onChange={onChange}
+            type={type}
+            topPicks={topPicks}
+          />
+        )}
+        {!hideTopPicks && <ButtonSeparator />}
         <Popover.Root
           open={appState.openPopup === type}
           onOpenChange={(open) => {