@makeswift/runtime 0.0.0-f5b044f → 0.0.1

package/dist/index.cjs.js

@@ -63,6 +63,7 @@ var Hotkeys = require("slate-hotkeys");
 var ipsum = require("corporate-ipsum");
 var slateReact = require("slate-react");
 var Lists = require("@convertkit/slate-lists");
+var style = require("./style.cjs.js");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
@@ -997,7 +998,7 @@ function cssPadding(defaultValue = {}) {
   `;
 }
 const defaultBorderSide = { width: 0, style: "solid", color: null };
-const getBorderSide = ({ width, style, color }) => `${width != null ? width : 0}px ${style} ${color != null ? colorToString(color) : "black"}`;
+const getBorderSide = ({ width, style: style2, color }) => `${width != null ? width : 0}px ${style2} ${color != null ? colorToString(color) : "black"}`;
 function cssBorder(defaultValue = {}) {
   const defaultBorderTop = defaultValue.borderTop === void 0 ? defaultBorderSide : defaultValue.borderTop;
   const defaultBorderRight = defaultValue.borderRight === void 0 ? defaultBorderSide : defaultValue.borderRight;
@@ -1202,12 +1203,12 @@ function Parallax(_g2) {
   }, [strength]);
   const getProps = React.useCallback((_a) => {
     var _b = _a, {
-      style
+      style: style2
     } = _b, restOfChildrenProps = __objRest(_b, [
       "style"
     ]);
     return __spreadProps(__spreadValues({}, restOfChildrenProps), {
-      style: __spreadValues(__spreadProps(__spreadValues({}, style), {
+      style: __spreadValues(__spreadProps(__spreadValues({}, style2), {
         position: "absolute",
         left: 0,
         right: 0,
@@ -2272,8 +2273,14 @@ function registerComponent$b(runtime) {
         }],
         defaultValue: "medium"
       }),
-      color: descriptors.ResponsiveColor({
-        placeholder: "black"
+      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: descriptors.ResponsiveColor({
         label: "Text color",
@@ -2850,17 +2857,29 @@ function registerComponent$9(runtime) {
         }
       }),
       margin: descriptors.Margin(),
-      pageSize: descriptors.ResponsiveNumber({
-        label: "Images shown",
-        defaultValue: 1,
-        min: 1,
-        step: 1
+      pageSize: descriptors.ResponsiveNumber((props) => {
+        var _a;
+        const images = props.images;
+        const imagesLength = (_a = images == null ? void 0 : images.length) != null ? _a : 0;
+        return {
+          label: "Images shown",
+          defaultValue: 1,
+          min: 1,
+          max: imagesLength,
+          step: 1
+        };
       }),
-      step: descriptors.ResponsiveNumber({
-        label: "Step",
-        defaultValue: 1,
-        min: 1,
-        step: 1
+      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;
+        return {
+          label: "Step",
+          defaultValue: 1,
+          min: 1,
+          max: pageSizeValue,
+          step: 1
+        };
       }),
       slideAlignment: descriptors.ResponsiveIconRadioGroup({
         label: "Alignment",
@@ -2890,18 +2909,19 @@ function registerComponent$9(runtime) {
       autoplay: descriptors.Checkbox({
         label: "Autoplay"
       }),
-      delay: descriptors.Number({
+      delay: descriptors.Number((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
         step: 0.1,
-        suffix: "seconds"
-      }),
+        suffix: "seconds",
+        hidden: !props.autoplay
+      })),
       showArrows: descriptors.Checkbox({
         preset: true,
         label: "Show arrows"
       }),
-      arrowPosition: descriptors.ResponsiveIconRadioGroup({
+      arrowPosition: descriptors.ResponsiveIconRadioGroup((props) => ({
         label: "Arrow position",
         options: [{
           label: "Inside",
@@ -2916,24 +2936,28 @@ function registerComponent$9(runtime) {
           value: "outside",
           icon: "ArrowOutside16"
         }],
-        defaultValue: "inside"
-      }),
-      arrowColor: descriptors.ResponsiveColor({
+        defaultValue: "inside",
+        hidden: props.showArrows === false
+      })),
+      arrowColor: descriptors.ResponsiveColor((props) => ({
         label: "Arrow color",
-        placeholder: "black"
-      }),
-      arrowBackground: descriptors.ResponsiveColor({
+        placeholder: "black",
+        hidden: props.showArrows === false
+      })),
+      arrowBackground: descriptors.ResponsiveColor((props) => ({
         label: "Arrow background",
-        placeholder: "white"
-      }),
+        placeholder: "white",
+        hidden: props.showArrows === false
+      })),
       showDots: descriptors.Checkbox({
         preset: true,
         label: "Show dots"
       }),
-      dotColor: descriptors.ResponsiveColor({
+      dotColor: descriptors.ResponsiveColor((props) => ({
         label: "Dot color",
-        placeholder: "black"
-      }),
+        placeholder: "black",
+        hidden: props.showDots === false
+      })),
       slideBorder: descriptors.Border(),
       slideBorderRadius: descriptors.BorderRadius()
     }
@@ -3246,9 +3270,9 @@ function registerComponent$8(runtime) {
     icon: "Countdown40",
     props: {
       id: descriptors.ElementID(),
-      date: descriptors.Date({
+      date: descriptors.Date(() => ({
         preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
-      }),
+      })),
       variant: descriptors.ResponsiveIconRadioGroup({
         label: "Style",
         options: [{
@@ -4115,7 +4139,7 @@ var Checkbox = React.forwardRef(function Checkbox2(_w, ref) {
   var _x = _w, {
     error,
     className,
-    style,
+    style: style2,
     form
   } = _x, restOfProps = __objRest(_x, [
     "error",
@@ -4141,7 +4165,7 @@ var Checkbox = React.forwardRef(function Checkbox2(_w, ref) {
       className,
       error,
       contrast,
-      style
+      style: style2
     })]
   });
 });
@@ -4371,7 +4395,7 @@ var RadioButton = React.forwardRef(function RadioButton2(_C, ref) {
   var _D = _C, {
     error,
     className,
-    style,
+    style: style2,
     form
   } = _D, restOfProps = __objRest(_D, [
     "error",
@@ -4395,7 +4419,7 @@ var RadioButton = React.forwardRef(function RadioButton2(_C, ref) {
       className,
       error,
       contrast,
-      style
+      style: style2
     })]
   });
 });
@@ -5221,7 +5245,7 @@ function registerComponent$5(runtime) {
       id: descriptors.ElementID(),
       tableId: descriptors.Table(),
       fields: descriptors.TableFormFields(),
-      submitLink: descriptors.Link({
+      submitLink: descriptors.Link((props) => ({
         label: "Redirect to",
         options: [{
           value: "OPEN_PAGE",
@@ -5229,9 +5253,10 @@ function registerComponent$5(runtime) {
         }, {
           value: "OPEN_URL",
           label: "Open URL"
-        }]
-      }),
-      gap: descriptors.GapY({
+        }],
+        hidden: props.tableId == null
+      })),
+      gap: descriptors.GapY((props) => ({
         preset: [{
           deviceId: "desktop",
           value: {
@@ -5243,9 +5268,10 @@ function registerComponent$5(runtime) {
         defaultValue: {
           value: 0,
           unit: "px"
-        }
-      }),
-      shape: descriptors.ResponsiveIconRadioGroup({
+        },
+        hidden: props.tableId == null
+      })),
+      shape: descriptors.ResponsiveIconRadioGroup((props) => ({
         label: "Shape",
         options: [{
           label: "Pill",
@@ -5260,9 +5286,10 @@ function registerComponent$5(runtime) {
           value: Shapes.SQUARE,
           icon: "ButtonSquare16"
         }],
-        defaultValue: Shapes.ROUNDED
-      }),
-      size: descriptors.ResponsiveIconRadioGroup({
+        defaultValue: Shapes.ROUNDED,
+        hidden: props.tableId == null
+      })),
+      size: descriptors.ResponsiveIconRadioGroup((props) => ({
         label: "Size",
         options: [{
           label: "Small",
@@ -5277,9 +5304,10 @@ function registerComponent$5(runtime) {
           value: Sizes.LARGE,
           icon: "SizeLarge16"
         }],
-        defaultValue: Sizes.MEDIUM
-      }),
-      contrast: descriptors.ResponsiveIconRadioGroup({
+        defaultValue: Sizes.MEDIUM,
+        hidden: (props == null ? void 0 : props.tableId) == null
+      })),
+      contrast: descriptors.ResponsiveIconRadioGroup((props) => ({
         label: "Color",
         options: [{
           label: "Light mode",
@@ -5290,30 +5318,41 @@ function registerComponent$5(runtime) {
           value: Contrasts.DARK,
           icon: "Moon16"
         }],
-        defaultValue: Contrasts.LIGHT
-      }),
+        defaultValue: Contrasts.LIGHT,
+        hidden: props.tableId == null
+      })),
       labelTextStyle: descriptors.TextStyle({
         label: "Label text style"
       }),
-      labelTextColor: descriptors.ResponsiveColor({
-        label: "Label text color"
+      labelTextColor: descriptors.ResponsiveColor((props, device) => {
+        const hidden = props.tableId == null;
+        const responsiveContrast = props.contrast;
+        const contrast = findDeviceOverride(responsiveContrast, device);
+        return {
+          hidden,
+          label: "Label text color",
+          placeholder: (contrast == null ? void 0 : contrast.value) === Contrasts.DARK ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.8)"
+        };
       }),
       submitTextStyle: descriptors.TextStyle({
         label: "Button text style"
       }),
-      brandColor: descriptors.ResponsiveColor({
+      brandColor: descriptors.ResponsiveColor((props) => ({
         label: "Button color",
-        placeholder: "black"
-      }),
-      submitTextColor: descriptors.ResponsiveColor({
+        placeholder: "black",
+        hidden: props.tableId == null
+      })),
+      submitTextColor: descriptors.ResponsiveColor((props) => ({
         label: "Button text color",
-        placeholder: "white"
-      }),
-      submitLabel: descriptors.TextInput({
+        placeholder: "white",
+        hidden: props.tableId == null
+      })),
+      submitLabel: descriptors.TextInput((props) => ({
         label: "Button label",
-        placeholder: "Submit"
-      }),
-      submitVariant: descriptors.ResponsiveSelect({
+        placeholder: "Submit",
+        hidden: props.tableId == null
+      })),
+      submitVariant: descriptors.ResponsiveSelect((props) => ({
         label: "Button style",
         options: [{
           value: "flat",
@@ -5337,12 +5376,14 @@ function registerComponent$5(runtime) {
           value: "skewed",
           label: "Skewed"
         }],
-        defaultValue: "flat"
-      }),
-      submitWidth: descriptors.ResponsiveLength({
-        label: "Button width"
-      }),
-      submitAlignment: descriptors.ResponsiveIconRadioGroup({
+        defaultValue: "flat",
+        hidden: props.tableId == null
+      })),
+      submitWidth: descriptors.ResponsiveLength((props) => ({
+        label: "Button width",
+        hidden: props.tableId == null
+      })),
+      submitAlignment: descriptors.ResponsiveIconRadioGroup((props) => ({
         label: "Button alignment",
         options: [{
           label: "Left",
@@ -5357,8 +5398,9 @@ function registerComponent$5(runtime) {
           value: Alignments.RIGHT,
           icon: "AlignRight16"
         }],
-        defaultValue: Alignments.CENTER
-      }),
+        defaultValue: Alignments.CENTER,
+        hidden: props.tableId == null
+      })),
       width: descriptors.Width({
         format: descriptors.Width.Formats.ClassName,
         preset: [{
@@ -5965,30 +6007,47 @@ function registerComponent$4(runtime) {
     props: {
       id: descriptors.ElementID(),
       links: descriptors.NavigationLinks(),
-      linkTextStyle: descriptors.TextStyle({
-        label: "Link text style"
+      linkTextStyle: descriptors.TextStyle((props) => {
+        const links2 = props.links;
+        return {
+          label: "Link text style",
+          hidden: links2 == null || links2.length === 0
+        };
       }),
       showLogo: descriptors.Checkbox({
         preset: true,
         label: "Show logo"
       }),
-      logoFile: descriptors.Image({
-        label: "Logo"
-      }),
-      logoWidth: descriptors.ResponsiveLength({
+      logoFile: descriptors.Image((props) => ({
+        label: "Logo",
+        hidden: props.showLogo === false
+      })),
+      logoWidth: descriptors.ResponsiveLength((props) => ({
+        preset: [{
+          deviceId: "desktop",
+          value: {
+            value: 100,
+            unit: "px"
+          }
+        }],
         label: "Logo width",
+        min: 0,
+        max: 1e3,
         options: [{
           value: "px",
           label: "Pixels",
           icon: "Px16"
-        }]
-      }),
-      logoAltText: descriptors.TextInput({
-        label: "Logo alt text"
-      }),
-      logoLink: descriptors.Link({
-        label: "Logo on click"
-      }),
+        }],
+        hidden: props.showLogo === false
+      })),
+      logoAltText: descriptors.TextInput((props) => ({
+        label: "Logo alt text",
+        hidden: props.showLogo === false
+      })),
+      logoLink: descriptors.Link((props) => ({
+        label: "Logo on click",
+        hidden: props.showLogo === false
+      })),
       alignment: descriptors.ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [{
@@ -6033,17 +6092,32 @@ function registerComponent$4(runtime) {
           label: "Cover from left"
         }]
       }),
-      mobileMenuOpenIconColor: descriptors.ResponsiveColor({
-        label: "Open icon color",
-        placeholder: "rgba(161, 168, 194, 0.5)"
+      mobileMenuOpenIconColor: descriptors.ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Open icon color",
+          placeholder: "rgba(161, 168, 194, 0.5)",
+          hidden
+        };
       }),
-      mobileMenuCloseIconColor: descriptors.ResponsiveColor({
-        label: "Close icon color",
-        placeholder: "rgba(161, 168, 194, 0.5)"
+      mobileMenuCloseIconColor: descriptors.ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Close icon color",
+          placeholder: "rgba(161, 168, 194, 0.5)",
+          hidden
+        };
       }),
-      mobileMenuBackgroundColor: descriptors.ResponsiveColor({
-        label: "Menu BG color",
-        placeholder: "black"
+      mobileMenuBackgroundColor: descriptors.ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Menu BG color",
+          placeholder: "black",
+          hidden
+        };
       }),
       width: descriptors.Width({
         format: descriptors.Width.Formats.ClassName,
@@ -6960,67 +7034,90 @@ function registerComponent$2(runtime) {
           openInNewTab: false
         }
       }),
-      shape: descriptors.ResponsiveIconRadioGroup({
-        label: "Shape",
-        options: [{
-          label: "Naked",
-          value: "naked",
-          icon: "Star16"
-        }, {
-          label: "Circle",
-          value: "circle",
-          icon: "StarCircle16"
-        }, {
-          label: "Rounded",
-          value: "rounded",
-          icon: "StarRoundedSquare16"
-        }, {
-          label: "Square",
-          value: "square",
-          icon: "StarSquare16"
-        }],
-        defaultValue: "naked"
+      shape: descriptors.ResponsiveIconRadioGroup((props) => {
+        const links2 = props.links;
+        return {
+          label: "Shape",
+          options: [{
+            label: "Naked",
+            value: "naked",
+            icon: "Star16"
+          }, {
+            label: "Circle",
+            value: "circle",
+            icon: "StarCircle16"
+          }, {
+            label: "Rounded",
+            value: "rounded",
+            icon: "StarRoundedSquare16"
+          }, {
+            label: "Square",
+            value: "square",
+            icon: "StarSquare16"
+          }],
+          defaultValue: "naked",
+          hidden: links2 == null || links2.links.length === 0
+        };
       }),
-      size: descriptors.ResponsiveIconRadioGroup({
-        label: "Size",
-        options: [{
-          label: "Small",
-          value: "small",
-          icon: "SizeSmall16"
-        }, {
-          label: "Medium",
-          value: "medium",
-          icon: "SizeMedium16"
-        }, {
-          label: "Large",
-          value: "large",
-          icon: "SizeLarge16"
-        }],
-        defaultValue: "medium"
+      size: descriptors.ResponsiveIconRadioGroup((props) => {
+        const links2 = props.links;
+        return {
+          label: "Size",
+          options: [{
+            label: "Small",
+            value: "small",
+            icon: "SizeSmall16"
+          }, {
+            label: "Medium",
+            value: "medium",
+            icon: "SizeMedium16"
+          }, {
+            label: "Large",
+            value: "large",
+            icon: "SizeLarge16"
+          }],
+          defaultValue: "medium",
+          hidden: links2 == null || links2.links.length === 0
+        };
       }),
-      hoverStyle: descriptors.ResponsiveSelect({
-        label: "On hover",
-        options: [{
-          value: "none",
-          label: "None"
-        }, {
-          value: "grow",
-          label: "Grow"
-        }, {
-          value: "shrink",
-          label: "Shrink"
-        }, {
-          value: "fade",
-          label: "Fade"
-        }],
-        defaultValue: "none",
-        labelOrientation: "horizontal"
+      hoverStyle: descriptors.ResponsiveSelect((props) => {
+        const links2 = props.links;
+        const hidden = links2 == null || links2.links.length === 0;
+        return {
+          label: "On hover",
+          options: [{
+            value: "none",
+            label: "None"
+          }, {
+            value: "grow",
+            label: "Grow"
+          }, {
+            value: "shrink",
+            label: "Shrink"
+          }, {
+            value: "fade",
+            label: "Fade"
+          }],
+          defaultValue: "none",
+          labelOrientation: "horizontal",
+          hidden
+        };
       }),
-      fill: descriptors.ResponsiveColor({
-        label: "Icon color"
+      fill: descriptors.ResponsiveColor((props) => {
+        const links2 = props.links;
+        const hidden = links2 == null || links2.links.length === 0;
+        return {
+          label: "Icon color",
+          hidden
+        };
       }),
-      backgroundColor: descriptors.ResponsiveColor({
-        label: "Shape color"
+      backgroundColor: descriptors.ResponsiveColor((props) => {
+        const links2 = props.links;
+        const hidden = links2 == null || links2.links.length === 0;
+        return {
+          label: "Shape color",
+          hidden
+        };
       }),
       alignment: descriptors.ResponsiveIconRadioGroup({
         label: "Alignment",
@@ -7472,7 +7569,7 @@ function registerComponent$1(runtime) {
     label: "Text",
     props: {
       id: descriptors.ElementID(),
-      text: descriptors.RichText({
+      text: descriptors.RichText(() => ({
         preset: {
           document: {
             nodes: [{
@@ -7513,7 +7610,7 @@ function registerComponent$1(runtime) {
             }]
           }
         }
-      }),
+      })),
       width: descriptors.Width({
         format: descriptors.Width.Formats.ClassName,
         preset: [{
@@ -7709,6 +7806,74 @@ const FallbackComponent = React.forwardRef(function FallbackComponent2({
     })]
   });
 });
+function useStyleControlDataClass(style$1, controlDefinition) {
+  const { properties } = controlDefinition.config;
+  return css.css(__spreadValues(__spreadValues({}, properties.includes(style.StyleControlProperty.Width) && {
+    maxWidth: "100%"
+  }), responsiveStyle([
+    style$1 == null ? void 0 : style$1.width,
+    style$1 == null ? void 0 : style$1.margin,
+    style$1 == null ? void 0 : style$1.padding,
+    useBorder(style$1 == null ? void 0 : style$1.border),
+    style$1 == null ? void 0 : style$1.borderRadius
+  ], ([width, margin, padding, border, borderRadius]) => {
+    var _a, _b, _c, _d, _e, _f, _g2, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(style.StyleControlProperty.Width) && {
+      width: (_a = widthToString(width)) != null ? _a : "100%"
+    }), properties.includes(style.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: (_e = marginToString(margin == null ? void 0 : margin.marginLeft)) != null ? _e : "auto"
+    }), properties.includes(style.StyleControlProperty.Padding) && {
+      paddingTop: (_f = paddingToString(padding == null ? void 0 : padding.paddingTop)) != null ? _f : 0,
+      paddingRight: (_g2 = paddingToString(padding == null ? void 0 : padding.paddingRight)) != null ? _g2 : 0,
+      paddingBottom: (_h = paddingToString(padding == null ? void 0 : padding.paddingBottom)) != null ? _h : 0,
+      paddingLeft: (_i = paddingToString(padding == null ? void 0 : padding.paddingLeft)) != null ? _i : 0
+    }), properties.includes(style.StyleControlProperty.Border) && {
+      borderTop: (_j = borderSideToString(border == null ? void 0 : border.borderTop)) != null ? _j : "0 solid black",
+      borderRight: (_k = borderSideToString(border == null ? void 0 : border.borderRight)) != null ? _k : "0 solid black",
+      borderBottom: (_l = borderSideToString(border == null ? void 0 : border.borderBottom)) != null ? _l : "0 solid black",
+      borderLeft: (_m = borderSideToString(border == null ? void 0 : border.borderLeft)) != null ? _m : "0 solid black"
+    }), properties.includes(style.StyleControlProperty.BorderRadius) && {
+      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
+    });
+  })));
+  function widthToString(widthProperty) {
+    if (widthProperty == null)
+      return null;
+    return `${widthProperty.value}${widthProperty.unit}`;
+  }
+  function marginToString(marginProperty) {
+    if (marginProperty == null)
+      return null;
+    if (marginProperty === "auto")
+      return marginProperty;
+    return `${marginProperty.value}${marginProperty.unit}`;
+  }
+  function paddingToString(paddingProperty) {
+    if (paddingProperty == null)
+      return null;
+    return `${paddingProperty.value}${paddingProperty.unit}`;
+  }
+  function borderSideToString(borderSide) {
+    if (borderSide == null)
+      return null;
+    const { width, color, style: style2 } = borderSide;
+    return `${width != null ? width : 0}px ${style2} ${color != null ? colorToString(color) : "black"}`;
+  }
+  function borderRadiusToString(borderRadius) {
+    if (borderRadius == null)
+      return null;
+    return `${borderRadius.value}${borderRadius.unit}`;
+  }
+}
+function useFormattedStyle(styleControlData, controlDefinition) {
+  return useStyleControlDataClass(styleControlData, controlDefinition);
+}
 function useDeviceMode() {
   return "desktop";
 }
@@ -7733,6 +7898,8 @@ function useProps(element) {
       }
       case descriptors.Types.Width:
         return [propName, useWidth(props[propName], descriptor, props)];
+      case style.StyleControlType:
+        return [propName, useFormattedStyle(props[propName], descriptor)];
       default:
         return [propName, props[propName]];
     }