@pyreon/unistyle 0.0.2

package/lib/index.js

@@ -0,0 +1,1826 @@
+import { Provider as Provider$1, config, context, isEmpty, set } from "@pyreon/ui-core";
+
+//#region src/responsive/breakpoints.ts
+const breakpoints = {
+	rootSize: 16,
+	breakpoints: {
+		xs: 0,
+		sm: 576,
+		md: 768,
+		lg: 992,
+		xl: 1200,
+		xxl: 1440
+	}
+};
+
+//#endregion
+//#region src/responsive/createMediaQueries.ts
+const createMediaQueries = ((props) => {
+	const { breakpoints, rootSize, css } = props;
+	return Object.keys(breakpoints).reduce((acc, key) => {
+		const breakpointValue = breakpoints[key];
+		if (breakpointValue === 0) acc[key] = (...args) => css(...args);
+		else if (breakpointValue != null) {
+			const emSize = breakpointValue / rootSize;
+			acc[key] = (...args) => css`
+          @media only screen and (min-width: ${emSize}em) {
+            ${css(...args)};
+          }
+        `;
+		}
+		return acc;
+	}, {});
+});
+
+//#endregion
+//#region src/responsive/normalizeTheme.ts
+const assignToBreakpointKey = (breakpoints) => (valueFn) => {
+	const result = {};
+	breakpoints.forEach((item, i) => {
+		result[item] = valueFn(item, i, breakpoints, result);
+	});
+	return result;
+};
+const handleArrayCb = (arr) => (_, i) => {
+	const currentValue = arr[i];
+	const lastValue = arr[arr.length - 1];
+	return currentValue ?? lastValue;
+};
+const handleObjectCb = (obj) => (bp, i, bps, res) => {
+	const currentValue = obj[bp];
+	const prevBp = bps[i - 1];
+	const previousValue = prevBp != null ? res[prevBp] : void 0;
+	if (currentValue != null) return currentValue;
+	return previousValue;
+};
+const handleValueCb = (value) => () => value;
+const shouldNormalize = (props) => Object.values(props).some((item) => typeof item === "object" || Array.isArray(item));
+const normalizeTheme = ({ theme, breakpoints }) => {
+	if (!shouldNormalize(theme)) return theme;
+	const getBpValues = assignToBreakpointKey(breakpoints);
+	const result = {};
+	Object.entries(theme).forEach(([key, value]) => {
+		if (value == null) return;
+		if (Array.isArray(value)) result[key] = getBpValues(handleArrayCb(value));
+		else if (typeof value === "object") result[key] = getBpValues(handleObjectCb(value));
+		else result[key] = getBpValues(handleValueCb(value));
+	});
+	return result;
+};
+
+//#endregion
+//#region src/responsive/optimizeTheme.ts
+const shallowEqual = (a, b) => {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) if (a[key] !== b[key]) return false;
+	return true;
+};
+const optimizeTheme = ({ theme, breakpoints }) => {
+	const result = {};
+	for (let i = 0; i < breakpoints.length; i++) {
+		const key = breakpoints[i];
+		const previousBreakpoint = breakpoints[i - 1];
+		const current = theme[key];
+		if (current && (i === 0 || !shallowEqual(theme[previousBreakpoint], current))) result[key] = current;
+	}
+	return result;
+};
+
+//#endregion
+//#region src/responsive/transformTheme.ts
+const removeUnexpectedKeys = (obj, keys) => {
+	const result = {};
+	keys.forEach((bp) => {
+		const value = obj[bp];
+		if (value) result[bp] = value;
+	});
+	return result;
+};
+const transformTheme = ({ theme, breakpoints }) => {
+	const result = {};
+	if (isEmpty(theme) || isEmpty(breakpoints)) return result;
+	Object.entries(theme).forEach(([key, value]) => {
+		if (Array.isArray(value) && value.length > 0) value.forEach((child, i) => {
+			const indexBreakpoint = breakpoints[i];
+			if (indexBreakpoint == null) return;
+			set(result, [indexBreakpoint, key], child);
+		});
+		else if (typeof value === "object" && value !== null) Object.entries(value).forEach(([childKey, childValue]) => {
+			set(result, [childKey, key], childValue);
+		});
+		else if (value != null) {
+			const firstBreakpoint = breakpoints[0];
+			if (firstBreakpoint == null) return;
+			set(result, [firstBreakpoint, key], value);
+		}
+	});
+	return removeUnexpectedKeys(result, breakpoints);
+};
+
+//#endregion
+//#region src/responsive/makeItResponsive.ts
+const themeCache = /* @__PURE__ */ new WeakMap();
+const makeItResponsive = ({ theme: customTheme, key = "", css, styles, normalize = true }) => ({ theme = {}, ...props }) => {
+	const internalTheme = customTheme || props[key];
+	if (isEmpty(internalTheme)) return "";
+	const { rootSize, breakpoints, __PYREON__, ...restTheme } = theme;
+	const renderStyles = (styleTheme) => styles({
+		theme: styleTheme,
+		css,
+		rootSize,
+		globalTheme: restTheme
+	});
+	if (isEmpty(breakpoints) || isEmpty(__PYREON__)) return css`
+        ${renderStyles(internalTheme)}
+      `;
+	const { media, sortedBreakpoints } = __PYREON__;
+	let optimizedTheme;
+	const cached = themeCache.get(internalTheme);
+	if (cached && cached.breakpoints === sortedBreakpoints) optimizedTheme = cached.optimized;
+	else {
+		let helperTheme = internalTheme;
+		if (normalize) helperTheme = normalizeTheme({
+			theme: internalTheme,
+			breakpoints: sortedBreakpoints
+		});
+		optimizedTheme = optimizeTheme({
+			theme: transformTheme({
+				theme: helperTheme,
+				breakpoints: sortedBreakpoints
+			}),
+			breakpoints: sortedBreakpoints
+		});
+		themeCache.set(internalTheme, {
+			breakpoints: sortedBreakpoints,
+			optimized: optimizedTheme
+		});
+	}
+	return sortedBreakpoints.map((item) => {
+		const breakpointTheme = optimizedTheme[item];
+		if (!breakpointTheme || !media) return "";
+		const result = renderStyles(breakpointTheme);
+		return media[item]`
+        ${result};
+      `;
+	});
+};
+
+//#endregion
+//#region src/responsive/sortBreakpoints.ts
+const sortBreakpoints = (breakpoints) => {
+	return Object.keys(breakpoints).sort((a, b) => (breakpoints[a] ?? 0) - (breakpoints[b] ?? 0));
+};
+
+//#endregion
+//#region src/context.tsx
+/**
+* Unistyle Provider — wraps the core Provider and enriches the theme
+* with pre-computed sorted breakpoints and media-query tagged-template
+* helpers consumed by `makeItResponsive`.
+*/
+function Provider(props) {
+	const { theme, children } = props;
+	const { breakpoints, rootSize } = theme;
+	const sortedBreakpoints = breakpoints && !isEmpty(breakpoints) ? sortBreakpoints(breakpoints) : void 0;
+	const media = breakpoints && !isEmpty(breakpoints) ? createMediaQueries({
+		breakpoints,
+		css: config.css,
+		rootSize
+	}) : void 0;
+	return Provider$1({
+		theme: {
+			...theme,
+			__PYREON__: {
+				sortedBreakpoints,
+				media
+			}
+		},
+		children
+	});
+}
+
+//#endregion
+//#region src/styles/alignContent.ts
+const ALIGN_CONTENT_MAP_SHARED = {
+	center: "center",
+	spaceBetween: "space-between",
+	spaceAround: "space-around",
+	block: "stretch"
+};
+const ALIGN_CONTENT_MAP_X = {
+	left: "flex-start",
+	right: "flex-end",
+	...ALIGN_CONTENT_MAP_SHARED
+};
+const ALIGN_CONTENT_MAP_Y = {
+	top: "flex-start",
+	bottom: "flex-end",
+	...ALIGN_CONTENT_MAP_SHARED
+};
+const ALIGN_CONTENT_DIRECTION = {
+	inline: "row",
+	reverseInline: "row-reverse",
+	rows: "column",
+	reverseRows: "column-reverse"
+};
+const alignContent = (attrs) => {
+	const { direction, alignX, alignY } = attrs;
+	if (isEmpty(attrs) || !direction || !alignX || !alignY) return null;
+	const isReverted = ["inline", "reverseInline"].includes(direction);
+	const dir = ALIGN_CONTENT_DIRECTION[direction];
+	const x = ALIGN_CONTENT_MAP_X[alignX];
+	const y = ALIGN_CONTENT_MAP_Y[alignY];
+	return `flex-direction: ${dir}; align-items: ${isReverted ? y : x}; justify-content: ${isReverted ? x : y};`;
+};
+
+//#endregion
+//#region src/styles/extendCss.ts
+const simpleCss = (strings, ...values) => {
+	let result = "";
+	for (let i = 0; i < strings.length; i++) {
+		result += strings[i];
+		if (i < values.length) result += String(values[i] ?? "");
+	}
+	return result;
+};
+const extendCss = (styles) => {
+	if (!styles) return "";
+	if (typeof styles === "function") return styles(simpleCss);
+	return styles;
+};
+
+//#endregion
+//#region src/units/stripUnit.ts
+const stripUnit = ((value, unitReturn) => {
+	const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
+	if (typeof value !== "string") return unitReturn ? [value, void 0] : value;
+	const matchedValue = value.match(cssRegex);
+	if (unitReturn) {
+		if (matchedValue) return [parseFloat(value), matchedValue[2]];
+		return [value, void 0];
+	}
+	if (matchedValue) return parseFloat(value);
+	return value;
+});
+
+//#endregion
+//#region src/units/value.ts
+const isNotValue = (val) => !val && val !== 0;
+const value = (param, rootSize = 16, outputUnit = "rem") => {
+	if (isNotValue(param)) return null;
+	const p = param;
+	const [val, unit] = stripUnit(p, true);
+	if (isNotValue(val)) return null;
+	if (val === 0 || typeof val === "string") return p;
+	const canConvert = rootSize && !Number.isNaN(val);
+	if (canConvert && !unit && outputUnit === "px") return `${val}${outputUnit}`;
+	if (canConvert && !unit) return `${val / rootSize}rem`;
+	if (canConvert && unit === "px" && outputUnit === "rem") return `${val / rootSize}rem`;
+	if (unit) return p;
+	return `${val}${outputUnit}`;
+};
+
+//#endregion
+//#region src/units/values.ts
+const getValueOf = (...args) => args.find((v) => typeof v !== "undefined" && v !== null);
+const values = (items, rootSize, outputUnit) => {
+	const param = getValueOf(...items);
+	if (Array.isArray(param)) return param.map((item) => value(item, rootSize, outputUnit)).join(" ");
+	return value(param, rootSize, outputUnit);
+};
+
+//#endregion
+//#region src/styles/shorthands/borderRadius.ts
+const isValidValue$1 = (v) => !!v || v === 0;
+const hasAnyValue$1 = (v) => isValidValue$1(v.full) || isValidValue$1(v.top) || isValidValue$1(v.bottom) || isValidValue$1(v.left) || isValidValue$1(v.right) || isValidValue$1(v.topLeft) || isValidValue$1(v.topRight) || isValidValue$1(v.bottomLeft) || isValidValue$1(v.bottomRight);
+const resolveCorners = (v) => {
+	const corners = [
+		v.full,
+		v.full,
+		v.full,
+		v.full
+	];
+	if (isValidValue$1(v.top)) {
+		corners[0] = v.top;
+		corners[1] = v.top;
+	}
+	if (isValidValue$1(v.bottom)) {
+		corners[2] = v.bottom;
+		corners[3] = v.bottom;
+	}
+	if (isValidValue$1(v.left)) {
+		corners[0] = v.left;
+		corners[3] = v.left;
+	}
+	if (isValidValue$1(v.right)) {
+		corners[1] = v.right;
+		corners[2] = v.right;
+	}
+	if (isValidValue$1(v.topLeft)) corners[0] = v.topLeft;
+	if (isValidValue$1(v.topRight)) corners[1] = v.topRight;
+	if (isValidValue$1(v.bottomRight)) corners[2] = v.bottomRight;
+	if (isValidValue$1(v.bottomLeft)) corners[3] = v.bottomLeft;
+	return corners;
+};
+const formatShorthand$1 = (corners, calc) => {
+	const [tl, tr, br, bl] = corners;
+	if (corners.every((val, _, arr) => val === arr[0])) return `border-radius: ${calc(tl)};`;
+	if (tl === br && tr === bl) return `border-radius: ${calc(tl)} ${calc(tr)};`;
+	if (tl && tr === bl && br) return `border-radius: ${calc(tl)} ${calc(tr)} ${calc(br)};`;
+	return `border-radius: ${calc(tl)} ${calc(tr)} ${calc(br)} ${calc(bl)};`;
+};
+const CORNER_CSS = [
+	"border-top-left-radius",
+	"border-top-right-radius",
+	"border-bottom-right-radius",
+	"border-bottom-left-radius"
+];
+const formatIndividual$1 = (corners, calc) => {
+	let output = "";
+	for (let i = 0; i < corners.length; i++) if (isValidValue$1(corners[i])) output += `${CORNER_CSS[i]}: ${calc(corners[i])};`;
+	return output;
+};
+const borderRadius = (rootSize) => (props) => {
+	if (!hasAnyValue$1(props)) return null;
+	const calc = (param) => value(param, rootSize);
+	const corners = resolveCorners(props);
+	if (corners.every((val) => isValidValue$1(val))) return formatShorthand$1(corners, calc);
+	return formatIndividual$1(corners, calc);
+};
+
+//#endregion
+//#region src/styles/shorthands/edge.ts
+const isValidValue = (v) => !!v || v === 0;
+const definitions = {
+	inset: {
+		unit: "rem",
+		edgeCss: (side) => side
+	},
+	margin: {
+		unit: "rem",
+		edgeCss: (side) => `margin-${side}`
+	},
+	padding: {
+		unit: "rem",
+		edgeCss: (side) => `padding-${side}`
+	},
+	"border-width": {
+		unit: "px",
+		edgeCss: (side) => `border-${side}-width`
+	},
+	"border-style": { edgeCss: (side) => `border-${side}-style` },
+	"border-color": { edgeCss: (side) => `border-${side}-color` }
+};
+const hasAnyValue = (vals) => isValidValue(vals.top) || isValidValue(vals.bottom) || isValidValue(vals.left) || isValidValue(vals.right) || isValidValue(vals.x) || isValidValue(vals.y) || isValidValue(vals.full);
+const resolveSides = ({ full, x, y, top, left, right, bottom }) => {
+	const sides = [
+		full,
+		full,
+		full,
+		full
+	];
+	if (isValidValue(x)) {
+		sides[1] = x;
+		sides[3] = x;
+	}
+	if (isValidValue(y)) {
+		sides[0] = y;
+		sides[2] = y;
+	}
+	if (isValidValue(top)) sides[0] = top;
+	if (isValidValue(right)) sides[1] = right;
+	if (isValidValue(bottom)) sides[2] = bottom;
+	if (isValidValue(left)) sides[3] = left;
+	return sides;
+};
+const formatShorthand = (property, sides, calc) => {
+	const [t, r, b, l] = sides;
+	if (sides.every((val, _, arr) => val === arr[0])) return `${property}: ${calc(t)};`;
+	if (t === b && r === l) return `${property}: ${calc(t)} ${calc(r)};`;
+	if (t && r === l && b) return `${property}: ${calc(t)} ${calc(r)} ${calc(b)};`;
+	return `${property}: ${calc(t)} ${calc(r)} ${calc(b)} ${calc(l)};`;
+};
+const formatIndividual = (sides, edgeCss, calc) => {
+	const [t, r, b, l] = sides;
+	let output = "";
+	if (isValidValue(t)) output += `${edgeCss("top")}: ${calc(t)};`;
+	if (isValidValue(b)) output += `${edgeCss("bottom")}: ${calc(b)};`;
+	if (isValidValue(l)) output += `${edgeCss("left")}: ${calc(l)};`;
+	if (isValidValue(r)) output += `${edgeCss("right")}: ${calc(r)};`;
+	return output;
+};
+const edge = (rootSize = 16) => (property, values) => {
+	if (!hasAnyValue(values)) return null;
+	const { unit, edgeCss } = definitions[property];
+	const calc = (param) => unit ? value(param, rootSize, unit) : param;
+	const sides = resolveSides(values);
+	if (sides.every((val) => isValidValue(val))) return formatShorthand(property, sides, calc);
+	return formatIndividual(sides, edgeCss, calc);
+};
+
+//#endregion
+//#region src/styles/styles/processDescriptor.ts
+const toCssDecl = (css, v) => v == null ? "" : `${css}: ${v};`;
+const processSpecial = (d, t) => {
+	switch (d.id) {
+		case "fullScreen":
+			if (!t.fullScreen) return "";
+			return "position: fixed; top: 0; left: 0; right: 0; bottom: 0;";
+		case "backgroundImage":
+			if (!t.backgroundImage) return "";
+			return `background-image: url(${t.backgroundImage});`;
+		case "animation": {
+			const parts = [t.keyframe, t.animation].filter(Boolean).join(" ");
+			return parts ? `animation: ${parts};` : "";
+		}
+		case "hideEmpty":
+			if (!t.hideEmpty) return "";
+			return "&:empty { display: none; }";
+		case "clearFix":
+			if (!t.clearFix) return "";
+			return "&::after { clear: both; content: \"\"; display: table; }";
+		case "extendCss": return t.extendCss ?? "";
+		default: return "";
+	}
+};
+const processDescriptor = (d, t, _css, calc, shorthand, borderRadiusFn) => {
+	switch (d.kind) {
+		case "simple": return toCssDecl(d.css, t[d.key]);
+		case "convert": return toCssDecl(d.css, calc(t[d.key]));
+		case "convert_fallback": return toCssDecl(d.css, calc(...d.keys.map((k) => t[k])));
+		case "edge": return shorthand(d.property, {
+			full: t[d.keys.full],
+			x: t[d.keys.x],
+			y: t[d.keys.y],
+			top: t[d.keys.top],
+			left: t[d.keys.left],
+			bottom: t[d.keys.bottom],
+			right: t[d.keys.right]
+		}) ?? "";
+		case "border_radius": return borderRadiusFn({
+			full: t[d.keys.full],
+			top: t[d.keys.top],
+			bottom: t[d.keys.bottom],
+			left: t[d.keys.left],
+			right: t[d.keys.right],
+			topLeft: t[d.keys.topLeft],
+			topRight: t[d.keys.topRight],
+			bottomLeft: t[d.keys.bottomLeft],
+			bottomRight: t[d.keys.bottomRight]
+		}) ?? "";
+		case "special": return processSpecial(d, t);
+	}
+};
+
+//#endregion
+//#region src/styles/styles/propertyMap.ts
+const propertyMap = [
+	{
+		kind: "special",
+		id: "fullScreen"
+	},
+	{
+		kind: "simple",
+		css: "all",
+		key: "all"
+	},
+	{
+		kind: "simple",
+		css: "display",
+		key: "display"
+	},
+	{
+		kind: "simple",
+		css: "position",
+		key: "position"
+	},
+	{
+		kind: "simple",
+		css: "box-sizing",
+		key: "boxSizing"
+	},
+	{
+		kind: "simple",
+		css: "float",
+		key: "float"
+	},
+	{
+		kind: "edge",
+		property: "inset",
+		keys: {
+			full: "inset",
+			x: "insetX",
+			y: "insetY",
+			top: "top",
+			left: "left",
+			bottom: "bottom",
+			right: "right"
+		}
+	},
+	{
+		kind: "convert_fallback",
+		css: "width",
+		keys: ["width", "size"]
+	},
+	{
+		kind: "convert_fallback",
+		css: "min-width",
+		keys: ["minWidth", "minSize"]
+	},
+	{
+		kind: "convert_fallback",
+		css: "max-width",
+		keys: ["maxWidth", "maxSize"]
+	},
+	{
+		kind: "convert_fallback",
+		css: "height",
+		keys: ["height", "size"]
+	},
+	{
+		kind: "convert_fallback",
+		css: "min-height",
+		keys: ["minHeight", "minSize"]
+	},
+	{
+		kind: "convert_fallback",
+		css: "max-height",
+		keys: ["maxHeight", "maxSize"]
+	},
+	{
+		kind: "convert",
+		css: "gap",
+		key: "gap"
+	},
+	{
+		kind: "simple",
+		css: "aspect-ratio",
+		key: "aspectRatio"
+	},
+	{
+		kind: "simple",
+		css: "contain",
+		key: "contain"
+	},
+	{
+		kind: "simple",
+		css: "container-type",
+		key: "containerType"
+	},
+	{
+		kind: "simple",
+		css: "container-name",
+		key: "containerName"
+	},
+	{
+		kind: "simple",
+		css: "container",
+		key: "container"
+	},
+	{
+		kind: "convert",
+		css: "inline-size",
+		key: "inlineSize"
+	},
+	{
+		kind: "convert",
+		css: "block-size",
+		key: "blockSize"
+	},
+	{
+		kind: "convert",
+		css: "min-inline-size",
+		key: "minInlineSize"
+	},
+	{
+		kind: "convert",
+		css: "min-block-size",
+		key: "minBlockSize"
+	},
+	{
+		kind: "convert",
+		css: "max-inline-size",
+		key: "maxInlineSize"
+	},
+	{
+		kind: "convert",
+		css: "max-block-size",
+		key: "maxBlockSize"
+	},
+	{
+		kind: "edge",
+		property: "margin",
+		keys: {
+			full: "margin",
+			x: "marginX",
+			y: "marginY",
+			top: "marginTop",
+			left: "marginLeft",
+			bottom: "marginBottom",
+			right: "marginRight"
+		}
+	},
+	{
+		kind: "edge",
+		property: "padding",
+		keys: {
+			full: "padding",
+			x: "paddingX",
+			y: "paddingY",
+			top: "paddingTop",
+			left: "paddingLeft",
+			bottom: "paddingBottom",
+			right: "paddingRight"
+		}
+	},
+	{
+		kind: "convert",
+		css: "margin-inline",
+		key: "marginInline"
+	},
+	{
+		kind: "convert",
+		css: "margin-inline-start",
+		key: "marginInlineStart"
+	},
+	{
+		kind: "convert",
+		css: "margin-inline-end",
+		key: "marginInlineEnd"
+	},
+	{
+		kind: "convert",
+		css: "margin-block",
+		key: "marginBlock"
+	},
+	{
+		kind: "convert",
+		css: "margin-block-start",
+		key: "marginBlockStart"
+	},
+	{
+		kind: "convert",
+		css: "margin-block-end",
+		key: "marginBlockEnd"
+	},
+	{
+		kind: "convert",
+		css: "padding-inline",
+		key: "paddingInline"
+	},
+	{
+		kind: "convert",
+		css: "padding-inline-start",
+		key: "paddingInlineStart"
+	},
+	{
+		kind: "convert",
+		css: "padding-inline-end",
+		key: "paddingInlineEnd"
+	},
+	{
+		kind: "convert",
+		css: "padding-block",
+		key: "paddingBlock"
+	},
+	{
+		kind: "convert",
+		css: "padding-block-start",
+		key: "paddingBlockStart"
+	},
+	{
+		kind: "convert",
+		css: "padding-block-end",
+		key: "paddingBlockEnd"
+	},
+	{
+		kind: "convert",
+		css: "inset-inline",
+		key: "insetInline"
+	},
+	{
+		kind: "convert",
+		css: "inset-inline-start",
+		key: "insetInlineStart"
+	},
+	{
+		kind: "convert",
+		css: "inset-inline-end",
+		key: "insetInlineEnd"
+	},
+	{
+		kind: "convert",
+		css: "inset-block",
+		key: "insetBlock"
+	},
+	{
+		kind: "convert",
+		css: "inset-block-start",
+		key: "insetBlockStart"
+	},
+	{
+		kind: "convert",
+		css: "inset-block-end",
+		key: "insetBlockEnd"
+	},
+	{
+		kind: "simple",
+		css: "align-content",
+		key: "alignContent"
+	},
+	{
+		kind: "simple",
+		css: "align-items",
+		key: "alignItems"
+	},
+	{
+		kind: "simple",
+		css: "align-self",
+		key: "alignSelf"
+	},
+	{
+		kind: "simple",
+		css: "flex",
+		key: "flex"
+	},
+	{
+		kind: "simple",
+		css: "flex-basis",
+		key: "flexBasis"
+	},
+	{
+		kind: "simple",
+		css: "flex-direction",
+		key: "flexDirection"
+	},
+	{
+		kind: "simple",
+		css: "flex-flow",
+		key: "flexFlow"
+	},
+	{
+		kind: "simple",
+		css: "flex-grow",
+		key: "flexGrow"
+	},
+	{
+		kind: "simple",
+		css: "flex-shrink",
+		key: "flexShrink"
+	},
+	{
+		kind: "simple",
+		css: "flex-wrap",
+		key: "flexWrap"
+	},
+	{
+		kind: "simple",
+		css: "justify-content",
+		key: "justifyContent"
+	},
+	{
+		kind: "simple",
+		css: "justify-items",
+		key: "justifyItems"
+	},
+	{
+		kind: "simple",
+		css: "justify-self",
+		key: "justifySelf"
+	},
+	{
+		kind: "simple",
+		css: "place-items",
+		key: "placeItems"
+	},
+	{
+		kind: "simple",
+		css: "place-content",
+		key: "placeContent"
+	},
+	{
+		kind: "simple",
+		css: "place-self",
+		key: "placeSelf"
+	},
+	{
+		kind: "convert",
+		css: "row-gap",
+		key: "rowGap"
+	},
+	{
+		kind: "convert",
+		css: "column-gap",
+		key: "columnGap"
+	},
+	{
+		kind: "simple",
+		css: "grid",
+		key: "grid"
+	},
+	{
+		kind: "simple",
+		css: "grid-area",
+		key: "gridArea"
+	},
+	{
+		kind: "convert",
+		css: "grid-auto-columns",
+		key: "gridAutoColumns"
+	},
+	{
+		kind: "simple",
+		css: "grid-auto-flow",
+		key: "gridAutoFlow"
+	},
+	{
+		kind: "convert",
+		css: "grid-auto-rows",
+		key: "gridAutoRows"
+	},
+	{
+		kind: "simple",
+		css: "grid-column",
+		key: "gridColumn"
+	},
+	{
+		kind: "simple",
+		css: "grid-column-end",
+		key: "gridColumnEnd"
+	},
+	{
+		kind: "convert",
+		css: "grid-column-gap",
+		key: "gridColumnGap"
+	},
+	{
+		kind: "convert",
+		css: "grid-column-start",
+		key: "gridColumnStart"
+	},
+	{
+		kind: "convert",
+		css: "grid-gap",
+		key: "gridGap"
+	},
+	{
+		kind: "simple",
+		css: "grid-row",
+		key: "gridRow"
+	},
+	{
+		kind: "simple",
+		css: "grid-row-start",
+		key: "gridRowStart"
+	},
+	{
+		kind: "simple",
+		css: "grid-row-end",
+		key: "gridRowEnd"
+	},
+	{
+		kind: "convert",
+		css: "grid-row-gap",
+		key: "gridRowGap"
+	},
+	{
+		kind: "simple",
+		css: "grid-template",
+		key: "gridTemplate"
+	},
+	{
+		kind: "simple",
+		css: "grid-template-areas",
+		key: "gridTemplateAreas"
+	},
+	{
+		kind: "simple",
+		css: "grid-template-columns",
+		key: "gridTemplateColumns"
+	},
+	{
+		kind: "simple",
+		css: "grid-template-rows",
+		key: "gridTemplateRows"
+	},
+	{
+		kind: "simple",
+		css: "object-fit",
+		key: "objectFit"
+	},
+	{
+		kind: "simple",
+		css: "object-position",
+		key: "objectPosition"
+	},
+	{
+		kind: "simple",
+		css: "order",
+		key: "order"
+	},
+	{
+		kind: "simple",
+		css: "opacity",
+		key: "opacity"
+	},
+	{
+		kind: "simple",
+		css: "resize",
+		key: "resize"
+	},
+	{
+		kind: "simple",
+		css: "vertical-align",
+		key: "verticalAlign"
+	},
+	{
+		kind: "simple",
+		css: "line-height",
+		key: "lineHeight"
+	},
+	{
+		kind: "simple",
+		css: "font",
+		key: "font"
+	},
+	{
+		kind: "simple",
+		css: "font-family",
+		key: "fontFamily"
+	},
+	{
+		kind: "convert",
+		css: "font-size",
+		key: "fontSize"
+	},
+	{
+		kind: "convert",
+		css: "font-size-adjust",
+		key: "fontSizeAdjust"
+	},
+	{
+		kind: "convert",
+		css: "font-stretch",
+		key: "fontStretch"
+	},
+	{
+		kind: "simple",
+		css: "font-style",
+		key: "fontStyle"
+	},
+	{
+		kind: "simple",
+		css: "font-variant",
+		key: "fontVariant"
+	},
+	{
+		kind: "simple",
+		css: "font-weight",
+		key: "fontWeight"
+	},
+	{
+		kind: "simple",
+		css: "font-kerning",
+		key: "fontKerning"
+	},
+	{
+		kind: "simple",
+		css: "font-feature-settings",
+		key: "fontFeatureSettings"
+	},
+	{
+		kind: "simple",
+		css: "font-variation-settings",
+		key: "fontVariationSettings"
+	},
+	{
+		kind: "simple",
+		css: "font-optical-sizing",
+		key: "fontOpticalSizing"
+	},
+	{
+		kind: "simple",
+		css: "text-align",
+		key: "textAlign"
+	},
+	{
+		kind: "simple",
+		css: "text-align-last",
+		key: "textAlignLast"
+	},
+	{
+		kind: "simple",
+		css: "text-transform",
+		key: "textTransform"
+	},
+	{
+		kind: "simple",
+		css: "text-decoration",
+		key: "textDecoration"
+	},
+	{
+		kind: "simple",
+		css: "text-decoration-color",
+		key: "textDecorationColor"
+	},
+	{
+		kind: "simple",
+		css: "text-decoration-line",
+		key: "textDecorationLine"
+	},
+	{
+		kind: "simple",
+		css: "text-decoration-style",
+		key: "textDecorationStyle"
+	},
+	{
+		kind: "simple",
+		css: "text-decoration-thickness",
+		key: "textDecorationThickness"
+	},
+	{
+		kind: "simple",
+		css: "text-underline-offset",
+		key: "textUnderlineOffset"
+	},
+	{
+		kind: "simple",
+		css: "text-emphasis",
+		key: "textEmphasis"
+	},
+	{
+		kind: "simple",
+		css: "text-emphasis-color",
+		key: "textEmphasisColor"
+	},
+	{
+		kind: "simple",
+		css: "text-emphasis-style",
+		key: "textEmphasisStyle"
+	},
+	{
+		kind: "simple",
+		css: "letter-spacing",
+		key: "letterSpacing"
+	},
+	{
+		kind: "simple",
+		css: "word-spacing",
+		key: "wordSpacing"
+	},
+	{
+		kind: "simple",
+		css: "text-indent",
+		key: "textIndent"
+	},
+	{
+		kind: "simple",
+		css: "text-justify",
+		key: "textJustify"
+	},
+	{
+		kind: "simple",
+		css: "text-overflow",
+		key: "textOverflow"
+	},
+	{
+		kind: "simple",
+		css: "text-shadow",
+		key: "textShadow"
+	},
+	{
+		kind: "simple",
+		css: "text-wrap",
+		key: "textWrap"
+	},
+	{
+		kind: "simple",
+		css: "text-rendering",
+		key: "textRendering"
+	},
+	{
+		kind: "simple",
+		css: "white-space",
+		key: "whiteSpace"
+	},
+	{
+		kind: "simple",
+		css: "word-break",
+		key: "wordBreak"
+	},
+	{
+		kind: "simple",
+		css: "word-wrap",
+		key: "wordWrap"
+	},
+	{
+		kind: "simple",
+		css: "writing-mode",
+		key: "writingMode"
+	},
+	{
+		kind: "simple",
+		css: "direction",
+		key: "direction"
+	},
+	{
+		kind: "simple",
+		css: "hyphens",
+		key: "hyphens"
+	},
+	{
+		kind: "simple",
+		css: "list-style",
+		key: "listStyle"
+	},
+	{
+		kind: "simple",
+		css: "list-style-image",
+		key: "listStyleImage"
+	},
+	{
+		kind: "simple",
+		css: "list-style-position",
+		key: "listStylePosition"
+	},
+	{
+		kind: "simple",
+		css: "list-style-type",
+		key: "listStyleType"
+	},
+	{
+		kind: "simple",
+		css: "color",
+		key: "color"
+	},
+	{
+		kind: "simple",
+		css: "background",
+		key: "background"
+	},
+	{
+		kind: "simple",
+		css: "background-color",
+		key: "backgroundColor"
+	},
+	{
+		kind: "special",
+		id: "backgroundImage"
+	},
+	{
+		kind: "simple",
+		css: "background-attachment",
+		key: "backgroundAttachment"
+	},
+	{
+		kind: "simple",
+		css: "background-clip",
+		key: "backgroundClip"
+	},
+	{
+		kind: "simple",
+		css: "background-origin",
+		key: "backgroundOrigin"
+	},
+	{
+		kind: "simple",
+		css: "background-position",
+		key: "backgroundPosition"
+	},
+	{
+		kind: "simple",
+		css: "background-repeat",
+		key: "backgroundRepeat"
+	},
+	{
+		kind: "simple",
+		css: "background-size",
+		key: "backgroundSize"
+	},
+	{
+		kind: "border_radius",
+		keys: {
+			full: "borderRadius",
+			top: "borderRadiusTop",
+			bottom: "borderRadiusBottom",
+			left: "borderRadiusLeft",
+			right: "borderRadiusRight",
+			topLeft: "borderRadiusTopLeft",
+			topRight: "borderRadiusTopRight",
+			bottomLeft: "borderRadiusBottomLeft",
+			bottomRight: "borderRadiusBottomRight"
+		}
+	},
+	{
+		kind: "simple",
+		css: "border",
+		key: "border"
+	},
+	{
+		kind: "simple",
+		css: "border-top",
+		key: "borderTop"
+	},
+	{
+		kind: "simple",
+		css: "border-bottom",
+		key: "borderBottom"
+	},
+	{
+		kind: "simple",
+		css: "border-left",
+		key: "borderLeft"
+	},
+	{
+		kind: "simple",
+		css: "border-right",
+		key: "borderRight"
+	},
+	{
+		kind: "edge",
+		property: "border-width",
+		keys: {
+			full: "borderWidth",
+			x: "borderWidthX",
+			y: "borderWidthY",
+			top: "borderWidthTop",
+			left: "borderWidthLeft",
+			bottom: "borderWidthBottom",
+			right: "borderWidthRight"
+		}
+	},
+	{
+		kind: "edge",
+		property: "border-style",
+		keys: {
+			full: "borderStyle",
+			x: "borderStyleX",
+			y: "borderStyleY",
+			top: "borderStyleTop",
+			left: "borderStyleLeft",
+			bottom: "borderStyleBottom",
+			right: "borderStyleRight"
+		}
+	},
+	{
+		kind: "edge",
+		property: "border-color",
+		keys: {
+			full: "borderColor",
+			x: "borderColorX",
+			y: "borderColorY",
+			top: "borderColorTop",
+			left: "borderColorLeft",
+			bottom: "borderColorBottom",
+			right: "borderColorRight"
+		}
+	},
+	{
+		kind: "simple",
+		css: "border-image",
+		key: "borderImage"
+	},
+	{
+		kind: "simple",
+		css: "border-image-outset",
+		key: "borderImageOutset"
+	},
+	{
+		kind: "simple",
+		css: "border-image-repeat",
+		key: "borderImageRepeat"
+	},
+	{
+		kind: "simple",
+		css: "border-image-slice",
+		key: "borderImageSlice"
+	},
+	{
+		kind: "simple",
+		css: "border-image-source",
+		key: "borderImageSource"
+	},
+	{
+		kind: "simple",
+		css: "border-image-width",
+		key: "borderImageWidth"
+	},
+	{
+		kind: "simple",
+		css: "border-spacing",
+		key: "borderSpacing"
+	},
+	{
+		kind: "simple",
+		css: "border-inline",
+		key: "borderInline"
+	},
+	{
+		kind: "simple",
+		css: "border-block",
+		key: "borderBlock"
+	},
+	{
+		kind: "simple",
+		css: "border-inline-start",
+		key: "borderInlineStart"
+	},
+	{
+		kind: "simple",
+		css: "border-inline-end",
+		key: "borderInlineEnd"
+	},
+	{
+		kind: "simple",
+		css: "border-block-start",
+		key: "borderBlockStart"
+	},
+	{
+		kind: "simple",
+		css: "border-block-end",
+		key: "borderBlockEnd"
+	},
+	{
+		kind: "simple",
+		css: "backface-visibility",
+		key: "backfaceVisibility"
+	},
+	{
+		kind: "simple",
+		css: "box-shadow",
+		key: "boxShadow"
+	},
+	{
+		kind: "simple",
+		css: "filter",
+		key: "filter"
+	},
+	{
+		kind: "simple",
+		css: "backdrop-filter",
+		key: "backdropFilter"
+	},
+	{
+		kind: "simple",
+		css: "mix-blend-mode",
+		key: "mixBlendMode"
+	},
+	{
+		kind: "simple",
+		css: "background-blend-mode",
+		key: "backgroundBlendMode"
+	},
+	{
+		kind: "simple",
+		css: "isolation",
+		key: "isolation"
+	},
+	{
+		kind: "simple",
+		css: "outline",
+		key: "outline"
+	},
+	{
+		kind: "simple",
+		css: "outline-color",
+		key: "outlineColor"
+	},
+	{
+		kind: "simple",
+		css: "outline-offset",
+		key: "outlineOffset"
+	},
+	{
+		kind: "simple",
+		css: "outline-style",
+		key: "outlineStyle"
+	},
+	{
+		kind: "simple",
+		css: "outline-width",
+		key: "outlineWidth"
+	},
+	{
+		kind: "special",
+		id: "animation"
+	},
+	{
+		kind: "simple",
+		css: "animation-name",
+		key: "animationName"
+	},
+	{
+		kind: "simple",
+		css: "animation-duration",
+		key: "animationDuration"
+	},
+	{
+		kind: "simple",
+		css: "animation-timing-function",
+		key: "animationTimingFunction"
+	},
+	{
+		kind: "simple",
+		css: "animation-delay",
+		key: "animationDelay"
+	},
+	{
+		kind: "simple",
+		css: "animation-iteration-count",
+		key: "animationIterationCount"
+	},
+	{
+		kind: "simple",
+		css: "animation-direction",
+		key: "animationDirection"
+	},
+	{
+		kind: "simple",
+		css: "animation-fill-mode",
+		key: "animationFillMode"
+	},
+	{
+		kind: "simple",
+		css: "animation-play-state",
+		key: "animationPlayState"
+	},
+	{
+		kind: "simple",
+		css: "transition",
+		key: "transition"
+	},
+	{
+		kind: "simple",
+		css: "transition-delay",
+		key: "transitionDelay"
+	},
+	{
+		kind: "simple",
+		css: "transition-duration",
+		key: "transitionDuration"
+	},
+	{
+		kind: "simple",
+		css: "transition-property",
+		key: "transitionProperty"
+	},
+	{
+		kind: "simple",
+		css: "transition-timing-function",
+		key: "transitionTimingFunction"
+	},
+	{
+		kind: "simple",
+		css: "transform",
+		key: "transform"
+	},
+	{
+		kind: "simple",
+		css: "transform-origin",
+		key: "transformOrigin"
+	},
+	{
+		kind: "simple",
+		css: "transform-style",
+		key: "transformStyle"
+	},
+	{
+		kind: "simple",
+		css: "translate",
+		key: "translate"
+	},
+	{
+		kind: "simple",
+		css: "rotate",
+		key: "rotate"
+	},
+	{
+		kind: "simple",
+		css: "scale",
+		key: "scale"
+	},
+	{
+		kind: "simple",
+		css: "will-change",
+		key: "willChange"
+	},
+	{
+		kind: "simple",
+		css: "scroll-behavior",
+		key: "scrollBehavior"
+	},
+	{
+		kind: "simple",
+		css: "scroll-snap-type",
+		key: "scrollSnapType"
+	},
+	{
+		kind: "simple",
+		css: "scroll-snap-align",
+		key: "scrollSnapAlign"
+	},
+	{
+		kind: "simple",
+		css: "scroll-snap-stop",
+		key: "scrollSnapStop"
+	},
+	{
+		kind: "simple",
+		css: "scroll-margin",
+		key: "scrollMargin"
+	},
+	{
+		kind: "simple",
+		css: "scroll-padding",
+		key: "scrollPadding"
+	},
+	{
+		kind: "simple",
+		css: "overscroll-behavior",
+		key: "overscrollBehavior"
+	},
+	{
+		kind: "simple",
+		css: "overscroll-behavior-x",
+		key: "overscrollBehaviorX"
+	},
+	{
+		kind: "simple",
+		css: "overscroll-behavior-y",
+		key: "overscrollBehaviorY"
+	},
+	{
+		kind: "simple",
+		css: "cursor",
+		key: "cursor"
+	},
+	{
+		kind: "simple",
+		css: "pointer-events",
+		key: "pointerEvents"
+	},
+	{
+		kind: "simple",
+		css: "user-select",
+		key: "userSelect"
+	},
+	{
+		kind: "simple",
+		css: "touch-action",
+		key: "touchAction"
+	},
+	{
+		kind: "simple",
+		css: "scrollbar-width",
+		key: "scrollbarWidth"
+	},
+	{
+		kind: "simple",
+		css: "scrollbar-color",
+		key: "scrollbarColor"
+	},
+	{
+		kind: "simple",
+		css: "scrollbar-gutter",
+		key: "scrollbarGutter"
+	},
+	{
+		kind: "simple",
+		css: "caret-color",
+		key: "caretColor"
+	},
+	{
+		kind: "simple",
+		css: "accent-color",
+		key: "accentColor"
+	},
+	{
+		kind: "simple",
+		css: "color-scheme",
+		key: "colorScheme"
+	},
+	{
+		kind: "simple",
+		css: "caption-side",
+		key: "captionSide"
+	},
+	{
+		kind: "simple",
+		css: "clear",
+		key: "clear"
+	},
+	{
+		kind: "simple",
+		css: "clip",
+		key: "clip"
+	},
+	{
+		kind: "simple",
+		css: "clip-path",
+		key: "clipPath"
+	},
+	{
+		kind: "simple",
+		css: "content",
+		key: "content"
+	},
+	{
+		kind: "simple",
+		css: "content-visibility",
+		key: "contentVisibility"
+	},
+	{
+		kind: "simple",
+		css: "counter-increment",
+		key: "counterIncrement"
+	},
+	{
+		kind: "simple",
+		css: "counter-reset",
+		key: "counterReset"
+	},
+	{
+		kind: "simple",
+		css: "empty-cells",
+		key: "emptyCells"
+	},
+	{
+		kind: "simple",
+		css: "z-index",
+		key: "zIndex"
+	},
+	{
+		kind: "simple",
+		css: "overflow",
+		key: "overflow"
+	},
+	{
+		kind: "simple",
+		css: "overflow-wrap",
+		key: "overflowWrap"
+	},
+	{
+		kind: "simple",
+		css: "overflow-x",
+		key: "overflowX"
+	},
+	{
+		kind: "simple",
+		css: "overflow-y",
+		key: "overflowY"
+	},
+	{
+		kind: "simple",
+		css: "perspective",
+		key: "perspective"
+	},
+	{
+		kind: "simple",
+		css: "perspective-origin",
+		key: "perspectiveOrigin"
+	},
+	{
+		kind: "simple",
+		css: "quotes",
+		key: "quotes"
+	},
+	{
+		kind: "simple",
+		css: "tab-size",
+		key: "tabSize"
+	},
+	{
+		kind: "simple",
+		css: "table-layout",
+		key: "tableLayout"
+	},
+	{
+		kind: "simple",
+		css: "visibility",
+		key: "visibility"
+	},
+	{
+		kind: "simple",
+		css: "appearance",
+		key: "appearance"
+	},
+	{
+		kind: "simple",
+		css: "image-rendering",
+		key: "imageRendering"
+	},
+	{
+		kind: "simple",
+		css: "mask-image",
+		key: "maskImage"
+	},
+	{
+		kind: "simple",
+		css: "mask-size",
+		key: "maskSize"
+	},
+	{
+		kind: "simple",
+		css: "mask-position",
+		key: "maskPosition"
+	},
+	{
+		kind: "simple",
+		css: "mask-repeat",
+		key: "maskRepeat"
+	},
+	{
+		kind: "simple",
+		css: "shape-outside",
+		key: "shapeOutside"
+	},
+	{
+		kind: "simple",
+		css: "shape-margin",
+		key: "shapeMargin"
+	},
+	{
+		kind: "simple",
+		css: "shape-image-threshold",
+		key: "shapeImageThreshold"
+	},
+	{
+		kind: "simple",
+		css: "column-count",
+		key: "columnCount"
+	},
+	{
+		kind: "simple",
+		css: "column-width",
+		key: "columnWidth"
+	},
+	{
+		kind: "simple",
+		css: "column-rule",
+		key: "columnRule"
+	},
+	{
+		kind: "simple",
+		css: "columns",
+		key: "columns"
+	},
+	{
+		kind: "simple",
+		css: "break-before",
+		key: "breakBefore"
+	},
+	{
+		kind: "simple",
+		css: "break-after",
+		key: "breakAfter"
+	},
+	{
+		kind: "simple",
+		css: "break-inside",
+		key: "breakInside"
+	},
+	{
+		kind: "simple",
+		css: "orphans",
+		key: "orphans"
+	},
+	{
+		kind: "simple",
+		css: "widows",
+		key: "widows"
+	},
+	{
+		kind: "simple",
+		css: "print-color-adjust",
+		key: "printColorAdjust"
+	},
+	{
+		kind: "special",
+		id: "hideEmpty"
+	},
+	{
+		kind: "special",
+		id: "clearFix"
+	},
+	{
+		kind: "special",
+		id: "extendCss"
+	}
+];
+
+//#endregion
+//#region src/styles/styles/index.ts
+const styles = ({ theme: t, css, rootSize }) => {
+	const calc = (...params) => values(params, rootSize);
+	const shorthand = edge(rootSize);
+	const borderRadiusFn = borderRadius(rootSize);
+	return propertyMap.map((d) => processDescriptor(d, t, css, calc, shorthand, borderRadiusFn)).filter(Boolean).join(" ");
+};
+
+//#endregion
+export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, Provider, alignContent, breakpoints, context, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles, transformTheme, value, values };
+//# sourceMappingURL=index.js.map