@makeswift/runtime 0.2.19 → 0.3.0

package/dist/Navigation.es.js

@@ -30,17 +30,15 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
-import { useRef, useState, createElement, Fragment as Fragment$1, forwardRef } from "react";
-import styled, { keyframes, css } from "styled-components";
-import { G as GutterContainer } from "./index.es4.js";
+import { forwardRef, useRef, useState, createElement, Fragment as Fragment$1 } from "react";
+import { G as GutterContainer } from "./index.es3.js";
 import ImageComponent from "./Image.es.js";
 import Button from "./Button.es.js";
+import { q as useStyle, w as useIsomorphicLayoutEffect, l as useResponsiveColor, t as responsiveTextStyle, r as responsiveStyle, v as colorToString } from "./index.es.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { i as cssTextStyle, c as cssMediaRules, a as cssWidth, b as cssMargin } from "./cssMediaRules.es.js";
-import { q as useIsomorphicLayoutEffect, k as useResponsiveColor, p as colorToString } from "./index.es.js";
-import { L as Link } from "./index.es3.js";
+import { L as Link } from "./index.es2.js";
+import { keyframes, cx } from "@emotion/css";
 import "next/image";
-import "./useBoxShadow.es.js";
 import "./placeholders.es.js";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
@@ -56,7 +54,6 @@ import "slate";
 import "./graphql.es.js";
 import "./text-input.es.js";
 import "./combobox.es.js";
-import "@emotion/css";
 import "color";
 import "scroll-into-view-if-needed";
 import "./box-models.es.js";
@@ -97,15 +94,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.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__ */ jsx("div", {
+    className: useStyle({
+      width,
+      height: button === true ? 32 : 8,
+      backgroundColor: "#a1a8c2",
+      borderRadius: button === true ? 6 : 2,
+      opacity: 0.4
+    })
+  });
+}
 const links = [{
   width: 50
 }, {
@@ -227,27 +229,37 @@ var SvgChevronDown8 = function SvgChevronDown82(props) {
   })));
 };
 const DROP_DOWN_MENU_WIDTH = 200;
-const DropDownMenu$1 = styled.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 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__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(DROP_DOWN_MENU_CLASS_NAME, 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 = keyframes`
   0% {
       opacity: 0;
@@ -258,66 +270,75 @@ const dropIn = keyframes`
       transform: none;
   }
 `;
-const DropDownContainer = styled.div`
-  position: relative;
-
-  &:hover > ${DropDownMenu$1} {
-    display: block;
-    animation: ${dropIn} 0.25s;
-  }
-`;
-const StyledDropDownItem = styled(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;
-  ${cssTextStyle()}
-  ${(p) => 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 css`
-        color: ${color == null ? "black" : 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 = forwardRef(function DropDownContainer2(_c, ref) {
+  var _d = _c, {
+    className
+  } = _d, restOfProps = __objRest(_d, [
+    "className"
   ]);
-  return /* @__PURE__ */ jsx(StyledDropDownItem, __spreadProps(__spreadValues({}, restOfProps), {
-    color: useResponsiveColor(color)
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: cx(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 = useResponsiveColor(color);
+  return /* @__PURE__ */ jsx(Link, __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      display: "block",
+      textDecoration: "none",
+      lineHeight: 1.4,
+      padding: "8px 16px",
+      color: "black",
+      backgroundColor: "transparent",
+      transition: "background-color 0.2s"
+    }), useStyle(responsiveTextStyle(textStyle)), useStyle(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" : 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"
+      };
+    })), 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",
@@ -393,40 +414,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.div.withConfig({
-  shouldForwardProp: (prop) => !["open"].includes(prop.toString())
-})`
-  display: ${(props) => props.open ? "flex" : "none"};
-  flex-direction: column;
-  padding: 8px;
-`;
-const ButtonLink$1 = styled(Button)`
-  margin: 8px 0;
-`;
-const StyledLink = styled(Link).withConfig({
-  shouldForwardProp: (prop) => !["textStyle", "color"].includes(prop.toString())
-})`
-  text-decoration: none;
-  line-height: 1.4;
-  padding: 8px 16px;
-  color: black;
-  ${cssTextStyle()}
-  ${(p) => cssMediaRules([p.color], ([color]) => css`
-        color: ${color == null ? "black" : 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__ */ jsx(StyledLink, __spreadProps(__spreadValues({}, restOfProps), {
-    color: useResponsiveColor(color)
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(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__ */ jsx(Button, __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      margin: "8px 0"
+    }), className)
+  }));
+}
+function DropDownItem(_m) {
+  var _n = _m, {
+    color,
+    className,
+    textStyle
+  } = _n, restOfProps = __objRest(_n, [
+    "color",
+    "className",
+    "textStyle"
+  ]);
+  const colorData = useResponsiveColor(color);
+  return /* @__PURE__ */ jsx(Link, __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      textDecoration: "none",
+      lineHeight: 1.4,
+      padding: "8px 16px",
+      color: "black"
+    }), useStyle(responsiveTextStyle(textStyle)), useStyle(responsiveStyle([colorData], ([color2]) => ({
+      color: color2 == null ? "black" : colorToString(color2)
+    }))), className)
+  }));
+}
+function MobileDropDownButton(_o) {
+  var _p = _o, {
     label,
     caret,
     links: links2 = [],
@@ -434,7 +473,7 @@ function MobileDropDownButton(_g) {
     },
     color,
     textColor
-  } = _h, restOfProps = __objRest(_h, [
+  } = _p, restOfProps = __objRest(_p, [
     "label",
     "caret",
     "links",
@@ -480,71 +519,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__ */ jsx(Button, __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      margin: "8px 0"
+    }), className),
     textColor: useResponsiveColor(textColor),
     color: useResponsiveColor(color)
   }));
 }
-const ButtonLink = styled(NavigationButton$1)`
-  margin: 8px 0;
-`;
-const Container$1 = styled.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([p.animation, p.backgroundColor], ([animation, backgroundColor]) => animation == null ? css`
-            display: none;
-          ` : css`
-            display: flex;
-            background-color: ${backgroundColor == null ? "black" : 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.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([p.color], ([color]) => css`
-        color: ${color == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color)};
-      `)}
-`;
+function Container$1(_s) {
+  var _t = _s, {
+    className,
+    animation,
+    backgroundColor,
+    open
+  } = _t, restOfProps = __objRest(_t, [
+    "className",
+    "animation",
+    "backgroundColor",
+    "open"
+  ]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      position: "fixed",
+      flexDirection: "column",
+      width: "100%",
+      padding: "40px 15px",
+      transition: "transform 300ms ease-in-out",
+      overflowY: "auto",
+      zIndex: 9999,
+      maxWidth: 575
+    }), useStyle(responsiveStyle([animation, backgroundColor], ([animation2, backgroundColor2]) => {
+      if (animation2 == null)
+        return {
+          display: "none"
+        };
+      return __spreadValues({
+        display: "flex",
+        backgroundColor: backgroundColor2 == null ? "black" : 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__ */ jsx("button", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      position: "absolute",
+      top: 15,
+      right: 15,
+      padding: 0,
+      border: 0,
+      outline: 0,
+      background: "none",
+      fill: "currentcolor"
+    }), useStyle(responsiveStyle([color], ([color2]) => ({
+      color: color2 == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color2)
+    }))), className)
+  }));
+}
 function MobileMenu({
   animation,
   backgroundColor,
@@ -580,49 +644,83 @@ function MobileMenu({
     })]
   });
 }
-const Container = styled.nav.withConfig({
-  shouldForwardProp: (prop) => !["width", "margin", "textStyle", "gutter"].includes(prop.toString())
-})`
-  display: flex;
-  align-items: center;
-  ${cssWidth()}
-  ${cssMargin()}
-  ${cssTextStyle()}
-  ${(p) => cssMediaRules([p.gutter], ([gutter = {
-  value: 0,
-  unit: "px"
-}]) => css`
-        gap: ${gutter.value}${gutter.unit};
-      `)}
-`;
-const LinksContainer = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["alignment", "mobileMenuAnimation"].includes(prop.toString())
-})`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  ${(p) => cssMediaRules([p.alignment, p.mobileMenuAnimation], ([alignment = "flex-end", mobileMenuAnimation]) => css`
-        display: ${mobileMenuAnimation == null ? "flex" : "none"};
-        justify-content: ${alignment};
-      `)}
-`;
-const OpenIconContainer = styled.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([p.mobileMenuAnimation, p.alignment, p.color], ([mobileMenuAnimation, alignment = "flex-end", color]) => css`
-        display: ${mobileMenuAnimation == null ? "none" : "flex"};
-        justify-content: ${alignment};
-        color: ${color == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color)};
-      `)}
-`;
+const Container = forwardRef(function Container2(_w, ref) {
+  var _x = _w, {
+    className,
+    width,
+    margin,
+    textStyle,
+    gutter
+  } = _x, restOfProps = __objRest(_x, [
+    "className",
+    "width",
+    "margin",
+    "textStyle",
+    "gutter"
+  ]);
+  return /* @__PURE__ */ jsx("nav", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: cx(useStyle({
+      display: "flex",
+      alignItems: "center"
+    }), width, margin, useStyle(responsiveTextStyle(textStyle)), useStyle(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__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      display: "flex",
+      alignItems: "center",
+      flexGrow: 1
+    }), useStyle(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__ */ jsx("button", __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(useStyle({
+      display: "none",
+      flexGrow: 1,
+      alignItems: "center",
+      background: "none",
+      outline: 0,
+      border: 0,
+      padding: 0,
+      fill: "currentcolor"
+    }), useStyle(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)" : colorToString(color2)
+    }))), className)
+  }));
+}
 function NavigationButton(props) {
   const _a = props, {
     textColor,