From 1b708f67c21b6afe35902ceb9a6840bd1913d1d5 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 31 May 2023 14:27:30 +0100
Subject: [PATCH 001/165] Added 27, modified 26

---
 .../26-partial-autocomplete.problem.tsx       | 29 +++++++++++-
 .../26-partial-autocomplete.solution.1.tsx    | 27 +++++++++++
 .../26-partial-autocomplete.solution.2.tsx    | 29 ++++++++++++
 ...-of-components-with-same-props.problem.tsx | 45 +++++++++++++++++++
 ...-components-with-same-props.solution.1.tsx | 40 +++++++++++++++++
 ...-components-with-same-props.solution.2.tsx | 44 ++++++++++++++++++
 ...onents-vs-passing-react-nodes.problem.tsx} |  0
 ...nts-vs-passing-react-nodes.solution.1.tsx} |  0
 ...nts-vs-passing-react-nodes.solution.2.tsx} |  0
 ...oblem.tsx => 29-generic-props.problem.tsx} |  0
 ...tion.tsx => 29-generic-props.solution.tsx} |  0
 ...erics-vs-discriminated-unions.problem.tsx} |  0
 ...rics-vs-discriminated-unions.solution.tsx} |  0
 ...> 31-variants-with-classnames.problem.tsx} |  0
 ... 31-variants-with-classnames.solution.tsx} |  0
 ... 32-prop-groups-with-variants.problem.tsx} |  0
 ...-prop-groups-with-variants.solution.1.tsx} |  0
 ...-prop-groups-with-variants.solution.2.tsx} |  0
 .../32-typing-custom-hooks.problem.ts         | 10 -----
 .../32-typing-custom-hooks.solution.1.ts      | 10 -----
 .../32-typing-custom-hooks.solution.2.ts      | 10 -----
 .../32-typing-custom-hooks.solution.3.ts      | 10 -----
 ...-of-components-with-same-props.problem.tsx |  1 -
 ...lem.tsx => 59-react-hook-form.problem.tsx} |  0
 ...problem.tsx => 60-react-query.problem.tsx} |  0
 ...oblem.tsx => 61-redux-toolkit.problem.tsx} |  0
 ...and.problem.tsx => 62-zustand.problem.tsx} |  0
 ...eusable-form-library-with-zod.problem.tsx} |  0
 28 files changed, 213 insertions(+), 42 deletions(-)
 create mode 100644 src/04-advanced-components/26-partial-autocomplete.solution.1.tsx
 create mode 100644 src/04-advanced-components/26-partial-autocomplete.solution.2.tsx
 create mode 100644 src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx
 create mode 100644 src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx
 create mode 100644 src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx
 rename src/04-advanced-components/{27-passing-react-components-vs-passing-react-nodes.problem.tsx => 28-passing-react-components-vs-passing-react-nodes.problem.tsx} (100%)
 rename src/04-advanced-components/{27-passing-react-components-vs-passing-react-nodes.solution.1.tsx => 28-passing-react-components-vs-passing-react-nodes.solution.1.tsx} (100%)
 rename src/04-advanced-components/{27-passing-react-components-vs-passing-react-nodes.solution.2.tsx => 28-passing-react-components-vs-passing-react-nodes.solution.2.tsx} (100%)
 rename src/04-advanced-components/{28-generic-props.problem.tsx => 29-generic-props.problem.tsx} (100%)
 rename src/04-advanced-components/{28-generic-props.solution.tsx => 29-generic-props.solution.tsx} (100%)
 rename src/04-advanced-components/{29-generics-vs-discriminated-unions.problem.tsx => 30-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/04-advanced-components/{29-generics-vs-discriminated-unions.solution.tsx => 30-generics-vs-discriminated-unions.solution.tsx} (100%)
 rename src/04-advanced-components/{30-variants-with-classnames.problem.tsx => 31-variants-with-classnames.problem.tsx} (100%)
 rename src/04-advanced-components/{30-variants-with-classnames.solution.tsx => 31-variants-with-classnames.solution.tsx} (100%)
 rename src/04-advanced-components/{31-prop-groups-with-variants.problem.tsx => 32-prop-groups-with-variants.problem.tsx} (100%)
 rename src/04-advanced-components/{31-prop-groups-with-variants.solution.1.tsx => 32-prop-groups-with-variants.solution.1.tsx} (100%)
 rename src/04-advanced-components/{31-prop-groups-with-variants.solution.2.tsx => 32-prop-groups-with-variants.solution.2.tsx} (100%)
 delete mode 100644 src/05-advanced-hooks/32-typing-custom-hooks.problem.ts
 delete mode 100644 src/05-advanced-hooks/32-typing-custom-hooks.solution.1.ts
 delete mode 100644 src/05-advanced-hooks/32-typing-custom-hooks.solution.2.ts
 delete mode 100644 src/05-advanced-hooks/32-typing-custom-hooks.solution.3.ts
 delete mode 100644 src/07-advanced-patterns/59-record-of-components-with-same-props.problem.tsx
 rename src/08-external-libraries/{60-react-hook-form.problem.tsx => 59-react-hook-form.problem.tsx} (100%)
 rename src/08-external-libraries/{61-react-query.problem.tsx => 60-react-query.problem.tsx} (100%)
 rename src/08-external-libraries/{62-redux-toolkit.problem.tsx => 61-redux-toolkit.problem.tsx} (100%)
 rename src/08-external-libraries/{63-zustand.problem.tsx => 62-zustand.problem.tsx} (100%)
 rename src/08-external-libraries/{64-reusable-form-library-with-zod.problem.tsx => 63-reusable-form-library-with-zod.problem.tsx} (100%)

diff --git a/src/04-advanced-components/26-partial-autocomplete.problem.tsx b/src/04-advanced-components/26-partial-autocomplete.problem.tsx
index 70b786d..6248a9b 100644
--- a/src/04-advanced-components/26-partial-autocomplete.problem.tsx
+++ b/src/04-advanced-components/26-partial-autocomplete.problem.tsx
@@ -1 +1,28 @@
-// TODO
+const presetSizes = {
+  xs: "0.5rem",
+  sm: "1rem",
+};
+
+type Size = keyof typeof presetSizes;
+
+type LooseSize = Size | string;
+
+export const Icon = (props: { size: LooseSize }) => {
+  return (
+    <div
+      style={{
+        width:
+          props.size in presetSizes
+            ? presetSizes[props.size as Size]
+            : props.size,
+      }}
+    />
+  );
+};
+
+<>
+  {/* Autocomplete for sm and xs are no longer working! */}
+  <Icon size="sm"></Icon>
+  <Icon size="xs"></Icon>
+  <Icon size="10px"></Icon>
+</>;
diff --git a/src/04-advanced-components/26-partial-autocomplete.solution.1.tsx b/src/04-advanced-components/26-partial-autocomplete.solution.1.tsx
new file mode 100644
index 0000000..01751e1
--- /dev/null
+++ b/src/04-advanced-components/26-partial-autocomplete.solution.1.tsx
@@ -0,0 +1,27 @@
+const presetSizes = {
+  xs: "0.5rem",
+  sm: "1rem",
+};
+
+type Size = keyof typeof presetSizes;
+
+type LooseSize = Size | (string & {});
+
+export const Icon = (props: { size: LooseSize }) => {
+  return (
+    <div
+      style={{
+        width:
+          props.size in presetSizes
+            ? presetSizes[props.size as Size]
+            : props.size,
+      }}
+    />
+  );
+};
+
+<>
+  <Icon size="sm"></Icon>
+  <Icon size="xs"></Icon>
+  <Icon size="10px"></Icon>
+</>;
diff --git a/src/04-advanced-components/26-partial-autocomplete.solution.2.tsx b/src/04-advanced-components/26-partial-autocomplete.solution.2.tsx
new file mode 100644
index 0000000..9d15d7d
--- /dev/null
+++ b/src/04-advanced-components/26-partial-autocomplete.solution.2.tsx
@@ -0,0 +1,29 @@
+const presetSizes = {
+  xs: "0.5rem",
+  sm: "1rem",
+};
+
+type Size = keyof typeof presetSizes;
+
+type LooseAutocomplete<T> = T | (string & {});
+
+type LooseSize = LooseAutocomplete<Size>;
+
+export const Icon = (props: { size: LooseSize }) => {
+  return (
+    <div
+      style={{
+        width:
+          props.size in presetSizes
+            ? presetSizes[props.size as Size]
+            : props.size,
+      }}
+    />
+  );
+};
+
+<>
+  <Icon size="sm"></Icon>
+  <Icon size="xs"></Icon>
+  <Icon size="10px"></Icon>
+</>;
diff --git a/src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx b/src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx
new file mode 100644
index 0000000..8a10719
--- /dev/null
+++ b/src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx
@@ -0,0 +1,45 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+type InputProps = React.ComponentProps<"input">;
+
+/**
+ * All these components take the same props!
+ *
+ * We don't want to repeat ourselves by typing
+ * props: InputProps for each component.
+ *
+ * There must be a better way!
+ *
+ * Hint: Record and satisfies will come in handy.
+ */
+const COMPONENTS = {
+  text: (props) => {
+    return <input {...props} type="text" />;
+  },
+  number: (props) => {
+    return <input {...props} type="number" />;
+  },
+  password: (props) => {
+    return <input {...props} type="password" />;
+  },
+};
+
+export const Input = (props: unknown) => {
+  const Component = COMPONENTS[props.type];
+  return <Component {...props} />;
+};
+
+<>
+  <Input
+    type="number"
+    onChange={(e) => {
+      // e should be properly typed!
+      type test = Expect<Equal<typeof e, React.ChangeEvent<HTMLInputElement>>>;
+    }}
+  ></Input>
+  <Input type="text"></Input>
+  <Input type="password"></Input>
+
+  {/* @ts-expect-error */}
+  <Input type="email"></Input>
+</>;
diff --git a/src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx b/src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx
new file mode 100644
index 0000000..79c1baa
--- /dev/null
+++ b/src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx
@@ -0,0 +1,40 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+type InputProps = React.ComponentProps<"input">;
+
+type Input = "text" | "number" | "password";
+
+/**
+ * We can do it by typing Input and making COMPONENTS
+ * restricted to only those inputs.
+ */
+const COMPONENTS: Record<Input, React.FC<InputProps>> = {
+  text: (props) => {
+    return <input {...props} type="text" />;
+  },
+  number: (props) => {
+    return <input {...props} type="number" />;
+  },
+  password: (props) => {
+    return <input {...props} type="password" />;
+  },
+};
+
+export const Input = (props: { type: Input } & InputProps) => {
+  const Component = COMPONENTS[props.type];
+  return <Component {...props} />;
+};
+
+<>
+  <Input
+    type="number"
+    onChange={(e) => {
+      type test = Expect<Equal<typeof e, React.ChangeEvent<HTMLInputElement>>>;
+    }}
+  ></Input>
+  <Input type="text"></Input>
+  <Input type="password"></Input>
+
+  {/* @ts-expect-error */}
+  <Input type="email"></Input>
+</>;
diff --git a/src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx b/src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx
new file mode 100644
index 0000000..a1c689b
--- /dev/null
+++ b/src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx
@@ -0,0 +1,44 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+type InputProps = React.ComponentProps<"input">;
+
+/**
+ * OR, we can do it by making COMPONENTS 'satisfy'
+ * a type that is a Record of React.FC<InputProps>.
+ */
+const COMPONENTS = {
+  text: (props) => {
+    return <input {...props} type="text" />;
+  },
+  number: (props) => {
+    return <input {...props} type="number" />;
+  },
+  password: (props) => {
+    return <input {...props} type="password" />;
+  },
+} satisfies Record<string, React.FC<InputProps>>;
+
+/**
+ * Then, we can derive the type of input from the
+ * keys of COMPONENTS.
+ */
+type Input = keyof typeof COMPONENTS;
+
+export const Input = (props: { type: Input } & InputProps) => {
+  const Component = COMPONENTS[props.type];
+  return <Component {...props} />;
+};
+
+<>
+  <Input
+    type="number"
+    onChange={(e) => {
+      type test = Expect<Equal<typeof e, React.ChangeEvent<HTMLInputElement>>>;
+    }}
+  ></Input>
+  <Input type="text"></Input>
+  <Input type="password"></Input>
+
+  {/* @ts-expect-error */}
+  <Input type="email"></Input>
+</>;
diff --git a/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx b/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx
similarity index 100%
rename from src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx
rename to src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx
diff --git a/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx b/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx
rename to src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx
diff --git a/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx b/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx
rename to src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx
diff --git a/src/04-advanced-components/28-generic-props.problem.tsx b/src/04-advanced-components/29-generic-props.problem.tsx
similarity index 100%
rename from src/04-advanced-components/28-generic-props.problem.tsx
rename to src/04-advanced-components/29-generic-props.problem.tsx
diff --git a/src/04-advanced-components/28-generic-props.solution.tsx b/src/04-advanced-components/29-generic-props.solution.tsx
similarity index 100%
rename from src/04-advanced-components/28-generic-props.solution.tsx
rename to src/04-advanced-components/29-generic-props.solution.tsx
diff --git a/src/04-advanced-components/29-generics-vs-discriminated-unions.problem.tsx b/src/04-advanced-components/30-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/04-advanced-components/29-generics-vs-discriminated-unions.problem.tsx
rename to src/04-advanced-components/30-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/04-advanced-components/29-generics-vs-discriminated-unions.solution.tsx b/src/04-advanced-components/30-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/04-advanced-components/29-generics-vs-discriminated-unions.solution.tsx
rename to src/04-advanced-components/30-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/04-advanced-components/30-variants-with-classnames.problem.tsx b/src/04-advanced-components/31-variants-with-classnames.problem.tsx
similarity index 100%
rename from src/04-advanced-components/30-variants-with-classnames.problem.tsx
rename to src/04-advanced-components/31-variants-with-classnames.problem.tsx
diff --git a/src/04-advanced-components/30-variants-with-classnames.solution.tsx b/src/04-advanced-components/31-variants-with-classnames.solution.tsx
similarity index 100%
rename from src/04-advanced-components/30-variants-with-classnames.solution.tsx
rename to src/04-advanced-components/31-variants-with-classnames.solution.tsx
diff --git a/src/04-advanced-components/31-prop-groups-with-variants.problem.tsx b/src/04-advanced-components/32-prop-groups-with-variants.problem.tsx
similarity index 100%
rename from src/04-advanced-components/31-prop-groups-with-variants.problem.tsx
rename to src/04-advanced-components/32-prop-groups-with-variants.problem.tsx
diff --git a/src/04-advanced-components/31-prop-groups-with-variants.solution.1.tsx b/src/04-advanced-components/32-prop-groups-with-variants.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/31-prop-groups-with-variants.solution.1.tsx
rename to src/04-advanced-components/32-prop-groups-with-variants.solution.1.tsx
diff --git a/src/04-advanced-components/31-prop-groups-with-variants.solution.2.tsx b/src/04-advanced-components/32-prop-groups-with-variants.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/31-prop-groups-with-variants.solution.2.tsx
rename to src/04-advanced-components/32-prop-groups-with-variants.solution.2.tsx
diff --git a/src/05-advanced-hooks/32-typing-custom-hooks.problem.ts b/src/05-advanced-hooks/32-typing-custom-hooks.problem.ts
deleted file mode 100644
index fc1144b..0000000
--- a/src/05-advanced-hooks/32-typing-custom-hooks.problem.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useState } from "react";
-import { Equal, Expect } from "../helpers/type-utils";
-
-export const useId = (defaultId) => {
-  const [id] = useState(defaultId);
-
-  return id;
-};
-
-type tests = [Expect<Equal<typeof useId, (defaultId: string) => string>>];
diff --git a/src/05-advanced-hooks/32-typing-custom-hooks.solution.1.ts b/src/05-advanced-hooks/32-typing-custom-hooks.solution.1.ts
deleted file mode 100644
index cc51090..0000000
--- a/src/05-advanced-hooks/32-typing-custom-hooks.solution.1.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useState } from "react";
-import { Equal, Expect } from "../helpers/type-utils";
-
-export const useId = (defaultId: string) => {
-  const [id] = useState(defaultId);
-
-  return id;
-};
-
-type tests = [Expect<Equal<typeof useId, (defaultId: string) => string>>];
diff --git a/src/05-advanced-hooks/32-typing-custom-hooks.solution.2.ts b/src/05-advanced-hooks/32-typing-custom-hooks.solution.2.ts
deleted file mode 100644
index 35f4be4..0000000
--- a/src/05-advanced-hooks/32-typing-custom-hooks.solution.2.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useState } from "react";
-import { Equal, Expect } from "../helpers/type-utils";
-
-export const useId = (defaultId: string): string => {
-  const [id] = useState(defaultId);
-
-  return id;
-};
-
-type tests = [Expect<Equal<typeof useId, (defaultId: string) => string>>];
diff --git a/src/05-advanced-hooks/32-typing-custom-hooks.solution.3.ts b/src/05-advanced-hooks/32-typing-custom-hooks.solution.3.ts
deleted file mode 100644
index 0f90c81..0000000
--- a/src/05-advanced-hooks/32-typing-custom-hooks.solution.3.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useState } from "react";
-import { Equal, Expect } from "../helpers/type-utils";
-
-export const useId = (defaultId: string): string => {
-  const [id] = useState<string>(defaultId);
-
-  return id;
-};
-
-type tests = [Expect<Equal<typeof useId, (defaultId: string) => string>>];
diff --git a/src/07-advanced-patterns/59-record-of-components-with-same-props.problem.tsx b/src/07-advanced-patterns/59-record-of-components-with-same-props.problem.tsx
deleted file mode 100644
index 9289714..0000000
--- a/src/07-advanced-patterns/59-record-of-components-with-same-props.problem.tsx
+++ /dev/null
@@ -1 +0,0 @@
-// https://codesandbox.io/s/young-dream-ihjcq3?file=/src/App.tsx
diff --git a/src/08-external-libraries/60-react-hook-form.problem.tsx b/src/08-external-libraries/59-react-hook-form.problem.tsx
similarity index 100%
rename from src/08-external-libraries/60-react-hook-form.problem.tsx
rename to src/08-external-libraries/59-react-hook-form.problem.tsx
diff --git a/src/08-external-libraries/61-react-query.problem.tsx b/src/08-external-libraries/60-react-query.problem.tsx
similarity index 100%
rename from src/08-external-libraries/61-react-query.problem.tsx
rename to src/08-external-libraries/60-react-query.problem.tsx
diff --git a/src/08-external-libraries/62-redux-toolkit.problem.tsx b/src/08-external-libraries/61-redux-toolkit.problem.tsx
similarity index 100%
rename from src/08-external-libraries/62-redux-toolkit.problem.tsx
rename to src/08-external-libraries/61-redux-toolkit.problem.tsx
diff --git a/src/08-external-libraries/63-zustand.problem.tsx b/src/08-external-libraries/62-zustand.problem.tsx
similarity index 100%
rename from src/08-external-libraries/63-zustand.problem.tsx
rename to src/08-external-libraries/62-zustand.problem.tsx
diff --git a/src/08-external-libraries/64-reusable-form-library-with-zod.problem.tsx b/src/08-external-libraries/63-reusable-form-library-with-zod.problem.tsx
similarity index 100%
rename from src/08-external-libraries/64-reusable-form-library-with-zod.problem.tsx
rename to src/08-external-libraries/63-reusable-form-library-with-zod.problem.tsx

From 846c613130c6eb25f0154ec57f952183ecf51ece Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 31 May 2023 14:55:33 +0100
Subject: [PATCH 002/165] Added toggle props

---
 .../29-toggle-props.problem.tsx               | 35 +++++++++++++++++++
 .../29-toggle-props.solution.tsx              | 32 +++++++++++++++++
 ...oblem.tsx => 30-generic-props.problem.tsx} |  0
 ...tion.tsx => 30-generic-props.solution.tsx} |  0
 ...erics-vs-discriminated-unions.problem.tsx} |  0
 ...rics-vs-discriminated-unions.solution.tsx} |  0
 ...> 32-variants-with-classnames.problem.tsx} |  0
 ... 32-variants-with-classnames.solution.tsx} |  0
 ... 33-prop-groups-with-variants.problem.tsx} |  0
 ...-prop-groups-with-variants.solution.1.tsx} |  0
 ...-prop-groups-with-variants.solution.2.tsx} |  0
 ...criminated-unions-with-booleans.problem.ts |  1 -
 ...lem.ts => 34-tuple-return-type.problem.ts} |  0
 ....ts => 34-tuple-return-type.solution.1.ts} |  0
 ....ts => 34-tuple-return-type.solution.2.ts} |  0
 15 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/04-advanced-components/29-toggle-props.problem.tsx
 create mode 100644 src/04-advanced-components/29-toggle-props.solution.tsx
 rename src/04-advanced-components/{29-generic-props.problem.tsx => 30-generic-props.problem.tsx} (100%)
 rename src/04-advanced-components/{29-generic-props.solution.tsx => 30-generic-props.solution.tsx} (100%)
 rename src/04-advanced-components/{30-generics-vs-discriminated-unions.problem.tsx => 31-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/04-advanced-components/{30-generics-vs-discriminated-unions.solution.tsx => 31-generics-vs-discriminated-unions.solution.tsx} (100%)
 rename src/04-advanced-components/{31-variants-with-classnames.problem.tsx => 32-variants-with-classnames.problem.tsx} (100%)
 rename src/04-advanced-components/{31-variants-with-classnames.solution.tsx => 32-variants-with-classnames.solution.tsx} (100%)
 rename src/04-advanced-components/{32-prop-groups-with-variants.problem.tsx => 33-prop-groups-with-variants.problem.tsx} (100%)
 rename src/04-advanced-components/{32-prop-groups-with-variants.solution.1.tsx => 33-prop-groups-with-variants.solution.1.tsx} (100%)
 rename src/04-advanced-components/{32-prop-groups-with-variants.solution.2.tsx => 33-prop-groups-with-variants.solution.2.tsx} (100%)
 delete mode 100644 src/05-advanced-hooks/34-discriminated-unions-with-booleans.problem.ts
 rename src/05-advanced-hooks/{33-tuple-return-type.problem.ts => 34-tuple-return-type.problem.ts} (100%)
 rename src/05-advanced-hooks/{33-tuple-return-type.solution.1.ts => 34-tuple-return-type.solution.1.ts} (100%)
 rename src/05-advanced-hooks/{33-tuple-return-type.solution.2.ts => 34-tuple-return-type.solution.2.ts} (100%)

diff --git a/src/04-advanced-components/29-toggle-props.problem.tsx b/src/04-advanced-components/29-toggle-props.problem.tsx
new file mode 100644
index 0000000..0cf3e34
--- /dev/null
+++ b/src/04-advanced-components/29-toggle-props.problem.tsx
@@ -0,0 +1,35 @@
+type EmbeddedPlaygroundProps =
+  | {
+      useStackblitz: true;
+      stackblitzId: string;
+    }
+  | {
+      useStackblitz?: false;
+      codeSandboxId: string;
+    };
+
+const EmbeddedPlayground = (props: EmbeddedPlaygroundProps) => {
+  if (props.useStackblitz) {
+    return (
+      <iframe
+        src={`https://stackblitz.com/edit/${props.stackblitzId}?embed=1`}
+      />
+    );
+  }
+
+  return <iframe src={`https://codesandbox.io/embed/${props.codeSandboxId}`} />;
+};
+
+<>
+  <EmbeddedPlayground useStackblitz stackblitzId="my-stackblitz-id" />
+  <EmbeddedPlayground codeSandboxId="my-codesandbox-id" />
+
+  <EmbeddedPlayground
+    useStackblitz
+    // @ts-expect-error
+    codeSandboxId="my-codesandbox-id"
+  />
+
+  {/* @ts-expect-error */}
+  <EmbeddedPlayground stackblitzId="my-stackblitz-id" />
+</>;
diff --git a/src/04-advanced-components/29-toggle-props.solution.tsx b/src/04-advanced-components/29-toggle-props.solution.tsx
new file mode 100644
index 0000000..19e8b5a
--- /dev/null
+++ b/src/04-advanced-components/29-toggle-props.solution.tsx
@@ -0,0 +1,32 @@
+type EmbeddedPlaygroundProps =
+  | {
+      useStackblitz: true;
+      stackblitzId: string;
+    }
+  | {
+      useStackblitz?: false;
+      codeSandboxId: string;
+    };
+
+const EmbeddedPlayground = (props: EmbeddedPlaygroundProps) => {
+  if (props.useStackblitz) {
+    return (
+      <iframe
+        src={`https://stackblitz.com/edit/${props.stackblitzId}?embed=1`}
+      />
+    );
+  }
+
+  return <iframe src={`https://codesandbox.io/embed/${props.codeSandboxId}`} />;
+};
+
+<>
+  <EmbeddedPlayground useStackblitz stackblitzId="my-stackblitz-id" />
+  <EmbeddedPlayground codeSandboxId="my-codesandbox-id" />
+
+  <EmbeddedPlayground
+    useStackblitz
+    // @ts-expect-error
+    codeSandboxId="my-codesandbox-id"
+  />
+</>;
diff --git a/src/04-advanced-components/29-generic-props.problem.tsx b/src/04-advanced-components/30-generic-props.problem.tsx
similarity index 100%
rename from src/04-advanced-components/29-generic-props.problem.tsx
rename to src/04-advanced-components/30-generic-props.problem.tsx
diff --git a/src/04-advanced-components/29-generic-props.solution.tsx b/src/04-advanced-components/30-generic-props.solution.tsx
similarity index 100%
rename from src/04-advanced-components/29-generic-props.solution.tsx
rename to src/04-advanced-components/30-generic-props.solution.tsx
diff --git a/src/04-advanced-components/30-generics-vs-discriminated-unions.problem.tsx b/src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/04-advanced-components/30-generics-vs-discriminated-unions.problem.tsx
rename to src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/04-advanced-components/30-generics-vs-discriminated-unions.solution.tsx b/src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/04-advanced-components/30-generics-vs-discriminated-unions.solution.tsx
rename to src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/04-advanced-components/31-variants-with-classnames.problem.tsx b/src/04-advanced-components/32-variants-with-classnames.problem.tsx
similarity index 100%
rename from src/04-advanced-components/31-variants-with-classnames.problem.tsx
rename to src/04-advanced-components/32-variants-with-classnames.problem.tsx
diff --git a/src/04-advanced-components/31-variants-with-classnames.solution.tsx b/src/04-advanced-components/32-variants-with-classnames.solution.tsx
similarity index 100%
rename from src/04-advanced-components/31-variants-with-classnames.solution.tsx
rename to src/04-advanced-components/32-variants-with-classnames.solution.tsx
diff --git a/src/04-advanced-components/32-prop-groups-with-variants.problem.tsx b/src/04-advanced-components/33-prop-groups-with-variants.problem.tsx
similarity index 100%
rename from src/04-advanced-components/32-prop-groups-with-variants.problem.tsx
rename to src/04-advanced-components/33-prop-groups-with-variants.problem.tsx
diff --git a/src/04-advanced-components/32-prop-groups-with-variants.solution.1.tsx b/src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/32-prop-groups-with-variants.solution.1.tsx
rename to src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx
diff --git a/src/04-advanced-components/32-prop-groups-with-variants.solution.2.tsx b/src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/32-prop-groups-with-variants.solution.2.tsx
rename to src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx
diff --git a/src/05-advanced-hooks/34-discriminated-unions-with-booleans.problem.ts b/src/05-advanced-hooks/34-discriminated-unions-with-booleans.problem.ts
deleted file mode 100644
index 70b786d..0000000
--- a/src/05-advanced-hooks/34-discriminated-unions-with-booleans.problem.ts
+++ /dev/null
@@ -1 +0,0 @@
-// TODO
diff --git a/src/05-advanced-hooks/33-tuple-return-type.problem.ts b/src/05-advanced-hooks/34-tuple-return-type.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/33-tuple-return-type.problem.ts
rename to src/05-advanced-hooks/34-tuple-return-type.problem.ts
diff --git a/src/05-advanced-hooks/33-tuple-return-type.solution.1.ts b/src/05-advanced-hooks/34-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/05-advanced-hooks/33-tuple-return-type.solution.1.ts
rename to src/05-advanced-hooks/34-tuple-return-type.solution.1.ts
diff --git a/src/05-advanced-hooks/33-tuple-return-type.solution.2.ts b/src/05-advanced-hooks/34-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/05-advanced-hooks/33-tuple-return-type.solution.2.ts
rename to src/05-advanced-hooks/34-tuple-return-type.solution.2.ts

From e74662a9e997a87d8d48f3b25d183f094765e9fd Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 31 May 2023 14:57:00 +0100
Subject: [PATCH 003/165] Changed snapshots

---
 scripts/tests/__snapshots__/all.test.ts.snap | 162 ++++++++++---------
 1 file changed, 90 insertions(+), 72 deletions(-)

diff --git a/scripts/tests/__snapshots__/all.test.ts.snap b/scripts/tests/__snapshots__/all.test.ts.snap
index e8b1b9d..11c301d 100644
--- a/scripts/tests/__snapshots__/all.test.ts.snap
+++ b/scripts/tests/__snapshots__/all.test.ts.snap
@@ -71,30 +71,42 @@ src/04-advanced-components/24-discriminated-union-with-other-props.problem.tsx(2
   Property 'buttonColor' does not exist on type 'IntrinsicAttributes & { variant: \\"title\\"; title: string; }'.
 src/04-advanced-components/25-either-all-these-props-or-none.problem.tsx(30,8): error TS2578: Unused '@ts-expect-error' directive.
 src/04-advanced-components/25-either-all-these-props-or-none.problem.tsx(33,8): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx(8,30): error TS2345: Argument of type 'ReactNode' is not assignable to parameter of type '(value: number, index: number, array: number[]) => ReactNode'.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(16,10): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(19,12): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(22,14): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(28,21): error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ text: (props: any) => Element; number: (props: any) => Element; password: (props: any) => Element; }'.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(28,32): error TS18046: 'props' is of type 'unknown'.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(29,25): error TS2698: Spread types may only be created from object types.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(34,5): error TS2322: Type '{ type: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'type' does not exist on type 'IntrinsicAttributes'.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(35,16): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(37,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(40,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'type' does not exist on type 'IntrinsicAttributes'.
+src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(41,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'type' does not exist on type 'IntrinsicAttributes'.
+src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(8,30): error TS2345: Argument of type 'ReactNode' is not assignable to parameter of type '(value: number, index: number, array: number[]) => ReactNode'.
   Type 'undefined' is not assignable to type '(value: number, index: number, array: number[]) => ReactNode'.
-src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx(15,19): error TS2322: Type '(index: any) => Element' is not assignable to type 'ReactNode'.
-src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx(15,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx(16,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx(21,19): error TS2322: Type '(index: any) => null' is not assignable to type 'ReactNode'.
-src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx(21,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx(26,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx(30,9): error TS2322: Type '(index: any) => any' is not assignable to type 'ReactNode'.
-src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx(30,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx(30,9): error TS2322: Type '(index: number) => number' is not assignable to type 'FC<number>'.
+src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(15,19): error TS2322: Type '(index: any) => Element' is not assignable to type 'ReactNode'.
+src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(15,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
+src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(16,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(21,19): error TS2322: Type '(index: any) => null' is not assignable to type 'ReactNode'.
+src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(21,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
+src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(26,9): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(30,9): error TS2322: Type '(index: any) => any' is not assignable to type 'ReactNode'.
+src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(30,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
+src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx(30,9): error TS2322: Type '(index: number) => number' is not assignable to type 'FC<number>'.
   Type 'number' is not assignable to type 'ReactElement<any, any>'.
-src/04-advanced-components/28-generic-props.problem.tsx(38,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/28-generic-props.problem.tsx(50,17): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/31-prop-groups-with-variants.problem.tsx(23,11): error TS2322: Type '{ children: string; className: string; type: string; } | { children: string; className: string; type: string; } | { children: string; className: string; type: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
+src/04-advanced-components/30-generic-props.problem.tsx(38,9): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-components/30-generic-props.problem.tsx(50,17): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-components/33-prop-groups-with-variants.problem.tsx(23,11): error TS2322: Type '{ children: string; className: string; type: string; } | { children: string; className: string; type: string; } | { children: string; className: string; type: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
   Type '{ children: string; className: string; type: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
     Type '{ children: string; className: string; type: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
       Types of property 'type' are incompatible.
         Type 'string' is not assignable to type '\\"button\\" | \\"submit\\" | \\"reset\\" | undefined'.
-src/04-advanced-components/31-prop-groups-with-variants.solution.1.tsx(33,8): error TS2578: Unused '@ts-expect-error' directive.
-src/05-advanced-hooks/32-typing-custom-hooks.problem.ts(4,23): error TS7006: Parameter 'defaultId' implicitly has an 'any' type.
-src/05-advanced-hooks/32-typing-custom-hooks.problem.ts(10,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/33-tuple-return-type.problem.ts(13,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/33-tuple-return-type.problem.ts(14,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx(33,8): error TS2578: Unused '@ts-expect-error' directive.
+src/05-advanced-hooks/34-tuple-return-type.problem.ts(13,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-advanced-hooks/34-tuple-return-type.problem.ts(14,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/05-advanced-hooks/35-generic-hooks.problem.ts(16,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/05-advanced-hooks/35-generic-hooks.problem.ts(18,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/05-advanced-hooks/35-generic-hooks.problem.ts(28,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
@@ -521,122 +533,134 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx",
-      "name": "/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx",
+      "message": "No test found in suite src/04-advanced-components/26-partial-autocomplete.solution.1.tsx",
+      "name": "/src/04-advanced-components/26-partial-autocomplete.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx",
-      "name": "/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx",
+      "message": "No test found in suite src/04-advanced-components/26-partial-autocomplete.solution.2.tsx",
+      "name": "/src/04-advanced-components/26-partial-autocomplete.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx",
-      "name": "/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx",
+      "message": "No test found in suite src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx",
+      "name": "/src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/28-generic-props.problem.tsx",
-      "name": "/src/04-advanced-components/28-generic-props.problem.tsx",
+      "message": "No test found in suite src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx",
+      "name": "/src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/28-generic-props.solution.tsx",
-      "name": "/src/04-advanced-components/28-generic-props.solution.tsx",
+      "message": "No test found in suite src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx",
+      "name": "/src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/29-generics-vs-discriminated-unions.problem.tsx",
-      "name": "/src/04-advanced-components/29-generics-vs-discriminated-unions.problem.tsx",
+      "message": "No test found in suite src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx",
+      "name": "/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/29-generics-vs-discriminated-unions.solution.tsx",
-      "name": "/src/04-advanced-components/29-generics-vs-discriminated-unions.solution.tsx",
+      "message": "No test found in suite src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx",
+      "name": "/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/30-variants-with-classnames.problem.tsx",
-      "name": "/src/04-advanced-components/30-variants-with-classnames.problem.tsx",
+      "message": "No test found in suite src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx",
+      "name": "/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/30-variants-with-classnames.solution.tsx",
-      "name": "/src/04-advanced-components/30-variants-with-classnames.solution.tsx",
+      "message": "No test found in suite src/04-advanced-components/29-toggle-props.problem.tsx",
+      "name": "/src/04-advanced-components/29-toggle-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/31-prop-groups-with-variants.problem.tsx",
-      "name": "/src/04-advanced-components/31-prop-groups-with-variants.problem.tsx",
+      "message": "No test found in suite src/04-advanced-components/29-toggle-props.solution.tsx",
+      "name": "/src/04-advanced-components/29-toggle-props.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/31-prop-groups-with-variants.solution.1.tsx",
-      "name": "/src/04-advanced-components/31-prop-groups-with-variants.solution.1.tsx",
+      "message": "No test found in suite src/04-advanced-components/30-generic-props.problem.tsx",
+      "name": "/src/04-advanced-components/30-generic-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/31-prop-groups-with-variants.solution.2.tsx",
-      "name": "/src/04-advanced-components/31-prop-groups-with-variants.solution.2.tsx",
+      "message": "No test found in suite src/04-advanced-components/30-generic-props.solution.tsx",
+      "name": "/src/04-advanced-components/30-generic-props.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/32-typing-custom-hooks.problem.ts",
-      "name": "/src/05-advanced-hooks/32-typing-custom-hooks.problem.ts",
+      "message": "No test found in suite src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx",
+      "name": "/src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/32-typing-custom-hooks.solution.1.ts",
-      "name": "/src/05-advanced-hooks/32-typing-custom-hooks.solution.1.ts",
+      "message": "No test found in suite src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx",
+      "name": "/src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/32-typing-custom-hooks.solution.2.ts",
-      "name": "/src/05-advanced-hooks/32-typing-custom-hooks.solution.2.ts",
+      "message": "No test found in suite src/04-advanced-components/32-variants-with-classnames.problem.tsx",
+      "name": "/src/04-advanced-components/32-variants-with-classnames.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/32-typing-custom-hooks.solution.3.ts",
-      "name": "/src/05-advanced-hooks/32-typing-custom-hooks.solution.3.ts",
+      "message": "No test found in suite src/04-advanced-components/32-variants-with-classnames.solution.tsx",
+      "name": "/src/04-advanced-components/32-variants-with-classnames.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/33-tuple-return-type.problem.ts",
+      "message": "No test found in suite src/04-advanced-components/33-prop-groups-with-variants.problem.tsx",
+      "name": "/src/04-advanced-components/33-prop-groups-with-variants.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx",
+      "name": "/src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx",
+      "name": "/src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/33-tuple-return-type.solution.1.ts",
+      "name": "/src/05-advanced-hooks/34-tuple-return-type.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/33-tuple-return-type.solution.2.ts",
+      "name": "/src/05-advanced-hooks/34-tuple-return-type.solution.1.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/34-discriminated-unions-with-booleans.problem.ts",
-      "name": "/src/05-advanced-hooks/34-discriminated-unions-with-booleans.problem.ts",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/05-advanced-hooks/34-tuple-return-type.solution.2.ts",
       "status": "passed",
     },
     {
@@ -975,38 +999,32 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/59-record-of-components-with-same-props.problem.tsx",
-      "name": "/src/07-advanced-patterns/59-record-of-components-with-same-props.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-external-libraries/60-react-hook-form.problem.tsx",
-      "name": "/src/08-external-libraries/60-react-hook-form.problem.tsx",
+      "message": "No test found in suite src/08-external-libraries/59-react-hook-form.problem.tsx",
+      "name": "/src/08-external-libraries/59-react-hook-form.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-external-libraries/61-react-query.problem.tsx",
-      "name": "/src/08-external-libraries/61-react-query.problem.tsx",
+      "message": "No test found in suite src/08-external-libraries/60-react-query.problem.tsx",
+      "name": "/src/08-external-libraries/60-react-query.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-external-libraries/62-redux-toolkit.problem.tsx",
-      "name": "/src/08-external-libraries/62-redux-toolkit.problem.tsx",
+      "message": "No test found in suite src/08-external-libraries/61-redux-toolkit.problem.tsx",
+      "name": "/src/08-external-libraries/61-redux-toolkit.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-external-libraries/63-zustand.problem.tsx",
-      "name": "/src/08-external-libraries/63-zustand.problem.tsx",
+      "message": "No test found in suite src/08-external-libraries/62-zustand.problem.tsx",
+      "name": "/src/08-external-libraries/62-zustand.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-external-libraries/64-reusable-form-library-with-zod.problem.tsx",
-      "name": "/src/08-external-libraries/64-reusable-form-library-with-zod.problem.tsx",
+      "message": "No test found in suite src/08-external-libraries/63-reusable-form-library-with-zod.problem.tsx",
+      "name": "/src/08-external-libraries/63-reusable-form-library-with-zod.problem.tsx",
       "status": "passed",
     },
   ],

From 010edc5477c511f28184a54aa0b41a197ca695fc Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 31 May 2023 16:08:13 +0100
Subject: [PATCH 004/165] Fixed toggle props and added more to types deep dive

---
 .../29-toggle-props.problem.tsx               | 14 +++----
 ...rstand-react-namespace-export.explainer.ts | 17 +++++----
 ...44-understanding-jsx-element.explainer.tsx | 37 ++++++++++++++++++-
 ...anding-jsx-intrinsic-elements.explainer.ts |  6 ++-
 .../47-add-new-global-element.problem.tsx     |  9 +++++
 .../47-add-new-global-element.solution.tsx    | 19 ++++++++++
 tsconfig.json                                 |  2 +-
 7 files changed, 85 insertions(+), 19 deletions(-)
 create mode 100644 src/06-types-deep-dive/47-add-new-global-element.solution.tsx

diff --git a/src/04-advanced-components/29-toggle-props.problem.tsx b/src/04-advanced-components/29-toggle-props.problem.tsx
index 0cf3e34..908d17f 100644
--- a/src/04-advanced-components/29-toggle-props.problem.tsx
+++ b/src/04-advanced-components/29-toggle-props.problem.tsx
@@ -1,12 +1,8 @@
-type EmbeddedPlaygroundProps =
-  | {
-      useStackblitz: true;
-      stackblitzId: string;
-    }
-  | {
-      useStackblitz?: false;
-      codeSandboxId: string;
-    };
+type EmbeddedPlaygroundProps = {
+  useStackblitz?: boolean;
+  stackblitzId?: string;
+  codeSandboxId?: string;
+};
 
 const EmbeddedPlayground = (props: EmbeddedPlaygroundProps) => {
   if (props.useStackblitz) {
diff --git a/src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts b/src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts
index 23c10b6..696944e 100644
--- a/src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts
+++ b/src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts
@@ -1,11 +1,14 @@
-import React from "react";
-
 /**
- * Try deleting each of these lines in the
- * types themselves:
+ * Questions to answer:
  */
 
-// export = React;
-// export as namespace React;
+// 1. What is the React namespace?
+type Example = React.ReactNode;
+//             ^?
 
-// What is ExoticComponent?
+/**
+ * 2a. Most namespaces can't be used as values. So how come
+ * we can use React as a value here?
+ */
+const element = React.createElement("div");
+//              ^?
diff --git a/src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx b/src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx
index 786c751..ef03a7b 100644
--- a/src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx
+++ b/src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx
@@ -1 +1,36 @@
-// Talk about JSX.Element return type
+/**
+ * 1. What's the difference between JSX.Element,
+ * React.ReactNode and React.ReactElement?
+ */
+const Component = () => {
+  //  ^?
+  return <div>Hello world</div>;
+};
+
+type ClickMe = React.ReactElement;
+type ClickMeToo = JSX.Element;
+type ClickMeThree = React.ReactNode;
+
+/**
+ * 2. Why does this break?
+ */
+
+const Component2 = (): React.ReactNode => {
+  return <div></div>;
+};
+
+<>
+  <Component2 />
+</>;
+
+/**
+ * 3. Why does this work?
+ */
+
+const Component3 = (): React.ReactElement => {
+  return <div></div>;
+};
+
+<>
+  <Component3 />
+</>;
diff --git a/src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts b/src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts
index ae3bc45..eba0026 100644
--- a/src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts
+++ b/src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts
@@ -1 +1,5 @@
-export type JSXElementTypes = keyof JSX.IntrinsicElements;
+/**
+ * 1. What is JSX.IntrinsicElements?
+ */
+
+export type Example = React.JSX.IntrinsicElements;
diff --git a/src/06-types-deep-dive/47-add-new-global-element.problem.tsx b/src/06-types-deep-dive/47-add-new-global-element.problem.tsx
index e69de29..293b138 100644
--- a/src/06-types-deep-dive/47-add-new-global-element.problem.tsx
+++ b/src/06-types-deep-dive/47-add-new-global-element.problem.tsx
@@ -0,0 +1,9 @@
+<>
+  <something id="123"></something>
+
+  {/* @ts-expect-error */}
+  <something></something>
+
+  {/* @ts-expect-error */}
+  <something id={123}></something>
+</>;
diff --git a/src/06-types-deep-dive/47-add-new-global-element.solution.tsx b/src/06-types-deep-dive/47-add-new-global-element.solution.tsx
new file mode 100644
index 0000000..8a80ab1
--- /dev/null
+++ b/src/06-types-deep-dive/47-add-new-global-element.solution.tsx
@@ -0,0 +1,19 @@
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "something-solution": {
+        id: string;
+      };
+    }
+  }
+}
+
+<>
+  <something-solution id="123"></something-solution>
+
+  {/* @ts-expect-error */}
+  <something-solution></something-solution>
+
+  {/* @ts-expect-error */}
+  <something-solution id={123}></something-solution>
+</>;
diff --git a/tsconfig.json b/tsconfig.json
index 02525ad..be58aeb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,6 +12,6 @@
     "skipLibCheck": true
   },
   "include": [
-    "src"
+    "src",
   ]
 }
\ No newline at end of file

From a91af1af9f466bf1a4c0483d2040b185b6005f8c Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 31 May 2023 16:13:58 +0100
Subject: [PATCH 005/165] Made GenericProps simpler

---
 src/04-advanced-components/30-generic-props.problem.tsx  | 4 ++--
 src/04-advanced-components/30-generic-props.solution.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/04-advanced-components/30-generic-props.problem.tsx b/src/04-advanced-components/30-generic-props.problem.tsx
index 1b77af2..48b3ccb 100644
--- a/src/04-advanced-components/30-generic-props.problem.tsx
+++ b/src/04-advanced-components/30-generic-props.problem.tsx
@@ -1,4 +1,4 @@
-import { Key, ReactNode } from "react";
+import { ReactNode } from "react";
 
 interface TableProps {
   rows: any[];
@@ -11,7 +11,7 @@ export const Table = (props: TableProps) => {
     <table>
       <tbody>
         {props.rows.map((row) => (
-          <tr key={row[props.key]}>{props.renderRow(row)}</tr>
+          <tr>{props.renderRow(row)}</tr>
         ))}
       </tbody>
     </table>
diff --git a/src/04-advanced-components/30-generic-props.solution.tsx b/src/04-advanced-components/30-generic-props.solution.tsx
index dd0e79c..17ec34b 100644
--- a/src/04-advanced-components/30-generic-props.solution.tsx
+++ b/src/04-advanced-components/30-generic-props.solution.tsx
@@ -1,4 +1,4 @@
-import { Key, ReactNode } from "react";
+import { ReactNode } from "react";
 
 interface TableProps<T> {
   rows: T[];
@@ -11,7 +11,7 @@ export const Table = <T,>(props: TableProps<T>) => {
     <table>
       <tbody>
         {props.rows.map((row) => (
-          <tr key={row[props.key] as Key}>{props.renderRow(row)}</tr>
+          <tr>{props.renderRow(row)}</tr>
         ))}
       </tbody>
     </table>

From 8470379b2d10c43306666a0af8884aefcf0e7fa1 Mon Sep 17 00:00:00 2001
From: Joel Hooks <joelhooks@gmail.com>
Date: Fri, 2 Jun 2023 22:45:51 -0400
Subject: [PATCH 006/165] remove errant comma

---
 tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index be58aeb..02525ad 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,6 +12,6 @@
     "skipLibCheck": true
   },
   "include": [
-    "src",
+    "src"
   ]
 }
\ No newline at end of file

From 72a819d76d610fe24d30631580926a215ed438af Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 5 Jun 2023 08:14:33 +0100
Subject: [PATCH 007/165] Updated

---
 scripts/tests/__snapshots__/all.test.ts.snap | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/scripts/tests/__snapshots__/all.test.ts.snap b/scripts/tests/__snapshots__/all.test.ts.snap
index 11c301d..ee70f0c 100644
--- a/scripts/tests/__snapshots__/all.test.ts.snap
+++ b/scripts/tests/__snapshots__/all.test.ts.snap
@@ -97,6 +97,8 @@ src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.pr
 src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(30,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
 src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx(30,9): error TS2322: Type '(index: number) => number' is not assignable to type 'FC<number>'.
   Type 'number' is not assignable to type 'ReactElement<any, any>'.
+src/04-advanced-components/29-toggle-props.problem.tsx(25,5): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-components/29-toggle-props.problem.tsx(29,4): error TS2578: Unused '@ts-expect-error' directive.
 src/04-advanced-components/30-generic-props.problem.tsx(38,9): error TS2578: Unused '@ts-expect-error' directive.
 src/04-advanced-components/30-generic-props.problem.tsx(50,17): error TS2578: Unused '@ts-expect-error' directive.
 src/04-advanced-components/33-prop-groups-with-variants.problem.tsx(23,11): error TS2322: Type '{ children: string; className: string; type: string; } | { children: string; className: string; type: string; } | { children: string; className: string; type: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
@@ -130,6 +132,11 @@ src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx(31,3
 src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx(34,16): error TS18048: 'value' is possibly 'undefined'.
 src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx(34,22): error TS2339: Property 'title' does not exist on type 'Error | { title: string; }'.
   Property 'title' does not exist on type 'Error'.
+src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx(23,4): error TS2786: 'Component2' cannot be used as a JSX component.
+  Its return type 'ReactNode' is not a valid JSX element.
+    Type 'undefined' is not assignable to type 'Element | null'.
+src/06-types-deep-dive/47-add-new-global-element.problem.tsx(2,3): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
+src/06-types-deep-dive/47-add-new-global-element.problem.tsx(2,23): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
 src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx(6,7): error TS2717: Subsequent property declarations must have the same type.  Property 'div' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>', but here has type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { something?: string | undefined; }'.
 src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx(13,30): error TS2322: Type '{ something: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
   Property 'something' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
@@ -142,6 +149,8 @@ src/07-advanced-patterns/51-required-context.problem.tsx(59,11): error TS2322: T
 src/07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/07-advanced-patterns/55-as-prop.problem.tsx(13,5): error TS2578: Unused '@ts-expect-error' directive.
+src/07-advanced-patterns/55-as-prop.solution.2.tsx(10,11): error TS2322: Type '{ as: TAs; ref?: LegacyRef<HTMLDivElement> | undefined; key?: Key | null | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | ... 2 more ... | undefined; ... 259 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } | ... 122 more ... | { ...; }' is not assignable to type 'IntrinsicAttributes'.
+  Type '{ as: TAs; id: string; }' has no properties in common with type 'IntrinsicAttributes'.
 src/07-advanced-patterns/56-as-prop-with-custom-components.problem.tsx(5,11): error TS2604: JSX element type 'Comp' does not have any construct or call signatures.
 src/07-advanced-patterns/56-as-prop-with-custom-components.problem.tsx(12,22): error TS2322: Type '{ as: (props: { href: string; children?: ReactNode; }) => Element; href: string; }' is not assignable to type 'IntrinsicAttributes & { as: unknown; }'.
   Property 'href' does not exist on type 'IntrinsicAttributes & { as: unknown; }'.
@@ -861,7 +870,7 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts",
+      "message": "React is not defined",
       "name": "/src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts",
       "status": "passed",
     },
@@ -895,6 +904,12 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
       "name": "/src/06-types-deep-dive/47-add-new-global-element.problem.tsx",
       "status": "passed",
     },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-types-deep-dive/47-add-new-global-element.solution.tsx",
+      "name": "/src/06-types-deep-dive/47-add-new-global-element.solution.tsx",
+      "status": "passed",
+    },
     {
       "assertionResults": [],
       "message": "No test found in suite src/06-types-deep-dive/48-add-attribute-to-all-elements.problem.tsx",

From 2486a688e4eeed66ed19ac59a8a0cd328e2d92cf Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 5 Jun 2023 08:21:01 +0100
Subject: [PATCH 008/165] Upgraded to latest TS 5.1

---
 package-lock.json                             | 32 +++++++++----------
 package.json                                  |  6 ++--
 ...ents-vs-passing-react-nodes.solution.1.tsx |  2 ++
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 751900d..a731081 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,8 @@
       "license": "GPL",
       "dependencies": {
         "@types/express": "^4.17.13",
-        "@types/react": "^18.0.28",
-        "@types/react-dom": "^18.0.11",
+        "@types/react": "^18.2.8",
+        "@types/react-dom": "^18.2.4",
         "express": "^4.18.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -22,7 +22,7 @@
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
-        "typescript": "^5.0.3",
+        "typescript": "^5.1.3",
         "vite-tsconfig-paths": "^4.0.7",
         "vitest": "^0.31.1"
       }
@@ -523,9 +523,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.6",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz",
-      "integrity": "sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==",
+      "version": "18.2.8",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.8.tgz",
+      "integrity": "sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -2645,16 +2645,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
-      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz",
+      "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=12.20"
+        "node": ">=14.17"
       }
     },
     "node_modules/ufo": {
@@ -3391,9 +3391,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "@types/react": {
-      "version": "18.2.6",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz",
-      "integrity": "sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==",
+      "version": "18.2.8",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.8.tgz",
+      "integrity": "sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -4949,9 +4949,9 @@
       }
     },
     "typescript": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
-      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz",
+      "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==",
       "dev": true
     },
     "ufo": {
diff --git a/package.json b/package.json
index b34038f..c4c7873 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",
-    "typescript": "^5.0.3",
+    "typescript": "^5.1.3",
     "vite-tsconfig-paths": "^4.0.7",
     "vitest": "^0.31.1"
   },
@@ -144,8 +144,8 @@
   },
   "dependencies": {
     "@types/express": "^4.17.13",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.2.4",
     "express": "^4.18.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx b/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx
index bc04410..2334c16 100644
--- a/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx
+++ b/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx
@@ -27,6 +27,8 @@ export const Parent = () => {
         renderRow={<div></div>}
       />
       <Table
+        // React.FC doesn't quite work here, because you
+        // can't return numbers from an FC
         renderRow={(index) => {
           return index;
         }}

From ad1941749f42664abc565980640765c298c1099e Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 5 Jun 2023 10:28:00 +0100
Subject: [PATCH 009/165] Made required context a touch harder

---
 src/07-advanced-patterns/51-required-context.problem.tsx  | 2 +-
 src/07-advanced-patterns/55-as-prop.solution.2.tsx        | 4 +---
 .../56-as-prop-with-custom-components.solution.tsx        | 8 +-------
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/07-advanced-patterns/51-required-context.problem.tsx b/src/07-advanced-patterns/51-required-context.problem.tsx
index 61436c6..18c25e5 100644
--- a/src/07-advanced-patterns/51-required-context.problem.tsx
+++ b/src/07-advanced-patterns/51-required-context.problem.tsx
@@ -14,7 +14,7 @@ const createRequiredContext = () => {
     return contextValue;
   };
 
-  return [useContext, context.Provider] as const;
+  return [useContext, context.Provider];
 };
 
 const [useUser, UserProvider] = createRequiredContext<{
diff --git a/src/07-advanced-patterns/55-as-prop.solution.2.tsx b/src/07-advanced-patterns/55-as-prop.solution.2.tsx
index 8129267..6e054b0 100644
--- a/src/07-advanced-patterns/55-as-prop.solution.2.tsx
+++ b/src/07-advanced-patterns/55-as-prop.solution.2.tsx
@@ -5,9 +5,7 @@ export const Component = <TAs extends keyof JSX.IntrinsicElements>(
 ) => {
   const Comp = props.as as string;
 
-  // In this version, we can remove the 'as any' because
-  // TypeScript is able to keep up with the inference
-  return <Comp {...props}></Comp>;
+  return <Comp {...(props as any)}></Comp>;
 };
 
 const example1 = <Component as="a" href="awdawd"></Component>;
diff --git a/src/07-advanced-patterns/56-as-prop-with-custom-components.solution.tsx b/src/07-advanced-patterns/56-as-prop-with-custom-components.solution.tsx
index 7d51e2f..300395e 100644
--- a/src/07-advanced-patterns/56-as-prop-with-custom-components.solution.tsx
+++ b/src/07-advanced-patterns/56-as-prop-with-custom-components.solution.tsx
@@ -8,13 +8,7 @@ export const Component = <
   } & ComponentProps<T>,
 ) => {
   const Comp = props.as;
-  return (
-    <Comp
-      // The 'as any' is still needed, because 'as' is SO generic
-      // that TypeScript can't handle it.
-      {...props}
-    ></Comp>
-  );
+  return <Comp {...props}></Comp>;
 };
 
 const Link = (props: { href: string; children?: React.ReactNode }) => {

From 74fe76821b3dbb5937eda8492861eac77ffd5775 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 5 Jun 2023 10:35:14 +0100
Subject: [PATCH 010/165] Moved some exercises around

---
 ...passing-react-components-vs-passing-react-nodes.problem.tsx} | 0
 ...sing-react-components-vs-passing-react-nodes.solution.1.tsx} | 0
 ...sing-react-components-vs-passing-react-nodes.solution.2.tsx} | 0
 ...{29-toggle-props.problem.tsx => 28-toggle-props.problem.tsx} | 0
 ...9-toggle-props.solution.tsx => 28-toggle-props.solution.tsx} | 0
 ...0-generic-props.problem.tsx => 29-generic-props.problem.tsx} | 0
 ...generic-props.solution.tsx => 29-generic-props.solution.tsx} | 0
 ...blem.tsx => 30-generics-vs-discriminated-unions.problem.tsx} | 0
 ...ion.tsx => 30-generics-vs-discriminated-unions.solution.tsx} | 0
 ...ames.problem.tsx => 31-variants-with-classnames.problem.tsx} | 0
 ...es.solution.tsx => 31-variants-with-classnames.solution.tsx} | 2 --
 ...nts.problem.tsx => 32-prop-groups-with-variants.problem.tsx} | 0
 ...lution.1.tsx => 32-prop-groups-with-variants.solution.1.tsx} | 0
 ...lution.2.tsx => 32-prop-groups-with-variants.solution.2.tsx} | 0
 ...e-return-type.problem.ts => 33-tuple-return-type.problem.ts} | 0
 ...rn-type.solution.1.ts => 33-tuple-return-type.solution.1.ts} | 0
 ...rn-type.solution.2.ts => 33-tuple-return-type.solution.2.ts} | 0
 ...{35-generic-hooks.problem.ts => 34-generic-hooks.problem.ts} | 0
 ...neric-hooks.solution.1.ts => 34-generic-hooks.solution.1.ts} | 0
 ...neric-hooks.solution.2.ts => 34-generic-hooks.solution.2.ts} | 0
 ...neric-hooks.solution.3.ts => 34-generic-hooks.solution.3.ts} | 0
 ...neric-hooks.solution.4.ts => 34-generic-hooks.solution.4.ts} | 0
 ...neric-hooks.solution.5.ts => 34-generic-hooks.solution.5.ts} | 0
 ...oks.problem.ts => 35-function-overloads-in-hooks.problem.ts} | 0
 ...lution.1.ts => 35-function-overloads-in-hooks.solution.1.ts} | 0
 ...lution.2.ts => 35-function-overloads-in-hooks.solution.2.ts} | 0
 ...-hook.problem.ts => 36-generic-localstorage-hook.problem.ts} | 0
 ...ook.solution.ts => 36-generic-localstorage-hook.solution.ts} | 0
 ...em.tsx => 37-generic-localstorage-hook-with-zod.problem.tsx} | 0
 ...n.tsx => 37-generic-localstorage-hook-with-zod.solution.tsx} | 0
 ...n-usestate.problem.tsx => 38-unions-in-usestate.problem.tsx} | 0
 ...usestate.solution.tsx => 38-unions-in-usestate.solution.tsx} | 0
 ...blem.tsx => 39-discriminated-unions-in-usestate.problem.tsx} | 0
 ...ion.tsx => 39-discriminated-unions-in-usestate.solution.tsx} | 0
 ...40-discriminated-union-returns-from-custom-hooks.problem.ts} | 0
 ...sx => 41-discriminated-tuples-from-custom-hooks.problem.tsx} | 0
 ...x => 41-discriminated-tuples-from-custom-hooks.solution.tsx} | 0
 ...ner.ts => 42-understand-react-namespace-export.explainer.ts} | 0
 ...explainer.tsx => 43-understanding-jsx-element.explainer.tsx} | 0
 ...dren.problem.tsx => 44-strongly-typing-children.problem.tsx} | 0
 ...plainer.ts => 45-how-does-react-represent-html.explainer.ts} | 0
 ....ts => 45-understanding-jsx-intrinsic-elements.explainer.ts} | 0
 ...lement.problem.tsx => 46-add-new-global-element.problem.tsx} | 0
 ...ment.solution.tsx => 46-add-new-global-element.solution.tsx} | 0
 ...problem.tsx => 47-add-attribute-to-all-elements.problem.tsx} | 0
 ...oblem.tsx => 48-add-attribute-to-audio-elements.problem.tsx} | 0
 ...problem.tsx => 49-add-attribute-to-div-elements.problem.tsx} | 0
 ...ired-context.problem.tsx => 50-required-context.problem.tsx} | 0
 ...ontext.solution.1.tsx => 50-required-context.solution.1.tsx} | 0
 ...ontext.solution.2.tsx => 50-required-context.solution.2.tsx} | 0
 ...omponents.problem.tsx => 51-compound-components.problem.tsx} | 0
 ...ainer.1.tsx => 52-forward-ref-with-generics.explainer.1.tsx} | 0
 ...ainer.2.tsx => 52-forward-ref-with-generics.explainer.2.tsx} | 0
 .../{54-hoc-problem.tsx => 53-hoc-problem.tsx}                  | 0
 .../54-record-of-components-with-same-props.problem.tsx}        | 0
 .../54-record-of-components-with-same-props.solution.1.tsx}     | 0
 .../54-record-of-components-with-same-props.solution.2.tsx}     | 0
 57 files changed, 2 deletions(-)
 rename src/04-advanced-components/{28-passing-react-components-vs-passing-react-nodes.problem.tsx => 27-passing-react-components-vs-passing-react-nodes.problem.tsx} (100%)
 rename src/04-advanced-components/{28-passing-react-components-vs-passing-react-nodes.solution.1.tsx => 27-passing-react-components-vs-passing-react-nodes.solution.1.tsx} (100%)
 rename src/04-advanced-components/{28-passing-react-components-vs-passing-react-nodes.solution.2.tsx => 27-passing-react-components-vs-passing-react-nodes.solution.2.tsx} (100%)
 rename src/04-advanced-components/{29-toggle-props.problem.tsx => 28-toggle-props.problem.tsx} (100%)
 rename src/04-advanced-components/{29-toggle-props.solution.tsx => 28-toggle-props.solution.tsx} (100%)
 rename src/04-advanced-components/{30-generic-props.problem.tsx => 29-generic-props.problem.tsx} (100%)
 rename src/04-advanced-components/{30-generic-props.solution.tsx => 29-generic-props.solution.tsx} (100%)
 rename src/04-advanced-components/{31-generics-vs-discriminated-unions.problem.tsx => 30-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/04-advanced-components/{31-generics-vs-discriminated-unions.solution.tsx => 30-generics-vs-discriminated-unions.solution.tsx} (100%)
 rename src/04-advanced-components/{32-variants-with-classnames.problem.tsx => 31-variants-with-classnames.problem.tsx} (100%)
 rename src/04-advanced-components/{32-variants-with-classnames.solution.tsx => 31-variants-with-classnames.solution.tsx} (96%)
 rename src/04-advanced-components/{33-prop-groups-with-variants.problem.tsx => 32-prop-groups-with-variants.problem.tsx} (100%)
 rename src/04-advanced-components/{33-prop-groups-with-variants.solution.1.tsx => 32-prop-groups-with-variants.solution.1.tsx} (100%)
 rename src/04-advanced-components/{33-prop-groups-with-variants.solution.2.tsx => 32-prop-groups-with-variants.solution.2.tsx} (100%)
 rename src/05-advanced-hooks/{34-tuple-return-type.problem.ts => 33-tuple-return-type.problem.ts} (100%)
 rename src/05-advanced-hooks/{34-tuple-return-type.solution.1.ts => 33-tuple-return-type.solution.1.ts} (100%)
 rename src/05-advanced-hooks/{34-tuple-return-type.solution.2.ts => 33-tuple-return-type.solution.2.ts} (100%)
 rename src/05-advanced-hooks/{35-generic-hooks.problem.ts => 34-generic-hooks.problem.ts} (100%)
 rename src/05-advanced-hooks/{35-generic-hooks.solution.1.ts => 34-generic-hooks.solution.1.ts} (100%)
 rename src/05-advanced-hooks/{35-generic-hooks.solution.2.ts => 34-generic-hooks.solution.2.ts} (100%)
 rename src/05-advanced-hooks/{35-generic-hooks.solution.3.ts => 34-generic-hooks.solution.3.ts} (100%)
 rename src/05-advanced-hooks/{35-generic-hooks.solution.4.ts => 34-generic-hooks.solution.4.ts} (100%)
 rename src/05-advanced-hooks/{35-generic-hooks.solution.5.ts => 34-generic-hooks.solution.5.ts} (100%)
 rename src/05-advanced-hooks/{36-function-overloads-in-hooks.problem.ts => 35-function-overloads-in-hooks.problem.ts} (100%)
 rename src/05-advanced-hooks/{36-function-overloads-in-hooks.solution.1.ts => 35-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/05-advanced-hooks/{36-function-overloads-in-hooks.solution.2.ts => 35-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/05-advanced-hooks/{37-generic-localstorage-hook.problem.ts => 36-generic-localstorage-hook.problem.ts} (100%)
 rename src/05-advanced-hooks/{37-generic-localstorage-hook.solution.ts => 36-generic-localstorage-hook.solution.ts} (100%)
 rename src/05-advanced-hooks/{38-generic-localstorage-hook-with-zod.problem.tsx => 37-generic-localstorage-hook-with-zod.problem.tsx} (100%)
 rename src/05-advanced-hooks/{38-generic-localstorage-hook-with-zod.solution.tsx => 37-generic-localstorage-hook-with-zod.solution.tsx} (100%)
 rename src/05-advanced-hooks/{39-unions-in-usestate.problem.tsx => 38-unions-in-usestate.problem.tsx} (100%)
 rename src/05-advanced-hooks/{39-unions-in-usestate.solution.tsx => 38-unions-in-usestate.solution.tsx} (100%)
 rename src/05-advanced-hooks/{40-discriminated-unions-in-usestate.problem.tsx => 39-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/05-advanced-hooks/{40-discriminated-unions-in-usestate.solution.tsx => 39-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/05-advanced-hooks/{41-discriminated-union-returns-from-custom-hooks.problem.ts => 40-discriminated-union-returns-from-custom-hooks.problem.ts} (100%)
 rename src/05-advanced-hooks/{42-discriminated-tuples-from-custom-hooks.problem.tsx => 41-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/05-advanced-hooks/{42-discriminated-tuples-from-custom-hooks.solution.tsx => 41-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/06-types-deep-dive/{43-understand-react-namespace-export.explainer.ts => 42-understand-react-namespace-export.explainer.ts} (100%)
 rename src/06-types-deep-dive/{44-understanding-jsx-element.explainer.tsx => 43-understanding-jsx-element.explainer.tsx} (100%)
 rename src/06-types-deep-dive/{45-strongly-typing-children.problem.tsx => 44-strongly-typing-children.problem.tsx} (100%)
 rename src/06-types-deep-dive/{46-how-does-react-represent-html.explainer.ts => 45-how-does-react-represent-html.explainer.ts} (100%)
 rename src/06-types-deep-dive/{46-understanding-jsx-intrinsic-elements.explainer.ts => 45-understanding-jsx-intrinsic-elements.explainer.ts} (100%)
 rename src/06-types-deep-dive/{47-add-new-global-element.problem.tsx => 46-add-new-global-element.problem.tsx} (100%)
 rename src/06-types-deep-dive/{47-add-new-global-element.solution.tsx => 46-add-new-global-element.solution.tsx} (100%)
 rename src/06-types-deep-dive/{48-add-attribute-to-all-elements.problem.tsx => 47-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/06-types-deep-dive/{49-add-attribute-to-audio-elements.problem.tsx => 48-add-attribute-to-audio-elements.problem.tsx} (100%)
 rename src/06-types-deep-dive/{50-add-attribute-to-div-elements.problem.tsx => 49-add-attribute-to-div-elements.problem.tsx} (100%)
 rename src/07-advanced-patterns/{51-required-context.problem.tsx => 50-required-context.problem.tsx} (100%)
 rename src/07-advanced-patterns/{51-required-context.solution.1.tsx => 50-required-context.solution.1.tsx} (100%)
 rename src/07-advanced-patterns/{51-required-context.solution.2.tsx => 50-required-context.solution.2.tsx} (100%)
 rename src/07-advanced-patterns/{52-compound-components.problem.tsx => 51-compound-components.problem.tsx} (100%)
 rename src/07-advanced-patterns/{53-forward-ref-with-generics.explainer.1.tsx => 52-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/07-advanced-patterns/{53-forward-ref-with-generics.explainer.2.tsx => 52-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/07-advanced-patterns/{54-hoc-problem.tsx => 53-hoc-problem.tsx} (100%)
 rename src/{04-advanced-components/27-record-of-components-with-same-props.problem.tsx => 07-advanced-patterns/54-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/{04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx => 07-advanced-patterns/54-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/{04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx => 07-advanced-patterns/54-record-of-components-with-same-props.solution.2.tsx} (100%)

diff --git a/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx b/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx
similarity index 100%
rename from src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx
rename to src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx
diff --git a/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx b/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx
rename to src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx
diff --git a/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx b/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx
rename to src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx
diff --git a/src/04-advanced-components/29-toggle-props.problem.tsx b/src/04-advanced-components/28-toggle-props.problem.tsx
similarity index 100%
rename from src/04-advanced-components/29-toggle-props.problem.tsx
rename to src/04-advanced-components/28-toggle-props.problem.tsx
diff --git a/src/04-advanced-components/29-toggle-props.solution.tsx b/src/04-advanced-components/28-toggle-props.solution.tsx
similarity index 100%
rename from src/04-advanced-components/29-toggle-props.solution.tsx
rename to src/04-advanced-components/28-toggle-props.solution.tsx
diff --git a/src/04-advanced-components/30-generic-props.problem.tsx b/src/04-advanced-components/29-generic-props.problem.tsx
similarity index 100%
rename from src/04-advanced-components/30-generic-props.problem.tsx
rename to src/04-advanced-components/29-generic-props.problem.tsx
diff --git a/src/04-advanced-components/30-generic-props.solution.tsx b/src/04-advanced-components/29-generic-props.solution.tsx
similarity index 100%
rename from src/04-advanced-components/30-generic-props.solution.tsx
rename to src/04-advanced-components/29-generic-props.solution.tsx
diff --git a/src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx b/src/04-advanced-components/30-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx
rename to src/04-advanced-components/30-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx b/src/04-advanced-components/30-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx
rename to src/04-advanced-components/30-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/04-advanced-components/32-variants-with-classnames.problem.tsx b/src/04-advanced-components/31-variants-with-classnames.problem.tsx
similarity index 100%
rename from src/04-advanced-components/32-variants-with-classnames.problem.tsx
rename to src/04-advanced-components/31-variants-with-classnames.problem.tsx
diff --git a/src/04-advanced-components/32-variants-with-classnames.solution.tsx b/src/04-advanced-components/31-variants-with-classnames.solution.tsx
similarity index 96%
rename from src/04-advanced-components/32-variants-with-classnames.solution.tsx
rename to src/04-advanced-components/31-variants-with-classnames.solution.tsx
index eddbe0e..da035b3 100644
--- a/src/04-advanced-components/32-variants-with-classnames.solution.tsx
+++ b/src/04-advanced-components/31-variants-with-classnames.solution.tsx
@@ -1,5 +1,3 @@
-// keyof/typeof/as const
-
 const classNamesMap = {
   primary: "bg-blue-500 text-white",
   secondary: "bg-gray-200 text-black",
diff --git a/src/04-advanced-components/33-prop-groups-with-variants.problem.tsx b/src/04-advanced-components/32-prop-groups-with-variants.problem.tsx
similarity index 100%
rename from src/04-advanced-components/33-prop-groups-with-variants.problem.tsx
rename to src/04-advanced-components/32-prop-groups-with-variants.problem.tsx
diff --git a/src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx b/src/04-advanced-components/32-prop-groups-with-variants.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx
rename to src/04-advanced-components/32-prop-groups-with-variants.solution.1.tsx
diff --git a/src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx b/src/04-advanced-components/32-prop-groups-with-variants.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx
rename to src/04-advanced-components/32-prop-groups-with-variants.solution.2.tsx
diff --git a/src/05-advanced-hooks/34-tuple-return-type.problem.ts b/src/05-advanced-hooks/33-tuple-return-type.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/34-tuple-return-type.problem.ts
rename to src/05-advanced-hooks/33-tuple-return-type.problem.ts
diff --git a/src/05-advanced-hooks/34-tuple-return-type.solution.1.ts b/src/05-advanced-hooks/33-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/05-advanced-hooks/34-tuple-return-type.solution.1.ts
rename to src/05-advanced-hooks/33-tuple-return-type.solution.1.ts
diff --git a/src/05-advanced-hooks/34-tuple-return-type.solution.2.ts b/src/05-advanced-hooks/33-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/05-advanced-hooks/34-tuple-return-type.solution.2.ts
rename to src/05-advanced-hooks/33-tuple-return-type.solution.2.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.problem.ts b/src/05-advanced-hooks/34-generic-hooks.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.problem.ts
rename to src/05-advanced-hooks/34-generic-hooks.problem.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.solution.1.ts b/src/05-advanced-hooks/34-generic-hooks.solution.1.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.solution.1.ts
rename to src/05-advanced-hooks/34-generic-hooks.solution.1.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.solution.2.ts b/src/05-advanced-hooks/34-generic-hooks.solution.2.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.solution.2.ts
rename to src/05-advanced-hooks/34-generic-hooks.solution.2.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.solution.3.ts b/src/05-advanced-hooks/34-generic-hooks.solution.3.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.solution.3.ts
rename to src/05-advanced-hooks/34-generic-hooks.solution.3.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.solution.4.ts b/src/05-advanced-hooks/34-generic-hooks.solution.4.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.solution.4.ts
rename to src/05-advanced-hooks/34-generic-hooks.solution.4.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.solution.5.ts b/src/05-advanced-hooks/34-generic-hooks.solution.5.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.solution.5.ts
rename to src/05-advanced-hooks/34-generic-hooks.solution.5.ts
diff --git a/src/05-advanced-hooks/36-function-overloads-in-hooks.problem.ts b/src/05-advanced-hooks/35-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/36-function-overloads-in-hooks.problem.ts
rename to src/05-advanced-hooks/35-function-overloads-in-hooks.problem.ts
diff --git a/src/05-advanced-hooks/36-function-overloads-in-hooks.solution.1.ts b/src/05-advanced-hooks/35-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/05-advanced-hooks/36-function-overloads-in-hooks.solution.1.ts
rename to src/05-advanced-hooks/35-function-overloads-in-hooks.solution.1.ts
diff --git a/src/05-advanced-hooks/36-function-overloads-in-hooks.solution.2.ts b/src/05-advanced-hooks/35-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/05-advanced-hooks/36-function-overloads-in-hooks.solution.2.ts
rename to src/05-advanced-hooks/35-function-overloads-in-hooks.solution.2.ts
diff --git a/src/05-advanced-hooks/37-generic-localstorage-hook.problem.ts b/src/05-advanced-hooks/36-generic-localstorage-hook.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/37-generic-localstorage-hook.problem.ts
rename to src/05-advanced-hooks/36-generic-localstorage-hook.problem.ts
diff --git a/src/05-advanced-hooks/37-generic-localstorage-hook.solution.ts b/src/05-advanced-hooks/36-generic-localstorage-hook.solution.ts
similarity index 100%
rename from src/05-advanced-hooks/37-generic-localstorage-hook.solution.ts
rename to src/05-advanced-hooks/36-generic-localstorage-hook.solution.ts
diff --git a/src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.problem.tsx b/src/05-advanced-hooks/37-generic-localstorage-hook-with-zod.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.problem.tsx
rename to src/05-advanced-hooks/37-generic-localstorage-hook-with-zod.problem.tsx
diff --git a/src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.solution.tsx b/src/05-advanced-hooks/37-generic-localstorage-hook-with-zod.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.solution.tsx
rename to src/05-advanced-hooks/37-generic-localstorage-hook-with-zod.solution.tsx
diff --git a/src/05-advanced-hooks/39-unions-in-usestate.problem.tsx b/src/05-advanced-hooks/38-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/39-unions-in-usestate.problem.tsx
rename to src/05-advanced-hooks/38-unions-in-usestate.problem.tsx
diff --git a/src/05-advanced-hooks/39-unions-in-usestate.solution.tsx b/src/05-advanced-hooks/38-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/39-unions-in-usestate.solution.tsx
rename to src/05-advanced-hooks/38-unions-in-usestate.solution.tsx
diff --git a/src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx b/src/05-advanced-hooks/39-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx
rename to src/05-advanced-hooks/39-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/05-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx b/src/05-advanced-hooks/39-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx
rename to src/05-advanced-hooks/39-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/05-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts b/src/05-advanced-hooks/40-discriminated-union-returns-from-custom-hooks.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts
rename to src/05-advanced-hooks/40-discriminated-union-returns-from-custom-hooks.problem.ts
diff --git a/src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx b/src/05-advanced-hooks/41-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/05-advanced-hooks/41-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.solution.tsx b/src/05-advanced-hooks/41-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/05-advanced-hooks/41-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts b/src/06-types-deep-dive/42-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts
rename to src/06-types-deep-dive/42-understand-react-namespace-export.explainer.ts
diff --git a/src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx b/src/06-types-deep-dive/43-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx
rename to src/06-types-deep-dive/43-understanding-jsx-element.explainer.tsx
diff --git a/src/06-types-deep-dive/45-strongly-typing-children.problem.tsx b/src/06-types-deep-dive/44-strongly-typing-children.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/45-strongly-typing-children.problem.tsx
rename to src/06-types-deep-dive/44-strongly-typing-children.problem.tsx
diff --git a/src/06-types-deep-dive/46-how-does-react-represent-html.explainer.ts b/src/06-types-deep-dive/45-how-does-react-represent-html.explainer.ts
similarity index 100%
rename from src/06-types-deep-dive/46-how-does-react-represent-html.explainer.ts
rename to src/06-types-deep-dive/45-how-does-react-represent-html.explainer.ts
diff --git a/src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts b/src/06-types-deep-dive/45-understanding-jsx-intrinsic-elements.explainer.ts
similarity index 100%
rename from src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts
rename to src/06-types-deep-dive/45-understanding-jsx-intrinsic-elements.explainer.ts
diff --git a/src/06-types-deep-dive/47-add-new-global-element.problem.tsx b/src/06-types-deep-dive/46-add-new-global-element.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/47-add-new-global-element.problem.tsx
rename to src/06-types-deep-dive/46-add-new-global-element.problem.tsx
diff --git a/src/06-types-deep-dive/47-add-new-global-element.solution.tsx b/src/06-types-deep-dive/46-add-new-global-element.solution.tsx
similarity index 100%
rename from src/06-types-deep-dive/47-add-new-global-element.solution.tsx
rename to src/06-types-deep-dive/46-add-new-global-element.solution.tsx
diff --git a/src/06-types-deep-dive/48-add-attribute-to-all-elements.problem.tsx b/src/06-types-deep-dive/47-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/48-add-attribute-to-all-elements.problem.tsx
rename to src/06-types-deep-dive/47-add-attribute-to-all-elements.problem.tsx
diff --git a/src/06-types-deep-dive/49-add-attribute-to-audio-elements.problem.tsx b/src/06-types-deep-dive/48-add-attribute-to-audio-elements.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/49-add-attribute-to-audio-elements.problem.tsx
rename to src/06-types-deep-dive/48-add-attribute-to-audio-elements.problem.tsx
diff --git a/src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx b/src/06-types-deep-dive/49-add-attribute-to-div-elements.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx
rename to src/06-types-deep-dive/49-add-attribute-to-div-elements.problem.tsx
diff --git a/src/07-advanced-patterns/51-required-context.problem.tsx b/src/07-advanced-patterns/50-required-context.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/51-required-context.problem.tsx
rename to src/07-advanced-patterns/50-required-context.problem.tsx
diff --git a/src/07-advanced-patterns/51-required-context.solution.1.tsx b/src/07-advanced-patterns/50-required-context.solution.1.tsx
similarity index 100%
rename from src/07-advanced-patterns/51-required-context.solution.1.tsx
rename to src/07-advanced-patterns/50-required-context.solution.1.tsx
diff --git a/src/07-advanced-patterns/51-required-context.solution.2.tsx b/src/07-advanced-patterns/50-required-context.solution.2.tsx
similarity index 100%
rename from src/07-advanced-patterns/51-required-context.solution.2.tsx
rename to src/07-advanced-patterns/50-required-context.solution.2.tsx
diff --git a/src/07-advanced-patterns/52-compound-components.problem.tsx b/src/07-advanced-patterns/51-compound-components.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/52-compound-components.problem.tsx
rename to src/07-advanced-patterns/51-compound-components.problem.tsx
diff --git a/src/07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx b/src/07-advanced-patterns/52-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx
rename to src/07-advanced-patterns/52-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx b/src/07-advanced-patterns/52-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx
rename to src/07-advanced-patterns/52-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/07-advanced-patterns/54-hoc-problem.tsx b/src/07-advanced-patterns/53-hoc-problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/54-hoc-problem.tsx
rename to src/07-advanced-patterns/53-hoc-problem.tsx
diff --git a/src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx b/src/07-advanced-patterns/54-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx
rename to src/07-advanced-patterns/54-record-of-components-with-same-props.problem.tsx
diff --git a/src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx b/src/07-advanced-patterns/54-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx
rename to src/07-advanced-patterns/54-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx b/src/07-advanced-patterns/54-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx
rename to src/07-advanced-patterns/54-record-of-components-with-same-props.solution.2.tsx

From a9578b818310d26133d762c77cae3a3d81ebe118 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 5 Jun 2023 11:22:34 +0100
Subject: [PATCH 011/165] Added react-hook-form example

---
 package-lock.json                             | 22 +++++++
 package.json                                  |  3 +-
 .../59-react-hook-form.explainer.tsx          | 34 +++++++++++
 .../60-react-hook-form-wrapper.problem.tsx    | 55 ++++++++++++++++++
 .../60-react-hook-form-wrapper.solution.tsx   | 57 +++++++++++++++++++
 ...problem.tsx => 61-react-query.problem.tsx} |  0
 ...oblem.tsx => 62-redux-toolkit.problem.tsx} |  0
 ...roblem.tsx => 63-react-select.problem.tsx} |  0
 ...and.problem.tsx => 64-zustand.problem.tsx} |  0
 ...eusable-form-library-with-zod.problem.tsx} |  0
 src/helpers/type-utils.ts                     | 12 ++++
 11 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 src/08-external-libraries/59-react-hook-form.explainer.tsx
 create mode 100644 src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx
 create mode 100644 src/08-external-libraries/60-react-hook-form-wrapper.solution.tsx
 rename src/08-external-libraries/{59-react-hook-form.problem.tsx => 61-react-query.problem.tsx} (100%)
 rename src/08-external-libraries/{60-react-query.problem.tsx => 62-redux-toolkit.problem.tsx} (100%)
 rename src/08-external-libraries/{61-redux-toolkit.problem.tsx => 63-react-select.problem.tsx} (100%)
 rename src/08-external-libraries/{62-zustand.problem.tsx => 64-zustand.problem.tsx} (100%)
 rename src/08-external-libraries/{63-reusable-form-library-with-zod.problem.tsx => 65-reusable-form-library-with-zod.problem.tsx} (100%)

diff --git a/package-lock.json b/package-lock.json
index a731081..37f1120 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "express": "^4.18.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.44.3",
         "zod": "^3.17.10"
       },
       "devDependencies": {
@@ -2250,6 +2251,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.44.3",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.44.3.tgz",
+      "integrity": "sha512-/tHId6p2ViAka1wECMw8FEPn/oz/w226zehHrJyQ1oIzCBNMIJCaj6ZkQcv+MjDxYh9MWR7RQic7Qqwe4a5nkw==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -4667,6 +4683,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-hook-form": {
+      "version": "7.44.3",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.44.3.tgz",
+      "integrity": "sha512-/tHId6p2ViAka1wECMw8FEPn/oz/w226zehHrJyQ1oIzCBNMIJCaj6ZkQcv+MjDxYh9MWR7RQic7Qqwe4a5nkw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index c4c7873..99bc03c 100644
--- a/package.json
+++ b/package.json
@@ -149,6 +149,7 @@
     "express": "^4.18.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.44.3",
     "zod": "^3.17.10"
   }
-}
\ No newline at end of file
+}
diff --git a/src/08-external-libraries/59-react-hook-form.explainer.tsx b/src/08-external-libraries/59-react-hook-form.explainer.tsx
new file mode 100644
index 0000000..60d4f29
--- /dev/null
+++ b/src/08-external-libraries/59-react-hook-form.explainer.tsx
@@ -0,0 +1,34 @@
+import { FieldValues, useForm } from "react-hook-form";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * 1. When you provide default values to useForm, the return type of getValues
+ * gets inferred as the shape of those values.
+ *
+ * Investigate why this is, and what TFieldValues is being used for.
+ */
+const formWithValues = useForm({
+  defaultValues: {
+    firstName: "",
+    lastName: "",
+  },
+});
+
+const values = formWithValues.getValues();
+
+type test = Expect<
+  Equal<typeof values, { firstName: string; lastName: string }>
+>;
+
+/**
+ * 2. When you don't pass a default value, the return type of getValues is
+ * inferred as FieldValues.
+ *
+ * Investigate why this is, and what type FieldValues is.
+ */
+
+const formWithoutValues = useForm();
+
+const values2 = formWithoutValues.getValues();
+
+type test2 = Expect<Equal<typeof values2, FieldValues>>;
diff --git a/src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx b/src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx
new file mode 100644
index 0000000..a98f29a
--- /dev/null
+++ b/src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx
@@ -0,0 +1,55 @@
+import { useForm } from "react-hook-form";
+import { Equal, Expect, ExpectExtends } from "../helpers/type-utils";
+
+/**
+ * Here, we're creating a wrapper around react-hook-form's useForm hook.
+ *
+ * We want to change the API slightly so that only certain methods are
+ * exposed. We also want to make sure that defaultValues is ALWAYS
+ * required.
+ */
+const useCustomForm = (defaultValues: any) => {
+  const form = useForm({
+    defaultValues: defaultValues,
+  });
+
+  return {
+    register: form.register,
+    handleSubmit: form.handleSubmit,
+    getValues: form.getValues,
+  };
+};
+
+// ---- TESTS ----
+
+// @ts-expect-error defaultValues is required
+useCustomForm();
+
+useCustomForm(
+  // @ts-expect-error defaultValues must be an object
+  2,
+);
+
+const customForm = useCustomForm({
+  firstName: "",
+  lastName: "",
+});
+
+customForm.handleSubmit((values) => {
+  type test = Expect<
+    // Expect that inside handleSubmit, it's inferred as
+    // { firstName: string; lastName: string }
+    ExpectExtends<
+      {
+        firstName: string;
+        lastName: string;
+      },
+      typeof values
+    >
+  >;
+});
+
+// Expect that only the methods we want are exposed
+type test = Expect<
+  Equal<keyof typeof customForm, "register" | "handleSubmit" | "getValues">
+>;
diff --git a/src/08-external-libraries/60-react-hook-form-wrapper.solution.tsx b/src/08-external-libraries/60-react-hook-form-wrapper.solution.tsx
new file mode 100644
index 0000000..067ebe5
--- /dev/null
+++ b/src/08-external-libraries/60-react-hook-form-wrapper.solution.tsx
@@ -0,0 +1,57 @@
+import { DefaultValues, FieldValues, useForm } from "react-hook-form";
+import { Equal, Expect, ExpectExtends } from "../helpers/type-utils";
+
+/**
+ * We add TValues as a generic to our hook, and use it to type the defaultValues.
+ *
+ * We constrain it to FieldValues so that it's assignable to useForm's defaultValues.
+ */
+const useCustomForm = <TValues extends FieldValues>(defaultValues: TValues) => {
+  const form = useForm({
+    /**
+     * There's a strange papercut here where we have to cast defaultValues as
+     * DefaultValues<TValues> to get it to work.
+     */
+    defaultValues: defaultValues as DefaultValues<TValues>,
+  });
+
+  return {
+    register: form.register,
+    handleSubmit: form.handleSubmit,
+    getValues: form.getValues,
+  };
+};
+
+// ---- TESTS ----
+
+// @ts-expect-error defaultValues is required
+useCustomForm();
+
+useCustomForm(
+  // @ts-expect-error defaultValues must be an object
+  2,
+);
+
+const customForm = useCustomForm({
+  firstName: "",
+  lastName: "",
+});
+
+customForm.handleSubmit((values) => {
+  type test = Expect<
+    // Expect that inside handleSubmit, it's inferred as
+    // { firstName: string; lastName: string }
+    ExpectExtends<
+      {
+        firstName: string;
+        lastName: string;
+      },
+      typeof values
+    >
+  >;
+});
+
+// Expect that only the methods we want are exposed
+type test = Expect<
+  Equal<keyof typeof customForm, "register" | "handleSubmit" | "getValues">
+>;
diff --git a/src/08-external-libraries/59-react-hook-form.problem.tsx b/src/08-external-libraries/61-react-query.problem.tsx
similarity index 100%
rename from src/08-external-libraries/59-react-hook-form.problem.tsx
rename to src/08-external-libraries/61-react-query.problem.tsx
diff --git a/src/08-external-libraries/60-react-query.problem.tsx b/src/08-external-libraries/62-redux-toolkit.problem.tsx
similarity index 100%
rename from src/08-external-libraries/60-react-query.problem.tsx
rename to src/08-external-libraries/62-redux-toolkit.problem.tsx
diff --git a/src/08-external-libraries/61-redux-toolkit.problem.tsx b/src/08-external-libraries/63-react-select.problem.tsx
similarity index 100%
rename from src/08-external-libraries/61-redux-toolkit.problem.tsx
rename to src/08-external-libraries/63-react-select.problem.tsx
diff --git a/src/08-external-libraries/62-zustand.problem.tsx b/src/08-external-libraries/64-zustand.problem.tsx
similarity index 100%
rename from src/08-external-libraries/62-zustand.problem.tsx
rename to src/08-external-libraries/64-zustand.problem.tsx
diff --git a/src/08-external-libraries/63-reusable-form-library-with-zod.problem.tsx b/src/08-external-libraries/65-reusable-form-library-with-zod.problem.tsx
similarity index 100%
rename from src/08-external-libraries/63-reusable-form-library-with-zod.problem.tsx
rename to src/08-external-libraries/65-reusable-form-library-with-zod.problem.tsx
diff --git a/src/helpers/type-utils.ts b/src/helpers/type-utils.ts
index 5c10861..ac65c6c 100644
--- a/src/helpers/type-utils.ts
+++ b/src/helpers/type-utils.ts
@@ -22,6 +22,18 @@ export type MergeInsertions<T> = T extends object
 
 export type Alike<X, Y> = Equal<MergeInsertions<X>, MergeInsertions<Y>>;
 
+/**
+ * Expect that one type is assignable to another.
+ *
+ * @example
+ *
+ * type tests = [
+ *   // Expect that `number` is assignable to `1`.
+ *   Expect<ExpectExtends<1, number>>,
+ *   // Expect that `abc` is assignable to `string`
+ *   Expect<ExpectExtends<'abc', string>>,
+ * ];
+ */
 export type ExpectExtends<VALUE, EXPECTED> = EXPECTED extends VALUE
   ? true
   : false;

From cf5f14f91066d1705186071f1918dd252d23a9b3 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 6 Jun 2023 13:03:12 +0100
Subject: [PATCH 012/165] Added many more exercises

---
 package-lock.json                             | 1114 +++++++++++++++++
 package.json                                  |    2 +
 .../61-react-query.explainer.ts               |   53 +
 .../62-react-query-wrapper.problem.ts         |   46 +
 .../62-react-query-wrapper.solution.ts        |   49 +
 .../63-react-select.problem.tsx               |   48 +
 .../63-react-select.solution.tsx              |   50 +
 ...oblem.tsx => 64-react-table.explainer.tsx} |    0
 ...reusable-form-library-with-zod.problem.tsx |    0
 ...kit.problem.tsx => 65-zustand.problem.tsx} |    0
 ...eusable-form-library-with-zod.problem.tsx} |    0
 src/fake-external-lib/index.ts                |    6 +
 tsconfig.json                                 |    7 +-
 13 files changed, 1374 insertions(+), 1 deletion(-)
 create mode 100644 src/08-external-libraries/61-react-query.explainer.ts
 create mode 100644 src/08-external-libraries/62-react-query-wrapper.problem.ts
 create mode 100644 src/08-external-libraries/62-react-query-wrapper.solution.ts
 create mode 100644 src/08-external-libraries/63-react-select.solution.tsx
 rename src/08-external-libraries/{61-react-query.problem.tsx => 64-react-table.explainer.tsx} (100%)
 delete mode 100644 src/08-external-libraries/65-reusable-form-library-with-zod.problem.tsx
 rename src/08-external-libraries/{62-redux-toolkit.problem.tsx => 65-zustand.problem.tsx} (100%)
 rename src/08-external-libraries/{64-zustand.problem.tsx => 66-reusable-form-library-with-zod.problem.tsx} (100%)
 create mode 100644 src/fake-external-lib/index.ts

diff --git a/package-lock.json b/package-lock.json
index 37f1120..b751cd1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "GPL",
       "dependencies": {
+        "@tanstack/react-query": "^4.29.12",
         "@types/express": "^4.17.13",
         "@types/react": "^18.2.8",
         "@types/react-dom": "^18.2.4",
@@ -16,6 +17,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.44.3",
+        "react-select": "^5.7.3",
         "zod": "^3.17.10"
       },
       "devDependencies": {
@@ -28,6 +30,192 @@
         "vitest": "^0.31.1"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+      "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+      "dependencies": {
+        "@babel/highlight": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
+      "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
+      "dependencies": {
+        "@babel/types": "^7.21.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
+      "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
+      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.4.tgz",
+      "integrity": "sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.21.5",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz",
+      "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
@@ -380,6 +568,19 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
+      "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.9.tgz",
+      "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.2.6"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -421,6 +622,41 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "4.29.11",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.11.tgz",
+      "integrity": "sha512-8C+hF6SFAb/TlFZyS9FItgNwrw4PMa7YeX+KQYe2ZAiEz6uzg6yIr+QBzPkUwZ/L0bXvGd1sufTm3wotoz+GwQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "4.29.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.29.12.tgz",
+      "integrity": "sha512-zhcN6+zF6cxprxhTHQajHGlvxgK8npnp9uLe9yaWhGc6sYcPWXzyO4raL4HomUzQOPzu3jLvkriJQ7BOrDM8vA==",
+      "dependencies": {
+        "@tanstack/query-core": "4.29.11",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -508,6 +744,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.3.tgz",
       "integrity": "sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw=="
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -541,6 +782,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -771,6 +1020,20 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -850,6 +1113,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/chai": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
@@ -868,6 +1139,38 @@
         "node": ">=4"
       }
     },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/check-error": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
@@ -904,6 +1207,19 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -963,6 +1279,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
     "node_modules/cookie": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@@ -976,6 +1297,21 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/cross-fetch": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz",
@@ -1086,6 +1422,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -1123,6 +1468,14 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
@@ -1165,6 +1518,17 @@
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/escodegen": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz",
@@ -1333,6 +1697,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -1434,6 +1803,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/has-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
@@ -1456,6 +1833,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -1567,6 +1957,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -1580,6 +1985,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1592,6 +2002,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-core-module": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1687,6 +2108,11 @@
         }
       }
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
     "node_modules/jsonc-parser": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
@@ -1706,6 +2132,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
     "node_modules/local-pkg": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
@@ -1788,6 +2219,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -1953,6 +2389,14 @@
       "integrity": "sha512-NHj4rzRo0tQdijE9ZqAx6kYDcoRwYwSYzCA8MY3JzfxlrvEU0jhnhJT9BhqhJs7I/dKcrDm6TyulaRqZPIhN5g==",
       "dev": true
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -2004,6 +2448,34 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -2024,11 +2496,24 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pathe": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz",
@@ -2139,6 +2624,21 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -2272,6 +2772,41 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-select": {
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz",
+      "integrity": "sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -2284,12 +2819,41 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resolve": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "dependencies": {
+        "is-core-module": "^2.11.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -2521,6 +3085,33 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -2560,6 +3151,14 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2706,6 +3305,27 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -3102,6 +3722,14 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
@@ -3124,6 +3752,160 @@
     }
   },
   "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+      "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+      "requires": {
+        "@babel/highlight": "^7.18.6"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
+      "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
+      "requires": {
+        "@babel/types": "^7.21.4"
+      }
+    },
+    "@babel/helper-string-parser": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
+      "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w=="
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
+    },
+    "@babel/highlight": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/runtime": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
+      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
+      "requires": {
+        "regenerator-runtime": "^0.13.11"
+      }
+    },
+    "@babel/types": {
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.4.tgz",
+      "integrity": "sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==",
+      "requires": {
+        "@babel/helper-string-parser": "^7.21.5",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "@emotion/react": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz",
+      "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "requires": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "requires": {}
+    },
+    "@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "@esbuild/android-arm": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
@@ -3278,6 +4060,19 @@
       "dev": true,
       "optional": true
     },
+    "@floating-ui/core": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
+      "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg=="
+    },
+    "@floating-ui/dom": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.9.tgz",
+      "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==",
+      "requires": {
+        "@floating-ui/core": "^1.2.6"
+      }
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -3310,6 +4105,20 @@
         "fastq": "^1.6.0"
       }
     },
+    "@tanstack/query-core": {
+      "version": "4.29.11",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.11.tgz",
+      "integrity": "sha512-8C+hF6SFAb/TlFZyS9FItgNwrw4PMa7YeX+KQYe2ZAiEz6uzg6yIr+QBzPkUwZ/L0bXvGd1sufTm3wotoz+GwQ=="
+    },
+    "@tanstack/react-query": {
+      "version": "4.29.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.29.12.tgz",
+      "integrity": "sha512-zhcN6+zF6cxprxhTHQajHGlvxgK8npnp9uLe9yaWhGc6sYcPWXzyO4raL4HomUzQOPzu3jLvkriJQ7BOrDM8vA==",
+      "requires": {
+        "@tanstack/query-core": "4.29.11",
+        "use-sync-external-store": "^1.2.0"
+      }
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3391,6 +4200,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.3.tgz",
       "integrity": "sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw=="
     },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -3424,6 +4238,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -3603,6 +4425,16 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      }
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -3663,6 +4495,11 @@
         "get-intrinsic": "^1.0.2"
       }
     },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
+    },
     "chai": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
@@ -3678,6 +4515,31 @@
         "type-detect": "^4.0.5"
       }
     },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+        }
+      }
+    },
     "check-error": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
@@ -3700,6 +4562,19 @@
         "readdirp": "~3.6.0"
       }
     },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -3744,6 +4619,11 @@
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
       "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="
     },
+    "convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
     "cookie": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@@ -3754,6 +4634,18 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      }
+    },
     "cross-fetch": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz",
@@ -3842,6 +4734,15 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
       "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -3867,6 +4768,14 @@
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "dev": true
     },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "esbuild": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
@@ -3902,6 +4811,11 @@
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
+    "escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+    },
     "escodegen": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz",
@@ -4033,6 +4947,11 @@
         "unpipe": "~1.0.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -4106,6 +5025,11 @@
         "function-bind": "^1.1.1"
       }
     },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+    },
     "has-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
@@ -4116,6 +5040,21 @@
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -4200,6 +5139,15 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -4210,6 +5158,11 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
     },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -4219,6 +5172,14 @@
         "binary-extensions": "^2.0.0"
       }
     },
+    "is-core-module": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4291,6 +5252,11 @@
         "xml-name-validator": "^4.0.0"
       }
     },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
     "jsonc-parser": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
@@ -4307,6 +5273,11 @@
         "type-check": "~0.3.2"
       }
     },
+    "lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
     "local-pkg": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
@@ -4368,6 +5339,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -4485,6 +5461,11 @@
       "integrity": "sha512-NHj4rzRo0tQdijE9ZqAx6kYDcoRwYwSYzCA8MY3JzfxlrvEU0jhnhJT9BhqhJs7I/dKcrDm6TyulaRqZPIhN5g==",
       "dev": true
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
     "object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -4521,6 +5502,25 @@
         "yocto-queue": "^1.0.0"
       }
     },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
     "parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -4535,11 +5535,21 @@
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
     },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
     },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+    },
     "pathe": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz",
@@ -4609,6 +5619,23 @@
         "react-is": "^17.0.1"
       }
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -4695,6 +5722,33 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "react-select": {
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz",
+      "integrity": "sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==",
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4704,12 +5758,32 @@
         "picomatch": "^2.2.1"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resolve": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "requires": {
+        "is-core-module": "^2.11.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+    },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -4874,6 +5948,24 @@
         "acorn": "^8.8.2"
       }
     },
+    "stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -4904,6 +5996,11 @@
       "integrity": "sha512-7eORpyqImoOvkQJCSkL0d0mB4NHHIFAy4b1u8PHdDa7SjGS2njzl6/lyGoZLm+eyYEtlUmFGE0rFj66SWxZgQQ==",
       "dev": true
     },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5003,6 +6100,18 @@
         "requires-port": "^1.0.0"
       }
     },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "requires": {}
+    },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -5232,6 +6341,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+    },
     "yocto-queue": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
diff --git a/package.json b/package.json
index 99bc03c..c3aa83e 100644
--- a/package.json
+++ b/package.json
@@ -143,6 +143,7 @@
     "s-64": "tt-cli run 64 --solution"
   },
   "dependencies": {
+    "@tanstack/react-query": "^4.29.12",
     "@types/express": "^4.17.13",
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.2.4",
@@ -150,6 +151,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.3",
+    "react-select": "^5.7.3",
     "zod": "^3.17.10"
   }
 }
diff --git a/src/08-external-libraries/61-react-query.explainer.ts b/src/08-external-libraries/61-react-query.explainer.ts
new file mode 100644
index 0000000..6b3a02b
--- /dev/null
+++ b/src/08-external-libraries/61-react-query.explainer.ts
@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface User {
+  fullName: string;
+  job: string;
+}
+
+const getUser = async (): Promise<User> => {
+  return Promise.resolve({
+    fullName: "Matt Pocock",
+    job: "Developer",
+  });
+};
+
+/**
+ * A bit of a hint to start with. useQuery has a LOT of overloads - but a lot
+ * of them are disappearing in the next major version. The ones that'll be
+ * sticking around are the first three.
+ *
+ * 1. How are the first three overloads different to the others? Put differently,
+ * what's the thing that's similar about the first three that's different to
+ * the other six?
+ */
+
+useQuery;
+// ^ CMD+click on this to see the overloads
+
+/**
+ * 2. When you provide queryFn to useQuery, the type of query.data is inferred
+ * as the return type of queryFn. Why is that?
+ */
+const query1 = useQuery({
+  queryFn: getUser,
+});
+
+// Without initialData, the type of query1.data is User | undefined
+type test1 = Expect<Equal<typeof query1.data, User | undefined>>;
+
+/**
+ * 3. When you provide initialData to useQuery, the type of query.data no longer
+ * has undefined in it. Why is that?
+ */
+const query2 = useQuery({
+  queryFn: getUser,
+  initialData: {
+    fullName: "",
+    job: "",
+  },
+});
+
+// WITH initialData, the type of query.data is just User
+type test2 = Expect<Equal<typeof query2.data, User>>;
diff --git a/src/08-external-libraries/62-react-query-wrapper.problem.ts b/src/08-external-libraries/62-react-query-wrapper.problem.ts
new file mode 100644
index 0000000..d3ec201
--- /dev/null
+++ b/src/08-external-libraries/62-react-query-wrapper.problem.ts
@@ -0,0 +1,46 @@
+import {
+  QueryFunctionContext,
+  QueryKey,
+  useQuery,
+} from "@tanstack/react-query";
+import { useAuthToken } from "fake-external-lib";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const useApi = (
+  queryKey: any[],
+  queryFn: (key: any, token: string) => Promise<any>,
+) => {
+  const token = useAuthToken();
+
+  return useQuery({
+    queryFn: (ctx) => queryFn(ctx, token),
+    queryKey,
+  });
+};
+
+// If you pass in an array of strings to queryFn, the type of ctx.queryKey
+// should be string[]
+const query = useApi(["users"], async (ctx, token) => {
+  type tests = [
+    Expect<Equal<typeof ctx.queryKey, string[]>>,
+    Expect<Equal<typeof token, string>>,
+  ];
+
+  return Promise.resolve([
+    {
+      id: 1,
+      name: "Matt Pocock",
+    },
+  ]);
+});
+
+// The type of query.data should be { id: number; name: string }[] | undefined
+type tests = [
+  Expect<Equal<typeof query.data, { id: number; name: string }[] | undefined>>,
+];
+
+// If you pass in an array of numbers in the queryKey, the type of ctx.queryKey
+// should be number[]
+useApi([1, 2], async (ctx, token) => {
+  type test = Expect<Equal<typeof ctx.queryKey, number[]>>;
+});
diff --git a/src/08-external-libraries/62-react-query-wrapper.solution.ts b/src/08-external-libraries/62-react-query-wrapper.solution.ts
new file mode 100644
index 0000000..5ff923c
--- /dev/null
+++ b/src/08-external-libraries/62-react-query-wrapper.solution.ts
@@ -0,0 +1,49 @@
+import {
+  QueryFunctionContext,
+  QueryKey,
+  useQuery,
+} from "@tanstack/react-query";
+import { useAuthToken } from "fake-external-lib";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const useApi = <TData, TQueryKey extends QueryKey>(
+  queryKey: TQueryKey,
+  queryFn: (
+    key: QueryFunctionContext<TQueryKey>,
+    token: string,
+  ) => Promise<TData>,
+) => {
+  const token = useAuthToken();
+
+  return useQuery({
+    queryFn: (ctx) => queryFn(ctx, token),
+    queryKey,
+  });
+};
+
+// If you pass in an array of strings to queryFn, the type of ctx.queryKey
+// should be string[]
+const query = useApi(["users"], async (ctx, token) => {
+  type tests = [
+    Expect<Equal<typeof ctx.queryKey, string[]>>,
+    Expect<Equal<typeof token, string>>,
+  ];
+
+  return Promise.resolve([
+    {
+      id: 1,
+      name: "Matt Pocock",
+    },
+  ]);
+});
+
+// The type of query.data should be { id: number; name: string }[] | undefined
+type tests = [
+  Expect<Equal<typeof query.data, { id: number; name: string }[] | undefined>>,
+];
+
+// If you pass in an array of numbers in the queryKey, the type of ctx.queryKey
+// should be number[]
+useApi([1, 2], async (ctx, token) => {
+  type test = Expect<Equal<typeof ctx.queryKey, number[]>>;
+});
diff --git a/src/08-external-libraries/63-react-select.problem.tsx b/src/08-external-libraries/63-react-select.problem.tsx
index e69de29..77dbf9f 100644
--- a/src/08-external-libraries/63-react-select.problem.tsx
+++ b/src/08-external-libraries/63-react-select.problem.tsx
@@ -0,0 +1,48 @@
+import ReactSelect from "react-select";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * 1. Try to figure out the types the props of the Select component should have,
+ * including the generic types!
+ *
+ * Here's a clue: ReactSelect exports a type called 'Props'...
+ */
+export const Select = (props) => {
+  return <ReactSelect {...props} />;
+};
+
+interface Option {
+  id: number;
+  label: string;
+}
+
+const guitarists: Option[] = [
+  {
+    id: 1,
+    label: "Jimi Hendrix",
+  },
+  {
+    id: 2,
+    label: "Stevie Ray Vaughan",
+  },
+];
+
+<>
+  <Select
+    options={guitarists}
+    onChange={(option) => {
+      // It should infer the type of option!
+      // If isMulti is false, it should NOT be an array
+      type test = Expect<Equal<typeof option, Option | null>>;
+    }}
+  />
+
+  <Select
+    options={guitarists}
+    isMulti
+    onChange={(option) => {
+      // If isMulti is true, it should be an array
+      type test = Expect<Equal<typeof option, readonly Option[]>>;
+    }}
+  />
+</>;
diff --git a/src/08-external-libraries/63-react-select.solution.tsx b/src/08-external-libraries/63-react-select.solution.tsx
new file mode 100644
index 0000000..42cfd96
--- /dev/null
+++ b/src/08-external-libraries/63-react-select.solution.tsx
@@ -0,0 +1,50 @@
+import ReactSelect, { GroupBase, Props } from "react-select";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * You need to mimic the exact type of the Props type exported by react-select.
+ */
+export const Select = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(
+  props: Props<Option, IsMulti, Group>,
+) => {
+  return <ReactSelect {...props} />;
+};
+
+interface Option {
+  id: number;
+  label: string;
+}
+
+const guitarists: Option[] = [
+  {
+    id: 1,
+    label: "Jimi Hendrix",
+  },
+  {
+    id: 2,
+    label: "Stevie Ray Vaughan",
+  },
+];
+
+<>
+  <Select
+    options={guitarists}
+    onChange={(option) => {
+      // If isMulti is false, it should NOT be an array
+      type test = Expect<Equal<typeof option, Option | null>>;
+    }}
+  />
+
+  <Select
+    options={guitarists}
+    isMulti
+    onChange={(option) => {
+      // If isMulti is true, it should be an array
+      type test = Expect<Equal<typeof option, readonly Option[]>>;
+    }}
+  />
+</>;
diff --git a/src/08-external-libraries/61-react-query.problem.tsx b/src/08-external-libraries/64-react-table.explainer.tsx
similarity index 100%
rename from src/08-external-libraries/61-react-query.problem.tsx
rename to src/08-external-libraries/64-react-table.explainer.tsx
diff --git a/src/08-external-libraries/65-reusable-form-library-with-zod.problem.tsx b/src/08-external-libraries/65-reusable-form-library-with-zod.problem.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/08-external-libraries/62-redux-toolkit.problem.tsx b/src/08-external-libraries/65-zustand.problem.tsx
similarity index 100%
rename from src/08-external-libraries/62-redux-toolkit.problem.tsx
rename to src/08-external-libraries/65-zustand.problem.tsx
diff --git a/src/08-external-libraries/64-zustand.problem.tsx b/src/08-external-libraries/66-reusable-form-library-with-zod.problem.tsx
similarity index 100%
rename from src/08-external-libraries/64-zustand.problem.tsx
rename to src/08-external-libraries/66-reusable-form-library-with-zod.problem.tsx
diff --git a/src/fake-external-lib/index.ts b/src/fake-external-lib/index.ts
new file mode 100644
index 0000000..64360da
--- /dev/null
+++ b/src/fake-external-lib/index.ts
@@ -0,0 +1,6 @@
+/**
+ * A fake auth token hook.
+ */
+export const useAuthToken = () => {
+  return "123";
+};
diff --git a/tsconfig.json b/tsconfig.json
index 02525ad..08e399b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,12 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "paths": {
+      "fake-external-lib": [
+        "./src/fake-external-lib/index"
+      ],
+    }
   },
   "include": [
     "src"

From 5b79f2f847f4b2ce3f5272cffdc3fc9696023206 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 6 Jun 2023 13:04:24 +0100
Subject: [PATCH 013/165] Changed readme

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index b4cd134..1a3ee86 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 ## Quickstart
 
-Clone this repo or [open in Gitpod](https://gitpod.io/#https://github.com/total-typescript/beginners-typescript).
+Clone this repo or [open in Gitpod](https://gitpod.io/#https://github.com/total-typescript/react-typescript-tutorial).
 
 ```sh
 # Installs all dependencies
@@ -28,9 +28,9 @@ The `exercise` script will run TypeScript typechecks and a test suite on the exe
 
 This course encourages **active, exploratory learning**. In the video, I'll explain a problem, and **you'll be asked to try to find a solution**. To attempt a solution, you'll need to:
 
-1. Check out [TypeScript's docs](https://www.typescriptlang.org/docs/handbook/intro.html)
-2. Try to find something that looks relevant.
-3. Give it a go to see if it solves the problem.
+1. Check out [TypeScript's docs](https://www.typescriptlang.org/docs/handbook/intro.html) or the [React TypeScript cheatsheet](https://react-typescript-cheatsheet.netlify.app/)
+1. Try to find something that looks relevant.
+1. Give it a go to see if it solves the problem.
 
 You'll know if you've succeeded because the tests will pass.
 

From 0d6018d41d1caf1b2aafc8714dc033ecd7550362 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 6 Jun 2023 13:17:42 +0100
Subject: [PATCH 014/165] Update TT CLI

---
 package-lock.json | 20 +++++++++++---------
 package.json      |  8 ++++++--
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b751cd1..6c2bd48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "zod": "^3.17.10"
       },
       "devDependencies": {
-        "@total-typescript/exercise-cli": "0.1.0",
+        "@total-typescript/exercise-cli": "^0.2.2",
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
@@ -667,14 +667,15 @@
       }
     },
     "node_modules/@total-typescript/exercise-cli": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.1.0.tgz",
-      "integrity": "sha512-A6DpA9BK88sdhgyH/Qy/rrFwnu93Eh0OQd/oOb/4dSVxNIfvJ155CsBCEtKyp5iM2QKfIHYNfdJFcPut090esQ==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.2.2.tgz",
+      "integrity": "sha512-0DYEpYQThv+kzj3Pqi1lN08XB22YgHTXnAnnQqO5/7jQ6yQtty4rEu0FoSm+xwzO8nn8NAwjotpYrEq5Lf6jBg==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
         "commander": "^10.0.1",
-        "fast-glob": "^3.2.12"
+        "fast-glob": "^3.2.12",
+        "jsonc-parser": "^3.2.0"
       },
       "bin": {
         "tt-cli": "dist/bin.js"
@@ -4126,14 +4127,15 @@
       "dev": true
     },
     "@total-typescript/exercise-cli": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.1.0.tgz",
-      "integrity": "sha512-A6DpA9BK88sdhgyH/Qy/rrFwnu93Eh0OQd/oOb/4dSVxNIfvJ155CsBCEtKyp5iM2QKfIHYNfdJFcPut090esQ==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.2.2.tgz",
+      "integrity": "sha512-0DYEpYQThv+kzj3Pqi1lN08XB22YgHTXnAnnQqO5/7jQ6yQtty4rEu0FoSm+xwzO8nn8NAwjotpYrEq5Lf6jBg==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.3",
         "commander": "^10.0.1",
-        "fast-glob": "^3.2.12"
+        "fast-glob": "^3.2.12",
+        "jsonc-parser": "^3.2.0"
       }
     },
     "@types/body-parser": {
diff --git a/package.json b/package.json
index c3aa83e..293a3f9 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "Matt Pocock <mattpocockvoice@gmail.com>",
   "license": "GPL",
   "devDependencies": {
-    "@total-typescript/exercise-cli": "0.1.0",
+    "@total-typescript/exercise-cli": "^0.2.2",
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",
@@ -140,7 +140,11 @@
     "e-52": "tt-cli run 52",
     "s-52": "tt-cli run 52 --solution",
     "e-64": "tt-cli run 64",
-    "s-64": "tt-cli run 64 --solution"
+    "s-64": "tt-cli run 64 --solution",
+    "e-65": "tt-cli run 65",
+    "s-65": "tt-cli run 65 --solution",
+    "e-66": "tt-cli run 66",
+    "s-66": "tt-cli run 66 --solution"
   },
   "dependencies": {
     "@tanstack/react-query": "^4.29.12",

From daa9b5a948caaad15a88e462bdc26f486e85579e Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 6 Jun 2023 14:53:33 +0100
Subject: [PATCH 015/165] Added react-select

---
 package-lock.json                             | 79 ++++++++++++++++++-
 ...roblem.tsx => 61-react-select.problem.tsx} |  0
 ...ution.tsx => 61-react-select.solution.tsx} |  0
 ...plainer.ts => 62-react-query.explainer.ts} |  0
 ...m.ts => 63-react-query-wrapper.problem.ts} |  0
 ....ts => 63-react-query-wrapper.solution.ts} |  0
 ...eusable-form-library-with-zod.problem.tsx} |  0
 .../65-zustand.problem.tsx                    |  0
 ...reusable-form-library-with-zod.problem.tsx |  0
 9 files changed, 78 insertions(+), 1 deletion(-)
 rename src/08-external-libraries/{63-react-select.problem.tsx => 61-react-select.problem.tsx} (100%)
 rename src/08-external-libraries/{63-react-select.solution.tsx => 61-react-select.solution.tsx} (100%)
 rename src/08-external-libraries/{61-react-query.explainer.ts => 62-react-query.explainer.ts} (100%)
 rename src/08-external-libraries/{62-react-query-wrapper.problem.ts => 63-react-query-wrapper.problem.ts} (100%)
 rename src/08-external-libraries/{62-react-query-wrapper.solution.ts => 63-react-query-wrapper.solution.ts} (100%)
 rename src/08-external-libraries/{64-react-table.explainer.tsx => 64-reusable-form-library-with-zod.problem.tsx} (100%)
 delete mode 100644 src/08-external-libraries/65-zustand.problem.tsx
 delete mode 100644 src/08-external-libraries/66-reusable-form-library-with-zod.problem.tsx

diff --git a/package-lock.json b/package-lock.json
index 6c2bd48..24f5c1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "GPL",
       "dependencies": {
         "@tanstack/react-query": "^4.29.12",
+        "@tanstack/react-table": "^8.9.1",
         "@types/express": "^4.17.13",
         "@types/react": "^18.2.8",
         "@types/react-dom": "^18.2.4",
@@ -18,7 +19,8 @@
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.44.3",
         "react-select": "^5.7.3",
-        "zod": "^3.17.10"
+        "zod": "^3.17.10",
+        "zustand": "^4.3.8"
       },
       "devDependencies": {
         "@total-typescript/exercise-cli": "^0.2.2",
@@ -657,6 +659,37 @@
         }
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.9.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.1.tgz",
+      "integrity": "sha512-yHs2m6lk5J5RNcu2dNtsDGux66wNXZjEgzxos6MRCX8gL+nqxeW3ZglqP6eANN0bGElPnjvqiUHGQvdACOr3Cw==",
+      "dependencies": {
+        "@tanstack/table-core": "8.9.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.9.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.9.1.tgz",
+      "integrity": "sha512-2+R83n8vMZND0q3W1lSiF7co9nFbeWbjAErFf27xwbeA9E0wtUu5ZDfgj+TZ6JzdAEQAgfxkk/QNFAKiS8E4MA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3750,6 +3783,29 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.8.tgz",
+      "integrity": "sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "immer": ">=9.0",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   },
   "dependencies": {
@@ -4120,6 +4176,19 @@
         "use-sync-external-store": "^1.2.0"
       }
     },
+    "@tanstack/react-table": {
+      "version": "8.9.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.1.tgz",
+      "integrity": "sha512-yHs2m6lk5J5RNcu2dNtsDGux66wNXZjEgzxos6MRCX8gL+nqxeW3ZglqP6eANN0bGElPnjvqiUHGQvdACOr3Cw==",
+      "requires": {
+        "@tanstack/table-core": "8.9.1"
+      }
+    },
+    "@tanstack/table-core": {
+      "version": "8.9.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.9.1.tgz",
+      "integrity": "sha512-2+R83n8vMZND0q3W1lSiF7co9nFbeWbjAErFf27xwbeA9E0wtUu5ZDfgj+TZ6JzdAEQAgfxkk/QNFAKiS8E4MA=="
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -6358,6 +6427,14 @@
       "version": "3.21.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
       "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw=="
+    },
+    "zustand": {
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.8.tgz",
+      "integrity": "sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==",
+      "requires": {
+        "use-sync-external-store": "1.2.0"
+      }
     }
   }
 }
diff --git a/src/08-external-libraries/63-react-select.problem.tsx b/src/08-external-libraries/61-react-select.problem.tsx
similarity index 100%
rename from src/08-external-libraries/63-react-select.problem.tsx
rename to src/08-external-libraries/61-react-select.problem.tsx
diff --git a/src/08-external-libraries/63-react-select.solution.tsx b/src/08-external-libraries/61-react-select.solution.tsx
similarity index 100%
rename from src/08-external-libraries/63-react-select.solution.tsx
rename to src/08-external-libraries/61-react-select.solution.tsx
diff --git a/src/08-external-libraries/61-react-query.explainer.ts b/src/08-external-libraries/62-react-query.explainer.ts
similarity index 100%
rename from src/08-external-libraries/61-react-query.explainer.ts
rename to src/08-external-libraries/62-react-query.explainer.ts
diff --git a/src/08-external-libraries/62-react-query-wrapper.problem.ts b/src/08-external-libraries/63-react-query-wrapper.problem.ts
similarity index 100%
rename from src/08-external-libraries/62-react-query-wrapper.problem.ts
rename to src/08-external-libraries/63-react-query-wrapper.problem.ts
diff --git a/src/08-external-libraries/62-react-query-wrapper.solution.ts b/src/08-external-libraries/63-react-query-wrapper.solution.ts
similarity index 100%
rename from src/08-external-libraries/62-react-query-wrapper.solution.ts
rename to src/08-external-libraries/63-react-query-wrapper.solution.ts
diff --git a/src/08-external-libraries/64-react-table.explainer.tsx b/src/08-external-libraries/64-reusable-form-library-with-zod.problem.tsx
similarity index 100%
rename from src/08-external-libraries/64-react-table.explainer.tsx
rename to src/08-external-libraries/64-reusable-form-library-with-zod.problem.tsx
diff --git a/src/08-external-libraries/65-zustand.problem.tsx b/src/08-external-libraries/65-zustand.problem.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/08-external-libraries/66-reusable-form-library-with-zod.problem.tsx b/src/08-external-libraries/66-reusable-form-library-with-zod.problem.tsx
deleted file mode 100644
index e69de29..0000000

From 2d03fd908f64a330231826d104cb0d1ee2e7688a Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 7 Jun 2023 09:23:19 +0100
Subject: [PATCH 016/165] Changed to Extends

---
 .../60-react-hook-form-wrapper.problem.tsx                | 4 ++--
 .../60-react-hook-form-wrapper.solution.tsx               | 4 ++--
 src/helpers/type-utils.ts                                 | 8 +++-----
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx b/src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx
index a98f29a..f24d09a 100644
--- a/src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx
+++ b/src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx
@@ -1,5 +1,5 @@
 import { useForm } from "react-hook-form";
-import { Equal, Expect, ExpectExtends } from "../helpers/type-utils";
+import { Equal, Expect, Extends } from "../helpers/type-utils";
 
 /**
  * Here, we're creating a wrapper around react-hook-form's useForm hook.
@@ -39,7 +39,7 @@ customForm.handleSubmit((values) => {
   type test = Expect<
     // Expect that inside handleSubmit, it's inferred as
     // { firstName: string; lastName: string }
-    ExpectExtends<
+    Extends<
       {
         firstName: string;
         lastName: string;
diff --git a/src/08-external-libraries/60-react-hook-form-wrapper.solution.tsx b/src/08-external-libraries/60-react-hook-form-wrapper.solution.tsx
index 067ebe5..0053076 100644
--- a/src/08-external-libraries/60-react-hook-form-wrapper.solution.tsx
+++ b/src/08-external-libraries/60-react-hook-form-wrapper.solution.tsx
@@ -1,5 +1,5 @@
 import { DefaultValues, FieldValues, useForm } from "react-hook-form";
-import { Equal, Expect, ExpectExtends } from "../helpers/type-utils";
+import { Equal, Expect, Extends } from "../helpers/type-utils";
 
 /**
  * We add TValues as a generic to our hook, and use it to type the defaultValues.
@@ -41,7 +41,7 @@ customForm.handleSubmit((values) => {
   type test = Expect<
     // Expect that inside handleSubmit, it's inferred as
     // { firstName: string; lastName: string }
-    ExpectExtends<
+    Extends<
       {
         firstName: string;
         lastName: string;
diff --git a/src/helpers/type-utils.ts b/src/helpers/type-utils.ts
index ac65c6c..8f9a01a 100644
--- a/src/helpers/type-utils.ts
+++ b/src/helpers/type-utils.ts
@@ -29,14 +29,12 @@ export type Alike<X, Y> = Equal<MergeInsertions<X>, MergeInsertions<Y>>;
  *
  * type tests = [
  *   // Expect that `number` is assignable to `1`.
- *   Expect<ExpectExtends<1, number>>,
+ *   Expect<Extends<1, number>>,
  *   // Expect that `abc` is assignable to `string`
- *   Expect<ExpectExtends<'abc', string>>,
+ *   Expect<Extends<'abc', string>>,
  * ];
  */
-export type ExpectExtends<VALUE, EXPECTED> = EXPECTED extends VALUE
-  ? true
-  : false;
+export type Extends<VALUE, EXPECTED> = EXPECTED extends VALUE ? true : false;
 export type ExpectValidArgs<
   FUNC extends (...args: any[]) => any,
   ARGS extends any[],

From 874bdd204fd99e4787eff7db9674807fd26dc2af Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 7 Jun 2023 09:35:35 +0100
Subject: [PATCH 017/165] Added lazy load component exercise

---
 .../30-lazy-load-component.problem.tsx        | 36 +++++++++++++++++++
 .../30-lazy-load-component.solution.tsx       | 28 +++++++++++++++
 ...erics-vs-discriminated-unions.problem.tsx} |  0
 ...rics-vs-discriminated-unions.solution.tsx} |  0
 ...> 32-variants-with-classnames.problem.tsx} |  0
 ... 32-variants-with-classnames.solution.tsx} |  0
 ... 33-prop-groups-with-variants.problem.tsx} |  0
 ...-prop-groups-with-variants.solution.1.tsx} |  0
 ...-prop-groups-with-variants.solution.2.tsx} |  0
 ...lem.ts => 34-tuple-return-type.problem.ts} |  0
 ....ts => 34-tuple-return-type.solution.1.ts} |  0
 ....ts => 34-tuple-return-type.solution.2.ts} |  0
 ...problem.ts => 35-generic-hooks.problem.ts} |  0
 ...on.1.ts => 35-generic-hooks.solution.1.ts} |  0
 ...on.2.ts => 35-generic-hooks.solution.2.ts} |  0
 ...on.3.ts => 35-generic-hooks.solution.3.ts} |  0
 ...on.4.ts => 35-generic-hooks.solution.4.ts} |  0
 ...on.5.ts => 35-generic-hooks.solution.5.ts} |  0
 ...36-function-overloads-in-hooks.problem.ts} |  0
 ...function-overloads-in-hooks.solution.1.ts} |  0
 ...function-overloads-in-hooks.solution.2.ts} |  0
 ...> 37-generic-localstorage-hook.problem.ts} |  0
 ... 37-generic-localstorage-hook.solution.ts} |  0
 ...ic-localstorage-hook-with-zod.problem.tsx} |  0
 ...c-localstorage-hook-with-zod.solution.tsx} |  0
 ....tsx => 39-unions-in-usestate.problem.tsx} |  0
 ...tsx => 39-unions-in-usestate.solution.tsx} |  0
 ...criminated-unions-in-usestate.problem.tsx} |  0
 ...riminated-unions-in-usestate.solution.tsx} |  0
 ...nion-returns-from-custom-hooks.problem.ts} |  0
 ...ated-tuples-from-custom-hooks.problem.tsx} |  0
 ...ted-tuples-from-custom-hooks.solution.tsx} |  0
 ...stand-react-namespace-export.explainer.ts} |  0
 ...4-understanding-jsx-element.explainer.tsx} |  0
 ...> 45-strongly-typing-children.problem.tsx} |  0
 ...ow-does-react-represent-html.explainer.ts} |  0
 ...nding-jsx-intrinsic-elements.explainer.ts} |  0
 ... => 47-add-new-global-element.problem.tsx} |  0
 ...=> 47-add-new-global-element.solution.tsx} |  0
 ...add-attribute-to-all-elements.problem.tsx} |  0
 ...d-attribute-to-audio-elements.problem.tsx} |  0
 ...add-attribute-to-div-elements.problem.tsx} |  0
 ...em.tsx => 51-required-context.problem.tsx} |  0
 ...tsx => 51-required-context.solution.1.tsx} |  0
 ...tsx => 51-required-context.solution.2.tsx} |  0
 ...tsx => 52-compound-components.problem.tsx} |  0
 ...forward-ref-with-generics.explainer.1.tsx} |  0
 ...forward-ref-with-generics.explainer.2.tsx} |  0
 ...{53-hoc-problem.tsx => 54-hoc-problem.tsx} |  0
 ...of-components-with-same-props.problem.tsx} |  0
 ...components-with-same-props.solution.1.tsx} |  0
 ...components-with-same-props.solution.2.tsx} |  0
 ...rop.problem.tsx => 56-as-prop.problem.tsx} |  0
 ...lution.1.tsx => 56-as-prop.solution.1.tsx} |  0
 ...lution.2.tsx => 56-as-prop.solution.2.tsx} |  0
 ...s-prop-with-custom-components.problem.tsx} |  0
 ...-prop-with-custom-components.solution.tsx} |  0
 ...roblem.tsx => 58-render-props.problem.tsx} |  0
 ...59-render-props-with-generics.problem.tsx} |  0
 ...r.tsx => 60-react-hook-form.explainer.tsx} |  0
 ...=> 61-react-hook-form-wrapper.problem.tsx} |  0
 ...> 61-react-hook-form-wrapper.solution.tsx} |  0
 ...roblem.tsx => 62-react-select.problem.tsx} |  0
 ...ution.tsx => 62-react-select.solution.tsx} |  0
 ...plainer.ts => 63-react-query.explainer.ts} |  0
 ...m.ts => 64-react-query-wrapper.problem.ts} |  0
 ....ts => 64-react-query-wrapper.solution.ts} |  0
 ...eusable-form-library-with-zod.problem.tsx} |  0
 src/fake-external-lib/component.tsx           |  5 +++
 tsconfig.json                                 |  3 ++
 70 files changed, 72 insertions(+)
 create mode 100644 src/04-advanced-components/30-lazy-load-component.problem.tsx
 create mode 100644 src/04-advanced-components/30-lazy-load-component.solution.tsx
 rename src/04-advanced-components/{30-generics-vs-discriminated-unions.problem.tsx => 31-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/04-advanced-components/{30-generics-vs-discriminated-unions.solution.tsx => 31-generics-vs-discriminated-unions.solution.tsx} (100%)
 rename src/04-advanced-components/{31-variants-with-classnames.problem.tsx => 32-variants-with-classnames.problem.tsx} (100%)
 rename src/04-advanced-components/{31-variants-with-classnames.solution.tsx => 32-variants-with-classnames.solution.tsx} (100%)
 rename src/04-advanced-components/{32-prop-groups-with-variants.problem.tsx => 33-prop-groups-with-variants.problem.tsx} (100%)
 rename src/04-advanced-components/{32-prop-groups-with-variants.solution.1.tsx => 33-prop-groups-with-variants.solution.1.tsx} (100%)
 rename src/04-advanced-components/{32-prop-groups-with-variants.solution.2.tsx => 33-prop-groups-with-variants.solution.2.tsx} (100%)
 rename src/05-advanced-hooks/{33-tuple-return-type.problem.ts => 34-tuple-return-type.problem.ts} (100%)
 rename src/05-advanced-hooks/{33-tuple-return-type.solution.1.ts => 34-tuple-return-type.solution.1.ts} (100%)
 rename src/05-advanced-hooks/{33-tuple-return-type.solution.2.ts => 34-tuple-return-type.solution.2.ts} (100%)
 rename src/05-advanced-hooks/{34-generic-hooks.problem.ts => 35-generic-hooks.problem.ts} (100%)
 rename src/05-advanced-hooks/{34-generic-hooks.solution.1.ts => 35-generic-hooks.solution.1.ts} (100%)
 rename src/05-advanced-hooks/{34-generic-hooks.solution.2.ts => 35-generic-hooks.solution.2.ts} (100%)
 rename src/05-advanced-hooks/{34-generic-hooks.solution.3.ts => 35-generic-hooks.solution.3.ts} (100%)
 rename src/05-advanced-hooks/{34-generic-hooks.solution.4.ts => 35-generic-hooks.solution.4.ts} (100%)
 rename src/05-advanced-hooks/{34-generic-hooks.solution.5.ts => 35-generic-hooks.solution.5.ts} (100%)
 rename src/05-advanced-hooks/{35-function-overloads-in-hooks.problem.ts => 36-function-overloads-in-hooks.problem.ts} (100%)
 rename src/05-advanced-hooks/{35-function-overloads-in-hooks.solution.1.ts => 36-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/05-advanced-hooks/{35-function-overloads-in-hooks.solution.2.ts => 36-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/05-advanced-hooks/{36-generic-localstorage-hook.problem.ts => 37-generic-localstorage-hook.problem.ts} (100%)
 rename src/05-advanced-hooks/{36-generic-localstorage-hook.solution.ts => 37-generic-localstorage-hook.solution.ts} (100%)
 rename src/05-advanced-hooks/{37-generic-localstorage-hook-with-zod.problem.tsx => 38-generic-localstorage-hook-with-zod.problem.tsx} (100%)
 rename src/05-advanced-hooks/{37-generic-localstorage-hook-with-zod.solution.tsx => 38-generic-localstorage-hook-with-zod.solution.tsx} (100%)
 rename src/05-advanced-hooks/{38-unions-in-usestate.problem.tsx => 39-unions-in-usestate.problem.tsx} (100%)
 rename src/05-advanced-hooks/{38-unions-in-usestate.solution.tsx => 39-unions-in-usestate.solution.tsx} (100%)
 rename src/05-advanced-hooks/{39-discriminated-unions-in-usestate.problem.tsx => 40-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/05-advanced-hooks/{39-discriminated-unions-in-usestate.solution.tsx => 40-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/05-advanced-hooks/{40-discriminated-union-returns-from-custom-hooks.problem.ts => 41-discriminated-union-returns-from-custom-hooks.problem.ts} (100%)
 rename src/05-advanced-hooks/{41-discriminated-tuples-from-custom-hooks.problem.tsx => 42-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/05-advanced-hooks/{41-discriminated-tuples-from-custom-hooks.solution.tsx => 42-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/06-types-deep-dive/{42-understand-react-namespace-export.explainer.ts => 43-understand-react-namespace-export.explainer.ts} (100%)
 rename src/06-types-deep-dive/{43-understanding-jsx-element.explainer.tsx => 44-understanding-jsx-element.explainer.tsx} (100%)
 rename src/06-types-deep-dive/{44-strongly-typing-children.problem.tsx => 45-strongly-typing-children.problem.tsx} (100%)
 rename src/06-types-deep-dive/{45-how-does-react-represent-html.explainer.ts => 46-how-does-react-represent-html.explainer.ts} (100%)
 rename src/06-types-deep-dive/{45-understanding-jsx-intrinsic-elements.explainer.ts => 46-understanding-jsx-intrinsic-elements.explainer.ts} (100%)
 rename src/06-types-deep-dive/{46-add-new-global-element.problem.tsx => 47-add-new-global-element.problem.tsx} (100%)
 rename src/06-types-deep-dive/{46-add-new-global-element.solution.tsx => 47-add-new-global-element.solution.tsx} (100%)
 rename src/06-types-deep-dive/{47-add-attribute-to-all-elements.problem.tsx => 48-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/06-types-deep-dive/{48-add-attribute-to-audio-elements.problem.tsx => 49-add-attribute-to-audio-elements.problem.tsx} (100%)
 rename src/06-types-deep-dive/{49-add-attribute-to-div-elements.problem.tsx => 50-add-attribute-to-div-elements.problem.tsx} (100%)
 rename src/07-advanced-patterns/{50-required-context.problem.tsx => 51-required-context.problem.tsx} (100%)
 rename src/07-advanced-patterns/{50-required-context.solution.1.tsx => 51-required-context.solution.1.tsx} (100%)
 rename src/07-advanced-patterns/{50-required-context.solution.2.tsx => 51-required-context.solution.2.tsx} (100%)
 rename src/07-advanced-patterns/{51-compound-components.problem.tsx => 52-compound-components.problem.tsx} (100%)
 rename src/07-advanced-patterns/{52-forward-ref-with-generics.explainer.1.tsx => 53-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/07-advanced-patterns/{52-forward-ref-with-generics.explainer.2.tsx => 53-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/07-advanced-patterns/{53-hoc-problem.tsx => 54-hoc-problem.tsx} (100%)
 rename src/07-advanced-patterns/{54-record-of-components-with-same-props.problem.tsx => 55-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/07-advanced-patterns/{54-record-of-components-with-same-props.solution.1.tsx => 55-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/07-advanced-patterns/{54-record-of-components-with-same-props.solution.2.tsx => 55-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/07-advanced-patterns/{55-as-prop.problem.tsx => 56-as-prop.problem.tsx} (100%)
 rename src/07-advanced-patterns/{55-as-prop.solution.1.tsx => 56-as-prop.solution.1.tsx} (100%)
 rename src/07-advanced-patterns/{55-as-prop.solution.2.tsx => 56-as-prop.solution.2.tsx} (100%)
 rename src/07-advanced-patterns/{56-as-prop-with-custom-components.problem.tsx => 57-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/07-advanced-patterns/{56-as-prop-with-custom-components.solution.tsx => 57-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/07-advanced-patterns/{57-render-props.problem.tsx => 58-render-props.problem.tsx} (100%)
 rename src/07-advanced-patterns/{58-render-props-with-generics.problem.tsx => 59-render-props-with-generics.problem.tsx} (100%)
 rename src/08-external-libraries/{59-react-hook-form.explainer.tsx => 60-react-hook-form.explainer.tsx} (100%)
 rename src/08-external-libraries/{60-react-hook-form-wrapper.problem.tsx => 61-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/08-external-libraries/{60-react-hook-form-wrapper.solution.tsx => 61-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/08-external-libraries/{61-react-select.problem.tsx => 62-react-select.problem.tsx} (100%)
 rename src/08-external-libraries/{61-react-select.solution.tsx => 62-react-select.solution.tsx} (100%)
 rename src/08-external-libraries/{62-react-query.explainer.ts => 63-react-query.explainer.ts} (100%)
 rename src/08-external-libraries/{63-react-query-wrapper.problem.ts => 64-react-query-wrapper.problem.ts} (100%)
 rename src/08-external-libraries/{63-react-query-wrapper.solution.ts => 64-react-query-wrapper.solution.ts} (100%)
 rename src/08-external-libraries/{64-reusable-form-library-with-zod.problem.tsx => 65-reusable-form-library-with-zod.problem.tsx} (100%)
 create mode 100644 src/fake-external-lib/component.tsx

diff --git a/src/04-advanced-components/30-lazy-load-component.problem.tsx b/src/04-advanced-components/30-lazy-load-component.problem.tsx
new file mode 100644
index 0000000..394c89c
--- /dev/null
+++ b/src/04-advanced-components/30-lazy-load-component.problem.tsx
@@ -0,0 +1,36 @@
+import { lazy, Suspense, useMemo } from "react";
+
+type Props = {
+  loader: () => Promise<{ default: any }>;
+};
+
+/**
+ * 1. This component is supposed to take a loader function that returns a
+ * component, and render that component when it's loaded.
+ *
+ * But it's not typed correctly, and it's not generic enough.
+ * Fix the typing errors, and make it generic enough to support any component.
+ * Hint - React.ComponentProps will come in handy!
+ */
+function LazyLoad({ loader, ...props }: Props) {
+  const LazyComponent = useMemo(() => lazy(loader), [loader]);
+
+  return (
+    <Suspense fallback={"Loading..."}>
+      <LazyComponent {...(props as any)} />
+    </Suspense>
+  );
+}
+
+<>
+  <LazyLoad loader={() => import("fake-external-component")} id="123" />
+
+  <LazyLoad
+    loader={() => import("fake-external-component")}
+    // @ts-expect-error number is not assignable to string
+    id={123}
+  />
+
+  {/* @ts-expect-error id is missing! */}
+  <LazyLoad loader={() => import("fake-external-component")} />
+</>;
diff --git a/src/04-advanced-components/30-lazy-load-component.solution.tsx b/src/04-advanced-components/30-lazy-load-component.solution.tsx
new file mode 100644
index 0000000..d02ec5b
--- /dev/null
+++ b/src/04-advanced-components/30-lazy-load-component.solution.tsx
@@ -0,0 +1,28 @@
+import { lazy, Suspense, useMemo } from "react";
+
+type Props<C extends React.FC<any>> = React.ComponentProps<C> & {
+  loader: () => Promise<{ default: C }>;
+};
+
+function LazyLoad<C extends React.FC<any>>({ loader, ...props }: Props<C>) {
+  const LazyComponent = useMemo(() => lazy(loader), [loader]);
+
+  return (
+    <Suspense fallback={"Loading..."}>
+      <LazyComponent {...(props as any)} />
+    </Suspense>
+  );
+}
+
+<>
+  <LazyLoad loader={() => import("fake-external-component")} id="123" />
+
+  <LazyLoad
+    loader={() => import("fake-external-component")}
+    // @ts-expect-error number is not assignable to string
+    id={123}
+  />
+
+  {/* @ts-expect-error id is missing! */}
+  <LazyLoad loader={() => import("fake-external-component")} />
+</>;
diff --git a/src/04-advanced-components/30-generics-vs-discriminated-unions.problem.tsx b/src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/04-advanced-components/30-generics-vs-discriminated-unions.problem.tsx
rename to src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/04-advanced-components/30-generics-vs-discriminated-unions.solution.tsx b/src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/04-advanced-components/30-generics-vs-discriminated-unions.solution.tsx
rename to src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/04-advanced-components/31-variants-with-classnames.problem.tsx b/src/04-advanced-components/32-variants-with-classnames.problem.tsx
similarity index 100%
rename from src/04-advanced-components/31-variants-with-classnames.problem.tsx
rename to src/04-advanced-components/32-variants-with-classnames.problem.tsx
diff --git a/src/04-advanced-components/31-variants-with-classnames.solution.tsx b/src/04-advanced-components/32-variants-with-classnames.solution.tsx
similarity index 100%
rename from src/04-advanced-components/31-variants-with-classnames.solution.tsx
rename to src/04-advanced-components/32-variants-with-classnames.solution.tsx
diff --git a/src/04-advanced-components/32-prop-groups-with-variants.problem.tsx b/src/04-advanced-components/33-prop-groups-with-variants.problem.tsx
similarity index 100%
rename from src/04-advanced-components/32-prop-groups-with-variants.problem.tsx
rename to src/04-advanced-components/33-prop-groups-with-variants.problem.tsx
diff --git a/src/04-advanced-components/32-prop-groups-with-variants.solution.1.tsx b/src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/32-prop-groups-with-variants.solution.1.tsx
rename to src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx
diff --git a/src/04-advanced-components/32-prop-groups-with-variants.solution.2.tsx b/src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/32-prop-groups-with-variants.solution.2.tsx
rename to src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx
diff --git a/src/05-advanced-hooks/33-tuple-return-type.problem.ts b/src/05-advanced-hooks/34-tuple-return-type.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/33-tuple-return-type.problem.ts
rename to src/05-advanced-hooks/34-tuple-return-type.problem.ts
diff --git a/src/05-advanced-hooks/33-tuple-return-type.solution.1.ts b/src/05-advanced-hooks/34-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/05-advanced-hooks/33-tuple-return-type.solution.1.ts
rename to src/05-advanced-hooks/34-tuple-return-type.solution.1.ts
diff --git a/src/05-advanced-hooks/33-tuple-return-type.solution.2.ts b/src/05-advanced-hooks/34-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/05-advanced-hooks/33-tuple-return-type.solution.2.ts
rename to src/05-advanced-hooks/34-tuple-return-type.solution.2.ts
diff --git a/src/05-advanced-hooks/34-generic-hooks.problem.ts b/src/05-advanced-hooks/35-generic-hooks.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/34-generic-hooks.problem.ts
rename to src/05-advanced-hooks/35-generic-hooks.problem.ts
diff --git a/src/05-advanced-hooks/34-generic-hooks.solution.1.ts b/src/05-advanced-hooks/35-generic-hooks.solution.1.ts
similarity index 100%
rename from src/05-advanced-hooks/34-generic-hooks.solution.1.ts
rename to src/05-advanced-hooks/35-generic-hooks.solution.1.ts
diff --git a/src/05-advanced-hooks/34-generic-hooks.solution.2.ts b/src/05-advanced-hooks/35-generic-hooks.solution.2.ts
similarity index 100%
rename from src/05-advanced-hooks/34-generic-hooks.solution.2.ts
rename to src/05-advanced-hooks/35-generic-hooks.solution.2.ts
diff --git a/src/05-advanced-hooks/34-generic-hooks.solution.3.ts b/src/05-advanced-hooks/35-generic-hooks.solution.3.ts
similarity index 100%
rename from src/05-advanced-hooks/34-generic-hooks.solution.3.ts
rename to src/05-advanced-hooks/35-generic-hooks.solution.3.ts
diff --git a/src/05-advanced-hooks/34-generic-hooks.solution.4.ts b/src/05-advanced-hooks/35-generic-hooks.solution.4.ts
similarity index 100%
rename from src/05-advanced-hooks/34-generic-hooks.solution.4.ts
rename to src/05-advanced-hooks/35-generic-hooks.solution.4.ts
diff --git a/src/05-advanced-hooks/34-generic-hooks.solution.5.ts b/src/05-advanced-hooks/35-generic-hooks.solution.5.ts
similarity index 100%
rename from src/05-advanced-hooks/34-generic-hooks.solution.5.ts
rename to src/05-advanced-hooks/35-generic-hooks.solution.5.ts
diff --git a/src/05-advanced-hooks/35-function-overloads-in-hooks.problem.ts b/src/05-advanced-hooks/36-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/35-function-overloads-in-hooks.problem.ts
rename to src/05-advanced-hooks/36-function-overloads-in-hooks.problem.ts
diff --git a/src/05-advanced-hooks/35-function-overloads-in-hooks.solution.1.ts b/src/05-advanced-hooks/36-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/05-advanced-hooks/35-function-overloads-in-hooks.solution.1.ts
rename to src/05-advanced-hooks/36-function-overloads-in-hooks.solution.1.ts
diff --git a/src/05-advanced-hooks/35-function-overloads-in-hooks.solution.2.ts b/src/05-advanced-hooks/36-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/05-advanced-hooks/35-function-overloads-in-hooks.solution.2.ts
rename to src/05-advanced-hooks/36-function-overloads-in-hooks.solution.2.ts
diff --git a/src/05-advanced-hooks/36-generic-localstorage-hook.problem.ts b/src/05-advanced-hooks/37-generic-localstorage-hook.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/36-generic-localstorage-hook.problem.ts
rename to src/05-advanced-hooks/37-generic-localstorage-hook.problem.ts
diff --git a/src/05-advanced-hooks/36-generic-localstorage-hook.solution.ts b/src/05-advanced-hooks/37-generic-localstorage-hook.solution.ts
similarity index 100%
rename from src/05-advanced-hooks/36-generic-localstorage-hook.solution.ts
rename to src/05-advanced-hooks/37-generic-localstorage-hook.solution.ts
diff --git a/src/05-advanced-hooks/37-generic-localstorage-hook-with-zod.problem.tsx b/src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/37-generic-localstorage-hook-with-zod.problem.tsx
rename to src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.problem.tsx
diff --git a/src/05-advanced-hooks/37-generic-localstorage-hook-with-zod.solution.tsx b/src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/37-generic-localstorage-hook-with-zod.solution.tsx
rename to src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.solution.tsx
diff --git a/src/05-advanced-hooks/38-unions-in-usestate.problem.tsx b/src/05-advanced-hooks/39-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/38-unions-in-usestate.problem.tsx
rename to src/05-advanced-hooks/39-unions-in-usestate.problem.tsx
diff --git a/src/05-advanced-hooks/38-unions-in-usestate.solution.tsx b/src/05-advanced-hooks/39-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/38-unions-in-usestate.solution.tsx
rename to src/05-advanced-hooks/39-unions-in-usestate.solution.tsx
diff --git a/src/05-advanced-hooks/39-discriminated-unions-in-usestate.problem.tsx b/src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/39-discriminated-unions-in-usestate.problem.tsx
rename to src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/05-advanced-hooks/39-discriminated-unions-in-usestate.solution.tsx b/src/05-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/39-discriminated-unions-in-usestate.solution.tsx
rename to src/05-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/05-advanced-hooks/40-discriminated-union-returns-from-custom-hooks.problem.ts b/src/05-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/40-discriminated-union-returns-from-custom-hooks.problem.ts
rename to src/05-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts
diff --git a/src/05-advanced-hooks/41-discriminated-tuples-from-custom-hooks.problem.tsx b/src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/41-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/05-advanced-hooks/41-discriminated-tuples-from-custom-hooks.solution.tsx b/src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/41-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/06-types-deep-dive/42-understand-react-namespace-export.explainer.ts b/src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/06-types-deep-dive/42-understand-react-namespace-export.explainer.ts
rename to src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts
diff --git a/src/06-types-deep-dive/43-understanding-jsx-element.explainer.tsx b/src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/06-types-deep-dive/43-understanding-jsx-element.explainer.tsx
rename to src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx
diff --git a/src/06-types-deep-dive/44-strongly-typing-children.problem.tsx b/src/06-types-deep-dive/45-strongly-typing-children.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/44-strongly-typing-children.problem.tsx
rename to src/06-types-deep-dive/45-strongly-typing-children.problem.tsx
diff --git a/src/06-types-deep-dive/45-how-does-react-represent-html.explainer.ts b/src/06-types-deep-dive/46-how-does-react-represent-html.explainer.ts
similarity index 100%
rename from src/06-types-deep-dive/45-how-does-react-represent-html.explainer.ts
rename to src/06-types-deep-dive/46-how-does-react-represent-html.explainer.ts
diff --git a/src/06-types-deep-dive/45-understanding-jsx-intrinsic-elements.explainer.ts b/src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts
similarity index 100%
rename from src/06-types-deep-dive/45-understanding-jsx-intrinsic-elements.explainer.ts
rename to src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts
diff --git a/src/06-types-deep-dive/46-add-new-global-element.problem.tsx b/src/06-types-deep-dive/47-add-new-global-element.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/46-add-new-global-element.problem.tsx
rename to src/06-types-deep-dive/47-add-new-global-element.problem.tsx
diff --git a/src/06-types-deep-dive/46-add-new-global-element.solution.tsx b/src/06-types-deep-dive/47-add-new-global-element.solution.tsx
similarity index 100%
rename from src/06-types-deep-dive/46-add-new-global-element.solution.tsx
rename to src/06-types-deep-dive/47-add-new-global-element.solution.tsx
diff --git a/src/06-types-deep-dive/47-add-attribute-to-all-elements.problem.tsx b/src/06-types-deep-dive/48-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/47-add-attribute-to-all-elements.problem.tsx
rename to src/06-types-deep-dive/48-add-attribute-to-all-elements.problem.tsx
diff --git a/src/06-types-deep-dive/48-add-attribute-to-audio-elements.problem.tsx b/src/06-types-deep-dive/49-add-attribute-to-audio-elements.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/48-add-attribute-to-audio-elements.problem.tsx
rename to src/06-types-deep-dive/49-add-attribute-to-audio-elements.problem.tsx
diff --git a/src/06-types-deep-dive/49-add-attribute-to-div-elements.problem.tsx b/src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/49-add-attribute-to-div-elements.problem.tsx
rename to src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx
diff --git a/src/07-advanced-patterns/50-required-context.problem.tsx b/src/07-advanced-patterns/51-required-context.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/50-required-context.problem.tsx
rename to src/07-advanced-patterns/51-required-context.problem.tsx
diff --git a/src/07-advanced-patterns/50-required-context.solution.1.tsx b/src/07-advanced-patterns/51-required-context.solution.1.tsx
similarity index 100%
rename from src/07-advanced-patterns/50-required-context.solution.1.tsx
rename to src/07-advanced-patterns/51-required-context.solution.1.tsx
diff --git a/src/07-advanced-patterns/50-required-context.solution.2.tsx b/src/07-advanced-patterns/51-required-context.solution.2.tsx
similarity index 100%
rename from src/07-advanced-patterns/50-required-context.solution.2.tsx
rename to src/07-advanced-patterns/51-required-context.solution.2.tsx
diff --git a/src/07-advanced-patterns/51-compound-components.problem.tsx b/src/07-advanced-patterns/52-compound-components.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/51-compound-components.problem.tsx
rename to src/07-advanced-patterns/52-compound-components.problem.tsx
diff --git a/src/07-advanced-patterns/52-forward-ref-with-generics.explainer.1.tsx b/src/07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/07-advanced-patterns/52-forward-ref-with-generics.explainer.1.tsx
rename to src/07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/07-advanced-patterns/52-forward-ref-with-generics.explainer.2.tsx b/src/07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/07-advanced-patterns/52-forward-ref-with-generics.explainer.2.tsx
rename to src/07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/07-advanced-patterns/53-hoc-problem.tsx b/src/07-advanced-patterns/54-hoc-problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/53-hoc-problem.tsx
rename to src/07-advanced-patterns/54-hoc-problem.tsx
diff --git a/src/07-advanced-patterns/54-record-of-components-with-same-props.problem.tsx b/src/07-advanced-patterns/55-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/54-record-of-components-with-same-props.problem.tsx
rename to src/07-advanced-patterns/55-record-of-components-with-same-props.problem.tsx
diff --git a/src/07-advanced-patterns/54-record-of-components-with-same-props.solution.1.tsx b/src/07-advanced-patterns/55-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/07-advanced-patterns/54-record-of-components-with-same-props.solution.1.tsx
rename to src/07-advanced-patterns/55-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/07-advanced-patterns/54-record-of-components-with-same-props.solution.2.tsx b/src/07-advanced-patterns/55-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/07-advanced-patterns/54-record-of-components-with-same-props.solution.2.tsx
rename to src/07-advanced-patterns/55-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/07-advanced-patterns/55-as-prop.problem.tsx b/src/07-advanced-patterns/56-as-prop.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/55-as-prop.problem.tsx
rename to src/07-advanced-patterns/56-as-prop.problem.tsx
diff --git a/src/07-advanced-patterns/55-as-prop.solution.1.tsx b/src/07-advanced-patterns/56-as-prop.solution.1.tsx
similarity index 100%
rename from src/07-advanced-patterns/55-as-prop.solution.1.tsx
rename to src/07-advanced-patterns/56-as-prop.solution.1.tsx
diff --git a/src/07-advanced-patterns/55-as-prop.solution.2.tsx b/src/07-advanced-patterns/56-as-prop.solution.2.tsx
similarity index 100%
rename from src/07-advanced-patterns/55-as-prop.solution.2.tsx
rename to src/07-advanced-patterns/56-as-prop.solution.2.tsx
diff --git a/src/07-advanced-patterns/56-as-prop-with-custom-components.problem.tsx b/src/07-advanced-patterns/57-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/56-as-prop-with-custom-components.problem.tsx
rename to src/07-advanced-patterns/57-as-prop-with-custom-components.problem.tsx
diff --git a/src/07-advanced-patterns/56-as-prop-with-custom-components.solution.tsx b/src/07-advanced-patterns/57-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/07-advanced-patterns/56-as-prop-with-custom-components.solution.tsx
rename to src/07-advanced-patterns/57-as-prop-with-custom-components.solution.tsx
diff --git a/src/07-advanced-patterns/57-render-props.problem.tsx b/src/07-advanced-patterns/58-render-props.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/57-render-props.problem.tsx
rename to src/07-advanced-patterns/58-render-props.problem.tsx
diff --git a/src/07-advanced-patterns/58-render-props-with-generics.problem.tsx b/src/07-advanced-patterns/59-render-props-with-generics.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/58-render-props-with-generics.problem.tsx
rename to src/07-advanced-patterns/59-render-props-with-generics.problem.tsx
diff --git a/src/08-external-libraries/59-react-hook-form.explainer.tsx b/src/08-external-libraries/60-react-hook-form.explainer.tsx
similarity index 100%
rename from src/08-external-libraries/59-react-hook-form.explainer.tsx
rename to src/08-external-libraries/60-react-hook-form.explainer.tsx
diff --git a/src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx b/src/08-external-libraries/61-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/08-external-libraries/60-react-hook-form-wrapper.problem.tsx
rename to src/08-external-libraries/61-react-hook-form-wrapper.problem.tsx
diff --git a/src/08-external-libraries/60-react-hook-form-wrapper.solution.tsx b/src/08-external-libraries/61-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/08-external-libraries/60-react-hook-form-wrapper.solution.tsx
rename to src/08-external-libraries/61-react-hook-form-wrapper.solution.tsx
diff --git a/src/08-external-libraries/61-react-select.problem.tsx b/src/08-external-libraries/62-react-select.problem.tsx
similarity index 100%
rename from src/08-external-libraries/61-react-select.problem.tsx
rename to src/08-external-libraries/62-react-select.problem.tsx
diff --git a/src/08-external-libraries/61-react-select.solution.tsx b/src/08-external-libraries/62-react-select.solution.tsx
similarity index 100%
rename from src/08-external-libraries/61-react-select.solution.tsx
rename to src/08-external-libraries/62-react-select.solution.tsx
diff --git a/src/08-external-libraries/62-react-query.explainer.ts b/src/08-external-libraries/63-react-query.explainer.ts
similarity index 100%
rename from src/08-external-libraries/62-react-query.explainer.ts
rename to src/08-external-libraries/63-react-query.explainer.ts
diff --git a/src/08-external-libraries/63-react-query-wrapper.problem.ts b/src/08-external-libraries/64-react-query-wrapper.problem.ts
similarity index 100%
rename from src/08-external-libraries/63-react-query-wrapper.problem.ts
rename to src/08-external-libraries/64-react-query-wrapper.problem.ts
diff --git a/src/08-external-libraries/63-react-query-wrapper.solution.ts b/src/08-external-libraries/64-react-query-wrapper.solution.ts
similarity index 100%
rename from src/08-external-libraries/63-react-query-wrapper.solution.ts
rename to src/08-external-libraries/64-react-query-wrapper.solution.ts
diff --git a/src/08-external-libraries/64-reusable-form-library-with-zod.problem.tsx b/src/08-external-libraries/65-reusable-form-library-with-zod.problem.tsx
similarity index 100%
rename from src/08-external-libraries/64-reusable-form-library-with-zod.problem.tsx
rename to src/08-external-libraries/65-reusable-form-library-with-zod.problem.tsx
diff --git a/src/fake-external-lib/component.tsx b/src/fake-external-lib/component.tsx
new file mode 100644
index 0000000..bde2757
--- /dev/null
+++ b/src/fake-external-lib/component.tsx
@@ -0,0 +1,5 @@
+const MyComponent = (props: { id: string }) => {
+  return <div>Hello!</div>;
+};
+
+export default MyComponent;
diff --git a/tsconfig.json b/tsconfig.json
index 08e399b..d9a0299 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,9 @@
       "fake-external-lib": [
         "./src/fake-external-lib/index"
       ],
+      "fake-external-component": [
+        "./src/fake-external-lib/component"
+      ]
     }
   },
   "include": [

From 97513a6ead8659ff5ff4a331393834e44e724cb7 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 7 Jun 2023 14:29:34 +0100
Subject: [PATCH 018/165] Reached final section plan

---
 .../22-discriminated-union-props.problem.tsx  |  3 --
 .../22-discriminated-union-props.solution.tsx |  3 --
 ...ructuring-discriminated-unions.problem.tsx |  0
 ...turing-discriminated-unions.solution.1.tsx |  0
 ...turing-discriminated-unions.solution.2.tsx |  0
 ...minated-union-with-other-props.problem.tsx |  0
 ...inated-union-with-other-props.solution.tsx |  0
 ...either-all-these-props-or-none.problem.tsx |  0
 ...her-all-these-props-or-none.solution.1.tsx |  0
 ...her-all-these-props-or-none.solution.2.tsx |  0
 ...her-all-these-props-or-none.solution.3.tsx |  0
 .../26-partial-autocomplete.problem.tsx       |  0
 .../26-partial-autocomplete.solution.1.tsx    |  0
 .../26-partial-autocomplete.solution.2.tsx    |  0
 ...ponents-vs-passing-react-nodes.problem.tsx |  0
 ...ents-vs-passing-react-nodes.solution.1.tsx |  0
 ...ents-vs-passing-react-nodes.solution.2.tsx |  0
 .../28-toggle-props.problem.tsx               |  0
 .../28-toggle-props.solution.tsx              |  0
 .../29-variants-with-classnames.problem.tsx}  |  0
 .../29-variants-with-classnames.solution.tsx} |  0
 .../30-prop-groups-with-variants.problem.tsx} |  0
 ...-prop-groups-with-variants.solution.1.tsx} |  0
 ...-prop-groups-with-variants.solution.2.tsx} |  0
 .../31-generic-props.problem.tsx}             |  0
 .../31-generic-props.solution.tsx}            |  0
 .../32-generic-hooks.problem.ts}              |  0
 .../32-generic-hooks.solution.1.ts}           |  0
 .../32-generic-hooks.solution.2.ts}           |  0
 .../32-generic-hooks.solution.3.ts}           |  0
 .../32-generic-hooks.solution.4.ts}           |  0
 .../32-generic-hooks.solution.5.ts}           |  0
 .../33-lazy-load-component.problem.tsx}       |  0
 .../33-lazy-load-component.solution.tsx}      |  0
 ...erics-vs-discriminated-unions.problem.tsx} |  0
 ...rics-vs-discriminated-unions.solution.tsx} |  0
 src/05-generics/35-button-group.problem.tsx   | 48 ++++++++++++++++++
 src/05-generics/35-button-group.solution.tsx  | 48 ++++++++++++++++++
 src/05-generics/36-button-group.problem.tsx   | 50 +++++++++++++++++++
 .../36-button-group.solution.1.tsx            | 36 +++++++++++++
 .../36-button-group.solution.2.tsx            | 46 +++++++++++++++++
 .../37-generic-localstorage-hook.problem.ts   |  0
 .../37-generic-localstorage-hook.solution.ts  |  0
 .../39-tuple-return-type.problem.ts}          |  0
 .../39-tuple-return-type.solution.1.ts}       |  0
 .../39-tuple-return-type.solution.2.ts}       |  0
 .../40-unions-in-usestate.problem.tsx}        |  0
 .../40-unions-in-usestate.solution.tsx}       |  0
 ...criminated-unions-in-usestate.problem.tsx} |  0
 ...riminated-unions-in-usestate.solution.tsx} |  0
 ...nion-returns-from-custom-hooks.problem.ts} |  0
 ...43-function-overloads-in-hooks.problem.ts} |  0
 ...function-overloads-in-hooks.solution.1.ts} |  0
 ...function-overloads-in-hooks.solution.2.ts} |  0
 ...ated-tuples-from-custom-hooks.problem.tsx} |  0
 ...ted-tuples-from-custom-hooks.solution.tsx} |  0
 ...stand-react-namespace-export.explainer.ts} |  0
 ...6-understanding-jsx-element.explainer.tsx} |  0
 .../47-strongly-typing-children.problem.tsx}  |  0
 ...ow-does-react-represent-html.explainer.ts} |  0
 ...nding-jsx-intrinsic-elements.explainer.ts} |  0
 .../49-add-new-global-element.problem.tsx}    |  0
 .../49-add-new-global-element.solution.tsx}   |  0
 ...add-attribute-to-all-elements.problem.tsx} |  0
 ...d-attribute-to-audio-elements.problem.tsx} |  0
 ...add-attribute-to-div-elements.problem.tsx} |  0
 .../53-required-context.problem.tsx}          |  0
 .../53-required-context.solution.1.tsx}       |  0
 .../53-required-context.solution.2.tsx}       |  0
 .../54-compound-components.problem.tsx}       |  0
 ...forward-ref-with-generics.explainer.1.tsx} |  0
 ...forward-ref-with-generics.explainer.2.tsx} |  0
 .../56-hoc-problem.tsx}                       |  0
 ...of-components-with-same-props.problem.tsx} |  0
 ...components-with-same-props.solution.1.tsx} |  0
 ...components-with-same-props.solution.2.tsx} |  0
 .../58-as-prop.problem.tsx}                   |  0
 .../58-as-prop.solution.1.tsx}                |  0
 .../58-as-prop.solution.2.tsx}                |  0
 ...s-prop-with-custom-components.problem.tsx} |  0
 ...-prop-with-custom-components.solution.tsx} |  0
 .../60-render-props.problem.tsx}              |  0
 ...61-render-props-with-generics.problem.tsx} |  0
 src/08-external-libraries/readme.md           |  1 -
 .../62-react-hook-form.explainer.tsx}         |  0
 .../63-react-hook-form-wrapper.problem.tsx}   |  0
 .../63-react-hook-form-wrapper.solution.tsx}  |  0
 .../64-react-select.problem.tsx}              |  0
 .../64-react-select.solution.tsx}             |  0
 .../65-react-query.explainer.ts}              |  0
 .../66-react-query-wrapper.problem.ts}        |  0
 .../66-react-query-wrapper.solution.ts}       |  0
 ...eusable-form-library-with-zod.problem.tsx} |  0
 ...ic-localstorage-hook-with-zod.problem.tsx} |  0
 ...c-localstorage-hook-with-zod.solution.tsx} |  9 ++--
 95 files changed, 234 insertions(+), 10 deletions(-)
 rename src/{04-advanced-components => 04-advanced-props}/22-discriminated-union-props.problem.tsx (90%)
 rename src/{04-advanced-components => 04-advanced-props}/22-discriminated-union-props.solution.tsx (90%)
 rename src/{04-advanced-components => 04-advanced-props}/23-destructuring-discriminated-unions.problem.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/23-destructuring-discriminated-unions.solution.1.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/23-destructuring-discriminated-unions.solution.2.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/24-discriminated-union-with-other-props.problem.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/24-discriminated-union-with-other-props.solution.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/25-either-all-these-props-or-none.problem.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/25-either-all-these-props-or-none.solution.1.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/25-either-all-these-props-or-none.solution.2.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/25-either-all-these-props-or-none.solution.3.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/26-partial-autocomplete.problem.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/26-partial-autocomplete.solution.1.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/26-partial-autocomplete.solution.2.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/27-passing-react-components-vs-passing-react-nodes.problem.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/28-toggle-props.problem.tsx (100%)
 rename src/{04-advanced-components => 04-advanced-props}/28-toggle-props.solution.tsx (100%)
 rename src/{04-advanced-components/32-variants-with-classnames.problem.tsx => 04-advanced-props/29-variants-with-classnames.problem.tsx} (100%)
 rename src/{04-advanced-components/32-variants-with-classnames.solution.tsx => 04-advanced-props/29-variants-with-classnames.solution.tsx} (100%)
 rename src/{04-advanced-components/33-prop-groups-with-variants.problem.tsx => 04-advanced-props/30-prop-groups-with-variants.problem.tsx} (100%)
 rename src/{04-advanced-components/33-prop-groups-with-variants.solution.1.tsx => 04-advanced-props/30-prop-groups-with-variants.solution.1.tsx} (100%)
 rename src/{04-advanced-components/33-prop-groups-with-variants.solution.2.tsx => 04-advanced-props/30-prop-groups-with-variants.solution.2.tsx} (100%)
 rename src/{04-advanced-components/29-generic-props.problem.tsx => 05-generics/31-generic-props.problem.tsx} (100%)
 rename src/{04-advanced-components/29-generic-props.solution.tsx => 05-generics/31-generic-props.solution.tsx} (100%)
 rename src/{05-advanced-hooks/35-generic-hooks.problem.ts => 05-generics/32-generic-hooks.problem.ts} (100%)
 rename src/{05-advanced-hooks/35-generic-hooks.solution.1.ts => 05-generics/32-generic-hooks.solution.1.ts} (100%)
 rename src/{05-advanced-hooks/35-generic-hooks.solution.2.ts => 05-generics/32-generic-hooks.solution.2.ts} (100%)
 rename src/{05-advanced-hooks/35-generic-hooks.solution.3.ts => 05-generics/32-generic-hooks.solution.3.ts} (100%)
 rename src/{05-advanced-hooks/35-generic-hooks.solution.4.ts => 05-generics/32-generic-hooks.solution.4.ts} (100%)
 rename src/{05-advanced-hooks/35-generic-hooks.solution.5.ts => 05-generics/32-generic-hooks.solution.5.ts} (100%)
 rename src/{04-advanced-components/30-lazy-load-component.problem.tsx => 05-generics/33-lazy-load-component.problem.tsx} (100%)
 rename src/{04-advanced-components/30-lazy-load-component.solution.tsx => 05-generics/33-lazy-load-component.solution.tsx} (100%)
 rename src/{04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx => 05-generics/34-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/{04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx => 05-generics/34-generics-vs-discriminated-unions.solution.tsx} (100%)
 create mode 100644 src/05-generics/35-button-group.problem.tsx
 create mode 100644 src/05-generics/35-button-group.solution.tsx
 create mode 100644 src/05-generics/36-button-group.problem.tsx
 create mode 100644 src/05-generics/36-button-group.solution.1.tsx
 create mode 100644 src/05-generics/36-button-group.solution.2.tsx
 rename src/{05-advanced-hooks => 05-generics}/37-generic-localstorage-hook.problem.ts (100%)
 rename src/{05-advanced-hooks => 05-generics}/37-generic-localstorage-hook.solution.ts (100%)
 rename src/{05-advanced-hooks/34-tuple-return-type.problem.ts => 06-advanced-hooks/39-tuple-return-type.problem.ts} (100%)
 rename src/{05-advanced-hooks/34-tuple-return-type.solution.1.ts => 06-advanced-hooks/39-tuple-return-type.solution.1.ts} (100%)
 rename src/{05-advanced-hooks/34-tuple-return-type.solution.2.ts => 06-advanced-hooks/39-tuple-return-type.solution.2.ts} (100%)
 rename src/{05-advanced-hooks/39-unions-in-usestate.problem.tsx => 06-advanced-hooks/40-unions-in-usestate.problem.tsx} (100%)
 rename src/{05-advanced-hooks/39-unions-in-usestate.solution.tsx => 06-advanced-hooks/40-unions-in-usestate.solution.tsx} (100%)
 rename src/{05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx => 06-advanced-hooks/41-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/{05-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx => 06-advanced-hooks/41-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/{05-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts => 06-advanced-hooks/42-discriminated-union-returns-from-custom-hooks.problem.ts} (100%)
 rename src/{05-advanced-hooks/36-function-overloads-in-hooks.problem.ts => 06-advanced-hooks/43-function-overloads-in-hooks.problem.ts} (100%)
 rename src/{05-advanced-hooks/36-function-overloads-in-hooks.solution.1.ts => 06-advanced-hooks/43-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/{05-advanced-hooks/36-function-overloads-in-hooks.solution.2.ts => 06-advanced-hooks/43-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/{05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx => 06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/{05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.solution.tsx => 06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/{06-types-deep-dive/43-understand-react-namespace-export.explainer.ts => 07-types-deep-dive/45-understand-react-namespace-export.explainer.ts} (100%)
 rename src/{06-types-deep-dive/44-understanding-jsx-element.explainer.tsx => 07-types-deep-dive/46-understanding-jsx-element.explainer.tsx} (100%)
 rename src/{06-types-deep-dive/45-strongly-typing-children.problem.tsx => 07-types-deep-dive/47-strongly-typing-children.problem.tsx} (100%)
 rename src/{06-types-deep-dive/46-how-does-react-represent-html.explainer.ts => 07-types-deep-dive/48-how-does-react-represent-html.explainer.ts} (100%)
 rename src/{06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts => 07-types-deep-dive/48-understanding-jsx-intrinsic-elements.explainer.ts} (100%)
 rename src/{06-types-deep-dive/47-add-new-global-element.problem.tsx => 07-types-deep-dive/49-add-new-global-element.problem.tsx} (100%)
 rename src/{06-types-deep-dive/47-add-new-global-element.solution.tsx => 07-types-deep-dive/49-add-new-global-element.solution.tsx} (100%)
 rename src/{06-types-deep-dive/48-add-attribute-to-all-elements.problem.tsx => 07-types-deep-dive/50-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/{06-types-deep-dive/49-add-attribute-to-audio-elements.problem.tsx => 07-types-deep-dive/51-add-attribute-to-audio-elements.problem.tsx} (100%)
 rename src/{06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx => 07-types-deep-dive/52-add-attribute-to-div-elements.problem.tsx} (100%)
 rename src/{07-advanced-patterns/51-required-context.problem.tsx => 08-advanced-patterns/53-required-context.problem.tsx} (100%)
 rename src/{07-advanced-patterns/51-required-context.solution.1.tsx => 08-advanced-patterns/53-required-context.solution.1.tsx} (100%)
 rename src/{07-advanced-patterns/51-required-context.solution.2.tsx => 08-advanced-patterns/53-required-context.solution.2.tsx} (100%)
 rename src/{07-advanced-patterns/52-compound-components.problem.tsx => 08-advanced-patterns/54-compound-components.problem.tsx} (100%)
 rename src/{07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx => 08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/{07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx => 08-advanced-patterns/55-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/{07-advanced-patterns/54-hoc-problem.tsx => 08-advanced-patterns/56-hoc-problem.tsx} (100%)
 rename src/{07-advanced-patterns/55-record-of-components-with-same-props.problem.tsx => 08-advanced-patterns/57-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/{07-advanced-patterns/55-record-of-components-with-same-props.solution.1.tsx => 08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/{07-advanced-patterns/55-record-of-components-with-same-props.solution.2.tsx => 08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/{07-advanced-patterns/56-as-prop.problem.tsx => 08-advanced-patterns/58-as-prop.problem.tsx} (100%)
 rename src/{07-advanced-patterns/56-as-prop.solution.1.tsx => 08-advanced-patterns/58-as-prop.solution.1.tsx} (100%)
 rename src/{07-advanced-patterns/56-as-prop.solution.2.tsx => 08-advanced-patterns/58-as-prop.solution.2.tsx} (100%)
 rename src/{07-advanced-patterns/57-as-prop-with-custom-components.problem.tsx => 08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/{07-advanced-patterns/57-as-prop-with-custom-components.solution.tsx => 08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/{07-advanced-patterns/58-render-props.problem.tsx => 08-advanced-patterns/60-render-props.problem.tsx} (100%)
 rename src/{07-advanced-patterns/59-render-props-with-generics.problem.tsx => 08-advanced-patterns/61-render-props-with-generics.problem.tsx} (100%)
 delete mode 100644 src/08-external-libraries/readme.md
 rename src/{08-external-libraries/60-react-hook-form.explainer.tsx => 09-external-libraries/62-react-hook-form.explainer.tsx} (100%)
 rename src/{08-external-libraries/61-react-hook-form-wrapper.problem.tsx => 09-external-libraries/63-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/{08-external-libraries/61-react-hook-form-wrapper.solution.tsx => 09-external-libraries/63-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/{08-external-libraries/62-react-select.problem.tsx => 09-external-libraries/64-react-select.problem.tsx} (100%)
 rename src/{08-external-libraries/62-react-select.solution.tsx => 09-external-libraries/64-react-select.solution.tsx} (100%)
 rename src/{08-external-libraries/63-react-query.explainer.ts => 09-external-libraries/65-react-query.explainer.ts} (100%)
 rename src/{08-external-libraries/64-react-query-wrapper.problem.ts => 09-external-libraries/66-react-query-wrapper.problem.ts} (100%)
 rename src/{08-external-libraries/64-react-query-wrapper.solution.ts => 09-external-libraries/66-react-query-wrapper.solution.ts} (100%)
 rename src/{08-external-libraries/65-reusable-form-library-with-zod.problem.tsx => 09-external-libraries/67-reusable-form-library-with-zod.problem.tsx} (100%)
 rename src/{05-advanced-hooks/38-generic-localstorage-hook-with-zod.problem.tsx => 09-external-libraries/68-generic-localstorage-hook-with-zod.problem.tsx} (100%)
 rename src/{05-advanced-hooks/38-generic-localstorage-hook-with-zod.solution.tsx => 09-external-libraries/68-generic-localstorage-hook-with-zod.solution.tsx} (79%)

diff --git a/src/04-advanced-components/22-discriminated-union-props.problem.tsx b/src/04-advanced-props/22-discriminated-union-props.problem.tsx
similarity index 90%
rename from src/04-advanced-components/22-discriminated-union-props.problem.tsx
rename to src/04-advanced-props/22-discriminated-union-props.problem.tsx
index 40cc325..92ef26f 100644
--- a/src/04-advanced-components/22-discriminated-union-props.problem.tsx
+++ b/src/04-advanced-props/22-discriminated-union-props.problem.tsx
@@ -1,6 +1,3 @@
-// How to use discriminated unions in props
-// With variant
-
 type ModalProps = {
   variant: "no-title" | "title";
   title?: string;
diff --git a/src/04-advanced-components/22-discriminated-union-props.solution.tsx b/src/04-advanced-props/22-discriminated-union-props.solution.tsx
similarity index 90%
rename from src/04-advanced-components/22-discriminated-union-props.solution.tsx
rename to src/04-advanced-props/22-discriminated-union-props.solution.tsx
index 3d33f9d..4e53792 100644
--- a/src/04-advanced-components/22-discriminated-union-props.solution.tsx
+++ b/src/04-advanced-props/22-discriminated-union-props.solution.tsx
@@ -1,6 +1,3 @@
-// How to use discriminated unions in props
-// With variant
-
 type ModalProps =
   | {
       variant: "no-title";
diff --git a/src/04-advanced-components/23-destructuring-discriminated-unions.problem.tsx b/src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx
similarity index 100%
rename from src/04-advanced-components/23-destructuring-discriminated-unions.problem.tsx
rename to src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx
diff --git a/src/04-advanced-components/23-destructuring-discriminated-unions.solution.1.tsx b/src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/23-destructuring-discriminated-unions.solution.1.tsx
rename to src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx
diff --git a/src/04-advanced-components/23-destructuring-discriminated-unions.solution.2.tsx b/src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/23-destructuring-discriminated-unions.solution.2.tsx
rename to src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx
diff --git a/src/04-advanced-components/24-discriminated-union-with-other-props.problem.tsx b/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
similarity index 100%
rename from src/04-advanced-components/24-discriminated-union-with-other-props.problem.tsx
rename to src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
diff --git a/src/04-advanced-components/24-discriminated-union-with-other-props.solution.tsx b/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
similarity index 100%
rename from src/04-advanced-components/24-discriminated-union-with-other-props.solution.tsx
rename to src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
diff --git a/src/04-advanced-components/25-either-all-these-props-or-none.problem.tsx b/src/04-advanced-props/25-either-all-these-props-or-none.problem.tsx
similarity index 100%
rename from src/04-advanced-components/25-either-all-these-props-or-none.problem.tsx
rename to src/04-advanced-props/25-either-all-these-props-or-none.problem.tsx
diff --git a/src/04-advanced-components/25-either-all-these-props-or-none.solution.1.tsx b/src/04-advanced-props/25-either-all-these-props-or-none.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/25-either-all-these-props-or-none.solution.1.tsx
rename to src/04-advanced-props/25-either-all-these-props-or-none.solution.1.tsx
diff --git a/src/04-advanced-components/25-either-all-these-props-or-none.solution.2.tsx b/src/04-advanced-props/25-either-all-these-props-or-none.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/25-either-all-these-props-or-none.solution.2.tsx
rename to src/04-advanced-props/25-either-all-these-props-or-none.solution.2.tsx
diff --git a/src/04-advanced-components/25-either-all-these-props-or-none.solution.3.tsx b/src/04-advanced-props/25-either-all-these-props-or-none.solution.3.tsx
similarity index 100%
rename from src/04-advanced-components/25-either-all-these-props-or-none.solution.3.tsx
rename to src/04-advanced-props/25-either-all-these-props-or-none.solution.3.tsx
diff --git a/src/04-advanced-components/26-partial-autocomplete.problem.tsx b/src/04-advanced-props/26-partial-autocomplete.problem.tsx
similarity index 100%
rename from src/04-advanced-components/26-partial-autocomplete.problem.tsx
rename to src/04-advanced-props/26-partial-autocomplete.problem.tsx
diff --git a/src/04-advanced-components/26-partial-autocomplete.solution.1.tsx b/src/04-advanced-props/26-partial-autocomplete.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/26-partial-autocomplete.solution.1.tsx
rename to src/04-advanced-props/26-partial-autocomplete.solution.1.tsx
diff --git a/src/04-advanced-components/26-partial-autocomplete.solution.2.tsx b/src/04-advanced-props/26-partial-autocomplete.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/26-partial-autocomplete.solution.2.tsx
rename to src/04-advanced-props/26-partial-autocomplete.solution.2.tsx
diff --git a/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx b/src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.problem.tsx
similarity index 100%
rename from src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.problem.tsx
rename to src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.problem.tsx
diff --git a/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx b/src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx
rename to src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx
diff --git a/src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx b/src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx
rename to src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx
diff --git a/src/04-advanced-components/28-toggle-props.problem.tsx b/src/04-advanced-props/28-toggle-props.problem.tsx
similarity index 100%
rename from src/04-advanced-components/28-toggle-props.problem.tsx
rename to src/04-advanced-props/28-toggle-props.problem.tsx
diff --git a/src/04-advanced-components/28-toggle-props.solution.tsx b/src/04-advanced-props/28-toggle-props.solution.tsx
similarity index 100%
rename from src/04-advanced-components/28-toggle-props.solution.tsx
rename to src/04-advanced-props/28-toggle-props.solution.tsx
diff --git a/src/04-advanced-components/32-variants-with-classnames.problem.tsx b/src/04-advanced-props/29-variants-with-classnames.problem.tsx
similarity index 100%
rename from src/04-advanced-components/32-variants-with-classnames.problem.tsx
rename to src/04-advanced-props/29-variants-with-classnames.problem.tsx
diff --git a/src/04-advanced-components/32-variants-with-classnames.solution.tsx b/src/04-advanced-props/29-variants-with-classnames.solution.tsx
similarity index 100%
rename from src/04-advanced-components/32-variants-with-classnames.solution.tsx
rename to src/04-advanced-props/29-variants-with-classnames.solution.tsx
diff --git a/src/04-advanced-components/33-prop-groups-with-variants.problem.tsx b/src/04-advanced-props/30-prop-groups-with-variants.problem.tsx
similarity index 100%
rename from src/04-advanced-components/33-prop-groups-with-variants.problem.tsx
rename to src/04-advanced-props/30-prop-groups-with-variants.problem.tsx
diff --git a/src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx b/src/04-advanced-props/30-prop-groups-with-variants.solution.1.tsx
similarity index 100%
rename from src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx
rename to src/04-advanced-props/30-prop-groups-with-variants.solution.1.tsx
diff --git a/src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx b/src/04-advanced-props/30-prop-groups-with-variants.solution.2.tsx
similarity index 100%
rename from src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx
rename to src/04-advanced-props/30-prop-groups-with-variants.solution.2.tsx
diff --git a/src/04-advanced-components/29-generic-props.problem.tsx b/src/05-generics/31-generic-props.problem.tsx
similarity index 100%
rename from src/04-advanced-components/29-generic-props.problem.tsx
rename to src/05-generics/31-generic-props.problem.tsx
diff --git a/src/04-advanced-components/29-generic-props.solution.tsx b/src/05-generics/31-generic-props.solution.tsx
similarity index 100%
rename from src/04-advanced-components/29-generic-props.solution.tsx
rename to src/05-generics/31-generic-props.solution.tsx
diff --git a/src/05-advanced-hooks/35-generic-hooks.problem.ts b/src/05-generics/32-generic-hooks.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.problem.ts
rename to src/05-generics/32-generic-hooks.problem.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.solution.1.ts b/src/05-generics/32-generic-hooks.solution.1.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.solution.1.ts
rename to src/05-generics/32-generic-hooks.solution.1.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.solution.2.ts b/src/05-generics/32-generic-hooks.solution.2.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.solution.2.ts
rename to src/05-generics/32-generic-hooks.solution.2.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.solution.3.ts b/src/05-generics/32-generic-hooks.solution.3.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.solution.3.ts
rename to src/05-generics/32-generic-hooks.solution.3.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.solution.4.ts b/src/05-generics/32-generic-hooks.solution.4.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.solution.4.ts
rename to src/05-generics/32-generic-hooks.solution.4.ts
diff --git a/src/05-advanced-hooks/35-generic-hooks.solution.5.ts b/src/05-generics/32-generic-hooks.solution.5.ts
similarity index 100%
rename from src/05-advanced-hooks/35-generic-hooks.solution.5.ts
rename to src/05-generics/32-generic-hooks.solution.5.ts
diff --git a/src/04-advanced-components/30-lazy-load-component.problem.tsx b/src/05-generics/33-lazy-load-component.problem.tsx
similarity index 100%
rename from src/04-advanced-components/30-lazy-load-component.problem.tsx
rename to src/05-generics/33-lazy-load-component.problem.tsx
diff --git a/src/04-advanced-components/30-lazy-load-component.solution.tsx b/src/05-generics/33-lazy-load-component.solution.tsx
similarity index 100%
rename from src/04-advanced-components/30-lazy-load-component.solution.tsx
rename to src/05-generics/33-lazy-load-component.solution.tsx
diff --git a/src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx b/src/05-generics/34-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx
rename to src/05-generics/34-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx b/src/05-generics/34-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx
rename to src/05-generics/34-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/05-generics/35-button-group.problem.tsx b/src/05-generics/35-button-group.problem.tsx
new file mode 100644
index 0000000..287ce93
--- /dev/null
+++ b/src/05-generics/35-button-group.problem.tsx
@@ -0,0 +1,48 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface ButtonGroupProps<TValue extends string> {
+  buttons: {
+    value: TValue;
+    label: string;
+  }[];
+  onClick: (value: TValue) => void;
+}
+
+const ButtonGroup = <TValue extends string>(
+  props: ButtonGroupProps<TValue>,
+) => {
+  return (
+    <div>
+      {props.buttons.map((button) => {
+        return (
+          <button
+            key={button.value}
+            onClick={() => {
+              props.onClick(button.value);
+            }}
+          >
+            {button.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+<>
+  <ButtonGroup
+    onClick={(value) => {
+      type test = Expect<Equal<typeof value, "add" | "delete">>;
+    }}
+    buttons={[
+      {
+        value: "add",
+        label: "Add",
+      },
+      {
+        value: "delete",
+        label: "Delete",
+      },
+    ]}
+  ></ButtonGroup>
+</>;
diff --git a/src/05-generics/35-button-group.solution.tsx b/src/05-generics/35-button-group.solution.tsx
new file mode 100644
index 0000000..287ce93
--- /dev/null
+++ b/src/05-generics/35-button-group.solution.tsx
@@ -0,0 +1,48 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface ButtonGroupProps<TValue extends string> {
+  buttons: {
+    value: TValue;
+    label: string;
+  }[];
+  onClick: (value: TValue) => void;
+}
+
+const ButtonGroup = <TValue extends string>(
+  props: ButtonGroupProps<TValue>,
+) => {
+  return (
+    <div>
+      {props.buttons.map((button) => {
+        return (
+          <button
+            key={button.value}
+            onClick={() => {
+              props.onClick(button.value);
+            }}
+          >
+            {button.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+<>
+  <ButtonGroup
+    onClick={(value) => {
+      type test = Expect<Equal<typeof value, "add" | "delete">>;
+    }}
+    buttons={[
+      {
+        value: "add",
+        label: "Add",
+      },
+      {
+        value: "delete",
+        label: "Delete",
+      },
+    ]}
+  ></ButtonGroup>
+</>;
diff --git a/src/05-generics/36-button-group.problem.tsx b/src/05-generics/36-button-group.problem.tsx
new file mode 100644
index 0000000..59524e4
--- /dev/null
+++ b/src/05-generics/36-button-group.problem.tsx
@@ -0,0 +1,50 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface ButtonGroupProps<TButtons extends string[]> {
+  buttons: TButtons;
+  onClick: (value: TButtons[number]) => void;
+}
+
+/**
+ * Here, we've changed the type of the `buttons` prop to be an array of strings.
+ * But the inference has broken in the ButtonGroup component below!
+ *
+ * See if you can find a way to fix it. A 'const' annotation may help:
+ *
+ * https://www.totaltypescript.com/const-type-parameters
+ *
+ * OR you might be able to fix it by changing the type of the type argument.
+ */
+const ButtonGroup = <TButtons extends string[]>(
+  props: ButtonGroupProps<TButtons>,
+) => {
+  return (
+    <div>
+      {props.buttons.map((button) => {
+        return (
+          <button
+            key={button}
+            onClick={() => {
+              props.onClick(button);
+            }}
+          >
+            {button}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+<>
+  <ButtonGroup
+    onClick={(value) => {
+      /**
+       * Instead of inferring the type of `value` to be "add" | "delete", it's
+       * now inferred to be `string`.
+       */
+      type test = Expect<Equal<typeof value, "add" | "delete">>;
+    }}
+    buttons={["add", "delete"]}
+  ></ButtonGroup>
+</>;
diff --git a/src/05-generics/36-button-group.solution.1.tsx b/src/05-generics/36-button-group.solution.1.tsx
new file mode 100644
index 0000000..f049696
--- /dev/null
+++ b/src/05-generics/36-button-group.solution.1.tsx
@@ -0,0 +1,36 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface ButtonGroupProps<TButton extends string> {
+  buttons: TButton[];
+  onClick: (value: TButton) => void;
+}
+
+const ButtonGroup = <TButton extends string>(
+  props: ButtonGroupProps<TButton>,
+) => {
+  return (
+    <div>
+      {props.buttons.map((button) => {
+        return (
+          <button
+            key={button}
+            onClick={() => {
+              props.onClick(button);
+            }}
+          >
+            {button}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+<>
+  <ButtonGroup
+    onClick={(value) => {
+      type test = Expect<Equal<typeof value, "add" | "delete">>;
+    }}
+    buttons={["add", "delete"]}
+  ></ButtonGroup>
+</>;
diff --git a/src/05-generics/36-button-group.solution.2.tsx b/src/05-generics/36-button-group.solution.2.tsx
new file mode 100644
index 0000000..fe5c808
--- /dev/null
+++ b/src/05-generics/36-button-group.solution.2.tsx
@@ -0,0 +1,46 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface ButtonGroupProps<TButton extends readonly string[]> {
+  buttons: TButton;
+  onClick: (value: TButton[number]) => void;
+}
+
+/**
+ * This is an alternative solution, though it isn't quite as clean
+ * as the first solution. The main difference is that it uses the
+ * const annotation to infer the type of the buttons prop.
+ *
+ * This behaves the same, but requires more annotations:
+ *
+ * 'readonly' on each string[]
+ * TButton[number] instead of TButton on the onClick prop
+ */
+const ButtonGroup = <const TButton extends readonly string[]>(
+  props: ButtonGroupProps<TButton>,
+) => {
+  return (
+    <div>
+      {props.buttons.map((button) => {
+        return (
+          <button
+            key={button}
+            onClick={() => {
+              props.onClick(button);
+            }}
+          >
+            {button}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+<>
+  <ButtonGroup
+    onClick={(value) => {
+      type test = Expect<Equal<typeof value, "add" | "delete">>;
+    }}
+    buttons={["add", "delete"]}
+  ></ButtonGroup>
+</>;
diff --git a/src/05-advanced-hooks/37-generic-localstorage-hook.problem.ts b/src/05-generics/37-generic-localstorage-hook.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/37-generic-localstorage-hook.problem.ts
rename to src/05-generics/37-generic-localstorage-hook.problem.ts
diff --git a/src/05-advanced-hooks/37-generic-localstorage-hook.solution.ts b/src/05-generics/37-generic-localstorage-hook.solution.ts
similarity index 100%
rename from src/05-advanced-hooks/37-generic-localstorage-hook.solution.ts
rename to src/05-generics/37-generic-localstorage-hook.solution.ts
diff --git a/src/05-advanced-hooks/34-tuple-return-type.problem.ts b/src/06-advanced-hooks/39-tuple-return-type.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/34-tuple-return-type.problem.ts
rename to src/06-advanced-hooks/39-tuple-return-type.problem.ts
diff --git a/src/05-advanced-hooks/34-tuple-return-type.solution.1.ts b/src/06-advanced-hooks/39-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/05-advanced-hooks/34-tuple-return-type.solution.1.ts
rename to src/06-advanced-hooks/39-tuple-return-type.solution.1.ts
diff --git a/src/05-advanced-hooks/34-tuple-return-type.solution.2.ts b/src/06-advanced-hooks/39-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/05-advanced-hooks/34-tuple-return-type.solution.2.ts
rename to src/06-advanced-hooks/39-tuple-return-type.solution.2.ts
diff --git a/src/05-advanced-hooks/39-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/40-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/39-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/40-unions-in-usestate.problem.tsx
diff --git a/src/05-advanced-hooks/39-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/40-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/39-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/40-unions-in-usestate.solution.tsx
diff --git a/src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/41-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/41-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/05-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/41-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/41-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/05-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts b/src/06-advanced-hooks/42-discriminated-union-returns-from-custom-hooks.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts
rename to src/06-advanced-hooks/42-discriminated-union-returns-from-custom-hooks.problem.ts
diff --git a/src/05-advanced-hooks/36-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/43-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/05-advanced-hooks/36-function-overloads-in-hooks.problem.ts
rename to src/06-advanced-hooks/43-function-overloads-in-hooks.problem.ts
diff --git a/src/05-advanced-hooks/36-function-overloads-in-hooks.solution.1.ts b/src/06-advanced-hooks/43-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/05-advanced-hooks/36-function-overloads-in-hooks.solution.1.ts
rename to src/06-advanced-hooks/43-function-overloads-in-hooks.solution.1.ts
diff --git a/src/05-advanced-hooks/36-function-overloads-in-hooks.solution.2.ts b/src/06-advanced-hooks/43-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/05-advanced-hooks/36-function-overloads-in-hooks.solution.2.ts
rename to src/06-advanced-hooks/43-function-overloads-in-hooks.solution.2.ts
diff --git a/src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx b/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/45-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/45-understand-react-namespace-export.explainer.ts
diff --git a/src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/46-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/46-understanding-jsx-element.explainer.tsx
diff --git a/src/06-types-deep-dive/45-strongly-typing-children.problem.tsx b/src/07-types-deep-dive/47-strongly-typing-children.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/45-strongly-typing-children.problem.tsx
rename to src/07-types-deep-dive/47-strongly-typing-children.problem.tsx
diff --git a/src/06-types-deep-dive/46-how-does-react-represent-html.explainer.ts b/src/07-types-deep-dive/48-how-does-react-represent-html.explainer.ts
similarity index 100%
rename from src/06-types-deep-dive/46-how-does-react-represent-html.explainer.ts
rename to src/07-types-deep-dive/48-how-does-react-represent-html.explainer.ts
diff --git a/src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts b/src/07-types-deep-dive/48-understanding-jsx-intrinsic-elements.explainer.ts
similarity index 100%
rename from src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts
rename to src/07-types-deep-dive/48-understanding-jsx-intrinsic-elements.explainer.ts
diff --git a/src/06-types-deep-dive/47-add-new-global-element.problem.tsx b/src/07-types-deep-dive/49-add-new-global-element.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/47-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/49-add-new-global-element.problem.tsx
diff --git a/src/06-types-deep-dive/47-add-new-global-element.solution.tsx b/src/07-types-deep-dive/49-add-new-global-element.solution.tsx
similarity index 100%
rename from src/06-types-deep-dive/47-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/49-add-new-global-element.solution.tsx
diff --git a/src/06-types-deep-dive/48-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/50-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/48-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/50-add-attribute-to-all-elements.problem.tsx
diff --git a/src/06-types-deep-dive/49-add-attribute-to-audio-elements.problem.tsx b/src/07-types-deep-dive/51-add-attribute-to-audio-elements.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/49-add-attribute-to-audio-elements.problem.tsx
rename to src/07-types-deep-dive/51-add-attribute-to-audio-elements.problem.tsx
diff --git a/src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx b/src/07-types-deep-dive/52-add-attribute-to-div-elements.problem.tsx
similarity index 100%
rename from src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx
rename to src/07-types-deep-dive/52-add-attribute-to-div-elements.problem.tsx
diff --git a/src/07-advanced-patterns/51-required-context.problem.tsx b/src/08-advanced-patterns/53-required-context.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/51-required-context.problem.tsx
rename to src/08-advanced-patterns/53-required-context.problem.tsx
diff --git a/src/07-advanced-patterns/51-required-context.solution.1.tsx b/src/08-advanced-patterns/53-required-context.solution.1.tsx
similarity index 100%
rename from src/07-advanced-patterns/51-required-context.solution.1.tsx
rename to src/08-advanced-patterns/53-required-context.solution.1.tsx
diff --git a/src/07-advanced-patterns/51-required-context.solution.2.tsx b/src/08-advanced-patterns/53-required-context.solution.2.tsx
similarity index 100%
rename from src/07-advanced-patterns/51-required-context.solution.2.tsx
rename to src/08-advanced-patterns/53-required-context.solution.2.tsx
diff --git a/src/07-advanced-patterns/52-compound-components.problem.tsx b/src/08-advanced-patterns/54-compound-components.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/52-compound-components.problem.tsx
rename to src/08-advanced-patterns/54-compound-components.problem.tsx
diff --git a/src/07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx
rename to src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx b/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx
rename to src/08-advanced-patterns/55-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/07-advanced-patterns/54-hoc-problem.tsx b/src/08-advanced-patterns/56-hoc-problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/54-hoc-problem.tsx
rename to src/08-advanced-patterns/56-hoc-problem.tsx
diff --git a/src/07-advanced-patterns/55-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/57-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/55-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/57-record-of-components-with-same-props.problem.tsx
diff --git a/src/07-advanced-patterns/55-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/07-advanced-patterns/55-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/07-advanced-patterns/55-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/07-advanced-patterns/55-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/07-advanced-patterns/56-as-prop.problem.tsx b/src/08-advanced-patterns/58-as-prop.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/56-as-prop.problem.tsx
rename to src/08-advanced-patterns/58-as-prop.problem.tsx
diff --git a/src/07-advanced-patterns/56-as-prop.solution.1.tsx b/src/08-advanced-patterns/58-as-prop.solution.1.tsx
similarity index 100%
rename from src/07-advanced-patterns/56-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/58-as-prop.solution.1.tsx
diff --git a/src/07-advanced-patterns/56-as-prop.solution.2.tsx b/src/08-advanced-patterns/58-as-prop.solution.2.tsx
similarity index 100%
rename from src/07-advanced-patterns/56-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/58-as-prop.solution.2.tsx
diff --git a/src/07-advanced-patterns/57-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/57-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx
diff --git a/src/07-advanced-patterns/57-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/07-advanced-patterns/57-as-prop-with-custom-components.solution.tsx
rename to src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx
diff --git a/src/07-advanced-patterns/58-render-props.problem.tsx b/src/08-advanced-patterns/60-render-props.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/58-render-props.problem.tsx
rename to src/08-advanced-patterns/60-render-props.problem.tsx
diff --git a/src/07-advanced-patterns/59-render-props-with-generics.problem.tsx b/src/08-advanced-patterns/61-render-props-with-generics.problem.tsx
similarity index 100%
rename from src/07-advanced-patterns/59-render-props-with-generics.problem.tsx
rename to src/08-advanced-patterns/61-render-props-with-generics.problem.tsx
diff --git a/src/08-external-libraries/readme.md b/src/08-external-libraries/readme.md
deleted file mode 100644
index 48cb68a..0000000
--- a/src/08-external-libraries/readme.md
+++ /dev/null
@@ -1 +0,0 @@
-Talk about common external libraries and how they work
diff --git a/src/08-external-libraries/60-react-hook-form.explainer.tsx b/src/09-external-libraries/62-react-hook-form.explainer.tsx
similarity index 100%
rename from src/08-external-libraries/60-react-hook-form.explainer.tsx
rename to src/09-external-libraries/62-react-hook-form.explainer.tsx
diff --git a/src/08-external-libraries/61-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/63-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/08-external-libraries/61-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/63-react-hook-form-wrapper.problem.tsx
diff --git a/src/08-external-libraries/61-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/63-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/08-external-libraries/61-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/63-react-hook-form-wrapper.solution.tsx
diff --git a/src/08-external-libraries/62-react-select.problem.tsx b/src/09-external-libraries/64-react-select.problem.tsx
similarity index 100%
rename from src/08-external-libraries/62-react-select.problem.tsx
rename to src/09-external-libraries/64-react-select.problem.tsx
diff --git a/src/08-external-libraries/62-react-select.solution.tsx b/src/09-external-libraries/64-react-select.solution.tsx
similarity index 100%
rename from src/08-external-libraries/62-react-select.solution.tsx
rename to src/09-external-libraries/64-react-select.solution.tsx
diff --git a/src/08-external-libraries/63-react-query.explainer.ts b/src/09-external-libraries/65-react-query.explainer.ts
similarity index 100%
rename from src/08-external-libraries/63-react-query.explainer.ts
rename to src/09-external-libraries/65-react-query.explainer.ts
diff --git a/src/08-external-libraries/64-react-query-wrapper.problem.ts b/src/09-external-libraries/66-react-query-wrapper.problem.ts
similarity index 100%
rename from src/08-external-libraries/64-react-query-wrapper.problem.ts
rename to src/09-external-libraries/66-react-query-wrapper.problem.ts
diff --git a/src/08-external-libraries/64-react-query-wrapper.solution.ts b/src/09-external-libraries/66-react-query-wrapper.solution.ts
similarity index 100%
rename from src/08-external-libraries/64-react-query-wrapper.solution.ts
rename to src/09-external-libraries/66-react-query-wrapper.solution.ts
diff --git a/src/08-external-libraries/65-reusable-form-library-with-zod.problem.tsx b/src/09-external-libraries/67-reusable-form-library-with-zod.problem.tsx
similarity index 100%
rename from src/08-external-libraries/65-reusable-form-library-with-zod.problem.tsx
rename to src/09-external-libraries/67-reusable-form-library-with-zod.problem.tsx
diff --git a/src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.problem.tsx b/src/09-external-libraries/68-generic-localstorage-hook-with-zod.problem.tsx
similarity index 100%
rename from src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.problem.tsx
rename to src/09-external-libraries/68-generic-localstorage-hook-with-zod.problem.tsx
diff --git a/src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.solution.tsx b/src/09-external-libraries/68-generic-localstorage-hook-with-zod.solution.tsx
similarity index 79%
rename from src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.solution.tsx
rename to src/09-external-libraries/68-generic-localstorage-hook-with-zod.solution.tsx
index fcb8410..05fc126 100644
--- a/src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.solution.tsx
+++ b/src/09-external-libraries/68-generic-localstorage-hook-with-zod.solution.tsx
@@ -2,15 +2,18 @@ import { it } from "vitest";
 import { Equal, Expect } from "../helpers/type-utils";
 import { z } from "zod";
 
-export const useLocalStorage = <T,>(prefix: string, schema: z.Schema<T>) => {
+export const useLocalStorage = <TSchema extends z.Schema>(
+  prefix: string,
+  schema: TSchema,
+) => {
   const schemaOrNull = schema.nullable();
   return {
-    get: (key: string): T | null => {
+    get: (key: string): z.infer<TSchema> | null => {
       return schemaOrNull.parse(
         JSON.parse(window.localStorage.getItem(prefix + key) || "null"),
       );
     },
-    set: (key: string, value: T) => {
+    set: (key: string, value: z.infer<TSchema>) => {
       window.localStorage.setItem(prefix + key, JSON.stringify(value));
     },
   };

From c9dc93f668ecc7633fae82945c2420b8e061c787 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 7 Jun 2023 15:54:25 +0100
Subject: [PATCH 019/165] Lots and lots of updates

---
 .../22-discriminated-union-props.problem.tsx  | 10 ++++
 ...ructuring-discriminated-unions.problem.tsx | 10 +++-
 ...turing-discriminated-unions.solution.1.tsx |  7 +--
 ...turing-discriminated-unions.solution.2.tsx |  9 ++--
 ...minated-union-with-other-props.problem.tsx |  4 ++
 ...inated-union-with-other-props.solution.tsx |  8 +--
 ...either-all-these-props-or-none.problem.tsx | 18 +++++++
 ...her-all-these-props-or-none.solution.2.tsx |  4 ++
 ...her-all-these-props-or-none.solution.3.tsx |  4 ++
 .../26-partial-autocomplete.problem.tsx       | 28 -----------
 ...roblem.tsx => 26-toggle-props.problem.tsx} | 13 +++++
 ...ution.tsx => 26-toggle-props.solution.tsx} |  8 +++
 .../27-partial-autocomplete.problem.tsx       | 50 +++++++++++++++++++
 ...=> 27-partial-autocomplete.solution.1.tsx} |  9 ++++
 ...=> 27-partial-autocomplete.solution.2.tsx} |  3 ++
 ...onents-vs-passing-react-nodes.problem.tsx} |  7 +++
 ...nts-vs-passing-react-nodes.solution.1.tsx} |  8 +++
 ...nts-vs-passing-react-nodes.solution.2.tsx} |  5 +-
 .../29-variants-with-classnames.problem.tsx   |  6 ++-
 .../29-variants-with-classnames.solution.tsx  |  7 +++
 .../30-prop-groups-with-variants.problem.tsx  | 19 +++++++
 ...0-prop-groups-with-variants.solution.1.tsx | 10 ++++
 ...0-prop-groups-with-variants.solution.2.tsx |  7 +++
 ...lem.ts => 38-tuple-return-type.problem.ts} |  0
 ....ts => 38-tuple-return-type.solution.1.ts} |  0
 ....ts => 38-tuple-return-type.solution.2.ts} |  0
 ....tsx => 39-unions-in-usestate.problem.tsx} |  0
 ...tsx => 39-unions-in-usestate.solution.tsx} |  0
 ...criminated-unions-in-usestate.problem.tsx} |  0
 ...riminated-unions-in-usestate.solution.tsx} |  0
 ...nion-returns-from-custom-hooks.problem.ts} |  0
 ...42-function-overloads-in-hooks.problem.ts} |  0
 ...function-overloads-in-hooks.solution.1.ts} |  0
 ...function-overloads-in-hooks.solution.2.ts} |  0
 ...ated-tuples-from-custom-hooks.problem.tsx} |  0
 ...ted-tuples-from-custom-hooks.solution.tsx} |  0
 ...stand-react-namespace-export.explainer.ts} |  0
 ...5-understanding-jsx-element.explainer.tsx} |  0
 ...> 46-strongly-typing-children.problem.tsx} |  0
 ...ow-does-react-represent-html.explainer.ts} |  0
 ...nding-jsx-intrinsic-elements.explainer.ts} |  0
 ... => 48-add-new-global-element.problem.tsx} |  0
 ...=> 48-add-new-global-element.solution.tsx} |  0
 ...add-attribute-to-all-elements.problem.tsx} |  0
 ...d-attribute-to-audio-elements.problem.tsx} |  0
 ...add-attribute-to-div-elements.problem.tsx} |  0
 ...em.tsx => 52-required-context.problem.tsx} |  0
 ...tsx => 52-required-context.solution.1.tsx} |  0
 ...tsx => 52-required-context.solution.2.tsx} |  0
 ...tsx => 53-compound-components.problem.tsx} |  0
 ...forward-ref-with-generics.explainer.1.tsx} |  0
 ...forward-ref-with-generics.explainer.2.tsx} |  0
 ...{56-hoc-problem.tsx => 55-hoc-problem.tsx} |  0
 ...of-components-with-same-props.problem.tsx} |  0
 ...components-with-same-props.solution.1.tsx} |  0
 ...components-with-same-props.solution.2.tsx} |  0
 ...rop.problem.tsx => 57-as-prop.problem.tsx} |  0
 ...lution.1.tsx => 57-as-prop.solution.1.tsx} |  0
 ...lution.2.tsx => 57-as-prop.solution.2.tsx} |  0
 ...s-prop-with-custom-components.problem.tsx} |  0
 ...-prop-with-custom-components.solution.tsx} |  0
 ...roblem.tsx => 59-render-props.problem.tsx} |  0
 ...60-render-props-with-generics.problem.tsx} |  0
 ...r.tsx => 61-react-hook-form.explainer.tsx} |  0
 ...=> 62-react-hook-form-wrapper.problem.tsx} |  0
 ...> 62-react-hook-form-wrapper.solution.tsx} |  0
 ...roblem.tsx => 63-react-select.problem.tsx} |  0
 ...ution.tsx => 63-react-select.solution.tsx} |  0
 ...plainer.ts => 64-react-query.explainer.ts} |  0
 ...m.ts => 65-react-query-wrapper.problem.ts} |  0
 ....ts => 65-react-query-wrapper.solution.ts} |  0
 ...eusable-form-library-with-zod.problem.tsx} |  0
 ...ic-localstorage-hook-with-zod.problem.tsx} |  0
 ...c-localstorage-hook-with-zod.solution.tsx} |  0
 74 files changed, 211 insertions(+), 43 deletions(-)
 delete mode 100644 src/04-advanced-props/26-partial-autocomplete.problem.tsx
 rename src/04-advanced-props/{28-toggle-props.problem.tsx => 26-toggle-props.problem.tsx} (64%)
 rename src/04-advanced-props/{28-toggle-props.solution.tsx => 26-toggle-props.solution.tsx} (71%)
 create mode 100644 src/04-advanced-props/27-partial-autocomplete.problem.tsx
 rename src/04-advanced-props/{26-partial-autocomplete.solution.1.tsx => 27-partial-autocomplete.solution.1.tsx} (62%)
 rename src/04-advanced-props/{26-partial-autocomplete.solution.2.tsx => 27-partial-autocomplete.solution.2.tsx} (89%)
 rename src/04-advanced-props/{27-passing-react-components-vs-passing-react-nodes.problem.tsx => 28-passing-react-components-vs-passing-react-nodes.problem.tsx} (73%)
 rename src/04-advanced-props/{27-passing-react-components-vs-passing-react-nodes.solution.2.tsx => 28-passing-react-components-vs-passing-react-nodes.solution.1.tsx} (78%)
 rename src/04-advanced-props/{27-passing-react-components-vs-passing-react-nodes.solution.1.tsx => 28-passing-react-components-vs-passing-react-nodes.solution.2.tsx} (87%)
 rename src/06-advanced-hooks/{39-tuple-return-type.problem.ts => 38-tuple-return-type.problem.ts} (100%)
 rename src/06-advanced-hooks/{39-tuple-return-type.solution.1.ts => 38-tuple-return-type.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{39-tuple-return-type.solution.2.ts => 38-tuple-return-type.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{40-unions-in-usestate.problem.tsx => 39-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{40-unions-in-usestate.solution.tsx => 39-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{41-discriminated-unions-in-usestate.problem.tsx => 40-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{41-discriminated-unions-in-usestate.solution.tsx => 40-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{42-discriminated-union-returns-from-custom-hooks.problem.ts => 41-discriminated-union-returns-from-custom-hooks.problem.ts} (100%)
 rename src/06-advanced-hooks/{43-function-overloads-in-hooks.problem.ts => 42-function-overloads-in-hooks.problem.ts} (100%)
 rename src/06-advanced-hooks/{43-function-overloads-in-hooks.solution.1.ts => 42-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{43-function-overloads-in-hooks.solution.2.ts => 42-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{44-discriminated-tuples-from-custom-hooks.problem.tsx => 43-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/06-advanced-hooks/{44-discriminated-tuples-from-custom-hooks.solution.tsx => 43-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/07-types-deep-dive/{45-understand-react-namespace-export.explainer.ts => 44-understand-react-namespace-export.explainer.ts} (100%)
 rename src/07-types-deep-dive/{46-understanding-jsx-element.explainer.tsx => 45-understanding-jsx-element.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{47-strongly-typing-children.problem.tsx => 46-strongly-typing-children.problem.tsx} (100%)
 rename src/07-types-deep-dive/{48-how-does-react-represent-html.explainer.ts => 47-how-does-react-represent-html.explainer.ts} (100%)
 rename src/07-types-deep-dive/{48-understanding-jsx-intrinsic-elements.explainer.ts => 47-understanding-jsx-intrinsic-elements.explainer.ts} (100%)
 rename src/07-types-deep-dive/{49-add-new-global-element.problem.tsx => 48-add-new-global-element.problem.tsx} (100%)
 rename src/07-types-deep-dive/{49-add-new-global-element.solution.tsx => 48-add-new-global-element.solution.tsx} (100%)
 rename src/07-types-deep-dive/{50-add-attribute-to-all-elements.problem.tsx => 49-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{51-add-attribute-to-audio-elements.problem.tsx => 50-add-attribute-to-audio-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{52-add-attribute-to-div-elements.problem.tsx => 51-add-attribute-to-div-elements.problem.tsx} (100%)
 rename src/08-advanced-patterns/{53-required-context.problem.tsx => 52-required-context.problem.tsx} (100%)
 rename src/08-advanced-patterns/{53-required-context.solution.1.tsx => 52-required-context.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{53-required-context.solution.2.tsx => 52-required-context.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{54-compound-components.problem.tsx => 53-compound-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{55-forward-ref-with-generics.explainer.1.tsx => 54-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/08-advanced-patterns/{55-forward-ref-with-generics.explainer.2.tsx => 54-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/08-advanced-patterns/{56-hoc-problem.tsx => 55-hoc-problem.tsx} (100%)
 rename src/08-advanced-patterns/{57-record-of-components-with-same-props.problem.tsx => 56-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{57-record-of-components-with-same-props.solution.1.tsx => 56-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{57-record-of-components-with-same-props.solution.2.tsx => 56-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{58-as-prop.problem.tsx => 57-as-prop.problem.tsx} (100%)
 rename src/08-advanced-patterns/{58-as-prop.solution.1.tsx => 57-as-prop.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{58-as-prop.solution.2.tsx => 57-as-prop.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{59-as-prop-with-custom-components.problem.tsx => 58-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{59-as-prop-with-custom-components.solution.tsx => 58-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/08-advanced-patterns/{60-render-props.problem.tsx => 59-render-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{61-render-props-with-generics.problem.tsx => 60-render-props-with-generics.problem.tsx} (100%)
 rename src/09-external-libraries/{62-react-hook-form.explainer.tsx => 61-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{63-react-hook-form-wrapper.problem.tsx => 62-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{63-react-hook-form-wrapper.solution.tsx => 62-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{64-react-select.problem.tsx => 63-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{64-react-select.solution.tsx => 63-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{65-react-query.explainer.ts => 64-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{66-react-query-wrapper.problem.ts => 65-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{66-react-query-wrapper.solution.ts => 65-react-query-wrapper.solution.ts} (100%)
 rename src/09-external-libraries/{67-reusable-form-library-with-zod.problem.tsx => 66-reusable-form-library-with-zod.problem.tsx} (100%)
 rename src/09-external-libraries/{68-generic-localstorage-hook-with-zod.problem.tsx => 67-generic-localstorage-hook-with-zod.problem.tsx} (100%)
 rename src/09-external-libraries/{68-generic-localstorage-hook-with-zod.solution.tsx => 67-generic-localstorage-hook-with-zod.solution.tsx} (100%)

diff --git a/src/04-advanced-props/22-discriminated-union-props.problem.tsx b/src/04-advanced-props/22-discriminated-union-props.problem.tsx
index 92ef26f..6116410 100644
--- a/src/04-advanced-props/22-discriminated-union-props.problem.tsx
+++ b/src/04-advanced-props/22-discriminated-union-props.problem.tsx
@@ -1,3 +1,13 @@
+/**
+ * 1. Currently, ModalProps lets you pass in various impossible combinations of props.
+ *
+ * For instance, you can pass in a `variant` of "title" without passing in a title,
+ * or you can pass in a `variant` of "no-title" WITH a title.
+ *
+ * Try to find a way to express ModalProps so that it's impossible to pass in
+ * impossible combinations of props.
+ */
+
 type ModalProps = {
   variant: "no-title" | "title";
   title?: string;
diff --git a/src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx b/src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx
index c8ea0f8..5a2c1c0 100644
--- a/src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx
+++ b/src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx
@@ -1,5 +1,11 @@
-// How to use discriminated unions in props
-// With variant
+/**
+ * We've got the same problem as the previous exercise, but this time we're
+ * destructuring our props.
+ *
+ * 1. Figure out why the error on 'title' is happening.
+ *
+ * 2. Find a way to fix the error.
+ */
 
 type ModalProps =
   | {
diff --git a/src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx b/src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx
index 18beba5..40824ab 100644
--- a/src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx
+++ b/src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx
@@ -1,6 +1,3 @@
-// How to use discriminated unions in props
-// With variant
-
 type ModalProps =
   | {
       variant: "no-title";
@@ -10,6 +7,10 @@ type ModalProps =
       title: string;
     };
 
+/**
+ * Sadly, this doesn't work - TypeScript can't figure out from narrowing
+ * the destructured variant that the title is now available.
+ */
 export const Modal = ({ variant, ...props }: ModalProps) => {
   if (variant === "no-title") {
     return <div>No title</div>;
diff --git a/src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx b/src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx
index 36f9f9b..d9a6866 100644
--- a/src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx
+++ b/src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx
@@ -1,6 +1,3 @@
-// How to use discriminated unions in props
-// With variant
-
 type ModalProps =
   | {
       variant: "no-title";
@@ -10,6 +7,12 @@ type ModalProps =
       title: string;
     };
 
+/**
+ * The best solution is to destructure AFTER the variant has been narrowed.
+ *
+ * This gives TypeScript the chance to apply the narrowing to the 'props' object,
+ * which it understands that 'variant' is a property of.
+ */
 export const Modal = (props: ModalProps) => {
   if (props.variant === "no-title") {
     return <div>No title</div>;
diff --git a/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx b/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
index d40cdbe..7b30253 100644
--- a/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
+++ b/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
@@ -7,6 +7,10 @@ type ModalProps =
       title: string;
     };
 
+/**
+ * 1. How do we add a `buttonColor` prop to the `ModalProps` type that is
+ * _always_ required across different variants?
+ */
 export const Modal = (props: ModalProps) => {
   if (props.variant === "no-title") {
     return <div>No title</div>;
diff --git a/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx b/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
index e73e067..dbc04c4 100644
--- a/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
+++ b/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
@@ -1,6 +1,8 @@
-// How to use discriminated unions in props
-// With variant
-
+/**
+ * This works because of the parentheses around the discriminated union.
+ *
+ * 1. Try removing the parentheses, and try to explain the behaviour you notice.
+ */
 type ModalProps = (
   | {
       variant: "no-title";
diff --git a/src/04-advanced-props/25-either-all-these-props-or-none.problem.tsx b/src/04-advanced-props/25-either-all-these-props-or-none.problem.tsx
index b652c53..0ea3fd5 100644
--- a/src/04-advanced-props/25-either-all-these-props-or-none.problem.tsx
+++ b/src/04-advanced-props/25-either-all-these-props-or-none.problem.tsx
@@ -1,5 +1,23 @@
 import { ChangeEventHandler } from "react";
 
+/**
+ * In this exercise, we want to create a component that can either have
+ * `value` and `onChange` props, or neither of those props.
+ *
+ * We ALSO want to have label as a required prop.
+ *
+ * 1. Figure out why the errors are occurring on the `Test` component.
+ *
+ * 2. Find a way to fix the errors.
+ *
+ * 3. As a bonus, try to make a reusable type helper called AllOrNothing<TProps>
+ * which can be used like this:
+ *
+ * AllOrNothing<{
+ *   value: string;
+ *   onChange: ChangeEventHandler;
+ * }>
+ */
 type InputProps = (
   | {
       value: string;
diff --git a/src/04-advanced-props/25-either-all-these-props-or-none.solution.2.tsx b/src/04-advanced-props/25-either-all-these-props-or-none.solution.2.tsx
index 5029f7d..b9f1923 100644
--- a/src/04-advanced-props/25-either-all-these-props-or-none.solution.2.tsx
+++ b/src/04-advanced-props/25-either-all-these-props-or-none.solution.2.tsx
@@ -1,5 +1,9 @@
 import { ChangeEventHandler } from "react";
 
+/**
+ * 1. Consider whether you think 'undefined' or 'never'
+ * is better for the 'value' and 'onChange' props.
+ */
 type InputProps = (
   | {
       value: string;
diff --git a/src/04-advanced-props/25-either-all-these-props-or-none.solution.3.tsx b/src/04-advanced-props/25-either-all-these-props-or-none.solution.3.tsx
index 16ace57..a0bfc95 100644
--- a/src/04-advanced-props/25-either-all-these-props-or-none.solution.3.tsx
+++ b/src/04-advanced-props/25-either-all-these-props-or-none.solution.3.tsx
@@ -7,6 +7,10 @@ type InputProps = AllOrNothing<{
   label: string;
 };
 
+/**
+ * This is what I'd do in a production app - capture this
+ * logic in a reusable type helper.
+ */
 type AllOrNothing<TProps extends Record<string, any>> =
   | TProps
   | {
diff --git a/src/04-advanced-props/26-partial-autocomplete.problem.tsx b/src/04-advanced-props/26-partial-autocomplete.problem.tsx
deleted file mode 100644
index 6248a9b..0000000
--- a/src/04-advanced-props/26-partial-autocomplete.problem.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-const presetSizes = {
-  xs: "0.5rem",
-  sm: "1rem",
-};
-
-type Size = keyof typeof presetSizes;
-
-type LooseSize = Size | string;
-
-export const Icon = (props: { size: LooseSize }) => {
-  return (
-    <div
-      style={{
-        width:
-          props.size in presetSizes
-            ? presetSizes[props.size as Size]
-            : props.size,
-      }}
-    />
-  );
-};
-
-<>
-  {/* Autocomplete for sm and xs are no longer working! */}
-  <Icon size="sm"></Icon>
-  <Icon size="xs"></Icon>
-  <Icon size="10px"></Icon>
-</>;
diff --git a/src/04-advanced-props/28-toggle-props.problem.tsx b/src/04-advanced-props/26-toggle-props.problem.tsx
similarity index 64%
rename from src/04-advanced-props/28-toggle-props.problem.tsx
rename to src/04-advanced-props/26-toggle-props.problem.tsx
index 908d17f..b3fe172 100644
--- a/src/04-advanced-props/28-toggle-props.problem.tsx
+++ b/src/04-advanced-props/26-toggle-props.problem.tsx
@@ -1,3 +1,16 @@
+/**
+ * In this exercise, we've got an EmbeddedPlayground component that can either
+ * use Stackblitz or CodeSandbox.
+ *
+ * We want to make sure that if useStackblitz is true, then stackblitzId is
+ * required. If useStackblitz is false (or not specified), then codeSandboxId
+ * is required.
+ *
+ * 1. Rewrite the EmbeddedPlaygroundProps type so that it enforces this.
+ *
+ * Hint - you'll need a discriminated union!
+ */
+
 type EmbeddedPlaygroundProps = {
   useStackblitz?: boolean;
   stackblitzId?: string;
diff --git a/src/04-advanced-props/28-toggle-props.solution.tsx b/src/04-advanced-props/26-toggle-props.solution.tsx
similarity index 71%
rename from src/04-advanced-props/28-toggle-props.solution.tsx
rename to src/04-advanced-props/26-toggle-props.solution.tsx
index 19e8b5a..44bcca9 100644
--- a/src/04-advanced-props/28-toggle-props.solution.tsx
+++ b/src/04-advanced-props/26-toggle-props.solution.tsx
@@ -1,3 +1,11 @@
+/**
+ * This is just another kind of discriminated union - one based on a
+ * boolean, not a string.
+ *
+ * Note that we use an optional property for the boolean in the
+ * CodeSandbox version, because if the user doesn't specify it (passes
+ * undefined), we want to default to it.
+ */
 type EmbeddedPlaygroundProps =
   | {
       useStackblitz: true;
diff --git a/src/04-advanced-props/27-partial-autocomplete.problem.tsx b/src/04-advanced-props/27-partial-autocomplete.problem.tsx
new file mode 100644
index 0000000..55b2232
--- /dev/null
+++ b/src/04-advanced-props/27-partial-autocomplete.problem.tsx
@@ -0,0 +1,50 @@
+const presetSizes = {
+  xs: "0.5rem",
+  sm: "1rem",
+};
+
+type Size = keyof typeof presetSizes;
+
+/**
+ * In this exercise, we're using presetSizes to
+ * provide a set of preset sizes for our Icon component.
+ *
+ * We want to allow users to pass in either a string, or
+ * a Size. But there's an issue (see below).
+ */
+
+type LooseSize = Size | string;
+
+export const Icon = (props: { size: LooseSize }) => {
+  return (
+    <div
+      style={{
+        width:
+          props.size in presetSizes
+            ? presetSizes[
+                /**
+                 * The 'as' is necessary here because TS can't seem to narrow
+                 * props.size to Size properly
+                 */
+                props.size as Size
+              ]
+            : props.size,
+      }}
+    />
+  );
+};
+
+<>
+  {/* Autocomplete for sm and xs are no longer working! */}
+  {/* We want to have autocomplete for the 'size' while still being */}
+  {/* able to pass any value. */}
+
+  {/* 1. Try to find a way to express the type LooseSize in a way that */}
+  {/* gives autocomplete for 'sm' and 'xs' while also letting the user */}
+  {/* pass any value. */}
+  <Icon size="sm"></Icon>
+  <Icon size="xs"></Icon>
+  <Icon size="10px"></Icon>
+</>;
+
+// This is a tough one! If you get stuck, jump right to the solution.
diff --git a/src/04-advanced-props/26-partial-autocomplete.solution.1.tsx b/src/04-advanced-props/27-partial-autocomplete.solution.1.tsx
similarity index 62%
rename from src/04-advanced-props/26-partial-autocomplete.solution.1.tsx
rename to src/04-advanced-props/27-partial-autocomplete.solution.1.tsx
index 01751e1..3ccb1ac 100644
--- a/src/04-advanced-props/26-partial-autocomplete.solution.1.tsx
+++ b/src/04-advanced-props/27-partial-autocomplete.solution.1.tsx
@@ -5,6 +5,15 @@ const presetSizes = {
 
 type Size = keyof typeof presetSizes;
 
+/**
+ * Oddly, this works. Forcing string to intersect with {} does SOMETHING
+ * which makes TypeScript do what we want.
+ *
+ * 1. Doing (string & unknown) also works. Try it out!
+ *
+ * Honestly, I'm not sure why this works. Some compiler-diving is required
+ * to figure it out.
+ */
 type LooseSize = Size | (string & {});
 
 export const Icon = (props: { size: LooseSize }) => {
diff --git a/src/04-advanced-props/26-partial-autocomplete.solution.2.tsx b/src/04-advanced-props/27-partial-autocomplete.solution.2.tsx
similarity index 89%
rename from src/04-advanced-props/26-partial-autocomplete.solution.2.tsx
rename to src/04-advanced-props/27-partial-autocomplete.solution.2.tsx
index 9d15d7d..db5b63e 100644
--- a/src/04-advanced-props/26-partial-autocomplete.solution.2.tsx
+++ b/src/04-advanced-props/27-partial-autocomplete.solution.2.tsx
@@ -5,6 +5,9 @@ const presetSizes = {
 
 type Size = keyof typeof presetSizes;
 
+/**
+ * Here, we've refactored it into a type helper.
+ */
 type LooseAutocomplete<T> = T | (string & {});
 
 type LooseSize = LooseAutocomplete<Size>;
diff --git a/src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.problem.tsx b/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx
similarity index 73%
rename from src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.problem.tsx
rename to src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx
index e88422a..862a470 100644
--- a/src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.problem.tsx
+++ b/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx
@@ -1,5 +1,12 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * 1. We've got a bunch of different errors below. See if you can figure
+ * out why the errors are happening.
+ *
+ * 2. Once you understand why the errors are happening, see if you can
+ * find a way to fix them by changing the definition of TableProps.
+ */
 interface TableProps {
   renderRow: React.ReactNode;
 }
diff --git a/src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx b/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx
similarity index 78%
rename from src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx
rename to src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx
index d83fb6e..ec06f80 100644
--- a/src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.solution.2.tsx
+++ b/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx
@@ -1,5 +1,13 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * The errors are happening because the dev didn't understand what
+ * React.ReactNode was for.
+ *
+ * By changing it to a function which returns a React.ReactNode,
+ * we can fix the errors.
+ */
+
 interface TableProps {
   renderRow: (rowIndex: number) => React.ReactNode;
 }
diff --git a/src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx b/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx
similarity index 87%
rename from src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx
rename to src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx
index 2334c16..e2c2e39 100644
--- a/src/04-advanced-props/27-passing-react-components-vs-passing-react-nodes.solution.1.tsx
+++ b/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx
@@ -1,5 +1,8 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * We can also use React.FC in this position to fix the errors.
+ */
 interface TableProps {
   renderRow: React.FC<number>;
 }
@@ -27,8 +30,6 @@ export const Parent = () => {
         renderRow={<div></div>}
       />
       <Table
-        // React.FC doesn't quite work here, because you
-        // can't return numbers from an FC
         renderRow={(index) => {
           return index;
         }}
diff --git a/src/04-advanced-props/29-variants-with-classnames.problem.tsx b/src/04-advanced-props/29-variants-with-classnames.problem.tsx
index ad71401..9d79660 100644
--- a/src/04-advanced-props/29-variants-with-classnames.problem.tsx
+++ b/src/04-advanced-props/29-variants-with-classnames.problem.tsx
@@ -9,8 +9,10 @@ type ButtonProps = {
    * This isn't ideal - we have to manually sync
    * the type of variant with the object above.
    *
-   * How do we type this so that there's a single
-   * source of truth for the variant?
+   * 1. How do we rearrange this code so that we don't
+   * have to manually sync the types?
+   *
+   * Hint: you'll need 'typeof' and 'keyof'.
    */
   variant: "primary" | "secondary" | "success";
 };
diff --git a/src/04-advanced-props/29-variants-with-classnames.solution.tsx b/src/04-advanced-props/29-variants-with-classnames.solution.tsx
index da035b3..736a5f1 100644
--- a/src/04-advanced-props/29-variants-with-classnames.solution.tsx
+++ b/src/04-advanced-props/29-variants-with-classnames.solution.tsx
@@ -4,6 +4,13 @@ const classNamesMap = {
   success: "bg-green-500 text-white",
 };
 
+/**
+ * By using 'typeof' and 'keyof', we can _derive_ the type of
+ * variant from the classNamesMap object.
+ *
+ * 1. Try adding a new key to classNamesMap, and see how the
+ * type of variant automatically updates.
+ */
 type ButtonProps = {
   variant: keyof typeof classNamesMap;
 };
diff --git a/src/04-advanced-props/30-prop-groups-with-variants.problem.tsx b/src/04-advanced-props/30-prop-groups-with-variants.problem.tsx
index ea7573d..f0ab221 100644
--- a/src/04-advanced-props/30-prop-groups-with-variants.problem.tsx
+++ b/src/04-advanced-props/30-prop-groups-with-variants.problem.tsx
@@ -19,6 +19,25 @@ type ButtonProps = {
   variant: keyof typeof buttonPropsMap;
 };
 
+/**
+ * 1. There's a loooong error message here. Try to decode what the error message
+ * is referring to.
+ *
+ * 2. You might also notice that inside buttonPropsMap above, we're not getting
+ * autocomplete for the props that are available on a button. Why is that?
+ *
+ * 3. Try to find a type for buttonPropsMap that makes the error go away, and
+ * keeps the tests working at the bottom of the file.
+ *
+ * We want to:
+ *
+ * - Make sure that 'variant' isn't manually typed
+ * - Make the error go away
+ * - Get autocomplete for buttonPropsMap
+ *
+ * Hint - you might be 'unsatisfied' if you don't find the right solution.
+ */
+
 export const Button = (props: ButtonProps) => {
   return <button {...buttonPropsMap[props.variant]}>Click me</button>;
 };
diff --git a/src/04-advanced-props/30-prop-groups-with-variants.solution.1.tsx b/src/04-advanced-props/30-prop-groups-with-variants.solution.1.tsx
index c9389dc..d4bd269 100644
--- a/src/04-advanced-props/30-prop-groups-with-variants.solution.1.tsx
+++ b/src/04-advanced-props/30-prop-groups-with-variants.solution.1.tsx
@@ -1,5 +1,15 @@
 import { ComponentProps } from "react";
 
+/**
+ * Sadly, this doesn't work. By typing the map with a ':', we DO
+ * get autocomplete inside buttonPropsMap. BUT we also lose the
+ * type safety on the variant in ButtonProps.
+ *
+ * ButtonProps['variant'] is now typed as string, not
+ * 'reset' | 'submit' | 'next'.
+ *
+ * If only there was a way to get the best of both worlds...
+ */
 const buttonPropsMap: Record<string, ComponentProps<"button">> = {
   reset: {
     className: "bg-blue-500 text-white",
diff --git a/src/04-advanced-props/30-prop-groups-with-variants.solution.2.tsx b/src/04-advanced-props/30-prop-groups-with-variants.solution.2.tsx
index bd57e13..404a181 100644
--- a/src/04-advanced-props/30-prop-groups-with-variants.solution.2.tsx
+++ b/src/04-advanced-props/30-prop-groups-with-variants.solution.2.tsx
@@ -1,5 +1,12 @@
 import { ComponentProps } from "react";
 
+/**
+ * satisfies gives us what we need. Now, we get autocomplete inside
+ * buttonPropsMap, and we get type safety on the variant in ButtonProps.
+ *
+ * That's because satisfies ensures buttonPropsMap is a Record, but doesn't
+ * override its type.
+ */
 const buttonPropsMap = {
   reset: {
     className: "bg-blue-500 text-white",
diff --git a/src/06-advanced-hooks/39-tuple-return-type.problem.ts b/src/06-advanced-hooks/38-tuple-return-type.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/39-tuple-return-type.problem.ts
rename to src/06-advanced-hooks/38-tuple-return-type.problem.ts
diff --git a/src/06-advanced-hooks/39-tuple-return-type.solution.1.ts b/src/06-advanced-hooks/38-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/39-tuple-return-type.solution.1.ts
rename to src/06-advanced-hooks/38-tuple-return-type.solution.1.ts
diff --git a/src/06-advanced-hooks/39-tuple-return-type.solution.2.ts b/src/06-advanced-hooks/38-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/39-tuple-return-type.solution.2.ts
rename to src/06-advanced-hooks/38-tuple-return-type.solution.2.ts
diff --git a/src/06-advanced-hooks/40-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/39-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/40-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/39-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/40-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/39-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/40-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/39-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/41-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/41-discriminated-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/41-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/41-discriminated-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/42-discriminated-union-returns-from-custom-hooks.problem.ts b/src/06-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/42-discriminated-union-returns-from-custom-hooks.problem.ts
rename to src/06-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts
diff --git a/src/06-advanced-hooks/43-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/42-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/43-function-overloads-in-hooks.problem.ts
rename to src/06-advanced-hooks/42-function-overloads-in-hooks.problem.ts
diff --git a/src/06-advanced-hooks/43-function-overloads-in-hooks.solution.1.ts b/src/06-advanced-hooks/42-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/43-function-overloads-in-hooks.solution.1.ts
rename to src/06-advanced-hooks/42-function-overloads-in-hooks.solution.1.ts
diff --git a/src/06-advanced-hooks/43-function-overloads-in-hooks.solution.2.ts b/src/06-advanced-hooks/42-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/43-function-overloads-in-hooks.solution.2.ts
rename to src/06-advanced-hooks/42-function-overloads-in-hooks.solution.2.ts
diff --git a/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx b/src/06-advanced-hooks/43-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/06-advanced-hooks/43-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/43-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/06-advanced-hooks/43-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/07-types-deep-dive/45-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/44-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/45-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/44-understand-react-namespace-export.explainer.ts
diff --git a/src/07-types-deep-dive/46-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/45-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/46-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/45-understanding-jsx-element.explainer.tsx
diff --git a/src/07-types-deep-dive/47-strongly-typing-children.problem.tsx b/src/07-types-deep-dive/46-strongly-typing-children.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/47-strongly-typing-children.problem.tsx
rename to src/07-types-deep-dive/46-strongly-typing-children.problem.tsx
diff --git a/src/07-types-deep-dive/48-how-does-react-represent-html.explainer.ts b/src/07-types-deep-dive/47-how-does-react-represent-html.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/48-how-does-react-represent-html.explainer.ts
rename to src/07-types-deep-dive/47-how-does-react-represent-html.explainer.ts
diff --git a/src/07-types-deep-dive/48-understanding-jsx-intrinsic-elements.explainer.ts b/src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/48-understanding-jsx-intrinsic-elements.explainer.ts
rename to src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.ts
diff --git a/src/07-types-deep-dive/49-add-new-global-element.problem.tsx b/src/07-types-deep-dive/48-add-new-global-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/49-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/48-add-new-global-element.problem.tsx
diff --git a/src/07-types-deep-dive/49-add-new-global-element.solution.tsx b/src/07-types-deep-dive/48-add-new-global-element.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/49-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/48-add-new-global-element.solution.tsx
diff --git a/src/07-types-deep-dive/50-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/49-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/50-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/49-add-attribute-to-all-elements.problem.tsx
diff --git a/src/07-types-deep-dive/51-add-attribute-to-audio-elements.problem.tsx b/src/07-types-deep-dive/50-add-attribute-to-audio-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/51-add-attribute-to-audio-elements.problem.tsx
rename to src/07-types-deep-dive/50-add-attribute-to-audio-elements.problem.tsx
diff --git a/src/07-types-deep-dive/52-add-attribute-to-div-elements.problem.tsx b/src/07-types-deep-dive/51-add-attribute-to-div-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/52-add-attribute-to-div-elements.problem.tsx
rename to src/07-types-deep-dive/51-add-attribute-to-div-elements.problem.tsx
diff --git a/src/08-advanced-patterns/53-required-context.problem.tsx b/src/08-advanced-patterns/52-required-context.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/53-required-context.problem.tsx
rename to src/08-advanced-patterns/52-required-context.problem.tsx
diff --git a/src/08-advanced-patterns/53-required-context.solution.1.tsx b/src/08-advanced-patterns/52-required-context.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/53-required-context.solution.1.tsx
rename to src/08-advanced-patterns/52-required-context.solution.1.tsx
diff --git a/src/08-advanced-patterns/53-required-context.solution.2.tsx b/src/08-advanced-patterns/52-required-context.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/53-required-context.solution.2.tsx
rename to src/08-advanced-patterns/52-required-context.solution.2.tsx
diff --git a/src/08-advanced-patterns/54-compound-components.problem.tsx b/src/08-advanced-patterns/53-compound-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/54-compound-components.problem.tsx
rename to src/08-advanced-patterns/53-compound-components.problem.tsx
diff --git a/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/54-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx
rename to src/08-advanced-patterns/54-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.2.tsx b/src/08-advanced-patterns/54-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/55-forward-ref-with-generics.explainer.2.tsx
rename to src/08-advanced-patterns/54-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/08-advanced-patterns/56-hoc-problem.tsx b/src/08-advanced-patterns/55-hoc-problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/56-hoc-problem.tsx
rename to src/08-advanced-patterns/55-hoc-problem.tsx
diff --git a/src/08-advanced-patterns/57-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/56-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/56-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/56-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/56-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/56-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/56-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/08-advanced-patterns/58-as-prop.problem.tsx b/src/08-advanced-patterns/57-as-prop.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/58-as-prop.problem.tsx
rename to src/08-advanced-patterns/57-as-prop.problem.tsx
diff --git a/src/08-advanced-patterns/58-as-prop.solution.1.tsx b/src/08-advanced-patterns/57-as-prop.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/58-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/57-as-prop.solution.1.tsx
diff --git a/src/08-advanced-patterns/58-as-prop.solution.2.tsx b/src/08-advanced-patterns/57-as-prop.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/58-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/57-as-prop.solution.2.tsx
diff --git a/src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/58-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/58-as-prop-with-custom-components.problem.tsx
diff --git a/src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/58-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx
rename to src/08-advanced-patterns/58-as-prop-with-custom-components.solution.tsx
diff --git a/src/08-advanced-patterns/60-render-props.problem.tsx b/src/08-advanced-patterns/59-render-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/60-render-props.problem.tsx
rename to src/08-advanced-patterns/59-render-props.problem.tsx
diff --git a/src/08-advanced-patterns/61-render-props-with-generics.problem.tsx b/src/08-advanced-patterns/60-render-props-with-generics.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/61-render-props-with-generics.problem.tsx
rename to src/08-advanced-patterns/60-render-props-with-generics.problem.tsx
diff --git a/src/09-external-libraries/62-react-hook-form.explainer.tsx b/src/09-external-libraries/61-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/62-react-hook-form.explainer.tsx
rename to src/09-external-libraries/61-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/63-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/62-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/63-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/62-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/63-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/62-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/63-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/62-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/64-react-select.problem.tsx b/src/09-external-libraries/63-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/64-react-select.problem.tsx
rename to src/09-external-libraries/63-react-select.problem.tsx
diff --git a/src/09-external-libraries/64-react-select.solution.tsx b/src/09-external-libraries/63-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/64-react-select.solution.tsx
rename to src/09-external-libraries/63-react-select.solution.tsx
diff --git a/src/09-external-libraries/65-react-query.explainer.ts b/src/09-external-libraries/64-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/65-react-query.explainer.ts
rename to src/09-external-libraries/64-react-query.explainer.ts
diff --git a/src/09-external-libraries/66-react-query-wrapper.problem.ts b/src/09-external-libraries/65-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/66-react-query-wrapper.problem.ts
rename to src/09-external-libraries/65-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/66-react-query-wrapper.solution.ts b/src/09-external-libraries/65-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/66-react-query-wrapper.solution.ts
rename to src/09-external-libraries/65-react-query-wrapper.solution.ts
diff --git a/src/09-external-libraries/67-reusable-form-library-with-zod.problem.tsx b/src/09-external-libraries/66-reusable-form-library-with-zod.problem.tsx
similarity index 100%
rename from src/09-external-libraries/67-reusable-form-library-with-zod.problem.tsx
rename to src/09-external-libraries/66-reusable-form-library-with-zod.problem.tsx
diff --git a/src/09-external-libraries/68-generic-localstorage-hook-with-zod.problem.tsx b/src/09-external-libraries/67-generic-localstorage-hook-with-zod.problem.tsx
similarity index 100%
rename from src/09-external-libraries/68-generic-localstorage-hook-with-zod.problem.tsx
rename to src/09-external-libraries/67-generic-localstorage-hook-with-zod.problem.tsx
diff --git a/src/09-external-libraries/68-generic-localstorage-hook-with-zod.solution.tsx b/src/09-external-libraries/67-generic-localstorage-hook-with-zod.solution.tsx
similarity index 100%
rename from src/09-external-libraries/68-generic-localstorage-hook-with-zod.solution.tsx
rename to src/09-external-libraries/67-generic-localstorage-hook-with-zod.solution.tsx

From ca1a0bf2b40d877e972b5983c8c4210fd72d0c19 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 8 Jun 2023 10:17:56 +0100
Subject: [PATCH 020/165] Finished generics comments

---
 src/05-generics/31-generic-props.problem.tsx  | 23 +++-----
 src/05-generics/31-generic-props.solution.tsx | 22 +++-----
 src/05-generics/32-generic-hooks.problem.ts   |  7 +++
 .../32-generic-hooks.solution.1.ts            |  7 +++
 ...> 33-generic-localstorage-hook.problem.ts} | 13 +++++
 ... 33-generic-localstorage-hook.solution.ts} |  0
 src/05-generics/34-button-group.problem.tsx   | 55 +++++++++++++++++++
 ...ution.tsx => 34-button-group.solution.tsx} |  0
 src/05-generics/35-button-group.problem.tsx   | 44 ++++++++-------
 ...n.1.tsx => 35-button-group.solution.1.tsx} |  0
 ...n.2.tsx => 35-button-group.solution.2.tsx} |  0
 src/05-generics/36-button-group.problem.tsx   | 50 -----------------
 ...tsx => 36-lazy-load-component.problem.tsx} |  8 ++-
 ...sx => 36-lazy-load-component.solution.tsx} |  0
 ...erics-vs-discriminated-unions.problem.tsx} | 16 ++++++
 ...rics-vs-discriminated-unions.solution.tsx} |  7 +++
 16 files changed, 150 insertions(+), 102 deletions(-)
 rename src/05-generics/{37-generic-localstorage-hook.problem.ts => 33-generic-localstorage-hook.problem.ts} (67%)
 rename src/05-generics/{37-generic-localstorage-hook.solution.ts => 33-generic-localstorage-hook.solution.ts} (100%)
 create mode 100644 src/05-generics/34-button-group.problem.tsx
 rename src/05-generics/{35-button-group.solution.tsx => 34-button-group.solution.tsx} (100%)
 rename src/05-generics/{36-button-group.solution.1.tsx => 35-button-group.solution.1.tsx} (100%)
 rename src/05-generics/{36-button-group.solution.2.tsx => 35-button-group.solution.2.tsx} (100%)
 delete mode 100644 src/05-generics/36-button-group.problem.tsx
 rename src/05-generics/{33-lazy-load-component.problem.tsx => 36-lazy-load-component.problem.tsx} (85%)
 rename src/05-generics/{33-lazy-load-component.solution.tsx => 36-lazy-load-component.solution.tsx} (100%)
 rename src/05-generics/{34-generics-vs-discriminated-unions.problem.tsx => 37-generics-vs-discriminated-unions.problem.tsx} (65%)
 rename src/05-generics/{34-generics-vs-discriminated-unions.solution.tsx => 37-generics-vs-discriminated-unions.solution.tsx} (77%)

diff --git a/src/05-generics/31-generic-props.problem.tsx b/src/05-generics/31-generic-props.problem.tsx
index 48b3ccb..20a3633 100644
--- a/src/05-generics/31-generic-props.problem.tsx
+++ b/src/05-generics/31-generic-props.problem.tsx
@@ -1,11 +1,17 @@
 import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
 
 interface TableProps {
   rows: any[];
-  key: string;
   renderRow: (row: any) => ReactNode;
 }
 
+/**
+ * 1. Here, we have a table component. It takes an array of data and a function
+ * to render each row. The problem is that the type of the data is not
+ * generic. It's just `any`. We want to make it generic so that the type of
+ * the data is inferred from the `rows` prop.
+ */
 export const Table = (props: TableProps) => {
   return (
     <table>
@@ -28,22 +34,11 @@ const data = [
 export const Parent = () => {
   return (
     <div>
+      <Table rows={data} renderRow={(row) => <td>{row.name}</td>} />
       <Table
         rows={data}
-        key="id"
-        renderRow={(row) => <td>{row.name}</td>}
-      ></Table>
-      <Table
-        rows={data}
-        // @ts-expect-error
-        key="doesNotExist"
-        renderRow={(row) => <td>{row.name}</td>}
-      ></Table>
-
-      <Table
-        rows={data}
-        key="id"
         renderRow={(row) => {
+          type test = Expect<Equal<typeof row, { id: number; name: string }>>;
           return (
             <td>
               {
diff --git a/src/05-generics/31-generic-props.solution.tsx b/src/05-generics/31-generic-props.solution.tsx
index 17ec34b..bef78c8 100644
--- a/src/05-generics/31-generic-props.solution.tsx
+++ b/src/05-generics/31-generic-props.solution.tsx
@@ -1,11 +1,16 @@
 import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
 
 interface TableProps<T> {
   rows: T[];
-  key: keyof T;
   renderRow: (row: T) => ReactNode;
 }
 
+/**
+ * The solution is to add a type argument to the function, then
+ * use that type argument in the type of the `rows` prop and the
+ * `renderRow` function.
+ */
 export const Table = <T,>(props: TableProps<T>) => {
   return (
     <table>
@@ -28,22 +33,11 @@ const data = [
 export const Parent = () => {
   return (
     <div>
+      <Table rows={data} renderRow={(row) => <td>{row.name}</td>} />
       <Table
         rows={data}
-        key="id"
-        renderRow={(row) => <td>{row.name}</td>}
-      ></Table>
-      <Table
-        rows={data}
-        // @ts-expect-error
-        key="doesNotExist"
-        renderRow={(row) => <td>{row.name}</td>}
-      ></Table>
-
-      <Table
-        rows={data}
-        key="id"
         renderRow={(row) => {
+          type test = Expect<Equal<typeof row, { id: number; name: string }>>;
           return (
             <td>
               {
diff --git a/src/05-generics/32-generic-hooks.problem.ts b/src/05-generics/32-generic-hooks.problem.ts
index 8cbafbb..716bbd9 100644
--- a/src/05-generics/32-generic-hooks.problem.ts
+++ b/src/05-generics/32-generic-hooks.problem.ts
@@ -1,6 +1,13 @@
 import { useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * 1. In this exercise, we want to create a version of the useState
+ * hook that slightly modifies the API - returning it as an object
+ * instead of a tuple.
+ *
+ * There are _many_ different solutions - but they all involve generics.
+ */
 export const useStateAsObject = (initial: any) => {
   const [value, set] = useState(initial);
 
diff --git a/src/05-generics/32-generic-hooks.solution.1.ts b/src/05-generics/32-generic-hooks.solution.1.ts
index e949e6e..3192459 100644
--- a/src/05-generics/32-generic-hooks.solution.1.ts
+++ b/src/05-generics/32-generic-hooks.solution.1.ts
@@ -1,6 +1,13 @@
 import { useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * 1. Take a look at each solution, noting the differences between each.
+ * With some, you might need to do some 'spot the diference' to see
+ * what's changed.
+ *
+ * 2. Which solution do you think is best? Why?
+ */
 export const useStateAsObject = <T>(initial: T) => {
   const [value, set] = useState(initial);
 
diff --git a/src/05-generics/37-generic-localstorage-hook.problem.ts b/src/05-generics/33-generic-localstorage-hook.problem.ts
similarity index 67%
rename from src/05-generics/37-generic-localstorage-hook.problem.ts
rename to src/05-generics/33-generic-localstorage-hook.problem.ts
index 9e54d2a..b368977 100644
--- a/src/05-generics/37-generic-localstorage-hook.problem.ts
+++ b/src/05-generics/33-generic-localstorage-hook.problem.ts
@@ -1,6 +1,19 @@
 import { it } from "vitest";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * In this exercise, we want to create a generic useLocalStorage hook
+ * that allows us to store and retrieve values in localStorage.
+ *
+ * The way we're going to do this is by asking users to pass in type
+ * arguments, as below:
+ *
+ * const user = useLocalStorage<{ name: string }>("user");
+ *
+ * user.set("matt", { name: "Matt" });
+ *
+ * 1. Figure out a way to make this work using generics.
+ */
 export const useLocalStorage = (prefix: string) => {
   return {
     get: (key: string) => {
diff --git a/src/05-generics/37-generic-localstorage-hook.solution.ts b/src/05-generics/33-generic-localstorage-hook.solution.ts
similarity index 100%
rename from src/05-generics/37-generic-localstorage-hook.solution.ts
rename to src/05-generics/33-generic-localstorage-hook.solution.ts
diff --git a/src/05-generics/34-button-group.problem.tsx b/src/05-generics/34-button-group.problem.tsx
new file mode 100644
index 0000000..fd16b69
--- /dev/null
+++ b/src/05-generics/34-button-group.problem.tsx
@@ -0,0 +1,55 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface ButtonGroupProps {
+  buttons: {
+    value: string;
+    label: string;
+  }[];
+  onClick: (value: string) => void;
+}
+
+/**
+ * In this exercise, we have a component called ButtonGroup. It takes an array
+ * of buttons and a function to call when a button is clicked.
+ *
+ * We want to improve the type of the onClick function so that the value passed
+ * to it is inferred from the buttons array.
+ *
+ * 1. Try to solve this problem using generics.
+ */
+const ButtonGroup = (props: ButtonGroupProps) => {
+  return (
+    <div>
+      {props.buttons.map((button) => {
+        return (
+          <button
+            key={button.value}
+            onClick={() => {
+              props.onClick(button.value);
+            }}
+          >
+            {button.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+<>
+  <ButtonGroup
+    onClick={(value) => {
+      type test = Expect<Equal<typeof value, "add" | "delete">>;
+    }}
+    buttons={[
+      {
+        value: "add",
+        label: "Add",
+      },
+      {
+        value: "delete",
+        label: "Delete",
+      },
+    ]}
+  ></ButtonGroup>
+</>;
diff --git a/src/05-generics/35-button-group.solution.tsx b/src/05-generics/34-button-group.solution.tsx
similarity index 100%
rename from src/05-generics/35-button-group.solution.tsx
rename to src/05-generics/34-button-group.solution.tsx
diff --git a/src/05-generics/35-button-group.problem.tsx b/src/05-generics/35-button-group.problem.tsx
index 287ce93..59524e4 100644
--- a/src/05-generics/35-button-group.problem.tsx
+++ b/src/05-generics/35-button-group.problem.tsx
@@ -1,27 +1,34 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
-interface ButtonGroupProps<TValue extends string> {
-  buttons: {
-    value: TValue;
-    label: string;
-  }[];
-  onClick: (value: TValue) => void;
+interface ButtonGroupProps<TButtons extends string[]> {
+  buttons: TButtons;
+  onClick: (value: TButtons[number]) => void;
 }
 
-const ButtonGroup = <TValue extends string>(
-  props: ButtonGroupProps<TValue>,
+/**
+ * Here, we've changed the type of the `buttons` prop to be an array of strings.
+ * But the inference has broken in the ButtonGroup component below!
+ *
+ * See if you can find a way to fix it. A 'const' annotation may help:
+ *
+ * https://www.totaltypescript.com/const-type-parameters
+ *
+ * OR you might be able to fix it by changing the type of the type argument.
+ */
+const ButtonGroup = <TButtons extends string[]>(
+  props: ButtonGroupProps<TButtons>,
 ) => {
   return (
     <div>
       {props.buttons.map((button) => {
         return (
           <button
-            key={button.value}
+            key={button}
             onClick={() => {
-              props.onClick(button.value);
+              props.onClick(button);
             }}
           >
-            {button.label}
+            {button}
           </button>
         );
       })}
@@ -32,17 +39,12 @@ const ButtonGroup = <TValue extends string>(
 <>
   <ButtonGroup
     onClick={(value) => {
+      /**
+       * Instead of inferring the type of `value` to be "add" | "delete", it's
+       * now inferred to be `string`.
+       */
       type test = Expect<Equal<typeof value, "add" | "delete">>;
     }}
-    buttons={[
-      {
-        value: "add",
-        label: "Add",
-      },
-      {
-        value: "delete",
-        label: "Delete",
-      },
-    ]}
+    buttons={["add", "delete"]}
   ></ButtonGroup>
 </>;
diff --git a/src/05-generics/36-button-group.solution.1.tsx b/src/05-generics/35-button-group.solution.1.tsx
similarity index 100%
rename from src/05-generics/36-button-group.solution.1.tsx
rename to src/05-generics/35-button-group.solution.1.tsx
diff --git a/src/05-generics/36-button-group.solution.2.tsx b/src/05-generics/35-button-group.solution.2.tsx
similarity index 100%
rename from src/05-generics/36-button-group.solution.2.tsx
rename to src/05-generics/35-button-group.solution.2.tsx
diff --git a/src/05-generics/36-button-group.problem.tsx b/src/05-generics/36-button-group.problem.tsx
deleted file mode 100644
index 59524e4..0000000
--- a/src/05-generics/36-button-group.problem.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Equal, Expect } from "../helpers/type-utils";
-
-interface ButtonGroupProps<TButtons extends string[]> {
-  buttons: TButtons;
-  onClick: (value: TButtons[number]) => void;
-}
-
-/**
- * Here, we've changed the type of the `buttons` prop to be an array of strings.
- * But the inference has broken in the ButtonGroup component below!
- *
- * See if you can find a way to fix it. A 'const' annotation may help:
- *
- * https://www.totaltypescript.com/const-type-parameters
- *
- * OR you might be able to fix it by changing the type of the type argument.
- */
-const ButtonGroup = <TButtons extends string[]>(
-  props: ButtonGroupProps<TButtons>,
-) => {
-  return (
-    <div>
-      {props.buttons.map((button) => {
-        return (
-          <button
-            key={button}
-            onClick={() => {
-              props.onClick(button);
-            }}
-          >
-            {button}
-          </button>
-        );
-      })}
-    </div>
-  );
-};
-
-<>
-  <ButtonGroup
-    onClick={(value) => {
-      /**
-       * Instead of inferring the type of `value` to be "add" | "delete", it's
-       * now inferred to be `string`.
-       */
-      type test = Expect<Equal<typeof value, "add" | "delete">>;
-    }}
-    buttons={["add", "delete"]}
-  ></ButtonGroup>
-</>;
diff --git a/src/05-generics/33-lazy-load-component.problem.tsx b/src/05-generics/36-lazy-load-component.problem.tsx
similarity index 85%
rename from src/05-generics/33-lazy-load-component.problem.tsx
rename to src/05-generics/36-lazy-load-component.problem.tsx
index 394c89c..c0ce47a 100644
--- a/src/05-generics/33-lazy-load-component.problem.tsx
+++ b/src/05-generics/36-lazy-load-component.problem.tsx
@@ -1,7 +1,7 @@
 import { lazy, Suspense, useMemo } from "react";
 
 type Props = {
-  loader: () => Promise<{ default: any }>;
+  loader: unknown;
 };
 
 /**
@@ -10,14 +10,16 @@ type Props = {
  *
  * But it's not typed correctly, and it's not generic enough.
  * Fix the typing errors, and make it generic enough to support any component.
- * Hint - React.ComponentProps will come in handy!
+ *
+ * Hint - React.ComponentProps will come in handy! The solution also includes
+ * one 'as any'.
  */
 function LazyLoad({ loader, ...props }: Props) {
   const LazyComponent = useMemo(() => lazy(loader), [loader]);
 
   return (
     <Suspense fallback={"Loading..."}>
-      <LazyComponent {...(props as any)} />
+      <LazyComponent {...props} />
     </Suspense>
   );
 }
diff --git a/src/05-generics/33-lazy-load-component.solution.tsx b/src/05-generics/36-lazy-load-component.solution.tsx
similarity index 100%
rename from src/05-generics/33-lazy-load-component.solution.tsx
rename to src/05-generics/36-lazy-load-component.solution.tsx
diff --git a/src/05-generics/34-generics-vs-discriminated-unions.problem.tsx b/src/05-generics/37-generics-vs-discriminated-unions.problem.tsx
similarity index 65%
rename from src/05-generics/34-generics-vs-discriminated-unions.problem.tsx
rename to src/05-generics/37-generics-vs-discriminated-unions.problem.tsx
index d4f35e2..2a9fa5a 100644
--- a/src/05-generics/34-generics-vs-discriminated-unions.problem.tsx
+++ b/src/05-generics/37-generics-vs-discriminated-unions.problem.tsx
@@ -1,3 +1,19 @@
+/**
+ * In this exercise, we'll look at an example where generics are NOT
+ * needed.
+ *
+ * 1. Take a look at the ModalProps type. Try to figure out what's
+ * going on in the type.
+ *
+ * Notice what type gets returned if you type:
+ *
+ * type Example = ModalProps<'with-button'>;
+ * type Example2 = ModalProps<'without-button'>;
+ *
+ * 2. There's a way of writing this type (and the component!) without
+ * generics that's much simpler. Try to figure out how to do that.
+ */
+
 export type ModalProps<TVariant extends PossibleVariants> = {
   isOpen: boolean;
   variant: TVariant;
diff --git a/src/05-generics/34-generics-vs-discriminated-unions.solution.tsx b/src/05-generics/37-generics-vs-discriminated-unions.solution.tsx
similarity index 77%
rename from src/05-generics/34-generics-vs-discriminated-unions.solution.tsx
rename to src/05-generics/37-generics-vs-discriminated-unions.solution.tsx
index d20cc60..8778be8 100644
--- a/src/05-generics/34-generics-vs-discriminated-unions.solution.tsx
+++ b/src/05-generics/37-generics-vs-discriminated-unions.solution.tsx
@@ -1,3 +1,10 @@
+/**
+ * Yep, a discriminated union is the way to go here. Instead of
+ * using a generic type (with a conditional type!), we can use
+ * a discriminated union to make sure that the correct props
+ * are passed in for each variant.
+ */
+
 export type ModalProps =
   | {
       isOpen: boolean;

From 03c68bd0ea2074098524bc5044ed81ecca5c8e2f Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 8 Jun 2023 11:21:02 +0100
Subject: [PATCH 021/165] Wrote comments in 06-advanced-hooks

---
 .../38-tuple-return-type.problem.ts           | 10 ++++
 .../38-tuple-return-type.solution.1.ts        |  6 ++-
 .../38-tuple-return-type.solution.2.ts        |  6 +--
 .../39-unions-in-usestate.problem.tsx         | 30 +++++-------
 .../39-unions-in-usestate.solution.tsx        | 20 +-------
 ...scriminated-unions-in-usestate.problem.tsx | 29 +++++++-----
 ...criminated-unions-in-usestate.solution.tsx | 11 +----
 ...ated-tuples-from-custom-hooks.problem.tsx} | 15 ++++++
 ...ted-tuples-from-custom-hooks.solution.tsx} |  6 +++
 ...union-returns-from-custom-hooks.problem.ts |  0
 .../42-function-overloads-in-hooks.problem.ts | 35 --------------
 .../42-use-state-overloads.problem.ts         | 38 +++++++++++++++
 .../42-use-state-overloads.solution.1.ts      | 21 +++++++++
 .../42-use-state-overloads.solution.2.ts      | 28 +++++++++++
 .../43-function-overloads-in-hooks.problem.ts | 47 +++++++++++++++++++
 ...function-overloads-in-hooks.solution.1.ts} | 18 ++++---
 ...function-overloads-in-hooks.solution.2.ts} | 18 ++++---
 src/fake-external-lib/index.ts                | 16 +++++++
 18 files changed, 245 insertions(+), 109 deletions(-)
 rename src/06-advanced-hooks/{43-discriminated-tuples-from-custom-hooks.problem.tsx => 41-discriminated-tuples-from-custom-hooks.problem.tsx} (60%)
 rename src/06-advanced-hooks/{43-discriminated-tuples-from-custom-hooks.solution.tsx => 41-discriminated-tuples-from-custom-hooks.solution.tsx} (84%)
 delete mode 100644 src/06-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts
 delete mode 100644 src/06-advanced-hooks/42-function-overloads-in-hooks.problem.ts
 create mode 100644 src/06-advanced-hooks/42-use-state-overloads.problem.ts
 create mode 100644 src/06-advanced-hooks/42-use-state-overloads.solution.1.ts
 create mode 100644 src/06-advanced-hooks/42-use-state-overloads.solution.2.ts
 create mode 100644 src/06-advanced-hooks/43-function-overloads-in-hooks.problem.ts
 rename src/06-advanced-hooks/{42-function-overloads-in-hooks.solution.1.ts => 43-function-overloads-in-hooks.solution.1.ts} (61%)
 rename src/06-advanced-hooks/{42-function-overloads-in-hooks.solution.2.ts => 43-function-overloads-in-hooks.solution.2.ts} (61%)

diff --git a/src/06-advanced-hooks/38-tuple-return-type.problem.ts b/src/06-advanced-hooks/38-tuple-return-type.problem.ts
index 1fc3842..92c610f 100644
--- a/src/06-advanced-hooks/38-tuple-return-type.problem.ts
+++ b/src/06-advanced-hooks/38-tuple-return-type.problem.ts
@@ -1,6 +1,16 @@
 import { useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * Here, we've got a hook that returns a tuple of [value, setValue].
+ *
+ * But if we hover over id and setId below, you'll see that they're
+ * both inferred as string | React.Dispatch<React.SetStateAction<string>>,
+ * which is not ideal.
+ *
+ * 1. Find a way to fix the errors below.
+ */
+
 export const useId = (defaultId: string) => {
   const [id, setId] = useState(defaultId);
 
diff --git a/src/06-advanced-hooks/38-tuple-return-type.solution.1.ts b/src/06-advanced-hooks/38-tuple-return-type.solution.1.ts
index 74aa4a6..1f5968e 100644
--- a/src/06-advanced-hooks/38-tuple-return-type.solution.1.ts
+++ b/src/06-advanced-hooks/38-tuple-return-type.solution.1.ts
@@ -1,10 +1,12 @@
 import { useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const useId = (defaultId: string) => {
+export const useId = (
+  defaultId: string,
+): [string, React.Dispatch<React.SetStateAction<string>>] => {
   const [id, setId] = useState(defaultId);
 
-  return [id, setId] as const;
+  return [id, setId];
 };
 
 const [id, setId] = useId("1");
diff --git a/src/06-advanced-hooks/38-tuple-return-type.solution.2.ts b/src/06-advanced-hooks/38-tuple-return-type.solution.2.ts
index 1f5968e..74aa4a6 100644
--- a/src/06-advanced-hooks/38-tuple-return-type.solution.2.ts
+++ b/src/06-advanced-hooks/38-tuple-return-type.solution.2.ts
@@ -1,12 +1,10 @@
 import { useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const useId = (
-  defaultId: string,
-): [string, React.Dispatch<React.SetStateAction<string>>] => {
+export const useId = (defaultId: string) => {
   const [id, setId] = useState(defaultId);
 
-  return [id, setId];
+  return [id, setId] as const;
 };
 
 const [id, setId] = useId("1");
diff --git a/src/06-advanced-hooks/39-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/39-unions-in-usestate.problem.tsx
index e361a74..e34471c 100644
--- a/src/06-advanced-hooks/39-unions-in-usestate.problem.tsx
+++ b/src/06-advanced-hooks/39-unions-in-usestate.problem.tsx
@@ -1,18 +1,17 @@
 import { useEffect, useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
-
-const fetchVideo = (src: string, signal: AbortSignal) => {
-  return fetch(src, {
-    signal,
-  }).then((response) => response.blob());
-};
-
-const appendVideoToDomAndPlay = (blob: Blob) => {
-  const video = document.createElement("video");
-  video.src = URL.createObjectURL(blob);
-  video.play();
-};
-
+import { appendVideoToDomAndPlay, fetchVideo } from "fake-external-lib";
+
+/**
+ * This is a complex problem. We want to load a video from a URL and play it.
+ * We also want to show a loading spinner while it loads, and an error message
+ * if it fails.
+ *
+ * The code is handling this with several different states: "loading", "loaded",
+ * and "error". But currently, the type of state is just string.
+ *
+ * 1. See if you can fix the errors below by making the type of state more specific.
+ */
 export const useLoadAsyncVideo = (src: string) => {
   const [state, setState] = useState("loading");
 
@@ -21,9 +20,7 @@ export const useLoadAsyncVideo = (src: string) => {
 
     let cancelled = false;
 
-    const abortController = new AbortController();
-
-    fetchVideo(src, abortController.signal)
+    fetchVideo(src)
       .then((blob) => {
         if (cancelled) {
           return;
@@ -42,7 +39,6 @@ export const useLoadAsyncVideo = (src: string) => {
 
     return () => {
       cancelled = true;
-      abortController.abort();
     };
   }, [src]);
 
diff --git a/src/06-advanced-hooks/39-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/39-unions-in-usestate.solution.tsx
index c54379d..6d2c674 100644
--- a/src/06-advanced-hooks/39-unions-in-usestate.solution.tsx
+++ b/src/06-advanced-hooks/39-unions-in-usestate.solution.tsx
@@ -1,19 +1,6 @@
 import { useEffect, useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
-
-type State = "loading" | "loaded" | "error";
-
-const fetchVideo = (src: string, signal: AbortSignal) => {
-  return fetch(src, {
-    signal,
-  }).then((response) => response.blob());
-};
-
-const appendVideoToDomAndPlay = (blob: Blob) => {
-  const video = document.createElement("video");
-  video.src = URL.createObjectURL(blob);
-  video.play();
-};
+import { appendVideoToDomAndPlay, fetchVideo } from "fake-external-lib";
 
 export const useLoadAsyncVideo = (src: string) => {
   const [state, setState] = useState<State>("loading");
@@ -23,9 +10,7 @@ export const useLoadAsyncVideo = (src: string) => {
 
     let cancelled = false;
 
-    const abortController = new AbortController();
-
-    fetchVideo(src, abortController.signal)
+    fetchVideo(src)
       .then((blob) => {
         if (cancelled) {
           return;
@@ -44,7 +29,6 @@ export const useLoadAsyncVideo = (src: string) => {
 
     return () => {
       cancelled = true;
-      abortController.abort();
     };
   }, [src]);
 
diff --git a/src/06-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx
index 30a2ab4..1526d53 100644
--- a/src/06-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx
+++ b/src/06-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx
@@ -1,20 +1,27 @@
+import { appendVideoToDomAndPlay, fetchVideo } from "fake-external-lib";
 import { useEffect, useState } from "react";
 
+/**
+ * Here, we're doing the same trick as before - using a state
+ * variable to track the status of the video loading.
+ *
+ * But this time, we're storing it an object, with an extra
+ * property for the error.
+ *
+ * This could be improved - we should only be allowed to specify
+ * the error property when the status is "error".
+ *
+ * 1. Change the State interface so that the error property is only
+ * allowed when the status is "error".
+ */
+
+type Status = "loading" | "loaded" | "error";
+
 interface State {
-  status: "loading" | "loaded" | "error";
+  status: Status;
   error?: Error;
 }
 
-const fetchVideo = (src: string) => {
-  return fetch(src).then((response) => response.blob());
-};
-
-const appendVideoToDomAndPlay = (blob: Blob) => {
-  const video = document.createElement("video");
-  video.src = URL.createObjectURL(blob);
-  video.play();
-};
-
 export const useLoadAsyncVideo = (src: string) => {
   const [state, setState] = useState<State>({
     status: "loading",
diff --git a/src/06-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx
index 1728d72..b9a2f10 100644
--- a/src/06-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx
+++ b/src/06-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx
@@ -1,3 +1,4 @@
+import { appendVideoToDomAndPlay, fetchVideo } from "fake-external-lib";
 import { useEffect, useState } from "react";
 
 type State =
@@ -12,16 +13,6 @@ type State =
       error: Error;
     };
 
-const fetchVideo = (src: string) => {
-  return fetch(src).then((response) => response.blob());
-};
-
-const appendVideoToDomAndPlay = (blob: Blob) => {
-  const video = document.createElement("video");
-  video.src = URL.createObjectURL(blob);
-  video.play();
-};
-
 export const useLoadAsyncVideo = (src: string) => {
   const [state, setState] = useState<State>({
     status: "loading",
diff --git a/src/06-advanced-hooks/43-discriminated-tuples-from-custom-hooks.problem.tsx b/src/06-advanced-hooks/41-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 60%
rename from src/06-advanced-hooks/43-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/06-advanced-hooks/41-discriminated-tuples-from-custom-hooks.problem.tsx
index 52f7952..432baac 100644
--- a/src/06-advanced-hooks/43-discriminated-tuples-from-custom-hooks.problem.tsx
+++ b/src/06-advanced-hooks/41-discriminated-tuples-from-custom-hooks.problem.tsx
@@ -5,6 +5,21 @@ export type Result<T> = [
   T | Error | undefined,
 ];
 
+/**
+ * Let's look at one more example of discriminated unions. This time, we're
+ * going to use them to make the tuple return type of a hook smarter.
+ *
+ * 1. Change the Result type so that the second element is inferred
+ * from narrowing the first.
+ *
+ * const [status, value] = useData<{ title: string }>(
+ *   "https://jsonplaceholder.typicode.com/todos/1",
+ * );
+ *
+ * When status is 'loading', value should be undefined.
+ * When status is 'error', value should be an Error.
+ * When status is 'success', value should be T.
+ */
 export const useData = <T,>(url: string): Result<T> => {
   const [result, setResult] = useState<Result<T>>(["loading", undefined]);
 
diff --git a/src/06-advanced-hooks/43-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/41-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 84%
rename from src/06-advanced-hooks/43-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/06-advanced-hooks/41-discriminated-tuples-from-custom-hooks.solution.tsx
index 170e9ae..dcf7160 100644
--- a/src/06-advanced-hooks/43-discriminated-tuples-from-custom-hooks.solution.tsx
+++ b/src/06-advanced-hooks/41-discriminated-tuples-from-custom-hooks.solution.tsx
@@ -1,5 +1,11 @@
 import { useEffect, useState } from "react";
 
+/**
+ * A discriminated tuple!
+ *
+ * The really cool thing about this is that TypeScript can infer the type
+ * even after it's been destructured.
+ */
 export type Result<T> =
   | ["loading", undefined]
   | ["error", Error]
diff --git a/src/06-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts b/src/06-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/06-advanced-hooks/42-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/42-function-overloads-in-hooks.problem.ts
deleted file mode 100644
index 23703a6..0000000
--- a/src/06-advanced-hooks/42-function-overloads-in-hooks.problem.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useState } from "react";
-import { Equal, Expect } from "../helpers/type-utils";
-
-export const useStateAsObject = <T>(initial: T) => {
-  const [value, set] = useState(initial);
-
-  return {
-    value,
-    set,
-  };
-};
-
-const example = useStateAsObject({ name: "Matt" });
-
-type ExampleTests = [
-  Expect<Equal<typeof example.value, { name: string }>>,
-  Expect<
-    Equal<
-      typeof example.set,
-      React.Dispatch<React.SetStateAction<{ name: string }>>
-    >
-  >,
-];
-
-const num = useStateAsObject<number>();
-
-type NumTests = [
-  Expect<Equal<typeof num.value, number | undefined>>,
-  Expect<
-    Equal<
-      typeof num.set,
-      React.Dispatch<React.SetStateAction<number | undefined>>
-    >
-  >,
-];
diff --git a/src/06-advanced-hooks/42-use-state-overloads.problem.ts b/src/06-advanced-hooks/42-use-state-overloads.problem.ts
new file mode 100644
index 0000000..0265ade
--- /dev/null
+++ b/src/06-advanced-hooks/42-use-state-overloads.problem.ts
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+useState;
+// ^^^^^ CMD-click to see the implementation of useState
+
+/**
+ * 1. Take a look at useState. You'll notice that it's composed of
+ * two overloads.
+ *
+ * 2. Try to figure out what the difference is between the two overloads.
+ *
+ * 3. Below, there's a simple function that expects to behave like useState.
+ * Try to write a set of function overloads that:
+ *
+ * - If it receives a string, returns a string
+ * - If it receives NOTHING, returns a string | undefined
+ *
+ * HINT - you'll need to use the function keyword THREE times.
+ */
+
+function maybeReturnsString(defaultString?: string) {
+  // If you pass a string, it always returns a string
+  if (defaultString) {
+    return defaultString;
+  }
+
+  // Otherwise, it MIGHT return a string or undefined
+  return Math.random() > 0.5 ? "hello" : undefined;
+}
+
+const example1 = maybeReturnsString("hello");
+const example2 = maybeReturnsString();
+
+type tests = [
+  Expect<Equal<typeof example1, string>>,
+  Expect<Equal<typeof example2, string | undefined>>,
+];
diff --git a/src/06-advanced-hooks/42-use-state-overloads.solution.1.ts b/src/06-advanced-hooks/42-use-state-overloads.solution.1.ts
new file mode 100644
index 0000000..90ab8bf
--- /dev/null
+++ b/src/06-advanced-hooks/42-use-state-overloads.solution.1.ts
@@ -0,0 +1,21 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+function maybeReturnsString(defaultString: string): string;
+function maybeReturnsString(): string | undefined;
+function maybeReturnsString(defaultString?: string) {
+  // If you pass a string, it always returns a string
+  if (defaultString) {
+    return defaultString;
+  }
+
+  // Otherwise, it MIGHT return a string or undefined
+  return Math.random() > 0.5 ? "hello" : undefined;
+}
+
+const example1 = maybeReturnsString("hello");
+const example2 = maybeReturnsString();
+
+type tests = [
+  Expect<Equal<typeof example1, string>>,
+  Expect<Equal<typeof example2, string | undefined>>,
+];
diff --git a/src/06-advanced-hooks/42-use-state-overloads.solution.2.ts b/src/06-advanced-hooks/42-use-state-overloads.solution.2.ts
new file mode 100644
index 0000000..107f774
--- /dev/null
+++ b/src/06-advanced-hooks/42-use-state-overloads.solution.2.ts
@@ -0,0 +1,28 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * This approach also works - specifying defaultString?: string | undefined
+ * in the second overload.
+ */
+
+function maybeReturnsString(defaultString: string): string;
+function maybeReturnsString(
+  defaultString?: string | undefined,
+): string | undefined;
+function maybeReturnsString(defaultString?: string) {
+  // If you pass a string, it always returns a string
+  if (defaultString) {
+    return defaultString;
+  }
+
+  // Otherwise, it MIGHT return a string or undefined
+  return Math.random() > 0.5 ? "hello" : undefined;
+}
+
+const example1 = maybeReturnsString("hello");
+const example2 = maybeReturnsString();
+
+type tests = [
+  Expect<Equal<typeof example1, string>>,
+  Expect<Equal<typeof example2, string | undefined>>,
+];
diff --git a/src/06-advanced-hooks/43-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/43-function-overloads-in-hooks.problem.ts
new file mode 100644
index 0000000..7e053f7
--- /dev/null
+++ b/src/06-advanced-hooks/43-function-overloads-in-hooks.problem.ts
@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * Returning to our useStateAsObject function, we now want to make it work
+ * EXACTLY like useState, where if you NOTHING, it returns T | undefined.
+ *
+ * If you pass a default value, it should NOT include undefined.
+ */
+export function useStateAsObject<T>(initial: T) {
+  const [value, set] = useState(initial);
+
+  return {
+    value,
+    set,
+  };
+}
+
+/**
+ * If you DO pass a default value, the result should NOT include undefined
+ */
+const notUndefined = useStateAsObject({ name: "Matt" });
+
+type ExampleTests = [
+  Expect<Equal<typeof notUndefined.value, { name: string }>>,
+  Expect<
+    Equal<
+      typeof notUndefined.set,
+      React.Dispatch<React.SetStateAction<{ name: string }>>
+    >
+  >,
+];
+
+/**
+ * If you don't pass a value, it should be undefined
+ */
+const hasUndefined = useStateAsObject<number>();
+
+type NumTests = [
+  Expect<Equal<typeof hasUndefined.value, number | undefined>>,
+  Expect<
+    Equal<
+      typeof hasUndefined.set,
+      React.Dispatch<React.SetStateAction<number | undefined>>
+    >
+  >,
+];
diff --git a/src/06-advanced-hooks/42-function-overloads-in-hooks.solution.1.ts b/src/06-advanced-hooks/43-function-overloads-in-hooks.solution.1.ts
similarity index 61%
rename from src/06-advanced-hooks/42-function-overloads-in-hooks.solution.1.ts
rename to src/06-advanced-hooks/43-function-overloads-in-hooks.solution.1.ts
index 2cdeedf..933190c 100644
--- a/src/06-advanced-hooks/42-function-overloads-in-hooks.solution.1.ts
+++ b/src/06-advanced-hooks/43-function-overloads-in-hooks.solution.1.ts
@@ -18,25 +18,31 @@ export function useStateAsObject<T>(initial?: T) {
   };
 }
 
-const example = useStateAsObject({ name: "Matt" });
+/**
+ * If you DO pass a default value, the result should NOT include undefined
+ */
+const notUndefined = useStateAsObject({ name: "Matt" });
 
 type ExampleTests = [
-  Expect<Equal<typeof example.value, { name: string }>>,
+  Expect<Equal<typeof notUndefined.value, { name: string }>>,
   Expect<
     Equal<
-      typeof example.set,
+      typeof notUndefined.set,
       React.Dispatch<React.SetStateAction<{ name: string }>>
     >
   >,
 ];
 
-const num = useStateAsObject<number>();
+/**
+ * If you don't pass a value, it should be undefined
+ */
+const hasUndefined = useStateAsObject<number>();
 
 type NumTests = [
-  Expect<Equal<typeof num.value, number | undefined>>,
+  Expect<Equal<typeof hasUndefined.value, number | undefined>>,
   Expect<
     Equal<
-      typeof num.set,
+      typeof hasUndefined.set,
       React.Dispatch<React.SetStateAction<number | undefined>>
     >
   >,
diff --git a/src/06-advanced-hooks/42-function-overloads-in-hooks.solution.2.ts b/src/06-advanced-hooks/43-function-overloads-in-hooks.solution.2.ts
similarity index 61%
rename from src/06-advanced-hooks/42-function-overloads-in-hooks.solution.2.ts
rename to src/06-advanced-hooks/43-function-overloads-in-hooks.solution.2.ts
index 2e58922..5432703 100644
--- a/src/06-advanced-hooks/42-function-overloads-in-hooks.solution.2.ts
+++ b/src/06-advanced-hooks/43-function-overloads-in-hooks.solution.2.ts
@@ -17,25 +17,31 @@ export function useStateAsObject<T>(initial?: T) {
   };
 }
 
-const example = useStateAsObject({ name: "Matt" });
+/**
+ * If you DO pass a default value, the result should NOT include undefined
+ */
+const notUndefined = useStateAsObject({ name: "Matt" });
 
 type ExampleTests = [
-  Expect<Equal<typeof example.value, { name: string }>>,
+  Expect<Equal<typeof notUndefined.value, { name: string }>>,
   Expect<
     Equal<
-      typeof example.set,
+      typeof notUndefined.set,
       React.Dispatch<React.SetStateAction<{ name: string }>>
     >
   >,
 ];
 
-const num = useStateAsObject<number>();
+/**
+ * If you don't pass a value, it should be undefined
+ */
+const hasUndefined = useStateAsObject<number>();
 
 type NumTests = [
-  Expect<Equal<typeof num.value, number | undefined>>,
+  Expect<Equal<typeof hasUndefined.value, number | undefined>>,
   Expect<
     Equal<
-      typeof num.set,
+      typeof hasUndefined.set,
       React.Dispatch<React.SetStateAction<number | undefined>>
     >
   >,
diff --git a/src/fake-external-lib/index.ts b/src/fake-external-lib/index.ts
index 64360da..615fc28 100644
--- a/src/fake-external-lib/index.ts
+++ b/src/fake-external-lib/index.ts
@@ -4,3 +4,19 @@
 export const useAuthToken = () => {
   return "123";
 };
+
+/**
+ * A fake video fetcher.
+ */
+export const fetchVideo = (src: string) => {
+  return fetch(src).then((response) => response.blob());
+};
+
+/**
+ * A fake video appender.
+ */
+export const appendVideoToDomAndPlay = (blob: Blob) => {
+  const video = document.createElement("video");
+  video.src = URL.createObjectURL(blob);
+  video.play();
+};

From d054b58110c2063be5377f5490372bf16e78f2b4 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 8 Jun 2023 12:14:19 +0100
Subject: [PATCH 022/165] Completed 07-types-deep-dive

---
 ...rstand-react-namespace-export.explainer.ts |  4 +++
 ...45-understanding-jsx-element.explainer.tsx | 31 +++++++++++++----
 .../46-strongly-typing-children.explainer.tsx | 33 +++++++++++++++++++
 .../46-strongly-typing-children.problem.tsx   |  1 -
 ...how-does-react-represent-html.explainer.ts |  3 --
 ...anding-jsx-intrinsic-elements.explainer.ts |  5 ---
 ...nding-jsx-intrinsic-elements.explainer.tsx | 30 +++++++++++++++++
 .../48-add-new-global-element.problem.tsx     |  9 -----
 ...8-appending-to-global-namespace.problem.ts | 17 ++++++++++
 ...-appending-to-global-namespace.solution.ts | 14 ++++++++
 ...-add-attribute-to-all-elements.problem.tsx | 24 --------------
 ...ion-merging-in-global-namespace.problem.ts | 28 ++++++++++++++++
 ...on-merging-in-global-namespace.solution.ts | 29 ++++++++++++++++
 ...dd-attribute-to-audio-elements.problem.tsx | 12 -------
 .../50-add-new-global-element.problem.tsx     | 21 ++++++++++++
 ...=> 50-add-new-global-element.solution.tsx} |  6 ++--
 ...-add-attribute-to-div-elements.problem.tsx | 16 ---------
 .../51-html-attributes.explainer.tsx          | 24 ++++++++++++++
 ...-add-attribute-to-all-elements.problem.tsx | 16 +++++++++
 ...add-attribute-to-all-elements.solution.tsx | 16 +++++++++
 ...em.tsx => 53-required-context.problem.tsx} |  0
 ...tsx => 53-required-context.solution.1.tsx} |  0
 ...tsx => 53-required-context.solution.2.tsx} |  0
 ...tsx => 54-compound-components.problem.tsx} |  0
 ...forward-ref-with-generics.explainer.1.tsx} |  0
 ...forward-ref-with-generics.explainer.2.tsx} |  0
 ...{55-hoc-problem.tsx => 56-hoc-problem.tsx} |  0
 ...of-components-with-same-props.problem.tsx} |  0
 ...components-with-same-props.solution.1.tsx} |  0
 ...components-with-same-props.solution.2.tsx} |  0
 ...rop.problem.tsx => 58-as-prop.problem.tsx} |  0
 ...lution.1.tsx => 58-as-prop.solution.1.tsx} |  0
 ...lution.2.tsx => 58-as-prop.solution.2.tsx} |  0
 ...s-prop-with-custom-components.problem.tsx} |  0
 ...-prop-with-custom-components.solution.tsx} |  0
 ...roblem.tsx => 60-render-props.problem.tsx} |  0
 ...61-render-props-with-generics.problem.tsx} |  0
 ...r.tsx => 62-react-hook-form.explainer.tsx} |  0
 ...=> 63-react-hook-form-wrapper.problem.tsx} |  0
 ...> 63-react-hook-form-wrapper.solution.tsx} |  0
 ...roblem.tsx => 64-react-select.problem.tsx} |  0
 ...ution.tsx => 64-react-select.solution.tsx} |  0
 ...plainer.ts => 65-react-query.explainer.ts} |  0
 ...m.ts => 66-react-query-wrapper.problem.ts} |  0
 ....ts => 66-react-query-wrapper.solution.ts} |  0
 ...eusable-form-library-with-zod.problem.tsx} |  0
 ...ic-localstorage-hook-with-zod.problem.tsx} |  0
 ...c-localstorage-hook-with-zod.solution.tsx} |  0
 48 files changed, 259 insertions(+), 80 deletions(-)
 create mode 100644 src/07-types-deep-dive/46-strongly-typing-children.explainer.tsx
 delete mode 100644 src/07-types-deep-dive/46-strongly-typing-children.problem.tsx
 delete mode 100644 src/07-types-deep-dive/47-how-does-react-represent-html.explainer.ts
 delete mode 100644 src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.ts
 create mode 100644 src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.tsx
 delete mode 100644 src/07-types-deep-dive/48-add-new-global-element.problem.tsx
 create mode 100644 src/07-types-deep-dive/48-appending-to-global-namespace.problem.ts
 create mode 100644 src/07-types-deep-dive/48-appending-to-global-namespace.solution.ts
 delete mode 100644 src/07-types-deep-dive/49-add-attribute-to-all-elements.problem.tsx
 create mode 100644 src/07-types-deep-dive/49-declaration-merging-in-global-namespace.problem.ts
 create mode 100644 src/07-types-deep-dive/49-declaration-merging-in-global-namespace.solution.ts
 delete mode 100644 src/07-types-deep-dive/50-add-attribute-to-audio-elements.problem.tsx
 create mode 100644 src/07-types-deep-dive/50-add-new-global-element.problem.tsx
 rename src/07-types-deep-dive/{48-add-new-global-element.solution.tsx => 50-add-new-global-element.solution.tsx} (57%)
 delete mode 100644 src/07-types-deep-dive/51-add-attribute-to-div-elements.problem.tsx
 create mode 100644 src/07-types-deep-dive/51-html-attributes.explainer.tsx
 create mode 100644 src/07-types-deep-dive/52-add-attribute-to-all-elements.problem.tsx
 create mode 100644 src/07-types-deep-dive/52-add-attribute-to-all-elements.solution.tsx
 rename src/08-advanced-patterns/{52-required-context.problem.tsx => 53-required-context.problem.tsx} (100%)
 rename src/08-advanced-patterns/{52-required-context.solution.1.tsx => 53-required-context.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{52-required-context.solution.2.tsx => 53-required-context.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{53-compound-components.problem.tsx => 54-compound-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{54-forward-ref-with-generics.explainer.1.tsx => 55-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/08-advanced-patterns/{54-forward-ref-with-generics.explainer.2.tsx => 55-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/08-advanced-patterns/{55-hoc-problem.tsx => 56-hoc-problem.tsx} (100%)
 rename src/08-advanced-patterns/{56-record-of-components-with-same-props.problem.tsx => 57-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{56-record-of-components-with-same-props.solution.1.tsx => 57-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{56-record-of-components-with-same-props.solution.2.tsx => 57-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{57-as-prop.problem.tsx => 58-as-prop.problem.tsx} (100%)
 rename src/08-advanced-patterns/{57-as-prop.solution.1.tsx => 58-as-prop.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{57-as-prop.solution.2.tsx => 58-as-prop.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{58-as-prop-with-custom-components.problem.tsx => 59-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{58-as-prop-with-custom-components.solution.tsx => 59-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/08-advanced-patterns/{59-render-props.problem.tsx => 60-render-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{60-render-props-with-generics.problem.tsx => 61-render-props-with-generics.problem.tsx} (100%)
 rename src/09-external-libraries/{61-react-hook-form.explainer.tsx => 62-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{62-react-hook-form-wrapper.problem.tsx => 63-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{62-react-hook-form-wrapper.solution.tsx => 63-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{63-react-select.problem.tsx => 64-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{63-react-select.solution.tsx => 64-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{64-react-query.explainer.ts => 65-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{65-react-query-wrapper.problem.ts => 66-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{65-react-query-wrapper.solution.ts => 66-react-query-wrapper.solution.ts} (100%)
 rename src/09-external-libraries/{66-reusable-form-library-with-zod.problem.tsx => 67-reusable-form-library-with-zod.problem.tsx} (100%)
 rename src/09-external-libraries/{67-generic-localstorage-hook-with-zod.problem.tsx => 68-generic-localstorage-hook-with-zod.problem.tsx} (100%)
 rename src/09-external-libraries/{67-generic-localstorage-hook-with-zod.solution.tsx => 68-generic-localstorage-hook-with-zod.solution.tsx} (100%)

diff --git a/src/07-types-deep-dive/44-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/44-understand-react-namespace-export.explainer.ts
index 696944e..824b115 100644
--- a/src/07-types-deep-dive/44-understand-react-namespace-export.explainer.ts
+++ b/src/07-types-deep-dive/44-understand-react-namespace-export.explainer.ts
@@ -9,6 +9,10 @@ type Example = React.ReactNode;
 /**
  * 2a. Most namespaces can't be used as values. So how come
  * we can use React as a value here?
+ *
+ * HINT - we're adding LOTS of things to React's namespace in
+ * later exercises, so make sure when you go-to-definition you
+ * go to its original definition, in @types/react/index.d.ts.
  */
 const element = React.createElement("div");
 //              ^?
diff --git a/src/07-types-deep-dive/45-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/45-understanding-jsx-element.explainer.tsx
index ef03a7b..6b8506f 100644
--- a/src/07-types-deep-dive/45-understanding-jsx-element.explainer.tsx
+++ b/src/07-types-deep-dive/45-understanding-jsx-element.explainer.tsx
@@ -1,20 +1,31 @@
 /**
  * 1. What's the difference between JSX.Element,
  * React.ReactNode and React.ReactElement?
+ *
+ * CMD-click each of them to understand the difference.
  */
-const Component = () => {
-  //  ^?
-  return <div>Hello world</div>;
-};
 
 type ClickMe = React.ReactElement;
 type ClickMeToo = JSX.Element;
 type ClickMeThree = React.ReactNode;
 
 /**
- * 2. Why does this break?
+ * 2. What is the return type of this Component?
  */
+const Component = () => {
+  return <div>Hello world</div>;
+};
 
+/**
+ * 3. Fun fact - this might break on your IDE! In
+ * TypeScript 5.0, this wouldn't work. But in TypeScript
+ * 5.1, it DOES work.
+ *
+ * If it's not working for you, try making your IDE use
+ * the 'workspace' version of TypeScript.
+ *
+ * https://stackoverflow.com/questions/39668731/what-typescript-version-is-visual-studio-code-using-how-to-update-it
+ */
 const Component2 = (): React.ReactNode => {
   return <div></div>;
 };
@@ -24,9 +35,8 @@ const Component2 = (): React.ReactNode => {
 </>;
 
 /**
- * 3. Why does this work?
+ * 4a. Why does this component NOT error...
  */
-
 const Component3 = (): React.ReactElement => {
   return <div></div>;
 };
@@ -34,3 +44,10 @@ const Component3 = (): React.ReactElement => {
 <>
   <Component3 />
 </>;
+
+/**
+ * 4b. ...but this one does?
+ */
+const Component4 = (): React.ReactElement => {
+  return "hello!";
+};
diff --git a/src/07-types-deep-dive/46-strongly-typing-children.explainer.tsx b/src/07-types-deep-dive/46-strongly-typing-children.explainer.tsx
new file mode 100644
index 0000000..1a89bd9
--- /dev/null
+++ b/src/07-types-deep-dive/46-strongly-typing-children.explainer.tsx
@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+
+/**
+ * In this example we have a Select component. Through some magic, we're
+ * attempting to strongly type the children of the Select component so
+ * that you can only pass 'Option' elements to it.
+ *
+ * 1. Try to understand the type of OptionType. What's the __brand property
+ * for?
+ *
+ * 2. There's an error happening at <Option /> below. Why is that?
+ *
+ * 3. Try changing <Option /> to {Option()}. This appears to work. Why?
+ * And why is this NOT a good idea?
+ *
+ * 4. Is what we're attempting to do even possible?
+ */
+
+type OptionType = {
+  __brand: "OPTION_TYPE";
+} & ReactNode;
+
+const Option = () => {
+  return (<option></option>) as OptionType;
+};
+
+const Select = (props: { children: OptionType }) => {
+  return <select>{props.children}</select>;
+};
+
+<Select>
+  <Option />
+</Select>;
diff --git a/src/07-types-deep-dive/46-strongly-typing-children.problem.tsx b/src/07-types-deep-dive/46-strongly-typing-children.problem.tsx
deleted file mode 100644
index 37082d3..0000000
--- a/src/07-types-deep-dive/46-strongly-typing-children.problem.tsx
+++ /dev/null
@@ -1 +0,0 @@
-// It's impossible!
diff --git a/src/07-types-deep-dive/47-how-does-react-represent-html.explainer.ts b/src/07-types-deep-dive/47-how-does-react-represent-html.explainer.ts
deleted file mode 100644
index 66372f1..0000000
--- a/src/07-types-deep-dive/47-how-does-react-represent-html.explainer.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// Understand JSX namespace
-// Understand JSX.IntrinsicElements
-// Understand React.*HTMLAttributes
diff --git a/src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.ts b/src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.ts
deleted file mode 100644
index eba0026..0000000
--- a/src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * 1. What is JSX.IntrinsicElements?
- */
-
-export type Example = React.JSX.IntrinsicElements;
diff --git a/src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.tsx b/src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.tsx
new file mode 100644
index 0000000..49419fe
--- /dev/null
+++ b/src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.tsx
@@ -0,0 +1,30 @@
+/**
+ * 1. What is JSX.IntrinsicElements? CMD-click on .IntrinsicElements below
+ * to go to its definition.
+ *
+ * Hint - remember to go to the original definition of JSX.IntrinsicElements
+ * in @types/react/index.d.ts.
+ */
+
+export type Example = JSX.IntrinsicElements;
+
+/**
+ * 2. What is the structure of JSX.IntrinsicElements? It appears to have the
+ * HTML attributes as properties, but what are the values?
+ *
+ * 3. Let's have some fun. Edit the file to add a new property to
+ * JSX.IntrinsicElements:
+ *
+ * interface IntrinsicElements {
+ *   // ...
+ *   myNewElement: {
+ *     foo: string;
+ *   }
+ * }
+ *
+ * Notice that the error below goes away!
+ *
+ * 4. Now change it back, before anyone notices.
+ */
+
+<myNewElement foo="123" />;
diff --git a/src/07-types-deep-dive/48-add-new-global-element.problem.tsx b/src/07-types-deep-dive/48-add-new-global-element.problem.tsx
deleted file mode 100644
index 293b138..0000000
--- a/src/07-types-deep-dive/48-add-new-global-element.problem.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-<>
-  <something id="123"></something>
-
-  {/* @ts-expect-error */}
-  <something></something>
-
-  {/* @ts-expect-error */}
-  <something id={123}></something>
-</>;
diff --git a/src/07-types-deep-dive/48-appending-to-global-namespace.problem.ts b/src/07-types-deep-dive/48-appending-to-global-namespace.problem.ts
new file mode 100644
index 0000000..761030b
--- /dev/null
+++ b/src/07-types-deep-dive/48-appending-to-global-namespace.problem.ts
@@ -0,0 +1,17 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * It's actually possible to change things in the global namespace
+ * in TypeScript.
+ *
+ * 1. Add a declaration for React.MyInterface to the global React
+ * namespace below.
+ */
+
+declare global {
+  namespace React {}
+}
+
+type test = Expect<Equal<React.MyInterface, { foo: string }>>;
+
+export {};
diff --git a/src/07-types-deep-dive/48-appending-to-global-namespace.solution.ts b/src/07-types-deep-dive/48-appending-to-global-namespace.solution.ts
new file mode 100644
index 0000000..a102b88
--- /dev/null
+++ b/src/07-types-deep-dive/48-appending-to-global-namespace.solution.ts
@@ -0,0 +1,14 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+declare global {
+  namespace React {
+    // Note that it doesn't need to be exported
+    interface MySolutionInterface {
+      foo: string;
+    }
+  }
+}
+
+type test = Expect<Equal<React.MySolutionInterface, { foo: string }>>;
+
+export {};
diff --git a/src/07-types-deep-dive/49-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/49-add-attribute-to-all-elements.problem.tsx
deleted file mode 100644
index 9c50318..0000000
--- a/src/07-types-deep-dive/49-add-attribute-to-all-elements.problem.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-declare global {
-  namespace React {
-    interface HTMLAttributes<T> {
-      someCoolAttribute?: string;
-    }
-  }
-
-  interface HTMLDivElement {
-    someCoolAttribute?: string;
-  }
-
-  interface HTMLElement {
-    someOtherAttribute?: string;
-  }
-}
-
-export const example1 = (
-  <div
-    someCoolAttribute="awdawd"
-    onChange={(e) => {
-      console.log(e.currentTarget.someCoolAttribute);
-    }}
-  ></div>
-);
diff --git a/src/07-types-deep-dive/49-declaration-merging-in-global-namespace.problem.ts b/src/07-types-deep-dive/49-declaration-merging-in-global-namespace.problem.ts
new file mode 100644
index 0000000..470f2a0
--- /dev/null
+++ b/src/07-types-deep-dive/49-declaration-merging-in-global-namespace.problem.ts
@@ -0,0 +1,28 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+declare global {
+  namespace React {
+    interface MyAwesomeInterface {
+      foo: string;
+    }
+  }
+}
+
+/**
+ * We can use a feature called declaration merging in TypeScript to
+ * CHANGE interfaces in the global namespace.
+ *
+ * WITHOUT changing the code above, change MyAwesomeInterface to add
+ * a property called 'bar' that is a string.
+ *
+ * Clue: you'll need to use declare global, namespace, and interface
+ * again.
+ *
+ * https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
+ */
+
+type test = Expect<
+  Equal<React.MyAwesomeInterface, { foo: string; bar: string }>
+>;
+
+export {};
diff --git a/src/07-types-deep-dive/49-declaration-merging-in-global-namespace.solution.ts b/src/07-types-deep-dive/49-declaration-merging-in-global-namespace.solution.ts
new file mode 100644
index 0000000..a756472
--- /dev/null
+++ b/src/07-types-deep-dive/49-declaration-merging-in-global-namespace.solution.ts
@@ -0,0 +1,29 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+declare global {
+  namespace React {
+    interface MyAwesomeSolutionInterface {
+      foo: string;
+    }
+  }
+}
+
+/**
+ * By declaring MyAwesomeSolutionInferface for the second time
+ * in the same scope, we can add properties to it.
+ *
+ * The power of declaration merging!
+ */
+declare global {
+  namespace React {
+    interface MyAwesomeSolutionInterface {
+      bar: string;
+    }
+  }
+}
+
+type test = Expect<
+  Equal<React.MyAwesomeSolutionInterface, { foo: string; bar: string }>
+>;
+
+export {};
diff --git a/src/07-types-deep-dive/50-add-attribute-to-audio-elements.problem.tsx b/src/07-types-deep-dive/50-add-attribute-to-audio-elements.problem.tsx
deleted file mode 100644
index 4e52617..0000000
--- a/src/07-types-deep-dive/50-add-attribute-to-audio-elements.problem.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-declare global {
-  namespace React {
-    interface AudioHTMLAttributes<T> {
-      audioOnlyAttr?: string;
-    }
-  }
-}
-
-export const example1 = <audio audioOnlyAttr="awdawd"></audio>;
-
-// @ts-expect-error
-export const example2 = <span audioOnlyAttr="awdawd"></span>;
diff --git a/src/07-types-deep-dive/50-add-new-global-element.problem.tsx b/src/07-types-deep-dive/50-add-new-global-element.problem.tsx
new file mode 100644
index 0000000..d4241d3
--- /dev/null
+++ b/src/07-types-deep-dive/50-add-new-global-element.problem.tsx
@@ -0,0 +1,21 @@
+/**
+ * Let's say we're working with an external library that adds a new
+ * global element to the DOM. We want to strongly type this element
+ * so that it can only be used with the correct attributes.
+ *
+ * In this case, we're adding a <something /> element to the DOM,
+ * which takes a required `id` attribute.
+ *
+ * Hint - you'll need to declaration merge with an existing
+ * interface in the React namespace.
+ */
+
+<>
+  <something id="123"></something>
+
+  {/* @ts-expect-error */}
+  <something></something>
+
+  {/* @ts-expect-error */}
+  <something id={123}></something>
+</>;
diff --git a/src/07-types-deep-dive/48-add-new-global-element.solution.tsx b/src/07-types-deep-dive/50-add-new-global-element.solution.tsx
similarity index 57%
rename from src/07-types-deep-dive/48-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/50-add-new-global-element.solution.tsx
index 8a80ab1..a607af0 100644
--- a/src/07-types-deep-dive/48-add-new-global-element.solution.tsx
+++ b/src/07-types-deep-dive/50-add-new-global-element.solution.tsx
@@ -9,11 +9,11 @@ declare global {
 }
 
 <>
-  <something-solution id="123"></something-solution>
+  <something-solution id="123" />
 
   {/* @ts-expect-error */}
-  <something-solution></something-solution>
+  <something-solution />
 
   {/* @ts-expect-error */}
-  <something-solution id={123}></something-solution>
+  <something-solution id={123} />
 </>;
diff --git a/src/07-types-deep-dive/51-add-attribute-to-div-elements.problem.tsx b/src/07-types-deep-dive/51-add-attribute-to-div-elements.problem.tsx
deleted file mode 100644
index a88fda6..0000000
--- a/src/07-types-deep-dive/51-add-attribute-to-div-elements.problem.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-        something?: string;
-      };
-    }
-  }
-}
-
-export const example1 = <div something="awdawd"></div>;
-
-// @ts-expect-error
-export const example2 = <span something="awdawd"></span>;
diff --git a/src/07-types-deep-dive/51-html-attributes.explainer.tsx b/src/07-types-deep-dive/51-html-attributes.explainer.tsx
new file mode 100644
index 0000000..77c80da
--- /dev/null
+++ b/src/07-types-deep-dive/51-html-attributes.explainer.tsx
@@ -0,0 +1,24 @@
+/**
+ * 1. How does React know which HTML attributes can be passed
+ * to each HTML element?
+ *
+ * On which interfaces/types are they stored?
+ */
+
+/**
+ * 2. Try CMD-clicking on the 'div' below. What information
+ * does that give you?
+ */
+<div />;
+
+/**
+ * 3. Try CMD-clicking on the className prop below. What
+ * interface does it lead you to?
+ */
+<div className="foo" />;
+
+/**
+ * 4. Finally, try CMD-clicking on the 'href' prop below.
+ * What interface does it lead you to?
+ */
+<a href="/" />;
diff --git a/src/07-types-deep-dive/52-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/52-add-attribute-to-all-elements.problem.tsx
new file mode 100644
index 0000000..ae9b9f1
--- /dev/null
+++ b/src/07-types-deep-dive/52-add-attribute-to-all-elements.problem.tsx
@@ -0,0 +1,16 @@
+/**
+ * Let's say we wanted to add a new optional attribute to all React
+ * elements. How would we do that?
+ *
+ * 1. Make use of declaration merging in the global scope to add
+ * a new attribute to all React elements.
+ */
+
+<>
+  <div testId="123" />
+  <audio testId="123" />
+  <video testId="123" />
+  <a testId="123" />
+  <abbr testId="123" />
+  <address testId="123" />
+</>;
diff --git a/src/07-types-deep-dive/52-add-attribute-to-all-elements.solution.tsx b/src/07-types-deep-dive/52-add-attribute-to-all-elements.solution.tsx
new file mode 100644
index 0000000..2a12077
--- /dev/null
+++ b/src/07-types-deep-dive/52-add-attribute-to-all-elements.solution.tsx
@@ -0,0 +1,16 @@
+declare global {
+  namespace React {
+    interface HTMLAttributes<T> {
+      solutionTestId?: string;
+    }
+  }
+}
+
+<>
+  <div solutionTestId="123" />
+  <audio solutionTestId="123" />
+  <video solutionTestId="123" />
+  <a solutionTestId="123" />
+  <abbr solutionTestId="123" />
+  <address solutionTestId="123" />
+</>;
diff --git a/src/08-advanced-patterns/52-required-context.problem.tsx b/src/08-advanced-patterns/53-required-context.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/52-required-context.problem.tsx
rename to src/08-advanced-patterns/53-required-context.problem.tsx
diff --git a/src/08-advanced-patterns/52-required-context.solution.1.tsx b/src/08-advanced-patterns/53-required-context.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/52-required-context.solution.1.tsx
rename to src/08-advanced-patterns/53-required-context.solution.1.tsx
diff --git a/src/08-advanced-patterns/52-required-context.solution.2.tsx b/src/08-advanced-patterns/53-required-context.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/52-required-context.solution.2.tsx
rename to src/08-advanced-patterns/53-required-context.solution.2.tsx
diff --git a/src/08-advanced-patterns/53-compound-components.problem.tsx b/src/08-advanced-patterns/54-compound-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/53-compound-components.problem.tsx
rename to src/08-advanced-patterns/54-compound-components.problem.tsx
diff --git a/src/08-advanced-patterns/54-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/54-forward-ref-with-generics.explainer.1.tsx
rename to src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/08-advanced-patterns/54-forward-ref-with-generics.explainer.2.tsx b/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/54-forward-ref-with-generics.explainer.2.tsx
rename to src/08-advanced-patterns/55-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/08-advanced-patterns/55-hoc-problem.tsx b/src/08-advanced-patterns/56-hoc-problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/55-hoc-problem.tsx
rename to src/08-advanced-patterns/56-hoc-problem.tsx
diff --git a/src/08-advanced-patterns/56-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/57-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/56-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/57-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/56-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/56-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/56-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/56-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/08-advanced-patterns/57-as-prop.problem.tsx b/src/08-advanced-patterns/58-as-prop.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-as-prop.problem.tsx
rename to src/08-advanced-patterns/58-as-prop.problem.tsx
diff --git a/src/08-advanced-patterns/57-as-prop.solution.1.tsx b/src/08-advanced-patterns/58-as-prop.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/58-as-prop.solution.1.tsx
diff --git a/src/08-advanced-patterns/57-as-prop.solution.2.tsx b/src/08-advanced-patterns/58-as-prop.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/58-as-prop.solution.2.tsx
diff --git a/src/08-advanced-patterns/58-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/58-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx
diff --git a/src/08-advanced-patterns/58-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/58-as-prop-with-custom-components.solution.tsx
rename to src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx
diff --git a/src/08-advanced-patterns/59-render-props.problem.tsx b/src/08-advanced-patterns/60-render-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/59-render-props.problem.tsx
rename to src/08-advanced-patterns/60-render-props.problem.tsx
diff --git a/src/08-advanced-patterns/60-render-props-with-generics.problem.tsx b/src/08-advanced-patterns/61-render-props-with-generics.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/60-render-props-with-generics.problem.tsx
rename to src/08-advanced-patterns/61-render-props-with-generics.problem.tsx
diff --git a/src/09-external-libraries/61-react-hook-form.explainer.tsx b/src/09-external-libraries/62-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/61-react-hook-form.explainer.tsx
rename to src/09-external-libraries/62-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/62-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/63-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/62-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/63-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/62-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/63-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/62-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/63-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/63-react-select.problem.tsx b/src/09-external-libraries/64-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/63-react-select.problem.tsx
rename to src/09-external-libraries/64-react-select.problem.tsx
diff --git a/src/09-external-libraries/63-react-select.solution.tsx b/src/09-external-libraries/64-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/63-react-select.solution.tsx
rename to src/09-external-libraries/64-react-select.solution.tsx
diff --git a/src/09-external-libraries/64-react-query.explainer.ts b/src/09-external-libraries/65-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/64-react-query.explainer.ts
rename to src/09-external-libraries/65-react-query.explainer.ts
diff --git a/src/09-external-libraries/65-react-query-wrapper.problem.ts b/src/09-external-libraries/66-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/65-react-query-wrapper.problem.ts
rename to src/09-external-libraries/66-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/65-react-query-wrapper.solution.ts b/src/09-external-libraries/66-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/65-react-query-wrapper.solution.ts
rename to src/09-external-libraries/66-react-query-wrapper.solution.ts
diff --git a/src/09-external-libraries/66-reusable-form-library-with-zod.problem.tsx b/src/09-external-libraries/67-reusable-form-library-with-zod.problem.tsx
similarity index 100%
rename from src/09-external-libraries/66-reusable-form-library-with-zod.problem.tsx
rename to src/09-external-libraries/67-reusable-form-library-with-zod.problem.tsx
diff --git a/src/09-external-libraries/67-generic-localstorage-hook-with-zod.problem.tsx b/src/09-external-libraries/68-generic-localstorage-hook-with-zod.problem.tsx
similarity index 100%
rename from src/09-external-libraries/67-generic-localstorage-hook-with-zod.problem.tsx
rename to src/09-external-libraries/68-generic-localstorage-hook-with-zod.problem.tsx
diff --git a/src/09-external-libraries/67-generic-localstorage-hook-with-zod.solution.tsx b/src/09-external-libraries/68-generic-localstorage-hook-with-zod.solution.tsx
similarity index 100%
rename from src/09-external-libraries/67-generic-localstorage-hook-with-zod.solution.tsx
rename to src/09-external-libraries/68-generic-localstorage-hook-with-zod.solution.tsx

From c5007e7e3ae86c6e66068003737fefeb0dafdd84 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 8 Jun 2023 14:17:12 +0100
Subject: [PATCH 023/165] Fixed 39 solution

---
 src/06-advanced-hooks/39-unions-in-usestate.solution.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/06-advanced-hooks/39-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/39-unions-in-usestate.solution.tsx
index 6d2c674..9a7a690 100644
--- a/src/06-advanced-hooks/39-unions-in-usestate.solution.tsx
+++ b/src/06-advanced-hooks/39-unions-in-usestate.solution.tsx
@@ -2,6 +2,8 @@ import { useEffect, useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 import { appendVideoToDomAndPlay, fetchVideo } from "fake-external-lib";
 
+type State = "loading" | "loaded" | "error";
+
 export const useLoadAsyncVideo = (src: string) => {
   const [state, setState] = useState<State>("loading");
 

From 7e23e51ee101743c4e5df21e986d20c5686ba11f Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 8 Jun 2023 15:11:18 +0100
Subject: [PATCH 024/165] More reorganisation and added HOC and render props

---
 .../36-lazy-load-component.problem.tsx        |  4 +-
 .../36-lazy-load-component.solution.tsx       |  9 ++-
 .../54-render-props.problem.tsx               | 55 +++++++++++++++++++
 .../54-render-props.solution.tsx              | 50 +++++++++++++++++
 src/08-advanced-patterns/56-hoc-problem.tsx   |  0
 src/08-advanced-patterns/56-hoc.problem.tsx   | 31 +++++++++++
 src/08-advanced-patterns/56-hoc.solution.tsx  | 33 +++++++++++
 ...-components-with-same-props.solution.1.tsx |  2 +-
 ...-components-with-same-props.solution.2.tsx |  2 +-
 .../60-render-props.problem.tsx               |  0
 .../61-render-props-with-generics.problem.tsx |  0
 ...r.tsx => 60-react-hook-form.explainer.tsx} |  0
 ...=> 61-react-hook-form-wrapper.problem.tsx} |  0
 ...> 61-react-hook-form-wrapper.solution.tsx} |  0
 ...roblem.tsx => 62-react-select.problem.tsx} |  0
 ...ution.tsx => 62-react-select.solution.tsx} |  0
 ...plainer.ts => 63-react-query.explainer.ts} |  0
 ...m.ts => 64-react-query-wrapper.problem.ts} |  0
 ....ts => 64-react-query-wrapper.solution.ts} |  0
 ...eusable-form-library-with-zod.problem.tsx} |  0
 ...ic-localstorage-hook-with-zod.problem.tsx} |  0
 ...c-localstorage-hook-with-zod.solution.tsx} |  0
 ...reusable-form-library-with-zod.problem.tsx |  0
 src/fake-external-lib/index.ts                | 18 ++++++
 24 files changed, 197 insertions(+), 7 deletions(-)
 create mode 100644 src/08-advanced-patterns/54-render-props.problem.tsx
 create mode 100644 src/08-advanced-patterns/54-render-props.solution.tsx
 delete mode 100644 src/08-advanced-patterns/56-hoc-problem.tsx
 create mode 100644 src/08-advanced-patterns/56-hoc.problem.tsx
 create mode 100644 src/08-advanced-patterns/56-hoc.solution.tsx
 delete mode 100644 src/08-advanced-patterns/60-render-props.problem.tsx
 delete mode 100644 src/08-advanced-patterns/61-render-props-with-generics.problem.tsx
 rename src/09-external-libraries/{62-react-hook-form.explainer.tsx => 60-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{63-react-hook-form-wrapper.problem.tsx => 61-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{63-react-hook-form-wrapper.solution.tsx => 61-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{64-react-select.problem.tsx => 62-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{64-react-select.solution.tsx => 62-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{65-react-query.explainer.ts => 63-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{66-react-query-wrapper.problem.ts => 64-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{66-react-query-wrapper.solution.ts => 64-react-query-wrapper.solution.ts} (100%)
 rename src/{08-advanced-patterns/54-compound-components.problem.tsx => 09-external-libraries/65-reusable-form-library-with-zod.problem.tsx} (100%)
 rename src/09-external-libraries/{68-generic-localstorage-hook-with-zod.problem.tsx => 66-generic-localstorage-hook-with-zod.problem.tsx} (100%)
 rename src/09-external-libraries/{68-generic-localstorage-hook-with-zod.solution.tsx => 66-generic-localstorage-hook-with-zod.solution.tsx} (100%)
 delete mode 100644 src/09-external-libraries/67-reusable-form-library-with-zod.problem.tsx

diff --git a/src/05-generics/36-lazy-load-component.problem.tsx b/src/05-generics/36-lazy-load-component.problem.tsx
index c0ce47a..9deb327 100644
--- a/src/05-generics/36-lazy-load-component.problem.tsx
+++ b/src/05-generics/36-lazy-load-component.problem.tsx
@@ -11,8 +11,8 @@ type Props = {
  * But it's not typed correctly, and it's not generic enough.
  * Fix the typing errors, and make it generic enough to support any component.
  *
- * Hint - React.ComponentProps will come in handy! The solution also includes
- * one 'as any'.
+ * Hint - React.ComponentProps will come in handy - as will a helper called
+ * React.ComponentType.
  */
 function LazyLoad({ loader, ...props }: Props) {
   const LazyComponent = useMemo(() => lazy(loader), [loader]);
diff --git a/src/05-generics/36-lazy-load-component.solution.tsx b/src/05-generics/36-lazy-load-component.solution.tsx
index d02ec5b..c36e4a2 100644
--- a/src/05-generics/36-lazy-load-component.solution.tsx
+++ b/src/05-generics/36-lazy-load-component.solution.tsx
@@ -1,15 +1,18 @@
 import { lazy, Suspense, useMemo } from "react";
 
-type Props<C extends React.FC<any>> = React.ComponentProps<C> & {
+type Props<C extends React.ComponentType<any>> = React.ComponentProps<C> & {
   loader: () => Promise<{ default: C }>;
 };
 
-function LazyLoad<C extends React.FC<any>>({ loader, ...props }: Props<C>) {
+function LazyLoad<C extends React.ComponentType<any>>({
+  loader,
+  ...props
+}: Props<C>) {
   const LazyComponent = useMemo(() => lazy(loader), [loader]);
 
   return (
     <Suspense fallback={"Loading..."}>
-      <LazyComponent {...(props as any)} />
+      <LazyComponent {...props} />
     </Suspense>
   );
 }
diff --git a/src/08-advanced-patterns/54-render-props.problem.tsx b/src/08-advanced-patterns/54-render-props.problem.tsx
new file mode 100644
index 0000000..e31815f
--- /dev/null
+++ b/src/08-advanced-patterns/54-render-props.problem.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * In this exercise, we're going to create a Modal component that uses the
+ * render props pattern. The Modal component should accept a render prop
+ * function that provides ModalChildProps.
+ *
+ * 1. Change the type of the props the Modal component accepts so that it
+ * accepts a render prop function providing ModalChildProps.
+ */
+
+interface ModalChildProps {
+  isOpen: boolean;
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+const Modal = ({ children }: any) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      {children({
+        isOpen,
+        openModal: () => setIsOpen(true),
+        closeModal: () => setIsOpen(false),
+      })}
+      {createPortal(
+        <div>
+          <h1>Modal</h1>
+        </div>,
+        document.getElementById("modal-root")!,
+      )}
+    </>
+  );
+};
+
+const Parent = () => {
+  return (
+    <Modal>
+      {(props) => {
+        type test = Expect<Equal<typeof props, ModalChildProps>>;
+
+        return (
+          <>
+            <button onClick={props.openModal}>Open Modal</button>
+            <button onClick={props.closeModal}>Close Modal</button>
+          </>
+        );
+      }}
+    </Modal>
+  );
+};
diff --git a/src/08-advanced-patterns/54-render-props.solution.tsx b/src/08-advanced-patterns/54-render-props.solution.tsx
new file mode 100644
index 0000000..8b3ffc1
--- /dev/null
+++ b/src/08-advanced-patterns/54-render-props.solution.tsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface ModalChildProps {
+  isOpen: boolean;
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+const Modal = ({
+  children,
+}: {
+  children: (props: ModalChildProps) => React.ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      {children({
+        isOpen,
+        openModal: () => setIsOpen(true),
+        closeModal: () => setIsOpen(false),
+      })}
+      {createPortal(
+        <div>
+          <h1>Modal</h1>
+        </div>,
+        document.getElementById("modal-root")!,
+      )}
+    </>
+  );
+};
+
+const Parent = () => {
+  return (
+    <Modal>
+      {(props) => {
+        type test = Expect<Equal<typeof props, ModalChildProps>>;
+
+        return (
+          <>
+            <button onClick={props.openModal}>Open Modal</button>
+            <button onClick={props.closeModal}>Close Modal</button>
+          </>
+        );
+      }}
+    </Modal>
+  );
+};
diff --git a/src/08-advanced-patterns/56-hoc-problem.tsx b/src/08-advanced-patterns/56-hoc-problem.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/08-advanced-patterns/56-hoc.problem.tsx b/src/08-advanced-patterns/56-hoc.problem.tsx
new file mode 100644
index 0000000..70e4167
--- /dev/null
+++ b/src/08-advanced-patterns/56-hoc.problem.tsx
@@ -0,0 +1,31 @@
+import { Router, useRouter } from "fake-external-lib";
+
+export const withRouter = (Component: any) => {
+  const NewComponent = (props: any) => {
+    const router = useRouter();
+    return <Component {...props} router={router} />;
+  };
+
+  NewComponent.displayName = `withRouter(${Component.displayName})`;
+
+  return NewComponent;
+};
+
+const UnwrappedComponent = (props: { router: Router; id: string }) => {
+  return null;
+};
+
+const WrappedComponent = withRouter(UnwrappedComponent);
+
+<>
+  {/* @ts-expect-error needs a router! */}
+  <UnwrappedComponent id="123" />
+
+  {/* Doesn't need a router passed in! */}
+  <WrappedComponent id="123" />
+
+  <WrappedComponent
+    // @ts-expect-error id must be the correct property
+    id={123}
+  />
+</>;
diff --git a/src/08-advanced-patterns/56-hoc.solution.tsx b/src/08-advanced-patterns/56-hoc.solution.tsx
new file mode 100644
index 0000000..6254800
--- /dev/null
+++ b/src/08-advanced-patterns/56-hoc.solution.tsx
@@ -0,0 +1,33 @@
+import { Router, useRouter } from "fake-external-lib";
+
+export const withRouter = <TProps extends { router: Router }>(
+  Component: React.ComponentType<TProps>,
+) => {
+  const NewComponent = (props: Omit<TProps, "router">) => {
+    const router = useRouter();
+    return <Component {...(props as TProps)} router={router} />;
+  };
+
+  NewComponent.displayName = `withRouter(${Component.displayName})`;
+
+  return NewComponent;
+};
+
+const UnwrappedComponent = (props: { router: Router; id: string }) => {
+  return null;
+};
+
+const WrappedComponent = withRouter(UnwrappedComponent);
+
+<>
+  {/* @ts-expect-error needs a router! */}
+  <UnwrappedComponent id="123" />
+
+  {/* Doesn't need a router passed in! */}
+  <WrappedComponent id="123" />
+
+  <WrappedComponent
+    // @ts-expect-error id must be the correct property
+    id={123}
+  />
+</>;
diff --git a/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx
index 79c1baa..720c856 100644
--- a/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx
+++ b/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx
@@ -8,7 +8,7 @@ type Input = "text" | "number" | "password";
  * We can do it by typing Input and making COMPONENTS
  * restricted to only those inputs.
  */
-const COMPONENTS: Record<Input, React.FC<InputProps>> = {
+const COMPONENTS: Record<Input, React.ComponentType<InputProps>> = {
   text: (props) => {
     return <input {...props} type="text" />;
   },
diff --git a/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx
index a1c689b..cdaca00 100644
--- a/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx
+++ b/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx
@@ -16,7 +16,7 @@ const COMPONENTS = {
   password: (props) => {
     return <input {...props} type="password" />;
   },
-} satisfies Record<string, React.FC<InputProps>>;
+} satisfies Record<string, React.ComponentType<InputProps>>;
 
 /**
  * Then, we can derive the type of input from the
diff --git a/src/08-advanced-patterns/60-render-props.problem.tsx b/src/08-advanced-patterns/60-render-props.problem.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/08-advanced-patterns/61-render-props-with-generics.problem.tsx b/src/08-advanced-patterns/61-render-props-with-generics.problem.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/09-external-libraries/62-react-hook-form.explainer.tsx b/src/09-external-libraries/60-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/62-react-hook-form.explainer.tsx
rename to src/09-external-libraries/60-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/63-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/61-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/63-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/61-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/63-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/61-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/63-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/61-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/64-react-select.problem.tsx b/src/09-external-libraries/62-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/64-react-select.problem.tsx
rename to src/09-external-libraries/62-react-select.problem.tsx
diff --git a/src/09-external-libraries/64-react-select.solution.tsx b/src/09-external-libraries/62-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/64-react-select.solution.tsx
rename to src/09-external-libraries/62-react-select.solution.tsx
diff --git a/src/09-external-libraries/65-react-query.explainer.ts b/src/09-external-libraries/63-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/65-react-query.explainer.ts
rename to src/09-external-libraries/63-react-query.explainer.ts
diff --git a/src/09-external-libraries/66-react-query-wrapper.problem.ts b/src/09-external-libraries/64-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/66-react-query-wrapper.problem.ts
rename to src/09-external-libraries/64-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/66-react-query-wrapper.solution.ts b/src/09-external-libraries/64-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/66-react-query-wrapper.solution.ts
rename to src/09-external-libraries/64-react-query-wrapper.solution.ts
diff --git a/src/08-advanced-patterns/54-compound-components.problem.tsx b/src/09-external-libraries/65-reusable-form-library-with-zod.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/54-compound-components.problem.tsx
rename to src/09-external-libraries/65-reusable-form-library-with-zod.problem.tsx
diff --git a/src/09-external-libraries/68-generic-localstorage-hook-with-zod.problem.tsx b/src/09-external-libraries/66-generic-localstorage-hook-with-zod.problem.tsx
similarity index 100%
rename from src/09-external-libraries/68-generic-localstorage-hook-with-zod.problem.tsx
rename to src/09-external-libraries/66-generic-localstorage-hook-with-zod.problem.tsx
diff --git a/src/09-external-libraries/68-generic-localstorage-hook-with-zod.solution.tsx b/src/09-external-libraries/66-generic-localstorage-hook-with-zod.solution.tsx
similarity index 100%
rename from src/09-external-libraries/68-generic-localstorage-hook-with-zod.solution.tsx
rename to src/09-external-libraries/66-generic-localstorage-hook-with-zod.solution.tsx
diff --git a/src/09-external-libraries/67-reusable-form-library-with-zod.problem.tsx b/src/09-external-libraries/67-reusable-form-library-with-zod.problem.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/fake-external-lib/index.ts b/src/fake-external-lib/index.ts
index 615fc28..b8802d4 100644
--- a/src/fake-external-lib/index.ts
+++ b/src/fake-external-lib/index.ts
@@ -20,3 +20,21 @@ export const appendVideoToDomAndPlay = (blob: Blob) => {
   video.src = URL.createObjectURL(blob);
   video.play();
 };
+
+/**
+ * A fake router interface
+ */
+export interface Router {
+  push: (path: string) => void;
+}
+
+/**
+ * A fake useRouter hook
+ */
+export const useRouter = () => {
+  return {
+    push: (path: string) => {
+      console.log(`Navigating to ${path}`);
+    },
+  };
+};

From da56f7d06dc1e96f0c68eddf74fd52526eb45dee Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 8 Jun 2023 15:13:31 +0100
Subject: [PATCH 025/165] Added comment to 64

---
 .../64-react-query-wrapper.problem.ts             | 15 ++++++++++-----
 ...y-with-zod.problem.tsx => 65-zod.explainer.ts} |  0
 2 files changed, 10 insertions(+), 5 deletions(-)
 rename src/09-external-libraries/{65-reusable-form-library-with-zod.problem.tsx => 65-zod.explainer.ts} (100%)

diff --git a/src/09-external-libraries/64-react-query-wrapper.problem.ts b/src/09-external-libraries/64-react-query-wrapper.problem.ts
index d3ec201..9c81273 100644
--- a/src/09-external-libraries/64-react-query-wrapper.problem.ts
+++ b/src/09-external-libraries/64-react-query-wrapper.problem.ts
@@ -1,11 +1,16 @@
-import {
-  QueryFunctionContext,
-  QueryKey,
-  useQuery,
-} from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useAuthToken } from "fake-external-lib";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * Here, we're attempting to create a wrapper around react-query's useQuery
+ * hook. We're doing that so we can inject the auth token into the queryFn
+ * without having to pass it in every time.
+ *
+ * 1. Change the type definitions of useApi to fix the errors below. Where
+ * possible, use types from react-query to describe the types of the
+ * parameters.
+ */
 const useApi = (
   queryKey: any[],
   queryFn: (key: any, token: string) => Promise<any>,
diff --git a/src/09-external-libraries/65-reusable-form-library-with-zod.problem.tsx b/src/09-external-libraries/65-zod.explainer.ts
similarity index 100%
rename from src/09-external-libraries/65-reusable-form-library-with-zod.problem.tsx
rename to src/09-external-libraries/65-zod.explainer.ts

From 63603dc2597b1efbbaf4bd64bb24f096aaa67fe9 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 8 Jun 2023 17:15:26 +0100
Subject: [PATCH 026/165] Added more explanation to forwardRef

---
 ...-forward-ref-with-generics.explainer.1.tsx | 23 ++++++-
 ...5-forward-ref-with-generics.explainer.3.ts | 63 +++++++++++++++++++
 2 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 src/08-advanced-patterns/55-forward-ref-with-generics.explainer.3.ts

diff --git a/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx
index bccbc84..12829e0 100644
--- a/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx
+++ b/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx
@@ -6,12 +6,31 @@ type Props<T> = {
   renderRow: (item: T) => React.ReactNode;
 };
 
+/**
+ * Try uncommenting the following code. You'll see that the type of the `row`
+ * prop is inferred to be `string`.
+ *
+ * This suggestion is from Stefan Baumgartner:
+ *
+ * https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref
+ */
+
 // declare module "react" {
 //   function forwardRef<T, P = {}>(
-//     render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,
-//   ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+//     render: (props: P, ref: React.Ref<T>) => React.ReactNode | null,
+//   ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
 // }
 
+/**
+ * By ditching defaultProps and propTypes on the type passed ro render,
+ * we can make use of something called 'higher order function type
+ * inference':
+ *
+ * https://github.com/microsoft/TypeScript/pull/30215
+ *
+ * By doing it this way, we preserve the generic context of the function
+ * being passed in.
+ */
 export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
   return null;
 };
diff --git a/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.3.ts b/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.3.ts
new file mode 100644
index 0000000..873f796
--- /dev/null
+++ b/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.3.ts
@@ -0,0 +1,63 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * Here's a detailed breakdown on why forwardRef doesn't work.
+ */
+
+/**
+ * 1. We create a type that represents a function, but with
+ * some other attributes.
+ */
+type FuncExpected<Argument> = {
+  (arg: Argument): Argument;
+  someOtherThing?: string;
+};
+
+/**
+ * 2. We create a function that takes a function as an argument,
+ * and infers the position of Argument.
+ *
+ * This function doesn't do anything at runtime - it just returns
+ * the function that was passed in. But it behaves similarly to
+ * forwardRef.
+ */
+const forwardRefShim = <Argument>(func: FuncExpected<Argument>) => {
+  return (arg: Argument) => func(arg);
+};
+
+/**
+ * 3. We create an identity function, that just takes in an argument
+ * and returns it.
+ */
+const identityFunc = <Argument>(arg: Argument) => {
+  return arg;
+};
+
+/**
+ * 4. As you can see, when it's not wrapped, identityFunc returns
+ * the type that we pass in, 123.
+ */
+const result1 = identityFunc(123);
+
+type test1 = Expect<Equal<typeof result1, 123>>;
+
+/**
+ * 5. But when we wrap it in forwardRefShim, it loses its powers
+ * of inference! Just like forwardRef.
+ */
+const wrappedIdentityFunc = forwardRefShim(identityFunc);
+
+const result2 = wrappedIdentityFunc(123);
+
+type test2 = Expect<Equal<typeof result2, 123>>;
+
+/**
+ * 6. Here's the really crazy part. Go back up to FuncExpected.
+ * Comment out the someOtherThing property.
+ *
+ * It now works! This is because when a function is _just_ a function,
+ * TypeScript uses its higher-order function powers on it. But when
+ * it has other properties, it doesn't.
+ *
+ * Bizarre!
+ */

From 57b27efb55454298ef37a2815f12b1f57e7ef393 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Fri, 9 Jun 2023 14:57:31 +0100
Subject: [PATCH 027/165] Added more comments

---
 .../53-required-context.problem.tsx           | 13 ++++++++
 src/08-advanced-patterns/56-hoc.problem.tsx   | 15 +++++++++
 .../58-as-prop.problem.tsx                    | 32 ++++++++++++++++---
 .../58-as-prop.solution.1.tsx                 |  8 ++---
 .../58-as-prop.solution.2.tsx                 |  8 ++---
 ...as-prop-with-custom-components.problem.tsx | 13 ++++++--
 ...s-prop-with-custom-components.solution.tsx | 10 ++----
 7 files changed, 78 insertions(+), 21 deletions(-)

diff --git a/src/08-advanced-patterns/53-required-context.problem.tsx b/src/08-advanced-patterns/53-required-context.problem.tsx
index 18c25e5..1b0726b 100644
--- a/src/08-advanced-patterns/53-required-context.problem.tsx
+++ b/src/08-advanced-patterns/53-required-context.problem.tsx
@@ -1,6 +1,19 @@
 import React from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * Let's take a look at Context in React. Here, we're creating
+ * an abstraction that lets us create a context without having
+ * to worry about the context value being null.
+ *
+ * As you can see, it exposes a special useContext hook and
+ * a Provider component that we can use to wrap our application.
+ *
+ * But currently, it's not inferring any type information from our
+ * createRequiredContext function.
+ *
+ * 1. See if you can fix it!
+ */
 const createRequiredContext = () => {
   const context = React.createContext(null);
 
diff --git a/src/08-advanced-patterns/56-hoc.problem.tsx b/src/08-advanced-patterns/56-hoc.problem.tsx
index 70e4167..fa071f1 100644
--- a/src/08-advanced-patterns/56-hoc.problem.tsx
+++ b/src/08-advanced-patterns/56-hoc.problem.tsx
@@ -1,5 +1,20 @@
 import { Router, useRouter } from "fake-external-lib";
 
+/**
+ * A higher-order component is a function that takes a component and returns a
+ * new component, with some additional props/behavior.
+ *
+ * In this case, we want to take a component that doesn't have a router prop,
+ * and add one.
+ *
+ * 1. Figure out the correct typings for the `withRouter` function. You'll
+ * need to use:
+ *
+ * - Generics
+ * - Omit
+ * - React.ComponentType
+ * - Probably an 'as' at least once
+ */
 export const withRouter = (Component: any) => {
   const NewComponent = (props: any) => {
     const router = useRouter();
diff --git a/src/08-advanced-patterns/58-as-prop.problem.tsx b/src/08-advanced-patterns/58-as-prop.problem.tsx
index 6aeeeca..8148328 100644
--- a/src/08-advanced-patterns/58-as-prop.problem.tsx
+++ b/src/08-advanced-patterns/58-as-prop.problem.tsx
@@ -1,16 +1,40 @@
-export const Component = (props: any) => {
+/**
+ * The 'as' prop is notorious for being difficult to type correctly.
+ *
+ * Here, we've created a component that takes an 'as' prop. The 'as' prop
+ * is a string representing the HTML tag to render. The component will
+ * render that tag, and pass all the other props through.
+ *
+ * BUT currently the types of the props that go along with the 'as' prop
+ * are not inferred correctly.
+ *
+ * I've found two solutions. The first uses an IIMT:
+ *
+ * https://www.totaltypescript.com/immediately-indexed-mapped-type
+ *
+ * The second uses a generic type.
+ *
+ * Both solutions make use of:
+ *
+ * - JSX.IntrinsicElements
+ * - keyof
+ * - 'as'
+ * - Indexed access types
+ */
+
+export const Wrapper = (props: any) => {
   const Comp = props.as;
   return <Comp {...(props as any)}></Comp>;
 };
 
 // Should work, and you should get autocomplete on the
 // props for the 'a' tag
-const example1 = <Component as="a" href="awdawd"></Component>;
+const example1 = <Wrapper as="a" href="awdawd"></Wrapper>;
 
 const example2 = (
-  <Component
+  <Wrapper
     as="div"
     // @ts-expect-error: Property 'href' does not exist
     href="awdawd"
-  ></Component>
+  ></Wrapper>
 );
diff --git a/src/08-advanced-patterns/58-as-prop.solution.1.tsx b/src/08-advanced-patterns/58-as-prop.solution.1.tsx
index a081ed2..33facb6 100644
--- a/src/08-advanced-patterns/58-as-prop.solution.1.tsx
+++ b/src/08-advanced-patterns/58-as-prop.solution.1.tsx
@@ -4,17 +4,17 @@ type AsProps = {
   } & JSX.IntrinsicElements[K];
 }[keyof JSX.IntrinsicElements];
 
-export const Component = (props: AsProps) => {
+export const Wrapper = (props: AsProps) => {
   const Comp = props.as;
   return <Comp {...(props as any)}></Comp>;
 };
 
-const example1 = <Component as="a" href="awdawd"></Component>;
+const example1 = <Wrapper as="a" href="awdawd"></Wrapper>;
 
 const example2 = (
-  <Component
+  <Wrapper
     as="div"
     // @ts-expect-error: Property 'href' does not exist
     href="awdawd"
-  ></Component>
+  ></Wrapper>
 );
diff --git a/src/08-advanced-patterns/58-as-prop.solution.2.tsx b/src/08-advanced-patterns/58-as-prop.solution.2.tsx
index 6e054b0..35b4b9a 100644
--- a/src/08-advanced-patterns/58-as-prop.solution.2.tsx
+++ b/src/08-advanced-patterns/58-as-prop.solution.2.tsx
@@ -1,4 +1,4 @@
-export const Component = <TAs extends keyof JSX.IntrinsicElements>(
+export const Wrapper = <TAs extends keyof JSX.IntrinsicElements>(
   props: {
     as: TAs;
   } & JSX.IntrinsicElements[TAs],
@@ -8,12 +8,12 @@ export const Component = <TAs extends keyof JSX.IntrinsicElements>(
   return <Comp {...(props as any)}></Comp>;
 };
 
-const example1 = <Component as="a" href="awdawd"></Component>;
+const example1 = <Wrapper as="a" href="awdawd"></Wrapper>;
 
 const example2 = (
-  <Component
+  <Wrapper
     as="div"
     // @ts-expect-error: Property 'href' does not exist
     href="awdawd"
-  ></Component>
+  ></Wrapper>
 );
diff --git a/src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx
index e19c44a..19c5bf2 100644
--- a/src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx
+++ b/src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx
@@ -1,6 +1,15 @@
 import React from "react";
 
-export const Component = (props: { as: unknown }) => {
+/**
+ * This is a further extension of 'as'. This time, we can pass in
+ * _any_ component as a prop, and it'll be rendered with the other
+ * props passed in.
+ *
+ * 1. Figure out the correct typings for the `Wrapper` component.
+ *
+ * The solution uses generics, and the ComponentType helper.
+ */
+export const Wrapper = (props: { as: unknown }) => {
   const Comp = props.as;
   return <Comp {...props}></Comp>;
 };
@@ -9,4 +18,4 @@ const Link = (props: { href: string; children?: React.ReactNode }) => {
   return <a href={props.href}>{props.children}</a>;
 };
 
-<Component as={Link} href="awdawd"></Component>;
+<Wrapper as={Link} href="awdawd"></Wrapper>;
diff --git a/src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx
index 300395e..683f82c 100644
--- a/src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx
+++ b/src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx
@@ -1,8 +1,6 @@
-import React, { ComponentProps, JSXElementConstructor } from "react";
+import React, { ComponentProps, ComponentType } from "react";
 
-export const Component = <
-  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
->(
+export const Wrapper = <T extends ComponentType<any>>(
   props: {
     as: T;
   } & ComponentProps<T>,
@@ -15,6 +13,4 @@ const Link = (props: { href: string; children?: React.ReactNode }) => {
   return <a href={props.href}>{props.children}</a>;
 };
 
-// It works!
-
-<Component as={Link} href="awdawd"></Component>;
+<Wrapper as={Link} href="awdawd"></Wrapper>;

From 0ff460765e029ee31e31d88001fa4c080a789ce4 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Fri, 9 Jun 2023 15:24:47 +0100
Subject: [PATCH 028/165] Added discussions to each section

---
 package-lock.json                             | 79 +------------------
 package.json                                  |  2 +-
 src/04-advanced-props/discussion.md           |  9 +++
 src/05-generics/discussion.md                 | 11 +++
 src/06-advanced-hooks/discussion.md           |  7 ++
 src/07-types-deep-dive/discussion.md          | 13 +++
 src/08-advanced-patterns/discussion.md        |  7 ++
 src/09-external-libraries/65-zod.explainer.ts |  0
 ...ric-localstorage-hook-with-zod.problem.tsx | 35 --------
 ...ic-localstorage-hook-with-zod.solution.tsx | 38 ---------
 10 files changed, 49 insertions(+), 152 deletions(-)
 create mode 100644 src/04-advanced-props/discussion.md
 create mode 100644 src/05-generics/discussion.md
 create mode 100644 src/06-advanced-hooks/discussion.md
 create mode 100644 src/07-types-deep-dive/discussion.md
 create mode 100644 src/08-advanced-patterns/discussion.md
 delete mode 100644 src/09-external-libraries/65-zod.explainer.ts
 delete mode 100644 src/09-external-libraries/66-generic-localstorage-hook-with-zod.problem.tsx
 delete mode 100644 src/09-external-libraries/66-generic-localstorage-hook-with-zod.solution.tsx

diff --git a/package-lock.json b/package-lock.json
index 24f5c1b..2052414 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
       "license": "GPL",
       "dependencies": {
         "@tanstack/react-query": "^4.29.12",
-        "@tanstack/react-table": "^8.9.1",
         "@types/express": "^4.17.13",
         "@types/react": "^18.2.8",
         "@types/react-dom": "^18.2.4",
@@ -19,8 +18,7 @@
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.44.3",
         "react-select": "^5.7.3",
-        "zod": "^3.17.10",
-        "zustand": "^4.3.8"
+        "zod": "^3.21.4"
       },
       "devDependencies": {
         "@total-typescript/exercise-cli": "^0.2.2",
@@ -659,37 +657,6 @@
         }
       }
     },
-    "node_modules/@tanstack/react-table": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.1.tgz",
-      "integrity": "sha512-yHs2m6lk5J5RNcu2dNtsDGux66wNXZjEgzxos6MRCX8gL+nqxeW3ZglqP6eANN0bGElPnjvqiUHGQvdACOr3Cw==",
-      "dependencies": {
-        "@tanstack/table-core": "8.9.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
-    "node_modules/@tanstack/table-core": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.9.1.tgz",
-      "integrity": "sha512-2+R83n8vMZND0q3W1lSiF7co9nFbeWbjAErFf27xwbeA9E0wtUu5ZDfgj+TZ6JzdAEQAgfxkk/QNFAKiS8E4MA==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3783,29 +3750,6 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
-    },
-    "node_modules/zustand": {
-      "version": "4.3.8",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.8.tgz",
-      "integrity": "sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==",
-      "dependencies": {
-        "use-sync-external-store": "1.2.0"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "immer": ">=9.0",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
     }
   },
   "dependencies": {
@@ -4176,19 +4120,6 @@
         "use-sync-external-store": "^1.2.0"
       }
     },
-    "@tanstack/react-table": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.1.tgz",
-      "integrity": "sha512-yHs2m6lk5J5RNcu2dNtsDGux66wNXZjEgzxos6MRCX8gL+nqxeW3ZglqP6eANN0bGElPnjvqiUHGQvdACOr3Cw==",
-      "requires": {
-        "@tanstack/table-core": "8.9.1"
-      }
-    },
-    "@tanstack/table-core": {
-      "version": "8.9.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.9.1.tgz",
-      "integrity": "sha512-2+R83n8vMZND0q3W1lSiF7co9nFbeWbjAErFf27xwbeA9E0wtUu5ZDfgj+TZ6JzdAEQAgfxkk/QNFAKiS8E4MA=="
-    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -6427,14 +6358,6 @@
       "version": "3.21.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
       "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw=="
-    },
-    "zustand": {
-      "version": "4.3.8",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.8.tgz",
-      "integrity": "sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==",
-      "requires": {
-        "use-sync-external-store": "1.2.0"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index 293a3f9..11a58bd 100644
--- a/package.json
+++ b/package.json
@@ -156,6 +156,6 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.3",
     "react-select": "^5.7.3",
-    "zod": "^3.17.10"
+    "zod": "^3.21.4"
   }
 }
diff --git a/src/04-advanced-props/discussion.md b/src/04-advanced-props/discussion.md
new file mode 100644
index 0000000..fdecaf2
--- /dev/null
+++ b/src/04-advanced-props/discussion.md
@@ -0,0 +1,9 @@
+What's the most common issue you see with the way declare prop types in React?
+
+Have you used a discriminated union before? If so, what was your use case?
+
+What problems could you imagine solving with discriminated unions that AREN'T related to React?
+
+What use cases have you seen for the `satisfies` operator?
+
+What's the strangest type error you've ever seen in a React app?
diff --git a/src/05-generics/discussion.md b/src/05-generics/discussion.md
new file mode 100644
index 0000000..6a1240d
--- /dev/null
+++ b/src/05-generics/discussion.md
@@ -0,0 +1,11 @@
+Why doesn't this code work without the comma (in a .tsx file)?
+
+```tsx
+const Component = <T,>() => {};
+```
+
+What problems have you solved with generics that aren't related to React?
+
+What libraries can you think of that rely on generics to do their magic?
+
+What use cases have you seen for `React.ComponentType` and `React.ComponentProps`?
diff --git a/src/06-advanced-hooks/discussion.md b/src/06-advanced-hooks/discussion.md
new file mode 100644
index 0000000..9fbece9
--- /dev/null
+++ b/src/06-advanced-hooks/discussion.md
@@ -0,0 +1,7 @@
+What use cases have you seen for function overloads that aren't related to React?
+
+How are function overloads different to generics? Which are safer? Which are more flexible?
+
+Which do you prefer - discriminated tuples or discriminated unions of objects? Why?
+
+Have you used 'as const' before? If so, what was your use case?
diff --git a/src/07-types-deep-dive/discussion.md b/src/07-types-deep-dive/discussion.md
new file mode 100644
index 0000000..18c267b
--- /dev/null
+++ b/src/07-types-deep-dive/discussion.md
@@ -0,0 +1,13 @@
+What's the difference between React.ComponentType and React.FC?
+
+Do you think it's safe to be editing things in the global namespace?
+
+Can you do declaration merging with types? Or is it only interfaces?
+
+What are some uses for `declare global` outside of React?
+
+Should you be putting your global namespace alterations in a `.d.ts` file, or inside normal `.ts` files?
+
+What cool API's would be possible if you could strongly type children?
+
+What are some use cases for `React.ReactElement`? Is it even useful?
diff --git a/src/08-advanced-patterns/discussion.md b/src/08-advanced-patterns/discussion.md
new file mode 100644
index 0000000..5924982
--- /dev/null
+++ b/src/08-advanced-patterns/discussion.md
@@ -0,0 +1,7 @@
+What use cases can you think of for HOC's that aren't related to React?
+
+Do you have any experience with using libraries that use the 'as' props? What was your experience like?
+
+What are some alternative API's you could use instead of the 'as' prop? (Radix's 'asChild' is an extremely smart workaround for this.)
+
+Are render props and HOC's even useful now we have hooks? What are some use cases for them?
diff --git a/src/09-external-libraries/65-zod.explainer.ts b/src/09-external-libraries/65-zod.explainer.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/09-external-libraries/66-generic-localstorage-hook-with-zod.problem.tsx b/src/09-external-libraries/66-generic-localstorage-hook-with-zod.problem.tsx
deleted file mode 100644
index 5937374..0000000
--- a/src/09-external-libraries/66-generic-localstorage-hook-with-zod.problem.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { it } from "vitest";
-import { Equal, Expect } from "../helpers/type-utils";
-import { z } from "zod";
-
-export const useLocalStorage = <T,>(prefix: string, schema: any) => {
-  const schemaOrNull = schema.nullable();
-  return {
-    get: (key: string): T | null => {
-      return schemaOrNull.parse(
-        JSON.parse(window.localStorage.getItem(prefix + key) || "null"),
-      );
-    },
-    set: (key: string, value: T) => {
-      window.localStorage.setItem(prefix + key, JSON.stringify(value));
-    },
-  };
-};
-
-const user = useLocalStorage("user", z.object({ name: z.string() }));
-
-it("Should let you set and get values", () => {
-  user.set("matt", { name: "Matt" });
-
-  const mattUser = user.get("matt");
-
-  type tests = [Expect<Equal<typeof mattUser, { name: string } | null>>];
-});
-
-it("Should not let you set a value that is not the same type as the type argument passed", () => {
-  user.set(
-    "something",
-    // @ts-expect-error
-    {},
-  );
-});
diff --git a/src/09-external-libraries/66-generic-localstorage-hook-with-zod.solution.tsx b/src/09-external-libraries/66-generic-localstorage-hook-with-zod.solution.tsx
deleted file mode 100644
index 05fc126..0000000
--- a/src/09-external-libraries/66-generic-localstorage-hook-with-zod.solution.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { it } from "vitest";
-import { Equal, Expect } from "../helpers/type-utils";
-import { z } from "zod";
-
-export const useLocalStorage = <TSchema extends z.Schema>(
-  prefix: string,
-  schema: TSchema,
-) => {
-  const schemaOrNull = schema.nullable();
-  return {
-    get: (key: string): z.infer<TSchema> | null => {
-      return schemaOrNull.parse(
-        JSON.parse(window.localStorage.getItem(prefix + key) || "null"),
-      );
-    },
-    set: (key: string, value: z.infer<TSchema>) => {
-      window.localStorage.setItem(prefix + key, JSON.stringify(value));
-    },
-  };
-};
-
-const user = useLocalStorage("user", z.object({ name: z.string() }));
-
-it("Should let you set and get values", () => {
-  user.set("matt", { name: "Matt" });
-
-  const mattUser = user.get("matt");
-
-  type tests = [Expect<Equal<typeof mattUser, { name: string } | null>>];
-});
-
-it("Should not let you set a value that is not the same type as the type argument passed", () => {
-  user.set(
-    "something",
-    // @ts-expect-error
-    {},
-  );
-});

From 2b55c6bdd3eba804168d0a2eae3eb483fa4f5e56 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Fri, 9 Jun 2023 15:27:43 +0100
Subject: [PATCH 029/165] Added final discussion

---
 src/09-external-libraries/discussion.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/09-external-libraries/discussion.md

diff --git a/src/09-external-libraries/discussion.md b/src/09-external-libraries/discussion.md
new file mode 100644
index 0000000..3cff5d5
--- /dev/null
+++ b/src/09-external-libraries/discussion.md
@@ -0,0 +1,16 @@
+Which other libraries have you used with React? What was your experience like creating wrappers for them?
+
+What are some other libraries you can think of that could benefit from a wrapper?
+
+Try installing a third-party library that you love, and explore some of its types. Try to choose one you all know. Write down some of the things you notice - and how the types could be improved.
+
+Some libraries to try:
+
+- zod
+- radix
+- @material/ui
+- react-router
+- react-final-form
+- react-table
+- react-spring
+- framer-motion

From f73001d1072149cf9dc060c3b4be8590602655d3 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 20 Jun 2023 15:13:27 +0100
Subject: [PATCH 030/165] Added more exercises

---
 ...her-all-these-props-or-none.solution.3.tsx | 44 -------------------
 ...roblem.tsx => 25-toggle-props.problem.tsx} |  0
 ...ution.tsx => 25-toggle-props.solution.tsx} |  0
 .../26-empty-object-type.explainer.tsx        | 15 +++++++
 ...ither-all-these-props-or-none.problem.tsx} |  8 ----
 ...er-all-these-props-or-none.solution.1.tsx} |  0
 ...er-all-these-props-or-none.solution.2.tsx} |  0
 ...sx => 29-partial-autocomplete.problem.tsx} |  0
 ...=> 29-partial-autocomplete.solution.1.tsx} |  0
 ...=> 29-partial-autocomplete.solution.2.tsx} |  0
 ...> 30-variants-with-classnames.problem.tsx} |  0
 ... 30-variants-with-classnames.solution.tsx} |  0
 src/04-advanced-props/31-as-const.problem.ts  | 15 +++++++
 src/04-advanced-props/31-as-const.solution.ts | 15 +++++++
 ...-satisfies-vs-annotation-vs-as.problem.tsx | 16 +++++++
 ...satisfies-vs-annotation-vs-as.solution.tsx | 16 +++++++
 ... 33-prop-groups-with-variants.problem.tsx} |  0
 ...-prop-groups-with-variants.solution.1.tsx} |  0
 ...-prop-groups-with-variants.solution.2.tsx} |  0
 ...oblem.tsx => 34-generic-props.problem.tsx} |  0
 ...tion.tsx => 34-generic-props.solution.tsx} |  0
 ...problem.ts => 35-generic-hooks.problem.ts} |  0
 ...on.1.ts => 35-generic-hooks.solution.1.ts} |  0
 ...on.2.ts => 35-generic-hooks.solution.2.ts} |  0
 ...on.3.ts => 35-generic-hooks.solution.3.ts} |  0
 ...on.4.ts => 35-generic-hooks.solution.4.ts} |  0
 ...on.5.ts => 35-generic-hooks.solution.5.ts} |  0
 ...> 36-generic-localstorage-hook.problem.ts} |  0
 ... 36-generic-localstorage-hook.solution.ts} |  0
 ...roblem.tsx => 37-button-group.problem.tsx} |  0
 ...ution.tsx => 37-button-group.solution.tsx} |  0
 ...roblem.tsx => 38-button-group.problem.tsx} |  0
 ...n.1.tsx => 38-button-group.solution.1.tsx} |  0
 ...n.2.tsx => 38-button-group.solution.2.tsx} |  0
 ...tsx => 39-lazy-load-component.problem.tsx} |  0
 ...sx => 39-lazy-load-component.solution.tsx} |  0
 ...erics-vs-discriminated-unions.problem.tsx} |  0
 ...rics-vs-discriminated-unions.solution.tsx} |  0
 ...lem.ts => 41-tuple-return-type.problem.ts} |  0
 ....ts => 41-tuple-return-type.solution.1.ts} |  0
 ....ts => 41-tuple-return-type.solution.2.ts} |  0
 ....tsx => 42-unions-in-usestate.problem.tsx} |  0
 ...tsx => 42-unions-in-usestate.solution.tsx} |  0
 ...criminated-unions-in-usestate.problem.tsx} |  0
 ...riminated-unions-in-usestate.solution.tsx} |  0
 ...ated-tuples-from-custom-hooks.problem.tsx} |  0
 ...ted-tuples-from-custom-hooks.solution.tsx} |  0
 ...m.ts => 45-use-state-overloads.problem.ts} |  0
 ...s => 45-use-state-overloads.solution.1.ts} |  0
 ...s => 45-use-state-overloads.solution.2.ts} |  0
 ...46-function-overloads-in-hooks.problem.ts} |  0
 ...function-overloads-in-hooks.solution.1.ts} |  0
 ...function-overloads-in-hooks.solution.2.ts} |  0
 ...stand-react-namespace-export.explainer.ts} |  0
 ...8-understanding-jsx-element.explainer.tsx} |  0
 ...49-strongly-typing-children.explainer.tsx} |  0
 ...ding-jsx-intrinsic-elements.explainer.tsx} |  0
 ...-appending-to-global-namespace.problem.ts} |  0
 ...appending-to-global-namespace.solution.ts} |  0
 ...on-merging-in-global-namespace.problem.ts} |  0
 ...n-merging-in-global-namespace.solution.ts} |  0
 ... => 53-add-new-global-element.problem.tsx} |  0
 ...=> 53-add-new-global-element.solution.tsx} |  0
 ...r.tsx => 54-html-attributes.explainer.tsx} |  0
 ...add-attribute-to-all-elements.problem.tsx} |  0
 ...dd-attribute-to-all-elements.solution.tsx} |  0
 ...em.tsx => 56-required-context.problem.tsx} |  0
 ...tsx => 56-required-context.solution.1.tsx} |  0
 ...tsx => 56-required-context.solution.2.tsx} |  0
 ...roblem.tsx => 57-render-props.problem.tsx} |  0
 ...ution.tsx => 57-render-props.solution.tsx} |  0
 ...forward-ref-with-generics.explainer.1.tsx} |  0
 ...forward-ref-with-generics.explainer.2.tsx} |  0
 ...-forward-ref-with-generics.explainer.3.ts} |  0
 ...{56-hoc.problem.tsx => 59-hoc.problem.tsx} |  0
 ...6-hoc.solution.tsx => 59-hoc.solution.tsx} |  0
 ...of-components-with-same-props.problem.tsx} |  0
 ...components-with-same-props.solution.1.tsx} |  0
 ...components-with-same-props.solution.2.tsx} |  0
 ...rop.problem.tsx => 61-as-prop.problem.tsx} |  0
 ...lution.1.tsx => 61-as-prop.solution.1.tsx} |  0
 ...lution.2.tsx => 61-as-prop.solution.2.tsx} |  0
 ...s-prop-with-custom-components.problem.tsx} |  0
 ...-prop-with-custom-components.solution.tsx} |  0
 ...r.tsx => 63-react-hook-form.explainer.tsx} |  0
 ...=> 64-react-hook-form-wrapper.problem.tsx} |  0
 ...> 64-react-hook-form-wrapper.solution.tsx} |  0
 ...roblem.tsx => 65-react-select.problem.tsx} |  0
 ...ution.tsx => 65-react-select.solution.tsx} |  0
 ...plainer.ts => 66-react-query.explainer.ts} |  0
 ...m.ts => 67-react-query-wrapper.problem.ts} |  0
 ....ts => 67-react-query-wrapper.solution.ts} |  0
 92 files changed, 77 insertions(+), 52 deletions(-)
 delete mode 100644 src/04-advanced-props/25-either-all-these-props-or-none.solution.3.tsx
 rename src/04-advanced-props/{26-toggle-props.problem.tsx => 25-toggle-props.problem.tsx} (100%)
 rename src/04-advanced-props/{26-toggle-props.solution.tsx => 25-toggle-props.solution.tsx} (100%)
 create mode 100644 src/04-advanced-props/26-empty-object-type.explainer.tsx
 rename src/04-advanced-props/{25-either-all-these-props-or-none.problem.tsx => 27-either-all-these-props-or-none.problem.tsx} (83%)
 rename src/04-advanced-props/{25-either-all-these-props-or-none.solution.1.tsx => 27-either-all-these-props-or-none.solution.1.tsx} (100%)
 rename src/04-advanced-props/{25-either-all-these-props-or-none.solution.2.tsx => 27-either-all-these-props-or-none.solution.2.tsx} (100%)
 rename src/04-advanced-props/{27-partial-autocomplete.problem.tsx => 29-partial-autocomplete.problem.tsx} (100%)
 rename src/04-advanced-props/{27-partial-autocomplete.solution.1.tsx => 29-partial-autocomplete.solution.1.tsx} (100%)
 rename src/04-advanced-props/{27-partial-autocomplete.solution.2.tsx => 29-partial-autocomplete.solution.2.tsx} (100%)
 rename src/04-advanced-props/{29-variants-with-classnames.problem.tsx => 30-variants-with-classnames.problem.tsx} (100%)
 rename src/04-advanced-props/{29-variants-with-classnames.solution.tsx => 30-variants-with-classnames.solution.tsx} (100%)
 create mode 100644 src/04-advanced-props/31-as-const.problem.ts
 create mode 100644 src/04-advanced-props/31-as-const.solution.ts
 create mode 100644 src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx
 create mode 100644 src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx
 rename src/04-advanced-props/{30-prop-groups-with-variants.problem.tsx => 33-prop-groups-with-variants.problem.tsx} (100%)
 rename src/04-advanced-props/{30-prop-groups-with-variants.solution.1.tsx => 33-prop-groups-with-variants.solution.1.tsx} (100%)
 rename src/04-advanced-props/{30-prop-groups-with-variants.solution.2.tsx => 33-prop-groups-with-variants.solution.2.tsx} (100%)
 rename src/05-generics/{31-generic-props.problem.tsx => 34-generic-props.problem.tsx} (100%)
 rename src/05-generics/{31-generic-props.solution.tsx => 34-generic-props.solution.tsx} (100%)
 rename src/05-generics/{32-generic-hooks.problem.ts => 35-generic-hooks.problem.ts} (100%)
 rename src/05-generics/{32-generic-hooks.solution.1.ts => 35-generic-hooks.solution.1.ts} (100%)
 rename src/05-generics/{32-generic-hooks.solution.2.ts => 35-generic-hooks.solution.2.ts} (100%)
 rename src/05-generics/{32-generic-hooks.solution.3.ts => 35-generic-hooks.solution.3.ts} (100%)
 rename src/05-generics/{32-generic-hooks.solution.4.ts => 35-generic-hooks.solution.4.ts} (100%)
 rename src/05-generics/{32-generic-hooks.solution.5.ts => 35-generic-hooks.solution.5.ts} (100%)
 rename src/05-generics/{33-generic-localstorage-hook.problem.ts => 36-generic-localstorage-hook.problem.ts} (100%)
 rename src/05-generics/{33-generic-localstorage-hook.solution.ts => 36-generic-localstorage-hook.solution.ts} (100%)
 rename src/05-generics/{34-button-group.problem.tsx => 37-button-group.problem.tsx} (100%)
 rename src/05-generics/{34-button-group.solution.tsx => 37-button-group.solution.tsx} (100%)
 rename src/05-generics/{35-button-group.problem.tsx => 38-button-group.problem.tsx} (100%)
 rename src/05-generics/{35-button-group.solution.1.tsx => 38-button-group.solution.1.tsx} (100%)
 rename src/05-generics/{35-button-group.solution.2.tsx => 38-button-group.solution.2.tsx} (100%)
 rename src/05-generics/{36-lazy-load-component.problem.tsx => 39-lazy-load-component.problem.tsx} (100%)
 rename src/05-generics/{36-lazy-load-component.solution.tsx => 39-lazy-load-component.solution.tsx} (100%)
 rename src/05-generics/{37-generics-vs-discriminated-unions.problem.tsx => 40-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/05-generics/{37-generics-vs-discriminated-unions.solution.tsx => 40-generics-vs-discriminated-unions.solution.tsx} (100%)
 rename src/06-advanced-hooks/{38-tuple-return-type.problem.ts => 41-tuple-return-type.problem.ts} (100%)
 rename src/06-advanced-hooks/{38-tuple-return-type.solution.1.ts => 41-tuple-return-type.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{38-tuple-return-type.solution.2.ts => 41-tuple-return-type.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{39-unions-in-usestate.problem.tsx => 42-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{39-unions-in-usestate.solution.tsx => 42-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{40-discriminated-unions-in-usestate.problem.tsx => 43-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{40-discriminated-unions-in-usestate.solution.tsx => 43-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{41-discriminated-tuples-from-custom-hooks.problem.tsx => 44-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/06-advanced-hooks/{41-discriminated-tuples-from-custom-hooks.solution.tsx => 44-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/06-advanced-hooks/{42-use-state-overloads.problem.ts => 45-use-state-overloads.problem.ts} (100%)
 rename src/06-advanced-hooks/{42-use-state-overloads.solution.1.ts => 45-use-state-overloads.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{42-use-state-overloads.solution.2.ts => 45-use-state-overloads.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{43-function-overloads-in-hooks.problem.ts => 46-function-overloads-in-hooks.problem.ts} (100%)
 rename src/06-advanced-hooks/{43-function-overloads-in-hooks.solution.1.ts => 46-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{43-function-overloads-in-hooks.solution.2.ts => 46-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/07-types-deep-dive/{44-understand-react-namespace-export.explainer.ts => 47-understand-react-namespace-export.explainer.ts} (100%)
 rename src/07-types-deep-dive/{45-understanding-jsx-element.explainer.tsx => 48-understanding-jsx-element.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{46-strongly-typing-children.explainer.tsx => 49-strongly-typing-children.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{47-understanding-jsx-intrinsic-elements.explainer.tsx => 50-understanding-jsx-intrinsic-elements.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{48-appending-to-global-namespace.problem.ts => 51-appending-to-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{48-appending-to-global-namespace.solution.ts => 51-appending-to-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{49-declaration-merging-in-global-namespace.problem.ts => 52-declaration-merging-in-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{49-declaration-merging-in-global-namespace.solution.ts => 52-declaration-merging-in-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{50-add-new-global-element.problem.tsx => 53-add-new-global-element.problem.tsx} (100%)
 rename src/07-types-deep-dive/{50-add-new-global-element.solution.tsx => 53-add-new-global-element.solution.tsx} (100%)
 rename src/07-types-deep-dive/{51-html-attributes.explainer.tsx => 54-html-attributes.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{52-add-attribute-to-all-elements.problem.tsx => 55-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{52-add-attribute-to-all-elements.solution.tsx => 55-add-attribute-to-all-elements.solution.tsx} (100%)
 rename src/08-advanced-patterns/{53-required-context.problem.tsx => 56-required-context.problem.tsx} (100%)
 rename src/08-advanced-patterns/{53-required-context.solution.1.tsx => 56-required-context.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{53-required-context.solution.2.tsx => 56-required-context.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{54-render-props.problem.tsx => 57-render-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{54-render-props.solution.tsx => 57-render-props.solution.tsx} (100%)
 rename src/08-advanced-patterns/{55-forward-ref-with-generics.explainer.1.tsx => 58-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/08-advanced-patterns/{55-forward-ref-with-generics.explainer.2.tsx => 58-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/08-advanced-patterns/{55-forward-ref-with-generics.explainer.3.ts => 58-forward-ref-with-generics.explainer.3.ts} (100%)
 rename src/08-advanced-patterns/{56-hoc.problem.tsx => 59-hoc.problem.tsx} (100%)
 rename src/08-advanced-patterns/{56-hoc.solution.tsx => 59-hoc.solution.tsx} (100%)
 rename src/08-advanced-patterns/{57-record-of-components-with-same-props.problem.tsx => 60-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{57-record-of-components-with-same-props.solution.1.tsx => 60-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{57-record-of-components-with-same-props.solution.2.tsx => 60-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{58-as-prop.problem.tsx => 61-as-prop.problem.tsx} (100%)
 rename src/08-advanced-patterns/{58-as-prop.solution.1.tsx => 61-as-prop.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{58-as-prop.solution.2.tsx => 61-as-prop.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{59-as-prop-with-custom-components.problem.tsx => 62-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{59-as-prop-with-custom-components.solution.tsx => 62-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/09-external-libraries/{60-react-hook-form.explainer.tsx => 63-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{61-react-hook-form-wrapper.problem.tsx => 64-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{61-react-hook-form-wrapper.solution.tsx => 64-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{62-react-select.problem.tsx => 65-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{62-react-select.solution.tsx => 65-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{63-react-query.explainer.ts => 66-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{64-react-query-wrapper.problem.ts => 67-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{64-react-query-wrapper.solution.ts => 67-react-query-wrapper.solution.ts} (100%)

diff --git a/src/04-advanced-props/25-either-all-these-props-or-none.solution.3.tsx b/src/04-advanced-props/25-either-all-these-props-or-none.solution.3.tsx
deleted file mode 100644
index a0bfc95..0000000
--- a/src/04-advanced-props/25-either-all-these-props-or-none.solution.3.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { ChangeEventHandler } from "react";
-
-type InputProps = AllOrNothing<{
-  value: string;
-  onChange: ChangeEventHandler;
-}> & {
-  label: string;
-};
-
-/**
- * This is what I'd do in a production app - capture this
- * logic in a reusable type helper.
- */
-type AllOrNothing<TProps extends Record<string, any>> =
-  | TProps
-  | {
-      [K in keyof TProps]?: undefined;
-    };
-
-export const Input = ({ label, ...props }: InputProps) => {
-  return (
-    <div>
-      <label>
-        {label}
-        <input {...props} />
-      </label>
-    </div>
-  );
-};
-
-export const Test = () => {
-  return (
-    <div>
-      <Input label="Greeting" value="Hello" onChange={() => {}} />
-      <Input label="Greeting" />
-
-      {/* @ts-expect-error */}
-      <Input label="Greeting" value="Hello" />
-
-      {/* @ts-expect-error */}
-      <Input label="Greeting" onChange={() => {}} />
-    </div>
-  );
-};
diff --git a/src/04-advanced-props/26-toggle-props.problem.tsx b/src/04-advanced-props/25-toggle-props.problem.tsx
similarity index 100%
rename from src/04-advanced-props/26-toggle-props.problem.tsx
rename to src/04-advanced-props/25-toggle-props.problem.tsx
diff --git a/src/04-advanced-props/26-toggle-props.solution.tsx b/src/04-advanced-props/25-toggle-props.solution.tsx
similarity index 100%
rename from src/04-advanced-props/26-toggle-props.solution.tsx
rename to src/04-advanced-props/25-toggle-props.solution.tsx
diff --git a/src/04-advanced-props/26-empty-object-type.explainer.tsx b/src/04-advanced-props/26-empty-object-type.explainer.tsx
new file mode 100644
index 0000000..26b1471
--- /dev/null
+++ b/src/04-advanced-props/26-empty-object-type.explainer.tsx
@@ -0,0 +1,15 @@
+const Component = (props: { config: {} }) => {
+  return <div />;
+};
+
+/**
+ * Why can I pass _anything_ to config?
+ */
+<>
+  <Component
+    config={{
+      foo: "bar",
+      whatever: {},
+    }}
+  />
+</>;
diff --git a/src/04-advanced-props/25-either-all-these-props-or-none.problem.tsx b/src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx
similarity index 83%
rename from src/04-advanced-props/25-either-all-these-props-or-none.problem.tsx
rename to src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx
index 0ea3fd5..147cac7 100644
--- a/src/04-advanced-props/25-either-all-these-props-or-none.problem.tsx
+++ b/src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx
@@ -9,14 +9,6 @@ import { ChangeEventHandler } from "react";
  * 1. Figure out why the errors are occurring on the `Test` component.
  *
  * 2. Find a way to fix the errors.
- *
- * 3. As a bonus, try to make a reusable type helper called AllOrNothing<TProps>
- * which can be used like this:
- *
- * AllOrNothing<{
- *   value: string;
- *   onChange: ChangeEventHandler;
- * }>
  */
 type InputProps = (
   | {
diff --git a/src/04-advanced-props/25-either-all-these-props-or-none.solution.1.tsx b/src/04-advanced-props/27-either-all-these-props-or-none.solution.1.tsx
similarity index 100%
rename from src/04-advanced-props/25-either-all-these-props-or-none.solution.1.tsx
rename to src/04-advanced-props/27-either-all-these-props-or-none.solution.1.tsx
diff --git a/src/04-advanced-props/25-either-all-these-props-or-none.solution.2.tsx b/src/04-advanced-props/27-either-all-these-props-or-none.solution.2.tsx
similarity index 100%
rename from src/04-advanced-props/25-either-all-these-props-or-none.solution.2.tsx
rename to src/04-advanced-props/27-either-all-these-props-or-none.solution.2.tsx
diff --git a/src/04-advanced-props/27-partial-autocomplete.problem.tsx b/src/04-advanced-props/29-partial-autocomplete.problem.tsx
similarity index 100%
rename from src/04-advanced-props/27-partial-autocomplete.problem.tsx
rename to src/04-advanced-props/29-partial-autocomplete.problem.tsx
diff --git a/src/04-advanced-props/27-partial-autocomplete.solution.1.tsx b/src/04-advanced-props/29-partial-autocomplete.solution.1.tsx
similarity index 100%
rename from src/04-advanced-props/27-partial-autocomplete.solution.1.tsx
rename to src/04-advanced-props/29-partial-autocomplete.solution.1.tsx
diff --git a/src/04-advanced-props/27-partial-autocomplete.solution.2.tsx b/src/04-advanced-props/29-partial-autocomplete.solution.2.tsx
similarity index 100%
rename from src/04-advanced-props/27-partial-autocomplete.solution.2.tsx
rename to src/04-advanced-props/29-partial-autocomplete.solution.2.tsx
diff --git a/src/04-advanced-props/29-variants-with-classnames.problem.tsx b/src/04-advanced-props/30-variants-with-classnames.problem.tsx
similarity index 100%
rename from src/04-advanced-props/29-variants-with-classnames.problem.tsx
rename to src/04-advanced-props/30-variants-with-classnames.problem.tsx
diff --git a/src/04-advanced-props/29-variants-with-classnames.solution.tsx b/src/04-advanced-props/30-variants-with-classnames.solution.tsx
similarity index 100%
rename from src/04-advanced-props/29-variants-with-classnames.solution.tsx
rename to src/04-advanced-props/30-variants-with-classnames.solution.tsx
diff --git a/src/04-advanced-props/31-as-const.problem.ts b/src/04-advanced-props/31-as-const.problem.ts
new file mode 100644
index 0000000..c5393f3
--- /dev/null
+++ b/src/04-advanced-props/31-as-const.problem.ts
@@ -0,0 +1,15 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+const BACKEND_TO_FRONTEND_STATUS_MAP = {
+  0: "pending",
+  1: "success",
+  2: "error",
+} as const;
+
+type BackendStatus = unknown;
+type FrontendStatus = unknown;
+
+type test = [
+  Expect<Equal<BackendStatus, 0 | 1 | 2>>,
+  Expect<Equal<FrontendStatus, "pending" | "success" | "error">>,
+];
diff --git a/src/04-advanced-props/31-as-const.solution.ts b/src/04-advanced-props/31-as-const.solution.ts
new file mode 100644
index 0000000..1dfcd79
--- /dev/null
+++ b/src/04-advanced-props/31-as-const.solution.ts
@@ -0,0 +1,15 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+const BACKEND_TO_FRONTEND_STATUS_MAP = {
+  0: "pending",
+  1: "success",
+  2: "error",
+} as const;
+
+type BackendStatus = keyof typeof BACKEND_TO_FRONTEND_STATUS_MAP;
+type FrontendStatus = (typeof BACKEND_TO_FRONTEND_STATUS_MAP)[BackendStatus];
+
+type test = [
+  Expect<Equal<BackendStatus, 0 | 1 | 2>>,
+  Expect<Equal<FrontendStatus, "pending" | "success" | "error">>,
+];
diff --git a/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx b/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx
new file mode 100644
index 0000000..b8dbb34
--- /dev/null
+++ b/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx
@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const buttonProps = {
+  type: "button",
+  // This should be erroring! Why isn't it?
+  illegalProperty: "I AM ILLEGAL",
+};
+
+<>
+  <button {...buttonProps}>Click Me!</button>
+</>;
+
+const buttonPropType = buttonProps.type;
+
+type test = Expect<Equal<typeof buttonPropType, "button">>;
diff --git a/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx b/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx
new file mode 100644
index 0000000..ae9f877
--- /dev/null
+++ b/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx
@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const buttonProps = {
+  type: "button",
+  // This should be erroring! Why isn't it?
+  illegalProperty: "I AM ILLEGAL",
+} satisfies ComponentProps<"button">;
+
+<>
+  <button {...buttonProps}>Click Me!</button>
+</>;
+
+const buttonPropType = buttonProps.type;
+
+type test = Expect<Equal<typeof buttonPropType, "button">>;
diff --git a/src/04-advanced-props/30-prop-groups-with-variants.problem.tsx b/src/04-advanced-props/33-prop-groups-with-variants.problem.tsx
similarity index 100%
rename from src/04-advanced-props/30-prop-groups-with-variants.problem.tsx
rename to src/04-advanced-props/33-prop-groups-with-variants.problem.tsx
diff --git a/src/04-advanced-props/30-prop-groups-with-variants.solution.1.tsx b/src/04-advanced-props/33-prop-groups-with-variants.solution.1.tsx
similarity index 100%
rename from src/04-advanced-props/30-prop-groups-with-variants.solution.1.tsx
rename to src/04-advanced-props/33-prop-groups-with-variants.solution.1.tsx
diff --git a/src/04-advanced-props/30-prop-groups-with-variants.solution.2.tsx b/src/04-advanced-props/33-prop-groups-with-variants.solution.2.tsx
similarity index 100%
rename from src/04-advanced-props/30-prop-groups-with-variants.solution.2.tsx
rename to src/04-advanced-props/33-prop-groups-with-variants.solution.2.tsx
diff --git a/src/05-generics/31-generic-props.problem.tsx b/src/05-generics/34-generic-props.problem.tsx
similarity index 100%
rename from src/05-generics/31-generic-props.problem.tsx
rename to src/05-generics/34-generic-props.problem.tsx
diff --git a/src/05-generics/31-generic-props.solution.tsx b/src/05-generics/34-generic-props.solution.tsx
similarity index 100%
rename from src/05-generics/31-generic-props.solution.tsx
rename to src/05-generics/34-generic-props.solution.tsx
diff --git a/src/05-generics/32-generic-hooks.problem.ts b/src/05-generics/35-generic-hooks.problem.ts
similarity index 100%
rename from src/05-generics/32-generic-hooks.problem.ts
rename to src/05-generics/35-generic-hooks.problem.ts
diff --git a/src/05-generics/32-generic-hooks.solution.1.ts b/src/05-generics/35-generic-hooks.solution.1.ts
similarity index 100%
rename from src/05-generics/32-generic-hooks.solution.1.ts
rename to src/05-generics/35-generic-hooks.solution.1.ts
diff --git a/src/05-generics/32-generic-hooks.solution.2.ts b/src/05-generics/35-generic-hooks.solution.2.ts
similarity index 100%
rename from src/05-generics/32-generic-hooks.solution.2.ts
rename to src/05-generics/35-generic-hooks.solution.2.ts
diff --git a/src/05-generics/32-generic-hooks.solution.3.ts b/src/05-generics/35-generic-hooks.solution.3.ts
similarity index 100%
rename from src/05-generics/32-generic-hooks.solution.3.ts
rename to src/05-generics/35-generic-hooks.solution.3.ts
diff --git a/src/05-generics/32-generic-hooks.solution.4.ts b/src/05-generics/35-generic-hooks.solution.4.ts
similarity index 100%
rename from src/05-generics/32-generic-hooks.solution.4.ts
rename to src/05-generics/35-generic-hooks.solution.4.ts
diff --git a/src/05-generics/32-generic-hooks.solution.5.ts b/src/05-generics/35-generic-hooks.solution.5.ts
similarity index 100%
rename from src/05-generics/32-generic-hooks.solution.5.ts
rename to src/05-generics/35-generic-hooks.solution.5.ts
diff --git a/src/05-generics/33-generic-localstorage-hook.problem.ts b/src/05-generics/36-generic-localstorage-hook.problem.ts
similarity index 100%
rename from src/05-generics/33-generic-localstorage-hook.problem.ts
rename to src/05-generics/36-generic-localstorage-hook.problem.ts
diff --git a/src/05-generics/33-generic-localstorage-hook.solution.ts b/src/05-generics/36-generic-localstorage-hook.solution.ts
similarity index 100%
rename from src/05-generics/33-generic-localstorage-hook.solution.ts
rename to src/05-generics/36-generic-localstorage-hook.solution.ts
diff --git a/src/05-generics/34-button-group.problem.tsx b/src/05-generics/37-button-group.problem.tsx
similarity index 100%
rename from src/05-generics/34-button-group.problem.tsx
rename to src/05-generics/37-button-group.problem.tsx
diff --git a/src/05-generics/34-button-group.solution.tsx b/src/05-generics/37-button-group.solution.tsx
similarity index 100%
rename from src/05-generics/34-button-group.solution.tsx
rename to src/05-generics/37-button-group.solution.tsx
diff --git a/src/05-generics/35-button-group.problem.tsx b/src/05-generics/38-button-group.problem.tsx
similarity index 100%
rename from src/05-generics/35-button-group.problem.tsx
rename to src/05-generics/38-button-group.problem.tsx
diff --git a/src/05-generics/35-button-group.solution.1.tsx b/src/05-generics/38-button-group.solution.1.tsx
similarity index 100%
rename from src/05-generics/35-button-group.solution.1.tsx
rename to src/05-generics/38-button-group.solution.1.tsx
diff --git a/src/05-generics/35-button-group.solution.2.tsx b/src/05-generics/38-button-group.solution.2.tsx
similarity index 100%
rename from src/05-generics/35-button-group.solution.2.tsx
rename to src/05-generics/38-button-group.solution.2.tsx
diff --git a/src/05-generics/36-lazy-load-component.problem.tsx b/src/05-generics/39-lazy-load-component.problem.tsx
similarity index 100%
rename from src/05-generics/36-lazy-load-component.problem.tsx
rename to src/05-generics/39-lazy-load-component.problem.tsx
diff --git a/src/05-generics/36-lazy-load-component.solution.tsx b/src/05-generics/39-lazy-load-component.solution.tsx
similarity index 100%
rename from src/05-generics/36-lazy-load-component.solution.tsx
rename to src/05-generics/39-lazy-load-component.solution.tsx
diff --git a/src/05-generics/37-generics-vs-discriminated-unions.problem.tsx b/src/05-generics/40-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/05-generics/37-generics-vs-discriminated-unions.problem.tsx
rename to src/05-generics/40-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/05-generics/37-generics-vs-discriminated-unions.solution.tsx b/src/05-generics/40-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/05-generics/37-generics-vs-discriminated-unions.solution.tsx
rename to src/05-generics/40-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/06-advanced-hooks/38-tuple-return-type.problem.ts b/src/06-advanced-hooks/41-tuple-return-type.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/38-tuple-return-type.problem.ts
rename to src/06-advanced-hooks/41-tuple-return-type.problem.ts
diff --git a/src/06-advanced-hooks/38-tuple-return-type.solution.1.ts b/src/06-advanced-hooks/41-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/38-tuple-return-type.solution.1.ts
rename to src/06-advanced-hooks/41-tuple-return-type.solution.1.ts
diff --git a/src/06-advanced-hooks/38-tuple-return-type.solution.2.ts b/src/06-advanced-hooks/41-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/38-tuple-return-type.solution.2.ts
rename to src/06-advanced-hooks/41-tuple-return-type.solution.2.ts
diff --git a/src/06-advanced-hooks/39-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/42-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/39-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/42-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/39-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/42-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/39-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/42-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/43-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/43-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/41-discriminated-tuples-from-custom-hooks.problem.tsx b/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/41-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/06-advanced-hooks/41-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/41-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/06-advanced-hooks/42-use-state-overloads.problem.ts b/src/06-advanced-hooks/45-use-state-overloads.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/42-use-state-overloads.problem.ts
rename to src/06-advanced-hooks/45-use-state-overloads.problem.ts
diff --git a/src/06-advanced-hooks/42-use-state-overloads.solution.1.ts b/src/06-advanced-hooks/45-use-state-overloads.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/42-use-state-overloads.solution.1.ts
rename to src/06-advanced-hooks/45-use-state-overloads.solution.1.ts
diff --git a/src/06-advanced-hooks/42-use-state-overloads.solution.2.ts b/src/06-advanced-hooks/45-use-state-overloads.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/42-use-state-overloads.solution.2.ts
rename to src/06-advanced-hooks/45-use-state-overloads.solution.2.ts
diff --git a/src/06-advanced-hooks/43-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/43-function-overloads-in-hooks.problem.ts
rename to src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts
diff --git a/src/06-advanced-hooks/43-function-overloads-in-hooks.solution.1.ts b/src/06-advanced-hooks/46-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/43-function-overloads-in-hooks.solution.1.ts
rename to src/06-advanced-hooks/46-function-overloads-in-hooks.solution.1.ts
diff --git a/src/06-advanced-hooks/43-function-overloads-in-hooks.solution.2.ts b/src/06-advanced-hooks/46-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/43-function-overloads-in-hooks.solution.2.ts
rename to src/06-advanced-hooks/46-function-overloads-in-hooks.solution.2.ts
diff --git a/src/07-types-deep-dive/44-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/47-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/44-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/47-understand-react-namespace-export.explainer.ts
diff --git a/src/07-types-deep-dive/45-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/48-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/45-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/48-understanding-jsx-element.explainer.tsx
diff --git a/src/07-types-deep-dive/46-strongly-typing-children.explainer.tsx b/src/07-types-deep-dive/49-strongly-typing-children.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/46-strongly-typing-children.explainer.tsx
rename to src/07-types-deep-dive/49-strongly-typing-children.explainer.tsx
diff --git a/src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.tsx b/src/07-types-deep-dive/50-understanding-jsx-intrinsic-elements.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/47-understanding-jsx-intrinsic-elements.explainer.tsx
rename to src/07-types-deep-dive/50-understanding-jsx-intrinsic-elements.explainer.tsx
diff --git a/src/07-types-deep-dive/48-appending-to-global-namespace.problem.ts b/src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/48-appending-to-global-namespace.problem.ts
rename to src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/48-appending-to-global-namespace.solution.ts b/src/07-types-deep-dive/51-appending-to-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/48-appending-to-global-namespace.solution.ts
rename to src/07-types-deep-dive/51-appending-to-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/49-declaration-merging-in-global-namespace.problem.ts b/src/07-types-deep-dive/52-declaration-merging-in-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/49-declaration-merging-in-global-namespace.problem.ts
rename to src/07-types-deep-dive/52-declaration-merging-in-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/49-declaration-merging-in-global-namespace.solution.ts b/src/07-types-deep-dive/52-declaration-merging-in-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/49-declaration-merging-in-global-namespace.solution.ts
rename to src/07-types-deep-dive/52-declaration-merging-in-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/50-add-new-global-element.problem.tsx b/src/07-types-deep-dive/53-add-new-global-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/50-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/53-add-new-global-element.problem.tsx
diff --git a/src/07-types-deep-dive/50-add-new-global-element.solution.tsx b/src/07-types-deep-dive/53-add-new-global-element.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/50-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/53-add-new-global-element.solution.tsx
diff --git a/src/07-types-deep-dive/51-html-attributes.explainer.tsx b/src/07-types-deep-dive/54-html-attributes.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/51-html-attributes.explainer.tsx
rename to src/07-types-deep-dive/54-html-attributes.explainer.tsx
diff --git a/src/07-types-deep-dive/52-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/52-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx
diff --git a/src/07-types-deep-dive/52-add-attribute-to-all-elements.solution.tsx b/src/07-types-deep-dive/55-add-attribute-to-all-elements.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/52-add-attribute-to-all-elements.solution.tsx
rename to src/07-types-deep-dive/55-add-attribute-to-all-elements.solution.tsx
diff --git a/src/08-advanced-patterns/53-required-context.problem.tsx b/src/08-advanced-patterns/56-required-context.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/53-required-context.problem.tsx
rename to src/08-advanced-patterns/56-required-context.problem.tsx
diff --git a/src/08-advanced-patterns/53-required-context.solution.1.tsx b/src/08-advanced-patterns/56-required-context.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/53-required-context.solution.1.tsx
rename to src/08-advanced-patterns/56-required-context.solution.1.tsx
diff --git a/src/08-advanced-patterns/53-required-context.solution.2.tsx b/src/08-advanced-patterns/56-required-context.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/53-required-context.solution.2.tsx
rename to src/08-advanced-patterns/56-required-context.solution.2.tsx
diff --git a/src/08-advanced-patterns/54-render-props.problem.tsx b/src/08-advanced-patterns/57-render-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/54-render-props.problem.tsx
rename to src/08-advanced-patterns/57-render-props.problem.tsx
diff --git a/src/08-advanced-patterns/54-render-props.solution.tsx b/src/08-advanced-patterns/57-render-props.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/54-render-props.solution.tsx
rename to src/08-advanced-patterns/57-render-props.solution.tsx
diff --git a/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/55-forward-ref-with-generics.explainer.1.tsx
rename to src/08-advanced-patterns/58-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.2.tsx b/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/55-forward-ref-with-generics.explainer.2.tsx
rename to src/08-advanced-patterns/58-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/08-advanced-patterns/55-forward-ref-with-generics.explainer.3.ts b/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.3.ts
similarity index 100%
rename from src/08-advanced-patterns/55-forward-ref-with-generics.explainer.3.ts
rename to src/08-advanced-patterns/58-forward-ref-with-generics.explainer.3.ts
diff --git a/src/08-advanced-patterns/56-hoc.problem.tsx b/src/08-advanced-patterns/59-hoc.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/56-hoc.problem.tsx
rename to src/08-advanced-patterns/59-hoc.problem.tsx
diff --git a/src/08-advanced-patterns/56-hoc.solution.tsx b/src/08-advanced-patterns/59-hoc.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/56-hoc.solution.tsx
rename to src/08-advanced-patterns/59-hoc.solution.tsx
diff --git a/src/08-advanced-patterns/57-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/60-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/60-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/60-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/60-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/08-advanced-patterns/58-as-prop.problem.tsx b/src/08-advanced-patterns/61-as-prop.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/58-as-prop.problem.tsx
rename to src/08-advanced-patterns/61-as-prop.problem.tsx
diff --git a/src/08-advanced-patterns/58-as-prop.solution.1.tsx b/src/08-advanced-patterns/61-as-prop.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/58-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/61-as-prop.solution.1.tsx
diff --git a/src/08-advanced-patterns/58-as-prop.solution.2.tsx b/src/08-advanced-patterns/61-as-prop.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/58-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/61-as-prop.solution.2.tsx
diff --git a/src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/59-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx
diff --git a/src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/62-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/59-as-prop-with-custom-components.solution.tsx
rename to src/08-advanced-patterns/62-as-prop-with-custom-components.solution.tsx
diff --git a/src/09-external-libraries/60-react-hook-form.explainer.tsx b/src/09-external-libraries/63-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/60-react-hook-form.explainer.tsx
rename to src/09-external-libraries/63-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/61-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/64-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/61-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/64-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/61-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/64-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/61-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/64-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/62-react-select.problem.tsx b/src/09-external-libraries/65-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/62-react-select.problem.tsx
rename to src/09-external-libraries/65-react-select.problem.tsx
diff --git a/src/09-external-libraries/62-react-select.solution.tsx b/src/09-external-libraries/65-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/62-react-select.solution.tsx
rename to src/09-external-libraries/65-react-select.solution.tsx
diff --git a/src/09-external-libraries/63-react-query.explainer.ts b/src/09-external-libraries/66-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/63-react-query.explainer.ts
rename to src/09-external-libraries/66-react-query.explainer.ts
diff --git a/src/09-external-libraries/64-react-query-wrapper.problem.ts b/src/09-external-libraries/67-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/64-react-query-wrapper.problem.ts
rename to src/09-external-libraries/67-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/64-react-query-wrapper.solution.ts b/src/09-external-libraries/67-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/64-react-query-wrapper.solution.ts
rename to src/09-external-libraries/67-react-query-wrapper.solution.ts

From 245283ab7f54b74387d908b27cf4b6cf22b92d6e Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 21 Jun 2023 10:29:04 +0100
Subject: [PATCH 031/165] Changed 24

---
 ...minated-union-with-other-props.problem.tsx | 26 +++++++++++++++++--
 ...inated-union-with-other-props.solution.tsx | 26 +++++++++++++++++--
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx b/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
index 7b30253..358bc67 100644
--- a/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
+++ b/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx
@@ -13,9 +13,31 @@ type ModalProps =
  */
 export const Modal = (props: ModalProps) => {
   if (props.variant === "no-title") {
-    return <div>No title</div>;
+    return (
+      <div>
+        <span>No title</span>
+        <button
+          style={{
+            backgroundColor: props.buttonColor,
+          }}
+        >
+          Click me!
+        </button>
+      </div>
+    );
   } else {
-    return <div>Title: {props.title}</div>;
+    return (
+      <div>
+        <span>Title: {props.title}</span>
+        <button
+          style={{
+            backgroundColor: props.buttonColor,
+          }}
+        >
+          Click me!
+        </button>
+      </div>
+    );
   }
 };
 
diff --git a/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx b/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
index dbc04c4..942479a 100644
--- a/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
+++ b/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx
@@ -17,9 +17,31 @@ type ModalProps = (
 
 export const Modal = (props: ModalProps) => {
   if (props.variant === "no-title") {
-    return <div>No title</div>;
+    return (
+      <div>
+        <span>No title</span>
+        <button
+          style={{
+            backgroundColor: props.buttonColor,
+          }}
+        >
+          Click me!
+        </button>
+      </div>
+    );
   } else {
-    return <div>Title: {props.title}</div>;
+    return (
+      <div>
+        <span>Title: {props.title}</span>
+        <button
+          style={{
+            backgroundColor: props.buttonColor,
+          }}
+        >
+          Click me!
+        </button>
+      </div>
+    );
   }
 };
 

From 1c5a34a8a9c4c8128f2f71297259c0d2faec18fd Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 21 Jun 2023 11:06:17 +0100
Subject: [PATCH 032/165] Removed other solution from 27

---
 ...her-all-these-props-or-none.solution.2.tsx | 44 -------------------
 ...ther-all-these-props-or-none.solution.tsx} |  5 +--
 2 files changed, 1 insertion(+), 48 deletions(-)
 delete mode 100644 src/04-advanced-props/27-either-all-these-props-or-none.solution.2.tsx
 rename src/04-advanced-props/{27-either-all-these-props-or-none.solution.1.tsx => 27-either-all-these-props-or-none.solution.tsx} (91%)

diff --git a/src/04-advanced-props/27-either-all-these-props-or-none.solution.2.tsx b/src/04-advanced-props/27-either-all-these-props-or-none.solution.2.tsx
deleted file mode 100644
index b9f1923..0000000
--- a/src/04-advanced-props/27-either-all-these-props-or-none.solution.2.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { ChangeEventHandler } from "react";
-
-/**
- * 1. Consider whether you think 'undefined' or 'never'
- * is better for the 'value' and 'onChange' props.
- */
-type InputProps = (
-  | {
-      value: string;
-      onChange: ChangeEventHandler;
-    }
-  | {
-      value?: never;
-      onChange?: never;
-    }
-) & {
-  label: string;
-};
-
-export const Input = ({ label, ...props }: InputProps) => {
-  return (
-    <div>
-      <label>
-        {label}
-        <input {...props} />
-      </label>
-    </div>
-  );
-};
-
-export const Test = () => {
-  return (
-    <div>
-      <Input label="Greeting" value="Hello" onChange={() => {}} />
-      <Input label="Greeting" />
-
-      {/* @ts-expect-error */}
-      <Input label="Greeting" value="Hello" />
-
-      {/* @ts-expect-error */}
-      <Input label="Greeting" onChange={() => {}} />
-    </div>
-  );
-};
diff --git a/src/04-advanced-props/27-either-all-these-props-or-none.solution.1.tsx b/src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx
similarity index 91%
rename from src/04-advanced-props/27-either-all-these-props-or-none.solution.1.tsx
rename to src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx
index 0eaa20d..b652c53 100644
--- a/src/04-advanced-props/27-either-all-these-props-or-none.solution.1.tsx
+++ b/src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx
@@ -5,10 +5,7 @@ type InputProps = (
       value: string;
       onChange: ChangeEventHandler;
     }
-  | {
-      value?: undefined;
-      onChange?: undefined;
-    }
+  | {}
 ) & {
   label: string;
 };

From 384fa20edd572fb7a90940d4a6e5d7efeb8484c9 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 21 Jun 2023 11:06:45 +0100
Subject: [PATCH 033/165] Fixed 27 solution

---
 .../27-either-all-these-props-or-none.solution.tsx           | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx b/src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx
index b652c53..0eaa20d 100644
--- a/src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx
+++ b/src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx
@@ -5,7 +5,10 @@ type InputProps = (
       value: string;
       onChange: ChangeEventHandler;
     }
-  | {}
+  | {
+      value?: undefined;
+      onChange?: undefined;
+    }
 ) & {
   label: string;
 };

From 87037ee58c39af4d92230eaaef57990a0e2a871d Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 22 Jun 2023 09:38:58 +0100
Subject: [PATCH 034/165] Reordered 29 and 30

---
 ...snames.problem.tsx => 29-variants-with-classnames.problem.tsx} | 0
 ...ames.solution.tsx => 29-variants-with-classnames.solution.tsx} | 0
 ...tocomplete.problem.tsx => 30-partial-autocomplete.problem.tsx} | 0
 ...lete.solution.1.tsx => 30-partial-autocomplete.solution.1.tsx} | 0
 ...lete.solution.2.tsx => 30-partial-autocomplete.solution.2.tsx} | 0
 5 files changed, 0 insertions(+), 0 deletions(-)
 rename src/04-advanced-props/{30-variants-with-classnames.problem.tsx => 29-variants-with-classnames.problem.tsx} (100%)
 rename src/04-advanced-props/{30-variants-with-classnames.solution.tsx => 29-variants-with-classnames.solution.tsx} (100%)
 rename src/04-advanced-props/{29-partial-autocomplete.problem.tsx => 30-partial-autocomplete.problem.tsx} (100%)
 rename src/04-advanced-props/{29-partial-autocomplete.solution.1.tsx => 30-partial-autocomplete.solution.1.tsx} (100%)
 rename src/04-advanced-props/{29-partial-autocomplete.solution.2.tsx => 30-partial-autocomplete.solution.2.tsx} (100%)

diff --git a/src/04-advanced-props/30-variants-with-classnames.problem.tsx b/src/04-advanced-props/29-variants-with-classnames.problem.tsx
similarity index 100%
rename from src/04-advanced-props/30-variants-with-classnames.problem.tsx
rename to src/04-advanced-props/29-variants-with-classnames.problem.tsx
diff --git a/src/04-advanced-props/30-variants-with-classnames.solution.tsx b/src/04-advanced-props/29-variants-with-classnames.solution.tsx
similarity index 100%
rename from src/04-advanced-props/30-variants-with-classnames.solution.tsx
rename to src/04-advanced-props/29-variants-with-classnames.solution.tsx
diff --git a/src/04-advanced-props/29-partial-autocomplete.problem.tsx b/src/04-advanced-props/30-partial-autocomplete.problem.tsx
similarity index 100%
rename from src/04-advanced-props/29-partial-autocomplete.problem.tsx
rename to src/04-advanced-props/30-partial-autocomplete.problem.tsx
diff --git a/src/04-advanced-props/29-partial-autocomplete.solution.1.tsx b/src/04-advanced-props/30-partial-autocomplete.solution.1.tsx
similarity index 100%
rename from src/04-advanced-props/29-partial-autocomplete.solution.1.tsx
rename to src/04-advanced-props/30-partial-autocomplete.solution.1.tsx
diff --git a/src/04-advanced-props/29-partial-autocomplete.solution.2.tsx b/src/04-advanced-props/30-partial-autocomplete.solution.2.tsx
similarity index 100%
rename from src/04-advanced-props/29-partial-autocomplete.solution.2.tsx
rename to src/04-advanced-props/30-partial-autocomplete.solution.2.tsx

From eb96ed19189eb9d6ce5059fec827b3472692c9f5 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 22 Jun 2023 10:09:36 +0100
Subject: [PATCH 035/165] Removed second partial autocomplete solution

---
 .../30-partial-autocomplete.solution.2.tsx    | 32 -------------------
 ...x => 30-partial-autocomplete.solution.tsx} |  0
 2 files changed, 32 deletions(-)
 delete mode 100644 src/04-advanced-props/30-partial-autocomplete.solution.2.tsx
 rename src/04-advanced-props/{30-partial-autocomplete.solution.1.tsx => 30-partial-autocomplete.solution.tsx} (100%)

diff --git a/src/04-advanced-props/30-partial-autocomplete.solution.2.tsx b/src/04-advanced-props/30-partial-autocomplete.solution.2.tsx
deleted file mode 100644
index db5b63e..0000000
--- a/src/04-advanced-props/30-partial-autocomplete.solution.2.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-const presetSizes = {
-  xs: "0.5rem",
-  sm: "1rem",
-};
-
-type Size = keyof typeof presetSizes;
-
-/**
- * Here, we've refactored it into a type helper.
- */
-type LooseAutocomplete<T> = T | (string & {});
-
-type LooseSize = LooseAutocomplete<Size>;
-
-export const Icon = (props: { size: LooseSize }) => {
-  return (
-    <div
-      style={{
-        width:
-          props.size in presetSizes
-            ? presetSizes[props.size as Size]
-            : props.size,
-      }}
-    />
-  );
-};
-
-<>
-  <Icon size="sm"></Icon>
-  <Icon size="xs"></Icon>
-  <Icon size="10px"></Icon>
-</>;
diff --git a/src/04-advanced-props/30-partial-autocomplete.solution.1.tsx b/src/04-advanced-props/30-partial-autocomplete.solution.tsx
similarity index 100%
rename from src/04-advanced-props/30-partial-autocomplete.solution.1.tsx
rename to src/04-advanced-props/30-partial-autocomplete.solution.tsx

From 4b9208e748c9e67f3fec75eaf512811aca8e2d55 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 22 Jun 2023 10:13:27 +0100
Subject: [PATCH 036/165] Fixed 30

---
 src/04-advanced-props/30-partial-autocomplete.solution.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/04-advanced-props/30-partial-autocomplete.solution.tsx b/src/04-advanced-props/30-partial-autocomplete.solution.tsx
index 3ccb1ac..eb1eb9a 100644
--- a/src/04-advanced-props/30-partial-autocomplete.solution.tsx
+++ b/src/04-advanced-props/30-partial-autocomplete.solution.tsx
@@ -9,8 +9,6 @@ type Size = keyof typeof presetSizes;
  * Oddly, this works. Forcing string to intersect with {} does SOMETHING
  * which makes TypeScript do what we want.
  *
- * 1. Doing (string & unknown) also works. Try it out!
- *
  * Honestly, I'm not sure why this works. Some compiler-diving is required
  * to figure it out.
  */

From 8bbc3c1e31c9f85b85627ca5de7e78b9c4d65741 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 22 Jun 2023 10:14:07 +0100
Subject: [PATCH 037/165] Removed as const from problem

---
 src/04-advanced-props/31-as-const.problem.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/04-advanced-props/31-as-const.problem.ts b/src/04-advanced-props/31-as-const.problem.ts
index c5393f3..9440b74 100644
--- a/src/04-advanced-props/31-as-const.problem.ts
+++ b/src/04-advanced-props/31-as-const.problem.ts
@@ -4,12 +4,12 @@ const BACKEND_TO_FRONTEND_STATUS_MAP = {
   0: "pending",
   1: "success",
   2: "error",
-} as const;
+};
 
 type BackendStatus = unknown;
 type FrontendStatus = unknown;
 
 type test = [
   Expect<Equal<BackendStatus, 0 | 1 | 2>>,
-  Expect<Equal<FrontendStatus, "pending" | "success" | "error">>,
+  Expect<Equal<FrontendStatus, "pending" | "success" | "error">>
 ];

From 9cf88fc4b8317f76ede202da1ed9faa92b092f66 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 22 Jun 2023 10:42:54 +0100
Subject: [PATCH 038/165] Changed 31 solution

---
 src/04-advanced-props/31-as-const.solution.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/04-advanced-props/31-as-const.solution.ts b/src/04-advanced-props/31-as-const.solution.ts
index 1dfcd79..92507b2 100644
--- a/src/04-advanced-props/31-as-const.solution.ts
+++ b/src/04-advanced-props/31-as-const.solution.ts
@@ -6,10 +6,12 @@ const BACKEND_TO_FRONTEND_STATUS_MAP = {
   2: "error",
 } as const;
 
-type BackendStatus = keyof typeof BACKEND_TO_FRONTEND_STATUS_MAP;
-type FrontendStatus = (typeof BACKEND_TO_FRONTEND_STATUS_MAP)[BackendStatus];
+type BackendStatusMap = typeof BACKEND_TO_FRONTEND_STATUS_MAP;
+
+type BackendStatus = keyof BackendStatusMap;
+type FrontendStatus = BackendStatusMap[BackendStatus];
 
 type test = [
   Expect<Equal<BackendStatus, 0 | 1 | 2>>,
-  Expect<Equal<FrontendStatus, "pending" | "success" | "error">>,
+  Expect<Equal<FrontendStatus, "pending" | "success" | "error">>
 ];

From 0788d790eea18c92cc45c91e5bb3f0739917cc3f Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 22 Jun 2023 10:46:13 +0100
Subject: [PATCH 039/165] Added ts-expect-error

---
 .../32-satisfies-vs-annotation-vs-as.problem.tsx               | 2 +-
 .../32-satisfies-vs-annotation-vs-as.solution.tsx              | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx b/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx
index b8dbb34..dc99375 100644
--- a/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx
+++ b/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx
@@ -3,7 +3,7 @@ import { Equal, Expect } from "../helpers/type-utils";
 
 const buttonProps = {
   type: "button",
-  // This should be erroring! Why isn't it?
+  // @ts-expect-error
   illegalProperty: "I AM ILLEGAL",
 };
 
diff --git a/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx b/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx
index ae9f877..c625247 100644
--- a/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx
+++ b/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx
@@ -4,8 +4,9 @@ import { Equal, Expect } from "../helpers/type-utils";
 const buttonProps = {
   type: "button",
   // This should be erroring! Why isn't it?
+  // @ts-expect-error
   illegalProperty: "I AM ILLEGAL",
-} satisfies ComponentProps<"button">;
+};
 
 <>
   <button {...buttonProps}>Click Me!</button>

From c6f1f8d68b07cc99291c87adada121816f3ac5fe Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 22 Jun 2023 10:55:01 +0100
Subject: [PATCH 040/165] Fixed 32 solution

---
 .../32-satisfies-vs-annotation-vs-as.solution.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx b/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx
index c625247..05e5a67 100644
--- a/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx
+++ b/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx
@@ -6,7 +6,7 @@ const buttonProps = {
   // This should be erroring! Why isn't it?
   // @ts-expect-error
   illegalProperty: "I AM ILLEGAL",
-};
+} satisfies ComponentProps<"button">;
 
 <>
   <button {...buttonProps}>Click Me!</button>

From 8c9424d2b5c2c53349e76f4a744baeec04a1e925 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 22 Jun 2023 10:59:38 +0100
Subject: [PATCH 041/165] Added illegal properties

---
 .../33-prop-groups-with-variants.problem.tsx  |  6 +++
 ...3-prop-groups-with-variants.solution.1.tsx | 49 -------------------
 ...33-prop-groups-with-variants.solution.tsx} |  6 +++
 3 files changed, 12 insertions(+), 49 deletions(-)
 delete mode 100644 src/04-advanced-props/33-prop-groups-with-variants.solution.1.tsx
 rename src/04-advanced-props/{33-prop-groups-with-variants.solution.2.tsx => 33-prop-groups-with-variants.solution.tsx} (86%)

diff --git a/src/04-advanced-props/33-prop-groups-with-variants.problem.tsx b/src/04-advanced-props/33-prop-groups-with-variants.problem.tsx
index f0ab221..e37923d 100644
--- a/src/04-advanced-props/33-prop-groups-with-variants.problem.tsx
+++ b/src/04-advanced-props/33-prop-groups-with-variants.problem.tsx
@@ -4,14 +4,20 @@ const buttonPropsMap = {
   reset: {
     className: "bg-blue-500 text-white",
     type: "reset",
+    // @ts-expect-error
+    illegalProperty: "whatever",
   },
   submit: {
     className: "bg-gray-200 text-black",
     type: "submit",
+    // @ts-expect-error
+    illegalProperty: "whatever",
   },
   next: {
     className: "bg-green-500 text-white",
     type: "button",
+    // @ts-expect-error
+    illegalProperty: "whatever",
   },
 };
 
diff --git a/src/04-advanced-props/33-prop-groups-with-variants.solution.1.tsx b/src/04-advanced-props/33-prop-groups-with-variants.solution.1.tsx
deleted file mode 100644
index d4bd269..0000000
--- a/src/04-advanced-props/33-prop-groups-with-variants.solution.1.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ComponentProps } from "react";
-
-/**
- * Sadly, this doesn't work. By typing the map with a ':', we DO
- * get autocomplete inside buttonPropsMap. BUT we also lose the
- * type safety on the variant in ButtonProps.
- *
- * ButtonProps['variant'] is now typed as string, not
- * 'reset' | 'submit' | 'next'.
- *
- * If only there was a way to get the best of both worlds...
- */
-const buttonPropsMap: Record<string, ComponentProps<"button">> = {
-  reset: {
-    className: "bg-blue-500 text-white",
-    type: "reset",
-  },
-  submit: {
-    className: "bg-gray-200 text-black",
-    type: "submit",
-  },
-  next: {
-    className: "bg-green-500 text-white",
-    type: "button",
-  },
-};
-
-type ButtonProps = {
-  variant: keyof typeof buttonPropsMap;
-};
-
-export const Button = (props: ButtonProps) => {
-  return <button {...buttonPropsMap[props.variant]}>Click me</button>;
-};
-
-const Parent = () => {
-  return (
-    <>
-      <Button variant="next"></Button>
-      <Button variant="reset"></Button>
-      <Button variant="submit"></Button>
-
-      {/* @ts-expect-error */}
-      <Button variant="something"></Button>
-      {/* @ts-expect-error */}
-      <Button></Button>
-    </>
-  );
-};
diff --git a/src/04-advanced-props/33-prop-groups-with-variants.solution.2.tsx b/src/04-advanced-props/33-prop-groups-with-variants.solution.tsx
similarity index 86%
rename from src/04-advanced-props/33-prop-groups-with-variants.solution.2.tsx
rename to src/04-advanced-props/33-prop-groups-with-variants.solution.tsx
index 404a181..2731691 100644
--- a/src/04-advanced-props/33-prop-groups-with-variants.solution.2.tsx
+++ b/src/04-advanced-props/33-prop-groups-with-variants.solution.tsx
@@ -11,14 +11,20 @@ const buttonPropsMap = {
   reset: {
     className: "bg-blue-500 text-white",
     type: "reset",
+    // @ts-expect-error
+    illegalProperty: "whatever",
   },
   submit: {
     className: "bg-gray-200 text-black",
     type: "submit",
+    // @ts-expect-error
+    illegalProperty: "whatever",
   },
   next: {
     className: "bg-green-500 text-white",
     type: "button",
+    // @ts-expect-error
+    illegalProperty: "whatever",
   },
 } satisfies Record<string, ComponentProps<"button">>;
 

From 987bd8f29f2ec9657ff67ca1450a5b1547153a12 Mon Sep 17 00:00:00 2001
From: muratcan <muratcankirdar@gmail.com>
Date: Tue, 27 Jun 2023 21:54:11 +0300
Subject: [PATCH 042/165] fix typo

---
 notes/FUTURE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/notes/FUTURE.md b/notes/FUTURE.md
index 8a2da1b..fc208d4 100644
--- a/notes/FUTURE.md
+++ b/notes/FUTURE.md
@@ -2,6 +2,6 @@
 
 Function overloads in custom hooks?
 function overloads in components?
-Omit, Pick, inferface extends with props
+Omit, Pick, interface extends with props
 Picking props from external libraries
 Running TypeScript on CI

From ef28080f11b0f155cc3035d2696675e122a0a6d4 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 3 Jul 2023 13:07:15 +0100
Subject: [PATCH 043/165] WIP

---
 src/05-generics/33.5-type-helpers.problem.tsx |  0
 ...-type-helpers-with-constraints.problem.tsx |  0
 .../35.5-generic-class-components.problem.tsx | 50 ++++++++++++
 ...35.5-generic-class-components.solution.tsx | 50 ++++++++++++
 ...ence-through-multiple-helpers.problem.tsx} | 10 ++-
 ...nce-through-multiple-helpers.solution.tsx} | 10 ++-
 ...inference-flow-with-constraints.problem.ts | 74 ++++++++++++++++++
 ...nference-flow-with-constraints.solution.ts | 78 +++++++++++++++++++
 .../37.5-intro-to-const-generics.problem.tsx  |  0
 src/fake-external-lib/index.ts                | 22 ++++++
 10 files changed, 286 insertions(+), 8 deletions(-)
 create mode 100644 src/05-generics/33.5-type-helpers.problem.tsx
 create mode 100644 src/05-generics/33.6-type-helpers-with-constraints.problem.tsx
 create mode 100644 src/05-generics/35.5-generic-class-components.problem.tsx
 create mode 100644 src/05-generics/35.5-generic-class-components.solution.tsx
 rename src/05-generics/{37-button-group.problem.tsx => 37-generic-inference-through-multiple-helpers.problem.tsx} (93%)
 rename src/05-generics/{37-button-group.solution.tsx => 37-generic-inference-through-multiple-helpers.solution.tsx} (88%)
 create mode 100644 src/05-generics/37.2-inference-flow-with-constraints.problem.ts
 create mode 100644 src/05-generics/37.2-inference-flow-with-constraints.solution.ts
 create mode 100644 src/05-generics/37.5-intro-to-const-generics.problem.tsx

diff --git a/src/05-generics/33.5-type-helpers.problem.tsx b/src/05-generics/33.5-type-helpers.problem.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/05-generics/33.6-type-helpers-with-constraints.problem.tsx b/src/05-generics/33.6-type-helpers-with-constraints.problem.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/05-generics/35.5-generic-class-components.problem.tsx b/src/05-generics/35.5-generic-class-components.problem.tsx
new file mode 100644
index 0000000..5f54d3c
--- /dev/null
+++ b/src/05-generics/35.5-generic-class-components.problem.tsx
@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface TableProps {
+  rows: any[];
+  renderRow: (row: any) => ReactNode;
+}
+
+export class Table extends React.Component<TableProps> {
+  render(): ReactNode {
+    return (
+      <table>
+        <tbody>
+          {this.props.rows.map((row) => (
+            <tr>{this.props.renderRow(row)}</tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+const data = [
+  {
+    id: 1,
+    name: "John",
+  },
+];
+
+export const Parent = () => {
+  return (
+    <div>
+      <Table rows={data} renderRow={(row) => <td>{row.name}</td>} />
+      <Table
+        rows={data}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, { id: number; name: string }>>;
+          return (
+            <td>
+              {
+                // @ts-expect-error
+                row.doesNotExist
+              }
+            </td>
+          );
+        }}
+      ></Table>
+    </div>
+  );
+};
diff --git a/src/05-generics/35.5-generic-class-components.solution.tsx b/src/05-generics/35.5-generic-class-components.solution.tsx
new file mode 100644
index 0000000..da434e8
--- /dev/null
+++ b/src/05-generics/35.5-generic-class-components.solution.tsx
@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface TableProps<T> {
+  rows: T[];
+  renderRow: (row: T) => ReactNode;
+}
+
+export class Table<T> extends React.Component<TableProps<T>> {
+  render(): ReactNode {
+    return (
+      <table>
+        <tbody>
+          {this.props.rows.map((row) => (
+            <tr>{this.props.renderRow(row)}</tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+const data = [
+  {
+    id: 1,
+    name: "John",
+  },
+];
+
+export const Parent = () => {
+  return (
+    <div>
+      <Table rows={data} renderRow={(row) => <td>{row.name}</td>} />
+      <Table
+        rows={data}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, { id: number; name: string }>>;
+          return (
+            <td>
+              {
+                // @ts-expect-error
+                row.doesNotExist
+              }
+            </td>
+          );
+        }}
+      ></Table>
+    </div>
+  );
+};
diff --git a/src/05-generics/37-button-group.problem.tsx b/src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx
similarity index 93%
rename from src/05-generics/37-button-group.problem.tsx
rename to src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx
index fd16b69..f9a7008 100644
--- a/src/05-generics/37-button-group.problem.tsx
+++ b/src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx
@@ -1,10 +1,12 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
+interface Button {
+  value: string;
+  label: string;
+}
+
 interface ButtonGroupProps {
-  buttons: {
-    value: string;
-    label: string;
-  }[];
+  buttons: Button[];
   onClick: (value: string) => void;
 }
 
diff --git a/src/05-generics/37-button-group.solution.tsx b/src/05-generics/37-generic-inference-through-multiple-helpers.solution.tsx
similarity index 88%
rename from src/05-generics/37-button-group.solution.tsx
rename to src/05-generics/37-generic-inference-through-multiple-helpers.solution.tsx
index 287ce93..c9a79e9 100644
--- a/src/05-generics/37-button-group.solution.tsx
+++ b/src/05-generics/37-generic-inference-through-multiple-helpers.solution.tsx
@@ -1,10 +1,12 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
+interface Button<TValue extends string> {
+  value: TValue;
+  label: string;
+}
+
 interface ButtonGroupProps<TValue extends string> {
-  buttons: {
-    value: TValue;
-    label: string;
-  }[];
+  buttons: Button<TValue>[];
   onClick: (value: TValue) => void;
 }
 
diff --git a/src/05-generics/37.2-inference-flow-with-constraints.problem.ts b/src/05-generics/37.2-inference-flow-with-constraints.problem.ts
new file mode 100644
index 0000000..9aae30b
--- /dev/null
+++ b/src/05-generics/37.2-inference-flow-with-constraints.problem.ts
@@ -0,0 +1,74 @@
+import { createUser } from "fake-external-lib";
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+type Mutation = (...args: any[]) => Promise<any>;
+
+interface UseMutationReturn {
+  mutate: Mutation;
+  isLoading: boolean;
+}
+
+interface UseMutationOptions {
+  mutation: Mutation;
+}
+
+export const useMutation = (opts: UseMutationOptions): UseMutationReturn => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return {
+    mutate: async (...args) => {
+      setIsLoading(true);
+
+      try {
+        const result = await opts.mutation(...args);
+        return result;
+      } catch (e) {
+        throw e;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    isLoading,
+  };
+};
+
+const mutation = useMutation({
+  mutation: createUser,
+});
+
+mutation.mutate({ name: "John Doe", email: "john@doe.com" });
+
+// @ts-expect-error email missing!
+mutation.mutate({ name: "John Doe" });
+
+mutation.mutate(
+  {
+    name: "John Doe",
+    email: "john@doe.com",
+  },
+  {
+    throwOnError: true,
+    // @ts-expect-error extra prop
+    extra: "oh dear",
+  },
+);
+
+type test = [
+  Expect<Equal<typeof mutation.isLoading, boolean>>,
+  Expect<
+    Equal<
+      typeof mutation.mutate,
+      (
+        user: { name: string; email: string },
+        opts?: {
+          throwOnError?: boolean;
+        },
+      ) => Promise<{
+        id: string;
+        name: string;
+        email: string;
+      }>
+    >
+  >,
+];
diff --git a/src/05-generics/37.2-inference-flow-with-constraints.solution.ts b/src/05-generics/37.2-inference-flow-with-constraints.solution.ts
new file mode 100644
index 0000000..a4f7b56
--- /dev/null
+++ b/src/05-generics/37.2-inference-flow-with-constraints.solution.ts
@@ -0,0 +1,78 @@
+import { createUser } from "fake-external-lib";
+import { useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+type Mutation<TArgs extends any[], TResult> = (
+  ...args: TArgs
+) => Promise<TResult>;
+
+interface UseMutationReturn<TArgs extends any[], TResult> {
+  mutate: Mutation<TArgs, TResult>;
+  isLoading: boolean;
+}
+
+interface UseMutationOptions<TArgs extends any[], TResult> {
+  mutation: Mutation<TArgs, TResult>;
+}
+
+export const useMutation = <TArgs extends any[], TResult>(
+  opts: UseMutationOptions<TArgs, TResult>,
+): UseMutationReturn<TArgs, TResult> => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return {
+    mutate: async (...args) => {
+      setIsLoading(true);
+
+      try {
+        const result = await opts.mutation(...args);
+        return result;
+      } catch (e) {
+        throw e;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    isLoading,
+  };
+};
+
+const mutation = useMutation({
+  mutation: createUser,
+});
+
+mutation.mutate({ name: "John Doe", email: "john@doe.com" });
+
+// @ts-expect-error email missing!
+mutation.mutate({ name: "John Doe" });
+
+mutation.mutate(
+  {
+    name: "John Doe",
+    email: "john@doe.com",
+  },
+  {
+    throwOnError: true,
+    // @ts-expect-error extra prop
+    extra: "oh dear",
+  },
+);
+
+type test = [
+  Expect<Equal<typeof mutation.isLoading, boolean>>,
+  Expect<
+    Equal<
+      typeof mutation.mutate,
+      (
+        user: { name: string; email: string },
+        opts?: {
+          throwOnError?: boolean;
+        },
+      ) => Promise<{
+        id: string;
+        name: string;
+        email: string;
+      }>
+    >
+  >,
+];
diff --git a/src/05-generics/37.5-intro-to-const-generics.problem.tsx b/src/05-generics/37.5-intro-to-const-generics.problem.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/fake-external-lib/index.ts b/src/fake-external-lib/index.ts
index b8802d4..a839398 100644
--- a/src/fake-external-lib/index.ts
+++ b/src/fake-external-lib/index.ts
@@ -1,3 +1,25 @@
+/**
+ * A fake function to create a user
+ */
+export const createUser = (
+  user: {
+    name: string;
+    email: string;
+  },
+  opts?: {
+    throwOnError?: boolean;
+  },
+): Promise<{
+  id: string;
+  name: string;
+  email: string;
+}> => {
+  return fetch("/user", {
+    method: "POST",
+    body: JSON.stringify(user),
+  }).then((response) => response.json());
+};
+
 /**
  * A fake auth token hook.
  */

From 3930e152aaedd40317c58f65535bb6bd0ccef1c0 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 3 Jul 2023 13:07:55 +0100
Subject: [PATCH 044/165] Updated snapshots

---
 scripts/tests/__snapshots__/all.test.ts.snap | 762 +++++++++++--------
 1 file changed, 453 insertions(+), 309 deletions(-)

diff --git a/scripts/tests/__snapshots__/all.test.ts.snap b/scripts/tests/__snapshots__/all.test.ts.snap
index ee70f0c..b5a7a33 100644
--- a/scripts/tests/__snapshots__/all.test.ts.snap
+++ b/scripts/tests/__snapshots__/all.test.ts.snap
@@ -8,8 +8,9 @@ src/02-components/04-typing-components.problem.tsx(13,15): error TS2322: Type '{
   Property 'className' does not exist on type 'IntrinsicAttributes'.
 src/02-components/05-typing-components-as-functions.problem.tsx(7,1): error TS2578: Unused '@ts-expect-error' directive.
 src/02-components/05-typing-components-as-functions.problem.tsx(17,8): error TS2786: 'Button' cannot be used as a JSX component.
-  Its return type '{ ohDear: string; }' is not a valid JSX element.
-    Type '{ ohDear: string; }' is missing the following properties from type 'ReactElement<any, any>': type, props, key
+  Its type '(props: Props) => { ohDear: string; }' is not a valid JSX element type.
+    Type '(props: Props) => { ohDear: string; }' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
+      Type '{ ohDear: string; }' is not assignable to type 'ReactNode'.
 src/02-components/06-typing-children.problem.tsx(4,25): error TS2339: Property 'children' does not exist on type '{}'.
 src/02-components/06-typing-children.problem.tsx(10,8): error TS2578: Unused '@ts-expect-error' directive.
 src/02-components/06-typing-children.problem.tsx(12,8): error TS2559: Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.
@@ -56,104 +57,153 @@ src/03-hooks/21-use-reducer.problem.ts(7,23): error TS18046: 'state' is of type
 src/03-hooks/21-use-reducer.problem.ts(7,37): error TS18046: 'action' is of type 'unknown'.
 src/03-hooks/21-use-reducer.problem.ts(9,23): error TS18046: 'state' is of type 'unknown'.
 src/03-hooks/21-use-reducer.problem.ts(9,37): error TS18046: 'action' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(17,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/03-hooks/21-use-reducer.problem.ts(21,1): error TS2578: Unused '@ts-expect-error' directive.
 src/03-hooks/21-use-reducer.problem.ts(24,1): error TS2578: Unused '@ts-expect-error' directive.
 src/03-hooks/21-use-reducer.problem.ts(27,1): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/22-discriminated-union-props.problem.tsx(27,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/23-destructuring-discriminated-unions.problem.tsx(13,34): error TS2339: Property 'title' does not exist on type 'ModalProps'.
-src/04-advanced-components/23-destructuring-discriminated-unions.solution.1.tsx(17,31): error TS2339: Property 'title' does not exist on type '{} | { title: string; }'.
+src/04-advanced-props/22-discriminated-union-props.problem.tsx(34,9): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx(19,34): error TS2339: Property 'title' does not exist on type 'ModalProps'.
+src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx(18,31): error TS2339: Property 'title' does not exist on type '{} | { title: string; }'.
   Property 'title' does not exist on type '{}'.
-src/04-advanced-components/24-discriminated-union-with-other-props.problem.tsx(24,9): error TS2322: Type '{ buttonColor: string; variant: \\"no-title\\"; title: string; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.
+src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(21,36): error TS2339: Property 'buttonColor' does not exist on type '{ variant: \\"no-title\\"; }'.
+src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(34,36): error TS2339: Property 'buttonColor' does not exist on type '{ variant: \\"title\\"; title: string; }'.
+src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(50,9): error TS2322: Type '{ buttonColor: string; variant: \\"no-title\\"; title: string; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.
   Property 'buttonColor' does not exist on type 'IntrinsicAttributes & { variant: \\"no-title\\"; }'.
-src/04-advanced-components/24-discriminated-union-with-other-props.problem.tsx(26,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/24-discriminated-union-with-other-props.problem.tsx(29,44): error TS2322: Type '{ variant: \\"title\\"; title: string; buttonColor: string; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.
+src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(52,9): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(55,44): error TS2322: Type '{ variant: \\"title\\"; title: string; buttonColor: string; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.
   Property 'buttonColor' does not exist on type 'IntrinsicAttributes & { variant: \\"title\\"; title: string; }'.
-src/04-advanced-components/25-either-all-these-props-or-none.problem.tsx(30,8): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/25-either-all-these-props-or-none.problem.tsx(33,8): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(16,10): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(19,12): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(22,14): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(28,21): error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ text: (props: any) => Element; number: (props: any) => Element; password: (props: any) => Element; }'.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(28,32): error TS18046: 'props' is of type 'unknown'.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(29,25): error TS2698: Spread types may only be created from object types.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(34,5): error TS2322: Type '{ type: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(35,16): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(37,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(40,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx(41,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(8,30): error TS2345: Argument of type 'ReactNode' is not assignable to parameter of type '(value: number, index: number, array: number[]) => ReactNode'.
+src/04-advanced-props/25-toggle-props.problem.tsx(38,5): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/25-toggle-props.problem.tsx(42,4): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx(40,8): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx(43,8): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(15,30): error TS2345: Argument of type 'ReactNode' is not assignable to parameter of type '(value: number, index: number, array: number[]) => ReactNode'.
   Type 'undefined' is not assignable to type '(value: number, index: number, array: number[]) => ReactNode'.
-src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(15,19): error TS2322: Type '(index: any) => Element' is not assignable to type 'ReactNode'.
-src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(15,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(16,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(21,19): error TS2322: Type '(index: any) => null' is not assignable to type 'ReactNode'.
-src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(21,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(26,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(30,9): error TS2322: Type '(index: any) => any' is not assignable to type 'ReactNode'.
-src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx(30,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx(30,9): error TS2322: Type '(index: number) => number' is not assignable to type 'FC<number>'.
-  Type 'number' is not assignable to type 'ReactElement<any, any>'.
-src/04-advanced-components/29-toggle-props.problem.tsx(25,5): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/29-toggle-props.problem.tsx(29,4): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/30-generic-props.problem.tsx(38,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/30-generic-props.problem.tsx(50,17): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-components/33-prop-groups-with-variants.problem.tsx(23,11): error TS2322: Type '{ children: string; className: string; type: string; } | { children: string; className: string; type: string; } | { children: string; className: string; type: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
-  Type '{ children: string; className: string; type: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
-    Type '{ children: string; className: string; type: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(22,19): error TS2322: Type '(index: any) => Element' is not assignable to type 'ReactNode'.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(22,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(23,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(28,19): error TS2322: Type '(index: any) => null' is not assignable to type 'ReactNode'.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(28,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(33,9): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(37,9): error TS2322: Type '(index: any) => any' is not assignable to type 'ReactNode'.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(37,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
+src/04-advanced-props/31-as-const.problem.ts(13,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-props/31-as-const.problem.ts(14,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(6,3): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(11,4): error TS2322: Type '{ children: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
+  Type '{ children: string; type: string; illegalProperty: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
+    Types of property 'type' are incompatible.
+      Type 'string' is not assignable to type '\\"button\\" | \\"submit\\" | \\"reset\\" | undefined'.
+src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(16,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(7,5): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(13,5): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(19,5): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(48,11): error TS2322: Type '{ children: string; className: string; type: string; illegalProperty: string; } | { children: string; className: string; type: string; illegalProperty: string; } | { children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
+  Type '{ children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
+    Type '{ children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
       Types of property 'type' are incompatible.
         Type 'string' is not assignable to type '\\"button\\" | \\"submit\\" | \\"reset\\" | undefined'.
-src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx(33,8): error TS2578: Unused '@ts-expect-error' directive.
-src/05-advanced-hooks/34-tuple-return-type.problem.ts(13,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/34-tuple-return-type.problem.ts(14,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/35-generic-hooks.problem.ts(16,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/35-generic-hooks.problem.ts(18,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/35-generic-hooks.problem.ts(28,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/35-generic-hooks.problem.ts(29,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/36-function-overloads-in-hooks.problem.ts(25,13): error TS2554: Expected 1 arguments, but got 0.
-src/05-advanced-hooks/36-function-overloads-in-hooks.problem.ts(28,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/36-function-overloads-in-hooks.problem.ts(30,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/37-generic-localstorage-hook.problem.ts(15,30): error TS2558: Expected 0 type arguments, but got 1.
-src/05-advanced-hooks/37-generic-localstorage-hook.problem.ts(22,24): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/37-generic-localstorage-hook.problem.ts(28,5): error TS2578: Unused '@ts-expect-error' directive.
-src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.problem.tsx(26,24): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.problem.tsx(32,5): error TS2578: Unused '@ts-expect-error' directive.
-src/05-advanced-hooks/39-unions-in-usestate.problem.tsx(49,3): error TS2578: Unused '@ts-expect-error' directive.
-src/05-advanced-hooks/39-unions-in-usestate.problem.tsx(66,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx(37,3): error TS2578: Unused '@ts-expect-error' directive.
-src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx(40,3): error TS2578: Unused '@ts-expect-error' directive.
-src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx(43,3): error TS2578: Unused '@ts-expect-error' directive.
-src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx(31,25): error TS18048: 'value' is possibly 'undefined'.
-src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx(31,31): error TS2339: Property 'message' does not exist on type 'Error | { title: string; }'.
+src/05-generics/34-generic-props.problem.tsx(41,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/34-generic-props.problem.tsx(45,17): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/35-generic-hooks.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/35-generic-hooks.problem.ts(25,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/35-generic-hooks.problem.ts(35,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/35-generic-hooks.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/35.5-generic-class-components.problem.tsx(37,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/35.5-generic-class-components.problem.tsx(41,17): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/36-generic-localstorage-hook.problem.ts(28,30): error TS2558: Expected 0 type arguments, but got 1.
+src/05-generics/36-generic-localstorage-hook.problem.ts(35,24): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/36-generic-localstorage-hook.problem.ts(41,5): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx(44,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/37.2-inference-flow-with-constraints.problem.ts(42,1): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/37.2-inference-flow-with-constraints.problem.ts(52,5): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/37.2-inference-flow-with-constraints.problem.ts(60,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/38-button-group.problem.tsx(46,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/39-lazy-load-component.problem.tsx(18,44): error TS2345: Argument of type 'unknown' is not assignable to parameter of type '() => Promise<{ default: ComponentType<any>; }>'.
+src/05-generics/39-lazy-load-component.problem.tsx(28,62): error TS2322: Type '{ loader: () => Promise<typeof import(\\"/src/fake-external-lib/component\\")>; id: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
+  Property 'id' does not exist on type 'IntrinsicAttributes & Props'.
+src/05-generics/39-lazy-load-component.problem.tsx(36,4): error TS2578: Unused '@ts-expect-error' directive.
+src/06-advanced-hooks/41-tuple-return-type.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/41-tuple-return-type.problem.ts(24,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/42-unions-in-usestate.problem.tsx(45,3): error TS2578: Unused '@ts-expect-error' directive.
+src/06-advanced-hooks/42-unions-in-usestate.problem.tsx(62,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx(44,3): error TS2578: Unused '@ts-expect-error' directive.
+src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx(47,3): error TS2578: Unused '@ts-expect-error' directive.
+src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx(50,3): error TS2578: Unused '@ts-expect-error' directive.
+src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx(46,25): error TS18048: 'value' is possibly 'undefined'.
+src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx(46,31): error TS2339: Property 'message' does not exist on type 'Error | { title: string; }'.
   Property 'message' does not exist on type '{ title: string; }'.
-src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx(34,16): error TS18048: 'value' is possibly 'undefined'.
-src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx(34,22): error TS2339: Property 'title' does not exist on type 'Error | { title: string; }'.
+src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx(49,16): error TS18048: 'value' is possibly 'undefined'.
+src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx(49,22): error TS2339: Property 'title' does not exist on type 'Error | { title: string; }'.
   Property 'title' does not exist on type 'Error'.
-src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx(23,4): error TS2786: 'Component2' cannot be used as a JSX component.
-  Its return type 'ReactNode' is not a valid JSX element.
-    Type 'undefined' is not assignable to type 'Element | null'.
-src/06-types-deep-dive/47-add-new-global-element.problem.tsx(2,3): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
-src/06-types-deep-dive/47-add-new-global-element.problem.tsx(2,23): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
-src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx(6,7): error TS2717: Subsequent property declarations must have the same type.  Property 'div' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>', but here has type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { something?: string | undefined; }'.
-src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx(13,30): error TS2322: Type '{ something: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-  Property 'something' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-src/07-advanced-patterns/51-required-context.problem.tsx(20,55): error TS2558: Expected 0 type arguments, but got 1.
-src/07-advanced-patterns/51-required-context.problem.tsx(24,57): error TS2558: Expected 0 type arguments, but got 1.
-src/07-advanced-patterns/51-required-context.problem.tsx(32,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-advanced-patterns/51-required-context.problem.tsx(43,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-advanced-patterns/51-required-context.problem.tsx(57,21): error TS2322: Type '{ name: string; }' is not assignable to type 'null'.
-src/07-advanced-patterns/51-required-context.problem.tsx(59,11): error TS2322: Type '{ primaryColor: string; }' is not assignable to type 'null'.
-src/07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-advanced-patterns/55-as-prop.problem.tsx(13,5): error TS2578: Unused '@ts-expect-error' directive.
-src/07-advanced-patterns/55-as-prop.solution.2.tsx(10,11): error TS2322: Type '{ as: TAs; ref?: LegacyRef<HTMLDivElement> | undefined; key?: Key | null | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | ... 2 more ... | undefined; ... 259 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } | ... 122 more ... | { ...; }' is not assignable to type 'IntrinsicAttributes'.
-  Type '{ as: TAs; id: string; }' has no properties in common with type 'IntrinsicAttributes'.
-src/07-advanced-patterns/56-as-prop-with-custom-components.problem.tsx(5,11): error TS2604: JSX element type 'Comp' does not have any construct or call signatures.
-src/07-advanced-patterns/56-as-prop-with-custom-components.problem.tsx(12,22): error TS2322: Type '{ as: (props: { href: string; children?: ReactNode; }) => Element; href: string; }' is not assignable to type 'IntrinsicAttributes & { as: unknown; }'.
+src/06-advanced-hooks/45-use-state-overloads.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts(37,22): error TS2554: Expected 1 arguments, but got 0.
+src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts(40,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts(42,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/07-types-deep-dive/48-understanding-jsx-element.explainer.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
+src/07-types-deep-dive/49-strongly-typing-children.explainer.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
+  Type 'ReactElement<any, any>' is not assignable to type '{ __brand: \\"OPTION_TYPE\\"; } & ReactPortal'.
+    Property '__brand' is missing in type 'ReactElement<any, any>' but required in type '{ __brand: \\"OPTION_TYPE\\"; }'.
+src/07-types-deep-dive/50-understanding-jsx-intrinsic-elements.explainer.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts(15,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts(15,32): error TS2694: Namespace 'React' has no exported member 'MyInterface'.
+src/07-types-deep-dive/52-declaration-merging-in-global-namespace.problem.ts(25,3): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/07-types-deep-dive/53-add-new-global-element.problem.tsx(14,3): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/53-add-new-global-element.problem.tsx(14,23): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(10,8): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
+src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(11,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
+src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(12,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
+src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(13,6): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(14,9): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
+src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(15,12): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
+src/08-advanced-patterns/56-required-context.problem.tsx(33,55): error TS2558: Expected 0 type arguments, but got 1.
+src/08-advanced-patterns/56-required-context.problem.tsx(37,57): error TS2558: Expected 0 type arguments, but got 1.
+src/08-advanced-patterns/56-required-context.problem.tsx(42,16): error TS2554: Expected 1 arguments, but got 0.
+src/08-advanced-patterns/56-required-context.problem.tsx(45,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/56-required-context.problem.tsx(53,17): error TS2554: Expected 1 arguments, but got 0.
+src/08-advanced-patterns/56-required-context.problem.tsx(56,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/56-required-context.problem.tsx(70,21): error TS2322: Type '{ name: string; }' is not assignable to type 'null'.
+src/08-advanced-patterns/56-required-context.problem.tsx(72,11): error TS2322: Type '{ primaryColor: string; }' is not assignable to type 'null'.
+src/08-advanced-patterns/57-render-props.problem.tsx(43,9): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/57-render-props.problem.tsx(44,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/58-forward-ref-with-generics.explainer.1.tsx(45,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/58-forward-ref-with-generics.explainer.2.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/58-forward-ref-with-generics.explainer.3.ts(52,21): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/59-hoc.problem.tsx(43,5): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(16,10): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(19,12): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(22,14): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(28,21): error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ text: (props: any) => Element; number: (props: any) => Element; password: (props: any) => Element; }'.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(28,32): error TS18046: 'props' is of type 'unknown'.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(29,25): error TS2698: Spread types may only be created from object types.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(34,5): error TS2322: Type '{ type: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'type' does not exist on type 'IntrinsicAttributes'.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(35,16): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(37,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(40,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'type' does not exist on type 'IntrinsicAttributes'.
+src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(41,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'type' does not exist on type 'IntrinsicAttributes'.
+src/08-advanced-patterns/61-as-prop.problem.tsx(37,5): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx(14,11): error TS2604: JSX element type 'Comp' does not have any construct or call signatures.
+src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx(14,11): error TS2786: 'Comp' cannot be used as a JSX component.
+  Its type 'unknown' is not a valid JSX element type.
+src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx(21,20): error TS2322: Type '{ as: (props: { href: string; children?: ReactNode; }) => Element; href: string; }' is not assignable to type 'IntrinsicAttributes & { as: unknown; }'.
   Property 'href' does not exist on type 'IntrinsicAttributes & { as: unknown; }'.
+src/09-external-libraries/64-react-hook-form-wrapper.problem.tsx(29,3): error TS2578: Unused '@ts-expect-error' directive.
+src/09-external-libraries/64-react-hook-form-wrapper.problem.tsx(42,5): error TS2344: Type 'boolean' does not satisfy the constraint 'true'.
+src/09-external-libraries/65-react-select.problem.tsx(10,24): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/09-external-libraries/65-react-select.problem.tsx(33,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
+src/09-external-libraries/65-react-select.problem.tsx(36,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/65-react-select.problem.tsx(43,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
+src/09-external-libraries/65-react-select.problem.tsx(45,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/67-react-query-wrapper.problem.ts(30,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/67-react-query-wrapper.problem.ts(44,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/67-react-query-wrapper.problem.ts(50,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 ,"
 `;
 
@@ -470,260 +520,224 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/22-discriminated-union-props.problem.tsx",
-      "name": "/src/04-advanced-components/22-discriminated-union-props.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/22-discriminated-union-props.solution.tsx",
-      "name": "/src/04-advanced-components/22-discriminated-union-props.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/23-destructuring-discriminated-unions.problem.tsx",
-      "name": "/src/04-advanced-components/23-destructuring-discriminated-unions.problem.tsx",
+      "message": "No test found in suite src/04-advanced-props/22-discriminated-union-props.problem.tsx",
+      "name": "/src/04-advanced-props/22-discriminated-union-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/23-destructuring-discriminated-unions.solution.1.tsx",
-      "name": "/src/04-advanced-components/23-destructuring-discriminated-unions.solution.1.tsx",
+      "message": "No test found in suite src/04-advanced-props/22-discriminated-union-props.solution.tsx",
+      "name": "/src/04-advanced-props/22-discriminated-union-props.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/23-destructuring-discriminated-unions.solution.2.tsx",
-      "name": "/src/04-advanced-components/23-destructuring-discriminated-unions.solution.2.tsx",
+      "message": "No test found in suite src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx",
+      "name": "/src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/24-discriminated-union-with-other-props.problem.tsx",
-      "name": "/src/04-advanced-components/24-discriminated-union-with-other-props.problem.tsx",
+      "message": "No test found in suite src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx",
+      "name": "/src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/24-discriminated-union-with-other-props.solution.tsx",
-      "name": "/src/04-advanced-components/24-discriminated-union-with-other-props.solution.tsx",
+      "message": "No test found in suite src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx",
+      "name": "/src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/25-either-all-these-props-or-none.problem.tsx",
-      "name": "/src/04-advanced-components/25-either-all-these-props-or-none.problem.tsx",
+      "message": "No test found in suite src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx",
+      "name": "/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/25-either-all-these-props-or-none.solution.1.tsx",
-      "name": "/src/04-advanced-components/25-either-all-these-props-or-none.solution.1.tsx",
+      "message": "No test found in suite src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx",
+      "name": "/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/25-either-all-these-props-or-none.solution.2.tsx",
-      "name": "/src/04-advanced-components/25-either-all-these-props-or-none.solution.2.tsx",
+      "message": "No test found in suite src/04-advanced-props/25-toggle-props.problem.tsx",
+      "name": "/src/04-advanced-props/25-toggle-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/25-either-all-these-props-or-none.solution.3.tsx",
-      "name": "/src/04-advanced-components/25-either-all-these-props-or-none.solution.3.tsx",
+      "message": "No test found in suite src/04-advanced-props/25-toggle-props.solution.tsx",
+      "name": "/src/04-advanced-props/25-toggle-props.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/26-partial-autocomplete.problem.tsx",
-      "name": "/src/04-advanced-components/26-partial-autocomplete.problem.tsx",
+      "message": "No test found in suite src/04-advanced-props/26-empty-object-type.explainer.tsx",
+      "name": "/src/04-advanced-props/26-empty-object-type.explainer.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/26-partial-autocomplete.solution.1.tsx",
-      "name": "/src/04-advanced-components/26-partial-autocomplete.solution.1.tsx",
+      "message": "No test found in suite src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx",
+      "name": "/src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/26-partial-autocomplete.solution.2.tsx",
-      "name": "/src/04-advanced-components/26-partial-autocomplete.solution.2.tsx",
+      "message": "No test found in suite src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx",
+      "name": "/src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx",
-      "name": "/src/04-advanced-components/27-record-of-components-with-same-props.problem.tsx",
+      "message": "No test found in suite src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx",
+      "name": "/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx",
-      "name": "/src/04-advanced-components/27-record-of-components-with-same-props.solution.1.tsx",
+      "message": "No test found in suite src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx",
+      "name": "/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx",
-      "name": "/src/04-advanced-components/27-record-of-components-with-same-props.solution.2.tsx",
+      "message": "No test found in suite src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx",
+      "name": "/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx",
-      "name": "/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.problem.tsx",
+      "message": "No test found in suite src/04-advanced-props/29-variants-with-classnames.problem.tsx",
+      "name": "/src/04-advanced-props/29-variants-with-classnames.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx",
-      "name": "/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx",
+      "message": "No test found in suite src/04-advanced-props/29-variants-with-classnames.solution.tsx",
+      "name": "/src/04-advanced-props/29-variants-with-classnames.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx",
-      "name": "/src/04-advanced-components/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx",
+      "message": "No test found in suite src/04-advanced-props/30-partial-autocomplete.problem.tsx",
+      "name": "/src/04-advanced-props/30-partial-autocomplete.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/29-toggle-props.problem.tsx",
-      "name": "/src/04-advanced-components/29-toggle-props.problem.tsx",
+      "message": "No test found in suite src/04-advanced-props/30-partial-autocomplete.solution.tsx",
+      "name": "/src/04-advanced-props/30-partial-autocomplete.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/29-toggle-props.solution.tsx",
-      "name": "/src/04-advanced-components/29-toggle-props.solution.tsx",
+      "message": "No test found in suite src/04-advanced-props/31-as-const.problem.ts",
+      "name": "/src/04-advanced-props/31-as-const.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/30-generic-props.problem.tsx",
-      "name": "/src/04-advanced-components/30-generic-props.problem.tsx",
+      "message": "No test found in suite src/04-advanced-props/31-as-const.solution.ts",
+      "name": "/src/04-advanced-props/31-as-const.solution.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/30-generic-props.solution.tsx",
-      "name": "/src/04-advanced-components/30-generic-props.solution.tsx",
+      "message": "No test found in suite src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx",
+      "name": "/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx",
-      "name": "/src/04-advanced-components/31-generics-vs-discriminated-unions.problem.tsx",
+      "message": "No test found in suite src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx",
+      "name": "/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx",
-      "name": "/src/04-advanced-components/31-generics-vs-discriminated-unions.solution.tsx",
+      "message": "No test found in suite src/04-advanced-props/33-prop-groups-with-variants.problem.tsx",
+      "name": "/src/04-advanced-props/33-prop-groups-with-variants.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/32-variants-with-classnames.problem.tsx",
-      "name": "/src/04-advanced-components/32-variants-with-classnames.problem.tsx",
+      "message": "No test found in suite src/04-advanced-props/33-prop-groups-with-variants.solution.tsx",
+      "name": "/src/04-advanced-props/33-prop-groups-with-variants.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/32-variants-with-classnames.solution.tsx",
-      "name": "/src/04-advanced-components/32-variants-with-classnames.solution.tsx",
+      "message": "No test found in suite src/05-generics/33.5-type-helpers.problem.tsx",
+      "name": "/src/05-generics/33.5-type-helpers.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/33-prop-groups-with-variants.problem.tsx",
-      "name": "/src/04-advanced-components/33-prop-groups-with-variants.problem.tsx",
+      "message": "No test found in suite src/05-generics/33.6-type-helpers-with-constraints.problem.tsx",
+      "name": "/src/05-generics/33.6-type-helpers-with-constraints.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx",
-      "name": "/src/04-advanced-components/33-prop-groups-with-variants.solution.1.tsx",
+      "message": "No test found in suite src/05-generics/34-generic-props.problem.tsx",
+      "name": "/src/05-generics/34-generic-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx",
-      "name": "/src/04-advanced-components/33-prop-groups-with-variants.solution.2.tsx",
+      "message": "No test found in suite src/05-generics/34-generic-props.solution.tsx",
+      "name": "/src/05-generics/34-generic-props.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/34-tuple-return-type.problem.ts",
+      "name": "/src/05-generics/35-generic-hooks.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/34-tuple-return-type.solution.1.ts",
+      "name": "/src/05-generics/35-generic-hooks.solution.1.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/34-tuple-return-type.solution.2.ts",
+      "name": "/src/05-generics/35-generic-hooks.solution.2.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/35-generic-hooks.problem.ts",
+      "name": "/src/05-generics/35-generic-hooks.solution.3.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/35-generic-hooks.solution.1.ts",
+      "name": "/src/05-generics/35-generic-hooks.solution.4.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/35-generic-hooks.solution.2.ts",
+      "name": "/src/05-generics/35-generic-hooks.solution.5.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/35-generic-hooks.solution.3.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/35-generic-hooks.solution.4.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/35-generic-hooks.solution.5.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/36-function-overloads-in-hooks.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/36-function-overloads-in-hooks.solution.1.ts",
+      "message": "React is not defined",
+      "name": "/src/05-generics/35.5-generic-class-components.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-advanced-hooks/36-function-overloads-in-hooks.solution.2.ts",
+      "message": "React is not defined",
+      "name": "/src/05-generics/35.5-generic-class-components.solution.tsx",
       "status": "passed",
     },
     {
@@ -748,7 +762,7 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
         },
       ],
       "message": "",
-      "name": "/src/05-advanced-hooks/37-generic-localstorage-hook.problem.ts",
+      "name": "/src/05-generics/36-generic-localstorage-hook.problem.ts",
       "status": "passed",
     },
     {
@@ -773,273 +787,403 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
         },
       ],
       "message": "",
-      "name": "/src/05-advanced-hooks/37-generic-localstorage-hook.solution.ts",
+      "name": "/src/05-generics/36-generic-localstorage-hook.solution.ts",
       "status": "passed",
     },
     {
-      "assertionResults": [
-        {
-          "ancestorTitles": [
-            "",
-          ],
-          "failureMessages": [],
-          "fullName": " Should let you set and get values",
-          "status": "passed",
-          "title": "Should let you set and get values",
-        },
-        {
-          "ancestorTitles": [
-            "",
-          ],
-          "failureMessages": [],
-          "fullName": " Should not let you set a value that is not the same type as the type argument passed",
-          "status": "passed",
-          "title": "Should not let you set a value that is not the same type as the type argument passed",
-        },
-      ],
-      "message": "",
-      "name": "/src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.problem.tsx",
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx",
+      "name": "/src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx",
       "status": "passed",
     },
     {
-      "assertionResults": [
-        {
-          "ancestorTitles": [
-            "",
-          ],
-          "failureMessages": [],
-          "fullName": " Should let you set and get values",
-          "status": "passed",
-          "title": "Should let you set and get values",
-        },
-        {
-          "ancestorTitles": [
-            "",
-          ],
-          "failureMessages": [],
-          "fullName": " Should not let you set a value that is not the same type as the type argument passed",
-          "status": "passed",
-          "title": "Should not let you set a value that is not the same type as the type argument passed",
-        },
-      ],
-      "message": "",
-      "name": "/src/05-advanced-hooks/38-generic-localstorage-hook-with-zod.solution.tsx",
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/37-generic-inference-through-multiple-helpers.solution.tsx",
+      "name": "/src/05-generics/37-generic-inference-through-multiple-helpers.solution.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/05-generics/37.2-inference-flow-with-constraints.problem.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/05-generics/37.2-inference-flow-with-constraints.solution.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/37.5-intro-to-const-generics.problem.tsx",
+      "name": "/src/05-generics/37.5-intro-to-const-generics.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/38-button-group.problem.tsx",
+      "name": "/src/05-generics/38-button-group.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/38-button-group.solution.1.tsx",
+      "name": "/src/05-generics/38-button-group.solution.1.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/38-button-group.solution.2.tsx",
+      "name": "/src/05-generics/38-button-group.solution.2.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/39-lazy-load-component.problem.tsx",
+      "name": "/src/05-generics/39-lazy-load-component.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/39-lazy-load-component.solution.tsx",
+      "name": "/src/05-generics/39-lazy-load-component.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/39-unions-in-usestate.problem.tsx",
-      "name": "/src/05-advanced-hooks/39-unions-in-usestate.problem.tsx",
+      "message": "No test found in suite src/05-generics/40-generics-vs-discriminated-unions.problem.tsx",
+      "name": "/src/05-generics/40-generics-vs-discriminated-unions.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/39-unions-in-usestate.solution.tsx",
-      "name": "/src/05-advanced-hooks/39-unions-in-usestate.solution.tsx",
+      "message": "No test found in suite src/05-generics/40-generics-vs-discriminated-unions.solution.tsx",
+      "name": "/src/05-generics/40-generics-vs-discriminated-unions.solution.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/06-advanced-hooks/41-tuple-return-type.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx",
-      "name": "/src/05-advanced-hooks/40-discriminated-unions-in-usestate.problem.tsx",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/06-advanced-hooks/41-tuple-return-type.solution.1.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/06-advanced-hooks/41-tuple-return-type.solution.2.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx",
-      "name": "/src/05-advanced-hooks/40-discriminated-unions-in-usestate.solution.tsx",
+      "message": "No test found in suite src/06-advanced-hooks/42-unions-in-usestate.problem.tsx",
+      "name": "/src/06-advanced-hooks/42-unions-in-usestate.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts",
-      "name": "/src/05-advanced-hooks/41-discriminated-union-returns-from-custom-hooks.problem.ts",
+      "message": "No test found in suite src/06-advanced-hooks/42-unions-in-usestate.solution.tsx",
+      "name": "/src/06-advanced-hooks/42-unions-in-usestate.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx",
-      "name": "/src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.problem.tsx",
+      "message": "No test found in suite src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx",
+      "name": "/src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.solution.tsx",
-      "name": "/src/05-advanced-hooks/42-discriminated-tuples-from-custom-hooks.solution.tsx",
+      "message": "No test found in suite src/06-advanced-hooks/43-discriminated-unions-in-usestate.solution.tsx",
+      "name": "/src/06-advanced-hooks/43-discriminated-unions-in-usestate.solution.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx",
+      "name": "/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx",
+      "name": "/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/45-use-state-overloads.problem.ts",
+      "name": "/src/06-advanced-hooks/45-use-state-overloads.problem.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/45-use-state-overloads.solution.1.ts",
+      "name": "/src/06-advanced-hooks/45-use-state-overloads.solution.1.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/45-use-state-overloads.solution.2.ts",
+      "name": "/src/06-advanced-hooks/45-use-state-overloads.solution.2.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/06-advanced-hooks/46-function-overloads-in-hooks.solution.1.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/06-advanced-hooks/46-function-overloads-in-hooks.solution.2.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "React is not defined",
-      "name": "/src/06-types-deep-dive/43-understand-react-namespace-export.explainer.ts",
+      "name": "/src/07-types-deep-dive/47-understand-react-namespace-export.explainer.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/48-understanding-jsx-element.explainer.tsx",
+      "name": "/src/07-types-deep-dive/48-understanding-jsx-element.explainer.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/49-strongly-typing-children.explainer.tsx",
+      "name": "/src/07-types-deep-dive/49-strongly-typing-children.explainer.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/50-understanding-jsx-intrinsic-elements.explainer.tsx",
+      "name": "/src/07-types-deep-dive/50-understanding-jsx-intrinsic-elements.explainer.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts",
+      "name": "/src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/51-appending-to-global-namespace.solution.ts",
+      "name": "/src/07-types-deep-dive/51-appending-to-global-namespace.solution.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/52-declaration-merging-in-global-namespace.problem.ts",
+      "name": "/src/07-types-deep-dive/52-declaration-merging-in-global-namespace.problem.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/52-declaration-merging-in-global-namespace.solution.ts",
+      "name": "/src/07-types-deep-dive/52-declaration-merging-in-global-namespace.solution.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/53-add-new-global-element.problem.tsx",
+      "name": "/src/07-types-deep-dive/53-add-new-global-element.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/53-add-new-global-element.solution.tsx",
+      "name": "/src/07-types-deep-dive/53-add-new-global-element.solution.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/54-html-attributes.explainer.tsx",
+      "name": "/src/07-types-deep-dive/54-html-attributes.explainer.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx",
-      "name": "/src/06-types-deep-dive/44-understanding-jsx-element.explainer.tsx",
+      "message": "No test found in suite src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx",
+      "name": "/src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-types-deep-dive/45-strongly-typing-children.problem.tsx",
-      "name": "/src/06-types-deep-dive/45-strongly-typing-children.problem.tsx",
+      "message": "No test found in suite src/07-types-deep-dive/55-add-attribute-to-all-elements.solution.tsx",
+      "name": "/src/07-types-deep-dive/55-add-attribute-to-all-elements.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-types-deep-dive/46-how-does-react-represent-html.explainer.ts",
-      "name": "/src/06-types-deep-dive/46-how-does-react-represent-html.explainer.ts",
+      "message": "No test found in suite src/08-advanced-patterns/56-required-context.problem.tsx",
+      "name": "/src/08-advanced-patterns/56-required-context.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts",
-      "name": "/src/06-types-deep-dive/46-understanding-jsx-intrinsic-elements.explainer.ts",
+      "message": "No test found in suite src/08-advanced-patterns/56-required-context.solution.1.tsx",
+      "name": "/src/08-advanced-patterns/56-required-context.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-types-deep-dive/47-add-new-global-element.problem.tsx",
-      "name": "/src/06-types-deep-dive/47-add-new-global-element.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/56-required-context.solution.2.tsx",
+      "name": "/src/08-advanced-patterns/56-required-context.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-types-deep-dive/47-add-new-global-element.solution.tsx",
-      "name": "/src/06-types-deep-dive/47-add-new-global-element.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/57-render-props.problem.tsx",
+      "name": "/src/08-advanced-patterns/57-render-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-types-deep-dive/48-add-attribute-to-all-elements.problem.tsx",
-      "name": "/src/06-types-deep-dive/48-add-attribute-to-all-elements.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/57-render-props.solution.tsx",
+      "name": "/src/08-advanced-patterns/57-render-props.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-types-deep-dive/49-add-attribute-to-audio-elements.problem.tsx",
-      "name": "/src/06-types-deep-dive/49-add-attribute-to-audio-elements.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/58-forward-ref-with-generics.explainer.1.tsx",
+      "name": "/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx",
-      "name": "/src/06-types-deep-dive/50-add-attribute-to-div-elements.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/58-forward-ref-with-generics.explainer.2.tsx",
+      "name": "/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/51-required-context.problem.tsx",
-      "name": "/src/07-advanced-patterns/51-required-context.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/58-forward-ref-with-generics.explainer.3.ts",
+      "name": "/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.3.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/51-required-context.solution.1.tsx",
-      "name": "/src/07-advanced-patterns/51-required-context.solution.1.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/59-hoc.problem.tsx",
+      "name": "/src/08-advanced-patterns/59-hoc.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/51-required-context.solution.2.tsx",
-      "name": "/src/07-advanced-patterns/51-required-context.solution.2.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/59-hoc.solution.tsx",
+      "name": "/src/08-advanced-patterns/59-hoc.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/52-compound-components.problem.tsx",
-      "name": "/src/07-advanced-patterns/52-compound-components.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx",
+      "name": "/src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx",
-      "name": "/src/07-advanced-patterns/53-forward-ref-with-generics.explainer.1.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/60-record-of-components-with-same-props.solution.1.tsx",
+      "name": "/src/08-advanced-patterns/60-record-of-components-with-same-props.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx",
-      "name": "/src/07-advanced-patterns/53-forward-ref-with-generics.explainer.2.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/60-record-of-components-with-same-props.solution.2.tsx",
+      "name": "/src/08-advanced-patterns/60-record-of-components-with-same-props.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/54-hoc-problem.tsx",
-      "name": "/src/07-advanced-patterns/54-hoc-problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/61-as-prop.problem.tsx",
+      "name": "/src/08-advanced-patterns/61-as-prop.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/55-as-prop.problem.tsx",
-      "name": "/src/07-advanced-patterns/55-as-prop.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/61-as-prop.solution.1.tsx",
+      "name": "/src/08-advanced-patterns/61-as-prop.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/55-as-prop.solution.1.tsx",
-      "name": "/src/07-advanced-patterns/55-as-prop.solution.1.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/61-as-prop.solution.2.tsx",
+      "name": "/src/08-advanced-patterns/61-as-prop.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/55-as-prop.solution.2.tsx",
-      "name": "/src/07-advanced-patterns/55-as-prop.solution.2.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx",
+      "name": "/src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/56-as-prop-with-custom-components.problem.tsx",
-      "name": "/src/07-advanced-patterns/56-as-prop-with-custom-components.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/62-as-prop-with-custom-components.solution.tsx",
+      "name": "/src/08-advanced-patterns/62-as-prop-with-custom-components.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/56-as-prop-with-custom-components.solution.tsx",
-      "name": "/src/07-advanced-patterns/56-as-prop-with-custom-components.solution.tsx",
+      "message": "Cannot read properties of null (reading 'useRef')",
+      "name": "/src/09-external-libraries/63-react-hook-form.explainer.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/57-render-props.problem.tsx",
-      "name": "/src/07-advanced-patterns/57-render-props.problem.tsx",
+      "message": "Cannot read properties of null (reading 'useRef')",
+      "name": "/src/09-external-libraries/64-react-hook-form-wrapper.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-advanced-patterns/58-render-props-with-generics.problem.tsx",
-      "name": "/src/07-advanced-patterns/58-render-props-with-generics.problem.tsx",
+      "message": "Cannot read properties of null (reading 'useRef')",
+      "name": "/src/09-external-libraries/64-react-hook-form-wrapper.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-external-libraries/59-react-hook-form.problem.tsx",
-      "name": "/src/08-external-libraries/59-react-hook-form.problem.tsx",
+      "message": "No test found in suite src/09-external-libraries/65-react-select.problem.tsx",
+      "name": "/src/09-external-libraries/65-react-select.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-external-libraries/60-react-query.problem.tsx",
-      "name": "/src/08-external-libraries/60-react-query.problem.tsx",
+      "message": "No test found in suite src/09-external-libraries/65-react-select.solution.tsx",
+      "name": "/src/09-external-libraries/65-react-select.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-external-libraries/61-redux-toolkit.problem.tsx",
-      "name": "/src/08-external-libraries/61-redux-toolkit.problem.tsx",
+      "message": "Cannot read properties of null (reading 'useContext')",
+      "name": "/src/09-external-libraries/66-react-query.explainer.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-external-libraries/62-zustand.problem.tsx",
-      "name": "/src/08-external-libraries/62-zustand.problem.tsx",
+      "message": "Cannot read properties of null (reading 'useContext')",
+      "name": "/src/09-external-libraries/67-react-query-wrapper.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-external-libraries/63-reusable-form-library-with-zod.problem.tsx",
-      "name": "/src/08-external-libraries/63-reusable-form-library-with-zod.problem.tsx",
+      "message": "Cannot read properties of null (reading 'useContext')",
+      "name": "/src/09-external-libraries/67-react-query-wrapper.solution.ts",
       "status": "passed",
     },
   ],

From f7342d9485d8ca8434f8fd5bf516e33092ff65a3 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 3 Jul 2023 15:20:27 +0100
Subject: [PATCH 045/165] WIP

---
 ...-type-helpers-with-constraints.problem.tsx |  0
 src/05-generics/34-type-helpers.problem.tsx   | 22 +++++++++
 src/05-generics/34-type-helpers.solution.tsx  | 23 +++++++++
 src/05-generics/35-type-helpers-2.problem.tsx | 48 +++++++++++++++++++
 .../35-type-helpers-2.solution.tsx            | 40 ++++++++++++++++
 ...-type-helpers-with-constraints.problem.tsx | 25 ++++++++++
 ...pe-helpers-with-constraints.solution.1.tsx | 25 ++++++++++
 ...pe-helpers-with-constraints.solution.2.tsx | 25 ++++++++++
 ...oblem.tsx => 37-generic-props.problem.tsx} |  0
 ...tion.tsx => 37-generic-props.solution.tsx} |  0
 .../37.5-intro-to-const-generics.problem.tsx  |  0
 ...problem.ts => 38-generic-hooks.problem.ts} |  0
 ...on.1.ts => 38-generic-hooks.solution.1.ts} |  0
 ...on.2.ts => 38-generic-hooks.solution.2.ts} |  0
 ...on.3.ts => 38-generic-hooks.solution.3.ts} |  0
 ...on.4.ts => 38-generic-hooks.solution.4.ts} |  0
 ...on.5.ts => 38-generic-hooks.solution.5.ts} |  0
 ...> 39-generic-class-components.problem.tsx} |  0
 ... 39-generic-class-components.solution.tsx} |  0
 ...> 40-generic-localstorage-hook.problem.ts} |  0
 ... 40-generic-localstorage-hook.solution.ts} |  0
 ...ence-through-multiple-helpers.problem.tsx} |  0
 ...nce-through-multiple-helpers.solution.tsx} |  0
 ...nference-flow-with-constraints.problem.ts} |  0
 ...ference-flow-with-constraints.solution.ts} |  0
 ...=> 43-intro-to-const-generics.problem.tsx} |  0
 ...roblem.tsx => 44-button-group.problem.tsx} |  0
 ...n.1.tsx => 44-button-group.solution.1.tsx} |  0
 ...n.2.tsx => 44-button-group.solution.2.tsx} |  0
 ...tsx => 45-lazy-load-component.problem.tsx} |  0
 ...sx => 45-lazy-load-component.solution.tsx} |  0
 ...erics-vs-discriminated-unions.problem.tsx} |  0
 ...rics-vs-discriminated-unions.solution.tsx} |  0
 ...lem.ts => 47-tuple-return-type.problem.ts} |  0
 ....ts => 47-tuple-return-type.solution.1.ts} |  0
 ....ts => 47-tuple-return-type.solution.2.ts} |  0
 ....tsx => 48-unions-in-usestate.problem.tsx} |  0
 ...tsx => 48-unions-in-usestate.solution.tsx} |  0
 ...criminated-unions-in-usestate.problem.tsx} |  0
 ...riminated-unions-in-usestate.solution.tsx} |  0
 ...ated-tuples-from-custom-hooks.problem.tsx} |  0
 ...ted-tuples-from-custom-hooks.solution.tsx} |  0
 ...m.ts => 51-use-state-overloads.problem.ts} |  0
 ...s => 51-use-state-overloads.solution.1.ts} |  0
 ...s => 51-use-state-overloads.solution.2.ts} |  0
 ...52-function-overloads-in-hooks.problem.ts} |  0
 ...function-overloads-in-hooks.solution.1.ts} |  0
 ...function-overloads-in-hooks.solution.2.ts} |  0
 ...stand-react-namespace-export.explainer.ts} |  0
 ...4-understanding-jsx-element.explainer.tsx} |  0
 ...55-strongly-typing-children.explainer.tsx} |  0
 ...ding-jsx-intrinsic-elements.explainer.tsx} |  0
 ...-appending-to-global-namespace.problem.ts} |  0
 ...appending-to-global-namespace.solution.ts} |  0
 ...on-merging-in-global-namespace.problem.ts} |  0
 ...n-merging-in-global-namespace.solution.ts} |  0
 ... => 59-add-new-global-element.problem.tsx} |  0
 ...=> 59-add-new-global-element.solution.tsx} |  0
 ...r.tsx => 60-html-attributes.explainer.tsx} |  0
 ...add-attribute-to-all-elements.problem.tsx} |  0
 ...dd-attribute-to-all-elements.solution.tsx} |  0
 ...em.tsx => 62-required-context.problem.tsx} |  0
 ...tsx => 62-required-context.solution.1.tsx} |  0
 ...tsx => 62-required-context.solution.2.tsx} |  0
 ...roblem.tsx => 63-render-props.problem.tsx} |  0
 ...ution.tsx => 63-render-props.solution.tsx} |  0
 ...forward-ref-with-generics.explainer.1.tsx} |  0
 ...forward-ref-with-generics.explainer.2.tsx} |  0
 ...-forward-ref-with-generics.explainer.3.ts} |  0
 ...{59-hoc.problem.tsx => 65-hoc.problem.tsx} |  0
 ...9-hoc.solution.tsx => 65-hoc.solution.tsx} |  0
 ...of-components-with-same-props.problem.tsx} |  0
 ...components-with-same-props.solution.1.tsx} |  0
 ...components-with-same-props.solution.2.tsx} |  0
 ...rop.problem.tsx => 67-as-prop.problem.tsx} |  0
 ...lution.1.tsx => 67-as-prop.solution.1.tsx} |  0
 ...lution.2.tsx => 67-as-prop.solution.2.tsx} |  0
 ...s-prop-with-custom-components.problem.tsx} |  0
 ...-prop-with-custom-components.solution.tsx} |  0
 ...r.tsx => 69-react-hook-form.explainer.tsx} |  0
 ...=> 70-react-hook-form-wrapper.problem.tsx} |  0
 ...> 70-react-hook-form-wrapper.solution.tsx} |  0
 ...roblem.tsx => 71-react-select.problem.tsx} |  0
 ...ution.tsx => 71-react-select.solution.tsx} |  0
 ...plainer.ts => 72-react-query.explainer.ts} |  0
 ...m.ts => 73-react-query-wrapper.problem.ts} |  0
 ....ts => 73-react-query-wrapper.solution.ts} |  0
 87 files changed, 208 insertions(+)
 delete mode 100644 src/05-generics/33.6-type-helpers-with-constraints.problem.tsx
 create mode 100644 src/05-generics/34-type-helpers.problem.tsx
 create mode 100644 src/05-generics/34-type-helpers.solution.tsx
 create mode 100644 src/05-generics/35-type-helpers-2.problem.tsx
 create mode 100644 src/05-generics/35-type-helpers-2.solution.tsx
 create mode 100644 src/05-generics/36-type-helpers-with-constraints.problem.tsx
 create mode 100644 src/05-generics/36-type-helpers-with-constraints.solution.1.tsx
 create mode 100644 src/05-generics/36-type-helpers-with-constraints.solution.2.tsx
 rename src/05-generics/{34-generic-props.problem.tsx => 37-generic-props.problem.tsx} (100%)
 rename src/05-generics/{34-generic-props.solution.tsx => 37-generic-props.solution.tsx} (100%)
 delete mode 100644 src/05-generics/37.5-intro-to-const-generics.problem.tsx
 rename src/05-generics/{35-generic-hooks.problem.ts => 38-generic-hooks.problem.ts} (100%)
 rename src/05-generics/{35-generic-hooks.solution.1.ts => 38-generic-hooks.solution.1.ts} (100%)
 rename src/05-generics/{35-generic-hooks.solution.2.ts => 38-generic-hooks.solution.2.ts} (100%)
 rename src/05-generics/{35-generic-hooks.solution.3.ts => 38-generic-hooks.solution.3.ts} (100%)
 rename src/05-generics/{35-generic-hooks.solution.4.ts => 38-generic-hooks.solution.4.ts} (100%)
 rename src/05-generics/{35-generic-hooks.solution.5.ts => 38-generic-hooks.solution.5.ts} (100%)
 rename src/05-generics/{35.5-generic-class-components.problem.tsx => 39-generic-class-components.problem.tsx} (100%)
 rename src/05-generics/{35.5-generic-class-components.solution.tsx => 39-generic-class-components.solution.tsx} (100%)
 rename src/05-generics/{36-generic-localstorage-hook.problem.ts => 40-generic-localstorage-hook.problem.ts} (100%)
 rename src/05-generics/{36-generic-localstorage-hook.solution.ts => 40-generic-localstorage-hook.solution.ts} (100%)
 rename src/05-generics/{37-generic-inference-through-multiple-helpers.problem.tsx => 41-generic-inference-through-multiple-helpers.problem.tsx} (100%)
 rename src/05-generics/{37-generic-inference-through-multiple-helpers.solution.tsx => 41-generic-inference-through-multiple-helpers.solution.tsx} (100%)
 rename src/05-generics/{37.2-inference-flow-with-constraints.problem.ts => 42-inference-flow-with-constraints.problem.ts} (100%)
 rename src/05-generics/{37.2-inference-flow-with-constraints.solution.ts => 42-inference-flow-with-constraints.solution.ts} (100%)
 rename src/05-generics/{33.5-type-helpers.problem.tsx => 43-intro-to-const-generics.problem.tsx} (100%)
 rename src/05-generics/{38-button-group.problem.tsx => 44-button-group.problem.tsx} (100%)
 rename src/05-generics/{38-button-group.solution.1.tsx => 44-button-group.solution.1.tsx} (100%)
 rename src/05-generics/{38-button-group.solution.2.tsx => 44-button-group.solution.2.tsx} (100%)
 rename src/05-generics/{39-lazy-load-component.problem.tsx => 45-lazy-load-component.problem.tsx} (100%)
 rename src/05-generics/{39-lazy-load-component.solution.tsx => 45-lazy-load-component.solution.tsx} (100%)
 rename src/05-generics/{40-generics-vs-discriminated-unions.problem.tsx => 46-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/05-generics/{40-generics-vs-discriminated-unions.solution.tsx => 46-generics-vs-discriminated-unions.solution.tsx} (100%)
 rename src/06-advanced-hooks/{41-tuple-return-type.problem.ts => 47-tuple-return-type.problem.ts} (100%)
 rename src/06-advanced-hooks/{41-tuple-return-type.solution.1.ts => 47-tuple-return-type.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{41-tuple-return-type.solution.2.ts => 47-tuple-return-type.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{42-unions-in-usestate.problem.tsx => 48-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{42-unions-in-usestate.solution.tsx => 48-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{43-discriminated-unions-in-usestate.problem.tsx => 49-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{43-discriminated-unions-in-usestate.solution.tsx => 49-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{44-discriminated-tuples-from-custom-hooks.problem.tsx => 50-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/06-advanced-hooks/{44-discriminated-tuples-from-custom-hooks.solution.tsx => 50-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/06-advanced-hooks/{45-use-state-overloads.problem.ts => 51-use-state-overloads.problem.ts} (100%)
 rename src/06-advanced-hooks/{45-use-state-overloads.solution.1.ts => 51-use-state-overloads.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{45-use-state-overloads.solution.2.ts => 51-use-state-overloads.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{46-function-overloads-in-hooks.problem.ts => 52-function-overloads-in-hooks.problem.ts} (100%)
 rename src/06-advanced-hooks/{46-function-overloads-in-hooks.solution.1.ts => 52-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{46-function-overloads-in-hooks.solution.2.ts => 52-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/07-types-deep-dive/{47-understand-react-namespace-export.explainer.ts => 53-understand-react-namespace-export.explainer.ts} (100%)
 rename src/07-types-deep-dive/{48-understanding-jsx-element.explainer.tsx => 54-understanding-jsx-element.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{49-strongly-typing-children.explainer.tsx => 55-strongly-typing-children.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{50-understanding-jsx-intrinsic-elements.explainer.tsx => 56-understanding-jsx-intrinsic-elements.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{51-appending-to-global-namespace.problem.ts => 57-appending-to-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{51-appending-to-global-namespace.solution.ts => 57-appending-to-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{52-declaration-merging-in-global-namespace.problem.ts => 58-declaration-merging-in-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{52-declaration-merging-in-global-namespace.solution.ts => 58-declaration-merging-in-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{53-add-new-global-element.problem.tsx => 59-add-new-global-element.problem.tsx} (100%)
 rename src/07-types-deep-dive/{53-add-new-global-element.solution.tsx => 59-add-new-global-element.solution.tsx} (100%)
 rename src/07-types-deep-dive/{54-html-attributes.explainer.tsx => 60-html-attributes.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{55-add-attribute-to-all-elements.problem.tsx => 61-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{55-add-attribute-to-all-elements.solution.tsx => 61-add-attribute-to-all-elements.solution.tsx} (100%)
 rename src/08-advanced-patterns/{56-required-context.problem.tsx => 62-required-context.problem.tsx} (100%)
 rename src/08-advanced-patterns/{56-required-context.solution.1.tsx => 62-required-context.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{56-required-context.solution.2.tsx => 62-required-context.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{57-render-props.problem.tsx => 63-render-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{57-render-props.solution.tsx => 63-render-props.solution.tsx} (100%)
 rename src/08-advanced-patterns/{58-forward-ref-with-generics.explainer.1.tsx => 64-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/08-advanced-patterns/{58-forward-ref-with-generics.explainer.2.tsx => 64-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/08-advanced-patterns/{58-forward-ref-with-generics.explainer.3.ts => 64-forward-ref-with-generics.explainer.3.ts} (100%)
 rename src/08-advanced-patterns/{59-hoc.problem.tsx => 65-hoc.problem.tsx} (100%)
 rename src/08-advanced-patterns/{59-hoc.solution.tsx => 65-hoc.solution.tsx} (100%)
 rename src/08-advanced-patterns/{60-record-of-components-with-same-props.problem.tsx => 66-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{60-record-of-components-with-same-props.solution.1.tsx => 66-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{60-record-of-components-with-same-props.solution.2.tsx => 66-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{61-as-prop.problem.tsx => 67-as-prop.problem.tsx} (100%)
 rename src/08-advanced-patterns/{61-as-prop.solution.1.tsx => 67-as-prop.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{61-as-prop.solution.2.tsx => 67-as-prop.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{62-as-prop-with-custom-components.problem.tsx => 68-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{62-as-prop-with-custom-components.solution.tsx => 68-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/09-external-libraries/{63-react-hook-form.explainer.tsx => 69-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{64-react-hook-form-wrapper.problem.tsx => 70-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{64-react-hook-form-wrapper.solution.tsx => 70-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{65-react-select.problem.tsx => 71-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{65-react-select.solution.tsx => 71-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{66-react-query.explainer.ts => 72-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{67-react-query-wrapper.problem.ts => 73-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{67-react-query-wrapper.solution.ts => 73-react-query-wrapper.solution.ts} (100%)

diff --git a/src/05-generics/33.6-type-helpers-with-constraints.problem.tsx b/src/05-generics/33.6-type-helpers-with-constraints.problem.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/05-generics/34-type-helpers.problem.tsx b/src/05-generics/34-type-helpers.problem.tsx
new file mode 100644
index 0000000..5ff08f7
--- /dev/null
+++ b/src/05-generics/34-type-helpers.problem.tsx
@@ -0,0 +1,22 @@
+type Icon = "home" | "settings" | "about";
+type ButtonVariant = "primary" | "secondary" | "tertiary";
+
+// How do we refactor this to make it DRY?
+type LooseIcon = Icon | (string & {});
+type LooseButtonVariant = ButtonVariant | (string & {});
+
+export const icons: LooseIcon[] = [
+  "home",
+  "settings",
+  "about",
+  "any-other-string",
+  // I should get autocomplete if I add a new item here!
+];
+
+export const buttonVariants: LooseButtonVariant[] = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "any-other-string",
+  // I should get autocomplete if I add a new item here!
+];
diff --git a/src/05-generics/34-type-helpers.solution.tsx b/src/05-generics/34-type-helpers.solution.tsx
new file mode 100644
index 0000000..7f8f447
--- /dev/null
+++ b/src/05-generics/34-type-helpers.solution.tsx
@@ -0,0 +1,23 @@
+type Icon = "home" | "settings" | "about";
+type ButtonVariant = "primary" | "secondary" | "tertiary";
+
+type LooseIcon = LooseAutocomplete<Icon>;
+type LooseButtonVariant = LooseAutocomplete<ButtonVariant>;
+
+export type LooseAutocomplete<T> = T | (string & {});
+
+export const icons: LooseIcon[] = [
+  "home",
+  "settings",
+  "about",
+  "any-other-string",
+  // I should get autocomplete if I add a new item here!
+];
+
+export const buttonVariants: LooseButtonVariant[] = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "any-other-string",
+  // I should get autocomplete if I add a new item here!
+];
diff --git a/src/05-generics/35-type-helpers-2.problem.tsx b/src/05-generics/35-type-helpers-2.problem.tsx
new file mode 100644
index 0000000..e7471d5
--- /dev/null
+++ b/src/05-generics/35-type-helpers-2.problem.tsx
@@ -0,0 +1,48 @@
+import { ChangeEventHandler } from "react";
+
+/**
+ * It would be really nice to refactor this so that it's
+ * more reusable. We can do that with a type helper.
+ *
+ * We want to create a type helper that takes in a type,
+ * and returns it along with a union with all of its
+ * keys turned to undefined.
+ */
+export type InputProps = (
+  | {
+      value: string;
+      onChange: ChangeEventHandler;
+    }
+  | {
+      value?: undefined;
+      onChange?: undefined;
+    }
+) & {
+  label: string;
+};
+
+export const Input = ({ label, ...props }: InputProps) => {
+  return (
+    <div>
+      <label>
+        {label}
+        <input {...props} />
+      </label>
+    </div>
+  );
+};
+
+export const Test = () => {
+  return (
+    <div>
+      <Input label="Greeting" value="Hello" onChange={() => {}} />
+      <Input label="Greeting" />
+
+      {/* @ts-expect-error */}
+      <Input label="Greeting" value="Hello" />
+
+      {/* @ts-expect-error */}
+      <Input label="Greeting" onChange={() => {}} />
+    </div>
+  );
+};
diff --git a/src/05-generics/35-type-helpers-2.solution.tsx b/src/05-generics/35-type-helpers-2.solution.tsx
new file mode 100644
index 0000000..dbd6314
--- /dev/null
+++ b/src/05-generics/35-type-helpers-2.solution.tsx
@@ -0,0 +1,40 @@
+import { ChangeEventHandler } from "react";
+
+type AllOrNothing<T> =
+  | T
+  | {
+      [K in keyof T]?: undefined;
+    };
+
+export type InputProps = AllOrNothing<{
+  value: string;
+  onChange: ChangeEventHandler;
+}> & {
+  label: string;
+};
+
+export const Input = ({ label, ...props }: InputProps) => {
+  return (
+    <div>
+      <label>
+        {label}
+        <input {...props} />
+      </label>
+    </div>
+  );
+};
+
+export const Test = () => {
+  return (
+    <div>
+      <Input label="Greeting" value="Hello" onChange={() => {}} />
+      <Input label="Greeting" />
+
+      {/* @ts-expect-error */}
+      <Input label="Greeting" value="Hello" />
+
+      {/* @ts-expect-error */}
+      <Input label="Greeting" onChange={() => {}} />
+    </div>
+  );
+};
diff --git a/src/05-generics/36-type-helpers-with-constraints.problem.tsx b/src/05-generics/36-type-helpers-with-constraints.problem.tsx
new file mode 100644
index 0000000..97d4bec
--- /dev/null
+++ b/src/05-generics/36-type-helpers-with-constraints.problem.tsx
@@ -0,0 +1,25 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+type AllOrNothing<T> =
+  | T
+  | {
+      [K in keyof T]?: undefined;
+    };
+
+/**
+ * There's a problem with our AllOrNothing type. It's letting
+ * us pass ANYTHING as T. We want to constrain it so that it
+ * only works with objects.
+ */
+
+type tests = [
+  // @ts-expect-error
+  AllOrNothing<string>,
+  // @ts-expect-error
+  AllOrNothing<number>,
+  // @ts-expect-error
+  AllOrNothing<undefined>,
+  // @ts-expect-error
+  AllOrNothing<string[]>,
+  Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>,
+];
diff --git a/src/05-generics/36-type-helpers-with-constraints.solution.1.tsx b/src/05-generics/36-type-helpers-with-constraints.solution.1.tsx
new file mode 100644
index 0000000..3f5a9d9
--- /dev/null
+++ b/src/05-generics/36-type-helpers-with-constraints.solution.1.tsx
@@ -0,0 +1,25 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+type AllOrNothing<T extends object> =
+  | T
+  | {
+      [K in keyof T]?: undefined;
+    };
+
+/**
+ * There's a problem with our AllOrNothing type. It's letting
+ * us pass ANYTHING as T. We want to constrain it so that it
+ * only works with objects.
+ */
+
+type tests = [
+  // @ts-expect-error
+  AllOrNothing<string>,
+  // @ts-expect-error
+  AllOrNothing<number>,
+  // @ts-expect-error
+  AllOrNothing<undefined>,
+  Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>,
+];
+
+// Note that this isn't perfect! Try AllOrNothing<string[]>
diff --git a/src/05-generics/36-type-helpers-with-constraints.solution.2.tsx b/src/05-generics/36-type-helpers-with-constraints.solution.2.tsx
new file mode 100644
index 0000000..f03b887
--- /dev/null
+++ b/src/05-generics/36-type-helpers-with-constraints.solution.2.tsx
@@ -0,0 +1,25 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+type AllOrNothing<T extends Record<string, any>> =
+  | T
+  | {
+      [K in keyof T]?: undefined;
+    };
+
+/**
+ * There's a problem with our AllOrNothing type. It's letting
+ * us pass ANYTHING as T. We want to constrain it so that it
+ * only works with objects.
+ */
+
+type tests = [
+  // @ts-expect-error
+  AllOrNothing<string>,
+  // @ts-expect-error
+  AllOrNothing<number>,
+  // @ts-expect-error
+  AllOrNothing<undefined>,
+  Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>,
+];
+
+// Note that this isn't perfect! Try AllOrNothing<string[]>
diff --git a/src/05-generics/34-generic-props.problem.tsx b/src/05-generics/37-generic-props.problem.tsx
similarity index 100%
rename from src/05-generics/34-generic-props.problem.tsx
rename to src/05-generics/37-generic-props.problem.tsx
diff --git a/src/05-generics/34-generic-props.solution.tsx b/src/05-generics/37-generic-props.solution.tsx
similarity index 100%
rename from src/05-generics/34-generic-props.solution.tsx
rename to src/05-generics/37-generic-props.solution.tsx
diff --git a/src/05-generics/37.5-intro-to-const-generics.problem.tsx b/src/05-generics/37.5-intro-to-const-generics.problem.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/05-generics/35-generic-hooks.problem.ts b/src/05-generics/38-generic-hooks.problem.ts
similarity index 100%
rename from src/05-generics/35-generic-hooks.problem.ts
rename to src/05-generics/38-generic-hooks.problem.ts
diff --git a/src/05-generics/35-generic-hooks.solution.1.ts b/src/05-generics/38-generic-hooks.solution.1.ts
similarity index 100%
rename from src/05-generics/35-generic-hooks.solution.1.ts
rename to src/05-generics/38-generic-hooks.solution.1.ts
diff --git a/src/05-generics/35-generic-hooks.solution.2.ts b/src/05-generics/38-generic-hooks.solution.2.ts
similarity index 100%
rename from src/05-generics/35-generic-hooks.solution.2.ts
rename to src/05-generics/38-generic-hooks.solution.2.ts
diff --git a/src/05-generics/35-generic-hooks.solution.3.ts b/src/05-generics/38-generic-hooks.solution.3.ts
similarity index 100%
rename from src/05-generics/35-generic-hooks.solution.3.ts
rename to src/05-generics/38-generic-hooks.solution.3.ts
diff --git a/src/05-generics/35-generic-hooks.solution.4.ts b/src/05-generics/38-generic-hooks.solution.4.ts
similarity index 100%
rename from src/05-generics/35-generic-hooks.solution.4.ts
rename to src/05-generics/38-generic-hooks.solution.4.ts
diff --git a/src/05-generics/35-generic-hooks.solution.5.ts b/src/05-generics/38-generic-hooks.solution.5.ts
similarity index 100%
rename from src/05-generics/35-generic-hooks.solution.5.ts
rename to src/05-generics/38-generic-hooks.solution.5.ts
diff --git a/src/05-generics/35.5-generic-class-components.problem.tsx b/src/05-generics/39-generic-class-components.problem.tsx
similarity index 100%
rename from src/05-generics/35.5-generic-class-components.problem.tsx
rename to src/05-generics/39-generic-class-components.problem.tsx
diff --git a/src/05-generics/35.5-generic-class-components.solution.tsx b/src/05-generics/39-generic-class-components.solution.tsx
similarity index 100%
rename from src/05-generics/35.5-generic-class-components.solution.tsx
rename to src/05-generics/39-generic-class-components.solution.tsx
diff --git a/src/05-generics/36-generic-localstorage-hook.problem.ts b/src/05-generics/40-generic-localstorage-hook.problem.ts
similarity index 100%
rename from src/05-generics/36-generic-localstorage-hook.problem.ts
rename to src/05-generics/40-generic-localstorage-hook.problem.ts
diff --git a/src/05-generics/36-generic-localstorage-hook.solution.ts b/src/05-generics/40-generic-localstorage-hook.solution.ts
similarity index 100%
rename from src/05-generics/36-generic-localstorage-hook.solution.ts
rename to src/05-generics/40-generic-localstorage-hook.solution.ts
diff --git a/src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx b/src/05-generics/41-generic-inference-through-multiple-helpers.problem.tsx
similarity index 100%
rename from src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx
rename to src/05-generics/41-generic-inference-through-multiple-helpers.problem.tsx
diff --git a/src/05-generics/37-generic-inference-through-multiple-helpers.solution.tsx b/src/05-generics/41-generic-inference-through-multiple-helpers.solution.tsx
similarity index 100%
rename from src/05-generics/37-generic-inference-through-multiple-helpers.solution.tsx
rename to src/05-generics/41-generic-inference-through-multiple-helpers.solution.tsx
diff --git a/src/05-generics/37.2-inference-flow-with-constraints.problem.ts b/src/05-generics/42-inference-flow-with-constraints.problem.ts
similarity index 100%
rename from src/05-generics/37.2-inference-flow-with-constraints.problem.ts
rename to src/05-generics/42-inference-flow-with-constraints.problem.ts
diff --git a/src/05-generics/37.2-inference-flow-with-constraints.solution.ts b/src/05-generics/42-inference-flow-with-constraints.solution.ts
similarity index 100%
rename from src/05-generics/37.2-inference-flow-with-constraints.solution.ts
rename to src/05-generics/42-inference-flow-with-constraints.solution.ts
diff --git a/src/05-generics/33.5-type-helpers.problem.tsx b/src/05-generics/43-intro-to-const-generics.problem.tsx
similarity index 100%
rename from src/05-generics/33.5-type-helpers.problem.tsx
rename to src/05-generics/43-intro-to-const-generics.problem.tsx
diff --git a/src/05-generics/38-button-group.problem.tsx b/src/05-generics/44-button-group.problem.tsx
similarity index 100%
rename from src/05-generics/38-button-group.problem.tsx
rename to src/05-generics/44-button-group.problem.tsx
diff --git a/src/05-generics/38-button-group.solution.1.tsx b/src/05-generics/44-button-group.solution.1.tsx
similarity index 100%
rename from src/05-generics/38-button-group.solution.1.tsx
rename to src/05-generics/44-button-group.solution.1.tsx
diff --git a/src/05-generics/38-button-group.solution.2.tsx b/src/05-generics/44-button-group.solution.2.tsx
similarity index 100%
rename from src/05-generics/38-button-group.solution.2.tsx
rename to src/05-generics/44-button-group.solution.2.tsx
diff --git a/src/05-generics/39-lazy-load-component.problem.tsx b/src/05-generics/45-lazy-load-component.problem.tsx
similarity index 100%
rename from src/05-generics/39-lazy-load-component.problem.tsx
rename to src/05-generics/45-lazy-load-component.problem.tsx
diff --git a/src/05-generics/39-lazy-load-component.solution.tsx b/src/05-generics/45-lazy-load-component.solution.tsx
similarity index 100%
rename from src/05-generics/39-lazy-load-component.solution.tsx
rename to src/05-generics/45-lazy-load-component.solution.tsx
diff --git a/src/05-generics/40-generics-vs-discriminated-unions.problem.tsx b/src/05-generics/46-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/05-generics/40-generics-vs-discriminated-unions.problem.tsx
rename to src/05-generics/46-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/05-generics/40-generics-vs-discriminated-unions.solution.tsx b/src/05-generics/46-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/05-generics/40-generics-vs-discriminated-unions.solution.tsx
rename to src/05-generics/46-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/06-advanced-hooks/41-tuple-return-type.problem.ts b/src/06-advanced-hooks/47-tuple-return-type.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/41-tuple-return-type.problem.ts
rename to src/06-advanced-hooks/47-tuple-return-type.problem.ts
diff --git a/src/06-advanced-hooks/41-tuple-return-type.solution.1.ts b/src/06-advanced-hooks/47-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/41-tuple-return-type.solution.1.ts
rename to src/06-advanced-hooks/47-tuple-return-type.solution.1.ts
diff --git a/src/06-advanced-hooks/41-tuple-return-type.solution.2.ts b/src/06-advanced-hooks/47-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/41-tuple-return-type.solution.2.ts
rename to src/06-advanced-hooks/47-tuple-return-type.solution.2.ts
diff --git a/src/06-advanced-hooks/42-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/48-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/42-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/48-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/42-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/48-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/42-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/48-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/49-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/49-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/43-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/49-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/43-discriminated-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/49-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx b/src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/06-advanced-hooks/45-use-state-overloads.problem.ts b/src/06-advanced-hooks/51-use-state-overloads.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/45-use-state-overloads.problem.ts
rename to src/06-advanced-hooks/51-use-state-overloads.problem.ts
diff --git a/src/06-advanced-hooks/45-use-state-overloads.solution.1.ts b/src/06-advanced-hooks/51-use-state-overloads.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/45-use-state-overloads.solution.1.ts
rename to src/06-advanced-hooks/51-use-state-overloads.solution.1.ts
diff --git a/src/06-advanced-hooks/45-use-state-overloads.solution.2.ts b/src/06-advanced-hooks/51-use-state-overloads.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/45-use-state-overloads.solution.2.ts
rename to src/06-advanced-hooks/51-use-state-overloads.solution.2.ts
diff --git a/src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/52-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts
rename to src/06-advanced-hooks/52-function-overloads-in-hooks.problem.ts
diff --git a/src/06-advanced-hooks/46-function-overloads-in-hooks.solution.1.ts b/src/06-advanced-hooks/52-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/46-function-overloads-in-hooks.solution.1.ts
rename to src/06-advanced-hooks/52-function-overloads-in-hooks.solution.1.ts
diff --git a/src/06-advanced-hooks/46-function-overloads-in-hooks.solution.2.ts b/src/06-advanced-hooks/52-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/46-function-overloads-in-hooks.solution.2.ts
rename to src/06-advanced-hooks/52-function-overloads-in-hooks.solution.2.ts
diff --git a/src/07-types-deep-dive/47-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/47-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
diff --git a/src/07-types-deep-dive/48-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/48-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx
diff --git a/src/07-types-deep-dive/49-strongly-typing-children.explainer.tsx b/src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/49-strongly-typing-children.explainer.tsx
rename to src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx
diff --git a/src/07-types-deep-dive/50-understanding-jsx-intrinsic-elements.explainer.tsx b/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/50-understanding-jsx-intrinsic-elements.explainer.tsx
rename to src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx
diff --git a/src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts b/src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts
rename to src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/51-appending-to-global-namespace.solution.ts b/src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/51-appending-to-global-namespace.solution.ts
rename to src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/52-declaration-merging-in-global-namespace.problem.ts b/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/52-declaration-merging-in-global-namespace.problem.ts
rename to src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/52-declaration-merging-in-global-namespace.solution.ts b/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/52-declaration-merging-in-global-namespace.solution.ts
rename to src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/53-add-new-global-element.problem.tsx b/src/07-types-deep-dive/59-add-new-global-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/53-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/59-add-new-global-element.problem.tsx
diff --git a/src/07-types-deep-dive/53-add-new-global-element.solution.tsx b/src/07-types-deep-dive/59-add-new-global-element.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/53-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/59-add-new-global-element.solution.tsx
diff --git a/src/07-types-deep-dive/54-html-attributes.explainer.tsx b/src/07-types-deep-dive/60-html-attributes.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/54-html-attributes.explainer.tsx
rename to src/07-types-deep-dive/60-html-attributes.explainer.tsx
diff --git a/src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx
diff --git a/src/07-types-deep-dive/55-add-attribute-to-all-elements.solution.tsx b/src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/55-add-attribute-to-all-elements.solution.tsx
rename to src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx
diff --git a/src/08-advanced-patterns/56-required-context.problem.tsx b/src/08-advanced-patterns/62-required-context.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/56-required-context.problem.tsx
rename to src/08-advanced-patterns/62-required-context.problem.tsx
diff --git a/src/08-advanced-patterns/56-required-context.solution.1.tsx b/src/08-advanced-patterns/62-required-context.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/56-required-context.solution.1.tsx
rename to src/08-advanced-patterns/62-required-context.solution.1.tsx
diff --git a/src/08-advanced-patterns/56-required-context.solution.2.tsx b/src/08-advanced-patterns/62-required-context.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/56-required-context.solution.2.tsx
rename to src/08-advanced-patterns/62-required-context.solution.2.tsx
diff --git a/src/08-advanced-patterns/57-render-props.problem.tsx b/src/08-advanced-patterns/63-render-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-render-props.problem.tsx
rename to src/08-advanced-patterns/63-render-props.problem.tsx
diff --git a/src/08-advanced-patterns/57-render-props.solution.tsx b/src/08-advanced-patterns/63-render-props.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/57-render-props.solution.tsx
rename to src/08-advanced-patterns/63-render-props.solution.tsx
diff --git a/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/58-forward-ref-with-generics.explainer.1.tsx
rename to src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.2.tsx b/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/58-forward-ref-with-generics.explainer.2.tsx
rename to src/08-advanced-patterns/64-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.3.ts b/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.3.ts
similarity index 100%
rename from src/08-advanced-patterns/58-forward-ref-with-generics.explainer.3.ts
rename to src/08-advanced-patterns/64-forward-ref-with-generics.explainer.3.ts
diff --git a/src/08-advanced-patterns/59-hoc.problem.tsx b/src/08-advanced-patterns/65-hoc.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/59-hoc.problem.tsx
rename to src/08-advanced-patterns/65-hoc.problem.tsx
diff --git a/src/08-advanced-patterns/59-hoc.solution.tsx b/src/08-advanced-patterns/65-hoc.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/59-hoc.solution.tsx
rename to src/08-advanced-patterns/65-hoc.solution.tsx
diff --git a/src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/66-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/66-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/60-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/66-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/60-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/66-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/60-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/66-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/60-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/66-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/08-advanced-patterns/61-as-prop.problem.tsx b/src/08-advanced-patterns/67-as-prop.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/61-as-prop.problem.tsx
rename to src/08-advanced-patterns/67-as-prop.problem.tsx
diff --git a/src/08-advanced-patterns/61-as-prop.solution.1.tsx b/src/08-advanced-patterns/67-as-prop.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/61-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/67-as-prop.solution.1.tsx
diff --git a/src/08-advanced-patterns/61-as-prop.solution.2.tsx b/src/08-advanced-patterns/67-as-prop.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/61-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/67-as-prop.solution.2.tsx
diff --git a/src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/68-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/68-as-prop-with-custom-components.problem.tsx
diff --git a/src/08-advanced-patterns/62-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/68-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-as-prop-with-custom-components.solution.tsx
rename to src/08-advanced-patterns/68-as-prop-with-custom-components.solution.tsx
diff --git a/src/09-external-libraries/63-react-hook-form.explainer.tsx b/src/09-external-libraries/69-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/63-react-hook-form.explainer.tsx
rename to src/09-external-libraries/69-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/64-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/70-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/64-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/70-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/64-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/70-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/64-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/70-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/65-react-select.problem.tsx b/src/09-external-libraries/71-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/65-react-select.problem.tsx
rename to src/09-external-libraries/71-react-select.problem.tsx
diff --git a/src/09-external-libraries/65-react-select.solution.tsx b/src/09-external-libraries/71-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/65-react-select.solution.tsx
rename to src/09-external-libraries/71-react-select.solution.tsx
diff --git a/src/09-external-libraries/66-react-query.explainer.ts b/src/09-external-libraries/72-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/66-react-query.explainer.ts
rename to src/09-external-libraries/72-react-query.explainer.ts
diff --git a/src/09-external-libraries/67-react-query-wrapper.problem.ts b/src/09-external-libraries/73-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/67-react-query-wrapper.problem.ts
rename to src/09-external-libraries/73-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/67-react-query-wrapper.solution.ts b/src/09-external-libraries/73-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/67-react-query-wrapper.solution.ts
rename to src/09-external-libraries/73-react-query-wrapper.solution.ts

From f5bb78d3493bd45bbc0af04bb53dc042a1faa1f8 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 3 Jul 2023 15:24:54 +0100
Subject: [PATCH 046/165] More moving files around

---
 .../{44-button-group.problem.tsx => 43-button-group.problem.tsx}  | 0
 ...button-group.solution.1.tsx => 43-button-group.solution.1.tsx} | 0
 ...button-group.solution.2.tsx => 43-button-group.solution.2.tsx} | 0
 ...d-component.problem.tsx => 44-lazy-load-component.problem.tsx} | 0
 ...component.solution.tsx => 44-lazy-load-component.solution.tsx} | 0
 ...roblem.tsx => 45-generics-vs-discriminated-unions.problem.tsx} | 0
 ...ution.tsx => 45-generics-vs-discriminated-unions.solution.tsx} | 0
 ...ple-return-type.problem.ts => 46-tuple-return-type.problem.ts} | 0
 ...turn-type.solution.1.ts => 46-tuple-return-type.solution.1.ts} | 0
 ...turn-type.solution.2.ts => 46-tuple-return-type.solution.2.ts} | 0
 ...-in-usestate.problem.tsx => 47-unions-in-usestate.problem.tsx} | 0
 ...n-usestate.solution.tsx => 47-unions-in-usestate.solution.tsx} | 0
 ...roblem.tsx => 48-discriminated-unions-in-usestate.problem.tsx} | 0
 ...ution.tsx => 48-discriminated-unions-in-usestate.solution.tsx} | 0
 ....tsx => 49-discriminated-tuples-from-custom-hooks.problem.tsx} | 0
 ...tsx => 49-discriminated-tuples-from-custom-hooks.solution.tsx} | 0
 ...ate-overloads.problem.ts => 50-use-state-overloads.problem.ts} | 0
 ...erloads.solution.1.ts => 50-use-state-overloads.solution.1.ts} | 0
 ...erloads.solution.2.ts => 50-use-state-overloads.solution.2.ts} | 0
 ...hooks.problem.ts => 51-function-overloads-in-hooks.problem.ts} | 0
 ...solution.1.ts => 51-function-overloads-in-hooks.solution.1.ts} | 0
 ...solution.2.ts => 51-function-overloads-in-hooks.solution.2.ts} | 0
 ...ainer.ts => 52-understand-react-namespace-export.explainer.ts} | 0
 ...t.explainer.tsx => 53-understanding-jsx-element.explainer.tsx} | 0
 ...en.explainer.tsx => 54-strongly-typing-children.explainer.tsx} | 0
 ....tsx => 55-understanding-jsx-intrinsic-elements.explainer.tsx} | 0
 ...ace.problem.ts => 56-appending-to-global-namespace.problem.ts} | 0
 ...e.solution.ts => 56-appending-to-global-namespace.solution.ts} | 0
 ...m.ts => 57-declaration-merging-in-global-namespace.problem.ts} | 0
 ....ts => 57-declaration-merging-in-global-namespace.solution.ts} | 0
 ...-element.problem.tsx => 58-add-new-global-element.problem.tsx} | 0
 ...lement.solution.tsx => 58-add-new-global-element.solution.tsx} | 0
 ...-attributes.explainer.tsx => 59-html-attributes.explainer.tsx} | 0
 ...s.problem.tsx => 60-add-attribute-to-all-elements.problem.tsx} | 0
 ...solution.tsx => 60-add-attribute-to-all-elements.solution.tsx} | 0
 .../61-const-generics-in-generic-components.problem.tsx}          | 0
 36 files changed, 0 insertions(+), 0 deletions(-)
 rename src/05-generics/{44-button-group.problem.tsx => 43-button-group.problem.tsx} (100%)
 rename src/05-generics/{44-button-group.solution.1.tsx => 43-button-group.solution.1.tsx} (100%)
 rename src/05-generics/{44-button-group.solution.2.tsx => 43-button-group.solution.2.tsx} (100%)
 rename src/05-generics/{45-lazy-load-component.problem.tsx => 44-lazy-load-component.problem.tsx} (100%)
 rename src/05-generics/{45-lazy-load-component.solution.tsx => 44-lazy-load-component.solution.tsx} (100%)
 rename src/05-generics/{46-generics-vs-discriminated-unions.problem.tsx => 45-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/05-generics/{46-generics-vs-discriminated-unions.solution.tsx => 45-generics-vs-discriminated-unions.solution.tsx} (100%)
 rename src/06-advanced-hooks/{47-tuple-return-type.problem.ts => 46-tuple-return-type.problem.ts} (100%)
 rename src/06-advanced-hooks/{47-tuple-return-type.solution.1.ts => 46-tuple-return-type.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{47-tuple-return-type.solution.2.ts => 46-tuple-return-type.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{48-unions-in-usestate.problem.tsx => 47-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{48-unions-in-usestate.solution.tsx => 47-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{49-discriminated-unions-in-usestate.problem.tsx => 48-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{49-discriminated-unions-in-usestate.solution.tsx => 48-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{50-discriminated-tuples-from-custom-hooks.problem.tsx => 49-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/06-advanced-hooks/{50-discriminated-tuples-from-custom-hooks.solution.tsx => 49-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/06-advanced-hooks/{51-use-state-overloads.problem.ts => 50-use-state-overloads.problem.ts} (100%)
 rename src/06-advanced-hooks/{51-use-state-overloads.solution.1.ts => 50-use-state-overloads.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{51-use-state-overloads.solution.2.ts => 50-use-state-overloads.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{52-function-overloads-in-hooks.problem.ts => 51-function-overloads-in-hooks.problem.ts} (100%)
 rename src/06-advanced-hooks/{52-function-overloads-in-hooks.solution.1.ts => 51-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{52-function-overloads-in-hooks.solution.2.ts => 51-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/07-types-deep-dive/{53-understand-react-namespace-export.explainer.ts => 52-understand-react-namespace-export.explainer.ts} (100%)
 rename src/07-types-deep-dive/{54-understanding-jsx-element.explainer.tsx => 53-understanding-jsx-element.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{55-strongly-typing-children.explainer.tsx => 54-strongly-typing-children.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{56-understanding-jsx-intrinsic-elements.explainer.tsx => 55-understanding-jsx-intrinsic-elements.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{57-appending-to-global-namespace.problem.ts => 56-appending-to-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{57-appending-to-global-namespace.solution.ts => 56-appending-to-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{58-declaration-merging-in-global-namespace.problem.ts => 57-declaration-merging-in-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{58-declaration-merging-in-global-namespace.solution.ts => 57-declaration-merging-in-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{59-add-new-global-element.problem.tsx => 58-add-new-global-element.problem.tsx} (100%)
 rename src/07-types-deep-dive/{59-add-new-global-element.solution.tsx => 58-add-new-global-element.solution.tsx} (100%)
 rename src/07-types-deep-dive/{60-html-attributes.explainer.tsx => 59-html-attributes.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{61-add-attribute-to-all-elements.problem.tsx => 60-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{61-add-attribute-to-all-elements.solution.tsx => 60-add-attribute-to-all-elements.solution.tsx} (100%)
 rename src/{05-generics/43-intro-to-const-generics.problem.tsx => 08-advanced-patterns/61-const-generics-in-generic-components.problem.tsx} (100%)

diff --git a/src/05-generics/44-button-group.problem.tsx b/src/05-generics/43-button-group.problem.tsx
similarity index 100%
rename from src/05-generics/44-button-group.problem.tsx
rename to src/05-generics/43-button-group.problem.tsx
diff --git a/src/05-generics/44-button-group.solution.1.tsx b/src/05-generics/43-button-group.solution.1.tsx
similarity index 100%
rename from src/05-generics/44-button-group.solution.1.tsx
rename to src/05-generics/43-button-group.solution.1.tsx
diff --git a/src/05-generics/44-button-group.solution.2.tsx b/src/05-generics/43-button-group.solution.2.tsx
similarity index 100%
rename from src/05-generics/44-button-group.solution.2.tsx
rename to src/05-generics/43-button-group.solution.2.tsx
diff --git a/src/05-generics/45-lazy-load-component.problem.tsx b/src/05-generics/44-lazy-load-component.problem.tsx
similarity index 100%
rename from src/05-generics/45-lazy-load-component.problem.tsx
rename to src/05-generics/44-lazy-load-component.problem.tsx
diff --git a/src/05-generics/45-lazy-load-component.solution.tsx b/src/05-generics/44-lazy-load-component.solution.tsx
similarity index 100%
rename from src/05-generics/45-lazy-load-component.solution.tsx
rename to src/05-generics/44-lazy-load-component.solution.tsx
diff --git a/src/05-generics/46-generics-vs-discriminated-unions.problem.tsx b/src/05-generics/45-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/05-generics/46-generics-vs-discriminated-unions.problem.tsx
rename to src/05-generics/45-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/05-generics/46-generics-vs-discriminated-unions.solution.tsx b/src/05-generics/45-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/05-generics/46-generics-vs-discriminated-unions.solution.tsx
rename to src/05-generics/45-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/06-advanced-hooks/47-tuple-return-type.problem.ts b/src/06-advanced-hooks/46-tuple-return-type.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/47-tuple-return-type.problem.ts
rename to src/06-advanced-hooks/46-tuple-return-type.problem.ts
diff --git a/src/06-advanced-hooks/47-tuple-return-type.solution.1.ts b/src/06-advanced-hooks/46-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/47-tuple-return-type.solution.1.ts
rename to src/06-advanced-hooks/46-tuple-return-type.solution.1.ts
diff --git a/src/06-advanced-hooks/47-tuple-return-type.solution.2.ts b/src/06-advanced-hooks/46-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/47-tuple-return-type.solution.2.ts
rename to src/06-advanced-hooks/46-tuple-return-type.solution.2.ts
diff --git a/src/06-advanced-hooks/48-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/47-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/48-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/47-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/48-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/47-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/48-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/47-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/49-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/49-discriminated-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/49-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/49-discriminated-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.problem.tsx b/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/06-advanced-hooks/51-use-state-overloads.problem.ts b/src/06-advanced-hooks/50-use-state-overloads.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/51-use-state-overloads.problem.ts
rename to src/06-advanced-hooks/50-use-state-overloads.problem.ts
diff --git a/src/06-advanced-hooks/51-use-state-overloads.solution.1.ts b/src/06-advanced-hooks/50-use-state-overloads.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/51-use-state-overloads.solution.1.ts
rename to src/06-advanced-hooks/50-use-state-overloads.solution.1.ts
diff --git a/src/06-advanced-hooks/51-use-state-overloads.solution.2.ts b/src/06-advanced-hooks/50-use-state-overloads.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/51-use-state-overloads.solution.2.ts
rename to src/06-advanced-hooks/50-use-state-overloads.solution.2.ts
diff --git a/src/06-advanced-hooks/52-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/52-function-overloads-in-hooks.problem.ts
rename to src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
diff --git a/src/06-advanced-hooks/52-function-overloads-in-hooks.solution.1.ts b/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/52-function-overloads-in-hooks.solution.1.ts
rename to src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts
diff --git a/src/06-advanced-hooks/52-function-overloads-in-hooks.solution.2.ts b/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/52-function-overloads-in-hooks.solution.2.ts
rename to src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts
diff --git a/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts
diff --git a/src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx
diff --git a/src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx b/src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx
rename to src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx
diff --git a/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx b/src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx
rename to src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx
diff --git a/src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts b/src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts
rename to src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts b/src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts
rename to src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts b/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts
rename to src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts b/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts
rename to src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/59-add-new-global-element.problem.tsx b/src/07-types-deep-dive/58-add-new-global-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/58-add-new-global-element.problem.tsx
diff --git a/src/07-types-deep-dive/59-add-new-global-element.solution.tsx b/src/07-types-deep-dive/58-add-new-global-element.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/58-add-new-global-element.solution.tsx
diff --git a/src/07-types-deep-dive/60-html-attributes.explainer.tsx b/src/07-types-deep-dive/59-html-attributes.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/60-html-attributes.explainer.tsx
rename to src/07-types-deep-dive/59-html-attributes.explainer.tsx
diff --git a/src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx
diff --git a/src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx b/src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx
rename to src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx
diff --git a/src/05-generics/43-intro-to-const-generics.problem.tsx b/src/08-advanced-patterns/61-const-generics-in-generic-components.problem.tsx
similarity index 100%
rename from src/05-generics/43-intro-to-const-generics.problem.tsx
rename to src/08-advanced-patterns/61-const-generics-in-generic-components.problem.tsx

From 53690864bc9a531031c2d7b86b07575d0abf84b5 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 3 Jul 2023 17:02:45 +0100
Subject: [PATCH 047/165] Another exercise for react generics

---
 ...passing-types-to-components.solution.1.tsx | 55 ++++++++++++++++++
 ...passing-types-to-components.solution.2.tsx | 55 ++++++++++++++++++
 ...ence-through-multiple-helpers.problem.tsx} |  0
 ...nce-through-multiple-helpers.solution.tsx} |  0
 ...42-passing-types-to-components.problem.tsx | 58 +++++++++++++++++++
 ...nference-flow-with-constraints.problem.ts} |  0
 ...ference-flow-with-constraints.solution.ts} |  0
 ...roblem.tsx => 44-button-group.problem.tsx} |  0
 ...n.1.tsx => 44-button-group.solution.1.tsx} |  0
 ...n.2.tsx => 44-button-group.solution.2.tsx} |  0
 ...tsx => 45-lazy-load-component.problem.tsx} |  0
 ...sx => 45-lazy-load-component.solution.tsx} |  0
 ...erics-vs-discriminated-unions.problem.tsx} |  0
 ...rics-vs-discriminated-unions.solution.tsx} |  0
 ...lem.ts => 47-tuple-return-type.problem.ts} |  0
 ....ts => 47-tuple-return-type.solution.1.ts} |  0
 ....ts => 47-tuple-return-type.solution.2.ts} |  0
 ....tsx => 48-unions-in-usestate.problem.tsx} |  0
 ...tsx => 48-unions-in-usestate.solution.tsx} |  0
 ...criminated-unions-in-usestate.problem.tsx} |  0
 ...riminated-unions-in-usestate.solution.tsx} |  0
 ...ated-tuples-from-custom-hooks.problem.tsx} |  0
 ...ted-tuples-from-custom-hooks.solution.tsx} |  0
 ...m.ts => 51-use-state-overloads.problem.ts} |  0
 ...s => 51-use-state-overloads.solution.1.ts} |  0
 ...s => 51-use-state-overloads.solution.2.ts} |  0
 ...52-function-overloads-in-hooks.problem.ts} |  0
 ...function-overloads-in-hooks.solution.1.ts} |  0
 ...function-overloads-in-hooks.solution.2.ts} |  0
 ...stand-react-namespace-export.explainer.ts} |  0
 ...4-understanding-jsx-element.explainer.tsx} |  0
 ...55-strongly-typing-children.explainer.tsx} |  0
 ...ding-jsx-intrinsic-elements.explainer.tsx} |  0
 ...-appending-to-global-namespace.problem.ts} |  0
 ...appending-to-global-namespace.solution.ts} |  0
 ...on-merging-in-global-namespace.problem.ts} |  0
 ...n-merging-in-global-namespace.solution.ts} |  0
 ... => 59-add-new-global-element.problem.tsx} |  0
 ...=> 59-add-new-global-element.solution.tsx} |  0
 ...r.tsx => 60-html-attributes.explainer.tsx} |  0
 ...add-attribute-to-all-elements.problem.tsx} |  0
 ...dd-attribute-to-all-elements.solution.tsx} |  0
 ...generics-in-generic-components.problem.tsx |  0
 ...generics-in-generic-components.problem.tsx |  7 +++
 ...em.tsx => 63-required-context.problem.tsx} |  0
 ...tsx => 63-required-context.solution.1.tsx} |  0
 ...tsx => 63-required-context.solution.2.tsx} |  0
 ...roblem.tsx => 64-render-props.problem.tsx} |  0
 ...ution.tsx => 64-render-props.solution.tsx} |  0
 ...forward-ref-with-generics.explainer.1.tsx} |  0
 ...forward-ref-with-generics.explainer.2.tsx} |  0
 ...-forward-ref-with-generics.explainer.3.ts} |  0
 ...{65-hoc.problem.tsx => 66-hoc.problem.tsx} |  0
 ...5-hoc.solution.tsx => 66-hoc.solution.tsx} |  0
 ...of-components-with-same-props.problem.tsx} |  0
 ...components-with-same-props.solution.1.tsx} |  0
 ...components-with-same-props.solution.2.tsx} |  0
 ...rop.problem.tsx => 68-as-prop.problem.tsx} |  0
 ...lution.1.tsx => 68-as-prop.solution.1.tsx} |  0
 ...lution.2.tsx => 68-as-prop.solution.2.tsx} |  0
 ...s-prop-with-custom-components.problem.tsx} |  0
 ...-prop-with-custom-components.solution.tsx} |  0
 ...r.tsx => 70-react-hook-form.explainer.tsx} |  0
 ...=> 71-react-hook-form-wrapper.problem.tsx} |  0
 ...> 71-react-hook-form-wrapper.solution.tsx} |  0
 ...roblem.tsx => 72-react-select.problem.tsx} |  0
 ...ution.tsx => 72-react-select.solution.tsx} |  0
 ...plainer.ts => 73-react-query.explainer.ts} |  0
 ...m.ts => 74-react-query-wrapper.problem.ts} |  0
 ....ts => 74-react-query-wrapper.solution.ts} |  0
 70 files changed, 175 insertions(+)
 create mode 100644 src/05-generics/41-passing-types-to-components.solution.1.tsx
 create mode 100644 src/05-generics/41-passing-types-to-components.solution.2.tsx
 rename src/05-generics/{41-generic-inference-through-multiple-helpers.problem.tsx => 42-generic-inference-through-multiple-helpers.problem.tsx} (100%)
 rename src/05-generics/{41-generic-inference-through-multiple-helpers.solution.tsx => 42-generic-inference-through-multiple-helpers.solution.tsx} (100%)
 create mode 100644 src/05-generics/42-passing-types-to-components.problem.tsx
 rename src/05-generics/{42-inference-flow-with-constraints.problem.ts => 43-inference-flow-with-constraints.problem.ts} (100%)
 rename src/05-generics/{42-inference-flow-with-constraints.solution.ts => 43-inference-flow-with-constraints.solution.ts} (100%)
 rename src/05-generics/{43-button-group.problem.tsx => 44-button-group.problem.tsx} (100%)
 rename src/05-generics/{43-button-group.solution.1.tsx => 44-button-group.solution.1.tsx} (100%)
 rename src/05-generics/{43-button-group.solution.2.tsx => 44-button-group.solution.2.tsx} (100%)
 rename src/05-generics/{44-lazy-load-component.problem.tsx => 45-lazy-load-component.problem.tsx} (100%)
 rename src/05-generics/{44-lazy-load-component.solution.tsx => 45-lazy-load-component.solution.tsx} (100%)
 rename src/05-generics/{45-generics-vs-discriminated-unions.problem.tsx => 46-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/05-generics/{45-generics-vs-discriminated-unions.solution.tsx => 46-generics-vs-discriminated-unions.solution.tsx} (100%)
 rename src/06-advanced-hooks/{46-tuple-return-type.problem.ts => 47-tuple-return-type.problem.ts} (100%)
 rename src/06-advanced-hooks/{46-tuple-return-type.solution.1.ts => 47-tuple-return-type.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{46-tuple-return-type.solution.2.ts => 47-tuple-return-type.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{47-unions-in-usestate.problem.tsx => 48-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{47-unions-in-usestate.solution.tsx => 48-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{48-discriminated-unions-in-usestate.problem.tsx => 49-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{48-discriminated-unions-in-usestate.solution.tsx => 49-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{49-discriminated-tuples-from-custom-hooks.problem.tsx => 50-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/06-advanced-hooks/{49-discriminated-tuples-from-custom-hooks.solution.tsx => 50-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/06-advanced-hooks/{50-use-state-overloads.problem.ts => 51-use-state-overloads.problem.ts} (100%)
 rename src/06-advanced-hooks/{50-use-state-overloads.solution.1.ts => 51-use-state-overloads.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{50-use-state-overloads.solution.2.ts => 51-use-state-overloads.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{51-function-overloads-in-hooks.problem.ts => 52-function-overloads-in-hooks.problem.ts} (100%)
 rename src/06-advanced-hooks/{51-function-overloads-in-hooks.solution.1.ts => 52-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{51-function-overloads-in-hooks.solution.2.ts => 52-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/07-types-deep-dive/{52-understand-react-namespace-export.explainer.ts => 53-understand-react-namespace-export.explainer.ts} (100%)
 rename src/07-types-deep-dive/{53-understanding-jsx-element.explainer.tsx => 54-understanding-jsx-element.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{54-strongly-typing-children.explainer.tsx => 55-strongly-typing-children.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{55-understanding-jsx-intrinsic-elements.explainer.tsx => 56-understanding-jsx-intrinsic-elements.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{56-appending-to-global-namespace.problem.ts => 57-appending-to-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{56-appending-to-global-namespace.solution.ts => 57-appending-to-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{57-declaration-merging-in-global-namespace.problem.ts => 58-declaration-merging-in-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{57-declaration-merging-in-global-namespace.solution.ts => 58-declaration-merging-in-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{58-add-new-global-element.problem.tsx => 59-add-new-global-element.problem.tsx} (100%)
 rename src/07-types-deep-dive/{58-add-new-global-element.solution.tsx => 59-add-new-global-element.solution.tsx} (100%)
 rename src/07-types-deep-dive/{59-html-attributes.explainer.tsx => 60-html-attributes.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{60-add-attribute-to-all-elements.problem.tsx => 61-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{60-add-attribute-to-all-elements.solution.tsx => 61-add-attribute-to-all-elements.solution.tsx} (100%)
 delete mode 100644 src/08-advanced-patterns/61-const-generics-in-generic-components.problem.tsx
 create mode 100644 src/08-advanced-patterns/62-const-generics-in-generic-components.problem.tsx
 rename src/08-advanced-patterns/{62-required-context.problem.tsx => 63-required-context.problem.tsx} (100%)
 rename src/08-advanced-patterns/{62-required-context.solution.1.tsx => 63-required-context.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{62-required-context.solution.2.tsx => 63-required-context.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{63-render-props.problem.tsx => 64-render-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{63-render-props.solution.tsx => 64-render-props.solution.tsx} (100%)
 rename src/08-advanced-patterns/{64-forward-ref-with-generics.explainer.1.tsx => 65-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/08-advanced-patterns/{64-forward-ref-with-generics.explainer.2.tsx => 65-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/08-advanced-patterns/{64-forward-ref-with-generics.explainer.3.ts => 65-forward-ref-with-generics.explainer.3.ts} (100%)
 rename src/08-advanced-patterns/{65-hoc.problem.tsx => 66-hoc.problem.tsx} (100%)
 rename src/08-advanced-patterns/{65-hoc.solution.tsx => 66-hoc.solution.tsx} (100%)
 rename src/08-advanced-patterns/{66-record-of-components-with-same-props.problem.tsx => 67-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{66-record-of-components-with-same-props.solution.1.tsx => 67-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{66-record-of-components-with-same-props.solution.2.tsx => 67-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{67-as-prop.problem.tsx => 68-as-prop.problem.tsx} (100%)
 rename src/08-advanced-patterns/{67-as-prop.solution.1.tsx => 68-as-prop.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{67-as-prop.solution.2.tsx => 68-as-prop.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{68-as-prop-with-custom-components.problem.tsx => 69-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{68-as-prop-with-custom-components.solution.tsx => 69-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/09-external-libraries/{69-react-hook-form.explainer.tsx => 70-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{70-react-hook-form-wrapper.problem.tsx => 71-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{70-react-hook-form-wrapper.solution.tsx => 71-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{71-react-select.problem.tsx => 72-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{71-react-select.solution.tsx => 72-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{72-react-query.explainer.ts => 73-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{73-react-query-wrapper.problem.ts => 74-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{73-react-query-wrapper.solution.ts => 74-react-query-wrapper.solution.ts} (100%)

diff --git a/src/05-generics/41-passing-types-to-components.solution.1.tsx b/src/05-generics/41-passing-types-to-components.solution.1.tsx
new file mode 100644
index 0000000..e54dd0e
--- /dev/null
+++ b/src/05-generics/41-passing-types-to-components.solution.1.tsx
@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface TableProps<T> {
+  rows: T[];
+  renderRow: (row: T) => ReactNode;
+}
+
+export const Table = <T,>(props: TableProps<T>) => {
+  return (
+    <table>
+      <tbody>
+        {props.rows.map((row) => (
+          <tr>{props.renderRow(row)}</tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+interface User {
+  id: number;
+  name: string;
+  age: number;
+}
+
+<>
+  <Table<User>
+    // @ts-expect-error rows should be User[]
+    rows={[1, 2, 3]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, User>>;
+      return <td>{row.name}</td>;
+    }}
+  />
+  <Table<User>
+    rows={[
+      {
+        id: 1,
+        name: "John",
+        age: 30,
+      },
+      {
+        // @ts-expect-error id should be string
+        id: "2",
+        name: "Jane",
+        age: 30,
+      },
+    ]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, User>>;
+      return <td>{row.name}</td>;
+    }}
+  ></Table>
+</>;
diff --git a/src/05-generics/41-passing-types-to-components.solution.2.tsx b/src/05-generics/41-passing-types-to-components.solution.2.tsx
new file mode 100644
index 0000000..a39733c
--- /dev/null
+++ b/src/05-generics/41-passing-types-to-components.solution.2.tsx
@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface TableProps<T> {
+  rows: T[];
+  renderRow: (row: T) => ReactNode;
+}
+
+export const Table = <T,>(props: TableProps<T>) => {
+  return (
+    <table>
+      <tbody>
+        {props.rows.map((row) => (
+          <tr>{props.renderRow(row)}</tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+interface User {
+  id: number;
+  name: string;
+  age: number;
+}
+
+<>
+  <Table
+    // @ts-expect-error rows should be User[]
+    rows={[1, 2, 3]}
+    renderRow={(row: User) => {
+      type test = Expect<Equal<typeof row, User>>;
+      return <td>{row.name}</td>;
+    }}
+  />
+  <Table
+    rows={[
+      {
+        id: 1,
+        name: "John",
+        age: 30,
+      },
+      {
+        // @ts-expect-error id should be string
+        id: "2",
+        name: "Jane",
+        age: 30,
+      },
+    ]}
+    renderRow={(row: User) => {
+      type test = Expect<Equal<typeof row, User>>;
+      return <td>{row.name}</td>;
+    }}
+  ></Table>
+</>;
diff --git a/src/05-generics/41-generic-inference-through-multiple-helpers.problem.tsx b/src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx
similarity index 100%
rename from src/05-generics/41-generic-inference-through-multiple-helpers.problem.tsx
rename to src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx
diff --git a/src/05-generics/41-generic-inference-through-multiple-helpers.solution.tsx b/src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx
similarity index 100%
rename from src/05-generics/41-generic-inference-through-multiple-helpers.solution.tsx
rename to src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx
diff --git a/src/05-generics/42-passing-types-to-components.problem.tsx b/src/05-generics/42-passing-types-to-components.problem.tsx
new file mode 100644
index 0000000..5bba74e
--- /dev/null
+++ b/src/05-generics/42-passing-types-to-components.problem.tsx
@@ -0,0 +1,58 @@
+import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface TableProps<T> {
+  rows: T[];
+  renderRow: (row: T) => ReactNode;
+}
+
+export const Table = <T,>(props: TableProps<T>) => {
+  return (
+    <table>
+      <tbody>
+        {props.rows.map((row) => (
+          <tr>{props.renderRow(row)}</tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+interface User {
+  id: number;
+  name: string;
+  age: number;
+}
+
+/**
+ * Below, we'd love to ensure that the type of `row` is `User`. How
+ * do we do this?
+ */
+<>
+  <Table
+    rows={[1, 2, 3]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, User>>;
+      return <td>{row.name}</td>;
+    }}
+  />
+  <Table
+    rows={[
+      {
+        id: 1,
+        name: "John",
+        age: 30,
+      },
+      {
+        // @ts-expect-error id should be string
+        id: "2",
+        name: "Jane",
+        age: 30,
+      },
+    ]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, User>>;
+      return <td>{row.name}</td>;
+    }}
+  ></Table>
+</>;
diff --git a/src/05-generics/42-inference-flow-with-constraints.problem.ts b/src/05-generics/43-inference-flow-with-constraints.problem.ts
similarity index 100%
rename from src/05-generics/42-inference-flow-with-constraints.problem.ts
rename to src/05-generics/43-inference-flow-with-constraints.problem.ts
diff --git a/src/05-generics/42-inference-flow-with-constraints.solution.ts b/src/05-generics/43-inference-flow-with-constraints.solution.ts
similarity index 100%
rename from src/05-generics/42-inference-flow-with-constraints.solution.ts
rename to src/05-generics/43-inference-flow-with-constraints.solution.ts
diff --git a/src/05-generics/43-button-group.problem.tsx b/src/05-generics/44-button-group.problem.tsx
similarity index 100%
rename from src/05-generics/43-button-group.problem.tsx
rename to src/05-generics/44-button-group.problem.tsx
diff --git a/src/05-generics/43-button-group.solution.1.tsx b/src/05-generics/44-button-group.solution.1.tsx
similarity index 100%
rename from src/05-generics/43-button-group.solution.1.tsx
rename to src/05-generics/44-button-group.solution.1.tsx
diff --git a/src/05-generics/43-button-group.solution.2.tsx b/src/05-generics/44-button-group.solution.2.tsx
similarity index 100%
rename from src/05-generics/43-button-group.solution.2.tsx
rename to src/05-generics/44-button-group.solution.2.tsx
diff --git a/src/05-generics/44-lazy-load-component.problem.tsx b/src/05-generics/45-lazy-load-component.problem.tsx
similarity index 100%
rename from src/05-generics/44-lazy-load-component.problem.tsx
rename to src/05-generics/45-lazy-load-component.problem.tsx
diff --git a/src/05-generics/44-lazy-load-component.solution.tsx b/src/05-generics/45-lazy-load-component.solution.tsx
similarity index 100%
rename from src/05-generics/44-lazy-load-component.solution.tsx
rename to src/05-generics/45-lazy-load-component.solution.tsx
diff --git a/src/05-generics/45-generics-vs-discriminated-unions.problem.tsx b/src/05-generics/46-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/05-generics/45-generics-vs-discriminated-unions.problem.tsx
rename to src/05-generics/46-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/05-generics/45-generics-vs-discriminated-unions.solution.tsx b/src/05-generics/46-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/05-generics/45-generics-vs-discriminated-unions.solution.tsx
rename to src/05-generics/46-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/06-advanced-hooks/46-tuple-return-type.problem.ts b/src/06-advanced-hooks/47-tuple-return-type.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/46-tuple-return-type.problem.ts
rename to src/06-advanced-hooks/47-tuple-return-type.problem.ts
diff --git a/src/06-advanced-hooks/46-tuple-return-type.solution.1.ts b/src/06-advanced-hooks/47-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/46-tuple-return-type.solution.1.ts
rename to src/06-advanced-hooks/47-tuple-return-type.solution.1.ts
diff --git a/src/06-advanced-hooks/46-tuple-return-type.solution.2.ts b/src/06-advanced-hooks/47-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/46-tuple-return-type.solution.2.ts
rename to src/06-advanced-hooks/47-tuple-return-type.solution.2.ts
diff --git a/src/06-advanced-hooks/47-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/48-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/47-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/48-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/47-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/48-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/47-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/48-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/49-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/49-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/49-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/49-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx b/src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/06-advanced-hooks/50-use-state-overloads.problem.ts b/src/06-advanced-hooks/51-use-state-overloads.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/50-use-state-overloads.problem.ts
rename to src/06-advanced-hooks/51-use-state-overloads.problem.ts
diff --git a/src/06-advanced-hooks/50-use-state-overloads.solution.1.ts b/src/06-advanced-hooks/51-use-state-overloads.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/50-use-state-overloads.solution.1.ts
rename to src/06-advanced-hooks/51-use-state-overloads.solution.1.ts
diff --git a/src/06-advanced-hooks/50-use-state-overloads.solution.2.ts b/src/06-advanced-hooks/51-use-state-overloads.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/50-use-state-overloads.solution.2.ts
rename to src/06-advanced-hooks/51-use-state-overloads.solution.2.ts
diff --git a/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/52-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
rename to src/06-advanced-hooks/52-function-overloads-in-hooks.problem.ts
diff --git a/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts b/src/06-advanced-hooks/52-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts
rename to src/06-advanced-hooks/52-function-overloads-in-hooks.solution.1.ts
diff --git a/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts b/src/06-advanced-hooks/52-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts
rename to src/06-advanced-hooks/52-function-overloads-in-hooks.solution.2.ts
diff --git a/src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
diff --git a/src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx
diff --git a/src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx b/src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx
rename to src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx
diff --git a/src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx b/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx
rename to src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx
diff --git a/src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts b/src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts
rename to src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts b/src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts
rename to src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts b/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts
rename to src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts b/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts
rename to src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/58-add-new-global-element.problem.tsx b/src/07-types-deep-dive/59-add-new-global-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/58-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/59-add-new-global-element.problem.tsx
diff --git a/src/07-types-deep-dive/58-add-new-global-element.solution.tsx b/src/07-types-deep-dive/59-add-new-global-element.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/58-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/59-add-new-global-element.solution.tsx
diff --git a/src/07-types-deep-dive/59-html-attributes.explainer.tsx b/src/07-types-deep-dive/60-html-attributes.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-html-attributes.explainer.tsx
rename to src/07-types-deep-dive/60-html-attributes.explainer.tsx
diff --git a/src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx
diff --git a/src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx b/src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx
rename to src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx
diff --git a/src/08-advanced-patterns/61-const-generics-in-generic-components.problem.tsx b/src/08-advanced-patterns/61-const-generics-in-generic-components.problem.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/08-advanced-patterns/62-const-generics-in-generic-components.problem.tsx b/src/08-advanced-patterns/62-const-generics-in-generic-components.problem.tsx
new file mode 100644
index 0000000..994484f
--- /dev/null
+++ b/src/08-advanced-patterns/62-const-generics-in-generic-components.problem.tsx
@@ -0,0 +1,7 @@
+/**
+ * Have a Form component that can receive an object where
+ * the keys are the different form elements, and have the
+ * values inferred based on values passed in.
+ */
+
+const Form = <const TValues extends Record<string, any>>() => {};
diff --git a/src/08-advanced-patterns/62-required-context.problem.tsx b/src/08-advanced-patterns/63-required-context.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-required-context.problem.tsx
rename to src/08-advanced-patterns/63-required-context.problem.tsx
diff --git a/src/08-advanced-patterns/62-required-context.solution.1.tsx b/src/08-advanced-patterns/63-required-context.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-required-context.solution.1.tsx
rename to src/08-advanced-patterns/63-required-context.solution.1.tsx
diff --git a/src/08-advanced-patterns/62-required-context.solution.2.tsx b/src/08-advanced-patterns/63-required-context.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-required-context.solution.2.tsx
rename to src/08-advanced-patterns/63-required-context.solution.2.tsx
diff --git a/src/08-advanced-patterns/63-render-props.problem.tsx b/src/08-advanced-patterns/64-render-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/63-render-props.problem.tsx
rename to src/08-advanced-patterns/64-render-props.problem.tsx
diff --git a/src/08-advanced-patterns/63-render-props.solution.tsx b/src/08-advanced-patterns/64-render-props.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/63-render-props.solution.tsx
rename to src/08-advanced-patterns/64-render-props.solution.tsx
diff --git a/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx
rename to src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.2.tsx b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/64-forward-ref-with-generics.explainer.2.tsx
rename to src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.3.ts b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
similarity index 100%
rename from src/08-advanced-patterns/64-forward-ref-with-generics.explainer.3.ts
rename to src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
diff --git a/src/08-advanced-patterns/65-hoc.problem.tsx b/src/08-advanced-patterns/66-hoc.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-hoc.problem.tsx
rename to src/08-advanced-patterns/66-hoc.problem.tsx
diff --git a/src/08-advanced-patterns/65-hoc.solution.tsx b/src/08-advanced-patterns/66-hoc.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-hoc.solution.tsx
rename to src/08-advanced-patterns/66-hoc.solution.tsx
diff --git a/src/08-advanced-patterns/66-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/67-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/67-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/66-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/67-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/67-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/66-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/67-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/67-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/08-advanced-patterns/67-as-prop.problem.tsx b/src/08-advanced-patterns/68-as-prop.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-as-prop.problem.tsx
rename to src/08-advanced-patterns/68-as-prop.problem.tsx
diff --git a/src/08-advanced-patterns/67-as-prop.solution.1.tsx b/src/08-advanced-patterns/68-as-prop.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/68-as-prop.solution.1.tsx
diff --git a/src/08-advanced-patterns/67-as-prop.solution.2.tsx b/src/08-advanced-patterns/68-as-prop.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/68-as-prop.solution.2.tsx
diff --git a/src/08-advanced-patterns/68-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/69-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/69-as-prop-with-custom-components.problem.tsx
diff --git a/src/08-advanced-patterns/68-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/69-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-as-prop-with-custom-components.solution.tsx
rename to src/08-advanced-patterns/69-as-prop-with-custom-components.solution.tsx
diff --git a/src/09-external-libraries/69-react-hook-form.explainer.tsx b/src/09-external-libraries/70-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/69-react-hook-form.explainer.tsx
rename to src/09-external-libraries/70-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/70-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/71-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/70-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/71-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/70-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/71-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/70-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/71-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/71-react-select.problem.tsx b/src/09-external-libraries/72-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/71-react-select.problem.tsx
rename to src/09-external-libraries/72-react-select.problem.tsx
diff --git a/src/09-external-libraries/71-react-select.solution.tsx b/src/09-external-libraries/72-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/71-react-select.solution.tsx
rename to src/09-external-libraries/72-react-select.solution.tsx
diff --git a/src/09-external-libraries/72-react-query.explainer.ts b/src/09-external-libraries/73-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/72-react-query.explainer.ts
rename to src/09-external-libraries/73-react-query.explainer.ts
diff --git a/src/09-external-libraries/73-react-query-wrapper.problem.ts b/src/09-external-libraries/74-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/73-react-query-wrapper.problem.ts
rename to src/09-external-libraries/74-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/73-react-query-wrapper.solution.ts b/src/09-external-libraries/74-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/73-react-query-wrapper.solution.ts
rename to src/09-external-libraries/74-react-query-wrapper.solution.ts

From ee8884975a8aef497c941bd1d6cea5922a81e221 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 3 Jul 2023 17:05:28 +0100
Subject: [PATCH 048/165] Moved lazy load component to advanced patterns

---
 ...roblem.tsx => 45-generics-vs-discriminated-unions.problem.tsx} | 0
 ...ution.tsx => 45-generics-vs-discriminated-unions.solution.tsx} | 0
 ...ple-return-type.problem.ts => 46-tuple-return-type.problem.ts} | 0
 ...turn-type.solution.1.ts => 46-tuple-return-type.solution.1.ts} | 0
 ...turn-type.solution.2.ts => 46-tuple-return-type.solution.2.ts} | 0
 ...-in-usestate.problem.tsx => 47-unions-in-usestate.problem.tsx} | 0
 ...n-usestate.solution.tsx => 47-unions-in-usestate.solution.tsx} | 0
 ...roblem.tsx => 48-discriminated-unions-in-usestate.problem.tsx} | 0
 ...ution.tsx => 48-discriminated-unions-in-usestate.solution.tsx} | 0
 ....tsx => 49-discriminated-tuples-from-custom-hooks.problem.tsx} | 0
 ...tsx => 49-discriminated-tuples-from-custom-hooks.solution.tsx} | 0
 ...ate-overloads.problem.ts => 50-use-state-overloads.problem.ts} | 0
 ...erloads.solution.1.ts => 50-use-state-overloads.solution.1.ts} | 0
 ...erloads.solution.2.ts => 50-use-state-overloads.solution.2.ts} | 0
 ...hooks.problem.ts => 51-function-overloads-in-hooks.problem.ts} | 0
 ...solution.1.ts => 51-function-overloads-in-hooks.solution.1.ts} | 0
 ...solution.2.ts => 51-function-overloads-in-hooks.solution.2.ts} | 0
 ...ainer.ts => 52-understand-react-namespace-export.explainer.ts} | 0
 ...t.explainer.tsx => 53-understanding-jsx-element.explainer.tsx} | 0
 ...en.explainer.tsx => 54-strongly-typing-children.explainer.tsx} | 0
 ....tsx => 55-understanding-jsx-intrinsic-elements.explainer.tsx} | 0
 ...ace.problem.ts => 56-appending-to-global-namespace.problem.ts} | 0
 ...e.solution.ts => 56-appending-to-global-namespace.solution.ts} | 0
 ...m.ts => 57-declaration-merging-in-global-namespace.problem.ts} | 0
 ....ts => 57-declaration-merging-in-global-namespace.solution.ts} | 0
 ...-element.problem.tsx => 58-add-new-global-element.problem.tsx} | 0
 ...lement.solution.tsx => 58-add-new-global-element.solution.tsx} | 0
 ...-attributes.explainer.tsx => 59-html-attributes.explainer.tsx} | 0
 ...s.problem.tsx => 60-add-attribute-to-all-elements.problem.tsx} | 0
 ...solution.tsx => 60-add-attribute-to-all-elements.solution.tsx} | 0
 .../61-lazy-load-component.problem.tsx}                           | 0
 .../61-lazy-load-component.solution.tsx}                          | 0
 32 files changed, 0 insertions(+), 0 deletions(-)
 rename src/05-generics/{46-generics-vs-discriminated-unions.problem.tsx => 45-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/05-generics/{46-generics-vs-discriminated-unions.solution.tsx => 45-generics-vs-discriminated-unions.solution.tsx} (100%)
 rename src/06-advanced-hooks/{47-tuple-return-type.problem.ts => 46-tuple-return-type.problem.ts} (100%)
 rename src/06-advanced-hooks/{47-tuple-return-type.solution.1.ts => 46-tuple-return-type.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{47-tuple-return-type.solution.2.ts => 46-tuple-return-type.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{48-unions-in-usestate.problem.tsx => 47-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{48-unions-in-usestate.solution.tsx => 47-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{49-discriminated-unions-in-usestate.problem.tsx => 48-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{49-discriminated-unions-in-usestate.solution.tsx => 48-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{50-discriminated-tuples-from-custom-hooks.problem.tsx => 49-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/06-advanced-hooks/{50-discriminated-tuples-from-custom-hooks.solution.tsx => 49-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/06-advanced-hooks/{51-use-state-overloads.problem.ts => 50-use-state-overloads.problem.ts} (100%)
 rename src/06-advanced-hooks/{51-use-state-overloads.solution.1.ts => 50-use-state-overloads.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{51-use-state-overloads.solution.2.ts => 50-use-state-overloads.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{52-function-overloads-in-hooks.problem.ts => 51-function-overloads-in-hooks.problem.ts} (100%)
 rename src/06-advanced-hooks/{52-function-overloads-in-hooks.solution.1.ts => 51-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{52-function-overloads-in-hooks.solution.2.ts => 51-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/07-types-deep-dive/{53-understand-react-namespace-export.explainer.ts => 52-understand-react-namespace-export.explainer.ts} (100%)
 rename src/07-types-deep-dive/{54-understanding-jsx-element.explainer.tsx => 53-understanding-jsx-element.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{55-strongly-typing-children.explainer.tsx => 54-strongly-typing-children.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{56-understanding-jsx-intrinsic-elements.explainer.tsx => 55-understanding-jsx-intrinsic-elements.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{57-appending-to-global-namespace.problem.ts => 56-appending-to-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{57-appending-to-global-namespace.solution.ts => 56-appending-to-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{58-declaration-merging-in-global-namespace.problem.ts => 57-declaration-merging-in-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{58-declaration-merging-in-global-namespace.solution.ts => 57-declaration-merging-in-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{59-add-new-global-element.problem.tsx => 58-add-new-global-element.problem.tsx} (100%)
 rename src/07-types-deep-dive/{59-add-new-global-element.solution.tsx => 58-add-new-global-element.solution.tsx} (100%)
 rename src/07-types-deep-dive/{60-html-attributes.explainer.tsx => 59-html-attributes.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{61-add-attribute-to-all-elements.problem.tsx => 60-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{61-add-attribute-to-all-elements.solution.tsx => 60-add-attribute-to-all-elements.solution.tsx} (100%)
 rename src/{05-generics/45-lazy-load-component.problem.tsx => 08-advanced-patterns/61-lazy-load-component.problem.tsx} (100%)
 rename src/{05-generics/45-lazy-load-component.solution.tsx => 08-advanced-patterns/61-lazy-load-component.solution.tsx} (100%)

diff --git a/src/05-generics/46-generics-vs-discriminated-unions.problem.tsx b/src/05-generics/45-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/05-generics/46-generics-vs-discriminated-unions.problem.tsx
rename to src/05-generics/45-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/05-generics/46-generics-vs-discriminated-unions.solution.tsx b/src/05-generics/45-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/05-generics/46-generics-vs-discriminated-unions.solution.tsx
rename to src/05-generics/45-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/06-advanced-hooks/47-tuple-return-type.problem.ts b/src/06-advanced-hooks/46-tuple-return-type.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/47-tuple-return-type.problem.ts
rename to src/06-advanced-hooks/46-tuple-return-type.problem.ts
diff --git a/src/06-advanced-hooks/47-tuple-return-type.solution.1.ts b/src/06-advanced-hooks/46-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/47-tuple-return-type.solution.1.ts
rename to src/06-advanced-hooks/46-tuple-return-type.solution.1.ts
diff --git a/src/06-advanced-hooks/47-tuple-return-type.solution.2.ts b/src/06-advanced-hooks/46-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/47-tuple-return-type.solution.2.ts
rename to src/06-advanced-hooks/46-tuple-return-type.solution.2.ts
diff --git a/src/06-advanced-hooks/48-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/47-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/48-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/47-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/48-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/47-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/48-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/47-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/49-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/49-discriminated-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/49-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/49-discriminated-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.problem.tsx b/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/50-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/06-advanced-hooks/51-use-state-overloads.problem.ts b/src/06-advanced-hooks/50-use-state-overloads.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/51-use-state-overloads.problem.ts
rename to src/06-advanced-hooks/50-use-state-overloads.problem.ts
diff --git a/src/06-advanced-hooks/51-use-state-overloads.solution.1.ts b/src/06-advanced-hooks/50-use-state-overloads.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/51-use-state-overloads.solution.1.ts
rename to src/06-advanced-hooks/50-use-state-overloads.solution.1.ts
diff --git a/src/06-advanced-hooks/51-use-state-overloads.solution.2.ts b/src/06-advanced-hooks/50-use-state-overloads.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/51-use-state-overloads.solution.2.ts
rename to src/06-advanced-hooks/50-use-state-overloads.solution.2.ts
diff --git a/src/06-advanced-hooks/52-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/52-function-overloads-in-hooks.problem.ts
rename to src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
diff --git a/src/06-advanced-hooks/52-function-overloads-in-hooks.solution.1.ts b/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/52-function-overloads-in-hooks.solution.1.ts
rename to src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts
diff --git a/src/06-advanced-hooks/52-function-overloads-in-hooks.solution.2.ts b/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/52-function-overloads-in-hooks.solution.2.ts
rename to src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts
diff --git a/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts
diff --git a/src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx
diff --git a/src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx b/src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx
rename to src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx
diff --git a/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx b/src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx
rename to src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx
diff --git a/src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts b/src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts
rename to src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts b/src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts
rename to src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts b/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts
rename to src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts b/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts
rename to src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/59-add-new-global-element.problem.tsx b/src/07-types-deep-dive/58-add-new-global-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/58-add-new-global-element.problem.tsx
diff --git a/src/07-types-deep-dive/59-add-new-global-element.solution.tsx b/src/07-types-deep-dive/58-add-new-global-element.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/58-add-new-global-element.solution.tsx
diff --git a/src/07-types-deep-dive/60-html-attributes.explainer.tsx b/src/07-types-deep-dive/59-html-attributes.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/60-html-attributes.explainer.tsx
rename to src/07-types-deep-dive/59-html-attributes.explainer.tsx
diff --git a/src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx
diff --git a/src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx b/src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx
rename to src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx
diff --git a/src/05-generics/45-lazy-load-component.problem.tsx b/src/08-advanced-patterns/61-lazy-load-component.problem.tsx
similarity index 100%
rename from src/05-generics/45-lazy-load-component.problem.tsx
rename to src/08-advanced-patterns/61-lazy-load-component.problem.tsx
diff --git a/src/05-generics/45-lazy-load-component.solution.tsx b/src/08-advanced-patterns/61-lazy-load-component.solution.tsx
similarity index 100%
rename from src/05-generics/45-lazy-load-component.solution.tsx
rename to src/08-advanced-patterns/61-lazy-load-component.solution.tsx

From a7201506ec73759b96c45f03e2ade5eb06d9a384 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 11:50:50 +0100
Subject: [PATCH 049/165] Changed solution to 34

---
 src/05-generics/34-type-helpers.solution.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/05-generics/34-type-helpers.solution.tsx b/src/05-generics/34-type-helpers.solution.tsx
index 7f8f447..40c01cd 100644
--- a/src/05-generics/34-type-helpers.solution.tsx
+++ b/src/05-generics/34-type-helpers.solution.tsx
@@ -4,7 +4,14 @@ type ButtonVariant = "primary" | "secondary" | "tertiary";
 type LooseIcon = LooseAutocomplete<Icon>;
 type LooseButtonVariant = LooseAutocomplete<ButtonVariant>;
 
-export type LooseAutocomplete<T> = T | (string & {});
+/**
+ * Comment explaining what LooseAutocomplete does
+ */
+type LooseAutocomplete<T> = T | (string & {});
+
+const looseAutocomplete = (t: any) => {
+  return "hello";
+};
 
 export const icons: LooseIcon[] = [
   "home",

From 0875888dcf82f61db562c210aeb61515e43c1190 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 11:59:45 +0100
Subject: [PATCH 050/165] Changed 35 solution

---
 src/05-generics/35-type-helpers-2.solution.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/05-generics/35-type-helpers-2.solution.tsx b/src/05-generics/35-type-helpers-2.solution.tsx
index dbd6314..4a6907e 100644
--- a/src/05-generics/35-type-helpers-2.solution.tsx
+++ b/src/05-generics/35-type-helpers-2.solution.tsx
@@ -1,10 +1,8 @@
 import { ChangeEventHandler } from "react";
 
-type AllOrNothing<T> =
-  | T
-  | {
-      [K in keyof T]?: undefined;
-    };
+type AllOrNothing<T> = T | ToUndefinedObject<T>;
+
+type ToUndefinedObject<T> = Partial<Record<keyof T, undefined>>;
 
 export type InputProps = AllOrNothing<{
   value: string;

From edad3ddea6268d446b8af6b862037901e5778f46 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 12:01:01 +0100
Subject: [PATCH 051/165] Adjusted 36

---
 .../36-type-helpers-with-constraints.problem.tsx | 10 ++++------
 ...-type-helpers-with-constraints.solution.1.tsx | 14 +++-----------
 ...-type-helpers-with-constraints.solution.2.tsx | 16 +++++-----------
 3 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/src/05-generics/36-type-helpers-with-constraints.problem.tsx b/src/05-generics/36-type-helpers-with-constraints.problem.tsx
index 97d4bec..13e9957 100644
--- a/src/05-generics/36-type-helpers-with-constraints.problem.tsx
+++ b/src/05-generics/36-type-helpers-with-constraints.problem.tsx
@@ -1,10 +1,8 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
-type AllOrNothing<T> =
-  | T
-  | {
-      [K in keyof T]?: undefined;
-    };
+type AllOrNothing<T> = T | ToUndefinedObject<T>;
+
+type ToUndefinedObject<T> = Partial<Record<keyof T, undefined>>;
 
 /**
  * There's a problem with our AllOrNothing type. It's letting
@@ -21,5 +19,5 @@ type tests = [
   AllOrNothing<undefined>,
   // @ts-expect-error
   AllOrNothing<string[]>,
-  Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>,
+  Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>
 ];
diff --git a/src/05-generics/36-type-helpers-with-constraints.solution.1.tsx b/src/05-generics/36-type-helpers-with-constraints.solution.1.tsx
index 3f5a9d9..7e361a2 100644
--- a/src/05-generics/36-type-helpers-with-constraints.solution.1.tsx
+++ b/src/05-generics/36-type-helpers-with-constraints.solution.1.tsx
@@ -1,16 +1,8 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
-type AllOrNothing<T extends object> =
-  | T
-  | {
-      [K in keyof T]?: undefined;
-    };
+type AllOrNothing<T extends object> = T | ToUndefinedObject<T>;
 
-/**
- * There's a problem with our AllOrNothing type. It's letting
- * us pass ANYTHING as T. We want to constrain it so that it
- * only works with objects.
- */
+type ToUndefinedObject<T extends object> = Partial<Record<keyof T, undefined>>;
 
 type tests = [
   // @ts-expect-error
@@ -19,7 +11,7 @@ type tests = [
   AllOrNothing<number>,
   // @ts-expect-error
   AllOrNothing<undefined>,
-  Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>,
+  Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>
 ];
 
 // Note that this isn't perfect! Try AllOrNothing<string[]>
diff --git a/src/05-generics/36-type-helpers-with-constraints.solution.2.tsx b/src/05-generics/36-type-helpers-with-constraints.solution.2.tsx
index f03b887..6ddf2f4 100644
--- a/src/05-generics/36-type-helpers-with-constraints.solution.2.tsx
+++ b/src/05-generics/36-type-helpers-with-constraints.solution.2.tsx
@@ -1,16 +1,10 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
-type AllOrNothing<T extends Record<string, any>> =
-  | T
-  | {
-      [K in keyof T]?: undefined;
-    };
+type AllOrNothing<T extends Record<string, any>> = T | ToUndefinedObject<T>;
 
-/**
- * There's a problem with our AllOrNothing type. It's letting
- * us pass ANYTHING as T. We want to constrain it so that it
- * only works with objects.
- */
+type ToUndefinedObject<T extends Record<string, any>> = Partial<
+  Record<keyof T, undefined>
+>;
 
 type tests = [
   // @ts-expect-error
@@ -19,7 +13,7 @@ type tests = [
   AllOrNothing<number>,
   // @ts-expect-error
   AllOrNothing<undefined>,
-  Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>,
+  Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>
 ];
 
 // Note that this isn't perfect! Try AllOrNothing<string[]>

From 3050f0cf3899b96f758f46c7fc92f00e2a44ff5d Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 12:02:38 +0100
Subject: [PATCH 052/165] Fixed 36

---
 src/05-generics/36-type-helpers-with-constraints.problem.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/05-generics/36-type-helpers-with-constraints.problem.tsx b/src/05-generics/36-type-helpers-with-constraints.problem.tsx
index 13e9957..920f0fc 100644
--- a/src/05-generics/36-type-helpers-with-constraints.problem.tsx
+++ b/src/05-generics/36-type-helpers-with-constraints.problem.tsx
@@ -17,7 +17,5 @@ type tests = [
   AllOrNothing<number>,
   // @ts-expect-error
   AllOrNothing<undefined>,
-  // @ts-expect-error
-  AllOrNothing<string[]>,
   Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>
 ];

From bde21c4f2266954a127fadaaefd8f98530f2d72f Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 13:47:57 +0100
Subject: [PATCH 053/165] Fixed order

---
 ...ge-hook.problem.ts => 37-generic-localstorage-hook.problem.ts} | 0
 ...-hook.solution.ts => 37-generic-localstorage-hook.solution.ts} | 0
 ...{37-generic-props.problem.tsx => 39-generic-props.problem.tsx} | 0
 ...7-generic-props.solution.tsx => 39-generic-props.solution.tsx} | 0
 ...onents.problem.tsx => 40-generic-class-components.problem.tsx} | 0
 ...ents.solution.tsx => 40-generic-class-components.solution.tsx} | 0
 6 files changed, 0 insertions(+), 0 deletions(-)
 rename src/05-generics/{40-generic-localstorage-hook.problem.ts => 37-generic-localstorage-hook.problem.ts} (100%)
 rename src/05-generics/{40-generic-localstorage-hook.solution.ts => 37-generic-localstorage-hook.solution.ts} (100%)
 rename src/05-generics/{37-generic-props.problem.tsx => 39-generic-props.problem.tsx} (100%)
 rename src/05-generics/{37-generic-props.solution.tsx => 39-generic-props.solution.tsx} (100%)
 rename src/05-generics/{39-generic-class-components.problem.tsx => 40-generic-class-components.problem.tsx} (100%)
 rename src/05-generics/{39-generic-class-components.solution.tsx => 40-generic-class-components.solution.tsx} (100%)

diff --git a/src/05-generics/40-generic-localstorage-hook.problem.ts b/src/05-generics/37-generic-localstorage-hook.problem.ts
similarity index 100%
rename from src/05-generics/40-generic-localstorage-hook.problem.ts
rename to src/05-generics/37-generic-localstorage-hook.problem.ts
diff --git a/src/05-generics/40-generic-localstorage-hook.solution.ts b/src/05-generics/37-generic-localstorage-hook.solution.ts
similarity index 100%
rename from src/05-generics/40-generic-localstorage-hook.solution.ts
rename to src/05-generics/37-generic-localstorage-hook.solution.ts
diff --git a/src/05-generics/37-generic-props.problem.tsx b/src/05-generics/39-generic-props.problem.tsx
similarity index 100%
rename from src/05-generics/37-generic-props.problem.tsx
rename to src/05-generics/39-generic-props.problem.tsx
diff --git a/src/05-generics/37-generic-props.solution.tsx b/src/05-generics/39-generic-props.solution.tsx
similarity index 100%
rename from src/05-generics/37-generic-props.solution.tsx
rename to src/05-generics/39-generic-props.solution.tsx
diff --git a/src/05-generics/39-generic-class-components.problem.tsx b/src/05-generics/40-generic-class-components.problem.tsx
similarity index 100%
rename from src/05-generics/39-generic-class-components.problem.tsx
rename to src/05-generics/40-generic-class-components.problem.tsx
diff --git a/src/05-generics/39-generic-class-components.solution.tsx b/src/05-generics/40-generic-class-components.solution.tsx
similarity index 100%
rename from src/05-generics/39-generic-class-components.solution.tsx
rename to src/05-generics/40-generic-class-components.solution.tsx

From 3d1b4ca76ad0d814b5bf9fcc1e0c3e9a700517ba Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 14:31:34 +0100
Subject: [PATCH 054/165] Changed T to TRow in 40

---
 src/05-generics/40-generic-class-components.solution.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/05-generics/40-generic-class-components.solution.tsx b/src/05-generics/40-generic-class-components.solution.tsx
index da434e8..fa4a0e6 100644
--- a/src/05-generics/40-generic-class-components.solution.tsx
+++ b/src/05-generics/40-generic-class-components.solution.tsx
@@ -1,12 +1,12 @@
 import { ReactNode } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-interface TableProps<T> {
-  rows: T[];
-  renderRow: (row: T) => ReactNode;
+interface TableProps<TRow> {
+  rows: TRow[];
+  renderRow: (row: TRow) => ReactNode;
 }
 
-export class Table<T> extends React.Component<TableProps<T>> {
+export class Table<TRow> extends React.Component<TableProps<TRow>> {
   render(): ReactNode {
     return (
       <table>

From 1f8db0b12cef954d124f9d5bfaed86ec43cd9e2c Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 14:32:42 +0100
Subject: [PATCH 055/165] Added 41

---
 ...41-passing-types-to-components.problem.tsx | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/05-generics/41-passing-types-to-components.problem.tsx

diff --git a/src/05-generics/41-passing-types-to-components.problem.tsx b/src/05-generics/41-passing-types-to-components.problem.tsx
new file mode 100644
index 0000000..d272c49
--- /dev/null
+++ b/src/05-generics/41-passing-types-to-components.problem.tsx
@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface TableProps<T> {
+  rows: T[];
+  renderRow: (row: T) => ReactNode;
+}
+
+export const Table = <T,>(props: TableProps<T>) => {
+  return (
+    <table>
+      <tbody>
+        {props.rows.map((row) => (
+          <tr>{props.renderRow(row)}</tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+interface User {
+  id: number;
+  name: string;
+  age: number;
+}
+
+<>
+  <Table
+    // @ts-expect-error rows should be User[]
+    rows={[1, 2, 3]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, User>>;
+      return <td>{row.name}</td>;
+    }}
+  />
+  <Table
+    rows={[
+      {
+        id: 1,
+        name: "John",
+        age: 30,
+      },
+      {
+        // @ts-expect-error id should be string
+        id: "2",
+        name: "Jane",
+        age: 30,
+      },
+    ]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, User>>;
+      return <td>{row.name}</td>;
+    }}
+  ></Table>
+</>;

From fe1ee9743f26c926c3cc59275e0398314e364800 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 14:38:52 +0100
Subject: [PATCH 056/165] Made 41.1 the only solution

---
 ...passing-types-to-components.solution.2.tsx | 55 -------------------
 ...-passing-types-to-components.solution.tsx} |  0
 2 files changed, 55 deletions(-)
 delete mode 100644 src/05-generics/41-passing-types-to-components.solution.2.tsx
 rename src/05-generics/{41-passing-types-to-components.solution.1.tsx => 41-passing-types-to-components.solution.tsx} (100%)

diff --git a/src/05-generics/41-passing-types-to-components.solution.2.tsx b/src/05-generics/41-passing-types-to-components.solution.2.tsx
deleted file mode 100644
index a39733c..0000000
--- a/src/05-generics/41-passing-types-to-components.solution.2.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ReactNode } from "react";
-import { Equal, Expect } from "../helpers/type-utils";
-
-interface TableProps<T> {
-  rows: T[];
-  renderRow: (row: T) => ReactNode;
-}
-
-export const Table = <T,>(props: TableProps<T>) => {
-  return (
-    <table>
-      <tbody>
-        {props.rows.map((row) => (
-          <tr>{props.renderRow(row)}</tr>
-        ))}
-      </tbody>
-    </table>
-  );
-};
-
-interface User {
-  id: number;
-  name: string;
-  age: number;
-}
-
-<>
-  <Table
-    // @ts-expect-error rows should be User[]
-    rows={[1, 2, 3]}
-    renderRow={(row: User) => {
-      type test = Expect<Equal<typeof row, User>>;
-      return <td>{row.name}</td>;
-    }}
-  />
-  <Table
-    rows={[
-      {
-        id: 1,
-        name: "John",
-        age: 30,
-      },
-      {
-        // @ts-expect-error id should be string
-        id: "2",
-        name: "Jane",
-        age: 30,
-      },
-    ]}
-    renderRow={(row: User) => {
-      type test = Expect<Equal<typeof row, User>>;
-      return <td>{row.name}</td>;
-    }}
-  ></Table>
-</>;
diff --git a/src/05-generics/41-passing-types-to-components.solution.1.tsx b/src/05-generics/41-passing-types-to-components.solution.tsx
similarity index 100%
rename from src/05-generics/41-passing-types-to-components.solution.1.tsx
rename to src/05-generics/41-passing-types-to-components.solution.tsx

From 64122c586bf56b41241880389b44e76a98bc8dd7 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 14:47:22 +0100
Subject: [PATCH 057/165] Changed to TValue

---
 ...-generic-inference-through-multiple-helpers.solution.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx b/src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx
index c9a79e9..61ebeff 100644
--- a/src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx
+++ b/src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx
@@ -1,17 +1,17 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
-interface Button<TValue extends string> {
+interface Button<TValue> {
   value: TValue;
   label: string;
 }
 
-interface ButtonGroupProps<TValue extends string> {
+interface ButtonGroupProps<TValue> {
   buttons: Button<TValue>[];
   onClick: (value: TValue) => void;
 }
 
 const ButtonGroup = <TValue extends string>(
-  props: ButtonGroupProps<TValue>,
+  props: ButtonGroupProps<TValue>
 ) => {
   return (
     <div>

From c515364e6a66092b847981b32d3017a3612ab105 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 15:20:55 +0100
Subject: [PATCH 058/165] Removed 44

---
 src/05-generics/44-button-group.problem.tsx   | 50 -------------------
 .../44-button-group.solution.1.tsx            | 36 -------------
 .../44-button-group.solution.2.tsx            | 46 -----------------
 ...erics-vs-discriminated-unions.problem.tsx} |  0
 ...rics-vs-discriminated-unions.solution.tsx} |  0
 ...lem.ts => 45-tuple-return-type.problem.ts} |  0
 ....ts => 45-tuple-return-type.solution.1.ts} |  0
 ....ts => 45-tuple-return-type.solution.2.ts} |  0
 ....tsx => 46-unions-in-usestate.problem.tsx} |  0
 ...tsx => 46-unions-in-usestate.solution.tsx} |  0
 ...criminated-unions-in-usestate.problem.tsx} |  0
 ...riminated-unions-in-usestate.solution.tsx} |  0
 ...ated-tuples-from-custom-hooks.problem.tsx} |  0
 ...ted-tuples-from-custom-hooks.solution.tsx} |  0
 ...m.ts => 49-use-state-overloads.problem.ts} |  0
 ...s => 49-use-state-overloads.solution.1.ts} |  0
 ...s => 49-use-state-overloads.solution.2.ts} |  0
 ...50-function-overloads-in-hooks.problem.ts} |  0
 ...function-overloads-in-hooks.solution.1.ts} |  0
 ...function-overloads-in-hooks.solution.2.ts} |  0
 ...stand-react-namespace-export.explainer.ts} |  0
 ...2-understanding-jsx-element.explainer.tsx} |  0
 ...53-strongly-typing-children.explainer.tsx} |  0
 ...ding-jsx-intrinsic-elements.explainer.tsx} |  0
 ...-appending-to-global-namespace.problem.ts} |  0
 ...appending-to-global-namespace.solution.ts} |  0
 ...on-merging-in-global-namespace.problem.ts} |  0
 ...n-merging-in-global-namespace.solution.ts} |  0
 ... => 57-add-new-global-element.problem.tsx} |  0
 ...=> 57-add-new-global-element.solution.tsx} |  0
 ...r.tsx => 58-html-attributes.explainer.tsx} |  0
 ...add-attribute-to-all-elements.problem.tsx} |  0
 ...dd-attribute-to-all-elements.solution.tsx} |  0
 ...tsx => 60-lazy-load-component.problem.tsx} |  0
 ...sx => 60-lazy-load-component.solution.tsx} |  0
 ...enerics-in-generic-components.problem.tsx} |  0
 ...em.tsx => 62-required-context.problem.tsx} |  0
 ...tsx => 62-required-context.solution.1.tsx} |  0
 ...tsx => 62-required-context.solution.2.tsx} |  0
 ...roblem.tsx => 63-render-props.problem.tsx} |  0
 ...ution.tsx => 63-render-props.solution.tsx} |  0
 ...forward-ref-with-generics.explainer.1.tsx} |  0
 ...forward-ref-with-generics.explainer.2.tsx} |  0
 ...-forward-ref-with-generics.explainer.3.ts} |  0
 ...{66-hoc.problem.tsx => 65-hoc.problem.tsx} |  0
 ...6-hoc.solution.tsx => 65-hoc.solution.tsx} |  0
 ...of-components-with-same-props.problem.tsx} |  0
 ...components-with-same-props.solution.1.tsx} |  0
 ...components-with-same-props.solution.2.tsx} |  0
 ...rop.problem.tsx => 67-as-prop.problem.tsx} |  0
 ...lution.1.tsx => 67-as-prop.solution.1.tsx} |  0
 ...lution.2.tsx => 67-as-prop.solution.2.tsx} |  0
 ...s-prop-with-custom-components.problem.tsx} |  0
 ...-prop-with-custom-components.solution.tsx} |  0
 ...r.tsx => 69-react-hook-form.explainer.tsx} |  0
 ...=> 70-react-hook-form-wrapper.problem.tsx} |  0
 ...> 70-react-hook-form-wrapper.solution.tsx} |  0
 ...roblem.tsx => 71-react-select.problem.tsx} |  0
 ...ution.tsx => 71-react-select.solution.tsx} |  0
 ...plainer.ts => 72-react-query.explainer.ts} |  0
 ...m.ts => 73-react-query-wrapper.problem.ts} |  0
 ....ts => 73-react-query-wrapper.solution.ts} |  0
 62 files changed, 132 deletions(-)
 delete mode 100644 src/05-generics/44-button-group.problem.tsx
 delete mode 100644 src/05-generics/44-button-group.solution.1.tsx
 delete mode 100644 src/05-generics/44-button-group.solution.2.tsx
 rename src/05-generics/{45-generics-vs-discriminated-unions.problem.tsx => 44-generics-vs-discriminated-unions.problem.tsx} (100%)
 rename src/05-generics/{45-generics-vs-discriminated-unions.solution.tsx => 44-generics-vs-discriminated-unions.solution.tsx} (100%)
 rename src/06-advanced-hooks/{46-tuple-return-type.problem.ts => 45-tuple-return-type.problem.ts} (100%)
 rename src/06-advanced-hooks/{46-tuple-return-type.solution.1.ts => 45-tuple-return-type.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{46-tuple-return-type.solution.2.ts => 45-tuple-return-type.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{47-unions-in-usestate.problem.tsx => 46-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{47-unions-in-usestate.solution.tsx => 46-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{48-discriminated-unions-in-usestate.problem.tsx => 47-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{48-discriminated-unions-in-usestate.solution.tsx => 47-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{49-discriminated-tuples-from-custom-hooks.problem.tsx => 48-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/06-advanced-hooks/{49-discriminated-tuples-from-custom-hooks.solution.tsx => 48-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/06-advanced-hooks/{50-use-state-overloads.problem.ts => 49-use-state-overloads.problem.ts} (100%)
 rename src/06-advanced-hooks/{50-use-state-overloads.solution.1.ts => 49-use-state-overloads.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{50-use-state-overloads.solution.2.ts => 49-use-state-overloads.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{51-function-overloads-in-hooks.problem.ts => 50-function-overloads-in-hooks.problem.ts} (100%)
 rename src/06-advanced-hooks/{51-function-overloads-in-hooks.solution.1.ts => 50-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{51-function-overloads-in-hooks.solution.2.ts => 50-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/07-types-deep-dive/{52-understand-react-namespace-export.explainer.ts => 51-understand-react-namespace-export.explainer.ts} (100%)
 rename src/07-types-deep-dive/{53-understanding-jsx-element.explainer.tsx => 52-understanding-jsx-element.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{54-strongly-typing-children.explainer.tsx => 53-strongly-typing-children.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{55-understanding-jsx-intrinsic-elements.explainer.tsx => 54-understanding-jsx-intrinsic-elements.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{56-appending-to-global-namespace.problem.ts => 55-appending-to-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{56-appending-to-global-namespace.solution.ts => 55-appending-to-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{57-declaration-merging-in-global-namespace.problem.ts => 56-declaration-merging-in-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{57-declaration-merging-in-global-namespace.solution.ts => 56-declaration-merging-in-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{58-add-new-global-element.problem.tsx => 57-add-new-global-element.problem.tsx} (100%)
 rename src/07-types-deep-dive/{58-add-new-global-element.solution.tsx => 57-add-new-global-element.solution.tsx} (100%)
 rename src/07-types-deep-dive/{59-html-attributes.explainer.tsx => 58-html-attributes.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{60-add-attribute-to-all-elements.problem.tsx => 59-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{60-add-attribute-to-all-elements.solution.tsx => 59-add-attribute-to-all-elements.solution.tsx} (100%)
 rename src/08-advanced-patterns/{61-lazy-load-component.problem.tsx => 60-lazy-load-component.problem.tsx} (100%)
 rename src/08-advanced-patterns/{61-lazy-load-component.solution.tsx => 60-lazy-load-component.solution.tsx} (100%)
 rename src/08-advanced-patterns/{62-const-generics-in-generic-components.problem.tsx => 61-const-generics-in-generic-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{63-required-context.problem.tsx => 62-required-context.problem.tsx} (100%)
 rename src/08-advanced-patterns/{63-required-context.solution.1.tsx => 62-required-context.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{63-required-context.solution.2.tsx => 62-required-context.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{64-render-props.problem.tsx => 63-render-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{64-render-props.solution.tsx => 63-render-props.solution.tsx} (100%)
 rename src/08-advanced-patterns/{65-forward-ref-with-generics.explainer.1.tsx => 64-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/08-advanced-patterns/{65-forward-ref-with-generics.explainer.2.tsx => 64-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/08-advanced-patterns/{65-forward-ref-with-generics.explainer.3.ts => 64-forward-ref-with-generics.explainer.3.ts} (100%)
 rename src/08-advanced-patterns/{66-hoc.problem.tsx => 65-hoc.problem.tsx} (100%)
 rename src/08-advanced-patterns/{66-hoc.solution.tsx => 65-hoc.solution.tsx} (100%)
 rename src/08-advanced-patterns/{67-record-of-components-with-same-props.problem.tsx => 66-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{67-record-of-components-with-same-props.solution.1.tsx => 66-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{67-record-of-components-with-same-props.solution.2.tsx => 66-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{68-as-prop.problem.tsx => 67-as-prop.problem.tsx} (100%)
 rename src/08-advanced-patterns/{68-as-prop.solution.1.tsx => 67-as-prop.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{68-as-prop.solution.2.tsx => 67-as-prop.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{69-as-prop-with-custom-components.problem.tsx => 68-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{69-as-prop-with-custom-components.solution.tsx => 68-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/09-external-libraries/{70-react-hook-form.explainer.tsx => 69-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{71-react-hook-form-wrapper.problem.tsx => 70-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{71-react-hook-form-wrapper.solution.tsx => 70-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{72-react-select.problem.tsx => 71-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{72-react-select.solution.tsx => 71-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{73-react-query.explainer.ts => 72-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{74-react-query-wrapper.problem.ts => 73-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{74-react-query-wrapper.solution.ts => 73-react-query-wrapper.solution.ts} (100%)

diff --git a/src/05-generics/44-button-group.problem.tsx b/src/05-generics/44-button-group.problem.tsx
deleted file mode 100644
index 59524e4..0000000
--- a/src/05-generics/44-button-group.problem.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Equal, Expect } from "../helpers/type-utils";
-
-interface ButtonGroupProps<TButtons extends string[]> {
-  buttons: TButtons;
-  onClick: (value: TButtons[number]) => void;
-}
-
-/**
- * Here, we've changed the type of the `buttons` prop to be an array of strings.
- * But the inference has broken in the ButtonGroup component below!
- *
- * See if you can find a way to fix it. A 'const' annotation may help:
- *
- * https://www.totaltypescript.com/const-type-parameters
- *
- * OR you might be able to fix it by changing the type of the type argument.
- */
-const ButtonGroup = <TButtons extends string[]>(
-  props: ButtonGroupProps<TButtons>,
-) => {
-  return (
-    <div>
-      {props.buttons.map((button) => {
-        return (
-          <button
-            key={button}
-            onClick={() => {
-              props.onClick(button);
-            }}
-          >
-            {button}
-          </button>
-        );
-      })}
-    </div>
-  );
-};
-
-<>
-  <ButtonGroup
-    onClick={(value) => {
-      /**
-       * Instead of inferring the type of `value` to be "add" | "delete", it's
-       * now inferred to be `string`.
-       */
-      type test = Expect<Equal<typeof value, "add" | "delete">>;
-    }}
-    buttons={["add", "delete"]}
-  ></ButtonGroup>
-</>;
diff --git a/src/05-generics/44-button-group.solution.1.tsx b/src/05-generics/44-button-group.solution.1.tsx
deleted file mode 100644
index f049696..0000000
--- a/src/05-generics/44-button-group.solution.1.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Equal, Expect } from "../helpers/type-utils";
-
-interface ButtonGroupProps<TButton extends string> {
-  buttons: TButton[];
-  onClick: (value: TButton) => void;
-}
-
-const ButtonGroup = <TButton extends string>(
-  props: ButtonGroupProps<TButton>,
-) => {
-  return (
-    <div>
-      {props.buttons.map((button) => {
-        return (
-          <button
-            key={button}
-            onClick={() => {
-              props.onClick(button);
-            }}
-          >
-            {button}
-          </button>
-        );
-      })}
-    </div>
-  );
-};
-
-<>
-  <ButtonGroup
-    onClick={(value) => {
-      type test = Expect<Equal<typeof value, "add" | "delete">>;
-    }}
-    buttons={["add", "delete"]}
-  ></ButtonGroup>
-</>;
diff --git a/src/05-generics/44-button-group.solution.2.tsx b/src/05-generics/44-button-group.solution.2.tsx
deleted file mode 100644
index fe5c808..0000000
--- a/src/05-generics/44-button-group.solution.2.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Equal, Expect } from "../helpers/type-utils";
-
-interface ButtonGroupProps<TButton extends readonly string[]> {
-  buttons: TButton;
-  onClick: (value: TButton[number]) => void;
-}
-
-/**
- * This is an alternative solution, though it isn't quite as clean
- * as the first solution. The main difference is that it uses the
- * const annotation to infer the type of the buttons prop.
- *
- * This behaves the same, but requires more annotations:
- *
- * 'readonly' on each string[]
- * TButton[number] instead of TButton on the onClick prop
- */
-const ButtonGroup = <const TButton extends readonly string[]>(
-  props: ButtonGroupProps<TButton>,
-) => {
-  return (
-    <div>
-      {props.buttons.map((button) => {
-        return (
-          <button
-            key={button}
-            onClick={() => {
-              props.onClick(button);
-            }}
-          >
-            {button}
-          </button>
-        );
-      })}
-    </div>
-  );
-};
-
-<>
-  <ButtonGroup
-    onClick={(value) => {
-      type test = Expect<Equal<typeof value, "add" | "delete">>;
-    }}
-    buttons={["add", "delete"]}
-  ></ButtonGroup>
-</>;
diff --git a/src/05-generics/45-generics-vs-discriminated-unions.problem.tsx b/src/05-generics/44-generics-vs-discriminated-unions.problem.tsx
similarity index 100%
rename from src/05-generics/45-generics-vs-discriminated-unions.problem.tsx
rename to src/05-generics/44-generics-vs-discriminated-unions.problem.tsx
diff --git a/src/05-generics/45-generics-vs-discriminated-unions.solution.tsx b/src/05-generics/44-generics-vs-discriminated-unions.solution.tsx
similarity index 100%
rename from src/05-generics/45-generics-vs-discriminated-unions.solution.tsx
rename to src/05-generics/44-generics-vs-discriminated-unions.solution.tsx
diff --git a/src/06-advanced-hooks/46-tuple-return-type.problem.ts b/src/06-advanced-hooks/45-tuple-return-type.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/46-tuple-return-type.problem.ts
rename to src/06-advanced-hooks/45-tuple-return-type.problem.ts
diff --git a/src/06-advanced-hooks/46-tuple-return-type.solution.1.ts b/src/06-advanced-hooks/45-tuple-return-type.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/46-tuple-return-type.solution.1.ts
rename to src/06-advanced-hooks/45-tuple-return-type.solution.1.ts
diff --git a/src/06-advanced-hooks/46-tuple-return-type.solution.2.ts b/src/06-advanced-hooks/45-tuple-return-type.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/46-tuple-return-type.solution.2.ts
rename to src/06-advanced-hooks/45-tuple-return-type.solution.2.ts
diff --git a/src/06-advanced-hooks/47-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/46-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/47-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/46-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/47-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/46-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/47-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/46-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx b/src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/06-advanced-hooks/50-use-state-overloads.problem.ts b/src/06-advanced-hooks/49-use-state-overloads.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/50-use-state-overloads.problem.ts
rename to src/06-advanced-hooks/49-use-state-overloads.problem.ts
diff --git a/src/06-advanced-hooks/50-use-state-overloads.solution.1.ts b/src/06-advanced-hooks/49-use-state-overloads.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/50-use-state-overloads.solution.1.ts
rename to src/06-advanced-hooks/49-use-state-overloads.solution.1.ts
diff --git a/src/06-advanced-hooks/50-use-state-overloads.solution.2.ts b/src/06-advanced-hooks/49-use-state-overloads.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/50-use-state-overloads.solution.2.ts
rename to src/06-advanced-hooks/49-use-state-overloads.solution.2.ts
diff --git a/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/50-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
rename to src/06-advanced-hooks/50-function-overloads-in-hooks.problem.ts
diff --git a/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts b/src/06-advanced-hooks/50-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts
rename to src/06-advanced-hooks/50-function-overloads-in-hooks.solution.1.ts
diff --git a/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts b/src/06-advanced-hooks/50-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts
rename to src/06-advanced-hooks/50-function-overloads-in-hooks.solution.2.ts
diff --git a/src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/51-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/51-understand-react-namespace-export.explainer.ts
diff --git a/src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/52-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/52-understanding-jsx-element.explainer.tsx
diff --git a/src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx b/src/07-types-deep-dive/53-strongly-typing-children.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx
rename to src/07-types-deep-dive/53-strongly-typing-children.explainer.tsx
diff --git a/src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx b/src/07-types-deep-dive/54-understanding-jsx-intrinsic-elements.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx
rename to src/07-types-deep-dive/54-understanding-jsx-intrinsic-elements.explainer.tsx
diff --git a/src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts b/src/07-types-deep-dive/55-appending-to-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts
rename to src/07-types-deep-dive/55-appending-to-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts b/src/07-types-deep-dive/55-appending-to-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts
rename to src/07-types-deep-dive/55-appending-to-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts b/src/07-types-deep-dive/56-declaration-merging-in-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts
rename to src/07-types-deep-dive/56-declaration-merging-in-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts b/src/07-types-deep-dive/56-declaration-merging-in-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts
rename to src/07-types-deep-dive/56-declaration-merging-in-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/58-add-new-global-element.problem.tsx b/src/07-types-deep-dive/57-add-new-global-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/58-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/57-add-new-global-element.problem.tsx
diff --git a/src/07-types-deep-dive/58-add-new-global-element.solution.tsx b/src/07-types-deep-dive/57-add-new-global-element.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/58-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/57-add-new-global-element.solution.tsx
diff --git a/src/07-types-deep-dive/59-html-attributes.explainer.tsx b/src/07-types-deep-dive/58-html-attributes.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-html-attributes.explainer.tsx
rename to src/07-types-deep-dive/58-html-attributes.explainer.tsx
diff --git a/src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/59-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/59-add-attribute-to-all-elements.problem.tsx
diff --git a/src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx b/src/07-types-deep-dive/59-add-attribute-to-all-elements.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx
rename to src/07-types-deep-dive/59-add-attribute-to-all-elements.solution.tsx
diff --git a/src/08-advanced-patterns/61-lazy-load-component.problem.tsx b/src/08-advanced-patterns/60-lazy-load-component.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/61-lazy-load-component.problem.tsx
rename to src/08-advanced-patterns/60-lazy-load-component.problem.tsx
diff --git a/src/08-advanced-patterns/61-lazy-load-component.solution.tsx b/src/08-advanced-patterns/60-lazy-load-component.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/61-lazy-load-component.solution.tsx
rename to src/08-advanced-patterns/60-lazy-load-component.solution.tsx
diff --git a/src/08-advanced-patterns/62-const-generics-in-generic-components.problem.tsx b/src/08-advanced-patterns/61-const-generics-in-generic-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-const-generics-in-generic-components.problem.tsx
rename to src/08-advanced-patterns/61-const-generics-in-generic-components.problem.tsx
diff --git a/src/08-advanced-patterns/63-required-context.problem.tsx b/src/08-advanced-patterns/62-required-context.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/63-required-context.problem.tsx
rename to src/08-advanced-patterns/62-required-context.problem.tsx
diff --git a/src/08-advanced-patterns/63-required-context.solution.1.tsx b/src/08-advanced-patterns/62-required-context.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/63-required-context.solution.1.tsx
rename to src/08-advanced-patterns/62-required-context.solution.1.tsx
diff --git a/src/08-advanced-patterns/63-required-context.solution.2.tsx b/src/08-advanced-patterns/62-required-context.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/63-required-context.solution.2.tsx
rename to src/08-advanced-patterns/62-required-context.solution.2.tsx
diff --git a/src/08-advanced-patterns/64-render-props.problem.tsx b/src/08-advanced-patterns/63-render-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/64-render-props.problem.tsx
rename to src/08-advanced-patterns/63-render-props.problem.tsx
diff --git a/src/08-advanced-patterns/64-render-props.solution.tsx b/src/08-advanced-patterns/63-render-props.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/64-render-props.solution.tsx
rename to src/08-advanced-patterns/63-render-props.solution.tsx
diff --git a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
rename to src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx b/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx
rename to src/08-advanced-patterns/64-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts b/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.3.ts
similarity index 100%
rename from src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
rename to src/08-advanced-patterns/64-forward-ref-with-generics.explainer.3.ts
diff --git a/src/08-advanced-patterns/66-hoc.problem.tsx b/src/08-advanced-patterns/65-hoc.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-hoc.problem.tsx
rename to src/08-advanced-patterns/65-hoc.problem.tsx
diff --git a/src/08-advanced-patterns/66-hoc.solution.tsx b/src/08-advanced-patterns/65-hoc.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-hoc.solution.tsx
rename to src/08-advanced-patterns/65-hoc.solution.tsx
diff --git a/src/08-advanced-patterns/67-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/66-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/66-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/67-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/66-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/66-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/67-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/66-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/66-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/08-advanced-patterns/68-as-prop.problem.tsx b/src/08-advanced-patterns/67-as-prop.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-as-prop.problem.tsx
rename to src/08-advanced-patterns/67-as-prop.problem.tsx
diff --git a/src/08-advanced-patterns/68-as-prop.solution.1.tsx b/src/08-advanced-patterns/67-as-prop.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/67-as-prop.solution.1.tsx
diff --git a/src/08-advanced-patterns/68-as-prop.solution.2.tsx b/src/08-advanced-patterns/67-as-prop.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/67-as-prop.solution.2.tsx
diff --git a/src/08-advanced-patterns/69-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/68-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/69-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/68-as-prop-with-custom-components.problem.tsx
diff --git a/src/08-advanced-patterns/69-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/68-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/69-as-prop-with-custom-components.solution.tsx
rename to src/08-advanced-patterns/68-as-prop-with-custom-components.solution.tsx
diff --git a/src/09-external-libraries/70-react-hook-form.explainer.tsx b/src/09-external-libraries/69-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/70-react-hook-form.explainer.tsx
rename to src/09-external-libraries/69-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/71-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/70-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/71-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/70-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/71-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/70-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/71-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/70-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/72-react-select.problem.tsx b/src/09-external-libraries/71-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/72-react-select.problem.tsx
rename to src/09-external-libraries/71-react-select.problem.tsx
diff --git a/src/09-external-libraries/72-react-select.solution.tsx b/src/09-external-libraries/71-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/72-react-select.solution.tsx
rename to src/09-external-libraries/71-react-select.solution.tsx
diff --git a/src/09-external-libraries/73-react-query.explainer.ts b/src/09-external-libraries/72-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/73-react-query.explainer.ts
rename to src/09-external-libraries/72-react-query.explainer.ts
diff --git a/src/09-external-libraries/74-react-query-wrapper.problem.ts b/src/09-external-libraries/73-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/74-react-query-wrapper.problem.ts
rename to src/09-external-libraries/73-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/74-react-query-wrapper.solution.ts b/src/09-external-libraries/73-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/74-react-query-wrapper.solution.ts
rename to src/09-external-libraries/73-react-query-wrapper.solution.ts

From 8923c654b5cb4b428123d65ad35dafee2e85e096 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 15:57:06 +0100
Subject: [PATCH 059/165] Fixed 43

---
 ...nference-flow-with-constraints.solution.ts | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/05-generics/43-inference-flow-with-constraints.solution.ts b/src/05-generics/43-inference-flow-with-constraints.solution.ts
index a4f7b56..da89c62 100644
--- a/src/05-generics/43-inference-flow-with-constraints.solution.ts
+++ b/src/05-generics/43-inference-flow-with-constraints.solution.ts
@@ -2,22 +2,22 @@ import { createUser } from "fake-external-lib";
 import { useState } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-type Mutation<TArgs extends any[], TResult> = (
+type Mutation<TArgs extends any[], TReturn> = (
   ...args: TArgs
-) => Promise<TResult>;
+) => Promise<TReturn>;
 
-interface UseMutationReturn<TArgs extends any[], TResult> {
-  mutate: Mutation<TArgs, TResult>;
+interface UseMutationReturn<TArgs extends any[], TReturn> {
+  mutate: Mutation<TArgs, TReturn>;
   isLoading: boolean;
 }
 
-interface UseMutationOptions<TArgs extends any[], TResult> {
-  mutation: Mutation<TArgs, TResult>;
+interface UseMutationOptions<TArgs extends any[], TReturn> {
+  mutation: Mutation<TArgs, TReturn>;
 }
 
-export const useMutation = <TArgs extends any[], TResult>(
-  opts: UseMutationOptions<TArgs, TResult>,
-): UseMutationReturn<TArgs, TResult> => {
+export const useMutation = <TArgs extends any[], TReturn>(
+  opts: UseMutationOptions<TArgs, TReturn>
+): UseMutationReturn<TArgs, TReturn> => {
   const [isLoading, setIsLoading] = useState(false);
 
   return {
@@ -55,7 +55,7 @@ mutation.mutate(
     throwOnError: true,
     // @ts-expect-error extra prop
     extra: "oh dear",
-  },
+  }
 );
 
 type test = [
@@ -67,12 +67,12 @@ type test = [
         user: { name: string; email: string },
         opts?: {
           throwOnError?: boolean;
-        },
+        }
       ) => Promise<{
         id: string;
         name: string;
         email: string;
       }>
     >
-  >,
+  >
 ];

From 263df0fecb0807ffb4d2be41d7ef34f5d57dbfa6 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Thu, 6 Jul 2023 16:07:54 +0100
Subject: [PATCH 060/165] Changed 44

---
 ...erics-vs-discriminated-unions.solution.tsx | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/05-generics/44-generics-vs-discriminated-unions.solution.tsx b/src/05-generics/44-generics-vs-discriminated-unions.solution.tsx
index 8778be8..3b10f60 100644
--- a/src/05-generics/44-generics-vs-discriminated-unions.solution.tsx
+++ b/src/05-generics/44-generics-vs-discriminated-unions.solution.tsx
@@ -5,19 +5,18 @@
  * are passed in for each variant.
  */
 
-export type ModalProps =
+export type ModalProps = {
+  isOpen: boolean;
+} & (
   | {
-      isOpen: boolean;
-    } & (
-      | {
-          variant: "with-button";
-          buttonLabel: string;
-          onButtonClick: () => void;
-        }
-      | {
-          variant: "without-button";
-        }
-    );
+      variant: "with-button";
+      buttonLabel: string;
+      onButtonClick: () => void;
+    }
+  | {
+      variant: "without-button";
+    }
+);
 
 export const Modal = (props: ModalProps) => {
   // ...

From 82914717746dc6e07792f4f34379e5ed8cf759ea Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 10 Jul 2023 11:31:00 +0100
Subject: [PATCH 061/165] Added as prop stuff

---
 .gitignore                                    |  3 +-
 package.json                                  | 16 +++++++--
 .../51-required-context.problem.tsx}          |  0
 .../51-required-context.solution.1.tsx}       |  0
 .../51-required-context.solution.2.tsx}       |  0
 ...stand-react-namespace-export.explainer.ts} |  0
 ...3-understanding-jsx-element.explainer.tsx} |  0
 ...54-strongly-typing-children.explainer.tsx} |  0
 ...ding-jsx-intrinsic-elements.explainer.tsx} |  0
 ...-appending-to-global-namespace.problem.ts} |  0
 ...appending-to-global-namespace.solution.ts} |  0
 ...on-merging-in-global-namespace.problem.ts} |  0
 ...n-merging-in-global-namespace.solution.ts} |  0
 ... => 58-add-new-global-element.problem.tsx} |  0
 ...=> 58-add-new-global-element.solution.tsx} |  0
 ...r.tsx => 59-html-attributes.explainer.tsx} |  0
 ...add-attribute-to-all-elements.problem.tsx} |  0
 ...dd-attribute-to-all-elements.solution.tsx} |  0
 ...tsx => 61-lazy-load-component.problem.tsx} |  0
 ...sx => 61-lazy-load-component.solution.tsx} |  0
 ...enerics-in-generic-components.problem.tsx} |  0
 ...-forward-ref-with-generics.explainer.1.tsx |  4 +--
 ...-forward-ref-as-local-function.problem.tsx | 36 +++++++++++++++++++
 ...forward-ref-as-local-function.solution.tsx | 31 ++++++++++++++++
 ...{65-hoc.problem.tsx => 66-hoc.problem.tsx} |  0
 ...5-hoc.solution.tsx => 66-hoc.solution.tsx} |  0
 ...of-components-with-same-props.problem.tsx} |  0
 ...components-with-same-props.solution.1.tsx} |  0
 ...components-with-same-props.solution.2.tsx} |  0
 ...s-prop-with-custom-components.solution.tsx | 16 ---------
 ...rop.problem.tsx => 68-as-prop.problem.tsx} |  0
 ...lution.1.tsx => 68-as-prop.solution.1.tsx} |  0
 ...lution.2.tsx => 68-as-prop.solution.2.tsx} |  0
 ...s-prop-with-custom-components.problem.tsx} |  0
 ...s-prop-with-custom-components.solution.tsx | 23 ++++++++++++
 .../70-as-prop-with-default.problem.tsx       | 36 +++++++++++++++++++
 .../70-as-prop-with-default.solution.tsx      | 35 ++++++++++++++++++
 ...r.tsx => 71-react-hook-form.explainer.tsx} |  0
 ...=> 72-react-hook-form-wrapper.problem.tsx} |  0
 ...> 72-react-hook-form-wrapper.solution.tsx} |  0
 ...roblem.tsx => 73-react-select.problem.tsx} |  0
 ...ution.tsx => 73-react-select.solution.tsx} |  0
 ...plainer.ts => 74-react-query.explainer.ts} |  0
 ...m.ts => 75-react-query-wrapper.problem.ts} |  0
 ....ts => 75-react-query-wrapper.solution.ts} |  0
 45 files changed, 179 insertions(+), 21 deletions(-)
 rename src/{08-advanced-patterns/62-required-context.problem.tsx => 06-advanced-hooks/51-required-context.problem.tsx} (100%)
 rename src/{08-advanced-patterns/62-required-context.solution.1.tsx => 06-advanced-hooks/51-required-context.solution.1.tsx} (100%)
 rename src/{08-advanced-patterns/62-required-context.solution.2.tsx => 06-advanced-hooks/51-required-context.solution.2.tsx} (100%)
 rename src/07-types-deep-dive/{51-understand-react-namespace-export.explainer.ts => 52-understand-react-namespace-export.explainer.ts} (100%)
 rename src/07-types-deep-dive/{52-understanding-jsx-element.explainer.tsx => 53-understanding-jsx-element.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{53-strongly-typing-children.explainer.tsx => 54-strongly-typing-children.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{54-understanding-jsx-intrinsic-elements.explainer.tsx => 55-understanding-jsx-intrinsic-elements.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{55-appending-to-global-namespace.problem.ts => 56-appending-to-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{55-appending-to-global-namespace.solution.ts => 56-appending-to-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{56-declaration-merging-in-global-namespace.problem.ts => 57-declaration-merging-in-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{56-declaration-merging-in-global-namespace.solution.ts => 57-declaration-merging-in-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{57-add-new-global-element.problem.tsx => 58-add-new-global-element.problem.tsx} (100%)
 rename src/07-types-deep-dive/{57-add-new-global-element.solution.tsx => 58-add-new-global-element.solution.tsx} (100%)
 rename src/07-types-deep-dive/{58-html-attributes.explainer.tsx => 59-html-attributes.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{59-add-attribute-to-all-elements.problem.tsx => 60-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{59-add-attribute-to-all-elements.solution.tsx => 60-add-attribute-to-all-elements.solution.tsx} (100%)
 rename src/08-advanced-patterns/{60-lazy-load-component.problem.tsx => 61-lazy-load-component.problem.tsx} (100%)
 rename src/08-advanced-patterns/{60-lazy-load-component.solution.tsx => 61-lazy-load-component.solution.tsx} (100%)
 rename src/08-advanced-patterns/{61-const-generics-in-generic-components.problem.tsx => 62-const-generics-in-generic-components.problem.tsx} (100%)
 create mode 100644 src/08-advanced-patterns/65-forward-ref-as-local-function.problem.tsx
 create mode 100644 src/08-advanced-patterns/65-forward-ref-as-local-function.solution.tsx
 rename src/08-advanced-patterns/{65-hoc.problem.tsx => 66-hoc.problem.tsx} (100%)
 rename src/08-advanced-patterns/{65-hoc.solution.tsx => 66-hoc.solution.tsx} (100%)
 rename src/08-advanced-patterns/{66-record-of-components-with-same-props.problem.tsx => 67-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{66-record-of-components-with-same-props.solution.1.tsx => 67-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{66-record-of-components-with-same-props.solution.2.tsx => 67-record-of-components-with-same-props.solution.2.tsx} (100%)
 delete mode 100644 src/08-advanced-patterns/68-as-prop-with-custom-components.solution.tsx
 rename src/08-advanced-patterns/{67-as-prop.problem.tsx => 68-as-prop.problem.tsx} (100%)
 rename src/08-advanced-patterns/{67-as-prop.solution.1.tsx => 68-as-prop.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{67-as-prop.solution.2.tsx => 68-as-prop.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{68-as-prop-with-custom-components.problem.tsx => 69-as-prop-with-custom-components.problem.tsx} (100%)
 create mode 100644 src/08-advanced-patterns/69-as-prop-with-custom-components.solution.tsx
 create mode 100644 src/08-advanced-patterns/70-as-prop-with-default.problem.tsx
 create mode 100644 src/08-advanced-patterns/70-as-prop-with-default.solution.tsx
 rename src/09-external-libraries/{69-react-hook-form.explainer.tsx => 71-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{70-react-hook-form-wrapper.problem.tsx => 72-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{70-react-hook-form-wrapper.solution.tsx => 72-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{71-react-select.problem.tsx => 73-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{71-react-select.solution.tsx => 73-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{72-react-query.explainer.ts => 74-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{73-react-query-wrapper.problem.ts => 75-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{73-react-query-wrapper.solution.ts => 75-react-query-wrapper.solution.ts} (100%)

diff --git a/.gitignore b/.gitignore
index 55371e5..59ecb4b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-.vscode
\ No newline at end of file
+.vscode
+tsconfig.temp.json
\ No newline at end of file
diff --git a/package.json b/package.json
index 11a58bd..467b6b2 100644
--- a/package.json
+++ b/package.json
@@ -144,7 +144,19 @@
     "e-65": "tt-cli run 65",
     "s-65": "tt-cli run 65 --solution",
     "e-66": "tt-cli run 66",
-    "s-66": "tt-cli run 66 --solution"
+    "s-66": "tt-cli run 66 --solution",
+    "e-43": "tt-cli run 43",
+    "s-43": "tt-cli run 43 --solution",
+    "e-67": "tt-cli run 67",
+    "s-67": "tt-cli run 67 --solution",
+    "e-68": "tt-cli run 68",
+    "s-68": "tt-cli run 68 --solution",
+    "e-70": "tt-cli run 70",
+    "s-70": "tt-cli run 70 --solution",
+    "e-71": "tt-cli run 71",
+    "s-71": "tt-cli run 71 --solution",
+    "e-73": "tt-cli run 73",
+    "s-73": "tt-cli run 73 --solution"
   },
   "dependencies": {
     "@tanstack/react-query": "^4.29.12",
@@ -158,4 +170,4 @@
     "react-select": "^5.7.3",
     "zod": "^3.21.4"
   }
-}
+}
\ No newline at end of file
diff --git a/src/08-advanced-patterns/62-required-context.problem.tsx b/src/06-advanced-hooks/51-required-context.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-required-context.problem.tsx
rename to src/06-advanced-hooks/51-required-context.problem.tsx
diff --git a/src/08-advanced-patterns/62-required-context.solution.1.tsx b/src/06-advanced-hooks/51-required-context.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-required-context.solution.1.tsx
rename to src/06-advanced-hooks/51-required-context.solution.1.tsx
diff --git a/src/08-advanced-patterns/62-required-context.solution.2.tsx b/src/06-advanced-hooks/51-required-context.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-required-context.solution.2.tsx
rename to src/06-advanced-hooks/51-required-context.solution.2.tsx
diff --git a/src/07-types-deep-dive/51-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/51-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts
diff --git a/src/07-types-deep-dive/52-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/52-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx
diff --git a/src/07-types-deep-dive/53-strongly-typing-children.explainer.tsx b/src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/53-strongly-typing-children.explainer.tsx
rename to src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx
diff --git a/src/07-types-deep-dive/54-understanding-jsx-intrinsic-elements.explainer.tsx b/src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/54-understanding-jsx-intrinsic-elements.explainer.tsx
rename to src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx
diff --git a/src/07-types-deep-dive/55-appending-to-global-namespace.problem.ts b/src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/55-appending-to-global-namespace.problem.ts
rename to src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/55-appending-to-global-namespace.solution.ts b/src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/55-appending-to-global-namespace.solution.ts
rename to src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/56-declaration-merging-in-global-namespace.problem.ts b/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/56-declaration-merging-in-global-namespace.problem.ts
rename to src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/56-declaration-merging-in-global-namespace.solution.ts b/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/56-declaration-merging-in-global-namespace.solution.ts
rename to src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/57-add-new-global-element.problem.tsx b/src/07-types-deep-dive/58-add-new-global-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/57-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/58-add-new-global-element.problem.tsx
diff --git a/src/07-types-deep-dive/57-add-new-global-element.solution.tsx b/src/07-types-deep-dive/58-add-new-global-element.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/57-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/58-add-new-global-element.solution.tsx
diff --git a/src/07-types-deep-dive/58-html-attributes.explainer.tsx b/src/07-types-deep-dive/59-html-attributes.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/58-html-attributes.explainer.tsx
rename to src/07-types-deep-dive/59-html-attributes.explainer.tsx
diff --git a/src/07-types-deep-dive/59-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx
diff --git a/src/07-types-deep-dive/59-add-attribute-to-all-elements.solution.tsx b/src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-add-attribute-to-all-elements.solution.tsx
rename to src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx
diff --git a/src/08-advanced-patterns/60-lazy-load-component.problem.tsx b/src/08-advanced-patterns/61-lazy-load-component.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/60-lazy-load-component.problem.tsx
rename to src/08-advanced-patterns/61-lazy-load-component.problem.tsx
diff --git a/src/08-advanced-patterns/60-lazy-load-component.solution.tsx b/src/08-advanced-patterns/61-lazy-load-component.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/60-lazy-load-component.solution.tsx
rename to src/08-advanced-patterns/61-lazy-load-component.solution.tsx
diff --git a/src/08-advanced-patterns/61-const-generics-in-generic-components.problem.tsx b/src/08-advanced-patterns/62-const-generics-in-generic-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/61-const-generics-in-generic-components.problem.tsx
rename to src/08-advanced-patterns/62-const-generics-in-generic-components.problem.tsx
diff --git a/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx
index 12829e0..8f96727 100644
--- a/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx
+++ b/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx
@@ -17,8 +17,8 @@ type Props<T> = {
 
 // declare module "react" {
 //   function forwardRef<T, P = {}>(
-//     render: (props: P, ref: React.Ref<T>) => React.ReactNode | null,
-//   ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+//     render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+//   ): (props: P & React.RefAttributes<T>) => React.ReactNode;
 // }
 
 /**
diff --git a/src/08-advanced-patterns/65-forward-ref-as-local-function.problem.tsx b/src/08-advanced-patterns/65-forward-ref-as-local-function.problem.tsx
new file mode 100644
index 0000000..e78bbaf
--- /dev/null
+++ b/src/08-advanced-patterns/65-forward-ref-as-local-function.problem.tsx
@@ -0,0 +1,36 @@
+import { ForwardedRef, forwardRef } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * Using the forward-ref-with-generics explanation as a guide,
+ * give fixedForwardRef a type signature that allows it to
+ * work with the example below.
+ */
+function fixedForwardRef(
+  render: (props: any, ref: any) => any,
+): (props: any) => any {
+  return forwardRef(render) as any;
+}
+
+type Props<T> = {
+  data: T[];
+  renderRow: (item: T) => React.ReactNode;
+};
+
+export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
+  return null;
+};
+
+const ForwardReffedTable = fixedForwardRef(Table);
+
+const Parent = () => {
+  return (
+    <ForwardReffedTable
+      data={["123"]}
+      renderRow={(row) => {
+        type test = Expect<Equal<typeof row, string>>;
+        return <div>123</div>;
+      }}
+    ></ForwardReffedTable>
+  );
+};
diff --git a/src/08-advanced-patterns/65-forward-ref-as-local-function.solution.tsx b/src/08-advanced-patterns/65-forward-ref-as-local-function.solution.tsx
new file mode 100644
index 0000000..9c4652c
--- /dev/null
+++ b/src/08-advanced-patterns/65-forward-ref-as-local-function.solution.tsx
@@ -0,0 +1,31 @@
+import { ForwardedRef, forwardRef } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+function fixedForwardRef<T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+): (props: P & React.RefAttributes<T>) => React.ReactNode {
+  return forwardRef(render) as any;
+}
+
+type Props<T> = {
+  data: T[];
+  renderRow: (item: T) => React.ReactNode;
+};
+
+export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
+  return null;
+};
+
+const ForwardReffedTable = fixedForwardRef(Table);
+
+const Parent = () => {
+  return (
+    <ForwardReffedTable
+      data={["123"]}
+      renderRow={(row) => {
+        type test = Expect<Equal<typeof row, string>>;
+        return <div>123</div>;
+      }}
+    ></ForwardReffedTable>
+  );
+};
diff --git a/src/08-advanced-patterns/65-hoc.problem.tsx b/src/08-advanced-patterns/66-hoc.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-hoc.problem.tsx
rename to src/08-advanced-patterns/66-hoc.problem.tsx
diff --git a/src/08-advanced-patterns/65-hoc.solution.tsx b/src/08-advanced-patterns/66-hoc.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-hoc.solution.tsx
rename to src/08-advanced-patterns/66-hoc.solution.tsx
diff --git a/src/08-advanced-patterns/66-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/67-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/67-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/66-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/67-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/67-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/66-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/67-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/67-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/08-advanced-patterns/68-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/68-as-prop-with-custom-components.solution.tsx
deleted file mode 100644
index 683f82c..0000000
--- a/src/08-advanced-patterns/68-as-prop-with-custom-components.solution.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { ComponentProps, ComponentType } from "react";
-
-export const Wrapper = <T extends ComponentType<any>>(
-  props: {
-    as: T;
-  } & ComponentProps<T>,
-) => {
-  const Comp = props.as;
-  return <Comp {...props}></Comp>;
-};
-
-const Link = (props: { href: string; children?: React.ReactNode }) => {
-  return <a href={props.href}>{props.children}</a>;
-};
-
-<Wrapper as={Link} href="awdawd"></Wrapper>;
diff --git a/src/08-advanced-patterns/67-as-prop.problem.tsx b/src/08-advanced-patterns/68-as-prop.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-as-prop.problem.tsx
rename to src/08-advanced-patterns/68-as-prop.problem.tsx
diff --git a/src/08-advanced-patterns/67-as-prop.solution.1.tsx b/src/08-advanced-patterns/68-as-prop.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/68-as-prop.solution.1.tsx
diff --git a/src/08-advanced-patterns/67-as-prop.solution.2.tsx b/src/08-advanced-patterns/68-as-prop.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/68-as-prop.solution.2.tsx
diff --git a/src/08-advanced-patterns/68-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/69-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/69-as-prop-with-custom-components.problem.tsx
diff --git a/src/08-advanced-patterns/69-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/69-as-prop-with-custom-components.solution.tsx
new file mode 100644
index 0000000..6af9b70
--- /dev/null
+++ b/src/08-advanced-patterns/69-as-prop-with-custom-components.solution.tsx
@@ -0,0 +1,23 @@
+import React, { ComponentPropsWithoutRef, ElementType } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const Wrapper = <T extends ElementType<any>>(
+  props: {
+    as: T;
+  } & ComponentPropsWithoutRef<T>,
+) => {
+  const Comp = props.as;
+  return <Comp {...(props as any)}></Comp>;
+};
+
+const Link = (props: { href: string; children?: React.ReactNode }) => {
+  return <a href={props.href}>{props.children}</a>;
+};
+
+<Wrapper as={Link} href="awdawd" />;
+<Wrapper
+  as="button"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
+  }}
+/>;
diff --git a/src/08-advanced-patterns/70-as-prop-with-default.problem.tsx b/src/08-advanced-patterns/70-as-prop-with-default.problem.tsx
new file mode 100644
index 0000000..e016fee
--- /dev/null
+++ b/src/08-advanced-patterns/70-as-prop-with-default.problem.tsx
@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const Link = <T extends ElementType<any>>(
+  props: {
+    as: T;
+  } & ComponentPropsWithoutRef<T>,
+) => {
+  const { as: Comp, ...rest } = props;
+  return <Comp {...rest}></Comp>;
+};
+
+// Should be a 'a' tag by default!
+<Link href="/"></Link>;
+
+const Custom = (props: { thisIsRequired: boolean }) => {
+  return null;
+};
+
+<Link as={Custom} thisIsRequired />;
+
+// @ts-expect-error Property 'thisIsRequired' is missing
+<Link as={Custom} />;
+
+<Link
+  as="button"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
+  }}
+></Link>;
+
+<Link
+  as="div"
+  // @ts-expect-error: Property 'href' does not exist
+  href="awdawd"
+></Link>;
diff --git a/src/08-advanced-patterns/70-as-prop-with-default.solution.tsx b/src/08-advanced-patterns/70-as-prop-with-default.solution.tsx
new file mode 100644
index 0000000..a2fbc60
--- /dev/null
+++ b/src/08-advanced-patterns/70-as-prop-with-default.solution.tsx
@@ -0,0 +1,35 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const Link = <T extends ElementType<any> = "a">(
+  props: {
+    as?: T;
+  } & ComponentPropsWithoutRef<T>,
+) => {
+  const { as: Comp = "a", ...rest } = props;
+  return <Comp {...rest}></Comp>;
+};
+
+<Link href="/"></Link>;
+
+const Custom = (props: { thisIsRequired: boolean }) => {
+  return null;
+};
+
+<Link as={Custom} thisIsRequired />;
+
+// @ts-expect-error Property 'thisIsRequired' is missing
+<Link as={Custom} />;
+
+<Link
+  as="button"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
+  }}
+></Link>;
+
+<Link
+  as="div"
+  // @ts-expect-error: Property 'href' does not exist
+  href="awdawd"
+></Link>;
diff --git a/src/09-external-libraries/69-react-hook-form.explainer.tsx b/src/09-external-libraries/71-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/69-react-hook-form.explainer.tsx
rename to src/09-external-libraries/71-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/70-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/72-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/70-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/72-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/70-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/72-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/70-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/72-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/71-react-select.problem.tsx b/src/09-external-libraries/73-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/71-react-select.problem.tsx
rename to src/09-external-libraries/73-react-select.problem.tsx
diff --git a/src/09-external-libraries/71-react-select.solution.tsx b/src/09-external-libraries/73-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/71-react-select.solution.tsx
rename to src/09-external-libraries/73-react-select.solution.tsx
diff --git a/src/09-external-libraries/72-react-query.explainer.ts b/src/09-external-libraries/74-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/72-react-query.explainer.ts
rename to src/09-external-libraries/74-react-query.explainer.ts
diff --git a/src/09-external-libraries/73-react-query-wrapper.problem.ts b/src/09-external-libraries/75-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/73-react-query-wrapper.problem.ts
rename to src/09-external-libraries/75-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/73-react-query-wrapper.solution.ts b/src/09-external-libraries/75-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/73-react-query-wrapper.solution.ts
rename to src/09-external-libraries/75-react-query-wrapper.solution.ts

From 85ec36fe09f171f187225460343c7359e61050c9 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 10 Jul 2023 12:03:12 +0100
Subject: [PATCH 062/165] Added currying hooks

---
 .../51-currying-hooks.problem.ts              | 39 +++++++++++++++++++
 .../51-currying-hooks.solution.ts             | 33 ++++++++++++++++
 ...em.tsx => 52-required-context.problem.tsx} |  0
 ...tsx => 52-required-context.solution.1.tsx} |  0
 ...tsx => 52-required-context.solution.2.tsx} |  0
 ...stand-react-namespace-export.explainer.ts} |  0
 ...4-understanding-jsx-element.explainer.tsx} |  0
 ...55-strongly-typing-children.explainer.tsx} |  0
 ...ding-jsx-intrinsic-elements.explainer.tsx} |  0
 ...-appending-to-global-namespace.problem.ts} |  0
 ...appending-to-global-namespace.solution.ts} |  0
 ...on-merging-in-global-namespace.problem.ts} |  0
 ...n-merging-in-global-namespace.solution.ts} |  0
 ... => 59-add-new-global-element.problem.tsx} |  0
 ...=> 59-add-new-global-element.solution.tsx} |  0
 ...r.tsx => 60-html-attributes.explainer.tsx} |  0
 ...add-attribute-to-all-elements.problem.tsx} |  0
 ...dd-attribute-to-all-elements.solution.tsx} |  0
 ...tsx => 62-lazy-load-component.problem.tsx} |  0
 ...sx => 62-lazy-load-component.solution.tsx} |  0
 ...enerics-in-generic-components.problem.tsx} |  0
 ...roblem.tsx => 64-render-props.problem.tsx} |  0
 ...ution.tsx => 64-render-props.solution.tsx} |  0
 ...forward-ref-with-generics.explainer.1.tsx} |  0
 ...forward-ref-with-generics.explainer.2.tsx} |  0
 ...-forward-ref-with-generics.explainer.3.ts} |  0
 ...forward-ref-as-local-function.problem.tsx} |  0
 ...orward-ref-as-local-function.solution.tsx} |  0
 ...{66-hoc.problem.tsx => 67-hoc.problem.tsx} |  0
 ...6-hoc.solution.tsx => 67-hoc.solution.tsx} |  0
 ...of-components-with-same-props.problem.tsx} |  0
 ...components-with-same-props.solution.1.tsx} |  0
 ...components-with-same-props.solution.2.tsx} |  0
 ...rop.problem.tsx => 69-as-prop.problem.tsx} |  0
 ...lution.1.tsx => 69-as-prop.solution.1.tsx} |  0
 ...lution.2.tsx => 69-as-prop.solution.2.tsx} |  0
 ...s-prop-with-custom-components.problem.tsx} |  0
 ...-prop-with-custom-components.solution.tsx} |  0
 ...sx => 71-as-prop-with-default.problem.tsx} |  0
 ...x => 71-as-prop-with-default.solution.tsx} |  0
 ...r.tsx => 72-react-hook-form.explainer.tsx} |  0
 ...=> 73-react-hook-form-wrapper.problem.tsx} |  0
 ...> 73-react-hook-form-wrapper.solution.tsx} |  0
 ...roblem.tsx => 74-react-select.problem.tsx} |  0
 ...ution.tsx => 74-react-select.solution.tsx} |  0
 ...plainer.ts => 75-react-query.explainer.ts} |  0
 ...m.ts => 76-react-query-wrapper.problem.ts} |  0
 ....ts => 76-react-query-wrapper.solution.ts} |  0
 48 files changed, 72 insertions(+)
 create mode 100644 src/06-advanced-hooks/51-currying-hooks.problem.ts
 create mode 100644 src/06-advanced-hooks/51-currying-hooks.solution.ts
 rename src/06-advanced-hooks/{51-required-context.problem.tsx => 52-required-context.problem.tsx} (100%)
 rename src/06-advanced-hooks/{51-required-context.solution.1.tsx => 52-required-context.solution.1.tsx} (100%)
 rename src/06-advanced-hooks/{51-required-context.solution.2.tsx => 52-required-context.solution.2.tsx} (100%)
 rename src/07-types-deep-dive/{52-understand-react-namespace-export.explainer.ts => 53-understand-react-namespace-export.explainer.ts} (100%)
 rename src/07-types-deep-dive/{53-understanding-jsx-element.explainer.tsx => 54-understanding-jsx-element.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{54-strongly-typing-children.explainer.tsx => 55-strongly-typing-children.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{55-understanding-jsx-intrinsic-elements.explainer.tsx => 56-understanding-jsx-intrinsic-elements.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{56-appending-to-global-namespace.problem.ts => 57-appending-to-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{56-appending-to-global-namespace.solution.ts => 57-appending-to-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{57-declaration-merging-in-global-namespace.problem.ts => 58-declaration-merging-in-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{57-declaration-merging-in-global-namespace.solution.ts => 58-declaration-merging-in-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{58-add-new-global-element.problem.tsx => 59-add-new-global-element.problem.tsx} (100%)
 rename src/07-types-deep-dive/{58-add-new-global-element.solution.tsx => 59-add-new-global-element.solution.tsx} (100%)
 rename src/07-types-deep-dive/{59-html-attributes.explainer.tsx => 60-html-attributes.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{60-add-attribute-to-all-elements.problem.tsx => 61-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{60-add-attribute-to-all-elements.solution.tsx => 61-add-attribute-to-all-elements.solution.tsx} (100%)
 rename src/08-advanced-patterns/{61-lazy-load-component.problem.tsx => 62-lazy-load-component.problem.tsx} (100%)
 rename src/08-advanced-patterns/{61-lazy-load-component.solution.tsx => 62-lazy-load-component.solution.tsx} (100%)
 rename src/08-advanced-patterns/{62-const-generics-in-generic-components.problem.tsx => 63-const-generics-in-generic-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{63-render-props.problem.tsx => 64-render-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{63-render-props.solution.tsx => 64-render-props.solution.tsx} (100%)
 rename src/08-advanced-patterns/{64-forward-ref-with-generics.explainer.1.tsx => 65-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/08-advanced-patterns/{64-forward-ref-with-generics.explainer.2.tsx => 65-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/08-advanced-patterns/{64-forward-ref-with-generics.explainer.3.ts => 65-forward-ref-with-generics.explainer.3.ts} (100%)
 rename src/08-advanced-patterns/{65-forward-ref-as-local-function.problem.tsx => 66-forward-ref-as-local-function.problem.tsx} (100%)
 rename src/08-advanced-patterns/{65-forward-ref-as-local-function.solution.tsx => 66-forward-ref-as-local-function.solution.tsx} (100%)
 rename src/08-advanced-patterns/{66-hoc.problem.tsx => 67-hoc.problem.tsx} (100%)
 rename src/08-advanced-patterns/{66-hoc.solution.tsx => 67-hoc.solution.tsx} (100%)
 rename src/08-advanced-patterns/{67-record-of-components-with-same-props.problem.tsx => 68-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{67-record-of-components-with-same-props.solution.1.tsx => 68-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{67-record-of-components-with-same-props.solution.2.tsx => 68-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{68-as-prop.problem.tsx => 69-as-prop.problem.tsx} (100%)
 rename src/08-advanced-patterns/{68-as-prop.solution.1.tsx => 69-as-prop.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{68-as-prop.solution.2.tsx => 69-as-prop.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{69-as-prop-with-custom-components.problem.tsx => 70-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{69-as-prop-with-custom-components.solution.tsx => 70-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/08-advanced-patterns/{70-as-prop-with-default.problem.tsx => 71-as-prop-with-default.problem.tsx} (100%)
 rename src/08-advanced-patterns/{70-as-prop-with-default.solution.tsx => 71-as-prop-with-default.solution.tsx} (100%)
 rename src/09-external-libraries/{71-react-hook-form.explainer.tsx => 72-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{72-react-hook-form-wrapper.problem.tsx => 73-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{72-react-hook-form-wrapper.solution.tsx => 73-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{73-react-select.problem.tsx => 74-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{73-react-select.solution.tsx => 74-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{74-react-query.explainer.ts => 75-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{75-react-query-wrapper.problem.ts => 76-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{75-react-query-wrapper.solution.ts => 76-react-query-wrapper.solution.ts} (100%)

diff --git a/src/06-advanced-hooks/51-currying-hooks.problem.ts b/src/06-advanced-hooks/51-currying-hooks.problem.ts
new file mode 100644
index 0000000..ccce13c
--- /dev/null
+++ b/src/06-advanced-hooks/51-currying-hooks.problem.ts
@@ -0,0 +1,39 @@
+import { DependencyList, useMemo, useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const useCustomState = <TValue>(initial: TValue) => {
+  const [value, set] = useState<TValue>(initial);
+
+  return {
+    value,
+    set,
+    /**
+     * Here, we're returning a hook from our initial hook!
+     * This is a great way to compose behaviour.
+     *
+     * BUT - useComputed takes in a function which can return
+     * any type. We want to make sure that the type of the
+     * thing returned is inferred properly.
+     */
+    useComputed: (factory: (value: any) => any, deps?: DependencyList) => {
+      return useMemo(() => {
+        return factory(value);
+      }, [value, ...(deps || [])]);
+    },
+  };
+};
+
+const Component = () => {
+  const arrayOfNums = useCustomState([1, 2, 3, 4, 5, 6, 7, 8]);
+
+  /**
+   * Currently, this is typed as any. How do we type it
+   * based on the return type of the function passed to
+   * useComputed?
+   */
+  const reversedAsString = arrayOfNums.useComputed((nums) =>
+    Array.from(nums).reverse().map(String),
+  );
+
+  type test = Expect<Equal<typeof reversedAsString, string[]>>;
+};
diff --git a/src/06-advanced-hooks/51-currying-hooks.solution.ts b/src/06-advanced-hooks/51-currying-hooks.solution.ts
new file mode 100644
index 0000000..95bc7c3
--- /dev/null
+++ b/src/06-advanced-hooks/51-currying-hooks.solution.ts
@@ -0,0 +1,33 @@
+import { DependencyList, useMemo, useState } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const useCustomState = <TValue>(initial: TValue) => {
+  const [value, set] = useState<TValue>(initial);
+
+  return {
+    value,
+    set,
+    /**
+     * We can use a generic _inline_ here to ensure
+     * this all still works.
+     */
+    useComputed: <TComputed>(
+      factory: (value: TValue) => TComputed,
+      deps?: DependencyList,
+    ) => {
+      return useMemo(() => {
+        return factory(value);
+      }, [value, ...(deps || [])]);
+    },
+  };
+};
+
+const Component = () => {
+  const arrayOfNums = useCustomState([1, 2, 3, 4, 5, 6, 7, 8]);
+
+  const reversedAsString = arrayOfNums.useComputed((nums) =>
+    Array.from(nums).reverse().map(String),
+  );
+
+  type test = Expect<Equal<typeof reversedAsString, string[]>>;
+};
diff --git a/src/06-advanced-hooks/51-required-context.problem.tsx b/src/06-advanced-hooks/52-required-context.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/51-required-context.problem.tsx
rename to src/06-advanced-hooks/52-required-context.problem.tsx
diff --git a/src/06-advanced-hooks/51-required-context.solution.1.tsx b/src/06-advanced-hooks/52-required-context.solution.1.tsx
similarity index 100%
rename from src/06-advanced-hooks/51-required-context.solution.1.tsx
rename to src/06-advanced-hooks/52-required-context.solution.1.tsx
diff --git a/src/06-advanced-hooks/51-required-context.solution.2.tsx b/src/06-advanced-hooks/52-required-context.solution.2.tsx
similarity index 100%
rename from src/06-advanced-hooks/51-required-context.solution.2.tsx
rename to src/06-advanced-hooks/52-required-context.solution.2.tsx
diff --git a/src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
similarity index 100%
rename from src/07-types-deep-dive/52-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
diff --git a/src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/53-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx
diff --git a/src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx b/src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/54-strongly-typing-children.explainer.tsx
rename to src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx
diff --git a/src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx b/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/55-understanding-jsx-intrinsic-elements.explainer.tsx
rename to src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx
diff --git a/src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts b/src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/56-appending-to-global-namespace.problem.ts
rename to src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts b/src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/56-appending-to-global-namespace.solution.ts
rename to src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts b/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/57-declaration-merging-in-global-namespace.problem.ts
rename to src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts b/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/57-declaration-merging-in-global-namespace.solution.ts
rename to src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/58-add-new-global-element.problem.tsx b/src/07-types-deep-dive/59-add-new-global-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/58-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/59-add-new-global-element.problem.tsx
diff --git a/src/07-types-deep-dive/58-add-new-global-element.solution.tsx b/src/07-types-deep-dive/59-add-new-global-element.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/58-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/59-add-new-global-element.solution.tsx
diff --git a/src/07-types-deep-dive/59-html-attributes.explainer.tsx b/src/07-types-deep-dive/60-html-attributes.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-html-attributes.explainer.tsx
rename to src/07-types-deep-dive/60-html-attributes.explainer.tsx
diff --git a/src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/60-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx
diff --git a/src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx b/src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/60-add-attribute-to-all-elements.solution.tsx
rename to src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx
diff --git a/src/08-advanced-patterns/61-lazy-load-component.problem.tsx b/src/08-advanced-patterns/62-lazy-load-component.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/61-lazy-load-component.problem.tsx
rename to src/08-advanced-patterns/62-lazy-load-component.problem.tsx
diff --git a/src/08-advanced-patterns/61-lazy-load-component.solution.tsx b/src/08-advanced-patterns/62-lazy-load-component.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/61-lazy-load-component.solution.tsx
rename to src/08-advanced-patterns/62-lazy-load-component.solution.tsx
diff --git a/src/08-advanced-patterns/62-const-generics-in-generic-components.problem.tsx b/src/08-advanced-patterns/63-const-generics-in-generic-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-const-generics-in-generic-components.problem.tsx
rename to src/08-advanced-patterns/63-const-generics-in-generic-components.problem.tsx
diff --git a/src/08-advanced-patterns/63-render-props.problem.tsx b/src/08-advanced-patterns/64-render-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/63-render-props.problem.tsx
rename to src/08-advanced-patterns/64-render-props.problem.tsx
diff --git a/src/08-advanced-patterns/63-render-props.solution.tsx b/src/08-advanced-patterns/64-render-props.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/63-render-props.solution.tsx
rename to src/08-advanced-patterns/64-render-props.solution.tsx
diff --git a/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/64-forward-ref-with-generics.explainer.1.tsx
rename to src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.2.tsx b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/64-forward-ref-with-generics.explainer.2.tsx
rename to src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/08-advanced-patterns/64-forward-ref-with-generics.explainer.3.ts b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
similarity index 100%
rename from src/08-advanced-patterns/64-forward-ref-with-generics.explainer.3.ts
rename to src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
diff --git a/src/08-advanced-patterns/65-forward-ref-as-local-function.problem.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-forward-ref-as-local-function.problem.tsx
rename to src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx
diff --git a/src/08-advanced-patterns/65-forward-ref-as-local-function.solution.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-forward-ref-as-local-function.solution.tsx
rename to src/08-advanced-patterns/66-forward-ref-as-local-function.solution.tsx
diff --git a/src/08-advanced-patterns/66-hoc.problem.tsx b/src/08-advanced-patterns/67-hoc.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-hoc.problem.tsx
rename to src/08-advanced-patterns/67-hoc.problem.tsx
diff --git a/src/08-advanced-patterns/66-hoc.solution.tsx b/src/08-advanced-patterns/67-hoc.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-hoc.solution.tsx
rename to src/08-advanced-patterns/67-hoc.solution.tsx
diff --git a/src/08-advanced-patterns/67-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/68-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/68-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/67-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/68-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/68-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/67-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/68-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/68-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/08-advanced-patterns/68-as-prop.problem.tsx b/src/08-advanced-patterns/69-as-prop.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-as-prop.problem.tsx
rename to src/08-advanced-patterns/69-as-prop.problem.tsx
diff --git a/src/08-advanced-patterns/68-as-prop.solution.1.tsx b/src/08-advanced-patterns/69-as-prop.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/69-as-prop.solution.1.tsx
diff --git a/src/08-advanced-patterns/68-as-prop.solution.2.tsx b/src/08-advanced-patterns/69-as-prop.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/69-as-prop.solution.2.tsx
diff --git a/src/08-advanced-patterns/69-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/69-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
diff --git a/src/08-advanced-patterns/69-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/69-as-prop-with-custom-components.solution.tsx
rename to src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
diff --git a/src/08-advanced-patterns/70-as-prop-with-default.problem.tsx b/src/08-advanced-patterns/71-as-prop-with-default.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/70-as-prop-with-default.problem.tsx
rename to src/08-advanced-patterns/71-as-prop-with-default.problem.tsx
diff --git a/src/08-advanced-patterns/70-as-prop-with-default.solution.tsx b/src/08-advanced-patterns/71-as-prop-with-default.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/70-as-prop-with-default.solution.tsx
rename to src/08-advanced-patterns/71-as-prop-with-default.solution.tsx
diff --git a/src/09-external-libraries/71-react-hook-form.explainer.tsx b/src/09-external-libraries/72-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/71-react-hook-form.explainer.tsx
rename to src/09-external-libraries/72-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/72-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/73-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/72-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/73-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/72-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/73-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/72-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/73-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/73-react-select.problem.tsx b/src/09-external-libraries/74-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/73-react-select.problem.tsx
rename to src/09-external-libraries/74-react-select.problem.tsx
diff --git a/src/09-external-libraries/73-react-select.solution.tsx b/src/09-external-libraries/74-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/73-react-select.solution.tsx
rename to src/09-external-libraries/74-react-select.solution.tsx
diff --git a/src/09-external-libraries/74-react-query.explainer.ts b/src/09-external-libraries/75-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/74-react-query.explainer.ts
rename to src/09-external-libraries/75-react-query.explainer.ts
diff --git a/src/09-external-libraries/75-react-query-wrapper.problem.ts b/src/09-external-libraries/76-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/75-react-query-wrapper.problem.ts
rename to src/09-external-libraries/76-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/75-react-query-wrapper.solution.ts b/src/09-external-libraries/76-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/75-react-query-wrapper.solution.ts
rename to src/09-external-libraries/76-react-query-wrapper.solution.ts

From 3208fb90cd84c7d52ad4877d8e314e48ad39ef63 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 10 Jul 2023 12:26:34 +0100
Subject: [PATCH 063/165] Changed 47 example

---
 .../47-discriminated-unions-in-usestate.problem.tsx | 13 +++++++++++++
 ...47-discriminated-unions-in-usestate.solution.tsx | 13 +++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx
index 1526d53..184ff7e 100644
--- a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx
+++ b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx
@@ -30,15 +30,28 @@ export const useLoadAsyncVideo = (src: string) => {
   useEffect(() => {
     setState({ status: "loading" });
 
+    let cancelled = false;
+
     fetchVideo(src)
       .then((blob) => {
+        if (cancelled) {
+          return;
+        }
+
         appendVideoToDomAndPlay(blob);
 
         setState({ status: "loaded" });
       })
       .catch((error) => {
+        if (cancelled) {
+          return;
+        }
         setState({ status: "error", error });
       });
+
+    return () => {
+      cancelled = true;
+    };
   }, [src]);
 
   // @ts-expect-error
diff --git a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
index b9a2f10..3cbd4eb 100644
--- a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
+++ b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
@@ -21,15 +21,28 @@ export const useLoadAsyncVideo = (src: string) => {
   useEffect(() => {
     setState({ status: "loading" });
 
+    let cancelled = false;
+
     fetchVideo(src)
       .then((blob) => {
+        if (cancelled) {
+          return;
+        }
+
         appendVideoToDomAndPlay(blob);
 
         setState({ status: "loaded" });
       })
       .catch((error) => {
+        if (cancelled) {
+          return;
+        }
         setState({ status: "error", error });
       });
+
+    return () => {
+      cancelled = true;
+    };
   }, [src]);
 
   // @ts-expect-error

From 47a57c8a45888e19d8944279bd0360834ea45262 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 10 Jul 2023 12:28:10 +0100
Subject: [PATCH 064/165] Changed 47 setup

---
 ...scriminated-unions-in-usestate.problem.tsx | 27 ++++---------------
 ...criminated-unions-in-usestate.solution.tsx |  4 +++
 2 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx
index 184ff7e..9d36f1e 100644
--- a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx
+++ b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx
@@ -1,29 +1,8 @@
 import { appendVideoToDomAndPlay, fetchVideo } from "fake-external-lib";
 import { useEffect, useState } from "react";
 
-/**
- * Here, we're doing the same trick as before - using a state
- * variable to track the status of the video loading.
- *
- * But this time, we're storing it an object, with an extra
- * property for the error.
- *
- * This could be improved - we should only be allowed to specify
- * the error property when the status is "error".
- *
- * 1. Change the State interface so that the error property is only
- * allowed when the status is "error".
- */
-
-type Status = "loading" | "loaded" | "error";
-
-interface State {
-  status: Status;
-  error?: Error;
-}
-
 export const useLoadAsyncVideo = (src: string) => {
-  const [state, setState] = useState<State>({
+  const [state, setState] = useState({
     status: "loading",
   });
 
@@ -62,4 +41,8 @@ export const useLoadAsyncVideo = (src: string) => {
 
   // @ts-expect-error
   setState({ status: "loaded", error: new Error("error") });
+
+  if (state.status === "error") {
+    console.error(state.error);
+  }
 };
diff --git a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
index 3cbd4eb..c1ac30b 100644
--- a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
+++ b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
@@ -53,4 +53,8 @@ export const useLoadAsyncVideo = (src: string) => {
 
   // @ts-expect-error
   setState({ status: "loaded", error: new Error("error") });
+
+  if (state.status === "error") {
+    console.error(state.error);
+  }
 };

From 21404ed68336285d977582cd44dc992c3e8ce220 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 10 Jul 2023 13:01:42 +0100
Subject: [PATCH 065/165] Changed 47

---
 .../47-discriminated-unions-in-usestate.solution.tsx         | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
index c1ac30b..45b8477 100644
--- a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
+++ b/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
@@ -3,10 +3,7 @@ import { useEffect, useState } from "react";
 
 type State =
   | {
-      status: "loading";
-    }
-  | {
-      status: "loaded";
+      status: "loading" | "loaded";
     }
   | {
       status: "error";

From aa09e15e4ff48678421479a3b430b39e47077e89 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 10 Jul 2023 13:07:06 +0100
Subject: [PATCH 066/165] Changed 48 success

---
 ...discriminated-tuples-from-custom-hooks.solution.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.solution.tsx
index dcf7160..b1661c1 100644
--- a/src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.solution.tsx
+++ b/src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.solution.tsx
@@ -7,12 +7,12 @@ import { useEffect, useState } from "react";
  * even after it's been destructured.
  */
 export type Result<T> =
-  | ["loading", undefined]
-  | ["error", Error]
-  | ["success", T];
+  | ["loading", undefined?]
+  | ["success", T]
+  | ["error", Error];
 
 export const useData = <T,>(url: string): Result<T> => {
-  const [result, setResult] = useState<Result<T>>(["loading", undefined]);
+  const [result, setResult] = useState<Result<T>>(["loading"]);
 
   useEffect(() => {
     fetch(url)
@@ -26,7 +26,7 @@ export const useData = <T,>(url: string): Result<T> => {
 
 const Component = () => {
   const [status, value] = useData<{ title: string }>(
-    "https://jsonplaceholder.typicode.com/todos/1",
+    "https://jsonplaceholder.typicode.com/todos/1"
   );
 
   if (status === "loading") {

From 66891d8f4a4a04cf2a4d6bfc561cc8fc30975266 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 10 Jul 2023 13:15:46 +0100
Subject: [PATCH 067/165] Changed 49

---
 src/06-advanced-hooks/49-use-state-overloads.solution.1.ts | 2 +-
 src/06-advanced-hooks/49-use-state-overloads.solution.2.ts | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/06-advanced-hooks/49-use-state-overloads.solution.1.ts b/src/06-advanced-hooks/49-use-state-overloads.solution.1.ts
index 90ab8bf..7723958 100644
--- a/src/06-advanced-hooks/49-use-state-overloads.solution.1.ts
+++ b/src/06-advanced-hooks/49-use-state-overloads.solution.1.ts
@@ -17,5 +17,5 @@ const example2 = maybeReturnsString();
 
 type tests = [
   Expect<Equal<typeof example1, string>>,
-  Expect<Equal<typeof example2, string | undefined>>,
+  Expect<Equal<typeof example2, string | undefined>>
 ];
diff --git a/src/06-advanced-hooks/49-use-state-overloads.solution.2.ts b/src/06-advanced-hooks/49-use-state-overloads.solution.2.ts
index 107f774..9d1e63e 100644
--- a/src/06-advanced-hooks/49-use-state-overloads.solution.2.ts
+++ b/src/06-advanced-hooks/49-use-state-overloads.solution.2.ts
@@ -7,7 +7,7 @@ import { Equal, Expect } from "../helpers/type-utils";
 
 function maybeReturnsString(defaultString: string): string;
 function maybeReturnsString(
-  defaultString?: string | undefined,
+  defaultString?: string | undefined
 ): string | undefined;
 function maybeReturnsString(defaultString?: string) {
   // If you pass a string, it always returns a string
@@ -20,9 +20,9 @@ function maybeReturnsString(defaultString?: string) {
 }
 
 const example1 = maybeReturnsString("hello");
-const example2 = maybeReturnsString();
+const example2 = maybeReturnsString(undefined);
 
 type tests = [
   Expect<Equal<typeof example1, string>>,
-  Expect<Equal<typeof example2, string | undefined>>,
+  Expect<Equal<typeof example2, string | undefined>>
 ];

From 7c8a571a3f33a31daa2f1ff4ae7f28c54eb313c1 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 10 Jul 2023 13:41:47 +0100
Subject: [PATCH 068/165] Moved required context around

---
 ...quired-context.problem.tsx => 46-required-context.problem.tsx} | 0
 ...-context.solution.1.tsx => 46-required-context.solution.1.tsx} | 0
 ...-context.solution.2.tsx => 46-required-context.solution.2.tsx} | 0
 ...-in-usestate.problem.tsx => 47-unions-in-usestate.problem.tsx} | 0
 ...n-usestate.solution.tsx => 47-unions-in-usestate.solution.tsx} | 0
 ...roblem.tsx => 48-discriminated-unions-in-usestate.problem.tsx} | 0
 ...ution.tsx => 48-discriminated-unions-in-usestate.solution.tsx} | 0
 ....tsx => 49-discriminated-tuples-from-custom-hooks.problem.tsx} | 0
 ...tsx => 49-discriminated-tuples-from-custom-hooks.solution.tsx} | 0
 ...ate-overloads.problem.ts => 50-use-state-overloads.problem.ts} | 0
 ...erloads.solution.1.ts => 50-use-state-overloads.solution.1.ts} | 0
 ...erloads.solution.2.ts => 50-use-state-overloads.solution.2.ts} | 0
 ...hooks.problem.ts => 51-function-overloads-in-hooks.problem.ts} | 0
 ...solution.1.ts => 51-function-overloads-in-hooks.solution.1.ts} | 0
 ...solution.2.ts => 51-function-overloads-in-hooks.solution.2.ts} | 0
 ...{51-currying-hooks.problem.ts => 52-currying-hooks.problem.ts} | 0
 ...1-currying-hooks.solution.ts => 52-currying-hooks.solution.ts} | 0
 17 files changed, 0 insertions(+), 0 deletions(-)
 rename src/06-advanced-hooks/{52-required-context.problem.tsx => 46-required-context.problem.tsx} (100%)
 rename src/06-advanced-hooks/{52-required-context.solution.1.tsx => 46-required-context.solution.1.tsx} (100%)
 rename src/06-advanced-hooks/{52-required-context.solution.2.tsx => 46-required-context.solution.2.tsx} (100%)
 rename src/06-advanced-hooks/{46-unions-in-usestate.problem.tsx => 47-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{46-unions-in-usestate.solution.tsx => 47-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{47-discriminated-unions-in-usestate.problem.tsx => 48-discriminated-unions-in-usestate.problem.tsx} (100%)
 rename src/06-advanced-hooks/{47-discriminated-unions-in-usestate.solution.tsx => 48-discriminated-unions-in-usestate.solution.tsx} (100%)
 rename src/06-advanced-hooks/{48-discriminated-tuples-from-custom-hooks.problem.tsx => 49-discriminated-tuples-from-custom-hooks.problem.tsx} (100%)
 rename src/06-advanced-hooks/{48-discriminated-tuples-from-custom-hooks.solution.tsx => 49-discriminated-tuples-from-custom-hooks.solution.tsx} (100%)
 rename src/06-advanced-hooks/{49-use-state-overloads.problem.ts => 50-use-state-overloads.problem.ts} (100%)
 rename src/06-advanced-hooks/{49-use-state-overloads.solution.1.ts => 50-use-state-overloads.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{49-use-state-overloads.solution.2.ts => 50-use-state-overloads.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{50-function-overloads-in-hooks.problem.ts => 51-function-overloads-in-hooks.problem.ts} (100%)
 rename src/06-advanced-hooks/{50-function-overloads-in-hooks.solution.1.ts => 51-function-overloads-in-hooks.solution.1.ts} (100%)
 rename src/06-advanced-hooks/{50-function-overloads-in-hooks.solution.2.ts => 51-function-overloads-in-hooks.solution.2.ts} (100%)
 rename src/06-advanced-hooks/{51-currying-hooks.problem.ts => 52-currying-hooks.problem.ts} (100%)
 rename src/06-advanced-hooks/{51-currying-hooks.solution.ts => 52-currying-hooks.solution.ts} (100%)

diff --git a/src/06-advanced-hooks/52-required-context.problem.tsx b/src/06-advanced-hooks/46-required-context.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/52-required-context.problem.tsx
rename to src/06-advanced-hooks/46-required-context.problem.tsx
diff --git a/src/06-advanced-hooks/52-required-context.solution.1.tsx b/src/06-advanced-hooks/46-required-context.solution.1.tsx
similarity index 100%
rename from src/06-advanced-hooks/52-required-context.solution.1.tsx
rename to src/06-advanced-hooks/46-required-context.solution.1.tsx
diff --git a/src/06-advanced-hooks/52-required-context.solution.2.tsx b/src/06-advanced-hooks/46-required-context.solution.2.tsx
similarity index 100%
rename from src/06-advanced-hooks/52-required-context.solution.2.tsx
rename to src/06-advanced-hooks/46-required-context.solution.2.tsx
diff --git a/src/06-advanced-hooks/46-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/47-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/46-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/47-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/46-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/47-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/46-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/47-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx b/src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/47-discriminated-unions-in-usestate.problem.tsx
rename to src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx
diff --git a/src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx b/src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/47-discriminated-unions-in-usestate.solution.tsx
rename to src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx
diff --git a/src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.problem.tsx b/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx
similarity index 100%
rename from src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.problem.tsx
rename to src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx
diff --git a/src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.solution.tsx b/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx
similarity index 100%
rename from src/06-advanced-hooks/48-discriminated-tuples-from-custom-hooks.solution.tsx
rename to src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx
diff --git a/src/06-advanced-hooks/49-use-state-overloads.problem.ts b/src/06-advanced-hooks/50-use-state-overloads.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/49-use-state-overloads.problem.ts
rename to src/06-advanced-hooks/50-use-state-overloads.problem.ts
diff --git a/src/06-advanced-hooks/49-use-state-overloads.solution.1.ts b/src/06-advanced-hooks/50-use-state-overloads.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/49-use-state-overloads.solution.1.ts
rename to src/06-advanced-hooks/50-use-state-overloads.solution.1.ts
diff --git a/src/06-advanced-hooks/49-use-state-overloads.solution.2.ts b/src/06-advanced-hooks/50-use-state-overloads.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/49-use-state-overloads.solution.2.ts
rename to src/06-advanced-hooks/50-use-state-overloads.solution.2.ts
diff --git a/src/06-advanced-hooks/50-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/50-function-overloads-in-hooks.problem.ts
rename to src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
diff --git a/src/06-advanced-hooks/50-function-overloads-in-hooks.solution.1.ts b/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts
similarity index 100%
rename from src/06-advanced-hooks/50-function-overloads-in-hooks.solution.1.ts
rename to src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts
diff --git a/src/06-advanced-hooks/50-function-overloads-in-hooks.solution.2.ts b/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts
similarity index 100%
rename from src/06-advanced-hooks/50-function-overloads-in-hooks.solution.2.ts
rename to src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts
diff --git a/src/06-advanced-hooks/51-currying-hooks.problem.ts b/src/06-advanced-hooks/52-currying-hooks.problem.ts
similarity index 100%
rename from src/06-advanced-hooks/51-currying-hooks.problem.ts
rename to src/06-advanced-hooks/52-currying-hooks.problem.ts
diff --git a/src/06-advanced-hooks/51-currying-hooks.solution.ts b/src/06-advanced-hooks/52-currying-hooks.solution.ts
similarity index 100%
rename from src/06-advanced-hooks/51-currying-hooks.solution.ts
rename to src/06-advanced-hooks/52-currying-hooks.solution.ts

From 25c22cdfcc5c1f8e3c16af85c8189a3d903babd2 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 11 Jul 2023 17:42:42 +0100
Subject: [PATCH 069/165] Possible 56.5 example

---
 package.json                                  |  8 +++-
 .../56.5-react-component-type.explainer.tsx   | 47 +++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/07-types-deep-dive/56.5-react-component-type.explainer.tsx

diff --git a/package.json b/package.json
index 467b6b2..549cd36 100644
--- a/package.json
+++ b/package.json
@@ -156,7 +156,13 @@
     "e-71": "tt-cli run 71",
     "s-71": "tt-cli run 71 --solution",
     "e-73": "tt-cli run 73",
-    "s-73": "tt-cli run 73 --solution"
+    "s-73": "tt-cli run 73 --solution",
+    "e-69": "tt-cli run 69",
+    "s-69": "tt-cli run 69 --solution",
+    "e-74": "tt-cli run 74",
+    "s-74": "tt-cli run 74 --solution",
+    "e-76": "tt-cli run 76",
+    "s-76": "tt-cli run 76 --solution"
   },
   "dependencies": {
     "@tanstack/react-query": "^4.29.12",
diff --git a/src/07-types-deep-dive/56.5-react-component-type.explainer.tsx b/src/07-types-deep-dive/56.5-react-component-type.explainer.tsx
new file mode 100644
index 0000000..f099499
--- /dev/null
+++ b/src/07-types-deep-dive/56.5-react-component-type.explainer.tsx
@@ -0,0 +1,47 @@
+type types = [
+  React.ElementType,
+  React.ComponentType,
+  React.JSXElementConstructor<{
+    prop1: string;
+  }>
+];
+
+/**
+ * ElementType
+ *
+ * Lets you specify certain types of elements
+ * which can receive those props.
+ *
+ * For instance, Example accepts 'audio' and 'video'!
+ * As well as ComponentType<P>
+ */
+export type Example = React.ElementType<{
+  autoPlay?: boolean;
+}>;
+
+/**
+ * JSXElementConstructor
+ */
+const Example1 = (props: { prop1: string }) => {
+  return null;
+};
+
+class Example2 extends React.Component<{
+  prop1: string;
+}> {
+  render(): React.ReactNode {
+    this.props.prop1;
+    return null;
+  }
+}
+
+const tests: Array<
+  React.JSXElementConstructor<{
+    prop1: string;
+  }>
+> = [Example1, Example2];
+
+const tests2: Array<React.ComponentType<{ prop1: string }>> = [
+  Example1,
+  Example2,
+];

From 718bf10f4dc7e389c115c40a5c813c2c441a659e Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 10:45:31 +0100
Subject: [PATCH 070/165] Adjusted 56.5

---
 .../56.5-react-component-type.explainer.tsx   | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/07-types-deep-dive/56.5-react-component-type.explainer.tsx b/src/07-types-deep-dive/56.5-react-component-type.explainer.tsx
index f099499..ab99ef4 100644
--- a/src/07-types-deep-dive/56.5-react-component-type.explainer.tsx
+++ b/src/07-types-deep-dive/56.5-react-component-type.explainer.tsx
@@ -1,10 +1,4 @@
-type types = [
-  React.ElementType,
-  React.ComponentType,
-  React.JSXElementConstructor<{
-    prop1: string;
-  }>
-];
+type types = [React.ElementType, React.ComponentType];
 
 /**
  * ElementType
@@ -20,13 +14,13 @@ export type Example = React.ElementType<{
 }>;
 
 /**
- * JSXElementConstructor
+ * ComponentType
  */
-const Example1 = (props: { prop1: string }) => {
+const FuncComponent = (props: { prop1: string }) => {
   return null;
 };
 
-class Example2 extends React.Component<{
+class ClassComponent extends React.Component<{
   prop1: string;
 }> {
   render(): React.ReactNode {
@@ -35,13 +29,7 @@ class Example2 extends React.Component<{
   }
 }
 
-const tests: Array<
-  React.JSXElementConstructor<{
-    prop1: string;
-  }>
-> = [Example1, Example2];
-
 const tests2: Array<React.ComponentType<{ prop1: string }>> = [
-  Example1,
-  Example2,
+  FuncComponent,
+  ClassComponent,
 ];

From 54d908d7ee22daac6d3d86895397a4395d8bf101 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 10:45:59 +0100
Subject: [PATCH 071/165] Reorder

---
 ...t-type.explainer.tsx => 57-react-component-type.explainer.tsx} | 0
 ...ace.problem.ts => 58-appending-to-global-namespace.problem.ts} | 0
 ...e.solution.ts => 58-appending-to-global-namespace.solution.ts} | 0
 ...m.ts => 59-declaration-merging-in-global-namespace.problem.ts} | 0
 ....ts => 59-declaration-merging-in-global-namespace.solution.ts} | 0
 ...-element.problem.tsx => 60-add-new-global-element.problem.tsx} | 0
 ...lement.solution.tsx => 60-add-new-global-element.solution.tsx} | 0
 ...-attributes.explainer.tsx => 61-html-attributes.explainer.tsx} | 0
 ...s.problem.tsx => 62-add-attribute-to-all-elements.problem.tsx} | 0
 ...solution.tsx => 62-add-attribute-to-all-elements.solution.tsx} | 0
 ...d-component.problem.tsx => 63-lazy-load-component.problem.tsx} | 0
 ...component.solution.tsx => 63-lazy-load-component.solution.tsx} | 0
 ...em.tsx => 64-const-generics-in-generic-components.problem.tsx} | 0
 .../{64-render-props.problem.tsx => 65-render-props.problem.tsx}  | 0
 ...{64-render-props.solution.tsx => 65-render-props.solution.tsx} | 0
 ...plainer.1.tsx => 66-forward-ref-with-generics.explainer.1.tsx} | 0
 ...plainer.2.tsx => 66-forward-ref-with-generics.explainer.2.tsx} | 0
 ...explainer.3.ts => 66-forward-ref-with-generics.explainer.3.ts} | 0
 ...n.problem.tsx => 67-forward-ref-as-local-function.problem.tsx} | 0
 ...solution.tsx => 67-forward-ref-as-local-function.solution.tsx} | 0
 .../{67-hoc.problem.tsx => 68-hoc.problem.tsx}                    | 0
 .../{67-hoc.solution.tsx => 68-hoc.solution.tsx}                  | 0
 ...em.tsx => 69-record-of-components-with-same-props.problem.tsx} | 0
 ...tsx => 69-record-of-components-with-same-props.solution.1.tsx} | 0
 ...tsx => 69-record-of-components-with-same-props.solution.2.tsx} | 0
 .../{69-as-prop.problem.tsx => 70-as-prop.problem.tsx}            | 0
 .../{69-as-prop.solution.1.tsx => 70-as-prop.solution.1.tsx}      | 0
 .../{69-as-prop.solution.2.tsx => 70-as-prop.solution.2.tsx}      | 0
 ....problem.tsx => 71-as-prop-with-custom-components.problem.tsx} | 0
 ...olution.tsx => 71-as-prop-with-custom-components.solution.tsx} | 0
 ...th-default.problem.tsx => 72-as-prop-with-default.problem.tsx} | 0
 ...-default.solution.tsx => 72-as-prop-with-default.solution.tsx} | 0
 ...t-hook-form.explainer.tsx => 73-react-hook-form.explainer.tsx} | 0
 ...wrapper.problem.tsx => 74-react-hook-form-wrapper.problem.tsx} | 0
 ...apper.solution.tsx => 74-react-hook-form-wrapper.solution.tsx} | 0
 .../{74-react-select.problem.tsx => 75-react-select.problem.tsx}  | 0
 ...{74-react-select.solution.tsx => 75-react-select.solution.tsx} | 0
 .../{75-react-query.explainer.ts => 76-react-query.explainer.ts}  | 0
 ...query-wrapper.problem.ts => 77-react-query-wrapper.problem.ts} | 0
 ...ery-wrapper.solution.ts => 77-react-query-wrapper.solution.ts} | 0
 40 files changed, 0 insertions(+), 0 deletions(-)
 rename src/07-types-deep-dive/{56.5-react-component-type.explainer.tsx => 57-react-component-type.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{57-appending-to-global-namespace.problem.ts => 58-appending-to-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{57-appending-to-global-namespace.solution.ts => 58-appending-to-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{58-declaration-merging-in-global-namespace.problem.ts => 59-declaration-merging-in-global-namespace.problem.ts} (100%)
 rename src/07-types-deep-dive/{58-declaration-merging-in-global-namespace.solution.ts => 59-declaration-merging-in-global-namespace.solution.ts} (100%)
 rename src/07-types-deep-dive/{59-add-new-global-element.problem.tsx => 60-add-new-global-element.problem.tsx} (100%)
 rename src/07-types-deep-dive/{59-add-new-global-element.solution.tsx => 60-add-new-global-element.solution.tsx} (100%)
 rename src/07-types-deep-dive/{60-html-attributes.explainer.tsx => 61-html-attributes.explainer.tsx} (100%)
 rename src/07-types-deep-dive/{61-add-attribute-to-all-elements.problem.tsx => 62-add-attribute-to-all-elements.problem.tsx} (100%)
 rename src/07-types-deep-dive/{61-add-attribute-to-all-elements.solution.tsx => 62-add-attribute-to-all-elements.solution.tsx} (100%)
 rename src/08-advanced-patterns/{62-lazy-load-component.problem.tsx => 63-lazy-load-component.problem.tsx} (100%)
 rename src/08-advanced-patterns/{62-lazy-load-component.solution.tsx => 63-lazy-load-component.solution.tsx} (100%)
 rename src/08-advanced-patterns/{63-const-generics-in-generic-components.problem.tsx => 64-const-generics-in-generic-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{64-render-props.problem.tsx => 65-render-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{64-render-props.solution.tsx => 65-render-props.solution.tsx} (100%)
 rename src/08-advanced-patterns/{65-forward-ref-with-generics.explainer.1.tsx => 66-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/08-advanced-patterns/{65-forward-ref-with-generics.explainer.2.tsx => 66-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/08-advanced-patterns/{65-forward-ref-with-generics.explainer.3.ts => 66-forward-ref-with-generics.explainer.3.ts} (100%)
 rename src/08-advanced-patterns/{66-forward-ref-as-local-function.problem.tsx => 67-forward-ref-as-local-function.problem.tsx} (100%)
 rename src/08-advanced-patterns/{66-forward-ref-as-local-function.solution.tsx => 67-forward-ref-as-local-function.solution.tsx} (100%)
 rename src/08-advanced-patterns/{67-hoc.problem.tsx => 68-hoc.problem.tsx} (100%)
 rename src/08-advanced-patterns/{67-hoc.solution.tsx => 68-hoc.solution.tsx} (100%)
 rename src/08-advanced-patterns/{68-record-of-components-with-same-props.problem.tsx => 69-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{68-record-of-components-with-same-props.solution.1.tsx => 69-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{68-record-of-components-with-same-props.solution.2.tsx => 69-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{69-as-prop.problem.tsx => 70-as-prop.problem.tsx} (100%)
 rename src/08-advanced-patterns/{69-as-prop.solution.1.tsx => 70-as-prop.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{69-as-prop.solution.2.tsx => 70-as-prop.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{70-as-prop-with-custom-components.problem.tsx => 71-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{70-as-prop-with-custom-components.solution.tsx => 71-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/08-advanced-patterns/{71-as-prop-with-default.problem.tsx => 72-as-prop-with-default.problem.tsx} (100%)
 rename src/08-advanced-patterns/{71-as-prop-with-default.solution.tsx => 72-as-prop-with-default.solution.tsx} (100%)
 rename src/09-external-libraries/{72-react-hook-form.explainer.tsx => 73-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{73-react-hook-form-wrapper.problem.tsx => 74-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{73-react-hook-form-wrapper.solution.tsx => 74-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{74-react-select.problem.tsx => 75-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{74-react-select.solution.tsx => 75-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{75-react-query.explainer.ts => 76-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{76-react-query-wrapper.problem.ts => 77-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{76-react-query-wrapper.solution.ts => 77-react-query-wrapper.solution.ts} (100%)

diff --git a/src/07-types-deep-dive/56.5-react-component-type.explainer.tsx b/src/07-types-deep-dive/57-react-component-type.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/56.5-react-component-type.explainer.tsx
rename to src/07-types-deep-dive/57-react-component-type.explainer.tsx
diff --git a/src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts b/src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/57-appending-to-global-namespace.problem.ts
rename to src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts b/src/07-types-deep-dive/58-appending-to-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/57-appending-to-global-namespace.solution.ts
rename to src/07-types-deep-dive/58-appending-to-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts b/src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/58-declaration-merging-in-global-namespace.problem.ts
rename to src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts
diff --git a/src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts b/src/07-types-deep-dive/59-declaration-merging-in-global-namespace.solution.ts
similarity index 100%
rename from src/07-types-deep-dive/58-declaration-merging-in-global-namespace.solution.ts
rename to src/07-types-deep-dive/59-declaration-merging-in-global-namespace.solution.ts
diff --git a/src/07-types-deep-dive/59-add-new-global-element.problem.tsx b/src/07-types-deep-dive/60-add-new-global-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-add-new-global-element.problem.tsx
rename to src/07-types-deep-dive/60-add-new-global-element.problem.tsx
diff --git a/src/07-types-deep-dive/59-add-new-global-element.solution.tsx b/src/07-types-deep-dive/60-add-new-global-element.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/59-add-new-global-element.solution.tsx
rename to src/07-types-deep-dive/60-add-new-global-element.solution.tsx
diff --git a/src/07-types-deep-dive/60-html-attributes.explainer.tsx b/src/07-types-deep-dive/61-html-attributes.explainer.tsx
similarity index 100%
rename from src/07-types-deep-dive/60-html-attributes.explainer.tsx
rename to src/07-types-deep-dive/61-html-attributes.explainer.tsx
diff --git a/src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx b/src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/61-add-attribute-to-all-elements.problem.tsx
rename to src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx
diff --git a/src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx b/src/07-types-deep-dive/62-add-attribute-to-all-elements.solution.tsx
similarity index 100%
rename from src/07-types-deep-dive/61-add-attribute-to-all-elements.solution.tsx
rename to src/07-types-deep-dive/62-add-attribute-to-all-elements.solution.tsx
diff --git a/src/08-advanced-patterns/62-lazy-load-component.problem.tsx b/src/08-advanced-patterns/63-lazy-load-component.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-lazy-load-component.problem.tsx
rename to src/08-advanced-patterns/63-lazy-load-component.problem.tsx
diff --git a/src/08-advanced-patterns/62-lazy-load-component.solution.tsx b/src/08-advanced-patterns/63-lazy-load-component.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/62-lazy-load-component.solution.tsx
rename to src/08-advanced-patterns/63-lazy-load-component.solution.tsx
diff --git a/src/08-advanced-patterns/63-const-generics-in-generic-components.problem.tsx b/src/08-advanced-patterns/64-const-generics-in-generic-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/63-const-generics-in-generic-components.problem.tsx
rename to src/08-advanced-patterns/64-const-generics-in-generic-components.problem.tsx
diff --git a/src/08-advanced-patterns/64-render-props.problem.tsx b/src/08-advanced-patterns/65-render-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/64-render-props.problem.tsx
rename to src/08-advanced-patterns/65-render-props.problem.tsx
diff --git a/src/08-advanced-patterns/64-render-props.solution.tsx b/src/08-advanced-patterns/65-render-props.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/64-render-props.solution.tsx
rename to src/08-advanced-patterns/65-render-props.solution.tsx
diff --git a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
rename to src/08-advanced-patterns/66-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx b/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx
rename to src/08-advanced-patterns/66-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts b/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.3.ts
similarity index 100%
rename from src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
rename to src/08-advanced-patterns/66-forward-ref-with-generics.explainer.3.ts
diff --git a/src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx b/src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx
rename to src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx
diff --git a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.tsx b/src/08-advanced-patterns/67-forward-ref-as-local-function.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-forward-ref-as-local-function.solution.tsx
rename to src/08-advanced-patterns/67-forward-ref-as-local-function.solution.tsx
diff --git a/src/08-advanced-patterns/67-hoc.problem.tsx b/src/08-advanced-patterns/68-hoc.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-hoc.problem.tsx
rename to src/08-advanced-patterns/68-hoc.problem.tsx
diff --git a/src/08-advanced-patterns/67-hoc.solution.tsx b/src/08-advanced-patterns/68-hoc.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-hoc.solution.tsx
rename to src/08-advanced-patterns/68-hoc.solution.tsx
diff --git a/src/08-advanced-patterns/68-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/68-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/69-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/69-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/68-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/69-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/69-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/08-advanced-patterns/69-as-prop.problem.tsx b/src/08-advanced-patterns/70-as-prop.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/69-as-prop.problem.tsx
rename to src/08-advanced-patterns/70-as-prop.problem.tsx
diff --git a/src/08-advanced-patterns/69-as-prop.solution.1.tsx b/src/08-advanced-patterns/70-as-prop.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/69-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/70-as-prop.solution.1.tsx
diff --git a/src/08-advanced-patterns/69-as-prop.solution.2.tsx b/src/08-advanced-patterns/70-as-prop.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/69-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/70-as-prop.solution.2.tsx
diff --git a/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx
diff --git a/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
rename to src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx
diff --git a/src/08-advanced-patterns/71-as-prop-with-default.problem.tsx b/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/71-as-prop-with-default.problem.tsx
rename to src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
diff --git a/src/08-advanced-patterns/71-as-prop-with-default.solution.tsx b/src/08-advanced-patterns/72-as-prop-with-default.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/71-as-prop-with-default.solution.tsx
rename to src/08-advanced-patterns/72-as-prop-with-default.solution.tsx
diff --git a/src/09-external-libraries/72-react-hook-form.explainer.tsx b/src/09-external-libraries/73-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/72-react-hook-form.explainer.tsx
rename to src/09-external-libraries/73-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/73-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/73-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/73-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/73-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/74-react-select.problem.tsx b/src/09-external-libraries/75-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/74-react-select.problem.tsx
rename to src/09-external-libraries/75-react-select.problem.tsx
diff --git a/src/09-external-libraries/74-react-select.solution.tsx b/src/09-external-libraries/75-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/74-react-select.solution.tsx
rename to src/09-external-libraries/75-react-select.solution.tsx
diff --git a/src/09-external-libraries/75-react-query.explainer.ts b/src/09-external-libraries/76-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/75-react-query.explainer.ts
rename to src/09-external-libraries/76-react-query.explainer.ts
diff --git a/src/09-external-libraries/76-react-query-wrapper.problem.ts b/src/09-external-libraries/77-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/76-react-query-wrapper.problem.ts
rename to src/09-external-libraries/77-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/76-react-query-wrapper.solution.ts b/src/09-external-libraries/77-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/76-react-query-wrapper.solution.ts
rename to src/09-external-libraries/77-react-query-wrapper.solution.ts

From 0c6407fa3bdd6947fa828aad4748823c5a735a86 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 10:49:39 +0100
Subject: [PATCH 072/165] Updated snapshots

---
 scripts/tests/__snapshots__/all.test.ts.snap | 592 +++++++++++--------
 1 file changed, 341 insertions(+), 251 deletions(-)

diff --git a/scripts/tests/__snapshots__/all.test.ts.snap b/scripts/tests/__snapshots__/all.test.ts.snap
index b5a7a33..35cfd0f 100644
--- a/scripts/tests/__snapshots__/all.test.ts.snap
+++ b/scripts/tests/__snapshots__/all.test.ts.snap
@@ -101,109 +101,127 @@ src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(48,11): error TS2
     Type '{ children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
       Types of property 'type' are incompatible.
         Type 'string' is not assignable to type '\\"button\\" | \\"submit\\" | \\"reset\\" | undefined'.
-src/05-generics/34-generic-props.problem.tsx(41,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/34-generic-props.problem.tsx(45,17): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/35-generic-hooks.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/35-generic-hooks.problem.ts(25,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/35-generic-hooks.problem.ts(35,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/35-generic-hooks.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/35.5-generic-class-components.problem.tsx(37,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/35.5-generic-class-components.problem.tsx(41,17): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/36-generic-localstorage-hook.problem.ts(28,30): error TS2558: Expected 0 type arguments, but got 1.
-src/05-generics/36-generic-localstorage-hook.problem.ts(35,24): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/36-generic-localstorage-hook.problem.ts(41,5): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx(44,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/37.2-inference-flow-with-constraints.problem.ts(42,1): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/37.2-inference-flow-with-constraints.problem.ts(52,5): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/37.2-inference-flow-with-constraints.problem.ts(60,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/38-button-group.problem.tsx(46,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/39-lazy-load-component.problem.tsx(18,44): error TS2345: Argument of type 'unknown' is not assignable to parameter of type '() => Promise<{ default: ComponentType<any>; }>'.
-src/05-generics/39-lazy-load-component.problem.tsx(28,62): error TS2322: Type '{ loader: () => Promise<typeof import(\\"/src/fake-external-lib/component\\")>; id: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
-  Property 'id' does not exist on type 'IntrinsicAttributes & Props'.
-src/05-generics/39-lazy-load-component.problem.tsx(36,4): error TS2578: Unused '@ts-expect-error' directive.
-src/06-advanced-hooks/41-tuple-return-type.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/41-tuple-return-type.problem.ts(24,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/42-unions-in-usestate.problem.tsx(45,3): error TS2578: Unused '@ts-expect-error' directive.
-src/06-advanced-hooks/42-unions-in-usestate.problem.tsx(62,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx(44,3): error TS2578: Unused '@ts-expect-error' directive.
-src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx(47,3): error TS2578: Unused '@ts-expect-error' directive.
-src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx(50,3): error TS2578: Unused '@ts-expect-error' directive.
-src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx(46,25): error TS18048: 'value' is possibly 'undefined'.
-src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx(46,31): error TS2339: Property 'message' does not exist on type 'Error | { title: string; }'.
+src/05-generics/36-type-helpers-with-constraints.problem.tsx(14,3): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/36-type-helpers-with-constraints.problem.tsx(16,3): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/36-type-helpers-with-constraints.problem.tsx(18,3): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/37-generic-localstorage-hook.problem.ts(28,30): error TS2558: Expected 0 type arguments, but got 1.
+src/05-generics/37-generic-localstorage-hook.problem.ts(35,24): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/37-generic-localstorage-hook.problem.ts(41,5): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/38-generic-hooks.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/38-generic-hooks.problem.ts(25,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/38-generic-hooks.problem.ts(35,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/38-generic-hooks.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/39-generic-props.problem.tsx(41,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/39-generic-props.problem.tsx(45,17): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/40-generic-class-components.problem.tsx(37,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/40-generic-class-components.problem.tsx(41,17): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/41-passing-types-to-components.problem.tsx(29,5): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/41-passing-types-to-components.problem.tsx(32,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/41-passing-types-to-components.problem.tsx(33,23): error TS2339: Property 'name' does not exist on type 'number'.
+src/05-generics/41-passing-types-to-components.problem.tsx(44,9): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/41-passing-types-to-components.problem.tsx(51,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx(44,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/42-passing-types-to-components.problem.tsx(35,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/42-passing-types-to-components.problem.tsx(36,23): error TS2339: Property 'name' does not exist on type 'number'.
+src/05-generics/42-passing-types-to-components.problem.tsx(47,9): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/42-passing-types-to-components.problem.tsx(54,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/43-inference-flow-with-constraints.problem.ts(42,1): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/43-inference-flow-with-constraints.problem.ts(52,5): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/43-inference-flow-with-constraints.problem.ts(60,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/45-tuple-return-type.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/45-tuple-return-type.problem.ts(24,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/46-required-context.problem.tsx(33,55): error TS2558: Expected 0 type arguments, but got 1.
+src/06-advanced-hooks/46-required-context.problem.tsx(37,57): error TS2558: Expected 0 type arguments, but got 1.
+src/06-advanced-hooks/46-required-context.problem.tsx(42,16): error TS2554: Expected 1 arguments, but got 0.
+src/06-advanced-hooks/46-required-context.problem.tsx(45,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/46-required-context.problem.tsx(53,17): error TS2554: Expected 1 arguments, but got 0.
+src/06-advanced-hooks/46-required-context.problem.tsx(56,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/46-required-context.problem.tsx(70,21): error TS2322: Type '{ name: string; }' is not assignable to type 'null'.
+src/06-advanced-hooks/46-required-context.problem.tsx(72,11): error TS2322: Type '{ primaryColor: string; }' is not assignable to type 'null'.
+src/06-advanced-hooks/47-unions-in-usestate.problem.tsx(45,3): error TS2578: Unused '@ts-expect-error' directive.
+src/06-advanced-hooks/47-unions-in-usestate.problem.tsx(62,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(28,37): error TS2345: Argument of type '{ status: string; error: any; }' is not assignable to parameter of type 'SetStateAction<{ status: string; }>'.
+  Object literal may only specify known properties, and 'error' does not exist in type 'SetStateAction<{ status: string; }>'.
+src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(36,3): error TS2578: Unused '@ts-expect-error' directive.
+src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(46,25): error TS2339: Property 'error' does not exist on type '{ status: string; }'.
+src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(46,25): error TS18048: 'value' is possibly 'undefined'.
+src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(46,31): error TS2339: Property 'message' does not exist on type 'Error | { title: string; }'.
   Property 'message' does not exist on type '{ title: string; }'.
-src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx(49,16): error TS18048: 'value' is possibly 'undefined'.
-src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx(49,22): error TS2339: Property 'title' does not exist on type 'Error | { title: string; }'.
+src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(49,16): error TS18048: 'value' is possibly 'undefined'.
+src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(49,22): error TS2339: Property 'title' does not exist on type 'Error | { title: string; }'.
   Property 'title' does not exist on type 'Error'.
-src/06-advanced-hooks/45-use-state-overloads.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts(37,22): error TS2554: Expected 1 arguments, but got 0.
-src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts(40,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts(42,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-types-deep-dive/48-understanding-jsx-element.explainer.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-src/07-types-deep-dive/49-strongly-typing-children.explainer.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
+src/06-advanced-hooks/50-use-state-overloads.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(37,22): error TS2554: Expected 1 arguments, but got 0.
+src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(40,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(42,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/52-currying-hooks.problem.ts(38,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
+src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
   Type 'ReactElement<any, any>' is not assignable to type '{ __brand: \\"OPTION_TYPE\\"; } & ReactPortal'.
     Property '__brand' is missing in type 'ReactElement<any, any>' but required in type '{ __brand: \\"OPTION_TYPE\\"; }'.
-src/07-types-deep-dive/50-understanding-jsx-intrinsic-elements.explainer.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts(15,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts(15,32): error TS2694: Namespace 'React' has no exported member 'MyInterface'.
-src/07-types-deep-dive/52-declaration-merging-in-global-namespace.problem.ts(25,3): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-types-deep-dive/53-add-new-global-element.problem.tsx(14,3): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/53-add-new-global-element.problem.tsx(14,23): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(10,8): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
+src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts(15,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts(15,32): error TS2694: Namespace 'React' has no exported member 'MyInterface'.
+src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts(25,3): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/07-types-deep-dive/60-add-new-global-element.problem.tsx(14,3): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/60-add-new-global-element.problem.tsx(14,23): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(10,8): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
   Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(11,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(11,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
   Property 'testId' does not exist on type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
-src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(12,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(12,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
   Property 'testId' does not exist on type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
-src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(13,6): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(13,6): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
   Property 'testId' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
-src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(14,9): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(14,9): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
   Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx(15,12): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(15,12): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
   Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-src/08-advanced-patterns/56-required-context.problem.tsx(33,55): error TS2558: Expected 0 type arguments, but got 1.
-src/08-advanced-patterns/56-required-context.problem.tsx(37,57): error TS2558: Expected 0 type arguments, but got 1.
-src/08-advanced-patterns/56-required-context.problem.tsx(42,16): error TS2554: Expected 1 arguments, but got 0.
-src/08-advanced-patterns/56-required-context.problem.tsx(45,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/56-required-context.problem.tsx(53,17): error TS2554: Expected 1 arguments, but got 0.
-src/08-advanced-patterns/56-required-context.problem.tsx(56,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/56-required-context.problem.tsx(70,21): error TS2322: Type '{ name: string; }' is not assignable to type 'null'.
-src/08-advanced-patterns/56-required-context.problem.tsx(72,11): error TS2322: Type '{ primaryColor: string; }' is not assignable to type 'null'.
-src/08-advanced-patterns/57-render-props.problem.tsx(43,9): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/57-render-props.problem.tsx(44,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/58-forward-ref-with-generics.explainer.1.tsx(45,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/58-forward-ref-with-generics.explainer.2.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/58-forward-ref-with-generics.explainer.3.ts(52,21): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/59-hoc.problem.tsx(43,5): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(16,10): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(19,12): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(22,14): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(28,21): error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ text: (props: any) => Element; number: (props: any) => Element; password: (props: any) => Element; }'.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(28,32): error TS18046: 'props' is of type 'unknown'.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(29,25): error TS2698: Spread types may only be created from object types.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(34,5): error TS2322: Type '{ type: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
+src/08-advanced-patterns/63-lazy-load-component.problem.tsx(18,44): error TS2345: Argument of type 'unknown' is not assignable to parameter of type '() => Promise<{ default: ComponentType<any>; }>'.
+src/08-advanced-patterns/63-lazy-load-component.problem.tsx(28,62): error TS2322: Type '{ loader: () => Promise<typeof import(\\"/src/fake-external-lib/component\\")>; id: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
+  Property 'id' does not exist on type 'IntrinsicAttributes & Props'.
+src/08-advanced-patterns/63-lazy-load-component.problem.tsx(36,4): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/65-render-props.problem.tsx(43,9): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/65-render-props.problem.tsx(44,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/66-forward-ref-with-generics.explainer.1.tsx(45,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/66-forward-ref-with-generics.explainer.2.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/66-forward-ref-with-generics.explainer.3.ts(52,21): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx(30,19): error TS7006: Parameter 'row' implicitly has an 'any' type.
+src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx(31,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/68-hoc.problem.tsx(43,5): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(16,10): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(19,12): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(22,14): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(28,21): error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ text: (props: any) => Element; number: (props: any) => Element; password: (props: any) => Element; }'.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(28,32): error TS18046: 'props' is of type 'unknown'.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(29,25): error TS2698: Spread types may only be created from object types.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(34,5): error TS2322: Type '{ type: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
   Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(35,16): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(37,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(40,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(35,16): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(37,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(40,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
   Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx(41,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
+src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(41,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
   Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/61-as-prop.problem.tsx(37,5): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx(14,11): error TS2604: JSX element type 'Comp' does not have any construct or call signatures.
-src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx(14,11): error TS2786: 'Comp' cannot be used as a JSX component.
+src/08-advanced-patterns/70-as-prop.problem.tsx(37,5): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx(14,11): error TS2604: JSX element type 'Comp' does not have any construct or call signatures.
+src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx(14,11): error TS2786: 'Comp' cannot be used as a JSX component.
   Its type 'unknown' is not a valid JSX element type.
-src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx(21,20): error TS2322: Type '{ as: (props: { href: string; children?: ReactNode; }) => Element; href: string; }' is not assignable to type 'IntrinsicAttributes & { as: unknown; }'.
+src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx(21,20): error TS2322: Type '{ as: (props: { href: string; children?: ReactNode; }) => Element; href: string; }' is not assignable to type 'IntrinsicAttributes & { as: unknown; }'.
   Property 'href' does not exist on type 'IntrinsicAttributes & { as: unknown; }'.
-src/09-external-libraries/64-react-hook-form-wrapper.problem.tsx(29,3): error TS2578: Unused '@ts-expect-error' directive.
-src/09-external-libraries/64-react-hook-form-wrapper.problem.tsx(42,5): error TS2344: Type 'boolean' does not satisfy the constraint 'true'.
-src/09-external-libraries/65-react-select.problem.tsx(10,24): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/09-external-libraries/65-react-select.problem.tsx(33,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
-src/09-external-libraries/65-react-select.problem.tsx(36,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/65-react-select.problem.tsx(43,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
-src/09-external-libraries/65-react-select.problem.tsx(45,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/67-react-query-wrapper.problem.ts(30,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/67-react-query-wrapper.problem.ts(44,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/67-react-query-wrapper.problem.ts(50,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/72-as-prop-with-default.problem.tsx(10,11): error TS2322: Type 'Omit<{ as: T; } & ComponentPropsWithoutRef<T>, \\"as\\">' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<T, any>'.
+  Type 'Omit<{ as: T; } & ComponentPropsWithoutRef<T>, \\"as\\">' is not assignable to type 'LibraryManagedAttributes<T, any>'.
+src/08-advanced-patterns/72-as-prop-with-default.problem.tsx(14,2): error TS2741: Property 'as' is missing in type '{ href: string; }' but required in type '{ as: ElementType<any>; }'.
+src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(29,3): error TS2578: Unused '@ts-expect-error' directive.
+src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(42,5): error TS2344: Type 'boolean' does not satisfy the constraint 'true'.
+src/09-external-libraries/75-react-select.problem.tsx(10,24): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/09-external-libraries/75-react-select.problem.tsx(33,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
+src/09-external-libraries/75-react-select.problem.tsx(36,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/75-react-select.problem.tsx(43,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
+src/09-external-libraries/75-react-select.problem.tsx(45,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/77-react-query-wrapper.problem.ts(30,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/77-react-query-wrapper.problem.ts(44,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/77-react-query-wrapper.problem.ts(50,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 ,"
 `;
 
@@ -670,74 +688,44 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/33.5-type-helpers.problem.tsx",
-      "name": "/src/05-generics/33.5-type-helpers.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/33.6-type-helpers-with-constraints.problem.tsx",
-      "name": "/src/05-generics/33.6-type-helpers-with-constraints.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/34-generic-props.problem.tsx",
-      "name": "/src/05-generics/34-generic-props.problem.tsx",
+      "message": "No test found in suite src/05-generics/34-type-helpers.problem.tsx",
+      "name": "/src/05-generics/34-type-helpers.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/34-generic-props.solution.tsx",
-      "name": "/src/05-generics/34-generic-props.solution.tsx",
+      "message": "No test found in suite src/05-generics/34-type-helpers.solution.tsx",
+      "name": "/src/05-generics/34-type-helpers.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/35-generic-hooks.problem.ts",
+      "message": "No test found in suite src/05-generics/35-type-helpers-2.problem.tsx",
+      "name": "/src/05-generics/35-type-helpers-2.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/35-generic-hooks.solution.1.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/35-generic-hooks.solution.2.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/35-generic-hooks.solution.3.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/35-generic-hooks.solution.4.ts",
+      "message": "No test found in suite src/05-generics/35-type-helpers-2.solution.tsx",
+      "name": "/src/05-generics/35-type-helpers-2.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/35-generic-hooks.solution.5.ts",
+      "message": "No test found in suite src/05-generics/36-type-helpers-with-constraints.problem.tsx",
+      "name": "/src/05-generics/36-type-helpers-with-constraints.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "React is not defined",
-      "name": "/src/05-generics/35.5-generic-class-components.problem.tsx",
+      "message": "No test found in suite src/05-generics/36-type-helpers-with-constraints.solution.1.tsx",
+      "name": "/src/05-generics/36-type-helpers-with-constraints.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "React is not defined",
-      "name": "/src/05-generics/35.5-generic-class-components.solution.tsx",
+      "message": "No test found in suite src/05-generics/36-type-helpers-with-constraints.solution.2.tsx",
+      "name": "/src/05-generics/36-type-helpers-with-constraints.solution.2.tsx",
       "status": "passed",
     },
     {
@@ -762,7 +750,7 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
         },
       ],
       "message": "",
-      "name": "/src/05-generics/36-generic-localstorage-hook.problem.ts",
+      "name": "/src/05-generics/37-generic-localstorage-hook.problem.ts",
       "status": "passed",
     },
     {
@@ -787,403 +775,505 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
         },
       ],
       "message": "",
-      "name": "/src/05-generics/36-generic-localstorage-hook.solution.ts",
+      "name": "/src/05-generics/37-generic-localstorage-hook.solution.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/05-generics/38-generic-hooks.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx",
-      "name": "/src/05-generics/37-generic-inference-through-multiple-helpers.problem.tsx",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/05-generics/38-generic-hooks.solution.1.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/37-generic-inference-through-multiple-helpers.solution.tsx",
-      "name": "/src/05-generics/37-generic-inference-through-multiple-helpers.solution.tsx",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/05-generics/38-generic-hooks.solution.2.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/37.2-inference-flow-with-constraints.problem.ts",
+      "name": "/src/05-generics/38-generic-hooks.solution.3.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/37.2-inference-flow-with-constraints.solution.ts",
+      "name": "/src/05-generics/38-generic-hooks.solution.4.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/37.5-intro-to-const-generics.problem.tsx",
-      "name": "/src/05-generics/37.5-intro-to-const-generics.problem.tsx",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/05-generics/38-generic-hooks.solution.5.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/38-button-group.problem.tsx",
-      "name": "/src/05-generics/38-button-group.problem.tsx",
+      "message": "No test found in suite src/05-generics/39-generic-props.problem.tsx",
+      "name": "/src/05-generics/39-generic-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/38-button-group.solution.1.tsx",
-      "name": "/src/05-generics/38-button-group.solution.1.tsx",
+      "message": "No test found in suite src/05-generics/39-generic-props.solution.tsx",
+      "name": "/src/05-generics/39-generic-props.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/38-button-group.solution.2.tsx",
-      "name": "/src/05-generics/38-button-group.solution.2.tsx",
+      "message": "React is not defined",
+      "name": "/src/05-generics/40-generic-class-components.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/39-lazy-load-component.problem.tsx",
-      "name": "/src/05-generics/39-lazy-load-component.problem.tsx",
+      "message": "React is not defined",
+      "name": "/src/05-generics/40-generic-class-components.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/39-lazy-load-component.solution.tsx",
-      "name": "/src/05-generics/39-lazy-load-component.solution.tsx",
+      "message": "No test found in suite src/05-generics/41-passing-types-to-components.problem.tsx",
+      "name": "/src/05-generics/41-passing-types-to-components.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/40-generics-vs-discriminated-unions.problem.tsx",
-      "name": "/src/05-generics/40-generics-vs-discriminated-unions.problem.tsx",
+      "message": "No test found in suite src/05-generics/41-passing-types-to-components.solution.tsx",
+      "name": "/src/05-generics/41-passing-types-to-components.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/05-generics/40-generics-vs-discriminated-unions.solution.tsx",
-      "name": "/src/05-generics/40-generics-vs-discriminated-unions.solution.tsx",
+      "message": "No test found in suite src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx",
+      "name": "/src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx",
+      "name": "/src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/42-passing-types-to-components.problem.tsx",
+      "name": "/src/05-generics/42-passing-types-to-components.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/41-tuple-return-type.problem.ts",
+      "name": "/src/05-generics/43-inference-flow-with-constraints.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/41-tuple-return-type.solution.1.ts",
+      "name": "/src/05-generics/43-inference-flow-with-constraints.solution.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/44-generics-vs-discriminated-unions.problem.tsx",
+      "name": "/src/05-generics/44-generics-vs-discriminated-unions.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/05-generics/44-generics-vs-discriminated-unions.solution.tsx",
+      "name": "/src/05-generics/44-generics-vs-discriminated-unions.solution.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/06-advanced-hooks/45-tuple-return-type.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/41-tuple-return-type.solution.2.ts",
+      "name": "/src/06-advanced-hooks/45-tuple-return-type.solution.1.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/42-unions-in-usestate.problem.tsx",
-      "name": "/src/06-advanced-hooks/42-unions-in-usestate.problem.tsx",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "/src/06-advanced-hooks/45-tuple-return-type.solution.2.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/42-unions-in-usestate.solution.tsx",
-      "name": "/src/06-advanced-hooks/42-unions-in-usestate.solution.tsx",
+      "message": "No test found in suite src/06-advanced-hooks/46-required-context.problem.tsx",
+      "name": "/src/06-advanced-hooks/46-required-context.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx",
-      "name": "/src/06-advanced-hooks/43-discriminated-unions-in-usestate.problem.tsx",
+      "message": "No test found in suite src/06-advanced-hooks/46-required-context.solution.1.tsx",
+      "name": "/src/06-advanced-hooks/46-required-context.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/43-discriminated-unions-in-usestate.solution.tsx",
-      "name": "/src/06-advanced-hooks/43-discriminated-unions-in-usestate.solution.tsx",
+      "message": "No test found in suite src/06-advanced-hooks/46-required-context.solution.2.tsx",
+      "name": "/src/06-advanced-hooks/46-required-context.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx",
-      "name": "/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.problem.tsx",
+      "message": "No test found in suite src/06-advanced-hooks/47-unions-in-usestate.problem.tsx",
+      "name": "/src/06-advanced-hooks/47-unions-in-usestate.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx",
-      "name": "/src/06-advanced-hooks/44-discriminated-tuples-from-custom-hooks.solution.tsx",
+      "message": "No test found in suite src/06-advanced-hooks/47-unions-in-usestate.solution.tsx",
+      "name": "/src/06-advanced-hooks/47-unions-in-usestate.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/45-use-state-overloads.problem.ts",
-      "name": "/src/06-advanced-hooks/45-use-state-overloads.problem.ts",
+      "message": "No test found in suite src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx",
+      "name": "/src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/45-use-state-overloads.solution.1.ts",
-      "name": "/src/06-advanced-hooks/45-use-state-overloads.solution.1.ts",
+      "message": "No test found in suite src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx",
+      "name": "/src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/45-use-state-overloads.solution.2.ts",
-      "name": "/src/06-advanced-hooks/45-use-state-overloads.solution.2.ts",
+      "message": "No test found in suite src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx",
+      "name": "/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx",
+      "name": "/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/50-use-state-overloads.problem.ts",
+      "name": "/src/06-advanced-hooks/50-use-state-overloads.problem.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/50-use-state-overloads.solution.1.ts",
+      "name": "/src/06-advanced-hooks/50-use-state-overloads.solution.1.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/50-use-state-overloads.solution.2.ts",
+      "name": "/src/06-advanced-hooks/50-use-state-overloads.solution.2.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/46-function-overloads-in-hooks.problem.ts",
+      "name": "/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/46-function-overloads-in-hooks.solution.1.ts",
+      "name": "/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/46-function-overloads-in-hooks.solution.2.ts",
+      "name": "/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/52-currying-hooks.problem.ts",
+      "name": "/src/06-advanced-hooks/52-currying-hooks.problem.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/06-advanced-hooks/52-currying-hooks.solution.ts",
+      "name": "/src/06-advanced-hooks/52-currying-hooks.solution.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "React is not defined",
+      "name": "/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx",
+      "name": "/src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx",
+      "name": "/src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx",
+      "name": "/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "React is not defined",
-      "name": "/src/07-types-deep-dive/47-understand-react-namespace-export.explainer.ts",
+      "name": "/src/07-types-deep-dive/57-react-component-type.explainer.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts",
+      "name": "/src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/48-understanding-jsx-element.explainer.tsx",
-      "name": "/src/07-types-deep-dive/48-understanding-jsx-element.explainer.tsx",
+      "message": "No test found in suite src/07-types-deep-dive/58-appending-to-global-namespace.solution.ts",
+      "name": "/src/07-types-deep-dive/58-appending-to-global-namespace.solution.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/49-strongly-typing-children.explainer.tsx",
-      "name": "/src/07-types-deep-dive/49-strongly-typing-children.explainer.tsx",
+      "message": "No test found in suite src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts",
+      "name": "/src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/50-understanding-jsx-intrinsic-elements.explainer.tsx",
-      "name": "/src/07-types-deep-dive/50-understanding-jsx-intrinsic-elements.explainer.tsx",
+      "message": "No test found in suite src/07-types-deep-dive/59-declaration-merging-in-global-namespace.solution.ts",
+      "name": "/src/07-types-deep-dive/59-declaration-merging-in-global-namespace.solution.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts",
-      "name": "/src/07-types-deep-dive/51-appending-to-global-namespace.problem.ts",
+      "message": "No test found in suite src/07-types-deep-dive/60-add-new-global-element.problem.tsx",
+      "name": "/src/07-types-deep-dive/60-add-new-global-element.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/51-appending-to-global-namespace.solution.ts",
-      "name": "/src/07-types-deep-dive/51-appending-to-global-namespace.solution.ts",
+      "message": "No test found in suite src/07-types-deep-dive/60-add-new-global-element.solution.tsx",
+      "name": "/src/07-types-deep-dive/60-add-new-global-element.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/52-declaration-merging-in-global-namespace.problem.ts",
-      "name": "/src/07-types-deep-dive/52-declaration-merging-in-global-namespace.problem.ts",
+      "message": "No test found in suite src/07-types-deep-dive/61-html-attributes.explainer.tsx",
+      "name": "/src/07-types-deep-dive/61-html-attributes.explainer.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/52-declaration-merging-in-global-namespace.solution.ts",
-      "name": "/src/07-types-deep-dive/52-declaration-merging-in-global-namespace.solution.ts",
+      "message": "No test found in suite src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx",
+      "name": "/src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/53-add-new-global-element.problem.tsx",
-      "name": "/src/07-types-deep-dive/53-add-new-global-element.problem.tsx",
+      "message": "No test found in suite src/07-types-deep-dive/62-add-attribute-to-all-elements.solution.tsx",
+      "name": "/src/07-types-deep-dive/62-add-attribute-to-all-elements.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/53-add-new-global-element.solution.tsx",
-      "name": "/src/07-types-deep-dive/53-add-new-global-element.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/63-lazy-load-component.problem.tsx",
+      "name": "/src/08-advanced-patterns/63-lazy-load-component.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/54-html-attributes.explainer.tsx",
-      "name": "/src/07-types-deep-dive/54-html-attributes.explainer.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/63-lazy-load-component.solution.tsx",
+      "name": "/src/08-advanced-patterns/63-lazy-load-component.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx",
-      "name": "/src/07-types-deep-dive/55-add-attribute-to-all-elements.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/64-const-generics-in-generic-components.problem.tsx",
+      "name": "/src/08-advanced-patterns/64-const-generics-in-generic-components.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/55-add-attribute-to-all-elements.solution.tsx",
-      "name": "/src/07-types-deep-dive/55-add-attribute-to-all-elements.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/65-render-props.problem.tsx",
+      "name": "/src/08-advanced-patterns/65-render-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/56-required-context.problem.tsx",
-      "name": "/src/08-advanced-patterns/56-required-context.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/65-render-props.solution.tsx",
+      "name": "/src/08-advanced-patterns/65-render-props.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/56-required-context.solution.1.tsx",
-      "name": "/src/08-advanced-patterns/56-required-context.solution.1.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-with-generics.explainer.1.tsx",
+      "name": "/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/56-required-context.solution.2.tsx",
-      "name": "/src/08-advanced-patterns/56-required-context.solution.2.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-with-generics.explainer.2.tsx",
+      "name": "/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/57-render-props.problem.tsx",
-      "name": "/src/08-advanced-patterns/57-render-props.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-with-generics.explainer.3.ts",
+      "name": "/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.3.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/57-render-props.solution.tsx",
-      "name": "/src/08-advanced-patterns/57-render-props.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx",
+      "name": "/src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/58-forward-ref-with-generics.explainer.1.tsx",
-      "name": "/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.1.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/67-forward-ref-as-local-function.solution.tsx",
+      "name": "/src/08-advanced-patterns/67-forward-ref-as-local-function.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/58-forward-ref-with-generics.explainer.2.tsx",
-      "name": "/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.2.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/68-hoc.problem.tsx",
+      "name": "/src/08-advanced-patterns/68-hoc.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/58-forward-ref-with-generics.explainer.3.ts",
-      "name": "/src/08-advanced-patterns/58-forward-ref-with-generics.explainer.3.ts",
+      "message": "No test found in suite src/08-advanced-patterns/68-hoc.solution.tsx",
+      "name": "/src/08-advanced-patterns/68-hoc.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/59-hoc.problem.tsx",
-      "name": "/src/08-advanced-patterns/59-hoc.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx",
+      "name": "/src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/59-hoc.solution.tsx",
-      "name": "/src/08-advanced-patterns/59-hoc.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/69-record-of-components-with-same-props.solution.1.tsx",
+      "name": "/src/08-advanced-patterns/69-record-of-components-with-same-props.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx",
-      "name": "/src/08-advanced-patterns/60-record-of-components-with-same-props.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/69-record-of-components-with-same-props.solution.2.tsx",
+      "name": "/src/08-advanced-patterns/69-record-of-components-with-same-props.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/60-record-of-components-with-same-props.solution.1.tsx",
-      "name": "/src/08-advanced-patterns/60-record-of-components-with-same-props.solution.1.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/70-as-prop.problem.tsx",
+      "name": "/src/08-advanced-patterns/70-as-prop.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/60-record-of-components-with-same-props.solution.2.tsx",
-      "name": "/src/08-advanced-patterns/60-record-of-components-with-same-props.solution.2.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/70-as-prop.solution.1.tsx",
+      "name": "/src/08-advanced-patterns/70-as-prop.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/61-as-prop.problem.tsx",
-      "name": "/src/08-advanced-patterns/61-as-prop.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/70-as-prop.solution.2.tsx",
+      "name": "/src/08-advanced-patterns/70-as-prop.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/61-as-prop.solution.1.tsx",
-      "name": "/src/08-advanced-patterns/61-as-prop.solution.1.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx",
+      "name": "/src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/61-as-prop.solution.2.tsx",
-      "name": "/src/08-advanced-patterns/61-as-prop.solution.2.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx",
+      "name": "/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx",
-      "name": "/src/08-advanced-patterns/62-as-prop-with-custom-components.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/72-as-prop-with-default.problem.tsx",
+      "name": "/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/62-as-prop-with-custom-components.solution.tsx",
-      "name": "/src/08-advanced-patterns/62-as-prop-with-custom-components.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/72-as-prop-with-default.solution.tsx",
+      "name": "/src/08-advanced-patterns/72-as-prop-with-default.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "/src/09-external-libraries/63-react-hook-form.explainer.tsx",
+      "name": "/src/09-external-libraries/73-react-hook-form.explainer.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "/src/09-external-libraries/64-react-hook-form-wrapper.problem.tsx",
+      "name": "/src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "/src/09-external-libraries/64-react-hook-form-wrapper.solution.tsx",
+      "name": "/src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/09-external-libraries/65-react-select.problem.tsx",
-      "name": "/src/09-external-libraries/65-react-select.problem.tsx",
+      "message": "No test found in suite src/09-external-libraries/75-react-select.problem.tsx",
+      "name": "/src/09-external-libraries/75-react-select.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/09-external-libraries/65-react-select.solution.tsx",
-      "name": "/src/09-external-libraries/65-react-select.solution.tsx",
+      "message": "No test found in suite src/09-external-libraries/75-react-select.solution.tsx",
+      "name": "/src/09-external-libraries/75-react-select.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "/src/09-external-libraries/66-react-query.explainer.ts",
+      "name": "/src/09-external-libraries/76-react-query.explainer.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "/src/09-external-libraries/67-react-query-wrapper.problem.ts",
+      "name": "/src/09-external-libraries/77-react-query-wrapper.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "/src/09-external-libraries/67-react-query-wrapper.solution.ts",
+      "name": "/src/09-external-libraries/77-react-query-wrapper.solution.ts",
       "status": "passed",
     },
   ],

From d4f97d26da9e9f24f3d854d42b396a558eff02c2 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 10:50:27 +0100
Subject: [PATCH 073/165] Added moduleDetection: force

---
 tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tsconfig.json b/tsconfig.json
index d9a0299..9495bf4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "moduleResolution": "node",
     "noEmit": true,
     "isolatedModules": true,
+    "moduleDetection": "force",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,

From 0b18aed1f6a277bc601ce9daa7a25448718795be Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 13:58:16 +0100
Subject: [PATCH 074/165] Added export to 53

---
 .../53-understand-react-namespace-export.explainer.ts          | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
index 824b115..b842aa4 100644
--- a/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
+++ b/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
@@ -3,6 +3,7 @@
  */
 
 // 1. What is the React namespace?
+// 1a. Why can it be accessed globally as a type?
 type Example = React.ReactNode;
 //             ^?
 
@@ -16,3 +17,5 @@ type Example = React.ReactNode;
  */
 const element = React.createElement("div");
 //              ^?
+
+export {};

From e28e9d53d77da61bb5fc29f1d0fcec27cbbfe00e Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 14:07:06 +0100
Subject: [PATCH 075/165] Added problem/solution

---
 ...erstand-react-namespace-export.problem.ts} |  0
 ...erstand-react-namespace-export.solution.ts | 21 +++++++++++++++++++
 2 files changed, 21 insertions(+)
 rename src/07-types-deep-dive/{53-understand-react-namespace-export.explainer.ts => 53-understand-react-namespace-export.problem.ts} (100%)
 create mode 100644 src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts

diff --git a/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts b/src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts
similarity index 100%
rename from src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts
rename to src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts
diff --git a/src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts b/src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts
new file mode 100644
index 0000000..b842aa4
--- /dev/null
+++ b/src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts
@@ -0,0 +1,21 @@
+/**
+ * Questions to answer:
+ */
+
+// 1. What is the React namespace?
+// 1a. Why can it be accessed globally as a type?
+type Example = React.ReactNode;
+//             ^?
+
+/**
+ * 2a. Most namespaces can't be used as values. So how come
+ * we can use React as a value here?
+ *
+ * HINT - we're adding LOTS of things to React's namespace in
+ * later exercises, so make sure when you go-to-definition you
+ * go to its original definition, in @types/react/index.d.ts.
+ */
+const element = React.createElement("div");
+//              ^?
+
+export {};

From 47a7581eb15f18b4e64e819fb18d5fcb03ce53c1 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 14:51:36 +0100
Subject: [PATCH 076/165] Updated snappyshotties

---
 scripts/tests/__snapshots__/all.test.ts.snap | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/scripts/tests/__snapshots__/all.test.ts.snap b/scripts/tests/__snapshots__/all.test.ts.snap
index 35cfd0f..c8ff6f7 100644
--- a/scripts/tests/__snapshots__/all.test.ts.snap
+++ b/scripts/tests/__snapshots__/all.test.ts.snap
@@ -1015,7 +1015,13 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     {
       "assertionResults": [],
       "message": "React is not defined",
-      "name": "/src/07-types-deep-dive/53-understand-react-namespace-export.explainer.ts",
+      "name": "/src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "React is not defined",
+      "name": "/src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts",
       "status": "passed",
     },
     {

From 47582330c72bb6c717a721535a8471998d3472d2 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 14:57:23 +0100
Subject: [PATCH 077/165] Fixed 53

---
 .../53-understand-react-namespace-export.problem.ts         | 6 +++---
 .../53-understand-react-namespace-export.solution.ts        | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts b/src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts
index b842aa4..9ef28a5 100644
--- a/src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts
+++ b/src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts
@@ -1,15 +1,15 @@
+import React from "react";
+
 /**
  * Questions to answer:
  */
 
 // 1. What is the React namespace?
-// 1a. Why can it be accessed globally as a type?
 type Example = React.ReactNode;
 //             ^?
 
 /**
- * 2a. Most namespaces can't be used as values. So how come
- * we can use React as a value here?
+ * 2. How come React can be used BOTH as a value and a type?
  *
  * HINT - we're adding LOTS of things to React's namespace in
  * later exercises, so make sure when you go-to-definition you
diff --git a/src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts b/src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts
index b842aa4..9ef28a5 100644
--- a/src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts
+++ b/src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts
@@ -1,15 +1,15 @@
+import React from "react";
+
 /**
  * Questions to answer:
  */
 
 // 1. What is the React namespace?
-// 1a. Why can it be accessed globally as a type?
 type Example = React.ReactNode;
 //             ^?
 
 /**
- * 2a. Most namespaces can't be used as values. So how come
- * we can use React as a value here?
+ * 2. How come React can be used BOTH as a value and a type?
  *
  * HINT - we're adding LOTS of things to React's namespace in
  * later exercises, so make sure when you go-to-definition you

From 591fe3092a396ed312ce661c9c6c7ad5b63ced35 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 15:05:36 +0100
Subject: [PATCH 078/165] Added problem/solution to 54

---
 ... 54-understanding-jsx-element.problem.tsx} |  0
 .../54-understanding-jsx-element.solution.tsx | 53 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 rename src/07-types-deep-dive/{54-understanding-jsx-element.explainer.tsx => 54-understanding-jsx-element.problem.tsx} (100%)
 create mode 100644 src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx

diff --git a/src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx b/src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx
rename to src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx
diff --git a/src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx b/src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx
new file mode 100644
index 0000000..6b8506f
--- /dev/null
+++ b/src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx
@@ -0,0 +1,53 @@
+/**
+ * 1. What's the difference between JSX.Element,
+ * React.ReactNode and React.ReactElement?
+ *
+ * CMD-click each of them to understand the difference.
+ */
+
+type ClickMe = React.ReactElement;
+type ClickMeToo = JSX.Element;
+type ClickMeThree = React.ReactNode;
+
+/**
+ * 2. What is the return type of this Component?
+ */
+const Component = () => {
+  return <div>Hello world</div>;
+};
+
+/**
+ * 3. Fun fact - this might break on your IDE! In
+ * TypeScript 5.0, this wouldn't work. But in TypeScript
+ * 5.1, it DOES work.
+ *
+ * If it's not working for you, try making your IDE use
+ * the 'workspace' version of TypeScript.
+ *
+ * https://stackoverflow.com/questions/39668731/what-typescript-version-is-visual-studio-code-using-how-to-update-it
+ */
+const Component2 = (): React.ReactNode => {
+  return <div></div>;
+};
+
+<>
+  <Component2 />
+</>;
+
+/**
+ * 4a. Why does this component NOT error...
+ */
+const Component3 = (): React.ReactElement => {
+  return <div></div>;
+};
+
+<>
+  <Component3 />
+</>;
+
+/**
+ * 4b. ...but this one does?
+ */
+const Component4 = (): React.ReactElement => {
+  return "hello!";
+};

From 952cc4e495694264cba0e8a907d820d31b9eee76 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 15:22:04 +0100
Subject: [PATCH 079/165] P/S'd 55

---
 ...> 55-strongly-typing-children.problem.tsx} |  0
 .../55-strongly-typing-children.solution.tsx  | 33 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 rename src/07-types-deep-dive/{55-strongly-typing-children.explainer.tsx => 55-strongly-typing-children.problem.tsx} (100%)
 create mode 100644 src/07-types-deep-dive/55-strongly-typing-children.solution.tsx

diff --git a/src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx b/src/07-types-deep-dive/55-strongly-typing-children.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx
rename to src/07-types-deep-dive/55-strongly-typing-children.problem.tsx
diff --git a/src/07-types-deep-dive/55-strongly-typing-children.solution.tsx b/src/07-types-deep-dive/55-strongly-typing-children.solution.tsx
new file mode 100644
index 0000000..1a89bd9
--- /dev/null
+++ b/src/07-types-deep-dive/55-strongly-typing-children.solution.tsx
@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+
+/**
+ * In this example we have a Select component. Through some magic, we're
+ * attempting to strongly type the children of the Select component so
+ * that you can only pass 'Option' elements to it.
+ *
+ * 1. Try to understand the type of OptionType. What's the __brand property
+ * for?
+ *
+ * 2. There's an error happening at <Option /> below. Why is that?
+ *
+ * 3. Try changing <Option /> to {Option()}. This appears to work. Why?
+ * And why is this NOT a good idea?
+ *
+ * 4. Is what we're attempting to do even possible?
+ */
+
+type OptionType = {
+  __brand: "OPTION_TYPE";
+} & ReactNode;
+
+const Option = () => {
+  return (<option></option>) as OptionType;
+};
+
+const Select = (props: { children: OptionType }) => {
+  return <select>{props.children}</select>;
+};
+
+<Select>
+  <Option />
+</Select>;

From 02fcb37753ee0bcdd5aa84669f23110d18335520 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 15:26:30 +0100
Subject: [PATCH 080/165] P/S

---
 ...anding-jsx-intrinsic-elements.problem.tsx} |  0
 ...anding-jsx-intrinsic-elements.solution.tsx | 30 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 rename src/07-types-deep-dive/{56-understanding-jsx-intrinsic-elements.explainer.tsx => 56-understanding-jsx-intrinsic-elements.problem.tsx} (100%)
 create mode 100644 src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx

diff --git a/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx b/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx
rename to src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx
diff --git a/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx b/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx
new file mode 100644
index 0000000..49419fe
--- /dev/null
+++ b/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx
@@ -0,0 +1,30 @@
+/**
+ * 1. What is JSX.IntrinsicElements? CMD-click on .IntrinsicElements below
+ * to go to its definition.
+ *
+ * Hint - remember to go to the original definition of JSX.IntrinsicElements
+ * in @types/react/index.d.ts.
+ */
+
+export type Example = JSX.IntrinsicElements;
+
+/**
+ * 2. What is the structure of JSX.IntrinsicElements? It appears to have the
+ * HTML attributes as properties, but what are the values?
+ *
+ * 3. Let's have some fun. Edit the file to add a new property to
+ * JSX.IntrinsicElements:
+ *
+ * interface IntrinsicElements {
+ *   // ...
+ *   myNewElement: {
+ *     foo: string;
+ *   }
+ * }
+ *
+ * Notice that the error below goes away!
+ *
+ * 4. Now change it back, before anyone notices.
+ */
+
+<myNewElement foo="123" />;

From 635d87c5585541d1b9eebdc01c51e072c5b4594e Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 15:52:18 +0100
Subject: [PATCH 081/165] Fixed 60 description

---
 src/07-types-deep-dive/60-add-new-global-element.problem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/07-types-deep-dive/60-add-new-global-element.problem.tsx b/src/07-types-deep-dive/60-add-new-global-element.problem.tsx
index d4241d3..a0b763d 100644
--- a/src/07-types-deep-dive/60-add-new-global-element.problem.tsx
+++ b/src/07-types-deep-dive/60-add-new-global-element.problem.tsx
@@ -7,7 +7,7 @@
  * which takes a required `id` attribute.
  *
  * Hint - you'll need to declaration merge with an existing
- * interface in the React namespace.
+ * interface in the JSX namespace.
  */
 
 <>

From ac5e74fffb4f16e98d1ac305f56e3c91097dd8a7 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 17 Jul 2023 15:57:21 +0100
Subject: [PATCH 082/165] P/S

---
 ...ner.tsx => 61-html-attributes.problem.tsx} |  0
 .../61-html-attributes.solution.tsx           | 24 +++++++++++++++++++
 2 files changed, 24 insertions(+)
 rename src/07-types-deep-dive/{61-html-attributes.explainer.tsx => 61-html-attributes.problem.tsx} (100%)
 create mode 100644 src/07-types-deep-dive/61-html-attributes.solution.tsx

diff --git a/src/07-types-deep-dive/61-html-attributes.explainer.tsx b/src/07-types-deep-dive/61-html-attributes.problem.tsx
similarity index 100%
rename from src/07-types-deep-dive/61-html-attributes.explainer.tsx
rename to src/07-types-deep-dive/61-html-attributes.problem.tsx
diff --git a/src/07-types-deep-dive/61-html-attributes.solution.tsx b/src/07-types-deep-dive/61-html-attributes.solution.tsx
new file mode 100644
index 0000000..77c80da
--- /dev/null
+++ b/src/07-types-deep-dive/61-html-attributes.solution.tsx
@@ -0,0 +1,24 @@
+/**
+ * 1. How does React know which HTML attributes can be passed
+ * to each HTML element?
+ *
+ * On which interfaces/types are they stored?
+ */
+
+/**
+ * 2. Try CMD-clicking on the 'div' below. What information
+ * does that give you?
+ */
+<div />;
+
+/**
+ * 3. Try CMD-clicking on the className prop below. What
+ * interface does it lead you to?
+ */
+<div className="foo" />;
+
+/**
+ * 4. Finally, try CMD-clicking on the 'href' prop below.
+ * What interface does it lead you to?
+ */
+<a href="/" />;

From 704e257fa6a3a8d8ebd757ac4c1dddb9a671ede2 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 11:09:01 +0100
Subject: [PATCH 083/165] WIP

---
 ...ward-ref-as-local-function.solution.1.tsx} |  0
 ...rward-ref-as-local-function.solution.2.tsx | 32 +++++++++++
 .../72.5-as-prop-with-forward-ref.problem.tsx | 37 ++++++++++++
 ...72.5-as-prop-with-forward-ref.solution.tsx | 57 +++++++++++++++++++
 4 files changed, 126 insertions(+)
 rename src/08-advanced-patterns/{67-forward-ref-as-local-function.solution.tsx => 67-forward-ref-as-local-function.solution.1.tsx} (100%)
 create mode 100644 src/08-advanced-patterns/67-forward-ref-as-local-function.solution.2.tsx
 create mode 100644 src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
 create mode 100644 src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx

diff --git a/src/08-advanced-patterns/67-forward-ref-as-local-function.solution.tsx b/src/08-advanced-patterns/67-forward-ref-as-local-function.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-forward-ref-as-local-function.solution.tsx
rename to src/08-advanced-patterns/67-forward-ref-as-local-function.solution.1.tsx
diff --git a/src/08-advanced-patterns/67-forward-ref-as-local-function.solution.2.tsx b/src/08-advanced-patterns/67-forward-ref-as-local-function.solution.2.tsx
new file mode 100644
index 0000000..37ae3f0
--- /dev/null
+++ b/src/08-advanced-patterns/67-forward-ref-as-local-function.solution.2.tsx
@@ -0,0 +1,32 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+import { ForwardedRef, forwardRef } from "react";
+
+type FixedForwardRef = <T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+) => (props: P & React.RefAttributes<T>) => React.ReactNode;
+
+const fixedForwardRef = forwardRef as FixedForwardRef;
+
+type Props<T> = {
+  data: T[];
+  renderRow: (item: T) => React.ReactNode;
+};
+
+export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
+  return null;
+};
+
+const ForwardReffedTable = fixedForwardRef(Table);
+
+const Parent = () => {
+  return (
+    <ForwardReffedTable
+      data={["123"]}
+      renderRow={(row) => {
+        type test = Expect<Equal<typeof row, string>>;
+        return <div>123</div>;
+      }}
+    ></ForwardReffedTable>
+  );
+};
diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
new file mode 100644
index 0000000..fd330b7
--- /dev/null
+++ b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef, ElementType, forwardRef } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const Link = forwardRef(
+  <T extends ElementType<any> = "a">(
+    props: {
+      as?: T;
+    } & ComponentPropsWithoutRef<T>,
+  ) => {
+    const { as: Comp = "a", ...rest } = props;
+    return <Comp {...rest}></Comp>;
+  },
+);
+
+<Link href="/"></Link>;
+
+const Custom = (props: { thisIsRequired: boolean }) => {
+  return null;
+};
+
+<Link as={Custom} thisIsRequired />;
+
+// @ts-expect-error Property 'thisIsRequired' is missing
+<Link as={Custom} />;
+
+<Link
+  as="button"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
+  }}
+></Link>;
+
+<Link
+  as="div"
+  // @ts-expect-error: Property 'href' does not exist
+  href="awdawd"
+></Link>;
diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
new file mode 100644
index 0000000..33cd7e9
--- /dev/null
+++ b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
@@ -0,0 +1,57 @@
+import {
+  ComponentProps,
+  ComponentPropsWithoutRef,
+  ElementType,
+  forwardRef,
+  useRef,
+} from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+type FixedForwardRef = <T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+) => (props: P & React.RefAttributes<T>) => React.ReactNode;
+
+const fixedForwardRef = forwardRef as FixedForwardRef;
+
+export const Link = fixedForwardRef(
+  <T extends ElementType = "a">(
+    props: {
+      as?: T;
+    } & ComponentProps<T>,
+  ) => {
+    const { as = "a", ...rest } = props;
+    const Comp = as as any;
+    return <Comp {...rest}></Comp>;
+  },
+);
+
+const Test = () => {
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  return <Link as="a" href="/" ref={ref}></Link>;
+};
+
+const Custom = (props: { thisIsRequired: boolean }) => {
+  return null;
+};
+
+<Link as={Custom} thisIsRequired />;
+
+// @ts-expect-error Property 'thisIsRequired' is missing
+<Link as={Custom} />;
+
+const ref = useRef<HTMLButtonElement>(null);
+
+<Link
+  as="button"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
+  }}
+  ref={ref}
+></Link>;
+
+<Link
+  as="div"
+  // @ts-expect-error: Property 'href' does not exist
+  href="awdawd"
+></Link>;

From 757f4c5cf60e42f52460a00d6accc7a74701acf4 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 11:12:16 +0100
Subject: [PATCH 084/165] Changed ElementType

---
 scripts/tests/__snapshots__/all.test.ts.snap                    | 2 +-
 .../71-as-prop-with-custom-components.solution.tsx              | 2 +-
 src/08-advanced-patterns/72-as-prop-with-default.problem.tsx    | 2 +-
 src/08-advanced-patterns/72-as-prop-with-default.solution.tsx   | 2 +-
 .../72.5-as-prop-with-forward-ref.problem.tsx                   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/scripts/tests/__snapshots__/all.test.ts.snap b/scripts/tests/__snapshots__/all.test.ts.snap
index c8ff6f7..a1f75ec 100644
--- a/scripts/tests/__snapshots__/all.test.ts.snap
+++ b/scripts/tests/__snapshots__/all.test.ts.snap
@@ -211,7 +211,7 @@ src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx(21,20): e
   Property 'href' does not exist on type 'IntrinsicAttributes & { as: unknown; }'.
 src/08-advanced-patterns/72-as-prop-with-default.problem.tsx(10,11): error TS2322: Type 'Omit<{ as: T; } & ComponentPropsWithoutRef<T>, \\"as\\">' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<T, any>'.
   Type 'Omit<{ as: T; } & ComponentPropsWithoutRef<T>, \\"as\\">' is not assignable to type 'LibraryManagedAttributes<T, any>'.
-src/08-advanced-patterns/72-as-prop-with-default.problem.tsx(14,2): error TS2741: Property 'as' is missing in type '{ href: string; }' but required in type '{ as: ElementType<any>; }'.
+src/08-advanced-patterns/72-as-prop-with-default.problem.tsx(14,2): error TS2741: Property 'as' is missing in type '{ href: string; }' but required in type '{ as: ElementType; }'.
 src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(29,3): error TS2578: Unused '@ts-expect-error' directive.
 src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(42,5): error TS2344: Type 'boolean' does not satisfy the constraint 'true'.
 src/09-external-libraries/75-react-select.problem.tsx(10,24): error TS7006: Parameter 'props' implicitly has an 'any' type.
diff --git a/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx
index 6af9b70..fe09d73 100644
--- a/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx
+++ b/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentPropsWithoutRef, ElementType } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const Wrapper = <T extends ElementType<any>>(
+export const Wrapper = <T extends ElementType>(
   props: {
     as: T;
   } & ComponentPropsWithoutRef<T>,
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx b/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
index e016fee..3030150 100644
--- a/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const Link = <T extends ElementType<any>>(
+export const Link = <T extends ElementType>(
   props: {
     as: T;
   } & ComponentPropsWithoutRef<T>,
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.solution.tsx b/src/08-advanced-patterns/72-as-prop-with-default.solution.tsx
index a2fbc60..d6328e1 100644
--- a/src/08-advanced-patterns/72-as-prop-with-default.solution.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-default.solution.tsx
@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const Link = <T extends ElementType<any> = "a">(
+export const Link = <T extends ElementType = "a">(
   props: {
     as?: T;
   } & ComponentPropsWithoutRef<T>,
diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
index fd330b7..22c7d80 100644
--- a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
+++ b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef, ElementType, forwardRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 export const Link = forwardRef(
-  <T extends ElementType<any> = "a">(
+  <T extends ElementType = "a">(
     props: {
       as?: T;
     } & ComponentPropsWithoutRef<T>,

From 490ca0b34138a7ffcc173ed5232d6629631089ea Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 11:52:56 +0100
Subject: [PATCH 085/165] Possible forwardRef solution

---
 .../72-as-prop-with-default.problem.tsx       |  3 +-
 ...=> 72-as-prop-with-default.solution.1.tsx} |  3 +
 .../72-as-prop-with-default.solution.2.tsx    | 46 +++++++++++++
 .../72.5-as-prop-with-forward-ref.problem.tsx | 36 +++++-----
 ...72.5-as-prop-with-forward-ref.solution.tsx | 68 ++++++++++++-------
 5 files changed, 114 insertions(+), 42 deletions(-)
 rename src/08-advanced-patterns/{72-as-prop-with-default.solution.tsx => 72-as-prop-with-default.solution.1.tsx} (91%)
 create mode 100644 src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx

diff --git a/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx b/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
index 3030150..bd440f6 100644
--- a/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
@@ -10,7 +10,7 @@ export const Link = <T extends ElementType>(
   return <Comp {...rest}></Comp>;
 };
 
-// Should be a 'a' tag by default!
+// 1. Should be a 'a' tag by default!
 <Link href="/"></Link>;
 
 const Custom = (props: { thisIsRequired: boolean }) => {
@@ -22,6 +22,7 @@ const Custom = (props: { thisIsRequired: boolean }) => {
 // @ts-expect-error Property 'thisIsRequired' is missing
 <Link as={Custom} />;
 
+// 2. Should still give you autocomplete options!
 <Link
   as="button"
   onClick={(e) => {
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.solution.tsx b/src/08-advanced-patterns/72-as-prop-with-default.solution.1.tsx
similarity index 91%
rename from src/08-advanced-patterns/72-as-prop-with-default.solution.tsx
rename to src/08-advanced-patterns/72-as-prop-with-default.solution.1.tsx
index d6328e1..ea8f9e6 100644
--- a/src/08-advanced-patterns/72-as-prop-with-default.solution.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-default.solution.1.tsx
@@ -1,6 +1,9 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * This NEARLY works, but removes autocomplete for the 'as' prop.
+ */
 export const Link = <T extends ElementType = "a">(
   props: {
     as?: T;
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx b/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx
new file mode 100644
index 0000000..2e0fc12
--- /dev/null
+++ b/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx
@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * Function overloads are another solution which work. We're getting
+ * closer to extreme verbosity, but it works!
+ *
+ * Though - the error at the bottom of the file becomes much
+ * harder to read.
+ */
+
+function Link<T extends ElementType>(
+  props: {
+    as: T;
+  } & ComponentPropsWithoutRef<T>,
+): React.ReactNode;
+function Link(props: ComponentPropsWithoutRef<"a">): React.ReactNode;
+function Link<T extends ElementType>(
+  props: {
+    as?: T;
+  } & ComponentPropsWithoutRef<T>,
+) {
+  const { as: Comp = "a", ...rest } = props;
+  return <Comp {...rest}></Comp>;
+}
+
+<Link href="/"></Link>;
+
+const Custom = (props: { thisIsRequired: boolean }) => {
+  return null;
+};
+
+<Link as={Custom} thisIsRequired />;
+
+// @ts-expect-error Property 'thisIsRequired' is missing
+<Link as={Custom} />;
+
+<Link
+  as="button"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
+  }}
+></Link>;
+
+// @ts-expect-error: Property 'href' does not exist
+<Link as="div" href="awdawd"></Link>;
diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
index 22c7d80..ddb8f33 100644
--- a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
+++ b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
@@ -1,16 +1,23 @@
-import { ComponentPropsWithoutRef, ElementType, forwardRef } from "react";
+import {
+  ComponentPropsWithoutRef,
+  ElementType,
+  JSXElementConstructor,
+  forwardRef,
+} from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const Link = forwardRef(
-  <T extends ElementType = "a">(
-    props: {
-      as?: T;
-    } & ComponentPropsWithoutRef<T>,
-  ) => {
-    const { as: Comp = "a", ...rest } = props;
-    return <Comp {...rest}></Comp>;
-  },
-);
+function UnwrappedLink<
+  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
+>(
+  props: {
+    as?: T;
+  } & ComponentPropsWithoutRef<T>,
+) {
+  const { as: Comp = "a", ...rest } = props;
+  return <Comp {...rest}></Comp>;
+}
+
+const Link = forwardRef(UnwrappedLink);
 
 <Link href="/"></Link>;
 
@@ -30,8 +37,5 @@ const Custom = (props: { thisIsRequired: boolean }) => {
   }}
 ></Link>;
 
-<Link
-  as="div"
-  // @ts-expect-error: Property 'href' does not exist
-  href="awdawd"
-></Link>;
+// @ts-expect-error: Property 'href' does not exist
+<Link as="div" href="awdawd"></Link>;
diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
index 33cd7e9..2e9f2c0 100644
--- a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
+++ b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
@@ -1,7 +1,9 @@
 import {
   ComponentProps,
+  ComponentPropsWithRef,
   ComponentPropsWithoutRef,
   ElementType,
+  JSXElementConstructor,
   forwardRef,
   useRef,
 } from "react";
@@ -13,23 +15,28 @@ type FixedForwardRef = <T, P = {}>(
 
 const fixedForwardRef = forwardRef as FixedForwardRef;
 
-export const Link = fixedForwardRef(
-  <T extends ElementType = "a">(
-    props: {
-      as?: T;
-    } & ComponentProps<T>,
-  ) => {
-    const { as = "a", ...rest } = props;
-    const Comp = as as any;
-    return <Comp {...rest}></Comp>;
-  },
-);
-
-const Test = () => {
-  const ref = useRef<HTMLAnchorElement>(null);
-
-  return <Link as="a" href="/" ref={ref}></Link>;
-};
+type Constraint = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+
+type Props<
+  T extends Constraint,
+  P = ComponentProps<Constraint extends T ? "a" : T>,
+> = P;
+
+type Example = Props<"button">;
+
+function UnwrappedLink<T extends Constraint>(props: { as?: T } & Props<T>) {
+  const { as: Comp = "a", ...rest } = props;
+  return <Comp {...rest}></Comp>;
+}
+
+const Link = fixedForwardRef(UnwrappedLink);
+
+<Link
+  href="/"
+  onClick={(e) => {
+    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLAnchorElement>>>;
+  }}
+></Link>;
 
 const Custom = (props: { thisIsRequired: boolean }) => {
   return null;
@@ -40,18 +47,29 @@ const Custom = (props: { thisIsRequired: boolean }) => {
 // @ts-expect-error Property 'thisIsRequired' is missing
 <Link as={Custom} />;
 
-const ref = useRef<HTMLButtonElement>(null);
-
 <Link
   as="button"
   onClick={(e) => {
     type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
   }}
-  ref={ref}
 ></Link>;
 
-<Link
-  as="div"
-  // @ts-expect-error: Property 'href' does not exist
-  href="awdawd"
-></Link>;
+const ref = useRef<HTMLAnchorElement>(null);
+const wrongRef = useRef<HTMLDivElement>(null);
+
+Link({
+  ref,
+});
+
+Link({
+  as: Custom,
+  thisIsRequired: true,
+});
+
+Link({
+  // @ts-expect-error
+  ref: wrongRef,
+});
+
+// @ts-expect-error: Property 'href' does not exist
+<Link as="div" href="awdawd"></Link>;

From 9a8df08f2bf6500a12a74fa65a1c284b68cd07c2 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 12:46:44 +0100
Subject: [PATCH 086/165] WIP

---
 .../72.5-as-prop-with-forward-ref.problem.tsx |  1 -
 ...72.5-as-prop-with-forward-ref.solution.tsx | 48 ++++++++++---------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
index ddb8f33..d82101a 100644
--- a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
+++ b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
@@ -1,6 +1,5 @@
 import {
   ComponentPropsWithoutRef,
-  ElementType,
   JSXElementConstructor,
   forwardRef,
 } from "react";
diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
index 2e9f2c0..33c0a46 100644
--- a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
+++ b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
@@ -1,12 +1,4 @@
-import {
-  ComponentProps,
-  ComponentPropsWithRef,
-  ComponentPropsWithoutRef,
-  ElementType,
-  JSXElementConstructor,
-  forwardRef,
-  useRef,
-} from "react";
+import { ComponentPropsWithRef, ElementType, forwardRef, useRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 type FixedForwardRef = <T, P = {}>(
@@ -15,16 +7,11 @@ type FixedForwardRef = <T, P = {}>(
 
 const fixedForwardRef = forwardRef as FixedForwardRef;
 
-type Constraint = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
-
-type Props<
-  T extends Constraint,
-  P = ComponentProps<Constraint extends T ? "a" : T>,
-> = P;
-
-type Example = Props<"button">;
-
-function UnwrappedLink<T extends Constraint>(props: { as?: T } & Props<T>) {
+function UnwrappedLink<T extends ElementType>(
+  props: {
+    as?: T;
+  } & Omit<ComponentPropsWithRef<ElementType extends T ? "a" : T>, "as">,
+) {
   const { as: Comp = "a", ...rest } = props;
   return <Comp {...rest}></Comp>;
 }
@@ -38,9 +25,14 @@ const Link = fixedForwardRef(UnwrappedLink);
   }}
 ></Link>;
 
-const Custom = (props: { thisIsRequired: boolean }) => {
-  return null;
-};
+const Custom = forwardRef(
+  (
+    props: { thisIsRequired: boolean },
+    ref: React.ForwardedRef<HTMLAnchorElement>,
+  ) => {
+    return <a ref={ref} />;
+  },
+);
 
 <Link as={Custom} thisIsRequired />;
 
@@ -61,15 +53,27 @@ Link({
   ref,
 });
 
+Link({
+  // @ts-expect-error
+  ref: wrongRef,
+});
+
 Link({
   as: Custom,
   thisIsRequired: true,
+  ref: ref,
 });
 
 Link({
+  as: Custom,
+  thisIsRequired: true,
   // @ts-expect-error
   ref: wrongRef,
 });
 
 // @ts-expect-error: Property 'href' does not exist
 <Link as="div" href="awdawd"></Link>;
+
+Link({
+  as: "div",
+});

From 8c4fe9767be6e39c37b00901356146aed2871ee7 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 14:18:24 +0100
Subject: [PATCH 087/165] Got it working!

---
 .../72.5-as-prop-with-forward-ref.solution.tsx   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
index 33c0a46..10d646b 100644
--- a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
+++ b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef, ElementType, forwardRef, useRef } from "react";
+import { ComponentProps, ElementType, forwardRef, useRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 type FixedForwardRef = <T, P = {}>(
@@ -7,10 +7,20 @@ type FixedForwardRef = <T, P = {}>(
 
 const fixedForwardRef = forwardRef as FixedForwardRef;
 
-function UnwrappedLink<T extends ElementType>(
+type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any
+  ? Omit<T, TOmitted>
+  : never;
+
+function UnwrappedLink<
+  T extends ElementType,
+  Props extends DistributiveOmit<
+    ComponentProps<ElementType extends T ? "a" : T>,
+    "as"
+  >,
+>(
   props: {
     as?: T;
-  } & Omit<ComponentPropsWithRef<ElementType extends T ? "a" : T>, "as">,
+  } & Props,
 ) {
   const { as: Comp = "a", ...rest } = props;
   return <Comp {...rest}></Comp>;

From dbafb32ac7500b7a9cb6500dd4e0eef3e6048440 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 14:41:07 +0100
Subject: [PATCH 088/165] Finished 'as' work

---
 .../70-as-prop.problem.tsx                    |  62 +++++--
 .../70-as-prop.solution.1.tsx                 |  58 ++++++-
 .../70-as-prop.solution.2.tsx                 |  58 ++++++-
 ...as-prop-with-custom-components.problem.tsx |  54 +++++-
 ...s-prop-with-custom-components.solution.tsx |  59 ++++++-
 .../72-as-prop-with-default.problem.tsx       |  89 ++++++++--
 .../72-as-prop-with-default.solution.1.tsx    |  87 ++++++++--
 .../72-as-prop-with-default.solution.2.tsx    | 107 ++++++++----
 .../72.5-as-prop-with-forward-ref.problem.tsx | 122 +++++++++++--
 ...72.5-as-prop-with-forward-ref.solution.tsx | 162 ++++++++++++------
 10 files changed, 681 insertions(+), 177 deletions(-)

diff --git a/src/08-advanced-patterns/70-as-prop.problem.tsx b/src/08-advanced-patterns/70-as-prop.problem.tsx
index 8148328..e75a490 100644
--- a/src/08-advanced-patterns/70-as-prop.problem.tsx
+++ b/src/08-advanced-patterns/70-as-prop.problem.tsx
@@ -22,19 +22,59 @@
  * - Indexed access types
  */
 
+import { Equal, Expect } from "../helpers/type-utils";
+
 export const Wrapper = (props: any) => {
   const Comp = props.as;
   return <Comp {...(props as any)}></Comp>;
 };
 
-// Should work, and you should get autocomplete on the
-// props for the 'a' tag
-const example1 = <Wrapper as="a" href="awdawd"></Wrapper>;
-
-const example2 = (
-  <Wrapper
-    as="div"
-    // @ts-expect-error: Property 'href' does not exist
-    href="awdawd"
-  ></Wrapper>
-);
+/**
+ * Should work specifying a 'button'
+ */
+
+const Example1 = () => {
+  return (
+    <>
+      <Wrapper
+        as="button"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Wrapper>
+
+      <Wrapper
+        as="button"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLButtonElement>>
+          >;
+        }}
+      ></Wrapper>
+    </>
+  );
+};
+
+/**
+ * Should work specifying a 'div'
+ */
+
+const Example2 = () => {
+  return (
+    <>
+      <Wrapper
+        as="div"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Wrapper>
+
+      <Wrapper
+        as="div"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<Equal<typeof e, React.MouseEvent<HTMLDivElement>>>;
+        }}
+      ></Wrapper>
+    </>
+  );
+};
diff --git a/src/08-advanced-patterns/70-as-prop.solution.1.tsx b/src/08-advanced-patterns/70-as-prop.solution.1.tsx
index 33facb6..939c576 100644
--- a/src/08-advanced-patterns/70-as-prop.solution.1.tsx
+++ b/src/08-advanced-patterns/70-as-prop.solution.1.tsx
@@ -1,3 +1,5 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
 type AsProps = {
   [K in keyof JSX.IntrinsicElements]: {
     as: K;
@@ -9,12 +11,52 @@ export const Wrapper = (props: AsProps) => {
   return <Comp {...(props as any)}></Comp>;
 };
 
-const example1 = <Wrapper as="a" href="awdawd"></Wrapper>;
+/**
+ * Should work specifying a 'button'
+ */
+
+const Example1 = () => {
+  return (
+    <>
+      <Wrapper
+        as="button"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Wrapper>
+
+      <Wrapper
+        as="button"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLButtonElement>>
+          >;
+        }}
+      ></Wrapper>
+    </>
+  );
+};
 
-const example2 = (
-  <Wrapper
-    as="div"
-    // @ts-expect-error: Property 'href' does not exist
-    href="awdawd"
-  ></Wrapper>
-);
+/**
+ * Should work specifying a 'div'
+ */
+
+const Example2 = () => {
+  return (
+    <>
+      <Wrapper
+        as="div"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Wrapper>
+
+      <Wrapper
+        as="div"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<Equal<typeof e, React.MouseEvent<HTMLDivElement>>>;
+        }}
+      ></Wrapper>
+    </>
+  );
+};
diff --git a/src/08-advanced-patterns/70-as-prop.solution.2.tsx b/src/08-advanced-patterns/70-as-prop.solution.2.tsx
index 35b4b9a..d2729ad 100644
--- a/src/08-advanced-patterns/70-as-prop.solution.2.tsx
+++ b/src/08-advanced-patterns/70-as-prop.solution.2.tsx
@@ -1,3 +1,5 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
 export const Wrapper = <TAs extends keyof JSX.IntrinsicElements>(
   props: {
     as: TAs;
@@ -8,12 +10,52 @@ export const Wrapper = <TAs extends keyof JSX.IntrinsicElements>(
   return <Comp {...(props as any)}></Comp>;
 };
 
-const example1 = <Wrapper as="a" href="awdawd"></Wrapper>;
+/**
+ * Should work specifying a 'button'
+ */
+
+const Example1 = () => {
+  return (
+    <>
+      <Wrapper
+        as="button"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Wrapper>
+
+      <Wrapper
+        as="button"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLButtonElement>>
+          >;
+        }}
+      ></Wrapper>
+    </>
+  );
+};
 
-const example2 = (
-  <Wrapper
-    as="div"
-    // @ts-expect-error: Property 'href' does not exist
-    href="awdawd"
-  ></Wrapper>
-);
+/**
+ * Should work specifying a 'div'
+ */
+
+const Example2 = () => {
+  return (
+    <>
+      <Wrapper
+        as="div"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Wrapper>
+
+      <Wrapper
+        as="div"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<Equal<typeof e, React.MouseEvent<HTMLDivElement>>>;
+        }}
+      ></Wrapper>
+    </>
+  );
+};
diff --git a/src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx
index 19c5bf2..dc2c983 100644
--- a/src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx
+++ b/src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Equal, Expect } from "../helpers/type-utils";
 
 /**
  * This is a further extension of 'as'. This time, we can pass in
@@ -14,8 +15,55 @@ export const Wrapper = (props: { as: unknown }) => {
   return <Comp {...props}></Comp>;
 };
 
-const Link = (props: { href: string; children?: React.ReactNode }) => {
-  return <a href={props.href}>{props.children}</a>;
+/**
+ * Should work specifying a 'button'
+ */
+
+const Example1 = () => {
+  return (
+    <>
+      <Wrapper
+        as="button"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Wrapper>
+
+      <Wrapper
+        as="button"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLButtonElement>>
+          >;
+        }}
+      ></Wrapper>
+    </>
+  );
 };
 
-<Wrapper as={Link} href="awdawd"></Wrapper>;
+/**
+ * Should work with Custom components!
+ */
+
+const Custom = (
+  props: { thisIsRequired: boolean },
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+) => {
+  return <a ref={ref} />;
+};
+
+const Example2 = () => {
+  return (
+    <>
+      <Wrapper as={Custom} thisIsRequired />
+      <Wrapper
+        as={Custom}
+        // @ts-expect-error incorrectProp should not be allowed
+        incorrectProp
+      />
+
+      {/* @ts-expect-error thisIsRequired is not being passed */}
+      <Wrapper as={Custom}></Wrapper>
+    </>
+  );
+};
diff --git a/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx
index fe09d73..be6635a 100644
--- a/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx
+++ b/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx
@@ -10,14 +10,55 @@ export const Wrapper = <T extends ElementType>(
   return <Comp {...(props as any)}></Comp>;
 };
 
-const Link = (props: { href: string; children?: React.ReactNode }) => {
-  return <a href={props.href}>{props.children}</a>;
+/**
+ * Should work specifying a 'button'
+ */
+
+const Example1 = () => {
+  return (
+    <>
+      <Wrapper
+        as="button"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Wrapper>
+
+      <Wrapper
+        as="button"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLButtonElement>>
+          >;
+        }}
+      ></Wrapper>
+    </>
+  );
+};
+
+/**
+ * Should work with Custom components!
+ */
+
+const Custom = (
+  props: { thisIsRequired: boolean },
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+) => {
+  return <a ref={ref} />;
 };
 
-<Wrapper as={Link} href="awdawd" />;
-<Wrapper
-  as="button"
-  onClick={(e) => {
-    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
-  }}
-/>;
+const Example2 = () => {
+  return (
+    <>
+      <Wrapper as={Custom} thisIsRequired />
+      <Wrapper
+        as={Custom}
+        // @ts-expect-error incorrectProp should not be allowed
+        incorrectProp
+      />
+
+      {/* @ts-expect-error thisIsRequired is not being passed */}
+      <Wrapper as={Custom}></Wrapper>
+    </>
+  );
+};
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx b/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
index bd440f6..afd36e3 100644
--- a/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
@@ -10,28 +10,79 @@ export const Link = <T extends ElementType>(
   return <Comp {...rest}></Comp>;
 };
 
-// 1. Should be a 'a' tag by default!
-<Link href="/"></Link>;
+/**
+ * Should work without specifying 'as'
+ */
 
-const Custom = (props: { thisIsRequired: boolean }) => {
-  return null;
+const Example1 = () => {
+  return (
+    <>
+      <Link
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Link>
+
+      <Link
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLAnchorElement>>
+          >;
+        }}
+      ></Link>
+    </>
+  );
+};
+
+/**
+ * Should work specifying a 'button'
+ */
+
+const Example2 = () => {
+  return (
+    <>
+      <Link
+        as="button"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Link>
+
+      <Link
+        as="button"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLButtonElement>>
+          >;
+        }}
+      ></Link>
+    </>
+  );
 };
 
-<Link as={Custom} thisIsRequired />;
+/**
+ * Should work with Custom components!
+ */
 
-// @ts-expect-error Property 'thisIsRequired' is missing
-<Link as={Custom} />;
+const Custom = (
+  props: { thisIsRequired: boolean },
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+) => {
+  return <a ref={ref} />;
+};
 
-// 2. Should still give you autocomplete options!
-<Link
-  as="button"
-  onClick={(e) => {
-    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
-  }}
-></Link>;
+const Example3 = () => {
+  return (
+    <>
+      <Link as={Custom} thisIsRequired />
+      <Link
+        as={Custom}
+        // @ts-expect-error incorrectProp should not be allowed
+        incorrectProp
+      />
 
-<Link
-  as="div"
-  // @ts-expect-error: Property 'href' does not exist
-  href="awdawd"
-></Link>;
+      {/* @ts-expect-error thisIsRequired is not being passed */}
+      <Link as={Custom}></Link>
+    </>
+  );
+};
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.solution.1.tsx b/src/08-advanced-patterns/72-as-prop-with-default.solution.1.tsx
index ea8f9e6..67e196a 100644
--- a/src/08-advanced-patterns/72-as-prop-with-default.solution.1.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-default.solution.1.tsx
@@ -13,26 +13,79 @@ export const Link = <T extends ElementType = "a">(
   return <Comp {...rest}></Comp>;
 };
 
-<Link href="/"></Link>;
+/**
+ * Should work without specifying 'as'
+ */
+
+const Example1 = () => {
+  return (
+    <>
+      <Link
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Link>
+
+      <Link
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLAnchorElement>>
+          >;
+        }}
+      ></Link>
+    </>
+  );
+};
+
+/**
+ * Should work specifying a 'button'
+ */
+
+const Example2 = () => {
+  return (
+    <>
+      <Link
+        as="button"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Link>
 
-const Custom = (props: { thisIsRequired: boolean }) => {
-  return null;
+      <Link
+        as="button"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLButtonElement>>
+          >;
+        }}
+      ></Link>
+    </>
+  );
 };
 
-<Link as={Custom} thisIsRequired />;
+/**
+ * Should work with Custom components!
+ */
 
-// @ts-expect-error Property 'thisIsRequired' is missing
-<Link as={Custom} />;
+const Custom = (
+  props: { thisIsRequired: boolean },
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+) => {
+  return <a ref={ref} />;
+};
 
-<Link
-  as="button"
-  onClick={(e) => {
-    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
-  }}
-></Link>;
+const Example3 = () => {
+  return (
+    <>
+      <Link as={Custom} thisIsRequired />
+      <Link
+        as={Custom}
+        // @ts-expect-error incorrectProp should not be allowed
+        incorrectProp
+      />
 
-<Link
-  as="div"
-  // @ts-expect-error: Property 'href' does not exist
-  href="awdawd"
-></Link>;
+      {/* @ts-expect-error thisIsRequired is not being passed */}
+      <Link as={Custom}></Link>
+    </>
+  );
+};
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx b/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx
index 2e0fc12..0706e64 100644
--- a/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx
@@ -1,46 +1,91 @@
-import { ComponentPropsWithoutRef, ElementType } from "react";
+import { ComponentPropsWithoutRef, ElementType, useRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 /**
- * Function overloads are another solution which work. We're getting
- * closer to extreme verbosity, but it works!
- *
- * Though - the error at the bottom of the file becomes much
- * harder to read.
+ * This NEARLY works, but removes autocomplete for the 'as' prop.
  */
-
-function Link<T extends ElementType>(
-  props: {
-    as: T;
-  } & ComponentPropsWithoutRef<T>,
-): React.ReactNode;
-function Link(props: ComponentPropsWithoutRef<"a">): React.ReactNode;
-function Link<T extends ElementType>(
+export const Link = <T extends ElementType>(
   props: {
     as?: T;
-  } & ComponentPropsWithoutRef<T>,
-) {
+  } & ComponentPropsWithoutRef<ElementType extends T ? "a" : T>,
+) => {
   const { as: Comp = "a", ...rest } = props;
   return <Comp {...rest}></Comp>;
-}
+};
+
+/**
+ * Should work without specifying 'as'
+ */
+
+const Example1 = () => {
+  return (
+    <>
+      <Link
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Link>
+
+      <Link
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLAnchorElement>>
+          >;
+        }}
+      ></Link>
+    </>
+  );
+};
+
+/**
+ * Should work specifying a 'button'
+ */
 
-<Link href="/"></Link>;
+const Example2 = () => {
+  return (
+    <>
+      <Link
+        as="button"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Link>
 
-const Custom = (props: { thisIsRequired: boolean }) => {
-  return null;
+      <Link
+        as="button"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLButtonElement>>
+          >;
+        }}
+      ></Link>
+    </>
+  );
 };
 
-<Link as={Custom} thisIsRequired />;
+/**
+ * Should work with Custom components!
+ */
 
-// @ts-expect-error Property 'thisIsRequired' is missing
-<Link as={Custom} />;
+const Custom = (
+  props: { thisIsRequired: boolean },
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+) => {
+  return <a ref={ref} />;
+};
 
-<Link
-  as="button"
-  onClick={(e) => {
-    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
-  }}
-></Link>;
+const Example3 = () => {
+  return (
+    <>
+      <Link as={Custom} thisIsRequired />
+      <Link
+        as={Custom}
+        // @ts-expect-error incorrectProp should not be allowed
+        incorrectProp
+      />
 
-// @ts-expect-error: Property 'href' does not exist
-<Link as="div" href="awdawd"></Link>;
+      {/* @ts-expect-error thisIsRequired is not being passed */}
+      <Link as={Custom}></Link>
+    </>
+  );
+};
diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
index d82101a..84a08d5 100644
--- a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
+++ b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
@@ -2,6 +2,7 @@ import {
   ComponentPropsWithoutRef,
   JSXElementConstructor,
   forwardRef,
+  useRef,
 } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
@@ -18,23 +19,116 @@ function UnwrappedLink<
 
 const Link = forwardRef(UnwrappedLink);
 
-<Link href="/"></Link>;
+/**
+ * Should work without specifying 'as'
+ */
 
-const Custom = (props: { thisIsRequired: boolean }) => {
-  return null;
+const Example1 = () => {
+  const ref = useRef<HTMLAnchorElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <Link ref={ref} />
+
+      <Link
+        // @ts-expect-error incorrect ref
+        ref={wrongRef}
+      />
+
+      <Link
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Link>
+
+      <Link
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLAnchorElement>>
+          >;
+        }}
+      ></Link>
+    </>
+  );
 };
 
-<Link as={Custom} thisIsRequired />;
+/**
+ * Should work specifying a 'button'
+ */
 
-// @ts-expect-error Property 'thisIsRequired' is missing
-<Link as={Custom} />;
+const Example2 = () => {
+  const ref = useRef<HTMLButtonElement>(null);
+  const wrongRef = useRef<HTMLSpanElement>(null);
 
-<Link
-  as="button"
-  onClick={(e) => {
-    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
-  }}
-></Link>;
+  return (
+    <>
+      {/* CHECK ME! Check if autocomplete works on 'as' */}
+      <Link as="button" />
 
-// @ts-expect-error: Property 'href' does not exist
-<Link as="div" href="awdawd"></Link>;
+      <Link as="button" ref={ref} />
+
+      <Link
+        as="button"
+        // @ts-expect-error incorrect ref
+        ref={wrongRef}
+      />
+
+      <Link
+        as="button"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Link>
+
+      <Link
+        as="button"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLButtonElement>>
+          >;
+        }}
+      ></Link>
+    </>
+  );
+};
+
+/**
+ * Should work with Custom components!
+ */
+
+const Custom = forwardRef(
+  (
+    props: { thisIsRequired: boolean },
+    ref: React.ForwardedRef<HTMLAnchorElement>,
+  ) => {
+    return <a ref={ref} />;
+  },
+);
+
+const Example3 = () => {
+  const ref = useRef<HTMLAnchorElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
+  return (
+    <>
+      <Link as={Custom} thisIsRequired />
+      <Link
+        as={Custom}
+        // @ts-expect-error incorrectProp should not be allowed
+        incorrectProp
+      />
+
+      {/* @ts-expect-error thisIsRequired is not being passed */}
+      <Link as={Custom}></Link>
+
+      <Link as={Custom} ref={ref} thisIsRequired />
+
+      <Link
+        as={Custom}
+        // @ts-expect-error incorrect ref
+        ref={wrongRef}
+        thisIsRequired
+      />
+    </>
+  );
+};
diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
index 10d646b..04299c6 100644
--- a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
+++ b/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
@@ -11,16 +11,10 @@ type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any
   ? Omit<T, TOmitted>
   : never;
 
-function UnwrappedLink<
-  T extends ElementType,
-  Props extends DistributiveOmit<
-    ComponentProps<ElementType extends T ? "a" : T>,
-    "as"
-  >,
->(
+function UnwrappedLink<T extends ElementType>(
   props: {
     as?: T;
-  } & Props,
+  } & DistributiveOmit<ComponentProps<ElementType extends T ? "a" : T>, "as">,
 ) {
   const { as: Comp = "a", ...rest } = props;
   return <Comp {...rest}></Comp>;
@@ -28,12 +22,83 @@ function UnwrappedLink<
 
 const Link = fixedForwardRef(UnwrappedLink);
 
-<Link
-  href="/"
-  onClick={(e) => {
-    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLAnchorElement>>>;
-  }}
-></Link>;
+/**
+ * Should work without specifying 'as'
+ */
+
+const Example1 = () => {
+  const ref = useRef<HTMLAnchorElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <Link ref={ref} />
+
+      <Link
+        // @ts-expect-error incorrect ref
+        ref={wrongRef}
+      />
+
+      <Link
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Link>
+
+      <Link
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLAnchorElement>>
+          >;
+        }}
+      ></Link>
+    </>
+  );
+};
+
+/**
+ * Should work specifying a 'button'
+ */
+
+const Example2 = () => {
+  const ref = useRef<HTMLButtonElement>(null);
+  const wrongRef = useRef<HTMLSpanElement>(null);
+
+  return (
+    <>
+      {/* CHECK ME! Check if autocomplete works on 'as' */}
+      <Link as="button" />
+
+      <Link as="button" ref={ref} />
+
+      <Link
+        as="button"
+        // @ts-expect-error incorrect ref
+        ref={wrongRef}
+      />
+
+      <Link
+        as="button"
+        // @ts-expect-error doesNotExist is not a valid prop
+        doesNotExist
+      ></Link>
+
+      <Link
+        as="button"
+        // e should be inferred correctly
+        onClick={(e) => {
+          type test = Expect<
+            Equal<typeof e, React.MouseEvent<HTMLButtonElement>>
+          >;
+        }}
+      ></Link>
+    </>
+  );
+};
+
+/**
+ * Should work with Custom components!
+ */
 
 const Custom = forwardRef(
   (
@@ -44,46 +109,29 @@ const Custom = forwardRef(
   },
 );
 
-<Link as={Custom} thisIsRequired />;
-
-// @ts-expect-error Property 'thisIsRequired' is missing
-<Link as={Custom} />;
-
-<Link
-  as="button"
-  onClick={(e) => {
-    type test = Expect<Equal<typeof e, React.MouseEvent<HTMLButtonElement>>>;
-  }}
-></Link>;
-
-const ref = useRef<HTMLAnchorElement>(null);
-const wrongRef = useRef<HTMLDivElement>(null);
-
-Link({
-  ref,
-});
-
-Link({
-  // @ts-expect-error
-  ref: wrongRef,
-});
-
-Link({
-  as: Custom,
-  thisIsRequired: true,
-  ref: ref,
-});
-
-Link({
-  as: Custom,
-  thisIsRequired: true,
-  // @ts-expect-error
-  ref: wrongRef,
-});
-
-// @ts-expect-error: Property 'href' does not exist
-<Link as="div" href="awdawd"></Link>;
-
-Link({
-  as: "div",
-});
+const Example3 = () => {
+  const ref = useRef<HTMLAnchorElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
+  return (
+    <>
+      <Link as={Custom} thisIsRequired />
+      <Link
+        as={Custom}
+        // @ts-expect-error incorrectProp should not be allowed
+        incorrectProp
+      />
+
+      {/* @ts-expect-error thisIsRequired is not being passed */}
+      <Link as={Custom}></Link>
+
+      <Link as={Custom} ref={ref} thisIsRequired />
+
+      <Link
+        as={Custom}
+        // @ts-expect-error incorrect ref
+        ref={wrongRef}
+        thisIsRequired
+      />
+    </>
+  );
+};

From d680265035f50538beff7f814069b98a94cfe3b5 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 14:45:35 +0100
Subject: [PATCH 089/165] Various fixes

---
 .../72-as-prop-with-default.problem.tsx              |  4 ++--
 .../72-as-prop-with-default.solution.2.tsx           |  3 ---
 ...m.tsx => 73-as-prop-with-forward-ref.problem.tsx} | 12 +++++-------
 ....tsx => 73-as-prop-with-forward-ref.solution.tsx} |  4 ++++
 ...xplainer.tsx => 74-react-hook-form.explainer.tsx} |  0
 ...em.tsx => 75-react-hook-form-wrapper.problem.tsx} |  0
 ...n.tsx => 75-react-hook-form-wrapper.solution.tsx} |  0
 ...elect.problem.tsx => 76-react-select.problem.tsx} |  0
 ...ect.solution.tsx => 76-react-select.solution.tsx} |  0
 ...uery.explainer.ts => 77-react-query.explainer.ts} |  0
 ....problem.ts => 78-react-query-wrapper.problem.ts} |  0
 ...olution.ts => 78-react-query-wrapper.solution.ts} |  0
 12 files changed, 11 insertions(+), 12 deletions(-)
 rename src/08-advanced-patterns/{72.5-as-prop-with-forward-ref.problem.tsx => 73-as-prop-with-forward-ref.problem.tsx} (93%)
 rename src/08-advanced-patterns/{72.5-as-prop-with-forward-ref.solution.tsx => 73-as-prop-with-forward-ref.solution.tsx} (97%)
 rename src/09-external-libraries/{73-react-hook-form.explainer.tsx => 74-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{74-react-hook-form-wrapper.problem.tsx => 75-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{74-react-hook-form-wrapper.solution.tsx => 75-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{75-react-select.problem.tsx => 76-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{75-react-select.solution.tsx => 76-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{76-react-query.explainer.ts => 77-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{77-react-query-wrapper.problem.ts => 78-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{77-react-query-wrapper.solution.ts => 78-react-query-wrapper.solution.ts} (100%)

diff --git a/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx b/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
index afd36e3..9be70e8 100644
--- a/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
@@ -6,8 +6,8 @@ export const Link = <T extends ElementType>(
     as: T;
   } & ComponentPropsWithoutRef<T>,
 ) => {
-  const { as: Comp, ...rest } = props;
-  return <Comp {...rest}></Comp>;
+  const Comp = props.as;
+  return <Comp {...(props as any)}></Comp>;
 };
 
 /**
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx b/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx
index 0706e64..85d3dac 100644
--- a/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx
@@ -1,9 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType, useRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-/**
- * This NEARLY works, but removes autocomplete for the 'as' prop.
- */
 export const Link = <T extends ElementType>(
   props: {
     as?: T;
diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx b/src/08-advanced-patterns/73-as-prop-with-forward-ref.problem.tsx
similarity index 93%
rename from src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
rename to src/08-advanced-patterns/73-as-prop-with-forward-ref.problem.tsx
index 84a08d5..06d4c07 100644
--- a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.problem.tsx
+++ b/src/08-advanced-patterns/73-as-prop-with-forward-ref.problem.tsx
@@ -1,21 +1,19 @@
 import {
   ComponentPropsWithoutRef,
-  JSXElementConstructor,
+  ElementType,
   forwardRef,
   useRef,
 } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-function UnwrappedLink<
-  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
->(
+export const UnwrappedLink = <T extends ElementType>(
   props: {
     as?: T;
-  } & ComponentPropsWithoutRef<T>,
-) {
+  } & ComponentPropsWithoutRef<ElementType extends T ? "a" : T>,
+) => {
   const { as: Comp = "a", ...rest } = props;
   return <Comp {...rest}></Comp>;
-}
+};
 
 const Link = forwardRef(UnwrappedLink);
 
diff --git a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx b/src/08-advanced-patterns/73-as-prop-with-forward-ref.solution.tsx
similarity index 97%
rename from src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
rename to src/08-advanced-patterns/73-as-prop-with-forward-ref.solution.tsx
index 04299c6..9b5d9f2 100644
--- a/src/08-advanced-patterns/72.5-as-prop-with-forward-ref.solution.tsx
+++ b/src/08-advanced-patterns/73-as-prop-with-forward-ref.solution.tsx
@@ -1,12 +1,16 @@
 import { ComponentProps, ElementType, forwardRef, useRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
+// Added fixedForwardRef from a previous exercise
+
 type FixedForwardRef = <T, P = {}>(
   render: (props: P, ref: React.Ref<T>) => React.ReactNode,
 ) => (props: P & React.RefAttributes<T>) => React.ReactNode;
 
 const fixedForwardRef = forwardRef as FixedForwardRef;
 
+// Added a DistributiveOmit type
+
 type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any
   ? Omit<T, TOmitted>
   : never;
diff --git a/src/09-external-libraries/73-react-hook-form.explainer.tsx b/src/09-external-libraries/74-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/73-react-hook-form.explainer.tsx
rename to src/09-external-libraries/74-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/75-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/75-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/75-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/75-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/75-react-select.problem.tsx b/src/09-external-libraries/76-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/75-react-select.problem.tsx
rename to src/09-external-libraries/76-react-select.problem.tsx
diff --git a/src/09-external-libraries/75-react-select.solution.tsx b/src/09-external-libraries/76-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/75-react-select.solution.tsx
rename to src/09-external-libraries/76-react-select.solution.tsx
diff --git a/src/09-external-libraries/76-react-query.explainer.ts b/src/09-external-libraries/77-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/76-react-query.explainer.ts
rename to src/09-external-libraries/77-react-query.explainer.ts
diff --git a/src/09-external-libraries/77-react-query-wrapper.problem.ts b/src/09-external-libraries/78-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/77-react-query-wrapper.problem.ts
rename to src/09-external-libraries/78-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/77-react-query-wrapper.solution.ts b/src/09-external-libraries/78-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/77-react-query-wrapper.solution.ts
rename to src/09-external-libraries/78-react-query-wrapper.solution.ts

From 36ad22a3ea21a21ea8e5773df4206abbc6de92af Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 15:01:21 +0100
Subject: [PATCH 090/165] Added comment to 73

---
 src/08-advanced-patterns/68-hoc.solution.tsx               | 2 +-
 .../73-as-prop-with-forward-ref.problem.tsx                | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/08-advanced-patterns/68-hoc.solution.tsx b/src/08-advanced-patterns/68-hoc.solution.tsx
index 6254800..2cb7942 100644
--- a/src/08-advanced-patterns/68-hoc.solution.tsx
+++ b/src/08-advanced-patterns/68-hoc.solution.tsx
@@ -1,7 +1,7 @@
 import { Router, useRouter } from "fake-external-lib";
 
 export const withRouter = <TProps extends { router: Router }>(
-  Component: React.ComponentType<TProps>,
+  Component: React.FC<TProps>,
 ) => {
   const NewComponent = (props: Omit<TProps, "router">) => {
     const router = useRouter();
diff --git a/src/08-advanced-patterns/73-as-prop-with-forward-ref.problem.tsx b/src/08-advanced-patterns/73-as-prop-with-forward-ref.problem.tsx
index 06d4c07..bf28cd4 100644
--- a/src/08-advanced-patterns/73-as-prop-with-forward-ref.problem.tsx
+++ b/src/08-advanced-patterns/73-as-prop-with-forward-ref.problem.tsx
@@ -6,6 +6,13 @@ import {
 } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * FYI - this solution took me the best part of a whole day to find,
+ * and the help of several TS experts in the community.
+ *
+ * So, don't feel bad if you don't find it at all.
+ */
+
 export const UnwrappedLink = <T extends ElementType>(
   props: {
     as?: T;

From 5cc805de541db51b4d79760a014f22d9ec61afa4 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 15:31:03 +0100
Subject: [PATCH 091/165] Tweak

---
 src/08-advanced-patterns/63-lazy-load-component.problem.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/08-advanced-patterns/63-lazy-load-component.problem.tsx b/src/08-advanced-patterns/63-lazy-load-component.problem.tsx
index 9deb327..7fe3b5e 100644
--- a/src/08-advanced-patterns/63-lazy-load-component.problem.tsx
+++ b/src/08-advanced-patterns/63-lazy-load-component.problem.tsx
@@ -11,8 +11,10 @@ type Props = {
  * But it's not typed correctly, and it's not generic enough.
  * Fix the typing errors, and make it generic enough to support any component.
  *
- * Hint - React.ComponentProps will come in handy - as will a helper called
- * React.ComponentType.
+ * Hints:
+ *
+ * - You'll need to make this a generic component!
+ * - React.ComponentProps will come in handy, as will React.ComponentType
  */
 function LazyLoad({ loader, ...props }: Props) {
   const LazyComponent = useMemo(() => lazy(loader), [loader]);

From 3f4586b8b4bedf636fed60cabcc8ce4d4ab40370 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 15:42:35 +0100
Subject: [PATCH 092/165] Changed 63

---
 .../63-lazy-load-component.solution.tsx              | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/08-advanced-patterns/63-lazy-load-component.solution.tsx b/src/08-advanced-patterns/63-lazy-load-component.solution.tsx
index c36e4a2..fd52b96 100644
--- a/src/08-advanced-patterns/63-lazy-load-component.solution.tsx
+++ b/src/08-advanced-patterns/63-lazy-load-component.solution.tsx
@@ -1,10 +1,12 @@
-import { lazy, Suspense, useMemo } from "react";
+import { ComponentProps, ComponentType, lazy, Suspense, useMemo } from "react";
 
-type Props<C extends React.ComponentType<any>> = React.ComponentProps<C> & {
-  loader: () => Promise<{ default: C }>;
-};
+type Props<C extends ComponentType<any>> = {
+  loader: () => Promise<{
+    default: C;
+  }>;
+} & ComponentProps<C>;
 
-function LazyLoad<C extends React.ComponentType<any>>({
+function LazyLoad<C extends ComponentType<any>>({
   loader,
   ...props
 }: Props<C>) {

From 10c28d6d82b5dafbc2cc8bdd19034571d25d1e49 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 15:43:50 +0100
Subject: [PATCH 093/165] Removed const generics

---
 .../64-const-generics-in-generic-components.problem.tsx    | 7 -------
 ...ender-props.problem.tsx => 64-render-props.problem.tsx} | 0
 ...der-props.solution.tsx => 64-render-props.solution.tsx} | 0
 ....1.tsx => 65-forward-ref-with-generics.explainer.1.tsx} | 0
 ....2.tsx => 65-forward-ref-with-generics.explainer.2.tsx} | 0
 ...er.3.ts => 65-forward-ref-with-generics.explainer.3.ts} | 0
 ...em.tsx => 66-forward-ref-as-local-function.problem.tsx} | 0
 ...tsx => 66-forward-ref-as-local-function.solution.1.tsx} | 0
 ...tsx => 66-forward-ref-as-local-function.solution.2.tsx} | 0
 .../{68-hoc.problem.tsx => 67-hoc.problem.tsx}             | 0
 .../{68-hoc.solution.tsx => 67-hoc.solution.tsx}           | 0
 ...=> 68-record-of-components-with-same-props.problem.tsx} | 0
 ...68-record-of-components-with-same-props.solution.1.tsx} | 0
 ...68-record-of-components-with-same-props.solution.2.tsx} | 0
 .../{70-as-prop.problem.tsx => 69-as-prop.problem.tsx}     | 0
 ...70-as-prop.solution.1.tsx => 69-as-prop.solution.1.tsx} | 0
 ...70-as-prop.solution.2.tsx => 69-as-prop.solution.2.tsx} | 0
 ...m.tsx => 70-as-prop-with-custom-components.problem.tsx} | 0
 ....tsx => 70-as-prop-with-custom-components.solution.tsx} | 0
 ...ult.problem.tsx => 71-as-prop-with-default.problem.tsx} | 0
 ...lution.1.tsx => 71-as-prop-with-default.solution.1.tsx} | 0
 ...lution.2.tsx => 71-as-prop-with-default.solution.2.tsx} | 0
 ...problem.tsx => 72-as-prop-with-forward-ref.problem.tsx} | 0
 ...lution.tsx => 72-as-prop-with-forward-ref.solution.tsx} | 0
 ...form.explainer.tsx => 73-react-hook-form.explainer.tsx} | 0
 ....problem.tsx => 74-react-hook-form-wrapper.problem.tsx} | 0
 ...olution.tsx => 74-react-hook-form-wrapper.solution.tsx} | 0
 ...eact-select.problem.tsx => 75-react-select.problem.tsx} | 0
 ...ct-select.solution.tsx => 75-react-select.solution.tsx} | 0
 ...eact-query.explainer.ts => 76-react-query.explainer.ts} | 0
 ...rapper.problem.ts => 77-react-query-wrapper.problem.ts} | 0
 ...pper.solution.ts => 77-react-query-wrapper.solution.ts} | 0
 32 files changed, 7 deletions(-)
 delete mode 100644 src/08-advanced-patterns/64-const-generics-in-generic-components.problem.tsx
 rename src/08-advanced-patterns/{65-render-props.problem.tsx => 64-render-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{65-render-props.solution.tsx => 64-render-props.solution.tsx} (100%)
 rename src/08-advanced-patterns/{66-forward-ref-with-generics.explainer.1.tsx => 65-forward-ref-with-generics.explainer.1.tsx} (100%)
 rename src/08-advanced-patterns/{66-forward-ref-with-generics.explainer.2.tsx => 65-forward-ref-with-generics.explainer.2.tsx} (100%)
 rename src/08-advanced-patterns/{66-forward-ref-with-generics.explainer.3.ts => 65-forward-ref-with-generics.explainer.3.ts} (100%)
 rename src/08-advanced-patterns/{67-forward-ref-as-local-function.problem.tsx => 66-forward-ref-as-local-function.problem.tsx} (100%)
 rename src/08-advanced-patterns/{67-forward-ref-as-local-function.solution.1.tsx => 66-forward-ref-as-local-function.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{67-forward-ref-as-local-function.solution.2.tsx => 66-forward-ref-as-local-function.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{68-hoc.problem.tsx => 67-hoc.problem.tsx} (100%)
 rename src/08-advanced-patterns/{68-hoc.solution.tsx => 67-hoc.solution.tsx} (100%)
 rename src/08-advanced-patterns/{69-record-of-components-with-same-props.problem.tsx => 68-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{69-record-of-components-with-same-props.solution.1.tsx => 68-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{69-record-of-components-with-same-props.solution.2.tsx => 68-record-of-components-with-same-props.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{70-as-prop.problem.tsx => 69-as-prop.problem.tsx} (100%)
 rename src/08-advanced-patterns/{70-as-prop.solution.1.tsx => 69-as-prop.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{70-as-prop.solution.2.tsx => 69-as-prop.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{71-as-prop-with-custom-components.problem.tsx => 70-as-prop-with-custom-components.problem.tsx} (100%)
 rename src/08-advanced-patterns/{71-as-prop-with-custom-components.solution.tsx => 70-as-prop-with-custom-components.solution.tsx} (100%)
 rename src/08-advanced-patterns/{72-as-prop-with-default.problem.tsx => 71-as-prop-with-default.problem.tsx} (100%)
 rename src/08-advanced-patterns/{72-as-prop-with-default.solution.1.tsx => 71-as-prop-with-default.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{72-as-prop-with-default.solution.2.tsx => 71-as-prop-with-default.solution.2.tsx} (100%)
 rename src/08-advanced-patterns/{73-as-prop-with-forward-ref.problem.tsx => 72-as-prop-with-forward-ref.problem.tsx} (100%)
 rename src/08-advanced-patterns/{73-as-prop-with-forward-ref.solution.tsx => 72-as-prop-with-forward-ref.solution.tsx} (100%)
 rename src/09-external-libraries/{74-react-hook-form.explainer.tsx => 73-react-hook-form.explainer.tsx} (100%)
 rename src/09-external-libraries/{75-react-hook-form-wrapper.problem.tsx => 74-react-hook-form-wrapper.problem.tsx} (100%)
 rename src/09-external-libraries/{75-react-hook-form-wrapper.solution.tsx => 74-react-hook-form-wrapper.solution.tsx} (100%)
 rename src/09-external-libraries/{76-react-select.problem.tsx => 75-react-select.problem.tsx} (100%)
 rename src/09-external-libraries/{76-react-select.solution.tsx => 75-react-select.solution.tsx} (100%)
 rename src/09-external-libraries/{77-react-query.explainer.ts => 76-react-query.explainer.ts} (100%)
 rename src/09-external-libraries/{78-react-query-wrapper.problem.ts => 77-react-query-wrapper.problem.ts} (100%)
 rename src/09-external-libraries/{78-react-query-wrapper.solution.ts => 77-react-query-wrapper.solution.ts} (100%)

diff --git a/src/08-advanced-patterns/64-const-generics-in-generic-components.problem.tsx b/src/08-advanced-patterns/64-const-generics-in-generic-components.problem.tsx
deleted file mode 100644
index 994484f..0000000
--- a/src/08-advanced-patterns/64-const-generics-in-generic-components.problem.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Have a Form component that can receive an object where
- * the keys are the different form elements, and have the
- * values inferred based on values passed in.
- */
-
-const Form = <const TValues extends Record<string, any>>() => {};
diff --git a/src/08-advanced-patterns/65-render-props.problem.tsx b/src/08-advanced-patterns/64-render-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-render-props.problem.tsx
rename to src/08-advanced-patterns/64-render-props.problem.tsx
diff --git a/src/08-advanced-patterns/65-render-props.solution.tsx b/src/08-advanced-patterns/64-render-props.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/65-render-props.solution.tsx
rename to src/08-advanced-patterns/64-render-props.solution.tsx
diff --git a/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-forward-ref-with-generics.explainer.1.tsx
rename to src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
diff --git a/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.2.tsx b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/66-forward-ref-with-generics.explainer.2.tsx
rename to src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx
diff --git a/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.3.ts b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
similarity index 100%
rename from src/08-advanced-patterns/66-forward-ref-with-generics.explainer.3.ts
rename to src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
diff --git a/src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx
rename to src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx
diff --git a/src/08-advanced-patterns/67-forward-ref-as-local-function.solution.1.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-forward-ref-as-local-function.solution.1.tsx
rename to src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx
diff --git a/src/08-advanced-patterns/67-forward-ref-as-local-function.solution.2.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/67-forward-ref-as-local-function.solution.2.tsx
rename to src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
diff --git a/src/08-advanced-patterns/68-hoc.problem.tsx b/src/08-advanced-patterns/67-hoc.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-hoc.problem.tsx
rename to src/08-advanced-patterns/67-hoc.problem.tsx
diff --git a/src/08-advanced-patterns/68-hoc.solution.tsx b/src/08-advanced-patterns/67-hoc.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-hoc.solution.tsx
rename to src/08-advanced-patterns/67-hoc.solution.tsx
diff --git a/src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/68-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/68-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/69-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/68-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/69-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/68-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/69-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/68-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/69-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/68-record-of-components-with-same-props.solution.2.tsx
diff --git a/src/08-advanced-patterns/70-as-prop.problem.tsx b/src/08-advanced-patterns/69-as-prop.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/70-as-prop.problem.tsx
rename to src/08-advanced-patterns/69-as-prop.problem.tsx
diff --git a/src/08-advanced-patterns/70-as-prop.solution.1.tsx b/src/08-advanced-patterns/69-as-prop.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/70-as-prop.solution.1.tsx
rename to src/08-advanced-patterns/69-as-prop.solution.1.tsx
diff --git a/src/08-advanced-patterns/70-as-prop.solution.2.tsx b/src/08-advanced-patterns/69-as-prop.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/70-as-prop.solution.2.tsx
rename to src/08-advanced-patterns/69-as-prop.solution.2.tsx
diff --git a/src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx
rename to src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
diff --git a/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx
rename to src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx b/src/08-advanced-patterns/71-as-prop-with-default.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/72-as-prop-with-default.problem.tsx
rename to src/08-advanced-patterns/71-as-prop-with-default.problem.tsx
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.solution.1.tsx b/src/08-advanced-patterns/71-as-prop-with-default.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/72-as-prop-with-default.solution.1.tsx
rename to src/08-advanced-patterns/71-as-prop-with-default.solution.1.tsx
diff --git a/src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx b/src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/72-as-prop-with-default.solution.2.tsx
rename to src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx
diff --git a/src/08-advanced-patterns/73-as-prop-with-forward-ref.problem.tsx b/src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/73-as-prop-with-forward-ref.problem.tsx
rename to src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx
diff --git a/src/08-advanced-patterns/73-as-prop-with-forward-ref.solution.tsx b/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
similarity index 100%
rename from src/08-advanced-patterns/73-as-prop-with-forward-ref.solution.tsx
rename to src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
diff --git a/src/09-external-libraries/74-react-hook-form.explainer.tsx b/src/09-external-libraries/73-react-hook-form.explainer.tsx
similarity index 100%
rename from src/09-external-libraries/74-react-hook-form.explainer.tsx
rename to src/09-external-libraries/73-react-hook-form.explainer.tsx
diff --git a/src/09-external-libraries/75-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx
similarity index 100%
rename from src/09-external-libraries/75-react-hook-form-wrapper.problem.tsx
rename to src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx
diff --git a/src/09-external-libraries/75-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx
similarity index 100%
rename from src/09-external-libraries/75-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx
diff --git a/src/09-external-libraries/76-react-select.problem.tsx b/src/09-external-libraries/75-react-select.problem.tsx
similarity index 100%
rename from src/09-external-libraries/76-react-select.problem.tsx
rename to src/09-external-libraries/75-react-select.problem.tsx
diff --git a/src/09-external-libraries/76-react-select.solution.tsx b/src/09-external-libraries/75-react-select.solution.tsx
similarity index 100%
rename from src/09-external-libraries/76-react-select.solution.tsx
rename to src/09-external-libraries/75-react-select.solution.tsx
diff --git a/src/09-external-libraries/77-react-query.explainer.ts b/src/09-external-libraries/76-react-query.explainer.ts
similarity index 100%
rename from src/09-external-libraries/77-react-query.explainer.ts
rename to src/09-external-libraries/76-react-query.explainer.ts
diff --git a/src/09-external-libraries/78-react-query-wrapper.problem.ts b/src/09-external-libraries/77-react-query-wrapper.problem.ts
similarity index 100%
rename from src/09-external-libraries/78-react-query-wrapper.problem.ts
rename to src/09-external-libraries/77-react-query-wrapper.problem.ts
diff --git a/src/09-external-libraries/78-react-query-wrapper.solution.ts b/src/09-external-libraries/77-react-query-wrapper.solution.ts
similarity index 100%
rename from src/09-external-libraries/78-react-query-wrapper.solution.ts
rename to src/09-external-libraries/77-react-query-wrapper.solution.ts

From 59cbbfd03451375b2f94cb2ad4e39f488388beab Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 15:51:28 +0100
Subject: [PATCH 094/165] Finished 64

---
 src/08-advanced-patterns/64-render-props.solution.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/08-advanced-patterns/64-render-props.solution.tsx b/src/08-advanced-patterns/64-render-props.solution.tsx
index 8b3ffc1..f88116a 100644
--- a/src/08-advanced-patterns/64-render-props.solution.tsx
+++ b/src/08-advanced-patterns/64-render-props.solution.tsx
@@ -8,11 +8,7 @@ interface ModalChildProps {
   closeModal: () => void;
 }
 
-const Modal = ({
-  children,
-}: {
-  children: (props: ModalChildProps) => React.ReactNode;
-}) => {
+const Modal = ({ children }: { children: React.FC<ModalChildProps> }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (

From aa556e7aae837cde2a8c04e772dda1a624c2284a Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 15:54:11 +0100
Subject: [PATCH 095/165] Added more tests to forwardRef explainer

---
 ...-forward-ref-with-generics.explainer.1.tsx | 36 +++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
index 8f96727..a0a1042 100644
--- a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
+++ b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from "react";
+import { ForwardedRef, forwardRef, useRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 type Props<T> = {
@@ -31,20 +31,36 @@ type Props<T> = {
  * By doing it this way, we preserve the generic context of the function
  * being passed in.
  */
-export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
-  return null;
+export const Table = <T,>(
+  props: Props<T>,
+  ref: ForwardedRef<HTMLTableElement>,
+) => {
+  return <table ref={ref} />;
 };
 
 const ForwardReffedTable = forwardRef(Table);
 
 const Parent = () => {
+  const tableRef = useRef<HTMLTableElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
   return (
-    <ForwardReffedTable
-      data={["123"]}
-      renderRow={(row) => {
-        type test = Expect<Equal<typeof row, string>>;
-        return <div>123</div>;
-      }}
-    ></ForwardReffedTable>
+    <>
+      <ForwardReffedTable
+        ref={tableRef}
+        data={["123"]}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, string>>;
+          return <div>123</div>;
+        }}
+      />
+      <ForwardReffedTable
+        // @ts-expect-error
+        ref={wrongRef}
+        data={["123"]}
+        renderRow={(row) => {
+          return <div>123</div>;
+        }}
+      />
+    </>
   );
 };

From 173aad5883a4a2c3c63ee3f9f04e15b860870954 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 16:32:40 +0100
Subject: [PATCH 096/165] Fixed 66 example

---
 ...-forward-ref-as-local-function.problem.tsx | 36 +++++++++++++------
 ...rward-ref-as-local-function.solution.1.tsx | 36 +++++++++++++------
 ...rward-ref-as-local-function.solution.2.tsx | 34 +++++++++++++-----
 3 files changed, 77 insertions(+), 29 deletions(-)

diff --git a/src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx
index e78bbaf..c6931fb 100644
--- a/src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx
+++ b/src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from "react";
+import { ForwardedRef, forwardRef, useRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 /**
@@ -17,20 +17,36 @@ type Props<T> = {
   renderRow: (item: T) => React.ReactNode;
 };
 
-export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
-  return null;
+export const Table = <T,>(
+  props: Props<T>,
+  ref: ForwardedRef<HTMLTableElement>,
+) => {
+  return <table ref={ref} />;
 };
 
 const ForwardReffedTable = fixedForwardRef(Table);
 
 const Parent = () => {
+  const tableRef = useRef<HTMLTableElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
   return (
-    <ForwardReffedTable
-      data={["123"]}
-      renderRow={(row) => {
-        type test = Expect<Equal<typeof row, string>>;
-        return <div>123</div>;
-      }}
-    ></ForwardReffedTable>
+    <>
+      <ForwardReffedTable
+        ref={tableRef}
+        data={["123"]}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, string>>;
+          return <div>123</div>;
+        }}
+      />
+      <ForwardReffedTable
+        // @ts-expect-error
+        ref={wrongRef}
+        data={["123"]}
+        renderRow={(row) => {
+          return <div>123</div>;
+        }}
+      />
+    </>
   );
 };
diff --git a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx
index 9c4652c..9a7a82d 100644
--- a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx
+++ b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from "react";
+import { ForwardedRef, forwardRef, useRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 function fixedForwardRef<T, P = {}>(
@@ -12,20 +12,36 @@ type Props<T> = {
   renderRow: (item: T) => React.ReactNode;
 };
 
-export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
-  return null;
+export const Table = <T,>(
+  props: Props<T>,
+  ref: ForwardedRef<HTMLTableElement>,
+) => {
+  return <table ref={ref} />;
 };
 
 const ForwardReffedTable = fixedForwardRef(Table);
 
 const Parent = () => {
+  const tableRef = useRef<HTMLTableElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
   return (
-    <ForwardReffedTable
-      data={["123"]}
-      renderRow={(row) => {
-        type test = Expect<Equal<typeof row, string>>;
-        return <div>123</div>;
-      }}
-    ></ForwardReffedTable>
+    <>
+      <ForwardReffedTable
+        ref={tableRef}
+        data={["123"]}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, string>>;
+          return <div>123</div>;
+        }}
+      />
+      <ForwardReffedTable
+        // @ts-expect-error
+        ref={wrongRef}
+        data={["123"]}
+        renderRow={(row) => {
+          return <div>123</div>;
+        }}
+      />
+    </>
   );
 };
diff --git a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
index 37ae3f0..3678aec 100644
--- a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
+++ b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
@@ -13,20 +13,36 @@ type Props<T> = {
   renderRow: (item: T) => React.ReactNode;
 };
 
-export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
-  return null;
+export const Table = <T,>(
+  props: Props<T>,
+  ref: ForwardedRef<HTMLTableElement>,
+) => {
+  return <table ref={ref} />;
 };
 
 const ForwardReffedTable = fixedForwardRef(Table);
 
 const Parent = () => {
+  const tableRef = useRef<HTMLTableElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
   return (
-    <ForwardReffedTable
-      data={["123"]}
-      renderRow={(row) => {
-        type test = Expect<Equal<typeof row, string>>;
-        return <div>123</div>;
-      }}
-    ></ForwardReffedTable>
+    <>
+      <ForwardReffedTable
+        ref={tableRef}
+        data={["123"]}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, string>>;
+          return <div>123</div>;
+        }}
+      />
+      <ForwardReffedTable
+        // @ts-expect-error
+        ref={wrongRef}
+        data={["123"]}
+        renderRow={(row) => {
+          return <div>123</div>;
+        }}
+      />
+    </>
   );
 };

From 6b7e99d6cb2776aeffd222adb37891ecf41f6d63 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 24 Jul 2023 16:37:43 +0100
Subject: [PATCH 097/165] Fixed 66

---
 .../66-forward-ref-as-local-function.solution.2.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
index 3678aec..785c13c 100644
--- a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
+++ b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
@@ -1,6 +1,6 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
-import { ForwardedRef, forwardRef } from "react";
+import { ForwardedRef, forwardRef, useRef } from "react";
 
 type FixedForwardRef = <T, P = {}>(
   render: (props: P, ref: React.Ref<T>) => React.ReactNode,

From 2fd10e76bfd520b8e6959853f6a7e885c3694f00 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 10:39:16 +0100
Subject: [PATCH 098/165] Removed ElementRef from 66

---
 .../66-forward-ref-as-local-function.solution.2.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
index 785c13c..9a25ebc 100644
--- a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
+++ b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
@@ -1,6 +1,6 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
-import { ForwardedRef, forwardRef, useRef } from "react";
+import { ElementRef, ForwardedRef, forwardRef, useRef } from "react";
 
 type FixedForwardRef = <T, P = {}>(
   render: (props: P, ref: React.Ref<T>) => React.ReactNode,

From a080f2404d7624b1e9c3bc88d4cd946f344781f9 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 10:39:51 +0100
Subject: [PATCH 099/165] Removed ElementRef

---
 .../66-forward-ref-as-local-function.solution.2.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
index 9a25ebc..785c13c 100644
--- a/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
+++ b/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx
@@ -1,6 +1,6 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
-import { ElementRef, ForwardedRef, forwardRef, useRef } from "react";
+import { ForwardedRef, forwardRef, useRef } from "react";
 
 type FixedForwardRef = <T, P = {}>(
   render: (props: P, ref: React.Ref<T>) => React.ReactNode,

From 50acd9be41ccf4bb1faf2c2e2151717cb83a33ab Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 10:46:01 +0100
Subject: [PATCH 100/165] Improved forwardRef with generics explainer

---
 ...5-forward-ref-with-generics.explainer.3.ts | 63 -------------------
 ...-forward-ref-with-generics.explainer.3.tsx | 46 ++++++++++++++
 2 files changed, 46 insertions(+), 63 deletions(-)
 delete mode 100644 src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
 create mode 100644 src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx

diff --git a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
deleted file mode 100644
index 873f796..0000000
--- a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Equal, Expect } from "../helpers/type-utils";
-
-/**
- * Here's a detailed breakdown on why forwardRef doesn't work.
- */
-
-/**
- * 1. We create a type that represents a function, but with
- * some other attributes.
- */
-type FuncExpected<Argument> = {
-  (arg: Argument): Argument;
-  someOtherThing?: string;
-};
-
-/**
- * 2. We create a function that takes a function as an argument,
- * and infers the position of Argument.
- *
- * This function doesn't do anything at runtime - it just returns
- * the function that was passed in. But it behaves similarly to
- * forwardRef.
- */
-const forwardRefShim = <Argument>(func: FuncExpected<Argument>) => {
-  return (arg: Argument) => func(arg);
-};
-
-/**
- * 3. We create an identity function, that just takes in an argument
- * and returns it.
- */
-const identityFunc = <Argument>(arg: Argument) => {
-  return arg;
-};
-
-/**
- * 4. As you can see, when it's not wrapped, identityFunc returns
- * the type that we pass in, 123.
- */
-const result1 = identityFunc(123);
-
-type test1 = Expect<Equal<typeof result1, 123>>;
-
-/**
- * 5. But when we wrap it in forwardRefShim, it loses its powers
- * of inference! Just like forwardRef.
- */
-const wrappedIdentityFunc = forwardRefShim(identityFunc);
-
-const result2 = wrappedIdentityFunc(123);
-
-type test2 = Expect<Equal<typeof result2, 123>>;
-
-/**
- * 6. Here's the really crazy part. Go back up to FuncExpected.
- * Comment out the someOtherThing property.
- *
- * It now works! This is because when a function is _just_ a function,
- * TypeScript uses its higher-order function powers on it. But when
- * it has other properties, it doesn't.
- *
- * Bizarre!
- */
diff --git a/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx
new file mode 100644
index 0000000..40fb1ed
--- /dev/null
+++ b/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx
@@ -0,0 +1,46 @@
+import { Equal, Expect } from "../helpers/type-utils";
+
+type TableProps<T> = {
+  data: T[];
+  renderRow: (item: T) => React.ReactNode;
+};
+
+export const Table = <T,>(props: TableProps<T>) => {
+  return null;
+};
+
+type FC<Props> = {
+  (arg: Props): React.ReactNode;
+  // Try uncommenting this - and it works!
+  someOtherThing?: string;
+};
+
+const removeInference = <Props,>(component: FC<Props>) => {
+  return component;
+};
+
+const TableWithoutInference = removeInference(Table);
+
+const Parent = () => {
+  return (
+    <>
+      <TableWithoutInference
+        data={["123"]}
+        renderRow={(row) => {
+          // Without inference, this is 'unknown'
+          type test = Expect<Equal<typeof row, string>>;
+          return <div>123</div>;
+        }}
+      ></TableWithoutInference>
+
+      <Table
+        data={["123"]}
+        renderRow={(row) => {
+          // With inference, it's 'string'
+          type test = Expect<Equal<typeof row, string>>;
+          return <div>123</div>;
+        }}
+      ></Table>
+    </>
+  );
+};

From ed9bf17f188be0473213beb3054721868d60f1eb Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 13:26:11 +0100
Subject: [PATCH 101/165] Changed HOC problem

---
 src/08-advanced-patterns/67-hoc.problem.tsx   | 15 -----
 ...7.5-hoc-for-generic-components.problem.tsx | 54 ++++++++++++++++++
 ....5-hoc-for-generic-components.solution.tsx | 56 +++++++++++++++++++
 3 files changed, 110 insertions(+), 15 deletions(-)
 create mode 100644 src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx
 create mode 100644 src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx

diff --git a/src/08-advanced-patterns/67-hoc.problem.tsx b/src/08-advanced-patterns/67-hoc.problem.tsx
index fa071f1..70e4167 100644
--- a/src/08-advanced-patterns/67-hoc.problem.tsx
+++ b/src/08-advanced-patterns/67-hoc.problem.tsx
@@ -1,20 +1,5 @@
 import { Router, useRouter } from "fake-external-lib";
 
-/**
- * A higher-order component is a function that takes a component and returns a
- * new component, with some additional props/behavior.
- *
- * In this case, we want to take a component that doesn't have a router prop,
- * and add one.
- *
- * 1. Figure out the correct typings for the `withRouter` function. You'll
- * need to use:
- *
- * - Generics
- * - Omit
- * - React.ComponentType
- * - Probably an 'as' at least once
- */
 export const withRouter = (Component: any) => {
   const NewComponent = (props: any) => {
     const router = useRouter();
diff --git a/src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx b/src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx
new file mode 100644
index 0000000..18a2a4e
--- /dev/null
+++ b/src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx
@@ -0,0 +1,54 @@
+import { Router, useRouter } from "fake-external-lib";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const withRouter = <TProps extends { router: Router }>(
+  Component: React.FC<TProps>,
+) => {
+  const NewComponent = (props: Omit<TProps, "router">) => {
+    const router = useRouter();
+    return <Component {...(props as TProps)} router={router} />;
+  };
+
+  NewComponent.displayName = `withRouter(${Component.displayName})`;
+
+  return NewComponent;
+};
+
+type TableProps<T> = {
+  data: T[];
+  renderRow: (item: T) => React.ReactNode;
+  router: Router;
+};
+
+export const Table = <T,>(props: TableProps<T>) => {
+  return <table />;
+};
+
+const WrappedTable = withRouter(Table);
+
+<>
+  {/* @ts-expect-error router is required! */}
+  <Table
+    data={[1, 2, 3]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, number>>;
+      return <tr />;
+    }}
+  />
+
+  <WrappedTable
+    data={[1, 2, 3]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, number>>;
+      return <tr />;
+    }}
+  />
+
+  <WrappedTable
+    data={[1, 2, 3]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, number>>;
+      return <tr />;
+    }}
+  />
+</>;
diff --git a/src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx b/src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx
new file mode 100644
index 0000000..bb324d4
--- /dev/null
+++ b/src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx
@@ -0,0 +1,56 @@
+import { Router, useRouter } from "fake-external-lib";
+import { Equal, Expect } from "../helpers/type-utils";
+
+export const withRouter = <TProps extends { router: Router }>(
+  Component: (props: TProps) => React.ReactNode,
+): ((props: Omit<TProps, "router">) => React.ReactNode) => {
+  const NewComponent = (props: Omit<TProps, "router">) => {
+    const router = useRouter();
+    return <Component {...(props as TProps)} router={router} />;
+  };
+
+  NewComponent.displayName = `withRouter(${
+    (Component as { displayName?: string }).displayName
+  })`;
+
+  return NewComponent;
+};
+
+type TableProps<T> = {
+  data: T[];
+  renderRow: (item: T) => React.ReactNode;
+  router: Router;
+};
+
+export const Table = <T,>(props: TableProps<T>) => {
+  return <table />;
+};
+
+const WrappedTable = withRouter(Table);
+
+<>
+  {/* @ts-expect-error router is required! */}
+  <Table
+    data={[1, 2, 3]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, number>>;
+      return <tr />;
+    }}
+  />
+
+  <WrappedTable
+    data={[1, 2, 3]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, number>>;
+      return <tr />;
+    }}
+  />
+
+  <WrappedTable
+    data={[1, 2, 3]}
+    renderRow={(row) => {
+      type test = Expect<Equal<typeof row, number>>;
+      return <tr />;
+    }}
+  />
+</>;

From bb55b6b205e5d08bb4558c806b84625d6edfde90 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 13:33:43 +0100
Subject: [PATCH 102/165] Finished HOC

---
 src/08-advanced-patterns/67-hoc.solution.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/08-advanced-patterns/67-hoc.solution.tsx b/src/08-advanced-patterns/67-hoc.solution.tsx
index 2cb7942..4a3dc0a 100644
--- a/src/08-advanced-patterns/67-hoc.solution.tsx
+++ b/src/08-advanced-patterns/67-hoc.solution.tsx
@@ -1,8 +1,6 @@
 import { Router, useRouter } from "fake-external-lib";
 
-export const withRouter = <TProps extends { router: Router }>(
-  Component: React.FC<TProps>,
-) => {
+export const withRouter = <TProps,>(Component: React.ComponentType<TProps>) => {
   const NewComponent = (props: Omit<TProps, "router">) => {
     const router = useRouter();
     return <Component {...(props as TProps)} router={router} />;

From 0b4eee4371425002d707cc429e199e0299dc8192 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 13:36:30 +0100
Subject: [PATCH 103/165] Fixed 67.5

---
 .../67.5-hoc-for-generic-components.problem.tsx               | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx b/src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx
index 18a2a4e..781037c 100644
--- a/src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx
+++ b/src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx
@@ -1,9 +1,7 @@
 import { Router, useRouter } from "fake-external-lib";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const withRouter = <TProps extends { router: Router }>(
-  Component: React.FC<TProps>,
-) => {
+export const withRouter = <TProps,>(Component: React.ComponentType<TProps>) => {
   const NewComponent = (props: Omit<TProps, "router">) => {
     const router = useRouter();
     return <Component {...(props as TProps)} router={router} />;

From 7a6ad76a85ddc078a7f8669d2235588fac97393b Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 13:49:44 +0100
Subject: [PATCH 104/165] Completed 67.5

---
 .../67.5-hoc-for-generic-components.solution.tsx          | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx b/src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx
index bb324d4..ffd22d9 100644
--- a/src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx
+++ b/src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx
@@ -1,7 +1,7 @@
 import { Router, useRouter } from "fake-external-lib";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const withRouter = <TProps extends { router: Router }>(
+export const withRouter = <TProps,>(
   Component: (props: TProps) => React.ReactNode,
 ): ((props: Omit<TProps, "router">) => React.ReactNode) => {
   const NewComponent = (props: Omit<TProps, "router">) => {
@@ -10,7 +10,11 @@ export const withRouter = <TProps extends { router: Router }>(
   };
 
   NewComponent.displayName = `withRouter(${
-    (Component as { displayName?: string }).displayName
+    (
+      Component as {
+        displayName?: string;
+      }
+    ).displayName
   })`;
 
   return NewComponent;

From b460e6a27f80de451c6f033b405a046f0bc52c03 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 13:50:39 +0100
Subject: [PATCH 105/165] Changed 68 to 64.5

---
 ....tsx => 64.5-record-of-components-with-same-props.problem.tsx} | 0
 ...x => 64.5-record-of-components-with-same-props.solution.1.tsx} | 0
 ...x => 64.5-record-of-components-with-same-props.solution.2.tsx} | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename src/08-advanced-patterns/{68-record-of-components-with-same-props.problem.tsx => 64.5-record-of-components-with-same-props.problem.tsx} (100%)
 rename src/08-advanced-patterns/{68-record-of-components-with-same-props.solution.1.tsx => 64.5-record-of-components-with-same-props.solution.1.tsx} (100%)
 rename src/08-advanced-patterns/{68-record-of-components-with-same-props.solution.2.tsx => 64.5-record-of-components-with-same-props.solution.2.tsx} (100%)

diff --git a/src/08-advanced-patterns/68-record-of-components-with-same-props.problem.tsx b/src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-record-of-components-with-same-props.problem.tsx
rename to src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx
diff --git a/src/08-advanced-patterns/68-record-of-components-with-same-props.solution.1.tsx b/src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.1.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-record-of-components-with-same-props.solution.1.tsx
rename to src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.1.tsx
diff --git a/src/08-advanced-patterns/68-record-of-components-with-same-props.solution.2.tsx b/src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.2.tsx
similarity index 100%
rename from src/08-advanced-patterns/68-record-of-components-with-same-props.solution.2.tsx
rename to src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.2.tsx

From 2fab9b0ff08daca5a51944c760b812dee4bff744 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 16:33:53 +0100
Subject: [PATCH 106/165] Fixed 69

---
 src/08-advanced-patterns/69-as-prop.solution.1.tsx | 13 ++++++++-----
 src/08-advanced-patterns/69-as-prop.solution.2.tsx |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/08-advanced-patterns/69-as-prop.solution.1.tsx b/src/08-advanced-patterns/69-as-prop.solution.1.tsx
index 939c576..3d7d67a 100644
--- a/src/08-advanced-patterns/69-as-prop.solution.1.tsx
+++ b/src/08-advanced-patterns/69-as-prop.solution.1.tsx
@@ -1,10 +1,13 @@
 import { Equal, Expect } from "../helpers/type-utils";
 
-type AsProps = {
-  [K in keyof JSX.IntrinsicElements]: {
-    as: K;
-  } & JSX.IntrinsicElements[K];
-}[keyof JSX.IntrinsicElements];
+// Commented out because it makes the whole repo slow to typecheck
+// Uncomment to see it working!
+
+// type AsProps = {
+//   [K in keyof JSX.IntrinsicElements]: {
+//     as: K;
+//   } & JSX.IntrinsicElements[K];
+// }[keyof JSX.IntrinsicElements];
 
 export const Wrapper = (props: AsProps) => {
   const Comp = props.as;
diff --git a/src/08-advanced-patterns/69-as-prop.solution.2.tsx b/src/08-advanced-patterns/69-as-prop.solution.2.tsx
index d2729ad..089ae87 100644
--- a/src/08-advanced-patterns/69-as-prop.solution.2.tsx
+++ b/src/08-advanced-patterns/69-as-prop.solution.2.tsx
@@ -3,7 +3,7 @@ import { Equal, Expect } from "../helpers/type-utils";
 export const Wrapper = <TAs extends keyof JSX.IntrinsicElements>(
   props: {
     as: TAs;
-  } & JSX.IntrinsicElements[TAs],
+  } & React.ComponentProps<TAs>,
 ) => {
   const Comp = props.as as string;
 

From 76f2a1d3b4fe4df3bd336869554579363732b1d4 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 16:37:50 +0100
Subject: [PATCH 107/165] Fixed custom component

---
 .../70-as-prop-with-custom-components.problem.tsx          | 7 ++-----
 .../70-as-prop-with-custom-components.solution.tsx         | 7 ++-----
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
index dc2c983..197b258 100644
--- a/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
+++ b/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
@@ -45,11 +45,8 @@ const Example1 = () => {
  * Should work with Custom components!
  */
 
-const Custom = (
-  props: { thisIsRequired: boolean },
-  ref: React.ForwardedRef<HTMLAnchorElement>,
-) => {
-  return <a ref={ref} />;
+const Custom = (props: { thisIsRequired: boolean }) => {
+  return <a />;
 };
 
 const Example2 = () => {
diff --git a/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
index be6635a..95dc6ec 100644
--- a/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
+++ b/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
@@ -40,11 +40,8 @@ const Example1 = () => {
  * Should work with Custom components!
  */
 
-const Custom = (
-  props: { thisIsRequired: boolean },
-  ref: React.ForwardedRef<HTMLAnchorElement>,
-) => {
-  return <a ref={ref} />;
+const Custom = (props: { thisIsRequired: boolean }) => {
+  return <a />;
 };
 
 const Example2 = () => {

From 782759d01b25b8cbe9493c6b4afe690f2ed43e18 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 16:44:39 +0100
Subject: [PATCH 108/165] Added extra detail to the comment

---
 .../70-as-prop-with-custom-components.problem.tsx        | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
index 197b258..3850d0b 100644
--- a/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
+++ b/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
@@ -8,7 +8,14 @@ import { Equal, Expect } from "../helpers/type-utils";
  *
  * 1. Figure out the correct typings for the `Wrapper` component.
  *
- * The solution uses generics, and the ComponentType helper.
+ * The solution uses:
+ *
+ * - Generics
+ * - ElementType
+ * - One of the following:
+ *   - ComponentPropsWithoutRef
+ *   - ComponentPropsWithRef
+ *   - ComponentProps
  */
 export const Wrapper = (props: { as: unknown }) => {
   const Comp = props.as;

From 9ac77a12b5e698bdece3f7cdc1ba21c37ea6a4e1 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 7 Aug 2023 16:45:14 +0100
Subject: [PATCH 109/165] Changed the way that 70 starts out

---
 .../70-as-prop-with-custom-components.problem.tsx     | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx b/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
index 3850d0b..fbd721f 100644
--- a/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
+++ b/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx
@@ -17,9 +17,14 @@ import { Equal, Expect } from "../helpers/type-utils";
  *   - ComponentPropsWithRef
  *   - ComponentProps
  */
-export const Wrapper = (props: { as: unknown }) => {
-  const Comp = props.as;
-  return <Comp {...props}></Comp>;
+export const Wrapper = <TAs extends keyof JSX.IntrinsicElements>(
+  props: {
+    as: TAs;
+  } & React.ComponentProps<TAs>,
+) => {
+  const Comp = props.as as string;
+
+  return <Comp {...(props as any)}></Comp>;
 };
 
 /**

From 35b5af3abfdf8caf4dda11bb79c5abbbce9281c3 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 8 Aug 2023 09:02:34 +0100
Subject: [PATCH 110/165] Changed 70 solution

---
 .../70-as-prop-with-custom-components.solution.tsx       | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx b/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
index 95dc6ec..e4238f4 100644
--- a/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
+++ b/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx
@@ -1,12 +1,13 @@
-import React, { ComponentPropsWithoutRef, ElementType } from "react";
+import React, { ElementType } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const Wrapper = <T extends ElementType>(
+export const Wrapper = <TAs extends ElementType>(
   props: {
-    as: T;
-  } & ComponentPropsWithoutRef<T>,
+    as: TAs;
+  } & React.ComponentPropsWithoutRef<TAs>,
 ) => {
   const Comp = props.as;
+
   return <Comp {...(props as any)}></Comp>;
 };
 

From 2ca5d6b11536ee6803125b54871a87122261ad5e Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 8 Aug 2023 09:33:26 +0100
Subject: [PATCH 111/165] Changed the start of 71

---
 .../71-as-prop-with-default.problem.tsx              | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/08-advanced-patterns/71-as-prop-with-default.problem.tsx b/src/08-advanced-patterns/71-as-prop-with-default.problem.tsx
index 9be70e8..28b2e79 100644
--- a/src/08-advanced-patterns/71-as-prop-with-default.problem.tsx
+++ b/src/08-advanced-patterns/71-as-prop-with-default.problem.tsx
@@ -1,13 +1,13 @@
-import { ComponentPropsWithoutRef, ElementType } from "react";
+import { ElementType } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
-export const Link = <T extends ElementType>(
+export const Link = <TAs extends ElementType>(
   props: {
-    as: T;
-  } & ComponentPropsWithoutRef<T>,
+    as: TAs;
+  } & React.ComponentPropsWithoutRef<TAs>,
 ) => {
-  const Comp = props.as;
-  return <Comp {...(props as any)}></Comp>;
+  const { as: Comp = "a", ...rest } = props;
+  return <Comp {...rest}></Comp>;
 };
 
 /**

From 27a1313689c4137b3770d081893f80bc923d12c9 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 8 Aug 2023 09:48:31 +0100
Subject: [PATCH 112/165] Improved 72

---
 .../72-as-prop-with-forward-ref.problem.tsx           | 10 ++++++----
 .../72-as-prop-with-forward-ref.solution.tsx          | 11 +++++++++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx b/src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx
index bf28cd4..f05136d 100644
--- a/src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx
@@ -1,6 +1,7 @@
 import {
   ComponentPropsWithoutRef,
   ElementType,
+  ForwardedRef,
   forwardRef,
   useRef,
 } from "react";
@@ -13,13 +14,14 @@ import { Equal, Expect } from "../helpers/type-utils";
  * So, don't feel bad if you don't find it at all.
  */
 
-export const UnwrappedLink = <T extends ElementType>(
+export const UnwrappedLink = <TAs extends ElementType>(
   props: {
-    as?: T;
-  } & ComponentPropsWithoutRef<ElementType extends T ? "a" : T>,
+    as?: TAs;
+  } & ComponentPropsWithoutRef<ElementType extends TAs ? "a" : TAs>,
+  ref: ForwardedRef<any>,
 ) => {
   const { as: Comp = "a", ...rest } = props;
-  return <Comp {...rest}></Comp>;
+  return <Comp {...rest} ref={ref}></Comp>;
 };
 
 const Link = forwardRef(UnwrappedLink);
diff --git a/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx b/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
index 9b5d9f2..4a6f479 100644
--- a/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
@@ -1,4 +1,10 @@
-import { ComponentProps, ElementType, forwardRef, useRef } from "react";
+import {
+  ComponentProps,
+  ElementType,
+  ForwardedRef,
+  forwardRef,
+  useRef,
+} from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 // Added fixedForwardRef from a previous exercise
@@ -19,9 +25,10 @@ function UnwrappedLink<T extends ElementType>(
   props: {
     as?: T;
   } & DistributiveOmit<ComponentProps<ElementType extends T ? "a" : T>, "as">,
+  ref: ForwardedRef<any>,
 ) {
   const { as: Comp = "a", ...rest } = props;
-  return <Comp {...rest}></Comp>;
+  return <Comp {...rest} ref={ref}></Comp>;
 }
 
 const Link = fixedForwardRef(UnwrappedLink);

From aa01465315300f8504f8de6e7ee9764c54d8db4b Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 8 Aug 2023 10:09:59 +0100
Subject: [PATCH 113/165] Fixed 72

---
 .../72-as-prop-with-forward-ref.solution.tsx      | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx b/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
index 4a6f479..5b915de 100644
--- a/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
+++ b/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
@@ -1,5 +1,5 @@
 import {
-  ComponentProps,
+  ComponentPropsWithRef,
   ElementType,
   ForwardedRef,
   forwardRef,
@@ -21,15 +21,18 @@ type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any
   ? Omit<T, TOmitted>
   : never;
 
-function UnwrappedLink<T extends ElementType>(
+export const UnwrappedLink = <TAs extends ElementType>(
   props: {
-    as?: T;
-  } & DistributiveOmit<ComponentProps<ElementType extends T ? "a" : T>, "as">,
+    as?: TAs;
+  } & DistributiveOmit<
+    ComponentPropsWithRef<ElementType extends TAs ? "a" : TAs>,
+    "as"
+  >,
   ref: ForwardedRef<any>,
-) {
+) => {
   const { as: Comp = "a", ...rest } = props;
   return <Comp {...rest} ref={ref}></Comp>;
-}
+};
 
 const Link = fixedForwardRef(UnwrappedLink);
 

From 616b92de88d47d0a40a81c3f0c12db606fce592f Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 14 Aug 2023 14:08:58 +0100
Subject: [PATCH 114/165] Removed dead file

---
 ...42-passing-types-to-components.problem.tsx | 58 -------------------
 1 file changed, 58 deletions(-)
 delete mode 100644 src/05-generics/42-passing-types-to-components.problem.tsx

diff --git a/src/05-generics/42-passing-types-to-components.problem.tsx b/src/05-generics/42-passing-types-to-components.problem.tsx
deleted file mode 100644
index 5bba74e..0000000
--- a/src/05-generics/42-passing-types-to-components.problem.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ReactNode } from "react";
-import { Equal, Expect } from "../helpers/type-utils";
-
-interface TableProps<T> {
-  rows: T[];
-  renderRow: (row: T) => ReactNode;
-}
-
-export const Table = <T,>(props: TableProps<T>) => {
-  return (
-    <table>
-      <tbody>
-        {props.rows.map((row) => (
-          <tr>{props.renderRow(row)}</tr>
-        ))}
-      </tbody>
-    </table>
-  );
-};
-
-interface User {
-  id: number;
-  name: string;
-  age: number;
-}
-
-/**
- * Below, we'd love to ensure that the type of `row` is `User`. How
- * do we do this?
- */
-<>
-  <Table
-    rows={[1, 2, 3]}
-    renderRow={(row) => {
-      type test = Expect<Equal<typeof row, User>>;
-      return <td>{row.name}</td>;
-    }}
-  />
-  <Table
-    rows={[
-      {
-        id: 1,
-        name: "John",
-        age: 30,
-      },
-      {
-        // @ts-expect-error id should be string
-        id: "2",
-        name: "Jane",
-        age: 30,
-      },
-    ]}
-    renderRow={(row) => {
-      type test = Expect<Equal<typeof row, User>>;
-      return <td>{row.name}</td>;
-    }}
-  ></Table>
-</>;

From 716502ded0b4a17ca09d5f5618a13d815ddd17c0 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 21 Aug 2023 12:47:13 +0100
Subject: [PATCH 115/165] Improved explainer

---
 .../73-react-hook-form.explainer.tsx          | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/09-external-libraries/73-react-hook-form.explainer.tsx b/src/09-external-libraries/73-react-hook-form.explainer.tsx
index 60d4f29..1c6e0e9 100644
--- a/src/09-external-libraries/73-react-hook-form.explainer.tsx
+++ b/src/09-external-libraries/73-react-hook-form.explainer.tsx
@@ -7,18 +7,27 @@ import { Equal, Expect } from "../helpers/type-utils";
  *
  * Investigate why this is, and what TFieldValues is being used for.
  */
-const formWithValues = useForm({
-  defaultValues: {
-    firstName: "",
-    lastName: "",
-  },
-});
+const Example1 = () => {
+  const form = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+    },
+  });
 
-const values = formWithValues.getValues();
-
-type test = Expect<
-  Equal<typeof values, { firstName: string; lastName: string }>
->;
+  return (
+    <form
+      onSubmit={form.handleSubmit((values) => {
+        type test = Expect<
+          Equal<typeof values, { firstName: string; lastName: string }>
+        >;
+      })}
+    >
+      <input {...form.register("firstName")} />
+      <input {...form.register("lastName")} />
+    </form>
+  );
+};
 
 /**
  * 2. When you don't pass a default value, the return type of getValues is
@@ -27,8 +36,17 @@ type test = Expect<
  * Investigate why this is, and what type FieldValues is.
  */
 
-const formWithoutValues = useForm();
-
-const values2 = formWithoutValues.getValues();
+const Example2 = () => {
+  const form = useForm({});
 
-type test2 = Expect<Equal<typeof values2, FieldValues>>;
+  return (
+    <form
+      onSubmit={form.handleSubmit((values) => {
+        type test = Expect<Equal<typeof values, FieldValues>>;
+      })}
+    >
+      <input {...form.register("firstName")} />
+      <input {...form.register("lastName")} />
+    </form>
+  );
+};

From 21047abaf0350f00e673e2d361f6624e3f030e25 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 21 Aug 2023 12:56:04 +0100
Subject: [PATCH 116/165] Changed to P/S

---
 ...ner.tsx => 73-react-hook-form.problem.tsx} |  2 +-
 .../73-react-hook-form.solution.tsx           | 39 +++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 rename src/09-external-libraries/{73-react-hook-form.explainer.tsx => 73-react-hook-form.problem.tsx} (97%)
 create mode 100644 src/09-external-libraries/73-react-hook-form.solution.tsx

diff --git a/src/09-external-libraries/73-react-hook-form.explainer.tsx b/src/09-external-libraries/73-react-hook-form.problem.tsx
similarity index 97%
rename from src/09-external-libraries/73-react-hook-form.explainer.tsx
rename to src/09-external-libraries/73-react-hook-form.problem.tsx
index 1c6e0e9..f19e579 100644
--- a/src/09-external-libraries/73-react-hook-form.explainer.tsx
+++ b/src/09-external-libraries/73-react-hook-form.problem.tsx
@@ -37,7 +37,7 @@ const Example1 = () => {
  */
 
 const Example2 = () => {
-  const form = useForm({});
+  const form = useForm();
 
   return (
     <form
diff --git a/src/09-external-libraries/73-react-hook-form.solution.tsx b/src/09-external-libraries/73-react-hook-form.solution.tsx
new file mode 100644
index 0000000..7e84656
--- /dev/null
+++ b/src/09-external-libraries/73-react-hook-form.solution.tsx
@@ -0,0 +1,39 @@
+import { FieldValues, useForm } from "react-hook-form";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const Example1 = () => {
+  const form = useForm({
+    values: {
+      firstName: "",
+      lastName: "",
+    },
+  });
+
+  return (
+    <form
+      onSubmit={form.handleSubmit((values) => {
+        type test = Expect<
+          Equal<typeof values, { firstName: string; lastName: string }>
+        >;
+      })}
+    >
+      <input {...form.register("firstName")} />
+      <input {...form.register("lastName")} />
+    </form>
+  );
+};
+
+const Example2 = () => {
+  const form = useForm();
+
+  return (
+    <form
+      onSubmit={form.handleSubmit((values) => {
+        type test = Expect<Equal<typeof values, FieldValues>>;
+      })}
+    >
+      <input {...form.register("firstName")} />
+      <input {...form.register("lastName")} />
+    </form>
+  );
+};

From 676b6303dbdfb9d5b3641df1324bb5d1cfccbed2 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 21 Aug 2023 13:11:19 +0100
Subject: [PATCH 117/165] WIP

---
 .../73-react-hook-form.problem.tsx            | 27 ++++++++++++
 .../73-react-hook-form.solution.tsx           | 42 ++++++++++++++++++-
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/src/09-external-libraries/73-react-hook-form.problem.tsx b/src/09-external-libraries/73-react-hook-form.problem.tsx
index f19e579..94153a7 100644
--- a/src/09-external-libraries/73-react-hook-form.problem.tsx
+++ b/src/09-external-libraries/73-react-hook-form.problem.tsx
@@ -50,3 +50,30 @@ const Example2 = () => {
     </form>
   );
 };
+
+/**
+ * 3. If we don't pass default values, how do we get
+ * react-hook-form to understand what type our fields are?
+ */
+
+type FormValues = {
+  firstName: string;
+  lastName: string;
+};
+
+const Example3 = () => {
+  const form = useForm();
+
+  return (
+    <form
+      onSubmit={form.handleSubmit((values) => {
+        type test = Expect<Equal<typeof values, FormValues>>;
+      })}
+    >
+      <input {...form.register("firstName")} />
+      <input {...form.register("lastName")} />
+      {/* @ts-expect-error */}
+      <input {...form.register("middleName")} />
+    </form>
+  );
+};
diff --git a/src/09-external-libraries/73-react-hook-form.solution.tsx b/src/09-external-libraries/73-react-hook-form.solution.tsx
index 7e84656..db01003 100644
--- a/src/09-external-libraries/73-react-hook-form.solution.tsx
+++ b/src/09-external-libraries/73-react-hook-form.solution.tsx
@@ -1,9 +1,15 @@
 import { FieldValues, useForm } from "react-hook-form";
 import { Equal, Expect } from "../helpers/type-utils";
 
+/**
+ * 1. When you provide default values to useForm, the return type of getValues
+ * gets inferred as the shape of those values.
+ *
+ * Investigate why this is, and what TFieldValues is being used for.
+ */
 const Example1 = () => {
   const form = useForm({
-    values: {
+    defaultValues: {
       firstName: "",
       lastName: "",
     },
@@ -23,6 +29,13 @@ const Example1 = () => {
   );
 };
 
+/**
+ * 2. When you don't pass a default value, the return type of getValues is
+ * inferred as FieldValues.
+ *
+ * Investigate why this is, and what type FieldValues is.
+ */
+
 const Example2 = () => {
   const form = useForm();
 
@@ -37,3 +50,30 @@ const Example2 = () => {
     </form>
   );
 };
+
+/**
+ * 3. If we don't pass default values, how do we get
+ * react-hook-form to understand what type our fields are?
+ */
+
+type FormValues = {
+  firstName: string;
+  lastName: string;
+};
+
+const Example3 = () => {
+  const form = useForm<FormValues>();
+
+  return (
+    <form
+      onSubmit={form.handleSubmit((values) => {
+        type test = Expect<Equal<typeof values, FormValues>>;
+      })}
+    >
+      <input {...form.register("firstName")} />
+      <input {...form.register("lastName")} />
+      {/* @ts-expect-error */}
+      <input {...form.register("middleName")} />
+    </form>
+  );
+};

From d9ee27ef4c968d52c69198b218952a63ed5f92ac Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 21 Aug 2023 13:22:04 +0100
Subject: [PATCH 118/165] Added another hint to 74

---
 .../74-react-hook-form-wrapper.problem.tsx                    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx b/src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx
index f24d09a..cc6591b 100644
--- a/src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx
+++ b/src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx
@@ -7,6 +7,10 @@ import { Equal, Expect, Extends } from "../helpers/type-utils";
  * We want to change the API slightly so that only certain methods are
  * exposed. We also want to make sure that defaultValues is ALWAYS
  * required.
+ *
+ * A clue: you'll need this line of code:
+ *
+ * defaultValues as DefaultValues<TValues>
  */
 const useCustomForm = (defaultValues: any) => {
   const form = useForm({

From a61f352a02860680e42dd01ebd3b48fc13891b15 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 21 Aug 2023 13:29:58 +0100
Subject: [PATCH 119/165] Changed 74 solution

---
 ...74-react-hook-form-wrapper.solution.1.tsx} |  9 ---
 .../74-react-hook-form-wrapper.solution.2.tsx | 61 +++++++++++++++++++
 2 files changed, 61 insertions(+), 9 deletions(-)
 rename src/09-external-libraries/{74-react-hook-form-wrapper.solution.tsx => 74-react-hook-form-wrapper.solution.1.tsx} (77%)
 create mode 100644 src/09-external-libraries/74-react-hook-form-wrapper.solution.2.tsx

diff --git a/src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx b/src/09-external-libraries/74-react-hook-form-wrapper.solution.1.tsx
similarity index 77%
rename from src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx
rename to src/09-external-libraries/74-react-hook-form-wrapper.solution.1.tsx
index 0053076..6857b57 100644
--- a/src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx
+++ b/src/09-external-libraries/74-react-hook-form-wrapper.solution.1.tsx
@@ -1,17 +1,8 @@
 import { DefaultValues, FieldValues, useForm } from "react-hook-form";
 import { Equal, Expect, Extends } from "../helpers/type-utils";
 
-/**
- * We add TValues as a generic to our hook, and use it to type the defaultValues.
- *
- * We constrain it to FieldValues so that it's assignable to useForm's defaultValues.
- */
 const useCustomForm = <TValues extends FieldValues>(defaultValues: TValues) => {
   const form = useForm({
-    /**
-     * There's a strange papercut here where we have to cast defaultValues as
-     * DefaultValues<TValues> to get it to work.
-     */
     defaultValues: defaultValues as DefaultValues<TValues>,
   });
 
diff --git a/src/09-external-libraries/74-react-hook-form-wrapper.solution.2.tsx b/src/09-external-libraries/74-react-hook-form-wrapper.solution.2.tsx
new file mode 100644
index 0000000..663ed01
--- /dev/null
+++ b/src/09-external-libraries/74-react-hook-form-wrapper.solution.2.tsx
@@ -0,0 +1,61 @@
+import {
+  DefaultValues,
+  FieldValues,
+  UseFormGetValues,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  useForm,
+} from "react-hook-form";
+import { Equal, Expect, Extends } from "../helpers/type-utils";
+
+const useCustomForm = <TValues extends FieldValues>(
+  defaultValues: TValues,
+): {
+  register: UseFormRegister<TValues>;
+  handleSubmit: UseFormHandleSubmit<TValues>;
+  getValues: UseFormGetValues<TValues>;
+} => {
+  const form = useForm({
+    defaultValues: defaultValues as DefaultValues<TValues>,
+  });
+
+  return {
+    register: form.register,
+    handleSubmit: form.handleSubmit,
+    getValues: form.getValues,
+  };
+};
+
+// ---- TESTS ----
+
+// @ts-expect-error defaultValues is required
+useCustomForm();
+
+useCustomForm(
+  // @ts-expect-error defaultValues must be an object
+  2,
+);
+
+const customForm = useCustomForm({
+  firstName: "",
+  lastName: "",
+});
+
+customForm.handleSubmit((values) => {
+  type test = Expect<
+    // Expect that inside handleSubmit, it's inferred as
+    // { firstName: string; lastName: string }
+    Extends<
+      {
+        firstName: string;
+        lastName: string;
+      },
+      typeof values
+    >
+  >;
+});
+
+// Expect that only the methods we want are exposed
+type test = Expect<
+  Equal<keyof typeof customForm, "register" | "handleSubmit" | "getValues">
+>;

From 46043fb3190b071ac7fc66387dbcb467a6f52a7b Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 21 Aug 2023 13:49:34 +0100
Subject: [PATCH 120/165] Fixed 75 solution

---
 src/09-external-libraries/75-react-select.solution.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/09-external-libraries/75-react-select.solution.tsx b/src/09-external-libraries/75-react-select.solution.tsx
index 42cfd96..1af56c8 100644
--- a/src/09-external-libraries/75-react-select.solution.tsx
+++ b/src/09-external-libraries/75-react-select.solution.tsx
@@ -1,11 +1,8 @@
 import ReactSelect, { GroupBase, Props } from "react-select";
 import { Equal, Expect } from "../helpers/type-utils";
 
-/**
- * You need to mimic the exact type of the Props type exported by react-select.
- */
 export const Select = <
-  Option,
+  Option = unknown,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>,
 >(
@@ -34,6 +31,7 @@ const guitarists: Option[] = [
   <Select
     options={guitarists}
     onChange={(option) => {
+      // It should infer the type of option!
       // If isMulti is false, it should NOT be an array
       type test = Expect<Equal<typeof option, Option | null>>;
     }}

From 77a3e96239cfd11223b7bc05db758853ad39be4a Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 21 Aug 2023 13:50:21 +0100
Subject: [PATCH 121/165] Changed 76 to a P/S

---
 ...explainer.ts => 76-react-query.problem.ts} |  0
 .../76-react-query.solution.ts                | 53 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 rename src/09-external-libraries/{76-react-query.explainer.ts => 76-react-query.problem.ts} (100%)
 create mode 100644 src/09-external-libraries/76-react-query.solution.ts

diff --git a/src/09-external-libraries/76-react-query.explainer.ts b/src/09-external-libraries/76-react-query.problem.ts
similarity index 100%
rename from src/09-external-libraries/76-react-query.explainer.ts
rename to src/09-external-libraries/76-react-query.problem.ts
diff --git a/src/09-external-libraries/76-react-query.solution.ts b/src/09-external-libraries/76-react-query.solution.ts
new file mode 100644
index 0000000..6b3a02b
--- /dev/null
+++ b/src/09-external-libraries/76-react-query.solution.ts
@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface User {
+  fullName: string;
+  job: string;
+}
+
+const getUser = async (): Promise<User> => {
+  return Promise.resolve({
+    fullName: "Matt Pocock",
+    job: "Developer",
+  });
+};
+
+/**
+ * A bit of a hint to start with. useQuery has a LOT of overloads - but a lot
+ * of them are disappearing in the next major version. The ones that'll be
+ * sticking around are the first three.
+ *
+ * 1. How are the first three overloads different to the others? Put differently,
+ * what's the thing that's similar about the first three that's different to
+ * the other six?
+ */
+
+useQuery;
+// ^ CMD+click on this to see the overloads
+
+/**
+ * 2. When you provide queryFn to useQuery, the type of query.data is inferred
+ * as the return type of queryFn. Why is that?
+ */
+const query1 = useQuery({
+  queryFn: getUser,
+});
+
+// Without initialData, the type of query1.data is User | undefined
+type test1 = Expect<Equal<typeof query1.data, User | undefined>>;
+
+/**
+ * 3. When you provide initialData to useQuery, the type of query.data no longer
+ * has undefined in it. Why is that?
+ */
+const query2 = useQuery({
+  queryFn: getUser,
+  initialData: {
+    fullName: "",
+    job: "",
+  },
+});
+
+// WITH initialData, the type of query.data is just User
+type test2 = Expect<Equal<typeof query2.data, User>>;

From 55dffa47b1f920fd11e7cc921c6e5b88f9bcddfb Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 21 Aug 2023 14:22:39 +0100
Subject: [PATCH 122/165] Added extra test to 77

---
 src/09-external-libraries/77-react-query-wrapper.problem.ts  | 5 ++++-
 src/09-external-libraries/77-react-query-wrapper.solution.ts | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/09-external-libraries/77-react-query-wrapper.problem.ts b/src/09-external-libraries/77-react-query-wrapper.problem.ts
index 9c81273..c759495 100644
--- a/src/09-external-libraries/77-react-query-wrapper.problem.ts
+++ b/src/09-external-libraries/77-react-query-wrapper.problem.ts
@@ -47,5 +47,8 @@ type tests = [
 // If you pass in an array of numbers in the queryKey, the type of ctx.queryKey
 // should be number[]
 useApi([1, 2], async (ctx, token) => {
-  type test = Expect<Equal<typeof ctx.queryKey, number[]>>;
+  type tests = [
+    Expect<Equal<typeof ctx.queryKey, number[]>>,
+    Expect<Equal<typeof token, string>>,
+  ];
 });
diff --git a/src/09-external-libraries/77-react-query-wrapper.solution.ts b/src/09-external-libraries/77-react-query-wrapper.solution.ts
index 5ff923c..832f3cc 100644
--- a/src/09-external-libraries/77-react-query-wrapper.solution.ts
+++ b/src/09-external-libraries/77-react-query-wrapper.solution.ts
@@ -45,5 +45,8 @@ type tests = [
 // If you pass in an array of numbers in the queryKey, the type of ctx.queryKey
 // should be number[]
 useApi([1, 2], async (ctx, token) => {
-  type test = Expect<Equal<typeof ctx.queryKey, number[]>>;
+  type tests = [
+    Expect<Equal<typeof ctx.queryKey, number[]>>,
+    Expect<Equal<typeof token, string>>,
+  ];
 });

From 310029d894f99e76b8261ca034ce15c9c061e1a5 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 21 Aug 2023 14:31:07 +0100
Subject: [PATCH 123/165] Changed 77 solution

---
 .../77-react-query-wrapper.solution.ts                 | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/09-external-libraries/77-react-query-wrapper.solution.ts b/src/09-external-libraries/77-react-query-wrapper.solution.ts
index 832f3cc..5794500 100644
--- a/src/09-external-libraries/77-react-query-wrapper.solution.ts
+++ b/src/09-external-libraries/77-react-query-wrapper.solution.ts
@@ -1,17 +1,17 @@
 import {
-  QueryFunctionContext,
-  QueryKey,
   useQuery,
+  QueryKey,
+  QueryFunctionContext,
 } from "@tanstack/react-query";
 import { useAuthToken } from "fake-external-lib";
 import { Equal, Expect } from "../helpers/type-utils";
 
-const useApi = <TData, TQueryKey extends QueryKey>(
+const useApi = <TQueryKey extends QueryKey, TQueryFnData>(
   queryKey: TQueryKey,
   queryFn: (
-    key: QueryFunctionContext<TQueryKey>,
+    ctx: QueryFunctionContext<TQueryKey>,
     token: string,
-  ) => Promise<TData>,
+  ) => Promise<TQueryFnData>,
 ) => {
   const token = useAuthToken();
 

From c1e7317c2ac6e81784b266811167cdecdb9da279 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 30 Aug 2023 09:14:48 +0100
Subject: [PATCH 124/165] Updated snapshots

---
 scripts/tests/__snapshots__/all.test.ts.snap | 298 ++++++++++++-------
 1 file changed, 197 insertions(+), 101 deletions(-)

diff --git a/scripts/tests/__snapshots__/all.test.ts.snap b/scripts/tests/__snapshots__/all.test.ts.snap
index a1f75ec..a745b3f 100644
--- a/scripts/tests/__snapshots__/all.test.ts.snap
+++ b/scripts/tests/__snapshots__/all.test.ts.snap
@@ -121,10 +121,6 @@ src/05-generics/41-passing-types-to-components.problem.tsx(33,23): error TS2339:
 src/05-generics/41-passing-types-to-components.problem.tsx(44,9): error TS2578: Unused '@ts-expect-error' directive.
 src/05-generics/41-passing-types-to-components.problem.tsx(51,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx(44,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/42-passing-types-to-components.problem.tsx(35,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/42-passing-types-to-components.problem.tsx(36,23): error TS2339: Property 'name' does not exist on type 'number'.
-src/05-generics/42-passing-types-to-components.problem.tsx(47,9): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/42-passing-types-to-components.problem.tsx(54,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/05-generics/43-inference-flow-with-constraints.problem.ts(42,1): error TS2578: Unused '@ts-expect-error' directive.
 src/05-generics/43-inference-flow-with-constraints.problem.ts(52,5): error TS2578: Unused '@ts-expect-error' directive.
 src/05-generics/43-inference-flow-with-constraints.problem.ts(60,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
@@ -155,11 +151,16 @@ src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(37,22): error TS
 src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(40,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(42,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/06-advanced-hooks/52-currying-hooks.problem.ts(38,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
+src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
+src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
+src/07-types-deep-dive/55-strongly-typing-children.problem.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
   Type 'ReactElement<any, any>' is not assignable to type '{ __brand: \\"OPTION_TYPE\\"; } & ReactPortal'.
     Property '__brand' is missing in type 'ReactElement<any, any>' but required in type '{ __brand: \\"OPTION_TYPE\\"; }'.
-src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/55-strongly-typing-children.solution.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
+  Type 'ReactElement<any, any>' is not assignable to type '{ __brand: \\"OPTION_TYPE\\"; } & ReactPortal'.
+    Property '__brand' is missing in type 'ReactElement<any, any>' but required in type '{ __brand: \\"OPTION_TYPE\\"; }'.
+src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
 src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts(15,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts(15,32): error TS2694: Namespace 'React' has no exported member 'MyInterface'.
 src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts(25,3): error TS2344: Type 'false' does not satisfy the constraint 'true'.
@@ -177,43 +178,72 @@ src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(14,9): error
   Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
 src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(15,12): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
   Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-src/08-advanced-patterns/63-lazy-load-component.problem.tsx(18,44): error TS2345: Argument of type 'unknown' is not assignable to parameter of type '() => Promise<{ default: ComponentType<any>; }>'.
-src/08-advanced-patterns/63-lazy-load-component.problem.tsx(28,62): error TS2322: Type '{ loader: () => Promise<typeof import(\\"/src/fake-external-lib/component\\")>; id: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
+src/08-advanced-patterns/63-lazy-load-component.problem.tsx(20,44): error TS2345: Argument of type 'unknown' is not assignable to parameter of type '() => Promise<{ default: ComponentType<any>; }>'.
+src/08-advanced-patterns/63-lazy-load-component.problem.tsx(30,62): error TS2322: Type '{ loader: () => Promise<typeof import(\\"/src/fake-external-lib/component\\")>; id: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
   Property 'id' does not exist on type 'IntrinsicAttributes & Props'.
-src/08-advanced-patterns/63-lazy-load-component.problem.tsx(36,4): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/65-render-props.problem.tsx(43,9): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/65-render-props.problem.tsx(44,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/66-forward-ref-with-generics.explainer.1.tsx(45,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/66-forward-ref-with-generics.explainer.2.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/66-forward-ref-with-generics.explainer.3.ts(52,21): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx(30,19): error TS7006: Parameter 'row' implicitly has an 'any' type.
-src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx(31,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/68-hoc.problem.tsx(43,5): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(16,10): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(19,12): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(22,14): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(28,21): error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ text: (props: any) => Element; number: (props: any) => Element; password: (props: any) => Element; }'.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(28,32): error TS18046: 'props' is of type 'unknown'.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(29,25): error TS2698: Spread types may only be created from object types.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(34,5): error TS2322: Type '{ type: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
+src/08-advanced-patterns/63-lazy-load-component.problem.tsx(38,4): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/64-render-props.problem.tsx(43,9): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/64-render-props.problem.tsx(44,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(16,10): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(19,12): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(22,14): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(28,21): error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ text: (props: any) => Element; number: (props: any) => Element; password: (props: any) => Element; }'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(28,32): error TS18046: 'props' is of type 'unknown'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(29,25): error TS2698: Spread types may only be created from object types.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(34,5): error TS2322: Type '{ type: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
   Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(35,16): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(37,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(40,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(35,16): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(37,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(40,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
   Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx(41,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(41,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
   Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/70-as-prop.problem.tsx(37,5): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx(14,11): error TS2604: JSX element type 'Comp' does not have any construct or call signatures.
-src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx(14,11): error TS2786: 'Comp' cannot be used as a JSX component.
-  Its type 'unknown' is not a valid JSX element type.
-src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx(21,20): error TS2322: Type '{ as: (props: { href: string; children?: ReactNode; }) => Element; href: string; }' is not assignable to type 'IntrinsicAttributes & { as: unknown; }'.
-  Property 'href' does not exist on type 'IntrinsicAttributes & { as: unknown; }'.
-src/08-advanced-patterns/72-as-prop-with-default.problem.tsx(10,11): error TS2322: Type 'Omit<{ as: T; } & ComponentPropsWithoutRef<T>, \\"as\\">' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<T, any>'.
-  Type 'Omit<{ as: T; } & ComponentPropsWithoutRef<T>, \\"as\\">' is not assignable to type 'LibraryManagedAttributes<T, any>'.
-src/08-advanced-patterns/72-as-prop-with-default.problem.tsx(14,2): error TS2741: Property 'as' is missing in type '{ href: string; }' but required in type '{ as: ElementType; }'.
-src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(29,3): error TS2578: Unused '@ts-expect-error' directive.
-src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(42,5): error TS2344: Type 'boolean' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx(52,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx(31,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(37,21): error TS7006: Parameter 'row' implicitly has an 'any' type.
+src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(38,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(43,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(46,21): error TS7006: Parameter 'row' implicitly has an 'any' type.
+src/08-advanced-patterns/67-hoc.problem.tsx(28,5): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx(40,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx(48,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/69-as-prop.problem.tsx(41,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/69-as-prop.problem.tsx(48,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/69-as-prop.problem.tsx(50,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/69-as-prop.problem.tsx(67,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/69-as-prop.problem.tsx(74,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/69-as-prop.problem.tsx(75,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(12,32): error TS2304: Cannot find name 'AsProps'.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(26,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(33,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(35,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(52,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(59,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(60,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(67,16): error TS2322: Type '(props: {    thisIsRequired: boolean;}) => JSX.Element' is not assignable to type 'keyof IntrinsicElements'.
+src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(69,9): error TS2322: Type '(props: {    thisIsRequired: boolean;}) => JSX.Element' is not assignable to type 'keyof IntrinsicElements'.
+src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(70,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(20,8): error TS2741: Property 'as' is missing in type '{ doesNotExist: true; }' but required in type '{ as: ElementType; }'.
+src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(21,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(25,8): error TS2741: Property 'as' is missing in type '{ onClick: (e: any) => void; }' but required in type '{ as: ElementType; }'.
+src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(27,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(29,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(42,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(80,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(95,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(121,25): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
+  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(128,8): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(131,35): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; ref: RefObject<HTMLAnchorElement>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
+  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(135,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(137,9): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; ref: RefObject<HTMLDivElement>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
+  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
+src/09-external-libraries/73-react-hook-form.problem.tsx(70,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/73-react-hook-form.problem.tsx(75,8): error TS2578: Unused '@ts-expect-error' directive.
+src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(33,3): error TS2578: Unused '@ts-expect-error' directive.
+src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(46,5): error TS2344: Type 'boolean' does not satisfy the constraint 'true'.
 src/09-external-libraries/75-react-select.problem.tsx(10,24): error TS7006: Parameter 'props' implicitly has an 'any' type.
 src/09-external-libraries/75-react-select.problem.tsx(33,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
 src/09-external-libraries/75-react-select.problem.tsx(36,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
@@ -221,7 +251,7 @@ src/09-external-libraries/75-react-select.problem.tsx(43,16): error TS7006: Para
 src/09-external-libraries/75-react-select.problem.tsx(45,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/09-external-libraries/77-react-query-wrapper.problem.ts(30,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 src/09-external-libraries/77-react-query-wrapper.problem.ts(44,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/77-react-query-wrapper.problem.ts(50,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/77-react-query-wrapper.problem.ts(51,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
 ,"
 `;
 
@@ -862,12 +892,6 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
       "name": "/src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx",
       "status": "passed",
     },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/42-passing-types-to-components.problem.tsx",
-      "name": "/src/05-generics/42-passing-types-to-components.problem.tsx",
-      "status": "passed",
-    },
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useState')",
@@ -1014,32 +1038,50 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     },
     {
       "assertionResults": [],
-      "message": "React is not defined",
+      "message": "No test found in suite src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts",
       "name": "/src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "React is not defined",
+      "message": "No test found in suite src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts",
       "name": "/src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx",
-      "name": "/src/07-types-deep-dive/54-understanding-jsx-element.explainer.tsx",
+      "message": "No test found in suite src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx",
+      "name": "/src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx",
+      "name": "/src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/55-strongly-typing-children.problem.tsx",
+      "name": "/src/07-types-deep-dive/55-strongly-typing-children.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/55-strongly-typing-children.solution.tsx",
+      "name": "/src/07-types-deep-dive/55-strongly-typing-children.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx",
-      "name": "/src/07-types-deep-dive/55-strongly-typing-children.explainer.tsx",
+      "message": "No test found in suite src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx",
+      "name": "/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx",
-      "name": "/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.explainer.tsx",
+      "message": "No test found in suite src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx",
+      "name": "/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx",
       "status": "passed",
     },
     {
@@ -1086,8 +1128,14 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/61-html-attributes.explainer.tsx",
-      "name": "/src/07-types-deep-dive/61-html-attributes.explainer.tsx",
+      "message": "No test found in suite src/07-types-deep-dive/61-html-attributes.problem.tsx",
+      "name": "/src/07-types-deep-dive/61-html-attributes.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/07-types-deep-dive/61-html-attributes.solution.tsx",
+      "name": "/src/07-types-deep-dive/61-html-attributes.solution.tsx",
       "status": "passed",
     },
     {
@@ -1116,128 +1164,164 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/64-const-generics-in-generic-components.problem.tsx",
-      "name": "/src/08-advanced-patterns/64-const-generics-in-generic-components.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/64-render-props.problem.tsx",
+      "name": "/src/08-advanced-patterns/64-render-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/65-render-props.problem.tsx",
-      "name": "/src/08-advanced-patterns/65-render-props.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/64-render-props.solution.tsx",
+      "name": "/src/08-advanced-patterns/64-render-props.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/65-render-props.solution.tsx",
-      "name": "/src/08-advanced-patterns/65-render-props.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx",
+      "name": "/src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-with-generics.explainer.1.tsx",
-      "name": "/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.1.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.1.tsx",
+      "name": "/src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-with-generics.explainer.2.tsx",
-      "name": "/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.2.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.2.tsx",
+      "name": "/src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-with-generics.explainer.3.ts",
-      "name": "/src/08-advanced-patterns/66-forward-ref-with-generics.explainer.3.ts",
+      "message": "No test found in suite src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx",
+      "name": "/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx",
-      "name": "/src/08-advanced-patterns/67-forward-ref-as-local-function.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx",
+      "name": "/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/67-forward-ref-as-local-function.solution.tsx",
-      "name": "/src/08-advanced-patterns/67-forward-ref-as-local-function.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx",
+      "name": "/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/68-hoc.problem.tsx",
-      "name": "/src/08-advanced-patterns/68-hoc.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx",
+      "name": "/src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/68-hoc.solution.tsx",
-      "name": "/src/08-advanced-patterns/68-hoc.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx",
+      "name": "/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx",
-      "name": "/src/08-advanced-patterns/69-record-of-components-with-same-props.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx",
+      "name": "/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/69-record-of-components-with-same-props.solution.1.tsx",
-      "name": "/src/08-advanced-patterns/69-record-of-components-with-same-props.solution.1.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/67-hoc.problem.tsx",
+      "name": "/src/08-advanced-patterns/67-hoc.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/69-record-of-components-with-same-props.solution.2.tsx",
-      "name": "/src/08-advanced-patterns/69-record-of-components-with-same-props.solution.2.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/67-hoc.solution.tsx",
+      "name": "/src/08-advanced-patterns/67-hoc.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/70-as-prop.problem.tsx",
-      "name": "/src/08-advanced-patterns/70-as-prop.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx",
+      "name": "/src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/70-as-prop.solution.1.tsx",
-      "name": "/src/08-advanced-patterns/70-as-prop.solution.1.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx",
+      "name": "/src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/70-as-prop.solution.2.tsx",
-      "name": "/src/08-advanced-patterns/70-as-prop.solution.2.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/69-as-prop.problem.tsx",
+      "name": "/src/08-advanced-patterns/69-as-prop.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx",
-      "name": "/src/08-advanced-patterns/71-as-prop-with-custom-components.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/69-as-prop.solution.1.tsx",
+      "name": "/src/08-advanced-patterns/69-as-prop.solution.1.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx",
-      "name": "/src/08-advanced-patterns/71-as-prop-with-custom-components.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/69-as-prop.solution.2.tsx",
+      "name": "/src/08-advanced-patterns/69-as-prop.solution.2.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/72-as-prop-with-default.problem.tsx",
-      "name": "/src/08-advanced-patterns/72-as-prop-with-default.problem.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx",
+      "name": "/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/72-as-prop-with-default.solution.tsx",
-      "name": "/src/08-advanced-patterns/72-as-prop-with-default.solution.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx",
+      "name": "/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx",
       "status": "passed",
     },
     {
       "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "/src/09-external-libraries/73-react-hook-form.explainer.tsx",
+      "message": "No test found in suite src/08-advanced-patterns/71-as-prop-with-default.problem.tsx",
+      "name": "/src/08-advanced-patterns/71-as-prop-with-default.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/08-advanced-patterns/71-as-prop-with-default.solution.1.tsx",
+      "name": "/src/08-advanced-patterns/71-as-prop-with-default.solution.1.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx",
+      "name": "/src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx",
+      "name": "/src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx",
+      "name": "/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/09-external-libraries/73-react-hook-form.problem.tsx",
+      "name": "/src/09-external-libraries/73-react-hook-form.problem.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "No test found in suite src/09-external-libraries/73-react-hook-form.solution.tsx",
+      "name": "/src/09-external-libraries/73-react-hook-form.solution.tsx",
       "status": "passed",
     },
     {
@@ -1249,7 +1333,13 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "/src/09-external-libraries/74-react-hook-form-wrapper.solution.tsx",
+      "name": "/src/09-external-libraries/74-react-hook-form-wrapper.solution.1.tsx",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useRef')",
+      "name": "/src/09-external-libraries/74-react-hook-form-wrapper.solution.2.tsx",
       "status": "passed",
     },
     {
@@ -1267,7 +1357,13 @@ exports[`vitest > Should have the correct Vitest errors 1`] = `
     {
       "assertionResults": [],
       "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "/src/09-external-libraries/76-react-query.explainer.ts",
+      "name": "/src/09-external-libraries/76-react-query.problem.ts",
+      "status": "passed",
+    },
+    {
+      "assertionResults": [],
+      "message": "Cannot read properties of null (reading 'useContext')",
+      "name": "/src/09-external-libraries/76-react-query.solution.ts",
       "status": "passed",
     },
     {

From c1c0209101d9da44bce57f7e0b1e6be75fd611ce Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 30 Aug 2023 09:15:22 +0100
Subject: [PATCH 125/165] Updated to TS 5.2

---
 package-lock.json | 14 +++++++-------
 package.json      |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2052414..e44d189 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
-        "typescript": "^5.1.3",
+        "typescript": "^5.2.2",
         "vite-tsconfig-paths": "^4.0.7",
         "vitest": "^0.31.1"
       }
@@ -3261,9 +3261,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz",
-      "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -6070,9 +6070,9 @@
       }
     },
     "typescript": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz",
-      "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
       "dev": true
     },
     "ufo": {
diff --git a/package.json b/package.json
index 549cd36..29a81a9 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",
-    "typescript": "^5.1.3",
+    "typescript": "^5.2.2",
     "vite-tsconfig-paths": "^4.0.7",
     "vitest": "^0.31.1"
   },
@@ -176,4 +176,4 @@
     "react-select": "^5.7.3",
     "zod": "^3.21.4"
   }
-}
\ No newline at end of file
+}

From 81a4ccaf7bd538338a9328bd582247790ad2f4d7 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 19 Sep 2023 08:52:24 +0100
Subject: [PATCH 126/165] Upgraded TT CLI

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e44d189..1e36f16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "zod": "^3.21.4"
       },
       "devDependencies": {
-        "@total-typescript/exercise-cli": "^0.2.2",
+        "@total-typescript/exercise-cli": "^0.3.2",
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
@@ -667,9 +667,9 @@
       }
     },
     "node_modules/@total-typescript/exercise-cli": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.2.2.tgz",
-      "integrity": "sha512-0DYEpYQThv+kzj3Pqi1lN08XB22YgHTXnAnnQqO5/7jQ6yQtty4rEu0FoSm+xwzO8nn8NAwjotpYrEq5Lf6jBg==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.3.2.tgz",
+      "integrity": "sha512-jie+HqoiOyXpOwGuG5mMgbJwqmwmfk0Oh1KIRCjfCYTzoSzMNxm09alzSIOB17pTqHYh4y2Qt9m/J3/azQt8uA==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
@@ -4127,9 +4127,9 @@
       "dev": true
     },
     "@total-typescript/exercise-cli": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.2.2.tgz",
-      "integrity": "sha512-0DYEpYQThv+kzj3Pqi1lN08XB22YgHTXnAnnQqO5/7jQ6yQtty4rEu0FoSm+xwzO8nn8NAwjotpYrEq5Lf6jBg==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.3.2.tgz",
+      "integrity": "sha512-jie+HqoiOyXpOwGuG5mMgbJwqmwmfk0Oh1KIRCjfCYTzoSzMNxm09alzSIOB17pTqHYh4y2Qt9m/J3/azQt8uA==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.3",
diff --git a/package.json b/package.json
index 29a81a9..8a3bd4a 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "Matt Pocock <mattpocockvoice@gmail.com>",
   "license": "GPL",
   "devDependencies": {
-    "@total-typescript/exercise-cli": "^0.2.2",
+    "@total-typescript/exercise-cli": "^0.3.2",
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",

From bb5ded4b83d1d5993f5c9cf6324649bc2e07745f Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 19 Sep 2023 10:09:59 +0100
Subject: [PATCH 127/165] Upgraded vitest and removed tests

---
 .github/workflows/main.yml                   |   17 -
 package-lock.json                            |  610 +++-----
 package.json                                 |    2 +-
 scripts/tests/__snapshots__/all.test.ts.snap | 1383 ------------------
 scripts/tests/all.test.ts                    |   51 -
 scripts/tests/cleanVitestOutput.ts           |   61 -
 scripts/tests/vite.config.ts                 |    3 -
 7 files changed, 213 insertions(+), 1914 deletions(-)
 delete mode 100644 .github/workflows/main.yml
 delete mode 100644 scripts/tests/__snapshots__/all.test.ts.snap
 delete mode 100644 scripts/tests/all.test.ts
 delete mode 100644 scripts/tests/cleanVitestOutput.ts
 delete mode 100644 scripts/tests/vite.config.ts

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
deleted file mode 100644
index 77fc8f1..0000000
--- a/.github/workflows/main.yml
+++ /dev/null
@@ -1,17 +0,0 @@
-name: CI
-on:
-  push:
-    branches:
-      - "**"
-
-jobs:
-  check:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-
-      - run: npm install --frozen-lockfile
-      - run: npm run ci
diff --git a/package-lock.json b/package-lock.json
index 1e36f16..bb1d870 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "prettier": "^2.8.7",
         "typescript": "^5.2.2",
         "vite-tsconfig-paths": "^4.0.7",
-        "vitest": "^0.31.1"
+        "vitest": "^0.34.4"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -581,6 +581,18 @@
         "@floating-ui/core": "^1.2.6"
       }
     },
+    "node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dev": true,
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -622,6 +634,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true
+    },
     "node_modules/@tanstack/query-core": {
       "version": "4.29.11",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.11.tgz",
@@ -815,13 +833,13 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.31.1.tgz",
-      "integrity": "sha512-BV1LyNvhnX+eNYzJxlHIGPWZpwJFZaCcOIzp2CNG0P+bbetenTupk6EO0LANm4QFt0TTit+yqx7Rxd1qxi/SQA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.4.tgz",
+      "integrity": "sha512-XlMKX8HyYUqB8dsY8Xxrc64J2Qs9pKMt2Z8vFTL4mBWXJsg4yoALHzJfDWi8h5nkO4Zua4zjqtapQ/IluVkSnA==",
       "dev": true,
       "dependencies": {
-        "@vitest/spy": "0.31.1",
-        "@vitest/utils": "0.31.1",
+        "@vitest/spy": "0.34.4",
+        "@vitest/utils": "0.34.4",
         "chai": "^4.3.7"
       },
       "funding": {
@@ -829,55 +847,54 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.31.1.tgz",
-      "integrity": "sha512-imWuc82ngOtxdCUpXwtEzZIuc1KMr+VlQ3Ondph45VhWoQWit5yvG/fFcldbnCi8DUuFi+NmNx5ehMUw/cGLUw==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.34.4.tgz",
+      "integrity": "sha512-hwwdB1StERqUls8oV8YcpmTIpVeJMe4WgYuDongVzixl5hlYLT2G8afhcdADeDeqCaAmZcSgLTLtqkjPQF7x+w==",
       "dev": true,
       "dependencies": {
-        "@vitest/utils": "0.31.1",
-        "concordance": "^5.0.4",
+        "@vitest/utils": "0.34.4",
         "p-limit": "^4.0.0",
-        "pathe": "^1.1.0"
+        "pathe": "^1.1.1"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.31.1.tgz",
-      "integrity": "sha512-L3w5uU9bMe6asrNzJ8WZzN+jUTX4KSgCinEJPXyny0o90fG4FPQMV0OWsq7vrCWfQlAilMjDnOF9nP8lidsJ+g==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.34.4.tgz",
+      "integrity": "sha512-GCsh4coc3YUSL/o+BPUo7lHQbzpdttTxL6f4q0jRx2qVGoYz/cyTRDJHbnwks6TILi6560bVWoBpYC10PuTLHw==",
       "dev": true,
       "dependencies": {
-        "magic-string": "^0.30.0",
-        "pathe": "^1.1.0",
-        "pretty-format": "^27.5.1"
+        "magic-string": "^0.30.1",
+        "pathe": "^1.1.1",
+        "pretty-format": "^29.5.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.31.1.tgz",
-      "integrity": "sha512-1cTpt2m9mdo3hRLDyCG2hDQvRrePTDgEJBFQQNz1ydHHZy03EiA6EpFxY+7ODaY7vMRCie+WlFZBZ0/dQWyssQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.34.4.tgz",
+      "integrity": "sha512-PNU+fd7DUPgA3Ya924b1qKuQkonAW6hL7YUjkON3wmBwSTIlhOSpy04SJ0NrRsEbrXgMMj6Morh04BMf8k+w0g==",
       "dev": true,
       "dependencies": {
-        "tinyspy": "^2.1.0"
+        "tinyspy": "^2.1.1"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.31.1.tgz",
-      "integrity": "sha512-yFyRD5ilwojsZfo3E0BnH72pSVSuLg2356cN1tCEe/0RtDzxTPYwOomIC+eQbot7m6DRy4tPZw+09mB7NkbMmA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.34.4.tgz",
+      "integrity": "sha512-yR2+5CHhp/K4ySY0Qtd+CAL9f5Yh1aXrKfAT42bq6CtlGPh92jIDDDSg7ydlRow1CP+dys4TrOrbELOyNInHSg==",
       "dev": true,
       "dependencies": {
-        "concordance": "^5.0.4",
+        "diff-sequences": "^29.4.3",
         "loupe": "^2.3.6",
-        "pretty-format": "^27.5.1"
+        "pretty-format": "^29.5.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
@@ -902,9 +919,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -967,15 +984,6 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/ansi-styles": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
@@ -1044,12 +1052,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/blueimp-md5": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
-      "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==",
-      "dev": true
-    },
     "node_modules/body-parser": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@@ -1123,9 +1125,9 @@
       }
     },
     "node_modules/chai": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
-      "integrity": "sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==",
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.8.tgz",
+      "integrity": "sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ==",
       "dev": true,
       "dependencies": {
         "assertion-error": "^1.1.0",
@@ -1242,25 +1244,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/concordance": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/concordance/-/concordance-5.0.4.tgz",
-      "integrity": "sha512-OAcsnTEYu1ARJqWVGwf4zh4JDfHZEaSNlNccFmt8YjB2l/n19/PF2viLINHc57vO4FKIAFl2FWASIGZZWZ2Kxw==",
-      "dev": true,
-      "dependencies": {
-        "date-time": "^3.1.0",
-        "esutils": "^2.0.3",
-        "fast-diff": "^1.2.0",
-        "js-string-escape": "^1.0.1",
-        "lodash": "^4.17.15",
-        "md5-hex": "^3.0.1",
-        "semver": "^7.3.2",
-        "well-known-symbols": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.18.0 <11 || >=12.14.0 <13 || >=14"
-      }
-    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -1353,18 +1336,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/date-time": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/date-time/-/date-time-3.1.0.tgz",
-      "integrity": "sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==",
-      "dev": true,
-      "dependencies": {
-        "time-zone": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1423,6 +1394,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/diff-sequences": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+      "dev": true,
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -1632,12 +1612,6 @@
         "node": ">= 0.10.0"
       }
     },
-    "node_modules/fast-diff": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-      "dev": true
-    },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -2050,15 +2024,6 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
-    "node_modules/js-string-escape": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
-      "integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2150,12 +2115,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
-    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -2176,42 +2135,18 @@
         "get-func-name": "^2.0.0"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/magic-string": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
-      "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
+      "version": "0.30.3",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
+      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.13"
+        "@jridgewell/sourcemap-codec": "^1.4.15"
       },
       "engines": {
         "node": ">=12"
       }
     },
-    "node_modules/md5-hex": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz",
-      "integrity": "sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==",
-      "dev": true,
-      "dependencies": {
-        "blueimp-md5": "^2.10.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -2291,15 +2226,15 @@
       }
     },
     "node_modules/mlly": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.2.1.tgz",
-      "integrity": "sha512-1aMEByaWgBPEbWV2BOPEMySRrzl7rIHXmQxam4DM8jVjalTQDjpN2ZKOLUrwyhfZQO7IXHml2StcHMhooDeEEQ==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
+      "integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.8.2",
-        "pathe": "^1.1.0",
+        "acorn": "^8.10.0",
+        "pathe": "^1.1.1",
         "pkg-types": "^1.0.3",
-        "ufo": "^1.1.2"
+        "ufo": "^1.3.0"
       }
     },
     "node_modules/ms": {
@@ -2516,9 +2451,9 @@
       }
     },
     "node_modules/pathe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz",
-      "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
+      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
       "dev": true
     },
     "node_modules/pathval": {
@@ -2612,17 +2547,17 @@
       }
     },
     "node_modules/pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
       "dev": true,
       "dependencies": {
-        "ansi-regex": "^5.0.1",
+        "@jest/schemas": "^29.6.3",
         "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
     "node_modules/prop-types": {
@@ -2768,9 +2703,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
     "node_modules/react-select": {
@@ -2954,21 +2889,6 @@
         "loose-envify": "^1.1.0"
       }
     },
-    "node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/send": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
@@ -3119,15 +3039,6 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
-    "node_modules/time-zone": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz",
-      "integrity": "sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/tinybench": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz",
@@ -3135,18 +3046,18 @@
       "dev": true
     },
     "node_modules/tinypool": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.5.0.tgz",
-      "integrity": "sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.7.0.tgz",
+      "integrity": "sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/tinyspy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.0.tgz",
-      "integrity": "sha512-7eORpyqImoOvkQJCSkL0d0mB4NHHIFAy4b1u8PHdDa7SjGS2njzl6/lyGoZLm+eyYEtlUmFGE0rFj66SWxZgQQ==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.1.tgz",
+      "integrity": "sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
@@ -3274,9 +3185,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz",
-      "integrity": "sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.0.tgz",
+      "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
       "dev": true
     },
     "node_modules/universalify": {
@@ -3392,15 +3303,15 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.31.1.tgz",
-      "integrity": "sha512-BajE/IsNQ6JyizPzu9zRgHrBwczkAs0erQf/JRpgTIESpKvNj9/Gd0vxX905klLkb0I0SJVCKbdrl5c6FnqYKA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.34.4.tgz",
+      "integrity": "sha512-ho8HtiLc+nsmbwZMw8SlghESEE3KxJNp04F/jPUCLVvaURwt0d+r9LxEqCX5hvrrOQ0GSyxbYr5ZfRYhQ0yVKQ==",
       "dev": true,
       "dependencies": {
         "cac": "^6.7.14",
         "debug": "^4.3.4",
-        "mlly": "^1.2.0",
-        "pathe": "^1.1.0",
+        "mlly": "^1.4.0",
+        "pathe": "^1.1.1",
         "picocolors": "^1.0.0",
         "vite": "^3.0.0 || ^4.0.0"
       },
@@ -3480,35 +3391,34 @@
       "dev": true
     },
     "node_modules/vitest": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.31.1.tgz",
-      "integrity": "sha512-/dOoOgzoFk/5pTvg1E65WVaobknWREN15+HF+0ucudo3dDG/vCZoXTQrjIfEaWvQXmqScwkRodrTbM/ScMpRcQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.34.4.tgz",
+      "integrity": "sha512-SE/laOsB6995QlbSE6BtkpXDeVNLJc1u2LHRG/OpnN4RsRzM3GQm4nm3PQCK5OBtrsUqnhzLdnT7se3aeNGdlw==",
       "dev": true,
       "dependencies": {
         "@types/chai": "^4.3.5",
         "@types/chai-subset": "^1.3.3",
         "@types/node": "*",
-        "@vitest/expect": "0.31.1",
-        "@vitest/runner": "0.31.1",
-        "@vitest/snapshot": "0.31.1",
-        "@vitest/spy": "0.31.1",
-        "@vitest/utils": "0.31.1",
-        "acorn": "^8.8.2",
+        "@vitest/expect": "0.34.4",
+        "@vitest/runner": "0.34.4",
+        "@vitest/snapshot": "0.34.4",
+        "@vitest/spy": "0.34.4",
+        "@vitest/utils": "0.34.4",
+        "acorn": "^8.9.0",
         "acorn-walk": "^8.2.0",
         "cac": "^6.7.14",
         "chai": "^4.3.7",
-        "concordance": "^5.0.4",
         "debug": "^4.3.4",
         "local-pkg": "^0.4.3",
-        "magic-string": "^0.30.0",
-        "pathe": "^1.1.0",
+        "magic-string": "^0.30.1",
+        "pathe": "^1.1.1",
         "picocolors": "^1.0.0",
-        "std-env": "^3.3.2",
+        "std-env": "^3.3.3",
         "strip-literal": "^1.0.1",
         "tinybench": "^2.5.0",
-        "tinypool": "^0.5.0",
-        "vite": "^3.0.0 || ^4.0.0",
-        "vite-node": "0.31.1",
+        "tinypool": "^0.7.0",
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0",
+        "vite-node": "0.34.4",
         "why-is-node-running": "^2.2.2"
       },
       "bin": {
@@ -3601,15 +3511,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/well-known-symbols": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/well-known-symbols/-/well-known-symbols-2.0.0.tgz",
-      "integrity": "sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
@@ -3717,12 +3618,6 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
@@ -4074,6 +3969,15 @@
         "@floating-ui/core": "^1.2.6"
       }
     },
+    "@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dev": true,
+      "requires": {
+        "@sinclair/typebox": "^0.27.8"
+      }
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -4106,6 +4010,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true
+    },
     "@tanstack/query-core": {
       "version": "4.29.11",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.11.tgz",
@@ -4272,57 +4182,56 @@
       }
     },
     "@vitest/expect": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.31.1.tgz",
-      "integrity": "sha512-BV1LyNvhnX+eNYzJxlHIGPWZpwJFZaCcOIzp2CNG0P+bbetenTupk6EO0LANm4QFt0TTit+yqx7Rxd1qxi/SQA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.4.tgz",
+      "integrity": "sha512-XlMKX8HyYUqB8dsY8Xxrc64J2Qs9pKMt2Z8vFTL4mBWXJsg4yoALHzJfDWi8h5nkO4Zua4zjqtapQ/IluVkSnA==",
       "dev": true,
       "requires": {
-        "@vitest/spy": "0.31.1",
-        "@vitest/utils": "0.31.1",
+        "@vitest/spy": "0.34.4",
+        "@vitest/utils": "0.34.4",
         "chai": "^4.3.7"
       }
     },
     "@vitest/runner": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.31.1.tgz",
-      "integrity": "sha512-imWuc82ngOtxdCUpXwtEzZIuc1KMr+VlQ3Ondph45VhWoQWit5yvG/fFcldbnCi8DUuFi+NmNx5ehMUw/cGLUw==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.34.4.tgz",
+      "integrity": "sha512-hwwdB1StERqUls8oV8YcpmTIpVeJMe4WgYuDongVzixl5hlYLT2G8afhcdADeDeqCaAmZcSgLTLtqkjPQF7x+w==",
       "dev": true,
       "requires": {
-        "@vitest/utils": "0.31.1",
-        "concordance": "^5.0.4",
+        "@vitest/utils": "0.34.4",
         "p-limit": "^4.0.0",
-        "pathe": "^1.1.0"
+        "pathe": "^1.1.1"
       }
     },
     "@vitest/snapshot": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.31.1.tgz",
-      "integrity": "sha512-L3w5uU9bMe6asrNzJ8WZzN+jUTX4KSgCinEJPXyny0o90fG4FPQMV0OWsq7vrCWfQlAilMjDnOF9nP8lidsJ+g==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.34.4.tgz",
+      "integrity": "sha512-GCsh4coc3YUSL/o+BPUo7lHQbzpdttTxL6f4q0jRx2qVGoYz/cyTRDJHbnwks6TILi6560bVWoBpYC10PuTLHw==",
       "dev": true,
       "requires": {
-        "magic-string": "^0.30.0",
-        "pathe": "^1.1.0",
-        "pretty-format": "^27.5.1"
+        "magic-string": "^0.30.1",
+        "pathe": "^1.1.1",
+        "pretty-format": "^29.5.0"
       }
     },
     "@vitest/spy": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.31.1.tgz",
-      "integrity": "sha512-1cTpt2m9mdo3hRLDyCG2hDQvRrePTDgEJBFQQNz1ydHHZy03EiA6EpFxY+7ODaY7vMRCie+WlFZBZ0/dQWyssQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.34.4.tgz",
+      "integrity": "sha512-PNU+fd7DUPgA3Ya924b1qKuQkonAW6hL7YUjkON3wmBwSTIlhOSpy04SJ0NrRsEbrXgMMj6Morh04BMf8k+w0g==",
       "dev": true,
       "requires": {
-        "tinyspy": "^2.1.0"
+        "tinyspy": "^2.1.1"
       }
     },
     "@vitest/utils": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.31.1.tgz",
-      "integrity": "sha512-yFyRD5ilwojsZfo3E0BnH72pSVSuLg2356cN1tCEe/0RtDzxTPYwOomIC+eQbot7m6DRy4tPZw+09mB7NkbMmA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.34.4.tgz",
+      "integrity": "sha512-yR2+5CHhp/K4ySY0Qtd+CAL9f5Yh1aXrKfAT42bq6CtlGPh92jIDDDSg7ydlRow1CP+dys4TrOrbELOyNInHSg==",
       "dev": true,
       "requires": {
-        "concordance": "^5.0.4",
+        "diff-sequences": "^29.4.3",
         "loupe": "^2.3.6",
-        "pretty-format": "^27.5.1"
+        "pretty-format": "^29.5.0"
       }
     },
     "abab": {
@@ -4341,9 +4250,9 @@
       }
     },
     "acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true
     },
     "acorn-globals": {
@@ -4388,12 +4297,6 @@
         }
       }
     },
-    "ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true
-    },
     "ansi-styles": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
@@ -4443,12 +4346,6 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
-    "blueimp-md5": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
-      "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==",
-      "dev": true
-    },
     "body-parser": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
@@ -4503,9 +4400,9 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "chai": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
-      "integrity": "sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==",
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.8.tgz",
+      "integrity": "sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ==",
       "dev": true,
       "requires": {
         "assertion-error": "^1.1.0",
@@ -4592,22 +4489,6 @@
       "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
       "dev": true
     },
-    "concordance": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/concordance/-/concordance-5.0.4.tgz",
-      "integrity": "sha512-OAcsnTEYu1ARJqWVGwf4zh4JDfHZEaSNlNccFmt8YjB2l/n19/PF2viLINHc57vO4FKIAFl2FWASIGZZWZ2Kxw==",
-      "dev": true,
-      "requires": {
-        "date-time": "^3.1.0",
-        "esutils": "^2.0.3",
-        "fast-diff": "^1.2.0",
-        "js-string-escape": "^1.0.1",
-        "lodash": "^4.17.15",
-        "md5-hex": "^3.0.1",
-        "semver": "^7.3.2",
-        "well-known-symbols": "^2.0.0"
-      }
-    },
     "content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -4682,15 +4563,6 @@
         "whatwg-url": "^12.0.0"
       }
     },
-    "date-time": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/date-time/-/date-time-3.1.0.tgz",
-      "integrity": "sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==",
-      "dev": true,
-      "requires": {
-        "time-zone": "^1.0.0"
-      }
-    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -4736,6 +4608,12 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
       "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
     },
+    "diff-sequences": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+      "dev": true
+    },
     "dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -4892,12 +4770,6 @@
         "vary": "~1.1.2"
       }
     },
-    "fast-diff": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-      "dev": true
-    },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -5209,12 +5081,6 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
-    "js-string-escape": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
-      "integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==",
-      "dev": true
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5286,12 +5152,6 @@
       "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
       "dev": true
     },
-    "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
-    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5309,31 +5169,13 @@
         "get-func-name": "^2.0.0"
       }
     },
-    "lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "requires": {
-        "yallist": "^4.0.0"
-      }
-    },
     "magic-string": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
-      "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
+      "version": "0.30.3",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
+      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
       "dev": true,
       "requires": {
-        "@jridgewell/sourcemap-codec": "^1.4.13"
-      }
-    },
-    "md5-hex": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz",
-      "integrity": "sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==",
-      "dev": true,
-      "requires": {
-        "blueimp-md5": "^2.10.0"
+        "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
     "media-typer": {
@@ -5391,15 +5233,15 @@
       }
     },
     "mlly": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.2.1.tgz",
-      "integrity": "sha512-1aMEByaWgBPEbWV2BOPEMySRrzl7rIHXmQxam4DM8jVjalTQDjpN2ZKOLUrwyhfZQO7IXHml2StcHMhooDeEEQ==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
+      "integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
       "dev": true,
       "requires": {
-        "acorn": "^8.8.2",
-        "pathe": "^1.1.0",
+        "acorn": "^8.10.0",
+        "pathe": "^1.1.1",
         "pkg-types": "^1.0.3",
-        "ufo": "^1.1.2"
+        "ufo": "^1.3.0"
       }
     },
     "ms": {
@@ -5553,9 +5395,9 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
     "pathe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz",
-      "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
+      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
       "dev": true
     },
     "pathval": {
@@ -5611,14 +5453,14 @@
       "dev": true
     },
     "pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
       "dev": true,
       "requires": {
-        "ansi-regex": "^5.0.1",
+        "@jest/schemas": "^29.6.3",
         "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
+        "react-is": "^18.0.0"
       }
     },
     "prop-types": {
@@ -5719,9 +5561,9 @@
       "requires": {}
     },
     "react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
     "react-select": {
@@ -5843,15 +5685,6 @@
         "loose-envify": "^1.1.0"
       }
     },
-    "semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
-      "dev": true,
-      "requires": {
-        "lru-cache": "^6.0.0"
-      }
-    },
     "send": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
@@ -5974,12 +5807,6 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
-    "time-zone": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz",
-      "integrity": "sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==",
-      "dev": true
-    },
     "tinybench": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz",
@@ -5987,15 +5814,15 @@
       "dev": true
     },
     "tinypool": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.5.0.tgz",
-      "integrity": "sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.7.0.tgz",
+      "integrity": "sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==",
       "dev": true
     },
     "tinyspy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.0.tgz",
-      "integrity": "sha512-7eORpyqImoOvkQJCSkL0d0mB4NHHIFAy4b1u8PHdDa7SjGS2njzl6/lyGoZLm+eyYEtlUmFGE0rFj66SWxZgQQ==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.1.tgz",
+      "integrity": "sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==",
       "dev": true
     },
     "to-fast-properties": {
@@ -6076,9 +5903,9 @@
       "dev": true
     },
     "ufo": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz",
-      "integrity": "sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.0.tgz",
+      "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
       "dev": true
     },
     "universalify": {
@@ -6137,15 +5964,15 @@
       }
     },
     "vite-node": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.31.1.tgz",
-      "integrity": "sha512-BajE/IsNQ6JyizPzu9zRgHrBwczkAs0erQf/JRpgTIESpKvNj9/Gd0vxX905klLkb0I0SJVCKbdrl5c6FnqYKA==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.34.4.tgz",
+      "integrity": "sha512-ho8HtiLc+nsmbwZMw8SlghESEE3KxJNp04F/jPUCLVvaURwt0d+r9LxEqCX5hvrrOQ0GSyxbYr5ZfRYhQ0yVKQ==",
       "dev": true,
       "requires": {
         "cac": "^6.7.14",
         "debug": "^4.3.4",
-        "mlly": "^1.2.0",
-        "pathe": "^1.1.0",
+        "mlly": "^1.4.0",
+        "pathe": "^1.1.1",
         "picocolors": "^1.0.0",
         "vite": "^3.0.0 || ^4.0.0"
       },
@@ -6196,35 +6023,34 @@
       }
     },
     "vitest": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.31.1.tgz",
-      "integrity": "sha512-/dOoOgzoFk/5pTvg1E65WVaobknWREN15+HF+0ucudo3dDG/vCZoXTQrjIfEaWvQXmqScwkRodrTbM/ScMpRcQ==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.34.4.tgz",
+      "integrity": "sha512-SE/laOsB6995QlbSE6BtkpXDeVNLJc1u2LHRG/OpnN4RsRzM3GQm4nm3PQCK5OBtrsUqnhzLdnT7se3aeNGdlw==",
       "dev": true,
       "requires": {
         "@types/chai": "^4.3.5",
         "@types/chai-subset": "^1.3.3",
         "@types/node": "*",
-        "@vitest/expect": "0.31.1",
-        "@vitest/runner": "0.31.1",
-        "@vitest/snapshot": "0.31.1",
-        "@vitest/spy": "0.31.1",
-        "@vitest/utils": "0.31.1",
-        "acorn": "^8.8.2",
+        "@vitest/expect": "0.34.4",
+        "@vitest/runner": "0.34.4",
+        "@vitest/snapshot": "0.34.4",
+        "@vitest/spy": "0.34.4",
+        "@vitest/utils": "0.34.4",
+        "acorn": "^8.9.0",
         "acorn-walk": "^8.2.0",
         "cac": "^6.7.14",
         "chai": "^4.3.7",
-        "concordance": "^5.0.4",
         "debug": "^4.3.4",
         "local-pkg": "^0.4.3",
-        "magic-string": "^0.30.0",
-        "pathe": "^1.1.0",
+        "magic-string": "^0.30.1",
+        "pathe": "^1.1.1",
         "picocolors": "^1.0.0",
-        "std-env": "^3.3.2",
+        "std-env": "^3.3.3",
         "strip-literal": "^1.0.1",
         "tinybench": "^2.5.0",
-        "tinypool": "^0.5.0",
-        "vite": "^3.0.0 || ^4.0.0",
-        "vite-node": "0.31.1",
+        "tinypool": "^0.7.0",
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0",
+        "vite-node": "0.34.4",
         "why-is-node-running": "^2.2.2"
       },
       "dependencies": {
@@ -6260,12 +6086,6 @@
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
       "dev": true
     },
-    "well-known-symbols": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/well-known-symbols/-/well-known-symbols-2.0.0.tgz",
-      "integrity": "sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==",
-      "dev": true
-    },
     "whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
@@ -6337,12 +6157,6 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
-    "yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
diff --git a/package.json b/package.json
index 8a3bd4a..3ae7209 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "prettier": "^2.8.7",
     "typescript": "^5.2.2",
     "vite-tsconfig-paths": "^4.0.7",
-    "vitest": "^0.31.1"
+    "vitest": "^0.34.4"
   },
   "scripts": {
     "exercise": "tt-cli run",
diff --git a/scripts/tests/__snapshots__/all.test.ts.snap b/scripts/tests/__snapshots__/all.test.ts.snap
deleted file mode 100644
index a745b3f..0000000
--- a/scripts/tests/__snapshots__/all.test.ts.snap
+++ /dev/null
@@ -1,1383 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tsc > Should have the correct TypeScript errors 1`] = `
-",src/01-introduction/03-navigating-jsx-types.problem.tsx(5,21): error TS17000: JSX attributes must only be assigned a non-empty 'expression'.
-src/02-components/04-typing-components.problem.tsx(4,29): error TS18046: 'props' is of type 'unknown'.
-src/02-components/04-typing-components.problem.tsx(10,8): error TS2578: Unused '@ts-expect-error' directive.
-src/02-components/04-typing-components.problem.tsx(13,15): error TS2322: Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'className' does not exist on type 'IntrinsicAttributes'.
-src/02-components/05-typing-components-as-functions.problem.tsx(7,1): error TS2578: Unused '@ts-expect-error' directive.
-src/02-components/05-typing-components-as-functions.problem.tsx(17,8): error TS2786: 'Button' cannot be used as a JSX component.
-  Its type '(props: Props) => { ohDear: string; }' is not a valid JSX element type.
-    Type '(props: Props) => { ohDear: string; }' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
-      Type '{ ohDear: string; }' is not assignable to type 'ReactNode'.
-src/02-components/06-typing-children.problem.tsx(4,25): error TS2339: Property 'children' does not exist on type '{}'.
-src/02-components/06-typing-children.problem.tsx(10,8): error TS2578: Unused '@ts-expect-error' directive.
-src/02-components/06-typing-children.problem.tsx(12,8): error TS2559: Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.
-src/02-components/07-typing-onclick-handlers.problem.tsx(8,47): error TS2339: Property 'onClick' does not exist on type 'ButtonProps'.
-src/02-components/08-using-html-props.problem.tsx(3,26): error TS2339: Property 'className' does not exist on type '{}'.
-src/02-components/08-using-html-props.problem.tsx(10,18): error TS2322: Type '{ onClick: () => void; type: string; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'onClick' does not exist on type 'IntrinsicAttributes'.
-src/02-components/09-html-props-with-one-changed.problem.tsx(23,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/02-components/10-extracting-props-from-custom-components.problem.tsx(18,3): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/03-hooks/11-use-state.problem.tsx(8,30): error TS2339: Property 'id' does not exist on type 'never'.
-src/03-hooks/11-use-state.problem.tsx(8,39): error TS2339: Property 'value' does not exist on type 'never'.
-src/03-hooks/11-use-state.problem.tsx(13,13): error TS2322: Type '{ id: number; value: string; }' is not assignable to type 'never'.
-src/03-hooks/11-use-state.problem.tsx(14,13): error TS2322: Type '{ id: number; value: string; }' is not assignable to type 'never'.
-src/03-hooks/12-use-state-with-undefined.problem.ts(18,15): error TS2345: Argument of type '{ id: number; name: string; }' is not assignable to parameter of type 'SetStateAction<undefined>'.
-  Type '{ id: number; name: string; }' provides no match for the signature '(prevState: undefined): undefined'.
-src/03-hooks/12-use-state-with-undefined.problem.ts(22,23): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/03-hooks/13-use-state-excess-properties.problem.tsx(22,17): error TS2578: Unused '@ts-expect-error' directive.
-src/03-hooks/13-use-state-excess-properties.problem.tsx(40,17): error TS2578: Unused '@ts-expect-error' directive.
-src/03-hooks/14-use-effect.problem.ts(6,7): error TS2322: Type 'Timeout' is not assignable to type 'void | Destructor'.
-src/03-hooks/15-use-callback.problem.tsx(5,31): error TS2344: Type 'string' does not satisfy the constraint 'Function'.
-src/03-hooks/15-use-callback.problem.tsx(6,6): error TS7006: Parameter 'buttonName' implicitly has an 'any' type.
-src/03-hooks/15-use-callback.problem.tsx(12,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/03-hooks/15-use-callback.problem.tsx(16,30): error TS2349: This expression is not callable.
-  Type 'String' has no call signatures.
-src/03-hooks/15-use-callback.problem.tsx(17,30): error TS2349: This expression is not callable.
-  Type 'String' has no call signatures.
-src/03-hooks/15-use-callback.problem.tsx(18,30): error TS2349: This expression is not callable.
-  Type 'String' has no call signatures.
-src/03-hooks/16-use-memo.problem.tsx(5,52): error TS2345: Argument of type '() => string[]' is not assignable to parameter of type '() => () => string[]'.
-  Type 'string[]' is not assignable to type '() => string[]'.
-    Type 'string[]' provides no match for the signature '(): string[]'.
-src/03-hooks/16-use-memo.problem.tsx(12,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/03-hooks/17-use-ref-basics.problem.tsx(7,5): error TS2322: Type '\\"Random value!\\"' is not assignable to type 'undefined'.
-src/03-hooks/18-element-refs.explainer.tsx(19,7): error TS2322: Type 'undefined' is not assignable to type 'HTMLDivElement | null'.
-src/03-hooks/19-use-ref-with-elements.problem.tsx(6,15): error TS2322: Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
-  Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.
-    Types of property 'current' are incompatible.
-      Type 'HTMLDivElement | undefined' is not assignable to type 'HTMLDivElement | null'.
-        Type 'undefined' is not assignable to type 'HTMLDivElement | null'.
-src/03-hooks/20-why-is-my-ref-readonly.problem.tsx(7,7): error TS2540: Cannot assign to 'current' because it is a read-only property.
-src/03-hooks/20-why-is-my-ref-readonly.solution.tsx(10,18): error TS2540: Cannot assign to 'current' because it is a read-only property.
-src/03-hooks/21-use-reducer.problem.ts(5,11): error TS18046: 'action' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(7,23): error TS18046: 'state' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(7,37): error TS18046: 'action' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(9,23): error TS18046: 'state' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(9,37): error TS18046: 'action' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(21,1): error TS2578: Unused '@ts-expect-error' directive.
-src/03-hooks/21-use-reducer.problem.ts(24,1): error TS2578: Unused '@ts-expect-error' directive.
-src/03-hooks/21-use-reducer.problem.ts(27,1): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/22-discriminated-union-props.problem.tsx(34,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx(19,34): error TS2339: Property 'title' does not exist on type 'ModalProps'.
-src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx(18,31): error TS2339: Property 'title' does not exist on type '{} | { title: string; }'.
-  Property 'title' does not exist on type '{}'.
-src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(21,36): error TS2339: Property 'buttonColor' does not exist on type '{ variant: \\"no-title\\"; }'.
-src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(34,36): error TS2339: Property 'buttonColor' does not exist on type '{ variant: \\"title\\"; title: string; }'.
-src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(50,9): error TS2322: Type '{ buttonColor: string; variant: \\"no-title\\"; title: string; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.
-  Property 'buttonColor' does not exist on type 'IntrinsicAttributes & { variant: \\"no-title\\"; }'.
-src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(52,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(55,44): error TS2322: Type '{ variant: \\"title\\"; title: string; buttonColor: string; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.
-  Property 'buttonColor' does not exist on type 'IntrinsicAttributes & { variant: \\"title\\"; title: string; }'.
-src/04-advanced-props/25-toggle-props.problem.tsx(38,5): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/25-toggle-props.problem.tsx(42,4): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx(40,8): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx(43,8): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(15,30): error TS2345: Argument of type 'ReactNode' is not assignable to parameter of type '(value: number, index: number, array: number[]) => ReactNode'.
-  Type 'undefined' is not assignable to type '(value: number, index: number, array: number[]) => ReactNode'.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(22,19): error TS2322: Type '(index: any) => Element' is not assignable to type 'ReactNode'.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(22,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(23,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(28,19): error TS2322: Type '(index: any) => null' is not assignable to type 'ReactNode'.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(28,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(33,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(37,9): error TS2322: Type '(index: any) => any' is not assignable to type 'ReactNode'.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(37,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-props/31-as-const.problem.ts(13,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-props/31-as-const.problem.ts(14,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(6,3): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(11,4): error TS2322: Type '{ children: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
-  Type '{ children: string; type: string; illegalProperty: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
-    Types of property 'type' are incompatible.
-      Type 'string' is not assignable to type '\\"button\\" | \\"submit\\" | \\"reset\\" | undefined'.
-src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(16,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(7,5): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(13,5): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(19,5): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(48,11): error TS2322: Type '{ children: string; className: string; type: string; illegalProperty: string; } | { children: string; className: string; type: string; illegalProperty: string; } | { children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
-  Type '{ children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
-    Type '{ children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
-      Types of property 'type' are incompatible.
-        Type 'string' is not assignable to type '\\"button\\" | \\"submit\\" | \\"reset\\" | undefined'.
-src/05-generics/36-type-helpers-with-constraints.problem.tsx(14,3): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/36-type-helpers-with-constraints.problem.tsx(16,3): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/36-type-helpers-with-constraints.problem.tsx(18,3): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/37-generic-localstorage-hook.problem.ts(28,30): error TS2558: Expected 0 type arguments, but got 1.
-src/05-generics/37-generic-localstorage-hook.problem.ts(35,24): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/37-generic-localstorage-hook.problem.ts(41,5): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/38-generic-hooks.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/38-generic-hooks.problem.ts(25,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/38-generic-hooks.problem.ts(35,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/38-generic-hooks.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/39-generic-props.problem.tsx(41,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/39-generic-props.problem.tsx(45,17): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/40-generic-class-components.problem.tsx(37,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/40-generic-class-components.problem.tsx(41,17): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/41-passing-types-to-components.problem.tsx(29,5): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/41-passing-types-to-components.problem.tsx(32,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/41-passing-types-to-components.problem.tsx(33,23): error TS2339: Property 'name' does not exist on type 'number'.
-src/05-generics/41-passing-types-to-components.problem.tsx(44,9): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/41-passing-types-to-components.problem.tsx(51,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx(44,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/43-inference-flow-with-constraints.problem.ts(42,1): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/43-inference-flow-with-constraints.problem.ts(52,5): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/43-inference-flow-with-constraints.problem.ts(60,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/45-tuple-return-type.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/45-tuple-return-type.problem.ts(24,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/46-required-context.problem.tsx(33,55): error TS2558: Expected 0 type arguments, but got 1.
-src/06-advanced-hooks/46-required-context.problem.tsx(37,57): error TS2558: Expected 0 type arguments, but got 1.
-src/06-advanced-hooks/46-required-context.problem.tsx(42,16): error TS2554: Expected 1 arguments, but got 0.
-src/06-advanced-hooks/46-required-context.problem.tsx(45,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/46-required-context.problem.tsx(53,17): error TS2554: Expected 1 arguments, but got 0.
-src/06-advanced-hooks/46-required-context.problem.tsx(56,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/46-required-context.problem.tsx(70,21): error TS2322: Type '{ name: string; }' is not assignable to type 'null'.
-src/06-advanced-hooks/46-required-context.problem.tsx(72,11): error TS2322: Type '{ primaryColor: string; }' is not assignable to type 'null'.
-src/06-advanced-hooks/47-unions-in-usestate.problem.tsx(45,3): error TS2578: Unused '@ts-expect-error' directive.
-src/06-advanced-hooks/47-unions-in-usestate.problem.tsx(62,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(28,37): error TS2345: Argument of type '{ status: string; error: any; }' is not assignable to parameter of type 'SetStateAction<{ status: string; }>'.
-  Object literal may only specify known properties, and 'error' does not exist in type 'SetStateAction<{ status: string; }>'.
-src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(36,3): error TS2578: Unused '@ts-expect-error' directive.
-src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(46,25): error TS2339: Property 'error' does not exist on type '{ status: string; }'.
-src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(46,25): error TS18048: 'value' is possibly 'undefined'.
-src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(46,31): error TS2339: Property 'message' does not exist on type 'Error | { title: string; }'.
-  Property 'message' does not exist on type '{ title: string; }'.
-src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(49,16): error TS18048: 'value' is possibly 'undefined'.
-src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(49,22): error TS2339: Property 'title' does not exist on type 'Error | { title: string; }'.
-  Property 'title' does not exist on type 'Error'.
-src/06-advanced-hooks/50-use-state-overloads.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(37,22): error TS2554: Expected 1 arguments, but got 0.
-src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(40,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(42,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/52-currying-hooks.problem.ts(38,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-src/07-types-deep-dive/55-strongly-typing-children.problem.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
-  Type 'ReactElement<any, any>' is not assignable to type '{ __brand: \\"OPTION_TYPE\\"; } & ReactPortal'.
-    Property '__brand' is missing in type 'ReactElement<any, any>' but required in type '{ __brand: \\"OPTION_TYPE\\"; }'.
-src/07-types-deep-dive/55-strongly-typing-children.solution.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
-  Type 'ReactElement<any, any>' is not assignable to type '{ __brand: \\"OPTION_TYPE\\"; } & ReactPortal'.
-    Property '__brand' is missing in type 'ReactElement<any, any>' but required in type '{ __brand: \\"OPTION_TYPE\\"; }'.
-src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts(15,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts(15,32): error TS2694: Namespace 'React' has no exported member 'MyInterface'.
-src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts(25,3): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-types-deep-dive/60-add-new-global-element.problem.tsx(14,3): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/60-add-new-global-element.problem.tsx(14,23): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(10,8): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(11,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(12,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(13,6): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(14,9): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(15,12): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-src/08-advanced-patterns/63-lazy-load-component.problem.tsx(20,44): error TS2345: Argument of type 'unknown' is not assignable to parameter of type '() => Promise<{ default: ComponentType<any>; }>'.
-src/08-advanced-patterns/63-lazy-load-component.problem.tsx(30,62): error TS2322: Type '{ loader: () => Promise<typeof import(\\"/src/fake-external-lib/component\\")>; id: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
-  Property 'id' does not exist on type 'IntrinsicAttributes & Props'.
-src/08-advanced-patterns/63-lazy-load-component.problem.tsx(38,4): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/64-render-props.problem.tsx(43,9): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/64-render-props.problem.tsx(44,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(16,10): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(19,12): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(22,14): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(28,21): error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ text: (props: any) => Element; number: (props: any) => Element; password: (props: any) => Element; }'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(28,32): error TS18046: 'props' is of type 'unknown'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(29,25): error TS2698: Spread types may only be created from object types.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(34,5): error TS2322: Type '{ type: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(35,16): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(37,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(40,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(41,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx(52,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx(31,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(37,21): error TS7006: Parameter 'row' implicitly has an 'any' type.
-src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(38,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(43,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(46,21): error TS7006: Parameter 'row' implicitly has an 'any' type.
-src/08-advanced-patterns/67-hoc.problem.tsx(28,5): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx(40,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx(48,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/69-as-prop.problem.tsx(41,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/69-as-prop.problem.tsx(48,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/69-as-prop.problem.tsx(50,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/69-as-prop.problem.tsx(67,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/69-as-prop.problem.tsx(74,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/69-as-prop.problem.tsx(75,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(12,32): error TS2304: Cannot find name 'AsProps'.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(26,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(33,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(35,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(52,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(59,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(60,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(67,16): error TS2322: Type '(props: {    thisIsRequired: boolean;}) => JSX.Element' is not assignable to type 'keyof IntrinsicElements'.
-src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(69,9): error TS2322: Type '(props: {    thisIsRequired: boolean;}) => JSX.Element' is not assignable to type 'keyof IntrinsicElements'.
-src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(70,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(20,8): error TS2741: Property 'as' is missing in type '{ doesNotExist: true; }' but required in type '{ as: ElementType; }'.
-src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(21,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(25,8): error TS2741: Property 'as' is missing in type '{ onClick: (e: any) => void; }' but required in type '{ as: ElementType; }'.
-src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(27,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(29,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(42,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(80,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(95,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(121,25): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
-  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(128,8): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(131,35): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; ref: RefObject<HTMLAnchorElement>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
-  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(135,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(137,9): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; ref: RefObject<HTMLDivElement>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
-  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \\"ref\\"> & RefAttributes<...>'.
-src/09-external-libraries/73-react-hook-form.problem.tsx(70,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/73-react-hook-form.problem.tsx(75,8): error TS2578: Unused '@ts-expect-error' directive.
-src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(33,3): error TS2578: Unused '@ts-expect-error' directive.
-src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(46,5): error TS2344: Type 'boolean' does not satisfy the constraint 'true'.
-src/09-external-libraries/75-react-select.problem.tsx(10,24): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/09-external-libraries/75-react-select.problem.tsx(33,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
-src/09-external-libraries/75-react-select.problem.tsx(36,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/75-react-select.problem.tsx(43,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
-src/09-external-libraries/75-react-select.problem.tsx(45,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/77-react-query-wrapper.problem.ts(30,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/77-react-query-wrapper.problem.ts(44,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/77-react-query-wrapper.problem.ts(51,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-,"
-`;
-
-exports[`vitest > Should have the correct Vitest errors 1`] = `
-{
-  "success": false,
-  "testResults": [
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/01-introduction/01-react-in-typescript.explainer.tsx",
-      "name": "/src/01-introduction/01-react-in-typescript.explainer.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/01-introduction/02-typescript-in-react-frameworks.explainer.ts",
-      "name": "/src/01-introduction/02-typescript-in-react-frameworks.explainer.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Transform failed with 1 error:
-/src/01-introduction/03-navigating-jsx-types.problem.tsx:5:21: ERROR: Unexpected \\"}\\"",
-      "name": "/src/01-introduction/03-navigating-jsx-types.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/01-introduction/03-navigating-jsx-types.solution.tsx",
-      "name": "/src/01-introduction/03-navigating-jsx-types.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/04-typing-components.problem.tsx",
-      "name": "/src/02-components/04-typing-components.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/04-typing-components.solution.1.tsx",
-      "name": "/src/02-components/04-typing-components.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/04-typing-components.solution.2.tsx",
-      "name": "/src/02-components/04-typing-components.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/04-typing-components.solution.3.tsx",
-      "name": "/src/02-components/04-typing-components.solution.3.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/04-typing-components.solution.4.tsx",
-      "name": "/src/02-components/04-typing-components.solution.4.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/05-typing-components-as-functions.problem.tsx",
-      "name": "/src/02-components/05-typing-components-as-functions.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/05-typing-components-as-functions.solution.tsx",
-      "name": "/src/02-components/05-typing-components-as-functions.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/06-typing-children.problem.tsx",
-      "name": "/src/02-components/06-typing-children.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/06-typing-children.solution.tsx",
-      "name": "/src/02-components/06-typing-children.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/07-typing-onclick-handlers.problem.tsx",
-      "name": "/src/02-components/07-typing-onclick-handlers.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/07-typing-onclick-handlers.solution.tsx",
-      "name": "/src/02-components/07-typing-onclick-handlers.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/08-using-html-props.problem.tsx",
-      "name": "/src/02-components/08-using-html-props.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/08-using-html-props.solution.1.tsx",
-      "name": "/src/02-components/08-using-html-props.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/08-using-html-props.solution.2.tsx",
-      "name": "/src/02-components/08-using-html-props.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/09-html-props-with-one-changed.problem.tsx",
-      "name": "/src/02-components/09-html-props-with-one-changed.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/09-html-props-with-one-changed.solution.1.tsx",
-      "name": "/src/02-components/09-html-props-with-one-changed.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/09-html-props-with-one-changed.solution.2.tsx",
-      "name": "/src/02-components/09-html-props-with-one-changed.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/09-html-props-with-one-changed.solution.3.tsx",
-      "name": "/src/02-components/09-html-props-with-one-changed.solution.3.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/09-html-props-with-one-changed.solution.4.tsx",
-      "name": "/src/02-components/09-html-props-with-one-changed.solution.4.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/10-extracting-props-from-custom-components.problem.tsx",
-      "name": "/src/02-components/10-extracting-props-from-custom-components.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/02-components/10-extracting-props-from-custom-components.solution.tsx",
-      "name": "/src/02-components/10-extracting-props-from-custom-components.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/11-use-state.problem.tsx",
-      "name": "/src/03-hooks/11-use-state.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/11-use-state.solution.tsx",
-      "name": "/src/03-hooks/11-use-state.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/12-use-state-with-undefined.problem.ts",
-      "name": "/src/03-hooks/12-use-state-with-undefined.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/12-use-state-with-undefined.solution.1.ts",
-      "name": "/src/03-hooks/12-use-state-with-undefined.solution.1.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/12-use-state-with-undefined.solution.2.ts",
-      "name": "/src/03-hooks/12-use-state-with-undefined.solution.2.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/13-use-state-excess-properties.problem.tsx",
-      "name": "/src/03-hooks/13-use-state-excess-properties.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/13-use-state-excess-properties.solution.tsx",
-      "name": "/src/03-hooks/13-use-state-excess-properties.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/14-use-effect.problem.ts",
-      "name": "/src/03-hooks/14-use-effect.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/14-use-effect.solution.ts",
-      "name": "/src/03-hooks/14-use-effect.solution.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/15-use-callback.problem.tsx",
-      "name": "/src/03-hooks/15-use-callback.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/15-use-callback.solution.tsx",
-      "name": "/src/03-hooks/15-use-callback.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/16-use-memo.problem.tsx",
-      "name": "/src/03-hooks/16-use-memo.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/16-use-memo.solution.1.tsx",
-      "name": "/src/03-hooks/16-use-memo.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/16-use-memo.solution.2.tsx",
-      "name": "/src/03-hooks/16-use-memo.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/16-use-memo.solution.3.tsx",
-      "name": "/src/03-hooks/16-use-memo.solution.3.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/17-use-ref-basics.problem.tsx",
-      "name": "/src/03-hooks/17-use-ref-basics.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/17-use-ref-basics.solution.tsx",
-      "name": "/src/03-hooks/17-use-ref-basics.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/18-element-refs.explainer.tsx",
-      "name": "/src/03-hooks/18-element-refs.explainer.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/19-use-ref-with-elements.problem.tsx",
-      "name": "/src/03-hooks/19-use-ref-with-elements.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/19-use-ref-with-elements.solution.tsx",
-      "name": "/src/03-hooks/19-use-ref-with-elements.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/20-why-is-my-ref-readonly.problem.tsx",
-      "name": "/src/03-hooks/20-why-is-my-ref-readonly.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/03-hooks/20-why-is-my-ref-readonly.solution.tsx",
-      "name": "/src/03-hooks/20-why-is-my-ref-readonly.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useReducer')",
-      "name": "/src/03-hooks/21-use-reducer.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useReducer')",
-      "name": "/src/03-hooks/21-use-reducer.solution.1.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useReducer')",
-      "name": "/src/03-hooks/21-use-reducer.solution.2.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useReducer')",
-      "name": "/src/03-hooks/21-use-reducer.solution.3.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/22-discriminated-union-props.problem.tsx",
-      "name": "/src/04-advanced-props/22-discriminated-union-props.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/22-discriminated-union-props.solution.tsx",
-      "name": "/src/04-advanced-props/22-discriminated-union-props.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx",
-      "name": "/src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx",
-      "name": "/src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx",
-      "name": "/src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx",
-      "name": "/src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx",
-      "name": "/src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/25-toggle-props.problem.tsx",
-      "name": "/src/04-advanced-props/25-toggle-props.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/25-toggle-props.solution.tsx",
-      "name": "/src/04-advanced-props/25-toggle-props.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/26-empty-object-type.explainer.tsx",
-      "name": "/src/04-advanced-props/26-empty-object-type.explainer.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx",
-      "name": "/src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx",
-      "name": "/src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx",
-      "name": "/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx",
-      "name": "/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx",
-      "name": "/src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/29-variants-with-classnames.problem.tsx",
-      "name": "/src/04-advanced-props/29-variants-with-classnames.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/29-variants-with-classnames.solution.tsx",
-      "name": "/src/04-advanced-props/29-variants-with-classnames.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/30-partial-autocomplete.problem.tsx",
-      "name": "/src/04-advanced-props/30-partial-autocomplete.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/30-partial-autocomplete.solution.tsx",
-      "name": "/src/04-advanced-props/30-partial-autocomplete.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/31-as-const.problem.ts",
-      "name": "/src/04-advanced-props/31-as-const.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/31-as-const.solution.ts",
-      "name": "/src/04-advanced-props/31-as-const.solution.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx",
-      "name": "/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx",
-      "name": "/src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/33-prop-groups-with-variants.problem.tsx",
-      "name": "/src/04-advanced-props/33-prop-groups-with-variants.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/04-advanced-props/33-prop-groups-with-variants.solution.tsx",
-      "name": "/src/04-advanced-props/33-prop-groups-with-variants.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/34-type-helpers.problem.tsx",
-      "name": "/src/05-generics/34-type-helpers.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/34-type-helpers.solution.tsx",
-      "name": "/src/05-generics/34-type-helpers.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/35-type-helpers-2.problem.tsx",
-      "name": "/src/05-generics/35-type-helpers-2.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/35-type-helpers-2.solution.tsx",
-      "name": "/src/05-generics/35-type-helpers-2.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/36-type-helpers-with-constraints.problem.tsx",
-      "name": "/src/05-generics/36-type-helpers-with-constraints.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/36-type-helpers-with-constraints.solution.1.tsx",
-      "name": "/src/05-generics/36-type-helpers-with-constraints.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/36-type-helpers-with-constraints.solution.2.tsx",
-      "name": "/src/05-generics/36-type-helpers-with-constraints.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [
-        {
-          "ancestorTitles": [
-            "",
-          ],
-          "failureMessages": [],
-          "fullName": " Should let you set and get values",
-          "status": "passed",
-          "title": "Should let you set and get values",
-        },
-        {
-          "ancestorTitles": [
-            "",
-          ],
-          "failureMessages": [],
-          "fullName": " Should not let you set a value that is not the same type as the type argument passed",
-          "status": "passed",
-          "title": "Should not let you set a value that is not the same type as the type argument passed",
-        },
-      ],
-      "message": "",
-      "name": "/src/05-generics/37-generic-localstorage-hook.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [
-        {
-          "ancestorTitles": [
-            "",
-          ],
-          "failureMessages": [],
-          "fullName": " Should let you set and get values",
-          "status": "passed",
-          "title": "Should let you set and get values",
-        },
-        {
-          "ancestorTitles": [
-            "",
-          ],
-          "failureMessages": [],
-          "fullName": " Should not let you set a value that is not the same type as the type argument passed",
-          "status": "passed",
-          "title": "Should not let you set a value that is not the same type as the type argument passed",
-        },
-      ],
-      "message": "",
-      "name": "/src/05-generics/37-generic-localstorage-hook.solution.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/38-generic-hooks.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/38-generic-hooks.solution.1.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/38-generic-hooks.solution.2.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/38-generic-hooks.solution.3.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/38-generic-hooks.solution.4.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/38-generic-hooks.solution.5.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/39-generic-props.problem.tsx",
-      "name": "/src/05-generics/39-generic-props.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/39-generic-props.solution.tsx",
-      "name": "/src/05-generics/39-generic-props.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "React is not defined",
-      "name": "/src/05-generics/40-generic-class-components.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "React is not defined",
-      "name": "/src/05-generics/40-generic-class-components.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/41-passing-types-to-components.problem.tsx",
-      "name": "/src/05-generics/41-passing-types-to-components.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/41-passing-types-to-components.solution.tsx",
-      "name": "/src/05-generics/41-passing-types-to-components.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx",
-      "name": "/src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx",
-      "name": "/src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/43-inference-flow-with-constraints.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/05-generics/43-inference-flow-with-constraints.solution.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/44-generics-vs-discriminated-unions.problem.tsx",
-      "name": "/src/05-generics/44-generics-vs-discriminated-unions.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/05-generics/44-generics-vs-discriminated-unions.solution.tsx",
-      "name": "/src/05-generics/44-generics-vs-discriminated-unions.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/45-tuple-return-type.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/45-tuple-return-type.solution.1.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/45-tuple-return-type.solution.2.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/46-required-context.problem.tsx",
-      "name": "/src/06-advanced-hooks/46-required-context.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/46-required-context.solution.1.tsx",
-      "name": "/src/06-advanced-hooks/46-required-context.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/46-required-context.solution.2.tsx",
-      "name": "/src/06-advanced-hooks/46-required-context.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/47-unions-in-usestate.problem.tsx",
-      "name": "/src/06-advanced-hooks/47-unions-in-usestate.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/47-unions-in-usestate.solution.tsx",
-      "name": "/src/06-advanced-hooks/47-unions-in-usestate.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx",
-      "name": "/src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx",
-      "name": "/src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx",
-      "name": "/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx",
-      "name": "/src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/50-use-state-overloads.problem.ts",
-      "name": "/src/06-advanced-hooks/50-use-state-overloads.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/50-use-state-overloads.solution.1.ts",
-      "name": "/src/06-advanced-hooks/50-use-state-overloads.solution.1.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/50-use-state-overloads.solution.2.ts",
-      "name": "/src/06-advanced-hooks/50-use-state-overloads.solution.2.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "/src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/52-currying-hooks.problem.ts",
-      "name": "/src/06-advanced-hooks/52-currying-hooks.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/06-advanced-hooks/52-currying-hooks.solution.ts",
-      "name": "/src/06-advanced-hooks/52-currying-hooks.solution.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts",
-      "name": "/src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts",
-      "name": "/src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx",
-      "name": "/src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx",
-      "name": "/src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/55-strongly-typing-children.problem.tsx",
-      "name": "/src/07-types-deep-dive/55-strongly-typing-children.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/55-strongly-typing-children.solution.tsx",
-      "name": "/src/07-types-deep-dive/55-strongly-typing-children.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx",
-      "name": "/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx",
-      "name": "/src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "React is not defined",
-      "name": "/src/07-types-deep-dive/57-react-component-type.explainer.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts",
-      "name": "/src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/58-appending-to-global-namespace.solution.ts",
-      "name": "/src/07-types-deep-dive/58-appending-to-global-namespace.solution.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts",
-      "name": "/src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/59-declaration-merging-in-global-namespace.solution.ts",
-      "name": "/src/07-types-deep-dive/59-declaration-merging-in-global-namespace.solution.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/60-add-new-global-element.problem.tsx",
-      "name": "/src/07-types-deep-dive/60-add-new-global-element.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/60-add-new-global-element.solution.tsx",
-      "name": "/src/07-types-deep-dive/60-add-new-global-element.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/61-html-attributes.problem.tsx",
-      "name": "/src/07-types-deep-dive/61-html-attributes.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/61-html-attributes.solution.tsx",
-      "name": "/src/07-types-deep-dive/61-html-attributes.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx",
-      "name": "/src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/07-types-deep-dive/62-add-attribute-to-all-elements.solution.tsx",
-      "name": "/src/07-types-deep-dive/62-add-attribute-to-all-elements.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/63-lazy-load-component.problem.tsx",
-      "name": "/src/08-advanced-patterns/63-lazy-load-component.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/63-lazy-load-component.solution.tsx",
-      "name": "/src/08-advanced-patterns/63-lazy-load-component.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/64-render-props.problem.tsx",
-      "name": "/src/08-advanced-patterns/64-render-props.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/64-render-props.solution.tsx",
-      "name": "/src/08-advanced-patterns/64-render-props.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx",
-      "name": "/src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.1.tsx",
-      "name": "/src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.2.tsx",
-      "name": "/src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx",
-      "name": "/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx",
-      "name": "/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx",
-      "name": "/src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx",
-      "name": "/src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx",
-      "name": "/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx",
-      "name": "/src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/67-hoc.problem.tsx",
-      "name": "/src/08-advanced-patterns/67-hoc.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/67-hoc.solution.tsx",
-      "name": "/src/08-advanced-patterns/67-hoc.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx",
-      "name": "/src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx",
-      "name": "/src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/69-as-prop.problem.tsx",
-      "name": "/src/08-advanced-patterns/69-as-prop.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/69-as-prop.solution.1.tsx",
-      "name": "/src/08-advanced-patterns/69-as-prop.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/69-as-prop.solution.2.tsx",
-      "name": "/src/08-advanced-patterns/69-as-prop.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx",
-      "name": "/src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx",
-      "name": "/src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/71-as-prop-with-default.problem.tsx",
-      "name": "/src/08-advanced-patterns/71-as-prop-with-default.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/71-as-prop-with-default.solution.1.tsx",
-      "name": "/src/08-advanced-patterns/71-as-prop-with-default.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx",
-      "name": "/src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx",
-      "name": "/src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx",
-      "name": "/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/09-external-libraries/73-react-hook-form.problem.tsx",
-      "name": "/src/09-external-libraries/73-react-hook-form.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/09-external-libraries/73-react-hook-form.solution.tsx",
-      "name": "/src/09-external-libraries/73-react-hook-form.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "/src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "/src/09-external-libraries/74-react-hook-form-wrapper.solution.1.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "/src/09-external-libraries/74-react-hook-form-wrapper.solution.2.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/09-external-libraries/75-react-select.problem.tsx",
-      "name": "/src/09-external-libraries/75-react-select.problem.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "No test found in suite src/09-external-libraries/75-react-select.solution.tsx",
-      "name": "/src/09-external-libraries/75-react-select.solution.tsx",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "/src/09-external-libraries/76-react-query.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "/src/09-external-libraries/76-react-query.solution.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "/src/09-external-libraries/77-react-query-wrapper.problem.ts",
-      "status": "passed",
-    },
-    {
-      "assertionResults": [],
-      "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "/src/09-external-libraries/77-react-query-wrapper.solution.ts",
-      "status": "passed",
-    },
-  ],
-}
-`;
diff --git a/scripts/tests/all.test.ts b/scripts/tests/all.test.ts
deleted file mode 100644
index fe5ea8d..0000000
--- a/scripts/tests/all.test.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import path from "path";
-import { describe, expect, it } from "vitest";
-import { execSync } from "child_process";
-import { cleanVitestOutput } from "./cleanVitestOutput";
-
-const rootFolder = path.resolve(__dirname, "../..");
-
-const sanitizeForRegex = (str: string) => {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
-};
-
-describe("tsc", async () => {
-  it("Should have the correct TypeScript errors", () => {
-    let result: string;
-
-    try {
-      result = execSync(`npx tsc`, {
-        cwd: rootFolder,
-      }).toString();
-    } catch (error) {
-      result = error.output.toString();
-    }
-
-    result = result.replace(new RegExp(sanitizeForRegex(rootFolder), "g"), "");
-
-    expect(result).toMatchSnapshot();
-  });
-});
-
-describe("vitest", async () => {
-  it("Should have the correct Vitest errors", () => {
-    let result: string;
-
-    try {
-      result = execSync(`npx vitest run --reporter=json`, {
-        cwd: rootFolder,
-        stdio: "pipe",
-      }).toString();
-    } catch (error) {
-      result = error.output.toString();
-    }
-
-    result = result.replace(new RegExp(sanitizeForRegex(rootFolder), "g"), "");
-
-    expect(
-      cleanVitestOutput(result, {
-        rootFolder,
-      }),
-    ).toMatchSnapshot();
-  });
-});
diff --git a/scripts/tests/cleanVitestOutput.ts b/scripts/tests/cleanVitestOutput.ts
deleted file mode 100644
index 81efa6b..0000000
--- a/scripts/tests/cleanVitestOutput.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import path from "path";
-
-export const cleanVitestOutput = (
-  result: string,
-  context: {
-    rootFolder: string;
-  },
-) => {
-  const asJson: {
-    startTime?: number;
-    endTime?: number;
-    duration?: number;
-    numFailedTestSuites?: number;
-    numFailedTests?: number;
-    numPassedTestSuites?: number;
-    numPassedTests?: number;
-    numPendingTestSuites?: number;
-    numPendingTests?: number;
-    numTodoTests?: number;
-    numTotalTestSuites?: number;
-    numTotalTests?: number;
-    testResults: {
-      name: string;
-      startTime?: number;
-      endTime?: number;
-      duration?: number;
-      assertionResults: {
-        duration?: number;
-      }[];
-    }[];
-  } = JSON.parse(result.slice(1, -1));
-
-  delete asJson.startTime;
-  delete asJson.endTime;
-  delete asJson.duration;
-  delete asJson.numFailedTestSuites;
-  delete asJson.numFailedTests;
-  delete asJson.numPassedTestSuites;
-  delete asJson.numPassedTests;
-  delete asJson.numPendingTestSuites;
-  delete asJson.numPendingTests;
-  delete asJson.numTodoTests;
-  delete asJson.numTotalTestSuites;
-  delete asJson.numTotalTests;
-
-  asJson.testResults.forEach((testResult) => {
-    delete testResult.startTime;
-    delete testResult.endTime;
-    delete testResult.duration;
-
-    // testResult.name = path.relative(context.rootFolder, testResult.name);
-
-    testResult.assertionResults.forEach((assertionResult) => {
-      delete assertionResult.duration;
-    });
-  });
-
-  asJson.testResults.sort((a, b) => a.name.localeCompare(b.name));
-
-  return asJson;
-};
diff --git a/scripts/tests/vite.config.ts b/scripts/tests/vite.config.ts
deleted file mode 100644
index 8fb6f2d..0000000
--- a/scripts/tests/vite.config.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({});

From 401f29861e796fc43c76ad9060ddb5098d1b34ea Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Fri, 3 Nov 2023 16:16:44 +0000
Subject: [PATCH 128/165] Fixed import in 40

---
 src/05-generics/40-generic-class-components.problem.tsx  | 2 +-
 src/05-generics/40-generic-class-components.solution.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/05-generics/40-generic-class-components.problem.tsx b/src/05-generics/40-generic-class-components.problem.tsx
index 5f54d3c..774fccb 100644
--- a/src/05-generics/40-generic-class-components.problem.tsx
+++ b/src/05-generics/40-generic-class-components.problem.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 interface TableProps {
diff --git a/src/05-generics/40-generic-class-components.solution.tsx b/src/05-generics/40-generic-class-components.solution.tsx
index fa4a0e6..be529d8 100644
--- a/src/05-generics/40-generic-class-components.solution.tsx
+++ b/src/05-generics/40-generic-class-components.solution.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 interface TableProps<TRow> {

From 884e14e1c5996a60392a0cf1508743d958da6103 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 6 Dec 2023 15:12:26 +0000
Subject: [PATCH 129/165] Upgraded to latest CLI

---
 README.md         | 31 +++++-----------
 package-lock.json | 91 ++++++++++++++++++++++++++++++++++++++++++-----
 package.json      |  2 +-
 3 files changed, 92 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index 1a3ee86..ec6cbe6 100644
--- a/README.md
+++ b/README.md
@@ -8,23 +8,18 @@ Clone this repo or [open in Gitpod](https://gitpod.io/#https://github.com/total-
 # Installs all dependencies
 npm install
 
-# Starts the first exercise
-npm run exercise 01
-
-# Runs linting and tests on the solution
-npm run solution 01
+# Asks you which exercise you'd like to run, and runs it
+npm run exercise
 ```
 
 ## How to take the course
 
-You'll notice that the course is split into exercises. Each exercise is split into a `*.problem.ts` and a `*.solution.ts`.
+You'll notice that the course is split into exercises. Each exercise is split into a `*.problem` and a `*.solution`.
 
 To take an exercise:
 
-1. Go into `*.problem.ts`
-2. Run `npm run exercise 01`, where `01` is the number of the exercise you're on.
-
-The `exercise` script will run TypeScript typechecks and a test suite on the exercise.
+1. Run `npm run exercise`
+2. Choose which exercise you'd like to run.
 
 This course encourages **active, exploratory learning**. In the video, I'll explain a problem, and **you'll be asked to try to find a solution**. To attempt a solution, you'll need to:
 
@@ -34,9 +29,7 @@ This course encourages **active, exploratory learning**. In the video, I'll expl
 
 You'll know if you've succeeded because the tests will pass.
 
-**If you succeed**, or **if you get stuck**, unpause the video and check out the `*.solution.ts`. You can see if your solution is better or worse than mine!
-
-You can run `npm run solution 01` to run the tests and typechecking on the solution.
+**If you succeed**, or **if you get stuck**, unpause the video and check out the `*.solution`. You can see if your solution is better or worse than mine!
 
 ## Acknowledgements
 
@@ -44,14 +37,8 @@ Say thanks to Matt on [Twitter](https://twitter.com/mattpocockuk) or by joining
 
 ## Reference
 
-### `npm run exercise 01`
-
-Alias: `npm run e 01`
-
-Run the corresponding `*.problem.ts` file.
-
-### `npm run solution 01`
+### `npm run exercise`
 
-Alias: `npm run s 01`
+Alias: `npm run e`
 
-Run the corresponding `*.solution.ts` file. If there are multiple, it runs only the first one.
+Open a prompt for choosing which exercise you'd like to run.
diff --git a/package-lock.json b/package-lock.json
index bb1d870..5cd5ac5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "zod": "^3.21.4"
       },
       "devDependencies": {
-        "@total-typescript/exercise-cli": "^0.3.2",
+        "@total-typescript/exercise-cli": "^0.4.0",
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
@@ -685,18 +685,24 @@
       }
     },
     "node_modules/@total-typescript/exercise-cli": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.3.2.tgz",
-      "integrity": "sha512-jie+HqoiOyXpOwGuG5mMgbJwqmwmfk0Oh1KIRCjfCYTzoSzMNxm09alzSIOB17pTqHYh4y2Qt9m/J3/azQt8uA==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.4.0.tgz",
+      "integrity": "sha512-iSliKtEM1nShevoVQbEsnuT2D9s74taI2GIuUmIziReROUHRfj1TSQ16X0WMGPZsWp/XxX5ZvkoM4h1Eg21uLw==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
+        "colors": "^1.4.0",
         "commander": "^10.0.1",
         "fast-glob": "^3.2.12",
-        "jsonc-parser": "^3.2.0"
+        "jsonc-parser": "^3.2.0",
+        "prompts": "^2.4.2"
       },
       "bin": {
         "tt-cli": "dist/bin.js"
+      },
+      "peerDependencies": {
+        "typescript": "^5.2.2",
+        "vitest": "^0.34.4"
       }
     },
     "node_modules/@types/body-parser": {
@@ -1223,6 +1229,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2085,6 +2100,15 @@
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -2560,6 +2584,19 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -2955,6 +2992,12 @@
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
       "dev": true
     },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -4037,15 +4080,17 @@
       "dev": true
     },
     "@total-typescript/exercise-cli": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.3.2.tgz",
-      "integrity": "sha512-jie+HqoiOyXpOwGuG5mMgbJwqmwmfk0Oh1KIRCjfCYTzoSzMNxm09alzSIOB17pTqHYh4y2Qt9m/J3/azQt8uA==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.4.0.tgz",
+      "integrity": "sha512-iSliKtEM1nShevoVQbEsnuT2D9s74taI2GIuUmIziReROUHRfj1TSQ16X0WMGPZsWp/XxX5ZvkoM4h1Eg21uLw==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.3",
+        "colors": "^1.4.0",
         "commander": "^10.0.1",
         "fast-glob": "^3.2.12",
-        "jsonc-parser": "^3.2.0"
+        "jsonc-parser": "^3.2.0",
+        "prompts": "^2.4.2"
       }
     },
     "@types/body-parser": {
@@ -4474,6 +4519,12 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -5131,6 +5182,12 @@
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
+    "kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -5463,6 +5520,16 @@
         "react-is": "^18.0.0"
       }
     },
+    "prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "requires": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      }
+    },
     "prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5744,6 +5811,12 @@
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
       "dev": true
     },
+    "sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
diff --git a/package.json b/package.json
index 3ae7209..91fb7bc 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "Matt Pocock <mattpocockvoice@gmail.com>",
   "license": "GPL",
   "devDependencies": {
-    "@total-typescript/exercise-cli": "^0.3.2",
+    "@total-typescript/exercise-cli": "^0.4.0",
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",

From 482baff1cf8067ccde221b93f8e1371f1e2fc120 Mon Sep 17 00:00:00 2001
From: lmssieh <122186255+lmssiehdev@users.noreply.github.com>
Date: Sun, 21 Apr 2024 19:06:27 +0100
Subject: [PATCH 130/165] fix: add missing word

---
 src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts b/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
index 7e053f7..7c137fc 100644
--- a/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
+++ b/src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts
@@ -3,7 +3,7 @@ import { Equal, Expect } from "../helpers/type-utils";
 
 /**
  * Returning to our useStateAsObject function, we now want to make it work
- * EXACTLY like useState, where if you NOTHING, it returns T | undefined.
+ * EXACTLY like useState, where if you pass NOTHING, it returns T | undefined.
  *
  * If you pass a default value, it should NOT include undefined.
  */

From 438190a2053ce8797816fc5d52e2777cbb080d26 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Sun, 5 May 2024 09:52:52 +0100
Subject: [PATCH 131/165] Upgraded React TS

---
 snap.md | 1397 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 1397 insertions(+)
 create mode 100644 snap.md

diff --git a/snap.md b/snap.md
new file mode 100644
index 0000000..50a7aa0
--- /dev/null
+++ b/snap.md
@@ -0,0 +1,1397 @@
+# Root TSConfig Snapshot
+
+```txt
+,src/01-introduction/03-navigating-jsx-types.problem.tsx(5,21): error TS17000: JSX attributes must only be assigned a non-empty 'expression'.
+src/02-components/04-typing-components.problem.tsx(4,29): error TS18046: 'props' is of type 'unknown'.
+src/02-components/04-typing-components.problem.tsx(10,8): error TS2578: Unused '@ts-expect-error' directive.
+src/02-components/04-typing-components.problem.tsx(13,15): error TS2322: Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'className' does not exist on type 'IntrinsicAttributes'.
+src/02-components/05-typing-components-as-functions.problem.tsx(7,1): error TS2578: Unused '@ts-expect-error' directive.
+src/02-components/05-typing-components-as-functions.problem.tsx(17,8): error TS2786: 'Button' cannot be used as a JSX component.
+  Its type '(props: Props) => { ohDear: string; }' is not a valid JSX element type.
+    Type '(props: Props) => { ohDear: string; }' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
+      Type '{ ohDear: string; }' is not assignable to type 'ReactNode'.
+src/02-components/06-typing-children.problem.tsx(4,25): error TS2339: Property 'children' does not exist on type '{}'.
+src/02-components/06-typing-children.problem.tsx(10,8): error TS2578: Unused '@ts-expect-error' directive.
+src/02-components/06-typing-children.problem.tsx(12,8): error TS2559: Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.
+src/02-components/07-typing-onclick-handlers.problem.tsx(8,47): error TS2339: Property 'onClick' does not exist on type 'ButtonProps'.
+src/02-components/08-using-html-props.problem.tsx(3,26): error TS2339: Property 'className' does not exist on type '{}'.
+src/02-components/08-using-html-props.problem.tsx(10,18): error TS2322: Type '{ onClick: () => void; type: string; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'onClick' does not exist on type 'IntrinsicAttributes'.
+src/02-components/09-html-props-with-one-changed.problem.tsx(23,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/02-components/10-extracting-props-from-custom-components.problem.tsx(18,3): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/03-hooks/11-use-state.problem.tsx(8,30): error TS2339: Property 'id' does not exist on type 'never'.
+src/03-hooks/11-use-state.problem.tsx(8,39): error TS2339: Property 'value' does not exist on type 'never'.
+src/03-hooks/11-use-state.problem.tsx(13,13): error TS2322: Type '{ id: number; value: string; }' is not assignable to type 'never'.
+src/03-hooks/11-use-state.problem.tsx(14,13): error TS2322: Type '{ id: number; value: string; }' is not assignable to type 'never'.
+src/03-hooks/12-use-state-with-undefined.problem.ts(18,15): error TS2345: Argument of type '{ id: number; name: string; }' is not assignable to parameter of type 'SetStateAction<undefined>'.
+  Type '{ id: number; name: string; }' provides no match for the signature '(prevState: undefined): undefined'.
+src/03-hooks/12-use-state-with-undefined.problem.ts(22,23): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/03-hooks/13-use-state-excess-properties.problem.tsx(22,17): error TS2578: Unused '@ts-expect-error' directive.
+src/03-hooks/13-use-state-excess-properties.problem.tsx(40,17): error TS2578: Unused '@ts-expect-error' directive.
+src/03-hooks/14-use-effect.problem.ts(6,7): error TS2322: Type 'Timeout' is not assignable to type 'void | Destructor'.
+src/03-hooks/15-use-callback.problem.tsx(5,31): error TS2344: Type 'string' does not satisfy the constraint 'Function'.
+src/03-hooks/15-use-callback.problem.tsx(6,6): error TS7006: Parameter 'buttonName' implicitly has an 'any' type.
+src/03-hooks/15-use-callback.problem.tsx(12,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/03-hooks/15-use-callback.problem.tsx(16,30): error TS2349: This expression is not callable.
+  Type 'String' has no call signatures.
+src/03-hooks/15-use-callback.problem.tsx(17,30): error TS2349: This expression is not callable.
+  Type 'String' has no call signatures.
+src/03-hooks/15-use-callback.problem.tsx(18,30): error TS2349: This expression is not callable.
+  Type 'String' has no call signatures.
+src/03-hooks/16-use-memo.problem.tsx(5,52): error TS2345: Argument of type '() => string[]' is not assignable to parameter of type '() => () => string[]'.
+  Type 'string[]' is not assignable to type '() => string[]'.
+    Type 'string[]' provides no match for the signature '(): string[]'.
+src/03-hooks/16-use-memo.problem.tsx(12,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/03-hooks/17-use-ref-basics.problem.tsx(7,5): error TS2322: Type '"Random value!"' is not assignable to type 'undefined'.
+src/03-hooks/18-element-refs.explainer.tsx(19,7): error TS2322: Type 'undefined' is not assignable to type 'HTMLDivElement | null'.
+src/03-hooks/19-use-ref-with-elements.problem.tsx(6,15): error TS2322: Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
+  Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.
+    Types of property 'current' are incompatible.
+      Type 'HTMLDivElement | undefined' is not assignable to type 'HTMLDivElement | null'.
+        Type 'undefined' is not assignable to type 'HTMLDivElement | null'.
+src/03-hooks/20-why-is-my-ref-readonly.problem.tsx(7,7): error TS2540: Cannot assign to 'current' because it is a read-only property.
+src/03-hooks/20-why-is-my-ref-readonly.solution.tsx(10,18): error TS2540: Cannot assign to 'current' because it is a read-only property.
+src/03-hooks/21-use-reducer.problem.ts(5,11): error TS18046: 'action' is of type 'unknown'.
+src/03-hooks/21-use-reducer.problem.ts(7,23): error TS18046: 'state' is of type 'unknown'.
+src/03-hooks/21-use-reducer.problem.ts(7,37): error TS18046: 'action' is of type 'unknown'.
+src/03-hooks/21-use-reducer.problem.ts(9,23): error TS18046: 'state' is of type 'unknown'.
+src/03-hooks/21-use-reducer.problem.ts(9,37): error TS18046: 'action' is of type 'unknown'.
+src/03-hooks/21-use-reducer.problem.ts(21,1): error TS2578: Unused '@ts-expect-error' directive.
+src/03-hooks/21-use-reducer.problem.ts(24,1): error TS2578: Unused '@ts-expect-error' directive.
+src/03-hooks/21-use-reducer.problem.ts(27,1): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/22-discriminated-union-props.problem.tsx(34,9): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx(19,34): error TS2339: Property 'title' does not exist on type 'ModalProps'.
+src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx(18,31): error TS2339: Property 'title' does not exist on type '{} | { title: string; }'.
+  Property 'title' does not exist on type '{}'.
+src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(21,36): error TS2339: Property 'buttonColor' does not exist on type '{ variant: "no-title"; }'.
+src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(34,36): error TS2339: Property 'buttonColor' does not exist on type '{ variant: "title"; title: string; }'.
+src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(50,9): error TS2322: Type '{ buttonColor: string; variant: "no-title"; title: string; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.
+  Property 'buttonColor' does not exist on type 'IntrinsicAttributes & { variant: "no-title"; }'.
+src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(52,9): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(55,44): error TS2322: Type '{ variant: "title"; title: string; buttonColor: string; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.
+  Property 'buttonColor' does not exist on type 'IntrinsicAttributes & { variant: "title"; title: string; }'.
+src/04-advanced-props/25-toggle-props.problem.tsx(38,5): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/25-toggle-props.problem.tsx(42,4): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx(40,8): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx(43,8): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(15,30): error TS2345: Argument of type 'ReactNode' is not assignable to parameter of type '(value: number, index: number, array: number[]) => ReactNode'.
+  Type 'undefined' is not assignable to type '(value: number, index: number, array: number[]) => ReactNode'.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(22,19): error TS2322: Type '(index: any) => Element' is not assignable to type 'ReactNode'.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(22,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(23,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(28,19): error TS2322: Type '(index: any) => null' is not assignable to type 'ReactNode'.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(28,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(33,9): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(37,9): error TS2322: Type '(index: any) => any' is not assignable to type 'ReactNode'.
+src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(37,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
+src/04-advanced-props/31-as-const.problem.ts(13,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-props/31-as-const.problem.ts(14,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(6,3): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(11,4): error TS2322: Type '{ children: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
+  Type '{ children: string; type: string; illegalProperty: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
+    Types of property 'type' are incompatible.
+      Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.
+src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(16,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(7,5): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(13,5): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(19,5): error TS2578: Unused '@ts-expect-error' directive.
+src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(48,11): error TS2322: Type '{ children: string; className: string; type: string; illegalProperty: string; } | { children: string; className: string; type: string; illegalProperty: string; } | { children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
+  Type '{ children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
+    Type '{ children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
+      Types of property 'type' are incompatible.
+        Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.
+src/05-generics/36-type-helpers-with-constraints.problem.tsx(14,3): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/36-type-helpers-with-constraints.problem.tsx(16,3): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/36-type-helpers-with-constraints.problem.tsx(18,3): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/37-generic-localstorage-hook.problem.ts(28,30): error TS2558: Expected 0 type arguments, but got 1.
+src/05-generics/37-generic-localstorage-hook.problem.ts(35,24): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/37-generic-localstorage-hook.problem.ts(41,5): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/38-generic-hooks.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/38-generic-hooks.problem.ts(25,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/38-generic-hooks.problem.ts(35,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/38-generic-hooks.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/39-generic-props.problem.tsx(41,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/39-generic-props.problem.tsx(45,17): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/40-generic-class-components.problem.tsx(37,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/40-generic-class-components.problem.tsx(41,17): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/41-passing-types-to-components.problem.tsx(29,5): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/41-passing-types-to-components.problem.tsx(32,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/41-passing-types-to-components.problem.tsx(33,23): error TS2339: Property 'name' does not exist on type 'number'.
+src/05-generics/41-passing-types-to-components.problem.tsx(44,9): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/41-passing-types-to-components.problem.tsx(51,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx(44,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/05-generics/43-inference-flow-with-constraints.problem.ts(42,1): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/43-inference-flow-with-constraints.problem.ts(52,5): error TS2578: Unused '@ts-expect-error' directive.
+src/05-generics/43-inference-flow-with-constraints.problem.ts(60,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/45-tuple-return-type.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/45-tuple-return-type.problem.ts(24,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/46-required-context.problem.tsx(33,55): error TS2558: Expected 0 type arguments, but got 1.
+src/06-advanced-hooks/46-required-context.problem.tsx(37,57): error TS2558: Expected 0 type arguments, but got 1.
+src/06-advanced-hooks/46-required-context.problem.tsx(42,16): error TS2554: Expected 1 arguments, but got 0.
+src/06-advanced-hooks/46-required-context.problem.tsx(45,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/46-required-context.problem.tsx(53,17): error TS2554: Expected 1 arguments, but got 0.
+src/06-advanced-hooks/46-required-context.problem.tsx(56,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/46-required-context.problem.tsx(70,21): error TS2322: Type '{ name: string; }' is not assignable to type 'null'.
+src/06-advanced-hooks/46-required-context.problem.tsx(72,11): error TS2322: Type '{ primaryColor: string; }' is not assignable to type 'null'.
+src/06-advanced-hooks/47-unions-in-usestate.problem.tsx(45,3): error TS2578: Unused '@ts-expect-error' directive.
+src/06-advanced-hooks/47-unions-in-usestate.problem.tsx(62,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(28,37): error TS2353: Object literal may only specify known properties, and 'error' does not exist in type 'SetStateAction<{ status: string; }>'.
+src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(36,3): error TS2578: Unused '@ts-expect-error' directive.
+src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(46,25): error TS2339: Property 'error' does not exist on type '{ status: string; }'.
+src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(46,25): error TS18048: 'value' is possibly 'undefined'.
+src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(46,31): error TS2339: Property 'message' does not exist on type 'Error | { title: string; }'.
+  Property 'message' does not exist on type '{ title: string; }'.
+src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(49,16): error TS18048: 'value' is possibly 'undefined'.
+src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(49,22): error TS2339: Property 'title' does not exist on type 'Error | { title: string; }'.
+  Property 'title' does not exist on type 'Error'.
+src/06-advanced-hooks/50-use-state-overloads.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(37,22): error TS2554: Expected 1 arguments, but got 0.
+src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(40,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(42,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/06-advanced-hooks/52-currying-hooks.problem.ts(38,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
+src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
+src/07-types-deep-dive/55-strongly-typing-children.problem.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
+  Type 'ReactElement<any, any>' is not assignable to type '{ __brand: "OPTION_TYPE"; } & ReactPortal'.
+    Property '__brand' is missing in type 'ReactElement<any, any>' but required in type '{ __brand: "OPTION_TYPE"; }'.
+src/07-types-deep-dive/55-strongly-typing-children.solution.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
+  Type 'ReactElement<any, any>' is not assignable to type '{ __brand: "OPTION_TYPE"; } & ReactPortal'.
+    Property '__brand' is missing in type 'ReactElement<any, any>' but required in type '{ __brand: "OPTION_TYPE"; }'.
+src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts(15,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts(15,32): error TS2694: Namespace 'React' has no exported member 'MyInterface'.
+src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts(25,3): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/07-types-deep-dive/60-add-new-global-element.problem.tsx(14,3): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/60-add-new-global-element.problem.tsx(14,23): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(10,8): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(11,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(12,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(13,6): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(14,9): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
+src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(15,12): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
+  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
+src/08-advanced-patterns/63-lazy-load-component.problem.tsx(20,44): error TS2345: Argument of type 'unknown' is not assignable to parameter of type '() => Promise<{ default: ComponentType<any>; }>'.
+src/08-advanced-patterns/63-lazy-load-component.problem.tsx(30,62): error TS2322: Type '{ loader: () => Promise<typeof import("/Users/matt/repos/total-typescript/react-typescript-tutorial/src/fake-external-lib/component")>; id: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
+  Property 'id' does not exist on type 'IntrinsicAttributes & Props'.
+src/08-advanced-patterns/63-lazy-load-component.problem.tsx(38,4): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/64-render-props.problem.tsx(43,9): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/64-render-props.problem.tsx(44,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(16,10): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(19,12): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(22,14): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(28,21): error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ text: (props: any) => Element; number: (props: any) => Element; password: (props: any) => Element; }'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(28,32): error TS18046: 'props' is of type 'unknown'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(29,25): error TS2698: Spread types may only be created from object types.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(34,5): error TS2322: Type '{ type: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'type' does not exist on type 'IntrinsicAttributes'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(35,16): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(37,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(40,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'type' does not exist on type 'IntrinsicAttributes'.
+src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(41,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
+  Property 'type' does not exist on type 'IntrinsicAttributes'.
+src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx(52,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx(31,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(37,21): error TS7006: Parameter 'row' implicitly has an 'any' type.
+src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(38,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(43,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(46,21): error TS7006: Parameter 'row' implicitly has an 'any' type.
+src/08-advanced-patterns/67-hoc.problem.tsx(28,5): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx(40,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx(48,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/69-as-prop.problem.tsx(41,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/69-as-prop.problem.tsx(48,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/69-as-prop.problem.tsx(50,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/69-as-prop.problem.tsx(67,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/69-as-prop.problem.tsx(74,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/69-as-prop.problem.tsx(75,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(12,32): error TS2304: Cannot find name 'AsProps'.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(26,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(33,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(35,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(52,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(59,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/69-as-prop.solution.1.tsx(60,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(67,16): error TS2322: Type '(props: {    thisIsRequired: boolean;}) => JSX.Element' is not assignable to type 'keyof IntrinsicElements'.
+src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(69,9): error TS2322: Type '(props: {    thisIsRequired: boolean;}) => JSX.Element' is not assignable to type 'keyof IntrinsicElements'.
+src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(70,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(20,8): error TS2741: Property 'as' is missing in type '{ doesNotExist: true; }' but required in type '{ as: ElementType; }'.
+src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(21,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(25,8): error TS2741: Property 'as' is missing in type '{ onClick: (e: any) => void; }' but required in type '{ as: ElementType; }'.
+src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(27,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(29,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(12,11): error TS2322: Type 'Omit<{ as?: T | undefined; } & ComponentPropsWithoutRef<PermittedElements extends T ? "p" : T>, "as">' is not assignable to type 'IntrinsicAttributes & ((ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & ClassAttributes<...> & LabelHTMLAttributes<...> & ClassAttributes<...> & HTMLAttributes<...>) | LibraryManagedAttributes<...>)'.
+  Type 'Omit<{ as?: T | undefined; } & ComponentPropsWithoutRef<PermittedElements extends T ? "p" : T>, "as">' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<T, ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & ClassAttributes<...> & LabelHTMLAttributes<...> & ClassAttributes<...> & HTMLAttributes<...>>'.
+    Type 'Omit<{ as?: T | undefined; } & ComponentPropsWithoutRef<PermittedElements extends T ? "p" : T>, "as">' is not assignable to type 'LibraryManagedAttributes<T, ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & ClassAttributes<...> & LabelHTMLAttributes<...> & ClassAttributes<...> & HTMLAttributes<...>>'.
+src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(29,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
+src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(31,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(47,9): error TS2322: Type '"button"' is not assignable to type 'PermittedElements | undefined'.
+src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(48,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(53,9): error TS2322: Type '"button"' is not assignable to type 'PermittedElements | undefined'.
+src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(57,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(79,19): error TS2322: Type '(props: {    thisIsRequired: boolean;}, ref: React.ForwardedRef<HTMLAnchorElement>) => JSX.Element' is not assignable to type 'PermittedElements | undefined'.
+src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(81,9): error TS2322: Type '(props: {    thisIsRequired: boolean;}, ref: React.ForwardedRef<HTMLAnchorElement>) => JSX.Element' is not assignable to type 'PermittedElements | undefined'.
+src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(82,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(42,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(80,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(95,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(121,25): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
+  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(128,8): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(131,35): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; ref: RefObject<HTMLAnchorElement>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
+  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(135,9): error TS2578: Unused '@ts-expect-error' directive.
+src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(137,9): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; ref: RefObject<HTMLDivElement>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
+  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
+src/09-external-libraries/73-react-hook-form.problem.tsx(70,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/73-react-hook-form.problem.tsx(75,8): error TS2578: Unused '@ts-expect-error' directive.
+src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(33,3): error TS2578: Unused '@ts-expect-error' directive.
+src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(46,5): error TS2344: Type 'boolean' does not satisfy the constraint 'true'.
+src/09-external-libraries/75-react-select.problem.tsx(10,24): error TS7006: Parameter 'props' implicitly has an 'any' type.
+src/09-external-libraries/75-react-select.problem.tsx(33,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
+src/09-external-libraries/75-react-select.problem.tsx(36,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/75-react-select.problem.tsx(43,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
+src/09-external-libraries/75-react-select.problem.tsx(45,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/77-react-query-wrapper.problem.ts(30,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/77-react-query-wrapper.problem.ts(44,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+src/09-external-libraries/77-react-query-wrapper.problem.ts(51,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
+,
+```
+
+
+
+# Vitest Snapshot
+
+```json
+{
+  "success": false,
+  "testResults": [
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/01-introduction/01-react-in-typescript.explainer.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/01-introduction/02-typescript-in-react-frameworks.explainer.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Transform failed with 1 error:\n/Users/matt/repos/total-typescript/react-typescript-tutorial/src/01-introduction/03-navigating-jsx-types.problem.tsx:5:21: ERROR: Unexpected \"}\"",
+      "name": "src/01-introduction/03-navigating-jsx-types.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/01-introduction/03-navigating-jsx-types.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/04-typing-components.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/04-typing-components.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/04-typing-components.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/04-typing-components.solution.3.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/04-typing-components.solution.4.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/05-typing-components-as-functions.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/05-typing-components-as-functions.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/06-typing-children.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/06-typing-children.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/07-typing-onclick-handlers.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/07-typing-onclick-handlers.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/08-using-html-props.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/08-using-html-props.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/08-using-html-props.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/09-html-props-with-one-changed.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/09-html-props-with-one-changed.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/09-html-props-with-one-changed.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/09-html-props-with-one-changed.solution.3.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/09-html-props-with-one-changed.solution.4.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/10-extracting-props-from-custom-components.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/02-components/10-extracting-props-from-custom-components.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/11-use-state.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/11-use-state.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/12-use-state-with-undefined.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/12-use-state-with-undefined.solution.1.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/12-use-state-with-undefined.solution.2.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/13-use-state-excess-properties.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/13-use-state-excess-properties.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/14-use-effect.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/14-use-effect.solution.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/15-use-callback.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/15-use-callback.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/16-use-memo.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/16-use-memo.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/16-use-memo.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/16-use-memo.solution.3.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/17-use-ref-basics.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/17-use-ref-basics.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/18-element-refs.explainer.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/19-use-ref-with-elements.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/19-use-ref-with-elements.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/20-why-is-my-ref-readonly.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/03-hooks/20-why-is-my-ref-readonly.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useReducer')",
+      "name": "src/03-hooks/21-use-reducer.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useReducer')",
+      "name": "src/03-hooks/21-use-reducer.solution.1.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useReducer')",
+      "name": "src/03-hooks/21-use-reducer.solution.2.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useReducer')",
+      "name": "src/03-hooks/21-use-reducer.solution.3.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/22-discriminated-union-props.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/22-discriminated-union-props.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/25-toggle-props.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/25-toggle-props.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/26-empty-object-type.explainer.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/29-variants-with-classnames.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/29-variants-with-classnames.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/30-partial-autocomplete.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/30-partial-autocomplete.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/31-as-const.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/31-as-const.solution.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/33-prop-groups-with-variants.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/04-advanced-props/33-prop-groups-with-variants.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/34-type-helpers.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/34-type-helpers.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/35-type-helpers-2.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/35-type-helpers-2.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/36-type-helpers-with-constraints.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/36-type-helpers-with-constraints.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/36-type-helpers-with-constraints.solution.2.tsx"
+    },
+    {
+      "assertionResults": [
+        {
+          "ancestorTitles": [
+            ""
+          ],
+          "fullName": " Should let you set and get values",
+          "status": "passed",
+          "title": "Should let you set and get values",
+          "failureMessages": []
+        },
+        {
+          "ancestorTitles": [
+            ""
+          ],
+          "fullName": " Should not let you set a value that is not the same type as the type argument passed",
+          "status": "passed",
+          "title": "Should not let you set a value that is not the same type as the type argument passed",
+          "failureMessages": []
+        }
+      ],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/37-generic-localstorage-hook.problem.ts"
+    },
+    {
+      "assertionResults": [
+        {
+          "ancestorTitles": [
+            ""
+          ],
+          "fullName": " Should let you set and get values",
+          "status": "passed",
+          "title": "Should let you set and get values",
+          "failureMessages": []
+        },
+        {
+          "ancestorTitles": [
+            ""
+          ],
+          "fullName": " Should not let you set a value that is not the same type as the type argument passed",
+          "status": "passed",
+          "title": "Should not let you set a value that is not the same type as the type argument passed",
+          "failureMessages": []
+        }
+      ],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/37-generic-localstorage-hook.solution.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/05-generics/38-generic-hooks.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/05-generics/38-generic-hooks.solution.1.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/05-generics/38-generic-hooks.solution.2.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/05-generics/38-generic-hooks.solution.3.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/05-generics/38-generic-hooks.solution.4.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/05-generics/38-generic-hooks.solution.5.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/39-generic-props.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/39-generic-props.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/40-generic-class-components.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/40-generic-class-components.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/41-passing-types-to-components.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/41-passing-types-to-components.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/05-generics/43-inference-flow-with-constraints.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/05-generics/43-inference-flow-with-constraints.solution.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/44-generics-vs-discriminated-unions.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/05-generics/44-generics-vs-discriminated-unions.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/06-advanced-hooks/45-tuple-return-type.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/06-advanced-hooks/45-tuple-return-type.solution.1.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/06-advanced-hooks/45-tuple-return-type.solution.2.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/46-required-context.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/46-required-context.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/46-required-context.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/47-unions-in-usestate.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/47-unions-in-usestate.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/50-use-state-overloads.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/50-use-state-overloads.solution.1.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/50-use-state-overloads.solution.2.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useState')",
+      "name": "src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/52-currying-hooks.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/06-advanced-hooks/52-currying-hooks.solution.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/55-strongly-typing-children.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/55-strongly-typing-children.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "React is not defined",
+      "name": "src/07-types-deep-dive/57-react-component-type.explainer.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/58-appending-to-global-namespace.solution.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/59-declaration-merging-in-global-namespace.solution.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/60-add-new-global-element.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/60-add-new-global-element.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/61-html-attributes.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/61-html-attributes.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/07-types-deep-dive/62-add-attribute-to-all-elements.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/63-lazy-load-component.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/63-lazy-load-component.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/64-render-props.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/64-render-props.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/67-hoc.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/67-hoc.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/69-as-prop.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/69-as-prop.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/69-as-prop.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/71-as-prop-with-default.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/71-as-prop-with-default.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/09-external-libraries/73-react-hook-form.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/09-external-libraries/73-react-hook-form.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useRef')",
+      "name": "src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useRef')",
+      "name": "src/09-external-libraries/74-react-hook-form-wrapper.solution.1.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useRef')",
+      "name": "src/09-external-libraries/74-react-hook-form-wrapper.solution.2.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/09-external-libraries/75-react-select.problem.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "passed",
+      "message": "",
+      "name": "src/09-external-libraries/75-react-select.solution.tsx"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useContext')",
+      "name": "src/09-external-libraries/76-react-query.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useContext')",
+      "name": "src/09-external-libraries/76-react-query.solution.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useContext')",
+      "name": "src/09-external-libraries/77-react-query-wrapper.problem.ts"
+    },
+    {
+      "assertionResults": [],
+      "status": "failed",
+      "message": "Cannot read properties of null (reading 'useContext')",
+      "name": "src/09-external-libraries/77-react-query-wrapper.solution.ts"
+    }
+  ]
+}
+```
\ No newline at end of file

From a2a98e4ac35a5457b8807261b6d34ad8b5d4e99d Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Sun, 5 May 2024 09:52:57 +0100
Subject: [PATCH 132/165] Upgrade

---
 package-lock.json | 1635 +++++++++++++++++++++++++++++++--------------
 package.json      |   28 +-
 2 files changed, 1148 insertions(+), 515 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5cd5ac5..df881f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,13 +21,13 @@
         "zod": "^3.21.4"
       },
       "devDependencies": {
-        "@total-typescript/exercise-cli": "^0.4.0",
+        "@total-typescript/exercise-cli": "^0.5.1",
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
-        "typescript": "^5.2.2",
+        "typescript": "^5.4.5",
         "vite-tsconfig-paths": "^4.0.7",
-        "vitest": "^0.34.4"
+        "vitest": "^1.6.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -217,9 +217,9 @@
       "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
-      "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.8.tgz",
+      "integrity": "sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==",
       "cpu": [
         "arm"
       ],
@@ -233,9 +233,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz",
-      "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.8.tgz",
+      "integrity": "sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==",
       "cpu": [
         "arm64"
       ],
@@ -249,9 +249,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz",
-      "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.8.tgz",
+      "integrity": "sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==",
       "cpu": [
         "x64"
       ],
@@ -265,9 +265,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz",
-      "integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.8.tgz",
+      "integrity": "sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==",
       "cpu": [
         "arm64"
       ],
@@ -281,9 +281,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz",
-      "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.8.tgz",
+      "integrity": "sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==",
       "cpu": [
         "x64"
       ],
@@ -297,9 +297,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz",
-      "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.8.tgz",
+      "integrity": "sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==",
       "cpu": [
         "arm64"
       ],
@@ -313,9 +313,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz",
-      "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.8.tgz",
+      "integrity": "sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==",
       "cpu": [
         "x64"
       ],
@@ -329,9 +329,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz",
-      "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.8.tgz",
+      "integrity": "sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==",
       "cpu": [
         "arm"
       ],
@@ -345,9 +345,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz",
-      "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.8.tgz",
+      "integrity": "sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==",
       "cpu": [
         "arm64"
       ],
@@ -361,9 +361,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz",
-      "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.8.tgz",
+      "integrity": "sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==",
       "cpu": [
         "ia32"
       ],
@@ -377,9 +377,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz",
-      "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.8.tgz",
+      "integrity": "sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==",
       "cpu": [
         "loong64"
       ],
@@ -393,9 +393,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz",
-      "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.8.tgz",
+      "integrity": "sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==",
       "cpu": [
         "mips64el"
       ],
@@ -409,9 +409,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz",
-      "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.8.tgz",
+      "integrity": "sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==",
       "cpu": [
         "ppc64"
       ],
@@ -425,9 +425,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz",
-      "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.8.tgz",
+      "integrity": "sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==",
       "cpu": [
         "riscv64"
       ],
@@ -441,9 +441,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz",
-      "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.8.tgz",
+      "integrity": "sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==",
       "cpu": [
         "s390x"
       ],
@@ -457,9 +457,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz",
-      "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.8.tgz",
+      "integrity": "sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==",
       "cpu": [
         "x64"
       ],
@@ -473,9 +473,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz",
-      "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.8.tgz",
+      "integrity": "sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==",
       "cpu": [
         "x64"
       ],
@@ -489,9 +489,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz",
-      "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.8.tgz",
+      "integrity": "sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==",
       "cpu": [
         "x64"
       ],
@@ -505,9 +505,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz",
-      "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.8.tgz",
+      "integrity": "sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==",
       "cpu": [
         "x64"
       ],
@@ -521,9 +521,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz",
-      "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.8.tgz",
+      "integrity": "sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==",
       "cpu": [
         "arm64"
       ],
@@ -537,9 +537,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz",
-      "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.8.tgz",
+      "integrity": "sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==",
       "cpu": [
         "ia32"
       ],
@@ -553,9 +553,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz",
-      "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.8.tgz",
+      "integrity": "sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==",
       "cpu": [
         "x64"
       ],
@@ -634,6 +634,162 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.6.1.tgz",
+      "integrity": "sha512-0WQ0ouLejaUCRsL93GD4uft3rOmB8qoQMU05Kb8CmMtMBe7XUDLAltxVZI1q6byNqEtU7N1ZX1Vw5lIpgulLQA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.6.1.tgz",
+      "integrity": "sha512-1TKm25Rn20vr5aTGGZqo6E4mzPicCUD79k17EgTLAsXc1zysyi4xXKACfUbwyANEPAEIxkzwue6JZ+stYzWUTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.6.1.tgz",
+      "integrity": "sha512-cEXJQY/ZqMACb+nxzDeX9IPLAg7S94xouJJCNVE5BJM8JUEP4HeTF+ti3cmxWeSJo+5D+o8Tc0UAWUkfENdeyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.6.1.tgz",
+      "integrity": "sha512-LoSU9Xu56isrkV2jLldcKspJ7sSXmZWkAxg7sW/RfF7GS4F5/v4EiqKSMCFbZtDu2Nc1gxxFdQdKwkKS4rwxNg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.6.1.tgz",
+      "integrity": "sha512-EfI3hzYAy5vFNDqpXsNxXcgRDcFHUWSx5nnRSCKwXuQlI5J9dD84g2Usw81n3FLBNsGCegKGwwTVsSKK9cooSQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.6.1.tgz",
+      "integrity": "sha512-9lhc4UZstsegbNLhH0Zu6TqvDfmhGzuCWtcTFXY10VjLLUe4Mr0Ye2L3rrtHaDd/J5+tFMEuo5LTCSCMXWfUKw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.6.1.tgz",
+      "integrity": "sha512-FfoOK1yP5ksX3wwZ4Zk1NgyGHZyuRhf99j64I5oEmirV8EFT7+OhUZEnP+x17lcP/QHJNWGsoJwrz4PJ9fBEXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.6.1.tgz",
+      "integrity": "sha512-DNGZvZDO5YF7jN5fX8ZqmGLjZEXIJRdJEdTFMhiyXqyXubBa0WVLDWSNlQ5JR2PNgDbEV1VQowhVRUh+74D+RA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.6.1.tgz",
+      "integrity": "sha512-RkJVNVRM+piYy87HrKmhbexCHg3A6Z6MU0W9GHnJwBQNBeyhCJG9KDce4SAMdicQnpURggSvtbGo9xAWOfSvIQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.6.1.tgz",
+      "integrity": "sha512-v2FVT6xfnnmTe3W9bJXl6r5KwJglMK/iRlkKiIFfO6ysKs0rDgz7Cwwf3tjldxQUrHL9INT/1r4VA0n9L/F1vQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.6.1.tgz",
+      "integrity": "sha512-YEeOjxRyEjqcWphH9dyLbzgkF8wZSKAKUkldRY6dgNR5oKs2LZazqGB41cWJ4Iqqcy9/zqYgmzBkRoVz3Q9MLw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.6.1.tgz",
+      "integrity": "sha512-0zfTlFAIhgz8V2G8STq8toAjsYYA6eci1hnXuyOTUFnymrtJwnS6uGKiv3v5UrPZkBlamLvrLV2iiaeqCKzb0A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -685,9 +841,9 @@
       }
     },
     "node_modules/@total-typescript/exercise-cli": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.4.0.tgz",
-      "integrity": "sha512-iSliKtEM1nShevoVQbEsnuT2D9s74taI2GIuUmIziReROUHRfj1TSQ16X0WMGPZsWp/XxX5ZvkoM4h1Eg21uLw==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.5.1.tgz",
+      "integrity": "sha512-6r7UUYyxJY4rkAeq98jW80gSAivhq9h32X3vhlehecWeVDNRZnZJyBN3U+YKmJUZccwO3d4yWXy50mvdU9M0BA==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
@@ -701,8 +857,8 @@
         "tt-cli": "dist/bin.js"
       },
       "peerDependencies": {
-        "typescript": "^5.2.2",
-        "vitest": "^0.34.4"
+        "typescript": "^5",
+        "vitest": "^1"
       }
     },
     "node_modules/@types/body-parser": {
@@ -714,21 +870,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/chai": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz",
-      "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==",
-      "dev": true
-    },
-    "node_modules/@types/chai-subset": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.3.tgz",
-      "integrity": "sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==",
-      "dev": true,
-      "dependencies": {
-        "@types/chai": "*"
-      }
-    },
     "node_modules/@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -737,6 +878,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
     "node_modules/@types/express": {
       "version": "4.17.17",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
@@ -839,27 +986,27 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.4.tgz",
-      "integrity": "sha512-XlMKX8HyYUqB8dsY8Xxrc64J2Qs9pKMt2Z8vFTL4mBWXJsg4yoALHzJfDWi8h5nkO4Zua4zjqtapQ/IluVkSnA==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
+      "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
       "dev": true,
       "dependencies": {
-        "@vitest/spy": "0.34.4",
-        "@vitest/utils": "0.34.4",
-        "chai": "^4.3.7"
+        "@vitest/spy": "1.6.0",
+        "@vitest/utils": "1.6.0",
+        "chai": "^4.3.10"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.34.4.tgz",
-      "integrity": "sha512-hwwdB1StERqUls8oV8YcpmTIpVeJMe4WgYuDongVzixl5hlYLT2G8afhcdADeDeqCaAmZcSgLTLtqkjPQF7x+w==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz",
+      "integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==",
       "dev": true,
       "dependencies": {
-        "@vitest/utils": "0.34.4",
-        "p-limit": "^4.0.0",
+        "@vitest/utils": "1.6.0",
+        "p-limit": "^5.0.0",
         "pathe": "^1.1.1"
       },
       "funding": {
@@ -867,40 +1014,41 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.34.4.tgz",
-      "integrity": "sha512-GCsh4coc3YUSL/o+BPUo7lHQbzpdttTxL6f4q0jRx2qVGoYz/cyTRDJHbnwks6TILi6560bVWoBpYC10PuTLHw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz",
+      "integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==",
       "dev": true,
       "dependencies": {
-        "magic-string": "^0.30.1",
+        "magic-string": "^0.30.5",
         "pathe": "^1.1.1",
-        "pretty-format": "^29.5.0"
+        "pretty-format": "^29.7.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.34.4.tgz",
-      "integrity": "sha512-PNU+fd7DUPgA3Ya924b1qKuQkonAW6hL7YUjkON3wmBwSTIlhOSpy04SJ0NrRsEbrXgMMj6Morh04BMf8k+w0g==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz",
+      "integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==",
       "dev": true,
       "dependencies": {
-        "tinyspy": "^2.1.1"
+        "tinyspy": "^2.2.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.34.4.tgz",
-      "integrity": "sha512-yR2+5CHhp/K4ySY0Qtd+CAL9f5Yh1aXrKfAT42bq6CtlGPh92jIDDDSg7ydlRow1CP+dys4TrOrbELOyNInHSg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz",
+      "integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==",
       "dev": true,
       "dependencies": {
-        "diff-sequences": "^29.4.3",
-        "loupe": "^2.3.6",
-        "pretty-format": "^29.5.0"
+        "diff-sequences": "^29.6.3",
+        "estree-walker": "^3.0.3",
+        "loupe": "^2.3.7",
+        "pretty-format": "^29.7.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
@@ -947,9 +1095,9 @@
       }
     },
     "node_modules/acorn-walk": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
+      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
       "dev": true,
       "engines": {
         "node": ">=0.4.0"
@@ -1131,18 +1279,18 @@
       }
     },
     "node_modules/chai": {
-      "version": "4.3.8",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.8.tgz",
-      "integrity": "sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
+      "integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==",
       "dev": true,
       "dependencies": {
         "assertion-error": "^1.1.0",
-        "check-error": "^1.0.2",
-        "deep-eql": "^4.1.2",
-        "get-func-name": "^2.0.0",
-        "loupe": "^2.3.1",
+        "check-error": "^1.0.3",
+        "deep-eql": "^4.1.3",
+        "get-func-name": "^2.0.2",
+        "loupe": "^2.3.6",
         "pathval": "^1.1.1",
-        "type-detect": "^4.0.5"
+        "type-detect": "^4.0.8"
       },
       "engines": {
         "node": ">=4"
@@ -1181,10 +1329,13 @@
       }
     },
     "node_modules/check-error": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
-      "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
+      "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
       "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.2"
+      },
       "engines": {
         "node": "*"
       }
@@ -1320,6 +1471,20 @@
         "node-fetch": "^2.6.11"
       }
     },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/cssstyle": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
@@ -1473,9 +1638,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
-      "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.8.tgz",
+      "integrity": "sha512-l7iffQpT2OrZfH2rXIp7/FkmaeZM0vxbxN9KfiCwGYuZqzMg/JdvX26R31Zxn/Pxvsrg3Y9N6XTcnknqDyyv4w==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -1485,28 +1650,28 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.17.19",
-        "@esbuild/android-arm64": "0.17.19",
-        "@esbuild/android-x64": "0.17.19",
-        "@esbuild/darwin-arm64": "0.17.19",
-        "@esbuild/darwin-x64": "0.17.19",
-        "@esbuild/freebsd-arm64": "0.17.19",
-        "@esbuild/freebsd-x64": "0.17.19",
-        "@esbuild/linux-arm": "0.17.19",
-        "@esbuild/linux-arm64": "0.17.19",
-        "@esbuild/linux-ia32": "0.17.19",
-        "@esbuild/linux-loong64": "0.17.19",
-        "@esbuild/linux-mips64el": "0.17.19",
-        "@esbuild/linux-ppc64": "0.17.19",
-        "@esbuild/linux-riscv64": "0.17.19",
-        "@esbuild/linux-s390x": "0.17.19",
-        "@esbuild/linux-x64": "0.17.19",
-        "@esbuild/netbsd-x64": "0.17.19",
-        "@esbuild/openbsd-x64": "0.17.19",
-        "@esbuild/sunos-x64": "0.17.19",
-        "@esbuild/win32-arm64": "0.17.19",
-        "@esbuild/win32-ia32": "0.17.19",
-        "@esbuild/win32-x64": "0.17.19"
+        "@esbuild/android-arm": "0.19.8",
+        "@esbuild/android-arm64": "0.19.8",
+        "@esbuild/android-x64": "0.19.8",
+        "@esbuild/darwin-arm64": "0.19.8",
+        "@esbuild/darwin-x64": "0.19.8",
+        "@esbuild/freebsd-arm64": "0.19.8",
+        "@esbuild/freebsd-x64": "0.19.8",
+        "@esbuild/linux-arm": "0.19.8",
+        "@esbuild/linux-arm64": "0.19.8",
+        "@esbuild/linux-ia32": "0.19.8",
+        "@esbuild/linux-loong64": "0.19.8",
+        "@esbuild/linux-mips64el": "0.19.8",
+        "@esbuild/linux-ppc64": "0.19.8",
+        "@esbuild/linux-riscv64": "0.19.8",
+        "@esbuild/linux-s390x": "0.19.8",
+        "@esbuild/linux-x64": "0.19.8",
+        "@esbuild/netbsd-x64": "0.19.8",
+        "@esbuild/openbsd-x64": "0.19.8",
+        "@esbuild/sunos-x64": "0.19.8",
+        "@esbuild/win32-arm64": "0.19.8",
+        "@esbuild/win32-ia32": "0.19.8",
+        "@esbuild/win32-x64": "0.19.8"
       }
     },
     "node_modules/escape-html": {
@@ -1569,6 +1734,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -1586,6 +1760,29 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
     "node_modules/express": {
       "version": "4.18.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
@@ -1723,9 +1920,9 @@
       }
     },
     "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
       "optional": true,
@@ -1742,9 +1939,9 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "node_modules/get-func-name": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
       "dev": true,
       "engines": {
         "node": "*"
@@ -1764,6 +1961,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -1936,6 +2145,15 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -2039,6 +2257,24 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
+    "node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2128,10 +2364,14 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/local-pkg": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
-      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
+      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
       "dev": true,
+      "dependencies": {
+        "mlly": "^1.4.2",
+        "pkg-types": "^1.0.3"
+      },
       "engines": {
         "node": ">=14"
       },
@@ -2151,24 +2391,21 @@
       }
     },
     "node_modules/loupe": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
-      "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
+      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
       "dev": true,
       "dependencies": {
-        "get-func-name": "^2.0.0"
+        "get-func-name": "^2.0.1"
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.10",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
+      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
       "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
       }
     },
     "node_modules/media-typer": {
@@ -2189,6 +2426,12 @@
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
       "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
     },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2249,6 +2492,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/mlly": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
@@ -2267,9 +2522,9 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "dev": true,
       "funding": [
         {
@@ -2343,6 +2598,33 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/npm-run-path": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
+      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/nwsapi": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.4.tgz",
@@ -2376,6 +2658,21 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -2394,15 +2691,15 @@
       }
     },
     "node_modules/p-limit": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
-      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-5.0.0.tgz",
+      "integrity": "sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==",
       "dev": true,
       "dependencies": {
         "yocto-queue": "^1.0.0"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -2456,6 +2753,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -2519,9 +2825,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.23",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
-      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "version": "8.4.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
       "dev": true,
       "funding": [
         {
@@ -2538,7 +2844,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -2740,9 +3046,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "dev": true
     },
     "node_modules/react-select": {
@@ -2838,18 +3144,30 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.23.0.tgz",
-      "integrity": "sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.6.1.tgz",
+      "integrity": "sha512-jZHaZotEHQaHLgKr8JnQiDT1rmatjgKlMekyksz+yk9jt/8z9quNjnKNRoaM0wd9DC2QKXjmWWuDYtM3jfF8pQ==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
       "engines": {
-        "node": ">=14.18.0",
+        "node": ">=18.0.0",
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.6.1",
+        "@rollup/rollup-android-arm64": "4.6.1",
+        "@rollup/rollup-darwin-arm64": "4.6.1",
+        "@rollup/rollup-darwin-x64": "4.6.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.6.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.6.1",
+        "@rollup/rollup-linux-arm64-musl": "4.6.1",
+        "@rollup/rollup-linux-x64-gnu": "4.6.1",
+        "@rollup/rollup-linux-x64-musl": "4.6.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.6.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.6.1",
+        "@rollup/rollup-win32-x64-msvc": "4.6.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -2973,6 +3291,27 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -2992,6 +3331,18 @@
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
       "dev": true
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -3032,23 +3383,41 @@
       }
     },
     "node_modules/std-env": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.3.tgz",
-      "integrity": "sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.6.0.tgz",
+      "integrity": "sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg==",
       "dev": true
     },
+    "node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-literal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.1.tgz",
-      "integrity": "sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.0.tgz",
+      "integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.8.2"
+        "js-tokens": "^9.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz",
+      "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
+      "dev": true
+    },
     "node_modules/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
@@ -3083,24 +3452,24 @@
       "dev": true
     },
     "node_modules/tinybench": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz",
-      "integrity": "sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.1.tgz",
+      "integrity": "sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==",
       "dev": true
     },
     "node_modules/tinypool": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.7.0.tgz",
-      "integrity": "sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==",
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.4.tgz",
+      "integrity": "sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/tinyspy": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.1.tgz",
-      "integrity": "sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
+      "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
@@ -3215,9 +3584,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -3228,9 +3597,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.0.tgz",
-      "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.2.tgz",
+      "integrity": "sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==",
       "dev": true
     },
     "node_modules/universalify": {
@@ -3298,27 +3667,31 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.3.8",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz",
-      "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.6.tgz",
+      "integrity": "sha512-MD3joyAEBtV7QZPl2JVVUai6zHms3YOmLR+BpMzLlX2Yzjfcc4gTgNi09d/Rua3F4EtC8zdwPU8eQYyib4vVMQ==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.17.5",
-        "postcss": "^8.4.23",
-        "rollup": "^3.21.0"
+        "esbuild": "^0.19.3",
+        "postcss": "^8.4.32",
+        "rollup": "^4.2.0"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^14.18.0 || >=16.0.0"
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
       },
       "optionalDependencies": {
-        "fsevents": "~2.3.2"
+        "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": ">= 14",
+        "@types/node": "^18.0.0 || >=20.0.0",
         "less": "*",
+        "lightningcss": "^1.21.0",
         "sass": "*",
         "stylus": "*",
         "sugarss": "*",
@@ -3331,6 +3704,9 @@
         "less": {
           "optional": true
         },
+        "lightningcss": {
+          "optional": true
+        },
         "sass": {
           "optional": true
         },
@@ -3346,23 +3722,22 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.34.4.tgz",
-      "integrity": "sha512-ho8HtiLc+nsmbwZMw8SlghESEE3KxJNp04F/jPUCLVvaURwt0d+r9LxEqCX5hvrrOQ0GSyxbYr5ZfRYhQ0yVKQ==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz",
+      "integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==",
       "dev": true,
       "dependencies": {
         "cac": "^6.7.14",
         "debug": "^4.3.4",
-        "mlly": "^1.4.0",
         "pathe": "^1.1.1",
         "picocolors": "^1.0.0",
-        "vite": "^3.0.0 || ^4.0.0"
+        "vite": "^5.0.0"
       },
       "bin": {
         "vite-node": "vite-node.mjs"
       },
       "engines": {
-        "node": ">=v14.18.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
@@ -3434,59 +3809,56 @@
       "dev": true
     },
     "node_modules/vitest": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.34.4.tgz",
-      "integrity": "sha512-SE/laOsB6995QlbSE6BtkpXDeVNLJc1u2LHRG/OpnN4RsRzM3GQm4nm3PQCK5OBtrsUqnhzLdnT7se3aeNGdlw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
+      "integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==",
       "dev": true,
       "dependencies": {
-        "@types/chai": "^4.3.5",
-        "@types/chai-subset": "^1.3.3",
-        "@types/node": "*",
-        "@vitest/expect": "0.34.4",
-        "@vitest/runner": "0.34.4",
-        "@vitest/snapshot": "0.34.4",
-        "@vitest/spy": "0.34.4",
-        "@vitest/utils": "0.34.4",
-        "acorn": "^8.9.0",
-        "acorn-walk": "^8.2.0",
-        "cac": "^6.7.14",
-        "chai": "^4.3.7",
+        "@vitest/expect": "1.6.0",
+        "@vitest/runner": "1.6.0",
+        "@vitest/snapshot": "1.6.0",
+        "@vitest/spy": "1.6.0",
+        "@vitest/utils": "1.6.0",
+        "acorn-walk": "^8.3.2",
+        "chai": "^4.3.10",
         "debug": "^4.3.4",
-        "local-pkg": "^0.4.3",
-        "magic-string": "^0.30.1",
+        "execa": "^8.0.1",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.5",
         "pathe": "^1.1.1",
         "picocolors": "^1.0.0",
-        "std-env": "^3.3.3",
-        "strip-literal": "^1.0.1",
-        "tinybench": "^2.5.0",
-        "tinypool": "^0.7.0",
-        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0",
-        "vite-node": "0.34.4",
+        "std-env": "^3.5.0",
+        "strip-literal": "^2.0.0",
+        "tinybench": "^2.5.1",
+        "tinypool": "^0.8.3",
+        "vite": "^5.0.0",
+        "vite-node": "1.6.0",
         "why-is-node-running": "^2.2.2"
       },
       "bin": {
         "vitest": "vitest.mjs"
       },
       "engines": {
-        "node": ">=v14.18.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
         "@edge-runtime/vm": "*",
-        "@vitest/browser": "*",
-        "@vitest/ui": "*",
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "@vitest/browser": "1.6.0",
+        "@vitest/ui": "1.6.0",
         "happy-dom": "*",
-        "jsdom": "*",
-        "playwright": "*",
-        "safaridriver": "*",
-        "webdriverio": "*"
+        "jsdom": "*"
       },
       "peerDependenciesMeta": {
         "@edge-runtime/vm": {
           "optional": true
         },
+        "@types/node": {
+          "optional": true
+        },
         "@vitest/browser": {
           "optional": true
         },
@@ -3498,15 +3870,6 @@
         },
         "jsdom": {
           "optional": true
-        },
-        "playwright": {
-          "optional": true
-        },
-        "safaridriver": {
-          "optional": true
-        },
-        "webdriverio": {
-          "optional": true
         }
       }
     },
@@ -3600,6 +3963,21 @@
         "node": ">=14"
       }
     },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/why-is-node-running": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
@@ -3846,156 +4224,156 @@
       "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "@esbuild/android-arm": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
-      "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.8.tgz",
+      "integrity": "sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==",
       "dev": true,
       "optional": true
     },
     "@esbuild/android-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz",
-      "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.8.tgz",
+      "integrity": "sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==",
       "dev": true,
       "optional": true
     },
     "@esbuild/android-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz",
-      "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.8.tgz",
+      "integrity": "sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==",
       "dev": true,
       "optional": true
     },
     "@esbuild/darwin-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz",
-      "integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.8.tgz",
+      "integrity": "sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==",
       "dev": true,
       "optional": true
     },
     "@esbuild/darwin-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz",
-      "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.8.tgz",
+      "integrity": "sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==",
       "dev": true,
       "optional": true
     },
     "@esbuild/freebsd-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz",
-      "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.8.tgz",
+      "integrity": "sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==",
       "dev": true,
       "optional": true
     },
     "@esbuild/freebsd-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz",
-      "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.8.tgz",
+      "integrity": "sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==",
       "dev": true,
       "optional": true
     },
     "@esbuild/linux-arm": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz",
-      "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.8.tgz",
+      "integrity": "sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==",
       "dev": true,
       "optional": true
     },
     "@esbuild/linux-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz",
-      "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.8.tgz",
+      "integrity": "sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==",
       "dev": true,
       "optional": true
     },
     "@esbuild/linux-ia32": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz",
-      "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.8.tgz",
+      "integrity": "sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==",
       "dev": true,
       "optional": true
     },
     "@esbuild/linux-loong64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz",
-      "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.8.tgz",
+      "integrity": "sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==",
       "dev": true,
       "optional": true
     },
     "@esbuild/linux-mips64el": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz",
-      "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.8.tgz",
+      "integrity": "sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==",
       "dev": true,
       "optional": true
     },
     "@esbuild/linux-ppc64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz",
-      "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.8.tgz",
+      "integrity": "sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==",
       "dev": true,
       "optional": true
     },
     "@esbuild/linux-riscv64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz",
-      "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.8.tgz",
+      "integrity": "sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==",
       "dev": true,
       "optional": true
     },
     "@esbuild/linux-s390x": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz",
-      "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.8.tgz",
+      "integrity": "sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==",
       "dev": true,
       "optional": true
     },
     "@esbuild/linux-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz",
-      "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.8.tgz",
+      "integrity": "sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==",
       "dev": true,
       "optional": true
     },
     "@esbuild/netbsd-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz",
-      "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.8.tgz",
+      "integrity": "sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==",
       "dev": true,
       "optional": true
     },
     "@esbuild/openbsd-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz",
-      "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.8.tgz",
+      "integrity": "sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==",
       "dev": true,
       "optional": true
     },
     "@esbuild/sunos-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz",
-      "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.8.tgz",
+      "integrity": "sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==",
       "dev": true,
       "optional": true
     },
     "@esbuild/win32-arm64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz",
-      "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.8.tgz",
+      "integrity": "sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==",
       "dev": true,
       "optional": true
     },
     "@esbuild/win32-ia32": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz",
-      "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.8.tgz",
+      "integrity": "sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==",
       "dev": true,
       "optional": true
     },
     "@esbuild/win32-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz",
-      "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.8.tgz",
+      "integrity": "sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==",
       "dev": true,
       "optional": true
     },
@@ -4053,6 +4431,90 @@
         "fastq": "^1.6.0"
       }
     },
+    "@rollup/rollup-android-arm-eabi": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.6.1.tgz",
+      "integrity": "sha512-0WQ0ouLejaUCRsL93GD4uft3rOmB8qoQMU05Kb8CmMtMBe7XUDLAltxVZI1q6byNqEtU7N1ZX1Vw5lIpgulLQA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-android-arm64": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.6.1.tgz",
+      "integrity": "sha512-1TKm25Rn20vr5aTGGZqo6E4mzPicCUD79k17EgTLAsXc1zysyi4xXKACfUbwyANEPAEIxkzwue6JZ+stYzWUTA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-darwin-arm64": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.6.1.tgz",
+      "integrity": "sha512-cEXJQY/ZqMACb+nxzDeX9IPLAg7S94xouJJCNVE5BJM8JUEP4HeTF+ti3cmxWeSJo+5D+o8Tc0UAWUkfENdeyw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-darwin-x64": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.6.1.tgz",
+      "integrity": "sha512-LoSU9Xu56isrkV2jLldcKspJ7sSXmZWkAxg7sW/RfF7GS4F5/v4EiqKSMCFbZtDu2Nc1gxxFdQdKwkKS4rwxNg==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.6.1.tgz",
+      "integrity": "sha512-EfI3hzYAy5vFNDqpXsNxXcgRDcFHUWSx5nnRSCKwXuQlI5J9dD84g2Usw81n3FLBNsGCegKGwwTVsSKK9cooSQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.6.1.tgz",
+      "integrity": "sha512-9lhc4UZstsegbNLhH0Zu6TqvDfmhGzuCWtcTFXY10VjLLUe4Mr0Ye2L3rrtHaDd/J5+tFMEuo5LTCSCMXWfUKw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm64-musl": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.6.1.tgz",
+      "integrity": "sha512-FfoOK1yP5ksX3wwZ4Zk1NgyGHZyuRhf99j64I5oEmirV8EFT7+OhUZEnP+x17lcP/QHJNWGsoJwrz4PJ9fBEXw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-x64-gnu": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.6.1.tgz",
+      "integrity": "sha512-DNGZvZDO5YF7jN5fX8ZqmGLjZEXIJRdJEdTFMhiyXqyXubBa0WVLDWSNlQ5JR2PNgDbEV1VQowhVRUh+74D+RA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-x64-musl": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.6.1.tgz",
+      "integrity": "sha512-RkJVNVRM+piYy87HrKmhbexCHg3A6Z6MU0W9GHnJwBQNBeyhCJG9KDce4SAMdicQnpURggSvtbGo9xAWOfSvIQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.6.1.tgz",
+      "integrity": "sha512-v2FVT6xfnnmTe3W9bJXl6r5KwJglMK/iRlkKiIFfO6ysKs0rDgz7Cwwf3tjldxQUrHL9INT/1r4VA0n9L/F1vQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.6.1.tgz",
+      "integrity": "sha512-YEeOjxRyEjqcWphH9dyLbzgkF8wZSKAKUkldRY6dgNR5oKs2LZazqGB41cWJ4Iqqcy9/zqYgmzBkRoVz3Q9MLw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-win32-x64-msvc": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.6.1.tgz",
+      "integrity": "sha512-0zfTlFAIhgz8V2G8STq8toAjsYYA6eci1hnXuyOTUFnymrtJwnS6uGKiv3v5UrPZkBlamLvrLV2iiaeqCKzb0A==",
+      "dev": true,
+      "optional": true
+    },
     "@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -4080,9 +4542,9 @@
       "dev": true
     },
     "@total-typescript/exercise-cli": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.4.0.tgz",
-      "integrity": "sha512-iSliKtEM1nShevoVQbEsnuT2D9s74taI2GIuUmIziReROUHRfj1TSQ16X0WMGPZsWp/XxX5ZvkoM4h1Eg21uLw==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.5.1.tgz",
+      "integrity": "sha512-6r7UUYyxJY4rkAeq98jW80gSAivhq9h32X3vhlehecWeVDNRZnZJyBN3U+YKmJUZccwO3d4yWXy50mvdU9M0BA==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.3",
@@ -4102,21 +4564,6 @@
         "@types/node": "*"
       }
     },
-    "@types/chai": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz",
-      "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==",
-      "dev": true
-    },
-    "@types/chai-subset": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.3.tgz",
-      "integrity": "sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==",
-      "dev": true,
-      "requires": {
-        "@types/chai": "*"
-      }
-    },
     "@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -4125,6 +4572,12 @@
         "@types/node": "*"
       }
     },
+    "@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
     "@types/express": {
       "version": "4.17.17",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
@@ -4227,56 +4680,57 @@
       }
     },
     "@vitest/expect": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.4.tgz",
-      "integrity": "sha512-XlMKX8HyYUqB8dsY8Xxrc64J2Qs9pKMt2Z8vFTL4mBWXJsg4yoALHzJfDWi8h5nkO4Zua4zjqtapQ/IluVkSnA==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
+      "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
       "dev": true,
       "requires": {
-        "@vitest/spy": "0.34.4",
-        "@vitest/utils": "0.34.4",
-        "chai": "^4.3.7"
+        "@vitest/spy": "1.6.0",
+        "@vitest/utils": "1.6.0",
+        "chai": "^4.3.10"
       }
     },
     "@vitest/runner": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.34.4.tgz",
-      "integrity": "sha512-hwwdB1StERqUls8oV8YcpmTIpVeJMe4WgYuDongVzixl5hlYLT2G8afhcdADeDeqCaAmZcSgLTLtqkjPQF7x+w==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz",
+      "integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==",
       "dev": true,
       "requires": {
-        "@vitest/utils": "0.34.4",
-        "p-limit": "^4.0.0",
+        "@vitest/utils": "1.6.0",
+        "p-limit": "^5.0.0",
         "pathe": "^1.1.1"
       }
     },
     "@vitest/snapshot": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.34.4.tgz",
-      "integrity": "sha512-GCsh4coc3YUSL/o+BPUo7lHQbzpdttTxL6f4q0jRx2qVGoYz/cyTRDJHbnwks6TILi6560bVWoBpYC10PuTLHw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz",
+      "integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==",
       "dev": true,
       "requires": {
-        "magic-string": "^0.30.1",
+        "magic-string": "^0.30.5",
         "pathe": "^1.1.1",
-        "pretty-format": "^29.5.0"
+        "pretty-format": "^29.7.0"
       }
     },
     "@vitest/spy": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.34.4.tgz",
-      "integrity": "sha512-PNU+fd7DUPgA3Ya924b1qKuQkonAW6hL7YUjkON3wmBwSTIlhOSpy04SJ0NrRsEbrXgMMj6Morh04BMf8k+w0g==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz",
+      "integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==",
       "dev": true,
       "requires": {
-        "tinyspy": "^2.1.1"
+        "tinyspy": "^2.2.0"
       }
     },
     "@vitest/utils": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.34.4.tgz",
-      "integrity": "sha512-yR2+5CHhp/K4ySY0Qtd+CAL9f5Yh1aXrKfAT42bq6CtlGPh92jIDDDSg7ydlRow1CP+dys4TrOrbELOyNInHSg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz",
+      "integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==",
       "dev": true,
       "requires": {
-        "diff-sequences": "^29.4.3",
-        "loupe": "^2.3.6",
-        "pretty-format": "^29.5.0"
+        "diff-sequences": "^29.6.3",
+        "estree-walker": "^3.0.3",
+        "loupe": "^2.3.7",
+        "pretty-format": "^29.7.0"
       }
     },
     "abab": {
@@ -4311,9 +4765,9 @@
       }
     },
     "acorn-walk": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
+      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
       "dev": true
     },
     "agent-base": {
@@ -4445,18 +4899,18 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "chai": {
-      "version": "4.3.8",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.8.tgz",
-      "integrity": "sha512-vX4YvVVtxlfSZ2VecZgFUTU5qPCYsobVI2O9FmwEXBhDigYGQA6jRXCycIs1yJnnWbZ6/+a2zNIF5DfVCcJBFQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
+      "integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==",
       "dev": true,
       "requires": {
         "assertion-error": "^1.1.0",
-        "check-error": "^1.0.2",
-        "deep-eql": "^4.1.2",
-        "get-func-name": "^2.0.0",
-        "loupe": "^2.3.1",
+        "check-error": "^1.0.3",
+        "deep-eql": "^4.1.3",
+        "get-func-name": "^2.0.2",
+        "loupe": "^2.3.6",
         "pathval": "^1.1.1",
-        "type-detect": "^4.0.5"
+        "type-detect": "^4.0.8"
       }
     },
     "chalk": {
@@ -4485,10 +4939,13 @@
       }
     },
     "check-error": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
-      "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
-      "dev": true
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
+      "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
+      "dev": true,
+      "requires": {
+        "get-func-name": "^2.0.2"
+      }
     },
     "chokidar": {
       "version": "3.5.3",
@@ -4589,6 +5046,17 @@
         "node-fetch": "^2.6.11"
       }
     },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
     "cssstyle": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
@@ -4708,33 +5176,33 @@
       }
     },
     "esbuild": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
-      "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
-      "dev": true,
-      "requires": {
-        "@esbuild/android-arm": "0.17.19",
-        "@esbuild/android-arm64": "0.17.19",
-        "@esbuild/android-x64": "0.17.19",
-        "@esbuild/darwin-arm64": "0.17.19",
-        "@esbuild/darwin-x64": "0.17.19",
-        "@esbuild/freebsd-arm64": "0.17.19",
-        "@esbuild/freebsd-x64": "0.17.19",
-        "@esbuild/linux-arm": "0.17.19",
-        "@esbuild/linux-arm64": "0.17.19",
-        "@esbuild/linux-ia32": "0.17.19",
-        "@esbuild/linux-loong64": "0.17.19",
-        "@esbuild/linux-mips64el": "0.17.19",
-        "@esbuild/linux-ppc64": "0.17.19",
-        "@esbuild/linux-riscv64": "0.17.19",
-        "@esbuild/linux-s390x": "0.17.19",
-        "@esbuild/linux-x64": "0.17.19",
-        "@esbuild/netbsd-x64": "0.17.19",
-        "@esbuild/openbsd-x64": "0.17.19",
-        "@esbuild/sunos-x64": "0.17.19",
-        "@esbuild/win32-arm64": "0.17.19",
-        "@esbuild/win32-ia32": "0.17.19",
-        "@esbuild/win32-x64": "0.17.19"
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.8.tgz",
+      "integrity": "sha512-l7iffQpT2OrZfH2rXIp7/FkmaeZM0vxbxN9KfiCwGYuZqzMg/JdvX26R31Zxn/Pxvsrg3Y9N6XTcnknqDyyv4w==",
+      "dev": true,
+      "requires": {
+        "@esbuild/android-arm": "0.19.8",
+        "@esbuild/android-arm64": "0.19.8",
+        "@esbuild/android-x64": "0.19.8",
+        "@esbuild/darwin-arm64": "0.19.8",
+        "@esbuild/darwin-x64": "0.19.8",
+        "@esbuild/freebsd-arm64": "0.19.8",
+        "@esbuild/freebsd-x64": "0.19.8",
+        "@esbuild/linux-arm": "0.19.8",
+        "@esbuild/linux-arm64": "0.19.8",
+        "@esbuild/linux-ia32": "0.19.8",
+        "@esbuild/linux-loong64": "0.19.8",
+        "@esbuild/linux-mips64el": "0.19.8",
+        "@esbuild/linux-ppc64": "0.19.8",
+        "@esbuild/linux-riscv64": "0.19.8",
+        "@esbuild/linux-s390x": "0.19.8",
+        "@esbuild/linux-x64": "0.19.8",
+        "@esbuild/netbsd-x64": "0.19.8",
+        "@esbuild/openbsd-x64": "0.19.8",
+        "@esbuild/sunos-x64": "0.19.8",
+        "@esbuild/win32-arm64": "0.19.8",
+        "@esbuild/win32-ia32": "0.19.8",
+        "@esbuild/win32-x64": "0.19.8"
       }
     },
     "escape-html": {
@@ -4772,6 +5240,15 @@
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true
     },
+    "estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -4783,6 +5260,23 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
     },
+    "execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      }
+    },
     "express": {
       "version": "4.18.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
@@ -4899,9 +5393,9 @@
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
     },
     "fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "optional": true
     },
@@ -4911,9 +5405,9 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "get-func-name": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
       "dev": true
     },
     "get-intrinsic": {
@@ -4927,6 +5421,12 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true
+    },
     "glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -5056,6 +5556,12 @@
         }
       }
     },
+    "human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "dev": true
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -5132,6 +5638,18 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
+    "is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5204,10 +5722,14 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "local-pkg": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
-      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
-      "dev": true
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
+      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+      "dev": true,
+      "requires": {
+        "mlly": "^1.4.2",
+        "pkg-types": "^1.0.3"
+      }
     },
     "loose-envify": {
       "version": "1.4.0",
@@ -5218,18 +5740,18 @@
       }
     },
     "loupe": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
-      "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
+      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
       "dev": true,
       "requires": {
-        "get-func-name": "^2.0.0"
+        "get-func-name": "^2.0.1"
       }
     },
     "magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.10",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
+      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
       "dev": true,
       "requires": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
@@ -5250,6 +5772,12 @@
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
       "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
     },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5289,6 +5817,12 @@
         "mime-db": "1.52.0"
       }
     },
+    "mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true
+    },
     "mlly": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
@@ -5307,9 +5841,9 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "dev": true
     },
     "negotiator": {
@@ -5356,6 +5890,23 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
+    "npm-run-path": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
+      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "dev": true,
+      "requires": {
+        "path-key": "^4.0.0"
+      },
+      "dependencies": {
+        "path-key": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+          "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+          "dev": true
+        }
+      }
+    },
     "nwsapi": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.4.tgz",
@@ -5380,6 +5931,15 @@
         "ee-first": "1.1.1"
       }
     },
+    "onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "requires": {
+        "mimic-fn": "^4.0.0"
+      }
+    },
     "optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -5395,9 +5955,9 @@
       }
     },
     "p-limit": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
-      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-5.0.0.tgz",
+      "integrity": "sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==",
       "dev": true,
       "requires": {
         "yocto-queue": "^1.0.0"
@@ -5436,6 +5996,12 @@
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
     },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -5487,12 +6053,12 @@
       }
     },
     "postcss": {
-      "version": "8.4.23",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
-      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "version": "8.4.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
@@ -5628,9 +6194,9 @@
       "requires": {}
     },
     "react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "dev": true
     },
     "react-select": {
@@ -5702,11 +6268,23 @@
       "dev": true
     },
     "rollup": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.23.0.tgz",
-      "integrity": "sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.6.1.tgz",
+      "integrity": "sha512-jZHaZotEHQaHLgKr8JnQiDT1rmatjgKlMekyksz+yk9jt/8z9quNjnKNRoaM0wd9DC2QKXjmWWuDYtM3jfF8pQ==",
       "dev": true,
       "requires": {
+        "@rollup/rollup-android-arm-eabi": "4.6.1",
+        "@rollup/rollup-android-arm64": "4.6.1",
+        "@rollup/rollup-darwin-arm64": "4.6.1",
+        "@rollup/rollup-darwin-x64": "4.6.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.6.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.6.1",
+        "@rollup/rollup-linux-arm64-musl": "4.6.1",
+        "@rollup/rollup-linux-x64-gnu": "4.6.1",
+        "@rollup/rollup-linux-x64-musl": "4.6.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.6.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.6.1",
+        "@rollup/rollup-win32-x64-msvc": "4.6.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -5795,6 +6373,21 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -5811,6 +6404,12 @@
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
       "dev": true
     },
+    "signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true
+    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -5842,18 +6441,32 @@
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
     "std-env": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.3.tgz",
-      "integrity": "sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.6.0.tgz",
+      "integrity": "sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg==",
+      "dev": true
+    },
+    "strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
       "dev": true
     },
     "strip-literal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.1.tgz",
-      "integrity": "sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.0.tgz",
+      "integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
       "dev": true,
       "requires": {
-        "acorn": "^8.8.2"
+        "js-tokens": "^9.0.0"
+      },
+      "dependencies": {
+        "js-tokens": {
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz",
+          "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
+          "dev": true
+        }
       }
     },
     "stylis": {
@@ -5881,21 +6494,21 @@
       "dev": true
     },
     "tinybench": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz",
-      "integrity": "sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.1.tgz",
+      "integrity": "sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==",
       "dev": true
     },
     "tinypool": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.7.0.tgz",
-      "integrity": "sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==",
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.4.tgz",
+      "integrity": "sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==",
       "dev": true
     },
     "tinyspy": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.1.tgz",
-      "integrity": "sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
+      "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
       "dev": true
     },
     "to-fast-properties": {
@@ -5970,15 +6583,15 @@
       }
     },
     "typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "dev": true
     },
     "ufo": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.0.tgz",
-      "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.2.tgz",
+      "integrity": "sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==",
       "dev": true
     },
     "universalify": {
@@ -6025,29 +6638,28 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
     "vite": {
-      "version": "4.3.8",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz",
-      "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.6.tgz",
+      "integrity": "sha512-MD3joyAEBtV7QZPl2JVVUai6zHms3YOmLR+BpMzLlX2Yzjfcc4gTgNi09d/Rua3F4EtC8zdwPU8eQYyib4vVMQ==",
       "dev": true,
       "requires": {
-        "esbuild": "^0.17.5",
-        "fsevents": "~2.3.2",
-        "postcss": "^8.4.23",
-        "rollup": "^3.21.0"
+        "esbuild": "^0.19.3",
+        "fsevents": "~2.3.3",
+        "postcss": "^8.4.32",
+        "rollup": "^4.2.0"
       }
     },
     "vite-node": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.34.4.tgz",
-      "integrity": "sha512-ho8HtiLc+nsmbwZMw8SlghESEE3KxJNp04F/jPUCLVvaURwt0d+r9LxEqCX5hvrrOQ0GSyxbYr5ZfRYhQ0yVKQ==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz",
+      "integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==",
       "dev": true,
       "requires": {
         "cac": "^6.7.14",
         "debug": "^4.3.4",
-        "mlly": "^1.4.0",
         "pathe": "^1.1.1",
         "picocolors": "^1.0.0",
-        "vite": "^3.0.0 || ^4.0.0"
+        "vite": "^5.0.0"
       },
       "dependencies": {
         "debug": {
@@ -6096,34 +6708,30 @@
       }
     },
     "vitest": {
-      "version": "0.34.4",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.34.4.tgz",
-      "integrity": "sha512-SE/laOsB6995QlbSE6BtkpXDeVNLJc1u2LHRG/OpnN4RsRzM3GQm4nm3PQCK5OBtrsUqnhzLdnT7se3aeNGdlw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
+      "integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==",
       "dev": true,
       "requires": {
-        "@types/chai": "^4.3.5",
-        "@types/chai-subset": "^1.3.3",
-        "@types/node": "*",
-        "@vitest/expect": "0.34.4",
-        "@vitest/runner": "0.34.4",
-        "@vitest/snapshot": "0.34.4",
-        "@vitest/spy": "0.34.4",
-        "@vitest/utils": "0.34.4",
-        "acorn": "^8.9.0",
-        "acorn-walk": "^8.2.0",
-        "cac": "^6.7.14",
-        "chai": "^4.3.7",
+        "@vitest/expect": "1.6.0",
+        "@vitest/runner": "1.6.0",
+        "@vitest/snapshot": "1.6.0",
+        "@vitest/spy": "1.6.0",
+        "@vitest/utils": "1.6.0",
+        "acorn-walk": "^8.3.2",
+        "chai": "^4.3.10",
         "debug": "^4.3.4",
-        "local-pkg": "^0.4.3",
-        "magic-string": "^0.30.1",
+        "execa": "^8.0.1",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.5",
         "pathe": "^1.1.1",
         "picocolors": "^1.0.0",
-        "std-env": "^3.3.3",
-        "strip-literal": "^1.0.1",
-        "tinybench": "^2.5.0",
-        "tinypool": "^0.7.0",
-        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0",
-        "vite-node": "0.34.4",
+        "std-env": "^3.5.0",
+        "strip-literal": "^2.0.0",
+        "tinybench": "^2.5.1",
+        "tinypool": "^0.8.3",
+        "vite": "^5.0.0",
+        "vite-node": "1.6.0",
         "why-is-node-running": "^2.2.2"
       },
       "dependencies": {
@@ -6195,6 +6803,15 @@
         "webidl-conversions": "^7.0.0"
       }
     },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
     "why-is-node-running": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
diff --git a/package.json b/package.json
index 91fb7bc..f02e972 100644
--- a/package.json
+++ b/package.json
@@ -5,13 +5,13 @@
   "author": "Matt Pocock <mattpocockvoice@gmail.com>",
   "license": "GPL",
   "devDependencies": {
-    "@total-typescript/exercise-cli": "^0.4.0",
+    "@total-typescript/exercise-cli": "^0.5.1",
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",
-    "typescript": "^5.2.2",
+    "typescript": "^5.4.5",
     "vite-tsconfig-paths": "^4.0.7",
-    "vitest": "^0.34.4"
+    "vitest": "^1.6.0"
   },
   "scripts": {
     "exercise": "tt-cli run",
@@ -25,8 +25,8 @@
     "s-09": "tt-cli run 09 --solution",
     "e-10": "tt-cli run 10",
     "s-10": "tt-cli run 10 --solution",
-    "e-18": "npm run exercise -- 18",
-    "s-18": "npm run solution -- 18",
+    "e-18": "tt-cli run 18",
+    "s-18": "tt-cli run 18 --solution",
     "e-19": "tt-cli run 19",
     "s-19": "tt-cli run 19 --solution",
     "e-20": "tt-cli run 20",
@@ -162,7 +162,23 @@
     "e-74": "tt-cli run 74",
     "s-74": "tt-cli run 74 --solution",
     "e-76": "tt-cli run 76",
-    "s-76": "tt-cli run 76 --solution"
+    "s-76": "tt-cli run 76 --solution",
+    "e-01": "tt-cli run 01",
+    "s-01": "tt-cli run 01 --solution",
+    "e-02": "tt-cli run 02",
+    "s-02": "tt-cli run 02 --solution",
+    "e-53": "tt-cli run 53",
+    "s-53": "tt-cli run 53 --solution",
+    "e-64.5": "tt-cli run 64.5",
+    "s-64.5": "tt-cli run 64.5 --solution",
+    "e-67.5": "tt-cli run 67.5",
+    "s-67.5": "tt-cli run 67.5 --solution",
+    "e-72": "tt-cli run 72",
+    "s-72": "tt-cli run 72 --solution",
+    "e-75": "tt-cli run 75",
+    "s-75": "tt-cli run 75 --solution",
+    "e-77": "tt-cli run 77",
+    "s-77": "tt-cli run 77 --solution"
   },
   "dependencies": {
     "@tanstack/react-query": "^4.29.12",

From 6074eb4c3109d56e4caee8a2155bb2f0bbe5b186 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 6 May 2024 11:48:28 +0100
Subject: [PATCH 133/165] Added renovate

---
 .github/workflows/renovate-checks.yml | 31 +++++++++++++++++++++++++++
 renovate.json                         | 17 +++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 .github/workflows/renovate-checks.yml
 create mode 100644 renovate.json

diff --git a/.github/workflows/renovate-checks.yml b/.github/workflows/renovate-checks.yml
new file mode 100644
index 0000000..670845f
--- /dev/null
+++ b/.github/workflows/renovate-checks.yml
@@ -0,0 +1,31 @@
+name: Renovate Checks
+on:
+  push:
+    branches:
+      - "renovate/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Main
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          path: main
+
+      - name: Checkout Branch
+        uses: actions/checkout@v4
+        with:
+          path: branch
+
+      - name: Install Dependencies in Main
+        run: (cd main && pnpm install)
+      - name: Install Dependencies in Branch
+        run: (cd branch && pnpm install)
+      - name: Create Snapshot In Main
+        run: (cd main && npx tt-cli take-snapshot ./snap.md)
+      - name: Copy Snapshot To Branch
+        run: cp main/snap.md branch/snap.md
+      - name: Compare Snapshot In Branch
+        run: (cd branch && npx tt-cli compare-snapshot ./snap.md)
diff --git a/renovate.json b/renovate.json
new file mode 100644
index 0000000..1c0166f
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base"],
+  "packageRules": [
+    {
+      "packagePatterns": ["*"],
+      "excludePackagePatterns": [
+        "typescript",
+        "vitest",
+        "react",
+        "@types/react",
+        "@total-typescript/exercise-cli"
+      ],
+      "enabled": false
+    }
+  ]
+}

From 3ec6af2ecc80a6a2c8b2e6ea4ff71631ef297953 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 6 May 2024 10:49:30 +0000
Subject: [PATCH 134/165] Update dependency @total-typescript/exercise-cli to
 ^0.6.0

---
 package-lock.json | 18 +++++++++---------
 package.json      |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index df881f6..cdd013a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "zod": "^3.21.4"
       },
       "devDependencies": {
-        "@total-typescript/exercise-cli": "^0.5.1",
+        "@total-typescript/exercise-cli": "^0.6.0",
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
@@ -841,9 +841,9 @@
       }
     },
     "node_modules/@total-typescript/exercise-cli": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.5.1.tgz",
-      "integrity": "sha512-6r7UUYyxJY4rkAeq98jW80gSAivhq9h32X3vhlehecWeVDNRZnZJyBN3U+YKmJUZccwO3d4yWXy50mvdU9M0BA==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.6.0.tgz",
+      "integrity": "sha512-lsXWyD7Gam5g1GcPPaxSdKI5b+xMcWD9/a+rD6+HCXo0/5g0Fj8tZLl7285ujCZ8Yf99KKcoT5sQEz5L1UPNyw==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
@@ -857,8 +857,8 @@
         "tt-cli": "dist/bin.js"
       },
       "peerDependencies": {
-        "typescript": "^5",
-        "vitest": "^1"
+        "typescript": "*",
+        "vitest": "*"
       }
     },
     "node_modules/@types/body-parser": {
@@ -4542,9 +4542,9 @@
       "dev": true
     },
     "@total-typescript/exercise-cli": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.5.1.tgz",
-      "integrity": "sha512-6r7UUYyxJY4rkAeq98jW80gSAivhq9h32X3vhlehecWeVDNRZnZJyBN3U+YKmJUZccwO3d4yWXy50mvdU9M0BA==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.6.0.tgz",
+      "integrity": "sha512-lsXWyD7Gam5g1GcPPaxSdKI5b+xMcWD9/a+rD6+HCXo0/5g0Fj8tZLl7285ujCZ8Yf99KKcoT5sQEz5L1UPNyw==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.3",
diff --git a/package.json b/package.json
index f02e972..f97b1b4 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "Matt Pocock <mattpocockvoice@gmail.com>",
   "license": "GPL",
   "devDependencies": {
-    "@total-typescript/exercise-cli": "^0.5.1",
+    "@total-typescript/exercise-cli": "^0.6.0",
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",

From 66273543f9ed825f1ae359e3002b5ed681822cdd Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Mon, 6 May 2024 17:02:00 +0100
Subject: [PATCH 135/165] Fixed CI

---
 .github/workflows/renovate-checks.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/renovate-checks.yml b/.github/workflows/renovate-checks.yml
index 670845f..d56979c 100644
--- a/.github/workflows/renovate-checks.yml
+++ b/.github/workflows/renovate-checks.yml
@@ -20,9 +20,9 @@ jobs:
           path: branch
 
       - name: Install Dependencies in Main
-        run: (cd main && pnpm install)
+        run: (cd main && npm install)
       - name: Install Dependencies in Branch
-        run: (cd branch && pnpm install)
+        run: (cd branch && npm install)
       - name: Create Snapshot In Main
         run: (cd main && npx tt-cli take-snapshot ./snap.md)
       - name: Copy Snapshot To Branch

From 2907e8ed66e04b22af9d3ade14d8e26a4eea15ec Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 6 May 2024 16:02:49 +0000
Subject: [PATCH 136/165] Update react monorepo

---
 package-lock.json | 78 ++++++++++++++++++++---------------------------
 1 file changed, 33 insertions(+), 45 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cdd013a..58fafb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -937,19 +937,18 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.8.tgz",
-      "integrity": "sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.4",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
-      "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -962,11 +961,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
-    },
     "node_modules/@types/send": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
@@ -3008,9 +3002,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -3019,15 +3013,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-hook-form": {
@@ -3237,9 +3231,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -4631,19 +4625,18 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "@types/react": {
-      "version": "18.2.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.8.tgz",
-      "integrity": "sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
       "requires": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "@types/react-dom": {
-      "version": "18.2.4",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
-      "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "requires": {
         "@types/react": "*"
       }
@@ -4656,11 +4649,6 @@
         "@types/react": "*"
       }
     },
-    "@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
-    },
     "@types/send": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
@@ -6171,20 +6159,20 @@
       }
     },
     "react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "requires": {
         "loose-envify": "^1.1.0"
       }
     },
     "react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       }
     },
     "react-hook-form": {
@@ -6323,9 +6311,9 @@
       }
     },
     "scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "requires": {
         "loose-envify": "^1.1.0"
       }

From 6b2489a43ea7e0be7917779e334c272da8d51271 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 7 May 2024 08:09:29 +0100
Subject: [PATCH 137/165] Upgrade dependencies

---
 package-lock.json |   14 +-
 package.json      |    2 +-
 snap.md           | 1397 ---------------------------------------------
 3 files changed, 8 insertions(+), 1405 deletions(-)
 delete mode 100644 snap.md

diff --git a/package-lock.json b/package-lock.json
index cdd013a..f59a352 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "zod": "^3.21.4"
       },
       "devDependencies": {
-        "@total-typescript/exercise-cli": "^0.6.0",
+        "@total-typescript/exercise-cli": "^0.6.1",
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
@@ -841,9 +841,9 @@
       }
     },
     "node_modules/@total-typescript/exercise-cli": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.6.0.tgz",
-      "integrity": "sha512-lsXWyD7Gam5g1GcPPaxSdKI5b+xMcWD9/a+rD6+HCXo0/5g0Fj8tZLl7285ujCZ8Yf99KKcoT5sQEz5L1UPNyw==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.6.1.tgz",
+      "integrity": "sha512-6s/zzQ1LomYt3tlnHkTTZfavmn23Ye6p1ixgir08A9buDiKHnSxwpx1ErthJokyPhDsKZg5kK4OgE5gxI6znOQ==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
@@ -4542,9 +4542,9 @@
       "dev": true
     },
     "@total-typescript/exercise-cli": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.6.0.tgz",
-      "integrity": "sha512-lsXWyD7Gam5g1GcPPaxSdKI5b+xMcWD9/a+rD6+HCXo0/5g0Fj8tZLl7285ujCZ8Yf99KKcoT5sQEz5L1UPNyw==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.6.1.tgz",
+      "integrity": "sha512-6s/zzQ1LomYt3tlnHkTTZfavmn23Ye6p1ixgir08A9buDiKHnSxwpx1ErthJokyPhDsKZg5kK4OgE5gxI6znOQ==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.3",
diff --git a/package.json b/package.json
index f97b1b4..728c316 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "Matt Pocock <mattpocockvoice@gmail.com>",
   "license": "GPL",
   "devDependencies": {
-    "@total-typescript/exercise-cli": "^0.6.0",
+    "@total-typescript/exercise-cli": "^0.6.1",
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",
diff --git a/snap.md b/snap.md
deleted file mode 100644
index 50a7aa0..0000000
--- a/snap.md
+++ /dev/null
@@ -1,1397 +0,0 @@
-# Root TSConfig Snapshot
-
-```txt
-,src/01-introduction/03-navigating-jsx-types.problem.tsx(5,21): error TS17000: JSX attributes must only be assigned a non-empty 'expression'.
-src/02-components/04-typing-components.problem.tsx(4,29): error TS18046: 'props' is of type 'unknown'.
-src/02-components/04-typing-components.problem.tsx(10,8): error TS2578: Unused '@ts-expect-error' directive.
-src/02-components/04-typing-components.problem.tsx(13,15): error TS2322: Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'className' does not exist on type 'IntrinsicAttributes'.
-src/02-components/05-typing-components-as-functions.problem.tsx(7,1): error TS2578: Unused '@ts-expect-error' directive.
-src/02-components/05-typing-components-as-functions.problem.tsx(17,8): error TS2786: 'Button' cannot be used as a JSX component.
-  Its type '(props: Props) => { ohDear: string; }' is not a valid JSX element type.
-    Type '(props: Props) => { ohDear: string; }' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
-      Type '{ ohDear: string; }' is not assignable to type 'ReactNode'.
-src/02-components/06-typing-children.problem.tsx(4,25): error TS2339: Property 'children' does not exist on type '{}'.
-src/02-components/06-typing-children.problem.tsx(10,8): error TS2578: Unused '@ts-expect-error' directive.
-src/02-components/06-typing-children.problem.tsx(12,8): error TS2559: Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.
-src/02-components/07-typing-onclick-handlers.problem.tsx(8,47): error TS2339: Property 'onClick' does not exist on type 'ButtonProps'.
-src/02-components/08-using-html-props.problem.tsx(3,26): error TS2339: Property 'className' does not exist on type '{}'.
-src/02-components/08-using-html-props.problem.tsx(10,18): error TS2322: Type '{ onClick: () => void; type: string; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'onClick' does not exist on type 'IntrinsicAttributes'.
-src/02-components/09-html-props-with-one-changed.problem.tsx(23,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/02-components/10-extracting-props-from-custom-components.problem.tsx(18,3): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/03-hooks/11-use-state.problem.tsx(8,30): error TS2339: Property 'id' does not exist on type 'never'.
-src/03-hooks/11-use-state.problem.tsx(8,39): error TS2339: Property 'value' does not exist on type 'never'.
-src/03-hooks/11-use-state.problem.tsx(13,13): error TS2322: Type '{ id: number; value: string; }' is not assignable to type 'never'.
-src/03-hooks/11-use-state.problem.tsx(14,13): error TS2322: Type '{ id: number; value: string; }' is not assignable to type 'never'.
-src/03-hooks/12-use-state-with-undefined.problem.ts(18,15): error TS2345: Argument of type '{ id: number; name: string; }' is not assignable to parameter of type 'SetStateAction<undefined>'.
-  Type '{ id: number; name: string; }' provides no match for the signature '(prevState: undefined): undefined'.
-src/03-hooks/12-use-state-with-undefined.problem.ts(22,23): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/03-hooks/13-use-state-excess-properties.problem.tsx(22,17): error TS2578: Unused '@ts-expect-error' directive.
-src/03-hooks/13-use-state-excess-properties.problem.tsx(40,17): error TS2578: Unused '@ts-expect-error' directive.
-src/03-hooks/14-use-effect.problem.ts(6,7): error TS2322: Type 'Timeout' is not assignable to type 'void | Destructor'.
-src/03-hooks/15-use-callback.problem.tsx(5,31): error TS2344: Type 'string' does not satisfy the constraint 'Function'.
-src/03-hooks/15-use-callback.problem.tsx(6,6): error TS7006: Parameter 'buttonName' implicitly has an 'any' type.
-src/03-hooks/15-use-callback.problem.tsx(12,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/03-hooks/15-use-callback.problem.tsx(16,30): error TS2349: This expression is not callable.
-  Type 'String' has no call signatures.
-src/03-hooks/15-use-callback.problem.tsx(17,30): error TS2349: This expression is not callable.
-  Type 'String' has no call signatures.
-src/03-hooks/15-use-callback.problem.tsx(18,30): error TS2349: This expression is not callable.
-  Type 'String' has no call signatures.
-src/03-hooks/16-use-memo.problem.tsx(5,52): error TS2345: Argument of type '() => string[]' is not assignable to parameter of type '() => () => string[]'.
-  Type 'string[]' is not assignable to type '() => string[]'.
-    Type 'string[]' provides no match for the signature '(): string[]'.
-src/03-hooks/16-use-memo.problem.tsx(12,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/03-hooks/17-use-ref-basics.problem.tsx(7,5): error TS2322: Type '"Random value!"' is not assignable to type 'undefined'.
-src/03-hooks/18-element-refs.explainer.tsx(19,7): error TS2322: Type 'undefined' is not assignable to type 'HTMLDivElement | null'.
-src/03-hooks/19-use-ref-with-elements.problem.tsx(6,15): error TS2322: Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
-  Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.
-    Types of property 'current' are incompatible.
-      Type 'HTMLDivElement | undefined' is not assignable to type 'HTMLDivElement | null'.
-        Type 'undefined' is not assignable to type 'HTMLDivElement | null'.
-src/03-hooks/20-why-is-my-ref-readonly.problem.tsx(7,7): error TS2540: Cannot assign to 'current' because it is a read-only property.
-src/03-hooks/20-why-is-my-ref-readonly.solution.tsx(10,18): error TS2540: Cannot assign to 'current' because it is a read-only property.
-src/03-hooks/21-use-reducer.problem.ts(5,11): error TS18046: 'action' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(7,23): error TS18046: 'state' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(7,37): error TS18046: 'action' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(9,23): error TS18046: 'state' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(9,37): error TS18046: 'action' is of type 'unknown'.
-src/03-hooks/21-use-reducer.problem.ts(21,1): error TS2578: Unused '@ts-expect-error' directive.
-src/03-hooks/21-use-reducer.problem.ts(24,1): error TS2578: Unused '@ts-expect-error' directive.
-src/03-hooks/21-use-reducer.problem.ts(27,1): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/22-discriminated-union-props.problem.tsx(34,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx(19,34): error TS2339: Property 'title' does not exist on type 'ModalProps'.
-src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx(18,31): error TS2339: Property 'title' does not exist on type '{} | { title: string; }'.
-  Property 'title' does not exist on type '{}'.
-src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(21,36): error TS2339: Property 'buttonColor' does not exist on type '{ variant: "no-title"; }'.
-src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(34,36): error TS2339: Property 'buttonColor' does not exist on type '{ variant: "title"; title: string; }'.
-src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(50,9): error TS2322: Type '{ buttonColor: string; variant: "no-title"; title: string; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.
-  Property 'buttonColor' does not exist on type 'IntrinsicAttributes & { variant: "no-title"; }'.
-src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(52,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx(55,44): error TS2322: Type '{ variant: "title"; title: string; buttonColor: string; }' is not assignable to type 'IntrinsicAttributes & ModalProps'.
-  Property 'buttonColor' does not exist on type 'IntrinsicAttributes & { variant: "title"; title: string; }'.
-src/04-advanced-props/25-toggle-props.problem.tsx(38,5): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/25-toggle-props.problem.tsx(42,4): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx(40,8): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx(43,8): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(15,30): error TS2345: Argument of type 'ReactNode' is not assignable to parameter of type '(value: number, index: number, array: number[]) => ReactNode'.
-  Type 'undefined' is not assignable to type '(value: number, index: number, array: number[]) => ReactNode'.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(22,19): error TS2322: Type '(index: any) => Element' is not assignable to type 'ReactNode'.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(22,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(23,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(28,19): error TS2322: Type '(index: any) => null' is not assignable to type 'ReactNode'.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(28,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(33,9): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(37,9): error TS2322: Type '(index: any) => any' is not assignable to type 'ReactNode'.
-src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx(37,21): error TS7006: Parameter 'index' implicitly has an 'any' type.
-src/04-advanced-props/31-as-const.problem.ts(13,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-props/31-as-const.problem.ts(14,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(6,3): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(11,4): error TS2322: Type '{ children: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
-  Type '{ children: string; type: string; illegalProperty: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
-    Types of property 'type' are incompatible.
-      Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.
-src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx(16,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(7,5): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(13,5): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(19,5): error TS2578: Unused '@ts-expect-error' directive.
-src/04-advanced-props/33-prop-groups-with-variants.problem.tsx(48,11): error TS2322: Type '{ children: string; className: string; type: string; illegalProperty: string; } | { children: string; className: string; type: string; illegalProperty: string; } | { children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
-  Type '{ children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
-    Type '{ children: string; className: string; type: string; illegalProperty: string; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
-      Types of property 'type' are incompatible.
-        Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.
-src/05-generics/36-type-helpers-with-constraints.problem.tsx(14,3): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/36-type-helpers-with-constraints.problem.tsx(16,3): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/36-type-helpers-with-constraints.problem.tsx(18,3): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/37-generic-localstorage-hook.problem.ts(28,30): error TS2558: Expected 0 type arguments, but got 1.
-src/05-generics/37-generic-localstorage-hook.problem.ts(35,24): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/37-generic-localstorage-hook.problem.ts(41,5): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/38-generic-hooks.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/38-generic-hooks.problem.ts(25,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/38-generic-hooks.problem.ts(35,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/38-generic-hooks.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/39-generic-props.problem.tsx(41,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/39-generic-props.problem.tsx(45,17): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/40-generic-class-components.problem.tsx(37,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/40-generic-class-components.problem.tsx(41,17): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/41-passing-types-to-components.problem.tsx(29,5): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/41-passing-types-to-components.problem.tsx(32,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/41-passing-types-to-components.problem.tsx(33,23): error TS2339: Property 'name' does not exist on type 'number'.
-src/05-generics/41-passing-types-to-components.problem.tsx(44,9): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/41-passing-types-to-components.problem.tsx(51,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx(44,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/05-generics/43-inference-flow-with-constraints.problem.ts(42,1): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/43-inference-flow-with-constraints.problem.ts(52,5): error TS2578: Unused '@ts-expect-error' directive.
-src/05-generics/43-inference-flow-with-constraints.problem.ts(60,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/45-tuple-return-type.problem.ts(23,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/45-tuple-return-type.problem.ts(24,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/46-required-context.problem.tsx(33,55): error TS2558: Expected 0 type arguments, but got 1.
-src/06-advanced-hooks/46-required-context.problem.tsx(37,57): error TS2558: Expected 0 type arguments, but got 1.
-src/06-advanced-hooks/46-required-context.problem.tsx(42,16): error TS2554: Expected 1 arguments, but got 0.
-src/06-advanced-hooks/46-required-context.problem.tsx(45,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/46-required-context.problem.tsx(53,17): error TS2554: Expected 1 arguments, but got 0.
-src/06-advanced-hooks/46-required-context.problem.tsx(56,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/46-required-context.problem.tsx(70,21): error TS2322: Type '{ name: string; }' is not assignable to type 'null'.
-src/06-advanced-hooks/46-required-context.problem.tsx(72,11): error TS2322: Type '{ primaryColor: string; }' is not assignable to type 'null'.
-src/06-advanced-hooks/47-unions-in-usestate.problem.tsx(45,3): error TS2578: Unused '@ts-expect-error' directive.
-src/06-advanced-hooks/47-unions-in-usestate.problem.tsx(62,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(28,37): error TS2353: Object literal may only specify known properties, and 'error' does not exist in type 'SetStateAction<{ status: string; }>'.
-src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(36,3): error TS2578: Unused '@ts-expect-error' directive.
-src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx(46,25): error TS2339: Property 'error' does not exist on type '{ status: string; }'.
-src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(46,25): error TS18048: 'value' is possibly 'undefined'.
-src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(46,31): error TS2339: Property 'message' does not exist on type 'Error | { title: string; }'.
-  Property 'message' does not exist on type '{ title: string; }'.
-src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(49,16): error TS18048: 'value' is possibly 'undefined'.
-src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx(49,22): error TS2339: Property 'title' does not exist on type 'Error | { title: string; }'.
-  Property 'title' does not exist on type 'Error'.
-src/06-advanced-hooks/50-use-state-overloads.problem.ts(36,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(37,22): error TS2554: Expected 1 arguments, but got 0.
-src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(40,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts(42,5): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/06-advanced-hooks/52-currying-hooks.problem.ts(38,22): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx(52,3): error TS2322: Type 'string' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-src/07-types-deep-dive/55-strongly-typing-children.problem.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
-  Type 'ReactElement<any, any>' is not assignable to type '{ __brand: "OPTION_TYPE"; } & ReactPortal'.
-    Property '__brand' is missing in type 'ReactElement<any, any>' but required in type '{ __brand: "OPTION_TYPE"; }'.
-src/07-types-deep-dive/55-strongly-typing-children.solution.tsx(32,3): error TS2322: Type 'Element' is not assignable to type 'OptionType'.
-  Type 'ReactElement<any, any>' is not assignable to type '{ __brand: "OPTION_TYPE"; } & ReactPortal'.
-    Property '__brand' is missing in type 'ReactElement<any, any>' but required in type '{ __brand: "OPTION_TYPE"; }'.
-src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx(30,1): error TS2339: Property 'myNewElement' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts(15,20): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts(15,32): error TS2694: Namespace 'React' has no exported member 'MyInterface'.
-src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts(25,3): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/07-types-deep-dive/60-add-new-global-element.problem.tsx(14,3): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/60-add-new-global-element.problem.tsx(14,23): error TS2339: Property 'something' does not exist on type 'JSX.IntrinsicElements'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(10,8): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(11,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(12,10): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(13,6): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(14,9): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx(15,12): error TS2322: Type '{ testId: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-  Property 'testId' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
-src/08-advanced-patterns/63-lazy-load-component.problem.tsx(20,44): error TS2345: Argument of type 'unknown' is not assignable to parameter of type '() => Promise<{ default: ComponentType<any>; }>'.
-src/08-advanced-patterns/63-lazy-load-component.problem.tsx(30,62): error TS2322: Type '{ loader: () => Promise<typeof import("/Users/matt/repos/total-typescript/react-typescript-tutorial/src/fake-external-lib/component")>; id: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
-  Property 'id' does not exist on type 'IntrinsicAttributes & Props'.
-src/08-advanced-patterns/63-lazy-load-component.problem.tsx(38,4): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/64-render-props.problem.tsx(43,9): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/64-render-props.problem.tsx(44,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(16,10): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(19,12): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(22,14): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(28,21): error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ text: (props: any) => Element; number: (props: any) => Element; password: (props: any) => Element; }'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(28,32): error TS18046: 'props' is of type 'unknown'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(29,25): error TS2698: Spread types may only be created from object types.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(34,5): error TS2322: Type '{ type: string; onChange: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(35,16): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(37,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(40,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx(41,10): error TS2322: Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes'.
-  Property 'type' does not exist on type 'IntrinsicAttributes'.
-src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx(52,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx(26,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx(31,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(37,21): error TS7006: Parameter 'row' implicitly has an 'any' type.
-src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(38,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(43,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx(46,21): error TS7006: Parameter 'row' implicitly has an 'any' type.
-src/08-advanced-patterns/67-hoc.problem.tsx(28,5): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx(40,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx(48,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/69-as-prop.problem.tsx(41,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/69-as-prop.problem.tsx(48,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/69-as-prop.problem.tsx(50,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/69-as-prop.problem.tsx(67,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/69-as-prop.problem.tsx(74,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/69-as-prop.problem.tsx(75,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(12,32): error TS2304: Cannot find name 'AsProps'.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(26,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(33,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(35,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(52,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(59,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/69-as-prop.solution.1.tsx(60,30): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(67,16): error TS2322: Type '(props: {    thisIsRequired: boolean;}) => JSX.Element' is not assignable to type 'keyof IntrinsicElements'.
-src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(69,9): error TS2322: Type '(props: {    thisIsRequired: boolean;}) => JSX.Element' is not assignable to type 'keyof IntrinsicElements'.
-src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx(70,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(20,8): error TS2741: Property 'as' is missing in type '{ doesNotExist: true; }' but required in type '{ as: ElementType; }'.
-src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(21,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(25,8): error TS2741: Property 'as' is missing in type '{ onClick: (e: any) => void; }' but required in type '{ as: ElementType; }'.
-src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(27,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/71-as-prop-with-default.problem.tsx(29,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(12,11): error TS2322: Type 'Omit<{ as?: T | undefined; } & ComponentPropsWithoutRef<PermittedElements extends T ? "p" : T>, "as">' is not assignable to type 'IntrinsicAttributes & ((ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & ClassAttributes<...> & LabelHTMLAttributes<...> & ClassAttributes<...> & HTMLAttributes<...>) | LibraryManagedAttributes<...>)'.
-  Type 'Omit<{ as?: T | undefined; } & ComponentPropsWithoutRef<PermittedElements extends T ? "p" : T>, "as">' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<T, ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & ClassAttributes<...> & LabelHTMLAttributes<...> & ClassAttributes<...> & HTMLAttributes<...>>'.
-    Type 'Omit<{ as?: T | undefined; } & ComponentPropsWithoutRef<PermittedElements extends T ? "p" : T>, "as">' is not assignable to type 'LibraryManagedAttributes<T, ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & ClassAttributes<...> & LabelHTMLAttributes<...> & ClassAttributes<...> & HTMLAttributes<...>>'.
-src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(29,19): error TS7006: Parameter 'e' implicitly has an 'any' type.
-src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(31,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(47,9): error TS2322: Type '"button"' is not assignable to type 'PermittedElements | undefined'.
-src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(48,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(53,9): error TS2322: Type '"button"' is not assignable to type 'PermittedElements | undefined'.
-src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(57,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(79,19): error TS2322: Type '(props: {    thisIsRequired: boolean;}, ref: React.ForwardedRef<HTMLAnchorElement>) => JSX.Element' is not assignable to type 'PermittedElements | undefined'.
-src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(81,9): error TS2322: Type '(props: {    thisIsRequired: boolean;}, ref: React.ForwardedRef<HTMLAnchorElement>) => JSX.Element' is not assignable to type 'PermittedElements | undefined'.
-src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx(82,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(42,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(80,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(95,13): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(121,25): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
-  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(128,8): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(131,35): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; ref: RefObject<HTMLAnchorElement>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
-  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(135,9): error TS2578: Unused '@ts-expect-error' directive.
-src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx(137,9): error TS2322: Type '{ as: ForwardRefExoticComponent<{ thisIsRequired: boolean; } & RefAttributes<HTMLAnchorElement>>; ref: RefObject<HTMLDivElement>; thisIsRequired: true; }' is not assignable to type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
-  Property 'thisIsRequired' does not exist on type 'IntrinsicAttributes & { as?: ElementType | undefined; } & Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & RefAttributes<...>'.
-src/09-external-libraries/73-react-hook-form.problem.tsx(70,28): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/73-react-hook-form.problem.tsx(75,8): error TS2578: Unused '@ts-expect-error' directive.
-src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(33,3): error TS2578: Unused '@ts-expect-error' directive.
-src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx(46,5): error TS2344: Type 'boolean' does not satisfy the constraint 'true'.
-src/09-external-libraries/75-react-select.problem.tsx(10,24): error TS7006: Parameter 'props' implicitly has an 'any' type.
-src/09-external-libraries/75-react-select.problem.tsx(33,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
-src/09-external-libraries/75-react-select.problem.tsx(36,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/75-react-select.problem.tsx(43,16): error TS7006: Parameter 'option' implicitly has an 'any' type.
-src/09-external-libraries/75-react-select.problem.tsx(45,26): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/77-react-query-wrapper.problem.ts(30,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/77-react-query-wrapper.problem.ts(44,10): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-src/09-external-libraries/77-react-query-wrapper.problem.ts(51,12): error TS2344: Type 'false' does not satisfy the constraint 'true'.
-,
-```
-
-
-
-# Vitest Snapshot
-
-```json
-{
-  "success": false,
-  "testResults": [
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/01-introduction/01-react-in-typescript.explainer.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/01-introduction/02-typescript-in-react-frameworks.explainer.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Transform failed with 1 error:\n/Users/matt/repos/total-typescript/react-typescript-tutorial/src/01-introduction/03-navigating-jsx-types.problem.tsx:5:21: ERROR: Unexpected \"}\"",
-      "name": "src/01-introduction/03-navigating-jsx-types.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/01-introduction/03-navigating-jsx-types.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/04-typing-components.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/04-typing-components.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/04-typing-components.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/04-typing-components.solution.3.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/04-typing-components.solution.4.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/05-typing-components-as-functions.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/05-typing-components-as-functions.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/06-typing-children.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/06-typing-children.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/07-typing-onclick-handlers.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/07-typing-onclick-handlers.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/08-using-html-props.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/08-using-html-props.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/08-using-html-props.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/09-html-props-with-one-changed.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/09-html-props-with-one-changed.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/09-html-props-with-one-changed.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/09-html-props-with-one-changed.solution.3.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/09-html-props-with-one-changed.solution.4.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/10-extracting-props-from-custom-components.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/02-components/10-extracting-props-from-custom-components.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/11-use-state.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/11-use-state.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/12-use-state-with-undefined.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/12-use-state-with-undefined.solution.1.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/12-use-state-with-undefined.solution.2.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/13-use-state-excess-properties.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/13-use-state-excess-properties.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/14-use-effect.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/14-use-effect.solution.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/15-use-callback.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/15-use-callback.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/16-use-memo.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/16-use-memo.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/16-use-memo.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/16-use-memo.solution.3.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/17-use-ref-basics.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/17-use-ref-basics.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/18-element-refs.explainer.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/19-use-ref-with-elements.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/19-use-ref-with-elements.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/20-why-is-my-ref-readonly.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/03-hooks/20-why-is-my-ref-readonly.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useReducer')",
-      "name": "src/03-hooks/21-use-reducer.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useReducer')",
-      "name": "src/03-hooks/21-use-reducer.solution.1.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useReducer')",
-      "name": "src/03-hooks/21-use-reducer.solution.2.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useReducer')",
-      "name": "src/03-hooks/21-use-reducer.solution.3.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/22-discriminated-union-props.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/22-discriminated-union-props.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/23-destructuring-discriminated-unions.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/23-destructuring-discriminated-unions.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/23-destructuring-discriminated-unions.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/24-discriminated-union-with-other-props.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/24-discriminated-union-with-other-props.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/25-toggle-props.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/25-toggle-props.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/26-empty-object-type.explainer.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/27-either-all-these-props-or-none.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/27-either-all-these-props-or-none.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/28-passing-react-components-vs-passing-react-nodes.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/29-variants-with-classnames.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/29-variants-with-classnames.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/30-partial-autocomplete.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/30-partial-autocomplete.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/31-as-const.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/31-as-const.solution.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/32-satisfies-vs-annotation-vs-as.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/32-satisfies-vs-annotation-vs-as.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/33-prop-groups-with-variants.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/04-advanced-props/33-prop-groups-with-variants.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/34-type-helpers.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/34-type-helpers.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/35-type-helpers-2.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/35-type-helpers-2.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/36-type-helpers-with-constraints.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/36-type-helpers-with-constraints.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/36-type-helpers-with-constraints.solution.2.tsx"
-    },
-    {
-      "assertionResults": [
-        {
-          "ancestorTitles": [
-            ""
-          ],
-          "fullName": " Should let you set and get values",
-          "status": "passed",
-          "title": "Should let you set and get values",
-          "failureMessages": []
-        },
-        {
-          "ancestorTitles": [
-            ""
-          ],
-          "fullName": " Should not let you set a value that is not the same type as the type argument passed",
-          "status": "passed",
-          "title": "Should not let you set a value that is not the same type as the type argument passed",
-          "failureMessages": []
-        }
-      ],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/37-generic-localstorage-hook.problem.ts"
-    },
-    {
-      "assertionResults": [
-        {
-          "ancestorTitles": [
-            ""
-          ],
-          "fullName": " Should let you set and get values",
-          "status": "passed",
-          "title": "Should let you set and get values",
-          "failureMessages": []
-        },
-        {
-          "ancestorTitles": [
-            ""
-          ],
-          "fullName": " Should not let you set a value that is not the same type as the type argument passed",
-          "status": "passed",
-          "title": "Should not let you set a value that is not the same type as the type argument passed",
-          "failureMessages": []
-        }
-      ],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/37-generic-localstorage-hook.solution.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/05-generics/38-generic-hooks.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/05-generics/38-generic-hooks.solution.1.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/05-generics/38-generic-hooks.solution.2.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/05-generics/38-generic-hooks.solution.3.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/05-generics/38-generic-hooks.solution.4.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/05-generics/38-generic-hooks.solution.5.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/39-generic-props.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/39-generic-props.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/40-generic-class-components.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/40-generic-class-components.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/41-passing-types-to-components.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/41-passing-types-to-components.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/42-generic-inference-through-multiple-helpers.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/42-generic-inference-through-multiple-helpers.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/05-generics/43-inference-flow-with-constraints.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/05-generics/43-inference-flow-with-constraints.solution.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/44-generics-vs-discriminated-unions.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/05-generics/44-generics-vs-discriminated-unions.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/06-advanced-hooks/45-tuple-return-type.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/06-advanced-hooks/45-tuple-return-type.solution.1.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/06-advanced-hooks/45-tuple-return-type.solution.2.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/46-required-context.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/46-required-context.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/46-required-context.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/47-unions-in-usestate.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/47-unions-in-usestate.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/48-discriminated-unions-in-usestate.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/48-discriminated-unions-in-usestate.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/49-discriminated-tuples-from-custom-hooks.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/50-use-state-overloads.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/50-use-state-overloads.solution.1.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/50-use-state-overloads.solution.2.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/06-advanced-hooks/51-function-overloads-in-hooks.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/06-advanced-hooks/51-function-overloads-in-hooks.solution.1.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useState')",
-      "name": "src/06-advanced-hooks/51-function-overloads-in-hooks.solution.2.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/52-currying-hooks.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/06-advanced-hooks/52-currying-hooks.solution.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/53-understand-react-namespace-export.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/53-understand-react-namespace-export.solution.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/54-understanding-jsx-element.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/54-understanding-jsx-element.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/55-strongly-typing-children.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/55-strongly-typing-children.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/56-understanding-jsx-intrinsic-elements.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "React is not defined",
-      "name": "src/07-types-deep-dive/57-react-component-type.explainer.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/58-appending-to-global-namespace.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/58-appending-to-global-namespace.solution.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/59-declaration-merging-in-global-namespace.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/59-declaration-merging-in-global-namespace.solution.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/60-add-new-global-element.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/60-add-new-global-element.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/61-html-attributes.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/61-html-attributes.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/62-add-attribute-to-all-elements.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/07-types-deep-dive/62-add-attribute-to-all-elements.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/63-lazy-load-component.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/63-lazy-load-component.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/64-render-props.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/64-render-props.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/64.5-record-of-components-with-same-props.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/64.5-record-of-components-with-same-props.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/65-forward-ref-with-generics.explainer.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/65-forward-ref-with-generics.explainer.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/65-forward-ref-with-generics.explainer.3.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/67-hoc.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/67-hoc.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/67.5-hoc-for-generic-components.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/67.5-hoc-for-generic-components.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/69-as-prop.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/69-as-prop.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/69-as-prop.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/70-as-prop-with-custom-components.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/70-as-prop-with-custom-components.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/71-as-prop-with-default.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/71-as-prop-with-default.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/71-as-prop-with-default.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/09-external-libraries/73-react-hook-form.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/09-external-libraries/73-react-hook-form.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "src/09-external-libraries/74-react-hook-form-wrapper.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "src/09-external-libraries/74-react-hook-form-wrapper.solution.1.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useRef')",
-      "name": "src/09-external-libraries/74-react-hook-form-wrapper.solution.2.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/09-external-libraries/75-react-select.problem.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "passed",
-      "message": "",
-      "name": "src/09-external-libraries/75-react-select.solution.tsx"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "src/09-external-libraries/76-react-query.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "src/09-external-libraries/76-react-query.solution.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "src/09-external-libraries/77-react-query-wrapper.problem.ts"
-    },
-    {
-      "assertionResults": [],
-      "status": "failed",
-      "message": "Cannot read properties of null (reading 'useContext')",
-      "name": "src/09-external-libraries/77-react-query-wrapper.solution.ts"
-    }
-  ]
-}
-```
\ No newline at end of file

From 3e2f203b498b384c7f1676bb24a57a65a2296dbb Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Wed, 8 May 2024 12:14:50 +0100
Subject: [PATCH 138/165] Updated the renovate CI

---
 .github/workflows/renovate-checks.yml | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/renovate-checks.yml b/.github/workflows/renovate-checks.yml
index d56979c..fa3c642 100644
--- a/.github/workflows/renovate-checks.yml
+++ b/.github/workflows/renovate-checks.yml
@@ -12,20 +12,23 @@ jobs:
         uses: actions/checkout@v4
         with:
           ref: main
-          path: main
+          path: repo
 
+      - name: Install Dependencies in Main
+        run: (cd repo && npm install)
+      - name: Create Snapshot In Main
+        run: (cd repo && npx tt-cli take-snapshot ./snap.md)
+      - name: Copy Snapshot To Outer Directory
+        run: mv repo/snap.md ./snap.md
+      - name: Delete Main Directory
+        run: rm -rf repo
       - name: Checkout Branch
         uses: actions/checkout@v4
         with:
-          path: branch
-
-      - name: Install Dependencies in Main
-        run: (cd main && npm install)
+          path: repo
       - name: Install Dependencies in Branch
-        run: (cd branch && npm install)
-      - name: Create Snapshot In Main
-        run: (cd main && npx tt-cli take-snapshot ./snap.md)
-      - name: Copy Snapshot To Branch
-        run: cp main/snap.md branch/snap.md
+        run: (cd repo && npm install)
+      - name: Move Snapshot To Branch
+        run: mv ./snap.md repo/snap.md
       - name: Compare Snapshot In Branch
-        run: (cd branch && npx tt-cli compare-snapshot ./snap.md)
+        run: (cd repo && npx tt-cli compare-snapshot ./snap.md)

From 54289eecead4071eb2bec1b030d04e161ba0fd3a Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 5 Jun 2024 15:24:10 +0000
Subject: [PATCH 139/165] chore(deps): update dependency
 @total-typescript/exercise-cli to ^0.7.0

---
 package-lock.json | 32 ++++++++++++++++----------------
 package.json      |  2 +-
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f4ba3f..a18afe4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "zod": "^3.21.4"
       },
       "devDependencies": {
-        "@total-typescript/exercise-cli": "^0.6.1",
+        "@total-typescript/exercise-cli": "^0.7.0",
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
@@ -841,14 +841,14 @@
       }
     },
     "node_modules/@total-typescript/exercise-cli": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.6.1.tgz",
-      "integrity": "sha512-6s/zzQ1LomYt3tlnHkTTZfavmn23Ye6p1ixgir08A9buDiKHnSxwpx1ErthJokyPhDsKZg5kK4OgE5gxI6znOQ==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.7.0.tgz",
+      "integrity": "sha512-AOkIQqZZkYoydhoKmhYvENSbWlk3D8zvuEnrMF68HMyKWYpvBWL8ZscZ8d3RZbULgjYDhwfSehNHW0HSmxKTjg==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
         "colors": "^1.4.0",
-        "commander": "^10.0.1",
+        "commander": "^12.0.0",
         "fast-glob": "^3.2.12",
         "jsonc-parser": "^3.2.0",
         "prompts": "^2.4.2"
@@ -1396,12 +1396,12 @@
       }
     },
     "node_modules/commander": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
       "dev": true,
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/content-disposition": {
@@ -4536,14 +4536,14 @@
       "dev": true
     },
     "@total-typescript/exercise-cli": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.6.1.tgz",
-      "integrity": "sha512-6s/zzQ1LomYt3tlnHkTTZfavmn23Ye6p1ixgir08A9buDiKHnSxwpx1ErthJokyPhDsKZg5kK4OgE5gxI6znOQ==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.7.0.tgz",
+      "integrity": "sha512-AOkIQqZZkYoydhoKmhYvENSbWlk3D8zvuEnrMF68HMyKWYpvBWL8ZscZ8d3RZbULgjYDhwfSehNHW0HSmxKTjg==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.3",
         "colors": "^1.4.0",
-        "commander": "^10.0.1",
+        "commander": "^12.0.0",
         "fast-glob": "^3.2.12",
         "jsonc-parser": "^3.2.0",
         "prompts": "^2.4.2"
@@ -4980,9 +4980,9 @@
       }
     },
     "commander": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
       "dev": true
     },
     "content-disposition": {
diff --git a/package.json b/package.json
index 728c316..b87f68b 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "Matt Pocock <mattpocockvoice@gmail.com>",
   "license": "GPL",
   "devDependencies": {
-    "@total-typescript/exercise-cli": "^0.6.1",
+    "@total-typescript/exercise-cli": "^0.7.0",
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",

From f31d14aa0ad8e39cbfb4819ea88f0642129706a3 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 20 Jun 2024 19:31:53 +0000
Subject: [PATCH 140/165] chore(deps): update dependency typescript to v5.5.2

---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a18afe4..621be84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3578,9 +3578,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz",
+      "integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -6571,9 +6571,9 @@
       }
     },
     "typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz",
+      "integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==",
       "dev": true
     },
     "ufo": {

From 2ecd8fde6952aec3ead7105e66ec4d2fd12f1afd Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 1 Jul 2024 22:03:07 +0000
Subject: [PATCH 141/165] chore(deps): update dependency typescript to v5.5.3

---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 621be84..08b3a39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3578,9 +3578,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz",
-      "integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -6571,9 +6571,9 @@
       }
     },
     "typescript": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz",
-      "integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
       "dev": true
     },
     "ufo": {

From 8f6c58e3b60137b0483b7a8903975eaf0c50b891 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Sat, 6 Jul 2024 07:52:52 +0100
Subject: [PATCH 142/165] Added section repos workflow

---
 .github/workflows/section-repos.yml | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 .github/workflows/section-repos.yml

diff --git a/.github/workflows/section-repos.yml b/.github/workflows/section-repos.yml
new file mode 100644
index 0000000..9802d04
--- /dev/null
+++ b/.github/workflows/section-repos.yml
@@ -0,0 +1,20 @@
+name: Create Section Repos
+on:
+  push:
+    branches:
+      - "main"
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - run: git config --global user.email "total-typescript@bot.com"
+      - run: git config --global user.name "Total TypeScript Bot"
+      - run: npx @total-typescript/exercise-cli@latest create-section-repos
+    env:
+      GITHUB_TOKEN: ${{ secrets.MY_GITHUB_TOKEN }}
+      GH_TOKEN: ${{ secrets.MY_GITHUB_TOKEN }}

From 840c1cb4d7dce3c15e25b3e8408e1b8417a5b773 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 7 Jul 2024 14:17:21 +0000
Subject: [PATCH 143/165] chore(deps): update dependency
 @total-typescript/exercise-cli to ^0.10.0

---
 package-lock.json | 50 ++++++++++++++++++++++++-----------------------
 package.json      |  2 +-
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 08b3a39..3001581 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "zod": "^3.21.4"
       },
       "devDependencies": {
-        "@total-typescript/exercise-cli": "^0.7.0",
+        "@total-typescript/exercise-cli": "^0.10.0",
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
@@ -841,14 +841,14 @@
       }
     },
     "node_modules/@total-typescript/exercise-cli": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.7.0.tgz",
-      "integrity": "sha512-AOkIQqZZkYoydhoKmhYvENSbWlk3D8zvuEnrMF68HMyKWYpvBWL8ZscZ8d3RZbULgjYDhwfSehNHW0HSmxKTjg==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.10.0.tgz",
+      "integrity": "sha512-0itd7iIPPTtzvWEEz4a9b0m2tJLyHnfTfiJZESwoiMxy7XhUJ6sskhuBrY+xiWytYHW8HtMk9DVNDs7qZBgDgQ==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
         "colors": "^1.4.0",
-        "commander": "^12.0.0",
+        "commander": "^10.0.1",
         "fast-glob": "^3.2.12",
         "jsonc-parser": "^3.2.0",
         "prompts": "^2.4.2"
@@ -861,6 +861,15 @@
         "vitest": "*"
       }
     },
+    "node_modules/@total-typescript/exercise-cli/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -1395,15 +1404,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/commander": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
-      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
-      "dev": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -4536,17 +4536,25 @@
       "dev": true
     },
     "@total-typescript/exercise-cli": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.7.0.tgz",
-      "integrity": "sha512-AOkIQqZZkYoydhoKmhYvENSbWlk3D8zvuEnrMF68HMyKWYpvBWL8ZscZ8d3RZbULgjYDhwfSehNHW0HSmxKTjg==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.10.0.tgz",
+      "integrity": "sha512-0itd7iIPPTtzvWEEz4a9b0m2tJLyHnfTfiJZESwoiMxy7XhUJ6sskhuBrY+xiWytYHW8HtMk9DVNDs7qZBgDgQ==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.3",
         "colors": "^1.4.0",
-        "commander": "^12.0.0",
+        "commander": "^10.0.1",
         "fast-glob": "^3.2.12",
         "jsonc-parser": "^3.2.0",
         "prompts": "^2.4.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "10.0.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+          "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+          "dev": true
+        }
       }
     },
     "@types/body-parser": {
@@ -4979,12 +4987,6 @@
         "delayed-stream": "~1.0.0"
       }
     },
-    "commander": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
-      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
-      "dev": true
-    },
     "content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
diff --git a/package.json b/package.json
index b87f68b..4bed5b6 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "Matt Pocock <mattpocockvoice@gmail.com>",
   "license": "GPL",
   "devDependencies": {
-    "@total-typescript/exercise-cli": "^0.7.0",
+    "@total-typescript/exercise-cli": "^0.10.0",
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",

From 5e2f2cfdf9b2468ffa3c8b98985a13cf160b0a35 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:07:20 +0000
Subject: [PATCH 144/165] chore(deps): update dependency vitest to v2

---
 package-lock.json | 704 ++++++++++++++++++++--------------------------
 package.json      |   2 +-
 2 files changed, 303 insertions(+), 403 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 08b3a39..4f58364 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,20 @@
         "prettier": "^2.8.7",
         "typescript": "^5.4.5",
         "vite-tsconfig-paths": "^4.0.7",
-        "vitest": "^1.6.0"
+        "vitest": "^2.0.0"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -593,12 +606,54 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
       "dev": true
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -980,41 +1035,40 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
-      "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.0.tgz",
+      "integrity": "sha512-5BSfZ0+dAVmC6uPF7s+TcKx0i7oyYHb1WQQL5gg6G2c+Qkaa5BNrdRM74sxDfUIZUgYCr6bfCqmJp+X5bfcNxQ==",
       "dev": true,
       "dependencies": {
-        "@vitest/spy": "1.6.0",
-        "@vitest/utils": "1.6.0",
-        "chai": "^4.3.10"
+        "@vitest/spy": "2.0.0",
+        "@vitest/utils": "2.0.0",
+        "chai": "^5.1.1"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz",
-      "integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.0.tgz",
+      "integrity": "sha512-OovFmlkfRmdhevbWImBUtn9IEM+CKac8O+m9p6W9jTATGVBnDJQ6/jb1gpHyWxsu0ALi5f+TLi+Uyst7AAimMw==",
       "dev": true,
       "dependencies": {
-        "@vitest/utils": "1.6.0",
-        "p-limit": "^5.0.0",
-        "pathe": "^1.1.1"
+        "@vitest/utils": "2.0.0",
+        "pathe": "^1.1.2"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz",
-      "integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.0.tgz",
+      "integrity": "sha512-B520cSAQwtWgocPpARadnNLslHCxFs5tf7SG2TT96qz+SZgsXqcB1xI3w3/S9kUzdqykEKrMLvW+sIIpMcuUdw==",
       "dev": true,
       "dependencies": {
-        "magic-string": "^0.30.5",
-        "pathe": "^1.1.1",
+        "magic-string": "^0.30.10",
+        "pathe": "^1.1.2",
         "pretty-format": "^29.7.0"
       },
       "funding": {
@@ -1022,26 +1076,26 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz",
-      "integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.0.tgz",
+      "integrity": "sha512-0g7ho4wBK09wq8iNZFtUcQZcUcbPmbLWFotL0GXel0fvk5yPi4nTEKpIvZ+wA5eRyqPUCIfIUl10AWzLr67cmA==",
       "dev": true,
       "dependencies": {
-        "tinyspy": "^2.2.0"
+        "tinyspy": "^3.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz",
-      "integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.0.tgz",
+      "integrity": "sha512-t0jbx8VugWEP6A29NbyfQKVU68Vo6oUw0iX3a8BwO3nrZuivfHcFO4Y5UsqXlplX+83P9UaqEvC2YQhspC0JSA==",
       "dev": true,
       "dependencies": {
         "diff-sequences": "^29.6.3",
         "estree-walker": "^3.0.3",
-        "loupe": "^2.3.7",
+        "loupe": "^3.1.1",
         "pretty-format": "^29.7.0"
       },
       "funding": {
@@ -1163,12 +1217,12 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
     "node_modules/assertion-error": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
-      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
       "dev": true,
       "engines": {
-        "node": "*"
+        "node": ">=12"
       }
     },
     "node_modules/asynckit": {
@@ -1273,21 +1327,19 @@
       }
     },
     "node_modules/chai": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
-      "integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
+      "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==",
       "dev": true,
       "dependencies": {
-        "assertion-error": "^1.1.0",
-        "check-error": "^1.0.3",
-        "deep-eql": "^4.1.3",
-        "get-func-name": "^2.0.2",
-        "loupe": "^2.3.6",
-        "pathval": "^1.1.1",
-        "type-detect": "^4.0.8"
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=12"
       }
     },
     "node_modules/chalk": {
@@ -1323,15 +1375,12 @@
       }
     },
     "node_modules/check-error": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
-      "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
       "dev": true,
-      "dependencies": {
-        "get-func-name": "^2.0.2"
-      },
       "engines": {
-        "node": "*"
+        "node": ">= 16"
       }
     },
     "node_modules/chokidar": {
@@ -1525,13 +1574,10 @@
       "dev": true
     },
     "node_modules/deep-eql": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
-      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
       "dev": true,
-      "dependencies": {
-        "type-detect": "^4.0.0"
-      },
       "engines": {
         "node": ">=6"
       }
@@ -2357,22 +2403,6 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
-    "node_modules/local-pkg": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
-      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
-      "dev": true,
-      "dependencies": {
-        "mlly": "^1.4.2",
-        "pkg-types": "^1.0.3"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -2385,9 +2415,9 @@
       }
     },
     "node_modules/loupe": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
-      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
+      "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
       "dev": true,
       "dependencies": {
         "get-func-name": "^2.0.1"
@@ -2498,18 +2528,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/mlly": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
-      "integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^8.10.0",
-        "pathe": "^1.1.1",
-        "pkg-types": "^1.0.3",
-        "ufo": "^1.3.0"
-      }
-    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -2684,21 +2702,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/p-limit": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-5.0.0.tgz",
-      "integrity": "sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2775,24 +2778,24 @@
       }
     },
     "node_modules/pathe": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
-      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
       "dev": true
     },
     "node_modules/pathval": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
-      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
       "dev": true,
       "engines": {
-        "node": "*"
+        "node": ">= 14.16"
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
       "dev": true
     },
     "node_modules/picomatch": {
@@ -2807,17 +2810,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pkg-types": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
-      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
-      "dev": true,
-      "dependencies": {
-        "jsonc-parser": "^3.2.0",
-        "mlly": "^1.2.0",
-        "pathe": "^1.1.0"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
@@ -3377,9 +3369,9 @@
       }
     },
     "node_modules/std-env": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.6.0.tgz",
-      "integrity": "sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg==",
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
       "dev": true
     },
     "node_modules/strip-final-newline": {
@@ -3394,24 +3386,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/strip-literal": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.0.tgz",
-      "integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
-      "dev": true,
-      "dependencies": {
-        "js-tokens": "^9.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/strip-literal/node_modules/js-tokens": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz",
-      "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
-      "dev": true
-    },
     "node_modules/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
@@ -3446,24 +3420,24 @@
       "dev": true
     },
     "node_modules/tinybench": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.1.tgz",
-      "integrity": "sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.8.0.tgz",
+      "integrity": "sha512-1/eK7zUnIklz4JUUlL+658n58XO2hHLQfSk1Zf2LKieUjxidN16eKFEoDEfjHc3ohofSSqK3X5yO6VGb6iW8Lw==",
       "dev": true
     },
     "node_modules/tinypool": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.4.tgz",
-      "integrity": "sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.0.tgz",
+      "integrity": "sha512-KIKExllK7jp3uvrNtvRBYBWBOAXSX8ZvoaD8T+7KB/QHIuoJW3Pmr60zucywjAlMb5TeXUkcs/MWeWLu0qvuAQ==",
       "dev": true,
       "engines": {
-        "node": ">=14.0.0"
+        "node": "^18.0.0 || >=20.0.0"
       }
     },
     "node_modules/tinyspy": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
-      "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
+      "integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
@@ -3556,15 +3530,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -3590,12 +3555,6 @@
         "node": ">=14.17"
       }
     },
-    "node_modules/ufo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.2.tgz",
-      "integrity": "sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==",
-      "dev": true
-    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -3716,15 +3675,15 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz",
-      "integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.0.tgz",
+      "integrity": "sha512-jZtezmjcgZTkMisIi68TdY8w/PqPTxK2pbfTU9/4Gqus1K3AVZqkwH0z7Vshe3CD6mq9rJq8SpqmuefDMIqkfQ==",
       "dev": true,
       "dependencies": {
         "cac": "^6.7.14",
-        "debug": "^4.3.4",
-        "pathe": "^1.1.1",
-        "picocolors": "^1.0.0",
+        "debug": "^4.3.5",
+        "pathe": "^1.1.2",
+        "picocolors": "^1.0.1",
         "vite": "^5.0.0"
       },
       "bin": {
@@ -3738,9 +3697,9 @@
       }
     },
     "node_modules/vite-node/node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
+      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
       "dev": true,
       "dependencies": {
         "ms": "2.1.2"
@@ -3803,30 +3762,28 @@
       "dev": true
     },
     "node_modules/vitest": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
-      "integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==",
-      "dev": true,
-      "dependencies": {
-        "@vitest/expect": "1.6.0",
-        "@vitest/runner": "1.6.0",
-        "@vitest/snapshot": "1.6.0",
-        "@vitest/spy": "1.6.0",
-        "@vitest/utils": "1.6.0",
-        "acorn-walk": "^8.3.2",
-        "chai": "^4.3.10",
-        "debug": "^4.3.4",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.0.tgz",
+      "integrity": "sha512-NvccE2tZhIoPSq3o3AoTBmItwhHNjzIxvOgfdzILIscyzSGOtw2+A1d/JJbS86HDVbc6TS5HnckQuCgTfp0HDQ==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@vitest/expect": "2.0.0",
+        "@vitest/runner": "2.0.0",
+        "@vitest/snapshot": "2.0.0",
+        "@vitest/spy": "2.0.0",
+        "@vitest/utils": "2.0.0",
+        "chai": "^5.1.1",
+        "debug": "^4.3.5",
         "execa": "^8.0.1",
-        "local-pkg": "^0.5.0",
-        "magic-string": "^0.30.5",
-        "pathe": "^1.1.1",
-        "picocolors": "^1.0.0",
-        "std-env": "^3.5.0",
-        "strip-literal": "^2.0.0",
-        "tinybench": "^2.5.1",
-        "tinypool": "^0.8.3",
+        "magic-string": "^0.30.10",
+        "pathe": "^1.1.2",
+        "picocolors": "^1.0.1",
+        "std-env": "^3.7.0",
+        "tinybench": "^2.8.0",
+        "tinypool": "^1.0.0",
         "vite": "^5.0.0",
-        "vite-node": "1.6.0",
+        "vite-node": "2.0.0",
         "why-is-node-running": "^2.2.2"
       },
       "bin": {
@@ -3841,8 +3798,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "1.6.0",
-        "@vitest/ui": "1.6.0",
+        "@vitest/browser": "2.0.0",
+        "@vitest/ui": "2.0.0",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -3868,9 +3825,9 @@
       }
     },
     "node_modules/vitest/node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
+      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
       "dev": true,
       "dependencies": {
         "ms": "2.1.2"
@@ -4041,18 +3998,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/yocto-queue": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
-      "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/zod": {
       "version": "3.21.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
@@ -4063,6 +4008,16 @@
     }
   },
   "dependencies": {
+    "@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.21.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
@@ -4393,12 +4348,45 @@
         "@sinclair/typebox": "^0.27.8"
       }
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
       "dev": true
     },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4668,56 +4656,55 @@
       }
     },
     "@vitest/expect": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
-      "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.0.tgz",
+      "integrity": "sha512-5BSfZ0+dAVmC6uPF7s+TcKx0i7oyYHb1WQQL5gg6G2c+Qkaa5BNrdRM74sxDfUIZUgYCr6bfCqmJp+X5bfcNxQ==",
       "dev": true,
       "requires": {
-        "@vitest/spy": "1.6.0",
-        "@vitest/utils": "1.6.0",
-        "chai": "^4.3.10"
+        "@vitest/spy": "2.0.0",
+        "@vitest/utils": "2.0.0",
+        "chai": "^5.1.1"
       }
     },
     "@vitest/runner": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz",
-      "integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.0.tgz",
+      "integrity": "sha512-OovFmlkfRmdhevbWImBUtn9IEM+CKac8O+m9p6W9jTATGVBnDJQ6/jb1gpHyWxsu0ALi5f+TLi+Uyst7AAimMw==",
       "dev": true,
       "requires": {
-        "@vitest/utils": "1.6.0",
-        "p-limit": "^5.0.0",
-        "pathe": "^1.1.1"
+        "@vitest/utils": "2.0.0",
+        "pathe": "^1.1.2"
       }
     },
     "@vitest/snapshot": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz",
-      "integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.0.tgz",
+      "integrity": "sha512-B520cSAQwtWgocPpARadnNLslHCxFs5tf7SG2TT96qz+SZgsXqcB1xI3w3/S9kUzdqykEKrMLvW+sIIpMcuUdw==",
       "dev": true,
       "requires": {
-        "magic-string": "^0.30.5",
-        "pathe": "^1.1.1",
+        "magic-string": "^0.30.10",
+        "pathe": "^1.1.2",
         "pretty-format": "^29.7.0"
       }
     },
     "@vitest/spy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz",
-      "integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.0.tgz",
+      "integrity": "sha512-0g7ho4wBK09wq8iNZFtUcQZcUcbPmbLWFotL0GXel0fvk5yPi4nTEKpIvZ+wA5eRyqPUCIfIUl10AWzLr67cmA==",
       "dev": true,
       "requires": {
-        "tinyspy": "^2.2.0"
+        "tinyspy": "^3.0.0"
       }
     },
     "@vitest/utils": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz",
-      "integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.0.tgz",
+      "integrity": "sha512-t0jbx8VugWEP6A29NbyfQKVU68Vo6oUw0iX3a8BwO3nrZuivfHcFO4Y5UsqXlplX+83P9UaqEvC2YQhspC0JSA==",
       "dev": true,
       "requires": {
         "diff-sequences": "^29.6.3",
         "estree-walker": "^3.0.3",
-        "loupe": "^2.3.7",
+        "loupe": "^3.1.1",
         "pretty-format": "^29.7.0"
       }
     },
@@ -4806,9 +4793,9 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
     "assertion-error": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
-      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
       "dev": true
     },
     "asynckit": {
@@ -4887,18 +4874,16 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "chai": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
-      "integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
+      "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==",
       "dev": true,
       "requires": {
-        "assertion-error": "^1.1.0",
-        "check-error": "^1.0.3",
-        "deep-eql": "^4.1.3",
-        "get-func-name": "^2.0.2",
-        "loupe": "^2.3.6",
-        "pathval": "^1.1.1",
-        "type-detect": "^4.0.8"
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
       }
     },
     "chalk": {
@@ -4927,13 +4912,10 @@
       }
     },
     "check-error": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
-      "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
-      "dev": true,
-      "requires": {
-        "get-func-name": "^2.0.2"
-      }
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
+      "dev": true
     },
     "chokidar": {
       "version": "3.5.3",
@@ -5085,13 +5067,10 @@
       "dev": true
     },
     "deep-eql": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
-      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
-      "dev": true,
-      "requires": {
-        "type-detect": "^4.0.0"
-      }
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true
     },
     "deep-is": {
       "version": "0.1.4",
@@ -5709,16 +5688,6 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
-    "local-pkg": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
-      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
-      "dev": true,
-      "requires": {
-        "mlly": "^1.4.2",
-        "pkg-types": "^1.0.3"
-      }
-    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5728,9 +5697,9 @@
       }
     },
     "loupe": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
-      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
+      "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
       "dev": true,
       "requires": {
         "get-func-name": "^2.0.1"
@@ -5811,18 +5780,6 @@
       "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
       "dev": true
     },
-    "mlly": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
-      "integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
-      "dev": true,
-      "requires": {
-        "acorn": "^8.10.0",
-        "pathe": "^1.1.1",
-        "pkg-types": "^1.0.3",
-        "ufo": "^1.3.0"
-      }
-    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -5942,15 +5899,6 @@
         "word-wrap": "~1.2.3"
       }
     },
-    "p-limit": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-5.0.0.tgz",
-      "integrity": "sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==",
-      "dev": true,
-      "requires": {
-        "yocto-queue": "^1.0.0"
-      }
-    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -6006,21 +5954,21 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
     "pathe": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
-      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
       "dev": true
     },
     "pathval": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
-      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
       "dev": true
     },
     "picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
       "dev": true
     },
     "picomatch": {
@@ -6029,17 +5977,6 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
-    "pkg-types": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
-      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
-      "dev": true,
-      "requires": {
-        "jsonc-parser": "^3.2.0",
-        "mlly": "^1.2.0",
-        "pathe": "^1.1.0"
-      }
-    },
     "postcss": {
       "version": "8.4.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
@@ -6429,9 +6366,9 @@
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
     "std-env": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.6.0.tgz",
-      "integrity": "sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg==",
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
       "dev": true
     },
     "strip-final-newline": {
@@ -6440,23 +6377,6 @@
       "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
       "dev": true
     },
-    "strip-literal": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.0.tgz",
-      "integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
-      "dev": true,
-      "requires": {
-        "js-tokens": "^9.0.0"
-      },
-      "dependencies": {
-        "js-tokens": {
-          "version": "9.0.0",
-          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz",
-          "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
-          "dev": true
-        }
-      }
-    },
     "stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
@@ -6482,21 +6402,21 @@
       "dev": true
     },
     "tinybench": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.1.tgz",
-      "integrity": "sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.8.0.tgz",
+      "integrity": "sha512-1/eK7zUnIklz4JUUlL+658n58XO2hHLQfSk1Zf2LKieUjxidN16eKFEoDEfjHc3ohofSSqK3X5yO6VGb6iW8Lw==",
       "dev": true
     },
     "tinypool": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.4.tgz",
-      "integrity": "sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.0.tgz",
+      "integrity": "sha512-KIKExllK7jp3uvrNtvRBYBWBOAXSX8ZvoaD8T+7KB/QHIuoJW3Pmr60zucywjAlMb5TeXUkcs/MWeWLu0qvuAQ==",
       "dev": true
     },
     "tinyspy": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
-      "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
+      "integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==",
       "dev": true
     },
     "to-fast-properties": {
@@ -6555,12 +6475,6 @@
         "prelude-ls": "~1.1.2"
       }
     },
-    "type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "dev": true
-    },
     "type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -6576,12 +6490,6 @@
       "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
       "dev": true
     },
-    "ufo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.2.tgz",
-      "integrity": "sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==",
-      "dev": true
-    },
     "universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -6638,22 +6546,22 @@
       }
     },
     "vite-node": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz",
-      "integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.0.tgz",
+      "integrity": "sha512-jZtezmjcgZTkMisIi68TdY8w/PqPTxK2pbfTU9/4Gqus1K3AVZqkwH0z7Vshe3CD6mq9rJq8SpqmuefDMIqkfQ==",
       "dev": true,
       "requires": {
         "cac": "^6.7.14",
-        "debug": "^4.3.4",
-        "pathe": "^1.1.1",
-        "picocolors": "^1.0.0",
+        "debug": "^4.3.5",
+        "pathe": "^1.1.2",
+        "picocolors": "^1.0.1",
         "vite": "^5.0.0"
       },
       "dependencies": {
         "debug": {
-          "version": "4.3.4",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "version": "4.3.5",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
+          "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
           "dev": true,
           "requires": {
             "ms": "2.1.2"
@@ -6696,37 +6604,35 @@
       }
     },
     "vitest": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
-      "integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==",
-      "dev": true,
-      "requires": {
-        "@vitest/expect": "1.6.0",
-        "@vitest/runner": "1.6.0",
-        "@vitest/snapshot": "1.6.0",
-        "@vitest/spy": "1.6.0",
-        "@vitest/utils": "1.6.0",
-        "acorn-walk": "^8.3.2",
-        "chai": "^4.3.10",
-        "debug": "^4.3.4",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.0.tgz",
+      "integrity": "sha512-NvccE2tZhIoPSq3o3AoTBmItwhHNjzIxvOgfdzILIscyzSGOtw2+A1d/JJbS86HDVbc6TS5HnckQuCgTfp0HDQ==",
+      "dev": true,
+      "requires": {
+        "@ampproject/remapping": "^2.3.0",
+        "@vitest/expect": "2.0.0",
+        "@vitest/runner": "2.0.0",
+        "@vitest/snapshot": "2.0.0",
+        "@vitest/spy": "2.0.0",
+        "@vitest/utils": "2.0.0",
+        "chai": "^5.1.1",
+        "debug": "^4.3.5",
         "execa": "^8.0.1",
-        "local-pkg": "^0.5.0",
-        "magic-string": "^0.30.5",
-        "pathe": "^1.1.1",
-        "picocolors": "^1.0.0",
-        "std-env": "^3.5.0",
-        "strip-literal": "^2.0.0",
-        "tinybench": "^2.5.1",
-        "tinypool": "^0.8.3",
+        "magic-string": "^0.30.10",
+        "pathe": "^1.1.2",
+        "picocolors": "^1.0.1",
+        "std-env": "^3.7.0",
+        "tinybench": "^2.8.0",
+        "tinypool": "^1.0.0",
         "vite": "^5.0.0",
-        "vite-node": "1.6.0",
+        "vite-node": "2.0.0",
         "why-is-node-running": "^2.2.2"
       },
       "dependencies": {
         "debug": {
-          "version": "4.3.4",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "version": "4.3.5",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
+          "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
           "dev": true,
           "requires": {
             "ms": "2.1.2"
@@ -6840,12 +6746,6 @@
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
     },
-    "yocto-queue": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
-      "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
-      "dev": true
-    },
     "zod": {
       "version": "3.21.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
diff --git a/package.json b/package.json
index b87f68b..0b45b6c 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "prettier": "^2.8.7",
     "typescript": "^5.4.5",
     "vite-tsconfig-paths": "^4.0.7",
-    "vitest": "^1.6.0"
+    "vitest": "^2.0.0"
   },
   "scripts": {
     "exercise": "tt-cli run",

From b02d62eb091b4bfe352ff704939d6340a669e3df Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 19 Jul 2024 06:57:15 +0000
Subject: [PATCH 145/165] chore(deps): update dependency
 @total-typescript/exercise-cli to v0.10.1

---
 package-lock.json | 44 +++++++++++++++++++++-----------------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3001581..419a4f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -841,9 +841,9 @@
       }
     },
     "node_modules/@total-typescript/exercise-cli": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.10.0.tgz",
-      "integrity": "sha512-0itd7iIPPTtzvWEEz4a9b0m2tJLyHnfTfiJZESwoiMxy7XhUJ6sskhuBrY+xiWytYHW8HtMk9DVNDs7qZBgDgQ==",
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.10.1.tgz",
+      "integrity": "sha512-1gSFgd0bacbz6kTeXD4j75uG1WQdzy3tQ66wH89MPyGDV//DrTYq5kXGghzjJLCzM5e4hFZ0NRCWCaogiB59wg==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
@@ -861,15 +861,6 @@
         "vitest": "*"
       }
     },
-    "node_modules/@total-typescript/exercise-cli/node_modules/commander": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -1404,6 +1395,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -4536,9 +4536,9 @@
       "dev": true
     },
     "@total-typescript/exercise-cli": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.10.0.tgz",
-      "integrity": "sha512-0itd7iIPPTtzvWEEz4a9b0m2tJLyHnfTfiJZESwoiMxy7XhUJ6sskhuBrY+xiWytYHW8HtMk9DVNDs7qZBgDgQ==",
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.10.1.tgz",
+      "integrity": "sha512-1gSFgd0bacbz6kTeXD4j75uG1WQdzy3tQ66wH89MPyGDV//DrTYq5kXGghzjJLCzM5e4hFZ0NRCWCaogiB59wg==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.3",
@@ -4547,14 +4547,6 @@
         "fast-glob": "^3.2.12",
         "jsonc-parser": "^3.2.0",
         "prompts": "^2.4.2"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "10.0.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
-          "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
-          "dev": true
-        }
       }
     },
     "@types/body-parser": {
@@ -4987,6 +4979,12 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true
+    },
     "content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",

From 2f369b6b53b639148d4704ea54027ce5891a19b5 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 23 Jul 2024 00:27:38 +0000
Subject: [PATCH 146/165] chore(deps): update dependency typescript to v5.5.4

---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3001581..9a033c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3578,9 +3578,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
-      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -6573,9 +6573,9 @@
       }
     },
     "typescript": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
-      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "dev": true
     },
     "ufo": {

From 92d3d8ef5deae6761aa4fa1628efa44992d57c84 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 23 Jul 2024 07:56:55 +0100
Subject: [PATCH 147/165] Fixed renovate

---
 out           | 1 +
 renovate.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 160000 out

diff --git a/out b/out
new file mode 160000
index 0000000..0e24cea
--- /dev/null
+++ b/out
@@ -0,0 +1 @@
+Subproject commit 0e24ceae5f210474095ed4f30375444e59e1b04d
diff --git a/renovate.json b/renovate.json
index 1c0166f..1c54d17 100644
--- a/renovate.json
+++ b/renovate.json
@@ -4,7 +4,7 @@
   "packageRules": [
     {
       "packagePatterns": ["*"],
-      "excludePackagePatterns": [
+      "excludeDepNames": [
         "typescript",
         "vitest",
         "react",

From 2b8c165db3d6427828fe694f01fc01f43687faab Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 23 Jul 2024 07:57:19 +0100
Subject: [PATCH 148/165] Removed out file

---
 out | 1 -
 1 file changed, 1 deletion(-)
 delete mode 160000 out

diff --git a/out b/out
deleted file mode 160000
index 0e24cea..0000000
--- a/out
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 0e24ceae5f210474095ed4f30375444e59e1b04d

From b7deaf294a2fdfaf875715657cf31931650854d6 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 23 Jul 2024 07:58:06 +0100
Subject: [PATCH 149/165] Added concurrency to section repo creation

---
 .github/workflows/section-repos.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/workflows/section-repos.yml b/.github/workflows/section-repos.yml
index 9802d04..81f5e36 100644
--- a/.github/workflows/section-repos.yml
+++ b/.github/workflows/section-repos.yml
@@ -4,6 +4,10 @@ on:
     branches:
       - "main"
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   run:
     runs-on: ubuntu-latest

From 40895212b98534fd9628b4c49c3ab25891bc9d4f Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 23 Jul 2024 09:51:58 +0100
Subject: [PATCH 150/165] Added name to renovate checks

---
 .github/workflows/renovate-checks.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/renovate-checks.yml b/.github/workflows/renovate-checks.yml
index fa3c642..f3219f8 100644
--- a/.github/workflows/renovate-checks.yml
+++ b/.github/workflows/renovate-checks.yml
@@ -6,6 +6,7 @@ on:
 
 jobs:
   build:
+    name: Check Snapshot
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Main

From c788e282993da7c45fbde398fad7f225902d00a9 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 23 Jul 2024 10:16:32 +0100
Subject: [PATCH 151/165] Fixed renovate checks

---
 .github/workflows/renovate-checks.yml | 29 +++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/renovate-checks.yml b/.github/workflows/renovate-checks.yml
index f3219f8..71ce34f 100644
--- a/.github/workflows/renovate-checks.yml
+++ b/.github/workflows/renovate-checks.yml
@@ -2,34 +2,59 @@ name: Renovate Checks
 on:
   push:
     branches:
-      - "renovate/**"
+      - "**"
 
 jobs:
   build:
     name: Check Snapshot
     runs-on: ubuntu-latest
     steps:
+      - name: Determine if branch starts with renovate/
+        id: check_branch
+        run: |
+          if [[ "${GITHUB_REF##*/}" == renovate/* ]]; then
+            echo "should_skip=false" >> $GITHUB_ENV
+          else
+            echo "should_skip=true" >> $GITHUB_ENV
+          fi
+
       - name: Checkout Main
         uses: actions/checkout@v4
+        if: ${{ env.should_skip == 'false' }}
         with:
           ref: main
           path: repo
-
+      
       - name: Install Dependencies in Main
+        if: ${{ env.should_skip == 'false' }}
         run: (cd repo && npm install)
+      
       - name: Create Snapshot In Main
+        if: ${{ env.should_skip == 'false' }}
         run: (cd repo && npx tt-cli take-snapshot ./snap.md)
+      
       - name: Copy Snapshot To Outer Directory
+        if: ${{ env.should_skip == 'false' }}
         run: mv repo/snap.md ./snap.md
+      
       - name: Delete Main Directory
+        if: ${{ env.should_skip == 'false' }}
         run: rm -rf repo
+      
       - name: Checkout Branch
+        if: ${{ env.should_skip == 'false' }}
         uses: actions/checkout@v4
         with:
           path: repo
+      
       - name: Install Dependencies in Branch
+        if: ${{ env.should_skip == 'false' }}
         run: (cd repo && npm install)
+      
       - name: Move Snapshot To Branch
+        if: ${{ env.should_skip == 'false' }}
         run: mv ./snap.md repo/snap.md
+      
       - name: Compare Snapshot In Branch
+        if: ${{ env.should_skip == 'false' }}
         run: (cd repo && npx tt-cli compare-snapshot ./snap.md)

From 83a25933a3cfa6140136465479aac9b89538d2da Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 23 Jul 2024 10:18:07 +0100
Subject: [PATCH 152/165] Removed notes

---
 notes/FUTURE.md | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 notes/FUTURE.md

diff --git a/notes/FUTURE.md b/notes/FUTURE.md
deleted file mode 100644
index fc208d4..0000000
--- a/notes/FUTURE.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## Things to add
-
-Function overloads in custom hooks?
-function overloads in components?
-Omit, Pick, interface extends with props
-Picking props from external libraries
-Running TypeScript on CI

From 207043aa50c352d93d7087b14e387bdd01785c55 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 23 Jul 2024 10:19:49 +0100
Subject: [PATCH 153/165] Changed renovate setup

---
 renovate.json | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/renovate.json b/renovate.json
index 1c54d17..5ed14e1 100644
--- a/renovate.json
+++ b/renovate.json
@@ -1,17 +1,16 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base"],
   "packageRules": [
     {
-      "packagePatterns": ["*"],
-      "excludeDepNames": [
+      "matchDepNames": [
         "typescript",
         "vitest",
         "react",
         "@types/react",
         "@total-typescript/exercise-cli"
       ],
-      "enabled": false
+      "enabled": true,
+      "automerge": true
     }
   ]
 }

From db7b6518779436ef4633153cd2e4acc64f38819e Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 23 Jul 2024 10:24:09 +0100
Subject: [PATCH 154/165] Fixed renovate again

---
 renovate.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/renovate.json b/renovate.json
index 5ed14e1..8f3144e 100644
--- a/renovate.json
+++ b/renovate.json
@@ -1,6 +1,11 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base"],
   "packageRules": [
+    {
+      "packagePatterns": ["*"],
+      "enabled": false
+    },
     {
       "matchDepNames": [
         "typescript",

From 6c1f2367f8b7170510dd5e96a126855e3d790735 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 23 Jul 2024 09:42:51 +0000
Subject: [PATCH 155/165] chore(deps): update dependency vitest to v2.0.4

---
 package-lock.json | 311 ++++++++++++++++++----------------------------
 1 file changed, 124 insertions(+), 187 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0a45e58..6f34f29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -594,18 +594,6 @@
         "@floating-ui/core": "^1.2.6"
       }
     },
-    "node_modules/@jest/schemas": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-      "dev": true,
-      "dependencies": {
-        "@sinclair/typebox": "^0.27.8"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -845,12 +833,6 @@
         "win32"
       ]
     },
-    "node_modules/@sinclair/typebox": {
-      "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
-      "dev": true
-    },
     "node_modules/@tanstack/query-core": {
       "version": "4.29.11",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.11.tgz",
@@ -1035,26 +1017,39 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.0.tgz",
-      "integrity": "sha512-5BSfZ0+dAVmC6uPF7s+TcKx0i7oyYHb1WQQL5gg6G2c+Qkaa5BNrdRM74sxDfUIZUgYCr6bfCqmJp+X5bfcNxQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.4.tgz",
+      "integrity": "sha512-39jr5EguIoanChvBqe34I8m1hJFI4+jxvdOpD7gslZrVQBKhh8H9eD7J/LJX4zakrw23W+dITQTDqdt43xVcJw==",
       "dev": true,
       "dependencies": {
-        "@vitest/spy": "2.0.0",
-        "@vitest/utils": "2.0.0",
-        "chai": "^5.1.1"
+        "@vitest/spy": "2.0.4",
+        "@vitest/utils": "2.0.4",
+        "chai": "^5.1.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.4.tgz",
+      "integrity": "sha512-RYZl31STbNGqf4l2eQM1nvKPXE0NhC6Eq0suTTePc4mtMQ1Fn8qZmjV4emZdEdG2NOWGKSCrHZjmTqDCDoeFBw==",
+      "dev": true,
+      "dependencies": {
+        "tinyrainbow": "^1.2.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.0.tgz",
-      "integrity": "sha512-OovFmlkfRmdhevbWImBUtn9IEM+CKac8O+m9p6W9jTATGVBnDJQ6/jb1gpHyWxsu0ALi5f+TLi+Uyst7AAimMw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.4.tgz",
+      "integrity": "sha512-Gk+9Su/2H2zNfNdeJR124gZckd5st4YoSuhF1Rebi37qTXKnqYyFCd9KP4vl2cQHbtuVKjfEKrNJxHHCW8thbQ==",
       "dev": true,
       "dependencies": {
-        "@vitest/utils": "2.0.0",
+        "@vitest/utils": "2.0.4",
         "pathe": "^1.1.2"
       },
       "funding": {
@@ -1062,23 +1057,23 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.0.tgz",
-      "integrity": "sha512-B520cSAQwtWgocPpARadnNLslHCxFs5tf7SG2TT96qz+SZgsXqcB1xI3w3/S9kUzdqykEKrMLvW+sIIpMcuUdw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.4.tgz",
+      "integrity": "sha512-or6Mzoz/pD7xTvuJMFYEtso1vJo1S5u6zBTinfl+7smGUhqybn6VjzCDMhmTyVOFWwkCMuNjmNNxnyXPgKDoPw==",
       "dev": true,
       "dependencies": {
+        "@vitest/pretty-format": "2.0.4",
         "magic-string": "^0.30.10",
-        "pathe": "^1.1.2",
-        "pretty-format": "^29.7.0"
+        "pathe": "^1.1.2"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.0.tgz",
-      "integrity": "sha512-0g7ho4wBK09wq8iNZFtUcQZcUcbPmbLWFotL0GXel0fvk5yPi4nTEKpIvZ+wA5eRyqPUCIfIUl10AWzLr67cmA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.4.tgz",
+      "integrity": "sha512-uTXU56TNoYrTohb+6CseP8IqNwlNdtPwEO0AWl+5j7NelS6x0xZZtP0bDWaLvOfUbaYwhhWp1guzXUxkC7mW7Q==",
       "dev": true,
       "dependencies": {
         "tinyspy": "^3.0.0"
@@ -1088,15 +1083,15 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.0.tgz",
-      "integrity": "sha512-t0jbx8VugWEP6A29NbyfQKVU68Vo6oUw0iX3a8BwO3nrZuivfHcFO4Y5UsqXlplX+83P9UaqEvC2YQhspC0JSA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.4.tgz",
+      "integrity": "sha512-Zc75QuuoJhOBnlo99ZVUkJIuq4Oj0zAkrQ2VzCqNCx6wAwViHEh5Fnp4fiJTE9rA+sAoXRf00Z9xGgfEzV6fzQ==",
       "dev": true,
       "dependencies": {
-        "diff-sequences": "^29.6.3",
+        "@vitest/pretty-format": "2.0.4",
         "estree-walker": "^3.0.3",
         "loupe": "^3.1.1",
-        "pretty-format": "^29.7.0"
+        "tinyrainbow": "^1.2.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
@@ -1186,18 +1181,6 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
-    "node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -1614,15 +1597,6 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/diff-sequences": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
-      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
-      "dev": true,
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -2862,20 +2836,6 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
-    "node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -3031,12 +2991,6 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
-    "node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true
-    },
     "node_modules/react-select": {
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz",
@@ -3434,6 +3388,15 @@
         "node": "^18.0.0 || >=20.0.0"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
+      "integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tinyspy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
@@ -3675,15 +3638,15 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.0.tgz",
-      "integrity": "sha512-jZtezmjcgZTkMisIi68TdY8w/PqPTxK2pbfTU9/4Gqus1K3AVZqkwH0z7Vshe3CD6mq9rJq8SpqmuefDMIqkfQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.4.tgz",
+      "integrity": "sha512-ZpJVkxcakYtig5iakNeL7N3trufe3M6vGuzYAr4GsbCTwobDeyPJpE4cjDhhPluv8OvQCFzu2LWp6GkoKRITXA==",
       "dev": true,
       "dependencies": {
         "cac": "^6.7.14",
         "debug": "^4.3.5",
         "pathe": "^1.1.2",
-        "picocolors": "^1.0.1",
+        "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0"
       },
       "bin": {
@@ -3762,29 +3725,30 @@
       "dev": true
     },
     "node_modules/vitest": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.0.tgz",
-      "integrity": "sha512-NvccE2tZhIoPSq3o3AoTBmItwhHNjzIxvOgfdzILIscyzSGOtw2+A1d/JJbS86HDVbc6TS5HnckQuCgTfp0HDQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.4.tgz",
+      "integrity": "sha512-luNLDpfsnxw5QSW4bISPe6tkxVvv5wn2BBs/PuDRkhXZ319doZyLOBr1sjfB5yCEpTiU7xCAdViM8TNVGPwoog==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
-        "@vitest/expect": "2.0.0",
-        "@vitest/runner": "2.0.0",
-        "@vitest/snapshot": "2.0.0",
-        "@vitest/spy": "2.0.0",
-        "@vitest/utils": "2.0.0",
+        "@vitest/expect": "2.0.4",
+        "@vitest/pretty-format": "^2.0.4",
+        "@vitest/runner": "2.0.4",
+        "@vitest/snapshot": "2.0.4",
+        "@vitest/spy": "2.0.4",
+        "@vitest/utils": "2.0.4",
         "chai": "^5.1.1",
         "debug": "^4.3.5",
         "execa": "^8.0.1",
         "magic-string": "^0.30.10",
         "pathe": "^1.1.2",
-        "picocolors": "^1.0.1",
         "std-env": "^3.7.0",
         "tinybench": "^2.8.0",
         "tinypool": "^1.0.0",
+        "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0",
-        "vite-node": "2.0.0",
-        "why-is-node-running": "^2.2.2"
+        "vite-node": "2.0.4",
+        "why-is-node-running": "^2.3.0"
       },
       "bin": {
         "vitest": "vitest.mjs"
@@ -3798,8 +3762,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "2.0.0",
-        "@vitest/ui": "2.0.0",
+        "@vitest/browser": "2.0.4",
+        "@vitest/ui": "2.0.4",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -3930,9 +3894,9 @@
       }
     },
     "node_modules/why-is-node-running": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
-      "integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
       "dev": true,
       "dependencies": {
         "siginfo": "^2.0.0",
@@ -4339,15 +4303,6 @@
         "@floating-ui/core": "^1.2.6"
       }
     },
-    "@jest/schemas": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-      "dev": true,
-      "requires": {
-        "@sinclair/typebox": "^0.27.8"
-      }
-    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -4497,12 +4452,6 @@
       "dev": true,
       "optional": true
     },
-    "@sinclair/typebox": {
-      "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
-      "dev": true
-    },
     "@tanstack/query-core": {
       "version": "4.29.11",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.11.tgz",
@@ -4656,56 +4605,66 @@
       }
     },
     "@vitest/expect": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.0.tgz",
-      "integrity": "sha512-5BSfZ0+dAVmC6uPF7s+TcKx0i7oyYHb1WQQL5gg6G2c+Qkaa5BNrdRM74sxDfUIZUgYCr6bfCqmJp+X5bfcNxQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.4.tgz",
+      "integrity": "sha512-39jr5EguIoanChvBqe34I8m1hJFI4+jxvdOpD7gslZrVQBKhh8H9eD7J/LJX4zakrw23W+dITQTDqdt43xVcJw==",
       "dev": true,
       "requires": {
-        "@vitest/spy": "2.0.0",
-        "@vitest/utils": "2.0.0",
-        "chai": "^5.1.1"
+        "@vitest/spy": "2.0.4",
+        "@vitest/utils": "2.0.4",
+        "chai": "^5.1.1",
+        "tinyrainbow": "^1.2.0"
+      }
+    },
+    "@vitest/pretty-format": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.4.tgz",
+      "integrity": "sha512-RYZl31STbNGqf4l2eQM1nvKPXE0NhC6Eq0suTTePc4mtMQ1Fn8qZmjV4emZdEdG2NOWGKSCrHZjmTqDCDoeFBw==",
+      "dev": true,
+      "requires": {
+        "tinyrainbow": "^1.2.0"
       }
     },
     "@vitest/runner": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.0.tgz",
-      "integrity": "sha512-OovFmlkfRmdhevbWImBUtn9IEM+CKac8O+m9p6W9jTATGVBnDJQ6/jb1gpHyWxsu0ALi5f+TLi+Uyst7AAimMw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.4.tgz",
+      "integrity": "sha512-Gk+9Su/2H2zNfNdeJR124gZckd5st4YoSuhF1Rebi37qTXKnqYyFCd9KP4vl2cQHbtuVKjfEKrNJxHHCW8thbQ==",
       "dev": true,
       "requires": {
-        "@vitest/utils": "2.0.0",
+        "@vitest/utils": "2.0.4",
         "pathe": "^1.1.2"
       }
     },
     "@vitest/snapshot": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.0.tgz",
-      "integrity": "sha512-B520cSAQwtWgocPpARadnNLslHCxFs5tf7SG2TT96qz+SZgsXqcB1xI3w3/S9kUzdqykEKrMLvW+sIIpMcuUdw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.4.tgz",
+      "integrity": "sha512-or6Mzoz/pD7xTvuJMFYEtso1vJo1S5u6zBTinfl+7smGUhqybn6VjzCDMhmTyVOFWwkCMuNjmNNxnyXPgKDoPw==",
       "dev": true,
       "requires": {
+        "@vitest/pretty-format": "2.0.4",
         "magic-string": "^0.30.10",
-        "pathe": "^1.1.2",
-        "pretty-format": "^29.7.0"
+        "pathe": "^1.1.2"
       }
     },
     "@vitest/spy": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.0.tgz",
-      "integrity": "sha512-0g7ho4wBK09wq8iNZFtUcQZcUcbPmbLWFotL0GXel0fvk5yPi4nTEKpIvZ+wA5eRyqPUCIfIUl10AWzLr67cmA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.4.tgz",
+      "integrity": "sha512-uTXU56TNoYrTohb+6CseP8IqNwlNdtPwEO0AWl+5j7NelS6x0xZZtP0bDWaLvOfUbaYwhhWp1guzXUxkC7mW7Q==",
       "dev": true,
       "requires": {
         "tinyspy": "^3.0.0"
       }
     },
     "@vitest/utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.0.tgz",
-      "integrity": "sha512-t0jbx8VugWEP6A29NbyfQKVU68Vo6oUw0iX3a8BwO3nrZuivfHcFO4Y5UsqXlplX+83P9UaqEvC2YQhspC0JSA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.4.tgz",
+      "integrity": "sha512-Zc75QuuoJhOBnlo99ZVUkJIuq4Oj0zAkrQ2VzCqNCx6wAwViHEh5Fnp4fiJTE9rA+sAoXRf00Z9xGgfEzV6fzQ==",
       "dev": true,
       "requires": {
-        "diff-sequences": "^29.6.3",
+        "@vitest/pretty-format": "2.0.4",
         "estree-walker": "^3.0.3",
         "loupe": "^3.1.1",
-        "pretty-format": "^29.7.0"
+        "tinyrainbow": "^1.2.0"
       }
     },
     "abab": {
@@ -4771,12 +4730,6 @@
         }
       }
     },
-    "ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true
-    },
     "anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -5094,12 +5047,6 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
       "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
     },
-    "diff-sequences": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
-      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
-      "dev": true
-    },
     "dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -6000,17 +5947,6 @@
       "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true
     },
-    "pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "requires": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      }
-    },
     "prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -6118,12 +6054,6 @@
       "integrity": "sha512-/tHId6p2ViAka1wECMw8FEPn/oz/w226zehHrJyQ1oIzCBNMIJCaj6ZkQcv+MjDxYh9MWR7RQic7Qqwe4a5nkw==",
       "requires": {}
     },
-    "react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true
-    },
     "react-select": {
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz",
@@ -6413,6 +6343,12 @@
       "integrity": "sha512-KIKExllK7jp3uvrNtvRBYBWBOAXSX8ZvoaD8T+7KB/QHIuoJW3Pmr60zucywjAlMb5TeXUkcs/MWeWLu0qvuAQ==",
       "dev": true
     },
+    "tinyrainbow": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
+      "integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==",
+      "dev": true
+    },
     "tinyspy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
@@ -6546,15 +6482,15 @@
       }
     },
     "vite-node": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.0.tgz",
-      "integrity": "sha512-jZtezmjcgZTkMisIi68TdY8w/PqPTxK2pbfTU9/4Gqus1K3AVZqkwH0z7Vshe3CD6mq9rJq8SpqmuefDMIqkfQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.4.tgz",
+      "integrity": "sha512-ZpJVkxcakYtig5iakNeL7N3trufe3M6vGuzYAr4GsbCTwobDeyPJpE4cjDhhPluv8OvQCFzu2LWp6GkoKRITXA==",
       "dev": true,
       "requires": {
         "cac": "^6.7.14",
         "debug": "^4.3.5",
         "pathe": "^1.1.2",
-        "picocolors": "^1.0.1",
+        "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0"
       },
       "dependencies": {
@@ -6604,29 +6540,30 @@
       }
     },
     "vitest": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.0.tgz",
-      "integrity": "sha512-NvccE2tZhIoPSq3o3AoTBmItwhHNjzIxvOgfdzILIscyzSGOtw2+A1d/JJbS86HDVbc6TS5HnckQuCgTfp0HDQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.4.tgz",
+      "integrity": "sha512-luNLDpfsnxw5QSW4bISPe6tkxVvv5wn2BBs/PuDRkhXZ319doZyLOBr1sjfB5yCEpTiU7xCAdViM8TNVGPwoog==",
       "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.3.0",
-        "@vitest/expect": "2.0.0",
-        "@vitest/runner": "2.0.0",
-        "@vitest/snapshot": "2.0.0",
-        "@vitest/spy": "2.0.0",
-        "@vitest/utils": "2.0.0",
+        "@vitest/expect": "2.0.4",
+        "@vitest/pretty-format": "^2.0.4",
+        "@vitest/runner": "2.0.4",
+        "@vitest/snapshot": "2.0.4",
+        "@vitest/spy": "2.0.4",
+        "@vitest/utils": "2.0.4",
         "chai": "^5.1.1",
         "debug": "^4.3.5",
         "execa": "^8.0.1",
         "magic-string": "^0.30.10",
         "pathe": "^1.1.2",
-        "picocolors": "^1.0.1",
         "std-env": "^3.7.0",
         "tinybench": "^2.8.0",
         "tinypool": "^1.0.0",
+        "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0",
-        "vite-node": "2.0.0",
-        "why-is-node-running": "^2.2.2"
+        "vite-node": "2.0.4",
+        "why-is-node-running": "^2.3.0"
       },
       "dependencies": {
         "debug": {
@@ -6707,9 +6644,9 @@
       }
     },
     "why-is-node-running": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
-      "integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
       "dev": true,
       "requires": {
         "siginfo": "^2.0.0",

From b89a4420c2e6ac6f1e3d48710a45a596b42e9c34 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 30 Jul 2024 11:38:28 +0100
Subject: [PATCH 156/165] Fixed package.json

---
 package.json | 124 +++++++++++++++++++++++++--------------------------
 1 file changed, 61 insertions(+), 63 deletions(-)

diff --git a/package.json b/package.json
index 8595b7e..29e95cb 100644
--- a/package.json
+++ b/package.json
@@ -21,42 +21,10 @@
     "ci": "(cd scripts/tests && npx vitest run)",
     "update-snapshots": "(cd scripts/tests && npx vitest run -u)",
     "prepare": "tt-cli prepare-stackblitz",
-    "e-09": "tt-cli run 09",
-    "s-09": "tt-cli run 09 --solution",
-    "e-10": "tt-cli run 10",
-    "s-10": "tt-cli run 10 --solution",
-    "e-18": "tt-cli run 18",
-    "s-18": "tt-cli run 18 --solution",
-    "e-19": "tt-cli run 19",
-    "s-19": "tt-cli run 19 --solution",
-    "e-20": "tt-cli run 20",
-    "s-20": "tt-cli run 20 --solution",
-    "e-21": "tt-cli run 21",
-    "s-21": "tt-cli run 21 --solution",
-    "e-22": "tt-cli run 22",
-    "s-22": "tt-cli run 22 --solution",
-    "e-26": "tt-cli run 26",
-    "s-26": "tt-cli run 26 --solution",
-    "e-28": "tt-cli run 28",
-    "s-28": "tt-cli run 28 --solution",
-    "e-12": "tt-cli run 12",
-    "s-12": "tt-cli run 12 --solution",
-    "e-14": "tt-cli run 14",
-    "s-14": "tt-cli run 14 --solution",
-    "e-32": "tt-cli run 32",
-    "s-32": "tt-cli run 32 --solution",
-    "e-33": "tt-cli run 33",
-    "s-33": "tt-cli run 33 --solution",
-    "e-34": "tt-cli run 34",
-    "s-34": "tt-cli run 34 --solution",
-    "e-35": "tt-cli run 35",
-    "s-35": "tt-cli run 35 --solution",
-    "e-39": "tt-cli run 39",
-    "s-39": "tt-cli run 39 --solution",
-    "e-36": "tt-cli run 36",
-    "s-36": "tt-cli run 36 --solution",
-    "e-40": "tt-cli run 40",
-    "s-40": "tt-cli run 40 --solution",
+    "e-01": "tt-cli run 01",
+    "s-01": "tt-cli run 01 --solution",
+    "e-02": "tt-cli run 02",
+    "s-02": "tt-cli run 02 --solution",
     "e-03": "tt-cli run 03",
     "s-03": "tt-cli run 03 --solution",
     "e-04": "tt-cli run 04",
@@ -69,38 +37,80 @@
     "s-07": "tt-cli run 07 --solution",
     "e-08": "tt-cli run 08",
     "s-08": "tt-cli run 08 --solution",
+    "e-09": "tt-cli run 09",
+    "s-09": "tt-cli run 09 --solution",
+    "e-10": "tt-cli run 10",
+    "s-10": "tt-cli run 10 --solution",
     "e-11": "tt-cli run 11",
     "s-11": "tt-cli run 11 --solution",
+    "e-12": "tt-cli run 12",
+    "s-12": "tt-cli run 12 --solution",
     "e-13": "tt-cli run 13",
     "s-13": "tt-cli run 13 --solution",
+    "e-14": "tt-cli run 14",
+    "s-14": "tt-cli run 14 --solution",
     "e-15": "tt-cli run 15",
     "s-15": "tt-cli run 15 --solution",
     "e-16": "tt-cli run 16",
     "s-16": "tt-cli run 16 --solution",
     "e-17": "tt-cli run 17",
     "s-17": "tt-cli run 17 --solution",
+    "e-18": "tt-cli run 18",
+    "s-18": "tt-cli run 18 --solution",
+    "e-19": "tt-cli run 19",
+    "s-19": "tt-cli run 19 --solution",
+    "e-20": "tt-cli run 20",
+    "s-20": "tt-cli run 20 --solution",
+    "e-21": "tt-cli run 21",
+    "s-21": "tt-cli run 21 --solution",
+    "e-22": "tt-cli run 22",
+    "s-22": "tt-cli run 22 --solution",
     "e-23": "tt-cli run 23",
     "s-23": "tt-cli run 23 --solution",
     "e-24": "tt-cli run 24",
     "s-24": "tt-cli run 24 --solution",
     "e-25": "tt-cli run 25",
     "s-25": "tt-cli run 25 --solution",
+    "e-26": "tt-cli run 26",
+    "s-26": "tt-cli run 26 --solution",
     "e-27": "tt-cli run 27",
     "s-27": "tt-cli run 27 --solution",
+    "e-28": "tt-cli run 28",
+    "s-28": "tt-cli run 28 --solution",
     "e-29": "tt-cli run 29",
     "s-29": "tt-cli run 29 --solution",
     "e-30": "tt-cli run 30",
     "s-30": "tt-cli run 30 --solution",
     "e-31": "tt-cli run 31",
     "s-31": "tt-cli run 31 --solution",
+    "e-32": "tt-cli run 32",
+    "s-32": "tt-cli run 32 --solution",
+    "e-33": "tt-cli run 33",
+    "s-33": "tt-cli run 33 --solution",
+    "e-34": "tt-cli run 34",
+    "s-34": "tt-cli run 34 --solution",
+    "e-35": "tt-cli run 35",
+    "s-35": "tt-cli run 35 --solution",
+    "e-36": "tt-cli run 36",
+    "s-36": "tt-cli run 36 --solution",
     "e-37": "tt-cli run 37",
     "s-37": "tt-cli run 37 --solution",
     "e-38": "tt-cli run 38",
     "s-38": "tt-cli run 38 --solution",
+    "e-39": "tt-cli run 39",
+    "s-39": "tt-cli run 39 --solution",
+    "e-40": "tt-cli run 40",
+    "s-40": "tt-cli run 40 --solution",
     "e-41": "tt-cli run 41",
     "s-41": "tt-cli run 41 --solution",
+    "e-42": "tt-cli run 42",
+    "s-42": "tt-cli run 42 --solution",
+    "e-43": "tt-cli run 43",
+    "s-43": "tt-cli run 43 --solution",
     "e-44": "tt-cli run 44",
     "s-44": "tt-cli run 44 --solution",
+    "e-45": "tt-cli run 45",
+    "s-45": "tt-cli run 45 --solution",
     "e-46": "tt-cli run 46",
     "s-46": "tt-cli run 46 --solution",
     "e-47": "tt-cli run 47",
@@ -113,6 +123,10 @@
     "s-50": "tt-cli run 50 --solution",
     "e-51": "tt-cli run 51",
     "s-51": "tt-cli run 51 --solution",
+    "e-52": "tt-cli run 52",
+    "s-52": "tt-cli run 52 --solution",
+    "e-53": "tt-cli run 53",
+    "s-53": "tt-cli run 53 --solution",
     "e-54": "tt-cli run 54",
     "s-54": "tt-cli run 54 --solution",
     "e-55": "tt-cli run 55",
@@ -133,50 +147,34 @@
     "s-62": "tt-cli run 62 --solution",
     "e-63": "tt-cli run 63",
     "s-63": "tt-cli run 63 --solution",
-    "e-42": "tt-cli run 42",
-    "s-42": "tt-cli run 42 --solution",
-    "e-45": "tt-cli run 45",
-    "s-45": "tt-cli run 45 --solution",
-    "e-52": "tt-cli run 52",
-    "s-52": "tt-cli run 52 --solution",
     "e-64": "tt-cli run 64",
     "s-64": "tt-cli run 64 --solution",
+    "e-64.5": "tt-cli run 64.5",
+    "s-64.5": "tt-cli run 64.5 --solution",
     "e-65": "tt-cli run 65",
     "s-65": "tt-cli run 65 --solution",
     "e-66": "tt-cli run 66",
     "s-66": "tt-cli run 66 --solution",
-    "e-43": "tt-cli run 43",
-    "s-43": "tt-cli run 43 --solution",
     "e-67": "tt-cli run 67",
     "s-67": "tt-cli run 67 --solution",
-    "e-68": "tt-cli run 68",
-    "s-68": "tt-cli run 68 --solution",
+    "e-67.5": "tt-cli run 67.5",
+    "s-67.5": "tt-cli run 67.5 --solution",
+    "e-69": "tt-cli run 69",
+    "s-69": "tt-cli run 69 --solution",
     "e-70": "tt-cli run 70",
     "s-70": "tt-cli run 70 --solution",
     "e-71": "tt-cli run 71",
     "s-71": "tt-cli run 71 --solution",
+    "e-72": "tt-cli run 72",
+    "s-72": "tt-cli run 72 --solution",
     "e-73": "tt-cli run 73",
     "s-73": "tt-cli run 73 --solution",
-    "e-69": "tt-cli run 69",
-    "s-69": "tt-cli run 69 --solution",
     "e-74": "tt-cli run 74",
     "s-74": "tt-cli run 74 --solution",
-    "e-76": "tt-cli run 76",
-    "s-76": "tt-cli run 76 --solution",
-    "e-01": "tt-cli run 01",
-    "s-01": "tt-cli run 01 --solution",
-    "e-02": "tt-cli run 02",
-    "s-02": "tt-cli run 02 --solution",
-    "e-53": "tt-cli run 53",
-    "s-53": "tt-cli run 53 --solution",
-    "e-64.5": "tt-cli run 64.5",
-    "s-64.5": "tt-cli run 64.5 --solution",
-    "e-67.5": "tt-cli run 67.5",
-    "s-67.5": "tt-cli run 67.5 --solution",
-    "e-72": "tt-cli run 72",
-    "s-72": "tt-cli run 72 --solution",
     "e-75": "tt-cli run 75",
     "s-75": "tt-cli run 75 --solution",
+    "e-76": "tt-cli run 76",
+    "s-76": "tt-cli run 76 --solution",
     "e-77": "tt-cli run 77",
     "s-77": "tt-cli run 77 --solution"
   },
@@ -192,4 +190,4 @@
     "react-select": "^5.7.3",
     "zod": "^3.21.4"
   }
-}
+}
\ No newline at end of file

From 7d531e3030be51defebedaedca84e7eb296329f2 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 30 Jul 2024 11:39:54 +0100
Subject: [PATCH 157/165] Fixed renovate

---
 renovate.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/renovate.json b/renovate.json
index 8f3144e..1c0166f 100644
--- a/renovate.json
+++ b/renovate.json
@@ -4,18 +4,14 @@
   "packageRules": [
     {
       "packagePatterns": ["*"],
-      "enabled": false
-    },
-    {
-      "matchDepNames": [
+      "excludePackagePatterns": [
         "typescript",
         "vitest",
         "react",
         "@types/react",
         "@total-typescript/exercise-cli"
       ],
-      "enabled": true,
-      "automerge": true
+      "enabled": false
     }
   ]
 }

From 3981de6c1983a57b6697a3705380ff5f7ff922d2 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 30 Jul 2024 11:40:25 +0100
Subject: [PATCH 158/165] Removed email

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 29e95cb..9ae6a9d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-typescript-tutorial",
   "version": "1.0.0",
   "main": "index.js",
-  "author": "Matt Pocock <mattpocockvoice@gmail.com>",
+  "author": "Matt Pocock <team@totaltypescript.com>",
   "license": "GPL",
   "devDependencies": {
     "@total-typescript/exercise-cli": "^0.10.0",
@@ -190,4 +190,4 @@
     "react-select": "^5.7.3",
     "zod": "^3.21.4"
   }
-}
\ No newline at end of file
+}

From 7f4cb1862987f2686338c6e7079cb847f608ca77 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Tue, 30 Jul 2024 11:42:55 +0100
Subject: [PATCH 159/165] Fixed renovate checks

---
 .github/workflows/renovate-checks.yml | 30 ++-------------------------
 1 file changed, 2 insertions(+), 28 deletions(-)

diff --git a/.github/workflows/renovate-checks.yml b/.github/workflows/renovate-checks.yml
index 71ce34f..fa3c642 100644
--- a/.github/workflows/renovate-checks.yml
+++ b/.github/workflows/renovate-checks.yml
@@ -2,59 +2,33 @@ name: Renovate Checks
 on:
   push:
     branches:
-      - "**"
+      - "renovate/**"
 
 jobs:
   build:
-    name: Check Snapshot
     runs-on: ubuntu-latest
     steps:
-      - name: Determine if branch starts with renovate/
-        id: check_branch
-        run: |
-          if [[ "${GITHUB_REF##*/}" == renovate/* ]]; then
-            echo "should_skip=false" >> $GITHUB_ENV
-          else
-            echo "should_skip=true" >> $GITHUB_ENV
-          fi
-
       - name: Checkout Main
         uses: actions/checkout@v4
-        if: ${{ env.should_skip == 'false' }}
         with:
           ref: main
           path: repo
-      
+
       - name: Install Dependencies in Main
-        if: ${{ env.should_skip == 'false' }}
         run: (cd repo && npm install)
-      
       - name: Create Snapshot In Main
-        if: ${{ env.should_skip == 'false' }}
         run: (cd repo && npx tt-cli take-snapshot ./snap.md)
-      
       - name: Copy Snapshot To Outer Directory
-        if: ${{ env.should_skip == 'false' }}
         run: mv repo/snap.md ./snap.md
-      
       - name: Delete Main Directory
-        if: ${{ env.should_skip == 'false' }}
         run: rm -rf repo
-      
       - name: Checkout Branch
-        if: ${{ env.should_skip == 'false' }}
         uses: actions/checkout@v4
         with:
           path: repo
-      
       - name: Install Dependencies in Branch
-        if: ${{ env.should_skip == 'false' }}
         run: (cd repo && npm install)
-      
       - name: Move Snapshot To Branch
-        if: ${{ env.should_skip == 'false' }}
         run: mv ./snap.md repo/snap.md
-      
       - name: Compare Snapshot In Branch
-        if: ${{ env.should_skip == 'false' }}
         run: (cd repo && npx tt-cli compare-snapshot ./snap.md)

From 4b95b2c6b027a970fc7bf1e2cad196e7134ec29e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 9 Sep 2024 18:23:27 +0000
Subject: [PATCH 160/165] chore(deps): update dependency typescript to v5.6.2

---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6f34f29..e3bcb72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3506,9 +3506,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -6421,9 +6421,9 @@
       }
     },
     "typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
       "dev": true
     },
     "universalify": {

From 7a94cf840e44b787b3494b645d50af7717b79f32 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 13 Sep 2024 09:23:10 +0000
Subject: [PATCH 161/165] chore(deps): update dependency
 @total-typescript/exercise-cli to ^0.11.0

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3bcb72..fd2b131 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "zod": "^3.21.4"
       },
       "devDependencies": {
-        "@total-typescript/exercise-cli": "^0.10.0",
+        "@total-typescript/exercise-cli": "^0.11.0",
         "cross-fetch": "^3.1.5",
         "jsdom": "^21.1.1",
         "prettier": "^2.8.7",
@@ -878,9 +878,9 @@
       }
     },
     "node_modules/@total-typescript/exercise-cli": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.10.1.tgz",
-      "integrity": "sha512-1gSFgd0bacbz6kTeXD4j75uG1WQdzy3tQ66wH89MPyGDV//DrTYq5kXGghzjJLCzM5e4hFZ0NRCWCaogiB59wg==",
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.11.0.tgz",
+      "integrity": "sha512-VTRT1UTedPEburo5uQZLDchnbUAciOKsnO89y7DAKJS3/NMAObi6gr1/SNlCcEmCRa/Rya2mLG+iYBYhnmYsYA==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
@@ -4473,9 +4473,9 @@
       "dev": true
     },
     "@total-typescript/exercise-cli": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.10.1.tgz",
-      "integrity": "sha512-1gSFgd0bacbz6kTeXD4j75uG1WQdzy3tQ66wH89MPyGDV//DrTYq5kXGghzjJLCzM5e4hFZ0NRCWCaogiB59wg==",
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@total-typescript/exercise-cli/-/exercise-cli-0.11.0.tgz",
+      "integrity": "sha512-VTRT1UTedPEburo5uQZLDchnbUAciOKsnO89y7DAKJS3/NMAObi6gr1/SNlCcEmCRa/Rya2mLG+iYBYhnmYsYA==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.3",
diff --git a/package.json b/package.json
index 9ae6a9d..e2895e9 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "Matt Pocock <team@totaltypescript.com>",
   "license": "GPL",
   "devDependencies": {
-    "@total-typescript/exercise-cli": "^0.10.0",
+    "@total-typescript/exercise-cli": "^0.11.0",
     "cross-fetch": "^3.1.5",
     "jsdom": "^21.1.1",
     "prettier": "^2.8.7",

From 8583943b547640cf1760c6e25b972566a1d33c23 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Fri, 13 Sep 2024 16:03:25 +0200
Subject: [PATCH 162/165] Upgrades

---
 .gitignore                        |  7 +++-
 .vscode/settings.json             |  8 ++++
 plan.json                         | 70 -------------------------------
 renovate.json                     |  6 ++-
 scripts/setup.ts                  |  3 --
 vite.config.ts => vite.config.mts |  2 -
 6 files changed, 18 insertions(+), 78 deletions(-)
 create mode 100644 .vscode/settings.json
 delete mode 100644 plan.json
 delete mode 100644 scripts/setup.ts
 rename vite.config.ts => vite.config.mts (76%)

diff --git a/.gitignore b/.gitignore
index 59ecb4b..bd2eb9d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,6 @@
 node_modules
-.vscode
-tsconfig.temp.json
\ No newline at end of file
+tsconfig.temp.json
+dist
+*.tsbuildinfo
+*.prompt.*
+.vscode/*.code-snippets
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..b6621bd
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "github.copilot.enable": {
+    "*": false,
+  },
+  "explorer.sortOrder": "mixed",
+}
\ No newline at end of file
diff --git a/plan.json b/plan.json
deleted file mode 100644
index 6aa33f7..0000000
--- a/plan.json
+++ /dev/null
@@ -1,70 +0,0 @@
-[
-  {
-    "text": "Typing components",
-    "deps": []
-  },
-  {
-    "text": "Typing children",
-    "deps": ["Typing components"]
-  },
-  {
-    "text": "Typing components which inherit from native components",
-    "deps": ["Typing components"]
-  },
-  {
-    "text": "Typing onChange handlers",
-    "deps": []
-  },
-  {
-    "text": "Typing hooks",
-    "deps": []
-  },
-  {
-    "text": "Tuple return types from custom hooks",
-    "deps": []
-  },
-  {
-    "text": "useReducer",
-    "deps": []
-  },
-  {
-    "text": "Typing createContext",
-    "deps": []
-  },
-  {
-    "text": "useState overloads",
-    "deps": []
-  },
-  {
-    "text": "useRef overloads - For HTML elements - For values",
-    "deps": []
-  },
-  {
-    "text": "forwardRef",
-    "deps": []
-  },
-  {
-    "text": "Discriminated union props",
-    "deps": []
-  },
-  {
-    "text": "Generic components",
-    "deps": ["Typing components"]
-  },
-  {
-    "text": "Generic custom hooks",
-    "deps": ["Typing hooks"]
-  },
-  {
-    "text": "useState with a generic",
-    "deps": ["Generic custom hooks"]
-  },
-  {
-    "text": "Function overloads in custom hooks",
-    "deps": ["Generic custom hooks"]
-  },
-  {
-    "text": "Higher-order components",
-    "deps": []
-  }
-]
diff --git a/renovate.json b/renovate.json
index 1c0166f..29b50a8 100644
--- a/renovate.json
+++ b/renovate.json
@@ -7,9 +7,13 @@
       "excludePackagePatterns": [
         "typescript",
         "vitest",
+        "jsdom",
+        "prettier",
+        "vite-tsconfig-paths",
         "react",
         "@types/react",
-        "@total-typescript/exercise-cli"
+        "@total-typescript/exercise-cli",
+        "zod"
       ],
       "enabled": false
     }
diff --git a/scripts/setup.ts b/scripts/setup.ts
deleted file mode 100644
index 354d20d..0000000
--- a/scripts/setup.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { fetch } from "cross-fetch";
-
-global.fetch = fetch;
diff --git a/vite.config.ts b/vite.config.mts
similarity index 76%
rename from vite.config.ts
rename to vite.config.mts
index 251dac0..c5cfc0c 100644
--- a/vite.config.ts
+++ b/vite.config.mts
@@ -1,11 +1,9 @@
 import { defineConfig } from "vitest/config";
 import tsconfigPaths from "vite-tsconfig-paths";
-import path from "path";
 
 export default defineConfig({
   test: {
     include: ["src/**/*{problem,solution,explainer}*.{ts,tsx}"],
-    setupFiles: [path.resolve(__dirname, "scripts/setup.ts")],
     passWithNoTests: true,
     environment: "jsdom",
   },

From d9eae975fbaa0abf07b0063fd900adfc1b4acf48 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:03:54 +0000
Subject: [PATCH 163/165] fix(deps): update dependency zod to v3.22.3
 [security]

---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fd2b131..0307588 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3963,9 +3963,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.21.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
-      "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
+      "version": "3.22.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.3.tgz",
+      "integrity": "sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug==",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -6684,9 +6684,9 @@
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
     },
     "zod": {
-      "version": "3.21.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
-      "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw=="
+      "version": "3.22.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.3.tgz",
+      "integrity": "sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug=="
     }
   }
 }

From d9443c5444b505b9046910bac98980e607a92af2 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:04:04 +0000
Subject: [PATCH 164/165] chore(deps): update dependency vite-tsconfig-paths to
 v4.3.2

---
 package-lock.json | 60 +++++++++++++++++++++++------------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fd2b131..f2d50e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3462,18 +3462,18 @@
       }
     },
     "node_modules/tsconfck": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-2.1.1.tgz",
-      "integrity": "sha512-ZPCkJBKASZBmBUNqGHmRhdhM8pJYDdOXp4nRgj/O0JwUwsMq50lCDRQP/M5GBNAA0elPrq4gAeu4dkaVCuKWww==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.3.tgz",
+      "integrity": "sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==",
       "dev": true,
       "bin": {
         "tsconfck": "bin/tsconfck.js"
       },
       "engines": {
-        "node": "^14.13.1 || ^16 || >=18"
+        "node": "^18 || >=20"
       },
       "peerDependencies": {
-        "typescript": "^4.3.5 || ^5.0.0"
+        "typescript": "^5.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -3683,14 +3683,14 @@
       "dev": true
     },
     "node_modules/vite-tsconfig-paths": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.0.tgz",
-      "integrity": "sha512-jGpus0eUy5qbbMVGiTxCL1iB9ZGN6Bd37VGLJU39kTDD6ZfULTTb1bcc5IeTWqWJKiWV5YihCaibeASPiGi8kw==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz",
+      "integrity": "sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==",
       "dev": true,
       "dependencies": {
         "debug": "^4.1.1",
         "globrex": "^0.1.2",
-        "tsconfck": "^2.1.0"
+        "tsconfck": "^3.0.3"
       },
       "peerDependencies": {
         "vite": "*"
@@ -3702,12 +3702,12 @@
       }
     },
     "node_modules/vite-tsconfig-paths/node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dev": true,
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -3719,9 +3719,9 @@
       }
     },
     "node_modules/vite-tsconfig-paths/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
     "node_modules/vitest": {
@@ -6396,9 +6396,9 @@
       }
     },
     "tsconfck": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-2.1.1.tgz",
-      "integrity": "sha512-ZPCkJBKASZBmBUNqGHmRhdhM8pJYDdOXp4nRgj/O0JwUwsMq50lCDRQP/M5GBNAA0elPrq4gAeu4dkaVCuKWww==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.3.tgz",
+      "integrity": "sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==",
       "dev": true,
       "requires": {}
     },
@@ -6512,29 +6512,29 @@
       }
     },
     "vite-tsconfig-paths": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.0.tgz",
-      "integrity": "sha512-jGpus0eUy5qbbMVGiTxCL1iB9ZGN6Bd37VGLJU39kTDD6ZfULTTb1bcc5IeTWqWJKiWV5YihCaibeASPiGi8kw==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz",
+      "integrity": "sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
         "globrex": "^0.1.2",
-        "tsconfck": "^2.1.0"
+        "tsconfck": "^3.0.3"
       },
       "dependencies": {
         "debug": {
-          "version": "4.3.4",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "version": "4.3.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+          "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
           "dev": true,
           "requires": {
-            "ms": "2.1.2"
+            "ms": "^2.1.3"
           }
         },
         "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
           "dev": true
         }
       }

From 9e62b9e07ac5e05d096772b62fc02f5cfcafba16 Mon Sep 17 00:00:00 2001
From: Matt Pocock <mattpocockvoice@gmail.com>
Date: Fri, 13 Sep 2024 18:01:47 +0200
Subject: [PATCH 165/165] chore: add files

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e2895e9..44ae77c 100644
--- a/package.json
+++ b/package.json
@@ -189,5 +189,6 @@
     "react-hook-form": "^7.44.3",
     "react-select": "^5.7.3",
     "zod": "^3.21.4"
-  }
+  },
+  "type": "module"
 }