@pandacss/config 0.3.0 → 0.3.2

package/node_modules/@pandacss/preset-base/dist/index.mjs

@@ -1,2279 +0,0 @@
-// src/conditions.ts
-var conditions = {
-  hover: "&:where(:hover, [data-hover])",
-  focus: "&:where(:focus, [data-focus])",
-  focusWithin: "&:focus-within",
-  focusVisible: "&:where(:focus-visible, [data-focus-visible])",
-  disabled: "&:where(:disabled, [disabled], [data-disabled])",
-  active: "&:where(:active, [data-active])",
-  visited: "&:visited",
-  target: "&:target",
-  readOnly: "&:where(:read-only, [data-read-only])",
-  readWrite: "&:read-write",
-  empty: "&:where(:empty, [data-empty])",
-  checked: "&:where(:checked, [data-checked], [aria-checked=true])",
-  enabled: "&:enabled",
-  expanded: "&:where([aria-expanded=true], [data-expanded])",
-  highlighted: "&[data-highlighted]",
-  before: "&::before",
-  after: "&::after",
-  firstLetter: "&::first-letter",
-  firstLine: "&::first-line",
-  marker: "&::marker",
-  selection: "&::selection",
-  file: "&::file-selector-button",
-  backdrop: "&::backdrop",
-  first: "&:first-child",
-  last: "&:last-child",
-  only: "&:only-child",
-  even: "&:even",
-  odd: "&:odd",
-  firstOfType: "&:first-of-type",
-  lastOfType: "&:last-of-type",
-  onlyOfType: "&:only-of-type",
-  peerFocus: ".peer:where(:focus, [data-focus]) ~ &",
-  peerHover: ".peer:where(:hover, [data-hover]) ~ &",
-  peerActive: ".peer:where(:active, [data-active]) ~ &",
-  peerFocusWithin: ".peer:focus-within ~ &",
-  peerFocusVisible: ".peer:where(:focus-visible, [data-focus-visible]) ~ &",
-  peerDisabled: ".peer:where(:disabled, [disabled], [data-disabled]) ~ &",
-  peerChecked: ".peer:where(:checked, [data-checked], [aria-checked=true]) ~ &",
-  peerInvalid: ".peer:where(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
-  peerExpanded: ".peer:where([aria-expanded=true], [data-expanded]) ~ &",
-  peerPlaceholderShown: ".peer:placeholder-shown ~ &",
-  groupFocus: ".group:where(:focus, [data-focus]) &",
-  groupHover: ".group:where(:hover, [data-hover]) &",
-  groupActive: ".group:where(:active, [data-active]) &",
-  groupFocusWithin: ".group:focus-within &",
-  groupFocusVisible: ".group:where(:focus-visible, [data-focus-visible]) &",
-  groupDisabled: ".group:where(:disabled, [disabled], [data-disabled]) &",
-  groupChecked: ".group:where(:checked, [data-checked], [aria-checked=true]) &",
-  groupExpanded: ".group:where([aria-expanded=true], [data-expanded]) &",
-  groupInvalid: ".group:invalid &",
-  indeterminate: "&:where(:indeterminate, [data-indeterminate], [aria-checked=mixed])",
-  required: "&:required",
-  valid: "&:where(:valid, [data-valid])",
-  invalid: "&:where(:invalid, [data-invalid])",
-  autofill: "&:autofill",
-  inRange: "&:in-range",
-  outOfRange: "&:out-of-range",
-  placeholder: "&:placeholder",
-  placeholderShown: "&:placeholder-shown",
-  pressed: "&:where([aria-pressed=true], [data-pressed])",
-  selected: "&:where([aria-selected=true], [data-selected])",
-  default: "&:default",
-  optional: "&:optional",
-  open: "&[open]",
-  fullscreen: "&:fullscreen",
-  loading: "&:where([data-loading], [aria-busy=true])",
-  currentPage: "&[aria-current=page]",
-  currentStep: "&[aria-current=step]",
-  motionReduce: "@media (prefers-reduced-motion: reduce)",
-  motionSafe: "@media (prefers-reduced-motion: no-preference)",
-  print: "@media print",
-  landscape: "@media (orientation: landscape)",
-  portrait: "@media (orientation: portrait)",
-  dark: " &.dark, .dark &",
-  light: " &.light, .light &",
-  osDark: "@media (prefers-color-scheme: dark)",
-  osLight: "@media (prefers-color-scheme: light)",
-  highConstrast: "@media (forced-colors: active)",
-  lessContrast: "@media (prefers-contrast: less)",
-  moreContrast: "@media (prefers-contrast: more)",
-  ltr: "[dir=ltr] &",
-  rtl: "[dir=rtl] &",
-  scrollbar: "&::-webkit-scrollbar",
-  scrollbarThumb: "&::-webkit-scrollbar-thumb",
-  scrollbarTrack: "&::-webkit-scrollbar-track",
-  horizontal: "&[data-orientation=horizontal]",
-  vertical: "&[data-orientation=vertical]"
-};
-
-// src/utilities/background.ts
-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"
-  },
-  background: {
-    shorthand: "bg",
-    className: "bg",
-    values: "colors"
-  },
-  backgroundColor: {
-    shorthand: "bgColor",
-    className: "bg",
-    values: "colors"
-  },
-  backgroundOrigin: {
-    shorthand: "bgOrigin",
-    className: "bg-origin"
-  },
-  backgroundImage: {
-    shorthand: "bgImage",
-    className: "bg-img",
-    values: "assets"
-  },
-  backgroundRepeat: {
-    shorthand: "bgRepeat",
-    className: "bg-repeat"
-  },
-  backgroundBlendMode: {
-    shorthand: "bgBlendMode",
-    className: "bg-blend"
-  },
-  backgroundSize: {
-    shorthand: "bgSize",
-    className: "bg"
-  },
-  backgroundGradient: {
-    shorthand: "bgGradient",
-    className: "bg-gradient",
-    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
-      };
-    }
-  },
-  textGradient: {
-    className: "text-gradient",
-    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,
-        backgroundClip: "text",
-        color: "transparent"
-      };
-    }
-  },
-  gradientFrom: {
-    className: "from",
-    values: "colors",
-    transform(value) {
-      return {
-        "--gradient-from": value
-      };
-    }
-  },
-  gradientTo: {
-    className: "to",
-    values: "colors",
-    transform(value) {
-      return {
-        "--gradient-to": value
-      };
-    }
-  },
-  gradientVia: {
-    className: "via",
-    values: "colors",
-    transform(value) {
-      return {
-        "--gradient-via-stops": "var(--gradient-from), var(--gradient-via), var(--gradient-to)",
-        "--gradient-via": value
-      };
-    }
-  }
-};
-
-// src/utilities/border.ts
-var border = {
-  borderRadius: {
-    className: "rounded",
-    shorthand: "rounded",
-    values: "radii"
-  },
-  borderTopLeftRadius: {
-    className: "rounded-tl",
-    shorthand: "roundedTopLeft",
-    values: "radii"
-  },
-  borderTopRightRadius: {
-    className: "rounded-tr",
-    shorthand: "roundedTopRight",
-    values: "radii"
-  },
-  borderBottomRightRadius: {
-    className: "rounded-br",
-    shorthand: "roundedBottomRight",
-    values: "radii"
-  },
-  borderBottomLeftRadius: {
-    className: "rounded-bl",
-    shorthand: "roundedBottomLeft",
-    values: "radii"
-  },
-  borderTopRadius: {
-    className: "rounded-t",
-    shorthand: "roundedTop",
-    property: "borderRadius",
-    values: "radii",
-    transform(value) {
-      return {
-        borderTopLeftRadius: value,
-        borderTopRightRadius: value
-      };
-    }
-  },
-  borderRightRadius: {
-    className: "rounded-r",
-    shorthand: "roundedRight",
-    property: "borderRadius",
-    values: "radii",
-    transform(value) {
-      return {
-        borderTopRightRadius: value,
-        borderBottomRightRadius: value
-      };
-    }
-  },
-  borderBottomRadius: {
-    className: "rounded-b",
-    shorthand: "roundedBottom",
-    property: "borderRadius",
-    values: "radii",
-    transform(value) {
-      return {
-        borderBottomLeftRadius: value,
-        borderBottomRightRadius: value
-      };
-    }
-  },
-  borderLeftRadius: {
-    className: "rounded-l",
-    shorthand: "roundedLeft",
-    values: "radii",
-    property: "borderRadius",
-    transform(value) {
-      return {
-        borderTopLeftRadius: value,
-        borderBottomLeftRadius: value
-      };
-    }
-  },
-  borderStartStartRadius: {
-    className: "rounded-ss",
-    shorthand: "roundedStartStart",
-    values: "radii"
-  },
-  borderStartEndRadius: {
-    className: "rounded-se",
-    shorthand: "roundedStartEnd",
-    values: "radii"
-  },
-  borderStartRadius: {
-    className: "rounded-s",
-    values: "radii",
-    property: "borderRadius",
-    shorthand: "roundedStart",
-    transform(value) {
-      return {
-        borderStartStartRadius: value,
-        borderEndStartRadius: value
-      };
-    }
-  },
-  borderEndStartRadius: {
-    className: "rounded-es",
-    shorthand: "roundedEndStart",
-    values: "radii"
-  },
-  borderEndEndRadius: {
-    className: "rounded-ee",
-    shorthand: "roundedEndEnd",
-    values: "radii"
-  },
-  borderEndRadius: {
-    className: "rounded-e",
-    shorthand: "roundedEnd",
-    property: "borderRadius",
-    values: "radii",
-    transform(value) {
-      return {
-        borderStartEndRadius: value,
-        borderEndEndRadius: value
-      };
-    }
-  },
-  border: {
-    className: "border",
-    values: "borders"
-  },
-  borderColor: {
-    className: "border",
-    values: "colors"
-  },
-  borderInline: {
-    className: "border-x",
-    values: "borders",
-    shorthand: "borderX"
-  },
-  borderInlineWidth: {
-    className: "border-x",
-    values: "borderWidths",
-    shorthand: "borderXWidth"
-  },
-  borderInlineColor: {
-    className: "border-x",
-    values: "colors",
-    shorthand: "borderXColor"
-  },
-  borderBlock: {
-    className: "border-y",
-    values: "borders",
-    shorthand: "borderY"
-  },
-  borderBlockWidth: {
-    className: "border-y",
-    values: "borderWidths",
-    shorthand: "borderYWidth"
-  },
-  borderBlockColor: {
-    className: "border-y",
-    values: "colors",
-    shorthand: "borderYColor"
-  },
-  borderLeft: {
-    className: "border-l",
-    values: "borders"
-  },
-  borderLeftColor: {
-    className: "border-l",
-    values: "colors"
-  },
-  borderInlineStart: {
-    className: "border-s",
-    values: "borders",
-    shorthand: "borderStart"
-  },
-  borderInlineStartColor: {
-    className: "border-s",
-    values: "colors",
-    shorthand: "borderStartColor"
-  },
-  borderRight: {
-    className: "border-r",
-    values: "borders"
-  },
-  borderRightColor: {
-    className: "border-r",
-    values: "colors"
-  },
-  borderInlineEnd: {
-    className: "border-e",
-    values: "borders",
-    shorthand: "borderEnd"
-  },
-  borderInlineEndColor: {
-    className: "border-e",
-    values: "colors",
-    shorthand: "borderEndColor"
-  },
-  borderTop: {
-    className: "border-t",
-    values: "borders"
-  },
-  borderTopColor: {
-    className: "border-t",
-    values: "colors"
-  },
-  borderBottom: {
-    className: "border-b",
-    values: "borders"
-  },
-  borderBottomColor: {
-    className: "border-b",
-    values: "colors"
-  },
-  borderBlockEnd: {
-    className: "border-be",
-    values: "borders"
-  },
-  borderBlockEndColor: {
-    className: "border-be",
-    values: "colors"
-  },
-  borderBlockStart: {
-    className: "border-bs",
-    values: "borders"
-  },
-  borderBlockStartColor: {
-    className: "border-bs",
-    values: "colors"
-  }
-};
-
-// src/utilities/display.ts
-var display = {
-  display: {
-    className: "d"
-  },
-  hideFrom: {
-    className: "hide",
-    values: "breakpoints",
-    transform(value, { raw }) {
-      return {
-        [`@breakpoint ${raw}`]: {
-          display: "none"
-        }
-      };
-    }
-  },
-  hideBelow: {
-    className: "show",
-    values: "breakpoints",
-    transform(value, { raw }) {
-      return {
-        [`@breakpoint ${raw}Down`]: {
-          display: "none"
-        }
-      };
-    }
-  }
-};
-
-// src/utilities/divide.ts
-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) {
-      return {
-        "& > :not([hidden]) ~ :not([hidden])": {
-          borderColor: value
-        }
-      };
-    }
-  },
-  divideStyle: {
-    className: "divide",
-    property: "borderStyle",
-    transform(value) {
-      return {
-        "& > :not([hidden]) ~ :not([hidden])": {
-          borderStyle: value
-        }
-      };
-    }
-  }
-};
-
-// src/utilities/effects.ts
-var effects = {
-  boxShadow: {
-    shorthand: "shadow",
-    className: "shadow",
-    values: "shadows"
-  },
-  boxShadowColor: {
-    shorthand: "shadowColor",
-    className: "shadow",
-    values: "colors",
-    transform(value) {
-      return {
-        "--shadow-color": value
-      };
-    }
-  },
-  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": `constrast(${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(" ")
-    }
-  },
-  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": `constrast(${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",
-    transform(value) {
-      return {
-        "--backdrop-invert": `invert(${value})`
-      };
-    }
-  },
-  backdropOpacity: {
-    className: "backdrop-opacity",
-    transform(value) {
-      return {
-        "--backdrop-opacity": value
-      };
-    }
-  },
-  backdropSaturate: {
-    className: "backdrop-saturate",
-    transform(value) {
-      return {
-        "--backdrop-saturate": `saturate(${value})`
-      };
-    }
-  },
-  backdropSepia: {
-    className: "backdrop-sepia",
-    transform(value) {
-      return {
-        "--backdrop-sepia": `sepia(${value})`
-      };
-    }
-  }
-};
-
-// src/utilities/flex-and-grid.ts
-var flexGrid = {
-  flexBasis: {
-    className: "basis",
-    values(theme) {
-      return {
-        ...theme("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-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))"
-    }
-  },
-  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"
-  },
-  gridColumnEnd: {
-    className: "col-end"
-  },
-  gridAutoFlow: {
-    className: "grid-flow"
-  },
-  gridAutoColumns: {
-    className: "auto-cols",
-    values: {
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
-    }
-  },
-  gridAutoRows: {
-    className: "auto-rows",
-    values: {
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
-    }
-  },
-  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"
-  }
-};
-
-// src/utilities/helpers.ts
-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" },
-    transform(value) {
-      return srMapping[value] || {};
-    }
-  },
-  debug: {
-    className: "debug",
-    values: { type: "boolean" },
-    transform(value) {
-      if (!value)
-        return {};
-      return {
-        outline: "1px solid blue !important",
-        "&>*": {
-          outline: "1px solid red !important"
-        }
-      };
-    }
-  }
-};
-
-// src/utilities/interactivity.ts
-var interactivity = {
-  accentColor: {
-    className: "accent",
-    values: "colors"
-  },
-  caretColor: {
-    className: "caret",
-    values: "colors"
-  },
-  scrollBehavior: {
-    className: "scroll"
-  },
-  scrollbar: {
-    className: "scrollbar",
-    values: ["visible", "hidden"],
-    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"
-          }
-        };
-      }
-    }
-  },
-  scrollMargin: {
-    className: "scroll-m",
-    values: "spacing"
-  },
-  scrollMarginX: {
-    className: "scroll-mx",
-    values: "spacing",
-    property: "scrollMarginInline",
-    transform(value) {
-      return {
-        scrollMarginInline: value
-      };
-    }
-  },
-  scrollMarginY: {
-    className: "scroll-my",
-    values: "spacing",
-    property: "scrollMarginBlock",
-    transform(value) {
-      return {
-        scrollMarginBlock: 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"
-  },
-  scrollMarginBlockStart: {
-    className: "scroll-mt",
-    values: "spacing"
-  },
-  scrollMarginInline: {
-    className: "scroll-mx",
-    values: "spacing"
-  },
-  scrollMarginInlineEnd: {
-    className: "scroll-me",
-    values: "spacing"
-  },
-  scrollMarginInlineStart: {
-    className: "scroll-ms",
-    values: "spacing"
-  },
-  scrollPadding: {
-    className: "scroll-p",
-    values: "spacing"
-  },
-  scrollPaddingBlock: {
-    className: "scroll-pb",
-    values: "spacing"
-  },
-  scrollPaddingBlockStart: {
-    className: "scroll-pt",
-    values: "spacing"
-  },
-  scrollPaddingBlockEnd: {
-    className: "scroll-pb",
-    values: "spacing"
-  },
-  scrollPaddingInline: {
-    className: "scroll-px",
-    values: "spacing"
-  },
-  scrollPaddingInlineEnd: {
-    className: "scroll-pe",
-    values: "spacing"
-  },
-  scrollPaddingInlineStart: {
-    className: "scroll-ps",
-    values: "spacing"
-  },
-  scrollPaddingX: {
-    className: "scroll-px",
-    values: "spacing",
-    property: "scrollPaddingInline",
-    transform(value) {
-      return {
-        scrollPaddingInline: value
-      };
-    }
-  },
-  scrollPaddingY: {
-    className: "scroll-py",
-    values: "spacing",
-    property: "scrollPaddingBlock",
-    transform(value) {
-      return {
-        scrollPaddingBlock: value
-      };
-    }
-  },
-  scrollPaddingLeft: {
-    className: "scroll-pl",
-    values: "spacing"
-  },
-  scrollPaddingRight: {
-    className: "scroll-pr",
-    values: "spacing"
-  },
-  scrollPaddingTop: {
-    className: "scroll-pt",
-    values: "spacing"
-  },
-  scrollPaddingBottom: {
-    className: "scroll-pb",
-    values: "spacing"
-  },
-  scrollSnapAlign: {
-    className: "snap"
-  },
-  scrollSnapStop: {
-    className: "snap"
-  },
-  scrollSnapType: {
-    className: "snap",
-    values: {
-      none: "none",
-      x: "x var(--scroll-snap-strictness)",
-      y: "y var(--scroll-snap-strictness)",
-      both: "both var(--scroll-snap-strictness)"
-    }
-  },
-  scrollSnapStrictness: {
-    className: "strictness",
-    values: ["mandatory", "proximity"],
-    transform(value) {
-      return {
-        "--scroll-snap-strictness": value
-      };
-    }
-  },
-  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"
-  }
-};
-
-// src/utilities/layout.ts
-var layout = {
-  aspectRatio: {
-    className: "aspect",
-    values: {
-      square: "1 / 1",
-      landscape: "4 / 3",
-      portrait: "3 / 4",
-      wide: "16 / 9",
-      ultrawide: "18 / 5",
-      golden: "1.618 / 1"
-    }
-  },
-  boxDecorationBreak: {
-    className: "decoration"
-  },
-  zIndex: {
-    className: "z"
-  },
-  boxSizing: {
-    className: "box"
-  },
-  objectPosition: {
-    className: "object"
-  },
-  objectFit: {
-    className: "object"
-  },
-  overscrollBehavior: {
-    className: "overscroll"
-  },
-  overscrollBehaviorX: {
-    className: "overscroll-x"
-  },
-  overscrollBehaviorY: {
-    className: "overscroll-y"
-  },
-  position: {
-    className: "pos",
-    shorthand: "pos"
-  },
-  top: {
-    className: "top",
-    values: "spacing"
-  },
-  left: {
-    className: "left",
-    values: "spacing"
-  },
-  insetInline: {
-    className: "inset-x",
-    values: "spacing"
-  },
-  insetBlock: {
-    className: "inset-y",
-    values: "spacing"
-  },
-  inset: {
-    className: "inset",
-    values: "spacing"
-  },
-  insetBlockEnd: {
-    className: "inset-b",
-    values: "spacing"
-  },
-  insetBlockStart: {
-    className: "inset-t",
-    values: "spacing"
-  },
-  insetInlineEnd: {
-    className: "end",
-    values: "spacing",
-    shorthand: ["insetEnd", "end"]
-  },
-  insetInlineStart: {
-    className: "start",
-    values: "spacing",
-    shorthand: ["insetStart", "start"]
-  },
-  right: {
-    className: "right",
-    values: "spacing"
-  },
-  bottom: {
-    className: "bottom",
-    values: "spacing"
-  },
-  insetX: {
-    className: "inset-x",
-    values: "spacing",
-    property: "insetInline",
-    transform(value) {
-      return {
-        insetInline: value
-      };
-    }
-  },
-  insetY: {
-    className: "inset-y",
-    values: "spacing",
-    property: "insetBlock",
-    transform(value) {
-      return {
-        insetBlock: value
-      };
-    }
-  },
-  float: {
-    className: "float",
-    values: ["left", "right", "start", "end"],
-    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"
-  }
-};
-
-// src/utilities/list.ts
-var list = {
-  listStyleType: {
-    className: "list"
-  },
-  listStylePosition: {
-    className: "list"
-  },
-  listStyleImage: {
-    className: "list-img",
-    values: "assets"
-  }
-};
-
-// src/utilities/outline.ts
-var outline = {
-  outlineWidth: {
-    className: "ring",
-    shorthand: "ringWidth"
-  },
-  outlineColor: {
-    className: "ring",
-    values: "colors",
-    shorthand: "ringColor"
-  },
-  outline: {
-    className: "ring",
-    shorthand: "ring",
-    values: "borders",
-    transform(value) {
-      if (value === "none") {
-        return { outline: "2px solid transparent", outlineOffset: "2px" };
-      }
-      return { outline: value };
-    }
-  },
-  outlineOffset: {
-    className: "ring",
-    shorthand: "ringOffset",
-    values: "spacing"
-  }
-};
-
-// src/utilities/sizing.ts
-var widthValues = (theme) => ({
-  ...theme("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 = (theme) => ({
-  ...theme("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
-  },
-  inlineSize: {
-    className: "w",
-    values: widthValues
-  },
-  minWidth: {
-    shorthand: "minW",
-    className: "min-w",
-    values: widthValues
-  },
-  minInlineSize: {
-    className: "min-w",
-    values: widthValues
-  },
-  maxWidth: {
-    shorthand: "maxW",
-    className: "max-w",
-    values: widthValues
-  },
-  maxInlineSize: {
-    className: "max-w",
-    values: widthValues
-  },
-  height: {
-    shorthand: "h",
-    className: "h",
-    values: heightValues
-  },
-  blockSize: {
-    className: "h",
-    values: heightValues
-  },
-  minHeight: {
-    shorthand: "minH",
-    className: "min-h",
-    values: heightValues
-  },
-  minBlockSize: {
-    className: "min-h",
-    values: heightValues
-  },
-  maxHeight: {
-    shorthand: "maxH",
-    className: "max-h",
-    values: heightValues
-  },
-  maxBlockSize: {
-    className: "max-b",
-    values: heightValues
-  }
-};
-
-// src/utilities/spacing.ts
-var spacing = {
-  padding: {
-    className: "p",
-    shorthand: "p",
-    values: "spacing"
-  },
-  paddingLeft: {
-    className: "pl",
-    shorthand: "pl",
-    values: "spacing"
-  },
-  paddingRight: {
-    className: "pr",
-    shorthand: "pr",
-    values: "spacing"
-  },
-  paddingTop: {
-    className: "pt",
-    shorthand: "pt",
-    values: "spacing"
-  },
-  paddingBottom: {
-    className: "pb",
-    shorthand: "pb",
-    values: "spacing"
-  },
-  paddingBlock: {
-    className: "py",
-    values: "spacing",
-    shorthand: ["py", "paddingY"]
-  },
-  paddingBlockEnd: {
-    className: "pb",
-    values: "spacing"
-  },
-  paddingBlockStart: {
-    className: "pt",
-    values: "spacing"
-  },
-  paddingInline: {
-    className: "px",
-    values: "spacing",
-    shorthand: ["paddingX", "px"]
-  },
-  paddingInlineEnd: {
-    className: "pe",
-    shorthand: ["pe", "paddingEnd"],
-    values: "spacing"
-  },
-  paddingInlineStart: {
-    className: "ps",
-    shorthand: ["ps", "paddingStart"],
-    values: "spacing"
-  },
-  marginLeft: {
-    className: "ml",
-    shorthand: "ml",
-    values: "spacing"
-  },
-  marginRight: {
-    className: "mr",
-    shorthand: "mr",
-    values: "spacing"
-  },
-  marginTop: {
-    className: "mt",
-    shorthand: "mt",
-    values: "spacing"
-  },
-  marginBottom: {
-    className: "mb",
-    shorthand: "mb",
-    values: "spacing"
-  },
-  margin: {
-    className: "m",
-    shorthand: "m",
-    values: "spacing"
-  },
-  marginBlock: {
-    className: "my",
-    values: "spacing",
-    shorthand: ["my", "marginY"]
-  },
-  marginBlockEnd: {
-    className: "mb",
-    values: "spacing"
-  },
-  marginBlockStart: {
-    className: "mt",
-    values: "spacing"
-  },
-  marginInline: {
-    className: "mx",
-    values: "spacing",
-    shorthand: ["mx", "marginX"]
-  },
-  marginInlineEnd: {
-    className: "me",
-    shorthand: ["me", "marginEnd"],
-    values: "spacing"
-  },
-  marginInlineStart: {
-    className: "ms",
-    shorthand: ["ms", "marginStart"],
-    values: "spacing"
-  }
-};
-
-// src/utilities/svg.ts
-var svg = {
-  fill: {
-    className: "fill",
-    values: "colors"
-  },
-  stroke: {
-    className: "stroke",
-    values: "colors"
-  }
-};
-
-// src/utilities/tables.ts
-var tables = {
-  borderCollapse: {
-    className: "border"
-  },
-  borderSpacing: {
-    className: "border-spacing",
-    values: "spacing"
-  },
-  borderSpacingX: {
-    className: "border-spacing-x",
-    values: "spacing",
-    transform(value) {
-      return {
-        borderSpacing: `${value} var(--border-spacing-y)`
-      };
-    }
-  },
-  borderSpacingY: {
-    className: "border-spacing-y",
-    values: "spacing",
-    transform(value) {
-      return {
-        borderSpacing: `var(--border-spacing-x) ${value}`
-      };
-    }
-  },
-  tableLayout: {
-    className: "table"
-  }
-};
-
-// src/utilities/transforms.ts
-var transforms = {
-  transformOrigin: {
-    className: "origin"
-  },
-  scale: {
-    className: "scale",
-    property: "scale",
-    values: {
-      auto: "var(--scale-x) var(--scale-y)"
-    }
-  },
-  scaleX: {
-    className: "scale-x",
-    transform(value) {
-      return {
-        "--scale-x": value
-      };
-    }
-  },
-  scaleY: {
-    className: "scale-y",
-    transform(value) {
-      return {
-        "--scale-y": value
-      };
-    }
-  },
-  translate: {
-    className: "translate",
-    property: "translate",
-    values: {
-      auto: "var(--translate-x) var(--translate-y)"
-    }
-  },
-  translateX: {
-    shorthand: "x",
-    className: "translate-x",
-    values(theme) {
-      return {
-        ...theme("spacing"),
-        "1/2": "50%",
-        "1/3": "33.333333%",
-        "2/3": "66.666667%",
-        "1/4": "25%",
-        "2/4": "50%",
-        "3/4": "75%",
-        full: "100%"
-      };
-    },
-    transform(value) {
-      return {
-        "--translate-x": value
-      };
-    }
-  },
-  translateY: {
-    shorthand: "y",
-    className: "translate-y",
-    values(theme) {
-      return {
-        ...theme("spacing"),
-        "1/2": "50%",
-        "1/3": "33.333333%",
-        "2/3": "66.666667%",
-        "1/4": "25%",
-        "2/4": "50%",
-        "3/4": "75%",
-        full: "100%"
-      };
-    },
-    transform(value) {
-      return {
-        "--translate-y": value
-      };
-    }
-  }
-};
-
-// src/utilities/transitions.ts
-var transitions = {
-  transitionTimingFunction: {
-    className: "ease",
-    values: "easings"
-  },
-  transitionDelay: {
-    className: "delay",
-    values: "durations"
-  },
-  transitionDuration: {
-    className: "duration",
-    values: "durations"
-  },
-  transitionProperty: {
-    className: "transition",
-    values: {
-      all: "all",
-      none: "none",
-      opacity: "opacity",
-      shadow: "box-shadow",
-      transform: "transform",
-      base: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-      background: "background, background-color",
-      colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"
-    }
-  },
-  animation: {
-    className: "animation",
-    values: "animations"
-  },
-  animationDelay: {
-    className: "animation-delay",
-    values: "durations"
-  }
-};
-
-// src/utilities/typography.ts
-var typography = {
-  color: {
-    className: "text",
-    values: "colors"
-  },
-  fontFamily: {
-    className: "font",
-    values: "fonts"
-  },
-  fontSize: {
-    className: "fs",
-    values: "fontSizes"
-  },
-  fontWeight: {
-    className: "font",
-    values: "fontWeights"
-  },
-  fontSmoothing: {
-    className: "smoothing",
-    values: {
-      antialiased: "antialiased",
-      "subpixel-antialiased": "auto"
-    },
-    transform(value) {
-      return {
-        WebkitFontSmoothing: value
-      };
-    }
-  },
-  fontVariantNumeric: {
-    className: "numeric"
-  },
-  letterSpacing: {
-    className: "tracking",
-    values: "letterSpacings"
-  },
-  lineHeight: {
-    className: "leading",
-    values: "lineHeights"
-  },
-  textAlign: {
-    className: "text"
-  },
-  textDecoration: {
-    className: "text-decor"
-  },
-  textDecorationColor: {
-    className: "text-decor",
-    values: "colors"
-  },
-  textEmphasisColor: {
-    className: "text-emphasis",
-    values: "colors"
-  },
-  textDecorationStyle: {
-    className: "decoration"
-  },
-  textDecorationThickness: {
-    className: "decoration"
-  },
-  textUnderlineOffset: {
-    className: "underline-offset"
-  },
-  textTransform: {
-    className: "text"
-  },
-  textIndent: {
-    className: "indent",
-    values: "spacing"
-  },
-  textShadow: {
-    className: "text-shadow",
-    values: "shadows"
-  },
-  textOverflow: {
-    className: "text"
-  },
-  verticalAlign: {
-    className: "align"
-  },
-  wordBreak: {
-    className: "break"
-  },
-  textWrap: {
-    className: "text",
-    values: ["wrap", "balance", "nowrap"],
-    transform(value) {
-      return { textWrap: value };
-    }
-  },
-  truncate: {
-    className: "truncate",
-    values: { type: "boolean" },
-    transform(value) {
-      if (!value)
-        return {};
-      return {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
-      };
-    }
-  },
-  lineClamp: {
-    className: "clamp",
-    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
-);
-
-// src/patterns.ts
-function definePattern(config) {
-  return config;
-}
-var box = definePattern({
-  properties: {},
-  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" }
-  },
-  transform(props) {
-    const { align, justify, direction = "column", gap = "10px", ...rest } = props;
-    return {
-      display: "flex",
-      flexDirection: direction,
-      alignItems: align,
-      justifyContent: justify,
-      gap,
-      ...rest
-    };
-  }
-});
-var vstack = definePattern({
-  jsx: "VStack",
-  properties: {
-    justify: { type: "property", value: "justifyContent" },
-    gap: { type: "property", value: "gap" }
-  },
-  transform(props) {
-    const { justify, gap = "10px", ...rest } = props;
-    return {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: justify,
-      gap,
-      flexDirection: "column",
-      ...rest
-    };
-  }
-});
-var hstack = definePattern({
-  jsx: "HStack",
-  properties: {
-    justify: { type: "property", value: "justifyContent" },
-    gap: { type: "property", value: "gap" }
-  },
-  transform(props) {
-    const { justify, gap = "10px", ...rest } = props;
-    return {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: justify,
-      gap,
-      flexDirection: "row",
-      ...rest
-    };
-  }
-});
-var spacer = definePattern({
-  properties: {
-    size: { type: "token", value: "spacing" }
-  },
-  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" }
-  },
-  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" }
-  },
-  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" }
-  },
-  transform(props, { map }) {
-    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
-    return {
-      display: "grid",
-      gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${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,
-      gridColumnEnd: colEnd,
-      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({
-  properties: {},
-  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) {
-    const { ratio, ...rest } = props;
-    return {
-      aspectRatio: ratio,
-      overflow: "hidden",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      "&>img, &>video": {
-        width: "100%",
-        height: "100%",
-        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" }
-  },
-  transform(props, { map }) {
-    const { orientation = "horizontal", thickness = "1px", color, ...rest } = props;
-    return {
-      "--thickness": thickness,
-      width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
-      height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
-      borderInlineStartWidth: 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({
-  properties: {},
-  transform(props) {
-    return {
-      position: "relative",
-      "& :where(a, abbr)": {
-        position: "relative",
-        zIndex: "1"
-      },
-      ...props
-    };
-  }
-});
-var linkOverlay = definePattern({
-  jsxElement: "a",
-  properties: {},
-  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"
-      ]
-    }
-  },
-  transform(props, { map }) {
-    const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...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 patterns = {
-  box,
-  flex,
-  stack,
-  vstack,
-  hstack,
-  spacer,
-  square,
-  circle,
-  center,
-  linkBox,
-  linkOverlay,
-  aspectRatio,
-  grid,
-  gridItem,
-  wrap,
-  container,
-  divider,
-  float
-};
-
-// src/index.ts
-var definePreset = (preset2) => preset2;
-var preset = definePreset({
-  conditions,
-  utilities,
-  patterns
-});
-var src_default = preset;
-export {
-  src_default as default,
-  preset
-};