"use strict";
var import_Collection = require("../Collection.css");
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const kit_Theme_UI = require("./Theme/UI.cjs");
const kit_Theme_themeUtils = require("./Theme/themeUtils.cjs");
const kit_Theme_themes = require("./Theme/themes.cjs");
const base = "Collection_base_52312";
const row = "Collection_row_52312";
const css = {
  base,
  row
};
const LayoutMode = {
  AutoFill: "auto-fill",
  // will squeeze as many items into a given space and minimum size
  AutoFit: "auto-fit",
  // auto-fill but also stretch to fit the entire available space.
  ScrollableRow: "scrollableRow"
};
const sizeMap = {
  [kit_Theme_themes.ShirtSize.Small]: kit_Theme_themeUtils.Spacing.Xs,
  [kit_Theme_themes.ShirtSize.Medium]: kit_Theme_themeUtils.Spacing.Md,
  [kit_Theme_themes.ShirtSize.Large]: kit_Theme_themeUtils.Spacing.Xl
};
const Collection = ({
  gap = kit_Theme_themes.ShirtSize.Medium,
  minItemWidth = 240,
  mode = LayoutMode.AutoFit,
  children
}) => {
  const {
    themeSettings: { className: themeClass }
  } = kit_Theme_UI.useTheme();
  const count = React.Children.toArray(children).length;
  const style = {
    gridGap: sizeMap[gap],
    gridTemplateColumns: ""
  };
  const classes = [css.base, themeClass];
  if (mode === LayoutMode.AutoFill || LayoutMode.AutoFit) {
    style.gridTemplateColumns = `repeat(${mode}, minmax(${minItemWidth}px, 1fr))`;
  }
  if (mode === LayoutMode.ScrollableRow) {
    classes.push(css.row);
    style.gridTemplateColumns = `repeat(${count}, ${minItemWidth}px)`;
  }
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.join(" "), style, children });
};
exports.LayoutMode = LayoutMode;
exports.default = Collection;
