braid-design-system
Version:
Themeable design system for the SEEK Group
86 lines (84 loc) • 3.4 kB
JavaScript
;
const jsxRuntime = require("react/jsx-runtime");
const clsx = require("clsx");
const dedent = require("dedent");
const react = require("react");
const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
const lib_components_Box_ColoredBox_cjs = require("./ColoredBox.cjs");
const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
const lib_css_reset_reset_css_cjs = require("../../css/reset/reset.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
const Box = react.forwardRef(
({ component = "div", className, background, boxShadow, data, ...restProps }, ref) => {
const atomProps = {};
const nativeProps = {
...data ? (
// Not validating rest props as Box supports native HTML element props
// and we do not want to warn against using the native syntax.
lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: false })
) : void 0
};
for (const key in restProps) {
if (lib_css_atoms_sprinkles_css_cjs.sprinkles.properties.has(key)) {
atomProps[key] = restProps[key];
} else {
nativeProps[key] = restProps[key];
}
}
const userClasses = clsx__default.default(className);
if (process.env.NODE_ENV !== "production") {
react.useEffect(() => {
if (userClasses.includes(lib_css_reset_reset_css_cjs.base)) {
throw new Error(
dedent__default.default`
Reset class has been applied more than once. This is normally caused when asking for an explicit reset on the \`atoms\` function. This can be removed as Box automatically adds reset classes.
atoms({
reset: '...' // <-- Remove this
})
`
);
}
}, [userClasses]);
}
const atomicClasses = lib_css_atoms_atoms_cjs.atoms({
reset: typeof component === "string" ? component : "div",
...atomProps
});
const combinedClasses = `${atomicClasses}${userClasses ? ` ${userClasses}` : ""}`;
return background || boxShadow ? /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_ColoredBox_cjs.ColoredBox,
{
component,
background,
boxShadow,
className: combinedClasses,
ref,
...nativeProps
}
) : react.createElement(component, {
className: combinedClasses,
...nativeProps,
ref
});
}
);
Box.displayName = "Box";
const PublicBox = react.forwardRef(
(props, ref) => {
if (process.env.NODE_ENV !== "production") {
if (typeof props.background !== "undefined" && typeof props.background !== "string") {
throw new Error("Conditional backgrounds are not suppported");
}
if (typeof props.boxShadow !== "undefined" && typeof props.boxShadow !== "string") {
throw new Error("Conditional boxShadows are not suppported");
}
}
return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...props, ref });
}
);
PublicBox.displayName = "Box";
exports.Box = Box;
exports.PublicBox = PublicBox;