@makeswift/runtime 0.7.18 → 0.8.0

package/dist/index.cjs.js

@@ -35,15 +35,12 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var _c;
 var React = require("react");
 var withSelector = require("use-sync-external-store/shim/with-selector");
 var dynamic = require("next/dynamic");
 var constants = require("./constants.cjs.js");
 var actions = require("./actions.cjs.js");
-var css = require("@emotion/css");
-var serialize = require("@emotion/serialize");
-var utils = require("@emotion/utils");
+var responsiveStyle = require("./responsive-style.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 var descriptors = require("./descriptors.cjs.js");
 require("slate");
@@ -52,19 +49,20 @@ var combobox = require("./combobox.cjs.js");
 require("slate-react");
 var shim = require("use-sync-external-store/shim");
 var introspection = require("./introspection.cjs.js");
-var redux = require("redux");
-var thunk = require("redux-thunk");
-var types = require("./types.cjs.js");
+var isNonNullable = require("./isNonNullable.cjs.js");
 var boxModels = require("./box-models.cjs.js");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
+var css = require("@emotion/css");
 var reactDom = require("react-dom");
 var parse = require("html-react-parser");
 var Head = require("next/head");
+var types = require("./types.cjs.js");
 var createEmotionServer = require("@emotion/server/create-instance");
 var NextDocument = require("next/document");
-var cookie = require("cookie");
 var Cors = require("cors");
+var pathToRegexp = require("path-to-regexp");
+var cookie = require("cookie");
 var httpProxy = require("http-proxy");
 var setCookieParser = require("set-cookie-parser");
 var uuid = require("uuid");
@@ -94,7 +92,6 @@ function _interopNamespace(e) {
 }
 var React__namespace = /* @__PURE__ */ _interopNamespace(React);
 var dynamic__default = /* @__PURE__ */ _interopDefaultLegacy(dynamic);
-var thunk__default = /* @__PURE__ */ _interopDefaultLegacy(thunk);
 var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
 var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
 var parse__default = /* @__PURE__ */ _interopDefaultLegacy(parse);
@@ -147,661 +144,6 @@ function BodySnippet({
   }, [code, cleanup]);
   return null;
 }
-async function introspect(element, client, store) {
-  const descriptors$1 = constants.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]) => {
-        introspection.getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
-          swatchIds.add(swatchId);
-        });
-        introspection.getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
-        introspection.getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
-        introspection.getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
-        introspection.getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
-        introspection.getElementChildren(descriptor, props[propName]).forEach((child) => {
-          if (!seen.has(child.key)) {
-            seen.add(child.key);
-            remaining.push(child);
-          }
-        });
-        if (descriptor.type === descriptors.ShapeControlType) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          getResourcesFromElementDescriptors(descriptor.config.type, prop);
-        }
-        if (descriptor.type === descriptors.ListControlType) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          prop.forEach((item) => {
-            getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
-          });
-        }
-        if (descriptor.type === descriptors.Types.Shape) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          getResourcesFromElementDescriptors(descriptor.options.type, prop);
-        }
-        if (descriptor.type === descriptors.Types.List) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          prop.forEach((item) => {
-            getResourcesFromElementDescriptors({ propName: descriptor.options.type }, { propName: item.value });
-          });
-        }
-      });
-    };
-    let element2;
-    if (constants.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$1.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 === types.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 actions.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 actions.ActionTypes.INTROSPECTED_RESOURCES_FULFILLED: {
-      const { introspectedResourceIds, introspectedResources } = action.payload;
-      const swatches = new Map(state.get(types.APIResourceType.Swatch));
-      const files = new Map(state.get(types.APIResourceType.File));
-      const typographies = new Map(state.get(types.APIResourceType.Typography));
-      const pagePathnameSlices = new Map(state.get(types.APIResourceType.PagePathnameSlice));
-      const tables = new Map(state.get(types.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(types.APIResourceType.Swatch, swatches).set(types.APIResourceType.File, files).set(types.APIResourceType.Typography, typographies).set(types.APIResourceType.PagePathnameSlice, pagePathnameSlices).set(types.APIResourceType.Table, tables);
-    }
-    case actions.ActionTypes.TYPOGRAPHIES_FULFILLED: {
-      const typographies = new Map(state.get(types.APIResourceType.Typography));
-      action.payload.typographyIds.forEach((typographyId, idx) => {
-        typographies.set(typographyId, action.payload.typographies[idx]);
-      });
-      return new Map(state).set(types.APIResourceType.Typography, typographies);
-    }
-    case actions.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 actions.ActionTypes.EVICT_API_RESOURCE: {
-      const [resourceType, resourceId] = action.payload.id.split(":");
-      if (!(resourceType in types.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 types.APIResourceType.Swatch:
-        resource = (await client.request(SwatchQuery, {
-          swatchId: resourceId
-        })).swatch;
-        break;
-      case types.APIResourceType.File:
-        resource = (await client.request(FileQuery, {
-          fileId: resourceId
-        })).file;
-        break;
-      case types.APIResourceType.Typography:
-        resource = (await client.request(TypographyQuery, {
-          typographyId: resourceId
-        })).typography;
-        break;
-      case types.APIResourceType.GlobalElement:
-        resource = (await client.request(GlobalElementQuery, { globalElementId: resourceId })).globalElement;
-        break;
-      case types.APIResourceType.PagePathnameSlice:
-        resource = (_a = (await client.request(PagePathnamesByIdQuery, { pageIds: [resourceId] })).pagePathnamesById[0]) != null ? _a : null;
-        break;
-      case types.APIResourceType.Table:
-        resource = (await client.request(TableQuery, {
-          tableId: resourceId
-        })).table;
-        break;
-      default:
-        resource = null;
-    }
-    dispatch(actions.apiResourceFulfilled(resourceType, resourceId, resource));
-    return resource;
-  };
-}
-function fetchIntrospectedResources(introspectedResourceIds) {
-  return async (dispatch, _getState, client) => {
-    const introspectedResources = await client.request(IntrospectedResourcesQuery, introspectedResourceIds);
-    dispatch(actions.introspectedResourcesFulfilled(introspectedResourceIds, introspectedResources));
-  };
-}
-function fetchTypographies(typographyIds) {
-  return async (dispatch, getState, client) => {
-    const state = getState();
-    if (typographyIds.every((typographyId) => getHasAPIResource(state, types.APIResourceType.Typography, typographyId))) {
-      return typographyIds.map((typographyId) => getAPIResource(state, types.APIResourceType.Typography, typographyId));
-    }
-    const { typographies } = await client.request(TypographiesQuery, { typographyIds });
-    dispatch(actions.typographiesFulfilled(typographyIds, typographies));
-    return typographies;
-  };
-}
-function configureStore({
-  graphqlClient,
-  serializedState
-}) {
-  return redux.createStore(reducer, getInitialState(serializedState), redux.applyMiddleware(thunk__default["default"].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(), types.APIResourceType.Swatch, swatchId);
-  }
-  async fetchSwatch(swatchId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(types.APIResourceType.Swatch, swatchId));
-  }
-  readFile(fileId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.File, fileId);
-  }
-  async fetchFile(fileId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(types.APIResourceType.File, fileId));
-  }
-  readTypography(typographyId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.Typography, typographyId);
-  }
-  async fetchTypography(typographyId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(types.APIResourceType.Typography, typographyId));
-  }
-  async fetchTypographies(typographyIds) {
-    return await this.makeswiftApiClient.dispatch(fetchTypographies(typographyIds));
-  }
-  readGlobalElement(globalElementId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.GlobalElement, globalElementId);
-  }
-  async fetchGlobalElement(globalElementId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(types.APIResourceType.GlobalElement, globalElementId));
-  }
-  readPagePathnameSlice(pageId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.PagePathnameSlice, pageId);
-  }
-  async fetchPagePathnameSlice(pageId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(types.APIResourceType.PagePathnameSlice, pageId));
-  }
-  readTable(tableId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.Table, tableId);
-  }
-  async fetchTable(tableId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(types.APIResourceType.Table, tableId));
-  }
-  async createTableRecord(tableId, columns) {
-    await this.graphqlClient.request(CreateTableRecordMutation, {
-      input: {
-        data: {
-          tableId,
-          columns
-        }
-      }
-    });
-  }
-  readSite(siteId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.Site, siteId);
-  }
-  readPage(pageId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.Page, pageId);
-  }
-  readSnippet(snippetId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.Snippet, snippetId);
-  }
-}
-const Context$1 = React.createContext(new MakeswiftClient({
-  uri: "https://api.makeswift.com/graphql"
-}));
-function useMakeswiftClient() {
-  return React.useContext(Context$1);
-}
-function MakeswiftProvider({
-  client,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$1.Provider, {
-    value: client,
-    children
-  });
-}
 const SnippetLocation = {
   Body: "BODY",
   Head: "HEAD"
@@ -849,7 +191,7 @@ function Page$1({
       return;
     const oldSnippets = snippets.map(filterUsedSnippetProperties);
     const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties);
-    if (deepEqual(newSnippets, oldSnippets))
+    if (responsiveStyle.deepEqual(newSnippets, oldSnippets))
       return;
     setSnippets(cachedPage.snippets);
   }, [cachedPage]);
@@ -991,22 +333,22 @@ function Page$1({
   });
 }
 function useCachedPage(pageId) {
-  const client = useMakeswiftClient();
+  const client = responsiveStyle.useMakeswiftClient();
   const getSnapshot = () => pageId == null ? null : client.readPage(pageId);
   const page = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return page;
 }
 function useCachedSite(siteId) {
-  const client = useMakeswiftClient();
+  const client = responsiveStyle.useMakeswiftClient();
   const getSnapshot = () => siteId == null ? null : client.readSite(siteId);
   const site = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
-const version = "0.7.18";
 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.`);
@@ -1017,6 +359,7 @@ Received "${apiKey}" instead.`);
     } catch {
       throw new Error(`The Makeswift client received an invalid \`apiOrigin\` parameter: "${apiOrigin}".`);
     }
+    this.graphqlClient = new responsiveStyle.GraphQLClient(new URL("graphql", apiOrigin).href);
   }
   async fetch(path, init) {
     const response = await fetch(new URL(path, this.apiOrigin).toString(), __spreadProps(__spreadValues({}, init), {
@@ -1033,9 +376,149 @@ Received "${apiKey}" instead.`);
     const json = await response.json();
     return json;
   }
+  async getTypographies(typographyIds) {
+    const result = await this.graphqlClient.request(responsiveStyle.TypographiesQuery, { typographyIds });
+    return result.typographies;
+  }
+  async getIntrospectedResources(introspectedResourceIds) {
+    const result = await this.graphqlClient.request(responsiveStyle.IntrospectedResourcesQuery, introspectedResourceIds);
+    return result;
+  }
+  async introspect(element) {
+    const descriptors$1 = constants.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]) => {
+          introspection.getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+            swatchIds.add(swatchId);
+          });
+          introspection.getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
+          introspection.getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
+          introspection.getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
+          introspection.getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
+          introspection.getElementChildren(descriptor, props[propName]).forEach((child) => {
+            if (!seen.has(child.key)) {
+              seen.add(child.key);
+              remaining.push(child);
+            }
+          });
+          if (descriptor.type === descriptors.ShapeControlType) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            getResourcesFromElementDescriptors(descriptor.config.type, prop);
+          }
+          if (descriptor.type === descriptors.ListControlType) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            prop.forEach((item) => {
+              getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
+            });
+          }
+          if (descriptor.type === descriptors.Types.Shape) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            getResourcesFromElementDescriptors(descriptor.options.type, prop);
+          }
+          if (descriptor.type === descriptors.Types.List) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            prop.forEach((item) => {
+              getResourcesFromElementDescriptors({ propName: descriptor.options.type }, { propName: item.value });
+            });
+          }
+        });
+      };
+      let element2;
+      if (constants.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$1.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 {
+      [types.APIResourceType.Swatch]: [...swatchIds].map((id) => {
+        var _a;
+        return {
+          id,
+          value: (_a = swatches.find((swatch) => (swatch == null ? void 0 : swatch.id) === id)) != null ? _a : null
+        };
+      }),
+      [types.APIResourceType.File]: [...fileIds].map((id) => {
+        var _a;
+        return {
+          id,
+          value: (_a = files.find((file) => (file == null ? void 0 : file.id) === id)) != null ? _a : null
+        };
+      }),
+      [types.APIResourceType.Typography]: [...typographyIds].map((id) => {
+        var _a;
+        return {
+          id,
+          value: (_a = typographies.find((typography) => (typography == null ? void 0 : typography.id) === id)) != null ? _a : null
+        };
+      }),
+      [types.APIResourceType.Table]: [...tableIds].map((id) => {
+        var _a;
+        return {
+          id,
+          value: (_a = tables.find((table) => (table == null ? void 0 : table.id) === id)) != null ? _a : null
+        };
+      }),
+      [types.APIResourceType.PagePathnameSlice]: [...pageIds].map((id) => {
+        var _a;
+        return {
+          id,
+          value: (_a = pagePathnameSlices.find((pagePathnameSlice) => (pagePathnameSlice == null ? void 0 : pagePathnameSlice.id) === id)) != null ? _a : null
+        };
+      }),
+      [types.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 } = {}) {
@@ -1056,161 +539,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(responsiveStyle.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(responsiveStyle.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(responsiveStyle.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(responsiveStyle.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(responsiveStyle.PagePathnamesByIdQuery, { pageIds: [pageId] });
+    return (_a = result.pagePathnamesById.at(0)) != null ? _a : null;
+  }
+  async getTable(tableId) {
+    const result = await this.graphqlClient.request(responsiveStyle.TableQuery, { tableId });
+    return result.table;
   }
 }
 function PreviewModeScript({
@@ -1340,28 +692,115 @@ class Document$1 extends NextDocument__default["default"] {
     });
   }
 }
+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);
+}
+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.0";
+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 = httpProxy.createProxyServer();
+  previewModeProxy.once("proxyReq", (proxyReq) => {
+    proxyReq.removeHeader("X-Makeswift-Preview-Mode");
+    proxyReq.removeHeader("X-Invoke-Path");
+    proxyReq.removeHeader("X-Invoke-Query");
+    const url = new URL(proxyReq.path, "http://n");
+    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$1 = setCookieParser.parse(setCookie).map((cookie2) => cookie.serialize(cookie2.name, cookie2.value, cookie2)).join(";");
+  return await new Promise((resolve2, reject) => previewModeProxy.web(req, res, { target, headers: { cookie: cookie$1 }, 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__default["default"]({ origin: appOrigin });
-  const previewModeProxy = httpProxy.createProxyServer();
-  previewModeProxy.on("proxyReq", (proxyReq) => {
-    proxyReq.removeHeader("X-Makeswift-Preview-Mode");
-    const url = new URL(proxyReq.path, "http://n");
-    url.searchParams.delete("x-makeswift-preview-mode");
-    proxyReq.path = url.pathname + url.search;
-  });
   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)
@@ -1376,224 +815,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$1 = setCookieParser.parse(setCookie).map((cookie2) => cookie.serialize(cookie2.name, cookie2.value, cookie2)).join(";");
-        return await new Promise((resolve2, reject) => previewModeProxy.web(req, res, { target, headers: { cookie: cookie$1 } }, (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) => pathToRegexp.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__";
@@ -1668,14 +923,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 {
@@ -1712,7 +967,7 @@ async function getServerSideProps(ctx) {
 const Page = React.memo(({
   snapshot
 }) => {
-  const client = React.useMemo(() => new MakeswiftClient({
+  const client = React.useMemo(() => new responsiveStyle.MakeswiftClient({
     uri: new URL("graphql", snapshot.apiOrigin).href,
     cacheData: snapshot.cacheData
   }), [snapshot]);
@@ -1725,69 +980,6 @@ const Page = React.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;
@@ -1799,7 +991,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 = responsiveStyle.findDeviceOverride(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");
@@ -1994,7 +1186,7 @@ function registerComponent$b(runtime) {
       color: descriptors.ResponsiveColor((props, device) => {
         var _a;
         const variant = props.variant;
-        const hidden = ((_a = findDeviceOverride(variant, device)) == null ? void 0 : _a.value) === "clear";
+        const hidden = ((_a = responsiveStyle.findDeviceOverride(variant, device)) == null ? void 0 : _a.value) === "clear";
         return { placeholder: "black", hidden };
       }),
       textColor: descriptors.ResponsiveColor({
@@ -2043,7 +1235,7 @@ function registerComponent$a(runtime) {
       step: descriptors.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 = responsiveStyle.findDeviceOverride(pageSize, device)) == null ? void 0 : _a.value) != null ? _b : 1;
         return {
           label: "Step",
           defaultValue: 1,
@@ -2327,7 +1519,7 @@ function registerComponent$6(runtime) {
       labelTextColor: descriptors.ResponsiveColor((props, device) => {
         const hidden = props.tableId == null;
         const responsiveContrast = props.contrast;
-        const contrast = findDeviceOverride(responsiveContrast, device);
+        const contrast = responsiveStyle.findDeviceOverride(responsiveContrast, device);
         return {
           hidden,
           label: "Label text color",
@@ -2472,7 +1664,7 @@ function registerComponent$4(runtime) {
       }),
       mobileMenuOpenIconColor: descriptors.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
-        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        const hidden = !responsiveStyle.findDeviceOverride(mobileMenuAnimation, device);
         return {
           label: "Open icon color",
           placeholder: "rgba(161, 168, 194, 0.5)",
@@ -2481,7 +1673,7 @@ function registerComponent$4(runtime) {
       }),
       mobileMenuCloseIconColor: descriptors.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
-        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        const hidden = !responsiveStyle.findDeviceOverride(mobileMenuAnimation, device);
         return {
           label: "Close icon color",
           placeholder: "rgba(161, 168, 194, 0.5)",
@@ -2490,7 +1682,7 @@ function registerComponent$4(runtime) {
       }),
       mobileMenuBackgroundColor: descriptors.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
-        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        const hidden = !responsiveStyle.findDeviceOverride(mobileMenuAnimation, device);
         return {
           label: "Menu BG color",
           placeholder: "black",
@@ -2768,19 +1960,6 @@ function registerBuiltinComponents(runtime) {
     unregisterVideoComponent();
   };
 }
-const isServer = typeof window === "undefined";
-const useInsertionEffectSpecifier = "useInsertionEffect";
-const useInsertionEffect = (_c = React__namespace[useInsertionEffectSpecifier]) != null ? _c : React__namespace.useLayoutEffect;
-function useStyle(style) {
-  const serialized = serialize.serializeStyles([style], css.cache.registered);
-  utils.registerStyles(css.cache, serialized, false);
-  useInsertionEffect(() => {
-    utils.insertStyles(css.cache, serialized, false);
-  });
-  if (isServer)
-    utils.insertStyles(css.cache, serialized, false);
-  return `${css.cache.key}-${serialized.name}`;
-}
 var _path;
 function _extends() {
   _extends = Object.assign || function(target) {
@@ -2813,7 +1992,7 @@ const FallbackComponent = React.forwardRef(function FallbackComponent2({
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ref,
-    className: useStyle({
+    className: responsiveStyle.useStyle({
       width: "100%",
       height: 54,
       backgroundColor: "#fcedf2",
@@ -2832,110 +2011,18 @@ const FallbackComponent = React.forwardRef(function FallbackComponent2({
     })]
   });
 });
-function useSwatch(swatchId) {
-  const client = useMakeswiftClient();
-  const readSwatch = () => swatchId == null ? null : client.readSwatch(swatchId);
-  const swatch = shim.useSyncExternalStore(client.subscribe, readSwatch, readSwatch);
-  React.useEffect(() => {
-    if (swatchId != null)
-      client.fetchSwatch(swatchId).catch(console.error);
-  }, [client, swatchId]);
-  return swatch;
-}
-function useSwatches(swatchIds) {
-  const client = useMakeswiftClient();
-  const lastSnapshot = React.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 = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
-  React.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 = shim.useSyncExternalStore(client.subscribe, readFile, readFile);
-  React.useEffect(() => {
-    if (fileId != null)
-      client.fetchFile(fileId);
-  }, [client, fileId]);
-  return file;
-}
-function useFiles(fileIds) {
-  const client = useMakeswiftClient();
-  const lastSnapshot = React.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 = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
-  React.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 = shim.useSyncExternalStore(client.subscribe, readTypography, readTypography);
-  React.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 = shim.useSyncExternalStore(client.subscribe, readGlobalElement, readGlobalElement);
-  React.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 = shim.useSyncExternalStore(client.subscribe, readPagePathnameSlice, readPagePathnameSlice);
-  React.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 = shim.useSyncExternalStore(client.subscribe, readTable, readTable);
-  React.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(introspection.isNonNullable).find((s) => s && s.id === color.swatchId)
+      swatch: swatches.filter(isNonNullable.isNonNullable).find((s) => s && s.id === color.swatchId)
     }
   });
 }
 function useBorder(value) {
   const swatchIds = introspection.getBorderSwatchIds(value);
-  const swatches = useSwatches(swatchIds);
+  const swatches = responsiveStyle.useSwatches(swatchIds);
   if (value == null)
     return null;
   return value.map((_a) => {
@@ -2960,7 +2047,7 @@ const ShadowDefaultValue = {
 };
 function useBoxShadow(value) {
   const swatchIds = introspection.getBoxShadowsSwatchIds(value);
-  const swatches = useSwatches(swatchIds);
+  const swatches = responsiveStyle.useSwatches(swatchIds);
   if (value == null)
     return null;
   return value.map((_a) => {
@@ -2975,7 +2062,7 @@ function useBoxShadow(value) {
         return __spreadProps(__spreadValues({}, restOfShadow), {
           payload: {
             color: color != null ? {
-              swatch: swatches.filter(introspection.isNonNullable).find((s) => s && s.id === color.swatchId),
+              swatch: swatches.filter(isNonNullable.isNonNullable).find((s) => s && s.id === color.swatchId),
               alpha: color.alpha
             } : null,
             inset: inset != null ? inset : ShadowDefaultValue.inset,
@@ -2991,7 +2078,7 @@ function useBoxShadow(value) {
 }
 function useResponsiveColor(color) {
   const swatchIds = introspection.getResponsiveColorSwatchIds(color);
-  const swatches = useSwatches(swatchIds);
+  const swatches = responsiveStyle.useSwatches(swatchIds);
   if (color == null)
     return null;
   return color.map((_a) => {
@@ -2999,11 +2086,11 @@ 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(introspection.isNonNullable);
+  }).filter(isNonNullable.isNonNullable);
 }
-const DEVICE_QUERIES = DEVICES.map((device) => ({
+const DEVICE_QUERIES = responsiveStyle.DEVICES.map((device) => ({
   id: device.id,
-  query: getDeviceMediaQuery(device).replace("@media", "")
+  query: responsiveStyle.getDeviceMediaQuery(device).replace("@media", "")
 }));
 function subscribe(notify) {
   const cleanUpFns = DEVICE_QUERIES.map((q) => {
@@ -3016,7 +2103,7 @@ function subscribe(notify) {
 function useMediaQuery(responsiveValue) {
   const getServerSnapshot = () => {
     var _a;
-    return (_a = findDeviceOverride(responsiveValue, DEVICES[0].id)) == null ? void 0 : _a.value;
+    return (_a = responsiveStyle.findDeviceOverride(responsiveValue, responsiveStyle.DEVICES[0].id)) == null ? void 0 : _a.value;
   };
   function getSnapshot() {
     var _a;
@@ -3026,216 +2113,10 @@ function useMediaQuery(responsiveValue) {
       }
       return matchedDevice;
     }, DEVICE_QUERIES[0].id);
-    return (_a = findDeviceOverride(responsiveValue, deviceId)) == null ? void 0 : _a.value;
+    return (_a = responsiveStyle.findDeviceOverride(responsiveValue, deviceId)) == null ? void 0 : _a.value;
   }
   return shim.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",
@@ -3252,7 +2133,7 @@ function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
   return __spreadValues(__spreadValues({}, properties.includes(descriptors.StyleControlProperty.Width) && {
     maxWidth: "100%"
-  }), responsiveStyle([
+  }), responsiveStyle.responsiveStyle([
     style == null ? void 0 : style.width,
     style == null ? void 0 : style.margin,
     style == null ? void 0 : style.padding,
@@ -3260,14 +2141,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(descriptors.StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
-    }), properties.includes(descriptors.StyleControlProperty.Margin) && marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(descriptors.StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(descriptors.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"
+    }), properties.includes(descriptors.StyleControlProperty.Margin) && responsiveStyle.marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(descriptors.StyleControlProperty.Padding) && responsiveStyle.paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(descriptors.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"
     }), properties.includes(descriptors.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,
@@ -3281,18 +2162,18 @@ function useStyleControlCssObject(style, controlDefinition) {
   function widthToString(widthProperty) {
     if (widthProperty == null)
       return null;
-    return lengthPercentageDataToString(widthProperty);
+    return responsiveStyle.lengthPercentageDataToString(widthProperty);
   }
-  function borderSideToString2(borderSide) {
+  function borderSideToString(borderSide) {
     if (borderSide == null)
       return null;
     const { width, color, style: style2 } = borderSide;
-    return `${width != null ? width : 0}px ${style2} ${color != null ? colorToString(color) : "black"}`;
+    return `${width != null ? width : 0}px ${style2} ${color != null ? responsiveStyle.colorToString(color) : "black"}`;
   }
   function borderRadiusToString(borderRadius) {
     if (borderRadius == null)
       return null;
-    return lengthPercentageDataToString(borderRadius);
+    return responsiveStyle.lengthPercentageDataToString(borderRadius);
   }
   function fontSizeToString(fontSize) {
     return `${fontSize.value}${fontSize.unit}`;
@@ -3301,7 +2182,7 @@ function useStyleControlCssObject(style, controlDefinition) {
 function useFormattedStyle(styleControlData, controlDefinition, control) {
   const style = useStyleControlCssObject(styleControlData, controlDefinition);
   const guid = React.useId().replaceAll(":", "");
-  const styleClassName = useStyle(style);
+  const styleClassName = responsiveStyle.useStyle(style);
   const classNames = `${styleClassName} ${guid}`;
   React.useEffect(() => {
     let currentBoxModel = null;
@@ -3310,7 +2191,7 @@ function useFormattedStyle(styleControlData, controlDefinition, control) {
         return;
       const element = document.querySelector(`.${guid}`);
       const measuredBoxModel = element == null ? null : boxModels.getBox(element);
-      if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+      if (!responsiveStyle.deepEqual(currentBoxModel, measuredBoxModel)) {
         currentBoxModel = measuredBoxModel;
         control.changeBoxModel(currentBoxModel);
       }
@@ -3337,7 +2218,7 @@ function useCheckboxControlValue(data, definition) {
 function useColorValue(data, definition) {
   var _a, _b;
   const swatchId = (_a = data == null ? void 0 : data.swatchId) != null ? _a : null;
-  const swatch = useSwatch(swatchId);
+  const swatch = responsiveStyle.useSwatch(swatchId);
   const alpha = (_b = data == null ? void 0 : data.alpha) != null ? _b : 1;
   if (swatch == null) {
     const { defaultValue } = definition.config;
@@ -3360,7 +2241,7 @@ function useImageControlValue(data, definition) {
   var _a;
   const format = (_a = definition.config.format) != null ? _a : descriptors.ImageControlValueFormat.URL;
   const fileId = data != null ? data : null;
-  const file = useFile(fileId);
+  const file = responsiveStyle.useFile(fileId);
   if (format === descriptors.ImageControlValueFormat.URL) {
     return file == null ? void 0 : file.publicUrl;
   }
@@ -3374,7 +2255,7 @@ function useImageControlValue(data, definition) {
 function useLinkControlValue(link, _definition) {
   var _a;
   const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
-  const page = usePagePathnameSlice(pageId != null ? pageId : null);
+  const page = responsiveStyle.usePagePathnameSlice(pageId != null ? pageId : null);
   const elementKey = (link == null ? void 0 : link.type) === "SCROLL_TO_ELEMENT" ? (_a = link.payload.elementIdConfig) == null ? void 0 : _a.elementKey : null;
   const elementId = useElementId(elementKey);
   let href = "#";
@@ -3500,7 +2381,7 @@ function pollBoxModel({
   let currentBoxModel = null;
   const handleAnimationFrameRequest = () => {
     const measuredBoxModel = boxModels.getBox(element);
-    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+    if (!responsiveStyle.deepEqual(currentBoxModel, measuredBoxModel)) {
       currentBoxModel = measuredBoxModel;
       onBoxModelChange(currentBoxModel);
     }
@@ -3530,13 +2411,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",
@@ -3544,7 +2425,7 @@ function Slot(_f) {
   ]);
   const As = as != null ? as : "div";
   const [element, setElement] = React.useState(null);
-  const baseClassName = useStyle({
+  const baseClassName = responsiveStyle.useStyle({
     display: "flex",
     flexWrap: "wrap",
     width: "100%"
@@ -3565,15 +2446,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",
@@ -3583,13 +2464,13 @@ function SlotItem(_h) {
   ]);
   const As = as != null ? as : "div";
   const [element, setElement] = React.useState(null);
-  const baseClassName = useStyle(__spreadValues({
+  const baseClassName = responsiveStyle.useStyle(__spreadValues({
     display: "flex"
-  }, responsiveStyle([grid], ([{
+  }, responsiveStyle.responsiveStyle([grid], ([{
     count = 12,
     spans = [[12]]
   } = {}]) => {
-    const [rowIndex, columnIndex] = getIndexes(spans, index);
+    const [rowIndex, columnIndex] = responsiveStyle.getIndexes(spans, index);
     const span = spans[rowIndex][columnIndex];
     const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`;
     return span === 0 ? {
@@ -3627,7 +2508,7 @@ function SlotPlaceholder({
   }, [element, control]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref: setElement,
-    className: useStyle({
+    className: responsiveStyle.useStyle({
       width: "100%",
       background: "rgba(161, 168, 194, 0.18)",
       height: "80px"
@@ -3636,7 +2517,7 @@ function SlotPlaceholder({
       xmlns: "http://www.w3.org/2000/svg",
       width: "100%",
       height: "100%",
-      className: useStyle({
+      className: responsiveStyle.useStyle({
         overflow: "visible",
         padding: 8
       }),
@@ -3759,24 +2640,24 @@ function ControlValue({
   }
 }
 function useWidthStyle(value, descriptor) {
-  return useStyle(responsiveWidth(value, descriptor.options.defaultValue));
+  return responsiveStyle.useStyle(responsiveStyle.responsiveWidth(value, descriptor.options.defaultValue));
 }
 function usePaddingStyle(value) {
-  return useStyle(responsivePadding(value));
+  return responsiveStyle.useStyle(responsiveStyle.responsivePadding(value));
 }
 function useMarginStyle(value) {
-  return useStyle(responsiveMargin(value));
+  return responsiveStyle.useStyle(responsiveStyle.responsiveMargin(value));
 }
 function useBorderRadiusStyle(value) {
-  return useStyle(responsiveBorderRadius(value));
+  return responsiveStyle.useStyle(responsiveStyle.responsiveBorderRadius(value));
 }
 function useShadowsStyle(value) {
   const shadowValue = useBoxShadow(value);
-  return useStyle(responsiveShadow(shadowValue != null ? shadowValue : void 0));
+  return responsiveStyle.useStyle(responsiveStyle.responsiveShadow(shadowValue != null ? shadowValue : void 0));
 }
 function useBorderStyle(value) {
   const borderData = useBorder(value);
-  return useStyle(responsiveBorder(borderData != null ? borderData : void 0));
+  return responsiveStyle.useStyle(responsiveStyle.responsiveBorder(borderData != null ? borderData : void 0));
 }
 function PropsValue({
   element,
@@ -3793,7 +2674,7 @@ function PropsValue({
     return constants.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 textInput.CheckboxControlType:
       case textInput.NumberControlType:
@@ -3835,7 +2716,7 @@ function PropsValue({
         }, descriptor.type);
       }
       case descriptors.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__ */ jsxRuntime.jsx(RenderHook, {
           hook: useSlot,
           parameters: [props[propName], control],
@@ -4038,8 +2919,8 @@ function createReactRuntime(store) {
         unregisterReactComponent();
       };
     },
-    copyElementTree(elementTree, replacementContext) {
-      return constants.copyElementTree(store.getState(), elementTree, replacementContext);
+    copyElementTree(elementTree2, replacementContext) {
+      return constants.copyElementTree(store.getState(), elementTree2, replacementContext);
     }
   };
 }
@@ -4052,10 +2933,10 @@ const PreviewProvider = dynamic__default["default"](() => Promise.resolve().then
 const LiveProvider = dynamic__default["default"](() => Promise.resolve().then(function() {
   return require("./LiveProvider.cjs.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__ */ jsxRuntime.jsx(PreviewProvider, __spreadValues({}, props)) : /* @__PURE__ */ jsxRuntime.jsx(LiveProvider, __spreadValues({}, props));
@@ -4152,7 +3033,7 @@ const DisableRegisterElement = React.createContext(false);
 const ElementReference = React.memo(React.forwardRef(function ElementReference2({
   elementReference
 }, ref) {
-  const globalElement = useGlobalElement(elementReference.value);
+  const globalElement = responsiveStyle.useGlobalElement(elementReference.value);
   const globalElementData = globalElement == null ? void 0 : globalElement.data;
   const elementReferenceDocument = useDocument(elementReference.key);
   const documentKey = elementReference.key;
@@ -4262,15 +3143,12 @@ exports.DEFAULT_ITEM_ANIMATE_DELAY = DEFAULT_ITEM_ANIMATE_DELAY;
 exports.DEFAULT_ITEM_ANIMATE_DURATION = DEFAULT_ITEM_ANIMATE_DURATION;
 exports.DEFAULT_ITEM_ANIMATE_TYPE = DEFAULT_ITEM_ANIMATE_TYPE;
 exports.DEFAULT_ITEM_STAGGER_DURATION = DEFAULT_ITEM_STAGGER_DURATION;
-exports.DEVICES = DEVICES;
 exports.Document = Document$1;
 exports.DocumentReference = DocumentReference;
 exports.Element = Element$1;
 exports.ElementImperativeHandle = ElementImperativeHandle;
 exports.Makeswift = Makeswift;
 exports.MakeswiftApiHandler = MakeswiftApiHandler;
-exports.MakeswiftClient = MakeswiftClient;
-exports.MakeswiftProvider = MakeswiftProvider;
 exports.Page = Page$1;
 exports.Page$1 = Page;
 exports.PageProvider = PageProvider;
@@ -4281,36 +3159,20 @@ exports.RuntimeProvider = RuntimeProvider;
 exports.Shapes = Shapes;
 exports.Sizes = Sizes;
 exports.StoreContext = StoreContext;
-exports.colorToString = colorToString;
-exports.deepEqual = deepEqual;
-exports.findDeviceOverride = findDeviceOverride;
 exports.forwardNextDynamicRef = forwardNextDynamicRef;
 exports.getServerSideProps = getServerSideProps;
 exports.getStaticPaths = getStaticPaths;
 exports.getStaticProps = getStaticProps;
 exports.pollBoxModel = pollBoxModel;
-exports.responsiveGridItem = responsiveGridItem;
-exports.responsiveStyle = responsiveStyle;
-exports.responsiveTextStyle = responsiveTextStyle;
-exports.responsiveWidth = responsiveWidth;
-exports.shallowMergeFallbacks = shallowMergeFallbacks;
 exports.storeContextDefaultValue = storeContextDefaultValue;
 exports.useBorder = useBorder;
 exports.useBoxShadow = useBoxShadow;
 exports.useBuilderEditMode = useBuilderEditMode;
 exports.useElementId = useElementId;
-exports.useFile = useFile;
-exports.useFiles = useFiles;
 exports.useFormContext = useFormContext;
 exports.useIsInBuilder = useIsInBuilder;
 exports.useIsPreview = useIsPreview;
-exports.useMakeswiftClient = useMakeswiftClient;
 exports.useMediaQuery = useMediaQuery;
 exports.usePageId = usePageId;
-exports.usePagePathnameSlice = usePagePathnameSlice;
 exports.useResponsiveColor = useResponsiveColor;
-exports.useStyle = useStyle;
-exports.useSwatches = useSwatches;
-exports.useTable = useTable;
-exports.useTypography = useTypography;
 //# sourceMappingURL=index.cjs.js.map