diff --git a/apps/docs/src/examples/blockquote/basic.tsx b/apps/docs/src/examples/blockquote/basic.tsx
index d2a09fce..77d03dbf 100644
--- a/apps/docs/src/examples/blockquote/basic.tsx
+++ b/apps/docs/src/examples/blockquote/basic.tsx
@@ -1,10 +1,10 @@
 import { Blockquote } from '@luke-ui/react/blockquote';
 
-export default function Basic() {
+export default () => {
 	return (
 		<Blockquote>
 			Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
 			near it in obstinacy.
 		</Blockquote>
 	);
-}
+};
diff --git a/apps/docs/src/examples/blockquote/font-weight.tsx b/apps/docs/src/examples/blockquote/font-weight.tsx
index 2e94130b..5c8264b5 100644
--- a/apps/docs/src/examples/blockquote/font-weight.tsx
+++ b/apps/docs/src/examples/blockquote/font-weight.tsx
@@ -1,7 +1,7 @@
 import { Blockquote } from '@luke-ui/react/blockquote';
 import { Box } from '@luke-ui/react/box';
 
-export default function FontWeight() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="300" maxInlineSize="40rem">
 			<Blockquote fontWeight="body">
@@ -22,4 +22,4 @@ export default function FontWeight() {
 			</Blockquote>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/blockquote/line-clamp.tsx b/apps/docs/src/examples/blockquote/line-clamp.tsx
index 0e82a3a6..cf131b98 100644
--- a/apps/docs/src/examples/blockquote/line-clamp.tsx
+++ b/apps/docs/src/examples/blockquote/line-clamp.tsx
@@ -1,7 +1,7 @@
 import { Blockquote } from '@luke-ui/react/blockquote';
 import { Box } from '@luke-ui/react/box';
 
-export default function LineClamp() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="400" maxInlineSize="30rem">
 			<Blockquote lineClamp>
@@ -14,4 +14,4 @@ export default function LineClamp() {
 			</Blockquote>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/blockquote/size.tsx b/apps/docs/src/examples/blockquote/size.tsx
index 2531431a..27421231 100644
--- a/apps/docs/src/examples/blockquote/size.tsx
+++ b/apps/docs/src/examples/blockquote/size.tsx
@@ -3,7 +3,7 @@ import { Box } from '@luke-ui/react/box';
 
 const sizes = ['100', '200', '300', '400', '500', '600', '700', '800', '900'] as const;
 
-export default function Size() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="400" maxInlineSize="50rem">
 			{sizes.map((size) => (
@@ -14,4 +14,4 @@ export default function Size() {
 			))}
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/box/basic.tsx b/apps/docs/src/examples/box/basic.tsx
index 6ac43e35..256185d1 100644
--- a/apps/docs/src/examples/box/basic.tsx
+++ b/apps/docs/src/examples/box/basic.tsx
@@ -1,10 +1,10 @@
 import { Box } from '@luke-ui/react/box';
 
-export default function Basic() {
+export default () => {
 	return (
 		<Box display="flex" gap="300">
 			<span>Account</span>
 			<span>Settings</span>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/box/responsive-layout.tsx b/apps/docs/src/examples/box/responsive-layout.tsx
index f142a337..13bb2596 100644
--- a/apps/docs/src/examples/box/responsive-layout.tsx
+++ b/apps/docs/src/examples/box/responsive-layout.tsx
@@ -2,14 +2,14 @@ import { Box } from '@luke-ui/react/box';
 import { Text } from '@luke-ui/react/text';
 import { vars } from '@luke-ui/react/theme';
 
-export default function ResponsiveLayout() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection={{ initial: 'column', medium: 'row' }} gap="300">
 			<Item />
 			<Item />
 		</Box>
 	);
-}
+};
 
 function Item() {
 	return (
diff --git a/apps/docs/src/examples/button-primitive/basic.tsx b/apps/docs/src/examples/button-primitive/basic.tsx
index ab0b35d1..17f369cc 100644
--- a/apps/docs/src/examples/button-primitive/basic.tsx
+++ b/apps/docs/src/examples/button-primitive/basic.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@luke-ui/react/button/primitive';
 
-export default function Basic() {
+export default () => {
 	return <Button tone="accent">Save</Button>;
-}
+};
diff --git a/apps/docs/src/examples/button/appearance.tsx b/apps/docs/src/examples/button/appearance.tsx
index 91ed06d3..ee865fde 100644
--- a/apps/docs/src/examples/button/appearance.tsx
+++ b/apps/docs/src/examples/button/appearance.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { Button } from '@luke-ui/react/button';
 
-export default function Appearance() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" flexWrap="wrap" gap="400">
 			<Button appearance="solid">Save changes</Button>
@@ -9,4 +9,4 @@ export default function Appearance() {
 			<Button appearance="ghost">Save changes</Button>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/button/basic.tsx b/apps/docs/src/examples/button/basic.tsx
index 3595a40f..f197d5bc 100644
--- a/apps/docs/src/examples/button/basic.tsx
+++ b/apps/docs/src/examples/button/basic.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@luke-ui/react/button';
 
-export default function Basic() {
+export default () => {
 	return <Button>Save changes</Button>;
-}
+};
diff --git a/apps/docs/src/examples/button/disabled.tsx b/apps/docs/src/examples/button/disabled.tsx
index 2df9040c..dbe0747b 100644
--- a/apps/docs/src/examples/button/disabled.tsx
+++ b/apps/docs/src/examples/button/disabled.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@luke-ui/react/button';
 
-export default function Disabled() {
+export default () => {
 	return <Button isDisabled>Edit profile</Button>;
-}
+};
diff --git a/apps/docs/src/examples/button/icons.tsx b/apps/docs/src/examples/button/icons.tsx
index a03d9df8..188f69d7 100644
--- a/apps/docs/src/examples/button/icons.tsx
+++ b/apps/docs/src/examples/button/icons.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Button } from '@luke-ui/react/button';
 import { Icon } from '@luke-ui/react/icon';
 
-export default function Icons() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" flexWrap="wrap" gap="400">
 			<Button startIcon={<Icon name="add" />}>Add item</Button>
@@ -11,4 +11,4 @@ export default function Icons() {
 			</Button>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/button/pending.tsx b/apps/docs/src/examples/button/pending.tsx
index a092234f..3e1eb013 100644
--- a/apps/docs/src/examples/button/pending.tsx
+++ b/apps/docs/src/examples/button/pending.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@luke-ui/react/button';
 
-export default function Pending() {
+export default () => {
 	return <Button isPending>Save changes</Button>;
-}
+};
diff --git a/apps/docs/src/examples/button/sizes.tsx b/apps/docs/src/examples/button/sizes.tsx
index 953ca638..cbe197d0 100644
--- a/apps/docs/src/examples/button/sizes.tsx
+++ b/apps/docs/src/examples/button/sizes.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Button } from '@luke-ui/react/button';
 import { Icon } from '@luke-ui/react/icon';
 
-export default function Sizes() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" gap="400">
 			<Button size="small" startIcon={<Icon name="edit" />}>
@@ -13,4 +13,4 @@ export default function Sizes() {
 			</Button>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/button/tones.tsx b/apps/docs/src/examples/button/tones.tsx
index 8dba4c5c..4c766278 100644
--- a/apps/docs/src/examples/button/tones.tsx
+++ b/apps/docs/src/examples/button/tones.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { Button } from '@luke-ui/react/button';
 
-export default function Tones() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" flexWrap="wrap" gap="400">
 			<Button>Cancel</Button>
@@ -9,4 +9,4 @@ export default function Tones() {
 			<Button tone="danger">Delete account</Button>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/checkbox-primitive/basic.tsx b/apps/docs/src/examples/checkbox-primitive/basic.tsx
index 933798f1..6fed4f64 100644
--- a/apps/docs/src/examples/checkbox-primitive/basic.tsx
+++ b/apps/docs/src/examples/checkbox-primitive/basic.tsx
@@ -6,7 +6,7 @@ import {
 } from '@luke-ui/react/checkbox/primitive';
 import { FieldDescription, FieldError } from '@luke-ui/react/field/primitive';
 
-export default function Basic() {
+export default () => {
 	return (
 		<Checkbox isInvalid>
 			<CheckboxContent>
@@ -19,4 +19,4 @@ export default function Basic() {
 			<FieldError>Choose an option.</FieldError>
 		</Checkbox>
 	);
-}
+};
diff --git a/apps/docs/src/examples/checkbox/basic.tsx b/apps/docs/src/examples/checkbox/basic.tsx
index faa3ab7b..c4fd67ae 100644
--- a/apps/docs/src/examples/checkbox/basic.tsx
+++ b/apps/docs/src/examples/checkbox/basic.tsx
@@ -1,5 +1,5 @@
 import { Checkbox } from '@luke-ui/react/checkbox';
 
-export default function Basic() {
+export default () => {
 	return <Checkbox description="Receive updates by email.">Email notifications</Checkbox>;
-}
+};
diff --git a/apps/docs/src/examples/checkbox/controlled.tsx b/apps/docs/src/examples/checkbox/controlled.tsx
index 37dd2815..2077d3e1 100644
--- a/apps/docs/src/examples/checkbox/controlled.tsx
+++ b/apps/docs/src/examples/checkbox/controlled.tsx
@@ -1,7 +1,7 @@
 import { Checkbox } from '@luke-ui/react/checkbox';
 import { useState } from 'react';
 
-export default function Controlled() {
+export default () => {
 	const [isSelected, setIsSelected] = useState(false);
 
 	return (
@@ -9,4 +9,4 @@ export default function Controlled() {
 			Weekly summary
 		</Checkbox>
 	);
-}
+};
diff --git a/apps/docs/src/examples/checkbox/first-line-alignment.tsx b/apps/docs/src/examples/checkbox/first-line-alignment.tsx
index 9667e369..49512a07 100644
--- a/apps/docs/src/examples/checkbox/first-line-alignment.tsx
+++ b/apps/docs/src/examples/checkbox/first-line-alignment.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Checkbox } from '@luke-ui/react/checkbox';
 import { Text } from '@luke-ui/react/text';
 
-export default function FirstLineAlignment() {
+export default () => {
 	return (
 		<Box display="grid" gap="400" maxInlineSize="18rem">
 			<Text elementType="div" size="100">
@@ -13,4 +13,4 @@ export default function FirstLineAlignment() {
 			</Text>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/checkbox/sizes.tsx b/apps/docs/src/examples/checkbox/sizes.tsx
index 42defd7b..954dcedf 100644
--- a/apps/docs/src/examples/checkbox/sizes.tsx
+++ b/apps/docs/src/examples/checkbox/sizes.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { Checkbox } from '@luke-ui/react/checkbox';
 
-export default function Sizes() {
+export default () => {
 	return (
 		<Box display="grid" gap="300">
 			<Checkbox defaultSelected size="small">
@@ -15,4 +15,4 @@ export default function Sizes() {
 			</Checkbox>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/checkbox/states.tsx b/apps/docs/src/examples/checkbox/states.tsx
index 5260469e..e9e96367 100644
--- a/apps/docs/src/examples/checkbox/states.tsx
+++ b/apps/docs/src/examples/checkbox/states.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { Checkbox } from '@luke-ui/react/checkbox';
 
-export default function States() {
+export default () => {
 	return (
 		<Box display="grid" gap="300">
 			<Checkbox>Unchecked</Checkbox>
@@ -16,4 +16,4 @@ export default function States() {
 			</Checkbox>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/checkbox/validation.tsx b/apps/docs/src/examples/checkbox/validation.tsx
index 1916242a..a8ae1ee2 100644
--- a/apps/docs/src/examples/checkbox/validation.tsx
+++ b/apps/docs/src/examples/checkbox/validation.tsx
@@ -1,6 +1,6 @@
 import { Checkbox } from '@luke-ui/react/checkbox';
 
-export default function Validation() {
+export default () => {
 	return (
 		<Checkbox
 			description="We record the date you accepted."
@@ -11,4 +11,4 @@ export default function Validation() {
 			I accept the terms of service
 		</Checkbox>
 	);
-}
+};
diff --git a/apps/docs/src/examples/code/basic.tsx b/apps/docs/src/examples/code/basic.tsx
index a4e400b6..ec6d4f53 100644
--- a/apps/docs/src/examples/code/basic.tsx
+++ b/apps/docs/src/examples/code/basic.tsx
@@ -1,5 +1,5 @@
 import { Code } from '@luke-ui/react/code';
 
-export default function Basic() {
+export default () => {
 	return <Code>console.log()</Code>;
-}
+};
diff --git a/apps/docs/src/examples/code/in-context.tsx b/apps/docs/src/examples/code/in-context.tsx
index 92f6644f..b33cc55e 100644
--- a/apps/docs/src/examples/code/in-context.tsx
+++ b/apps/docs/src/examples/code/in-context.tsx
@@ -1,11 +1,11 @@
 import { Code } from '@luke-ui/react/code';
 import { Text } from '@luke-ui/react/text';
 
-export default function InContext() {
+export default () => {
 	return (
 		<Text>
 			Use the <Code>useTheme</Code> hook to access the current theme. The <Code>theme</Code> prop
 			supports <Code>"light"</Code>, <Code>"dark"</Code>, and <Code>"system"</Code>.
 		</Text>
 	);
-}
+};
diff --git a/apps/docs/src/examples/combobox-field/basic.tsx b/apps/docs/src/examples/combobox-field/basic.tsx
index f20cec1d..7ec021cc 100644
--- a/apps/docs/src/examples/combobox-field/basic.tsx
+++ b/apps/docs/src/examples/combobox-field/basic.tsx
@@ -11,7 +11,7 @@ const fruits: Array<Fruit> = [
 	{ id: 'grape', label: 'Grape' },
 ];
 
-export default function Basic() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="400" maxInlineSize="20rem">
 			<ComboboxField
@@ -25,4 +25,4 @@ export default function Basic() {
 			</ComboboxField>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/combobox-field/grouped.tsx b/apps/docs/src/examples/combobox-field/grouped.tsx
index df88a0c5..3a36f96e 100644
--- a/apps/docs/src/examples/combobox-field/grouped.tsx
+++ b/apps/docs/src/examples/combobox-field/grouped.tsx
@@ -1,7 +1,7 @@
 import { ComboboxField } from '@luke-ui/react/combobox-field';
 import { ComboboxItem, ComboboxSection } from '@luke-ui/react/combobox-field/primitive';
 
-export default function Grouped() {
+export default () => {
 	return (
 		<ComboboxField defaultValue="apple" label="Produce" name="produce" placeholder="Choose produce">
 			<ComboboxSection title="Fruit">
@@ -14,4 +14,4 @@ export default function Grouped() {
 			</ComboboxSection>
 		</ComboboxField>
 	);
-}
+};
diff --git a/apps/docs/src/examples/combobox-field/required.tsx b/apps/docs/src/examples/combobox-field/required.tsx
index 5c37456f..f83ac2b2 100644
--- a/apps/docs/src/examples/combobox-field/required.tsx
+++ b/apps/docs/src/examples/combobox-field/required.tsx
@@ -8,7 +8,7 @@ const countries = [
 	{ id: 'united-states', label: 'United States' },
 ];
 
-export default function Required() {
+export default () => {
 	return (
 		<ComboboxField
 			defaultItems={countries}
@@ -22,4 +22,4 @@ export default function Required() {
 			{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
 		</ComboboxField>
 	);
-}
+};
diff --git a/apps/docs/src/examples/combobox-field/validation.tsx b/apps/docs/src/examples/combobox-field/validation.tsx
index 91d2fcac..0f1ccded 100644
--- a/apps/docs/src/examples/combobox-field/validation.tsx
+++ b/apps/docs/src/examples/combobox-field/validation.tsx
@@ -8,7 +8,7 @@ const countries = [
 	{ id: 'united-states', label: 'United States' },
 ];
 
-export default function Validation() {
+export default () => {
 	return (
 		<ComboboxField
 			defaultItems={countries}
@@ -21,4 +21,4 @@ export default function Validation() {
 			{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
 		</ComboboxField>
 	);
-}
+};
diff --git a/apps/docs/src/examples/combobox-primitive/basic.tsx b/apps/docs/src/examples/combobox-primitive/basic.tsx
index 2897af16..0a2bdb5f 100644
--- a/apps/docs/src/examples/combobox-primitive/basic.tsx
+++ b/apps/docs/src/examples/combobox-primitive/basic.tsx
@@ -8,7 +8,7 @@ import {
 	ComboboxTrigger,
 } from '@luke-ui/react/combobox-field/primitive';
 
-export default function Basic() {
+export default () => {
 	return (
 		<ComboboxRoot aria-label="Country">
 			<ComboboxInputGroup>
@@ -23,4 +23,4 @@ export default function Basic() {
 			</ComboboxPopover>
 		</ComboboxRoot>
 	);
-}
+};
diff --git a/apps/docs/src/examples/composition/amount-field.tsx b/apps/docs/src/examples/composition/amount-field.tsx
index 75206059..0bb22c85 100644
--- a/apps/docs/src/examples/composition/amount-field.tsx
+++ b/apps/docs/src/examples/composition/amount-field.tsx
@@ -1,7 +1,7 @@
 import { Field } from '@luke-ui/react/field/primitive';
 import { InputGroup, InputGroupInput, InputGroupPrefix } from '@luke-ui/react/text-field/primitive';
 
-export default function AmountField() {
+export default () => {
 	return (
 		<Field description="Enter an amount in dollars." label="Amount">
 			<InputGroup>
@@ -10,4 +10,4 @@ export default function AmountField() {
 			</InputGroup>
 		</Field>
 	);
-}
+};
diff --git a/apps/docs/src/examples/composition/animated-button.tsx b/apps/docs/src/examples/composition/animated-button.tsx
index 38731262..d4d58ac2 100644
--- a/apps/docs/src/examples/composition/animated-button.tsx
+++ b/apps/docs/src/examples/composition/animated-button.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@luke-ui/react/button/primitive';
 import { mergeProps } from '@luke-ui/react/utils';
 
-export default function AnimatedButton() {
+export default () => {
 	return (
 		<Button
 			render={(domProps, { isHovered, isPressed }) => {
@@ -24,4 +24,4 @@ export default function AnimatedButton() {
 			Continue
 		</Button>
 	);
-}
+};
diff --git a/apps/docs/src/examples/em/basic.tsx b/apps/docs/src/examples/em/basic.tsx
index fa1086c7..757b9ba8 100644
--- a/apps/docs/src/examples/em/basic.tsx
+++ b/apps/docs/src/examples/em/basic.tsx
@@ -1,10 +1,10 @@
 import { Em } from '@luke-ui/react/em';
 import { Text } from '@luke-ui/react/text';
 
-export default function Basic() {
+export default () => {
 	return (
 		<Text>
 			We <Em>had</Em> to do something about it.
 		</Text>
 	);
-}
+};
diff --git a/apps/docs/src/examples/emoji/basic.tsx b/apps/docs/src/examples/emoji/basic.tsx
index e12418bb..31af56b7 100644
--- a/apps/docs/src/examples/emoji/basic.tsx
+++ b/apps/docs/src/examples/emoji/basic.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Emoji } from '@luke-ui/react/emoji';
 import { Text } from '@luke-ui/react/text';
 
-export default function Basic() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="300">
 			<Text>
@@ -11,4 +11,4 @@ export default function Basic() {
 			<Emoji emoji="🚀" label="Rocket" size="500" />
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/field-primitive/basic.tsx b/apps/docs/src/examples/field-primitive/basic.tsx
index 2e82b5df..4d9d26bd 100644
--- a/apps/docs/src/examples/field-primitive/basic.tsx
+++ b/apps/docs/src/examples/field-primitive/basic.tsx
@@ -1,7 +1,7 @@
 import { Field, FieldDescription, FieldLabel } from '@luke-ui/react/field/primitive';
 import { InputGroup, InputGroupInput } from '@luke-ui/react/text-field/primitive';
 
-export default function Basic() {
+export default () => {
 	return (
 		<Field>
 			<FieldLabel htmlFor="work-email">Email</FieldLabel>
@@ -16,4 +16,4 @@ export default function Basic() {
 			<FieldDescription id="work-email-description">Use your work email.</FieldDescription>
 		</Field>
 	);
-}
+};
diff --git a/apps/docs/src/examples/forms/build-a-form.tsx b/apps/docs/src/examples/forms/build-a-form.tsx
index 15c6eba5..45990d5d 100644
--- a/apps/docs/src/examples/forms/build-a-form.tsx
+++ b/apps/docs/src/examples/forms/build-a-form.tsx
@@ -5,7 +5,7 @@ import { TextField } from '@luke-ui/react/text-field';
 import type { FormEvent } from 'react';
 import { useState } from 'react';
 
-export default function BuildAForm() {
+export default () => {
 	const [submittedEmail, setSubmittedEmail] = useState('');
 
 	function handleSubmit(event: FormEvent<HTMLFormElement>) {
@@ -37,4 +37,4 @@ export default function BuildAForm() {
 			{submittedEmail ? <Text elementType="p">Submitted: {submittedEmail}</Text> : null}
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/forms/constraint-validation.tsx b/apps/docs/src/examples/forms/constraint-validation.tsx
index d092eb14..cd3950d5 100644
--- a/apps/docs/src/examples/forms/constraint-validation.tsx
+++ b/apps/docs/src/examples/forms/constraint-validation.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Button } from '@luke-ui/react/button';
 import { TextField } from '@luke-ui/react/text-field';
 
-export default function ConstraintValidation() {
+export default () => {
 	return (
 		<form>
 			<Box display="flex" flexDirection="column" gap="400" maxInlineSize="20rem">
@@ -13,4 +13,4 @@ export default function ConstraintValidation() {
 			</Box>
 		</form>
 	);
-}
+};
diff --git a/apps/docs/src/examples/forms/validation.tsx b/apps/docs/src/examples/forms/validation.tsx
index 2dd01da4..23928cf0 100644
--- a/apps/docs/src/examples/forms/validation.tsx
+++ b/apps/docs/src/examples/forms/validation.tsx
@@ -16,7 +16,7 @@ const countries = [
 
 type Errors = { country?: string; email?: string; terms?: string };
 
-export default function Validation() {
+export default () => {
 	const [errors, setErrors] = useState<Errors>({});
 
 	function handleSubmit(event: FormEvent<HTMLFormElement>) {
@@ -63,4 +63,4 @@ export default function Validation() {
 			</Box>
 		</form>
 	);
-}
+};
diff --git a/apps/docs/src/examples/heading/automatic-leveling.tsx b/apps/docs/src/examples/heading/automatic-leveling.tsx
index c832da8b..f40e0706 100644
--- a/apps/docs/src/examples/heading/automatic-leveling.tsx
+++ b/apps/docs/src/examples/heading/automatic-leveling.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Heading } from '@luke-ui/react/heading';
 import { HeadingLevels } from '@luke-ui/react/heading-context';
 
-export default function AutomaticLeveling() {
+export default () => {
 	return (
 		<HeadingLevels base={1}>
 			<Box display="flex" flexDirection="column" gap="300">
@@ -16,4 +16,4 @@ export default function AutomaticLeveling() {
 			</Box>
 		</HeadingLevels>
 	);
-}
+};
diff --git a/apps/docs/src/examples/heading/basic.tsx b/apps/docs/src/examples/heading/basic.tsx
index 5332b6dd..8a5a4657 100644
--- a/apps/docs/src/examples/heading/basic.tsx
+++ b/apps/docs/src/examples/heading/basic.tsx
@@ -1,5 +1,5 @@
 import { Heading } from '@luke-ui/react/heading';
 
-export default function Basic() {
+export default () => {
 	return <Heading level={2}>Account settings</Heading>;
-}
+};
diff --git a/apps/docs/src/examples/heading/typography.tsx b/apps/docs/src/examples/heading/typography.tsx
index 52c0f59a..423723b3 100644
--- a/apps/docs/src/examples/heading/typography.tsx
+++ b/apps/docs/src/examples/heading/typography.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { Heading } from '@luke-ui/react/heading';
 
-export default function Typography() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="300">
 			<Heading level={2} size="900">
@@ -15,4 +15,4 @@ export default function Typography() {
 			</Heading>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/icon-button/appearance.tsx b/apps/docs/src/examples/icon-button/appearance.tsx
index 3607f0ed..7dbf8206 100644
--- a/apps/docs/src/examples/icon-button/appearance.tsx
+++ b/apps/docs/src/examples/icon-button/appearance.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { IconButton } from '@luke-ui/react/icon-button';
 
-export default function Appearance() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" flexWrap="wrap" gap="400">
 			<IconButton appearance="solid" aria-label="Open documentation" icon="bookOpen" />
@@ -9,4 +9,4 @@ export default function Appearance() {
 			<IconButton appearance="ghost" aria-label="Open documentation" icon="bookOpen" />
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/icon-button/basic.tsx b/apps/docs/src/examples/icon-button/basic.tsx
index 4ca6ac10..0d7daec0 100644
--- a/apps/docs/src/examples/icon-button/basic.tsx
+++ b/apps/docs/src/examples/icon-button/basic.tsx
@@ -1,5 +1,5 @@
 import { IconButton } from '@luke-ui/react/icon-button';
 
-export default function Basic() {
+export default () => {
 	return <IconButton aria-label="Add item" icon="add" />;
-}
+};
diff --git a/apps/docs/src/examples/icon-button/disabled.tsx b/apps/docs/src/examples/icon-button/disabled.tsx
index 4f63cfdb..55b242c3 100644
--- a/apps/docs/src/examples/icon-button/disabled.tsx
+++ b/apps/docs/src/examples/icon-button/disabled.tsx
@@ -1,5 +1,5 @@
 import { IconButton } from '@luke-ui/react/icon-button';
 
-export default function Disabled() {
+export default () => {
 	return <IconButton aria-label="Search" icon="search" isDisabled />;
-}
+};
diff --git a/apps/docs/src/examples/icon-button/pending.tsx b/apps/docs/src/examples/icon-button/pending.tsx
index d08d6ed4..7c8eccbd 100644
--- a/apps/docs/src/examples/icon-button/pending.tsx
+++ b/apps/docs/src/examples/icon-button/pending.tsx
@@ -1,5 +1,5 @@
 import { IconButton } from '@luke-ui/react/icon-button';
 
-export default function Pending() {
+export default () => {
 	return <IconButton aria-label="Saving changes" icon="check" isPending />;
-}
+};
diff --git a/apps/docs/src/examples/icon-button/size.tsx b/apps/docs/src/examples/icon-button/size.tsx
index 1fa8da41..8625f5ec 100644
--- a/apps/docs/src/examples/icon-button/size.tsx
+++ b/apps/docs/src/examples/icon-button/size.tsx
@@ -1,11 +1,11 @@
 import { Box } from '@luke-ui/react/box';
 import { IconButton } from '@luke-ui/react/icon-button';
 
-export default function Size() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" gap="400">
 			<IconButton aria-label="Search" icon="search" size="small" />
 			<IconButton aria-label="Search" icon="search" />
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/icon-button/tones.tsx b/apps/docs/src/examples/icon-button/tones.tsx
index 3f0d5161..4478fc63 100644
--- a/apps/docs/src/examples/icon-button/tones.tsx
+++ b/apps/docs/src/examples/icon-button/tones.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { IconButton } from '@luke-ui/react/icon-button';
 
-export default function Tones() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" flexWrap="wrap" gap="400">
 			<IconButton aria-label="Search" icon="search" />
@@ -9,4 +9,4 @@ export default function Tones() {
 			<IconButton aria-label="Delete item" icon="delete" tone="danger" />
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/icon/basic.tsx b/apps/docs/src/examples/icon/basic.tsx
index eda7b749..a8ae31d9 100644
--- a/apps/docs/src/examples/icon/basic.tsx
+++ b/apps/docs/src/examples/icon/basic.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@luke-ui/react/icon';
 
-export default function Basic() {
+export default () => {
 	return <Icon name="search" />;
-}
+};
diff --git a/apps/docs/src/examples/icon/colours.tsx b/apps/docs/src/examples/icon/colours.tsx
index ff334e91..cb8e1602 100644
--- a/apps/docs/src/examples/icon/colours.tsx
+++ b/apps/docs/src/examples/icon/colours.tsx
@@ -3,7 +3,7 @@ import { Icon } from '@luke-ui/react/icon';
 import { Text } from '@luke-ui/react/text';
 import type { PropsWithChildren } from 'react';
 
-export default function Colours() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" gap="400">
 			<FlexCol>
@@ -32,7 +32,7 @@ export default function Colours() {
 			</FlexCol>
 		</Box>
 	);
-}
+};
 
 function FlexCol({ children }: PropsWithChildren) {
 	return (
diff --git a/apps/docs/src/examples/icon/custom.tsx b/apps/docs/src/examples/icon/custom.tsx
index 03f400a6..d1edcee6 100644
--- a/apps/docs/src/examples/icon/custom.tsx
+++ b/apps/docs/src/examples/icon/custom.tsx
@@ -6,6 +6,6 @@ const HeartIcon = createIcon({
 	),
 });
 
-export default function Custom() {
+export default () => {
 	return <HeartIcon size="small" title="Add to favourites" />;
-}
+};
diff --git a/apps/docs/src/examples/icon/decorative.tsx b/apps/docs/src/examples/icon/decorative.tsx
index b38b4165..2bb89450 100644
--- a/apps/docs/src/examples/icon/decorative.tsx
+++ b/apps/docs/src/examples/icon/decorative.tsx
@@ -2,11 +2,11 @@ import { Box } from '@luke-ui/react/box';
 import { Icon } from '@luke-ui/react/icon';
 import { Text } from '@luke-ui/react/text';
 
-export default function Decorative() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" gap="100">
 			<Text>Continue</Text>
 			<Icon aria-hidden name="externalLink" size="xsmall" />
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/icon/informative.tsx b/apps/docs/src/examples/icon/informative.tsx
index de859b75..3fbb3cc4 100644
--- a/apps/docs/src/examples/icon/informative.tsx
+++ b/apps/docs/src/examples/icon/informative.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@luke-ui/react/icon';
 
-export default function Informative() {
+export default () => {
 	return <Icon name="checkCircle" title="Payment complete" />;
-}
+};
diff --git a/apps/docs/src/examples/icon/size-context.tsx b/apps/docs/src/examples/icon/size-context.tsx
index d4e5f312..eacedc7e 100644
--- a/apps/docs/src/examples/icon/size-context.tsx
+++ b/apps/docs/src/examples/icon/size-context.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Icon } from '@luke-ui/react/icon';
 import { IconSizeProvider } from '@luke-ui/react/icon-size-context';
 
-export default function SizeContext() {
+export default () => {
 	return (
 		<IconSizeProvider size="small">
 			<Box alignItems="center" display="flex" gap="400">
@@ -11,4 +11,4 @@ export default function SizeContext() {
 			</Box>
 		</IconSizeProvider>
 	);
-}
+};
diff --git a/apps/docs/src/examples/icon/sizes.tsx b/apps/docs/src/examples/icon/sizes.tsx
index 6e4f71c0..1a42e900 100644
--- a/apps/docs/src/examples/icon/sizes.tsx
+++ b/apps/docs/src/examples/icon/sizes.tsx
@@ -3,7 +3,7 @@ import { Icon } from '@luke-ui/react/icon';
 import { Text } from '@luke-ui/react/text';
 import type { PropsWithChildren } from 'react';
 
-export default function Sizes() {
+export default () => {
 	return (
 		<Box alignItems="flex-end" display="flex" gap="400">
 			<FlexCol>
@@ -24,7 +24,7 @@ export default function Sizes() {
 			</FlexCol>
 		</Box>
 	);
-}
+};
 
 function FlexCol({ children }: PropsWithChildren) {
 	return (
diff --git a/apps/docs/src/examples/input-group-primitive/basic.tsx b/apps/docs/src/examples/input-group-primitive/basic.tsx
index b0bde335..fb864964 100644
--- a/apps/docs/src/examples/input-group-primitive/basic.tsx
+++ b/apps/docs/src/examples/input-group-primitive/basic.tsx
@@ -5,7 +5,7 @@ import {
 	InputGroupSuffix,
 } from '@luke-ui/react/text-field/primitive';
 
-export default function Basic() {
+export default () => {
 	return (
 		<InputGroup>
 			<InputGroupPrefix>$</InputGroupPrefix>
@@ -13,4 +13,4 @@ export default function Basic() {
 			<InputGroupSuffix>USD</InputGroupSuffix>
 		</InputGroup>
 	);
-}
+};
diff --git a/apps/docs/src/examples/kbd/basic.tsx b/apps/docs/src/examples/kbd/basic.tsx
index 34883e0c..56f7ba11 100644
--- a/apps/docs/src/examples/kbd/basic.tsx
+++ b/apps/docs/src/examples/kbd/basic.tsx
@@ -1,10 +1,10 @@
 import { Kbd } from '@luke-ui/react/kbd';
 import { Text } from '@luke-ui/react/text';
 
-export default function Basic() {
+export default () => {
 	return (
 		<Text>
 			Press <Kbd>Shift + Tab</Kbd> to move to the previous control.
 		</Text>
 	);
-}
+};
diff --git a/apps/docs/src/examples/link/basic.tsx b/apps/docs/src/examples/link/basic.tsx
index f770abc9..208b34be 100644
--- a/apps/docs/src/examples/link/basic.tsx
+++ b/apps/docs/src/examples/link/basic.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@luke-ui/react/link';
 
-export default function Basic() {
+export default () => {
 	return <Link href="#help-centre">Help centre</Link>;
-}
+};
diff --git a/apps/docs/src/examples/link/disabled.tsx b/apps/docs/src/examples/link/disabled.tsx
index 859c0707..b99ab9c4 100644
--- a/apps/docs/src/examples/link/disabled.tsx
+++ b/apps/docs/src/examples/link/disabled.tsx
@@ -1,9 +1,9 @@
 import { Link } from '@luke-ui/react/link';
 
-export default function Disabled() {
+export default () => {
 	return (
 		<Link href="#archived-report" isDisabled>
 			View archived report
 		</Link>
 	);
-}
+};
diff --git a/apps/docs/src/examples/link/standalone.tsx b/apps/docs/src/examples/link/standalone.tsx
index cf7917c8..270e9067 100644
--- a/apps/docs/src/examples/link/standalone.tsx
+++ b/apps/docs/src/examples/link/standalone.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Link } from '@luke-ui/react/link';
 import { Text } from '@luke-ui/react/text';
 
-export default function Standalone() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="400">
 			<Text elementType="p">
@@ -13,4 +13,4 @@ export default function Standalone() {
 			</Link>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/link/tones.tsx b/apps/docs/src/examples/link/tones.tsx
index 9cb4b9dc..970804fb 100644
--- a/apps/docs/src/examples/link/tones.tsx
+++ b/apps/docs/src/examples/link/tones.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { Link } from '@luke-ui/react/link';
 
-export default function Tones() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" flexWrap="wrap" gap="400">
 			<Link href="#view-report">View report</Link>
@@ -10,4 +10,4 @@ export default function Tones() {
 			</Link>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/loading-skeleton/basic.tsx b/apps/docs/src/examples/loading-skeleton/basic.tsx
index b2bbef2d..4ed847c6 100644
--- a/apps/docs/src/examples/loading-skeleton/basic.tsx
+++ b/apps/docs/src/examples/loading-skeleton/basic.tsx
@@ -4,7 +4,7 @@ import { LoadingSkeleton } from '@luke-ui/react/loading-skeleton';
 import { Text } from '@luke-ui/react/text';
 import { useState } from 'react';
 
-export default function Basic() {
+export default () => {
 	const [isLoading, setIsLoading] = useState(true);
 
 	return (
@@ -19,4 +19,4 @@ export default function Basic() {
 			</Text>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/loading-skeleton/border-radius.tsx b/apps/docs/src/examples/loading-skeleton/border-radius.tsx
index 325ae473..454dfc05 100644
--- a/apps/docs/src/examples/loading-skeleton/border-radius.tsx
+++ b/apps/docs/src/examples/loading-skeleton/border-radius.tsx
@@ -4,7 +4,7 @@ import { LoadingSkeleton } from '@luke-ui/react/loading-skeleton';
 import { TextField } from '@luke-ui/react/text-field';
 import { useState } from 'react';
 
-export default function BorderRadius() {
+export default () => {
 	const [isLoading, setIsLoading] = useState(true);
 
 	return (
@@ -17,4 +17,4 @@ export default function BorderRadius() {
 			</Checkbox>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/loading-skeleton/custom-dimensions.tsx b/apps/docs/src/examples/loading-skeleton/custom-dimensions.tsx
index d7ec86e8..f3af2f61 100644
--- a/apps/docs/src/examples/loading-skeleton/custom-dimensions.tsx
+++ b/apps/docs/src/examples/loading-skeleton/custom-dimensions.tsx
@@ -1,10 +1,10 @@
 import { Box } from '@luke-ui/react/box';
 import { LoadingSkeleton } from '@luke-ui/react/loading-skeleton';
 
-export default function CustomDimensions() {
+export default () => {
 	return (
 		<LoadingSkeleton>
 			<Box blockSize="3rem" inlineSize="3rem" style={{ borderRadius: '9999px' }} />
 		</LoadingSkeleton>
 	);
-}
+};
diff --git a/apps/docs/src/examples/loading-skeleton/element.tsx b/apps/docs/src/examples/loading-skeleton/element.tsx
index 04f27183..3c0c9252 100644
--- a/apps/docs/src/examples/loading-skeleton/element.tsx
+++ b/apps/docs/src/examples/loading-skeleton/element.tsx
@@ -1,9 +1,9 @@
 import { LoadingSkeleton } from '@luke-ui/react/loading-skeleton';
 
-export default function ElementSkeleton() {
+export default () => {
 	return (
 		<ul>
 			<LoadingSkeleton elementType="li">List item</LoadingSkeleton>
 		</ul>
 	);
-}
+};
diff --git a/apps/docs/src/examples/loading-skeleton/provider.tsx b/apps/docs/src/examples/loading-skeleton/provider.tsx
index 5ec32595..2be0a4fd 100644
--- a/apps/docs/src/examples/loading-skeleton/provider.tsx
+++ b/apps/docs/src/examples/loading-skeleton/provider.tsx
@@ -4,7 +4,7 @@ import { LoadingSkeleton, LoadingSkeletonProvider } from '@luke-ui/react/loading
 import { Text } from '@luke-ui/react/text';
 import { useState } from 'react';
 
-export default function ProviderSkeleton() {
+export default () => {
 	const [isLoading, setIsLoading] = useState(true);
 
 	return (
@@ -42,4 +42,4 @@ export default function ProviderSkeleton() {
 			</Checkbox>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/loading-spinner/basic.tsx b/apps/docs/src/examples/loading-spinner/basic.tsx
index c2ed2a8f..01351c9e 100644
--- a/apps/docs/src/examples/loading-spinner/basic.tsx
+++ b/apps/docs/src/examples/loading-spinner/basic.tsx
@@ -1,5 +1,5 @@
 import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
 
-export default function Basic() {
+export default () => {
 	return <LoadingSpinner aria-label="Loading account settings" />;
-}
+};
diff --git a/apps/docs/src/examples/loading-spinner/button.tsx b/apps/docs/src/examples/loading-spinner/button.tsx
index cfbed98c..1cafd077 100644
--- a/apps/docs/src/examples/loading-spinner/button.tsx
+++ b/apps/docs/src/examples/loading-spinner/button.tsx
@@ -2,7 +2,7 @@ import { Button } from '@luke-ui/react/button';
 import { Icon } from '@luke-ui/react/icon';
 import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
 
-export default function WithButton() {
+export default () => {
 	return (
 		<Button
 			isDisabled
@@ -15,4 +15,4 @@ export default function WithButton() {
 			Save changes
 		</Button>
 	);
-}
+};
diff --git a/apps/docs/src/examples/loading-spinner/children.tsx b/apps/docs/src/examples/loading-spinner/children.tsx
index ca1f474c..9d2b1d1f 100644
--- a/apps/docs/src/examples/loading-spinner/children.tsx
+++ b/apps/docs/src/examples/loading-spinner/children.tsx
@@ -4,7 +4,7 @@ import { Checkbox } from '@luke-ui/react/checkbox';
 import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
 import { useState } from 'react';
 
-export default function Children() {
+export default () => {
 	const [isLoading, setIsLoading] = useState(true);
 
 	return (
@@ -17,4 +17,4 @@ export default function Children() {
 			</Checkbox>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/loading-spinner/colors.tsx b/apps/docs/src/examples/loading-spinner/colors.tsx
index 9e14dd27..a29b2a06 100644
--- a/apps/docs/src/examples/loading-spinner/colors.tsx
+++ b/apps/docs/src/examples/loading-spinner/colors.tsx
@@ -1,11 +1,11 @@
 import { Box } from '@luke-ui/react/box';
 import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
 
-export default function Colors() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" flexWrap="wrap" gap="400">
 			<LoadingSpinner aria-label="Loading content" />
 			<LoadingSpinner aria-label="Loading highlighted content" color="accent" />
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/loading-spinner/sizes.tsx b/apps/docs/src/examples/loading-spinner/sizes.tsx
index f3887216..26ec3c18 100644
--- a/apps/docs/src/examples/loading-spinner/sizes.tsx
+++ b/apps/docs/src/examples/loading-spinner/sizes.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
 
-export default function Sizes() {
+export default () => {
 	return (
 		<Box alignItems="center" display="flex" gap="400">
 			<LoadingSpinner aria-label="Loading inline content" size="xsmall" />
@@ -10,4 +10,4 @@ export default function Sizes() {
 			<LoadingSpinner aria-label="Loading prominent content" size="large" />
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/numeral/basic.tsx b/apps/docs/src/examples/numeral/basic.tsx
index 0f5056fc..3512b061 100644
--- a/apps/docs/src/examples/numeral/basic.tsx
+++ b/apps/docs/src/examples/numeral/basic.tsx
@@ -1,5 +1,5 @@
 import { Numeral } from '@luke-ui/react/numeral';
 
-export default function Basic() {
+export default () => {
 	return <Numeral value={12_345.67} />;
-}
+};
diff --git a/apps/docs/src/examples/numeral/compact.tsx b/apps/docs/src/examples/numeral/compact.tsx
index 4e3d72fa..48919afd 100644
--- a/apps/docs/src/examples/numeral/compact.tsx
+++ b/apps/docs/src/examples/numeral/compact.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Numeral } from '@luke-ui/react/numeral';
 import { Text } from '@luke-ui/react/text';
 
-export default function Compact() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="200">
 			<Text>
@@ -13,4 +13,4 @@ export default function Compact() {
 			</Text>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/numeral/formats.tsx b/apps/docs/src/examples/numeral/formats.tsx
index 7a2823f2..f47a88a7 100644
--- a/apps/docs/src/examples/numeral/formats.tsx
+++ b/apps/docs/src/examples/numeral/formats.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Numeral } from '@luke-ui/react/numeral';
 import { Text } from '@luke-ui/react/text';
 
-export default function Formats() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="200">
 			<Text>
@@ -19,4 +19,4 @@ export default function Formats() {
 			</Text>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/numeral/precision.tsx b/apps/docs/src/examples/numeral/precision.tsx
index 957dd879..db8e92b5 100644
--- a/apps/docs/src/examples/numeral/precision.tsx
+++ b/apps/docs/src/examples/numeral/precision.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Numeral } from '@luke-ui/react/numeral';
 import { Text } from '@luke-ui/react/text';
 
-export default function Precision() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="200">
 			<Text>
@@ -13,4 +13,4 @@ export default function Precision() {
 			</Text>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/overview/concentric-radius.tsx b/apps/docs/src/examples/overview/concentric-radius.tsx
index 713194c9..c070e662 100644
--- a/apps/docs/src/examples/overview/concentric-radius.tsx
+++ b/apps/docs/src/examples/overview/concentric-radius.tsx
@@ -3,7 +3,7 @@ import { Text } from '@luke-ui/react/text';
 import { deriveConcentricRadius, vars } from '@luke-ui/react/theme';
 import { DecorativeBox } from './decorative-box.js';
 
-export default function ConcentricRadiusExample() {
+export default () => {
 	const controlGap = vars.space[200];
 
 	return (
@@ -27,4 +27,4 @@ export default function ConcentricRadiusExample() {
 			<Text size="100">Outer radius from inner radius + gap</Text>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/overview/depth.tsx b/apps/docs/src/examples/overview/depth.tsx
index 4b67d492..d20f1dd6 100644
--- a/apps/docs/src/examples/overview/depth.tsx
+++ b/apps/docs/src/examples/overview/depth.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Text } from '@luke-ui/react/text';
 import { vars } from '@luke-ui/react/theme';
 
-export default function DepthExample() {
+export default () => {
 	return (
 		<Box
 			display="grid"
@@ -31,4 +31,4 @@ export default function DepthExample() {
 			))}
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/overview/radius-roles.tsx b/apps/docs/src/examples/overview/radius-roles.tsx
index 4ded480a..968c72c2 100644
--- a/apps/docs/src/examples/overview/radius-roles.tsx
+++ b/apps/docs/src/examples/overview/radius-roles.tsx
@@ -11,7 +11,7 @@ const radiusRoles = [
 	{ label: 'Full', value: vars.radius.full },
 ] as const;
 
-export default function RadiusRolesExample() {
+export default () => {
 	return (
 		<Box
 			display="grid"
@@ -41,4 +41,4 @@ export default function RadiusRolesExample() {
 			))}
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/overview/role-colours.tsx b/apps/docs/src/examples/overview/role-colours.tsx
index a2ed1990..d104a9f3 100644
--- a/apps/docs/src/examples/overview/role-colours.tsx
+++ b/apps/docs/src/examples/overview/role-colours.tsx
@@ -17,7 +17,7 @@ type Role = keyof typeof roles;
 
 const modes = ['light', 'dark'] as const;
 
-export default function RoleColoursExample() {
+export default () => {
 	const [role, setRole] = useState<Role>('warning');
 
 	return (
@@ -106,4 +106,4 @@ export default function RoleColoursExample() {
 			</Box>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/overview/spacing-scale.tsx b/apps/docs/src/examples/overview/spacing-scale.tsx
index 92a54867..5b802a1b 100644
--- a/apps/docs/src/examples/overview/spacing-scale.tsx
+++ b/apps/docs/src/examples/overview/spacing-scale.tsx
@@ -3,7 +3,7 @@ import { Text } from '@luke-ui/react/text';
 import { spaceScale, vars } from '@luke-ui/react/theme';
 import { Fragment } from 'react';
 
-export default function SpacingScaleExample() {
+export default () => {
 	return (
 		<Box
 			alignItems="center"
@@ -31,4 +31,4 @@ export default function SpacingScaleExample() {
 			))}
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/overview/typography-components.tsx b/apps/docs/src/examples/overview/typography-components.tsx
index bbbe9634..df0824e8 100644
--- a/apps/docs/src/examples/overview/typography-components.tsx
+++ b/apps/docs/src/examples/overview/typography-components.tsx
@@ -2,11 +2,11 @@ import { Box } from '@luke-ui/react/box';
 import { Heading } from '@luke-ui/react/heading';
 import { Text } from '@luke-ui/react/text';
 
-export default function TypographyComponents() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="300">
 			<Heading>Account settings</Heading>
 			<Text>Choose how this account appears to others.</Text>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/quote/basic.tsx b/apps/docs/src/examples/quote/basic.tsx
index 19569808..949f645e 100644
--- a/apps/docs/src/examples/quote/basic.tsx
+++ b/apps/docs/src/examples/quote/basic.tsx
@@ -1,10 +1,10 @@
 import { Quote } from '@luke-ui/react/quote';
 import { Text } from '@luke-ui/react/text';
 
-export default function Basic() {
+export default () => {
 	return (
 		<Text>
 			She described the interface as <Quote>calm and clear</Quote>.
 		</Text>
 	);
-}
+};
diff --git a/apps/docs/src/examples/strong/basic.tsx b/apps/docs/src/examples/strong/basic.tsx
index d3ecb29a..a7d9029b 100644
--- a/apps/docs/src/examples/strong/basic.tsx
+++ b/apps/docs/src/examples/strong/basic.tsx
@@ -1,10 +1,10 @@
 import { Strong } from '@luke-ui/react/strong';
 import { Text } from '@luke-ui/react/text';
 
-export default function Basic() {
+export default () => {
 	return (
 		<Text>
 			<Strong>Save your recovery code</Strong> before continuing.
 		</Text>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text-field/basic.tsx b/apps/docs/src/examples/text-field/basic.tsx
index 1e3936fa..2feae301 100644
--- a/apps/docs/src/examples/text-field/basic.tsx
+++ b/apps/docs/src/examples/text-field/basic.tsx
@@ -1,6 +1,6 @@
 import { TextField } from '@luke-ui/react/text-field';
 
-export default function Basic() {
+export default () => {
 	return (
 		<TextField
 			description="Use the address you check most often."
@@ -9,4 +9,4 @@ export default function Basic() {
 			placeholder="you@example.com"
 		/>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text-field/prefix-and-suffix.tsx b/apps/docs/src/examples/text-field/prefix-and-suffix.tsx
index ef48a9f5..ec183df9 100644
--- a/apps/docs/src/examples/text-field/prefix-and-suffix.tsx
+++ b/apps/docs/src/examples/text-field/prefix-and-suffix.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Icon } from '@luke-ui/react/icon';
 import { TextField } from '@luke-ui/react/text-field';
 
-export default function PrefixAndSuffix() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="400" maxInlineSize="20rem">
 			<TextField
@@ -15,4 +15,4 @@ export default function PrefixAndSuffix() {
 			<TextField label="Budget" name="budget" placeholder="0.00" suffix="AUD" />
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text-field/required.tsx b/apps/docs/src/examples/text-field/required.tsx
index 1ad7ce3a..49447fb0 100644
--- a/apps/docs/src/examples/text-field/required.tsx
+++ b/apps/docs/src/examples/text-field/required.tsx
@@ -1,11 +1,11 @@
 import { Box } from '@luke-ui/react/box';
 import { TextField } from '@luke-ui/react/text-field';
 
-export default function Required() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="400" maxInlineSize="20rem">
 			<TextField isRequired label="First name" name="firstName" necessityIndicator="icon" />
 			<TextField isRequired label="Last name" name="lastName" necessityIndicator="label" />
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text-field/sizes.tsx b/apps/docs/src/examples/text-field/sizes.tsx
index eadf1b3d..bd0f3db3 100644
--- a/apps/docs/src/examples/text-field/sizes.tsx
+++ b/apps/docs/src/examples/text-field/sizes.tsx
@@ -1,11 +1,11 @@
 import { Box } from '@luke-ui/react/box';
 import { TextField } from '@luke-ui/react/text-field';
 
-export default function Sizes() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="400" maxInlineSize="20rem">
 			<TextField label="Search" name="smallSearch" placeholder="Search" size="small" />
 			<TextField label="Search" name="mediumSearch" placeholder="Search" size="medium" />
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text-field/validation.tsx b/apps/docs/src/examples/text-field/validation.tsx
index d9d9df68..8a48fef5 100644
--- a/apps/docs/src/examples/text-field/validation.tsx
+++ b/apps/docs/src/examples/text-field/validation.tsx
@@ -1,6 +1,6 @@
 import { TextField } from '@luke-ui/react/text-field';
 
-export default function Validation() {
+export default () => {
 	return (
 		<TextField
 			defaultValue="jordan.example"
@@ -10,4 +10,4 @@ export default function Validation() {
 			name="emailAddress"
 		/>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text/alignment.tsx b/apps/docs/src/examples/text/alignment.tsx
index b7857dba..a27bbc55 100644
--- a/apps/docs/src/examples/text/alignment.tsx
+++ b/apps/docs/src/examples/text/alignment.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { Text } from '@luke-ui/react/text';
 
-export default function Alignment() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="200">
 			<Text elementType="div" textAlign="start">
@@ -15,4 +15,4 @@ export default function Alignment() {
 			</Text>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text/basic.tsx b/apps/docs/src/examples/text/basic.tsx
index 09918cb0..b192683c 100644
--- a/apps/docs/src/examples/text/basic.tsx
+++ b/apps/docs/src/examples/text/basic.tsx
@@ -1,5 +1,5 @@
 import { Text } from '@luke-ui/react/text';
 
-export default function Basic() {
+export default () => {
 	return <Text>The quick brown fox jumps over the lazy dog.</Text>;
-}
+};
diff --git a/apps/docs/src/examples/text/numeric-glyphs.tsx b/apps/docs/src/examples/text/numeric-glyphs.tsx
index f06dc067..f2bbc000 100644
--- a/apps/docs/src/examples/text/numeric-glyphs.tsx
+++ b/apps/docs/src/examples/text/numeric-glyphs.tsx
@@ -8,7 +8,7 @@ const variants = [
 	{ label: 'Slashed zero', sample: '012 OQR', value: 'slashed-zero' },
 ] as const;
 
-export default function NumericGlyphs() {
+export default () => {
 	return (
 		<Box
 			display="grid"
@@ -29,4 +29,4 @@ export default function NumericGlyphs() {
 			))}
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text/transform.tsx b/apps/docs/src/examples/text/transform.tsx
index a05c431d..0ad061b9 100644
--- a/apps/docs/src/examples/text/transform.tsx
+++ b/apps/docs/src/examples/text/transform.tsx
@@ -1,11 +1,11 @@
 import { Box } from '@luke-ui/react/box';
 import { Text } from '@luke-ui/react/text';
 
-export default function Transform() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="300">
 			<Text textTransform="uppercase">Project settings</Text>
 			<Text textDecoration="underline">View all activity</Text>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text/trim.tsx b/apps/docs/src/examples/text/trim.tsx
index b39265ec..b6bc2f42 100644
--- a/apps/docs/src/examples/text/trim.tsx
+++ b/apps/docs/src/examples/text/trim.tsx
@@ -9,7 +9,7 @@ const lineBoxStyle = {
 	borderBlock: `1px dashed ${vars.color.border.decorative}`,
 } as const;
 
-export default function Trim() {
+export default () => {
 	const [isTrimmed, setIsTrimmed] = useState(true);
 
 	return (
@@ -24,4 +24,4 @@ export default function Trim() {
 			</Box>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text/truncation.tsx b/apps/docs/src/examples/text/truncation.tsx
index f718f3ec..104a63ea 100644
--- a/apps/docs/src/examples/text/truncation.tsx
+++ b/apps/docs/src/examples/text/truncation.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@luke-ui/react/box';
 import { Text } from '@luke-ui/react/text';
 
-export default function Truncation() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="400" maxInlineSize="20rem">
 			<Text elementType="div" lineClamp>
@@ -12,4 +12,4 @@ export default function Truncation() {
 			</Text>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/text/typography.tsx b/apps/docs/src/examples/text/typography.tsx
index 5f613e03..aeb22817 100644
--- a/apps/docs/src/examples/text/typography.tsx
+++ b/apps/docs/src/examples/text/typography.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Text } from '@luke-ui/react/text';
 import { fontSizeSteps, vars } from '@luke-ui/react/theme';
 
-export default function Typography() {
+export default () => {
 	return (
 		<Box display="flex" flexDirection="column" gap="300">
 			{fontSizeSteps.map((size) => (
@@ -25,4 +25,4 @@ export default function Typography() {
 			))}
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/theming/color-mode-override.tsx b/apps/docs/src/examples/theming/color-mode-override.tsx
index 8492577b..548789d1 100644
--- a/apps/docs/src/examples/theming/color-mode-override.tsx
+++ b/apps/docs/src/examples/theming/color-mode-override.tsx
@@ -11,7 +11,7 @@ const OPPOSITE_MODE: Record<ColorMode, ColorMode> = {
 	light: 'dark',
 };
 
-export default function ColorModeOverrideExample() {
+export default () => {
 	const [parentMode, setParentMode] = useState<ColorMode>('light');
 	const nestedMode = OPPOSITE_MODE[parentMode];
 
@@ -69,4 +69,4 @@ export default function ColorModeOverrideExample() {
 			</Box>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/theming/identity-and-mode.tsx b/apps/docs/src/examples/theming/identity-and-mode.tsx
index 8232dcb5..55c3d9cc 100644
--- a/apps/docs/src/examples/theming/identity-and-mode.tsx
+++ b/apps/docs/src/examples/theming/identity-and-mode.tsx
@@ -9,7 +9,7 @@ import { useState } from 'react';
 type ColorMode = 'dark' | 'light';
 type Identity = 'paper' | 'tactile';
 
-export default function IdentityAndModeExample() {
+export default () => {
 	const [colorMode, setColorMode] = useState<ColorMode>('light');
 	const [identity, setIdentity] = useState<Identity>('tactile');
 	const identityClassName = identity === 'tactile' ? tactileThemeClassName : paperThemeClassName;
@@ -82,4 +82,4 @@ export default function IdentityAndModeExample() {
 			</Box>
 		</Box>
 	);
-}
+};
diff --git a/apps/docs/src/examples/theming/semantic-variables.tsx b/apps/docs/src/examples/theming/semantic-variables.tsx
index 0a2d9cce..537bb1f1 100644
--- a/apps/docs/src/examples/theming/semantic-variables.tsx
+++ b/apps/docs/src/examples/theming/semantic-variables.tsx
@@ -2,7 +2,7 @@ import { Box } from '@luke-ui/react/box';
 import { Text } from '@luke-ui/react/text';
 import { vars } from '@luke-ui/react/theme';
 
-export default function SemanticVariablesExample() {
+export default () => {
 	return (
 		<Box
 			display="grid"
@@ -13,7 +13,7 @@ export default function SemanticVariablesExample() {
 			<SemanticSurface mode="dark" />
 		</Box>
 	);
-}
+};
 
 function SemanticSurface({ mode }: { mode: 'light' | 'dark' }) {
 	return (
diff --git a/apps/docs/src/examples/visually-hidden/basic.tsx b/apps/docs/src/examples/visually-hidden/basic.tsx
index 4f5d58b9..c409538c 100644
--- a/apps/docs/src/examples/visually-hidden/basic.tsx
+++ b/apps/docs/src/examples/visually-hidden/basic.tsx
@@ -1,10 +1,10 @@
 import { VisuallyHidden } from '@luke-ui/react/visually-hidden';
 
-export default function Basic() {
+export default () => {
 	return (
 		<p>
 			<span aria-hidden="true">★★★★☆</span>
 			<VisuallyHidden> Rated 4 out of 5 stars</VisuallyHidden>
 		</p>
 	);
-}
+};
diff --git a/docs/DOCUMENTATION.md b/docs/DOCUMENTATION.md
index 59487b1f..c3b70853 100644
--- a/docs/DOCUMENTATION.md
+++ b/docs/DOCUMENTATION.md
@@ -116,8 +116,10 @@ Headings use sentence case. Capitalise only proper nouns and product names.
 
 Interactive examples live in `apps/docs/src/examples/<component>/`.
 
-An example module default-exports a React component. Reference it from an MDX page with
-`<ExampleBlock src="<component>/<name>" title="..." />`.
+An example module default-exports a React component as an anonymous arrow function,
+`export default () => {...}`. The component and variation are identified by the module path, not the
+function name, so the name is not repeated in the rendered source. Reference an example from an MDX
+page with `<ExampleBlock src="<component>/<name>" title="..." />`.
 
 Every component guide starts with a focused `basic.tsx` example and references it as the primary
 `<ExampleBlock src="<component>/basic" ... />`. This is the default first example generated for a