@pandacss/preset-base 0.36.1 → 0.37.0

package/dist/index.js

@@ -101,8 +101,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)",
@@ -114,171 +114,594 @@ 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"
 };
 
-// src/color-mix-transform.ts
-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})`
-  };
+// src/global-css.ts
+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
+  }
 };
 
-// src/utilities/background.ts
-var background = {
-  backgroundPosition: {
-    shorthand: "bgPosition",
-    className: "bg",
-    group: "Background"
+// src/patterns.ts
+function definePattern(config) {
+  return config;
+}
+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" }
   },
-  backgroundPositionX: {
-    shorthand: "bgPositionX",
-    className: "bg-x",
-    group: "Background"
+  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" }
   },
-  backgroundPositionY: {
-    shorthand: "bgPositionY",
-    className: "bg-y",
-    group: "Background"
+  defaultValues: {
+    direction: "column",
+    gap: "10px"
   },
-  backgroundAttachment: {
-    shorthand: "bgAttachment",
-    className: "bg",
-    group: "Background"
+  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" }
   },
-  backgroundClip: {
-    shorthand: "bgClip",
-    className: "bg-clip",
-    group: "Background",
-    transform(value) {
-      return {
-        backgroundClip: value,
-        WebkitBackgroundClip: value
-      };
-    }
+  defaultValues: {
+    gap: "10px"
   },
-  background: {
-    shorthand: "bg",
-    className: "bg",
-    values: "colors",
-    group: "Background",
-    transform: createColorMixTransform("background")
+  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" }
   },
-  backgroundColor: {
-    shorthand: "bgColor",
-    className: "bg",
-    values: "colors",
-    group: "Background",
-    transform: createColorMixTransform("backgroundColor")
+  defaultValues: {
+    gap: "10px"
   },
-  backgroundOrigin: {
-    shorthand: "bgOrigin",
-    className: "bg-origin",
-    group: "Background"
+  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" }
   },
-  backgroundImage: {
-    shorthand: "bgImage",
-    className: "bg-img",
-    values: "assets",
-    group: "Background"
+  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" }
   },
-  backgroundRepeat: {
-    shorthand: "bgRepeat",
-    className: "bg-repeat",
-    group: "Background"
+  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" }
   },
-  backgroundBlendMode: {
-    shorthand: "bgBlendMode",
-    className: "bg-blend",
-    group: "Background"
+  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" }
   },
-  backgroundSize: {
-    shorthand: "bgSize",
-    className: "bg",
-    group: "Background"
+  defaultValues(props) {
+    return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
   },
-  backgroundGradient: {
-    shorthand: "bgGradient",
-    className: "bg-gradient",
-    group: "Background",
-    values(theme) {
-      return {
-        ...theme("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, { 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" }
   },
-  textGradient: {
-    className: "text-gradient",
-    group: "Background",
-    values(theme) {
-      return {
-        ...theme("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(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 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"
+      ]
+    }
+  },
+  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,
+  linkBox,
+  linkOverlay,
+  aspectRatio,
+  grid,
+  gridItem,
+  wrap,
+  container,
+  divider,
+  float,
+  bleed,
+  visuallyHidden,
+  cq
+};
+
+// src/color-mix-transform.ts
+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})`
+  };
+};
+
+// src/utilities/background.ts
+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 {
-        "--gradient-stops": "var(--gradient-from), var(--gradient-to)",
-        "--gradient": "var(--gradient-via-stops, var(--gradient-stops))",
-        backgroundImage: value,
-        WebkitBackgroundClip: "text",
-        color: "transparent"
+        backgroundClip: value,
+        WebkitBackgroundClip: value
       };
     }
   },
-  gradientFrom: {
-    className: "from",
+  background: {
+    shorthand: "bg",
+    className: "bg",
     values: "colors",
     group: "Background",
-    transform: createColorMixTransform("--gradient-from")
+    transform: createColorMixTransform("background")
   },
-  gradientTo: {
-    className: "to",
+  backgroundColor: {
+    shorthand: "bgColor",
+    className: "bg",
     values: "colors",
     group: "Background",
-    transform: createColorMixTransform("--gradient-to")
+    transform: createColorMixTransform("backgroundColor")
   },
-  gradientVia: {
-    className: "via",
-    values: "colors",
-    group: "Background",
-    transform(value, args) {
-      const transformed = gradientVia(value, args);
-      return {
-        ...transformed,
-        "--gradient-via-stops": "var(--gradient-from), var(--gradient-via), var(--gradient-to)"
-      };
-    }
+  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 gradientVia = createColorMixTransform("--gradient-via");
 
 // src/utilities/border.ts
 var border = {
@@ -595,7 +1018,7 @@ var border = {
 };
 
 // src/utilities/container.ts
-var container = {
+var container2 = {
   container: {
     className: "cq",
     group: "Container"
@@ -649,10 +1072,11 @@ var display = {
 };
 
 // src/utilities/divide.ts
+var divideColor = createColorMixTransform("borderColor");
 var divide = {
   divideX: {
     className: "divide-x",
-    values: { type: "string" },
+    values: "borderWidths",
     group: "Border",
     transform(value) {
       return {
@@ -665,7 +1089,7 @@ var divide = {
   },
   divideY: {
     className: "divide-y",
-    values: { type: "string" },
+    values: "borderWidths",
     group: "Border",
     transform(value) {
       return {
@@ -677,7 +1101,7 @@ var divide = {
     }
   },
   divideColor: {
-    className: "divide",
+    className: "divide-color",
     values: "colors",
     group: "Border",
     transform(value, args) {
@@ -687,7 +1111,7 @@ var divide = {
     }
   },
   divideStyle: {
-    className: "divide",
+    className: "divide-style",
     property: "borderStyle",
     group: "Border",
     transform(value) {
@@ -699,7 +1123,6 @@ var divide = {
     }
   }
 };
-var divideColor = createColorMixTransform("borderColor");
 
 // src/utilities/effects.ts
 var effects = {
@@ -715,7 +1138,7 @@ var effects = {
   },
   boxShadowColor: {
     shorthand: "shadowColor",
-    className: "shadow",
+    className: "shadow-color",
     values: "colors",
     transform: createColorMixTransform("--shadow-color"),
     group: "Color"
@@ -728,17 +1151,7 @@ var effects = {
     className: "filter",
     group: "Effect",
     values: {
-      auto: [
-        "var(--blur)",
-        "var(--brightness)",
-        "var(--contrast)",
-        "var(--grayscale)",
-        "var(--hue-rotate)",
-        "var(--invert)",
-        "var(--saturate)",
-        "var(--sepia)",
-        "var(--drop-shadow)"
-      ].join(" ")
+      auto: "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )"
     }
   },
   brightness: {
@@ -828,16 +1241,7 @@ var effects = {
     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-saturate)",
-        "var(--backdrop-sepia)"
-      ].join(" ")
+      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 {
@@ -1143,6 +1547,111 @@ var flexGrid = {
   }
 };
 
+// src/utilities/gradient.ts
+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(theme) {
+      return {
+        ...theme("gradients"),
+        ...gradientTemplate
+      };
+    },
+    transform(value) {
+      return {
+        ...gradientVars,
+        backgroundImage: value
+      };
+    }
+  },
+  textGradient: {
+    className: "text-gradient",
+    group: "Background Gradient",
+    values(theme) {
+      return {
+        ...theme("gradients"),
+        ...gradientTemplate
+      };
+    },
+    transform(value) {
+      return {
+        ...gradientVars,
+        backgroundImage: value,
+        WebkitBackgroundClip: "text",
+        color: "transparent"
+      };
+    }
+  },
+  gradientFromPosition: {
+    className: "gradient-from-pos",
+    group: "Background Gradient",
+    transform(value) {
+      return {
+        "--gradient-from-position": value
+      };
+    }
+  },
+  gradientToPosition: {
+    className: "gradient-to-pos",
+    group: "Background Gradient",
+    transform(value) {
+      return {
+        "--gradient-to-position": value
+      };
+    }
+  },
+  gradientFrom: {
+    className: "gradient-from",
+    values: "colors",
+    group: "Background Gradient",
+    transform: createColorMixTransform("--gradient-from")
+  },
+  gradientTo: {
+    className: "gradient-to",
+    values: "colors",
+    group: "Background Gradient",
+    transform: createColorMixTransform("--gradient-to")
+  },
+  gradientVia: {
+    className: "gradient-via",
+    values: "colors",
+    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)"
+      };
+    }
+  },
+  gradientViaPosition: {
+    className: "gradient-via-pos",
+    group: "Background Gradient",
+    transform(value) {
+      return {
+        "--gradient-via-position": value
+      };
+    }
+  }
+};
+
 // src/utilities/helpers.ts
 var srMapping = {
   true: {
@@ -1351,15 +1860,15 @@ var interactivity = {
     group: "Scroll"
   },
   scrollSnapAlign: {
-    className: "snap",
+    className: "snap-align",
     group: "Scroll"
   },
   scrollSnapStop: {
-    className: "snap",
+    className: "snap-stop",
     group: "Scroll"
   },
   scrollSnapType: {
-    className: "snap",
+    className: "snap-type",
     group: "Scroll",
     values: {
       none: "none",
@@ -1369,7 +1878,7 @@ var interactivity = {
     }
   },
   scrollSnapStrictness: {
-    className: "strictness",
+    className: "snap-strictness",
     values: ["mandatory", "proximity"],
     group: "Scroll",
     transform(value) {
@@ -1446,11 +1955,11 @@ var layout = {
     group: "System"
   },
   objectPosition: {
-    className: "object",
+    className: "obj-pos",
     group: "Layout"
   },
   objectFit: {
-    className: "object",
+    className: "obj-fit",
     group: "Layout"
   },
   overscrollBehavior: {
@@ -1567,11 +2076,11 @@ var layout = {
 // src/utilities/list.ts
 var list = {
   listStyleType: {
-    className: "list",
+    className: "list-type",
     group: "List"
   },
   listStylePosition: {
-    className: "list",
+    className: "list-pos",
     group: "List"
   },
   listStyleImage: {
@@ -1584,13 +2093,13 @@ var list = {
 // src/utilities/outline.ts
 var outline = {
   outlineWidth: {
-    className: "ring",
+    className: "ring-width",
     shorthand: "ringWidth",
     values: "borderWidths",
     group: "Border"
   },
   outlineColor: {
-    className: "ring",
+    className: "ring-color",
     values: "colors",
     group: "Color",
     shorthand: "ringColor",
@@ -1609,7 +2118,7 @@ var outline = {
     }
   },
   outlineOffset: {
-    className: "ring",
+    className: "ring-offset",
     shorthand: "ringOffset",
     values: "spacing",
     group: "Border"
@@ -1668,7 +2177,7 @@ var polyfill = {
     }
   },
   textSizeAdjust: {
-    className: "text-size-adjust",
+    className: "text-adjust",
     group: "Typography",
     transform(value) {
       return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
@@ -1933,6 +2442,34 @@ var spacing = {
     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"
+        }
+      };
+    }
   }
 };
 
@@ -1965,8 +2502,13 @@ var tables = {
   },
   borderSpacing: {
     className: "border-spacing",
-    values: "spacing",
-    group: "Table"
+    group: "Table",
+    values(theme) {
+      return {
+        ...theme("spacing"),
+        auto: "var(--border-spacing-x) var(--border-spacing-y)"
+      };
+    }
   },
   borderSpacingX: {
     className: "border-spacing-x",
@@ -1974,7 +2516,7 @@ var tables = {
     group: "Table",
     transform(value) {
       return {
-        borderSpacing: `${value} var(--border-spacing-y)`
+        "--border-spacing-x": value
       };
     }
   },
@@ -1984,7 +2526,7 @@ var tables = {
     group: "Table",
     transform(value) {
       return {
-        borderSpacing: `var(--border-spacing-x) ${value}`
+        "--border-spacing-y": value
       };
     }
   },
@@ -2013,6 +2555,45 @@ var transforms = {
     className: "origin",
     group: "Transform"
   },
+  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)"
+    }
+  },
+  rotateX: {
+    className: "rotate-x",
+    group: "Transform",
+    property: "rotate",
+    transform(value) {
+      return {
+        "--rotate-x": value
+      };
+    }
+  },
+  rotateY: {
+    className: "rotate-y",
+    group: "Transform",
+    property: "rotate",
+    transform(value) {
+      return {
+        "--rotate-y": value
+      };
+    }
+  },
+  rotateZ: {
+    className: "rotate-z",
+    group: "Transform",
+    property: "rotate",
+    transform(value) {
+      return {
+        "--rotate-z": value
+      };
+    }
+  },
   scale: {
     className: "scale",
     group: "Transform",
@@ -2044,7 +2625,8 @@ var transforms = {
     group: "Transform",
     property: "translate",
     values: {
-      auto: "var(--translate-x) var(--translate-y)"
+      auto: "var(--translate-x) var(--translate-y)",
+      "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)"
     }
   },
   translateX: {
@@ -2078,6 +2660,22 @@ var transforms = {
         "--translate-y": value
       };
     }
+  },
+  translateZ: {
+    shorthand: "z",
+    className: "translate-z",
+    group: "Transform",
+    values(theme) {
+      return {
+        ...theme("spacing"),
+        ...fractions
+      };
+    },
+    transform(value) {
+      return {
+        "--translate-z": value
+      };
+    }
   }
 };
 
@@ -2154,6 +2752,16 @@ var transitions = {
     values: "animationName",
     group: "Transition"
   },
+  animationTimingFunction: {
+    className: "animation-ease",
+    values: "easings",
+    group: "Transition"
+  },
+  animationDuration: {
+    className: "animation-duration",
+    values: "durations",
+    group: "Transition"
+  },
   animationDelay: {
     className: "animation-delay",
     values: "durations",
@@ -2165,647 +2773,192 @@ var transitions = {
 var typography = {
   color: {
     className: "text",
-    values: "colors",
-    group: "Color",
-    transform: createColorMixTransform("color")
-  },
-  fontFamily: {
-    className: "font",
-    values: "fonts",
-    group: "Typography"
-  },
-  fontSize: {
-    className: "fs",
-    values: "fontSizes",
-    group: "Typography"
-  },
-  fontWeight: {
-    className: "font",
-    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",
-    group: "Typography"
-  },
-  textDecoration: {
-    className: "text-decor",
-    group: "Typography"
-  },
-  textDecorationColor: {
-    className: "text-decor",
-    values: "colors",
-    transform: createColorMixTransform("textDecorationColor"),
-    group: "Typography"
-  },
-  textEmphasisColor: {
-    className: "text-emphasis",
-    values: "colors",
-    transform: createColorMixTransform("textEmphasisColor"),
-    group: "Typography"
-  },
-  textDecorationStyle: {
-    className: "decoration",
-    group: "Typography"
-  },
-  textDecorationThickness: {
-    className: "decoration",
-    group: "Typography"
-  },
-  textUnderlineOffset: {
-    className: "underline-offset",
-    group: "Typography"
-  },
-  textTransform: {
-    className: "text",
-    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",
-    group: "Typography"
-  },
-  verticalAlign: {
-    className: "align",
-    group: "Typography"
-  },
-  wordBreak: {
-    className: "break",
-    group: "Typography"
-  },
-  textWrap: {
-    className: "text",
-    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"
-      };
-    }
-  }
-};
-
-// src/utilities/index.ts
-var utilities = Object.assign(
-  {},
-  layout,
-  display,
-  flexGrid,
-  spacing,
-  outline,
-  divide,
-  sizing,
-  typography,
-  list,
-  background,
-  border,
-  effects,
-  tables,
-  transitions,
-  transforms,
-  interactivity,
-  svg,
-  helpers,
-  polyfill,
-  container
-);
-
-// src/patterns.ts
-function definePattern(config) {
-  return config;
-}
-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" }
+    values: "colors",
+    group: "Color",
+    transform: createColorMixTransform("color")
   },
-  defaultValues: {
-    gap: "10px"
+  fontFamily: {
+    className: "font",
+    values: "fonts",
+    group: "Typography"
   },
-  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" }
+  fontSize: {
+    className: "fs",
+    values: "fontSizes",
+    group: "Typography"
   },
-  defaultValues: {
-    gap: "10px"
+  fontWeight: {
+    className: "fw",
+    values: "fontWeights",
+    group: "Typography"
   },
-  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" }
+  fontSmoothing: {
+    className: "smoothing",
+    group: "Typography",
+    values: {
+      antialiased: "antialiased",
+      "subpixel-antialiased": "auto"
+    },
+    transform(value) {
+      return {
+        WebkitFontSmoothing: 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" }
+  fontVariantNumeric: {
+    className: "numeric",
+    group: "Typography"
   },
-  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" }
+  letterSpacing: {
+    className: "tracking",
+    values: "letterSpacings",
+    group: "Typography"
   },
-  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" }
+  lineHeight: {
+    className: "leading",
+    values: "lineHeights",
+    group: "Typography"
   },
-  defaultValues(props) {
-    return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
+  textAlign: {
+    className: "text-align",
+    group: "Typography"
   },
-  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" }
+  textDecoration: {
+    className: "text-decor",
+    group: "Typography"
   },
-  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" }
+  textDecorationColor: {
+    className: "text-decor-color",
+    values: "colors",
+    transform: createColorMixTransform("textDecorationColor"),
+    group: "Typography"
   },
-  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" }
+  textEmphasisColor: {
+    className: "text-emphasis-color",
+    values: "colors",
+    transform: createColorMixTransform("textEmphasisColor"),
+    group: "Typography"
   },
-  transform(props) {
-    const { inline, ...rest } = props;
-    return {
-      display: inline ? "inline-flex" : "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      ...rest
-    };
-  }
-});
-var aspectRatio = definePattern({
-  properties: {
-    ratio: { type: "number" }
+  textDecorationStyle: {
+    className: "decoration-style",
+    group: "Typography"
   },
-  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" }
+  textDecorationThickness: {
+    className: "decoration-thickness",
+    group: "Typography"
   },
-  defaultValues: {
-    orientation: "horizontal",
-    thickness: "1px"
+  textUnderlineOffset: {
+    className: "underline-offset",
+    group: "Typography"
   },
-  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"
-      ]
-    }
+  textTransform: {
+    className: "text-transform",
+    group: "Typography"
   },
-  defaultValues(props) {
-    const offset = props.offset || "0";
-    return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
+  textIndent: {
+    className: "indent",
+    group: "Typography",
+    values: "spacing"
   },
-  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" }
+  textShadow: {
+    className: "text-shadow",
+    values: "shadows",
+    group: "Typography"
   },
-  defaultValues: {
-    inline: "0",
-    block: "0"
+  textShadowColor: {
+    shorthand: "textShadowColor",
+    className: "text-shadow",
+    values: "colors",
+    transform: createColorMixTransform("--text-shadow-color"),
+    group: "Typography"
   },
-  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" }
+  textOverflow: {
+    className: "text-overflow",
+    group: "Typography"
   },
-  defaultValues: {
-    type: "inline-size"
+  verticalAlign: {
+    className: "v-align",
+    group: "Typography"
   },
-  transform(props) {
-    const { name, type, ...rest } = props;
-    return {
-      containerType: type,
-      containerName: name,
-      ...rest
-    };
+  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
 };
 
+// src/utilities/index.ts
+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
+);
+
 // src/index.ts
 var definePreset = (preset2) => preset2;
 var preset = definePreset({
   conditions,
   utilities,
-  patterns
+  patterns,
+  // globalVars,
+  globalCss
 });
 var src_default = preset;
 // Annotate the CommonJS export names for ESM import in node: