diff --git a/.changeset/tender-suits-punch.md b/.changeset/tender-suits-punch.md
new file mode 100644
index 0000000000..850d133eaf
--- /dev/null
+++ b/.changeset/tender-suits-punch.md
@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': minor
+---
+
+Added responsiveStyle and mapToProperty styling utility functions
diff --git a/packages/apps/docs/src/components/Blog/BlogItem/styles.css.ts b/packages/apps/docs/src/components/Blog/BlogItem/styles.css.ts
index 4cb3a3cf16..872f65f034 100644
--- a/packages/apps/docs/src/components/Blog/BlogItem/styles.css.ts
+++ b/packages/apps/docs/src/components/Blog/BlogItem/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { style, styleVariants } from '@vanilla-extract/css';
 
@@ -76,12 +76,12 @@ export const figureClass = style([
   {
     width: `100%`,
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         width: `clamp(${vars.sizes.$32}, 15vw, ${vars.sizes.$48})`,
         aspectRatio: '1',
       },
-    },
+    }),
   },
 ]);
 
@@ -89,20 +89,20 @@ export const figureVariant = styleVariants({
   default: {
     width: '100%',
     aspectRatio: '16 / 3',
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         width: `clamp(${vars.sizes.$32}, 15vw, ${vars.sizes.$48})`,
       },
-    },
+    }),
   },
   large: {
     width: '100%',
     aspectRatio: '16 / 7',
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         width: `clamp(${vars.sizes.$48}, 20vw, ${vars.sizes.$64})`,
       },
-    },
+    }),
   },
 });
 
@@ -130,12 +130,12 @@ export const gridWrapperClass = style([
       "header"
     `,
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         gridTemplateAreas: `
         "header image"
       `,
       },
-    },
+    }),
   },
 ]);
diff --git a/packages/apps/docs/src/components/BlogPostsStrip/styles.css.ts b/packages/apps/docs/src/components/BlogPostsStrip/styles.css.ts
index 2831b71c0d..157ee36512 100644
--- a/packages/apps/docs/src/components/BlogPostsStrip/styles.css.ts
+++ b/packages/apps/docs/src/components/BlogPostsStrip/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles } from '@kadena/react-ui/theme';
 
 import type { ComplexStyleRule } from '@vanilla-extract/css';
 import { style } from '@vanilla-extract/css';
@@ -29,17 +29,16 @@ export const stripItemWrapperClass = style([
       },
     },
 
-    '@media': {
-      [`screen and ${breakpoints.lg}`]: {
+    ...responsiveStyle({
+      lg: {
         flex: '33%',
-
         selectors: {
           '&:last-child': {
             display: 'none',
           },
         },
       },
-    },
+    }),
   },
 ]);
 
diff --git a/packages/apps/docs/src/components/BottomPageSection/styles.css.ts b/packages/apps/docs/src/components/BottomPageSection/styles.css.ts
index bdffd3fdd9..7b5f427245 100644
--- a/packages/apps/docs/src/components/BottomPageSection/styles.css.ts
+++ b/packages/apps/docs/src/components/BottomPageSection/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles } from '@kadena/react-ui/theme';
 
 import { style } from '@vanilla-extract/css';
 
@@ -9,15 +9,13 @@ export const bottomWrapperClass = style([
   }),
 ]);
 
-export const bottomWrapperCodeLayoutClass = style([
-  {
-    '@media': {
-      [`screen and ${breakpoints.xl}`]: {
-        width: '56%',
-      },
-      [`screen and ${breakpoints.xxl}`]: {
-        width: '60%',
-      },
+export const bottomWrapperCodeLayoutClass = style(
+  responsiveStyle({
+    xl: {
+      width: '56%',
     },
-  },
-]);
+    xxl: {
+      width: '60%',
+    },
+  }),
+);
diff --git a/packages/apps/docs/src/components/BrowseSection/styles.css.ts b/packages/apps/docs/src/components/BrowseSection/styles.css.ts
index 72bf0eeafb..4bad539b41 100644
--- a/packages/apps/docs/src/components/BrowseSection/styles.css.ts
+++ b/packages/apps/docs/src/components/BrowseSection/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { style, styleVariants } from '@vanilla-extract/css';
 
@@ -21,11 +21,11 @@ export const directionVariants = styleVariants({
       rowGap: 0,
       flexDirection: 'column',
 
-      '@media': {
-        [`screen and ${breakpoints.md}`]: {
+      ...responsiveStyle({
+        md: {
           flexDirection: 'row',
         },
-      },
+      }),
     },
   ],
   column: [
@@ -68,11 +68,12 @@ export const listItemClass = style([
   }),
   {
     flexBasis: '50%',
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+
+    ...responsiveStyle({
+      md: {
         flexBasis: '33%',
       },
-    },
+    }),
   },
 ]);
 
diff --git a/packages/apps/docs/src/components/DocsCard/styles.css.ts b/packages/apps/docs/src/components/DocsCard/styles.css.ts
index 0571b6d911..eb37344fc3 100644
--- a/packages/apps/docs/src/components/DocsCard/styles.css.ts
+++ b/packages/apps/docs/src/components/DocsCard/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { style, styleVariants } from '@vanilla-extract/css';
 
@@ -70,12 +70,12 @@ export const backgroundVariant = styleVariants({
     backgroundPosition: 'right -150px bottom -150px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -250px bottom -250px',
         backgroundSize: '500px',
       },
-    },
+    }),
   },
   contribute: {
     backgroundRepeat: 'no-repeat',
@@ -83,12 +83,12 @@ export const backgroundVariant = styleVariants({
     backgroundPosition: 'right -165px bottom -120px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -300px bottom -200px',
         backgroundSize: '500px',
       },
-    },
+    }),
   },
   quickstart: {
     backgroundRepeat: 'no-repeat',
@@ -96,12 +96,12 @@ export const backgroundVariant = styleVariants({
     backgroundPosition: 'right -140px bottom -120px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -220px bottom -220px',
         backgroundSize: '500px',
       },
-    },
+    }),
   },
   smartwallet: {
     backgroundRepeat: 'no-repeat',
@@ -109,12 +109,12 @@ export const backgroundVariant = styleVariants({
     backgroundPosition: 'right -140px bottom -120px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -320px bottom -120px',
         backgroundSize: '500px',
       },
-    },
+    }),
   },
   react: {
     backgroundRepeat: 'no-repeat',
@@ -122,12 +122,12 @@ export const backgroundVariant = styleVariants({
     backgroundPosition: 'right -140px bottom -120px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -250px bottom -220px',
         backgroundSize: '450px',
       },
-    },
+    }),
   },
   marmalade: {
     backgroundRepeat: 'no-repeat',
@@ -135,12 +135,12 @@ export const backgroundVariant = styleVariants({
     backgroundPosition: 'right -140px bottom -120px',
     backgroundSize: '300px',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         backgroundPosition: 'right -200px bottom -220px',
         backgroundSize: '450px',
       },
-    },
+    }),
   },
   default: {},
 });
diff --git a/packages/apps/docs/src/components/Layout/Blog/styles.css.ts b/packages/apps/docs/src/components/Layout/Blog/styles.css.ts
index 3f511cd8ed..21d62b5e3b 100644
--- a/packages/apps/docs/src/components/Layout/Blog/styles.css.ts
+++ b/packages/apps/docs/src/components/Layout/Blog/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { style } from '@vanilla-extract/css';
 
@@ -38,28 +38,27 @@ export const pageGridClass = style({
             "footer footer"
           `,
 
-  '@media': {
-    [`screen and ${breakpoints.md}`]: {
+  ...responsiveStyle({
+    md: {
       gridTemplateColumns: '0% 5% auto 5%',
 
       gridTemplateAreas: `
-              "header header header header"
-              "pageheader pageheader pageheader pageheader"
-              ". content . ."
-              "footer footer footer footer"
-            `,
+                      "header header header header"
+                      "pageheader pageheader pageheader pageheader"
+                      ". content . ."
+                      "footer footer footer footer"
+                    `,
     },
-
-    [`screen and ${breakpoints.xxl}`]: {
+    xxl: {
       gridTemplateColumns: '0% minmax(20%, auto) auto minmax(20%, auto)',
       gridTemplateAreas: `
-              "header header header header"
-              "pageheader pageheader pageheader pageheader"
-              ". content ."
-              "footer footer footer footer"
-            `,
+                      "header header header header"
+                      "pageheader pageheader pageheader pageheader"
+                      ". content ."
+                      "footer footer footer footer"
+                    `,
     },
-  },
+  }),
 });
 
 export const articleMetaDataItemClass = style({
diff --git a/packages/apps/docs/src/components/Layout/Full/styles.css.ts b/packages/apps/docs/src/components/Layout/Full/styles.css.ts
index 66d3d7cbd8..77b2e78f22 100644
--- a/packages/apps/docs/src/components/Layout/Full/styles.css.ts
+++ b/packages/apps/docs/src/components/Layout/Full/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import {
   $$asideMenuWidthLGDefault,
@@ -38,29 +38,29 @@ export const asidebackgroundClass = style([
         transition: 'transform 1s ease, opacity 2s  ease-out',
         transitionDelay: '600ms',
 
-        '@media': {
-          [`screen and ${breakpoints.xxl}`]: {
+        ...responsiveStyle({
+          xxl: {
             backgroundPositionX: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2 ) - (${$$asideMenuWidthLGDefault} +  ${$$shadowWidth}))`,
           },
-        },
+        }),
       },
       '&::after': {
-        '@media': {
-          [`screen and ${breakpoints.md}`]: {
+        ...responsiveStyle({
+          md: {
             left: `calc(100vw  - (${$$asideMenuWidthMDDefault} + ${vars.sizes.$4}))`,
           },
-          [`screen and ${breakpoints.xxl}`]: {
+          xxl: {
             left: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2) - ${$$asideMenuWidthLGDefault})`,
           },
-        },
+        }),
       },
     },
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         display: 'block',
       },
-    },
+    }),
   },
 ]);
 
@@ -73,16 +73,16 @@ export const loadedClass = style({
   },
 });
 
-export const pageGridClass = style({
-  '@media': {
-    [`screen and ${breakpoints.md}`]: {
+export const pageGridClass = style(
+  responsiveStyle({
+    md: {
       gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth} - ${$$asideMenuWidthMDDefault})) ${$$asideMenuWidthMDDefault} 1%`,
     },
-    [`screen and ${breakpoints.xxl}`]: {
+    xxl: {
       gridTemplateColumns: `auto ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth} - ${$$asideMenuWidthLGDefault})) ${$$asideMenuWidthLGDefault} auto`,
     },
-  },
-});
+  }),
+);
 
 export const stickyAsideWrapperClass = style([
   sprinkles({
@@ -119,11 +119,11 @@ export const asideClass = style([
     zIndex: $$sideMenu,
     transform: 'translateX(100vw)',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         display: 'block',
         transform: 'translateX(0)',
       },
-    },
+    }),
   },
 ]);
diff --git a/packages/apps/docs/src/components/Layout/Home/styles.css.ts b/packages/apps/docs/src/components/Layout/Home/styles.css.ts
index 81fab7330b..54d6fd85d4 100644
--- a/packages/apps/docs/src/components/Layout/Home/styles.css.ts
+++ b/packages/apps/docs/src/components/Layout/Home/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { $$asideMenuWidthCode } from '../basestyles.css';
 import {
@@ -30,38 +30,40 @@ export const codebackgroundClass = style([
         backgroundRepeat: 'no-repeat',
         backgroundPositionY: '-100px',
         backgroundPositionX: '-100px',
-        '@media': {
-          [`screen and ${breakpoints.md}`]: {
+
+        ...responsiveStyle({
+          md: {
             backgroundColor: 'transparent',
             backgroundPositionX: `calc(100vw  - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
           },
-          [`screen and ${breakpoints.lg}`]: {
+          lg: {
             backgroundPositionX: `calc(100vw  - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
           },
-          [`screen and ${breakpoints.xl}`]: {
+          xl: {
             display: 'block',
           },
-          [`screen and ${breakpoints.xxl}`]: {
+          xxl: {
             backgroundPositionX: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2 ) - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
           },
-        },
+        }),
       },
       '&::after': {
         backgroundColor: 'transparent',
-        '@media': {
-          [`screen and ${breakpoints.md}`]: {
+
+        ...responsiveStyle({
+          md: {
             left: `calc(100vw  - (${$$asideMenuWidthCode} +  ${vars.sizes.$4}))`,
           },
-          [`screen and ${breakpoints.lg}`]: {
+          lg: {
             left: `calc(100vw  - (${$$asideMenuWidthCode} +  ${vars.sizes.$4}  + ${vars.sizes.$4}))`,
           },
-          [`screen and ${breakpoints.xl}`]: {
+          xl: {
             backgroundColor: $$backgroundOverlayColor,
           },
-          [`screen and ${breakpoints.xxl}`]: {
+          xxl: {
             left: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2) - (${$$asideMenuWidthCode} + ${vars.sizes.$6} ))`,
           },
-        },
+        }),
       },
     },
   },
@@ -75,19 +77,19 @@ export const pageGridClass = style({
           "content content"
           "footer footer"
         `,
-  '@media': {
-    [`screen and ${breakpoints.md}`]: {
+  ...responsiveStyle({
+    md: {
       gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) 1%`,
 
       gridTemplateAreas: `
-      "header header header header"
-      "pageheader pageheader pageheader pageheader"
-      ". menu content ."
-      "footer footer footer footer"
-      `,
+        "header header header header"
+        "pageheader pageheader pageheader pageheader"
+        ". menu content ."
+        "footer footer footer footer"
+        `,
     },
-    [`screen and ${breakpoints.xxl}`]: {
+    xxl: {
       gridTemplateColumns: `minmax(1%, auto) ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) minmax(1%, auto)`,
     },
-  },
+  }),
 });
diff --git a/packages/apps/docs/src/components/Layout/Landing/styles.css.ts b/packages/apps/docs/src/components/Layout/Landing/styles.css.ts
index 3ed3392387..41b500d3c6 100644
--- a/packages/apps/docs/src/components/Layout/Landing/styles.css.ts
+++ b/packages/apps/docs/src/components/Layout/Landing/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints } from '@kadena/react-ui/theme';
+import { responsiveStyle } from '@kadena/react-ui/theme';
 
 import { $$leftSideWidth, $$pageWidth } from '../global.css';
 
@@ -12,10 +12,10 @@ export const pageGridClass = style({
             "content content"
             "footer footer"
           `,
-  '@media': {
-    [`screen and ${breakpoints.md}`]: {
-      gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) 1%`,
 
+  ...responsiveStyle({
+    md: {
+      gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) 1%`,
       gridTemplateAreas: `
                 "header header header header"
                 "pageheader pageheader pageheader pageheader"
@@ -23,8 +23,8 @@ export const pageGridClass = style({
                 "footer footer footer footer"
               `,
     },
-    [`screen and ${breakpoints.xxl}`]: {
+    xxl: {
       gridTemplateColumns: `minmax(1%, auto) ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) minmax(1%, auto)`,
     },
-  },
+  }),
 });
diff --git a/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts b/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts
index 24c49ec39d..2106186be3 100644
--- a/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts
+++ b/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { $$asideMenuWidthCode } from '../basestyles.css';
 import {
@@ -37,40 +37,36 @@ export const codebackgroundClass = style([
         transition: 'transform 1.5s ease, opacity 3s ease-out',
         transitionDelay: '600ms',
 
-        '@media': {
-          [`screen and ${breakpoints.md}`]: {
+        ...responsiveStyle({
+          md: {
             backgroundColor: 'transparent',
             backgroundPositionX: `calc(100vw  - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
           },
-          [`screen and ${breakpoints.lg}`]: {
+          lg: {
             backgroundPositionX: `calc(100vw  - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
           },
-
-          [`screen and ${breakpoints.xxl}`]: {
+          xxl: {
             display: 'block',
             backgroundPositionX: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2 ) - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`,
           },
-        },
+        }),
       },
       '&::after': {
         backgroundColor: 'transparent',
-        '@media': {
-          [`screen and ${breakpoints.md}`]: {
+        ...responsiveStyle({
+          md: {
             left: `calc(100vw  - (${$$asideMenuWidthCode} +  ${vars.sizes.$4}))`,
           },
-
-          [`screen and ${breakpoints.lg}`]: {
+          lg: {
             left: `calc(100vw  - (${$$asideMenuWidthCode} +  ${vars.sizes.$20} ))`,
           },
-
-          [`screen and ${breakpoints.xl}`]: {
+          xl: {
             backgroundColor: $$backgroundOverlayColor,
           },
-
-          [`screen and ${breakpoints.xxl}`]: {
+          xxl: {
             left: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2) - (${$$asideMenuWidthCode} + ${vars.sizes.$6} ))`,
           },
-        },
+        }),
       },
     },
   },
@@ -93,19 +89,19 @@ export const pageGridClass = style({
           "content content"
           "footer footer"
         `,
-  '@media': {
-    [`screen and ${breakpoints.md}`]: {
-      gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) 1%`,
 
+  ...responsiveStyle({
+    md: {
+      gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) 1%`,
       gridTemplateAreas: `
-      "header header header header"
-      "pageheader pageheader pageheader pageheader"
-      ". menu content ."
-      "footer footer footer footer"
-      `,
+            "header header header header"
+            "pageheader pageheader pageheader pageheader"
+            ". menu content ."
+            "footer footer footer footer"
+            `,
     },
-    [`screen and ${breakpoints.xxl}`]: {
+    xxl: {
       gridTemplateColumns: `minmax(1%, auto) ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) minmax(1%, auto)`,
     },
-  },
+  }),
 });
diff --git a/packages/apps/docs/src/components/Layout/basestyles.css.ts b/packages/apps/docs/src/components/Layout/basestyles.css.ts
index bf406d6344..656e65a1be 100644
--- a/packages/apps/docs/src/components/Layout/basestyles.css.ts
+++ b/packages/apps/docs/src/components/Layout/basestyles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import {
   $$backgroundOverlayColor,
@@ -43,12 +43,12 @@ export const basebackgroundClass = style([
       },
     },
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         position: 'fixed',
         transform: 'translateX(0)',
       },
-    },
+    }),
   },
 ]);
 
@@ -81,8 +81,8 @@ export const baseGridClass = style([
 
     minHeight: '100vh',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth} - ${$$asideMenuWidthMDDefault})) ${$$asideMenuWidthMDDefault} 1%`,
         gridTemplateAreas: `
           "header header header header header"
@@ -91,7 +91,7 @@ export const baseGridClass = style([
           "footer footer footer footer footer"
         `,
       },
-      [`screen and ${breakpoints.xxl}`]: {
+      xxl: {
         gridTemplateAreas: `
           "header header header header header"
           "pageheader pageheader pageheader pageheader pageheader"
@@ -100,6 +100,6 @@ export const baseGridClass = style([
         `,
         gridTemplateColumns: `minmax(1%, auto) ${$$leftSideWidth} calc(${$$pageWidth} - ${$$leftSideWidth}) 0 minmax(1%, auto)`,
       },
-    },
+    }),
   },
 ]);
diff --git a/packages/apps/docs/src/components/Layout/components/Header/styles.css.ts b/packages/apps/docs/src/components/Layout/components/Header/styles.css.ts
index e53581d1f7..10e0190902 100644
--- a/packages/apps/docs/src/components/Layout/components/Header/styles.css.ts
+++ b/packages/apps/docs/src/components/Layout/components/Header/styles.css.ts
@@ -1,6 +1,6 @@
 import {
-  breakpoints,
   darkThemeClass,
+  responsiveStyle,
   sprinkles,
   vars,
 } from '@kadena/react-ui/theme';
@@ -60,11 +60,11 @@ export const hamburgerButtonClass = style([
       },
     },
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         display: 'none',
       },
-    },
+    }),
   },
 ]);
 
@@ -169,11 +169,11 @@ export const headerIconGroupClass = style([
 
 export const socialGroupClass = style({
   display: 'none',
-  '@media': {
-    [`screen and ${breakpoints.lg}`]: {
+  ...responsiveStyle({
+    lg: {
       display: 'flex',
     },
-  },
+  }),
 });
 
 export const animationBackgroundClass = style([
@@ -201,13 +201,11 @@ export const navClass = style([
     alignItems: 'center',
     zIndex: 1,
   }),
-  {
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        display: 'flex',
-      },
+  responsiveStyle({
+    md: {
+      display: 'flex',
     },
-  },
+  }),
 ]);
 
 export const ulClass = style([
@@ -268,11 +266,9 @@ export const hideOnMobileClass = style([
   sprinkles({
     display: 'none',
   }),
-  {
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        display: 'flex',
-      },
+  responsiveStyle({
+    md: {
+      display: 'flex',
     },
-  },
+  }),
 ]);
diff --git a/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts b/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts
index 88ba562cad..35a15141ff 100644
--- a/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts
+++ b/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { $$leftSideWidth, $$sideMenu } from '../../global.css';
 
@@ -22,11 +22,11 @@ export const menuClass = style([
     borderRight: '1px solid $borderColor',
     transform: 'translateX(-100%)',
     transition: 'transform .3s ease, width .3s ease',
-    '@media': {
-      [`screen and ${breakpoints.sm}`]: {
+    ...responsiveStyle({
+      sm: {
         width: $$leftSideWidth,
       },
-      [`screen and ${breakpoints.md}`]: {
+      md: {
         position: 'sticky',
         top: vars.sizes.$18,
         bottom: 'auto',
@@ -35,7 +35,7 @@ export const menuClass = style([
         background: 'transparent',
         paddingBottom: vars.sizes.$40,
       },
-    },
+    }),
   },
 ]);
 
@@ -44,11 +44,7 @@ export const menuOpenVariants = styleVariants({
   isClosed: {
     transform: 'translateX(-100%)',
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        transform: 'translateX(0)',
-      },
-    },
+    ...responsiveStyle({ md: { transform: 'translateX(0)' } }),
   },
 });
 
@@ -62,24 +58,12 @@ export const menuInLayoutVariants = styleVariants({
     sprinkles({
       display: 'block',
     }),
-    {
-      '@media': {
-        [`screen and ${breakpoints.md}`]: {
-          display: 'none',
-        },
-      },
-    },
+    responsiveStyle({ md: { display: 'none' } }),
   ],
 });
 
 export const menuLayoutVariants = styleVariants({
-  landing: {
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        paddingTop: '290px',
-      },
-    },
-  },
+  landing: responsiveStyle({ md: { paddingTop: '290px' } }),
   normal: {},
 });
 
@@ -100,12 +84,7 @@ export const menuBackClass = style([
     transition: 'opacity .5s ease, transform .1s ease',
     zIndex: `calc(${$$sideMenu} - 1)`,
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        opacity: 0,
-        pointerEvents: 'none',
-      },
-    },
+    ...responsiveStyle({ md: { opacity: 0, pointerEvents: 'none' } }),
   },
 ]);
 
@@ -113,12 +92,8 @@ export const menuBackOpenVariants = styleVariants({
   isOpen: {
     transform: 'translateX(0)',
     opacity: 1,
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        transform: 'translateX(-100%)',
-        opacity: 0,
-      },
-    },
+
+    ...responsiveStyle({ md: { transform: 'translateX(-100%)', opacity: 0 } }),
   },
   isClosed: {
     transform: 'translateX(-100%)',
diff --git a/packages/apps/docs/src/components/Layout/components/SideMenu/menuCard.css.ts b/packages/apps/docs/src/components/Layout/components/SideMenu/menuCard.css.ts
index 0d7d300d5e..c191b1a54e 100644
--- a/packages/apps/docs/src/components/Layout/components/SideMenu/menuCard.css.ts
+++ b/packages/apps/docs/src/components/Layout/components/SideMenu/menuCard.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles } from '@kadena/react-ui/theme';
 
 import { style, styleVariants } from '@vanilla-extract/css';
 
@@ -11,11 +11,8 @@ export const menuCardClass = style([
   }),
   {
     transition: 'transform .2s ease',
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        overflowY: 'scroll',
-      },
-    },
+
+    ...responsiveStyle({ md: { overflowY: 'scroll' } }),
   },
 ]);
 
diff --git a/packages/apps/docs/src/components/Layout/components/TitleHeader/style.css.ts b/packages/apps/docs/src/components/Layout/components/TitleHeader/style.css.ts
index 2e74c5f524..fa85340091 100644
--- a/packages/apps/docs/src/components/Layout/components/TitleHeader/style.css.ts
+++ b/packages/apps/docs/src/components/Layout/components/TitleHeader/style.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { $$backgroundOverlayColor, $$pageWidth } from '../../global.css';
 
@@ -42,18 +42,10 @@ export const headerWrapperClass = style([
 
         transition: 'transform 1s ease, opacity 2s  ease-out',
         transitionDelay: '600ms',
-
-        '@media': {
-          [`screen and ${breakpoints.md}`]: {},
-        },
       },
     },
 
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        zIndex: 101,
-      },
-    },
+    ...responsiveStyle({ md: { zIndex: 101 } }),
   },
 ]);
 
diff --git a/packages/apps/docs/src/components/Layout/components/articleStyles.css.ts b/packages/apps/docs/src/components/Layout/components/articleStyles.css.ts
index f7449a17ca..df5c58aba2 100644
--- a/packages/apps/docs/src/components/Layout/components/articleStyles.css.ts
+++ b/packages/apps/docs/src/components/Layout/components/articleStyles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import type { LayoutType } from '@/Layout';
 import { style, styleVariants } from '@vanilla-extract/css';
@@ -11,11 +11,12 @@ export const articleClass = style([
   }),
   {
     paddingInline: vars.sizes.$4,
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+
+    ...responsiveStyle({
+      md: {
         paddingInline: vars.sizes.$10,
       },
-    },
+    }),
   },
 ]);
 
@@ -32,37 +33,34 @@ export const contentClass = style([
   {
     gridColumn: '1 / span 2',
     gridRow: '3 / span 1',
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+
+    ...responsiveStyle({
+      md: {
         gridColumn: '3 / span 1',
         gridRow: '3 / span 1',
       },
-    },
+    }),
   },
 ]);
 
 export const contentClassVariants: Record<LayoutType, string> = styleVariants({
-  home: {
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        gridColumn: '2 / span 3',
-      },
+  home: responsiveStyle({
+    md: {
+      gridColumn: '2 / span 3',
     },
-  },
-  code: {
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        gridColumn: '3 / span 1',
-      },
+  }),
+  code: responsiveStyle({
+    md: {
+      gridColumn: '3 / span 1',
     },
-  },
+  }),
   landing: {
     gridColumn: '1 / span 1',
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
+    ...responsiveStyle({
+      md: {
         gridColumn: '3 / span 1',
       },
-    },
+    }),
   },
   full: {},
   blog: {
diff --git a/packages/apps/docs/src/components/TagList/styles.css.ts b/packages/apps/docs/src/components/TagList/styles.css.ts
index 02485e6a55..d712a9dd45 100644
--- a/packages/apps/docs/src/components/TagList/styles.css.ts
+++ b/packages/apps/docs/src/components/TagList/styles.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles } from '@kadena/react-ui/theme';
 
 import { style } from '@vanilla-extract/css';
 
@@ -23,17 +23,17 @@ export const itemClass = style([
   {
     flex: '100%',
 
-    '@media': {
-      [`screen and ${breakpoints.sm}`]: {
+    ...responsiveStyle({
+      sm: {
         flex: '50%',
       },
-      [`screen and ${breakpoints.lg}`]: {
+      lg: {
         flex: '33%',
       },
-      [`screen and ${breakpoints.xl}`]: {
+      xl: {
         flex: '25%',
       },
-    },
+    }),
   },
 ]);
 export const itemLinkClass = style([
diff --git a/packages/apps/docs/src/hooks/useMediaQuery.ts b/packages/apps/docs/src/hooks/useMediaQuery.ts
index 0b4827deae..21e5c46eaa 100644
--- a/packages/apps/docs/src/hooks/useMediaQuery.ts
+++ b/packages/apps/docs/src/hooks/useMediaQuery.ts
@@ -1,4 +1,4 @@
-import { breakpoints } from '@kadena/react-ui';
+import { breakpoints } from '@kadena/react-ui/theme';
 
 import { useEffect, useState } from 'react';
 
diff --git a/packages/apps/docs/src/styles/index.css.ts b/packages/apps/docs/src/styles/index.css.ts
index b247411bc0..af5be420a0 100644
--- a/packages/apps/docs/src/styles/index.css.ts
+++ b/packages/apps/docs/src/styles/index.css.ts
@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+import { responsiveStyle, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import { style } from '@vanilla-extract/css';
 
@@ -9,11 +9,8 @@ const browseSectionWrapper = style([
   {
     flexBasis: '50%',
     rowGap: vars.sizes.$4,
-    '@media': {
-      [breakpoints.md]: {
-        flexBasis: '33%',
-      },
-    },
+
+    ...responsiveStyle({ md: { flexBasis: '33%' } }),
   },
 ]);
 
diff --git a/packages/libs/react-ui/package.json b/packages/libs/react-ui/package.json
index 64d2b0cf08..cf3677a97a 100644
--- a/packages/libs/react-ui/package.json
+++ b/packages/libs/react-ui/package.json
@@ -49,7 +49,9 @@
     "classnames": "^2.3.1",
     "css-loader": "~6.8.1",
     "focus-trap-react": "~10.2.1",
+    "lodash.isequal": "~4.5.0",
     "lodash.mapvalues": "^4.6.0",
+    "lodash.omit": "^4.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -85,7 +87,9 @@
     "@testing-library/react": "~14.0.0",
     "@testing-library/user-event": "~14.4.3",
     "@types/jest": "^29.5.3",
+    "@types/lodash.isequal": "~4.5.6",
     "@types/lodash.mapvalues": "^4.6.7",
+    "@types/lodash.omit": "^4.5.7",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.15",
     "@types/react-dom": "18.2.7",
@@ -95,6 +99,7 @@
     "babel-plugin-module-resolver": "^5.0.0",
     "chromatic": "6.20.0",
     "copyfiles": "2.4.1",
+    "csstype": "^3.1.2",
     "eslint": "^8.45.0",
     "eslint-import-resolver-typescript": "3.5.5",
     "eslint-plugin-import": "~2.27.5",
diff --git a/packages/libs/react-ui/src/components/Grid/Grid.css.ts b/packages/libs/react-ui/src/components/Grid/Grid.css.ts
index ff1a5551cc..26e1b1ec0e 100644
--- a/packages/libs/react-ui/src/components/Grid/Grid.css.ts
+++ b/packages/libs/react-ui/src/components/Grid/Grid.css.ts
@@ -1,5 +1,6 @@
 /* eslint @typescript-eslint/naming-convention: 0 */
-import { breakpoints, sprinkles } from '@theme/sprinkles.css';
+import { sprinkles } from '@theme/sprinkles.css';
+import { breakpoints, mapToProperty } from '@theme/themeUtils';
 import { style, styleVariants } from '@vanilla-extract/css';
 import mapValues from 'lodash.mapvalues';
 
@@ -26,21 +27,6 @@ export const gapVariants = styleVariants({
   $3xl: [sprinkles({ gridGap: '$3xl' })],
 });
 
-export const rowSpanVariants = styleVariants({
-  1: [{ gridRow: 'span 1' }],
-  2: [{ gridRow: 'span 2' }],
-  3: [{ gridRow: 'span 3' }],
-  4: [{ gridRow: 'span 4' }],
-  5: [{ gridRow: 'span 5' }],
-  6: [{ gridRow: 'span 6' }],
-  7: [{ gridRow: 'span 7' }],
-  8: [{ gridRow: 'span 8' }],
-  9: [{ gridRow: 'span 9' }],
-  10: [{ gridRow: 'span 10' }],
-  11: [{ gridRow: 'span 11' }],
-  12: [{ gridRow: 'span 12' }],
-});
-
 const columnCount: Record<number, number> = {
   1: 1,
   2: 2,
@@ -56,6 +42,10 @@ const columnCount: Record<number, number> = {
   12: 12,
 };
 
+export const rowSpanVariants = styleVariants(columnCount, (count) =>
+  mapToProperty('gridRow')(`span ${count}`),
+);
+
 export const containerColumnVariants = mapValues(breakpoints, (mediaQuery) => {
   return styleVariants(columnCount, (count) => {
     if (mediaQuery === '') {
diff --git a/packages/libs/react-ui/src/components/Modal/Modal.css.ts b/packages/libs/react-ui/src/components/Modal/Modal.css.ts
index 8aba9316ca..e814f59cd0 100644
--- a/packages/libs/react-ui/src/components/Modal/Modal.css.ts
+++ b/packages/libs/react-ui/src/components/Modal/Modal.css.ts
@@ -1,4 +1,5 @@
-import { breakpoints, sprinkles } from '@theme/sprinkles.css';
+import { sprinkles } from '@theme/sprinkles.css';
+import { responsiveStyle } from '@theme/themeUtils';
 import { style } from '@vanilla-extract/css';
 
 export const openModal = style([
@@ -36,18 +37,18 @@ export const wrapper = style([
       md: 'auto',
     },
   }),
-  {
-    maxWidth: '700px',
-    inset: 0,
-    '@media': {
-      [`screen and ${breakpoints.md}`]: {
-        width: '75vw',
-      },
-      [`screen and ${breakpoints.lg}`]: {
-        width: '50vw',
-      },
+  responsiveStyle({
+    xs: {
+      maxWidth: '700px',
+      inset: 0,
     },
-  },
+    md: {
+      width: '75vw',
+    },
+    lg: {
+      width: '50vw',
+    },
+  }),
 ]);
 
 export const modal = style([
diff --git a/packages/libs/react-ui/src/index.ts b/packages/libs/react-ui/src/index.ts
index 838bd6b2f2..fe19939941 100644
--- a/packages/libs/react-ui/src/index.ts
+++ b/packages/libs/react-ui/src/index.ts
@@ -92,5 +92,3 @@ export {
   Tree,
   useModal,
 } from './components';
-
-export { breakpoints } from './styles';
diff --git a/packages/libs/react-ui/src/styles/global.css.ts b/packages/libs/react-ui/src/styles/global.css.ts
index a41d616221..bd13f3d127 100644
--- a/packages/libs/react-ui/src/styles/global.css.ts
+++ b/packages/libs/react-ui/src/styles/global.css.ts
@@ -2,7 +2,7 @@
 
 import { KodeMono } from '@kadena/fonts';
 
-import { breakpoints } from './sprinkles.css';
+import { breakpoints } from './themeUtils';
 import { vars } from './vars.css';
 
 import { globalFontFace, globalStyle } from '@vanilla-extract/css';
diff --git a/packages/libs/react-ui/src/styles/index.ts b/packages/libs/react-ui/src/styles/index.ts
index df9097c41e..105796538a 100644
--- a/packages/libs/react-ui/src/styles/index.ts
+++ b/packages/libs/react-ui/src/styles/index.ts
@@ -1,4 +1,5 @@
-export { sprinkles, breakpoints } from './sprinkles.css';
+export { breakpoints, responsiveStyle, mapToProperty } from './themeUtils';
+export { sprinkles } from './sprinkles.css';
 export type { Sprinkles } from './sprinkles.css';
 export { vars, darkThemeClass } from './vars.css';
 export type { ColorType } from './vars.css';
diff --git a/packages/libs/react-ui/src/styles/sprinkles.css.ts b/packages/libs/react-ui/src/styles/sprinkles.css.ts
index 051dc4793c..d4675f5e85 100644
--- a/packages/libs/react-ui/src/styles/sprinkles.css.ts
+++ b/packages/libs/react-ui/src/styles/sprinkles.css.ts
@@ -1,18 +1,9 @@
+import { breakpoints } from './themeUtils';
 import { darkThemeClass, vars } from './vars.css';
 
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
 import mapValues from 'lodash.mapvalues';
 
-// eslint-disable-next-line @kadena-dev/typedef-var
-export const breakpoints = {
-  xs: '',
-  sm: `(min-width: ${640 / 16}rem)`,
-  md: `(min-width: ${768 / 16}rem)`,
-  lg: `(min-width: ${1024 / 16}rem)`,
-  xl: `(min-width: ${1280 / 16}rem)`,
-  xxl: `(min-width: ${1536 / 16}rem)`,
-} as const;
-
 const systemProperties = defineProperties({
   properties: {
     fontFamily: vars.fonts,
@@ -56,7 +47,7 @@ const colorProperties = defineProperties({
 });
 
 const responsiveProperties = defineProperties({
-  conditions: mapValues(breakpoints, (bp) =>
+  conditions: mapValues(breakpoints, (bp?: string) =>
     bp === '' ? {} : { '@media': bp },
   ),
   defaultCondition: 'xs',
diff --git a/packages/libs/react-ui/src/styles/themeUtils.test.ts b/packages/libs/react-ui/src/styles/themeUtils.test.ts
new file mode 100644
index 0000000000..3ad28ae4e5
--- /dev/null
+++ b/packages/libs/react-ui/src/styles/themeUtils.test.ts
@@ -0,0 +1,42 @@
+import { mapToProperty, responsiveStyle } from './themeUtils';
+
+describe('responsiveStyle function', () => {
+  test('creates style properties correctly', () => {
+    const styleInput = {
+      xs: { color: 'red' },
+      sm: { color: 'purple' },
+      md: { color: 'blue' },
+      lg: { fontSize: '20px' },
+    };
+
+    const styleOutput = {
+      color: 'red',
+      '@media': {
+        'screen and (min-width: 40rem)': {
+          color: 'purple',
+        },
+        'screen and (min-width: 48rem)': {
+          color: 'blue',
+        },
+        'screen and (min-width: 64rem)': {
+          fontSize: '20px',
+        },
+      },
+    };
+
+    expect(responsiveStyle(styleInput)).toEqual(styleOutput);
+  });
+});
+
+describe('mapToProperty function', () => {
+  test('creates style properties correctly', () => {
+    expect(mapToProperty('gridRow')('span 1')).toEqual({ gridRow: 'span 1' });
+    expect(mapToProperty('gridRow', 'md')('span 2')).toEqual({
+      '@media': {
+        'screen and (min-width: 48rem)': {
+          gridRow: 'span 2',
+        },
+      },
+    });
+  });
+});
diff --git a/packages/libs/react-ui/src/styles/themeUtils.ts b/packages/libs/react-ui/src/styles/themeUtils.ts
new file mode 100644
index 0000000000..5cb829526b
--- /dev/null
+++ b/packages/libs/react-ui/src/styles/themeUtils.ts
@@ -0,0 +1,73 @@
+import type { StyleRule } from '@vanilla-extract/css';
+import type { Properties } from 'csstype';
+import omit from 'lodash.omit';
+
+// eslint-disable-next-line @kadena-dev/typedef-var
+export const breakpoints = {
+  xs: '',
+  sm: `screen and (min-width: ${640 / 16}rem)`,
+  md: `screen and (min-width: ${768 / 16}rem)`,
+  lg: `screen and (min-width: ${1024 / 16}rem)`,
+  xl: `screen and (min-width: ${1280 / 16}rem)`,
+  xxl: `screen and (min-width: ${1536 / 16}rem)`,
+};
+
+export type Breakpoint = keyof typeof breakpoints;
+type CSSProps = Omit<StyleRule, '@media' | '@supports'>;
+
+const makeMediaQuery =
+  (
+    breakpoint: Breakpoint,
+  ): ((styles: CSSProps) => {
+    [x: string]: CSSProps;
+  }) =>
+  (styles: CSSProps) =>
+    Object.keys(styles).length === 0
+      ? {}
+      : {
+          [breakpoints[breakpoint] as string]: styles,
+        };
+
+// eslint-disable-next-line @kadena-dev/typedef-var
+const mediaQuery = {
+  sm: makeMediaQuery('sm'),
+  md: makeMediaQuery('md'),
+  lg: makeMediaQuery('lg'),
+  xl: makeMediaQuery('xl'),
+  xxl: makeMediaQuery('xxl'),
+} as const;
+
+export const responsiveStyle = ({
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  xxl,
+}: Partial<Record<Breakpoint, CSSProps>>): StyleRule => ({
+  ...omit(xs, '@media'),
+  ...(sm || md || lg || xl || xxl
+    ? {
+        '@media': {
+          ...mediaQuery.sm(sm ?? {}),
+          ...mediaQuery.md(md ?? {}),
+          ...mediaQuery.lg(lg ?? {}),
+          ...mediaQuery.xl(xl ?? {}),
+          ...mediaQuery.xxl(xxl ?? {}),
+        },
+      }
+    : {}),
+});
+
+export const mapToProperty =
+  <Property extends keyof Properties<string | number>>(
+    property: Property,
+    breakpoint?: Breakpoint,
+  ): ((value: string | number) => StyleRule) =>
+  (value: string | number) => {
+    const styleRule = { [property]: value };
+
+    return breakpoint
+      ? responsiveStyle({ [breakpoint]: styleRule })
+      : styleRule;
+  };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ff2c371119..a1ba36c795 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1473,9 +1473,15 @@ importers:
       focus-trap-react:
         specifier: ~10.2.1
         version: 10.2.1(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+      lodash.isequal:
+        specifier: ~4.5.0
+        version: 4.5.0
       lodash.mapvalues:
         specifier: ^4.6.0
         version: 4.6.0
+      lodash.omit:
+        specifier: ^4.5.0
+        version: 4.5.0
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1576,9 +1582,15 @@ importers:
       '@types/jest':
         specifier: ^29.5.3
         version: 29.5.3
+      '@types/lodash.isequal':
+        specifier: ~4.5.6
+        version: 4.5.6
       '@types/lodash.mapvalues':
         specifier: ^4.6.7
         version: 4.6.7
+      '@types/lodash.omit':
+        specifier: ^4.5.7
+        version: 4.5.7
       '@types/node':
         specifier: ^18.17.14
         version: 18.17.14
@@ -1606,6 +1618,9 @@ importers:
       copyfiles:
         specifier: 2.4.1
         version: 2.4.1
+      csstype:
+        specifier: ^3.1.2
+        version: 3.1.2
       eslint:
         specifier: ^8.45.0
         version: 8.45.0
@@ -1620,7 +1635,7 @@ importers:
         version: 0.6.13(eslint@8.45.0)(typescript@5.2.2)
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@18.17.14)(ts-node@10.8.2)
+        version: 29.7.0(@types/node@18.17.14)
       jest-environment-jsdom:
         specifier: ~29.6.1
         version: 29.6.1
@@ -2401,7 +2416,7 @@ packages:
       '@babel/traverse': 7.22.15
       '@babel/types': 7.22.15
       convert-source-map: 1.9.0
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -2420,10 +2435,10 @@ packages:
       '@babel/helpers': 7.22.6
       '@babel/parser': 7.22.7
       '@babel/template': 7.22.5
-      '@babel/traverse': 7.22.8(supports-color@5.5.0)
+      '@babel/traverse': 7.22.8
       '@babel/types': 7.22.5
       convert-source-map: 1.9.0
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -2576,7 +2591,7 @@ packages:
       '@babel/core': 7.22.15
       '@babel/helper-compilation-targets': 7.22.15
       '@babel/helper-plugin-utils': 7.22.5
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       lodash.debounce: 4.0.8
       resolve: 1.22.4
     transitivePeerDependencies:
@@ -2590,7 +2605,7 @@ packages:
       '@babel/core': 7.22.9
       '@babel/helper-compilation-targets': 7.22.15
       '@babel/helper-plugin-utils': 7.22.5
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       lodash.debounce: 4.0.8
       resolve: 1.22.4
     transitivePeerDependencies:
@@ -4989,7 +5004,24 @@ packages:
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/parser': 7.22.15
       '@babel/types': 7.22.15
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/traverse@7.22.8:
+    resolution: {integrity: sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.22.13
+      '@babel/generator': 7.22.15
+      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-function-name': 7.22.5
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/parser': 7.22.15
+      '@babel/types': 7.22.15
+      debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -5010,6 +5042,7 @@ packages:
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
+    dev: false
 
   /@babel/types@7.22.15:
     resolution: {integrity: sha512-X+NLXr0N8XXmN5ZsaQdm9U2SSC3UbIYq/doL++sueHOTisgZHoKaQtZxGuV2cUPQHMfjKEfg/g6oy7Hm6SKFtA==}
@@ -5936,7 +5969,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       espree: 9.6.1
       globals: 13.20.0
       ignore: 5.2.4
@@ -6787,7 +6820,7 @@ packages:
     engines: {node: '>=10.10.0'}
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -6967,6 +7000,49 @@ packages:
       - utf-8-validate
     dev: false
 
+  /@jest/core@29.7.0:
+    resolution: {integrity: sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@jest/console': 29.7.0
+      '@jest/reporters': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 18.17.14
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      ci-info: 3.8.0
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-changed-files: 29.7.0
+      jest-config: 29.7.0(@types/node@18.17.14)
+      jest-haste-map: 29.7.0
+      jest-message-util: 29.7.0
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-resolve-dependencies: 29.7.0
+      jest-runner: 29.7.0
+      jest-runtime: 29.7.0
+      jest-snapshot: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      jest-watcher: 29.7.0
+      micromatch: 4.0.5
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+    dev: true
+
   /@jest/core@29.7.0(ts-node@10.8.2):
     resolution: {integrity: sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -10829,7 +10905,7 @@ packages:
       typescript: '>= 4.x'
       webpack: '>= 4'
     dependencies:
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       endent: 2.1.0
       find-cache-dir: 3.3.2
       flat-cache: 3.1.0
@@ -11860,6 +11936,12 @@ packages:
       '@types/lodash': 4.14.197
     dev: true
 
+  /@types/lodash.omit@4.5.7:
+    resolution: {integrity: sha512-6q6cNg0tQ6oTWjSM+BcYMBhan54P/gLqBldG4AuXd3nKr0oeVekWNS4VrNEu3BhCSDXtGapi7zjhnna0s03KpA==}
+    dependencies:
+      '@types/lodash': 4.14.197
+    dev: true
+
   /@types/lodash@4.14.196:
     resolution: {integrity: sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==}
     dev: true
@@ -12211,7 +12293,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.59.11
       '@typescript-eslint/type-utils': 5.59.11(eslint@8.45.0)(typescript@5.2.2)
       '@typescript-eslint/utils': 5.59.11(eslint@8.45.0)(typescript@5.2.2)
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       eslint: 8.45.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.4
@@ -12330,7 +12412,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.59.11
       '@typescript-eslint/types': 5.59.11
       '@typescript-eslint/typescript-estree': 5.59.11(typescript@5.2.2)
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       eslint: 8.45.0
       typescript: 5.2.2
     transitivePeerDependencies:
@@ -12422,7 +12504,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 5.59.11(typescript@5.2.2)
       '@typescript-eslint/utils': 5.59.11(eslint@8.45.0)(typescript@5.2.2)
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       eslint: 8.45.0
       tsutils: 3.21.0(typescript@5.2.2)
       typescript: 5.2.2
@@ -12551,7 +12633,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.59.11
       '@typescript-eslint/visitor-keys': 5.59.11
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
@@ -12571,7 +12653,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
@@ -12851,7 +12933,7 @@ packages:
     dependencies:
       '@vanilla-extract/integration': 6.2.1(@types/node@18.17.14)
       chalk: 4.1.2
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       loader-utils: 2.0.4
       webpack: 5.88.2(@swc/core@1.3.80)(esbuild@0.18.20)
     transitivePeerDependencies:
@@ -13530,7 +13612,7 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
     dependencies:
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
 
@@ -15706,6 +15788,25 @@ packages:
       path-type: 4.0.0
     dev: true
 
+  /create-jest@29.7.0(@types/node@18.17.14):
+    resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    hasBin: true
+    dependencies:
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-config: 29.7.0(@types/node@18.17.14)
+      jest-util: 29.7.0
+      prompts: 2.4.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+    dev: true
+
   /create-jest@29.7.0(@types/node@18.17.14)(ts-node@10.8.2):
     resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -15830,7 +15931,7 @@ packages:
       postcss-modules-values: 4.0.0(postcss@8.4.29)
       postcss-value-parser: 4.2.0
       semver: 7.5.4
-      webpack: 5.88.2(webpack-cli@4.9.2)
+      webpack: 5.88.2(@swc/core@1.3.80)(esbuild@0.18.20)
 
   /css-minimizer-webpack-plugin@3.4.1(webpack@5.88.2):
     resolution: {integrity: sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==}
@@ -16192,6 +16293,16 @@ packages:
     dependencies:
       ms: 2.0.0
 
+  /debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+
   /debug@3.2.7(supports-color@8.1.1):
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -16203,6 +16314,17 @@ packages:
       ms: 2.1.3
       supports-color: 8.1.1
 
+  /debug@4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+
   /debug@4.3.4(supports-color@5.5.0):
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -16480,7 +16602,7 @@ packages:
     hasBin: true
     dependencies:
       address: 1.2.2
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -16974,7 +17096,7 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
     dependencies:
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       esbuild: 0.18.20
     transitivePeerDependencies:
       - supports-color
@@ -17157,7 +17279,7 @@ packages:
   /eslint-import-resolver-node@0.3.7:
     resolution: {integrity: sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==}
     dependencies:
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7
       is-core-module: 2.12.1
       resolve: 1.22.2
     transitivePeerDependencies:
@@ -17194,7 +17316,7 @@ packages:
       eslint: '*'
       eslint-plugin-import: '*'
     dependencies:
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       enhanced-resolve: 5.15.0
       eslint: 8.45.0
       eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.59.11)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.45.0)
@@ -17285,7 +17407,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/parser': 5.59.11(eslint@8.45.0)(typescript@5.2.2)
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7
       eslint: 8.45.0
       eslint-import-resolver-node: 0.3.7
       eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.11)(eslint-plugin-import@2.27.5)(eslint@8.45.0)
@@ -17383,7 +17505,7 @@ packages:
       array-includes: 3.1.6
       array.prototype.flat: 1.3.1
       array.prototype.flatmap: 1.3.1
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7
       doctrine: 2.1.0
       eslint: 8.45.0
       eslint-import-resolver-node: 0.3.7
@@ -17696,7 +17818,7 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -19502,7 +19624,7 @@ packages:
       lodash: 4.17.21
       pretty-error: 4.0.0
       tapable: 2.2.1
-      webpack: 5.88.2(webpack-cli@4.9.2)
+      webpack: 5.88.2(@swc/core@1.3.80)(esbuild@0.18.20)
 
   /htmlparser2@6.1.0:
     resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
@@ -19566,7 +19688,7 @@ packages:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -19629,7 +19751,7 @@ packages:
     engines: {node: '>= 6.0.0'}
     dependencies:
       agent-base: 5.1.1
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -19639,7 +19761,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
 
@@ -20430,7 +20552,7 @@ packages:
     resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
     engines: {node: '>=10'}
     dependencies:
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       istanbul-lib-coverage: 3.2.0
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -20572,6 +20694,34 @@ packages:
       - utf-8-validate
     dev: false
 
+  /jest-cli@29.7.0(@types/node@18.17.14):
+    resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@jest/core': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      create-jest: 29.7.0(@types/node@18.17.14)
+      exit: 0.1.2
+      import-local: 3.1.0
+      jest-config: 29.7.0(@types/node@18.17.14)
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+    dev: true
+
   /jest-cli@29.7.0(@types/node@18.17.14)(ts-node@10.8.2):
     resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -20639,6 +20789,46 @@ packages:
       - utf-8-validate
     dev: false
 
+  /jest-config@29.7.0(@types/node@18.17.14):
+    resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      '@types/node': '*'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      '@babel/core': 7.22.15
+      '@jest/test-sequencer': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 18.17.14
+      babel-jest: 29.7.0(@babel/core@7.22.15)
+      chalk: 4.1.2
+      ci-info: 3.8.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 29.7.0
+      jest-environment-node: 29.7.0
+      jest-get-type: 29.6.3
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-runner: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      micromatch: 4.0.5
+      parse-json: 5.2.0
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+    dev: true
+
   /jest-config@29.7.0(@types/node@18.17.14)(ts-node@10.8.2):
     resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -21558,6 +21748,27 @@ packages:
       - utf-8-validate
     dev: false
 
+  /jest@29.7.0(@types/node@18.17.14):
+    resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@jest/core': 29.7.0
+      '@jest/types': 29.6.3
+      import-local: 3.1.0
+      jest-cli: 29.7.0(@types/node@18.17.14)
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+    dev: true
+
   /jest@29.7.0(@types/node@18.17.14)(ts-node@10.8.2):
     resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -22210,6 +22421,10 @@ packages:
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  /lodash.omit@4.5.0:
+    resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==}
+    dev: false
+
   /lodash.once@4.1.1:
     resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
     dev: true
@@ -23416,7 +23631,7 @@ packages:
     resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
     dependencies:
       '@types/debug': 4.1.8
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       decode-named-character-reference: 1.0.2
       micromark-core-commonmark: 1.1.0
       micromark-factory-space: 1.1.0
@@ -26145,7 +26360,7 @@ packages:
     engines: {node: '>=8.16.0'}
     dependencies:
       '@types/mime-types': 2.1.1
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       extract-zip: 1.7.0
       https-proxy-agent: 4.0.0
       mime: 2.6.0
@@ -29712,6 +29927,7 @@ packages:
     resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
     engines: {node: '>=0.8.0'}
     hasBin: true
+    requiresBuild: true
 
   /uint8arrays@3.1.1:
     resolution: {integrity: sha512-+QJa8QRnbdXVpHYjLoTpJIdCTiw9Ir62nocClWuXIq2JIh4Uta0cQsTSpFL678p2CN8B+XSApwcU+pQEqVpKWg==}
@@ -30332,7 +30548,7 @@ packages:
     hasBin: true
     dependencies:
       cac: 6.7.14
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0