@primer/react-brand/esm/Stack/Stack.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import { BaseSizeScale as t } from "../constants.js";
import { useAnimation as n } from "../animation/useAnimation.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/size-SXubYfUg.css';/* empty css                                                                          */
import r from "./Stack.module.js";
import { forwardRef as i, useMemo as a } from "react";
import { jsx as o } from "react/jsx-runtime";
//#region src/Stack/Stack.tsx
var s = ["horizontal", "vertical"], c = s[1], l = [
	"none",
	"condensed",
	"normal",
	"spacious",
	...t
], u = l[1], d = [
	"center",
	"flex-start",
	"flex-end"
], f = ["wrap", "nowrap"], p = [
	...d,
	"space-between",
	"space-around",
	"space-evenly"
], m = i(({ animate: t, children: i, direction: s = c, gap: l = u, alignItems: d, padding: f = u, justifyContent: p, className: m, style: h, flexWrap: g, ..._ }, v) => {
	let { classes: y, styles: b } = n(t), x = a(() => typeof s == "string" ? r[`Stack--${s}`] : Object.keys(s).map((e) => r[`Stack-${e}--${s[e]}`]).join(" "), [s]), S = a(() => typeof l == "string" || typeof l == "number" ? r[`Stack--gap-${l}`] : Object.keys(l).map((e) => r[`Stack-${e}--gap-${l[e]}`]).join(" "), [l]), C = a(() => typeof f == "string" || typeof f == "number" ? r[`Stack--padding-${f}`] : Object.keys(f).map((e) => r[`Stack-${e}--padding-${f[e]}`]).join(" "), [f]), w = a(() => typeof d == "string" ? r[`Stack--align-items-${d}`] : typeof d == "object" ? Object.keys(d).map((e) => r[`Stack-${e}--align-items-${d[e]}`]).join(" ") : null, [d]), T = a(() => typeof p == "string" ? r[`Stack--justify-content-${p}`] : typeof p == "object" ? Object.keys(p).map((e) => r[`Stack-${e}--justify-content-${p[e]}`]).join(" ") : null, [p]), E = a(() => typeof g == "string" ? r[`Stack-flexWrap--${g}`] : typeof g == "object" ? Object.keys(g).map((e) => r[`Stack-${e}-flexWrap--${g[e]}`]).join(" ") : null, [g]);
	return /* @__PURE__ */ o("div", {
		ref: v,
		className: e(y, r.Stack, x, S, w, T, C, E, m),
		style: {
			...b,
			...h
		},
		..._,
		children: i
	});
});
//#endregion
export { m as Stack, d as StackAlignItemVariants, s as StackDirectionVariants, f as StackFlexWrapVariants, p as StackJustifyContentVariants, l as StackSpacingVariants, c as defaultStackDirection, u as defaultStackSpacing };

//# sourceMappingURL=Stack.js.map