@primer/react-brand/esm/Box/Box.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 r from "./Box.module.js";
import { useMemo as i } from "react";
import { jsx as a } from "react/jsx-runtime";
//#region src/Box/Box.tsx
var o = [
	"none",
	"condensed",
	"normal",
	"spacious",
	...t
], s = [
	"default",
	"inset",
	"subtle",
	"overlay"
], c = [
	"small",
	"medium",
	"large",
	"xlarge",
	"full"
], l = [
	"none",
	"thin",
	"thick",
	"thicker"
], u = [
	"default",
	"muted",
	"subtle"
], d = (e) => s.includes(e), f = (e, t) => t ? typeof t == "string" || typeof t == "number" ? r[`Box-${e}--${t}`] : Object.keys(t).map((n) => r[`Box-${n}-${e}--${t[n]}`]).join(" ") : "", p = ({ animate: t, children: r, className: o, "data-testid": s, style: c, padding: l, paddingBlockStart: u, paddingInlineEnd: p, paddingBlockEnd: m, paddingInlineStart: h, margin: g, marginBlockStart: _, marginInlineEnd: v, marginBlockEnd: y, marginInlineStart: b, backgroundColor: x, borderRadius: S, borderWidth: C, borderBlockStartWidth: w, borderInlineEndWidth: T, borderBlockEndWidth: E, borderInlineStartWidth: D, borderColor: O, borderStyle: k, ...A }) => {
	let { classes: j, styles: M } = n(t), N = i(() => f("padding", l), [l]), P = i(() => f("paddingBlockStart", u), [u]), F = i(() => f("paddingInlineEnd", p), [p]), I = i(() => f("paddingBlockEnd", m), [m]), L = i(() => f("paddingInlineStart", h), [h]), R = i(() => f("margin", g), [g]), z = i(() => f("marginBlockStart", _), [_]), B = i(() => f("marginInlineEnd", v), [v]), V = i(() => f("marginBlockEnd", y), [y]), H = i(() => f("marginInlineStart", b), [b]), U = i(() => x && d(x) ? f("backgroundColor", x) : "", [x]), W = i(() => x && !d(x) ? { backgroundColor: x } : {}, [x]);
	return /* @__PURE__ */ a("div", {
		className: e(j, N, P, F, I, L, R, z, B, V, H, U, i(() => f("borderRadius", S), [S]), i(() => f("borderWidth", C), [C]), i(() => f("borderBlockStartWidth", w), [w]), i(() => f("borderInlineEndWidth", T), [T]), i(() => f("borderBlockEndWidth", E), [E]), i(() => f("borderInlineStartWidth", D), [D]), i(() => f("borderColor", O), [O]), i(() => f("borderStyle", k), [k]), o),
		"data-testid": s,
		style: {
			...M,
			...W,
			...c
		},
		...A,
		children: r
	});
};
//#endregion
export { p as Box, s as BoxBackgroundColors, u as BoxBorderColorOptions, c as BoxBorderRadiusOptions, l as BoxBorderWidthOptions, o as BoxSpacingValues };

//# sourceMappingURL=Box.js.map