From eaef10cb4114ef3bde9ad49cd30c017bfa57e9cd Mon Sep 17 00:00:00 2001
From: mgallagher56 <marc.gallagherreid11@bathspa.ac.uk>
Date: Sun, 24 Sep 2023 18:30:38 +0100
Subject: [PATCH] chore: update zag-js/dialog to match other components. fix:
 update snapshots

---
 .../tabs/__snapshots__/FLPTab.test.tsx.snap   |   2 +-
 .../__snapshots__/FLPTabList.test.tsx.snap    |   2 +-
 .../__snapshots__/FLPTabPanel.test.tsx.snap   |   2 +-
 .../__snapshots__/FLPTabPanels.test.tsx.snap  |   2 +-
 .../tabs/__snapshots__/FLPTabs.test.tsx.snap  |   2 +-
 .../__snapshots__/TabsContainer.test.tsx.snap |  12 +-
 package.json                                  |   2 +-
 pnpm-lock.yaml                                | 103 ++------
 styled-system/css/conditions.js               |   2 +-
 styled-system/css/css.d.ts                    |   6 +-
 styled-system/css/css.js                      |   2 +-
 styled-system/css/cva.d.ts                    |   4 +-
 styled-system/css/cva.js                      |   2 +-
 styled-system/css/index.d.ts                  |   8 +-
 styled-system/css/sva.d.ts                    |   2 +-
 styled-system/css/sva.js                      |   8 +-
 styled-system/helpers.js                      |  60 ++---
 styled-system/patterns/aspect-ratio.d.ts      |  12 +-
 styled-system/patterns/bleed.d.ts             |  12 +-
 styled-system/patterns/box.d.ts               |  12 +-
 styled-system/patterns/center.d.ts            |  12 +-
 styled-system/patterns/circle.d.ts            |  12 +-
 styled-system/patterns/container.d.ts         |  12 +-
 styled-system/patterns/divider.d.ts           |  12 +-
 styled-system/patterns/flex.d.ts              |  12 +-
 styled-system/patterns/float.d.ts             |  12 +-
 styled-system/patterns/grid-item.d.ts         |  12 +-
 styled-system/patterns/grid.d.ts              |  12 +-
 styled-system/patterns/hstack.d.ts            |  12 +-
 styled-system/patterns/index.d.ts             |  40 +--
 styled-system/patterns/link-box.d.ts          |  12 +-
 styled-system/patterns/link-overlay.d.ts      |  12 +-
 styled-system/patterns/spacer.d.ts            |  12 +-
 styled-system/patterns/square.d.ts            |  12 +-
 styled-system/patterns/stack.d.ts             |  12 +-
 styled-system/patterns/visually-hidden.d.ts   |  12 +-
 styled-system/patterns/vstack.d.ts            |  12 +-
 styled-system/patterns/wrap.d.ts              |  12 +-
 styled-system/reset.css                       |  25 +-
 styled-system/tokens/index.d.ts               |   4 +-
 styled-system/types/composition.d.ts          |   2 +-
 styled-system/types/conditions.d.ts           | 227 +++++++++---------
 styled-system/types/global.d.ts               |  16 +-
 styled-system/types/index.d.ts                |   8 +-
 styled-system/types/pattern.d.ts              |   4 +-
 styled-system/types/prop-type.d.ts            |   4 +-
 styled-system/types/recipe.d.ts               |   3 +-
 styled-system/types/selectors.d.ts            |   2 +-
 styled-system/types/style-props.d.ts          |   6 +-
 styled-system/types/system-types.d.ts         |   6 +-
 50 files changed, 383 insertions(+), 425 deletions(-)

diff --git a/app/components/core/tabs/__snapshots__/FLPTab.test.tsx.snap b/app/components/core/tabs/__snapshots__/FLPTab.test.tsx.snap
index a6ce117d..15ee3eed 100644
--- a/app/components/core/tabs/__snapshots__/FLPTab.test.tsx.snap
+++ b/app/components/core/tabs/__snapshots__/FLPTab.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FLPTab > renders correctly 1`] = `
 <div>
   <div
-    class="chakra-tabs css-0"
+    class="chakra-tabs css-79elbk"
   >
     <button
       aria-selected="true"
diff --git a/app/components/core/tabs/__snapshots__/FLPTabList.test.tsx.snap b/app/components/core/tabs/__snapshots__/FLPTabList.test.tsx.snap
index 4c6c4828..2ad641b9 100644
--- a/app/components/core/tabs/__snapshots__/FLPTabList.test.tsx.snap
+++ b/app/components/core/tabs/__snapshots__/FLPTabList.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FLPTabList > renders correctly 1`] = `
 <div>
   <div
-    class="chakra-tabs css-0"
+    class="chakra-tabs css-79elbk"
   >
     <div
       aria-orientation="horizontal"
diff --git a/app/components/core/tabs/__snapshots__/FLPTabPanel.test.tsx.snap b/app/components/core/tabs/__snapshots__/FLPTabPanel.test.tsx.snap
index efdb22e6..9ed34f2f 100644
--- a/app/components/core/tabs/__snapshots__/FLPTabPanel.test.tsx.snap
+++ b/app/components/core/tabs/__snapshots__/FLPTabPanel.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FLPTabPanel > renders correctly 1`] = `
 <div>
   <div
-    class="chakra-tabs css-0"
+    class="chakra-tabs css-79elbk"
   >
     <div>
       <div>
diff --git a/app/components/core/tabs/__snapshots__/FLPTabPanels.test.tsx.snap b/app/components/core/tabs/__snapshots__/FLPTabPanels.test.tsx.snap
index 9afad084..82856fe6 100644
--- a/app/components/core/tabs/__snapshots__/FLPTabPanels.test.tsx.snap
+++ b/app/components/core/tabs/__snapshots__/FLPTabPanels.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FLPTabList > renders correctly 1`] = `
 <div>
   <div
-    class="chakra-tabs css-0"
+    class="chakra-tabs css-79elbk"
   >
     <div
       class="chakra-tabs__tab-panels css-8atqhb"
diff --git a/app/components/core/tabs/__snapshots__/FLPTabs.test.tsx.snap b/app/components/core/tabs/__snapshots__/FLPTabs.test.tsx.snap
index 9f5c7024..7ba6dead 100644
--- a/app/components/core/tabs/__snapshots__/FLPTabs.test.tsx.snap
+++ b/app/components/core/tabs/__snapshots__/FLPTabs.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FLPTabs > renders correctly 1`] = `
 <div>
   <div
-    class="chakra-tabs css-0"
+    class="chakra-tabs css-79elbk"
   >
     <div>
       Tab 1
diff --git a/app/containers/__snapshots__/TabsContainer.test.tsx.snap b/app/containers/__snapshots__/TabsContainer.test.tsx.snap
index 0be75ffd..825269db 100644
--- a/app/containers/__snapshots__/TabsContainer.test.tsx.snap
+++ b/app/containers/__snapshots__/TabsContainer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TabsContainer > renders correctly 1`] = `
 <div>
   <div
-    class="chakra-tabs css-0"
+    class="chakra-tabs css-79elbk"
     data-orientation="horizontal"
     data-part="root"
     data-scope="tabs"
@@ -16,6 +16,7 @@ exports[`TabsContainer > renders correctly 1`] = `
       data-orientation="horizontal"
       data-part="list"
       data-scope="tabs"
+      dir="ltr"
       id="tabs::r0::list"
       role="tablist"
     >
@@ -29,6 +30,7 @@ exports[`TabsContainer > renders correctly 1`] = `
         data-scope="tabs"
         data-selected=""
         data-value="tab1"
+        dir="ltr"
         id="tabs::r0::trigger-tab1"
         role="tab"
         tabindex="0"
@@ -50,6 +52,7 @@ exports[`TabsContainer > renders correctly 1`] = `
         data-part="trigger"
         data-scope="tabs"
         data-value="tab2"
+        dir="ltr"
         id="tabs::r0::trigger-tab2"
         role="tab"
         tabindex="1"
@@ -71,6 +74,7 @@ exports[`TabsContainer > renders correctly 1`] = `
         data-part="trigger"
         data-scope="tabs"
         data-value="tab3"
+        dir="ltr"
         id="tabs::r0::trigger-tab3"
         role="tab"
         tabindex="2"
@@ -96,10 +100,12 @@ exports[`TabsContainer > renders correctly 1`] = `
     >
       <div
         aria-labelledby="tabs::r0::trigger-tab1"
+        data-orientation="horizontal"
         data-ownedby="tabs::r0::list"
         data-part="content"
         data-scope="tabs"
         data-selected=""
+        dir="ltr"
         id="tabs::r0::content-tab1"
         role="tabpanel"
         tabindex="0"
@@ -110,9 +116,11 @@ exports[`TabsContainer > renders correctly 1`] = `
       </div>
       <div
         aria-labelledby="tabs::r0::trigger-tab2"
+        data-orientation="horizontal"
         data-ownedby="tabs::r0::list"
         data-part="content"
         data-scope="tabs"
+        dir="ltr"
         hidden=""
         id="tabs::r0::content-tab2"
         role="tabpanel"
@@ -124,9 +132,11 @@ exports[`TabsContainer > renders correctly 1`] = `
       </div>
       <div
         aria-labelledby="tabs::r0::trigger-tab3"
+        data-orientation="horizontal"
         data-ownedby="tabs::r0::list"
         data-part="content"
         data-scope="tabs"
+        dir="ltr"
         hidden=""
         id="tabs::r0::content-tab3"
         role="tabpanel"
diff --git a/package.json b/package.json
index 268a4a7c..57cef6ef 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "@remix-run/testing": "1.19.3",
     "@supabase/auth-helpers-remix": "0.2.2",
     "@supabase/supabase-js": "2.36.0",
-    "@zag-js/dialog": "0.16.0",
+    "@zag-js/dialog": "0.21.0",
     "@zag-js/editable": "0.21.0",
     "@zag-js/pressable": "0.21.0",
     "@zag-js/react": "0.21.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b693a73..36dd5681 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,8 +48,8 @@ dependencies:
     specifier: 2.36.0
     version: 2.36.0
   '@zag-js/dialog':
-    specifier: 0.16.0
-    version: 0.16.0
+    specifier: 0.21.0
+    version: 0.21.0
   '@zag-js/editable':
     specifier: 0.21.0
     version: 0.21.0
@@ -6303,10 +6303,6 @@ packages:
     resolution: {integrity: sha512-P7V0DYrPKuWkO8wwB4iobD9W3WAzDJds7w2V5ZERKKkohou/D+6kTz2a2B8ohAImI895uy2WcLo4/G6i1Au/cA==}
     dev: true
 
-  /@zag-js/anatomy@0.16.0:
-    resolution: {integrity: sha512-jdWOflwPvnyy4s7MW0O3yB2PhBfQ7R6PaKfIIMKTnBU0Pb8U2ZmsyXrRkZ7YOFUN3Pq7ChKmClWu9fg2N5JNyg==}
-    dev: false
-
   /@zag-js/anatomy@0.21.0:
     resolution: {integrity: sha512-fqdzuHzioGQ9IUOK4SSmUXlThozLkM0BWlFomZlfjHoVdtsKfmDOC69HlPzzqfBbPQE8xOn1E+04+MuA0BMumQ==}
     dev: false
@@ -6317,10 +6313,10 @@ packages:
       '@zag-js/dom-query': 0.12.0
     dev: true
 
-  /@zag-js/aria-hidden@0.16.0:
-    resolution: {integrity: sha512-pfuP5sY1iFRj+hstbM7t1ai9c+rCrVVy7JXv48mkVIBaM01tvuvMmwt4nSBCfmljra0l+cv3vaVVd6Nh6tXNDA==}
+  /@zag-js/aria-hidden@0.21.0:
+    resolution: {integrity: sha512-sp2APyPAHzXaTj/qjSHbC1NdxW3/9tILxKtAl10ewZg1X52VQunyK4AULeqq27xmYLbuaYYtb8YiNLMQUIRUwQ==}
     dependencies:
-      '@zag-js/dom-query': 0.16.0
+      '@zag-js/dom-query': 0.21.0
     dev: false
 
   /@zag-js/auto-resize@0.12.0:
@@ -6403,13 +6399,6 @@ packages:
       klona: 2.0.6
     dev: true
 
-  /@zag-js/core@0.16.0:
-    resolution: {integrity: sha512-1bH8GqarePlidfpw5RwNKN2/meAseGbYy9XMSbmV3ttQ1KEOz+gQGXTZN0CBAtyiIyxDo4w83djN0e9inpmYPg==}
-    dependencies:
-      '@zag-js/store': 0.16.0
-      klona: 2.0.6
-    dev: false
-
   /@zag-js/core@0.21.0:
     resolution: {integrity: sha512-YPGPBpOExfsIM07w99115mHjiTsTxbTJLS8KW27A4AVXuyW2366Vfgxux5qmfbtDGzv7Y7pF0PfoCUi9CM4UnA==}
     dependencies:
@@ -6456,17 +6445,17 @@ packages:
       focus-trap: 7.5.2
     dev: true
 
-  /@zag-js/dialog@0.16.0:
-    resolution: {integrity: sha512-WtjQQPXlfzCFmezVH3GPglak8gki6yIWrWyZ5uSVeOLubCMZ6Z9k0OFzfW1HIO6rjv58rpPx6qRMj/tly/qQbg==}
+  /@zag-js/dialog@0.21.0:
+    resolution: {integrity: sha512-lhbKtbC3cCZKwkfV34MgfD6tTAd4+h21Nahv4u7J+X6xVIHWhbQGRiKPcH7Tq62h1vq9+mc+v3Be7rnzY2v/3w==}
     dependencies:
-      '@zag-js/anatomy': 0.16.0
-      '@zag-js/aria-hidden': 0.16.0
-      '@zag-js/core': 0.16.0
-      '@zag-js/dismissable': 0.16.0
-      '@zag-js/dom-query': 0.16.0
-      '@zag-js/remove-scroll': 0.16.0
-      '@zag-js/types': 0.16.0
-      '@zag-js/utils': 0.16.0
+      '@zag-js/anatomy': 0.21.0
+      '@zag-js/aria-hidden': 0.21.0
+      '@zag-js/core': 0.21.0
+      '@zag-js/dismissable': 0.21.0
+      '@zag-js/dom-query': 0.21.0
+      '@zag-js/remove-scroll': 0.21.0
+      '@zag-js/types': 0.21.0
+      '@zag-js/utils': 0.21.0
       focus-trap: 7.5.2
     dev: false
 
@@ -6479,13 +6468,13 @@ packages:
       '@zag-js/utils': 0.12.0
     dev: true
 
-  /@zag-js/dismissable@0.16.0:
-    resolution: {integrity: sha512-N9JX5T5I3afKpaAV8Som85H+QraZcPNCXewZzQKqBsECGPVntPr3HDz8vYHKDICNG0NlPlKCI/tyj0BGiKg4tA==}
+  /@zag-js/dismissable@0.21.0:
+    resolution: {integrity: sha512-81vIpB+6qZFLn3IkByTub6z79cTI1O0jMh8SxWku89IWW9nNTDKrKuByLEA5ryw0eA7RW0yrADNsi4bB+FKxKg==}
     dependencies:
-      '@zag-js/dom-event': 0.16.0
-      '@zag-js/dom-query': 0.16.0
-      '@zag-js/interact-outside': 0.16.0
-      '@zag-js/utils': 0.16.0
+      '@zag-js/dom-event': 0.21.0
+      '@zag-js/dom-query': 0.21.0
+      '@zag-js/interact-outside': 0.21.0
+      '@zag-js/utils': 0.21.0
     dev: false
 
   /@zag-js/dom-event@0.12.0:
@@ -6495,13 +6484,6 @@ packages:
       '@zag-js/types': 0.12.0
     dev: true
 
-  /@zag-js/dom-event@0.16.0:
-    resolution: {integrity: sha512-h12ZzzfXC2UNhoPGHIl2kDejSZ8XZPbC1B4cbXJ43NMaDQoIw0sUde//ND7V82GCBtY1OfQasByC2EAdq0+HGQ==}
-    dependencies:
-      '@zag-js/text-selection': 0.16.0
-      '@zag-js/types': 0.16.0
-    dev: false
-
   /@zag-js/dom-event@0.21.0:
     resolution: {integrity: sha512-yHQzMoP0/cno02FCTkPz03OZ4qTaUnv6OpOiJG34SODK169DqZR+h04B49DJ3LU3AFfES3U4Desaj/4NfViJTA==}
     dependencies:
@@ -6602,15 +6584,6 @@ packages:
       '@zag-js/utils': 0.12.0
     dev: true
 
-  /@zag-js/interact-outside@0.16.0:
-    resolution: {integrity: sha512-3rbNS6QoEUf8yuTObk8aB2QNEZgNCJBPWeqnYkyqtVGMAwNgacCzwb4elEqrJgp/GyYnIVIvL/sizGH9BTXLEA==}
-    dependencies:
-      '@zag-js/dom-event': 0.16.0
-      '@zag-js/dom-query': 0.16.0
-      '@zag-js/tabbable': 0.16.0
-      '@zag-js/utils': 0.16.0
-    dev: false
-
   /@zag-js/interact-outside@0.21.0:
     resolution: {integrity: sha512-SPwxczDFbE0rduOQBUprYHVz2pQYG2Qu1p8A2JcaN2HhsPhpeTlPXBqOBo1a8coFveK9nWnHsweG5d3dA4+ESA==}
     dependencies:
@@ -6827,10 +6800,10 @@ packages:
       '@zag-js/dom-query': 0.12.0
     dev: true
 
-  /@zag-js/remove-scroll@0.16.0:
-    resolution: {integrity: sha512-cOHWouAYEKpkWJVsxzffHW3svzIef9tWw+zuocScVA3qwyyWr/xGrqsndTt74assDZHHsQ6LO34gafv4VOwZCw==}
+  /@zag-js/remove-scroll@0.21.0:
+    resolution: {integrity: sha512-tLRhXP1sKLuB5X95w5EbX3hXJifCIhkXLmSo0oMM5Mn17ALPQ7pPUq7/eb2LQAb8PKkilNCPuiqXYMvdYHLCoA==}
     dependencies:
-      '@zag-js/dom-query': 0.16.0
+      '@zag-js/dom-query': 0.21.0
     dev: false
 
   /@zag-js/select@0.12.0:
@@ -6882,12 +6855,6 @@ packages:
       proxy-compare: 2.5.1
     dev: true
 
-  /@zag-js/store@0.16.0:
-    resolution: {integrity: sha512-0Sp5B/a0QvlxkN4eX5dHQk+t+SpQPZ0+1w4ENRXWefTWeZLRfDtzdT1SHyZOe+GeVA43e53WaEKtH+wEXYtczQ==}
-    dependencies:
-      proxy-compare: 2.5.1
-    dev: false
-
   /@zag-js/store@0.21.0:
     resolution: {integrity: sha512-uiECn/9cMJvX1EopTTm64/wN0R8JY4DakFFMG1wdaZEBA7CnfDbb1MQp6XY9+RkZhcGrAy8oLtW2NGlWACQwqg==}
     dependencies:
@@ -6912,12 +6879,6 @@ packages:
       '@zag-js/dom-query': 0.12.0
     dev: true
 
-  /@zag-js/tabbable@0.16.0:
-    resolution: {integrity: sha512-47afLCtTNeJVmiqbwxKkCr4rWT6IyW3tVXLmUoGmGRLPMH5lBN/ZA6yUoRZGDR/JaQoS4dq3N2muaKqaIetw7A==}
-    dependencies:
-      '@zag-js/dom-query': 0.16.0
-    dev: false
-
   /@zag-js/tabbable@0.21.0:
     resolution: {integrity: sha512-9n8tvLTvO8JfaR/9oxOGXPhAcUbuGtOaycd6GdDXmmg8BhWQpZyqAsggJXs0FYlAwHBo6c4Tt5sNVLEg4JAywg==}
     dependencies:
@@ -6971,12 +6932,6 @@ packages:
       '@zag-js/dom-query': 0.12.0
     dev: true
 
-  /@zag-js/text-selection@0.16.0:
-    resolution: {integrity: sha512-HRQMg1Ppl8O588e8LD+2jzAAqGgFYHQhoory20Th+A41zYZE7MxeRl95uQeAhaDhZBtN1DLbQyWinsPr9gyi4g==}
-    dependencies:
-      '@zag-js/dom-query': 0.16.0
-    dev: false
-
   /@zag-js/text-selection@0.21.0:
     resolution: {integrity: sha512-MRkvXr6k3Hz0457WpzirjqSqaYBJcA1Mk3HVAMtTRu39D6euP8RNQPeGxH2iFl4eeyFiu1U0TDIvkyQi++lWPQ==}
     dependencies:
@@ -7013,12 +6968,6 @@ packages:
       csstype: 3.1.2
     dev: true
 
-  /@zag-js/types@0.16.0:
-    resolution: {integrity: sha512-r5AH6PiLQPw6tNQZ+0hYsG9o97xS7SeTuqmgS0ffReH8YN0JNXONr17L8x+lFUEvaovmjc4m4RSTmfhiJavc5g==}
-    dependencies:
-      csstype: 3.1.2
-    dev: false
-
   /@zag-js/types@0.21.0:
     resolution: {integrity: sha512-ICW/e+SsmEokX9j8E5jDGRPxQCVdWZo687gWw9kxBV5aggc4leJLxvezjisLlbUpNK0j2KZws5HR+TPvygW16Q==}
     dependencies:
@@ -7029,10 +6978,6 @@ packages:
     resolution: {integrity: sha512-kRPHpeh3cWIudwfAzTcwVrFnZAWpOqAp110EXX6h3TdhYDSG7+vnvT3PulwKDLdtGdn3vVUViolIHP00ZIWCAQ==}
     dev: true
 
-  /@zag-js/utils@0.16.0:
-    resolution: {integrity: sha512-9DLAGu0QYFm+mKuTPAMAv/Yd0YlcDaZq29BO3rpX5U42UK9XpL+9AydyWGJUbsOtIfFvrnXZYJmHZgnruDUkkg==}
-    dev: false
-
   /@zag-js/utils@0.21.0:
     resolution: {integrity: sha512-cI/d33LDSVHsfD2NtipP+6jBT4cQSOJr38lN3Ofd0xSqQSFQ6fkFqJAdCGpc5NEvk6NSmVAWjj1rYAOCuFkc1w==}
     dev: false
diff --git a/styled-system/css/conditions.js b/styled-system/css/conditions.js
index a820c257..41bbdde6 100644
--- a/styled-system/css/conditions.js
+++ b/styled-system/css/conditions.js
@@ -1,6 +1,6 @@
 import { withoutSpace } from '../helpers.js';
 
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,base"
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,base"
 const conditions = new Set(conditionsStr.split(','))
 
 export function isCondition(value){
diff --git a/styled-system/css/css.d.ts b/styled-system/css/css.d.ts
index 9d4bbec2..63723823 100644
--- a/styled-system/css/css.d.ts
+++ b/styled-system/css/css.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject } from '../types'
+import type { SystemStyleObject } from '../types/index';
 
 interface CssFunction {
-  (...styles: SystemStyleObject[]): string
-  raw: (styles: SystemStyleObject) => SystemStyleObject
+  (...styles: Array<SystemStyleObject | undefined | null | false>): string
+  raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject
 }
 
 export declare const css: CssFunction;
\ No newline at end of file
diff --git a/styled-system/css/css.js b/styled-system/css/css.js
index e35725ce..44d05384 100644
--- a/styled-system/css/css.js
+++ b/styled-system/css/css.js
@@ -39,6 +39,6 @@ const context = {
 
 const cssFn = createCss(context)
 export const css = (...styles) => cssFn(mergeCss(...styles))
-css.raw = (styles) => styles
+css.raw = (...styles) => mergeCss(...styles)
 
 export const { mergeCss, assignCss } = createMergeCss(context)
\ No newline at end of file
diff --git a/styled-system/css/cva.d.ts b/styled-system/css/cva.d.ts
index e9a1a58c..11900bfb 100644
--- a/styled-system/css/cva.d.ts
+++ b/styled-system/css/cva.d.ts
@@ -1,6 +1,6 @@
 /* eslint-disable */
-import type { RecipeCreatorFn } from '../types/recipe'
+import type { RecipeCreatorFn } from '../types/recipe';
 
 export declare const cva: RecipeCreatorFn
 
-export type { RecipeVariantProps } from '../types/recipe'
+export type { RecipeVariantProps } from '../types/recipe';
\ No newline at end of file
diff --git a/styled-system/css/cva.js b/styled-system/css/cva.js
index e02c6bb0..40023f1f 100644
--- a/styled-system/css/cva.js
+++ b/styled-system/css/cva.js
@@ -57,7 +57,7 @@ export function getCompoundVariantCss(compoundVariants, variantMap) {
 }
 
 export function assertCompoundVariant(name, compoundVariants, variants, prop) {
-  if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
+  if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') {
     throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)
   }
 }
diff --git a/styled-system/css/index.d.ts b/styled-system/css/index.d.ts
index 7c1673b6..50a581d8 100644
--- a/styled-system/css/index.d.ts
+++ b/styled-system/css/index.d.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-export * from './css'
-export * from './cx'
-export * from './cva'
-export * from './sva'
\ No newline at end of file
+export * from './css';
+export * from './cx';
+export * from './cva';
+export * from './sva';
\ No newline at end of file
diff --git a/styled-system/css/sva.d.ts b/styled-system/css/sva.d.ts
index aa5ca5bb..f97c42a3 100644
--- a/styled-system/css/sva.d.ts
+++ b/styled-system/css/sva.d.ts
@@ -1,4 +1,4 @@
 /* eslint-disable */
-import type { SlotRecipeCreatorFn } from '../types/recipe'
+import type { SlotRecipeCreatorFn } from '../types/recipe';
 
 export declare const sva: SlotRecipeCreatorFn
\ No newline at end of file
diff --git a/styled-system/css/sva.js b/styled-system/css/sva.js
index 38870956..113a3d7c 100644
--- a/styled-system/css/sva.js
+++ b/styled-system/css/sva.js
@@ -3,12 +3,17 @@ import { cva } from './cva.js';
 
 export function sva(config) {
   const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
-  
+
   function svaFn(props) {
     const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
     return Object.fromEntries(result)
   }
 
+  function raw(props) {
+    const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)])
+    return Object.fromEntries(result)
+  }
+
   const variants = config.variants ?? {};
   const variantKeys = Object.keys(variants);
 
@@ -22,6 +27,7 @@ export function sva(config) {
 
   return Object.assign(svaFn, {
     __cva__: false,
+    raw,
     variantMap,
     variantKeys,
     splitVariantProps,
diff --git a/styled-system/helpers.js b/styled-system/helpers.js
index 5477fed0..a06a2b50 100644
--- a/styled-system/helpers.js
+++ b/styled-system/helpers.js
@@ -210,49 +210,25 @@ var hypenateProperty = memo((property) => {
 });
 
 // src/slot.ts
-var assign = (obj, path, value) => {
-  const last = path.pop();
-  const target = path.reduce((acc, key) => {
-    if (acc[key] == null)
-      acc[key] = {};
-    return acc[key];
-  }, obj);
-  if (last != null)
-    target[last] = value;
-};
-var getSlotRecipes = (recipe) => {
-  const parts = recipe.slots.map((slot) => [
-    slot,
-    // setup base recipe
-    {
-      // create class-base on BEM
-      className: [recipe.className ?? "", slot].join("__"),
-      base: {},
-      variants: {},
-      defaultVariants: recipe.defaultVariants ?? {},
-      compoundVariants: []
-    }
-  ]).map(([slot, cva]) => {
-    const base = recipe.base[slot];
-    if (base)
-      cva.base = base;
-    walkObject(
-      recipe.variants ?? {},
-      (variant, path) => {
-        if (!variant[slot])
-          return;
-        assign(cva, ["variants", ...path], variant[slot]);
-      },
-      {
-        stop: (_value, path) => path.includes(slot)
-      }
-    );
-    if (recipe.compoundVariants) {
-      cva.compoundVariants = getSlotCompoundVariant(recipe.compoundVariants, slot);
-    }
-    return [slot, cva];
+var getSlotRecipes = (recipe = {}) => {
+  const init = (slot) => ({
+    className: [recipe.className, slot].filter(Boolean).join("__"),
+    base: recipe.base?.[slot] ?? {},
+    variants: {},
+    defaultVariants: recipe.defaultVariants ?? {},
+    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []
   });
-  return Object.fromEntries(parts);
+  const slots = recipe.slots ?? [];
+  const recipeParts = slots.map((slot) => [slot, init(slot)]);
+  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {
+    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {
+      recipeParts.forEach(([slot, slotRecipe]) => {
+        slotRecipe.variants[variantsKey] ??= {};
+        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};
+      });
+    }
+  }
+  return Object.fromEntries(recipeParts);
 };
 var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));
 
diff --git a/styled-system/patterns/aspect-ratio.d.ts b/styled-system/patterns/aspect-ratio.d.ts
index b9400d5b..31ac85c7 100644
--- a/styled-system/patterns/aspect-ratio.d.ts
+++ b/styled-system/patterns/aspect-ratio.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type AspectRatioProperties = {
    ratio?: ConditionalValue<number>
@@ -14,7 +14,7 @@ type AspectRatioStyles = AspectRatioProperties & DistributiveOmit<SystemStyleObj
 
 interface AspectRatioPatternFn {
   (styles?: AspectRatioStyles): string
-  raw: (styles: AspectRatioStyles) => SystemStyleObject
+  raw: (styles?: AspectRatioStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/bleed.d.ts b/styled-system/patterns/bleed.d.ts
index d81afa59..77799dd4 100644
--- a/styled-system/patterns/bleed.d.ts
+++ b/styled-system/patterns/bleed.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type BleedProperties = {
    inline?: PropertyValue<'marginInline'>
@@ -15,7 +15,7 @@ type BleedStyles = BleedProperties & DistributiveOmit<SystemStyleObject, keyof B
 
 interface BleedPatternFn {
   (styles?: BleedStyles): string
-  raw: (styles: BleedStyles) => SystemStyleObject
+  raw: (styles?: BleedStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/box.d.ts b/styled-system/patterns/box.d.ts
index 94123134..eabd9e61 100644
--- a/styled-system/patterns/box.d.ts
+++ b/styled-system/patterns/box.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type BoxProperties = {
    
@@ -14,7 +14,7 @@ type BoxStyles = BoxProperties & DistributiveOmit<SystemStyleObject, keyof BoxPr
 
 interface BoxPatternFn {
   (styles?: BoxStyles): string
-  raw: (styles: BoxStyles) => SystemStyleObject
+  raw: (styles?: BoxStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/center.d.ts b/styled-system/patterns/center.d.ts
index 8732b1f0..b5bc382c 100644
--- a/styled-system/patterns/center.d.ts
+++ b/styled-system/patterns/center.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type CenterProperties = {
    inline?: ConditionalValue<boolean>
@@ -14,7 +14,7 @@ type CenterStyles = CenterProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface CenterPatternFn {
   (styles?: CenterStyles): string
-  raw: (styles: CenterStyles) => SystemStyleObject
+  raw: (styles?: CenterStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/circle.d.ts b/styled-system/patterns/circle.d.ts
index ecf6cadb..7d73a030 100644
--- a/styled-system/patterns/circle.d.ts
+++ b/styled-system/patterns/circle.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type CircleProperties = {
    size?: PropertyValue<'width'>
@@ -14,7 +14,7 @@ type CircleStyles = CircleProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface CirclePatternFn {
   (styles?: CircleStyles): string
-  raw: (styles: CircleStyles) => SystemStyleObject
+  raw: (styles?: CircleStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/container.d.ts b/styled-system/patterns/container.d.ts
index 15dec7e7..43b9e266 100644
--- a/styled-system/patterns/container.d.ts
+++ b/styled-system/patterns/container.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type ContainerProperties = {
    
@@ -14,7 +14,7 @@ type ContainerStyles = ContainerProperties & DistributiveOmit<SystemStyleObject,
 
 interface ContainerPatternFn {
   (styles?: ContainerStyles): string
-  raw: (styles: ContainerStyles) => SystemStyleObject
+  raw: (styles?: ContainerStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/divider.d.ts b/styled-system/patterns/divider.d.ts
index d09ad47b..4da1a3dc 100644
--- a/styled-system/patterns/divider.d.ts
+++ b/styled-system/patterns/divider.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type DividerProperties = {
    orientation?: ConditionalValue<"horizontal" | "vertical">
@@ -16,7 +16,7 @@ type DividerStyles = DividerProperties & DistributiveOmit<SystemStyleObject, key
 
 interface DividerPatternFn {
   (styles?: DividerStyles): string
-  raw: (styles: DividerStyles) => SystemStyleObject
+  raw: (styles?: DividerStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/flex.d.ts b/styled-system/patterns/flex.d.ts
index 72920143..192f82f7 100644
--- a/styled-system/patterns/flex.d.ts
+++ b/styled-system/patterns/flex.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type FlexProperties = {
    align?: PropertyValue<'alignItems'>
@@ -20,7 +20,7 @@ type FlexStyles = FlexProperties & DistributiveOmit<SystemStyleObject, keyof Fle
 
 interface FlexPatternFn {
   (styles?: FlexStyles): string
-  raw: (styles: FlexStyles) => SystemStyleObject
+  raw: (styles?: FlexStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/float.d.ts b/styled-system/patterns/float.d.ts
index a050bcee..c16b2d42 100644
--- a/styled-system/patterns/float.d.ts
+++ b/styled-system/patterns/float.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type FloatProperties = {
    offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
@@ -17,7 +17,7 @@ type FloatStyles = FloatProperties & DistributiveOmit<SystemStyleObject, keyof F
 
 interface FloatPatternFn {
   (styles?: FloatStyles): string
-  raw: (styles: FloatStyles) => SystemStyleObject
+  raw: (styles?: FloatStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/grid-item.d.ts b/styled-system/patterns/grid-item.d.ts
index a0a66968..bba942ca 100644
--- a/styled-system/patterns/grid-item.d.ts
+++ b/styled-system/patterns/grid-item.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type GridItemProperties = {
    colSpan?: ConditionalValue<number>
@@ -19,7 +19,7 @@ type GridItemStyles = GridItemProperties & DistributiveOmit<SystemStyleObject, k
 
 interface GridItemPatternFn {
   (styles?: GridItemStyles): string
-  raw: (styles: GridItemStyles) => SystemStyleObject
+  raw: (styles?: GridItemStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/grid.d.ts b/styled-system/patterns/grid.d.ts
index 36e3fce5..4d35c284 100644
--- a/styled-system/patterns/grid.d.ts
+++ b/styled-system/patterns/grid.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type GridProperties = {
    gap?: PropertyValue<'gap'>
@@ -18,7 +18,7 @@ type GridStyles = GridProperties & DistributiveOmit<SystemStyleObject, keyof Gri
 
 interface GridPatternFn {
   (styles?: GridStyles): string
-  raw: (styles: GridStyles) => SystemStyleObject
+  raw: (styles?: GridStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/hstack.d.ts b/styled-system/patterns/hstack.d.ts
index 3c1e2604..876557f5 100644
--- a/styled-system/patterns/hstack.d.ts
+++ b/styled-system/patterns/hstack.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type HstackProperties = {
    justify?: PropertyValue<'justifyContent'>
@@ -15,7 +15,7 @@ type HstackStyles = HstackProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface HstackPatternFn {
   (styles?: HstackStyles): string
-  raw: (styles: HstackStyles) => SystemStyleObject
+  raw: (styles?: HstackStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/index.d.ts b/styled-system/patterns/index.d.ts
index 7ce04d1a..23a7ab02 100644
--- a/styled-system/patterns/index.d.ts
+++ b/styled-system/patterns/index.d.ts
@@ -1,21 +1,21 @@
 /* eslint-disable */
-export * from './box'
-export * from './flex'
-export * from './stack'
-export * from './vstack'
-export * from './hstack'
-export * from './spacer'
-export * from './square'
-export * from './circle'
-export * from './center'
-export * from './link-box'
-export * from './link-overlay'
-export * from './aspect-ratio'
-export * from './grid'
-export * from './grid-item'
-export * from './wrap'
-export * from './container'
-export * from './divider'
-export * from './float'
-export * from './bleed'
-export * from './visually-hidden'
\ No newline at end of file
+export * from './box';
+export * from './flex';
+export * from './stack';
+export * from './vstack';
+export * from './hstack';
+export * from './spacer';
+export * from './square';
+export * from './circle';
+export * from './center';
+export * from './link-box';
+export * from './link-overlay';
+export * from './aspect-ratio';
+export * from './grid';
+export * from './grid-item';
+export * from './wrap';
+export * from './container';
+export * from './divider';
+export * from './float';
+export * from './bleed';
+export * from './visually-hidden';
\ No newline at end of file
diff --git a/styled-system/patterns/link-box.d.ts b/styled-system/patterns/link-box.d.ts
index c536b756..90ef8fca 100644
--- a/styled-system/patterns/link-box.d.ts
+++ b/styled-system/patterns/link-box.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type LinkBoxProperties = {
    
@@ -14,7 +14,7 @@ type LinkBoxStyles = LinkBoxProperties & DistributiveOmit<SystemStyleObject, key
 
 interface LinkBoxPatternFn {
   (styles?: LinkBoxStyles): string
-  raw: (styles: LinkBoxStyles) => SystemStyleObject
+  raw: (styles?: LinkBoxStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/link-overlay.d.ts b/styled-system/patterns/link-overlay.d.ts
index 8337aae2..be4528d8 100644
--- a/styled-system/patterns/link-overlay.d.ts
+++ b/styled-system/patterns/link-overlay.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type LinkOverlayProperties = {
    
@@ -14,7 +14,7 @@ type LinkOverlayStyles = LinkOverlayProperties & DistributiveOmit<SystemStyleObj
 
 interface LinkOverlayPatternFn {
   (styles?: LinkOverlayStyles): string
-  raw: (styles: LinkOverlayStyles) => SystemStyleObject
+  raw: (styles?: LinkOverlayStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/spacer.d.ts b/styled-system/patterns/spacer.d.ts
index a6316115..7704d0c7 100644
--- a/styled-system/patterns/spacer.d.ts
+++ b/styled-system/patterns/spacer.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type SpacerProperties = {
    size?: ConditionalValue<Tokens["spacing"]>
@@ -14,7 +14,7 @@ type SpacerStyles = SpacerProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface SpacerPatternFn {
   (styles?: SpacerStyles): string
-  raw: (styles: SpacerStyles) => SystemStyleObject
+  raw: (styles?: SpacerStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/square.d.ts b/styled-system/patterns/square.d.ts
index 30a79189..1af58715 100644
--- a/styled-system/patterns/square.d.ts
+++ b/styled-system/patterns/square.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type SquareProperties = {
    size?: PropertyValue<'width'>
@@ -14,7 +14,7 @@ type SquareStyles = SquareProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface SquarePatternFn {
   (styles?: SquareStyles): string
-  raw: (styles: SquareStyles) => SystemStyleObject
+  raw: (styles?: SquareStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/stack.d.ts b/styled-system/patterns/stack.d.ts
index ce204190..246ace12 100644
--- a/styled-system/patterns/stack.d.ts
+++ b/styled-system/patterns/stack.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type StackProperties = {
    align?: PropertyValue<'alignItems'>
@@ -17,7 +17,7 @@ type StackStyles = StackProperties & DistributiveOmit<SystemStyleObject, keyof S
 
 interface StackPatternFn {
   (styles?: StackStyles): string
-  raw: (styles: StackStyles) => SystemStyleObject
+  raw: (styles?: StackStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/visually-hidden.d.ts b/styled-system/patterns/visually-hidden.d.ts
index fb0abf89..29bc60b4 100644
--- a/styled-system/patterns/visually-hidden.d.ts
+++ b/styled-system/patterns/visually-hidden.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type VisuallyHiddenProperties = {
    
@@ -14,7 +14,7 @@ type VisuallyHiddenStyles = VisuallyHiddenProperties & DistributiveOmit<SystemSt
 
 interface VisuallyHiddenPatternFn {
   (styles?: VisuallyHiddenStyles): string
-  raw: (styles: VisuallyHiddenStyles) => SystemStyleObject
+  raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/vstack.d.ts b/styled-system/patterns/vstack.d.ts
index 309b6892..7affb5be 100644
--- a/styled-system/patterns/vstack.d.ts
+++ b/styled-system/patterns/vstack.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type VstackProperties = {
    justify?: PropertyValue<'justifyContent'>
@@ -15,7 +15,7 @@ type VstackStyles = VstackProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface VstackPatternFn {
   (styles?: VstackStyles): string
-  raw: (styles: VstackStyles) => SystemStyleObject
+  raw: (styles?: VstackStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/patterns/wrap.d.ts b/styled-system/patterns/wrap.d.ts
index 060ef4e6..c53afb32 100644
--- a/styled-system/patterns/wrap.d.ts
+++ b/styled-system/patterns/wrap.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types'
-import type { Properties } from '../types/csstype'
-import type { PropertyValue } from '../types/prop-type'
-import type { DistributiveOmit } from '../types/system-types'
-import type { Tokens } from '../tokens'
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
 
 export type WrapProperties = {
    gap?: PropertyValue<'gap'>
@@ -18,7 +18,7 @@ type WrapStyles = WrapProperties & DistributiveOmit<SystemStyleObject, keyof Wra
 
 interface WrapPatternFn {
   (styles?: WrapStyles): string
-  raw: (styles: WrapStyles) => SystemStyleObject
+  raw: (styles?: WrapStyles) => SystemStyleObject
 }
 
 
diff --git a/styled-system/reset.css b/styled-system/reset.css
index ff42d80a..c7fbd202 100644
--- a/styled-system/reset.css
+++ b/styled-system/reset.css
@@ -20,8 +20,8 @@
       'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
       'Noto Color Emoji';
     -webkit-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     -moz-tab-size: 4;
     tab-size: 4;
     font-family: var(--global-font-body, var(--font-fallback));
@@ -163,24 +163,39 @@
     font-family: var(--global-font-mono, var(--font-fallback));
   }
 
-  [type='search'] {
+
+  input[type="text"],
+  input[type="email"],
+  input[type="search"],
+  input[type="password"] {
+    -webkit-appearance: none;
+    -moz-appearance: none; 
+  }
+
+  input[type='search'] {
     -webkit-appearance: textfield;
     outline-offset: -2px;
   }
 
-  ::-webkit-search-decoration {
+  ::-webkit-search-decoration,
+  ::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
 
   ::-webkit-file-upload-button {
     -webkit-appearance: button;
+    font: inherit;
   }
 
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
     height: auto;
   }
 
+  input[type='number']{
+    -moz-appearance: textfield;
+  }
+
   :-moz-ui-invalid {
     box-shadow: none;
   }
diff --git a/styled-system/tokens/index.d.ts b/styled-system/tokens/index.d.ts
index 38ba80dd..c398f48f 100644
--- a/styled-system/tokens/index.d.ts
+++ b/styled-system/tokens/index.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import type { Token } from './tokens'
+import type { Token } from './tokens';
 
 export declare const token: {
   (path: Token, fallback?: string): string
   var: (path: Token, fallback?: string) => string
 }
 
-export * from './tokens'
\ No newline at end of file
+export * from './tokens';
\ No newline at end of file
diff --git a/styled-system/types/composition.d.ts b/styled-system/types/composition.d.ts
index cb841528..43bfbbd5 100644
--- a/styled-system/types/composition.d.ts
+++ b/styled-system/types/composition.d.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { CompositionStyleObject } from './system-types'
+import type {  CompositionStyleObject  } from './system-types';
 
 type Recursive<T> = {
   [key: string]: Recursive<T> | T
diff --git a/styled-system/types/conditions.d.ts b/styled-system/types/conditions.d.ts
index 90cc92a8..82309fc6 100644
--- a/styled-system/types/conditions.d.ts
+++ b/styled-system/types/conditions.d.ts
@@ -1,119 +1,120 @@
 /* eslint-disable */
-import type { AnySelector, Selectors } from './selectors'
+import type { AnySelector, Selectors } from './selectors';
 
 export type Conditions = {
-	"_hover": string
-	"_focus": string
-	"_focusWithin": string
-	"_focusVisible": string
-	"_disabled": string
-	"_active": string
-	"_visited": string
-	"_target": string
-	"_readOnly": string
-	"_readWrite": string
-	"_empty": string
-	"_checked": string
-	"_enabled": string
-	"_expanded": string
-	"_highlighted": string
-	"_before": string
-	"_after": string
-	"_firstLetter": string
-	"_firstLine": string
-	"_marker": string
-	"_selection": string
-	"_file": string
-	"_backdrop": string
-	"_first": string
-	"_last": string
-	"_only": string
-	"_even": string
-	"_odd": string
-	"_firstOfType": string
-	"_lastOfType": string
-	"_onlyOfType": string
-	"_peerFocus": string
-	"_peerHover": string
-	"_peerActive": string
-	"_peerFocusWithin": string
-	"_peerFocusVisible": string
-	"_peerDisabled": string
-	"_peerChecked": string
-	"_peerInvalid": string
-	"_peerExpanded": string
-	"_peerPlaceholderShown": string
-	"_groupFocus": string
-	"_groupHover": string
-	"_groupActive": string
-	"_groupFocusWithin": string
-	"_groupFocusVisible": string
-	"_groupDisabled": string
-	"_groupChecked": string
-	"_groupExpanded": string
-	"_groupInvalid": string
-	"_indeterminate": string
-	"_required": string
-	"_valid": string
-	"_invalid": string
-	"_autofill": string
-	"_inRange": string
-	"_outOfRange": string
-	"_placeholder": string
-	"_placeholderShown": string
-	"_pressed": string
-	"_selected": string
-	"_default": string
-	"_optional": string
-	"_open": string
-	"_fullscreen": string
-	"_loading": string
-	"_currentPage": string
-	"_currentStep": string
-	"_motionReduce": string
-	"_motionSafe": string
-	"_print": string
-	"_landscape": string
-	"_portrait": string
-	"_dark": string
-	"_light": string
-	"_osDark": string
-	"_osLight": string
-	"_highContrast": string
-	"_lessContrast": string
-	"_moreContrast": string
-	"_ltr": string
-	"_rtl": string
-	"_scrollbar": string
-	"_scrollbarThumb": string
-	"_scrollbarTrack": string
-	"_horizontal": string
-	"_vertical": string
-	"sm": string
-	"smOnly": string
-	"smDown": string
-	"md": string
-	"mdOnly": string
-	"mdDown": string
-	"lg": string
-	"lgOnly": string
-	"lgDown": string
-	"xl": string
-	"xlOnly": string
-	"xlDown": string
-	"2xl": string
-	"2xlOnly": string
-	"smToMd": string
-	"smToLg": string
-	"smToXl": string
-	"smTo2xl": string
-	"mdToLg": string
-	"mdToXl": string
-	"mdTo2xl": string
-	"lgToXl": string
-	"lgTo2xl": string
-	"xlTo2xl": string
-	"base": string
+	/** `&:is(:hover, [data-hover])` */"_hover": string
+	/** `&:is(:focus, [data-focus])` */"_focus": string
+	/** `&:focus-within` */"_focusWithin": string
+	/** `&:is(:focus-visible, [data-focus-visible])` */"_focusVisible": string
+	/** `&:is(:disabled, [disabled], [data-disabled])` */"_disabled": string
+	/** `&:is(:active, [data-active])` */"_active": string
+	/** `&:visited` */"_visited": string
+	/** `&:target` */"_target": string
+	/** `&:is(:read-only, [data-read-only])` */"_readOnly": string
+	/** `&:read-write` */"_readWrite": string
+	/** `&:is(:empty, [data-empty])` */"_empty": string
+	/** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */"_checked": string
+	/** `&:enabled` */"_enabled": string
+	/** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */"_expanded": string
+	/** `&[data-highlighted]` */"_highlighted": string
+	/** `&::before` */"_before": string
+	/** `&::after` */"_after": string
+	/** `&::first-letter` */"_firstLetter": string
+	/** `&::first-line` */"_firstLine": string
+	/** `&::marker` */"_marker": string
+	/** `&::selection` */"_selection": string
+	/** `&::file-selector-button` */"_file": string
+	/** `&::backdrop` */"_backdrop": string
+	/** `&:first-child` */"_first": string
+	/** `&:last-child` */"_last": string
+	/** `&:only-child` */"_only": string
+	/** `&:nth-child(even)` */"_even": string
+	/** `&:nth-child(odd)` */"_odd": string
+	/** `&:first-of-type` */"_firstOfType": string
+	/** `&:last-of-type` */"_lastOfType": string
+	/** `&:only-of-type` */"_onlyOfType": string
+	/** `.peer:is(:focus, [data-focus]) ~ &` */"_peerFocus": string
+	/** `.peer:is(:hover, [data-hover]) ~ &` */"_peerHover": string
+	/** `.peer:is(:active, [data-active]) ~ &` */"_peerActive": string
+	/** `.peer:focus-within ~ &` */"_peerFocusWithin": string
+	/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */"_peerFocusVisible": string
+	/** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */"_peerDisabled": string
+	/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */"_peerChecked": string
+	/** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */"_peerInvalid": string
+	/** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */"_peerExpanded": string
+	/** `.peer:placeholder-shown ~ &` */"_peerPlaceholderShown": string
+	/** `.group:is(:focus, [data-focus]) &` */"_groupFocus": string
+	/** `.group:is(:hover, [data-hover]) &` */"_groupHover": string
+	/** `.group:is(:active, [data-active]) &` */"_groupActive": string
+	/** `.group:focus-within &` */"_groupFocusWithin": string
+	/** `.group:is(:focus-visible, [data-focus-visible]) &` */"_groupFocusVisible": string
+	/** `.group:is(:disabled, [disabled], [data-disabled]) &` */"_groupDisabled": string
+	/** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */"_groupChecked": string
+	/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */"_groupExpanded": string
+	/** `.group:invalid &` */"_groupInvalid": string
+	/** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")` */"_indeterminate": string
+	/** `&:required` */"_required": string
+	/** `&:is(:valid, [data-valid])` */"_valid": string
+	/** `&:is(:invalid, [data-invalid])` */"_invalid": string
+	/** `&:autofill` */"_autofill": string
+	/** `&:in-range` */"_inRange": string
+	/** `&:out-of-range` */"_outOfRange": string
+	/** `&::placeholder` */"_placeholder": string
+	/** `&:placeholder-shown` */"_placeholderShown": string
+	/** `&:is([aria-pressed=true], [data-pressed])` */"_pressed": string
+	/** `&:is([aria-selected=true], [data-selected])` */"_selected": string
+	/** `&:default` */"_default": string
+	/** `&:optional` */"_optional": string
+	/** `&:is([open], [data-open], [data-state="open"])` */"_open": string
+	/** `&:fullscreen` */"_fullscreen": string
+	/** `&:is([data-loading], [aria-busy=true])` */"_loading": string
+	/** `&[aria-current=page]` */"_currentPage": string
+	/** `&[aria-current=step]` */"_currentStep": string
+	/** `@media (prefers-reduced-motion: reduce)` */"_motionReduce": string
+	/** `@media (prefers-reduced-motion: no-preference)` */"_motionSafe": string
+	/** `@media print` */"_print": string
+	/** `@media (orientation: landscape)` */"_landscape": string
+	/** `@media (orientation: portrait)` */"_portrait": string
+	/** ` &.dark, .dark &` */"_dark": string
+	/** ` &.light, .light &` */"_light": string
+	/** `@media (prefers-color-scheme: dark)` */"_osDark": string
+	/** `@media (prefers-color-scheme: light)` */"_osLight": string
+	/** `@media (forced-colors: active)` */"_highContrast": string
+	/** `@media (prefers-contrast: less)` */"_lessContrast": string
+	/** `@media (prefers-contrast: more)` */"_moreContrast": string
+	/** `[dir=ltr] &` */"_ltr": string
+	/** `[dir=rtl] &` */"_rtl": string
+	/** `&::-webkit-scrollbar` */"_scrollbar": string
+	/** `&::-webkit-scrollbar-thumb` */"_scrollbarThumb": string
+	/** `&::-webkit-scrollbar-track` */"_scrollbarTrack": string
+	/** `&[data-orientation=horizontal]` */"_horizontal": string
+	/** `&[data-orientation=vertical]` */"_vertical": string
+	/** `@media screen and (min-width: 40em)` */"sm": string
+	/** `@media screen and (min-width: 40em) and (max-width: 47.996875em)` */"smOnly": string
+	/** `@media screen and (max-width: 40em)` */"smDown": string
+	/** `@media screen and (min-width: 48em)` */"md": string
+	/** `@media screen and (min-width: 48em) and (max-width: 63.996875em)` */"mdOnly": string
+	/** `@media screen and (max-width: 48em)` */"mdDown": string
+	/** `@media screen and (min-width: 64em)` */"lg": string
+	/** `@media screen and (min-width: 64em) and (max-width: 79.996875em)` */"lgOnly": string
+	/** `@media screen and (max-width: 64em)` */"lgDown": string
+	/** `@media screen and (min-width: 80em)` */"xl": string
+	/** `@media screen and (min-width: 80em) and (max-width: 95.996875em)` */"xlOnly": string
+	/** `@media screen and (max-width: 80em)` */"xlDown": string
+	/** `@media screen and (min-width: 96em)` */"2xl": string
+	/** `@media screen and (min-width: 96em)` */"2xlOnly": string
+	/** `@media screen and (max-width: 96em)` */"2xlDown": string
+	/** `@media screen and (min-width: 40em) and (max-width: 47.996875em)` */"smToMd": string
+	/** `@media screen and (min-width: 40em) and (max-width: 63.996875em)` */"smToLg": string
+	/** `@media screen and (min-width: 40em) and (max-width: 79.996875em)` */"smToXl": string
+	/** `@media screen and (min-width: 40em) and (max-width: 95.996875em)` */"smTo2xl": string
+	/** `@media screen and (min-width: 48em) and (max-width: 63.996875em)` */"mdToLg": string
+	/** `@media screen and (min-width: 48em) and (max-width: 79.996875em)` */"mdToXl": string
+	/** `@media screen and (min-width: 48em) and (max-width: 95.996875em)` */"mdTo2xl": string
+	/** `@media screen and (min-width: 64em) and (max-width: 79.996875em)` */"lgToXl": string
+	/** `@media screen and (min-width: 64em) and (max-width: 95.996875em)` */"lgTo2xl": string
+	/** `@media screen and (min-width: 80em) and (max-width: 95.996875em)` */"xlTo2xl": string
+	/** The base (=no conditions) styles to apply  */"base": string
 }
 
 export type Condition = keyof Conditions
diff --git a/styled-system/types/global.d.ts b/styled-system/types/global.d.ts
index 0d44672c..eb4e9240 100644
--- a/styled-system/types/global.d.ts
+++ b/styled-system/types/global.d.ts
@@ -1,17 +1,19 @@
 /* eslint-disable */
-import type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe'
-import type { Parts } from './parts'
-import type { PatternConfig, PatternProperties } from './pattern'
-import type { GlobalStyleObject, SystemStyleObject } from './system-types'
-import type { CompositionStyles } from './composition'
+// @ts-nocheck
+import type { TextStyles, LayerStyles } from '@pandacss/dev'
+import type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe';
+import type { Parts } from './parts';
+import type { PatternConfig, PatternProperties } from './pattern';
+import type { GlobalStyleObject, SystemStyleObject } from './system-types';
+import type { CompositionStyles } from './composition';
 
 declare module '@pandacss/dev' {
   export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): RecipeConfig
   export function defineSlotRecipe<S extends string, V extends SlotRecipeVariantRecord<S>>(config: SlotRecipeConfig<S, V>): SlotRecipeConfig
   export function defineStyles(definition: SystemStyleObject): SystemStyleObject
   export function defineGlobalStyles(definition: GlobalStyleObject): GlobalStyleObject
-  export function defineTextStyles(definition: CompositionStyles['textStyles']): CompositionStyles['textStyles']
-  export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
+  export function defineTextStyles(definition: CompositionStyles['textStyles']): TextStyles
+  export function defineLayerStyles(definition: CompositionStyles['layerStyles']): LayerStyles
   export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): PatternConfig
   export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>
 }
\ No newline at end of file
diff --git a/styled-system/types/index.d.ts b/styled-system/types/index.d.ts
index bfe4ce0a..3e69da81 100644
--- a/styled-system/types/index.d.ts
+++ b/styled-system/types/index.d.ts
@@ -1,4 +1,6 @@
 /* eslint-disable */
-import './global'
-export type { ConditionalValue } from './conditions'
-export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
+import './global.d.ts'
+export type { ConditionalValue } from './conditions';
+export type { PatternConfig, PatternProperties } from './pattern';
+export type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe';
+export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types';
diff --git a/styled-system/types/pattern.d.ts b/styled-system/types/pattern.d.ts
index 51d6a1cd..ca143a6e 100644
--- a/styled-system/types/pattern.d.ts
+++ b/styled-system/types/pattern.d.ts
@@ -1,6 +1,6 @@
 /* eslint-disable */
-import type { CssProperty, SystemStyleObject } from './system-types'
-import type { TokenCategory } from '../tokens'
+import type {  CssProperty, SystemStyleObject  } from './system-types';
+import type {  TokenCategory  } from '../tokens/index';
 
 type Primitive = string | number | boolean | null | undefined
 type LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)
diff --git a/styled-system/types/prop-type.d.ts b/styled-system/types/prop-type.d.ts
index 006895fc..d672b2ef 100644
--- a/styled-system/types/prop-type.d.ts
+++ b/styled-system/types/prop-type.d.ts
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { ConditionalValue } from './conditions';
-import type { CssProperties } from './system-types'
-import type { Tokens } from '../tokens'
+import type { CssProperties } from './system-types';
+import type { Tokens } from '../tokens/index';
 
 type PropertyValueTypes  = {
 	aspectRatio: "auto" | "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden";
diff --git a/styled-system/types/recipe.d.ts b/styled-system/types/recipe.d.ts
index 7ca73d0d..c1ef174f 100644
--- a/styled-system/types/recipe.d.ts
+++ b/styled-system/types/recipe.d.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { SystemStyleObject, DistributiveOmit } from './system-types'
+import type {  SystemStyleObject, DistributiveOmit  } from './system-types';
 
 type Pretty<T> = { [K in keyof T]: T[K] } & {}
 
@@ -100,6 +100,7 @@ export type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord>
 ) => SlotRecord<S, string>
 
 export type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {
+  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>
   variantKeys: (keyof T)[]
   variantMap: RecipeVariantMap<T>
   splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]
diff --git a/styled-system/types/selectors.d.ts b/styled-system/types/selectors.d.ts
index 8b90c956..0b36d984 100644
--- a/styled-system/types/selectors.d.ts
+++ b/styled-system/types/selectors.d.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { Pseudos } from './csstype'
+import type {  Pseudos  } from './csstype';
 
 type AriaAttributes =
   | '[aria-disabled]'
diff --git a/styled-system/types/style-props.d.ts b/styled-system/types/style-props.d.ts
index 88d71fc2..4d8d9348 100644
--- a/styled-system/types/style-props.d.ts
+++ b/styled-system/types/style-props.d.ts
@@ -1,7 +1,7 @@
 /* eslint-disable */
-import type { ConditionalValue } from './conditions'
-import type { PropertyValue } from './prop-type'
-import type { Token } from '../tokens'
+import type { ConditionalValue } from './conditions';
+import type { PropertyValue } from './prop-type';
+import type { Token } from '../tokens/index';
 
 export type CssVarProperties = {
   [key in `--${string}`]?: ConditionalValue<Token | (string & {}) | (number & {})>
diff --git a/styled-system/types/system-types.d.ts b/styled-system/types/system-types.d.ts
index 561baaa6..c75883f7 100644
--- a/styled-system/types/system-types.d.ts
+++ b/styled-system/types/system-types.d.ts
@@ -1,7 +1,7 @@
 /* eslint-disable */
-import type { ConditionalValue, Conditions, Nested } from './conditions'
-import type { PropertiesFallback } from './csstype'
-import type { SystemProperties, CssVarProperties } from './style-props'
+import type {  ConditionalValue, Conditions, Nested  } from './conditions';
+import type {  PropertiesFallback  } from './csstype';
+import type {  SystemProperties, CssVarProperties  } from './style-props';
 
 type String = string & {}
 type Number = number & {}