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

Themeable design system for the SEEK Group

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