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

Themeable design system for the SEEK Group

import { jsx } from "react/jsx-runtime";
import { assignInlineVars } from "@vanilla-extract/dynamic";
import { Box } from "../Box/Box.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { tiles, wideColumnsVar, desktopColumnsVar, tabletColumnsVar, mobileColumnsVar } from "./Tiles.css.mjs";
import { normalizeResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
const Tiles = ({
  children,
  space = "none",
  columns = 1,
  data,
  ...restProps
}) => {
  const normalizedResponsiveColumns = normalizeResponsiveValue(columns);
  const {
    mobile: mobileColumns = "1",
    tablet: tabletColumns = mobileColumns,
    desktop: desktopColumns = tabletColumns,
    wide: wideColumns = desktopColumns
  } = normalizedResponsiveColumns;
  return /* @__PURE__ */ jsx(
    Box,
    {
      gap: space,
      className: tiles,
      style: assignInlineVars({
        [mobileColumnsVar]: String(mobileColumns),
        [tabletColumnsVar]: String(tabletColumns),
        [desktopColumnsVar]: String(desktopColumns),
        [wideColumnsVar]: String(wideColumns)
      }),
      ...buildDataAttributes({ data, validateRestProps: restProps }),
      children
    }
  );
};
export {
  Tiles
};