theme: migrate to custom fork of rebass for latest changes

apps/web/package.json

@@ -17,16 +17,16 @@
     "@notesnook/crypto-worker": "*",
     "@notesnook/desktop": "file:desktop",
     "@notesnook/streamable-fs": "*",
-    "@rebass/forms": "^4.0.6",
+    "@notesnook/theme": "*",
+    "@streetwriters/rebass-forms": "^5.0.0",
     "@streetwriters/editor": "*",
     "@streetwriters/notesnook-core": "^7.3.6",
-    "@streetwriters/theme": "^1.0.1",
     "allotment": "^1.12.1",
     "async-mutex": "^0.3.2",
     "axios": "^0.21.4",
     "clipboard-polyfill": "^3.0.3",
     "dayjs": "^1.10.4",
-    "emotion-theming": "^10.0.19",
+    "@emotion/react": "^11.10.0",
     "event-source-polyfill": "^1.0.25",
     "fflate": "^0.7.2",
     "file-saver": "^2.0.5",
@@ -53,7 +53,7 @@
     "react-scroll-sync": "^0.9.0",
     "react-toggle": "^4.1.2",
     "react-virtuoso": "^2.4.0",
-    "rebass": "^4.0.7",
+    "@streetwriters/rebass": "^5.0.0",
     "showdown": "github:thecodrr/showdown",
     "timeago.js": "^4.0.2",
     "web-streams-polyfill": "^3.1.1",

apps/web/src/app.js

@@ -1,5 +1,5 @@
 import React, { useState, Suspense, useMemo, useRef, useEffect } from "react";
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "@streetwriters/rebass";
 import ThemeProvider from "./components/theme-provider";
 import useMobile from "./hooks/use-mobile";
 import useTablet from "./hooks/use-tablet";

apps/web/src/common/app-events.js

@@ -1,4 +1,4 @@
-import EventManager from "@streetwriters/notesnook-core/utils/eventmanager";
+import EventManager from "@streetwriters/notesnook-core/utils/event-manager";
 
 export const AppEventManager = new EventManager();
 export const AppEvents = {

apps/web/src/common/dialog-controller.tsx

@@ -10,7 +10,7 @@ import { store as editorStore } from "../stores/editor-store";
 import { store as noteStore } from "../stores/note-store";
 import { db } from "./db";
 import { showToast } from "../utils/toast";
-import { Box, Flex, Text } from "rebass";
+import { Box, Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../components/icons";
 import Config from "../utils/config";
 import { formatDate } from "@streetwriters/notesnook-core/utils/date";

apps/web/src/components/accent-item/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex } from "rebass";
+import { Flex } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import { useStore as useThemeStore } from "../../stores/theme-store";
 import { showBuyDialog } from "../../common/dialog-controller";

apps/web/src/components/accordion/index.js

@@ -1,4 +1,4 @@
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import { useEffect, useState } from "react";
 import { ChevronDown, ChevronUp } from "../icons";
 

apps/web/src/components/animated/index.js

@@ -1,6 +1,6 @@
 import { m } from "framer-motion";
-import { Flex, Box, Image, Text } from "rebass";
-import { Input } from "@rebass/forms";
+import { Flex, Box, Image, Text } from "@streetwriters/rebass";
+import { Input } from "@streetwriters/rebass-forms";
 
 export const AnimatedFlex = m(Flex);
 export const AnimatedBox = m(Box);

apps/web/src/components/announcements/body.js

@@ -4,7 +4,7 @@ import {
   Flex,
   Image as RebassImage,
   Text as RebassText
-} from "rebass";
+} from "@streetwriters/rebass";
 import { allowedPlatforms } from "../../hooks/use-announcements";
 import {
   closeOpenedDialog,

apps/web/src/components/announcements/index.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import { ANALYTICS_EVENTS, trackEvent } from "../../utils/analytics";
 import AnnouncementBody from "./body";

apps/web/src/components/attachment/index.js

@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from "rebass";
+import { Box, Flex, Text } from "@streetwriters/rebass";
 import { formatBytes } from "../../utils/filename";
 import ListItem from "../list-item";
 import * as Icon from "../icons";

apps/web/src/components/auth-container/index.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Box, Flex, Image, Text } from "rebass";
+import { Box, Flex, Image, Text } from "@streetwriters/rebass";
 import ThemeProvider from "../theme-provider";
 import Logo from "../../assets/logo.svg";
 import LogoDark from "../../assets/logo-dark.svg";

apps/web/src/components/dialogs/add-notebook-dialog.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import Dialog from "./dialog";
 import { qclone } from "qclone";

apps/web/src/components/dialogs/announcement-dialog.js

@@ -1,6 +1,6 @@
 import Modal from "react-modal";
-import { useTheme } from "emotion-theming";
-import { Flex } from "rebass";
+import { useTheme } from "@emotion/react";
+import { Flex } from "@streetwriters/rebass";
 import AnnouncementBody from "../announcements/body";
 
 function AnnouncementDialog(props) {

apps/web/src/components/dialogs/attachments-dialog.js

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Flex } from "rebass";
+import { Flex } from "@streetwriters/rebass";
 import { getTotalSize } from "../../common/attachments";
 import { useStore } from "../../stores/attachment-store";
 import { formatBytes } from "../../utils/filename";

apps/web/src/components/dialogs/buy-dialog/buy-dialog.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Text, Flex, Button } from "rebass";
+import { Text, Flex, Button } from "@streetwriters/rebass";
 import * as Icon from "../../icons";
 import { useStore as useUserStore } from "../../../stores/user-store";
 import { useStore as useThemeStore } from "../../../stores/theme-store";
 import Modal from "react-modal";
-import { useTheme } from "emotion-theming";
+import { useTheme } from "@emotion/react";
 import { ReactComponent as Rocket } from "../../../assets/rocket.svg";
 import { ReactComponent as WorkAnywhere } from "../../../assets/workanywhere.svg";
 import { ReactComponent as WorkLate } from "../../../assets/worklate.svg";

apps/web/src/components/dialogs/buy-dialog/features.tsx

@@ -1,4 +1,4 @@
-import { Text, Flex, Box } from "rebass";
+import { Text, Flex, Box } from "@streetwriters/rebass";
 import * as Icon from "../../icons";
 
 type Feature = {

apps/web/src/components/dialogs/buy-dialog/paddle.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef, useCallback } from "react";
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "@streetwriters/rebass";
 import Loader from "../../loader";
 import {
   CheckoutData,

apps/web/src/components/dialogs/buy-dialog/plan-list.tsx

@@ -1,4 +1,4 @@
-import { Text, Flex, Button } from "rebass";
+import { Text, Flex, Button } from "@streetwriters/rebass";
 import * as Icon from "../../icons";
 import { ReactComponent as Nomad } from "../../../assets/nomad.svg";
 import { Period, Plan } from "./types";

apps/web/src/components/dialogs/confirm.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Text } from "rebass";
+import { Box, Text } from "@streetwriters/rebass";
 import Dialog from "./dialog";
 
 function Confirm(props) {

apps/web/src/components/dialogs/dialog-loader.tsx

@@ -1,7 +1,7 @@
 import Dialog from "./dialog";
 import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
-import { Flex } from "rebass";
+import { Flex } from "@streetwriters/rebass";
 
 export default function DialogLoader() {
   return (

apps/web/src/components/dialogs/dialog.js

@@ -1,7 +1,7 @@
-import { Flex, Text, Button as RebassButton } from "rebass";
+import { Flex, Text, Button as RebassButton } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import Modal from "react-modal";
-import { useTheme } from "emotion-theming";
+import { useTheme } from "@emotion/react";
 import { FlexScrollContainer } from "../scroll-container";
 
 Modal.setAppElement("#root");

apps/web/src/components/dialogs/email-verification-dialog.js

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import Dialog from "./dialog";
 import { useStore as useUserStore } from "../../stores/user-store";
 import { db } from "../../common/db";

apps/web/src/components/dialogs/feature-dialog.tsx

@@ -1,4 +1,4 @@
-import { Text, Flex } from "rebass";
+import { Text, Flex } from "@streetwriters/rebass";
 import Dialog from "./dialog";
 import * as Icon from "../icons";
 import { getHomeRoute, hardNavigate } from "../../navigation";

apps/web/src/components/dialogs/import-dialog.js

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import Dialog from "./dialog";
 import { db } from "../../common/db";
 import { useDropzone } from "react-dropzone";
-import { Input } from "@rebass/forms";
+import { Input } from "@streetwriters/rebass-forms";
 import Accordion from "../accordion";
 import { store as appStore } from "../../stores/app-store";
 import { Importer } from "../../utils/importer";

apps/web/src/components/dialogs/issue-dialog.tsx

@@ -1,4 +1,4 @@
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import { appVersion } from "../../utils/version";
 import Field from "../field";
 import Dialog from "./dialog";

apps/web/src/components/dialogs/item-dialog.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box } from "rebass";
+import { Box } from "@streetwriters/rebass";
 import Dialog from "./dialog";
 import Field from "../field";
 

apps/web/src/components/dialogs/loading-dialog.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Box, Text } from "rebass";
+import { Box, Text } from "@streetwriters/rebass";
 import Dialog from "./dialog";
 import * as Icon from "../icons";
 

apps/web/src/components/dialogs/mfa/multi-factor-dialog.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Text } from "rebass";
+import { Text } from "@streetwriters/rebass";
 import { Perform } from "../../../common/dialog-controller";
 import Dialog from "../dialog";
 import { FallbackStep, fallbackSteps, Step, steps } from "./steps";

apps/web/src/components/dialogs/mfa/recovery-code-dialog.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Text } from "rebass";
+import { Text } from "@streetwriters/rebass";
 import { Perform } from "../../../common/dialog-controller";
 import Dialog from "../dialog";
 import { steps } from "./steps";

apps/web/src/components/dialogs/mfa/steps.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState
 } from "react";
-import { Text, Flex, Button, Box } from "rebass";
+import { Text, Flex, Button, Box } from "@streetwriters/rebass";
 import { useSessionState } from "../../../hooks/use-session-state";
 import {
   Loading,

apps/web/src/components/dialogs/mfa/types.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from "rebass";
+import { BoxProps } from "@streetwriters/rebass";
 import { Perform } from "../../../common/dialog-controller";
 
 export type AuthenticatorType = "app" | "sms" | "email";

apps/web/src/components/dialogs/migration-dialog.tsx

@@ -1,4 +1,4 @@
-import { Text } from "rebass";
+import { Text } from "@streetwriters/rebass";
 import { createBackup } from "../../common";
 import { db } from "../../common/db";
 import { Perform } from "../../common/dialog-controller";

apps/web/src/components/dialogs/move-note-dialog.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import { db } from "../../common/db";
 import Dialog from "./dialog";

apps/web/src/components/dialogs/onboarding-dialog.js

@@ -1,4 +1,4 @@
-import { Text, Flex, Button, Image, Box } from "rebass";
+import { Text, Flex, Button, Image, Box } from "@streetwriters/rebass";
 import Dialog from "./dialog";
 import * as Icon from "../icons";
 import { ReactComponent as E2E } from "../../assets/e2e.svg";
@@ -11,7 +11,7 @@ import DarkUI from "../../assets/dark1.png";
 import GooglePlay from "../../assets/play.png";
 import AppleStore from "../../assets/apple.png";
 import { useStore as useThemeStore } from "../../stores/theme-store";
-import { Checkbox, Label } from "@rebass/forms";
+import { Checkbox, Label } from "@streetwriters/rebass-forms";
 import { Features } from "../announcements/body";
 import { showBuyDialog } from "../../common/dialog-controller";
 import { TaskManager } from "../../common/task-manager";
@@ -20,7 +20,7 @@ import { usePersistentState } from "../../hooks/use-persistent-state";
 import AccentItem from "../accent-item";
 import { useCallback, useState } from "react";
 import Config from "../../utils/config";
-import { getAllAccents } from "@streetwriters/theme";
+import { getAllAccents } from "@notesnook/theme";
 
 const newUserSteps = [
   {

apps/web/src/components/dialogs/password-dialog.js

@@ -1,8 +1,8 @@
 import React, { useState, useCallback, useMemo } from "react";
-import { Box, Text } from "rebass";
+import { Box, Text } from "@streetwriters/rebass";
 import Dialog from "./dialog";
 import Field from "../field";
-import { Checkbox, Label } from "@rebass/forms";
+import { Checkbox, Label } from "@streetwriters/rebass-forms";
 
 function PasswordDialog(props) {
   const { type, checks } = props;

apps/web/src/components/dialogs/progress-dialog.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Box, Flex, Text } from "rebass";
+import { Box, Flex, Text } from "@streetwriters/rebass";
 import Dialog from "./dialog";
 
 function ProgressDialog(props) {

apps/web/src/components/dialogs/recovery-key-dialog.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Text, Flex, Button } from "rebass";
+import { Text, Flex, Button } from "@streetwriters/rebass";
 import Dialog from "./dialog";
 import { db } from "../../common/db";
 import Logo from "../../assets/notesnook-logo.png";

apps/web/src/components/dialogs/reminder-dialog.js

@@ -1,4 +1,4 @@
-import { Text, Flex, Box } from "rebass";
+import { Text, Flex, Box } from "@streetwriters/rebass";
 import Dialog from "./dialog";
 import * as Icon from "../icons";
 import { showBuyDialog } from "../../common/dialog-controller";

apps/web/src/components/dialogs/toolbar-config-dialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, FlexProps, Text } from "rebass";
+import { Button, Flex, FlexProps, Text } from "@streetwriters/rebass";
 import { Perform } from "../../common/dialog-controller";
 import Dialog from "./dialog";
 import {
@@ -31,7 +31,7 @@ import { useEffect, useState } from "react";
 import { CSS } from "@dnd-kit/utilities";
 import { createPortal } from "react-dom";
 import id from "@streetwriters/notesnook-core/utils/id";
-import { Label, Radio } from "@rebass/forms";
+import { Label, Radio } from "@streetwriters/rebass-forms";
 import { db } from "../../common/db";
 import { useToolbarConfig } from "../editor/context";
 import {

apps/web/src/components/dialogs/tracking-details-dialog.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Text } from "rebass";
+import { Box, Text } from "@streetwriters/rebass";
 import { ANALYTICS_EVENTS } from "../../utils/analytics";
 import Dialog from "./dialog";
 

apps/web/src/components/diff-viewer/content-toggle.js

@@ -1,5 +1,5 @@
 import { formatDate } from "@streetwriters/notesnook-core/utils/date";
-import { Flex, Button } from "rebass";
+import { Flex, Button } from "@streetwriters/rebass";
 
 function ContentToggle(props) {
   const {

apps/web/src/components/diff-viewer/index.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-import { Flex, Text, Button } from "rebass";
+import { Flex, Text, Button } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import ContentToggle from "./content-toggle";
 import { store as notesStore } from "../../stores/note-store";

apps/web/src/components/dropdown-button/index.js

@@ -1,4 +1,4 @@
-import { Button, Flex } from "rebass";
+import { Button, Flex } from "@streetwriters/rebass";
 import { useMenuTrigger } from "../../hooks/use-menu";
 import { ChevronDown } from "../icons";
 

apps/web/src/components/editor/-placeholder.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Logo from "../../assets/logo.svg";
 import LogoDark from "../../assets/logo-dark.svg";
-import { Button, Flex, Image, Text } from "rebass";
+import { Button, Flex, Image, Text } from "@streetwriters/rebass";
 import { hashNavigate } from "../../navigation";
 import * as Icon from "../icons";
 import { useStore as useThemeStore } from "../../stores/theme-store";

apps/web/src/components/editor/footer.js

@@ -1,5 +1,5 @@
 import { formatDate } from "@streetwriters/notesnook-core/utils/date";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import { useStore } from "../../stores/editor-store";
 import { Loading, Saved, NotSaved } from "../icons";
 import { useNoteStatistics } from "./context";

apps/web/src/components/editor/header.js

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useStore } from "../../stores/editor-store";
-import { Input } from "@rebass/forms";
+import { Input } from "@streetwriters/rebass-forms";
 import * as Icon from "../icons";
-import { Flex } from "rebass";
+import { Flex } from "@streetwriters/rebass";
 import IconTag from "../icon-tag";
 import { db } from "../../common/db";
 import { useMenuTrigger } from "../../hooks/use-menu";

apps/web/src/components/editor/index.tsx

@@ -5,7 +5,7 @@ import {
   useRef,
   PropsWithChildren
 } from "react";
-import { Box, Button, Flex, Text } from "rebass";
+import { Box, Button, Flex, Text } from "@streetwriters/rebass";
 import Properties from "../properties";
 import { useStore, store as editorstore } from "../../stores/editor-store";
 import Toolbar from "./toolbar";

apps/web/src/components/editor/loading.tsx

@@ -1,4 +1,4 @@
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 
 function EditorLoading({ text }: { text?: string }) {

apps/web/src/components/editor/tiptap.tsx

@@ -3,8 +3,8 @@ import "@streetwriters/editor/styles/katex.min.css";
 import "@streetwriters/editor/styles/katex-fonts.css";
 import "@streetwriters/editor/styles/fonts.css";
 import "@streetwriters/editor/styles/prism-theme.css";
-import { Theme } from "@streetwriters/theme";
-import { useTheme } from "emotion-theming";
+import { Theme } from "@notesnook/theme";
+import { useTheme } from "@emotion/react";
 import {
   Toolbar,
   useTiptap,
@@ -13,7 +13,7 @@ import {
   AttachmentType,
   usePermissionHandler
 } from "@streetwriters/editor";
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "@streetwriters/rebass";
 import { PropsWithChildren, useEffect, useRef, useState } from "react";
 import useMobile from "../../hooks/use-mobile";
 import { Attachment } from "./picker";
@@ -223,7 +223,7 @@ function TipTap(props: TipTapProps) {
 }
 
 function TiptapWrapper(props: Omit<TipTapProps, "editorContainer" | "theme">) {
-  const theme: Theme = useTheme();
+  const theme = useTheme() as Theme;
   const [isReady, setIsReady] = useState(false);
   const editorContainerRef = useRef<HTMLDivElement>();
   useEffect(() => {

apps/web/src/components/editor/title-box.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Input } from "@rebass/forms";
+import { Input } from "@streetwriters/rebass-forms";
 
 type TitleBoxProps = {
   nonce?: number;

apps/web/src/components/editor/toolbar.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { useStore as useThemeStore } from "../../stores/theme-store";

apps/web/src/components/field/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Button, Flex, Text } from "rebass";
-import { Input, Label } from "@rebass/forms";
+import { Button, Flex, Text } from "@streetwriters/rebass";
+import { Input, Label } from "@streetwriters/rebass-forms";
 import * as Icon from "../icons";
 
 const passwordValidationRules = [

apps/web/src/components/global-menu-wrapper/index.js

@@ -1,7 +1,7 @@
 import Menu from "../menu";
 import { useMenuTrigger, useMenu, getPosition } from "../../hooks/use-menu";
 import Modal from "react-modal";
-import { Box } from "rebass";
+import { Box } from "@streetwriters/rebass";
 
 function GlobalMenuWrapper() {
   const { isOpen, closeMenu } = useMenuTrigger();

apps/web/src/components/group-header/index.js

@@ -1,6 +1,6 @@
 import * as Icon from "../icons";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import { db } from "../../common/db";
 import { useMenuTrigger } from "../../hooks/use-menu";
 import { useStore as useNoteStore } from "../../stores/note-store";

apps/web/src/components/icon-tag/index.js

@@ -1,4 +1,4 @@
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 
 function IconTag({ text, title, icon: Icon, onClick, styles, testId }) {
   return (

apps/web/src/components/icons/index.js

@@ -158,7 +158,7 @@ import {
   mdiFormatLineSpacing,
   mdiCalendarClockOutline
 } from "@mdi/js";
-import { useTheme } from "emotion-theming";
+import { useTheme } from "@emotion/react";
 import { AnimatedFlex } from "../animated";
 
 function Icon({ title, name, size = 24, color = "icon", stroke, rotate }) {

apps/web/src/components/install-notice/index.js

@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom";
-import { Box, Button, Flex, Text } from "rebass";
+import { Box, Button, Flex, Text } from "@streetwriters/rebass";
 import Config from "../../utils/config";
 import { getDownloadLink, getPlatform } from "../../utils/platform";
 import DropdownButton from "../dropdown-button";

apps/web/src/components/list-container/index.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Flex, Button } from "rebass";
+import { Flex, Button } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import { Virtuoso } from "react-virtuoso";
 import {

apps/web/src/components/list-item/index.js

@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from "rebass";
+import { Box, Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import {
   store as selectionStore,

apps/web/src/components/loader/index.js

@@ -1,4 +1,4 @@
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import { Loading } from "../icons";
 
 export default function Loader({ title, text }) {

apps/web/src/components/loaders/editor-loader.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import Skeleton from "react-loading-skeleton";
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "@streetwriters/rebass";
 import "react-loading-skeleton/dist/skeleton.css";
 
 export const EditorLoader = memo(function EditorLoader() {

apps/web/src/components/loaders/list-loader.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import Skeleton from "react-loading-skeleton";
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "@streetwriters/rebass";
 import "react-loading-skeleton/dist/skeleton.css";
 import { getRandomArbitrary } from "../../utils/random";
 

apps/web/src/components/loaders/navigation-loader.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import Skeleton from "react-loading-skeleton";
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "@streetwriters/rebass";
 import "react-loading-skeleton/dist/skeleton.css";
 
 export const NavigationLoader = memo(function NavigationLoader() {

apps/web/src/components/loaders/status-bar-loader.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import Skeleton from "react-loading-skeleton";
-import { Box } from "rebass";
+import { Box } from "@streetwriters/rebass";
 import "react-loading-skeleton/dist/skeleton.css";
 
 export const StatusBarLoader = memo(function StatusBarLoader() {

apps/web/src/components/loaders/view-loader.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import Skeleton from "react-loading-skeleton";
-import { Box, Flex } from "rebass";
+import { Box, Flex } from "@streetwriters/rebass";
 import "react-loading-skeleton/dist/skeleton.css";
 import { ListLoader } from "./list-loader";
 

apps/web/src/components/menu/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useEffect, useState } from "react";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import { getPosition } from "../../hooks/use-menu";
 import { FlexScrollContainer } from "../scroll-container";
 import MenuItem from "./menu-item";

apps/web/src/components/menu/menu-item.js

@@ -1,6 +1,6 @@
 import { Check, ChevronRight, Pro } from "../icons";
 import { useRef } from "react";
-import { Flex, Box, Text, Button } from "rebass";
+import { Flex, Box, Text, Button } from "@streetwriters/rebass";
 
 function MenuItem({ item, isFocused, onMouseEnter, onMouseLeave, onClick }) {
   const {

apps/web/src/components/navigation-menu/index.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from "react";
-import { Box, Button, Flex } from "rebass";
+import { Box, Button, Flex } from "@streetwriters/rebass";
 import {
   Note,
   Notebook,

apps/web/src/components/navigation-menu/navigation-item.js

@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { useMenuTrigger } from "../../hooks/use-menu";
 import useMobile from "../../hooks/use-mobile";

apps/web/src/components/note/index.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import TimeAgo from "../time-ago";
 import ListItem from "../list-item";

apps/web/src/components/notebook/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import ListItem from "../list-item";
 import { useStore, store } from "../../stores/notebook-store";
 import { store as appStore } from "../../stores/app-store";

apps/web/src/components/placeholders/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 
 const PlaceholderLoader = React.lazy(() => import("./loader"));
 function Placeholder(props) {

apps/web/src/components/progress-bar/index.js

@@ -1,6 +1,6 @@
 import { useAnimation } from "framer-motion";
 import React, { useEffect } from "react";
-import { Flex } from "rebass";
+import { Flex } from "@streetwriters/rebass";
 import { AnimatedBox } from "../animated";
 
 function ProgressBar(props) {

apps/web/src/components/properties/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import * as Icon from "../icons";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import { useStore, store } from "../../stores/editor-store";
 import { COLORS } from "../../common/constants";
 import { db } from "../../common/db";

apps/web/src/components/properties/toggle.js

@@ -1,4 +1,4 @@
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import { useStore } from "../../stores/editor-store";
 import Switch from "../switch";
 

apps/web/src/components/publish-view/index.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
-import { Flex, Text, Button } from "rebass";
+import { Flex, Text, Button } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import Toggle from "../toggle";
 import Field from "../field";

apps/web/src/components/reminder-bar/index.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { Reminders } from "../../common/reminders";
 import * as Icon from "../icons";

apps/web/src/components/route-container/index.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import { useStore } from "../../stores/app-store";
 import { CREATE_BUTTON_MAP } from "../../common";
 import useMobile from "../../hooks/use-mobile";
 import { navigate } from "../../navigation";
-import { Input } from "@rebass/forms";
+import { Input } from "@streetwriters/rebass-forms";
 
 function RouteContainer(props) {
   const {

apps/web/src/components/scroll-container/index.js

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { Box } from "rebass";
+import { Box } from "@streetwriters/rebass";
 import { Scrollbars } from "rc-scrollbars";
 
 const ScrollContainer = ({ children, style, forwardedRef, ...props }) => {

apps/web/src/components/status-bar/index.js

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Text } from "rebass";
+import { Box, Button, Flex, Text } from "@streetwriters/rebass";
 import EditorFooter from "../editor/footer";
 import {
   Circle,

apps/web/src/components/tag/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ListItem from "../list-item";
 import { hashNavigate, navigate } from "../../navigation";
-import { Text } from "rebass";
+import { Text } from "@streetwriters/rebass";
 import { store as appStore } from "../../stores/app-store";
 import { store as tagStore } from "../../stores/tag-store";
 import { store as editorStore } from "../../stores/editor-store";

apps/web/src/components/theme-provider/index.js

@@ -1,6 +1,6 @@
 import { useStore } from "../../stores/theme-store";
-import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
-import { useTheme } from "@streetwriters/theme";
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { useTheme } from "@notesnook/theme";
 
 function ThemeProviderWrapper(props) {
   const theme = useStore((store) => store.theme);

apps/web/src/components/time-ago/index.js

@@ -1,6 +1,6 @@
 import { formatDate } from "@streetwriters/notesnook-core/utils/date";
 import React, { useEffect, useRef } from "react";
-import { Text } from "rebass";
+import { Text } from "@streetwriters/rebass";
 import { register, format, cancel, render } from "timeago.js";
 
 const shortLocale = [

apps/web/src/components/tip/index.js

@@ -1,4 +1,4 @@
-import { Text } from "rebass";
+import { Text } from "@streetwriters/rebass";
 
 function TextWithTip({ text, tip, sx, color }) {
   return (

apps/web/src/components/toggle/index.js

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { showBuyDialog } from "../../common/dialog-controller";
 import Tip from "../tip";
 import { isUserPremium } from "../../hooks/use-is-user-premium";
-import { Flex } from "rebass";
+import { Flex } from "@streetwriters/rebass";
 import Switch from "../switch";
 
 function Toggle(props) {

apps/web/src/components/topic/index.js

@@ -3,7 +3,7 @@ import ListItem from "../list-item";
 import { db } from "../../common/db";
 import { store as appStore } from "../../stores/app-store";
 import { hashNavigate } from "../../navigation";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import { Multiselect } from "../../common/multi-select";
 import { pluralize } from "../../utils/string";

apps/web/src/components/trash-item/index.js

@@ -3,7 +3,7 @@ import ListItem from "../list-item";
 import { showMultiPermanentDeleteConfirmation } from "../../common/dialog-controller";
 import * as Icon from "../icons";
 import { store } from "../../stores/trash-store";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import TimeAgo from "../time-ago";
 import { toTitleCase } from "../../utils/string";
 import { showUndoableToast } from "../../common/toasts";

apps/web/src/components/unlock/index.js

@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useMemo
 } from "react";
-import { Flex, Text, Button } from "rebass";
+import { Flex, Text, Button } from "@streetwriters/rebass";
 import * as Icon from "../icons";
 import { db } from "../../common/db";
 import { useStore as useEditorStore } from "../../stores/editor-store";

apps/web/src/navigation/index.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import EventManager from "@streetwriters/notesnook-core/utils/eventmanager";
+import EventManager from "@streetwriters/notesnook-core/utils/event-manager";
 import Config from "../utils/config";
 
 export function navigate(url, replaceOrQuery, replace) {

apps/web/src/stores/theme-store.js

@@ -2,7 +2,7 @@ import createStore from "../common/store";
 import BaseStore from "./index";
 import Config from "../utils/config";
 import changeAppTheme from "../commands/change-app-theme";
-import { getDefaultAccentColor } from "@streetwriters/theme";
+import { getDefaultAccentColor } from "@notesnook/theme";
 
 class ThemeStore extends BaseStore {
   theme = Config.get("theme", "light");

apps/web/src/utils/keyboard.js

@@ -1,4 +1,4 @@
-import EventManager from "@streetwriters/notesnook-core/utils/eventmanager";
+import EventManager from "@streetwriters/notesnook-core/utils/event-manager";
 
 const GlobalKeyboard = {};
 

apps/web/src/utils/toast.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import ThemeProvider from "../components/theme-provider";
 import { Error, Warn, Success } from "../components/icons";
 import { store as appstore } from "../stores/app-store";

apps/web/src/views/auth.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import {
   CheckCircle,
   Loading,

apps/web/src/views/email-confirmed.js

@@ -1,6 +1,6 @@
 import "../app.css";
 import { useEffect } from "react";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import ThemeProvider from "../components/theme-provider";
 import { ANALYTICS_EVENTS, trackEvent } from "../utils/analytics";
 import { useQueryParams } from "../navigation";

apps/web/src/views/notes.js

@@ -6,7 +6,7 @@ import { hashNavigate, navigate } from "../navigation";
 import FavoritesPlaceholder from "../components/placeholders/favorites-placeholder";
 import { groupArray } from "@streetwriters/notesnook-core/utils/grouping";
 import { db } from "../common/db";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import { SyncError } from "../components/icons";
 
 function Notes() {

apps/web/src/views/recovery.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import { Error as ErrorIcon } from "../components/icons";
 import { makeURL, useQueryParams } from "../navigation";
 import { db } from "../common/db";

apps/web/src/views/search.js

@@ -5,7 +5,7 @@ import { db } from "../common/db";
 import SearchBox from "../components/search";
 import ProgressBar from "../components/progress-bar";
 import { useStore as useNoteStore } from "../stores/note-store";
-import { Flex, Text } from "rebass";
+import { Flex, Text } from "@streetwriters/rebass";
 import { showToast } from "../utils/toast";
 import { store as notebookstore } from "../stores/notebook-store";
 import { hardNavigate } from "../navigation";

apps/web/src/views/settings.js

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import * as Icon from "../components/icons";
 import { useStore as useUserStore } from "../stores/user-store";
 import { useStore as useNoteStore } from "../stores/note-store";
@@ -38,11 +38,11 @@ import Toggle from "../components/toggle";
 import { isDesktop } from "../utils/platform";
 import Vault from "../common/vault";
 import { isUserPremium } from "../hooks/use-is-user-premium";
-import { Slider } from "@rebass/forms";
+import { Slider } from "@streetwriters/rebass-forms";
 import useZoomFactor from "../hooks/use-zoom-factor";
 import { PATHS } from "@notesnook/desktop/paths";
 import { openPath } from "../commands/open";
-import { getAllAccents } from "@streetwriters/theme";
+import { getAllAccents } from "@notesnook/theme";
 import { debounce } from "../utils/debounce";
 import { clearLogs, downloadLogs } from "../utils/logger";
 

apps/web/src/views/topics.js

@@ -4,7 +4,7 @@ import { useStore as useNbStore } from "../stores/notebook-store";
 import { useStore as useAppStore } from "../stores/app-store";
 import { hashNavigate } from "../navigation";
 import TopicsPlaceholder from "../components/placeholders/topics-placeholder";
-import { Button, Flex, Text } from "rebass";
+import { Button, Flex, Text } from "@streetwriters/rebass";
 import { Edit, RemoveShortcutLink, ShortcutLink } from "../components/icons";
 import { getTotalNotes } from "../common";
 import { formatDate } from "@streetwriters/notesnook-core/utils/date";