@makeswift/runtime 0.1.9 → 0.1.10

package/dist/index.cjs.js

@@ -50,14 +50,14 @@ var client = require("@apollo/client");
 var batchHttp = require("@apollo/client/link/batch-http");
 var graphql = require("./graphql.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
-var descriptors = require("./descriptors.cjs.js");
+var image = require("./image.cjs.js");
 var textInput = require("./text-input.cjs.js");
 var color = require("./color.cjs.js");
 var shape = require("./shape.cjs.js");
-var image = require("./image.cjs.js");
-var style = require("./style.cjs.js");
+var slot = require("./slot.cjs.js");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
+var boxModels = require("./box-models.cjs.js");
 var reactDom = require("react-dom");
 var parse = require("html-react-parser");
 var Head = require("next/head");
@@ -273,7 +273,7 @@ const INTROSPECTION_QUERY = client.gql`
 `;
 async function introspect(element, client2, store) {
   var _a, _b, _c;
-  const descriptors$1 = reactPage.getPropControllerDescriptors(store.getState());
+  const descriptors = reactPage.getPropControllerDescriptors(store.getState());
   const swatchIds = /* @__PURE__ */ new Set();
   const fileIds = /* @__PURE__ */ new Set();
   const typographyIds = /* @__PURE__ */ new Set();
@@ -306,13 +306,13 @@ async function introspect(element, client2, store) {
             getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
           });
         }
-        if (descriptor.type === descriptors.Types.Shape) {
+        if (descriptor.type === image.Types.Shape) {
           const prop = props[propName];
           if (prop == null)
             return;
           getResourcesFromElementDescriptors(descriptor.options.type, prop);
         }
-        if (descriptor.type === descriptors.Types.List) {
+        if (descriptor.type === image.Types.List) {
           const prop = props[propName];
           if (prop == null)
             return;
@@ -335,7 +335,7 @@ async function introspect(element, client2, store) {
     } else {
       element2 = current;
     }
-    const elementDescriptors = descriptors$1.get(element2.type);
+    const elementDescriptors = descriptors.get(element2.type);
     if (elementDescriptors == null)
       continue;
     getResourcesFromElementDescriptors(elementDescriptors, element2.props);
@@ -345,9 +345,9 @@ async function introspect(element, client2, store) {
     variables: { ids: [...typographyIds] }
   });
   (_c = typographiesResult == null ? void 0 : typographiesResult.data) == null ? void 0 : _c.typographies.forEach((typography) => {
-    typography == null ? void 0 : typography.style.forEach((style2) => {
+    typography == null ? void 0 : typography.style.forEach((style) => {
       var _a2;
-      const swatchId = (_a2 = style2.value.color) == null ? void 0 : _a2.swatchId;
+      const swatchId = (_a2 = style.value.color) == null ? void 0 : _a2.swatchId;
       if (swatchId != null)
         swatchIds.add(swatchId);
     });
@@ -1127,10 +1127,10 @@ function registerComponent$c(runtime) {
     type: "./components/Box/index.js",
     label: "Box",
     props: {
-      id: descriptors.ElementID(),
-      backgrounds: descriptors.Backgrounds(),
-      width: descriptors.Width(),
-      height: descriptors.ResponsiveIconRadioGroup({
+      id: image.ElementID(),
+      backgrounds: image.Backgrounds(),
+      width: image.Width(),
+      height: image.ResponsiveIconRadioGroup({
         label: "Height",
         options: [
           { value: "auto", label: "Auto", icon: "HeightAuto16" },
@@ -1138,7 +1138,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "auto"
       }),
-      verticalAlign: descriptors.ResponsiveIconRadioGroup({
+      verticalAlign: image.ResponsiveIconRadioGroup({
         label: "Align items",
         options: [
           { value: "flex-start", label: "Top", icon: "VerticalAlignStart16" },
@@ -1152,8 +1152,8 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "flex-start"
       }),
-      margin: descriptors.Margin(),
-      padding: descriptors.Padding({
+      margin: image.Margin(),
+      padding: image.Padding({
         preset: [
           {
             deviceId: "desktop",
@@ -1166,16 +1166,16 @@ function registerComponent$c(runtime) {
           }
         ]
       }),
-      border: descriptors.Border(),
-      borderRadius: descriptors.BorderRadius(),
-      boxShadow: descriptors.Shadows(),
-      rowGap: descriptors.GapY((props) => ({
+      border: image.Border(),
+      borderRadius: image.BorderRadius(),
+      boxShadow: image.Shadows(),
+      rowGap: image.GapY((props) => ({
         hidden: props.children == null
       })),
-      columnGap: descriptors.GapX((props) => ({
+      columnGap: image.GapX((props) => ({
         hidden: props.children == null
       })),
-      boxAnimateType: descriptors.ResponsiveSelect({
+      boxAnimateType: image.ResponsiveSelect({
         label: "Animate box in",
         labelOrientation: "vertical",
         options: [
@@ -1191,7 +1191,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "none"
       }),
-      boxAnimateDuration: descriptors.ResponsiveNumber((props, device) => ({
+      boxAnimateDuration: image.ResponsiveNumber((props, device) => ({
         label: "Box duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
@@ -1199,7 +1199,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnBoxAnimation(props, device)
       })),
-      boxAnimateDelay: descriptors.ResponsiveNumber((props, device) => ({
+      boxAnimateDelay: image.ResponsiveNumber((props, device) => ({
         label: "Box delay",
         defaultValue: DEFAULT_BOX_ANIMATE_DELAY,
         min: 0,
@@ -1207,7 +1207,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnBoxAnimation(props, device)
       })),
-      itemAnimateType: descriptors.ResponsiveSelect({
+      itemAnimateType: image.ResponsiveSelect({
         label: "Animate items in",
         labelOrientation: "vertical",
         options: [
@@ -1223,7 +1223,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "none"
       }),
-      itemAnimateDuration: descriptors.ResponsiveNumber((props, device) => ({
+      itemAnimateDuration: image.ResponsiveNumber((props, device) => ({
         label: "Items duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
@@ -1231,7 +1231,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      itemAnimateDelay: descriptors.ResponsiveNumber((props, device) => ({
+      itemAnimateDelay: image.ResponsiveNumber((props, device) => ({
         label: "Items delay",
         defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,
         min: 0,
@@ -1239,7 +1239,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      itemStaggerDuration: descriptors.ResponsiveNumber((props, device) => ({
+      itemStaggerDuration: image.ResponsiveNumber((props, device) => ({
         label: "Stagger",
         min: 0,
         step: 0.05,
@@ -1247,11 +1247,11 @@ function registerComponent$c(runtime) {
         defaultValue: DEFAULT_ITEM_STAGGER_DURATION,
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      hidePlaceholder: descriptors.Checkbox((props) => ({
+      hidePlaceholder: image.Checkbox((props) => ({
         label: "Hide placeholder",
         hidden: props.children != null
       })),
-      children: descriptors.Grid()
+      children: image.Grid()
     }
   });
 }
@@ -1262,9 +1262,9 @@ function registerComponent$b(runtime) {
     type: "./components/Button/index.js",
     label: "Button",
     props: {
-      id: descriptors.ElementID(),
-      children: descriptors.TextInput({ placeholder: "Button text" }),
-      link: descriptors.Link({
+      id: image.ElementID(),
+      children: image.TextInput({ placeholder: "Button text" }),
+      link: image.Link({
         defaultValue: {
           type: "OPEN_PAGE",
           payload: {
@@ -1273,7 +1273,7 @@ function registerComponent$b(runtime) {
           }
         }
       }),
-      variant: descriptors.ResponsiveSelect({
+      variant: image.ResponsiveSelect({
         label: "Style",
         labelOrientation: "horizontal",
         options: [
@@ -1287,7 +1287,7 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "flat"
       }),
-      shape: descriptors.ResponsiveIconRadioGroup({
+      shape: image.ResponsiveIconRadioGroup({
         label: "Shape",
         options: [
           { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -1296,7 +1296,7 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "rounded"
       }),
-      size: descriptors.ResponsiveIconRadioGroup({
+      size: image.ResponsiveIconRadioGroup({
         label: "Size",
         options: [
           { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -1305,19 +1305,19 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "medium"
       }),
-      color: descriptors.ResponsiveColor((props, device) => {
+      color: image.ResponsiveColor((props, device) => {
         var _a;
         const variant = props.variant;
         const hidden = ((_a = findDeviceOverride(variant, device)) == null ? void 0 : _a.value) === "clear";
         return { placeholder: "black", hidden };
       }),
-      textColor: descriptors.ResponsiveColor({
+      textColor: image.ResponsiveColor({
         label: "Text color",
         placeholder: "white"
       }),
-      textStyle: descriptors.TextStyle(),
-      width: descriptors.Width(),
-      margin: descriptors.Margin()
+      textStyle: image.TextStyle(),
+      width: image.Width(),
+      margin: image.Margin()
     }
   });
 }
@@ -1329,17 +1329,17 @@ function registerComponent$a(runtime) {
     label: "Carousel",
     icon: "Carousel40",
     props: {
-      id: descriptors.ElementID(),
-      images: descriptors.Images({
+      id: image.ElementID(),
+      images: image.Images({
         preset: [
           { key: uuid__default["default"](), props: {} },
           { key: uuid__default["default"](), props: {} },
           { key: uuid__default["default"](), props: {} }
         ]
       }),
-      width: descriptors.Width({ defaultValue: { value: 400, unit: "px" } }),
-      margin: descriptors.Margin(),
-      pageSize: descriptors.ResponsiveNumber((props) => {
+      width: image.Width({ defaultValue: { value: 400, unit: "px" } }),
+      margin: image.Margin(),
+      pageSize: image.ResponsiveNumber((props) => {
         var _a;
         const images = props.images;
         const imagesLength = (_a = images == null ? void 0 : images.length) != null ? _a : 0;
@@ -1351,7 +1351,7 @@ function registerComponent$a(runtime) {
           step: 1
         };
       }),
-      step: descriptors.ResponsiveNumber((props, device) => {
+      step: image.ResponsiveNumber((props, device) => {
         var _a, _b;
         const pageSize = props.pageSize;
         const pageSizeValue = (_b = (_a = findDeviceOverride(pageSize, device)) == null ? void 0 : _a.value) != null ? _b : 1;
@@ -1363,7 +1363,7 @@ function registerComponent$a(runtime) {
           step: 1
         };
       }),
-      slideAlignment: descriptors.ResponsiveIconRadioGroup({
+      slideAlignment: image.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "Top", value: "flex-start", icon: "VerticalAlignStart16" },
@@ -1372,13 +1372,13 @@ function registerComponent$a(runtime) {
         ],
         defaultValue: "center"
       }),
-      gap: descriptors.GapX({
+      gap: image.GapX({
         label: "Gap",
         step: 5,
         defaultValue: { value: 0, unit: "px" }
       }),
-      autoplay: descriptors.Checkbox({ label: "Autoplay" }),
-      delay: descriptors.Number((props) => ({
+      autoplay: image.Checkbox({ label: "Autoplay" }),
+      delay: image.Number((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
@@ -1386,8 +1386,8 @@ function registerComponent$a(runtime) {
         suffix: "seconds",
         hidden: !props.autoplay
       })),
-      showArrows: descriptors.Checkbox({ preset: true, label: "Show arrows" }),
-      arrowPosition: descriptors.ResponsiveIconRadioGroup((props) => ({
+      showArrows: image.Checkbox({ preset: true, label: "Show arrows" }),
+      arrowPosition: image.ResponsiveIconRadioGroup((props) => ({
         label: "Arrow position",
         options: [
           { label: "Inside", value: "inside", icon: "ArrowInside16" },
@@ -1397,24 +1397,24 @@ function registerComponent$a(runtime) {
         defaultValue: "inside",
         hidden: props.showArrows === false
       })),
-      arrowColor: descriptors.ResponsiveColor((props) => ({
+      arrowColor: image.ResponsiveColor((props) => ({
         label: "Arrow color",
         placeholder: "black",
         hidden: props.showArrows === false
       })),
-      arrowBackground: descriptors.ResponsiveColor((props) => ({
+      arrowBackground: image.ResponsiveColor((props) => ({
         label: "Arrow background",
         placeholder: "white",
         hidden: props.showArrows === false
       })),
-      showDots: descriptors.Checkbox({ preset: true, label: "Show dots" }),
-      dotColor: descriptors.ResponsiveColor((props) => ({
+      showDots: image.Checkbox({ preset: true, label: "Show dots" }),
+      dotColor: image.ResponsiveColor((props) => ({
         label: "Dot color",
         placeholder: "black",
         hidden: props.showDots === false
       })),
-      slideBorder: descriptors.Border(),
-      slideBorderRadius: descriptors.BorderRadius()
+      slideBorder: image.Border(),
+      slideBorderRadius: image.BorderRadius()
     }
   });
 }
@@ -1426,11 +1426,11 @@ function registerComponent$9(runtime) {
     label: "Countdown",
     icon: "Countdown40",
     props: {
-      id: descriptors.ElementID(),
-      date: descriptors.Date(() => ({
+      id: image.ElementID(),
+      date: image.Date(() => ({
         preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
       })),
-      variant: descriptors.ResponsiveIconRadioGroup({
+      variant: image.ResponsiveIconRadioGroup({
         label: "Style",
         options: [
           { label: "Filled", value: "filled", icon: "CountdownSolid16" },
@@ -1449,7 +1449,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "filled"
       }),
-      shape: descriptors.ResponsiveIconRadioGroup({
+      shape: image.ResponsiveIconRadioGroup({
         label: "Shape",
         options: [
           { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -1458,7 +1458,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "rounded"
       }),
-      size: descriptors.ResponsiveIconRadioGroup({
+      size: image.ResponsiveIconRadioGroup({
         label: "Size",
         options: [
           { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -1467,7 +1467,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "medium"
       }),
-      gap: descriptors.GapX({
+      gap: image.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Gap",
         step: 1,
@@ -1475,29 +1475,29 @@ function registerComponent$9(runtime) {
         max: 100,
         defaultValue: { value: 0, unit: "px" }
       }),
-      numberFont: descriptors.Font({ label: "Number font" }),
-      numberColor: descriptors.ResponsiveColor({
+      numberFont: image.Font({ label: "Number font" }),
+      numberColor: image.ResponsiveColor({
         label: "Number color",
         placeholder: "white"
       }),
-      blockColor: descriptors.ResponsiveColor({
+      blockColor: image.ResponsiveColor({
         label: "Block color",
         placeholder: "black"
       }),
-      labelFont: descriptors.Font({ label: "Label font" }),
-      labelColor: descriptors.ResponsiveColor({
+      labelFont: image.Font({ label: "Label font" }),
+      labelColor: image.ResponsiveColor({
         label: "Label color",
         placeholder: "black"
       }),
-      width: descriptors.Width({ defaultValue: { value: 560, unit: "px" } }),
-      margin: descriptors.Margin(),
-      daysLabel: descriptors.TextInput({ label: "Days label", placeholder: "Days" }),
-      hoursLabel: descriptors.TextInput({ label: "Hours label", placeholder: "Hours" }),
-      minutesLabel: descriptors.TextInput({
+      width: image.Width({ defaultValue: { value: 560, unit: "px" } }),
+      margin: image.Margin(),
+      daysLabel: image.TextInput({ label: "Days label", placeholder: "Days" }),
+      hoursLabel: image.TextInput({ label: "Hours label", placeholder: "Hours" }),
+      minutesLabel: image.TextInput({
         label: "Minutes label",
         placeholder: "Minutes"
       }),
-      secondsLabel: descriptors.TextInput({
+      secondsLabel: image.TextInput({
         label: "Seconds label",
         placeholder: "Seconds"
       })
@@ -1512,8 +1512,8 @@ function registerComponent$8(runtime) {
     label: "Divider",
     icon: "Divider40",
     props: {
-      id: descriptors.ElementID(),
-      variant: descriptors.ResponsiveSelect({
+      id: image.ElementID(),
+      variant: image.ResponsiveSelect({
         label: "Style",
         labelOrientation: "horizontal",
         options: [
@@ -1524,14 +1524,14 @@ function registerComponent$8(runtime) {
         ],
         defaultValue: "solid"
       }),
-      thickness: descriptors.ResponsiveLength({
+      thickness: image.ResponsiveLength({
         label: "Height",
         defaultValue: { value: 1, unit: "px" },
         options: [{ value: "px", label: "Pixels", icon: "Px16" }]
       }),
-      color: descriptors.ResponsiveColor({ placeholder: "black" }),
-      width: descriptors.Width({ defaultValue: { value: 100, unit: "%" } }),
-      margin: descriptors.Margin()
+      color: image.ResponsiveColor({ placeholder: "black" }),
+      width: image.Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: image.Margin()
     }
   });
 }
@@ -1543,10 +1543,10 @@ function registerComponent$7(runtime) {
     label: "Embed",
     icon: "Code40",
     props: {
-      id: descriptors.ElementID(),
-      html: descriptors.TextArea({ label: "Code", rows: 20 }),
-      width: descriptors.Width({}),
-      margin: descriptors.Margin()
+      id: image.ElementID(),
+      html: image.TextArea({ label: "Code", rows: 20 }),
+      width: image.Width({}),
+      margin: image.Margin()
     }
   });
 }
@@ -1582,10 +1582,10 @@ function registerComponent$6(runtime) {
     label: "Form",
     icon: "Form40",
     props: {
-      id: descriptors.ElementID(),
-      tableId: descriptors.Table(),
-      fields: descriptors.TableFormFields(),
-      submitLink: descriptors.Link((props) => ({
+      id: image.ElementID(),
+      tableId: image.Table(),
+      fields: image.TableFormFields(),
+      submitLink: image.Link((props) => ({
         label: "Redirect to",
         options: [
           { value: "OPEN_PAGE", label: "Open page" },
@@ -1593,13 +1593,13 @@ function registerComponent$6(runtime) {
         ],
         hidden: props.tableId == null
       })),
-      gap: descriptors.GapY((props) => ({
+      gap: image.GapY((props) => ({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Gap",
         defaultValue: { value: 0, unit: "px" },
         hidden: props.tableId == null
       })),
-      shape: descriptors.ResponsiveIconRadioGroup((props) => ({
+      shape: image.ResponsiveIconRadioGroup((props) => ({
         label: "Shape",
         options: [
           { label: "Pill", value: Shapes.PILL, icon: "ButtonPill16" },
@@ -1609,7 +1609,7 @@ function registerComponent$6(runtime) {
         defaultValue: Shapes.ROUNDED,
         hidden: props.tableId == null
       })),
-      size: descriptors.ResponsiveIconRadioGroup((props) => ({
+      size: image.ResponsiveIconRadioGroup((props) => ({
         label: "Size",
         options: [
           { label: "Small", value: Sizes.SMALL, icon: "SizeSmall16" },
@@ -1619,7 +1619,7 @@ function registerComponent$6(runtime) {
         defaultValue: Sizes.MEDIUM,
         hidden: (props == null ? void 0 : props.tableId) == null
       })),
-      contrast: descriptors.ResponsiveIconRadioGroup((props) => ({
+      contrast: image.ResponsiveIconRadioGroup((props) => ({
         label: "Color",
         options: [
           { label: "Light mode", value: Contrasts.LIGHT, icon: "Sun16" },
@@ -1628,8 +1628,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: image.TextStyle({ label: "Label text style" }),
+      labelTextColor: image.ResponsiveColor((props, device) => {
         const hidden = props.tableId == null;
         const responsiveContrast = props.contrast;
         const contrast = findDeviceOverride(responsiveContrast, device);
@@ -1639,23 +1639,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: image.TextStyle({ label: "Button text style" }),
+      brandColor: image.ResponsiveColor((props) => ({
         label: "Button color",
         placeholder: "black",
         hidden: props.tableId == null
       })),
-      submitTextColor: descriptors.ResponsiveColor((props) => ({
+      submitTextColor: image.ResponsiveColor((props) => ({
         label: "Button text color",
         placeholder: "white",
         hidden: props.tableId == null
       })),
-      submitLabel: descriptors.TextInput((props) => ({
+      submitLabel: image.TextInput((props) => ({
         label: "Button label",
         placeholder: "Submit",
         hidden: props.tableId == null
       })),
-      submitVariant: descriptors.ResponsiveSelect((props) => ({
+      submitVariant: image.ResponsiveSelect((props) => ({
         label: "Button style",
         options: [
           { value: "flat", label: "Flat" },
@@ -1669,11 +1669,11 @@ function registerComponent$6(runtime) {
         defaultValue: "flat",
         hidden: props.tableId == null
       })),
-      submitWidth: descriptors.ResponsiveLength((props) => ({
+      submitWidth: image.ResponsiveLength((props) => ({
         label: "Button width",
         hidden: props.tableId == null
       })),
-      submitAlignment: descriptors.ResponsiveIconRadioGroup((props) => ({
+      submitAlignment: image.ResponsiveIconRadioGroup((props) => ({
         label: "Button alignment",
         options: [
           { label: "Left", value: Alignments.LEFT, icon: "AlignLeft16" },
@@ -1683,11 +1683,11 @@ function registerComponent$6(runtime) {
         defaultValue: Alignments.CENTER,
         hidden: props.tableId == null
       })),
-      width: descriptors.Width({
+      width: image.Width({
         preset: [{ deviceId: "desktop", value: { value: 550, unit: "px" } }],
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: descriptors.Margin()
+      margin: image.Margin()
     }
   });
 }
@@ -1698,17 +1698,17 @@ function registerComponent$5(runtime) {
     type: "./components/Image/index.js",
     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(),
-      padding: descriptors.Padding(),
-      border: descriptors.Border(),
-      borderRadius: descriptors.BorderRadius(),
-      boxShadow: descriptors.Shadows(),
-      opacity: descriptors.ResponsiveOpacity()
+      id: image.ElementID(),
+      file: image.Image(),
+      altText: image.TextInput({ label: "Alt text" }),
+      link: image.Link({ label: "On click" }),
+      width: image.Width(),
+      margin: image.Margin(),
+      padding: image.Padding(),
+      border: image.Border(),
+      borderRadius: image.BorderRadius(),
+      boxShadow: image.Shadows(),
+      opacity: image.ResponsiveOpacity()
     }
   });
 }
@@ -1720,21 +1720,21 @@ function registerComponent$4(runtime) {
     label: "Navigation",
     icon: "Navigation40",
     props: {
-      id: descriptors.ElementID(),
-      links: descriptors.NavigationLinks(),
-      linkTextStyle: descriptors.TextStyle((props) => {
+      id: image.ElementID(),
+      links: image.NavigationLinks(),
+      linkTextStyle: image.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: image.Checkbox({ preset: true, label: "Show logo" }),
+      logoFile: image.Image((props) => ({
         label: "Logo",
         hidden: props.showLogo === false
       })),
-      logoWidth: descriptors.ResponsiveLength((props) => ({
+      logoWidth: image.ResponsiveLength((props) => ({
         preset: [{ deviceId: "desktop", value: { value: 100, unit: "px" } }],
         label: "Logo width",
         min: 0,
@@ -1742,15 +1742,15 @@ function registerComponent$4(runtime) {
         options: [{ value: "px", label: "Pixels", icon: "Px16" }],
         hidden: props.showLogo === false
       })),
-      logoAltText: descriptors.TextInput((props) => ({
+      logoAltText: image.TextInput((props) => ({
         label: "Logo alt text",
         hidden: props.showLogo === false
       })),
-      logoLink: descriptors.Link((props) => ({
+      logoLink: image.Link((props) => ({
         label: "Logo on click",
         hidden: props.showLogo === false
       })),
-      alignment: descriptors.ResponsiveIconRadioGroup({
+      alignment: image.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "Left", value: "flex-start", icon: "AlignLeft16" },
@@ -1759,7 +1759,7 @@ function registerComponent$4(runtime) {
         ],
         defaultValue: "flex-end"
       }),
-      gutter: descriptors.GapX({
+      gutter: image.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Link gap",
         min: 0,
@@ -1767,14 +1767,14 @@ function registerComponent$4(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      mobileMenuAnimation: descriptors.ResponsiveSelect({
+      mobileMenuAnimation: image.ResponsiveSelect({
         label: "Mobile menu",
         options: [
           { value: "coverRight", label: "Cover from right" },
           { value: "coverLeft", label: "Cover from left" }
         ]
       }),
-      mobileMenuOpenIconColor: descriptors.ResponsiveColor((props, device) => {
+      mobileMenuOpenIconColor: image.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !findDeviceOverride(mobileMenuAnimation, device);
         return {
@@ -1783,7 +1783,7 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      mobileMenuCloseIconColor: descriptors.ResponsiveColor((props, device) => {
+      mobileMenuCloseIconColor: image.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !findDeviceOverride(mobileMenuAnimation, device);
         return {
@@ -1792,7 +1792,7 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      mobileMenuBackgroundColor: descriptors.ResponsiveColor((props, device) => {
+      mobileMenuBackgroundColor: image.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !findDeviceOverride(mobileMenuAnimation, device);
         return {
@@ -1801,8 +1801,8 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      width: descriptors.Width({ defaultValue: { value: 100, unit: "%" } }),
-      margin: descriptors.Margin()
+      width: image.Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: image.Margin()
     }
   });
 }
@@ -1814,10 +1814,10 @@ function registerComponent$3(runtime) {
     label: "Page",
     hidden: true,
     props: {
-      children: descriptors.Grid(),
-      backgrounds: descriptors.Backgrounds(),
-      rowGap: descriptors.GapY(),
-      columnGap: descriptors.GapX()
+      children: image.Grid(),
+      backgrounds: image.Backgrounds(),
+      rowGap: image.GapY(),
+      columnGap: image.GapX()
     }
   });
 }
@@ -1829,8 +1829,8 @@ function registerComponent$2(runtime) {
     label: "Social Links",
     icon: "SocialLinks40",
     props: {
-      id: descriptors.ElementID(),
-      links: descriptors.SocialLinks({
+      id: image.ElementID(),
+      links: image.SocialLinks({
         preset: {
           links: [
             {
@@ -1849,7 +1849,7 @@ function registerComponent$2(runtime) {
           openInNewTab: false
         }
       }),
-      shape: descriptors.ResponsiveIconRadioGroup((props) => {
+      shape: image.ResponsiveIconRadioGroup((props) => {
         const links = props.links;
         return {
           label: "Shape",
@@ -1863,7 +1863,7 @@ function registerComponent$2(runtime) {
           hidden: links == null || links.links.length === 0
         };
       }),
-      size: descriptors.ResponsiveIconRadioGroup((props) => {
+      size: image.ResponsiveIconRadioGroup((props) => {
         const links = props.links;
         return {
           label: "Size",
@@ -1876,7 +1876,7 @@ function registerComponent$2(runtime) {
           hidden: links == null || links.links.length === 0
         };
       }),
-      hoverStyle: descriptors.ResponsiveSelect((props) => {
+      hoverStyle: image.ResponsiveSelect((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -1892,7 +1892,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      fill: descriptors.ResponsiveColor((props) => {
+      fill: image.ResponsiveColor((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -1900,7 +1900,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      backgroundColor: descriptors.ResponsiveColor((props) => {
+      backgroundColor: image.ResponsiveColor((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -1908,7 +1908,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      alignment: descriptors.ResponsiveIconRadioGroup({
+      alignment: image.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "flex-start", value: "flex-start", icon: "AlignLeft16" },
@@ -1917,7 +1917,7 @@ function registerComponent$2(runtime) {
         ],
         defaultValue: "center"
       }),
-      gutter: descriptors.GapX({
+      gutter: image.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Link gap",
         min: 0,
@@ -1925,8 +1925,8 @@ function registerComponent$2(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      width: descriptors.Width({ defaultValue: { value: 100, unit: "%" } }),
-      margin: descriptors.Margin({
+      width: image.Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: image.Margin({
         preset: [
           {
             deviceId: "desktop",
@@ -1949,8 +1949,8 @@ function registerComponent$1(runtime) {
     type: "./components/Text/index.js",
     label: "Text",
     props: {
-      id: descriptors.ElementID(),
-      text: descriptors.RichText(() => ({
+      id: image.ElementID(),
+      text: image.RichText(() => ({
         preset: {
           document: {
             nodes: [
@@ -1993,11 +1993,11 @@ function registerComponent$1(runtime) {
           }
         }
       })),
-      width: descriptors.Width({
+      width: image.Width({
         preset: [{ deviceId: "desktop", value: { value: 700, unit: "px" } }],
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: descriptors.Margin({
+      margin: image.Margin({
         preset: [
           {
             deviceId: "desktop",
@@ -2021,11 +2021,11 @@ function registerComponent(runtime) {
     label: "Video",
     icon: "Video40",
     props: {
-      id: descriptors.ElementID(),
-      video: descriptors.Video({ preset: { controls: true } }),
-      width: descriptors.Width({ defaultValue: { value: 560, unit: "px" } }),
-      margin: descriptors.Margin(),
-      borderRadius: descriptors.BorderRadius()
+      id: image.ElementID(),
+      video: image.Video({ preset: { controls: true } }),
+      width: image.Width({ defaultValue: { value: 560, unit: "px" } }),
+      margin: image.Margin(),
+      borderRadius: image.BorderRadius()
     }
   });
 }
@@ -2200,6 +2200,9 @@ function responsiveWidth(widthData, defaultValue = "100%") {
     width: typeof width === "object" ? `${width.value}${width.unit}` : width
   })));
 }
+function colorToString(color2) {
+  return color2 && color2.swatch ? `hsla(${color2.swatch.hue},${color2.swatch.saturation}%,${color2.swatch.lightness}%,${color2.alpha})` : "";
+}
 function murmur2(str) {
   var h = 0;
   var k, i = 0, len = str.length;
@@ -2458,45 +2461,55 @@ var insertStyles = function insertStyles2(cache, serialized, isStringTag) {
     } while (current !== void 0);
   }
 };
-function colorToString(color2) {
-  return color2 && color2.swatch ? `hsla(${color2.swatch.hue},${color2.swatch.saturation}%,${color2.swatch.lightness}%,${color2.alpha})` : "";
+const isServer = typeof window === "undefined";
+const useInsertionEffectSpecifier = "useInsertionEffect";
+const useInsertionEffect = (_e = React__namespace[useInsertionEffectSpecifier]) != null ? _e : React__namespace.useLayoutEffect;
+function useStyle(style) {
+  const serialized = serializeStyles([style], css.cache.registered);
+  registerStyles(css.cache, serialized, false);
+  useInsertionEffect(() => {
+    insertStyles(css.cache, serialized, false);
+  });
+  if (isServer)
+    insertStyles(css.cache, serialized, false);
+  return `${css.cache.key}-${serialized.name}`;
 }
-function useStyleControlCssObject(style$1, controlDefinition) {
+function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
-  return __spreadValues(__spreadValues({}, properties.includes(style.StyleControlProperty.Width) && {
+  return __spreadValues(__spreadValues({}, properties.includes(image.StyleControlProperty.Width) && {
     maxWidth: "100%"
   }), responsiveStyle([
-    style$1 == null ? void 0 : style$1.width,
-    style$1 == null ? void 0 : style$1.margin,
-    style$1 == null ? void 0 : style$1.padding,
-    useBorder(style$1 == null ? void 0 : style$1.border),
-    style$1 == null ? void 0 : style$1.borderRadius,
-    style$1 == null ? void 0 : style$1.textStyle
+    style == null ? void 0 : style.width,
+    style == null ? void 0 : style.margin,
+    style == null ? void 0 : style.padding,
+    useBorder(style == null ? void 0 : style.border),
+    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;
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(style.StyleControlProperty.Width) && {
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(image.StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
-    }), properties.includes(style.StyleControlProperty.Margin) && {
+    }), properties.includes(image.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(style.StyleControlProperty.Padding) && {
+    }), properties.includes(image.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(style.StyleControlProperty.Border) && {
+    }), properties.includes(image.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(style.StyleControlProperty.BorderRadius) && {
+    }), properties.includes(image.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
-    }), properties.includes(style.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(image.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 : []
     }));
@@ -2533,18 +2546,9 @@ function useStyleControlCssObject(style$1, controlDefinition) {
     return `${fontSize.value}${fontSize.unit}`;
   }
 }
-const useInsertionEffectSpecifier = "useInsertionEffect";
-const useInsertionEffect = (_e = React__namespace[useInsertionEffectSpecifier]) != null ? _e : React__namespace.useLayoutEffect;
-const isServer = typeof window === "undefined";
 function useFormattedStyle(styleControlData, controlDefinition) {
-  const style2 = useStyleControlCssObject(styleControlData, controlDefinition);
-  if (isServer)
-    return css.css(style2);
-  const serialized = serializeStyles([style2], css.cache.registered);
-  useInsertionEffect(() => {
-    insertStyles(css.cache, serialized, false);
-  });
-  return `${css.cache.key}-${serialized.name}`;
+  const style = useStyleControlCssObject(styleControlData, controlDefinition);
+  return useStyle(style);
 }
 function RenderHook({
   hook: useHook,
@@ -2771,13 +2775,186 @@ function ControlValue({
       return children(data);
   }
 }
+const getIndexes = (spans, index) => {
+  const flattened = spans.reduce((a, s) => a.concat(s), []);
+  if (index < 0 || index > flattened.length)
+    throw new RangeError();
+  let remainder = index;
+  let rowIndex = 0;
+  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {
+    remainder -= spans[rowIndex].length;
+    rowIndex += 1;
+  }
+  return [rowIndex, remainder];
+};
+function useSlot(data, control) {
+  if (data == null || data.elements.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Slot.Placeholder, {
+      control
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Slot, {
+    control,
+    children: data.elements.map((element, i) => /* @__PURE__ */ jsxRuntime.jsx(Slot.Item, {
+      control,
+      grid: data.columns,
+      index: i,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Element, {
+        element
+      })
+    }, element.key))
+  });
+}
+function Slot(_f) {
+  var _g = _f, {
+    as,
+    control,
+    children,
+    className
+  } = _g, restOfProps = __objRest(_g, [
+    "as",
+    "control",
+    "children",
+    "className"
+  ]);
+  const As = as != null ? as : "div";
+  const [element, setElement] = React.useState(null);
+  const baseClassName = useStyle({
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%"
+  });
+  React.useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ jsxRuntime.jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setElement,
+    className: css.cx(baseClassName, className),
+    children
+  }));
+}
+Slot.Placeholder = SlotPlaceholder;
+Slot.Item = SlotItem;
+function SlotItem(_h) {
+  var _i = _h, {
+    as,
+    control,
+    grid,
+    index,
+    children,
+    className
+  } = _i, restOfProps = __objRest(_i, [
+    "as",
+    "control",
+    "grid",
+    "index",
+    "children",
+    "className"
+  ]);
+  const As = as != null ? as : "div";
+  const [element, setElement] = React.useState(null);
+  const baseClassName = useStyle(__spreadValues({
+    display: "flex"
+  }, responsiveStyle([grid], ([{
+    count = 12,
+    spans = [[12]]
+  } = {}]) => {
+    const [rowIndex, columnIndex] = getIndexes(spans, index);
+    const span = spans[rowIndex][columnIndex];
+    const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`;
+    return span === 0 ? {
+      display: "none"
+    } : {
+      flexBasis,
+      minWidth: flexBasis
+    };
+  })));
+  React.useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
+    });
+  }, [element, control, index]);
+  return /* @__PURE__ */ jsxRuntime.jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setElement,
+    className: css.cx(baseClassName, className),
+    children
+  }));
+}
+function SlotPlaceholder({
+  control
+}) {
+  const [element, setElement] = React.useState(null);
+  React.useEffect(() => {
+    if (element == null || control == null)
+      return;
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref: setElement,
+    className: useStyle({
+      width: "100%",
+      background: "rgba(161, 168, 194, 0.18)",
+      height: "80px"
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      height: "100%",
+      className: useStyle({
+        overflow: "visible",
+        padding: 8
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("rect", {
+        x: 0,
+        y: 0,
+        width: "100%",
+        height: "100%",
+        strokeWidth: 2,
+        strokeDasharray: "4 2",
+        fill: "none",
+        stroke: "rgba(161, 168, 194, 0.40)",
+        rx: "4",
+        ry: "4"
+      })
+    })
+  });
+}
+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);
+  };
+}
 function useDeviceMode() {
   return "desktop";
 }
 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 === descriptors.WidthControlValueFormats.ClassName ? css.css(responsiveWidth(value, options.defaultValue)) : value, [value, options.defaultValue, options.format]);
+  return React.useMemo(() => options.format === image.WidthControlValueFormats.ClassName ? css.css(responsiveWidth(value, options.defaultValue)) : value, [value, options.defaultValue, options.format]);
 }
 function PropsValue({
   element,
@@ -2787,7 +2964,14 @@ function PropsValue({
   const store = useStore();
   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 reactPage.getPropControllers(state, documentKey, element.key);
+  });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
+    var _a2;
     switch (descriptor.type) {
       case textInput.CheckboxControlType:
       case textInput.NumberControlType:
@@ -2807,7 +2991,7 @@ function PropsValue({
             [propName]: value
           }))
         });
-      case style.StyleControlType:
+      case image.StyleControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useFormattedStyle,
           parameters: [props[propName], descriptor],
@@ -2815,7 +2999,17 @@ function PropsValue({
             [propName]: value
           }))
         }, descriptor.type);
-      case descriptors.Types.Width:
+      case slot.SlotControlType: {
+        const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
+        return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+          hook: useSlot,
+          parameters: [props[propName], control],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      }
+      case image.Types.Width:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useWidth,
           parameters: [props[propName], descriptor, props],
@@ -2823,7 +3017,7 @@ function PropsValue({
             [propName]: value
           }))
         }, descriptor.type);
-      case descriptors.Types.ResponsiveColor:
+      case image.Types.ResponsiveColor:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useResponsiveColor,
           parameters: [props[propName]],
@@ -3157,6 +3351,7 @@ exports.findDeviceOverride = findDeviceOverride;
 exports.forwardNextDynamicRef = forwardNextDynamicRef;
 exports.getDevice = getDevice;
 exports.getDeviceMediaQuery = getDeviceMediaQuery;
+exports.getIndexes = getIndexes;
 exports.getServerSideProps = getServerSideProps;
 exports.getStaticPaths = getStaticPaths;
 exports.getStaticProps = getStaticProps;