import { jsx as e, jsxs as t } from "react/jsx-runtime";
import { forwardRef as x } from "react";
import { noop as h } from "es-toolkit/function";
import N from "../../utils/classNames.js";
import f from "../button/Button.js";
const B = x((s, o) => {
  const {
    className: l,
    title: n,
    right: c = /* @__PURE__ */ e("span", {}),
    backButtonText: i = "",
    titleSize: r = "md",
    subtitle: a,
    border: d = !1,
    onNavigateBack: m = h,
    ...p
  } = s, g = N(
    "AppNavigationBar",
    "width-100pct height-45 user-select-none padding-x-10",
    "display-grid grid-stack align-items-center",
    r === "md" && "text-size-14",
    r === "lg" && "text-size-16",
    d && "border border-bottom-only border-color-lighter",
    l
  );
  return /* @__PURE__ */ t("div", { ref: o, ...p, className: g, children: [
    /* @__PURE__ */ t("div", { className: "grid-stack-item display-flex align-items-center justify-content-between", children: [
      /* @__PURE__ */ e(
        f,
        {
          bsStyle: "muted",
          className: "text-color-darkest",
          iconOnly: !i,
          iconName: "rioglyph-arrow-left",
          onClick: m,
          children: i
        }
      ),
      /* @__PURE__ */ e("div", { className: "btn-toolbar gap-2", children: c })
    ] }),
    /* @__PURE__ */ t("div", { className: "grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1", children: [
      /* @__PURE__ */ e("div", { className: "ellipsis-1", children: n }),
      a && /* @__PURE__ */ e("div", { className: "text-size-12 line-height-12 text-normal margin-top--2", children: a })
    ] })
  ] });
});
export {
  B as AppNavigationBar,
  B as default
};
//# sourceMappingURL=AppNavigationBar.js.map
