diff --git a/lib/.npmignore b/lib/.npmignore
new file mode 100644
index 0000000..73ef37d
--- /dev/null
+++ b/lib/.npmignore
@@ -0,0 +1,4 @@
+*.fixture.js
+*.mock.js
+*.spec.js
+*.test.jsx
diff --git a/lib/composeData.d.ts b/lib/composeData.d.ts
new file mode 100644
index 0000000..254d4bb
--- /dev/null
+++ b/lib/composeData.d.ts
@@ -0,0 +1,13 @@
+export default function composeData(values: ComposedData, element: HTMLButtonElement | HTMLFieldSetElement | HTMLInputElement | HTMLObjectElement | HTMLOutputElement | HTMLSelectElement | HTMLTextAreaElement, i: Int, collection: HTMLFormControlsCollection): ComposedData;
+export namespace FIELD_TAGS {
+    let FIELDSET: "fieldset";
+    let INPUT: "input";
+    let SELECT: "select";
+    let TEXTAREA: "textarea";
+}
+export type Int = number;
+export type ComposedData = {
+    [k: string]: string | number | boolean | (string | number)[] | FileList | ComposedData | null | undefined;
+};
+export type FieldTag = (typeof FIELD_TAGS)[keyof typeof FIELD_TAGS];
+//# sourceMappingURL=composeData.d.ts.map
\ No newline at end of file
diff --git a/lib/composeData.d.ts.map b/lib/composeData.d.ts.map
new file mode 100644
index 0000000..86759fa
--- /dev/null
+++ b/lib/composeData.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"composeData.d.ts","sourceRoot":"","sources":["composeData.js"],"names":[],"mappings":"AAkCA,4CARW,YAAY,WAEZ,iBAAiB,GAAC,mBAAmB,GAAC,gBAAgB,GAAC,iBAAiB,GAAC,iBAAiB,GAAC,iBAAiB,GAAC,mBAAmB,KAEhI,GAAG,cACH,0BAA0B,GACxB,YAAY,CAoFxB;;;;;;;kBAlGY,MAAM;;;;uBAbN,CAAA,iBAAiB,EAAC,MAAM,iBAAiB,CAAC"}
\ No newline at end of file
diff --git a/lib/composeData.js b/lib/composeData.js
index e1fc1c5..09ec34c 100644
--- a/lib/composeData.js
+++ b/lib/composeData.js
@@ -2,20 +2,21 @@ import _isArray from 'lodash-es/isArray.js';
 import _reduce from 'lodash-es/reduce.js';
 
 
-export const FIELD_TAGS = {
+/**
+ * @typedef {typeof FIELD_TAGS[keyof typeof FIELD_TAGS]} FieldTag
+ */
+export const FIELD_TAGS = /** @type {const} */ ({
 	FIELDSET: 'fieldset',
 	INPUT: 'input',
 	SELECT: 'select',
 	TEXTAREA: 'textarea',
-};
+});
 
 const listNameRgx = /\[\d*\]$/;
 const isListName = (name) => listNameRgx.test(name);
 
 /**
- * @typedef {number} Integer
- */
-/**
+ * @typedef {number} Int
  * @typedef {{ [k: string]: Array<number | string> | boolean | FileList | number | string | null |
  * undefined | ComposedData }} ComposedData An object with values cast to the type declared by the
  * field from which the value was derived. Checkboxses and Radios have boolean values.
@@ -27,7 +28,7 @@ const isListName = (name) => listNameRgx.test(name);
  * contains `__exclude: true`, then fields that are read-only will be excluded from the output.
  * @param {HTMLButtonElement|HTMLFieldSetElement|HTMLInputElement|HTMLObjectElement|HTMLOutputElement|HTMLSelectElement|HTMLTextAreaElement}
  * element The element currently being processed.
- * @param {Integer} i The index of the field in the master list of fields.
+ * @param {Int} i The index of the field in the master list of fields.
  * @param {HTMLFormControlsCollection} collection The parent `<form>` element.
  * @returns {ComposedData}
  */
diff --git a/lib/deepDiff.d.ts b/lib/deepDiff.d.ts
new file mode 100644
index 0000000..bcd619e
--- /dev/null
+++ b/lib/deepDiff.d.ts
@@ -0,0 +1,2 @@
+export default function deepDiff(oldVals: any, newVals: any, delta?: Record<string, never>): import('./composeData.js').ComposedData;
+//# sourceMappingURL=deepDiff.d.ts.map
\ No newline at end of file
diff --git a/lib/deepDiff.d.ts.map b/lib/deepDiff.d.ts.map
new file mode 100644
index 0000000..b4422f1
--- /dev/null
+++ b/lib/deepDiff.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"deepDiff.d.ts","sourceRoot":"","sources":["deepDiff.js"],"names":[],"mappings":"AAcA,qEAJW,OAAO,MAAM,EAAE,KAAK,CAAC,GACnB,OAAO,kBAAkB,EAAE,YAAY,CAwDnD"}
\ No newline at end of file
diff --git a/lib/deepDiff.js b/lib/deepDiff.js
index 6eddeaa..2472694 100755
--- a/lib/deepDiff.js
+++ b/lib/deepDiff.js
@@ -8,7 +8,7 @@ import _isObject from 'lodash-es/isObject.js';
  *
  * @param {*} oldVals
  * @param {*} newVals
- * @param {object} delta
+ * @param {Record<string, never>} delta
  * @returns {import('./composeData.js').ComposedData} The delta—the difference between old and new. When an old field is absent
  * in new, the old field is set to `null`.
  */
diff --git a/lib/react/Button/Button.d.ts b/lib/react/Button/Button.d.ts
new file mode 100644
index 0000000..958fdf0
--- /dev/null
+++ b/lib/react/Button/Button.d.ts
@@ -0,0 +1,37 @@
+declare function Button({ appearance, children: label, className, fluid, icon: Icon, type, variant, ...others }: ButtonProps & import("react").BaseHTMLAttributes<any>): JSX.Element;
+declare namespace Button {
+    let displayName: "Form5Button";
+    namespace APPEARANCES {
+        let AFFIRMING: "affirming";
+        let BASIC: "basic";
+        let DANGER: "danger";
+        let PRIMARY: "primary";
+        let WARNING: "warning";
+    }
+    namespace TYPES {
+        let BUTTON: "button";
+        let RESET: "reset";
+        let SUBMIT: "submit";
+    }
+    namespace VARIANTS {
+        let CTA: "cta";
+        let GLYPH: "glyph";
+    }
+    function Group({ className, ...props }: import("../Group/Group.jsx").GroupProps & import("react").HTMLAttributes<HTMLElement>): JSX.Element;
+}
+export default Button;
+export { styles as buttonClasses };
+export type React = typeof import("react");
+export type ButtonProps = {
+    appearance?: Appearance | undefined;
+    disabled?: boolean | undefined;
+    children?: React.ReactNode;
+    fluid?: boolean | undefined;
+    icon?: React.ReactNode;
+    type?: "button" | "reset" | "submit" | undefined;
+    variant?: Variant | undefined;
+};
+export type Appearance = (typeof Button.APPEARANCES)[keyof typeof Button.APPEARANCES];
+export type Type = (typeof Button.TYPES)[keyof typeof Button.TYPES];
+export type Variant = (typeof Button.VARIANTS)[keyof typeof Button.VARIANTS];
+//# sourceMappingURL=Button.d.ts.map
\ No newline at end of file
diff --git a/lib/react/Button/Button.d.ts.map b/lib/react/Button/Button.d.ts.map
new file mode 100644
index 0000000..328c907
--- /dev/null
+++ b/lib/react/Button/Button.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["Button.jsx"],"names":[],"mappings":"AA2BA,iHAFW,WAAW,0CAA2B,eA8BhD;;;;;;;;;;;;;;;;;;;IAiCD,4IAEC;;;;;;;;eAzEa,MAAM,SAAS;;WAEf,MAAM,SAAS;;;;yBAyChB,CAAA,OAAO,OAAO,WAAW,EAAC,MAAM,OAAO,OAAO,WAAW,CAAC;mBAU1D,CAAA,OAAO,OAAO,KAAK,EAAC,MAAM,OAAO,OAAO,KAAK,CAAC;sBAQ9C,CAAA,OAAO,OAAO,QAAQ,EAAC,MAAM,OAAO,OAAO,QAAQ,CAAC"}
\ No newline at end of file
diff --git a/lib/react/Button/Button.jsx b/lib/react/Button/Button.jsx
index 1dd8625..801d5cd 100644
--- a/lib/react/Button/Button.jsx
+++ b/lib/react/Button/Button.jsx
@@ -1,5 +1,4 @@
 import { clsx } from 'clsx';
-import PropTypes from 'prop-types';
 
 import Group from '../Group/Group.jsx';
 
@@ -9,25 +8,34 @@ import styles from './Button.module.css';
 export { styles as buttonClasses };
 
 /**
- *
- * @param {object} props
- * @param {APPEARANCE} [props.appearance=Button.APPEARANCES.PRIMARY]
- * @param {ReactNode} props.children
- * @param {string} props.className
- * @param {boolean} [props.fluid=false]
- * @param {ReactNode} props.icon
- * @param {HTMLButtonElement['type']} [props.type=Button.TYPES.BUTTON]
- * @param {VARIANT} [props.variant=Button.VARIANTS.CTA]
- * @param {import('react').HTMLProps<HTMLButtonElement>} props.others
- * @returns {HTMLButtonElement}
+ * @typedef {import('react')} React
+ */
+
+/**
+ * @typedef {object} ButtonProps
+ * @property {Appearance} [ButtonProps.appearance=Button.APPEARANCES.PRIMARY]
+ * @property {boolean} [ButtonProps.disabled]
+ * @property {React.ReactNode} [ButtonProps.children]
+ * @property {boolean} [ButtonProps.fluid=false]
+ * @property {React.ReactNode} [ButtonProps.icon]
+ * @property {HTMLButtonElement['type']} [ButtonProps.type=Button.TYPES.BUTTON]
+ * @property {Variant} [ButtonProps.variant=Button.VARIANTS.CTA]
+ */
+
+/**
+ * @param {ButtonProps & React.BaseHTMLAttributes} props
  */
 export default function Button({
+	appearance = Button.APPEARANCES.PRIMARY,
 	children: label,
 	className,
 	fluid,
 	icon: Icon,
+	type = Button.TYPES.BUTTON,
+	variant = Button.VARIANTS.CTA,
 	...others
 }) {
+	Object.assign(others, { appearance, type, variant });
 	return (
 		<button
 			{...others}
@@ -47,49 +55,37 @@ export default function Button({
 	);
 }
 
-Button.displayName = 'Form5Button';
+Button.displayName = /** @type {const} */ ('Form5Button');
 
 /**
- * @typedef {keyof typeof Button.APPEARANCES} APPEARANCE_KEYS
- * @typedef {typeof Button.APPEARANCES[APPEARANCE_KEYS]} APPEARANCE
+ * @typedef {typeof Button.APPEARANCES[keyof typeof Button.APPEARANCES]} Appearance
  */
-Button.APPEARANCES = {
+Button.APPEARANCES = /** @type {const} */ ({
 	AFFIRMING: 'affirming',
 	BASIC: 'basic',
 	DANGER: 'danger',
 	PRIMARY: 'primary',
 	WARNING: 'warning',
-};
+});
 /**
- * @typedef {keyof typeof Button.TYPES} VARIANT_KEYS
- * @typedef {typeof Button.TYPES[keyof typeof Button.TYPES]} TYPE
+ * @typedef {typeof Button.TYPES[keyof typeof Button.TYPES]} Type
  */
-Button.TYPES = {
+Button.TYPES = /** @type {const} */ ({
 	BUTTON: 'button',
 	RESET: 'reset',
 	SUBMIT: 'submit',
-};
+});
 /**
- * @typedef {keyof typeof Button.VARIANTS} VARIANT_KEYS
- * @typedef {typeof Button.VARIANTS[VARIANT_KEYS]} VARIANT
+ * @typedef {typeof Button.VARIANTS[keyof typeof Button.VARIANTS]} Variant
  */
-Button.VARIANTS = {
+Button.VARIANTS = /** @type {const} */ ({
 	CTA: 'cta',
 	GLYPH: 'glyph',
-};
-Button.defaultProps = {
-	appearance: Button.APPEARANCES.PRIMARY,
-	fluid: false,
-	type: Button.TYPES.BUTTON,
-	variant: Button.VARIANTS.CTA,
-};
-Button.propTypes = {
-	appearance: PropTypes.oneOf(Object.values(Button.APPEARANCES)),
-	fluid: PropTypes.bool,
-	type: PropTypes.oneOf(Object.values(Button.TYPES)),
-	variant: PropTypes.oneOf(Object.values(Button.VARIANTS)),
-};
+});
 
+/**
+ * @param {import('../Group/Group.jsx').GroupProps & React.HTMLAttributes<HTMLElement>} props
+ */
 Button.Group = ({ className, ...props }) => (
 	<Group className={clsx(className, styles.ButtonGroup)} {...props} />
 );
diff --git a/lib/react/Field/Field.d.ts b/lib/react/Field/Field.d.ts
new file mode 100644
index 0000000..5db4dd4
--- /dev/null
+++ b/lib/react/Field/Field.d.ts
@@ -0,0 +1,37 @@
+declare function Field({ appearance, arrangement, as: Tag, className, fluid, id, label, name, onBlur, onChange, options, readOnly, required, type, variant, ...others }: FieldProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>): JSX.Element;
+declare namespace Field {
+    let displayName: "Form5Field";
+    namespace ARRANGEMENTS {
+        let COMPACT: "compact";
+        let INLINE: "inline";
+        let STACKED: "stacked";
+        let STAND_ALONE: "stand-alone";
+    }
+    namespace VARIANTS {
+        let CTA: "cta";
+        let GLYPH: "glyph";
+        let TOGGLE: "toggle";
+    }
+}
+export default Field;
+export { styles as inputClasses };
+export type React = typeof import("react");
+export type FieldProps = {
+    appearance?: import("../Button/Button.jsx").Appearance | undefined;
+    arrangement?: Arrangement | undefined;
+    as?: import("react").ElementType<any> | undefined;
+    fluid?: boolean | undefined;
+    label: React.ReactNode;
+    name: HTMLInputElement['name'];
+    onBlur?: ((event: React.FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void) | undefined;
+    onChange?: ((change: {
+        id: string;
+        name: string;
+        value: boolean | number | string;
+    }, event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void) | undefined;
+    options?: Record<string, import("react").ReactNode> | undefined;
+    variant?: Variant | undefined;
+};
+export type Arrangement = (typeof Field.ARRANGEMENTS)[keyof typeof Field.ARRANGEMENTS];
+export type Variant = (typeof Field.VARIANTS)[keyof typeof Field.VARIANTS];
+//# sourceMappingURL=Field.d.ts.map
\ No newline at end of file
diff --git a/lib/react/Field/Field.d.ts.map b/lib/react/Field/Field.d.ts.map
new file mode 100644
index 0000000..cc323cc
--- /dev/null
+++ b/lib/react/Field/Field.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["Field.jsx"],"names":[],"mappings":"AAoCA,yKAFW,UAAU,GAAG,KAAK,MAAM,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,eAqLpF;;;;;;;;;;;;;;;;;;;;;;;WA9La,MAAM,SAAS;UACf,gBAAgB,CAAC,MAAM,CAAC;sBAChB,gBAAgB,CAAC,gBAAgB,GAAC,iBAAiB,GAAC,mBAAmB,CAAC,KAAK,IAAI;yBAChF;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,SAAS,MAAM,WAAW,CAAC,gBAAgB,GAAC,iBAAiB,GAAC,mBAAmB,CAAC,KAAK,IAAI;;;;0BAgMnK,CAAA,OAAO,MAAM,YAAY,EAAC,MAAM,OAAO,MAAM,YAAY,CAAC;sBAS1D,CAAA,OAAO,MAAM,QAAQ,EAAC,MAAM,OAAO,MAAM,QAAQ,CAAC"}
\ No newline at end of file
diff --git a/lib/react/Field/Field.jsx b/lib/react/Field/Field.jsx
index 3e45e43..e33489c 100644
--- a/lib/react/Field/Field.jsx
+++ b/lib/react/Field/Field.jsx
@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
 import _isEmpty from 'lodash-es/isEmpty.js';
 import _map from 'lodash-es/map.js';
-import PropTypes from 'prop-types';
 import { useState } from 'react';
 
 import { useInteractiveStates } from '../useInteractiveStates.js';
@@ -15,25 +14,25 @@ import styles from './Field.module.css';
 export { styles as inputClasses };
 
 /**
- *
- * @param {object} props
- * @param {import('../Button/Button.jsx').APPEARANCE} props.appearance
- * @param {ARRANGEMENT} props.arrangement
- * @param {import('react').ElementType} props.as The element to render.
- * @param {string} props.className
- * @param {boolean} props.fluid Whether the field should fill its container.
- * @param {HTMLElement['id']} props.id
- * @param {HTMLLabelElement['textContent']} props.label
- * @param {HTMLInputElement['name']} props.name
- * @param {(event: import('react').FocusEvent<HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement>)} props.onBlur
- * @param {(change: { id: string, name: string, value: boolean | number | string }, event: import('react').ChangeEvent<HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement>)} props.onChange
- * @param {Array<{[key: HTMLOptionElement['value']]: HTMLOptionElement['textContent'] }>} props.options
- * @param {HTMLInputElement['readOnly']} props.readOnly
- * @param {HTMLInputElement['required']} props.required
- * @param {HTMLInputElement['type']} props.type
- * @param {typeof Field.VARIANTS} props.variant
- * @param {import('react').HTMLProps<HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement>} props.others
- * @returns {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement}
+ * @typedef {import('react')} React
+ */
+
+/**
+ * @typedef {object} FieldProps
+ * @property {import('../Button/Button.jsx').Appearance} [FieldProps.appearance=Button.APPEARANCES.PRIMARY]
+ * @property {Arrangement} [FieldProps.arrangement=Field.ARRANGEMENTS.INLINE]
+ * @property {React.ElementType} [FieldProps.as='input'] The element to render.
+ * @property {boolean} [FieldProps.fluid] Whether the field should fill its container.
+ * @property {React.ReactNode} FieldProps.label
+ * @property {HTMLInputElement['name']} FieldProps.name
+ * @property {(event: React.FocusEvent<HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement>) => void} [FieldProps.onBlur]
+ * @property {(change: { id: string, name: string, value: boolean | number | string }, event: React.ChangeEvent<HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement>) => void} [FieldProps.onChange]
+ * @property {Record<HTMLOptionElement['value'], React.ReactNode>} [FieldProps.options]
+ * @property {Variant} [FieldProps.variant]
+ */
+
+/**
+ * @param {FieldProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>} props
  */
 export default function Field({
 	appearance = Button.APPEARANCES.PRIMARY,
@@ -44,8 +43,8 @@ export default function Field({
 	id,
 	label,
 	name,
-	onBlur = () => {},
-	onChange = () => {},
+	onBlur,
+	onChange,
 	options,
 	readOnly,
 	required,
@@ -74,7 +73,7 @@ export default function Field({
 
 		is.onBlur(e);
 
-		onBlur(e);
+		onBlur?.(e);
 
 		if (e.target.checkValidity()) setError('');
 	};
@@ -102,7 +101,7 @@ export default function Field({
 
 		if (type === 'checkbox') value = checked;
 
-		onChange({
+		onChange?.({
 			id,
 			name,
 			value: options?.[value] ?? value,
@@ -216,36 +215,25 @@ export default function Field({
 	);
 };
 
-Field.displayName = 'Form5Field';
+Field.displayName = /** @type {const} */ ('Form5Field');
 
 /**
- * @typedef {typeof Field.ARRANGEMENTS[keyof typeof Field.ARRANGEMENTS]} ARRANGEMENT
+ * @typedef {typeof Field.ARRANGEMENTS[keyof typeof Field.ARRANGEMENTS]} Arrangement
  */
-Field.ARRANGEMENTS = {
+Field.ARRANGEMENTS = /** @type {const} */ ({
 	COMPACT: 'compact',
 	INLINE: 'inline',
 	STACKED: 'stacked',
 	STAND_ALONE: 'stand-alone',
-};
+});
 /**
- * @typedef {typeof Field.VARIANTS[keyof typeof Field.VARIANTS]} VARIANT
+ * @typedef {typeof Field.VARIANTS[keyof typeof Field.VARIANTS]} Variant
  */
-Field.VARIANTS = {
+Field.VARIANTS = /** @type {const} */ ({
 	CTA: Button.VARIANTS.CTA,
 	GLYPH: Button.VARIANTS.GLYPH,
 	TOGGLE: 'toggle',
-};
-Field.propTypes = {
-	arrangement: PropTypes.oneOf(Object.values(Field.ARRANGEMENTS)),
-	as: PropTypes.elementType,
-	fluid: PropTypes.bool,
-	label: PropTypes.node,
-	name: PropTypes.string.isRequired,
-	onBlur: PropTypes.func,
-	onChange: PropTypes.func,
-	options: PropTypes.object,
-	variant: PropTypes.oneOf(Object.values(Field.VARIANTS)),
-};
+});
 
 const dtTypes = new Set([
 	'date',
diff --git a/lib/react/FileInput/FileInput.d.ts b/lib/react/FileInput/FileInput.d.ts
new file mode 100644
index 0000000..4d2c743
--- /dev/null
+++ b/lib/react/FileInput/FileInput.d.ts
@@ -0,0 +1,33 @@
+export function generatePreview(input: URL['href'] | File): Preview | undefined;
+export { styles as fileInputClasses };
+declare class FileInput extends PureComponent<FileInputProps & import("react").InputHTMLAttributes<HTMLInputElement>, any, any> {
+    static defaultProps: {
+        icon: string;
+        label: string;
+        multiple: boolean;
+    };
+    static getDerivedStateFromProps(props: any, state: any): any;
+    constructor(props: (FileInputProps & import("react").InputHTMLAttributes<HTMLInputElement>) | Readonly<FileInputProps & import("react").InputHTMLAttributes<HTMLInputElement>>);
+    constructor(props: FileInputProps & import("react").InputHTMLAttributes<HTMLInputElement>, context: any);
+    state: {
+        previews: Array<URL['href']>;
+    };
+    handleChange: (e: any, cb: any) => void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+declare namespace FileInput {
+    let displayName: "Form5FileInput";
+}
+export default FileInput;
+export type Preview = {
+    file: File;
+    preview?: URL['href'];
+};
+export type React = typeof import("react");
+export type FileInputProps = {
+    icon?: React.ReactNode;
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, files: FileList) => void) | undefined;
+};
+import { PureComponent } from 'react';
+//# sourceMappingURL=FileInput.d.ts.map
\ No newline at end of file
diff --git a/lib/react/FileInput/FileInput.d.ts.map b/lib/react/FileInput/FileInput.d.ts.map
new file mode 100644
index 0000000..bac4c0d
--- /dev/null
+++ b/lib/react/FileInput/FileInput.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["FileInput.jsx"],"names":[],"mappings":"AA4IA,uCAFW,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,uBA8B5B;;AAhJD;IACC;;;;MAIC;IAQD,6DAYC;IA0Hu2gB,gLAA8C;IAAA,yGAAyJ;IA5I/ihB;kBACY,MAAM,GAAG,CAAC,MAAM,CAAC,CAAC;MAE5B;IAkBF,wCAQC;IAGD,6BAEC;IAED,sBAiEC;CACD;;;;;sBAIa;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAAE;;;WAxHrC,MAAM,SAAS;wBACP,MAAM,WAAW,CAAC,gBAAgB,CAAC,SAAS,QAAQ,KAAK,IAAI;;8BAhBrD,OAAO"}
\ No newline at end of file
diff --git a/lib/react/FileInput/FileInput.jsx b/lib/react/FileInput/FileInput.jsx
index be36bba..0126461 100644
--- a/lib/react/FileInput/FileInput.jsx
+++ b/lib/react/FileInput/FileInput.jsx
@@ -1,6 +1,5 @@
 import { clsx } from 'clsx';
 import _map from 'lodash-es/map.js';
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
 import Button, { buttonClasses } from '../Button/Button.jsx';
@@ -10,17 +9,18 @@ import styles from './FileInput.module.css';
 
 export { styles as fileInputClasses };
 
+/**
+ * @typedef {import('react')} React
+ */
+
 /**
  * @typedef {object} FileInputProps
- * @property {HTMLInputElement['accept']} accept
- * @property {string} className
- * @property {ReactNode} icon
- * @property {HTMLLabelElement['textContent']} label
- * @property {HTMLInputElement['multiple']} multiple
- * @property {HTMLInputElement['name']} name
- * @property {(event: import('react').ChangeEvent<HTMLInputElement>, files: FileList)} onChange
- *
- * @extends {PureComponent<FileInputProps>}
+ * @property {React.ReactNode} [icon]
+ * @property {(event: React.ChangeEvent<HTMLInputElement>, files: FileList) => void} [onChange]
+ */
+
+/**
+ * @extends React.PureComponent<(FileInputProps & React.InputHTMLAttributes<HTMLInputElement>)>
  */
 export default class FileInput extends PureComponent {
 	static defaultProps = {
@@ -30,9 +30,11 @@ export default class FileInput extends PureComponent {
 	}
 
 	state = {
+		/** @type {Array<URL['href']>} */
 		previews: new Array(0),
 	};
 
+	/** @internal */
 	static getDerivedStateFromProps(props, state) {
 		if (
 			props.value
@@ -47,6 +49,7 @@ export default class FileInput extends PureComponent {
 		return state;
 	}
 
+	/** @internal */
 	handleChange = (e, cb) => {
 		const { files } = e.target;
 
@@ -57,6 +60,7 @@ export default class FileInput extends PureComponent {
 		cb?.(e, files);
 	}
 
+	/** @internal */
 	componentWillUnmount() {
 		for (const { preview } of this.state.previews) URL.revokeObjectURL(preview);
 	}
@@ -128,23 +132,15 @@ export default class FileInput extends PureComponent {
 		);
 	}
 }
-FileInput.displayName = 'Form5FileInput';
-FileInput.propTypes = {
-	accept: PropTypes.string,
-	className: PropTypes.string,
-	icon: PropTypes.node,
-	label: PropTypes.string,
-	multiple: PropTypes.bool,
-	name: PropTypes.string.isRequired,
-	onChange: PropTypes.func,
-};
+FileInput.displayName = /** @type {const} */ ('Form5FileInput');
 
 /**
+	 * @typedef {{ file: File, preview?: URL['href'] }} Preview
  * @param {URL['href'] | File} input
  */
 export function generatePreview(input) {
-	const output = {};
-	output.file = input;
+	/** @type {Preview} */
+	const output = { file: input };
 
 	// `File` doesn't exist in node, so its `createObjectURL` expects a `Blob`
 	// `File` inherits from `Blob`, so checking for `Blob` also catches `File`
diff --git a/lib/react/Form/Form.d.ts b/lib/react/Form/Form.d.ts
new file mode 100644
index 0000000..5435bd7
--- /dev/null
+++ b/lib/react/Form/Form.d.ts
@@ -0,0 +1,24 @@
+export function Form({ children, className, onDirty, onPristine, ...props }: FormProps & Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'>): JSX.Element;
+export namespace Form {
+    export { FIELD_TAGS };
+    export let displayName: "Form5Form";
+}
+export function onSubmit(event: SubmitEvent, initValues: Values, cb: OnSubmit): void;
+export function setup(formElement: HTMLFormElement, initValues: Values): void;
+export { styles as formClasses };
+declare const _default: import("react").MemoExoticComponent<typeof Form>;
+export default _default;
+export type React = typeof import("react");
+export type ComposedData = import('../../composeData.js').ComposedData;
+export type SubmitEvent = React.FormEvent<HTMLFormElement>;
+export type ResetEvent = React.FormEvent<HTMLFormElement>;
+export type OnSubmit = <D extends import("../../composeData.js").ComposedData>(delta: Partial<D>, all: D, event: SubmitEvent) => void;
+export type Values = React.MutableRefObject<ComposedData>;
+export type FormProps = {
+    children: React.ReactNode;
+    onDirty?: ((isDirty: true) => void) | undefined;
+    onPristine?: ((isDirty: false) => void) | undefined;
+    onSubmit: OnSubmit;
+};
+import { FIELD_TAGS } from '../../composeData.js';
+//# sourceMappingURL=Form.d.ts.map
\ No newline at end of file
diff --git a/lib/react/Form/Form.d.ts.map b/lib/react/Form/Form.d.ts.map
new file mode 100644
index 0000000..de8c903
--- /dev/null
+++ b/lib/react/Form/Form.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["Form.jsx"],"names":[],"mappings":"AAkDA,6EAFW,SAAS,GAAG,KAAK,MAAM,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,eAkDjF;;;;;AAeD,gCALW,WAAW,0BAEX,QAAQ,QAuBlB;AAOD,mCAHW,eAAe,4BAWzB;;;;;2BA/HY,OAAO,sBAAsB,EAAE,YAAY;0BAG3C,MAAM,SAAS,CAAC,eAAe,CAAC;yBAGhC,MAAM,SAAS,CAAC,eAAe,CAAC;iHAG2B,WAAW,KAAK,IAAI;qBAO/E,MAAM,gBAAgB,CAAC,YAAY,CAAC;;cAInC,MAAM,SAAS;yBACL,IAAI,KAAK,IAAI;4BACb,KAAK,KAAK,IAAI;cACxB,QAAQ;;2BArCf,sBAAsB"}
\ No newline at end of file
diff --git a/lib/react/Form/Form.jsx b/lib/react/Form/Form.jsx
index 87e56c7..575c0d9 100755
--- a/lib/react/Form/Form.jsx
+++ b/lib/react/Form/Form.jsx
@@ -2,7 +2,6 @@ import _reduce from 'lodash-es/reduce.js';
 
 import { clsx } from 'clsx';
 import { memo, useRef } from 'react';
-import PropTypes from 'prop-types';
 
 import composeData, {
 	FIELD_TAGS,
@@ -15,27 +14,39 @@ import styles from './Form.module.css';
 
 export { styles as formClasses };
 
+/**
+ * @typedef {import('react')} React
+ */
+
 /**
  * @typedef {import('../../composeData.js').ComposedData} ComposedData
  */
 /**
- * @typedef {import('react').FormEvent<HTMLFormElement>} SubmitEvent
+ * @typedef {React.FormEvent<HTMLFormElement>} SubmitEvent
+ */
+/**
+ * @typedef {React.FormEvent<HTMLFormElement>} ResetEvent
+ */
+/**
+ * @typedef {<D extends ComposedData>(delta: Partial<D>, all: D, event: SubmitEvent) => void} OnSubmit
+ * @param delta The difference between the initial values and the current values
+ * @param all The same shape, but containing the full current values
+ * @param event The original submit event
+ * @returns {void}
  */
 /**
- * @typedef {import('react').FormEvent<HTMLFormElement>} ResetEvent
+ * @typedef {React.MutableRefObject<ComposedData>} Values
+ */
+/**
+ * @typedef {object} FormProps
+ * @property {React.ReactNode} FormProps.children
+ * @property {(isDirty: true) => void} [FormProps.onDirty]
+ * @property {(isDirty: false) => void} [FormProps.onPristine]
+ * @property {OnSubmit} FormProps.onSubmit
  */
 /**
  *
- * @param {object} props
- * @param {import('react').ReactNode} props.children
- * @param {string} props.className
- * @param {(isDirty: true) => void} props.onDirty
- * @param {(isDirty: false) => void} props.onPristine
- * @param {import('react').onReset} props.onReset
- * @param {(delta: ComposedData, all: ComposedData, event: SubmitEvent) => void} props.onSubmit
- * `delta` is the difference between the initial values and the current values. `all` is the same
- * shape, but containing the full current values. `event` is the original submit event.
- * @returns {HTMLFormElement}
+ * @param {FormProps & Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'>} props
  */
 export function Form({
 	children,
@@ -45,7 +56,7 @@ export function Form({
 	...props
 }) {
 	const formElm = useRef();
-	const initValues = useRef(); // `useRef` to avoid needless re-renders
+	const initValues = useRef(/** @type {ComposedData} */ ({})); // `useRef` to avoid needless re-renders
 	const {
 		pristine,
 		touched,
@@ -89,16 +100,17 @@ export function Form({
 
 Form.FIELD_TAGS = FIELD_TAGS;
 
-Form.displayName = 'Form5Form';
-Form.propTypes = {
-	onDirty: PropTypes.func,
-	onPristine: PropTypes.func,
-	onSubmit: PropTypes.func.isRequired,
-};
+Form.displayName = /** @type {const} */ ('Form5Form');
 
 export default memo(Form);
 
-// Exported for testing
+/**
+ * @internal Exported for testing
+ * @param {SubmitEvent} event
+ * @param {Values} initValues
+ * @param {OnSubmit} cb
+ * @returns void
+ */
 export function onSubmit(event, initValues, cb) {
 	event.preventDefault();
 
@@ -121,7 +133,11 @@ export function onSubmit(event, initValues, cb) {
 	return cb(delta, all, event);
 }
 
-// Exported for testing
+/**
+ * @internal Exported for testing
+ * @param {HTMLFormElement} formElement
+ * @param {Values} initValues
+ */
 export function setup(formElement, initValues) {
 	if (!formElement || initValues.current) return;
 
diff --git a/lib/react/Group/Group.d.ts b/lib/react/Group/Group.d.ts
new file mode 100644
index 0000000..a0150ca
--- /dev/null
+++ b/lib/react/Group/Group.d.ts
@@ -0,0 +1,12 @@
+declare function Group({ as: Tag, className, ...others }: GroupProps & React.HTMLAttributes<HTMLElement>): JSX.Element;
+declare namespace Group {
+    let displayName: "Form5Group";
+}
+export default Group;
+export { styles as grouptClasses };
+export type React = typeof import("react");
+export type GroupProps = {
+    as?: import("react").ElementType<any> | undefined;
+    children: React.ReactNode;
+};
+//# sourceMappingURL=Group.d.ts.map
\ No newline at end of file
diff --git a/lib/react/Group/Group.d.ts.map b/lib/react/Group/Group.d.ts.map
new file mode 100644
index 0000000..36b1a37
--- /dev/null
+++ b/lib/react/Group/Group.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["Group.jsx"],"names":[],"mappings":"AAoBA,0DAFW,UAAU,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,eAcxD;;;;;;;;;cAlBa,MAAM,SAAS"}
\ No newline at end of file
diff --git a/lib/react/Group/Group.jsx b/lib/react/Group/Group.jsx
index 3e19976..2be3a02 100644
--- a/lib/react/Group/Group.jsx
+++ b/lib/react/Group/Group.jsx
@@ -1,17 +1,22 @@
 import { clsx } from 'clsx';
-import PropTypes from 'prop-types';
 
 import styles from './Group.module.css';
 
 
 export { styles as grouptClasses };
 
+/**
+ * @typedef {import('react')} React
+ */
+
+/**
+ * @typedef {object} GroupProps
+ * @property {React.ElementType} [props.as] The element to render.
+ * @property {React.ReactNode} FormProps.children
+ */
 /**
  * Visually group form elements (buttons) together.
- * @param {object} props
- * @param {import('react').ElementType} props.as The element to render.
- * @param {string} props.className
- * @returns {JSX.Element}
+ * @param {GroupProps & React.HTMLAttributes<HTMLElement>} props
  */
 export default function Group({
 	as: Tag = 'div',
@@ -27,7 +32,4 @@ export default function Group({
 	);
 }
 
-Group.displayname = 'Form5Group';
-Group.propTypes = {
-	as: PropTypes.elementType,
-};
+Group.displayName = /** @type {const} */ ('Form5Group');
diff --git a/lib/react/barrel.d.ts b/lib/react/barrel.d.ts
new file mode 100644
index 0000000..6aa4c32
--- /dev/null
+++ b/lib/react/barrel.d.ts
@@ -0,0 +1,5 @@
+export { default as Button } from "./Button/Button.jsx";
+export { default as FileInput } from "./FileInput/FileInput.jsx";
+export { default as Form } from "./Form/Form.jsx";
+export { default as Field } from "./Field/Field.jsx";
+//# sourceMappingURL=barrel.d.ts.map
\ No newline at end of file
diff --git a/lib/react/barrel.d.ts.map b/lib/react/barrel.d.ts.map
new file mode 100644
index 0000000..58e4b9e
--- /dev/null
+++ b/lib/react/barrel.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"barrel.d.ts","sourceRoot":"","sources":["barrel.js"],"names":[],"mappings":""}
\ No newline at end of file
diff --git a/lib/react/useInteractiveStates.d.ts b/lib/react/useInteractiveStates.d.ts
new file mode 100644
index 0000000..18183f1
--- /dev/null
+++ b/lib/react/useInteractiveStates.d.ts
@@ -0,0 +1,13 @@
+export function useInteractiveStates({ onDirty, onPristine, }?: {
+    onDirty?: ((isDirty: true) => void) | undefined;
+    onPristine?: ((isDirty: false) => void) | undefined;
+} | undefined): {
+    onBlur: (e: FocusEvent) => void;
+    onChange: () => void;
+    onInvalid: () => void;
+    onSubmit: () => void;
+    pristine: "" | null;
+    touched: "" | null;
+};
+export type BooleanAttribute = '' | null;
+//# sourceMappingURL=useInteractiveStates.d.ts.map
\ No newline at end of file
diff --git a/lib/react/useInteractiveStates.d.ts.map b/lib/react/useInteractiveStates.d.ts.map
new file mode 100644
index 0000000..d09c8ac
--- /dev/null
+++ b/lib/react/useInteractiveStates.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"useInteractiveStates.d.ts","sourceRoot":"","sources":["useInteractiveStates.js"],"names":[],"mappings":"AAcA;yBALqB,IAAI,KAAK,IAAI;4BACb,KAAK,KAAK,IAAI;;gBAWP,UAAU;;;;;;EA2BrC;+BA5CY,EAAE,GAAC,IAAI"}
\ No newline at end of file
diff --git a/lib/react/useInteractiveStates.js b/lib/react/useInteractiveStates.js
index e545034..fe31990 100644
--- a/lib/react/useInteractiveStates.js
+++ b/lib/react/useInteractiveStates.js
@@ -2,25 +2,31 @@ import { useState } from 'react';
 
 
 /**
- *
+ * @typedef {''|null} BooleanAttribute
+ */
+
+/**
+ * @param {object} [handlers]
+ * @param {(isDirty: true) => void} [handlers.onDirty]
+ * @param {(isDirty: false) => void} [handlers.onPristine]
  * @returns A collection of event handlers and states (whose values are either an empty string when
  * true, or `null` when false—because React).
  */
 export function useInteractiveStates({
-	onDirty = () => {},
-	onPristine = () => {},
+	onDirty,
+	onPristine,
 } = {}) {
-	const [pristine, setPristine] = useState('');
-	const [touched, setTouched] = useState(null);
+	const [pristine, setPristine] = useState(/** @type {BooleanAttribute} */ (''));
+	const [touched, setTouched] = useState(/** @type {BooleanAttribute} */ (null));
 
-	const onBlur = (e) => {
+	const onBlur = (/** @type {FocusEvent} */ e) => {
 		if (touched !== '') { setTouched('') }
 	};
 	const onChange = () => {
 		if (touched !== '') { setTouched('') }
 		if (pristine !== null) {
 			setPristine(null);
-			onDirty(true);
+			onDirty?.(true);
 		}
 	};
 	const onInvalid = () => {
@@ -29,7 +35,7 @@ export function useInteractiveStates({
 	const onSubmit = () => {
 		setTouched(null);
 		setPristine('');
-		onPristine(false);
+		onPristine?.(false);
 	};
 
 	return {
@@ -37,13 +43,7 @@ export function useInteractiveStates({
 		onChange,
 		onInvalid,
 		onSubmit,
-		/**
-		 * @type {''|null}
-		 */
 		pristine,
-		/**
-		 * @type {''|null}
-		 */
 		touched,
 	};
 }
diff --git a/package-lock.json b/package-lock.json
index 4e6a905..aa08208 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,8 @@
         "mocha": "^10.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "reset.css": "^2.0.2"
+        "reset.css": "^2.0.2",
+        "typescript": "^5.2.2"
       },
       "engines": {
         "node": ">=18.6.0"
@@ -3510,6 +3511,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/typescript": {
+      "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",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -6245,6 +6259,12 @@
       "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
       "dev": true
     },
+    "typescript": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "dev": true
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
diff --git a/package.json b/package.json
index 512838b..d58cf81 100644
--- a/package.json
+++ b/package.json
@@ -1,23 +1,48 @@
 {
   "name": "form5",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "A set of mostly unopinionated react components leveraging native APIs; supports controlled and uncontrolled state.",
   "type": "module",
-  "directories": {
-    "lib": "lib"
-  },
+  "files": [
+    "./lib/**/*"
+  ],
   "exports": {
-    "./composeData": "./lib/composeData.js",
-    "./deepDiff": "./lib/deepDiff.js",
-    "./package.json": "./package.json",
-    "./react": "./lib/react/barrel.js",
-    "./react/Button": "./lib/react/Button/Button.jsx",
-    "./react/Field": "./lib/react/Field/Field.jsx",
-    "./react/FileInput": "./lib/react/FileInput/FileInput.jsx",
-    "./react/Form": "./lib/react/Form/Form.jsx"
+    "./composeData": {
+      "import": "./lib/composeData.js",
+      "types": "./lib/composeData.d.ts"
+    },
+    "./deepDiff": {
+      "import": "./lib/deepDiff.js",
+      "types": "./lib/deepDiff.d.ts"
+    },
+    "./package.json": {
+      "import": "./package.json",
+      "types": "./package.d.ts"
+    },
+    "./react": {
+      "import": "./lib/react/barrel.js",
+      "types": "./lib/react/barrel.d.ts"
+    },
+    "./react/Button": {
+      "import": "./lib/react/Button/Button.jsx",
+      "types": "./lib/react/Button/Button.d.ts"
+    },
+    "./react/Field": {
+      "import": "./lib/react/Field/Field.jsx",
+      "types": "./lib/react/Field/Field.d.ts"
+    },
+    "./react/FileInput": {
+      "import": "./lib/react/FileInput/FileInput.jsx",
+      "types": "./lib/react/FileInput/FileInput.d.ts"
+    },
+    "./react/Form": {
+      "import": "./lib/react/Form/Form.jsx",
+      "types": "./lib/react/Form/Form.d.ts"
+    }
   },
   "scripts": {
     "build:demo": "rm -rf ./demo/build/* && node ./build.js",
+    "build:types": "find ./lib -name '*.d.ts' -delete && find ./lib -name '*.d.ts.map' -delete && tsc --project ./tsconfig.json",
     "preversion": "npm run test:coverage",
     "test": "c8 --check-coverage concurrently --kill-others-on-fail --prefix none npm:test:*",
     "test:node": "NODE_ENV=test NODE_OPTIONS='--no-warnings --loader=./loaders/tsx.mjs --loader=./loaders/css.mjs --test-reporter=spec' node ./node.test.mjs",
@@ -43,7 +68,6 @@
   },
   "peerDependencies": {
     "clsx": "*",
-    "prop-types": "*",
     "react": "17 - 18",
     "react-dom": "17 - 18"
   },
@@ -61,7 +85,8 @@
     "mocha": "^10.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "reset.css": "^2.0.2"
+    "reset.css": "^2.0.2",
+    "typescript": "^5.2.2"
   },
   "engines": {
     "node": ">=18.6.0"
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..6219bb7
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "alwaysStrict": true,
+    "baseUrl": "./lib",
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "jsx": "preserve",
+    "lib": ["ESNext", "DOM"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "noImplicitThis": true,
+    "removeComments": true,
+    "strict": true,
+    "stripInternal": true,
+    "target": "esnext",
+  },
+  "include": ["lib"],
+  "exclude": [
+    "node_modules",
+    "./node_modules",
+    "**/*.fixture.js",
+    "**/*.mock.js",
+    "**/*.spec.js",
+    "**/*.test.jsx"
+  ],
+}