@makeswift/runtime 0.0.0-20230407200421 → 0.0.0-20230410231005

package/dist/index.cjs.js

@@ -35,36 +35,35 @@ 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 richText = require("./rich-text.cjs.js");
+var types$1 = require("./types.cjs.js");
 require("slate");
 var textInput = require("./text-input.cjs.js");
 var combobox = require("./combobox.cjs.js");
+var richText = require("./rich-text.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 ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
+var css = require("@emotion/css");
 var boxModels = require("./box-models.cjs.js");
 var reactDom = require("react-dom");
 var parse = require("html-react-parser");
 var Head = require("next/head");
+var types = require("./types.cjs2.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 +93,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 +145,6 @@ function BodySnippet({
   }, [code, cleanup]);
   return null;
 }
-async function introspect(element, client, store) {
-  const descriptors = 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 === richText.ShapeControlType) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          getResourcesFromElementDescriptors(descriptor.config.type, prop);
-        }
-        if (descriptor.type === richText.ListControlType) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          prop.forEach((item) => {
-            getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
-          });
-        }
-        if (descriptor.type === richText.Types.Shape) {
-          const prop = props[propName];
-          if (prop == null)
-            return;
-          getResourcesFromElementDescriptors(descriptor.options.type, prop);
-        }
-        if (descriptor.type === richText.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.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 +192,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 +334,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.0.0-20230407200421";
 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 +360,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 +377,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 = 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 === richText.ShapeControlType) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            getResourcesFromElementDescriptors(descriptor.config.type, prop);
+          }
+          if (descriptor.type === richText.ListControlType) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            prop.forEach((item) => {
+              getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
+            });
+          }
+          if (descriptor.type === types$1.Types.Shape) {
+            const prop = props[propName];
+            if (prop == null)
+              return;
+            getResourcesFromElementDescriptors(descriptor.options.type, prop);
+          }
+          if (descriptor.type === types$1.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.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 +540,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 +693,111 @@ 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.0.0-20230410231005";
+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
+  });
+}
+const previewModeProxy = httpProxy.createProxyServer();
+async function proxyPreviewMode(req, res, { apiKey }) {
+  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 (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();
+  }));
+}
 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 +812,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 +920,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 +964,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 +977,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 +988,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");
@@ -1809,13 +998,13 @@ function registerComponent$c(runtime) {
     type: constants.MakeswiftComponentType.Box,
     label: "Box",
     props: {
-      id: richText.ElementID(),
-      backgrounds: richText.Backgrounds(),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      id: types$1.ElementID(),
+      backgrounds: types$1.Backgrounds(),
+      width: types$1.Width({
+        format: types$1.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      height: richText.ResponsiveIconRadioGroup({
+      height: types$1.ResponsiveIconRadioGroup({
         label: "Height",
         options: [
           { value: "auto", label: "Auto", icon: "HeightAuto16" },
@@ -1823,7 +1012,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "auto"
       }),
-      verticalAlign: richText.ResponsiveIconRadioGroup({
+      verticalAlign: types$1.ResponsiveIconRadioGroup({
         label: "Align items",
         options: [
           { value: "flex-start", label: "Top", icon: "VerticalAlignStart16" },
@@ -1837,9 +1026,9 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "flex-start"
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName }),
-      padding: richText.Padding({
-        format: richText.Padding.Format.ClassName,
+      margin: types$1.Margin({ format: types$1.Margin.Format.ClassName }),
+      padding: types$1.Padding({
+        format: types$1.Padding.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -1852,16 +1041,16 @@ function registerComponent$c(runtime) {
           }
         ]
       }),
-      border: richText.Border({ format: richText.Border.Format.ClassName }),
-      borderRadius: richText.BorderRadius({ format: richText.BorderRadius.Format.ClassName }),
-      boxShadow: richText.Shadows({ format: richText.Shadows.Format.ClassName }),
-      rowGap: richText.GapY((props) => ({
+      border: types$1.Border({ format: types$1.Border.Format.ClassName }),
+      borderRadius: types$1.BorderRadius({ format: types$1.BorderRadius.Format.ClassName }),
+      boxShadow: types$1.Shadows({ format: types$1.Shadows.Format.ClassName }),
+      rowGap: types$1.GapY((props) => ({
         hidden: props.children == null
       })),
-      columnGap: richText.GapX((props) => ({
+      columnGap: types$1.GapX((props) => ({
         hidden: props.children == null
       })),
-      boxAnimateType: richText.ResponsiveSelect({
+      boxAnimateType: types$1.ResponsiveSelect({
         label: "Animate box in",
         labelOrientation: "vertical",
         options: [
@@ -1877,7 +1066,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "none"
       }),
-      boxAnimateDuration: richText.ResponsiveNumber((props, device) => ({
+      boxAnimateDuration: types$1.ResponsiveNumber((props, device) => ({
         label: "Box duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
@@ -1885,7 +1074,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnBoxAnimation(props, device)
       })),
-      boxAnimateDelay: richText.ResponsiveNumber((props, device) => ({
+      boxAnimateDelay: types$1.ResponsiveNumber((props, device) => ({
         label: "Box delay",
         defaultValue: DEFAULT_BOX_ANIMATE_DELAY,
         min: 0,
@@ -1893,7 +1082,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnBoxAnimation(props, device)
       })),
-      itemAnimateType: richText.ResponsiveSelect({
+      itemAnimateType: types$1.ResponsiveSelect({
         label: "Animate items in",
         labelOrientation: "vertical",
         options: [
@@ -1909,7 +1098,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "none"
       }),
-      itemAnimateDuration: richText.ResponsiveNumber((props, device) => ({
+      itemAnimateDuration: types$1.ResponsiveNumber((props, device) => ({
         label: "Items duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
@@ -1917,7 +1106,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      itemAnimateDelay: richText.ResponsiveNumber((props, device) => ({
+      itemAnimateDelay: types$1.ResponsiveNumber((props, device) => ({
         label: "Items delay",
         defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,
         min: 0,
@@ -1925,7 +1114,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      itemStaggerDuration: richText.ResponsiveNumber((props, device) => ({
+      itemStaggerDuration: types$1.ResponsiveNumber((props, device) => ({
         label: "Stagger",
         min: 0,
         step: 0.05,
@@ -1933,11 +1122,11 @@ function registerComponent$c(runtime) {
         defaultValue: DEFAULT_ITEM_STAGGER_DURATION,
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      hidePlaceholder: richText.Checkbox((props) => ({
+      hidePlaceholder: types$1.Checkbox((props) => ({
         label: "Hide placeholder",
         hidden: props.children != null
       })),
-      children: richText.Grid()
+      children: types$1.Grid()
     }
   });
 }
@@ -1948,9 +1137,9 @@ function registerComponent$b(runtime) {
     type: constants.MakeswiftComponentType.Button,
     label: "Button",
     props: {
-      id: richText.ElementID(),
-      children: richText.TextInput({ placeholder: "Button text" }),
-      link: richText.Link({
+      id: types$1.ElementID(),
+      children: types$1.TextInput({ placeholder: "Button text" }),
+      link: types$1.Link({
         defaultValue: {
           type: "OPEN_PAGE",
           payload: {
@@ -1959,7 +1148,7 @@ function registerComponent$b(runtime) {
           }
         }
       }),
-      variant: richText.ResponsiveSelect({
+      variant: types$1.ResponsiveSelect({
         label: "Style",
         labelOrientation: "horizontal",
         options: [
@@ -1973,7 +1162,7 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "flat"
       }),
-      shape: richText.ResponsiveIconRadioGroup({
+      shape: types$1.ResponsiveIconRadioGroup({
         label: "Shape",
         options: [
           { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -1982,7 +1171,7 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "rounded"
       }),
-      size: richText.ResponsiveIconRadioGroup({
+      size: types$1.ResponsiveIconRadioGroup({
         label: "Size",
         options: [
           { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -1991,19 +1180,19 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "medium"
       }),
-      color: richText.ResponsiveColor((props, device) => {
+      color: types$1.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: richText.ResponsiveColor({
+      textColor: types$1.ResponsiveColor({
         label: "Text color",
         placeholder: "white"
       }),
-      textStyle: richText.TextStyle(),
-      width: richText.Width(),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName })
+      textStyle: types$1.TextStyle(),
+      width: types$1.Width(),
+      margin: types$1.Margin({ format: types$1.Margin.Format.ClassName })
     }
   });
 }
@@ -2015,20 +1204,20 @@ function registerComponent$a(runtime) {
     label: "Carousel",
     icon: "Carousel40",
     props: {
-      id: richText.ElementID(),
-      images: richText.Images({
+      id: types$1.ElementID(),
+      images: types$1.Images({
         preset: [
           { key: uuid.v4(), props: {} },
           { key: uuid.v4(), props: {} },
           { key: uuid.v4(), props: {} }
         ]
       }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      width: types$1.Width({
+        format: types$1.Width.Format.ClassName,
         defaultValue: { value: 400, unit: "px" }
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName }),
-      pageSize: richText.ResponsiveNumber((props) => {
+      margin: types$1.Margin({ format: types$1.Margin.Format.ClassName }),
+      pageSize: types$1.ResponsiveNumber((props) => {
         var _a;
         const images = props.images;
         const imagesLength = (_a = images == null ? void 0 : images.length) != null ? _a : 0;
@@ -2040,10 +1229,10 @@ function registerComponent$a(runtime) {
           step: 1
         };
       }),
-      step: richText.ResponsiveNumber((props, device) => {
+      step: types$1.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,
@@ -2052,7 +1241,7 @@ function registerComponent$a(runtime) {
           step: 1
         };
       }),
-      slideAlignment: richText.ResponsiveIconRadioGroup({
+      slideAlignment: types$1.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "Top", value: "flex-start", icon: "VerticalAlignStart16" },
@@ -2061,13 +1250,13 @@ function registerComponent$a(runtime) {
         ],
         defaultValue: "center"
       }),
-      gap: richText.GapX({
+      gap: types$1.GapX({
         label: "Gap",
         step: 5,
         defaultValue: { value: 0, unit: "px" }
       }),
-      autoplay: richText.Checkbox({ label: "Autoplay" }),
-      delay: richText.Number((props) => ({
+      autoplay: types$1.Checkbox({ label: "Autoplay" }),
+      delay: types$1.Number((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
@@ -2075,8 +1264,8 @@ function registerComponent$a(runtime) {
         suffix: "seconds",
         hidden: !props.autoplay
       })),
-      showArrows: richText.Checkbox({ preset: true, label: "Show arrows" }),
-      arrowPosition: richText.ResponsiveIconRadioGroup((props) => ({
+      showArrows: types$1.Checkbox({ preset: true, label: "Show arrows" }),
+      arrowPosition: types$1.ResponsiveIconRadioGroup((props) => ({
         label: "Arrow position",
         options: [
           { label: "Inside", value: "inside", icon: "ArrowInside16" },
@@ -2086,24 +1275,24 @@ function registerComponent$a(runtime) {
         defaultValue: "inside",
         hidden: props.showArrows === false
       })),
-      arrowColor: richText.ResponsiveColor((props) => ({
+      arrowColor: types$1.ResponsiveColor((props) => ({
         label: "Arrow color",
         placeholder: "black",
         hidden: props.showArrows === false
       })),
-      arrowBackground: richText.ResponsiveColor((props) => ({
+      arrowBackground: types$1.ResponsiveColor((props) => ({
         label: "Arrow background",
         placeholder: "white",
         hidden: props.showArrows === false
       })),
-      showDots: richText.Checkbox({ preset: true, label: "Show dots" }),
-      dotColor: richText.ResponsiveColor((props) => ({
+      showDots: types$1.Checkbox({ preset: true, label: "Show dots" }),
+      dotColor: types$1.ResponsiveColor((props) => ({
         label: "Dot color",
         placeholder: "black",
         hidden: props.showDots === false
       })),
-      slideBorder: richText.Border({ format: richText.Border.Format.ClassName }),
-      slideBorderRadius: richText.BorderRadius({ format: richText.BorderRadius.Format.ClassName })
+      slideBorder: types$1.Border({ format: types$1.Border.Format.ClassName }),
+      slideBorderRadius: types$1.BorderRadius({ format: types$1.BorderRadius.Format.ClassName })
     }
   });
 }
@@ -2115,11 +1304,11 @@ function registerComponent$9(runtime) {
     label: "Countdown",
     icon: "Countdown40",
     props: {
-      id: richText.ElementID(),
-      date: richText.Date(() => ({
+      id: types$1.ElementID(),
+      date: types$1.Date(() => ({
         preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
       })),
-      variant: richText.ResponsiveIconRadioGroup({
+      variant: types$1.ResponsiveIconRadioGroup({
         label: "Style",
         options: [
           { label: "Filled", value: "filled", icon: "CountdownSolid16" },
@@ -2138,7 +1327,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "filled"
       }),
-      shape: richText.ResponsiveIconRadioGroup({
+      shape: types$1.ResponsiveIconRadioGroup({
         label: "Shape",
         options: [
           { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -2147,7 +1336,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "rounded"
       }),
-      size: richText.ResponsiveIconRadioGroup({
+      size: types$1.ResponsiveIconRadioGroup({
         label: "Size",
         options: [
           { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -2156,7 +1345,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "medium"
       }),
-      gap: richText.GapX({
+      gap: types$1.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Gap",
         step: 1,
@@ -2164,32 +1353,32 @@ function registerComponent$9(runtime) {
         max: 100,
         defaultValue: { value: 0, unit: "px" }
       }),
-      numberFont: richText.Font({ label: "Number font" }),
-      numberColor: richText.ResponsiveColor({
+      numberFont: types$1.Font({ label: "Number font" }),
+      numberColor: types$1.ResponsiveColor({
         label: "Number color",
         placeholder: "white"
       }),
-      blockColor: richText.ResponsiveColor({
+      blockColor: types$1.ResponsiveColor({
         label: "Block color",
         placeholder: "black"
       }),
-      labelFont: richText.Font({ label: "Label font" }),
-      labelColor: richText.ResponsiveColor({
+      labelFont: types$1.Font({ label: "Label font" }),
+      labelColor: types$1.ResponsiveColor({
         label: "Label color",
         placeholder: "black"
       }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      width: types$1.Width({
+        format: types$1.Width.Format.ClassName,
         defaultValue: { value: 560, unit: "px" }
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName }),
-      daysLabel: richText.TextInput({ label: "Days label", placeholder: "Days" }),
-      hoursLabel: richText.TextInput({ label: "Hours label", placeholder: "Hours" }),
-      minutesLabel: richText.TextInput({
+      margin: types$1.Margin({ format: types$1.Margin.Format.ClassName }),
+      daysLabel: types$1.TextInput({ label: "Days label", placeholder: "Days" }),
+      hoursLabel: types$1.TextInput({ label: "Hours label", placeholder: "Hours" }),
+      minutesLabel: types$1.TextInput({
         label: "Minutes label",
         placeholder: "Minutes"
       }),
-      secondsLabel: richText.TextInput({
+      secondsLabel: types$1.TextInput({
         label: "Seconds label",
         placeholder: "Seconds"
       })
@@ -2204,8 +1393,8 @@ function registerComponent$8(runtime) {
     label: "Divider",
     icon: "Divider40",
     props: {
-      id: richText.ElementID(),
-      variant: richText.ResponsiveSelect({
+      id: types$1.ElementID(),
+      variant: types$1.ResponsiveSelect({
         label: "Style",
         labelOrientation: "horizontal",
         options: [
@@ -2216,17 +1405,17 @@ function registerComponent$8(runtime) {
         ],
         defaultValue: "solid"
       }),
-      thickness: richText.ResponsiveLength({
+      thickness: types$1.ResponsiveLength({
         label: "Height",
         defaultValue: { value: 1, unit: "px" },
         options: [{ value: "px", label: "Pixels", icon: "Px16" }]
       }),
-      color: richText.ResponsiveColor({ placeholder: "black" }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      color: types$1.ResponsiveColor({ placeholder: "black" }),
+      width: types$1.Width({
+        format: types$1.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName })
+      margin: types$1.Margin({ format: types$1.Margin.Format.ClassName })
     }
   });
 }
@@ -2238,10 +1427,10 @@ function registerComponent$7(runtime) {
     label: "Embed",
     icon: "Code40",
     props: {
-      id: richText.ElementID(),
-      html: richText.TextArea({ label: "Code", rows: 20 }),
-      width: richText.Width({ format: richText.Width.Format.ClassName }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName })
+      id: types$1.ElementID(),
+      html: types$1.TextArea({ label: "Code", rows: 20 }),
+      width: types$1.Width({ format: types$1.Width.Format.ClassName }),
+      margin: types$1.Margin({ format: types$1.Margin.Format.ClassName })
     }
   });
 }
@@ -2277,10 +1466,10 @@ function registerComponent$6(runtime) {
     label: "Form",
     icon: "Form40",
     props: {
-      id: richText.ElementID(),
-      tableId: richText.Table(),
-      fields: richText.TableFormFields(),
-      submitLink: richText.Link((props) => ({
+      id: types$1.ElementID(),
+      tableId: types$1.Table(),
+      fields: types$1.TableFormFields(),
+      submitLink: types$1.Link((props) => ({
         label: "Redirect to",
         options: [
           { value: "OPEN_PAGE", label: "Open page" },
@@ -2288,13 +1477,13 @@ function registerComponent$6(runtime) {
         ],
         hidden: props.tableId == null
       })),
-      gap: richText.GapY((props) => ({
+      gap: types$1.GapY((props) => ({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Gap",
         defaultValue: { value: 0, unit: "px" },
         hidden: props.tableId == null
       })),
-      shape: richText.ResponsiveIconRadioGroup((props) => ({
+      shape: types$1.ResponsiveIconRadioGroup((props) => ({
         label: "Shape",
         options: [
           { label: "Pill", value: Shapes.PILL, icon: "ButtonPill16" },
@@ -2304,7 +1493,7 @@ function registerComponent$6(runtime) {
         defaultValue: Shapes.ROUNDED,
         hidden: props.tableId == null
       })),
-      size: richText.ResponsiveIconRadioGroup((props) => ({
+      size: types$1.ResponsiveIconRadioGroup((props) => ({
         label: "Size",
         options: [
           { label: "Small", value: Sizes.SMALL, icon: "SizeSmall16" },
@@ -2314,7 +1503,7 @@ function registerComponent$6(runtime) {
         defaultValue: Sizes.MEDIUM,
         hidden: (props == null ? void 0 : props.tableId) == null
       })),
-      contrast: richText.ResponsiveIconRadioGroup((props) => ({
+      contrast: types$1.ResponsiveIconRadioGroup((props) => ({
         label: "Color",
         options: [
           { label: "Light mode", value: Contrasts.LIGHT, icon: "Sun16" },
@@ -2323,34 +1512,34 @@ function registerComponent$6(runtime) {
         defaultValue: Contrasts.LIGHT,
         hidden: props.tableId == null
       })),
-      labelTextStyle: richText.TextStyle({ label: "Label text style" }),
-      labelTextColor: richText.ResponsiveColor((props, device) => {
+      labelTextStyle: types$1.TextStyle({ label: "Label text style" }),
+      labelTextColor: types$1.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",
           placeholder: (contrast == null ? void 0 : contrast.value) === Contrasts.DARK ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.8)"
         };
       }),
-      submitTextStyle: richText.TextStyle({ label: "Button text style" }),
-      brandColor: richText.ResponsiveColor((props) => ({
+      submitTextStyle: types$1.TextStyle({ label: "Button text style" }),
+      brandColor: types$1.ResponsiveColor((props) => ({
         label: "Button color",
         placeholder: "black",
         hidden: props.tableId == null
       })),
-      submitTextColor: richText.ResponsiveColor((props) => ({
+      submitTextColor: types$1.ResponsiveColor((props) => ({
         label: "Button text color",
         placeholder: "white",
         hidden: props.tableId == null
       })),
-      submitLabel: richText.TextInput((props) => ({
+      submitLabel: types$1.TextInput((props) => ({
         label: "Button label",
         placeholder: "Submit",
         hidden: props.tableId == null
       })),
-      submitVariant: richText.ResponsiveSelect((props) => ({
+      submitVariant: types$1.ResponsiveSelect((props) => ({
         label: "Button style",
         options: [
           { value: "flat", label: "Flat" },
@@ -2364,11 +1553,11 @@ function registerComponent$6(runtime) {
         defaultValue: "flat",
         hidden: props.tableId == null
       })),
-      submitWidth: richText.ResponsiveLength((props) => ({
+      submitWidth: types$1.ResponsiveLength((props) => ({
         label: "Button width",
         hidden: props.tableId == null
       })),
-      submitAlignment: richText.ResponsiveIconRadioGroup((props) => ({
+      submitAlignment: types$1.ResponsiveIconRadioGroup((props) => ({
         label: "Button alignment",
         options: [
           { label: "Left", value: Alignments.LEFT, icon: "AlignLeft16" },
@@ -2378,12 +1567,12 @@ function registerComponent$6(runtime) {
         defaultValue: Alignments.CENTER,
         hidden: props.tableId == null
       })),
-      width: richText.Width({
+      width: types$1.Width({
         preset: [{ deviceId: "desktop", value: { value: 550, unit: "px" } }],
         defaultValue: { value: 100, unit: "%" },
-        format: richText.Width.Format.ClassName
+        format: types$1.Width.Format.ClassName
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName })
+      margin: types$1.Margin({ format: types$1.Margin.Format.ClassName })
     }
   });
 }
@@ -2394,17 +1583,17 @@ function registerComponent$5(runtime) {
     type: constants.MakeswiftComponentType.Image,
     label: "Image",
     props: {
-      id: richText.ElementID(),
-      file: richText.Image(),
-      altText: richText.TextInput({ label: "Alt text" }),
-      link: richText.Link({ label: "On click" }),
-      width: richText.Width(),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName }),
-      padding: richText.Padding({ format: richText.Padding.Format.ClassName }),
-      border: richText.Border({ format: richText.Border.Format.ClassName }),
-      borderRadius: richText.BorderRadius({ format: richText.BorderRadius.Format.ClassName }),
-      boxShadow: richText.Shadows({ format: richText.Shadows.Format.ClassName }),
-      opacity: richText.ResponsiveOpacity()
+      id: types$1.ElementID(),
+      file: types$1.Image(),
+      altText: types$1.TextInput({ label: "Alt text" }),
+      link: types$1.Link({ label: "On click" }),
+      width: types$1.Width(),
+      margin: types$1.Margin({ format: types$1.Margin.Format.ClassName }),
+      padding: types$1.Padding({ format: types$1.Padding.Format.ClassName }),
+      border: types$1.Border({ format: types$1.Border.Format.ClassName }),
+      borderRadius: types$1.BorderRadius({ format: types$1.BorderRadius.Format.ClassName }),
+      boxShadow: types$1.Shadows({ format: types$1.Shadows.Format.ClassName }),
+      opacity: types$1.ResponsiveOpacity()
     }
   });
 }
@@ -2416,21 +1605,21 @@ function registerComponent$4(runtime) {
     label: "Navigation",
     icon: "Navigation40",
     props: {
-      id: richText.ElementID(),
-      links: richText.NavigationLinks(),
-      linkTextStyle: richText.TextStyle((props) => {
+      id: types$1.ElementID(),
+      links: types$1.NavigationLinks(),
+      linkTextStyle: types$1.TextStyle((props) => {
         const links = props.links;
         return {
           label: "Link text style",
           hidden: links == null || links.length === 0
         };
       }),
-      showLogo: richText.Checkbox({ preset: true, label: "Show logo" }),
-      logoFile: richText.Image((props) => ({
+      showLogo: types$1.Checkbox({ preset: true, label: "Show logo" }),
+      logoFile: types$1.Image((props) => ({
         label: "Logo",
         hidden: props.showLogo === false
       })),
-      logoWidth: richText.ResponsiveLength((props) => ({
+      logoWidth: types$1.ResponsiveLength((props) => ({
         preset: [{ deviceId: "desktop", value: { value: 100, unit: "px" } }],
         label: "Logo width",
         min: 0,
@@ -2438,15 +1627,15 @@ function registerComponent$4(runtime) {
         options: [{ value: "px", label: "Pixels", icon: "Px16" }],
         hidden: props.showLogo === false
       })),
-      logoAltText: richText.TextInput((props) => ({
+      logoAltText: types$1.TextInput((props) => ({
         label: "Logo alt text",
         hidden: props.showLogo === false
       })),
-      logoLink: richText.Link((props) => ({
+      logoLink: types$1.Link((props) => ({
         label: "Logo on click",
         hidden: props.showLogo === false
       })),
-      alignment: richText.ResponsiveIconRadioGroup({
+      alignment: types$1.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "Left", value: "flex-start", icon: "AlignLeft16" },
@@ -2455,7 +1644,7 @@ function registerComponent$4(runtime) {
         ],
         defaultValue: "flex-end"
       }),
-      gutter: richText.GapX({
+      gutter: types$1.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Link gap",
         min: 0,
@@ -2463,45 +1652,45 @@ function registerComponent$4(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      mobileMenuAnimation: richText.ResponsiveSelect({
+      mobileMenuAnimation: types$1.ResponsiveSelect({
         label: "Mobile menu",
         options: [
           { value: "coverRight", label: "Cover from right" },
           { value: "coverLeft", label: "Cover from left" }
         ]
       }),
-      mobileMenuOpenIconColor: richText.ResponsiveColor((props, device) => {
+      mobileMenuOpenIconColor: types$1.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)",
           hidden
         };
       }),
-      mobileMenuCloseIconColor: richText.ResponsiveColor((props, device) => {
+      mobileMenuCloseIconColor: types$1.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)",
           hidden
         };
       }),
-      mobileMenuBackgroundColor: richText.ResponsiveColor((props, device) => {
+      mobileMenuBackgroundColor: types$1.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",
           hidden
         };
       }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      width: types$1.Width({
+        format: types$1.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName })
+      margin: types$1.Margin({ format: types$1.Margin.Format.ClassName })
     }
   });
 }
@@ -2513,10 +1702,10 @@ function registerComponent$3(runtime) {
     label: "Page",
     hidden: true,
     props: {
-      children: richText.Grid(),
-      backgrounds: richText.Backgrounds(),
-      rowGap: richText.GapY(),
-      columnGap: richText.GapX()
+      children: types$1.Grid(),
+      backgrounds: types$1.Backgrounds(),
+      rowGap: types$1.GapY(),
+      columnGap: types$1.GapX()
     }
   });
 }
@@ -2528,8 +1717,8 @@ function registerComponent$2(runtime) {
     label: "Social Links",
     icon: "SocialLinks40",
     props: {
-      id: richText.ElementID(),
-      links: richText.SocialLinks({
+      id: types$1.ElementID(),
+      links: types$1.SocialLinks({
         preset: {
           links: [
             {
@@ -2548,7 +1737,7 @@ function registerComponent$2(runtime) {
           openInNewTab: false
         }
       }),
-      shape: richText.ResponsiveIconRadioGroup((props) => {
+      shape: types$1.ResponsiveIconRadioGroup((props) => {
         const links = props.links;
         return {
           label: "Shape",
@@ -2562,7 +1751,7 @@ function registerComponent$2(runtime) {
           hidden: links == null || links.links.length === 0
         };
       }),
-      size: richText.ResponsiveIconRadioGroup((props) => {
+      size: types$1.ResponsiveIconRadioGroup((props) => {
         const links = props.links;
         return {
           label: "Size",
@@ -2575,7 +1764,7 @@ function registerComponent$2(runtime) {
           hidden: links == null || links.links.length === 0
         };
       }),
-      hoverStyle: richText.ResponsiveSelect((props) => {
+      hoverStyle: types$1.ResponsiveSelect((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2591,7 +1780,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      fill: richText.ResponsiveColor((props) => {
+      fill: types$1.ResponsiveColor((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2599,7 +1788,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      backgroundColor: richText.ResponsiveColor((props) => {
+      backgroundColor: types$1.ResponsiveColor((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2607,7 +1796,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      alignment: richText.ResponsiveIconRadioGroup({
+      alignment: types$1.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "flex-start", value: "flex-start", icon: "AlignLeft16" },
@@ -2616,7 +1805,7 @@ function registerComponent$2(runtime) {
         ],
         defaultValue: "center"
       }),
-      gutter: richText.GapX({
+      gutter: types$1.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Link gap",
         min: 0,
@@ -2624,12 +1813,12 @@ function registerComponent$2(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      width: types$1.Width({
+        format: types$1.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: richText.Margin({
-        format: richText.Margin.Format.ClassName,
+      margin: types$1.Margin({
+        format: types$1.Margin.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -2652,8 +1841,8 @@ function registerComponent$1(runtime) {
     type: constants.MakeswiftComponentType.Text,
     label: "Text",
     props: {
-      id: richText.ElementID(),
-      text: richText.RichText(() => ({
+      id: types$1.ElementID(),
+      text: types$1.RichText(() => ({
         preset: {
           document: {
             object: "document",
@@ -2697,13 +1886,13 @@ function registerComponent$1(runtime) {
           }
         }
       })),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      width: types$1.Width({
+        format: types$1.Width.Format.ClassName,
         preset: [{ deviceId: "desktop", value: { value: 700, unit: "px" } }],
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: richText.Margin({
-        format: richText.Margin.Format.ClassName,
+      margin: types$1.Margin({
+        format: types$1.Margin.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -2727,14 +1916,14 @@ function registerComponent(runtime) {
     label: "Video",
     icon: "Video40",
     props: {
-      id: richText.ElementID(),
-      video: richText.Video({ preset: { controls: true } }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      id: types$1.ElementID(),
+      video: types$1.Video({ preset: { controls: true } }),
+      width: types$1.Width({
+        format: types$1.Width.Format.ClassName,
         defaultValue: { value: 560, unit: "px" }
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName }),
-      borderRadius: richText.BorderRadius({ format: richText.BorderRadius.Format.ClassName })
+      margin: types$1.Margin({ format: types$1.Margin.Format.ClassName }),
+      borderRadius: types$1.BorderRadius({ format: types$1.BorderRadius.Format.ClassName })
     }
   });
 }
@@ -2768,19 +1957,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 +1989,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 +2008,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 +2044,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 +2059,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 +2075,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 +2083,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 +2100,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 +2110,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",
@@ -3250,9 +2128,9 @@ const defaultPadding = {
 };
 function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
-  return __spreadValues(__spreadValues({}, properties.includes(richText.StyleControlProperty.Width) && {
+  return __spreadValues(__spreadValues({}, properties.includes(types$1.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,20 +2138,20 @@ 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;
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(richText.StyleControlProperty.Width) && {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(types$1.StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
-    }), properties.includes(richText.StyleControlProperty.Margin) && marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(richText.StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(richText.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(richText.StyleControlProperty.BorderRadius) && {
+    }), properties.includes(types$1.StyleControlProperty.Margin) && responsiveStyle.marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(types$1.StyleControlProperty.Padding) && responsiveStyle.paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(types$1.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(types$1.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,
       borderBottomRightRadius: (_h = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomRightRadius)) != null ? _h : 0,
       borderBottomLeftRadius: (_i = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomLeftRadius)) != null ? _i : 0
-    }), properties.includes(richText.StyleControlProperty.TextStyle) && __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (textStyle == null ? void 0 : textStyle.fontFamily) && { fontFamily: `"${textStyle.fontFamily}"` }), (textStyle == null ? void 0 : textStyle.letterSpacing) && { letterSpacing: textStyle.letterSpacing }), (textStyle == null ? void 0 : textStyle.fontSize) && { fontSize: fontSizeToString(textStyle.fontSize) }), (textStyle == null ? void 0 : textStyle.fontWeight) && { fontWeight: textStyle.fontWeight }), {
+    }), properties.includes(types$1.StyleControlProperty.TextStyle) && __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (textStyle == null ? void 0 : textStyle.fontFamily) && { fontFamily: `"${textStyle.fontFamily}"` }), (textStyle == null ? void 0 : textStyle.letterSpacing) && { letterSpacing: textStyle.letterSpacing }), (textStyle == null ? void 0 : textStyle.fontSize) && { fontSize: fontSizeToString(textStyle.fontSize) }), (textStyle == null ? void 0 : textStyle.fontWeight) && { fontWeight: textStyle.fontWeight }), {
       textTransform: (_j = textStyle == null ? void 0 : textStyle.textTransform) != null ? _j : [],
       fontStyle: (_k = textStyle == null ? void 0 : textStyle.fontStyle) != null ? _k : []
     }));
@@ -3281,18 +2159,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}`;
@@ -3300,7 +2178,7 @@ function useStyleControlCssObject(style, controlDefinition) {
 }
 function useFormattedStyle(styleControlData, controlDefinition) {
   const style = useStyleControlCssObject(styleControlData, controlDefinition);
-  return useStyle(style);
+  return responsiveStyle.useStyle(style);
 }
 function RenderHook({
   hook: useHook,
@@ -3315,7 +2193,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;
@@ -3336,10 +2214,10 @@ function useComboboxControlValue(data) {
 }
 function useImageControlValue(data, definition) {
   var _a;
-  const format = (_a = definition.config.format) != null ? _a : richText.ImageControlValueFormat.URL;
+  const format = (_a = definition.config.format) != null ? _a : types$1.ImageControlValueFormat.URL;
   const fileId = data != null ? data : null;
-  const file = useFile(fileId);
-  if (format === richText.ImageControlValueFormat.URL) {
+  const file = responsiveStyle.useFile(fileId);
+  if (format === types$1.ImageControlValueFormat.URL) {
     return file == null ? void 0 : file.publicUrl;
   }
   if (file == null || file.dimensions == null)
@@ -3352,7 +2230,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 = "#";
@@ -3478,7 +2356,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);
     }
@@ -3508,13 +2386,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",
@@ -3522,7 +2400,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%"
@@ -3543,15 +2421,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",
@@ -3561,13 +2439,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 ? {
@@ -3605,7 +2483,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"
@@ -3614,7 +2492,7 @@ function SlotPlaceholder({
       xmlns: "http://www.w3.org/2000/svg",
       width: "100%",
       height: "100%",
-      className: useStyle({
+      className: responsiveStyle.useStyle({
         overflow: "visible",
         padding: 8
       }),
@@ -3676,19 +2554,19 @@ function ControlValue({
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case richText.ColorControlType:
+    case types$1.ColorControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useColorValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case richText.ImageControlType:
+    case types$1.ImageControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useImageControlValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case richText.LinkControlType:
+    case types$1.LinkControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useLinkControlValue,
         parameters: [data, definition],
@@ -3731,24 +2609,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,
@@ -3772,12 +2650,12 @@ function PropsValue({
       case textInput.TextInputControlType:
       case textInput.TextAreaControlType:
       case textInput.SelectControlType:
-      case richText.ColorControlType:
-      case richText.ImageControlType:
+      case types$1.ColorControlType:
+      case types$1.ImageControlType:
       case combobox.ComboboxControlType:
       case richText.ShapeControlType:
       case richText.ListControlType:
-      case richText.LinkControlType:
+      case types$1.LinkControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
@@ -3786,7 +2664,7 @@ function PropsValue({
             [propName]: value
           }))
         });
-      case richText.StyleControlType:
+      case types$1.StyleControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useFormattedStyle,
           parameters: [props[propName], descriptor],
@@ -3813,9 +2691,9 @@ function PropsValue({
           }))
         }, descriptor.type);
       }
-      case richText.Types.Width:
+      case types$1.Types.Width:
         switch (descriptor.options.format) {
-          case richText.WidthPropControllerFormat.ClassName:
+          case types$1.WidthPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useWidthStyle,
               parameters: [props[propName], descriptor],
@@ -3828,9 +2706,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.Padding:
+      case types$1.Types.Padding:
         switch (descriptor.options.format) {
-          case richText.PaddingPropControllerFormat.ClassName:
+          case types$1.PaddingPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: usePaddingStyle,
               parameters: [props[propName]],
@@ -3843,9 +2721,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.Margin:
+      case types$1.Types.Margin:
         switch (descriptor.options.format) {
-          case richText.MarginPropControllerFormat.ClassName:
+          case types$1.MarginPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useMarginStyle,
               parameters: [props[propName]],
@@ -3858,9 +2736,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.BorderRadius:
+      case types$1.Types.BorderRadius:
         switch (descriptor.options.format) {
-          case richText.BorderRadiusPropControllerFormat.ClassName:
+          case types$1.BorderRadiusPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useBorderRadiusStyle,
               parameters: [props[propName]],
@@ -3873,9 +2751,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.Shadows:
+      case types$1.Types.Shadows:
         switch (descriptor.options.format) {
-          case richText.ShadowsPropControllerFormat.ClassName:
+          case types$1.ShadowsPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useShadowsStyle,
               parameters: [props[propName]],
@@ -3888,9 +2766,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.Border:
+      case types$1.Types.Border:
         switch (descriptor.options.format) {
-          case richText.BorderPropControllerFormat.ClassName:
+          case types$1.BorderPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useBorderStyle,
               parameters: [props[propName]],
@@ -3903,7 +2781,7 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.ResponsiveColor:
+      case types$1.Types.ResponsiveColor:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useResponsiveColor,
           parameters: [props[propName]],
@@ -4007,8 +2885,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);
     }
   };
 }
@@ -4021,10 +2899,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));
@@ -4121,7 +2999,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;
@@ -4231,15 +3109,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;
@@ -4250,36 +3125,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