import "../Row.css";
import { jsx } from "react/jsx-runtime";
import { isNumber } from "./internal/functions.js";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
const row = "Row_row_f1367";
const wrap = "Row_wrap_f1367";
const css = {
  row,
  wrap,
  "align-top": "Row_align-top_f1367",
  "align-center": "Row_align-center_f1367",
  "align-bottom": "Row_align-bottom_f1367"
};
const Row = ({
  justifyContent,
  width,
  align = "center",
  children,
  gap = 8,
  wrap: wrap2,
  height
}) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const classes = [css.row, css[`align-${align}`], themeClass];
  if (wrap2)
    classes.push(css.wrap);
  let w = "auto";
  if (width && isNumber(width)) {
    w = `${width}px`;
  } else if (width === "fill") {
    w = "100%";
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: classes.join(" "),
      style: {
        gap: gap + "px",
        height: height ? height + "px" : "auto",
        justifyContent: justifyContent ?? "normal",
        width: w
      },
      children
    }
  );
};
export {
  Row,
  Row as default
};
