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

Themeable design system for the SEEK Group

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