@makeswift/runtime 0.0.2 → 0.0.5

package/dist/index.es.js

@@ -33,15 +33,16 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+var _ea;
 import * as React from "react";
-import { forwardRef, createContext, useContext, useMemo, useState, useLayoutEffect, useCallback, useEffect, useRef, useImperativeHandle, Children, createElement, Fragment as Fragment$1, memo } from "react";
+import { forwardRef, createContext, useContext, useMemo, useState, useLayoutEffect, useCallback, useEffect, useRef, useImperativeHandle, Children, createElement, Fragment as Fragment$1, Component, memo } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
 import { a as createDocumentReference, g as getComponentPropControllerDescriptors, b as getIsInBuilder, d as configureStore, e as getElementId, f as getReactComponent, h as getDocument, i as isElementReference, c as createDocument } from "./react-page.es.js";
 import { f as registerComponentHandleEffect, g as mountComponentEffect, h as registerComponentEffect, j as registerReactComponentEffect, k as registerDocumentEffect } from "./actions.es.js";
 import styled, { css, keyframes, createGlobalStyle } from "styled-components";
 import { useReducedMotion, useAnimation, motion } from "framer-motion";
-import { cx, css as css$1 } from "@emotion/css";
+import { cx, css as css$1, cache } from "@emotion/css";
 import { getDataFromTree } from "@apollo/client/react/ssr";
 import { KeyUtils, Value } from "slate";
 import uuid from "uuid/v4";
@@ -64,6 +65,7 @@ import ipsum from "corporate-ipsum";
 import { Editor } from "slate-react";
 import Lists from "@convertkit/slate-lists";
 import { a as StyleControlProperty, S as StyleControlType } from "./style.es.js";
+import { findDOMNode } from "react-dom";
 const PlaceholderBase$1 = styled.div`
   width: 100%;
   background: rgba(161, 168, 194, 0.18);
@@ -291,14 +293,14 @@ function createApolloClient({
   uri,
   cacheData
 }) {
-  const cache = new InMemoryCache({
+  const cache2 = new InMemoryCache({
     typePolicies
   });
   if (cacheData)
-    cache.restore(cacheData);
+    cache2.restore(cacheData);
   return new ApolloClient({
     uri,
-    cache
+    cache: cache2
   });
 }
 class MakeswiftClient {
@@ -1923,7 +1925,7 @@ function responsiveStyle(responsiveValues, join$1, strategy) {
 }
 function responsiveWidth(widthData, defaultValue = "100%") {
   return __spreadValues({
-    width: "100%"
+    maxWidth: "100%"
   }, responsiveStyle([widthData], ([width = defaultValue]) => ({
     width: typeof width === "object" ? `${width.value}${width.unit}` : width
   })));
@@ -5628,11 +5630,15 @@ function DropDownButton(_U) {
   var _V = _U, {
     label,
     caret = "caret",
-    links: links2 = []
+    links: links2 = [],
+    textColor,
+    color
   } = _V, restOfProps = __objRest(_V, [
     "label",
     "caret",
-    "links"
+    "links",
+    "textColor",
+    "color"
   ]);
   const container = useRef(null);
   const [position, setPosition] = useState("left");
@@ -5646,6 +5652,8 @@ function DropDownButton(_U) {
   return /* @__PURE__ */ jsxs(DropDownContainer, {
     ref: container,
     children: [/* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
+      textColor: useColor(textColor),
+      color: useColor(color),
       children: /* @__PURE__ */ jsxs("div", {
         style: {
           display: "flex",
@@ -5735,16 +5743,22 @@ function MobileDropDownButton(_Y) {
     caret,
     links: links2 = [],
     onClose = () => {
-    }
+    },
+    color,
+    textColor
   } = _Z, restOfProps = __objRest(_Z, [
     "label",
     "caret",
     "links",
-    "onClose"
+    "onClose",
+    "color",
+    "textColor"
   ]);
   const [isOpen, setIsOpen] = useState(false);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(ButtonLink$1, __spreadProps(__spreadValues({}, restOfProps), {
+      textColor: useColor(textColor),
+      color: useColor(color),
       onPointerDown: () => setIsOpen((prev) => !prev),
       children: /* @__PURE__ */ jsxs("div", {
         style: {
@@ -5778,7 +5792,20 @@ function MobileDropDownButton(_Y) {
     })]
   });
 }
-const ButtonLink = styled(Button$1)`
+function NavigationButton$1(props) {
+  const _a = props, {
+    textColor,
+    color
+  } = _a, restOfProps = __objRest(_a, [
+    "textColor",
+    "color"
+  ]);
+  return /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
+    textColor: useColor(textColor),
+    color: useColor(color)
+  }));
+}
+const ButtonLink = styled(NavigationButton$1)`
   margin: 8px 0;
 `;
 const Container$3 = styled.div`
@@ -5891,6 +5918,19 @@ const OpenIconContainer = styled.button`
         color: ${color == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color)};
       `)}
 `;
+function NavigationButton(props) {
+  const _a = props, {
+    textColor,
+    color
+  } = _a, restOfProps = __objRest(_a, [
+    "textColor",
+    "color"
+  ]);
+  return /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
+    textColor: useColor(textColor),
+    color: useColor(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: {
@@ -5942,7 +5982,7 @@ const Navigation = forwardRef(function Navigation2({
           gutter,
           first: i === 0,
           last: i === links2.length - 1,
-          children: [link.type === "button" && /* @__PURE__ */ jsx(Button$1, __spreadProps(__spreadValues({}, link.payload), {
+          children: [link.type === "button" && /* @__PURE__ */ jsx(NavigationButton, __spreadProps(__spreadValues({}, link.payload), {
             children: link.payload.label
           })), link.type === "dropdown" && /* @__PURE__ */ jsx(DropDownButton, __spreadValues({}, link.payload))]
         }, link.id)) : /* @__PURE__ */ jsx(LinksPlaceholder, {
@@ -7772,9 +7812,267 @@ const FallbackComponent = forwardRef(function FallbackComponent2({
     })]
   });
 });
-function useStyleControlDataClass(style, controlDefinition) {
+function murmur2(str) {
+  var h = 0;
+  var k, i = 0, len = str.length;
+  for (; len >= 4; ++i, len -= 4) {
+    k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
+    k = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
+    k ^= k >>> 24;
+    h = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 255) << 16;
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 255) << 8;
+    case 1:
+      h ^= str.charCodeAt(i) & 255;
+      h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  h ^= h >>> 13;
+  h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+var unitlessKeys = {
+  animationIterationCount: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+function memoize(fn) {
+  var cache2 = /* @__PURE__ */ Object.create(null);
+  return function(arg) {
+    if (cache2[arg] === void 0)
+      cache2[arg] = fn(arg);
+    return cache2[arg];
+  };
+}
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+var isCustomProperty = function isCustomProperty2(property) {
+  return property.charCodeAt(1) === 45;
+};
+var isProcessableValue = function isProcessableValue2(value) {
+  return value != null && typeof value !== "boolean";
+};
+var processStyleName = /* @__PURE__ */ memoize(function(styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
+});
+var processStyleValue = function processStyleValue2(key, value) {
+  switch (key) {
+    case "animation":
+    case "animationName": {
+      if (typeof value === "string") {
+        return value.replace(animationRegex, function(match, p1, p2) {
+          cursor = {
+            name: p1,
+            styles: p2,
+            next: cursor
+          };
+          return p1;
+        });
+      }
+    }
+  }
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === "number" && value !== 0) {
+    return value + "px";
+  }
+  return value;
+};
+function handleInterpolation(mergedProps, registered, interpolation) {
+  if (interpolation == null) {
+    return "";
+  }
+  if (interpolation.__emotion_styles !== void 0) {
+    return interpolation;
+  }
+  switch (typeof interpolation) {
+    case "boolean": {
+      return "";
+    }
+    case "object": {
+      if (interpolation.anim === 1) {
+        cursor = {
+          name: interpolation.name,
+          styles: interpolation.styles,
+          next: cursor
+        };
+        return interpolation.name;
+      }
+      if (interpolation.styles !== void 0) {
+        var next = interpolation.next;
+        if (next !== void 0) {
+          while (next !== void 0) {
+            cursor = {
+              name: next.name,
+              styles: next.styles,
+              next: cursor
+            };
+            next = next.next;
+          }
+        }
+        var styles = interpolation.styles + ";";
+        return styles;
+      }
+      return createStringFromObject(mergedProps, registered, interpolation);
+    }
+    case "function": {
+      if (mergedProps !== void 0) {
+        var previousCursor = cursor;
+        var result = interpolation(mergedProps);
+        cursor = previousCursor;
+        return handleInterpolation(mergedProps, registered, result);
+      }
+      break;
+    }
+  }
+  if (registered == null) {
+    return interpolation;
+  }
+  var cached = registered[interpolation];
+  return cached !== void 0 ? cached : interpolation;
+}
+function createStringFromObject(mergedProps, registered, obj) {
+  var string = "";
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+    }
+  } else {
+    for (var _key in obj) {
+      var value = obj[_key];
+      if (typeof value !== "object") {
+        if (registered != null && registered[value] !== void 0) {
+          string += _key + "{" + registered[value] + "}";
+        } else if (isProcessableValue(value)) {
+          string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
+        }
+      } else {
+        if (_key === "NO_COMPONENT_SELECTOR" && false) {
+          throw new Error("Component selectors can only be used in conjunction with @emotion/babel-plugin.");
+        }
+        if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation(mergedProps, registered, value);
+          switch (_key) {
+            case "animation":
+            case "animationName": {
+              string += processStyleName(_key) + ":" + interpolated + ";";
+              break;
+            }
+            default: {
+              string += _key + "{" + interpolated + "}";
+            }
+          }
+        }
+      }
+    }
+  }
+  return string;
+}
+var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
+var cursor;
+var serializeStyles = function serializeStyles2(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) {
+    return args[0];
+  }
+  var stringMode = true;
+  var styles = "";
+  cursor = void 0;
+  var strings = args[0];
+  if (strings == null || strings.raw === void 0) {
+    stringMode = false;
+    styles += handleInterpolation(mergedProps, registered, strings);
+  } else {
+    styles += strings[0];
+  }
+  for (var i = 1; i < args.length; i++) {
+    styles += handleInterpolation(mergedProps, registered, args[i]);
+    if (stringMode) {
+      styles += strings[i];
+    }
+  }
+  labelPattern.lastIndex = 0;
+  var identifierName = "";
+  var match;
+  while ((match = labelPattern.exec(styles)) !== null) {
+    identifierName += "-" + match[1];
+  }
+  var name = murmur2(styles) + identifierName;
+  return {
+    name,
+    styles,
+    next: cursor
+  };
+};
+var isBrowser = true;
+var registerStyles = function registerStyles2(cache2, serialized, isStringTag) {
+  var className = cache2.key + "-" + serialized.name;
+  if ((isStringTag === false || isBrowser === false) && cache2.registered[className] === void 0) {
+    cache2.registered[className] = serialized.styles;
+  }
+};
+var insertStyles = function insertStyles2(cache2, serialized, isStringTag) {
+  registerStyles(cache2, serialized, isStringTag);
+  var className = cache2.key + "-" + serialized.name;
+  if (cache2.inserted[serialized.name] === void 0) {
+    var current = serialized;
+    do {
+      cache2.insert(serialized === current ? "." + className : "", current, cache2.sheet, true);
+      current = current.next;
+    } while (current !== void 0);
+  }
+};
+function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
-  return css$1(__spreadValues(__spreadValues({}, properties.includes(StyleControlProperty.Width) && {
+  return __spreadValues(__spreadValues({}, properties.includes(StyleControlProperty.Width) && {
     maxWidth: "100%"
   }), responsiveStyle([
     style == null ? void 0 : style.width,
@@ -7807,7 +8105,7 @@ function useStyleControlDataClass(style, controlDefinition) {
       borderBottomRightRadius: (_p = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomRightRadius)) != null ? _p : 0,
       borderBottomLeftRadius: (_q = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomLeftRadius)) != null ? _q : 0
     });
-  })));
+  }));
   function widthToString(widthProperty) {
     if (widthProperty == null)
       return null;
@@ -7837,8 +8135,14 @@ function useStyleControlDataClass(style, controlDefinition) {
     return `${borderRadius.value}${borderRadius.unit}`;
   }
 }
+const useInsertionEffect = (_ea = React.useInsertionEffect) != null ? _ea : React.useLayoutEffect;
 function useFormattedStyle(styleControlData, controlDefinition) {
-  return useStyleControlDataClass(styleControlData, controlDefinition);
+  const style = useStyleControlCssObject(styleControlData, controlDefinition);
+  const serialized = serializeStyles([style], cache.registered);
+  useInsertionEffect(() => {
+    insertStyles(cache, serialized, false);
+  });
+  return `${cache.key}-${serialized.name}`;
 }
 function useDeviceMode() {
   return "desktop";
@@ -7871,6 +8175,48 @@ function useProps(element) {
     }
   }));
 }
+function suppressWarningAndFindDomNode(instance) {
+  const error = console.error;
+  console.error = (...args) => {
+    const [msg, ...substitutions] = args;
+    const text = substitutions.reduce((text2, substitution) => text2.replace("%s", substitution), msg);
+    if (!text.includes("findDOMNode is deprecated in StrictMode.")) {
+      error.apply(console, args);
+    }
+  };
+  const foundDomNode = findDOMNode(instance);
+  console.error = error;
+  return foundDomNode;
+}
+class FindDomNodeClassComponent extends Component {
+  componentDidMount() {
+    this.setInnerRef(suppressWarningAndFindDomNode(this));
+  }
+  componentDidUpdate() {
+    this.setInnerRef(suppressWarningAndFindDomNode(this));
+  }
+  setInnerRef(current) {
+    const {
+      innerRef
+    } = this.props;
+    if (innerRef == null)
+      return;
+    if (typeof innerRef === "function")
+      innerRef(current);
+    else
+      innerRef.current = current;
+  }
+  render() {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: this.props.children
+    });
+  }
+}
+const FindDomNode = forwardRef(function FindDomNode2(props, ref) {
+  return /* @__PURE__ */ jsx(FindDomNodeClassComponent, __spreadProps(__spreadValues({}, props), {
+    innerRef: ref
+  }));
+});
 const contextDefaultValue = configureStore();
 function createReactRuntime(store) {
   return {
@@ -8010,21 +8356,42 @@ function useDispatch() {
   const store = useContext(Context);
   return store.dispatch;
 }
+function useSuppressRefWarning(ownerName) {
+  const originalErrorRef = useRef(console.error);
+  const patchedRef = useRef(false);
+  if (patchedRef.current === false) {
+    console.error = (...args) => {
+      const [msg, ...substitutions] = args;
+      const text = substitutions.reduce((text2, substitution) => text2.replace("%s", substitution), msg);
+      if (!text.includes("Function components cannot be given refs.") || !text.includes(`Check the render method of \`${ownerName}\`.`)) {
+        originalErrorRef.current(...args);
+      }
+    };
+    patchedRef.current = true;
+  }
+}
 const ElementData = memo(forwardRef(function ElementData2({
   elementData
 }, ref) {
-  const Component = useComponent(elementData.type);
+  const Component2 = useComponent(elementData.type);
   const props = useProps(elementData);
-  if (Component == null) {
+  const [handle, setHandle] = useState(null);
+  const [foundDomNode, setFoundDomNode] = useState(null);
+  useImperativeHandle(ref, () => handle != null ? handle : foundDomNode, [handle, foundDomNode]);
+  useSuppressRefWarning(`\`ForwardRef(${ElementData2.name})\``);
+  if (Component2 == null) {
     return /* @__PURE__ */ jsx(FallbackComponent, {
       ref,
       text: "Component not found"
     });
   }
-  return /* @__PURE__ */ createElement(Component, __spreadProps(__spreadValues({}, props), {
-    key: elementData.key,
-    ref
-  }));
+  return /* @__PURE__ */ jsx(FindDomNode, {
+    ref: setFoundDomNode,
+    children: /* @__PURE__ */ createElement(Component2, __spreadProps(__spreadValues({}, props), {
+      key: elementData.key,
+      ref: setHandle
+    }))
+  });
 }));
 const ElementReference = memo(forwardRef(function ElementReference2({
   elementReference