@makeswift/runtime 0.2.15 → 0.2.17

package/dist/index.cjs.js

@@ -45,13 +45,12 @@ var client = require("@apollo/client");
 var batchHttp = require("@apollo/client/link/batch-http");
 var slate = require("slate");
 var graphql = require("./graphql.cjs.js");
-var image = require("./image.cjs.js");
-var shape = require("./shape.cjs.js");
+var slot = require("./slot.cjs.js");
+var control = require("./control.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 var styled = require("styled-components");
 var textInput = require("./text-input.cjs.js");
-var color = require("./color.cjs.js");
-var slot = require("./slot.cjs.js");
+var combobox = require("./combobox.cjs.js");
 var css = require("@emotion/css");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
@@ -341,13 +340,13 @@ async function introspect(element, client2, store) {
         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) => remaining.push(child));
-        if (descriptor.type === shape.ShapeControlType) {
+        if (descriptor.type === control.ShapeControlType) {
           const prop = props[propName];
           if (prop == null)
             return;
           getResourcesFromElementDescriptors(descriptor.config.type, prop);
         }
-        if (descriptor.type === shape.ListControlType) {
+        if (descriptor.type === control.ListControlType) {
           const prop = props[propName];
           if (prop == null)
             return;
@@ -355,13 +354,13 @@ async function introspect(element, client2, store) {
             getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
           });
         }
-        if (descriptor.type === image.Types.Shape) {
+        if (descriptor.type === slot.Types.Shape) {
           const prop = props[propName];
           if (prop == null)
             return;
           getResourcesFromElementDescriptors(descriptor.options.type, prop);
         }
-        if (descriptor.type === image.Types.List) {
+        if (descriptor.type === slot.Types.List) {
           const prop = props[propName];
           if (prop == null)
             return;
@@ -1002,7 +1001,7 @@ class Document$1 extends NextDocument__default["default"] {
     });
   }
 }
-const version = "0.2.15";
+const version = "0.2.17";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
@@ -1350,10 +1349,10 @@ function registerComponent$c(runtime) {
     type: MakeswiftComponentType.Box,
     label: "Box",
     props: {
-      id: image.ElementID(),
-      backgrounds: image.Backgrounds(),
-      width: image.Width(),
-      height: image.ResponsiveIconRadioGroup({
+      id: slot.ElementID(),
+      backgrounds: slot.Backgrounds(),
+      width: slot.Width(),
+      height: slot.ResponsiveIconRadioGroup({
         label: "Height",
         options: [
           { value: "auto", label: "Auto", icon: "HeightAuto16" },
@@ -1361,7 +1360,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "auto"
       }),
-      verticalAlign: image.ResponsiveIconRadioGroup({
+      verticalAlign: slot.ResponsiveIconRadioGroup({
         label: "Align items",
         options: [
           { value: "flex-start", label: "Top", icon: "VerticalAlignStart16" },
@@ -1375,8 +1374,8 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "flex-start"
       }),
-      margin: image.Margin(),
-      padding: image.Padding({
+      margin: slot.Margin(),
+      padding: slot.Padding({
         preset: [
           {
             deviceId: "desktop",
@@ -1389,16 +1388,16 @@ function registerComponent$c(runtime) {
           }
         ]
       }),
-      border: image.Border(),
-      borderRadius: image.BorderRadius(),
-      boxShadow: image.Shadows(),
-      rowGap: image.GapY((props) => ({
+      border: slot.Border(),
+      borderRadius: slot.BorderRadius(),
+      boxShadow: slot.Shadows(),
+      rowGap: slot.GapY((props) => ({
         hidden: props.children == null
       })),
-      columnGap: image.GapX((props) => ({
+      columnGap: slot.GapX((props) => ({
         hidden: props.children == null
       })),
-      boxAnimateType: image.ResponsiveSelect({
+      boxAnimateType: slot.ResponsiveSelect({
         label: "Animate box in",
         labelOrientation: "vertical",
         options: [
@@ -1414,7 +1413,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "none"
       }),
-      boxAnimateDuration: image.ResponsiveNumber((props, device) => ({
+      boxAnimateDuration: slot.ResponsiveNumber((props, device) => ({
         label: "Box duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
@@ -1422,7 +1421,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnBoxAnimation(props, device)
       })),
-      boxAnimateDelay: image.ResponsiveNumber((props, device) => ({
+      boxAnimateDelay: slot.ResponsiveNumber((props, device) => ({
         label: "Box delay",
         defaultValue: DEFAULT_BOX_ANIMATE_DELAY,
         min: 0,
@@ -1430,7 +1429,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnBoxAnimation(props, device)
       })),
-      itemAnimateType: image.ResponsiveSelect({
+      itemAnimateType: slot.ResponsiveSelect({
         label: "Animate items in",
         labelOrientation: "vertical",
         options: [
@@ -1446,7 +1445,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "none"
       }),
-      itemAnimateDuration: image.ResponsiveNumber((props, device) => ({
+      itemAnimateDuration: slot.ResponsiveNumber((props, device) => ({
         label: "Items duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
@@ -1454,7 +1453,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      itemAnimateDelay: image.ResponsiveNumber((props, device) => ({
+      itemAnimateDelay: slot.ResponsiveNumber((props, device) => ({
         label: "Items delay",
         defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,
         min: 0,
@@ -1462,7 +1461,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      itemStaggerDuration: image.ResponsiveNumber((props, device) => ({
+      itemStaggerDuration: slot.ResponsiveNumber((props, device) => ({
         label: "Stagger",
         min: 0,
         step: 0.05,
@@ -1470,11 +1469,11 @@ function registerComponent$c(runtime) {
         defaultValue: DEFAULT_ITEM_STAGGER_DURATION,
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      hidePlaceholder: image.Checkbox((props) => ({
+      hidePlaceholder: slot.Checkbox((props) => ({
         label: "Hide placeholder",
         hidden: props.children != null
       })),
-      children: image.Grid()
+      children: slot.Grid()
     }
   });
 }
@@ -1485,9 +1484,9 @@ function registerComponent$b(runtime) {
     type: MakeswiftComponentType.Button,
     label: "Button",
     props: {
-      id: image.ElementID(),
-      children: image.TextInput({ placeholder: "Button text" }),
-      link: image.Link({
+      id: slot.ElementID(),
+      children: slot.TextInput({ placeholder: "Button text" }),
+      link: slot.Link({
         defaultValue: {
           type: "OPEN_PAGE",
           payload: {
@@ -1496,7 +1495,7 @@ function registerComponent$b(runtime) {
           }
         }
       }),
-      variant: image.ResponsiveSelect({
+      variant: slot.ResponsiveSelect({
         label: "Style",
         labelOrientation: "horizontal",
         options: [
@@ -1510,7 +1509,7 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "flat"
       }),
-      shape: image.ResponsiveIconRadioGroup({
+      shape: slot.ResponsiveIconRadioGroup({
         label: "Shape",
         options: [
           { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -1519,7 +1518,7 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "rounded"
       }),
-      size: image.ResponsiveIconRadioGroup({
+      size: slot.ResponsiveIconRadioGroup({
         label: "Size",
         options: [
           { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -1528,19 +1527,19 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "medium"
       }),
-      color: image.ResponsiveColor((props, device) => {
+      color: slot.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: image.ResponsiveColor({
+      textColor: slot.ResponsiveColor({
         label: "Text color",
         placeholder: "white"
       }),
-      textStyle: image.TextStyle(),
-      width: image.Width(),
-      margin: image.Margin()
+      textStyle: slot.TextStyle(),
+      width: slot.Width(),
+      margin: slot.Margin()
     }
   });
 }
@@ -1552,17 +1551,17 @@ function registerComponent$a(runtime) {
     label: "Carousel",
     icon: "Carousel40",
     props: {
-      id: image.ElementID(),
-      images: image.Images({
+      id: slot.ElementID(),
+      images: slot.Images({
         preset: [
           { key: uuid__default["default"](), props: {} },
           { key: uuid__default["default"](), props: {} },
           { key: uuid__default["default"](), props: {} }
         ]
       }),
-      width: image.Width({ defaultValue: { value: 400, unit: "px" } }),
-      margin: image.Margin(),
-      pageSize: image.ResponsiveNumber((props) => {
+      width: slot.Width({ defaultValue: { value: 400, unit: "px" } }),
+      margin: slot.Margin(),
+      pageSize: slot.ResponsiveNumber((props) => {
         var _a;
         const images = props.images;
         const imagesLength = (_a = images == null ? void 0 : images.length) != null ? _a : 0;
@@ -1574,7 +1573,7 @@ function registerComponent$a(runtime) {
           step: 1
         };
       }),
-      step: image.ResponsiveNumber((props, device) => {
+      step: slot.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;
@@ -1586,7 +1585,7 @@ function registerComponent$a(runtime) {
           step: 1
         };
       }),
-      slideAlignment: image.ResponsiveIconRadioGroup({
+      slideAlignment: slot.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "Top", value: "flex-start", icon: "VerticalAlignStart16" },
@@ -1595,13 +1594,13 @@ function registerComponent$a(runtime) {
         ],
         defaultValue: "center"
       }),
-      gap: image.GapX({
+      gap: slot.GapX({
         label: "Gap",
         step: 5,
         defaultValue: { value: 0, unit: "px" }
       }),
-      autoplay: image.Checkbox({ label: "Autoplay" }),
-      delay: image.Number((props) => ({
+      autoplay: slot.Checkbox({ label: "Autoplay" }),
+      delay: slot.Number((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
@@ -1609,8 +1608,8 @@ function registerComponent$a(runtime) {
         suffix: "seconds",
         hidden: !props.autoplay
       })),
-      showArrows: image.Checkbox({ preset: true, label: "Show arrows" }),
-      arrowPosition: image.ResponsiveIconRadioGroup((props) => ({
+      showArrows: slot.Checkbox({ preset: true, label: "Show arrows" }),
+      arrowPosition: slot.ResponsiveIconRadioGroup((props) => ({
         label: "Arrow position",
         options: [
           { label: "Inside", value: "inside", icon: "ArrowInside16" },
@@ -1620,24 +1619,24 @@ function registerComponent$a(runtime) {
         defaultValue: "inside",
         hidden: props.showArrows === false
       })),
-      arrowColor: image.ResponsiveColor((props) => ({
+      arrowColor: slot.ResponsiveColor((props) => ({
         label: "Arrow color",
         placeholder: "black",
         hidden: props.showArrows === false
       })),
-      arrowBackground: image.ResponsiveColor((props) => ({
+      arrowBackground: slot.ResponsiveColor((props) => ({
         label: "Arrow background",
         placeholder: "white",
         hidden: props.showArrows === false
       })),
-      showDots: image.Checkbox({ preset: true, label: "Show dots" }),
-      dotColor: image.ResponsiveColor((props) => ({
+      showDots: slot.Checkbox({ preset: true, label: "Show dots" }),
+      dotColor: slot.ResponsiveColor((props) => ({
         label: "Dot color",
         placeholder: "black",
         hidden: props.showDots === false
       })),
-      slideBorder: image.Border(),
-      slideBorderRadius: image.BorderRadius()
+      slideBorder: slot.Border(),
+      slideBorderRadius: slot.BorderRadius()
     }
   });
 }
@@ -1649,11 +1648,11 @@ function registerComponent$9(runtime) {
     label: "Countdown",
     icon: "Countdown40",
     props: {
-      id: image.ElementID(),
-      date: image.Date(() => ({
+      id: slot.ElementID(),
+      date: slot.Date(() => ({
         preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
       })),
-      variant: image.ResponsiveIconRadioGroup({
+      variant: slot.ResponsiveIconRadioGroup({
         label: "Style",
         options: [
           { label: "Filled", value: "filled", icon: "CountdownSolid16" },
@@ -1672,7 +1671,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "filled"
       }),
-      shape: image.ResponsiveIconRadioGroup({
+      shape: slot.ResponsiveIconRadioGroup({
         label: "Shape",
         options: [
           { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -1681,7 +1680,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "rounded"
       }),
-      size: image.ResponsiveIconRadioGroup({
+      size: slot.ResponsiveIconRadioGroup({
         label: "Size",
         options: [
           { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -1690,7 +1689,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "medium"
       }),
-      gap: image.GapX({
+      gap: slot.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Gap",
         step: 1,
@@ -1698,29 +1697,29 @@ function registerComponent$9(runtime) {
         max: 100,
         defaultValue: { value: 0, unit: "px" }
       }),
-      numberFont: image.Font({ label: "Number font" }),
-      numberColor: image.ResponsiveColor({
+      numberFont: slot.Font({ label: "Number font" }),
+      numberColor: slot.ResponsiveColor({
         label: "Number color",
         placeholder: "white"
       }),
-      blockColor: image.ResponsiveColor({
+      blockColor: slot.ResponsiveColor({
         label: "Block color",
         placeholder: "black"
       }),
-      labelFont: image.Font({ label: "Label font" }),
-      labelColor: image.ResponsiveColor({
+      labelFont: slot.Font({ label: "Label font" }),
+      labelColor: slot.ResponsiveColor({
         label: "Label color",
         placeholder: "black"
       }),
-      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({
+      width: slot.Width({ defaultValue: { value: 560, unit: "px" } }),
+      margin: slot.Margin(),
+      daysLabel: slot.TextInput({ label: "Days label", placeholder: "Days" }),
+      hoursLabel: slot.TextInput({ label: "Hours label", placeholder: "Hours" }),
+      minutesLabel: slot.TextInput({
         label: "Minutes label",
         placeholder: "Minutes"
       }),
-      secondsLabel: image.TextInput({
+      secondsLabel: slot.TextInput({
         label: "Seconds label",
         placeholder: "Seconds"
       })
@@ -1735,8 +1734,8 @@ function registerComponent$8(runtime) {
     label: "Divider",
     icon: "Divider40",
     props: {
-      id: image.ElementID(),
-      variant: image.ResponsiveSelect({
+      id: slot.ElementID(),
+      variant: slot.ResponsiveSelect({
         label: "Style",
         labelOrientation: "horizontal",
         options: [
@@ -1747,14 +1746,14 @@ function registerComponent$8(runtime) {
         ],
         defaultValue: "solid"
       }),
-      thickness: image.ResponsiveLength({
+      thickness: slot.ResponsiveLength({
         label: "Height",
         defaultValue: { value: 1, unit: "px" },
         options: [{ value: "px", label: "Pixels", icon: "Px16" }]
       }),
-      color: image.ResponsiveColor({ placeholder: "black" }),
-      width: image.Width({ defaultValue: { value: 100, unit: "%" } }),
-      margin: image.Margin()
+      color: slot.ResponsiveColor({ placeholder: "black" }),
+      width: slot.Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: slot.Margin()
     }
   });
 }
@@ -1766,10 +1765,10 @@ function registerComponent$7(runtime) {
     label: "Embed",
     icon: "Code40",
     props: {
-      id: image.ElementID(),
-      html: image.TextArea({ label: "Code", rows: 20 }),
-      width: image.Width({}),
-      margin: image.Margin()
+      id: slot.ElementID(),
+      html: slot.TextArea({ label: "Code", rows: 20 }),
+      width: slot.Width({}),
+      margin: slot.Margin()
     }
   });
 }
@@ -1805,10 +1804,10 @@ function registerComponent$6(runtime) {
     label: "Form",
     icon: "Form40",
     props: {
-      id: image.ElementID(),
-      tableId: image.Table(),
-      fields: image.TableFormFields(),
-      submitLink: image.Link((props) => ({
+      id: slot.ElementID(),
+      tableId: slot.Table(),
+      fields: slot.TableFormFields(),
+      submitLink: slot.Link((props) => ({
         label: "Redirect to",
         options: [
           { value: "OPEN_PAGE", label: "Open page" },
@@ -1816,13 +1815,13 @@ function registerComponent$6(runtime) {
         ],
         hidden: props.tableId == null
       })),
-      gap: image.GapY((props) => ({
+      gap: slot.GapY((props) => ({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Gap",
         defaultValue: { value: 0, unit: "px" },
         hidden: props.tableId == null
       })),
-      shape: image.ResponsiveIconRadioGroup((props) => ({
+      shape: slot.ResponsiveIconRadioGroup((props) => ({
         label: "Shape",
         options: [
           { label: "Pill", value: Shapes.PILL, icon: "ButtonPill16" },
@@ -1832,7 +1831,7 @@ function registerComponent$6(runtime) {
         defaultValue: Shapes.ROUNDED,
         hidden: props.tableId == null
       })),
-      size: image.ResponsiveIconRadioGroup((props) => ({
+      size: slot.ResponsiveIconRadioGroup((props) => ({
         label: "Size",
         options: [
           { label: "Small", value: Sizes.SMALL, icon: "SizeSmall16" },
@@ -1842,7 +1841,7 @@ function registerComponent$6(runtime) {
         defaultValue: Sizes.MEDIUM,
         hidden: (props == null ? void 0 : props.tableId) == null
       })),
-      contrast: image.ResponsiveIconRadioGroup((props) => ({
+      contrast: slot.ResponsiveIconRadioGroup((props) => ({
         label: "Color",
         options: [
           { label: "Light mode", value: Contrasts.LIGHT, icon: "Sun16" },
@@ -1851,8 +1850,8 @@ function registerComponent$6(runtime) {
         defaultValue: Contrasts.LIGHT,
         hidden: props.tableId == null
       })),
-      labelTextStyle: image.TextStyle({ label: "Label text style" }),
-      labelTextColor: image.ResponsiveColor((props, device) => {
+      labelTextStyle: slot.TextStyle({ label: "Label text style" }),
+      labelTextColor: slot.ResponsiveColor((props, device) => {
         const hidden = props.tableId == null;
         const responsiveContrast = props.contrast;
         const contrast = findDeviceOverride(responsiveContrast, device);
@@ -1862,23 +1861,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: image.TextStyle({ label: "Button text style" }),
-      brandColor: image.ResponsiveColor((props) => ({
+      submitTextStyle: slot.TextStyle({ label: "Button text style" }),
+      brandColor: slot.ResponsiveColor((props) => ({
         label: "Button color",
         placeholder: "black",
         hidden: props.tableId == null
       })),
-      submitTextColor: image.ResponsiveColor((props) => ({
+      submitTextColor: slot.ResponsiveColor((props) => ({
         label: "Button text color",
         placeholder: "white",
         hidden: props.tableId == null
       })),
-      submitLabel: image.TextInput((props) => ({
+      submitLabel: slot.TextInput((props) => ({
         label: "Button label",
         placeholder: "Submit",
         hidden: props.tableId == null
       })),
-      submitVariant: image.ResponsiveSelect((props) => ({
+      submitVariant: slot.ResponsiveSelect((props) => ({
         label: "Button style",
         options: [
           { value: "flat", label: "Flat" },
@@ -1892,11 +1891,11 @@ function registerComponent$6(runtime) {
         defaultValue: "flat",
         hidden: props.tableId == null
       })),
-      submitWidth: image.ResponsiveLength((props) => ({
+      submitWidth: slot.ResponsiveLength((props) => ({
         label: "Button width",
         hidden: props.tableId == null
       })),
-      submitAlignment: image.ResponsiveIconRadioGroup((props) => ({
+      submitAlignment: slot.ResponsiveIconRadioGroup((props) => ({
         label: "Button alignment",
         options: [
           { label: "Left", value: Alignments.LEFT, icon: "AlignLeft16" },
@@ -1906,32 +1905,32 @@ function registerComponent$6(runtime) {
         defaultValue: Alignments.CENTER,
         hidden: props.tableId == null
       })),
-      width: image.Width({
+      width: slot.Width({
         preset: [{ deviceId: "desktop", value: { value: 550, unit: "px" } }],
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: image.Margin()
+      margin: slot.Margin()
     }
   });
 }
 function registerComponent$5(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
-    return require("./Image.cjs2.js");
+    return require("./Image.cjs.js");
   })))), {
     type: MakeswiftComponentType.Image,
     label: "Image",
     props: {
-      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()
+      id: slot.ElementID(),
+      file: slot.Image(),
+      altText: slot.TextInput({ label: "Alt text" }),
+      link: slot.Link({ label: "On click" }),
+      width: slot.Width(),
+      margin: slot.Margin(),
+      padding: slot.Padding(),
+      border: slot.Border(),
+      borderRadius: slot.BorderRadius(),
+      boxShadow: slot.Shadows(),
+      opacity: slot.ResponsiveOpacity()
     }
   });
 }
@@ -1943,21 +1942,21 @@ function registerComponent$4(runtime) {
     label: "Navigation",
     icon: "Navigation40",
     props: {
-      id: image.ElementID(),
-      links: image.NavigationLinks(),
-      linkTextStyle: image.TextStyle((props) => {
+      id: slot.ElementID(),
+      links: slot.NavigationLinks(),
+      linkTextStyle: slot.TextStyle((props) => {
         const links = props.links;
         return {
           label: "Link text style",
           hidden: links == null || links.length === 0
         };
       }),
-      showLogo: image.Checkbox({ preset: true, label: "Show logo" }),
-      logoFile: image.Image((props) => ({
+      showLogo: slot.Checkbox({ preset: true, label: "Show logo" }),
+      logoFile: slot.Image((props) => ({
         label: "Logo",
         hidden: props.showLogo === false
       })),
-      logoWidth: image.ResponsiveLength((props) => ({
+      logoWidth: slot.ResponsiveLength((props) => ({
         preset: [{ deviceId: "desktop", value: { value: 100, unit: "px" } }],
         label: "Logo width",
         min: 0,
@@ -1965,15 +1964,15 @@ function registerComponent$4(runtime) {
         options: [{ value: "px", label: "Pixels", icon: "Px16" }],
         hidden: props.showLogo === false
       })),
-      logoAltText: image.TextInput((props) => ({
+      logoAltText: slot.TextInput((props) => ({
         label: "Logo alt text",
         hidden: props.showLogo === false
       })),
-      logoLink: image.Link((props) => ({
+      logoLink: slot.Link((props) => ({
         label: "Logo on click",
         hidden: props.showLogo === false
       })),
-      alignment: image.ResponsiveIconRadioGroup({
+      alignment: slot.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "Left", value: "flex-start", icon: "AlignLeft16" },
@@ -1982,7 +1981,7 @@ function registerComponent$4(runtime) {
         ],
         defaultValue: "flex-end"
       }),
-      gutter: image.GapX({
+      gutter: slot.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Link gap",
         min: 0,
@@ -1990,14 +1989,14 @@ function registerComponent$4(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      mobileMenuAnimation: image.ResponsiveSelect({
+      mobileMenuAnimation: slot.ResponsiveSelect({
         label: "Mobile menu",
         options: [
           { value: "coverRight", label: "Cover from right" },
           { value: "coverLeft", label: "Cover from left" }
         ]
       }),
-      mobileMenuOpenIconColor: image.ResponsiveColor((props, device) => {
+      mobileMenuOpenIconColor: slot.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !findDeviceOverride(mobileMenuAnimation, device);
         return {
@@ -2006,7 +2005,7 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      mobileMenuCloseIconColor: image.ResponsiveColor((props, device) => {
+      mobileMenuCloseIconColor: slot.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !findDeviceOverride(mobileMenuAnimation, device);
         return {
@@ -2015,7 +2014,7 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      mobileMenuBackgroundColor: image.ResponsiveColor((props, device) => {
+      mobileMenuBackgroundColor: slot.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !findDeviceOverride(mobileMenuAnimation, device);
         return {
@@ -2024,8 +2023,8 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      width: image.Width({ defaultValue: { value: 100, unit: "%" } }),
-      margin: image.Margin()
+      width: slot.Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: slot.Margin()
     }
   });
 }
@@ -2037,10 +2036,10 @@ function registerComponent$3(runtime) {
     label: "Page",
     hidden: true,
     props: {
-      children: image.Grid(),
-      backgrounds: image.Backgrounds(),
-      rowGap: image.GapY(),
-      columnGap: image.GapX()
+      children: slot.Grid(),
+      backgrounds: slot.Backgrounds(),
+      rowGap: slot.GapY(),
+      columnGap: slot.GapX()
     }
   });
 }
@@ -2052,8 +2051,8 @@ function registerComponent$2(runtime) {
     label: "Social Links",
     icon: "SocialLinks40",
     props: {
-      id: image.ElementID(),
-      links: image.SocialLinks({
+      id: slot.ElementID(),
+      links: slot.SocialLinks({
         preset: {
           links: [
             {
@@ -2072,7 +2071,7 @@ function registerComponent$2(runtime) {
           openInNewTab: false
         }
       }),
-      shape: image.ResponsiveIconRadioGroup((props) => {
+      shape: slot.ResponsiveIconRadioGroup((props) => {
         const links = props.links;
         return {
           label: "Shape",
@@ -2086,7 +2085,7 @@ function registerComponent$2(runtime) {
           hidden: links == null || links.links.length === 0
         };
       }),
-      size: image.ResponsiveIconRadioGroup((props) => {
+      size: slot.ResponsiveIconRadioGroup((props) => {
         const links = props.links;
         return {
           label: "Size",
@@ -2099,7 +2098,7 @@ function registerComponent$2(runtime) {
           hidden: links == null || links.links.length === 0
         };
       }),
-      hoverStyle: image.ResponsiveSelect((props) => {
+      hoverStyle: slot.ResponsiveSelect((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2115,7 +2114,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      fill: image.ResponsiveColor((props) => {
+      fill: slot.ResponsiveColor((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2123,7 +2122,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      backgroundColor: image.ResponsiveColor((props) => {
+      backgroundColor: slot.ResponsiveColor((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2131,7 +2130,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      alignment: image.ResponsiveIconRadioGroup({
+      alignment: slot.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "flex-start", value: "flex-start", icon: "AlignLeft16" },
@@ -2140,7 +2139,7 @@ function registerComponent$2(runtime) {
         ],
         defaultValue: "center"
       }),
-      gutter: image.GapX({
+      gutter: slot.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Link gap",
         min: 0,
@@ -2148,8 +2147,8 @@ function registerComponent$2(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      width: image.Width({ defaultValue: { value: 100, unit: "%" } }),
-      margin: image.Margin({
+      width: slot.Width({ defaultValue: { value: 100, unit: "%" } }),
+      margin: slot.Margin({
         preset: [
           {
             deviceId: "desktop",
@@ -2172,8 +2171,8 @@ function registerComponent$1(runtime) {
     type: MakeswiftComponentType.Text,
     label: "Text",
     props: {
-      id: image.ElementID(),
-      text: image.RichText(() => ({
+      id: slot.ElementID(),
+      text: slot.RichText(() => ({
         preset: {
           document: {
             nodes: [
@@ -2216,11 +2215,11 @@ function registerComponent$1(runtime) {
           }
         }
       })),
-      width: image.Width({
+      width: slot.Width({
         preset: [{ deviceId: "desktop", value: { value: 700, unit: "px" } }],
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: image.Margin({
+      margin: slot.Margin({
         preset: [
           {
             deviceId: "desktop",
@@ -2244,11 +2243,11 @@ function registerComponent(runtime) {
     label: "Video",
     icon: "Video40",
     props: {
-      id: image.ElementID(),
-      video: image.Video({ preset: { controls: true } }),
-      width: image.Width({ defaultValue: { value: 560, unit: "px" } }),
-      margin: image.Margin(),
-      borderRadius: image.BorderRadius()
+      id: slot.ElementID(),
+      video: slot.Video({ preset: { controls: true } }),
+      width: slot.Width({ defaultValue: { value: 560, unit: "px" } }),
+      margin: slot.Margin(),
+      borderRadius: slot.BorderRadius()
     }
   });
 }
@@ -2338,11 +2337,11 @@ function isNonNullable(value) {
   return value != null;
 }
 function mapSideColor(swatches, _c) {
-  var _d = _c, { color: color2 } = _d, restOfSide = __objRest(_d, ["color"]);
+  var _d = _c, { color } = _d, restOfSide = __objRest(_d, ["color"]);
   return __spreadProps(__spreadValues({}, restOfSide), {
-    color: color2 && {
-      alpha: color2.alpha,
-      swatch: swatches.find((s) => s && s.id === color2.swatchId)
+    color: color && {
+      alpha: color.alpha,
+      swatch: swatches.find((s) => s && s.id === color.swatchId)
     }
   });
 }
@@ -2372,14 +2371,14 @@ function useBorder(value) {
     });
   });
 }
-function useResponsiveColor(color2) {
-  const swatchIds = color2 == null ? [] : [...Array.from(new Set(color2.map(({ value: v }) => v && v.swatchId).filter(isNonNullable)))];
+function useResponsiveColor(color) {
+  const swatchIds = color == null ? [] : [...Array.from(new Set(color.map(({ value: v }) => v && v.swatchId).filter(isNonNullable)))];
   const skip = swatchIds.length === 0;
   const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
-  if (color2 == null || error != null)
+  if (color == null || error != null)
     return null;
   const { swatches = [] } = data;
-  return color2.map((_a) => {
+  return color.map((_a) => {
     var _b = _a, { value: v } = _b, rest = __objRest(_b, ["value"]);
     const { swatchId, alpha } = v;
     const swatch = swatches.find((s) => s && s.id === swatchId);
@@ -2423,8 +2422,8 @@ 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 colorToString(color) {
+  return color && color.swatch ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.alpha})` : "";
 }
 function murmur2(str) {
   var h = 0;
@@ -2699,7 +2698,7 @@ function useStyle(style) {
 }
 function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
-  return __spreadValues(__spreadValues({}, properties.includes(image.StyleControlProperty.Width) && {
+  return __spreadValues(__spreadValues({}, properties.includes(slot.StyleControlProperty.Width) && {
     maxWidth: "100%"
   }), responsiveStyle([
     style == null ? void 0 : style.width,
@@ -2710,29 +2709,29 @@ function useStyleControlCssObject(style, controlDefinition) {
     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(image.StyleControlProperty.Width) && {
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(slot.StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
-    }), properties.includes(image.StyleControlProperty.Margin) && {
+    }), properties.includes(slot.StyleControlProperty.Margin) && {
       marginTop: (_b = marginToString(margin == null ? void 0 : margin.marginTop)) != null ? _b : 0,
       marginRight: (_c = marginToString(margin == null ? void 0 : margin.marginRight)) != null ? _c : "auto",
       marginBottom: (_d = marginToString(margin == null ? void 0 : margin.marginBottom)) != null ? _d : 0,
       marginLeft: (_e2 = marginToString(margin == null ? void 0 : margin.marginLeft)) != null ? _e2 : "auto"
-    }), properties.includes(image.StyleControlProperty.Padding) && {
+    }), properties.includes(slot.StyleControlProperty.Padding) && {
       paddingTop: (_f = paddingToString(padding == null ? void 0 : padding.paddingTop)) != null ? _f : 0,
       paddingRight: (_g = paddingToString(padding == null ? void 0 : padding.paddingRight)) != null ? _g : 0,
       paddingBottom: (_h = paddingToString(padding == null ? void 0 : padding.paddingBottom)) != null ? _h : 0,
       paddingLeft: (_i = paddingToString(padding == null ? void 0 : padding.paddingLeft)) != null ? _i : 0
-    }), properties.includes(image.StyleControlProperty.Border) && {
+    }), properties.includes(slot.StyleControlProperty.Border) && {
       borderTop: (_j = borderSideToString(border == null ? void 0 : border.borderTop)) != null ? _j : "0 solid black",
       borderRight: (_k = borderSideToString(border == null ? void 0 : border.borderRight)) != null ? _k : "0 solid black",
       borderBottom: (_l = borderSideToString(border == null ? void 0 : border.borderBottom)) != null ? _l : "0 solid black",
       borderLeft: (_m = borderSideToString(border == null ? void 0 : border.borderLeft)) != null ? _m : "0 solid black"
-    }), properties.includes(image.StyleControlProperty.BorderRadius) && {
+    }), properties.includes(slot.StyleControlProperty.BorderRadius) && {
       borderTopLeftRadius: (_n = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopLeftRadius)) != null ? _n : 0,
       borderTopRightRadius: (_o = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _o : 0,
       borderBottomRightRadius: (_p = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomRightRadius)) != null ? _p : 0,
       borderBottomLeftRadius: (_q = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomLeftRadius)) != null ? _q : 0
-    }), 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 }), {
+    }), properties.includes(slot.StyleControlProperty.TextStyle) && __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (textStyle == null ? void 0 : textStyle.fontFamily) && { fontFamily: textStyle.fontFamily }), (textStyle == null ? void 0 : textStyle.letterSpacing) && { letterSpacing: textStyle.letterSpacing }), (textStyle == null ? void 0 : textStyle.fontSize) && { fontSize: fontSizeToString(textStyle.fontSize) }), (textStyle == null ? void 0 : textStyle.fontWeight) && { fontWeight: textStyle.fontWeight }), {
       textTransform: (_r = textStyle == null ? void 0 : textStyle.textTransform) != null ? _r : [],
       fontStyle: (_s = textStyle == null ? void 0 : textStyle.fontStyle) != null ? _s : []
     }));
@@ -2757,8 +2756,8 @@ function useStyleControlCssObject(style, controlDefinition) {
   function borderSideToString(borderSide) {
     if (borderSide == null)
       return null;
-    const { width, color: color2, style: style2 } = borderSide;
-    return `${width != null ? width : 0}px ${style2} ${color2 != null ? colorToString(color2) : "black"}`;
+    const { width, color, style: style2 } = borderSide;
+    return `${width != null ? width : 0}px ${style2} ${color != null ? colorToString(color) : "black"}`;
   }
   function borderRadiusToString(borderRadius) {
     if (borderRadius == null)
@@ -2809,9 +2808,9 @@ function useComboboxControlValue(data) {
 }
 function useImageControlValue(data, definition) {
   var _a;
-  const format = (_a = definition.config.format) != null ? _a : image.ImageControlValueFormat.URL;
+  const format = (_a = definition.config.format) != null ? _a : slot.ImageControlValueFormat.URL;
   const file = useFile(data);
-  if (format === image.ImageControlValueFormat.URL) {
+  if (format === slot.ImageControlValueFormat.URL) {
     return file == null ? void 0 : file.publicUrl;
   }
   if (file == null || file.dimensions == null)
@@ -2958,37 +2957,37 @@ function ControlValue({
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case color.ColorControlType:
+    case slot.ColorControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useColorValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case image.ImageControlType:
+    case slot.ImageControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useImageControlValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.LinkControlType:
+    case control.LinkControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useLinkControlValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case shape.ComboboxControlType:
+    case combobox.ComboboxControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useComboboxControlValue,
         parameters: [data],
         children: (value) => children(value)
       }, definition.type);
-    case shape.ShapeControlType:
+    case control.ShapeControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(ShapeControlValue, {
         definition,
         data,
         children: (value) => children(value)
       });
-    case shape.ListControlType:
+    case control.ListControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(ListControlValue, {
         definition,
         data,
@@ -3010,16 +3009,16 @@ const getIndexes = (spans, index) => {
   }
   return [rowIndex, remainder];
 };
-function useSlot(data, control) {
+function useSlot(data, control2) {
   if (data == null || data.elements.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(Slot.Placeholder, {
-      control
+      control: control2
     });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Slot, {
-    control,
+    control: control2,
     children: data.elements.map((element, i) => /* @__PURE__ */ jsxRuntime.jsx(Slot.Item, {
-      control,
+      control: control2,
       grid: data.columns,
       index: i,
       children: /* @__PURE__ */ jsxRuntime.jsx(Element, {
@@ -3031,7 +3030,7 @@ function useSlot(data, control) {
 function Slot(_f) {
   var _g = _f, {
     as,
-    control,
+    control: control2,
     children,
     className
   } = _g, restOfProps = __objRest(_g, [
@@ -3048,13 +3047,13 @@ function Slot(_f) {
     width: "100%"
   });
   React.useEffect(() => {
-    if (element == null || control == null)
+    if (element == null || control2 == null)
       return;
     return pollBoxModel({
       element,
-      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+      onBoxModelChange: (boxModel) => control2.changeContainerBoxModel(boxModel)
     });
-  }, [element, control]);
+  }, [element, control2]);
   return /* @__PURE__ */ jsxRuntime.jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
     ref: setElement,
     className: css.cx(baseClassName, className),
@@ -3066,7 +3065,7 @@ Slot.Item = SlotItem;
 function SlotItem(_h) {
   var _i = _h, {
     as,
-    control,
+    control: control2,
     grid,
     index,
     children,
@@ -3098,13 +3097,13 @@ function SlotItem(_h) {
     };
   })));
   React.useEffect(() => {
-    if (element == null || control == null)
+    if (element == null || control2 == null)
       return;
     return pollBoxModel({
       element,
-      onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
+      onBoxModelChange: (boxModel) => control2.changeItemBoxModel(index, boxModel)
     });
-  }, [element, control, index]);
+  }, [element, control2, index]);
   return /* @__PURE__ */ jsxRuntime.jsx(As, __spreadProps(__spreadValues({}, restOfProps), {
     ref: setElement,
     className: css.cx(baseClassName, className),
@@ -3112,17 +3111,17 @@ function SlotItem(_h) {
   }));
 }
 function SlotPlaceholder({
-  control
+  control: control2
 }) {
   const [element, setElement] = React.useState(null);
   React.useEffect(() => {
-    if (element == null || control == null)
+    if (element == null || control2 == null)
       return;
     return pollBoxModel({
       element,
-      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+      onBoxModelChange: (boxModel) => control2.changeContainerBoxModel(boxModel)
     });
-  }, [element, control]);
+  }, [element, control2]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref: setElement,
     className: useStyle({
@@ -3178,7 +3177,7 @@ function useDeviceMode() {
 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 === image.WidthControlValueFormats.ClassName ? css.css(responsiveWidth(value, options.defaultValue)) : value, [value, options.defaultValue, options.format]);
+  return React.useMemo(() => options.format === slot.WidthControlValueFormats.ClassName ? css.css(responsiveWidth(value, options.defaultValue)) : value, [value, options.defaultValue, options.format]);
 }
 function PropsValue({
   element,
@@ -3202,12 +3201,12 @@ function PropsValue({
       case textInput.TextInputControlType:
       case textInput.TextAreaControlType:
       case textInput.SelectControlType:
-      case color.ColorControlType:
-      case image.ImageControlType:
-      case shape.ComboboxControlType:
-      case shape.ShapeControlType:
-      case shape.ListControlType:
-      case textInput.LinkControlType:
+      case slot.ColorControlType:
+      case slot.ImageControlType:
+      case combobox.ComboboxControlType:
+      case control.ShapeControlType:
+      case control.ListControlType:
+      case control.LinkControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
@@ -3215,7 +3214,7 @@ function PropsValue({
             [propName]: value
           }))
         });
-      case image.StyleControlType:
+      case slot.StyleControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useFormattedStyle,
           parameters: [props[propName], descriptor],
@@ -3224,16 +3223,16 @@ function PropsValue({
           }))
         }, descriptor.type);
       case slot.SlotControlType: {
-        const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
+        const control2 = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useSlot,
-          parameters: [props[propName], control],
+          parameters: [props[propName], control2],
           children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
             [propName]: value
           }))
         }, descriptor.type);
       }
-      case image.Types.Width:
+      case slot.Types.Width:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useWidth,
           parameters: [props[propName], descriptor, props],
@@ -3241,7 +3240,7 @@ function PropsValue({
             [propName]: value
           }))
         }, descriptor.type);
-      case image.Types.ResponsiveColor:
+      case slot.Types.ResponsiveColor:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useResponsiveColor,
           parameters: [props[propName]],