@makeswift/runtime 0.8.4 → 0.8.6

package/dist/responsive-style.cjs.js

@@ -1,917 +0,0 @@
-"use strict";
-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;
-var React = require("react");
-var css = require("@emotion/css");
-var serialize = require("@emotion/serialize");
-var utils = require("@emotion/utils");
-var shim = require("use-sync-external-store/shim");
-var redux = require("redux");
-var thunk = require("redux-thunk");
-var types = require("./types.cjs.js");
-var actions = require("./actions.cjs.js");
-var jsxRuntime = require("react/jsx-runtime");
-function _interopDefaultLegacy(e) {
-  return e && typeof e === "object" && "default" in e ? e : { "default": e };
-}
-function _interopNamespace(e) {
-  if (e && e.__esModule)
-    return e;
-  var n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    Object.keys(e).forEach(function(k) {
-      if (k !== "default") {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function() {
-            return e[k];
-          }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-var React__namespace = /* @__PURE__ */ _interopNamespace(React);
-var thunk__default = /* @__PURE__ */ _interopDefaultLegacy(thunk);
-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 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 _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 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 = React.createContext(new MakeswiftClient({
-  uri: "https://api.makeswift.com/graphql"
-}));
-function useMakeswiftClient() {
-  return React.useContext(Context);
-}
-function MakeswiftProvider({
-  client,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.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__namespace[useInsertionEffectSpecifier]) != null ? _a : 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}`;
-}
-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;
-}
-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" } : {});
-  });
-}
-exports.DEVICES = DEVICES;
-exports.FileQuery = FileQuery;
-exports.GlobalElementQuery = GlobalElementQuery;
-exports.GraphQLClient = GraphQLClient;
-exports.IntrospectedResourcesQuery = IntrospectedResourcesQuery;
-exports.MakeswiftClient = MakeswiftClient;
-exports.MakeswiftProvider = MakeswiftProvider;
-exports.PagePathnamesByIdQuery = PagePathnamesByIdQuery;
-exports.SwatchQuery = SwatchQuery;
-exports.TableQuery = TableQuery;
-exports.TypographiesQuery = TypographiesQuery;
-exports.TypographyQuery = TypographyQuery;
-exports.colorToString = colorToString;
-exports.deepEqual = deepEqual;
-exports.findDeviceOverride = findDeviceOverride;
-exports.getDeviceMediaQuery = getDeviceMediaQuery;
-exports.getIndexes = getIndexes;
-exports.lengthPercentageDataToString = lengthPercentageDataToString;
-exports.marginPropertyDataToStyle = marginPropertyDataToStyle;
-exports.paddingPropertyDataToStyle = paddingPropertyDataToStyle;
-exports.responsiveBorder = responsiveBorder;
-exports.responsiveBorderRadius = responsiveBorderRadius;
-exports.responsiveGridItem = responsiveGridItem;
-exports.responsiveMargin = responsiveMargin;
-exports.responsivePadding = responsivePadding;
-exports.responsiveShadow = responsiveShadow;
-exports.responsiveStyle = responsiveStyle;
-exports.responsiveTextStyle = responsiveTextStyle;
-exports.responsiveWidth = responsiveWidth;
-exports.shallowMergeFallbacks = shallowMergeFallbacks;
-exports.useFile = useFile;
-exports.useFiles = useFiles;
-exports.useGlobalElement = useGlobalElement;
-exports.useMakeswiftClient = useMakeswiftClient;
-exports.usePagePathnameSlice = usePagePathnameSlice;
-exports.useStyle = useStyle;
-exports.useSwatch = useSwatch;
-exports.useSwatches = useSwatches;
-exports.useTable = useTable;
-exports.useTypography = useTypography;
-//# sourceMappingURL=responsive-style.cjs.js.map