Adding a way to open the SearchModal

import React from "react";
import { useSearchModal } from "@depict-ai/react-ui";

const Component = () => {
  const { open } = useSearchModal({
    location: "centered",
  });

  return (
    <div>
      <button onClick={open}>Search</button>
    </div>
  );
};

import React from "react";
import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";

const App = () => {
  const ref = React.createRef<HTMLDivElement>();

  const { open } = useSearchModal({
    location: "aligned",
    alignerRef: ref,
  });

  return (
    <div>
      <ComponentAligner ref={ref} />{/* You can also pass the ref to any other existing element you want to align to, ComponentAligner is just a div with height: 100% */}
      <button onClick={open}>Search</button>
    </div>
  );
};

import React from "react";
import { useSearchField } from "@depict-ai/react-ui";

const Component = () => {
  const { SearchField } = useSearchField();

  return (
   <div>
      <SearchField />
   </div>
  );
};

import React, { useRef } from "react";
import { ComponentAligner, useSearchField } from "@depict-ai/react-ui";

const Component = () => {
  const ref = useRef(null);
  const { SearchField } = useSearchField({
    alignerRef: ref
  });

  return (
    <div>
      <ComponentAligner ref={ref} />{/* You can also pass the ref to any other existing element you want to align to, ComponentAligner is just a div with height: 100% */}
      <SearchField />
    </div>
  );
};