From 7193dd8a638a31bdb0bebd8c617a5b025efad04a Mon Sep 17 00:00:00 2001
From: Joshua Mitchell <josh@sylken.io>
Date: Sat, 20 Sep 2025 20:34:14 -0400
Subject: [PATCH 1/4] removed cssVariables.cjs due to it only being used for
 the Image component

---
 cssVariables.cjs | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 cssVariables.cjs

diff --git a/cssVariables.cjs b/cssVariables.cjs
deleted file mode 100644
index 89fbedf9b..000000000
--- a/cssVariables.cjs
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  breakpoints: {
-    s: 768,
-    m: 1024,
-    l: 1440,
-  },
-}

From f0546f3b2d4ea4bd0c4d636d9cf99dc6e4efd442 Mon Sep 17 00:00:00 2001
From: sylkenio <josh@sylken.io>
Date: Sun, 21 Sep 2025 04:50:47 -0400
Subject: [PATCH 2/4] feat: add utility to format image breakpoints for Next.js

---
 src/utilities/image-sizes.ts | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/utilities/image-sizes.ts

diff --git a/src/utilities/image-sizes.ts b/src/utilities/image-sizes.ts
new file mode 100644
index 000000000..537496e53
--- /dev/null
+++ b/src/utilities/image-sizes.ts
@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* perfectionist/sort-objects complaining about order of breakpoints */
+
+/**
+ * Formats object literals into strings that conform
+ * to Next.js's `sizes` prop for the Image component.
+ * 
+ * The utility function `stringifyBreakpoints({size: number})` 
+ * can be imported to create custom breakpoints for specific
+ * `Image` components if needed.
+ * 
+ */
+
+type Breakpoint = {
+  [size: string]: number
+}
+
+export const stringifyBreakpoints = <B extends Breakpoint>(
+  breakpoints: B
+): string => {
+  return Object.entries(breakpoints)
+    .map(([, width]) => `(max-width: ${width}px) ${width}px`)
+    .join(', ')
+}
+
+export const standardSizes = stringifyBreakpoints({s: 768, m: 1024, l: 1440})
\ No newline at end of file

From 0ed1fefd3fad428d43273fa39ee49ff1ddf52ce4 Mon Sep 17 00:00:00 2001
From: sylkenio <josh@sylken.io>
Date: Sun, 21 Sep 2025 04:51:12 -0400
Subject: [PATCH 3/4] refactor: rename Props interface to MediaProps for
 clarity

---
 src/components/Media/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Media/types.ts b/src/components/Media/types.ts
index c3bd3c88a..714f93461 100644
--- a/src/components/Media/types.ts
+++ b/src/components/Media/types.ts
@@ -2,7 +2,7 @@ import type { StaticImageData } from 'next/image'
 import type { TypedUploadCollection, UploadCollectionSlug } from 'payload'
 import type { ElementType, Ref } from 'react'
 
-export interface Props {
+export interface MediaProps {
   alt?: string
   className?: string
   fill?: boolean // for NextImage only

From 66a7b16baf7d80e955c9e265850d7fe477347f20 Mon Sep 17 00:00:00 2001
From: sylkenio <josh@sylken.io>
Date: Sun, 21 Sep 2025 04:51:27 -0400
Subject: [PATCH 4/4] refactor: update Image component to use MediaProps and
 clean up imports

---
 src/components/Media/Image/index.tsx | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/components/Media/Image/index.tsx b/src/components/Media/Image/index.tsx
index f4b89e477..1ec11d01e 100644
--- a/src/components/Media/Image/index.tsx
+++ b/src/components/Media/Image/index.tsx
@@ -1,18 +1,15 @@
 'use client'
 
+import type { MediaProps } from '@components/Media/types'
 import type { StaticImageData } from 'next/image'
 
+import { standardSizes } from '@utilities/image-sizes'
 import NextImage from 'next/image'
-import React, { useState } from 'react'
+import React from 'react'
 
-import type { Props } from '../types'
-
-import cssVariables from '../../../../cssVariables.cjs'
 import classes from './index.module.scss'
 
-const { breakpoints } = cssVariables
-
-export const Image: React.FC<Props> = (props) => {
+export const Image: React.FC<MediaProps> = (props) => {
   const {
     alt: altFromProps,
     fill,
@@ -27,12 +24,13 @@ export const Image: React.FC<Props> = (props) => {
     width: widthFromProps,
   } = props
 
-  const [isLoading, setIsLoading] = useState(true)
+  const [isLoading, setIsLoading] = React.useState(true)
 
   let width: null | number | undefined = widthFromProps
   let height: null | number | undefined = heightFromProps
   let alt = altFromProps
   let src: null | StaticImageData | string | undefined = srcFromProps
+  const sizes = sizesFromProps || standardSizes
 
   const hasDarkModeFallback =
     resource?.darkModeFallback &&
@@ -47,13 +45,6 @@ export const Image: React.FC<Props> = (props) => {
     src = resource.url
   }
 
-  // NOTE: this is used by the browser to determine which image to download at different screen sizes
-  const sizes =
-    sizesFromProps ||
-    Object.entries(breakpoints)
-      .map(([, value]) => `(max-width: ${value}px) ${value}px`)
-      .join(', ')
-
   const baseClasses = [
     isLoading && classes.placeholder,
     classes.image,