@makeswift/runtime 0.8.5 → 0.8.7

package/dist/index.es.js

@@ -34,30 +34,34 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+var _c;
 import * as React from "react";
-import { useEffect, useState, useMemo, useRef, Children, createElement, forwardRef, memo, createContext, useContext, useId, useCallback, useImperativeHandle, Component, Suspense } from "react";
+import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useId, useCallback, useImperativeHandle, Component, Suspense } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import dynamic from "next/dynamic";
-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 { a as createDocumentReference, g as getPropControllerDescriptors, i as isElementReference, M as MakeswiftComponentType, b as isPropControllersHandle, d as getComponentPropControllerDescriptors, e as getPropControllers, f as configureStore$1, h as copyElementTree, j as getBreakpoints, k as getDocument, l as getElementId, m as getIsPreview, n as getIsInBuilder, o as getReactComponent, p as getBuilderEditMode } from "./constants.es.js";
+import { A as ActionTypes, k as apiResourceFulfilled, l as registerComponentEffect, n as registerReactComponentEffect, o as registerComponentHandleEffect, p as mountComponentEffect } 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 "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 getBoxShadowsSwatchIds, k as getResponsiveColorSwatchIds } from "./introspection.es.js";
-import { i as isNonNullable } from "./isNonNullable.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 isNonNullable, k as getBoxShadowsSwatchIds, l as getResponsiveColorSwatchIds } from "./introspection.es.js";
+import { getBaseBreakpoint, findBreakpointOverride, DefaultBreakpointID, join, getBreakpoint, getBreakpointMediaQuery, parseBreakpointsInput } from "./state/breakpoints.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 Cors from "cors";
@@ -111,6 +115,448 @@ function BodySnippet({
   }, [code, cleanup]);
   return null;
 }
+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 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 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.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 reducer = reducer$1;
+function getHasAPIResource(state, resourceType, resourceId) {
+  return getHasAPIResource$1(state, resourceType, resourceId);
+}
+function getAPIResource(state, resourceType, resourceId) {
+  return getAPIResource$1(state, resourceType, resourceId);
+}
+async function fetchJson(url) {
+  var _a;
+  const response = await fetch(url, {
+    headers: { "Content-Type": "application/json" }
+  });
+  if (response.status === 404)
+    return null;
+  if (!response.ok)
+    throw new Error(response.statusText);
+  if (((_a = response.headers.get("content-type")) == null ? void 0 : _a.includes("application/json")) !== true) {
+    throw new Error(`Expected JSON response from "${url}" but got "${response.headers.get("content-type")}"`);
+  }
+  return response.json();
+}
+function fetchAPIResource(resourceType, resourceId) {
+  return async (dispatch, getState) => {
+    const state = getState();
+    if (getHasAPIResource(state, resourceType, resourceId)) {
+      return getAPIResource(state, resourceType, resourceId);
+    }
+    let resource;
+    switch (resourceType) {
+      case APIResourceType.Swatch:
+        resource = await fetchJson(`/api/makeswift/swatches/${resourceId}`);
+        break;
+      case APIResourceType.File:
+        resource = await fetchJson(`/api/makeswift/files/${resourceId}`);
+        break;
+      case APIResourceType.Typography:
+        resource = await fetchJson(`/api/makeswift/typographies/${resourceId}`);
+        break;
+      case APIResourceType.GlobalElement:
+        resource = await fetchJson(`/api/makeswift/global-elements/${resourceId}`);
+        break;
+      case APIResourceType.PagePathnameSlice:
+        resource = await fetchJson(`/api/makeswift/page-pathname-slices/${resourceId}`);
+        break;
+      case APIResourceType.Table:
+        resource = await fetchJson(`/api/makeswift/tables/${resourceId}`);
+        break;
+      default:
+        resource = null;
+    }
+    dispatch(apiResourceFulfilled(resourceType, resourceId, resource));
+    return resource;
+  };
+}
+function configureStore({ serializedState }) {
+  return createStore(reducer, getInitialState(serializedState), applyMiddleware(thunk));
+}
+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;
+  }
+}
+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!]!
+    $pageIds: [ID!]!
+    $tableIds: [ID!]!
+  ) {
+    swatches(ids: $swatchIds) {
+      ...Swatch
+    }
+
+    files(ids: $fileIds) {
+      ...File
+    }
+
+    pagePathnamesById(ids: $pageIds) {
+      ...PagePathnameSlice
+    }
+
+    tables(ids: $tableIds) {
+      ...Table
+    }
+  }
+
+  ${SwatchFragment}
+  ${FileFragment}
+  ${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
+      }
+    }
+  }
+`;
+class MakeswiftClient {
+  constructor({
+    uri,
+    cacheData
+  }) {
+    __publicField(this, "graphqlClient");
+    __publicField(this, "makeswiftApiClient");
+    __publicField(this, "subscribe");
+    this.graphqlClient = new GraphQLClient(uri);
+    this.makeswiftApiClient = configureStore({
+      serializedState: cacheData
+    });
+    this.subscribe = this.makeswiftApiClient.subscribe;
+  }
+  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));
+  }
+  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"
@@ -312,10 +758,11 @@ function useCachedSite(siteId) {
   return site;
 }
 class Makeswift {
-  constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
+  constructor(apiKey, { apiOrigin = "https://api.makeswift.com", runtime } = {}) {
     __publicField(this, "apiKey");
     __publicField(this, "apiOrigin");
     __publicField(this, "graphqlClient");
+    __publicField(this, "runtime");
     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.`);
@@ -327,6 +774,7 @@ Received "${apiKey}" instead.`);
       throw new Error(`The Makeswift client received an invalid \`apiOrigin\` parameter: "${apiOrigin}".`);
     }
     this.graphqlClient = new GraphQLClient(new URL("graphql", apiOrigin).href);
+    this.runtime = runtime;
   }
   async fetch(path, init) {
     const response = await fetch(new URL(path, this.apiOrigin).toString(), __spreadProps(__spreadValues({}, init), {
@@ -352,7 +800,9 @@ Received "${apiKey}" instead.`);
     return result;
   }
   async introspect(element) {
-    const descriptors = getPropControllerDescriptors(storeContextDefaultValue.getState());
+    var _a;
+    const runtime = (_a = this.runtime) != null ? _a : ReactRuntime;
+    const descriptors = getPropControllerDescriptors(runtime.store.getState());
     const swatchIds = /* @__PURE__ */ new Set();
     const fileIds = /* @__PURE__ */ new Set();
     const typographyIds = /* @__PURE__ */ new Set();
@@ -427,8 +877,8 @@ Received "${apiKey}" instead.`);
     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;
+        var _a2;
+        const swatchId = (_a2 = style.value.color) == null ? void 0 : _a2.swatchId;
         if (swatchId != null)
           swatchIds.add(swatchId);
       });
@@ -444,38 +894,38 @@ Received "${apiKey}" instead.`);
     }));
     return {
       [APIResourceType.Swatch]: [...swatchIds].map((id) => {
-        var _a;
+        var _a2;
         return {
           id,
-          value: (_a = swatches.find((swatch) => (swatch == null ? void 0 : swatch.id) === id)) != null ? _a : null
+          value: (_a2 = swatches.find((swatch) => (swatch == null ? void 0 : swatch.id) === id)) != null ? _a2 : null
         };
       }),
       [APIResourceType.File]: [...fileIds].map((id) => {
-        var _a;
+        var _a2;
         return {
           id,
-          value: (_a = files.find((file) => (file == null ? void 0 : file.id) === id)) != null ? _a : null
+          value: (_a2 = files.find((file) => (file == null ? void 0 : file.id) === id)) != null ? _a2 : null
         };
       }),
       [APIResourceType.Typography]: [...typographyIds].map((id) => {
-        var _a;
+        var _a2;
         return {
           id,
-          value: (_a = typographies.find((typography) => (typography == null ? void 0 : typography.id) === id)) != null ? _a : null
+          value: (_a2 = typographies.find((typography) => (typography == null ? void 0 : typography.id) === id)) != null ? _a2 : null
         };
       }),
       [APIResourceType.Table]: [...tableIds].map((id) => {
-        var _a;
+        var _a2;
         return {
           id,
-          value: (_a = tables.find((table) => (table == null ? void 0 : table.id) === id)) != null ? _a : null
+          value: (_a2 = tables.find((table) => (table == null ? void 0 : table.id) === id)) != null ? _a2 : null
         };
       }),
       [APIResourceType.PagePathnameSlice]: [...pageIds].map((id) => {
-        var _a;
+        var _a2;
         return {
           id,
-          value: (_a = pagePathnameSlices.find((pagePathnameSlice) => (pagePathnameSlice == null ? void 0 : pagePathnameSlice.id) === id)) != null ? _a : null
+          value: (_a2 = pagePathnameSlices.find((pagePathnameSlice) => (pagePathnameSlice == null ? void 0 : pagePathnameSlice.id) === id)) != null ? _a2 : null
         };
       }),
       [APIResourceType.GlobalElement]: [...globalElements.entries()].map(([id, value]) => ({
@@ -677,7 +1127,7 @@ async function fonts(_req, res, { getFonts } = {}) {
   const fonts2 = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
   return res.json(fonts2);
 }
-const version = "0.8.5";
+const version = "0.8.7";
 async function handler(req, res, { apiKey }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -687,7 +1137,8 @@ async function handler(req, res, { apiKey }) {
     previewMode: true,
     interactionMode: true,
     clientSideNavigation: true,
-    elementFromPoint: false
+    elementFromPoint: false,
+    customBreakpoints: true
   });
 }
 async function proxyPreviewMode(req, res, { apiKey }) {
@@ -890,14 +1341,14 @@ async function getStaticPaths() {
 }
 const REVALIDATE_SECONDS = 1;
 async function getStaticProps(ctx) {
-  var _a, _b, _c;
+  var _a, _b, _c2;
   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: ((_c = ctx.previewData) == null ? void 0 : _c.makeswift) === true
+    preview: ((_c2 = ctx.previewData) == null ? void 0 : _c2.makeswift) === true
   });
   if (snapshot == null)
     return {
@@ -932,7 +1383,8 @@ async function getServerSideProps(ctx) {
   };
 }
 const Page = memo(({
-  snapshot
+  snapshot,
+  runtime
 }) => {
   const client = useMemo(() => new MakeswiftClient({
     uri: new URL("graphql", snapshot.apiOrigin).href,
@@ -942,6 +1394,7 @@ const Page = memo(({
     client,
     rootElements: /* @__PURE__ */ new Map([[snapshot.document.id, snapshot.document.data]]),
     preview: snapshot.preview,
+    runtime,
     children: /* @__PURE__ */ jsx(Page$1, {
       document: snapshot.document
     }, snapshot.document.data.key)
@@ -958,7 +1411,7 @@ function registerComponent$c(runtime) {
   function isHiddenBasedOnAnimationType(props, deviceId, property) {
     var _a, _b;
     const animateIn = props[property];
-    return ((_b = (_a = findDeviceOverride(animateIn, deviceId)) == null ? void 0 : _a.value) != null ? _b : "none") === "none";
+    return ((_b = (_a = findBreakpointOverride(runtime.getBreakpoints(), animateIn, deviceId)) == null ? void 0 : _a.value) != null ? _b : "none") === "none";
   }
   const isHiddenBasedOnBoxAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "boxAnimateType");
   const isHiddenBasedOnItemAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "itemAnimateType");
@@ -999,7 +1452,7 @@ function registerComponent$c(runtime) {
         format: Padding.Format.ClassName,
         preset: [
           {
-            deviceId: "desktop",
+            deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
             value: {
               paddingTop: { value: 10, unit: "px" },
               paddingRight: { value: 10, unit: "px" },
@@ -1149,7 +1602,7 @@ function registerComponent$b(runtime) {
       color: ResponsiveColor((props, device) => {
         var _a;
         const variant = props.variant;
-        const hidden = ((_a = findDeviceOverride(variant, device)) == null ? void 0 : _a.value) === "clear";
+        const hidden = ((_a = findBreakpointOverride(runtime.getBreakpoints(), variant, device)) == null ? void 0 : _a.value) === "clear";
         return { placeholder: "black", hidden };
       }),
       textColor: ResponsiveColor({
@@ -1196,7 +1649,7 @@ function registerComponent$a(runtime) {
       step: ResponsiveNumber((props, device) => {
         var _a, _b;
         const pageSize = props.pageSize;
-        const pageSizeValue = (_b = (_a = findDeviceOverride(pageSize, device)) == null ? void 0 : _a.value) != null ? _b : 1;
+        const pageSizeValue = (_b = (_a = findBreakpointOverride(runtime.getBreakpoints(), pageSize, device)) == null ? void 0 : _a.value) != null ? _b : 1;
         return {
           label: "Step",
           defaultValue: 1,
@@ -1220,7 +1673,7 @@ function registerComponent$a(runtime) {
         defaultValue: { value: 0, unit: "px" }
       }),
       autoplay: Checkbox({ label: "Autoplay" }),
-      delay: Number((props) => ({
+      delay: Number$1((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
@@ -1308,7 +1761,12 @@ function registerComponent$9(runtime) {
         defaultValue: "medium"
       }),
       gap: GapX({
-        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        preset: [
+          {
+            deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 10, unit: "px" }
+          }
+        ],
         label: "Gap",
         step: 1,
         min: 0,
@@ -1434,7 +1892,12 @@ function registerComponent$6(runtime) {
         hidden: props.tableId == null
       })),
       gap: GapY((props) => ({
-        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        preset: [
+          {
+            deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 10, unit: "px" }
+          }
+        ],
         label: "Gap",
         defaultValue: { value: 0, unit: "px" },
         hidden: props.tableId == null
@@ -1472,7 +1935,7 @@ function registerComponent$6(runtime) {
       labelTextColor: ResponsiveColor((props, device) => {
         const hidden = props.tableId == null;
         const responsiveContrast = props.contrast;
-        const contrast = findDeviceOverride(responsiveContrast, device);
+        const contrast = findBreakpointOverride(runtime.getBreakpoints(), responsiveContrast, device);
         return {
           hidden,
           label: "Label text color",
@@ -1524,7 +1987,12 @@ function registerComponent$6(runtime) {
         hidden: props.tableId == null
       })),
       width: Width({
-        preset: [{ deviceId: "desktop", value: { value: 550, unit: "px" } }],
+        preset: [
+          {
+            deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 550, unit: "px" }
+          }
+        ],
         defaultValue: { value: 100, unit: "%" },
         format: Width.Format.ClassName
       }),
@@ -1572,7 +2040,12 @@ function registerComponent$4(runtime) {
         hidden: props.showLogo === false
       })),
       logoWidth: ResponsiveLength((props) => ({
-        preset: [{ deviceId: "desktop", value: { value: 100, unit: "px" } }],
+        preset: [
+          {
+            deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 100, unit: "px" }
+          }
+        ],
         label: "Logo width",
         min: 0,
         max: 1e3,
@@ -1597,7 +2070,12 @@ function registerComponent$4(runtime) {
         defaultValue: "flex-end"
       }),
       gutter: GapX({
-        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        preset: [
+          {
+            deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 10, unit: "px" }
+          }
+        ],
         label: "Link gap",
         min: 0,
         max: 100,
@@ -1613,7 +2091,7 @@ function registerComponent$4(runtime) {
       }),
       mobileMenuOpenIconColor: ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
-        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        const hidden = !findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, device);
         return {
           label: "Open icon color",
           placeholder: "rgba(161, 168, 194, 0.5)",
@@ -1622,7 +2100,7 @@ function registerComponent$4(runtime) {
       }),
       mobileMenuCloseIconColor: ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
-        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        const hidden = !findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, device);
         return {
           label: "Close icon color",
           placeholder: "rgba(161, 168, 194, 0.5)",
@@ -1631,7 +2109,7 @@ function registerComponent$4(runtime) {
       }),
       mobileMenuBackgroundColor: ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
-        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        const hidden = !findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, device);
         return {
           label: "Menu BG color",
           placeholder: "black",
@@ -1754,7 +2232,12 @@ function registerComponent$2(runtime) {
         defaultValue: "center"
       }),
       gutter: GapX({
-        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        preset: [
+          {
+            deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 10, unit: "px" }
+          }
+        ],
         label: "Link gap",
         min: 0,
         max: 100,
@@ -1769,7 +2252,7 @@ function registerComponent$2(runtime) {
         format: Margin.Format.ClassName,
         preset: [
           {
-            deviceId: "desktop",
+            deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
             value: {
               marginTop: { value: 10, unit: "px" },
               marginRight: "auto",
@@ -1809,17 +2292,19 @@ function registerComponent$1(runtime) {
                             id: null,
                             style: [
                               {
-                                deviceId: "mobile",
-                                value: { fontSize: { value: 16, unit: "px" } }
-                              },
-                              {
-                                deviceId: "desktop",
+                                deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
                                 value: {
                                   fontWeight: 400,
                                   fontSize: { value: 18, unit: "px" },
                                   lineHeight: 1.5
                                 }
-                              }
+                              },
+                              ...runtime.getBreakpoints().some(({ id }) => id === DefaultBreakpointID.Mobile) ? [
+                                {
+                                  deviceId: DefaultBreakpointID.Mobile,
+                                  value: { fontSize: { value: 16, unit: "px" } }
+                                }
+                              ] : []
                             ]
                           }
                         }
@@ -1834,14 +2319,19 @@ function registerComponent$1(runtime) {
       })),
       width: Width({
         format: Width.Format.ClassName,
-        preset: [{ deviceId: "desktop", value: { value: 700, unit: "px" } }],
+        preset: [
+          {
+            deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 700, unit: "px" }
+          }
+        ],
         defaultValue: { value: 100, unit: "%" }
       }),
       margin: Margin({
         format: Margin.Format.ClassName,
         preset: [
           {
-            deviceId: "desktop",
+            deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
             value: {
               marginTop: null,
               marginRight: "auto",
@@ -1901,6 +2391,19 @@ 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) {
@@ -1952,8 +2455,100 @@ const FallbackComponent = forwardRef(function FallbackComponent2({
     })]
   });
 });
-function mapSideColor(swatches, _c) {
-  var _d = _c, { color } = _d, restOfSide = __objRest(_d, ["color"]);
+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"]);
   return __spreadProps(__spreadValues({}, restOfSide), {
     color: color && {
       alpha: color.alpha,
@@ -2029,34 +2624,235 @@ function useResponsiveColor(color) {
     return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
   }).filter(isNonNullable);
 }
-const DEVICE_QUERIES = DEVICES.map((device) => ({
-  id: device.id,
-  query: getDeviceMediaQuery(device).replace("@media", "")
-}));
-function subscribe(notify) {
-  const cleanUpFns = DEVICE_QUERIES.map((q) => {
-    const mediaQueryList = window.matchMedia(q.query);
-    mediaQueryList.addEventListener("change", notify);
-    return () => mediaQueryList.removeEventListener("change", notify);
+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(breakpoints, responsiveValues, join$1, strategy) {
+  return join(breakpoints, responsiveValues, join$1, strategy).reduce((acc, { deviceId, value }) => {
+    const breakpoint = getBreakpoint(breakpoints, deviceId);
+    const mediaQuery = getBreakpointMediaQuery(breakpoint);
+    return __spreadProps(__spreadValues({}, acc), {
+      [mediaQuery]: __spreadValues(__spreadValues({}, acc[mediaQuery]), value)
+    });
+  }, {});
+}
+function useResponsiveStyle(responsiveValues, join2, strategy) {
+  return responsiveStyle(useBreakpoints(), responsiveValues, join2, strategy);
+}
+function responsiveWidth(breakpoints, widthData, defaultValue = "100%") {
+  return __spreadValues({
+    maxWidth: "100%"
+  }, responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({
+    width: typeof width === "object" ? `${width.value}${width.unit}` : width
+  })));
+}
+function useResponsiveWidth(...args) {
+  return responsiveWidth(useBreakpoints(), ...args);
+}
+function responsivePadding(breakpoints, paddingData, defaultValue = {}) {
+  return responsiveStyle(breakpoints, [paddingData], ([padding = {}]) => paddingPropertyDataToStyle(padding, Object.assign({ paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 }, defaultValue)));
+}
+function useResponsivePadding(...args) {
+  return responsivePadding(useBreakpoints(), ...args);
+}
+function responsiveMargin(breakpoints, marginData, defaultValue = {}) {
+  return responsiveStyle(breakpoints, [marginData], ([margin = {}]) => marginPropertyDataToStyle(margin, Object.assign({ marginTop: 0, marginRight: "auto", marginBottom: 0, marginLeft: "auto" }, defaultValue)));
+}
+function useResponsiveMargin(...args) {
+  return responsiveMargin(useBreakpoints(), ...args);
+}
+function responsiveBorderRadius(breakpoints, borderRadiusData, defaultValue = {}) {
+  return responsiveStyle(breakpoints, [borderRadiusData], ([borderRadius = {}]) => borderRadiusPropertyDataToStyle(borderRadius, Object.assign({
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0
+  }, defaultValue)));
+}
+function useResponsiveBorderRadius(...args) {
+  return responsiveBorderRadius(useBreakpoints(), ...args);
+}
+function useResponsiveBorder(borderData, defaultValue = {}) {
+  return useResponsiveStyle([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(breakpoints, props) {
+  return __spreadValues({
+    display: "flex"
+  }, responsiveStyle(breakpoints, [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}`
+    };
+  }));
+}
+function useResponsiveGridItem(...args) {
+  return responsiveGridItem(useBreakpoints(), ...args);
+}
+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(breakpoints, value) {
+  return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({
+    boxShadow: getBoxShadow(shadow)
+  }));
+}
+function useResponsiveShadow(...args) {
+  return responsiveShadow(useBreakpoints(), ...args);
+}
+function responsiveTextStyle(breakpoints, value) {
+  return responsiveStyle(breakpoints, [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" } : {});
   });
-  return () => cleanUpFns.forEach((fn) => fn());
 }
-function useMediaQuery(responsiveValue) {
-  const getServerSnapshot = () => {
-    var _a;
-    return (_a = findDeviceOverride(responsiveValue, DEVICES[0].id)) == null ? void 0 : _a.value;
-  };
-  function getSnapshot() {
-    var _a;
-    const deviceId = DEVICE_QUERIES.reduce((matchedDevice, deviceQueries) => {
-      if (window.matchMedia(deviceQueries.query).matches) {
-        return deviceQueries.id;
-      }
-      return matchedDevice;
-    }, DEVICE_QUERIES[0].id);
-    return (_a = findDeviceOverride(responsiveValue, deviceId)) == null ? void 0 : _a.value;
-  }
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+function useResponsiveTextStyle(...args) {
+  return responsiveTextStyle(useBreakpoints(), ...args);
 }
 const defaultMargin = {
   marginTop: 0,
@@ -2074,7 +2870,7 @@ function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
   return __spreadValues(__spreadValues({}, properties.includes(StyleControlProperty.Width) && {
     maxWidth: "100%"
-  }), responsiveStyle([
+  }), useResponsiveStyle([
     style == null ? void 0 : style.width,
     style == null ? void 0 : style.margin,
     style == null ? void 0 : style.padding,
@@ -2082,14 +2878,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, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c2, _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 = 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"
+      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"
     }), 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,
@@ -2105,7 +2901,7 @@ function useStyleControlCssObject(style, controlDefinition) {
       return null;
     return lengthPercentageDataToString(widthProperty);
   }
-  function borderSideToString(borderSide) {
+  function borderSideToString2(borderSide) {
     if (borderSide == null)
       return null;
     const { width, color, style: style2 } = borderSide;
@@ -2350,13 +3146,13 @@ function useSlot(data, control) {
     }, element.key))
   });
 }
-function Slot(_e) {
-  var _f = _e, {
+function Slot(_f) {
+  var _g = _f, {
     as,
     control,
     children,
     className
-  } = _f, restOfProps = __objRest(_f, [
+  } = _g, restOfProps = __objRest(_g, [
     "as",
     "control",
     "children",
@@ -2385,15 +3181,15 @@ function Slot(_e) {
 }
 Slot.Placeholder = SlotPlaceholder;
 Slot.Item = SlotItem;
-function SlotItem(_g) {
-  var _h = _g, {
+function SlotItem(_h) {
+  var _i = _h, {
     as,
     control,
     grid,
     index,
     children,
     className
-  } = _h, restOfProps = __objRest(_h, [
+  } = _i, restOfProps = __objRest(_i, [
     "as",
     "control",
     "grid",
@@ -2405,7 +3201,7 @@ function SlotItem(_g) {
   const [element, setElement] = useState(null);
   const baseClassName = useStyle(__spreadValues({
     display: "flex"
-  }, responsiveStyle([grid], ([{
+  }, useResponsiveStyle([grid], ([{
     count = 12,
     spans = [[12]]
   } = {}]) => {
@@ -2579,24 +3375,24 @@ function ControlValue({
   }
 }
 function useWidthStyle(value, descriptor) {
-  return useStyle(responsiveWidth(value, descriptor.options.defaultValue));
+  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue));
 }
 function usePaddingStyle(value) {
-  return useStyle(responsivePadding(value));
+  return useStyle(useResponsivePadding(value));
 }
 function useMarginStyle(value) {
-  return useStyle(responsiveMargin(value));
+  return useStyle(useResponsiveMargin(value));
 }
 function useBorderRadiusStyle(value) {
-  return useStyle(responsiveBorderRadius(value));
+  return useStyle(useResponsiveBorderRadius(value));
 }
 function useShadowsStyle(value) {
   const shadowValue = useBoxShadow(value);
-  return useStyle(responsiveShadow(shadowValue != null ? shadowValue : void 0));
+  return useStyle(useResponsiveShadow(shadowValue != null ? shadowValue : void 0));
 }
 function useBorderStyle(value) {
   const borderData = useBorder(value);
-  return useStyle(responsiveBorder(borderData != null ? borderData : void 0));
+  return useStyle(useResponsiveBorder(borderData != null ? borderData : void 0));
 }
 function PropsValue({
   element,
@@ -2613,7 +3409,7 @@ function PropsValue({
     return getPropControllers(state, documentKey, element.key);
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
-    var _a2, _b, _c;
+    var _a2, _b, _c2;
     switch (descriptor.type) {
       case CheckboxControlType:
       case NumberControlType:
@@ -2655,7 +3451,7 @@ function PropsValue({
         }, descriptor.type);
       }
       case SlotControlType: {
-        const control = (_c = propControllers == null ? void 0 : propControllers[propName]) != null ? _c : null;
+        const control = (_c2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _c2 : null;
         return /* @__PURE__ */ jsx(RenderHook, {
           hook: useSlot,
           parameters: [props[propName], control],
@@ -2837,41 +3633,74 @@ function isDomNodeHandle(value) {
   }
   return false;
 }
-const storeContextDefaultValue = configureStore();
-function createReactRuntime(store) {
-  return {
-    registerComponent(component, {
-      type,
+class ReactRuntime {
+  constructor({
+    unstable_breakpoints
+  }) {
+    __publicField(this, "store");
+    this.store = configureStore$1({
+      breakpoints: unstable_breakpoints ? parseBreakpointsInput(unstable_breakpoints) : void 0
+    });
+    registerBuiltinComponents(this);
+  }
+  static registerComponent(component, {
+    type,
+    label,
+    icon = "Cube40",
+    hidden = false,
+    props
+  }) {
+    const unregisterComponent = this.store.dispatch(registerComponentEffect(type, {
       label,
-      icon = "Cube40",
-      hidden = false,
-      props
-    }) {
-      const unregisterComponent = store.dispatch(registerComponentEffect(type, {
-        label,
-        icon,
-        hidden
-      }, props != null ? props : {}));
-      const unregisterReactComponent = store.dispatch(registerReactComponentEffect(type, component));
-      return () => {
-        unregisterComponent();
-        unregisterReactComponent();
-      };
-    },
-    copyElementTree(elementTree2, replacementContext) {
-      return copyElementTree(store.getState(), elementTree2, replacementContext);
-    }
-  };
+      icon,
+      hidden
+    }, props != null ? props : {}));
+    const unregisterReactComponent = this.store.dispatch(registerReactComponentEffect(type, component));
+    return () => {
+      unregisterComponent();
+      unregisterReactComponent();
+    };
+  }
+  static copyElementTree(elementTree2, replacementContext) {
+    return copyElementTree(this.store.getState(), elementTree2, replacementContext);
+  }
+  static getBreakpoints() {
+    return getBreakpoints(this.store.getState());
+  }
+  registerComponent(component, {
+    type,
+    label,
+    icon = "Cube40",
+    hidden = false,
+    props
+  }) {
+    const unregisterComponent = this.store.dispatch(registerComponentEffect(type, {
+      label,
+      icon,
+      hidden
+    }, props != null ? props : {}));
+    const unregisterReactComponent = this.store.dispatch(registerReactComponentEffect(type, component));
+    return () => {
+      unregisterComponent();
+      unregisterReactComponent();
+    };
+  }
+  copyElementTree(elementTree2, replacementContext) {
+    return copyElementTree(this.store.getState(), elementTree2, replacementContext);
+  }
+  getBreakpoints() {
+    return getBreakpoints(this.store.getState());
+  }
 }
-const ReactRuntime = createReactRuntime(storeContextDefaultValue);
+__publicField(ReactRuntime, "store", configureStore$1());
 registerBuiltinComponents(ReactRuntime);
-const StoreContext = createContext(storeContextDefaultValue);
+const StoreContext = createContext(ReactRuntime.store);
 const PreviewProvider = dynamic(() => import("./PreviewProvider.es.js"));
 const LiveProvider = dynamic(() => import("./LiveProvider.es.js"));
-function RuntimeProvider(_i) {
-  var _j = _i, {
+function RuntimeProvider(_j) {
+  var _k = _j, {
     preview
-  } = _j, props = __objRest(_j, [
+  } = _k, props = __objRest(_k, [
     "preview"
   ]);
   return preview ? /* @__PURE__ */ jsx(PreviewProvider, __spreadValues({}, props)) : /* @__PURE__ */ jsx(LiveProvider, __spreadValues({}, props));
@@ -2926,6 +3755,9 @@ function useIsPreview() {
 function useBuilderEditMode() {
   return useSelector((state) => getBuilderEditMode(state));
 }
+function useBreakpoints() {
+  return useSelector((state) => getBreakpoints(state));
+}
 function useDispatch() {
   const store = useContext(StoreContext);
   return store.dispatch;
@@ -3069,5 +3901,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-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 };
+export { Document$1 as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element$1 as E, forwardNextDynamicRef as F, useIsPreview as G, useFiles as H, useSwatches as I, usePagePathnameSlice as J, useElementId as K, deepEqual as L, ElementImperativeHandle as M, StoreContext as N, MakeswiftProvider as O, PageProvider as P, useBuilderEditMode as Q, RuntimeProvider as R, Shapes as S, pollBoxModel as T, useTypography as U, getStaticPaths as V, getStaticProps as W, getServerSideProps as X, Page as Y, Makeswift as Z, PreviewModeScript as _, ReactRuntime as a, MakeswiftApiHandler as a0, 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, Page$1 as m, useStyle as n, useResponsiveStyle as o, useResponsiveWidth as p, useResponsiveTextStyle as q, colorToString as r, useBreakpoints as s, Sizes as t, useIsInBuilder as u, useFormContext as v, useResponsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
 //# sourceMappingURL=index.es.js.map