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

package/dist/chunk-45BJFHHR.mjs

@@ -0,0 +1,117 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/input.connects.ts
+import { useFormControlContext } from "@mekari/pixel3-form-control";
+import { useId } from "@mekari/pixel3-utils";
+import { cx } from "@mekari/pixel3-styled-system/css";
+function inputConnect(state, emit, classes) {
+  const {
+    id,
+    modelValue,
+    placeholder,
+    isReadOnly,
+    isDisabled,
+    isRequired,
+    isInvalid,
+    isFullWidth,
+    isClearable
+  } = state;
+  const idx = id != null ? id : `mp-input-${useId()}`;
+  const formControlProp = useFormControlContext();
+  return {
+    modelValue,
+    isReadOnly,
+    isDisabled,
+    isClearable,
+    rootProps: {
+      id: idx,
+      class: cx(classes.root, "group"),
+      "data-is-full-width": isFullWidth,
+      "data-pixel-component": "MpInput"
+    },
+    controlProps: {
+      id: `${idx}-control`,
+      value: modelValue,
+      placeholder,
+      readonly: (formControlProp == null ? void 0 : formControlProp.value.isReadOnly) || isReadOnly,
+      disabled: (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || isDisabled,
+      required: (formControlProp == null ? void 0 : formControlProp.value.isRequired) || isRequired,
+      "data-value": modelValue,
+      "data-is-full-width": isFullWidth,
+      "aria-readonly": (formControlProp == null ? void 0 : formControlProp.value.isReadOnly) || isReadOnly,
+      "aria-disabled": (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || isDisabled,
+      "aria-invalid": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || isInvalid,
+      "aria-required": (formControlProp == null ? void 0 : formControlProp.value.isRequired) || isRequired,
+      onInput(evt) {
+        var _a, _b;
+        emit("update:modelValue", (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
+        emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
+      },
+      onChange(evt) {
+        var _a;
+        emit("change", evt, (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
+      },
+      class: classes.control,
+      "data-pixel-component": "MpInputControl"
+    },
+    clearProps: {
+      id: `${idx}-clear`,
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "reset",
+      onClick(evt) {
+        var _a, _b;
+        emit("update:modelValue", (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
+        emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
+        emit("clear", evt);
+      },
+      class: classes.clear,
+      style: {
+        "--mp-input--visibility": modelValue ? "visible" : "hidden",
+        "--mp-input--opacity": modelValue ? "1" : "0"
+      },
+      "data-pixel-component": "MpInputClear"
+    }
+  };
+}
+__name(inputConnect, "inputConnect");
+function inputGroupConnect(state, classes) {
+  const {
+    id
+  } = state;
+  const idx = id != null ? id : `mp-input-group-${useId()}`;
+  return {
+    rootProps: {
+      id: idx,
+      class: classes.root,
+      "data-pixel-component": "MpInputGroup"
+    }
+  };
+}
+__name(inputGroupConnect, "inputGroupConnect");
+function inputAddonConnect(state, classes) {
+  const {
+    id,
+    placement,
+    hasBackground
+  } = state;
+  const idx = id != null ? id : `mp-input-addon-${useId()}`;
+  return {
+    rootProps: {
+      id: idx,
+      class: classes.root,
+      "data-placement": placement,
+      "data-has-background": hasBackground,
+      "data-pixel-component": "MpInputAddon"
+    }
+  };
+}
+__name(inputAddonConnect, "inputAddonConnect");
+
+export {
+  inputConnect,
+  inputGroupConnect,
+  inputAddonConnect
+};

package/dist/{chunk-62L6URRB.mjs → chunk-4YFPKPDU.mjs}

@@ -1,6 +1,6 @@
 import {
   useInputGroup
-} from "./chunk-ME6YL7P6.mjs";
+} from "./chunk-IP4RFVD7.mjs";
 import {
   inputGroupProps
 } from "./chunk-ZQ2NFCFA.mjs";

package/dist/{chunk-AH5Q4AP2.mjs → chunk-6JUSM6A5.mjs}

@@ -1,6 +1,6 @@
 import {
   useInput
-} from "./chunk-ME6YL7P6.mjs";
+} from "./chunk-IP4RFVD7.mjs";
 import {
   inputEmits,
   inputProps
@@ -14,8 +14,10 @@ var MpInput = defineComponent({
   name: "MpInput",
   props: inputProps,
   emits: inputEmits,
+  inheritAttrs: false,
   setup(props, {
-    emit
+    emit,
+    attrs
   }) {
     const {
       as: Component
@@ -60,7 +62,7 @@ var MpInput = defineComponent({
     });
     return () => {
       var _a, _b;
-      return _createVNode("div", api.value.rootProps, [_createVNode(Component, _mergeProps(api.value.controlProps, {
+      return _createVNode("div", api.value.rootProps, [_createVNode(Component, _mergeProps(api.value.controlProps, attrs, {
         "style": {
           "--mp-input--padding-left": `${calcSpacing.value.left}px`,
           "--mp-input--padding-right": `${calcSpacing.value.right}px`,

package/dist/chunk-IP4RFVD7.mjs

@@ -0,0 +1,36 @@
+import {
+  inputAddonConnect,
+  inputConnect,
+  inputGroupConnect
+} from "./chunk-45BJFHHR.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/input.hooks.ts
+import { computed, ref } from "vue";
+import { inputSlotRecipe, inputGroupSlotRecipe, inputAddonSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var useInput = /* @__PURE__ */ __name((props, emit) => {
+  const context = ref(props);
+  const [value] = inputSlotRecipe.splitVariantProps(context.value);
+  const classes = inputSlotRecipe(value);
+  return computed(() => inputConnect(context.value, emit, classes));
+}, "useInput");
+var useInputGroup = /* @__PURE__ */ __name((props) => {
+  const context = ref(props);
+  const [value] = inputGroupSlotRecipe.splitVariantProps(context.value);
+  const classes = inputGroupSlotRecipe(value);
+  return computed(() => inputGroupConnect(context.value, classes));
+}, "useInputGroup");
+var useInputAddon = /* @__PURE__ */ __name((props) => {
+  const context = ref(props);
+  const [value] = inputAddonSlotRecipe.splitVariantProps(context.value);
+  const classes = inputAddonSlotRecipe(value);
+  return computed(() => inputAddonConnect(context.value, classes));
+}, "useInputAddon");
+
+export {
+  useInput,
+  useInputGroup,
+  useInputAddon
+};

package/dist/{chunk-JW2SLWRV.mjs → chunk-VD5GL77E.mjs}

@@ -1,6 +1,6 @@
 import {
   useInputAddon
-} from "./chunk-ME6YL7P6.mjs";
+} from "./chunk-IP4RFVD7.mjs";
 import {
   inputAddonProps
 } from "./chunk-ZQ2NFCFA.mjs";

package/dist/index.d.mts

@@ -3,4 +3,5 @@ export { MpInputGroup } from './input-group.mjs';
 export { MpInputLeftAddon, MpInputRightAddon } from './input-addon.mjs';
 export { InputAddonPlacement, InputAddonProps, InputGroupProps, InputProps, InputSize, InputVariant } from './modules/input.types.mjs';
 import '@mekari/pixel3-utils';
+import 'vue/jsx-runtime';
 import 'vue';

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export { MpInputGroup } from './input-group.js';
 export { MpInputLeftAddon, MpInputRightAddon } from './input-addon.js';
 export { InputAddonPlacement, InputAddonProps, InputGroupProps, InputProps, InputSize, InputVariant } from './modules/input.types.js';
 import '@mekari/pixel3-utils';
+import 'vue/jsx-runtime';
 import 'vue';

package/dist/index.js

@@ -29,8 +29,8 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/input.tsx
+var import_vue2 = require("vue");
 var import_vue3 = require("vue");
-var import_vue4 = require("vue");
 
 // src/modules/input.props.ts
 var import_pixel3_utils = require("@mekari/pixel3-utils");
@@ -111,62 +111,13 @@ var inputEmits = (0, import_pixel3_utils.declareEmit)(["change", "input", "clear
 
 // src/modules/input.hooks.ts
 var import_vue = require("vue");
-var import_vue2 = require("@xstate/vue");
-var import_pixel3_utils2 = require("@mekari/pixel3-utils");
 var import_recipes = require("@mekari/pixel3-styled-system/recipes");
 
-// src/modules/input.machines.ts
-var import_xstate = require("xstate");
-function inputMachine(context) {
-  return (0, import_xstate.createMachine)({
-    /** @xstate-layout N4IgpgJg5mDOIC5QEsB2AHArgFwMQGUBRAFQH0A1AQQBkBVQgbQAYBdRUdAe1mW2U9TsQAD0QBGAEwA6JrLnz5AdgA0IAJ7iJAXy2q0WPMQCaABUIUa9ZmyQguPPgKGiEEiYqkBWT00UAOADZPRQBmPwAWAE4Av1UNBDExEKlwzxCxTzFw8IDIiT9FAJ1dEFROCDghfRwhe15+QVsXEICpQrFFCXDfMKjcuPEklLSMrJy8gqLioA */
-    id: "input",
-    context: {
-      modelValue: "",
-      ...context
-    },
-    on: {
-      SET_VALUE: {
-        actions: "setValue"
-      }
-    },
-    predictableActionArguments: true
-  }, {
-    actions: {
-      setValue(ctx, evt) {
-        set.value(ctx, evt.value);
-      }
-    }
-  });
-}
-__name(inputMachine, "inputMachine");
-var set = {
-  value(ctx, value) {
-    ctx.modelValue = value;
-  }
-};
-function inputGroupMachine(context) {
-  return (0, import_xstate.createMachine)({
-    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
-    id: "input-group",
-    context,
-    predictableActionArguments: true
-  });
-}
-__name(inputGroupMachine, "inputGroupMachine");
-function inputAddonMachine(context) {
-  return (0, import_xstate.createMachine)({
-    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEsMAHAVwBcBaAQwgiw3xGK1gPIIaYA9EBGAEzoAnvwHIJyIA */
-    id: "input-addon",
-    context,
-    predictableActionArguments: true
-  });
-}
-__name(inputAddonMachine, "inputAddonMachine");
-
 // src/modules/input.connects.ts
+var import_pixel3_form_control = require("@mekari/pixel3-form-control");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
 var import_css = require("@mekari/pixel3-styled-system/css");
-function inputConnect(state, send, classes) {
+function inputConnect(state, emit, classes) {
   const {
     id,
     modelValue,
@@ -176,70 +127,56 @@ function inputConnect(state, send, classes) {
     isRequired,
     isInvalid,
     isFullWidth,
-    isClearable,
-    onInput,
-    onChange,
-    onClear
-  } = state.context;
+    isClearable
+  } = state;
+  const idx = id != null ? id : `mp-input-${(0, import_pixel3_utils2.useId)()}`;
+  const formControlProp = (0, import_pixel3_form_control.useFormControlContext)();
   return {
     modelValue,
     isReadOnly,
     isDisabled,
     isClearable,
     rootProps: {
-      id,
+      id: idx,
       class: (0, import_css.cx)(classes.root, "group"),
       "data-is-full-width": isFullWidth,
       "data-pixel-component": "MpInput"
     },
     controlProps: {
-      id: `${id}-control`,
+      id: `${idx}-control`,
       value: modelValue,
       placeholder,
-      readonly: isReadOnly,
-      disabled: isDisabled,
-      required: isRequired,
+      readonly: (formControlProp == null ? void 0 : formControlProp.value.isReadOnly) || isReadOnly,
+      disabled: (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || isDisabled,
+      required: (formControlProp == null ? void 0 : formControlProp.value.isRequired) || isRequired,
       "data-value": modelValue,
       "data-is-full-width": isFullWidth,
-      "aria-readonly": isReadOnly,
-      "aria-disabled": isDisabled,
-      "aria-invalid": isInvalid,
-      "aria-required": isRequired,
+      "aria-readonly": (formControlProp == null ? void 0 : formControlProp.value.isReadOnly) || isReadOnly,
+      "aria-disabled": (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || isDisabled,
+      "aria-invalid": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || isInvalid,
+      "aria-required": (formControlProp == null ? void 0 : formControlProp.value.isRequired) || isRequired,
       onInput(evt) {
-        var _a;
-        send({
-          type: "SET_VALUE",
-          value: (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value
-        });
-        if (onInput)
-          onInput(evt);
+        var _a, _b;
+        emit("update:modelValue", (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
+        emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
       },
       onChange(evt) {
         var _a;
-        send({
-          type: "SET_VALUE",
-          value: (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value
-        });
-        if (onChange)
-          onChange(evt);
+        emit("change", evt, (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
       },
       class: classes.control,
       "data-pixel-component": "MpInputControl"
     },
     clearProps: {
-      id: `${id}-clear`,
+      id: `${idx}-clear`,
       variant: "ghost",
       size: "sm",
       leftIcon: "reset",
       onClick(evt) {
-        send({
-          type: "SET_VALUE",
-          value: null
-        });
-        if (onInput)
-          onInput(evt);
-        if (onClear)
-          onClear(evt);
+        var _a, _b;
+        emit("update:modelValue", (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
+        emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
+        emit("clear", evt);
       },
       class: classes.clear,
       style: {
@@ -251,28 +188,30 @@ function inputConnect(state, send, classes) {
   };
 }
 __name(inputConnect, "inputConnect");
-function inputGroupConnect(state, send, classes) {
+function inputGroupConnect(state, classes) {
   const {
     id
-  } = state.context;
+  } = state;
+  const idx = id != null ? id : `mp-input-group-${(0, import_pixel3_utils2.useId)()}`;
   return {
     rootProps: {
-      id,
+      id: idx,
       class: classes.root,
       "data-pixel-component": "MpInputGroup"
     }
   };
 }
 __name(inputGroupConnect, "inputGroupConnect");
-function inputAddonConnect(state, send, classes) {
+function inputAddonConnect(state, classes) {
   const {
     id,
     placement,
     hasBackground
-  } = state.context;
+  } = state;
+  const idx = id != null ? id : `mp-input-addon-${(0, import_pixel3_utils2.useId)()}`;
   return {
     rootProps: {
-      id,
+      id: idx,
       class: classes.root,
       "data-placement": placement,
       "data-has-background": hasBackground,
@@ -284,83 +223,49 @@ __name(inputAddonConnect, "inputAddonConnect");
 
 // src/modules/input.hooks.ts
 var useInput = /* @__PURE__ */ __name((props, emit) => {
-  var _a;
   const context = (0, import_vue.ref)(props);
-  const {
-    state,
-    send
-  } = (0, import_vue2.useMachine)(inputMachine({
-    ...context.value,
-    id: (_a = context.value.id) != null ? _a : `mp-input-${(0, import_pixel3_utils2.useId)()}`,
-    onInput(evt) {
-      var _a2, _b;
-      emit("update:modelValue", (_a2 = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a2.value);
-      emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
-    },
-    onChange(evt) {
-      var _a2;
-      emit("change", evt, (_a2 = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a2.value);
-    },
-    onClear(evt) {
-      emit("clear", evt);
-    }
-  }));
-  const [inputProps2] = import_recipes.inputSlotRecipe.splitVariantProps(context.value);
-  const classes = (0, import_recipes.inputSlotRecipe)(inputProps2);
-  return (0, import_vue.computed)(() => inputConnect(state.value, send, classes));
+  const [value] = import_recipes.inputSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.inputSlotRecipe)(value);
+  return (0, import_vue.computed)(() => inputConnect(context.value, emit, classes));
 }, "useInput");
 var useInputGroup = /* @__PURE__ */ __name((props) => {
-  var _a;
   const context = (0, import_vue.ref)(props);
-  const {
-    state,
-    send
-  } = (0, import_vue2.useMachine)(inputGroupMachine({
-    ...context.value,
-    id: (_a = context.value.id) != null ? _a : `mp-input-group-${(0, import_pixel3_utils2.useId)()}`
-  }));
-  const [inputGroupProps2] = import_recipes.inputGroupSlotRecipe.splitVariantProps(context.value);
-  const classes = (0, import_recipes.inputGroupSlotRecipe)(inputGroupProps2);
-  return (0, import_vue.computed)(() => inputGroupConnect(state.value, send, classes));
+  const [value] = import_recipes.inputGroupSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.inputGroupSlotRecipe)(value);
+  return (0, import_vue.computed)(() => inputGroupConnect(context.value, classes));
 }, "useInputGroup");
 var useInputAddon = /* @__PURE__ */ __name((props) => {
-  var _a;
   const context = (0, import_vue.ref)(props);
-  const {
-    state,
-    send
-  } = (0, import_vue2.useMachine)(inputAddonMachine({
-    ...context.value,
-    id: (_a = context.value.id) != null ? _a : `mp-input-addon-${(0, import_pixel3_utils2.useId)()}`
-  }));
-  const [inputAddonProps2] = import_recipes.inputAddonSlotRecipe.splitVariantProps(context.value);
-  const classes = (0, import_recipes.inputAddonSlotRecipe)(inputAddonProps2);
-  return (0, import_vue.computed)(() => inputAddonConnect(state.value, send, classes));
+  const [value] = import_recipes.inputAddonSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.inputAddonSlotRecipe)(value);
+  return (0, import_vue.computed)(() => inputAddonConnect(context.value, classes));
 }, "useInputAddon");
 
 // src/input.tsx
 var import_pixel3_button = require("@mekari/pixel3-button");
-var MpInput = (0, import_vue4.defineComponent)({
+var MpInput = (0, import_vue3.defineComponent)({
   name: "MpInput",
   props: inputProps,
   emits: inputEmits,
+  inheritAttrs: false,
   setup(props, {
-    emit
+    emit,
+    attrs
   }) {
     const {
       as: Component
     } = props;
     const api = useInput(props, emit);
-    const calcSpacing = (0, import_vue4.ref)({
+    const calcSpacing = (0, import_vue3.ref)({
       left: 12,
       right: 12
     });
-    const calcPosition = (0, import_vue4.ref)({
+    const calcPosition = (0, import_vue3.ref)({
       right: 12
     });
-    (0, import_vue4.onMounted)(() => {
+    (0, import_vue3.onMounted)(() => {
       var _a, _b, _c;
-      const node = (_c = (_b = (_a = (0, import_vue4.getCurrentInstance)()) == null ? void 0 : _a.parent) == null ? void 0 : _b.subTree) == null ? void 0 : _c.children[0].children;
+      const node = (_c = (_b = (_a = (0, import_vue3.getCurrentInstance)()) == null ? void 0 : _a.parent) == null ? void 0 : _b.subTree) == null ? void 0 : _c.children[0].children;
       let isClearable = false;
       node == null ? void 0 : node.map((vnode) => {
         var _a2, _b2, _c2, _d, _e, _f;
@@ -390,13 +295,13 @@ var MpInput = (0, import_vue4.defineComponent)({
     });
     return () => {
       var _a, _b;
-      return (0, import_vue3.createVNode)("div", api.value.rootProps, [(0, import_vue3.createVNode)(Component, (0, import_vue3.mergeProps)(api.value.controlProps, {
+      return (0, import_vue2.createVNode)("div", api.value.rootProps, [(0, import_vue2.createVNode)(Component, (0, import_vue2.mergeProps)(api.value.controlProps, attrs, {
         "style": {
           "--mp-input--padding-left": `${calcSpacing.value.left}px`,
           "--mp-input--padding-right": `${calcSpacing.value.right}px`,
           ...(_a = api.value.controlProps) == null ? void 0 : _a.style
         }
-      }), null), !api.value.isReadOnly && !api.value.isDisabled && api.value.isClearable && (0, import_vue3.createVNode)(import_pixel3_button.MpButton, (0, import_vue3.mergeProps)(api.value.clearProps, {
+      }), null), !api.value.isReadOnly && !api.value.isDisabled && api.value.isClearable && (0, import_vue2.createVNode)(import_pixel3_button.MpButton, (0, import_vue2.mergeProps)(api.value.clearProps, {
         "style": {
           "--mp-input--right": `${calcPosition.value.right}px`,
           ...(_b = api.value.clearProps) == null ? void 0 : _b.style
@@ -407,31 +312,31 @@ var MpInput = (0, import_vue4.defineComponent)({
 });
 
 // src/input-group.tsx
+var import_vue4 = require("vue");
 var import_vue5 = require("vue");
-var import_vue6 = require("vue");
 var import_pixel3_utils3 = require("@mekari/pixel3-utils");
-var MpInputGroup = (0, import_vue6.defineComponent)({
+var MpInputGroup = (0, import_vue5.defineComponent)({
   name: "MpInputGroup",
   props: inputGroupProps,
   setup(props, {
     slots
   }) {
     const api = useInputGroup(props);
-    const children = (0, import_vue6.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
-    const cloneChildren = (0, import_vue6.computed)(() => (0, import_vue6.computed)(() => children.value).value.map((vnode) => {
+    const children = (0, import_vue5.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
+    const cloneChildren = (0, import_vue5.computed)(() => (0, import_vue5.computed)(() => children.value).value.map((vnode) => {
       const overrideProps = (0, import_pixel3_utils3.objectFilterUndefined)({
         size: props.size
       });
-      return (0, import_vue6.cloneVNode)(vnode, overrideProps);
+      return (0, import_vue5.cloneVNode)(vnode, overrideProps);
     }));
-    return () => (0, import_vue5.createVNode)("div", api.value.rootProps, [cloneChildren.value]);
+    return () => (0, import_vue4.createVNode)("div", api.value.rootProps, [cloneChildren.value]);
   }
 });
 
 // src/input-addon.tsx
+var import_vue6 = require("vue");
 var import_vue7 = require("vue");
-var import_vue8 = require("vue");
-var MpInputAddon = (0, import_vue8.defineComponent)({
+var MpInputAddon = (0, import_vue7.defineComponent)({
   name: "MpInputAddon",
   props: inputAddonProps,
   setup(props, {
@@ -440,16 +345,16 @@ var MpInputAddon = (0, import_vue8.defineComponent)({
     const api = useInputAddon(props);
     return () => {
       var _a;
-      return (0, import_vue7.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      return (0, import_vue6.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
-var MpInputLeftAddon = (0, import_vue8.defineComponent)({
+var MpInputLeftAddon = (0, import_vue7.defineComponent)({
   name: "MpInputLeftAddon",
   setup(_, {
     slots
   }) {
-    return () => (0, import_vue7.createVNode)(MpInputAddon, {
+    return () => (0, import_vue6.createVNode)(MpInputAddon, {
       "placement": "left"
     }, {
       default: () => {
@@ -459,12 +364,12 @@ var MpInputLeftAddon = (0, import_vue8.defineComponent)({
     });
   }
 });
-var MpInputRightAddon = (0, import_vue8.defineComponent)({
+var MpInputRightAddon = (0, import_vue7.defineComponent)({
   name: "MpInputRightAddon",
   setup(_, {
     slots
   }) {
-    return () => (0, import_vue7.createVNode)(MpInputAddon, {
+    return () => (0, import_vue6.createVNode)(MpInputAddon, {
       "placement": "right"
     }, {
       default: () => {

package/dist/index.mjs

@@ -1,16 +1,15 @@
 import {
   MpInputLeftAddon,
   MpInputRightAddon
-} from "./chunk-JW2SLWRV.mjs";
+} from "./chunk-VD5GL77E.mjs";
 import {
   MpInputGroup
-} from "./chunk-62L6URRB.mjs";
+} from "./chunk-4YFPKPDU.mjs";
 import {
   MpInput
-} from "./chunk-AH5Q4AP2.mjs";
-import "./chunk-ME6YL7P6.mjs";
-import "./chunk-T766ACNL.mjs";
-import "./chunk-EF6JEV72.mjs";
+} from "./chunk-6JUSM6A5.mjs";
+import "./chunk-IP4RFVD7.mjs";
+import "./chunk-45BJFHHR.mjs";
 import "./chunk-ZQ2NFCFA.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {

package/dist/input-addon.d.mts

@@ -1,3 +1,4 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import { InputSize, InputAddonPlacement } from './modules/input.types.mjs';
 import * as vue from 'vue';
 import '@mekari/pixel3-utils';
@@ -21,7 +22,7 @@ declare const MpInputAddon: vue.DefineComponent<{
         type: vue.PropType<boolean | undefined>;
         default: boolean;
     };
-}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string | undefined>;
     };
@@ -42,7 +43,7 @@ declare const MpInputAddon: vue.DefineComponent<{
     placement: InputAddonPlacement | undefined;
     hasBackground: boolean | undefined;
 }, {}>;
-declare const MpInputLeftAddon: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
-declare const MpInputRightAddon: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpInputLeftAddon: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpInputRightAddon: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
 
 export { MpInputAddon, MpInputLeftAddon, MpInputRightAddon };