@mekari/pixel3-timeline 0.0.11-dev.0 → 0.0.11-dev.2

package/dist/accordion.js

@@ -26,29 +26,23 @@ __export(accordion_exports, {
 module.exports = __toCommonJS(accordion_exports);
 var import_vue3 = require("vue");
 var import_pixel3_icon = require("@mekari/pixel3-icon");
-var import_css2 = require("@mekari/pixel3-styled-system/css");
-var import_patterns = require("@mekari/pixel3-styled-system/patterns");
 var import_pixel3_transition = require("@mekari/pixel3-transition");
 var import_vue4 = require("vue");
 
 // src/body.tsx
 var import_vue = require("vue");
 var import_vue2 = require("vue");
-var import_css = require("@mekari/pixel3-styled-system/css");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
 var MpTimelineBody = (0, import_vue2.defineComponent)({
   name: "MpTimelineBody",
   setup(_props, {
     slots
   }) {
+    const classes = (0, import_recipes.timelineSlotRecipe)();
     return () => {
       return (0, import_vue.createVNode)("div", {
         "data-pixel-component": "MpTimelineBody",
-        "class": (0, import_css.css)({
-          marginLeft: "3",
-          paddingTop: "6px",
-          paddingBottom: "3",
-          width: "full"
-        })
+        "class": classes.body
       }, [slots.default && slots.default()]);
     };
   }
@@ -69,6 +63,7 @@ var timelineAccordionProps = {
 };
 
 // src/accordion.tsx
+var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue3.isVNode)(s);
 }
@@ -81,6 +76,7 @@ var MpTimelineAccordion = (0, import_vue4.defineComponent)({
   }) {
     const isOpen = (0, import_vue4.ref)(props.isOpen || false);
     return () => {
+      const classes = (0, import_recipes2.timelineAccordionSlotRecipe)();
       const children = slots.default && slots.default();
       const timelineItemVNode = children ? children.filter((n) => n.type.name === "MpTimelineItem") : [];
       const length = timelineItemVNode.length - 1;
@@ -101,21 +97,14 @@ var MpTimelineAccordion = (0, import_vue4.defineComponent)({
         "data-pixel-component": "MpTimelineAccordion"
       }, [(0, import_vue3.createVNode)("div", {
         "data-pixel-component": "MpTimelineAccordionBody",
-        "class": (0, import_patterns.flex)()
+        "class": classes.body
       }, [(0, import_vue3.createVNode)("div", {
         "data-pixel-component": "MpTimelineAccordionSeparator",
-        "class": (0, import_patterns.flex)({
-          flexDirection: "column",
-          alignItems: "center"
-        })
+        "class": classes.separator
       }, [(0, import_vue3.createVNode)("div", {
         "data-pixel-component": "MpTimelineAccordionConnector",
-        "class": (0, import_css2.css)({
-          height: "4px",
-          width: "2px",
-          backgroundColor: props.position === "first" ? "transparent" : "gray.100",
-          roundedBottom: "full"
-        })
+        "data-position": props.position,
+        "class": classes.topConnector
       }, null), (0, import_vue3.createVNode)("button", {
         "role": "button",
         "aria-expanded": isOpen.value || void 0,
@@ -124,33 +113,18 @@ var MpTimelineAccordion = (0, import_vue4.defineComponent)({
         "name": isOpen.value ? "accordion-expand" : "accordion-collapse",
         "size": "sm",
         "color": "gray.600",
-        "class": (0, import_css2.css)({
-          my: 1,
-          cursor: "pointer"
-        })
+        "class": classes.icon
       }, null)]), (0, import_vue3.createVNode)("div", {
         "data-pixel-component": "MpTimelineAccordionConnector",
-        "class": (0, import_css2.css)({
-          flexGrow: 1,
-          width: "2px",
-          backgroundColor: !isOpen.value && props.position === "last" ? "transparent" : "gray.100",
-          roundedTop: "full"
-        })
+        "data-position": !isOpen.value && props.position === "last" ? "last" : void 0,
+        "class": classes.bottomConnector
       }, null)]), (0, import_vue3.createVNode)(MpTimelineBody, null, {
         default: () => [(0, import_vue3.createVNode)("div", {
-          "class": (0, import_css2.css)({
-            paddingTop: 1
-          }),
+          "class": classes.title,
           "data-pixel-component": "MpTimelineAccordionTitle"
         }, [(0, import_vue3.createVNode)("p", {
-          "class": (0, import_css2.css)({
-            fontSize: "md",
-            lineHeight: "md",
-            color: "dark",
-            fontWeight: "semibold",
-            letterSpacing: "normal"
-          })
-        }, [(0, import_vue3.createTextVNode)("Label")])])]
+          "class": classes.label
+        }, [(0, import_vue3.createTextVNode)(" "), props.label, (0, import_vue3.createTextVNode)(" ")])])]
       })]), (0, import_vue3.createVNode)(import_pixel3_transition.MpAnimateHeight, {
         "isOpen": isOpen.value
       }, _isSlot(cloneTimelineItem) ? cloneTimelineItem : {

package/dist/accordion.mjs

@@ -1,7 +1,7 @@
 import {
   MpTimelineAccordion
-} from "./chunk-QSWQT234.mjs";
-import "./chunk-F5W3GZXM.mjs";
+} from "./chunk-EYEK6NTK.mjs";
+import "./chunk-QHPZK7ZV.mjs";
 import "./chunk-3X4C56WA.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {

package/dist/body.js

@@ -25,21 +25,17 @@ __export(body_exports, {
 module.exports = __toCommonJS(body_exports);
 var import_vue = require("vue");
 var import_vue2 = require("vue");
-var import_css = require("@mekari/pixel3-styled-system/css");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
 var MpTimelineBody = (0, import_vue2.defineComponent)({
   name: "MpTimelineBody",
   setup(_props, {
     slots
   }) {
+    const classes = (0, import_recipes.timelineSlotRecipe)();
     return () => {
       return (0, import_vue.createVNode)("div", {
         "data-pixel-component": "MpTimelineBody",
-        "class": (0, import_css.css)({
-          marginLeft: "3",
-          paddingTop: "6px",
-          paddingBottom: "3",
-          width: "full"
-        })
+        "class": classes.body
       }, [slots.default && slots.default()]);
     };
   }

package/dist/body.mjs

@@ -1,6 +1,6 @@
 import {
   MpTimelineBody
-} from "./chunk-F5W3GZXM.mjs";
+} from "./chunk-QHPZK7ZV.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpTimelineBody

package/dist/caption.js

@@ -25,21 +25,17 @@ __export(caption_exports, {
 module.exports = __toCommonJS(caption_exports);
 var import_vue = require("vue");
 var import_vue2 = require("vue");
-var import_css = require("@mekari/pixel3-styled-system/css");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
 var MpTimelineCaption = (0, import_vue2.defineComponent)({
   name: "MpTimelineItem",
   setup(_props, {
     slots
   }) {
+    const classes = (0, import_recipes.timelineSlotRecipe)();
     return () => {
       return (0, import_vue.createVNode)("span", {
         "data-pixel-component": "MpTimelineCaption",
-        "class": (0, import_css.css)({
-          fontSize: "sm",
-          color: "gray.400",
-          lineHeight: "sm",
-          marginTop: "0.5"
-        })
+        "class": classes.caption
       }, [slots.default && slots.default()]);
     };
   }

package/dist/caption.mjs

@@ -1,6 +1,6 @@
 import {
   MpTimelineCaption
-} from "./chunk-ZG4NN7A5.mjs";
+} from "./chunk-4PZZ5B6I.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpTimelineCaption

package/dist/{chunk-ZG4NN7A5.mjs → chunk-4PZZ5B6I.mjs}

@@ -1,21 +1,17 @@
 // src/caption.tsx
 import { createVNode as _createVNode } from "vue";
 import { defineComponent } from "vue";
-import { css } from "@mekari/pixel3-styled-system/css";
+import { timelineSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
 var MpTimelineCaption = defineComponent({
   name: "MpTimelineItem",
   setup(_props, {
     slots
   }) {
+    const classes = timelineSlotRecipe();
     return () => {
       return _createVNode("span", {
         "data-pixel-component": "MpTimelineCaption",
-        "class": css({
-          fontSize: "sm",
-          color: "gray.400",
-          lineHeight: "sm",
-          marginTop: "0.5"
-        })
+        "class": classes.caption
       }, [slots.default && slots.default()]);
     };
   }

package/dist/{chunk-7DG62NMG.mjs → chunk-7AOF43E4.mjs}

@@ -4,13 +4,14 @@ import {
 
 // src/timeline.tsx
 import { createVNode as _createVNode } from "vue";
-import { css } from "@mekari/pixel3-styled-system/css";
 import { cloneVNode, defineComponent } from "vue";
+import { timelineSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
 var MpTimeline = defineComponent({
   name: "MpTimeline",
   setup(_props, {
     slots
   }) {
+    const classes = timelineSlotRecipe();
     return () => {
       const children = slots.default && slots.default();
       const timelineItemVNode = children ? children.filter((n) => {
@@ -34,9 +35,7 @@ var MpTimeline = defineComponent({
       });
       return _createVNode("ul", {
         "data-pixel-component": "MpTimeline",
-        "class": css({
-          maxWidth: "sm"
-        })
+        "class": classes.root
       }, [cloneTimelineItem]);
     };
   }

package/dist/{chunk-QSWQT234.mjs → chunk-EYEK6NTK.mjs}

@@ -1,6 +1,6 @@
 import {
   MpTimelineBody
-} from "./chunk-F5W3GZXM.mjs";
+} from "./chunk-QHPZK7ZV.mjs";
 import {
   timelineAccordionProps
 } from "./chunk-3X4C56WA.mjs";
@@ -11,10 +11,9 @@ import {
 // src/accordion.tsx
 import { isVNode as _isVNode, createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
 import { MpIcon } from "@mekari/pixel3-icon";
-import { css } from "@mekari/pixel3-styled-system/css";
-import { flex } from "@mekari/pixel3-styled-system/patterns";
 import { MpAnimateHeight } from "@mekari/pixel3-transition";
 import { cloneVNode, defineComponent, ref } from "vue";
+import { timelineAccordionSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
 }
@@ -27,6 +26,7 @@ var MpTimelineAccordion = defineComponent({
   }) {
     const isOpen = ref(props.isOpen || false);
     return () => {
+      const classes = timelineAccordionSlotRecipe();
       const children = slots.default && slots.default();
       const timelineItemVNode = children ? children.filter((n) => n.type.name === "MpTimelineItem") : [];
       const length = timelineItemVNode.length - 1;
@@ -47,21 +47,14 @@ var MpTimelineAccordion = defineComponent({
         "data-pixel-component": "MpTimelineAccordion"
       }, [_createVNode("div", {
         "data-pixel-component": "MpTimelineAccordionBody",
-        "class": flex()
+        "class": classes.body
       }, [_createVNode("div", {
         "data-pixel-component": "MpTimelineAccordionSeparator",
-        "class": flex({
-          flexDirection: "column",
-          alignItems: "center"
-        })
+        "class": classes.separator
       }, [_createVNode("div", {
         "data-pixel-component": "MpTimelineAccordionConnector",
-        "class": css({
-          height: "4px",
-          width: "2px",
-          backgroundColor: props.position === "first" ? "transparent" : "gray.100",
-          roundedBottom: "full"
-        })
+        "data-position": props.position,
+        "class": classes.topConnector
       }, null), _createVNode("button", {
         "role": "button",
         "aria-expanded": isOpen.value || void 0,
@@ -70,33 +63,18 @@ var MpTimelineAccordion = defineComponent({
         "name": isOpen.value ? "accordion-expand" : "accordion-collapse",
         "size": "sm",
         "color": "gray.600",
-        "class": css({
-          my: 1,
-          cursor: "pointer"
-        })
+        "class": classes.icon
       }, null)]), _createVNode("div", {
         "data-pixel-component": "MpTimelineAccordionConnector",
-        "class": css({
-          flexGrow: 1,
-          width: "2px",
-          backgroundColor: !isOpen.value && props.position === "last" ? "transparent" : "gray.100",
-          roundedTop: "full"
-        })
+        "data-position": !isOpen.value && props.position === "last" ? "last" : void 0,
+        "class": classes.bottomConnector
       }, null)]), _createVNode(MpTimelineBody, null, {
         default: () => [_createVNode("div", {
-          "class": css({
-            paddingTop: 1
-          }),
+          "class": classes.title,
           "data-pixel-component": "MpTimelineAccordionTitle"
         }, [_createVNode("p", {
-          "class": css({
-            fontSize: "md",
-            lineHeight: "md",
-            color: "dark",
-            fontWeight: "semibold",
-            letterSpacing: "normal"
-          })
-        }, [_createTextVNode("Label")])])]
+          "class": classes.label
+        }, [_createTextVNode(" "), props.label, _createTextVNode(" ")])])]
       })]), _createVNode(MpAnimateHeight, {
         "isOpen": isOpen.value
       }, _isSlot(cloneTimelineItem) ? cloneTimelineItem : {

package/dist/{chunk-GIZF7OP5.mjs → chunk-GA2OEUXW.mjs}

@@ -1,18 +1,17 @@
 // src/log-item.tsx
 import { createVNode as _createVNode } from "vue";
-import { css } from "@mekari/pixel3-styled-system/css";
 import { defineComponent } from "vue";
+import { timelineLogSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
 var MpTimelinLogItem = defineComponent({
   name: "MpTimelinLogItem",
   setup(_props, {
     slots
   }) {
+    const classes = timelineLogSlotRecipe();
     return () => {
       return _createVNode("li", {
         "data-pixel-component": "MpTimelinLogItem",
-        "class": css({
-          color: "gray.600"
-        })
+        "class": classes.logItem
       }, [slots.default && slots.default()]);
     };
   }

package/dist/{chunk-R27QQWNW.mjs → chunk-ILY3Y465.mjs}

@@ -1,30 +1,29 @@
 import {
   MpTimelineSeparator
-} from "./chunk-EO6SLNZK.mjs";
+} from "./chunk-PFNAOR6K.mjs";
 import {
   MpTimelineBody
-} from "./chunk-F5W3GZXM.mjs";
+} from "./chunk-QHPZK7ZV.mjs";
 import {
   timelineItemProps
 } from "./chunk-3X4C56WA.mjs";
 
 // src/item.tsx
 import { createVNode as _createVNode } from "vue";
-import { css } from "@mekari/pixel3-styled-system/css";
 import { defineComponent } from "vue";
+import { timelineSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
 var MpTimelineItem = defineComponent({
   name: "MpTimelineItem",
   props: timelineItemProps,
   setup(props, {
     slots
   }) {
+    const classes = timelineSlotRecipe();
     return () => {
       return _createVNode("li", {
         "data-pixel-component": "MpTimelineItem",
         "data-position": props.position,
-        "class": css({
-          display: "flex"
-        })
+        "class": classes.item
       }, [_createVNode(MpTimelineSeparator, {
         "position": props.position,
         "status": props.status,

package/dist/{chunk-XJGZTB4V.mjs → chunk-MRPVYAVX.mjs}

@@ -5,9 +5,9 @@ import {
 // src/document.tsx
 import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
 import { MpIcon } from "@mekari/pixel3-icon";
-import { css } from "@mekari/pixel3-styled-system/css";
-import { flex } from "@mekari/pixel3-styled-system/patterns";
 import { defineComponent } from "vue";
+import { timelineDocumentSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+import { isUndef } from "@mekari/pixel3-utils";
 var MpTimelineDocument = defineComponent({
   name: "MpTimelineDocument",
   props: timelineDocumentProps,
@@ -15,26 +15,17 @@ var MpTimelineDocument = defineComponent({
     slots
   }) {
     return () => {
+      const classes = timelineDocumentSlotRecipe({
+        icon: !isUndef(props.icon)
+      });
       return _createVNode("span", {
         "data-pixel-component": "MpTimelineDocument",
-        "class": css({
-          display: "flex",
-          alignItems: "center",
-          paddingX: "3",
-          paddingY: "2",
-          borderRadius: "lg",
-          borderWidth: "1px",
-          borderColor: "gray.100",
-          width: "full"
-        })
+        "class": classes.root
       }, [_createVNode(MpIcon, {
         "name": props.icon,
         "variant": props.iconVariant
       }, null), _createVNode("div", {
-        "class": flex({
-          flexDirection: "column",
-          marginLeft: props.icon ? "3" : "0"
-        })
+        "class": classes.content
       }, [_createVNode("p", {
         "style": {
           overflow: "hidden",
@@ -42,25 +33,11 @@ var MpTimelineDocument = defineComponent({
           "-webkit-box-orient": "vertical",
           "-webkit-line-clamp": 1
         },
-        "class": css({
-          fontSize: "sm",
-          lineHeight: "md",
-          fontWeight: "regular",
-          letterSpacing: "normal",
-          color: "dark"
-        })
+        "class": classes.title
       }, [props.title]), _createVNode("div", {
-        "class": flex({
-          alignItems: "center"
-        })
+        "class": classes.description
       }, [_createVNode("p", {
-        "class": css({
-          fontSize: "sm",
-          lineHeight: "md",
-          fontWeight: "regular",
-          letterSpacing: "normal",
-          color: "gray.400"
-        })
+        "class": classes.fileSize
       }, [props.fileSize, _createTextVNode(" "), slots.default && " - "]), slots.default && slots.default()])])]);
     };
   }

package/dist/{chunk-EO6SLNZK.mjs → chunk-PFNAOR6K.mjs}

@@ -5,32 +5,12 @@ import {
 // src/separator.tsx
 import { createVNode as _createVNode } from "vue";
 import { MpIcon } from "@mekari/pixel3-icon";
-import { css } from "@mekari/pixel3-styled-system/css";
-import { flex } from "@mekari/pixel3-styled-system/patterns";
 import { defineComponent } from "vue";
+import { timelineSeparatorSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
 var MpTimelineSeparator = defineComponent({
   name: "MpTimelineSeparator",
   props: timelineSeparatorProps,
   setup(props) {
-    const classes = {
-      wrapper: flex({
-        flexDirection: "column",
-        alignItems: "center"
-      }),
-      topConnector: css({
-        height: "6px",
-        width: "2px",
-        backgroundColor: props.position === "first" ? "transparent" : "gray.100",
-        roundedBottom: "2px"
-      }),
-      bottomConnector: css({
-        height: "100%",
-        flexGrow: 1,
-        width: "2px",
-        backgroundColor: props.position === "last" ? "transparent" : "gray.100",
-        roundedTop: "2px"
-      })
-    };
     const iconAttrs = {
       approved: {
         name: "done",
@@ -59,12 +39,14 @@ var MpTimelineSeparator = defineComponent({
       }
     };
     return () => {
+      const classes = timelineSeparatorSlotRecipe();
       return _createVNode("div", {
         "data-pixel-component": "MpTimelineSeparator",
-        "class": classes.wrapper
+        "class": classes.root
       }, [_createVNode("div", {
         "data-pixel-component": "MpTimelineConnector",
         "data-connector": "top",
+        "data-position": props.position,
         "class": classes.topConnector
       }, null), _createVNode(MpIcon, {
         "name": props.icon || iconAttrs[props.status].name,
@@ -74,6 +56,7 @@ var MpTimelineSeparator = defineComponent({
       }, null), _createVNode("div", {
         "data-connector": "bottom",
         "data-pixel-component": "MpTimelineConnector",
+        "data-position": props.position,
         "class": classes.bottomConnector
       }, null)]);
     };

package/dist/{chunk-F5W3GZXM.mjs → chunk-QHPZK7ZV.mjs}

@@ -1,21 +1,17 @@
 // src/body.tsx
 import { createVNode as _createVNode } from "vue";
 import { defineComponent } from "vue";
-import { css } from "@mekari/pixel3-styled-system/css";
+import { timelineSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
 var MpTimelineBody = defineComponent({
   name: "MpTimelineBody",
   setup(_props, {
     slots
   }) {
+    const classes = timelineSlotRecipe();
     return () => {
       return _createVNode("div", {
         "data-pixel-component": "MpTimelineBody",
-        "class": css({
-          marginLeft: "3",
-          paddingTop: "6px",
-          paddingBottom: "3",
-          width: "full"
-        })
+        "class": classes.body
       }, [slots.default && slots.default()]);
     };
   }

package/dist/{chunk-HSNDCO4E.mjs → chunk-RBX3CCVL.mjs}

@@ -1,18 +1,17 @@
 // src/content.tsx
 import { createVNode as _createVNode } from "vue";
 import { defineComponent } from "vue";
-import { css } from "@mekari/pixel3-styled-system/css";
+import { timelineSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
 var MpTimelineContent = defineComponent({
   name: "MpTimelineContent",
   setup(_props, {
     slots
   }) {
+    const classes = timelineSlotRecipe();
     return () => {
       return _createVNode("div", {
         "data-pixel-component": "MpTimelineContent",
-        "class": css({
-          paddingTop: 3
-        })
+        "class": classes.content
       }, [slots.default && slots.default()]);
     };
   }

package/dist/{chunk-C3OMXGFW.mjs → chunk-RUNJ5QTL.mjs}

@@ -5,45 +5,30 @@ import {
 // src/log.tsx
 import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
 import { MpIcon } from "@mekari/pixel3-icon";
-import { css } from "@mekari/pixel3-styled-system/css";
-import { flex } from "@mekari/pixel3-styled-system/patterns";
 import { MpAnimateHeight } from "@mekari/pixel3-transition";
 import { defineComponent, ref } from "vue";
+import { timelineLogSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
 var MpTimelineLog = defineComponent({
   name: "MpTimelineLog",
   props: timelineLogProps,
   setup(props, {
     slots
   }) {
+    const classes = timelineLogSlotRecipe();
     const isOpen = ref(props.isOpen);
     return () => {
       return _createVNode("div", {
-        "class": css({
-          display: "flex",
-          flexDirection: "column"
-        })
+        "class": classes.root
       }, [_createVNode("button", {
         "data-pixel-component": "MpTimelineLog",
         "aria-expanded": isOpen.value || void 0,
-        "class": ["group", flex({
-          cursor: "pointer"
-        })],
+        "class": ["group", classes.log],
         "onClick": () => isOpen.value = !isOpen.value
       }, [_createVNode("p", {
-        "class": css({
-          color: "gray.400",
-          _groupHover: {
-            color: "blue.500"
-          }
-        })
+        "class": classes.logText
       }, [_createTextVNode("Change log")]), _createVNode(MpIcon, {
         "name": "caret-down",
-        "class": css({
-          color: "gray.400",
-          _groupHover: {
-            color: "blue.500"
-          }
-        }),
+        "class": classes.logIcon,
         "style": {
           transition: "transform 0.2s",
           transformOrigin: "center",
@@ -52,10 +37,7 @@ var MpTimelineLog = defineComponent({
       }, null)]), _createVNode(MpAnimateHeight, {
         "isOpen": isOpen.value,
         "as": "ul",
-        "class": css({
-          listStyleType: "disc",
-          paddingLeft: 5
-        })
+        "class": classes.content
       }, {
         default: () => [slots.default && slots.default()]
       })]);

package/dist/content.js

@@ -25,18 +25,17 @@ __export(content_exports, {
 module.exports = __toCommonJS(content_exports);
 var import_vue = require("vue");
 var import_vue2 = require("vue");
-var import_css = require("@mekari/pixel3-styled-system/css");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
 var MpTimelineContent = (0, import_vue2.defineComponent)({
   name: "MpTimelineContent",
   setup(_props, {
     slots
   }) {
+    const classes = (0, import_recipes.timelineSlotRecipe)();
     return () => {
       return (0, import_vue.createVNode)("div", {
         "data-pixel-component": "MpTimelineContent",
-        "class": (0, import_css.css)({
-          paddingTop: 3
-        })
+        "class": classes.content
       }, [slots.default && slots.default()]);
     };
   }