@pandacss/studio 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -32,19 +32,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.3.9",
-    "@pandacss/types": "0.3.1",
-    "@pandacss/config": "0.3.1",
-    "@pandacss/shared": "0.3.1",
-    "@pandacss/token-dictionary": "0.3.1",
-    "@pandacss/logger": "0.3.1",
-    "@pandacss/node": "0.3.1"
+    "@pandacss/types": "0.3.2",
+    "@pandacss/config": "0.3.2",
+    "@pandacss/shared": "0.3.2",
+    "@pandacss/token-dictionary": "0.3.2",
+    "@pandacss/logger": "0.3.2",
+    "@pandacss/node": "0.3.2"
   },
   "devDependencies": {
     "@types/react": "18.2.12",
     "@types/react-dom": "18.2.5",
     "@vitejs/plugin-react": "4.0.0",
     "execa": "7.1.1",
-    "@pandacss/dev": "0.3.1"
+    "@pandacss/dev": "0.3.2"
   },
   "scripts": {
     "codegen": "panda",

package/src/components/analyzer/data-combobox.tsx

@@ -11,8 +11,9 @@ import {
 } from '@ark-ui/react'
 import { useEffect, useState } from 'react'
 import { css } from '../../../styled-system/css'
-import { panda } from '../../../styled-system/jsx'
-import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '../icons'
+import { Flex, panda } from '../../../styled-system/jsx'
+import { ChevronDownIcon, XMarkIcon } from '../icons'
+import { inputRecipe } from '../input'
 
 export type DataComboboxOption = {
   value: string
@@ -45,28 +46,17 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
         return (
           <>
             <ComboboxControl>
-              <panda.div display="flex" flexDirection="column">
+              <panda.div display="flex" flexDirection="column" gap="2">
                 {label && (
                   <ComboboxLabel>
                     <panda.span fontWeight="bold">{label}</panda.span>
                   </ComboboxLabel>
                 )}
-                <panda.div
-                  display="flex"
-                  rounded="sm"
-                  border="solid 1px"
-                  borderColor={{ base: 'border', _focusWithin: { base: 'yellow.200', _dark: 'yellow.300' } }}
-                >
+                <panda.div display="flex" position="relative" isolation="isolate">
                   <ComboboxInput
                     defaultValue={props.defaultValue}
                     placeholder={props.placeholder ?? 'Search...'}
-                    className={css({
-                      width: 'full',
-                      p: 2,
-                      color: 'text',
-                      bg: 'transparent',
-                      _focus: { outline: 'none' },
-                    })}
+                    className={inputRecipe()}
                     onChange={(e) => {
                       const value = e.target.value
                       if (!value) {
@@ -79,31 +69,47 @@ export const DataCombobox = ({ options: allOptions, label, ...props }: DataCombo
                       setOptions(filterFn(value))
                     }}
                   />
-                  {state.selectedValue && (
-                    <panda.span
-                      display="flex"
-                      px="2"
-                      cursor="pointer"
-                      userSelect="none"
-                      onClick={() => state.clearValue()}
-                      alignItems="center"
-                    >
-                      <XMarkIcon />
-                    </panda.span>
-                  )}
-                  <ComboboxTrigger>
-                    <panda.span
-                      ml="auto"
-                      p="2"
-                      display="flex"
-                      cursor="pointer"
-                      borderLeft="solid 1px"
-                      borderColor="border"
-                      color="text"
-                    >
-                      {state.isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                    </panda.span>
-                  </ComboboxTrigger>
+                  <Flex
+                    top="0px"
+                    right="0px"
+                    align="center"
+                    justify="center"
+                    position="absolute"
+                    zIndex="2"
+                    height="full"
+                  >
+                    {state.selectedValue && (
+                      <panda.span
+                        display="flex"
+                        px="2"
+                        cursor="pointer"
+                        userSelect="none"
+                        onClick={() => state.clearValue()}
+                        alignItems="center"
+                      >
+                        <XMarkIcon />
+                      </panda.span>
+                    )}
+                    <ComboboxTrigger>
+                      <panda.span
+                        ml="auto"
+                        p="2"
+                        display="flex"
+                        cursor="pointer"
+                        borderLeft="solid 1px"
+                        borderColor="border"
+                        color="text"
+                      >
+                        <panda.span
+                          data-expanded={state.isOpen ? '' : undefined}
+                          transform={{ _expanded: 'rotate(180deg)' }}
+                          transition="all .2s ease"
+                        >
+                          <ChevronDownIcon />
+                        </panda.span>
+                      </panda.span>
+                    </ComboboxTrigger>
+                  </Flex>
                 </panda.div>
               </panda.div>
             </ComboboxControl>

package/src/components/analyzer/data-table.tsx

@@ -9,8 +9,7 @@ export function DataTable<T>({ list, columns }: { list: T[]; columns: ReadonlyAr
   return (
     <panda.div>
       <Grid
-        style={{ gridTemplateColumns: `80px repeat(auto-fit, minmax(30px, 1fr))` }}
-        // gridTemplateColumns="repeat(auto-fit, minmax(30px, 1fr))"
+        gridTemplateColumns="80px repeat(auto-fit, minmax(30px, 1fr))"
         w="full"
         fontWeight="bold"
         fontSize="lg"
@@ -23,15 +22,12 @@ export function DataTable<T>({ list, columns }: { list: T[]; columns: ReadonlyAr
       <panda.div className={flex({ direction: 'column', gap: '2' })}>
         {list.map((item, index) => {
           return (
-            <Grid
-              style={{ gridTemplateColumns: `80px repeat(auto-fit, minmax(30px, 1fr))` }}
-              // gridTemplateColumns="repeat(auto-fit, minmax(30px, 1fr))"
-              w="full"
-              key={index}
-            >
+            <Grid gridTemplateColumns="80px repeat(auto-fit, minmax(30px, 1fr))" w="full" key={index}>
               {columns.map((column) => {
                 return (
-                  <panda.div key={column.accessor}>{column.cell?.(item) ?? (item as any)[column.accessor]}</panda.div>
+                  <panda.div key={column.accessor} wordBreak="break-word">
+                    {column.cell?.(item) ?? (item as any)[column.accessor]}
+                  </panda.div>
                 )
               })}
             </Grid>

package/src/components/input.tsx

@@ -1,7 +1,7 @@
 import { cva } from '../../styled-system/css'
 import { panda } from '../../styled-system/jsx'
 
-const recipe = cva({
+export const inputRecipe = cva({
   base: {
     bg: 'transparent',
     width: 'full',
@@ -22,6 +22,6 @@ const recipe = cva({
   variants: {},
 })
 
-export const Input = panda('input', recipe)
+export const Input = panda('input', inputRecipe)
 
-export const Textarea = panda('textarea', recipe)
+export const Textarea = panda('textarea', inputRecipe)

package/src/layouts/Sidebar.astro

@@ -24,8 +24,8 @@ const { title } = Astro.props
     <SideNav />
   </Stack>
 
-  <Container width="full">
-    <panda.div overflow="auto" px="4" pt="14" pb="8">
+  <Container width="full" overflow="auto">
+    <panda.div px="4" pt="14" pb="8">
       <panda.h1 fontSize="3xl" fontWeight="semibold" mb="8" letterSpacing="tight">
         {title}
       </panda.h1>

package/styled-system/chunks/src__components__analyzer__data-combobox.css

@@ -3,21 +3,6 @@
     margin: var(--spacing-4);
   }
 
-  .w_full {
-    width: var(--sizes-full);
-  }
-
-  .bg_transparent {
-    background: var(--colors-transparent);
-  }
-
-  .focus\:ring_none {
-    &:where(:focus, [data-focus]) {
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-    }
-  }
-
   .max-h_300px {
     max-height: 300px;
   }
@@ -64,27 +49,16 @@
     flex-direction: column;
   }
 
-  .rounded_sm {
-    border-radius: var(--radii-sm);
+  .gap_2 {
+    gap: var(--spacing-2);
   }
 
-  .border_solid_1px {
-    border: solid 1px;
+  .pos_relative {
+    position: relative;
   }
 
-  .focusWithin\:border_yellow\.200 {
-    &:focus-within {
-      border-color: var(--colors-yellow-200);
-    }
-  }
-
-  .focusWithin\:dark\:border_yellow\.300 {
-    &:focus-within {
-      &.dark,
-      .dark & {
-        border-color: var(--colors-yellow-300);
-      }
-    }
+  .isolation_isolate {
+    isolation: isolate;
   }
 
   .font_bold {
@@ -99,10 +73,6 @@
     user-select: none;
   }
 
-  .items_center {
-    align-items: center;
-  }
-
   .ml_auto {
     margin-left: auto;
   }
@@ -111,10 +81,6 @@
     padding: var(--spacing-2);
   }
 
-  .d_flex {
-    display: flex;
-  }
-
   .cursor_pointer {
     cursor: pointer;
   }
@@ -130,4 +96,46 @@
   .text_text {
     color: var(--colors-text);
   }
+
+  .expanded\:transform_rotate\(180deg\) {
+    &:where([aria-expanded='true'], [data-expanded]) {
+      transform: rotate(180deg);
+    }
+  }
+
+  .transition_all_\.2s_ease {
+    transition: all 0.2s ease;
+  }
+
+  .d_flex {
+    display: flex;
+  }
+
+  .items_center {
+    align-items: center;
+  }
+
+  .justify_center {
+    justify-content: center;
+  }
+
+  .top_0px {
+    top: 0px;
+  }
+
+  .right_0px {
+    right: 0px;
+  }
+
+  .pos_absolute {
+    position: absolute;
+  }
+
+  .z_2 {
+    z-index: 2;
+  }
+
+  .h_full {
+    height: var(--sizes-full);
+  }
 }

package/styled-system/chunks/src__components__analyzer__data-table.css

@@ -1,4 +1,8 @@
 @layer utilities {
+  .break_break-word {
+    word-break: break-word;
+  }
+
   .font_bold {
     font-weight: var(--font-weights-bold);
   }
@@ -15,6 +19,10 @@
     display: grid;
   }
 
+  .grid-cols_80px_repeat\(auto-fit\,_minmax\(30px\,_1fr\)\) {
+    grid-template-columns: 80px repeat(auto-fit, minmax(30px, 1fr));
+  }
+
   .gap_10px {
     gap: 10px;
   }

package/styled-system/chunks/src__layouts__Sidebar.css

@@ -67,10 +67,6 @@
     min-width: var(--sizes-60);
   }
 
-  .overflow_auto {
-    overflow: auto;
-  }
-
   .px_12 {
     padding-inline: var(--spacing-12);
   }
@@ -99,6 +95,10 @@
     width: var(--sizes-full);
   }
 
+  .overflow_auto {
+    overflow: auto;
+  }
+
   .md\:px_6 {
     @media screen and (min-width: 768px) {
       padding-inline: var(--spacing-6);

package/styled-system/css/css.d.ts

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

package/styled-system/css/cva.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { RecipeCreatorFn } from '../types/recipe'
 
 export declare const cva: RecipeCreatorFn

package/styled-system/css/cx.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 type Argument = string | boolean | null | undefined
 
 /** Conditionally join classNames into a single string */

package/styled-system/css/index.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export * from './css'
 export * from './cx'
 export * from './cva'

package/styled-system/jsx/aspect-ratio.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { AspectRatioProperties } from '../patterns/aspect-ratio'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/box.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { BoxProperties } from '../patterns/box'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/center.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { CenterProperties } from '../patterns/center'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/circle.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { CircleProperties } from '../patterns/circle'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/container.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { ContainerProperties } from '../patterns/container'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/divider.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { DividerProperties } from '../patterns/divider'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/factory.d.ts

@@ -1,2 +1,3 @@
+/* eslint-disable */
 import { Panda } from '../types/jsx'
 export declare const panda: Panda

package/styled-system/jsx/flex.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { FlexProperties } from '../patterns/flex'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/float.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { FloatProperties } from '../patterns/float'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/grid-item.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { GridItemProperties } from '../patterns/grid-item'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/grid.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { GridProperties } from '../patterns/grid'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/hstack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { HstackProperties } from '../patterns/hstack'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/index.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export * from './factory'
 export * from './box'
 export * from './flex'

package/styled-system/jsx/link-box.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { LinkBoxProperties } from '../patterns/link-box'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/link-overlay.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { LinkOverlayProperties } from '../patterns/link-overlay'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/spacer.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { SpacerProperties } from '../patterns/spacer'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/square.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { SquareProperties } from '../patterns/square'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/stack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { StackProperties } from '../patterns/stack'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/styled-link.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { StyledLinkProperties } from '../patterns/styled-link'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/vstack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { VstackProperties } from '../patterns/vstack'
 import type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/wrap.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { FunctionComponent } from 'react'
 import type { WrapProperties } from '../patterns/wrap'
 import type { HTMLPandaProps } from '../types/jsx'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/center.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/circle.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/container.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/divider.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/flex.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/float.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/hstack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/index.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export * from './box'
 export * from './flex'
 export * from './stack'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/spacer.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/square.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/stack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/vstack.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/patterns/wrap.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject, ConditionalValue } from '../types'
 import type { PropertyValue } from '../types/prop-type'
 import type { Properties } from '../types/csstype'

package/styled-system/styles.css

@@ -39,14 +39,46 @@
     background: var(--colors-border);
   }
 
-  .border_solid_1px {
-    border: solid 1px;
+  .isolation_isolate {
+    isolation: isolate;
   }
 
   .border-l_solid_1px {
     border-left: solid 1px;
   }
 
+  .expanded\:transform_rotate\(180deg\):where([aria-expanded='true'], [data-expanded]) {
+    transform: rotate(180deg);
+  }
+
+  .transition_all_\.2s_ease {
+    transition: all 0.2s ease;
+  }
+
+  .top_0px {
+    top: 0px;
+  }
+
+  .right_0px {
+    right: 0px;
+  }
+
+  .pos_absolute {
+    position: absolute;
+  }
+
+  .z_2 {
+    z-index: 2;
+  }
+
+  .break_break-word {
+    word-break: break-word;
+  }
+
+  .grid-cols_80px_repeat\(auto-fit\,_minmax\(30px\,_1fr\)\) {
+    grid-template-columns: 80px repeat(auto-fit, minmax(30px, 1fr));
+  }
+
   .max-w_14px {
     max-width: 14px;
   }
@@ -880,10 +912,6 @@
     min-width: var(--sizes-60);
   }
 
-  .overflow_auto {
-    overflow: auto;
-  }
-
   .px_12 {
     padding-inline: var(--spacing-12);
   }
@@ -912,13 +940,8 @@
     width: var(--sizes-full);
   }
 
-  .focusWithin\:border_yellow\.200:focus-within {
-    border-color: var(--colors-yellow-200);
-  }
-
-  .focusWithin\:dark\:border_yellow\.300:focus-within.dark,
-  .dark .focusWithin\:dark\:border_yellow\.300:focus-within {
-    border-color: var(--colors-yellow-300);
+  .overflow_auto {
+    overflow: auto;
   }
 
   .focusWithin\:outline-style_solid:focus-within {
@@ -937,11 +960,6 @@
     outline-color: var(--colors-neutral-400);
   }
 
-  .focus\:ring_none:where(:focus, [data-focus]) {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
   .hover\:bg_gray\.100:where(:hover, [data-hover]) {
     background-color: var(--colors-gray-100);
   }

package/styled-system/tokens/index.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { Token } from './tokens'
 
 export declare const token: {

package/styled-system/tokens/tokens.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export type Token = "easings.default" | "easings.linear" | "easings.in" | "easings.out" | "easings.in-out" | "durations.fastest" | "durations.faster" | "durations.fast" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.2xl" | "radii.3xl" | "radii.full" | "fontWeights.thin" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.normal" | "fontWeights.medium" | "fontWeights.semibold" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.black" | "lineHeights.none" | "lineHeights.tight" | "lineHeights.snug" | "lineHeights.normal" | "lineHeights.relaxed" | "lineHeights.loose" | "fonts.sans" | "fonts.serif" | "fonts.mono" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "fontSizes.2xs" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontSizes.3xl" | "fontSizes.4xl" | "fontSizes.5xl" | "fontSizes.6xl" | "fontSizes.7xl" | "fontSizes.8xl" | "fontSizes.9xl" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.xl" | "shadows.2xl" | "shadows.inner" | "blurs.sm" | "blurs.base" | "blurs.md" | "blurs.lg" | "blurs.xl" | "blurs.2xl" | "blurs.3xl" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.9" | "spacing.10" | "spacing.11" | "spacing.12" | "spacing.14" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.28" | "spacing.32" | "spacing.36" | "spacing.40" | "spacing.44" | "spacing.48" | "spacing.52" | "spacing.56" | "spacing.60" | "spacing.64" | "spacing.72" | "spacing.80" | "spacing.96" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "spacing.3.5" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.14" | "sizes.16" | "sizes.20" | "sizes.24" | "sizes.28" | "sizes.32" | "sizes.36" | "sizes.40" | "sizes.44" | "sizes.48" | "sizes.52" | "sizes.56" | "sizes.60" | "sizes.64" | "sizes.72" | "sizes.80" | "sizes.96" | "sizes.0.5" | "sizes.1.5" | "sizes.2.5" | "sizes.3.5" | "sizes.xs" | "sizes.sm" | "sizes.md" | "sizes.lg" | "sizes.xl" | "sizes.2xl" | "sizes.3xl" | "sizes.4xl" | "sizes.5xl" | "sizes.6xl" | "sizes.7xl" | "sizes.8xl" | "sizes.prose" | "sizes.full" | "sizes.min" | "sizes.max" | "sizes.fit" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "animations.spin" | "animations.ping" | "animations.pulse" | "animations.bounce" | "colors.current" | "colors.black" | "colors.white" | "colors.transparent" | "colors.rose.50" | "colors.rose.100" | "colors.rose.200" | "colors.rose.300" | "colors.rose.400" | "colors.rose.500" | "colors.rose.600" | "colors.rose.700" | "colors.rose.800" | "colors.rose.900" | "colors.pink.50" | "colors.pink.100" | "colors.pink.200" | "colors.pink.300" | "colors.pink.400" | "colors.pink.500" | "colors.pink.600" | "colors.pink.700" | "colors.pink.800" | "colors.pink.900" | "colors.fuchsia.50" | "colors.fuchsia.100" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.400" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.purple.50" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.indigo.50" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.blue.50" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.sky.50" | "colors.sky.100" | "colors.sky.200" | "colors.sky.300" | "colors.sky.400" | "colors.sky.500" | "colors.sky.600" | "colors.sky.700" | "colors.sky.800" | "colors.sky.900" | "colors.cyan.50" | "colors.cyan.100" | "colors.cyan.200" | "colors.cyan.300" | "colors.cyan.400" | "colors.cyan.500" | "colors.cyan.600" | "colors.cyan.700" | "colors.cyan.800" | "colors.cyan.900" | "colors.teal.50" | "colors.teal.100" | "colors.teal.200" | "colors.teal.300" | "colors.teal.400" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.green.50" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.lime.50" | "colors.lime.100" | "colors.lime.200" | "colors.lime.300" | "colors.lime.400" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.yellow.50" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.orange.50" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.400" | "colors.orange.500" | "colors.orange.600" | "colors.orange.700" | "colors.orange.800" | "colors.orange.900" | "colors.red.50" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.gray.50" | "colors.gray.100" | "colors.gray.200" | "colors.gray.300" | "colors.gray.400" | "colors.gray.500" | "colors.gray.600" | "colors.gray.700" | "colors.gray.800" | "colors.gray.900" | "colors.slate.50" | "colors.slate.100" | "colors.slate.200" | "colors.slate.300" | "colors.slate.400" | "colors.slate.500" | "colors.slate.600" | "colors.slate.700" | "colors.slate.800" | "colors.slate.900" | "colors.neutral.50" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.950" | "assets.check" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "shadows.inset" | "colors.text" | "colors.bg" | "colors.card" | "colors.border" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-7" | "spacing.-8" | "spacing.-9" | "spacing.-10" | "spacing.-11" | "spacing.-12" | "spacing.-14" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-28" | "spacing.-32" | "spacing.-36" | "spacing.-40" | "spacing.-44" | "spacing.-48" | "spacing.-52" | "spacing.-56" | "spacing.-60" | "spacing.-64" | "spacing.-72" | "spacing.-80" | "spacing.-96" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "spacing.-3.5" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.950"
 
 export type ColorPalette = "rose" | "pink" | "fuchsia" | "purple" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "red" | "gray" | "slate" | "neutral"

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { CompositionStyleObject } from './system-types'
 
 type Recursive<T> = {

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { AnySelector, Selectors } from './selectors'
 
 export type Conditions = {

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export {};
 
 export type PropertyValue<TValue> = TValue extends Array<infer AValue>

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

@@ -1,8 +1,9 @@
-import { RecipeVariantRecord, RecipeConfig } from './recipe'
-import { Parts } from './parts'
-import { PatternConfig } from './pattern'
-import { GlobalStyleObject, SystemStyleObject } from './system-types'
-import { CompositionStyles } from './composition'
+/* eslint-disable */
+import type { RecipeVariantRecord, RecipeConfig } from './recipe'
+import type { Parts } from './parts'
+import type { PatternConfig } from './pattern'
+import type { GlobalStyleObject, SystemStyleObject } from './system-types'
+import type { CompositionStyles } from './composition'
 
 declare module '@pandacss/dev' {
   export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): RecipeConfig

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

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

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import './global'
-export { ConditionalValue } from './conditions'
-export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
+export type { ConditionalValue } from './conditions'
+export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { ComponentProps, ElementType } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export type Part = {
   selector: string
 }

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { CssProperty, SystemStyleObject } from './system-types'
 import type { TokenCategory } from '../tokens'
 

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { ConditionalValue } from './conditions';
 import type { CssProperties } from './system-types'
 import type { Tokens } from '../tokens'

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { SystemStyleObject } from './system-types'
 
 type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { Pseudos } from './csstype'
 
 type AriaAttributes =

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

@@ -1,6 +1,7 @@
-import { ConditionalValue } from './conditions'
-import { PropertyValue } from './prop-type'
-import { Token } from '../tokens'
+/* eslint-disable */
+import type { ConditionalValue } from './conditions'
+import type { PropertyValue } from './prop-type'
+import type { Token } from '../tokens'
 
 export type CssVarProperties = {
   [key in `--${string}`]?: ConditionalValue<Token | (string & {}) | (number & {})>

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import type { ConditionalValue, Conditions, Nested } from './conditions'
 import type { PropertiesFallback } from './csstype'
 import type { SystemProperties, CssVarProperties } from './style-props'