@makeswift/runtime 0.0.21 → 0.1.0

package/dist/Navigation.cjs.js

@@ -0,0 +1,736 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var React = require("react");
+var styled = require("styled-components");
+var css = require("@emotion/css");
+var index = require("./index.cjs4.js");
+var Image = require("./Image.cjs2.js");
+var Button = require("./Button.cjs.js");
+var jsxRuntime = require("react/jsx-runtime");
+var cssMediaRules = require("./cssMediaRules.cjs.js");
+var next = require("./index.cjs.js");
+var index$1 = require("./index.cjs3.js");
+require("next/image");
+require("./useBoxShadow.cjs.js");
+require("./placeholders.cjs.js");
+require("use-sync-external-store/shim/with-selector");
+require("./react-page.cjs.js");
+require("redux");
+require("redux-thunk");
+require("./actions.cjs.js");
+require("./descriptors.cjs.js");
+require("./style.cjs.js");
+require("./color.cjs.js");
+require("./image.cjs.js");
+require("next/dynamic");
+require("next/document");
+require("slate");
+require("@emotion/server/create-instance");
+require("@apollo/client");
+require("@apollo/client/link/batch-http");
+require("./graphql.cjs.js");
+require("./text-input.cjs.js");
+require("./shape.cjs.js");
+require("color");
+require("react-dom");
+require("html-react-parser");
+require("next/head");
+require("uuid/v4");
+require("corporate-ipsum");
+require("scroll-into-view-if-needed");
+require("next/link");
+function _interopDefaultLegacy(e) {
+  return e && typeof e === "object" && "default" in e ? e : { "default": e };
+}
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  var n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    Object.keys(e).forEach(function(k) {
+      if (k !== "default") {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function() {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+var React__namespace = /* @__PURE__ */ _interopNamespace(React);
+var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
+var _path$5;
+function _extends$5() {
+  _extends$5 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$5.apply(this, arguments);
+}
+var SvgMobileMenu28 = function SvgMobileMenu282(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$5({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 28,
+    height: 28
+  }, props), _path$5 || (_path$5 = /* @__PURE__ */ React__namespace.createElement("path", {
+    d: "M27 15H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h26a1 1 0 0 1 1 1 1 1 0 0 1-1 1zm0-10H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 16H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1z"
+  })));
+};
+const PlaceholderLink = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["width", "button"].includes(prop.toString())
+})`
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.button === true ? 32 : 8}px;
+  background-color: #a1a8c2;
+  border-radius: ${(props) => props.button === true ? 6 : 2}px;
+  opacity: 0.4;
+`;
+const links = [{
+  width: 50
+}, {
+  width: 70
+}, {
+  width: 60
+}, {
+  width: 80,
+  button: true
+}];
+function LinksPlaceholder({
+  gutter
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: links.map((link, i) => /* @__PURE__ */ jsxRuntime.jsx(index.GutterContainer, {
+      gutter,
+      first: i === 0,
+      last: i === links.length - 1,
+      children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderLink, __spreadValues({}, link))
+    }, i))
+  });
+}
+var _path$4;
+function _extends$4() {
+  _extends$4 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$4.apply(this, arguments);
+}
+var SvgCaretDown8 = function SvgCaretDown82(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$4({
+    width: 8,
+    height: 8,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$4 || (_path$4 = /* @__PURE__ */ React__namespace.createElement("path", {
+    d: "M1 2a1 1 0 0 0-.707 1.707l3 3a1 1 0 0 0 1.414 0l3-3A1 1 0 0 0 7 2H1z"
+  })));
+};
+var _path$3;
+function _extends$3() {
+  _extends$3 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$3.apply(this, arguments);
+}
+var SvgPlus8 = function SvgPlus82(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$3({
+    width: 8,
+    height: 8,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$3 || (_path$3 = /* @__PURE__ */ React__namespace.createElement("path", {
+    d: "M4 0a1 1 0 0 0-1 1v2H1a1 1 0 1 0 0 2h2v2a1 1 0 0 0 2 0V5h2a1 1 0 0 0 0-2H5V1a1 1 0 0 0-1-1z"
+  })));
+};
+var _path$2;
+function _extends$2() {
+  _extends$2 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$2.apply(this, arguments);
+}
+var SvgArrowDown8 = function SvgArrowDown82(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$2({
+    width: 8,
+    height: 8,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$2 || (_path$2 = /* @__PURE__ */ React__namespace.createElement("path", {
+    d: "M5 1a1 1 0 0 0-2 0v3.586l-.293-.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l2-2a1 1 0 0 0-1.414-1.414L5 4.586V1z"
+  })));
+};
+var _path$1;
+function _extends$1() {
+  _extends$1 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
+var SvgChevronDown8 = function SvgChevronDown82(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$1({
+    width: 8,
+    height: 8,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1 || (_path$1 = /* @__PURE__ */ React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M.293 2.293a1 1 0 0 1 1.414 0L4 4.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"
+  })));
+};
+const DROP_DOWN_MENU_WIDTH = 200;
+const DropDownMenu$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["position"].includes(prop.toString())
+})`
+  position: absolute;
+  top: 100%;
+  left: ${(props) => props.position === "left" ? 0 : "auto"};
+  right: ${(props) => props.position === "right" ? 0 : "auto"};
+  background: #fff;
+  margin: 0;
+  padding: 8px 0;
+  border-radius: 4px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
+  width: ${DROP_DOWN_MENU_WIDTH}px;
+  z-index: 99;
+  list-style: none;
+  overflow: hidden;
+  transform-origin: 50% 0;
+  will-change: transform, opacity;
+  transform-style: preserve-3d;
+  display: none;
+`;
+const dropIn = styled.keyframes`
+  0% {
+      opacity: 0;
+      transform: rotateX(-20deg);
+  }
+  100% {
+      opacity: 1;
+      transform: none;
+  }
+`;
+const DropDownContainer = styled__default["default"].div`
+  position: relative;
+
+  &:hover > ${DropDownMenu$1} {
+    display: block;
+    animation: ${dropIn} 0.25s;
+  }
+`;
+const StyledDropDownItem = styled__default["default"](index$1.Link).withConfig({
+  shouldForwardProp: (prop) => !["color", "textStyle"].includes(prop.toString())
+})`
+  display: block;
+  text-decoration: none;
+  line-height: 1.4;
+  padding: 8px 16px;
+  color: black;
+  background-color: transparent;
+  transition: background-color 0.2s;
+  ${cssMediaRules.cssTextStyle()}
+  ${(p) => cssMediaRules.cssMediaRules([p.color, p.textStyle], ([color, textStyle = {}]) => {
+  const fontSize = textStyle.fontSize || {
+    value: 14,
+    unit: "px"
+  };
+  const fontWeight = textStyle.fontWeight == null ? "normal" : textStyle.fontWeight;
+  const fontStyle = textStyle.fontStyle || [];
+  const letterSpacing = textStyle.letterSpacing == null ? null : textStyle.letterSpacing;
+  const textTransform = textStyle.textTransform || [];
+  return styled.css`
+        color: ${color == null ? "black" : next.colorToString(color)};
+        font-size: ${`${fontSize.value}${fontSize.unit}`};
+        font-weight: ${fontWeight};
+        font-style: ${fontStyle.includes("italic") ? "italic" : "normal"};
+        letter-spacing: ${letterSpacing == null ? "normal" : `${letterSpacing}px`};
+        text-transform: ${textTransform.includes("uppercase") ? "uppercase" : "none"};
+      `;
+})}
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+`;
+function DropDownItem$1(_a) {
+  var _b = _a, {
+    color
+  } = _b, restOfProps = __objRest(_b, [
+    "color"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledDropDownItem, __spreadProps(__spreadValues({}, restOfProps), {
+    color: next.useResponsiveColor(color)
+  }));
+}
+function DropDownButton(_c) {
+  var _d = _c, {
+    label,
+    caret = "caret",
+    links: links2 = [],
+    textColor,
+    color
+  } = _d, restOfProps = __objRest(_d, [
+    "label",
+    "caret",
+    "links",
+    "textColor",
+    "color"
+  ]);
+  const container = React.useRef(null);
+  const [position, setPosition] = React.useState("left");
+  next.useIsomorphicLayoutEffect(() => {
+    if (container.current && container.current.ownerDocument.defaultView.innerWidth < container.current.offsetLeft + DROP_DOWN_MENU_WIDTH) {
+      setPosition("right");
+    } else {
+      setPosition("left");
+    }
+  }, [setPosition]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropDownContainer, {
+    ref: container,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Button["default"], __spreadProps(__spreadValues({}, restOfProps), {
+      textColor: next.useResponsiveColor(textColor),
+      color: next.useResponsiveColor(color),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        style: {
+          display: "flex",
+          alignItems: "center"
+        },
+        children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
+          style: {
+            marginRight: 6
+          },
+          children: label
+        }), /* @__PURE__ */ jsxRuntime.jsxs("span", {
+          style: {
+            display: "inline-flex",
+            fill: "currentColor"
+          },
+          children: [caret === "caret" && /* @__PURE__ */ jsxRuntime.jsx(SvgCaretDown8, {}), caret === "plus" && /* @__PURE__ */ jsxRuntime.jsx(SvgPlus8, {}), caret === "arrow-down" && /* @__PURE__ */ jsxRuntime.jsx(SvgArrowDown8, {}), caret === "chevron-down" && /* @__PURE__ */ jsxRuntime.jsx(SvgChevronDown8, {})]
+        })]
+      })
+    })), /* @__PURE__ */ jsxRuntime.jsx(DropDownMenu$1, {
+      position,
+      children: links2.map(({
+        id,
+        payload
+      }) => /* @__PURE__ */ React.createElement(DropDownItem$1, __spreadProps(__spreadValues({}, payload), {
+        key: id
+      }), payload.label))
+    })]
+  });
+}
+var _path;
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+var SvgTimes16 = function SvgTimes162(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /* @__PURE__ */ React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.707 3.707a1 1 0 0 0-1.414-1.414L8 6.586 3.707 2.293a1 1 0 0 0-1.414 1.414L6.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414L8 9.414l4.293 4.293a1 1 0 0 0 1.414-1.414L9.414 8l4.293-4.293Z"
+  })));
+};
+const DropDownMenu = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["open"].includes(prop.toString())
+})`
+  display: ${(props) => props.open ? "flex" : "none"};
+  flex-direction: column;
+  padding: 8px;
+`;
+const ButtonLink$1 = styled__default["default"](Button["default"])`
+  margin: 8px 0;
+`;
+const StyledLink = styled__default["default"](index$1.Link).withConfig({
+  shouldForwardProp: (prop) => !["textStyle", "color"].includes(prop.toString())
+})`
+  text-decoration: none;
+  line-height: 1.4;
+  padding: 8px 16px;
+  color: black;
+  ${cssMediaRules.cssTextStyle()}
+  ${(p) => cssMediaRules.cssMediaRules([p.color], ([color]) => styled.css`
+        color: ${color == null ? "black" : next.colorToString(color)};
+      `)}
+`;
+function DropDownItem(_e) {
+  var _f = _e, {
+    color
+  } = _f, restOfProps = __objRest(_f, [
+    "color"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledLink, __spreadProps(__spreadValues({}, restOfProps), {
+    color: next.useResponsiveColor(color)
+  }));
+}
+function MobileDropDownButton(_g) {
+  var _h = _g, {
+    label,
+    caret,
+    links: links2 = [],
+    onClose = () => {
+    },
+    color,
+    textColor
+  } = _h, restOfProps = __objRest(_h, [
+    "label",
+    "caret",
+    "links",
+    "onClose",
+    "color",
+    "textColor"
+  ]);
+  const [isOpen, setIsOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(ButtonLink$1, __spreadProps(__spreadValues({}, restOfProps), {
+      textColor: next.useResponsiveColor(textColor),
+      color: next.useResponsiveColor(color),
+      onPointerDown: () => setIsOpen((prev) => !prev),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        style: {
+          display: "flex",
+          alignItems: "center"
+        },
+        children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
+          style: {
+            marginRight: 6
+          },
+          children: label
+        }), /* @__PURE__ */ jsxRuntime.jsx("span", {
+          style: {
+            display: "inline-flex",
+            fill: "currentColor"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [caret === "caret" && /* @__PURE__ */ jsxRuntime.jsx(SvgCaretDown8, {}), caret === "plus" && /* @__PURE__ */ jsxRuntime.jsx(SvgPlus8, {}), caret === "arrow-down" && /* @__PURE__ */ jsxRuntime.jsx(SvgArrowDown8, {}), caret === "chevron-down" && /* @__PURE__ */ jsxRuntime.jsx(SvgChevronDown8, {})]
+          })
+        })]
+      })
+    })), /* @__PURE__ */ jsxRuntime.jsx(DropDownMenu, {
+      open: isOpen,
+      children: links2.map(({
+        id,
+        payload
+      }) => /* @__PURE__ */ React.createElement(DropDownItem, __spreadProps(__spreadValues({}, payload), {
+        key: id,
+        onClick: onClose
+      }), payload.label))
+    })]
+  });
+}
+function NavigationButton$1(props) {
+  const _a = props, {
+    textColor,
+    color
+  } = _a, restOfProps = __objRest(_a, [
+    "textColor",
+    "color"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Button["default"], __spreadProps(__spreadValues({}, restOfProps), {
+    textColor: next.useResponsiveColor(textColor),
+    color: next.useResponsiveColor(color)
+  }));
+}
+const ButtonLink = styled__default["default"](NavigationButton$1)`
+  margin: 8px 0;
+`;
+const Container$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["animation", "backgroundColor", "open"].includes(prop.toString())
+})`
+  position: fixed;
+  flex-direction: column;
+  width: 100%;
+  padding: 40px 15px;
+  transition: transform 300ms ease-in-out;
+  overflow-y: auto;
+  z-index: 9999;
+  max-width: 575px;
+  ${(p) => cssMediaRules.cssMediaRules([p.animation, p.backgroundColor], ([animation, backgroundColor]) => animation == null ? styled.css`
+            display: none;
+          ` : styled.css`
+            display: flex;
+            background-color: ${backgroundColor == null ? "black" : next.colorToString(backgroundColor)};
+            transform: ${p.open ? `translate3d(0,0,0)` : `translate3d(${{
+  coverRight: "",
+  coverLeft: "-"
+}[animation]}100%, 0, 0)`};
+            ${{
+  coverRight: {
+    top: 0,
+    bottom: 0,
+    right: 0
+  },
+  coverLeft: {
+    top: 0,
+    bottom: 0,
+    left: 0
+  }
+}[animation]}
+          `)}
+`;
+const CloseIconContainer = styled__default["default"].button.withConfig({
+  shouldForwardProp: (prop) => !["color"].includes(prop.toString())
+})`
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: none;
+  fill: currentColor;
+  ${(p) => cssMediaRules.cssMediaRules([p.color], ([color]) => styled.css`
+        color: ${color == null ? "rgba(161, 168, 194, 0.5)" : next.colorToString(color)};
+      `)}
+`;
+function MobileMenu({
+  animation,
+  backgroundColor,
+  open = false,
+  closeIconColor,
+  links: links2 = [],
+  onClose = () => {
+  }
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container$1, {
+    animation,
+    backgroundColor,
+    open,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(CloseIconContainer, {
+      color: closeIconColor,
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxRuntime.jsx(SvgTimes16, {})
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        flexShrink: 0
+      },
+      children: links2.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, {
+        children: [link.type === "button" && /* @__PURE__ */ jsxRuntime.jsx(ButtonLink, __spreadProps(__spreadValues({}, link.payload), {
+          onClick: onClose,
+          children: link.payload.label
+        })), link.type === "dropdown" && /* @__PURE__ */ jsxRuntime.jsx(MobileDropDownButton, __spreadProps(__spreadValues({}, link.payload), {
+          onClose
+        }))]
+      }, link.id))
+    })]
+  });
+}
+const Container = styled__default["default"].nav.withConfig({
+  shouldForwardProp: (prop) => !["margin", "textStyle", "gutter"].includes(prop.toString())
+})`
+  display: flex;
+  align-items: center;
+  ${cssMediaRules.cssMargin()}
+  ${cssMediaRules.cssTextStyle()}
+  ${(p) => cssMediaRules.cssMediaRules([p.gutter], ([gutter = {
+  value: 0,
+  unit: "px"
+}]) => styled.css`
+        gap: ${gutter.value}${gutter.unit};
+      `)}
+`;
+const LinksContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["alignment", "mobileMenuAnimation"].includes(prop.toString())
+})`
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  ${(p) => cssMediaRules.cssMediaRules([p.alignment, p.mobileMenuAnimation], ([alignment = "flex-end", mobileMenuAnimation]) => styled.css`
+        display: ${mobileMenuAnimation == null ? "flex" : "none"};
+        justify-content: ${alignment};
+      `)}
+`;
+const OpenIconContainer = styled__default["default"].button.withConfig({
+  shouldForwardProp: (prop) => !["mobileMenuAnimation", "alignment", "color"].includes(prop.toString())
+})`
+  display: none;
+  flex-grow: 1;
+  align-items: center;
+  background: none;
+  outline: 0;
+  border: 0;
+  padding: 0;
+  fill: currentColor;
+  ${(p) => cssMediaRules.cssMediaRules([p.mobileMenuAnimation, p.alignment, p.color], ([mobileMenuAnimation, alignment = "flex-end", color]) => styled.css`
+        display: ${mobileMenuAnimation == null ? "none" : "flex"};
+        justify-content: ${alignment};
+        color: ${color == null ? "rgba(161, 168, 194, 0.5)" : next.colorToString(color)};
+      `)}
+`;
+function NavigationButton(props) {
+  const _a = props, {
+    textColor,
+    color
+  } = _a, restOfProps = __objRest(_a, [
+    "textColor",
+    "color"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Button["default"], __spreadProps(__spreadValues({}, restOfProps), {
+    textColor: next.useResponsiveColor(textColor),
+    color: next.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 = React.forwardRef(function Navigation2({
+  id,
+  links: links2 = [],
+  linkTextStyle,
+  showLogo,
+  logoFile,
+  logoWidth,
+  logoAltText,
+  logoLink,
+  alignment,
+  gutter,
+  mobileMenuAnimation,
+  mobileMenuOpenIconColor,
+  mobileMenuCloseIconColor,
+  mobileMenuBackgroundColor,
+  width,
+  margin
+}, ref) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, {
+    ref,
+    id,
+    className: css.cx(width),
+    margin,
+    textStyle: linkTextStyle,
+    gutter,
+    children: [showLogo === true && /* @__PURE__ */ jsxRuntime.jsx(Image["default"], {
+      altText: logoAltText,
+      file: logoFile,
+      link: logoLink,
+      placeholder,
+      width: logoWidth
+    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      style: {
+        display: "flex",
+        flexGrow: 1,
+        justifyContent: "flex-end"
+      },
+      children: [/* @__PURE__ */ jsxRuntime.jsx(LinksContainer, {
+        alignment,
+        mobileMenuAnimation,
+        children: links2.length > 0 ? links2.map((link, i) => /* @__PURE__ */ jsxRuntime.jsxs(index.GutterContainer, {
+          gutter,
+          first: i === 0,
+          last: i === links2.length - 1,
+          children: [link.type === "button" && /* @__PURE__ */ jsxRuntime.jsx(NavigationButton, __spreadProps(__spreadValues({}, link.payload), {
+            children: link.payload.label
+          })), link.type === "dropdown" && /* @__PURE__ */ jsxRuntime.jsx(DropDownButton, __spreadValues({}, link.payload))]
+        }, link.id)) : /* @__PURE__ */ jsxRuntime.jsx(LinksPlaceholder, {
+          gutter
+        })
+      }), /* @__PURE__ */ jsxRuntime.jsx(OpenIconContainer, {
+        alignment,
+        color: mobileMenuOpenIconColor,
+        mobileMenuAnimation,
+        onClick: () => setIsOpen(true),
+        children: /* @__PURE__ */ jsxRuntime.jsx(SvgMobileMenu28, {})
+      }), /* @__PURE__ */ jsxRuntime.jsx(MobileMenu, {
+        animation: mobileMenuAnimation,
+        backgroundColor: mobileMenuBackgroundColor,
+        closeIconColor: mobileMenuCloseIconColor,
+        links: links2,
+        onClose: () => setIsOpen(false),
+        open: isOpen
+      })]
+    })]
+  });
+});
+exports["default"] = Navigation;
+//# sourceMappingURL=Navigation.cjs.js.map