Revert "refactor: Extract image panel components (#684)" (#716)

This reverts commit 600f0c5.

Author: matthewlipski

package-lock.json

@@ -182,128 +182,6 @@
   color: hsl(204 20% 100%);
 }
 
-.input {
-  height: 2.5rem;
-  width: 100%;
-  border-radius: 0.375rem;
-  border-style: none;
-  background-color: hsl(204 20% 94% / 0.4);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: hsl(204 4% 0%);
-  box-shadow:
-          inset 0 0 0 1px rgba(0 0 0 / 0.1),
-          inset 0 2px 5px 0 rgba(0 0 0 / 0.05);
-}
-
-.input::placeholder {
-  color: hsl(204 4% 0% / 0.6);
-}
-
-.input:hover {
-  background-color: hsl(204 20% 94%);
-}
-
-.input:focus-visible,
-.input[data-focus-visible] {
-  outline: 2px solid hsl(204 100% 40%);
-  outline-offset: -1px;
-}
-
-:is(.dark .input) {
-  background-color: hsl(204 4% 10%);
-  color: hsl(204 20% 100%);
-  box-shadow:
-          inset 0 0 0 1px rgba(255 255 255 / 0.12),
-          inset 0 -1px 0 0 rgba(255 255 255 / 0.05),
-          inset 0 2px 5px 0 rgba(0 0 0 / 0.15);
-}
-
-:is(.dark .input)::placeholder {
-  color: hsl(204 20% 100% / 46%);
-}
-
-:is(.dark .input:hover) {
-  background-color: hsl(204 4% 8%);
-}
-
-:is(.dark .bn-image-panel) {
-  background-color: hsl(204 4% 16%);
-  box-shadow:
-          0 1px 3px 0 rgb(0 0 0 / 0.25),
-          0 1px 2px -1px rgb(0 0 0 / 0.1);
-}
-
-.tab-list {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.tab {
-  display: flex;
-  height: 2.5rem;
-  user-select: none;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  white-space: nowrap;
-  border-radius: 0.25rem;
-  border-style: none;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  text-decoration-line: none;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: hsl(204 100% 40%);
-}
-
-.tab:hover {
-  background-color: hsl(204 4% 0% / 7.5%);
-}
-
-.tab[aria-disabled="true"] {
-  opacity: 0.5;
-}
-
-.tab[aria-selected="true"] {
-  background-color: hsl(204 100% 40%);
-  color: hsl(204 20% 100%);
-}
-
-.tab:hover[aria-selected="true"] {
-  background-color: hsl(204 100% 32%);
-}
-
-.tab[data-focus-visible] {
-  outline-style: solid;
-}
-
-.tab:active,
-.tab[data-active] {
-  padding-top: 0.125rem;
-}
-
-:is(.dark .tab:hover) {
-  background-color: hsl(204 20% 100% / 0.1);
-}
-
-:is(.dark .tab[aria-selected="true"]) {
-  background-color: hsl(204 100% 40%);
-  color: hsl(204 20% 100%);
-}
-
-:is(.dark .tab:hover[aria-selected="true"]) {
-  background-color: hsl(204 100% 32%);
-}
-
-.panel {
-  padding: 0.5rem;
-}
-
 .bn-menu {
   position: relative;
   z-index: 50;
@@ -384,16 +262,3 @@
   font-weight: 500;
   opacity: 0.5;
 }
-
-.bn-image-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  border-radius: 0.5rem;
-  background-color: hsl(204 20% 100%);
-  padding: 0.5rem;
-  box-shadow:
-          0 1px 3px 0 rgb(0 0 0 / 0.1),
-          0 1px 2px -1px rgb(0 0 0 / 0.1);
-}
-

packages/react/src/ariakit/ariakit.css

@@ -15,12 +15,6 @@ import { Toolbar } from "./toolbar/Toolbar";
 import { ToolbarButton } from "./toolbar/ToolbarButton";
 import { ToolbarSelect } from "./toolbar/ToolbarSelect";
 
-import { Panel } from "./panel/Panel";
-import { PanelButton } from "./panel/PanelButton";
-import { PanelFileInput } from "./panel/PanelFileInput";
-import { PanelTab } from "./panel/PanelTab";
-import { PanelTextInput } from "./panel/PanelTextInput";
-
 export const ariakitComponents: ComponentsContextValue = {
   Form,
   TextInput,
@@ -33,11 +27,6 @@ export const ariakitComponents: ComponentsContextValue = {
   MenuDivider,
   MenuLabel,
   MenuItem,
-  Panel,
-  PanelButton,
-  PanelFileInput,
-  PanelTab,
-  PanelTextInput,
   Popover,
   PopoverContent,
   PopoverTrigger,

packages/react/src/ariakit/components.tsx

@@ -10,7 +10,7 @@ import { RiImageEditFill } from "react-icons/ri";
 import { useComponentsContext } from "../../../editor/ComponentsContext";
 import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor";
 import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks";
-import { ImagePanel } from "../../ImagePanel/ImagePanel";
+import { ImagePanel } from "../../ImagePanel/mantine/ImagePanel";
 
 export const ReplaceImageButton = () => {
   const components = useComponentsContext()!;