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

Themeable design system for the SEEK Group

"use strict";
const jsxRuntime = require("react/jsx-runtime");
const assert = require("assert");
const lib_css_negativeMargin_negativeMargin_cjs = require("../../css/negativeMargin/negativeMargin.cjs");
const lib_utils_collapsibleAlignmentProps_cjs = require("../../utils/collapsibleAlignmentProps.cjs");
const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
const lib_components_Columns_ColumnsContext_cjs = require("./ColumnsContext.cjs");
const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const Columns = ({
  children,
  collapseBelow,
  reverse = false,
  space = "none",
  align = "left",
  alignY,
  component = "div",
  data,
  ...restProps
}) => {
  assert__default.default(
    !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 = lib_css_atoms_sprinkles_css_cjs.normalizeResponsiveValue(space);
  const {
    mobile: mobileSpace = "none",
    tablet: tabletSpace = mobileSpace,
    desktop: desktopSpace = tabletSpace,
    wide: wideSpace = desktopSpace
  } = normalizedSpace;
  const {
    collapsibleAlignmentProps,
    collapseMobile,
    collapseTablet,
    collapseDesktop
  } = lib_utils_collapsibleAlignmentProps_cjs.resolveCollapsibleAlignmentProps({
    collapseBelow,
    align,
    alignY,
    reverse,
    inlineItems: false
  });
  return /* @__PURE__ */ jsxRuntime.jsx(
    lib_components_Box_Box_cjs.Box,
    {
      component,
      ...collapsibleAlignmentProps,
      height: "full",
      className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("left", {
        mobile: collapseMobile ? "none" : mobileSpace,
        tablet: collapseTablet ? "none" : tabletSpace,
        desktop: collapseDesktop ? "none" : desktopSpace,
        wide: wideSpace
      }),
      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
      children: /* @__PURE__ */ jsxRuntime.jsx(
        lib_components_Columns_ColumnsContext_cjs.ColumnsContext.Provider,
        {
          value: {
            collapseMobile,
            collapseTablet,
            collapseDesktop,
            mobileSpace,
            tabletSpace,
            desktopSpace,
            wideSpace,
            align,
            component
          },
          children
        }
      )
    }
  );
};
exports.Columns = Columns;