install sharp for images

package.json

@@ -8,8 +8,7 @@
     "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",
@@ -44,7 +43,6 @@
     "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

@@ -1,28 +0,0 @@
-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,5 +1,6 @@
 module.exports = {
   plugins: {
-    '@pandacss/dev/postcss': {},
+    tailwindcss: {},
+    autoprefixer: {},
   },
-}
+};

src/components/Footer.tsx

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

src/components/Header.tsx

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

src/components/Paragraph.tsx

@@ -1,7 +0,0 @@
-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,6 +8,8 @@ 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;
@@ -56,20 +58,7 @@ const EditorBlock = ({ data, onChange, holder, autofocus }: Props) => {
     };
   }, []);
 
-  return (
+  return <div id={holder} />;
-    <>
-      <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,5 +33,6 @@ export default function Layout({ children, title }: { children: React.ReactNode;
       <main>{children}</main>
       <Footer />
     </div>
-  )
+  );
 }
+

src/pages/index.tsx

@@ -2,8 +2,6 @@ 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>}) {
   return (
@@ -14,53 +12,32 @@ function Home({ data }: { data: PagesRecord<Content> }) {
         width={1920}
         height={500}
       />
-      <div className={css({
+      <div className="container mx-auto p-8">
-        mx: "auto",
+        <div className="mb-4 flex gap-10">
-        p: 8,
+          <div className="w-1/2">
-        maxWidth: 1200,
+            <h1 className="font-poppins text-5xl">Notre club photo</h1>
-      })}>
-        <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={css({ w: "1/2" })}></div>
+          <div className="w-1/2"></div>
         </div>
-        <div className={css({
+        <div className="flex gap-10">
-          display: "flex",
+          <div className="flex w-1/2 flex-col gap-8">
-          gap: 10,
+            <p className="text-xl">
-        })}>
-          <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.
-            </Paragraph>
+            </p>
-            <Paragraph>
+            <p className="text-xl">
               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.
-            </Paragraph>
+            </p>
-            <Paragraph>
+            <p className="text-xl">
               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.
-            </Paragraph>
+            </p>
             <Image
               src={"/forum-eaee.png"}
               alt="Forum photo club haute lozère"
@@ -68,40 +45,35 @@ function Home({ data }: { data: PagesRecord<Content> }) {
               height={320}
             />
           </div>
-          <div className={css({
+          <div className="flex w-1/2 flex-col gap-6">
-            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}
             />
-            <Paragraph>
+            <p className="text-xl">
               Ainsi, des sorties à thème sont programmées avec des séances
               d’analyse des photos réalisées.
-            </Paragraph>
+            </p>
-            <Paragraph>
+            <p className="text-xl">
               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…).
-            </Paragraph>
+            </p>
-            <Paragraph>
+            <p className="text-xl">
               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.
-            </Paragraph>
+            </p>
-            <Paragraph>
+            <p className="text-xl">
               N’hésitez à contacter le Président : Bernard Sapin au
               <a href="tel:0681818181" className="font-bold">
                 {" "}
                 06 81 81 81 81
               </a>
-            </Paragraph>
+            </p>
           </div>
         </div>
       </div>
@@ -125,7 +97,7 @@ export async function getServerSideProps() {
 
   return {
     props: {
-      data: JSON.parse(JSON.stringify(data.content)),
+      data: data,
     },
   }
 }

src/pages/le-club.tsx

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

src/styles/editor.css

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

src/styles/globals.css

@@ -1,15 +1,14 @@
 @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');
 
-@layer reset, base, tokens, recipes, utilities;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-::root {
+@layer base {
-  --font-poppins: 'Poppins', sans-serif;
+  html {
-  --font-lato: 'Lato', sans-serif;
+    font-family: 'Lato', system-ui, sans-serif;
   }
-
-html, p {
-  font-family: var(--font-lato), system-ui, sans-serif;
 }
 
 h1 {

styled-system/css/conditions.mjs

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

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

styled-system/css/css.mjs

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

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

styled-system/css/cva.mjs

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

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

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

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

styled-system/css/index.mjs

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

styled-system/global.css

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

@@ -1,259 +0,0 @@
-// 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

styled-system/types/index.d.ts

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

styled-system/types/parts.d.ts

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

styled-system/types/pattern.d.ts

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

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

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

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

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

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

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