@makeswift/runtime 0.7.17 → 0.7.18

package/dist/index.cjs.js

@@ -45,7 +45,7 @@ var css = require("@emotion/css");
 var serialize = require("@emotion/serialize");
 var utils = require("@emotion/utils");
 var jsxRuntime = require("react/jsx-runtime");
-var richText = require("./rich-text.cjs.js");
+var descriptors = require("./descriptors.cjs.js");
 require("slate");
 var textInput = require("./text-input.cjs.js");
 var combobox = require("./combobox.cjs.js");
@@ -55,9 +55,9 @@ var introspection = require("./introspection.cjs.js");
 var redux = require("redux");
 var thunk = require("redux-thunk");
 var types = require("./types.cjs.js");
+var boxModels = require("./box-models.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");
@@ -148,7 +148,7 @@ function BodySnippet({
   return null;
 }
 async function introspect(element, client, store) {
-  const descriptors = constants.getPropControllerDescriptors(store.getState());
+  const descriptors$1 = constants.getPropControllerDescriptors(store.getState());
   const swatchIds = /* @__PURE__ */ new Set();
   const fileIds = /* @__PURE__ */ new Set();
   const typographyIds = /* @__PURE__ */ new Set();
@@ -173,13 +173,13 @@ async function introspect(element, client, store) {
             remaining.push(child);
           }
         });
-        if (descriptor.type === richText.ShapeControlType) {
+        if (descriptor.type === descriptors.ShapeControlType) {
           const prop = props[propName];
           if (prop == null)
             return;
           getResourcesFromElementDescriptors(descriptor.config.type, prop);
         }
-        if (descriptor.type === richText.ListControlType) {
+        if (descriptor.type === descriptors.ListControlType) {
           const prop = props[propName];
           if (prop == null)
             return;
@@ -187,13 +187,13 @@ async function introspect(element, client, store) {
             getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
           });
         }
-        if (descriptor.type === richText.Types.Shape) {
+        if (descriptor.type === descriptors.Types.Shape) {
           const prop = props[propName];
           if (prop == null)
             return;
           getResourcesFromElementDescriptors(descriptor.options.type, prop);
         }
-        if (descriptor.type === richText.Types.List) {
+        if (descriptor.type === descriptors.Types.List) {
           const prop = props[propName];
           if (prop == null)
             return;
@@ -213,7 +213,7 @@ async function introspect(element, client, store) {
     } else {
       element2 = current;
     }
-    const elementDescriptors = descriptors.get(element2.type);
+    const elementDescriptors = descriptors$1.get(element2.type);
     if (elementDescriptors == null)
       continue;
     getResourcesFromElementDescriptors(elementDescriptors, element2.props);
@@ -1002,7 +1002,7 @@ function useCachedSite(siteId) {
   const site = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
-const version = "0.7.17";
+const version = "0.7.18";
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
@@ -1809,13 +1809,13 @@ function registerComponent$c(runtime) {
     type: constants.MakeswiftComponentType.Box,
     label: "Box",
     props: {
-      id: richText.ElementID(),
-      backgrounds: richText.Backgrounds(),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      id: descriptors.ElementID(),
+      backgrounds: descriptors.Backgrounds(),
+      width: descriptors.Width({
+        format: descriptors.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      height: richText.ResponsiveIconRadioGroup({
+      height: descriptors.ResponsiveIconRadioGroup({
         label: "Height",
         options: [
           { value: "auto", label: "Auto", icon: "HeightAuto16" },
@@ -1823,7 +1823,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "auto"
       }),
-      verticalAlign: richText.ResponsiveIconRadioGroup({
+      verticalAlign: descriptors.ResponsiveIconRadioGroup({
         label: "Align items",
         options: [
           { value: "flex-start", label: "Top", icon: "VerticalAlignStart16" },
@@ -1837,9 +1837,9 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "flex-start"
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName }),
-      padding: richText.Padding({
-        format: richText.Padding.Format.ClassName,
+      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName }),
+      padding: descriptors.Padding({
+        format: descriptors.Padding.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -1852,16 +1852,16 @@ function registerComponent$c(runtime) {
           }
         ]
       }),
-      border: richText.Border({ format: richText.Border.Format.ClassName }),
-      borderRadius: richText.BorderRadius({ format: richText.BorderRadius.Format.ClassName }),
-      boxShadow: richText.Shadows({ format: richText.Shadows.Format.ClassName }),
-      rowGap: richText.GapY((props) => ({
+      border: descriptors.Border({ format: descriptors.Border.Format.ClassName }),
+      borderRadius: descriptors.BorderRadius({ format: descriptors.BorderRadius.Format.ClassName }),
+      boxShadow: descriptors.Shadows({ format: descriptors.Shadows.Format.ClassName }),
+      rowGap: descriptors.GapY((props) => ({
         hidden: props.children == null
       })),
-      columnGap: richText.GapX((props) => ({
+      columnGap: descriptors.GapX((props) => ({
         hidden: props.children == null
       })),
-      boxAnimateType: richText.ResponsiveSelect({
+      boxAnimateType: descriptors.ResponsiveSelect({
         label: "Animate box in",
         labelOrientation: "vertical",
         options: [
@@ -1877,7 +1877,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "none"
       }),
-      boxAnimateDuration: richText.ResponsiveNumber((props, device) => ({
+      boxAnimateDuration: descriptors.ResponsiveNumber((props, device) => ({
         label: "Box duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
@@ -1885,7 +1885,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnBoxAnimation(props, device)
       })),
-      boxAnimateDelay: richText.ResponsiveNumber((props, device) => ({
+      boxAnimateDelay: descriptors.ResponsiveNumber((props, device) => ({
         label: "Box delay",
         defaultValue: DEFAULT_BOX_ANIMATE_DELAY,
         min: 0,
@@ -1893,7 +1893,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnBoxAnimation(props, device)
       })),
-      itemAnimateType: richText.ResponsiveSelect({
+      itemAnimateType: descriptors.ResponsiveSelect({
         label: "Animate items in",
         labelOrientation: "vertical",
         options: [
@@ -1909,7 +1909,7 @@ function registerComponent$c(runtime) {
         ],
         defaultValue: "none"
       }),
-      itemAnimateDuration: richText.ResponsiveNumber((props, device) => ({
+      itemAnimateDuration: descriptors.ResponsiveNumber((props, device) => ({
         label: "Items duration",
         defaultValue: DEFAULT_BOX_ANIMATE_DURATION,
         min: 0.1,
@@ -1917,7 +1917,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      itemAnimateDelay: richText.ResponsiveNumber((props, device) => ({
+      itemAnimateDelay: descriptors.ResponsiveNumber((props, device) => ({
         label: "Items delay",
         defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,
         min: 0,
@@ -1925,7 +1925,7 @@ function registerComponent$c(runtime) {
         suffix: "s",
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      itemStaggerDuration: richText.ResponsiveNumber((props, device) => ({
+      itemStaggerDuration: descriptors.ResponsiveNumber((props, device) => ({
         label: "Stagger",
         min: 0,
         step: 0.05,
@@ -1933,11 +1933,11 @@ function registerComponent$c(runtime) {
         defaultValue: DEFAULT_ITEM_STAGGER_DURATION,
         hidden: isHiddenBasedOnItemAnimation(props, device)
       })),
-      hidePlaceholder: richText.Checkbox((props) => ({
+      hidePlaceholder: descriptors.Checkbox((props) => ({
         label: "Hide placeholder",
         hidden: props.children != null
       })),
-      children: richText.Grid()
+      children: descriptors.Grid()
     }
   });
 }
@@ -1948,9 +1948,9 @@ function registerComponent$b(runtime) {
     type: constants.MakeswiftComponentType.Button,
     label: "Button",
     props: {
-      id: richText.ElementID(),
-      children: richText.TextInput({ placeholder: "Button text" }),
-      link: richText.Link({
+      id: descriptors.ElementID(),
+      children: descriptors.TextInput({ placeholder: "Button text" }),
+      link: descriptors.Link({
         defaultValue: {
           type: "OPEN_PAGE",
           payload: {
@@ -1959,7 +1959,7 @@ function registerComponent$b(runtime) {
           }
         }
       }),
-      variant: richText.ResponsiveSelect({
+      variant: descriptors.ResponsiveSelect({
         label: "Style",
         labelOrientation: "horizontal",
         options: [
@@ -1973,7 +1973,7 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "flat"
       }),
-      shape: richText.ResponsiveIconRadioGroup({
+      shape: descriptors.ResponsiveIconRadioGroup({
         label: "Shape",
         options: [
           { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -1982,7 +1982,7 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "rounded"
       }),
-      size: richText.ResponsiveIconRadioGroup({
+      size: descriptors.ResponsiveIconRadioGroup({
         label: "Size",
         options: [
           { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -1991,19 +1991,19 @@ function registerComponent$b(runtime) {
         ],
         defaultValue: "medium"
       }),
-      color: richText.ResponsiveColor((props, device) => {
+      color: descriptors.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: richText.ResponsiveColor({
+      textColor: descriptors.ResponsiveColor({
         label: "Text color",
         placeholder: "white"
       }),
-      textStyle: richText.TextStyle(),
-      width: richText.Width(),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName })
+      textStyle: descriptors.TextStyle(),
+      width: descriptors.Width(),
+      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName })
     }
   });
 }
@@ -2015,20 +2015,20 @@ function registerComponent$a(runtime) {
     label: "Carousel",
     icon: "Carousel40",
     props: {
-      id: richText.ElementID(),
-      images: richText.Images({
+      id: descriptors.ElementID(),
+      images: descriptors.Images({
         preset: [
           { key: uuid.v4(), props: {} },
           { key: uuid.v4(), props: {} },
           { key: uuid.v4(), props: {} }
         ]
       }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      width: descriptors.Width({
+        format: descriptors.Width.Format.ClassName,
         defaultValue: { value: 400, unit: "px" }
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName }),
-      pageSize: richText.ResponsiveNumber((props) => {
+      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName }),
+      pageSize: descriptors.ResponsiveNumber((props) => {
         var _a;
         const images = props.images;
         const imagesLength = (_a = images == null ? void 0 : images.length) != null ? _a : 0;
@@ -2040,7 +2040,7 @@ function registerComponent$a(runtime) {
           step: 1
         };
       }),
-      step: richText.ResponsiveNumber((props, device) => {
+      step: descriptors.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;
@@ -2052,7 +2052,7 @@ function registerComponent$a(runtime) {
           step: 1
         };
       }),
-      slideAlignment: richText.ResponsiveIconRadioGroup({
+      slideAlignment: descriptors.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "Top", value: "flex-start", icon: "VerticalAlignStart16" },
@@ -2061,13 +2061,13 @@ function registerComponent$a(runtime) {
         ],
         defaultValue: "center"
       }),
-      gap: richText.GapX({
+      gap: descriptors.GapX({
         label: "Gap",
         step: 5,
         defaultValue: { value: 0, unit: "px" }
       }),
-      autoplay: richText.Checkbox({ label: "Autoplay" }),
-      delay: richText.Number((props) => ({
+      autoplay: descriptors.Checkbox({ label: "Autoplay" }),
+      delay: descriptors.Number((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
@@ -2075,8 +2075,8 @@ function registerComponent$a(runtime) {
         suffix: "seconds",
         hidden: !props.autoplay
       })),
-      showArrows: richText.Checkbox({ preset: true, label: "Show arrows" }),
-      arrowPosition: richText.ResponsiveIconRadioGroup((props) => ({
+      showArrows: descriptors.Checkbox({ preset: true, label: "Show arrows" }),
+      arrowPosition: descriptors.ResponsiveIconRadioGroup((props) => ({
         label: "Arrow position",
         options: [
           { label: "Inside", value: "inside", icon: "ArrowInside16" },
@@ -2086,24 +2086,24 @@ function registerComponent$a(runtime) {
         defaultValue: "inside",
         hidden: props.showArrows === false
       })),
-      arrowColor: richText.ResponsiveColor((props) => ({
+      arrowColor: descriptors.ResponsiveColor((props) => ({
         label: "Arrow color",
         placeholder: "black",
         hidden: props.showArrows === false
       })),
-      arrowBackground: richText.ResponsiveColor((props) => ({
+      arrowBackground: descriptors.ResponsiveColor((props) => ({
         label: "Arrow background",
         placeholder: "white",
         hidden: props.showArrows === false
       })),
-      showDots: richText.Checkbox({ preset: true, label: "Show dots" }),
-      dotColor: richText.ResponsiveColor((props) => ({
+      showDots: descriptors.Checkbox({ preset: true, label: "Show dots" }),
+      dotColor: descriptors.ResponsiveColor((props) => ({
         label: "Dot color",
         placeholder: "black",
         hidden: props.showDots === false
       })),
-      slideBorder: richText.Border({ format: richText.Border.Format.ClassName }),
-      slideBorderRadius: richText.BorderRadius({ format: richText.BorderRadius.Format.ClassName })
+      slideBorder: descriptors.Border({ format: descriptors.Border.Format.ClassName }),
+      slideBorderRadius: descriptors.BorderRadius({ format: descriptors.BorderRadius.Format.ClassName })
     }
   });
 }
@@ -2115,11 +2115,11 @@ function registerComponent$9(runtime) {
     label: "Countdown",
     icon: "Countdown40",
     props: {
-      id: richText.ElementID(),
-      date: richText.Date(() => ({
+      id: descriptors.ElementID(),
+      date: descriptors.Date(() => ({
         preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
       })),
-      variant: richText.ResponsiveIconRadioGroup({
+      variant: descriptors.ResponsiveIconRadioGroup({
         label: "Style",
         options: [
           { label: "Filled", value: "filled", icon: "CountdownSolid16" },
@@ -2138,7 +2138,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "filled"
       }),
-      shape: richText.ResponsiveIconRadioGroup({
+      shape: descriptors.ResponsiveIconRadioGroup({
         label: "Shape",
         options: [
           { label: "Pill", value: "pill", icon: "ButtonPill16" },
@@ -2147,7 +2147,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "rounded"
       }),
-      size: richText.ResponsiveIconRadioGroup({
+      size: descriptors.ResponsiveIconRadioGroup({
         label: "Size",
         options: [
           { label: "Small", value: "small", icon: "SizeSmall16" },
@@ -2156,7 +2156,7 @@ function registerComponent$9(runtime) {
         ],
         defaultValue: "medium"
       }),
-      gap: richText.GapX({
+      gap: descriptors.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Gap",
         step: 1,
@@ -2164,32 +2164,32 @@ function registerComponent$9(runtime) {
         max: 100,
         defaultValue: { value: 0, unit: "px" }
       }),
-      numberFont: richText.Font({ label: "Number font" }),
-      numberColor: richText.ResponsiveColor({
+      numberFont: descriptors.Font({ label: "Number font" }),
+      numberColor: descriptors.ResponsiveColor({
         label: "Number color",
         placeholder: "white"
       }),
-      blockColor: richText.ResponsiveColor({
+      blockColor: descriptors.ResponsiveColor({
         label: "Block color",
         placeholder: "black"
       }),
-      labelFont: richText.Font({ label: "Label font" }),
-      labelColor: richText.ResponsiveColor({
+      labelFont: descriptors.Font({ label: "Label font" }),
+      labelColor: descriptors.ResponsiveColor({
         label: "Label color",
         placeholder: "black"
       }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      width: descriptors.Width({
+        format: descriptors.Width.Format.ClassName,
         defaultValue: { value: 560, unit: "px" }
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName }),
-      daysLabel: richText.TextInput({ label: "Days label", placeholder: "Days" }),
-      hoursLabel: richText.TextInput({ label: "Hours label", placeholder: "Hours" }),
-      minutesLabel: richText.TextInput({
+      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName }),
+      daysLabel: descriptors.TextInput({ label: "Days label", placeholder: "Days" }),
+      hoursLabel: descriptors.TextInput({ label: "Hours label", placeholder: "Hours" }),
+      minutesLabel: descriptors.TextInput({
         label: "Minutes label",
         placeholder: "Minutes"
       }),
-      secondsLabel: richText.TextInput({
+      secondsLabel: descriptors.TextInput({
         label: "Seconds label",
         placeholder: "Seconds"
       })
@@ -2204,8 +2204,8 @@ function registerComponent$8(runtime) {
     label: "Divider",
     icon: "Divider40",
     props: {
-      id: richText.ElementID(),
-      variant: richText.ResponsiveSelect({
+      id: descriptors.ElementID(),
+      variant: descriptors.ResponsiveSelect({
         label: "Style",
         labelOrientation: "horizontal",
         options: [
@@ -2216,17 +2216,17 @@ function registerComponent$8(runtime) {
         ],
         defaultValue: "solid"
       }),
-      thickness: richText.ResponsiveLength({
+      thickness: descriptors.ResponsiveLength({
         label: "Height",
         defaultValue: { value: 1, unit: "px" },
         options: [{ value: "px", label: "Pixels", icon: "Px16" }]
       }),
-      color: richText.ResponsiveColor({ placeholder: "black" }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      color: descriptors.ResponsiveColor({ placeholder: "black" }),
+      width: descriptors.Width({
+        format: descriptors.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName })
+      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName })
     }
   });
 }
@@ -2238,10 +2238,10 @@ function registerComponent$7(runtime) {
     label: "Embed",
     icon: "Code40",
     props: {
-      id: richText.ElementID(),
-      html: richText.TextArea({ label: "Code", rows: 20 }),
-      width: richText.Width({ format: richText.Width.Format.ClassName }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName })
+      id: descriptors.ElementID(),
+      html: descriptors.TextArea({ label: "Code", rows: 20 }),
+      width: descriptors.Width({ format: descriptors.Width.Format.ClassName }),
+      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName })
     }
   });
 }
@@ -2277,10 +2277,10 @@ function registerComponent$6(runtime) {
     label: "Form",
     icon: "Form40",
     props: {
-      id: richText.ElementID(),
-      tableId: richText.Table(),
-      fields: richText.TableFormFields(),
-      submitLink: richText.Link((props) => ({
+      id: descriptors.ElementID(),
+      tableId: descriptors.Table(),
+      fields: descriptors.TableFormFields(),
+      submitLink: descriptors.Link((props) => ({
         label: "Redirect to",
         options: [
           { value: "OPEN_PAGE", label: "Open page" },
@@ -2288,13 +2288,13 @@ function registerComponent$6(runtime) {
         ],
         hidden: props.tableId == null
       })),
-      gap: richText.GapY((props) => ({
+      gap: descriptors.GapY((props) => ({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Gap",
         defaultValue: { value: 0, unit: "px" },
         hidden: props.tableId == null
       })),
-      shape: richText.ResponsiveIconRadioGroup((props) => ({
+      shape: descriptors.ResponsiveIconRadioGroup((props) => ({
         label: "Shape",
         options: [
           { label: "Pill", value: Shapes.PILL, icon: "ButtonPill16" },
@@ -2304,7 +2304,7 @@ function registerComponent$6(runtime) {
         defaultValue: Shapes.ROUNDED,
         hidden: props.tableId == null
       })),
-      size: richText.ResponsiveIconRadioGroup((props) => ({
+      size: descriptors.ResponsiveIconRadioGroup((props) => ({
         label: "Size",
         options: [
           { label: "Small", value: Sizes.SMALL, icon: "SizeSmall16" },
@@ -2314,7 +2314,7 @@ function registerComponent$6(runtime) {
         defaultValue: Sizes.MEDIUM,
         hidden: (props == null ? void 0 : props.tableId) == null
       })),
-      contrast: richText.ResponsiveIconRadioGroup((props) => ({
+      contrast: descriptors.ResponsiveIconRadioGroup((props) => ({
         label: "Color",
         options: [
           { label: "Light mode", value: Contrasts.LIGHT, icon: "Sun16" },
@@ -2323,8 +2323,8 @@ function registerComponent$6(runtime) {
         defaultValue: Contrasts.LIGHT,
         hidden: props.tableId == null
       })),
-      labelTextStyle: richText.TextStyle({ label: "Label text style" }),
-      labelTextColor: richText.ResponsiveColor((props, device) => {
+      labelTextStyle: descriptors.TextStyle({ label: "Label text style" }),
+      labelTextColor: descriptors.ResponsiveColor((props, device) => {
         const hidden = props.tableId == null;
         const responsiveContrast = props.contrast;
         const contrast = findDeviceOverride(responsiveContrast, device);
@@ -2334,23 +2334,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: richText.TextStyle({ label: "Button text style" }),
-      brandColor: richText.ResponsiveColor((props) => ({
+      submitTextStyle: descriptors.TextStyle({ label: "Button text style" }),
+      brandColor: descriptors.ResponsiveColor((props) => ({
         label: "Button color",
         placeholder: "black",
         hidden: props.tableId == null
       })),
-      submitTextColor: richText.ResponsiveColor((props) => ({
+      submitTextColor: descriptors.ResponsiveColor((props) => ({
         label: "Button text color",
         placeholder: "white",
         hidden: props.tableId == null
       })),
-      submitLabel: richText.TextInput((props) => ({
+      submitLabel: descriptors.TextInput((props) => ({
         label: "Button label",
         placeholder: "Submit",
         hidden: props.tableId == null
       })),
-      submitVariant: richText.ResponsiveSelect((props) => ({
+      submitVariant: descriptors.ResponsiveSelect((props) => ({
         label: "Button style",
         options: [
           { value: "flat", label: "Flat" },
@@ -2364,11 +2364,11 @@ function registerComponent$6(runtime) {
         defaultValue: "flat",
         hidden: props.tableId == null
       })),
-      submitWidth: richText.ResponsiveLength((props) => ({
+      submitWidth: descriptors.ResponsiveLength((props) => ({
         label: "Button width",
         hidden: props.tableId == null
       })),
-      submitAlignment: richText.ResponsiveIconRadioGroup((props) => ({
+      submitAlignment: descriptors.ResponsiveIconRadioGroup((props) => ({
         label: "Button alignment",
         options: [
           { label: "Left", value: Alignments.LEFT, icon: "AlignLeft16" },
@@ -2378,12 +2378,12 @@ function registerComponent$6(runtime) {
         defaultValue: Alignments.CENTER,
         hidden: props.tableId == null
       })),
-      width: richText.Width({
+      width: descriptors.Width({
         preset: [{ deviceId: "desktop", value: { value: 550, unit: "px" } }],
         defaultValue: { value: 100, unit: "%" },
-        format: richText.Width.Format.ClassName
+        format: descriptors.Width.Format.ClassName
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName })
+      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName })
     }
   });
 }
@@ -2394,17 +2394,17 @@ function registerComponent$5(runtime) {
     type: constants.MakeswiftComponentType.Image,
     label: "Image",
     props: {
-      id: richText.ElementID(),
-      file: richText.Image(),
-      altText: richText.TextInput({ label: "Alt text" }),
-      link: richText.Link({ label: "On click" }),
-      width: richText.Width(),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName }),
-      padding: richText.Padding({ format: richText.Padding.Format.ClassName }),
-      border: richText.Border({ format: richText.Border.Format.ClassName }),
-      borderRadius: richText.BorderRadius({ format: richText.BorderRadius.Format.ClassName }),
-      boxShadow: richText.Shadows({ format: richText.Shadows.Format.ClassName }),
-      opacity: richText.ResponsiveOpacity()
+      id: descriptors.ElementID(),
+      file: descriptors.Image(),
+      altText: descriptors.TextInput({ label: "Alt text" }),
+      link: descriptors.Link({ label: "On click" }),
+      width: descriptors.Width(),
+      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName }),
+      padding: descriptors.Padding({ format: descriptors.Padding.Format.ClassName }),
+      border: descriptors.Border({ format: descriptors.Border.Format.ClassName }),
+      borderRadius: descriptors.BorderRadius({ format: descriptors.BorderRadius.Format.ClassName }),
+      boxShadow: descriptors.Shadows({ format: descriptors.Shadows.Format.ClassName }),
+      opacity: descriptors.ResponsiveOpacity()
     }
   });
 }
@@ -2416,21 +2416,21 @@ function registerComponent$4(runtime) {
     label: "Navigation",
     icon: "Navigation40",
     props: {
-      id: richText.ElementID(),
-      links: richText.NavigationLinks(),
-      linkTextStyle: richText.TextStyle((props) => {
+      id: descriptors.ElementID(),
+      links: descriptors.NavigationLinks(),
+      linkTextStyle: descriptors.TextStyle((props) => {
         const links = props.links;
         return {
           label: "Link text style",
           hidden: links == null || links.length === 0
         };
       }),
-      showLogo: richText.Checkbox({ preset: true, label: "Show logo" }),
-      logoFile: richText.Image((props) => ({
+      showLogo: descriptors.Checkbox({ preset: true, label: "Show logo" }),
+      logoFile: descriptors.Image((props) => ({
         label: "Logo",
         hidden: props.showLogo === false
       })),
-      logoWidth: richText.ResponsiveLength((props) => ({
+      logoWidth: descriptors.ResponsiveLength((props) => ({
         preset: [{ deviceId: "desktop", value: { value: 100, unit: "px" } }],
         label: "Logo width",
         min: 0,
@@ -2438,15 +2438,15 @@ function registerComponent$4(runtime) {
         options: [{ value: "px", label: "Pixels", icon: "Px16" }],
         hidden: props.showLogo === false
       })),
-      logoAltText: richText.TextInput((props) => ({
+      logoAltText: descriptors.TextInput((props) => ({
         label: "Logo alt text",
         hidden: props.showLogo === false
       })),
-      logoLink: richText.Link((props) => ({
+      logoLink: descriptors.Link((props) => ({
         label: "Logo on click",
         hidden: props.showLogo === false
       })),
-      alignment: richText.ResponsiveIconRadioGroup({
+      alignment: descriptors.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "Left", value: "flex-start", icon: "AlignLeft16" },
@@ -2455,7 +2455,7 @@ function registerComponent$4(runtime) {
         ],
         defaultValue: "flex-end"
       }),
-      gutter: richText.GapX({
+      gutter: descriptors.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Link gap",
         min: 0,
@@ -2463,14 +2463,14 @@ function registerComponent$4(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      mobileMenuAnimation: richText.ResponsiveSelect({
+      mobileMenuAnimation: descriptors.ResponsiveSelect({
         label: "Mobile menu",
         options: [
           { value: "coverRight", label: "Cover from right" },
           { value: "coverLeft", label: "Cover from left" }
         ]
       }),
-      mobileMenuOpenIconColor: richText.ResponsiveColor((props, device) => {
+      mobileMenuOpenIconColor: descriptors.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !findDeviceOverride(mobileMenuAnimation, device);
         return {
@@ -2479,7 +2479,7 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      mobileMenuCloseIconColor: richText.ResponsiveColor((props, device) => {
+      mobileMenuCloseIconColor: descriptors.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !findDeviceOverride(mobileMenuAnimation, device);
         return {
@@ -2488,7 +2488,7 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      mobileMenuBackgroundColor: richText.ResponsiveColor((props, device) => {
+      mobileMenuBackgroundColor: descriptors.ResponsiveColor((props, device) => {
         const mobileMenuAnimation = props.mobileMenuAnimation;
         const hidden = !findDeviceOverride(mobileMenuAnimation, device);
         return {
@@ -2497,11 +2497,11 @@ function registerComponent$4(runtime) {
           hidden
         };
       }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      width: descriptors.Width({
+        format: descriptors.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName })
+      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName })
     }
   });
 }
@@ -2513,10 +2513,10 @@ function registerComponent$3(runtime) {
     label: "Page",
     hidden: true,
     props: {
-      children: richText.Grid(),
-      backgrounds: richText.Backgrounds(),
-      rowGap: richText.GapY(),
-      columnGap: richText.GapX()
+      children: descriptors.Grid(),
+      backgrounds: descriptors.Backgrounds(),
+      rowGap: descriptors.GapY(),
+      columnGap: descriptors.GapX()
     }
   });
 }
@@ -2528,8 +2528,8 @@ function registerComponent$2(runtime) {
     label: "Social Links",
     icon: "SocialLinks40",
     props: {
-      id: richText.ElementID(),
-      links: richText.SocialLinks({
+      id: descriptors.ElementID(),
+      links: descriptors.SocialLinks({
         preset: {
           links: [
             {
@@ -2548,7 +2548,7 @@ function registerComponent$2(runtime) {
           openInNewTab: false
         }
       }),
-      shape: richText.ResponsiveIconRadioGroup((props) => {
+      shape: descriptors.ResponsiveIconRadioGroup((props) => {
         const links = props.links;
         return {
           label: "Shape",
@@ -2562,7 +2562,7 @@ function registerComponent$2(runtime) {
           hidden: links == null || links.links.length === 0
         };
       }),
-      size: richText.ResponsiveIconRadioGroup((props) => {
+      size: descriptors.ResponsiveIconRadioGroup((props) => {
         const links = props.links;
         return {
           label: "Size",
@@ -2575,7 +2575,7 @@ function registerComponent$2(runtime) {
           hidden: links == null || links.links.length === 0
         };
       }),
-      hoverStyle: richText.ResponsiveSelect((props) => {
+      hoverStyle: descriptors.ResponsiveSelect((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2591,7 +2591,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      fill: richText.ResponsiveColor((props) => {
+      fill: descriptors.ResponsiveColor((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2599,7 +2599,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      backgroundColor: richText.ResponsiveColor((props) => {
+      backgroundColor: descriptors.ResponsiveColor((props) => {
         const links = props.links;
         const hidden = links == null || links.links.length === 0;
         return {
@@ -2607,7 +2607,7 @@ function registerComponent$2(runtime) {
           hidden
         };
       }),
-      alignment: richText.ResponsiveIconRadioGroup({
+      alignment: descriptors.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [
           { label: "flex-start", value: "flex-start", icon: "AlignLeft16" },
@@ -2616,7 +2616,7 @@ function registerComponent$2(runtime) {
         ],
         defaultValue: "center"
       }),
-      gutter: richText.GapX({
+      gutter: descriptors.GapX({
         preset: [{ deviceId: "desktop", value: { value: 10, unit: "px" } }],
         label: "Link gap",
         min: 0,
@@ -2624,12 +2624,12 @@ function registerComponent$2(runtime) {
         step: 1,
         defaultValue: { value: 0, unit: "px" }
       }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      width: descriptors.Width({
+        format: descriptors.Width.Format.ClassName,
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: richText.Margin({
-        format: richText.Margin.Format.ClassName,
+      margin: descriptors.Margin({
+        format: descriptors.Margin.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -2652,8 +2652,8 @@ function registerComponent$1(runtime) {
     type: constants.MakeswiftComponentType.Text,
     label: "Text",
     props: {
-      id: richText.ElementID(),
-      text: richText.RichText(() => ({
+      id: descriptors.ElementID(),
+      text: descriptors.RichText(() => ({
         preset: {
           document: {
             object: "document",
@@ -2697,13 +2697,13 @@ function registerComponent$1(runtime) {
           }
         }
       })),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      width: descriptors.Width({
+        format: descriptors.Width.Format.ClassName,
         preset: [{ deviceId: "desktop", value: { value: 700, unit: "px" } }],
         defaultValue: { value: 100, unit: "%" }
       }),
-      margin: richText.Margin({
-        format: richText.Margin.Format.ClassName,
+      margin: descriptors.Margin({
+        format: descriptors.Margin.Format.ClassName,
         preset: [
           {
             deviceId: "desktop",
@@ -2727,14 +2727,14 @@ function registerComponent(runtime) {
     label: "Video",
     icon: "Video40",
     props: {
-      id: richText.ElementID(),
-      video: richText.Video({ preset: { controls: true } }),
-      width: richText.Width({
-        format: richText.Width.Format.ClassName,
+      id: descriptors.ElementID(),
+      video: descriptors.Video({ preset: { controls: true } }),
+      width: descriptors.Width({
+        format: descriptors.Width.Format.ClassName,
         defaultValue: { value: 560, unit: "px" }
       }),
-      margin: richText.Margin({ format: richText.Margin.Format.ClassName }),
-      borderRadius: richText.BorderRadius({ format: richText.BorderRadius.Format.ClassName })
+      margin: descriptors.Margin({ format: descriptors.Margin.Format.ClassName }),
+      borderRadius: descriptors.BorderRadius({ format: descriptors.BorderRadius.Format.ClassName })
     }
   });
 }
@@ -3250,7 +3250,7 @@ const defaultPadding = {
 };
 function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
-  return __spreadValues(__spreadValues({}, properties.includes(richText.StyleControlProperty.Width) && {
+  return __spreadValues(__spreadValues({}, properties.includes(descriptors.StyleControlProperty.Width) && {
     maxWidth: "100%"
   }), responsiveStyle([
     style == null ? void 0 : style.width,
@@ -3261,19 +3261,19 @@ function useStyleControlCssObject(style, controlDefinition) {
     style == null ? void 0 : style.textStyle
   ], ([width, margin, padding, border, borderRadius, textStyle]) => {
     var _a, _b, _c2, _d, _e, _f, _g, _h, _i, _j, _k;
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(richText.StyleControlProperty.Width) && {
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(descriptors.StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
-    }), properties.includes(richText.StyleControlProperty.Margin) && marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(richText.StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(richText.StyleControlProperty.Border) && {
+    }), properties.includes(descriptors.StyleControlProperty.Margin) && marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(descriptors.StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(descriptors.StyleControlProperty.Border) && {
       borderTop: (_b = borderSideToString2(border == null ? void 0 : border.borderTop)) != null ? _b : "0 solid black",
       borderRight: (_c2 = borderSideToString2(border == null ? void 0 : border.borderRight)) != null ? _c2 : "0 solid black",
       borderBottom: (_d = borderSideToString2(border == null ? void 0 : border.borderBottom)) != null ? _d : "0 solid black",
       borderLeft: (_e = borderSideToString2(border == null ? void 0 : border.borderLeft)) != null ? _e : "0 solid black"
-    }), properties.includes(richText.StyleControlProperty.BorderRadius) && {
+    }), properties.includes(descriptors.StyleControlProperty.BorderRadius) && {
       borderTopLeftRadius: (_f = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopLeftRadius)) != null ? _f : 0,
       borderTopRightRadius: (_g = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _g : 0,
       borderBottomRightRadius: (_h = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomRightRadius)) != null ? _h : 0,
       borderBottomLeftRadius: (_i = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomLeftRadius)) != null ? _i : 0
-    }), properties.includes(richText.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(descriptors.StyleControlProperty.TextStyle) && __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (textStyle == null ? void 0 : textStyle.fontFamily) && { fontFamily: `"${textStyle.fontFamily}"` }), (textStyle == null ? void 0 : textStyle.letterSpacing) && { letterSpacing: textStyle.letterSpacing }), (textStyle == null ? void 0 : textStyle.fontSize) && { fontSize: fontSizeToString(textStyle.fontSize) }), (textStyle == null ? void 0 : textStyle.fontWeight) && { fontWeight: textStyle.fontWeight }), {
       textTransform: (_j = textStyle == null ? void 0 : textStyle.textTransform) != null ? _j : [],
       fontStyle: (_k = textStyle == null ? void 0 : textStyle.fontStyle) != null ? _k : []
     }));
@@ -3298,9 +3298,31 @@ function useStyleControlCssObject(style, controlDefinition) {
     return `${fontSize.value}${fontSize.unit}`;
   }
 }
-function useFormattedStyle(styleControlData, controlDefinition) {
+function useFormattedStyle(styleControlData, controlDefinition, control) {
   const style = useStyleControlCssObject(styleControlData, controlDefinition);
-  return useStyle(style);
+  const guid = React.useId().replaceAll(":", "");
+  const styleClassName = useStyle(style);
+  const classNames = `${styleClassName} ${guid}`;
+  React.useEffect(() => {
+    let currentBoxModel = null;
+    const handleAnimationFrameRequest = () => {
+      if (control == null)
+        return;
+      const element = document.querySelector(`.${guid}`);
+      const measuredBoxModel = element == null ? null : boxModels.getBox(element);
+      if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+        currentBoxModel = measuredBoxModel;
+        control.changeBoxModel(currentBoxModel);
+      }
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    };
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    return () => {
+      cancelAnimationFrame(animationFrameHandle);
+      control == null ? void 0 : control.changeBoxModel(null);
+    };
+  }, [guid, control]);
+  return classNames;
 }
 function RenderHook({
   hook: useHook,
@@ -3336,10 +3358,10 @@ function useComboboxControlValue(data) {
 }
 function useImageControlValue(data, definition) {
   var _a;
-  const format = (_a = definition.config.format) != null ? _a : richText.ImageControlValueFormat.URL;
+  const format = (_a = definition.config.format) != null ? _a : descriptors.ImageControlValueFormat.URL;
   const fileId = data != null ? data : null;
   const file = useFile(fileId);
-  if (format === richText.ImageControlValueFormat.URL) {
+  if (format === descriptors.ImageControlValueFormat.URL) {
     return file == null ? void 0 : file.publicUrl;
   }
   if (file == null || file.dimensions == null)
@@ -3676,19 +3698,19 @@ function ControlValue({
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case richText.ColorControlType:
+    case descriptors.ColorControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useColorValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case richText.ImageControlType:
+    case descriptors.ImageControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useImageControlValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case richText.LinkControlType:
+    case descriptors.LinkControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useLinkControlValue,
         parameters: [data, definition],
@@ -3700,32 +3722,38 @@ function ControlValue({
         parameters: [data],
         children: (value) => children(value)
       }, definition.type);
-    case richText.ShapeControlType:
+    case descriptors.ShapeControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(ShapeControlValue, {
         definition,
         data,
         control,
         children: (value) => children(value)
       });
-    case richText.ListControlType:
+    case descriptors.ListControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(ListControlValue, {
         definition,
         data,
         control,
         children: (value) => children(value)
       });
-    case richText.SlotControlType:
+    case descriptors.SlotControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useSlot,
         parameters: [data, control],
         children: (value) => children(value)
       }, definition.type);
-    case richText.RichTextControlType:
+    case descriptors.RichTextControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useRichText,
         parameters: [data, control],
         children: (value) => children(value)
       }, definition.type);
+    case descriptors.StyleControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useFormattedStyle,
+        parameters: [data, definition, control],
+        children: (value) => children(value)
+      }, definition.type);
     default:
       return children(data);
   }
@@ -3765,19 +3793,19 @@ function PropsValue({
     return constants.getPropControllers(state, documentKey, element.key);
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
-    var _a2, _b;
+    var _a2, _b, _c2;
     switch (descriptor.type) {
       case textInput.CheckboxControlType:
       case textInput.NumberControlType:
       case textInput.TextInputControlType:
       case textInput.TextAreaControlType:
       case textInput.SelectControlType:
-      case richText.ColorControlType:
-      case richText.ImageControlType:
+      case descriptors.ColorControlType:
+      case descriptors.ImageControlType:
       case combobox.ComboboxControlType:
-      case richText.ShapeControlType:
-      case richText.ListControlType:
-      case richText.LinkControlType:
+      case descriptors.ShapeControlType:
+      case descriptors.ListControlType:
+      case descriptors.LinkControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
@@ -3786,16 +3814,18 @@ function PropsValue({
             [propName]: value
           }))
         });
-      case richText.StyleControlType:
+      case descriptors.StyleControlType: {
+        const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useFormattedStyle,
-          parameters: [props[propName], descriptor],
+          parameters: [props[propName], descriptor, control],
           children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
             [propName]: value
           }))
         }, descriptor.type);
-      case richText.RichTextControlType:
-        const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
+      }
+      case descriptors.RichTextControlType: {
+        const control = (_b = propControllers == null ? void 0 : propControllers[propName]) != null ? _b : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useRichText,
           parameters: [props[propName], control],
@@ -3803,19 +3833,20 @@ function PropsValue({
             [propName]: value
           }))
         }, descriptor.type);
-      case richText.SlotControlType: {
-        const control2 = (_b = propControllers == null ? void 0 : propControllers[propName]) != null ? _b : null;
+      }
+      case descriptors.SlotControlType: {
+        const control = (_c2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _c2 : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useSlot,
-          parameters: [props[propName], control2],
+          parameters: [props[propName], control],
           children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
             [propName]: value
           }))
         }, descriptor.type);
       }
-      case richText.Types.Width:
+      case descriptors.Types.Width:
         switch (descriptor.options.format) {
-          case richText.WidthPropControllerFormat.ClassName:
+          case descriptors.WidthPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useWidthStyle,
               parameters: [props[propName], descriptor],
@@ -3828,9 +3859,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.Padding:
+      case descriptors.Types.Padding:
         switch (descriptor.options.format) {
-          case richText.PaddingPropControllerFormat.ClassName:
+          case descriptors.PaddingPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: usePaddingStyle,
               parameters: [props[propName]],
@@ -3843,9 +3874,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.Margin:
+      case descriptors.Types.Margin:
         switch (descriptor.options.format) {
-          case richText.MarginPropControllerFormat.ClassName:
+          case descriptors.MarginPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useMarginStyle,
               parameters: [props[propName]],
@@ -3858,9 +3889,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.BorderRadius:
+      case descriptors.Types.BorderRadius:
         switch (descriptor.options.format) {
-          case richText.BorderRadiusPropControllerFormat.ClassName:
+          case descriptors.BorderRadiusPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useBorderRadiusStyle,
               parameters: [props[propName]],
@@ -3873,9 +3904,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.Shadows:
+      case descriptors.Types.Shadows:
         switch (descriptor.options.format) {
-          case richText.ShadowsPropControllerFormat.ClassName:
+          case descriptors.ShadowsPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useShadowsStyle,
               parameters: [props[propName]],
@@ -3888,9 +3919,9 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.Border:
+      case descriptors.Types.Border:
         switch (descriptor.options.format) {
-          case richText.BorderPropControllerFormat.ClassName:
+          case descriptors.BorderPropControllerFormat.ClassName:
             return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
               hook: useBorderStyle,
               parameters: [props[propName]],
@@ -3903,7 +3934,7 @@ function PropsValue({
               [propName]: props[propName]
             }));
         }
-      case richText.Types.ResponsiveColor:
+      case descriptors.Types.ResponsiveColor:
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useResponsiveColor,
           parameters: [props[propName]],