braid-design-system/dist/lib/components/Box/BoxRenderer.mjs

Themeable design system for the SEEK Group

import { jsx } from "react/jsx-runtime";
import clsx from "clsx";
import { atoms } from "../../css/atoms/atoms.mjs";
import { BackgroundProvider } from "./BackgroundContext.mjs";
import { useColoredBoxClasses } from "./ColoredBox.mjs";
const ColoredBoxRenderer = ({
  background,
  boxShadow,
  children,
  className
}) => {
  const { backgroundContext, classList } = useColoredBoxClasses({
    background,
    boxShadow
  });
  const element = children(clsx(className, classList));
  return backgroundContext ? /* @__PURE__ */ jsx(BackgroundProvider, { value: backgroundContext, children: element }) : element;
};
const BoxRenderer = ({
  children,
  component = "div",
  className,
  background,
  boxShadow,
  ...props
}) => {
  const classes = clsx(className, atoms({ reset: component, ...props }));
  return background || boxShadow ? /* @__PURE__ */ jsx(
    ColoredBoxRenderer,
    {
      background,
      boxShadow,
      className: classes,
      children
    }
  ) : children(classes);
};
export {
  BoxRenderer
};