@makeswift/runtime 0.8.5 → 0.8.6

package/dist/responsive-style.es.js

@@ -1,853 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-var _a;
-import * as React from "react";
-import { createContext, useContext, useEffect, useRef } from "react";
-import { cache } from "@emotion/css";
-import { serializeStyles } from "@emotion/serialize";
-import { registerStyles, insertStyles } from "@emotion/utils";
-import { useSyncExternalStore } from "use-sync-external-store/shim";
-import { createStore, applyMiddleware } from "redux";
-import thunk from "redux-thunk";
-import { A as APIResourceType } from "./types.es.js";
-import { A as ActionTypes, o as apiResourceFulfilled } from "./actions.es.js";
-import { jsx } from "react/jsx-runtime";
-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 _a2, _b;
-  return (_b = (_a2 = state.get(resourceType)) == null ? void 0 : _a2.has(resourceId)) != null ? _b : false;
-}
-function getAPIResource$1(state, resourceType, resourceId) {
-  var _a2;
-  const resource = (_a2 = state.get(resourceType)) == null ? void 0 : _a2.get(resourceId);
-  return (resource == null ? void 0 : resource.__typename) === resourceType ? resource : null;
-}
-function reducer$1(state = getInitialState(), action) {
-  switch (action.type) {
-    case ActionTypes.API_RESOURCE_FULFILLED: {
-      const { resourceType, resourceId, resource } = action.payload;
-      return new Map(state).set(resourceType, new Map(state.get(resourceType)).set(resourceId, resource));
-    }
-    case ActionTypes.CHANGE_API_RESOURCE: {
-      const existingApiResource = getAPIResource$1(state, action.payload.resource.__typename, action.payload.resource.id);
-      if (deepEqual(existingApiResource, action.payload.resource))
-        return state;
-      return new Map(state).set(action.payload.resource.__typename, new Map(state.get(action.payload.resource.__typename)).set(action.payload.resource.id, action.payload.resource));
-    }
-    case ActionTypes.EVICT_API_RESOURCE: {
-      const [resourceType, resourceId] = action.payload.id.split(":");
-      if (!(resourceType in APIResourceType))
-        return state;
-      const resources = new Map(state.get(resourceType));
-      const deleted = resources.delete(resourceId);
-      return deleted ? new Map(state).set(resourceType, resources) : state;
-    }
-    default:
-      return state;
-  }
-}
-const reducer = reducer$1;
-function getHasAPIResource(state, resourceType, resourceId) {
-  return getHasAPIResource$1(state, resourceType, resourceId);
-}
-function getAPIResource(state, resourceType, resourceId) {
-  return getAPIResource$1(state, resourceType, resourceId);
-}
-async function fetchJson(url) {
-  var _a2;
-  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 (((_a2 = response.headers.get("content-type")) == null ? void 0 : _a2.includes("application/json")) !== true) {
-    throw new Error(`Expected JSON response from "${url}" but got "${response.headers.get("content-type")}"`);
-  }
-  return response.json();
-}
-function fetchAPIResource(resourceType, resourceId) {
-  return async (dispatch, getState) => {
-    const state = getState();
-    if (getHasAPIResource(state, resourceType, resourceId)) {
-      return getAPIResource(state, resourceType, resourceId);
-    }
-    let resource;
-    switch (resourceType) {
-      case APIResourceType.Swatch:
-        resource = await fetchJson(`/api/makeswift/swatches/${resourceId}`);
-        break;
-      case APIResourceType.File:
-        resource = await fetchJson(`/api/makeswift/files/${resourceId}`);
-        break;
-      case APIResourceType.Typography:
-        resource = await fetchJson(`/api/makeswift/typographies/${resourceId}`);
-        break;
-      case APIResourceType.GlobalElement:
-        resource = await fetchJson(`/api/makeswift/global-elements/${resourceId}`);
-        break;
-      case APIResourceType.PagePathnameSlice:
-        resource = await fetchJson(`/api/makeswift/page-pathname-slices/${resourceId}`);
-        break;
-      case APIResourceType.Table:
-        resource = await fetchJson(`/api/makeswift/tables/${resourceId}`);
-        break;
-      default:
-        resource = null;
-    }
-    dispatch(apiResourceFulfilled(resourceType, resourceId, resource));
-    return resource;
-  };
-}
-function configureStore({ serializedState }) {
-  return createStore(reducer, getInitialState(serializedState), applyMiddleware(thunk));
-}
-class GraphQLClient {
-  constructor(endpoint) {
-    __publicField(this, "endpoint");
-    this.endpoint = endpoint;
-  }
-  async request(query, variables = {}) {
-    const response = await fetch(this.endpoint, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ query, variables })
-    });
-    if (!response.ok && response.status !== 400) {
-      throw new Error(`${response.status} ${response.statusText}`);
-    }
-    const body = await response.json();
-    if (body.errors != null) {
-      console.error(body);
-      throw new Error("GraphQL response contains errors, check the console.");
-    }
-    return body.data;
-  }
-}
-const SwatchFragment = `
-  fragment Swatch on Swatch {
-    __typename
-    id
-    hue
-    saturation
-    lightness
-  }
-`;
-const FileFragment = `
-  fragment File on File {
-    __typename
-    id
-    name
-    publicUrl: publicUrlV2
-    extension
-    dimensions {
-      width
-      height
-    }
-  }
-`;
-const TypographyFragment = `
-  fragment Typography on Typography {
-    __typename
-    id
-    name
-    style {
-      deviceId
-      value {
-        fontFamily
-        fontSize {
-          value
-          unit
-        }
-        color {
-          swatchId
-          alpha
-        }
-        lineHeight
-        letterSpacing
-        fontWeight
-        textAlign
-        uppercase
-        underline
-        strikethrough
-        italic
-      }
-    }
-  }
-`;
-const PagePathnameSliceFragment = `
-  fragment PagePathnameSlice on PagePathnameSlice {
-    __typename
-    id
-    pathname
-  }
-`;
-const GlobalElementFragment = `
-  fragment GlobalElement on GlobalElement {
-    __typename
-    id
-    data
-  }
-`;
-const TableFragment = `
-  fragment Table on Table {
-    __typename
-    id
-    name
-    columns {
-      __typename
-      id
-      name
-
-      ... on MultipleSelectTableColumn {
-        options {
-          id
-          name
-        }
-      }
-
-      ... on SingleSelectTableColumn {
-        options {
-          id
-          name
-        }
-      }
-    }
-  }
-`;
-const IntrospectedResourcesQuery = `
-  query IntrospectedResources(
-    $swatchIds: [ID!]!
-    $fileIds: [ID!]!
-    $pageIds: [ID!]!
-    $tableIds: [ID!]!
-  ) {
-    swatches(ids: $swatchIds) {
-      ...Swatch
-    }
-
-    files(ids: $fileIds) {
-      ...File
-    }
-
-    pagePathnamesById(ids: $pageIds) {
-      ...PagePathnameSlice
-    }
-
-    tables(ids: $tableIds) {
-      ...Table
-    }
-  }
-
-  ${SwatchFragment}
-  ${FileFragment}
-  ${PagePathnameSliceFragment}
-  ${TableFragment}
-`;
-const SwatchQuery = `
-  query Swatch($swatchId: ID!) {
-    swatch(id: $swatchId) {
-      ...Swatch
-    }
-  }
-
-  ${SwatchFragment}
-`;
-const FileQuery = `
-  query File($fileId: ID!) {
-    file(id: $fileId) {
-      ...File
-    }
-  }
-
-  ${FileFragment}
-`;
-const TypographyQuery = `
-  query Typography($typographyId: ID!) {
-    typography(id: $typographyId) {
-      ...Typography
-    }
-  }
-
-  ${TypographyFragment}
-`;
-const PagePathnamesByIdQuery = `
-  query PagePathnamesById($pageIds: [ID!]!) {
-    pagePathnamesById(ids: $pageIds) {
-      ...PagePathnameSlice
-    }
-  }
-
-  ${PagePathnameSliceFragment}
-`;
-const TableQuery = `
-  query Table($tableId: ID!) {
-    table(id: $tableId) {
-      ...Table
-    }
-  }
-
-  ${TableFragment}
-`;
-const TypographiesQuery = `
-  query Typographies($typographyIds: [ID!]!) {
-    typographies(ids: $typographyIds) {
-      ...Typography
-    }
-  }
-
-  ${TypographyFragment}
-`;
-const GlobalElementQuery = `
-  query GlobalElement($globalElementId: ID!) {
-    globalElement(id: $globalElementId) {
-      ...GlobalElement
-    }
-  }
-
-  ${GlobalElementFragment}
-`;
-const CreateTableRecordMutation = `
-  mutation CreateTableRecord($input: CreateTableRecordInput!) {
-    createTableRecord(input: $input) {
-      tableRecord {
-        id
-      }
-    }
-  }
-`;
-class MakeswiftClient {
-  constructor({
-    uri,
-    cacheData
-  }) {
-    __publicField(this, "graphqlClient");
-    __publicField(this, "makeswiftApiClient");
-    __publicField(this, "subscribe");
-    this.graphqlClient = new GraphQLClient(uri);
-    this.makeswiftApiClient = configureStore({
-      serializedState: cacheData
-    });
-    this.subscribe = this.makeswiftApiClient.subscribe;
-  }
-  readSwatch(swatchId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Swatch, swatchId);
-  }
-  async fetchSwatch(swatchId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.Swatch, swatchId));
-  }
-  readFile(fileId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.File, fileId);
-  }
-  async fetchFile(fileId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.File, fileId));
-  }
-  readTypography(typographyId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Typography, typographyId);
-  }
-  async fetchTypography(typographyId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.Typography, typographyId));
-  }
-  readGlobalElement(globalElementId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.GlobalElement, globalElementId);
-  }
-  async fetchGlobalElement(globalElementId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.GlobalElement, globalElementId));
-  }
-  readPagePathnameSlice(pageId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.PagePathnameSlice, pageId);
-  }
-  async fetchPagePathnameSlice(pageId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.PagePathnameSlice, pageId));
-  }
-  readTable(tableId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Table, tableId);
-  }
-  async fetchTable(tableId) {
-    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.Table, tableId));
-  }
-  async createTableRecord(tableId, columns) {
-    await this.graphqlClient.request(CreateTableRecordMutation, {
-      input: {
-        data: {
-          tableId,
-          columns
-        }
-      }
-    });
-  }
-  readSite(siteId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Site, siteId);
-  }
-  readPage(pageId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Page, pageId);
-  }
-  readSnippet(snippetId) {
-    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Snippet, snippetId);
-  }
-}
-const Context = createContext(new MakeswiftClient({
-  uri: "https://api.makeswift.com/graphql"
-}));
-function useMakeswiftClient() {
-  return useContext(Context);
-}
-function MakeswiftProvider({
-  client,
-  children
-}) {
-  return /* @__PURE__ */ jsx(Context.Provider, {
-    value: client,
-    children
-  });
-}
-const keys = (o) => Object.keys(o);
-const coalesce = (...args) => {
-  let i;
-  for (i = 0; i < args.length - 1; i += 1) {
-    if (args[i] != null)
-      return args[i];
-  }
-  return args[i];
-};
-function shallowMerge(a, b) {
-  const bKeys = keys(b);
-  const merged = __spreadValues({}, a);
-  bKeys.forEach((key) => {
-    merged[key] = coalesce(merged[key], b[key]);
-  });
-  return merged;
-}
-const DEVICES = [
-  { id: "desktop", minWidth: 769 },
-  { id: "tablet", minWidth: 576, maxWidth: 768 },
-  { id: "mobile", maxWidth: 575 }
-];
-const getDevice = (deviceId) => {
-  const device = DEVICES.find(({ id }) => id === deviceId);
-  if (device == null)
-    throw new Error(`Unrecognized device ID: "${deviceId}".`);
-  return device;
-};
-function defaultStrategy(value, fallbacks) {
-  return value || fallbacks[0];
-}
-function shallowMergeFallbacks(value, fallbacks) {
-  return [value, ...fallbacks].filter((override) => Boolean(override)).reduce((a, b) => ({
-    deviceId: a.deviceId || b.deviceId,
-    value: shallowMerge(a.value, b.value)
-  }));
-}
-function findDeviceOverride(values = [], deviceId, strategy = defaultStrategy) {
-  const value = values.find(({ deviceId: d }) => d === deviceId);
-  const fallbacks = DEVICES.slice(0, DEVICES.findIndex((d) => d.id === deviceId) + 1).reverse().map((d) => values.find((v) => v.deviceId === d.id)).filter((override) => Boolean(override));
-  return value != null || fallbacks.length > 0 ? strategy(value, fallbacks) : void 0;
-}
-function join(responsiveValues, joinFn, strategy) {
-  return DEVICES.map(({ id }) => id).map((deviceId) => {
-    const value = joinFn(responsiveValues.map((responsiveValue) => {
-      const deviceValue = responsiveValue && findDeviceOverride(responsiveValue, deviceId, strategy);
-      return deviceValue == null ? void 0 : deviceValue.value;
-    }));
-    if (value == null)
-      return null;
-    return { deviceId, value };
-  }).filter((override) => Boolean(override));
-}
-const getDeviceMediaQuery = (device) => {
-  const parts = ["@media only screen"];
-  if (device.minWidth != null) {
-    parts.push(`(min-width: ${device.minWidth}px)`);
-  }
-  if (device.maxWidth != null) {
-    parts.push(`(max-width: ${device.maxWidth}px)`);
-  }
-  return parts.join(" and ");
-};
-const isServer = typeof window === "undefined";
-const useInsertionEffectSpecifier = "useInsertionEffect";
-const useInsertionEffect = (_a = React[useInsertionEffectSpecifier]) != null ? _a : React.useLayoutEffect;
-function useStyle(style) {
-  const serialized = serializeStyles([style], cache.registered);
-  registerStyles(cache, serialized, false);
-  useInsertionEffect(() => {
-    insertStyles(cache, serialized, false);
-  });
-  if (isServer)
-    insertStyles(cache, serialized, false);
-  return `${cache.key}-${serialized.name}`;
-}
-function useSwatch(swatchId) {
-  const client = useMakeswiftClient();
-  const readSwatch = () => swatchId == null ? null : client.readSwatch(swatchId);
-  const swatch = useSyncExternalStore(client.subscribe, readSwatch, readSwatch);
-  useEffect(() => {
-    if (swatchId != null)
-      client.fetchSwatch(swatchId).catch(console.error);
-  }, [client, swatchId]);
-  return swatch;
-}
-function useSwatches(swatchIds) {
-  const client = useMakeswiftClient();
-  const lastSnapshot = useRef();
-  function getSnapshot() {
-    const swatches2 = swatchIds.map((swatchId) => client.readSwatch(swatchId));
-    if (lastSnapshot.current != null && lastSnapshot.current.length === swatches2.length && lastSnapshot.current.every((swatch, idx) => swatches2[idx] === swatch)) {
-      return lastSnapshot.current;
-    }
-    return lastSnapshot.current = swatches2;
-  }
-  const swatches = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
-  useEffect(() => {
-    Promise.all(swatchIds.map((swatchId) => client.fetchSwatch(swatchId))).catch(console.error);
-  }, [client, swatchIds]);
-  return swatches;
-}
-function useFile(fileId) {
-  const client = useMakeswiftClient();
-  const readFile = () => fileId == null ? null : client.readFile(fileId);
-  const file = useSyncExternalStore(client.subscribe, readFile, readFile);
-  useEffect(() => {
-    if (fileId != null)
-      client.fetchFile(fileId);
-  }, [client, fileId]);
-  return file;
-}
-function useFiles(fileIds) {
-  const client = useMakeswiftClient();
-  const lastSnapshot = useRef();
-  function getSnapshot() {
-    const files2 = fileIds.map((fileId) => client.readFile(fileId));
-    if (lastSnapshot.current != null && lastSnapshot.current.length === files2.length && lastSnapshot.current.every((file, idx) => files2[idx] === file)) {
-      return lastSnapshot.current;
-    }
-    return lastSnapshot.current = files2;
-  }
-  const files = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
-  useEffect(() => {
-    Promise.all(fileIds.map((fileId) => client.fetchFile(fileId))).catch(console.error);
-  }, [client, fileIds]);
-  return files;
-}
-function useTypography(typographyId) {
-  const client = useMakeswiftClient();
-  const readTypography = () => typographyId == null ? null : client.readTypography(typographyId);
-  const typography = useSyncExternalStore(client.subscribe, readTypography, readTypography);
-  useEffect(() => {
-    if (typographyId != null)
-      client.fetchTypography(typographyId).catch(console.error);
-  }, [client, typographyId]);
-  return typography;
-}
-function useGlobalElement(globalElementId) {
-  const client = useMakeswiftClient();
-  const readGlobalElement = () => globalElementId == null ? null : client.readGlobalElement(globalElementId);
-  const globalElement = useSyncExternalStore(client.subscribe, readGlobalElement, readGlobalElement);
-  useEffect(() => {
-    if (globalElementId != null)
-      client.fetchGlobalElement(globalElementId).catch(console.error);
-  }, [client, globalElementId]);
-  return globalElement;
-}
-function usePagePathnameSlice(pageId) {
-  const client = useMakeswiftClient();
-  const readPagePathnameSlice = () => pageId == null ? null : client.readPagePathnameSlice(pageId);
-  const pagePathnameSlice = useSyncExternalStore(client.subscribe, readPagePathnameSlice, readPagePathnameSlice);
-  useEffect(() => {
-    if (pageId != null)
-      client.fetchPagePathnameSlice(pageId).catch(console.error);
-  }, [client, pageId]);
-  return pagePathnameSlice;
-}
-function useTable(tableId) {
-  const client = useMakeswiftClient();
-  const readTable = () => tableId == null ? null : client.readTable(tableId);
-  const table = useSyncExternalStore(client.subscribe, readTable, readTable);
-  useEffect(() => {
-    if (tableId != null)
-      client.fetchTable(tableId).catch(console.error);
-  }, [client, tableId]);
-  return table;
-}
-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 _a2, _b, _c, _d;
-  const paddingTop = (_a2 = data.paddingTop) != null ? _a2 : defaultValue.paddingTop;
-  const paddingRight = (_b = data.paddingRight) != null ? _b : defaultValue.paddingRight;
-  const paddingBottom = (_c = data.paddingBottom) != null ? _c : 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 _a2, _b, _c, _d;
-  const marginTop = (_a2 = data.marginTop) != null ? _a2 : defaultValue.marginTop;
-  const marginRight = (_b = data.marginRight) != null ? _b : defaultValue.marginRight;
-  const marginBottom = (_c = data.marginBottom) != null ? _c : 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 _a2, _b, _c, _d;
-  const borderTopLeftRadius = (_a2 = data.borderTopLeftRadius) != null ? _a2 : defaultValue.borderTopLeftRadius;
-  const borderTopRightRadius = (_b = data.borderTopRightRadius) != null ? _b : defaultValue.borderTopRightRadius;
-  const borderBottomRightRadius = (_c = data.borderBottomRightRadius) != null ? _c : 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 _a2, _b, _c, _d;
-  const borderTop = (_a2 = data.borderTop) != null ? _a2 : defaultValue.borderTop;
-  const borderRight = (_b = data.borderRight) != null ? _b : defaultValue.borderRight;
-  const borderBottom = (_c = data.borderBottom) != null ? _c : defaultValue.borderBottom;
-  const borderLeft = (_d = data.borderLeft) != null ? _d : defaultValue.borderLeft;
-  const style = {};
-  if (borderTop != null)
-    style.borderTop = borderSideToString(borderTop);
-  if (borderRight != null)
-    style.borderRight = borderSideToString(borderRight);
-  if (borderBottom != null)
-    style.borderBottom = borderSideToString(borderBottom);
-  if (borderLeft != null)
-    style.borderLeft = borderSideToString(borderLeft);
-  return style;
-}
-function borderSideToString(borderSide) {
-  if (typeof borderSide === "string")
-    return borderSide;
-  if (typeof borderSide === "number")
-    return `${borderSide}px`;
-  const { width, color, style } = borderSide;
-  return `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : "black"}`;
-}
-function responsiveStyle(responsiveValues, join$1, strategy) {
-  return join(responsiveValues, join$1, strategy).reduce((acc, { deviceId, value }) => {
-    const device = getDevice(deviceId);
-    const mediaQuery = getDeviceMediaQuery(device);
-    return __spreadProps(__spreadValues({}, acc), {
-      [mediaQuery]: __spreadValues(__spreadValues({}, acc[mediaQuery]), value)
-    });
-  }, {});
-}
-function responsiveWidth(widthData, defaultValue = "100%") {
-  return __spreadValues({
-    maxWidth: "100%"
-  }, responsiveStyle([widthData], ([width = defaultValue]) => ({
-    width: typeof width === "object" ? `${width.value}${width.unit}` : width
-  })));
-}
-function responsivePadding(paddingData, defaultValue = {}) {
-  return responsiveStyle([paddingData], ([padding = {}]) => paddingPropertyDataToStyle(padding, Object.assign({ paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 }, defaultValue)));
-}
-function responsiveMargin(marginData, defaultValue = {}) {
-  return responsiveStyle([marginData], ([margin = {}]) => marginPropertyDataToStyle(margin, Object.assign({ marginTop: 0, marginRight: "auto", marginBottom: 0, marginLeft: "auto" }, defaultValue)));
-}
-function responsiveBorderRadius(borderRadiusData, defaultValue = {}) {
-  return responsiveStyle([borderRadiusData], ([borderRadius = {}]) => borderRadiusPropertyDataToStyle(borderRadius, Object.assign({
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-    borderBottomLeftRadius: 0
-  }, defaultValue)));
-}
-function responsiveBorder(borderData, defaultValue = {}) {
-  return responsiveStyle([borderData], ([border = {}]) => borderPropertyDataToStyle(border, Object.assign({
-    borderTop: "0px solid black",
-    borderRight: "0px solid black",
-    borderBottom: "0px solid black",
-    borderLeft: "0px solid black"
-  }, defaultValue)));
-}
-const floor = (d) => (v) => Math.floor(10 ** d * v) / 10 ** d;
-function responsiveGridItem(props) {
-  return __spreadValues({
-    display: "flex"
-  }, responsiveStyle([props.grid, props.columnGap, props.rowGap], ([
-    { spans, count } = { spans: [[12]], count: 12 },
-    columnGap = { value: 0, unit: "px" },
-    rowGap = { value: 0, unit: "px" }
-  ]) => {
-    const [rowIndex, columnIndex] = getIndexes(spans, props.index);
-    const firstCol = columnIndex === 0;
-    const lastCol = columnIndex === spans[rowIndex].length - 1;
-    const span = spans[rowIndex][columnIndex];
-    const fraction = floor(5)(span / count);
-    const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`;
-    const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${columnGap.unit} / 2`;
-    const iePrecisionError = "0.01px";
-    const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`;
-    const firstRow = rowIndex === 0;
-    const lastRow = rowIndex === spans.length - 1;
-    return span === 0 ? { display: "none" } : {
-      flexBasis,
-      minWidth: flexBasis,
-      maxWidth: flexBasis,
-      paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
-      paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
-      paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,
-      paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`
-    };
-  }));
-}
-const getBoxShadow = (shadows) => shadows.map(({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blurRadius}px ${spreadRadius}px ${color != null ? colorToString(color) : "rgba(0,0,0,0.2)"}`).filter(Boolean).join();
-function responsiveShadow(value) {
-  return responsiveStyle([value], ([shadow = []]) => ({
-    boxShadow: getBoxShadow(shadow)
-  }));
-}
-function responsiveTextStyle(value) {
-  return responsiveStyle([value], ([
-    textStyle = {
-      fontFamily: null,
-      letterSpacing: null,
-      fontSize: null,
-      fontWeight: null,
-      textTransform: [],
-      fontStyle: []
-    }
-  ]) => {
-    const {
-      fontSize,
-      fontWeight,
-      fontStyle = [],
-      textTransform = [],
-      letterSpacing,
-      fontFamily
-    } = textStyle;
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, fontFamily == null ? {} : { fontFamily: `"${fontFamily}"` }), fontWeight == null ? {} : { fontWeight }), letterSpacing == null ? {} : { letterSpacing }), fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }), textTransform.includes("uppercase") ? { textTransform: "uppercase" } : {}), fontStyle.includes("italic") ? { fontStyle: "italic" } : {});
-  });
-}
-export { responsiveGridItem as A, useTable as B, useFiles as C, DEVICES as D, useTypography as E, FileQuery as F, GraphQLClient as G, shallowMergeFallbacks as H, IntrospectedResourcesQuery as I, MakeswiftProvider as J, MakeswiftClient as M, PagePathnamesByIdQuery as P, SwatchQuery as S, TypographiesQuery as T, TypographyQuery as a, GlobalElementQuery as b, TableQuery as c, deepEqual as d, useStyle as e, findDeviceOverride as f, useSwatches as g, getDeviceMediaQuery as h, colorToString as i, useSwatch as j, useFile as k, lengthPercentageDataToString as l, marginPropertyDataToStyle as m, usePagePathnameSlice as n, getIndexes as o, paddingPropertyDataToStyle as p, responsiveWidth as q, responsiveStyle as r, responsivePadding as s, responsiveMargin as t, useMakeswiftClient as u, responsiveBorderRadius as v, responsiveShadow as w, responsiveBorder as x, useGlobalElement as y, responsiveTextStyle as z };
-//# sourceMappingURL=responsive-style.es.js.map