@cntrl-site/components 0.1.10-alpha.0 → 0.1.10-alpha.3

package/dist/index.js

@@ -1051,12 +1051,12 @@ const ControlSliderComponent = {
   }
 };
 const imageRevealSlider = "ImageRevealSlider-module__imageRevealSlider___UE5Ob";
-const image = "ImageRevealSlider-module__image___Qjt-e";
+const image$1 = "ImageRevealSlider-module__image___Qjt-e";
 const link = "ImageRevealSlider-module__link___N-iLG";
 const cursor = "ImageRevealSlider-module__cursor___2U03d";
 const styles = {
   imageRevealSlider,
-  image,
+  image: image$1,
   link,
   cursor
 };
@@ -1724,9 +1724,9 @@ const getPositionStyles = (position, offset, isEditor) => {
   return styles2;
 };
 function getDisplayedImageRect(img2) {
-  const container = img2.getBoundingClientRect();
-  const containerW = container.width;
-  const containerH = container.height;
+  const container2 = img2.getBoundingClientRect();
+  const containerW = container2.width;
+  const containerH = container2.height;
   const imgW = img2.naturalWidth;
   const imgH = img2.naturalHeight;
   const containerRatio = containerW / containerH;
@@ -1739,8 +1739,8 @@ function getDisplayedImageRect(img2) {
     renderedH = containerH;
     renderedW = containerH * imgRatio;
   }
-  const offsetX = (containerW - renderedW) / 2 + container.left;
-  const offsetY = (containerH - renderedH) / 2 + container.top;
+  const offsetX = (containerW - renderedW) / 2 + container2.left;
+  const offsetY = (containerH - renderedH) / 2 + container2.top;
   return {
     x: offsetX,
     y: offsetY,
@@ -3428,10 +3428,12 @@ const LightboxComponent = {
     required: ["settings", "content", "styles"]
   }
 };
+const container = "Testimonials-module__container___H14Dc";
 const wrapper = "Testimonials-module__wrapper___eCRwv";
 const cover = "Testimonials-module__cover___5I7Fh";
 const caption = "Testimonials-module__caption___-YQRG";
 const creds = "Testimonials-module__creds___KKvX1";
+const image = "Testimonials-module__image___nHD1Y";
 const icon = "Testimonials-module__icon___SstqT";
 const arrow = "Testimonials-module__arrow___NO6BN";
 const nextArrow = "Testimonials-module__nextArrow___L3G-W";
@@ -3440,10 +3442,12 @@ const arrowIcon = "Testimonials-module__arrowIcon___fw7vy";
 const arrowImg = "Testimonials-module__arrowImg___7R9fl";
 const mirror = "Testimonials-module__mirror___JkFna";
 const classes = {
+  container,
   wrapper,
   cover,
   caption,
   creds,
+  image,
   icon,
   arrow,
   nextArrow,
@@ -3486,38 +3490,69 @@ function getAlignPosition(alignment, offset, isEditor) {
   }
   return styles2;
 }
-const Testimonials = ({ settings, content, styles: styles2 }) => {
+const parseSpeedToMs = (speed) => {
+  if (!speed) return 0;
+  const match = speed.match(/^(\d+)(ms|s)$/);
+  if (!match) return 0;
+  const value = parseInt(match[1], 10);
+  const unit = match[2];
+  return unit === "s" ? value * 1e3 : value;
+};
+const Testimonials = ({ settings, content, styles: styles2, isEditor }) => {
   const sliderRef = React.useRef(null);
   const { general, card, controls } = settings;
   const { width, height } = card.dimensions;
   const perMove = settings.general.move === "one" ? 1 : settings.general.inView || 1;
   const perPage = settings.general.inView || 3;
-  const wrapperWidth = !settings.general.autoplay ? width * perPage + settings.card.gap * (perPage - 1) + card.borderWidth * 2 : void 0;
+  const isAutoplay = settings.general.autoplay === "on";
+  const marqueePerMove = isAutoplay ? 1 : perMove;
+  const speedMs = isAutoplay ? settings.general.speed ? parseSpeedToMs(settings.general.speed) : 0 : 500;
+  const wrapperWidth = !isAutoplay ? scalingValue(width * perPage + settings.card.gap * (perPage - 1) + card.borders.width * 2 * perPage, isEditor ?? false) : void 0;
+  const splideKey = `${general.autoplay}-${general.inView}`;
+  React.useEffect(() => {
+    var _a;
+    if ((_a = sliderRef.current) == null ? void 0 : _a.splide) {
+      const splide = sliderRef.current.splide;
+      splide.options = {
+        ...splide.options,
+        autoplay: isAutoplay,
+        perPage,
+        perMove: marqueePerMove,
+        interval: isAutoplay ? speedMs || 500 : 0,
+        rewind: !isAutoplay
+      };
+      splide.refresh();
+    }
+  }, [general.autoplay, general.inView, isAutoplay, perPage, marqueePerMove, speedMs]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", display: "flex", justifyContent: settings.general.alignment }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.container, style: { justifyContent: settings.general.alignment }, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: `${classes.wrapper}`,
-        style: wrapperWidth ? { width: `${scalingValue(wrapperWidth, false)}` } : void 0,
+        style: wrapperWidth ? { width: wrapperWidth } : void 0,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           reactSplide.Splide,
           {
             ref: sliderRef,
             options: {
               type: "loop",
-              fixedWidth: width,
-              ...!settings.general.autoplay && {
+              fixedWidth: scalingValue(width + card.borders.width * 2, isEditor ?? false),
+              ...settings.general.autoplay === "off" && {
                 perPage,
                 width: wrapperWidth
               },
               arrows: false,
-              perMove,
-              gap: settings.card.gap,
+              perMove: isAutoplay ? marqueePerMove : perMove,
+              gap: scalingValue(settings.card.gap, isEditor ?? false),
               padding: 0,
-              autoplay: settings.general.autoplay,
-              speed: settings.general.speed,
-              interval: settings.general.autoplay ? settings.general.speed : 0,
-              rewind: true,
+              drag: false,
+              autoplay: isAutoplay,
+              speed: speedMs,
+              // Transition duration (default to 500ms if not set)
+              interval: speedMs,
+              // Match speed for continuous marquee flow
+              rewind: !isAutoplay,
+              // Disable rewind for smooth marquee, enable for manual mode
               easing: "linear",
               direction: settings.general.direction === "left" ? "ltr" : "rtl",
               pagination: false,
@@ -3526,17 +3561,71 @@ const Testimonials = ({ settings, content, styles: styles2 }) => {
             },
             children: content.map((item, index) => {
               var _a, _b, _c, _d, _e;
-              return /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: `${width}px`, height: `${height}px`, borderRadius: `${settings.card.corner}px`, border: `${settings.card.borderWidth}px solid ${settings.card.borderColor}`, backgroundColor: settings.card.bgColor, overflow: "hidden", boxSizing: "border-box" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("img", { src: (_a = item.image) == null ? void 0 : _a.url, alt: (_b = item.image) == null ? void 0 : _b.name, style: { width: "100%", height: "100%", objectFit: ((_c = item.image) == null ? void 0 : _c.objectFit) || "cover" } }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.cover, style: { background: settings.elements.cover.gradient, borderRadius: `${settings.card.corner}px` } }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("img", { src: (_d = item.icon) == null ? void 0 : _d.url, alt: (_e = item.icon) == null ? void 0 : _e.name, className: classes.icon, style: getAlignPosition(settings.elements.icon.alignment, settings.elements.icon.offset) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.caption, style: getAlignPosition(settings.elements.text.alignment, settings.elements.text.offset), children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: item.imageCaption }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.creds, style: getAlignPosition(settings.elements.creds.alignment, settings.elements.creds.offset), children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: item.creds }) })
-                ] })
-              ] }) }, index);
+              const iconPositionStyles = getAlignPosition(settings.elements.icon.alignment, settings.elements.icon.offset, isEditor);
+              return /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    width: scalingValue(width, isEditor ?? false),
+                    height: scalingValue(height, isEditor ?? false),
+                    borderRadius: scalingValue(settings.card.corner, isEditor ?? false),
+                    border: `${scalingValue(settings.card.borders.width, isEditor ?? false)} solid ${settings.card.borders.color}`,
+                    overflow: "hidden",
+                    boxSizing: "border-box"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        className: classes.image,
+                        src: (_a = item.image) == null ? void 0 : _a.url,
+                        alt: (_b = item.image) == null ? void 0 : _b.name,
+                        style: { objectFit: ((_c = item.image) == null ? void 0 : _c.objectFit) || "cover" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: classes.cover,
+                        style: { background: settings.card.bgColor, borderRadius: `${scalingValue(settings.card.corner, isEditor ?? false)}` }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          src: (_d = item.icon) == null ? void 0 : _d.url,
+                          alt: (_e = item.icon) == null ? void 0 : _e.name,
+                          className: classes.icon,
+                          style: {
+                            ...iconPositionStyles,
+                            transform: `${iconPositionStyles.transform || ""} scale(${settings.elements.icon.scale / 100})`
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: classes.caption,
+                          style: getAlignPosition(settings.elements.text.alignment, settings.elements.text.offset, isEditor),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: item.imageCaption })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: classes.creds,
+                          style: getAlignPosition(settings.elements.creds.alignment, settings.elements.creds.offset, isEditor),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: item.creds })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) }, index);
             })
-          }
+          },
+          splideKey
         )
       }
     ) }),
@@ -3550,10 +3639,10 @@ const Testimonials = ({ settings, content, styles: styles2 }) => {
             "button",
             {
               className: classes.arrowInner,
-              style: { transform: `translate(${scalingValue(controls.offset.x, false)}, ${scalingValue(controls.offset.y, false)}) scale(${controls.scale / 100})` },
+              style: { transform: `translate(${scalingValue(controls.offset.x, isEditor ?? false)}, ${scalingValue(controls.offset.y, isEditor ?? false)}) scale(${controls.scale / 100})` },
               onClick: () => {
                 var _a;
-                return (_a = sliderRef.current) == null ? void 0 : _a.go("-1");
+                return (_a = sliderRef.current) == null ? void 0 : _a.go(isAutoplay ? "-1" : `-${perMove}`);
               },
               "aria-label": "Previous",
               children: [
@@ -3581,10 +3670,10 @@ const Testimonials = ({ settings, content, styles: styles2 }) => {
             "button",
             {
               className: classes.arrowInner,
-              style: { transform: `translate(${scalingValue(controls.offset.x * -1, false)}, ${scalingValue(controls.offset.y, false)}) scale(${controls.scale / 100})` },
+              style: { transform: `translate(${scalingValue(controls.offset.x * -1, isEditor ?? false)}, ${scalingValue(controls.offset.y, isEditor ?? false)}) scale(${controls.scale / 100})` },
               onClick: () => {
                 var _a;
-                return (_a = sliderRef.current) == null ? void 0 : _a.go("+1");
+                return (_a = sliderRef.current) == null ? void 0 : _a.go(isAutoplay ? "+1" : `+${perMove}`);
               },
               "aria-label": "Next",
               children: [
@@ -3632,20 +3721,21 @@ const TestimonialsComponent = {
         },
         properties: {
           general: {
-            title: "general",
             icon: "thumbnail",
-            tooltip: "General",
             type: "object",
             properties: {
               autoplay: {
-                type: "boolean",
+                type: "string",
+                title: "Autoplay",
                 display: {
-                  type: "setting-toggle"
-                }
+                  type: "ratio-group",
+                  direction: "horizontal"
+                },
+                enum: ["on", "off"]
               },
               inView: {
                 type: "number",
-                label: "In View",
+                title: "In View",
                 min: 1,
                 display: {
                   type: "numeric-input"
@@ -3653,27 +3743,29 @@ const TestimonialsComponent = {
               },
               alignment: {
                 type: "string",
+                title: "Alignment",
                 display: {
-                  type: "ratio-group"
+                  type: "align-group",
+                  direction: "vertical"
                 },
                 enum: ["left", "center", "right"]
               },
               move: {
                 type: "string",
+                title: "Move",
                 display: {
-                  type: "ratio-group"
+                  type: "ratio-group",
+                  direction: "horizontal"
                 },
                 enum: ["one", "view"]
               },
               speed: {
-                type: "number",
-                label: "Speed",
-                min: 100,
-                max: 1e4,
-                step: 100,
+                type: ["string", "null"],
+                title: "Speed",
                 display: {
-                  type: "numeric-input"
-                }
+                  type: "step-selector"
+                },
+                enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
               },
               direction: {
                 type: "string",
@@ -3683,6 +3775,7 @@ const TestimonialsComponent = {
                 enum: ["left", "right"]
               },
               pause: {
+                title: "Pause on",
                 type: "string",
                 display: {
                   type: "ratio-group"
@@ -3692,21 +3785,19 @@ const TestimonialsComponent = {
             }
           },
           card: {
-            title: "card",
             icon: "card",
-            tooltip: "Card",
             type: "object",
             properties: {
               dimensions: {
                 type: "object",
-                title: "Dimensions",
+                title: "Size",
                 display: {
                   type: "group"
                 },
                 properties: {
                   width: {
                     type: "number",
-                    label: "Width",
+                    label: "W",
                     scalingEnabled: true,
                     display: {
                       type: "numeric-input",
@@ -3715,7 +3806,7 @@ const TestimonialsComponent = {
                   },
                   height: {
                     type: "number",
-                    label: "Height",
+                    label: "H",
                     scalingEnabled: true,
                     display: {
                       type: "numeric-input",
@@ -3726,7 +3817,7 @@ const TestimonialsComponent = {
               },
               gap: {
                 type: "number",
-                label: "Gap",
+                title: "Gap",
                 scalingEnabled: true,
                 min: 0,
                 display: {
@@ -3735,32 +3826,41 @@ const TestimonialsComponent = {
               },
               corner: {
                 type: "number",
-                label: "Corners",
-                scalingEnabled: true,
-                min: 0,
-                display: {
-                  type: "numeric-input"
-                }
-              },
-              borderWidth: {
-                type: "number",
-                label: "Borders",
+                title: "Corners",
                 scalingEnabled: true,
                 min: 0,
+                label: "icon:border-radius",
                 display: {
                   type: "numeric-input"
                 }
               },
-              borderColor: {
-                title: "Border Color",
-                type: "string",
+              borders: {
+                type: "object",
+                title: "Borders",
                 display: {
-                  type: "settings-color-picker",
-                  format: "single"
+                  type: "group"
+                },
+                properties: {
+                  width: {
+                    type: "number",
+                    label: "icon:border-width",
+                    scalingEnabled: true,
+                    min: 0,
+                    display: {
+                      type: "numeric-input"
+                    }
+                  },
+                  color: {
+                    type: "string",
+                    display: {
+                      type: "settings-color-picker",
+                      format: "single"
+                    }
+                  }
                 }
               },
               bgColor: {
-                title: "Background Color",
+                title: "BG color",
                 type: "string",
                 display: {
                   type: "settings-color-picker",
@@ -3772,12 +3872,17 @@ const TestimonialsComponent = {
           elements: {
             title: "elements",
             icon: "star",
-            tooltip: "Elements",
             type: "object",
             properties: {
+              elements: {
+                type: "string",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["text", "icon", "caption"]
+              },
               text: {
                 type: "object",
-                title: "Text",
                 display: {
                   type: "group"
                 },
@@ -3785,7 +3890,8 @@ const TestimonialsComponent = {
                   alignment: {
                     type: "string",
                     display: {
-                      type: "position-selector"
+                      type: "align-grid",
+                      visible: true
                     },
                     enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
                   },
@@ -3793,7 +3899,8 @@ const TestimonialsComponent = {
                     type: "object",
                     title: "Offset",
                     display: {
-                      type: "group"
+                      type: "group",
+                      visible: true
                     },
                     properties: {
                       x: {
@@ -3820,7 +3927,6 @@ const TestimonialsComponent = {
               },
               icon: {
                 type: "object",
-                title: "Icon",
                 display: {
                   type: "group"
                 },
@@ -3828,7 +3934,7 @@ const TestimonialsComponent = {
                   alignment: {
                     type: "string",
                     display: {
-                      type: "position-selector"
+                      type: "align-grid"
                     },
                     enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
                   },
@@ -3865,14 +3971,14 @@ const TestimonialsComponent = {
                     min: 50,
                     max: 600,
                     display: {
-                      type: "range-control"
+                      type: "range-control",
+                      visible: false
                     }
                   }
                 }
               },
               creds: {
                 type: "object",
-                title: "Credentials",
                 display: {
                   type: "group"
                 },
@@ -3880,7 +3986,7 @@ const TestimonialsComponent = {
                   alignment: {
                     type: "string",
                     display: {
-                      type: "position-selector"
+                      type: "align-grid"
                     },
                     enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
                   },
@@ -3912,23 +4018,6 @@ const TestimonialsComponent = {
                     }
                   }
                 }
-              },
-              cover: {
-                type: "object",
-                title: "Cover",
-                display: {
-                  type: "group"
-                },
-                properties: {
-                  gradient: {
-                    title: "Gradient",
-                    type: "string",
-                    display: {
-                      type: "settings-color-picker",
-                      format: "gradient"
-                    }
-                  }
-                }
               }
             }
           },
@@ -4007,27 +4096,29 @@ const TestimonialsComponent = {
         },
         default: {
           general: {
-            autoplay: false,
+            autoplay: "off",
             inView: 3,
             alignment: "center",
             move: "one",
-            speed: 3e3,
+            speed: "3s",
             direction: "left",
-            pause: "hover"
+            pause: "off"
           },
           card: {
             dimensions: {
-              width: 300,
-              height: 400
+              width: 0.1,
+              height: 0.2
+            },
+            gap: 0.02,
+            corner: 0.01,
+            borders: {
+              width: 1e-3,
+              color: "#000000"
             },
-            gap: 20,
-            corner: 0,
-            borderWidth: 0,
-            borderColor: "#000000",
-            bgColor: "#ffffff"
+            bgColor: "rgba(255, 255, 255, 0.2)"
           },
           controls: {
-            isActive: true,
+            isActive: false,
             arrowsImgUrl: null,
             offset: {
               x: 0,
@@ -4038,8 +4129,9 @@ const TestimonialsComponent = {
             hover: "#cccccc"
           },
           elements: {
+            elements: "text",
             text: {
-              alignment: "bottom-center",
+              alignment: "middle-left",
               offset: {
                 x: 0,
                 y: 0
@@ -4054,17 +4146,346 @@ const TestimonialsComponent = {
               scale: 100
             },
             creds: {
-              alignment: "bottom-center",
+              alignment: "bottom-left",
               offset: {
                 x: 0,
                 y: 0
               }
+            }
+          }
+        },
+        displayRules: [
+          {
+            if: {
+              name: "general.autoplay",
+              value: "off"
+            },
+            then: {
+              name: "properties.general.properties.inView.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "off"
+            },
+            then: {
+              name: "properties.general.properties.alignment.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "off"
             },
-            cover: {
-              gradient: "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%)"
+            then: {
+              name: "properties.general.properties.move.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "on"
+            },
+            then: {
+              name: "properties.general.properties.inView.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "on"
+            },
+            then: {
+              name: "properties.general.properties.alignment.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "on"
+            },
+            then: {
+              name: "properties.general.properties.move.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "on"
+            },
+            then: {
+              name: "properties.general.properties.speed.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "on"
+            },
+            then: {
+              name: "properties.general.properties.direction.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "on"
+            },
+            then: {
+              name: "properties.general.properties.pause.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "off"
+            },
+            then: {
+              name: "properties.general.properties.speed.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "off"
+            },
+            then: {
+              name: "properties.general.properties.direction.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "general.autoplay",
+              value: "off"
+            },
+            then: {
+              name: "properties.general.properties.pause.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "text"
+            },
+            then: {
+              name: "properties.elements.properties.text.properties.alignment.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "text"
+            },
+            then: {
+              name: "properties.elements.properties.text.properties.offset.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "text"
+            },
+            then: {
+              name: "properties.elements.properties.icon.properties.alignment.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "text"
+            },
+            then: {
+              name: "properties.elements.properties.icon.properties.offset.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "text"
+            },
+            then: {
+              name: "properties.elements.properties.creds.properties.alignment.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "text"
+            },
+            then: {
+              name: "properties.elements.properties.creds.properties.offset.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "icon"
+            },
+            then: {
+              name: "properties.elements.properties.icon.properties.alignment.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "icon"
+            },
+            then: {
+              name: "properties.elements.properties.icon.properties.offset.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "icon"
+            },
+            then: {
+              name: "properties.elements.properties.text.properties.alignment.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "icon"
+            },
+            then: {
+              name: "properties.elements.properties.text.properties.offset.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "icon"
+            },
+            then: {
+              name: "properties.elements.properties.creds.properties.alignment.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "icon"
+            },
+            then: {
+              name: "properties.elements.properties.creds.properties.offset.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "caption"
+            },
+            then: {
+              name: "properties.elements.properties.creds.properties.alignment.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "caption"
+            },
+            then: {
+              name: "properties.elements.properties.creds.properties.offset.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "caption"
+            },
+            then: {
+              name: "properties.elements.properties.text.properties.alignment.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "caption"
+            },
+            then: {
+              name: "properties.elements.properties.text.properties.offset.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "caption"
+            },
+            then: {
+              name: "properties.elements.properties.icon.properties.alignment.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "caption"
+            },
+            then: {
+              name: "properties.elements.properties.icon.properties.offset.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "icon"
+            },
+            then: {
+              name: "properties.elements.properties.icon.properties.scale.display.visible",
+              value: true
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "text"
+            },
+            then: {
+              name: "properties.elements.properties.icon.properties.scale.display.visible",
+              value: false
+            }
+          },
+          {
+            if: {
+              name: "elements.elements",
+              value: "caption"
+            },
+            then: {
+              name: "properties.elements.properties.icon.properties.scale.display.visible",
+              value: false
             }
           }
-        }
+        ]
       },
       content: {
         layoutBased: false,
@@ -4121,8 +4542,8 @@ const TestimonialsComponent = {
               required: ["url", "name"]
             },
             imageCaption: {
-              placeholder: "Add Caption...",
-              label: "Description",
+              placeholder: "Add Text...",
+              label: "Text",
               display: {
                 type: "rich-text",
                 minWidth: 300,
@@ -4130,8 +4551,8 @@ const TestimonialsComponent = {
               }
             },
             creds: {
-              placeholder: "Add Credentials...",
-              label: "Credentials",
+              placeholder: "Add Caption...",
+              label: "Caption",
               display: {
                 type: "rich-text",
                 minWidth: 300,
@@ -4145,12 +4566,12 @@ const TestimonialsComponent = {
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png",
+              url: "https://cdn.cntrl.site/component-assets/2.jpg",
               name: "Testimonial-1.png"
             },
             icon: {
               objectFit: "cover",
-              url: "",
+              url: "https://cdn.cntrl.site/projects/01GJ2SPNXG3V5P35ZA35YM1JTW/articles-assets/01KEXYWFPR7GB70E4YBF28T8R6.png",
               name: ""
             },
             imageCaption: [
@@ -4169,12 +4590,12 @@ const TestimonialsComponent = {
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMTZA3RYMXKF0M095D6JD.png",
+              url: "https://cdn.cntrl.site/component-assets/3.jpg",
               name: "Testimonial-2.png"
             },
             icon: {
               objectFit: "cover",
-              url: "",
+              url: "https://cdn.cntrl.site/projects/01GJ2SPNXG3V5P35ZA35YM1JTW/articles-assets/01KEXYWFPR7GB70E4YBF28T8R6.png",
               name: ""
             },
             imageCaption: [
@@ -4193,12 +4614,12 @@ const TestimonialsComponent = {
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMVSCMPVJBG2WF5KJZYHZ.png",
+              url: "https://cdn.cntrl.site/component-assets/4.jpg",
               name: "Testimonial-3.png"
             },
             icon: {
               objectFit: "cover",
-              url: "",
+              url: "https://cdn.cntrl.site/projects/01GJ2SPNXG3V5P35ZA35YM1JTW/articles-assets/01KEXYWFPR7GB70E4YBF28T8R6.png",
               name: ""
             },
             imageCaption: [