@pandacss/studio 0.15.0 → 0.15.1

package/dist/studio.js

@@ -33,10 +33,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.1.6/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl, importMetaUrl;
 var init_cjs_shims = __esm({
-  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.1.6/node_modules/tsup/assets/cjs_shims.js"() {
+  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
     getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
     importMetaUrl = /* @__PURE__ */ getImportMetaUrl();

package/dist/studio.mjs

@@ -34,12 +34,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.1.6/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js
 import { fileURLToPath } from "url";
 import path from "path";
 var getFilename, getDirname, __dirname;
 var init_esm_shims = __esm({
-  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.1.6/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.27_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
     getFilename = () => fileURLToPath(import.meta.url);
     getDirname = () => path.dirname(getFilename());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -33,19 +33,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.9",
-    "@pandacss/types": "0.15.0",
-    "@pandacss/config": "0.15.0",
-    "@pandacss/shared": "0.15.0",
-    "@pandacss/token-dictionary": "0.15.0",
-    "@pandacss/logger": "0.15.0",
-    "@pandacss/node": "0.15.0"
+    "@pandacss/types": "0.15.1",
+    "@pandacss/config": "0.15.1",
+    "@pandacss/shared": "0.15.1",
+    "@pandacss/token-dictionary": "0.15.1",
+    "@pandacss/logger": "0.15.1",
+    "@pandacss/node": "0.15.1"
   },
   "devDependencies": {
-    "@types/react": "18.2.18",
+    "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "@vitejs/plugin-react": "4.0.4",
     "execa": "7.2.0",
-    "@pandacss/dev": "0.15.0"
+    "@pandacss/dev": "0.15.1"
   },
   "scripts": {
     "codegen": "panda",

package/styled-system/helpers.mjs

@@ -210,7 +210,7 @@ var hypenateProperty = memo((property) => {
 });
 
 // src/slot.ts
-var getSlotRecipes = (recipe) => {
+var getSlotRecipes = (recipe = {}) => {
   const init = (slot) => ({
     className: [recipe.className, slot].filter(Boolean).join("__"),
     base: recipe.base?.[slot] ?? {},
@@ -218,7 +218,8 @@ var getSlotRecipes = (recipe) => {
     defaultVariants: recipe.defaultVariants ?? {},
     compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []
   });
-  const recipeParts = recipe.slots.map((slot) => [slot, init(slot)]);
+  const slots = recipe.slots ?? [];
+  const recipeParts = slots.map((slot) => [slot, init(slot)]);
   for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {
     for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {
       recipeParts.forEach(([slot, slotRecipe]) => {

package/styled-system/jsx/factory.mjs

@@ -37,7 +37,8 @@ function cvaClass() {
     })
   })
 
-  PandaComponent.displayName = `panda.${Dynamic}`
+  const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
+  PandaComponent.displayName = `panda.${name}`
   return PandaComponent
 }
 

package/styled-system/reset.css

@@ -20,8 +20,8 @@
       'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
       'Noto Color Emoji';
     -webkit-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     -moz-tab-size: 4;
     tab-size: 4;
     font-family: var(--global-font-body, var(--font-fallback));
@@ -163,24 +163,39 @@
     font-family: var(--global-font-mono, var(--font-fallback));
   }
 
-  [type='search'] {
+
+  input[type="text"],
+  input[type="email"],
+  input[type="search"],
+  input[type="password"] {
+    -webkit-appearance: none;
+    -moz-appearance: none; 
+  }
+
+  input[type='search'] {
     -webkit-appearance: textfield;
     outline-offset: -2px;
   }
 
-  ::-webkit-search-decoration {
+  ::-webkit-search-decoration,
+  ::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
 
   ::-webkit-file-upload-button {
     -webkit-appearance: button;
+    font: inherit;
   }
 
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
     height: auto;
   }
 
+  input[type='number']{
+    -moz-appearance: textfield;
+  }
+
   :-moz-ui-invalid {
     box-shadow: none;
   }

package/styled-system/styles.css

@@ -11,110 +11,6 @@
 @import './tokens/keyframes.css';
 
 @layer utilities {
-  .styles\:text_red\! {
-    color: red !important
-    }
-
-  .styles\:fs_30px\! {
-    font-size: 30px !important
-    }
-
-  .styles\:bg_red\.300 {
-    background: var(--colors-red-300)
-    }
-
-  .styles\:w_20px {
-    width: 20px
-    }
-
-  .styles\:w_70px {
-    width: 70px
-    }
-
-  .styles\:w_50px {
-    width: 50px
-    }
-
-  [dir=rtl] .styles\:rtl\:ml_-4 {
-    margin-left: calc(var(--spacing-4) * -1)
-        }
-
-  .styles\:light\:text_red.light, .light .styles\:light\:text_red {
-    color: red
-        }
-
-  .styles\:dark\:text_green.dark, .dark .styles\:dark\:text_green {
-    color: green
-        }
-
-  .styles\:dark\:opacity_slate400.dark, .dark .styles\:dark\:opacity_slate400 {
-    opacity: slate400
-        }
-
-  .styles\:left_20px,.styles\:\[\&_\>_p\]\:left_20px > p {
-    left: 20px
-        }
-
-  .styles\:\[\&_\>_p\]\:light\:bg_red400 > p.light, .light .styles\:\[\&_\>_p\]\:light\:bg_red400 > p {
-    background: red400
-            }
-
-  .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p.dark, .dark .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p {
-    background: green500
-            }
-
-  [dir=rtl] .styles\:\[\&_\>_p\]\:rtl\:font_sans > p {
-    font: sans
-            }
-
-  .styles\:\[\&\:\:placeholder\]\:left_40px::placeholder {
-    left: 40px
-        }
-
-  .styles\:\[\&\:\:placeholder\]\:bg_red400::placeholder {
-    background: red400
-        }
-
-  .styles\:all_unset {
-    all: unset
-    }
-
-  .styles\:bg_red {
-    background-color: red
-    }
-
-  .styles\:border_none {
-    border: var(--borders-none)
-    }
-
-  .styles\:p_\$3_\$3 {
-    padding: $3 $3
-    }
-
-  .styles\:rounded_\$button {
-    border-radius: $button
-    }
-
-  .styles\:fs_\$xsmall {
-    font-size: $xsmall
-    }
-
-  .styles\:cursor_pointer {
-    cursor: pointer
-    }
-
-  .styles\:\[\&_\+_span\]\:ml_\$2 + span {
-    margin-left: $2
-        }
-
-  .test .styles\:\[\.test_\&\]\:bg_blue {
-    background-color: blue
-        }
-
-  .styles\:\[\&_\.my-class\]\:text_red .my-class,.styles\:\[\&_span\]\:text_red span,.styles\:\[\&_kbd\]\:text_red kbd {
-    color: red
-        }
-
   .w_26px {
     width: 26px;
   }
@@ -1064,14 +960,6 @@
     outline-color: var(--colors-neutral-400);
     }
 
-  .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:focus, .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:hover {
-    box-shadow: none
-        }
-
-  :focus > .styles\:\[\:focus_\>_\&\]\:text_white {
-    color: var(--colors-white)
-        }
-
   .hover\:bg_gray\.100:where(:hover, [data-hover]) {
     background-color: var(--colors-gray-100);
     }
@@ -1108,18 +996,6 @@
     border-bottom-color: var(--colors-black);
     }
 
-  input:hover .styles\:\[input\:hover_\&\]\:bg_red400 {
-    background: red400
-        }
-
-  .styles\:hover\:bg_pink\.400:is(:hover, [data-hover]) {
-    background: var(--colors-pink-400)
-        }
-
-  .styles\:hover\:text_pink\.400:is(:hover, [data-hover]) {
-    color: var(--colors-pink-400)
-        }
-
   .\[\&\:hover\]\:bg_\#4049f0:hover {
     background: #4049f0;
     }
@@ -1132,78 +1008,6 @@
     opacity: 0.8;
       }
 
-  @media screen and (min-width: 40em) {
-    [dir=ltr] .styles\:ltr\:sm\:ml_4 {
-      margin-left: var(--spacing-4)
-        }
-
-    [dir=rtl] .styles\:sm\:rtl\:top_20px {
-      top: 20px
-        }
-            }
-
-  @media screen and (min-width: 40em) {
-    .styles\:\[\&\:\:placeholder\]\:sm\:text_left::placeholder {
-      text-align: left
-        }
-            }
-
-  @media screen and (min-width: 40em) {
-    .styles\:sm\:hover\:top_50px:is(:hover, [data-hover]) {
-      top: 50px
-        }
-            }
-
-  @media screen and (min-width: 40em) {
-    [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]).dark, .dark [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]) {
-      font: serif
-                    }
-                        }
-
-  @media screen and (min-width: 40em) {
-    input:hover .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
-      font-size: 14px
-        }
-            }
-
-  @media screen and (min-width: 40em) {
-    .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]).dark, .dark .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]) {
-      background: var(--colors-red-300)
-            }
-                }
-
-  @media screen and (min-width: 40em) {
-    .styles\:hover\:disabled\:sm\:bg_red\.300:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
-      background: var(--colors-red-300)
-            }
-                }
-
-  @media screen and (min-width: 40em) {
-    .styles\:sm\:w_60px {
-      width: 60px
-    }
-        }
-
-  @media (min-width: 768px) {
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
-      background-color: green
-    }
-
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
-      font-size: $small
-    }
-
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow:hover {
-      background-color: yellow
-        }
-            }
-
-  @media screen and (min-width: 48em) {
-    .styles\:\[\&_\>_p\]\:md\:left_40px > p,.styles\:md\:left_40px {
-      left: 40px
-    }
-            }
-
   @media screen and (min-width: 768px) {
     .md\:px_6 {
       padding-inline: var(--spacing-6)
@@ -1215,42 +1019,4 @@
       padding-inline: var(--spacing-8)
   }
     }
-
-  @media screen and (min-width: 64em) {
-    .styles\:lg\:top_120px {
-      top: 120px
-    }
-
-    input:hover .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
-      font-size: 18px
-        }
-            }
-
-  @media base {
-    .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px:hover {
-      left: 40px
-        }
-            }
-
-  @media base {
-    @media screen and (min-width: 40em) {
-      .styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left:hover {
-        text-align: left
-        }
-                }
-            }
-
-  @media base {
-    .styles\:\[\@media_base\]\:left_40px {
-      left: 40px
-    }
-        }
-
-  @media base {
-    @media screen and (min-width: 40em) {
-      .styles\:\[\@media_base\]\:sm\:text_left {
-        text-align: left
-    }
-            }
-        }
 }

package/styled-system/chunks/..__core____tests____atomic-rule.test.css

@@ -1,216 +0,0 @@
-@layer utilities {
-  .styles\:text_red\! {
-    color: red !important
-    }
-
-  .styles\:fs_30px\! {
-    font-size: 30px !important
-    }
-
-  .styles\:bg_red\.300 {
-    background: var(--colors-red-300)
-    }
-
-  .styles\:w_20px {
-    width: 20px
-    }
-
-  .styles\:w_70px {
-    width: 70px
-    }
-
-  .styles\:w_50px {
-    width: 50px
-    }
-      @media screen and (min-width: 40em) {
-    [dir=ltr] .styles\:ltr\:sm\:ml_4 {
-        margin-left: var(--spacing-4)
-        }
-            }
-    [dir=rtl] .styles\:rtl\:ml_-4 {
-      margin-left: calc(var(--spacing-4) * -1)
-        }
-    .styles\:light\:text_red.light, .light .styles\:light\:text_red {
-      color: red
-        }
-    .styles\:dark\:text_green.dark, .dark .styles\:dark\:text_green {
-      color: green
-        }
-    .styles\:dark\:opacity_slate400.dark, .dark .styles\:dark\:opacity_slate400 {
-      opacity: slate400
-        }
-      @media screen and (min-width: 40em) {
-    [dir=rtl] .styles\:sm\:rtl\:top_20px {
-        top: 20px
-        }
-            }
-    .styles\:left_20px,.styles\:\[\&_\>_p\]\:left_20px > p {
-      left: 20px
-        }
-      @media screen and (min-width: 48em) {
-    .styles\:\[\&_\>_p\]\:md\:left_40px > p {
-        left: 40px
-        }
-            }
-      .styles\:\[\&_\>_p\]\:light\:bg_red400 > p.light, .light .styles\:\[\&_\>_p\]\:light\:bg_red400 > p {
-        background: red400
-            }
-      .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p.dark, .dark .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p {
-        background: green500
-            }
-      [dir=rtl] .styles\:\[\&_\>_p\]\:rtl\:font_sans > p {
-        font: sans
-            }
-    .styles\:\[\&\:\:placeholder\]\:left_40px::placeholder {
-      left: 40px
-        }
-    .styles\:\[\&\:\:placeholder\]\:bg_red400::placeholder {
-      background: red400
-        }
-      @media screen and (min-width: 40em) {
-    .styles\:\[\&\:\:placeholder\]\:sm\:text_left::placeholder {
-        text-align: left
-        }
-            }
-
-  .styles\:all_unset {
-    all: unset
-    }
-
-  .styles\:bg_red {
-    background-color: red
-    }
-
-  .styles\:border_none {
-    border: var(--borders-none)
-    }
-
-  .styles\:p_\$3_\$3 {
-    padding: $3 $3
-    }
-
-  .styles\:rounded_\$button {
-    border-radius: $button
-    }
-
-  .styles\:fs_\$xsmall {
-    font-size: $xsmall
-    }
-
-  .styles\:cursor_pointer {
-    cursor: pointer
-    }
-    .styles\:\[\&_\+_span\]\:ml_\$2 + span {
-      margin-left: $2
-        }
-    .test .styles\:\[\.test_\&\]\:bg_blue {
-      background-color: blue
-        }
-    .styles\:\[\&_\.my-class\]\:text_red .my-class,.styles\:\[\&_span\]\:text_red span,.styles\:\[\&_kbd\]\:text_red kbd {
-      color: red
-        }
-    .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:focus, .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:hover {
-      box-shadow: none
-        }
-    :focus > .styles\:\[\:focus_\>_\&\]\:text_white {
-      color: var(--colors-white)
-        }
-      @media screen and (min-width: 40em) {
-    .styles\:sm\:hover\:top_50px:is(:hover, [data-hover]) {
-        top: 50px
-        }
-            }
-            @media screen and (min-width: 40em) {
-          [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]).dark, .dark [dir=ltr] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:is(:hover, [data-hover]) {
-              font: serif
-                    }
-                        }
-    input:hover .styles\:\[input\:hover_\&\]\:bg_red400 {
-      background: red400
-        }
-      @media screen and (min-width: 40em) {
-    input:hover .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
-        font-size: 14px
-        }
-            }
-      @media screen and (min-width: 64em) {
-    input:hover .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
-        font-size: 18px
-        }
-            }
-    .styles\:hover\:bg_pink\.400:is(:hover, [data-hover]) {
-      background: var(--colors-pink-400)
-        }
-        @media screen and (min-width: 40em) {
-      .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]).dark, .dark .styles\:hover\:sm\:dark\:bg_red\.300:is(:hover, [data-hover]) {
-          background: var(--colors-red-300)
-            }
-                }
-    .styles\:hover\:text_pink\.400:is(:hover, [data-hover]) {
-      color: var(--colors-pink-400)
-        }
-        @media screen and (min-width: 40em) {
-      .styles\:hover\:disabled\:sm\:bg_red\.300:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
-          background: var(--colors-red-300)
-            }
-                }
-      @media base {
-    .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px:hover {
-        left: 40px
-        }
-            }
-      @media base {
-        @media screen and (min-width: 40em) {
-    .styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left:hover {
-          text-align: left
-        }
-                }
-            }
-      @media (min-width: 768px) {
-    .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow:hover {
-        background-color: yellow
-        }
-            }
-    @media screen and (min-width: 40em) {
-
-  .styles\:sm\:w_60px {
-      width: 60px
-    }
-        }
-    @media screen and (min-width: 64em) {
-
-  .styles\:lg\:top_120px {
-      top: 120px
-    }
-        }
-    @media screen and (min-width: 48em) {
-
-  .styles\:md\:left_40px {
-      left: 40px
-    }
-        }
-    @media base {
-
-  .styles\:\[\@media_base\]\:left_40px {
-      left: 40px
-    }
-        }
-    @media base {
-      @media screen and (min-width: 40em) {
-
-  .styles\:\[\@media_base\]\:sm\:text_left {
-        text-align: left
-    }
-            }
-        }
-    @media (min-width: 768px) {
-
-  .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
-      background-color: green
-    }
-
-  .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
-      font-size: $small
-    }
-        }
-}