format: Apply Prettier to existing codebase

Formatting-only changes across all component and story files.
No logic or behaviour changes — only whitespace, line breaks, and trailing commas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/atoms/Badge/Badge.stories.tsx

@@ -78,12 +78,24 @@ export const AllColoursFilled: Story = {
   name: 'All Colours — Filled',
   render: () => (
     <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-      <Badge variant="filled" color="default">Default</Badge>
-      <Badge variant="filled" color="brand">Brand</Badge>
-      <Badge variant="filled" color="success">Success</Badge>
-      <Badge variant="filled" color="warning">Warning</Badge>
-      <Badge variant="filled" color="error">Error</Badge>
-      <Badge variant="filled" color="info">Info</Badge>
+      <Badge variant="filled" color="default">
+        Default
+      </Badge>
+      <Badge variant="filled" color="brand">
+        Brand
+      </Badge>
+      <Badge variant="filled" color="success">
+        Success
+      </Badge>
+      <Badge variant="filled" color="warning">
+        Warning
+      </Badge>
+      <Badge variant="filled" color="error">
+        Error
+      </Badge>
+      <Badge variant="filled" color="info">
+        Info
+      </Badge>
     </div>
   ),
 };
@@ -95,11 +107,21 @@ export const WithIcons: Story = {
   name: 'With Icons',
   render: () => (
     <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-      <Badge color="brand" icon={<StarIcon />}>Popular</Badge>
-      <Badge color="success" icon={<CheckCircleIcon />}>Verified</Badge>
-      <Badge color="warning" icon={<WarningAmberIcon />}>Limited</Badge>
-      <Badge color="error" icon={<ErrorOutlineIcon />}>Sold out</Badge>
-      <Badge color="info" icon={<InfoOutlinedIcon />}>New</Badge>
+      <Badge color="brand" icon={<StarIcon />}>
+        Popular
+      </Badge>
+      <Badge color="success" icon={<CheckCircleIcon />}>
+        Verified
+      </Badge>
+      <Badge color="warning" icon={<WarningAmberIcon />}>
+        Limited
+      </Badge>
+      <Badge color="error" icon={<ErrorOutlineIcon />}>
+        Sold out
+      </Badge>
+      <Badge color="info" icon={<InfoOutlinedIcon />}>
+        New
+      </Badge>
     </div>
   ),
 };
@@ -109,11 +131,21 @@ export const WithIconsFilled: Story = {
   name: 'With Icons — Filled',
   render: () => (
     <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-      <Badge variant="filled" color="brand" icon={<StarIcon />}>Popular</Badge>
-      <Badge variant="filled" color="success" icon={<CheckCircleIcon />}>Included</Badge>
-      <Badge variant="filled" color="warning" icon={<WarningAmberIcon />}>Attention</Badge>
-      <Badge variant="filled" color="error" icon={<ErrorOutlineIcon />}>Unavailable</Badge>
-      <Badge variant="filled" color="info" icon={<InfoOutlinedIcon />}>Updated</Badge>
+      <Badge variant="filled" color="brand" icon={<StarIcon />}>
+        Popular
+      </Badge>
+      <Badge variant="filled" color="success" icon={<CheckCircleIcon />}>
+        Included
+      </Badge>
+      <Badge variant="filled" color="warning" icon={<WarningAmberIcon />}>
+        Attention
+      </Badge>
+      <Badge variant="filled" color="error" icon={<ErrorOutlineIcon />}>
+        Unavailable
+      </Badge>
+      <Badge variant="filled" color="info" icon={<InfoOutlinedIcon />}>
+        Updated
+      </Badge>
     </div>
   ),
 };
@@ -124,9 +156,15 @@ export const WithIconsFilled: Story = {
 export const Sizes: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
-      <Badge size="small" color="brand" icon={<StarIcon />}>Small</Badge>
-      <Badge size="medium" color="brand" icon={<StarIcon />}>Medium</Badge>
-      <Badge size="large" color="brand" icon={<StarIcon />}>Large</Badge>
+      <Badge size="small" color="brand" icon={<StarIcon />}>
+        Small
+      </Badge>
+      <Badge size="medium" color="brand" icon={<StarIcon />}>
+        Medium
+      </Badge>
+      <Badge size="large" color="brand" icon={<StarIcon />}>
+        Large
+      </Badge>
     </div>
   ),
 };
@@ -146,7 +184,9 @@ export const InPriceCard: Story = {
           <Typography variant="overline" color="text.secondary">
             Essential
           </Typography>
-          <Badge size="small" color="default">Standard</Badge>
+          <Badge size="small" color="default">
+            Standard
+          </Badge>
         </Box>
         <Typography variant="display3" color="primary" sx={{ mb: 1 }}>
           $3,200
@@ -162,7 +202,9 @@ export const InPriceCard: Story = {
           <Typography variant="overline" color="text.secondary">
             Premium
           </Typography>
-          <Badge color="brand" icon={<StarIcon />}>Most popular</Badge>
+          <Badge color="brand" icon={<StarIcon />}>
+            Most popular
+          </Badge>
         </Box>
         <Typography variant="display3" color="primary" sx={{ mb: 1 }}>
           $5,800
@@ -178,7 +220,9 @@ export const InPriceCard: Story = {
           <Typography variant="overline" color="text.secondary">
             Bespoke
           </Typography>
-          <Badge color="info" icon={<LocalOfferIcon />}>Best value</Badge>
+          <Badge color="info" icon={<LocalOfferIcon />}>
+            Best value
+          </Badge>
         </Box>
         <Typography variant="display3" color="primary" sx={{ mb: 1 }}>
           $8,500
@@ -202,11 +246,46 @@ export const ServiceStatus: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 500 }}>
       {[
-        { service: 'Chapel ceremony', badge: <Badge color="success" icon={<CheckCircleIcon />}>Confirmed</Badge> },
-        { service: 'Floral arrangements', badge: <Badge color="warning" icon={<WarningAmberIcon />}>Pending</Badge> },
-        { service: 'Catering', badge: <Badge color="error" icon={<ErrorOutlineIcon />}>Unavailable</Badge> },
-        { service: 'Memorial printing', badge: <Badge color="info" icon={<NewReleasesIcon />}>New option</Badge> },
-        { service: 'Premium casket', badge: <Badge variant="filled" color="brand" icon={<VerifiedIcon />}>Included</Badge> },
+        {
+          service: 'Chapel ceremony',
+          badge: (
+            <Badge color="success" icon={<CheckCircleIcon />}>
+              Confirmed
+            </Badge>
+          ),
+        },
+        {
+          service: 'Floral arrangements',
+          badge: (
+            <Badge color="warning" icon={<WarningAmberIcon />}>
+              Pending
+            </Badge>
+          ),
+        },
+        {
+          service: 'Catering',
+          badge: (
+            <Badge color="error" icon={<ErrorOutlineIcon />}>
+              Unavailable
+            </Badge>
+          ),
+        },
+        {
+          service: 'Memorial printing',
+          badge: (
+            <Badge color="info" icon={<NewReleasesIcon />}>
+              New option
+            </Badge>
+          ),
+        },
+        {
+          service: 'Premium casket',
+          badge: (
+            <Badge variant="filled" color="brand" icon={<VerifiedIcon />}>
+              Included
+            </Badge>
+          ),
+        },
       ].map((item) => (
         <Card key={item.service} variant="outlined" padding="compact">
           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
@@ -231,7 +310,14 @@ export const CompleteMatrix: Story = {
       <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
         {(['soft', 'filled'] as const).map((variant) => (
           <div key={variant}>
-            <div style={{ marginBottom: 8, fontWeight: 600, fontSize: 14, textTransform: 'capitalize' }}>
+            <div
+              style={{
+                marginBottom: 8,
+                fontWeight: 600,
+                fontSize: 14,
+                textTransform: 'capitalize',
+              }}
+            >
               {variant}
             </div>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
@@ -239,7 +325,13 @@ export const CompleteMatrix: Story = {
                 <div key={size} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                   <span style={{ width: 60, fontSize: 12, color: '#737373' }}>{size}</span>
                   {colors.map((color) => (
-                    <Badge key={color} variant={variant} color={color} size={size} icon={<StarIcon />}>
+                    <Badge
+                      key={color}
+                      variant={variant}
+                      color={color}
+                      size={size}
+                      icon={<StarIcon />}
+                    >
                       {color}
                     </Badge>
                   ))}

src/components/atoms/Button/Button.stories.tsx

@@ -87,7 +87,9 @@ export const FigmaMapping: Story = {
     <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
       <Button variant="contained">Primary</Button>
       <Button variant="soft">Sec / Brand</Button>
-      <Button variant="soft" color="secondary">Sec / Grey</Button>
+      <Button variant="soft" color="secondary">
+        Sec / Grey
+      </Button>
       <Button variant="text">Ghost</Button>
     </div>
   ),
@@ -113,10 +115,18 @@ export const VariantsSecondary: Story = {
   name: 'Variants — Secondary',
   render: () => (
     <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
-      <Button variant="contained" color="secondary">Contained</Button>
-      <Button variant="soft" color="secondary">Soft</Button>
-      <Button variant="outlined" color="secondary">Outlined</Button>
-      <Button variant="text" color="secondary">Text</Button>
+      <Button variant="contained" color="secondary">
+        Contained
+      </Button>
+      <Button variant="soft" color="secondary">
+        Soft
+      </Button>
+      <Button variant="outlined" color="secondary">
+        Outlined
+      </Button>
+      <Button variant="text" color="secondary">
+        Text
+      </Button>
     </div>
   ),
 };
@@ -140,10 +150,18 @@ export const AllSizesSoft: Story = {
   name: 'All Sizes — Soft',
   render: () => (
     <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
-      <Button variant="soft" size="xs">Extra small</Button>
-      <Button variant="soft" size="small">Small</Button>
-      <Button variant="soft" size="medium">Medium</Button>
-      <Button variant="soft" size="large">Large</Button>
+      <Button variant="soft" size="xs">
+        Extra small
+      </Button>
+      <Button variant="soft" size="small">
+        Small
+      </Button>
+      <Button variant="soft" size="medium">
+        Medium
+      </Button>
+      <Button variant="soft" size="large">
+        Large
+      </Button>
     </div>
   ),
 };
@@ -180,10 +198,18 @@ export const IconsAllSizes: Story = {
   name: 'Icons — All Sizes',
   render: () => (
     <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
-      <Button size="xs" startIcon={<AddIcon />}>Add</Button>
-      <Button size="small" startIcon={<AddIcon />}>Add</Button>
-      <Button size="medium" startIcon={<AddIcon />}>Add</Button>
-      <Button size="large" startIcon={<AddIcon />}>Add</Button>
+      <Button size="xs" startIcon={<AddIcon />}>
+        Add
+      </Button>
+      <Button size="small" startIcon={<AddIcon />}>
+        Add
+      </Button>
+      <Button size="medium" startIcon={<AddIcon />}>
+        Add
+      </Button>
+      <Button size="large" startIcon={<AddIcon />}>
+        Add
+      </Button>
     </div>
   ),
 };
@@ -204,9 +230,15 @@ export const DisabledAllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
       <Button disabled>Contained</Button>
-      <Button disabled variant="soft">Soft</Button>
-      <Button disabled variant="outlined">Outlined</Button>
-      <Button disabled variant="text">Text</Button>
+      <Button disabled variant="soft">
+        Soft
+      </Button>
+      <Button disabled variant="outlined">
+        Outlined
+      </Button>
+      <Button disabled variant="text">
+        Text
+      </Button>
     </div>
   ),
 };
@@ -225,9 +257,15 @@ export const LoadingAllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
       <Button loading>Submitting...</Button>
-      <Button loading variant="soft">Processing...</Button>
-      <Button loading variant="outlined">Processing...</Button>
-      <Button loading variant="text">Loading...</Button>
+      <Button loading variant="soft">
+        Processing...
+      </Button>
+      <Button loading variant="outlined">
+        Processing...
+      </Button>
+      <Button loading variant="text">
+        Loading...
+      </Button>
     </div>
   ),
 };
@@ -293,9 +331,15 @@ export const TextButtonComparison: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
       <Button variant="text">No underline</Button>
-      <Button variant="text" underline>With underline</Button>
-      <Button variant="text" color="secondary">Secondary</Button>
-      <Button variant="text" color="secondary" underline>Secondary underlined</Button>
+      <Button variant="text" underline>
+        With underline
+      </Button>
+      <Button variant="text" color="secondary">
+        Secondary
+      </Button>
+      <Button variant="text" color="secondary" underline>
+        Secondary underlined
+      </Button>
     </div>
   ),
 };
@@ -305,10 +349,18 @@ export const TextButtonSizes: Story = {
   name: 'Text Buttons — All Sizes',
   render: () => (
     <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
-      <Button variant="text" size="xs">Extra small</Button>
-      <Button variant="text" size="small">Small</Button>
-      <Button variant="text" size="medium">Medium</Button>
-      <Button variant="text" size="large">Large</Button>
+      <Button variant="text" size="xs">
+        Extra small
+      </Button>
+      <Button variant="text" size="small">
+        Small
+      </Button>
+      <Button variant="text" size="medium">
+        Medium
+      </Button>
+      <Button variant="text" size="large">
+        Large
+      </Button>
     </div>
   ),
 };
@@ -348,15 +400,27 @@ export const CompleteMatrix: Story = {
     <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
       {(['contained', 'soft', 'outlined', 'text'] as const).map((variant) => (
         <div key={variant}>
-          <div style={{ marginBottom: 8, fontWeight: 600, fontSize: 14, textTransform: 'capitalize' }}>
+          <div
+            style={{ marginBottom: 8, fontWeight: 600, fontSize: 14, textTransform: 'capitalize' }}
+          >
             {variant}
           </div>
           <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
-            <Button variant={variant} color="primary">Primary</Button>
-            <Button variant={variant} color="secondary">Secondary</Button>
-            <Button variant={variant} color="primary" startIcon={<AddIcon />}>With icon</Button>
-            <Button variant={variant} color="primary" disabled>Disabled</Button>
-            <Button variant={variant} color="primary" loading>Loading...</Button>
+            <Button variant={variant} color="primary">
+              Primary
+            </Button>
+            <Button variant={variant} color="secondary">
+              Secondary
+            </Button>
+            <Button variant={variant} color="primary" startIcon={<AddIcon />}>
+              With icon
+            </Button>
+            <Button variant={variant} color="primary" disabled>
+              Disabled
+            </Button>
+            <Button variant={variant} color="primary" loading>
+              Loading...
+            </Button>
           </div>
         </div>
       ))}

src/components/atoms/Button/Button.tsx

@@ -69,13 +69,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {children}
         {loading && (
           <>
-            <CircularProgress
-              size={16}
-              color="inherit"
-              thickness={3}
-              aria-hidden
-              sx={{ ml: 1 }}
-            />
+            <CircularProgress size={16} color="inherit" thickness={3} aria-hidden sx={{ ml: 1 }} />
             <span
               style={{
                 position: 'absolute',

src/components/atoms/Card/Card.stories.tsx

@@ -52,8 +52,8 @@ export const Default: Story = {
           Funeral package
         </Typography>
         <Typography variant="body1" color="text.secondary">
-          A comprehensive service including chapel ceremony, transport, and
-          preparation. Suitable for families seeking a traditional farewell.
+          A comprehensive service including chapel ceremony, transport, and preparation. Suitable
+          for families seeking a traditional farewell.
         </Typography>
       </>
     ),
@@ -99,12 +99,7 @@ export const Variants: Story = {
 export const Interactive: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: 24, maxWidth: 800 }}>
-      <Card
-        interactive
-        sx={{ flex: 1 }}
-        tabIndex={0}
-        onClick={() => alert('Card clicked')}
-      >
+      <Card interactive sx={{ flex: 1 }} tabIndex={0} onClick={() => alert('Card clicked')}>
         <Typography variant="h5" gutterBottom>
           Elevated + Interactive
         </Typography>
@@ -305,11 +300,15 @@ export const OnDifferentBackgrounds: Story = {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
           <Card variant="elevated">
             <Typography variant="labelLg">Elevated</Typography>
-            <Typography variant="body2" color="text.secondary">Shadow defines edges</Typography>
+            <Typography variant="body2" color="text.secondary">
+              Shadow defines edges
+            </Typography>
           </Card>
           <Card variant="outlined">
             <Typography variant="labelLg">Outlined</Typography>
-            <Typography variant="body2" color="text.secondary">Border defines edges</Typography>
+            <Typography variant="body2" color="text.secondary">
+              Border defines edges
+            </Typography>
           </Card>
         </div>
       </div>
@@ -328,11 +327,15 @@ export const OnDifferentBackgrounds: Story = {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
           <Card variant="elevated">
             <Typography variant="labelLg">Elevated</Typography>
-            <Typography variant="body2" color="text.secondary">White card + shadow on grey</Typography>
+            <Typography variant="body2" color="text.secondary">
+              White card + shadow on grey
+            </Typography>
           </Card>
           <Card variant="outlined">
             <Typography variant="labelLg">Outlined</Typography>
-            <Typography variant="body2" color="text.secondary">Contrast + border on grey</Typography>
+            <Typography variant="body2" color="text.secondary">
+              Contrast + border on grey
+            </Typography>
           </Card>
         </div>
       </div>
@@ -395,8 +398,8 @@ export const PriceCardPreview: Story = {
           $3,200
         </Typography>
         <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-          A respectful and simple service with chapel ceremony, transport, and
-          professional preparation.
+          A respectful and simple service with chapel ceremony, transport, and professional
+          preparation.
         </Typography>
         <Button fullWidth size="large">
           Select this package
@@ -432,8 +435,8 @@ export const WithImage: Story = {
             Parsons Chapel
           </Typography>
           <Typography variant="body2" color="text.secondary">
-            Our heritage-listed chapel seats up to 120 guests and features
-            modern audio-visual facilities.
+            Our heritage-listed chapel seats up to 120 guests and features modern audio-visual
+            facilities.
           </Typography>
         </Box>
       </Card>

src/components/atoms/Card/Card.tsx

@@ -58,9 +58,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
     const muiVariant = variant === 'outlined' ? 'outlined' : undefined;
 
     // Interactive cards need keyboard operability
-    const interactiveProps = interactive
-      ? { tabIndex: 0 as const, role: 'button' as const }
-      : {};
+    const interactiveProps = interactive ? { tabIndex: 0 as const, role: 'button' as const } : {};
 
     return (
       <MuiCard
@@ -88,8 +86,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
           // Focus-visible for keyboard accessibility on interactive cards
           interactive && {
             '&:focus-visible': {
-              outline: (theme: Theme) =>
-                `2px solid ${theme.palette.primary.main}`,
+              outline: (theme: Theme) => `2px solid ${theme.palette.primary.main}`,
               outlineOffset: '2px',
             },
           },

src/components/atoms/Chip/Chip.stories.tsx

@@ -117,7 +117,12 @@ export const Clickable: Story = {
       <Chip label="Clickable default" onClick={() => {}} />
       <Chip label="Clickable primary" color="primary" onClick={() => {}} />
       <Chip label="Clickable outlined" variant="outlined" onClick={() => {}} />
-      <Chip label="Clickable outlined primary" variant="outlined" color="primary" onClick={() => {}} />
+      <Chip
+        label="Clickable outlined primary"
+        variant="outlined"
+        color="primary"
+        onClick={() => {}}
+      />
     </Box>
   ),
 };
@@ -143,14 +148,18 @@ export const Selected: Story = {
   render: () => (
     <Box sx={{ display: 'flex', gap: 2, flexDirection: 'column' }}>
       <Box>
-        <Typography variant="label" sx={{ mb: 1 }}>Filled</Typography>
+        <Typography variant="label" sx={{ mb: 1 }}>
+          Filled
+        </Typography>
         <Box sx={{ display: 'flex', gap: 1.5 }}>
           <Chip label="Not selected" onClick={() => {}} />
           <Chip label="Selected" selected onClick={() => {}} />
         </Box>
       </Box>
       <Box>
-        <Typography variant="label" sx={{ mb: 1 }}>Outlined</Typography>
+        <Typography variant="label" sx={{ mb: 1 }}>
+          Outlined
+        </Typography>
         <Box sx={{ display: 'flex', gap: 1.5 }}>
           <Chip variant="outlined" label="Not selected" onClick={() => {}} />
           <Chip variant="outlined" label="Selected" selected onClick={() => {}} />
@@ -253,12 +262,7 @@ export const RemovableTags: Story = {
               </Typography>
             ) : (
               tags.map((tag) => (
-                <Chip
-                  key={tag}
-                  label={tag}
-                  color="primary"
-                  onDelete={() => remove(tag)}
-                />
+                <Chip key={tag} label={tag} color="primary" onDelete={() => remove(tag)} />
               ))
             )}
           </Box>
@@ -283,7 +287,9 @@ export const InServiceOption: Story = {
       <Card interactive>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 1 }}>
           <Typography variant="h5">Chapel Ceremony</Typography>
-          <Typography variant="display3" color="primary">$1,200</Typography>
+          <Typography variant="display3" color="primary">
+            $1,200
+          </Typography>
         </Box>
         <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
           Traditional chapel service with celebrant and music of your choosing.
@@ -298,7 +304,9 @@ export const InServiceOption: Story = {
       <Card interactive>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 1 }}>
           <Typography variant="h5">Graveside Service</Typography>
-          <Typography variant="display3" color="primary">$900</Typography>
+          <Typography variant="display3" color="primary">
+            $900
+          </Typography>
         </Box>
         <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
           Intimate outdoor farewell at the burial site.
@@ -337,8 +345,20 @@ export const CompleteMatrix: Story = {
                   {colors.map((color) => (
                     <React.Fragment key={color}>
                       <Chip variant={variant} color={color} size={size} label={color} />
-                      <Chip variant={variant} color={color} size={size} label={`${color} + icon`} icon={<LocalOfferIcon />} />
-                      <Chip variant={variant} color={color} size={size} label={`${color} delete`} onDelete={() => {}} />
+                      <Chip
+                        variant={variant}
+                        color={color}
+                        size={size}
+                        label={`${color} + icon`}
+                        icon={<LocalOfferIcon />}
+                      />
+                      <Chip
+                        variant={variant}
+                        color={color}
+                        size={size}
+                        label={`${color} delete`}
+                        onDelete={() => {}}
+                      />
                     </React.Fragment>
                   ))}
                 </Box>
@@ -348,7 +368,9 @@ export const CompleteMatrix: Story = {
         ))}
 
         <Box>
-          <Typography variant="label" sx={{ mb: 1 }}>Selected state</Typography>
+          <Typography variant="label" sx={{ mb: 1 }}>
+            Selected state
+          </Typography>
           <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
             <Chip selected label="Filled selected" onClick={() => {}} />
             <Chip selected variant="outlined" label="Outlined selected" onClick={() => {}} />

src/components/atoms/Chip/Chip.tsx

@@ -44,16 +44,7 @@ export interface ChipProps extends MuiChipProps {
  * is being removed.
  */
 export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
-  (
-    {
-      selected = false,
-      variant = 'filled',
-      color,
-      sx,
-      ...props
-    },
-    ref,
-  ) => {
+  ({ selected = false, variant = 'filled', color, sx, ...props }, ref) => {
     // When selected, promote to primary colour unless explicitly set
     const resolvedColor = color ?? (selected ? 'primary' : 'default');
 
@@ -63,11 +54,12 @@ export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
         variant={variant}
         color={resolvedColor}
         sx={[
-          selected && variant === 'outlined' && {
-            borderWidth: 2,
-            borderColor: 'var(--fa-color-brand-500)',
-            backgroundColor: 'var(--fa-color-brand-50)',
-          },
+          selected &&
+            variant === 'outlined' && {
+              borderWidth: 2,
+              borderColor: 'var(--fa-color-brand-500)',
+              backgroundColor: 'var(--fa-color-brand-50)',
+            },
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
         {...props}

src/components/atoms/Divider/Divider.stories.tsx

@@ -19,7 +19,13 @@ type Story = StoryObj<typeof Divider>;
 // ─── Default ────────────────────────────────────────────────────────────────
 
 export const Default: Story = {
-  decorators: [(Story) => <Box sx={{ width: 400 }}><Story /></Box>],
+  decorators: [
+    (Story) => (
+      <Box sx={{ width: 400 }}>
+        <Story />
+      </Box>
+    ),
+  ],
 };
 
 // ─── Variants ───────────────────────────────────────────────────────────────
@@ -84,9 +90,7 @@ export const InContent: Story = {
       </Box>
       <Divider />
       <Box sx={{ fontWeight: 600, mt: 2, mb: 1 }}>Venue</Box>
-      <Box sx={{ fontSize: 14, color: 'text.secondary', mb: 2 }}>
-        West Chapel, Strathfield
-      </Box>
+      <Box sx={{ fontSize: 14, color: 'text.secondary', mb: 2 }}>West Chapel, Strathfield</Box>
       <Divider />
       <Box sx={{ fontWeight: 600, mt: 2, mb: 1 }}>Total</Box>
       <Box sx={{ fontSize: 14, color: 'text.primary' }}>$2,400</Box>

src/components/atoms/IconButton/IconButton.stories.tsx

@@ -116,7 +116,17 @@ export const CommonUseCases: Story = {
       {/* Card actions toolbar */}
       <Box>
         <Box sx={{ fontSize: 12, color: 'text.secondary', mb: 1 }}>Card action toolbar</Box>
-        <Box sx={{ display: 'flex', gap: 1, p: 1, border: '1px solid', borderColor: 'divider', borderRadius: 1, width: 'fit-content' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: 1,
+            p: 1,
+            border: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 1,
+            width: 'fit-content',
+          }}
+        >
           <IconButton size="small" color="primary" aria-label="Favourite">
             <FavoriteBorderIcon />
           </IconButton>
@@ -132,7 +142,18 @@ export const CommonUseCases: Story = {
       {/* Dialog close */}
       <Box>
         <Box sx={{ fontSize: 12, color: 'text.secondary', mb: 1 }}>Dialog close button</Box>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1, width: 300 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            p: 2,
+            border: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 1,
+            width: 300,
+          }}
+        >
           <Box sx={{ fontWeight: 600 }}>Confirm Selection</Box>
           <IconButton size="small" aria-label="Close dialog">
             <CloseIcon />
@@ -143,7 +164,17 @@ export const CommonUseCases: Story = {
       {/* Navigation header */}
       <Box>
         <Box sx={{ fontSize: 12, color: 'text.secondary', mb: 1 }}>Mobile navigation toggle</Box>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, p: 1, backgroundColor: 'var(--fa-color-brand-50)', borderRadius: 1, width: 'fit-content' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            p: 1,
+            backgroundColor: 'var(--fa-color-brand-50)',
+            borderRadius: 1,
+            width: 'fit-content',
+          }}
+        >
           <IconButton size="large" aria-label="Open menu">
             <MenuIcon />
           </IconButton>

src/components/atoms/Input/Input.stories.tsx

@@ -122,10 +122,7 @@ export const FigmaMapping: Story = {
         helperText="Input Label - Description"
         endIcon={<SearchIcon />}
       />
-      <Input
-        placeholder="Select an option"
-        endIcon={<SearchIcon />}
-      />
+      <Input placeholder="Select an option" endIcon={<SearchIcon />} />
       <Input placeholder="Select an option" />
     </div>
   ),
@@ -222,20 +219,16 @@ export const SizeAlignment: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
       <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
-        <Input
-          placeholder="Search arrangements..."
-          endIcon={<SearchIcon />}
-          size="medium"
-        />
-        <Button size="large" sx={{ minWidth: 100, minHeight: 48 }}>Search</Button>
+        <Input placeholder="Search arrangements..." endIcon={<SearchIcon />} size="medium" />
+        <Button size="large" sx={{ minWidth: 100, minHeight: 48 }}>
+          Search
+        </Button>
       </div>
       <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
-        <Input
-          placeholder="Quick search..."
-          endIcon={<SearchIcon />}
-          size="small"
-        />
-        <Button size="medium" sx={{ minWidth: 100, minHeight: 40 }}>Search</Button>
+        <Input placeholder="Quick search..." endIcon={<SearchIcon />} size="small" />
+        <Button size="medium" sx={{ minWidth: 100, minHeight: 40 }}>
+          Search
+        </Button>
       </div>
     </div>
   ),
@@ -248,11 +241,7 @@ export const WithIcons: Story = {
   name: 'With Icons',
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-      <Input
-        label="Search"
-        placeholder="Search services..."
-        endIcon={<SearchIcon />}
-      />
+      <Input label="Search" placeholder="Search services..." endIcon={<SearchIcon />} />
       <Input
         label="Email"
         placeholder="you@example.com"
@@ -265,12 +254,7 @@ export const WithIcons: Story = {
         startIcon={<PhoneOutlinedIcon />}
         type="tel"
       />
-      <Input
-        label="Amount"
-        placeholder="0.00"
-        startIcon={<AttachMoneyIcon />}
-        type="number"
-      />
+      <Input label="Amount" placeholder="0.00" startIcon={<AttachMoneyIcon />} type="number" />
       <Input
         label="Email verified"
         defaultValue="john@example.com"
@@ -355,18 +339,22 @@ export const ValidationFlow: Story = {
         required
         startIcon={<EmailOutlinedIcon />}
         endIcon={
-          showSuccess ? <CheckCircleOutlineIcon sx={{ color: 'success.main' }} /> :
-          showError ? <ErrorOutlineIcon sx={{ color: 'error.main' }} /> :
-          undefined
+          showSuccess ? (
+            <CheckCircleOutlineIcon sx={{ color: 'success.main' }} />
+          ) : showError ? (
+            <ErrorOutlineIcon sx={{ color: 'error.main' }} />
+          ) : undefined
         }
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={showError}
         success={showSuccess}
         helperText={
-          showError ? 'Please enter a valid email address' :
-          showSuccess ? 'Looks good!' :
-          'Required for arrangement confirmation'
+          showError
+            ? 'Please enter a valid email address'
+            : showSuccess
+              ? 'Looks good!'
+              : 'Required for arrangement confirmation'
         }
       />
     );
@@ -387,9 +375,7 @@ export const ArrangementForm: Story = {
   ],
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
-      <div style={{ fontWeight: 700, fontSize: 20, marginBottom: 4 }}>
-        Contact details
-      </div>
+      <div style={{ fontWeight: 700, fontSize: 20, marginBottom: 4 }}>Contact details</div>
       <Input
         label="Full name"
         placeholder="Enter your full name"
@@ -443,7 +429,16 @@ export const CompleteMatrix: Story = {
     <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
       {(['medium', 'small'] as const).map((size) => (
         <div key={size}>
-          <div style={{ marginBottom: 12, fontWeight: 600, fontSize: 14, textTransform: 'uppercase', letterSpacing: 1, color: '#737373' }}>
+          <div
+            style={{
+              marginBottom: 12,
+              fontWeight: 600,
+              fontSize: 14,
+              textTransform: 'uppercase',
+              letterSpacing: 1,
+              color: '#737373',
+            }}
+          >
             Size: {size} ({size === 'medium' ? '48px' : '40px'})
           </div>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>

src/components/atoms/Input/Input.tsx

@@ -77,11 +77,15 @@ export const Input = React.forwardRef<HTMLDivElement, InputProps>(
     // Prefer convenience icon props; fall back to raw adornment props
     const resolvedStart = startIcon ? (
       <InputAdornment position="start">{startIcon}</InputAdornment>
-    ) : startAdornment;
+    ) : (
+      startAdornment
+    );
 
     const resolvedEnd = endIcon ? (
       <InputAdornment position="end">{endIcon}</InputAdornment>
-    ) : endAdornment;
+    ) : (
+      endAdornment
+    );
 
     return (
       <FormControl
@@ -133,18 +137,19 @@ export const Input = React.forwardRef<HTMLDivElement, InputProps>(
           aria-describedby={helperId}
           sx={[
             // Success border + focus ring (not a native MUI state)
-            success && !error && {
-              '& .MuiOutlinedInput-notchedOutline': {
-                borderColor: 'success.main',
+            success &&
+              !error && {
+                '& .MuiOutlinedInput-notchedOutline': {
+                  borderColor: 'success.main',
+                },
+                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                  borderColor: 'success.main',
+                },
+                '&.Mui-focused': {
+                  boxShadow: (theme: Theme) =>
+                    `0 0 0 3px ${theme.palette.common.white}, 0 0 0 5px ${theme.palette.success.main}`,
+                },
               },
-              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                borderColor: 'success.main',
-              },
-              '&.Mui-focused': {
-                boxShadow: (theme: Theme) =>
-                  `0 0 0 3px ${theme.palette.common.white}, 0 0 0 5px ${theme.palette.success.main}`,
-              },
-            },
             ...(Array.isArray(sx) ? sx : [sx]),
           ]}
           {...props}

src/components/atoms/Link/Link.stories.tsx

@@ -32,15 +32,21 @@ export const UnderlineVariants: Story = {
   render: () => (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-        <Link href="#" underline="hover">Hover (default)</Link>
+        <Link href="#" underline="hover">
+          Hover (default)
+        </Link>
         <Box sx={{ fontSize: 11, color: 'text.secondary' }}>underline="hover"</Box>
       </Box>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-        <Link href="#" underline="always">Always underlined</Link>
+        <Link href="#" underline="always">
+          Always underlined
+        </Link>
         <Box sx={{ fontSize: 11, color: 'text.secondary' }}>underline="always"</Box>
       </Box>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-        <Link href="#" underline="none">No underline</Link>
+        <Link href="#" underline="none">
+          No underline
+        </Link>
         <Box sx={{ fontSize: 11, color: 'text.secondary' }}>underline="none"</Box>
       </Box>
     </Box>
@@ -58,13 +64,19 @@ export const ColourVariants: Story = {
         <Link href="#">Brand link (default — copper, 4.8:1 contrast)</Link>
       </Box>
       <Box>
-        <Link href="#" color="text.secondary">Secondary link (neutral grey)</Link>
+        <Link href="#" color="text.secondary">
+          Secondary link (neutral grey)
+        </Link>
       </Box>
       <Box>
-        <Link href="#" color="text.primary">Primary text link (charcoal)</Link>
+        <Link href="#" color="text.primary">
+          Primary text link (charcoal)
+        </Link>
       </Box>
       <Box>
-        <Link href="#" color="error.main">Error link (red — for destructive actions)</Link>
+        <Link href="#" color="error.main">
+          Error link (red — for destructive actions)
+        </Link>
       </Box>
     </Box>
   ),
@@ -76,12 +88,10 @@ export const ColourVariants: Story = {
 export const Inline: Story = {
   render: () => (
     <Box sx={{ maxWidth: 500, lineHeight: 1.7 }}>
-      If you need help planning a funeral, our{' '}
-      <Link href="#">arrangement guide</Link> walks you through each
-      step. You can also browse our{' '}
-      <Link href="#">provider directory</Link> to find local funeral
-      directors, or <Link href="#">contact us</Link> directly for
-      personalised assistance.
+      If you need help planning a funeral, our <Link href="#">arrangement guide</Link> walks you
+      through each step. You can also browse our <Link href="#">provider directory</Link> to find
+      local funeral directors, or <Link href="#">contact us</Link> directly for personalised
+      assistance.
     </Box>
   ),
 };
@@ -92,9 +102,15 @@ export const Inline: Story = {
 export const Navigation: Story = {
   render: () => (
     <Box sx={{ display: 'flex', gap: 3 }}>
-      <Link href="#" underline="none" sx={{ fontWeight: 600 }}>FAQ</Link>
-      <Link href="#" underline="none" sx={{ fontWeight: 600 }}>Contact Us</Link>
-      <Link href="#" underline="none" sx={{ fontWeight: 600 }}>Log In</Link>
+      <Link href="#" underline="none" sx={{ fontWeight: 600 }}>
+        FAQ
+      </Link>
+      <Link href="#" underline="none" sx={{ fontWeight: 600 }}>
+        Contact Us
+      </Link>
+      <Link href="#" underline="none" sx={{ fontWeight: 600 }}>
+        Log In
+      </Link>
     </Box>
   ),
 };
@@ -106,10 +122,18 @@ export const FooterLinks: Story = {
   name: 'Footer Links',
   render: () => (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      <Link href="#" color="text.secondary" variant="body2">Privacy Policy</Link>
-      <Link href="#" color="text.secondary" variant="body2">Terms of Service</Link>
-      <Link href="#" color="text.secondary" variant="body2">Accessibility</Link>
-      <Link href="#" color="text.secondary" variant="body2">Cookie Settings</Link>
+      <Link href="#" color="text.secondary" variant="body2">
+        Privacy Policy
+      </Link>
+      <Link href="#" color="text.secondary" variant="body2">
+        Terms of Service
+      </Link>
+      <Link href="#" color="text.secondary" variant="body2">
+        Accessibility
+      </Link>
+      <Link href="#" color="text.secondary" variant="body2">
+        Cookie Settings
+      </Link>
     </Box>
   ),
 };
@@ -121,7 +145,15 @@ export const OnDifferentBackgrounds: Story = {
   name: 'On Different Backgrounds',
   render: () => (
     <Box sx={{ display: 'flex', gap: 3 }}>
-      <Box sx={{ p: 3, backgroundColor: 'background.default', borderRadius: 1, border: '1px solid', borderColor: 'divider' }}>
+      <Box
+        sx={{
+          p: 3,
+          backgroundColor: 'background.default',
+          borderRadius: 1,
+          border: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
         <Box sx={{ fontSize: 11, color: 'text.secondary', mb: 1 }}>White</Box>
         <Link href="#">Learn more</Link>
       </Box>

src/components/atoms/Radio/Radio.stories.tsx

@@ -63,7 +63,9 @@ export const Group: Story = {
   name: 'Radio Group',
   render: () => (
     <FormControl>
-      <Typography variant="label" sx={{ mb: 1 }}>Service type</Typography>
+      <Typography variant="label" sx={{ mb: 1 }}>
+        Service type
+      </Typography>
       <RadioGroup defaultValue="chapel">
         <FormControlLabel value="chapel" control={<Radio />} label="Chapel ceremony" />
         <FormControlLabel value="graveside" control={<Radio />} label="Graveside service" />
@@ -88,14 +90,31 @@ export const CardSelection: Story = {
       const [selected, setSelected] = useState('standard');
 
       const options = [
-        { value: 'direct', label: 'Direct cremation', desc: 'Simple, dignified cremation with no service.', price: '$1,800' },
-        { value: 'standard', label: 'Standard service', desc: 'Traditional chapel ceremony with viewing.', price: '$4,200' },
-        { value: 'premium', label: 'Premium service', desc: 'Full service with personalised memorial.', price: '$7,500' },
+        {
+          value: 'direct',
+          label: 'Direct cremation',
+          desc: 'Simple, dignified cremation with no service.',
+          price: '$1,800',
+        },
+        {
+          value: 'standard',
+          label: 'Standard service',
+          desc: 'Traditional chapel ceremony with viewing.',
+          price: '$4,200',
+        },
+        {
+          value: 'premium',
+          label: 'Premium service',
+          desc: 'Full service with personalised memorial.',
+          price: '$7,500',
+        },
       ];
 
       return (
         <Box sx={{ maxWidth: 420 }}>
-          <Typography variant="h4" sx={{ mb: 2 }}>Choose a package</Typography>
+          <Typography variant="h4" sx={{ mb: 2 }}>
+            Choose a package
+          </Typography>
           <RadioGroup value={selected} onChange={(e) => setSelected(e.target.value)}>
             {options.map((opt) => (
               <Card
@@ -110,11 +129,21 @@ export const CardSelection: Story = {
                 <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
                   <Radio value={opt.value} sx={{ mt: -0.5 }} />
                   <Box sx={{ flex: 1 }}>
-                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                      }}
+                    >
                       <Typography variant="label">{opt.label}</Typography>
-                      <Typography variant="labelLg" color="primary">{opt.price}</Typography>
+                      <Typography variant="labelLg" color="primary">
+                        {opt.price}
+                      </Typography>
                     </Box>
-                    <Typography variant="body2" color="text.secondary">{opt.desc}</Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      {opt.desc}
+                    </Typography>
                   </Box>
                 </Box>
               </Card>
@@ -135,7 +164,9 @@ export const PaymentMethod: Story = {
   name: 'Interactive — Payment Method',
   render: () => (
     <FormControl>
-      <Typography variant="label" sx={{ mb: 1 }}>Payment method</Typography>
+      <Typography variant="label" sx={{ mb: 1 }}>
+        Payment method
+      </Typography>
       <RadioGroup defaultValue="card" row>
         <FormControlLabel value="card" control={<Radio />} label="Credit card" />
         <FormControlLabel value="bank" control={<Radio />} label="Bank transfer" />

src/components/atoms/Switch/Switch.stories.tsx

@@ -77,39 +77,84 @@ export const ServiceAddOns: Story = {
       };
 
       const items = [
-        { key: 'catering' as const, label: 'Catering', desc: 'Light refreshments after the service', price: '$450' },
-        { key: 'flowers' as const, label: 'Floral arrangements', desc: 'Seasonal flowers for the chapel', price: '$280' },
-        { key: 'music' as const, label: 'Live music', desc: 'Organist or solo musician', price: '$350' },
-        { key: 'memorial' as const, label: 'Memorial video', desc: 'Photo slideshow with music', price: '$200' },
-        { key: 'guestBook' as const, label: 'Guest book', desc: 'Leather-bound memorial guest book', price: '$85' },
+        {
+          key: 'catering' as const,
+          label: 'Catering',
+          desc: 'Light refreshments after the service',
+          price: '$450',
+        },
+        {
+          key: 'flowers' as const,
+          label: 'Floral arrangements',
+          desc: 'Seasonal flowers for the chapel',
+          price: '$280',
+        },
+        {
+          key: 'music' as const,
+          label: 'Live music',
+          desc: 'Organist or solo musician',
+          price: '$350',
+        },
+        {
+          key: 'memorial' as const,
+          label: 'Memorial video',
+          desc: 'Photo slideshow with music',
+          price: '$200',
+        },
+        {
+          key: 'guestBook' as const,
+          label: 'Guest book',
+          desc: 'Leather-bound memorial guest book',
+          price: '$85',
+        },
       ];
 
-      const total = items.reduce((sum, item) =>
-        addOns[item.key] ? sum + parseInt(item.price.replace('$', ''), 10) : sum, 0,
+      const total = items.reduce(
+        (sum, item) => (addOns[item.key] ? sum + parseInt(item.price.replace('$', ''), 10) : sum),
+        0,
       );
 
       return (
         <Box sx={{ maxWidth: 420 }}>
-          <Typography variant="h4" sx={{ mb: 2 }}>Service add-ons</Typography>
+          <Typography variant="h4" sx={{ mb: 2 }}>
+            Service add-ons
+          </Typography>
           <FormGroup>
             {items.map((item) => (
               <Card key={item.key} variant="outlined" padding="compact" sx={{ mb: 1 }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <Box
+                  sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
+                >
                   <Box sx={{ flex: 1 }}>
                     <Typography variant="label">{item.label}</Typography>
-                    <Typography variant="body2" color="text.secondary">{item.desc}</Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      {item.desc}
+                    </Typography>
                   </Box>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Typography variant="label" color="text.secondary">{item.price}</Typography>
+                    <Typography variant="label" color="text.secondary">
+                      {item.price}
+                    </Typography>
                     <Switch checked={addOns[item.key]} onChange={() => toggle(item.key)} />
                   </Box>
                 </Box>
               </Card>
             ))}
           </FormGroup>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2, pt: 2, borderTop: 1, borderColor: 'divider' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              mt: 2,
+              pt: 2,
+              borderTop: 1,
+              borderColor: 'divider',
+            }}
+          >
             <Typography variant="labelLg">Total add-ons</Typography>
-            <Typography variant="labelLg" color="primary">${total}</Typography>
+            <Typography variant="labelLg" color="primary">
+              ${total}
+            </Typography>
           </Box>
         </Box>
       );

src/components/atoms/Typography/Typography.stories.tsx

@@ -16,22 +16,35 @@ const meta: Meta<typeof Typography> = {
     variant: {
       control: 'select',
       options: [
-        'displayHero', 'display1', 'display2', 'display3', 'displaySm',
-        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-        'bodyLg', 'body1', 'body2', 'bodyXs',
-        'labelLg', 'label', 'labelSm',
-        'caption', 'captionSm',
-        'overline', 'overlineSm',
+        'displayHero',
+        'display1',
+        'display2',
+        'display3',
+        'displaySm',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'bodyLg',
+        'body1',
+        'body2',
+        'bodyXs',
+        'labelLg',
+        'label',
+        'labelSm',
+        'caption',
+        'captionSm',
+        'overline',
+        'overlineSm',
       ],
       description: 'Typography variant — 21 variants across 6 categories',
       table: { defaultValue: { summary: 'body1' } },
     },
     color: {
       control: 'select',
-      options: [
-        'textPrimary', 'textSecondary', 'textDisabled',
-        'primary', 'secondary', 'error',
-      ],
+      options: ['textPrimary', 'textSecondary', 'textDisabled', 'primary', 'secondary', 'error'],
     },
     maxLines: { control: 'number' },
     gutterBottom: { control: 'boolean' },
@@ -47,7 +60,8 @@ const SAMPLE = 'Discover, Explore, and Plan Funerals in Minutes, Not Hours';
 
 export const Default: Story = {
   args: {
-    children: 'Funeral Arranger helps families find transparent, affordable funeral services across Australia.',
+    children:
+      'Funeral Arranger helps families find transparent, affordable funeral services across Australia.',
   },
 };
 
@@ -59,23 +73,33 @@ export const Display: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
       <div>
-        <Typography variant="captionSm" color="textSecondary">displayHero — 80px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          displayHero — 80px
+        </Typography>
         <Typography variant="displayHero">{SAMPLE}</Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">display1 — 64px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          display1 — 64px
+        </Typography>
         <Typography variant="display1">{SAMPLE}</Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">display2 — 52px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          display2 — 52px
+        </Typography>
         <Typography variant="display2">{SAMPLE}</Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">display3 — 40px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          display3 — 40px
+        </Typography>
         <Typography variant="display3">{SAMPLE}</Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">displaySm — 32px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          displaySm — 32px
+        </Typography>
         <Typography variant="displaySm">{SAMPLE}</Typography>
       </div>
     </div>
@@ -90,27 +114,39 @@ export const Headings: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       <div>
-        <Typography variant="captionSm" color="textSecondary">h1 — 36px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          h1 — 36px
+        </Typography>
         <Typography variant="h1">{SAMPLE}</Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">h2 — 30px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          h2 — 30px
+        </Typography>
         <Typography variant="h2">{SAMPLE}</Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">h3 — 24px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          h3 — 24px
+        </Typography>
         <Typography variant="h3">{SAMPLE}</Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">h4 — 20px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          h4 — 20px
+        </Typography>
         <Typography variant="h4">{SAMPLE}</Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">h5 — 18px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          h5 — 18px
+        </Typography>
         <Typography variant="h5">{SAMPLE}</Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">h6 — 16px</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          h6 — 16px
+        </Typography>
         <Typography variant="h6">{SAMPLE}</Typography>
       </div>
     </div>
@@ -125,31 +161,39 @@ export const Body: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 640 }}>
       <div>
-        <Typography variant="overline" gutterBottom>bodyLg — 18px</Typography>
+        <Typography variant="overline" gutterBottom>
+          bodyLg — 18px
+        </Typography>
         <Typography variant="bodyLg">
-          Planning a funeral is one of the most difficult tasks a family faces. Funeral Arranger
-          is here to help you navigate this process with care and transparency.
+          Planning a funeral is one of the most difficult tasks a family faces. Funeral Arranger is
+          here to help you navigate this process with care and transparency.
         </Typography>
       </div>
       <div>
-        <Typography variant="overline" gutterBottom>body1 (default) — 16px</Typography>
+        <Typography variant="overline" gutterBottom>
+          body1 (default) — 16px
+        </Typography>
         <Typography variant="body1">
           Compare funeral directors in your area, view transparent pricing, and make informed
           decisions at your own pace. Every family deserves clarity during this time.
         </Typography>
       </div>
       <div>
-        <Typography variant="overline" gutterBottom>body2 (small) — 14px</Typography>
+        <Typography variant="overline" gutterBottom>
+          body2 (small) — 14px
+        </Typography>
         <Typography variant="body2">
-          Prices shown are indicative and may vary based on your specific requirements.
-          Contact the funeral director directly for a detailed quote.
+          Prices shown are indicative and may vary based on your specific requirements. Contact the
+          funeral director directly for a detailed quote.
         </Typography>
       </div>
       <div>
-        <Typography variant="overline" gutterBottom>bodyXs — 12px</Typography>
+        <Typography variant="overline" gutterBottom>
+          bodyXs — 12px
+        </Typography>
         <Typography variant="bodyXs">
-          Terms and conditions apply. Funeral Arranger is a comparison service and does not
-          directly provide funeral services. ABN 12 345 678 901.
+          Terms and conditions apply. Funeral Arranger is a comparison service and does not directly
+          provide funeral services. ABN 12 345 678 901.
         </Typography>
       </div>
     </div>
@@ -164,32 +208,60 @@ export const UIText: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
       <div>
-        <Typography variant="captionSm" color="textSecondary">labelLg — 16px medium</Typography>
-        <Typography variant="labelLg" display="block">Form label or section label</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          labelLg — 16px medium
+        </Typography>
+        <Typography variant="labelLg" display="block">
+          Form label or section label
+        </Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">label — 14px medium</Typography>
-        <Typography variant="label" display="block">Default form label</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          label — 14px medium
+        </Typography>
+        <Typography variant="label" display="block">
+          Default form label
+        </Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">labelSm — 12px medium</Typography>
-        <Typography variant="labelSm" display="block">Compact label or tag text</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          labelSm — 12px medium
+        </Typography>
+        <Typography variant="labelSm" display="block">
+          Compact label or tag text
+        </Typography>
       </div>
       <div style={{ marginTop: 8 }}>
-        <Typography variant="captionSm" color="textSecondary">caption — 12px regular</Typography>
-        <Typography variant="caption" display="block">Fine print, timestamps, metadata</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          caption — 12px regular
+        </Typography>
+        <Typography variant="caption" display="block">
+          Fine print, timestamps, metadata
+        </Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">captionSm — 11px regular</Typography>
-        <Typography variant="captionSm" display="block">Compact metadata, footnotes</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          captionSm — 11px regular
+        </Typography>
+        <Typography variant="captionSm" display="block">
+          Compact metadata, footnotes
+        </Typography>
       </div>
       <div style={{ marginTop: 8 }}>
-        <Typography variant="captionSm" color="textSecondary">overline — 12px semibold uppercase</Typography>
-        <Typography variant="overline" display="block">Section overline</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          overline — 12px semibold uppercase
+        </Typography>
+        <Typography variant="overline" display="block">
+          Section overline
+        </Typography>
       </div>
       <div>
-        <Typography variant="captionSm" color="textSecondary">overlineSm — 11px semibold uppercase</Typography>
-        <Typography variant="overlineSm" display="block">Compact overline</Typography>
+        <Typography variant="captionSm" color="textSecondary">
+          overlineSm — 11px semibold uppercase
+        </Typography>
+        <Typography variant="overlineSm" display="block">
+          Compact overline
+        </Typography>
       </div>
     </div>
   ),
@@ -222,20 +294,25 @@ export const FontFamilies: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
       <div>
-        <Typography variant="overline" gutterBottom>Display font — Noto Serif SC (Regular 400)</Typography>
-        <Typography variant="display3">
-          Warm, trustworthy, and professional
+        <Typography variant="overline" gutterBottom>
+          Display font — Noto Serif SC (Regular 400)
         </Typography>
+        <Typography variant="display3">Warm, trustworthy, and professional</Typography>
         <Typography variant="caption" color="textSecondary" sx={{ mt: 1 }}>
-          Used exclusively for display variants (hero through sm). Regular weight — serif carries inherent visual weight at large sizes.
+          Used exclusively for display variants (hero through sm). Regular weight — serif carries
+          inherent visual weight at large sizes.
         </Typography>
       </div>
       <div>
-        <Typography variant="overline" gutterBottom>Body font — Montserrat</Typography>
-        <Typography variant="h3" gutterBottom>Clean, modern, and highly readable</Typography>
+        <Typography variant="overline" gutterBottom>
+          Body font — Montserrat
+        </Typography>
+        <Typography variant="h3" gutterBottom>
+          Clean, modern, and highly readable
+        </Typography>
         <Typography>
-          Used for all headings (h1–h6), body text, labels, captions, and UI elements.
-          Headings use Bold (700), body uses Medium (500), captions use Regular (400).
+          Used for all headings (h1–h6), body text, labels, captions, and UI elements. Headings use
+          Bold (700), body uses Medium (500), captions use Regular (400).
         </Typography>
       </div>
     </div>
@@ -249,18 +326,21 @@ export const MaxLines: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 400 }}>
       <div>
-        <Typography variant="label" gutterBottom>maxLines=1</Typography>
+        <Typography variant="label" gutterBottom>
+          maxLines=1
+        </Typography>
         <Typography maxLines={1}>
-          H. Parsons Funeral Directors — trusted by Australian families for over 30 years,
-          providing compassionate and transparent funeral services.
+          H. Parsons Funeral Directors — trusted by Australian families for over 30 years, providing
+          compassionate and transparent funeral services.
         </Typography>
       </div>
       <div>
-        <Typography variant="label" gutterBottom>maxLines=2</Typography>
+        <Typography variant="label" gutterBottom>
+          maxLines=2
+        </Typography>
         <Typography maxLines={2}>
-          H. Parsons Funeral Directors — trusted by Australian families for over 30 years,
-          providing compassionate and transparent funeral services across metropolitan
-          and regional areas.
+          H. Parsons Funeral Directors — trusted by Australian families for over 30 years, providing
+          compassionate and transparent funeral services across metropolitan and regional areas.
         </Typography>
       </div>
     </div>
@@ -276,23 +356,27 @@ export const RealisticContent: Story = {
       <Typography variant="overline">Funeral planning</Typography>
       <Typography variant="display3">Compare funeral services in your area</Typography>
       <Typography variant="bodyLg" color="textSecondary">
-        Transparent pricing and service comparison to help you make informed
-        decisions during a difficult time.
+        Transparent pricing and service comparison to help you make informed decisions during a
+        difficult time.
       </Typography>
-      <Typography variant="h2" sx={{ mt: 2 }}>How it works</Typography>
-      <Typography>
-        Enter your suburb or postcode to find funeral directors near you. Each
-        listing includes a full price breakdown, service inclusions, and reviews
-        from families who have used their services.
+      <Typography variant="h2" sx={{ mt: 2 }}>
+        How it works
       </Typography>
-      <Typography variant="h3" sx={{ mt: 1 }}>Step 1: Browse packages</Typography>
       <Typography>
-        Compare packages side by side. Each package clearly shows what is and
-        isn't included, so there are no surprises.
+        Enter your suburb or postcode to find funeral directors near you. Each listing includes a
+        full price breakdown, service inclusions, and reviews from families who have used their
+        services.
+      </Typography>
+      <Typography variant="h3" sx={{ mt: 1 }}>
+        Step 1: Browse packages
+      </Typography>
+      <Typography>
+        Compare packages side by side. Each package clearly shows what is and isn't included, so
+        there are no surprises.
       </Typography>
       <Typography variant="caption" color="textSecondary" sx={{ mt: 2 }}>
-        Prices are indicative and current as of March 2026. Contact the funeral
-        director for a binding quote.
+        Prices are indicative and current as of March 2026. Contact the funeral director for a
+        binding quote.
       </Typography>
     </div>
   ),
@@ -333,7 +417,11 @@ export const CompleteScale: Story = {
       <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
         {variants.map(({ variant, label }) => (
           <div key={variant} style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
-            <Typography variant="captionSm" color="textSecondary" sx={{ width: 160, flexShrink: 0, textAlign: 'right' }}>
+            <Typography
+              variant="captionSm"
+              color="textSecondary"
+              sx={{ width: 160, flexShrink: 0, textAlign: 'right' }}
+            >
               {label}
             </Typography>
             <Typography variant={variant}>{SAMPLE}</Typography>