@webflare/ui 0.0.0-stage → 0.1.0

package/dist/panda/preset.mjs

@@ -0,0 +1,4092 @@
+//#region node_modules/.bun/@pandacss+dev@2.4.0+e4317cfdafc19053/node_modules/@pandacss/dev/dist/chunk-5IG6UNUZ.js
+function defineConfig(config) {
+	return Object.assign(config, { name: "__panda.config__" });
+}
+function definePreset$1(preset) {
+	return preset;
+}
+function defineKeyframes(keyframes) {
+	return keyframes;
+}
+function createProxy() {
+	const identity = (value) => value;
+	return new Proxy(identity, { get() {
+		return identity;
+	} });
+}
+var defineTokens = /* @__PURE__ */ createProxy();
+var defineSemanticTokens = /* @__PURE__ */ createProxy();
+function defineAnimationStyles(definition) {
+	return definition;
+}
+//#endregion
+//#region node_modules/.bun/@pandacss+preset-base@2.4.0/node_modules/@pandacss/preset-base/dist/index.js
+var conditions = {
+	hover: "&:is(:hover, [data-hover])",
+	focus: "&:is(:focus, [data-focus])",
+	focusWithin: "&:focus-within",
+	focusVisible: "&:is(:focus-visible, [data-focus-visible])",
+	disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
+	active: "&:is(:active, [data-active])",
+	visited: "&:visited",
+	target: "&:target",
+	readOnly: "&:is(:read-only, [data-read-only], [aria-readonly=true])",
+	readWrite: "&:read-write",
+	empty: "&:is(:empty, [data-empty])",
+	checked: "&:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"])",
+	enabled: "&:enabled",
+	expanded: "&:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"])",
+	highlighted: "&[data-highlighted]",
+	complete: "&[data-complete]",
+	incomplete: "&[data-incomplete]",
+	dragging: "&[data-dragging]",
+	before: "&::before",
+	after: "&::after",
+	firstLetter: "&::first-letter",
+	firstLine: "&::first-line",
+	marker: "&::marker, &::-webkit-details-marker",
+	selection: "&::selection",
+	file: "&::file-selector-button",
+	backdrop: "&::backdrop",
+	first: "&:first-child",
+	last: "&:last-child",
+	only: "&:only-child",
+	even: "&:nth-child(even)",
+	odd: "&:nth-child(odd)",
+	firstOfType: "&:first-of-type",
+	lastOfType: "&:last-of-type",
+	onlyOfType: "&:only-of-type",
+	peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
+	peerHover: ".peer:is(:hover, [data-hover]) ~ &",
+	peerActive: ".peer:is(:active, [data-active]) ~ &",
+	peerFocusWithin: ".peer:focus-within ~ &",
+	peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
+	peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
+	peerChecked: ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) ~ &",
+	peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
+	peerExpanded: ".peer:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) ~ &",
+	peerPlaceholderShown: ".peer:placeholder-shown ~ &",
+	groupFocus: ".group:is(:focus, [data-focus]) &",
+	groupHover: ".group:is(:hover, [data-hover]) &",
+	groupActive: ".group:is(:active, [data-active]) &",
+	groupFocusWithin: ".group:focus-within &",
+	groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
+	groupDisabled: ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
+	groupChecked: ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) &",
+	groupExpanded: ".group:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) &",
+	groupInvalid: ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
+	indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=\"indeterminate\"])",
+	required: "&:is(:required, [data-required], [aria-required=true])",
+	valid: "&:is(:valid, [data-valid])",
+	invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
+	userValid: "&:is(:user-valid, [data-user-valid])",
+	userInvalid: "&:is(:user-invalid, [data-user-invalid])",
+	autofill: "&:autofill",
+	inRange: "&:is(:in-range, [data-in-range])",
+	outOfRange: "&:is(:out-of-range, [data-outside-range])",
+	placeholder: "&::placeholder, &[data-placeholder]",
+	placeholderShown: "&:is(:placeholder-shown, [data-placeholder-shown])",
+	pressed: "&:is([aria-pressed=true], [data-pressed])",
+	selected: "&:is([aria-selected=true], [data-selected])",
+	grabbed: "&:is([aria-grabbed=true], [data-grabbed])",
+	underValue: "&[data-state=under-value]",
+	overValue: "&[data-state=over-value]",
+	atValue: "&[data-state=at-value]",
+	default: "&:default",
+	optional: "&:optional",
+	open: "&:is([open], [data-open], [data-state=\"open\"], :popover-open)",
+	closed: "&:is([closed], [data-closed], [data-state=\"closed\"])",
+	fullscreen: "&:is(:fullscreen, [data-fullscreen])",
+	loading: "&:is([data-loading], [aria-busy=true])",
+	hidden: "&:is([hidden], [data-hidden])",
+	inert: "&:is([inert], [data-inert])",
+	current: "&:is([aria-current=true], [data-current])",
+	currentPage: "&[aria-current=page]",
+	currentStep: "&[aria-current=step]",
+	today: "&[data-today]",
+	unavailable: "&[data-unavailable]",
+	rangeStart: "&[data-range-start]",
+	rangeEnd: "&[data-range-end]",
+	now: "&[data-now]",
+	topmost: "&[data-topmost]",
+	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 &",
+	light: ".light &",
+	osDark: "@media (prefers-color-scheme: dark)",
+	osLight: "@media (prefers-color-scheme: light)",
+	highContrast: "@media (forced-colors: active)",
+	lessContrast: "@media (prefers-contrast: less)",
+	moreContrast: "@media (prefers-contrast: more)",
+	ltr: ":where([dir=ltr], :dir(ltr)) &",
+	rtl: ":where([dir=rtl], :dir(rtl)) &",
+	scrollbar: "&::-webkit-scrollbar",
+	scrollbarThumb: "&::-webkit-scrollbar-thumb",
+	scrollbarTrack: "&::-webkit-scrollbar-track",
+	horizontal: "&[data-orientation=horizontal]",
+	vertical: "&[data-orientation=vertical]",
+	icon: "& :where(svg)",
+	starting: "@starting-style",
+	noscript: "@media (scripting: none)",
+	invertedColors: "@media (inverted-colors: inverted)",
+	pointerFine: "@media (pointer: fine)",
+	pointerCoarse: "@media (pointer: coarse)",
+	pointerNone: "@media (pointer: none)",
+	anyPointerFine: "@media (any-pointer: fine)",
+	anyPointerCoarse: "@media (any-pointer: coarse)",
+	anyPointerNone: "@media (any-pointer: none)"
+};
+function definePattern(config) {
+	return config;
+}
+var box = definePattern({ transform(props) {
+	return props;
+} });
+var flex = definePattern({
+	properties: {
+		align: {
+			type: "property",
+			value: "alignItems"
+		},
+		justify: {
+			type: "property",
+			value: "justifyContent"
+		},
+		direction: {
+			type: "property",
+			value: "flexDirection"
+		},
+		wrap: {
+			type: "property",
+			value: "flexWrap"
+		},
+		basis: {
+			type: "property",
+			value: "flexBasis"
+		},
+		grow: {
+			type: "property",
+			value: "flexGrow"
+		},
+		shrink: {
+			type: "property",
+			value: "flexShrink"
+		}
+	},
+	transform(props) {
+		const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
+		return {
+			display: "flex",
+			flexDirection: direction,
+			alignItems: align,
+			justifyContent: justify,
+			flexWrap: wrap2,
+			flexBasis: basis,
+			flexGrow: grow,
+			flexShrink: shrink,
+			...rest
+		};
+	}
+});
+var stack = definePattern({
+	properties: {
+		align: {
+			type: "property",
+			value: "alignItems"
+		},
+		justify: {
+			type: "property",
+			value: "justifyContent"
+		},
+		direction: {
+			type: "property",
+			value: "flexDirection"
+		},
+		gap: {
+			type: "property",
+			value: "gap"
+		}
+	},
+	defaultValues: {
+		direction: "column",
+		gap: "8px"
+	},
+	transform(props) {
+		const { align, justify, direction, gap, ...rest } = props;
+		return {
+			display: "flex",
+			flexDirection: direction,
+			alignItems: align,
+			justifyContent: justify,
+			gap,
+			...rest
+		};
+	}
+});
+var vstack = definePattern({
+	jsxName: "VStack",
+	properties: {
+		justify: {
+			type: "property",
+			value: "justifyContent"
+		},
+		gap: {
+			type: "property",
+			value: "gap"
+		}
+	},
+	defaultValues: { gap: "8px" },
+	transform(props) {
+		const { justify, gap, ...rest } = props;
+		return {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: justify,
+			gap,
+			flexDirection: "column",
+			...rest
+		};
+	}
+});
+var hstack = definePattern({
+	jsxName: "HStack",
+	properties: {
+		justify: {
+			type: "property",
+			value: "justifyContent"
+		},
+		gap: {
+			type: "property",
+			value: "gap"
+		}
+	},
+	defaultValues: { gap: "8px" },
+	transform(props) {
+		const { justify, gap, ...rest } = props;
+		return {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: justify,
+			gap,
+			flexDirection: "row",
+			...rest
+		};
+	}
+});
+var spacer = definePattern({
+	properties: { size: {
+		type: "token",
+		value: "spacing"
+	} },
+	transform(props, { map, isCssUnit, isCssVar }) {
+		const { size, ...rest } = props;
+		return {
+			alignSelf: "stretch",
+			justifySelf: "stretch",
+			flex: map(size, (v) => {
+				if (v == null) return "1";
+				return `0 0 ${isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${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"
+		}
+	},
+	defaultValues(props) {
+		return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
+	},
+	transform(props, { map, isCssUnit }) {
+		const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+		const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+		return {
+			display: "grid",
+			gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
+			gap,
+			columnGap,
+			rowGap,
+			...rest
+		};
+	}
+});
+var gridItem = definePattern({
+	properties: {
+		colSpan: { type: "number" },
+		rowSpan: { type: "number" },
+		colStart: { type: "number" },
+		rowStart: { type: "number" },
+		colEnd: { type: "number" },
+		rowEnd: { type: "number" }
+	},
+	transform(props, { map }) {
+		const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
+		const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+		return {
+			gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+			gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+			gridColumnStart: colStart,
+			gridColumnEnd: colEnd,
+			gridRowStart: rowStart,
+			gridRowEnd: rowEnd,
+			...rest
+		};
+	}
+});
+var wrap = definePattern({
+	properties: {
+		gap: {
+			type: "property",
+			value: "gap"
+		},
+		rowGap: {
+			type: "property",
+			value: "gap"
+		},
+		columnGap: {
+			type: "property",
+			value: "gap"
+		},
+		align: {
+			type: "property",
+			value: "alignItems"
+		},
+		justify: {
+			type: "property",
+			value: "justifyContent"
+		}
+	},
+	transform(props) {
+		const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
+		return {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: align,
+			justifyContent: justify,
+			gap,
+			columnGap,
+			rowGap,
+			...rest
+		};
+	}
+});
+var container = definePattern({ transform(props) {
+	return {
+		position: "relative",
+		maxWidth: "8xl",
+		mx: "auto",
+		px: {
+			base: "4",
+			md: "6",
+			lg: "8"
+		},
+		...props
+	};
+} });
+var center = definePattern({
+	properties: { inline: { type: "boolean" } },
+	transform(props) {
+		const { inline, ...rest } = props;
+		return {
+			display: inline ? "inline-flex" : "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			...rest
+		};
+	}
+});
+var aspectRatio = definePattern({
+	properties: { ratio: { type: "number" } },
+	blocklist: ["aspectRatio"],
+	transform(props, { map }) {
+		const { ratio = 4 / 3, ...rest } = props;
+		return {
+			position: "relative",
+			_before: {
+				content: `""`,
+				display: "block",
+				height: "0",
+				paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
+			},
+			"&>*": {
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				overflow: "hidden",
+				position: "absolute",
+				inset: "0",
+				width: "100%",
+				height: "100%"
+			},
+			"&>img, &>video": { objectFit: "cover" },
+			...rest
+		};
+	}
+});
+var divider = definePattern({
+	properties: {
+		orientation: {
+			type: "enum",
+			value: ["horizontal", "vertical"]
+		},
+		thickness: {
+			type: "token",
+			value: "sizes",
+			property: "borderWidth"
+		},
+		color: {
+			type: "token",
+			value: "colors",
+			property: "borderColor"
+		}
+	},
+	defaultValues: {
+		orientation: "horizontal",
+		thickness: "1px"
+	},
+	transform(props, { map }) {
+		const { orientation, thickness, color: color2, ...rest } = props;
+		return {
+			"--thickness": thickness,
+			width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
+			height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
+			borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+			borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
+			borderColor: color2,
+			...rest
+		};
+	}
+});
+var patterns = {
+	box,
+	flex,
+	stack,
+	vstack,
+	hstack,
+	spacer,
+	square,
+	circle,
+	center,
+	linkOverlay: definePattern({
+		jsxElement: "a",
+		transform(props) {
+			return {
+				_before: {
+					content: "\"\"",
+					position: "absolute",
+					inset: "0",
+					zIndex: "0",
+					...props["_before"]
+				},
+				...props
+			};
+		}
+	}),
+	aspectRatio,
+	grid,
+	gridItem,
+	wrap,
+	container,
+	divider,
+	float: definePattern({
+		properties: {
+			offsetX: {
+				type: "token",
+				value: "spacing",
+				property: "left"
+			},
+			offsetY: {
+				type: "token",
+				value: "spacing",
+				property: "top"
+			},
+			offset: {
+				type: "token",
+				value: "spacing",
+				property: "top"
+			},
+			placement: {
+				type: "enum",
+				value: [
+					"bottom-end",
+					"bottom-start",
+					"top-end",
+					"top-start",
+					"bottom-center",
+					"top-center",
+					"middle-center",
+					"middle-end",
+					"middle-start"
+				]
+			}
+		},
+		defaultValues(props) {
+			const offset = props.offset || "0";
+			return {
+				offset,
+				offsetX: offset,
+				offsetY: offset,
+				placement: "top-end"
+			};
+		},
+		transform(props, { map }) {
+			const { offset, offsetX, offsetY, placement, ...rest } = props;
+			return {
+				display: "inline-flex",
+				justifyContent: "center",
+				alignItems: "center",
+				position: "absolute",
+				insetBlockStart: map(placement, (v) => {
+					const [side] = v.split("-");
+					return {
+						top: offsetY,
+						middle: "50%",
+						bottom: "auto"
+					}[side];
+				}),
+				insetBlockEnd: map(placement, (v) => {
+					const [side] = v.split("-");
+					return {
+						top: "auto",
+						middle: "50%",
+						bottom: offsetY
+					}[side];
+				}),
+				insetInlineStart: map(placement, (v) => {
+					const [, align] = v.split("-");
+					return {
+						start: offsetX,
+						center: "50%",
+						end: "auto"
+					}[align];
+				}),
+				insetInlineEnd: map(placement, (v) => {
+					const [, align] = v.split("-");
+					return {
+						start: "auto",
+						center: "50%",
+						end: offsetX
+					}[align];
+				}),
+				translate: map(placement, (v) => {
+					const [side, align] = v.split("-");
+					return `${{
+						start: "-50%",
+						center: "-50%",
+						end: "50%"
+					}[align]} ${{
+						top: "-50%",
+						middle: "-50%",
+						bottom: "50%"
+					}[side]}`;
+				}),
+				...rest
+			};
+		}
+	}),
+	bleed: definePattern({
+		properties: {
+			inline: {
+				type: "property",
+				value: "marginInline"
+			},
+			block: {
+				type: "property",
+				value: "marginBlock"
+			}
+		},
+		defaultValues: {
+			inline: "0",
+			block: "0"
+		},
+		transform(props, { map, isCssUnit, isCssVar }) {
+			const { inline, block, ...rest } = props;
+			const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+			return {
+				"--bleed-x": map(inline, valueFn),
+				"--bleed-y": map(block, valueFn),
+				marginInline: "calc(var(--bleed-x, 0) * -1)",
+				marginBlock: "calc(var(--bleed-y, 0) * -1)",
+				...rest
+			};
+		}
+	}),
+	visuallyHidden: definePattern({ transform(props) {
+		return {
+			srOnly: true,
+			...props
+		};
+	} }),
+	cq: definePattern({
+		properties: {
+			name: {
+				type: "token",
+				value: "containerNames",
+				property: "containerName"
+			},
+			type: {
+				type: "property",
+				value: "containerType"
+			}
+		},
+		defaultValues: { type: "inline-size" },
+		transform(props) {
+			const { name, type, ...rest } = props;
+			return {
+				containerType: type,
+				containerName: name,
+				...rest
+			};
+		}
+	})
+};
+var createColorMixTransform = (prop) => {
+	return (value, args) => {
+		const mix = args.utils.colorMix(value);
+		if (mix.invalid) return { [prop]: value };
+		return { [prop]: mix.value };
+	};
+};
+var background = {
+	backgroundPosition: {
+		shorthand: "bgPosition",
+		className: "bg-p",
+		group: "Background"
+	},
+	backgroundPositionX: {
+		shorthand: "bgPositionX",
+		className: "bg-p-x",
+		group: "Background"
+	},
+	backgroundPositionY: {
+		shorthand: "bgPositionY",
+		className: "bg-p-y",
+		group: "Background"
+	},
+	backgroundAttachment: {
+		shorthand: "bgAttachment",
+		className: "bg-a",
+		group: "Background"
+	},
+	backgroundClip: {
+		shorthand: "bgClip",
+		className: "bg-cp",
+		group: "Background",
+		transform(value) {
+			return {
+				WebkitBackgroundClip: value,
+				backgroundClip: value
+			};
+		}
+	},
+	background: {
+		shorthand: "bg",
+		className: "bg",
+		values: "colors",
+		group: "Background",
+		transform: createColorMixTransform("background")
+	},
+	backgroundColor: {
+		shorthand: "bgColor",
+		className: "bg-c",
+		values: "colors",
+		group: "Background",
+		transform: createColorMixTransform("backgroundColor")
+	},
+	backgroundOrigin: {
+		shorthand: "bgOrigin",
+		className: "bg-o",
+		group: "Background"
+	},
+	backgroundImage: {
+		shorthand: "bgImage",
+		className: "bg-i",
+		values: "assets",
+		group: "Background"
+	},
+	backgroundRepeat: {
+		shorthand: "bgRepeat",
+		className: "bg-r",
+		group: "Background"
+	},
+	backgroundBlendMode: {
+		shorthand: "bgBlendMode",
+		className: "bg-bm",
+		group: "Background"
+	},
+	backgroundSize: {
+		shorthand: "bgSize",
+		className: "bg-s",
+		group: "Background"
+	}
+};
+var border = {
+	borderRadius: {
+		className: "bdr",
+		shorthand: "rounded",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderTopLeftRadius: {
+		className: "bdr-tl",
+		shorthand: "roundedTopLeft",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderTopRightRadius: {
+		className: "bdr-tr",
+		shorthand: "roundedTopRight",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderBottomRightRadius: {
+		className: "bdr-br",
+		shorthand: "roundedBottomRight",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderBottomLeftRadius: {
+		className: "bdr-bl",
+		shorthand: "roundedBottomLeft",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderTopRadius: {
+		className: "bdr-t",
+		shorthand: "roundedTop",
+		property: "borderRadius",
+		values: "radii",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderTopLeftRadius: value,
+				borderTopRightRadius: value
+			};
+		}
+	},
+	borderRightRadius: {
+		className: "bdr-r",
+		shorthand: "roundedRight",
+		property: "borderRadius",
+		values: "radii",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderTopRightRadius: value,
+				borderBottomRightRadius: value
+			};
+		}
+	},
+	borderBottomRadius: {
+		className: "bdr-b",
+		shorthand: "roundedBottom",
+		property: "borderRadius",
+		values: "radii",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderBottomLeftRadius: value,
+				borderBottomRightRadius: value
+			};
+		}
+	},
+	borderLeftRadius: {
+		className: "bdr-l",
+		shorthand: "roundedLeft",
+		values: "radii",
+		property: "borderRadius",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderTopLeftRadius: value,
+				borderBottomLeftRadius: value
+			};
+		}
+	},
+	borderStartStartRadius: {
+		className: "bdr-ss",
+		shorthand: "roundedStartStart",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderStartEndRadius: {
+		className: "bdr-se",
+		shorthand: "roundedStartEnd",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderStartRadius: {
+		className: "bdr-s",
+		values: "radii",
+		property: "borderRadius",
+		shorthand: "roundedStart",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderStartStartRadius: value,
+				borderEndStartRadius: value
+			};
+		}
+	},
+	borderEndStartRadius: {
+		className: "bdr-es",
+		shorthand: "roundedEndStart",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderEndEndRadius: {
+		className: "bdr-ee",
+		shorthand: "roundedEndEnd",
+		values: "radii",
+		group: "Border Radius"
+	},
+	borderEndRadius: {
+		className: "bdr-e",
+		shorthand: "roundedEnd",
+		property: "borderRadius",
+		values: "radii",
+		group: "Border Radius",
+		transform(value) {
+			return {
+				borderStartEndRadius: value,
+				borderEndEndRadius: value
+			};
+		}
+	},
+	border: {
+		className: "bd",
+		values: "borders",
+		group: "Border"
+	},
+	borderWidth: {
+		className: "bd-w",
+		values: "borderWidths",
+		group: "Border Radius"
+	},
+	borderTopWidth: {
+		className: "bd-t-w",
+		values: "borderWidths",
+		group: "Border"
+	},
+	borderLeftWidth: {
+		className: "bd-l-w",
+		values: "borderWidths",
+		group: "Border"
+	},
+	borderRightWidth: {
+		className: "bd-r-w",
+		values: "borderWidths",
+		group: "Border"
+	},
+	borderBottomWidth: {
+		className: "bd-b-w",
+		values: "borderWidths",
+		group: "Border"
+	},
+	borderBlockStartWidth: {
+		className: "bd-bs-w",
+		values: "borderWidths",
+		group: "Border Radius"
+	},
+	borderBlockEndWidth: {
+		className: "bd-be-w",
+		values: "borderWidths",
+		group: "Border Radius"
+	},
+	borderColor: {
+		className: "bd-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderColor")
+	},
+	borderInline: {
+		className: "bd-x",
+		values: "borders",
+		group: "Border",
+		shorthand: "borderX"
+	},
+	borderInlineWidth: {
+		className: "bd-x-w",
+		values: "borderWidths",
+		group: "Border",
+		shorthand: "borderXWidth"
+	},
+	borderInlineColor: {
+		className: "bd-x-c",
+		values: "colors",
+		group: "Border",
+		shorthand: "borderXColor",
+		transform: createColorMixTransform("borderInlineColor")
+	},
+	borderBlock: {
+		className: "bd-y",
+		values: "borders",
+		group: "Border",
+		shorthand: "borderY"
+	},
+	borderBlockWidth: {
+		className: "bd-y-w",
+		values: "borderWidths",
+		group: "Border",
+		shorthand: "borderYWidth"
+	},
+	borderBlockColor: {
+		className: "bd-y-c",
+		values: "colors",
+		group: "Border",
+		shorthand: "borderYColor",
+		transform: createColorMixTransform("borderBlockColor")
+	},
+	borderLeft: {
+		className: "bd-l",
+		values: "borders",
+		group: "Border"
+	},
+	borderLeftColor: {
+		className: "bd-l-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderLeftColor")
+	},
+	borderInlineStart: {
+		className: "bd-s",
+		values: "borders",
+		group: "Border",
+		shorthand: "borderStart"
+	},
+	borderInlineStartWidth: {
+		className: "bd-s-w",
+		values: "borderWidths",
+		group: "Border",
+		shorthand: "borderStartWidth"
+	},
+	borderInlineStartColor: {
+		className: "bd-s-c",
+		values: "colors",
+		group: "Border",
+		shorthand: "borderStartColor",
+		transform: createColorMixTransform("borderInlineStartColor")
+	},
+	borderRight: {
+		className: "bd-r",
+		values: "borders",
+		group: "Border"
+	},
+	borderRightColor: {
+		className: "bd-r-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderRightColor")
+	},
+	borderInlineEnd: {
+		className: "bd-e",
+		values: "borders",
+		group: "Border",
+		shorthand: "borderEnd"
+	},
+	borderInlineEndWidth: {
+		className: "bd-e-w",
+		values: "borderWidths",
+		group: "Border",
+		shorthand: "borderEndWidth"
+	},
+	borderInlineEndColor: {
+		className: "bd-e-c",
+		values: "colors",
+		group: "Border",
+		shorthand: "borderEndColor",
+		transform: createColorMixTransform("borderInlineEndColor")
+	},
+	borderTop: {
+		className: "bd-t",
+		values: "borders",
+		group: "Border"
+	},
+	borderTopColor: {
+		className: "bd-t-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderTopColor")
+	},
+	borderBottom: {
+		className: "bd-b",
+		values: "borders",
+		group: "Border"
+	},
+	borderBottomColor: {
+		className: "bd-b-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderBottomColor")
+	},
+	borderBlockEnd: {
+		className: "bd-be",
+		values: "borders",
+		group: "Border"
+	},
+	borderBlockEndColor: {
+		className: "bd-be-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderBlockEndColor")
+	},
+	borderBlockStart: {
+		className: "bd-bs",
+		values: "borders",
+		group: "Border"
+	},
+	borderBlockStartColor: {
+		className: "bd-bs-c",
+		values: "colors",
+		group: "Border",
+		transform: createColorMixTransform("borderBlockStartColor")
+	}
+};
+var container2 = {
+	container: {
+		className: "cq",
+		group: "Container"
+	},
+	containerName: {
+		className: "cq-n",
+		property: "containerName",
+		values: "containerNames",
+		group: "Container"
+	},
+	containerType: {
+		className: "cq-t",
+		group: "Container"
+	}
+};
+var cursor = { cursor: {
+	className: "cursor",
+	values: "cursor",
+	group: "System"
+} };
+var display = {
+	display: {
+		className: "d",
+		group: "Display"
+	},
+	hideFrom: {
+		className: "hide",
+		values: "breakpoints",
+		group: "Display",
+		transform(value, { raw, token }) {
+			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}` : `@media screen and (min-width: ${value})`]: { display: "none" } };
+		}
+	},
+	hideBelow: {
+		className: "show",
+		values: "breakpoints",
+		group: "Display",
+		transform(value, { raw, token }) {
+			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}Down` : `@media screen and (max-width: ${value})`]: { display: "none" } };
+		}
+	}
+};
+var divideColor = createColorMixTransform("borderColor");
+var divide = {
+	divideX: {
+		className: "dvd-x",
+		values: "borderWidths",
+		group: "Border",
+		transform(value) {
+			return { "& > :not([hidden]) ~ :not([hidden])": {
+				borderInlineStartWidth: value,
+				borderInlineEndWidth: "0px"
+			} };
+		}
+	},
+	divideY: {
+		className: "dvd-y",
+		values: "borderWidths",
+		group: "Border",
+		transform(value) {
+			return { "& > :not([hidden]) ~ :not([hidden])": {
+				borderTopWidth: value,
+				borderBottomWidth: "0px"
+			} };
+		}
+	},
+	divideColor: {
+		className: "dvd-c",
+		values: "colors",
+		group: "Border",
+		transform(value, args) {
+			return { "& > :not([hidden]) ~ :not([hidden])": divideColor(value, args) };
+		}
+	},
+	divideStyle: {
+		className: "dvd-s",
+		property: "borderStyle",
+		group: "Border",
+		transform(value) {
+			return { "& > :not([hidden]) ~ :not([hidden])": { borderStyle: value } };
+		}
+	}
+};
+function cssVar(syntax, initialValue) {
+	return initialValue === void 0 ? {
+		syntax,
+		inherits: false
+	} : {
+		syntax,
+		inherits: false,
+		initialValue
+	};
+}
+function anyVar(initialValue) {
+	return cssVar("*", initialValue);
+}
+var effects = {
+	opacity: {
+		className: "op",
+		values: "opacity",
+		group: "Background"
+	},
+	boxShadow: {
+		shorthand: "shadow",
+		className: "bx-sh",
+		values: "shadows",
+		group: "Shadow"
+	},
+	boxShadowColor: {
+		shorthand: "shadowColor",
+		className: "bx-sh-c",
+		values: "colors",
+		transform: createColorMixTransform("--shadow-color"),
+		group: "Color"
+	},
+	mixBlendMode: {
+		className: "mix-bm",
+		group: "Effect"
+	},
+	filter: {
+		className: "filter",
+		group: "Effect",
+		values: { auto: "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )" }
+	},
+	brightness: {
+		className: "brightness",
+		group: "Effect",
+		globalVars: { "--brightness": anyVar() },
+		transform(value) {
+			return { "--brightness": `brightness(${value})` };
+		}
+	},
+	contrast: {
+		className: "contrast",
+		group: "Effect",
+		globalVars: { "--contrast": anyVar() },
+		transform(value) {
+			return { "--contrast": `contrast(${value})` };
+		}
+	},
+	grayscale: {
+		className: "grayscale",
+		group: "Effect",
+		globalVars: { "--grayscale": anyVar() },
+		transform(value) {
+			return { "--grayscale": `grayscale(${value})` };
+		}
+	},
+	hueRotate: {
+		className: "hue-rotate",
+		group: "Effect",
+		globalVars: { "--hue-rotate": anyVar() },
+		transform(value) {
+			return { "--hue-rotate": `hue-rotate(${value})` };
+		}
+	},
+	invert: {
+		className: "invert",
+		group: "Effect",
+		globalVars: { "--invert": anyVar() },
+		transform(value) {
+			return { "--invert": `invert(${value})` };
+		}
+	},
+	saturate: {
+		className: "saturate",
+		group: "Effect",
+		globalVars: { "--saturate": anyVar() },
+		transform(value) {
+			return { "--saturate": `saturate(${value})` };
+		}
+	},
+	sepia: {
+		className: "sepia",
+		group: "Effect",
+		globalVars: { "--sepia": anyVar() },
+		transform(value) {
+			return { "--sepia": `sepia(${value})` };
+		}
+	},
+	dropShadow: {
+		className: "drop-shadow",
+		group: "Effect",
+		values: "dropShadows",
+		globalVars: { "--drop-shadow": anyVar() },
+		transform(value) {
+			return { "--drop-shadow": value };
+		}
+	},
+	blur: {
+		className: "blur",
+		group: "Effect",
+		values: "blurs",
+		globalVars: { "--blur": anyVar() },
+		transform(value) {
+			return { "--blur": `blur(${value})` };
+		}
+	},
+	backdropFilter: {
+		className: "bkdp",
+		group: "Effect",
+		values: { auto: "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )" },
+		transform(value) {
+			return {
+				WebkitBackdropFilter: value,
+				backdropFilter: value
+			};
+		}
+	},
+	backdropBlur: {
+		className: "bkdp-blur",
+		group: "Effect",
+		values: "blurs",
+		globalVars: { "--backdrop-blur": anyVar() },
+		transform(value) {
+			return { "--backdrop-blur": `blur(${value})` };
+		}
+	},
+	backdropBrightness: {
+		className: "bkdp-brightness",
+		group: "Effect",
+		globalVars: { "--backdrop-brightness": anyVar() },
+		transform(value) {
+			return { "--backdrop-brightness": `brightness(${value})` };
+		}
+	},
+	backdropContrast: {
+		className: "bkdp-contrast",
+		group: "Effect",
+		globalVars: { "--backdrop-contrast": anyVar() },
+		transform(value) {
+			return { "--backdrop-contrast": `contrast(${value})` };
+		}
+	},
+	backdropGrayscale: {
+		className: "bkdp-grayscale",
+		group: "Effect",
+		globalVars: { "--backdrop-grayscale": anyVar() },
+		transform(value) {
+			return { "--backdrop-grayscale": `grayscale(${value})` };
+		}
+	},
+	backdropHueRotate: {
+		className: "bkdp-hue-rotate",
+		group: "Effect",
+		globalVars: { "--backdrop-hue-rotate": anyVar() },
+		transform(value) {
+			return { "--backdrop-hue-rotate": `hue-rotate(${value})` };
+		}
+	},
+	backdropInvert: {
+		className: "bkdp-invert",
+		group: "Effect",
+		globalVars: { "--backdrop-invert": anyVar() },
+		transform(value) {
+			return { "--backdrop-invert": `invert(${value})` };
+		}
+	},
+	backdropOpacity: {
+		className: "bkdp-opacity",
+		group: "Effect",
+		globalVars: { "--backdrop-opacity": anyVar() },
+		transform(value) {
+			return { "--backdrop-opacity": value };
+		}
+	},
+	backdropSaturate: {
+		className: "bkdp-saturate",
+		group: "Effect",
+		globalVars: { "--backdrop-saturate": anyVar() },
+		transform(value) {
+			return { "--backdrop-saturate": `saturate(${value})` };
+		}
+	},
+	backdropSepia: {
+		className: "bkdp-sepia",
+		group: "Effect",
+		globalVars: { "--backdrop-sepia": anyVar() },
+		transform(value) {
+			return { "--backdrop-sepia": `sepia(${value})` };
+		}
+	}
+};
+var flexGrid = {
+	flexBasis: {
+		className: "flex-b",
+		group: "Flex Layout",
+		values(theme) {
+			return {
+				...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%",
+				full: "100%"
+			};
+		}
+	},
+	flex: {
+		className: "flex",
+		group: "Flex Layout",
+		values: {
+			"1": "1 1 0%",
+			auto: "1 1 auto",
+			initial: "0 1 auto",
+			none: "none"
+		}
+	},
+	flexDirection: {
+		className: "flex-d",
+		group: "Flex Layout",
+		shorthand: "flexDir"
+	},
+	flexGrow: {
+		className: "flex-g",
+		group: "Flex Layout"
+	},
+	flexShrink: {
+		className: "flex-sh",
+		group: "Flex Layout"
+	},
+	gridTemplateColumns: {
+		className: "grid-tc",
+		group: "Grid Layout"
+	},
+	gridTemplateRows: {
+		className: "grid-tr",
+		group: "Grid Layout"
+	},
+	gridColumn: {
+		className: "grid-c",
+		group: "Grid Layout"
+	},
+	gridRow: {
+		className: "grid-r",
+		group: "Grid Layout"
+	},
+	gridColumnStart: {
+		className: "grid-cs",
+		group: "Grid Layout"
+	},
+	gridColumnEnd: {
+		className: "grid-ce",
+		group: "Grid Layout"
+	},
+	gridAutoFlow: {
+		className: "grid-af",
+		group: "Grid Layout"
+	},
+	gridAutoColumns: {
+		className: "grid-ac",
+		group: "Grid Layout",
+		values: {
+			min: "min-content",
+			max: "max-content",
+			fr: "minmax(0, 1fr)"
+		}
+	},
+	gridAutoRows: {
+		className: "grid-ar",
+		group: "Grid Layout",
+		values: {
+			min: "min-content",
+			max: "max-content",
+			fr: "minmax(0, 1fr)"
+		}
+	},
+	gap: {
+		className: "gap",
+		group: "Flex Layout",
+		values: "spacing"
+	},
+	gridGap: {
+		className: "grid-g",
+		group: "Grid Layout",
+		values: "spacing"
+	},
+	gridRowGap: {
+		className: "grid-rg",
+		group: "Grid Layout",
+		values: "spacing"
+	},
+	gridColumnGap: {
+		className: "grid-cg",
+		group: "Grid Layout",
+		values: "spacing"
+	},
+	rowGap: {
+		className: "rg",
+		group: "Grid Layout",
+		values: "spacing"
+	},
+	columnGap: {
+		className: "cg",
+		group: "Grid Layout",
+		values: "spacing"
+	},
+	justifyContent: {
+		className: "jc",
+		group: "Flex Layout"
+	},
+	alignContent: {
+		className: "ac",
+		group: "Flex Layout"
+	},
+	alignItems: {
+		className: "ai",
+		group: "Flex Layout"
+	},
+	alignSelf: {
+		className: "as",
+		group: "Flex Layout"
+	}
+};
+function createFocusRing(selector, className) {
+	return {
+		className,
+		group: "Focus Ring",
+		values: [
+			"outside",
+			"inside",
+			"mixed",
+			"none"
+		],
+		transform(value) {
+			const focusRingColor = `var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC))`;
+			switch (value) {
+				case "inside": return {
+					"--focus-ring-color": focusRingColor,
+					[selector]: {
+						outlineOffset: "0px",
+						outlineWidth: "var(--focus-ring-width, 1px)",
+						outlineColor: "var(--focus-ring-color)",
+						outlineStyle: "var(--focus-ring-style, solid)",
+						borderColor: "var(--focus-ring-color)"
+					}
+				};
+				case "outside": return {
+					"--focus-ring-color": focusRingColor,
+					[selector]: {
+						outlineWidth: "var(--focus-ring-width, 2px)",
+						outlineOffset: "var(--focus-ring-offset, 2px)",
+						outlineStyle: "var(--focus-ring-style, solid)",
+						outlineColor: "var(--focus-ring-color)"
+					}
+				};
+				case "mixed": return {
+					"--focus-ring-color": focusRingColor,
+					[selector]: {
+						outlineOffset: "0px",
+						outlineWidth: "var(--focus-ring-width, 3px)",
+						outlineStyle: "var(--focus-ring-style, solid)",
+						outlineColor: "color-mix(in srgb, var(--focus-ring-color), transparent 60%)",
+						borderColor: "var(--focus-ring-color)"
+					}
+				};
+				case "none": return {
+					"--focus-ring-color": focusRingColor,
+					[selector]: { outline: "none" }
+				};
+				default: return {};
+			}
+		}
+	};
+}
+var focusRing = {
+	focusRing: createFocusRing("&:is(:focus, [data-focus])", "focus-ring"),
+	focusVisibleRing: createFocusRing("&:is(:focus-visible, [data-focus-visible])", "focus-v-ring"),
+	focusRingColor: {
+		className: "focus-ring-c",
+		values: "colors",
+		group: "Focus Ring",
+		transform: createColorMixTransform("--focus-ring-color-prop")
+	},
+	focusRingOffset: {
+		className: "focus-ring-o",
+		values: "spacing",
+		group: "Focus Ring",
+		transform: (v) => ({ "--focus-ring-offset": v })
+	},
+	focusRingWidth: {
+		className: "focus-ring-w",
+		values: "borderWidths",
+		property: "outlineWidth",
+		group: "Focus Ring",
+		transform: (v) => ({ "--focus-ring-width": v })
+	},
+	focusRingStyle: {
+		className: "focus-ring-s",
+		values: "borderStyles",
+		property: "outlineStyle",
+		group: "Focus Ring",
+		transform: (v) => ({ "--focus-ring-style": v })
+	}
+};
+var stopColor = () => cssVar("<color>", "#0000");
+var composed = {
+	"--gradient-position": anyVar(),
+	"--gradient-stops": anyVar(),
+	"--gradient-via-stops": anyVar()
+};
+var gradientVia = createColorMixTransform("--gradient-via");
+var linearGradientDirectionMap = /* @__PURE__ */ new Map([
+	["to-t", "to top"],
+	["to-tr", "to top right"],
+	["to-r", "to right"],
+	["to-br", "to bottom right"],
+	["to-b", "to bottom"],
+	["to-bl", "to bottom left"],
+	["to-l", "to left"],
+	["to-tl", "to top left"]
+]);
+var isGradientShortcut = (value) => linearGradientDirectionMap.has(value);
+var linearGradientValues = (theme) => {
+	return {
+		...theme("gradients"),
+		...Object.fromEntries(linearGradientDirectionMap.entries())
+	};
+};
+var gradientStops = "var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))";
+var gradientViaStops = "var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)";
+var backgroundGradients = {
+	backgroundGradient: {
+		shorthand: "bgGradient",
+		className: "bg-grad",
+		group: "Background Gradient",
+		globalVars: composed,
+		values: linearGradientValues,
+		transform(value, { raw, token }) {
+			const tokenValue = token(`gradients.${raw}`);
+			if (tokenValue) return { backgroundImage: tokenValue };
+			if (!isGradientShortcut(raw)) return { backgroundImage: value };
+			return {
+				"--gradient-stops": gradientStops,
+				"--gradient-position": linearGradientDirectionMap.get(raw),
+				backgroundImage: `linear-gradient(var(--gradient-stops))`
+			};
+		}
+	},
+	backgroundLinear: {
+		shorthand: "bgLinear",
+		className: "bg-linear",
+		group: "Background Gradient",
+		globalVars: composed,
+		values: linearGradientValues,
+		transform(value, { raw, token }) {
+			const tokenValue = token(`gradients.${raw}`);
+			if (tokenValue) return { backgroundImage: tokenValue };
+			if (!isGradientShortcut(raw)) return { backgroundImage: value };
+			return {
+				"--gradient-stops": gradientStops,
+				"--gradient-position": linearGradientDirectionMap.get(raw),
+				backgroundImage: `linear-gradient(var(--gradient-stops))`
+			};
+		}
+	},
+	backgroundRadial: {
+		shorthand: "bgRadial",
+		className: "bg-radial",
+		group: "Background Gradient",
+		globalVars: composed,
+		values: "gradients",
+		transform(value, { raw, token }) {
+			const tokenValue = token(`gradients.${raw}`);
+			if (tokenValue) return { backgroundImage: tokenValue };
+			return {
+				"--gradient-stops": gradientStops,
+				"--gradient-position": value,
+				backgroundImage: `radial-gradient(var(--gradient-stops,${value}))`
+			};
+		}
+	},
+	backgroundConic: {
+		shorthand: "bgConic",
+		className: "bg-conic",
+		group: "Background Gradient",
+		globalVars: composed,
+		transform(value) {
+			return {
+				"--gradient-stops": gradientStops,
+				"--gradient-position": value,
+				backgroundImage: `conic-gradient(var(--gradient-stops))`
+			};
+		}
+	},
+	textGradient: {
+		className: "txt-grad",
+		group: "Background Gradient",
+		globalVars: composed,
+		values: linearGradientValues,
+		transform(value, { raw, token }) {
+			const tokenValue = token(`gradients.${raw}`);
+			if (tokenValue) return {
+				backgroundImage: tokenValue,
+				WebkitBackgroundClip: "text",
+				color: "transparent"
+			};
+			if (!isGradientShortcut(raw)) return {
+				backgroundImage: value,
+				WebkitBackgroundClip: "text",
+				color: "transparent"
+			};
+			return {
+				"--gradient-stops": gradientStops,
+				"--gradient-position": linearGradientDirectionMap.get(raw),
+				backgroundImage: `linear-gradient(var(--gradient-stops))`,
+				WebkitBackgroundClip: "text",
+				color: "transparent"
+			};
+		}
+	},
+	gradientFromPosition: {
+		className: "grad-from-pos",
+		group: "Background Gradient",
+		globalVars: { "--gradient-from-position": cssVar("<length-percentage>", "0%") },
+		transform(value) {
+			return { "--gradient-from-position": value };
+		}
+	},
+	gradientToPosition: {
+		className: "grad-to-pos",
+		group: "Background Gradient",
+		globalVars: { "--gradient-to-position": cssVar("<length-percentage>", "100%") },
+		transform(value) {
+			return { "--gradient-to-position": value };
+		}
+	},
+	gradientFrom: {
+		className: "grad-from",
+		values: "colors",
+		group: "Background Gradient",
+		globalVars: { "--gradient-from": stopColor() },
+		transform: createColorMixTransform("--gradient-from")
+	},
+	gradientTo: {
+		className: "grad-to",
+		values: "colors",
+		group: "Background Gradient",
+		globalVars: { "--gradient-to": stopColor() },
+		transform: createColorMixTransform("--gradient-to")
+	},
+	gradientVia: {
+		className: "grad-via",
+		values: "colors",
+		group: "Background Gradient",
+		globalVars: { "--gradient-via": stopColor() },
+		transform(value, args) {
+			return {
+				...gradientVia(value, args),
+				"--gradient-stops": "var(--gradient-via-stops)",
+				"--gradient-via-stops": gradientViaStops
+			};
+		}
+	},
+	gradientViaPosition: {
+		className: "grad-via-pos",
+		group: "Background Gradient",
+		globalVars: { "--gradient-via-position": cssVar("<length-percentage>", "50%") },
+		transform(value) {
+			return { "--gradient-via-position": value };
+		}
+	}
+};
+var srMapping = {
+	true: {
+		position: "absolute",
+		width: "1px",
+		height: "1px",
+		padding: "0",
+		margin: "-1px",
+		overflow: "hidden",
+		clip: "rect(0, 0, 0, 0)",
+		whiteSpace: "nowrap",
+		borderWidth: "0"
+	},
+	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" },
+		group: "Other",
+		transform(value) {
+			return srMapping[value] || {};
+		}
+	},
+	debug: {
+		className: "debug",
+		values: { type: "boolean" },
+		group: "Other",
+		transform(value) {
+			if (!value) return {};
+			return {
+				outline: "1px solid blue !important",
+				"&>*": { outline: "1px solid red !important" }
+			};
+		}
+	}
+};
+var SCROLLBAR_COLOR = "var(--scrollbar-thumb, currentColor) var(--scrollbar-track, transparent)";
+function scrollbarColorStyles(colorVars) {
+	return {
+		...colorVars,
+		scrollbarColor: SCROLLBAR_COLOR,
+		"&::-webkit-scrollbar-thumb": { backgroundColor: "var(--scrollbar-thumb, currentColor)" },
+		"&::-webkit-scrollbar-track": { backgroundColor: "var(--scrollbar-track, transparent)" }
+	};
+}
+var interactivity = {
+	accentColor: {
+		className: "ac-c",
+		values: "colors",
+		transform: createColorMixTransform("accentColor"),
+		group: "Color"
+	},
+	caretColor: {
+		className: "ca-c",
+		values: "colors",
+		group: "Color",
+		transform: createColorMixTransform("caretColor")
+	},
+	scrollBehavior: {
+		className: "scr-bhv",
+		group: "Scroll"
+	},
+	scrollbar: {
+		className: "scr-bar",
+		values: ["visible", "hidden"],
+		group: "Scroll",
+		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" }
+			};
+		}
+	},
+	scrollbarColor: {
+		className: "scr-bar-c",
+		group: "Scroll"
+	},
+	scrollbarThumb: {
+		className: "scr-bar-th",
+		values: "colors",
+		group: "Scroll",
+		globalVars: { "--scrollbar-thumb": cssVar("<color>") },
+		transform(value, args) {
+			return scrollbarColorStyles(createColorMixTransform("--scrollbar-thumb")(value, args));
+		}
+	},
+	scrollbarTrack: {
+		className: "scr-bar-tk",
+		values: "colors",
+		group: "Scroll",
+		globalVars: { "--scrollbar-track": cssVar("<color>") },
+		transform(value, args) {
+			return scrollbarColorStyles(createColorMixTransform("--scrollbar-track")(value, args));
+		}
+	},
+	scrollbarGutter: {
+		className: "scr-bar-g",
+		group: "Scroll"
+	},
+	scrollbarWidth: {
+		className: "scr-bar-w",
+		group: "Scroll"
+	},
+	scrollMargin: {
+		className: "scr-m",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginLeft: {
+		className: "scr-ml",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginRight: {
+		className: "scr-mr",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginTop: {
+		className: "scr-mt",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginBottom: {
+		className: "scr-mb",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginBlock: {
+		className: "scr-my",
+		values: "spacing",
+		group: "Scroll",
+		shorthand: ["scrollMarginY"]
+	},
+	scrollMarginBlockEnd: {
+		className: "scr-mbe",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginBlockStart: {
+		className: "scr-mbt",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginInline: {
+		className: "scr-mx",
+		values: "spacing",
+		group: "Scroll",
+		shorthand: ["scrollMarginX"]
+	},
+	scrollMarginInlineEnd: {
+		className: "scr-me",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollMarginInlineStart: {
+		className: "scr-ms",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPadding: {
+		className: "scr-p",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingBlock: {
+		className: "scr-py",
+		values: "spacing",
+		group: "Scroll",
+		shorthand: ["scrollPaddingY"]
+	},
+	scrollPaddingBlockStart: {
+		className: "scr-pbs",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingBlockEnd: {
+		className: "scr-pbe",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingInline: {
+		className: "scr-px",
+		values: "spacing",
+		group: "Scroll",
+		shorthand: ["scrollPaddingX"]
+	},
+	scrollPaddingInlineEnd: {
+		className: "scr-pe",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingInlineStart: {
+		className: "scr-ps",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingLeft: {
+		className: "scr-pl",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingRight: {
+		className: "scr-pr",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingTop: {
+		className: "scr-pt",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollPaddingBottom: {
+		className: "scr-pb",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapAlign: {
+		className: "scr-sa",
+		group: "Scroll"
+	},
+	scrollSnapStop: {
+		className: "scrs-s",
+		group: "Scroll"
+	},
+	scrollSnapType: {
+		className: "scrs-t",
+		group: "Scroll",
+		values: {
+			none: "none",
+			x: "x var(--scroll-snap-strictness)",
+			y: "y var(--scroll-snap-strictness)",
+			both: "both var(--scroll-snap-strictness)"
+		}
+	},
+	scrollSnapStrictness: {
+		className: "scrs-strt",
+		values: ["mandatory", "proximity"],
+		group: "Scroll",
+		globalVars: { "--scroll-snap-strictness": anyVar("proximity") },
+		transform(value) {
+			return { "--scroll-snap-strictness": value };
+		}
+	},
+	scrollSnapMargin: {
+		className: "scrs-m",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapMarginTop: {
+		className: "scrs-mt",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapMarginBottom: {
+		className: "scrs-mb",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapMarginLeft: {
+		className: "scrs-ml",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapMarginRight: {
+		className: "scrs-mr",
+		values: "spacing",
+		group: "Scroll"
+	},
+	scrollSnapCoordinate: {
+		className: "scrs-c",
+		group: "Scroll"
+	},
+	scrollSnapDestination: {
+		className: "scrs-d",
+		group: "Scroll"
+	},
+	scrollSnapPointsX: {
+		className: "scrs-px",
+		group: "Scroll"
+	},
+	scrollSnapPointsY: {
+		className: "scrs-py",
+		group: "Scroll"
+	},
+	scrollSnapTypeX: {
+		className: "scrs-tx",
+		group: "Scroll"
+	},
+	scrollSnapTypeY: {
+		className: "scrs-ty",
+		group: "Scroll"
+	},
+	scrollTimeline: {
+		className: "scrtl",
+		group: "Scroll"
+	},
+	scrollTimelineAxis: {
+		className: "scrtl-a",
+		group: "Scroll"
+	},
+	scrollTimelineName: {
+		className: "scrtl-n",
+		group: "Scroll"
+	},
+	touchAction: {
+		className: "tch-a",
+		group: "Interactivity"
+	},
+	userSelect: {
+		className: "us",
+		group: "Interactivity",
+		transform(value) {
+			return {
+				WebkitUserSelect: value,
+				userSelect: value
+			};
+		}
+	},
+	overflow: {
+		className: "ov",
+		group: "Scroll"
+	},
+	overflowWrap: {
+		className: "ov-wrap",
+		group: "Scroll"
+	},
+	overflowX: {
+		className: "ov-x",
+		group: "Scroll"
+	},
+	overflowY: {
+		className: "ov-y",
+		group: "Scroll"
+	},
+	overflowAnchor: {
+		className: "ov-a",
+		group: "Scroll"
+	},
+	overflowBlock: {
+		className: "ov-b",
+		group: "Scroll"
+	},
+	overflowInline: {
+		className: "ov-i",
+		group: "Scroll"
+	},
+	overflowClipBox: {
+		className: "ovcp-bx",
+		group: "Scroll"
+	},
+	overflowClipMargin: {
+		className: "ovcp-m",
+		group: "Scroll"
+	},
+	overscrollBehavior: {
+		className: "ovs-b",
+		group: "Scroll"
+	},
+	overscrollBehaviorX: {
+		className: "ovs-bx",
+		group: "Scroll"
+	},
+	overscrollBehaviorY: {
+		className: "ovs-by",
+		group: "Scroll"
+	},
+	overscrollBehaviorBlock: {
+		className: "ovs-bb",
+		group: "Scroll"
+	},
+	overscrollBehaviorInline: {
+		className: "ovs-bi",
+		group: "Scroll"
+	}
+};
+var layout = {
+	aspectRatio: {
+		className: "asp",
+		values: "aspectRatios",
+		group: "Layout"
+	},
+	boxDecorationBreak: {
+		className: "bx-db",
+		group: "Layout",
+		transform(value) {
+			return {
+				WebkitBoxDecorationBreak: value,
+				boxDecorationBreak: value
+			};
+		}
+	},
+	zIndex: {
+		className: "z",
+		values: "zIndex",
+		group: "Visibility"
+	},
+	boxSizing: {
+		className: "bx-s",
+		group: "System"
+	},
+	objectPosition: {
+		className: "obj-p",
+		group: "Layout"
+	},
+	objectFit: {
+		className: "obj-f",
+		group: "Layout"
+	},
+	overscrollBehavior: {
+		className: "ovscl",
+		group: "Scroll"
+	},
+	overscrollBehaviorX: {
+		className: "ovscl-x",
+		group: "Scroll"
+	},
+	overscrollBehaviorY: {
+		className: "ovscl-y",
+		group: "Scroll"
+	},
+	position: {
+		className: "pos",
+		shorthand: "pos",
+		group: "Position"
+	},
+	top: {
+		className: "top",
+		values: "spacing",
+		group: "Position"
+	},
+	left: {
+		className: "left",
+		values: "spacing",
+		group: "Position"
+	},
+	inset: {
+		className: "inset",
+		group: "Position",
+		values: (theme) => ({
+			auto: "auto",
+			...theme("spacing")
+		})
+	},
+	insetInline: {
+		className: "inset-x",
+		values: "spacing",
+		group: "Position",
+		shorthand: ["insetX"]
+	},
+	insetBlock: {
+		className: "inset-y",
+		values: "spacing",
+		group: "Position",
+		shorthand: ["insetY"]
+	},
+	insetBlockEnd: {
+		className: "inset-be",
+		values: "spacing",
+		group: "Position"
+	},
+	insetBlockStart: {
+		className: "inset-bs",
+		values: "spacing",
+		group: "Position"
+	},
+	insetInlineEnd: {
+		className: "inset-e",
+		values: "spacing",
+		group: "Position",
+		shorthand: ["insetEnd", "end"]
+	},
+	insetInlineStart: {
+		className: "inset-s",
+		values: "spacing",
+		group: "Position",
+		shorthand: ["insetStart", "start"]
+	},
+	right: {
+		className: "right",
+		values: "spacing",
+		group: "Position"
+	},
+	bottom: {
+		className: "bottom",
+		values: "spacing",
+		group: "Position"
+	},
+	float: {
+		className: "float",
+		values: ["start", "end"],
+		property: "float",
+		group: "Position",
+		transform(value) {
+			if (value === "start") return {
+				float: "left",
+				"[dir=\"rtl\"] &": { float: "right" }
+			};
+			if (value === "end") return {
+				float: "right",
+				"[dir=\"rtl\"] &": { float: "left" }
+			};
+			return { float: value };
+		}
+	},
+	visibility: {
+		className: "vis",
+		group: "Visibility"
+	}
+};
+var list = {
+	listStyleType: {
+		className: "li-t",
+		group: "List"
+	},
+	listStylePosition: {
+		className: "li-pos",
+		group: "List"
+	},
+	listStyleImage: {
+		className: "li-img",
+		group: "List",
+		values: "assets"
+	},
+	listStyle: {
+		className: "li-s",
+		group: "List"
+	}
+};
+var IDENTITY = "linear-gradient(#fff, #fff)";
+var maskVar = (name) => `var(--mask-${name})`;
+var LAYERS = [
+	"linear",
+	"radial",
+	"conic"
+];
+var EDGES = [
+	"left",
+	"right",
+	"bottom",
+	"top"
+];
+var MASK_IMAGE = LAYERS.map(maskVar).join(", ");
+var MASK_EDGES = EDGES.map(maskVar).join(", ");
+var image = {
+	syntax: "*",
+	inherits: false,
+	initialValue: IDENTITY
+};
+var composedList = {
+	syntax: "*",
+	inherits: false
+};
+var keyword = (initialValue) => ({
+	syntax: "*",
+	inherits: false,
+	initialValue
+});
+var color = (initialValue) => ({
+	syntax: "<color>",
+	inherits: false,
+	initialValue
+});
+var position = (initialValue) => ({
+	syntax: "<length-percentage>",
+	inherits: false,
+	initialValue
+});
+function gradientVars(name) {
+	return {
+		[`--mask-${name}`]: image,
+		[`--mask-${name}-from-color`]: color("black"),
+		[`--mask-${name}-to-color`]: color("transparent"),
+		[`--mask-${name}-from-position`]: position("0%"),
+		[`--mask-${name}-to-position`]: position("100%")
+	};
+}
+var maskVars = Object.assign({}, ...[...LAYERS, ...EDGES].map(gradientVars), ...LAYERS.map((layer) => ({ [`--mask-${layer}-stops`]: composedList })), {
+	"--mask-linear-position": keyword("0deg"),
+	"--mask-conic-position": keyword("0deg"),
+	"--mask-radial-position": keyword("center"),
+	"--mask-radial-shape": keyword("ellipse"),
+	"--mask-radial-size": keyword("farthest-corner"),
+	"--mask-composite": keyword("intersect"),
+	"--mask-composite-webkit": keyword("source-in")
+});
+function cssProps(styles) {
+	return styles;
+}
+function maskLayers(layers) {
+	return {
+		WebkitMaskImage: MASK_IMAGE,
+		maskImage: MASK_IMAGE,
+		WebkitMaskComposite: maskVar("composite-webkit"),
+		maskComposite: maskVar("composite"),
+		...layers
+	};
+}
+function stopList(name) {
+	return `${maskVar(`${name}-from-color`)} ${maskVar(`${name}-from-position`)}, ${maskVar(`${name}-to-color`)} ${maskVar(`${name}-to-position`)}`;
+}
+function edgeLayers(edges) {
+	const layers = { "--mask-linear": MASK_EDGES };
+	for (const edge of edges) layers[`--mask-${edge}`] = `linear-gradient(to ${edge}, ${stopList(edge)})`;
+	return maskLayers(layers);
+}
+var GEOMETRY = {
+	linear: {
+		fn: "linear-gradient",
+		head: maskVar("linear-position")
+	},
+	radial: {
+		fn: "radial-gradient",
+		head: `${maskVar("radial-shape")} ${maskVar("radial-size")} at ${maskVar("radial-position")}`
+	},
+	conic: {
+		fn: "conic-gradient",
+		head: `from ${maskVar("conic-position")}`
+	}
+};
+function gradientLayer(layer) {
+	const { fn, head } = GEOMETRY[layer];
+	return maskLayers({
+		[`--mask-${layer}-stops`]: `${head}, ${stopList(layer)}`,
+		[`--mask-${layer}`]: `${fn}(${maskVar(`${layer}-stops`)})`
+	});
+}
+function positionStop(className, vars, wiring) {
+	return {
+		className,
+		values: "spacing",
+		group: "Mask",
+		globalVars: maskVars,
+		transform(value) {
+			const stops = Object.fromEntries(vars.map((name) => [`--mask-${name}`, value]));
+			return cssProps({
+				...wiring(),
+				...stops
+			});
+		}
+	};
+}
+function colorStop(className, vars, wiring) {
+	return {
+		className,
+		values: "colors",
+		group: "Mask",
+		globalVars: maskVars,
+		transform(value, args) {
+			const stops = {};
+			for (const name of vars) Object.assign(stops, createColorMixTransform(`--mask-${name}`)(value, args));
+			return cssProps({
+				...wiring(),
+				...stops
+			});
+		}
+	};
+}
+function stopProps(prop, className, targets, wiring) {
+	const vars = (suffix) => targets.map((target) => `${target}-${suffix}`);
+	return {
+		[`${prop}From`]: positionStop(`${className}-from`, vars("from-position"), wiring),
+		[`${prop}To`]: positionStop(`${className}-to`, vars("to-position"), wiring),
+		[`${prop}FromColor`]: colorStop(`${className}-from-c`, vars("from-color"), wiring),
+		[`${prop}ToColor`]: colorStop(`${className}-to-c`, vars("to-color"), wiring)
+	};
+}
+var edgeProps = Object.assign({}, ...[
+	[
+		"Top",
+		"t",
+		["top"]
+	],
+	[
+		"Right",
+		"r",
+		["right"]
+	],
+	[
+		"Bottom",
+		"b",
+		["bottom"]
+	],
+	[
+		"Left",
+		"l",
+		["left"]
+	],
+	[
+		"X",
+		"x",
+		["left", "right"]
+	],
+	[
+		"Y",
+		"y",
+		["top", "bottom"]
+	]
+].map(([name, short, edges]) => stopProps(`mask${name}`, `msk-${short}`, edges, () => edgeLayers(edges))));
+var layerProps = (layer) => stopProps(`mask${layer[0].toUpperCase()}${layer.slice(1)}`, `msk-${layer}`, [layer], () => gradientLayer(layer));
+function prefixed(prop, className) {
+	const webkit = `Webkit${prop[0].toUpperCase()}${prop.slice(1)}`;
+	return {
+		className,
+		group: "Mask",
+		transform(value) {
+			return cssProps({
+				[webkit]: value,
+				[prop]: value
+			});
+		}
+	};
+}
+var webkitMaskComposite = {
+	add: "source-over",
+	subtract: "source-out",
+	intersect: "source-in",
+	exclude: "xor"
+};
+var POSITION = {
+	center: "center",
+	top: "top",
+	bottom: "bottom",
+	left: "left",
+	right: "right"
+};
+var linearDirectionMap = /* @__PURE__ */ new Map([
+	["to-t", "to top"],
+	["to-tr", "to top right"],
+	["to-r", "to right"],
+	["to-br", "to bottom right"],
+	["to-b", "to bottom"],
+	["to-bl", "to bottom left"],
+	["to-l", "to left"],
+	["to-tl", "to top left"]
+]);
+var maskLinearValues = () => Object.fromEntries(linearDirectionMap.entries());
+function asAngle(raw, value) {
+	if (/^-?\d+(\.\d+)?$/.test(raw)) return `${raw}deg`;
+	return value;
+}
+var varOnly = (name, className, values) => ({
+	className,
+	group: "Mask",
+	globalVars: maskVars,
+	values,
+	transform: (value) => ({ [`--mask-${name}`]: value })
+});
+var mask = {
+	mask: prefixed("mask", "msk"),
+	maskImage: prefixed("maskImage", "msk-i"),
+	maskSize: prefixed("maskSize", "msk-s"),
+	maskPosition: prefixed("maskPosition", "msk-p"),
+	maskRepeat: prefixed("maskRepeat", "msk-r"),
+	maskClip: prefixed("maskClip", "msk-cp"),
+	maskOrigin: prefixed("maskOrigin", "msk-o"),
+	maskComposite: {
+		className: "msk-cmp",
+		group: "Mask",
+		globalVars: maskVars,
+		transform(value) {
+			return cssProps({
+				"--mask-composite": value,
+				"--mask-composite-webkit": webkitMaskComposite[value] ?? value,
+				WebkitMaskComposite: maskVar("composite-webkit"),
+				maskComposite: maskVar("composite")
+			});
+		}
+	},
+	maskMode: {
+		className: "msk-md",
+		group: "Mask"
+	},
+	maskType: {
+		className: "msk-t",
+		group: "Mask"
+	},
+	...edgeProps,
+	maskLinear: {
+		className: "msk-linear",
+		group: "Mask",
+		globalVars: maskVars,
+		values: maskLinearValues,
+		transform(value, { raw }) {
+			const angle = linearDirectionMap.get(String(raw)) ?? asAngle(String(raw), value);
+			return cssProps({
+				...gradientLayer("linear"),
+				"--mask-linear-position": angle
+			});
+		}
+	},
+	...layerProps("linear"),
+	maskRadial: {
+		className: "msk-radial",
+		group: "Mask",
+		globalVars: maskVars,
+		transform(value) {
+			return cssProps({
+				...gradientLayer("radial"),
+				"--mask-radial-size": value
+			});
+		}
+	},
+	...layerProps("radial"),
+	maskRadialAt: varOnly("radial-position", "msk-radial-at", {
+		...POSITION,
+		"top left": "top left",
+		"top right": "top right",
+		"bottom left": "bottom left",
+		"bottom right": "bottom right"
+	}),
+	maskRadialSize: varOnly("radial-size", "msk-radial-sz", {
+		"closest-side": "closest-side",
+		"closest-corner": "closest-corner",
+		"farthest-side": "farthest-side",
+		"farthest-corner": "farthest-corner"
+	}),
+	maskRadialShape: varOnly("radial-shape", "msk-radial-shape", {
+		circle: "circle",
+		ellipse: "ellipse"
+	}),
+	maskConic: {
+		className: "msk-conic",
+		group: "Mask",
+		globalVars: maskVars,
+		transform(value, { raw }) {
+			return cssProps({
+				...gradientLayer("conic"),
+				"--mask-conic-position": asAngle(String(raw), value)
+			});
+		}
+	},
+	...layerProps("conic")
+};
+var outline = {
+	outlineWidth: {
+		className: "ring-w",
+		shorthand: "ringWidth",
+		values: "borderWidths",
+		group: "Border"
+	},
+	outlineColor: {
+		className: "ring-c",
+		values: "colors",
+		group: "Color",
+		shorthand: "ringColor",
+		transform: createColorMixTransform("outlineColor")
+	},
+	outline: {
+		className: "ring",
+		shorthand: "ring",
+		values: "borders",
+		group: "Border",
+		transform(value) {
+			if (value === "none") return {
+				outline: "2px solid transparent",
+				outlineOffset: "2px"
+			};
+			return { outline: value };
+		}
+	},
+	outlineOffset: {
+		className: "ring-o",
+		shorthand: "ringOffset",
+		values: "spacing",
+		group: "Border"
+	}
+};
+var polyfill = {
+	appearance: {
+		className: "ap",
+		group: "Visibility",
+		transform(value) {
+			return {
+				WebkitAppearance: value,
+				appearance: value
+			};
+		}
+	},
+	backfaceVisibility: {
+		className: "bfv",
+		group: "Visibility",
+		transform(value) {
+			return {
+				WebkitBackfaceVisibility: value,
+				backfaceVisibility: value
+			};
+		}
+	},
+	clipPath: {
+		className: "cp-path",
+		group: "Other",
+		transform(value) {
+			return {
+				WebkitClipPath: value,
+				clipPath: value
+			};
+		}
+	},
+	hyphens: {
+		className: "hy",
+		group: "Other",
+		transform(value) {
+			return {
+				WebkitHyphens: value,
+				hyphens: value
+			};
+		}
+	},
+	textSizeAdjust: {
+		className: "txt-adj",
+		group: "Typography",
+		transform(value) {
+			return {
+				WebkitTextSizeAdjust: value,
+				textSizeAdjust: value
+			};
+		}
+	}
+};
+var widthValues = (theme) => ({
+	auto: "auto",
+	...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) => ({
+	auto: "auto",
+	...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",
+		group: "Width",
+		values: widthValues
+	},
+	inlineSize: {
+		className: "w-is",
+		group: "Width",
+		values: widthValues
+	},
+	minWidth: {
+		shorthand: "minW",
+		className: "min-w",
+		group: "Width",
+		values: widthValues
+	},
+	minInlineSize: {
+		className: "min-w-is",
+		group: "Width",
+		values: widthValues
+	},
+	maxWidth: {
+		shorthand: "maxW",
+		className: "max-w",
+		group: "Width",
+		values: widthValues
+	},
+	maxInlineSize: {
+		className: "max-w-is",
+		group: "Width",
+		values: widthValues
+	},
+	height: {
+		shorthand: "h",
+		className: "h",
+		group: "Height",
+		values: heightValues
+	},
+	blockSize: {
+		className: "h-bs",
+		group: "Height",
+		values: heightValues
+	},
+	minHeight: {
+		shorthand: "minH",
+		className: "min-h",
+		group: "Height",
+		values: heightValues
+	},
+	minBlockSize: {
+		className: "min-h-bs",
+		group: "Height",
+		values: heightValues
+	},
+	maxHeight: {
+		shorthand: "maxH",
+		className: "max-h",
+		group: "Height",
+		values: heightValues
+	},
+	maxBlockSize: {
+		className: "max-b",
+		group: "Height",
+		values: heightValues
+	},
+	boxSize: {
+		className: "size",
+		group: "Width",
+		values: widthValues,
+		transform(value) {
+			return {
+				width: value,
+				height: value
+			};
+		}
+	}
+};
+var marginValues = (theme) => ({
+	auto: "auto",
+	...theme("spacing")
+});
+var spacing$1 = {
+	padding: {
+		className: "p",
+		shorthand: "p",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingLeft: {
+		className: "pl",
+		shorthand: "pl",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingRight: {
+		className: "pr",
+		shorthand: "pr",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingTop: {
+		className: "pt",
+		shorthand: "pt",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingBottom: {
+		className: "pb",
+		shorthand: "pb",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingBlock: {
+		className: "py",
+		values: "spacing",
+		group: "Padding",
+		shorthand: ["py", "paddingY"]
+	},
+	paddingBlockEnd: {
+		className: "pbe",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingBlockStart: {
+		className: "pbs",
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingInline: {
+		className: "px",
+		values: "spacing",
+		group: "Padding",
+		shorthand: ["paddingX", "px"]
+	},
+	paddingInlineEnd: {
+		className: "pe",
+		shorthand: ["pe", "paddingEnd"],
+		values: "spacing",
+		group: "Padding"
+	},
+	paddingInlineStart: {
+		className: "ps",
+		shorthand: ["ps", "paddingStart"],
+		values: "spacing",
+		group: "Padding"
+	},
+	marginLeft: {
+		className: "ml",
+		shorthand: "ml",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginRight: {
+		className: "mr",
+		shorthand: "mr",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginTop: {
+		className: "mt",
+		shorthand: "mt",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginBottom: {
+		className: "mb",
+		shorthand: "mb",
+		values: marginValues,
+		group: "Margin"
+	},
+	margin: {
+		className: "m",
+		shorthand: "m",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginBlock: {
+		className: "my",
+		values: marginValues,
+		group: "Margin",
+		shorthand: ["my", "marginY"]
+	},
+	marginBlockEnd: {
+		className: "mbe",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginBlockStart: {
+		className: "mbs",
+		values: marginValues,
+		group: "Margin"
+	},
+	marginInline: {
+		className: "mx",
+		values: marginValues,
+		group: "Margin",
+		shorthand: ["mx", "marginX"]
+	},
+	marginInlineEnd: {
+		className: "me",
+		shorthand: ["me", "marginEnd"],
+		values: marginValues,
+		group: "Margin"
+	},
+	marginInlineStart: {
+		className: "ms",
+		shorthand: ["ms", "marginStart"],
+		values: marginValues,
+		group: "Margin"
+	},
+	spaceX: {
+		className: "sx",
+		values: marginValues,
+		property: "marginInlineStart",
+		group: "Margin",
+		transform(value) {
+			return { "& > :not([hidden]) ~ :not([hidden])": {
+				marginInlineStart: value,
+				marginInlineEnd: "0px"
+			} };
+		}
+	},
+	spaceY: {
+		className: "sy",
+		values: marginValues,
+		property: "marginBlockStart",
+		group: "Margin",
+		transform(value) {
+			return { "& > :not([hidden]) ~ :not([hidden])": {
+				marginTop: value,
+				marginBottom: "0px"
+			} };
+		}
+	}
+};
+var svg = {
+	fill: {
+		className: "fill",
+		values: "colors",
+		group: "Color",
+		transform: createColorMixTransform("fill")
+	},
+	stroke: {
+		className: "stk",
+		values: "colors",
+		group: "Color",
+		transform: createColorMixTransform("stroke")
+	},
+	strokeWidth: {
+		className: "stk-w",
+		values: "borderWidths",
+		group: "Border"
+	},
+	strokeDasharray: {
+		className: "stk-dsh",
+		group: "Border"
+	},
+	strokeDashoffset: {
+		className: "stk-do",
+		group: "Border"
+	},
+	strokeLinecap: {
+		className: "stk-lc",
+		group: "Border"
+	},
+	strokeLinejoin: {
+		className: "stk-lj",
+		group: "Border"
+	},
+	strokeMiterlimit: {
+		className: "stk-ml",
+		group: "Border"
+	},
+	strokeOpacity: {
+		className: "stk-op",
+		group: "Border"
+	}
+};
+var tables = {
+	borderCollapse: {
+		className: "bd-cl",
+		group: "Table"
+	},
+	borderSpacing: {
+		className: "bd-sp",
+		group: "Table",
+		values(theme) {
+			return {
+				...theme("spacing"),
+				auto: "var(--border-spacing-x) var(--border-spacing-y)"
+			};
+		}
+	},
+	borderSpacingX: {
+		className: "bd-sx",
+		values: "spacing",
+		group: "Table",
+		globalVars: { "--border-spacing-x": cssVar("<length>", "0") },
+		transform(value) {
+			return { "--border-spacing-x": value };
+		}
+	},
+	borderSpacingY: {
+		className: "bd-sy",
+		values: "spacing",
+		group: "Table",
+		globalVars: { "--border-spacing-y": cssVar("<length>", "0") },
+		transform(value) {
+			return { "--border-spacing-y": value };
+		}
+	},
+	tableLayout: {
+		className: "tbl",
+		group: "Table"
+	}
+};
+var length = () => cssVar("<length-percentage>", "0");
+var ROTATE_AXES = [
+	"x",
+	"y",
+	"z"
+].map((axis) => `var(--rotate-${axis},)`).join(" ");
+var positiveFractions = {
+	"1/2": "50%",
+	"1/3": "33.333333%",
+	"2/3": "66.666667%",
+	"1/4": "25%",
+	"2/4": "50%",
+	"3/4": "75%",
+	full: "100%"
+};
+var negativeFractions = Object.fromEntries(Object.entries(positiveFractions).map(([key, value]) => [`-${key}`, `-${value}`]));
+var fractions = {
+	...positiveFractions,
+	...negativeFractions
+};
+var transforms = {
+	transformOrigin: {
+		className: "trf-o",
+		group: "Transform"
+	},
+	transformBox: {
+		className: "trf-b",
+		group: "Transform"
+	},
+	transformStyle: {
+		className: "trf-s",
+		group: "Transform"
+	},
+	transform: {
+		className: "trf",
+		group: "Transform"
+	},
+	rotate: {
+		className: "rotate",
+		group: "Transform",
+		property: "rotate",
+		values: {
+			auto: "auto",
+			"auto-3d": "auto"
+		},
+		transform(value) {
+			return value === "auto" ? { transform: ROTATE_AXES } : { rotate: value };
+		}
+	},
+	rotateX: {
+		className: "rotate-x",
+		group: "Transform",
+		property: "rotate",
+		globalVars: { "--rotate-x": anyVar() },
+		transform(value) {
+			return { "--rotate-x": `rotateX(${value})` };
+		}
+	},
+	rotateY: {
+		className: "rotate-y",
+		group: "Transform",
+		property: "rotate",
+		globalVars: { "--rotate-y": anyVar() },
+		transform(value) {
+			return { "--rotate-y": `rotateY(${value})` };
+		}
+	},
+	rotateZ: {
+		className: "rotate-z",
+		group: "Transform",
+		property: "rotate",
+		globalVars: { "--rotate-z": anyVar() },
+		transform(value) {
+			return { "--rotate-z": `rotateZ(${value})` };
+		}
+	},
+	scale: {
+		className: "scale",
+		group: "Transform",
+		property: "scale",
+		values: { auto: "var(--scale-x) var(--scale-y)" }
+	},
+	scaleX: {
+		className: "scale-x",
+		group: "Transform",
+		globalVars: { "--scale-x": anyVar("1") },
+		transform(value) {
+			return { "--scale-x": value };
+		}
+	},
+	scaleY: {
+		className: "scale-y",
+		group: "Transform",
+		globalVars: { "--scale-y": anyVar("1") },
+		transform(value) {
+			return { "--scale-y": value };
+		}
+	},
+	translate: {
+		className: "translate",
+		group: "Transform",
+		property: "translate",
+		values: {
+			auto: "var(--translate-x) var(--translate-y)",
+			"auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)"
+		}
+	},
+	translateX: {
+		shorthand: "x",
+		className: "translate-x",
+		group: "Transform",
+		globalVars: { "--translate-x": length() },
+		values(theme) {
+			return {
+				...theme("spacing"),
+				...fractions
+			};
+		},
+		transform(value) {
+			return { "--translate-x": value };
+		}
+	},
+	translateY: {
+		shorthand: "y",
+		className: "translate-y",
+		group: "Transform",
+		globalVars: { "--translate-y": length() },
+		values(theme) {
+			return {
+				...theme("spacing"),
+				...fractions
+			};
+		},
+		transform(value) {
+			return { "--translate-y": value };
+		}
+	},
+	translateZ: {
+		shorthand: "z",
+		className: "translate-z",
+		group: "Transform",
+		globalVars: { "--translate-z": cssVar("<length>", "0") },
+		values(theme) {
+			return theme("spacing");
+		},
+		transform(value) {
+			return { "--translate-z": value };
+		}
+	}
+};
+var createTransition = (value) => ({
+	transitionProperty: `var(--transition-prop, ${value})`,
+	transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
+	transitionDuration: "var(--transition-duration, 150ms)"
+});
+var transitionMap = {
+	all: createTransition("all"),
+	common: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"),
+	size: createTransition("width, height, min-width, max-width, min-height, max-height"),
+	position: createTransition("left, right, top, bottom, inset, inset-inline, inset-block"),
+	background: createTransition("background, background-color, background-image, background-position"),
+	colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
+	opacity: createTransition("opacity"),
+	shadow: createTransition("box-shadow"),
+	transform: createTransition("transform")
+};
+var transitions = {
+	transitionTimingFunction: {
+		className: "trs-tmf",
+		values: "easings",
+		group: "Transition",
+		transform(value) {
+			return {
+				"--transition-easing": value,
+				transitionTimingFunction: value
+			};
+		}
+	},
+	transitionDelay: {
+		className: "trs-dly",
+		values: "durations",
+		group: "Transition"
+	},
+	transitionDuration: {
+		className: "trs-dur",
+		values: "durations",
+		group: "Transition",
+		transform(value) {
+			return {
+				"--transition-duration": value,
+				transitionDuration: value
+			};
+		}
+	},
+	transitionProperty: {
+		className: "trs-prop",
+		group: "Transition",
+		values: {
+			common: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+			colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke",
+			size: "width, height, min-width, max-width, min-height, max-height",
+			position: "left, right, top, bottom, inset, inset-inline, inset-block",
+			background: "background, background-color, background-image, background-position"
+		},
+		transform(value) {
+			return {
+				"--transition-prop": value,
+				transitionProperty: value
+			};
+		}
+	},
+	transition: {
+		className: "trs",
+		values: Object.keys(transitionMap),
+		group: "Transition",
+		transform(value) {
+			return transitionMap[value] ?? { transition: value };
+		}
+	},
+	animation: {
+		className: "anim",
+		values: "animations",
+		group: "Animation"
+	},
+	animationName: {
+		className: "anim-n",
+		values: "keyframes",
+		group: "Animation"
+	},
+	animationTimingFunction: {
+		className: "anim-tmf",
+		values: "easings",
+		group: "Animation"
+	},
+	animationDuration: {
+		className: "anim-dur",
+		values: "durations",
+		group: "Animation"
+	},
+	animationDelay: {
+		className: "anim-dly",
+		values: "durations",
+		group: "Animation"
+	},
+	animationPlayState: {
+		className: "anim-ps",
+		group: "Animation"
+	},
+	animationComposition: {
+		className: "anim-comp",
+		group: "Animation"
+	},
+	animationFillMode: {
+		className: "anim-fm",
+		group: "Animation"
+	},
+	animationDirection: {
+		className: "anim-dir",
+		group: "Animation"
+	},
+	animationIterationCount: {
+		className: "anim-ic",
+		group: "Animation"
+	},
+	animationRange: {
+		className: "anim-r",
+		group: "Animation"
+	},
+	animationState: {
+		className: "anim-s",
+		group: "Animation"
+	},
+	animationRangeStart: {
+		className: "anim-rs",
+		group: "Animation"
+	},
+	animationRangeEnd: {
+		className: "anim-re",
+		group: "Animation"
+	},
+	animationTimeline: {
+		className: "anim-tl",
+		group: "Animation"
+	}
+};
+var typography = {
+	color: {
+		className: "c",
+		values: "colors",
+		group: "Color",
+		transform: createColorMixTransform("color")
+	},
+	fontFamily: {
+		className: "ff",
+		values: "fonts",
+		group: "Typography"
+	},
+	fontSize: {
+		className: "fs",
+		values: "fontSizes",
+		group: "Typography"
+	},
+	fontSizeAdjust: {
+		className: "fs-a",
+		group: "Typography"
+	},
+	fontPalette: {
+		className: "fp",
+		group: "Typography"
+	},
+	fontKerning: {
+		className: "fk",
+		group: "Typography"
+	},
+	fontFeatureSettings: {
+		className: "ff-s",
+		group: "Typography"
+	},
+	fontWeight: {
+		className: "fw",
+		values: "fontWeights",
+		group: "Typography"
+	},
+	fontSmoothing: {
+		className: "fsmt",
+		group: "Typography",
+		values: {
+			antialiased: "antialiased",
+			"subpixel-antialiased": "auto"
+		},
+		transform(value) {
+			return { WebkitFontSmoothing: value };
+		}
+	},
+	fontVariant: {
+		className: "fv",
+		group: "Typography"
+	},
+	fontVariantAlternates: {
+		className: "fv-alt",
+		group: "Typography"
+	},
+	fontVariantCaps: {
+		className: "fv-caps",
+		group: "Typography"
+	},
+	fontVariationSettings: {
+		className: "fv-s",
+		group: "Typography"
+	},
+	fontVariantNumeric: {
+		className: "fv-num",
+		group: "Typography"
+	},
+	letterSpacing: {
+		className: "ls",
+		values: "letterSpacings",
+		group: "Typography"
+	},
+	lineHeight: {
+		className: "lh",
+		values: "lineHeights",
+		group: "Typography"
+	},
+	textAlign: {
+		className: "ta",
+		group: "Typography"
+	},
+	textDecoration: {
+		className: "td",
+		group: "Typography"
+	},
+	textDecorationColor: {
+		className: "td-c",
+		values: "colors",
+		transform: createColorMixTransform("textDecorationColor"),
+		group: "Typography"
+	},
+	textEmphasisColor: {
+		className: "te-c",
+		values: "colors",
+		transform: createColorMixTransform("textEmphasisColor"),
+		group: "Typography"
+	},
+	textDecorationStyle: {
+		className: "td-s",
+		group: "Typography"
+	},
+	textDecorationThickness: {
+		className: "td-t",
+		group: "Typography"
+	},
+	textUnderlineOffset: {
+		className: "tu-o",
+		group: "Typography"
+	},
+	textTransform: {
+		className: "tt",
+		group: "Typography"
+	},
+	textIndent: {
+		className: "ti",
+		group: "Typography",
+		values: "spacing"
+	},
+	textShadow: {
+		className: "tsh",
+		values: "shadows",
+		group: "Typography"
+	},
+	textShadowColor: {
+		shorthand: "textShadowColor",
+		className: "tsh-c",
+		values: "colors",
+		transform: createColorMixTransform("--text-shadow-color"),
+		group: "Typography"
+	},
+	WebkitTextFillColor: {
+		className: "wktf-c",
+		values: "colors",
+		transform: createColorMixTransform("WebkitTextFillColor"),
+		group: "Typography"
+	},
+	textOverflow: {
+		className: "tov",
+		group: "Typography"
+	},
+	verticalAlign: {
+		className: "va",
+		group: "Typography"
+	},
+	wordBreak: {
+		className: "wb",
+		group: "Typography"
+	},
+	textWrap: {
+		className: "tw",
+		group: "Typography"
+	},
+	truncate: {
+		className: "trunc",
+		values: { type: "boolean" },
+		group: "Typography",
+		transform(value) {
+			if (!value) return {};
+			return {
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			};
+		}
+	},
+	lineClamp: {
+		className: "lc",
+		group: "Typography",
+		transform(value) {
+			if (value === "none") return { WebkitLineClamp: "unset" };
+			return {
+				overflow: "hidden",
+				display: "-webkit-box",
+				WebkitLineClamp: value,
+				WebkitBoxOrient: "vertical"
+			};
+		}
+	}
+};
+var utilities = Object.assign({}, layout, mask, display, flexGrid, spacing$1, outline, focusRing, divide, sizing, typography, list, background, backgroundGradients, border, effects, tables, transitions, transforms, interactivity, svg, helpers, polyfill, container2, cursor);
+var definePreset = (preset2) => preset2;
+var index_default = definePreset({
+	name: "@pandacss/preset-base",
+	conditions,
+	utilities,
+	patterns
+});
+//#endregion
+//#region packages/preset/src/tokens/breakpoints.ts
+const breakpoints = {
+	"3xs": "360px",
+	"2xs": "420px",
+	"xs": "520px",
+	"sm": "640px",
+	"md": "768px",
+	"lg": "1024px",
+	"xl": "1280px",
+	"2xl": "1440px",
+	"3xl": "1640px",
+	"4xl": "1920px"
+};
+//#endregion
+//#region packages/preset/src/tokens/colors.ts
+const colors$1 = defineTokens.colors({
+	white: {
+		value: "#FFFFFF",
+		description: "This is the primary white color used in our design system"
+	},
+	black: {
+		value: "#000000",
+		description: "This is the primary black color used in our design system"
+	},
+	transparent: {
+		value: "#00000000",
+		description: "This is the transparent color used in our design system"
+	},
+	brand: {
+		50: {
+			value: "#FDF1EB",
+			description: "Lightest brand tint, referenced as primary-pale"
+		},
+		100: { value: "#FFD9CE" },
+		200: { value: "#FFBAAA" },
+		300: { value: "#FD9B85" },
+		400: {
+			value: "#f87960",
+			description: "The Webflare brand color, referenced as primary"
+		},
+		500: { value: "#E75F45" },
+		600: { value: "#C6543F" },
+		700: { value: "#A44C3B" },
+		800: { value: "#834235" },
+		900: { value: "#66382E" }
+	},
+	red: {
+		50: { value: "#fef2f2" },
+		100: { value: "#fee2e2" },
+		200: { value: "#fecaca" },
+		300: { value: "#fca5a5" },
+		400: { value: "#f87171" },
+		500: { value: "#ef4444" },
+		600: { value: "#dc2626" },
+		700: { value: "#b91c1c" },
+		800: { value: "#991b1b" },
+		900: { value: "#7f1d1d" },
+		950: { value: "#450a0a" }
+	},
+	green: {
+		50: { value: "#f0fdf4" },
+		100: { value: "#dcfce7" },
+		200: { value: "#bbf7d0" },
+		300: { value: "#86efac" },
+		400: { value: "#4ade80" },
+		500: { value: "#22c55e" },
+		600: { value: "#16a34a" },
+		700: { value: "#15803d" },
+		800: { value: "#166534" },
+		900: { value: "#14532d" },
+		950: { value: "#052e16" }
+	},
+	blue: {
+		50: { value: "#eff6ff" },
+		100: { value: "#dbeafe" },
+		200: { value: "#bfdbfe" },
+		300: { value: "#93c5fd" },
+		400: { value: "#60a5fa" },
+		500: { value: "#3b82f6" },
+		600: { value: "#2563eb" },
+		700: { value: "#1d4ed8" },
+		800: { value: "#1e40af" },
+		900: { value: "#1e3a8a" },
+		950: { value: "#172554" }
+	},
+	yellow: {
+		50: { value: "#fffbeb" },
+		100: { value: "#fef3c7" },
+		200: { value: "#fde68a" },
+		300: { value: "#fcd34d" },
+		400: { value: "#fbbf24" },
+		500: { value: "#f59e0b" },
+		600: { value: "#d97706" },
+		700: { value: "#b45309" },
+		800: { value: "#92400e" },
+		900: { value: "#78350f" },
+		950: { value: "#451a03" }
+	},
+	grey: {
+		50: { value: "#fafafa" },
+		100: { value: "#e5e5e5" },
+		200: { value: "#d4d4d4" },
+		300: { value: "#a3a3a3" },
+		400: { value: "#737373" },
+		500: { value: "#525252" },
+		600: { value: "#404040" },
+		700: { value: "#333333" },
+		800: { value: "#262626" },
+		900: { value: "#1d1d1d" },
+		950: {
+			value: "#171717",
+			description: "This is the darkest grey color in our design system and replaces black"
+		}
+	}
+});
+//#endregion
+//#region packages/preset/src/tokens/motion.ts
+const durations = defineTokens.durations({
+	fast: { value: "150ms" },
+	normal: { value: "300ms" },
+	slow: { value: "600ms" }
+});
+const easings = defineTokens.easings({
+	default: { value: "cubic-bezier(0.4, 0, 0.2, 1)" },
+	out: { value: "cubic-bezier(0.16, 1, 0.3, 1)" }
+});
+//#endregion
+//#region packages/preset/src/tokens/radii.ts
+const radii = defineTokens.radii({
+	"sm": { value: "4px" },
+	"md": { value: "6px" },
+	"lg": { value: "10px" },
+	"xl": { value: "16px" },
+	"2xl": { value: "20px" },
+	"3xl": { value: "24px" },
+	"4xl": { value: "32px" },
+	"5xl": { value: "40px" },
+	"pill": { value: "99rem" }
+});
+//#endregion
+//#region packages/preset/src/tokens/sizes.ts
+/**
+* `sizes.container` is a width token (`maxW: 'container'`). It is unrelated to
+* the `container` pattern and to the `containers` scale for container queries.
+*/
+const sizes = defineTokens.sizes({
+	container: { value: "1200px" },
+	prose: { value: "44rem" }
+});
+//#endregion
+//#region packages/preset/src/tokens/spacing.ts
+const spacing = defineTokens.spacing({
+	"3xs": { value: "2px" },
+	"2xs": { value: "4px" },
+	"xs": { value: "8px" },
+	"sm": { value: "12px" },
+	"md": { value: "16px" },
+	"lg": { value: "20px" },
+	"xl": { value: "24px" },
+	"2xl": { value: "32px" },
+	"3xl": { value: "40px" },
+	"4xl": { value: "48px" },
+	"5xl": { value: "56px" },
+	"6xl": { value: "64px" },
+	"7xl": { value: "72px" },
+	"8xl": { value: "80px" },
+	"9xl": { value: "96px" },
+	"10xl": { value: "128px" },
+	"11xl": { value: "144px" },
+	"12xl": { value: "160px" }
+});
+//#endregion
+//#region packages/preset/src/tokens/typography.ts
+/**
+* Figtree is the brand sans. The package does not ship the font files.
+* `serif` and `mono` match the system stacks from `@pandacss/preset-panda`
+* so a design-system consumer is not missing those tokens.
+* Values are strings (not arrays) so a later `extend` replaces the stack
+* instead of appending to it.
+*/
+const fonts$1 = defineTokens.fonts({
+	sans: {
+		value: "Figtree, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
+		description: "Brand sans. Load the Figtree face in the app. Falls back to the system sans when the face is not available."
+	},
+	serif: {
+		value: "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
+		description: "System serif. This design system does not ship a brand serif face."
+	},
+	mono: {
+		value: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+		description: "System monospace. This design system does not ship a brand mono face."
+	}
+});
+const fontSizes = defineTokens.fontSizes({
+	"xs": { value: "12px" },
+	"sm": { value: "14px" },
+	"md": { value: "16px" },
+	"lg": { value: "20px" },
+	"xl": { value: "24px" },
+	"2xl": { value: "32px" },
+	"3xl": { value: "40px" },
+	"4xl": { value: "48px" },
+	"5xl": { value: "64px" }
+});
+const fontWeights = defineTokens.fontWeights({
+	regular: {
+		value: "400",
+		description: "Same weight as normal"
+	},
+	normal: { value: "400" },
+	medium: { value: "500" },
+	semibold: { value: "600" },
+	bold: { value: "700" },
+	extrabold: { value: "800" }
+});
+const lineHeights = defineTokens.lineHeights({
+	none: { value: "1" },
+	heading: { value: "1.08" },
+	tight: { value: "1.25" },
+	normal: { value: "1.5" },
+	relaxed: { value: "1.65" }
+});
+const letterSpacings = defineTokens.letterSpacings({
+	tighter: { value: "-0.035em" },
+	tight: { value: "-0.02em" },
+	normal: { value: "0" },
+	wide: { value: "0.08em" }
+});
+//#endregion
+//#region packages/preset/src/tokens/semantic-tokens.ts
+/**
+* Light is the base. Dark applies inside a `.dark` class (`_dark`) and when the
+* OS prefers dark (`_osDark`), so every dark value is written under both.
+*
+* A value that references a mode-dependent token repeats the reference under
+* the dark conditions too. Otherwise the CSS variable is resolved once at the
+* root, and an element inside `.dark` would keep the light result.
+*/
+const mode = (light, dark) => ({
+	base: light,
+	_dark: dark,
+	_osDark: dark
+});
+const subtleMix = (light, dark, status = "{opacity.color.status}", neutral = "{opacity.color.neutral}") => ({ value: mode(`color-mix(in srgb, {colors.${light}} ${status}, {colors.grey.400} ${neutral})`, `color-mix(in srgb, {colors.${dark}} ${status}, {colors.grey.800} ${neutral})`) });
+const opacity = defineSemanticTokens.opacity({ color: {
+	status: {
+		DEFAULT: { value: mode("80%", "20%") },
+		lighter: { value: "25%" }
+	},
+	neutral: {
+		DEFAULT: { value: mode("5%", "80%") },
+		lighter: { value: mode("25%", "20%") }
+	}
+} });
+const fonts = defineSemanticTokens.fonts({ body: {
+	value: "{fonts.sans}",
+	description: "Document face. Alias of the Figtree sans stack."
+} });
+const colors = defineSemanticTokens.colors({
+	"primary": {
+		value: "{colors.brand.400}",
+		description: "The brand color. Same in both modes."
+	},
+	"primary-pale": {
+		value: "{colors.brand.50}",
+		description: "Pale brand fill"
+	},
+	"danger": {
+		DEFAULT: { value: mode("{colors.red.600}", "{colors.red.400}") },
+		subtle: {
+			DEFAULT: subtleMix("red.200", "red.400"),
+			light: subtleMix("red.400", "red.200", "{opacity.color.status.lighter}", "{opacity.color.neutral.lighter}")
+		},
+		text: { value: "{colors.red.900}" }
+	},
+	"success": {
+		DEFAULT: { value: mode("{colors.green.600}", "{colors.green.400}") },
+		subtle: {
+			DEFAULT: subtleMix("green.200", "green.400"),
+			light: subtleMix("green.400", "green.200", "{opacity.color.status.lighter}", "{opacity.color.neutral.lighter}")
+		},
+		text: { value: "{colors.green.900}" }
+	},
+	"warning": {
+		DEFAULT: { value: mode("{colors.yellow.600}", "{colors.yellow.400}") },
+		subtle: {
+			DEFAULT: subtleMix("yellow.200", "yellow.400"),
+			light: subtleMix("yellow.400", "yellow.200", "{opacity.color.status.lighter}", "{opacity.color.neutral.lighter}")
+		},
+		text: { value: "{colors.yellow.900}" }
+	},
+	"info": {
+		DEFAULT: { value: mode("{colors.blue.600}", "{colors.blue.400}") },
+		subtle: {
+			DEFAULT: subtleMix("blue.200", "blue.400"),
+			light: subtleMix("blue.400", "blue.200", "{opacity.color.status.lighter}", "{opacity.color.neutral.lighter}")
+		},
+		text: { value: "{colors.blue.900}" }
+	},
+	"neutral": {
+		DEFAULT: {
+			value: mode("{colors.grey.800}", "{colors.white}"),
+			description: "Default text color"
+		},
+		inverse: { value: mode("{colors.white}", "{colors.grey.800}") },
+		light: { value: "{colors.grey.400}" },
+		subtle: {
+			value: mode("{colors.grey.100}", "{colors.grey.800}"),
+			description: "Quiet neutral fill: default badge, list marker, highlighted option, open accordion item"
+		}
+	},
+	"surface": {
+		DEFAULT: {
+			value: mode("{colors.white}", "{colors.grey.950}"),
+			description: "Background of fields, menus, and dialogs"
+		},
+		raised: {
+			value: mode("{colors.white}", "{colors.grey.900}"),
+			description: "Background of panels that sit on the page, such as the prompt form"
+		}
+	},
+	"surface-muted": {
+		value: mode("{colors.grey.50}", "{colors.grey.900}"),
+		description: "Muted page section background"
+	},
+	"border": {
+		DEFAULT: {
+			value: mode("{colors.grey.200}", "{colors.grey.600}"),
+			description: "Border of fields and menus"
+		},
+		hover: {
+			value: mode("{colors.grey.300}", "{colors.grey.400}"),
+			description: "Border of a hovered field"
+		},
+		subtle: {
+			value: mode("{colors.grey.100}", "{colors.grey.800}"),
+			description: "Dividers and dialog borders"
+		},
+		card: {
+			value: mode("{colors.grey.100}", "{colors.grey.700}"),
+			description: "Border of cards, pricing cards, and the tab bar"
+		}
+	},
+	"muted": {
+		value: mode("{colors.neutral.light}", "{colors.grey.300}"),
+		description: "Secondary copy"
+	},
+	"text": {
+		muted: {
+			value: mode("{colors.muted}", "{colors.muted}"),
+			description: "Secondary copy: descriptions and helper text"
+		},
+		placeholder: {
+			value: mode("{colors.black/75}", "{colors.white/75}"),
+			description: "Placeholder text and quiet icons inside a field"
+		}
+	},
+	"loader": { track: {
+		value: mode("{colors.black/17.5}", "{colors.white/17.5}"),
+		description: "Ring of the loader, behind the brand arc"
+	} },
+	"input-border": { value: mode("{colors.border}", "{colors.border}") },
+	"input-bg": { value: mode("{colors.surface}", "{colors.surface}") },
+	"input-disabled-bg": { value: mode("{colors.grey.50}", "{colors.grey.800}") },
+	"input-color": { value: "{colors.grey.400}" },
+	"accent-subtle": { value: mode("{colors.brand.50}", "#f879601a") },
+	"accent-border": { value: mode("{colors.brand.100}", "#f8796040") },
+	"accent-text": { value: mode("{colors.brand.600}", "{colors.brand.300}") }
+});
+/**
+* Focus rings point at color tokens. `card` and `float` change per mode and use
+* raw `rgb()` values, as on the website.
+*/
+const shadows = defineSemanticTokens.shadows({
+	"focus": { value: "0 0 0 4px color-mix(in srgb, {colors.primary} 30%, transparent)" },
+	"focus-danger": { value: "0 0 0 4px color-mix(in srgb, {colors.red.600} 30%, transparent)" },
+	"focus-success": { value: "0 0 0 4px color-mix(in srgb, {colors.green.600} 30%, transparent)" },
+	"card": { value: mode("0 1px 2px rgb(23 23 23 / 0.04), 0 12px 32px -12px rgb(23 23 23 / 0.12)", "0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.6)") },
+	"float": { value: mode("0 2px 4px rgb(23 23 23 / 0.04), 0 32px 64px -24px rgb(23 23 23 / 0.22)", "0 2px 4px rgb(0 0 0 / 0.5), 0 32px 64px -24px rgb(0 0 0 / 0.8)") }
+});
+//#endregion
+//#region packages/preset/src/animation.ts
+const animationStyles = defineAnimationStyles({
+	slideDown: { value: {
+		animationName: "slideDown",
+		animationDuration: "300ms"
+	} },
+	slideUp: { value: {
+		animationName: "slideUp",
+		animationDuration: "300ms"
+	} },
+	progressIndeterminate: { value: {
+		animationName: "progressIndeterminate",
+		animationDuration: "1.4s",
+		animationTimingFunction: "ease-in-out",
+		animationIterationCount: "infinite"
+	} }
+});
+const keyframes = defineKeyframes({
+	slideDown: {
+		"0%": {
+			height: "0",
+			visibility: "hidden"
+		},
+		"100%": {
+			height: "auto",
+			visibility: "visible"
+		}
+	},
+	slideUp: {
+		"0%": {
+			height: "auto",
+			visibility: "visible"
+		},
+		"100%": {
+			height: "0",
+			visibility: "hidden"
+		}
+	},
+	flyoutIn: {
+		"0%": { opacity: "0" },
+		"100%": { opacity: "1" }
+	},
+	flyoutOut: {
+		"0%": { opacity: "1" },
+		"100%": { opacity: "0" }
+	},
+	progressIndeterminate: {
+		"0%": { transform: "translateX(-100%)" },
+		"100%": { transform: "translateX(350%)" }
+	}
+});
+//#endregion
+//#region \0panda-lib-preset-entry
+const __panda_lib_resolved = await defineConfig({
+	preflight: true,
+	presets: [definePreset$1({
+		name: "webflare-design-preset",
+		presets: [index_default],
+		theme: {
+			tokens: {
+				colors: colors$1,
+				spacing,
+				radii,
+				fonts: fonts$1,
+				fontSizes,
+				fontWeights,
+				lineHeights,
+				letterSpacings,
+				sizes,
+				durations,
+				easings
+			},
+			semanticTokens: {
+				colors,
+				fonts,
+				opacity,
+				shadows
+			},
+			extend: {
+				breakpoints,
+				containers: {
+					"xs": "320px",
+					"sm": "384px",
+					"md": "448px",
+					"lg": "512px",
+					"xl": "576px",
+					"2xl": "672px",
+					"3xl": "768px",
+					"4xl": "896px",
+					"5xl": "1024px",
+					"6xl": "1152px",
+					"7xl": "1280px",
+					"8xl": "1440px"
+				},
+				keyframes,
+				animationStyles
+			}
+		},
+		conditions: { extend: {
+			light: ".light &, .light&",
+			dark: ".dark &, .dark&",
+			hasNext: "&:has(+ *)"
+		} },
+		patterns: { extend: { container: { transform({ maxWidth, px }) {
+			return {
+				position: "relative",
+				maxWidth: {
+					"base": "360px",
+					"3xs": "360px",
+					"2xs": "400px",
+					"xs": "500px",
+					"sm": "620px",
+					"md": "740px",
+					"lg": "1000px",
+					"xl": "1200px",
+					"2xl": "1400px",
+					"3xl": "1600px",
+					...maxWidth
+				},
+				mx: "auto",
+				px: {
+					base: "lg",
+					...px
+				},
+				transition: "max-width 200ms"
+			};
+		} } } }
+	})],
+	include: ["./packages/components/src/**/*.{js,jsx,ts,tsx,vue}"],
+	outdir: "dist/styled-system",
+	forceImportExtension: true
+});
+if (!((value) => {
+	if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+})(__panda_lib_resolved)) throw new Error("Config must export or return an object.");
+const { designSystem, include, exclude, outdir, cwd, watch, clean, gitignore, importMap, ...preset } = __panda_lib_resolved;
+//#endregion
+export { preset as default };