@pandacss/studio 0.0.0-dev-20230829122546 → 0.0.0-dev-20230829124704

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20230829122546",
+  "version": "0.0.0-dev-20230829124704",
   "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.0.0-dev-20230829122546",
-    "@pandacss/config": "0.0.0-dev-20230829122546",
-    "@pandacss/shared": "0.0.0-dev-20230829122546",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230829122546",
-    "@pandacss/logger": "0.0.0-dev-20230829122546",
-    "@pandacss/node": "0.0.0-dev-20230829122546"
+    "@pandacss/types": "0.0.0-dev-20230829124704",
+    "@pandacss/config": "0.0.0-dev-20230829124704",
+    "@pandacss/shared": "0.0.0-dev-20230829124704",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230829124704",
+    "@pandacss/logger": "0.0.0-dev-20230829124704",
+    "@pandacss/node": "0.0.0-dev-20230829124704"
   },
   "devDependencies": {
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@vitejs/plugin-react": "4.0.4",
     "execa": "7.2.0",
-    "@pandacss/dev": "0.0.0-dev-20230829122546"
+    "@pandacss/dev": "0.0.0-dev-20230829124704"
   },
   "scripts": {
     "codegen": "panda",

package/styled-system/global.css

@@ -1,30 +1,27 @@
 @layer base {
   :root {
-    --made-with-panda: '🐼';
-  }
+    --made-with-panda: '🐼'
+    }
 
-  *,
-  *::before,
-  *::after,
-  ::backdrop {
-    --blur: ;
-    --brightness: ;
-    --contrast: ;
-    --grayscale: ;
-    --hue-rotate: ;
-    --invert: ;
-    --saturate: ;
-    --sepia: ;
-    --drop-shadow: ;
-    --backdrop-blur: ;
-    --backdrop-brightness: ;
-    --backdrop-contrast: ;
-    --backdrop-grayscale: ;
-    --backdrop-hue-rotate: ;
-    --backdrop-invert: ;
-    --backdrop-opacity: ;
-    --backdrop-saturate: ;
-    --backdrop-sepia: ;
+  *, *::before, *::after, ::backdrop {
+    --blur:   ;
+    --brightness:   ;
+    --contrast:   ;
+    --grayscale:   ;
+    --hue-rotate:   ;
+    --invert:   ;
+    --saturate:   ;
+    --sepia:   ;
+    --drop-shadow:   ;
+    --backdrop-blur:   ;
+    --backdrop-brightness:   ;
+    --backdrop-contrast:   ;
+    --backdrop-grayscale:   ;
+    --backdrop-hue-rotate:   ;
+    --backdrop-invert:   ;
+    --backdrop-opacity:   ;
+    --backdrop-saturate:   ;
+    --backdrop-sepia:   ;
     --scroll-snap-strictness: proximity;
     --border-spacing-x: 0;
     --border-spacing-y: 0;
@@ -34,8 +31,8 @@
     --skew-x: 0;
     --skew-y: 0;
     --scale-x: 1;
-    --scale-y: 1;
-  }
+    --scale-y: 1
+    }
 
   :root {
     --global-color-border: var(--colors-border);
@@ -46,16 +43,16 @@
     font-weight: var(--font-weights-normal);
     color-scheme: light dark;
     color: var(--colors-text);
-    background: var(--colors-bg);
-  }
+    background: var(--colors-bg)
+    }
 
   a {
     color: unset;
-    text-decoration: none;
-  }
+    text-decoration: none
+    }
 
   body {
     margin: var(--spacing-0);
-    min-height: 100vh;
-  }
-}
+    min-height: 100vh
+    }
+}

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/reset.css

@@ -16,8 +16,9 @@
 
   html {
     line-height: 1.5;
-    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
-      Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
     -webkit-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
@@ -187,4 +188,4 @@
   :-moz-focusring {
     outline: auto;
   }
-}
+}

package/styled-system/static.css

@@ -1,5 +1,5 @@
 @layer utilities {
   .text_red\.400 {
-    color: var(--colors-red-400);
-  }
-}
+    color: var(--colors-red-400)
+    }
+}

package/styled-system/styles.css

@@ -12,9 +12,9 @@
 
 @layer utilities {
   .styles\:dark\:text_green500.dark,
-  .dark .styles\:dark\:text_green500 {
+    .dark .styles\:dark\:text_green500 {
     color: green500;
-  }
+    }
 
   .font_12px\/1\.5_Helvetica\,_Arial\,_sans-serif {
     font: 12px/1.5 Helvetica, Arial, sans-serif;
@@ -50,7 +50,7 @@
 
   .highlighted\:bg_border[data-highlighted] {
     background: var(--colors-border);
-  }
+    }
 
   .isolation_isolate {
     isolation: isolate;
@@ -62,7 +62,7 @@
 
   .expanded\:transform_rotate\(180deg\):where([aria-expanded='true'], [data-expanded]) {
     transform: rotate(180deg);
-  }
+    }
 
   .transition_all_\.2s_ease {
     transition: all 0.2s ease;
@@ -215,35 +215,35 @@
 
   .before\:content_\'\'::before {
     content: '';
-  }
+    }
 
   .before\:pos_absolute::before {
     position: absolute;
-  }
+    }
 
   .before\:rounded_sm::before {
     border-radius: var(--radii-sm);
-  }
+    }
 
   .before\:w_100\%::before {
     width: 100%;
-  }
+    }
 
   .before\:h_100\%::before {
     height: 100%;
-  }
+    }
 
   .before\:bg_24px::before {
     background-size: 24px;
-  }
+    }
 
   .before\:z_-1::before {
     z-index: -1;
-  }
+    }
 
   .before\:bg-img_check::before {
     background-image: var(--assets-check);
-  }
+    }
 
   .gap_0\.5 {
     gap: var(--spacing-0\.5);
@@ -362,9 +362,9 @@
   }
 
   .dark\:text_neutral\.300.dark,
-  .dark .dark\:text_neutral\.300 {
+    .dark .dark\:text_neutral\.300 {
     color: var(--colors-neutral-300);
-  }
+    }
 
   .shadow_sm {
     box-shadow: var(--shadows-sm);
@@ -377,11 +377,11 @@
   .divide-y_1px > :not([hidden]) ~ :not([hidden]) {
     border-top-width: 1px;
     border-bottom-width: 0px;
-  }
+    }
 
   .divide_card > :not([hidden]) ~ :not([hidden]) {
     border-color: var(--colors-card);
-  }
+    }
 
   .mt_1\.5 {
     margin-top: var(--spacing-1\.5);
@@ -401,23 +401,23 @@
 
   .\[\&_svg\]\:font_normal svg {
     font-weight: var(--font-weights-normal);
-  }
+    }
 
   .\[\&_svg\]\:fs_xx-large svg {
     font-size: xx-large;
-  }
+    }
 
   .\[\&_svg\]\:mb_6 svg {
     margin-bottom: var(--spacing-6);
-  }
+    }
 
   .\[\&_svg\]\:h_6 svg {
     height: var(--sizes-6);
-  }
+    }
 
   .\[\&_svg\]\:w_6 svg {
     width: var(--sizes-6);
-  }
+    }
 
   .mt_3 {
     margin-top: var(--spacing-3);
@@ -525,7 +525,7 @@
 
   .currentPage\:text_yellow\.300[aria-current='page'] {
     color: var(--colors-yellow-300);
-  }
+    }
 
   .fs_small {
     font-size: small;
@@ -619,7 +619,7 @@
 
   .\[\&\.active\]\:text_yellow\.300.active {
     color: var(--colors-yellow-300);
-  }
+    }
 
   .sr_true {
     position: absolute;
@@ -659,7 +659,7 @@
 
   .\[\&_li\]\:cursor_pointer li {
     cursor: pointer;
-  }
+    }
 
   .list-style_none {
     list-style: none;
@@ -959,90 +959,90 @@
 
   .focusWithin\:outline-style_solid:focus-within {
     outline-style: solid;
-  }
+    }
 
   .focusWithin\:ring_2px:focus-within {
     outline-width: 2px;
-  }
+    }
 
   .focusWithin\:ring_2px:focus-within {
     outline-offset: 2px;
-  }
+    }
 
   .focusWithin\:ring_neutral\.400:focus-within {
     outline-color: var(--colors-neutral-400);
-  }
+    }
 
   .hover\:bg_gray\.100:where(:hover, [data-hover]) {
     background-color: var(--colors-gray-100);
-  }
+    }
 
   .hover\:shadow_lg:where(:hover, [data-hover]) {
     box-shadow: var(--shadows-lg);
-  }
+    }
 
   .hover\:text_yellow\.300:where(:hover, [data-hover]) {
     color: var(--colors-yellow-300);
-  }
+    }
 
   .hover\:opacity_0\.8:where(:hover, [data-hover]) {
     opacity: 0.8;
-  }
+    }
 
   .hover\:bg_border:where(:hover, [data-hover]) {
     background-color: var(--colors-border);
-  }
+    }
 
   .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]) {
     opacity: 1;
-  }
+    }
 
   .hover\:border-b_black:where(:hover, [data-hover]) {
     border-bottom-color: var(--colors-black);
-  }
+    }
 
   .\[\&\:hover\]\:text_blue:hover {
     color: blue;
-  }
+    }
 
   .\[\&\:hover\]\:bg_\#4049f0:hover {
     background: #4049f0;
-  }
+    }
 
   .\[\&\:hover\]\:shadow_lg:hover {
     box-shadow: var(--shadows-lg);
-  }
+    }
 
   .\[\&_li\]\:hover\:opacity_0\.8 li:where(:hover, [data-hover]) {
     opacity: 0.8;
-  }
+      }
 
   @media screen and (min-width: 640px) {
     @media screen and (min-width: 768px) {
       .styles\:dark\:sm\:md\:text_red200.dark,
-      .dark .styles\:dark\:sm\:md\:text_red200 {
-        color: red200;
-      }
+    .dark .styles\:dark\:sm\:md\:text_red200 {
+        color: red200
     }
-  }
+        }
+      }
 
   @media screen and (min-width: 768px) {
     .md\:px_6 {
-      padding-inline: var(--spacing-6);
-    }
+      padding-inline: var(--spacing-6)
   }
+    }
 
   @media screen and (min-width: 1024px) {
     .lg\:px_8 {
-      padding-inline: var(--spacing-8);
-    }
+      padding-inline: var(--spacing-8)
   }
-}
+    }
+}