@pandacss/preset-base 0.0.0-dev-20230608163155

package/dist/index.mjs

@@ -0,0 +1,2292 @@
+// 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"
+  },
+  borderInlineColor: {
+    className: "border-x",
+    values: "colors",
+    shorthand: "borderXColor"
+  },
+  borderBlock: {
+    className: "border-y",
+    values: "borders"
+  },
+  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"
+  },
+  borderInlineStartColor: {
+    className: "border-s"
+  },
+  borderRight: {
+    className: "border-r",
+    values: "borders"
+  },
+  borderRightColor: {
+    className: "border-r",
+    values: "colors"
+  },
+  borderInlineEnd: {
+    className: "border-e",
+    values: "borders"
+  },
+  borderInlineEndColor: {
+    className: "border-e",
+    values: "colors"
+  },
+  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])": {
+          borderLeftWidth: value,
+          borderRightWidth: "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 transformTemplate = [
+  "rotate(var(--rotate))",
+  "scaleX(var(--scale-x))",
+  "scaleY(var(--scale-y))",
+  "skewX(var(--skew-x))",
+  "skewY(var(--skew-y))"
+];
+var baseTransformTemplate = [
+  "translateX(var(--translate-x))",
+  "translateY(var(--translate-y))",
+  ...transformTemplate
+].join(" ");
+var gpuTransformTemplate = [
+  "translate3d(var(--translate-x), var(--translate-y), 0)",
+  ...transformTemplate
+].join(" ");
+var transforms = {
+  transform: {
+    className: "transform",
+    values: {
+      auto: baseTransformTemplate,
+      "auto-gpu": gpuTransformTemplate
+    }
+  },
+  transformOrigin: {
+    className: "origin"
+  },
+  scale: {
+    className: "scale",
+    transform(value) {
+      return {
+        "--scale-x": value,
+        "--scale-y": value
+      };
+    }
+  },
+  scaleX: {
+    className: "scale-x",
+    transform(value) {
+      return {
+        "--scale-x": value
+      };
+    }
+  },
+  scaleY: {
+    className: "scale-y",
+    transform(value) {
+      return {
+        "--scale-y": value
+      };
+    }
+  },
+  rotate: {
+    className: "rotate",
+    transform(value) {
+      return {
+        "--rotate": value
+      };
+    }
+  },
+  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
+      };
+    }
+  },
+  skewX: {
+    className: "skew-x",
+    transform(value) {
+      return {
+        "--skew-x": value
+      };
+    }
+  },
+  skewY: {
+    className: "skew-y",
+    transform(value) {
+      return {
+        "--skew-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 absoluteCenter = definePattern({
+  properties: {
+    axis: { type: "enum", value: ["x", "y", "both"] }
+  },
+  transform(props, { map }) {
+    const { axis = "both", ...rest } = props;
+    return {
+      position: "absolute",
+      insetBlockStart: map(axis, (v) => v === "x" ? "auto" : "50%"),
+      insetInlineStart: map(axis, (v) => v === "y" ? "auto" : "50%"),
+      transform: map(
+        axis,
+        (v) => v === "both" ? "translate(-50%, -50%)" : v === "x" ? "translateX(-50%)" : "translateY(-50%)"
+      ),
+      maxWidth: "100%",
+      maxHeight: "100%",
+      ...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 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,
+  absoluteCenter,
+  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
+};