@levo-so/blocks 0.1.58 → 0.1.60

package/src/blocks/carousel/carousel-2.schema.ts

@@ -1,23 +1,90 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DEFAULT_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+const MEDIA_1 = {
+  id: "OaJSLqfjJnrh",
+  filename: "cta-2-1.jpg",
   kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4.jpg",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-320w.webp 320w",
+  },
+  mimetype: "image/jpeg",
+};
+
+const MEDIA_2 = {
+  id: "A8s91BvhprIr",
+  filename: "carousel-2-2-new.png",
+  kind: "image",
+  location:
+    "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-750w.webp 750w",
+  },
   mimetype: "image/png",
+};
+
+const MEDIA_3 = {
+  id: "KQ5FRQXeGJVXT",
+  filename: "carousel-2-3.jpg",
+  kind: "image",
+  path: "WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR.jpg",
+  location:
+    "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR.jpg",
+  metadata: {
+    etag: '"ebf93e4ef37f20570526391e64562b1c"',
+    mimetype: "image/jpeg",
+    size: 79539,
+  },
   srcset: {
     "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1080w.webp",
     "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1200w.webp",
     "1920w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-    "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-    "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1080w.webp 1080w",
   },
+  tags: [],
+  created_at: "2025-12-20T08:42:52.998Z",
+  updated_at: "2025-12-20T08:42:52.998Z",
+  created_by: null,
+  updated_by: null,
 };
 
 const DEFAULT_CONTENT = {
@@ -49,7 +116,7 @@ const DEFAULT_CONTENT = {
           },
         },
       ],
-      img: DEFAULT_IMAGE,
+      img: MEDIA_1,
     },
     {
       card: null,
@@ -71,12 +138,12 @@ const DEFAULT_CONTENT = {
           },
         },
       ],
-      img: DEFAULT_IMAGE,
+      img: MEDIA_2,
     },
     {
       card: null,
       info: null,
-      "name-position-wrapper": null,
+      "name-posiMEDIA_1ion-wrapper": null,
       name: "Lisa Kudro",
       description: "Senior Fitness Trainer",
       social: [
@@ -93,7 +160,7 @@ const DEFAULT_CONTENT = {
           },
         },
       ],
-      img: DEFAULT_IMAGE,
+      img: MEDIA_3,
     },
   ],
   "carousel-navigation-container": null,
@@ -122,7 +189,15 @@ const DEFAULT_CONTENT = {
     },
   },
   cta_wrapper: null,
-  cta: "Explore All Trainers",
+  ctas_levoGroup: null,
+  ctas: [
+    {
+      cta: "Explore All Trainers",
+    },
+    {
+      cta: "Apply Now",
+    },
+  ],
 };
 
 export type ICarousel2Content = typeof DEFAULT_CONTENT;
@@ -284,7 +359,7 @@ export const Carousel2: IBlock = {
         {
           key: "name",
           label: "Member Name",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
           hint: {
             prompt_description:
               "Full name of the team member. Use professional, clear naming.",
@@ -347,15 +422,23 @@ export const Carousel2: IBlock = {
       },
     },
     {
-      key: "cta",
-      label: "CTA Button",
-      field_interface: "ButtonWidget",
-      hint: {
-        prompt_description:
-          "Call-to-action button to encourage further engagement with the team or company.",
-        min_characters: 10,
-        max_characters: 30,
-      },
+      key: "ctas",
+      label: "CTA Buttons",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Call-to-action button to encourage further engagement with the team or company.",
+            min_characters: 10,
+            max_characters: 30,
+          },
+        },
+      ],
     },
   ],
   layouts: [
@@ -382,25 +465,57 @@ export const Carousel2: IBlock = {
             },
           },
         },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+        team: [
+          {
+            description: {
+              selectedVariants: {},
+            },
+            name: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            name: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            name: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+          },
+        ],
       },
       content: DEFAULT_CONTENT,
       styles: {
-        layout: {
-          "background-color": "white",
-          "padding-top": "4xl",
-          "padding-bottom": "4xl",
-          mobile: {
-            "padding-top": "2xl",
-            "padding-bottom": "2xl",
-          },
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "xl",
-          "padding-right": "xl",
-        },
+        layout: {},
+        container: {},
         header: {
           "margin-bottom": "3xl",
           mobile: {
@@ -422,23 +537,12 @@ export const Carousel2: IBlock = {
           "max-width": "600px",
         },
         title: {
-          "font-size": "5xl",
-          "font-weight": "700",
-          color: "text-1",
-          "line-height": "1.2",
-          "margin-bottom": "none",
-          width: "100%",
           mobile: {
-            "font-size": "3xl",
             "text-align": "center",
           },
         },
         description: {
-          "font-size": "lg",
-          color: "text-2",
-          "line-height": "1.6",
           "text-align": "left",
-          "margin-bottom": "none",
           mobile: {
             "text-align": "center",
           },
@@ -488,12 +592,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -556,12 +654,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -624,12 +716,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -692,12 +778,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -760,12 +840,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -828,12 +902,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -897,12 +965,6 @@ export const Carousel2: IBlock = {
             name: {
               color: "white",
             },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -961,12 +1023,6 @@ export const Carousel2: IBlock = {
             name: {
               color: "white",
             },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -1025,12 +1081,6 @@ export const Carousel2: IBlock = {
             name: {
               color: "white",
             },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -1063,18 +1113,17 @@ export const Carousel2: IBlock = {
             "margin-top": "2xl",
           },
         },
-        cta: {
-          "background-color": "brand",
-          color: "white",
-          "padding-top": "base",
-          "padding-bottom": "base",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "border-radius": "lg",
-          "font-size": "base",
-          "font-weight": "600",
-          "border-style": "none",
+        ctas_levoGroup: {
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "sm",
         },
+        ctas: [
+          {
+            cta: {},
+          },
+        ],
+
         "carousel-navigation-container": {
           display: "flex",
           "justify-content": "center",
@@ -1122,6 +1171,9 @@ export const Carousel2: IBlock = {
           width: "22px",
           "font-size": "22px",
         },
+        team_levoGroupItem: {
+          description: {},
+        },
       },
     },
   ],

package/src/blocks/carousel/carousel-2.tsx

@@ -98,7 +98,7 @@ const Carousel2: React.FC<ILevoBlockBaseProps<ICarousel2Content>> = ({
                   />
                   <Box elementKey={`team.${index}.info`}>
                     <Box elementKey={`team.${index}.name-position-wrapper`}>
-                      <Typography elementKey={`team.${index}.name`} />
+                      <Heading elementKey={`team.${index}.name`} />
                       <Typography elementKey={`team.${index}.description`} />
                     </Box>
                     <Box
@@ -149,7 +149,15 @@ const Carousel2: React.FC<ILevoBlockBaseProps<ICarousel2Content>> = ({
           </Box>
         )}
         <Box elementKey="cta_wrapper">
-          <Button elementKey="cta" />
+          <Box elementKey="ctas_levoGroup" data-levo_group>
+            {content?.ctas?.map((_, index) => (
+              <Button
+                key={index}
+                elementKey={`ctas.${index}.cta`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
         </Box>
       </Container>
     </Section>