@mekari/pixel3-avatar 0.0.1-alpha.0 → 0.0.2

package/dist/avatar-excess.d.mts

@@ -1,8 +1,9 @@
 import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 
 /**
  * MpAvatarExcess component used to display more label counter.
  */
-declare const MpAvatarExcess: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpAvatarExcess: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
 export { MpAvatarExcess };

package/dist/avatar-excess.d.ts

@@ -1,8 +1,9 @@
 import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 
 /**
  * MpAvatarExcess component used to display more label counter.
  */
-declare const MpAvatarExcess: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpAvatarExcess: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
 export { MpAvatarExcess };

package/dist/avatar-fallback.d.mts

@@ -1,8 +1,9 @@
 import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 
 /**
  * MpAvatarFallback component used to display fallback icon.
  */
-declare const MpAvatarFallback: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpAvatarFallback: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
 export { MpAvatarFallback };

package/dist/avatar-fallback.d.ts

@@ -1,8 +1,9 @@
 import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 
 /**
  * MpAvatarFallback component used to display fallback icon.
  */
-declare const MpAvatarFallback: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpAvatarFallback: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
 export { MpAvatarFallback };

package/dist/avatar-group.d.mts

@@ -1,3 +1,4 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import * as vue from 'vue';
 import { AvatarSize } from './modules/avatar.types.mjs';
 import '@mekari/pixel3-utils';
@@ -24,7 +25,7 @@ declare const MpAvatarGroup: vue.DefineComponent<{
     borderColor: {
         type: vue.PropType<string | undefined>;
     };
-}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string | undefined>;
     };

package/dist/avatar-group.d.ts

@@ -1,3 +1,4 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import * as vue from 'vue';
 import { AvatarSize } from './modules/avatar.types.js';
 import '@mekari/pixel3-utils';
@@ -24,7 +25,7 @@ declare const MpAvatarGroup: vue.DefineComponent<{
     borderColor: {
         type: vue.PropType<string | undefined>;
     };
-}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string | undefined>;
     };

package/dist/avatar-group.js

@@ -24,8 +24,8 @@ __export(avatar_group_exports, {
   MpAvatarGroup: () => MpAvatarGroup
 });
 module.exports = __toCommonJS(avatar_group_exports);
+var import_vue5 = require("vue");
 var import_vue6 = require("vue");
-var import_vue7 = require("vue");
 var import_pixel3_utils3 = require("@mekari/pixel3-utils");
 
 // src/modules/avatar.props.ts
@@ -55,43 +55,30 @@ var avatarGroupEmits = (0, import_pixel3_utils.declareEmit)(["click"]);
 
 // src/modules/avatar.hooks.ts
 var import_vue2 = require("vue");
-var import_vue3 = require("@xstate/vue");
-var import_pixel3_utils2 = require("@mekari/pixel3-utils");
 var import_recipes = require("@mekari/pixel3-styled-system/recipes");
 
-// src/modules/avatar.machines.ts
-var import_xstate = require("xstate");
-function avatarGroupMachine(context) {
-  return (0, import_xstate.createMachine)({
-    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
-    id: "avatar-group",
-    context,
-    predictableActionArguments: true
-  });
-}
-__name(avatarGroupMachine, "avatarGroupMachine");
-
 // src/modules/avatar.connects.ts
 var import_vue = require("vue");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
 var import_tokens = require("@mekari/pixel3-styled-system/tokens");
-function avatarGroupConnect(state, send, classes) {
+function avatarGroupConnect(state, emit, classes) {
   const {
-    id,
-    onClick
-  } = state.context;
+    id
+  } = state;
+  const idx = id != null ? id : `mp-avatar-group-${(0, import_pixel3_utils2.useId)()}`;
   const isClickable = (0, import_vue.computed)(() => {
     var _a, _b;
     return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
   }).value;
   return {
     rootProps: {
-      id,
+      id: idx,
       class: classes.root,
       "data-pixel-component": "MpAvatarGroup"
     },
     excessProps: {
-      id: `${id}-excess`,
-      onClick,
+      id: `${idx}-excess`,
+      onClick: (evt) => emit("click", evt),
       class: classes.excess,
       style: {
         "--mp-avatar-group--cursor": isClickable ? "pointer" : void 0
@@ -104,38 +91,29 @@ __name(avatarGroupConnect, "avatarGroupConnect");
 
 // src/modules/avatar.hooks.ts
 var useAvatarGroup = /* @__PURE__ */ __name((props, emit) => {
-  var _a;
   const context = (0, import_vue2.ref)(props);
-  const {
-    state,
-    send
-  } = (0, import_vue3.useMachine)(avatarGroupMachine({
-    ...context.value,
-    id: (_a = context.value.id) != null ? _a : `mp-avatar-group-${(0, import_pixel3_utils2.useId)()}`,
-    onClick: (evt) => emit("click", evt)
-  }));
-  const [avatarGroupProps2] = import_recipes.avatarGroupSlotRecipe.splitVariantProps(context.value);
-  const classes = (0, import_recipes.avatarGroupSlotRecipe)(avatarGroupProps2);
-  return (0, import_vue2.computed)(() => avatarGroupConnect(state.value, send, classes));
+  const [value] = import_recipes.avatarGroupSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.avatarGroupSlotRecipe)(value);
+  return (0, import_vue2.computed)(() => avatarGroupConnect(context.value, emit, classes));
 }, "useAvatarGroup");
 
 // src/avatar-excess.tsx
+var import_vue3 = require("vue");
 var import_vue4 = require("vue");
-var import_vue5 = require("vue");
-var MpAvatarExcess = (0, import_vue5.defineComponent)({
+var MpAvatarExcess = (0, import_vue4.defineComponent)({
   name: "MpAvatarExcess",
   setup(_, {
     slots
   }) {
     return () => {
       var _a;
-      return (0, import_vue4.createVNode)("div", null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      return (0, import_vue3.createVNode)("div", null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
 
 // src/avatar-group.tsx
-var MpAvatarGroup = (0, import_vue7.defineComponent)({
+var MpAvatarGroup = (0, import_vue6.defineComponent)({
   name: "MpAvatarGroup",
   props: avatarGroupProps,
   emits: avatarGroupEmits,
@@ -144,18 +122,18 @@ var MpAvatarGroup = (0, import_vue7.defineComponent)({
     emit
   }) {
     const api = useAvatarGroup(props, emit);
-    const children = (0, import_vue7.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
-    const count = (0, import_vue7.computed)(() => children.value.length - (props.max || 0));
-    const cloneChildren = (0, import_vue7.computed)(() => (0, import_vue7.computed)(() => children.value.slice(0, props.max)).value.map((vnode, index) => {
+    const children = (0, import_vue6.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
+    const count = (0, import_vue6.computed)(() => children.value.length - (props.max || 0));
+    const cloneChildren = (0, import_vue6.computed)(() => (0, import_vue6.computed)(() => children.value.slice(0, props.max)).value.map((vnode, index) => {
       const overrideProps = (0, import_pixel3_utils3.objectFilterUndefined)({
         size: props.size,
         spacing: index === 0 ? 0 : props.spacing,
         hasBorder: true,
         borderColor: props.borderColor
       });
-      return (0, import_vue7.cloneVNode)(vnode, overrideProps);
+      return (0, import_vue6.cloneVNode)(vnode, overrideProps);
     }));
-    return () => (0, import_vue6.createVNode)("div", api.value.rootProps, [cloneChildren.value, count.value > 0 && props.max !== 0 && (0, import_vue6.createVNode)(MpAvatarExcess, api.value.excessProps, {
+    return () => (0, import_vue5.createVNode)("div", api.value.rootProps, [cloneChildren.value, count.value > 0 && props.max !== 0 && (0, import_vue5.createVNode)(MpAvatarExcess, api.value.excessProps, {
       default: () => [`+${count.value}`]
     })]);
   }

package/dist/avatar-group.mjs

@@ -1,11 +1,10 @@
 import {
   MpAvatarGroup
-} from "./chunk-RTYPPBOR.mjs";
+} from "./chunk-EVJ6EN34.mjs";
 import "./chunk-CY2Z6I23.mjs";
 import "./chunk-ITYXDMOF.mjs";
-import "./chunk-JVROEGO3.mjs";
-import "./chunk-U4MXRXR7.mjs";
-import "./chunk-ZMUFXMG4.mjs";
+import "./chunk-O4GQNW3M.mjs";
+import "./chunk-7XAF53OT.mjs";
 import "./chunk-ZK47OSEJ.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {

package/dist/avatar-image.d.mts

@@ -1,8 +1,9 @@
 import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 
 /**
  * MpAvatarImage component used to display profile image.
  */
-declare const MpAvatarImage: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpAvatarImage: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
 export { MpAvatarImage };

package/dist/avatar-image.d.ts

@@ -1,8 +1,9 @@
 import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 
 /**
  * MpAvatarImage component used to display profile image.
  */
-declare const MpAvatarImage: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpAvatarImage: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
 export { MpAvatarImage };

package/dist/avatar.d.mts

@@ -1,3 +1,4 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import * as vue from 'vue';
 import { AvatarSize, AvatarVariant, AvatarVariantColor } from './modules/avatar.types.mjs';
 import '@mekari/pixel3-utils';
@@ -47,7 +48,7 @@ declare const MpAvatar: vue.DefineComponent<{
         type: vue.PropType<number | undefined>;
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string | undefined>;
     };

package/dist/avatar.d.ts

@@ -1,3 +1,4 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import * as vue from 'vue';
 import { AvatarSize, AvatarVariant, AvatarVariantColor } from './modules/avatar.types.js';
 import '@mekari/pixel3-utils';
@@ -47,7 +48,7 @@ declare const MpAvatar: vue.DefineComponent<{
         type: vue.PropType<number | undefined>;
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string | undefined>;
     };

package/dist/avatar.js

@@ -24,8 +24,8 @@ __export(avatar_exports, {
   MpAvatar: () => MpAvatar
 });
 module.exports = __toCommonJS(avatar_exports);
+var import_vue7 = require("vue");
 var import_vue8 = require("vue");
-var import_vue9 = require("vue");
 
 // src/modules/avatar.props.ts
 var import_pixel3_utils = require("@mekari/pixel3-utils");
@@ -77,51 +77,11 @@ var avatarGroupEmits = (0, import_pixel3_utils.declareEmit)(["click"]);
 
 // src/modules/avatar.hooks.ts
 var import_vue2 = require("vue");
-var import_vue3 = require("@xstate/vue");
-var import_pixel3_utils2 = require("@mekari/pixel3-utils");
 var import_recipes = require("@mekari/pixel3-styled-system/recipes");
 
-// src/modules/avatar.machines.ts
-var import_xstate = require("xstate");
-function avatarMachine(context) {
-  return (0, import_xstate.createMachine)({
-    /** @xstate-layout N4IgpgJg5mDOIC5QEMBuyAuyBOA6ANgPbIQCWAdlAMQCSAsgOID6AMgPICCAIgKJcDaABgC6iUAAdCsUhlKFyYkAA9EARgAsATlwBWAMybBANgBMOgDQgAnojMncAdh0BfZ5bSYcBYmUq1GTDwASkFsQUKiSCCS0rLyiioIGtr6hqYW1ogAHA64gll6hUXFha7u6Fh4RCSQ-szBoeEiijEycgpRieoajnrqek6WNghZqrplIB6VuGDY2ITYdaycvALNUa1xHaBdgnq4mgMZw6p6Jq5uIOSEEHCKUzgtUm3xnYgAtEZDH0YTD1U+ChQJ6xdoJRDqEzfBCadR-Cpeaq3CAgl7bZSIHRGfajMzQ04uS7-GZzBaorbghB6QTabrqYx4zIjXI6AoldkXZxAA */
-    id: "avatar",
-    context,
-    initial: "loading",
-    states: {
-      loading: {
-        on: {
-          IMG_LOADED: {
-            target: "loaded"
-          },
-          IMG_ERROR: {
-            target: "error"
-          }
-        }
-      },
-      loaded: {
-        on: {
-          IMG_ERROR: {
-            target: "error"
-          }
-        }
-      },
-      error: {
-        on: {
-          IMG_LOADED: {
-            target: "loaded"
-          }
-        }
-      }
-    },
-    predictableActionArguments: true
-  });
-}
-__name(avatarMachine, "avatarMachine");
-
 // src/modules/avatar.connects.ts
 var import_vue = require("vue");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
 var import_tokens = require("@mekari/pixel3-styled-system/tokens");
 
 // src/modules/avatar.utils.ts
@@ -142,7 +102,7 @@ var isColorInList = /* @__PURE__ */ __name((value) => {
 }, "isColorInList");
 
 // src/modules/avatar.connects.ts
-function avatarConnect(state, send, classes) {
+function avatarConnect(state, emit, classes) {
   const {
     id,
     name,
@@ -153,10 +113,10 @@ function avatarConnect(state, send, classes) {
     icon,
     iconVariant,
     iconColor,
-    spacing,
-    onClick
-  } = state.context;
-  const isLoaded = state.matches("loaded");
+    spacing
+  } = state;
+  const idx = id != null ? id : `mp-avatar-${(0, import_pixel3_utils2.useId)()}`;
+  const isLoaded = (0, import_vue.ref)(false);
   const isClickable = (0, import_vue.computed)(() => {
     var _a, _b;
     return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
@@ -168,8 +128,8 @@ function avatarConnect(state, send, classes) {
     icon,
     isLoaded,
     rootProps: {
-      id,
-      onClick,
+      id: idx,
+      onClick: (evt) => emit("click", evt),
       class: classes.root,
       style: {
         "--mp-avatar--cursor": isClickable ? "pointer" : void 0,
@@ -181,33 +141,31 @@ function avatarConnect(state, send, classes) {
       "data-pixel-component": "MpAvatar"
     },
     fallbackProps: {
-      id: `${id}-fallback`,
+      id: `${idx}-fallback`,
       class: classes.fallback,
       "data-pixel-component": "MpAvatarFallback"
     },
     imageProps: {
-      id: `${id}-image`,
+      id: `${idx}-image`,
       alt: name,
       src,
-      onLoad() {
-        send({
-          type: "IMG_LOADED"
-        });
+      onLoad: (evt) => {
+        isLoaded.value = true;
+        emit("load", evt);
       },
-      onError() {
-        send({
-          type: "IMG_ERROR"
-        });
+      onError: (evt) => {
+        isLoaded.value = false;
+        emit("error", evt);
       },
       class: classes.image,
       style: {
-        "--mp-avatar--visibility": !isLoaded ? "hidden" : void 0,
-        "--mp-avatar--display": !isLoaded ? "contents" : void 0
+        "--mp-avatar--visibility": !isLoaded.value ? "hidden" : void 0,
+        "--mp-avatar--display": !isLoaded.value ? "contents" : void 0
       },
       "data-pixel-component": "MpAvatarImage"
     },
     iconProps: {
-      id: `${id}-icon`,
+      id: `${idx}-icon`,
       name: icon,
       variant: iconVariant,
       variantColor: iconColor,
@@ -220,54 +178,45 @@ __name(avatarConnect, "avatarConnect");
 
 // src/modules/avatar.hooks.ts
 var useAvatar = /* @__PURE__ */ __name((props, emit) => {
-  var _a;
   const context = (0, import_vue2.ref)(props);
-  const {
-    state,
-    send
-  } = (0, import_vue3.useMachine)(avatarMachine({
-    ...context.value,
-    id: (_a = context.value.id) != null ? _a : `mp-avatar-${(0, import_pixel3_utils2.useId)()}`,
-    onClick: (evt) => emit("click", evt)
-  }));
-  const [avatarProps2] = import_recipes.avatarSlotRecipe.splitVariantProps(context.value);
-  const classes = (0, import_recipes.avatarSlotRecipe)(avatarProps2);
-  return (0, import_vue2.computed)(() => avatarConnect(state.value, send, classes));
+  const [value] = import_recipes.avatarSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.avatarSlotRecipe)(value);
+  return (0, import_vue2.computed)(() => avatarConnect(context.value, emit, classes));
 }, "useAvatar");
 
 // src/avatar.tsx
 var import_pixel3_icon = require("@mekari/pixel3-icon");
 
 // src/avatar-fallback.tsx
+var import_vue3 = require("vue");
 var import_vue4 = require("vue");
-var import_vue5 = require("vue");
-var MpAvatarFallback = (0, import_vue5.defineComponent)({
+var MpAvatarFallback = (0, import_vue4.defineComponent)({
   name: "MpAvatarFallback",
   setup() {
-    return () => (0, import_vue4.createVNode)("div", null, [(0, import_vue4.createVNode)("svg", {
+    return () => (0, import_vue3.createVNode)("div", null, [(0, import_vue3.createVNode)("svg", {
       "fill": "#ffffff",
       "viewBox": "0 0 128 128",
       "role": "img"
-    }, [(0, import_vue4.createVNode)("path", {
+    }, [(0, import_vue3.createVNode)("path", {
       "d": "M103,102.1388 C93.094,111.92 79.3504,118 64.1638,118 C48.8056,118 34.9294,111.768 25,101.7892 L25,95.2 C25,86.8096 31.981,80 40.6,80 L87.4,80 C96.019,80 103,86.8096 103,95.2 L103,102.1388 Z"
-    }, null), (0, import_vue4.createVNode)("path", {
+    }, null), (0, import_vue3.createVNode)("path", {
       "d": "M63.9961647,24 C51.2938136,24 41,34.2938136 41,46.9961647 C41,59.7061864 51.2938136,70 63.9961647,70 C76.6985159,70 87,59.7061864 87,46.9961647 C87,34.2938136 76.6985159,24 63.9961647,24"
     }, null)])]);
   }
 });
 
 // src/avatar-image.tsx
+var import_vue5 = require("vue");
 var import_vue6 = require("vue");
-var import_vue7 = require("vue");
-var MpAvatarImage = (0, import_vue7.defineComponent)({
+var MpAvatarImage = (0, import_vue6.defineComponent)({
   name: "MpAvatarImage",
   setup() {
-    return () => (0, import_vue6.createVNode)("img", null, null);
+    return () => (0, import_vue5.createVNode)("img", null, null);
   }
 });
 
 // src/avatar.tsx
-var MpAvatar = (0, import_vue9.defineComponent)({
+var MpAvatar = (0, import_vue8.defineComponent)({
   name: "MpAvatar",
   props: avatarProps,
   emits: avatarEmits,
@@ -275,7 +224,7 @@ var MpAvatar = (0, import_vue9.defineComponent)({
     emit
   }) {
     const api = useAvatar(props, emit);
-    return () => (0, import_vue8.createVNode)("div", api.value.rootProps, [api.value.src ? (0, import_vue8.createVNode)(MpAvatarImage, api.value.imageProps, null) : void 0, !api.value.icon && !api.value.src || api.value.src && !api.value.isLoaded ? api.value.name ? getInitial(api.value.name) : (0, import_vue8.createVNode)(MpAvatarFallback, api.value.fallbackProps, null) : void 0, api.value.icon && (0, import_vue8.createVNode)(import_pixel3_icon.MpIcon, api.value.iconProps, null)]);
+    return () => (0, import_vue7.createVNode)("div", api.value.rootProps, [api.value.src ? (0, import_vue7.createVNode)(MpAvatarImage, api.value.imageProps, null) : void 0, !api.value.icon && !api.value.src || api.value.src && !api.value.isLoaded ? api.value.name ? getInitial(api.value.name) : (0, import_vue7.createVNode)(MpAvatarFallback, api.value.fallbackProps, null) : void 0, api.value.icon && (0, import_vue7.createVNode)(import_pixel3_icon.MpIcon, api.value.iconProps, null)]);
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/avatar.mjs

@@ -1,12 +1,11 @@
 import {
   MpAvatar
-} from "./chunk-43VB6T4V.mjs";
+} from "./chunk-W3IXO3TE.mjs";
 import "./chunk-NKXS73IR.mjs";
 import "./chunk-ITYXDMOF.mjs";
 import "./chunk-4VNSI4PL.mjs";
-import "./chunk-JVROEGO3.mjs";
-import "./chunk-U4MXRXR7.mjs";
-import "./chunk-ZMUFXMG4.mjs";
+import "./chunk-O4GQNW3M.mjs";
+import "./chunk-7XAF53OT.mjs";
 import "./chunk-ZK47OSEJ.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {

package/dist/{chunk-ZMUFXMG4.mjs → chunk-7XAF53OT.mjs}

@@ -7,9 +7,10 @@ import {
 } from "./chunk-QZ7VFGWC.mjs";
 
 // src/modules/avatar.connects.ts
-import { computed, getCurrentInstance } from "vue";
+import { computed, ref, getCurrentInstance } from "vue";
+import { useId } from "@mekari/pixel3-utils";
 import { token } from "@mekari/pixel3-styled-system/tokens";
-function avatarConnect(state, send, classes) {
+function avatarConnect(state, emit, classes) {
   const {
     id,
     name,
@@ -20,10 +21,10 @@ function avatarConnect(state, send, classes) {
     icon,
     iconVariant,
     iconColor,
-    spacing,
-    onClick
-  } = state.context;
-  const isLoaded = state.matches("loaded");
+    spacing
+  } = state;
+  const idx = id != null ? id : `mp-avatar-${useId()}`;
+  const isLoaded = ref(false);
   const isClickable = computed(() => {
     var _a, _b;
     return !!((_b = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
@@ -35,8 +36,8 @@ function avatarConnect(state, send, classes) {
     icon,
     isLoaded,
     rootProps: {
-      id,
-      onClick,
+      id: idx,
+      onClick: (evt) => emit("click", evt),
       class: classes.root,
       style: {
         "--mp-avatar--cursor": isClickable ? "pointer" : void 0,
@@ -48,33 +49,31 @@ function avatarConnect(state, send, classes) {
       "data-pixel-component": "MpAvatar"
     },
     fallbackProps: {
-      id: `${id}-fallback`,
+      id: `${idx}-fallback`,
       class: classes.fallback,
       "data-pixel-component": "MpAvatarFallback"
     },
     imageProps: {
-      id: `${id}-image`,
+      id: `${idx}-image`,
       alt: name,
       src,
-      onLoad() {
-        send({
-          type: "IMG_LOADED"
-        });
+      onLoad: (evt) => {
+        isLoaded.value = true;
+        emit("load", evt);
       },
-      onError() {
-        send({
-          type: "IMG_ERROR"
-        });
+      onError: (evt) => {
+        isLoaded.value = false;
+        emit("error", evt);
       },
       class: classes.image,
       style: {
-        "--mp-avatar--visibility": !isLoaded ? "hidden" : void 0,
-        "--mp-avatar--display": !isLoaded ? "contents" : void 0
+        "--mp-avatar--visibility": !isLoaded.value ? "hidden" : void 0,
+        "--mp-avatar--display": !isLoaded.value ? "contents" : void 0
       },
       "data-pixel-component": "MpAvatarImage"
     },
     iconProps: {
-      id: `${id}-icon`,
+      id: `${idx}-icon`,
       name: icon,
       variant: iconVariant,
       variantColor: iconColor,
@@ -84,24 +83,24 @@ function avatarConnect(state, send, classes) {
   };
 }
 __name(avatarConnect, "avatarConnect");
-function avatarGroupConnect(state, send, classes) {
+function avatarGroupConnect(state, emit, classes) {
   const {
-    id,
-    onClick
-  } = state.context;
+    id
+  } = state;
+  const idx = id != null ? id : `mp-avatar-group-${useId()}`;
   const isClickable = computed(() => {
     var _a, _b;
     return !!((_b = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
   }).value;
   return {
     rootProps: {
-      id,
+      id: idx,
       class: classes.root,
       "data-pixel-component": "MpAvatarGroup"
     },
     excessProps: {
-      id: `${id}-excess`,
-      onClick,
+      id: `${idx}-excess`,
+      onClick: (evt) => emit("click", evt),
       class: classes.excess,
       style: {
         "--mp-avatar-group--cursor": isClickable ? "pointer" : void 0

package/dist/{chunk-RTYPPBOR.mjs → chunk-EVJ6EN34.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-ITYXDMOF.mjs";
 import {
   useAvatarGroup
-} from "./chunk-JVROEGO3.mjs";
+} from "./chunk-O4GQNW3M.mjs";
 
 // src/avatar-group.tsx
 import { createVNode as _createVNode } from "vue";