import "../Column.css";
import { jsx } from "react/jsx-runtime";
import { isNumber } from "lodash";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
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 }
  } = 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__ */ jsx(
    "div",
    {
      className: classes.join(" "),
      style: {
        flex,
        gap: gap + "px"
      },
      children
    }
  );
};
export {
  Column as default
};
