@makeswift/runtime 0.2.18 → 0.3.0

package/dist/index.es.js

@@ -34,7 +34,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var _e;
+var _c;
 import * as React from "react";
 import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useLayoutEffect, useCallback, Component, useImperativeHandle } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
@@ -45,13 +45,12 @@ import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient
 import { BatchHttpLink } from "@apollo/client/link/batch-http";
 import { KeyUtils } from "slate";
 import { P as PagePathnameSliceFragmentDoc } from "./graphql.es.js";
-import { T as Types, E as ElementID, B as Backgrounds, W as Width, h as ResponsiveIconRadioGroup, M as Margin, P as Padding, i as Border, j as BorderRadius, k as Shadows, G as GapY, l as GapX, m as ResponsiveSelect, n as ResponsiveNumber, o as Checkbox, p as Grid, q as TextInput, L as Link, r as ResponsiveColor, s as TextStyle, t as Images, N as Number, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, I as ImageControlType, C as ColorControlType, S as SlotControlType, a as StyleControlType, Q as WidthControlValueFormats } from "./slot.es.js";
+import { T as Types, E as ElementID, B as Backgrounds, W as Width, h as ResponsiveIconRadioGroup, M as Margin, P as Padding, i as Border, j as BorderRadius, k as Shadows, G as GapY, l as GapX, m as ResponsiveSelect, n as ResponsiveNumber, o as Checkbox, p as Grid, q as TextInput, L as Link, r as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, I as ImageControlType, C as ColorControlType, Q as BorderPropControllerFormat, U as ShadowsPropControllerFormat, X as BorderRadiusPropControllerFormat, Y as MarginPropControllerFormat, Z as PaddingPropControllerFormat, _ as WidthPropControllerFormat, S as SlotControlType, a as StyleControlType } from "./slot.es.js";
 import { S as ShapeControlType, L as ListControlType, b as LinkControlType } from "./control.es.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import styled, { ServerStyleSheet } from "styled-components";
+import { cache, cx } from "@emotion/css";
 import { S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
 import { C as ComboboxControlType } from "./combobox.es.js";
-import { cache, cx, css } from "@emotion/css";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { g as getBox } from "./box-models.es.js";
@@ -285,7 +284,7 @@ const INTROSPECTION_QUERY = gql`
   ${TYPOGRAPHY_FRAGMENT}
 `;
 async function introspect(element, client, store) {
-  var _a, _b, _c;
+  var _a, _b, _c2;
   const descriptors = getPropControllerDescriptors(store.getState());
   const swatchIds = /* @__PURE__ */ new Set();
   const fileIds = /* @__PURE__ */ new Set();
@@ -357,7 +356,7 @@ async function introspect(element, client, store) {
     query: TYPOGRAPHIES_BY_ID,
     variables: { ids: [...typographyIds] }
   });
-  (_c = typographiesResult == null ? void 0 : typographiesResult.data) == null ? void 0 : _c.typographies.forEach((typography) => {
+  (_c2 = typographiesResult == null ? void 0 : typographiesResult.data) == null ? void 0 : _c2.typographies.forEach((typography) => {
     typography == null ? void 0 : typography.style.forEach((style) => {
       var _a2;
       const swatchId = (_a2 = style.value.color) == null ? void 0 : _a2.swatchId;
@@ -928,34 +927,25 @@ if (originalUrl.searchParams.has(searchParamName)) {
 }
 class Document$1 extends NextDocument {
   static async getInitialProps(ctx) {
-    const sheet = new ServerStyleSheet();
-    const originalRenderPage = ctx.renderPage;
-    try {
-      ctx.renderPage = () => originalRenderPage({
-        enhanceApp: (App) => (props) => sheet.collectStyles(/* @__PURE__ */ jsx(App, __spreadValues({}, props)))
-      });
-      const initialProps = await NextDocument.getInitialProps(ctx);
-      KeyUtils.resetGenerator();
-      const {
-        extractCritical
-      } = createEmotionServer(cache);
-      const {
-        ids,
-        css: css2
-      } = extractCritical(initialProps.html);
-      return __spreadProps(__spreadValues({}, initialProps), {
-        styles: /* @__PURE__ */ jsxs(Fragment, {
-          children: [initialProps.styles, sheet.getStyleElement(), /* @__PURE__ */ jsx("style", {
-            "data-emotion": `css ${ids.join(" ")}`,
-            dangerouslySetInnerHTML: {
-              __html: css2
-            }
-          })]
-        })
-      });
-    } finally {
-      sheet.seal();
-    }
+    const initialProps = await NextDocument.getInitialProps(ctx);
+    KeyUtils.resetGenerator();
+    const {
+      extractCritical
+    } = createEmotionServer(cache);
+    const {
+      ids,
+      css
+    } = extractCritical(initialProps.html);
+    return __spreadProps(__spreadValues({}, initialProps), {
+      styles: /* @__PURE__ */ jsxs(Fragment, {
+        children: [initialProps.styles, /* @__PURE__ */ jsx("style", {
+          "data-emotion": `css ${ids.join(" ")}`,
+          dangerouslySetInnerHTML: {
+            __html: css
+          }
+        })]
+      })
+    });
   }
   render() {
     const {
@@ -972,7 +962,7 @@ class Document$1 extends NextDocument {
     });
   }
 }
-const version = "0.2.18";
+const version = "0.3.0";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
@@ -1162,14 +1152,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 {
@@ -1320,7 +1310,7 @@ function registerComponent$c(runtime) {
     props: {
       id: ElementID(),
       backgrounds: Backgrounds(),
-      width: Width(),
+      width: Width({ format: Width.Format.ClassName }),
       height: ResponsiveIconRadioGroup({
         label: "Height",
         options: [
@@ -1343,8 +1333,9 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "flex-start"
       }),
-      margin: Margin(),
+      margin: Margin({ format: Margin.Format.ClassName }),
       padding: Padding({
+        format: Padding.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -1357,9 +1348,9 @@ function registerComponent$c(runtime) {
           }
         ]
       }),
-      border: Border(),
-      borderRadius: BorderRadius(),
-      boxShadow: Shadows(),
+      border: Border({ format: Border.Format.ClassName }),
+      borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),
+      boxShadow: Shadows({ format: Shadows.Format.ClassName }),
       rowGap: GapY((props) => ({
         hidden: props.children == null
       })),
@@ -1506,7 +1497,7 @@ function registerComponent$b(runtime) {
       }),
       textStyle: TextStyle(),
       width: Width(),
-      margin: Margin()
+      margin: Margin({ format: Margin.Format.ClassName })
     }
   });
 }
@@ -1524,8 +1515,11 @@ function registerComponent$a(runtime) {
           { key: uuid(), props: {} }
         ]
       }),
-      width: Width({ defaultValue: { value: 400, unit: "px" } }),
-      margin: Margin(),
+      width: Width({
+        format: Width.Format.ClassName,
+        defaultValue: { value: 400, unit: "px" }
+      }),
+      margin: Margin({ format: Margin.Format.ClassName }),
       pageSize: ResponsiveNumber((props) => {
         var _a;
         const images = props.images;
@@ -1565,7 +1559,7 @@ function registerComponent$a(runtime) {
         defaultValue: { value: 0, unit: "px" }
       }),
       autoplay: Checkbox({ label: "Autoplay" }),
-      delay: Number((props) => ({
+      delay: Number$1((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
@@ -1600,8 +1594,8 @@ function registerComponent$a(runtime) {
         placeholder: "black",
         hidden: props.showDots === false
       })),
-      slideBorder: Border(),
-      slideBorderRadius: BorderRadius()
+      slideBorder: Border({ format: Border.Format.ClassName }),
+      slideBorderRadius: BorderRadius({ format: BorderRadius.Format.ClassName })
     }
   });
 }
@@ -1674,8 +1668,11 @@ function registerComponent$9(runtime) {
         label: "Label color",
         placeholder: "black"
       }),
-      width: Width({ defaultValue: { value: 560, unit: "px" } }),
-      margin: Margin(),
+      width: Width({
+        format: Width.Format.ClassName,
+        defaultValue: { value: 560, unit: "px" }
+      }),
+      margin: Margin({ format: Margin.Format.ClassName }),
       daysLabel: TextInput({ label: "Days label", placeholder: "Days" }),
       hoursLabel: TextInput({ label: "Hours label", placeholder: "Hours" }),
       minutesLabel: TextInput({
@@ -1713,8 +1710,11 @@ function registerComponent$8(runtime) {
         options: [{ value: "px", label: "Pixels", icon: "Px16" }]
       }),
       color: ResponsiveColor({ placeholder: "black" }),
-      width: Width({ defaultValue: { value: 100, unit: "%" } }),
-      margin: Margin()
+      width: Width({
+        format: Width.Format.ClassName,
+        defaultValue: { value: 100, unit: "%" }
+      }),
+      margin: Margin({ format: Margin.Format.ClassName })
     }
   });
 }
@@ -1726,8 +1726,8 @@ function registerComponent$7(runtime) {
     props: {
       id: ElementID(),
       html: TextArea({ label: "Code", rows: 20 }),
-      width: Width({}),
-      margin: Margin()
+      width: Width({ format: Width.Format.ClassName }),
+      margin: Margin({ format: Margin.Format.ClassName })
     }
   });
 }
@@ -1864,9 +1864,10 @@ function registerComponent$6(runtime) {
       })),
       width: Width({
         preset: [{ deviceId: "desktop", value: { value: 550, unit: "px" } }],
-        defaultValue: { value: 100, unit: "%" }
+        defaultValue: { value: 100, unit: "%" },
+        format: Width.Format.ClassName
       }),
-      margin: Margin()
+      margin: Margin({ format: Margin.Format.ClassName })
     }
   });
 }
@@ -1880,11 +1881,11 @@ function registerComponent$5(runtime) {
       altText: TextInput({ label: "Alt text" }),
       link: Link({ label: "On click" }),
       width: Width(),
-      margin: Margin(),
-      padding: Padding(),
-      border: Border(),
-      borderRadius: BorderRadius(),
-      boxShadow: Shadows(),
+      margin: Margin({ format: Margin.Format.ClassName }),
+      padding: Padding({ format: Padding.Format.ClassName }),
+      border: Border({ format: Border.Format.ClassName }),
+      borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),
+      boxShadow: Shadows({ format: Shadows.Format.ClassName }),
       opacity: ResponsiveOpacity()
     }
   });
@@ -1976,8 +1977,11 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      width: Width({ defaultValue: { value: 100, unit: "%" } }),
-      margin: Margin()
+      width: Width({
+        format: Width.Format.ClassName,
+        defaultValue: { value: 100, unit: "%" }
+      }),
+      margin: Margin({ format: Margin.Format.ClassName })
     }
   });
 }
@@ -2096,8 +2100,12 @@ function registerComponent$2(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      width: Width({ defaultValue: { value: 100, unit: "%" } }),
+      width: Width({
+        format: Width.Format.ClassName,
+        defaultValue: { value: 100, unit: "%" }
+      }),
       margin: Margin({
+        format: Margin.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -2163,10 +2171,12 @@ function registerComponent$1(runtime) {
         }
       })),
       width: Width({
+        format: Width.Format.ClassName,
         preset: [{ deviceId: "desktop", value: { value: 700, unit: "px" } }],
         defaultValue: { value: 100, unit: "%" }
       }),
       margin: Margin({
+        format: Margin.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -2190,9 +2200,12 @@ function registerComponent(runtime) {
     props: {
       id: ElementID(),
       video: Video({ preset: { controls: true } }),
-      width: Width({ defaultValue: { value: 560, unit: "px" } }),
-      margin: Margin(),
-      borderRadius: BorderRadius()
+      width: Width({
+        format: Width.Format.ClassName,
+        defaultValue: { value: 560, unit: "px" }
+      }),
+      margin: Margin({ format: Margin.Format.ClassName }),
+      borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName })
     }
   });
 }
@@ -2227,149 +2240,6 @@ function registerBuiltinComponents(runtime) {
     unregisterVideoComponent();
   };
 }
-var _path;
-function _extends() {
-  _extends = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-var SvgWarning20 = function SvgWarning202(props) {
-  return /* @__PURE__ */ React.createElement("svg", _extends({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /* @__PURE__ */ React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M2.89864 18H17.1014C18.4183 18 19.2633 16.6003 18.65 15.4349L11.5486 1.94236C10.8925 0.69577 9.10749 0.695766 8.45139 1.94236L1.35003 15.4349C0.736692 16.6003 1.58174 18 2.89864 18ZM9 6C9 5.44772 9.44771 5 10 5C10.5523 5 11 5.44772 11 6V11C11 11.5523 10.5523 12 10 12C9.44771 12 9 11.5523 9 11V6ZM11.25 14.75C11.25 15.4404 10.6904 16 10 16C9.30964 16 8.75 15.4404 8.75 14.75C8.75 14.0596 9.30964 13.5 10 13.5C10.6904 13.5 11.25 14.0596 11.25 14.75Z"
-  })));
-};
-const ErrorDiv = styled("div")`
-  width: 100%;
-  height: 54px;
-  background-color: #fcedf2;
-  border-radius: 6px;
-  padding: 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #c73e6d;
-  fill: currentColor;
-  font-family: Heebo, sans-serif;
-  font-size: 16px;
-`;
-const FallbackComponent = forwardRef(function FallbackComponent2({
-  text
-}, ref) {
-  return /* @__PURE__ */ jsxs(ErrorDiv, {
-    ref,
-    children: [/* @__PURE__ */ jsx(SvgWarning20, {}), /* @__PURE__ */ jsx("span", {
-      children: text
-    })]
-  });
-});
-function isNonNullable(value) {
-  return value != null;
-}
-function mapSideColor(swatches, _c) {
-  var _d = _c, { color } = _d, restOfSide = __objRest(_d, ["color"]);
-  return __spreadProps(__spreadValues({}, restOfSide), {
-    color: color && {
-      alpha: color.alpha,
-      swatch: swatches.find((s) => s && s.id === color.swatchId)
-    }
-  });
-}
-function useBorder(value) {
-  const swatchIds = value == null ? [] : [
-    ...Array.from(new Set(value.map(({ value: { borderTop, borderLeft, borderBottom, borderRight } }) => [
-      borderTop && borderTop.color && borderTop.color.swatchId,
-      borderBottom && borderBottom.color && borderBottom.color.swatchId,
-      borderLeft && borderLeft.color && borderLeft.color.swatchId,
-      borderRight && borderRight.color && borderRight.color.swatchId
-    ]).reduce((a, b) => a.concat(b)).filter(isNonNullable)))
-  ];
-  const skip = value == null || swatchIds.length === 0;
-  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
-  if (value == null || error != null)
-    return null;
-  const { swatches = [] } = data;
-  return value.map((_a) => {
-    var _b = _a, { value: { borderTop, borderBottom, borderLeft, borderRight } } = _b, rest = __objRest(_b, ["value"]);
-    return __spreadProps(__spreadValues({}, rest), {
-      value: {
-        borderTop: borderTop && mapSideColor(swatches, borderTop),
-        borderBottom: borderBottom && mapSideColor(swatches, borderBottom),
-        borderLeft: borderLeft && mapSideColor(swatches, borderLeft),
-        borderRight: borderRight && mapSideColor(swatches, borderRight)
-      }
-    });
-  });
-}
-function useResponsiveColor(color) {
-  const swatchIds = color == null ? [] : [...Array.from(new Set(color.map(({ value: v }) => v && v.swatchId).filter(isNonNullable)))];
-  const skip = swatchIds.length === 0;
-  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
-  if (color == null || error != null)
-    return null;
-  const { swatches = [] } = data;
-  return color.map((_a) => {
-    var _b = _a, { value: v } = _b, rest = __objRest(_b, ["value"]);
-    const { swatchId, alpha } = v;
-    const swatch = swatches.find((s) => s && s.id === swatchId);
-    return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
-  }).filter(isNonNullable);
-}
-function useFile(fileId) {
-  const { error, data = {} } = useQuery(FILE_BY_ID, {
-    skip: fileId == null,
-    variables: { id: fileId }
-  });
-  if (fileId == null || error != null)
-    return null;
-  return data.file;
-}
-const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
-function usePage(pageId) {
-  const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {
-    skip: pageId == null,
-    variables: { ids: [pageId] }
-  });
-  if (pageId == null || error != null)
-    return null;
-  const { pagePathnamesById: [page] = [] } = data;
-  return page;
-}
-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 colorToString(color) {
-  return color && color.swatch ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.alpha})` : "";
-}
 function murmur2(str) {
   var h = 0;
   var k, i = 0, len = str.length;
@@ -2630,7 +2500,7 @@ var insertStyles = function insertStyles2(cache2, serialized, isStringTag) {
 };
 const isServer = typeof window === "undefined";
 const useInsertionEffectSpecifier = "useInsertionEffect";
-const useInsertionEffect = (_e = React[useInsertionEffectSpecifier]) != null ? _e : React.useLayoutEffect;
+const useInsertionEffect = (_c = React[useInsertionEffectSpecifier]) != null ? _c : React.useLayoutEffect;
 function useStyle(style) {
   const serialized = serializeStyles([style], cache.registered);
   registerStyles(cache, serialized, false);
@@ -2641,6 +2511,379 @@ function useStyle(style) {
     insertStyles(cache, serialized, false);
   return `${cache.key}-${serialized.name}`;
 }
+var _path;
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+var SvgWarning20 = function SvgWarning202(props) {
+  return /* @__PURE__ */ React.createElement("svg", _extends({
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /* @__PURE__ */ React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.89864 18H17.1014C18.4183 18 19.2633 16.6003 18.65 15.4349L11.5486 1.94236C10.8925 0.69577 9.10749 0.695766 8.45139 1.94236L1.35003 15.4349C0.736692 16.6003 1.58174 18 2.89864 18ZM9 6C9 5.44772 9.44771 5 10 5C10.5523 5 11 5.44772 11 6V11C11 11.5523 10.5523 12 10 12C9.44771 12 9 11.5523 9 11V6ZM11.25 14.75C11.25 15.4404 10.6904 16 10 16C9.30964 16 8.75 15.4404 8.75 14.75C8.75 14.0596 9.30964 13.5 10 13.5C10.6904 13.5 11.25 14.0596 11.25 14.75Z"
+  })));
+};
+const FallbackComponent = forwardRef(function FallbackComponent2({
+  text
+}, ref) {
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: useStyle({
+      width: "100%",
+      height: 54,
+      backgroundColor: "#fcedf2",
+      borderRadius: 6,
+      padding: 16,
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      color: "#c73e6d",
+      fill: "currentColor",
+      fontFamily: "Heebo, sans-serif",
+      fontSize: 16
+    }),
+    children: [/* @__PURE__ */ jsx(SvgWarning20, {}), /* @__PURE__ */ jsx("span", {
+      children: text
+    })]
+  });
+});
+function isNonNullable(value) {
+  return value != null;
+}
+function mapSideColor(swatches, _d) {
+  var _e = _d, { color } = _e, restOfSide = __objRest(_e, ["color"]);
+  return __spreadProps(__spreadValues({}, restOfSide), {
+    color: color && {
+      alpha: color.alpha,
+      swatch: swatches.find((s) => s && s.id === color.swatchId)
+    }
+  });
+}
+function useBorder(value) {
+  const swatchIds = value == null ? [] : [
+    ...Array.from(new Set(value.map(({ value: { borderTop, borderLeft, borderBottom, borderRight } }) => [
+      borderTop && borderTop.color && borderTop.color.swatchId,
+      borderBottom && borderBottom.color && borderBottom.color.swatchId,
+      borderLeft && borderLeft.color && borderLeft.color.swatchId,
+      borderRight && borderRight.color && borderRight.color.swatchId
+    ]).reduce((a, b) => a.concat(b)).filter(isNonNullable)))
+  ];
+  const skip = value == null || swatchIds.length === 0;
+  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
+  if (value == null || error != null)
+    return null;
+  const { swatches = [] } = data;
+  return value.map((_a) => {
+    var _b = _a, { value: { borderTop, borderBottom, borderLeft, borderRight } } = _b, rest = __objRest(_b, ["value"]);
+    return __spreadProps(__spreadValues({}, rest), {
+      value: {
+        borderTop: borderTop && mapSideColor(swatches, borderTop),
+        borderBottom: borderBottom && mapSideColor(swatches, borderBottom),
+        borderLeft: borderLeft && mapSideColor(swatches, borderLeft),
+        borderRight: borderRight && mapSideColor(swatches, borderRight)
+      }
+    });
+  });
+}
+const ShadowDefaultValue = {
+  inset: false,
+  offsetX: 0,
+  offsetY: 2,
+  blurRadius: 4,
+  spreadRadius: 0,
+  color: null
+};
+function useBoxShadow(value) {
+  const swatchIds = value == null ? [] : [
+    ...Array.from(new Set(value.map(({ value: shadows }) => shadows.map(({ payload: { color } }) => color && color.swatchId)).reduce((a, b) => a.concat(b), []).filter(isNonNullable)))
+  ];
+  const skip = value == null || swatchIds.length === 0;
+  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
+  if (value == null || error != null)
+    return null;
+  const { swatches = [] } = data;
+  return value.map((_a) => {
+    var _b = _a, { value: shadows } = _b, restOfValue = __objRest(_b, ["value"]);
+    return __spreadProps(__spreadValues({}, restOfValue), {
+      value: shadows.map((_a2) => {
+        var _b2 = _a2, {
+          payload: { color, inset, offsetX, offsetY, blurRadius, spreadRadius }
+        } = _b2, restOfShadow = __objRest(_b2, [
+          "payload"
+        ]);
+        return __spreadProps(__spreadValues({}, restOfShadow), {
+          payload: {
+            color: color != null ? {
+              swatch: swatches.find((s) => s && s.id === color.swatchId),
+              alpha: color.alpha
+            } : null,
+            inset: inset != null ? inset : ShadowDefaultValue.inset,
+            offsetX: offsetX != null ? offsetX : ShadowDefaultValue.offsetX,
+            offsetY: offsetY != null ? offsetY : ShadowDefaultValue.offsetY,
+            blurRadius: blurRadius != null ? blurRadius : ShadowDefaultValue.blurRadius,
+            spreadRadius: spreadRadius != null ? spreadRadius : ShadowDefaultValue.spreadRadius
+          }
+        });
+      })
+    });
+  });
+}
+function useResponsiveColor(color) {
+  const swatchIds = color == null ? [] : [...Array.from(new Set(color.map(({ value: v }) => v && v.swatchId).filter(isNonNullable)))];
+  const skip = swatchIds.length === 0;
+  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
+  if (color == null || error != null)
+    return null;
+  const { swatches = [] } = data;
+  return color.map((_a) => {
+    var _b = _a, { value: v } = _b, rest = __objRest(_b, ["value"]);
+    const { swatchId, alpha } = v;
+    const swatch = swatches.find((s) => s && s.id === swatchId);
+    return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
+  }).filter(isNonNullable);
+}
+function useFile(fileId) {
+  const { error, data = {} } = useQuery(FILE_BY_ID, {
+    skip: fileId == null,
+    variables: { id: fileId }
+  });
+  if (fileId == null || error != null)
+    return null;
+  return data.file;
+}
+const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
+function usePage(pageId) {
+  const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {
+    skip: pageId == null,
+    variables: { ids: [pageId] }
+  });
+  if (pageId == null || error != null)
+    return null;
+  const { pagePathnamesById: [page] = [] } = data;
+  return page;
+}
+const getIndexes = (spans, index) => {
+  const flattened = spans.reduce((a, s) => a.concat(s), []);
+  if (index < 0 || index > flattened.length)
+    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)
+    style.paddingTop = lengthDataToString(paddingTop);
+  if (paddingRight)
+    style.paddingRight = lengthDataToString(paddingRight);
+  if (paddingBottom)
+    style.paddingBottom = lengthDataToString(paddingBottom);
+  if (paddingLeft)
+    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)
+    style.marginTop = lengthDataToString(marginTop);
+  if (marginRight)
+    style.marginRight = lengthDataToString(marginRight);
+  if (marginBottom)
+    style.marginBottom = lengthDataToString(marginBottom);
+  if (marginLeft)
+    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) {
+    style.borderTopLeftRadius = lengthPercentageDataToString(borderTopLeftRadius);
+  }
+  if (borderTopRightRadius) {
+    style.borderTopRightRadius = lengthPercentageDataToString(borderTopRightRadius);
+  }
+  if (borderBottomRightRadius) {
+    style.borderBottomRightRadius = lengthPercentageDataToString(borderBottomRightRadius);
+  }
+  if (borderBottomLeftRadius) {
+    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)
+    style.borderTop = borderSideToString(borderTop);
+  if (borderRight)
+    style.borderRight = borderSideToString(borderRight);
+  if (borderBottom)
+    style.borderBottom = borderSideToString(borderBottom);
+  if (borderLeft)
+    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 }), fontWeight == null ? {} : { fontWeight }), letterSpacing == null ? {} : { letterSpacing }), fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }), textTransform.includes("uppercase") ? { textTransform: "uppercase" } : {}), fontStyle.includes("italic") ? { fontStyle: "italic" } : {});
+  });
+}
 function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
   return __spreadValues(__spreadValues({}, properties.includes(StyleControlProperty.Width) && {
@@ -2653,52 +2896,40 @@ 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, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+    var _a, _b, _c2, _d, _e, _f, _g, _h, _i, _j, _k;
     return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
-    }), properties.includes(StyleControlProperty.Margin) && {
-      marginTop: (_b = marginToString(margin == null ? void 0 : margin.marginTop)) != null ? _b : 0,
-      marginRight: (_c = marginToString(margin == null ? void 0 : margin.marginRight)) != null ? _c : "auto",
-      marginBottom: (_d = marginToString(margin == null ? void 0 : margin.marginBottom)) != null ? _d : 0,
-      marginLeft: (_e2 = marginToString(margin == null ? void 0 : margin.marginLeft)) != null ? _e2 : "auto"
-    }), properties.includes(StyleControlProperty.Padding) && {
-      paddingTop: (_f = paddingToString(padding == null ? void 0 : padding.paddingTop)) != null ? _f : 0,
-      paddingRight: (_g = paddingToString(padding == null ? void 0 : padding.paddingRight)) != null ? _g : 0,
-      paddingBottom: (_h = paddingToString(padding == null ? void 0 : padding.paddingBottom)) != null ? _h : 0,
-      paddingLeft: (_i = paddingToString(padding == null ? void 0 : padding.paddingLeft)) != null ? _i : 0
-    }), properties.includes(StyleControlProperty.Border) && {
-      borderTop: (_j = borderSideToString(border == null ? void 0 : border.borderTop)) != null ? _j : "0 solid black",
-      borderRight: (_k = borderSideToString(border == null ? void 0 : border.borderRight)) != null ? _k : "0 solid black",
-      borderBottom: (_l = borderSideToString(border == null ? void 0 : border.borderBottom)) != null ? _l : "0 solid black",
-      borderLeft: (_m = borderSideToString(border == null ? void 0 : border.borderLeft)) != null ? _m : "0 solid black"
+    }), properties.includes(StyleControlProperty.Margin) && margin != null && marginPropertyDataToStyle(margin, {
+      marginTop: 0,
+      marginRight: "auto",
+      marginBottom: 0,
+      marginLeft: "auto"
+    })), properties.includes(StyleControlProperty.Padding) && padding != null && paddingPropertyDataToStyle(padding, {
+      paddingTop: 0,
+      paddingRight: 0,
+      paddingBottom: 0,
+      paddingLeft: 0
+    })), properties.includes(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(StyleControlProperty.BorderRadius) && {
-      borderTopLeftRadius: (_n = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopLeftRadius)) != null ? _n : 0,
-      borderTopRightRadius: (_o = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _o : 0,
-      borderBottomRightRadius: (_p = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomRightRadius)) != null ? _p : 0,
-      borderBottomLeftRadius: (_q = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomLeftRadius)) != null ? _q : 0
+      borderTopLeftRadius: (_f = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopLeftRadius)) != null ? _f : 0,
+      borderTopRightRadius: (_g = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _g : 0,
+      borderBottomRightRadius: (_h = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomRightRadius)) != null ? _h : 0,
+      borderBottomLeftRadius: (_i = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomLeftRadius)) != null ? _i : 0
     }), properties.includes(StyleControlProperty.TextStyle) && __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (textStyle == null ? void 0 : textStyle.fontFamily) && { fontFamily: textStyle.fontFamily }), (textStyle == null ? void 0 : textStyle.letterSpacing) && { letterSpacing: textStyle.letterSpacing }), (textStyle == null ? void 0 : textStyle.fontSize) && { fontSize: fontSizeToString(textStyle.fontSize) }), (textStyle == null ? void 0 : textStyle.fontWeight) && { fontWeight: textStyle.fontWeight }), {
-      textTransform: (_r = textStyle == null ? void 0 : textStyle.textTransform) != null ? _r : [],
-      fontStyle: (_s = textStyle == null ? void 0 : textStyle.fontStyle) != null ? _s : []
+      textTransform: (_j = textStyle == null ? void 0 : textStyle.textTransform) != null ? _j : [],
+      fontStyle: (_k = textStyle == null ? void 0 : textStyle.fontStyle) != null ? _k : []
     }));
   }));
   function widthToString(widthProperty) {
     if (widthProperty == null)
       return null;
-    return `${widthProperty.value}${widthProperty.unit}`;
-  }
-  function marginToString(marginProperty) {
-    if (marginProperty == null)
-      return null;
-    if (marginProperty === "auto")
-      return marginProperty;
-    return `${marginProperty.value}${marginProperty.unit}`;
-  }
-  function paddingToString(paddingProperty) {
-    if (paddingProperty == null)
-      return null;
-    return `${paddingProperty.value}${paddingProperty.unit}`;
+    return lengthPercentageDataToString(widthProperty);
   }
-  function borderSideToString(borderSide) {
+  function borderSideToString2(borderSide) {
     if (borderSide == null)
       return null;
     const { width, color, style: style2 } = borderSide;
@@ -2707,7 +2938,7 @@ function useStyleControlCssObject(style, controlDefinition) {
   function borderRadiusToString(borderRadius) {
     if (borderRadius == null)
       return null;
-    return `${borderRadius.value}${borderRadius.unit}`;
+    return lengthPercentageDataToString(borderRadius);
   }
   function fontSizeToString(fontSize) {
     return `${fontSize.value}${fontSize.unit}`;
@@ -2942,18 +3173,6 @@ function ControlValue({
       return children(data);
   }
 }
-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 useSlot(data, control) {
   if (data == null || data.elements.length === 0) {
     return /* @__PURE__ */ jsx(Slot.Placeholder, {
@@ -3116,13 +3335,25 @@ function pollBoxModel({
     onBoxModelChange(null);
   };
 }
-function useDeviceMode() {
-  return "desktop";
+function useWidthStyle(value, descriptor) {
+  return useStyle(responsiveWidth(value, descriptor.options.defaultValue));
+}
+function usePaddingStyle(value) {
+  return useStyle(responsivePadding(value));
+}
+function useMarginStyle(value) {
+  return useStyle(responsiveMargin(value));
+}
+function useBorderRadiusStyle(value) {
+  return useStyle(responsiveBorderRadius(value));
+}
+function useShadowsStyle(value) {
+  const shadowValue = useBoxShadow(value);
+  return useStyle(responsiveShadow(shadowValue != null ? shadowValue : void 0));
 }
-function useWidth(value, descriptor, props) {
-  const deviceMode = useDeviceMode();
-  const options = useMemo(() => typeof descriptor.options === "function" ? descriptor.options(props, deviceMode) : descriptor.options, [props, deviceMode]);
-  return useMemo(() => options.format === WidthControlValueFormats.ClassName ? css(responsiveWidth(value, options.defaultValue)) : value, [value, options.defaultValue, options.format]);
+function useBorderStyle(value) {
+  const borderData = useBorder(value);
+  return useStyle(responsiveBorder(borderData != null ? borderData : void 0));
 }
 function PropsValue({
   element,
@@ -3178,13 +3409,95 @@ function PropsValue({
         }, descriptor.type);
       }
       case Types.Width:
-        return /* @__PURE__ */ jsx(RenderHook, {
-          hook: useWidth,
-          parameters: [props[propName], descriptor, props],
-          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
-            [propName]: value
-          }))
-        }, descriptor.type);
+        switch (descriptor.options.format) {
+          case WidthPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsx(RenderHook, {
+              hook: useWidthStyle,
+              parameters: [props[propName], descriptor],
+              children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+                [propName]: value
+              }))
+            }, descriptor.type);
+          default:
+            return renderFn(__spreadProps(__spreadValues({}, propsValue), {
+              [propName]: props[propName]
+            }));
+        }
+      case Types.Padding:
+        switch (descriptor.options.format) {
+          case PaddingPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsx(RenderHook, {
+              hook: usePaddingStyle,
+              parameters: [props[propName]],
+              children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+                [propName]: value
+              }))
+            }, descriptor.type);
+          default:
+            return renderFn(__spreadProps(__spreadValues({}, propsValue), {
+              [propName]: props[propName]
+            }));
+        }
+      case Types.Margin:
+        switch (descriptor.options.format) {
+          case MarginPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsx(RenderHook, {
+              hook: useMarginStyle,
+              parameters: [props[propName]],
+              children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+                [propName]: value
+              }))
+            }, descriptor.type);
+          default:
+            return renderFn(__spreadProps(__spreadValues({}, propsValue), {
+              [propName]: props[propName]
+            }));
+        }
+      case Types.BorderRadius:
+        switch (descriptor.options.format) {
+          case BorderRadiusPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsx(RenderHook, {
+              hook: useBorderRadiusStyle,
+              parameters: [props[propName]],
+              children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+                [propName]: value
+              }))
+            }, descriptor.type);
+          default:
+            return renderFn(__spreadProps(__spreadValues({}, propsValue), {
+              [propName]: props[propName]
+            }));
+        }
+      case Types.Shadows:
+        switch (descriptor.options.format) {
+          case ShadowsPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsx(RenderHook, {
+              hook: useShadowsStyle,
+              parameters: [props[propName]],
+              children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+                [propName]: value
+              }))
+            }, descriptor.type);
+          default:
+            return renderFn(__spreadProps(__spreadValues({}, propsValue), {
+              [propName]: props[propName]
+            }));
+        }
+      case Types.Border:
+        switch (descriptor.options.format) {
+          case BorderPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsx(RenderHook, {
+              hook: useBorderStyle,
+              parameters: [props[propName]],
+              children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+                [propName]: value
+              }))
+            }, descriptor.type);
+          default:
+            return renderFn(__spreadProps(__spreadValues({}, propsValue), {
+              [propName]: props[propName]
+            }));
+        }
       case Types.ResponsiveColor:
         return /* @__PURE__ */ jsx(RenderHook, {
           hook: useResponsiveColor,
@@ -3486,5 +3799,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { Document$1 as $, Alignments as A, TYPOGRAPHIES_BY_ID as B, Contrasts as C, DocumentReference as D, Element as E, SWATCHES_BY_ID as F, shallowMergeFallbacks as G, join as H, getDevice as I, getDeviceMediaQuery as J, getIndexes as K, isNonNullable as L, MakeswiftComponentType as M, FILES_BY_ID as N, useElementId as O, PageProvider as P, deepEqual as Q, RuntimeProvider as R, SITE_FONTS_QUERY as S, TABLE_BY_ID as T, MakeswiftClient as U, getStaticPaths as V, getStaticProps as W, getServerSideProps as X, Page as Y, Makeswift as Z, PreviewModeScript as _, ReactRuntime as a, MakeswiftApiHandler as a0, forwardNextDynamicRef as a1, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useResponsiveColor as k, useFile as l, usePage as m, PAGE_SNIPPETS_QUERY as n, Page$1 as o, colorToString as p, useIsomorphicLayoutEffect as q, Shapes as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useQuery as v, useMutation as w, Provider as x, DEVICES as y, findDeviceOverride as z };
+export { getStaticProps as $, responsiveGridItem as A, useQuery as B, Contrasts as C, DocumentReference as D, Element as E, useMutation as F, Provider as G, Alignments as H, DEVICES as I, findDeviceOverride as J, serializeStyles as K, insertStyles as L, MakeswiftComponentType as M, TYPOGRAPHIES_BY_ID as N, SWATCHES_BY_ID as O, PageProvider as P, shallowMergeFallbacks as Q, RuntimeProvider as R, SITE_FONTS_QUERY as S, TABLE_BY_ID as T, isNonNullable as U, FILES_BY_ID as V, getDeviceMediaQuery as W, useElementId as X, deepEqual as Y, MakeswiftClient as Z, getStaticPaths as _, ReactRuntime as a, getServerSideProps as a0, Page as a1, Makeswift as a2, PreviewModeScript as a3, Document$1 as a4, MakeswiftApiHandler as a5, forwardNextDynamicRef as a6, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, useFile as m, usePage as n, PAGE_SNIPPETS_QUERY as o, Page$1 as p, useStyle as q, responsiveStyle as r, responsiveWidth as s, responsiveTextStyle as t, useIsInBuilder as u, colorToString as v, useIsomorphicLayoutEffect as w, Shapes as x, Sizes as y, useFormContext as z };
 //# sourceMappingURL=index.es.js.map