@makeswift/runtime 0.2.19 → 0.3.1

package/dist/Navigation.cjs.js

@@ -32,16 +32,14 @@ var __objRest = (source, exclude) => {
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
-var styled = require("styled-components");
-var index = require("./index.cjs4.js");
+var index = require("./index.cjs3.js");
 var Image = require("./Image.cjs.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");
+var jsxRuntime = require("react/jsx-runtime");
+var index$1 = require("./index.cjs2.js");
+var css = require("@emotion/css");
 require("next/image");
-require("./useBoxShadow.cjs.js");
 require("./placeholders.cjs.js");
 require("use-sync-external-store/shim/with-selector");
 require("./react-page.cjs.js");
@@ -57,7 +55,6 @@ require("slate");
 require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
-require("@emotion/css");
 require("color");
 require("scroll-into-view-if-needed");
 require("./box-models.cjs.js");
@@ -74,9 +71,6 @@ require("set-cookie-parser");
 require("uuid/v4");
 require("corporate-ipsum");
 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;
@@ -98,7 +92,6 @@ function _interopNamespace(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) {
@@ -123,15 +116,20 @@ var SvgMobileMenu28 = function SvgMobileMenu282(props) {
     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;
-`;
+function PlaceholderLink({
+  width,
+  button
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: next.useStyle({
+      width,
+      height: button === true ? 32 : 8,
+      backgroundColor: "#a1a8c2",
+      borderRadius: button === true ? 6 : 2,
+      opacity: 0.4
+    })
+  });
+}
 const links = [{
   width: 50
 }, {
@@ -253,28 +251,38 @@ var SvgChevronDown8 = function SvgChevronDown82(props) {
   })));
 };
 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`
+const DROP_DOWN_MENU_CLASS_NAME = "drop-down-menu";
+function DropDownMenu$1(_a) {
+  var _b = _a, {
+    className,
+    position
+  } = _b, restOfProps = __objRest(_b, [
+    "className",
+    "position"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(DROP_DOWN_MENU_CLASS_NAME, next.useStyle({
+      position: "absolute",
+      top: "100%",
+      left: position === "left" ? 0 : "auto",
+      right: position === "right" ? 0 : "auto",
+      background: "#fff",
+      margin: 0,
+      padding: "8px 0",
+      borderRadius: 4,
+      boxShadow: "0 3px 10px rgba(0, 0, 0, 0.15)",
+      width: DROP_DOWN_MENU_WIDTH,
+      zIndex: 99,
+      listStyle: "none",
+      overflow: "hidden",
+      transformOrigin: "50% 0",
+      willChange: "transform, opacity",
+      transformStyle: "preserve-3d",
+      display: "none"
+    }), className)
+  }));
+}
+const dropIn = css.keyframes`
   0% {
       opacity: 0;
       transform: rotateX(-20deg);
@@ -284,66 +292,75 @@ const dropIn = styled.keyframes`
       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"
+const DropDownContainer = React.forwardRef(function DropDownContainer2(_c, ref) {
+  var _d = _c, {
+    className
+  } = _d, restOfProps = __objRest(_d, [
+    "className"
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledDropDownItem, __spreadProps(__spreadValues({}, restOfProps), {
-    color: next.useResponsiveColor(color)
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: css.cx(next.useStyle({
+      position: "relative",
+      [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {
+        display: "block",
+        animation: `${dropIn} 0.25s`
+      }
+    }), className)
+  }));
+});
+function DropDownItem$1(_e) {
+  var _f = _e, {
+    className,
+    color,
+    textStyle
+  } = _f, restOfProps = __objRest(_f, [
+    "className",
+    "color",
+    "textStyle"
+  ]);
+  const colorData = next.useResponsiveColor(color);
+  return /* @__PURE__ */ jsxRuntime.jsx(index$1.Link, __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      display: "block",
+      textDecoration: "none",
+      lineHeight: 1.4,
+      padding: "8px 16px",
+      color: "black",
+      backgroundColor: "transparent",
+      transition: "background-color 0.2s"
+    }), next.useStyle(next.responsiveTextStyle(textStyle)), next.useStyle(next.responsiveStyle([colorData, textStyle], ([color2, textStyle2 = {}]) => {
+      const fontSize = textStyle2.fontSize || {
+        value: 14,
+        unit: "px"
+      };
+      const fontWeight = textStyle2.fontWeight == null ? "normal" : textStyle2.fontWeight;
+      const fontStyle = textStyle2.fontStyle || [];
+      const letterSpacing = textStyle2.letterSpacing == null ? null : textStyle2.letterSpacing;
+      const textTransform = textStyle2.textTransform || [];
+      return {
+        color: color2 == null ? "black" : next.colorToString(color2),
+        fontSize: `${fontSize.value}${fontSize.unit}`,
+        fontWeight,
+        fontStyle: fontStyle.includes("italic") ? "italic" : "normal",
+        letterSpacing: letterSpacing == null ? "normal" : `${letterSpacing}px`,
+        textTransform: textTransform.includes("uppercase") ? "uppercase" : "none"
+      };
+    })), next.useStyle({
+      "&:hover": {
+        backgroundColor: "rgba(0, 0, 0, 0.04)"
+      }
+    }), className)
   }));
 }
-function DropDownButton(_c) {
-  var _d = _c, {
+function DropDownButton(_g) {
+  var _h = _g, {
     label,
     caret = "caret",
     links: links2 = [],
     textColor,
     color
-  } = _d, restOfProps = __objRest(_d, [
+  } = _h, restOfProps = __objRest(_h, [
     "label",
     "caret",
     "links",
@@ -419,40 +436,58 @@ var SvgTimes16 = function SvgTimes162(props) {
     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"
+function DropDownMenu(_i) {
+  var _j = _i, {
+    className,
+    open
+  } = _j, restOfProps = __objRest(_j, [
+    "className",
+    "open"
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledLink, __spreadProps(__spreadValues({}, restOfProps), {
-    color: next.useResponsiveColor(color)
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      display: open ? "flex" : "none",
+      flexDirection: "column",
+      padding: 8
+    }), className)
   }));
 }
-function MobileDropDownButton(_g) {
-  var _h = _g, {
+function ButtonLink$1(_k) {
+  var _l = _k, {
+    className
+  } = _l, restOfProps = __objRest(_l, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Button["default"], __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      margin: "8px 0"
+    }), className)
+  }));
+}
+function DropDownItem(_m) {
+  var _n = _m, {
+    color,
+    className,
+    textStyle
+  } = _n, restOfProps = __objRest(_n, [
+    "color",
+    "className",
+    "textStyle"
+  ]);
+  const colorData = next.useResponsiveColor(color);
+  return /* @__PURE__ */ jsxRuntime.jsx(index$1.Link, __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      textDecoration: "none",
+      lineHeight: 1.4,
+      padding: "8px 16px",
+      color: "black"
+    }), next.useStyle(next.responsiveTextStyle(textStyle)), next.useStyle(next.responsiveStyle([colorData], ([color2]) => ({
+      color: color2 == null ? "black" : next.colorToString(color2)
+    }))), className)
+  }));
+}
+function MobileDropDownButton(_o) {
+  var _p = _o, {
     label,
     caret,
     links: links2 = [],
@@ -460,7 +495,7 @@ function MobileDropDownButton(_g) {
     },
     color,
     textColor
-  } = _h, restOfProps = __objRest(_h, [
+  } = _p, restOfProps = __objRest(_p, [
     "label",
     "caret",
     "links",
@@ -506,71 +541,96 @@ function MobileDropDownButton(_g) {
     })]
   });
 }
-function NavigationButton$1(props) {
-  const _a = props, {
+function ButtonLink(_q) {
+  var _r = _q, {
+    className,
     textColor,
     color
-  } = _a, restOfProps = __objRest(_a, [
+  } = _r, restOfProps = __objRest(_r, [
+    "className",
     "textColor",
     "color"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Button["default"], __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      margin: "8px 0"
+    }), className),
     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 Container$1(_s) {
+  var _t = _s, {
+    className,
+    animation,
+    backgroundColor,
+    open
+  } = _t, restOfProps = __objRest(_t, [
+    "className",
+    "animation",
+    "backgroundColor",
+    "open"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      position: "fixed",
+      flexDirection: "column",
+      width: "100%",
+      padding: "40px 15px",
+      transition: "transform 300ms ease-in-out",
+      overflowY: "auto",
+      zIndex: 9999,
+      maxWidth: 575
+    }), next.useStyle(next.responsiveStyle([animation, backgroundColor], ([animation2, backgroundColor2]) => {
+      if (animation2 == null)
+        return {
+          display: "none"
+        };
+      return __spreadValues({
+        display: "flex",
+        backgroundColor: backgroundColor2 == null ? "black" : next.colorToString(backgroundColor2),
+        transform: open ? `translate3d(0,0,0)` : `translate3d(${{
+          coverRight: "",
+          coverLeft: "-"
+        }[animation2]}100%, 0, 0)`
+      }, {
+        coverRight: {
+          top: 0,
+          bottom: 0,
+          right: 0
+        },
+        coverLeft: {
+          top: 0,
+          bottom: 0,
+          left: 0
+        }
+      }[animation2]);
+    })), className)
+  }));
+}
+function CloseIconContainer(_u) {
+  var _v = _u, {
+    className,
+    color
+  } = _v, restOfProps = __objRest(_v, [
+    "className",
+    "color"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      position: "absolute",
+      top: 15,
+      right: 15,
+      padding: 0,
+      border: 0,
+      outline: 0,
+      background: "none",
+      fill: "currentcolor"
+    }), next.useStyle(next.responsiveStyle([color], ([color2]) => ({
+      color: color2 == null ? "rgba(161, 168, 194, 0.5)" : next.colorToString(color2)
+    }))), className)
+  }));
+}
 function MobileMenu({
   animation,
   backgroundColor,
@@ -606,49 +666,83 @@ function MobileMenu({
     })]
   });
 }
-const Container = styled__default["default"].nav.withConfig({
-  shouldForwardProp: (prop) => !["width", "margin", "textStyle", "gutter"].includes(prop.toString())
-})`
-  display: flex;
-  align-items: center;
-  ${cssMediaRules.cssWidth()}
-  ${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)};
-      `)}
-`;
+const Container = React.forwardRef(function Container2(_w, ref) {
+  var _x = _w, {
+    className,
+    width,
+    margin,
+    textStyle,
+    gutter
+  } = _x, restOfProps = __objRest(_x, [
+    "className",
+    "width",
+    "margin",
+    "textStyle",
+    "gutter"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: css.cx(next.useStyle({
+      display: "flex",
+      alignItems: "center"
+    }), width, margin, next.useStyle(next.responsiveTextStyle(textStyle)), next.useStyle(next.responsiveStyle([gutter], ([gutter2 = {
+      value: 0,
+      unit: "px"
+    }]) => ({
+      gap: `${gutter2.value}${gutter2.unit}`
+    }))), className)
+  }));
+});
+function LinksContainer(_y) {
+  var _z = _y, {
+    className,
+    alignment,
+    mobileMenuAnimation
+  } = _z, restOfProps = __objRest(_z, [
+    "className",
+    "alignment",
+    "mobileMenuAnimation"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      display: "flex",
+      alignItems: "center",
+      flexGrow: 1
+    }), next.useStyle(next.responsiveStyle([alignment, mobileMenuAnimation], ([alignment2 = "flex-end", mobileMenuAnimation2]) => ({
+      display: mobileMenuAnimation2 == null ? "flex" : "none",
+      justifyContent: alignment2
+    }))), className)
+  }));
+}
+function OpenIconContainer(_A) {
+  var _B = _A, {
+    className,
+    mobileMenuAnimation,
+    alignment,
+    color
+  } = _B, restOfProps = __objRest(_B, [
+    "className",
+    "mobileMenuAnimation",
+    "alignment",
+    "color"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      display: "none",
+      flexGrow: 1,
+      alignItems: "center",
+      background: "none",
+      outline: 0,
+      border: 0,
+      padding: 0,
+      fill: "currentcolor"
+    }), next.useStyle(next.responsiveStyle([mobileMenuAnimation, alignment, color], ([mobileMenuAnimation2, alignment2 = "flex-end", color2]) => ({
+      display: mobileMenuAnimation2 == null ? "none" : "flex",
+      justifyContent: alignment2,
+      color: color2 == null ? "rgba(161, 168, 194, 0.5)" : next.colorToString(color2)
+    }))), className)
+  }));
+}
 function NavigationButton(props) {
   const _a = props, {
     textColor,