@makeswift/runtime 0.8.4 → 0.8.6

package/dist/index.cjs.js

@@ -35,12 +35,15 @@ 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 responsiveStyle = require("./responsive-style.cjs.js");
+var css = require("@emotion/css");
+var serialize = require("@emotion/serialize");
+var utils = require("@emotion/utils");
 var jsxRuntime = require("react/jsx-runtime");
 var descriptors = require("./descriptors.cjs.js");
 require("slate");
@@ -48,16 +51,17 @@ var textInput = require("./text-input.cjs.js");
 var combobox = require("./combobox.cjs.js");
 require("slate-react");
 var shim = require("use-sync-external-store/shim");
+var redux = require("redux");
+var thunk = require("redux-thunk");
+var types = require("./types.cjs.js");
 var introspection = require("./introspection.cjs.js");
-var isNonNullable = require("./isNonNullable.cjs.js");
+var state_breakpoints = require("./state/breakpoints.cjs.js");
 var boxModels = require("./box-models.cjs.js");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
-var css = require("@emotion/css");
 var reactDom = require("react-dom");
 var parse = require("html-react-parser");
 var Head = require("next/head");
-var types = require("./types.cjs.js");
 var createEmotionServer = require("@emotion/server/create-instance");
 var NextDocument = require("next/document");
 var Cors = require("cors");
@@ -92,6 +96,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);
@@ -144,6 +149,448 @@ function BodySnippet({
   }, [code, cleanup]);
   return null;
 }
+function is(x, y) {
+  if (x === y)
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  return x !== x && y !== y;
+}
+const { hasOwnProperty: hasOwnProperty$1 } = Object.prototype;
+const shallowEqual = (a, b) => {
+  if (is(a, b))
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwnProperty$1.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+  return true;
+};
+const { hasOwnProperty } = Object.prototype;
+const deepEqual = (a, b) => {
+  if (shallowEqual(a, b))
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwnProperty.call(b, keysA[i]) || !deepEqual(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+  return true;
+};
+function getInitialState(serializedState = {
+  Swatch: [],
+  File: [],
+  Typography: [],
+  PagePathnameSlice: [],
+  GlobalElement: [],
+  Table: [],
+  Snippet: [],
+  Page: [],
+  Site: []
+}) {
+  return new Map(Object.entries(serializedState).map(([apiResourceType, resources]) => [
+    apiResourceType,
+    new Map(resources.map(({ id, value }) => [id, value]))
+  ]));
+}
+function getHasAPIResource$1(state, resourceType, resourceId) {
+  var _a, _b;
+  return (_b = (_a = state.get(resourceType)) == null ? void 0 : _a.has(resourceId)) != null ? _b : false;
+}
+function getAPIResource$1(state, resourceType, resourceId) {
+  var _a;
+  const resource = (_a = state.get(resourceType)) == null ? void 0 : _a.get(resourceId);
+  return (resource == null ? void 0 : resource.__typename) === resourceType ? resource : null;
+}
+function reducer$1(state = getInitialState(), action) {
+  switch (action.type) {
+    case 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.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 reducer = reducer$1;
+function getHasAPIResource(state, resourceType, resourceId) {
+  return getHasAPIResource$1(state, resourceType, resourceId);
+}
+function getAPIResource(state, resourceType, resourceId) {
+  return getAPIResource$1(state, resourceType, resourceId);
+}
+async function fetchJson(url) {
+  var _a;
+  const response = await fetch(url, {
+    headers: { "Content-Type": "application/json" }
+  });
+  if (response.status === 404)
+    return null;
+  if (!response.ok)
+    throw new Error(response.statusText);
+  if (((_a = response.headers.get("content-type")) == null ? void 0 : _a.includes("application/json")) !== true) {
+    throw new Error(`Expected JSON response from "${url}" but got "${response.headers.get("content-type")}"`);
+  }
+  return response.json();
+}
+function fetchAPIResource(resourceType, resourceId) {
+  return async (dispatch, getState) => {
+    const state = getState();
+    if (getHasAPIResource(state, resourceType, resourceId)) {
+      return getAPIResource(state, resourceType, resourceId);
+    }
+    let resource;
+    switch (resourceType) {
+      case types.APIResourceType.Swatch:
+        resource = await fetchJson(`/api/makeswift/swatches/${resourceId}`);
+        break;
+      case types.APIResourceType.File:
+        resource = await fetchJson(`/api/makeswift/files/${resourceId}`);
+        break;
+      case types.APIResourceType.Typography:
+        resource = await fetchJson(`/api/makeswift/typographies/${resourceId}`);
+        break;
+      case types.APIResourceType.GlobalElement:
+        resource = await fetchJson(`/api/makeswift/global-elements/${resourceId}`);
+        break;
+      case types.APIResourceType.PagePathnameSlice:
+        resource = await fetchJson(`/api/makeswift/page-pathname-slices/${resourceId}`);
+        break;
+      case types.APIResourceType.Table:
+        resource = await fetchJson(`/api/makeswift/tables/${resourceId}`);
+        break;
+      default:
+        resource = null;
+    }
+    dispatch(actions.apiResourceFulfilled(resourceType, resourceId, resource));
+    return resource;
+  };
+}
+function configureStore({ serializedState }) {
+  return redux.createStore(reducer, getInitialState(serializedState), redux.applyMiddleware(thunk__default["default"]));
+}
+class GraphQLClient {
+  constructor(endpoint) {
+    __publicField(this, "endpoint");
+    this.endpoint = endpoint;
+  }
+  async request(query, variables = {}) {
+    const response = await fetch(this.endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ query, variables })
+    });
+    if (!response.ok && response.status !== 400) {
+      throw new Error(`${response.status} ${response.statusText}`);
+    }
+    const body = await response.json();
+    if (body.errors != null) {
+      console.error(body);
+      throw new Error("GraphQL response contains errors, check the console.");
+    }
+    return body.data;
+  }
+}
+const SwatchFragment = `
+  fragment Swatch on Swatch {
+    __typename
+    id
+    hue
+    saturation
+    lightness
+  }
+`;
+const FileFragment = `
+  fragment File on File {
+    __typename
+    id
+    name
+    publicUrl: publicUrlV2
+    extension
+    dimensions {
+      width
+      height
+    }
+  }
+`;
+const TypographyFragment = `
+  fragment Typography on Typography {
+    __typename
+    id
+    name
+    style {
+      deviceId
+      value {
+        fontFamily
+        fontSize {
+          value
+          unit
+        }
+        color {
+          swatchId
+          alpha
+        }
+        lineHeight
+        letterSpacing
+        fontWeight
+        textAlign
+        uppercase
+        underline
+        strikethrough
+        italic
+      }
+    }
+  }
+`;
+const PagePathnameSliceFragment = `
+  fragment PagePathnameSlice on PagePathnameSlice {
+    __typename
+    id
+    pathname
+  }
+`;
+const GlobalElementFragment = `
+  fragment GlobalElement on GlobalElement {
+    __typename
+    id
+    data
+  }
+`;
+const TableFragment = `
+  fragment Table on Table {
+    __typename
+    id
+    name
+    columns {
+      __typename
+      id
+      name
+
+      ... on MultipleSelectTableColumn {
+        options {
+          id
+          name
+        }
+      }
+
+      ... on SingleSelectTableColumn {
+        options {
+          id
+          name
+        }
+      }
+    }
+  }
+`;
+const IntrospectedResourcesQuery = `
+  query IntrospectedResources(
+    $swatchIds: [ID!]!
+    $fileIds: [ID!]!
+    $pageIds: [ID!]!
+    $tableIds: [ID!]!
+  ) {
+    swatches(ids: $swatchIds) {
+      ...Swatch
+    }
+
+    files(ids: $fileIds) {
+      ...File
+    }
+
+    pagePathnamesById(ids: $pageIds) {
+      ...PagePathnameSlice
+    }
+
+    tables(ids: $tableIds) {
+      ...Table
+    }
+  }
+
+  ${SwatchFragment}
+  ${FileFragment}
+  ${PagePathnameSliceFragment}
+  ${TableFragment}
+`;
+const SwatchQuery = `
+  query Swatch($swatchId: ID!) {
+    swatch(id: $swatchId) {
+      ...Swatch
+    }
+  }
+
+  ${SwatchFragment}
+`;
+const FileQuery = `
+  query File($fileId: ID!) {
+    file(id: $fileId) {
+      ...File
+    }
+  }
+
+  ${FileFragment}
+`;
+const TypographyQuery = `
+  query Typography($typographyId: ID!) {
+    typography(id: $typographyId) {
+      ...Typography
+    }
+  }
+
+  ${TypographyFragment}
+`;
+const PagePathnamesByIdQuery = `
+  query PagePathnamesById($pageIds: [ID!]!) {
+    pagePathnamesById(ids: $pageIds) {
+      ...PagePathnameSlice
+    }
+  }
+
+  ${PagePathnameSliceFragment}
+`;
+const TableQuery = `
+  query Table($tableId: ID!) {
+    table(id: $tableId) {
+      ...Table
+    }
+  }
+
+  ${TableFragment}
+`;
+const TypographiesQuery = `
+  query Typographies($typographyIds: [ID!]!) {
+    typographies(ids: $typographyIds) {
+      ...Typography
+    }
+  }
+
+  ${TypographyFragment}
+`;
+const GlobalElementQuery = `
+  query GlobalElement($globalElementId: ID!) {
+    globalElement(id: $globalElementId) {
+      ...GlobalElement
+    }
+  }
+
+  ${GlobalElementFragment}
+`;
+const CreateTableRecordMutation = `
+  mutation CreateTableRecord($input: CreateTableRecordInput!) {
+    createTableRecord(input: $input) {
+      tableRecord {
+        id
+      }
+    }
+  }
+`;
+class MakeswiftClient {
+  constructor({
+    uri,
+    cacheData
+  }) {
+    __publicField(this, "graphqlClient");
+    __publicField(this, "makeswiftApiClient");
+    __publicField(this, "subscribe");
+    this.graphqlClient = new GraphQLClient(uri);
+    this.makeswiftApiClient = configureStore({
+      serializedState: cacheData
+    });
+    this.subscribe = this.makeswiftApiClient.subscribe;
+  }
+  readSwatch(swatchId) {
+    return getAPIResource(this.makeswiftApiClient.getState(), 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));
+  }
+  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"
@@ -191,7 +638,7 @@ function Page$1({
       return;
     const oldSnippets = snippets.map(filterUsedSnippetProperties);
     const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties);
-    if (responsiveStyle.deepEqual(newSnippets, oldSnippets))
+    if (deepEqual(newSnippets, oldSnippets))
       return;
     setSnippets(cachedPage.snippets);
   }, [cachedPage]);
@@ -333,13 +780,13 @@ function Page$1({
   });
 }
 function useCachedPage(pageId) {
-  const client = responsiveStyle.useMakeswiftClient();
+  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 = responsiveStyle.useMakeswiftClient();
+  const client = useMakeswiftClient();
   const getSnapshot = () => siteId == null ? null : client.readSite(siteId);
   const site = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
@@ -359,7 +806,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);
+    this.graphqlClient = new GraphQLClient(new URL("graphql", apiOrigin).href);
   }
   async fetch(path, init) {
     const response = await fetch(new URL(path, this.apiOrigin).toString(), __spreadProps(__spreadValues({}, init), {
@@ -377,11 +824,11 @@ Received "${apiKey}" instead.`);
     return json;
   }
   async getTypographies(typographyIds) {
-    const result = await this.graphqlClient.request(responsiveStyle.TypographiesQuery, { typographyIds });
+    const result = await this.graphqlClient.request(TypographiesQuery, { typographyIds });
     return result.typographies;
   }
   async getIntrospectedResources(introspectedResourceIds) {
-    const result = await this.graphqlClient.request(responsiveStyle.IntrospectedResourcesQuery, introspectedResourceIds);
+    const result = await this.graphqlClient.request(IntrospectedResourcesQuery, introspectedResourceIds);
     return result;
   }
   async introspect(element) {
@@ -540,28 +987,28 @@ Received "${apiKey}" instead.`);
     return snapshot;
   }
   async getSwatch(swatchId) {
-    const result = await this.graphqlClient.request(responsiveStyle.SwatchQuery, { swatchId });
+    const result = await this.graphqlClient.request(SwatchQuery, { swatchId });
     return result.swatch;
   }
   async getFile(fileId) {
-    const result = await this.graphqlClient.request(responsiveStyle.FileQuery, { fileId });
+    const result = await this.graphqlClient.request(FileQuery, { fileId });
     return result.file;
   }
   async getTypography(typographyId) {
-    const result = await this.graphqlClient.request(responsiveStyle.TypographyQuery, { typographyId });
+    const result = await this.graphqlClient.request(TypographyQuery, { typographyId });
     return result.typography;
   }
   async getGlobalElement(globalElementId) {
-    const result = await this.graphqlClient.request(responsiveStyle.GlobalElementQuery, { globalElementId });
+    const result = await this.graphqlClient.request(GlobalElementQuery, { globalElementId });
     return result.globalElement;
   }
   async getPagePathnameSlice(pageId) {
     var _a;
-    const result = await this.graphqlClient.request(responsiveStyle.PagePathnamesByIdQuery, { pageIds: [pageId] });
+    const result = await this.graphqlClient.request(PagePathnamesByIdQuery, { pageIds: [pageId] });
     return (_a = result.pagePathnamesById.at(0)) != null ? _a : null;
   }
   async getTable(tableId) {
-    const result = await this.graphqlClient.request(responsiveStyle.TableQuery, { tableId });
+    const result = await this.graphqlClient.request(TableQuery, { tableId });
     return result.table;
   }
 }
@@ -710,7 +1157,7 @@ async function fonts(_req, res, { getFonts } = {}) {
   const fonts2 = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
   return res.json(fonts2);
 }
-const version = "0.8.4";
+const version = "0.8.6";
 async function handler(req, res, { apiKey }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -923,14 +1370,14 @@ async function getStaticPaths() {
 }
 const REVALIDATE_SECONDS = 1;
 async function getStaticProps(ctx) {
-  var _a, _b, _c;
+  var _a, _b, _c2;
   deprecationWarning("getStaticProps");
   const makeswift = new Makeswift(getApiKey(), {
     apiOrigin: getApiOrigin()
   });
   const path = "/" + ((_b = (_a = ctx.params) == null ? void 0 : _a.path) != null ? _b : []).join("/");
   const snapshot = await makeswift.getPageSnapshot(path, {
-    preview: ((_c = ctx.previewData) == null ? void 0 : _c.makeswift) === true
+    preview: ((_c2 = ctx.previewData) == null ? void 0 : _c2.makeswift) === true
   });
   if (snapshot == null)
     return {
@@ -967,7 +1414,7 @@ async function getServerSideProps(ctx) {
 const Page = React.memo(({
   snapshot
 }) => {
-  const client = React.useMemo(() => new responsiveStyle.MakeswiftClient({
+  const client = React.useMemo(() => new MakeswiftClient({
     uri: new URL("graphql", snapshot.apiOrigin).href,
     cacheData: snapshot.cacheData
   }), [snapshot]);
@@ -991,7 +1438,7 @@ function registerComponent$c(runtime) {
   function isHiddenBasedOnAnimationType(props, deviceId, property) {
     var _a, _b;
     const animateIn = props[property];
-    return ((_b = (_a = responsiveStyle.findDeviceOverride(animateIn, deviceId)) == null ? void 0 : _a.value) != null ? _b : "none") === "none";
+    return ((_b = (_a = state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), animateIn, deviceId)) == null ? void 0 : _a.value) != null ? _b : "none") === "none";
   }
   const isHiddenBasedOnBoxAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "boxAnimateType");
   const isHiddenBasedOnItemAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "itemAnimateType");
@@ -1034,7 +1481,7 @@ function registerComponent$c(runtime) {
         format: descriptors.Padding.Format.ClassName,
         preset: [
           {
-            deviceId: "desktop",
+            deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
             value: {
               paddingTop: { value: 10, unit: "px" },
               paddingRight: { value: 10, unit: "px" },
@@ -1186,7 +1633,7 @@ function registerComponent$b(runtime) {
       color: descriptors.ResponsiveColor((props, device) => {
         var _a;
         const variant = props.variant;
-        const hidden = ((_a = responsiveStyle.findDeviceOverride(variant, device)) == null ? void 0 : _a.value) === "clear";
+        const hidden = ((_a = state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), variant, device)) == null ? void 0 : _a.value) === "clear";
         return { placeholder: "black", hidden };
       }),
       textColor: descriptors.ResponsiveColor({
@@ -1235,7 +1682,7 @@ function registerComponent$a(runtime) {
       step: descriptors.ResponsiveNumber((props, device) => {
         var _a, _b;
         const pageSize = props.pageSize;
-        const pageSizeValue = (_b = (_a = responsiveStyle.findDeviceOverride(pageSize, device)) == null ? void 0 : _a.value) != null ? _b : 1;
+        const pageSizeValue = (_b = (_a = state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), pageSize, device)) == null ? void 0 : _a.value) != null ? _b : 1;
         return {
           label: "Step",
           defaultValue: 1,
@@ -1349,7 +1796,12 @@ function registerComponent$9(runtime) {
         defaultValue: "medium"
       }),
       gap: descriptors.GapX({
-        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        preset: [
+          {
+            deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 10, unit: "px" }
+          }
+        ],
         label: "Gap",
         step: 1,
         min: 0,
@@ -1481,7 +1933,12 @@ function registerComponent$6(runtime) {
         hidden: props.tableId == null
       })),
       gap: descriptors.GapY((props) => ({
-        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        preset: [
+          {
+            deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 10, unit: "px" }
+          }
+        ],
         label: "Gap",
         defaultValue: { value: 0, unit: "px" },
         hidden: props.tableId == null
@@ -1519,7 +1976,7 @@ function registerComponent$6(runtime) {
       labelTextColor: descriptors.ResponsiveColor((props, device) => {
         const hidden = props.tableId == null;
         const responsiveContrast = props.contrast;
-        const contrast = responsiveStyle.findDeviceOverride(responsiveContrast, device);
+        const contrast = state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), responsiveContrast, device);
         return {
           hidden,
           label: "Label text color",
@@ -1571,7 +2028,12 @@ function registerComponent$6(runtime) {
         hidden: props.tableId == null
       })),
       width: descriptors.Width({
-        preset: [{ deviceId: "desktop", value: { value: 550, unit: "px" } }],
+        preset: [
+          {
+            deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 550, unit: "px" }
+          }
+        ],
         defaultValue: { value: 100, unit: "%" },
         format: descriptors.Width.Format.ClassName
       }),
@@ -1623,7 +2085,12 @@ function registerComponent$4(runtime) {
         hidden: props.showLogo === false
       })),
       logoWidth: descriptors.ResponsiveLength((props) => ({
-        preset: [{ deviceId: "desktop", value: { value: 100, unit: "px" } }],
+        preset: [
+          {
+            deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 100, unit: "px" }
+          }
+        ],
         label: "Logo width",
         min: 0,
         max: 1e3,
@@ -1648,7 +2115,12 @@ function registerComponent$4(runtime) {
         defaultValue: "flex-end"
       }),
       gutter: descriptors.GapX({
-        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        preset: [
+          {
+            deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 10, unit: "px" }
+          }
+        ],
         label: "Link gap",
         min: 0,
         max: 100,
@@ -1664,7 +2136,7 @@ function registerComponent$4(runtime) {
       }),
       mobileMenuOpenIconColor: descriptors.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
-        const hidden = !responsiveStyle.findDeviceOverride(mobileMenuAnimation, device);
+        const hidden = !state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, device);
         return {
           label: "Open icon color",
           placeholder: "rgba(161, 168, 194, 0.5)",
@@ -1673,7 +2145,7 @@ function registerComponent$4(runtime) {
       }),
       mobileMenuCloseIconColor: descriptors.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
-        const hidden = !responsiveStyle.findDeviceOverride(mobileMenuAnimation, device);
+        const hidden = !state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, device);
         return {
           label: "Close icon color",
           placeholder: "rgba(161, 168, 194, 0.5)",
@@ -1682,7 +2154,7 @@ function registerComponent$4(runtime) {
       }),
       mobileMenuBackgroundColor: descriptors.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
-        const hidden = !responsiveStyle.findDeviceOverride(mobileMenuAnimation, device);
+        const hidden = !state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, device);
         return {
           label: "Menu BG color",
           placeholder: "black",
@@ -1809,7 +2281,12 @@ function registerComponent$2(runtime) {
         defaultValue: "center"
       }),
       gutter: descriptors.GapX({
-        preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
+        preset: [
+          {
+            deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 10, unit: "px" }
+          }
+        ],
         label: "Link gap",
         min: 0,
         max: 100,
@@ -1824,7 +2301,7 @@ function registerComponent$2(runtime) {
         format: descriptors.Margin.Format.ClassName,
         preset: [
           {
-            deviceId: "desktop",
+            deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
             value: {
               marginTop: { value: 10, unit: "px" },
               marginRight: "auto",
@@ -1866,17 +2343,19 @@ function registerComponent$1(runtime) {
                             id: null,
                             style: [
                               {
-                                deviceId: "mobile",
-                                value: { fontSize: { value: 16, unit: "px" } }
-                              },
-                              {
-                                deviceId: "desktop",
+                                deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
                                 value: {
                                   fontWeight: 400,
                                   fontSize: { value: 18, unit: "px" },
                                   lineHeight: 1.5
                                 }
-                              }
+                              },
+                              ...runtime.getBreakpoints().some(({ id }) => id === state_breakpoints.DefaultBreakpointID.Mobile) ? [
+                                {
+                                  deviceId: state_breakpoints.DefaultBreakpointID.Mobile,
+                                  value: { fontSize: { value: 16, unit: "px" } }
+                                }
+                              ] : []
                             ]
                           }
                         }
@@ -1891,14 +2370,19 @@ function registerComponent$1(runtime) {
       })),
       width: descriptors.Width({
         format: descriptors.Width.Format.ClassName,
-        preset: [{ deviceId: "desktop", value: { value: 700, unit: "px" } }],
+        preset: [
+          {
+            deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
+            value: { value: 700, unit: "px" }
+          }
+        ],
         defaultValue: { value: 100, unit: "%" }
       }),
       margin: descriptors.Margin({
         format: descriptors.Margin.Format.ClassName,
         preset: [
           {
-            deviceId: "desktop",
+            deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
             value: {
               marginTop: null,
               marginRight: "auto",
@@ -1960,6 +2444,19 @@ 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) {
@@ -1992,7 +2489,7 @@ const FallbackComponent = React.forwardRef(function FallbackComponent2({
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ref,
-    className: responsiveStyle.useStyle({
+    className: useStyle({
       width: "100%",
       height: 54,
       backgroundColor: "#fcedf2",
@@ -2011,18 +2508,110 @@ const FallbackComponent = React.forwardRef(function FallbackComponent2({
     })]
   });
 });
-function mapSideColor(swatches, _c) {
-  var _d = _c, { color } = _d, restOfSide = __objRest(_d, ["color"]);
+function useSwatch(swatchId) {
+  const client = useMakeswiftClient();
+  const readSwatch = () => swatchId == null ? null : client.readSwatch(swatchId);
+  const swatch = 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.filter(isNonNullable.isNonNullable).find((s) => s && s.id === color.swatchId)
+      swatch: swatches.filter(introspection.isNonNullable).find((s) => s && s.id === color.swatchId)
     }
   });
 }
 function useBorder(value) {
   const swatchIds = introspection.getBorderSwatchIds(value);
-  const swatches = responsiveStyle.useSwatches(swatchIds);
+  const swatches = useSwatches(swatchIds);
   if (value == null)
     return null;
   return value.map((_a) => {
@@ -2047,7 +2636,7 @@ const ShadowDefaultValue = {
 };
 function useBoxShadow(value) {
   const swatchIds = introspection.getBoxShadowsSwatchIds(value);
-  const swatches = responsiveStyle.useSwatches(swatchIds);
+  const swatches = useSwatches(swatchIds);
   if (value == null)
     return null;
   return value.map((_a) => {
@@ -2062,7 +2651,7 @@ function useBoxShadow(value) {
         return __spreadProps(__spreadValues({}, restOfShadow), {
           payload: {
             color: color != null ? {
-              swatch: swatches.filter(isNonNullable.isNonNullable).find((s) => s && s.id === color.swatchId),
+              swatch: swatches.filter(introspection.isNonNullable).find((s) => s && s.id === color.swatchId),
               alpha: color.alpha
             } : null,
             inset: inset != null ? inset : ShadowDefaultValue.inset,
@@ -2078,7 +2667,7 @@ function useBoxShadow(value) {
 }
 function useResponsiveColor(color) {
   const swatchIds = introspection.getResponsiveColorSwatchIds(color);
-  const swatches = responsiveStyle.useSwatches(swatchIds);
+  const swatches = useSwatches(swatchIds);
   if (color == null)
     return null;
   return color.map((_a) => {
@@ -2086,36 +2675,237 @@ function useResponsiveColor(color) {
     const { swatchId, alpha } = v;
     const swatch = swatches.find((s) => s && s.id === swatchId);
     return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
-  }).filter(isNonNullable.isNonNullable);
+  }).filter(introspection.isNonNullable);
+}
+const getIndexes = (spans, index) => {
+  const flattened = spans.reduce((a, s) => a.concat(s), []);
+  if (index < 0 || index > flattened.length)
+    throw new RangeError();
+  let remainder = index;
+  let rowIndex = 0;
+  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {
+    remainder -= spans[rowIndex].length;
+    rowIndex += 1;
+  }
+  return [rowIndex, remainder];
+};
+function lengthDataToString(data) {
+  if (typeof data === "object")
+    return `${data.value}${data.unit}`;
+  if (typeof data === "number")
+    return `${data}px`;
+  return data;
+}
+function paddingPropertyDataToStyle(data, defaultValue = {}) {
+  var _a, _b, _c2, _d;
+  const paddingTop = (_a = data.paddingTop) != null ? _a : defaultValue.paddingTop;
+  const paddingRight = (_b = data.paddingRight) != null ? _b : defaultValue.paddingRight;
+  const paddingBottom = (_c2 = data.paddingBottom) != null ? _c2 : defaultValue.paddingBottom;
+  const paddingLeft = (_d = data.paddingLeft) != null ? _d : defaultValue.paddingLeft;
+  const style = {};
+  if (paddingTop != null)
+    style.paddingTop = lengthDataToString(paddingTop);
+  if (paddingRight != null)
+    style.paddingRight = lengthDataToString(paddingRight);
+  if (paddingBottom != null)
+    style.paddingBottom = lengthDataToString(paddingBottom);
+  if (paddingLeft != null)
+    style.paddingLeft = lengthDataToString(paddingLeft);
+  return style;
+}
+function marginPropertyDataToStyle(data, defaultValue = {}) {
+  var _a, _b, _c2, _d;
+  const marginTop = (_a = data.marginTop) != null ? _a : defaultValue.marginTop;
+  const marginRight = (_b = data.marginRight) != null ? _b : defaultValue.marginRight;
+  const marginBottom = (_c2 = data.marginBottom) != null ? _c2 : defaultValue.marginBottom;
+  const marginLeft = (_d = data.marginLeft) != null ? _d : defaultValue.marginLeft;
+  const style = {};
+  if (marginTop != null)
+    style.marginTop = lengthDataToString(marginTop);
+  if (marginRight != null)
+    style.marginRight = lengthDataToString(marginRight);
+  if (marginBottom != null)
+    style.marginBottom = lengthDataToString(marginBottom);
+  if (marginLeft != null)
+    style.marginLeft = lengthDataToString(marginLeft);
+  return style;
+}
+function lengthPercentageDataToString(data) {
+  if (typeof data === "object")
+    return `${data.value}${data.unit}`;
+  if (typeof data === "number")
+    return `${data}px`;
+  return data;
+}
+function borderRadiusPropertyDataToStyle(data, defaultValue = {}) {
+  var _a, _b, _c2, _d;
+  const borderTopLeftRadius = (_a = data.borderTopLeftRadius) != null ? _a : defaultValue.borderTopLeftRadius;
+  const borderTopRightRadius = (_b = data.borderTopRightRadius) != null ? _b : defaultValue.borderTopRightRadius;
+  const borderBottomRightRadius = (_c2 = data.borderBottomRightRadius) != null ? _c2 : defaultValue.borderBottomRightRadius;
+  const borderBottomLeftRadius = (_d = data.borderBottomLeftRadius) != null ? _d : defaultValue.borderBottomLeftRadius;
+  const style = {};
+  if (borderTopLeftRadius != null) {
+    style.borderTopLeftRadius = lengthPercentageDataToString(borderTopLeftRadius);
+  }
+  if (borderTopRightRadius != null) {
+    style.borderTopRightRadius = lengthPercentageDataToString(borderTopRightRadius);
+  }
+  if (borderBottomRightRadius != null) {
+    style.borderBottomRightRadius = lengthPercentageDataToString(borderBottomRightRadius);
+  }
+  if (borderBottomLeftRadius != null) {
+    style.borderBottomLeftRadius = lengthPercentageDataToString(borderBottomLeftRadius);
+  }
+  return style;
+}
+function colorToString(color) {
+  return color && color.swatch ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.alpha})` : "";
+}
+function borderPropertyDataToStyle(data, defaultValue = {}) {
+  var _a, _b, _c2, _d;
+  const borderTop = (_a = data.borderTop) != null ? _a : defaultValue.borderTop;
+  const borderRight = (_b = data.borderRight) != null ? _b : defaultValue.borderRight;
+  const borderBottom = (_c2 = data.borderBottom) != null ? _c2 : defaultValue.borderBottom;
+  const borderLeft = (_d = data.borderLeft) != null ? _d : defaultValue.borderLeft;
+  const style = {};
+  if (borderTop != null)
+    style.borderTop = borderSideToString(borderTop);
+  if (borderRight != null)
+    style.borderRight = borderSideToString(borderRight);
+  if (borderBottom != null)
+    style.borderBottom = borderSideToString(borderBottom);
+  if (borderLeft != null)
+    style.borderLeft = borderSideToString(borderLeft);
+  return style;
+}
+function borderSideToString(borderSide) {
+  if (typeof borderSide === "string")
+    return borderSide;
+  if (typeof borderSide === "number")
+    return `${borderSide}px`;
+  const { width, color, style } = borderSide;
+  return `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : "black"}`;
+}
+function responsiveStyle(breakpoints, responsiveValues, join, strategy) {
+  return state_breakpoints.join(breakpoints, responsiveValues, join, strategy).reduce((acc, { deviceId, value }) => {
+    const breakpoint = state_breakpoints.getBreakpoint(breakpoints, deviceId);
+    const mediaQuery = state_breakpoints.getBreakpointMediaQuery(breakpoint);
+    return __spreadProps(__spreadValues({}, acc), {
+      [mediaQuery]: __spreadValues(__spreadValues({}, acc[mediaQuery]), value)
+    });
+  }, {});
 }
-const DEVICE_QUERIES = responsiveStyle.DEVICES.map((device) => ({
-  id: device.id,
-  query: responsiveStyle.getDeviceMediaQuery(device).replace("@media", "")
-}));
-function subscribe(notify) {
-  const cleanUpFns = DEVICE_QUERIES.map((q) => {
-    const mediaQueryList = window.matchMedia(q.query);
-    mediaQueryList.addEventListener("change", notify);
-    return () => mediaQueryList.removeEventListener("change", notify);
+function useResponsiveStyle(responsiveValues, join, strategy) {
+  return responsiveStyle(useBreakpoints(), responsiveValues, join, strategy);
+}
+function responsiveWidth(breakpoints, widthData, defaultValue = "100%") {
+  return __spreadValues({
+    maxWidth: "100%"
+  }, responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({
+    width: typeof width === "object" ? `${width.value}${width.unit}` : width
+  })));
+}
+function useResponsiveWidth(...args) {
+  return responsiveWidth(useBreakpoints(), ...args);
+}
+function responsivePadding(breakpoints, paddingData, defaultValue = {}) {
+  return responsiveStyle(breakpoints, [paddingData], ([padding = {}]) => paddingPropertyDataToStyle(padding, Object.assign({ paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 }, defaultValue)));
+}
+function useResponsivePadding(...args) {
+  return responsivePadding(useBreakpoints(), ...args);
+}
+function responsiveMargin(breakpoints, marginData, defaultValue = {}) {
+  return responsiveStyle(breakpoints, [marginData], ([margin = {}]) => marginPropertyDataToStyle(margin, Object.assign({ marginTop: 0, marginRight: "auto", marginBottom: 0, marginLeft: "auto" }, defaultValue)));
+}
+function useResponsiveMargin(...args) {
+  return responsiveMargin(useBreakpoints(), ...args);
+}
+function responsiveBorderRadius(breakpoints, borderRadiusData, defaultValue = {}) {
+  return responsiveStyle(breakpoints, [borderRadiusData], ([borderRadius = {}]) => borderRadiusPropertyDataToStyle(borderRadius, Object.assign({
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0
+  }, defaultValue)));
+}
+function useResponsiveBorderRadius(...args) {
+  return responsiveBorderRadius(useBreakpoints(), ...args);
+}
+function useResponsiveBorder(borderData, defaultValue = {}) {
+  return useResponsiveStyle([borderData], ([border = {}]) => borderPropertyDataToStyle(border, Object.assign({
+    borderTop: "0px solid black",
+    borderRight: "0px solid black",
+    borderBottom: "0px solid black",
+    borderLeft: "0px solid black"
+  }, defaultValue)));
+}
+const floor = (d) => (v) => Math.floor(10 ** d * v) / 10 ** d;
+function responsiveGridItem(breakpoints, props) {
+  return __spreadValues({
+    display: "flex"
+  }, responsiveStyle(breakpoints, [props.grid, props.columnGap, props.rowGap], ([
+    { spans, count } = { spans: [[12]], count: 12 },
+    columnGap = { value: 0, unit: "px" },
+    rowGap = { value: 0, unit: "px" }
+  ]) => {
+    const [rowIndex, columnIndex] = getIndexes(spans, props.index);
+    const firstCol = columnIndex === 0;
+    const lastCol = columnIndex === spans[rowIndex].length - 1;
+    const span = spans[rowIndex][columnIndex];
+    const fraction = floor(5)(span / count);
+    const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`;
+    const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${columnGap.unit} / 2`;
+    const iePrecisionError = "0.01px";
+    const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`;
+    const firstRow = rowIndex === 0;
+    const lastRow = rowIndex === spans.length - 1;
+    return span === 0 ? { display: "none" } : {
+      flexBasis,
+      minWidth: flexBasis,
+      maxWidth: flexBasis,
+      paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
+      paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
+      paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,
+      paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`
+    };
+  }));
+}
+function useResponsiveGridItem(...args) {
+  return responsiveGridItem(useBreakpoints(), ...args);
+}
+const getBoxShadow = (shadows) => shadows.map(({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blurRadius}px ${spreadRadius}px ${color != null ? colorToString(color) : "rgba(0,0,0,0.2)"}`).filter(Boolean).join();
+function responsiveShadow(breakpoints, value) {
+  return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({
+    boxShadow: getBoxShadow(shadow)
+  }));
+}
+function useResponsiveShadow(...args) {
+  return responsiveShadow(useBreakpoints(), ...args);
+}
+function responsiveTextStyle(breakpoints, value) {
+  return responsiveStyle(breakpoints, [value], ([
+    textStyle = {
+      fontFamily: null,
+      letterSpacing: null,
+      fontSize: null,
+      fontWeight: null,
+      textTransform: [],
+      fontStyle: []
+    }
+  ]) => {
+    const {
+      fontSize,
+      fontWeight,
+      fontStyle = [],
+      textTransform = [],
+      letterSpacing,
+      fontFamily
+    } = textStyle;
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, fontFamily == null ? {} : { fontFamily: `"${fontFamily}"` }), fontWeight == null ? {} : { fontWeight }), letterSpacing == null ? {} : { letterSpacing }), fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }), textTransform.includes("uppercase") ? { textTransform: "uppercase" } : {}), fontStyle.includes("italic") ? { fontStyle: "italic" } : {});
   });
-  return () => cleanUpFns.forEach((fn) => fn());
 }
-function useMediaQuery(responsiveValue) {
-  const getServerSnapshot = () => {
-    var _a;
-    return (_a = responsiveStyle.findDeviceOverride(responsiveValue, responsiveStyle.DEVICES[0].id)) == null ? void 0 : _a.value;
-  };
-  function getSnapshot() {
-    var _a;
-    const deviceId = DEVICE_QUERIES.reduce((matchedDevice, deviceQueries) => {
-      if (window.matchMedia(deviceQueries.query).matches) {
-        return deviceQueries.id;
-      }
-      return matchedDevice;
-    }, DEVICE_QUERIES[0].id);
-    return (_a = responsiveStyle.findDeviceOverride(responsiveValue, deviceId)) == null ? void 0 : _a.value;
-  }
-  return shim.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+function useResponsiveTextStyle(...args) {
+  return responsiveTextStyle(useBreakpoints(), ...args);
 }
 const defaultMargin = {
   marginTop: 0,
@@ -2133,7 +2923,7 @@ function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
   return __spreadValues(__spreadValues({}, properties.includes(descriptors.StyleControlProperty.Width) && {
     maxWidth: "100%"
-  }), responsiveStyle.responsiveStyle([
+  }), useResponsiveStyle([
     style == null ? void 0 : style.width,
     style == null ? void 0 : style.margin,
     style == null ? void 0 : style.padding,
@@ -2141,14 +2931,14 @@ function useStyleControlCssObject(style, controlDefinition) {
     style == null ? void 0 : style.borderRadius,
     style == null ? void 0 : style.textStyle
   ], ([width, margin, padding, border, borderRadius, textStyle]) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c2, _d, _e, _f, _g, _h, _i, _j, _k;
     return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(descriptors.StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
-    }), properties.includes(descriptors.StyleControlProperty.Margin) && responsiveStyle.marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(descriptors.StyleControlProperty.Padding) && responsiveStyle.paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(descriptors.StyleControlProperty.Border) && {
-      borderTop: (_b = borderSideToString(border == null ? void 0 : border.borderTop)) != null ? _b : "0 solid black",
-      borderRight: (_c = borderSideToString(border == null ? void 0 : border.borderRight)) != null ? _c : "0 solid black",
-      borderBottom: (_d = borderSideToString(border == null ? void 0 : border.borderBottom)) != null ? _d : "0 solid black",
-      borderLeft: (_e = borderSideToString(border == null ? void 0 : border.borderLeft)) != null ? _e : "0 solid black"
+    }), properties.includes(descriptors.StyleControlProperty.Margin) && marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(descriptors.StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(descriptors.StyleControlProperty.Border) && {
+      borderTop: (_b = borderSideToString2(border == null ? void 0 : border.borderTop)) != null ? _b : "0 solid black",
+      borderRight: (_c2 = borderSideToString2(border == null ? void 0 : border.borderRight)) != null ? _c2 : "0 solid black",
+      borderBottom: (_d = borderSideToString2(border == null ? void 0 : border.borderBottom)) != null ? _d : "0 solid black",
+      borderLeft: (_e = borderSideToString2(border == null ? void 0 : border.borderLeft)) != null ? _e : "0 solid black"
     }), properties.includes(descriptors.StyleControlProperty.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,
@@ -2162,18 +2952,18 @@ function useStyleControlCssObject(style, controlDefinition) {
   function widthToString(widthProperty) {
     if (widthProperty == null)
       return null;
-    return responsiveStyle.lengthPercentageDataToString(widthProperty);
+    return lengthPercentageDataToString(widthProperty);
   }
-  function borderSideToString(borderSide) {
+  function borderSideToString2(borderSide) {
     if (borderSide == null)
       return null;
     const { width, color, style: style2 } = borderSide;
-    return `${width != null ? width : 0}px ${style2} ${color != null ? responsiveStyle.colorToString(color) : "black"}`;
+    return `${width != null ? width : 0}px ${style2} ${color != null ? colorToString(color) : "black"}`;
   }
   function borderRadiusToString(borderRadius) {
     if (borderRadius == null)
       return null;
-    return responsiveStyle.lengthPercentageDataToString(borderRadius);
+    return lengthPercentageDataToString(borderRadius);
   }
   function fontSizeToString(fontSize) {
     return `${fontSize.value}${fontSize.unit}`;
@@ -2182,7 +2972,7 @@ function useStyleControlCssObject(style, controlDefinition) {
 function useFormattedStyle(styleControlData, controlDefinition, control) {
   const style = useStyleControlCssObject(styleControlData, controlDefinition);
   const guid = React.useId().replaceAll(":", "");
-  const styleClassName = responsiveStyle.useStyle(style);
+  const styleClassName = useStyle(style);
   const classNames = `${styleClassName} ${guid}`;
   React.useEffect(() => {
     let currentBoxModel = null;
@@ -2191,7 +2981,7 @@ function useFormattedStyle(styleControlData, controlDefinition, control) {
         return;
       const element = document.querySelector(`.${guid}`);
       const measuredBoxModel = element == null ? null : boxModels.getBox(element);
-      if (!responsiveStyle.deepEqual(currentBoxModel, measuredBoxModel)) {
+      if (!deepEqual(currentBoxModel, measuredBoxModel)) {
         currentBoxModel = measuredBoxModel;
         control.changeBoxModel(currentBoxModel);
       }
@@ -2218,7 +3008,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 = responsiveStyle.useSwatch(swatchId);
+  const swatch = useSwatch(swatchId);
   const alpha = (_b = data == null ? void 0 : data.alpha) != null ? _b : 1;
   if (swatch == null) {
     const { defaultValue } = definition.config;
@@ -2241,7 +3031,7 @@ function useImageControlValue(data, definition) {
   var _a;
   const format = (_a = definition.config.format) != null ? _a : descriptors.ImageControlValueFormat.URL;
   const fileId = data != null ? data : null;
-  const file = responsiveStyle.useFile(fileId);
+  const file = useFile(fileId);
   if (format === descriptors.ImageControlValueFormat.URL) {
     return file == null ? void 0 : file.publicUrl;
   }
@@ -2255,7 +3045,7 @@ function useImageControlValue(data, definition) {
 function useLinkControlValue(link, _definition) {
   var _a;
   const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
-  const page = responsiveStyle.usePagePathnameSlice(pageId != null ? 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 = "#";
@@ -2381,7 +3171,7 @@ function pollBoxModel({
   let currentBoxModel = null;
   const handleAnimationFrameRequest = () => {
     const measuredBoxModel = boxModels.getBox(element);
-    if (!responsiveStyle.deepEqual(currentBoxModel, measuredBoxModel)) {
+    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
       currentBoxModel = measuredBoxModel;
       onBoxModelChange(currentBoxModel);
     }
@@ -2411,13 +3201,13 @@ function useSlot(data, control) {
     }, element.key))
   });
 }
-function Slot(_e) {
-  var _f = _e, {
+function Slot(_f) {
+  var _g = _f, {
     as,
     control,
     children,
     className
-  } = _f, restOfProps = __objRest(_f, [
+  } = _g, restOfProps = __objRest(_g, [
     "as",
     "control",
     "children",
@@ -2425,7 +3215,7 @@ function Slot(_e) {
   ]);
   const As = as != null ? as : "div";
   const [element, setElement] = React.useState(null);
-  const baseClassName = responsiveStyle.useStyle({
+  const baseClassName = useStyle({
     display: "flex",
     flexWrap: "wrap",
     width: "100%"
@@ -2446,15 +3236,15 @@ function Slot(_e) {
 }
 Slot.Placeholder = SlotPlaceholder;
 Slot.Item = SlotItem;
-function SlotItem(_g) {
-  var _h = _g, {
+function SlotItem(_h) {
+  var _i = _h, {
     as,
     control,
     grid,
     index,
     children,
     className
-  } = _h, restOfProps = __objRest(_h, [
+  } = _i, restOfProps = __objRest(_i, [
     "as",
     "control",
     "grid",
@@ -2464,13 +3254,13 @@ function SlotItem(_g) {
   ]);
   const As = as != null ? as : "div";
   const [element, setElement] = React.useState(null);
-  const baseClassName = responsiveStyle.useStyle(__spreadValues({
+  const baseClassName = useStyle(__spreadValues({
     display: "flex"
-  }, responsiveStyle.responsiveStyle([grid], ([{
+  }, useResponsiveStyle([grid], ([{
     count = 12,
     spans = [[12]]
   } = {}]) => {
-    const [rowIndex, columnIndex] = responsiveStyle.getIndexes(spans, index);
+    const [rowIndex, columnIndex] = getIndexes(spans, index);
     const span = spans[rowIndex][columnIndex];
     const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`;
     return span === 0 ? {
@@ -2508,7 +3298,7 @@ function SlotPlaceholder({
   }, [element, control]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref: setElement,
-    className: responsiveStyle.useStyle({
+    className: useStyle({
       width: "100%",
       background: "rgba(161, 168, 194, 0.18)",
       height: "80px"
@@ -2517,7 +3307,7 @@ function SlotPlaceholder({
       xmlns: "http://www.w3.org/2000/svg",
       width: "100%",
       height: "100%",
-      className: responsiveStyle.useStyle({
+      className: useStyle({
         overflow: "visible",
         padding: 8
       }),
@@ -2640,24 +3430,24 @@ function ControlValue({
   }
 }
 function useWidthStyle(value, descriptor) {
-  return responsiveStyle.useStyle(responsiveStyle.responsiveWidth(value, descriptor.options.defaultValue));
+  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue));
 }
 function usePaddingStyle(value) {
-  return responsiveStyle.useStyle(responsiveStyle.responsivePadding(value));
+  return useStyle(useResponsivePadding(value));
 }
 function useMarginStyle(value) {
-  return responsiveStyle.useStyle(responsiveStyle.responsiveMargin(value));
+  return useStyle(useResponsiveMargin(value));
 }
 function useBorderRadiusStyle(value) {
-  return responsiveStyle.useStyle(responsiveStyle.responsiveBorderRadius(value));
+  return useStyle(useResponsiveBorderRadius(value));
 }
 function useShadowsStyle(value) {
   const shadowValue = useBoxShadow(value);
-  return responsiveStyle.useStyle(responsiveStyle.responsiveShadow(shadowValue != null ? shadowValue : void 0));
+  return useStyle(useResponsiveShadow(shadowValue != null ? shadowValue : void 0));
 }
 function useBorderStyle(value) {
   const borderData = useBorder(value);
-  return responsiveStyle.useStyle(responsiveStyle.responsiveBorder(borderData != null ? borderData : void 0));
+  return useStyle(useResponsiveBorder(borderData != null ? borderData : void 0));
 }
 function PropsValue({
   element,
@@ -2674,7 +3464,7 @@ function PropsValue({
     return constants.getPropControllers(state, documentKey, element.key);
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
-    var _a2, _b, _c;
+    var _a2, _b, _c2;
     switch (descriptor.type) {
       case textInput.CheckboxControlType:
       case textInput.NumberControlType:
@@ -2716,7 +3506,7 @@ function PropsValue({
         }, descriptor.type);
       }
       case descriptors.SlotControlType: {
-        const control = (_c = propControllers == null ? void 0 : propControllers[propName]) != null ? _c : null;
+        const control = (_c2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _c2 : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useSlot,
           parameters: [props[propName], control],
@@ -2921,6 +3711,12 @@ function createReactRuntime(store) {
     },
     copyElementTree(elementTree2, replacementContext) {
       return constants.copyElementTree(store.getState(), elementTree2, replacementContext);
+    },
+    getBreakpoints() {
+      return constants.getBreakpoints(store.getState());
+    },
+    unstable_setBreakpoints(breakpoints) {
+      return store.dispatch(actions.setBreakpoints(state_breakpoints.parseBreakpointsInput(breakpoints)));
     }
   };
 }
@@ -2933,10 +3729,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(_i) {
-  var _j = _i, {
+function RuntimeProvider(_j) {
+  var _k = _j, {
     preview
-  } = _j, props = __objRest(_j, [
+  } = _k, props = __objRest(_k, [
     "preview"
   ]);
   return preview ? /* @__PURE__ */ jsxRuntime.jsx(PreviewProvider, __spreadValues({}, props)) : /* @__PURE__ */ jsxRuntime.jsx(LiveProvider, __spreadValues({}, props));
@@ -2991,6 +3787,9 @@ function useIsPreview() {
 function useBuilderEditMode() {
   return useSelector((state) => constants.getBuilderEditMode(state));
 }
+function useBreakpoints() {
+  return useSelector((state) => constants.getBreakpoints(state));
+}
 function useDispatch() {
   const store = React.useContext(StoreContext);
   return store.dispatch;
@@ -3033,7 +3832,7 @@ const DisableRegisterElement = React.createContext(false);
 const ElementReference = React.memo(React.forwardRef(function ElementReference2({
   elementReference
 }, ref) {
-  const globalElement = responsiveStyle.useGlobalElement(elementReference.value);
+  const globalElement = useGlobalElement(elementReference.value);
   const globalElementData = globalElement == null ? void 0 : globalElement.data;
   const elementReferenceDocument = useDocument(elementReference.key);
   const documentKey = elementReference.key;
@@ -3149,6 +3948,7 @@ exports.Element = Element$1;
 exports.ElementImperativeHandle = ElementImperativeHandle;
 exports.Makeswift = Makeswift;
 exports.MakeswiftApiHandler = MakeswiftApiHandler;
+exports.MakeswiftProvider = MakeswiftProvider;
 exports.Page = Page$1;
 exports.Page$1 = Page;
 exports.PageProvider = PageProvider;
@@ -3159,6 +3959,8 @@ exports.RuntimeProvider = RuntimeProvider;
 exports.Shapes = Shapes;
 exports.Sizes = Sizes;
 exports.StoreContext = StoreContext;
+exports.colorToString = colorToString;
+exports.deepEqual = deepEqual;
 exports.forwardNextDynamicRef = forwardNextDynamicRef;
 exports.getServerSideProps = getServerSideProps;
 exports.getStaticPaths = getStaticPaths;
@@ -3167,12 +3969,24 @@ exports.pollBoxModel = pollBoxModel;
 exports.storeContextDefaultValue = storeContextDefaultValue;
 exports.useBorder = useBorder;
 exports.useBoxShadow = useBoxShadow;
+exports.useBreakpoints = useBreakpoints;
 exports.useBuilderEditMode = useBuilderEditMode;
 exports.useElementId = useElementId;
+exports.useFile = useFile;
+exports.useFiles = useFiles;
 exports.useFormContext = useFormContext;
 exports.useIsInBuilder = useIsInBuilder;
 exports.useIsPreview = useIsPreview;
-exports.useMediaQuery = useMediaQuery;
+exports.useMakeswiftClient = useMakeswiftClient;
 exports.usePageId = usePageId;
+exports.usePagePathnameSlice = usePagePathnameSlice;
 exports.useResponsiveColor = useResponsiveColor;
+exports.useResponsiveGridItem = useResponsiveGridItem;
+exports.useResponsiveStyle = useResponsiveStyle;
+exports.useResponsiveTextStyle = useResponsiveTextStyle;
+exports.useResponsiveWidth = useResponsiveWidth;
+exports.useStyle = useStyle;
+exports.useSwatches = useSwatches;
+exports.useTable = useTable;
+exports.useTypography = useTypography;
 //# sourceMappingURL=index.cjs.js.map