@pandacss/eslint-plugin 0.1.3 → 0.1.5

package/dist/utils/worker.mjs

@@ -13,7 +13,7 @@ init_esm_shims();
 // ../fixture/src/config.ts
 init_esm_shims();
 
-// ../node_modules/.pnpm/@pandacss+preset-base@0.31.0/node_modules/@pandacss/preset-base/dist/index.mjs
+// ../node_modules/.pnpm/@pandacss+preset-base@0.39.1/node_modules/@pandacss/preset-base/dist/index.mjs
 init_esm_shims();
 var conditions = {
   hover: "&:is(:hover, [data-hover])",
@@ -90,8 +90,8 @@ var conditions = {
   print: "@media print",
   landscape: "@media (orientation: landscape)",
   portrait: "@media (orientation: portrait)",
-  dark: " &.dark, .dark &",
-  light: " &.light, .light &",
+  dark: ".dark &",
+  light: ".light &",
   osDark: "@media (prefers-color-scheme: dark)",
   osLight: "@media (prefers-color-scheme: light)",
   highContrast: "@media (forced-colors: active)",
@@ -103,181 +103,607 @@ var conditions = {
   scrollbarThumb: "&::-webkit-scrollbar-thumb",
   scrollbarTrack: "&::-webkit-scrollbar-track",
   horizontal: "&[data-orientation=horizontal]",
-  vertical: "&[data-orientation=vertical]"
+  vertical: "&[data-orientation=vertical]",
+  starting: "@starting-style"
 };
-var createColorMixTransform = (prop) => (value, args) => {
-  const mix = args.utils.colorMix(value);
-  if (mix.invalid)
-    return { [prop]: value };
-  const cssVar = "--mix-" + prop;
-  return {
-    [cssVar]: mix.value,
-    [prop]: `var(${cssVar}, ${mix.color})`
-  };
+var EMPTY = "/*-*/ /*-*/";
+var globalCss = {
+  "*, ::before, ::after, ::backdrop": {
+    "--blur": EMPTY,
+    "--brightness": EMPTY,
+    "--contrast": EMPTY,
+    "--grayscale": EMPTY,
+    "--hue-rotate": EMPTY,
+    "--invert": EMPTY,
+    "--saturate": EMPTY,
+    "--sepia": EMPTY,
+    "--drop-shadow": EMPTY,
+    "--backdrop-blur": EMPTY,
+    "--backdrop-brightness": EMPTY,
+    "--backdrop-contrast": EMPTY,
+    "--backdrop-grayscale": EMPTY,
+    "--backdrop-hue-rotate": EMPTY,
+    "--backdrop-invert": EMPTY,
+    "--backdrop-opacity": EMPTY,
+    "--backdrop-saturate": EMPTY,
+    "--backdrop-sepia": EMPTY,
+    "--gradient-from-position": EMPTY,
+    "--gradient-to-position": EMPTY,
+    "--gradient-via-position": EMPTY,
+    "--scroll-snap-strictness": "proximity",
+    "--border-spacing-x": 0,
+    "--border-spacing-y": 0,
+    "--translate-x": 0,
+    "--translate-y": 0,
+    "--rotate": 0,
+    "--rotate-x": 0,
+    "--rotate-y": 0,
+    "--skew-x": 0,
+    "--skew-y": 0,
+    "--scale-x": 1,
+    "--scale-y": 1
+  }
 };
-var background = {
-  backgroundPosition: {
-    shorthand: "bgPosition",
-    className: "bg"
-  },
-  backgroundPositionX: {
-    shorthand: "bgPositionX",
-    className: "bg-x"
-  },
-  backgroundPositionY: {
-    shorthand: "bgPositionY",
-    className: "bg-y"
-  },
-  backgroundAttachment: {
-    shorthand: "bgAttachment",
-    className: "bg"
-  },
-  backgroundClip: {
-    shorthand: "bgClip",
-    className: "bg-clip",
-    transform(value) {
-      return {
-        backgroundClip: value,
-        WebkitBackgroundClip: value
-      };
-    }
-  },
-  background: {
-    shorthand: "bg",
-    className: "bg",
-    values: "colors",
-    transform: createColorMixTransform("background")
-  },
-  backgroundColor: {
-    shorthand: "bgColor",
-    className: "bg",
-    values: "colors",
-    transform: createColorMixTransform("backgroundColor")
-  },
-  backgroundOrigin: {
-    shorthand: "bgOrigin",
-    className: "bg-origin"
+function definePattern(config2) {
+  return config2;
+}
+var box = definePattern({
+  transform(props) {
+    return props;
+  }
+});
+var flex = definePattern({
+  properties: {
+    align: { type: "property", value: "alignItems" },
+    justify: { type: "property", value: "justifyContent" },
+    direction: { type: "property", value: "flexDirection" },
+    wrap: { type: "property", value: "flexWrap" },
+    basis: { type: "property", value: "flexBasis" },
+    grow: { type: "property", value: "flexGrow" },
+    shrink: { type: "property", value: "flexShrink" }
   },
-  backgroundImage: {
-    shorthand: "bgImage",
-    className: "bg-img",
-    values: "assets"
+  transform(props) {
+    const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
+    return {
+      display: "flex",
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      flexWrap: wrap2,
+      flexBasis: basis,
+      flexGrow: grow,
+      flexShrink: shrink,
+      ...rest
+    };
+  }
+});
+var stack = definePattern({
+  properties: {
+    align: { type: "property", value: "alignItems" },
+    justify: { type: "property", value: "justifyContent" },
+    direction: { type: "property", value: "flexDirection" },
+    gap: { type: "property", value: "gap" }
   },
-  backgroundRepeat: {
-    shorthand: "bgRepeat",
-    className: "bg-repeat"
+  defaultValues: {
+    direction: "column",
+    gap: "10px"
   },
-  backgroundBlendMode: {
-    shorthand: "bgBlendMode",
-    className: "bg-blend"
+  transform(props) {
+    const { align, justify, direction, gap, ...rest } = props;
+    return {
+      display: "flex",
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      gap,
+      ...rest
+    };
+  }
+});
+var vstack = definePattern({
+  jsxName: "VStack",
+  properties: {
+    justify: { type: "property", value: "justifyContent" },
+    gap: { type: "property", value: "gap" }
   },
-  backgroundSize: {
-    shorthand: "bgSize",
-    className: "bg"
+  defaultValues: {
+    gap: "10px"
   },
-  backgroundGradient: {
-    shorthand: "bgGradient",
-    className: "bg-gradient",
-    values(theme2) {
-      return {
-        ...theme2("gradients"),
-        "to-t": "linear-gradient(to top, var(--gradient))",
-        "to-tr": "linear-gradient(to top right, var(--gradient))",
-        "to-r": "linear-gradient(to right, var(--gradient))",
-        "to-br": "linear-gradient(to bottom right, var(--gradient))",
-        "to-b": "linear-gradient(to bottom, var(--gradient))",
-        "to-bl": "linear-gradient(to bottom left, var(--gradient))",
-        "to-l": "linear-gradient(to left, var(--gradient))",
-        "to-tl": "linear-gradient(to top left, var(--gradient))"
-      };
-    },
-    transform(value) {
-      return {
-        "--gradient-stops": "var(--gradient-from), var(--gradient-to)",
-        "--gradient": "var(--gradient-via-stops, var(--gradient-stops))",
-        backgroundImage: value
-      };
-    }
+  transform(props) {
+    const { justify, gap, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: justify,
+      gap,
+      flexDirection: "column",
+      ...rest
+    };
+  }
+});
+var hstack = definePattern({
+  jsxName: "HStack",
+  properties: {
+    justify: { type: "property", value: "justifyContent" },
+    gap: { type: "property", value: "gap" }
   },
-  textGradient: {
-    className: "text-gradient",
-    values(theme2) {
-      return {
-        ...theme2("gradients"),
-        "to-t": "linear-gradient(to top, var(--gradient))",
-        "to-tr": "linear-gradient(to top right, var(--gradient))",
-        "to-r": "linear-gradient(to right, var(--gradient))",
-        "to-br": "linear-gradient(to bottom right, var(--gradient))",
-        "to-b": "linear-gradient(to bottom, var(--gradient))",
-        "to-bl": "linear-gradient(to bottom left, var(--gradient))",
-        "to-l": "linear-gradient(to left, var(--gradient))",
-        "to-tl": "linear-gradient(to top left, var(--gradient))"
-      };
-    },
-    transform(value) {
-      return {
-        "--gradient-stops": "var(--gradient-from), var(--gradient-to)",
-        "--gradient": "var(--gradient-via-stops, var(--gradient-stops))",
-        backgroundImage: value,
-        WebkitBackgroundClip: "text",
-        color: "transparent"
-      };
-    }
+  defaultValues: {
+    gap: "10px"
   },
-  gradientFrom: {
-    className: "from",
-    values: "colors",
-    transform: createColorMixTransform("--gradient-from")
+  transform(props) {
+    const { justify, gap, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: justify,
+      gap,
+      flexDirection: "row",
+      ...rest
+    };
+  }
+});
+var spacer = definePattern({
+  properties: {
+    size: { type: "token", value: "spacing" }
   },
-  gradientTo: {
-    className: "to",
-    values: "colors",
-    transform: createColorMixTransform("--gradient-to")
+  transform(props, { map }) {
+    const { size, ...rest } = props;
+    return {
+      alignSelf: "stretch",
+      justifySelf: "stretch",
+      flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
+      ...rest
+    };
+  }
+});
+var circle = definePattern({
+  properties: {
+    size: { type: "property", value: "width" }
   },
-  gradientVia: {
-    className: "via",
-    values: "colors",
-    transform(value, args) {
-      const transformed = gradientVia(value, args);
-      return {
-        ...transformed,
-        "--gradient-via-stops": "var(--gradient-from), var(--gradient-via), var(--gradient-to)"
-      };
-    }
+  transform(props) {
+    const { size, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "0 0 auto",
+      width: size,
+      height: size,
+      borderRadius: "9999px",
+      ...rest
+    };
   }
-};
-var gradientVia = createColorMixTransform("--gradient-via");
-var border = {
-  borderRadius: {
-    className: "rounded",
-    shorthand: "rounded",
-    values: "radii"
+});
+var square = definePattern({
+  properties: {
+    size: { type: "property", value: "width" }
   },
-  borderTopLeftRadius: {
-    className: "rounded-tl",
-    shorthand: "roundedTopLeft",
-    values: "radii"
+  transform(props) {
+    const { size, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "0 0 auto",
+      width: size,
+      height: size,
+      ...rest
+    };
+  }
+});
+var grid = definePattern({
+  properties: {
+    gap: { type: "property", value: "gap" },
+    columnGap: { type: "property", value: "gap" },
+    rowGap: { type: "property", value: "gap" },
+    columns: { type: "number" },
+    minChildWidth: { type: "token", value: "sizes", property: "width" }
   },
-  borderTopRightRadius: {
-    className: "rounded-tr",
-    shorthand: "roundedTopRight",
-    values: "radii"
+  defaultValues(props) {
+    return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
   },
-  borderBottomRightRadius: {
+  transform(props, { map, isCssUnit }) {
+    const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+    const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+    return {
+      display: "grid",
+      gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
+      gap,
+      columnGap,
+      rowGap,
+      ...rest
+    };
+  }
+});
+var gridItem = definePattern({
+  properties: {
+    colSpan: { type: "number" },
+    rowSpan: { type: "number" },
+    colStart: { type: "number" },
+    rowStart: { type: "number" },
+    colEnd: { type: "number" },
+    rowEnd: { type: "number" }
+  },
+  transform(props, { map }) {
+    const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
+    const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+    return {
+      gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+      gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+      gridColumnStart: colStart,
+      gridColumnEnd: colEnd,
+      gridRowStart: rowStart,
+      gridRowEnd: rowEnd,
+      ...rest
+    };
+  }
+});
+var wrap = definePattern({
+  properties: {
+    gap: { type: "property", value: "gap" },
+    rowGap: { type: "property", value: "gap" },
+    columnGap: { type: "property", value: "gap" },
+    align: { type: "property", value: "alignItems" },
+    justify: { type: "property", value: "justifyContent" }
+  },
+  transform(props) {
+    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
+    return {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: align,
+      justifyContent: justify,
+      gap,
+      columnGap,
+      rowGap,
+      ...rest
+    };
+  }
+});
+var container = definePattern({
+  transform(props) {
+    return {
+      position: "relative",
+      maxWidth: "8xl",
+      mx: "auto",
+      px: { base: "4", md: "6", lg: "8" },
+      ...props
+    };
+  }
+});
+var center = definePattern({
+  properties: {
+    inline: { type: "boolean" }
+  },
+  transform(props) {
+    const { inline, ...rest } = props;
+    return {
+      display: inline ? "inline-flex" : "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      ...rest
+    };
+  }
+});
+var aspectRatio = definePattern({
+  properties: {
+    ratio: { type: "number" }
+  },
+  blocklist: ["aspectRatio"],
+  transform(props, { map }) {
+    const { ratio = 4 / 3, ...rest } = props;
+    return {
+      position: "relative",
+      _before: {
+        content: `""`,
+        display: "block",
+        height: "0",
+        paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
+      },
+      "&>*": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        position: "absolute",
+        inset: "0",
+        width: "100%",
+        height: "100%"
+      },
+      "&>img, &>video": {
+        objectFit: "cover"
+      },
+      ...rest
+    };
+  }
+});
+var divider = definePattern({
+  properties: {
+    orientation: { type: "enum", value: ["horizontal", "vertical"] },
+    thickness: { type: "token", value: "sizes", property: "borderWidth" },
+    color: { type: "token", value: "colors", property: "borderColor" }
+  },
+  defaultValues: {
+    orientation: "horizontal",
+    thickness: "1px"
+  },
+  transform(props, { map }) {
+    const { orientation, thickness, color, ...rest } = props;
+    return {
+      "--thickness": thickness,
+      width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
+      height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
+      borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+      borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
+      borderColor: color,
+      ...rest
+    };
+  }
+});
+var linkOverlay = definePattern({
+  jsxElement: "a",
+  transform(props) {
+    return {
+      _before: {
+        content: '""',
+        position: "absolute",
+        inset: "0",
+        zIndex: "0",
+        ...props["_before"]
+      },
+      ...props
+    };
+  }
+});
+var float = definePattern({
+  properties: {
+    offsetX: { type: "token", value: "spacing", property: "left" },
+    offsetY: { type: "token", value: "spacing", property: "top" },
+    offset: { type: "token", value: "spacing", property: "top" },
+    placement: {
+      type: "enum",
+      value: [
+        "bottom-end",
+        "bottom-start",
+        "top-end",
+        "top-start",
+        "bottom-center",
+        "top-center",
+        "middle-center",
+        "middle-end",
+        "middle-start"
+      ]
+    }
+  },
+  defaultValues(props) {
+    const offset = props.offset || "0";
+    return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
+  },
+  transform(props, { map }) {
+    const { offset, offsetX, offsetY, placement, ...rest } = props;
+    return {
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      insetBlockStart: map(placement, (v) => {
+        const [side] = v.split("-");
+        const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
+        return map2[side];
+      }),
+      insetBlockEnd: map(placement, (v) => {
+        const [side] = v.split("-");
+        const map2 = { top: "auto", middle: "50%", bottom: offsetY };
+        return map2[side];
+      }),
+      insetInlineStart: map(placement, (v) => {
+        const [, align] = v.split("-");
+        const map2 = { start: offsetX, center: "50%", end: "auto" };
+        return map2[align];
+      }),
+      insetInlineEnd: map(placement, (v) => {
+        const [, align] = v.split("-");
+        const map2 = { start: "auto", center: "50%", end: offsetX };
+        return map2[align];
+      }),
+      translate: map(placement, (v) => {
+        const [side, align] = v.split("-");
+        const mapX = { start: "-50%", center: "-50%", end: "50%" };
+        const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
+        return `${mapX[align]} ${mapY[side]}`;
+      }),
+      ...rest
+    };
+  }
+});
+var bleed = definePattern({
+  properties: {
+    inline: { type: "property", value: "marginInline" },
+    block: { type: "property", value: "marginBlock" }
+  },
+  defaultValues: {
+    inline: "0",
+    block: "0"
+  },
+  transform(props, { map, isCssUnit, isCssVar }) {
+    const { inline, block, ...rest } = props;
+    const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+    return {
+      "--bleed-x": map(inline, valueFn),
+      "--bleed-y": map(block, valueFn),
+      marginInline: "calc(var(--bleed-x, 0) * -1)",
+      marginBlock: "calc(var(--bleed-y, 0) * -1)",
+      ...rest
+    };
+  }
+});
+var visuallyHidden = definePattern({
+  transform(props) {
+    return {
+      srOnly: true,
+      ...props
+    };
+  }
+});
+var cq = definePattern({
+  properties: {
+    name: { type: "token", value: "containerNames", property: "containerName" },
+    type: { type: "property", value: "containerType" }
+  },
+  defaultValues: {
+    type: "inline-size"
+  },
+  transform(props) {
+    const { name, type, ...rest } = props;
+    return {
+      containerType: type,
+      containerName: name,
+      ...rest
+    };
+  }
+});
+var patterns = {
+  box,
+  flex,
+  stack,
+  vstack,
+  hstack,
+  spacer,
+  square,
+  circle,
+  center,
+  linkOverlay,
+  aspectRatio,
+  grid,
+  gridItem,
+  wrap,
+  container,
+  divider,
+  float,
+  bleed,
+  visuallyHidden,
+  cq
+};
+var createColorMixTransform = (prop) => (value, args) => {
+  const mix = args.utils.colorMix(value);
+  if (mix.invalid)
+    return { [prop]: value };
+  const cssVar = "--mix-" + prop;
+  return {
+    [cssVar]: mix.value,
+    [prop]: `var(${cssVar}, ${mix.color})`
+  };
+};
+var background = {
+  backgroundPosition: {
+    shorthand: "bgPosition",
+    className: "bg-pos",
+    group: "Background"
+  },
+  backgroundPositionX: {
+    shorthand: "bgPositionX",
+    className: "bg-pos-x",
+    group: "Background"
+  },
+  backgroundPositionY: {
+    shorthand: "bgPositionY",
+    className: "bg-pos-y",
+    group: "Background"
+  },
+  backgroundAttachment: {
+    shorthand: "bgAttachment",
+    className: "bg-attach",
+    group: "Background"
+  },
+  backgroundClip: {
+    shorthand: "bgClip",
+    className: "bg-clip",
+    group: "Background",
+    transform(value) {
+      return {
+        backgroundClip: value,
+        WebkitBackgroundClip: value
+      };
+    }
+  },
+  background: {
+    shorthand: "bg",
+    className: "bg",
+    values: "colors",
+    group: "Background",
+    transform: createColorMixTransform("background")
+  },
+  backgroundColor: {
+    shorthand: "bgColor",
+    className: "bg",
+    values: "colors",
+    group: "Background",
+    transform: createColorMixTransform("backgroundColor")
+  },
+  backgroundOrigin: {
+    shorthand: "bgOrigin",
+    className: "bg-origin",
+    group: "Background"
+  },
+  backgroundImage: {
+    shorthand: "bgImage",
+    className: "bg-img",
+    values: "assets",
+    group: "Background"
+  },
+  backgroundRepeat: {
+    shorthand: "bgRepeat",
+    className: "bg-repeat",
+    group: "Background"
+  },
+  backgroundBlendMode: {
+    shorthand: "bgBlendMode",
+    className: "bg-blend",
+    group: "Background"
+  },
+  backgroundSize: {
+    shorthand: "bgSize",
+    className: "bg-size",
+    group: "Background"
+  }
+};
+var border = {
+  borderRadius: {
+    className: "rounded",
+    shorthand: "rounded",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderTopLeftRadius: {
+    className: "rounded-tl",
+    shorthand: "roundedTopLeft",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderTopRightRadius: {
+    className: "rounded-tr",
+    shorthand: "roundedTopRight",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderBottomRightRadius: {
     className: "rounded-br",
     shorthand: "roundedBottomRight",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderBottomLeftRadius: {
     className: "rounded-bl",
     shorthand: "roundedBottomLeft",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderTopRadius: {
     className: "rounded-t",
     shorthand: "roundedTop",
     property: "borderRadius",
     values: "radii",
+    group: "Border Radius",
     transform(value) {
       return {
         borderTopLeftRadius: value,
@@ -290,6 +716,7 @@ var border = {
     shorthand: "roundedRight",
     property: "borderRadius",
     values: "radii",
+    group: "Border Radius",
     transform(value) {
       return {
         borderTopRightRadius: value,
@@ -302,6 +729,7 @@ var border = {
     shorthand: "roundedBottom",
     property: "borderRadius",
     values: "radii",
+    group: "Border Radius",
     transform(value) {
       return {
         borderBottomLeftRadius: value,
@@ -314,6 +742,7 @@ var border = {
     shorthand: "roundedLeft",
     values: "radii",
     property: "borderRadius",
+    group: "Border Radius",
     transform(value) {
       return {
         borderTopLeftRadius: value,
@@ -324,18 +753,21 @@ var border = {
   borderStartStartRadius: {
     className: "rounded-ss",
     shorthand: "roundedStartStart",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderStartEndRadius: {
     className: "rounded-se",
     shorthand: "roundedStartEnd",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderStartRadius: {
     className: "rounded-s",
     values: "radii",
     property: "borderRadius",
     shorthand: "roundedStart",
+    group: "Border Radius",
     transform(value) {
       return {
         borderStartStartRadius: value,
@@ -346,18 +778,21 @@ var border = {
   borderEndStartRadius: {
     className: "rounded-es",
     shorthand: "roundedEndStart",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderEndEndRadius: {
     className: "rounded-ee",
     shorthand: "roundedEndEnd",
-    values: "radii"
+    values: "radii",
+    group: "Border Radius"
   },
   borderEndRadius: {
     className: "rounded-e",
     shorthand: "roundedEnd",
     property: "borderRadius",
     values: "radii",
+    group: "Border Radius",
     transform(value) {
       return {
         borderStartEndRadius: value,
@@ -367,172 +802,208 @@ var border = {
   },
   border: {
     className: "border",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderWidth: {
     className: "border-w",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border Radius"
   },
   borderTopWidth: {
     className: "border-tw",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border"
   },
   borderLeftWidth: {
     className: "border-lw",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border"
   },
   borderRightWidth: {
     className: "border-rw",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border"
   },
   borderBottomWidth: {
     className: "border-bw",
-    values: "borderWidths"
+    values: "borderWidths",
+    group: "Border"
   },
   borderColor: {
     className: "border",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderColor")
   },
   borderInline: {
     className: "border-x",
     values: "borders",
+    group: "Border",
     shorthand: "borderX"
   },
   borderInlineWidth: {
     className: "border-x",
     values: "borderWidths",
+    group: "Border",
     shorthand: "borderXWidth"
   },
   borderInlineColor: {
     className: "border-x",
     values: "colors",
+    group: "Border",
     shorthand: "borderXColor",
     transform: createColorMixTransform("borderInlineColor")
   },
   borderBlock: {
     className: "border-y",
     values: "borders",
+    group: "Border",
     shorthand: "borderY"
   },
   borderBlockWidth: {
     className: "border-y",
     values: "borderWidths",
+    group: "Border",
     shorthand: "borderYWidth"
   },
   borderBlockColor: {
     className: "border-y",
     values: "colors",
+    group: "Border",
     shorthand: "borderYColor",
     transform: createColorMixTransform("borderBlockColor")
   },
   borderLeft: {
     className: "border-l",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderLeftColor: {
     className: "border-l",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderLeftColor")
   },
   borderInlineStart: {
     className: "border-s",
     values: "borders",
+    group: "Border",
     shorthand: "borderStart"
   },
   borderInlineStartWidth: {
     className: "border-s",
     values: "borderWidths",
+    group: "Border",
     shorthand: "borderStartWidth"
   },
   borderInlineStartColor: {
     className: "border-s",
     values: "colors",
+    group: "Border",
     shorthand: "borderStartColor",
     transform: createColorMixTransform("borderInlineStartColor")
   },
   borderRight: {
     className: "border-r",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderRightColor: {
     className: "border-r",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderRightColor")
   },
   borderInlineEnd: {
     className: "border-e",
     values: "borders",
+    group: "Border",
     shorthand: "borderEnd"
   },
   borderInlineEndWidth: {
     className: "border-e",
     values: "borderWidths",
+    group: "Border",
     shorthand: "borderEndWidth"
   },
   borderInlineEndColor: {
     className: "border-e",
     values: "colors",
+    group: "Border",
     shorthand: "borderEndColor",
     transform: createColorMixTransform("borderInlineEndColor")
   },
   borderTop: {
     className: "border-t",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderTopColor: {
     className: "border-t",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderTopColor")
   },
   borderBottom: {
     className: "border-b",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderBottomColor: {
     className: "border-b",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderBottomColor")
   },
   borderBlockEnd: {
     className: "border-be",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderBlockEndColor: {
     className: "border-be",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderBlockEndColor")
   },
   borderBlockStart: {
     className: "border-bs",
-    values: "borders"
+    values: "borders",
+    group: "Border"
   },
   borderBlockStartColor: {
     className: "border-bs",
     values: "colors",
+    group: "Border",
     transform: createColorMixTransform("borderBlockStartColor")
   }
 };
-var container = {
+var container2 = {
   container: {
-    className: "cq"
+    className: "cq",
+    group: "Container"
   },
   containerName: {
     className: "cq-name",
     property: "containerName",
-    values: "containerNames"
+    values: "containerNames",
+    group: "Container"
   },
   containerType: {
-    className: "cq-type"
+    className: "cq-type",
+    group: "Container"
   }
 };
 var display = {
   display: {
-    className: "d"
+    className: "d",
+    group: "Display"
   },
   hideFrom: {
     className: "hide",
     values: "breakpoints",
+    group: "Display",
     transform(value, { raw, token }) {
       const bp = token.raw(`breakpoints.${raw}`);
       const media = bp ? `@breakpoint ${raw}` : `@media screen and (min-width: ${value})`;
@@ -546,1985 +1017,1874 @@ var display = {
   hideBelow: {
     className: "show",
     values: "breakpoints",
+    group: "Display",
     transform(value, { raw, token }) {
       const bp = token.raw(`breakpoints.${raw}`);
       const media = bp ? `@breakpoint ${raw}Down` : `@media screen and (max-width: ${value})`;
       return {
         [media]: {
           display: "none"
-        }
-      };
-    }
-  }
-};
-var divide = {
-  divideX: {
-    className: "divide-x",
-    values: { type: "string" },
-    transform(value) {
-      return {
-        "& > :not([hidden]) ~ :not([hidden])": {
-          borderInlineStartWidth: value,
-          borderInlineEndWidth: "0px"
-        }
-      };
-    }
-  },
-  divideY: {
-    className: "divide-y",
-    values: { type: "string" },
-    transform(value) {
-      return {
-        "& > :not([hidden]) ~ :not([hidden])": {
-          borderTopWidth: value,
-          borderBottomWidth: "0px"
-        }
-      };
-    }
-  },
-  divideColor: {
-    className: "divide",
-    values: "colors",
-    transform(value, args) {
-      return {
-        "& > :not([hidden]) ~ :not([hidden])": divideColor(value, args)
-      };
-    }
-  },
-  divideStyle: {
-    className: "divide",
-    property: "borderStyle",
-    transform(value) {
-      return {
-        "& > :not([hidden]) ~ :not([hidden])": {
-          borderStyle: value
-        }
-      };
-    }
-  }
-};
-var divideColor = createColorMixTransform("borderColor");
-var effects = {
-  opacity: {
-    values: "opacity"
-  },
-  boxShadow: {
-    shorthand: "shadow",
-    className: "shadow",
-    values: "shadows"
-  },
-  boxShadowColor: {
-    shorthand: "shadowColor",
-    className: "shadow",
-    values: "colors",
-    transform: createColorMixTransform("--shadow-color")
-  },
-  mixBlendMode: {
-    className: "mix-blend"
-  },
-  filter: {
-    className: "filter",
-    values: {
-      auto: [
-        "var(--blur)",
-        "var(--brightness)",
-        "var(--contrast)",
-        "var(--grayscale)",
-        "var(--hue-rotate)",
-        "var(--invert)",
-        "var(--saturate)",
-        "var(--sepia)",
-        "var(--drop-shadow)"
-      ].join(" ")
-    }
-  },
-  brightness: {
-    className: "brightness",
-    transform(value) {
-      return {
-        "--brightness": `brightness(${value})`
-      };
-    }
-  },
-  contrast: {
-    className: "contrast",
-    transform(value) {
-      return {
-        "--contrast": `contrast(${value})`
-      };
-    }
-  },
-  grayscale: {
-    className: "grayscale",
-    transform(value) {
-      return {
-        "--grayscale": `grayscale(${value})`
-      };
-    }
-  },
-  hueRotate: {
-    className: "hue-rotate",
-    transform(value) {
-      return {
-        "--hue-rotate": `hue-rotate(${value})`
-      };
-    }
-  },
-  invert: {
-    className: "invert",
-    transform(value) {
-      return {
-        "--invert": `invert(${value})`
-      };
-    }
-  },
-  saturate: {
-    className: "saturate",
-    transform(value) {
-      return {
-        "--saturate": `saturate(${value})`
-      };
-    }
-  },
-  sepia: {
-    className: "sepia",
-    transform(value) {
-      return {
-        "--sepia": `sepia(${value})`
-      };
-    }
-  },
-  dropShadow: {
-    className: "drop-shadow",
-    values: "dropShadows",
-    transform(value) {
-      return {
-        "--drop-shadow": value
-      };
-    }
-  },
-  blur: {
-    className: "blur",
-    values: "blurs",
-    transform(value) {
-      return {
-        "--blur": `blur(${value})`
-      };
-    }
-  },
-  backdropFilter: {
-    className: "backdrop",
-    values: {
-      auto: [
-        "var(--backdrop-blur)",
-        "var(--backdrop-brightness)",
-        "var(--backdrop-contrast)",
-        "var(--backdrop-grayscale)",
-        "var(--backdrop-hue-rotate)",
-        "var(--backdrop-invert)",
-        "var(--backdrop-saturate)",
-        "var(--backdrop-sepia)"
-      ].join(" ")
-    },
-    transform(value) {
-      return {
-        backdropFilter: value,
-        WebkitBackdropFilter: value
-      };
-    }
-  },
-  backdropBlur: {
-    className: "backdrop-blur",
-    values: "blurs",
-    transform(value) {
-      return {
-        "--backdrop-blur": `blur(${value})`
-      };
-    }
-  },
-  backdropBrightness: {
-    className: "backdrop-brightness",
-    transform(value) {
-      return {
-        "--backdrop-brightness": `brightness(${value})`
-      };
-    }
-  },
-  backdropContrast: {
-    className: "backdrop-contrast",
-    transform(value) {
-      return {
-        "--backdrop-contrast": `contrast(${value})`
-      };
-    }
-  },
-  backdropGrayscale: {
-    className: "backdrop-grayscale",
-    transform(value) {
-      return {
-        "--backdrop-grayscale": `grayscale(${value})`
-      };
-    }
-  },
-  backdropHueRotate: {
-    className: "backdrop-hue-rotate",
-    transform(value) {
-      return {
-        "--backdrop-hue-rotate": `hue-rotate(${value})`
+        }
       };
     }
-  },
-  backdropInvert: {
-    className: "backdrop-invert",
+  }
+};
+var divideColor = createColorMixTransform("borderColor");
+var divide = {
+  divideX: {
+    className: "divide-x",
+    values: "borderWidths",
+    group: "Border",
     transform(value) {
       return {
-        "--backdrop-invert": `invert(${value})`
+        "& > :not([hidden]) ~ :not([hidden])": {
+          borderInlineStartWidth: value,
+          borderInlineEndWidth: "0px"
+        }
       };
     }
   },
-  backdropOpacity: {
-    className: "backdrop-opacity",
+  divideY: {
+    className: "divide-y",
+    values: "borderWidths",
+    group: "Border",
     transform(value) {
       return {
-        "--backdrop-opacity": value
+        "& > :not([hidden]) ~ :not([hidden])": {
+          borderTopWidth: value,
+          borderBottomWidth: "0px"
+        }
       };
     }
   },
-  backdropSaturate: {
-    className: "backdrop-saturate",
-    transform(value) {
+  divideColor: {
+    className: "divide-color",
+    values: "colors",
+    group: "Border",
+    transform(value, args) {
       return {
-        "--backdrop-saturate": `saturate(${value})`
+        "& > :not([hidden]) ~ :not([hidden])": divideColor(value, args)
       };
     }
   },
-  backdropSepia: {
-    className: "backdrop-sepia",
+  divideStyle: {
+    className: "divide-style",
+    property: "borderStyle",
+    group: "Border",
     transform(value) {
       return {
-        "--backdrop-sepia": `sepia(${value})`
+        "& > :not([hidden]) ~ :not([hidden])": {
+          borderStyle: value
+        }
       };
     }
   }
 };
-var flexGrid = {
-  flexBasis: {
-    className: "basis",
-    values(theme2) {
-      return {
-        ...theme2("spacing"),
-        "1/2": "50%",
-        "1/3": "33.333333%",
-        "2/3": "66.666667%",
-        "1/4": "25%",
-        "2/4": "50%",
-        "3/4": "75%",
-        "1/5": "20%",
-        "2/5": "40%",
-        "3/5": "60%",
-        "4/5": "80%",
-        "1/6": "16.666667%",
-        "2/6": "33.333333%",
-        "3/6": "50%",
-        "4/6": "66.666667%",
-        "5/6": "83.333333%",
-        "1/12": "8.333333%",
-        "2/12": "16.666667%",
-        "3/12": "25%",
-        "4/12": "33.333333%",
-        "5/12": "41.666667%",
-        "6/12": "50%",
-        "7/12": "58.333333%",
-        "8/12": "66.666667%",
-        "9/12": "75%",
-        "10/12": "83.333333%",
-        "11/12": "91.666667%",
-        full: "100%"
-      };
-    }
-  },
-  flex: {
-    className: "flex",
-    values: {
-      "1": "1 1 0%",
-      auto: "1 1 auto",
-      initial: "0 1 auto",
-      none: "none"
-    }
-  },
-  flexDirection: {
-    className: "flex",
-    shorthand: "flexDir"
-  },
-  flexGrow: {
-    className: "grow"
-  },
-  flexShrink: {
-    className: "shrink"
-  },
-  gridTemplateColumns: {
-    className: "grid-cols",
-    values: {
-      "1": "repeat(1, minmax(0, 1fr))",
-      "2": "repeat(2, minmax(0, 1fr))",
-      "3": "repeat(3, minmax(0, 1fr))",
-      "4": "repeat(4, minmax(0, 1fr))",
-      "5": "repeat(5, minmax(0, 1fr))",
-      "6": "repeat(6, minmax(0, 1fr))",
-      "7": "repeat(7, minmax(0, 1fr))",
-      "8": "repeat(8, minmax(0, 1fr))",
-      "9": "repeat(9, minmax(0, 1fr))",
-      "10": "repeat(10, minmax(0, 1fr))",
-      "11": "repeat(11, minmax(0, 1fr))",
-      "12": "repeat(12, minmax(0, 1fr))"
-    }
-  },
-  gridTemplateRows: {
-    className: "grid-rows",
-    values: {
-      "1": "repeat(1, minmax(0, 1fr))",
-      "2": "repeat(2, minmax(0, 1fr))",
-      "3": "repeat(3, minmax(0, 1fr))",
-      "4": "repeat(4, minmax(0, 1fr))",
-      "5": "repeat(5, minmax(0, 1fr))",
-      "6": "repeat(6, minmax(0, 1fr))",
-      "7": "repeat(7, minmax(0, 1fr))",
-      "8": "repeat(8, minmax(0, 1fr))",
-      "9": "repeat(9, minmax(0, 1fr))",
-      "10": "repeat(10, minmax(0, 1fr))",
-      "11": "repeat(11, minmax(0, 1fr))",
-      "12": "repeat(12, minmax(0, 1fr))"
-    }
-  },
-  gridColumn: {
-    className: "col-span",
-    values: {
-      full: "1 / -1",
-      "1": "span 1 / span 1",
-      "2": "span 2 / span 2",
-      "3": "span 3 / span 3",
-      "4": "span 4 / span 4",
-      "5": "span 5 / span 5",
-      "6": "span 6 / span 6",
-      "7": "span 7 / span 7",
-      "8": "span 8 / span 8",
-      "9": "span 9 / span 9",
-      "10": "span 10 / span 10",
-      "11": "span 11 / span 11",
-      "12": "span 12 / span 12"
-    }
-  },
-  gridRow: {
-    className: "row-span",
-    values: {
-      full: "1 / -1",
-      "1": "span 1 / span 1",
-      "2": "span 2 / span 2",
-      "3": "span 3 / span 3",
-      "4": "span 4 / span 4",
-      "5": "span 5 / span 5",
-      "6": "span 6 / span 6",
-      "7": "span 7 / span 7",
-      "8": "span 8 / span 8",
-      "9": "span 9 / span 9",
-      "10": "span 10 / span 10",
-      "11": "span 11 / span 11",
-      "12": "span 12 / span 12"
-    }
-  },
-  gridColumnStart: {
-    className: "col-start"
+var effects = {
+  opacity: {
+    values: "opacity",
+    group: "Background"
   },
-  gridColumnEnd: {
-    className: "col-end"
+  boxShadow: {
+    shorthand: "shadow",
+    className: "shadow",
+    values: "shadows",
+    group: "Shadow"
   },
-  gridAutoFlow: {
-    className: "grid-flow"
+  boxShadowColor: {
+    shorthand: "shadowColor",
+    className: "shadow-color",
+    values: "colors",
+    transform: createColorMixTransform("--shadow-color"),
+    group: "Color"
   },
-  gridAutoColumns: {
-    className: "auto-cols",
-    values: {
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
-    }
+  mixBlendMode: {
+    className: "mix-blend",
+    group: "Effect"
   },
-  gridAutoRows: {
-    className: "auto-rows",
+  filter: {
+    className: "filter",
+    group: "Effect",
     values: {
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
+      auto: "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )"
     }
   },
-  gap: {
-    className: "gap",
-    values: "spacing"
-  },
-  gridGap: {
-    className: "gap",
-    values: "spacing"
-  },
-  gridRowGap: {
-    className: "gap-x",
-    values: "spacing"
-  },
-  gridColumnGap: {
-    className: "gap-y",
-    values: "spacing"
-  },
-  rowGap: {
-    className: "gap-x",
-    values: "spacing"
-  },
-  columnGap: {
-    className: "gap-y",
-    values: "spacing"
-  },
-  justifyContent: {
-    className: "justify"
-  },
-  alignContent: {
-    className: "content"
-  },
-  alignItems: {
-    className: "items"
-  },
-  alignSelf: {
-    className: "self"
-  }
-};
-var srMapping = {
-  true: {
-    position: "absolute",
-    width: "1px",
-    height: "1px",
-    padding: "0",
-    margin: "-1px",
-    overflow: "hidden",
-    clip: "rect(0, 0, 0, 0)",
-    whiteSpace: "nowrap",
-    borderWidth: "0"
-  },
-  false: {
-    position: "static",
-    width: "auto",
-    height: "auto",
-    padding: "0",
-    margin: "0",
-    overflow: "visible",
-    clip: "auto",
-    whiteSpace: "normal"
-  }
-};
-var helpers = {
-  srOnly: {
-    className: "sr",
-    values: { type: "boolean" },
+  brightness: {
+    className: "brightness",
+    group: "Effect",
     transform(value) {
-      return srMapping[value] || {};
+      return {
+        "--brightness": `brightness(${value})`
+      };
     }
   },
-  debug: {
-    className: "debug",
-    values: { type: "boolean" },
+  contrast: {
+    className: "contrast",
+    group: "Effect",
     transform(value) {
-      if (!value)
-        return {};
       return {
-        outline: "1px solid blue !important",
-        "&>*": {
-          outline: "1px solid red !important"
-        }
+        "--contrast": `contrast(${value})`
       };
     }
-  }
-};
-var interactivity = {
-  accentColor: {
-    className: "accent",
-    values: "colors",
-    transform: createColorMixTransform("accentColor")
-  },
-  caretColor: {
-    className: "caret",
-    values: "colors",
-    transform: createColorMixTransform("caretColor")
   },
-  scrollBehavior: {
-    className: "scroll"
-  },
-  scrollbar: {
-    className: "scrollbar",
-    values: ["visible", "hidden"],
+  grayscale: {
+    className: "grayscale",
+    group: "Effect",
     transform(value) {
-      if (value === "visible") {
-        return {
-          msOverflowStyle: "auto",
-          scrollbarWidth: "auto",
-          "&::-webkit-scrollbar": {
-            display: "block"
-          }
-        };
-      }
-      if (value === "hidden") {
-        return {
-          msOverflowStyle: "none",
-          scrollbarWidth: "none",
-          "&::-webkit-scrollbar": {
-            display: "none"
-          }
-        };
-      }
+      return {
+        "--grayscale": `grayscale(${value})`
+      };
     }
   },
-  scrollMargin: {
-    className: "scroll-m",
-    values: "spacing"
-  },
-  scrollMarginX: {
-    className: "scroll-mx",
-    values: "spacing",
-    property: "scrollMarginInline",
+  hueRotate: {
+    className: "hue-rotate",
+    group: "Effect",
     transform(value) {
       return {
-        scrollMarginInline: value
+        "--hue-rotate": `hue-rotate(${value})`
       };
     }
   },
-  scrollMarginY: {
-    className: "scroll-my",
-    values: "spacing",
-    property: "scrollMarginBlock",
+  invert: {
+    className: "invert",
+    group: "Effect",
     transform(value) {
       return {
-        scrollMarginBlock: value
+        "--invert": `invert(${value})`
       };
     }
   },
-  scrollMarginLeft: {
-    className: "scroll-ml",
-    values: "spacing"
-  },
-  scrollMarginRight: {
-    className: "scroll-mr",
-    values: "spacing"
-  },
-  scrollMarginTop: {
-    className: "scroll-mt",
-    values: "spacing"
-  },
-  scrollMarginBottom: {
-    className: "scroll-mb",
-    values: "spacing"
-  },
-  scrollMarginBlock: {
-    className: "scroll-my",
-    values: "spacing"
-  },
-  scrollMarginBlockEnd: {
-    className: "scroll-mb",
-    values: "spacing"
+  saturate: {
+    className: "saturate",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--saturate": `saturate(${value})`
+      };
+    }
   },
-  scrollMarginBlockStart: {
-    className: "scroll-mt",
-    values: "spacing"
+  sepia: {
+    className: "sepia",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--sepia": `sepia(${value})`
+      };
+    }
   },
-  scrollMarginInline: {
-    className: "scroll-mx",
-    values: "spacing"
+  dropShadow: {
+    className: "drop-shadow",
+    group: "Effect",
+    values: "dropShadows",
+    transform(value) {
+      return {
+        "--drop-shadow": value
+      };
+    }
   },
-  scrollMarginInlineEnd: {
-    className: "scroll-me",
-    values: "spacing"
+  blur: {
+    className: "blur",
+    group: "Effect",
+    values: "blurs",
+    transform(value) {
+      return {
+        "--blur": `blur(${value})`
+      };
+    }
   },
-  scrollMarginInlineStart: {
-    className: "scroll-ms",
-    values: "spacing"
+  backdropFilter: {
+    className: "backdrop",
+    group: "Effect",
+    values: {
+      auto: "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )"
+    },
+    transform(value) {
+      return {
+        backdropFilter: value,
+        WebkitBackdropFilter: value
+      };
+    }
   },
-  scrollPadding: {
-    className: "scroll-p",
-    values: "spacing"
+  backdropBlur: {
+    className: "backdrop-blur",
+    group: "Effect",
+    values: "blurs",
+    transform(value) {
+      return {
+        "--backdrop-blur": `blur(${value})`
+      };
+    }
   },
-  scrollPaddingBlock: {
-    className: "scroll-pb",
-    values: "spacing"
+  backdropBrightness: {
+    className: "backdrop-brightness",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-brightness": `brightness(${value})`
+      };
+    }
   },
-  scrollPaddingBlockStart: {
-    className: "scroll-pt",
-    values: "spacing"
+  backdropContrast: {
+    className: "backdrop-contrast",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-contrast": `contrast(${value})`
+      };
+    }
   },
-  scrollPaddingBlockEnd: {
-    className: "scroll-pb",
-    values: "spacing"
+  backdropGrayscale: {
+    className: "backdrop-grayscale",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-grayscale": `grayscale(${value})`
+      };
+    }
   },
-  scrollPaddingInline: {
-    className: "scroll-px",
-    values: "spacing"
+  backdropHueRotate: {
+    className: "backdrop-hue-rotate",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-hue-rotate": `hue-rotate(${value})`
+      };
+    }
   },
-  scrollPaddingInlineEnd: {
-    className: "scroll-pe",
-    values: "spacing"
+  backdropInvert: {
+    className: "backdrop-invert",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-invert": `invert(${value})`
+      };
+    }
   },
-  scrollPaddingInlineStart: {
-    className: "scroll-ps",
-    values: "spacing"
+  backdropOpacity: {
+    className: "backdrop-opacity",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-opacity": value
+      };
+    }
   },
-  scrollPaddingX: {
-    className: "scroll-px",
-    values: "spacing",
-    property: "scrollPaddingInline",
+  backdropSaturate: {
+    className: "backdrop-saturate",
+    group: "Effect",
     transform(value) {
       return {
-        scrollPaddingInline: value
+        "--backdrop-saturate": `saturate(${value})`
       };
     }
   },
-  scrollPaddingY: {
-    className: "scroll-py",
-    values: "spacing",
-    property: "scrollPaddingBlock",
+  backdropSepia: {
+    className: "backdrop-sepia",
+    group: "Effect",
     transform(value) {
       return {
-        scrollPaddingBlock: value
+        "--backdrop-sepia": `sepia(${value})`
+      };
+    }
+  }
+};
+var flexGrid = {
+  flexBasis: {
+    className: "basis",
+    group: "Flex Layout",
+    values(theme2) {
+      return {
+        ...theme2("spacing"),
+        "1/2": "50%",
+        "1/3": "33.333333%",
+        "2/3": "66.666667%",
+        "1/4": "25%",
+        "2/4": "50%",
+        "3/4": "75%",
+        "1/5": "20%",
+        "2/5": "40%",
+        "3/5": "60%",
+        "4/5": "80%",
+        "1/6": "16.666667%",
+        "2/6": "33.333333%",
+        "3/6": "50%",
+        "4/6": "66.666667%",
+        "5/6": "83.333333%",
+        "1/12": "8.333333%",
+        "2/12": "16.666667%",
+        "3/12": "25%",
+        "4/12": "33.333333%",
+        "5/12": "41.666667%",
+        "6/12": "50%",
+        "7/12": "58.333333%",
+        "8/12": "66.666667%",
+        "9/12": "75%",
+        "10/12": "83.333333%",
+        "11/12": "91.666667%",
+        full: "100%"
       };
     }
   },
-  scrollPaddingLeft: {
-    className: "scroll-pl",
-    values: "spacing"
-  },
-  scrollPaddingRight: {
-    className: "scroll-pr",
-    values: "spacing"
-  },
-  scrollPaddingTop: {
-    className: "scroll-pt",
-    values: "spacing"
+  flex: {
+    className: "flex",
+    group: "Flex Layout",
+    values: {
+      "1": "1 1 0%",
+      auto: "1 1 auto",
+      initial: "0 1 auto",
+      none: "none"
+    }
   },
-  scrollPaddingBottom: {
-    className: "scroll-pb",
-    values: "spacing"
+  flexDirection: {
+    className: "flex",
+    group: "Flex Layout",
+    shorthand: "flexDir"
   },
-  scrollSnapAlign: {
-    className: "snap"
+  flexGrow: {
+    className: "grow",
+    group: "Flex Layout"
   },
-  scrollSnapStop: {
-    className: "snap"
+  flexShrink: {
+    className: "shrink",
+    group: "Flex Layout"
   },
-  scrollSnapType: {
-    className: "snap",
+  gridTemplateColumns: {
+    className: "grid-cols",
+    group: "Grid Layout",
     values: {
-      none: "none",
-      x: "x var(--scroll-snap-strictness)",
-      y: "y var(--scroll-snap-strictness)",
-      both: "both var(--scroll-snap-strictness)"
+      "1": "repeat(1, minmax(0, 1fr))",
+      "2": "repeat(2, minmax(0, 1fr))",
+      "3": "repeat(3, minmax(0, 1fr))",
+      "4": "repeat(4, minmax(0, 1fr))",
+      "5": "repeat(5, minmax(0, 1fr))",
+      "6": "repeat(6, minmax(0, 1fr))",
+      "7": "repeat(7, minmax(0, 1fr))",
+      "8": "repeat(8, minmax(0, 1fr))",
+      "9": "repeat(9, minmax(0, 1fr))",
+      "10": "repeat(10, minmax(0, 1fr))",
+      "11": "repeat(11, minmax(0, 1fr))",
+      "12": "repeat(12, minmax(0, 1fr))"
     }
   },
-  scrollSnapStrictness: {
-    className: "strictness",
-    values: ["mandatory", "proximity"],
-    transform(value) {
-      return {
-        "--scroll-snap-strictness": value
-      };
+  gridTemplateRows: {
+    className: "grid-rows",
+    group: "Grid Layout",
+    values: {
+      "1": "repeat(1, minmax(0, 1fr))",
+      "2": "repeat(2, minmax(0, 1fr))",
+      "3": "repeat(3, minmax(0, 1fr))",
+      "4": "repeat(4, minmax(0, 1fr))",
+      "5": "repeat(5, minmax(0, 1fr))",
+      "6": "repeat(6, minmax(0, 1fr))",
+      "7": "repeat(7, minmax(0, 1fr))",
+      "8": "repeat(8, minmax(0, 1fr))",
+      "9": "repeat(9, minmax(0, 1fr))",
+      "10": "repeat(10, minmax(0, 1fr))",
+      "11": "repeat(11, minmax(0, 1fr))",
+      "12": "repeat(12, minmax(0, 1fr))"
     }
   },
-  scrollSnapMargin: {
-    className: "snap-m",
-    values: "spacing"
-  },
-  scrollSnapMarginTop: {
-    className: "snap-mt",
-    values: "spacing"
-  },
-  scrollSnapMarginBottom: {
-    className: "snap-mb",
-    values: "spacing"
-  },
-  scrollSnapMarginLeft: {
-    className: "snap-ml",
-    values: "spacing"
-  },
-  scrollSnapMarginRight: {
-    className: "snap-mr",
-    values: "spacing"
-  },
-  touchAction: {
-    className: "touch"
-  },
-  userSelect: {
-    className: "select",
-    transform(value) {
-      return {
-        WebkitUserSelect: value,
-        userSelect: value
-      };
+  gridColumn: {
+    className: "col-span",
+    group: "Grid Layout",
+    values: {
+      full: "1 / -1",
+      "1": "span 1 / span 1",
+      "2": "span 2 / span 2",
+      "3": "span 3 / span 3",
+      "4": "span 4 / span 4",
+      "5": "span 5 / span 5",
+      "6": "span 6 / span 6",
+      "7": "span 7 / span 7",
+      "8": "span 8 / span 8",
+      "9": "span 9 / span 9",
+      "10": "span 10 / span 10",
+      "11": "span 11 / span 11",
+      "12": "span 12 / span 12"
     }
-  }
-};
-var layout = {
-  aspectRatio: {
-    className: "aspect",
-    values: "aspectRatios"
   },
-  boxDecorationBreak: {
-    className: "decoration",
-    transform(value) {
-      return {
-        boxDecorationBreak: value,
-        WebkitBoxDecorationBreak: value
-      };
+  gridRow: {
+    className: "row-span",
+    group: "Grid Layout",
+    values: {
+      full: "1 / -1",
+      "1": "span 1 / span 1",
+      "2": "span 2 / span 2",
+      "3": "span 3 / span 3",
+      "4": "span 4 / span 4",
+      "5": "span 5 / span 5",
+      "6": "span 6 / span 6",
+      "7": "span 7 / span 7",
+      "8": "span 8 / span 8",
+      "9": "span 9 / span 9",
+      "10": "span 10 / span 10",
+      "11": "span 11 / span 11",
+      "12": "span 12 / span 12"
     }
   },
-  zIndex: {
-    className: "z",
-    values: "zIndex"
-  },
-  boxSizing: {
-    className: "box"
-  },
-  objectPosition: {
-    className: "object"
-  },
-  objectFit: {
-    className: "object"
+  gridColumnStart: {
+    className: "col-start",
+    group: "Grid Layout"
   },
-  overscrollBehavior: {
-    className: "overscroll"
+  gridColumnEnd: {
+    className: "col-end",
+    group: "Grid Layout"
   },
-  overscrollBehaviorX: {
-    className: "overscroll-x"
+  gridAutoFlow: {
+    className: "grid-flow",
+    group: "Grid Layout"
   },
-  overscrollBehaviorY: {
-    className: "overscroll-y"
+  gridAutoColumns: {
+    className: "auto-cols",
+    group: "Grid Layout",
+    values: {
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    }
   },
-  position: {
-    className: "pos",
-    shorthand: "pos"
+  gridAutoRows: {
+    className: "auto-rows",
+    group: "Grid Layout",
+    values: {
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    }
   },
-  top: {
-    className: "top",
+  gap: {
+    className: "gap",
+    group: "Flex Layout",
     values: "spacing"
   },
-  left: {
-    className: "left",
+  gridGap: {
+    className: "gap",
+    group: "Grid Layout",
     values: "spacing"
   },
-  insetInline: {
-    className: "inset-x",
+  gridRowGap: {
+    className: "gap-x",
+    group: "Grid Layout",
     values: "spacing"
   },
-  insetBlock: {
-    className: "inset-y",
+  gridColumnGap: {
+    className: "gap-y",
+    group: "Grid Layout",
     values: "spacing"
   },
-  inset: {
-    className: "inset",
-    values: (theme2) => ({
-      auto: "auto",
-      ...theme2("spacing")
-    })
-  },
-  insetBlockEnd: {
-    className: "inset-b",
+  rowGap: {
+    className: "gap-x",
+    group: "Grid Layout",
     values: "spacing"
   },
-  insetBlockStart: {
-    className: "inset-t",
+  columnGap: {
+    className: "gap-y",
+    group: "Grid Layout",
     values: "spacing"
   },
-  insetInlineEnd: {
-    className: "end",
-    values: "spacing",
-    shorthand: ["insetEnd", "end"]
-  },
-  insetInlineStart: {
-    className: "start",
-    values: "spacing",
-    shorthand: ["insetStart", "start"]
+  justifyContent: {
+    className: "justify",
+    group: "Flex Layout"
   },
-  right: {
-    className: "right",
-    values: "spacing"
+  alignContent: {
+    className: "content",
+    group: "Flex Layout"
   },
-  bottom: {
-    className: "bottom",
-    values: "spacing"
+  alignItems: {
+    className: "items",
+    group: "Flex Layout"
   },
-  insetX: {
-    className: "inset-x",
-    values: "spacing",
-    property: "insetInline",
+  alignSelf: {
+    className: "self",
+    group: "Flex Layout"
+  }
+};
+var gradientVia = createColorMixTransform("--gradient-via");
+var gradientTemplate = {
+  "to-t": "linear-gradient(to top, var(--gradient))",
+  "to-tr": "linear-gradient(to top right, var(--gradient))",
+  "to-r": "linear-gradient(to right, var(--gradient))",
+  "to-br": "linear-gradient(to bottom right, var(--gradient))",
+  "to-b": "linear-gradient(to bottom, var(--gradient))",
+  "to-bl": "linear-gradient(to bottom left, var(--gradient))",
+  "to-l": "linear-gradient(to left, var(--gradient))",
+  "to-tl": "linear-gradient(to top left, var(--gradient))"
+};
+var gradientVars = {
+  "--gradient-stops": "var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))",
+  "--gradient": "var(--gradient-via-stops, var(--gradient-stops))"
+};
+var backgroundGradients = {
+  backgroundGradient: {
+    shorthand: "bgGradient",
+    className: "bg-gradient",
+    group: "Background Gradient",
+    values(theme2) {
+      return {
+        ...theme2("gradients"),
+        ...gradientTemplate
+      };
+    },
     transform(value) {
       return {
-        insetInline: value
+        ...gradientVars,
+        backgroundImage: value
       };
     }
   },
-  insetY: {
-    className: "inset-y",
-    values: "spacing",
-    property: "insetBlock",
+  textGradient: {
+    className: "text-gradient",
+    group: "Background Gradient",
+    values(theme2) {
+      return {
+        ...theme2("gradients"),
+        ...gradientTemplate
+      };
+    },
+    transform(value) {
+      return {
+        ...gradientVars,
+        backgroundImage: value,
+        WebkitBackgroundClip: "text",
+        color: "transparent"
+      };
+    }
+  },
+  gradientFromPosition: {
+    className: "gradient-from-pos",
+    group: "Background Gradient",
     transform(value) {
       return {
-        insetBlock: value
+        "--gradient-from-position": value
       };
     }
   },
-  float: {
-    className: "float",
-    values: ["left", "right", "start", "end"],
+  gradientToPosition: {
+    className: "gradient-to-pos",
+    group: "Background Gradient",
     transform(value) {
-      if (value === "start") {
-        return {
-          float: "left",
-          '[dir="rtl"] &': {
-            float: "right"
-          }
-        };
-      }
-      if (value === "end") {
-        return {
-          float: "right",
-          '[dir="rtl"] &': {
-            float: "left"
-          }
-        };
-      }
       return {
-        float: value
+        "--gradient-to-position": value
       };
     }
   },
-  visibility: {
-    className: "vis"
-  }
-};
-var list = {
-  listStyleType: {
-    className: "list"
-  },
-  listStylePosition: {
-    className: "list"
+  gradientFrom: {
+    className: "gradient-from",
+    values: "colors",
+    group: "Background Gradient",
+    transform: createColorMixTransform("--gradient-from")
   },
-  listStyleImage: {
-    className: "list-img",
-    values: "assets"
-  }
-};
-var outline = {
-  outlineWidth: {
-    className: "ring",
-    shorthand: "ringWidth",
-    values: "borderWidths"
+  gradientTo: {
+    className: "gradient-to",
+    values: "colors",
+    group: "Background Gradient",
+    transform: createColorMixTransform("--gradient-to")
   },
-  outlineColor: {
-    className: "ring",
+  gradientVia: {
+    className: "gradient-via",
     values: "colors",
-    shorthand: "ringColor",
-    transform: createColorMixTransform("outlineColor")
+    group: "Background Gradient",
+    transform(value, args) {
+      const transformed = gradientVia(value, args);
+      return {
+        ...transformed,
+        "--gradient-stops": "var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)"
+      };
+    }
   },
-  outline: {
-    className: "ring",
-    shorthand: "ring",
-    values: "borders",
+  gradientViaPosition: {
+    className: "gradient-via-pos",
+    group: "Background Gradient",
     transform(value) {
-      if (value === "none") {
-        return { outline: "2px solid transparent", outlineOffset: "2px" };
-      }
-      return { outline: value };
+      return {
+        "--gradient-via-position": value
+      };
     }
+  }
+};
+var srMapping = {
+  true: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: "0",
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    borderWidth: "0"
   },
-  outlineOffset: {
-    className: "ring",
-    shorthand: "ringOffset",
-    values: "spacing"
+  false: {
+    position: "static",
+    width: "auto",
+    height: "auto",
+    padding: "0",
+    margin: "0",
+    overflow: "visible",
+    clip: "auto",
+    whiteSpace: "normal"
   }
 };
-var polyfill = {
-  appearance: {
-    className: "appearance",
+var helpers = {
+  srOnly: {
+    className: "sr",
+    values: { type: "boolean" },
+    group: "Other",
     transform(value) {
-      return { appearance: value, WebkitAppearance: value };
+      return srMapping[value] || {};
     }
   },
-  backfaceVisibility: {
-    className: "backface",
+  debug: {
+    className: "debug",
+    values: { type: "boolean" },
+    group: "Other",
     transform(value) {
-      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
+      if (!value)
+        return {};
+      return {
+        outline: "1px solid blue !important",
+        "&>*": {
+          outline: "1px solid red !important"
+        }
+      };
     }
+  }
+};
+var interactivity = {
+  accentColor: {
+    className: "accent",
+    values: "colors",
+    transform: createColorMixTransform("accentColor"),
+    group: "Color"
   },
-  clipPath: {
-    className: "clip-path",
-    transform(value) {
-      return { clipPath: value, WebkitClipPath: value };
-    }
+  caretColor: {
+    className: "caret",
+    values: "colors",
+    group: "Color",
+    transform: createColorMixTransform("caretColor")
   },
-  hyphens: {
-    className: "hyphens",
-    transform(value) {
-      return { hyphens: value, WebkitHyphens: value };
-    }
+  scrollBehavior: {
+    className: "scroll",
+    group: "Scroll"
   },
-  mask: {
-    className: "mask",
+  scrollbar: {
+    className: "scrollbar",
+    values: ["visible", "hidden"],
+    group: "Scroll",
     transform(value) {
-      return { mask: value, WebkitMask: value };
+      if (value === "visible") {
+        return {
+          msOverflowStyle: "auto",
+          scrollbarWidth: "auto",
+          "&::-webkit-scrollbar": {
+            display: "block"
+          }
+        };
+      }
+      if (value === "hidden") {
+        return {
+          msOverflowStyle: "none",
+          scrollbarWidth: "none",
+          "&::-webkit-scrollbar": {
+            display: "none"
+          }
+        };
+      }
     }
   },
-  maskImage: {
-    className: "mask-image",
-    transform(value) {
-      return { maskImage: value, WebkitMaskImage: value };
-    }
+  scrollMargin: {
+    className: "scroll-m",
+    values: "spacing",
+    group: "Scroll"
   },
-  maskSize: {
-    className: "mask-size",
-    transform(value) {
-      return { maskSize: value, WebkitMaskSize: value };
-    }
+  scrollMarginLeft: {
+    className: "scroll-ml",
+    values: "spacing",
+    group: "Scroll"
   },
-  textSizeAdjust: {
-    className: "text-size-adjust",
-    transform(value) {
-      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
-    }
-  }
-};
-var widthValues = (theme2) => ({
-  auto: "auto",
-  ...theme2("sizes"),
-  "1/2": "50%",
-  "1/3": "33.333333%",
-  "2/3": "66.666667%",
-  "1/4": "25%",
-  "2/4": "50%",
-  "3/4": "75%",
-  "1/5": "20%",
-  "2/5": "40%",
-  "3/5": "60%",
-  "4/5": "80%",
-  "1/6": "16.666667%",
-  "2/6": "33.333333%",
-  "3/6": "50%",
-  "4/6": "66.666667%",
-  "5/6": "83.333333%",
-  "1/12": "8.333333%",
-  "2/12": "16.666667%",
-  "3/12": "25%",
-  "4/12": "33.333333%",
-  "5/12": "41.666667%",
-  "6/12": "50%",
-  "7/12": "58.333333%",
-  "8/12": "66.666667%",
-  "9/12": "75%",
-  "10/12": "83.333333%",
-  "11/12": "91.666667%",
-  screen: "100vw"
-});
-var heightValues = (theme2) => ({
-  auto: "auto",
-  ...theme2("sizes"),
-  svh: "100svh",
-  lvh: "100lvh",
-  dvh: "100dvh",
-  screen: "100vh",
-  "1/2": "50%",
-  "1/3": "33.333333%",
-  "2/3": "66.666667%",
-  "1/4": "25%",
-  "2/4": "50%",
-  "3/4": "75%",
-  "1/5": "20%",
-  "2/5": "40%",
-  "3/5": "60%",
-  "4/5": "80%",
-  "1/6": "16.666667%",
-  "2/6": "33.333333%",
-  "3/6": "50%",
-  "4/6": "66.666667%",
-  "5/6": "83.333333%"
-});
-var sizing = {
-  width: {
-    shorthand: "w",
-    className: "w",
-    values: widthValues
+  scrollMarginRight: {
+    className: "scroll-mr",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginTop: {
+    className: "scroll-mt",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginBottom: {
+    className: "scroll-mb",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginBlock: {
+    className: "scroll-my",
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollMarginY"]
+  },
+  scrollMarginBlockEnd: {
+    className: "scroll-mb",
+    values: "spacing",
+    group: "Scroll"
   },
-  inlineSize: {
-    className: "w",
-    values: widthValues
+  scrollMarginBlockStart: {
+    className: "scroll-mt",
+    values: "spacing",
+    group: "Scroll"
   },
-  minWidth: {
-    shorthand: "minW",
-    className: "min-w",
-    values: widthValues
+  scrollMarginInline: {
+    className: "scroll-mx",
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollMarginX"]
   },
-  minInlineSize: {
-    className: "min-w",
-    values: widthValues
+  scrollMarginInlineEnd: {
+    className: "scroll-me",
+    values: "spacing",
+    group: "Scroll"
   },
-  maxWidth: {
-    shorthand: "maxW",
-    className: "max-w",
-    values: widthValues
+  scrollMarginInlineStart: {
+    className: "scroll-ms",
+    values: "spacing",
+    group: "Scroll"
   },
-  maxInlineSize: {
-    className: "max-w",
-    values: widthValues
+  scrollPadding: {
+    className: "scroll-p",
+    values: "spacing",
+    group: "Scroll"
   },
-  height: {
-    shorthand: "h",
-    className: "h",
-    values: heightValues
+  scrollPaddingBlock: {
+    className: "scroll-pb",
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollPaddingY"]
   },
-  blockSize: {
-    className: "h",
-    values: heightValues
+  scrollPaddingBlockStart: {
+    className: "scroll-pt",
+    values: "spacing",
+    group: "Scroll"
   },
-  minHeight: {
-    shorthand: "minH",
-    className: "min-h",
-    values: heightValues
+  scrollPaddingBlockEnd: {
+    className: "scroll-pb",
+    values: "spacing",
+    group: "Scroll"
   },
-  minBlockSize: {
-    className: "min-h",
-    values: heightValues
+  scrollPaddingInline: {
+    className: "scroll-px",
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollPaddingX"]
   },
-  maxHeight: {
-    shorthand: "maxH",
-    className: "max-h",
-    values: heightValues
+  scrollPaddingInlineEnd: {
+    className: "scroll-pe",
+    values: "spacing",
+    group: "Scroll"
   },
-  maxBlockSize: {
-    className: "max-b",
-    values: heightValues
-  }
-};
-var marginValues = (theme2) => ({
-  auto: "auto",
-  ...theme2("spacing")
-});
-var spacing = {
-  padding: {
-    className: "p",
-    shorthand: "p",
-    values: "spacing"
+  scrollPaddingInlineStart: {
+    className: "scroll-ps",
+    values: "spacing",
+    group: "Scroll"
   },
-  paddingLeft: {
-    className: "pl",
-    shorthand: "pl",
-    values: "spacing"
+  scrollPaddingLeft: {
+    className: "scroll-pl",
+    values: "spacing",
+    group: "Scroll"
   },
-  paddingRight: {
-    className: "pr",
-    shorthand: "pr",
-    values: "spacing"
+  scrollPaddingRight: {
+    className: "scroll-pr",
+    values: "spacing",
+    group: "Scroll"
   },
-  paddingTop: {
-    className: "pt",
-    shorthand: "pt",
-    values: "spacing"
+  scrollPaddingTop: {
+    className: "scroll-pt",
+    values: "spacing",
+    group: "Scroll"
   },
-  paddingBottom: {
-    className: "pb",
-    shorthand: "pb",
-    values: "spacing"
+  scrollPaddingBottom: {
+    className: "scroll-pb",
+    values: "spacing",
+    group: "Scroll"
   },
-  paddingBlock: {
-    className: "py",
+  scrollSnapAlign: {
+    className: "snap-align",
+    group: "Scroll"
+  },
+  scrollSnapStop: {
+    className: "snap-stop",
+    group: "Scroll"
+  },
+  scrollSnapType: {
+    className: "snap-type",
+    group: "Scroll",
+    values: {
+      none: "none",
+      x: "x var(--scroll-snap-strictness)",
+      y: "y var(--scroll-snap-strictness)",
+      both: "both var(--scroll-snap-strictness)"
+    }
+  },
+  scrollSnapStrictness: {
+    className: "snap-strictness",
+    values: ["mandatory", "proximity"],
+    group: "Scroll",
+    transform(value) {
+      return {
+        "--scroll-snap-strictness": value
+      };
+    }
+  },
+  scrollSnapMargin: {
+    className: "snap-m",
     values: "spacing",
-    shorthand: ["py", "paddingY"]
+    group: "Scroll"
   },
-  paddingBlockEnd: {
-    className: "pb",
-    values: "spacing"
+  scrollSnapMarginTop: {
+    className: "snap-mt",
+    values: "spacing",
+    group: "Scroll"
   },
-  paddingBlockStart: {
-    className: "pt",
-    values: "spacing"
+  scrollSnapMarginBottom: {
+    className: "snap-mb",
+    values: "spacing",
+    group: "Scroll"
   },
-  paddingInline: {
-    className: "px",
+  scrollSnapMarginLeft: {
+    className: "snap-ml",
     values: "spacing",
-    shorthand: ["paddingX", "px"]
+    group: "Scroll"
   },
-  paddingInlineEnd: {
-    className: "pe",
-    shorthand: ["pe", "paddingEnd"],
-    values: "spacing"
+  scrollSnapMarginRight: {
+    className: "snap-mr",
+    values: "spacing",
+    group: "Scroll"
   },
-  paddingInlineStart: {
-    className: "ps",
-    shorthand: ["ps", "paddingStart"],
-    values: "spacing"
+  touchAction: {
+    className: "touch",
+    group: "Interactivity"
   },
-  marginLeft: {
-    className: "ml",
-    shorthand: "ml",
-    values: marginValues
+  userSelect: {
+    className: "select",
+    group: "Interactivity",
+    transform(value) {
+      return {
+        WebkitUserSelect: value,
+        userSelect: value
+      };
+    }
+  }
+};
+var layout = {
+  aspectRatio: {
+    className: "aspect",
+    values: "aspectRatios",
+    group: "Layout"
   },
-  marginRight: {
-    className: "mr",
-    shorthand: "mr",
-    values: marginValues
+  boxDecorationBreak: {
+    className: "decoration",
+    group: "Layout",
+    transform(value) {
+      return {
+        boxDecorationBreak: value,
+        WebkitBoxDecorationBreak: value
+      };
+    }
   },
-  marginTop: {
-    className: "mt",
-    shorthand: "mt",
-    values: marginValues
+  zIndex: {
+    className: "z",
+    values: "zIndex",
+    group: "Visibility"
   },
-  marginBottom: {
-    className: "mb",
-    shorthand: "mb",
-    values: marginValues
+  boxSizing: {
+    className: "box",
+    group: "System"
   },
-  margin: {
-    className: "m",
-    shorthand: "m",
-    values: marginValues
+  objectPosition: {
+    className: "obj-pos",
+    group: "Layout"
   },
-  marginBlock: {
-    className: "my",
-    values: marginValues,
-    shorthand: ["my", "marginY"]
+  objectFit: {
+    className: "obj-fit",
+    group: "Layout"
   },
-  marginBlockEnd: {
-    className: "mb",
-    values: marginValues
+  overscrollBehavior: {
+    className: "overscroll",
+    group: "Scroll"
+  },
+  overscrollBehaviorX: {
+    className: "overscroll-x",
+    group: "Scroll"
+  },
+  overscrollBehaviorY: {
+    className: "overscroll-y",
+    group: "Scroll"
+  },
+  position: {
+    className: "pos",
+    shorthand: "pos",
+    group: "Position"
+  },
+  top: {
+    className: "top",
+    values: "spacing",
+    group: "Position"
+  },
+  left: {
+    className: "left",
+    values: "spacing",
+    group: "Position"
+  },
+  insetInline: {
+    className: "inset-x",
+    values: "spacing",
+    group: "Position",
+    shorthand: ["insetX"]
+  },
+  insetBlock: {
+    className: "inset-y",
+    values: "spacing",
+    group: "Position",
+    shorthand: ["insetY"]
+  },
+  inset: {
+    className: "inset",
+    group: "Position",
+    values: (theme2) => ({
+      auto: "auto",
+      ...theme2("spacing")
+    })
+  },
+  insetBlockEnd: {
+    className: "inset-b",
+    values: "spacing",
+    group: "Position"
+  },
+  insetBlockStart: {
+    className: "inset-t",
+    values: "spacing",
+    group: "Position"
+  },
+  insetInlineEnd: {
+    className: "end",
+    values: "spacing",
+    group: "Position",
+    shorthand: ["insetEnd", "end"]
   },
-  marginBlockStart: {
-    className: "mt",
-    values: marginValues
+  insetInlineStart: {
+    className: "start",
+    values: "spacing",
+    group: "Position",
+    shorthand: ["insetStart", "start"]
   },
-  marginInline: {
-    className: "mx",
-    values: marginValues,
-    shorthand: ["mx", "marginX"]
+  right: {
+    className: "right",
+    values: "spacing",
+    group: "Position"
   },
-  marginInlineEnd: {
-    className: "me",
-    shorthand: ["me", "marginEnd"],
-    values: marginValues
+  bottom: {
+    className: "bottom",
+    values: "spacing",
+    group: "Position"
   },
-  marginInlineStart: {
-    className: "ms",
-    shorthand: ["ms", "marginStart"],
-    values: marginValues
+  float: {
+    className: "float",
+    values: ["start", "end"],
+    property: "float",
+    group: "Position",
+    transform(value) {
+      if (value === "start") {
+        return {
+          float: "left",
+          '[dir="rtl"] &': {
+            float: "right"
+          }
+        };
+      }
+      if (value === "end") {
+        return {
+          float: "right",
+          '[dir="rtl"] &': {
+            float: "left"
+          }
+        };
+      }
+      return {
+        float: value
+      };
+    }
+  },
+  visibility: {
+    className: "vis",
+    group: "Visibility"
   }
 };
-var svg = {
-  fill: {
-    className: "fill",
-    values: "colors",
-    transform: createColorMixTransform("fill")
+var list = {
+  listStyleType: {
+    className: "list-type",
+    group: "List"
   },
-  stroke: {
-    className: "stroke",
-    values: "colors",
-    transform: createColorMixTransform("stroke")
+  listStylePosition: {
+    className: "list-pos",
+    group: "List"
   },
-  strokeWidth: {
-    className: "stroke-w",
-    values: "borderWidths"
+  listStyleImage: {
+    className: "list-img",
+    group: "List",
+    values: "assets"
   }
 };
-var tables = {
-  borderCollapse: {
-    className: "border"
+var outline = {
+  outlineWidth: {
+    className: "ring-width",
+    shorthand: "ringWidth",
+    values: "borderWidths",
+    group: "Border"
   },
-  borderSpacing: {
-    className: "border-spacing",
-    values: "spacing"
+  outlineColor: {
+    className: "ring-color",
+    values: "colors",
+    group: "Color",
+    shorthand: "ringColor",
+    transform: createColorMixTransform("outlineColor")
   },
-  borderSpacingX: {
-    className: "border-spacing-x",
-    values: "spacing",
+  outline: {
+    className: "ring",
+    shorthand: "ring",
+    values: "borders",
+    group: "Border",
     transform(value) {
-      return {
-        borderSpacing: `${value} var(--border-spacing-y)`
-      };
+      if (value === "none") {
+        return { outline: "2px solid transparent", outlineOffset: "2px" };
+      }
+      return { outline: value };
     }
   },
-  borderSpacingY: {
-    className: "border-spacing-y",
+  outlineOffset: {
+    className: "ring-offset",
+    shorthand: "ringOffset",
     values: "spacing",
+    group: "Border"
+  }
+};
+var polyfill = {
+  appearance: {
+    className: "appearance",
+    group: "Visibility",
     transform(value) {
-      return {
-        borderSpacing: `var(--border-spacing-x) ${value}`
-      };
+      return { appearance: value, WebkitAppearance: value };
     }
   },
-  tableLayout: {
-    className: "table"
-  }
-};
-var positiveFractions = {
-  "1/2": "50%",
-  "1/3": "33.333333%",
-  "2/3": "66.666667%",
-  "1/4": "25%",
-  "2/4": "50%",
-  "3/4": "75%",
-  full: "100%"
-};
-var negativeFractions = Object.fromEntries(
-  Object.entries(positiveFractions).map(([key, value]) => [`-${key}`, `-${value}`])
-);
-var fractions = { ...positiveFractions, ...negativeFractions };
-var transforms = {
-  transformOrigin: {
-    className: "origin"
+  backfaceVisibility: {
+    className: "backface",
+    group: "Visibility",
+    transform(value) {
+      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
+    }
   },
-  scale: {
-    className: "scale",
-    property: "scale",
-    values: {
-      auto: "var(--scale-x) var(--scale-y)"
+  clipPath: {
+    className: "clip-path",
+    group: "Other",
+    transform(value) {
+      return { clipPath: value, WebkitClipPath: value };
     }
   },
-  scaleX: {
-    className: "scale-x",
+  hyphens: {
+    className: "hyphens",
+    group: "Other",
     transform(value) {
-      return {
-        "--scale-x": value
-      };
+      return { hyphens: value, WebkitHyphens: value };
     }
   },
-  scaleY: {
-    className: "scale-y",
+  mask: {
+    className: "mask",
+    group: "Other",
     transform(value) {
-      return {
-        "--scale-y": value
-      };
+      return { mask: value, WebkitMask: value };
     }
   },
-  translate: {
-    className: "translate",
-    property: "translate",
-    values: {
-      auto: "var(--translate-x) var(--translate-y)"
+  maskImage: {
+    className: "mask-image",
+    group: "Other",
+    transform(value) {
+      return { maskImage: value, WebkitMaskImage: value };
     }
   },
-  translateX: {
-    shorthand: "x",
-    className: "translate-x",
-    values(theme2) {
-      return {
-        ...theme2("spacing"),
-        ...fractions
-      };
-    },
+  maskSize: {
+    className: "mask-size",
+    group: "Other",
     transform(value) {
-      return {
-        "--translate-x": value
-      };
+      return { maskSize: value, WebkitMaskSize: value };
     }
   },
-  translateY: {
-    shorthand: "y",
-    className: "translate-y",
-    values(theme2) {
-      return {
-        ...theme2("spacing"),
-        ...fractions
-      };
-    },
+  textSizeAdjust: {
+    className: "text-adjust",
+    group: "Typography",
     transform(value) {
-      return {
-        "--translate-y": value
-      };
+      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
     }
   }
 };
-var createTransition = (value) => ({
-  transitionProperty: `var(--transition-prop, ${value})`,
-  transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
-  transitionDuration: "var(--transition-duration, 150ms)"
+var widthValues = (theme2) => ({
+  auto: "auto",
+  ...theme2("sizes"),
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  "1/5": "20%",
+  "2/5": "40%",
+  "3/5": "60%",
+  "4/5": "80%",
+  "1/6": "16.666667%",
+  "2/6": "33.333333%",
+  "3/6": "50%",
+  "4/6": "66.666667%",
+  "5/6": "83.333333%",
+  "1/12": "8.333333%",
+  "2/12": "16.666667%",
+  "3/12": "25%",
+  "4/12": "33.333333%",
+  "5/12": "41.666667%",
+  "6/12": "50%",
+  "7/12": "58.333333%",
+  "8/12": "66.666667%",
+  "9/12": "75%",
+  "10/12": "83.333333%",
+  "11/12": "91.666667%",
+  screen: "100vw"
 });
-var transitionMap = {
-  all: createTransition("all"),
-  common: createTransition(
-    "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"
-  ),
-  background: createTransition("background, background-color"),
-  colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
-  opacity: createTransition("opacity"),
-  shadow: createTransition("box-shadow"),
-  transform: createTransition("transform")
-};
-var transitions = {
-  transitionTimingFunction: {
-    className: "ease",
-    values: "easings",
-    transform(value) {
-      return {
-        "--transition-easing": value,
-        transitionTimingFunction: value
-      };
-    }
+var heightValues = (theme2) => ({
+  auto: "auto",
+  ...theme2("sizes"),
+  svh: "100svh",
+  lvh: "100lvh",
+  dvh: "100dvh",
+  screen: "100vh",
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  "1/5": "20%",
+  "2/5": "40%",
+  "3/5": "60%",
+  "4/5": "80%",
+  "1/6": "16.666667%",
+  "2/6": "33.333333%",
+  "3/6": "50%",
+  "4/6": "66.666667%",
+  "5/6": "83.333333%"
+});
+var sizing = {
+  width: {
+    shorthand: "w",
+    className: "w",
+    group: "Width",
+    values: widthValues
   },
-  transitionDelay: {
-    className: "delay",
-    values: "durations"
+  inlineSize: {
+    className: "w",
+    group: "Width",
+    values: widthValues
   },
-  transitionDuration: {
-    className: "duration",
-    values: "durations",
-    transform(value) {
-      return {
-        "--transition-duration": value,
-        transitionDuration: value
-      };
-    }
+  minWidth: {
+    shorthand: "minW",
+    className: "min-w",
+    group: "Width",
+    values: widthValues
   },
-  transitionProperty: {
-    className: "transition-prop",
-    transform(value) {
-      return {
-        "--transition-prop": value,
-        transitionProperty: value
-      };
-    }
+  minInlineSize: {
+    className: "min-w",
+    group: "Width",
+    values: widthValues
   },
-  transition: {
-    className: "transition",
-    values: Object.keys(transitionMap),
-    transform(value) {
-      return transitionMap[value] ?? { transition: value };
-    }
+  maxWidth: {
+    shorthand: "maxW",
+    className: "max-w",
+    group: "Width",
+    values: widthValues
   },
-  animation: {
-    className: "animation",
-    values: "animations"
+  maxInlineSize: {
+    className: "max-w",
+    group: "Width",
+    values: widthValues
   },
-  animationName: {
-    className: "animation-name",
-    values: "animationName"
+  height: {
+    shorthand: "h",
+    className: "h",
+    group: "Height",
+    values: heightValues
   },
-  animationDelay: {
-    className: "animation-delay",
-    values: "durations"
+  blockSize: {
+    className: "h",
+    group: "Height",
+    values: heightValues
+  },
+  minHeight: {
+    shorthand: "minH",
+    className: "min-h",
+    group: "Height",
+    values: heightValues
+  },
+  minBlockSize: {
+    className: "min-h",
+    group: "Height",
+    values: heightValues
+  },
+  maxHeight: {
+    shorthand: "maxH",
+    className: "max-h",
+    group: "Height",
+    values: heightValues
+  },
+  maxBlockSize: {
+    className: "max-b",
+    group: "Height",
+    values: heightValues
   }
 };
-var typography = {
-  color: {
-    className: "text",
-    values: "colors",
-    transform: createColorMixTransform("color")
+var marginValues = (theme2) => ({
+  auto: "auto",
+  ...theme2("spacing")
+});
+var spacing = {
+  padding: {
+    className: "p",
+    shorthand: "p",
+    values: "spacing",
+    group: "Padding"
   },
-  fontFamily: {
-    className: "font",
-    values: "fonts"
+  paddingLeft: {
+    className: "pl",
+    shorthand: "pl",
+    values: "spacing",
+    group: "Padding"
   },
-  fontSize: {
-    className: "fs",
-    values: "fontSizes"
+  paddingRight: {
+    className: "pr",
+    shorthand: "pr",
+    values: "spacing",
+    group: "Padding"
   },
-  fontWeight: {
-    className: "font",
-    values: "fontWeights"
+  paddingTop: {
+    className: "pt",
+    shorthand: "pt",
+    values: "spacing",
+    group: "Padding"
   },
-  fontSmoothing: {
-    className: "smoothing",
-    values: {
-      antialiased: "antialiased",
-      "subpixel-antialiased": "auto"
-    },
-    transform(value) {
-      return {
-        WebkitFontSmoothing: value
-      };
-    }
+  paddingBottom: {
+    className: "pb",
+    shorthand: "pb",
+    values: "spacing",
+    group: "Padding"
   },
-  fontVariantNumeric: {
-    className: "numeric"
+  paddingBlock: {
+    className: "py",
+    values: "spacing",
+    group: "Padding",
+    shorthand: ["py", "paddingY"]
   },
-  letterSpacing: {
-    className: "tracking",
-    values: "letterSpacings"
+  paddingBlockEnd: {
+    className: "pb",
+    values: "spacing",
+    group: "Padding"
   },
-  lineHeight: {
-    className: "leading",
-    values: "lineHeights"
+  paddingBlockStart: {
+    className: "pt",
+    values: "spacing",
+    group: "Padding"
   },
-  textAlign: {
-    className: "text"
+  paddingInline: {
+    className: "px",
+    values: "spacing",
+    group: "Padding",
+    shorthand: ["paddingX", "px"]
   },
-  textDecoration: {
-    className: "text-decor"
+  paddingInlineEnd: {
+    className: "pe",
+    shorthand: ["pe", "paddingEnd"],
+    values: "spacing",
+    group: "Padding"
   },
-  textDecorationColor: {
-    className: "text-decor",
-    values: "colors",
-    transform: createColorMixTransform("textDecorationColor")
+  paddingInlineStart: {
+    className: "ps",
+    shorthand: ["ps", "paddingStart"],
+    values: "spacing",
+    group: "Padding"
   },
-  textEmphasisColor: {
-    className: "text-emphasis",
-    values: "colors",
-    transform: createColorMixTransform("textEmphasisColor")
+  marginLeft: {
+    className: "ml",
+    shorthand: "ml",
+    values: marginValues,
+    group: "Margin"
   },
-  textDecorationStyle: {
-    className: "decoration"
+  marginRight: {
+    className: "mr",
+    shorthand: "mr",
+    values: marginValues,
+    group: "Margin"
   },
-  textDecorationThickness: {
-    className: "decoration"
+  marginTop: {
+    className: "mt",
+    shorthand: "mt",
+    values: marginValues,
+    group: "Margin"
   },
-  textUnderlineOffset: {
-    className: "underline-offset"
+  marginBottom: {
+    className: "mb",
+    shorthand: "mb",
+    values: marginValues,
+    group: "Margin"
   },
-  textTransform: {
-    className: "text"
+  margin: {
+    className: "m",
+    shorthand: "m",
+    values: marginValues,
+    group: "Margin"
   },
-  textIndent: {
-    className: "indent",
-    values: "spacing"
+  marginBlock: {
+    className: "my",
+    values: marginValues,
+    group: "Margin",
+    shorthand: ["my", "marginY"]
   },
-  textShadow: {
-    className: "text-shadow",
-    values: "shadows"
+  marginBlockEnd: {
+    className: "mb",
+    values: marginValues,
+    group: "Margin"
   },
-  textShadowColor: {
-    shorthand: "textShadowColor",
-    className: "text-shadow",
-    values: "colors",
-    transform: createColorMixTransform("--text-shadow-color")
+  marginBlockStart: {
+    className: "mt",
+    values: marginValues,
+    group: "Margin"
   },
-  textOverflow: {
-    className: "text"
+  marginInline: {
+    className: "mx",
+    values: marginValues,
+    group: "Margin",
+    shorthand: ["mx", "marginX"]
   },
-  verticalAlign: {
-    className: "align"
+  marginInlineEnd: {
+    className: "me",
+    shorthand: ["me", "marginEnd"],
+    values: marginValues,
+    group: "Margin"
   },
-  wordBreak: {
-    className: "break"
+  marginInlineStart: {
+    className: "ms",
+    shorthand: ["ms", "marginStart"],
+    values: marginValues,
+    group: "Margin"
+  },
+  spaceX: {
+    className: "space-x",
+    values: marginValues,
+    property: "marginInlineStart",
+    group: "Margin",
+    transform(value) {
+      return {
+        "& > :not([hidden]) ~ :not([hidden])": {
+          marginInlineStart: value,
+          marginInlineEnd: "0px"
+        }
+      };
+    }
+  },
+  spaceY: {
+    className: "space-y",
+    values: marginValues,
+    property: "marginBlockStart",
+    group: "Margin",
+    transform(value) {
+      return {
+        "& > :not([hidden]) ~ :not([hidden])": {
+          marginTop: value,
+          marginBottom: "0px"
+        }
+      };
+    }
+  }
+};
+var svg = {
+  fill: {
+    className: "fill",
+    values: "colors",
+    group: "Color",
+    transform: createColorMixTransform("fill")
+  },
+  stroke: {
+    className: "stroke",
+    values: "colors",
+    group: "Color",
+    transform: createColorMixTransform("stroke")
+  },
+  strokeWidth: {
+    className: "stroke-w",
+    values: "borderWidths",
+    group: "Border"
+  }
+};
+var tables = {
+  borderCollapse: {
+    className: "border",
+    group: "Table"
   },
-  textWrap: {
-    className: "text",
-    values: ["wrap", "balance", "nowrap"],
-    transform(value) {
-      return { textWrap: value };
+  borderSpacing: {
+    className: "border-spacing",
+    group: "Table",
+    values(theme2) {
+      return {
+        ...theme2("spacing"),
+        auto: "var(--border-spacing-x) var(--border-spacing-y)"
+      };
     }
   },
-  truncate: {
-    className: "truncate",
-    values: { type: "boolean" },
+  borderSpacingX: {
+    className: "border-spacing-x",
+    values: "spacing",
+    group: "Table",
     transform(value) {
-      if (!value)
-        return {};
       return {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
+        "--border-spacing-x": value
       };
     }
   },
-  lineClamp: {
-    className: "clamp",
+  borderSpacingY: {
+    className: "border-spacing-y",
+    values: "spacing",
+    group: "Table",
     transform(value) {
-      if (value === "none") {
-        return {
-          WebkitLineClamp: "unset"
-        };
-      }
       return {
-        overflow: "hidden",
-        display: "-webkit-box",
-        WebkitLineClamp: value,
-        WebkitBoxOrient: "vertical"
+        "--border-spacing-y": value
       };
     }
+  },
+  tableLayout: {
+    className: "table",
+    group: "Table"
   }
 };
-var utilities = Object.assign(
-  {},
-  layout,
-  display,
-  flexGrid,
-  spacing,
-  outline,
-  divide,
-  sizing,
-  typography,
-  list,
-  background,
-  border,
-  effects,
-  tables,
-  transitions,
-  transforms,
-  interactivity,
-  svg,
-  helpers,
-  polyfill,
-  container
+var positiveFractions = {
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  full: "100%"
+};
+var negativeFractions = Object.fromEntries(
+  Object.entries(positiveFractions).map(([key, value]) => [`-${key}`, `-${value}`])
 );
-function definePattern(config2) {
-  return config2;
-}
-var box = definePattern({
-  transform(props) {
-    return props;
-  }
-});
-var flex = definePattern({
-  properties: {
-    align: { type: "property", value: "alignItems" },
-    justify: { type: "property", value: "justifyContent" },
-    direction: { type: "property", value: "flexDirection" },
-    wrap: { type: "property", value: "flexWrap" },
-    basis: { type: "property", value: "flexBasis" },
-    grow: { type: "property", value: "flexGrow" },
-    shrink: { type: "property", value: "flexShrink" }
-  },
-  transform(props) {
-    const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
-    return {
-      display: "flex",
-      flexDirection: direction,
-      alignItems: align,
-      justifyContent: justify,
-      flexWrap: wrap2,
-      flexBasis: basis,
-      flexGrow: grow,
-      flexShrink: shrink,
-      ...rest
-    };
-  }
-});
-var stack = definePattern({
-  properties: {
-    align: { type: "property", value: "alignItems" },
-    justify: { type: "property", value: "justifyContent" },
-    direction: { type: "property", value: "flexDirection" },
-    gap: { type: "property", value: "gap" }
-  },
-  defaultValues: {
-    direction: "column",
-    gap: "10px"
-  },
-  transform(props) {
-    const { align, justify, direction, gap, ...rest } = props;
-    return {
-      display: "flex",
-      flexDirection: direction,
-      alignItems: align,
-      justifyContent: justify,
-      gap,
-      ...rest
-    };
-  }
-});
-var vstack = definePattern({
-  jsxName: "VStack",
-  properties: {
-    justify: { type: "property", value: "justifyContent" },
-    gap: { type: "property", value: "gap" }
-  },
-  defaultValues: {
-    gap: "10px"
-  },
-  transform(props) {
-    const { justify, gap, ...rest } = props;
-    return {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: justify,
-      gap,
-      flexDirection: "column",
-      ...rest
-    };
-  }
-});
-var hstack = definePattern({
-  jsxName: "HStack",
-  properties: {
-    justify: { type: "property", value: "justifyContent" },
-    gap: { type: "property", value: "gap" }
+var fractions = { ...positiveFractions, ...negativeFractions };
+var transforms = {
+  transformOrigin: {
+    className: "origin",
+    group: "Transform"
   },
-  defaultValues: {
-    gap: "10px"
+  rotate: {
+    className: "rotate",
+    group: "Transform",
+    property: "rotate",
+    values: {
+      auto: "var(--rotate-x) var(--rotate-y)",
+      "auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)"
+    }
   },
-  transform(props) {
-    const { justify, gap, ...rest } = props;
-    return {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: justify,
-      gap,
-      flexDirection: "row",
-      ...rest
-    };
-  }
-});
-var spacer = definePattern({
-  properties: {
-    size: { type: "token", value: "spacing" }
+  rotateX: {
+    className: "rotate-x",
+    group: "Transform",
+    property: "rotate",
+    transform(value) {
+      return {
+        "--rotate-x": value
+      };
+    }
   },
-  transform(props, { map }) {
-    const { size, ...rest } = props;
-    return {
-      alignSelf: "stretch",
-      justifySelf: "stretch",
-      flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
-      ...rest
-    };
-  }
-});
-var circle = definePattern({
-  properties: {
-    size: { type: "property", value: "width" }
+  rotateY: {
+    className: "rotate-y",
+    group: "Transform",
+    property: "rotate",
+    transform(value) {
+      return {
+        "--rotate-y": value
+      };
+    }
   },
-  transform(props) {
-    const { size, ...rest } = props;
-    return {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flex: "0 0 auto",
-      width: size,
-      height: size,
-      borderRadius: "9999px",
-      ...rest
-    };
-  }
-});
-var square = definePattern({
-  properties: {
-    size: { type: "property", value: "width" }
+  rotateZ: {
+    className: "rotate-z",
+    group: "Transform",
+    property: "rotate",
+    transform(value) {
+      return {
+        "--rotate-z": value
+      };
+    }
   },
-  transform(props) {
-    const { size, ...rest } = props;
-    return {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flex: "0 0 auto",
-      width: size,
-      height: size,
-      ...rest
-    };
-  }
-});
-var grid = definePattern({
-  properties: {
-    gap: { type: "property", value: "gap" },
-    columnGap: { type: "property", value: "gap" },
-    rowGap: { type: "property", value: "gap" },
-    columns: { type: "number" },
-    minChildWidth: { type: "token", value: "sizes", property: "width" }
+  scale: {
+    className: "scale",
+    group: "Transform",
+    property: "scale",
+    values: {
+      auto: "var(--scale-x) var(--scale-y)"
+    }
   },
-  defaultValues(props) {
-    return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
+  scaleX: {
+    className: "scale-x",
+    group: "Transform",
+    transform(value) {
+      return {
+        "--scale-x": value
+      };
+    }
   },
-  transform(props, { map, isCssUnit }) {
-    const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
-    const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
-    return {
-      display: "grid",
-      gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
-      gap,
-      columnGap,
-      rowGap,
-      ...rest
-    };
-  }
-});
-var gridItem = definePattern({
-  properties: {
-    colSpan: { type: "number" },
-    rowSpan: { type: "number" },
-    colStart: { type: "number" },
-    rowStart: { type: "number" },
-    colEnd: { type: "number" },
-    rowEnd: { type: "number" }
+  scaleY: {
+    className: "scale-y",
+    group: "Transform",
+    transform(value) {
+      return {
+        "--scale-y": value
+      };
+    }
   },
-  transform(props, { map }) {
-    const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
-    const spanFn = (v) => v === "auto" ? v : `span ${v}`;
-    return {
-      gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
-      gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
-      gridColumnStart: colStart,
-      gridColumnEnd: colEnd,
-      gridRowStart: rowStart,
-      gridRowEnd: rowEnd,
-      ...rest
-    };
-  }
-});
-var wrap = definePattern({
-  properties: {
-    gap: { type: "property", value: "gap" },
-    rowGap: { type: "property", value: "gap" },
-    columnGap: { type: "property", value: "gap" },
-    align: { type: "property", value: "alignItems" },
-    justify: { type: "property", value: "justifyContent" }
+  translate: {
+    className: "translate",
+    group: "Transform",
+    property: "translate",
+    values: {
+      auto: "var(--translate-x) var(--translate-y)",
+      "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)"
+    }
   },
-  transform(props) {
-    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
-    return {
-      display: "flex",
-      flexWrap: "wrap",
-      alignItems: align,
-      justifyContent: justify,
-      gap,
-      columnGap,
-      rowGap,
-      ...rest
-    };
-  }
-});
-var container2 = definePattern({
-  transform(props) {
-    return {
-      position: "relative",
-      maxWidth: "8xl",
-      mx: "auto",
-      px: { base: "4", md: "6", lg: "8" },
-      ...props
-    };
-  }
-});
-var center = definePattern({
-  properties: {
-    inline: { type: "boolean" }
+  translateX: {
+    shorthand: "x",
+    className: "translate-x",
+    group: "Transform",
+    values(theme2) {
+      return {
+        ...theme2("spacing"),
+        ...fractions
+      };
+    },
+    transform(value) {
+      return {
+        "--translate-x": value
+      };
+    }
   },
-  transform(props) {
-    const { inline, ...rest } = props;
-    return {
-      display: inline ? "inline-flex" : "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      ...rest
-    };
-  }
-});
-var aspectRatio = definePattern({
-  properties: {
-    ratio: { type: "number" }
+  translateY: {
+    shorthand: "y",
+    className: "translate-y",
+    group: "Transform",
+    values(theme2) {
+      return {
+        ...theme2("spacing"),
+        ...fractions
+      };
+    },
+    transform(value) {
+      return {
+        "--translate-y": value
+      };
+    }
   },
-  blocklist: ["aspectRatio"],
-  transform(props, { map }) {
-    const { ratio = 4 / 3, ...rest } = props;
-    return {
-      position: "relative",
-      _before: {
-        content: `""`,
-        display: "block",
-        height: "0",
-        paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
-      },
-      "&>*": {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        overflow: "hidden",
-        position: "absolute",
-        inset: "0",
-        width: "100%",
-        height: "100%"
-      },
-      "&>img, &>video": {
-        objectFit: "cover"
-      },
-      ...rest
-    };
+  translateZ: {
+    shorthand: "z",
+    className: "translate-z",
+    group: "Transform",
+    values(theme2) {
+      return {
+        ...theme2("spacing"),
+        ...fractions
+      };
+    },
+    transform(value) {
+      return {
+        "--translate-z": value
+      };
+    }
   }
+};
+var createTransition = (value) => ({
+  transitionProperty: `var(--transition-prop, ${value})`,
+  transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
+  transitionDuration: "var(--transition-duration, 150ms)"
 });
-var divider = definePattern({
-  properties: {
-    orientation: { type: "enum", value: ["horizontal", "vertical"] },
-    thickness: { type: "token", value: "sizes", property: "borderWidth" },
-    color: { type: "token", value: "colors", property: "borderColor" }
+var transitionMap = {
+  all: createTransition("all"),
+  common: createTransition(
+    "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"
+  ),
+  background: createTransition("background, background-color"),
+  colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
+  opacity: createTransition("opacity"),
+  shadow: createTransition("box-shadow"),
+  transform: createTransition("transform")
+};
+var transitions = {
+  transitionTimingFunction: {
+    className: "ease",
+    values: "easings",
+    group: "Transition",
+    transform(value) {
+      return {
+        "--transition-easing": value,
+        transitionTimingFunction: value
+      };
+    }
   },
-  defaultValues: {
-    orientation: "horizontal",
-    thickness: "1px"
+  transitionDelay: {
+    className: "delay",
+    values: "durations",
+    group: "Transition"
   },
-  transform(props, { map }) {
-    const { orientation, thickness, color, ...rest } = props;
-    return {
-      "--thickness": thickness,
-      width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
-      height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
-      borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
-      borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
-      borderColor: color,
-      ...rest
-    };
-  }
-});
-var linkBox = definePattern({
-  transform(props) {
-    return {
-      position: "relative",
-      "& :where(a, abbr)": {
-        position: "relative",
-        zIndex: "1"
-      },
-      ...props
-    };
-  }
-});
-var linkOverlay = definePattern({
-  jsxElement: "a",
-  transform(props) {
-    return {
-      position: "static",
-      _before: {
-        content: '""',
-        display: "block",
-        position: "absolute",
-        cursor: "inherit",
-        inset: "0",
-        zIndex: "0",
-        ...props["_before"]
-      },
-      ...props
-    };
-  }
-});
-var float = definePattern({
-  properties: {
-    offsetX: { type: "token", value: "spacing", property: "left" },
-    offsetY: { type: "token", value: "spacing", property: "top" },
-    offset: { type: "token", value: "spacing", property: "top" },
-    placement: {
-      type: "enum",
-      value: [
-        "bottom-end",
-        "bottom-start",
-        "top-end",
-        "top-start",
-        "bottom-center",
-        "top-center",
-        "middle-center",
-        "middle-end",
-        "middle-start"
-      ]
+  transitionDuration: {
+    className: "duration",
+    values: "durations",
+    group: "Transition",
+    transform(value) {
+      return {
+        "--transition-duration": value,
+        transitionDuration: value
+      };
     }
   },
-  defaultValues(props) {
-    const offset = props.offset || "0";
-    return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
+  transitionProperty: {
+    className: "transition-prop",
+    group: "Transition",
+    transform(value) {
+      return {
+        "--transition-prop": value,
+        transitionProperty: value
+      };
+    }
   },
-  transform(props, { map }) {
-    const { offset, offsetX, offsetY, placement, ...rest } = props;
-    return {
-      display: "inline-flex",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "absolute",
-      insetBlockStart: map(placement, (v) => {
-        const [side] = v.split("-");
-        const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
-        return map2[side];
-      }),
-      insetBlockEnd: map(placement, (v) => {
-        const [side] = v.split("-");
-        const map2 = { top: "auto", middle: "50%", bottom: offsetY };
-        return map2[side];
-      }),
-      insetInlineStart: map(placement, (v) => {
-        const [, align] = v.split("-");
-        const map2 = { start: offsetX, center: "50%", end: "auto" };
-        return map2[align];
-      }),
-      insetInlineEnd: map(placement, (v) => {
-        const [, align] = v.split("-");
-        const map2 = { start: "auto", center: "50%", end: offsetX };
-        return map2[align];
-      }),
-      translate: map(placement, (v) => {
-        const [side, align] = v.split("-");
-        const mapX = { start: "-50%", center: "-50%", end: "50%" };
-        const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
-        return `${mapX[align]} ${mapY[side]}`;
-      }),
-      ...rest
-    };
-  }
-});
-var bleed = definePattern({
-  properties: {
-    inline: { type: "property", value: "marginInline" },
-    block: { type: "property", value: "marginBlock" }
+  transition: {
+    className: "transition",
+    values: Object.keys(transitionMap),
+    group: "Transition",
+    transform(value) {
+      return transitionMap[value] ?? { transition: value };
+    }
   },
-  defaultValues: {
-    inline: "0",
-    block: "0"
+  animation: {
+    className: "animation",
+    values: "animations",
+    group: "Transition"
   },
-  transform(props, { map, isCssUnit, isCssVar }) {
-    const { inline, block, ...rest } = props;
-    const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
-    return {
-      "--bleed-x": map(inline, valueFn),
-      "--bleed-y": map(block, valueFn),
-      marginInline: "calc(var(--bleed-x, 0) * -1)",
-      marginBlock: "calc(var(--bleed-y, 0) * -1)",
-      ...rest
-    };
-  }
-});
-var visuallyHidden = definePattern({
-  transform(props) {
-    return {
-      srOnly: true,
-      ...props
-    };
+  animationName: {
+    className: "animation-name",
+    values: "keyframes",
+    group: "Transition"
+  },
+  animationTimingFunction: {
+    className: "animation-ease",
+    values: "easings",
+    group: "Transition"
+  },
+  animationDuration: {
+    className: "animation-duration",
+    values: "durations",
+    group: "Transition"
+  },
+  animationDelay: {
+    className: "animation-delay",
+    values: "durations",
+    group: "Transition"
   }
-});
-var cq = definePattern({
-  properties: {
-    name: { type: "token", value: "containerNames", property: "containerName" },
-    type: { type: "property", value: "containerType" }
+};
+var typography = {
+  color: {
+    className: "text",
+    values: "colors",
+    group: "Color",
+    transform: createColorMixTransform("color")
   },
-  defaultValues: {
-    type: "inline-size"
+  fontFamily: {
+    className: "font",
+    values: "fonts",
+    group: "Typography"
   },
-  transform(props) {
-    const { name, type, ...rest } = props;
-    return {
-      containerType: type,
-      containerName: name,
-      ...rest
-    };
+  fontSize: {
+    className: "fs",
+    values: "fontSizes",
+    group: "Typography"
+  },
+  fontWeight: {
+    className: "fw",
+    values: "fontWeights",
+    group: "Typography"
+  },
+  fontSmoothing: {
+    className: "smoothing",
+    group: "Typography",
+    values: {
+      antialiased: "antialiased",
+      "subpixel-antialiased": "auto"
+    },
+    transform(value) {
+      return {
+        WebkitFontSmoothing: value
+      };
+    }
+  },
+  fontVariantNumeric: {
+    className: "numeric",
+    group: "Typography"
+  },
+  letterSpacing: {
+    className: "tracking",
+    values: "letterSpacings",
+    group: "Typography"
+  },
+  lineHeight: {
+    className: "leading",
+    values: "lineHeights",
+    group: "Typography"
+  },
+  textAlign: {
+    className: "text-align",
+    group: "Typography"
+  },
+  textDecoration: {
+    className: "text-decor",
+    group: "Typography"
+  },
+  textDecorationColor: {
+    className: "text-decor-color",
+    values: "colors",
+    transform: createColorMixTransform("textDecorationColor"),
+    group: "Typography"
+  },
+  textEmphasisColor: {
+    className: "text-emphasis-color",
+    values: "colors",
+    transform: createColorMixTransform("textEmphasisColor"),
+    group: "Typography"
+  },
+  textDecorationStyle: {
+    className: "decoration-style",
+    group: "Typography"
+  },
+  textDecorationThickness: {
+    className: "decoration-thickness",
+    group: "Typography"
+  },
+  textUnderlineOffset: {
+    className: "underline-offset",
+    group: "Typography"
+  },
+  textTransform: {
+    className: "text-transform",
+    group: "Typography"
+  },
+  textIndent: {
+    className: "indent",
+    group: "Typography",
+    values: "spacing"
+  },
+  textShadow: {
+    className: "text-shadow",
+    values: "shadows",
+    group: "Typography"
+  },
+  textShadowColor: {
+    shorthand: "textShadowColor",
+    className: "text-shadow",
+    values: "colors",
+    transform: createColorMixTransform("--text-shadow-color"),
+    group: "Typography"
+  },
+  textOverflow: {
+    className: "text-overflow",
+    group: "Typography"
+  },
+  verticalAlign: {
+    className: "v-align",
+    group: "Typography"
+  },
+  wordBreak: {
+    className: "break",
+    group: "Typography"
+  },
+  textWrap: {
+    className: "text-wrap",
+    values: ["wrap", "balance", "nowrap"],
+    group: "Typography",
+    transform(value) {
+      return { textWrap: value };
+    }
+  },
+  truncate: {
+    className: "truncate",
+    values: { type: "boolean" },
+    group: "Typography",
+    transform(value) {
+      if (!value)
+        return {};
+      return {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      };
+    }
+  },
+  lineClamp: {
+    className: "clamp",
+    group: "Typography",
+    transform(value) {
+      if (value === "none") {
+        return {
+          WebkitLineClamp: "unset"
+        };
+      }
+      return {
+        overflow: "hidden",
+        display: "-webkit-box",
+        WebkitLineClamp: value,
+        WebkitBoxOrient: "vertical"
+      };
+    }
   }
-});
-var patterns = {
-  box,
-  flex,
-  stack,
-  vstack,
-  hstack,
-  spacer,
-  square,
-  circle,
-  center,
-  linkBox,
-  linkOverlay,
-  aspectRatio,
-  grid,
-  gridItem,
-  wrap,
-  container: container2,
-  divider,
-  float,
-  bleed,
-  visuallyHidden,
-  cq
 };
+var utilities = Object.assign(
+  {},
+  layout,
+  display,
+  flexGrid,
+  spacing,
+  outline,
+  divide,
+  sizing,
+  typography,
+  list,
+  background,
+  backgroundGradients,
+  border,
+  effects,
+  tables,
+  transitions,
+  transforms,
+  interactivity,
+  svg,
+  helpers,
+  polyfill,
+  container2
+);
 var definePreset = (preset22) => preset22;
 var preset = definePreset({
   conditions,
   utilities,
-  patterns
+  patterns,
+  // globalVars,
+  globalCss
 });
 var src_default = preset;
 
-// ../node_modules/.pnpm/@pandacss+preset-panda@0.31.0/node_modules/@pandacss/preset-panda/dist/index.mjs
+// ../node_modules/.pnpm/@pandacss+preset-panda@0.39.1/node_modules/@pandacss/preset-panda/dist/index.mjs
 init_esm_shims();
 var breakpoints = {
   sm: "640px",