@makeswift/runtime 0.2.18 → 0.3.0

package/dist/index.cjs.js

@@ -35,7 +35,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var _e;
+var _c;
 var React = require("react");
 var withSelector = require("use-sync-external-store/shim/with-selector");
 var reactPage = require("./react-page.cjs.js");
@@ -48,10 +48,9 @@ var graphql = require("./graphql.cjs.js");
 var slot = require("./slot.cjs.js");
 var control = require("./control.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
-var styled = require("styled-components");
+var css = require("@emotion/css");
 var textInput = require("./text-input.cjs.js");
 var combobox = require("./combobox.cjs.js");
-var css = require("@emotion/css");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
 var boxModels = require("./box-models.cjs.js");
@@ -91,7 +90,6 @@ function _interopNamespace(e) {
 }
 var React__namespace = /* @__PURE__ */ _interopNamespace(React);
 var dynamic__default = /* @__PURE__ */ _interopDefaultLegacy(dynamic);
-var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
 var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
 var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
 var parse__default = /* @__PURE__ */ _interopDefaultLegacy(parse);
@@ -320,7 +318,7 @@ const INTROSPECTION_QUERY = client.gql`
   ${TYPOGRAPHY_FRAGMENT}
 `;
 async function introspect(element, client2, store) {
-  var _a, _b, _c;
+  var _a, _b, _c2;
   const descriptors = reactPage.getPropControllerDescriptors(store.getState());
   const swatchIds = /* @__PURE__ */ new Set();
   const fileIds = /* @__PURE__ */ new Set();
@@ -392,7 +390,7 @@ async function introspect(element, client2, 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;
@@ -963,34 +961,25 @@ if (originalUrl.searchParams.has(searchParamName)) {
 }
 class Document$1 extends NextDocument__default["default"] {
   static async getInitialProps(ctx) {
-    const sheet = new styled.ServerStyleSheet();
-    const originalRenderPage = ctx.renderPage;
-    try {
-      ctx.renderPage = () => originalRenderPage({
-        enhanceApp: (App) => (props) => sheet.collectStyles(/* @__PURE__ */ jsxRuntime.jsx(App, __spreadValues({}, props)))
-      });
-      const initialProps = await NextDocument__default["default"].getInitialProps(ctx);
-      slate.KeyUtils.resetGenerator();
-      const {
-        extractCritical
-      } = createEmotionServer__default["default"](css.cache);
-      const {
-        ids,
-        css: css$1
-      } = extractCritical(initialProps.html);
-      return __spreadProps(__spreadValues({}, initialProps), {
-        styles: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [initialProps.styles, sheet.getStyleElement(), /* @__PURE__ */ jsxRuntime.jsx("style", {
-            "data-emotion": `css ${ids.join(" ")}`,
-            dangerouslySetInnerHTML: {
-              __html: css$1
-            }
-          })]
-        })
-      });
-    } finally {
-      sheet.seal();
-    }
+    const initialProps = await NextDocument__default["default"].getInitialProps(ctx);
+    slate.KeyUtils.resetGenerator();
+    const {
+      extractCritical
+    } = createEmotionServer__default["default"](css.cache);
+    const {
+      ids,
+      css: css$1
+    } = extractCritical(initialProps.html);
+    return __spreadProps(__spreadValues({}, initialProps), {
+      styles: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [initialProps.styles, /* @__PURE__ */ jsxRuntime.jsx("style", {
+          "data-emotion": `css ${ids.join(" ")}`,
+          dangerouslySetInnerHTML: {
+            __html: css$1
+          }
+        })]
+      })
+    });
   }
   render() {
     const {
@@ -1007,7 +996,7 @@ class Document$1 extends NextDocument__default["default"] {
     });
   }
 }
-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";
 }
@@ -1197,14 +1186,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 {
@@ -1357,7 +1346,7 @@ function registerComponent$c(runtime) {
     props: {
       id: slot.ElementID(),
       backgrounds: slot.Backgrounds(),
-      width: slot.Width(),
+      width: slot.Width({ format: slot.Width.Format.ClassName }),
       height: slot.ResponsiveIconRadioGroup({
         label: "Height",
         options: [
@@ -1380,8 +1369,9 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "flex-start"
       }),
-      margin: slot.Margin(),
+      margin: slot.Margin({ format: slot.Margin.Format.ClassName }),
       padding: slot.Padding({
+        format: slot.Padding.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -1394,9 +1384,9 @@ function registerComponent$c(runtime) {
           }
         ]
       }),
-      border: slot.Border(),
-      borderRadius: slot.BorderRadius(),
-      boxShadow: slot.Shadows(),
+      border: slot.Border({ format: slot.Border.Format.ClassName }),
+      borderRadius: slot.BorderRadius({ format: slot.BorderRadius.Format.ClassName }),
+      boxShadow: slot.Shadows({ format: slot.Shadows.Format.ClassName }),
       rowGap: slot.GapY((props) => ({
         hidden: props.children == null
       })),
@@ -1545,7 +1535,7 @@ function registerComponent$b(runtime) {
       }),
       textStyle: slot.TextStyle(),
       width: slot.Width(),
-      margin: slot.Margin()
+      margin: slot.Margin({ format: slot.Margin.Format.ClassName })
     }
   });
 }
@@ -1565,8 +1555,11 @@ function registerComponent$a(runtime) {
           { key: uuid__default["default"](), props: {} }
         ]
       }),
-      width: slot.Width({ defaultValue: { value: 400, unit: "px" } }),
-      margin: slot.Margin(),
+      width: slot.Width({
+        format: slot.Width.Format.ClassName,
+        defaultValue: { value: 400, unit: "px" }
+      }),
+      margin: slot.Margin({ format: slot.Margin.Format.ClassName }),
       pageSize: slot.ResponsiveNumber((props) => {
         var _a;
         const images = props.images;
@@ -1641,8 +1634,8 @@ function registerComponent$a(runtime) {
         placeholder: "black",
         hidden: props.showDots === false
       })),
-      slideBorder: slot.Border(),
-      slideBorderRadius: slot.BorderRadius()
+      slideBorder: slot.Border({ format: slot.Border.Format.ClassName }),
+      slideBorderRadius: slot.BorderRadius({ format: slot.BorderRadius.Format.ClassName })
     }
   });
 }
@@ -1717,8 +1710,11 @@ function registerComponent$9(runtime) {
         label: "Label color",
         placeholder: "black"
       }),
-      width: slot.Width({ defaultValue: { value: 560, unit: "px" } }),
-      margin: slot.Margin(),
+      width: slot.Width({
+        format: slot.Width.Format.ClassName,
+        defaultValue: { value: 560, unit: "px" }
+      }),
+      margin: slot.Margin({ format: slot.Margin.Format.ClassName }),
       daysLabel: slot.TextInput({ label: "Days label", placeholder: "Days" }),
       hoursLabel: slot.TextInput({ label: "Hours label", placeholder: "Hours" }),
       minutesLabel: slot.TextInput({
@@ -1758,8 +1754,11 @@ function registerComponent$8(runtime) {
         options: [{ value: "px", label: "Pixels", icon: "Px16" }]
       }),
       color: slot.ResponsiveColor({ placeholder: "black" }),
-      width: slot.Width({ defaultValue: { value: 100, unit: "%" } }),
-      margin: slot.Margin()
+      width: slot.Width({
+        format: slot.Width.Format.ClassName,
+        defaultValue: { value: 100, unit: "%" }
+      }),
+      margin: slot.Margin({ format: slot.Margin.Format.ClassName })
     }
   });
 }
@@ -1773,8 +1772,8 @@ function registerComponent$7(runtime) {
     props: {
       id: slot.ElementID(),
       html: slot.TextArea({ label: "Code", rows: 20 }),
-      width: slot.Width({}),
-      margin: slot.Margin()
+      width: slot.Width({ format: slot.Width.Format.ClassName }),
+      margin: slot.Margin({ format: slot.Margin.Format.ClassName })
     }
   });
 }
@@ -1913,9 +1912,10 @@ function registerComponent$6(runtime) {
       })),
       width: slot.Width({
         preset: [{ deviceId: "desktop", value: { value: 550, unit: "px" } }],
-        defaultValue: { value: 100, unit: "%" }
+        defaultValue: { value: 100, unit: "%" },
+        format: slot.Width.Format.ClassName
       }),
-      margin: slot.Margin()
+      margin: slot.Margin({ format: slot.Margin.Format.ClassName })
     }
   });
 }
@@ -1931,11 +1931,11 @@ function registerComponent$5(runtime) {
       altText: slot.TextInput({ label: "Alt text" }),
       link: slot.Link({ label: "On click" }),
       width: slot.Width(),
-      margin: slot.Margin(),
-      padding: slot.Padding(),
-      border: slot.Border(),
-      borderRadius: slot.BorderRadius(),
-      boxShadow: slot.Shadows(),
+      margin: slot.Margin({ format: slot.Margin.Format.ClassName }),
+      padding: slot.Padding({ format: slot.Padding.Format.ClassName }),
+      border: slot.Border({ format: slot.Border.Format.ClassName }),
+      borderRadius: slot.BorderRadius({ format: slot.BorderRadius.Format.ClassName }),
+      boxShadow: slot.Shadows({ format: slot.Shadows.Format.ClassName }),
       opacity: slot.ResponsiveOpacity()
     }
   });
@@ -2029,8 +2029,11 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      width: slot.Width({ defaultValue: { value: 100, unit: "%" } }),
-      margin: slot.Margin()
+      width: slot.Width({
+        format: slot.Width.Format.ClassName,
+        defaultValue: { value: 100, unit: "%" }
+      }),
+      margin: slot.Margin({ format: slot.Margin.Format.ClassName })
     }
   });
 }
@@ -2153,8 +2156,12 @@ function registerComponent$2(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      width: slot.Width({ defaultValue: { value: 100, unit: "%" } }),
+      width: slot.Width({
+        format: slot.Width.Format.ClassName,
+        defaultValue: { value: 100, unit: "%" }
+      }),
       margin: slot.Margin({
+        format: slot.Margin.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -2222,10 +2229,12 @@ function registerComponent$1(runtime) {
         }
       })),
       width: slot.Width({
+        format: slot.Width.Format.ClassName,
         preset: [{ deviceId: "desktop", value: { value: 700, unit: "px" } }],
         defaultValue: { value: 100, unit: "%" }
       }),
       margin: slot.Margin({
+        format: slot.Margin.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -2251,9 +2260,12 @@ function registerComponent(runtime) {
     props: {
       id: slot.ElementID(),
       video: slot.Video({ preset: { controls: true } }),
-      width: slot.Width({ defaultValue: { value: 560, unit: "px" } }),
-      margin: slot.Margin(),
-      borderRadius: slot.BorderRadius()
+      width: slot.Width({
+        format: slot.Width.Format.ClassName,
+        defaultValue: { value: 560, unit: "px" }
+      }),
+      margin: slot.Margin({ format: slot.Margin.Format.ClassName }),
+      borderRadius: slot.BorderRadius({ format: slot.BorderRadius.Format.ClassName })
     }
   });
 }
@@ -2288,149 +2300,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__namespace.createElement("svg", _extends({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /* @__PURE__ */ React__namespace.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__default["default"]("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 = React.forwardRef(function FallbackComponent2({
-  text
-}, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(ErrorDiv, {
-    ref,
-    children: [/* @__PURE__ */ jsxRuntime.jsx(SvgWarning20, {}), /* @__PURE__ */ jsxRuntime.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 ? React.useEffect : React.useLayoutEffect;
-function usePage(pageId) {
-  const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {
-    skip: pageId == null,
-    variables: { ids: [pageId] }
-  });
-  if (pageId == null || error != null)
-    return null;
-  const { pagePathnamesById: [page] = [] } = data;
-  return page;
-}
-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;
@@ -2691,7 +2560,7 @@ var insertStyles = function insertStyles2(cache, serialized, isStringTag) {
 };
 const isServer = typeof window === "undefined";
 const useInsertionEffectSpecifier = "useInsertionEffect";
-const useInsertionEffect = (_e = React__namespace[useInsertionEffectSpecifier]) != null ? _e : React__namespace.useLayoutEffect;
+const useInsertionEffect = (_c = React__namespace[useInsertionEffectSpecifier]) != null ? _c : React__namespace.useLayoutEffect;
 function useStyle(style) {
   const serialized = serializeStyles([style], css.cache.registered);
   registerStyles(css.cache, serialized, false);
@@ -2702,6 +2571,379 @@ function useStyle(style) {
     insertStyles(css.cache, serialized, false);
   return `${css.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__namespace.createElement("svg", _extends({
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /* @__PURE__ */ React__namespace.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 = React.forwardRef(function FallbackComponent2({
+  text
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SvgWarning20, {}), /* @__PURE__ */ jsxRuntime.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 ? React.useEffect : React.useLayoutEffect;
+function usePage(pageId) {
+  const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {
+    skip: pageId == null,
+    variables: { ids: [pageId] }
+  });
+  if (pageId == null || error != null)
+    return null;
+  const { pagePathnamesById: [page] = [] } = data;
+  return page;
+}
+const getIndexes = (spans, index) => {
+  const flattened = spans.reduce((a, s) => a.concat(s), []);
+  if (index < 0 || index > flattened.length)
+    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(slot.StyleControlProperty.Width) && {
@@ -2714,52 +2956,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(slot.StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
-    }), properties.includes(slot.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(slot.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(slot.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(slot.StyleControlProperty.Margin) && margin != null && marginPropertyDataToStyle(margin, {
+      marginTop: 0,
+      marginRight: "auto",
+      marginBottom: 0,
+      marginLeft: "auto"
+    })), properties.includes(slot.StyleControlProperty.Padding) && padding != null && paddingPropertyDataToStyle(padding, {
+      paddingTop: 0,
+      paddingRight: 0,
+      paddingBottom: 0,
+      paddingLeft: 0
+    })), properties.includes(slot.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(slot.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(slot.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;
@@ -2768,7 +2998,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}`;
@@ -3003,18 +3233,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, control2) {
   if (data == null || data.elements.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(Slot.Placeholder, {
@@ -3177,13 +3395,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 = React.useMemo(() => typeof descriptor.options === "function" ? descriptor.options(props, deviceMode) : descriptor.options, [props, deviceMode]);
-  return React.useMemo(() => options.format === slot.WidthControlValueFormats.ClassName ? css.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,
@@ -3239,13 +3469,95 @@ function PropsValue({
         }, descriptor.type);
       }
       case slot.Types.Width:
-        return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
-          hook: useWidth,
-          parameters: [props[propName], descriptor, props],
-          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
-            [propName]: value
-          }))
-        }, descriptor.type);
+        switch (descriptor.options.format) {
+          case slot.WidthPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsxRuntime.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 slot.Types.Padding:
+        switch (descriptor.options.format) {
+          case slot.PaddingPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsxRuntime.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 slot.Types.Margin:
+        switch (descriptor.options.format) {
+          case slot.MarginPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsxRuntime.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 slot.Types.BorderRadius:
+        switch (descriptor.options.format) {
+          case slot.BorderRadiusPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsxRuntime.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 slot.Types.Shadows:
+        switch (descriptor.options.format) {
+          case slot.ShadowsPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsxRuntime.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 slot.Types.Border:
+        switch (descriptor.options.format) {
+          case slot.BorderPropControllerFormat.ClassName:
+            return /* @__PURE__ */ jsxRuntime.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 slot.Types.ResponsiveColor:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useResponsiveColor,
@@ -3585,16 +3897,20 @@ exports.colorToString = colorToString;
 exports.deepEqual = deepEqual;
 exports.findDeviceOverride = findDeviceOverride;
 exports.forwardNextDynamicRef = forwardNextDynamicRef;
-exports.getDevice = getDevice;
 exports.getDeviceMediaQuery = getDeviceMediaQuery;
-exports.getIndexes = getIndexes;
 exports.getServerSideProps = getServerSideProps;
 exports.getStaticPaths = getStaticPaths;
 exports.getStaticProps = getStaticProps;
+exports.insertStyles = insertStyles;
 exports.isNonNullable = isNonNullable;
-exports.join = join;
+exports.responsiveGridItem = responsiveGridItem;
+exports.responsiveStyle = responsiveStyle;
+exports.responsiveTextStyle = responsiveTextStyle;
+exports.responsiveWidth = responsiveWidth;
+exports.serializeStyles = serializeStyles;
 exports.shallowMergeFallbacks = shallowMergeFallbacks;
 exports.useBorder = useBorder;
+exports.useBoxShadow = useBoxShadow;
 exports.useElementId = useElementId;
 exports.useFile = useFile;
 exports.useFormContext = useFormContext;
@@ -3605,4 +3921,5 @@ exports.usePage = usePage;
 exports.usePageId = usePageId;
 exports.useQuery = useQuery;
 exports.useResponsiveColor = useResponsiveColor;
+exports.useStyle = useStyle;
 //# sourceMappingURL=index.cjs.js.map