"use strict";
var import_Row = require("../Row.css");
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const jsxRuntime = require("react/jsx-runtime");
const kit_internal_functions = require("./internal/functions.cjs");
const kit_Theme_UI = require("./Theme/UI.cjs");
require("./Theme/themeUtils.cjs");
require("./Theme/themes.cjs");
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 }
  } = kit_Theme_UI.useTheme();
  const classes = [css.row, css[`align-${align}`], themeClass];
  if (wrap2)
    classes.push(css.wrap);
  let w = "auto";
  if (width && kit_internal_functions.isNumber(width)) {
    w = `${width}px`;
  } else if (width === "fill") {
    w = "100%";
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: classes.join(" "),
      style: {
        gap: gap + "px",
        height: height ? height + "px" : "auto",
        justifyContent: justifyContent ?? "normal",
        width: w
      },
      children
    }
  );
};
exports.Row = Row;
exports.default = Row;
