@makeswift/runtime 0.7.19 → 0.8.1

package/dist/index.es.js

@@ -34,37 +34,35 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var _c;
 import * as React from "react";
-import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useId, useCallback, useImperativeHandle, Component, Suspense } from "react";
+import { useEffect, useState, useMemo, useRef, Children, createElement, forwardRef, memo, createContext, useContext, useId, useCallback, useImperativeHandle, Component, Suspense } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import dynamic from "next/dynamic";
-import { g as getPropControllerDescriptors, i as isElementReference, a as createDocumentReference, M as MakeswiftComponentType, b as isPropControllersHandle, d as getComponentPropControllerDescriptors, e as getPropControllers, f as configureStore$1, h as getDocument, j as getElementId, k as getIsPreview, l as getIsInBuilder, m as copyElementTree, n as getReactComponent, o as getBuilderEditMode } from "./constants.es.js";
-import { A as ActionTypes, j as introspectedResourcesFulfilled, k as apiResourceFulfilled, t as typographiesFulfilled, l as registerComponentHandleEffect, n as mountComponentEffect, o as registerComponentEffect, p as registerReactComponentEffect } from "./actions.es.js";
-import { cache, cx } from "@emotion/css";
-import { serializeStyles } from "@emotion/serialize";
-import { registerStyles, insertStyles } from "@emotion/utils";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { S as ShapeControlType, L as ListControlType, T as Types, E as ElementID, B as Backgrounds, W as Width, f as ResponsiveIconRadioGroup, M as Margin, P as Padding, g as Border, h as BorderRadius, i as Shadows, G as GapY, j as GapX, k as ResponsiveSelect, l as ResponsiveNumber, m as Checkbox, n as Grid, o as TextInput, p as Link, q as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, Q as StyleControlType, U as RichTextControlType, b as SlotControlType, X as LinkControlType, I as ImageControlType, C as ColorControlType, Y as BorderPropControllerFormat, Z as ShadowsPropControllerFormat, _ as BorderRadiusPropControllerFormat, $ as MarginPropControllerFormat, a0 as PaddingPropControllerFormat, a1 as WidthPropControllerFormat } from "./descriptors.es.js";
+import { a as createDocumentReference, g as getPropControllerDescriptors, i as isElementReference, M as MakeswiftComponentType, b as isPropControllersHandle, d as getComponentPropControllerDescriptors, e as getPropControllers, f as configureStore, h as getDocument, j as getElementId, k as getIsPreview, l as getIsInBuilder, m as copyElementTree, n as getReactComponent, o as getBuilderEditMode } from "./constants.es.js";
+import { A as ActionTypes, j as registerComponentHandleEffect, k as mountComponentEffect, l as registerComponentEffect, n as registerReactComponentEffect } from "./actions.es.js";
+import { d as deepEqual, u as useMakeswiftClient, G as GraphQLClient, T as TypographiesQuery, I as IntrospectedResourcesQuery, S as SwatchQuery, F as FileQuery, a as TypographyQuery, b as GlobalElementQuery, P as PagePathnamesByIdQuery, c as TableQuery, M as MakeswiftClient, f as findDeviceOverride, e as useStyle, g as useSwatches, D as DEVICES, h as getDeviceMediaQuery, r as responsiveStyle, m as marginPropertyDataToStyle, p as paddingPropertyDataToStyle, l as lengthPercentageDataToString, i as colorToString, j as useSwatch, k as useFile, n as usePagePathnameSlice, o as getIndexes, q as responsiveWidth, s as responsivePadding, t as responsiveMargin, v as responsiveBorderRadius, w as responsiveShadow, x as responsiveBorder, y as useGlobalElement } from "./responsive-style.es.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { S as ShapeControlType, L as ListControlType, T as Types, E as ElementID, B as Backgrounds, W as Width, f as ResponsiveIconRadioGroup, M as Margin, P as Padding, g as Border, h as BorderRadius, i as Shadows, G as GapY, j as GapX, k as ResponsiveSelect, l as ResponsiveNumber, m as Checkbox, n as Grid, o as TextInput, p as Link, q as ResponsiveColor, s as TextStyle, t as Images, N as Number, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, Q as StyleControlType, U as RichTextControlType, b as SlotControlType, X as LinkControlType, I as ImageControlType, C as ColorControlType, Y as BorderPropControllerFormat, Z as ShadowsPropControllerFormat, _ as BorderRadiusPropControllerFormat, $ as MarginPropControllerFormat, a0 as PaddingPropControllerFormat, a1 as WidthPropControllerFormat } from "./descriptors.es.js";
 import "slate";
 import { S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
 import { C as ComboboxControlType } from "./combobox.es.js";
 import "slate-react";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
-import { b as getElementSwatchIds, c as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, a as getElementChildren, h as getBorderSwatchIds, j as isNonNullable$1, k as getBoxShadowsSwatchIds, l as getResponsiveColorSwatchIds } from "./introspection.es.js";
-import { createStore, applyMiddleware } from "redux";
-import thunk from "redux-thunk";
-import { A as APIResourceType } from "./types.es.js";
+import { b as getElementSwatchIds, c as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, a as getElementChildren, h as getBorderSwatchIds, j as getBoxShadowsSwatchIds, k as getResponsiveColorSwatchIds } from "./introspection.es.js";
+import { i as isNonNullable } from "./isNonNullable.es.js";
 import { g as getBox, i as isMeasurable, m as measure } from "./box-models.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
+import { cache, cx } from "@emotion/css";
 import { findDOMNode } from "react-dom";
 import parse from "html-react-parser";
 import Head from "next/head";
+import { A as APIResourceType } from "./types.es.js";
 import createEmotionServer from "@emotion/server/create-instance";
 import NextDocument, { Html, Head as Head$1, Main, NextScript } from "next/document";
-import { serialize } from "cookie";
 import Cors from "cors";
+import { match } from "path-to-regexp";
+import { serialize } from "cookie";
 import { createProxyServer } from "http-proxy";
 import { parse as parse$1 } from "set-cookie-parser";
 import { v4 } from "uuid";
@@ -113,661 +111,6 @@ function BodySnippet({
   }, [code, cleanup]);
   return null;
 }
-async function introspect(element, client, store) {
-  const descriptors = getPropControllerDescriptors(store.getState());
-  const swatchIds = /* @__PURE__ */ new Set();
-  const fileIds = /* @__PURE__ */ new Set();
-  const typographyIds = /* @__PURE__ */ new Set();
-  const tableIds = /* @__PURE__ */ new Set();
-  const pageIds = /* @__PURE__ */ new Set();
-  const remaining = [element];
-  const seen = /* @__PURE__ */ new Set();
-  let current;
-  while (current = remaining.pop()) {
-    let getResourcesFromElementDescriptors = function(elementDescriptors2, props) {
-      Object.entries(elementDescriptors2).forEach(([propName, descriptor]) => {
-        getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
-          swatchIds.add(swatchId);
-        });
-        getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
-        getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
-        getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
-        getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
-        getElementChildren(descriptor, props[propName]).forEach((child) => {
-          if (!seen.has(child.key)) {
-            seen.add(child.key);
-            remaining.push(child);
-          }
-        });
-        if (descriptor.type === ShapeControlType) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          getResourcesFromElementDescriptors(descriptor.config.type, prop);
-        }
-        if (descriptor.type === ListControlType) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          prop.forEach((item) => {
-            getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
-          });
-        }
-        if (descriptor.type === Types.Shape) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          getResourcesFromElementDescriptors(descriptor.options.type, prop);
-        }
-        if (descriptor.type === Types.List) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          prop.forEach((item) => {
-            getResourcesFromElementDescriptors({ propName: descriptor.options.type }, { propName: item.value });
-          });
-        }
-      });
-    };
-    let element2;
-    if (isElementReference(current)) {
-      const globalElement = await client.fetchGlobalElement(current.value);
-      const elementData = globalElement == null ? void 0 : globalElement.data;
-      if (elementData == null)
-        continue;
-      element2 = elementData;
-    } else {
-      element2 = current;
-    }
-    const elementDescriptors = descriptors.get(element2.type);
-    if (elementDescriptors == null)
-      continue;
-    getResourcesFromElementDescriptors(elementDescriptors, element2.props);
-  }
-  const typographies = await client.fetchTypographies([...typographyIds]);
-  typographies.forEach((typography) => {
-    typography == null ? void 0 : typography.style.forEach((style) => {
-      var _a;
-      const swatchId = (_a = style.value.color) == null ? void 0 : _a.swatchId;
-      if (swatchId != null)
-        swatchIds.add(swatchId);
-    });
-  });
-  return {
-    swatchIds: [...swatchIds],
-    fileIds: [...fileIds],
-    typographyIds: [...typographyIds],
-    tableIds: [...tableIds],
-    pageIds: [...pageIds]
-  };
-}
-function normalizeToMakeswiftResources(partialResources) {
-  const resources = {
-    swatches: (partialResources == null ? void 0 : partialResources.swatches) || [],
-    typographies: (partialResources == null ? void 0 : partialResources.typographies) || [],
-    files: (partialResources == null ? void 0 : partialResources.files) || [],
-    tables: (partialResources == null ? void 0 : partialResources.tables) || [],
-    pagePathnameSlices: (partialResources == null ? void 0 : partialResources.pagePathnameSlices) || [],
-    globalElements: (partialResources == null ? void 0 : partialResources.globalElements) || [],
-    snippets: (partialResources == null ? void 0 : partialResources.snippets) || [],
-    fonts: (partialResources == null ? void 0 : partialResources.fonts) || [],
-    pageMetadata: (partialResources == null ? void 0 : partialResources.pageMetadata) || {},
-    pageSeo: (partialResources == null ? void 0 : partialResources.pageSeo) || {}
-  };
-  return resources;
-}
-function fileToFileSnapshot(file) {
-  return file;
-}
-function is(x, y) {
-  if (x === y)
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  return x !== x && y !== y;
-}
-const { hasOwnProperty: hasOwnProperty$1 } = Object.prototype;
-const shallowEqual = (a, b) => {
-  if (is(a, b))
-    return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
-    return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length)
-    return false;
-  for (let i = 0; i < keysA.length; i += 1) {
-    if (!hasOwnProperty$1.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
-      return false;
-  }
-  return true;
-};
-const { hasOwnProperty } = Object.prototype;
-const deepEqual = (a, b) => {
-  if (shallowEqual(a, b))
-    return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
-    return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length)
-    return false;
-  for (let i = 0; i < keysA.length; i += 1) {
-    if (!hasOwnProperty.call(b, keysA[i]) || !deepEqual(a[keysA[i]], b[keysA[i]]))
-      return false;
-  }
-  return true;
-};
-function isNonNullable(value) {
-  return value != null;
-}
-function getSnapshotResourcesFromSerializedState(serializedState) {
-  const resources = {
-    swatches: serializedState.Swatch.filter((_) => true),
-    typographies: serializedState.Typography.filter((_) => true),
-    files: serializedState.File.map(({ id, value }) => value.__typename === APIResourceType.File ? { id, value: fileToFileSnapshot(value) } : null).filter(isNonNullable),
-    tables: serializedState.Table.filter((_) => true),
-    pagePathnameSlices: serializedState.PagePathnameSlice.filter((_) => true),
-    globalElements: serializedState.GlobalElement.filter((_) => true)
-  };
-  return resources;
-}
-function getInitialState(serializedState = {
-  Swatch: [],
-  File: [],
-  Typography: [],
-  PagePathnameSlice: [],
-  GlobalElement: [],
-  Table: [],
-  Snippet: [],
-  Page: [],
-  Site: []
-}) {
-  return new Map(Object.entries(serializedState).map(([apiResourceType, resources]) => [
-    apiResourceType,
-    new Map(resources.map(({ id, value }) => [id, value]))
-  ]));
-}
-function getSerializedState$1(state) {
-  const resourceMap = {
-    Swatch: [],
-    File: [],
-    Typography: [],
-    PagePathnameSlice: [],
-    GlobalElement: [],
-    Table: [],
-    Snippet: [],
-    Page: [],
-    Site: []
-  };
-  Array.from(state.entries()).forEach(([resourceType, resources]) => {
-    const particularResourceMap = [];
-    Array.from(resources.entries()).forEach(([id, value]) => {
-      if (value != null) {
-        particularResourceMap.push({ id, value });
-      }
-    });
-    resourceMap[resourceType] = particularResourceMap;
-  });
-  return resourceMap;
-}
-function getHasAPIResource$1(state, resourceType, resourceId) {
-  var _a, _b;
-  return (_b = (_a = state.get(resourceType)) == null ? void 0 : _a.has(resourceId)) != null ? _b : false;
-}
-function getAPIResource$1(state, resourceType, resourceId) {
-  var _a;
-  const resource = (_a = state.get(resourceType)) == null ? void 0 : _a.get(resourceId);
-  return (resource == null ? void 0 : resource.__typename) === resourceType ? resource : null;
-}
-function reducer$1(state = getInitialState(), action) {
-  switch (action.type) {
-    case ActionTypes.API_RESOURCE_FULFILLED: {
-      const { resourceType, resourceId, resource } = action.payload;
-      return new Map(state).set(resourceType, new Map(state.get(resourceType)).set(resourceId, resource));
-    }
-    case ActionTypes.INTROSPECTED_RESOURCES_FULFILLED: {
-      const { introspectedResourceIds, introspectedResources } = action.payload;
-      const swatches = new Map(state.get(APIResourceType.Swatch));
-      const files = new Map(state.get(APIResourceType.File));
-      const typographies = new Map(state.get(APIResourceType.Typography));
-      const pagePathnameSlices = new Map(state.get(APIResourceType.PagePathnameSlice));
-      const tables = new Map(state.get(APIResourceType.Table));
-      introspectedResourceIds.swatchIds.forEach((swatchId, idx) => {
-        swatches.set(swatchId, introspectedResources.swatches[idx]);
-      });
-      introspectedResourceIds.fileIds.forEach((fileId, idx) => {
-        files.set(fileId, introspectedResources.files[idx]);
-      });
-      introspectedResourceIds.typographyIds.forEach((typographyId, idx) => {
-        typographies.set(typographyId, introspectedResources.typographies[idx]);
-      });
-      introspectedResourceIds.pageIds.forEach((pageId, idx) => {
-        const pagePathnameSlice = introspectedResources.pagePathnamesById[idx];
-        if (pagePathnameSlice == null) {
-          pagePathnameSlices.set(pageId, pagePathnameSlice);
-        } else {
-          const nodeId = Buffer.from(`Page:${pagePathnameSlice.id}`).toString("base64");
-          pagePathnameSlices.set(nodeId, __spreadProps(__spreadValues({}, pagePathnameSlice), { id: nodeId }));
-        }
-      });
-      introspectedResourceIds.tableIds.forEach((tableId, idx) => {
-        tables.set(tableId, introspectedResources.tables[idx]);
-      });
-      return new Map(state).set(APIResourceType.Swatch, swatches).set(APIResourceType.File, files).set(APIResourceType.Typography, typographies).set(APIResourceType.PagePathnameSlice, pagePathnameSlices).set(APIResourceType.Table, tables);
-    }
-    case ActionTypes.TYPOGRAPHIES_FULFILLED: {
-      const typographies = new Map(state.get(APIResourceType.Typography));
-      action.payload.typographyIds.forEach((typographyId, idx) => {
-        typographies.set(typographyId, action.payload.typographies[idx]);
-      });
-      return new Map(state).set(APIResourceType.Typography, typographies);
-    }
-    case ActionTypes.CHANGE_API_RESOURCE: {
-      const existingApiResource = getAPIResource$1(state, action.payload.resource.__typename, action.payload.resource.id);
-      if (deepEqual(existingApiResource, action.payload.resource))
-        return state;
-      return new Map(state).set(action.payload.resource.__typename, new Map(state.get(action.payload.resource.__typename)).set(action.payload.resource.id, action.payload.resource));
-    }
-    case ActionTypes.EVICT_API_RESOURCE: {
-      const [resourceType, resourceId] = action.payload.id.split(":");
-      if (!(resourceType in APIResourceType))
-        return state;
-      const resources = new Map(state.get(resourceType));
-      const deleted = resources.delete(resourceId);
-      return deleted ? new Map(state).set(resourceType, resources) : state;
-    }
-    default:
-      return state;
-  }
-}
-const SwatchFragment = `
-  fragment Swatch on Swatch {
-    __typename
-    id
-    hue
-    saturation
-    lightness
-  }
-`;
-const FileFragment = `
-  fragment File on File {
-    __typename
-    id
-    name
-    publicUrl: publicUrlV2
-    extension
-    dimensions {
-      width
-      height
-    }
-  }
-`;
-const TypographyFragment = `
-  fragment Typography on Typography {
-    __typename
-    id
-    name
-    style {
-      deviceId
-      value {
-        fontFamily
-        fontSize {
-          value
-          unit
-        }
-        color {
-          swatchId
-          alpha
-        }
-        lineHeight
-        letterSpacing
-        fontWeight
-        textAlign
-        uppercase
-        underline
-        strikethrough
-        italic
-      }
-    }
-  }
-`;
-const PagePathnameSliceFragment = `
-  fragment PagePathnameSlice on PagePathnameSlice {
-    __typename
-    id
-    pathname
-  }
-`;
-const GlobalElementFragment = `
-  fragment GlobalElement on GlobalElement {
-    __typename
-    id
-    data
-  }
-`;
-const TableFragment = `
-  fragment Table on Table {
-    __typename
-    id
-    name
-    columns {
-      __typename
-      id
-      name
-
-      ... on MultipleSelectTableColumn {
-        options {
-          id
-          name
-        }
-      }
-
-      ... on SingleSelectTableColumn {
-        options {
-          id
-          name
-        }
-      }
-    }
-  }
-`;
-const IntrospectedResourcesQuery = `
-  query IntrospectedResources(
-    $swatchIds: [ID!]!
-    $fileIds: [ID!]!
-    $typographyIds: [ID!]!
-    $pageIds: [ID!]!
-    $tableIds: [ID!]!
-  ) {
-    swatches(ids: $swatchIds) {
-      ...Swatch
-    }
-
-    files(ids: $fileIds) {
-      ...File
-    }
-
-    typographies(ids: $typographyIds) {
-      ...Typography
-    }
-
-    pagePathnamesById(ids: $pageIds) {
-      ...PagePathnameSlice
-    }
-
-    tables(ids: $tableIds) {
-      ...Table
-    }
-  }
-
-  ${SwatchFragment}
-  ${FileFragment}
-  ${TypographyFragment}
-  ${PagePathnameSliceFragment}
-  ${TableFragment}
-`;
-const SwatchQuery = `
-  query Swatch($swatchId: ID!) {
-    swatch(id: $swatchId) {
-      ...Swatch
-    }
-  }
-
-  ${SwatchFragment}
-`;
-const FileQuery = `
-  query File($fileId: ID!) {
-    file(id: $fileId) {
-      ...File
-    }
-  }
-
-  ${FileFragment}
-`;
-const TypographyQuery = `
-  query Typography($typographyId: ID!) {
-    typography(id: $typographyId) {
-      ...Typography
-    }
-  }
-
-  ${TypographyFragment}
-`;
-const PagePathnamesByIdQuery = `
-  query PagePathnamesById($pageIds: [ID!]!) {
-    pagePathnamesById(ids: $pageIds) {
-      ...PagePathnameSlice
-    }
-  }
-
-  ${PagePathnameSliceFragment}
-`;
-const TableQuery = `
-  query Table($tableId: ID!) {
-    table(id: $tableId) {
-      ...Table
-    }
-  }
-
-  ${TableFragment}
-`;
-const TypographiesQuery = `
-  query Typographies($typographyIds: [ID!]!) {
-    typographies(ids: $typographyIds) {
-      ...Typography
-    }
-  }
-
-  ${TypographyFragment}
-`;
-const GlobalElementQuery = `
-  query GlobalElement($globalElementId: ID!) {
-    globalElement(id: $globalElementId) {
-      ...GlobalElement
-    }
-  }
-
-  ${GlobalElementFragment}
-`;
-const CreateTableRecordMutation = `
-  mutation CreateTableRecord($input: CreateTableRecordInput!) {
-    createTableRecord(input: $input) {
-      tableRecord {
-        id
-      }
-    }
-  }
-`;
-const reducer = reducer$1;
-function getSerializedState(state) {
-  return getSerializedState$1(state);
-}
-function getHasAPIResource(state, resourceType, resourceId) {
-  return getHasAPIResource$1(state, resourceType, resourceId);
-}
-function getAPIResource(state, resourceType, resourceId) {
-  return getAPIResource$1(state, resourceType, resourceId);
-}
-function fetchAPIResource(resourceType, resourceId) {
-  return async (dispatch, getState, client) => {
-    var _a;
-    const state = getState();
-    if (getHasAPIResource(state, resourceType, resourceId)) {
-      return getAPIResource(state, resourceType, resourceId);
-    }
-    let resource;
-    switch (resourceType) {
-      case APIResourceType.Swatch:
-        resource = (await client.request(SwatchQuery, {
-          swatchId: resourceId
-        })).swatch;
-        break;
-      case APIResourceType.File:
-        resource = (await client.request(FileQuery, {
-          fileId: resourceId
-        })).file;
-        break;
-      case APIResourceType.Typography:
-        resource = (await client.request(TypographyQuery, {
-          typographyId: resourceId
-        })).typography;
-        break;
-      case APIResourceType.GlobalElement:
-        resource = (await client.request(GlobalElementQuery, { globalElementId: resourceId })).globalElement;
-        break;
-      case APIResourceType.PagePathnameSlice:
-        resource = (_a = (await client.request(PagePathnamesByIdQuery, { pageIds: [resourceId] })).pagePathnamesById[0]) != null ? _a : null;
-        break;
-      case APIResourceType.Table:
-        resource = (await client.request(TableQuery, {
-          tableId: resourceId
-        })).table;
-        break;
-      default:
-        resource = null;
-    }
-    dispatch(apiResourceFulfilled(resourceType, resourceId, resource));
-    return resource;
-  };
-}
-function fetchIntrospectedResources(introspectedResourceIds) {
-  return async (dispatch, _getState, client) => {
-    const introspectedResources = await client.request(IntrospectedResourcesQuery, introspectedResourceIds);
-    dispatch(introspectedResourcesFulfilled(introspectedResourceIds, introspectedResources));
-  };
-}
-function fetchTypographies(typographyIds) {
-  return async (dispatch, getState, client) => {
-    const state = getState();
-    if (typographyIds.every((typographyId) => getHasAPIResource(state, APIResourceType.Typography, typographyId))) {
-      return typographyIds.map((typographyId) => getAPIResource(state, APIResourceType.Typography, typographyId));
-    }
-    const { typographies } = await client.request(TypographiesQuery, { typographyIds });
-    dispatch(typographiesFulfilled(typographyIds, typographies));
-    return typographies;
-  };
-}
-function configureStore({
-  graphqlClient,
-  serializedState
-}) {
-  return createStore(reducer, getInitialState(serializedState), applyMiddleware(thunk.withExtraArgument(graphqlClient)));
-}
-class GraphQLClient {
-  constructor(endpoint) {
-    __publicField(this, "endpoint");
-    this.endpoint = endpoint;
-  }
-  async request(query, variables = {}) {
-    const response = await fetch(this.endpoint, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ query, variables })
-    });
-    if (!response.ok && response.status !== 400) {
-      throw new Error(`${response.status} ${response.statusText}`);
-    }
-    const body = await response.json();
-    if (body.errors != null) {
-      console.error(body);
-      throw new Error("GraphQL response contains errors, check the console.");
-    }
-    return body.data;
-  }
-}
-class MakeswiftClient {
-  constructor({
-    uri,
-    cacheData
-  }) {
-    __publicField(this, "graphqlClient");
-    __publicField(this, "makeswiftApiClient");
-    __publicField(this, "subscribe");
-    this.graphqlClient = new GraphQLClient(uri);
-    this.makeswiftApiClient = configureStore({
-      graphqlClient: this.graphqlClient,
-      serializedState: cacheData
-    });
-    this.subscribe = this.makeswiftApiClient.subscribe;
-  }
-  async prefetch(element) {
-    const introspectionData = await introspect(element, this, storeContextDefaultValue);
-    await this.makeswiftApiClient.dispatch(fetchIntrospectedResources(introspectionData));
-    return getSerializedState(this.makeswiftApiClient.getState());
-  }
-  readSwatch(swatchId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Swatch, swatchId);
-  }
-  async fetchSwatch(swatchId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.Swatch, swatchId));
-  }
-  readFile(fileId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.File, fileId);
-  }
-  async fetchFile(fileId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.File, fileId));
-  }
-  readTypography(typographyId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Typography, typographyId);
-  }
-  async fetchTypography(typographyId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.Typography, typographyId));
-  }
-  async fetchTypographies(typographyIds) {
-    return await this.makeswiftApiClient.dispatch(fetchTypographies(typographyIds));
-  }
-  readGlobalElement(globalElementId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.GlobalElement, globalElementId);
-  }
-  async fetchGlobalElement(globalElementId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.GlobalElement, globalElementId));
-  }
-  readPagePathnameSlice(pageId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.PagePathnameSlice, pageId);
-  }
-  async fetchPagePathnameSlice(pageId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.PagePathnameSlice, pageId));
-  }
-  readTable(tableId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Table, tableId);
-  }
-  async fetchTable(tableId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.Table, tableId));
-  }
-  async createTableRecord(tableId, columns) {
-    await this.graphqlClient.request(CreateTableRecordMutation, {
-      input: {
-        data: {
-          tableId,
-          columns
-        }
-      }
-    });
-  }
-  readSite(siteId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Site, siteId);
-  }
-  readPage(pageId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Page, pageId);
-  }
-  readSnippet(snippetId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Snippet, snippetId);
-  }
-}
-const Context$1 = createContext(new MakeswiftClient({
-  uri: "https://api.makeswift.com/graphql"
-}));
-function useMakeswiftClient() {
-  return useContext(Context$1);
-}
-function MakeswiftProvider({
-  client,
-  children
-}) {
-  return /* @__PURE__ */ jsx(Context$1.Provider, {
-    value: client,
-    children
-  });
-}
 const SnippetLocation = {
   Body: "BODY",
   Head: "HEAD"
@@ -968,11 +311,11 @@ function useCachedSite(siteId) {
   const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
-const version = "0.7.19";
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
     __publicField(this, "apiOrigin");
+    __publicField(this, "graphqlClient");
     if (typeof apiKey !== "string") {
       throw new Error(`The Makeswift client must be passed a valid Makeswift site API key: \`new Makeswift('<makeswift_site_api_key>')\`
 Received "${apiKey}" instead.`);
@@ -983,6 +326,7 @@ Received "${apiKey}" instead.`);
     } catch {
       throw new Error(`The Makeswift client received an invalid \`apiOrigin\` parameter: "${apiOrigin}".`);
     }
+    this.graphqlClient = new GraphQLClient(new URL("graphql", apiOrigin).href);
   }
   async fetch(path, init) {
     const response = await fetch(new URL(path, this.apiOrigin).toString(), __spreadProps(__spreadValues({}, init), {
@@ -999,9 +343,149 @@ Received "${apiKey}" instead.`);
     const json = await response.json();
     return json;
   }
+  async getTypographies(typographyIds) {
+    const result = await this.graphqlClient.request(TypographiesQuery, { typographyIds });
+    return result.typographies;
+  }
+  async getIntrospectedResources(introspectedResourceIds) {
+    const result = await this.graphqlClient.request(IntrospectedResourcesQuery, introspectedResourceIds);
+    return result;
+  }
+  async introspect(element) {
+    const descriptors = getPropControllerDescriptors(storeContextDefaultValue.getState());
+    const swatchIds = /* @__PURE__ */ new Set();
+    const fileIds = /* @__PURE__ */ new Set();
+    const typographyIds = /* @__PURE__ */ new Set();
+    const tableIds = /* @__PURE__ */ new Set();
+    const pageIds = /* @__PURE__ */ new Set();
+    const globalElements = /* @__PURE__ */ new Map();
+    const remaining = [element];
+    const seen = /* @__PURE__ */ new Set();
+    let current;
+    while (current = remaining.pop()) {
+      let getResourcesFromElementDescriptors = function(elementDescriptors2, props) {
+        Object.entries(elementDescriptors2).forEach(([propName, descriptor]) => {
+          getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+            swatchIds.add(swatchId);
+          });
+          getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
+          getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
+          getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
+          getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
+          getElementChildren(descriptor, props[propName]).forEach((child) => {
+            if (!seen.has(child.key)) {
+              seen.add(child.key);
+              remaining.push(child);
+            }
+          });
+          if (descriptor.type === ShapeControlType) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            getResourcesFromElementDescriptors(descriptor.config.type, prop);
+          }
+          if (descriptor.type === ListControlType) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            prop.forEach((item) => {
+              getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
+            });
+          }
+          if (descriptor.type === Types.Shape) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            getResourcesFromElementDescriptors(descriptor.options.type, prop);
+          }
+          if (descriptor.type === Types.List) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            prop.forEach((item) => {
+              getResourcesFromElementDescriptors({ propName: descriptor.options.type }, { propName: item.value });
+            });
+          }
+        });
+      };
+      let element2;
+      if (isElementReference(current)) {
+        const globalElement = await this.getGlobalElement(current.value);
+        globalElements.set(current.value, globalElement);
+        const elementData = globalElement == null ? void 0 : globalElement.data;
+        if (elementData == null)
+          continue;
+        element2 = elementData;
+      } else {
+        element2 = current;
+      }
+      const elementDescriptors = descriptors.get(element2.type);
+      if (elementDescriptors == null)
+        continue;
+      getResourcesFromElementDescriptors(elementDescriptors, element2.props);
+    }
+    const typographies = await this.getTypographies([...typographyIds]);
+    typographies.forEach((typography) => {
+      typography == null ? void 0 : typography.style.forEach((style) => {
+        var _a;
+        const swatchId = (_a = style.value.color) == null ? void 0 : _a.swatchId;
+        if (swatchId != null)
+          swatchIds.add(swatchId);
+      });
+    });
+    const { swatches, files, tables, pagePathnamesById } = await this.getIntrospectedResources({
+      swatchIds: [...swatchIds],
+      fileIds: [...fileIds],
+      tableIds: [...tableIds],
+      pageIds: [...pageIds]
+    });
+    const pagePathnameSlices = pagePathnamesById.map((pagePathnameSlice) => pagePathnameSlice && __spreadProps(__spreadValues({}, pagePathnameSlice), {
+      id: Buffer.from(`Page:${pagePathnameSlice.id}`).toString("base64")
+    }));
+    return {
+      [APIResourceType.Swatch]: [...swatchIds].map((id) => {
+        var _a;
+        return {
+          id,
+          value: (_a = swatches.find((swatch) => (swatch == null ? void 0 : swatch.id) === id)) != null ? _a : null
+        };
+      }),
+      [APIResourceType.File]: [...fileIds].map((id) => {
+        var _a;
+        return {
+          id,
+          value: (_a = files.find((file) => (file == null ? void 0 : file.id) === id)) != null ? _a : null
+        };
+      }),
+      [APIResourceType.Typography]: [...typographyIds].map((id) => {
+        var _a;
+        return {
+          id,
+          value: (_a = typographies.find((typography) => (typography == null ? void 0 : typography.id) === id)) != null ? _a : null
+        };
+      }),
+      [APIResourceType.Table]: [...tableIds].map((id) => {
+        var _a;
+        return {
+          id,
+          value: (_a = tables.find((table) => (table == null ? void 0 : table.id) === id)) != null ? _a : null
+        };
+      }),
+      [APIResourceType.PagePathnameSlice]: [...pageIds].map((id) => {
+        var _a;
+        return {
+          id,
+          value: (_a = pagePathnameSlices.find((pagePathnameSlice) => (pagePathnameSlice == null ? void 0 : pagePathnameSlice.id) === id)) != null ? _a : null
+        };
+      }),
+      [APIResourceType.GlobalElement]: [...globalElements.entries()].map(([id, value]) => ({
+        id,
+        value
+      }))
+    };
+  }
   async createSnapshot(document2, preview) {
-    const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
-    const cacheData = await client.prefetch(document2.data);
+    const cacheData = await this.introspect(document2.data);
     return { document: document2, apiOrigin: this.apiOrigin.href, cacheData, preview };
   }
   async getPageSnapshotByPageId(pageId, { preview = false } = {}) {
@@ -1022,161 +506,30 @@ Received "${apiKey}" instead.`);
     const snapshot = this.getPageSnapshotByPageId(page.id, { preview });
     return snapshot;
   }
-  async unstable_getPageData(path, { preview } = {}) {
-    const [page] = await this.getPages({ path });
-    if (page == null)
-      return null;
-    const document2 = await this.getDocumentForPage(page.id);
-    const snapshot = await this.unstable_createSnapshotOnDemand({ document: document2, pageId: page.id });
-    return {
-      pageId: page.id,
-      siteId: document2.site.id,
-      snapshot,
-      options: { preview: preview || false, apiOrigin: this.apiOrigin.href }
-    };
+  async getSwatch(swatchId) {
+    const result = await this.graphqlClient.request(SwatchQuery, { swatchId });
+    return result.swatch;
   }
-  async getDocumentForPage(pageId) {
-    const response = await this.fetch(`/v1/pages/${pageId}/document?preview=false`);
-    if (!response.ok) {
-      if (response.status === 404)
-        throw Error("Document not found.");
-      throw new Error(`Failed to create snapshot with error: "${response.statusText}"`);
-    }
-    const document2 = await response.json();
-    return document2;
+  async getFile(fileId) {
+    const result = await this.graphqlClient.request(FileQuery, { fileId });
+    return result.file;
   }
-  async unstable_createSnapshotOnDemand({
-    document: document2,
-    pageId
-  }) {
-    let fetchedDocument = document2;
-    if (fetchedDocument == null) {
-      const response = await this.fetch(`/v1/pages/${pageId}/document?preview=false`);
-      if (!response.ok) {
-        if (response.status === 404) {
-          throw new Error("Not found");
-        }
-        throw new Error(`Failed to create snapshot with error: "${response.statusText}"`);
-      }
-      fetchedDocument = await response.json();
-    }
-    if (fetchedDocument == null) {
-      throw Error("fetchedDocument should never be null");
-    }
-    const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
-    const prefetchedResources = await client.prefetch(fetchedDocument.data);
-    const resources = normalizeToMakeswiftResources(getSnapshotResourcesFromSerializedState(prefetchedResources));
-    resources.snippets = fetchedDocument.snippets.map((snippet) => ({
-      id: snippet.id,
-      value: snippet
-    }));
-    resources.pageMetadata = fetchedDocument.meta;
-    resources.pageSeo = fetchedDocument.seo;
-    resources.fonts = fetchedDocument.fonts.map((font) => ({ id: font.family, value: font }));
-    return { resources, elementTree: fetchedDocument.data, runtimeVersion: version };
+  async getTypography(typographyId) {
+    const result = await this.graphqlClient.request(TypographyQuery, { typographyId });
+    return result.typography;
   }
-  async unstable_createSnapshot({
-    publishedResources,
-    deletedResources,
-    publishedElementTree,
-    currentSnapshot
-  }) {
-    const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
-    function mergeResources({
-      resourcesFromPublishedElementTree: resourcesFromPublishedElementTree2,
-      resourcesFromCurrentSnapshot: resourcesFromCurrentSnapshot2,
-      publishedResources: publishedResources2,
-      deletedResources: deletedResources2
-    }) {
-      function mergeIdSpecifiedResource(resourceSet, deletedResources3) {
-        const map = new Map(resourceSet.map(({ id, value }) => [id, value]));
-        deletedResources3 == null ? void 0 : deletedResources3.forEach((id) => map.delete(id));
-        const finalResourceSet = [];
-        Array.from(map.entries()).forEach(([id, value]) => {
-          if (value != null) {
-            finalResourceSet.push({ id, value });
-          }
-        });
-        return finalResourceSet;
-      }
-      const resources2 = {
-        swatches: mergeIdSpecifiedResource([
-          ...resourcesFromPublishedElementTree2.swatches,
-          ...resourcesFromCurrentSnapshot2.swatches,
-          ...publishedResources2.swatches
-        ], deletedResources2 == null ? void 0 : deletedResources2.swatches),
-        files: mergeIdSpecifiedResource([
-          ...resourcesFromPublishedElementTree2.files,
-          ...resourcesFromCurrentSnapshot2.files,
-          ...publishedResources2.files
-        ], deletedResources2 == null ? void 0 : deletedResources2.files),
-        tables: mergeIdSpecifiedResource([
-          ...resourcesFromPublishedElementTree2.tables,
-          ...resourcesFromCurrentSnapshot2.tables,
-          ...publishedResources2.tables
-        ], deletedResources2 == null ? void 0 : deletedResources2.tables),
-        typographies: mergeIdSpecifiedResource([
-          ...resourcesFromPublishedElementTree2.typographies,
-          ...resourcesFromCurrentSnapshot2.typographies,
-          ...publishedResources2.typographies
-        ], deletedResources2 == null ? void 0 : deletedResources2.typographies),
-        pagePathnameSlices: mergeIdSpecifiedResource([
-          ...resourcesFromPublishedElementTree2.pagePathnameSlices,
-          ...resourcesFromCurrentSnapshot2.pagePathnameSlices,
-          ...publishedResources2.pagePathnameSlices
-        ], deletedResources2 == null ? void 0 : deletedResources2.pagePathnameSlices),
-        globalElements: mergeIdSpecifiedResource([
-          ...resourcesFromPublishedElementTree2.globalElements,
-          ...resourcesFromCurrentSnapshot2.globalElements,
-          ...publishedResources2.globalElements
-        ], deletedResources2 == null ? void 0 : deletedResources2.globalElements),
-        snippets: mergeIdSpecifiedResource([
-          ...resourcesFromPublishedElementTree2.snippets,
-          ...resourcesFromCurrentSnapshot2.snippets,
-          ...publishedResources2.snippets
-        ], deletedResources2 == null ? void 0 : deletedResources2.snippets),
-        fonts: mergeIdSpecifiedResource([
-          ...resourcesFromPublishedElementTree2.fonts,
-          ...resourcesFromCurrentSnapshot2.fonts,
-          ...publishedResources2.fonts
-        ], deletedResources2 == null ? void 0 : deletedResources2.fonts),
-        pageMetadata: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.pageMetadata), publishedResources2.pageMetadata),
-        pageSeo: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.pageSeo), publishedResources2.pageSeo)
-      };
-      return resources2;
-    }
-    const resourcesFromPublishedElementTree = publishedElementTree != null ? normalizeToMakeswiftResources(getSnapshotResourcesFromSerializedState(await client.prefetch(publishedElementTree))) : normalizeToMakeswiftResources({});
-    const resourcesFromCurrentSnapshot = normalizeToMakeswiftResources((currentSnapshot == null ? void 0 : currentSnapshot.resources) || {});
-    const resources = mergeResources({
-      resourcesFromPublishedElementTree,
-      resourcesFromCurrentSnapshot,
-      publishedResources: normalizeToMakeswiftResources(publishedResources),
-      deletedResources
-    });
-    const elementTree = publishedElementTree || (currentSnapshot == null ? void 0 : currentSnapshot.elementTree);
-    if (elementTree == null) {
-      throw Error("elementTree should not be null; something went wrong.");
-    }
-    return {
-      resources,
-      elementTree,
-      runtimeVersion: version
-    };
+  async getGlobalElement(globalElementId) {
+    const result = await this.graphqlClient.request(GlobalElementQuery, { globalElementId });
+    return result.globalElement;
   }
-  unstable_getSnapshotResourceMapping(snapshot) {
-    const resources = snapshot.resources;
-    function parseResourceIds({ id }) {
-      return id;
-    }
-    return [
-      ...resources.swatches.map(parseResourceIds),
-      ...resources.files.map(parseResourceIds),
-      ...resources.tables.map(parseResourceIds),
-      ...resources.typographies.map(parseResourceIds),
-      ...resources.pagePathnameSlices.map(parseResourceIds),
-      ...resources.globalElements.map(parseResourceIds),
-      ...resources.snippets.map(parseResourceIds)
-    ];
+  async getPagePathnameSlice(pageId) {
+    var _a;
+    const result = await this.graphqlClient.request(PagePathnamesByIdQuery, { pageIds: [pageId] });
+    return (_a = result.pagePathnamesById.at(0)) != null ? _a : null;
+  }
+  async getTable(tableId) {
+    const result = await this.graphqlClient.request(TableQuery, { tableId });
+    return result.table;
   }
 }
 function PreviewModeScript({
@@ -1306,17 +659,40 @@ class Document$1 extends NextDocument {
     });
   }
 }
-function isErrorWithMessage(error) {
-  return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
+async function elementTree(req, res) {
+  const elementTree2 = req.body.elementTree;
+  const replacementContext = req.body.replacementContext;
+  if (elementTree2 == null) {
+    return res.status(400).json({ message: "elementTree must be defined" });
+  }
+  if (replacementContext == null) {
+    return res.status(400).json({ message: "replacementContext must be defined" });
+  }
+  const generatedElementTree = ReactRuntime.copyElementTree(elementTree2, replacementContext);
+  const response = { elementTree: generatedElementTree };
+  return res.json(response);
 }
-function MakeswiftApiHandler(apiKey, {
-  appOrigin = "https://app.makeswift.com",
-  apiOrigin = "https://api.makeswift.com",
-  getFonts
-} = {}) {
-  const cors = Cors({ origin: appOrigin });
+async function fonts(_req, res, { getFonts } = {}) {
+  var _a;
+  const fonts2 = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
+  return res.json(fonts2);
+}
+const version = "0.8.1";
+async function handler(req, res, { apiKey }) {
+  if (req.query.secret !== apiKey) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+  return res.json({
+    version,
+    previewMode: true,
+    interactionMode: true,
+    clientSideNavigation: true,
+    elementFromPoint: false
+  });
+}
+async function proxyPreviewMode(req, res, { apiKey }) {
   const previewModeProxy = createProxyServer();
-  previewModeProxy.on("proxyReq", (proxyReq) => {
+  previewModeProxy.once("proxyReq", (proxyReq) => {
     proxyReq.removeHeader("X-Makeswift-Preview-Mode");
     proxyReq.removeHeader("X-Invoke-Path");
     proxyReq.removeHeader("X-Invoke-Query");
@@ -1324,12 +700,74 @@ function MakeswiftApiHandler(apiKey, {
     url.searchParams.delete("x-makeswift-preview-mode");
     proxyReq.path = url.pathname + url.search;
   });
+  if (req.query.secret !== apiKey)
+    return res.status(401).send("Unauthorized");
+  const host = req.headers.host;
+  if (host == null)
+    return res.status(400).send("Bad Request");
+  const forwardedProtoHeader = req.headers["x-forwarded-proto"];
+  let forwardedProto = [];
+  if (Array.isArray(forwardedProtoHeader)) {
+    forwardedProto = forwardedProtoHeader;
+  } else if (typeof forwardedProtoHeader === "string") {
+    forwardedProto = forwardedProtoHeader.split(",");
+  }
+  const isForwardedProtoHttps = forwardedProto.includes("https");
+  const forwardedSSL = req.headers["x-forwarded-ssl"];
+  const isForwardedSSL = typeof forwardedSSL === "string" && forwardedSSL === "on";
+  const proto = isForwardedProtoHttps || isForwardedSSL ? "https" : "http";
+  let target = `${proto}://${host}`;
+  const secure = process.env["NODE_ENV"] === "production";
+  const setCookie = res.setPreviewData({ makeswift: true }).getHeader("Set-Cookie");
+  res.removeHeader("Set-Cookie");
+  if (!Array.isArray(setCookie))
+    return res.status(500).send("Internal Server Error");
+  const cookie = parse$1(setCookie).map((cookie2) => serialize(cookie2.name, cookie2.value, cookie2)).join(";");
+  return await new Promise((resolve2, reject) => previewModeProxy.web(req, res, { target, headers: { cookie }, secure }, (err) => {
+    if (err)
+      reject(err);
+    else
+      resolve2();
+  }));
+}
+function isErrorWithMessage(error) {
+  return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
+}
+async function revalidate(req, res, { apiKey }) {
+  if (req.query.secret !== apiKey) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+  if (typeof req.query.path !== "string") {
+    return res.status(400).json({ message: "Bad Request" });
+  }
+  const revalidate2 = res.revalidate;
+  if (typeof revalidate2 !== "function") {
+    const message = `Cannot revalidate path "${req.query.path}" because \`revalidate\` function does not exist in API handler response. Please update to Next.js v12.2.0 or higher for support for on-demand revalidation.
+Read more here: https://nextjs.org/blog/next-12-2#on-demand-incremental-static-regeneration-stable`;
+    console.warn(message);
+    return res.json({ revalidated: false });
+  }
+  try {
+    await revalidate2(req.query.path);
+    return res.json({ revalidated: true });
+  } catch (error) {
+    if (isErrorWithMessage(error)) {
+      return res.status(500).json({ message: error.message });
+    }
+    return res.status(500).json({ message: "Error Revalidating" });
+  }
+}
+function MakeswiftApiHandler(apiKey, {
+  appOrigin = "https://app.makeswift.com",
+  apiOrigin = "https://api.makeswift.com",
+  getFonts
+} = {}) {
+  const cors = Cors({ origin: appOrigin });
   if (typeof apiKey !== "string") {
     throw new Error(`The Makeswift Next.js API handler must be passed a valid Makeswift site API key: \`MakeswiftApiHandler('<makeswift_site_api_key>')\`
 Received "${apiKey}" instead.`);
   }
   return async function makeswiftApiHandler(req, res) {
-    var _a;
     await new Promise((resolve2, reject) => {
       cors(req, res, (err) => {
         if (err instanceof Error)
@@ -1344,224 +782,40 @@ Received "${apiKey}" instead.`);
 Received "${makeswift}" for the \`makeswift\` param instead.
 Read more about dynamic catch-all routes here: https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes`);
     }
-    const action = makeswift.join("/");
-    switch (action) {
-      case "manifest": {
-        if (req.query.secret !== apiKey)
-          return res.status(401).json({ message: "Unauthorized" });
-        return res.json({
-          version,
-          previewMode: true,
-          interactionMode: true,
-          clientSideNavigation: true,
-          elementFromPoint: false
-        });
-      }
-      case "revalidate": {
-        if (req.query.secret !== apiKey) {
-          return res.status(401).json({ message: "Unauthorized" });
-        }
-        if (typeof req.query.path !== "string") {
-          return res.status(400).json({ message: "Bad Request" });
-        }
-        const revalidate = res.revalidate;
-        if (typeof revalidate !== "function") {
-          const message = `Cannot revalidate path "${req.query.path}" because \`revalidate\` function does not exist in API handler response. Please update to Next.js v12.2.0 or higher for support for on-demand revalidation.
-Read more here: https://nextjs.org/blog/next-12-2#on-demand-incremental-static-regeneration-stable`;
-          console.warn(message);
-          return res.json({ revalidated: false });
-        }
-        try {
-          await revalidate(req.query.path);
-          return res.json({ revalidated: true });
-        } catch (error) {
-          if (isErrorWithMessage(error)) {
-            return res.status(500).json({ message: error.message });
-          }
-          return res.status(500).json({ message: "Error Revalidating" });
-        }
-      }
-      case "proxy-preview-mode": {
-        if (req.query.secret !== apiKey)
-          return res.status(401).send("Unauthorized");
-        const host = req.headers.host;
-        if (host == null)
-          return res.status(400).send("Bad Request");
-        const forwardedProto = req.headers["x-forwarded-proto"];
-        const isForwardedProtoHttps = typeof forwardedProto === "string" && forwardedProto === "https";
-        const forwardedSSL = req.headers["x-forwarded-ssl"];
-        const isForwardedSSL = typeof forwardedSSL === "string" && forwardedSSL === "on";
-        const proto = isForwardedProtoHttps || isForwardedSSL ? "https" : "http";
-        let target = `${proto}://${host}`;
-        if (process.env["NODE_ENV"] !== "production") {
-          const port = req.socket.localPort;
-          if (port != null)
-            target = `http://localhost:${port}`;
-        }
-        const setCookie = res.setPreviewData({ makeswift: true }).getHeader("Set-Cookie");
-        res.removeHeader("Set-Cookie");
-        if (!Array.isArray(setCookie))
-          return res.status(500).send("Internal Server Error");
-        const cookie = parse$1(setCookie).map((cookie2) => serialize(cookie2.name, cookie2.value, cookie2)).join(";");
-        return await new Promise((resolve2, reject) => previewModeProxy.web(req, res, { target, headers: { cookie } }, (err) => {
-          if (err)
-            reject(err);
-          else
-            resolve2();
-        }));
-      }
-      case "fonts": {
-        const fonts = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
-        return res.json(fonts);
-      }
-      case "element-tree": {
-        const elementTree = req.body.elementTree;
-        const replacementContext = req.body.replacementContext;
-        if (elementTree == null) {
-          return res.status(400).json({ message: "elementTree must be defined" });
-        }
-        if (replacementContext == null) {
-          return res.status(400).json({ message: "replacementContext must be defined" });
-        }
-        const generatedElementTree = ReactRuntime.copyElementTree(elementTree, replacementContext);
-        const response = { elementTree: generatedElementTree };
-        return res.json(response);
-      }
-      case "snapshot": {
-        let validateBody = function(body2) {
-          if (body2.pageId == null) {
-            return res.status(400).json({ message: "Must define pageId." });
-          }
-          if (body2.currentSnapshot == null && body2.publishedElementTree == null) {
-            return res.status(400).json({ message: "Either currentSnapshot or publishedElementTree must be defined." });
-          }
-        };
-        const body = req.body;
-        validateBody(body);
-        const client = new Makeswift(apiKey, {
-          apiOrigin
-        });
-        const makeswiftApiClient = new MakeswiftClient({ uri: new URL("graphql", apiOrigin).href });
-        async function formMakeswiftResources(publishedResources) {
-          var _a2, _b, _c2, _d, _e, _f, _g, _h;
-          const publishedResourcesInMakeswiftSnapshotFormat = {
-            swatches: [],
-            typographies: [],
-            files: [],
-            tables: [],
-            pagePathnameSlices: [],
-            globalElements: [],
-            snippets: [],
-            fonts: [],
-            pageMetadata: publishedResources == null ? void 0 : publishedResources.pageMetadata,
-            pageSeo: publishedResources == null ? void 0 : publishedResources.pageSeo
-          };
-          if (publishedResources == null) {
-            return publishedResourcesInMakeswiftSnapshotFormat;
-          }
-          for await (const swatchId of publishedResources.swatches || []) {
-            const swatch = await makeswiftApiClient.fetchSwatch(swatchId);
-            if (swatch != null) {
-              (_a2 = publishedResourcesInMakeswiftSnapshotFormat.swatches) == null ? void 0 : _a2.push({
-                id: swatchId,
-                value: swatch
-              });
-            }
-          }
-          for await (const typographyId of publishedResources.typographies || []) {
-            const typography = await makeswiftApiClient.fetchTypography(typographyId);
-            if (typography != null) {
-              (_b = publishedResourcesInMakeswiftSnapshotFormat.typographies) == null ? void 0 : _b.push({
-                id: typographyId,
-                value: typography
-              });
-            }
-          }
-          for await (const fileId of publishedResources.files || []) {
-            const file = await makeswiftApiClient.fetchFile(fileId);
-            if (file != null) {
-              (_c2 = publishedResourcesInMakeswiftSnapshotFormat.files) == null ? void 0 : _c2.push({
-                id: fileId,
-                value: fileToFileSnapshot(file)
-              });
-            }
-          }
-          for await (const tableId of publishedResources.tables || []) {
-            const table = await makeswiftApiClient.fetchTable(tableId);
-            if (table != null) {
-              (_d = publishedResourcesInMakeswiftSnapshotFormat.tables) == null ? void 0 : _d.push({
-                id: tableId,
-                value: table
-              });
-            }
-          }
-          for await (const pageId of publishedResources.pagePathnameSlices || []) {
-            const pagePathnameSlice = await makeswiftApiClient.fetchPagePathnameSlice(pageId);
-            if (pagePathnameSlice != null) {
-              (_e = publishedResourcesInMakeswiftSnapshotFormat.pagePathnameSlices) == null ? void 0 : _e.push({
-                id: pageId,
-                value: pagePathnameSlice
-              });
-            }
-          }
-          for await (const globalElementId of publishedResources.globalElements || []) {
-            const globalElement = await makeswiftApiClient.fetchGlobalElement(globalElementId);
-            if (globalElement != null) {
-              (_f = publishedResourcesInMakeswiftSnapshotFormat.globalElements) == null ? void 0 : _f.push({
-                id: globalElementId,
-                value: globalElement
-              });
-            }
-          }
-          if (publishedResources.snippets != null || publishedResources.fonts != null) {
-            const response2 = await fetch(new URL(`/v1/pages/${body.pageId}/document?preview=false`, apiOrigin).toString(), {
-              headers: { ["X-API-Key"]: apiKey }
-            });
-            if (!response2.ok) {
-              throw new Error(`Failed to hit live page endpoint: "${response2.statusText}"`);
-            }
-            const document2 = await response2.json();
-            const availableSnippets = document2.snippets;
-            const availableFonts = document2.fonts;
-            for await (const snippetId of publishedResources.snippets || []) {
-              const snippet = availableSnippets.find((availableSnippet) => availableSnippet.id === snippetId);
-              if (snippet != null) {
-                (_g = publishedResourcesInMakeswiftSnapshotFormat.snippets) == null ? void 0 : _g.push({
-                  id: snippetId,
-                  value: snippet
-                });
-              }
-            }
-            for await (const family of publishedResources.fonts || []) {
-              const font = availableFonts.find((availableFont) => availableFont.family === family);
-              if (font != null) {
-                (_h = publishedResourcesInMakeswiftSnapshotFormat.fonts) == null ? void 0 : _h.push({
-                  id: family,
-                  value: font
-                });
-              }
-            }
-          }
-          return publishedResourcesInMakeswiftSnapshotFormat;
-        }
-        const snapshot = await client.unstable_createSnapshot({
-          publishedResources: await formMakeswiftResources(body.publishedResources),
-          deletedResources: body.deletedResources,
-          publishedElementTree: body.publishedElementTree,
-          currentSnapshot: body.currentSnapshot
-        });
-        const usedResources = client.unstable_getSnapshotResourceMapping(snapshot);
-        const response = {
-          pageId: body.pageId,
-          snapshot,
-          livePageChanges: body.livePageChanges,
-          usedResources
-        };
-        return res.json(response);
-      }
-      default:
-        return res.status(404).json({ message: "Not Found" });
-    }
+    const client = new Makeswift(apiKey, { apiOrigin });
+    const action = "/" + makeswift.join("/");
+    const matches = (pattern) => match(pattern, { decode: decodeURIComponent })(action);
+    let m;
+    if (matches("/manifest"))
+      return handler(req, res, { apiKey });
+    if (matches("/revalidate"))
+      return revalidate(req, res, { apiKey });
+    if (matches("/proxy-preview-mode"))
+      return proxyPreviewMode(req, res, { apiKey });
+    if (matches("/fonts"))
+      return fonts(req, res, { getFonts });
+    if (matches("/element-tree"))
+      return elementTree(req, res);
+    const handleResource = (resource) => resource === null ? res.status(404).json({ message: "Not Found" }) : res.json(resource);
+    if (m = matches("/swatches/:id")) {
+      return client.getSwatch(m.params.id).then(handleResource);
+    }
+    if (m = matches("/files/:id")) {
+      return client.getFile(m.params.id).then(handleResource);
+    }
+    if (m = matches("/typographies/:id")) {
+      return client.getTypography(m.params.id).then(handleResource);
+    }
+    if (m = matches("/global-elements/:id")) {
+      return client.getGlobalElement(m.params.id).then(handleResource);
+    }
+    if (m = matches("/page-pathname-slices/:id")) {
+      return client.getPagePathnameSlice(m.params.id).then(handleResource);
+    }
+    if (m = matches("/tables/:id")) {
+      return client.getTable(m.params.id).then(handleResource);
+    }
+    return res.status(404).json({ message: "Not Found" });
   };
 }
 const FORWARDED_NEXT_DYNAMIC_REF_KEY = "__forwarded_next_dynamic_ref__";
@@ -1636,14 +890,14 @@ async function getStaticPaths() {
 }
 const REVALIDATE_SECONDS = 1;
 async function getStaticProps(ctx) {
-  var _a, _b, _c2;
+  var _a, _b, _c;
   deprecationWarning("getStaticProps");
   const makeswift = new Makeswift(getApiKey(), {
     apiOrigin: getApiOrigin()
   });
   const path = "/" + ((_b = (_a = ctx.params) == null ? void 0 : _a.path) != null ? _b : []).join("/");
   const snapshot = await makeswift.getPageSnapshot(path, {
-    preview: ((_c2 = ctx.previewData) == null ? void 0 : _c2.makeswift) === true
+    preview: ((_c = ctx.previewData) == null ? void 0 : _c.makeswift) === true
   });
   if (snapshot == null)
     return {
@@ -1693,69 +947,6 @@ const Page = memo(({
     }, snapshot.document.data.key)
   });
 });
-const keys = (o) => Object.keys(o);
-const coalesce = (...args) => {
-  let i;
-  for (i = 0; i < args.length - 1; i += 1) {
-    if (args[i] != null)
-      return args[i];
-  }
-  return args[i];
-};
-function shallowMerge(a, b) {
-  const bKeys = keys(b);
-  const merged = __spreadValues({}, a);
-  bKeys.forEach((key) => {
-    merged[key] = coalesce(merged[key], b[key]);
-  });
-  return merged;
-}
-const DEVICES = [
-  { id: "desktop", minWidth: 769 },
-  { id: "tablet", minWidth: 576, maxWidth: 768 },
-  { id: "mobile", maxWidth: 575 }
-];
-const getDevice = (deviceId) => {
-  const device = DEVICES.find(({ id }) => id === deviceId);
-  if (device == null)
-    throw new Error(`Unrecognized device ID: "${deviceId}".`);
-  return device;
-};
-function defaultStrategy(value, fallbacks) {
-  return value || fallbacks[0];
-}
-function shallowMergeFallbacks(value, fallbacks) {
-  return [value, ...fallbacks].filter((override) => Boolean(override)).reduce((a, b) => ({
-    deviceId: a.deviceId || b.deviceId,
-    value: shallowMerge(a.value, b.value)
-  }));
-}
-function findDeviceOverride(values = [], deviceId, strategy = defaultStrategy) {
-  const value = values.find(({ deviceId: d }) => d === deviceId);
-  const fallbacks = DEVICES.slice(0, DEVICES.findIndex((d) => d.id === deviceId) + 1).reverse().map((d) => values.find((v) => v.deviceId === d.id)).filter((override) => Boolean(override));
-  return value != null || fallbacks.length > 0 ? strategy(value, fallbacks) : void 0;
-}
-function join(responsiveValues, joinFn, strategy) {
-  return DEVICES.map(({ id }) => id).map((deviceId) => {
-    const value = joinFn(responsiveValues.map((responsiveValue) => {
-      const deviceValue = responsiveValue && findDeviceOverride(responsiveValue, deviceId, strategy);
-      return deviceValue == null ? void 0 : deviceValue.value;
-    }));
-    if (value == null)
-      return null;
-    return { deviceId, value };
-  }).filter((override) => Boolean(override));
-}
-const getDeviceMediaQuery = (device) => {
-  const parts = ["@media only screen"];
-  if (device.minWidth != null) {
-    parts.push(`(min-width: ${device.minWidth}px)`);
-  }
-  if (device.maxWidth != null) {
-    parts.push(`(max-width: ${device.maxWidth}px)`);
-  }
-  return parts.join(" and ");
-};
 const DEFAULT_BOX_ANIMATE_TYPE = "none";
 const DEFAULT_BOX_ANIMATE_DELAY = 0;
 const DEFAULT_BOX_ANIMATE_DURATION = 0.75;
@@ -2029,7 +1220,7 @@ function registerComponent$a(runtime) {
         defaultValue: { value: 0, unit: "px" }
       }),
       autoplay: Checkbox({ label: "Autoplay" }),
-      delay: Number$1((props) => ({
+      delay: Number((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
@@ -2710,19 +1901,6 @@ function registerBuiltinComponents(runtime) {
     unregisterVideoComponent();
   };
 }
-const isServer = typeof window === "undefined";
-const useInsertionEffectSpecifier = "useInsertionEffect";
-const useInsertionEffect = (_c = React[useInsertionEffectSpecifier]) != null ? _c : React.useLayoutEffect;
-function useStyle(style) {
-  const serialized = serializeStyles([style], cache.registered);
-  registerStyles(cache, serialized, false);
-  useInsertionEffect(() => {
-    insertStyles(cache, serialized, false);
-  });
-  if (isServer)
-    insertStyles(cache, serialized, false);
-  return `${cache.key}-${serialized.name}`;
-}
 var _path;
 function _extends() {
   _extends = Object.assign || function(target) {
@@ -2774,104 +1952,12 @@ const FallbackComponent = forwardRef(function FallbackComponent2({
     })]
   });
 });
-function useSwatch(swatchId) {
-  const client = useMakeswiftClient();
-  const readSwatch = () => swatchId == null ? null : client.readSwatch(swatchId);
-  const swatch = useSyncExternalStore(client.subscribe, readSwatch, readSwatch);
-  useEffect(() => {
-    if (swatchId != null)
-      client.fetchSwatch(swatchId).catch(console.error);
-  }, [client, swatchId]);
-  return swatch;
-}
-function useSwatches(swatchIds) {
-  const client = useMakeswiftClient();
-  const lastSnapshot = useRef();
-  function getSnapshot() {
-    const swatches2 = swatchIds.map((swatchId) => client.readSwatch(swatchId));
-    if (lastSnapshot.current != null && lastSnapshot.current.length === swatches2.length && lastSnapshot.current.every((swatch, idx) => swatches2[idx] === swatch)) {
-      return lastSnapshot.current;
-    }
-    return lastSnapshot.current = swatches2;
-  }
-  const swatches = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
-  useEffect(() => {
-    Promise.all(swatchIds.map((swatchId) => client.fetchSwatch(swatchId))).catch(console.error);
-  }, [client, swatchIds]);
-  return swatches;
-}
-function useFile(fileId) {
-  const client = useMakeswiftClient();
-  const readFile = () => fileId == null ? null : client.readFile(fileId);
-  const file = useSyncExternalStore(client.subscribe, readFile, readFile);
-  useEffect(() => {
-    if (fileId != null)
-      client.fetchFile(fileId);
-  }, [client, fileId]);
-  return file;
-}
-function useFiles(fileIds) {
-  const client = useMakeswiftClient();
-  const lastSnapshot = useRef();
-  function getSnapshot() {
-    const files2 = fileIds.map((fileId) => client.readFile(fileId));
-    if (lastSnapshot.current != null && lastSnapshot.current.length === files2.length && lastSnapshot.current.every((file, idx) => files2[idx] === file)) {
-      return lastSnapshot.current;
-    }
-    return lastSnapshot.current = files2;
-  }
-  const files = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
-  useEffect(() => {
-    Promise.all(fileIds.map((fileId) => client.fetchFile(fileId))).catch(console.error);
-  }, [client, fileIds]);
-  return files;
-}
-function useTypography(typographyId) {
-  const client = useMakeswiftClient();
-  const readTypography = () => typographyId == null ? null : client.readTypography(typographyId);
-  const typography = useSyncExternalStore(client.subscribe, readTypography, readTypography);
-  useEffect(() => {
-    if (typographyId != null)
-      client.fetchTypography(typographyId).catch(console.error);
-  }, [client, typographyId]);
-  return typography;
-}
-function useGlobalElement(globalElementId) {
-  const client = useMakeswiftClient();
-  const readGlobalElement = () => globalElementId == null ? null : client.readGlobalElement(globalElementId);
-  const globalElement = useSyncExternalStore(client.subscribe, readGlobalElement, readGlobalElement);
-  useEffect(() => {
-    if (globalElementId != null)
-      client.fetchGlobalElement(globalElementId).catch(console.error);
-  }, [client, globalElementId]);
-  return globalElement;
-}
-function usePagePathnameSlice(pageId) {
-  const client = useMakeswiftClient();
-  const readPagePathnameSlice = () => pageId == null ? null : client.readPagePathnameSlice(pageId);
-  const pagePathnameSlice = useSyncExternalStore(client.subscribe, readPagePathnameSlice, readPagePathnameSlice);
-  useEffect(() => {
-    if (pageId != null)
-      client.fetchPagePathnameSlice(pageId).catch(console.error);
-  }, [client, pageId]);
-  return pagePathnameSlice;
-}
-function useTable(tableId) {
-  const client = useMakeswiftClient();
-  const readTable = () => tableId == null ? null : client.readTable(tableId);
-  const table = useSyncExternalStore(client.subscribe, readTable, readTable);
-  useEffect(() => {
-    if (tableId != null)
-      client.fetchTable(tableId).catch(console.error);
-  }, [client, tableId]);
-  return table;
-}
-function mapSideColor(swatches, _d) {
-  var _e = _d, { color } = _e, restOfSide = __objRest(_e, ["color"]);
+function mapSideColor(swatches, _c) {
+  var _d = _c, { color } = _d, restOfSide = __objRest(_d, ["color"]);
   return __spreadProps(__spreadValues({}, restOfSide), {
     color: color && {
       alpha: color.alpha,
-      swatch: swatches.filter(isNonNullable$1).find((s) => s && s.id === color.swatchId)
+      swatch: swatches.filter(isNonNullable).find((s) => s && s.id === color.swatchId)
     }
   });
 }
@@ -2917,7 +2003,7 @@ function useBoxShadow(value) {
         return __spreadProps(__spreadValues({}, restOfShadow), {
           payload: {
             color: color != null ? {
-              swatch: swatches.filter(isNonNullable$1).find((s) => s && s.id === color.swatchId),
+              swatch: swatches.filter(isNonNullable).find((s) => s && s.id === color.swatchId),
               alpha: color.alpha
             } : null,
             inset: inset != null ? inset : ShadowDefaultValue.inset,
@@ -2941,7 +2027,7 @@ function useResponsiveColor(color) {
     const { swatchId, alpha } = v;
     const swatch = swatches.find((s) => s && s.id === swatchId);
     return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
-  }).filter(isNonNullable$1);
+  }).filter(isNonNullable);
 }
 const DEVICE_QUERIES = DEVICES.map((device) => ({
   id: device.id,
@@ -2972,212 +2058,6 @@ function useMediaQuery(responsiveValue) {
   }
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
-const getIndexes = (spans, index) => {
-  const flattened = spans.reduce((a, s) => a.concat(s), []);
-  if (index < 0 || index > flattened.length)
-    throw new RangeError();
-  let remainder = index;
-  let rowIndex = 0;
-  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {
-    remainder -= spans[rowIndex].length;
-    rowIndex += 1;
-  }
-  return [rowIndex, remainder];
-};
-function lengthDataToString(data) {
-  if (typeof data === "object")
-    return `${data.value}${data.unit}`;
-  if (typeof data === "number")
-    return `${data}px`;
-  return data;
-}
-function paddingPropertyDataToStyle(data, defaultValue = {}) {
-  var _a, _b, _c2, _d;
-  const paddingTop = (_a = data.paddingTop) != null ? _a : defaultValue.paddingTop;
-  const paddingRight = (_b = data.paddingRight) != null ? _b : defaultValue.paddingRight;
-  const paddingBottom = (_c2 = data.paddingBottom) != null ? _c2 : defaultValue.paddingBottom;
-  const paddingLeft = (_d = data.paddingLeft) != null ? _d : defaultValue.paddingLeft;
-  const style = {};
-  if (paddingTop != null)
-    style.paddingTop = lengthDataToString(paddingTop);
-  if (paddingRight != null)
-    style.paddingRight = lengthDataToString(paddingRight);
-  if (paddingBottom != null)
-    style.paddingBottom = lengthDataToString(paddingBottom);
-  if (paddingLeft != null)
-    style.paddingLeft = lengthDataToString(paddingLeft);
-  return style;
-}
-function marginPropertyDataToStyle(data, defaultValue = {}) {
-  var _a, _b, _c2, _d;
-  const marginTop = (_a = data.marginTop) != null ? _a : defaultValue.marginTop;
-  const marginRight = (_b = data.marginRight) != null ? _b : defaultValue.marginRight;
-  const marginBottom = (_c2 = data.marginBottom) != null ? _c2 : defaultValue.marginBottom;
-  const marginLeft = (_d = data.marginLeft) != null ? _d : defaultValue.marginLeft;
-  const style = {};
-  if (marginTop != null)
-    style.marginTop = lengthDataToString(marginTop);
-  if (marginRight != null)
-    style.marginRight = lengthDataToString(marginRight);
-  if (marginBottom != null)
-    style.marginBottom = lengthDataToString(marginBottom);
-  if (marginLeft != null)
-    style.marginLeft = lengthDataToString(marginLeft);
-  return style;
-}
-function lengthPercentageDataToString(data) {
-  if (typeof data === "object")
-    return `${data.value}${data.unit}`;
-  if (typeof data === "number")
-    return `${data}px`;
-  return data;
-}
-function borderRadiusPropertyDataToStyle(data, defaultValue = {}) {
-  var _a, _b, _c2, _d;
-  const borderTopLeftRadius = (_a = data.borderTopLeftRadius) != null ? _a : defaultValue.borderTopLeftRadius;
-  const borderTopRightRadius = (_b = data.borderTopRightRadius) != null ? _b : defaultValue.borderTopRightRadius;
-  const borderBottomRightRadius = (_c2 = data.borderBottomRightRadius) != null ? _c2 : defaultValue.borderBottomRightRadius;
-  const borderBottomLeftRadius = (_d = data.borderBottomLeftRadius) != null ? _d : defaultValue.borderBottomLeftRadius;
-  const style = {};
-  if (borderTopLeftRadius != null) {
-    style.borderTopLeftRadius = lengthPercentageDataToString(borderTopLeftRadius);
-  }
-  if (borderTopRightRadius != null) {
-    style.borderTopRightRadius = lengthPercentageDataToString(borderTopRightRadius);
-  }
-  if (borderBottomRightRadius != null) {
-    style.borderBottomRightRadius = lengthPercentageDataToString(borderBottomRightRadius);
-  }
-  if (borderBottomLeftRadius != null) {
-    style.borderBottomLeftRadius = lengthPercentageDataToString(borderBottomLeftRadius);
-  }
-  return style;
-}
-function colorToString(color) {
-  return color && color.swatch ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.alpha})` : "";
-}
-function borderPropertyDataToStyle(data, defaultValue = {}) {
-  var _a, _b, _c2, _d;
-  const borderTop = (_a = data.borderTop) != null ? _a : defaultValue.borderTop;
-  const borderRight = (_b = data.borderRight) != null ? _b : defaultValue.borderRight;
-  const borderBottom = (_c2 = data.borderBottom) != null ? _c2 : defaultValue.borderBottom;
-  const borderLeft = (_d = data.borderLeft) != null ? _d : defaultValue.borderLeft;
-  const style = {};
-  if (borderTop != null)
-    style.borderTop = borderSideToString(borderTop);
-  if (borderRight != null)
-    style.borderRight = borderSideToString(borderRight);
-  if (borderBottom != null)
-    style.borderBottom = borderSideToString(borderBottom);
-  if (borderLeft != null)
-    style.borderLeft = borderSideToString(borderLeft);
-  return style;
-}
-function borderSideToString(borderSide) {
-  if (typeof borderSide === "string")
-    return borderSide;
-  if (typeof borderSide === "number")
-    return `${borderSide}px`;
-  const { width, color, style } = borderSide;
-  return `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : "black"}`;
-}
-function responsiveStyle(responsiveValues, join$1, strategy) {
-  return join(responsiveValues, join$1, strategy).reduce((acc, { deviceId, value }) => {
-    const device = getDevice(deviceId);
-    const mediaQuery = getDeviceMediaQuery(device);
-    return __spreadProps(__spreadValues({}, acc), {
-      [mediaQuery]: __spreadValues(__spreadValues({}, acc[mediaQuery]), value)
-    });
-  }, {});
-}
-function responsiveWidth(widthData, defaultValue = "100%") {
-  return __spreadValues({
-    maxWidth: "100%"
-  }, responsiveStyle([widthData], ([width = defaultValue]) => ({
-    width: typeof width === "object" ? `${width.value}${width.unit}` : width
-  })));
-}
-function responsivePadding(paddingData, defaultValue = {}) {
-  return responsiveStyle([paddingData], ([padding = {}]) => paddingPropertyDataToStyle(padding, Object.assign({ paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 }, defaultValue)));
-}
-function responsiveMargin(marginData, defaultValue = {}) {
-  return responsiveStyle([marginData], ([margin = {}]) => marginPropertyDataToStyle(margin, Object.assign({ marginTop: 0, marginRight: "auto", marginBottom: 0, marginLeft: "auto" }, defaultValue)));
-}
-function responsiveBorderRadius(borderRadiusData, defaultValue = {}) {
-  return responsiveStyle([borderRadiusData], ([borderRadius = {}]) => borderRadiusPropertyDataToStyle(borderRadius, Object.assign({
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-    borderBottomLeftRadius: 0
-  }, defaultValue)));
-}
-function responsiveBorder(borderData, defaultValue = {}) {
-  return responsiveStyle([borderData], ([border = {}]) => borderPropertyDataToStyle(border, Object.assign({
-    borderTop: "0px solid black",
-    borderRight: "0px solid black",
-    borderBottom: "0px solid black",
-    borderLeft: "0px solid black"
-  }, defaultValue)));
-}
-const floor = (d) => (v) => Math.floor(10 ** d * v) / 10 ** d;
-function responsiveGridItem(props) {
-  return __spreadValues({
-    display: "flex"
-  }, responsiveStyle([props.grid, props.columnGap, props.rowGap], ([
-    { spans, count } = { spans: [[12]], count: 12 },
-    columnGap = { value: 0, unit: "px" },
-    rowGap = { value: 0, unit: "px" }
-  ]) => {
-    const [rowIndex, columnIndex] = getIndexes(spans, props.index);
-    const firstCol = columnIndex === 0;
-    const lastCol = columnIndex === spans[rowIndex].length - 1;
-    const span = spans[rowIndex][columnIndex];
-    const fraction = floor(5)(span / count);
-    const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`;
-    const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${columnGap.unit} / 2`;
-    const iePrecisionError = "0.01px";
-    const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`;
-    const firstRow = rowIndex === 0;
-    const lastRow = rowIndex === spans.length - 1;
-    return span === 0 ? { display: "none" } : {
-      flexBasis,
-      minWidth: flexBasis,
-      maxWidth: flexBasis,
-      paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
-      paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
-      paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,
-      paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`
-    };
-  }));
-}
-const getBoxShadow = (shadows) => shadows.map(({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blurRadius}px ${spreadRadius}px ${color != null ? colorToString(color) : "rgba(0,0,0,0.2)"}`).filter(Boolean).join();
-function responsiveShadow(value) {
-  return responsiveStyle([value], ([shadow = []]) => ({
-    boxShadow: getBoxShadow(shadow)
-  }));
-}
-function responsiveTextStyle(value) {
-  return responsiveStyle([value], ([
-    textStyle = {
-      fontFamily: null,
-      letterSpacing: null,
-      fontSize: null,
-      fontWeight: null,
-      textTransform: [],
-      fontStyle: []
-    }
-  ]) => {
-    const {
-      fontSize,
-      fontWeight,
-      fontStyle = [],
-      textTransform = [],
-      letterSpacing,
-      fontFamily
-    } = textStyle;
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, fontFamily == null ? {} : { fontFamily: `"${fontFamily}"` }), fontWeight == null ? {} : { fontWeight }), letterSpacing == null ? {} : { letterSpacing }), fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }), textTransform.includes("uppercase") ? { textTransform: "uppercase" } : {}), fontStyle.includes("italic") ? { fontStyle: "italic" } : {});
-  });
-}
 const defaultMargin = {
   marginTop: 0,
   marginRight: "auto",
@@ -3202,14 +2082,14 @@ function useStyleControlCssObject(style, controlDefinition) {
     style == null ? void 0 : style.borderRadius,
     style == null ? void 0 : style.textStyle
   ], ([width, margin, padding, border, borderRadius, textStyle]) => {
-    var _a, _b, _c2, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
     }), properties.includes(StyleControlProperty.Margin) && marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(StyleControlProperty.Border) && {
-      borderTop: (_b = borderSideToString2(border == null ? void 0 : border.borderTop)) != null ? _b : "0 solid black",
-      borderRight: (_c2 = borderSideToString2(border == null ? void 0 : border.borderRight)) != null ? _c2 : "0 solid black",
-      borderBottom: (_d = borderSideToString2(border == null ? void 0 : border.borderBottom)) != null ? _d : "0 solid black",
-      borderLeft: (_e = borderSideToString2(border == null ? void 0 : border.borderLeft)) != null ? _e : "0 solid black"
+      borderTop: (_b = borderSideToString(border == null ? void 0 : border.borderTop)) != null ? _b : "0 solid black",
+      borderRight: (_c = borderSideToString(border == null ? void 0 : border.borderRight)) != null ? _c : "0 solid black",
+      borderBottom: (_d = borderSideToString(border == null ? void 0 : border.borderBottom)) != null ? _d : "0 solid black",
+      borderLeft: (_e = borderSideToString(border == null ? void 0 : border.borderLeft)) != null ? _e : "0 solid black"
     }), properties.includes(StyleControlProperty.BorderRadius) && {
       borderTopLeftRadius: (_f = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopLeftRadius)) != null ? _f : 0,
       borderTopRightRadius: (_g = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _g : 0,
@@ -3225,7 +2105,7 @@ function useStyleControlCssObject(style, controlDefinition) {
       return null;
     return lengthPercentageDataToString(widthProperty);
   }
-  function borderSideToString2(borderSide) {
+  function borderSideToString(borderSide) {
     if (borderSide == null)
       return null;
     const { width, color, style: style2 } = borderSide;
@@ -3470,13 +2350,13 @@ function useSlot(data, control) {
     }, element.key))
   });
 }
-function Slot(_f) {
-  var _g = _f, {
+function Slot(_e) {
+  var _f = _e, {
     as,
     control,
     children,
     className
-  } = _g, restOfProps = __objRest(_g, [
+  } = _f, restOfProps = __objRest(_f, [
     "as",
     "control",
     "children",
@@ -3505,15 +2385,15 @@ function Slot(_f) {
 }
 Slot.Placeholder = SlotPlaceholder;
 Slot.Item = SlotItem;
-function SlotItem(_h) {
-  var _i = _h, {
+function SlotItem(_g) {
+  var _h = _g, {
     as,
     control,
     grid,
     index,
     children,
     className
-  } = _i, restOfProps = __objRest(_i, [
+  } = _h, restOfProps = __objRest(_h, [
     "as",
     "control",
     "grid",
@@ -3733,7 +2613,7 @@ function PropsValue({
     return getPropControllers(state, documentKey, element.key);
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
-    var _a2, _b, _c2;
+    var _a2, _b, _c;
     switch (descriptor.type) {
       case CheckboxControlType:
       case NumberControlType:
@@ -3775,7 +2655,7 @@ function PropsValue({
         }, descriptor.type);
       }
       case SlotControlType: {
-        const control = (_c2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _c2 : null;
+        const control = (_c = propControllers == null ? void 0 : propControllers[propName]) != null ? _c : null;
         return /* @__PURE__ */ jsx(RenderHook, {
           hook: useSlot,
           parameters: [props[propName], control],
@@ -3957,7 +2837,7 @@ function isDomNodeHandle(value) {
   }
   return false;
 }
-const storeContextDefaultValue = configureStore$1();
+const storeContextDefaultValue = configureStore();
 function createReactRuntime(store) {
   return {
     registerComponent(component, {
@@ -3978,8 +2858,8 @@ function createReactRuntime(store) {
         unregisterReactComponent();
       };
     },
-    copyElementTree(elementTree, replacementContext) {
-      return copyElementTree(store.getState(), elementTree, replacementContext);
+    copyElementTree(elementTree2, replacementContext) {
+      return copyElementTree(store.getState(), elementTree2, replacementContext);
     }
   };
 }
@@ -3988,10 +2868,10 @@ registerBuiltinComponents(ReactRuntime);
 const StoreContext = createContext(storeContextDefaultValue);
 const PreviewProvider = dynamic(() => import("./PreviewProvider.es.js"));
 const LiveProvider = dynamic(() => import("./LiveProvider.es.js"));
-function RuntimeProvider(_j) {
-  var _k = _j, {
+function RuntimeProvider(_i) {
+  var _j = _i, {
     preview
-  } = _k, props = __objRest(_k, [
+  } = _j, props = __objRest(_j, [
     "preview"
   ]);
   return preview ? /* @__PURE__ */ jsx(PreviewProvider, __spreadValues({}, props)) : /* @__PURE__ */ jsx(LiveProvider, __spreadValues({}, props));
@@ -4189,5 +3069,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { getStaticProps as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element$1 as E, DEVICES as F, findDeviceOverride as G, forwardNextDynamicRef as H, useIsPreview as I, useFiles as J, useSwatches as K, usePagePathnameSlice as L, useElementId as M, useTypography as N, shallowMergeFallbacks as O, PageProvider as P, deepEqual as Q, RuntimeProvider as R, Shapes as S, ElementImperativeHandle as T, storeContextDefaultValue as U, StoreContext as V, MakeswiftProvider as W, useBuilderEditMode as X, pollBoxModel as Y, MakeswiftClient as Z, getStaticPaths as _, ReactRuntime as a, getServerSideProps as a0, Page as a1, Makeswift as a2, PreviewModeScript as a3, Document$1 as a4, MakeswiftApiHandler as a5, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, useMediaQuery as m, Page$1 as n, useStyle as o, responsiveWidth as p, responsiveTextStyle as q, responsiveStyle as r, colorToString as s, Sizes as t, useIsInBuilder as u, useFormContext as v, responsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
+export { Alignments as A, getStaticPaths as B, Contrasts as C, DocumentReference as D, Element$1 as E, getStaticProps as F, getServerSideProps as G, Page as H, PreviewModeScript as I, Document$1 as J, MakeswiftApiHandler as K, Makeswift as M, PageProvider as P, RuntimeProvider as R, Shapes as S, ReactRuntime as a, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, useMediaQuery as m, Page$1 as n, Sizes as o, useFormContext as p, Provider as q, forwardNextDynamicRef as r, useIsPreview as s, useElementId as t, useIsInBuilder as u, ElementImperativeHandle as v, storeContextDefaultValue as w, StoreContext as x, useBuilderEditMode as y, pollBoxModel as z };
 //# sourceMappingURL=index.es.js.map