install sharp for images manipulation

package.json

@@ -8,7 +8,8 @@
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start",
-    "gen-types": "sh ./scripts/gen-types-from-pb.sh"
+    "gen-types": "sh ./scripts/gen-types-from-pb.sh",
+    "prepare": "panda codegen"
   },
   "dependencies": {
     "@editorjs/editorjs": "^2.27.0",
@@ -43,6 +44,7 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
+    "@pandacss/dev": "^0.3.1",
     "@types/node": "^18.16.7",
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.2.6",

panda.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "@pandacss/dev"
+
+export default defineConfig({
+    // Whether to use css reset
+    preflight: true,
+
+    // Where to look for your css declarations
+    include: ["./src/**/*.{js,jsx,ts,tsx}", "./src/pages/**/*.{js,jsx,ts,tsx}"],
+
+    // Files to exclude
+    exclude: [],
+
+    // Useful for theme customization
+    theme: {
+        extend: {
+            tokens: {
+                fonts: {
+                    poppins: { value: "var(--font-poppins), sans-serif", },
+                    lato: { value: "var(--font-lato), sans-serif", },
+                }
+            }
+        }
+    },
+
+    // The output directory for your css system
+    outdir: "styled-system",
+
+})

postcss.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@pandacss/dev/postcss': {},
-    autoprefixer: {},
   },
-};
+}

src/components/Footer.tsx

@@ -1,41 +1,46 @@
-import Link from "next/link";
+import { css } from '../../styled-system/css';
-import Image from "next/image";
+
-import { FaGithub } from "react-icons/fa";
+import Link from 'next/link'
+import Image from 'next/image'
+import { FaGithub } from 'react-icons/fa'
 
 export default function Footer() {
   return (
-    <footer className="w-full bg-neutral-800">
+    <footer className={css({ width: 'full', backgroundColor: 'neutral.800' })}>
-      <div className="container mx-auto p-8">
+      <div
-        <div className="flex items-center justify-around md:flex-row">
+        className={css({
-          <Link className="flex items-center" href="/">
+          width: 'container',
-            <Image
+          maxWidth: 'container',
-              src="/logo.png"
+          marginLeft: 'auto',
-              alt="Logo photo club haute lozère"
+          marginRight: 'auto',
-              width={128}
+          padding: '8',
-              height={77}
+        })}
-            />
+      >
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-around',
+            md: { flexDirection: 'row' },
+          })}
+        >
+          <Link className={css({ display: 'flex', alignItems: 'center' })} href="/">
+            <Image src="/logo.png" alt="Logo photo club haute lozère" width={128} height={77} />
           </Link>
-          <div className="ml-4 flex flex-col items-center">
+          <div className={css({ marginLeft: '4', display: 'flex', flexDirection: 'column', alignItems: 'center' })}>
-            <span className="text-neutral-300">
+            <span className={css({ color: 'neutral.300' })}>© 2023 Photo Club de Haute Lozère</span>
-              © 2023 Photo Club de Haute Lozère
+            <span className={css({ color: 'neutral.300' })}>Tous droits réservés</span>
-            </span>
-            <span className="text-neutral-300">Tous droits réservés</span>
           </div>
-          <div className="ml-4 flex">
+          <div className={css({ marginLeft: '4', display: 'flex' })}>
-            <span className="text-neutral-300">
+            <span className={css({ color: 'neutral.300' })}>
-              Développé par{" "}
+              Développé par{' '}
-              <a
+              <a href="https://github.com/polynux" target="_blank" rel="noreferrer">
-                href="https://github.com/polynux"
+                polynux <FaGithub className={css({ display: 'inline' })} />
-                target="_blank"
-                rel="noreferrer"
-              >
-                polynux <FaGithub className="inline" />
               </a>
             </span>
           </div>
         </div>
       </div>
     </footer>
-  );
+  )
 }
-

src/components/Header.tsx

@@ -1,33 +1,54 @@
-import Link from "next/link";
+import { css } from '../../styled-system/css';
-import Image from "next/image";
+
+import Link from 'next/link'
+import Image from 'next/image'
 
 export default function Header() {
   return (
-    <header className="flex w-full items-center justify-between bg-gray-800 p-8 text-white">
+    <header
+      className={css({
+        display: 'flex',
+        width: 'full',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: 'gray.800',
+        padding: '8',
+        color: 'white',
+      })}
+    >
       <Link href="/">
         <Image src="/logo.png" alt="My Site Logo" width={128} height={77} />
       </Link>
       <nav>
-        <ul className="flex items-center gap-2 space-x-4">
+        <ul className={css({ display: 'flex', alignItems: 'center', gap: '2', marginRight: '4', marginLeft: '4' })}>
           <li>
-            <Link href="/le-club" className="font-poppins text-xl">
+            <Link href="/le-club" className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
               Le club
             </Link>
           </li>
           <li>
-            <Link href="/galeries" className="font-poppins text-xl">
+            <Link href="/galeries" className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
               Galeries
             </Link>
           </li>
           <li>
-            <Link href="/contact" className="font-poppins text-xl">
+            <Link href="/contact" className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
               Contact
             </Link>
           </li>
           <li>
             <Link
               href="/espace-membres"
-              className="bg-white px-6 py-2 font-poppins text-xl text-stone-900"
+              className={css({
+                backgroundColor: 'white',
+                paddingLeft: '6',
+                paddingRight: '6',
+                paddingTop: '2',
+                paddingBottom: '2',
+                fontSize: 'xl',
+                lineHeight: 'xl',
+                color: 'stone.900',
+              })}
             >
               Espace membres
             </Link>
@@ -35,5 +56,5 @@ export default function Header() {
         </ul>
       </nav>
     </header>
-  );
+  )
 }

src/components/Paragraph.tsx

@@ -0,0 +1,7 @@
+import { css } from "../../styled-system/css";
+
+export default function Paragraph({ children }: { children: React.ReactNode }) {
+  return <p className={css({
+    fontSize: "1.2rem",
+  })}>{children}</p>;
+}

src/components/ReactEditor.tsx

@@ -8,8 +8,6 @@ import Undo from "editorjs-undo";
 import DragDrop from "editorjs-drag-drop";
 import ColumnTool from "@/utils/editor-tools/column";
 
-import "@/styles/editor.css";
-
 type Props = {
   data?: OutputData;
   onChange(val: OutputData): void;
@@ -58,7 +56,20 @@ const EditorBlock = ({ data, onChange, holder, autofocus }: Props) => {
     };
   }, []);
 
-  return <div id={holder} />;
+  return (
+    <>
+      <div id={holder} />
+      <style jsx>{`
+        .ce-block .ce-block__content {
+          max-width: unset;
+        }
+
+        .ce-toolbar .ce-toolbar__content {
+          max-width: unset;
+        }
+    `}</style>
+    </>
+  );
 };
 
 export default memo(EditorBlock);

src/layouts/Home.tsx

@@ -1,13 +1,13 @@
-import Head from "next/head";
+import Head from 'next/head'
-import Header from "@/components/Header";
+import Header from '@/components/Header'
-import Footer from "@/components/Footer";
+import Footer from '@/components/Footer'
 
-export default function Layout({ children, title }: { children: React.ReactNode, title?: string }) {
+export default function Layout({ children, title }: { children: React.ReactNode; title?: string }) {
-  const newTitle = title ? title + " | " : "";
+  const newTitle = title ? title + ' | ' : ''
   return (
     <div>
       <Head>
-        <title>{newTitle + "Photo Club Haute Lozère"}</title>
+        <title>{newTitle + 'Photo Club Haute Lozère'}</title>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="description" content="Site du photo club de Haute Lozère" />
@@ -33,6 +33,5 @@ export default function Layout({ children, title }: { children: React.ReactNode,
       <main>{children}</main>
       <Footer />
     </div>
-  );
+  )
 }
-

src/pages/index.tsx

@@ -2,8 +2,10 @@ import Image from "next/image";
 import Layout from "@/layouts/Home";
 import { PagesRecord } from "@/@types/pocketbase-types";
 import { Content, EditorRender } from "@/components/EditorRender";
+import { css } from "../../styled-system/css";
+import Paragraph from "@/components/Paragraph";
 
-function Home({ data }: { data: PagesRecord<Content>}) {
+function Home({ data }: { data: PagesRecord<Content> }) {
   return (
     <Layout title="Accueil">
       <Image
@@ -12,32 +14,53 @@ function Home({ data }: { data: PagesRecord<Content>}) {
         width={1920}
         height={500}
       />
-      <div className="container mx-auto p-8">
+      <div className={css({
-        <div className="mb-4 flex gap-10">
+        mx: "auto",
-          <div className="w-1/2">
+        p: 8,
-            <h1 className="font-poppins text-5xl">Notre club photo</h1>
+        maxWidth: 1200,
+      })}>
+        <div className={css({
+          display: "flex",
+          gap: 10,
+          mb: 4,
+        })}>
+          <div className={css({
+            w: "1/2",
+          })}>
+            <h1 className={css({
+              fontSize: "2rem",
+              fontFamily: "poppins",
+            })}>Notre club photo</h1>
             <div className="line h-1 w-full bg-black"></div>
           </div>
-          <div className="w-1/2"></div>
+          <div className={css({ w: "1/2" })}></div>
         </div>
-        <div className="flex gap-10">
+        <div className={css({
-          <div className="flex w-1/2 flex-col gap-8">
+          display: "flex",
-            <p className="text-xl">
+          gap: 10,
+        })}>
+          <div className={css({
+            w: "1/2",
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+          })}>
+            <Paragraph>
               Le Photo Club de Haute Lozère est une association loi 1901 créée
               en 2018.
-            </p>
+            </Paragraph>
-            <p className="text-xl">
+            <Paragraph>
               Le club propose à ses adhérents de partager en groupe la pratique
               de la photographie, de l&apos;initiation à des techniques plus
               avancées et en découvrir les multiples facettes.
-            </p>
+            </Paragraph>
-            <p className="text-xl">
+            <Paragraph>
               L’échange de connaissances et de savoir-faire autour des
               techniques et de l’art photographiques ainsi que l’organisation
               d’événements (rencontres, sorties, reportages, concours liés à la
               pratique photographique) travaux informatiques de post traitement
               font parties de nos activités.
-            </p>
+            </Paragraph>
             <Image
               src={"/forum-eaee.png"}
               alt="Forum photo club haute lozère"
@@ -45,35 +68,40 @@ function Home({ data }: { data: PagesRecord<Content>}) {
               height={320}
             />
           </div>
-          <div className="flex w-1/2 flex-col gap-6">
+          <div className={css({
+            w: "1/2",
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+          })}>
             <Image
               src={"/132108978_o.png"}
               alt="Forum photo club haute lozère"
               width={740}
               height={320}
             />
-            <p className="text-xl">
+            <Paragraph>
               Ainsi, des sorties à thème sont programmées avec des séances
               d’analyse des photos réalisées.
-            </p>
+            </Paragraph>
-            <p className="text-xl">
+            <Paragraph>
               Nous proposons également des séances de formations aux différentes
               techniques de la photographie (l’appareil photo, la prise de vue,
               gestion de la lumière…).
-            </p>
+            </Paragraph>
-            <p className="text-xl">
+            <Paragraph>
               En fin de saison, pour finaliser et mettre en valeur nos travaux,
               une exposition de nos photographies sera proposée au public. Nous
               invitons tous les amateurs de photos à nous rejoindre et partager
               cette passion.
-            </p>
+            </Paragraph>
-            <p className="text-xl">
+            <Paragraph>
               N’hésitez à contacter le Président : Bernard Sapin au
               <a href="tel:0681818181" className="font-bold">
                 {" "}
                 06 81 81 81 81
               </a>
-            </p>
+            </Paragraph>
           </div>
         </div>
       </div>
@@ -97,7 +125,7 @@ export async function getServerSideProps() {
 
   return {
     props: {
-      data: data,
+      data: JSON.parse(JSON.stringify(data.content)),
     },
   }
 }

src/pages/le-club.tsx

@@ -1,66 +1,58 @@
-import Layout from "@/layouts/Home";
+import { css } from "../../styled-system/css";
-import Image from "next/image";
+
+import Layout from '@/layouts/Home'
+import Image from 'next/image'
 
 export default function LeClub() {
   return (
     <Layout title="Le club">
-      <div className="container mx-auto p-8">
+      <div
-        <div className="flex flex-col gap-6">
+        className={css({
-          <h1 className="text-4xl font-bold">Le club</h1>
+          width: 'container',
-          <div className="flex flex-col gap-6">
+          maxWidth: 'container',
-            <p className="text-xl">
+          marginLeft: 'auto',
-              Le club photo de la Haute Lozère a été créé en 1982 par un groupe
+          marginRight: 'auto',
-              d’amateurs de photographie. Il a été reconnu d’utilité publique en
+          padding: '8',
-              1987 et a obtenu le statut de club de la Fédération Française de
+        })}
-              Photographie en 1992. Il compte aujourd’hui une centaine d’adhérents
+      >
-              et est affilié à la Fédération Française de Photographie.
+        <div className={css({ display: 'flex', flexDirection: 'column', gap: '6' })}>
+          <h1 className={css({ fontSize: '4xl', lineHeight: '4xl', fontWeight: 'bold' })}>Le club</h1>
+          <div className={css({ display: 'flex', flexDirection: 'column', gap: '6' })}>
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
+              Le club photo de la Haute Lozère a été créé en 1982 par un groupe d’amateurs de photographie. Il a été
+              reconnu d’utilité publique en 1987 et a obtenu le statut de club de la Fédération Française de
+              Photographie en 1992. Il compte aujourd’hui une centaine d’adhérents et est affilié à la Fédération
+              Française de Photographie.
             </p>
-            <p className="text-xl">
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
-              Le club propose à ses adhérents de partager en groupe la pratique de
+              Le club propose à ses adhérents de partager en groupe la pratique de la photographie, de l&apos;initiation
-              la photographie, de l&apos;initiation à des techniques plus
+              à des techniques plus avancées et en découvrir les multiples facettes.
-              avancées et en découvrir les multiples facettes.
             </p>
-            <p className="text-xl">
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
-              L’échange de connaissances et de savoir-faire autour des techniques
+              L’échange de connaissances et de savoir-faire autour des techniques et de l’art photographiques ainsi que
-              et de l’art photographiques ainsi que l’organisation d’événements
+              l’organisation d’événements (rencontres, sorties, reportages, concours liés à la pratique photographique)
-              (rencontres, sorties, reportages, concours liés à la pratique
+              travaux informatiques de post traitement font parties de nos activités.
-              photographique) travaux informatiques de post traitement font parties
-              de nos activités.
             </p>
-            <Image
+            <Image src={'/forum-eaee.png'} alt="Forum photo club haute lozère" width={740} height={320} />
-              src={"/forum-eaee.png"}
-              alt="Forum photo club haute lozère"
-              width={740}
-              height={320}
-            />
           </div>
-          <div className="flex flex-col gap-6">
+          <div className={css({ display: 'flex', flexDirection: 'column', gap: '6' })}>
-            <Image
+            <Image src={'/132108978_o.png'} alt="Forum photo club haute lozère" width={740} height={320} />
-              src={"/132108978_o.png"}
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
-              alt="Forum photo club haute lozère"
+              Ainsi, des sorties à thème sont programmées avec des séances d’analyse des photos réalisées.
-              width={740}
-              height={320}
-            />
-            <p className="text-xl">
-              Ainsi, des sorties à thème sont programmées avec des séances
-              d’analyse des photos réalisées.
             </p>
-            <p className="text-xl">
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
-              Nous proposons également des séances de formations aux différentes
+              Nous proposons également des séances de formations aux différentes techniques de la photographie
-              techniques de la photographie (l’appareil photo, la prise de vue,
+              (l’appareil photo, la prise de vue, gestion de la lumière…).
-              gestion de la lumière…).
             </p>
-            <p className="text-xl">
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
-              Le club organise également des expositions et des concours
+              Le club organise également des expositions et des concours photographiques.
-              photographiques.
             </p>
-            <p className="text-xl">
+            <p className={css({ fontSize: 'xl', lineHeight: 'xl' })}>
-              Le club est affilié à la Fédération Française de Photographie et
+              Le club est affilié à la Fédération Française de Photographie et participe à ses concours nationaux.
-              participe à ses concours nationaux.
             </p>
           </div>
         </div>
       </div>
     </Layout>
-  );
+  )
 }

src/styles/editor.css

@@ -1,7 +0,0 @@
-.ce-block .ce-block__content {
-  max-width: unset;
-}
-
-.ce-toolbar .ce-toolbar__content {
-  max-width: unset;
-}

src/styles/globals.css

@@ -1,14 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
 
-@tailwind base;
+@layer reset, base, tokens, recipes, utilities;
-@tailwind components;
-@tailwind utilities;
 
-@layer base {
+::root {
-  html {
+  --font-poppins: 'Poppins', sans-serif;
-    font-family: 'Lato', system-ui, sans-serif;
+  --font-lato: 'Lato', sans-serif;
-  }
+}
+
+html, p {
+  font-family: var(--font-lato), system-ui, sans-serif;
 }
 
 h1 {

styled-system/css/conditions.mjs

@@ -0,0 +1,33 @@
+import { withoutSpace } from '../helpers.mjs';
+
+const conditions = new Set(["_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","_highConstrast","_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"])
+
+export function isCondition(value){
+  return conditions.has(value) || /^@|&|&$/.test(value)
+}
+
+const underscoreRegex = /^_/
+const selectorRegex = /&|@/
+
+export function finalizeConditions(paths){
+  return paths.map((path) => {
+    if (conditions.has(path)){
+      return path.replace(underscoreRegex, '')
+    }
+
+    if (selectorRegex.test(path)){
+      return `[${withoutSpace(path.trim())}]`
+    }
+
+    return path
+  })}
+
+  export function sortConditions(paths){
+    return paths.sort((a, b) => {
+      const aa = isCondition(a)
+      const bb = isCondition(b)
+      if (aa && !bb) return 1
+      if (!aa && bb) return -1
+      return 0
+    })
+  }

styled-system/css/css.d.ts

@@ -0,0 +1,2 @@
+import type { SystemStyleObject } from '../types'
+export declare function css(styles: SystemStyleObject): string

styled-system/css/css.mjs

@@ -0,0 +1,388 @@
+import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs';
+import { sortConditions, finalizeConditions } from './conditions.mjs';
+
+const classNameMap = {
+  "aspectRatio": "aspect",
+  "boxDecorationBreak": "decoration",
+  "zIndex": "z",
+  "boxSizing": "box",
+  "objectPosition": "object",
+  "objectFit": "object",
+  "overscrollBehavior": "overscroll",
+  "overscrollBehaviorX": "overscroll-x",
+  "overscrollBehaviorY": "overscroll-y",
+  "position": "pos",
+  "top": "top",
+  "left": "left",
+  "insetInline": "inset-x",
+  "insetBlock": "inset-y",
+  "inset": "inset",
+  "insetBlockEnd": "inset-b",
+  "insetBlockStart": "inset-t",
+  "insetInlineEnd": "end",
+  "insetInlineStart": "start",
+  "right": "right",
+  "bottom": "bottom",
+  "insetX": "inset-x",
+  "insetY": "inset-y",
+  "float": "float",
+  "visibility": "vis",
+  "display": "d",
+  "hideFrom": "hide",
+  "hideBelow": "show",
+  "flexBasis": "basis",
+  "flex": "flex",
+  "flexDirection": "flex",
+  "flexGrow": "grow",
+  "flexShrink": "shrink",
+  "gridTemplateColumns": "grid-cols",
+  "gridTemplateRows": "grid-cols",
+  "gridColumn": "col-span",
+  "gridRow": "row-span",
+  "gridColumnStart": "col-start",
+  "gridColumnEnd": "col-end",
+  "gridAutoFlow": "grid-flow",
+  "gridAutoColumns": "auto-cols",
+  "gridAutoRows": "auto-rows",
+  "gap": "gap",
+  "gridGap": "gap",
+  "gridRowGap": "gap-x",
+  "gridColumnGap": "gap-y",
+  "rowGap": "gap-x",
+  "columnGap": "gap-y",
+  "justifyContent": "justify",
+  "alignContent": "content",
+  "alignItems": "items",
+  "alignSelf": "self",
+  "padding": "p",
+  "paddingLeft": "pl",
+  "paddingRight": "pr",
+  "paddingTop": "pt",
+  "paddingBottom": "pb",
+  "paddingBlock": "py",
+  "paddingBlockEnd": "pb",
+  "paddingBlockStart": "pt",
+  "paddingInline": "px",
+  "paddingInlineEnd": "pe",
+  "paddingInlineStart": "ps",
+  "marginLeft": "ml",
+  "marginRight": "mr",
+  "marginTop": "mt",
+  "marginBottom": "mb",
+  "margin": "m",
+  "marginBlock": "my",
+  "marginBlockEnd": "mb",
+  "marginBlockStart": "mt",
+  "marginInline": "mx",
+  "marginInlineEnd": "me",
+  "marginInlineStart": "ms",
+  "outlineWidth": "ring",
+  "outlineColor": "ring",
+  "outline": "ring",
+  "outlineOffset": "ring",
+  "divideX": "divide-x",
+  "divideY": "divide-y",
+  "divideColor": "divide",
+  "divideStyle": "divide",
+  "width": "w",
+  "inlineSize": "w",
+  "minWidth": "min-w",
+  "minInlineSize": "min-w",
+  "maxWidth": "max-w",
+  "maxInlineSize": "max-w",
+  "height": "h",
+  "blockSize": "h",
+  "minHeight": "min-h",
+  "minBlockSize": "min-h",
+  "maxHeight": "max-h",
+  "maxBlockSize": "max-b",
+  "color": "text",
+  "fontFamily": "font",
+  "fontSize": "fs",
+  "fontWeight": "font",
+  "fontSmoothing": "smoothing",
+  "fontVariantNumeric": "numeric",
+  "letterSpacing": "tracking",
+  "lineHeight": "leading",
+  "textAlign": "text",
+  "textDecoration": "text-decor",
+  "textDecorationColor": "text-decor",
+  "textEmphasisColor": "text-emphasis",
+  "textDecorationStyle": "decoration",
+  "textDecorationThickness": "decoration",
+  "textUnderlineOffset": "underline-offset",
+  "textTransform": "text",
+  "textIndent": "indent",
+  "textShadow": "text-shadow",
+  "textOverflow": "text",
+  "verticalAlign": "align",
+  "wordBreak": "break",
+  "textWrap": "text",
+  "truncate": "truncate",
+  "lineClamp": "clamp",
+  "listStyleType": "list",
+  "listStylePosition": "list",
+  "listStyleImage": "list-img",
+  "backgroundPosition": "bg",
+  "backgroundPositionX": "bg-x",
+  "backgroundPositionY": "bg-y",
+  "backgroundAttachment": "bg",
+  "backgroundClip": "bg-clip",
+  "background": "bg",
+  "backgroundColor": "bg",
+  "backgroundOrigin": "bg-origin",
+  "backgroundImage": "bg-img",
+  "backgroundRepeat": "bg-repeat",
+  "backgroundBlendMode": "bg-blend",
+  "backgroundSize": "bg",
+  "backgroundGradient": "bg-gradient",
+  "textGradient": "text-gradient",
+  "gradientFrom": "from",
+  "gradientTo": "to",
+  "gradientVia": "via",
+  "borderRadius": "rounded",
+  "borderTopLeftRadius": "rounded-tl",
+  "borderTopRightRadius": "rounded-tr",
+  "borderBottomRightRadius": "rounded-br",
+  "borderBottomLeftRadius": "rounded-bl",
+  "borderTopRadius": "rounded-t",
+  "borderRightRadius": "rounded-r",
+  "borderBottomRadius": "rounded-b",
+  "borderLeftRadius": "rounded-l",
+  "borderStartStartRadius": "rounded-ss",
+  "borderStartEndRadius": "rounded-se",
+  "borderStartRadius": "rounded-s",
+  "borderEndStartRadius": "rounded-es",
+  "borderEndEndRadius": "rounded-ee",
+  "borderEndRadius": "rounded-e",
+  "border": "border",
+  "borderColor": "border",
+  "borderInline": "border-x",
+  "borderInlineWidth": "border-x",
+  "borderInlineColor": "border-x",
+  "borderBlock": "border-y",
+  "borderBlockWidth": "border-y",
+  "borderBlockColor": "border-y",
+  "borderLeft": "border-l",
+  "borderLeftColor": "border-l",
+  "borderInlineStart": "border-s",
+  "borderInlineStartColor": "border-s",
+  "borderRight": "border-r",
+  "borderRightColor": "border-r",
+  "borderInlineEnd": "border-e",
+  "borderInlineEndColor": "border-e",
+  "borderTop": "border-t",
+  "borderTopColor": "border-t",
+  "borderBottom": "border-b",
+  "borderBottomColor": "border-b",
+  "borderBlockEnd": "border-be",
+  "borderBlockEndColor": "border-be",
+  "borderBlockStart": "border-bs",
+  "borderBlockStartColor": "border-bs",
+  "boxShadow": "shadow",
+  "boxShadowColor": "shadow",
+  "mixBlendMode": "mix-blend",
+  "filter": "filter",
+  "brightness": "brightness",
+  "contrast": "contrast",
+  "grayscale": "grayscale",
+  "hueRotate": "hue-rotate",
+  "invert": "invert",
+  "saturate": "saturate",
+  "sepia": "sepia",
+  "dropShadow": "drop-shadow",
+  "blur": "blur",
+  "backdropFilter": "backdrop",
+  "backdropBlur": "backdrop-blur",
+  "backdropBrightness": "backdrop-brightness",
+  "backdropContrast": "backdrop-contrast",
+  "backdropGrayscale": "backdrop-grayscale",
+  "backdropHueRotate": "backdrop-hue-rotate",
+  "backdropInvert": "backdrop-invert",
+  "backdropOpacity": "backdrop-opacity",
+  "backdropSaturate": "backdrop-saturate",
+  "backdropSepia": "backdrop-sepia",
+  "borderCollapse": "border",
+  "borderSpacing": "border-spacing",
+  "borderSpacingX": "border-spacing-x",
+  "borderSpacingY": "border-spacing-y",
+  "tableLayout": "table",
+  "transitionTimingFunction": "ease",
+  "transitionDelay": "delay",
+  "transitionDuration": "duration",
+  "transitionProperty": "transition",
+  "animation": "animation",
+  "animationDelay": "animation-delay",
+  "transformOrigin": "origin",
+  "scale": "scale",
+  "scaleX": "scale-x",
+  "scaleY": "scale-y",
+  "translate": "translate",
+  "translateX": "translate-x",
+  "translateY": "translate-y",
+  "accentColor": "accent",
+  "caretColor": "caret",
+  "scrollBehavior": "scroll",
+  "scrollbar": "scrollbar",
+  "scrollMargin": "scroll-m",
+  "scrollMarginX": "scroll-mx",
+  "scrollMarginY": "scroll-my",
+  "scrollMarginLeft": "scroll-ml",
+  "scrollMarginRight": "scroll-mr",
+  "scrollMarginTop": "scroll-mt",
+  "scrollMarginBottom": "scroll-mb",
+  "scrollMarginBlock": "scroll-my",
+  "scrollMarginBlockEnd": "scroll-mb",
+  "scrollMarginBlockStart": "scroll-mt",
+  "scrollMarginInline": "scroll-mx",
+  "scrollMarginInlineEnd": "scroll-me",
+  "scrollMarginInlineStart": "scroll-ms",
+  "scrollPadding": "scroll-p",
+  "scrollPaddingBlock": "scroll-pb",
+  "scrollPaddingBlockStart": "scroll-pt",
+  "scrollPaddingBlockEnd": "scroll-pb",
+  "scrollPaddingInline": "scroll-px",
+  "scrollPaddingInlineEnd": "scroll-pe",
+  "scrollPaddingInlineStart": "scroll-ps",
+  "scrollPaddingX": "scroll-px",
+  "scrollPaddingY": "scroll-py",
+  "scrollPaddingLeft": "scroll-pl",
+  "scrollPaddingRight": "scroll-pr",
+  "scrollPaddingTop": "scroll-pt",
+  "scrollPaddingBottom": "scroll-pb",
+  "scrollSnapAlign": "snap",
+  "scrollSnapStop": "snap",
+  "scrollSnapType": "snap",
+  "scrollSnapStrictness": "strictness",
+  "scrollSnapMargin": "snap-m",
+  "scrollSnapMarginTop": "snap-mt",
+  "scrollSnapMarginBottom": "snap-mb",
+  "scrollSnapMarginLeft": "snap-ml",
+  "scrollSnapMarginRight": "snap-mr",
+  "touchAction": "touch",
+  "userSelect": "select",
+  "fill": "fill",
+  "stroke": "stroke",
+  "srOnly": "sr",
+  "debug": "debug",
+  "textStyle": "textStyle"
+}
+
+const shorthands = {
+  "pos": "position",
+  "insetEnd": "insetInlineEnd",
+  "end": "insetInlineEnd",
+  "insetStart": "insetInlineStart",
+  "start": "insetInlineStart",
+  "flexDir": "flexDirection",
+  "p": "padding",
+  "pl": "paddingLeft",
+  "pr": "paddingRight",
+  "pt": "paddingTop",
+  "pb": "paddingBottom",
+  "py": "paddingBlock",
+  "paddingY": "paddingBlock",
+  "paddingX": "paddingInline",
+  "px": "paddingInline",
+  "pe": "paddingInlineEnd",
+  "paddingEnd": "paddingInlineEnd",
+  "ps": "paddingInlineStart",
+  "paddingStart": "paddingInlineStart",
+  "ml": "marginLeft",
+  "mr": "marginRight",
+  "mt": "marginTop",
+  "mb": "marginBottom",
+  "m": "margin",
+  "my": "marginBlock",
+  "marginY": "marginBlock",
+  "mx": "marginInline",
+  "marginX": "marginInline",
+  "me": "marginInlineEnd",
+  "marginEnd": "marginInlineEnd",
+  "ms": "marginInlineStart",
+  "marginStart": "marginInlineStart",
+  "ringWidth": "outlineWidth",
+  "ringColor": "outlineColor",
+  "ring": "outline",
+  "ringOffset": "outlineOffset",
+  "w": "width",
+  "minW": "minWidth",
+  "maxW": "maxWidth",
+  "h": "height",
+  "minH": "minHeight",
+  "maxH": "maxHeight",
+  "bgPosition": "backgroundPosition",
+  "bgPositionX": "backgroundPositionX",
+  "bgPositionY": "backgroundPositionY",
+  "bgAttachment": "backgroundAttachment",
+  "bgClip": "backgroundClip",
+  "bg": "background",
+  "bgColor": "backgroundColor",
+  "bgOrigin": "backgroundOrigin",
+  "bgImage": "backgroundImage",
+  "bgRepeat": "backgroundRepeat",
+  "bgBlendMode": "backgroundBlendMode",
+  "bgSize": "backgroundSize",
+  "bgGradient": "backgroundGradient",
+  "rounded": "borderRadius",
+  "roundedTopLeft": "borderTopLeftRadius",
+  "roundedTopRight": "borderTopRightRadius",
+  "roundedBottomRight": "borderBottomRightRadius",
+  "roundedBottomLeft": "borderBottomLeftRadius",
+  "roundedTop": "borderTopRadius",
+  "roundedRight": "borderRightRadius",
+  "roundedBottom": "borderBottomRadius",
+  "roundedLeft": "borderLeftRadius",
+  "roundedStartStart": "borderStartStartRadius",
+  "roundedStartEnd": "borderStartEndRadius",
+  "roundedStart": "borderStartRadius",
+  "roundedEndStart": "borderEndStartRadius",
+  "roundedEndEnd": "borderEndEndRadius",
+  "roundedEnd": "borderEndRadius",
+  "borderX": "borderInline",
+  "borderXWidth": "borderInlineWidth",
+  "borderXColor": "borderInlineColor",
+  "borderY": "borderBlock",
+  "borderYWidth": "borderBlockWidth",
+  "borderYColor": "borderBlockColor",
+  "borderStart": "borderInlineStart",
+  "borderStartColor": "borderInlineStartColor",
+  "borderEnd": "borderInlineEnd",
+  "borderEndColor": "borderInlineEndColor",
+  "shadow": "boxShadow",
+  "shadowColor": "boxShadowColor",
+  "x": "translateX",
+  "y": "translateY"
+}
+
+const breakpointKeys = ["base","sm","md","lg","xl","2xl"]
+
+const hasShorthand = true
+
+const resolveShorthand = (prop) => shorthands[prop] || prop
+
+function transform(prop, value) {
+  const key = resolveShorthand(prop)
+  const propKey = classNameMap[key] || hypenateProperty(key)
+  const className = `${propKey}_${withoutSpace(value)}`
+  return { className }
+}
+
+const context = {
+  hash: false,
+  conditions: {
+    shift: sortConditions,
+    finalize: finalizeConditions,
+    breakpoints: { keys: breakpointKeys }
+  },
+  utility: {
+    prefix: undefined,
+    transform,
+    hasShorthand,
+    resolveShorthand,
+  }
+}
+
+export const css = createCss(context)
+
+export const { mergeCss, assignCss } = createMergeCss(context)

styled-system/css/cva.d.ts

@@ -0,0 +1,5 @@
+import type { RecipeCreatorFn } from '../types/recipe'
+
+export declare const cva: RecipeCreatorFn
+
+export type { RecipeVariantProps } from '../types/recipe'

styled-system/css/cva.mjs

@@ -0,0 +1,63 @@
+import { compact, splitProps } from '../helpers.mjs';
+import { css, mergeCss } from './css.mjs';
+
+export function cva(config) {
+  const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
+
+  function resolve(props) {
+    const computedVariants = { ...defaultVariants, ...compact(props) }
+    let variantCss = { ...base }
+    for (const [key, value] of Object.entries(computedVariants)) {
+      if (variants[key]?.[value]) {
+        variantCss = mergeCss(variantCss, variants[key][value])
+      }
+    }
+    const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
+    return mergeCss(variantCss, compoundVariantCss)
+  }
+
+  function cvaFn(props) {
+    return css(resolve(props))
+  }
+  
+  const variantKeys = Object.keys(variants)
+
+  function splitVariantProps(props) {
+    return splitProps(props, variantKeys)
+  }
+
+  const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
+
+  return Object.assign(cvaFn, {
+    __cva__: true,
+    variants: variantMap,
+    variantKeys,
+    resolve,
+    config,
+    splitVariantProps,
+  })
+}
+
+export function getCompoundVariantCss(compoundVariants, variantMap) {
+  let result = {}
+  compoundVariants.forEach((compoundVariant) => {
+    const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
+      if (key === 'css') return true
+
+      const values = Array.isArray(value) ? value : [value]
+      return values.some((value) => variantMap[key] === value)
+    })
+
+    if (isMatching) {
+      result = mergeCss(result, compoundVariant.css)
+    }
+  })
+
+  return result
+}
+
+export function assertCompoundVariant(name, compoundVariants, variants, prop) {
+  if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
+    throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)
+  }
+}    

styled-system/css/cx.d.ts

@@ -0,0 +1,4 @@
+type Argument = string | boolean | null | undefined
+
+/** Conditionally join classNames into a single string */
+export declare function cx(...args: Argument[]): string

styled-system/css/cx.mjs

@@ -0,0 +1,15 @@
+function cx() {
+  let str = '',
+    i = 0,
+    arg
+
+  for (; i < arguments.length; ) {
+    if ((arg = arguments[i++]) && typeof arg === 'string') {
+      str && (str += ' ')
+      str += arg
+    }
+  }
+  return str
+}
+
+export { cx }

styled-system/css/index.d.ts

@@ -0,0 +1,3 @@
+export * from './css'
+export * from './cx'
+export * from './cva'

styled-system/css/index.mjs

@@ -0,0 +1,3 @@
+export * from './css.mjs';
+export * from './cx.mjs';
+export * from './cva.mjs';

styled-system/global.css

@@ -0,0 +1,36 @@
+@layer base {
+  :root {
+    --made-with-panda: '🐼'
+    }
+
+  *, *::before, *::after, ::backdrop {
+    --blur:   ;
+    --brightness:   ;
+    --contrast:   ;
+    --grayscale:   ;
+    --hue-rotate:   ;
+    --invert:   ;
+    --saturate:   ;
+    --sepia:   ;
+    --drop-shadow:   ;
+    --backdrop-blur:   ;
+    --backdrop-brightness:   ;
+    --backdrop-contrast:   ;
+    --backdrop-grayscale:   ;
+    --backdrop-hue-rotate:   ;
+    --backdrop-invert:   ;
+    --backdrop-opacity:   ;
+    --backdrop-saturate:   ;
+    --backdrop-sepia:   ;
+    --scroll-snap-strictness: proximity;
+    --border-spacing-x: 0;
+    --border-spacing-y: 0;
+    --translate-x: 0;
+    --translate-y: 0;
+    --rotate: 0;
+    --skew-x: 0;
+    --skew-y: 0;
+    --scale-x: 1;
+    --scale-y: 1
+    }
+}

styled-system/helpers.mjs

@@ -0,0 +1,259 @@
+// src/assert.ts
+function isObject(value) {
+  return typeof value === "object" && value != null && !Array.isArray(value);
+}
+
+// src/compact.ts
+function compact(value) {
+  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));
+}
+
+// src/condition.ts
+var isBaseCondition = (v) => v === "base";
+function filterBaseConditions(c) {
+  return c.slice().filter((v) => !isBaseCondition(v));
+}
+
+// src/css-important.ts
+var importantRegex = /!(important)?$/;
+function isImportant(value) {
+  return typeof value === "string" ? importantRegex.test(value) : false;
+}
+function withoutImportant(value) {
+  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
+}
+function withoutSpace(str) {
+  return typeof str === "string" ? str.replaceAll(" ", "_") : str;
+}
+
+// src/hash.ts
+function toChar(code) {
+  return String.fromCharCode(code + (code > 25 ? 39 : 97));
+}
+function toName(code) {
+  let name = "";
+  let x;
+  for (x = Math.abs(code); x > 52; x = x / 52 | 0)
+    name = toChar(x % 52) + name;
+  return toChar(x % 52) + name;
+}
+function toPhash(h, x) {
+  let i = x.length;
+  while (i)
+    h = h * 33 ^ x.charCodeAt(--i);
+  return h;
+}
+function toHash(value) {
+  return toName(toPhash(5381, value) >>> 0);
+}
+
+// src/merge-props.ts
+function mergeProps(...sources) {
+  const result = {};
+  for (const source of sources) {
+    for (const [key, value] of Object.entries(source)) {
+      if (isObject(value)) {
+        result[key] = mergeProps(result[key] || {}, value);
+      } else {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}
+
+// src/walk-object.ts
+function walkObject(target, predicate, options = {}) {
+  const { stop, getKey } = options;
+  function inner(value, path = []) {
+    if (isObject(value) || Array.isArray(value)) {
+      const result = {};
+      for (const [prop, child] of Object.entries(value)) {
+        const key = getKey?.(prop) ?? prop;
+        const childPath = [...path, key];
+        if (stop?.(value, childPath)) {
+          return predicate(value, path);
+        }
+        result[key] = inner(child, childPath);
+      }
+      return result;
+    }
+    return predicate(value, path);
+  }
+  return inner(target);
+}
+function mapObject(obj, fn) {
+  if (!isObject(obj))
+    return fn(obj);
+  return walkObject(obj, (value) => fn(value));
+}
+
+// src/normalize-style-object.ts
+function toResponsiveObject(values, breakpoints) {
+  return values.reduce((acc, current, index) => {
+    const key = breakpoints[index];
+    if (current != null) {
+      acc[key] = current;
+    }
+    return acc;
+  }, {});
+}
+function normalizeShorthand(styles, context) {
+  const { hasShorthand, resolveShorthand } = context.utility;
+  return walkObject(styles, (v) => v, {
+    getKey: (prop) => {
+      return hasShorthand ? resolveShorthand(prop) : prop;
+    }
+  });
+}
+function normalizeStyleObject(styles, context) {
+  const { utility, conditions } = context;
+  const { hasShorthand, resolveShorthand } = utility;
+  return walkObject(
+    styles,
+    (value) => {
+      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;
+    },
+    {
+      stop: (value) => Array.isArray(value),
+      getKey: (prop) => {
+        return hasShorthand ? resolveShorthand(prop) : prop;
+      }
+    }
+  );
+}
+
+// src/classname.ts
+var fallbackCondition = {
+  shift: (v) => v,
+  finalize: (v) => v,
+  breakpoints: { keys: [] }
+};
+var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value;
+function createCss(context) {
+  const { utility, hash, conditions: conds = fallbackCondition } = context;
+  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");
+  const hashFn = (conditions, className) => {
+    let result;
+    if (hash) {
+      const baseArray = [...conds.finalize(conditions), className];
+      result = formatClassName(toHash(baseArray.join(":")));
+    } else {
+      const baseArray = [...conds.finalize(conditions), formatClassName(className)];
+      result = baseArray.join(":");
+    }
+    return result;
+  };
+  return (styleObject = {}) => {
+    const normalizedObject = normalizeStyleObject(styleObject, context);
+    const classNames = /* @__PURE__ */ new Set();
+    walkObject(normalizedObject, (value, paths) => {
+      const important = isImportant(value);
+      if (value == null)
+        return;
+      const [prop, ...allConditions] = conds.shift(paths);
+      const conditions = filterBaseConditions(allConditions);
+      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));
+      let className = hashFn(conditions, transformed.className);
+      if (important)
+        className = `${className}!`;
+      classNames.add(className);
+    });
+    return Array.from(classNames).join(" ");
+  };
+}
+function compactStyles(...styles) {
+  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
+}
+function createMergeCss(context) {
+  function resolve(styles) {
+    const allStyles = compactStyles(...styles);
+    if (allStyles.length === 1)
+      return allStyles;
+    return allStyles.map((style) => normalizeShorthand(style, context));
+  }
+  function mergeCss(...styles) {
+    return mergeProps(...resolve(styles));
+  }
+  function assignCss(...styles) {
+    return Object.assign({}, ...resolve(styles));
+  }
+  return { mergeCss, assignCss };
+}
+
+// src/normalize-html.ts
+var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];
+function convert(key) {
+  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;
+}
+function normalizeHTMLProps(props) {
+  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
+}
+normalizeHTMLProps.keys = htmlProps;
+
+// src/split-props.ts
+function splitProps(props, ...keys) {
+  const descriptors = Object.getOwnPropertyDescriptors(props);
+  const dKeys = Object.keys(descriptors);
+  const split = (k) => {
+    const clone = {};
+    for (let i = 0; i < k.length; i++) {
+      const key = k[i];
+      if (descriptors[key]) {
+        Object.defineProperty(clone, key, descriptors[key]);
+        delete descriptors[key];
+      }
+    }
+    return clone;
+  };
+  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));
+  return keys.map(fn).concat(split(dKeys));
+}
+
+// src/memo.ts
+var memo = (fn) => {
+  const cache = /* @__PURE__ */ new Map();
+  const get = (...args) => {
+    const key = JSON.stringify(args);
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    const result = fn(...args);
+    cache.set(key, result);
+    return result;
+  };
+  return get;
+};
+
+// src/hypenate.ts
+var dashCaseRegex = /[A-Z]/g;
+var hypenateProperty = memo((property) => {
+  if (property.startsWith("--"))
+    return property;
+  return property.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`);
+});
+export {
+  compact,
+  createCss,
+  createMergeCss,
+  filterBaseConditions,
+  hypenateProperty,
+  isBaseCondition,
+  isObject,
+  mapObject,
+  mergeProps,
+  normalizeHTMLProps,
+  splitProps,
+  toHash,
+  walkObject,
+  withoutSpace
+};
+
+
+export function __spreadValues(a, b){
+  return { ...a, ...b }
+}
+
+export function __objRest(source, exclude){
+  return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
+}

styled-system/patterns/aspect-ratio.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type AspectRatioProperties = {
+   ratio?: ConditionalValue<number>
+}
+
+
+type AspectRatioOptions = AspectRatioProperties & Omit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'>
+
+
+export declare function aspectRatio(options?: AspectRatioOptions): string

styled-system/patterns/aspect-ratio.mjs

@@ -0,0 +1,24 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const aspectRatioConfig = {
+transform(props) {
+  const { ratio, ...rest } = props;
+  return {
+    aspectRatio: ratio,
+    overflow: "hidden",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    "&>img, &>video": {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    },
+    ...rest
+  };
+}}
+
+export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject })
+
+export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))

styled-system/patterns/box.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type BoxProperties = {
+   
+}
+
+
+type BoxOptions = BoxProperties & Omit<SystemStyleObject, keyof BoxProperties >
+
+
+export declare function box(options?: BoxOptions): string

styled-system/patterns/box.mjs

@@ -0,0 +1,11 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const boxConfig = {
+transform(props) {
+  return props;
+}}
+
+export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject })
+
+export const box = (styles) => css(getBoxStyle(styles))

styled-system/patterns/center.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type CenterProperties = {
+   inline?: ConditionalValue<boolean>
+}
+
+
+type CenterOptions = CenterProperties & Omit<SystemStyleObject, keyof CenterProperties >
+
+
+export declare function center(options?: CenterOptions): string

styled-system/patterns/center.mjs

@@ -0,0 +1,17 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const centerConfig = {
+transform(props) {
+  const { inline, ...rest } = props;
+  return {
+    display: inline ? "inline-flex" : "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...rest
+  };
+}}
+
+export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject })
+
+export const center = (styles) => css(getCenterStyle(styles))

styled-system/patterns/circle.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type CircleProperties = {
+   size?: PropertyValue<'width'>
+}
+
+
+type CircleOptions = CircleProperties & Omit<SystemStyleObject, keyof CircleProperties >
+
+
+export declare function circle(options?: CircleOptions): string

styled-system/patterns/circle.mjs

@@ -0,0 +1,21 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const circleConfig = {
+transform(props) {
+  const { size, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: "0 0 auto",
+    width: size,
+    height: size,
+    borderRadius: "9999px",
+    ...rest
+  };
+}}
+
+export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject })
+
+export const circle = (styles) => css(getCircleStyle(styles))

styled-system/patterns/container.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type ContainerProperties = {
+   
+}
+
+
+type ContainerOptions = ContainerProperties & Omit<SystemStyleObject, keyof ContainerProperties >
+
+
+export declare function container(options?: ContainerOptions): string

styled-system/patterns/container.mjs

@@ -0,0 +1,17 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const containerConfig = {
+transform(props) {
+  return {
+    position: "relative",
+    maxWidth: "8xl",
+    mx: "auto",
+    px: { base: "4", md: "6", lg: "8" },
+    ...props
+  };
+}}
+
+export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject })
+
+export const container = (styles) => css(getContainerStyle(styles))

styled-system/patterns/divider.d.ts

@@ -0,0 +1,16 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type DividerProperties = {
+   orientation?: ConditionalValue<"horizontal" | "vertical">
+	thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>
+	color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
+}
+
+
+type DividerOptions = DividerProperties & Omit<SystemStyleObject, keyof DividerProperties >
+
+
+export declare function divider(options?: DividerOptions): string

styled-system/patterns/divider.mjs

@@ -0,0 +1,20 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const dividerConfig = {
+transform(props, { map }) {
+  const { orientation = "horizontal", thickness = "1px", color, ...rest } = props;
+  return {
+    "--thickness": thickness,
+    width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
+    height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
+    borderInlineStartWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+    borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
+    borderColor: color,
+    ...rest
+  };
+}}
+
+export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject })
+
+export const divider = (styles) => css(getDividerStyle(styles))

styled-system/patterns/flex.d.ts

@@ -0,0 +1,20 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type FlexProperties = {
+   align?: PropertyValue<'alignItems'>
+	justify?: PropertyValue<'justifyContent'>
+	direction?: PropertyValue<'flexDirection'>
+	wrap?: PropertyValue<'flexWrap'>
+	basis?: PropertyValue<'flexBasis'>
+	grow?: PropertyValue<'flexGrow'>
+	shrink?: PropertyValue<'flexShrink'>
+}
+
+
+type FlexOptions = FlexProperties & Omit<SystemStyleObject, keyof FlexProperties >
+
+
+export declare function flex(options?: FlexOptions): string

styled-system/patterns/flex.mjs

@@ -0,0 +1,22 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const flexConfig = {
+transform(props) {
+  const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    flexWrap: wrap2,
+    flexBasis: basis,
+    flexGrow: grow,
+    flexShrink: shrink,
+    ...rest
+  };
+}}
+
+export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject })
+
+export const flex = (styles) => css(getFlexStyle(styles))

styled-system/patterns/float.d.ts

@@ -0,0 +1,17 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type FloatProperties = {
+   offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
+	offsetY?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
+	offset?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
+	placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start">
+}
+
+
+type FloatOptions = FloatProperties & Omit<SystemStyleObject, keyof FloatProperties >
+
+
+export declare function float(options?: FloatOptions): string

styled-system/patterns/float.mjs

@@ -0,0 +1,44 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const floatConfig = {
+transform(props, { map }) {
+  const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props;
+  return {
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    insetBlockStart: map(placement, (v) => {
+      const [side] = v.split("-");
+      const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
+      return map2[side];
+    }),
+    insetBlockEnd: map(placement, (v) => {
+      const [side] = v.split("-");
+      const map2 = { top: "auto", middle: "50%", bottom: offsetY };
+      return map2[side];
+    }),
+    insetInlineStart: map(placement, (v) => {
+      const [, align] = v.split("-");
+      const map2 = { start: offsetX, center: "50%", end: "auto" };
+      return map2[align];
+    }),
+    insetInlineEnd: map(placement, (v) => {
+      const [, align] = v.split("-");
+      const map2 = { start: "auto", center: "50%", end: offsetX };
+      return map2[align];
+    }),
+    translate: map(placement, (v) => {
+      const [side, align] = v.split("-");
+      const mapX = { start: "-50%", center: "-50%", end: "50%" };
+      const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
+      return `${mapX[align]} ${mapY[side]}`;
+    }),
+    ...rest
+  };
+}}
+
+export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject })
+
+export const float = (styles) => css(getFloatStyle(styles))

styled-system/patterns/grid-item.d.ts

@@ -0,0 +1,19 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type GridItemProperties = {
+   colSpan?: ConditionalValue<number>
+	rowSpan?: ConditionalValue<number>
+	colStart?: ConditionalValue<number>
+	rowStart?: ConditionalValue<number>
+	colEnd?: ConditionalValue<number>
+	rowEnd?: ConditionalValue<number>
+}
+
+
+type GridItemOptions = GridItemProperties & Omit<SystemStyleObject, keyof GridItemProperties >
+
+
+export declare function gridItem(options?: GridItemOptions): string

styled-system/patterns/grid-item.mjs

@@ -0,0 +1,19 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const gridItemConfig = {
+transform(props, { map }) {
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
+  const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+  return {
+    gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+    gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+    gridColumnEnd: colEnd,
+    gridRowEnd: rowEnd,
+    ...rest
+  };
+}}
+
+export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject })
+
+export const gridItem = (styles) => css(getGridItemStyle(styles))

styled-system/patterns/grid.d.ts

@@ -0,0 +1,18 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type GridProperties = {
+   gap?: PropertyValue<'gap'>
+	columnGap?: PropertyValue<'gap'>
+	rowGap?: PropertyValue<'gap'>
+	columns?: ConditionalValue<number>
+	minChildWidth?: ConditionalValue<Tokens["sizes"] | Properties["width"]>
+}
+
+
+type GridOptions = GridProperties & Omit<SystemStyleObject, keyof GridProperties >
+
+
+export declare function grid(options?: GridOptions): string

styled-system/patterns/grid.mjs

@@ -0,0 +1,19 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const gridConfig = {
+transform(props, { map }) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
+  return {
+    display: "grid",
+    gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`) : void 0,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+}}
+
+export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject })
+
+export const grid = (styles) => css(getGridStyle(styles))

styled-system/patterns/hstack.d.ts

@@ -0,0 +1,15 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type HstackProperties = {
+   justify?: PropertyValue<'justifyContent'>
+	gap?: PropertyValue<'gap'>
+}
+
+
+type HstackOptions = HstackProperties & Omit<SystemStyleObject, keyof HstackProperties >
+
+
+export declare function hstack(options?: HstackOptions): string

styled-system/patterns/hstack.mjs

@@ -0,0 +1,19 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const hstackConfig = {
+transform(props) {
+  const { justify, gap = "10px", ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "row",
+    ...rest
+  };
+}}
+
+export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject })
+
+export const hstack = (styles) => css(getHstackStyle(styles))

styled-system/patterns/index.d.ts

@@ -0,0 +1,18 @@
+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'

styled-system/patterns/index.mjs

@@ -0,0 +1,18 @@
+export * from './box.mjs';
+export * from './flex.mjs';
+export * from './stack.mjs';
+export * from './vstack.mjs';
+export * from './hstack.mjs';
+export * from './spacer.mjs';
+export * from './square.mjs';
+export * from './circle.mjs';
+export * from './center.mjs';
+export * from './link-box.mjs';
+export * from './link-overlay.mjs';
+export * from './aspect-ratio.mjs';
+export * from './grid.mjs';
+export * from './grid-item.mjs';
+export * from './wrap.mjs';
+export * from './container.mjs';
+export * from './divider.mjs';
+export * from './float.mjs';

styled-system/patterns/link-box.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type LinkBoxProperties = {
+   
+}
+
+
+type LinkBoxOptions = LinkBoxProperties & Omit<SystemStyleObject, keyof LinkBoxProperties >
+
+
+export declare function linkBox(options?: LinkBoxOptions): string

styled-system/patterns/link-box.mjs

@@ -0,0 +1,18 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const linkBoxConfig = {
+transform(props) {
+  return {
+    position: "relative",
+    "& :where(a, abbr)": {
+      position: "relative",
+      zIndex: "1"
+    },
+    ...props
+  };
+}}
+
+export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject })
+
+export const linkBox = (styles) => css(getLinkBoxStyle(styles))

styled-system/patterns/link-overlay.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type LinkOverlayProperties = {
+   
+}
+
+
+type LinkOverlayOptions = LinkOverlayProperties & Omit<SystemStyleObject, keyof LinkOverlayProperties >
+
+
+export declare function linkOverlay(options?: LinkOverlayOptions): string

styled-system/patterns/link-overlay.mjs

@@ -0,0 +1,23 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const linkOverlayConfig = {
+transform(props) {
+  return {
+    position: "static",
+    _before: {
+      content: '""',
+      display: "block",
+      position: "absolute",
+      cursor: "inherit",
+      inset: "0",
+      zIndex: "0",
+      ...props["_before"]
+    },
+    ...props
+  };
+}}
+
+export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject })
+
+export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))

styled-system/patterns/spacer.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type SpacerProperties = {
+   size?: ConditionalValue<Tokens["spacing"]>
+}
+
+
+type SpacerOptions = SpacerProperties & Omit<SystemStyleObject, keyof SpacerProperties >
+
+
+export declare function spacer(options?: SpacerOptions): string

styled-system/patterns/spacer.mjs

@@ -0,0 +1,17 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const spacerConfig = {
+transform(props, { map }) {
+  const { size, ...rest } = props;
+  return {
+    alignSelf: "stretch",
+    justifySelf: "stretch",
+    flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
+    ...rest
+  };
+}}
+
+export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject })
+
+export const spacer = (styles) => css(getSpacerStyle(styles))

styled-system/patterns/square.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type SquareProperties = {
+   size?: PropertyValue<'width'>
+}
+
+
+type SquareOptions = SquareProperties & Omit<SystemStyleObject, keyof SquareProperties >
+
+
+export declare function square(options?: SquareOptions): string

styled-system/patterns/square.mjs

@@ -0,0 +1,20 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const squareConfig = {
+transform(props) {
+  const { size, ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: "0 0 auto",
+    width: size,
+    height: size,
+    ...rest
+  };
+}}
+
+export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject })
+
+export const square = (styles) => css(getSquareStyle(styles))

styled-system/patterns/stack.d.ts

@@ -0,0 +1,17 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type StackProperties = {
+   align?: PropertyValue<'alignItems'>
+	justify?: PropertyValue<'justifyContent'>
+	direction?: PropertyValue<'flexDirection'>
+	gap?: PropertyValue<'gap'>
+}
+
+
+type StackOptions = StackProperties & Omit<SystemStyleObject, keyof StackProperties >
+
+
+export declare function stack(options?: StackOptions): string

styled-system/patterns/stack.mjs

@@ -0,0 +1,19 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const stackConfig = {
+transform(props) {
+  const { align, justify, direction = "column", gap = "10px", ...rest } = props;
+  return {
+    display: "flex",
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    ...rest
+  };
+}}
+
+export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })
+
+export const stack = (styles) => css(getStackStyle(styles))

styled-system/patterns/vstack.d.ts

@@ -0,0 +1,15 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type VstackProperties = {
+   justify?: PropertyValue<'justifyContent'>
+	gap?: PropertyValue<'gap'>
+}
+
+
+type VstackOptions = VstackProperties & Omit<SystemStyleObject, keyof VstackProperties >
+
+
+export declare function vstack(options?: VstackOptions): string

styled-system/patterns/vstack.mjs

@@ -0,0 +1,19 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const vstackConfig = {
+transform(props) {
+  const { justify, gap = "10px", ...rest } = props;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap,
+    flexDirection: "column",
+    ...rest
+  };
+}}
+
+export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject })
+
+export const vstack = (styles) => css(getVstackStyle(styles))

styled-system/patterns/wrap.d.ts

@@ -0,0 +1,18 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type WrapProperties = {
+   gap?: PropertyValue<'gap'>
+	rowGap?: PropertyValue<'gap'>
+	columnGap?: PropertyValue<'gap'>
+	align?: PropertyValue<'alignItems'>
+	justify?: PropertyValue<'justifyContent'>
+}
+
+
+type WrapOptions = WrapProperties & Omit<SystemStyleObject, keyof WrapProperties >
+
+
+export declare function wrap(options?: WrapOptions): string

styled-system/patterns/wrap.mjs

@@ -0,0 +1,21 @@
+import { mapObject } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const wrapConfig = {
+transform(props) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+}}
+
+export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject })
+
+export const wrap = (styles) => css(getWrapStyle(styles))

styled-system/reset.css

@@ -0,0 +1,193 @@
+
+    @layer reset {
+      * {
+        margin: 0;
+        padding: 0;
+        font: inherit;
+      }
+
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        border-color: var(--global-color-border, currentColor);
+      }
+
+      html {
+        line-height: 1.5;
+        --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          '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-tab-size: 4;
+        tab-size: 4;
+        font-family: var(--global-font-body, var(--font-fallback));
+      }
+
+      hr {
+        height: 0;
+        color: inherit;
+        border-top-width: 1px;
+      }
+
+      body {
+        height: 100%;
+        line-height: inherit;
+      }
+
+      img {
+        border-style: none;
+      }
+
+      img,
+      svg,
+      video,
+      canvas,
+      audio,
+      iframe,
+      embed,
+      object {
+        display: block;
+        vertical-align: middle;
+      }
+
+      img,
+      video {
+        max-width: 100%;
+        height: auto;
+      }
+
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        overflow-wrap: break-word;
+      }
+
+      ol,
+      ul {
+        list-style: none;
+      }
+
+      code,
+      kbd,
+      pre,
+      samp {
+        font-size: 1em;
+      }
+
+      button,
+      [type='button'],
+      [type='reset'],
+      [type='submit'] {
+        -webkit-appearance: button;
+        background-color: transparent;
+        background-image: none;
+      }
+
+      button,
+      select {
+        text-transform: none;
+      }
+
+      table {
+        text-indent: 0;
+        border-color: inherit;
+        border-collapse: collapse;
+      }
+
+      input::placeholder,
+      textarea::placeholder {
+        opacity: 1;
+        color: var(--global-color-placeholder, #9ca3af);
+      }
+
+      textarea {
+        resize: vertical;
+      }
+
+      summary {
+        display: list-item;
+      }
+
+      small {
+        font-size: 80%;
+      }
+
+      sub,
+      sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+      }
+
+      sub {
+        bottom: -0.25em;
+      }
+
+      sup {
+        top: -0.5em;
+      }
+
+      dialog {
+        padding: 0;
+      }
+
+      a {
+        color: inherit;
+        text-decoration: inherit;
+      }
+
+      abbr:where([title]) {
+        text-decoration: underline dotted;
+      }
+
+      b,
+      strong {
+        font-weight: bolder;
+      }
+
+      code,
+      kbd,
+      samp,
+      pre {
+        font-size: 1em;
+        --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
+        font-family: var(--global-font-mono, var(--font-fallback));
+      }
+
+      [type='search'] {
+        -webkit-appearance: textfield;
+        outline-offset: -2px;
+      }
+
+      ::-webkit-search-decoration {
+        -webkit-appearance: none;
+      }
+
+      ::-webkit-file-upload-button {
+        -webkit-appearance: button;
+      }
+
+      ::-webkit-inner-spin-button,
+      ::-webkit-outer-spin-button {
+        height: auto;
+      }
+
+      :-moz-ui-invalid {
+        box-shadow: none;
+      }
+
+      :-moz-focusring {
+        outline: auto;
+      }
+    }
+  

styled-system/tokens/index.css

@@ -0,0 +1,350 @@
+@layer tokens {
+    :where(:root, :host) {
+  --easings-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --easings-linear: linear;
+  --easings-in: cubic-bezier(0.4, 0, 1, 1);
+  --easings-out: cubic-bezier(0, 0, 0.2, 1);
+  --easings-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --durations-fastest: 50ms;
+  --durations-faster: 100ms;
+  --durations-fast: 150ms;
+  --durations-normal: 200ms;
+  --durations-slow: 300ms;
+  --durations-slower: 400ms;
+  --durations-slowest: 500ms;
+  --radii-xs: 0.125rem;
+  --radii-sm: 0.25rem;
+  --radii-md: 0.375rem;
+  --radii-lg: 0.5rem;
+  --radii-xl: 0.75rem;
+  --radii-2xl: 1rem;
+  --radii-3xl: 1.5rem;
+  --radii-full: 9999px;
+  --font-weights-thin: 100;
+  --font-weights-extralight: 200;
+  --font-weights-light: 300;
+  --font-weights-normal: 400;
+  --font-weights-medium: 500;
+  --font-weights-semibold: 600;
+  --font-weights-bold: 700;
+  --font-weights-extrabold: 800;
+  --font-weights-black: 900;
+  --line-heights-none: 1;
+  --line-heights-tight: 1.25;
+  --line-heights-snug: 1.375;
+  --line-heights-normal: 1.5;
+  --line-heights-relaxed: 1.625;
+  --line-heights-loose: 2;
+  --letter-spacings-tighter: -0.05em;
+  --letter-spacings-tight: -0.025em;
+  --letter-spacings-normal: 0em;
+  --letter-spacings-wide: 0.025em;
+  --letter-spacings-wider: 0.05em;
+  --letter-spacings-widest: 0.1em;
+  --font-sizes-2xs: 0.5rem;
+  --font-sizes-xs: 0.75rem;
+  --font-sizes-sm: 0.875rem;
+  --font-sizes-md: 1rem;
+  --font-sizes-lg: 1.125rem;
+  --font-sizes-xl: 1.25rem;
+  --font-sizes-2xl: 1.5rem;
+  --font-sizes-3xl: 1.875rem;
+  --font-sizes-4xl: 2.25rem;
+  --font-sizes-5xl: 3rem;
+  --font-sizes-6xl: 3.75rem;
+  --font-sizes-7xl: 4.5rem;
+  --font-sizes-8xl: 6rem;
+  --font-sizes-9xl: 8rem;
+  --shadows-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadows-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadows-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadows-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadows-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadows-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadows-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --colors-current: currentColor;
+  --colors-black: #000;
+  --colors-white: #fff;
+  --colors-transparent: rgb(0 0 0 / 0);
+  --colors-rose-50: #fff1f2;
+  --colors-rose-100: #ffe4e6;
+  --colors-rose-200: #fecdd3;
+  --colors-rose-300: #fda4af;
+  --colors-rose-400: #fb7185;
+  --colors-rose-500: #f43f5e;
+  --colors-rose-600: #e11d48;
+  --colors-rose-700: #be123c;
+  --colors-rose-800: #9f1239;
+  --colors-rose-900: #881337;
+  --colors-pink-50: #fdf2f8;
+  --colors-pink-100: #fce7f3;
+  --colors-pink-200: #fbcfe8;
+  --colors-pink-300: #f9a8d4;
+  --colors-pink-400: #f472b6;
+  --colors-pink-500: #ec4899;
+  --colors-pink-600: #db2777;
+  --colors-pink-700: #be185d;
+  --colors-pink-800: #9d174d;
+  --colors-pink-900: #831843;
+  --colors-fuchsia-50: #fdf4ff;
+  --colors-fuchsia-100: #fae8ff;
+  --colors-fuchsia-200: #f5d0fe;
+  --colors-fuchsia-300: #f0abfc;
+  --colors-fuchsia-400: #e879f9;
+  --colors-fuchsia-500: #d946ef;
+  --colors-fuchsia-600: #c026d3;
+  --colors-fuchsia-700: #a21caf;
+  --colors-fuchsia-800: #86198f;
+  --colors-fuchsia-900: #701a75;
+  --colors-purple-50: #f5f3ff;
+  --colors-purple-100: #ede9fe;
+  --colors-purple-200: #ddd6fe;
+  --colors-purple-300: #c4b5fd;
+  --colors-purple-400: #a78bfa;
+  --colors-purple-500: #8b5cf6;
+  --colors-purple-600: #7c3aed;
+  --colors-purple-700: #6d28d9;
+  --colors-purple-800: #5b21b6;
+  --colors-purple-900: #4c1d95;
+  --colors-indigo-50: #eef2ff;
+  --colors-indigo-100: #e0e7ff;
+  --colors-indigo-200: #c7d2fe;
+  --colors-indigo-300: #a5b4fc;
+  --colors-indigo-400: #818cf8;
+  --colors-indigo-500: #6366f1;
+  --colors-indigo-600: #4f46e5;
+  --colors-indigo-700: #4338ca;
+  --colors-indigo-800: #3730a3;
+  --colors-indigo-900: #312e81;
+  --colors-blue-50: #eff6ff;
+  --colors-blue-100: #dbeafe;
+  --colors-blue-200: #bfdbfe;
+  --colors-blue-300: #93c5fd;
+  --colors-blue-400: #60a5fa;
+  --colors-blue-500: #3b82f6;
+  --colors-blue-600: #2563eb;
+  --colors-blue-700: #1d4ed8;
+  --colors-blue-800: #1e40af;
+  --colors-blue-900: #1e3a8a;
+  --colors-sky-50: #f0f9ff;
+  --colors-sky-100: #e0f2fe;
+  --colors-sky-200: #bae6fd;
+  --colors-sky-300: #7dd3fc;
+  --colors-sky-400: #38bdf8;
+  --colors-sky-500: #0ea5e9;
+  --colors-sky-600: #0284c7;
+  --colors-sky-700: #0369a1;
+  --colors-sky-800: #075985;
+  --colors-sky-900: #0c4a6e;
+  --colors-cyan-50: #ecfeff;
+  --colors-cyan-100: #cffafe;
+  --colors-cyan-200: #a5f3fc;
+  --colors-cyan-300: #67e8f9;
+  --colors-cyan-400: #22d3ee;
+  --colors-cyan-500: #06b6d4;
+  --colors-cyan-600: #0891b2;
+  --colors-cyan-700: #0e7490;
+  --colors-cyan-800: #155e75;
+  --colors-cyan-900: #164e63;
+  --colors-teal-50: #f0fdfa;
+  --colors-teal-100: #ccfbf1;
+  --colors-teal-200: #99f6e4;
+  --colors-teal-300: #5eead4;
+  --colors-teal-400: #2dd4bf;
+  --colors-teal-500: #14b8a6;
+  --colors-teal-600: #0d9488;
+  --colors-teal-700: #0f766e;
+  --colors-teal-800: #115e59;
+  --colors-teal-900: #134e4a;
+  --colors-green-50: #ecfdf5;
+  --colors-green-100: #d1fae5;
+  --colors-green-200: #a7f3d0;
+  --colors-green-300: #6ee7b7;
+  --colors-green-400: #34d399;
+  --colors-green-500: #10b981;
+  --colors-green-600: #059669;
+  --colors-green-700: #047857;
+  --colors-green-800: #065f46;
+  --colors-green-900: #064e3b;
+  --colors-lime-50: #f7fee7;
+  --colors-lime-100: #ecfccb;
+  --colors-lime-200: #d9f99d;
+  --colors-lime-300: #bef264;
+  --colors-lime-400: #a3e635;
+  --colors-lime-500: #84cc16;
+  --colors-lime-600: #65a30d;
+  --colors-lime-700: #4d7c0f;
+  --colors-lime-800: #3f6212;
+  --colors-lime-900: #365314;
+  --colors-yellow-50: #fffbeb;
+  --colors-yellow-100: #fef3c7;
+  --colors-yellow-200: #fde68a;
+  --colors-yellow-300: #fcd34d;
+  --colors-yellow-400: #fbbf24;
+  --colors-yellow-500: #f59e0b;
+  --colors-yellow-600: #d97706;
+  --colors-yellow-700: #b45309;
+  --colors-yellow-800: #92400e;
+  --colors-yellow-900: #78350f;
+  --colors-orange-50: #fff7ed;
+  --colors-orange-100: #ffedd5;
+  --colors-orange-200: #fed7aa;
+  --colors-orange-300: #fdba74;
+  --colors-orange-400: #fb923c;
+  --colors-orange-500: #f97316;
+  --colors-orange-600: #ea580c;
+  --colors-orange-700: #c2410c;
+  --colors-orange-800: #9a3412;
+  --colors-orange-900: #7c2d12;
+  --colors-red-50: #fef2f2;
+  --colors-red-100: #fee2e2;
+  --colors-red-200: #fecaca;
+  --colors-red-300: #fca5a5;
+  --colors-red-400: #f87171;
+  --colors-red-500: #ef4444;
+  --colors-red-600: #dc2626;
+  --colors-red-700: #b91c1c;
+  --colors-red-800: #991b1b;
+  --colors-red-900: #7f1d1d;
+  --colors-gray-50: #f9fafb;
+  --colors-gray-100: #f3f4f6;
+  --colors-gray-200: #e5e7eb;
+  --colors-gray-300: #d1d5db;
+  --colors-gray-400: #9ca3af;
+  --colors-gray-500: #6b7280;
+  --colors-gray-600: #4b5563;
+  --colors-gray-700: #374151;
+  --colors-gray-800: #1f2937;
+  --colors-gray-900: #111827;
+  --colors-slate-50: #F8FAFC;
+  --colors-slate-100: #F1F5F9;
+  --colors-slate-200: #E2E8F0;
+  --colors-slate-300: #CBD5E1;
+  --colors-slate-400: #94A3B8;
+  --colors-slate-500: #64748B;
+  --colors-slate-600: #475569;
+  --colors-slate-700: #334155;
+  --colors-slate-800: #1E293B;
+  --colors-slate-900: #0F172A;
+  --blurs-sm: 4px;
+  --blurs-base: 8px;
+  --blurs-md: 12px;
+  --blurs-lg: 16px;
+  --blurs-xl: 24px;
+  --blurs-2xl: 40px;
+  --blurs-3xl: 64px;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
+  --spacing-32: 8rem;
+  --spacing-36: 9rem;
+  --spacing-40: 10rem;
+  --spacing-44: 11rem;
+  --spacing-48: 12rem;
+  --spacing-52: 13rem;
+  --spacing-56: 14rem;
+  --spacing-60: 15rem;
+  --spacing-64: 16rem;
+  --spacing-72: 18rem;
+  --spacing-80: 20rem;
+  --spacing-96: 24rem;
+  --spacing-0\.5: 0.125rem;
+  --spacing-1\.5: 0.375rem;
+  --spacing-2\.5: 0.625rem;
+  --spacing-3\.5: 0.875rem;
+  --sizes-1: 0.25rem;
+  --sizes-2: 0.5rem;
+  --sizes-3: 0.75rem;
+  --sizes-4: 1rem;
+  --sizes-5: 1.25rem;
+  --sizes-6: 1.5rem;
+  --sizes-7: 1.75rem;
+  --sizes-8: 2rem;
+  --sizes-9: 2.25rem;
+  --sizes-10: 2.5rem;
+  --sizes-11: 2.75rem;
+  --sizes-12: 3rem;
+  --sizes-14: 3.5rem;
+  --sizes-16: 4rem;
+  --sizes-20: 5rem;
+  --sizes-24: 6rem;
+  --sizes-28: 7rem;
+  --sizes-32: 8rem;
+  --sizes-36: 9rem;
+  --sizes-40: 10rem;
+  --sizes-44: 11rem;
+  --sizes-48: 12rem;
+  --sizes-52: 13rem;
+  --sizes-56: 14rem;
+  --sizes-60: 15rem;
+  --sizes-64: 16rem;
+  --sizes-72: 18rem;
+  --sizes-80: 20rem;
+  --sizes-96: 24rem;
+  --sizes-0\.5: 0.125rem;
+  --sizes-1\.5: 0.375rem;
+  --sizes-2\.5: 0.625rem;
+  --sizes-3\.5: 0.875rem;
+  --sizes-xs: 20rem;
+  --sizes-sm: 24rem;
+  --sizes-md: 28rem;
+  --sizes-lg: 32rem;
+  --sizes-xl: 36rem;
+  --sizes-2xl: 42rem;
+  --sizes-3xl: 48rem;
+  --sizes-4xl: 56rem;
+  --sizes-5xl: 64rem;
+  --sizes-6xl: 72rem;
+  --sizes-7xl: 80rem;
+  --sizes-8xl: 90rem;
+  --sizes-prose: 65ch;
+  --sizes-full: 100%;
+  --sizes-min: min-content;
+  --sizes-max: max-content;
+  --sizes-fit: fit-content;
+  --sizes-breakpoint-sm: 640px;
+  --sizes-breakpoint-md: 768px;
+  --sizes-breakpoint-lg: 1024px;
+  --sizes-breakpoint-xl: 1280px;
+  --sizes-breakpoint-2xl: 1536px;
+  --animations-spin: spin 1s linear infinite;
+  --animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animations-bounce: bounce 1s infinite;
+  --fonts-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --fonts-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --fonts-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --fonts-poppins: var(--font-poppins), sans-serif;
+  --fonts-lato: var(--font-lato), sans-serif;
+  --breakpoints-sm: 640px;
+  --breakpoints-md: 768px;
+  --breakpoints-lg: 1024px;
+  --breakpoints-xl: 1280px;
+  --breakpoints-2xl: 1536px;
+  --colors-color-palette-50: var(--colors-color-palette-50);
+  --colors-color-palette-100: var(--colors-color-palette-100);
+  --colors-color-palette-200: var(--colors-color-palette-200);
+  --colors-color-palette-300: var(--colors-color-palette-300);
+  --colors-color-palette-400: var(--colors-color-palette-400);
+  --colors-color-palette-500: var(--colors-color-palette-500);
+  --colors-color-palette-600: var(--colors-color-palette-600);
+  --colors-color-palette-700: var(--colors-color-palette-700);
+  --colors-color-palette-800: var(--colors-color-palette-800);
+  --colors-color-palette-900: var(--colors-color-palette-900)
+}
+  }
+  

styled-system/tokens/index.d.ts

@@ -0,0 +1,8 @@
+import type { Token } from './tokens'
+
+export declare const token: {
+  (path: Token, fallback?: string): string
+  var: (path: Token, fallback?: string) => string
+}
+
+export * from './tokens'

styled-system/tokens/keyframes.css

@@ -0,0 +1,28 @@
+@layer tokens {
+    @keyframes spin {
+        to {
+            transform: rotate(360deg)
+        }
+    }
+    @keyframes ping {
+        75%, 100% {
+            transform: scale(2);
+            opacity: 0
+        }
+    }
+    @keyframes pulse {
+        50% {
+            opacity: .5
+        }
+    }
+    @keyframes bounce {
+        0%, 100% {
+            transform: translateY(-25%);
+            animation-timing-function: cubic-bezier(0.8,0,1,1)
+        }
+        50% {
+            transform: none;
+            animation-timing-function: cubic-bezier(0,0,0.2,1)
+        }
+    }
+}

styled-system/types/composition.d.ts

@@ -0,0 +1,110 @@
+import type { CompositionStyleObject } from './system-types'
+
+type Recursive<T> = {
+  [key: string]: Recursive<T> | T
+}
+
+export type Token<Value = any> = {
+  value: Value
+  description?: string
+}
+
+/* -----------------------------------------------------------------------------
+ * Text styles
+ * -----------------------------------------------------------------------------*/
+
+type TextStyleProperty =
+  | 'fontSize'
+  | 'fontSizeAdjust'
+  | 'fontVariationSettings'
+  | 'fontVariantPosition'
+  | 'fontVariantCaps'
+  | 'fontVariantNumeric'
+  | 'fontVariantAlternates'
+  | 'fontVariantLigatures'
+  | 'fontFamily'
+  | 'fontWeight'
+  | 'fontSynthesis'
+  | 'fontStyle'
+  | 'fontVariant'
+  | 'lineHeight'
+  | 'letterSpacing'
+  | 'textDecoration'
+  | 'textTransform'
+  | 'textIndent'
+  | 'textDecorationColor'
+  | 'textDecorationLine'
+  | 'textDecorationStyle'
+  | 'textEmphasisColor'
+  | 'textEmphasisPosition'
+  | 'textEmphasisStyle'
+  | 'hyphenateCharacter'
+  | 'textOrientation'
+  | 'textOverflow'
+  | 'textRendering'
+
+export type TextStyle = CompositionStyleObject<TextStyleProperty>
+
+export type TextStyles = Recursive<Token<TextStyle>>
+
+/* -----------------------------------------------------------------------------
+ * Layer styles
+ * -----------------------------------------------------------------------------*/
+
+type Placement =
+  | 'Top'
+  | 'Right'
+  | 'Bottom'
+  | 'Left'
+  | 'Inline'
+  | 'Block'
+  | 'InlineStart'
+  | 'InlineEnd'
+  | 'BlockStart'
+  | 'BlockEnd'
+
+type Radius =
+  | `Top${'Right' | 'Left'}`
+  | `Bottom${'Right' | 'Left'}`
+  | `Start${'Start' | 'End'}`
+  | `End${'Start' | 'End'}`
+
+type LayerStyleProperty =
+  | 'background'
+  | 'backgroundColor'
+  | 'backgroundImage'
+  | 'borderRadius'
+  | 'border'
+  | 'borderWidth'
+  | 'borderColor'
+  | 'borderStyle'
+  | 'boxShadow'
+  | 'filter'
+  | 'backdropFilter'
+  | 'transform'
+  | 'color'
+  | 'opacity'
+  | 'backgroundBlendMode'
+  | 'backgroundAttachment'
+  | 'backgroundClip'
+  | 'backgroundOrigin'
+  | 'backgroundPosition'
+  | 'backgroundRepeat'
+  | 'backgroundSize'
+  | `border${Placement}`
+  | `border${Placement}Width`
+  | 'borderRadius'
+  | `border${Radius}Radius`
+  | `border${Placement}Color`
+  | `border${Placement}Style`
+  | 'padding'
+  | `padding${Placement}`
+
+export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
+
+export type LayerStyles = Recursive<Token<LayerStyle>>
+
+export type CompositionStyles = {
+  textStyles: TextStyles
+  layerStyles: LayerStyles
+}

styled-system/types/conditions.d.ts

@@ -0,0 +1,135 @@
+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
+	"_highConstrast": 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
+}
+
+export type Condition = keyof Conditions
+
+export type Conditional<V> =
+  | V
+  | Array<V | null>
+  | {
+      [K in keyof Conditions]?: Conditional<V>
+    }
+
+export type ConditionalValue<T> = Conditional<T>
+
+export type Nested<P> = P & {
+  [K in Selectors]?: Nested<P>
+} & {
+  [K in AnySelector]?: Nested<P>
+} & {
+  [K in keyof Conditions]?: Nested<P>
+}

styled-system/types/global.d.ts

@@ -0,0 +1,15 @@
+import { RecipeVariantRecord, RecipeConfig } from './recipe'
+import { Parts } from './parts'
+import { PatternConfig } from './pattern'
+import { GlobalStyleObject, SystemStyleObject } from './system-types'
+import { CompositionStyles } from './composition'
+
+declare module '@pandacss/dev' {
+  export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): RecipeConfig
+  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 definePattern<T>(config: PatternConfig<T>): PatternConfig
+  export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
+}

styled-system/types/helpers.d.ts

@@ -0,0 +1 @@
+export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never

styled-system/types/index.d.ts

@@ -0,0 +1,3 @@
+import './global'
+export { ConditionalValue } from './conditions'
+export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'

styled-system/types/parts.d.ts

@@ -0,0 +1,5 @@
+export type Part = {
+  selector: string
+}
+
+export type Parts = Record<string, Part>

styled-system/types/pattern.d.ts

@@ -0,0 +1,53 @@
+import type { CssProperty, SystemStyleObject } from './system-types'
+import type { TokenCategory } from '../tokens'
+
+type Primitive = string | number | boolean | null | undefined
+type LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)
+
+export type PatternProperty =
+  | { type: 'property'; value: CssProperty }
+  | { type: 'enum'; value: string[] }
+  | { type: 'token'; value: TokenCategory; property?: CssProperty }
+  | { type: 'string' | 'boolean' | 'number' }
+
+export type PatternHelpers = {
+  map: (value: any, fn: (value: string) => string | undefined) => any
+}
+
+type PatternProperties = Record<string, PatternProperty>
+
+type Props<T> = Record<LiteralUnion<keyof T>, any>
+
+export type PatternConfig<T extends PatternProperties = PatternProperties> = {
+  /**
+   * The description of the pattern. This will be used in the JSDoc comment.
+   */
+  description?: string
+  /**
+   * The JSX element rendered by the pattern
+   * @default 'div'
+   */
+  jsxElement?: string
+  /**
+   * The properties of the pattern.
+   */
+  properties: T
+  /**
+   * The css object this pattern will generate.
+   */
+  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject
+  /**
+   * The jsx element name this pattern will generate.
+   */
+  jsx?: string
+  /**
+   * Whether to only generate types for the specified properties.
+   * This will disallow css properties
+   */
+  strict?: boolean
+  /**
+   * @experimental
+   * Disallow certain css properties for this pattern
+   */
+  blocklist?: LiteralUnion<CssProperty>[]
+}

styled-system/types/prop-type.d.ts

@@ -0,0 +1,301 @@
+import type { ConditionalValue } from './conditions';
+import type { CssProperties } from './system-types'
+import type { Tokens } from '../tokens'
+
+type PropertyValueTypes  = {
+	aspectRatio: "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden";
+	top: Tokens["spacing"];
+	left: Tokens["spacing"];
+	insetInline: Tokens["spacing"];
+	insetBlock: Tokens["spacing"];
+	inset: Tokens["spacing"];
+	insetBlockEnd: Tokens["spacing"];
+	insetBlockStart: Tokens["spacing"];
+	insetInlineEnd: Tokens["spacing"];
+	insetInlineStart: Tokens["spacing"];
+	right: Tokens["spacing"];
+	bottom: Tokens["spacing"];
+	insetX: Tokens["spacing"] | CssProperties["insetInline"];
+	insetY: Tokens["spacing"] | CssProperties["insetBlock"];
+	float: "left" | "right" | "start" | "end";
+	hideFrom: Tokens["breakpoints"];
+	hideBelow: Tokens["breakpoints"];
+	flexBasis: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full";
+	flex: "1" | "auto" | "initial" | "none";
+	gridTemplateColumns: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+	gridTemplateRows: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+	gridColumn: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full";
+	gridRow: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full";
+	gridAutoColumns: "min" | "max" | "fr";
+	gridAutoRows: "min" | "max" | "fr";
+	gap: Tokens["spacing"];
+	gridGap: Tokens["spacing"];
+	gridRowGap: Tokens["spacing"];
+	gridColumnGap: Tokens["spacing"];
+	rowGap: Tokens["spacing"];
+	columnGap: Tokens["spacing"];
+	padding: Tokens["spacing"];
+	paddingLeft: Tokens["spacing"];
+	paddingRight: Tokens["spacing"];
+	paddingTop: Tokens["spacing"];
+	paddingBottom: Tokens["spacing"];
+	paddingBlock: Tokens["spacing"];
+	paddingBlockEnd: Tokens["spacing"];
+	paddingBlockStart: Tokens["spacing"];
+	paddingInline: Tokens["spacing"];
+	paddingInlineEnd: Tokens["spacing"];
+	paddingInlineStart: Tokens["spacing"];
+	marginLeft: Tokens["spacing"];
+	marginRight: Tokens["spacing"];
+	marginTop: Tokens["spacing"];
+	marginBottom: Tokens["spacing"];
+	margin: Tokens["spacing"];
+	marginBlock: Tokens["spacing"];
+	marginBlockEnd: Tokens["spacing"];
+	marginBlockStart: Tokens["spacing"];
+	marginInline: Tokens["spacing"];
+	marginInlineEnd: Tokens["spacing"];
+	marginInlineStart: Tokens["spacing"];
+	outlineColor: Tokens["colors"];
+	outline: Tokens["borders"];
+	outlineOffset: Tokens["spacing"];
+	divideX: string;
+	divideY: string;
+	divideColor: Tokens["colors"];
+	divideStyle: CssProperties["borderStyle"];
+	width: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
+	inlineSize: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
+	minWidth: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
+	minInlineSize: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
+	maxWidth: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
+	maxInlineSize: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
+	height: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
+	blockSize: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
+	minHeight: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
+	minBlockSize: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
+	maxHeight: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
+	maxBlockSize: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
+	color: Tokens["colors"];
+	fontFamily: Tokens["fonts"];
+	fontSize: Tokens["fontSizes"];
+	fontWeight: Tokens["fontWeights"];
+	fontSmoothing: "antialiased" | "subpixel-antialiased";
+	letterSpacing: Tokens["letterSpacings"];
+	lineHeight: Tokens["lineHeights"];
+	textDecorationColor: Tokens["colors"];
+	textEmphasisColor: Tokens["colors"];
+	textIndent: Tokens["spacing"];
+	textShadow: Tokens["shadows"];
+	textWrap: "wrap" | "balance" | "nowrap";
+	truncate: boolean;
+	listStyleImage: Tokens["assets"];
+	background: Tokens["colors"];
+	backgroundColor: Tokens["colors"];
+	backgroundImage: Tokens["assets"];
+	backgroundGradient: Tokens["gradients"] | "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	textGradient: Tokens["gradients"] | "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	gradientFrom: Tokens["colors"];
+	gradientTo: Tokens["colors"];
+	gradientVia: Tokens["colors"];
+	borderRadius: Tokens["radii"];
+	borderTopLeftRadius: Tokens["radii"];
+	borderTopRightRadius: Tokens["radii"];
+	borderBottomRightRadius: Tokens["radii"];
+	borderBottomLeftRadius: Tokens["radii"];
+	borderTopRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderRightRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderBottomRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderLeftRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderStartStartRadius: Tokens["radii"];
+	borderStartEndRadius: Tokens["radii"];
+	borderStartRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	borderEndStartRadius: Tokens["radii"];
+	borderEndEndRadius: Tokens["radii"];
+	borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	border: Tokens["borders"];
+	borderColor: Tokens["colors"];
+	borderInline: Tokens["borders"];
+	borderInlineWidth: Tokens["borderWidths"];
+	borderInlineColor: Tokens["colors"];
+	borderBlock: Tokens["borders"];
+	borderBlockWidth: Tokens["borderWidths"];
+	borderBlockColor: Tokens["colors"];
+	borderLeft: Tokens["borders"];
+	borderLeftColor: Tokens["colors"];
+	borderInlineStart: Tokens["borders"];
+	borderInlineStartColor: Tokens["colors"];
+	borderRight: Tokens["borders"];
+	borderRightColor: Tokens["colors"];
+	borderInlineEnd: Tokens["borders"];
+	borderInlineEndColor: Tokens["colors"];
+	borderTop: Tokens["borders"];
+	borderTopColor: Tokens["colors"];
+	borderBottom: Tokens["borders"];
+	borderBottomColor: Tokens["colors"];
+	borderBlockEnd: Tokens["borders"];
+	borderBlockEndColor: Tokens["colors"];
+	borderBlockStart: Tokens["borders"];
+	borderBlockStartColor: Tokens["colors"];
+	boxShadow: Tokens["shadows"];
+	boxShadowColor: Tokens["colors"];
+	filter: "auto";
+	dropShadow: Tokens["dropShadows"];
+	blur: Tokens["blurs"];
+	backdropFilter: "auto";
+	backdropBlur: Tokens["blurs"];
+	borderSpacing: Tokens["spacing"];
+	borderSpacingX: Tokens["spacing"];
+	borderSpacingY: Tokens["spacing"];
+	transitionTimingFunction: Tokens["easings"];
+	transitionDelay: Tokens["durations"];
+	transitionDuration: Tokens["durations"];
+	transitionProperty: "all" | "none" | "opacity" | "shadow" | "transform" | "base" | "background" | "colors";
+	animation: Tokens["animations"];
+	animationDelay: Tokens["durations"];
+	scale: "auto" | CssProperties["scale"];
+	translate: "auto" | CssProperties["translate"];
+	translateX: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full";
+	translateY: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full";
+	accentColor: Tokens["colors"];
+	caretColor: Tokens["colors"];
+	scrollbar: "visible" | "hidden";
+	scrollMargin: Tokens["spacing"];
+	scrollMarginX: Tokens["spacing"] | CssProperties["scrollMarginInline"];
+	scrollMarginY: Tokens["spacing"] | CssProperties["scrollMarginBlock"];
+	scrollMarginLeft: Tokens["spacing"];
+	scrollMarginRight: Tokens["spacing"];
+	scrollMarginTop: Tokens["spacing"];
+	scrollMarginBottom: Tokens["spacing"];
+	scrollMarginBlock: Tokens["spacing"];
+	scrollMarginBlockEnd: Tokens["spacing"];
+	scrollMarginBlockStart: Tokens["spacing"];
+	scrollMarginInline: Tokens["spacing"];
+	scrollMarginInlineEnd: Tokens["spacing"];
+	scrollMarginInlineStart: Tokens["spacing"];
+	scrollPadding: Tokens["spacing"];
+	scrollPaddingBlock: Tokens["spacing"];
+	scrollPaddingBlockStart: Tokens["spacing"];
+	scrollPaddingBlockEnd: Tokens["spacing"];
+	scrollPaddingInline: Tokens["spacing"];
+	scrollPaddingInlineEnd: Tokens["spacing"];
+	scrollPaddingInlineStart: Tokens["spacing"];
+	scrollPaddingX: Tokens["spacing"] | CssProperties["scrollPaddingInline"];
+	scrollPaddingY: Tokens["spacing"] | CssProperties["scrollPaddingBlock"];
+	scrollPaddingLeft: Tokens["spacing"];
+	scrollPaddingRight: Tokens["spacing"];
+	scrollPaddingTop: Tokens["spacing"];
+	scrollPaddingBottom: Tokens["spacing"];
+	scrollSnapType: "none" | "x" | "y" | "both";
+	scrollSnapStrictness: "mandatory" | "proximity";
+	scrollSnapMargin: Tokens["spacing"];
+	scrollSnapMarginTop: Tokens["spacing"];
+	scrollSnapMarginBottom: Tokens["spacing"];
+	scrollSnapMarginLeft: Tokens["spacing"];
+	scrollSnapMarginRight: Tokens["spacing"];
+	fill: Tokens["colors"];
+	stroke: Tokens["colors"];
+	srOnly: boolean;
+	debug: boolean;
+	colorPalette: "rose" | "pink" | "fuchsia" | "purple" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "red" | "gray" | "slate";
+	textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
+}
+
+
+
+  type CssValue<T> = T extends keyof CssProperties ? CssProperties[T] : never
+
+  type Shorthand<T> = T extends keyof PropertyValueTypes ? PropertyValueTypes[T] | CssValue<T> : CssValue<T>
+
+  export type PropertyTypes = PropertyValueTypes & {
+  
+	pos: Shorthand<"position">;
+	insetEnd: Shorthand<"insetInlineEnd">;
+	end: Shorthand<"insetInlineEnd">;
+	insetStart: Shorthand<"insetInlineStart">;
+	start: Shorthand<"insetInlineStart">;
+	flexDir: Shorthand<"flexDirection">;
+	p: Shorthand<"padding">;
+	pl: Shorthand<"paddingLeft">;
+	pr: Shorthand<"paddingRight">;
+	pt: Shorthand<"paddingTop">;
+	pb: Shorthand<"paddingBottom">;
+	py: Shorthand<"paddingBlock">;
+	paddingY: Shorthand<"paddingBlock">;
+	paddingX: Shorthand<"paddingInline">;
+	px: Shorthand<"paddingInline">;
+	pe: Shorthand<"paddingInlineEnd">;
+	paddingEnd: Shorthand<"paddingInlineEnd">;
+	ps: Shorthand<"paddingInlineStart">;
+	paddingStart: Shorthand<"paddingInlineStart">;
+	ml: Shorthand<"marginLeft">;
+	mr: Shorthand<"marginRight">;
+	mt: Shorthand<"marginTop">;
+	mb: Shorthand<"marginBottom">;
+	m: Shorthand<"margin">;
+	my: Shorthand<"marginBlock">;
+	marginY: Shorthand<"marginBlock">;
+	mx: Shorthand<"marginInline">;
+	marginX: Shorthand<"marginInline">;
+	me: Shorthand<"marginInlineEnd">;
+	marginEnd: Shorthand<"marginInlineEnd">;
+	ms: Shorthand<"marginInlineStart">;
+	marginStart: Shorthand<"marginInlineStart">;
+	ringWidth: Shorthand<"outlineWidth">;
+	ringColor: Shorthand<"outlineColor">;
+	ring: Shorthand<"outline">;
+	ringOffset: Shorthand<"outlineOffset">;
+	w: Shorthand<"width">;
+	minW: Shorthand<"minWidth">;
+	maxW: Shorthand<"maxWidth">;
+	h: Shorthand<"height">;
+	minH: Shorthand<"minHeight">;
+	maxH: Shorthand<"maxHeight">;
+	bgPosition: Shorthand<"backgroundPosition">;
+	bgPositionX: Shorthand<"backgroundPositionX">;
+	bgPositionY: Shorthand<"backgroundPositionY">;
+	bgAttachment: Shorthand<"backgroundAttachment">;
+	bgClip: Shorthand<"backgroundClip">;
+	bg: Shorthand<"background">;
+	bgColor: Shorthand<"backgroundColor">;
+	bgOrigin: Shorthand<"backgroundOrigin">;
+	bgImage: Shorthand<"backgroundImage">;
+	bgRepeat: Shorthand<"backgroundRepeat">;
+	bgBlendMode: Shorthand<"backgroundBlendMode">;
+	bgSize: Shorthand<"backgroundSize">;
+	bgGradient: Shorthand<"backgroundGradient">;
+	rounded: Shorthand<"borderRadius">;
+	roundedTopLeft: Shorthand<"borderTopLeftRadius">;
+	roundedTopRight: Shorthand<"borderTopRightRadius">;
+	roundedBottomRight: Shorthand<"borderBottomRightRadius">;
+	roundedBottomLeft: Shorthand<"borderBottomLeftRadius">;
+	roundedTop: Shorthand<"borderTopRadius">;
+	roundedRight: Shorthand<"borderRightRadius">;
+	roundedBottom: Shorthand<"borderBottomRadius">;
+	roundedLeft: Shorthand<"borderLeftRadius">;
+	roundedStartStart: Shorthand<"borderStartStartRadius">;
+	roundedStartEnd: Shorthand<"borderStartEndRadius">;
+	roundedStart: Shorthand<"borderStartRadius">;
+	roundedEndStart: Shorthand<"borderEndStartRadius">;
+	roundedEndEnd: Shorthand<"borderEndEndRadius">;
+	roundedEnd: Shorthand<"borderEndRadius">;
+	borderX: Shorthand<"borderInline">;
+	borderXWidth: Shorthand<"borderInlineWidth">;
+	borderXColor: Shorthand<"borderInlineColor">;
+	borderY: Shorthand<"borderBlock">;
+	borderYWidth: Shorthand<"borderBlockWidth">;
+	borderYColor: Shorthand<"borderBlockColor">;
+	borderStart: Shorthand<"borderInlineStart">;
+	borderStartColor: Shorthand<"borderInlineStartColor">;
+	borderEnd: Shorthand<"borderInlineEnd">;
+	borderEndColor: Shorthand<"borderInlineEndColor">;
+	shadow: Shorthand<"boxShadow">;
+	shadowColor: Shorthand<"boxShadowColor">;
+	x: Shorthand<"translateX">;
+	y: Shorthand<"translateY">;
+}
+
+export type PropertyValue<T extends string> = T extends keyof PropertyTypes
+  ? ConditionalValue<PropertyTypes[T] | CssValue<T>>
+  : T extends keyof CssProperties
+  ? ConditionalValue<CssProperties[T]>
+  : ConditionalValue<string | number>

styled-system/types/recipe.d.ts

@@ -0,0 +1,79 @@
+import type { SystemStyleObject } from './system-types'
+
+type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
+
+type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
+
+export type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>
+
+export type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T
+  ? {}
+  : {
+      [K in keyof T]?: StringToBoolean<keyof T[K]>
+    }
+
+export type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string
+
+export type RecipeVariantProps<T extends RecipeVariantFn<RecipeVariantRecord>> = Pretty<Parameters<T>[0]>
+
+type RecipeVariantMap<T extends RecipeVariantRecord> = {
+  [K in keyof T]: Array<keyof T[K]>
+}
+
+export type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {
+  __type: RecipeSelection<T>
+  variantKeys: (keyof T)[]
+  variantMap: RecipeVariantMap<T>
+  resolve: (props: RecipeSelection<T>) => SystemStyleObject
+  config: RecipeConfig<T>
+  splitVariantProps<Props extends RecipeSelection<T>>(
+    props: Props,
+  ): [RecipeSelection<T>, Pretty<Omit<Props, keyof RecipeVariantRecord>>]
+}
+
+export type RecipeCompoundSelection<T extends RecipeVariantRecord> = {
+  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>
+}
+
+export type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {
+  css: SystemStyleObject
+}
+
+export type RecipeDefinition<T extends RecipeVariantRecord> = {
+  /**
+   * The base styles of the recipe.
+   */
+  base?: SystemStyleObject
+  /**
+   * The multi-variant styles of the recipe.
+   */
+  variants?: T | RecipeVariantRecord
+  /**
+   * The default variants of the recipe.
+   */
+  defaultVariants?: RecipeSelection<T>
+  /**
+   * The styles to apply when a combination of variants is selected.
+   */
+  compoundVariants?: Array<RecipeCompoundVariant<T>>
+}
+
+export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
+
+export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & {
+  /**
+   * The name of the recipe.
+   */
+  name: string
+  /**
+   * The description of the recipe. This will be used in the JSDoc comment.
+   */
+  description?: string
+  /**
+   * The jsx elements to track for this recipe. Can be string or Regexp.
+   *
+   * @default capitalize(recipe.name)
+   * @example ['Button', 'Link', /Button$/]
+   */
+  jsx?: Array<string | RegExp>
+}

styled-system/types/selectors.d.ts

@@ -0,0 +1,56 @@
+import type { Pseudos } from './csstype'
+
+type AriaAttributes =
+  | '[aria-disabled]'
+  | '[aria-hidden]'
+  | '[aria-invalid]'
+  | '[aria-readonly]'
+  | '[aria-required]'
+  | '[aria-selected]'
+  | '[aria-checked]'
+  | '[aria-expanded]'
+  | '[aria-pressed]'
+  | `[aria-current=${'page' | 'step' | 'location' | 'date' | 'time'}]`
+  | '[aria-invalid]'
+  | `[aria-sort=${'ascending' | 'descending'}]`
+
+type DataAttributes =
+  | '[data-selected]'
+  | '[data-highlighted]'
+  | '[data-hover]'
+  | '[data-active]'
+  | '[data-checked]'
+  | '[data-disabled]'
+  | '[data-readonly]'
+  | '[data-focus]'
+  | '[data-focus-visible]'
+  | '[data-focus-visible-added]'
+  | '[data-invalid]'
+  | '[data-pressed]'
+  | '[data-expanded]'
+  | '[data-grabbed]'
+  | '[data-dragged]'
+  | '[data-orientation=horizontal]'
+  | '[data-orientation=vertical]'
+  | '[data-in-range]'
+  | '[data-out-of-range]'
+  | '[data-placeholder-shown]'
+  | `[data-part=${string}]`
+  | `[data-attr=${string}]`
+  | `[data-placement=${string}]`
+  | `[data-theme=${string}]`
+  | `[data-size=${string}]`
+  | `[data-state=${string}]`
+  | '[data-empty]'
+  | '[data-loading]'
+  | '[data-loaded]'
+  | '[data-enter]'
+  | '[data-entering]'
+  | '[data-exited]'
+  | '[data-exiting]'
+
+type AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`
+type ParentSelector = `${DataAttributes | AriaAttributes} &`
+
+export type AnySelector = `${string}&` | `&${string}`
+export type Selectors = AttributeSelector | ParentSelector

styled-system/types/style-props.d.ts

@@ -0,0 +1,686 @@
+import { ConditionalValue } from './conditions'
+import { PropertyValue } from './prop-type'
+import { Token } from '../tokens'
+
+export type CssVarProperties = {
+  [key in `--${string}`]?: ConditionalValue<Token | (string & {}) | (number & {})>
+}
+
+export type SystemProperties = {
+  	MsAccelerator?: PropertyValue<'MsAccelerator'>
+	MsBlockProgression?: PropertyValue<'MsBlockProgression'>
+	MsContentZoomChaining?: PropertyValue<'MsContentZoomChaining'>
+	MsContentZooming?: PropertyValue<'MsContentZooming'>
+	MsContentZoomLimit?: PropertyValue<'MsContentZoomLimit'>
+	MsContentZoomLimitMax?: PropertyValue<'MsContentZoomLimitMax'>
+	MsContentZoomLimitMin?: PropertyValue<'MsContentZoomLimitMin'>
+	MsContentZoomSnap?: PropertyValue<'MsContentZoomSnap'>
+	MsContentZoomSnapPoints?: PropertyValue<'MsContentZoomSnapPoints'>
+	MsContentZoomSnapType?: PropertyValue<'MsContentZoomSnapType'>
+	MsFilter?: PropertyValue<'MsFilter'>
+	MsFlowFrom?: PropertyValue<'MsFlowFrom'>
+	MsFlowInto?: PropertyValue<'MsFlowInto'>
+	MsGridColumns?: PropertyValue<'MsGridColumns'>
+	MsGridRows?: PropertyValue<'MsGridRows'>
+	MsHighContrastAdjust?: PropertyValue<'MsHighContrastAdjust'>
+	MsHyphenateLimitChars?: PropertyValue<'MsHyphenateLimitChars'>
+	MsHyphenateLimitLines?: PropertyValue<'MsHyphenateLimitLines'>
+	MsHyphenateLimitZone?: PropertyValue<'MsHyphenateLimitZone'>
+	MsImeAlign?: PropertyValue<'MsImeAlign'>
+	MsOverflowStyle?: PropertyValue<'MsOverflowStyle'>
+	MsScrollbar3dlightColor?: PropertyValue<'MsScrollbar3dlightColor'>
+	MsScrollbarArrowColor?: PropertyValue<'MsScrollbarArrowColor'>
+	MsScrollbarBaseColor?: PropertyValue<'MsScrollbarBaseColor'>
+	MsScrollbarDarkshadowColor?: PropertyValue<'MsScrollbarDarkshadowColor'>
+	MsScrollbarFaceColor?: PropertyValue<'MsScrollbarFaceColor'>
+	MsScrollbarHighlightColor?: PropertyValue<'MsScrollbarHighlightColor'>
+	MsScrollbarShadowColor?: PropertyValue<'MsScrollbarShadowColor'>
+	MsScrollbarTrackColor?: PropertyValue<'MsScrollbarTrackColor'>
+	MsScrollChaining?: PropertyValue<'MsScrollChaining'>
+	MsScrollLimit?: PropertyValue<'MsScrollLimit'>
+	MsScrollLimitXMax?: PropertyValue<'MsScrollLimitXMax'>
+	MsScrollLimitXMin?: PropertyValue<'MsScrollLimitXMin'>
+	MsScrollLimitYMax?: PropertyValue<'MsScrollLimitYMax'>
+	MsScrollLimitYMin?: PropertyValue<'MsScrollLimitYMin'>
+	MsScrollRails?: PropertyValue<'MsScrollRails'>
+	MsScrollSnapPointsX?: PropertyValue<'MsScrollSnapPointsX'>
+	MsScrollSnapPointsY?: PropertyValue<'MsScrollSnapPointsY'>
+	MsScrollSnapType?: PropertyValue<'MsScrollSnapType'>
+	MsScrollSnapX?: PropertyValue<'MsScrollSnapX'>
+	MsScrollSnapY?: PropertyValue<'MsScrollSnapY'>
+	MsScrollTranslation?: PropertyValue<'MsScrollTranslation'>
+	MsTextAutospace?: PropertyValue<'MsTextAutospace'>
+	MsTouchSelect?: PropertyValue<'MsTouchSelect'>
+	MsUserSelect?: PropertyValue<'MsUserSelect'>
+	MsWrapFlow?: PropertyValue<'MsWrapFlow'>
+	MsWrapMargin?: PropertyValue<'MsWrapMargin'>
+	MsWrapThrough?: PropertyValue<'MsWrapThrough'>
+	MozAppearance?: PropertyValue<'MozAppearance'>
+	MozBinding?: PropertyValue<'MozBinding'>
+	MozBorderBottomColors?: PropertyValue<'MozBorderBottomColors'>
+	MozBorderLeftColors?: PropertyValue<'MozBorderLeftColors'>
+	MozBorderRightColors?: PropertyValue<'MozBorderRightColors'>
+	MozBorderTopColors?: PropertyValue<'MozBorderTopColors'>
+	MozContextProperties?: PropertyValue<'MozContextProperties'>
+	MozFloatEdge?: PropertyValue<'MozFloatEdge'>
+	MozForceBrokenImageIcon?: PropertyValue<'MozForceBrokenImageIcon'>
+	MozImageRegion?: PropertyValue<'MozImageRegion'>
+	MozOrient?: PropertyValue<'MozOrient'>
+	MozOutlineRadius?: PropertyValue<'MozOutlineRadius'>
+	MozOutlineRadiusBottomleft?: PropertyValue<'MozOutlineRadiusBottomleft'>
+	MozOutlineRadiusBottomright?: PropertyValue<'MozOutlineRadiusBottomright'>
+	MozOutlineRadiusTopleft?: PropertyValue<'MozOutlineRadiusTopleft'>
+	MozOutlineRadiusTopright?: PropertyValue<'MozOutlineRadiusTopright'>
+	MozStackSizing?: PropertyValue<'MozStackSizing'>
+	MozTextBlink?: PropertyValue<'MozTextBlink'>
+	MozUserFocus?: PropertyValue<'MozUserFocus'>
+	MozUserInput?: PropertyValue<'MozUserInput'>
+	MozUserModify?: PropertyValue<'MozUserModify'>
+	MozWindowDragging?: PropertyValue<'MozWindowDragging'>
+	MozWindowShadow?: PropertyValue<'MozWindowShadow'>
+	WebkitAppearance?: PropertyValue<'WebkitAppearance'>
+	WebkitBorderBefore?: PropertyValue<'WebkitBorderBefore'>
+	WebkitBorderBeforeColor?: PropertyValue<'WebkitBorderBeforeColor'>
+	WebkitBorderBeforeStyle?: PropertyValue<'WebkitBorderBeforeStyle'>
+	WebkitBorderBeforeWidth?: PropertyValue<'WebkitBorderBeforeWidth'>
+	WebkitBoxReflect?: PropertyValue<'WebkitBoxReflect'>
+	WebkitLineClamp?: PropertyValue<'WebkitLineClamp'>
+	WebkitMask?: PropertyValue<'WebkitMask'>
+	WebkitMaskAttachment?: PropertyValue<'WebkitMaskAttachment'>
+	WebkitMaskClip?: PropertyValue<'WebkitMaskClip'>
+	WebkitMaskComposite?: PropertyValue<'WebkitMaskComposite'>
+	WebkitMaskImage?: PropertyValue<'WebkitMaskImage'>
+	WebkitMaskOrigin?: PropertyValue<'WebkitMaskOrigin'>
+	WebkitMaskPosition?: PropertyValue<'WebkitMaskPosition'>
+	WebkitMaskPositionX?: PropertyValue<'WebkitMaskPositionX'>
+	WebkitMaskPositionY?: PropertyValue<'WebkitMaskPositionY'>
+	WebkitMaskRepeat?: PropertyValue<'WebkitMaskRepeat'>
+	WebkitMaskRepeatX?: PropertyValue<'WebkitMaskRepeatX'>
+	WebkitMaskRepeatY?: PropertyValue<'WebkitMaskRepeatY'>
+	WebkitMaskSize?: PropertyValue<'WebkitMaskSize'>
+	WebkitOverflowScrolling?: PropertyValue<'WebkitOverflowScrolling'>
+	WebkitTapHighlightColor?: PropertyValue<'WebkitTapHighlightColor'>
+	WebkitTextFillColor?: PropertyValue<'WebkitTextFillColor'>
+	WebkitTextStroke?: PropertyValue<'WebkitTextStroke'>
+	WebkitTextStrokeColor?: PropertyValue<'WebkitTextStrokeColor'>
+	WebkitTextStrokeWidth?: PropertyValue<'WebkitTextStrokeWidth'>
+	WebkitTouchCallout?: PropertyValue<'WebkitTouchCallout'>
+	WebkitUserModify?: PropertyValue<'WebkitUserModify'>
+	accentColor?: PropertyValue<'accentColor'>
+	alignContent?: PropertyValue<'alignContent'>
+	alignItems?: PropertyValue<'alignItems'>
+	alignSelf?: PropertyValue<'alignSelf'>
+	alignTracks?: PropertyValue<'alignTracks'>
+	all?: PropertyValue<'all'>
+	animation?: PropertyValue<'animation'>
+	animationComposition?: PropertyValue<'animationComposition'>
+	animationDelay?: PropertyValue<'animationDelay'>
+	animationDirection?: PropertyValue<'animationDirection'>
+	animationDuration?: PropertyValue<'animationDuration'>
+	animationFillMode?: PropertyValue<'animationFillMode'>
+	animationIterationCount?: PropertyValue<'animationIterationCount'>
+	animationName?: PropertyValue<'animationName'>
+	animationPlayState?: PropertyValue<'animationPlayState'>
+	animationTimingFunction?: PropertyValue<'animationTimingFunction'>
+	animationTimeline?: PropertyValue<'animationTimeline'>
+	appearance?: PropertyValue<'appearance'>
+	aspectRatio?: PropertyValue<'aspectRatio'>
+	azimuth?: PropertyValue<'azimuth'>
+	backdropFilter?: PropertyValue<'backdropFilter'>
+	backfaceVisibility?: PropertyValue<'backfaceVisibility'>
+	background?: PropertyValue<'background'>
+	backgroundAttachment?: PropertyValue<'backgroundAttachment'>
+	backgroundBlendMode?: PropertyValue<'backgroundBlendMode'>
+	backgroundClip?: PropertyValue<'backgroundClip'>
+	backgroundColor?: PropertyValue<'backgroundColor'>
+	backgroundImage?: PropertyValue<'backgroundImage'>
+	backgroundOrigin?: PropertyValue<'backgroundOrigin'>
+	backgroundPosition?: PropertyValue<'backgroundPosition'>
+	backgroundPositionX?: PropertyValue<'backgroundPositionX'>
+	backgroundPositionY?: PropertyValue<'backgroundPositionY'>
+	backgroundRepeat?: PropertyValue<'backgroundRepeat'>
+	backgroundSize?: PropertyValue<'backgroundSize'>
+	blockOverflow?: PropertyValue<'blockOverflow'>
+	blockSize?: PropertyValue<'blockSize'>
+	border?: PropertyValue<'border'>
+	borderBlock?: PropertyValue<'borderBlock'>
+	borderBlockColor?: PropertyValue<'borderBlockColor'>
+	borderBlockStyle?: PropertyValue<'borderBlockStyle'>
+	borderBlockWidth?: PropertyValue<'borderBlockWidth'>
+	borderBlockEnd?: PropertyValue<'borderBlockEnd'>
+	borderBlockEndColor?: PropertyValue<'borderBlockEndColor'>
+	borderBlockEndStyle?: PropertyValue<'borderBlockEndStyle'>
+	borderBlockEndWidth?: PropertyValue<'borderBlockEndWidth'>
+	borderBlockStart?: PropertyValue<'borderBlockStart'>
+	borderBlockStartColor?: PropertyValue<'borderBlockStartColor'>
+	borderBlockStartStyle?: PropertyValue<'borderBlockStartStyle'>
+	borderBlockStartWidth?: PropertyValue<'borderBlockStartWidth'>
+	borderBottom?: PropertyValue<'borderBottom'>
+	borderBottomColor?: PropertyValue<'borderBottomColor'>
+	borderBottomLeftRadius?: PropertyValue<'borderBottomLeftRadius'>
+	borderBottomRightRadius?: PropertyValue<'borderBottomRightRadius'>
+	borderBottomStyle?: PropertyValue<'borderBottomStyle'>
+	borderBottomWidth?: PropertyValue<'borderBottomWidth'>
+	borderCollapse?: PropertyValue<'borderCollapse'>
+	borderColor?: PropertyValue<'borderColor'>
+	borderEndEndRadius?: PropertyValue<'borderEndEndRadius'>
+	borderEndStartRadius?: PropertyValue<'borderEndStartRadius'>
+	borderImage?: PropertyValue<'borderImage'>
+	borderImageOutset?: PropertyValue<'borderImageOutset'>
+	borderImageRepeat?: PropertyValue<'borderImageRepeat'>
+	borderImageSlice?: PropertyValue<'borderImageSlice'>
+	borderImageSource?: PropertyValue<'borderImageSource'>
+	borderImageWidth?: PropertyValue<'borderImageWidth'>
+	borderInline?: PropertyValue<'borderInline'>
+	borderInlineEnd?: PropertyValue<'borderInlineEnd'>
+	borderInlineColor?: PropertyValue<'borderInlineColor'>
+	borderInlineStyle?: PropertyValue<'borderInlineStyle'>
+	borderInlineWidth?: PropertyValue<'borderInlineWidth'>
+	borderInlineEndColor?: PropertyValue<'borderInlineEndColor'>
+	borderInlineEndStyle?: PropertyValue<'borderInlineEndStyle'>
+	borderInlineEndWidth?: PropertyValue<'borderInlineEndWidth'>
+	borderInlineStart?: PropertyValue<'borderInlineStart'>
+	borderInlineStartColor?: PropertyValue<'borderInlineStartColor'>
+	borderInlineStartStyle?: PropertyValue<'borderInlineStartStyle'>
+	borderInlineStartWidth?: PropertyValue<'borderInlineStartWidth'>
+	borderLeft?: PropertyValue<'borderLeft'>
+	borderLeftColor?: PropertyValue<'borderLeftColor'>
+	borderLeftStyle?: PropertyValue<'borderLeftStyle'>
+	borderLeftWidth?: PropertyValue<'borderLeftWidth'>
+	borderRadius?: PropertyValue<'borderRadius'>
+	borderRight?: PropertyValue<'borderRight'>
+	borderRightColor?: PropertyValue<'borderRightColor'>
+	borderRightStyle?: PropertyValue<'borderRightStyle'>
+	borderRightWidth?: PropertyValue<'borderRightWidth'>
+	borderSpacing?: PropertyValue<'borderSpacing'>
+	borderStartEndRadius?: PropertyValue<'borderStartEndRadius'>
+	borderStartStartRadius?: PropertyValue<'borderStartStartRadius'>
+	borderStyle?: PropertyValue<'borderStyle'>
+	borderTop?: PropertyValue<'borderTop'>
+	borderTopColor?: PropertyValue<'borderTopColor'>
+	borderTopLeftRadius?: PropertyValue<'borderTopLeftRadius'>
+	borderTopRightRadius?: PropertyValue<'borderTopRightRadius'>
+	borderTopStyle?: PropertyValue<'borderTopStyle'>
+	borderTopWidth?: PropertyValue<'borderTopWidth'>
+	borderWidth?: PropertyValue<'borderWidth'>
+	bottom?: PropertyValue<'bottom'>
+	boxAlign?: PropertyValue<'boxAlign'>
+	boxDecorationBreak?: PropertyValue<'boxDecorationBreak'>
+	boxDirection?: PropertyValue<'boxDirection'>
+	boxFlex?: PropertyValue<'boxFlex'>
+	boxFlexGroup?: PropertyValue<'boxFlexGroup'>
+	boxLines?: PropertyValue<'boxLines'>
+	boxOrdinalGroup?: PropertyValue<'boxOrdinalGroup'>
+	boxOrient?: PropertyValue<'boxOrient'>
+	boxPack?: PropertyValue<'boxPack'>
+	boxShadow?: PropertyValue<'boxShadow'>
+	boxSizing?: PropertyValue<'boxSizing'>
+	breakAfter?: PropertyValue<'breakAfter'>
+	breakBefore?: PropertyValue<'breakBefore'>
+	breakInside?: PropertyValue<'breakInside'>
+	captionSide?: PropertyValue<'captionSide'>
+	caret?: PropertyValue<'caret'>
+	caretColor?: PropertyValue<'caretColor'>
+	caretShape?: PropertyValue<'caretShape'>
+	clear?: PropertyValue<'clear'>
+	clip?: PropertyValue<'clip'>
+	clipPath?: PropertyValue<'clipPath'>
+	color?: PropertyValue<'color'>
+	printColorAdjust?: PropertyValue<'printColorAdjust'>
+	colorScheme?: PropertyValue<'colorScheme'>
+	columnCount?: PropertyValue<'columnCount'>
+	columnFill?: PropertyValue<'columnFill'>
+	columnGap?: PropertyValue<'columnGap'>
+	columnRule?: PropertyValue<'columnRule'>
+	columnRuleColor?: PropertyValue<'columnRuleColor'>
+	columnRuleStyle?: PropertyValue<'columnRuleStyle'>
+	columnRuleWidth?: PropertyValue<'columnRuleWidth'>
+	columnSpan?: PropertyValue<'columnSpan'>
+	columnWidth?: PropertyValue<'columnWidth'>
+	columns?: PropertyValue<'columns'>
+	contain?: PropertyValue<'contain'>
+	containIntrinsicSize?: PropertyValue<'containIntrinsicSize'>
+	containIntrinsicBlockSize?: PropertyValue<'containIntrinsicBlockSize'>
+	containIntrinsicHeight?: PropertyValue<'containIntrinsicHeight'>
+	containIntrinsicInlineSize?: PropertyValue<'containIntrinsicInlineSize'>
+	containIntrinsicWidth?: PropertyValue<'containIntrinsicWidth'>
+	content?: PropertyValue<'content'>
+	contentVisibility?: PropertyValue<'contentVisibility'>
+	counterIncrement?: PropertyValue<'counterIncrement'>
+	counterReset?: PropertyValue<'counterReset'>
+	counterSet?: PropertyValue<'counterSet'>
+	cursor?: PropertyValue<'cursor'>
+	direction?: PropertyValue<'direction'>
+	display?: PropertyValue<'display'>
+	emptyCells?: PropertyValue<'emptyCells'>
+	filter?: PropertyValue<'filter'>
+	flex?: PropertyValue<'flex'>
+	flexBasis?: PropertyValue<'flexBasis'>
+	flexDirection?: PropertyValue<'flexDirection'>
+	flexFlow?: PropertyValue<'flexFlow'>
+	flexGrow?: PropertyValue<'flexGrow'>
+	flexShrink?: PropertyValue<'flexShrink'>
+	flexWrap?: PropertyValue<'flexWrap'>
+	float?: PropertyValue<'float'>
+	font?: PropertyValue<'font'>
+	fontFamily?: PropertyValue<'fontFamily'>
+	fontFeatureSettings?: PropertyValue<'fontFeatureSettings'>
+	fontKerning?: PropertyValue<'fontKerning'>
+	fontLanguageOverride?: PropertyValue<'fontLanguageOverride'>
+	fontOpticalSizing?: PropertyValue<'fontOpticalSizing'>
+	fontVariationSettings?: PropertyValue<'fontVariationSettings'>
+	fontSize?: PropertyValue<'fontSize'>
+	fontSizeAdjust?: PropertyValue<'fontSizeAdjust'>
+	fontSmooth?: PropertyValue<'fontSmooth'>
+	fontStretch?: PropertyValue<'fontStretch'>
+	fontStyle?: PropertyValue<'fontStyle'>
+	fontSynthesis?: PropertyValue<'fontSynthesis'>
+	fontVariant?: PropertyValue<'fontVariant'>
+	fontVariantAlternates?: PropertyValue<'fontVariantAlternates'>
+	fontVariantCaps?: PropertyValue<'fontVariantCaps'>
+	fontVariantEastAsian?: PropertyValue<'fontVariantEastAsian'>
+	fontVariantLigatures?: PropertyValue<'fontVariantLigatures'>
+	fontVariantNumeric?: PropertyValue<'fontVariantNumeric'>
+	fontVariantPosition?: PropertyValue<'fontVariantPosition'>
+	fontWeight?: PropertyValue<'fontWeight'>
+	forcedColorAdjust?: PropertyValue<'forcedColorAdjust'>
+	gap?: PropertyValue<'gap'>
+	grid?: PropertyValue<'grid'>
+	gridArea?: PropertyValue<'gridArea'>
+	gridAutoColumns?: PropertyValue<'gridAutoColumns'>
+	gridAutoFlow?: PropertyValue<'gridAutoFlow'>
+	gridAutoRows?: PropertyValue<'gridAutoRows'>
+	gridColumn?: PropertyValue<'gridColumn'>
+	gridColumnEnd?: PropertyValue<'gridColumnEnd'>
+	gridColumnGap?: PropertyValue<'gridColumnGap'>
+	gridColumnStart?: PropertyValue<'gridColumnStart'>
+	gridGap?: PropertyValue<'gridGap'>
+	gridRow?: PropertyValue<'gridRow'>
+	gridRowEnd?: PropertyValue<'gridRowEnd'>
+	gridRowGap?: PropertyValue<'gridRowGap'>
+	gridRowStart?: PropertyValue<'gridRowStart'>
+	gridTemplate?: PropertyValue<'gridTemplate'>
+	gridTemplateAreas?: PropertyValue<'gridTemplateAreas'>
+	gridTemplateColumns?: PropertyValue<'gridTemplateColumns'>
+	gridTemplateRows?: PropertyValue<'gridTemplateRows'>
+	hangingPunctuation?: PropertyValue<'hangingPunctuation'>
+	height?: PropertyValue<'height'>
+	hyphenateCharacter?: PropertyValue<'hyphenateCharacter'>
+	hyphenateLimitChars?: PropertyValue<'hyphenateLimitChars'>
+	hyphens?: PropertyValue<'hyphens'>
+	imageOrientation?: PropertyValue<'imageOrientation'>
+	imageRendering?: PropertyValue<'imageRendering'>
+	imageResolution?: PropertyValue<'imageResolution'>
+	imeMode?: PropertyValue<'imeMode'>
+	initialLetter?: PropertyValue<'initialLetter'>
+	initialLetterAlign?: PropertyValue<'initialLetterAlign'>
+	inlineSize?: PropertyValue<'inlineSize'>
+	inputSecurity?: PropertyValue<'inputSecurity'>
+	inset?: PropertyValue<'inset'>
+	insetBlock?: PropertyValue<'insetBlock'>
+	insetBlockEnd?: PropertyValue<'insetBlockEnd'>
+	insetBlockStart?: PropertyValue<'insetBlockStart'>
+	insetInline?: PropertyValue<'insetInline'>
+	insetInlineEnd?: PropertyValue<'insetInlineEnd'>
+	insetInlineStart?: PropertyValue<'insetInlineStart'>
+	isolation?: PropertyValue<'isolation'>
+	justifyContent?: PropertyValue<'justifyContent'>
+	justifyItems?: PropertyValue<'justifyItems'>
+	justifySelf?: PropertyValue<'justifySelf'>
+	justifyTracks?: PropertyValue<'justifyTracks'>
+	left?: PropertyValue<'left'>
+	letterSpacing?: PropertyValue<'letterSpacing'>
+	lineBreak?: PropertyValue<'lineBreak'>
+	lineClamp?: PropertyValue<'lineClamp'>
+	lineHeight?: PropertyValue<'lineHeight'>
+	lineHeightStep?: PropertyValue<'lineHeightStep'>
+	listStyle?: PropertyValue<'listStyle'>
+	listStyleImage?: PropertyValue<'listStyleImage'>
+	listStylePosition?: PropertyValue<'listStylePosition'>
+	listStyleType?: PropertyValue<'listStyleType'>
+	margin?: PropertyValue<'margin'>
+	marginBlock?: PropertyValue<'marginBlock'>
+	marginBlockEnd?: PropertyValue<'marginBlockEnd'>
+	marginBlockStart?: PropertyValue<'marginBlockStart'>
+	marginBottom?: PropertyValue<'marginBottom'>
+	marginInline?: PropertyValue<'marginInline'>
+	marginInlineEnd?: PropertyValue<'marginInlineEnd'>
+	marginInlineStart?: PropertyValue<'marginInlineStart'>
+	marginLeft?: PropertyValue<'marginLeft'>
+	marginRight?: PropertyValue<'marginRight'>
+	marginTop?: PropertyValue<'marginTop'>
+	marginTrim?: PropertyValue<'marginTrim'>
+	mask?: PropertyValue<'mask'>
+	maskBorder?: PropertyValue<'maskBorder'>
+	maskBorderMode?: PropertyValue<'maskBorderMode'>
+	maskBorderOutset?: PropertyValue<'maskBorderOutset'>
+	maskBorderRepeat?: PropertyValue<'maskBorderRepeat'>
+	maskBorderSlice?: PropertyValue<'maskBorderSlice'>
+	maskBorderSource?: PropertyValue<'maskBorderSource'>
+	maskBorderWidth?: PropertyValue<'maskBorderWidth'>
+	maskClip?: PropertyValue<'maskClip'>
+	maskComposite?: PropertyValue<'maskComposite'>
+	maskImage?: PropertyValue<'maskImage'>
+	maskMode?: PropertyValue<'maskMode'>
+	maskOrigin?: PropertyValue<'maskOrigin'>
+	maskPosition?: PropertyValue<'maskPosition'>
+	maskRepeat?: PropertyValue<'maskRepeat'>
+	maskSize?: PropertyValue<'maskSize'>
+	maskType?: PropertyValue<'maskType'>
+	masonryAutoFlow?: PropertyValue<'masonryAutoFlow'>
+	mathDepth?: PropertyValue<'mathDepth'>
+	mathShift?: PropertyValue<'mathShift'>
+	mathStyle?: PropertyValue<'mathStyle'>
+	maxBlockSize?: PropertyValue<'maxBlockSize'>
+	maxHeight?: PropertyValue<'maxHeight'>
+	maxInlineSize?: PropertyValue<'maxInlineSize'>
+	maxLines?: PropertyValue<'maxLines'>
+	maxWidth?: PropertyValue<'maxWidth'>
+	minBlockSize?: PropertyValue<'minBlockSize'>
+	minHeight?: PropertyValue<'minHeight'>
+	minInlineSize?: PropertyValue<'minInlineSize'>
+	minWidth?: PropertyValue<'minWidth'>
+	mixBlendMode?: PropertyValue<'mixBlendMode'>
+	objectFit?: PropertyValue<'objectFit'>
+	objectPosition?: PropertyValue<'objectPosition'>
+	offset?: PropertyValue<'offset'>
+	offsetAnchor?: PropertyValue<'offsetAnchor'>
+	offsetDistance?: PropertyValue<'offsetDistance'>
+	offsetPath?: PropertyValue<'offsetPath'>
+	offsetPosition?: PropertyValue<'offsetPosition'>
+	offsetRotate?: PropertyValue<'offsetRotate'>
+	opacity?: PropertyValue<'opacity'>
+	order?: PropertyValue<'order'>
+	orphans?: PropertyValue<'orphans'>
+	outline?: PropertyValue<'outline'>
+	outlineColor?: PropertyValue<'outlineColor'>
+	outlineOffset?: PropertyValue<'outlineOffset'>
+	outlineStyle?: PropertyValue<'outlineStyle'>
+	outlineWidth?: PropertyValue<'outlineWidth'>
+	overflow?: PropertyValue<'overflow'>
+	overflowAnchor?: PropertyValue<'overflowAnchor'>
+	overflowBlock?: PropertyValue<'overflowBlock'>
+	overflowClipBox?: PropertyValue<'overflowClipBox'>
+	overflowClipMargin?: PropertyValue<'overflowClipMargin'>
+	overflowInline?: PropertyValue<'overflowInline'>
+	overflowWrap?: PropertyValue<'overflowWrap'>
+	overflowX?: PropertyValue<'overflowX'>
+	overflowY?: PropertyValue<'overflowY'>
+	overscrollBehavior?: PropertyValue<'overscrollBehavior'>
+	overscrollBehaviorBlock?: PropertyValue<'overscrollBehaviorBlock'>
+	overscrollBehaviorInline?: PropertyValue<'overscrollBehaviorInline'>
+	overscrollBehaviorX?: PropertyValue<'overscrollBehaviorX'>
+	overscrollBehaviorY?: PropertyValue<'overscrollBehaviorY'>
+	padding?: PropertyValue<'padding'>
+	paddingBlock?: PropertyValue<'paddingBlock'>
+	paddingBlockEnd?: PropertyValue<'paddingBlockEnd'>
+	paddingBlockStart?: PropertyValue<'paddingBlockStart'>
+	paddingBottom?: PropertyValue<'paddingBottom'>
+	paddingInline?: PropertyValue<'paddingInline'>
+	paddingInlineEnd?: PropertyValue<'paddingInlineEnd'>
+	paddingInlineStart?: PropertyValue<'paddingInlineStart'>
+	paddingLeft?: PropertyValue<'paddingLeft'>
+	paddingRight?: PropertyValue<'paddingRight'>
+	paddingTop?: PropertyValue<'paddingTop'>
+	pageBreakAfter?: PropertyValue<'pageBreakAfter'>
+	pageBreakBefore?: PropertyValue<'pageBreakBefore'>
+	pageBreakInside?: PropertyValue<'pageBreakInside'>
+	paintOrder?: PropertyValue<'paintOrder'>
+	perspective?: PropertyValue<'perspective'>
+	perspectiveOrigin?: PropertyValue<'perspectiveOrigin'>
+	placeContent?: PropertyValue<'placeContent'>
+	placeItems?: PropertyValue<'placeItems'>
+	placeSelf?: PropertyValue<'placeSelf'>
+	pointerEvents?: PropertyValue<'pointerEvents'>
+	position?: PropertyValue<'position'>
+	quotes?: PropertyValue<'quotes'>
+	resize?: PropertyValue<'resize'>
+	right?: PropertyValue<'right'>
+	rotate?: PropertyValue<'rotate'>
+	rowGap?: PropertyValue<'rowGap'>
+	rubyAlign?: PropertyValue<'rubyAlign'>
+	rubyMerge?: PropertyValue<'rubyMerge'>
+	rubyPosition?: PropertyValue<'rubyPosition'>
+	scale?: PropertyValue<'scale'>
+	scrollbarColor?: PropertyValue<'scrollbarColor'>
+	scrollbarGutter?: PropertyValue<'scrollbarGutter'>
+	scrollbarWidth?: PropertyValue<'scrollbarWidth'>
+	scrollBehavior?: PropertyValue<'scrollBehavior'>
+	scrollMargin?: PropertyValue<'scrollMargin'>
+	scrollMarginBlock?: PropertyValue<'scrollMarginBlock'>
+	scrollMarginBlockStart?: PropertyValue<'scrollMarginBlockStart'>
+	scrollMarginBlockEnd?: PropertyValue<'scrollMarginBlockEnd'>
+	scrollMarginBottom?: PropertyValue<'scrollMarginBottom'>
+	scrollMarginInline?: PropertyValue<'scrollMarginInline'>
+	scrollMarginInlineStart?: PropertyValue<'scrollMarginInlineStart'>
+	scrollMarginInlineEnd?: PropertyValue<'scrollMarginInlineEnd'>
+	scrollMarginLeft?: PropertyValue<'scrollMarginLeft'>
+	scrollMarginRight?: PropertyValue<'scrollMarginRight'>
+	scrollMarginTop?: PropertyValue<'scrollMarginTop'>
+	scrollPadding?: PropertyValue<'scrollPadding'>
+	scrollPaddingBlock?: PropertyValue<'scrollPaddingBlock'>
+	scrollPaddingBlockStart?: PropertyValue<'scrollPaddingBlockStart'>
+	scrollPaddingBlockEnd?: PropertyValue<'scrollPaddingBlockEnd'>
+	scrollPaddingBottom?: PropertyValue<'scrollPaddingBottom'>
+	scrollPaddingInline?: PropertyValue<'scrollPaddingInline'>
+	scrollPaddingInlineStart?: PropertyValue<'scrollPaddingInlineStart'>
+	scrollPaddingInlineEnd?: PropertyValue<'scrollPaddingInlineEnd'>
+	scrollPaddingLeft?: PropertyValue<'scrollPaddingLeft'>
+	scrollPaddingRight?: PropertyValue<'scrollPaddingRight'>
+	scrollPaddingTop?: PropertyValue<'scrollPaddingTop'>
+	scrollSnapAlign?: PropertyValue<'scrollSnapAlign'>
+	scrollSnapCoordinate?: PropertyValue<'scrollSnapCoordinate'>
+	scrollSnapDestination?: PropertyValue<'scrollSnapDestination'>
+	scrollSnapPointsX?: PropertyValue<'scrollSnapPointsX'>
+	scrollSnapPointsY?: PropertyValue<'scrollSnapPointsY'>
+	scrollSnapStop?: PropertyValue<'scrollSnapStop'>
+	scrollSnapType?: PropertyValue<'scrollSnapType'>
+	scrollSnapTypeX?: PropertyValue<'scrollSnapTypeX'>
+	scrollSnapTypeY?: PropertyValue<'scrollSnapTypeY'>
+	scrollTimeline?: PropertyValue<'scrollTimeline'>
+	scrollTimelineAxis?: PropertyValue<'scrollTimelineAxis'>
+	scrollTimelineName?: PropertyValue<'scrollTimelineName'>
+	shapeImageThreshold?: PropertyValue<'shapeImageThreshold'>
+	shapeMargin?: PropertyValue<'shapeMargin'>
+	shapeOutside?: PropertyValue<'shapeOutside'>
+	tabSize?: PropertyValue<'tabSize'>
+	tableLayout?: PropertyValue<'tableLayout'>
+	textAlign?: PropertyValue<'textAlign'>
+	textAlignLast?: PropertyValue<'textAlignLast'>
+	textCombineUpright?: PropertyValue<'textCombineUpright'>
+	textDecoration?: PropertyValue<'textDecoration'>
+	textDecorationColor?: PropertyValue<'textDecorationColor'>
+	textDecorationLine?: PropertyValue<'textDecorationLine'>
+	textDecorationSkip?: PropertyValue<'textDecorationSkip'>
+	textDecorationSkipInk?: PropertyValue<'textDecorationSkipInk'>
+	textDecorationStyle?: PropertyValue<'textDecorationStyle'>
+	textDecorationThickness?: PropertyValue<'textDecorationThickness'>
+	textEmphasis?: PropertyValue<'textEmphasis'>
+	textEmphasisColor?: PropertyValue<'textEmphasisColor'>
+	textEmphasisPosition?: PropertyValue<'textEmphasisPosition'>
+	textEmphasisStyle?: PropertyValue<'textEmphasisStyle'>
+	textIndent?: PropertyValue<'textIndent'>
+	textJustify?: PropertyValue<'textJustify'>
+	textOrientation?: PropertyValue<'textOrientation'>
+	textOverflow?: PropertyValue<'textOverflow'>
+	textRendering?: PropertyValue<'textRendering'>
+	textShadow?: PropertyValue<'textShadow'>
+	textSizeAdjust?: PropertyValue<'textSizeAdjust'>
+	textTransform?: PropertyValue<'textTransform'>
+	textUnderlineOffset?: PropertyValue<'textUnderlineOffset'>
+	textUnderlinePosition?: PropertyValue<'textUnderlinePosition'>
+	top?: PropertyValue<'top'>
+	touchAction?: PropertyValue<'touchAction'>
+	transform?: PropertyValue<'transform'>
+	transformBox?: PropertyValue<'transformBox'>
+	transformOrigin?: PropertyValue<'transformOrigin'>
+	transformStyle?: PropertyValue<'transformStyle'>
+	transition?: PropertyValue<'transition'>
+	transitionDelay?: PropertyValue<'transitionDelay'>
+	transitionDuration?: PropertyValue<'transitionDuration'>
+	transitionProperty?: PropertyValue<'transitionProperty'>
+	transitionTimingFunction?: PropertyValue<'transitionTimingFunction'>
+	translate?: PropertyValue<'translate'>
+	unicodeBidi?: PropertyValue<'unicodeBidi'>
+	userSelect?: PropertyValue<'userSelect'>
+	verticalAlign?: PropertyValue<'verticalAlign'>
+	visibility?: PropertyValue<'visibility'>
+	whiteSpace?: PropertyValue<'whiteSpace'>
+	widows?: PropertyValue<'widows'>
+	width?: PropertyValue<'width'>
+	willChange?: PropertyValue<'willChange'>
+	wordBreak?: PropertyValue<'wordBreak'>
+	wordSpacing?: PropertyValue<'wordSpacing'>
+	wordWrap?: PropertyValue<'wordWrap'>
+	writingMode?: PropertyValue<'writingMode'>
+	zIndex?: PropertyValue<'zIndex'>
+	zoom?: PropertyValue<'zoom'>
+	pos?: PropertyValue<'pos'>
+	insetEnd?: PropertyValue<'insetEnd'>
+	end?: PropertyValue<'end'>
+	insetStart?: PropertyValue<'insetStart'>
+	start?: PropertyValue<'start'>
+	flexDir?: PropertyValue<'flexDir'>
+	p?: PropertyValue<'p'>
+	pl?: PropertyValue<'pl'>
+	pr?: PropertyValue<'pr'>
+	pt?: PropertyValue<'pt'>
+	pb?: PropertyValue<'pb'>
+	py?: PropertyValue<'py'>
+	paddingY?: PropertyValue<'paddingY'>
+	paddingX?: PropertyValue<'paddingX'>
+	px?: PropertyValue<'px'>
+	pe?: PropertyValue<'pe'>
+	paddingEnd?: PropertyValue<'paddingEnd'>
+	ps?: PropertyValue<'ps'>
+	paddingStart?: PropertyValue<'paddingStart'>
+	ml?: PropertyValue<'ml'>
+	mr?: PropertyValue<'mr'>
+	mt?: PropertyValue<'mt'>
+	mb?: PropertyValue<'mb'>
+	m?: PropertyValue<'m'>
+	my?: PropertyValue<'my'>
+	marginY?: PropertyValue<'marginY'>
+	mx?: PropertyValue<'mx'>
+	marginX?: PropertyValue<'marginX'>
+	me?: PropertyValue<'me'>
+	marginEnd?: PropertyValue<'marginEnd'>
+	ms?: PropertyValue<'ms'>
+	marginStart?: PropertyValue<'marginStart'>
+	ringWidth?: PropertyValue<'ringWidth'>
+	ringColor?: PropertyValue<'ringColor'>
+	ring?: PropertyValue<'ring'>
+	ringOffset?: PropertyValue<'ringOffset'>
+	w?: PropertyValue<'w'>
+	minW?: PropertyValue<'minW'>
+	maxW?: PropertyValue<'maxW'>
+	h?: PropertyValue<'h'>
+	minH?: PropertyValue<'minH'>
+	maxH?: PropertyValue<'maxH'>
+	bgPosition?: PropertyValue<'bgPosition'>
+	bgPositionX?: PropertyValue<'bgPositionX'>
+	bgPositionY?: PropertyValue<'bgPositionY'>
+	bgAttachment?: PropertyValue<'bgAttachment'>
+	bgClip?: PropertyValue<'bgClip'>
+	bg?: PropertyValue<'bg'>
+	bgColor?: PropertyValue<'bgColor'>
+	bgOrigin?: PropertyValue<'bgOrigin'>
+	bgImage?: PropertyValue<'bgImage'>
+	bgRepeat?: PropertyValue<'bgRepeat'>
+	bgBlendMode?: PropertyValue<'bgBlendMode'>
+	bgSize?: PropertyValue<'bgSize'>
+	bgGradient?: PropertyValue<'bgGradient'>
+	rounded?: PropertyValue<'rounded'>
+	roundedTopLeft?: PropertyValue<'roundedTopLeft'>
+	roundedTopRight?: PropertyValue<'roundedTopRight'>
+	roundedBottomRight?: PropertyValue<'roundedBottomRight'>
+	roundedBottomLeft?: PropertyValue<'roundedBottomLeft'>
+	roundedTop?: PropertyValue<'roundedTop'>
+	roundedRight?: PropertyValue<'roundedRight'>
+	roundedBottom?: PropertyValue<'roundedBottom'>
+	roundedLeft?: PropertyValue<'roundedLeft'>
+	roundedStartStart?: PropertyValue<'roundedStartStart'>
+	roundedStartEnd?: PropertyValue<'roundedStartEnd'>
+	roundedStart?: PropertyValue<'roundedStart'>
+	roundedEndStart?: PropertyValue<'roundedEndStart'>
+	roundedEndEnd?: PropertyValue<'roundedEndEnd'>
+	roundedEnd?: PropertyValue<'roundedEnd'>
+	borderX?: PropertyValue<'borderX'>
+	borderXWidth?: PropertyValue<'borderXWidth'>
+	borderXColor?: PropertyValue<'borderXColor'>
+	borderY?: PropertyValue<'borderY'>
+	borderYWidth?: PropertyValue<'borderYWidth'>
+	borderYColor?: PropertyValue<'borderYColor'>
+	borderStart?: PropertyValue<'borderStart'>
+	borderStartColor?: PropertyValue<'borderStartColor'>
+	borderEnd?: PropertyValue<'borderEnd'>
+	borderEndColor?: PropertyValue<'borderEndColor'>
+	shadow?: PropertyValue<'shadow'>
+	shadowColor?: PropertyValue<'shadowColor'>
+	x?: PropertyValue<'x'>
+	y?: PropertyValue<'y'>
+	insetX?: PropertyValue<'insetX'>
+	insetY?: PropertyValue<'insetY'>
+	hideFrom?: PropertyValue<'hideFrom'>
+	hideBelow?: PropertyValue<'hideBelow'>
+	divideX?: PropertyValue<'divideX'>
+	divideY?: PropertyValue<'divideY'>
+	divideColor?: PropertyValue<'divideColor'>
+	divideStyle?: PropertyValue<'divideStyle'>
+	fontSmoothing?: PropertyValue<'fontSmoothing'>
+	textWrap?: PropertyValue<'textWrap'>
+	truncate?: PropertyValue<'truncate'>
+	backgroundGradient?: PropertyValue<'backgroundGradient'>
+	textGradient?: PropertyValue<'textGradient'>
+	gradientFrom?: PropertyValue<'gradientFrom'>
+	gradientTo?: PropertyValue<'gradientTo'>
+	gradientVia?: PropertyValue<'gradientVia'>
+	borderTopRadius?: PropertyValue<'borderTopRadius'>
+	borderRightRadius?: PropertyValue<'borderRightRadius'>
+	borderBottomRadius?: PropertyValue<'borderBottomRadius'>
+	borderLeftRadius?: PropertyValue<'borderLeftRadius'>
+	borderStartRadius?: PropertyValue<'borderStartRadius'>
+	borderEndRadius?: PropertyValue<'borderEndRadius'>
+	boxShadowColor?: PropertyValue<'boxShadowColor'>
+	brightness?: PropertyValue<'brightness'>
+	contrast?: PropertyValue<'contrast'>
+	grayscale?: PropertyValue<'grayscale'>
+	hueRotate?: PropertyValue<'hueRotate'>
+	invert?: PropertyValue<'invert'>
+	saturate?: PropertyValue<'saturate'>
+	sepia?: PropertyValue<'sepia'>
+	dropShadow?: PropertyValue<'dropShadow'>
+	blur?: PropertyValue<'blur'>
+	backdropBlur?: PropertyValue<'backdropBlur'>
+	backdropBrightness?: PropertyValue<'backdropBrightness'>
+	backdropContrast?: PropertyValue<'backdropContrast'>
+	backdropGrayscale?: PropertyValue<'backdropGrayscale'>
+	backdropHueRotate?: PropertyValue<'backdropHueRotate'>
+	backdropInvert?: PropertyValue<'backdropInvert'>
+	backdropOpacity?: PropertyValue<'backdropOpacity'>
+	backdropSaturate?: PropertyValue<'backdropSaturate'>
+	backdropSepia?: PropertyValue<'backdropSepia'>
+	borderSpacingX?: PropertyValue<'borderSpacingX'>
+	borderSpacingY?: PropertyValue<'borderSpacingY'>
+	scaleX?: PropertyValue<'scaleX'>
+	scaleY?: PropertyValue<'scaleY'>
+	translateX?: PropertyValue<'translateX'>
+	translateY?: PropertyValue<'translateY'>
+	scrollbar?: PropertyValue<'scrollbar'>
+	scrollMarginX?: PropertyValue<'scrollMarginX'>
+	scrollMarginY?: PropertyValue<'scrollMarginY'>
+	scrollPaddingX?: PropertyValue<'scrollPaddingX'>
+	scrollPaddingY?: PropertyValue<'scrollPaddingY'>
+	scrollSnapStrictness?: PropertyValue<'scrollSnapStrictness'>
+	scrollSnapMargin?: PropertyValue<'scrollSnapMargin'>
+	scrollSnapMarginTop?: PropertyValue<'scrollSnapMarginTop'>
+	scrollSnapMarginBottom?: PropertyValue<'scrollSnapMarginBottom'>
+	scrollSnapMarginLeft?: PropertyValue<'scrollSnapMarginLeft'>
+	scrollSnapMarginRight?: PropertyValue<'scrollSnapMarginRight'>
+	fill?: PropertyValue<'fill'>
+	stroke?: PropertyValue<'stroke'>
+	srOnly?: PropertyValue<'srOnly'>
+	debug?: PropertyValue<'debug'>
+	colorPalette?: PropertyValue<'colorPalette'>
+	textStyle?: PropertyValue<'textStyle'>
+}

styled-system/types/system-types.d.ts

@@ -0,0 +1,76 @@
+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 & {}
+
+/* -----------------------------------------------------------------------------
+ * Native css properties
+ * -----------------------------------------------------------------------------*/
+
+export type CssProperty = keyof PropertiesFallback
+
+export type CssProperties = PropertiesFallback<String | Number> & CssVarProperties
+
+export type CssKeyframes = {
+  [name: string]: {
+    [time: string]: CssProperties
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Conditional css properties
+ * -----------------------------------------------------------------------------*/
+
+type MinimalNested<P> = {
+  [K in keyof Conditions]?: Nested<P>
+}
+
+type GenericProperties = {
+  [key: string]: ConditionalValue<String | Number | boolean>
+}
+
+/* -----------------------------------------------------------------------------
+ * Native css props
+ * -----------------------------------------------------------------------------*/
+
+export type NestedCssProperties = Nested<CssProperties>
+
+export type SystemStyleObject = Nested<SystemProperties & CssVarProperties>
+
+export type GlobalStyleObject = {
+  [selector: string]: SystemStyleObject
+}
+
+export type CompositionStyleObject<Property extends string> = Nested<{
+  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown
+}>
+
+/* -----------------------------------------------------------------------------
+ * Jsx style props
+ * -----------------------------------------------------------------------------*/
+
+export type JsxStyleProps = SystemProperties &
+  MinimalNested<SystemStyleObject> & {
+    css?: SystemStyleObject
+  }
+
+type Assign<T, U> = Omit<T, keyof U> & U
+
+export type PatchedHTMLProps = {
+  htmlSize?: string | number
+  htmlWidth?: string | number
+  htmlHeight?: string | number
+  htmlTranslate?: 'yes' | 'no' | undefined
+  htmlContent?: string
+}
+
+export type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'
+
+type WithHTMLProps<T> = Omit<T, OmittedHTMLProps> & PatchedHTMLProps
+
+export type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<
+  WithHTMLProps<T>,
+  P
+>

tailwind.config.cjs

@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      fontFamily: {
-        poppins: ["Poppins", "sans-serif"],
-      },
-    },
-  },
-  plugins: [],
-};