"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Navigation_exports = {};
__export(Navigation_exports, {
  default: () => Navigation_default
});
module.exports = __toCommonJS(Navigation_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_MobileMenu28 = require("../../icons/MobileMenu28");
var import_GutterContainer = __toESM(require("../../shared/GutterContainer"));
var import_Image = __toESM(require("../Image"));
var import_Button = __toESM(require("../Button"));
var import_LinksPlaceholder = __toESM(require("./components/LinksPlaceholder"));
var import_DropDownButton = __toESM(require("./components/DropDownButton"));
var import_MobileMenu = __toESM(require("./components/MobileMenu"));
var import_colorToString = require("../../utils/colorToString");
var import_hooks = require("../../hooks");
var import_css = require("@emotion/css");
var import_responsive_style = require("../../utils/responsive-style");
var import_use_style = require("../../../runtimes/react/use-style");
const Container = (0, import_react.forwardRef)(function Container2({ className, width, margin, textStyle, gutter, ...restOfProps }, ref) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "nav",
    {
      ...restOfProps,
      ref,
      className: (0, import_css.cx)(
        (0, import_use_style.useStyle)({ display: "flex", alignItems: "center" }),
        width,
        margin,
        (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveTextStyle)(textStyle)),
        (0, import_use_style.useStyle)(
          (0, import_responsive_style.useResponsiveStyle)([gutter], ([gutter2 = { value: 0, unit: "px" }]) => ({
            gap: `${gutter2.value}${gutter2.unit}`
          }))
        ),
        className
      )
    }
  );
});
function LinksContainer({
  className,
  alignment,
  mobileMenuAnimation,
  ...restOfProps
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      ...restOfProps,
      className: (0, import_css.cx)(
        (0, import_use_style.useStyle)({
          display: "flex",
          alignItems: "center",
          flexGrow: 1
        }),
        (0, import_use_style.useStyle)(
          (0, import_responsive_style.useResponsiveStyle)(
            [alignment, mobileMenuAnimation],
            ([alignment2 = "flex-end", mobileMenuAnimation2]) => ({
              display: mobileMenuAnimation2 == null ? "flex" : "none",
              justifyContent: alignment2
            })
          )
        ),
        className
      )
    }
  );
}
function OpenIconContainer({
  className,
  mobileMenuAnimation,
  alignment,
  color,
  ...restOfProps
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "button",
    {
      ...restOfProps,
      className: (0, import_css.cx)(
        (0, import_use_style.useStyle)({
          display: "none",
          flexGrow: 1,
          alignItems: "center",
          background: "none",
          outline: 0,
          border: 0,
          padding: 0,
          fill: "currentcolor"
        }),
        (0, import_use_style.useStyle)(
          (0, import_responsive_style.useResponsiveStyle)(
            [mobileMenuAnimation, alignment, color],
            ([mobileMenuAnimation2, alignment2 = "flex-end", color2]) => ({
              display: mobileMenuAnimation2 == null ? "none" : "flex",
              justifyContent: alignment2,
              color: color2 == null ? "rgba(161, 168, 194, 0.5)" : (0, import_colorToString.colorToString)(color2)
            })
          )
        ),
        className
      )
    }
  );
}
function NavigationButton(props) {
  const { textColor, color, ...restOfProps } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Button.default,
    {
      ...restOfProps,
      textColor: (0, import_hooks.useResponsiveColor)(textColor),
      color: (0, import_hooks.useResponsiveColor)(color)
    }
  );
}
const placeholder = {
  src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='93.12' height='36' viewBox='0 0 93.12 36'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M18,0A18,18,0,1,1,0,18,18,18,0,0,1,18,0ZM49.36,21.94h6.36V24H46.8V10h2.56Zm9.06.72a4.88,4.88,0,0,1-1.64-3.72,5,5,0,0,1,1.64-3.74,5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18l-.26.26a5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Zm10,10.68,1-1.92a5.28,5.28,0,0,0,3.3,1.22,3.6,3.6,0,0,0,2.32-.72,2.73,2.73,0,0,0,.9-2.26V22.5a3.61,3.61,0,0,1-1.45,1.26,4.35,4.35,0,0,1-2,.46,4.57,4.57,0,0,1-3.58-1.54A5.48,5.48,0,0,1,69.2,18.9a5.42,5.42,0,0,1,1.36-3.74,4.64,4.64,0,0,1,3.62-1.5,4,4,0,0,1,3.44,1.72v-1.5h2.46v9a6.13,6.13,0,0,1-1.43,4.46,5.27,5.27,0,0,1-4,1.44,7.09,7.09,0,0,1-4.53-1.42Zm1.54-8.44a3.4,3.4,0,0,0,.82,2.3,2.72,2.72,0,0,0,2.17.94,3.13,3.13,0,0,0,1.21-.22,2.89,2.89,0,0,0,1-.62,3.08,3.08,0,0,0,.63-1,3.62,3.62,0,0,0,.21-1.3,4,4,0,0,0-.23-1.33,3.3,3.3,0,0,0-.63-1.05,2.74,2.74,0,0,0-1-.68,3.35,3.35,0,0,0-1.25-.24,2.92,2.92,0,0,0-1.2.24,2.58,2.58,0,0,0-.93.67,3,3,0,0,0-.59,1,3.89,3.89,0,0,0-.19,1.31ZM83.8,22.66a4.88,4.88,0,0,1-1.64-3.72A5,5,0,0,1,83.8,15.2a5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18,3.19,3.19,0,0,1-.26.26,5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Z' fill='%23a1a8c2' opacity='0.4' style='isolation: isolate'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A",
  dimensions: { width: 93, height: 36 }
};
const Navigation = (0, import_react.forwardRef)(function Navigation2({
  id,
  links = [],
  linkTextStyle,
  showLogo,
  logoFile,
  logoWidth,
  logoAltText,
  logoLink,
  alignment,
  gutter,
  mobileMenuAnimation,
  mobileMenuOpenIconColor,
  mobileMenuCloseIconColor,
  mobileMenuBackgroundColor,
  width,
  margin
}, ref) {
  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    Container,
    {
      ref,
      id,
      width,
      margin,
      textStyle: linkTextStyle,
      gutter,
      children: [
        showLogo === true && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_Image.default,
          {
            altText: logoAltText,
            file: logoFile,
            link: logoLink,
            placeholder,
            width: logoWidth
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexGrow: 1, justifyContent: "flex-end" }, children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinksContainer, { alignment, mobileMenuAnimation, children: links.length > 0 ? links.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
            import_GutterContainer.default,
            {
              gutter,
              first: i === 0,
              last: i === links.length - 1,
              children: [
                link.type === "button" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationButton, { ...link.payload, children: link.payload.label }),
                link.type === "dropdown" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropDownButton.default, { ...link.payload })
              ]
            },
            link.id
          )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LinksPlaceholder.default, { gutter }) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            OpenIconContainer,
            {
              alignment,
              color: mobileMenuOpenIconColor,
              mobileMenuAnimation,
              onClick: () => setIsOpen(true),
              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MobileMenu28.MobileMenu28, {})
            }
          ),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_MobileMenu.default,
            {
              animation: mobileMenuAnimation,
              backgroundColor: mobileMenuBackgroundColor,
              closeIconColor: mobileMenuCloseIconColor,
              links,
              onClose: () => setIsOpen(false),
              open: isOpen
            }
          )
        ] })
      ]
    }
  );
});
var Navigation_default = Navigation;
//# sourceMappingURL=Navigation.js.map