🧹 Cleaning up the DnD scaffold

2021-10-01 23:41:00 -07:00
parent ebd5a8b95d
commit 75d5dc4281
73 changed files with 149 additions and 2469 deletions
--- a/declarations.d.ts
+++ b/declarations.d.ts
@@ -1,24 +0,0 @@
-declare module "*.module.css" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-declare module "*.module.scss" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-declare module "*.module.sass" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-declare module "*.module.less" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-declare module "*.module.styl" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
--- a/package.json
+++ b/package.json
@@ -19,9 +19,7 @@
    "@babel/runtime": "^7.13.17",
    "@bluelovers/fast-glob": "https://github.com/rishighan/fast-glob-v2-api.git",
    "@dnd-kit/core": "^4.0.0",
-    "@dnd-kit/modifiers": "^4.0.0",
    "@dnd-kit/sortable": "^5.0.0",
-    "@types/event-stream": "^3.3.34",
    "@types/mime-types": "^2.1.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.2",
@@ -30,7 +28,6 @@
    "@types/sharp": "^0.28.0",
    "@types/socket.io": "^3.0.2",
    "@types/socket.io-client": "^3.0.0",
-    "@types/through2": "^2.0.36",
    "airdcpp-apisocket": "^2.4.4",
    "amqplib": "^0.8.0",
    "array-sort-by": "^1.2.1",
@@ -44,12 +41,9 @@
    "compromise-sentences": "^0.3.0",
    "dayjs": "^1.10.6",
    "ellipsize": "^0.1.0",
-    "event-stream": "^4.0.1",
    "express": "^4.17.1",
    "fastest-validator": "^1.11.0",
    "final-form": "^4.20.2",
-    "fs-extra": "^9.1.0",
-    "http-response-stream": "^1.0.7",
    "jsdoc": "^3.6.7",
    "opds-extra": "^3.0.9",
    "pretty-bytes": "^5.6.0",
@@ -86,18 +80,15 @@
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "@fortawesome/fontawesome-free": "^5.15.3",
-    "@root/walk": "^1.1.0",
+    "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
    "@tsconfig/node14": "^1.0.0",
    "@types/express": "^4.17.8",
    "@types/jest": "^26.0.20",
    "@types/lodash": "^4.14.168",
-    "@types/mongoose": "^5.7.37",
    "@types/node": "^14.14.34",
-    "@types/pino": "^6.3.7",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.2",
    "@types/react-redux": "^7.1.16",
-    "@types/unzipper": "^0.10.3",
    "@typescript-eslint/eslint-plugin": "^4.17.0",
    "@typescript-eslint/parser": "^4.17.0",
    "awesome-typescript-loader": "^5.2.1",
@@ -115,7 +106,6 @@
    "concurrently": "^4.0.0",
    "connected-react-router": "^6.9.1",
    "css-loader": "^5.1.2",
-    "css-modules-typescript-loader": "^4.0.1",
    "eslint": "^7.22.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-base": "^14.2.1",
@@ -125,16 +115,16 @@
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
-    "etl": "^0.6.12",
    "express": "^4.17.1",
    "file-loader": "^6.2.0",
+    "fs-extra": "^9.1.0",
    "html-webpack-plugin": "^5.3.1",
+    "http-response-stream": "^1.0.9",
    "image-webpack-loader": "^7.0.1",
    "install": "^0.13.0",
    "jest": "^26.6.3",
    "lodash": "^4.17.21",
    "mini-css-extract-plugin": "^1.4.1",
-    "mongoose": "^5.10.11",
    "node-sass": "^5.0.0",
    "node-unrar-js": "^1.0.1",
    "nodemon": "^1.17.3",
@@ -157,7 +147,6 @@
    "style-loader": "^2.0.0",
    "tslint": "^6.1.3",
    "typescript": "^4.2.3",
-    "unzipper": "^0.10.11",
    "url-loader": "^1.0.1",
    "webpack": "^5.33.2",
    "webpack-bundle-analyzer": "^4.4.2",
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -167,7 +167,6 @@ $border-color: red;
  row-gap: 1.2em;

  .card {
-    // max-width: 500px;
    margin: 0 0 15px 0;
    .partial-rounded-card-image {
      img {
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -8,7 +8,6 @@ import AcquisitionPanel from "./AcquisitionPanel";
 import DownloadsPanel from "./DownloadsPanel";
 import SlidingPane from "react-sliding-pane";
 import Select, { components } from "react-select";
-import { RemovableItems } from "./SortableGrid/SortableGrid";

 import "react-sliding-pane/dist/react-sliding-pane.css";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
@@ -20,6 +19,26 @@ import { getComicBookDetailById } from "../actions/comicinfo.actions";
 import { detectTradePaperbacks } from "../shared/utils/tradepaperback.utils";
 import dayjs from "dayjs";
 const prettyBytes = require("pretty-bytes");
+// https://codesandbox.io/s/dndkit-sortable-image-grid-py6ve?file=/src/Grid.jsx
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+
+import { SortableItem } from "./SortableItem";
+import { Item } from "./Item";

 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -43,6 +62,16 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
  const [visible, setVisible] = useState(false);
  const [slidingPanelContentId, setSlidingPanelContentId] = useState("");

+  const [activeId, setActiveId] = useState(null);
+  const [items, setItems] = useState(["1", "2", "3"]);
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+    useSensor(TouchSensor),
+  );
+
  const comicVineSearchResults = useSelector(
    (state: RootState) => state.comicInfo.searchResults,
  );
@@ -135,6 +164,27 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
    },
  };

+  function handleDragStart(event) {
+    const { active } = event;
+
+    setActiveId(active.id);
+  }
+
+  function handleDragEnd(event) {
+    const { active, over } = event;
+
+    if (active.id !== over.id) {
+      setItems((items) => {
+        const oldIndex = items.indexOf(active.id);
+        const newIndex = items.indexOf(over.id);
+
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+
+    setActiveId(null);
+  }
+
  const openDrawerWithCVMatches = useCallback(() => {
    dispatch(fetchComicVineMatches(comicBookDetailData));
    setSlidingPanelContentId("CVMatches");
@@ -216,11 +266,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
      id: 2,
      icon: <i className="fas fa-file-archive"></i>,
      name: "Archive Operations",
-      content: (
-        <div key={2}>
-          <RemovableItems />
-        </div>
-      ),
+      content: <div key={2}></div>,
    },
    {
      id: 3,
@@ -459,6 +505,19 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
  return (
    <section className="container">
      <div className="section">
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext items={items} strategy={verticalListSortingStrategy}>
+            {items.map((id) => (
+              <SortableItem key={id} id={id} />
+            ))}
+          </SortableContext>
+          <DragOverlay>{activeId ? <Item id={activeId} /> : null}</DragOverlay>
+        </DndContext>
        {!isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && (
          <>
            <h1 className="title">{comicBookTitle}</h1>
--- a/src/client/components/Item.tsx
+++ b/src/client/components/Item.tsx
@@ -0,0 +1,6 @@
+import React, { forwardRef } from "react";
+
+// eslint-disable-next-line react/display-name
+export const Item = forwardRef(({ id, ...props }, ref) => {
+  return <div {...props} ref={ref}></div>;
+});
--- a/src/client/components/SortableGrid/Sortable.tsx
+++ b/src/client/components/SortableGrid/Sortable.tsx
@@ -1,329 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-import {
-  Announcements,
-  closestCenter,
-  CollisionDetection,
-  DragOverlay,
-  DndContext,
-  DropAnimation,
-  defaultDropAnimation,
-  KeyboardSensor,
-  Modifiers,
-  MouseSensor,
-  MeasuringConfiguration,
-  PointerActivationConstraint,
-  ScreenReaderInstructions,
-  TouchSensor,
-  UniqueIdentifier,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import {
-  arrayMove,
-  useSortable,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  SortingStrategy,
-  rectSortingStrategy,
-  AnimateLayoutChanges,
-} from "@dnd-kit/sortable";
-
-import { createRange } from "./utilities";
-import { Item, List, Wrapper } from "./components";
-
-export interface Props {
-  activationConstraint?: PointerActivationConstraint;
-  animateLayoutChanges?: AnimateLayoutChanges;
-  adjustScale?: boolean;
-  collisionDetection?: CollisionDetection;
-  Container?: any; // To-do: Fix me
-  dropAnimation?: DropAnimation | null;
-  itemCount?: number;
-  items?: string[];
-  handle?: boolean;
-  measuring?: MeasuringConfiguration;
-  modifiers?: Modifiers;
-  renderItem?: any;
-  removable?: boolean;
-  strategy?: SortingStrategy;
-  useDragOverlay?: boolean;
-  getItemStyles?(args: {
-    id: UniqueIdentifier;
-    index: number;
-    isSorting: boolean;
-    isDragOverlay: boolean;
-    overIndex: number;
-    isDragging: boolean;
-  }): React.CSSProperties;
-  wrapperStyle?(args: {
-    index: number;
-    isDragging: boolean;
-    id: string;
-  }): React.CSSProperties;
-  isDisabled?(id: UniqueIdentifier): boolean;
-}
-
-const defaultDropAnimationConfig: DropAnimation = {
-  ...defaultDropAnimation,
-  dragSourceOpacity: 0.5,
-};
-
-const screenReaderInstructions: ScreenReaderInstructions = {
-  draggable: `
-    To pick up a sortable item, press the space bar.
-    While sorting, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  `,
-};
-
-export function Sortable({
-  activationConstraint,
-  animateLayoutChanges,
-  adjustScale = false,
-  Container = List,
-  collisionDetection = closestCenter,
-  dropAnimation = defaultDropAnimationConfig,
-  getItemStyles = () => ({}),
-  handle = false,
-  itemCount = 16,
-  items: initialItems,
-  isDisabled = () => false,
-  measuring,
-  modifiers,
-  removable,
-  renderItem,
-  strategy = rectSortingStrategy,
-  useDragOverlay = true,
-  wrapperStyle = () => ({}),
-}: Props) {
-  const [items, setItems] = useState<string[]>(
-    () =>
-      initialItems ??
-      createRange<string>(itemCount, (index) => (index + 1).toString()),
-  );
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const sensors = useSensors(
-    useSensor(MouseSensor, {
-      activationConstraint,
-    }),
-    useSensor(TouchSensor, {
-      activationConstraint,
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-  const isFirstAnnouncement = useRef(true);
-  const getIndex = items.indexOf.bind(items);
-  const getPosition = (id: string) => getIndex(id) + 1;
-  const activeIndex = activeId ? getIndex(activeId) : -1;
-  const handleRemove = removable
-    ? (id: string) => setItems((items) => items.filter((item) => item !== id))
-    : undefined;
-  const announcements: Announcements = {
-    onDragStart(id) {
-      return `Picked up sortable item ${id}. Sortable item ${id} is in position ${getPosition(
-        id,
-      )} of ${items.length}`;
-    },
-    onDragOver(id, overId) {
-      // In this specific use-case, the picked up item's `id` is always the same as the first `over` id.
-      // The first `onDragOver` event therefore doesn't need to be announced, because it is called
-      // immediately after the `onDragStart` announcement and is redundant.
-      if (isFirstAnnouncement.current === true) {
-        isFirstAnnouncement.current = false;
-        return;
-      }
-
-      if (overId) {
-        return `Sortable item ${id} was moved into position ${getPosition(
-          overId,
-        )} of ${items.length}`;
-      }
-
-      return;
-    },
-    onDragEnd(id, overId) {
-      if (overId) {
-        return `Sortable item ${id} was dropped at position ${getPosition(
-          overId,
-        )} of ${items.length}`;
-      }
-
-      return;
-    },
-    onDragCancel(id) {
-      return `Sorting was cancelled. Sortable item ${id} was dropped and returned to position ${getPosition(
-        id,
-      )} of ${items.length}.`;
-    },
-  };
-
-  useEffect(() => {
-    if (!activeId) {
-      isFirstAnnouncement.current = true;
-    }
-  }, [activeId]);
-
-  return (
-    <DndContext
-      announcements={announcements}
-      screenReaderInstructions={screenReaderInstructions}
-      sensors={sensors}
-      collisionDetection={collisionDetection}
-      onDragStart={({ active }) => {
-        if (!active) {
-          return;
-        }
-
-        setActiveId(active.id);
-      }}
-      onDragEnd={({ over }) => {
-        setActiveId(null);
-
-        if (over) {
-          const overIndex = getIndex(over.id);
-          if (activeIndex !== overIndex) {
-            setItems((items) => arrayMove(items, activeIndex, overIndex));
-          }
-        }
-      }}
-      onDragCancel={() => setActiveId(null)}
-      measuring={measuring}
-      modifiers={modifiers}
-    >
-      <Wrapper center>
-        <SortableContext items={items} strategy={strategy}>
-          <Container>
-            {items.map((value, index) => (
-              <SortableItem
-                key={value}
-                id={value}
-                handle={handle}
-                index={index}
-                style={getItemStyles}
-                wrapperStyle={wrapperStyle}
-                disabled={isDisabled(value)}
-                renderItem={renderItem}
-                onRemove={handleRemove}
-                animateLayoutChanges={animateLayoutChanges}
-                useDragOverlay={useDragOverlay}
-              />
-            ))}
-          </Container>
-        </SortableContext>
-      </Wrapper>
-      {useDragOverlay
-        ? createPortal(
-            <DragOverlay
-              adjustScale={adjustScale}
-              dropAnimation={dropAnimation}
-            >
-              {activeId ? (
-                <Item
-                  value={items[activeIndex]}
-                  handle={handle}
-                  renderItem={renderItem}
-                  wrapperStyle={wrapperStyle({
-                    index: activeIndex,
-                    isDragging: true,
-                    id: items[activeIndex],
-                  })}
-                  style={getItemStyles({
-                    id: items[activeIndex],
-                    index: activeIndex,
-                    isSorting: activeId !== null,
-                    isDragging: true,
-                    overIndex: -1,
-                    isDragOverlay: true,
-                  })}
-                  dragOverlay
-                />
-              ) : null}
-            </DragOverlay>,
-            document.body,
-          )
-        : null}
-    </DndContext>
-  );
-}
-
-interface SortableItemProps {
-  animateLayoutChanges?: AnimateLayoutChanges;
-  disabled?: boolean;
-  id: string;
-  index: number;
-  handle: boolean;
-  useDragOverlay?: boolean;
-  onRemove?(id: string): void;
-  style(values: any): React.CSSProperties;
-  renderItem?(args: any): React.ReactElement;
-  wrapperStyle({
-    index,
-    isDragging,
-    id,
-  }: {
-    index: number;
-    isDragging: boolean;
-    id: string;
-  }): React.CSSProperties;
-}
-
-export function SortableItem({
-  disabled,
-  animateLayoutChanges,
-  id,
-  index,
-  handle,
-  onRemove,
-  style,
-  renderItem,
-  useDragOverlay,
-  wrapperStyle,
-}: SortableItemProps) {
-  const {
-    attributes,
-    isDragging,
-    isSorting,
-    listeners,
-    overIndex,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({
-    animateLayoutChanges,
-    id,
-    disabled,
-  });
-
-  return (
-    <Item
-      ref={setNodeRef}
-      value={id}
-      disabled={disabled}
-      dragging={isDragging}
-      sorting={isSorting}
-      handle={handle}
-      renderItem={renderItem}
-      index={index}
-      style={style({
-        index,
-        id,
-        isDragging,
-        isSorting,
-        overIndex,
-      })}
-      onRemove={onRemove ? () => onRemove(id) : undefined}
-      transform={transform}
-      transition={!useDragOverlay && isDragging ? "none" : transition}
-      wrapperStyle={wrapperStyle({ index, isDragging, id })}
-      listeners={listeners}
-      data-index={index}
-      data-id={id}
-      dragOverlay={!useDragOverlay && isDragging}
-      {...attributes}
-    />
-  );
-}
--- a/src/client/components/SortableGrid/SortableGrid.tsx
+++ b/src/client/components/SortableGrid/SortableGrid.tsx
@@ -1,141 +0,0 @@
-import React from "react";
-import { MeasuringStrategy } from "@dnd-kit/core";
-import {
-  AnimateLayoutChanges,
-  defaultAnimateLayoutChanges,
-  rectSortingStrategy,
-} from "@dnd-kit/sortable";
-
-import { Sortable, Props as SortableProps } from "./Sortable";
-import { GridContainer } from "./components";
-
-export default {
-  title: "Presets/Sortable/Grid",
-};
-
-const props: Partial<SortableProps> = {
-  adjustScale: true,
-  Container: (props: any) => <GridContainer {...props} columns={5} />,
-  strategy: rectSortingStrategy,
-  wrapperStyle: () => ({
-    width: 140,
-    height: 140,
-  }),
-};
-
-export const BasicSetup = () => <Sortable {...props} />;
-
-export const WithoutDragOverlay = () => (
-  <Sortable {...props} useDragOverlay={false} />
-);
-
-export const LargeFirstTile = () => (
-  <Sortable
-    {...props}
-    getItemStyles={({ index }) => {
-      if (index === 0) {
-        return {
-          fontSize: "2rem",
-          padding: "36px 40px",
-        };
-      }
-
-      return {};
-    }}
-    wrapperStyle={({ index }) => {
-      if (index === 0) {
-        return {
-          height: 288,
-          gridRowStart: "span 2",
-          gridColumnStart: "span 2",
-        };
-      }
-
-      return {
-        width: 140,
-        height: 140,
-      };
-    }}
-  />
-);
-
-export const VariableSizes = () => (
-  <Sortable
-    {...props}
-    itemCount={14}
-    getItemStyles={({ index }) => {
-      if (index === 0 || index === 9) {
-        return {
-          fontSize: "2rem",
-          padding: "36px 40px",
-        };
-      }
-
-      return {};
-    }}
-    wrapperStyle={({ index }) => {
-      if (index === 0 || index === 9) {
-        return {
-          height: 288,
-          gridRowStart: "span 2",
-          gridColumnStart: "span 2",
-        };
-      }
-
-      return {
-        width: 140,
-        height: 140,
-      };
-    }}
-  />
-);
-
-export const DragHandle = () => <Sortable {...props} handle />;
-
-export const ScrollContainer = () => (
-  <div
-    style={{
-      height: "50vh",
-      margin: "0 auto",
-      overflow: "auto",
-    }}
-  >
-    <Sortable {...props} />
-  </div>
-);
-
-export const PressDelay = () => (
-  <Sortable
-    {...props}
-    activationConstraint={{
-      delay: 250,
-      tolerance: 5,
-    }}
-  />
-);
-
-export const MinimumDistance = () => (
-  <Sortable
-    {...props}
-    activationConstraint={{
-      distance: 15,
-    }}
-  />
-);
-
-export const RemovableItems = () => {
-  const animateLayoutChanges: AnimateLayoutChanges = (args) =>
-    args.isSorting || args.wasDragging
-      ? defaultAnimateLayoutChanges(args)
-      : true;
-
-  return (
-    <Sortable
-      {...props}
-      animateLayoutChanges={animateLayoutChanges}
-      measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}
-      removable
-      handle={false}
-    />
-  );
-};
--- a/src/client/components/SortableGrid/components/Button/Button.module.css
+++ b/src/client/components/SortableGrid/components/Button/Button.module.css
@@ -1,27 +0,0 @@
-.Button {
-  padding: 14px 20px;
-  border: none;
-  background-color: #242836;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #f6f8ff;
-  cursor: pointer;
-  outline: none;
-  transform: scale(1);
-  transition: transform 0.2s, background 0.4s;
-
-  &:hover,
-  &:focus {
-    background-color: #2f3545;
-    transform: scale(1.02);
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 4px #4c9ffe;
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-}
--- a/src/client/components/SortableGrid/components/Button/Button.module.css.d.ts
+++ b/src/client/components/SortableGrid/components/Button/Button.module.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'Button': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/src/client/components/SortableGrid/components/Button/Button.tsx
+++ b/src/client/components/SortableGrid/components/Button/Button.tsx
@@ -1,16 +0,0 @@
-import React, {HTMLAttributes} from 'react';
-import classNames from 'classnames';
-
-import styles from './Button.module.css';
-
-export interface Props extends HTMLAttributes<HTMLButtonElement> {
-  children: React.ReactNode;
-}
-
-export function Button({children, ...props}: Props) {
-  return (
-    <button className={classNames(styles.Button)} {...props}>
-      {children}
-    </button>
-  );
-}
--- a/src/client/components/SortableGrid/components/Button/index.ts
+++ b/src/client/components/SortableGrid/components/Button/index.ts
@@ -1 +0,0 @@
-export {Button} from './Button';
--- a/src/client/components/SortableGrid/components/ConfirmModal/ConfirmModal.module.css
+++ b/src/client/components/SortableGrid/components/ConfirmModal/ConfirmModal.module.css
@@ -1,42 +0,0 @@
-.ConfirmModal {
-  --width: 250px;
-  --height: 120px;
-
-  display: flex;
-  flex-direction: column;
-  width: var(--width);
-  height: var(--height);
-  position: fixed;
-  top: calc(100vh / 2 - var(--height) / 2);
-  left: calc(100vw / 2 - var(--width) / 2);
-  border-radius: 10px;
-  box-shadow: -1px 0 15px 0 rgba(34, 33, 81, 0.01),
-    0px 15px 15px 0 rgba(34, 33, 81, 0.25);
-  padding: 15px;
-  box-sizing: border-box;
-  background-color: white;
-  text-align: center;
-  z-index: 1;
-
-  h1 {
-    flex: 1;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 20px;
-  }
-
-  button {
-    width: 50px;
-    height: 23px;
-    background: #242836;
-    color: #f6f8ff;
-    border: none;
-    border-radius: 3px;
-    margin: 0 5px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #2f3545;
-    }
-  }
-}
--- a/src/client/components/SortableGrid/components/ConfirmModal/ConfirmModal.module.css.d.ts
+++ b/src/client/components/SortableGrid/components/ConfirmModal/ConfirmModal.module.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'ConfirmModal': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/src/client/components/SortableGrid/components/ConfirmModal/ConfirmModal.tsx
+++ b/src/client/components/SortableGrid/components/ConfirmModal/ConfirmModal.tsx
@@ -1,21 +0,0 @@
-import React, {PropsWithChildren} from 'react';
-import styles from './ConfirmModal.module.css';
-
-interface Props {
-  onConfirm(): void;
-  onDeny(): void;
-}
-
-export const ConfirmModal = ({
-  onConfirm,
-  onDeny,
-  children,
-}: PropsWithChildren<Props>) => (
-  <div className={styles.ConfirmModal}>
-    <h1>{children}</h1>
-    <div>
-      <button onClick={onConfirm}>Yes</button>
-      <button onClick={onDeny}>No</button>
-    </div>
-  </div>
-);
--- a/src/client/components/SortableGrid/components/ConfirmModal/index.ts
+++ b/src/client/components/SortableGrid/components/ConfirmModal/index.ts
@@ -1 +0,0 @@
-export {ConfirmModal} from './ConfirmModal';
--- a/src/client/components/SortableGrid/components/Container/Container.module.css
+++ b/src/client/components/SortableGrid/components/Container/Container.module.css
@@ -1,103 +0,0 @@
-.Container {
-  display: flex;
-  flex-direction: column;
-  grid-auto-rows: max-content;
-  overflow: hidden;
-  box-sizing: border-box;
-  appearance: none;
-  outline: none;
-  min-width: 350px;
-  margin: 10px;
-  border-radius: 5px;
-  min-height: 200px;
-  transition: background-color 350ms ease;
-  background-color: rgba(246, 246, 246, 1);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  font-size: 1em;
-
-  ul {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: repeat(var(--columns, 1), 1fr);
-    list-style: none;
-    padding: 20px;
-    margin: 0;
-  }
-
-  &.scrollable {
-    ul {
-      overflow-y: auto;
-    }
-  }
-
-  &.placeholder {
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    color: rgba(0, 0, 0, 0.5);
-    background-color: transparent;
-    border-style: dashed;
-    border-color: rgba(0, 0, 0, 0.08);
-
-    &:hover {
-      border-color: rgba(0, 0, 0, 0.15);
-    }
-  }
-
-  &.hover {
-    background-color: rgb(235, 235, 235, 1);
-  }
-
-  &.unstyled {
-    overflow: visible;
-    background-color: transparent !important;
-    border: none !important;
-  }
-
-  &.horizontal {
-    width: 100%;
-
-    ul {
-      grid-auto-flow: column;
-    }
-  }
-
-  &.shadow {
-    box-shadow: 0 1px 10px 0 rgba(34, 33, 81, 0.1);
-  }
-
-  &:focus-visible {
-    border-color: transparent;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
-  }
-}
-
-.Header {
-  display: flex;
-  padding: 5px 20px;
-  padding-right: 8px;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #fff;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-
-  &:hover {
-    .Actions > * {
-      opacity: 1 !important;
-    }
-  }
-}
-
-.Actions {
-  display: flex;
-
-  > *:first-child:not(:last-child) {
-    opacity: 0;
-
-    &:focus-visible {
-      opacity: 1;
-    }
-  }
-}
--- a/src/client/components/SortableGrid/components/Container/Container.module.css.d.ts
+++ b/src/client/components/SortableGrid/components/Container/Container.module.css.d.ts
@@ -1,15 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'Actions': string;
-  'Container': string;
-  'Header': string;
-  'horizontal': string;
-  'hover': string;
-  'placeholder': string;
-  'scrollable': string;
-  'shadow': string;
-  'unstyled': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/src/client/components/SortableGrid/components/Container/Container.tsx
+++ b/src/client/components/SortableGrid/components/Container/Container.tsx
@@ -1,81 +0,0 @@
-import React, {forwardRef} from 'react';
-import classNames from 'classnames';
-
-import {Handle, Remove} from '../Item';
-
-import styles from './Container.module.css';
-
-export interface Props {
-  children: React.ReactNode;
-  columns?: number;
-  label?: string;
-  style?: React.CSSProperties;
-  horizontal?: boolean;
-  hover?: boolean;
-  handleProps?: React.HTMLAttributes<any>;
-  scrollable?: boolean;
-  shadow?: boolean;
-  placeholder?: boolean;
-  unstyled?: boolean;
-  onClick?(): void;
-  onRemove?(): void;
-}
-
-export const Container = forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      children,
-      columns = 1,
-      handleProps,
-      horizontal,
-      hover,
-      onClick,
-      onRemove,
-      label,
-      placeholder,
-      style,
-      scrollable,
-      shadow,
-      unstyled,
-      ...props
-    }: Props,
-    ref
-  ) => {
-    const Component = onClick ? 'button' : 'div';
-
-    return (
-      <Component
-        {...props}
-        ref={ref}
-        style={
-          {
-            ...style,
-            '--columns': columns,
-          } as React.CSSProperties
-        }
-        className={classNames(
-          styles.Container,
-          unstyled && styles.unstyled,
-          horizontal && styles.horizontal,
-          hover && styles.hover,
-          placeholder && styles.placeholder,
-          scrollable && styles.scrollable,
-          shadow && styles.shadow
-        )}
-        onClick={onClick}
-        tabIndex={onClick ? 0 : undefined}
-      >
-        {label ? (
-          <div className={styles.Header}>
-            {label}
-            <div className={styles.Actions}>
-              {onRemove ? <Remove onClick={onRemove} /> : undefined}
-              <Handle {...handleProps} />
-            </div>
-          </div>
-        ) : null}
-        {placeholder ? children : <ul>{children}</ul>}
-      </Component>
-    );
-  }
-);
--- a/src/client/components/SortableGrid/components/Container/index.ts
+++ b/src/client/components/SortableGrid/components/Container/index.ts
@@ -1,2 +0,0 @@
-export {Container} from './Container';
-export type {Props as ContainerProps} from './Container';
--- a/src/client/components/SortableGrid/components/Draggable.tsx
+++ b/src/client/components/SortableGrid/components/Draggable.tsx
@@ -1,21 +0,0 @@
-import React from "react";
-import { useDraggable } from "@dnd-kit/core";
-
-export const Draggable = (props) => {
-  const { attributes, listeners, setNodeRef, transform } = useDraggable({
-    id: "draggable",
-  });
-  const style = transform
-    ? {
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-      }
-    : undefined;
-
-  return (
-    <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
-      {props.children}
-    </button>
-  );
-};
-
-export default Draggable;
--- a/src/client/components/SortableGrid/components/Draggable/Draggable.module.css
+++ b/src/client/components/SortableGrid/components/Draggable/Draggable.module.css
@@ -1,128 +0,0 @@
-.Draggable {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  transition: transform 250ms ease;
-  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0);
-
-  button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-    min-height: 54px;
-    flex-shrink: 1;
-    appearance: none;
-    outline: none;
-    border: 0;
-    padding: 8px 18px;
-    background-color: #181a22;
-    border-radius: 5px;
-    box-shadow: var(--box-shadow);
-    transform: scale(var(--scale, 1));
-    transition: transform 250ms cubic-bezier(0.18, 0.67, 0.6, 1.22),
-      box-shadow 300ms ease;
-  }
-
-  &:not(.handle) {
-    button {
-      touch-action: none;
-      cursor: grab;
-
-      &:focus-visible:not(.active &) {
-        box-shadow: 0 0 0 3px #4c9ffe;
-      }
-    }
-  }
-
-  &.handle {
-    button {
-      --action-background: rgba(255, 255, 255, 0.1);
-
-      > svg {
-        margin-right: 5px;
-      }
-
-      > button {
-        margin-right: -10px;
-      }
-    }
-  }
-
-  img {
-    width: 140px;
-    user-select: none;
-    pointer-events: none;
-  }
-
-  label {
-    display: block;
-    flex-shrink: 1;
-    padding: 10px;
-    transition: opacity 250ms ease;
-
-    text-align: center;
-    font-size: 1rem;
-    font-weight: 300;
-    color: #8d8d8d;
-    user-select: none;
-    cursor: url('/cursor.svg'), auto;
-
-    animation-name: pulse;
-    animation-duration: 1.5s;
-    animation-delay: 2s;
-    animation-iteration-count: infinite;
-    animation-timing-function: ease;
-    animation-direction: alternate;
-  }
-
-  &.dragging {
-    z-index: 1;
-    transition: none;
-
-    * {
-      cursor: grabbing;
-    }
-
-    button {
-      --scale: 1.06;
-      --box-shadow: -1px 0 15px 0 rgba(34, 33, 81, 0.01),
-        0px 15px 15px 0 rgba(34, 33, 81, 0.25);
-
-      &:focus-visible {
-        --box-shadow: 0 0px 10px 2px #4c9ffe;
-      }
-    }
-
-    label {
-      animation: none;
-      opacity: 0;
-    }
-  }
-
-  &.dragOverlay {
-    button {
-      animation: pop 250ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-    }
-  }
-}
-
-@keyframes pulse {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes pop {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(var(--scale));
-    box-shadow: var(--box-shadow);
-  }
-}
--- a/src/client/components/SortableGrid/components/Draggable/Draggable.tsx
+++ b/src/client/components/SortableGrid/components/Draggable/Draggable.tsx
@@ -1,79 +0,0 @@
-import React, {forwardRef} from 'react';
-import classNames from 'classnames';
-import type {DraggableSyntheticListeners, Translate} from '@dnd-kit/core';
-
-import {Handle} from '../Item/components/Handle';
-
-import {
-  draggable,
-  draggableHorizontal,
-  draggableVertical,
-} from './draggable-svg';
-import styles from './Draggable.module.css';
-
-export enum Axis {
-  All,
-  Vertical,
-  Horizontal,
-}
-
-interface Props {
-  axis?: Axis;
-  dragOverlay?: boolean;
-  dragging?: boolean;
-  handle?: boolean;
-  label?: string;
-  listeners?: DraggableSyntheticListeners;
-  style?: React.CSSProperties;
-  translate?: Translate;
-}
-
-export const Draggable = forwardRef<HTMLButtonElement, Props>(
-  function Draggable(
-    {
-      axis,
-      dragOverlay,
-      dragging,
-      handle,
-      label,
-      listeners,
-      translate,
-      ...props
-    },
-    ref
-  ) {
-    return (
-      <div
-        className={classNames(
-          styles.Draggable,
-          dragOverlay && styles.dragOverlay,
-          dragging && styles.dragging,
-          handle && styles.handle
-        )}
-        style={
-          {
-            '--translate-x': `${translate?.x ?? 0}px`,
-            '--translate-y': `${translate?.y ?? 0}px`,
-          } as React.CSSProperties
-        }
-      >
-        <button
-          ref={ref}
-          {...props}
-          aria-label="Draggable"
-          data-cypress="draggable-item"
-          {...(handle ? {} : listeners)}
-          tabIndex={handle ? -1 : undefined}
-        >
-          {axis === Axis.Vertical
-            ? draggableVertical
-            : axis === Axis.Horizontal
-            ? draggableHorizontal
-            : draggable}
-          {handle ? <Handle {...(handle ? listeners : {})} /> : null}
-        </button>
-        {label ? <label>{label}</label> : null}
-      </div>
-    );
-  }
-);
--- a/src/client/components/SortableGrid/components/Draggable/draggable-svg.tsx
+++ b/src/client/components/SortableGrid/components/Draggable/draggable-svg.tsx
--- a/src/client/components/SortableGrid/components/Draggable/index.ts
+++ b/src/client/components/SortableGrid/components/Draggable/index.ts
@@ -1 +0,0 @@
-export { Axis, Draggable } from "./Draggable";
--- a/src/client/components/SortableGrid/components/Droppable.tsx
+++ b/src/client/components/SortableGrid/components/Droppable.tsx
@@ -1,19 +0,0 @@
-import React from "react";
-import { useDroppable } from "@dnd-kit/core";
-
-export const Droppable = (props) => {
-  const { isOver, setNodeRef } = useDroppable({
-    id: "droppable",
-  });
-  const style = {
-    color: isOver ? "green" : undefined,
-  };
-
-  return (
-    <div ref={setNodeRef} style={style}>
-      {props.children}
-    </div>
-  );
-};
-
-export default Droppable;
--- a/src/client/components/SortableGrid/components/Droppable/Droppable.module.css
+++ b/src/client/components/SortableGrid/components/Droppable/Droppable.module.css
@@ -1,51 +0,0 @@
-.Droppable {
-  position: relative;
-  padding-top: 80px;
-  text-align: center;
-  border-radius: 10px;
-  width: 340px;
-  height: 340px;
-  box-sizing: border-box;
-  background-color: #fff;
-  box-shadow: inset rgba(201, 211, 219, 0.5) 0 0 0 2px,
-    rgba(255, 255, 255, 0) 0 0 0 1px, rgba(201, 211, 219, 0.25) 20px 14px 24px;
-  transition: box-shadow 250ms ease;
-
-  > svg {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 200px;
-    transform: translate3d(-50%, -50%, 0);
-    opacity: 0.8;
-    transition: opacity 300ms ease, transform 200ms ease;
-    user-select: none;
-    pointer-events: none;
-  }
-
-  &.dragging {
-    > svg {
-      opacity: 0.8;
-    }
-  }
-
-  &.over {
-    box-shadow: inset #1eb99d 0 0 0 3px, rgba(201, 211, 219, 0.5) 20px 14px 24px;
-
-    > svg {
-      opacity: 1;
-    }
-
-    &.dropped {
-      box-shadow: inset rgba(201, 211, 219, 0.7) 0 0 0 3px,
-        rgba(201, 211, 219, 0.5) 20px 14px 24px;
-    }
-  }
-
-  &.dropped {
-    > svg {
-      opacity: 0.2;
-      transform: translate3d(-50%, 100%, 0) scale(0.8);
-    }
-  }
-}
--- a/src/client/components/SortableGrid/components/Droppable/Droppable.tsx
+++ b/src/client/components/SortableGrid/components/Droppable/Droppable.tsx
@@ -1,34 +0,0 @@
-import React from 'react';
-import {useDroppable, UniqueIdentifier} from '@dnd-kit/core';
-import classNames from 'classnames';
-
-import {droppable} from './droppable-svg';
-import styles from './Droppable.module.css';
-
-interface Props {
-  children: React.ReactNode;
-  dragging: boolean;
-  id: UniqueIdentifier;
-}
-
-export function Droppable({children, id, dragging}: Props) {
-  const {isOver, setNodeRef} = useDroppable({
-    id,
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={classNames(
-        styles.Droppable,
-        isOver && styles.over,
-        dragging && styles.dragging,
-        children && styles.dropped
-      )}
-      aria-label="Droppable region"
-    >
-      {children}
-      {droppable}
-    </div>
-  );
-}
--- a/src/client/components/SortableGrid/components/Droppable/droppable-svg.tsx
+++ b/src/client/components/SortableGrid/components/Droppable/droppable-svg.tsx
--- a/src/client/components/SortableGrid/components/Droppable/index.ts
+++ b/src/client/components/SortableGrid/components/Droppable/index.ts
@@ -1 +0,0 @@
-export {Droppable} from './Droppable';
--- a/src/client/components/SortableGrid/components/DroppableGrid.tsx
+++ b/src/client/components/SortableGrid/components/DroppableGrid.tsx
@@ -1,35 +0,0 @@
-import React, { useState } from "react";
-import { DndContext } from "@dnd-kit/core";
-
-import { Draggable } from "./Draggable";
-import { Droppable } from "./Droppable";
-
-export const DroppableGrid = () => {
-  const containers = ["A", "B", "C"];
-  const [parent, setParent] = useState(null);
-  const draggableMarkup = <Draggable id="draggable">Drag me</Draggable>;
-
-  return (
-    <DndContext onDragEnd={handleDragEnd}>
-      {parent === null ? draggableMarkup : null}
-
-      {containers.map((id) => (
-        // We updated the Droppable component so it would accept an `id`
-        // prop and pass it to `useDroppable`
-        <Droppable key={id} id={id}>
-          {parent === id ? draggableMarkup : "Drop here"}
-        </Droppable>
-      ))}
-    </DndContext>
-  );
-
-  function handleDragEnd(event) {
-    const { over } = event;
-
-    // If the item is dropped over a container, set it as the parent
-    // otherwise reset the parent to `null`
-    setParent(over ? over.id : null);
-  }
-};
-
-export default DroppableGrid;
--- a/src/client/components/SortableGrid/components/FloatingControls/FloatingControls.module.css
+++ b/src/client/components/SortableGrid/components/FloatingControls/FloatingControls.module.css
@@ -1,5 +0,0 @@
-.FloatingControls {
-  position: fixed;
-  top: 25px;
-  right: 25px;
-}
--- a/src/client/components/SortableGrid/components/FloatingControls/FloatingControls.module.css.d.ts
+++ b/src/client/components/SortableGrid/components/FloatingControls/FloatingControls.module.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'FloatingControls': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/src/client/components/SortableGrid/components/FloatingControls/FloatingControls.tsx
+++ b/src/client/components/SortableGrid/components/FloatingControls/FloatingControls.tsx
@@ -1,12 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import styles from './FloatingControls.module.css';
-
-export interface Props {
-  children: React.ReactNode;
-}
-
-export function FloatingControls({children}: Props) {
-  return <div className={classNames(styles.FloatingControls)}>{children}</div>;
-}
--- a/src/client/components/SortableGrid/components/FloatingControls/index.ts
+++ b/src/client/components/SortableGrid/components/FloatingControls/index.ts
@@ -1 +0,0 @@
-export {FloatingControls} from './FloatingControls';
--- a/src/client/components/SortableGrid/components/Grid/Grid.module.css
+++ b/src/client/components/SortableGrid/components/Grid/Grid.module.css
@@ -1,30 +0,0 @@
-.Grid {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: repeating-linear-gradient(
-      0deg,
-      transparent,
-      transparent calc(var(--grid-size) - 1px),
-      #ddd calc(var(--grid-size) - 1px),
-      #ddd var(--grid-size)
-    ),
-    repeating-linear-gradient(
-      -90deg,
-      transparent,
-      transparent calc(var(--grid-size) - 1px),
-      #ddd calc(var(--grid-size) - 1px),
-      #ddd var(--grid-size)
-    );
-  background-size: var(--grid-size) var(--grid-size);
-  z-index: -1;
-  pointer-events: none;
-}
-
-.RangeSlider {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-}
--- a/src/client/components/SortableGrid/components/Grid/Grid.module.css.d.ts
+++ b/src/client/components/SortableGrid/components/Grid/Grid.module.css.d.ts
@@ -1,8 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'Grid': string;
-  'RangeSlider': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/src/client/components/SortableGrid/components/Grid/Grid.tsx
+++ b/src/client/components/SortableGrid/components/Grid/Grid.tsx
@@ -1,22 +0,0 @@
-import React from 'react';
-
-import styles from './Grid.module.css';
-
-export interface Props {
-  size: number;
-  step?: number;
-  onSizeChange(size: number): void;
-}
-
-export function Grid({size}: Props) {
-  return (
-    <div
-      className={styles.Grid}
-      style={
-        {
-          '--grid-size': `${size}px`,
-        } as React.CSSProperties
-      }
-    />
-  );
-}
--- a/src/client/components/SortableGrid/components/Grid/index.ts
+++ b/src/client/components/SortableGrid/components/Grid/index.ts
@@ -1 +0,0 @@
-export {Grid} from './Grid';
--- a/src/client/components/SortableGrid/components/GridContainer/GridContainer.module.css
+++ b/src/client/components/SortableGrid/components/GridContainer/GridContainer.module.css
@@ -1,15 +0,0 @@
-.GridContainer {
-  max-width: 800px;
-  display: grid;
-  grid-template-columns: repeat(var(--col-count), 1fr);
-  grid-gap: 10px;
-  padding: 20px;
-
-  @media (max-width: 850px) {
-    grid-template-columns: repeat(calc(var(--col-count) - 1), 1fr);
-  }
-
-  @media (max-width: 650px) {
-    grid-template-columns: repeat(calc(var(--col-count) - 2), 1fr);
-  }
-}
--- a/src/client/components/SortableGrid/components/GridContainer/GridContainer.module.css.d.ts
+++ b/src/client/components/SortableGrid/components/GridContainer/GridContainer.module.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'GridContainer': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/src/client/components/SortableGrid/components/GridContainer/GridContainer.tsx
+++ b/src/client/components/SortableGrid/components/GridContainer/GridContainer.tsx
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import styles from './GridContainer.module.css';
-
-export interface Props {
-  children: React.ReactNode;
-  columns: number;
-}
-
-export function GridContainer({children, columns}: Props) {
-  return (
-    <ul
-      className={styles.GridContainer}
-      style={
-        {
-          '--col-count': columns,
-        } as React.CSSProperties
-      }
-    >
-      {children}
-    </ul>
-  );
-}
--- a/src/client/components/SortableGrid/components/GridContainer/index.ts
+++ b/src/client/components/SortableGrid/components/GridContainer/index.ts
@@ -1 +0,0 @@
-export {GridContainer} from './GridContainer';
--- a/src/client/components/SortableGrid/components/Item/Item.module.css
+++ b/src/client/components/SortableGrid/components/Item/Item.module.css
@@ -1,145 +0,0 @@
-$font-weight: 400;
-$background-color: #000;
-$border-color: #efefef;
-$text-color: #333;
-$handle-color: rgba(0, 0, 0, 0.25);
-$box-shadow-border: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05);
-$box-shadow-common: 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-$box-shadow: $box-shadow-border, $box-shadow-common;
-$focused-outline-color: #4c9ffe;
-
-@keyframes pop {
-  0% {
-    transform: scale(1);
-    box-shadow: var(--box-shadow);
-  }
-  100% {
-    transform: scale(var(--scale));
-    box-shadow: var(--box-shadow-picked-up);
-  }
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.Wrapper {
-  display: flex;
-  box-sizing: border-box;
-  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
-    scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform-origin: 0 0;
-  touch-action: manipulation;
-
-  &.fadeIn {
-    animation: fadeIn 500ms ease;
-  }
-
-  &.dragOverlay {
-    --scale: 1.05;
-    --box-shadow: $box-shadow;
-    --box-shadow-picked-up: $box-shadow-border,
-      -1px 0 15px 0 rgba(34, 33, 81, 0.01),
-      0px 15px 15px 0 rgba(34, 33, 81, 0.25);
-    z-index: 999;
-  }
-}
-
-.Item {
-  position: relative;
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  padding: 18px 20px;
-  background-color: #ddd;
-  box-shadow: $box-shadow;
-  outline: none;
-  border-radius: calc(4px / var(--scale-x, 1));
-  box-sizing: border-box;
-  list-style: none;
-  transform-origin: 50% 50%;
-
-  -webkit-tap-highlight-color: transparent;
-
-  color: $text-color;
-  font-weight: $font-weight;
-  font-size: 1rem;
-  white-space: nowrap;
-
-  transform: scale(var(--scale, 1));
-  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-
-  &:focus-visible {
-    box-shadow: 0 0px 4px 1px $focused-outline-color, $box-shadow;
-  }
-
-  &:not(.withHandle) {
-    touch-action: manipulation;
-    cursor: grab;
-  }
-
-  &.dragging:not(.dragOverlay) {
-    opacity: var(--dragging-opacity, 0.5);
-    z-index: 0;
-
-    &:focus {
-      box-shadow: $box-shadow;
-    }
-  }
-
-  &.disabled {
-    color: #999;
-    background-color: #f1f1f1;
-    &:focus {
-      box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), $box-shadow;
-    }
-    cursor: not-allowed;
-  }
-
-  &.dragOverlay {
-    cursor: inherit;
-    /* box-shadow: 0 0px 6px 2px $focused-outline-color; */
-    animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-    transform: scale(var(--scale));
-    box-shadow: var(--box-shadow-picked-up);
-    opacity: 1;
-  }
-
-  &.color:before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 0;
-    height: 100%;
-    width: 3px;
-    display: block;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-    background-color: var(--color);
-  }
-
-  &:hover {
-    .Remove {
-      visibility: visible;
-    }
-  }
-}
-
-.Remove {
-  visibility: hidden;
-}
-
-.Actions {
-  display: flex;
-  align-self: flex-start;
-  margin-top: -12px;
-  margin-left: auto;
-  margin-bottom: -15px;
-  margin-right: -10px;
-}
--- a/src/client/components/SortableGrid/components/Item/Item.tsx
+++ b/src/client/components/SortableGrid/components/Item/Item.tsx
@@ -1,150 +0,0 @@
-import React, { useEffect } from "react";
-import classNames from "classnames";
-import type { DraggableSyntheticListeners } from "@dnd-kit/core";
-import type { Transform } from "@dnd-kit/utilities";
-
-import { Handle, Remove } from "./components";
-
-import styles from "./Item.module.css";
-
-export interface Props {
-  dragOverlay?: boolean;
-  color?: string;
-  disabled?: boolean;
-  dragging?: boolean;
-  handle?: boolean;
-  height?: number;
-  index?: number;
-  fadeIn?: boolean;
-  transform?: Transform | null;
-  listeners?: DraggableSyntheticListeners;
-  sorting?: boolean;
-  style?: React.CSSProperties;
-  transition?: string | null;
-  wrapperStyle?: React.CSSProperties;
-  value: React.ReactNode;
-  onRemove?(): void;
-  renderItem?(args: {
-    dragOverlay: boolean;
-    dragging: boolean;
-    sorting: boolean;
-    index: number | undefined;
-    fadeIn: boolean;
-    listeners: DraggableSyntheticListeners;
-    ref: React.Ref<HTMLElement>;
-    style: React.CSSProperties | undefined;
-    transform: Props["transform"];
-    transition: Props["transition"];
-    value: Props["value"];
-  }): React.ReactElement;
-}
-
-export const Item = React.memo(
-  React.forwardRef<HTMLLIElement, Props>(
-    (
-      {
-        color,
-        dragOverlay,
-        dragging,
-        disabled,
-        fadeIn,
-        handle,
-        height,
-        index,
-        listeners,
-        onRemove,
-        renderItem,
-        sorting,
-        style,
-        transition,
-        transform,
-        value,
-        wrapperStyle,
-        ...props
-      },
-      ref,
-    ) => {
-      useEffect(() => {
-        if (!dragOverlay) {
-          return;
-        }
-
-        document.body.style.cursor = "grabbing";
-
-        return () => {
-          document.body.style.cursor = "";
-        };
-      }, [dragOverlay]);
-
-      return renderItem ? (
-        renderItem({
-          dragOverlay: Boolean(dragOverlay),
-          dragging: Boolean(dragging),
-          sorting: Boolean(sorting),
-          index,
-          fadeIn: Boolean(fadeIn),
-          listeners,
-          ref,
-          style,
-          transform,
-          transition,
-          value,
-        })
-      ) : (
-        <li
-          className={classNames(
-            styles.Wrapper,
-            fadeIn && styles.fadeIn,
-            sorting && styles.sorting,
-            dragOverlay && styles.dragOverlay,
-          )}
-          style={
-            {
-              ...wrapperStyle,
-              transition,
-              "--translate-x": transform
-                ? `${Math.round(transform.x)}px`
-                : undefined,
-              "--translate-y": transform
-                ? `${Math.round(transform.y)}px`
-                : undefined,
-              "--scale-x": transform?.scaleX
-                ? `${transform.scaleX}`
-                : undefined,
-              "--scale-y": transform?.scaleY
-                ? `${transform.scaleY}`
-                : undefined,
-              "--index": index,
-              "--color": color,
-            } as React.CSSProperties
-          }
-          ref={ref}
-        >
-          <div
-            className={classNames(
-              styles.Item,
-              dragging && styles.dragging,
-              handle && styles.withHandle,
-              dragOverlay && styles.dragOverlay,
-              disabled && styles.disabled,
-              color && styles.color,
-            )}
-            style={style}
-            data-cypress="draggable-item"
-            {...(!handle ? listeners : undefined)}
-            {...props}
-            tabIndex={!handle ? 0 : undefined}
-          >
-            {value}
-            <span className={styles.Actions}>
-              {onRemove ? (
-                <Remove className={styles.Remove} onClick={onRemove} />
-              ) : null}
-              {handle ? <Handle {...listeners} /> : null}
-            </span>
-          </div>
-        </li>
-      );
-    },
-  ),
-);
--- a/src/client/components/SortableGrid/components/Item/components/Action/Action.module.css
+++ b/src/client/components/SortableGrid/components/Item/components/Action/Action.module.css
@@ -1,50 +0,0 @@
-$focused-outline-color: #4c9ffe;
-
-.Action {
-  display: flex;
-  width: 12px;
-  padding: 15px;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  touch-action: none;
-  cursor: var(--cursor, pointer);
-  border-radius: 5px;
-  border: none;
-  outline: none;
-  appearance: none;
-  background-color: transparent;
-  -webkit-tap-highlight-color: transparent;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--action-background, rgba(0, 0, 0, 0.05));
-
-      svg {
-        fill: #6f7b88;
-      }
-    }
-  }
-
-  svg {
-    flex: 0 0 auto;
-    margin: auto;
-    height: 100%;
-    overflow: visible;
-    fill: #919eab;
-  }
-
-  &:active {
-    background-color: var(--background, rgba(0, 0, 0, 0.05));
-
-    svg {
-      fill: var(--fill, #788491);
-    }
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0),
-      0 0px 0px 2px $focused-outline-color;
-  }
-}
--- a/src/client/components/SortableGrid/components/Item/components/Action/Action.module.css.d.ts
+++ b/src/client/components/SortableGrid/components/Item/components/Action/Action.module.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'Action': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/src/client/components/SortableGrid/components/Item/components/Action/Action.tsx
+++ b/src/client/components/SortableGrid/components/Item/components/Action/Action.tsx
@@ -1,30 +0,0 @@
-import React, {CSSProperties} from 'react';
-import classNames from 'classnames';
-
-import styles from './Action.module.css';
-
-export interface Props extends React.HTMLAttributes<HTMLButtonElement> {
-  active?: {
-    fill: string;
-    background: string;
-  };
-  cursor?: CSSProperties['cursor'];
-}
-
-export function Action({active, className, cursor, style, ...props}: Props) {
-  return (
-    <button
-      {...props}
-      className={classNames(styles.Action, className)}
-      tabIndex={0}
-      style={
-        {
-          ...style,
-          cursor,
-          '--fill': active?.fill,
-          '--background': active?.background,
-        } as CSSProperties
-      }
-    />
-  );
-}
--- a/src/client/components/SortableGrid/components/Item/components/Action/index.ts
+++ b/src/client/components/SortableGrid/components/Item/components/Action/index.ts
@@ -1,2 +0,0 @@
-export {Action} from './Action';
-export type {Props as ActionProps} from './Action';
--- a/src/client/components/SortableGrid/components/Item/components/Handle/Handle.tsx
+++ b/src/client/components/SortableGrid/components/Item/components/Handle/Handle.tsx
@@ -1,13 +0,0 @@
-import React from 'react';
-
-import {Action, ActionProps} from '../Action';
-
-export function Handle(props: ActionProps) {
-  return (
-    <Action cursor="grab" data-cypress="draggable-handle" {...props}>
-      <svg viewBox="0 0 20 20" width="12">
-        <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
-      </svg>
-    </Action>
-  );
-}
--- a/src/client/components/SortableGrid/components/Item/components/Handle/index.ts
+++ b/src/client/components/SortableGrid/components/Item/components/Handle/index.ts
@@ -1 +0,0 @@
-export {Handle} from './Handle';
--- a/src/client/components/SortableGrid/components/Item/components/Remove/Remove.tsx
+++ b/src/client/components/SortableGrid/components/Item/components/Remove/Remove.tsx
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import {Action, ActionProps} from '../Action';
-
-export function Remove(props: ActionProps) {
-  return (
-    <Action
-      {...props}
-      active={{
-        fill: 'rgba(255, 70, 70, 0.95)',
-        background: 'rgba(255, 70, 70, 0.1)',
-      }}
-    >
-      <svg width="8" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-        <path d="M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" />
-      </svg>
-    </Action>
-  );
-}
--- a/src/client/components/SortableGrid/components/Item/components/Remove/index.ts
+++ b/src/client/components/SortableGrid/components/Item/components/Remove/index.ts
@@ -1 +0,0 @@
-export {Remove} from './Remove';
--- a/src/client/components/SortableGrid/components/Item/components/index.ts
+++ b/src/client/components/SortableGrid/components/Item/components/index.ts
@@ -1,3 +0,0 @@
-export {Action} from './Action';
-export {Handle} from './Handle';
-export {Remove} from './Remove';
--- a/src/client/components/SortableGrid/components/Item/index.ts
+++ b/src/client/components/SortableGrid/components/Item/index.ts
@@ -1,2 +0,0 @@
-export {Item} from './Item';
-export {Action, Handle, Remove} from './components';
--- a/src/client/components/SortableGrid/components/List/List.module.css
+++ b/src/client/components/SortableGrid/components/List/List.module.css
@@ -1,25 +0,0 @@
-.List {
-  display: grid;
-  grid-auto-rows: max-content;
-  box-sizing: border-box;
-  min-width: 350px;
-  grid-gap: 10px;
-  padding: 20px;
-  padding-bottom: 0;
-  margin: 10px;
-  border-radius: 5px;
-  min-height: 200px;
-  transition: background-color 350ms ease;
-  grid-template-columns: repeat(var(--columns, 1), 1fr);
-
-  &:after {
-    content: '';
-    height: 10px;
-    grid-column-start: span var(--columns, 1);
-  }
-
-  &.horizontal {
-    width: 100%;
-    grid-auto-flow: column;
-  }
-}
--- a/src/client/components/SortableGrid/components/List/List.module.css.d.ts
+++ b/src/client/components/SortableGrid/components/List/List.module.css.d.ts
@@ -1,8 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'List': string;
-  'horizontal': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/src/client/components/SortableGrid/components/List/List.tsx
+++ b/src/client/components/SortableGrid/components/List/List.tsx
@@ -1,30 +0,0 @@
-import React, {forwardRef} from 'react';
-import classNames from 'classnames';
-
-import styles from './List.module.css';
-
-export interface Props {
-  children: React.ReactNode;
-  columns?: number;
-  style?: React.CSSProperties;
-  horizontal?: boolean;
-}
-
-export const List = forwardRef<HTMLUListElement, Props>(
-  ({children, columns = 1, horizontal, style}: Props, ref) => {
-    return (
-      <ul
-        ref={ref}
-        style={
-          {
-            ...style,
-            '--columns': columns,
-          } as React.CSSProperties
-        }
-        className={classNames(styles.List, horizontal && styles.horizontal)}
-      >
-        {children}
-      </ul>
-    );
-  }
-);
--- a/src/client/components/SortableGrid/components/List/index.ts
+++ b/src/client/components/SortableGrid/components/List/index.ts
@@ -1 +0,0 @@
-export {List} from './List';
--- a/src/client/components/SortableGrid/components/OverflowWrapper/OverflowWrapper.module.css
+++ b/src/client/components/SortableGrid/components/OverflowWrapper/OverflowWrapper.module.css
@@ -1,8 +0,0 @@
-.OverflowWrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  overflow: hidden;
-}
--- a/src/client/components/SortableGrid/components/OverflowWrapper/OverflowWrapper.module.css.d.ts
+++ b/src/client/components/SortableGrid/components/OverflowWrapper/OverflowWrapper.module.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'OverflowWrapper': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/src/client/components/SortableGrid/components/OverflowWrapper/OverflowWrapper.tsx
+++ b/src/client/components/SortableGrid/components/OverflowWrapper/OverflowWrapper.tsx
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import styles from './OverflowWrapper.module.css';
-
-interface Props {
-  children: React.ReactNode;
-}
-
-export function OverflowWrapper({children}: Props) {
-  return <div className={styles.OverflowWrapper}>{children}</div>;
-}
--- a/src/client/components/SortableGrid/components/OverflowWrapper/index.ts
+++ b/src/client/components/SortableGrid/components/OverflowWrapper/index.ts
@@ -1 +0,0 @@
-export {OverflowWrapper} from './OverflowWrapper';
--- a/src/client/components/SortableGrid/components/Wrapper/Wrapper.module.css
+++ b/src/client/components/SortableGrid/components/Wrapper/Wrapper.module.css
@@ -1,11 +0,0 @@
-.Wrapper {
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 20px;
-  justify-content: flex-start;
-
-  &.center {
-    justify-content: center;
-  }
-}
--- a/src/client/components/SortableGrid/components/Wrapper/Wrapper.module.css.d.ts
+++ b/src/client/components/SortableGrid/components/Wrapper/Wrapper.module.css.d.ts
@@ -1,8 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'Wrapper': string;
-  'center': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/src/client/components/SortableGrid/components/Wrapper/Wrapper.tsx
+++ b/src/client/components/SortableGrid/components/Wrapper/Wrapper.tsx
@@ -1,21 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import styles from './Wrapper.module.css';
-
-interface Props {
-  children: React.ReactNode;
-  center?: boolean;
-  style?: React.CSSProperties;
-}
-
-export function Wrapper({children, center, style}: Props) {
-  return (
-    <div
-      className={classNames(styles.Wrapper, center && styles.center)}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}
--- a/src/client/components/SortableGrid/components/Wrapper/index.ts
+++ b/src/client/components/SortableGrid/components/Wrapper/index.ts
@@ -1 +0,0 @@
-export {Wrapper} from './Wrapper';
--- a/src/client/components/SortableGrid/components/index.ts
+++ b/src/client/components/SortableGrid/components/index.ts
@@ -1,13 +0,0 @@
-export { Button } from "./Button";
-export { ConfirmModal } from "./ConfirmModal";
-export { Container } from "./Container";
-export type { ContainerProps } from "./Container";
-export { Draggable } from "./Draggable";
-export { Droppable } from "./Droppable";
-export { Item, Action, Handle, Remove } from "./Item";
-export { FloatingControls } from "./FloatingControls";
-export { Grid } from "./Grid";
-export { GridContainer } from "./GridContainer";
-export { List } from "./List";
-export { OverflowWrapper } from "./OverflowWrapper";
-export { Wrapper } from "./Wrapper";
--- a/src/client/components/SortableGrid/utilities/createRange.ts
+++ b/src/client/components/SortableGrid/utilities/createRange.ts
@@ -1,8 +0,0 @@
-const defaultInitializer = (index: number) => index;
-
-export function createRange<T = number>(
-  length: number,
-  initializer: (index: number) => any = defaultInitializer
-): T[] {
-  return [...new Array(length)].map((_, index) => initializer(index));
-}
--- a/src/client/components/SortableGrid/utilities/index.ts
+++ b/src/client/components/SortableGrid/utilities/index.ts
@@ -1 +0,0 @@
-export {createRange} from './createRange';
--- a/src/client/components/SortableItem.tsx
+++ b/src/client/components/SortableItem.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+import { Item } from "./Item";
+
+export function SortableItem(props) {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: props.id });
+
+  const backgroundColor =
+    props.id == 1 ? "Orange" : props.id == 2 ? "pink" : "gray";
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    height: 100,
+    width: 100,
+    border: "2px solid black",
+    backgroundColor,
+    borderRadius: 10,
+    touchAction: "none",
+    margin: 20,
+  };
+
+  return <Item ref={setNodeRef} style={style} {...attributes} {...listeners} />;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,11 +15,6 @@
      "dom.iterable",
      "esnext",
      "webworker"
-    ],
-    "plugins": [
-      {
-        "name": "typescript-plugin-css-modules"
-      }
    ]
  },
  "settings": {
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -39,22 +39,19 @@ module.exports = {
        loader: "source-map-loader",
      },
      {
-        test: /\.css$/,
-        use: [
-          { loader: "style-loader" },
-          {
-            loader: "css-loader",
-            options: {
-              modules: true,
-              importLoaders: 1,
-              sourceMap: true,
-            },
-          },
-        ],
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
      },
      {
-        test: /\.(scss|sass)$/,
-        use: ["style-loader", "css-loader", "sass-loader"],
+        test: /\.s[ac]ss$/i,
+        use: [
+          // Creates `style` nodes from JS strings
+          "style-loader",
+          // Translates CSS into CommonJS
+          "css-loader",
+          // Compiles Sass to CSS
+          "sass-loader",
+        ],
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i,
--- a/yarn.lock
+++ b/yarn.lock
@@ -1051,14 +1051,6 @@
    "@dnd-kit/utilities" "^3.0.0"
    tslib "^2.0.0"

-"@dnd-kit/modifiers@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/modifiers/-/modifiers-4.0.0.tgz#d1577b806b2319f14a1a0a155f270e672cfca636"
-  integrity sha512-4OkNTamneH9u3YMJqG6yJ6cwFoEd/4yY9BF39TgmDh9vyMK2MoPZFVAV0vOEm193ZYsPczq3Af5tJFtJhR9jJQ==
-  dependencies:
-    "@dnd-kit/utilities" "^3.0.0"
-    tslib "^2.0.0"
-
 "@dnd-kit/sortable@^5.0.0":
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/@dnd-kit/sortable/-/sortable-5.0.0.tgz#33841fcbc2f2490aaae42906b7497a2033242faa"
@@ -1559,11 +1551,6 @@
  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.20.tgz#111b5db0f501aa89b05076fa31f0ea0e0c292cd3"
  integrity sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q==

-"@root/walk@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@root/walk/-/walk-1.1.0.tgz#784d81e8b8d3fb3bedbb0e18952e4ea577e3796a"
-  integrity sha512-FfXPAta9u2dBuaXhPRawBcijNC9rmKVApmbi6lIZyg36VR/7L02ytxoY5K/14PJlHqiBUoYII73cTlekdKTUOw==
-
 "@sindresorhus/is@^0.7.0":
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@@ -1583,6 +1570,17 @@
  dependencies:
    "@sinonjs/commons" "^1.7.0"

+"@teamsupercell/typings-for-css-modules-loader@^2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@teamsupercell/typings-for-css-modules-loader/-/typings-for-css-modules-loader-2.5.1.tgz#9a8c5f9667de5edbc18a5e5d4c1a5c38a09ca004"
+  integrity sha512-8Dz/2awNbkrFHf3IpF8YGUPniXAZW/z7OTiosO+xucIU1+jVg/cT4uyGZ7z9cmAsnExsxq4igazxwgGBXVpUgA==
+  dependencies:
+    camelcase "^5.3.1"
+    loader-utils "1.2.3"
+    schema-utils "^2.0.1"
+  optionalDependencies:
+    prettier "*"
+
 "@tootallnate/once@1":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -1646,20 +1644,6 @@
    "@types/connect" "*"
    "@types/node" "*"

-"@types/bson@*":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@types/bson/-/bson-4.2.0.tgz#a2f71e933ff54b2c3bf267b67fa221e295a33337"
-  integrity sha512-ELCPqAdroMdcuxqwMgUpifQyRoTpyYCNr1V9xKyF40VsBobsj+BbWNRvwGchMgBPGqkw655ypkjj2MEF5ywVwg==
-  dependencies:
-    bson "*"
-
-"@types/bson@1.x || 4.0.x":
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/@types/bson/-/bson-4.0.5.tgz#9e0e1d1a6f8866483f96868a9b33bc804926b1fc"
-  integrity sha512-vVLwMUqhYJSQ/WKcE60eFqcyuWse5fGH+NMAXHuKrUAPoryq3ATxk5o4bgYNtg5aOM4APVg7Hnb3ASqUYG0PKg==
-  dependencies:
-    "@types/node" "*"
-
 "@types/component-emitter@^1.2.10":
  version "1.2.10"
  resolved "https://registry.yarnpkg.com/@types/component-emitter/-/component-emitter-1.2.10.tgz#ef5b1589b9f16544642e473db5ea5639107ef3ea"
@@ -1703,13 +1687,6 @@
  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
  integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==

-"@types/event-stream@^3.3.34":
-  version "3.3.34"
-  resolved "https://registry.yarnpkg.com/@types/event-stream/-/event-stream-3.3.34.tgz#104bcedd5c61f90917b734bde04e61c6e64f03e1"
-  integrity sha512-LLiivgWKii4JeMzFy3trrxqkRrVSdue8WmbXyHuSJLwNrhIQU5MTrc65jhxEPwMyh5HR1xevSdD+k2nnSRKw9g==
-  dependencies:
-    "@types/node" "*"
-
 "@types/express-serve-static-core@^4.17.18":
  version "4.17.24"
  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.24.tgz#ea41f93bf7e0d59cd5a76665068ed6aab6815c07"
@@ -1819,21 +1796,6 @@
  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==

-"@types/mongodb@^3.5.27":
-  version "3.6.20"
-  resolved "https://registry.yarnpkg.com/@types/mongodb/-/mongodb-3.6.20.tgz#b7c5c580644f6364002b649af1c06c3c0454e1d2"
-  integrity sha512-WcdpPJCakFzcWWD9juKoZbRtQxKIMYF/JIAM4JrNHrMcnJL6/a2NWjXxW7fo9hxboxxkg+icff8d7+WIEvKgYQ==
-  dependencies:
-    "@types/bson" "*"
-    "@types/node" "*"
-
-"@types/mongoose@^5.7.37":
-  version "5.11.97"
-  resolved "https://registry.yarnpkg.com/@types/mongoose/-/mongoose-5.11.97.tgz#80b0357f3de6807eb597262f52e49c3e13ee14d8"
-  integrity sha512-cqwOVYT3qXyLiGw7ueU2kX9noE8DPGRY6z8eUxudhXY8NZ7DMKYAxyZkLSevGfhCX3dO/AoX5/SO9lAzfjon0Q==
-  dependencies:
-    mongoose "*"
-
 "@types/node@*", "@types/node@>=10.0.0":
  version "16.10.1"
  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.10.1.tgz#f3647623199ca920960006b3dccf633ea905f243"
@@ -1849,30 +1811,6 @@
  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
  integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==

-"@types/pino-pretty@*":
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/@types/pino-pretty/-/pino-pretty-4.7.1.tgz#2ce3f56f3cf4f9632374419d616ae2e6c933b935"
-  integrity sha512-l1ntNXdpVWsnPYUk5HyO5Lxfr38zLCgxVfEn/9Zhhm+nGF04/BiIou/m8XPwvoVZLV+livUo79VdHXMJPfUYxA==
-  dependencies:
-    "@types/pino" "*"
-
-"@types/pino-std-serializers@*":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@types/pino-std-serializers/-/pino-std-serializers-2.4.1.tgz#f8bd52a209c8b3c97d1533b1ba27f57c816382bf"
-  integrity sha512-17XcksO47M24IVTVKPeAByWUd3Oez7EbIjXpSbzMPhXVzgjGtrOa49gKBwxH9hb8dKv58OelsWQ+A1G1l9S3wQ==
-  dependencies:
-    "@types/node" "*"
-
-"@types/pino@*", "@types/pino@^6.3.7":
-  version "6.3.11"
-  resolved "https://registry.yarnpkg.com/@types/pino/-/pino-6.3.11.tgz#83652799e76b3ad692aaf68f6fbf994e83af5db2"
-  integrity sha512-S7+fLONqSpHeW9d7TApUqO6VN47KYgOXhCNKwGBVLHObq8HhaAYlVqUNdfnvoXjCMiwE5xcPm/5R2ZUh8bgaXQ==
-  dependencies:
-    "@types/node" "*"
-    "@types/pino-pretty" "*"
-    "@types/pino-std-serializers" "*"
-    sonic-boom "^2.1.0"
-
 "@types/prettier@^2.0.0":
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.0.tgz#900b13362610ccd3570fb6eefb911a6732973d00"
@@ -1987,38 +1925,11 @@
  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
  integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==

-"@types/through2@^2.0.36":
-  version "2.0.36"
-  resolved "https://registry.yarnpkg.com/@types/through2/-/through2-2.0.36.tgz#35fda0db635827d44c0e08e2c94653e647574a00"
-  integrity sha512-vuifQksQHJXhV9McpVsXKuhnf3lsoX70PnhcqIAbs9dqLH2NgrGz0DzZPDY3+Yh6eaRqcE1gnCQ6QhBn1/PT5A==
-  dependencies:
-    "@types/node" "*"
-
-"@types/unzipper@^0.10.3":
-  version "0.10.4"
-  resolved "https://registry.yarnpkg.com/@types/unzipper/-/unzipper-0.10.4.tgz#db5be3e1f7d37fdfae290024ffe4f46bdcfa47f2"
-  integrity sha512-mryXpAwwQadmfjKWoR7NXnELZVlU90xTON1v3Pq2AcOmuAPFkPh09E0X8fpbx2zofoR5zmOIxGqmWOhD0qXE7g==
-  dependencies:
-    "@types/node" "*"
-
-"@types/webidl-conversions@*":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@types/webidl-conversions/-/webidl-conversions-6.1.1.tgz#e33bc8ea812a01f63f90481c666334844b12a09e"
-  integrity sha512-XAahCdThVuCFDQLT7R7Pk/vqeObFNL3YqRyFZg+AqAP/W1/w3xHaIxuW7WszQqTbIBOPRcItYJIou3i/mppu3Q==
-
 "@types/whatwg-streams@^0.0.7":
  version "0.0.7"
  resolved "https://registry.yarnpkg.com/@types/whatwg-streams/-/whatwg-streams-0.0.7.tgz#28bfe73dc850562296367249c4b32a50db81e9d3"
  integrity sha512-6sDiSEP6DWcY2ZolsJ2s39ZmsoGQ7KVwBDI3sESQsEm9P2dHTcqnDIHRZFRNtLCzWp7hCFGqYbw5GyfpQnJ01A==

-"@types/whatwg-url@^8.2.1":
-  version "8.2.1"
-  resolved "https://registry.yarnpkg.com/@types/whatwg-url/-/whatwg-url-8.2.1.tgz#f1aac222dab7c59e011663a0cb0a3117b2ef05d4"
-  integrity sha512-2YubE1sjj5ifxievI5Ge1sckb9k/Er66HyR2c+3+I6VDUUg1TLPdYYTEbQ+DjRkS4nTxMJhgWfSfMRD2sl2EYQ==
-  dependencies:
-    "@types/node" "*"
-    "@types/webidl-conversions" "*"
-
 "@types/xmldom@^0.1.31":
  version "0.1.31"
  resolved "https://registry.yarnpkg.com/@types/xmldom/-/xmldom-0.1.31.tgz#519b647cfc66debf82cdf50e49763c8fdee553d6"
@@ -3209,14 +3120,6 @@ bl@^1.0.0:
    readable-stream "^2.3.5"
    safe-buffer "^5.1.1"

-bl@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-2.2.1.tgz#8c11a7b730655c5d56898cdc871224f40fd901d5"
-  integrity sha512-6Pesp1w0DEX1N550i/uGV/TqucVL4AM/pgThFSN/Qq9si1/DF9aIHs1BxD8V/QU0HoeHO6cQRTAuYnLPKq1e4g==
-  dependencies:
-    readable-stream "^2.3.5"
-    safe-buffer "^5.1.1"
-
 bl@^4.0.3:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -3226,12 +3129,7 @@ bl@^4.0.3:
    inherits "^2.0.4"
    readable-stream "^3.4.0"

-bluebird@3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
-  integrity sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA==
-
-bluebird@^3, bluebird@^3.4.7, bluebird@^3.7.2, bluebird@~3.7.2:
+bluebird@^3, bluebird@^3.4.7, bluebird@^3.7.2:
  version "3.7.2"
  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -3241,11 +3139,6 @@ bluebird@~3.4.1:
  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.7.tgz#f72d760be09b7f76d08ed8fae98b289a8d05fab3"
  integrity sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM=

-bluebird@~3.5.0:
-  version "3.5.5"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
-  integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==
-
 body-parser@1.19.0, body-parser@^1.19.0:
  version "1.19.0"
  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
@@ -3351,18 +3244,6 @@ bser@2.1.1:
  dependencies:
    node-int64 "^0.4.0"

-bson@*, bson@^4.2.2, bson@^4.5.1:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/bson/-/bson-4.5.2.tgz#567b4ee94372d5284a4d6c47fb6e1cc711ae76ba"
-  integrity sha512-8CEMJpwc7qlQtrn2rney38jQSEeMar847lz0LyitwRmVknAW8iHXrzW4fTjHfyWm0E3sukyD/zppdH+QU1QefA==
-  dependencies:
-    buffer "^5.6.0"
-
-bson@^1.1.4:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/bson/-/bson-1.1.6.tgz#fb819be9a60cd677e0853aee4ca712a785d6618a"
-  integrity sha512-EvVNVeGo4tHxwi8L6bPj3y3itEvStdwvvlojVxxbyYfoaxJ6keLgrTuKdyfEAszFK+H3olzBuafE0yoh0D1gdg==
-
 buffer-alloc-unsafe@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
@@ -3406,7 +3287,7 @@ buffer-more-ints@~1.0.0:
  resolved "https://registry.yarnpkg.com/buffer-more-ints/-/buffer-more-ints-1.0.0.tgz#ef4f8e2dddbad429ed3828a9c55d44f05c611422"
  integrity sha512-EMetuGFz5SLsT0QTnXzINh4Ksr+oo4i+UGTXEshiGCQWnsgSs7ZhJ8fzlwQ+OzEMs0MpDAMr1hxnblp5a4vcHg==

-buffer@^5.2.1, buffer@^5.5.0, buffer@^5.6.0:
+buffer@^5.2.1, buffer@^5.5.0:
  version "5.7.1"
  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -4338,14 +4219,6 @@ css-loader@^5.1.2:
    schema-utils "^3.0.0"
    semver "^7.3.5"

-css-modules-typescript-loader@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/css-modules-typescript-loader/-/css-modules-typescript-loader-4.0.1.tgz#0b818cf647fefd8f9fb3d4469374e69ab1e72742"
-  integrity sha512-vXrUAwPGcRaopnGdg7I5oqv/NSSKQRN5L80m3f49uSGinenU5DTNsMFHS+2roh5tXqpY5+yAAKAl7A2HDvumzg==
-  dependencies:
-    line-diff "^2.0.1"
-    loader-utils "^1.2.3"
-
 css-select-base-adapter@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@@ -4432,17 +4305,6 @@ csstype@^3.0.2:
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==

-csv-parser@~1.8.0:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/csv-parser/-/csv-parser-1.8.1.tgz#a0692fd988157d6a383edaa325f3019e533c5f16"
-  integrity sha1-oGkv2YgVfWo4PtqjJfMBnlM8XxY=
-  dependencies:
-    generate-function "^1.0.1"
-    generate-object-property "^1.0.0"
-    inherits "^2.0.1"
-    minimist "^0.2.0"
-    ndjson "^1.4.0"
-
 currently-unhandled@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -4515,14 +4377,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9, debug@~2.6.
  dependencies:
    ms "2.0.0"

-debug@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
-  dependencies:
-    ms "2.0.0"
-
-debug@4, debug@4.x, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@~4.3.1, debug@~4.3.2:
+debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@~4.3.1, debug@~4.3.2:
  version "4.3.2"
  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
@@ -4724,11 +4579,6 @@ delegates@^1.0.0:
  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=

-denque@^1.4.1, denque@^1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/denque/-/denque-1.5.1.tgz#07f670e29c9a78f8faecb2566a1e2c11929c5cbf"
-  integrity sha512-XwE+iZ4D6ZUB7mfYRMb5wByE8L74HCn30FBN7sWnXksWc1LO1bPDl67pBR9o/kC4z/xSNAwkMYcGgqDV3BE3Hw==
-
 depd@^1.1.2, depd@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -4968,7 +4818,7 @@ duplexer3@^0.1.4:
  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
  integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=

-duplexer@^0.1.1, duplexer@^0.1.2, duplexer@~0.1.1:
+duplexer@^0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
@@ -5021,6 +4871,11 @@ emoji-regex@^9.0.0:
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==

+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
 emojis-list@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
@@ -5497,30 +5352,6 @@ etag@~1.8.1:
  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=

-etl@^0.6.12:
-  version "0.6.12"
-  resolved "https://registry.yarnpkg.com/etl/-/etl-0.6.12.tgz#c13d5849289935bbe7030c10c6415c18359b45f0"
-  integrity sha512-OJSq36CVoKTLp4/vPSaPI6KhBoIghBngpB/9qAm03t6hsJ2z5aN5kZEGtMfQpXgYXvE6wn0VQJKEFftiK3v5Rg==
-  dependencies:
-    bluebird "~3.5.0"
-    csv-parser "~1.8.0"
-    duplexer2 "~0.1.4"
-    moment "~2.21.0"
-    streamz "~1.8.10"
-
-event-stream@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-4.0.1.tgz#4092808ec995d0dd75ea4580c1df6a74db2cde65"
-  integrity sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==
-  dependencies:
-    duplexer "^0.1.1"
-    from "^0.1.7"
-    map-stream "0.0.7"
-    pause-stream "^0.0.11"
-    split "^1.0.1"
-    stream-combiner "^0.2.2"
-    through "^2.3.8"
-
 eventemitter3@^4.0.0:
  version "4.0.7"
  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -6128,11 +5959,6 @@ from2@^2.1.1:
    inherits "^2.0.1"
    readable-stream "^2.0.0"

-from@^0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
-  integrity sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=
-
 fs-constants@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -6234,18 +6060,6 @@ gaze@^1.0.0:
  dependencies:
    globule "^1.0.0"

-generate-function@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-1.1.0.tgz#54c21b080192b16d9877779c5bb81666e772365f"
-  integrity sha1-VMIbCAGSsW2Yd3ecW7gWZudyNl8=
-
-generate-object-property@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
-  integrity sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=
-  dependencies:
-    is-property "^1.0.0"
-
 gensync@^1.0.0-beta.2:
  version "1.0.0-beta.2"
  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -6859,7 +6673,7 @@ http-proxy@^1.17.0:
    follow-redirects "^1.0.0"
    requires-port "^1.0.0"

-http-response-stream@^1.0.7:
+http-response-stream@^1.0.9:
  version "1.0.9"
  resolved "https://registry.yarnpkg.com/http-response-stream/-/http-response-stream-1.0.9.tgz#e963c193916c3898ed52c247f3bb5ca99d2ad3ff"
  integrity sha512-U456+bkClLLIIhaD2d+PVWCdqh9YUjdbh/UUEou8UoFVIc5GE4Z6xrRPBcdJUXho5j6nuLG5ECb5HJsvsKTjkA==
@@ -7560,11 +7374,6 @@ is-promise@^2.0.0:
  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
  integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==

-is-property@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
-  integrity sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=
-
 is-redirect@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
@@ -8257,7 +8066,7 @@ json-stringify-nice@^1.1.4:
  resolved "https://registry.yarnpkg.com/json-stringify-nice/-/json-stringify-nice-1.1.4.tgz#2c937962b80181d3f317dd39aa323e14f5a60a67"
  integrity sha512-5Z5RFW63yxReJ7vANgW6eZFGWaQvnPE3WNmZoOJrSkGju2etKA2L5rrOa1sm877TVTFt57A80BH1bArcmlLfPw==

-json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
+json-stringify-safe@~5.0.1:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
@@ -8336,11 +8145,6 @@ just-diff@^3.0.1:
  resolved "https://registry.yarnpkg.com/just-diff/-/just-diff-3.1.1.tgz#d50c597c6fd4776495308c63bdee1b6839082647"
  integrity sha512-sdMWKjRq8qWZEjDcVA6llnUT8RDEBIfOiGpYFPYa9u+2c39JCsejktSP7mj5eRid5EIvTzIpQ2kDOCw1Nq9BjQ==

-kareem@2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/kareem/-/kareem-2.3.2.tgz#78c4508894985b8d38a0dc15e1a8e11078f2ca93"
-  integrity sha512-STHz9P7X2L4Kwn72fA4rGyqyXdmrMSdxqHx9IXon/FXluXieaFA6KJ2upcHAHxQPQ0LeM/OjLrhFxifHewOALQ==
-
 keyv@3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.0.0.tgz#44923ba39e68b12a7cec7df6c3268c031f2ef373"
@@ -8425,11 +8229,6 @@ lcid@^2.0.0:
  dependencies:
    invert-kv "^2.0.0"

-levdist@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/levdist/-/levdist-1.0.0.tgz#91d7a3044964f2ccc421a0477cac827fe75c5718"
-  integrity sha1-kdejBElk8szEIaBHfKyCf+dcVxg=
-
 leven@2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
@@ -8566,13 +8365,6 @@ libnpmversion@^1.2.1:
    semver "^7.3.5"
    stringify-package "^1.0.1"

-line-diff@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/line-diff/-/line-diff-2.1.1.tgz#a389799b931375a3b1e764964ad0b0b3ce60d6f6"
-  integrity sha512-vswdynAI5AMPJacOo2o+JJ4caDJbnY2NEqms4MhMW0NJbjh3skP/brpVTAgBxrg55NRZ2Vtw88ef18hnagIpYQ==
-  dependencies:
-    levdist "^1.0.0"
-
 lines-and-columns@^1.1.6:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -8616,7 +8408,16 @@ loader-runner@^4.2.0:
  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
  integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==

-loader-utils@^1.0.0, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
+loader-utils@^1.0.0, loader-utils@^1.1.0, loader-utils@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -8862,11 +8663,6 @@ map-obj@^1.0.0, map-obj@^1.0.1:
  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=

-map-stream@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.0.7.tgz#8a1f07896d82b10926bd3744a2420009f88974a8"
-  integrity sha1-ih8HiW2CsQkmvTdEokIACfiJdKg=
-
 map-visit@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
@@ -8945,11 +8741,6 @@ memory-fs@^0.5.0:
    errno "^0.1.3"
    readable-stream "^2.0.1"

-memory-pager@^1.0.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/memory-pager/-/memory-pager-1.5.0.tgz#d8751655d22d384682741c972f2c3d6dfa3e66b5"
-  integrity sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==
-
 meow@^3.3.0, meow@^3.7.0:
  version "3.7.0"
  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -9096,11 +8887,6 @@ minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
  dependencies:
    brace-expansion "^1.1.7"

-minimist@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.2.1.tgz#827ba4e7593464e7c221e8c5bed930904ee2c455"
-  integrity sha512-GY8fANSrTMfBVfInqJAY41QkOM+upUTytK1jZ0c8+3HdHrJxBJ3rF5i9moClXTE8uUSnUo8cAsCoxDXvSY4DHg==
-
 minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5:
  version "1.2.5"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
@@ -9212,83 +8998,6 @@ moment@^2.14.1, moment@^2.29.1:
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==

-moment@~2.21.0:
-  version "2.21.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"
-  integrity sha512-TCZ36BjURTeFTM/CwRcViQlfkMvL1/vFISuNLO5GkcVm1+QHfbSiNqZuWeMFjj1/3+uAjXswgRk30j1kkLYJBQ==
-
-mongodb-connection-string-url@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mongodb-connection-string-url/-/mongodb-connection-string-url-2.1.0.tgz#9c522c11c37f571fecddcb267ac4a76ef432aeb7"
-  integrity sha512-Qf9Zw7KGiRljWvMrrUFDdVqo46KIEiDuCzvEN97rh/PcKzk2bd6n9KuzEwBwW9xo5glwx69y1mI6s+jFUD/aIQ==
-  dependencies:
-    "@types/whatwg-url" "^8.2.1"
-    whatwg-url "^9.1.0"
-
-mongodb@3.6.11:
-  version "3.6.11"
-  resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-3.6.11.tgz#8a59a0491a92b00a8c925f72ed9d9a5b054aebb2"
-  integrity sha512-4Y4lTFHDHZZdgMaHmojtNAlqkvddX2QQBEN0K//GzxhGwlI9tZ9R0vhbjr1Decw+TF7qK0ZLjQT292XgHRRQgw==
-  dependencies:
-    bl "^2.2.1"
-    bson "^1.1.4"
-    denque "^1.4.1"
-    optional-require "^1.0.3"
-    safe-buffer "^5.1.2"
-  optionalDependencies:
-    saslprep "^1.0.0"
-
-mongodb@4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-4.1.1.tgz#d328e832675e7351f58b642f833126dc89ac2e66"
-  integrity sha512-fbACrWEyvr6yl0sSiCGV0sqEiBwTtDJ8iSojmkDjAfw9JnOZSAkUyv9seFSPYhPPKwxp1PDtyjvBNfMDz0WBLQ==
-  dependencies:
-    bson "^4.5.1"
-    denque "^1.5.0"
-    mongodb-connection-string-url "^2.0.0"
-  optionalDependencies:
-    saslprep "^1.0.0"
-
-mongoose-legacy-pluralize@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/mongoose-legacy-pluralize/-/mongoose-legacy-pluralize-1.0.2.tgz#3ba9f91fa507b5186d399fb40854bff18fb563e4"
-  integrity sha512-Yo/7qQU4/EyIS8YDFSeenIvXxZN+ld7YdV9LqFVQJzTLye8unujAWPZ4NWKfFA+RNjh+wvTWKY9Z3E5XM6ZZiQ==
-
-mongoose@*:
-  version "6.0.7"
-  resolved "https://registry.yarnpkg.com/mongoose/-/mongoose-6.0.7.tgz#a933743a1e2a67519f02c58b264e6825beb9b6aa"
-  integrity sha512-44STDcV6awu0zfo1Z3NyKPHZwfVrGU93/QgR0gYbt4bik/nEa7lI1RRGcq5oyGM0YE7l63i2j80v1OhvrlFvYw==
-  dependencies:
-    bson "^4.2.2"
-    kareem "2.3.2"
-    mongodb "4.1.1"
-    mpath "0.8.4"
-    mquery "4.0.0"
-    ms "2.1.2"
-    regexp-clone "1.0.0"
-    sift "13.5.2"
-    sliced "1.0.1"
-
-mongoose@^5.10.11:
-  version "5.13.9"
-  resolved "https://registry.yarnpkg.com/mongoose/-/mongoose-5.13.9.tgz#4421a13566daea8fcc80149734c76e5641f477ce"
-  integrity sha512-JbLw5ie0LJxm7V9LoNxRY//6cyFJf0cOpON2TWUWvF9pabil6ArfECL3xHV2N+mwwO4gXiIa+c0pwTzDUVTgqw==
-  dependencies:
-    "@types/bson" "1.x || 4.0.x"
-    "@types/mongodb" "^3.5.27"
-    bson "^1.1.4"
-    kareem "2.3.2"
-    mongodb "3.6.11"
-    mongoose-legacy-pluralize "1.0.2"
-    mpath "0.8.4"
-    mquery "3.2.5"
-    ms "2.1.2"
-    optional-require "1.0.x"
-    regexp-clone "1.0.0"
-    safe-buffer "5.2.1"
-    sift "13.5.2"
-    sliced "1.0.1"
-
 mozjpeg@^7.0.0:
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/mozjpeg/-/mozjpeg-7.1.0.tgz#23f202f3e48e98f02ed84f415358d4cbfab66c19"
@@ -9298,31 +9007,6 @@ mozjpeg@^7.0.0:
    bin-wrapper "^4.0.0"
    logalot "^2.1.0"

-mpath@0.8.4:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/mpath/-/mpath-0.8.4.tgz#6b566d9581621d9e931dd3b142ed3618e7599313"
-  integrity sha512-DTxNZomBcTWlrMW76jy1wvV37X/cNNxPW1y2Jzd4DZkAaC5ZGsm8bfGfNOthcDuRJujXLqiuS6o3Tpy0JEoh7g==
-
-mquery@3.2.5:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/mquery/-/mquery-3.2.5.tgz#8f2305632e4bb197f68f60c0cffa21aaf4060c51"
-  integrity sha512-VjOKHHgU84wij7IUoZzFRU07IAxd5kWJaDmyUzQlbjHjyoeK5TNeeo8ZsFDtTYnSgpW6n/nMNIHvE3u8Lbrf4A==
-  dependencies:
-    bluebird "3.5.1"
-    debug "3.1.0"
-    regexp-clone "^1.0.0"
-    safe-buffer "5.1.2"
-    sliced "1.0.1"
-
-mquery@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/mquery/-/mquery-4.0.0.tgz#6c62160ad25289e99e0840907757cdfd62bde775"
-  integrity sha512-nGjm89lHja+T/b8cybAby6H0YgA4qYC/lx6UlwvHGqvTq8bDaNeCwl1sY8uRELrNbVWJzIihxVd+vphGGn1vBw==
-  dependencies:
-    debug "4.x"
-    regexp-clone "^1.0.0"
-    sliced "1.0.1"
-
 mri@1.1.4:
  version "1.1.4"
  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.4.tgz#7cb1dd1b9b40905f1fac053abe25b6720f44744a"
@@ -9413,16 +9097,6 @@ natural-compare@^1.4.0:
  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=

-ndjson@^1.4.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/ndjson/-/ndjson-1.5.0.tgz#ae603b36b134bcec347b452422b0bf98d5832ec8"
-  integrity sha1-rmA7NrE0vOw0e0UkIrC/mNWDLsg=
-  dependencies:
-    json-stringify-safe "^5.0.1"
-    minimist "^1.2.0"
-    split2 "^2.1.0"
-    through2 "^2.0.3"
-
 negotiator@0.6.2, negotiator@^0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -10011,18 +9685,6 @@ opn@^5.5.0:
  dependencies:
    is-wsl "^1.1.0"

-optional-require@1.0.x:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/optional-require/-/optional-require-1.0.3.tgz#275b8e9df1dc6a17ad155369c2422a440f89cb07"
-  integrity sha512-RV2Zp2MY2aeYK5G+B/Sps8lW5NHAzE5QClbFP15j+PWmP+T9PxlJXBOOLoSAdgwFvS4t0aMR4vpedMkbHfh0nA==
-
-optional-require@^1.0.3:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/optional-require/-/optional-require-1.1.8.tgz#16364d76261b75d964c482b2406cb824d8ec44b7"
-  integrity sha512-jq83qaUb0wNg9Krv1c5OQ+58EK+vHde6aBPzLvPPqJm89UQWsvSuFy9X/OSNJnFeSOKo7btE0n8Nl2+nE+z5nA==
-  dependencies:
-    require-at "^1.0.6"
-
 optionator@^0.8.1:
  version "0.8.3"
  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -10441,13 +10103,6 @@ path-type@^4.0.0:
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==

-pause-stream@^0.0.11:
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
-  integrity sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=
-  dependencies:
-    through "~2.3"
-
 pend@~1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -10681,7 +10336,7 @@ prettier-linter-helpers@^1.0.0:
  dependencies:
    fast-diff "^1.1.2"

-prettier@^2.2.1:
+prettier@*, prettier@^2.2.1:
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
@@ -11650,11 +11305,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
    extend-shallow "^3.0.2"
    safe-regex "^1.1.0"

-regexp-clone@1.0.0, regexp-clone@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/regexp-clone/-/regexp-clone-1.0.0.tgz#222db967623277056260b992626354a04ce9bf63"
-  integrity sha512-TuAasHQNamyyJ2hb97IuBEif4qBHGjPHBS64sZwytpLEqtBQ1gPJTnOaQ6qmpET16cK14kkjbazl6+p0RRv0yw==
-
 regexp-to-ast@0.5.0:
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz#56c73856bee5e1fef7f73a00f1473452ab712a24"
@@ -11797,11 +11447,6 @@ request@^2.88.0, request@^2.88.2:
    tunnel-agent "^0.6.0"
    uuid "^3.3.2"

-require-at@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/require-at/-/require-at-1.0.6.tgz#9eb7e3c5e00727f5a4744070a7f560d4de4f6e6a"
-  integrity sha512-7i1auJbMUrXEAZCOQ0VNJgmcT2VOKPRl2YGJwgpHpC9CE91Mv4/4UYIUm4chGJaI381ZDq1JUicFii64Hapd8g==
-
 require-directory@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -11966,7 +11611,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1, safe-buffer@~5.1.2:
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==

-safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0, safe-buffer@~5.2.1:
+safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0, safe-buffer@~5.2.1:
  version "5.2.1"
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -11998,13 +11643,6 @@ sane@^4.0.3:
    minimist "^1.1.1"
    walker "~1.0.5"

-saslprep@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/saslprep/-/saslprep-1.0.3.tgz#4c02f946b56cf54297e347ba1093e7acac4cf226"
-  integrity sha512-/MY/PEMbk2SuY5sScONwhUDsV2p77Znkb/q3nSVstq/yQzYJOH/Azh29p9oJLsl3LnQwSvZDKagDGBsBwSooag==
-  dependencies:
-    sparse-bitfield "^3.0.3"
-
 sass-graph@2.2.5:
  version "2.2.5"
  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.5.tgz#a981c87446b8319d96dce0671e487879bd24c2e8"
@@ -12060,7 +11698,7 @@ schema-utils@^1.0.0:
    ajv-errors "^1.0.0"
    ajv-keywords "^3.1.0"

-schema-utils@^2.6.5, schema-utils@^2.7.1:
+schema-utils@^2.0.1, schema-utils@^2.6.5, schema-utils@^2.7.1:
  version "2.7.1"
  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
@@ -12294,11 +11932,6 @@ side-channel@^1.0.4:
    get-intrinsic "^1.0.2"
    object-inspect "^1.9.0"

-sift@13.5.2:
-  version "13.5.2"
-  resolved "https://registry.yarnpkg.com/sift/-/sift-13.5.2.tgz#24a715e13c617b086166cd04917d204a591c9da6"
-  integrity sha512-+gxdEOMA2J+AI+fVsCqeNn7Tgx3M9ZN9jdi95939l1IJ8cZsqS8sqpJyOkic2SJk+1+98Uwryt/gL6XDaV+UZA==
-
 signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.4.tgz#366a4684d175b9cab2081e3681fda3747b6c51d7"
@@ -12358,11 +11991,6 @@ slice-ansi@^4.0.0:
    astral-regex "^2.0.0"
    is-fullwidth-code-point "^3.0.0"

-sliced@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/sliced/-/sliced-1.0.1.tgz#0b3a662b5d04c3177b1926bea82b03f837a2ef41"
-  integrity sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E=
-
 slugify@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.0.tgz#6bdf8ed01dabfdc46425b67e3320b698832ff893"
@@ -12491,13 +12119,6 @@ sonic-boom@^1.0.2:
    atomic-sleep "^1.0.0"
    flatstr "^1.0.12"

-sonic-boom@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-2.3.0.tgz#b1622bbd29111ed12be94a644ea6b586b6daea70"
-  integrity sha512-lEPaw654/4/rCJHz/TNzV4GIthqCq4inO+O3aFhbdOvR1bE+2//sVkcS+xlqPdb8gdjQCEE0hE9BuvnVixbnWQ==
-  dependencies:
-    atomic-sleep "^1.0.0"
-
 sort-keys-length@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/sort-keys-length/-/sort-keys-length-1.0.1.tgz#9cb6f4f4e9e48155a6aa0671edd336ff1479a188"
@@ -12598,13 +12219,6 @@ spacetime@6.16.0:
  resolved "https://registry.yarnpkg.com/spacetime/-/spacetime-6.16.0.tgz#f213963392eafc380716c3857b23251de87db97f"
  integrity sha512-mkuniNOp6ssfPyJidj81tb54zKxK4vEKPTmcUsC/NEGIF8S07ppoSotdg6numT1/26rthQYmdxMY/M5a9WeJVQ==

-sparse-bitfield@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz#ff4ae6e68656056ba4b3e792ab3334d38273ca11"
-  integrity sha1-/0rm5oZWBWuks+eSqzM004JzyhE=
-  dependencies:
-    memory-pager "^1.0.2"
-
 spawn-command@^0.0.2-1:
  version "0.0.2-1"
  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
@@ -12666,13 +12280,6 @@ split-string@^3.0.1, split-string@^3.0.2:
  dependencies:
    extend-shallow "^3.0.0"

-split2@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
-  integrity sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==
-  dependencies:
-    through2 "^2.0.2"
-
 split2@^3.1.1:
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/split2/-/split2-3.2.2.tgz#bf2cf2a37d838312c249c89206fd7a17dd12365f"
@@ -12680,13 +12287,6 @@ split2@^3.1.1:
  dependencies:
    readable-stream "^3.0.0"

-split@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
-  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
-  dependencies:
-    through "2"
-
 sprintf-js@~1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -12760,21 +12360,6 @@ stealthy-require@^1.1.1:
  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=

-stream-combiner@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.2.2.tgz#aec8cbac177b56b6f4fa479ced8c1912cee52858"
-  integrity sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=
-  dependencies:
-    duplexer "~0.1.1"
-    through "~2.3.4"
-
-streamz@~1.8.10:
-  version "1.8.12"
-  resolved "https://registry.yarnpkg.com/streamz/-/streamz-1.8.12.tgz#e022bf773fb0093de81f3cd2105390bbc9231613"
-  integrity sha512-O75iqd6oo3tqlfCKoReXLwLAweyr0dkzSPxDLPkmHtbPz8Y/+s2sSOAJHpDYzw2LGZbWBbHgd1Df4zw3i7bqiw==
-  dependencies:
-    bluebird "~3.7.2"
-
 strict-uri-encode@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
@@ -13246,15 +12831,7 @@ throat@^5.0.0:
  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==

-through2@^2.0.2, through2@^2.0.3:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
-
-through@2, through@^2.3.8, through@~2.3, through@~2.3.4:
+through@^2.3.8:
  version "2.3.8"
  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
@@ -14235,14 +13812,6 @@ whatwg-url@^8.0.0, whatwg-url@^8.5.0:
    tr46 "^2.1.0"
    webidl-conversions "^6.1.0"

-whatwg-url@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-9.1.0.tgz#1b112cf237d72cd64fa7882b9c3f6234a1c3050d"
-  integrity sha512-CQ0UcrPHyomtlOCot1TL77WyMIm/bCwrJ2D6AOKGwEczU9EpyoqAokfqrf/MioU9kHcMsmJZcg1egXix2KYEsA==
-  dependencies:
-    tr46 "^2.1.0"
-    webidl-conversions "^6.1.0"
-
 which-boxed-primitive@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
@@ -14480,7 +14049,7 @@ xregexp@^5.0.2:
  dependencies:
    "@babel/runtime-corejs3" "^7.14.9"

-xtend@^4.0.0, xtend@~4.0.1:
+xtend@^4.0.0:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
				`@@ -1 +0,0 @@`
				`export {ConfirmModal} from './ConfirmModal';`
				`@@ -1 +0,0 @@`
				`export { Axis, Draggable } from "./Draggable";`
				`@@ -1 +0,0 @@`
				`export {FloatingControls} from './FloatingControls';`
				`@@ -1 +0,0 @@`
				`export {GridContainer} from './GridContainer';`
				`@@ -1 +0,0 @@`
				`export {OverflowWrapper} from './OverflowWrapper';`