@pandacss/studio 0.12.2 → 0.13.1

package/styled-system/helpers.mjs

@@ -1,272 +1,278 @@
 // src/assert.ts
 function isObject(value) {
-  return typeof value === 'object' && value != null && !Array.isArray(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))
+  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));
 }
 
 // src/condition.ts
-var isBaseCondition = (v) => v === 'base'
+var isBaseCondition = (v) => v === "base";
 function filterBaseConditions(c) {
-  return c.slice().filter((v) => !isBaseCondition(v))
+  return c.slice().filter((v) => !isBaseCondition(v));
 }
 
 // src/css-important.ts
-var importantRegex = /!(important)?$/
+var importantRegex = /!(important)?$/;
 function isImportant(value) {
-  return typeof value === 'string' ? importantRegex.test(value) : false
+  return typeof value === "string" ? importantRegex.test(value) : false;
 }
 function withoutImportant(value) {
-  return typeof value === 'string' ? value.replace(importantRegex, '').trim() : value
+  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
 }
 function withoutSpace(str) {
-  return typeof str === 'string' ? str.replaceAll(' ', '_') : str
+  return typeof str === "string" ? str.replaceAll(" ", "_") : str;
 }
 
 // src/hash.ts
 function toChar(code) {
-  return String.fromCharCode(code + (code > 25 ? 39 : 97))
+  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
+  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
+  let i = x.length;
+  while (i)
+    h = h * 33 ^ x.charCodeAt(--i);
+  return h;
 }
 function toHash(value) {
-  return toName(toPhash(5381, value) >>> 0)
+  return toName(toPhash(5381, value) >>> 0);
 }
 
 // src/merge-props.ts
 function mergeProps(...sources) {
-  const result = {}
+  const result = {};
   for (const source of sources) {
     for (const [key, value] of Object.entries(source)) {
       if (isObject(value)) {
-        result[key] = mergeProps(result[key] || {}, value)
+        result[key] = mergeProps(result[key] || {}, value);
       } else {
-        result[key] = value
+        result[key] = value;
       }
     }
   }
-  return result
+  return result;
 }
 
 // src/walk-object.ts
-var isNotNullish = (element) => element != null
+var isNotNullish = (element) => element != null;
 function walkObject(target, predicate, options = {}) {
-  const { stop, getKey } = options
+  const { stop, getKey } = options;
   function inner(value, path = []) {
     if (isObject(value) || Array.isArray(value)) {
-      const result = {}
+      const result = {};
       for (const [prop, child] of Object.entries(value)) {
-        const key = getKey?.(prop) ?? prop
-        const childPath = [...path, key]
+        const key = getKey?.(prop) ?? prop;
+        const childPath = [...path, key];
         if (stop?.(value, childPath)) {
-          return predicate(value, path)
+          return predicate(value, path);
         }
-        const next = inner(child, childPath)
+        const next = inner(child, childPath);
         if (isNotNullish(next)) {
-          result[key] = next
+          result[key] = next;
         }
       }
-      return result
+      return result;
     }
-    return predicate(value, path)
+    return predicate(value, path);
   }
-  return inner(target)
+  return inner(target);
 }
 function mapObject(obj, fn) {
-  if (!isObject(obj)) return fn(obj)
-  return walkObject(obj, (value) => fn(value))
+  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]
+    const key = breakpoints[index];
     if (current != null) {
-      acc[key] = current
+      acc[key] = current;
     }
-    return acc
-  }, {})
+    return acc;
+  }, {});
 }
 function normalizeShorthand(styles, context) {
-  const { hasShorthand, resolveShorthand } = context.utility
+  const { hasShorthand, resolveShorthand } = context.utility;
   return walkObject(styles, (v) => v, {
     getKey: (prop) => {
-      return hasShorthand ? resolveShorthand(prop) : prop
-    },
-  })
+      return hasShorthand ? resolveShorthand(prop) : prop;
+    }
+  });
 }
 function normalizeStyleObject(styles, context) {
-  const { utility, conditions } = context
-  const { hasShorthand, resolveShorthand } = utility
+  const { utility, conditions } = context;
+  const { hasShorthand, resolveShorthand } = utility;
   return walkObject(
     styles,
     (value) => {
-      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value
+      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;
     },
     {
       stop: (value) => Array.isArray(value),
       getKey: (prop) => {
-        return hasShorthand ? resolveShorthand(prop) : 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)
+  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 { utility, hash, conditions: conds = fallbackCondition } = context;
+  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");
   const hashFn = (conditions, className) => {
-    let result
+    let result;
     if (hash) {
-      const baseArray = [...conds.finalize(conditions), className]
-      result = formatClassName(toHash(baseArray.join(':')))
+      const baseArray = [...conds.finalize(conditions), className];
+      result = formatClassName(toHash(baseArray.join(":")));
     } else {
-      const baseArray = [...conds.finalize(conditions), formatClassName(className)]
-      result = baseArray.join(':')
+      const baseArray = [...conds.finalize(conditions), formatClassName(className)];
+      result = baseArray.join(":");
     }
-    return result
-  }
+    return result;
+  };
   return (styleObject = {}) => {
-    const normalizedObject = normalizeStyleObject(styleObject, context)
-    const classNames = /* @__PURE__ */ new Set()
+    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(' ')
-  }
+      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)
+  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))
+    const allStyles = compactStyles(...styles);
+    if (allStyles.length === 1)
+      return allStyles;
+    return allStyles.map((style) => normalizeShorthand(style, context));
   }
   function mergeCss(...styles) {
-    return mergeProps(...resolve(styles))
+    return mergeProps(...resolve(styles));
   }
   function assignCss(...styles) {
-    return Object.assign({}, ...resolve(styles))
+    return Object.assign({}, ...resolve(styles));
   }
-  return { mergeCss, assignCss }
+  return { mergeCss, assignCss };
 }
 
 // src/memo.ts
 var memo = (fn) => {
-  const cache = /* @__PURE__ */ new Map()
+  const cache = /* @__PURE__ */ new Map();
   const get = (...args) => {
-    const key = JSON.stringify(args)
+    const key = JSON.stringify(args);
     if (cache.has(key)) {
-      return cache.get(key)
+      return cache.get(key);
     }
-    const result = fn(...args)
-    cache.set(key, result)
-    return result
-  }
-  return get
-}
+    const result = fn(...args);
+    cache.set(key, result);
+    return result;
+  };
+  return get;
+};
 
 // src/hypenate-property.ts
-var wordRegex = /([A-Z])/g
-var msRegex = /^ms-/
+var wordRegex = /([A-Z])/g;
+var msRegex = /^ms-/;
 var hypenateProperty = memo((property) => {
-  if (property.startsWith('--')) return property
-  return property.replace(wordRegex, '-$1').replace(msRegex, '-ms-').toLowerCase()
-})
+  if (property.startsWith("--"))
+    return property;
+  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();
+});
 
 // src/slot.ts
 var assign = (obj, path, value) => {
-  const last = path.pop()
+  const last = path.pop();
   const target = path.reduce((acc, key) => {
-    if (acc[key] == null) acc[key] = {}
-    return acc[key]
-  }, obj)
-  if (last != null) target[last] = value
-}
+    if (acc[key] == null)
+      acc[key] = {};
+    return acc[key];
+  }, obj);
+  if (last != null)
+    target[last] = value;
+};
 var getSlotRecipes = (recipe) => {
-  const parts = recipe.slots
-    .map((slot) => [
-      slot,
-      // setup base recipe
-      {
-        // create class-base on BEM
-        className: [recipe.className ?? '', slot].join('__'),
-        base: {},
-        variants: {},
-        defaultVariants: recipe.defaultVariants ?? {},
-        compoundVariants: [],
+  const parts = recipe.slots.map((slot) => [
+    slot,
+    // setup base recipe
+    {
+      // create class-base on BEM
+      className: [recipe.className ?? "", slot].join("__"),
+      base: {},
+      variants: {},
+      defaultVariants: recipe.defaultVariants ?? {},
+      compoundVariants: []
+    }
+  ]).map(([slot, cva]) => {
+    const base = recipe.base[slot];
+    if (base)
+      cva.base = base;
+    walkObject(
+      recipe.variants ?? {},
+      (variant, path) => {
+        if (!variant[slot])
+          return;
+        assign(cva, ["variants", ...path], variant[slot]);
       },
-    ])
-    .map(([slot, cva]) => {
-      const base = recipe.base[slot]
-      if (base) cva.base = base
-      walkObject(
-        recipe.variants ?? {},
-        (variant, path) => {
-          if (!variant[slot]) return
-          assign(cva, ['variants', ...path], variant[slot])
-        },
-        {
-          stop: (_value, path) => path.includes(slot),
-        },
-      )
-      if (recipe.compoundVariants) {
-        cva.compoundVariants = getSlotCompoundVariant(recipe.compoundVariants, slot)
+      {
+        stop: (_value, path) => path.includes(slot)
       }
-      return [slot, cva]
-    })
-  return Object.fromEntries(parts)
-}
-var getSlotCompoundVariant = (compoundVariants, slotName) =>
-  compoundVariants
-    .filter((compoundVariant) => compoundVariant.css[slotName])
-    .map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }))
+    );
+    if (recipe.compoundVariants) {
+      cva.compoundVariants = getSlotCompoundVariant(recipe.compoundVariants, slot);
+    }
+    return [slot, cva];
+  });
+  return Object.fromEntries(parts);
+};
+var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));
 
 // src/split-props.ts
 function splitProps(props, ...keys) {
-  const descriptors = Object.getOwnPropertyDescriptors(props)
-  const dKeys = Object.keys(descriptors)
+  const descriptors = Object.getOwnPropertyDescriptors(props);
+  const dKeys = Object.keys(descriptors);
   const split = (k) => {
-    const clone = {}
+    const clone = {};
     for (let i = 0; i < k.length; i++) {
-      const key = k[i]
+      const key = k[i];
       if (descriptors[key]) {
-        Object.defineProperty(clone, key, descriptors[key])
-        delete 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))
+    return clone;
+  };
+  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));
+  return keys.map(fn).concat(split(dKeys));
 }
 export {
   compact,
@@ -284,19 +290,24 @@ export {
   splitProps,
   toHash,
   walkObject,
-  withoutSpace,
-}
+  withoutSpace
+};
+
+
 
 // src/normalize-html.ts
-var htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
+var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];
 function convert(key) {
-  return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : 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]))
+  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
 }
-normalizeHTMLProps.keys = htmlProps
-export { normalizeHTMLProps }
+normalizeHTMLProps.keys = htmlProps;
+export {
+  normalizeHTMLProps
+};
+
 
 export function __spreadValues(a, b) {
   return { ...a, ...b }
@@ -304,4 +315,4 @@ export function __spreadValues(a, b) {
 
 export function __objRest(source, exclude) {
   return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
-}
+}

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

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import type { FunctionComponent } from 'react'
-import type { AspectRatioProperties } from '../patterns/aspect-ratio'
-import type { HTMLPandaProps } from '../types/jsx'
-import type { DistributiveOmit } from '../types/system-types'
+import type { AspectRatioProperties } from '../patterns/aspect-ratio';
+import type { HTMLPandaProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
 
 export type AspectRatioProps = AspectRatioProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'>
 

package/styled-system/jsx/aspect-ratio.mjs

@@ -1,9 +1,9 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs'
-import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs'
+import { panda } from './factory.mjs';
+import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs';
 
 export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) {
   const { ratio, ...restProps } = props
-  const styleProps = getAspectRatioStyle({ ratio })
-  return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+const styleProps = getAspectRatioStyle({ratio})
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import type { FunctionComponent } from 'react'
-import type { BleedProperties } from '../patterns/bleed'
-import type { HTMLPandaProps } from '../types/jsx'
-import type { DistributiveOmit } from '../types/system-types'
+import type { BleedProperties } from '../patterns/bleed';
+import type { HTMLPandaProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
 
 export type BleedProps = BleedProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof BleedProperties >
 

package/styled-system/jsx/bleed.mjs

@@ -1,9 +1,9 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs'
-import { getBleedStyle } from '../patterns/bleed.mjs'
+import { panda } from './factory.mjs';
+import { getBleedStyle } from '../patterns/bleed.mjs';
 
 export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) {
   const { inline, block, ...restProps } = props
-  const styleProps = getBleedStyle({ inline, block })
-  return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+const styleProps = getBleedStyle({inline, block})
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import type { FunctionComponent } from 'react'
-import type { BoxProperties } from '../patterns/box'
-import type { HTMLPandaProps } from '../types/jsx'
-import type { DistributiveOmit } from '../types/system-types'
+import type { BoxProperties } from '../patterns/box';
+import type { HTMLPandaProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
 
 export type BoxProps = BoxProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof BoxProperties >
 

package/styled-system/jsx/box.mjs

@@ -1,8 +1,8 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs'
-import { getBoxStyle } from '../patterns/box.mjs'
+import { panda } from './factory.mjs';
+import { getBoxStyle } from '../patterns/box.mjs';
 
 export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) {
   const styleProps = getBoxStyle()
-  return createElement(panda.div, { ref, ...styleProps, ...props })
-})
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

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

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import type { FunctionComponent } from 'react'
-import type { CenterProperties } from '../patterns/center'
-import type { HTMLPandaProps } from '../types/jsx'
-import type { DistributiveOmit } from '../types/system-types'
+import type { CenterProperties } from '../patterns/center';
+import type { HTMLPandaProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
 
 export type CenterProps = CenterProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof CenterProperties >
 

package/styled-system/jsx/center.mjs

@@ -1,9 +1,9 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs'
-import { getCenterStyle } from '../patterns/center.mjs'
+import { panda } from './factory.mjs';
+import { getCenterStyle } from '../patterns/center.mjs';
 
 export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) {
   const { inline, ...restProps } = props
-  const styleProps = getCenterStyle({ inline })
-  return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+const styleProps = getCenterStyle({inline})
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import type { FunctionComponent } from 'react'
-import type { CircleProperties } from '../patterns/circle'
-import type { HTMLPandaProps } from '../types/jsx'
-import type { DistributiveOmit } from '../types/system-types'
+import type { CircleProperties } from '../patterns/circle';
+import type { HTMLPandaProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
 
 export type CircleProps = CircleProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof CircleProperties >
 

package/styled-system/jsx/circle.mjs

@@ -1,9 +1,9 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs'
-import { getCircleStyle } from '../patterns/circle.mjs'
+import { panda } from './factory.mjs';
+import { getCircleStyle } from '../patterns/circle.mjs';
 
 export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) {
   const { size, ...restProps } = props
-  const styleProps = getCircleStyle({ size })
-  return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+const styleProps = getCircleStyle({size})
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import type { FunctionComponent } from 'react'
-import type { ContainerProperties } from '../patterns/container'
-import type { HTMLPandaProps } from '../types/jsx'
-import type { DistributiveOmit } from '../types/system-types'
+import type { ContainerProperties } from '../patterns/container';
+import type { HTMLPandaProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
 
 export type ContainerProps = ContainerProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof ContainerProperties >
 

package/styled-system/jsx/container.mjs

@@ -1,8 +1,8 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs'
-import { getContainerStyle } from '../patterns/container.mjs'
+import { panda } from './factory.mjs';
+import { getContainerStyle } from '../patterns/container.mjs';
 
 export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) {
   const styleProps = getContainerStyle()
-  return createElement(panda.div, { ref, ...styleProps, ...props })
-})
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

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

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import type { FunctionComponent } from 'react'
-import type { DividerProperties } from '../patterns/divider'
-import type { HTMLPandaProps } from '../types/jsx'
-import type { DistributiveOmit } from '../types/system-types'
+import type { DividerProperties } from '../patterns/divider';
+import type { HTMLPandaProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
 
 export type DividerProps = DividerProperties & DistributiveOmit<HTMLPandaProps<'div'>, keyof DividerProperties >