@pandacss/studio 0.3.0 → 0.3.2

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

@@ -11,6 +11,10 @@
 @import './tokens/keyframes.css';
 
 @layer utilities {
+  .w_26px {
+    width: 26px;
+  }
+
   .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -23,44 +27,56 @@
     margin: var(--spacing-4);
   }
 
-  .border_1px_solid_token\(colors\.blue\.400\,_blue\) {
-    border: 1px solid var(--colors-blue-400, blue);
+  .max-h_300px {
+    max-height: 300px;
   }
 
-  .border_1px_solid_token\(colors\.border\,_blue\) {
-    border: 1px solid var(--colors-border, blue);
+  .word-wrap_break-word {
+    word-wrap: break-word;
   }
 
-  .transition_all_\.2s_ease {
-    transition: all 0.2s ease;
+  .highlighted\:bg_border[data-highlighted] {
+    background: var(--colors-border);
   }
 
-  .transition_outline_\.2s_ease {
-    transition: outline 0.2s ease;
+  .isolation_isolate {
+    isolation: isolate;
   }
 
-  .highlighted\:opacity_0\.8[data-highlighted] {
-    opacity: 0.8;
+  .border-l_solid_1px {
+    border-left: solid 1px;
   }
 
-  .highlighted\:ring_1px_solid_token\(colors\.blue\.400\,_blue\)[data-highlighted] {
-    outline: 1px solid var(--colors-blue-400, blue);
+  .expanded\:transform_rotate\(180deg\):where([aria-expanded='true'], [data-expanded]) {
+    transform: rotate(180deg);
   }
 
-  .max-h_300px {
-    max-height: 300px;
+  .transition_all_\.2s_ease {
+    transition: all 0.2s ease;
   }
 
-  .border_1px_solid_token\(colors\.border\) {
-    border: 1px solid var(--colors-border);
+  .top_0px {
+    top: 0px;
   }
 
-  .highlighted\:bg_border[data-highlighted] {
-    background: var(--colors-border);
+  .right_0px {
+    right: 0px;
+  }
+
+  .pos_absolute {
+    position: absolute;
+  }
+
+  .z_2 {
+    z-index: 2;
   }
 
-  .mr_-2 {
-    margin-right: calc(var(--spacing-2) * -1);
+  .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 {
@@ -71,8 +87,8 @@
     flex-shrink: 0;
   }
 
-  .border_border {
-    border: border;
+  .border_1px_solid_token\(colors\.border\) {
+    border: 1px solid var(--colors-border);
   }
 
   .text_red\.400 {
@@ -95,18 +111,10 @@
     margin-left: var(--spacing-1);
   }
 
-  .bg_white {
-    background-color: var(--colors-white);
-  }
-
   .bg_card {
     background-color: var(--colors-card);
   }
 
-  .bg_gray\.50 {
-    background: var(--colors-gray-50);
-  }
-
   .p_16 {
     padding: var(--spacing-16);
   }
@@ -115,14 +123,18 @@
     margin-top: var(--spacing-1);
   }
 
-  .self_flex-end {
-    align-self: flex-end;
-  }
-
   .select_none {
     user-select: none;
   }
 
+  .px_3 {
+    padding-inline: var(--spacing-3);
+  }
+
+  .h_16 {
+    height: var(--sizes-16);
+  }
+
   .pt_16 {
     padding-top: var(--spacing-16);
   }
@@ -176,10 +188,6 @@
     margin-bottom: var(--spacing-2);
   }
 
-  .opacity_0\.1 {
-    opacity: 0.1;
-  }
-
   .h_10 {
     height: var(--sizes-10);
   }
@@ -236,6 +244,10 @@
     grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
   }
 
+  .grid-cols_repeat\(auto-fit\,_minmax\(30rem\,_1fr\)\) {
+    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
+  }
+
   .my_5 {
     margin-block: var(--spacing-5);
   }
@@ -272,10 +284,6 @@
     font-size: 24px;
   }
 
-  .text_uppercase {
-    text-transform: uppercase;
-  }
-
   .justify_center {
     justify-content: center;
   }
@@ -374,6 +382,10 @@
     width: var(--sizes-60);
   }
 
+  .p_4 {
+    padding: var(--spacing-4);
+  }
+
   .\[\&_svg\]\:font_normal svg {
     font-weight: var(--font-weights-normal);
   }
@@ -486,6 +498,10 @@
     border-color: var(--colors-neutral-700);
   }
 
+  .text_uppercase {
+    text-transform: uppercase;
+  }
+
   .d_block {
     display: block;
   }
@@ -624,22 +640,6 @@
     padding-block: 20px;
   }
 
-  .p_4 {
-    padding: var(--spacing-4);
-  }
-
-  .debug_true {
-    outline: 1px solid blue !important;
-  }
-
-  .debug_true > * {
-    outline: 1px solid red !important;
-  }
-
-  .bg_white {
-    background: var(--colors-white);
-  }
-
   .p_4px_8px {
     padding: 4px 8px;
   }
@@ -668,12 +668,8 @@
     width: 100%;
   }
 
-  .w_26px {
-    width: 26px;
-  }
-
-  .text_text {
-    color: var(--colors-text);
+  .w_5 {
+    width: var(--sizes-5);
   }
 
   .ml_auto {
@@ -716,10 +712,6 @@
     padding: 0;
   }
 
-  .rounded_md {
-    border-radius: var(--radii-md);
-  }
-
   .py_2 {
     padding-block: var(--spacing-2);
   }
@@ -728,6 +720,10 @@
     transition: all 0.2s ease;
   }
 
+  .rounded_md {
+    border-radius: var(--radii-md);
+  }
+
   .bg_none {
     background: none;
   }
@@ -744,6 +740,10 @@
     padding-right: var(--spacing-4);
   }
 
+  .text_text {
+    color: var(--colors-text);
+  }
+
   .mb_4 {
     margin-bottom: var(--spacing-4);
   }
@@ -912,10 +912,6 @@
     min-width: var(--sizes-60);
   }
 
-  .overflow_auto {
-    overflow: auto;
-  }
-
   .px_12 {
     padding-inline: var(--spacing-12);
   }
@@ -944,6 +940,10 @@
     width: var(--sizes-full);
   }
 
+  .overflow_auto {
+    overflow: auto;
+  }
+
   .focusWithin\:outline-style_solid:focus-within {
     outline-style: solid;
   }
@@ -960,12 +960,8 @@
     outline-color: var(--colors-neutral-400);
   }
 
-  .focus\:border_1px_solid_token\(colors\.blue\.400\,_blue\):where(:focus, [data-focus]) {
-    border: 1px solid var(--colors-blue-400, blue);
-  }
-
-  .hover\:border_1px_solid_token\(colors\.blue\.400\,_blue\):where(:hover, [data-hover]) {
-    border: 1px solid var(--colors-blue-400, blue);
+  .hover\:bg_gray\.100:where(:hover, [data-hover]) {
+    background-color: var(--colors-gray-100);
   }
 
   .hover\:shadow_lg:where(:hover, [data-hover]) {
@@ -976,18 +972,6 @@
     color: var(--colors-yellow-300);
   }
 
-  .hover\:bg_bg:where(:hover, [data-hover]) {
-    background: var(--colors-bg);
-  }
-
-  .hover\:bg_gray\.50:where(:hover, [data-hover]) {
-    background-color: var(--colors-gray-50);
-  }
-
-  .hover\:bg_gray\.100:where(:hover, [data-hover]) {
-    background-color: var(--colors-gray-100);
-  }
-
   .hover\:opacity_0\.8:where(:hover, [data-hover]) {
     opacity: 0.8;
   }
@@ -996,8 +980,12 @@
     background-color: var(--colors-border);
   }
 
-  .hover\:bg_gray\.100:where(:hover, [data-hover]) {
-    background: var(--colors-gray-100);
+  .hover\:bg_border:where(:hover, [data-hover]) {
+    background: var(--colors-border);
+  }
+
+  .hover\:opacity_0\.6:where(:hover, [data-hover]) {
+    opacity: 0.6;
   }
 
   .hover\:opacity_1:where(:hover, [data-hover]) {

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

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