"use strict";
var import_Column = require("../Column.css");
const jsxRuntime = require("react/jsx-runtime");
const _ = require("lodash");
const kit_Theme_UI = require("./Theme/UI.cjs");
require("./Theme/themeUtils.cjs");
require("./Theme/themes.cjs");
const breakpointMobile = "768px";
const column = "Column_column_59320";
const hideInMobile = "Column_hideInMobile_59320";
const css = {
  breakpointMobile,
  column,
  "align-left": "Column_align-left_59320",
  "align-center": "Column_align-center_59320",
  "align-right": "Column_align-right_59320",
  hideInMobile
};
const Column = ({
  children,
  gap = 8,
  align = "left",
  width = "fill",
  hideInMobile: hideInMobile2
}) => {
  const {
    themeSettings: { className: themeClass }
  } = kit_Theme_UI.useTheme();
  const classes = [css.column, css[`align-${align}`], themeClass];
  if (hideInMobile2) {
    classes.push(css.hideInMobile);
  }
  let flex = "";
  if (width && _.isNumber(width)) {
    flex = `0 0 ${width}px`;
  } else if (width === "hug") {
    flex = "0 0 fit-content";
  } else if (width === "fill") {
    flex = "1 0 fit-content";
  } else if (width === "shrink") {
    flex = "0 1 fit-content";
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: classes.join(" "),
      style: {
        flex,
        gap: gap + "px"
      },
      children
    }
  );
};
module.exports = Column;
