@mekari/pixel3-timeline 0.0.16-dev.4 → 0.0.16-dev.6

package/dist/index.js

@@ -75,6 +75,18 @@ var timelineItemProps = {
   },
   iconColor: {
     type: String
+  },
+  isAccordionChild: {
+    type: Boolean,
+    default: false
+  },
+  isHideTopConnector: {
+    type: Boolean,
+    default: false
+  },
+  isHideBottomConnector: {
+    type: Boolean,
+    default: false
   }
 };
 var timelineDocumentProps = {
@@ -120,6 +132,18 @@ var timelineSeparatorProps = {
   },
   iconColor: {
     type: String
+  },
+  isAccordionChild: {
+    type: [Boolean],
+    default: false
+  },
+  isHideTopConnector: {
+    type: Boolean,
+    default: false
+  },
+  isHideBottomConnector: {
+    type: Boolean,
+    default: false
   }
 };
 var timelineLogProps = {
@@ -146,6 +170,7 @@ var getValidChildrens = /* @__PURE__ */ __name((children) => {
   children.forEach((child) => {
     const isVueFragment = typeof child.type === "symbol" && Symbol.keyFor(child.type) === "v-fgt";
     if (isVueFragment) {
+      ;
       child.children.forEach((subChild) => {
         if (isValidChild(subChild))
           validChildrens.push(subChild);
@@ -184,7 +209,9 @@ var MpTimelineAccordion = (0, import_vue4.defineComponent)({
           return "";
         }, "getPosition");
         const node = (0, import_vue4.cloneVNode)(vnode, {
-          position: getPosition(index)
+          position: getPosition(index),
+          // Set true to identify accordion child items
+          isAccordionChild: true
         });
         return node;
       });
@@ -219,7 +246,7 @@ var MpTimelineAccordion = (0, import_vue4.defineComponent)({
           "data-pixel-component": "MpTimelineAccordionTitle"
         }, [(0, import_vue3.createVNode)("p", {
           "class": classes.label
-        }, [(0, import_vue3.createTextVNode)(" "), props.label, (0, import_vue3.createTextVNode)(" ")])])]
+        }, [(0, import_vue3.createTextVNode)(" "), props.label, (0, import_vue3.createTextVNode)(" ")])]), slots["sub-content"] && slots["sub-content"]()]
       })]), (0, import_vue3.createVNode)(import_pixel3_transition.MpAnimateHeight, {
         "isOpen": isOpen.value
       }, _isSlot(cloneTimelineItem) ? cloneTimelineItem : {
@@ -317,6 +344,7 @@ var import_vue11 = require("vue");
 var import_pixel3_icon3 = require("@mekari/pixel3-icon");
 var import_vue12 = require("vue");
 var import_recipes6 = require("@mekari/pixel3-styled-system/recipes");
+var import_css = require("@mekari/pixel3-styled-system/css");
 var MpTimelineSeparator = (0, import_vue12.defineComponent)({
   name: "MpTimelineSeparator",
   props: timelineSeparatorProps,
@@ -350,23 +378,58 @@ var MpTimelineSeparator = (0, import_vue12.defineComponent)({
     };
     return () => {
       const classes = (0, import_recipes6.timelineSeparatorSlotRecipe)();
+      const iconNode = (0, import_vue11.createVNode)(import_pixel3_icon3.MpIcon, {
+        "name": props.icon || iconAttrs[props.status].name,
+        "color": props.iconColor || iconAttrs[props.status].color,
+        "variant": props.iconVariant || iconAttrs[props.status].variant,
+        "size": "sm"
+      }, null);
+      const accordionIconNode = (0, import_vue11.createVNode)("div", {
+        "data-pixel-component": "MpTimelineAccordionIcon",
+        "class": (0, import_css.css)({
+          display: "flex",
+          alignItems: "center",
+          height: "6"
+        })
+      }, [(0, import_vue11.createVNode)("div", {
+        "data-pixel-component": "MpTimelineConnector",
+        "class": (0, import_css.css)({
+          height: "100%",
+          width: "2px",
+          backgroundColor: "gray.100",
+          _nextTheme: {
+            backgroundColor: "border.default"
+          }
+        })
+      }, null), (0, import_vue11.createVNode)("div", {
+        "data-pixel-component": "MpTimelineConnector",
+        "class": (0, import_css.css)({
+          height: "2px",
+          width: "16px",
+          backgroundColor: "gray.100",
+          marginRight: "1.5",
+          _nextTheme: {
+            backgroundColor: "border.default"
+          }
+        })
+      }, null), iconNode]);
       return (0, import_vue11.createVNode)("div", {
         "data-pixel-component": "MpTimelineSeparator",
+        "data-accordion-child": props.isAccordionChild || void 0,
         "class": classes.root
       }, [(0, import_vue11.createVNode)("div", {
         "data-pixel-component": "MpTimelineConnector",
+        "data-accordion-child": props.isAccordionChild || void 0,
         "data-connector": "top",
         "data-position": props.position,
+        "data-hide": props.isHideTopConnector || void 0,
         "class": classes.topConnector
-      }, null), (0, import_vue11.createVNode)(import_pixel3_icon3.MpIcon, {
-        "name": props.icon || iconAttrs[props.status].name,
-        "color": props.iconColor || iconAttrs[props.status].color,
-        "variant": props.iconVariant || iconAttrs[props.status].variant,
-        "size": "sm"
-      }, null), (0, import_vue11.createVNode)("div", {
+      }, null), props.isAccordionChild ? accordionIconNode : iconNode, (0, import_vue11.createVNode)("div", {
         "data-connector": "bottom",
         "data-pixel-component": "MpTimelineConnector",
+        "data-accordion-child": props.isAccordionChild || void 0,
         "data-position": props.position,
+        "data-hide": props.isHideBottomConnector || void 0,
         "class": classes.bottomConnector
       }, null)]);
     };
@@ -392,7 +455,10 @@ var MpTimelineItem = (0, import_vue14.defineComponent)({
         "status": props.status,
         "icon": props.icon,
         "iconVariant": props.iconVariant,
-        "iconColor": props.iconColor
+        "iconColor": props.iconColor,
+        "isAccordionChild": props.isAccordionChild,
+        "isHideTopConnector": props.isHideTopConnector,
+        "isHideBottomConnector": props.isHideBottomConnector
       }, null), (0, import_vue13.createVNode)(MpTimelineBody, null, {
         default: () => [slots.default && slots.default()]
       })]);
@@ -422,17 +488,18 @@ var MpTimelineLog = (0, import_vue16.defineComponent)({
         "aria-expanded": isOpen.value || void 0,
         "class": ["group", classes.log],
         "onClick": () => isOpen.value = !isOpen.value
-      }, [(0, import_vue15.createVNode)("p", {
-        "class": classes.logText
-      }, [(0, import_vue15.createTextVNode)("Change log")]), (0, import_vue15.createVNode)(import_pixel3_icon4.MpIcon, {
-        "name": "caret-down",
+      }, [(0, import_vue15.createVNode)(import_pixel3_icon4.MpIcon, {
+        "name": "chevrons-right",
+        "size": "sm",
         "class": classes.logIcon,
         "style": {
           transition: "transform 0.2s",
           transformOrigin: "center",
-          transform: isOpen.value ? "rotate(-180deg)" : ""
+          transform: isOpen.value ? "rotate(90deg)" : ""
         }
-      }, null)]), (0, import_vue15.createVNode)(import_pixel3_transition2.MpAnimateHeight, {
+      }, null), (0, import_vue15.createVNode)("p", {
+        "class": classes.logText
+      }, [(0, import_vue15.createTextVNode)("Change log")])]), (0, import_vue15.createVNode)(import_pixel3_transition2.MpAnimateHeight, {
         "isOpen": isOpen.value,
         "as": "ul",
         "class": classes.content

package/dist/index.mjs

@@ -1,17 +1,17 @@
 import {
   MpTimelineLog
-} from "./chunk-RUNJ5QTL.mjs";
+} from "./chunk-OBC2XP5K.mjs";
 import {
   MpTimeline
-} from "./chunk-5IYYKVWX.mjs";
+} from "./chunk-SU4SZKU2.mjs";
 import {
   MpTimelineTitle
 } from "./chunk-WXCDLWFJ.mjs";
 import "./chunk-7A5VKGA6.mjs";
 import {
   MpTimelineAccordion
-} from "./chunk-QW4HJJLV.mjs";
-import "./chunk-RUUECJKV.mjs";
+} from "./chunk-OZAKKUIV.mjs";
+import "./chunk-GXMYD3BT.mjs";
 import {
   MpTimelineCaption
 } from "./chunk-4PZZ5B6I.mjs";
@@ -20,13 +20,13 @@ import {
 } from "./chunk-RBX3CCVL.mjs";
 import {
   MpTimelineDocument
-} from "./chunk-MRPVYAVX.mjs";
+} from "./chunk-AKXCTWK6.mjs";
 import {
   MpTimelineItem
-} from "./chunk-ILY3Y465.mjs";
-import "./chunk-PFNAOR6K.mjs";
+} from "./chunk-HIYFHIIF.mjs";
+import "./chunk-H43TPNE5.mjs";
 import "./chunk-QHPZK7ZV.mjs";
-import "./chunk-3X4C56WA.mjs";
+import "./chunk-NQRU4NSD.mjs";
 import {
   MpTimelinLogItem
 } from "./chunk-GA2OEUXW.mjs";

package/dist/item.d.mts

@@ -11,7 +11,7 @@ declare const MpTimelineItem: vue.DefineComponent<{
         default: string;
     };
     icon: {
-        type: vue.PropType<"function" | "filter" | "done" | "caption" | "code" | "img" | "input" | "link" | "progress" | "textarea" | "time" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-available" | "stock-running-out" | "pdf-document" | "image-document" | "excel-document" | "word-document" | "university-outline" | "task-on-progress" | "task-done" | "add" | "minus" | "text-editor-align-center" | "text-editor-align-justify" | "text-editor-align-left" | "text-editor-align-right" | "text-editor-banner" | "text-editor-bold" | "text-editor-bullet-list" | "text-editor-button" | "text-editor-decrease-indent" | "text-editor-divider" | "text-editor-footer" | "text-editor-increase-indent" | "text-editor-italic" | "text-editor-link" | "text-editor-logo" | "text-editor-mention" | "text-editor-move" | "text-editor-number-list" | "text-editor-paragraph" | "text-editor-reset-format" | "text-editor-strike" | "text-editor-text-color" | "text-editor-text" | "text-editor-underline" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "checkbox-checklist" | "checkbox-partial" | "Axis" | "DJP" | "Facebook-Messenger" | "Google" | "Gopay" | "Indosat" | "Instagram" | "JCB" | "Line" | "Livechat" | "Mastercard" | "OVO" | "PLN-Token" | "PLN" | "Shopee" | "Shopeepay" | "Smartfren" | "Telegram" | "Telkomsel" | "Tokopedia" | "Tri" | "Visa" | "WhatsApp" | "XL" | "airene-black" | "airene-brand" | "airene-outline" | "capital-black" | "capital-brand" | "capital-outline" | "mchat-black" | "mchat-brand" | "mchat-outline" | "expense-black" | "expense-brand" | "expense-outline" | "flex-black" | "flex-brand" | "flex-outline" | "insight-black" | "insight-brand" | "insight-outline" | "jurnal-black" | "jurnal-brand" | "jurnal-outline" | "klikpajak-black" | "klikpajak-brand" | "klikpajak-outline" | "mekari-black" | "mekari-brand" | "mekari-outline" | "pay-black" | "pay-brand" | "pay-outline" | "qontak-black" | "qontak-brand" | "qontak-outline" | "sign-black" | "sign-brand" | "sign-outline" | "stream-black" | "stream-brand" | "stream-outline" | "talenta-black" | "talenta-brand" | "talenta-outline" | "university-black" | "university-brand" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "full-screen" | "indicator-circle" | "indicator-square" | "loader-" | "minimize" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending" | "priority-low" | "priority-medium" | "priority-high" | "arrows-down" | "arrows-left" | "arrows-right" | "arrows-up" | "caret-down" | "caret-right" | "caret-up" | "chevrons-down" | "chevrons-forward" | "chevrons-left" | "chevrons-previous" | "chevrons-right" | "chevrons-up" | "X" | "error" | "help" | "info" | "pending" | "warning-circular" | "warning-triangle" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "action" | "add-ons" | "ai-assist" | "api" | "application" | "assets" | "attendee" | "bank" | "batch" | "billing" | "block-user" | "book" | "briefcase" | "bulk-send" | "bulk-upload" | "business-trip" | "broadcast" | "brush" | "calculator" | "cart" | "cash-advance" | "cash-in" | "cash-out" | "categories" | "certificate" | "channel" | "chart-of-account" | "chat" | "chatbot" | "cloud" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "condition" | "connected_apps" | "contact" | "dashboard" | "data-connect" | "database" | "design" | "dislike" | "decrease-kpi" | "desktop" | "document-sent" | "draft" | "education" | "email-sent" | "emeterai" | "employee" | "employee-not-found" | "employment" | "envelope" | "esignature" | "evaluation" | "expenses" | "face-recognition" | "file-change" | "file-transfer" | "finance" | "find-me" | "flag" | "fulfillment" | "gift" | "goal" | "hierarchy" | "home" | "hospital" | "inbox" | "increase-kpi" | "initials" | "join-invoice" | "key" | "lifestyle" | "like" | "loan" | "location" | "log" | "meeting-room" | "mekari_pay" | "migrate" | "mobile" | "mobile-postpaid" | "monitor-message" | "muted" | "notification" | "organizations" | "organizations-h" | "organizations-v" | "overtime" | "partner" | "password" | "payroll" | "payslip" | "people" | "performance" | "phone" | "pipeline" | "place-fields" | "plans" | "play-video" | "plugin-builder" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "succesion-plan" | "talent-management" | "theme" | "team" | "timer" | "tips" | "today" | "transfer" | "truck" | "unlock" | "upgrade" | "user-response" | "virtual-account" | "voucher" | "wallet" | "warehouse" | "whatsapp-flat" | "wifi" | "workflow" | "blank" | "copy" | "doc" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "img-break" | "pdf" | "zip" | "add-circular" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "help-centre" | "hide" | "magic" | "minus-circular" | "newtab" | "number-five" | "paint-bucket" | "pause" | "pin" | "redo" | "refresh" | "reply" | "rotate-left" | "rotate-right" | "search" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-field-2" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out">;
+        type: vue.PropType<"function" | "filter" | "done" | "caption" | "code" | "img" | "input" | "link" | "progress" | "textarea" | "time" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-available" | "stock-running-out" | "pdf-document" | "image-document" | "excel-document" | "word-document" | "university-outline" | "task-on-progress" | "task-done" | "add" | "minus" | "text-editor-align-center" | "text-editor-align-justify" | "text-editor-align-left" | "text-editor-align-right" | "text-editor-banner" | "text-editor-bold" | "text-editor-bullet-list" | "text-editor-button" | "text-editor-decrease-indent" | "text-editor-divider" | "text-editor-footer" | "text-editor-increase-indent" | "text-editor-italic" | "text-editor-link" | "text-editor-logo" | "text-editor-mention" | "text-editor-move" | "text-editor-number-list" | "text-editor-paragraph" | "text-editor-reset-format" | "text-editor-strike" | "text-editor-text-color" | "text-editor-text" | "text-editor-underline" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "checkbox-checklist" | "checkbox-partial" | "Axis" | "DJP" | "Facebook-Messenger" | "Google" | "Gopay" | "Indosat" | "Instagram" | "JCB" | "Line" | "Livechat" | "Mastercard" | "OVO" | "PLN-Token" | "PLN" | "Shopee" | "Shopeepay" | "Smartfren" | "Telegram" | "Telkomsel" | "Tokopedia" | "Tri" | "Visa" | "WhatsApp" | "XL" | "airene-black" | "airene-brand" | "airene-outline" | "capital-black" | "capital-brand" | "capital-outline" | "mchat-black" | "mchat-brand" | "mchat-outline" | "expense-black" | "expense-brand" | "expense-outline" | "flex-black" | "flex-brand" | "flex-outline" | "insight-black" | "insight-brand" | "insight-outline" | "jurnal-black" | "jurnal-brand" | "jurnal-outline" | "klikpajak-black" | "klikpajak-brand" | "klikpajak-outline" | "mekari-black" | "mekari-brand" | "mekari-outline" | "pay-black" | "pay-brand" | "pay-outline" | "qontak-black" | "qontak-brand" | "qontak-outline" | "sign-black" | "sign-brand" | "sign-outline" | "stream-black" | "stream-brand" | "stream-outline" | "talenta-black" | "talenta-brand" | "talenta-outline" | "university-black" | "university-brand" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "full-screen" | "indicator-circle" | "indicator-square" | "loader-" | "minimize" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending" | "priority-low" | "priority-medium" | "priority-high" | "arrows-down" | "arrows-left" | "arrows-right" | "arrows-up" | "caret-down" | "caret-right" | "caret-up" | "chevrons-down" | "chevrons-forward" | "chevrons-left" | "chevrons-previous" | "chevrons-right" | "chevrons-up" | "X" | "error" | "help" | "info" | "pending" | "warning-circular" | "warning-triangle" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "action" | "add-ons" | "ai-assist" | "api" | "application" | "assets" | "attendee" | "bank" | "batch" | "billing" | "block-user" | "book" | "briefcase" | "bulk-send" | "bulk-upload" | "business-trip" | "broadcast" | "brush" | "calculator" | "cart" | "cash-advance" | "cash-in" | "cash-out" | "categories" | "certificate" | "channel" | "chart-of-account" | "chat" | "chatbot" | "cloud" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "condition" | "connected_apps" | "contact" | "dashboard" | "data-connect" | "database" | "design" | "dislike" | "decrease-kpi" | "desktop" | "document-sent" | "draft" | "education" | "email-sent" | "emeterai" | "employee" | "employee-not-found" | "employment" | "envelope" | "esignature" | "evaluation" | "expenses" | "face-recognition" | "file-change" | "file-transfer" | "finance" | "find-me" | "flag" | "fulfillment" | "gift" | "goal" | "hierarchy" | "home" | "hospital" | "inbox" | "increase-kpi" | "initials" | "join-invoice" | "key" | "lifestyle" | "like" | "loan" | "location" | "log" | "meeting-room" | "mekari_pay" | "migrate" | "mobile" | "mobile-postpaid" | "monitor-message" | "muted" | "notification" | "organizations" | "organizations-h" | "organizations-v" | "overtime" | "partner" | "password" | "payroll" | "payslip" | "people" | "performance" | "phone" | "pipeline" | "place-fields" | "plans" | "play-video" | "plugin-builder" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "recall" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "succesion-plan" | "talent-management" | "theme" | "team" | "timer" | "tips" | "today" | "transfer" | "truck" | "unlock" | "upgrade" | "user-response" | "variable" | "virtual-account" | "voucher" | "wallet" | "warehouse" | "whatsapp-flat" | "wifi" | "workflow" | "blank" | "copy" | "doc" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "img-break" | "pdf" | "zip" | "add-circular" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "help-centre" | "hide" | "magic" | "minus-circular" | "newtab" | "number-five" | "paint-bucket" | "pause" | "pin" | "redo" | "refresh" | "reply" | "rotate-left" | "rotate-right" | "search" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-field-2" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out">;
     };
     iconVariant: {
         type: vue.PropType<TimelineIconVariant>;
@@ -19,6 +19,18 @@ declare const MpTimelineItem: vue.DefineComponent<{
     iconColor: {
         type: vue.PropType<string>;
     };
+    isAccordionChild: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isHideTopConnector: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isHideBottomConnector: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     position: {
         type: vue.PropType<TimelinePosition>;
@@ -28,7 +40,7 @@ declare const MpTimelineItem: vue.DefineComponent<{
         default: string;
     };
     icon: {
-        type: vue.PropType<"function" | "filter" | "done" | "caption" | "code" | "img" | "input" | "link" | "progress" | "textarea" | "time" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-available" | "stock-running-out" | "pdf-document" | "image-document" | "excel-document" | "word-document" | "university-outline" | "task-on-progress" | "task-done" | "add" | "minus" | "text-editor-align-center" | "text-editor-align-justify" | "text-editor-align-left" | "text-editor-align-right" | "text-editor-banner" | "text-editor-bold" | "text-editor-bullet-list" | "text-editor-button" | "text-editor-decrease-indent" | "text-editor-divider" | "text-editor-footer" | "text-editor-increase-indent" | "text-editor-italic" | "text-editor-link" | "text-editor-logo" | "text-editor-mention" | "text-editor-move" | "text-editor-number-list" | "text-editor-paragraph" | "text-editor-reset-format" | "text-editor-strike" | "text-editor-text-color" | "text-editor-text" | "text-editor-underline" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "checkbox-checklist" | "checkbox-partial" | "Axis" | "DJP" | "Facebook-Messenger" | "Google" | "Gopay" | "Indosat" | "Instagram" | "JCB" | "Line" | "Livechat" | "Mastercard" | "OVO" | "PLN-Token" | "PLN" | "Shopee" | "Shopeepay" | "Smartfren" | "Telegram" | "Telkomsel" | "Tokopedia" | "Tri" | "Visa" | "WhatsApp" | "XL" | "airene-black" | "airene-brand" | "airene-outline" | "capital-black" | "capital-brand" | "capital-outline" | "mchat-black" | "mchat-brand" | "mchat-outline" | "expense-black" | "expense-brand" | "expense-outline" | "flex-black" | "flex-brand" | "flex-outline" | "insight-black" | "insight-brand" | "insight-outline" | "jurnal-black" | "jurnal-brand" | "jurnal-outline" | "klikpajak-black" | "klikpajak-brand" | "klikpajak-outline" | "mekari-black" | "mekari-brand" | "mekari-outline" | "pay-black" | "pay-brand" | "pay-outline" | "qontak-black" | "qontak-brand" | "qontak-outline" | "sign-black" | "sign-brand" | "sign-outline" | "stream-black" | "stream-brand" | "stream-outline" | "talenta-black" | "talenta-brand" | "talenta-outline" | "university-black" | "university-brand" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "full-screen" | "indicator-circle" | "indicator-square" | "loader-" | "minimize" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending" | "priority-low" | "priority-medium" | "priority-high" | "arrows-down" | "arrows-left" | "arrows-right" | "arrows-up" | "caret-down" | "caret-right" | "caret-up" | "chevrons-down" | "chevrons-forward" | "chevrons-left" | "chevrons-previous" | "chevrons-right" | "chevrons-up" | "X" | "error" | "help" | "info" | "pending" | "warning-circular" | "warning-triangle" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "action" | "add-ons" | "ai-assist" | "api" | "application" | "assets" | "attendee" | "bank" | "batch" | "billing" | "block-user" | "book" | "briefcase" | "bulk-send" | "bulk-upload" | "business-trip" | "broadcast" | "brush" | "calculator" | "cart" | "cash-advance" | "cash-in" | "cash-out" | "categories" | "certificate" | "channel" | "chart-of-account" | "chat" | "chatbot" | "cloud" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "condition" | "connected_apps" | "contact" | "dashboard" | "data-connect" | "database" | "design" | "dislike" | "decrease-kpi" | "desktop" | "document-sent" | "draft" | "education" | "email-sent" | "emeterai" | "employee" | "employee-not-found" | "employment" | "envelope" | "esignature" | "evaluation" | "expenses" | "face-recognition" | "file-change" | "file-transfer" | "finance" | "find-me" | "flag" | "fulfillment" | "gift" | "goal" | "hierarchy" | "home" | "hospital" | "inbox" | "increase-kpi" | "initials" | "join-invoice" | "key" | "lifestyle" | "like" | "loan" | "location" | "log" | "meeting-room" | "mekari_pay" | "migrate" | "mobile" | "mobile-postpaid" | "monitor-message" | "muted" | "notification" | "organizations" | "organizations-h" | "organizations-v" | "overtime" | "partner" | "password" | "payroll" | "payslip" | "people" | "performance" | "phone" | "pipeline" | "place-fields" | "plans" | "play-video" | "plugin-builder" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "succesion-plan" | "talent-management" | "theme" | "team" | "timer" | "tips" | "today" | "transfer" | "truck" | "unlock" | "upgrade" | "user-response" | "virtual-account" | "voucher" | "wallet" | "warehouse" | "whatsapp-flat" | "wifi" | "workflow" | "blank" | "copy" | "doc" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "img-break" | "pdf" | "zip" | "add-circular" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "help-centre" | "hide" | "magic" | "minus-circular" | "newtab" | "number-five" | "paint-bucket" | "pause" | "pin" | "redo" | "refresh" | "reply" | "rotate-left" | "rotate-right" | "search" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-field-2" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out">;
+        type: vue.PropType<"function" | "filter" | "done" | "caption" | "code" | "img" | "input" | "link" | "progress" | "textarea" | "time" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-available" | "stock-running-out" | "pdf-document" | "image-document" | "excel-document" | "word-document" | "university-outline" | "task-on-progress" | "task-done" | "add" | "minus" | "text-editor-align-center" | "text-editor-align-justify" | "text-editor-align-left" | "text-editor-align-right" | "text-editor-banner" | "text-editor-bold" | "text-editor-bullet-list" | "text-editor-button" | "text-editor-decrease-indent" | "text-editor-divider" | "text-editor-footer" | "text-editor-increase-indent" | "text-editor-italic" | "text-editor-link" | "text-editor-logo" | "text-editor-mention" | "text-editor-move" | "text-editor-number-list" | "text-editor-paragraph" | "text-editor-reset-format" | "text-editor-strike" | "text-editor-text-color" | "text-editor-text" | "text-editor-underline" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "checkbox-checklist" | "checkbox-partial" | "Axis" | "DJP" | "Facebook-Messenger" | "Google" | "Gopay" | "Indosat" | "Instagram" | "JCB" | "Line" | "Livechat" | "Mastercard" | "OVO" | "PLN-Token" | "PLN" | "Shopee" | "Shopeepay" | "Smartfren" | "Telegram" | "Telkomsel" | "Tokopedia" | "Tri" | "Visa" | "WhatsApp" | "XL" | "airene-black" | "airene-brand" | "airene-outline" | "capital-black" | "capital-brand" | "capital-outline" | "mchat-black" | "mchat-brand" | "mchat-outline" | "expense-black" | "expense-brand" | "expense-outline" | "flex-black" | "flex-brand" | "flex-outline" | "insight-black" | "insight-brand" | "insight-outline" | "jurnal-black" | "jurnal-brand" | "jurnal-outline" | "klikpajak-black" | "klikpajak-brand" | "klikpajak-outline" | "mekari-black" | "mekari-brand" | "mekari-outline" | "pay-black" | "pay-brand" | "pay-outline" | "qontak-black" | "qontak-brand" | "qontak-outline" | "sign-black" | "sign-brand" | "sign-outline" | "stream-black" | "stream-brand" | "stream-outline" | "talenta-black" | "talenta-brand" | "talenta-outline" | "university-black" | "university-brand" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "full-screen" | "indicator-circle" | "indicator-square" | "loader-" | "minimize" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending" | "priority-low" | "priority-medium" | "priority-high" | "arrows-down" | "arrows-left" | "arrows-right" | "arrows-up" | "caret-down" | "caret-right" | "caret-up" | "chevrons-down" | "chevrons-forward" | "chevrons-left" | "chevrons-previous" | "chevrons-right" | "chevrons-up" | "X" | "error" | "help" | "info" | "pending" | "warning-circular" | "warning-triangle" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "action" | "add-ons" | "ai-assist" | "api" | "application" | "assets" | "attendee" | "bank" | "batch" | "billing" | "block-user" | "book" | "briefcase" | "bulk-send" | "bulk-upload" | "business-trip" | "broadcast" | "brush" | "calculator" | "cart" | "cash-advance" | "cash-in" | "cash-out" | "categories" | "certificate" | "channel" | "chart-of-account" | "chat" | "chatbot" | "cloud" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "condition" | "connected_apps" | "contact" | "dashboard" | "data-connect" | "database" | "design" | "dislike" | "decrease-kpi" | "desktop" | "document-sent" | "draft" | "education" | "email-sent" | "emeterai" | "employee" | "employee-not-found" | "employment" | "envelope" | "esignature" | "evaluation" | "expenses" | "face-recognition" | "file-change" | "file-transfer" | "finance" | "find-me" | "flag" | "fulfillment" | "gift" | "goal" | "hierarchy" | "home" | "hospital" | "inbox" | "increase-kpi" | "initials" | "join-invoice" | "key" | "lifestyle" | "like" | "loan" | "location" | "log" | "meeting-room" | "mekari_pay" | "migrate" | "mobile" | "mobile-postpaid" | "monitor-message" | "muted" | "notification" | "organizations" | "organizations-h" | "organizations-v" | "overtime" | "partner" | "password" | "payroll" | "payslip" | "people" | "performance" | "phone" | "pipeline" | "place-fields" | "plans" | "play-video" | "plugin-builder" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "recall" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "succesion-plan" | "talent-management" | "theme" | "team" | "timer" | "tips" | "today" | "transfer" | "truck" | "unlock" | "upgrade" | "user-response" | "variable" | "virtual-account" | "voucher" | "wallet" | "warehouse" | "whatsapp-flat" | "wifi" | "workflow" | "blank" | "copy" | "doc" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "img-break" | "pdf" | "zip" | "add-circular" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "help-centre" | "hide" | "magic" | "minus-circular" | "newtab" | "number-five" | "paint-bucket" | "pause" | "pin" | "redo" | "refresh" | "reply" | "rotate-left" | "rotate-right" | "search" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-field-2" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out">;
     };
     iconVariant: {
         type: vue.PropType<TimelineIconVariant>;
@@ -36,8 +48,23 @@ declare const MpTimelineItem: vue.DefineComponent<{
     iconColor: {
         type: vue.PropType<string>;
     };
+    isAccordionChild: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isHideTopConnector: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isHideBottomConnector: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
 }>>, {
+    isAccordionChild: boolean;
     status: TimelineStatus;
+    isHideTopConnector: boolean;
+    isHideBottomConnector: boolean;
 }, {}>;
 
 export { MpTimelineItem };

package/dist/item.d.ts

@@ -11,7 +11,7 @@ declare const MpTimelineItem: vue.DefineComponent<{
         default: string;
     };
     icon: {
-        type: vue.PropType<"function" | "filter" | "done" | "caption" | "code" | "img" | "input" | "link" | "progress" | "textarea" | "time" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-available" | "stock-running-out" | "pdf-document" | "image-document" | "excel-document" | "word-document" | "university-outline" | "task-on-progress" | "task-done" | "add" | "minus" | "text-editor-align-center" | "text-editor-align-justify" | "text-editor-align-left" | "text-editor-align-right" | "text-editor-banner" | "text-editor-bold" | "text-editor-bullet-list" | "text-editor-button" | "text-editor-decrease-indent" | "text-editor-divider" | "text-editor-footer" | "text-editor-increase-indent" | "text-editor-italic" | "text-editor-link" | "text-editor-logo" | "text-editor-mention" | "text-editor-move" | "text-editor-number-list" | "text-editor-paragraph" | "text-editor-reset-format" | "text-editor-strike" | "text-editor-text-color" | "text-editor-text" | "text-editor-underline" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "checkbox-checklist" | "checkbox-partial" | "Axis" | "DJP" | "Facebook-Messenger" | "Google" | "Gopay" | "Indosat" | "Instagram" | "JCB" | "Line" | "Livechat" | "Mastercard" | "OVO" | "PLN-Token" | "PLN" | "Shopee" | "Shopeepay" | "Smartfren" | "Telegram" | "Telkomsel" | "Tokopedia" | "Tri" | "Visa" | "WhatsApp" | "XL" | "airene-black" | "airene-brand" | "airene-outline" | "capital-black" | "capital-brand" | "capital-outline" | "mchat-black" | "mchat-brand" | "mchat-outline" | "expense-black" | "expense-brand" | "expense-outline" | "flex-black" | "flex-brand" | "flex-outline" | "insight-black" | "insight-brand" | "insight-outline" | "jurnal-black" | "jurnal-brand" | "jurnal-outline" | "klikpajak-black" | "klikpajak-brand" | "klikpajak-outline" | "mekari-black" | "mekari-brand" | "mekari-outline" | "pay-black" | "pay-brand" | "pay-outline" | "qontak-black" | "qontak-brand" | "qontak-outline" | "sign-black" | "sign-brand" | "sign-outline" | "stream-black" | "stream-brand" | "stream-outline" | "talenta-black" | "talenta-brand" | "talenta-outline" | "university-black" | "university-brand" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "full-screen" | "indicator-circle" | "indicator-square" | "loader-" | "minimize" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending" | "priority-low" | "priority-medium" | "priority-high" | "arrows-down" | "arrows-left" | "arrows-right" | "arrows-up" | "caret-down" | "caret-right" | "caret-up" | "chevrons-down" | "chevrons-forward" | "chevrons-left" | "chevrons-previous" | "chevrons-right" | "chevrons-up" | "X" | "error" | "help" | "info" | "pending" | "warning-circular" | "warning-triangle" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "action" | "add-ons" | "ai-assist" | "api" | "application" | "assets" | "attendee" | "bank" | "batch" | "billing" | "block-user" | "book" | "briefcase" | "bulk-send" | "bulk-upload" | "business-trip" | "broadcast" | "brush" | "calculator" | "cart" | "cash-advance" | "cash-in" | "cash-out" | "categories" | "certificate" | "channel" | "chart-of-account" | "chat" | "chatbot" | "cloud" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "condition" | "connected_apps" | "contact" | "dashboard" | "data-connect" | "database" | "design" | "dislike" | "decrease-kpi" | "desktop" | "document-sent" | "draft" | "education" | "email-sent" | "emeterai" | "employee" | "employee-not-found" | "employment" | "envelope" | "esignature" | "evaluation" | "expenses" | "face-recognition" | "file-change" | "file-transfer" | "finance" | "find-me" | "flag" | "fulfillment" | "gift" | "goal" | "hierarchy" | "home" | "hospital" | "inbox" | "increase-kpi" | "initials" | "join-invoice" | "key" | "lifestyle" | "like" | "loan" | "location" | "log" | "meeting-room" | "mekari_pay" | "migrate" | "mobile" | "mobile-postpaid" | "monitor-message" | "muted" | "notification" | "organizations" | "organizations-h" | "organizations-v" | "overtime" | "partner" | "password" | "payroll" | "payslip" | "people" | "performance" | "phone" | "pipeline" | "place-fields" | "plans" | "play-video" | "plugin-builder" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "succesion-plan" | "talent-management" | "theme" | "team" | "timer" | "tips" | "today" | "transfer" | "truck" | "unlock" | "upgrade" | "user-response" | "virtual-account" | "voucher" | "wallet" | "warehouse" | "whatsapp-flat" | "wifi" | "workflow" | "blank" | "copy" | "doc" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "img-break" | "pdf" | "zip" | "add-circular" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "help-centre" | "hide" | "magic" | "minus-circular" | "newtab" | "number-five" | "paint-bucket" | "pause" | "pin" | "redo" | "refresh" | "reply" | "rotate-left" | "rotate-right" | "search" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-field-2" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out">;
+        type: vue.PropType<"function" | "filter" | "done" | "caption" | "code" | "img" | "input" | "link" | "progress" | "textarea" | "time" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-available" | "stock-running-out" | "pdf-document" | "image-document" | "excel-document" | "word-document" | "university-outline" | "task-on-progress" | "task-done" | "add" | "minus" | "text-editor-align-center" | "text-editor-align-justify" | "text-editor-align-left" | "text-editor-align-right" | "text-editor-banner" | "text-editor-bold" | "text-editor-bullet-list" | "text-editor-button" | "text-editor-decrease-indent" | "text-editor-divider" | "text-editor-footer" | "text-editor-increase-indent" | "text-editor-italic" | "text-editor-link" | "text-editor-logo" | "text-editor-mention" | "text-editor-move" | "text-editor-number-list" | "text-editor-paragraph" | "text-editor-reset-format" | "text-editor-strike" | "text-editor-text-color" | "text-editor-text" | "text-editor-underline" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "checkbox-checklist" | "checkbox-partial" | "Axis" | "DJP" | "Facebook-Messenger" | "Google" | "Gopay" | "Indosat" | "Instagram" | "JCB" | "Line" | "Livechat" | "Mastercard" | "OVO" | "PLN-Token" | "PLN" | "Shopee" | "Shopeepay" | "Smartfren" | "Telegram" | "Telkomsel" | "Tokopedia" | "Tri" | "Visa" | "WhatsApp" | "XL" | "airene-black" | "airene-brand" | "airene-outline" | "capital-black" | "capital-brand" | "capital-outline" | "mchat-black" | "mchat-brand" | "mchat-outline" | "expense-black" | "expense-brand" | "expense-outline" | "flex-black" | "flex-brand" | "flex-outline" | "insight-black" | "insight-brand" | "insight-outline" | "jurnal-black" | "jurnal-brand" | "jurnal-outline" | "klikpajak-black" | "klikpajak-brand" | "klikpajak-outline" | "mekari-black" | "mekari-brand" | "mekari-outline" | "pay-black" | "pay-brand" | "pay-outline" | "qontak-black" | "qontak-brand" | "qontak-outline" | "sign-black" | "sign-brand" | "sign-outline" | "stream-black" | "stream-brand" | "stream-outline" | "talenta-black" | "talenta-brand" | "talenta-outline" | "university-black" | "university-brand" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "full-screen" | "indicator-circle" | "indicator-square" | "loader-" | "minimize" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending" | "priority-low" | "priority-medium" | "priority-high" | "arrows-down" | "arrows-left" | "arrows-right" | "arrows-up" | "caret-down" | "caret-right" | "caret-up" | "chevrons-down" | "chevrons-forward" | "chevrons-left" | "chevrons-previous" | "chevrons-right" | "chevrons-up" | "X" | "error" | "help" | "info" | "pending" | "warning-circular" | "warning-triangle" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "action" | "add-ons" | "ai-assist" | "api" | "application" | "assets" | "attendee" | "bank" | "batch" | "billing" | "block-user" | "book" | "briefcase" | "bulk-send" | "bulk-upload" | "business-trip" | "broadcast" | "brush" | "calculator" | "cart" | "cash-advance" | "cash-in" | "cash-out" | "categories" | "certificate" | "channel" | "chart-of-account" | "chat" | "chatbot" | "cloud" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "condition" | "connected_apps" | "contact" | "dashboard" | "data-connect" | "database" | "design" | "dislike" | "decrease-kpi" | "desktop" | "document-sent" | "draft" | "education" | "email-sent" | "emeterai" | "employee" | "employee-not-found" | "employment" | "envelope" | "esignature" | "evaluation" | "expenses" | "face-recognition" | "file-change" | "file-transfer" | "finance" | "find-me" | "flag" | "fulfillment" | "gift" | "goal" | "hierarchy" | "home" | "hospital" | "inbox" | "increase-kpi" | "initials" | "join-invoice" | "key" | "lifestyle" | "like" | "loan" | "location" | "log" | "meeting-room" | "mekari_pay" | "migrate" | "mobile" | "mobile-postpaid" | "monitor-message" | "muted" | "notification" | "organizations" | "organizations-h" | "organizations-v" | "overtime" | "partner" | "password" | "payroll" | "payslip" | "people" | "performance" | "phone" | "pipeline" | "place-fields" | "plans" | "play-video" | "plugin-builder" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "recall" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "succesion-plan" | "talent-management" | "theme" | "team" | "timer" | "tips" | "today" | "transfer" | "truck" | "unlock" | "upgrade" | "user-response" | "variable" | "virtual-account" | "voucher" | "wallet" | "warehouse" | "whatsapp-flat" | "wifi" | "workflow" | "blank" | "copy" | "doc" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "img-break" | "pdf" | "zip" | "add-circular" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "help-centre" | "hide" | "magic" | "minus-circular" | "newtab" | "number-five" | "paint-bucket" | "pause" | "pin" | "redo" | "refresh" | "reply" | "rotate-left" | "rotate-right" | "search" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-field-2" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out">;
     };
     iconVariant: {
         type: vue.PropType<TimelineIconVariant>;
@@ -19,6 +19,18 @@ declare const MpTimelineItem: vue.DefineComponent<{
     iconColor: {
         type: vue.PropType<string>;
     };
+    isAccordionChild: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isHideTopConnector: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isHideBottomConnector: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     position: {
         type: vue.PropType<TimelinePosition>;
@@ -28,7 +40,7 @@ declare const MpTimelineItem: vue.DefineComponent<{
         default: string;
     };
     icon: {
-        type: vue.PropType<"function" | "filter" | "done" | "caption" | "code" | "img" | "input" | "link" | "progress" | "textarea" | "time" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-available" | "stock-running-out" | "pdf-document" | "image-document" | "excel-document" | "word-document" | "university-outline" | "task-on-progress" | "task-done" | "add" | "minus" | "text-editor-align-center" | "text-editor-align-justify" | "text-editor-align-left" | "text-editor-align-right" | "text-editor-banner" | "text-editor-bold" | "text-editor-bullet-list" | "text-editor-button" | "text-editor-decrease-indent" | "text-editor-divider" | "text-editor-footer" | "text-editor-increase-indent" | "text-editor-italic" | "text-editor-link" | "text-editor-logo" | "text-editor-mention" | "text-editor-move" | "text-editor-number-list" | "text-editor-paragraph" | "text-editor-reset-format" | "text-editor-strike" | "text-editor-text-color" | "text-editor-text" | "text-editor-underline" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "checkbox-checklist" | "checkbox-partial" | "Axis" | "DJP" | "Facebook-Messenger" | "Google" | "Gopay" | "Indosat" | "Instagram" | "JCB" | "Line" | "Livechat" | "Mastercard" | "OVO" | "PLN-Token" | "PLN" | "Shopee" | "Shopeepay" | "Smartfren" | "Telegram" | "Telkomsel" | "Tokopedia" | "Tri" | "Visa" | "WhatsApp" | "XL" | "airene-black" | "airene-brand" | "airene-outline" | "capital-black" | "capital-brand" | "capital-outline" | "mchat-black" | "mchat-brand" | "mchat-outline" | "expense-black" | "expense-brand" | "expense-outline" | "flex-black" | "flex-brand" | "flex-outline" | "insight-black" | "insight-brand" | "insight-outline" | "jurnal-black" | "jurnal-brand" | "jurnal-outline" | "klikpajak-black" | "klikpajak-brand" | "klikpajak-outline" | "mekari-black" | "mekari-brand" | "mekari-outline" | "pay-black" | "pay-brand" | "pay-outline" | "qontak-black" | "qontak-brand" | "qontak-outline" | "sign-black" | "sign-brand" | "sign-outline" | "stream-black" | "stream-brand" | "stream-outline" | "talenta-black" | "talenta-brand" | "talenta-outline" | "university-black" | "university-brand" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "full-screen" | "indicator-circle" | "indicator-square" | "loader-" | "minimize" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending" | "priority-low" | "priority-medium" | "priority-high" | "arrows-down" | "arrows-left" | "arrows-right" | "arrows-up" | "caret-down" | "caret-right" | "caret-up" | "chevrons-down" | "chevrons-forward" | "chevrons-left" | "chevrons-previous" | "chevrons-right" | "chevrons-up" | "X" | "error" | "help" | "info" | "pending" | "warning-circular" | "warning-triangle" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "action" | "add-ons" | "ai-assist" | "api" | "application" | "assets" | "attendee" | "bank" | "batch" | "billing" | "block-user" | "book" | "briefcase" | "bulk-send" | "bulk-upload" | "business-trip" | "broadcast" | "brush" | "calculator" | "cart" | "cash-advance" | "cash-in" | "cash-out" | "categories" | "certificate" | "channel" | "chart-of-account" | "chat" | "chatbot" | "cloud" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "condition" | "connected_apps" | "contact" | "dashboard" | "data-connect" | "database" | "design" | "dislike" | "decrease-kpi" | "desktop" | "document-sent" | "draft" | "education" | "email-sent" | "emeterai" | "employee" | "employee-not-found" | "employment" | "envelope" | "esignature" | "evaluation" | "expenses" | "face-recognition" | "file-change" | "file-transfer" | "finance" | "find-me" | "flag" | "fulfillment" | "gift" | "goal" | "hierarchy" | "home" | "hospital" | "inbox" | "increase-kpi" | "initials" | "join-invoice" | "key" | "lifestyle" | "like" | "loan" | "location" | "log" | "meeting-room" | "mekari_pay" | "migrate" | "mobile" | "mobile-postpaid" | "monitor-message" | "muted" | "notification" | "organizations" | "organizations-h" | "organizations-v" | "overtime" | "partner" | "password" | "payroll" | "payslip" | "people" | "performance" | "phone" | "pipeline" | "place-fields" | "plans" | "play-video" | "plugin-builder" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "succesion-plan" | "talent-management" | "theme" | "team" | "timer" | "tips" | "today" | "transfer" | "truck" | "unlock" | "upgrade" | "user-response" | "virtual-account" | "voucher" | "wallet" | "warehouse" | "whatsapp-flat" | "wifi" | "workflow" | "blank" | "copy" | "doc" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "img-break" | "pdf" | "zip" | "add-circular" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "help-centre" | "hide" | "magic" | "minus-circular" | "newtab" | "number-five" | "paint-bucket" | "pause" | "pin" | "redo" | "refresh" | "reply" | "rotate-left" | "rotate-right" | "search" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-field-2" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out">;
+        type: vue.PropType<"function" | "filter" | "done" | "caption" | "code" | "img" | "input" | "link" | "progress" | "textarea" | "time" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-available" | "stock-running-out" | "pdf-document" | "image-document" | "excel-document" | "word-document" | "university-outline" | "task-on-progress" | "task-done" | "add" | "minus" | "text-editor-align-center" | "text-editor-align-justify" | "text-editor-align-left" | "text-editor-align-right" | "text-editor-banner" | "text-editor-bold" | "text-editor-bullet-list" | "text-editor-button" | "text-editor-decrease-indent" | "text-editor-divider" | "text-editor-footer" | "text-editor-increase-indent" | "text-editor-italic" | "text-editor-link" | "text-editor-logo" | "text-editor-mention" | "text-editor-move" | "text-editor-number-list" | "text-editor-paragraph" | "text-editor-reset-format" | "text-editor-strike" | "text-editor-text-color" | "text-editor-text" | "text-editor-underline" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "checkbox-checklist" | "checkbox-partial" | "Axis" | "DJP" | "Facebook-Messenger" | "Google" | "Gopay" | "Indosat" | "Instagram" | "JCB" | "Line" | "Livechat" | "Mastercard" | "OVO" | "PLN-Token" | "PLN" | "Shopee" | "Shopeepay" | "Smartfren" | "Telegram" | "Telkomsel" | "Tokopedia" | "Tri" | "Visa" | "WhatsApp" | "XL" | "airene-black" | "airene-brand" | "airene-outline" | "capital-black" | "capital-brand" | "capital-outline" | "mchat-black" | "mchat-brand" | "mchat-outline" | "expense-black" | "expense-brand" | "expense-outline" | "flex-black" | "flex-brand" | "flex-outline" | "insight-black" | "insight-brand" | "insight-outline" | "jurnal-black" | "jurnal-brand" | "jurnal-outline" | "klikpajak-black" | "klikpajak-brand" | "klikpajak-outline" | "mekari-black" | "mekari-brand" | "mekari-outline" | "pay-black" | "pay-brand" | "pay-outline" | "qontak-black" | "qontak-brand" | "qontak-outline" | "sign-black" | "sign-brand" | "sign-outline" | "stream-black" | "stream-brand" | "stream-outline" | "talenta-black" | "talenta-brand" | "talenta-outline" | "university-black" | "university-brand" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "full-screen" | "indicator-circle" | "indicator-square" | "loader-" | "minimize" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending" | "priority-low" | "priority-medium" | "priority-high" | "arrows-down" | "arrows-left" | "arrows-right" | "arrows-up" | "caret-down" | "caret-right" | "caret-up" | "chevrons-down" | "chevrons-forward" | "chevrons-left" | "chevrons-previous" | "chevrons-right" | "chevrons-up" | "X" | "error" | "help" | "info" | "pending" | "warning-circular" | "warning-triangle" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "action" | "add-ons" | "ai-assist" | "api" | "application" | "assets" | "attendee" | "bank" | "batch" | "billing" | "block-user" | "book" | "briefcase" | "bulk-send" | "bulk-upload" | "business-trip" | "broadcast" | "brush" | "calculator" | "cart" | "cash-advance" | "cash-in" | "cash-out" | "categories" | "certificate" | "channel" | "chart-of-account" | "chat" | "chatbot" | "cloud" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "condition" | "connected_apps" | "contact" | "dashboard" | "data-connect" | "database" | "design" | "dislike" | "decrease-kpi" | "desktop" | "document-sent" | "draft" | "education" | "email-sent" | "emeterai" | "employee" | "employee-not-found" | "employment" | "envelope" | "esignature" | "evaluation" | "expenses" | "face-recognition" | "file-change" | "file-transfer" | "finance" | "find-me" | "flag" | "fulfillment" | "gift" | "goal" | "hierarchy" | "home" | "hospital" | "inbox" | "increase-kpi" | "initials" | "join-invoice" | "key" | "lifestyle" | "like" | "loan" | "location" | "log" | "meeting-room" | "mekari_pay" | "migrate" | "mobile" | "mobile-postpaid" | "monitor-message" | "muted" | "notification" | "organizations" | "organizations-h" | "organizations-v" | "overtime" | "partner" | "password" | "payroll" | "payslip" | "people" | "performance" | "phone" | "pipeline" | "place-fields" | "plans" | "play-video" | "plugin-builder" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "recall" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "succesion-plan" | "talent-management" | "theme" | "team" | "timer" | "tips" | "today" | "transfer" | "truck" | "unlock" | "upgrade" | "user-response" | "variable" | "virtual-account" | "voucher" | "wallet" | "warehouse" | "whatsapp-flat" | "wifi" | "workflow" | "blank" | "copy" | "doc" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "img-break" | "pdf" | "zip" | "add-circular" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "help-centre" | "hide" | "magic" | "minus-circular" | "newtab" | "number-five" | "paint-bucket" | "pause" | "pin" | "redo" | "refresh" | "reply" | "rotate-left" | "rotate-right" | "search" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-field-2" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out">;
     };
     iconVariant: {
         type: vue.PropType<TimelineIconVariant>;
@@ -36,8 +48,23 @@ declare const MpTimelineItem: vue.DefineComponent<{
     iconColor: {
         type: vue.PropType<string>;
     };
+    isAccordionChild: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isHideTopConnector: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isHideBottomConnector: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
 }>>, {
+    isAccordionChild: boolean;
     status: TimelineStatus;
+    isHideTopConnector: boolean;
+    isHideBottomConnector: boolean;
 }, {}>;
 
 export { MpTimelineItem };

package/dist/item.js

@@ -67,6 +67,18 @@ var timelineItemProps = {
   },
   iconColor: {
     type: String
+  },
+  isAccordionChild: {
+    type: Boolean,
+    default: false
+  },
+  isHideTopConnector: {
+    type: Boolean,
+    default: false
+  },
+  isHideBottomConnector: {
+    type: Boolean,
+    default: false
   }
 };
 var timelineSeparatorProps = {
@@ -85,11 +97,24 @@ var timelineSeparatorProps = {
   },
   iconColor: {
     type: String
+  },
+  isAccordionChild: {
+    type: [Boolean],
+    default: false
+  },
+  isHideTopConnector: {
+    type: Boolean,
+    default: false
+  },
+  isHideBottomConnector: {
+    type: Boolean,
+    default: false
   }
 };
 
 // src/separator.tsx
 var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
+var import_css = require("@mekari/pixel3-styled-system/css");
 var MpTimelineSeparator = (0, import_vue4.defineComponent)({
   name: "MpTimelineSeparator",
   props: timelineSeparatorProps,
@@ -123,23 +148,58 @@ var MpTimelineSeparator = (0, import_vue4.defineComponent)({
     };
     return () => {
       const classes = (0, import_recipes2.timelineSeparatorSlotRecipe)();
+      const iconNode = (0, import_vue3.createVNode)(import_pixel3_icon.MpIcon, {
+        "name": props.icon || iconAttrs[props.status].name,
+        "color": props.iconColor || iconAttrs[props.status].color,
+        "variant": props.iconVariant || iconAttrs[props.status].variant,
+        "size": "sm"
+      }, null);
+      const accordionIconNode = (0, import_vue3.createVNode)("div", {
+        "data-pixel-component": "MpTimelineAccordionIcon",
+        "class": (0, import_css.css)({
+          display: "flex",
+          alignItems: "center",
+          height: "6"
+        })
+      }, [(0, import_vue3.createVNode)("div", {
+        "data-pixel-component": "MpTimelineConnector",
+        "class": (0, import_css.css)({
+          height: "100%",
+          width: "2px",
+          backgroundColor: "gray.100",
+          _nextTheme: {
+            backgroundColor: "border.default"
+          }
+        })
+      }, null), (0, import_vue3.createVNode)("div", {
+        "data-pixel-component": "MpTimelineConnector",
+        "class": (0, import_css.css)({
+          height: "2px",
+          width: "16px",
+          backgroundColor: "gray.100",
+          marginRight: "1.5",
+          _nextTheme: {
+            backgroundColor: "border.default"
+          }
+        })
+      }, null), iconNode]);
       return (0, import_vue3.createVNode)("div", {
         "data-pixel-component": "MpTimelineSeparator",
+        "data-accordion-child": props.isAccordionChild || void 0,
         "class": classes.root
       }, [(0, import_vue3.createVNode)("div", {
         "data-pixel-component": "MpTimelineConnector",
+        "data-accordion-child": props.isAccordionChild || void 0,
         "data-connector": "top",
         "data-position": props.position,
+        "data-hide": props.isHideTopConnector || void 0,
         "class": classes.topConnector
-      }, null), (0, import_vue3.createVNode)(import_pixel3_icon.MpIcon, {
-        "name": props.icon || iconAttrs[props.status].name,
-        "color": props.iconColor || iconAttrs[props.status].color,
-        "variant": props.iconVariant || iconAttrs[props.status].variant,
-        "size": "sm"
-      }, null), (0, import_vue3.createVNode)("div", {
+      }, null), props.isAccordionChild ? accordionIconNode : iconNode, (0, import_vue3.createVNode)("div", {
         "data-connector": "bottom",
         "data-pixel-component": "MpTimelineConnector",
+        "data-accordion-child": props.isAccordionChild || void 0,
         "data-position": props.position,
+        "data-hide": props.isHideBottomConnector || void 0,
         "class": classes.bottomConnector
       }, null)]);
     };
@@ -165,7 +225,10 @@ var MpTimelineItem = (0, import_vue6.defineComponent)({
         "status": props.status,
         "icon": props.icon,
         "iconVariant": props.iconVariant,
-        "iconColor": props.iconColor
+        "iconColor": props.iconColor,
+        "isAccordionChild": props.isAccordionChild,
+        "isHideTopConnector": props.isHideTopConnector,
+        "isHideBottomConnector": props.isHideBottomConnector
       }, null), (0, import_vue5.createVNode)(MpTimelineBody, null, {
         default: () => [slots.default && slots.default()]
       })]);

package/dist/item.mjs

@@ -1,9 +1,9 @@
 import {
   MpTimelineItem
-} from "./chunk-ILY3Y465.mjs";
-import "./chunk-PFNAOR6K.mjs";
+} from "./chunk-HIYFHIIF.mjs";
+import "./chunk-H43TPNE5.mjs";
 import "./chunk-QHPZK7ZV.mjs";
-import "./chunk-3X4C56WA.mjs";
+import "./chunk-NQRU4NSD.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpTimelineItem