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

Themeable design system for the SEEK Group

import { jsx } from "react/jsx-runtime";
import assert from "assert";
import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
import { resolveCollapsibleAlignmentProps } from "../../utils/collapsibleAlignmentProps.mjs";
import { Box } from "../Box/Box.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { ColumnsContext } from "./ColumnsContext.mjs";
import { normalizeResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
const Columns = ({
  children,
  collapseBelow,
  reverse = false,
  space = "none",
  align = "left",
  alignY,
  component = "div",
  data,
  ...restProps
}) => {
  assert(
    !reverse || reverse && collapseBelow,
    "The `reverse` prop should only be applied in combination with the `collapseBelow` prop.\nIf you do not want to collapse responsively, it is recommended to reorder the content directly.\n\nSee documentation for details: https://seek-oss.github.io/braid-design-system/components/Columns#reversing-the-column-order"
  );
  const normalizedSpace = normalizeResponsiveValue(space);
  const {
    mobile: mobileSpace = "none",
    tablet: tabletSpace = mobileSpace,
    desktop: desktopSpace = tabletSpace,
    wide: wideSpace = desktopSpace
  } = normalizedSpace;
  const {
    collapsibleAlignmentProps,
    collapseMobile,
    collapseTablet,
    collapseDesktop
  } = resolveCollapsibleAlignmentProps({
    collapseBelow,
    align,
    alignY,
    reverse,
    inlineItems: false
  });
  return /* @__PURE__ */ jsx(
    Box,
    {
      component,
      ...collapsibleAlignmentProps,
      height: "full",
      className: negativeMargin("left", {
        mobile: collapseMobile ? "none" : mobileSpace,
        tablet: collapseTablet ? "none" : tabletSpace,
        desktop: collapseDesktop ? "none" : desktopSpace,
        wide: wideSpace
      }),
      ...buildDataAttributes({ data, validateRestProps: restProps }),
      children: /* @__PURE__ */ jsx(
        ColumnsContext.Provider,
        {
          value: {
            collapseMobile,
            collapseTablet,
            collapseDesktop,
            mobileSpace,
            tabletSpace,
            desktopSpace,
            wideSpace,
            align,
            component
          },
          children
        }
      )
    }
  );
};
export {
  Columns
};