@makeswift/runtime 0.3.1 → 0.4.0

package/dist/index.cjs.js

@@ -41,16 +41,17 @@ var withSelector = require("use-sync-external-store/shim/with-selector");
 var reactPage = require("./react-page.cjs.js");
 var actions = require("./actions.cjs.js");
 var dynamic = require("next/dynamic");
-var client = require("@apollo/client");
-var batchHttp = require("@apollo/client/link/batch-http");
 var slate = require("slate");
-var graphql = require("./graphql.cjs.js");
 var slot = require("./slot.cjs.js");
 var control = require("./control.cjs.js");
+var redux = require("redux");
+var thunk = require("redux-thunk");
+var types = require("./types.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 var css = require("@emotion/css");
 var textInput = require("./text-input.cjs.js");
 var combobox = require("./combobox.cjs.js");
+var shim = require("use-sync-external-store/shim");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
 var boxModels = require("./box-models.cjs.js");
@@ -90,6 +91,7 @@ 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);
@@ -143,182 +145,7 @@ function BodySnippet({
   }, [code, cleanup]);
   return null;
 }
-const SWATCHES_BY_ID = client.gql`
-  query SwatchesById($ids: [ID!]!) {
-    swatches(ids: $ids) {
-      id
-      hue
-      saturation
-      lightness
-    }
-  }
-`;
-const FILE_BY_ID = client.gql`
-  query FileById($id: ID!) {
-    file(id: $id) {
-      id
-      name
-      publicUrl
-      extension
-      dimensions {
-        width
-        height
-      }
-    }
-  }
-`;
-const FILES_BY_ID = client.gql`
-  query FilesById($ids: [ID!]!) {
-    files(ids: $ids) {
-      id
-      name
-      publicUrl
-      extension
-      dimensions {
-        width
-        height
-      }
-    }
-  }
-`;
-const PAGE_PATHNAMES_BY_ID = client.gql`
-  query PagePathnamesById($ids: [ID!]!) {
-    pagePathnamesById(ids: $ids) {
-      id
-      pathname
-    }
-  }
-`;
-const TYPOGRAPHY_FRAGMENT = client.gql`
-  fragment Typography on Typography {
-    id
-    name
-    style {
-      deviceId
-      value {
-        fontFamily
-        fontSize {
-          value
-          unit
-        }
-        color {
-          swatchId
-          alpha
-        }
-        lineHeight
-        letterSpacing
-        fontWeight
-        textAlign
-        uppercase
-        underline
-        strikethrough
-        italic
-      }
-    }
-  }
-`;
-const TYPOGRAPHIES_BY_ID = client.gql`
-  query TypographiesById($ids: [ID!]!) {
-    typographies(ids: $ids) {
-      ...Typography
-    }
-  }
-
-  ${TYPOGRAPHY_FRAGMENT}
-`;
-const TABLE_BY_ID = client.gql`
-  query TableById($id: ID!) {
-    table(id: $id) {
-      id
-      name
-      columns {
-        id
-        name
-        ... on MultipleSelectTableColumn {
-          options {
-            id
-            name
-          }
-        }
-        ... on SingleSelectTableColumn {
-          options {
-            id
-            name
-          }
-        }
-      }
-    }
-  }
-`;
-const ELEMENT_REFERENCE_GLOBAL_ELEMENT = client.gql`
-  query ElementReferenceGlobalElement($id: ID!) {
-    globalElement(id: $id) {
-      id
-      data
-    }
-  }
-`;
-const INTROSPECTION_QUERY = client.gql`
-  query Introspection(
-    $swatchIds: [ID!]!
-    $fileIds: [ID!]!
-    $pageIds: [ID!]!
-    $typographyIds: [ID!]!
-    $tableIds: [ID!]!
-  ) {
-    swatches(ids: $swatchIds) {
-      id
-      hue
-      saturation
-      lightness
-    }
-
-    files(ids: $fileIds) {
-      id
-      name
-      publicUrl
-      extension
-      dimensions {
-        width
-        height
-      }
-    }
-
-    pagePathnamesById(ids: $pageIds) {
-      id
-      pathname
-    }
-
-    typographies(ids: $typographyIds) {
-      ...Typography
-    }
-
-    tables(ids: $tableIds) {
-      id
-      name
-      columns {
-        id
-        name
-        ... on MultipleSelectTableColumn {
-          options {
-            id
-            name
-          }
-        }
-        ... on SingleSelectTableColumn {
-          options {
-            id
-            name
-          }
-        }
-      }
-    }
-  }
-
-  ${TYPOGRAPHY_FRAGMENT}
-`;
-async function introspect(element, client2, store) {
-  var _a, _b, _c2;
+async function introspect(element, client, store) {
   const descriptors = reactPage.getPropControllerDescriptors(store.getState());
   const swatchIds = /* @__PURE__ */ new Set();
   const fileIds = /* @__PURE__ */ new Set();
@@ -370,11 +197,8 @@ async function introspect(element, client2, store) {
     };
     let element2;
     if (reactPage.isElementReference(current)) {
-      const query = await client2.query({
-        query: ELEMENT_REFERENCE_GLOBAL_ELEMENT,
-        variables: { id: current.value }
-      });
-      const elementData = (_b = (_a = query.data) == null ? void 0 : _a.globalElement) == null ? void 0 : _b.data;
+      const globalElement = await client.fetchGlobalElement(current.value);
+      const elementData = globalElement == null ? void 0 : globalElement.data;
       if (elementData == null)
         continue;
       element2 = elementData;
@@ -386,14 +210,11 @@ async function introspect(element, client2, store) {
       continue;
     getResourcesFromElementDescriptors(elementDescriptors, element2.props);
   }
-  const typographiesResult = await client2.query({
-    query: TYPOGRAPHIES_BY_ID,
-    variables: { ids: [...typographyIds] }
-  });
-  (_c2 = typographiesResult == null ? void 0 : typographiesResult.data) == null ? void 0 : _c2.typographies.forEach((typography) => {
+  const typographies = await client.fetchTypographies([...typographyIds]);
+  typographies.forEach((typography) => {
     typography == null ? void 0 : typography.style.forEach((style) => {
-      var _a2;
-      const swatchId = (_a2 = style.value.color) == null ? void 0 : _a2.swatchId;
+      var _a;
+      const swatchId = (_a = style.value.color) == null ? void 0 : _a.swatchId;
       if (swatchId != null)
         swatchIds.add(swatchId);
     });
@@ -406,164 +227,473 @@ async function introspect(element, client2, store) {
     pageIds: [...pageIds]
   };
 }
-const typePolicies = {
-  Query: {
-    fields: {
-      swatches(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
-          __typename: "Swatch",
-          id
-        }, true));
-      },
-      file(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : toReference({
-          __typename: "File",
-          id: args == null ? void 0 : args.id
-        }, true);
-      },
-      files(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
-          __typename: "File",
-          id
-        }, true));
-      },
-      typographies(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
-          __typename: "Typography",
+function getInitialState(serializedState = []) {
+  return new Map(serializedState.map(([resourceType, resources]) => [resourceType, new Map(resources)]));
+}
+function getSerializedState$1(state) {
+  return Array.from(state.entries()).map(([resourceType, resources]) => [
+    resourceType,
+    Array.from(resources.entries())
+  ]);
+}
+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.RESTORE_API_RESOURCES_CACHE:
+      return getInitialState(action.payload.serializedState);
+    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:
+      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
+    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
-        }, true));
-      },
-      pagePathnamesById(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
-          __typename: "PagePathnameSlice",
+          name
+        }
+      }
+
+      ... on SingleSelectTableColumn {
+        options {
           id
-        }, true));
-      },
-      globalElement(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : toReference({
-          __typename: "GlobalElement",
-          id: args == null ? void 0 : args.id
-        }, true);
-      },
-      table(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : toReference({
-          __typename: "Table",
-          id: args == null ? void 0 : args.id
-        }, true);
-      },
-      page(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : toReference({
-          __typename: "Page",
-          id: args == null ? void 0 : args.id
-        }, true);
-      },
-      site(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : toReference({
-          __typename: "Site",
-          id: args == null ? void 0 : args.id
-        }, true);
+          name
+        }
       }
     }
   }
-};
-function createApolloClient({
-  uri,
-  cacheData
+`;
+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
 }) {
-  const cache = new client.InMemoryCache({
-    typePolicies
-  });
-  if (cacheData)
-    cache.restore(cacheData);
-  return new client.ApolloClient({
-    link: new batchHttp.BatchHttpLink({
-      uri,
-      batchMax: 100
-    }),
-    cache
-  });
+  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, "apolloClient");
-    this.apolloClient = createApolloClient({
-      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.apolloClient, storeContextDefaultValue);
-    const res = await this.apolloClient.query({
-      query: INTROSPECTION_QUERY,
-      variables: introspectionData
-    });
-    res.data.pagePathnamesById.forEach((pagePathnameSlice) => {
-      if (pagePathnameSlice == null)
-        return;
-      const id = Buffer.from(`Page:${pagePathnameSlice.id}`).toString("base64");
-      this.apolloClient.cache.writeFragment({
-        fragment: graphql.PagePathnameSliceFragmentDoc,
-        data: __spreadProps(__spreadValues({}, pagePathnameSlice), {
-          id
-        })
-      });
-    });
+    const introspectionData = await introspect(element, this, storeContextDefaultValue);
+    await this.makeswiftApiClient.dispatch(fetchIntrospectedResources(introspectionData));
     slate.KeyUtils.resetGenerator();
-    return this.apolloClient.cache.extract();
+    return getSerializedState(this.makeswiftApiClient.getState());
   }
   updateCacheData(cacheData) {
-    this.apolloClient.cache.restore(cacheData);
+    this.makeswiftApiClient.dispatch(actions.restoreAPIResourcesCache(cacheData));
+  }
+  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$2 = React.createContext(void 0);
-function useQuery(query, options) {
-  const client$1 = React.useContext(Context$2);
-  return client.useQuery(query, __spreadValues({
-    client: client$1 == null ? void 0 : client$1.apolloClient
-  }, options));
-}
-function useMutation(mutation, options) {
-  const client$1 = React.useContext(Context$2);
-  return client.useMutation(mutation, __spreadValues({
-    client: client$1 == null ? void 0 : client$1.apolloClient
-  }, options));
+const Context$2 = React.createContext(new MakeswiftClient({
+  uri: "https://api.makeswift.com/graphql"
+}));
+function useMakeswiftClient() {
+  return React.useContext(Context$2);
 }
 function MakeswiftProvider({
-  client: client2,
+  client,
   children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Context$2.Provider, {
-    value: client2,
+    value: client,
     children
   });
 }
@@ -639,76 +769,23 @@ const filterUsedSnippetProperties = ({
   location,
   cleanup
 });
-const PAGE_SNIPPETS_QUERY = client.gql`
-  query PageById($id: ID!) {
-    page(id: $id) {
-      __typename
-      id
-      snippets {
-        __typename
-        id
-        name
-        code
-        cleanup
-        location
-        shouldAddToNewPages
-        liveEnabled
-        builderEnabled
-      }
-    }
-  }
-`;
-const SITE_FONTS_QUERY = client.gql`
-  query SiteById($id: ID!) {
-    site(id: $id) {
-      id
-      googleFonts {
-        edges {
-          activeVariants {
-            specifier
-          }
-          node {
-            family
-            variants {
-              specifier
-            }
-          }
-        }
-      }
-    }
-  }
-`;
 function Page$1({
   document: page
 }) {
   var _a;
   const isInBuilder = useIsInBuilder();
   const [snippets, setSnippets] = React.useState(page.snippets);
-  useQuery(PAGE_SNIPPETS_QUERY, {
-    variables: {
-      id: page.id
-    },
-    skip: isInBuilder === false,
-    fetchPolicy: "cache-only",
-    onCompleted(data) {
-      if (data == null)
-        return;
-      const oldSnippets = snippets.map(filterUsedSnippetProperties);
-      const newSnippets = data.page.snippets.map(filterUsedSnippetProperties);
-      if (deepEqual(newSnippets, oldSnippets))
-        return;
-      setSnippets(data.page.snippets);
-    }
-  });
-  const {
-    data: siteData
-  } = useQuery(SITE_FONTS_QUERY, {
-    variables: {
-      id: page.site.id
-    },
-    skip: isInBuilder === false,
-    fetchPolicy: "cache-only"
-  });
+  const cachedPage = useCachedPage(isInBuilder ? page.id : null);
+  React.useEffect(() => {
+    if (cachedPage == null)
+      return;
+    const oldSnippets = snippets.map(filterUsedSnippetProperties);
+    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties);
+    if (deepEqual(newSnippets, oldSnippets))
+      return;
+    setSnippets(cachedPage.snippets);
+  }, [cachedPage]);
+  const site = useCachedSite(isInBuilder ? page.site.id : null);
   const favicon = (_a = page.meta.favicon) != null ? _a : defaultFavicon;
   const {
     title,
@@ -721,7 +798,7 @@ function Page$1({
     isIndexingBlocked
   } = page.seo;
   const fontFamilyParamValue = React.useMemo(() => {
-    if ((siteData == null ? void 0 : siteData.site) == null) {
+    if (site == null) {
       return page.fonts.map(({
         family,
         variants
@@ -729,7 +806,7 @@ function Page$1({
         return `${family.replace(/ /g, "+")}:${variants.join()}`;
       }).join("|");
     }
-    return siteData.site.googleFonts.edges.filter((edge) => edge != null).map(({
+    return site.googleFonts.edges.filter((edge) => edge != null).map(({
       activeVariants,
       node: {
         family,
@@ -739,7 +816,7 @@ function Page$1({
       const activeVariantSpecifiers = variants.filter((variant) => activeVariants.some((activeVariant) => activeVariant.specifier === variant.specifier)).map((variant) => variant.specifier).join();
       return `${family.replace(/ /g, "+")}:${activeVariantSpecifiers}`;
     }).join("|");
-  }, [siteData, page]);
+  }, [site, page]);
   const filteredSnippets = React.useMemo(() => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled), [snippets, isInBuilder]);
   const headSnippets = React.useMemo(() => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head), [filteredSnippets]);
   const previousHeadSnippets = React.useRef(null);
@@ -845,6 +922,18 @@ function Page$1({
     }, snippet.id))]
   });
 }
+function useCachedPage(pageId) {
+  const client = 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 getSnapshot = () => siteId == null ? null : client.readSite(siteId);
+  const site = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  return site;
+}
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
@@ -876,8 +965,8 @@ Received "${apiKey}" instead.`);
     return json;
   }
   async createSnapshot(document2) {
-    const client2 = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
-    const cacheData = await client2.prefetch(document2.data);
+    const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
+    const cacheData = await client.prefetch(document2.data);
     return { document: document2, apiOrigin: this.apiOrigin.href, cacheData };
   }
   async getPageSnapshotByPageId(pageId, { preview = false } = {}) {
@@ -996,7 +1085,7 @@ class Document$1 extends NextDocument__default["default"] {
     });
   }
 }
-const version = "0.3.1";
+const version = "0.4.0";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
@@ -1230,15 +1319,15 @@ async function getServerSideProps(ctx) {
 const Page = React.memo(({
   snapshot
 }) => {
-  const [client2] = React.useState(() => new MakeswiftClient({
+  const [client] = React.useState(() => new MakeswiftClient({
     uri: new URL("graphql", snapshot.apiOrigin).href,
     cacheData: snapshot.cacheData
   }));
   React.useEffect(() => {
-    client2.updateCacheData(snapshot.cacheData);
-  }, [client2, snapshot]);
+    client.updateCacheData(snapshot.cacheData);
+  }, [client, snapshot]);
   return /* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
-    client: client2,
+    client,
     rootElements: /* @__PURE__ */ new Map([[snapshot.document.id, snapshot.document.data]]),
     children: /* @__PURE__ */ jsxRuntime.jsx(Page$1, {
       document: snapshot.document
@@ -2622,32 +2711,112 @@ const FallbackComponent = React.forwardRef(function FallbackComponent2({
     })]
   });
 });
-function isNonNullable(value) {
-  return value != null;
+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"]);
   return __spreadProps(__spreadValues({}, restOfSide), {
     color: color && {
       alpha: color.alpha,
-      swatch: swatches.find((s) => s && s.id === color.swatchId)
+      swatch: swatches.filter(reactPage.isNonNullable).find((s) => s && s.id === color.swatchId)
     }
   });
 }
 function useBorder(value) {
-  const swatchIds = value == null ? [] : [
-    ...Array.from(new Set(value.map(({ value: { borderTop, borderLeft, borderBottom, borderRight } }) => [
-      borderTop && borderTop.color && borderTop.color.swatchId,
-      borderBottom && borderBottom.color && borderBottom.color.swatchId,
-      borderLeft && borderLeft.color && borderLeft.color.swatchId,
-      borderRight && borderRight.color && borderRight.color.swatchId
-    ]).reduce((a, b) => a.concat(b)).filter(isNonNullable)))
-  ];
-  const skip = value == null || swatchIds.length === 0;
-  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
-  if (value == null || error != null)
+  const swatchIds = reactPage.getBorderSwatchIds(value);
+  const swatches = useSwatches(swatchIds);
+  if (value == null)
     return null;
-  const { swatches = [] } = data;
   return value.map((_a) => {
     var _b = _a, { value: { borderTop, borderBottom, borderLeft, borderRight } } = _b, rest = __objRest(_b, ["value"]);
     return __spreadProps(__spreadValues({}, rest), {
@@ -2669,14 +2838,10 @@ const ShadowDefaultValue = {
   color: null
 };
 function useBoxShadow(value) {
-  const swatchIds = value == null ? [] : [
-    ...Array.from(new Set(value.map(({ value: shadows }) => shadows.map(({ payload: { color } }) => color && color.swatchId)).reduce((a, b) => a.concat(b), []).filter(isNonNullable)))
-  ];
-  const skip = value == null || swatchIds.length === 0;
-  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
-  if (value == null || error != null)
+  const swatchIds = reactPage.getBoxShadowsSwatchIds(value);
+  const swatches = useSwatches(swatchIds);
+  if (value == null)
     return null;
-  const { swatches = [] } = data;
   return value.map((_a) => {
     var _b = _a, { value: shadows } = _b, restOfValue = __objRest(_b, ["value"]);
     return __spreadProps(__spreadValues({}, restOfValue), {
@@ -2689,7 +2854,7 @@ function useBoxShadow(value) {
         return __spreadProps(__spreadValues({}, restOfShadow), {
           payload: {
             color: color != null ? {
-              swatch: swatches.find((s) => s && s.id === color.swatchId),
+              swatch: swatches.filter(reactPage.isNonNullable).find((s) => s && s.id === color.swatchId),
               alpha: color.alpha
             } : null,
             inset: inset != null ? inset : ShadowDefaultValue.inset,
@@ -2704,40 +2869,19 @@ function useBoxShadow(value) {
   });
 }
 function useResponsiveColor(color) {
-  const swatchIds = color == null ? [] : [...Array.from(new Set(color.map(({ value: v }) => v && v.swatchId).filter(isNonNullable)))];
-  const skip = swatchIds.length === 0;
-  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
-  if (color == null || error != null)
+  const swatchIds = reactPage.getResponsiveColorSwatchIds(color);
+  const swatches = useSwatches(swatchIds);
+  if (color == null)
     return null;
-  const { swatches = [] } = data;
   return color.map((_a) => {
     var _b = _a, { value: v } = _b, rest = __objRest(_b, ["value"]);
     const { swatchId, alpha } = v;
     const swatch = swatches.find((s) => s && s.id === swatchId);
     return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
-  }).filter(isNonNullable);
-}
-function useFile(fileId) {
-  const { error, data = {} } = useQuery(FILE_BY_ID, {
-    skip: fileId == null,
-    variables: { id: fileId }
-  });
-  if (fileId == null || error != null)
-    return null;
-  return data.file;
+  }).filter(reactPage.isNonNullable);
 }
 const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
-function usePage(pageId) {
-  const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {
-    skip: pageId == null,
-    variables: { ids: [pageId] }
-  });
-  if (pageId == null || error != null)
-    return null;
-  const { pagePathnamesById: [page] = [] } = data;
-  return page;
-}
 const getIndexes = (spans, index) => {
   const flattened = spans.reduce((a, s) => a.concat(s), []);
   if (index < 0 || index > flattened.length)
@@ -3022,11 +3166,10 @@ function useCheckboxControlValue(data, definition) {
 }
 function useColorValue(data, definition) {
   var _a, _b;
-  const result = useQuery(SWATCHES_BY_ID, {
-    variables: { ids: [data == null ? void 0 : data.swatchId] },
-    skip: (data == null ? void 0 : data.swatchId) == null
-  });
-  if (data === void 0) {
+  const swatchId = (_a = data == null ? void 0 : data.swatchId) != null ? _a : null;
+  const swatch = useSwatch(swatchId);
+  const alpha = (_b = data == null ? void 0 : data.alpha) != null ? _b : 1;
+  if (swatch == null) {
     const { defaultValue } = definition.config;
     if (defaultValue === void 0)
       return void 0;
@@ -3038,8 +3181,7 @@ function useColorValue(data, definition) {
     }
     return defaultColor.rgb().string();
   }
-  const [swatch] = (_b = (_a = result.data) == null ? void 0 : _a.swatches) != null ? _b : [null];
-  return ColorHelper__default["default"]({ h: swatch == null ? void 0 : swatch.hue, s: swatch == null ? void 0 : swatch.saturation, l: swatch == null ? void 0 : swatch.lightness }).alpha(data.alpha).rgb().string();
+  return ColorHelper__default["default"]({ h: swatch.hue, s: swatch.saturation, l: swatch.lightness }).alpha(alpha).rgb().string();
 }
 function useComboboxControlValue(data) {
   return data == null ? void 0 : data.value;
@@ -3047,7 +3189,8 @@ function useComboboxControlValue(data) {
 function useImageControlValue(data, definition) {
   var _a;
   const format = (_a = definition.config.format) != null ? _a : slot.ImageControlValueFormat.URL;
-  const file = useFile(data);
+  const fileId = data != null ? data : null;
+  const file = useFile(fileId);
   if (format === slot.ImageControlValueFormat.URL) {
     return file == null ? void 0 : file.publicUrl;
   }
@@ -3060,7 +3203,8 @@ function useImageControlValue(data, definition) {
 }
 function useLinkControlValue(link, _definition) {
   var _a;
-  const page = usePage(link && link.type === "OPEN_PAGE" ? link.payload.pageId : null);
+  const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
+  const page = 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 = "#";
@@ -3645,7 +3789,7 @@ const ReactRuntime = createReactRuntime(storeContextDefaultValue);
 registerBuiltinComponents(ReactRuntime);
 const Context = React.createContext(storeContextDefaultValue);
 function RuntimeProvider({
-  client: client2,
+  client,
   children,
   rootElements
 }) {
@@ -3675,14 +3819,14 @@ function RuntimeProvider({
       });
       setStore((store2) => ReactBuilderPreview.configureStore({
         preloadedState: store2.getState(),
-        client: client2.apolloClient
+        client
       }));
     }
-  }, [client2]);
+  }, [client]);
   return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, {
     value: store,
     children: /* @__PURE__ */ jsxRuntime.jsx(MakeswiftProvider, {
-      client: client2,
+      client,
       children
     })
   });
@@ -3776,23 +3920,9 @@ const DisableRegisterElement = React.createContext(false);
 const ElementReference = React.memo(React.forwardRef(function ElementReference2({
   elementReference
 }, ref) {
-  var _a;
-  const {
-    error,
-    data
-  } = useQuery(ELEMENT_REFERENCE_GLOBAL_ELEMENT, {
-    variables: {
-      id: elementReference.value
-    }
-  });
-  const globalElementData = (_a = data == null ? void 0 : data.globalElement) == null ? void 0 : _a.data;
+  const globalElement = useGlobalElement(elementReference.value);
+  const globalElementData = globalElement == null ? void 0 : globalElement.data;
   const elementReferenceDocument = useDocument(elementReference.key);
-  if (error != null) {
-    return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
-      ref,
-      text: "Something went wrong!"
-    });
-  }
   if (globalElementData == null) {
     return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
       ref,
@@ -3876,12 +4006,10 @@ exports.DEVICES = DEVICES;
 exports.Document = Document$1;
 exports.DocumentReference = DocumentReference;
 exports.Element = Element;
-exports.FILES_BY_ID = FILES_BY_ID;
 exports.Makeswift = Makeswift;
 exports.MakeswiftApiHandler = MakeswiftApiHandler;
 exports.MakeswiftClient = MakeswiftClient;
 exports.MakeswiftComponentType = MakeswiftComponentType;
-exports.PAGE_SNIPPETS_QUERY = PAGE_SNIPPETS_QUERY;
 exports.Page = Page$1;
 exports.Page$1 = Page;
 exports.PageProvider = PageProvider;
@@ -3889,12 +4017,8 @@ exports.PreviewModeScript = PreviewModeScript;
 exports.Provider = Provider;
 exports.ReactRuntime = ReactRuntime;
 exports.RuntimeProvider = RuntimeProvider;
-exports.SITE_FONTS_QUERY = SITE_FONTS_QUERY;
-exports.SWATCHES_BY_ID = SWATCHES_BY_ID;
 exports.Shapes = Shapes;
 exports.Sizes = Sizes;
-exports.TABLE_BY_ID = TABLE_BY_ID;
-exports.TYPOGRAPHIES_BY_ID = TYPOGRAPHIES_BY_ID;
 exports.colorToString = colorToString;
 exports.deepEqual = deepEqual;
 exports.findDeviceOverride = findDeviceOverride;
@@ -3904,7 +4028,6 @@ exports.getServerSideProps = getServerSideProps;
 exports.getStaticPaths = getStaticPaths;
 exports.getStaticProps = getStaticProps;
 exports.insertStyles = insertStyles;
-exports.isNonNullable = isNonNullable;
 exports.responsiveGridItem = responsiveGridItem;
 exports.responsiveStyle = responsiveStyle;
 exports.responsiveTextStyle = responsiveTextStyle;
@@ -3915,13 +4038,16 @@ exports.useBorder = useBorder;
 exports.useBoxShadow = useBoxShadow;
 exports.useElementId = useElementId;
 exports.useFile = useFile;
+exports.useFiles = useFiles;
 exports.useFormContext = useFormContext;
 exports.useIsInBuilder = useIsInBuilder;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
-exports.useMutation = useMutation;
-exports.usePage = usePage;
+exports.useMakeswiftClient = useMakeswiftClient;
 exports.usePageId = usePageId;
-exports.useQuery = useQuery;
+exports.usePagePathnameSlice = usePagePathnameSlice;
 exports.useResponsiveColor = useResponsiveColor;
 exports.useStyle = useStyle;
+exports.useSwatches = useSwatches;
+exports.useTable = useTable;
+exports.useTypography = useTypography;
 //# sourceMappingURL=index.cjs.js.map