From 7320819ff98630bcf43e70b46890281e4b586029 Mon Sep 17 00:00:00 2001
From: Emmanuel Ogbizi-Ugbe <iamogbz+github@gmail.com>
Date: Sat, 7 May 2022 00:03:22 -0400
Subject: [PATCH] style: switch indentation to 2 spaces

---
 .eslintrc.json                               |   4 +-
 .prettierrc.json                             |  10 +-
 config/mocks/DOMRect.ts                      |  38 ++--
 config/mocks/ResizeObserver.ts               |  18 +-
 demo/src/App.tsx                             |  56 ++---
 demo/src/Clock.tsx                           |  46 ++--
 demo/src/Window.tsx                          |  36 +--
 package.json                                 |   2 +-
 src/__mocks__.ts                             |  38 ++--
 src/__tests__/index.test.ts                  |   8 +-
 src/components/Element.tsx                   |  32 +--
 src/components/Frame.tsx                     |  70 +++---
 src/components/IFrame.tsx                    |  26 +--
 src/components/Mirror.tsx                    |  64 +++---
 src/components/Reflection.tsx                | 146 ++++++------
 src/components/Styles.tsx                    |   4 +-
 src/components/__tests__/Element.test.tsx    |  62 ++---
 src/components/__tests__/Frame.test.tsx      |  34 ++-
 src/components/__tests__/Mirror.test.tsx     | 107 +++++----
 src/components/__tests__/Reflection.test.tsx | 228 +++++++++----------
 src/hooks/__tests__/useDimensions.test.ts    | 118 +++++-----
 src/hooks/__tests__/useMirror.test.ts        |  22 +-
 src/hooks/__tests__/useObserver.test.ts      | 171 +++++++-------
 src/hooks/__tests__/useRef.test.ts           |  24 +-
 src/hooks/__tests__/useRenderTrigger.test.ts |  18 +-
 src/hooks/useDimensions.ts                   |  40 ++--
 src/hooks/useMirror.tsx                      |   4 +-
 src/hooks/useObserver.ts                     |  78 +++----
 src/hooks/usePortal.ts                       |  20 +-
 src/hooks/useRef.ts                          |   4 +-
 src/hooks/useRenderTrigger.ts                |  18 +-
 src/utils/dom.ts                             |  74 +++---
 src/utils/index.ts                           |  18 +-
 webpack.config.ts                            | 100 ++++----
 34 files changed, 865 insertions(+), 873 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index ae9816e2..6a8761dd 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -42,8 +42,8 @@
             "allowAllPropertiesOnSameLine": true
         }],
         "react/jsx-first-prop-new-line": [2, "multiline"],
-        "react/jsx-indent": [2, 4],
-        "react/jsx-indent-props": [2, 4],
+        "react/jsx-indent": [2, 2],
+        "react/jsx-indent-props": [2, 2],
         "prettier/prettier": 2
     },
     "settings": {
diff --git a/.prettierrc.json b/.prettierrc.json
index eb3f4216..9494cd0a 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,7 +1,7 @@
 {
-    "bracketSpacing": true,
-    "semi": true,
-    "singleQuote": false,
-    "tabWidth": 4,
-    "trailingComma": "all"
+  "bracketSpacing": true,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all"
 }
diff --git a/config/mocks/DOMRect.ts b/config/mocks/DOMRect.ts
index 4b17474d..f90090ff 100644
--- a/config/mocks/DOMRect.ts
+++ b/config/mocks/DOMRect.ts
@@ -1,23 +1,23 @@
 export default class DOMRect {
-    bottom = 0;
-    left = 0;
-    right = 0;
-    top = 0;
-    constructor(
-        // eslint-disable-next-line no-unused-vars
-        public x = 0,
-        // eslint-disable-next-line no-unused-vars
-        public y = 0,
-        // eslint-disable-next-line no-unused-vars
-        public width = 0,
-        // eslint-disable-next-line no-unused-vars
-        public height = 0,
-    ) {
-        this.left = x;
-        this.top = y;
-        this.right = x + width;
-        this.bottom = y + height;
-    }
+  bottom = 0;
+  left = 0;
+  right = 0;
+  top = 0;
+  constructor(
+    // eslint-disable-next-line no-unused-vars
+    public x = 0,
+    // eslint-disable-next-line no-unused-vars
+    public y = 0,
+    // eslint-disable-next-line no-unused-vars
+    public width = 0,
+    // eslint-disable-next-line no-unused-vars
+    public height = 0,
+  ) {
+    this.left = x;
+    this.top = y;
+    this.right = x + width;
+    this.bottom = y + height;
+  }
 }
 
 Object.assign(window, { DOMRect });
diff --git a/config/mocks/ResizeObserver.ts b/config/mocks/ResizeObserver.ts
index fe7885fa..da466d64 100644
--- a/config/mocks/ResizeObserver.ts
+++ b/config/mocks/ResizeObserver.ts
@@ -1,13 +1,13 @@
 export default class ResizeObserver {
-    observe() {
-        // do nothing
-    }
-    unobserve() {
-        // do nothing
-    }
-    disconnect() {
-        // do nothing
-    }
+  observe() {
+    // do nothing
+  }
+  unobserve() {
+    // do nothing
+  }
+  disconnect() {
+    // do nothing
+  }
 }
 
 Object.assign(window, { ResizeObserver });
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index b1dd69d6..e185cba2 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -5,34 +5,34 @@ import { Clock } from "./Clock";
 import "./styles.css";
 
 export default function App(): JSX.Element {
-    const [usingPortal, setUsingPortal] = React.useState(false);
-    const [ref, reflection] = useMirror({ className: "Frame" });
-    return (
-        <div className="App">
-            <h1>React Mirror Demo</h1>
-            <button
-                className="Button"
-                disabled={usingPortal}
-                onClick={(): void => setUsingPortal(true)}
-            >
-                Start thinking with portals!
-            </button>
+  const [usingPortal, setUsingPortal] = React.useState(false);
+  const [ref, reflection] = useMirror({ className: "Frame" });
+  return (
+    <div className="App">
+      <h1>React Mirror Demo</h1>
+      <button
+        className="Button"
+        disabled={usingPortal}
+        onClick={(): void => setUsingPortal(true)}
+      >
+        Start thinking with portals!
+      </button>
 
-            <div className="Demo">
-                <div className="Frame" ref={ref}>
-                    <input className="Input" placeholder="type something..." />
-                    <div style={{ padding: 10 }}>Mirror mirror in my dom</div>
-                    <Clock />
-                </div>
-
-                {usingPortal ? (
-                    <Window onClose={(): void => setUsingPortal(false)}>
-                        {reflection}
-                    </Window>
-                ) : (
-                    reflection
-                )}
-            </div>
+      <div className="Demo">
+        <div className="Frame" ref={ref}>
+          <input className="Input" placeholder="type something..." />
+          <div style={{ padding: 10 }}>Mirror mirror in my dom</div>
+          <Clock />
         </div>
-    );
+
+        {usingPortal ? (
+          <Window onClose={(): void => setUsingPortal(false)}>
+            {reflection}
+          </Window>
+        ) : (
+          reflection
+        )}
+      </div>
+    </div>
+  );
 }
diff --git a/demo/src/Clock.tsx b/demo/src/Clock.tsx
index 4d34ed6c..0dec6c6b 100644
--- a/demo/src/Clock.tsx
+++ b/demo/src/Clock.tsx
@@ -2,30 +2,30 @@ import * as React from "react";
 import "./clock.css";
 
 function useCurrent(): Date {
-    const [date, setDate] = React.useState(new Date());
-    React.useEffect(() => {
-        const timeout = setTimeout(() => setDate(new Date()), 300);
-        return (): void => clearTimeout(timeout);
-    }, [date, setDate]);
-    return date;
+  const [date, setDate] = React.useState(new Date());
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setDate(new Date()), 300);
+    return (): void => clearTimeout(timeout);
+  }, [date, setDate]);
+  return date;
 }
 
 export function Clock(): JSX.Element {
-    const date = useCurrent();
-    const ratios = {
-        Second: date.getSeconds() / 60,
-        Minute: date.getMinutes() / 60,
-        Hour: (date.getHours() % 12) / 12,
-    };
-    return (
-        <div className="Clock Face" data-name="MyClock">
-            {Object.entries(ratios).map(([cls, ratio]) => (
-                <span
-                    key={cls}
-                    className={`Clock Hand ${cls}`}
-                    style={{ transform: `rotate(${ratio * 360}deg)` }}
-                ></span>
-            ))}
-        </div>
-    );
+  const date = useCurrent();
+  const ratios = {
+    Second: date.getSeconds() / 60,
+    Minute: date.getMinutes() / 60,
+    Hour: (date.getHours() % 12) / 12,
+  };
+  return (
+    <div className="Clock Face" data-name="MyClock">
+      {Object.entries(ratios).map(([cls, ratio]) => (
+        <span
+          key={cls}
+          className={`Clock Hand ${cls}`}
+          style={{ transform: `rotate(${ratio * 360}deg)` }}
+        ></span>
+      ))}
+    </div>
+  );
 }
diff --git a/demo/src/Window.tsx b/demo/src/Window.tsx
index 453843e6..c64f7f2d 100644
--- a/demo/src/Window.tsx
+++ b/demo/src/Window.tsx
@@ -2,24 +2,24 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 export function Window({
-    onClose,
-    children,
+  onClose,
+  children,
 }: {
-    onClose: () => void;
-    children: React.ReactNode;
+  onClose: () => void;
+  children: React.ReactNode;
 }): JSX.Element {
-    const portalWindow = React.useMemo(() => {
-        const _window = window.open(
-            "",
-            "React Mirror Portal Test",
-            "width=400,height=400",
-        );
-        _window?.addEventListener("beforeunload", onClose);
-        return _window;
-    }, [onClose]);
-    const portal = React.useMemo(() => {
-        if (!portalWindow?.document?.body) return;
-        return ReactDOM.createPortal(children, portalWindow.document.body);
-    }, [children, portalWindow]);
-    return <>{portal}</>;
+  const portalWindow = React.useMemo(() => {
+    const _window = window.open(
+      "",
+      "React Mirror Portal Test",
+      "width=400,height=400",
+    );
+    _window?.addEventListener("beforeunload", onClose);
+    return _window;
+  }, [onClose]);
+  const portal = React.useMemo(() => {
+    if (!portalWindow?.document?.body) return;
+    return ReactDOM.createPortal(children, portalWindow.document.body);
+  }, [children, portalWindow]);
+  return <>{portal}</>;
 }
diff --git a/package.json b/package.json
index 80f00c12..a07cd590 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
         "lib"
     ],
     "scripts": {
-        "lint": "eslint . --ext .js,.ts",
+        "lint": "eslint . --ext .js,.ts,.jsx,.tsx",
         "build": "webpack --mode=production",
         "build-watch": "webpack --mode=development --watch",
         "build-types": "tsc --declaration --emitDeclarationOnly --project tsconfig.prod.json",
diff --git a/src/__mocks__.ts b/src/__mocks__.ts
index ffca5fe2..a5fbefae 100644
--- a/src/__mocks__.ts
+++ b/src/__mocks__.ts
@@ -1,25 +1,25 @@
 export function addDomNode() {
-    const domNode = document.createElement("div");
-    document.body.appendChild(domNode);
-    const node0 = document.createComment("comment node");
-    document.appendChild(node0);
-    const node1 = document.createElement("div");
-    domNode.appendChild(node1);
-    node1.className = "class1 one";
-    node1.setAttribute("attr", "[value");
-    const node2 = document.createElement("input");
-    node1.appendChild(node2);
-    node2.className = "class2 two";
-    node2.value = "input-value";
-    const node3 = document.createTextNode("text content");
-    domNode.appendChild(node3);
-    return domNode;
+  const domNode = document.createElement("div");
+  document.body.appendChild(domNode);
+  const node0 = document.createComment("comment node");
+  document.appendChild(node0);
+  const node1 = document.createElement("div");
+  domNode.appendChild(node1);
+  node1.className = "class1 one";
+  node1.setAttribute("attr", "[value");
+  const node2 = document.createElement("input");
+  node1.appendChild(node2);
+  node2.className = "class2 two";
+  node2.value = "input-value";
+  const node3 = document.createTextNode("text content");
+  domNode.appendChild(node3);
+  return domNode;
 }
 
 export function addDomStyles() {
-    const domStyle = document.createElement("style");
-    document.head.appendChild(domStyle);
-    domStyle.innerHTML = `
+  const domStyle = document.createElement("style");
+  document.head.appendChild(domStyle);
+  domStyle.innerHTML = `
         @charset "utf-8";
         @font-face {
             font-family: "Open Sans";
@@ -58,5 +58,5 @@ export function addDomStyles() {
             width: 20px;
         }
     `;
-    return domStyle;
+  return domStyle;
 }
diff --git a/src/__tests__/index.test.ts b/src/__tests__/index.test.ts
index 6991c634..c8e18d05 100644
--- a/src/__tests__/index.test.ts
+++ b/src/__tests__/index.test.ts
@@ -1,7 +1,7 @@
 describe("Entry", () => {
-    it("exports expected modules", async () => {
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        expect(require("../")).toMatchInlineSnapshot(`
+  it("exports expected modules", async () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    expect(require("../")).toMatchInlineSnapshot(`
             Object {
               "Frame": [Function],
               "Mirror": [Function],
@@ -9,5 +9,5 @@ describe("Entry", () => {
               "useMirror": [Function],
             }
         `);
-    });
+  });
 });
diff --git a/src/components/Element.tsx b/src/components/Element.tsx
index 944b23d4..2b99469a 100644
--- a/src/components/Element.tsx
+++ b/src/components/Element.tsx
@@ -1,28 +1,28 @@
 import * as React from "react";
 
 export type ElementProps<T extends string> =
-    T extends keyof JSX.IntrinsicElements
-        ? JSX.IntrinsicElements[T]
-        : JSX.IntrinsicElements[keyof JSX.IntrinsicElements];
+  T extends keyof JSX.IntrinsicElements
+    ? JSX.IntrinsicElements[T]
+    : JSX.IntrinsicElements[keyof JSX.IntrinsicElements];
 
 type DOMElement<T extends string> = T extends keyof HTMLElementTagNameMap
-    ? HTMLElementTagNameMap[T]
-    : never;
+  ? HTMLElementTagNameMap[T]
+  : never;
 
 type DOMElementProps<T extends string> = {
-    tagName: T;
-    domRef?: React.Ref<DOMElement<T>>;
+  tagName: T;
+  domRef?: React.Ref<DOMElement<T>>;
 } & ElementProps<T>;
 
 export function Element<T extends string>({
-    children,
-    domRef,
-    tagName,
-    ...props
+  children,
+  domRef,
+  tagName,
+  ...props
 }: DOMElementProps<T>) {
-    return React.createElement(
-        tagName.toLowerCase(),
-        { ...props, ref: domRef },
-        ...(Array.isArray(children) ? children : [children]),
-    );
+  return React.createElement(
+    tagName.toLowerCase(),
+    { ...props, ref: domRef },
+    ...(Array.isArray(children) ? children : [children]),
+  );
 }
diff --git a/src/components/Frame.tsx b/src/components/Frame.tsx
index 6125bfa2..0cdce356 100644
--- a/src/components/Frame.tsx
+++ b/src/components/Frame.tsx
@@ -10,54 +10,54 @@ export type FrameProps = Omit<IFrameProps, "getMountNode">;
  * Used to wrap and isolate reflection from rest of document
  */
 export function Frame({ children, ...frameProps }: FrameProps) {
-    return (
-        <IFrame {...frameProps}>
-            <ResetStyle />
-            <DocumentStyle />
-            {children}
-        </IFrame>
-    );
+  return (
+    <IFrame {...frameProps}>
+      <ResetStyle />
+      <DocumentStyle />
+      {children}
+    </IFrame>
+  );
 }
 
 /**
  * Copy of the current document style sheets to be used in framing
  */
 function DocumentStyle() {
-    const [rules, setRules] = React.useState(getAllStyleRules);
+  const [rules, setRules] = React.useState(getAllStyleRules);
 
-    const onUpdate = React.useCallback(
-        function updateRules() {
-            const newRules = getAllStyleRules();
-            if (JSON.stringify(rules) === JSON.stringify(newRules)) return;
-            setRules(newRules);
-        },
-        [rules],
-    );
+  const onUpdate = React.useCallback(
+    function updateRules() {
+      const newRules = getAllStyleRules();
+      if (JSON.stringify(rules) === JSON.stringify(newRules)) return;
+      setRules(newRules);
+    },
+    [rules],
+  );
 
-    useObserver({
-        ObserverClass: MutationObserver,
-        onUpdate,
-        initOptions: {
-            attributeFilter: ["class"],
-            attributes: true,
-            characterData: true,
-            childList: true,
-            subtree: true,
-        },
-        target: window.document,
-    });
+  useObserver({
+    ObserverClass: MutationObserver,
+    onUpdate,
+    initOptions: {
+      attributeFilter: ["class"],
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true,
+    },
+    target: window.document,
+  });
 
-    return <Style id="parent-document-mirror-stylesheets" rules={rules} />;
+  return <Style id="parent-document-mirror-stylesheets" rules={rules} />;
 }
 
 /**
  * https://www.webfx.com/blog/web-design/should-you-reset-your-css
  */
 function ResetStyle() {
-    return (
-        <link
-            rel="stylesheet"
-            href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
-        />
-    );
+  return (
+    <link
+      rel="stylesheet"
+      href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
+    />
+  );
 }
diff --git a/src/components/IFrame.tsx b/src/components/IFrame.tsx
index cc28f00b..c9dc78b0 100644
--- a/src/components/IFrame.tsx
+++ b/src/components/IFrame.tsx
@@ -4,22 +4,22 @@ import { useCallbackRef } from "../hooks/useRef";
 import { ElementProps } from "./Element";
 
 export interface IFrameProps extends ElementProps<"iframe"> {
-    /** Get the iframe content node the react children will be rendered into */
-    getMountNode?: (_?: Window) => Element | undefined;
+  /** Get the iframe content node the react children will be rendered into */
+  getMountNode?: (_?: Window) => Element | undefined;
 }
 
 export function IFrame({
-    children,
-    getMountNode = (window) => window?.document?.body,
-    ...props
+  children,
+  getMountNode = (window) => window?.document?.body,
+  ...props
 }: IFrameProps) {
-    const [iframe, ref] = useCallbackRef<HTMLIFrameElement>();
-    const mountNode = getMountNode(iframe?.contentWindow ?? undefined);
-    const portal = usePortal({ source: children, target: mountNode });
+  const [iframe, ref] = useCallbackRef<HTMLIFrameElement>();
+  const mountNode = getMountNode(iframe?.contentWindow ?? undefined);
+  const portal = usePortal({ source: children, target: mountNode });
 
-    return (
-        <iframe {...props} ref={ref}>
-            {portal}
-        </iframe>
-    );
+  return (
+    <iframe {...props} ref={ref}>
+      {portal}
+    </iframe>
+  );
 }
diff --git a/src/components/Mirror.tsx b/src/components/Mirror.tsx
index 1febd772..25634a5f 100644
--- a/src/components/Mirror.tsx
+++ b/src/components/Mirror.tsx
@@ -6,46 +6,46 @@ import { Frame, FrameProps } from "./Frame";
 import { Reflection } from "./Reflection";
 
 export interface MirrorProps extends Pick<FrameProps, "className"> {
-    frameProps?: FrameProps;
-    /** Reference to target instance to reflect */
-    reflect?: React.ReactInstance;
+  frameProps?: FrameProps;
+  /** Reference to target instance to reflect */
+  reflect?: React.ReactInstance;
 }
 
 /**
  * Create reflection wrapped in frame element
  */
 export function Mirror({ className, frameProps, reflect }: MirrorProps) {
-    const { instanceId, real } = React.useMemo(
-        () => ({
-            /** Unique identifier of this mirror */
-            instanceId: randomString(7),
-            /** Actual DOM node of react element being reflected */
-            real: getRealNode(reflect),
-        }),
-        [reflect],
-    );
+  const { instanceId, real } = React.useMemo(
+    () => ({
+      /** Unique identifier of this mirror */
+      instanceId: randomString(7),
+      /** Actual DOM node of react element being reflected */
+      real: getRealNode(reflect),
+    }),
+    [reflect],
+  );
 
-    const { top, bottom, left, right } = useDimensions(real);
-    return (
-        <Frame
-            className={className}
-            height={bottom - top}
-            id={instanceId}
-            width={right - left}
-            {...frameProps}
-        >
-            <Reflection real={real} style={{ pointerEvents: "none" }} />
-        </Frame>
-    );
+  const { top, bottom, left, right } = useDimensions(real);
+  return (
+    <Frame
+      className={className}
+      height={bottom - top}
+      id={instanceId}
+      width={right - left}
+      {...frameProps}
+    >
+      <Reflection real={real} style={{ pointerEvents: "none" }} />
+    </Frame>
+  );
 }
 
 function getRealNode(instance?: React.ReactInstance) {
-    try {
-        // eslint-disable-next-line react/no-find-dom-node
-        return ReactDOM.findDOMNode(instance) ?? undefined;
-    } catch (e) {
-        // eslint-disable-next-line no-console
-        console.warn(e);
-        return;
-    }
+  try {
+    // eslint-disable-next-line react/no-find-dom-node
+    return ReactDOM.findDOMNode(instance) ?? undefined;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn(e);
+    return;
+  }
 }
diff --git a/src/components/Reflection.tsx b/src/components/Reflection.tsx
index 1dba7cc1..9469eb08 100644
--- a/src/components/Reflection.tsx
+++ b/src/components/Reflection.tsx
@@ -10,98 +10,98 @@ import { Element } from "./Element";
  * https://developer.mozilla.org/en-US/docs/Web/Events#event_listing
  */
 const TRACK_EVENTS = new Set([
-    "click",
-    "input",
-    "keypress",
-    "keydown",
-    "keyup",
-    "mousemove",
-    "mousedown",
-    "mouseup",
+  "click",
+  "input",
+  "keypress",
+  "keydown",
+  "keyup",
+  "mousemove",
+  "mousedown",
+  "mouseup",
 ] as const);
 const OBSERVER_INIT = {
-    attributes: true,
-    childList: true,
-    subtree: false,
-    characterData: true,
+  attributes: true,
+  childList: true,
+  subtree: false,
+  characterData: true,
 } as const;
 
 export type ReflectionProps = {
-    className?: string;
-    real?: Element | Text;
-    style?: React.CSSProperties;
+  className?: string;
+  real?: Element | Text;
+  style?: React.CSSProperties;
 };
 
 export function Reflection({ className, real, style }: ReflectionProps) {
-    const {
-        class: classList,
-        style: styleList,
-        ...attributes
-    } = getAttributes(real);
-    const children = getChildren(real).map((childNode, i) => {
-        return <Reflection key={i} real={childNode} style={style} />;
-    });
+  const {
+    class: classList,
+    style: styleList,
+    ...attributes
+  } = getAttributes(real);
+  const children = getChildren(real).map((childNode, i) => {
+    return <Reflection key={i} real={childNode} style={style} />;
+  });
 
-    // Trigger a rerender
-    const { rerender: onUpdate } = useRenderTrigger();
-    // Observe changes on real element
-    useObserver({
-        initOptions: OBSERVER_INIT,
-        ObserverClass: MutationObserver,
-        onEvents: TRACK_EVENTS,
-        onUpdate,
-        target: real,
-    });
+  // Trigger a rerender
+  const { rerender: onUpdate } = useRenderTrigger();
+  // Observe changes on real element
+  useObserver({
+    initOptions: OBSERVER_INIT,
+    ObserverClass: MutationObserver,
+    onEvents: TRACK_EVENTS,
+    onUpdate,
+    target: real,
+  });
 
-    if (!real) return null;
-    if (isText(real)) return <>{real.textContent}</>;
-    // TODO: copy over missing computed styles from real to reflection
-    return (
-        <Element
-            className={mergeClassList(className, classList)}
-            readOnly
-            style={mergeStyleProps(style, styleList)}
-            tagName={real.nodeName}
-            {...attributes}
-        >
-            {children}
-        </Element>
-    );
+  if (!real) return null;
+  if (isText(real)) return <>{real.textContent}</>;
+  // TODO: copy over missing computed styles from real to reflection
+  return (
+    <Element
+      className={mergeClassList(className, classList)}
+      readOnly
+      style={mergeStyleProps(style, styleList)}
+      tagName={real.nodeName}
+      {...attributes}
+    >
+      {children}
+    </Element>
+  );
 }
 
 function mergeClassList(className?: string, classList?: string) {
-    return [className, classList].filter(Boolean).join(" ");
+  return [className, classList].filter(Boolean).join(" ");
 }
 
 export function mergeStyleProps(
-    cssProps: React.CSSProperties = {},
-    inlineCSS = "",
-    styleDecl?: CSSStyleDeclaration,
+  cssProps: React.CSSProperties = {},
+  inlineCSS = "",
+  styleDecl?: CSSStyleDeclaration,
 ) {
-    return {
-        ...(styleDecl &&
-            asCSSProperties(
-                Array.from(styleDecl),
-                (prop) => prop,
-                (prop) => styleDecl.getPropertyValue(prop),
-            )),
-        ...asCSSProperties(
-            inlineCSS.split(";").map((propValue) => propValue.split(":")),
-            ([prop]) => prop.trim(),
-            ([, value]) => value?.trim(),
-        ),
-        ...cssProps,
-    } as React.CSSProperties;
+  return {
+    ...(styleDecl &&
+      asCSSProperties(
+        Array.from(styleDecl),
+        (prop) => prop,
+        (prop) => styleDecl.getPropertyValue(prop),
+      )),
+    ...asCSSProperties(
+      inlineCSS.split(";").map((propValue) => propValue.split(":")),
+      ([prop]) => prop.trim(),
+      ([, value]) => value?.trim(),
+    ),
+    ...cssProps,
+  } as React.CSSProperties;
 }
 
 function asCSSProperties<T>(
-    items: T[],
-    getProp: (_: T) => string,
-    getValue: (_: T) => string | undefined,
+  items: T[],
+  getProp: (_: T) => string,
+  getValue: (_: T) => string | undefined,
 ) {
-    return Object.fromEntries(
-        items
-            .map((item) => [spinalToCamelCase(getProp(item)), getValue(item)])
-            .filter(([, value]) => Boolean(value)),
-    ) as React.CSSProperties;
+  return Object.fromEntries(
+    items
+      .map((item) => [spinalToCamelCase(getProp(item)), getValue(item)])
+      .filter(([, value]) => Boolean(value)),
+  ) as React.CSSProperties;
 }
diff --git a/src/components/Styles.tsx b/src/components/Styles.tsx
index 2fc68c44..fd4c5ce2 100644
--- a/src/components/Styles.tsx
+++ b/src/components/Styles.tsx
@@ -2,9 +2,9 @@ import * as React from "react";
 import { ElementProps } from "./Element";
 
 export interface StyleProps extends ElementProps<"style"> {
-    rules: string[];
+  rules: string[];
 }
 
 export function Style({ rules, ...styleProps }: StyleProps) {
-    return <style {...styleProps}>{rules}</style>;
+  return <style {...styleProps}>{rules}</style>;
 }
diff --git a/src/components/__tests__/Element.test.tsx b/src/components/__tests__/Element.test.tsx
index 190992a3..25dec00d 100644
--- a/src/components/__tests__/Element.test.tsx
+++ b/src/components/__tests__/Element.test.tsx
@@ -3,24 +3,24 @@ import { render } from "@testing-library/react";
 import { Element } from "../Element";
 
 describe("Element", () => {
-    it("creates expected element", () => {
-        const ref = React.createRef<HTMLDivElement>();
-        expect(ref.current).toBeNull();
-        render(<Element tagName="div" domRef={ref} className="clsA clsB" />);
-        expect(ref.current).toMatchInlineSnapshot(`
+  it("creates expected element", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    expect(ref.current).toBeNull();
+    render(<Element tagName="div" domRef={ref} className="clsA clsB" />);
+    expect(ref.current).toMatchInlineSnapshot(`
             <div
               class="clsA clsB"
             />
         `);
-    });
+  });
 
-    it("creates expected element with array of children", () => {
-        const subject = render(
-            <Element tagName="span" data-test-id="testId">
-                {["childA", "childB"]}
-            </Element>,
-        );
-        expect(subject.getByTestId("testId")).toMatchInlineSnapshot(`
+  it("creates expected element with array of children", () => {
+    const subject = render(
+      <Element tagName="span" data-test-id="testId">
+        {["childA", "childB"]}
+      </Element>,
+    );
+    expect(subject.getByTestId("testId")).toMatchInlineSnapshot(`
             <span
               data-test-id="testId"
             >
@@ -28,16 +28,16 @@ describe("Element", () => {
               childB
             </span>
         `);
-    });
+  });
 
-    it("creates element with children multiple nodes", () => {
-        const subject = render(
-            <Element tagName="span" data-test-id="testId">
-                <>{"childA"}</>
-                <>{"childB"}</>
-            </Element>,
-        );
-        expect(subject.getByTestId("testId")).toMatchInlineSnapshot(`
+  it("creates element with children multiple nodes", () => {
+    const subject = render(
+      <Element tagName="span" data-test-id="testId">
+        <>{"childA"}</>
+        <>{"childB"}</>
+      </Element>,
+    );
+    expect(subject.getByTestId("testId")).toMatchInlineSnapshot(`
             <span
               data-test-id="testId"
             >
@@ -45,20 +45,20 @@ describe("Element", () => {
               childB
             </span>
         `);
-    });
+  });
 
-    it("creates element with children single nodes", () => {
-        const subject = render(
-            <Element tagName="span" data-test-id="testId">
-                {"childA"}
-            </Element>,
-        );
-        expect(subject.getByTestId("testId")).toMatchInlineSnapshot(`
+  it("creates element with children single nodes", () => {
+    const subject = render(
+      <Element tagName="span" data-test-id="testId">
+        {"childA"}
+      </Element>,
+    );
+    expect(subject.getByTestId("testId")).toMatchInlineSnapshot(`
             <span
               data-test-id="testId"
             >
               childA
             </span>
         `);
-    });
+  });
 });
diff --git a/src/components/__tests__/Frame.test.tsx b/src/components/__tests__/Frame.test.tsx
index 6f091d96..4fe398ec 100644
--- a/src/components/__tests__/Frame.test.tsx
+++ b/src/components/__tests__/Frame.test.tsx
@@ -4,25 +4,24 @@ import { addDomStyles } from "../../__mocks__";
 import { Frame } from "../Frame";
 
 describe("Frame", () => {
-    it("creates frame element with styles and children", async () => {
-        // add document styles to be cloned
-        const domStyle = addDomStyles();
+  it("creates frame element with styles and children", async () => {
+    // add document styles to be cloned
+    const domStyle = addDomStyles();
 
-        const subject = render(
-            <Frame data-test-id="testId">
-                <div>{"child text"}</div>
-            </Frame>,
-        );
-        const iframe = subject.getByTestId("testId") as HTMLIFrameElement;
+    const subject = render(
+      <Frame data-test-id="testId">
+        <div>{"child text"}</div>
+      </Frame>,
+    );
+    const iframe = subject.getByTestId("testId") as HTMLIFrameElement;
 
-        expect(iframe).toMatchInlineSnapshot(`
+    expect(iframe).toMatchInlineSnapshot(`
             <iframe
               data-test-id="testId"
             />
         `);
 
-        expect(iframe.contentDocument?.firstElementChild)
-            .toMatchInlineSnapshot(`
+    expect(iframe.contentDocument?.firstElementChild).toMatchInlineSnapshot(`
             <html>
               <head />
               <body>
@@ -51,12 +50,11 @@ describe("Frame", () => {
             </html>
         `);
 
-        await act(async () => {
-            domStyle.remove();
-        });
+    await act(async () => {
+      domStyle.remove();
+    });
 
-        expect(iframe.contentDocument?.firstElementChild)
-            .toMatchInlineSnapshot(`
+    expect(iframe.contentDocument?.firstElementChild).toMatchInlineSnapshot(`
             <html>
               <head />
               <body>
@@ -73,5 +71,5 @@ describe("Frame", () => {
               </body>
             </html>
         `);
-    });
+  });
 });
diff --git a/src/components/__tests__/Mirror.test.tsx b/src/components/__tests__/Mirror.test.tsx
index 1a339b5e..156c8a62 100644
--- a/src/components/__tests__/Mirror.test.tsx
+++ b/src/components/__tests__/Mirror.test.tsx
@@ -6,28 +6,28 @@ import * as useDimensions from "../../hooks/useDimensions";
 import { Mirror } from "../Mirror";
 
 describe("Mirror", () => {
-    const mathRandomSpy = jest.spyOn(Math, "random");
-    const useDimensionsSpy = jest.spyOn(useDimensions, "useDimensions");
+  const mathRandomSpy = jest.spyOn(Math, "random");
+  const useDimensionsSpy = jest.spyOn(useDimensions, "useDimensions");
 
-    beforeEach(() => {
-        mathRandomSpy.mockReturnValue(0.123456789);
-        useDimensionsSpy.mockReturnValue(new DOMRect());
-    });
+  beforeEach(() => {
+    mathRandomSpy.mockReturnValue(0.123456789);
+    useDimensionsSpy.mockReturnValue(new DOMRect());
+  });
 
-    afterEach(() => {
-        jest.resetAllMocks();
-    });
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
 
-    it("frames an empty reflection", () => {
-        const subject = render(
-            <Mirror
-                frameProps={{
-                    className: "mirror-frame-cls",
-                    id: "mirror-frame-id",
-                }}
-            />,
-        );
-        expect(subject.baseElement).toMatchInlineSnapshot(`
+  it("frames an empty reflection", () => {
+    const subject = render(
+      <Mirror
+        frameProps={{
+          className: "mirror-frame-cls",
+          id: "mirror-frame-id",
+        }}
+      />,
+    );
+    expect(subject.baseElement).toMatchInlineSnapshot(`
             <body>
               <div>
                 <iframe
@@ -39,24 +39,24 @@ describe("Mirror", () => {
               </div>
             </body>
         `);
-    });
+  });
 
-    it("frames an empty reflection when find node errors", () => {
-        const expectedError = Error("Expected test error");
-        const findDOMNodeSpy = jest
-            .spyOn(ReactDOM, "findDOMNode")
-            .mockImplementation(() => {
-                throw expectedError;
-            });
-        const consoleWarnSpy = jest
-            .spyOn(console, "warn")
-            .mockImplementation(() => undefined);
+  it("frames an empty reflection when find node errors", () => {
+    const expectedError = Error("Expected test error");
+    const findDOMNodeSpy = jest
+      .spyOn(ReactDOM, "findDOMNode")
+      .mockImplementation(() => {
+        throw expectedError;
+      });
+    const consoleWarnSpy = jest
+      .spyOn(console, "warn")
+      .mockImplementation(() => undefined);
 
-        const subject = render(<Mirror />);
+    const subject = render(<Mirror />);
 
-        expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
-        expect(consoleWarnSpy).toHaveBeenLastCalledWith(expectedError);
-        expect(subject.baseElement).toMatchInlineSnapshot(`
+    expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
+    expect(consoleWarnSpy).toHaveBeenLastCalledWith(expectedError);
+    expect(subject.baseElement).toMatchInlineSnapshot(`
             <body>
               <div>
                 <iframe
@@ -68,21 +68,21 @@ describe("Mirror", () => {
             </body>
         `);
 
-        findDOMNodeSpy.mockRestore();
-    });
+    findDOMNodeSpy.mockRestore();
+  });
 
-    it("renders reflection with styles", async () => {
-        /** add nodes that will be mirrored */
-        const domNode = addDomNode();
-        /** test reflection */
-        const frameId = "mirrorFrame";
-        const renderProps = {
-            frameProps: { className: frameId, "data-test-id": frameId },
-            reflect: domNode,
-        };
+  it("renders reflection with styles", async () => {
+    /** add nodes that will be mirrored */
+    const domNode = addDomNode();
+    /** test reflection */
+    const frameId = "mirrorFrame";
+    const renderProps = {
+      frameProps: { className: frameId, "data-test-id": frameId },
+      reflect: domNode,
+    };
 
-        const subject = render(<Mirror {...renderProps} />);
-        expect(subject.baseElement).toMatchInlineSnapshot(`
+    const subject = render(<Mirror {...renderProps} />);
+    expect(subject.baseElement).toMatchInlineSnapshot(`
             <body>
               <div>
                 <div
@@ -107,9 +107,8 @@ describe("Mirror", () => {
             </body>
         `);
 
-        const iframe = subject.getByTestId(frameId) as HTMLIFrameElement;
-        expect(iframe.contentDocument?.firstElementChild)
-            .toMatchInlineSnapshot(`
+    const iframe = subject.getByTestId(frameId) as HTMLIFrameElement;
+    expect(iframe.contentDocument?.firstElementChild).toMatchInlineSnapshot(`
             <html>
               <head />
               <body>
@@ -143,9 +142,9 @@ describe("Mirror", () => {
               </body>
             </html>
         `);
-        /** clean up */
-        await act(async () => {
-            domNode.remove();
-        });
+    /** clean up */
+    await act(async () => {
+      domNode.remove();
     });
+  });
 });
diff --git a/src/components/__tests__/Reflection.test.tsx b/src/components/__tests__/Reflection.test.tsx
index 7b3b27b8..00e744cf 100644
--- a/src/components/__tests__/Reflection.test.tsx
+++ b/src/components/__tests__/Reflection.test.tsx
@@ -5,31 +5,31 @@ import { getAttributes } from "../../utils/dom";
 import { Reflection, mergeStyleProps } from "../Reflection";
 
 describe("Reflection", () => {
-    it("reflects nothing", () => {
-        const subject = render(<Reflection />);
-        expect(subject.baseElement).toMatchInlineSnapshot(`
+  it("reflects nothing", () => {
+    const subject = render(<Reflection />);
+    expect(subject.baseElement).toMatchInlineSnapshot(`
             <body>
               <div />
             </body>
         `);
-    });
+  });
 
-    it("reflect text node", () => {
-        const domNode = document.createTextNode("text content");
-        const subject = render(<Reflection real={domNode} />);
-        expect(subject.baseElement).toMatchInlineSnapshot(`
+  it("reflect text node", () => {
+    const domNode = document.createTextNode("text content");
+    const subject = render(<Reflection real={domNode} />);
+    expect(subject.baseElement).toMatchInlineSnapshot(`
             <body>
               <div>
                 text content
               </div>
             </body>
         `);
-    });
+  });
 
-    it("reflect html element", async () => {
-        const domNode = addDomNode();
-        const subject = render(<Reflection real={domNode} />);
-        expect(subject.baseElement).toMatchInlineSnapshot(`
+  it("reflect html element", async () => {
+    const domNode = addDomNode();
+    const subject = render(<Reflection real={domNode} />);
+    expect(subject.baseElement).toMatchInlineSnapshot(`
             <body>
               <div>
                 <div
@@ -63,110 +63,110 @@ describe("Reflection", () => {
               </div>
             </body>
         `);
-        await act(async () => void domNode.remove());
+    await act(async () => void domNode.remove());
+  });
+
+  it("perseves style prop over element inline style", async () => {
+    const domNode = addDomNode();
+    domNode.dataset.testId = "test-id";
+    const style = {
+      color: "red",
+      fontSize: "18px",
+      borderWidth: "2px",
+    };
+    domNode.style.color = "blue";
+    domNode.style.backgroundColor = "blue";
+    domNode.style.border = "solid 1px green";
+
+    const baseElement = document.createElement("div");
+    const subject = render(<Reflection real={domNode} style={style} />, {
+      baseElement,
     });
-
-    it("perseves style prop over element inline style", async () => {
-        const domNode = addDomNode();
-        domNode.dataset.testId = "test-id";
-        const style = {
-            color: "red",
-            fontSize: "18px",
-            borderWidth: "2px",
-        };
-        domNode.style.color = "blue";
-        domNode.style.backgroundColor = "blue";
-        domNode.style.border = "solid 1px green";
-
-        const baseElement = document.createElement("div");
-        const subject = render(<Reflection real={domNode} style={style} />, {
-            baseElement,
-        });
-        const reflection = subject.getByTestId(
-            domNode.dataset.testId,
-        ) as HTMLDivElement;
-
-        expect(reflection?.style.color).toEqual("red");
-        expect(reflection?.style.backgroundColor).toEqual("blue");
-        expect(reflection?.style.borderColor).toEqual("green");
-        expect(reflection?.style.borderWidth).toEqual("2px");
-        expect(reflection?.style.borderStyle).toEqual("solid");
-
-        await act(async () => void domNode.remove());
+    const reflection = subject.getByTestId(
+      domNode.dataset.testId,
+    ) as HTMLDivElement;
+
+    expect(reflection?.style.color).toEqual("red");
+    expect(reflection?.style.backgroundColor).toEqual("blue");
+    expect(reflection?.style.borderColor).toEqual("green");
+    expect(reflection?.style.borderWidth).toEqual("2px");
+    expect(reflection?.style.borderStyle).toEqual("solid");
+
+    await act(async () => void domNode.remove());
+  });
+
+  it("perseves all classes from class name and list", async () => {
+    const domNode = addDomNode();
+    domNode.classList.add("realClsA");
+    domNode.classList.add("realClsB");
+    domNode.dataset.testId = "test-id";
+    const baseElement = document.createElement("div");
+
+    const subject = render(
+      <Reflection real={domNode} className="clsReflect reflectionCls" />,
+      { baseElement },
+    );
+    const reflection = subject.getByTestId(
+      domNode.dataset.testId,
+    ) as HTMLDivElement;
+
+    expect(Array.from(reflection.classList).sort()).toEqual([
+      "clsReflect",
+      "realClsA",
+      "realClsB",
+      "reflectionCls",
+    ]);
+
+    await act(async () => void domNode.remove());
+  });
+
+  it("tracks attribute changes in reflected node", async () => {
+    const domNode = addDomNode();
+    domNode.dataset.testId = "test-id";
+    const baseElement = document.createElement("div");
+
+    const subject = render(<Reflection real={domNode} />, { baseElement });
+    const reflection = subject.getByTestId(
+      domNode.dataset.testId,
+    ) as HTMLDivElement;
+
+    const expectedAttributes = {
+      class: "",
+      "data-test-id": "test-id",
+      readonly: "",
+    };
+    expect(getAttributes(reflection)).toEqual(expectedAttributes);
+
+    await act(async () => {
+      domNode.setAttribute("newAttr", "newValue");
     });
-
-    it("perseves all classes from class name and list", async () => {
-        const domNode = addDomNode();
-        domNode.classList.add("realClsA");
-        domNode.classList.add("realClsB");
-        domNode.dataset.testId = "test-id";
-        const baseElement = document.createElement("div");
-
-        const subject = render(
-            <Reflection real={domNode} className="clsReflect reflectionCls" />,
-            { baseElement },
-        );
-        const reflection = subject.getByTestId(
-            domNode.dataset.testId,
-        ) as HTMLDivElement;
-
-        expect(Array.from(reflection.classList).sort()).toEqual([
-            "clsReflect",
-            "realClsA",
-            "realClsB",
-            "reflectionCls",
-        ]);
-
-        await act(async () => void domNode.remove());
-    });
-
-    it("tracks attribute changes in reflected node", async () => {
-        const domNode = addDomNode();
-        domNode.dataset.testId = "test-id";
-        const baseElement = document.createElement("div");
-
-        const subject = render(<Reflection real={domNode} />, { baseElement });
-        const reflection = subject.getByTestId(
-            domNode.dataset.testId,
-        ) as HTMLDivElement;
-
-        const expectedAttributes = {
-            class: "",
-            "data-test-id": "test-id",
-            readonly: "",
-        };
-        expect(getAttributes(reflection)).toEqual(expectedAttributes);
-
-        await act(async () => {
-            domNode.setAttribute("newAttr", "newValue");
-        });
-        expect(getAttributes(reflection)).toEqual({
-            ...expectedAttributes,
-            newattr: "newValue",
-        });
-
-        await act(async () => void domNode.remove());
+    expect(getAttributes(reflection)).toEqual({
+      ...expectedAttributes,
+      newattr: "newValue",
     });
 
-    describe("mergeStyleProps", () => {
-        const CSS_STYLE_NONE = document.createElement("span").style;
-        const CSS_STYLE_DECL = document.createElement("span").style;
-        CSS_STYLE_DECL.borderColor = "red";
-
-        it.each`
-            cssProps                   | inlineStyle              | styleDecl         | expectedStyle
-            ${{}}                      | ${""}                    | ${CSS_STYLE_NONE} | ${{}}
-            ${{}}                      | ${""}                    | ${CSS_STYLE_DECL} | ${{ borderColor: "red" }}
-            ${{}}                      | ${"borderColor: green"}  | ${CSS_STYLE_DECL} | ${{ borderColor: "green" }}
-            ${{ borderColor: "blue" }} | ${"borderColor: green"}  | ${CSS_STYLE_DECL} | ${{ borderColor: "blue" }}
-            ${{ borderWidth: "1px" }}  | ${"border-style: solid"} | ${CSS_STYLE_DECL} | ${{ borderColor: "red", borderStyle: "solid", borderWidth: "1px" }}
-        `(
-            "creates css style with expected props",
-            ({ cssProps, expectedStyle, inlineStyle, styleDecl }) => {
-                expect(
-                    mergeStyleProps(cssProps, inlineStyle, styleDecl),
-                ).toEqual(expectedStyle);
-            },
+    await act(async () => void domNode.remove());
+  });
+
+  describe("mergeStyleProps", () => {
+    const CSS_STYLE_NONE = document.createElement("span").style;
+    const CSS_STYLE_DECL = document.createElement("span").style;
+    CSS_STYLE_DECL.borderColor = "red";
+
+    it.each`
+      cssProps                   | inlineStyle              | styleDecl         | expectedStyle
+      ${{}}                      | ${""}                    | ${CSS_STYLE_NONE} | ${{}}
+      ${{}}                      | ${""}                    | ${CSS_STYLE_DECL} | ${{ borderColor: "red" }}
+      ${{}}                      | ${"borderColor: green"}  | ${CSS_STYLE_DECL} | ${{ borderColor: "green" }}
+      ${{ borderColor: "blue" }} | ${"borderColor: green"}  | ${CSS_STYLE_DECL} | ${{ borderColor: "blue" }}
+      ${{ borderWidth: "1px" }}  | ${"border-style: solid"} | ${CSS_STYLE_DECL} | ${{ borderColor: "red", borderStyle: "solid", borderWidth: "1px" }}
+    `(
+      "creates css style with expected props",
+      ({ cssProps, expectedStyle, inlineStyle, styleDecl }) => {
+        expect(mergeStyleProps(cssProps, inlineStyle, styleDecl)).toEqual(
+          expectedStyle,
         );
-    });
+      },
+    );
+  });
 });
diff --git a/src/hooks/__tests__/useDimensions.test.ts b/src/hooks/__tests__/useDimensions.test.ts
index a862d3b3..43755720 100644
--- a/src/hooks/__tests__/useDimensions.test.ts
+++ b/src/hooks/__tests__/useDimensions.test.ts
@@ -7,13 +7,13 @@ import { useDimensions } from "../useDimensions";
 const useObserverSpy = jest.spyOn(useObserver, "useObserver");
 
 describe("useDimension", () => {
-    afterEach(() => {
-        jest.resetAllMocks();
-    });
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
 
-    it("returns empty dimension for nothing", () => {
-        const { result } = renderHook(() => useDimensions());
-        expect(result.current).toMatchInlineSnapshot(`
+  it("returns empty dimension for nothing", () => {
+    const { result } = renderHook(() => useDimensions());
+    expect(result.current).toMatchInlineSnapshot(`
             DOMRect {
               "bottom": 0,
               "height": 0,
@@ -25,68 +25,68 @@ describe("useDimension", () => {
               "y": 0,
             }
         `);
-    });
-
-    it("returns dimension for rendered text node", async () => {
-        document.body.style.fontSize = "18px";
-        const textNode = document.createTextNode("text content");
-        document.body.appendChild(textNode);
+  });
 
-        const rangeMock = new Range();
-        const rectMockA = new DOMRect(0, 0, 144, 48);
-        const getBoundingClientRectSpy = jest
-            .spyOn(rangeMock, "getBoundingClientRect")
-            .mockReturnValueOnce(rectMockA);
-        jest.spyOn(document, "createRange").mockReturnValue(rangeMock);
+  it("returns dimension for rendered text node", async () => {
+    document.body.style.fontSize = "18px";
+    const textNode = document.createTextNode("text content");
+    document.body.appendChild(textNode);
 
-        const { result } = renderHook(() => useDimensions(textNode));
-        expect(result.current).toEqual(rectMockA);
+    const rangeMock = new Range();
+    const rectMockA = new DOMRect(0, 0, 144, 48);
+    const getBoundingClientRectSpy = jest
+      .spyOn(rangeMock, "getBoundingClientRect")
+      .mockReturnValueOnce(rectMockA);
+    jest.spyOn(document, "createRange").mockReturnValue(rangeMock);
 
-        expect(useObserverSpy).toHaveBeenLastCalledWith({
-            ObserverClass: MutationObserver,
-            initOptions: {
-                characterData: true,
-            },
-            onUpdate: expect.any(Function),
-            target: textNode,
-        });
+    const { result } = renderHook(() => useDimensions(textNode));
+    expect(result.current).toEqual(rectMockA);
 
-        const rectMockB = new DOMRect(0, 0, 132, 36);
-        getBoundingClientRectSpy.mockReturnValueOnce(rectMockB);
-        await act(async () => {
-            //@ts-expect-error observer callback arguments
-            useObserverSpy.mock.calls[0][0].onUpdate();
-        });
-        expect(result.current).toEqual(rectMockB);
+    expect(useObserverSpy).toHaveBeenLastCalledWith({
+      ObserverClass: MutationObserver,
+      initOptions: {
+        characterData: true,
+      },
+      onUpdate: expect.any(Function),
+      target: textNode,
     });
 
-    it("returns dimension for rendered element", async () => {
-        const domNode = addDomNode();
-        const rectMockA = new DOMRect(0, 0, 156, 60);
-        const getBoundingClientRectSpy = jest
-            .spyOn(domNode, "getBoundingClientRect")
-            .mockReturnValueOnce(rectMockA);
+    const rectMockB = new DOMRect(0, 0, 132, 36);
+    getBoundingClientRectSpy.mockReturnValueOnce(rectMockB);
+    await act(async () => {
+      //@ts-expect-error observer callback arguments
+      useObserverSpy.mock.calls[0][0].onUpdate();
+    });
+    expect(result.current).toEqual(rectMockB);
+  });
 
-        const { result } = renderHook(() => useDimensions(domNode));
-        expect(result.current).toEqual(rectMockA);
+  it("returns dimension for rendered element", async () => {
+    const domNode = addDomNode();
+    const rectMockA = new DOMRect(0, 0, 156, 60);
+    const getBoundingClientRectSpy = jest
+      .spyOn(domNode, "getBoundingClientRect")
+      .mockReturnValueOnce(rectMockA);
 
-        expect(useObserverSpy).toHaveBeenLastCalledWith({
-            ObserverClass: ResizeObserver,
-            initOptions: {
-                characterData: true,
-            },
-            onUpdate: expect.any(Function),
-            target: domNode,
-        });
+    const { result } = renderHook(() => useDimensions(domNode));
+    expect(result.current).toEqual(rectMockA);
 
-        const rectMockB = new DOMRect(12, 12, 48, 144);
-        getBoundingClientRectSpy.mockReturnValueOnce(rectMockB);
-        await act(async () => {
-            //@ts-expect-error observer callback arguments
-            useObserverSpy.mock.calls[0][0].onUpdate();
-        });
-        expect(result.current).toEqual(rectMockB);
+    expect(useObserverSpy).toHaveBeenLastCalledWith({
+      ObserverClass: ResizeObserver,
+      initOptions: {
+        characterData: true,
+      },
+      onUpdate: expect.any(Function),
+      target: domNode,
+    });
 
-        await act(async () => void domNode.remove());
+    const rectMockB = new DOMRect(12, 12, 48, 144);
+    getBoundingClientRectSpy.mockReturnValueOnce(rectMockB);
+    await act(async () => {
+      //@ts-expect-error observer callback arguments
+      useObserverSpy.mock.calls[0][0].onUpdate();
     });
+    expect(result.current).toEqual(rectMockB);
+
+    await act(async () => void domNode.remove());
+  });
 });
diff --git a/src/hooks/__tests__/useMirror.test.ts b/src/hooks/__tests__/useMirror.test.ts
index 6b167b3b..300bae59 100644
--- a/src/hooks/__tests__/useMirror.test.ts
+++ b/src/hooks/__tests__/useMirror.test.ts
@@ -2,28 +2,28 @@ import { act, renderHook } from "@testing-library/react";
 import { useMirror } from "../useMirror";
 
 describe("useMirror", () => {
-    it("renders mirror with props and target", async () => {
-        const props = {
-            frameProps: {},
-            mirrorProp: "",
-        };
-        const { result } = renderHook(() => useMirror(props));
-        expect(result.current[1]).toMatchInlineSnapshot(`
+  it("renders mirror with props and target", async () => {
+    const props = {
+      frameProps: {},
+      mirrorProp: "",
+    };
+    const { result } = renderHook(() => useMirror(props));
+    expect(result.current[1]).toMatchInlineSnapshot(`
             <Mirror
               frameProps={Object {}}
               mirrorProp=""
             />
         `);
 
-        const targetNode = document.createElement("div");
-        await act(async () => result.current[0](targetNode));
+    const targetNode = document.createElement("div");
+    await act(async () => result.current[0](targetNode));
 
-        expect(result.current[1]).toMatchInlineSnapshot(`
+    expect(result.current[1]).toMatchInlineSnapshot(`
             <Mirror
               frameProps={Object {}}
               mirrorProp=""
               reflect={<div />}
             />
         `);
-    });
+  });
 });
diff --git a/src/hooks/__tests__/useObserver.test.ts b/src/hooks/__tests__/useObserver.test.ts
index 1da4fae8..a8d11214 100644
--- a/src/hooks/__tests__/useObserver.test.ts
+++ b/src/hooks/__tests__/useObserver.test.ts
@@ -2,114 +2,109 @@ import { renderHook } from "@testing-library/react-hooks";
 import { useObserver, UseObserverProps } from "../useObserver";
 
 const observerMock = {
-    observe: jest.fn(),
-    disconnect: jest.fn(),
-    unobserve: jest.fn(),
+  observe: jest.fn(),
+  disconnect: jest.fn(),
+  unobserve: jest.fn(),
 };
 const newObserverMock = (_: CallableFunction) => observerMock;
 const ObserverMock = jest.fn(newObserverMock);
 
 describe("useObserver", () => {
-    const renderUseObserver = (
-        initialProps: UseObserverProps<typeof ObserverMock>,
+  const renderUseObserver = (
+    initialProps: UseObserverProps<typeof ObserverMock>,
+  ) => {
+    const useObserverHook = (
+      props?: Partial<UseObserverProps<typeof ObserverMock>>,
     ) => {
-        const useObserverHook = (
-            props?: Partial<UseObserverProps<typeof ObserverMock>>,
-        ) => {
-            return useObserver({ ...initialProps, ...props });
-        };
-        return renderHook(useObserverHook);
+      return useObserver({ ...initialProps, ...props });
     };
+    return renderHook(useObserverHook);
+  };
 
-    const getTargetMock = () => {
-        const target = document.createElement("div");
-        const spyOnProps = ["addEventListener", "removeEventListener"] as const;
-        return {
-            target,
-            spies: Object.fromEntries(
-                spyOnProps.map((prop) => [prop, jest.spyOn(target, prop)]),
-            ),
-        };
+  const getTargetMock = () => {
+    const target = document.createElement("div");
+    const spyOnProps = ["addEventListener", "removeEventListener"] as const;
+    return {
+      target,
+      spies: Object.fromEntries(
+        spyOnProps.map((prop) => [prop, jest.spyOn(target, prop)]),
+      ),
     };
+  };
 
-    beforeEach(() => {
-        ObserverMock.mockImplementation(newObserverMock);
-    });
+  beforeEach(() => {
+    ObserverMock.mockImplementation(newObserverMock);
+  });
 
-    afterEach(() => {
-        jest.resetAllMocks();
-    });
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
 
-    it("successfully does nothing if target is null", async () => {
-        const onUpdate = jest.fn();
-        const hook = renderUseObserver({
-            ObserverClass: ObserverMock,
-            onEvents: new Set(["mousemove"]),
-            onUpdate,
-        });
-        expect(ObserverMock).toHaveBeenCalledTimes(1);
-        expect(ObserverMock).toHaveBeenLastCalledWith(onUpdate);
+  it("successfully does nothing if target is null", async () => {
+    const onUpdate = jest.fn();
+    const hook = renderUseObserver({
+      ObserverClass: ObserverMock,
+      onEvents: new Set(["mousemove"]),
+      onUpdate,
+    });
+    expect(ObserverMock).toHaveBeenCalledTimes(1);
+    expect(ObserverMock).toHaveBeenLastCalledWith(onUpdate);
 
-        hook.rerender(); // no prop changes, do not reinstantiate observer
-        expect(ObserverMock).toHaveBeenCalledTimes(1);
+    hook.rerender(); // no prop changes, do not reinstantiate observer
+    expect(ObserverMock).toHaveBeenCalledTimes(1);
 
-        const onUpdateNew = jest.fn();
-        hook.rerender({ onUpdate: onUpdateNew });
-        expect(ObserverMock).toHaveBeenCalledTimes(2);
-        expect(ObserverMock).toHaveBeenLastCalledWith(onUpdateNew);
+    const onUpdateNew = jest.fn();
+    hook.rerender({ onUpdate: onUpdateNew });
+    expect(ObserverMock).toHaveBeenCalledTimes(2);
+    expect(ObserverMock).toHaveBeenLastCalledWith(onUpdateNew);
 
-        expect(observerMock.observe).not.toHaveBeenCalled();
+    expect(observerMock.observe).not.toHaveBeenCalled();
 
-        hook.unmount();
-        expect(observerMock.disconnect).not.toHaveBeenCalled();
-    });
+    hook.unmount();
+    expect(observerMock.disconnect).not.toHaveBeenCalled();
+  });
 
-    it("observes target using provided class", async () => {
-        const { target, spies } = getTargetMock();
-        const onUpdate = jest.fn();
-        const onEvents = ["click", "keyup"] as const;
-        const initOptions = {
-            characterData: true,
-        };
+  it("observes target using provided class", async () => {
+    const { target, spies } = getTargetMock();
+    const onUpdate = jest.fn();
+    const onEvents = ["click", "keyup"] as const;
+    const initOptions = {
+      characterData: true,
+    };
 
-        const hook = renderUseObserver({
-            ObserverClass: ObserverMock,
-            initOptions,
-            onUpdate,
-            target,
-        });
+    const hook = renderUseObserver({
+      ObserverClass: ObserverMock,
+      initOptions,
+      onUpdate,
+      target,
+    });
 
-        expect(ObserverMock).toHaveBeenCalledTimes(1);
-        expect(ObserverMock).toHaveBeenLastCalledWith(onUpdate);
-        expect(observerMock.observe).toHaveBeenCalledTimes(1);
-        expect(observerMock.observe).toHaveBeenLastCalledWith(
-            target,
-            initOptions,
-        );
-        expect(observerMock.disconnect).not.toHaveBeenCalled();
-        expect(spies.addEventListener).not.toHaveBeenCalled();
+    expect(ObserverMock).toHaveBeenCalledTimes(1);
+    expect(ObserverMock).toHaveBeenLastCalledWith(onUpdate);
+    expect(observerMock.observe).toHaveBeenCalledTimes(1);
+    expect(observerMock.observe).toHaveBeenLastCalledWith(target, initOptions);
+    expect(observerMock.disconnect).not.toHaveBeenCalled();
+    expect(spies.addEventListener).not.toHaveBeenCalled();
 
-        hook.rerender({ onEvents: new Set(onEvents) });
-        expect(spies.addEventListener).toHaveBeenCalledTimes(onEvents.length);
-        onEvents.forEach((event) => {
-            expect(spies.addEventListener).toHaveBeenCalledWith(
-                event,
-                onUpdate,
-                false,
-            );
-        });
+    hook.rerender({ onEvents: new Set(onEvents) });
+    expect(spies.addEventListener).toHaveBeenCalledTimes(onEvents.length);
+    onEvents.forEach((event) => {
+      expect(spies.addEventListener).toHaveBeenCalledWith(
+        event,
+        onUpdate,
+        false,
+      );
+    });
 
-        hook.unmount();
-        expect(observerMock.disconnect).toHaveBeenCalledTimes(1);
-        expect(spies.removeEventListener).toHaveBeenCalledTimes(
-            onEvents.length,
-        );
-        onEvents.forEach((event) => {
-            expect(spies.removeEventListener).toHaveBeenCalledWith(
-                event,
-                onUpdate,
-                false,
-            );
-        });
+    hook.unmount();
+    expect(observerMock.disconnect).toHaveBeenCalledTimes(1);
+    expect(spies.removeEventListener).toHaveBeenCalledTimes(onEvents.length);
+    onEvents.forEach((event) => {
+      expect(spies.removeEventListener).toHaveBeenCalledWith(
+        event,
+        onUpdate,
+        false,
+      );
     });
+  });
 });
diff --git a/src/hooks/__tests__/useRef.test.ts b/src/hooks/__tests__/useRef.test.ts
index 5dbfbb45..baf3f1e6 100644
--- a/src/hooks/__tests__/useRef.test.ts
+++ b/src/hooks/__tests__/useRef.test.ts
@@ -3,19 +3,19 @@ import { act } from "react-dom/test-utils";
 import { useCallbackRef } from "../useRef";
 
 describe("useCallbackRef", () => {
-    it("sets value to undefined or else", async () => {
-        const hook = renderHook(useCallbackRef);
-        expect(hook.result.current[0]).toBeUndefined();
+  it("sets value to undefined or else", async () => {
+    const hook = renderHook(useCallbackRef);
+    expect(hook.result.current[0]).toBeUndefined();
 
-        const expectedValue = "value";
-        await act(async () => {
-            hook.result.current[1](expectedValue);
-        });
-        expect(hook.result.current[0]).toBe(expectedValue);
+    const expectedValue = "value";
+    await act(async () => {
+      hook.result.current[1](expectedValue);
+    });
+    expect(hook.result.current[0]).toBe(expectedValue);
 
-        await act(async () => {
-            hook.result.current[1](null);
-        });
-        expect(hook.result.current[0]).toBeUndefined();
+    await act(async () => {
+      hook.result.current[1](null);
     });
+    expect(hook.result.current[0]).toBeUndefined();
+  });
 });
diff --git a/src/hooks/__tests__/useRenderTrigger.test.ts b/src/hooks/__tests__/useRenderTrigger.test.ts
index 73344a53..20084a78 100644
--- a/src/hooks/__tests__/useRenderTrigger.test.ts
+++ b/src/hooks/__tests__/useRenderTrigger.test.ts
@@ -2,13 +2,13 @@ import { act, renderHook } from "@testing-library/react-hooks";
 import { useRenderTrigger } from "../useRenderTrigger";
 
 describe("useRenderTrigger", () => {
-    it("count number of triggered renders", () => {
-        const hook = renderHook(useRenderTrigger);
-        expect(hook.result.current.count).toEqual(1);
-        act(hook.result.current.rerender);
-        expect(hook.result.current.count).toEqual(2);
-        act(hook.result.current.rerender);
-        act(hook.result.current.rerender);
-        expect(hook.result.current.count).toEqual(4);
-    });
+  it("count number of triggered renders", () => {
+    const hook = renderHook(useRenderTrigger);
+    expect(hook.result.current.count).toEqual(1);
+    act(hook.result.current.rerender);
+    expect(hook.result.current.count).toEqual(2);
+    act(hook.result.current.rerender);
+    act(hook.result.current.rerender);
+    expect(hook.result.current.count).toEqual(4);
+  });
 });
diff --git a/src/hooks/useDimensions.ts b/src/hooks/useDimensions.ts
index 6da3af72..e3e16417 100644
--- a/src/hooks/useDimensions.ts
+++ b/src/hooks/useDimensions.ts
@@ -3,25 +3,25 @@ import { getBounds, isElement } from "../utils/dom";
 import { useObserver } from "./useObserver";
 
 export function useDimensions(target?: Node) {
-    // get the dimensions of the current target
-    const getDimensions = React.useCallback(() => {
-        return getBounds(target);
-    }, [target]);
-    // track dimensions and trigger rerender on set
-    const [dimensions, setDimensions] = React.useState(getDimensions);
-    // update dimensions when triggered
-    const onUpdate = React.useCallback(() => {
-        setDimensions(getDimensions());
-    }, [getDimensions]);
-    // track resizes and trigger update
-    useObserver({
-        ObserverClass: isElement(target) ? ResizeObserver : MutationObserver,
-        onUpdate,
-        target,
-        initOptions: {
-            characterData: true,
-        },
-    });
+  // get the dimensions of the current target
+  const getDimensions = React.useCallback(() => {
+    return getBounds(target);
+  }, [target]);
+  // track dimensions and trigger rerender on set
+  const [dimensions, setDimensions] = React.useState(getDimensions);
+  // update dimensions when triggered
+  const onUpdate = React.useCallback(() => {
+    setDimensions(getDimensions());
+  }, [getDimensions]);
+  // track resizes and trigger update
+  useObserver({
+    ObserverClass: isElement(target) ? ResizeObserver : MutationObserver,
+    onUpdate,
+    target,
+    initOptions: {
+      characterData: true,
+    },
+  });
 
-    return dimensions;
+  return dimensions;
 }
diff --git a/src/hooks/useMirror.tsx b/src/hooks/useMirror.tsx
index b9c0be21..ccd0068c 100644
--- a/src/hooks/useMirror.tsx
+++ b/src/hooks/useMirror.tsx
@@ -3,6 +3,6 @@ import { Mirror, MirrorProps } from "../components/Mirror";
 import { useCallbackRef } from "./useRef";
 
 export function useMirror<T extends React.ReactInstance>(props?: MirrorProps) {
-    const [node, ref] = useCallbackRef<T>();
-    return [ref, <Mirror key="mirror" {...props} reflect={node} />] as const;
+  const [node, ref] = useCallbackRef<T>();
+  return [ref, <Mirror key="mirror" {...props} reflect={node} />] as const;
 }
diff --git a/src/hooks/useObserver.ts b/src/hooks/useObserver.ts
index b28470d8..076f5916 100644
--- a/src/hooks/useObserver.ts
+++ b/src/hooks/useObserver.ts
@@ -1,52 +1,52 @@
 import * as React from "react";
 
 export interface UseObserverProps<
-    T extends typeof MutationObserver | typeof ResizeObserver,
+  T extends typeof MutationObserver | typeof ResizeObserver,
 > {
-    initOptions?: Parameters<InstanceType<T>["observe"]>[1];
-    target?: Parameters<InstanceType<T>["observe"]>[0];
-    ObserverClass: T;
-    /** Also listen for other changes that are not observable */
-    onEvents?: Set<keyof GlobalEventHandlersEventMap>;
-    onUpdate: ConstructorParameters<T>[0];
+  initOptions?: Parameters<InstanceType<T>["observe"]>[1];
+  target?: Parameters<InstanceType<T>["observe"]>[0];
+  ObserverClass: T;
+  /** Also listen for other changes that are not observable */
+  onEvents?: Set<keyof GlobalEventHandlersEventMap>;
+  onUpdate: ConstructorParameters<T>[0];
 }
 
 export function useObserver<
-    T extends typeof MutationObserver | typeof ResizeObserver,
+  T extends typeof MutationObserver | typeof ResizeObserver,
 >({ initOptions, ObserverClass, onEvents, ...props }: UseObserverProps<T>) {
-    const target = props.target as Node & Element;
-    const onUpdate = props.onUpdate as EventListener &
-        MutationCallback &
-        ResizeObserverCallback;
+  const target = props.target as Node & Element;
+  const onUpdate = props.onUpdate as EventListener &
+    MutationCallback &
+    ResizeObserverCallback;
 
-    const observer = React.useMemo(() => {
-        return new ObserverClass(onUpdate);
-    }, [ObserverClass, onUpdate]);
-    React.useEffect(
-        function observeRealElement() {
-            if (!target || !observer) return;
-            observer.observe(target, initOptions);
+  const observer = React.useMemo(() => {
+    return new ObserverClass(onUpdate);
+  }, [ObserverClass, onUpdate]);
+  React.useEffect(
+    function observeRealElement() {
+      if (!target || !observer) return;
+      observer.observe(target, initOptions);
 
-            return function destroy() {
-                observer.disconnect();
-            };
-        },
-        [initOptions, observer, onUpdate, target],
-    );
+      return function destroy() {
+        observer.disconnect();
+      };
+    },
+    [initOptions, observer, onUpdate, target],
+  );
 
-    React.useEffect(
-        function onEventHandlers() {
-            if (!target || !onEvents) return;
-            onEvents.forEach((event) => {
-                target.addEventListener(event, onUpdate, false);
-            });
+  React.useEffect(
+    function onEventHandlers() {
+      if (!target || !onEvents) return;
+      onEvents.forEach((event) => {
+        target.addEventListener(event, onUpdate, false);
+      });
 
-            return function destroy() {
-                onEvents.forEach((event) => {
-                    target.removeEventListener(event, onUpdate, false);
-                });
-            };
-        },
-        [onEvents, onUpdate, target],
-    );
+      return function destroy() {
+        onEvents.forEach((event) => {
+          target.removeEventListener(event, onUpdate, false);
+        });
+      };
+    },
+    [onEvents, onUpdate, target],
+  );
 }
diff --git a/src/hooks/usePortal.ts b/src/hooks/usePortal.ts
index b8902d3a..97e10ac6 100644
--- a/src/hooks/usePortal.ts
+++ b/src/hooks/usePortal.ts
@@ -2,17 +2,17 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 export interface UsePortalProps {
-    key?: string;
-    source: React.ReactNode;
-    target?: Element;
+  key?: string;
+  source: React.ReactNode;
+  target?: Element;
 }
 
 export function usePortal({ key, source, target }: UsePortalProps) {
-    return React.useMemo(
-        function createPortal() {
-            if (!target) return null;
-            return ReactDOM.createPortal(source, target, key);
-        },
-        [key, source, target],
-    );
+  return React.useMemo(
+    function createPortal() {
+      if (!target) return null;
+      return ReactDOM.createPortal(source, target, key);
+    },
+    [key, source, target],
+  );
 }
diff --git a/src/hooks/useRef.ts b/src/hooks/useRef.ts
index 78781589..43498da8 100644
--- a/src/hooks/useRef.ts
+++ b/src/hooks/useRef.ts
@@ -1,6 +1,6 @@
 import * as React from "react";
 
 export function useCallbackRef<T>() {
-    const [current, setRef] = React.useState<T | null>(null);
-    return [current ?? undefined, setRef] as const;
+  const [current, setRef] = React.useState<T | null>(null);
+  return [current ?? undefined, setRef] as const;
 }
diff --git a/src/hooks/useRenderTrigger.ts b/src/hooks/useRenderTrigger.ts
index 519bd87b..8970af9f 100644
--- a/src/hooks/useRenderTrigger.ts
+++ b/src/hooks/useRenderTrigger.ts
@@ -1,14 +1,14 @@
 import * as React from "react";
 
 export function useRenderTrigger() {
-    const [count, setCount] = React.useState(1);
-    const rerender = React.useCallback(
-        () => setCount((count) => count + 1),
-        [setCount],
-    );
+  const [count, setCount] = React.useState(1);
+  const rerender = React.useCallback(
+    () => setCount((count) => count + 1),
+    [setCount],
+  );
 
-    return {
-        count,
-        rerender,
-    };
+  return {
+    count,
+    rerender,
+  };
 }
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 2ad86cde..956abbc9 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -1,62 +1,62 @@
 import { flatten } from ".";
 
 export function getChildren(element?: Element | Text) {
-    const children: (Element | Text)[] = [];
-    if (isElement(element)) {
-        element.childNodes.forEach((childNode) => {
-            if (isElement(childNode) || isText(childNode)) {
-                children.push(childNode);
-            }
-        });
-    }
-    return children;
+  const children: (Element | Text)[] = [];
+  if (isElement(element)) {
+    element.childNodes.forEach((childNode) => {
+      if (isElement(childNode) || isText(childNode)) {
+        children.push(childNode);
+      }
+    });
+  }
+  return children;
 }
 
 export function getAttributes(element?: Element | Text) {
-    const attributes: Record<string, string> = {};
-    if (isElement(element)) {
-        Array.from(element.attributes).forEach((attr) => {
-            attributes[attr.name] = attr.value;
-        });
-    }
-    const fieldValue = getValue(element);
-    if (fieldValue) attributes.value = fieldValue;
-    return attributes;
+  const attributes: Record<string, string> = {};
+  if (isElement(element)) {
+    Array.from(element.attributes).forEach((attr) => {
+      attributes[attr.name] = attr.value;
+    });
+  }
+  const fieldValue = getValue(element);
+  if (fieldValue) attributes.value = fieldValue;
+  return attributes;
 }
 
 function getValue(node?: Node) {
-    return (node as HTMLInputElement)?.value;
+  return (node as HTMLInputElement)?.value;
 }
 
 export function getBounds(node?: Node) {
-    if (isElement(node)) {
-        return node.getBoundingClientRect();
-    }
-    if (isText(node)) {
-        const range = document.createRange();
-        range.selectNodeContents(node);
-        return range.getBoundingClientRect();
-    }
-    return new DOMRect();
+  if (isElement(node)) {
+    return node.getBoundingClientRect();
+  }
+  if (isText(node)) {
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    return range.getBoundingClientRect();
+  }
+  return new DOMRect();
 }
 
 export function isElement(node?: Node): node is Element {
-    return node ? !isText(node) : false;
+  return node ? !isText(node) : false;
 }
 
 export function isText(node?: Node): node is Text {
-    return node?.nodeType === Node.TEXT_NODE;
+  return node?.nodeType === Node.TEXT_NODE;
 }
 
 /**
  * Get all style rules from window document sorted by selector text
  */
 export function getAllStyleRules() {
-    return flatten(
-        ...Array.from(document.styleSheets).map((sheet) => {
-            return Array.from(sheet.cssRules).map((rule) => {
-                return rule.cssText;
-            });
-        }),
-    ).sort();
+  return flatten(
+    ...Array.from(document.styleSheets).map((sheet) => {
+      return Array.from(sheet.cssRules).map((rule) => {
+        return rule.cssText;
+      });
+    }),
+  ).sort();
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 31718e92..19732f79 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,17 +1,17 @@
 export function randomString(length: number) {
-    let str = "";
-    while (str.length < length) {
-        str += Math.random()
-            .toString(36)
-            .substr(2, length - str.length);
-    }
-    return str;
+  let str = "";
+  while (str.length < length) {
+    str += Math.random()
+      .toString(36)
+      .substr(2, length - str.length);
+  }
+  return str;
 }
 
 export function spinalToCamelCase(spinalCase: string): string {
-    return spinalCase.replace(/-[a-z]/g, (m) => m.substring(1).toUpperCase());
+  return spinalCase.replace(/-[a-z]/g, (m) => m.substring(1).toUpperCase());
 }
 
 export function flatten<T>(...items: (T | T[])[]) {
-    return ([] as T[]).concat(...items);
+  return ([] as T[]).concat(...items);
 }
diff --git a/webpack.config.ts b/webpack.config.ts
index 4f2b8060..8ed30803 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -5,59 +5,59 @@ import * as nodeExternals from "webpack-node-externals";
 import { WebpackCompilerPlugin } from "webpack-compiler-plugin";
 
 const configuration: Configuration = {
-    devtool: "source-map",
-    entry: "./src",
-    mode: "production",
-    module: {
-        rules: [
-            {
-                exclude: /(node_modules|bower_components)/,
-                test: /\.tsx?$/,
-                use: [
-                    {
-                        loader: "babel-loader",
-                        options: {
-                            presets: ["@babel/preset-typescript"],
-                        },
-                    },
-                    {
-                        loader: "ts-loader",
-                        options: {
-                            configFile: "tsconfig.prod.json",
-                        },
-                    },
-                ],
+  devtool: "source-map",
+  entry: "./src",
+  mode: "production",
+  module: {
+    rules: [
+      {
+        exclude: /(node_modules|bower_components)/,
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              presets: ["@babel/preset-typescript"],
             },
-        ],
-    },
-    output: {
-        filename: "main.js",
-        libraryTarget: "commonjs",
-        path: path.resolve(__dirname, "lib"),
-    },
-    plugins: [
-        new WebpackCompilerPlugin({
-            name: "script-build-types",
-            listeners: {
-                compileStart: (): void => {
-                    try {
-                        execSync("pnpm build-types");
-                    } catch (e) {
-                        // eslint-disable-next-line no-console
-                        console.error(e);
-                    }
-                },
+          },
+          {
+            loader: "ts-loader",
+            options: {
+              configFile: "tsconfig.prod.json",
             },
-        }),
+          },
+        ],
+      },
     ],
-    resolve: {
-        extensions: [".js", ".ts", ".jsx", ".tsx"],
-        modules: [path.resolve("./src"), path.resolve("./node_modules")],
-    },
-    watchOptions: {
-        ignored: /node_modules|built|lib/,
-    },
-    externals: [nodeExternals()] as Configuration["externals"],
+  },
+  output: {
+    filename: "main.js",
+    libraryTarget: "commonjs",
+    path: path.resolve(__dirname, "lib"),
+  },
+  plugins: [
+    new WebpackCompilerPlugin({
+      name: "script-build-types",
+      listeners: {
+        compileStart: (): void => {
+          try {
+            execSync("pnpm build-types");
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(e);
+          }
+        },
+      },
+    }),
+  ],
+  resolve: {
+    extensions: [".js", ".ts", ".jsx", ".tsx"],
+    modules: [path.resolve("./src"), path.resolve("./node_modules")],
+  },
+  watchOptions: {
+    ignored: /node_modules|built|lib/,
+  },
+  externals: [nodeExternals()] as Configuration["externals"],
 };
 
 export default configuration;