@levo-so/blocks 0.1.100 → 0.1.102

package/src/blocks/calendar/calendar-1.schema.ts

@@ -1,70 +1,109 @@
 import type { IBlock } from "@levo-so/studio";
 
-const ITEMS_COUNT = 6;
-
-const SINGLE_DAY_EVENT = {
+const EVENT_BASE = {
   event: null,
   event_timing: null,
   event_starts: null,
-  event_starts_date: "2025-11-23T18:30:00.000Z",
-  event_starts_month: "2025-11-23T18:30:00.000Z",
   event_to: "to",
   event_ends: null,
-  event_ends_date: "",
-  event_ends_month: "",
   divider: null,
   event_content: null,
-  event_category: "Levo",
   event_sub_content: null,
-  event_title: "#WeAreLevo",
-  event_description: "A collaborative event with industries top performers.",
 };
 
-const MULTI_DAY_EVENT = {
-  event: null,
-  event_timing: null,
-  event_starts: null,
-  event_starts_date: "2025-11-23T18:30:00.000Z",
-  event_starts_month: "2025-11-23T18:30:00.000Z",
-  event_to: "to",
-  event_ends: null,
-  event_ends_date: "2025-11-30T18:30:00.000Z",
-  event_ends_month: "2025-11-30T18:30:00.000Z",
-  divider: null,
-  event_content: null,
-  event_category: "Levo",
-  event_sub_content: null,
-  event_title: "#WeAreLevo",
-  event_description: "A collaborative event with industries top performers.",
-};
+const EVENTS = [
+  {
+    ...EVENT_BASE,
+    event_starts_date: "2026-05-12T04:00:00.000Z",
+    event_starts_month: "2026-05-12T04:00:00.000Z",
+    event_ends_date: "2026-05-13T04:00:00.000Z",
+    event_ends_month: "2026-05-13T04:00:00.000Z",
+    starts_at: "2026-05-12T04:00:00.000Z",
+    ends_at: "2026-05-13T23:59:00.000Z",
+    event_category: "Compliance",
+    event_title: "PCI DSS 4.0 Readiness Workshop",
+    event_description:
+      "Two-day hands-on deep dive into PCI DSS 4.0 controls, evidence packaging, and remediation plans for payment teams.",
+  },
+  {
+    ...EVENT_BASE,
+    event_starts_date: "2026-05-19T04:30:00.000Z",
+    event_starts_month: "2026-05-19T04:30:00.000Z",
+    event_ends_date: "",
+    event_ends_month: "",
+    starts_at: "2026-05-19T04:30:00.000Z",
+    ends_at: "2026-05-19T12:00:00.000Z",
+    event_category: "Payments",
+    event_title: "Cross-Border Payments Summit",
+    event_description:
+      "Operators share the playbook behind multi-corridor FX routing, sub-second settlement, and regulator-ready ledger design.",
+  },
+  {
+    ...EVENT_BASE,
+    event_starts_date: "2026-05-27T04:00:00.000Z",
+    event_starts_month: "2026-05-27T04:00:00.000Z",
+    event_ends_date: "2026-05-28T04:00:00.000Z",
+    event_ends_month: "2026-05-28T04:00:00.000Z",
+    starts_at: "2026-05-27T04:00:00.000Z",
+    ends_at: "2026-05-28T23:59:00.000Z",
+    event_category: "Settlement",
+    event_title: "Real-Time Settlement Forum",
+    event_description:
+      "Engineers, treasurers, and risk leads mapping FedNow, RTP, and UPI flows to production-grade reconciliation pipelines.",
+  },
+  {
+    ...EVENT_BASE,
+    event_starts_date: "2026-06-04T08:30:00.000Z",
+    event_starts_month: "2026-06-04T08:30:00.000Z",
+    event_ends_date: "",
+    event_ends_month: "",
+    starts_at: "2026-06-04T08:30:00.000Z",
+    ends_at: "2026-06-04T12:00:00.000Z",
+    event_category: "Identity",
+    event_title: "KYC & Identity Roundtable",
+    event_description:
+      "Closed-door session on liveness, sanctions screening, and reusable KYC under the evolving EU and US rulebooks.",
+  },
+  {
+    ...EVENT_BASE,
+    event_starts_date: "2026-06-11T04:00:00.000Z",
+    event_starts_month: "2026-06-11T04:00:00.000Z",
+    event_ends_date: "2026-06-12T04:00:00.000Z",
+    event_ends_month: "2026-06-12T04:00:00.000Z",
+    starts_at: "2026-06-11T04:00:00.000Z",
+    ends_at: "2026-06-12T23:59:00.000Z",
+    event_category: "Engineering",
+    event_title: "Open Banking DevDay",
+    event_description:
+      "Two days of API design clinics, FAPI 2.0 labs, and consent workflow teardowns from teams shipping open-finance apps.",
+  },
+  {
+    ...EVENT_BASE,
+    event_starts_date: "2026-06-18T04:00:00.000Z",
+    event_starts_month: "2026-06-18T04:00:00.000Z",
+    event_ends_date: "",
+    event_ends_month: "",
+    starts_at: "2026-06-18T04:00:00.000Z",
+    ends_at: "2026-06-18T11:00:00.000Z",
+    event_category: "Treasury",
+    event_title: "Treasury & FinOps Bootcamp",
+    event_description:
+      "Practical bootcamp on cash positioning, idle-balance sweeps, and tying FinOps telemetry to board-ready margin reports.",
+  },
+];
+
+const ITEMS_COUNT = EVENTS.length;
 
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   header: null,
-  title: "Upcoming Events",
-  description: "Showing 16 events out of Total 16 Events",
+  title: "Fintech events worth your calendar",
+  description:
+    "Six summits, workshops, and roundtables for teams shipping payments, compliance, and treasury products in 2026.",
   content: null,
   listing_section_levoGroup: null,
-  listing_section: Array(ITEMS_COUNT)
-    .fill(0)
-    .map((v, index) => {
-      const basePayload = index % 2 !== 0 ? SINGLE_DAY_EVENT : MULTI_DAY_EVENT;
-      const randomStartDate = `2025-10-${Math.floor(Math.random() * 18) + 10}T18:30:00.000Z`;
-      const randomEndDate = `2025-10-${Math.floor(Math.random() * 18) + 10}T18:30:00.000Z`;
-
-      return {
-        ...basePayload,
-        ...(index % 2 !== 0
-          ? { event_starts_date: randomStartDate }
-          : {
-              event_starts_date: randomStartDate,
-              event_ends_date: randomEndDate,
-            }),
-        starts_at: randomStartDate,
-        ends_at: randomEndDate,
-      };
-    }),
+  listing_section: EVENTS,
   empty_state: null,
   empty_state_icon: {
     kind: "icon",
@@ -76,15 +115,15 @@ const DEFAULT_CONTENT = {
         '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8 5.75C7.59 5.75 7.25 5.41 7.25 5V2C7.25 1.59 7.59 1.25 8 1.25C8.41 1.25 8.75 1.59 8.75 2V5C8.75 5.41 8.41 5.75 8 5.75Z" fill="var(--color-icon-primary)"/>\n<path d="M16 5.75C15.59 5.75 15.25 5.41 15.25 5V2C15.25 1.59 15.59 1.25 16 1.25C16.41 1.25 16.75 1.59 16.75 2V5C16.75 5.41 16.41 5.75 16 5.75Z" fill="var(--color-icon-primary)"/>\n<path d="M8.5 14.5001C8.37 14.5001 8.24 14.4701 8.12 14.4201C7.99 14.3701 7.89 14.3001 7.79 14.2101C7.61 14.0201 7.5 13.7701 7.5 13.5001C7.5 13.3701 7.53 13.2401 7.58 13.1201C7.63 13.0001 7.7 12.8901 7.79 12.7901C7.89 12.7001 7.99 12.6301 8.12 12.5801C8.48 12.4301 8.93 12.5101 9.21 12.7901C9.39 12.9801 9.5 13.2401 9.5 13.5001C9.5 13.5601 9.49 13.6301 9.48 13.7001C9.47 13.7601 9.45 13.8201 9.42 13.8801C9.4 13.9401 9.37 14.0001 9.33 14.0601C9.3 14.1101 9.25 14.1601 9.21 14.2101C9.02 14.3901 8.76 14.5001 8.5 14.5001Z" fill="var(--color-icon-primary)"/>\n<path d="M12 14.5C11.87 14.5 11.74 14.47 11.62 14.42C11.49 14.37 11.39 14.3 11.29 14.21C11.11 14.02 11 13.77 11 13.5C11 13.37 11.03 13.24 11.08 13.12C11.13 13 11.2 12.89 11.29 12.79C11.39 12.7 11.49 12.63 11.62 12.58C11.98 12.42 12.43 12.51 12.71 12.79C12.89 12.98 13 13.24 13 13.5C13 13.56 12.99 13.63 12.98 13.7C12.97 13.76 12.95 13.82 12.92 13.88C12.9 13.94 12.87 14 12.83 14.06C12.8 14.11 12.75 14.16 12.71 14.21C12.52 14.39 12.26 14.5 12 14.5Z" fill="var(--color-icon-primary)"/>\n<path d="M15.5 14.5C15.37 14.5 15.24 14.47 15.12 14.42C14.99 14.37 14.89 14.3 14.79 14.21C14.75 14.16 14.71 14.11 14.67 14.06C14.63 14 14.6 13.94 14.58 13.88C14.55 13.82 14.53 13.76 14.52 13.7C14.51 13.63 14.5 13.56 14.5 13.5C14.5 13.24 14.61 12.98 14.79 12.79C14.89 12.7 14.99 12.63 15.12 12.58C15.49 12.42 15.93 12.51 16.21 12.79C16.39 12.98 16.5 13.24 16.5 13.5C16.5 13.56 16.49 13.63 16.48 13.7C16.47 13.76 16.45 13.82 16.42 13.88C16.4 13.94 16.37 14 16.33 14.06C16.3 14.11 16.25 14.16 16.21 14.21C16.02 14.39 15.76 14.5 15.5 14.5Z" fill="var(--color-icon-primary)"/>\n<path d="M8.5 17.9999C8.37 17.9999 8.24 17.97 8.12 17.92C8 17.87 7.89 17.7999 7.79 17.7099C7.61 17.5199 7.5 17.2599 7.5 16.9999C7.5 16.8699 7.53 16.7399 7.58 16.6199C7.63 16.4899 7.7 16.38 7.79 16.29C8.16 15.92 8.84 15.92 9.21 16.29C9.39 16.48 9.5 16.7399 9.5 16.9999C9.5 17.2599 9.39 17.5199 9.21 17.7099C9.02 17.8899 8.76 17.9999 8.5 17.9999Z" fill="var(--color-icon-primary)"/>\n<path d="M12 17.9999C11.74 17.9999 11.48 17.8899 11.29 17.7099C11.11 17.5199 11 17.2599 11 16.9999C11 16.8699 11.03 16.7399 11.08 16.6199C11.13 16.4899 11.2 16.38 11.29 16.29C11.66 15.92 12.34 15.92 12.71 16.29C12.8 16.38 12.87 16.4899 12.92 16.6199C12.97 16.7399 13 16.8699 13 16.9999C13 17.2599 12.89 17.5199 12.71 17.7099C12.52 17.8899 12.26 17.9999 12 17.9999Z" fill="var(--color-icon-primary)"/>\n<path d="M15.5 18C15.24 18 14.98 17.89 14.79 17.71C14.7 17.62 14.63 17.51 14.58 17.38C14.53 17.26 14.5 17.13 14.5 17C14.5 16.87 14.53 16.74 14.58 16.62C14.63 16.49 14.7 16.38 14.79 16.29C15.02 16.06 15.37 15.95 15.69 16.02C15.76 16.03 15.82 16.05 15.88 16.08C15.94 16.1 16 16.13 16.06 16.17C16.11 16.2 16.16 16.25 16.21 16.29C16.39 16.48 16.5 16.74 16.5 17C16.5 17.26 16.39 17.52 16.21 17.71C16.02 17.89 15.76 18 15.5 18Z" fill="var(--color-icon-primary)"/>\n<path d="M20.5 9.83997H3.5C3.09 9.83997 2.75 9.49997 2.75 9.08997C2.75 8.67997 3.09 8.33997 3.5 8.33997H20.5C20.91 8.33997 21.25 8.67997 21.25 9.08997C21.25 9.49997 20.91 9.83997 20.5 9.83997Z" fill="var(--color-icon-primary)"/>\n<path d="M16 22.75H8C4.35 22.75 2.25 20.65 2.25 17V8.5C2.25 4.85 4.35 2.75 8 2.75H16C19.65 2.75 21.75 4.85 21.75 8.5V17C21.75 20.65 19.65 22.75 16 22.75ZM8 4.25C5.14 4.25 3.75 5.64 3.75 8.5V17C3.75 19.86 5.14 21.25 8 21.25H16C18.86 21.25 20.25 19.86 20.25 17V8.5C20.25 5.64 18.86 4.25 16 4.25H8Z" fill="var(--color-icon-primary)"/>\n</svg>',
     },
   },
-  empty_state_title: "No Events",
+  empty_state_title: "Nothing scheduled this month",
   empty_state_description:
-    "There are no events scheduled for this month. Check back later or select a different month to view upcoming events.",
-  empty_state_cta: "Reset Calendar",
+    "No fintech events on the calendar for this month. Reset the filter or pick another month to see what's live.",
+  empty_state_cta: "Reset calendar",
   calendar_section: null,
   calendar_header: null,
-  calendar_title: "Events Calendar",
+  calendar_title: "Jump to a month",
   calendar_description:
-    "You can use the calendar to find the desired events and get the required information easily",
+    "Pick a month to filter the list, or browse every upcoming workshop, summit, and roundtable in one view.",
   calendar: null,
   calendar_ctas_levoGroup: null,
   calendar_ctas: [
@@ -101,19 +140,6 @@ const DEFAULT_CONTENT = {
         },
       },
     },
-    {
-      calendar_cta: "Search Events",
-      calendar_cta_leftIcon: {
-        kind: "icon",
-        data: {
-          id: "search-normal-1",
-          label: "Search Normal 1",
-          tags: ["custom", "directional", "normal", "search"],
-          svgCode:
-            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M11.5 21.75C5.85 21.75 1.25 17.15 1.25 11.5C1.25 5.85 5.85 1.25 11.5 1.25C17.15 1.25 21.75 5.85 21.75 11.5C21.75 17.15 17.15 21.75 11.5 21.75ZM11.5 2.75C6.67 2.75 2.75 6.68 2.75 11.5C2.75 16.32 6.67 20.25 11.5 20.25C16.33 20.25 20.25 16.32 20.25 11.5C20.25 6.68 16.33 2.75 11.5 2.75Z" fill="currentColor"/>\n<path d="M22.0004 22.7499C21.8104 22.7499 21.6204 22.6799 21.4704 22.5299L19.4704 20.5299C19.1804 20.2399 19.1804 19.7599 19.4704 19.4699C19.7604 19.1799 20.2404 19.1799 20.5304 19.4699L22.5304 21.4699C22.8204 21.7599 22.8204 22.2399 22.5304 22.5299C22.3804 22.6799 22.1904 22.7499 22.0004 22.7499Z" fill="currentColor"/>\n</svg>',
-        },
-      },
-    },
   ],
   empty_state_cta_leftIcon: {
     kind: "icon",
@@ -367,124 +393,126 @@ export const Calendar1: IBlock = {
           "row-gap": "7xl",
           "padding-bottom": "sm",
         },
-        listing_section: Array(ITEMS_COUNT)
-          .fill(0)
-          .map((v) => ({
-            event: {
-              width: "100%",
-              display: "flex",
-              "padding-top": "3xl",
-              "padding-right": "3xl",
-              "padding-bottom": "3xl",
-              "padding-left": "xl",
-              "border-style": "solid",
-              "border-right-width": "0px",
-              "border-bottom-width": "0px",
-              "border-top-width": "0px",
-              "border-left-width": "8px",
-              "border-color": "brand",
-              "border-radius": "lg",
-              "box-shadow": {
-                x: 0,
-                y: 4,
-                blur: 84,
-                spread: 0,
-                color: "oklch(0.5193 0.0628 284.0011 / 0.13)",
-                opacity: 13,
-              },
-              mobile: {
-                "flex-direction": "column",
-                "row-gap": "md",
-              },
-            },
-            event_timing: {
-              display: "flex",
-              "flex-direction": "column",
-              "min-width": "95px",
-              "justify-content": "center",
-              "align-items": "center",
-              mobile: {
-                "flex-direction": "row",
-                "justify-content": "flex-start",
-                "column-gap": "xs",
-              },
+        listing_section_levoGroupItem: {
+          event: {
+            width: "100%",
+            display: "flex",
+            "padding-top": "3xl",
+            "padding-right": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "xl",
+            "border-style": "solid",
+            "border-right-width": "0px",
+            "border-bottom-width": "0px",
+            "border-top-width": "0px",
+            "border-left-width": "8px",
+            "border-color": "brand",
+            "border-radius": "lg",
+            "box-shadow": {
+              x: 0,
+              y: 4,
+              blur: 84,
+              spread: 0,
+              color: "oklch(0.5193 0.0628 284.0011 / 0.13)",
+              opacity: 13,
             },
-            event_to: {
-              "font-weight": 600,
-              "margin-top": "4xs",
-              "margin-bottom": "4xs",
-              mobile: {
-                "padding-right": "none",
-                "margin-right": "xs",
-              },
-            },
-            event_starts: {
-              display: "flex",
-              "flex-direction": "column",
-              "margin-bottom": "3xs",
-              mobile: {
-                "margin-bottom": "none",
-                "align-items": "flex-start",
-              },
-            },
-            event_starts_date: {
-              "text-align": "center",
-            },
-            event_starts_month: {
-              "text-align": "center",
-              "font-weight": 600,
-            },
-            event_ends_date: {
-              "text-align": "center",
-            },
-            event_ends_month: {
-              "text-align": "center",
-              "font-weight": 600,
-            },
-            divider: {
-              "margin-left": "2xs",
-              "margin-right": "3xl",
-              "border-style": "solid",
-              "border-top-width": "0px",
-              "border-right-width": "0px",
-              "border-bottom-width": "0px",
-              "border-left-width": "1px",
-              mobile: {
-                display: "none",
-              },
-            },
-            event_description: {
-              "font-weight": 500,
-            },
-            event_content: {
-              "align-self": "center",
-              width: "100%",
-              display: "flex",
+            mobile: {
               "flex-direction": "column",
               "row-gap": "md",
             },
-            event_category: {
-              "font-weight": 800,
-              color: "brand",
+          },
+          event_timing: {
+            display: "flex",
+            "flex-direction": "column",
+            "min-width": "95px",
+            "justify-content": "center",
+            "align-items": "center",
+            mobile: {
+              "flex-direction": "row",
+              "justify-content": "flex-start",
+              "column-gap": "xs",
             },
-            event_sub_content: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "2xs",
+          },
+          event_to: {
+            "font-weight": 600,
+            "margin-top": "4xs",
+            "margin-bottom": "4xs",
+            mobile: {
+              "padding-right": "none",
+              "margin-right": "xs",
             },
-            event_ends: {
-              display: "flex",
-              "flex-direction": "column",
-              "margin-bottom": "3xs",
-              mobile: {
-                "margin-bottom": "none",
-                "align-items": "flex-start",
-              },
+          },
+          event_starts: {
+            display: "flex",
+            "flex-direction": "column",
+            "margin-bottom": "3xs",
+            mobile: {
+              "margin-bottom": "none",
+              "align-items": "flex-start",
             },
-            event_title: {
-              "font-weight": 800,
+          },
+          event_starts_date: {
+            "text-align": "center",
+          },
+          event_starts_month: {
+            "text-align": "center",
+            "font-weight": 600,
+          },
+          event_ends_date: {
+            "text-align": "center",
+          },
+          event_ends_month: {
+            "text-align": "center",
+            "font-weight": 600,
+          },
+          divider: {
+            "margin-left": "2xs",
+            "margin-right": "3xl",
+            "border-style": "solid",
+            "border-top-width": "0px",
+            "border-right-width": "0px",
+            "border-bottom-width": "0px",
+            "border-left-width": "1px",
+            mobile: {
+              display: "none",
             },
-          })),
+          },
+          event_description: {
+            "font-weight": 500,
+          },
+          event_content: {
+            "align-self": "center",
+            width: "100%",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "md",
+          },
+          event_category: {
+            color: "brand",
+            "font-size": "xs",
+            "font-weight": 700,
+            "text-transform": "uppercase",
+            "letter-spacing": "0.08em",
+          },
+          event_sub_content: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "2xs",
+          },
+          event_ends: {
+            display: "flex",
+            "flex-direction": "column",
+            "margin-bottom": "3xs",
+            mobile: {
+              "margin-bottom": "none",
+              "align-items": "flex-start",
+            },
+          },
+          event_title: {
+            "font-weight": 800,
+          },
+        },
+        listing_section: Array(ITEMS_COUNT).fill({}),
         empty_state: {
           display: "flex",
           "flex-direction": "column",
@@ -564,14 +592,13 @@ export const Calendar1: IBlock = {
           "flex-direction": "column",
           "row-gap": "xs",
         },
-        calendar_ctas: Array(2)
-          .fill(0)
-          .map(() => ({
-            calendar_cta: {
-              display: "flex",
-              "column-gap": "xs",
-            },
-          })),
+        calendar_ctas_levoGroupItem: {
+          calendar_cta: {
+            display: "flex",
+            "column-gap": "xs",
+          },
+        },
+        calendar_ctas: [{}],
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -689,20 +716,442 @@ export const Calendar1: IBlock = {
               },
             },
           },
+        ],
+      },
+    },
+    {
+      key: "grid-view",
+      title: "Grid View",
+      styles: {
+        layout: {},
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+        },
+        header: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+          "text-align": "center",
+          "align-items": "center",
+        },
+        title: {},
+        description: {},
+        content: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xl",
+          width: "100%",
+        },
+        listing_section_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          "column-gap": "lg",
+          "row-gap": "lg",
+          width: "100%",
+          tablet: { "grid-template-columns": "repeat(2, minmax(0, 1fr))" },
+          mobile: { "grid-template-columns": "repeat(1, minmax(0, 1fr))" },
+        },
+        listing_section_levoGroupItem: {
+          event: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "md",
+            height: "100%",
+            "padding-top": "xl",
+            "padding-right": "xl",
+            "padding-bottom": "xl",
+            "padding-left": "xl",
+            "border-style": "solid",
+            "border-width": "1px",
+            "border-color": "var(--color-border)",
+            "border-radius": "xl",
+            "background-color": "background-1",
+          },
+          event_timing: {
+            display: "flex",
+            "column-gap": "xs",
+            "align-items": "center",
+          },
+          event_starts: { display: "flex", "flex-direction": "column" },
+          event_starts_date: {},
+          event_starts_month: { "font-weight": 600 },
+          event_ends: { display: "flex", "flex-direction": "column" },
+          event_ends_date: {},
+          event_ends_month: { "font-weight": 600 },
+          event_to: { "font-weight": 600, "margin-left": "2xs", "margin-right": "2xs" },
+          divider: { display: "none" },
+          event_content: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+          },
+          event_category: {
+            color: "brand",
+            "font-size": "xs",
+            "font-weight": 700,
+            "text-transform": "uppercase",
+            "letter-spacing": "0.08em",
+          },
+          event_sub_content: { display: "flex", "flex-direction": "column", "row-gap": "2xs" },
+          event_title: { "font-weight": 700 },
+          event_description: {},
+        },
+        listing_section: Array(ITEMS_COUNT).fill({}),
+        empty_state: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+        },
+        empty_state_icon: { "font-size": "48px", opacity: 0.3, "margin-bottom": "md" },
+        empty_state_title: { "margin-bottom": "xs" },
+        empty_state_description: { "max-width": "400px", "margin-bottom": "md" },
+        empty_state_cta: { display: "flex", "column-gap": "xs" },
+        calendar_section: { display: "none" },
+        calendar_header: {},
+        calendar_title: {},
+        calendar_description: {},
+        calendar: {},
+        calendar_ctas_levoGroup: { display: "none" },
+        calendar_ctas_levoGroupItem: { calendar_cta: {} },
+        calendar_ctas: [{}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: { heading: { level: "2" }, selectedVariants: { Heading_Level: "H2" } },
+        description: { selectedVariants: { Typography_Variants: "Body" } },
+        calendar_title: { heading: { level: "3" }, selectedVariants: { Heading_Level: "H4" } },
+        calendar_description: { selectedVariants: { Typography_Variants: "Small" } },
+        listing_section: Array(ITEMS_COUNT)
+          .fill(0)
+          .map(() => ({
+            event_starts_date: {
+              selectedVariants: { Heading_Level: "H5" },
+              heading: { level: "5" },
+            },
+            event_ends_date: { selectedVariants: { Heading_Level: "H5" }, heading: { level: "5" } },
+            event_starts_month: { selectedVariants: { Typography_Variants: "Small" } },
+            event_ends_month: { selectedVariants: { Typography_Variants: "Small" } },
+            event_to: { selectedVariants: { Typography_Variants: "Small" } },
+            event_category: { heading: { level: "5" }, selectedVariants: { Heading_Level: "H6" } },
+            event_title: { heading: { level: "4" }, selectedVariants: { Heading_Level: "H5" } },
+            event_description: { selectedVariants: {} },
+          })),
+        empty_state_title: { heading: { level: "3" }, selectedVariants: { Heading_Level: "H3" } },
+        empty_state_description: { selectedVariants: { Typography_Variants: "Body" } },
+        empty_state_cta: {
+          selectedVariants: { Button_Variants: "Link" },
+          button_icons: { left: { enabled: true } },
+        },
+        calendar_ctas: [
+          { calendar_cta: { selectedVariants: {}, button_icons: { left: { enabled: true } } } },
+        ],
+      },
+    },
+    {
+      key: "compact",
+      title: "Compact",
+      styles: {
+        layout: {},
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        header: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xs",
+        },
+        title: {},
+        description: { color: "text-2" },
+        content: {
+          display: "flex",
+          "column-gap": "2xl",
+          width: "100%",
+          mobile: { "flex-direction": "column-reverse", "row-gap": "2xl" },
+        },
+        listing_section_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          flex: "1",
+          "row-gap": "xs",
+        },
+        listing_section_levoGroupItem: {
+          event: {
+            display: "flex",
+            "column-gap": "md",
+            "align-items": "center",
+            "padding-top": "sm",
+            "padding-bottom": "sm",
+            "padding-left": "md",
+            "padding-right": "md",
+            "border-bottom-style": "solid",
+            "border-bottom-width": "1px",
+            "border-bottom-color": "var(--color-border)",
+          },
+          event_timing: {
+            display: "flex",
+            "flex-wrap": "wrap",
+            "column-gap": "3xs",
+            "row-gap": "3xs",
+            "align-content": "flex-start",
+            "align-items": "baseline",
+            width: "160px",
+            "flex-shrink": 0,
+          },
+          event_starts: {
+            display: "flex",
+            "column-gap": "3xs",
+            "align-items": "baseline",
+            width: "100%",
+          },
+          event_starts_date: { "font-weight": 600 },
+          event_starts_month: {},
+          event_ends: {
+            display: "flex",
+            "column-gap": "3xs",
+            "align-items": "baseline",
+            width: "100%",
+          },
+          event_ends_date: { "font-weight": 600 },
+          event_ends_month: {},
+          event_to: { "font-size": "xs", color: "text-2" },
+          starts_at: { "font-size": "xs", color: "text-2" },
+          ends_at: { "font-size": "xs", color: "text-2" },
+          divider: { display: "none" },
+          event_content: {
+            display: "flex",
+            "flex-direction": "column",
+            flex: "1",
+          },
+          event_category: {
+            color: "brand",
+            "font-size": "xs",
+            "font-weight": 700,
+            "text-transform": "uppercase",
+            "letter-spacing": "0.08em",
+          },
+          event_sub_content: { display: "flex", "flex-direction": "column" },
+          event_title: { "font-weight": 600 },
+          event_description: { "font-size": "sm", color: "text-2" },
+        },
+        listing_section: Array(ITEMS_COUNT).fill({}),
+        empty_state: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        empty_state_icon: { "font-size": "40px", opacity: 0.3 },
+        empty_state_title: {},
+        empty_state_description: { "max-width": "360px" },
+        empty_state_cta: { display: "flex", "column-gap": "xs" },
+        calendar_section: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "md",
+          "max-width": "280px",
+        },
+        calendar_header: { display: "flex", "flex-direction": "column", "row-gap": "3xs" },
+        calendar_title: {},
+        calendar_description: {},
+        calendar: {
+          "border-style": "solid",
+          "border-width": "1px",
+          "border-color": "var(--color-border)",
+          "border-radius": "base",
+          "padding-top": "sm",
+          "padding-bottom": "sm",
+          "padding-left": "sm",
+          "padding-right": "sm",
+        },
+        calendar_ctas_levoGroup: { display: "flex", "flex-direction": "column", "row-gap": "2xs" },
+        calendar_ctas_levoGroupItem: {
+          calendar_cta: { display: "flex", "column-gap": "xs" },
+        },
+        calendar_ctas: [{}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: { heading: { level: "3" }, selectedVariants: { Heading_Level: "H3" } },
+        description: { selectedVariants: { Typography_Variants: "Small" } },
+        calendar_title: { heading: { level: "4" }, selectedVariants: { Heading_Level: "H5" } },
+        calendar_description: { selectedVariants: { Typography_Variants: "Small" } },
+        listing_section: Array(ITEMS_COUNT)
+          .fill(0)
+          .map(() => ({
+            event_starts_date: {
+              selectedVariants: { Heading_Level: "H6" },
+              heading: { level: "6" },
+            },
+            event_ends_date: { selectedVariants: { Heading_Level: "H6" }, heading: { level: "6" } },
+            event_starts_month: { selectedVariants: { Typography_Variants: "Small" } },
+            event_ends_month: { selectedVariants: { Typography_Variants: "Small" } },
+            event_to: { selectedVariants: { Typography_Variants: "Small" } },
+            event_category: { heading: { level: "6" }, selectedVariants: { Heading_Level: "H6" } },
+            event_title: { heading: { level: "5" }, selectedVariants: { Heading_Level: "H6" } },
+            event_description: { selectedVariants: { Typography_Variants: "Small" } },
+          })),
+        empty_state_title: { heading: { level: "4" }, selectedVariants: { Heading_Level: "H4" } },
+        empty_state_description: { selectedVariants: { Typography_Variants: "Small" } },
+        empty_state_cta: {
+          selectedVariants: { Button_Variants: "Link" },
+          button_icons: { left: { enabled: true } },
+        },
+        calendar_ctas: [
           {
             calendar_cta: {
-              selectedVariants: {
-                Button_Variants: "Secondary",
-              },
-              button_icons: {
-                left: {
-                  enabled: true,
-                },
-              },
+              selectedVariants: { Button_Variants: "Link" },
+              button_icons: { left: { enabled: true } },
             },
           },
         ],
       },
     },
+    {
+      key: "minimal-list",
+      title: "Minimal List",
+      styles: {
+        layout: {},
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          "max-width": "720px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        header: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xs",
+        },
+        title: { "font-weight": 600 },
+        description: { color: "text-2" },
+        content: {
+          display: "flex",
+          "flex-direction": "column",
+          width: "100%",
+          "row-gap": "none",
+        },
+        listing_section_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+        },
+        listing_section_levoGroupItem: {
+          event: {
+            display: "flex",
+            "column-gap": "lg",
+            "padding-top": "md",
+            "padding-bottom": "md",
+            "border-bottom-style": "solid",
+            "border-bottom-width": "1px",
+            "border-bottom-color": "var(--color-border)",
+          },
+          event_timing: {
+            display: "flex",
+            "flex-wrap": "wrap",
+            "column-gap": "3xs",
+            "row-gap": "3xs",
+            "align-content": "flex-start",
+            "align-items": "baseline",
+            width: "150px",
+            "flex-shrink": 0,
+          },
+          event_starts: {
+            display: "flex",
+            "column-gap": "3xs",
+            "align-items": "baseline",
+            width: "100%",
+          },
+          event_starts_date: { "font-weight": 600 },
+          event_starts_month: { color: "text-2", "font-size": "xs" },
+          event_ends: {
+            display: "flex",
+            "column-gap": "3xs",
+            "align-items": "baseline",
+            width: "100%",
+          },
+          event_ends_date: { "font-weight": 600 },
+          event_ends_month: { color: "text-2", "font-size": "xs" },
+          event_to: { "font-size": "xs", color: "text-2" },
+          starts_at: { "font-size": "xs", color: "text-2" },
+          ends_at: { "font-size": "xs", color: "text-2" },
+          divider: { display: "none" },
+          event_content: {
+            display: "flex",
+            "flex-direction": "column",
+            flex: "1",
+          },
+          event_category: {
+            color: "brand",
+            "font-size": "xs",
+            "font-weight": 700,
+            "text-transform": "uppercase",
+            "letter-spacing": "0.08em",
+          },
+          event_sub_content: { display: "flex", "flex-direction": "column" },
+          event_title: { "font-weight": 600 },
+          event_description: { color: "text-2", "font-size": "sm" },
+        },
+        listing_section: Array(ITEMS_COUNT).fill({}),
+        empty_state: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        empty_state_icon: { "font-size": "40px", opacity: 0.3 },
+        empty_state_title: {},
+        empty_state_description: { "max-width": "360px" },
+        empty_state_cta: { display: "flex", "column-gap": "xs" },
+        calendar_section: { display: "none" },
+        calendar_header: {},
+        calendar_title: {},
+        calendar_description: {},
+        calendar: {},
+        calendar_ctas_levoGroup: { display: "none" },
+        calendar_ctas_levoGroupItem: { calendar_cta: {} },
+        calendar_ctas: [{}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: { heading: { level: "3" }, selectedVariants: { Heading_Level: "H3" } },
+        description: { selectedVariants: { Typography_Variants: "Small" } },
+        calendar_title: { heading: { level: "4" }, selectedVariants: { Heading_Level: "H5" } },
+        calendar_description: { selectedVariants: { Typography_Variants: "Small" } },
+        listing_section: Array(ITEMS_COUNT)
+          .fill(0)
+          .map(() => ({
+            event_starts_date: {
+              selectedVariants: { Heading_Level: "H5" },
+              heading: { level: "5" },
+            },
+            event_ends_date: { selectedVariants: { Heading_Level: "H5" }, heading: { level: "5" } },
+            event_starts_month: { selectedVariants: { Typography_Variants: "Small" } },
+            event_ends_month: { selectedVariants: { Typography_Variants: "Small" } },
+            event_to: { selectedVariants: { Typography_Variants: "Small" } },
+            event_category: { heading: { level: "6" }, selectedVariants: { Heading_Level: "H6" } },
+            event_title: { heading: { level: "5" }, selectedVariants: { Heading_Level: "H6" } },
+            event_description: { selectedVariants: { Typography_Variants: "Small" } },
+          })),
+        empty_state_title: { heading: { level: "4" }, selectedVariants: { Heading_Level: "H4" } },
+        empty_state_description: { selectedVariants: { Typography_Variants: "Small" } },
+        empty_state_cta: {
+          selectedVariants: { Button_Variants: "Link" },
+          button_icons: { left: { enabled: true } },
+        },
+        calendar_ctas: [{ calendar_cta: { selectedVariants: {} } }],
+      },
+    },
   ],
 };