@levo-so/blocks 0.1.100 → 0.1.102

package/src/blocks/team/team-3.schema.ts

@@ -1,19 +1,17 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DUMMY_ICON = {
+const ICON_LINKEDIN = {
   kind: "icon",
   data: {
-    id: "archive-minus",
-    label: "Archive Minus",
-    tags: ["archive", "custom", "directional", "minus"],
+    id: "linkedin",
+    label: "Linkedin",
     svgCode:
-      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.2234 0H1.77187C0.792187 0 0 0.773438 0 1.72969V22.2656C0 23.2219 0.792187 24 1.77187 24H22.2234C23.2031 24 24 23.2219 24 22.2703V1.72969C24 0.773438 23.2031 0 22.2234 0ZM7.12031 20.4516H3.55781V8.99531H7.12031V20.4516ZM5.33906 7.43438C4.19531 7.43438 3.27188 6.51094 3.27188 5.37187C3.27188 4.23281 4.19531 3.30937 5.33906 3.30937C6.47813 3.30937 7.40156 4.23281 7.40156 5.37187C7.40156 6.50625 6.47813 7.43438 5.33906 7.43438ZM20.4516 20.4516H16.8937V14.8828C16.8937 13.5562 16.8703 11.8453 15.0422 11.8453C13.1906 11.8453 12.9094 13.2937 12.9094 14.7891V20.4516H9.35625V8.99531H12.7687V10.5609H12.8156C13.2891 9.66094 14.4516 8.70938 16.1813 8.70938C19.7859 8.70938 20.4516 11.0813 20.4516 14.1656V20.4516Z" fill="var(--color-icon-primary)"/></svg>',
   },
 };
 
 const MEDIA_1 = {
   id: "iPDeQfZlYFJJr",
-  filename: "teams-3-1_1.png",
   kind: "image",
   location: "https://static.levocdn.com/WLZ1TXTD/teams-3-11-DNP5Bs1aZqCOy.png",
   srcset: {
@@ -31,7 +29,6 @@ const MEDIA_1 = {
 
 const MEDIA_2 = {
   id: "1d71iLgEFSgds",
-  filename: "teams-3-2.png",
   kind: "image",
   location: "https://static.levocdn.com/WLZ1TXTD/teams-3-2-vxmSjzMsgEQtq.png",
   srcset: {
@@ -49,7 +46,6 @@ const MEDIA_2 = {
 
 const MEDIA_3 = {
   id: "8eRjr0Um3qUcP",
-  filename: "teams-3-3.png",
   kind: "image",
   location: "https://static.levocdn.com/WLZ1TXTD/teams-3-3-Lkpy5HvjY9yQl.png",
   srcset: {
@@ -69,54 +65,59 @@ const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   header: null,
-  title: "Our Team",
-  description: "Our Team Our Team Our Team Our Team Our Team Our Team Our Team Our Team",
+  title: "The people moving money safely",
+  description:
+    "Risk, engineering, and compliance leaders who've shipped PCI DSS Level 1 platforms and moved billions in settlement volume.",
   team: [
     {
       card: null,
+      img: MEDIA_1,
       info: null,
       "name-position-wrapper": null,
-      name: "Mohini Krishten",
-      position: "Co-Founder & CEO",
+      name: "Priya Shankar",
+      position: "Chief Risk Officer",
       social: [
         {
-          icon: DUMMY_ICON,
+          icon: ICON_LINKEDIN,
         },
       ],
     },
     {
       card: null,
+      img: MEDIA_2,
       info: null,
       "name-position-wrapper": null,
-      name: "Jenny White",
-      position: "Co-Founder & CEO",
+      name: "Marcus Reyes",
+      position: "VP, Platform Engineering",
       social: [
         {
-          icon: DUMMY_ICON,
+          icon: ICON_LINKEDIN,
         },
       ],
     },
     {
       card: null,
+      img: MEDIA_3,
       info: null,
       "name-position-wrapper": null,
-      name: "Ben Morrison",
-      position: "Lead Management",
+      name: "Naomi Chen",
+      position: "Head of Compliance & KYC",
       social: [
         {
-          icon: DUMMY_ICON,
+          icon: ICON_LINKEDIN,
         },
       ],
     },
     {
       card: null,
+      img: MEDIA_1,
       info: null,
       "name-position-wrapper": null,
-      name: "Sarah Johnson",
-      position: "Head of Operations",
+      name: "Samir Okonkwo",
+      position: "Senior Product Manager",
       social: [
         {
-          icon: DUMMY_ICON,
+          icon: ICON_LINKEDIN,
         },
       ],
     },
@@ -388,81 +389,85 @@ export const Team3: IBlock = {
             number_of_slides: 2,
           },
         },
-        team: [
-          {
-            card: {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "background-color": "background-1",
-              "border-radius": "base",
-              padding: "lg",
-              "box-shadow": "default",
-              "margin-left": "6xs",
-              "margin-right": "6xs",
+        team_levoGroupItem: {
+          card: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "background-color": "background-1",
+            "border-radius": "base",
+            padding: "lg",
+            "box-shadow": "default",
+            "margin-left": "6xs",
+            "margin-right": "6xs",
+
+            "min-height": "400px",
+            "background-position": "center center",
+            "background-size": "cover",
+          },
+          img: {
+            display: "none",
+          },
+          info: {
+            display: "flex",
+            "flex-direction": "row",
+            "align-items": "center",
+            "text-align": "center",
+            "row-gap": "sm",
+            filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+            width: "100%",
+            "background-color": "background-1",
+            "margin-top": "18xl",
+            "justify-content": "space-between",
+            "padding-top": "sm",
+            "padding-bottom": "sm",
+            "border-radius": "base",
+            "border-style": "solid",
+            "border-width": "1px",
+            "padding-left": "xs",
+            "padding-right": "xs",
+          },
+          "name-position-wrapper": {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "start",
+            "text-align": "center",
+            "row-gap": "4xs",
+          },
+          name: {},
+          position: {},
+          social_levoGroup: {
+            display: "flex",
+            "justify-content": "center",
+            "column-gap": "xs",
+
+            "border-style": "none",
+            "border-width": "0px",
+          },
+          social_levoGroupItem: {
+            icon: {
+              width: "40px",
+              height: "40px",
+              "object-fit": "contain",
 
-              "min-height": "400px",
-              "background-image": `url("${MEDIA_1.location}")`,
-              "background-position": "center center",
-              "background-size": "cover",
-            },
-            image: {
-              width: "200px",
-              height: "200px",
-              "border-radius": "base",
-              "object-fit": "cover",
-              "margin-bottom": "base",
-            },
-            info: {
-              display: "flex",
-              "flex-direction": "row",
-              "align-items": "center",
-              "text-align": "center",
-              "row-gap": "sm",
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              width: "100%",
-              "background-color": "white",
-              "margin-top": "18xl",
-              "justify-content": "space-between",
-              "padding-top": "sm",
-              "padding-bottom": "sm",
-              "border-radius": "base",
               "border-style": "solid",
               "border-width": "1px",
-              "padding-left": "xs",
-              "padding-right": "xs",
-            },
-            "name-position-wrapper": {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "start",
-              "text-align": "center",
-              "row-gap": "4xs",
+              "border-color": "brand",
+              "border-radius": "base",
+              padding: "xs",
             },
-            name: {},
-            position: {},
-            social_levoGroup: {
-              display: "flex",
-              "justify-content": "center",
-              "column-gap": "xs",
-
-              "border-style": "none",
-              "border-width": "0px",
+          },
+        },
+        team: [
+          {
+            card: {
+              "background-image": `url("${MEDIA_1.location}")`,
             },
             social: [
               {
                 icon: {
-                  width: "40px",
-                  height: "40px",
-                  "object-fit": "contain",
-
-                  "border-style": "solid",
-                  "border-width": "1px",
-                  "border-color": "brand",
-                  "border-radius": "base",
                   "background-color": "white",
                   display: "block",
-                  padding: "xs",
                   mobile: {},
                 },
               },
@@ -470,78 +475,13 @@ export const Team3: IBlock = {
           },
           {
             card: {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "background-color": "background-1",
-              "border-radius": "base",
-              padding: "lg",
-              "box-shadow": "default",
-              "margin-left": "6xs",
-              "margin-right": "6xs",
-
-              "min-height": "400px",
               "background-image": `url("${MEDIA_2.location}")`,
-              "background-position": "center center",
-              "background-size": "cover",
-            },
-            image: {
-              width: "200px",
-              height: "200px",
-              "border-radius": "base",
-              "object-fit": "cover",
-              "margin-bottom": "base",
-            },
-            info: {
-              display: "flex",
-              "flex-direction": "row",
-              "align-items": "center",
-              "text-align": "center",
-              "row-gap": "sm",
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              width: "100%",
-              "background-color": "white",
-              "margin-top": "18xl",
-              "justify-content": "space-between",
-              "padding-top": "sm",
-              "padding-bottom": "sm",
-              "border-radius": "base",
-              "border-style": "solid",
-              "border-width": "1px",
-              "padding-left": "xs",
-              "padding-right": "xs",
-            },
-            "name-position-wrapper": {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "start",
-              "text-align": "center",
-              "row-gap": "4xs",
-            },
-            name: {},
-            position: {},
-            social_levoGroup: {
-              display: "flex",
-              "justify-content": "center",
-              "column-gap": "xs",
-
-              "border-style": "none",
-              "border-width": "0px",
             },
             social: [
               {
                 icon: {
-                  width: "40px",
-                  height: "40px",
-                  "object-fit": "contain",
-
-                  "border-style": "solid",
-                  "border-width": "1px",
-                  "border-color": "brand",
-                  "border-radius": "base",
-                  "background-color": "white",
+                  "background-color": "background-1",
                   display: "block",
-                  padding: "xs",
                   mobile: {},
                 },
               },
@@ -549,78 +489,13 @@ export const Team3: IBlock = {
           },
           {
             card: {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "background-color": "background-1",
-              "border-radius": "base",
-              padding: "lg",
-              "box-shadow": "default",
-              "margin-left": "6xs",
-              "margin-right": "6xs",
-
-              "min-height": "400px",
               "background-image": `url("${MEDIA_3.location}")`,
-              "background-position": "center center",
-              "background-size": "cover",
-            },
-            image: {
-              width: "200px",
-              height: "200px",
-              "border-radius": "base",
-              "object-fit": "cover",
-              "margin-bottom": "base",
-            },
-            info: {
-              display: "flex",
-              "flex-direction": "row",
-              "align-items": "center",
-              "text-align": "center",
-              "row-gap": "sm",
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              width: "100%",
-              "background-color": "white",
-              "margin-top": "18xl",
-              "justify-content": "space-between",
-              "padding-top": "sm",
-              "padding-bottom": "sm",
-              "border-radius": "base",
-              "border-style": "solid",
-              "border-width": "1px",
-              "padding-left": "xs",
-              "padding-right": "xs",
-            },
-            "name-position-wrapper": {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "start",
-              "text-align": "center",
-              "row-gap": "4xs",
-            },
-            name: {},
-            position: {},
-            social_levoGroup: {
-              display: "flex",
-              "justify-content": "center",
-              "column-gap": "xs",
-
-              "border-style": "none",
-              "border-width": "0px",
             },
             social: [
               {
                 icon: {
-                  width: "40px",
-                  height: "40px",
-                  "object-fit": "contain",
-
-                  "border-style": "solid",
-                  "border-width": "1px",
-                  "border-color": "brand",
-                  "border-radius": "base",
-                  "background-color": "white",
+                  "background-color": "background-1",
                   display: "block",
-                  padding: "xs",
                   mobile: {},
                 },
               },
@@ -628,76 +503,12 @@ export const Team3: IBlock = {
           },
           {
             card: {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "background-color": "background-1",
-              "border-radius": "base",
-              padding: "lg",
-              "box-shadow": "default",
-              "margin-left": "6xs",
-              "margin-right": "6xs",
-
-              "min-height": "400px",
               "background-image": `url("${MEDIA_2.location}")`,
-              "background-position": "center center",
-              "background-size": "cover",
-            },
-            image: {
-              width: "200px",
-              height: "200px",
-              "border-radius": "base",
-              "object-fit": "cover",
-              "margin-bottom": "base",
-            },
-            info: {
-              display: "flex",
-              "flex-direction": "row",
-              "align-items": "center",
-              "text-align": "center",
-              "row-gap": "sm",
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              width: "100%",
-              "background-color": "white",
-              "margin-top": "18xl",
-              "justify-content": "space-between",
-              "padding-top": "sm",
-              "padding-bottom": "sm",
-              "border-radius": "base",
-              "border-style": "solid",
-              "border-width": "1px",
-              "padding-left": "xs",
-              "padding-right": "xs",
-            },
-            "name-position-wrapper": {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "start",
-              "text-align": "center",
-              "row-gap": "4xs",
-            },
-            name: {},
-            position: {},
-            social_levoGroup: {
-              display: "flex",
-              "justify-content": "center",
-              "column-gap": "xs",
-
-              "border-style": "none",
-              "border-width": "0px",
             },
             social: [
               {
                 icon: {
-                  width: "40px",
-                  height: "40px",
-                  "object-fit": "contain",
-                  "border-style": "solid",
-                  "border-width": "1px",
-                  "border-color": "brand",
-                  "border-radius": "base",
-                  "background-color": "white",
-                  padding: "xs",
+                  "background-color": "background-1",
                 },
               },
             ],
@@ -722,5 +533,285 @@ export const Team3: IBlock = {
         },
       },
     },
+    {
+      key: "column_circular",
+      title: "Column Circular",
+      config: {
+        team_levoGroup: { carousel: { loop: true } },
+        title: { selectedVariants: { Heading_Level: "H2" }, heading: { level: 2 } },
+        team: Array(4).fill(0).map(() => ({
+          name: { selectedVariants: { Heading_Level: "H5" }, heading: { level: "4" } },
+        })),
+      },
+      content: DEFAULT_CONTENT,
+      styles: {
+        layout: { "background-color": "background-1" },
+        container: {},
+        header: { "text-align": "center", "margin-bottom": "4xl" },
+        title: {},
+        description: { color: "text-2", "max-width": "640px", "margin-left": "auto", "margin-right": "auto" },
+        team_levoGroup: {
+          number_of_slides: 4,
+          mobile: { number_of_slides: 1 },
+          tablet: { number_of_slides: 2 },
+        },
+        team_levoGroupItem: {
+          card: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "text-align": "center",
+            padding: "xl",
+            "background-color": "transparent",
+            "background-image": "none",
+            "min-height": "auto",
+            "box-shadow": "none",
+          },
+          img: {
+            width: "180px",
+            height: "180px",
+            "border-radius": "full",
+            "object-fit": "cover",
+            "margin-bottom": "lg",
+            "border-width": "4px",
+            "border-style": "solid",
+            "border-color": "background-1",
+            "box-shadow": "default",
+          },
+          info: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "xs",
+            "background-color": "transparent",
+            "border-width": "0",
+            filter: "none",
+            "margin-top": "none",
+            padding: "none",
+          },
+          "name-position-wrapper": {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "4xs",
+          },
+          name: { "font-weight": 700 },
+          position: { "font-size": "sm", color: "text-2" },
+          social_levoGroup: {
+            display: "flex",
+            "justify-content": "center",
+            "column-gap": "xs",
+            "margin-top": "sm",
+          },
+          social_levoGroupItem: {
+            icon: {
+              width: "36px",
+              height: "36px",
+              "object-fit": "contain",
+              "border-radius": "full",
+              "background-color": "background-2",
+              padding: "xs",
+              display: "block",
+            },
+          },
+        },
+        "carousel-navigation-container": { display: "flex", "justify-content": "center", "margin-top": "2xl" },
+        "carousel-navigation": { display: "flex", "column-gap": "2xs", "align-items": "center" },
+        "carousel-navigation-pill": {
+          width: "12px",
+          height: "12px",
+          "border-radius": "full",
+          "background-color": "brand",
+          cursor: "pointer",
+        },
+      },
+    },
+    {
+      key: "editorial_list",
+      title: "Editorial List",
+      config: {
+        team_levoGroup: { carousel: { loop: false } },
+        title: { selectedVariants: { Heading_Level: "H2" }, heading: { level: 2 } },
+        team: Array(4).fill(0).map(() => ({
+          name: { selectedVariants: { Heading_Level: "H4" }, heading: { level: "4" } },
+        })),
+      },
+      content: DEFAULT_CONTENT,
+      styles: {
+        layout: {},
+        container: {},
+        header: {
+          "margin-bottom": "4xl",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "sm",
+          "padding-bottom": "xl",
+          "border-bottom-width": "1px",
+          "border-bottom-style": "solid",
+          "border-bottom-color": "border",
+        },
+        title: { "font-weight": 800 },
+        description: { color: "text-2", "max-width": "640px" },
+        team_levoGroup: {
+          number_of_slides: 2,
+          mobile: { number_of_slides: 1 },
+          tablet: { number_of_slides: 2 },
+        },
+        team_levoGroupItem: {
+          card: {
+            display: "flex",
+            "flex-direction": "row",
+            "align-items": "center",
+            "column-gap": "xl",
+            padding: "xl",
+            "background-color": "transparent",
+            "background-image": "none",
+            "min-height": "auto",
+            "box-shadow": "none",
+            "border-bottom-width": "1px",
+            "border-bottom-style": "solid",
+            "border-bottom-color": "border",
+            "margin-left": "none",
+            "margin-right": "none",
+            mobile: { "flex-direction": "column", "align-items": "start" },
+          },
+          img: {
+            width: "140px",
+            height: "140px",
+            "border-radius": "base",
+            "object-fit": "cover",
+            "margin-bottom": "none",
+            flex: "0 0 140px",
+          },
+          info: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "row-gap": "xs",
+            "background-color": "transparent",
+            "border-width": "0",
+            filter: "none",
+            "margin-top": "none",
+            padding: "none",
+            flex: "1",
+          },
+          "name-position-wrapper": {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "4xs",
+          },
+          name: { "font-weight": 700 },
+          position: {
+            "font-size": "xs",
+            color: "brand",
+            "text-transform": "uppercase",
+            "letter-spacing": "0.08em",
+            "font-weight": 600,
+          },
+          social_levoGroup: {
+            display: "flex",
+            "column-gap": "xs",
+            "margin-top": "sm",
+          },
+          social_levoGroupItem: {
+            icon: {
+              width: "28px",
+              height: "28px",
+              "object-fit": "contain",
+              "border-radius": "full",
+              "background-color": "background-2",
+              padding: "2xs",
+              display: "block",
+            },
+          },
+        },
+        "carousel-navigation-container": { display: "flex", "justify-content": "flex-end", "margin-top": "2xl" },
+        "carousel-navigation": { display: "flex", "column-gap": "2xs", "align-items": "center" },
+        "carousel-navigation-pill": {
+          width: "24px",
+          height: "2px",
+          "background-color": "text-1",
+          cursor: "pointer",
+        },
+      },
+    },
+    {
+      key: "compact_carousel",
+      title: "Compact Carousel",
+      config: {
+        team_levoGroup: { carousel: { loop: true } },
+        title: { selectedVariants: { Heading_Level: "H2" }, heading: { level: 2 } },
+        team: Array(4).fill(0).map(() => ({
+          name: { selectedVariants: { Heading_Level: "H5" }, heading: { level: "4" } },
+        })),
+      },
+      content: DEFAULT_CONTENT,
+      styles: {
+        layout: { "background-color": "background-2" },
+        container: {},
+        header: { "text-align": "center", "margin-bottom": "3xl" },
+        title: {},
+        description: { color: "text-2", "max-width": "560px", "margin-left": "auto", "margin-right": "auto" },
+        team_levoGroup: {
+          number_of_slides: 5,
+          mobile: { number_of_slides: 2 },
+          tablet: { number_of_slides: 3 },
+        },
+        team_levoGroupItem: {
+          card: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "text-align": "center",
+            padding: "base",
+            "background-color": "transparent",
+            "background-image": "none",
+            "min-height": "auto",
+            "box-shadow": "none",
+            "margin-left": "6xs",
+            "margin-right": "6xs",
+          },
+          img: {
+            width: "110px",
+            height: "110px",
+            "border-radius": "full",
+            "object-fit": "cover",
+            "margin-bottom": "sm",
+          },
+          info: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "2xs",
+            "background-color": "transparent",
+            "border-width": "0",
+            filter: "none",
+            "margin-top": "none",
+            padding: "none",
+          },
+          "name-position-wrapper": {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "4xs",
+          },
+          name: { "font-weight": 700, "font-size": "base" },
+          position: { "font-size": "xs", color: "text-2" },
+          social_levoGroup: { display: "none" },
+          social_levoGroupItem: {
+            icon: { display: "none" },
+          },
+        },
+        "carousel-navigation-container": { display: "flex", "justify-content": "center", "margin-top": "2xl" },
+        "carousel-navigation": { display: "flex", "column-gap": "2xs", "align-items": "center" },
+        "carousel-navigation-pill": {
+          width: "8px",
+          height: "8px",
+          "border-radius": "full",
+          "background-color": "text-2",
+          cursor: "pointer",
+        },
+      },
+    },
   ],
 };