@momentum-ui/react-collaboration/src/components/Overlay/Overlay.stories.docs.mdx

Cisco Momentum UI Framework for React Collaboration Applications

The `<Overlay />` component is used to bring attention to any provided children of itself by placing
a colored element over its parent component or the entire viewport.

Note that the render state of this component must be managed manually from within its child
components. This includes any action that is used to remove/deconstruct the `<Overlay />` component.

The default `z-index` for this component is `1000`.

Example:

```jsx
const App = () => {
  const [overlayOpen, setOverlayOpen] = useState(false);

  const toggleState = () => {
    setOverlayOpen(!overlayOpen);
  };

  return (
    <div id="app">
      <button onClick={toggleState}>Open</button>
      {overlayOpen && (
        <Overlay fullscreen>
          <button onClick={toggleState}>Close</button>
        </Overlay>
      )}
    </div>
  );
};
```