@makeswift/runtime 0.0.0-f5b044f → 0.0.1

package/dist/index.es.js

@@ -63,6 +63,7 @@ import Hotkeys from "slate-hotkeys";
 import ipsum from "corporate-ipsum";
 import { Editor } from "slate-react";
 import Lists from "@convertkit/slate-lists";
+import { a as StyleControlProperty, S as StyleControlType } from "./style.es.js";
 const PlaceholderBase$1 = styled.div`
   width: 100%;
   background: rgba(161, 168, 194, 0.18);
@@ -2238,8 +2239,14 @@ function registerComponent$b(runtime) {
         }],
         defaultValue: "medium"
       }),
-      color: ResponsiveColor({
-        placeholder: "black"
+      color: 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: ResponsiveColor({
         label: "Text color",
@@ -2816,17 +2823,29 @@ function registerComponent$9(runtime) {
         }
       }),
       margin: Margin(),
-      pageSize: ResponsiveNumber({
-        label: "Images shown",
-        defaultValue: 1,
-        min: 1,
-        step: 1
+      pageSize: 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: ResponsiveNumber({
-        label: "Step",
-        defaultValue: 1,
-        min: 1,
-        step: 1
+      step: 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: ResponsiveIconRadioGroup({
         label: "Alignment",
@@ -2856,18 +2875,19 @@ function registerComponent$9(runtime) {
       autoplay: Checkbox$1({
         label: "Autoplay"
       }),
-      delay: Number$1({
+      delay: Number$1((props) => ({
         label: "Delay",
         preset: 5,
         min: 1,
         step: 0.1,
-        suffix: "seconds"
-      }),
+        suffix: "seconds",
+        hidden: !props.autoplay
+      })),
       showArrows: Checkbox$1({
         preset: true,
         label: "Show arrows"
       }),
-      arrowPosition: ResponsiveIconRadioGroup({
+      arrowPosition: ResponsiveIconRadioGroup((props) => ({
         label: "Arrow position",
         options: [{
           label: "Inside",
@@ -2882,24 +2902,28 @@ function registerComponent$9(runtime) {
           value: "outside",
           icon: "ArrowOutside16"
         }],
-        defaultValue: "inside"
-      }),
-      arrowColor: ResponsiveColor({
+        defaultValue: "inside",
+        hidden: props.showArrows === false
+      })),
+      arrowColor: ResponsiveColor((props) => ({
         label: "Arrow color",
-        placeholder: "black"
-      }),
-      arrowBackground: ResponsiveColor({
+        placeholder: "black",
+        hidden: props.showArrows === false
+      })),
+      arrowBackground: ResponsiveColor((props) => ({
         label: "Arrow background",
-        placeholder: "white"
-      }),
+        placeholder: "white",
+        hidden: props.showArrows === false
+      })),
       showDots: Checkbox$1({
         preset: true,
         label: "Show dots"
       }),
-      dotColor: ResponsiveColor({
+      dotColor: ResponsiveColor((props) => ({
         label: "Dot color",
-        placeholder: "black"
-      }),
+        placeholder: "black",
+        hidden: props.showDots === false
+      })),
       slideBorder: Border(),
       slideBorderRadius: BorderRadius()
     }
@@ -3212,9 +3236,9 @@ function registerComponent$8(runtime) {
     icon: "Countdown40",
     props: {
       id: ElementID(),
-      date: Date$1({
+      date: Date$1(() => ({
         preset: new Date(Date.now() + 1e3 * 60 * 60 * 24 * 2).toISOString()
-      }),
+      })),
       variant: ResponsiveIconRadioGroup({
         label: "Style",
         options: [{
@@ -5187,7 +5211,7 @@ function registerComponent$5(runtime) {
       id: ElementID(),
       tableId: Table(),
       fields: TableFormFields(),
-      submitLink: Link$1({
+      submitLink: Link$1((props) => ({
         label: "Redirect to",
         options: [{
           value: "OPEN_PAGE",
@@ -5195,9 +5219,10 @@ function registerComponent$5(runtime) {
         }, {
           value: "OPEN_URL",
           label: "Open URL"
-        }]
-      }),
-      gap: GapY({
+        }],
+        hidden: props.tableId == null
+      })),
+      gap: GapY((props) => ({
         preset: [{
           deviceId: "desktop",
           value: {
@@ -5209,9 +5234,10 @@ function registerComponent$5(runtime) {
         defaultValue: {
           value: 0,
           unit: "px"
-        }
-      }),
-      shape: ResponsiveIconRadioGroup({
+        },
+        hidden: props.tableId == null
+      })),
+      shape: ResponsiveIconRadioGroup((props) => ({
         label: "Shape",
         options: [{
           label: "Pill",
@@ -5226,9 +5252,10 @@ function registerComponent$5(runtime) {
           value: Shapes.SQUARE,
           icon: "ButtonSquare16"
         }],
-        defaultValue: Shapes.ROUNDED
-      }),
-      size: ResponsiveIconRadioGroup({
+        defaultValue: Shapes.ROUNDED,
+        hidden: props.tableId == null
+      })),
+      size: ResponsiveIconRadioGroup((props) => ({
         label: "Size",
         options: [{
           label: "Small",
@@ -5243,9 +5270,10 @@ function registerComponent$5(runtime) {
           value: Sizes.LARGE,
           icon: "SizeLarge16"
         }],
-        defaultValue: Sizes.MEDIUM
-      }),
-      contrast: ResponsiveIconRadioGroup({
+        defaultValue: Sizes.MEDIUM,
+        hidden: (props == null ? void 0 : props.tableId) == null
+      })),
+      contrast: ResponsiveIconRadioGroup((props) => ({
         label: "Color",
         options: [{
           label: "Light mode",
@@ -5256,30 +5284,41 @@ function registerComponent$5(runtime) {
           value: Contrasts.DARK,
           icon: "Moon16"
         }],
-        defaultValue: Contrasts.LIGHT
-      }),
+        defaultValue: Contrasts.LIGHT,
+        hidden: props.tableId == null
+      })),
       labelTextStyle: TextStyle({
         label: "Label text style"
       }),
-      labelTextColor: ResponsiveColor({
-        label: "Label text color"
+      labelTextColor: 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: TextStyle({
         label: "Button text style"
       }),
-      brandColor: ResponsiveColor({
+      brandColor: ResponsiveColor((props) => ({
         label: "Button color",
-        placeholder: "black"
-      }),
-      submitTextColor: ResponsiveColor({
+        placeholder: "black",
+        hidden: props.tableId == null
+      })),
+      submitTextColor: ResponsiveColor((props) => ({
         label: "Button text color",
-        placeholder: "white"
-      }),
-      submitLabel: TextInput({
+        placeholder: "white",
+        hidden: props.tableId == null
+      })),
+      submitLabel: TextInput((props) => ({
         label: "Button label",
-        placeholder: "Submit"
-      }),
-      submitVariant: ResponsiveSelect({
+        placeholder: "Submit",
+        hidden: props.tableId == null
+      })),
+      submitVariant: ResponsiveSelect((props) => ({
         label: "Button style",
         options: [{
           value: "flat",
@@ -5303,12 +5342,14 @@ function registerComponent$5(runtime) {
           value: "skewed",
           label: "Skewed"
         }],
-        defaultValue: "flat"
-      }),
-      submitWidth: ResponsiveLength({
-        label: "Button width"
-      }),
-      submitAlignment: ResponsiveIconRadioGroup({
+        defaultValue: "flat",
+        hidden: props.tableId == null
+      })),
+      submitWidth: ResponsiveLength((props) => ({
+        label: "Button width",
+        hidden: props.tableId == null
+      })),
+      submitAlignment: ResponsiveIconRadioGroup((props) => ({
         label: "Button alignment",
         options: [{
           label: "Left",
@@ -5323,8 +5364,9 @@ function registerComponent$5(runtime) {
           value: Alignments.RIGHT,
           icon: "AlignRight16"
         }],
-        defaultValue: Alignments.CENTER
-      }),
+        defaultValue: Alignments.CENTER,
+        hidden: props.tableId == null
+      })),
       width: Width({
         format: Width.Formats.ClassName,
         preset: [{
@@ -5931,30 +5973,47 @@ function registerComponent$4(runtime) {
     props: {
       id: ElementID(),
       links: NavigationLinks(),
-      linkTextStyle: TextStyle({
-        label: "Link text style"
+      linkTextStyle: TextStyle((props) => {
+        const links2 = props.links;
+        return {
+          label: "Link text style",
+          hidden: links2 == null || links2.length === 0
+        };
       }),
       showLogo: Checkbox$1({
         preset: true,
         label: "Show logo"
       }),
-      logoFile: Image$1({
-        label: "Logo"
-      }),
-      logoWidth: ResponsiveLength({
+      logoFile: Image$1((props) => ({
+        label: "Logo",
+        hidden: props.showLogo === false
+      })),
+      logoWidth: 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: TextInput({
-        label: "Logo alt text"
-      }),
-      logoLink: Link$1({
-        label: "Logo on click"
-      }),
+        }],
+        hidden: props.showLogo === false
+      })),
+      logoAltText: TextInput((props) => ({
+        label: "Logo alt text",
+        hidden: props.showLogo === false
+      })),
+      logoLink: Link$1((props) => ({
+        label: "Logo on click",
+        hidden: props.showLogo === false
+      })),
       alignment: ResponsiveIconRadioGroup({
         label: "Alignment",
         options: [{
@@ -5999,17 +6058,32 @@ function registerComponent$4(runtime) {
           label: "Cover from left"
         }]
       }),
-      mobileMenuOpenIconColor: ResponsiveColor({
-        label: "Open icon color",
-        placeholder: "rgba(161, 168, 194, 0.5)"
+      mobileMenuOpenIconColor: 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: ResponsiveColor({
-        label: "Close icon color",
-        placeholder: "rgba(161, 168, 194, 0.5)"
+      mobileMenuCloseIconColor: 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: ResponsiveColor({
-        label: "Menu BG color",
-        placeholder: "black"
+      mobileMenuBackgroundColor: ResponsiveColor((props, device) => {
+        const mobileMenuAnimation = props.mobileMenuAnimation;
+        const hidden = !findDeviceOverride(mobileMenuAnimation, device);
+        return {
+          label: "Menu BG color",
+          placeholder: "black",
+          hidden
+        };
       }),
       width: Width({
         format: Width.Formats.ClassName,
@@ -6926,67 +7000,90 @@ function registerComponent$2(runtime) {
           openInNewTab: false
         }
       }),
-      shape: 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: 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: 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: 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: 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: 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: ResponsiveColor({
-        label: "Icon color"
+      fill: ResponsiveColor((props) => {
+        const links2 = props.links;
+        const hidden = links2 == null || links2.links.length === 0;
+        return {
+          label: "Icon color",
+          hidden
+        };
       }),
-      backgroundColor: ResponsiveColor({
-        label: "Shape color"
+      backgroundColor: ResponsiveColor((props) => {
+        const links2 = props.links;
+        const hidden = links2 == null || links2.links.length === 0;
+        return {
+          label: "Shape color",
+          hidden
+        };
       }),
       alignment: ResponsiveIconRadioGroup({
         label: "Alignment",
@@ -7438,7 +7535,7 @@ function registerComponent$1(runtime) {
     label: "Text",
     props: {
       id: ElementID(),
-      text: RichText({
+      text: RichText(() => ({
         preset: {
           document: {
             nodes: [{
@@ -7479,7 +7576,7 @@ function registerComponent$1(runtime) {
             }]
           }
         }
-      }),
+      })),
       width: Width({
         format: Width.Formats.ClassName,
         preset: [{
@@ -7675,6 +7772,74 @@ const FallbackComponent = forwardRef(function FallbackComponent2({
     })]
   });
 });
+function useStyleControlDataClass(style, controlDefinition) {
+  const { properties } = controlDefinition.config;
+  return css$1(__spreadValues(__spreadValues({}, properties.includes(StyleControlProperty.Width) && {
+    maxWidth: "100%"
+  }), responsiveStyle([
+    style == null ? void 0 : style.width,
+    style == null ? void 0 : style.margin,
+    style == null ? void 0 : style.padding,
+    useBorder(style == null ? void 0 : style.border),
+    style == null ? void 0 : style.borderRadius
+  ], ([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(StyleControlProperty.Width) && {
+      width: (_a = widthToString(width)) != null ? _a : "100%"
+    }), properties.includes(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(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(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(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";
 }
@@ -7699,6 +7864,8 @@ function useProps(element) {
       }
       case Types.Width:
         return [propName, useWidth(props[propName], descriptor, props)];
+      case StyleControlType:
+        return [propName, useFormattedStyle(props[propName], descriptor)];
       default:
         return [propName, props[propName]];
     }