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

Themeable design system for the SEEK Group

import { jsx } from "react/jsx-runtime";
import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
import { Box } from "../Box/Box.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
const validBleedComponents = ["div", "span"];
const Bleed = ({
  space,
  horizontal,
  vertical,
  top,
  bottom,
  left,
  right,
  children,
  component = "div",
  data,
  ...restProps
}) => /* @__PURE__ */ jsx(
  Box,
  {
    component,
    display: component === "span" ? "block" : void 0,
    className: [
      negativeMargin("top", top || vertical || space),
      negativeMargin("bottom", bottom || vertical || space),
      negativeMargin("left", left || horizontal || space),
      negativeMargin("right", right || horizontal || space)
    ],
    ...buildDataAttributes({ data, validateRestProps: restProps }),
    children: /* @__PURE__ */ jsx(
      Box,
      {
        component,
        display: component === "span" ? "block" : void 0,
        position: "relative",
        children
      }
    )
  }
);
export {
  Bleed,
  validBleedComponents
};