@makeswift/runtime 0.8.9 → 0.8.11

package/dist/index.cjs.js

@@ -39,28 +39,26 @@ var _c;
 var React = require("react");
 var withSelector = require("use-sync-external-store/shim/with-selector");
 var dynamic = require("next/dynamic");
-var constants = require("./constants.cjs.js");
+var reactPage = require("./react-page.cjs.js");
 var actions = require("./actions.cjs.js");
 var css = require("@emotion/css");
 var serialize = require("@emotion/serialize");
 var utils = require("@emotion/utils");
 var jsxRuntime = require("react/jsx-runtime");
-var descriptors = require("./descriptors.cjs.js");
-var slate = require("slate");
 var textInput = require("./text-input.cjs.js");
 var combobox = require("./combobox.cjs.js");
-var slateReact = require("slate-react");
+var select = require("./select.cjs.js");
+require("slate");
+require("is-hotkey");
+var state_breakpoints = require("./state/breakpoints.cjs.js");
+require("slate-react");
 var shim = require("use-sync-external-store/shim");
 var redux = require("redux");
 var thunk = require("redux-thunk");
 var types = require("./types.cjs.js");
-var introspection = require("./introspection.cjs.js");
-var state_breakpoints = require("./state/breakpoints.cjs.js");
 var boxModels = require("./box-models.cjs.js");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
-var isHotkey = require("is-hotkey");
-var slateHistory = require("slate-history");
 var reactDom = require("react-dom");
 var parse = require("html-react-parser");
 var Head = require("next/head");
@@ -71,6 +69,7 @@ var pathToRegexp = require("path-to-regexp");
 var cookie = require("cookie");
 var httpProxy = require("http-proxy");
 var setCookieParser = require("set-cookie-parser");
+var constants = require("./constants.cjs.js");
 var uuid = require("uuid");
 var ipsum = require("corporate-ipsum");
 function _interopDefaultLegacy(e) {
@@ -101,13 +100,49 @@ var dynamic__default = /* @__PURE__ */ _interopDefaultLegacy(dynamic);
 var thunk__default = /* @__PURE__ */ _interopDefaultLegacy(thunk);
 var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
 var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
-var isHotkey__default = /* @__PURE__ */ _interopDefaultLegacy(isHotkey);
 var parse__default = /* @__PURE__ */ _interopDefaultLegacy(parse);
 var Head__default = /* @__PURE__ */ _interopDefaultLegacy(Head);
 var createEmotionServer__default = /* @__PURE__ */ _interopDefaultLegacy(createEmotionServer);
 var NextDocument__default = /* @__PURE__ */ _interopDefaultLegacy(NextDocument);
 var Cors__default = /* @__PURE__ */ _interopDefaultLegacy(Cors);
 var ipsum__default = /* @__PURE__ */ _interopDefaultLegacy(ipsum);
+function is(x, y) {
+  if (x === y)
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  return x !== x && y !== y;
+}
+const { hasOwnProperty: hasOwnProperty$1 } = Object.prototype;
+const shallowEqual = (a, b) => {
+  if (is(a, b))
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwnProperty$1.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+  return true;
+};
+const { hasOwnProperty } = Object.prototype;
+const deepEqual = (a, b) => {
+  if (shallowEqual(a, b))
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwnProperty.call(b, keysA[i]) || !deepEqual(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+  return true;
+};
 const SCRIPT_TAG = "script";
 function BodySnippet({
   code,
@@ -152,43 +187,6 @@ function BodySnippet({
   }, [code, cleanup]);
   return null;
 }
-function is(x, y) {
-  if (x === y)
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  return x !== x && y !== y;
-}
-const { hasOwnProperty: hasOwnProperty$1 } = Object.prototype;
-const shallowEqual = (a, b) => {
-  if (is(a, b))
-    return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
-    return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length)
-    return false;
-  for (let i = 0; i < keysA.length; i += 1) {
-    if (!hasOwnProperty$1.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
-      return false;
-  }
-  return true;
-};
-const { hasOwnProperty } = Object.prototype;
-const deepEqual = (a, b) => {
-  if (shallowEqual(a, b))
-    return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
-    return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length)
-    return false;
-  for (let i = 0; i < keysA.length; i += 1) {
-    if (!hasOwnProperty.call(b, keysA[i]) || !deepEqual(a[keysA[i]], b[keysA[i]]))
-      return false;
-  }
-  return true;
-};
 function getInitialState(serializedState = {
   Swatch: [],
   File: [],
@@ -775,7 +773,7 @@ function Page$1({
         return null;
       }))]
     }), /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
-      documentReference: constants.createDocumentReference(page.id)
+      documentReference: reactPage.createDocumentReference(page.id)
     }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsxRuntime.jsx(BodySnippet, {
       code: snippet.code,
       cleanup: snippet.cleanup
@@ -839,7 +837,7 @@ Received "${apiKey}" instead.`);
   async introspect(element) {
     var _a;
     const runtime = (_a = this.runtime) != null ? _a : ReactRuntime;
-    const descriptors$1 = constants.getPropControllerDescriptors(runtime.store.getState());
+    const descriptors = reactPage.getPropControllerDescriptors(runtime.store.getState());
     const swatchIds = /* @__PURE__ */ new Set();
     const fileIds = /* @__PURE__ */ new Set();
     const typographyIds = /* @__PURE__ */ new Set();
@@ -852,26 +850,26 @@ Received "${apiKey}" instead.`);
     while (current = remaining.pop()) {
       let getResourcesFromElementDescriptors = function(elementDescriptors2, props) {
         Object.entries(elementDescriptors2).forEach(([propName, descriptor]) => {
-          introspection.getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+          reactPage.getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
             swatchIds.add(swatchId);
           });
-          introspection.getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
-          introspection.getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
-          introspection.getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
-          introspection.getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
-          introspection.getElementChildren(descriptor, props[propName]).forEach((child) => {
+          reactPage.getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
+          reactPage.getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
+          reactPage.getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
+          reactPage.getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
+          reactPage.getElementChildren(descriptor, props[propName]).forEach((child) => {
             if (!seen.has(child.key)) {
               seen.add(child.key);
               remaining.push(child);
             }
           });
-          if (descriptor.type === descriptors.ShapeControlType) {
+          if (descriptor.type === reactPage.ShapeControlType) {
             const prop = props[propName];
             if (prop == null)
               return;
             getResourcesFromElementDescriptors(descriptor.config.type, prop);
           }
-          if (descriptor.type === descriptors.ListControlType) {
+          if (descriptor.type === reactPage.ListControlType) {
             const prop = props[propName];
             if (prop == null)
               return;
@@ -879,13 +877,13 @@ Received "${apiKey}" instead.`);
               getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
             });
           }
-          if (descriptor.type === descriptors.Types.Shape) {
+          if (descriptor.type === reactPage.Types.Shape) {
             const prop = props[propName];
             if (prop == null)
               return;
             getResourcesFromElementDescriptors(descriptor.options.type, prop);
           }
-          if (descriptor.type === descriptors.Types.List) {
+          if (descriptor.type === reactPage.Types.List) {
             const prop = props[propName];
             if (prop == null)
               return;
@@ -896,7 +894,7 @@ Received "${apiKey}" instead.`);
         });
       };
       let element2;
-      if (constants.isElementReference(current)) {
+      if (reactPage.isElementReference(current)) {
         const globalElement = await this.getGlobalElement(current.value);
         globalElements.set(current.value, globalElement);
         const elementData = globalElement == null ? void 0 : globalElement.data;
@@ -906,7 +904,7 @@ Received "${apiKey}" instead.`);
       } else {
         element2 = current;
       }
-      const elementDescriptors = descriptors$1.get(element2.type);
+      const elementDescriptors = descriptors.get(element2.type);
       if (elementDescriptors == null)
         continue;
       getResourcesFromElementDescriptors(elementDescriptors, element2.props);
@@ -1164,7 +1162,7 @@ async function fonts(_req, res, { getFonts } = {}) {
   const fonts2 = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
   return res.json(fonts2);
 }
-const version = "0.8.9";
+const version = "0.8.11";
 async function handler(req, res, { apiKey }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -1458,13 +1456,13 @@ function registerComponent$c(runtime) {
     type: constants.MakeswiftComponentType.Box,
     label: "Box",
     props: {
-      id: descriptors.ElementID(),
-      backgrounds: descriptors.Backgrounds(),
-      width: descriptors.Width({
-        format: descriptors.Width.Format.ClassName,
+      id: reactPage.ElementID(),
+      backgrounds: reactPage.Backgrounds(),
+      width: reactPage.Width({
+        format: reactPage.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      height: descriptors.ResponsiveIconRadioGroup({
+      height: reactPage.ResponsiveIconRadioGroup({
         label: "Height",
         options: [
           { value: "auto", label: "Auto", icon: "HeightAuto16" },
@@ -1472,7 +1470,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "auto"
       }),
-      verticalAlign: descriptors.ResponsiveIconRadioGroup({
+      verticalAlign: reactPage.ResponsiveIconRadioGroup({
         label: "Align items",
         options: [
           { value: "flex-start", label: "Top", icon: "VerticalAlignStart16" },
@@ -1486,9 +1484,9 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "flex-start"
       }),
-      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName }),
-      padding: descriptors.Padding({
-        format: descriptors.Padding.Format.ClassName,
+      margin: reactPage.Margin({ format: reactPage.Margin.Format.ClassName }),
+      padding: reactPage.Padding({
+        format: reactPage.Padding.Format.ClassName,
         preset: [
           {
             deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
@@ -1501,16 +1499,16 @@ function registerComponent$c(runtime) {
           }
         ]
       }),
-      border: descriptors.Border({ format: descriptors.Border.Format.ClassName }),
-      borderRadius: descriptors.BorderRadius({ format: descriptors.BorderRadius.Format.ClassName }),
-      boxShadow: descriptors.Shadows({ format: descriptors.Shadows.Format.ClassName }),
-      rowGap: descriptors.GapY((props) => ({
+      border: reactPage.Border({ format: reactPage.Border.Format.ClassName }),
+      borderRadius: reactPage.BorderRadius({ format: reactPage.BorderRadius.Format.ClassName }),
+      boxShadow: reactPage.Shadows({ format: reactPage.Shadows.Format.ClassName }),
+      rowGap: reactPage.GapY((props) => ({
         hidden: props.children == null
       })),
-      columnGap: descriptors.GapX((props) => ({
+      columnGap: reactPage.GapX((props) => ({
         hidden: props.children == null
       })),
-      boxAnimateType: descriptors.ResponsiveSelect({
+      boxAnimateType: reactPage.ResponsiveSelect({
         label: "Animate box in",
         labelOrientation: "vertical",
         options: [
@@ -1526,7 +1524,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "none"
       }),
-      boxAnimateDuration: descriptors.ResponsiveNumber((props, device) => ({
+      boxAnimateDuration: reactPage.ResponsiveNumber((props, device) => ({
         label: "Box duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
@@ -1534,7 +1532,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnBoxAnimation(props, device)
       })),
-      boxAnimateDelay: descriptors.ResponsiveNumber((props, device) => ({
+      boxAnimateDelay: reactPage.ResponsiveNumber((props, device) => ({
         label: "Box delay",
         defaultValue: DEFAULT_BOX_ANIMATE_DELAY,
         min: 0,
@@ -1542,7 +1540,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnBoxAnimation(props, device)
       })),
-      itemAnimateType: descriptors.ResponsiveSelect({
+      itemAnimateType: reactPage.ResponsiveSelect({
         label: "Animate items in",
         labelOrientation: "vertical",
         options: [
@@ -1558,7 +1556,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "none"
       }),
-      itemAnimateDuration: descriptors.ResponsiveNumber((props, device) => ({
+      itemAnimateDuration: reactPage.ResponsiveNumber((props, device) => ({
         label: "Items duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
@@ -1566,7 +1564,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      itemAnimateDelay: descriptors.ResponsiveNumber((props, device) => ({
+      itemAnimateDelay: reactPage.ResponsiveNumber((props, device) => ({
         label: "Items delay",
         defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,
         min: 0,
@@ -1574,7 +1572,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      itemStaggerDuration: descriptors.ResponsiveNumber((props, device) => ({
+      itemStaggerDuration: reactPage.ResponsiveNumber((props, device) => ({
         label: "Stagger",
         min: 0,
         step: 0.05,
@@ -1582,11 +1580,11 @@ function registerComponent$c(runtime) {
         defaultValue: DEFAULT_ITEM_STAGGER_DURATION,
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      hidePlaceholder: descriptors.Checkbox((props) => ({
+      hidePlaceholder: reactPage.Checkbox((props) => ({
         label: "Hide placeholder",
         hidden: props.children != null
       })),
-      children: descriptors.Grid()
+      children: reactPage.Grid()
     }
   });
 }
@@ -1597,9 +1595,9 @@ function registerComponent$b(runtime) {
     type: constants.MakeswiftComponentType.Button,
     label: "Button",
     props: {
-      id: descriptors.ElementID(),
-      children: descriptors.TextInput({ placeholder: "Button text" }),
-      link: descriptors.Link({
+      id: reactPage.ElementID(),
+      children: reactPage.TextInput({ placeholder: "Button text" }),
+      link: reactPage.Link({
         defaultValue: {
           type: "OPEN_PAGE",
           payload: {
@@ -1608,7 +1606,7 @@ function registerComponent$b(runtime) {
           }
         }
       }),
-      variant: descriptors.ResponsiveSelect({
+      variant: reactPage.ResponsiveSelect({
         label: "Style",
         labelOrientation: "horizontal",
         options: [
@@ -1622,7 +1620,7 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "flat"
       }),
-      shape: descriptors.ResponsiveIconRadioGroup({
+      shape: reactPage.ResponsiveIconRadioGroup({
         label: "Shape",
         options: [
           { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -1631,7 +1629,7 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "rounded"
       }),
-      size: descriptors.ResponsiveIconRadioGroup({
+      size: reactPage.ResponsiveIconRadioGroup({
         label: "Size",
         options: [
           { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -1640,19 +1638,19 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "medium"
       }),
-      color: descriptors.ResponsiveColor((props, device) => {
+      color: reactPage.ResponsiveColor((props, device) => {
         var _a;
         const variant = props.variant;
         const hidden = ((_a = state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), variant, device)) == null ? void 0 : _a.value) === "clear";
         return { placeholder: "black", hidden };
       }),
-      textColor: descriptors.ResponsiveColor({
+      textColor: reactPage.ResponsiveColor({
         label: "Text color",
         placeholder: "white"
       }),
-      textStyle: descriptors.TextStyle(),
-      width: descriptors.Width(),
-      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName })
+      textStyle: reactPage.TextStyle(),
+      width: reactPage.Width(),
+      margin: reactPage.Margin({ format: reactPage.Margin.Format.ClassName })
     }
   });
 }
@@ -1664,20 +1662,20 @@ function registerComponent$a(runtime) {
     label: "Carousel",
     icon: "Carousel40",
     props: {
-      id: descriptors.ElementID(),
-      images: descriptors.Images({
+      id: reactPage.ElementID(),
+      images: reactPage.Images({
         preset: [
           { key: uuid.v4(), props: {} },
           { key: uuid.v4(), props: {} },
           { key: uuid.v4(), props: {} }
         ]
       }),
-      width: descriptors.Width({
-        format: descriptors.Width.Format.ClassName,
+      width: reactPage.Width({
+        format: reactPage.Width.Format.ClassName,
         defaultValue: { value: 400, unit: "px" }
       }),
-      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName }),
-      pageSize: descriptors.ResponsiveNumber((props) => {
+      margin: reactPage.Margin({ format: reactPage.Margin.Format.ClassName }),
+      pageSize: reactPage.ResponsiveNumber((props) => {
         var _a;
         const images = props.images;
         const imagesLength = (_a = images == null ? void 0 : images.length) != null ? _a : 0;
@@ -1689,7 +1687,7 @@ function registerComponent$a(runtime) {
           step: 1
         };
       }),
-      step: descriptors.ResponsiveNumber((props, device) => {
+      step: reactPage.ResponsiveNumber((props, device) => {
         var _a, _b;
         const pageSize = props.pageSize;
         const pageSizeValue = (_b = (_a = state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), pageSize, device)) == null ? void 0 : _a.value) != null ? _b : 1;
@@ -1701,7 +1699,7 @@ function registerComponent$a(runtime) {
           step: 1
         };
       }),
-      slideAlignment: descriptors.ResponsiveIconRadioGroup({
+      slideAlignment: reactPage.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "Top", value: "flex-start", icon: "VerticalAlignStart16" },
@@ -1710,13 +1708,13 @@ function registerComponent$a(runtime) {
         ],
         defaultValue: "center"
       }),
-      gap: descriptors.GapX({
+      gap: reactPage.GapX({
         label: "Gap",
         step: 5,
         defaultValue: { value: 0, unit: "px" }
       }),
-      autoplay: descriptors.Checkbox({ label: "Autoplay" }),
-      delay: descriptors.Number((props) => ({
+      autoplay: reactPage.Checkbox({ label: "Autoplay" }),
+      delay: reactPage.Number((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
@@ -1724,8 +1722,8 @@ function registerComponent$a(runtime) {
         suffix: "seconds",
         hidden: !props.autoplay
       })),
-      showArrows: descriptors.Checkbox({ preset: true, label: "Show arrows" }),
-      arrowPosition: descriptors.ResponsiveIconRadioGroup((props) => ({
+      showArrows: reactPage.Checkbox({ preset: true, label: "Show arrows" }),
+      arrowPosition: reactPage.ResponsiveIconRadioGroup((props) => ({
         label: "Arrow position",
         options: [
           { label: "Inside", value: "inside", icon: "ArrowInside16" },
@@ -1735,24 +1733,24 @@ function registerComponent$a(runtime) {
         defaultValue: "inside",
         hidden: props.showArrows === false
       })),
-      arrowColor: descriptors.ResponsiveColor((props) => ({
+      arrowColor: reactPage.ResponsiveColor((props) => ({
         label: "Arrow color",
         placeholder: "black",
         hidden: props.showArrows === false
       })),
-      arrowBackground: descriptors.ResponsiveColor((props) => ({
+      arrowBackground: reactPage.ResponsiveColor((props) => ({
         label: "Arrow background",
         placeholder: "white",
         hidden: props.showArrows === false
       })),
-      showDots: descriptors.Checkbox({ preset: true, label: "Show dots" }),
-      dotColor: descriptors.ResponsiveColor((props) => ({
+      showDots: reactPage.Checkbox({ preset: true, label: "Show dots" }),
+      dotColor: reactPage.ResponsiveColor((props) => ({
         label: "Dot color",
         placeholder: "black",
         hidden: props.showDots === false
       })),
-      slideBorder: descriptors.Border({ format: descriptors.Border.Format.ClassName }),
-      slideBorderRadius: descriptors.BorderRadius({ format: descriptors.BorderRadius.Format.ClassName })
+      slideBorder: reactPage.Border({ format: reactPage.Border.Format.ClassName }),
+      slideBorderRadius: reactPage.BorderRadius({ format: reactPage.BorderRadius.Format.ClassName })
     }
   });
 }
@@ -1764,11 +1762,11 @@ function registerComponent$9(runtime) {
     label: "Countdown",
     icon: "Countdown40",
     props: {
-      id: descriptors.ElementID(),
-      date: descriptors.Date(() => ({
+      id: reactPage.ElementID(),
+      date: reactPage.Date(() => ({
         preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
       })),
-      variant: descriptors.ResponsiveIconRadioGroup({
+      variant: reactPage.ResponsiveIconRadioGroup({
         label: "Style",
         options: [
           { label: "Filled", value: "filled", icon: "CountdownSolid16" },
@@ -1787,7 +1785,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "filled"
       }),
-      shape: descriptors.ResponsiveIconRadioGroup({
+      shape: reactPage.ResponsiveIconRadioGroup({
         label: "Shape",
         options: [
           { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -1796,7 +1794,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "rounded"
       }),
-      size: descriptors.ResponsiveIconRadioGroup({
+      size: reactPage.ResponsiveIconRadioGroup({
         label: "Size",
         options: [
           { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -1805,7 +1803,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "medium"
       }),
-      gap: descriptors.GapX({
+      gap: reactPage.GapX({
         preset: [
           {
             deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
@@ -1818,32 +1816,32 @@ function registerComponent$9(runtime) {
         max: 100,
         defaultValue: { value: 0, unit: "px" }
       }),
-      numberFont: descriptors.Font({ label: "Number font" }),
-      numberColor: descriptors.ResponsiveColor({
+      numberFont: reactPage.Font({ label: "Number font" }),
+      numberColor: reactPage.ResponsiveColor({
         label: "Number color",
         placeholder: "white"
       }),
-      blockColor: descriptors.ResponsiveColor({
+      blockColor: reactPage.ResponsiveColor({
         label: "Block color",
         placeholder: "black"
       }),
-      labelFont: descriptors.Font({ label: "Label font" }),
-      labelColor: descriptors.ResponsiveColor({
+      labelFont: reactPage.Font({ label: "Label font" }),
+      labelColor: reactPage.ResponsiveColor({
         label: "Label color",
         placeholder: "black"
       }),
-      width: descriptors.Width({
-        format: descriptors.Width.Format.ClassName,
+      width: reactPage.Width({
+        format: reactPage.Width.Format.ClassName,
         defaultValue: { value: 560, unit: "px" }
       }),
-      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName }),
-      daysLabel: descriptors.TextInput({ label: "Days label", placeholder: "Days" }),
-      hoursLabel: descriptors.TextInput({ label: "Hours label", placeholder: "Hours" }),
-      minutesLabel: descriptors.TextInput({
+      margin: reactPage.Margin({ format: reactPage.Margin.Format.ClassName }),
+      daysLabel: reactPage.TextInput({ label: "Days label", placeholder: "Days" }),
+      hoursLabel: reactPage.TextInput({ label: "Hours label", placeholder: "Hours" }),
+      minutesLabel: reactPage.TextInput({
         label: "Minutes label",
         placeholder: "Minutes"
       }),
-      secondsLabel: descriptors.TextInput({
+      secondsLabel: reactPage.TextInput({
         label: "Seconds label",
         placeholder: "Seconds"
       })
@@ -1858,8 +1856,8 @@ function registerComponent$8(runtime) {
     label: "Divider",
     icon: "Divider40",
     props: {
-      id: descriptors.ElementID(),
-      variant: descriptors.ResponsiveSelect({
+      id: reactPage.ElementID(),
+      variant: reactPage.ResponsiveSelect({
         label: "Style",
         labelOrientation: "horizontal",
         options: [
@@ -1870,17 +1868,17 @@ function registerComponent$8(runtime) {
         ],
         defaultValue: "solid"
       }),
-      thickness: descriptors.ResponsiveLength({
+      thickness: reactPage.ResponsiveLength({
         label: "Height",
         defaultValue: { value: 1, unit: "px" },
         options: [{ value: "px", label: "Pixels", icon: "Px16" }]
       }),
-      color: descriptors.ResponsiveColor({ placeholder: "black" }),
-      width: descriptors.Width({
-        format: descriptors.Width.Format.ClassName,
+      color: reactPage.ResponsiveColor({ placeholder: "black" }),
+      width: reactPage.Width({
+        format: reactPage.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName })
+      margin: reactPage.Margin({ format: reactPage.Margin.Format.ClassName })
     }
   });
 }
@@ -1892,10 +1890,10 @@ function registerComponent$7(runtime) {
     label: "Embed",
     icon: "Code40",
     props: {
-      id: descriptors.ElementID(),
-      html: descriptors.TextArea({ label: "Code", rows: 20 }),
-      width: descriptors.Width({ format: descriptors.Width.Format.ClassName }),
-      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName })
+      id: reactPage.ElementID(),
+      html: reactPage.TextArea({ label: "Code", rows: 20 }),
+      width: reactPage.Width({ format: reactPage.Width.Format.ClassName }),
+      margin: reactPage.Margin({ format: reactPage.Margin.Format.ClassName })
     }
   });
 }
@@ -1931,10 +1929,10 @@ function registerComponent$6(runtime) {
     label: "Form",
     icon: "Form40",
     props: {
-      id: descriptors.ElementID(),
-      tableId: descriptors.Table(),
-      fields: descriptors.TableFormFields(),
-      submitLink: descriptors.Link((props) => ({
+      id: reactPage.ElementID(),
+      tableId: reactPage.Table(),
+      fields: reactPage.TableFormFields(),
+      submitLink: reactPage.Link((props) => ({
         label: "Redirect to",
         options: [
           { value: "OPEN_PAGE", label: "Open page" },
@@ -1942,7 +1940,7 @@ function registerComponent$6(runtime) {
         ],
         hidden: props.tableId == null
       })),
-      gap: descriptors.GapY((props) => ({
+      gap: reactPage.GapY((props) => ({
         preset: [
           {
             deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
@@ -1953,7 +1951,7 @@ function registerComponent$6(runtime) {
         defaultValue: { value: 0, unit: "px" },
         hidden: props.tableId == null
       })),
-      shape: descriptors.ResponsiveIconRadioGroup((props) => ({
+      shape: reactPage.ResponsiveIconRadioGroup((props) => ({
         label: "Shape",
         options: [
           { label: "Pill", value: Shapes.PILL, icon: "ButtonPill16" },
@@ -1963,7 +1961,7 @@ function registerComponent$6(runtime) {
         defaultValue: Shapes.ROUNDED,
         hidden: props.tableId == null
       })),
-      size: descriptors.ResponsiveIconRadioGroup((props) => ({
+      size: reactPage.ResponsiveIconRadioGroup((props) => ({
         label: "Size",
         options: [
           { label: "Small", value: Sizes.SMALL, icon: "SizeSmall16" },
@@ -1973,7 +1971,7 @@ function registerComponent$6(runtime) {
         defaultValue: Sizes.MEDIUM,
         hidden: (props == null ? void 0 : props.tableId) == null
       })),
-      contrast: descriptors.ResponsiveIconRadioGroup((props) => ({
+      contrast: reactPage.ResponsiveIconRadioGroup((props) => ({
         label: "Color",
         options: [
           { label: "Light mode", value: Contrasts.LIGHT, icon: "Sun16" },
@@ -1982,8 +1980,8 @@ function registerComponent$6(runtime) {
         defaultValue: Contrasts.LIGHT,
         hidden: props.tableId == null
       })),
-      labelTextStyle: descriptors.TextStyle({ label: "Label text style" }),
-      labelTextColor: descriptors.ResponsiveColor((props, device) => {
+      labelTextStyle: reactPage.TextStyle({ label: "Label text style" }),
+      labelTextColor: reactPage.ResponsiveColor((props, device) => {
         const hidden = props.tableId == null;
         const responsiveContrast = props.contrast;
         const contrast = state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), responsiveContrast, device);
@@ -1993,23 +1991,23 @@ function registerComponent$6(runtime) {
           placeholder: (contrast == null ? void 0 : contrast.value) === Contrasts.DARK ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.8)"
         };
       }),
-      submitTextStyle: descriptors.TextStyle({ label: "Button text style" }),
-      brandColor: descriptors.ResponsiveColor((props) => ({
+      submitTextStyle: reactPage.TextStyle({ label: "Button text style" }),
+      brandColor: reactPage.ResponsiveColor((props) => ({
         label: "Button color",
         placeholder: "black",
         hidden: props.tableId == null
       })),
-      submitTextColor: descriptors.ResponsiveColor((props) => ({
+      submitTextColor: reactPage.ResponsiveColor((props) => ({
         label: "Button text color",
         placeholder: "white",
         hidden: props.tableId == null
       })),
-      submitLabel: descriptors.TextInput((props) => ({
+      submitLabel: reactPage.TextInput((props) => ({
         label: "Button label",
         placeholder: "Submit",
         hidden: props.tableId == null
       })),
-      submitVariant: descriptors.ResponsiveSelect((props) => ({
+      submitVariant: reactPage.ResponsiveSelect((props) => ({
         label: "Button style",
         options: [
           { value: "flat", label: "Flat" },
@@ -2023,11 +2021,11 @@ function registerComponent$6(runtime) {
         defaultValue: "flat",
         hidden: props.tableId == null
       })),
-      submitWidth: descriptors.ResponsiveLength((props) => ({
+      submitWidth: reactPage.ResponsiveLength((props) => ({
         label: "Button width",
         hidden: props.tableId == null
       })),
-      submitAlignment: descriptors.ResponsiveIconRadioGroup((props) => ({
+      submitAlignment: reactPage.ResponsiveIconRadioGroup((props) => ({
         label: "Button alignment",
         options: [
           { label: "Left", value: Alignments.LEFT, icon: "AlignLeft16" },
@@ -2037,7 +2035,7 @@ function registerComponent$6(runtime) {
         defaultValue: Alignments.CENTER,
         hidden: props.tableId == null
       })),
-      width: descriptors.Width({
+      width: reactPage.Width({
         preset: [
           {
             deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
@@ -2045,9 +2043,9 @@ function registerComponent$6(runtime) {
           }
         ],
         defaultValue: { value: 100, unit: "%" },
-        format: descriptors.Width.Format.ClassName
+        format: reactPage.Width.Format.ClassName
       }),
-      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName })
+      margin: reactPage.Margin({ format: reactPage.Margin.Format.ClassName })
     }
   });
 }
@@ -2058,17 +2056,17 @@ function registerComponent$5(runtime) {
     type: constants.MakeswiftComponentType.Image,
     label: "Image",
     props: {
-      id: descriptors.ElementID(),
-      file: descriptors.Image(),
-      altText: descriptors.TextInput({ label: "Alt text" }),
-      link: descriptors.Link({ label: "On click" }),
-      width: descriptors.Width(),
-      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName }),
-      padding: descriptors.Padding({ format: descriptors.Padding.Format.ClassName }),
-      border: descriptors.Border({ format: descriptors.Border.Format.ClassName }),
-      borderRadius: descriptors.BorderRadius({ format: descriptors.BorderRadius.Format.ClassName }),
-      boxShadow: descriptors.Shadows({ format: descriptors.Shadows.Format.ClassName }),
-      opacity: descriptors.ResponsiveOpacity()
+      id: reactPage.ElementID(),
+      file: reactPage.Image(),
+      altText: reactPage.TextInput({ label: "Alt text" }),
+      link: reactPage.Link({ label: "On click" }),
+      width: reactPage.Width(),
+      margin: reactPage.Margin({ format: reactPage.Margin.Format.ClassName }),
+      padding: reactPage.Padding({ format: reactPage.Padding.Format.ClassName }),
+      border: reactPage.Border({ format: reactPage.Border.Format.ClassName }),
+      borderRadius: reactPage.BorderRadius({ format: reactPage.BorderRadius.Format.ClassName }),
+      boxShadow: reactPage.Shadows({ format: reactPage.Shadows.Format.ClassName }),
+      opacity: reactPage.ResponsiveOpacity()
     }
   });
 }
@@ -2080,21 +2078,21 @@ function registerComponent$4(runtime) {
     label: "Navigation",
     icon: "Navigation40",
     props: {
-      id: descriptors.ElementID(),
-      links: descriptors.NavigationLinks(),
-      linkTextStyle: descriptors.TextStyle((props) => {
+      id: reactPage.ElementID(),
+      links: reactPage.NavigationLinks(),
+      linkTextStyle: reactPage.TextStyle((props) => {
         const links = props.links;
         return {
           label: "Link text style",
           hidden: links == null || links.length === 0
         };
       }),
-      showLogo: descriptors.Checkbox({ preset: true, label: "Show logo" }),
-      logoFile: descriptors.Image((props) => ({
+      showLogo: reactPage.Checkbox({ preset: true, label: "Show logo" }),
+      logoFile: reactPage.Image((props) => ({
         label: "Logo",
         hidden: props.showLogo === false
       })),
-      logoWidth: descriptors.ResponsiveLength((props) => ({
+      logoWidth: reactPage.ResponsiveLength((props) => ({
         preset: [
           {
             deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
@@ -2107,15 +2105,15 @@ function registerComponent$4(runtime) {
         options: [{ value: "px", label: "Pixels", icon: "Px16" }],
         hidden: props.showLogo === false
       })),
-      logoAltText: descriptors.TextInput((props) => ({
+      logoAltText: reactPage.TextInput((props) => ({
         label: "Logo alt text",
         hidden: props.showLogo === false
       })),
-      logoLink: descriptors.Link((props) => ({
+      logoLink: reactPage.Link((props) => ({
         label: "Logo on click",
         hidden: props.showLogo === false
       })),
-      alignment: descriptors.ResponsiveIconRadioGroup({
+      alignment: reactPage.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "Left", value: "flex-start", icon: "AlignLeft16" },
@@ -2124,7 +2122,7 @@ function registerComponent$4(runtime) {
         ],
         defaultValue: "flex-end"
       }),
-      gutter: descriptors.GapX({
+      gutter: reactPage.GapX({
         preset: [
           {
             deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
@@ -2137,14 +2135,14 @@ function registerComponent$4(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      mobileMenuAnimation: descriptors.ResponsiveSelect({
+      mobileMenuAnimation: reactPage.ResponsiveSelect({
         label: "Mobile menu",
         options: [
           { value: "coverRight", label: "Cover from right" },
           { value: "coverLeft", label: "Cover from left" }
         ]
       }),
-      mobileMenuOpenIconColor: descriptors.ResponsiveColor((props, device) => {
+      mobileMenuOpenIconColor: reactPage.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, device);
         return {
@@ -2153,7 +2151,7 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      mobileMenuCloseIconColor: descriptors.ResponsiveColor((props, device) => {
+      mobileMenuCloseIconColor: reactPage.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, device);
         return {
@@ -2162,7 +2160,7 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      mobileMenuBackgroundColor: descriptors.ResponsiveColor((props, device) => {
+      mobileMenuBackgroundColor: reactPage.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !state_breakpoints.findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, device);
         return {
@@ -2171,11 +2169,11 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      width: descriptors.Width({
-        format: descriptors.Width.Format.ClassName,
+      width: reactPage.Width({
+        format: reactPage.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName })
+      margin: reactPage.Margin({ format: reactPage.Margin.Format.ClassName })
     }
   });
 }
@@ -2187,10 +2185,10 @@ function registerComponent$3(runtime) {
     label: "Page",
     hidden: true,
     props: {
-      children: descriptors.Grid(),
-      backgrounds: descriptors.Backgrounds(),
-      rowGap: descriptors.GapY(),
-      columnGap: descriptors.GapX()
+      children: reactPage.Grid(),
+      backgrounds: reactPage.Backgrounds(),
+      rowGap: reactPage.GapY(),
+      columnGap: reactPage.GapX()
     }
   });
 }
@@ -2202,8 +2200,8 @@ function registerComponent$2(runtime) {
     label: "Social Links",
     icon: "SocialLinks40",
     props: {
-      id: descriptors.ElementID(),
-      links: descriptors.SocialLinks({
+      id: reactPage.ElementID(),
+      links: reactPage.SocialLinks({
         preset: {
           links: [
             {
@@ -2222,7 +2220,7 @@ function registerComponent$2(runtime) {
           openInNewTab: false
         }
       }),
-      shape: descriptors.ResponsiveIconRadioGroup((props) => {
+      shape: reactPage.ResponsiveIconRadioGroup((props) => {
         const links = props.links;
         return {
           label: "Shape",
@@ -2236,7 +2234,7 @@ function registerComponent$2(runtime) {
           hidden: links == null || links.links.length === 0
         };
       }),
-      size: descriptors.ResponsiveIconRadioGroup((props) => {
+      size: reactPage.ResponsiveIconRadioGroup((props) => {
         const links = props.links;
         return {
           label: "Size",
@@ -2249,7 +2247,7 @@ function registerComponent$2(runtime) {
           hidden: links == null || links.links.length === 0
         };
       }),
-      hoverStyle: descriptors.ResponsiveSelect((props) => {
+      hoverStyle: reactPage.ResponsiveSelect((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2265,7 +2263,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      fill: descriptors.ResponsiveColor((props) => {
+      fill: reactPage.ResponsiveColor((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2273,7 +2271,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      backgroundColor: descriptors.ResponsiveColor((props) => {
+      backgroundColor: reactPage.ResponsiveColor((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2281,7 +2279,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      alignment: descriptors.ResponsiveIconRadioGroup({
+      alignment: reactPage.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "flex-start", value: "flex-start", icon: "AlignLeft16" },
@@ -2290,7 +2288,7 @@ function registerComponent$2(runtime) {
         ],
         defaultValue: "center"
       }),
-      gutter: descriptors.GapX({
+      gutter: reactPage.GapX({
         preset: [
           {
             deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
@@ -2303,12 +2301,12 @@ function registerComponent$2(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      width: descriptors.Width({
-        format: descriptors.Width.Format.ClassName,
+      width: reactPage.Width({
+        format: reactPage.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: descriptors.Margin({
-        format: descriptors.Margin.Format.ClassName,
+      margin: reactPage.Margin({
+        format: reactPage.Margin.Format.ClassName,
         preset: [
           {
             deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
@@ -2331,8 +2329,8 @@ function registerComponent$1(runtime) {
     type: constants.MakeswiftComponentType.Text,
     label: "Text",
     props: {
-      id: descriptors.ElementID(),
-      text: descriptors.RichText(() => ({
+      id: reactPage.ElementID(),
+      text: reactPage.RichText(() => ({
         preset: {
           document: {
             object: "document",
@@ -2378,8 +2376,8 @@ function registerComponent$1(runtime) {
           }
         }
       })),
-      width: descriptors.Width({
-        format: descriptors.Width.Format.ClassName,
+      width: reactPage.Width({
+        format: reactPage.Width.Format.ClassName,
         preset: [
           {
             deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
@@ -2388,8 +2386,8 @@ function registerComponent$1(runtime) {
         ],
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: descriptors.Margin({
-        format: descriptors.Margin.Format.ClassName,
+      margin: reactPage.Margin({
+        format: reactPage.Margin.Format.ClassName,
         preset: [
           {
             deviceId: state_breakpoints.getBaseBreakpoint(runtime.getBreakpoints()).id,
@@ -2413,14 +2411,14 @@ function registerComponent(runtime) {
     label: "Video",
     icon: "Video40",
     props: {
-      id: descriptors.ElementID(),
-      video: descriptors.Video({ preset: { controls: true } }),
-      width: descriptors.Width({
-        format: descriptors.Width.Format.ClassName,
+      id: reactPage.ElementID(),
+      video: reactPage.Video({ preset: { controls: true } }),
+      width: reactPage.Width({
+        format: reactPage.Width.Format.ClassName,
         defaultValue: { value: 560, unit: "px" }
       }),
-      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName }),
-      borderRadius: descriptors.BorderRadius({ format: descriptors.BorderRadius.Format.ClassName })
+      margin: reactPage.Margin({ format: reactPage.Margin.Format.ClassName }),
+      borderRadius: reactPage.BorderRadius({ format: reactPage.BorderRadius.Format.ClassName })
     }
   });
 }
@@ -2615,12 +2613,12 @@ function mapSideColor(swatches, _d) {
   return __spreadProps(__spreadValues({}, restOfSide), {
     color: color && {
       alpha: color.alpha,
-      swatch: swatches.filter(introspection.isNonNullable).find((s) => s && s.id === color.swatchId)
+      swatch: swatches.filter(reactPage.isNonNullable).find((s) => s && s.id === color.swatchId)
     }
   });
 }
 function useBorder(value) {
-  const swatchIds = introspection.getBorderSwatchIds(value);
+  const swatchIds = reactPage.getBorderSwatchIds(value);
   const swatches = useSwatches(swatchIds);
   if (value == null)
     return null;
@@ -2645,7 +2643,7 @@ const ShadowDefaultValue = {
   color: null
 };
 function useBoxShadow(value) {
-  const swatchIds = introspection.getBoxShadowsSwatchIds(value);
+  const swatchIds = reactPage.getBoxShadowsSwatchIds(value);
   const swatches = useSwatches(swatchIds);
   if (value == null)
     return null;
@@ -2661,7 +2659,7 @@ function useBoxShadow(value) {
         return __spreadProps(__spreadValues({}, restOfShadow), {
           payload: {
             color: color != null ? {
-              swatch: swatches.filter(introspection.isNonNullable).find((s) => s && s.id === color.swatchId),
+              swatch: swatches.filter(reactPage.isNonNullable).find((s) => s && s.id === color.swatchId),
               alpha: color.alpha
             } : null,
             inset: inset != null ? inset : ShadowDefaultValue.inset,
@@ -2676,7 +2674,7 @@ function useBoxShadow(value) {
   });
 }
 function useResponsiveColor(color) {
-  const swatchIds = introspection.getResponsiveColorSwatchIds(color);
+  const swatchIds = reactPage.getResponsiveColorSwatchIds(color);
   const swatches = useSwatches(swatchIds);
   if (color == null)
     return null;
@@ -2685,7 +2683,7 @@ function useResponsiveColor(color) {
     const { swatchId, alpha } = v;
     const swatch = swatches.find((s) => s && s.id === swatchId);
     return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
-  }).filter(introspection.isNonNullable);
+  }).filter(reactPage.isNonNullable);
 }
 const getIndexes = (spans, index) => {
   const flattened = spans.reduce((a, s) => a.concat(s), []);
@@ -2931,7 +2929,7 @@ const defaultPadding = {
 };
 function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
-  return __spreadValues(__spreadValues({}, properties.includes(descriptors.StyleControlProperty.Width) && {
+  return __spreadValues(__spreadValues({}, properties.includes(reactPage.StyleControlProperty.Width) && {
     maxWidth: "100%"
   }), useResponsiveStyle([
     style == null ? void 0 : style.width,
@@ -2942,19 +2940,19 @@ function useStyleControlCssObject(style, controlDefinition) {
     style == null ? void 0 : style.textStyle
   ], ([width, margin, padding, border, borderRadius, textStyle]) => {
     var _a, _b, _c2, _d, _e, _f, _g, _h, _i, _j, _k;
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(descriptors.StyleControlProperty.Width) && {
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(reactPage.StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
-    }), properties.includes(descriptors.StyleControlProperty.Margin) && marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(descriptors.StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(descriptors.StyleControlProperty.Border) && {
+    }), properties.includes(reactPage.StyleControlProperty.Margin) && marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(reactPage.StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(reactPage.StyleControlProperty.Border) && {
       borderTop: (_b = borderSideToString2(border == null ? void 0 : border.borderTop)) != null ? _b : "0 solid black",
       borderRight: (_c2 = borderSideToString2(border == null ? void 0 : border.borderRight)) != null ? _c2 : "0 solid black",
       borderBottom: (_d = borderSideToString2(border == null ? void 0 : border.borderBottom)) != null ? _d : "0 solid black",
       borderLeft: (_e = borderSideToString2(border == null ? void 0 : border.borderLeft)) != null ? _e : "0 solid black"
-    }), properties.includes(descriptors.StyleControlProperty.BorderRadius) && {
+    }), properties.includes(reactPage.StyleControlProperty.BorderRadius) && {
       borderTopLeftRadius: (_f = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopLeftRadius)) != null ? _f : 0,
       borderTopRightRadius: (_g = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _g : 0,
       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(descriptors.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 }), {
+    }), properties.includes(reactPage.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: (_j = textStyle == null ? void 0 : textStyle.textTransform) != null ? _j : [],
       fontStyle: (_k = textStyle == null ? void 0 : textStyle.fontStyle) != null ? _k : []
     }));
@@ -3039,10 +3037,10 @@ function useComboboxControlValue(data) {
 }
 function useImageControlValue(data, definition) {
   var _a;
-  const format = (_a = definition.config.format) != null ? _a : descriptors.ImageControlValueFormat.URL;
+  const format = (_a = definition.config.format) != null ? _a : reactPage.ImageControlValueFormat.URL;
   const fileId = data != null ? data : null;
   const file = useFile(fileId);
-  if (format === descriptors.ImageControlValueFormat.URL) {
+  if (format === reactPage.ImageControlValueFormat.URL) {
     return file == null ? void 0 : file.publicUrl;
   }
   if (file == null || file.dimensions == null)
@@ -3141,12 +3139,12 @@ function useNumber(numberControlData, controlDefinition) {
   return numberControlData != null ? numberControlData : controlDefinition.config.defaultValue;
 }
 const Text = forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
-  return require("./index.cjs6.js");
+  return require("./index.cjs8.js");
 }))));
 function useRichText(data, control) {
   const textCallbackRef = React.useCallback((handle) => {
     var _a;
-    if (constants.isPropControllersHandle(handle))
+    if (reactPage.isPropControllersHandle(handle))
       (_a = handle == null ? void 0 : handle.setPropControllers) == null ? void 0 : _a.call(handle, control == null ? null : {
         text: control
       });
@@ -3156,115 +3154,20 @@ function useRichText(data, control) {
     ref: textCallbackRef
   });
 }
-function pollBoxModel({
-  element,
-  onBoxModelChange
-}) {
-  let currentBoxModel = null;
-  const handleAnimationFrameRequest = () => {
-    const measuredBoxModel = boxModels.getBox(element);
-    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
-      currentBoxModel = measuredBoxModel;
-      onBoxModelChange(currentBoxModel);
-    }
-    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
-  };
-  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
-  return () => {
-    cancelAnimationFrame(animationFrameHandle);
-    onBoxModelChange(null);
-  };
-}
-const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
-const defaultText = [{
-  type: descriptors.BlockType.Text,
-  children: [{
-    text: ""
-  }]
-}];
+const EditableText = forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+  return require("./index.cjs9.js");
+}))));
+const ReadOnlyText = forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
+  return require("./ReadOnlyTextV2.cjs.js");
+}))));
 function useRichTextV2(data, control) {
-  const [editor] = React.useState(() => slateHistory.withHistory(slateReact.withReact(slate.createEditor())));
-  const isPreservingFocus = React.useRef(false);
-  const editMode = useBuilderEditMode();
-  React.useEffect(() => {
-    if (control == null)
-      return;
-    const element = slateReact.ReactEditor.toDOMNode(editor, editor);
-    return pollBoxModel({
-      element,
-      onBoxModelChange: (boxModel) => control.changeBoxModel(boxModel)
-    });
-  }, [editor, control]);
-  const renderElement = React.useCallback(({
-    attributes,
-    children,
-    element
-  }) => {
-    switch (element.type) {
-      default:
-        return /* @__PURE__ */ jsxRuntime.jsx("p", __spreadProps(__spreadValues({}, attributes), {
-          children
-        }));
-    }
-  }, []);
-  const renderLeaf = React.useCallback(({
-    attributes,
-    children
-  }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, attributes), {
-      children
-    }));
-  }, []);
-  const initialValue = React.useMemo(() => data != null ? data : defaultText, [data]);
-  React.useEffect(() => {
-    if (editMode !== descriptors.BuilderEditMode.CONTENT) {
-      isPreservingFocus.current = false;
-      slateReact.ReactEditor.deselect(editor);
-    }
-  }, [editMode]);
-  React.useEffect(() => {
-    control == null ? void 0 : control.setEditor(editor);
-    control == null ? void 0 : control.setDefaultValue(defaultText);
-  }, [control, editor, defaultText]);
-  const handleFocus = React.useCallback(() => {
-    isPreservingFocus.current = true;
-    control == null ? void 0 : control.select();
-  }, [control]);
-  const handleKeyDown = React.useCallback((e) => {
-    if (isHotkey__default["default"]("mod+shift+z", e))
-      return slateHistory.HistoryEditor.redo(editor);
-    if (isHotkey__default["default"]("mod+z", e))
-      return slateHistory.HistoryEditor.undo(editor);
-    if (isHotkey__default["default"]("escape")(e)) {
-      isPreservingFocus.current = false;
-      slateReact.ReactEditor.blur(editor);
-      control == null ? void 0 : control.switchToBuildMode();
-    }
-  }, [control, editor]);
-  const handleBlur = React.useCallback((e) => {
-    var _a;
-    if (e.relatedTarget == null)
-      return;
-    if (((_a = e.relatedTarget) == null ? void 0 : _a.getAttribute("contenteditable")) === "true")
-      isPreservingFocus.current = false;
-  }, []);
-  const handleOnChange = React.useCallback((value) => {
-    control == null ? void 0 : control.onChange(value);
-  }, [control]);
-  return /* @__PURE__ */ jsxRuntime.jsx(slateReact.Slate, {
-    editor,
-    onChange: handleOnChange,
-    value: initialValue,
-    children: /* @__PURE__ */ jsxRuntime.jsx(slateReact.Editable, {
-      renderLeaf,
-      renderElement,
-      onFocus: handleFocus,
-      onKeyDown: handleKeyDown,
-      onBlur: handleBlur,
-      readOnly: editMode !== descriptors.BuilderEditMode.CONTENT,
-      placeholder: "Write some text..."
-    })
+  const isPreview = useIsPreview();
+  return isPreview ? /* @__PURE__ */ jsxRuntime.jsx(EditableText, {
+    text: data,
+    control
+  }) : /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyText, {
+    text: data,
+    control
   });
 }
 function useSelectControlValue(data, definition) {
@@ -3285,6 +3188,25 @@ function ShapeControlValue({
     }))
   }), children)({});
 }
+function pollBoxModel({
+  element,
+  onBoxModelChange
+}) {
+  let currentBoxModel = null;
+  const handleAnimationFrameRequest = () => {
+    const measuredBoxModel = boxModels.getBox(element);
+    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+      currentBoxModel = measuredBoxModel;
+      onBoxModelChange(currentBoxModel);
+    }
+    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+  };
+  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+  return () => {
+    cancelAnimationFrame(animationFrameHandle);
+    onBoxModelChange(null);
+  };
+}
 function useSlot(data, control) {
   if (data == null || data.elements.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(Slot.Placeholder, {
@@ -3465,25 +3387,25 @@ function ControlValue({
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.SelectControlType:
+    case select.SelectControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useSelectControlValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case descriptors.ColorControlType:
+    case reactPage.ColorControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useColorValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case descriptors.ImageControlType:
+    case reactPage.ImageControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useImageControlValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case descriptors.LinkControlType:
+    case reactPage.LinkControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useLinkControlValue,
         parameters: [data, definition],
@@ -3495,39 +3417,39 @@ function ControlValue({
         parameters: [data],
         children: (value) => children(value)
       }, definition.type);
-    case descriptors.ShapeControlType:
+    case reactPage.ShapeControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(ShapeControlValue, {
         definition,
         data,
         control,
         children: (value) => children(value)
       });
-    case descriptors.ListControlType:
+    case reactPage.ListControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(ListControlValue, {
         definition,
         data,
         control,
         children: (value) => children(value)
       });
-    case descriptors.SlotControlType:
+    case reactPage.SlotControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useSlot,
         parameters: [data, control],
         children: (value) => children(value)
       }, definition.type);
-    case descriptors.RichTextControlType:
+    case reactPage.RichTextControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useRichText,
         parameters: [data, control],
         children: (value) => children(value)
       }, definition.type);
-    case descriptors.RichTextV2ControlType:
+    case reactPage.RichTextV2ControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useRichTextV2,
         parameters: [data, control],
         children: (value) => children(value)
       }, definition.type);
-    case descriptors.StyleControlType:
+    case reactPage.StyleControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useFormattedStyle,
         parameters: [data, definition, control],
@@ -3563,13 +3485,13 @@ function PropsValue({
 }) {
   var _a;
   const store = useStore();
-  const propControllerDescriptorsRef = React.useRef((_a = constants.getComponentPropControllerDescriptors(store.getState(), element.type)) != null ? _a : {});
+  const propControllerDescriptorsRef = React.useRef((_a = reactPage.getComponentPropControllerDescriptors(store.getState(), element.type)) != null ? _a : {});
   const props = element.props;
   const documentKey = useDocumentKey();
   const propControllers = useSelector((state) => {
     if (documentKey == null)
       return null;
-    return constants.getPropControllers(state, documentKey, element.key);
+    return reactPage.getPropControllers(state, documentKey, element.key);
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
     var _a2, _b, _c2, _d;
@@ -3578,13 +3500,13 @@ function PropsValue({
       case textInput.NumberControlType:
       case textInput.TextInputControlType:
       case textInput.TextAreaControlType:
-      case textInput.SelectControlType:
-      case descriptors.ColorControlType:
-      case descriptors.ImageControlType:
+      case select.SelectControlType:
+      case reactPage.ColorControlType:
+      case reactPage.ImageControlType:
       case combobox.ComboboxControlType:
-      case descriptors.ShapeControlType:
-      case descriptors.ListControlType:
-      case descriptors.LinkControlType:
+      case reactPage.ShapeControlType:
+      case reactPage.ListControlType:
+      case reactPage.LinkControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
@@ -3593,7 +3515,7 @@ function PropsValue({
             [propName]: value
           }))
         });
-      case descriptors.StyleControlType: {
+      case reactPage.StyleControlType: {
         const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useFormattedStyle,
@@ -3603,7 +3525,7 @@ function PropsValue({
           }))
         }, descriptor.type);
       }
-      case descriptors.RichTextControlType: {
+      case reactPage.RichTextControlType: {
         const control = (_b = propControllers == null ? void 0 : propControllers[propName]) != null ? _b : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useRichText,
@@ -3613,7 +3535,7 @@ function PropsValue({
           }))
         }, descriptor.type);
       }
-      case descriptors.RichTextV2ControlType: {
+      case reactPage.RichTextV2ControlType: {
         const control = (_c2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _c2 : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useRichTextV2,
@@ -3623,7 +3545,7 @@ function PropsValue({
           }))
         }, descriptor.type);
       }
-      case descriptors.SlotControlType: {
+      case reactPage.SlotControlType: {
         const control = (_d = propControllers == null ? void 0 : propControllers[propName]) != null ? _d : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useSlot,
@@ -3633,9 +3555,9 @@ function PropsValue({
           }))
         }, descriptor.type);
       }
-      case descriptors.Types.Width:
+      case reactPage.Types.Width:
         switch (descriptor.options.format) {
-          case descriptors.WidthPropControllerFormat.ClassName:
+          case reactPage.WidthPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useWidthStyle,
               parameters: [props[propName], descriptor],
@@ -3648,9 +3570,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case descriptors.Types.Padding:
+      case reactPage.Types.Padding:
         switch (descriptor.options.format) {
-          case descriptors.PaddingPropControllerFormat.ClassName:
+          case reactPage.PaddingPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: usePaddingStyle,
               parameters: [props[propName]],
@@ -3663,9 +3585,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case descriptors.Types.Margin:
+      case reactPage.Types.Margin:
         switch (descriptor.options.format) {
-          case descriptors.MarginPropControllerFormat.ClassName:
+          case reactPage.MarginPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useMarginStyle,
               parameters: [props[propName]],
@@ -3678,9 +3600,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case descriptors.Types.BorderRadius:
+      case reactPage.Types.BorderRadius:
         switch (descriptor.options.format) {
-          case descriptors.BorderRadiusPropControllerFormat.ClassName:
+          case reactPage.BorderRadiusPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useBorderRadiusStyle,
               parameters: [props[propName]],
@@ -3693,9 +3615,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case descriptors.Types.Shadows:
+      case reactPage.Types.Shadows:
         switch (descriptor.options.format) {
-          case descriptors.ShadowsPropControllerFormat.ClassName:
+          case reactPage.ShadowsPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useShadowsStyle,
               parameters: [props[propName]],
@@ -3708,9 +3630,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case descriptors.Types.Border:
+      case reactPage.Types.Border:
         switch (descriptor.options.format) {
-          case descriptors.BorderPropControllerFormat.ClassName:
+          case reactPage.BorderPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useBorderStyle,
               parameters: [props[propName]],
@@ -3723,7 +3645,7 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case descriptors.Types.ResponsiveColor:
+      case reactPage.Types.ResponsiveColor:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useResponsiveColor,
           parameters: [props[propName]],
@@ -3789,7 +3711,7 @@ class ElementImperativeHandle {
   }
   setPropControllers(propControllers) {
     const current = this.getCurrent();
-    if (constants.isPropControllersHandle(current))
+    if (reactPage.isPropControllersHandle(current))
       current.setPropControllers(propControllers);
     this.lastPropControllers = propControllers;
   }
@@ -3811,7 +3733,7 @@ class ReactRuntime {
     breakpoints
   }) {
     __publicField(this, "store");
-    this.store = constants.configureStore({
+    this.store = reactPage.configureStore({
       breakpoints: breakpoints ? state_breakpoints.parseBreakpointsInput(breakpoints) : void 0
     });
     registerBuiltinComponents(this);
@@ -3835,10 +3757,10 @@ class ReactRuntime {
     };
   }
   static copyElementTree(elementTree2, replacementContext) {
-    return constants.copyElementTree(this.store.getState(), elementTree2, replacementContext);
+    return reactPage.copyElementTree(this.store.getState(), elementTree2, replacementContext);
   }
   static getBreakpoints() {
-    return constants.getBreakpoints(this.store.getState());
+    return reactPage.getBreakpoints(this.store.getState());
   }
   registerComponent(component, {
     type,
@@ -3859,13 +3781,13 @@ class ReactRuntime {
     };
   }
   copyElementTree(elementTree2, replacementContext) {
-    return constants.copyElementTree(this.store.getState(), elementTree2, replacementContext);
+    return reactPage.copyElementTree(this.store.getState(), elementTree2, replacementContext);
   }
   getBreakpoints() {
-    return constants.getBreakpoints(this.store.getState());
+    return reactPage.getBreakpoints(this.store.getState());
   }
 }
-__publicField(ReactRuntime, "store", constants.configureStore());
+__publicField(ReactRuntime, "store", reactPage.configureStore());
 registerBuiltinComponents(ReactRuntime);
 const StoreContext = React.createContext(ReactRuntime.store);
 const PreviewProvider = dynamic__default["default"](() => Promise.resolve().then(function() {
@@ -3914,26 +3836,26 @@ function useSelector(selector) {
   return withSelector.useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector);
 }
 function useComponent(type) {
-  return useSelector((state) => constants.getReactComponent(state, type));
+  return useSelector((state) => reactPage.getReactComponent(state, type));
 }
 function useElementId(elementKey) {
   const documentKey = useDocumentKey();
-  return useSelector((state) => documentKey == null || elementKey == null ? null : constants.getElementId(state, documentKey, elementKey));
+  return useSelector((state) => documentKey == null || elementKey == null ? null : reactPage.getElementId(state, documentKey, elementKey));
 }
 function useDocument(documentKey) {
-  return useSelector((state) => constants.getDocument(state, documentKey));
+  return useSelector((state) => reactPage.getDocument(state, documentKey));
 }
 function useIsInBuilder() {
-  return useSelector((state) => constants.getIsInBuilder(state));
+  return useSelector((state) => reactPage.getIsInBuilder(state));
 }
 function useIsPreview() {
-  return useSelector((state) => constants.getIsPreview(state));
+  return useSelector((state) => reactPage.getIsPreview(state));
 }
 function useBuilderEditMode() {
-  return useSelector((state) => constants.getBuilderEditMode(state));
+  return useSelector((state) => reactPage.getBuilderEditMode(state));
 }
 function useBreakpoints() {
-  return useSelector((state) => constants.getBreakpoints(state));
+  return useSelector((state) => reactPage.getBreakpoints(state));
 }
 function useDispatch() {
   const store = React.useContext(StoreContext);
@@ -4043,7 +3965,7 @@ const Element$1 = React.memo(React.forwardRef(function Element2({
   }, [dispatch, documentKey, elementKey, isRegisterElementDisabled]);
   return /* @__PURE__ */ jsxRuntime.jsx(FindDomNode, {
     ref: findDomNodeCallbackRef,
-    children: constants.isElementReference(element) ? /* @__PURE__ */ jsxRuntime.jsx(ElementReference, {
+    children: reactPage.isElementReference(element) ? /* @__PURE__ */ jsxRuntime.jsx(ElementReference, {
       ref: elementCallbackRef,
       elementReference: element
     }, elementKey) : /* @__PURE__ */ jsxRuntime.jsx(ElementData, {
@@ -4121,7 +4043,6 @@ exports.useFiles = useFiles;
 exports.useFormContext = useFormContext;
 exports.useIsInBuilder = useIsInBuilder;
 exports.useIsPreview = useIsPreview;
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useMakeswiftClient = useMakeswiftClient;
 exports.usePageId = usePageId;
 exports.usePagePathnameSlice = usePagePathnameSlice;