diff --git a/core/src/date-input/date-input.tsx b/core/src/date-input/date-input.tsx
index 18fe7c79..b2033911 100644
--- a/core/src/date-input/date-input.tsx
+++ b/core/src/date-input/date-input.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 
 // TODO: Rewrite date input using the new DayPicker component from react-day-picker
 export const DateInput = (): ReactElement => {
-	return <input type="date"/>
+	return <input type="date" />;
 };
 
 // import { ReactNode, useState } from "react";
diff --git a/new-docs/pages/patterns/color/sample/sample.tsx b/new-docs/pages/patterns/color/sample/sample.tsx
index 35aa67e0..1d322aaa 100644
--- a/new-docs/pages/patterns/color/sample/sample.tsx
+++ b/new-docs/pages/patterns/color/sample/sample.tsx
@@ -1,7 +1,12 @@
 import Color from "color";
 import { useEffect, useRef, useState } from "react";
 import { HiCheckCircle } from "react-icons/hi";
-import { CategoryColor, categoryColors, Icon, Tag } from "../../../../../core/src";
+import {
+	CategoryColor,
+	categoryColors,
+	Icon,
+	Tag,
+} from "../../../../../core/src";
 import s from "./sample.module.css";
 
 export type ColorSampleUsage = "text" | "icon" | "both";
diff --git a/new-docs/pages/patterns/form/form.module.css b/new-docs/pages/patterns/form/form.module.css
index c3beab8b..ac96462b 100644
--- a/new-docs/pages/patterns/form/form.module.css
+++ b/new-docs/pages/patterns/form/form.module.css
@@ -1,5 +1,5 @@
 .form {
 	display: "flex";
 	flex-direction: "column";
-	gap: 16,
+	gap: 16;
 }
diff --git a/new-docs/pages/patterns/form/formik.stories.mdx b/new-docs/pages/patterns/form/formik.stories.mdx
index 6eac3ebf..11a41ddc 100644
--- a/new-docs/pages/patterns/form/formik.stories.mdx
+++ b/new-docs/pages/patterns/form/formik.stories.mdx
@@ -1,4 +1,4 @@
-import { FormikExample } from './formik'
+import { FormikExample } from "./formik";
 
 # Formik
 
@@ -7,23 +7,23 @@ Formik's [Field][1] component:
 
 [1]: https://formik.org/docs/api/field
 
-~~~tsx
+```tsx
 import { Field } from "formik";
 import { Input } from "../../../core/src";
 
 <label htmlFor="email">Email</label>
 <Field id="email" type="email" name="email" as={Input} />
-~~~
+```
 
 To show errors, pass FormError to the "component" prop of Formik's
 [ErrorMessage][2] component:
 
-~~~tsx
+```tsx
 import { ErrorMessage } from "formik";
 import { FormError } from "../../../core/src";
 
-<ErrorMessage name="email" component={FormError} />
-~~~
+<ErrorMessage name="email" component={FormError} />;
+```
 
 [2]: https://formik.org/docs/api/errormessage
 
@@ -31,51 +31,51 @@ Full example:
 
 <FormikExample />
 
-~~~tsx
+```tsx
 (): JSX.Element => {
-  /* import { Input, Button, FormError } from "../../../core/src" */
-
-  const title = (
-    <div>
-      <label htmlFor="fm-title">Title</label>
-      <Field id="fm-title" type="text" name="title" as={Input} />
-      <ErrorMessage name="title" component={FormError} />
-    </div>
-  );
-
-  const message = (
-    <div>
-      <label htmlFor="fm-message">Message</label>
-      <Field id="fm-message" name="message" as={TextArea} />
-      <ErrorMessage name="message" component={FormError} />
-    </div>
-  );
-
-  const validate = (values: FormValues): FormikErrors<FormValues> => {
-    const errors: FormikErrors<FormValues> = {};
-    if (!values.title) errors.title = ERRORS.titleRequired;
-    if (!values.message) errors.message = ERRORS.messageRequired;
-    if (values.message.length < 5) errors.message = ERRORS.messageLength;
-    return errors;
-  };
-
-  return (
-    <Formik<FormValues>
-      initialValues={{ title: "", message: "" }}
-      validate={validate}
-      onSubmit={async (values, { setSubmitting }) => {
-        await postToServer(values);
-        setSubmitting(false);
-      }}
-    >
-      {({ isSubmitting: busy }) => (
-        <Form className={s.form}>
-          {title}
-          {message}
-          <SubmitButton busy={busy} />
-        </Form>
-      )}
-    </Formik>
-  );
+	/* import { Input, Button, FormError } from "../../../core/src" */
+
+	const title = (
+		<div>
+			<label htmlFor="fm-title">Title</label>
+			<Field id="fm-title" type="text" name="title" as={Input} />
+			<ErrorMessage name="title" component={FormError} />
+		</div>
+	);
+
+	const message = (
+		<div>
+			<label htmlFor="fm-message">Message</label>
+			<Field id="fm-message" name="message" as={TextArea} />
+			<ErrorMessage name="message" component={FormError} />
+		</div>
+	);
+
+	const validate = (values: FormValues): FormikErrors<FormValues> => {
+		const errors: FormikErrors<FormValues> = {};
+		if (!values.title) errors.title = ERRORS.titleRequired;
+		if (!values.message) errors.message = ERRORS.messageRequired;
+		if (values.message.length < 5) errors.message = ERRORS.messageLength;
+		return errors;
+	};
+
+	return (
+		<Formik<FormValues>
+			initialValues={{ title: "", message: "" }}
+			validate={validate}
+			onSubmit={async (values, { setSubmitting }) => {
+				await postToServer(values);
+				setSubmitting(false);
+			}}
+		>
+			{({ isSubmitting: busy }) => (
+				<Form className={s.form}>
+					{title}
+					{message}
+					<SubmitButton busy={busy} />
+				</Form>
+			)}
+		</Formik>
+	);
 };
-~~~
+```
diff --git a/new-docs/pages/patterns/form/formik.tsx b/new-docs/pages/patterns/form/formik.tsx
index 62518389..fd3d244d 100644
--- a/new-docs/pages/patterns/form/formik.tsx
+++ b/new-docs/pages/patterns/form/formik.tsx
@@ -1,51 +1,51 @@
 import { ErrorMessage, Field, Form, Formik, FormikErrors } from "formik";
 import { FormError, Input, TextArea } from "../../../../core/src";
 import { ERRORS, FormValues, SubmitButton, postToServer } from "./utils";
-import s from './form.module.css';
+import s from "./form.module.css";
 
 export const FormikExample = (): JSX.Element => {
-  /* import { Input, Button, FormError } from "../../../core/src" */
+	/* import { Input, Button, FormError } from "../../../core/src" */
 
-  const title = (
-    <div>
-      <label htmlFor="fm-title">Title</label>
-      <Field id="fm-title" type="text" name="title" as={Input} />
-      <ErrorMessage name="title" component={FormError} />
-    </div>
-  );
+	const title = (
+		<div>
+			<label htmlFor="fm-title">Title</label>
+			<Field id="fm-title" type="text" name="title" as={Input} />
+			<ErrorMessage name="title" component={FormError} />
+		</div>
+	);
 
-  const message = (
-    <div>
-      <label htmlFor="fm-message">Message</label>
-      <Field id="fm-message" name="message" as={TextArea} />
-      <ErrorMessage name="message" component={FormError} />
-    </div>
-  );
+	const message = (
+		<div>
+			<label htmlFor="fm-message">Message</label>
+			<Field id="fm-message" name="message" as={TextArea} />
+			<ErrorMessage name="message" component={FormError} />
+		</div>
+	);
 
-  const validate = (values: FormValues): FormikErrors<FormValues> => {
-    const errors: FormikErrors<FormValues> = {};
-    if (!values.title) errors.title = ERRORS.titleRequired;
-    if (!values.message) errors.message = ERRORS.messageRequired;
-    if (values.message.length < 5) errors.message = ERRORS.messageLength;
-    return errors;
-  };
+	const validate = (values: FormValues): FormikErrors<FormValues> => {
+		const errors: FormikErrors<FormValues> = {};
+		if (!values.title) errors.title = ERRORS.titleRequired;
+		if (!values.message) errors.message = ERRORS.messageRequired;
+		if (values.message.length < 5) errors.message = ERRORS.messageLength;
+		return errors;
+	};
 
-  return (
-    <Formik<FormValues>
-      initialValues={{ title: "", message: "" }}
-      validate={validate}
-      onSubmit={async (values, { setSubmitting }) => {
-        await postToServer(values);
-        setSubmitting(false);
-      }}
-    >
-      {({ isSubmitting: busy }) => (
-        <Form className={s.form}>
-          {title}
-          {message}
-          <SubmitButton busy={busy} />
-        </Form>
-      )}
-    </Formik>
-  );
+	return (
+		<Formik<FormValues>
+			initialValues={{ title: "", message: "" }}
+			validate={validate}
+			onSubmit={async (values, { setSubmitting }) => {
+				await postToServer(values);
+				setSubmitting(false);
+			}}
+		>
+			{({ isSubmitting: busy }) => (
+				<Form className={s.form}>
+					{title}
+					{message}
+					<SubmitButton busy={busy} />
+				</Form>
+			)}
+		</Formik>
+	);
 };
diff --git a/new-docs/pages/patterns/form/react-hook-form.stories.mdx b/new-docs/pages/patterns/form/react-hook-form.stories.mdx
index 45931b53..21d297a1 100644
--- a/new-docs/pages/patterns/form/react-hook-form.stories.mdx
+++ b/new-docs/pages/patterns/form/react-hook-form.stories.mdx
@@ -1,11 +1,11 @@
-import { ReactHookFormExample } from './react-hook-form'
+import { ReactHookFormExample } from "./react-hook-form";
 
 # React Hook Form
 
 To use Moai's input components with React Hook Form, [render][2] them in the
 "render" prop of RHF's [Controller][1] component:
 
-~~~tsx
+```tsx
 import { Controller } from "react-hook-form";
 import { Input } from "../../../core/src";
 
@@ -18,7 +18,7 @@ import { Input } from "../../../core/src";
 	)}
 	rules={{ required: "Email is required" }}
 />
-~~~
+```
 
 [1]: https://react-hook-form.com/api#Controller
 [2]: https://react-hook-form.com/get-started#IntegratingwithUIlibraries
@@ -26,11 +26,11 @@ import { Input } from "../../../core/src";
 To show errors, pass RHF's [error messages][3] as children of Moai's FormError
 component:
 
-~~~tsx
+```tsx
 import { FormError } from "../../../core/src";
 
-<FormError children={errors.email?.message} />
-~~~
+<FormError children={errors.email?.message} />;
+```
 
 [3]: https://react-hook-form.com/advanced-usage#ErrorMessages
 
@@ -38,60 +38,60 @@ Full example:
 
 <ReactHookFormExample />
 
-~~~tsx
+```tsx
 (): JSX.Element => {
-  /* import { Input, Button, FormError } from "../../../core/src" */
-
-  const { control, formState, handleSubmit } = useForm<FormValues>();
-  const { errors } = formState;
-  const [busy, setBusy] = useState(false);
-
-  const title = (
-    <div>
-      <label htmlFor="rhf-title">Title</label>
-      <Controller
-        name="title"
-        control={control}
-        render={({ field }) => (
-          <Input {...field} id="rhf-title" type="text" />
-        )}
-        rules={{ required: ERRORS.titleRequired }}
-        defaultValue=""
-      />
-      <FormError children={errors.title?.message} />
-    </div>
-  );
-
-  const message = (
-    <div>
-      <label htmlFor="rhf-message">Message</label>
-      <Controller
-        name="message"
-        control={control}
-        render={({ field }) => <TextArea {...field} id="rhf-message" />}
-        rules={{
-          required: { value: true, message: ERRORS.messageRequired },
-          minLength: { value: 5, message: ERRORS.messageLength },
-        }}
-        defaultValue=""
-      />
-      <FormError children={errors.message?.message} />
-    </div>
-  );
-
-  return (
-    <form
-      onSubmit={handleSubmit(async (data) => {
-        setBusy(true);
-        await postToServer(data);
-        setBusy(false);
-      })}
-      className={s.form}
-    >
-      {title}
-      {message}
-      <SubmitButton busy={busy} />
-    </form>
-  );
+	/* import { Input, Button, FormError } from "../../../core/src" */
+
+	const { control, formState, handleSubmit } = useForm<FormValues>();
+	const { errors } = formState;
+	const [busy, setBusy] = useState(false);
+
+	const title = (
+		<div>
+			<label htmlFor="rhf-title">Title</label>
+			<Controller
+				name="title"
+				control={control}
+				render={({ field }) => (
+					<Input {...field} id="rhf-title" type="text" />
+				)}
+				rules={{ required: ERRORS.titleRequired }}
+				defaultValue=""
+			/>
+			<FormError children={errors.title?.message} />
+		</div>
+	);
+
+	const message = (
+		<div>
+			<label htmlFor="rhf-message">Message</label>
+			<Controller
+				name="message"
+				control={control}
+				render={({ field }) => <TextArea {...field} id="rhf-message" />}
+				rules={{
+					required: { value: true, message: ERRORS.messageRequired },
+					minLength: { value: 5, message: ERRORS.messageLength },
+				}}
+				defaultValue=""
+			/>
+			<FormError children={errors.message?.message} />
+		</div>
+	);
+
+	return (
+		<form
+			onSubmit={handleSubmit(async (data) => {
+				setBusy(true);
+				await postToServer(data);
+				setBusy(false);
+			})}
+			className={s.form}
+		>
+			{title}
+			{message}
+			<SubmitButton busy={busy} />
+		</form>
+	);
 };
-~~~
+```
diff --git a/new-docs/pages/patterns/form/react-hook-form.tsx b/new-docs/pages/patterns/form/react-hook-form.tsx
index 16af4c34..ba2e690d 100644
--- a/new-docs/pages/patterns/form/react-hook-form.tsx
+++ b/new-docs/pages/patterns/form/react-hook-form.tsx
@@ -2,60 +2,60 @@ import { useState } from "react";
 import { ERRORS, FormValues, SubmitButton, postToServer } from "./utils";
 import { Controller, useForm } from "react-hook-form";
 import { FormError, Input, TextArea } from "../../../../core/src";
-import s from './form.module.css';
+import s from "./form.module.css";
 
 export const ReactHookFormExample = (): JSX.Element => {
-  /* import { Input, Button, FormError } from "../../../core/src" */
+	/* import { Input, Button, FormError } from "../../../core/src" */
 
-  const { control, formState, handleSubmit } = useForm<FormValues>();
-  const { errors } = formState;
-  const [busy, setBusy] = useState(false);
+	const { control, formState, handleSubmit } = useForm<FormValues>();
+	const { errors } = formState;
+	const [busy, setBusy] = useState(false);
 
-  const title = (
-    <div>
-      <label htmlFor="rhf-title">Title</label>
-      <Controller
-        name="title"
-        control={control}
-        render={({ field }) => (
-          <Input {...field} id="rhf-title" type="text" />
-        )}
-        rules={{ required: ERRORS.titleRequired }}
-        defaultValue=""
-      />
-      <FormError children={errors.title?.message} />
-    </div>
-  );
+	const title = (
+		<div>
+			<label htmlFor="rhf-title">Title</label>
+			<Controller
+				name="title"
+				control={control}
+				render={({ field }) => (
+					<Input {...field} id="rhf-title" type="text" />
+				)}
+				rules={{ required: ERRORS.titleRequired }}
+				defaultValue=""
+			/>
+			<FormError children={errors.title?.message} />
+		</div>
+	);
 
-  const message = (
-    <div>
-      <label htmlFor="rhf-message">Message</label>
-      <Controller
-        name="message"
-        control={control}
-        render={({ field }) => <TextArea {...field} id="rhf-message" />}
-        rules={{
-          required: { value: true, message: ERRORS.messageRequired },
-          minLength: { value: 5, message: ERRORS.messageLength },
-        }}
-        defaultValue=""
-      />
-      <FormError children={errors.message?.message} />
-    </div>
-  );
+	const message = (
+		<div>
+			<label htmlFor="rhf-message">Message</label>
+			<Controller
+				name="message"
+				control={control}
+				render={({ field }) => <TextArea {...field} id="rhf-message" />}
+				rules={{
+					required: { value: true, message: ERRORS.messageRequired },
+					minLength: { value: 5, message: ERRORS.messageLength },
+				}}
+				defaultValue=""
+			/>
+			<FormError children={errors.message?.message} />
+		</div>
+	);
 
-  return (
-    <form
-      onSubmit={handleSubmit(async (data) => {
-        setBusy(true);
-        await postToServer(data);
-        setBusy(false);
-      })}
-      className={s.form}
-    >
-      {title}
-      {message}
-      <SubmitButton busy={busy} />
-    </form>
-  );
+	return (
+		<form
+			onSubmit={handleSubmit(async (data) => {
+				setBusy(true);
+				await postToServer(data);
+				setBusy(false);
+			})}
+			className={s.form}
+		>
+			{title}
+			{message}
+			<SubmitButton busy={busy} />
+		</form>
+	);
 };
diff --git a/new-docs/pages/patterns/icon.stories.mdx b/new-docs/pages/patterns/icon.stories.mdx
index 69420972..7152f505 100644
--- a/new-docs/pages/patterns/icon.stories.mdx
+++ b/new-docs/pages/patterns/icon.stories.mdx
@@ -1,4 +1,4 @@
-import { Button } from '../../../core/src';
+import { Button } from "../../../core/src";
 import { RiSearchLine } from "react-icons/ri";
 
 # Icon
@@ -23,19 +23,17 @@ recommended way to set this prop is using an icon from the [react-icons][1]
 package. It provides icons from many popular sets that can be used directly in
 Moai:
 
-~~~ts
+```ts
 import { RiSearchLine } from "react-icons/ri";
-~~~
+```
 
 [1]: https://react-icons.github.io/react-icons/
 
 <Button icon={RiSearchLine} children="Search" />
 
-~~~tsx
-(): JSX.Element => (
-	<Button icon={RiSearchLine} children="Search" />
-)
-~~~
+```tsx
+(): JSX.Element => <Button icon={RiSearchLine} children="Search" />;
+```
 
 ## Icon Label
 
@@ -49,11 +47,9 @@ asked to provide an explicit icon label:
 
 <Button icon={RiSearchLine} iconLabel="Search" />
 
-~~~tsx
-(): JSX.Element => (
-	<Button icon={RiSearchLine} iconLabel="Search" />
-)
-~~~
+```tsx
+(): JSX.Element => <Button icon={RiSearchLine} iconLabel="Search" />;
+```
 
 ## Color & Size
 
@@ -62,13 +58,13 @@ controlled by the component itself. For example, in a large, highlight button,
 the icon is white and enlarged:
 
 <Button
-  highlight
-  size={Button.sizes.large}
-  icon={RiSearchLine}
-  children="Search"
+	highlight
+	size={Button.sizes.large}
+	icon={RiSearchLine}
+	children="Search"
 />
 
-~~~tsx
+```tsx
 (): JSX.Element => (
 	<Button
 		highlight
@@ -76,22 +72,22 @@ the icon is white and enlarged:
 		icon={RiSearchLine}
 		children="Search"
 	/>
-)
-~~~
+);
+```
 
 ## Advanced
 
 Technically, these \`icon\` props simply expect a [function component][1] that
-returns an SVG element. The type definition looks like this: 
+returns an SVG element. The type definition looks like this:
 
-~~~ts
+```ts
 interface Props {
-    style?: CSSProperties;
-    className?: string;
+	style?: CSSProperties;
+	className?: string;
 }
-  
+
 type Icon = (props: Props) => JSX.Element;
-~~~
+```
 
 This means you can use Moai with your own custom icons (e.g. logos, product
 icons), by creating components that return them as SVG elements. For a full
@@ -101,18 +97,18 @@ these components from SVG files.
 [1]: https://reactjs.org/docs/components-and-props.html#function-and-class-components
 [2]: https://react-svgr.com
 
-<Button 
+<Button
 	icon={(props) => {
 		return (
 			<svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
 				<path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
 			</svg>
-		)
-	}} 
+		);
+	}}
 	children="Search"
 />
 
-~~~tsx
+```tsx
 (): JSX.Element => {
 	// In practice, this should be defined outside of your component, or even
 	// better, automatically generated by a tool like react-svgr.
@@ -124,4 +120,4 @@ these components from SVG files.
 	);
 	return <Button icon={Icon} children="Search" />;
 };
-~~~
+```
diff --git a/new-docs/sidebar.ts b/new-docs/sidebar.ts
index e11f5b48..b6df5f08 100644
--- a/new-docs/sidebar.ts
+++ b/new-docs/sidebar.ts
@@ -17,7 +17,7 @@ function generateSidebar(dirPath: string, parentDir: string): SidebarItem[] {
 			const fileName = entry.name.replace(".stories.mdx", "");
 			if (fileName === "index") {
 				items.unshift({
-					text: 'Primary',
+					text: "Primary",
 					link: parentDir,
 				});
 			} else {