@mekari/pixel3-accordion 0.0.16 → 0.0.17-dev.1

package/dist/accordion.js

@@ -39,7 +39,7 @@ var accordionProps = {
   },
   isAllowMultiple: {
     type: Boolean,
-    default: false
+    default: true
   },
   isAllowToggle: {
     type: Boolean,

package/dist/accordion.mjs

@@ -1,9 +1,9 @@
 import {
   MpAccordion
-} from "./chunk-JZLHT46J.mjs";
-import "./chunk-EGSWNAP7.mjs";
+} from "./chunk-XNRE5EMB.mjs";
+import "./chunk-ZK6YJPR2.mjs";
 import "./chunk-PFYTMT2T.mjs";
-import "./chunk-IVT3BYAK.mjs";
+import "./chunk-PP3LW2LX.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpAccordion

package/dist/{chunk-OPRYKB4H.mjs → chunk-GFOTGYER.mjs}

@@ -3,30 +3,34 @@ import {
 } from "./chunk-PFYTMT2T.mjs";
 
 // src/panel.tsx
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 import { defineComponent } from "vue";
 import { MpCollapse } from "@mekari/pixel3-collapse";
 import { accordionSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
 var MpAccordionPanel = defineComponent({
   name: "MpAccordionPanel",
   setup(_props, {
-    slots
+    slots,
+    attrs
   }) {
-    const classes = accordionSlotRecipe();
     const {
       isExpanded,
-      id
+      id,
+      props: itemProps
     } = useAccordionItemContext();
+    const classes = accordionSlotRecipe({
+      iconPosition: itemProps.iconPosition.value
+    });
     return () => {
       return _createVNode(MpCollapse, {
         "isOpen": isExpanded.value
       }, {
-        default: () => [_createVNode("div", {
+        default: () => [_createVNode("div", _mergeProps({
           "data-pixel-component": "MpAccordionPanel",
           "id": `accordin-panel-${id}`,
           "aria-labelledby": `accordion-header-${id}`,
           "class": classes.panel
-        }, [slots.default()])]
+        }, attrs), [slots.default()])]
       });
     };
   }

package/dist/{chunk-YHACEN5H.mjs → chunk-KUNOH5B2.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-PFYTMT2T.mjs";
 import {
   accordionHeaderProps
-} from "./chunk-IVT3BYAK.mjs";
+} from "./chunk-PP3LW2LX.mjs";
 
 // src/header.tsx
 import { createVNode as _createVNode } from "vue";
@@ -15,24 +15,30 @@ var MpAccordionHeader = defineComponent({
   setup(props, {
     slots
   }) {
-    const classes = accordionSlotRecipe({
-      isClickable: props.isClickable
-    });
     const {
       isExpanded,
       onToggle,
-      id
+      id,
+      props: itemProps
     } = useAccordionItemContext();
     return () => {
-      return _createVNode("button", {
+      const classes = accordionSlotRecipe({
+        isClickable: props.isClickable,
+        iconPosition: itemProps.iconPosition.value
+      });
+      return _createVNode("div", {
         "data-pixel-component": "MpAccordionHeader",
-        "type": "button",
+        "role": "button",
         "id": `accordion-header-${id}`,
         "aria-expanded": isExpanded.value,
         "aria-controls": `accordion-panel-${id}`,
         "class": classes.header,
         "onClick": onToggle
-      }, [slots.default()]);
+      }, [_createVNode("div", {
+        "class": classes.headerTitle
+      }, [slots.default()]), slots.description && _createVNode("div", {
+        "class": classes.headerDescription
+      }, [slots.description()])]);
     };
   }
 });

package/dist/{chunk-GSSAU6GB.mjs → chunk-PMTOCJCB.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-PFYTMT2T.mjs";
 import {
   accordionIconProps
-} from "./chunk-IVT3BYAK.mjs";
+} from "./chunk-PP3LW2LX.mjs";
 
 // src/icon.tsx
 import { createVNode as _createVNode } from "vue";
@@ -14,7 +14,8 @@ var MpAccordionIcon = defineComponent({
   props: accordionIconProps,
   setup(props) {
     const {
-      isExpanded
+      isExpanded,
+      props: itemProps
     } = useAccordionItemContext();
     return () => {
       return _createVNode(MpIcon, {
@@ -23,7 +24,7 @@ var MpAccordionIcon = defineComponent({
         "color": props.color,
         "variant": props.variant,
         "style": {
-          transform: isExpanded.value ? "rotate(-180deg)" : "rotate(0)",
+          transform: isExpanded.value ? itemProps.iconPosition.value === "start" ? "rotate(90deg)" : "rotate(-180deg)" : "rotate(0)",
           transition: "transform 0.2s",
           transformOrigin: "center"
         }

package/dist/{chunk-IVT3BYAK.mjs → chunk-PP3LW2LX.mjs}

@@ -5,7 +5,7 @@ var accordionProps = {
   },
   isAllowMultiple: {
     type: Boolean,
-    default: false
+    default: true
   },
   isAllowToggle: {
     type: Boolean,
@@ -34,6 +34,10 @@ var accordionItemProps = {
   isDisabled: {
     type: Boolean,
     default: false
+  },
+  iconPosition: {
+    type: String,
+    default: "end"
   }
 };
 var accordionHeaderProps = {
@@ -53,7 +57,7 @@ var accordionIconProps = {
   },
   color: {
     type: String,
-    default: "gray.600"
+    default: ""
   },
   variant: {
     type: String,

package/dist/{chunk-KDVXCH36.mjs → chunk-QTBSPFGA.mjs}

@@ -1,12 +1,12 @@
 import {
   useAccordionItem
-} from "./chunk-EGSWNAP7.mjs";
+} from "./chunk-ZK6YJPR2.mjs";
 import {
   AccordionItemProvider
 } from "./chunk-PFYTMT2T.mjs";
 import {
   accordionItemProps
-} from "./chunk-IVT3BYAK.mjs";
+} from "./chunk-PP3LW2LX.mjs";
 
 // src/item.tsx
 import { createVNode as _createVNode } from "vue";
@@ -22,12 +22,14 @@ var MpAccordionItem = defineComponent({
     const {
       isExpanded,
       onToggle,
-      id
+      id,
+      props: itemProps
     } = useAccordionItem(props);
     AccordionItemProvider({
       isExpanded,
       onToggle,
-      id
+      id,
+      props: itemProps
     });
     return () => {
       return _createVNode("div", {

package/dist/{chunk-JZLHT46J.mjs → chunk-XNRE5EMB.mjs}

@@ -1,12 +1,12 @@
 import {
   useAccordion
-} from "./chunk-EGSWNAP7.mjs";
+} from "./chunk-ZK6YJPR2.mjs";
 import {
   AccordionProvider
 } from "./chunk-PFYTMT2T.mjs";
 import {
   accordionProps
-} from "./chunk-IVT3BYAK.mjs";
+} from "./chunk-PP3LW2LX.mjs";
 
 // src/accordion.tsx
 import { createVNode as _createVNode } from "vue";

package/dist/{chunk-EGSWNAP7.mjs → chunk-ZK6YJPR2.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-QZ7VFGWC.mjs";
 
 // src/modules/useAccordion.ts
-import { ref, computed } from "vue";
+import { ref, computed, toRefs } from "vue";
 import { useId } from "@mekari/pixel3-utils";
 function useAccordion(props, emit) {
   const expandedIndex = ref(props.defaultIndexOpen);
@@ -54,7 +54,8 @@ function useAccordionItem(props) {
   return {
     isExpanded,
     onToggle,
-    id
+    id,
+    props: toRefs(props)
   };
 }
 __name(useAccordionItem, "useAccordionItem");

package/dist/header.js

@@ -47,24 +47,30 @@ var MpAccordionHeader = (0, import_vue2.defineComponent)({
   setup(props, {
     slots
   }) {
-    const classes = (0, import_recipes.accordionSlotRecipe)({
-      isClickable: props.isClickable
-    });
     const {
       isExpanded,
       onToggle,
-      id
+      id,
+      props: itemProps
     } = useAccordionItemContext();
     return () => {
-      return (0, import_vue.createVNode)("button", {
+      const classes = (0, import_recipes.accordionSlotRecipe)({
+        isClickable: props.isClickable,
+        iconPosition: itemProps.iconPosition.value
+      });
+      return (0, import_vue.createVNode)("div", {
         "data-pixel-component": "MpAccordionHeader",
-        "type": "button",
+        "role": "button",
         "id": `accordion-header-${id}`,
         "aria-expanded": isExpanded.value,
         "aria-controls": `accordion-panel-${id}`,
         "class": classes.header,
         "onClick": onToggle
-      }, [slots.default()]);
+      }, [(0, import_vue.createVNode)("div", {
+        "class": classes.headerTitle
+      }, [slots.default()]), slots.description && (0, import_vue.createVNode)("div", {
+        "class": classes.headerDescription
+      }, [slots.description()])]);
     };
   }
 });

package/dist/header.mjs

@@ -1,8 +1,8 @@
 import {
   MpAccordionHeader
-} from "./chunk-YHACEN5H.mjs";
+} from "./chunk-KUNOH5B2.mjs";
 import "./chunk-PFYTMT2T.mjs";
-import "./chunk-IVT3BYAK.mjs";
+import "./chunk-PP3LW2LX.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpAccordionHeader

package/dist/icon.d.mts

@@ -1,13 +1,14 @@
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import * as vue from 'vue';
+import { AccordionSize, AccordionVariant } from './modules/accordion.types.mjs';
 
 declare const MpAccordionIcon: vue.DefineComponent<{
     name: {
-        type: vue.PropType<"filter" | "done" | "search" | "link" | "code" | "img" | "progress" | "time" | "reset" | "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-left" | "text-editor-banner" | "text-editor-button" | "text-editor-divider" | "text-editor-footer" | "text-editor-logo" | "text-editor-move" | "text-editor-paragraph" | "text-editor-text" | "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" | "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" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "headphone" | "mic" | "mic-mute" | "account-mapping" | "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" | "connected_apps" | "contact" | "dashboard" | "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" | "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" | "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" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out">;
+        type: vue.PropType<"done" | "error" | "help" | "info" | "pending" | "priority-high" | "priority-low" | "priority-medium" | "progress" | "warning-circular" | "warning-triangle" | "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" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "caption" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "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" | "code" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "connected_apps" | "contact" | "dashboard" | "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" | "filter" | "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" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "stock-available" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-running-out" | "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" | "excel-document" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "image-document" | "img-break" | "img" | "pdf-document" | "pdf" | "word-document" | "zip" | "add-circular" | "add" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "checkbox-checklist" | "checkbox-partial" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "full-screen" | "help-centre" | "hide" | "magic" | "minimize" | "minus-circular" | "minus" | "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-filter" | "table-view-list" | "table-view-sort" | "task-done" | "task-on-progress" | "task-todo" | "text-editor-align-left" | "text-editor-banner" | "text-editor-button" | "text-editor-divider" | "text-editor-footer" | "text-editor-logo" | "text-editor-move" | "text-editor-paragraph" | "text-editor-text" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "time" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out" | "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" | "university-outline" | "X" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "indicator-circle" | "indicator-square" | "link" | "loader-" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending">;
         default: string;
     };
     size: {
-        type: vue.PropType<"sm" | "md">;
+        type: vue.PropType<AccordionSize>;
         default: string;
     };
     color: {
@@ -15,16 +16,16 @@ declare const MpAccordionIcon: vue.DefineComponent<{
         default: string;
     };
     variant: {
-        type: vue.PropType<"fill" | "outline" | "duotone">;
+        type: vue.PropType<AccordionVariant>;
         default: string;
     };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     name: {
-        type: vue.PropType<"filter" | "done" | "search" | "link" | "code" | "img" | "progress" | "time" | "reset" | "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-left" | "text-editor-banner" | "text-editor-button" | "text-editor-divider" | "text-editor-footer" | "text-editor-logo" | "text-editor-move" | "text-editor-paragraph" | "text-editor-text" | "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" | "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" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "headphone" | "mic" | "mic-mute" | "account-mapping" | "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" | "connected_apps" | "contact" | "dashboard" | "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" | "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" | "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" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out">;
+        type: vue.PropType<"done" | "error" | "help" | "info" | "pending" | "priority-high" | "priority-low" | "priority-medium" | "progress" | "warning-circular" | "warning-triangle" | "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" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "caption" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "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" | "code" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "connected_apps" | "contact" | "dashboard" | "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" | "filter" | "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" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "stock-available" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-running-out" | "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" | "excel-document" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "image-document" | "img-break" | "img" | "pdf-document" | "pdf" | "word-document" | "zip" | "add-circular" | "add" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "checkbox-checklist" | "checkbox-partial" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "full-screen" | "help-centre" | "hide" | "magic" | "minimize" | "minus-circular" | "minus" | "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-filter" | "table-view-list" | "table-view-sort" | "task-done" | "task-on-progress" | "task-todo" | "text-editor-align-left" | "text-editor-banner" | "text-editor-button" | "text-editor-divider" | "text-editor-footer" | "text-editor-logo" | "text-editor-move" | "text-editor-paragraph" | "text-editor-text" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "time" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out" | "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" | "university-outline" | "X" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "indicator-circle" | "indicator-square" | "link" | "loader-" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending">;
         default: string;
     };
     size: {
-        type: vue.PropType<"sm" | "md">;
+        type: vue.PropType<AccordionSize>;
         default: string;
     };
     color: {
@@ -32,14 +33,14 @@ declare const MpAccordionIcon: vue.DefineComponent<{
         default: string;
     };
     variant: {
-        type: vue.PropType<"fill" | "outline" | "duotone">;
+        type: vue.PropType<AccordionVariant>;
         default: string;
     };
 }>>, {
-    name: "filter" | "done" | "search" | "link" | "code" | "img" | "progress" | "time" | "reset" | "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-left" | "text-editor-banner" | "text-editor-button" | "text-editor-divider" | "text-editor-footer" | "text-editor-logo" | "text-editor-move" | "text-editor-paragraph" | "text-editor-text" | "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" | "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" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "headphone" | "mic" | "mic-mute" | "account-mapping" | "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" | "connected_apps" | "contact" | "dashboard" | "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" | "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" | "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" | "settings" | "show" | "sign-in" | "sign-out" | "table-view-column" | "table-view-field" | "table-view-filter" | "table-view-list" | "table-view-sort" | "task-todo" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out";
-    size: "sm" | "md";
-    variant: "fill" | "outline" | "duotone";
+    name: "done" | "error" | "help" | "info" | "pending" | "priority-high" | "priority-low" | "priority-medium" | "progress" | "warning-circular" | "warning-triangle" | "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" | "backspace" | "call-active" | "call-add" | "call-declined" | "call-disabled" | "call-end" | "call-incoming" | "call-outgoing" | "call-pause" | "caption" | "globe" | "headphone" | "mic" | "mic-mute" | "picture-in-picture" | "share-screen" | "account-mapping" | "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" | "code" | "column-settings" | "comment" | "commuting" | "company" | "competencies" | "connected_apps" | "contact" | "dashboard" | "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" | "filter" | "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" | "policy" | "productivity" | "products" | "profile" | "promo" | "protection" | "receipt-lock" | "reimbursement" | "reports" | "restore" | "roles" | "sales" | "scan" | "schedule" | "security" | "sent" | "share" | "shop" | "sidebar-pin" | "stamp" | "stock-available" | "stock-bulk-update-sku" | "stock-out-of-stock" | "stock-running-out" | "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" | "excel-document" | "file-audio" | "file-code" | "file-image" | "file-music" | "file-video" | "folder-close" | "folder-open" | "folder-transfer-close" | "folder-transfer-open" | "id-card" | "image-document" | "img-break" | "img" | "pdf-document" | "pdf" | "word-document" | "zip" | "add-circular" | "add" | "approval-rules" | "attachment" | "calendar" | "camera" | "chart-bar" | "chart-bar-line" | "chart-line" | "checkbox-checklist" | "checkbox-partial" | "delete" | "download" | "edit" | "emoji" | "empty" | "fingerprint" | "forward" | "full-screen" | "help-centre" | "hide" | "magic" | "minimize" | "minus-circular" | "minus" | "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-filter" | "table-view-list" | "table-view-sort" | "task-done" | "task-on-progress" | "task-todo" | "text-editor-align-left" | "text-editor-banner" | "text-editor-button" | "text-editor-divider" | "text-editor-footer" | "text-editor-logo" | "text-editor-move" | "text-editor-paragraph" | "text-editor-text" | "text-editor-variable" | "text-editor-write" | "text-editor-list" | "time" | "undo" | "upload" | "verified" | "video-recorder" | "zoom-in" | "zoom-out" | "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" | "university-outline" | "X" | "accordion-collapse" | "accordion-expand" | "apply-all" | "arrow-collapse" | "arrow-expand" | "burger" | "check" | "close" | "crop" | "drag" | "fit-screen" | "indicator-circle" | "indicator-square" | "link" | "loader-" | "menu-kebab" | "menu-meatball" | "remove-tag" | "reset" | "shortcuts" | "sliders" | "sort-ascending" | "sort-default" | "sort-descending";
+    size: AccordionSize;
     color: string;
+    variant: AccordionVariant;
 }, {}>;
 
 export { MpAccordionIcon };