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

Themeable design system for the SEEK Group

import { jsx } from "react/jsx-runtime";
import clsx from "clsx";
import dedent from "dedent";
import { forwardRef, useEffect, createElement } from "react";
import { atoms } from "../../css/atoms/atoms.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { ColoredBox } from "./ColoredBox.mjs";
import { sprinkles } from "../../css/atoms/sprinkles.css.mjs";
import { base } from "../../css/reset/reset.css.mjs";
const Box = 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.
        buildDataAttributes({ data, validateRestProps: false })
      ) : void 0
    };
    for (const key in restProps) {
      if (sprinkles.properties.has(key)) {
        atomProps[key] = restProps[key];
      } else {
        nativeProps[key] = restProps[key];
      }
    }
    const userClasses = clsx(className);
    if (process.env.NODE_ENV !== "production") {
      useEffect(() => {
        if (userClasses.includes(base)) {
          throw new Error(
            dedent`
              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 = atoms({
      reset: typeof component === "string" ? component : "div",
      ...atomProps
    });
    const combinedClasses = `${atomicClasses}${userClasses ? ` ${userClasses}` : ""}`;
    return background || boxShadow ? /* @__PURE__ */ jsx(
      ColoredBox,
      {
        component,
        background,
        boxShadow,
        className: combinedClasses,
        ref,
        ...nativeProps
      }
    ) : createElement(component, {
      className: combinedClasses,
      ...nativeProps,
      ref
    });
  }
);
Box.displayName = "Box";
const PublicBox = 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__ */ jsx(Box, { ...props, ref });
  }
);
PublicBox.displayName = "Box";
export {
  Box,
  PublicBox
};